/*
  Homepage (SITE-1448), from the 10/20 homepage handoff: tiger hero, radar band,
  Holly AI signals, "What is Trade Ideas?", brokers and partners, closing band.
  Loads after theme.css, competitor-pages.css (story blocks, FAQ, figure.shot,
  .fp-close, radar) and feature-pages.css (the live #stock-ticker cards).
  Values come only from the --ti-* tokens in theme.css. The homepage H1 is the
  one heading with its own size (--ti-fs-h1-home); every H2 uses the theme size.
*/

/* ==========================================================================
   Top nav, TEMPORARY until the new navigation ships: on the homepage the
   shared nav (marketing/templates/top_nav_dark.html) gets a see-through dark
   tint, and the hero slides up under it so the tiger shows faintly behind.
   The nav is 84px tall at every width. With the mobile menu open the nav goes
   solid so its links stay readable. Remove this block with the new nav.
   ========================================================================== */

#navbar-template.navbar-template-dark { background-color: var(--ti-scrim) !important; }
#navbar-template.navbar-template-dark:has(.navbar-collapse.show) { background-color: var(--ti-bg) !important; }
.ti-home .hm-hero {
  --hm-nav-h: 84px;
  margin-top: calc(-1 * var(--hm-nav-h));
  padding-top: var(--hm-nav-h);
}

/* ==========================================================================
   Hero: full-bleed tiger photo, copy on the left, product clips on the right
   ========================================================================== */

.ti-home .hm-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: calc(100svh - 92px + var(--hm-nav-h));
  overflow: hidden;
  background: var(--ti-bg-deep) url("/MainSite/images/hero/hero-tiger.webp") 72% 40% / cover no-repeat;
}
/* scrim: dark behind the copy (left) and the trust line (bottom) */
.ti-home .hm-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--ti-scrim-strong) 0%, var(--ti-scrim) 34%, var(--ti-scrim-soft) 48%, transparent 64%),
    linear-gradient(0deg, var(--ti-scrim-strong) 0%, transparent 38%);
  pointer-events: none;
}
.ti-home .hm-hero__in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
  gap: 32px;
  align-items: end;
  width: 100%;
  padding-top: 48px;
  padding-bottom: 22px;
}
.ti-home .hm-hero__copy { min-width: 0; }

.ti-home .hm-badge {
  position: absolute;
  z-index: 2;
  top: calc(var(--hm-nav-h) + 32px);
  right: var(--ti-gutter);
  width: 92px;
  height: auto;
  filter: drop-shadow(var(--ti-shadow-sm));
}

.ti-home .hm-kick {
  max-width: 46ch;
  margin: 0 0 6px;
  color: var(--ti-orange);
  font-size: var(--ti-fs-xs);
  font-weight: var(--ti-fw-bold);
  line-height: var(--ti-lh-snug);
  letter-spacing: var(--ti-track-caps);
  text-transform: uppercase;
}
.ti-home .hm-h1 {
  font-size: var(--ti-fs-h1-home);
  line-height: var(--ti-lh-display);
  letter-spacing: var(--ti-track-tight);
}
.ti-home .hm-h1 span {
  display: block;
  width: max-content;
  max-width: 100%;
  /* room for the descenders, which background-clip would otherwise cut */
  padding-bottom: 0.08em;
  background: linear-gradient(90deg, var(--ti-orange), var(--ti-amber));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ti-home .hm-sub {
  max-width: 30ch;
  margin: 10px 0 0;
  color: var(--ti-text-soft);
  font-size: var(--ti-fs-lead-lg);
  line-height: var(--ti-lh-snug);
}
.ti-home .hm-prod {
  margin: 10px 0 0;
  color: var(--ti-text-subtle);
  font-size: var(--ti-fs-md);
  font-weight: var(--ti-fw-semibold);
  letter-spacing: var(--ti-track-caps-sm);
}
.ti-home .hm-prod a,
.ti-home .hm-buy a {
  color: var(--ti-orange);
  font-weight: var(--ti-fw-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ti-home .hm-prod a:hover,
.ti-home .hm-buy a:hover { color: var(--ti-amber); }

.ti-home .hm-hero #stock-ticker { margin-bottom: 0; }
.ti-home .hm-hero .hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
.ti-home .hm-hero .cmp-guest-note {
  margin: 10px 0 0;
  color: var(--ti-muted);
  font-size: var(--ti-fs-sm);
}
.ti-home .hm-buy {
  margin: 4px 0 0;
  color: var(--ti-muted);
  font-size: var(--ti-fs-sm);
  line-height: var(--ti-lh-snug);
}

.ti-home .hm-inc {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
  color: var(--ti-text-soft);
  font-size: var(--ti-fs-md);
  font-weight: var(--ti-fw-semibold);
}
.ti-home .hm-inc img { flex: none; width: auto; height: 28px; }

/* Product clips: Stock Race, scanner, PiP charting, heat map (index.js steps
   through them). Hero media rule: a 3:2 stage, each clip shown whole. */
.ti-home .hm-seq {
  justify-self: end;
  width: min(460px, 100%);
  overflow: hidden;
  border: 1px solid var(--ti-overlay-3);
  border-radius: var(--ti-radius);
  background: var(--ti-card-translucent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--ti-shadow-lg);
}
.ti-home .hm-seq__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 6px 10px;
  padding: 10px 14px;
  font-size: var(--ti-fs-sm);
  font-weight: var(--ti-fw-bold);
  letter-spacing: var(--ti-track-caps-sm);
  text-transform: uppercase;
}
.ti-home .hm-seq__cap b { color: var(--ti-orange); font-weight: var(--ti-fw-black); }
.ti-home .hm-seq__dots {
  flex: none;
  color: var(--ti-muted-dim);
  font-size: var(--ti-fs-2xs);
  font-weight: var(--ti-fw-semibold);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.ti-home .hm-seq__dots b { font-weight: var(--ti-fw-bold); }
.ti-home .hm-seq__dots b.on { color: var(--ti-amber); font-weight: var(--ti-fw-black); }
.ti-home .hm-seq__stage {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--ti-bg-deep);
}
.ti-home .hm-seq__stage > img,
.ti-home .hm-seq__stage > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.7s ease;
}
.ti-home .hm-seq__stage > .is-on { opacity: 1; }
/* a clip stays hidden over its poster until it is actually playing */
.ti-home .hm-seq__stage > video.is-on:not([data-ok]) { opacity: 0; }
.ti-home .hm-seq__pause {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--ti-text);
  border: 1px solid var(--ti-overlay-4);
  border-radius: 50%;
  background: var(--ti-scrim);
  cursor: pointer;
  opacity: 0.8;
  transition: opacity var(--ti-dur-fast) ease, border-color var(--ti-dur-fast) ease;
}
.ti-home .hm-seq__pause:hover,
.ti-home .hm-seq__pause:focus-visible { opacity: 1; border-color: var(--ti-orange); }
.ti-home .hm-seq__pause:focus-visible { outline: 2px solid var(--ti-orange); outline-offset: 2px; }
.ti-home .hm-seq__pause svg { width: 14px; height: 14px; fill: currentColor; }
.ti-home .hm-seq__link {
  display: block;
  padding: 9px 14px;
  color: var(--ti-amber);
  font-size: var(--ti-fs-md);
  font-weight: var(--ti-fw-bold);
  text-decoration: none;
}
.ti-home .hm-seq__link:hover { text-decoration: underline; }
.ti-home .hm-seq__link[hidden] { display: none; }

.ti-home .hm-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  grid-column: 1 / -1;
  margin: 0;
  padding: 16px 0 0;
  list-style: none;
  border-top: 1px solid var(--ti-overlay-3);
  color: var(--ti-muted-mid);
  font-size: var(--ti-fs-sm);
}
.ti-home .hm-trust li + li::before { content: "\00b7"; margin: 0 12px; color: var(--ti-muted-dim); }

.ti-home .hm-cue {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 64px;
  color: var(--ti-text-soft);
  transform: translateX(-50%);
  animation: hmCue 2s ease-in-out infinite;
}
.ti-home .hm-cue:hover { color: var(--ti-orange); }
@keyframes hmCue {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.55; }
  50% { transform: translate(-50%, 8px); opacity: 1; }
}

/* ==========================================================================
   Body: full-width bands on one grid. Each band has a centred heading block
   (the Holly split carries its heading in its text column) and the bands
   alternate background. Story block, FAQ, figure.shot and .fine styles come
   from competitor-pages.css; .fp-split, .fp-checks and .fp-prem-tag from
   feature-pages.css.
   ========================================================================== */

.ti-home .hm-main { padding-bottom: 0; }
.ti-home .cmp-main .hm-sec {
  padding: 72px 0;
  border-top: 1px solid var(--ti-border);
}
.ti-home .cmp-main .hm-sec--alt { background: var(--ti-bg-sunken); }
.ti-home .hm-head {
  max-width: var(--ti-prose);
  margin: 0 auto 36px;
  text-align: center;
}
.ti-home .cmp-main .hm-head h2 { margin: 0 auto 12px; }
.ti-home .hm-head p {
  margin: 0;
  color: var(--ti-muted);
  font-size: var(--ti-fs-lead);
  line-height: var(--ti-lh-body);
}
.ti-home .hm-go {
  color: var(--ti-orange);
  font-weight: var(--ti-fw-bold);
  text-decoration: none;
}
.ti-home .hm-go:hover { color: var(--ti-amber); text-decoration: underline; }

/* What is Trade Ideas: three cards with the Features hub look (.ft-card in
   features-hub.css), one row of three. Inside .cmp-main the story-block h3
   and body-link rules would win, so the card heading is restated here. */
.ti-home .hm-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ti-home .cmp-main .ft-card h3 { max-width: none; margin: 0; line-height: var(--ti-lh-tight); }
.ti-home .cmp-main .ft-card h3 a { color: var(--ti-text); text-decoration: none; }
.ti-home .cmp-main .ft-card h3 a:hover { color: var(--ti-orange); }
.ti-home .hm-foot {
  margin: 40px auto 0;
  color: var(--ti-muted);
  font-size: var(--ti-fs-md);
  text-align: center;
}

/* Holly AI Signals: text and checklist beside the CYPH video */
.ti-home .hm-prem {
  display: inline-block;
  margin: 0 0 12px;
  padding: 4px 10px;
  color: var(--ti-orange);
  font-size: var(--ti-fs-xs);
  font-weight: var(--ti-fw-black);
  letter-spacing: var(--ti-track-caps);
  text-transform: uppercase;
  border: 1px solid var(--ti-orange-line);
  border-radius: var(--ti-radius-pill);
}
.ti-home .fp-main .fp-split > div > p.hm-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin: 20px 0 14px;
}
.ti-home .fp-main .fp-split > div > p.fine {
  margin: 0;
  color: var(--ti-muted-mid);
  font-size: var(--ti-fs-sm);
}

/* Brokers and partners: the logo strip, then one full-width row per partner
   (logo on the left, the partner's copy across the rest) */
.ti-home .hm-partners { margin: 36px 0 0; padding: 0; list-style: none; }
.ti-home .hm-partner {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  column-gap: 40px;
  padding: 28px 0;
  border-top: 1px solid var(--ti-border);
}
.ti-home .hm-partner:last-child { border-bottom: 1px solid var(--ti-border); }
.ti-home .hm-partner > :first-child { grid-column: 1; grid-row: 1 / span 6; align-self: start; }
.ti-home .hm-partner > :not(:first-child) { grid-column: 2; }
.ti-home .hm-partner picture { display: block; }
.ti-home .hm-partner__logo {
  display: block;
  width: auto;
  max-width: 200px;
  height: 40px;
  object-fit: contain;
  object-position: left center;
}
.ti-home .hm-partner p {
  margin: 0 0 10px;
  color: var(--ti-text-subtle);
  font-size: var(--ti-fs-base);
  line-height: var(--ti-lh-body);
}
.ti-home .hm-partner__go {
  justify-self: start;
  margin-top: 4px;
  color: var(--ti-orange);
  font-weight: var(--ti-fw-bold);
  text-decoration: none;
}
.ti-home .hm-partner__go:hover { color: var(--ti-amber); text-decoration: underline; }

/* Questions: a narrow centred column */
.ti-home .hm-narrow { max-width: calc(var(--ti-prose) + 2 * var(--ti-gutter)); }

.ti-home .hm-logos {
  overflow: hidden;
  padding: 22px 0;
  border-top: 1px solid var(--ti-overlay-1);
  border-bottom: 1px solid var(--ti-overlay-1);
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--ti-bg) 8%, var(--ti-bg) 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, var(--ti-bg) 8%, var(--ti-bg) 92%, transparent);
}
.ti-home .hm-logos__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: hmSlide 50s linear infinite;
}
/* hovering or tabbing into the strip stops it (WCAG 2.2.2) */
.ti-home .hm-logos:hover .hm-logos__track,
.ti-home .hm-logos:focus-within .hm-logos__track { animation-play-state: paused; }
.ti-home .hm-logos__track > * { flex: none; margin: 0 9px; }
/* logos keep their own colours, each on a light chip so it reads on the dark page */
.ti-home .hm-logos__track img {
  display: block;
  box-sizing: content-box;
  width: auto;
  height: 28px;
  padding: 10px 18px;
  object-fit: contain;
  border: 1px solid var(--ti-overlay-4);
  border-radius: var(--ti-radius-md);
  background: var(--ti-text);
  box-shadow: var(--ti-shadow-sm);
  transition: transform var(--ti-dur) ease, box-shadow var(--ti-dur) ease;
}
.ti-home .hm-logos__track a:hover img,
.ti-home .hm-logos__track a:focus-visible img {
  transform: translateY(-2px);
  box-shadow: var(--ti-shadow-sm), var(--ti-glow-orange);
}
@keyframes hmSlide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }   /* the second half repeats the first */
}

.ti-home .fp-close { margin-top: 0; }
.ti-home .hm-disc {
  max-width: var(--ti-prose);
  margin: 0 auto;
  padding: 0 var(--ti-gutter) 48px;
  color: var(--ti-muted-mid);
  font-size: var(--ti-fs-sm);
  line-height: var(--ti-lh-body);
  text-align: center;
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */

@media (max-width: 1199px) {
  .ti-home .hm-hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); }
}

/* Stacked: the photo becomes a band across the top, copy and clips below */
@media (max-width: 900px) {
  .ti-home .hm-hero {
    display: block;
    min-height: 0;
    background: var(--ti-bg-deep);
  }
  .ti-home .hm-hero::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(clamp(220px, 48vw, 420px) + var(--hm-nav-h));
    background: url("/MainSite/images/hero/hero-tiger-mobile-crop.webp") 50% 42% / cover no-repeat;
  }
  .ti-home .hm-hero::before {
    z-index: 1;
    bottom: auto;
    height: calc(clamp(220px, 48vw, 420px) + var(--hm-nav-h));
    background: linear-gradient(180deg, transparent 55%, var(--ti-bg-deep) 100%);
  }
  .ti-home .hm-hero__in {
    z-index: 2;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    padding-top: calc(clamp(220px, 48vw, 420px) - 8px);
  }
  .ti-home .hm-badge { z-index: 3; top: calc(var(--hm-nav-h) + 12px); right: 12px; width: 60px; }
  .ti-home .hm-h1 span { display: inline; width: auto; }
  .ti-home .hm-seq { justify-self: stretch; width: auto; max-width: 560px; }
  .ti-home .hm-cue { display: none; }

}

@media (max-width: 768px) {
  .ti-home .hm-kick { font-size: var(--ti-fs-2xs); letter-spacing: var(--ti-track-caps-sm); }
  .ti-home .hm-sub { font-size: var(--ti-fs-xl); }
  .ti-home .hm-prod { font-size: var(--ti-fs-sm); }
  .ti-home .hm-hero .hero-cta { flex-direction: column; }
  .ti-home .hm-hero .hero-cta .ti-btn { width: 100%; }
  .ti-home .hm-trust { font-size: var(--ti-fs-xs); }

  .ti-home .cmp-main .hm-sec { padding: 48px 0; }
  .ti-home .hm-head { margin-bottom: 28px; }
  .ti-home .hm-cards { grid-template-columns: minmax(0, 1fr); }
  .ti-home .hm-partner { grid-template-columns: minmax(0, 1fr); padding: 24px 0; }
  .ti-home .hm-partner > :first-child { grid-row: auto; margin-bottom: 14px; }
  .ti-home .hm-partner > :not(:first-child) { grid-column: 1; }
}

@media (max-width: 560px) {
  .ti-home .hm-trust li + li::before { margin: 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .ti-home .hm-cue { animation: none; }
  .ti-home .hm-seq__stage > img,
  .ti-home .hm-seq__stage > video { transition: none; }
  /* the logo strip stops and wraps; its repeated half is dropped */
  .ti-home .hm-logos { -webkit-mask-image: none; mask-image: none; }
  .ti-home .hm-logos__track {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 12px;
    width: auto;
    animation: none;
  }
  .ti-home .hm-logos__track > [aria-hidden="true"] { display: none; }
}