/*
  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.
*/

/* ==========================================================================
   The hero slides up under the see-through sticky top nav (--ti-nav-h,
   marketing/assets/css/top-nav.css) so the tiger shows faintly behind it.
   ========================================================================== */

.ti-home .hm-hero {
  margin-top: calc(-1 * var(--ti-nav-h));
  padding-top: var(--ti-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(--ti-nav-h));
  overflow: hidden;
  /* index.js sets the size and position so the tiger's face sits between the copy and the clips */
  background: var(--ti-bg-deep) url("/MainSite/images/hero/hero-tiger.webp") var(--hm-photo-pos, 72% 40%) / var(--hm-photo-size, 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(--ti-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(--ti-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(--ti-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(--ti-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; }
}