/* ============================================================
   TradeFundrr Mobile Fixes
   Targets: 320px, 375px, 414px viewports
   Loaded after main.css and inline <style> blocks
   ============================================================ */

/* ---------- Universal safety ---------- */
@media (max-width: 575px) {
  html, body { overflow-x: hidden; }
  img, svg, video { max-width: 100%; height: auto; }

  /* Touch targets — bump anything tiny up to 44px */
  .btn, button, .navbar__cta, .path-card__cta, .hiw-cta,
  .plan__box .after, .plan__box .hyperlinks__box > a,
  .verified__viewers .controls > .btn,
  .hero .switcher ul li > a {
    min-height: 44px !important;
  }

  /* Prevent iOS zoom-on-focus for inputs */
  input, textarea, select {
    font-size: 16px !important;
  }
}

/* ---------- HERO (homepage + subpages) ---------- */
@media (max-width: 575px) {
  .hero { min-height: auto !important; padding-bottom: 40px; }
  .hero__inner { padding: 24px 16px !important; gap: 24px !important; }
  .hero__title { font-size: 34px !important; line-height: 1.05 !important; letter-spacing: -1px !important; }
  .hero__title.smaller { font-size: 26px !important; line-height: 1.15 !important; letter-spacing: -0.5px !important; }
  .hero__sub, .hero__text { font-size: 15px !important; line-height: 1.5 !important; }
  .desc-hero { font-size: 14px !important; }
}
@media (max-width: 374px) {
  .hero__title { font-size: 28px !important; }
  .hero__title.smaller { font-size: 22px !important; }
}

/* ---------- NAVBAR ---------- */
@media (max-width: 575px) {
  /* Don't let the scroll-away nav strand mobile users — leave it visible */
  .site-header { display: block !important; }
  .navbar { padding: 12px 16px !important; }
  .navbar__cta { padding: 8px 14px !important; font-size: 13px !important; }
}

/* ---------- TWO PATHS · ONE PROMISE ---------- */
@media (max-width: 768px) {
  .two-paths__head, .two-paths__grid { padding: 0 16px !important; }
  .two-paths__title { font-size: 32px !important; line-height: 1.1 !important; letter-spacing: -0.5px !important; }
  .two-paths__sub { font-size: 15px !important; }
  .two-paths__grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .tp-arrow, .arrow-line { display: none !important; }
  .path-card { padding: 24px !important; }
  .path-card__title { font-size: 26px !important; letter-spacing: -0.3px !important; }
  .path-card__cta { width: 100%; justify-content: center; }
}
@media (max-width: 374px) {
  .two-paths__title { font-size: 26px !important; }
  .path-card { padding: 20px !important; }
  .path-card__title { font-size: 22px !important; }
}

/* ---------- HOW IT WORKS ---------- */
@media (max-width: 768px) {
  .hiw-eyebrow { font-size: 12px !important; letter-spacing: 1.4px !important; }
  .hiw-title, .hiw-head h2 { font-size: 28px !important; line-height: 1.15 !important; letter-spacing: -0.3px !important; }
  .hiw-kicker { font-size: 14px !important; }
  .hiw-cycler { padding: 0 12px !important; }
  .hiw-rail { height: 280px !important; }
  .hiw-rail svg { height: 100% !important; }
  /* Stop the four callouts from overlapping — stack them as a list under the chart */
  .hiw-callout {
    position: static !important;
    width: 100% !important;
    transform: none !important;
    text-align: center !important;
    margin: 0 !important;
    display: none !important;
  }
  .hiw-callout.is-active {
    display: block !important;
    margin-top: 16px !important;
  }
  .hiw-callout__title { font-size: 18px !important; }
  .hiw-callout__desc { font-size: 14px !important; }
  .hiw-cta-wrap { padding: 24px 0 !important; }
  .hiw-step-label { font-size: 10px !important; }
}
@media (max-width: 374px) {
  .hiw-title, .hiw-head h2 { font-size: 24px !important; }
  .hiw-rail { height: 240px !important; }
}

/* ---------- TICKER (credibility strip) ---------- */
@media (max-width: 575px) {
  .tf-ticker { padding: 16px 0 !important; }
  .tf-ticker__item { font-size: 13px !important; gap: 8px !important; }
  .tf-ticker__item img { width: 18px !important; height: 18px !important; }
  .tf-ticker::before, .tf-ticker::after { width: 40px !important; }
}
/* Fix reduced-motion fallback overflow */
@media (prefers-reduced-motion: reduce) and (max-width: 575px) {
  .tf-ticker__track { gap: 16px !important; padding: 0 12px !important; }
  .tf-ticker__item { white-space: normal !important; font-size: 13px !important; }
}

/* ---------- MARKETS / Market Cards ---------- */
@media (max-width: 768px) {
  .markets { padding: 60px 0 !important; }
  .markets__title, .h2.markets__title { font-size: 32px !important; letter-spacing: -0.5px !important; }
  .markets__grid { grid-template-columns: 1fr !important; gap: 16px !important; padding: 0 16px !important; }
  .market-card { padding: 20px !important; }
}
@media (max-width: 374px) {
  .markets__title, .h2.markets__title { font-size: 26px !important; }
}

/* ---------- NUMBERS / Falling Payout Cards ---------- */
@media (max-width: 575px) {
  .numbers { padding: 60px 0 !important; }
  .numbers__stack p { font-size: 22px !important; line-height: 1.3 !important; }
  .numbers__stack .num { font-size: 22px !important; }
  /* Falling cards already have a 768px rule; reinforce sizes for tightest viewport */
  .payout-card--s { width: 120px !important; }
  .payout-card--m { width: 160px !important; }
  .payout-card--l { width: 200px !important; }
}
@media (max-width: 374px) {
  .numbers__stack p { font-size: 18px !important; }
  .payout-card--s { width: 100px !important; }
  .payout-card--m { width: 130px !important; }
  .payout-card--l { width: 160px !important; }
}

/* ---------- REAL SUPPORT CARDS ---------- */
@media (max-width: 575px) {
  .real-support { padding: 60px 0 !important; }
  .real-support__inner { display: block !important; padding: 0 16px !important; }
  .real-support__cards { display: flex !important; flex-direction: column !important; gap: 14px !important; max-width: 100% !important; }
  .real-support__cards .card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
  }
  .real-support__cards .card p { font-size: 14px !important; line-height: 1.5 !important; word-break: break-word !important; overflow-wrap: anywhere !important; }
  .real-support__cards .card h4 { font-size: 16px !important; }
}

/* ---------- CTA BLOCKS ---------- */
@media (max-width: 575px) {
  .cta-block, .get-started.cta-block { padding: 50px 16px !important; }
  .cta-block__title, .get-started.cta-block .cta-block__title { font-size: 28px !important; line-height: 1.15 !important; }
  .cta-block__title br, .get-started.cta-block .cta-block__title br { display: none !important; }
  .cta-block__sub { font-size: 15px !important; }
  .cta-block .controls, .cta-block .btn-box { flex-direction: column !important; gap: 12px !important; }
  .cta-block .btn { width: 100% !important; }
}

/* ---------- FAQ ---------- */
@media (max-width: 575px) {
  .faq, .faqs { padding: 60px 16px !important; }
  .faq h2, .faqs h2, .faq .h2, .faqs .h2 { font-size: 28px !important; }
  .faq__item, .faqs__item { padding: 16px !important; }
  .faq__q, .faqs__q { font-size: 15px !important; line-height: 1.4 !important; }
  .faq__a, .faqs__a { font-size: 14px !important; }
}

/* ---------- PLANS / PRICING ---------- */
@media (max-width: 575px) {
  .plans, .pricing { padding: 50px 0 !important; }
  .plans__grid, .pricing__grid { grid-template-columns: 1fr !important; gap: 18px !important; padding: 0 16px !important; }
  .plan__box, .pricing__card { padding: 22px !important; }
  .plan__box .price, .pricing__card .price { font-size: 32px !important; }
}

/* ---------- REVIEWS / TESTIMONIALS ---------- */
@media (max-width: 575px) {
  .reviews, .testimonials, .trader-payouts { padding: 50px 0 !important; }
  .reviews h2, .testimonials h2 { font-size: 28px !important; }
  .reviews__slider { padding: 0 16px !important; }
}

/* ---------- FOOTER ---------- */
@media (max-width: 575px) {
  .footer { padding: 40px 16px !important; }
  .footer__grid, .footer__inner { grid-template-columns: 1fr !important; gap: 24px !important; }
  .footer h4, .footer__heading { font-size: 14px !important; }
}

/* ---------- FORMS / NEWSLETTER ---------- */
@media (max-width: 575px) {
  input[type="email"], input[type="text"], input[type="tel"], textarea {
    min-height: 44px !important;
    font-size: 16px !important;
    padding: 10px 14px !important;
  }
  .newsletter, .newsletter__form { flex-direction: column !important; gap: 10px !important; }
  .newsletter input, .newsletter .btn { width: 100% !important; }
}

/* ---------- CONTAINER SAFETY ---------- */
@media (max-width: 575px) {
  .container { padding-left: 16px !important; padding-right: 16px !important; max-width: 100% !important; }
  section { overflow-x: hidden; }
}

/* ---------- LARGE TABLET / iPad portrait clean-up ---------- */
@media (min-width: 481px) and (max-width: 767px) {
  .hero__title:not(.smaller) { font-size: 44px !important; }
  .hero__title.smaller { font-size: 32px !important; }
}

/* === V3 PATCH START === */

/* ---------- HIW: stack callouts vertically on mobile ----------
   DOM structure (per inspection):
     .hiw-rail > <svg> + 4x .hiw-callout + 4x .hiw-step
   The callouts CONTAIN the text we want to keep showing.
   So we keep .hiw-rail visible, hide just the svg + step elements,
   and convert callouts from absolute-positioned to a vertical stack. */
@media (max-width: 768px) {
  .hiw-grid { display: block !important; padding: 0 16px !important; }

  .hiw-cycler {
    display: block !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .hiw-rail {
    position: static !important;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* Hide just the SVG path/area + step circles + step labels */
  .hiw-rail > svg,
  .hiw-step,
  .hiw-path-area,
  .hiw-path-bg,
  .hiw-path-fill,
  .hiw-circle,
  .hiw-step-label,
  .hiw-clip-rect {
    display: none !important;
  }

  /* Stack the 4 callouts as a vertical list */
  .hiw-callout {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    display: block !important;
    margin: 0 0 14px 0 !important;
    padding: 18px !important;
    background: hsla(0, 0%, 100%, 0.05) !important;
    border: 1px solid hsla(0, 0%, 100%, 0.12) !important;
    border-radius: 14px !important;
    text-align: left !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  .hiw-callout::before,
  .hiw-callout::after {
    display: none !important;
  }
  .hiw-callout.is-active {
    border-color: #22d3a8 !important;
    background: hsla(165, 95%, 40%, 0.08) !important;
    box-shadow: 0 0 0 1px hsla(165, 95%, 40%, 0.3) inset !important;
  }
  .hiw-callout__title {
    font-size: 17px !important;
    line-height: 1.3 !important;
    margin: 0 0 6px 0 !important;
    color: #fff !important;
  }
  .hiw-callout__desc {
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: hsla(0, 0%, 100%, 0.78) !important;
    margin: 0 !important;
  }

  .hiw-cta-wrap {
    padding: 24px 0 0 0 !important;
    margin-top: 12px !important;
  }
}

/* ---------- HERO IMAGE: center when stacked ---------- */
@media (max-width: 900px) {
  .hero__inner { text-align: center !important; }
  .hero__text { margin-left: auto !important; margin-right: auto !important; }
  .hero__inner img,
  .hero__inner picture,
  .hero__image,
  .hero__media {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
    height: auto !important;
  }
}
@media (max-width: 768px) {
  .hero__cta,
  .hero__buttons,
  .hero .btn-row,
  .hero .controls {
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
  }
  .hero__sub-list,
  .hero__features {
    justify-content: center !important;
  }
}

/* === V3 PATCH END === */

/* === HIW GAP PATCH START === */
/* Tighten the dead space between How It Works CTA and the next section.
   Was: HIW pb 110 + cta-wrap pb 40 + trader-payouts pt 100 = ~250px gap.
   Now: HIW pb 30 + cta-wrap pb 16 + trader-payouts pt 60 = ~106px gap. */
.how-it-works,
.how-it-works.complex {
  padding-bottom: 30px !important;
}
.hiw-cta-wrap {
  padding-bottom: 16px !important;
  padding-top: 24px !important;
}
.trader-payouts {
  padding-top: 60px !important;
}
@media (max-width: 768px) {
  .how-it-works,
  .how-it-works.complex { padding-bottom: 20px !important; }
  .hiw-cta-wrap { padding-bottom: 12px !important; padding-top: 16px !important; }
  .trader-payouts { padding-top: 40px !important; }
}
/* === HIW GAP PATCH END === */

/* === GET STARTED IMAGE PATCH START === */
/* Force two-column layout for "You've Done The Research" CTA section.
   The .get-started__media element already exists in markup but layout was
   collapsing to single column on desktop. */
.get-started.cta-block .container {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 40px !important;
  align-items: center !important;
  max-width: 1280px !important;
}
.get-started.cta-block .cta-block__inner {
  max-width: 600px !important;
  text-align: left !important;
}
.get-started__media {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.get-started__media img {
  width: 100% !important;
  max-width: 620px !important;
  height: auto !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Tablet and below: stack vertically */
@media (max-width: 900px) {
  .get-started.cta-block .container {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
  .get-started.cta-block .cta-block__inner {
    max-width: 100% !important;
    text-align: center !important;
    margin: 0 auto !important;
  }
  .get-started__media { order: -1 !important; }
  .get-started__media img { max-width: 480px !important; margin: 0 auto !important; }
  .get-started.cta-block .btn-row,
  .get-started.cta-block .tick-row { justify-content: center !important; }
}
/* === GET STARTED IMAGE PATCH END === */

/* TWO_PATHS_CLS_START - reserve vertical space to prevent layout shift */
/* Values calibrated from live measurement on 360x800 mobile viewport.    */
.two-paths {
  contain: layout style;
  min-height: 880px;
}
@media (max-width: 991px) {
  .two-paths { min-height: 1450px; }
}
@media (max-width: 575px) {
  .two-paths { min-height: 1500px; }
}
.two-paths .path-card {
  min-height: 320px;
  contain: layout style;
}
@media (max-width: 768px) {
  .two-paths .path-card { min-height: 520px; }
}
/* TWO_PATHS_CLS_END */

/* === MARKETS 4-ACROSS PATCH START === */
/* Force the four market cards (Stocks / Options / Futures / Crypto) onto a
   single row at large-desktop widths. Smaller screens keep the existing 2-up
   (or 1-up on mobile) layout.

   Also tightens the in-card typography so titles fit on one line and pills
   fit on one row, since cards are narrower in 4-across mode. */
@media (min-width: 1200px) {
  /* --- Grid layout --- */
  .markets__grid {
    grid-template-columns: repeat(4, 1fr) !important;
    max-width: 1400px !important;
    gap: 20px !important;
    margin: 0 auto !important;
    justify-content: stretch !important;
  }
  .markets__card {
    height: auto !important;       /* let card size to content at narrower width */
    min-height: 460px !important;  /* keep a consistent minimum so all 4 align */
  }

  /* --- Polish pass tightening --- */
  /* Card title: shrunk to 18px + nowrap so "Funded Stock/Options/Futures/Crypto
     Trading" all fit on a single line at the new narrower card width. */
  .markets__card .body h3 {
    font-size: 18px !important;
    letter-spacing: -0.6px !important;
    white-space: nowrap !important;
  }
  /* Body description: 16px -> 14px for tighter feel at narrower card width */
  .markets__card .body p {
    font-size: 14px !important;
    letter-spacing: -0.4px !important;
    line-height: 1.35 !important;
  }
  /* Pills: smaller font + tighter gap so all 3 pills fit on one row */
  .markets__card .body .pills {
    gap: 6px 10px !important;
  }
  .markets__card .body .pills .pill {
    font-size: 11px !important;
    letter-spacing: -0.3px !important;
  }
  /* Slightly tighter section gap inside card body */
  .markets__card .body {
    gap: 14px !important;
  }

  /* The decorative border that wraps .markets__grid (::before pseudo) still
     works automatically since it uses calc(100% + 40px) - just bigger now. */
}
/* === MARKETS 4-ACROSS PATCH END === */

/* === HIW NUMBERS GAP PATCH START === */
/* Reduce the vertical dead-space between the "View Plans and Pricing" CTA
   (bottom of .how-it-works) and the next section (.numbers).
   Cumulative trim across two rounds:
     Original:  40 + 110 + 200 = 350px
     Round 1:   18 +  50 +  90 = 158px  (-55%)
     Round 2:    9 +  25 +  45 =  79px  (-50% more) <- current */
.hiw-cta-wrap {
  padding-bottom: 9px !important;
}
.how-it-works {
  padding-bottom: 25px !important;
}
.numbers {
  padding-top: 45px !important;
}

/* Mobile: scale down further so phones don't end up with proportionally
   huge gaps. */
@media (max-width: 767px) {
  .hiw-cta-wrap   { padding-bottom: 5px !important; }
  .how-it-works   { padding-bottom: 15px !important; }
  .numbers        { padding-top: 25px !important; }
}
/* === HIW NUMBERS GAP PATCH END === */

/* === PRO SUB NAV CSS START === */
/* Inline sub-link for Pro Funding pages, nested visually under each parent
   entry (Stocks/Options/Futures) in the Products dropdown.
   Sits as a sibling <a> after the parent <a> (HTML rule: no <a> inside <a>),
   styled to read as an indented secondary link. */
.dropdown .dropdown__pro-sub {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 18px 9px 76px !important; /* left padding aligns under parent's thumbnail */
  margin: -8px 0 4px 0 !important;       /* pull up close to parent */
  background: transparent !important;
  border-top: 1px dashed hsla(178, 65%, 50%, 0.15) !important;
  text-decoration: none !important;
  color: hsla(0, 0%, 100%, 0.72) !important;
  font-size: 12.5px !important;
  line-height: 1.35 !important;
  transition: background .15s ease, color .15s ease !important;
  position: relative !important;
}
.dropdown .dropdown__pro-sub:hover {
  background: hsla(178, 65%, 50%, 0.06) !important;
  color: #fff !important;
}
.dropdown .dropdown__pro-sub-arrow {
  color: #5DEACB !important;
  font-size: 14px !important;
  line-height: 1 !important;
  margin-left: -22px !important;        /* hang the arrow into the left padding */
  font-family: 'Geist Mono', monospace !important;
  opacity: 0.8 !important;
}
.dropdown .dropdown__pro-sub-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  flex: 1 !important;
}
.dropdown .dropdown__pro-sub-label {
  font-weight: 600 !important;
  color: #5DEACB !important;
  font-size: 12.5px !important;
  letter-spacing: 0.2px !important;
  text-transform: uppercase !important;
}
.dropdown .dropdown__pro-sub-desc {
  color: hsla(0, 0%, 100%, 0.55) !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.dropdown .dropdown__pro-sub-chev {
  color: hsla(0, 0%, 100%, 0.4) !important;
  font-size: 18px !important;
  margin-left: auto !important;
  transition: transform .15s ease, color .15s ease !important;
}
.dropdown .dropdown__pro-sub:hover .dropdown__pro-sub-chev {
  color: #5DEACB !important;
  transform: translateX(2px) !important;
}

/* Mobile: tighter padding so the sub-link doesn't crowd narrow dropdown */
@media (max-width: 768px) {
  .dropdown .dropdown__pro-sub {
    padding: 8px 16px 8px 48px !important;
    margin-top: -4px !important;
  }
  .dropdown .dropdown__pro-sub-arrow { margin-left: -16px !important; }
}
/* === PRO SUB NAV CSS END === */

/* === BLACKBOOK CSS START === */
/* Funded Trader Blackbook lead magnet. Two-column on desktop, stacks on mobile.
   IMAGE on LEFT = cropped 3D book mockup (taller portrait aspect).
   CONTENT on RIGHT = eyebrow + headline + tagline + copy + 3 feature pills + form. */
.blackbook {
  padding: 90px 0;
  /* Pure black matches the image's dominant corner color (#000000), so the
     image edges disappear into the section background. */
  background: #000000;
  position: relative;
  overflow: hidden;
}
.blackbook::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Golden glow centered behind the content. Boosted opacity since the
     darker section background needs a slightly stronger gold to read. */
  background:
    radial-gradient(ellipse 55% 70% at 70% 50%, rgba(255, 193, 7, 0.10) 0%, transparent 65%),
    radial-gradient(ellipse 35% 55% at 30% 50%, rgba(255, 193, 7, 0.05) 0%, transparent 60%);
  pointer-events: none;
}
.blackbook .container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 1;
}
.blackbook__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: center;
}
/* Book visual */
.blackbook__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blackbook__visual img {
  width: 100%;
  max-width: 460px;
  height: auto;
  display: block;
  /* Subtle dark ambient shadow for depth - softens the hard right edge
     without adding any color halo. Reads as "book sits in the space" not
     "book is glowing." */
  filter: drop-shadow(8px 4px 24px rgba(0, 0, 0, 0.6));
}
/* Right column content */
.blackbook__eyebrow {
  color: #ffc107;
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 13px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-bottom: 16px;
  display: block;
  font-weight: 600;
}
.blackbook__title {
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -1.3px;
  color: #fff;
  margin: 0 0 10px;
}
.blackbook__title .accent { color: #ffc107; }
.blackbook__tagline {
  color: hsla(0, 0%, 100%, 0.6);
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0 0 22px;
}
.blackbook__lead {
  color: hsla(0, 0%, 100%, 0.78);
  font-size: 15.5px;
  line-height: 1.65;
  margin: 0 0 28px;
  max-width: 600px;
}
/* 3 feature pills */
.blackbook__features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0 0 28px;
  max-width: 540px;
}
.blackbook__feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 10px;
  background: hsla(0, 0%, 100%, 0.04);
  border: 1px solid hsla(0, 0%, 100%, 0.1);
  border-radius: 12px;
  transition: border-color .15s ease, background .15s ease;
}
.blackbook__feature:hover {
  background: hsla(0, 0%, 100%, 0.06);
  border-color: rgba(255, 193, 7, 0.3);
}
.blackbook__feature-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 193, 7, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  color: #ffc107;
}
.blackbook__feature-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}
.blackbook__feature-label {
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  line-height: 1.25;
}
/* Form */
.blackbook__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 540px;
}
.blackbook__field input {
  width: 100%;
  padding: 14px 20px;
  background: hsla(0, 0%, 100%, 0.05);
  border: 1px solid hsla(0, 0%, 100%, 0.15);
  border-radius: 999px;
  color: #fff;
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-size: 14.5px;
  box-sizing: border-box;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.blackbook__field input::placeholder { color: hsla(0, 0%, 100%, 0.45); }
.blackbook__field input:focus {
  outline: none;
  border-color: #ffc107;
  background: hsla(0, 0%, 100%, 0.08);
  box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.15);
}
.blackbook__submit {
  width: 100%;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  font-size: 15.5px;
  font-weight: 700;
}
.blackbook__note { color: hsla(0, 0%, 100%, 0.5); font-size: 13px; margin: 14px 0 0; }

/* Tablet */
@media (max-width: 1024px) {
  .blackbook__grid { gap: 40px; }
  .blackbook__title { font-size: 36px; }
  .blackbook__visual img { max-width: 360px; }
}
/* Mobile */
@media (max-width: 768px) {
  .blackbook { padding: 60px 0; }
  .blackbook .container { padding: 0 20px; }
  .blackbook__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .blackbook__visual { order: -1; }
  .blackbook__visual img { max-width: 280px; }
  .blackbook__title { font-size: 30px; letter-spacing: -0.8px; }
  .blackbook__lead { font-size: 15px; }
  .blackbook__form, .blackbook__features { max-width: none; }
  .blackbook__features { gap: 8px; }
  .blackbook__feature { padding: 12px 8px; }
  .blackbook__feature-label { font-size: 10.5px; }
}
@media (max-width: 480px) {
  .blackbook__features { grid-template-columns: 1fr; gap: 10px; }
  .blackbook__feature { flex-direction: row; gap: 12px; justify-content: flex-start; text-align: left; }
  .blackbook__feature-icon { margin-bottom: 0; flex-shrink: 0; }
}
/* === BLACKBOOK CSS END === */

/* === FOUNDERS CSS START === */
/* Single-founder leadership section. Centered header + side-by-side portrait/bio.
   Sits between the institutional (T3) section and the real-support section.
   Uses .accent for teal highlight (already defined in main.css). */
.founders {
  position: relative;
  padding: 110px 0;
  background: #060914;
  overflow: hidden;
}
.founders::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 60% at 30% 40%, rgba(34, 211, 168, 0.07) 0%, transparent 60%),
    radial-gradient(ellipse 50% 55% at 75% 70%, rgba(34, 211, 168, 0.05) 0%, transparent 60%);
  pointer-events: none;
}
.founders .container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 1;
}
.founders__header { text-align: center; margin: 0 auto 64px; max-width: 780px; }
.founders__eyebrow {
  display: inline-block;
  color: #22d3a8;
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 18px;
}
.founders__title {
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 1.08;
  letter-spacing: -1.4px;
  color: #fff;
  margin: 0 0 18px;
}
.founders__title .accent { color: #22d3a8; }
.founders__lead {
  color: hsla(0, 0%, 100%, 0.72);
  font-size: 17px;
  line-height: 1.55;
  margin: 0;
}
.founders__body {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 56px;
  align-items: center;
}
.founders__portrait-wrap { position: relative; order: 2; }
.founders__portrait-wrap::before {
  /* Offset teal frame behind the portrait, lower-LEFT shifted (mirrors original
     direction now that the portrait sits on the right side of the page; the
     frame extends INTO the page content rather than off the viewport edge). */
  content: "";
  position: absolute;
  inset: 18px 18px -18px -18px;
  border: 1px solid rgba(34, 211, 168, 0.35);
  border-radius: 18px;
  pointer-events: none;
}
.founders__portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, #0b1320 0%, #1a2740 100%);
  border: 1px solid hsla(0, 0%, 100%, 0.08);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.02);
}
.founders__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.founders__portrait-badge {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: rgba(11, 19, 32, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid hsla(0, 0%, 100%, 0.12);
  border-radius: 999px;
  padding: 8px 14px;
  color: #22d3a8;
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: 500;
}
.founders__bio { padding: 4px 0; order: 1; }
.founders__name {
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.12;
  letter-spacing: -0.8px;
  color: #fff;
  margin: 0 0 16px;
}
.founders__bio-text {
  color: hsla(0, 0%, 100%, 0.78);
  font-size: 16.5px;
  line-height: 1.65;
  margin: 0 0 28px;
  max-width: 580px;
}
.founders__creds {
  list-style: none;
  margin: 0;
  padding: 22px 0 0;
  border-top: 1px solid hsla(0, 0%, 100%, 0.08);
  display: grid;
  gap: 12px;
}
.founders__creds li {
  color: hsla(0, 0%, 100%, 0.7);
  font-size: 14.5px;
  line-height: 1.5;
  padding-left: 22px;
  position: relative;
}
.founders__creds li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  background: #22d3a8;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(34, 211, 168, 0.5);
}
/* Tablet */
@media (max-width: 1024px) {
  .founders__title { font-size: 38px; }
  .founders__body { grid-template-columns: 1fr 360px; gap: 40px; }
  .founders__name { font-size: 30px; }
}
/* Mobile */
@media (max-width: 768px) {
  .founders { padding: 70px 0; }
  .founders .container { padding: 0 20px; }
  .founders__header { margin-bottom: 44px; }
  .founders__title { font-size: 30px; letter-spacing: -0.8px; }
  .founders__lead { font-size: 15.5px; }
  .founders__body { grid-template-columns: 1fr; gap: 36px; }
  .founders__portrait-wrap { max-width: 320px; margin: 0 auto; order: 1; }
  .founders__portrait-wrap::before { inset: 12px -12px -12px 12px; }
  .founders__name { font-size: 26px; }
  .founders__bio-text { font-size: 15.5px; }
}
/* === FOUNDERS CSS END === */

/* === T3 PARTNERSHIP SECTION OVERRIDES === */
/* main.css line 1267 sets .institutional__title .accent to yellow (#fc0).
   The rest of the site uses teal as the primary accent — bring this section
   in line with the brand color for visual consistency. */
.institutional__title .accent { color: #22d3a8 !important; }

/* T3 Global logo container + image: expand the span to fill the card width so
   the logo reads as the primary visual statement at the top of the card.
   The inverted (brightness(0) invert(1)) filter renders the brand maroon as
   pure white for legibility on the dark card. */
.institutional__card > span {
  display: block !important;
  width: 100% !important;
  margin-bottom: 22px !important;
}
.institutional__card > span img[src*="t3_global_logo"] {
  filter: brightness(0) invert(1);
  width: 100%;
  max-width: none;
  height: auto;
  display: block;
}
/* === T3 PARTNERSHIP SECTION OVERRIDES END === */

/* === ACCENT COLOR CONSISTENCY OVERRIDES === */
/* main.css applies yellow (#fc0 / #ffcc00) to many section-specific H2 .accent
   spans. Standardize on teal (#22d3a8) sitewide for visual consistency.
   The Blackbook section keeps its gold accent because that color is tied
   directly to the book image and has an in-section visual justification. */
.h1 .accent,
.markets__title .accent,
.how-it-works__title .accent,
.payouts__title .accent,
.real-support__head .accent,
.cta-block__title .accent,
.plans__title .accent,
.trader-payouts__head .h2 .accent,
.help-choose__title .accent,
.value-asym__title .accent,
.story__title .accent,
.rules .h2 .accent,
.programs-section .h2 .accent,
.platforms .h2 .accent,
.comparison .accent,
.why__us .h2 .accent,
.article .container .desc > .h2 .accent,
.platforms__articles .plans__title .accent,
.verified__viewers .h2 .accent,
.payout__proof .h2 span.accent,
.plan__box .h2 .accent,
.value .h2 .accent,
.help__me--choose h2.h2 span.accent {
  color: #22d3a8 !important;
}
/* === ACCENT COLOR CONSISTENCY OVERRIDES END === */

/* === JOURNEY / TIMELINE SECTION === */
/* Data-rich timeline of the funded-trader trajectory. Sits between the Human
   Support section and the Mid-page CTA, serving as the "specific timeline"
   reassurance right before the pricing block. */
.journey {
  position: relative;
  padding: 110px 0;
  background: #060914;
  overflow: hidden;
}
.journey::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%, rgba(34, 211, 168, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 85% 70%, rgba(34, 211, 168, 0.04) 0%, transparent 60%);
  pointer-events: none;
}
.journey .container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 1;
}
.journey__header {
  text-align: center;
  margin: 0 auto 70px;
  max-width: 800px;
}
.journey__eyebrow {
  display: inline-block;
  color: #22d3a8;
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 18px;
}
.journey__title {
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 1.08;
  letter-spacing: -1.4px;
  color: #fff;
  margin: 0 0 18px;
}
.journey__title .accent { color: #22d3a8; }
.journey__lead {
  color: hsla(0, 0%, 100%, 0.72);
  font-size: 17px;
  line-height: 1.55;
  margin: 0;
}
.journey__rail {
  position: relative;
  height: 56px;
  margin: 0 32px 24px;
}
.journey__rail-line {
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    hsla(0, 0%, 100%, 0.08) 0%,
    rgba(34, 211, 168, 0.4) 25%,
    rgba(34, 211, 168, 0.4) 75%,
    hsla(0, 0%, 100%, 0.08) 100%);
  transform: translateY(-1px);
}
.journey__rail-marker {
  position: absolute;
  top: 50%; transform: translate(-50%, -50%);
  width: 12px; height: 12px;
  background: #060914;
  border: 2px solid #22d3a8;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(34, 211, 168, 0.5);
  transition: width .22s ease, height .22s ease, box-shadow .22s ease, background .22s ease;
}
.journey__rail-marker.is-active {
  width: 18px;
  height: 18px;
  background: #22d3a8;
  box-shadow: 0 0 22px rgba(34, 211, 168, 0.85);
}
.journey__rail-label {
  position: absolute;
  top: calc(50% - 30px);
  transform: translateX(-50%);
  color: #22d3a8;
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
}
.journey__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.journey-card {
  position: relative;
  padding: 28px 24px 26px;
  background: hsla(0, 0%, 100%, 0.03);
  border: 1px solid hsla(0, 0%, 100%, 0.08);
  border-radius: 18px;
  transition: border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.journey-card:hover {
  border-color: rgba(34, 211, 168, 0.3);
  background: hsla(0, 0%, 100%, 0.05);
  transform: translateY(-2px);
}
/* Active state set by JS as the cycle advances. Stronger than hover so the
   currently-spotlighted card reads clearly. */
.journey-card.is-active {
  border-color: rgba(34, 211, 168, 0.55);
  background: hsla(0, 0%, 100%, 0.06);
  transform: translateY(-4px);
  box-shadow: 0 0 32px rgba(34, 211, 168, 0.22);
}
.journey-card.is-active .journey-card__month {
  color: #22d3a8;
}
.journey-card__month {
  display: inline-block;
  color: hsla(0, 0%, 100%, 0.55);
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 12px;
}
.journey-card__title {
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: -0.4px;
  color: #fff;
  margin: 0 0 16px;
}
.journey-card__stat {
  display: block;
  color: #22d3a8;
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.6px;
  line-height: 1.35;
  padding: 10px 12px;
  background: rgba(34, 211, 168, 0.08);
  border-left: 2px solid #22d3a8;
  border-radius: 0 6px 6px 0;
  margin-bottom: 16px;
}
.journey-card__detail {
  color: hsla(0, 0%, 100%, 0.7);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}
/* Tablet */
@media (max-width: 1024px) {
  .journey__title { font-size: 38px; }
  .journey__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .journey__rail { display: none; }
}
/* Mobile */
@media (max-width: 640px) {
  .journey { padding: 70px 0; }
  .journey .container { padding: 0 20px; }
  .journey__title { font-size: 30px; letter-spacing: -0.8px; }
  .journey__lead { font-size: 15.5px; }
  .journey__grid { grid-template-columns: 1fr; gap: 14px; }
  .journey-card { padding: 24px 20px; }
  .journey-card__title { font-size: 20px; }
}
/* === JOURNEY / TIMELINE SECTION END === */

/* === AVATAR SECTION === */
/* Three-segment avatar section: sits between the credibility ticker and the
   Two Paths section. Names the three best-fit traders (stocks/options/futures)
   so the visitor sees themselves before they have to pick a path.
   Background is slightly lifted from #060914 to create visual separation from
   the surrounding sections; ::after draws a soft teal hairline at the bottom
   edge as an explicit section divider. */
.avatar {
  position: relative;
  padding: 100px 0;
  background: #0a101e;
  overflow: hidden;
}
.avatar::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 60% at 70% 40%, rgba(34, 211, 168, 0.07) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 25% 65%, rgba(34, 211, 168, 0.04) 0%, transparent 60%);
  pointer-events: none;
}
.avatar::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(34, 211, 168, 0.35) 50%, transparent 100%);
  pointer-events: none;
}
.avatar .container {
  max-width: 1550px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 1;
}
.avatar__header { text-align: center; margin: 0 auto 56px; max-width: 820px; }
.avatar__eyebrow {
  display: inline-block;
  color: #22d3a8;
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
  font-weight: 500; margin-bottom: 18px;
}
.avatar__title {
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-weight: 700; font-size: 46px;
  line-height: 1.08; letter-spacing: -1.3px; color: #fff;
  margin: 0 0 18px;
}
.avatar__title .accent { color: #22d3a8; }
.avatar__lead {
  color: hsla(0, 0%, 100%, 0.72); font-size: 17px; line-height: 1.55; margin: 0;
}
.avatar-segments {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  margin-bottom: 32px;
}
.avatar-segment {
  padding: 30px 26px 28px;
  background: hsla(0, 0%, 100%, 0.03);
  border: 1px solid hsla(0, 0%, 100%, 0.08);
  border-radius: 16px;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.avatar-segment:hover {
  border-color: rgba(34, 211, 168, 0.4);
  background: hsla(0, 0%, 100%, 0.05);
  transform: translateY(-2px);
}
.avatar-segment__label {
  display: inline-block;
  color: #22d3a8;
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 500;
  padding: 4px 9px;
  background: rgba(34, 211, 168, 0.12);
  border: 1px solid rgba(34, 211, 168, 0.3);
  border-radius: 999px;
  margin-bottom: 16px;
}
.avatar-segment__title {
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-weight: 700; font-size: 20px;
  color: #fff; margin: 0 0 14px;
  line-height: 1.25; letter-spacing: -0.3px;
}
.avatar-segment__body {
  color: hsla(0, 0%, 100%, 0.78); font-size: 14.5px; line-height: 1.6; margin: 0;
}
.avatar-segment__body strong { color: #fff; font-weight: 600; }
.avatar__closer {
  text-align: center; max-width: 760px; margin: 0 auto;
  padding: 28px 32px;
  background: rgba(34, 211, 168, 0.06);
  border: 1px solid rgba(34, 211, 168, 0.25);
  border-radius: 14px;
}
.avatar__closer p {
  color: hsla(0, 0%, 100%, 0.88); font-size: 16.5px; line-height: 1.55; margin: 0;
}
.avatar__closer strong { color: #22d3a8; font-weight: 600; }
@media (max-width: 1199px) {
  .avatar-segments { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 900px) {
  .avatar { padding: 70px 0; }
  .avatar .container { padding: 0 20px; }
  .avatar__title { font-size: 32px; letter-spacing: -0.8px; }
  .avatar__lead { font-size: 15.5px; }
  .avatar-segment { padding: 24px 22px; }
}
@media (max-width: 600px) {
  .avatar-segments { grid-template-columns: 1fr; gap: 14px; }
}
/* === AVATAR SECTION END === */

/* === PRICING STACK CARDS === */
/* Tiered stacked-value cards inside .plans__grid. Replace the older
   .plans__card with a 3-tier structure: Capital Access / Tooling & Support /
   Pathway. Each card ends with totals row + price + CTA. */
.plans__grid.stack-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 22px !important;
  align-items: stretch !important;
}
.stack-card {
  position: relative;
  display: flex; flex-direction: column;
  background: hsla(0, 0%, 100%, 0.03);
  border: 1px solid hsla(0, 0%, 100%, 0.08);
  border-radius: 20px;
  padding: 32px 26px 28px;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.stack-card:hover {
  border-color: rgba(34, 211, 168, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 0 32px rgba(34, 211, 168, 0.15);
}
.stack-card--popular {
  border-color: rgba(34, 211, 168, 0.55);
  background: hsla(0, 0%, 100%, 0.05);
  box-shadow: 0 0 36px rgba(34, 211, 168, 0.18);
}
.stack-card .popular {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: #22d3a8 !important; color: #06181a !important;
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 10.5px !important; font-weight: 700 !important;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 5px 14px; border-radius: 999px;
}
.stack-card__eyebrow {
  color: #22d3a8;
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 500;
  margin-bottom: 8px;
}
.stack-card__title {
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-weight: 700; font-size: 22px;
  line-height: 1.2; letter-spacing: -0.4px; color: #fff;
  margin: 0 0 6px;
}
.stack-card__subtitle {
  color: hsla(0, 0%, 100%, 0.6); font-size: 13px; margin: 0 0 22px; line-height: 1.4;
}
.tier {
  margin-bottom: 18px;
  padding: 14px 14px 12px;
  background: rgba(34, 211, 168, 0.06);
  border: 1px solid rgba(34, 211, 168, 0.2);
  border-radius: 10px;
}
.tier--tooling { background: rgba(255, 255, 255, 0.02); border-color: hsla(0, 0%, 100%, 0.08); }
.tier__label {
  color: #22d3a8;
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 600;
  margin-bottom: 10px;
}
.tier--tooling .tier__label { color: hsla(0, 0%, 100%, 0.6); }
/* Hero claim block: single centered line of the most important fact about
   this plan. Sits between the title block and the feature list. Replaces
   the older 3-tier structure that was too visually busy. */
.stack-card__hero {
  text-align: center;
  padding: 18px 14px;
  margin: 0 0 22px;
  border-top: 1px solid hsla(0,0%,100%,0.08);
  border-bottom: 1px solid hsla(0,0%,100%,0.08);
}
.stack-card__claim {
  font-size: 15px;
  font-weight: 500;
  color: hsla(0,0%,100%,0.85);
  line-height: 1.4;
  margin: 0;
}
.stack-card__claim strong {
  color: #22d3a8;
  font-weight: 700;
  display: block;
  font-size: 17.5px;
  letter-spacing: -0.2px;
  margin-bottom: 4px;
}

.stack-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 9px; }
.stack-list li {
  display: grid; grid-template-columns: 16px 1fr; gap: 10px;
  align-items: baseline;
  color: hsla(0, 0%, 100%, 0.85); font-size: 14px; line-height: 1.4;
}
.stack-list li::before {
  content: ""; width: 14px; height: 14px; margin-top: 4px;
  background: rgba(34, 211, 168, 0.18);
  border: 1px solid rgba(34, 211, 168, 0.55);
  border-radius: 50%;
  background-image:
    linear-gradient(45deg, transparent 45%, #22d3a8 47%, #22d3a8 52%, transparent 54%),
    linear-gradient(-45deg, transparent 55%, #22d3a8 57%, #22d3a8 62%, transparent 64%);
  background-position: 3px 4px, 5px 4px;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
.stack-list li strong { color: #fff; font-weight: 600; }

/* Single value anchor at the bottom of each card. Replaces the old per-line
   dollar values + .stack-card__totals approach (which created confusion).
   Now: one clear comparison sentence about what the visitor would need to
   put up themselves, framed as capital they don't have to commit. */
.stack-card__anchor {
  margin: auto 0 18px;
  padding: 16px 18px;
  background: rgba(34, 211, 168, 0.08);
  border: 1px solid rgba(34, 211, 168, 0.3);
  border-radius: 12px;
  text-align: center;
}
.stack-card__anchor-compare {
  color: hsla(0, 0%, 100%, 0.78);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}
.stack-card__anchor-compare strong {
  color: #22d3a8;
  font-weight: 600;
}

.stack-card__price-block { margin-bottom: 20px; text-align: center; }
.stack-card__price-label {
  color: hsla(0, 0%, 100%, 0.55);
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase;
  margin-bottom: 4px;
}
.stack-card__price {
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-weight: 700; font-size: 44px;
  color: #fff; line-height: 1; letter-spacing: -1.2px;
  margin-bottom: 6px;
}
.stack-card__price-sub { color: hsla(0, 0%, 100%, 0.55); font-size: 12.5px; }
.stack-card__price-included {
  display: inline-block;
  margin-top: 8px;
  color: #22d3a8;
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 11px;
  letter-spacing: 1px; text-transform: uppercase; font-weight: 500;
}
.stack-card__cta {
  display: flex !important; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  margin-top: auto;
}
@media (max-width: 1024px) {
  .plans__grid.stack-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
}
/* === PRICING STACK CARDS END === */

/* === PLANS SECTION BACKGROUND OVERRIDE === */
/* Cover up the grid-pattern background that was bleeding through into the
   pricing section. Replace with a clean solid dark bg and a subtle teal
   center glow (keeping the visual atmosphere Jason liked without the
   distracting grid lines). */
.plans {
  background: #060914 !important;
  position: relative;
  overflow: hidden;
}
.plans::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 55% at 50% 35%, rgba(34, 211, 168, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 50% 85%, rgba(34, 211, 168, 0.05) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.plans > .container { position: relative; z-index: 1; }
/* === PLANS SECTION BACKGROUND OVERRIDE END === */

/* === GUARANTEE START === */
/* CONDITIONAL: The "Hit your first payout, get your eval fee back" guarantee
   block + per-card badges. Built to be removable. To strip the guarantee:
     1) Delete this entire CSS block (between GUARANTEE START and END markers)
     2) Delete the HTML between <!-- GUARANTEE_BANNER_START --> and
        <!-- GUARANTEE_BANNER_END --> in index.html (inside <section class="plans">)
     3) Delete the three per-card badge spans wrapped in
        <!-- GUARANTEE_BADGE_START --> markers
   See HANDOFF-2026-05-24.md for full notes. */

/* Primary guarantee banner above the pricing cards */
.guarantee {
  position: relative;
  margin: 0 auto 48px;
  max-width: 940px;
  padding: 32px 36px 28px;
  background: linear-gradient(180deg, rgba(34, 211, 168, 0.10) 0%, rgba(34, 211, 168, 0.04) 100%);
  border: 1px solid rgba(34, 211, 168, 0.5);
  border-radius: 18px;
  text-align: center;
  box-shadow: 0 0 40px rgba(34, 211, 168, 0.12);
}
.guarantee__badge {
  display: inline-block;
  background: #22d3a8;
  color: #06181a;
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 1.8px; text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.guarantee__headline {
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-weight: 700;
  font-size: 32px; line-height: 1.15; letter-spacing: -0.7px;
  color: #fff; margin: 0 0 14px;
}
.guarantee__headline .accent { color: #22d3a8; }
.guarantee__sub {
  color: hsla(0, 0%, 100%, 0.85); font-size: 16px; line-height: 1.55;
  margin: 0 auto 22px;
  max-width: 720px;
}
.guarantee__points {
  /* Vertical stack: each bullet on its own line, no wrap risk at any width */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0; padding: 16px 0 0;
  list-style: none;
  border-top: 1px solid rgba(34, 211, 168, 0.18);
}
.guarantee__points li {
  display: inline-flex; align-items: center; gap: 7px;
  color: hsla(0, 0%, 100%, 0.78);
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 12px; letter-spacing: 1.2px;
  text-transform: uppercase; font-weight: 500;
}
.guarantee__points li::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%;
  background: rgba(34, 211, 168, 0.2);
  border: 1px solid #22d3a8;
  background-image:
    linear-gradient(45deg, transparent 45%, #22d3a8 47%, #22d3a8 52%, transparent 54%),
    linear-gradient(-45deg, transparent 55%, #22d3a8 57%, #22d3a8 62%, transparent 64%);
  background-position: 2px 3px, 4px 3px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

/* Per-card mini-badge near the price */
.stack-card__guarantee {
  display: inline-block;
  margin-top: 10px;
  padding: 5px 11px;
  background: rgba(34, 211, 168, 0.12);
  border: 1px solid rgba(34, 211, 168, 0.4);
  border-radius: 999px;
  color: #22d3a8;
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 10.5px; letter-spacing: 1.1px; text-transform: uppercase; font-weight: 600;
}
.stack-card__guarantee::before { content: "\2713\00a0"; }

@media (max-width: 900px) {
  .guarantee { padding: 26px 22px 22px; }
  .guarantee__headline { font-size: 24px; }
  .guarantee__sub { font-size: 14.5px; }
  .guarantee__points { gap: 16px; }
}
.guarantee__footnote {
  /* Receded "fine print" treatment so it doesn't compete with the marketing
     copy above. Subtle dark inner panel signals "this is the legal section." */
  color: hsla(0, 0%, 100%, 0.45);
  font-size: 12px;
  line-height: 1.55;
  margin: 18px auto 0;
  max-width: 720px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 20px; /* generous row-to-row breathing room */
  background: rgba(0, 0, 0, 0.20);
  border-radius: 10px;
  padding: 18px 22px;
}
.guarantee__footnote-row { line-height: 1.55; }
.guarantee__footnote-row strong {
  /* Labels stand a step above the body text, but still recede vs the marketing
     copy above the footnote block. */
  display: block;
  color: hsla(0, 0%, 100%, 0.72);
  font-weight: 500;
  margin-bottom: 2px; /* keep label tight to its explanation */
}

/* Override the older blanket .guarantee__footnote strong rule that previously
   pushed all bolds to 92% white + 600 weight. New scheme: bolds inside rows
   inherit the row-strong color (72%); inline bolds (none in current copy) match. */
.guarantee__footnote strong {
  color: hsla(0, 0%, 100%, 0.72);
  font-weight: 500;
}
/* === GUARANTEE END === */



/* === NUMBERS SECTION LEAD: LOGO + "is also" === */
/* Inline logo replaces the "TradeFundrr" word in the lead-in above the
   stacked phrases. Gives the section header brand weight instead of text. */
.numbers__lead {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}
.numbers__logo {
  height: 32px;
  width: auto;
  vertical-align: middle;
  display: inline-block;
}
@media (max-width: 768px) {
  .numbers__logo { height: 26px; }
}
/* === NUMBERS SECTION LEAD END === */

/* === NUMBERS STACK FULL OPACITY === */
/* Override the cascading opacity fade on the four stacked phrases (main.css
   1523-1540 fades them from 100% → 70% → 40% → 20%). All four lines now
   render at full white + full teal accent so the messaging reads with
   consistent visual weight, not as decoration. */
.numbers__stack p,
.numbers__stack p:nth-child(2),
.numbers__stack p:nth-child(3),
.numbers__stack p:nth-child(4) {
  color: #fff !important;
}
.numbers__stack p .num,
.numbers__stack p:nth-child(2) .num,
.numbers__stack p:nth-child(3) .num,
.numbers__stack p:nth-child(4) .num {
  color: #22d3a8 !important;
}
/* === NUMBERS STACK FULL OPACITY END === */







/* === PATH CONTRAST ROWS START === */
/* THEM/US contrast block added inside both Two-Paths cards. Pairs the headline
   promise ("most prop firms run sim only and call it live, we split it honestly")
   with a visible side-by-side. The strikethrough on the "them" row is the
   visual that earns the headline.
   To remove: delete this block and the PATH_CONTRAST_01/02 markers in index.html. */
.path-card__contrast {
  margin-top: 22px;
  margin-bottom: 26px;
  border-top: 1px solid hsla(0,0%,100%,0.08);
  padding-top: 18px;
  display: grid;
  gap: 14px;
}
.path-card__contrast + .path-card__footnote,
.path-card__contrast + .path-card__cta { margin-top: 4px; }
.contrast-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: start;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.45;
}
.contrast-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 3px 6px;
  border-radius: 3px;
  text-align: center;
  align-self: start;
}
.contrast-row--them .contrast-label {
  background: hsla(0,0%,100%,0.06);
  color: hsla(0,0%,100%,0.5);
}
.contrast-row--us .contrast-label {
  background: rgba(34,211,168,0.18);
  color: #22d3a8;
}
.contrast-row--them .contrast-text {
  color: hsla(0,0%,100%,0.55);
  text-decoration: line-through;
  text-decoration-color: hsla(0,0%,100%,0.25);
}
.contrast-row--us .contrast-text {
  color: #fff;
}
@media (max-width: 600px) {
  .contrast-row { grid-template-columns: 48px 1fr; gap: 10px; font-size: 13px; }
  .contrast-label { font-size: 10px; padding: 2px 5px; }
}
/* === PATH CONTRAST ROWS END === */

/* === FAQ WHICH-MEANS START === */
/* Benefit-restating clause appended to high-stakes FAQ answers. Reframes each
   answer back to a benefit so the FAQ block re-sells instead of just hedging.
   To remove: delete this block and unwrap the <strong class="faq__means"> spans
   in index.html (or simply leave them; the strong text just falls back to bold). */
.faq__means {
  display: block;
  margin-top: 16px;
  padding: 12px 14px;
  background: rgba(34, 211, 168, 0.08);
  border-left: 3px solid #22d3a8;
  border-radius: 0 8px 8px 0;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: 0.1px;
}
/* === FAQ WHICH-MEANS END === */

/* === TRUSTPILOT STATIC HEADER START === */
/* Static stars + number block above the lazy-loaded Trustpilot widget. Ensures
   the section reads as social proof even if the widget loads slow or empty.
   To remove: delete this block and the HTML between TRUSTPILOT_HEADER_START
   and TRUSTPILOT_HEADER_END in index.html. */
.trustpilot-header {
  text-align: center;
  margin: 0 auto 28px auto;
  max-width: 720px;
}
.trustpilot-header__stars {
  color: #22d3a8;
  font-size: 30px;
  letter-spacing: 6px;
  margin-bottom: 12px;
  line-height: 1;
}
.trustpilot-header__line {
  color: #fff;
  font-size: 20px;
  margin: 0 0 8px 0;
  font-weight: 500;
}
.trustpilot-header__line strong {
  font-weight: 700;
}
.trustpilot-header__sub {
  color: hsla(0, 0%, 100%, 0.6);
  font-size: 14px;
  margin: 0;
}
@media (max-width: 768px) {
  .trustpilot-header__stars { font-size: 24px; letter-spacing: 5px; }
  .trustpilot-header__line { font-size: 17px; }
  .trustpilot-header__sub { font-size: 13px; }
}
/* === TRUSTPILOT STATIC HEADER END === */

/* === LOSS AVERSION (COST OF WAITING) START === */
/* Cost-of-inaction section between Journey end and Mid-CTA. The only section
   on the page that punishes the visitor for staying put. Pairs a "trading your
   own $5K" ceiling card against a "trading firm capital" card to anchor the
   loss-aversion math right before the close.
   To remove: delete this block and the HTML between LOSS_AVERSION_START and
   LOSS_AVERSION_END in index.html. */
.cost-of-waiting {
  padding: 96px 0;
  background: #0a0a0a;
  border-top: 1px solid hsla(0, 0%, 100%, 0.06);
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.06);
}
.cost-of-waiting .container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
.cost-of-waiting__eyebrow {
  color: #22d3a8;
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 14px 0;
}
.cost-of-waiting__headline {
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  color: #fff;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.15;
  text-align: center;
  max-width: 920px;
  margin: 0 auto 50px auto;
  font-weight: 700;
  letter-spacing: -0.8px;
}
.cost-of-waiting__headline .accent { color: #22d3a8; }
.cost-of-waiting__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 880px;
  margin: 0 auto 40px auto;
}
/* Three-stage variant ($5K → $100K → $1M+ journey). Overrides the 2-col grid
   with a 3-card + 2-arrow layout. */
.cost-of-waiting--three-stage .cost-of-waiting__grid {
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 16px;
  max-width: 1100px;
  align-items: stretch;
}
.cost-of-waiting__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(34, 211, 168, 0.55);
  font-size: 22px;
  padding: 0 4px;
}
.cost-card {
  position: relative;
  padding: 36px 28px;
  border-radius: 14px;
  background: hsla(0, 0%, 100%, 0.03);
  border: 1px solid hsla(0, 0%, 100%, 0.08);
  text-align: center;
}
.cost-card--us {
  background: linear-gradient(180deg, rgba(34, 211, 168, 0.06), rgba(34, 211, 168, 0.02));
  border-color: rgba(34, 211, 168, 0.3);
}
/* Three-stage variants: mid = funded account, top = T3 desk (the climax) */
.cost-card--mid {
  background: linear-gradient(180deg, rgba(34, 211, 168, 0.04), rgba(34, 211, 168, 0.01));
  border-color: rgba(34, 211, 168, 0.22);
}
.cost-card--top {
  background: linear-gradient(180deg, rgba(34, 211, 168, 0.10), rgba(34, 211, 168, 0.04));
  border-color: rgba(34, 211, 168, 0.45);
}
/* In three-stage mode, cards are narrower so value font shrinks slightly */
.cost-of-waiting--three-stage .cost-card { padding: 28px 22px; display: flex; flex-direction: column; }
.cost-of-waiting--three-stage .cost-card__label { font-size: 11px; margin-bottom: 14px; }
.cost-of-waiting--three-stage .cost-card__value { font-size: 32px; letter-spacing: -0.6px; margin-bottom: 10px; }
.cost-of-waiting--three-stage .cost-card--mid .cost-card__value,
.cost-of-waiting--three-stage .cost-card--top .cost-card__value { color: #22d3a8; }
.cost-of-waiting--three-stage .cost-card__unit { font-size: 12px; margin-top: 2px; }
.cost-of-waiting--three-stage .cost-card__sub { font-size: 13px; margin-top: auto; padding-top: 12px; }
.cost-of-waiting--three-stage .cost-card__badge { font-size: 9.5px; padding: 3px 7px; right: 12px; }
.cost-card__asterisk {
  color: rgba(34, 211, 168, 0.75);
  font-size: 0.55em;
  font-weight: 600;
  vertical-align: super;
  margin-left: 2px;
}
.cost-card__disclaimer {
  margin: 12px 0 0 0;
  padding-top: 10px;
  border-top: 1px solid hsla(0, 0%, 100%, 0.06);
  color: hsla(0, 0%, 100%, 0.45);
  font-size: 10.5px;
  line-height: 1.5;
  font-style: italic;
  letter-spacing: 0.1px;
}
.cost-card__label {
  display: block;
  color: hsla(0, 0%, 100%, 0.55);
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 12px;
  letter-spacing: 1.4px;
  margin-bottom: 18px;
  text-transform: uppercase;
  font-weight: 600;
}
.cost-card__value {
  display: block;
  color: #fff;
  font-size: 44px;
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 14px;
  letter-spacing: -1px;
}
.cost-card--us .cost-card__value { color: #22d3a8; }
.cost-card__unit {
  display: block;
  font-size: 14px;
  color: hsla(0, 0%, 100%, 0.5);
  font-weight: 500;
  letter-spacing: 0;
  margin-top: 4px;
}
.cost-card--us .cost-card__unit { color: hsla(0, 0%, 100%, 0.6); }
.cost-card__sub {
  display: block;
  color: hsla(0, 0%, 100%, 0.65);
  font-size: 14px;
  line-height: 1.5;
}
.cost-card__badge {
  position: absolute;
  top: -10px;
  right: 16px;
  background: #22d3a8;
  color: #04150f;
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 4px;
}
.cost-of-waiting__close {
  color: #fff;
  font-size: 19px;
  font-weight: 500;
  text-align: center;
  margin: 0 auto;
  opacity: 0.92;
  max-width: 640px;
  line-height: 1.45;
}
.cost-of-waiting__close .accent { color: #22d3a8; }
@media (max-width: 900px) {
  .cost-of-waiting--three-stage .cost-of-waiting__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .cost-of-waiting__arrow { transform: rotate(90deg); padding: 4px 0; }
}
@media (max-width: 700px) {
  .cost-of-waiting { padding: 72px 0; }
  .cost-of-waiting__grid { grid-template-columns: 1fr; gap: 18px; }
  .cost-card { padding: 28px 22px; }
  .cost-card__value { font-size: 36px; }
  .cost-of-waiting__close { font-size: 16.5px; }
}
/* === LOSS AVERSION (COST OF WAITING) END === */

/* === FEATURED REVIEWS START === */
/* Six verbatim 5-star Trustpilot review cards. Replaces the Trustpilot iframe
   widget entirely for faster load + brand-consistent rendering. The summary
   stat block at the top anchors the cards before they are read.
   To remove: delete this block and the HTML between FEATURED_REVIEWS_START
   and FEATURED_REVIEWS_END in index.html. */
.featured-reviews {
  margin: 0;
}
.featured-reviews__summary {
  text-align: center;
  margin: 0 auto 36px auto;
  padding: 24px 20px;
  max-width: 960px;
  background: hsla(0, 0%, 100%, 0.03);
  border: 1px solid hsla(0, 0%, 100%, 0.08);
  border-radius: 14px;
}
.featured-reviews__summary-stars {
  color: #22d3a8;
  font-size: 26px;
  letter-spacing: 6px;
  margin-bottom: 10px;
  line-height: 1;
}
.featured-reviews__summary-rating {
  color: #fff;
  font-size: 20px;
  margin: 0 0 4px 0;
  font-weight: 500;
  line-height: 1.3;
}
.featured-reviews__summary-rating strong {
  font-weight: 700;
}
.featured-reviews__summary-brand {
  color: hsla(0, 0%, 100%, 0.55);
  font-size: 13px;
  margin: 0;
  letter-spacing: 0.3px;
}
.featured-reviews__summary-brand a {
  color: hsla(0, 0%, 100%, 0.75);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.featured-reviews__summary-brand a:hover {
  color: #22d3a8;
}
.featured-reviews__label {
  display: block;
  color: #22d3a8;
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 24px 0;
}
.featured-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 18px;
  margin-bottom: 26px;
}
.featured-review {
  position: relative;
  padding: 26px 24px 22px;
  background: hsla(0, 0%, 100%, 0.03);
  border: 1px solid hsla(0, 0%, 100%, 0.08);
  border-radius: 14px;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
  display: flex;
  flex-direction: column;
}
.featured-review:hover {
  border-color: rgba(34, 211, 168, 0.35);
  background: hsla(0, 0%, 100%, 0.05);
  transform: translateY(-2px);
}
.featured-review__stars {
  color: #22d3a8;
  font-size: 18px;
  letter-spacing: 3px;
  margin-bottom: 12px;
  line-height: 1;
}
.featured-review__title {
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  margin: 0 0 12px 0;
  line-height: 1.3;
  letter-spacing: -0.2px;
}
.featured-review__body {
  color: hsla(0, 0%, 100%, 0.78);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 18px 0;
  flex-grow: 1;
}
.featured-review__body strong {
  color: #fff;
  font-weight: 600;
}
.featured-review__attrib {
  color: hsla(0, 0%, 100%, 0.5);
  font-size: 12.5px;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid hsla(0, 0%, 100%, 0.06);
  line-height: 1.4;
}
.featured-review__attrib strong {
  color: #fff;
  font-weight: 600;
}
.featured-reviews__cta {
  text-align: center;
  margin: 0 0 8px 0;
}
.featured-reviews__cta a {
  color: #22d3a8;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.2px;
  border-bottom: 1px solid rgba(34, 211, 168, 0.4);
  padding-bottom: 2px;
  transition: border-color .15s ease, color .15s ease;
}
.featured-reviews__cta a:hover {
  color: #fff;
  border-color: #fff;
}
@media (max-width: 1000px) {
  .featured-reviews__grid { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 600px) {
  .featured-review { padding: 22px 20px 18px; }
  .featured-review__title { font-size: 15px; }
  .featured-review__body { font-size: 13.5px; }
}
/* === FEATURED REVIEWS END === */

/* === SUPPORT DAWSON START === */
/* Real team member portrait (Dawson, Trader Success Specialist).
   Faded-edge treatment: photo dissolves into the dark page background
   via a radial-gradient mask. No hard frame or rectangle. Replaces the
   stock background image of the woman in a headset.
   To remove: delete this block, revert the HTML between SUPPORT_DAWSON_START
   and SUPPORT_DAWSON_END in index.html to the original human-support.webp img,
   and remove the .real-support background override above. */

/* Teal-tinted dark base + subtle teal grid hairlines (no "+" cross marks).
   Floating sparkles are added on top via the .support-sparkles container
   (generated by inline script at the end of the section). */
.real-support {
  background-color: #0a1f28 !important;
  background-image:
    linear-gradient(90deg, rgba(34, 211, 168, 0.10) 1px, transparent 1px),
    linear-gradient(180deg, rgba(34, 211, 168, 0.10) 1px, transparent 1px) !important;
  background-size: 200px 160px, 200px 160px !important;
  background-position: 0 0, 0 0 !important;
  background-repeat: repeat !important;
  border-top: 1px solid rgba(34, 211, 168, 0.18) !important;
  border-bottom: 1px solid rgba(34, 211, 168, 0.18) !important;
  position: relative;
  padding-block: 100px !important;
  overflow: hidden;
}
.real-support > * { position: relative; z-index: 1; }

/* Floating sparkles container — populated by inline JS at the end of the
   .real-support section. Each sparkle drifts slowly and twinkles in place. */
.support-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.support-sparkles span {
  position: absolute;
  top: var(--top);
  left: var(--left);
  width: var(--size, 2px);
  height: var(--size, 2px);
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.45);
  opacity: var(--o, 0.6);
  animation:
    support-drift var(--dur, 60s) ease-in-out var(--delay, 0s) infinite,
    support-twinkle var(--twinkle-dur, 4s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes support-drift {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(var(--drift-x), var(--drift-y)); }
  50%      { transform: translate(calc(var(--drift-x) * 1.4), calc(var(--drift-y) * -0.6)); }
  75%      { transform: translate(calc(var(--drift-x) * 0.5), calc(var(--drift-y) * 1.3)); }
}
@keyframes support-twinkle {
  0%, 100% { opacity: var(--o, 0.6); }
  50%      { opacity: calc(var(--o, 0.6) * 0.25); }
}
/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .support-sparkles span { animation: none; }
}
/* Container at standard width — Dawson is now small (Christian-portrait
   scale), so we don't need the wider 1380px container anymore. */
.real-support > .container {
  width: min(100% - 60px, 1240px) !important;
  max-width: 1240px !important;
}
/* Grid: Dawson on left at his natural scale, text on right.
   IMPORTANT: main.css line 7115 sets max-width: 480px and margin-left: auto
   on .real-support__inner — must override or the grid collapses. */
.real-support__inner {
  position: relative;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 60px !important;
  align-items: center !important;
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.real-support::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(600px, 60%);
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(34, 211, 168, 0.5) 50%, transparent 100%);
  pointer-events: none;
}

/* === SUPPORT QUOTE CARD (Dawson) === */
/* Mirrors the .founder-quote-card structure used for Christian — teal-bordered
   outer frame + framed portrait + quote + attribution. Sits in column 1 of
   .real-support__inner (left side of section). */
.support-quote-card {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.support-quote-card__inner {
  position: relative;
  max-width: 460px;
  width: 100%;
  padding: 40px 36px 32px;
  background: linear-gradient(180deg, rgba(34, 211, 168, 0.05), rgba(34, 211, 168, 0.01));
  border: 1px solid rgba(34, 211, 168, 0.22);
  border-radius: 18px;
  box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.55), 0 0 0 1px hsla(0, 0%, 100%, 0.02);
  text-align: center;
}
.support-quote-card__portrait {
  width: 220px;
  aspect-ratio: 4 / 5;
  margin: 0 auto 24px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid hsla(0, 0%, 100%, 0.08);
  background: linear-gradient(135deg, #0b1320 0%, #1a2740 100%);
  box-shadow: 0 18px 44px -16px rgba(0, 0, 0, 0.5);
}
.support-quote-card__portrait img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: 0;
}
.support-quote-card__quote {
  position: relative;
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}
.support-quote-card__quote p {
  margin: 0;
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-size: 19px;
  line-height: 1.45;
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.2px;
}
.support-quote-card__quote p strong {
  color: #22d3a8;
  font-weight: 600;
}
.support-quote-card__attrib {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid hsla(0, 0%, 100%, 0.1);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.support-quote-card__name {
  color: #fff;
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.2px;
}
.support-quote-card__role {
  color: hsla(0, 0%, 100%, 0.55);
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
/* === SUPPORT QUOTE CARD END === */

/* Legacy .support-portrait styles kept for backwards compatibility, but the
   new HTML uses .support-quote-card instead. */
.support-portrait {
  display: block !important;
  position: relative;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  box-sizing: border-box;
}
/* Framed portrait treatment — matches Christian's founder-quote-card portrait:
   rounded corners, subtle border, dark gradient backdrop, drop shadow.
   Replaces the radial-mask faded-edge approach with a clean framed photo. */
.support-portrait__inner {
  position: relative;
  aspect-ratio: 820 / 657;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid hsla(0, 0%, 100%, 0.08);
  background: linear-gradient(135deg, #0b1320 0%, #1a2740 100%);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.02);
}
.support-portrait__inner img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  border-radius: 0;
  /* Mask removed — the framed portrait treatment above (rounded corners +
     dark gradient backdrop + border) is now the edge treatment. */
  -webkit-mask-image: none;
  mask-image: none;
}
/* Caption overlay in the bottom-RIGHT of the photo (was bottom-left). Sits
   over Dawson's jacket area rather than his face/shoulder for a cleaner
   composition that doesn't break the portrait. */
.support-portrait__badge {
  position: absolute;
  bottom: 14%;
  right: 8%;
  z-index: 2;
  padding: 12px 18px;
  background: rgba(11, 19, 32, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(34, 211, 168, 0.35);
  border-radius: 12px;
  box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.5);
}
.support-portrait__badge strong {
  display: block;
  color: #fff;
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.2px;
  margin-bottom: 3px;
  white-space: nowrap;
}
.support-portrait__badge-role {
  display: block;
  color: #22d3a8;
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.4;
}

/* Legacy attribution rules (kept for backwards compatibility if the old
   markup is ever swapped back in). */
.support-portrait__attrib {
  margin: 18px 0 0 0;
  padding-top: 0;
  border-top: none;
  text-align: center;
  width: 100%;
  max-width: 100%;
}
.support-portrait__attrib strong {
  display: block;
  color: #fff;
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.2px;
  margin-bottom: 6px;
  white-space: nowrap;
}
.support-portrait__role,
.support-portrait__org {
  display: block;
  color: hsla(0, 0%, 100%, 0.55);
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.5;
}
.support-portrait__org {
  color: hsla(0, 0%, 100%, 0.35);
  font-size: 10px;
  letter-spacing: 1.6px;
  margin-top: 2px;
}
/* Mobile (< 900px): stack vertically with Dawson centered above the text */
@media (max-width: 900px) {
  .real-support__inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .support-portrait {
    max-width: 480px;
    margin: 0 auto;
  }
}
/* === SUPPORT DAWSON END === */
/* === TWO-PATHS TITLE TWO-LINE LOCK === */
/* Force the two-paths headline to render as exactly 2 lines:
   Line 1: "Most prop firms run sim only and call it live."
   Line 2 (teal): "We split it honestly."
   Default behavior wrapped the first sentence into 2 lines on most desktop
   widths because the headline font is large. Solution: keep the first sentence
   on one line via nowrap on desktop, and slightly scale the font size down at
   wider breakpoints so it actually fits.
   To remove: delete this block. The headline will revert to wrapping naturally. */
.two-paths__title-first {
  display: inline-block;
}
@media (min-width: 769px) {
  .two-paths__title { font-size: clamp(36px, 4.2vw, 50px) !important; line-height: 1.12 !important; letter-spacing: -0.6px !important; }
  .two-paths__title-first { white-space: nowrap; }
}
/* === TWO-PATHS TITLE TWO-LINE LOCK END === */

/* === NUMBERS BRAND MARK START === */
/* Small TradeFundrr mark sits centered above the 4-line numbers stack.
   Anchors the section visually so the headline doesn't float in empty space
   on top of the falling payout cards. To remove: delete this block and the
   HTML between NUMBERS_BRAND_MARK_START and NUMBERS_BRAND_MARK_END. */
.numbers__brand-mark {
  text-align: center;
  margin: 0 auto 32px auto;
  line-height: 0;
}
.numbers__brand-mark img {
  width: 240px;
  height: auto;
  display: inline-block;
  opacity: 0.95;
  filter: drop-shadow(0 4px 22px rgba(34, 211, 168, 0.28));
}
@media (max-width: 768px) {
  .numbers__brand-mark img { width: 180px; }
  .numbers__brand-mark { margin-bottom: 22px; }
}
/* === NUMBERS BRAND MARK END === */

/* === FOUNDER QUOTE CARD START === */
/* Replaces the stock trader stress-vs-success image in the final CTA section
   with a real founder portrait + signed quote. Anchors the closing CTA in
   authenticity (real person, real principle) instead of theatrical stock
   photography. To revert: restore the original
   <div class="get-started__media"> img and delete this block + the HTML
   between FOUNDER_QUOTE_CARD_START and FOUNDER_QUOTE_CARD_END. */
.founder-quote-card {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.founder-quote-card__inner {
  position: relative;
  max-width: 460px;
  padding: 40px 36px 32px;
  background: linear-gradient(180deg, rgba(34, 211, 168, 0.05), rgba(34, 211, 168, 0.01));
  border: 1px solid rgba(34, 211, 168, 0.22);
  border-radius: 18px;
  box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.55), 0 0 0 1px hsla(0, 0%, 100%, 0.02);
  text-align: center;
}
.founder-quote-card__portrait {
  /* Matches the .founders__portrait treatment used earlier on the page:
     rectangular with 18px rounded corners, 4:5 aspect ratio, dark gradient
     backdrop. The full headshot (head + shoulders + collar) is shown
     uncropped — no circular mask, no zigzag collar artifact. */
  width: 220px;
  aspect-ratio: 4 / 5;
  margin: 0 auto 24px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid hsla(0, 0%, 100%, 0.08);
  background: linear-gradient(135deg, #0b1320 0%, #1a2740 100%);
  box-shadow: 0 18px 44px -16px rgba(0, 0, 0, 0.5);
  position: relative;
}
.founder-quote-card__portrait img {
  /* !important needed because main.css's .get-started__media img rule
     sets height:auto and conflicts at equal specificity. */
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.founder-quote-card__quote {
  position: relative;
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}
.founder-quote-card__mark {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-size: 84px;
  font-weight: 700;
  line-height: 1;
  color: rgba(34, 211, 168, 0.28);
  pointer-events: none;
}
.founder-quote-card__quote p {
  margin: 0;
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-size: 19px;
  line-height: 1.45;
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.2px;
}
.founder-quote-card__quote p strong {
  color: #22d3a8;
  font-weight: 600;
}
.founder-quote-card__attrib {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid hsla(0, 0%, 100%, 0.1);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.founder-quote-card__name {
  color: #fff;
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.2px;
}
.founder-quote-card__role {
  color: hsla(0, 0%, 100%, 0.55);
  font-family: 'Geist Mono', 'Geist Mono Fallback', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
@media (max-width: 900px) {
  .founder-quote-card__inner { max-width: 100%; padding: 32px 26px 26px; margin-top: 24px; }
  .founder-quote-card__portrait { width: 180px; margin-bottom: 20px; }
  .founder-quote-card__quote p { font-size: 17px; }
  .founder-quote-card__mark { font-size: 64px; top: -22px; }
}
/* === FOUNDER QUOTE CARD END === */

/* === MARKETS CARD IMAGE FEATHER START ===
   Feathers the top and bottom edges of Markets card images so they blend into
   the card body and page background. Aggressive on top/bottom (the visible
   boundaries), gentler on left/right (which sit at card edges). */
.markets__card > img {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-mode: alpha;
          mask-mode: alpha;
}
/* === MARKETS CARD IMAGE FEATHER END === */


/* ===========================================================
   COMPETITOR COMPARISON SECTION  (added 2026-05-27)
   .stx-compare-firms -- lives on index, why-us, stocks, options
   Cross-link CTA on the same pages uses .stx-compare-cta
   =========================================================== */
.stx-compare-firms {
  padding-block: 100px;
  background: #060914;
  position: relative;
  overflow: hidden;
  border-top: 1px solid hsla(0, 0%, 100%, 0.06);
}
.stx-compare-firms::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top, rgba(34,211,168,0.06), transparent 60%);
  pointer-events: none;
}
.stx-compare-firms__wrap {
  max-width: min(100% - 60px, 1240px);
  margin: 0 auto;
  position: relative;
}
.stx-compare-firms .stx-eyebrow,
.stx-compare-firms__eyebrow {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #22d3a8;
  font-weight: 600;
  margin: 0 0 14px;
  display: block;
}
.stx-compare-firms__head {
  font-size: clamp(32px, 4.2vw, 48px);
  line-height: 1.08;
  letter-spacing: -1.4px;
  font-weight: 700;
  margin: 0 0 16px;
  max-width: 18ch;
  color: #fff;
}
.stx-compare-firms__head .accent { color: #22d3a8; }
.stx-compare-firms__lede {
  color: hsla(0, 0%, 100%, 0.72);
  font-size: 17px;
  line-height: 1.55;
  max-width: 62ch;
  margin: 0 0 32px;
}
.cmp-card {
  background: hsla(0, 0%, 100%, 0.03);
  border: 1px solid hsla(0, 0%, 100%, 0.08);
  border-radius: 18px;
  overflow: hidden;
}
.cmp-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.cmp-table {
  width: 100%;
  min-width: 1180px;
  border-collapse: collapse;
  font-size: 13px;
}
.cmp-table thead th {
  text-align: left;
  padding: 20px 14px;
  vertical-align: bottom;
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.14);
  background: rgba(255,255,255,0.02);
  min-width: 150px;
}
.cmp-table thead th .firm {
  font-size: 15px; font-weight: 700; color: #fff;
  letter-spacing: -0.2px; display: block;
}
.cmp-table thead th .meta {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px; color: hsla(0,0%,100%,0.55);
  letter-spacing: 1.1px; text-transform: uppercase;
  margin-top: 5px; display: block; line-height: 1.4;
}
.cmp-table thead th.row-label-h {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px; color: hsla(0,0%,100%,0.55);
  letter-spacing: 1.5px; text-transform: uppercase;
  font-weight: 600; min-width: 165px;
}
.cmp-table thead th.us {
  background: rgba(34, 211, 168, 0.08);
  border-bottom-color: rgba(34, 211, 168, 0.22);
}
.cmp-table thead th.us .firm { color: #22d3a8; }
.cmp-table thead th.us .meta { color: #22d3a8; opacity: 0.85; }
.cmp-table tbody tr { border-bottom: 1px solid hsla(0, 0%, 100%, 0.08); }
.cmp-table tbody tr:last-child { border-bottom: none; }
.cmp-table tbody td {
  padding: 14px; vertical-align: top;
  color: hsla(0, 0%, 100%, 0.72); line-height: 1.5;
}
.cmp-table tbody td.row-label {
  color: #fff; font-weight: 600; font-size: 12.5px;
  background: rgba(255,255,255,0.015);
}
.cmp-table tbody td.us {
  background: rgba(34, 211, 168, 0.08); color: #fff;
}
.cmp-table tbody td.us strong { color: #22d3a8; }
.cmp-table tbody td .tag {
  display: inline-block;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: 1.1px;
  text-transform: uppercase; padding: 3px 7px;
  border-radius: 999px; margin-top: 6px; line-height: 1.2;
}
.tag-yes  { background: rgba(34,211,168,0.14); color: #22d3a8; }
.tag-part { background: rgba(255,200,80,0.12); color: #ffd06b; }
.tag-no   { background: rgba(255,255,255,0.06); color: hsla(0,0%,100%,0.55); }
.cmp-table tbody td.us em.diff {
  font-style: normal; color: #22d3a8; font-weight: 700;
}
.cmp-closer {
  margin-top: 36px; padding: 22px 24px;
  background: rgba(0,0,0,0.20); border-radius: 12px;
  border: 1px solid hsla(0, 0%, 100%, 0.08);
}
.cmp-closer p {
  color: hsla(0, 0%, 100%, 0.55);
  font-size: 13px; line-height: 1.55; margin: 0 0 10px;
}
.cmp-closer p:last-child { margin-bottom: 0; }
.cmp-closer strong { color: hsla(0, 0%, 100%, 0.72); font-weight: 600; }

.scroll-hint {
  display: none;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: 1.4px;
  text-transform: uppercase;
  color: hsla(0, 0%, 100%, 0.45);
  margin: 12px 0 0;
}

/* Cross-link CTA used on stocks/options/index hero areas */
.stx-compare-cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11.5px; letter-spacing: 1.4px;
  text-transform: uppercase; font-weight: 600;
  color: #22d3a8; text-decoration: none;
  border-bottom: 1px solid rgba(34, 211, 168, 0.4);
  padding-bottom: 4px;
  transition: border-color .2s ease, transform .2s ease;
}
.stx-compare-cta:hover {
  border-bottom-color: #22d3a8;
  transform: translateX(2px);
}

@media (max-width: 1100px) {
  .scroll-hint { display: block; }
}
@media (max-width: 860px) {
  .stx-compare-firms { padding-block: 70px; }
  .cmp-table thead th, .cmp-table tbody td { padding: 12px 10px; }
}
/* ===========================================================
   END COMPETITOR COMPARISON SECTION
   =========================================================== */


/* ===========================================================
   FAQ SECTION DIVIDER + LIFT  (added 2026-05-27)
   Separates the new competitor-comparison section from the
   FAQ block on index.html. The .faq class is homepage-only;
   stocks/options use .stx-faq and are unaffected.
   =========================================================== */
section.faq {
  background: #0a101e !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
}
section.faq::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 3px;
  background: #22d3a8;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 0 18px rgba(34, 211, 168, 0.55), 0 0 4px rgba(34, 211, 168, 0.9);
}
/* === END FAQ SECTION DIVIDER + LIFT === */