/* ===== 00-base.css ===== */
/* build 2026-08-13.2 — cache-key remint: wrong-project files were uploaded
   over Homepage/dist/ (URLs 404'd / cached bad bytes under the old ?v=);
   fresh content hash points the tags at never-cached URLs */
/* ==========================================================================
   00-base.css — tokens, fonts, shared primitives
   Source of truth: Figma variables on node 3308:18451
   ("Custom portfolios - copy from PT")
   Everything is scoped under .bt-page so the bundle can be embedded
   in a host page without leaking styles.
   ========================================================================== */

/* PLACEHOLDER webfonts — stand-ins until licensed Season Mix / GT America
   are provided by the host page. The licensed families are FIRST in the
   font stacks below, so simply loading them (via the host's @font-face)
   makes every element pick them up; these imports then become dead weight
   and can be deleted.
   Season Mix (headline serif)  -> Source Serif 4
   GT America (text grotesque)  -> Inter */
@import url("css2.css");

.bt-page {
  /* ---- color: primitives ---- */
  --bt-navy: #000b50;          /* color/primitives/navy/100, Primary/Navy */
  --bt-blue: #1d6ae5;          /* color/primitives/blue/60, Secondary/Blue */
  --bt-blue-50: #2c78ea;
  --bt-blue-40: #5696ee;       /* Mid Blue */
  --bt-blue-30: #87b8f5;
  --bt-light-blue: #9ec9ff;
  --bt-gold: #ffc729;          /* Primary/Gold, -bt-color-gold-10 */
  --bt-cream: #f9f0e2;         /* -bt-color-bg-default */
  --bt-grey-10: #f5f5f5;       /* surface muted */
  --bt-grey-20: #e6e6e6;       /* border weak */
  --bt-white: #ffffff;
  --bt-teal: #226d78;
  --bt-purple: #703dea;

  /* ---- color: semantic ---- */
  --bt-text-default: #212121;
  --bt-text-muted: #5c5c5c;
  --bt-text-loud: var(--bt-blue);
  --bt-text-overlay: #ffffff;            /* text on photos / navy */
  --bt-border-weak: var(--bt-grey-20);
  --bt-border-muted: rgba(164, 164, 164, 0.4);
  --bt-separator: #c7c7c7;

  /* ---- typography ----
     Licensed families first: the moment the host page @font-face-loads
     "Season Mix" / "GT America", every element uses them at these exact
     Figma metrics. Google-font placeholders are the fallback. */
  --bt-font-headline: 'Season Mix', 'Source Serif 4', Georgia, serif;
  --bt-font-text: 'GT America', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  /* Every Season Mix headline in the comp is the Medium cut (Figma reports
     its internal weight as 580). Register Season Mix Medium at
     font-weight: 500 in your @font-face and this token matches it exactly
     with no synthetic bolding. (If you register it as 580, set 580 here.) */
  --bt-weight-headline: 500;
  --bt-headline-1: 68px;   /* Display/Headline 1: lh 1.0,  ls 0 */
  --bt-headline-2: 44px;   /* Display/Headline 2: lh 1.1, ls 0 — 54 in the comp, 44 to match betterment.com's live H2 (4.4rem @ 10px root), 2026-08-13 */
  --bt-headline-3: 36px;   /* Display/Headline 3: lh 1.2,  ls 0 */
  --bt-subhead-1: 28px;    /* Display/Subhead 1: GT America 500, lh 1.35 */
  --bt-subhead-3: 20px;    /* Display/Subhead 3: GT America 500, lh 1.35 */
  --bt-body-1: 18px;       /* Text/Body 1: GT America 400, lh 1.35 */
  --bt-body-2: 16px;       /* Text/Body 2: GT America 400, lh 1.5 */
  --bt-body-3: 14px;       /* Text/Body 3: GT America 400, lh 1.5 */
  --bt-disclosure: 12px;   /* Micro/Disclosure 1: GT America 400, lh 1.35 */

  /* ---- spacing / grid (Figma: 1440 viewport, 80 margin, 12 col, 20 gap) ---- */
  --bt-space-xs: 4px;
  --bt-space-sm: 8px;
  --bt-space-base: 12px;
  --bt-space-md: 16px;
  --bt-space-lg: 24px;
  --bt-space-xl: 32px;
  --bt-space-2xl: 40px;
  --bt-space-3xl: 48px;
  --bt-space-4xl: 80px;
  --bt-space-5xl: 120px;
  /* The host site's .bt-container gutter (betterment.com uses 2.88rem).
     Used only by absolutely-positioned elements that must align with the
     container's content edge (hero controls, protection photo). Keep in
     sync with the site's container padding; the ≤768 override matches the
     XS comps' 20px grid margin. */
  --bt-site-gutter: 2.88rem;
  --bt-grid-gap: 20px;

  /* ---- radii / shadows ---- */
  --bt-radius-sm: 4px;
  --bt-radius-md: 8px;
  --bt-radius-lg: 16px;
  --bt-radius-round: 9999px;
  --bt-shadow-short: 3px 3px 0 rgba(0, 11, 80, 0.05);
  --bt-shadow-long: 6px 6px 0 rgba(0, 11, 80, 0.1),
    inset 1.5px 1.5px 1.5px #ffffff,
    inset -1.5px -1.5px 1.5px rgba(0, 11, 80, 0.25);

  /* base text defaults for everything inside the embed */
  position: relative; /* positioning context (e.g. header overlaid on hero) */
  isolation: isolate; /* one atomic stacking context: internal z-indexes
                         (header z-10) never interleave with host content */
  /* the embed must never widen the host page: a child escaping its section
     would let phones pan/zoom the whole page sideways (seen on the sandbox
     2026-08-10). clip (unlike hidden) creates no scroll container, so
     overflow-y stays visible; the hidden line is a pre-2022-browser fallback */
  overflow-x: hidden;
  overflow-x: clip;
  /* NO top/bottom padding: .bt-page is transparent, so any padding shows the
     host's white background as a hairline between the embed and its navy
     neighbors (nav above, footer below) — seen live 2026-08-10. The earlier
     3px "breathing room" request was reversed by the user the same day. */
  font-family: var(--bt-font-text);
  font-size: var(--bt-body-2);
  line-height: 1.5;
  color: var(--bt-text-default);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- minimal reset, scoped ----
   :where() keeps specificity at (0,1,0) so any section class can override. */
.bt-page *,
.bt-page *::before,
.bt-page *::after { box-sizing: border-box; }
.bt-page :where(h1,
.bt-page h2,
.bt-page h3,
.bt-page h4,
.bt-page p,
.bt-page ul,
.bt-page ol,
.bt-page figure) { margin: 0; padding: 0; }
.bt-page :where(ul,
.bt-page ol) { list-style: none; }
.bt-page :where(img) { display: block; max-width: 100%; height: auto; }
.bt-page :where(a) { color: inherit; text-decoration: none; }
.bt-page :where(button) {
  font: inherit; color: inherit; background: none; border: 0;
  padding: 0; cursor: pointer;
}
/* Host rich-text themes (HubSpot) style ul/ol/li — margins, padding-left,
   bullets — at higher specificity than the :where() reset above; on the
   live site a host li/li:last-child margin rule opened a gap under the
   first two carousel slides. Everything inside .bt-page is our own markup,
   so hard-reset all lists; the few intended list margins/paddings in
   section css re-assert themselves with !important. */
.bt-page ul, .bt-page ol, .bt-page li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.bt-page :focus-visible {
  outline: 2px solid var(--bt-blue);
  outline-offset: 2px;
}

/* ---- layout ----
   .bt-container geometry (max-width / gutters / centering) is deliberately
   NOT defined here: betterment.com styles .bt-container globally and the
   host site owns the shared width system. The embed's containers simply
   inherit it. The standalone demo (index.html) injects an equivalent rule
   so local previews match production. */

/* ---- type helpers ---- */
.bt-page .bt-type-h1,
.bt-page .bt-type-h2,
.bt-page .bt-type-h3 {
  font-family: var(--bt-font-headline);
  font-weight: var(--bt-weight-headline); /* Season Mix Medium */
  color: var(--bt-navy);
}
.bt-page .bt-type-h1 { font-size: var(--bt-headline-1); line-height: 1; }
.bt-page .bt-type-h2 { font-size: var(--bt-headline-2); line-height: 1.1; }
.bt-page .bt-type-h3 { font-size: var(--bt-headline-3); line-height: 1.2; }
.bt-page .bt-type-subhead-1 { font-family: var(--bt-font-text); font-weight: 500; font-size: var(--bt-subhead-1); line-height: 1.35; }
.bt-page .bt-type-subhead-3 { font-family: var(--bt-font-text); font-weight: 500; font-size: var(--bt-subhead-3); line-height: 1.35; }
.bt-page .bt-type-body-1 { font-size: var(--bt-body-1); line-height: 1.35; }
.bt-page .bt-type-body-2 { font-size: var(--bt-body-2); line-height: 1.5; }
.bt-page .bt-type-body-3 { font-size: var(--bt-body-3); line-height: 1.5; }
.bt-page .bt-type-disclosure { font-size: var(--bt-disclosure); line-height: 1.35; }
@media (max-width: 1024px) {
  .bt-page .bt-type-h1 { font-size: clamp(40px, 6vw, 68px); }
  .bt-page .bt-type-h2 { font-size: clamp(34px, 5vw, 44px); }
  .bt-page .bt-type-h3 { font-size: clamp(26px, 4vw, 36px); }
}

/* ---- buttons / CTAs ---- */
.bt-page .bt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: var(--bt-font-text);
  font-weight: 500;               /* Text/CTA */
  font-size: var(--bt-body-2);
  line-height: 1.35;
  padding: 11px 24px;             /* 43px tall per comp */
  border-radius: var(--bt-radius-sm);
  transition: background-color 0.15s ease, color 0.15s ease;
}
/* the host site underlines links on hover (a:hover outranks the :where()
   reset); filled CTAs must never underline in any state */
.bt-page .bt-btn:hover,
.bt-page .bt-btn:focus,
.bt-page .bt-btn:active {
  text-decoration: none;
}
.bt-page .bt-btn--gold { background: var(--bt-gold); color: var(--bt-navy); }
.bt-page .bt-btn--gold:hover { background: #ffd45c; }
.bt-page .bt-btn--blue { background: var(--bt-blue); color: var(--bt-white); }
.bt-page .bt-btn--blue:hover { background: var(--bt-blue-50); }
.bt-page .bt-btn--white { background: var(--bt-white); color: var(--bt-navy); }
.bt-page .bt-btn--white:hover { background: var(--bt-grey-10); }
/* text links sized/aligned to sit beside a filled button */
.bt-page .bt-link {
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  font-size: var(--bt-body-2);
  line-height: 1.35;
  color: var(--bt-blue);
}
.bt-page .bt-link:hover { text-decoration: underline; }
.bt-page .bt-link--light { color: var(--bt-white); }
.bt-page .bt-link--navy { color: var(--bt-navy); }

@media (max-width: 768px) {
  .bt-page { --bt-site-gutter: 20px; } /* XS comps' grid margin */
}

/* ---- shared motion guard ---- */
@media (prefers-reduced-motion: reduce) {
  .bt-page *,
.bt-page *::before,
.bt-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== 03-hero.css ===== */
/* ==========================================================================
   03-hero.css — hero carousel (Figma nodes 3308:18454 / 18349 / 18371,
   1440x929 each). All selectors scoped under .bt-hero.
   Slides sit on one horizontal track that translates right-to-left; the
   active indicator is a 32px bar whose navy fill animates over
   --bt-hero-slide-ms, and its completion (animationend) advances the slide.
   Hovering the hero or pressing pause freezes the fill (and so the autoplay).
   ========================================================================== */

.bt-page .bt-hero {
  --bt-hero-slide-ms: 7500ms; /* autoplay duration per slide */
  position: relative;
  overflow: hidden;
  color: var(--bt-text-overlay);
  /* vertical page scroll and pinch zoom stay native; horizontal drags are
     ours (JS swipe advances the carousel) */
  touch-action: pan-y pinch-zoom;
}

/* ---- sliding track ---- */
.bt-page .bt-hero__track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.45, 0, 0.25, 1);
}

.bt-page .bt-hero__slide {
  position: relative;
  display: flex;
  align-items: center; /* Figma Stack: 929px tall, content vertically centered */
  flex: 0 0 100%;
  min-width: 100%;
  min-height: 929px;
  overflow: hidden;
}

/* fixed sky behind every slide: painted before the track (which owns its
   own transform stacking context), so slide transitions move content over a
   stationary background — the original design intent (2026-08-12) */
.bt-page .bt-hero__sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.bt-page .bt-hero__sky img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important; /* survive host rich-text img rules */
  object-fit: cover;
}

/* right-side artwork on slides 2/3 ("Artwork 3": 929x929 box anchored to
   the right edge, content centered inside) */
.bt-page .bt-hero .bt-hero__artwork {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 929px;
  height: 929px;
  max-width: 62vw;
  pointer-events: none;
}

/* slide 1 foreground: the cutout webp is the old composite's exact
   foreground (hand + phone + sleeve) at the slide's own 1440:929 aspect,
   so a full-bleed cover keeps the designed registration over the fixed
   sky. Geometry is !important: host rich-text themes force img
   max-width/height at higher specificity (broke the hand 2026-08-10). */
.bt-page .bt-hero .bt-hero__artwork--hand {
  top: 0;
  right: auto;
  bottom: 0;
  left: 0;
  transform: none;
  width: 100%;
  height: 100%;
  max-width: none;
}
.bt-page .bt-hero__artwork--hand img {
  position: absolute;
  top: 0;
  left: 0;
  transform: none;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: 50% 0;
}

/* fixed-size design canvas centered in the artwork square; scaled down in
   steps at narrower viewports */
.bt-page .bt-hero__artwork-canvas {
  --bt-hero-art-scale: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  transform: translate(-50%, -50%) scale(var(--bt-hero-art-scale));
}

/* slide 2: "image 39" — 610x484 frame, raw image is 105.7% wide (Figma crop) */
.bt-page .bt-hero__artwork-canvas--montage {
  width: 610px;
  height: 484px;
  overflow: hidden;
}

.bt-page .bt-hero__artwork-canvas--montage img {
  position: absolute;
  top: 0;
  left: -0.07%;
  height: 100% !important; /* same host-img-rule defense as the hand above */
  width: auto !important;
  max-width: none !important;
}

/* slide 3: "CR Rate-Dollars" — 640px board, bill vectors at Figma insets */
.bt-page .bt-hero__artwork-canvas--apy {
  width: 640px;
  height: 640px;
}

.bt-page .bt-hero__bill {
  position: absolute;
}

.bt-page .bt-hero__bill--1 { inset: 29.75% 76.42% 45.76% 0; }
.bt-page .bt-hero__bill--2 { inset: 8.5% 65.67% 74.49% 24.25%; }
.bt-page .bt-hero__bill--3 { inset: 76.08% 42.1% 6.24% 47.42%; transform: rotate(180deg) scaleX(-1); }
.bt-page .bt-hero__bill--4 { inset: 57.42% 67% 10.47% 0; }
.bt-page .bt-hero__bill--5 { inset: 59.67% 0 20.72% 63.83%; }
.bt-page .bt-hero__bill--6 { inset: 10.08% -0.56% 71.59% 66.75%; }

/* APY-boost card, rebuilt (Figma export flattens its backdrop blur) */
.bt-page .bt-hero__apy-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 21px;                       /* Figma 21.334 */
  padding: 38px 34px;              /* Figma 38.402 / 34.135 */
  border-radius: 37px;             /* Figma 36.865 */
  background: rgba(245, 245, 245, 0.95); /* #f5f5f5 + backdrop blur in comp */
  -webkit-backdrop-filter: blur(5.5px);
  backdrop-filter: blur(5.5px);
  box-shadow:
    15px 15px 0 rgba(0, 11, 80, 0.2),
    inset -2.5px -2.5px 2.5px rgba(0, 0, 0, 0.25),
    inset 2.5px 2.5px 2.5px #ffffff;
  color: var(--bt-navy);
}

.bt-page .bt-hero__apy-row {
  display: flex;
  align-items: flex-end;
  gap: 7px; /* Figma 6.554 */
}

.bt-page .bt-hero__apy-num {
  display: block;
  font-family: var(--bt-font-headline);
  font-weight: var(--bt-weight-headline); /* Season Mix Medium */
  font-size: 154px; /* Figma 153.61 */
  line-height: 1;
  text-box: trim-both cap alphabetic;
}

.bt-page .bt-hero__apy-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
}

.bt-page .bt-hero__apy-pct {
  display: block;
  font-weight: 500;
  font-size: 102px; /* Figma 102.41 */
  line-height: 1;
  text-box: trim-both cap alphabetic;
}

.bt-page .bt-hero__apy-apy {
  display: block;
  font-weight: 500;
  font-size: 34px; /* Figma 34.14 */
  line-height: 1.1;
  letter-spacing: 1.7px;
  text-align: center;
}

.bt-page .bt-hero__apy-note {
  /* "(variable)" under the rate — same Figma type spec the old BOOST line
     used (18.21 / ls 0.9105), node 3308:18394 rev 2026-08-12 */
  display: block;
  font-weight: 500;
  font-size: 18px; /* Figma 18.21 */
  line-height: 1.1;
  letter-spacing: 0.91px;
  text-align: center;
}

.bt-page .bt-hero__inner {
  position: relative;
  width: 100%;
}

/* ---- content column (Stack: max 630px incl. 80px right pad) ---- */
.bt-page .bt-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bt-space-2xl); /* 40px eyebrow -> title -> body block */
  max-width: 630px;
  padding-right: var(--bt-space-4xl); /* 80px, per comp */
}

/* eyebrow (slides 2/3): live-site spec 1.4rem/1.15 + 0.112rem tracking at
   the 10px root = 14px / 1.15 / 1.12px (2026-08-14; tracking was 0.56) */
.bt-page .bt-hero__eyebrow {
  font-weight: 500; /* GT America Medium (was Bold per comp; 2026-08-17) */
  font-size: 14px;
  line-height: 1.15;
  letter-spacing: 1.12px;
  text-transform: uppercase;
  color: var(--bt-text-overlay);
}

.bt-page .bt-hero__title {
  color: var(--bt-text-overlay); /* white headline on photo */
}

/* Figma trims text boxes to cap height/baseline; progressive enhancement —
   non-supporting browsers just get slightly looser vertical rhythm */
.bt-page .bt-hero__title,
.bt-page .bt-hero__body,
.bt-page .bt-hero__eyebrow {
  text-box: trim-both cap alphabetic;
}

.bt-page .bt-hero__stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bt-space-xl); /* 32px body -> bullets */
}

.bt-page .bt-hero__body {
  max-width: 413px; /* Body row max-width per comp */
  color: var(--bt-text-overlay);
}

/* bullet list: rows of icon 16 + 8px gap, 20px between rows */
.bt-page .bt-hero__bullets {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Figma gap-base */
}

.bt-page .bt-hero__bullet {
  display: flex;
  align-items: center;
  gap: var(--bt-space-sm); /* 8px */
  font-size: var(--bt-body-2);
  line-height: 1; /* row height 16px like the trimmed comp (36px pitch) */
}

.bt-page .bt-hero__bullet img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* CTA row: stack gap 24 + row padding-top 12 = 36px above button
   (stack gap is 32, so add the 4px difference here) */
.bt-page .bt-hero__cta-row {
  margin-top: 4px;
}

/* disclosure under the CTA (slides 2/3): 12px, 70% light grey; comp gap is
   24px below the CTA row (stack gap 32 - 8) */
.bt-page .bt-hero__disclosure {
  margin-top: -8px;
  max-width: 470px; /* comp was 301px for the pre-2026 two-line copy; widened
                       for the legal Cash Reserve disclosure so it wraps to
                       ~6 lines instead of a 15-line column */
  font-size: var(--bt-disclosure);
  line-height: 1.35;
  color: rgba(245, 245, 245, 0.7);
}

/* inline links inside the legal disclosure (Program Banks / Learn more /
   Terms apply) — the :where() reset strips underlines, restore them so the
   links are discoverable on the photo background */
.bt-page .bt-hero__disclosure a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- hero controls pill (109x32) ----
   CSS pins it bottom-left as a no-JS fallback; on desktop the carousel JS
   repositions it 32px under the active slide's content column (below the
   CTA/disclosure — stakeholder feedback 2026-08-13), gliding between
   slides via the top transition. */
.bt-page .bt-hero__controls {
  position: absolute;
  left: var(--bt-site-gutter); /* align with the host container's gutter */
  bottom: 40px; /* 929 - 857 - 32 */
  transition: top 0.3s ease;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 9px 14px;
  border-radius: var(--bt-radius-round);
  background: rgba(255, 255, 255, 0.2); /* frosted pill on photo */
  box-shadow:
    inset 1.5px 1.5px 1.5px rgba(255, 255, 255, 0.35),
    inset -1.5px -1.5px 1.5px rgba(0, 11, 80, 0.18);
}

.bt-page .bt-hero__playpause {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-right: 9px; /* pause button trailing margin per comp */
  flex-shrink: 0;
  color: var(--bt-navy);
}

/* pause icon: two 3x12 bars, 3px apart */
.bt-page .bt-hero__icon-pause {
  display: flex;
  align-items: center;
  gap: 3px;
}

.bt-page .bt-hero__icon-pause span {
  display: block;
  width: 3px;
  height: 12px;
  border-radius: 1px;
  background: var(--bt-navy);
}

.bt-page .bt-hero__icon-play {
  display: none;
}

.bt-page .bt-hero__playpause--paused .bt-hero__icon-pause {
  display: none;
}

.bt-page .bt-hero__playpause--paused .bt-hero__icon-play {
  display: block;
}

/* ---- slide indicators: 6px dots; the active one stretches to a 32px bar
   whose navy fill is the autoplay progress ---- */
.bt-page .bt-hero__dot {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: rgba(0, 11, 80, 0.45); /* navy 45% track */
  overflow: hidden;
  flex-shrink: 0;
  transition: width 0.3s ease;
}

.bt-page .bt-hero__dot--active {
  width: 32px;
}

.bt-page .bt-hero__dot-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: var(--bt-navy);
}

/* static fallback (no JS): show the comp's partial fill on the active bar */
.bt-page .bt-hero__dot--active .bt-hero__dot-fill {
  width: 15px;
}

/* JS adds --run per activation; completion advances the carousel */
.bt-page .bt-hero__dot--active .bt-hero__dot-fill--run {
  animation: bt-hero-progress var(--bt-hero-slide-ms) linear forwards;
}

@keyframes bt-hero-progress {
  from { width: 0; }
  to { width: 100%; }
}

/* explicit pause freezes progress (and auto-advance) everywhere */
.bt-page .bt-hero--paused .bt-hero__dot-fill--run {
  animation-play-state: paused;
}
/* hover-pause only where hover is a real state: on touch screens :hover is
   sticky — the first tap/swipe would pin it and silently freeze autoplay
   until the user taps elsewhere (2026-08-17; mobile keeps the pause BUTTON) */
@media (hover: hover) {
  .bt-page .bt-hero:hover .bt-hero__dot-fill--run {
    animation-play-state: paused;
  }
}

/* reduced motion: JS adds --static and skips autoplay; active bar reads full */
.bt-page .bt-hero--static .bt-hero__dot--active .bt-hero__dot-fill {
  width: 100%;
}

/* ---- responsive degradation ---- */
@media (max-width: 1280px) {
  .bt-page .bt-hero__artwork-canvas {
    --bt-hero-art-scale: 0.8;
  }
}

@media (max-width: 1024px) {
  .bt-page .bt-hero__slide {
    min-height: 720px;
  }

  .bt-page .bt-hero__content {
    padding-right: 0;
    /* keep the copy on the left half so it clears the photo's phone and the
       right-anchored artwork squares in this band (2026-08-19) */
    max-width: 48%;
  }

  /* the 68px display headline overran the artwork at tablet widths — scale
     it through the band (66px at 1024 -> 50px at 769) */
  .bt-page .bt-hero__title {
    font-size: clamp(44px, 6.5vw, 68px);
  }

  .bt-page .bt-hero__artwork-canvas {
    --bt-hero-art-scale: 0.6;
  }

  .bt-page .bt-hero__controls {
    bottom: 32px; /* left stays on --bt-site-gutter */
  }
}

/* Tablet band ONLY (769-1024): clamp the right-anchored artwork squares of
   slides 2/3 so they don't crowd the copy. Banded, not ≤1024: this selector
   outranks the phone layout's max-width reset ((0,4,0) vs (0,3,0)), and when
   it cascaded into ≤768 it clipped the phone artwork to a 55vw window (seen
   on-device 2026-08-19). Slide 1's full-bleed hand stays exempt. */
@media (min-width: 769px) and (max-width: 1024px) {
  .bt-page .bt-hero__slide:nth-child(n+2) .bt-hero__artwork {
    max-width: 55vw;
  }
}

/* ---- XS layout (Figma 3308:18395/18412/18431, 390x915 comps) ----
   content flows from the top; every slide's artwork sits in a 468px
   square glued to the bottom center; controls pill at 20/20. */
@media (max-width: 768px) {
  .bt-page .bt-hero__slide {
    display: block;
    min-height: 915px; /* comp height; taller content just grows */
    /* the host's mobile nav OVERLAYS the hero (transparent, ~64px): 100px
       clears it with breathing room — user-requested 2026-08-10 (the comp's
       96px top offset reads the same way).
       Bottom 492px (= 468 artwork square + 24 gap) reserves the bottom-
       anchored square below the content: the comps' fixed 915 frame fit
       40px titles, but at the 56px mobile headlines (2026-08-14) the copy
       runs past the square's y=447 top, so each slide now grows to hold
       copy + square with no overlap. !important survives the list reset.
       (Canvases are top-anchored in the square since 2026-08-17, so the
       reserved band is fully used by visible art.) */
    padding: 100px 0 492px !important;
  }

  /* (the 2026-08-12 +10% per-artwork scale bump was superseded by the
     canvas-level 0.615 + top-anchor below, 2026-08-17) */
  .bt-page .bt-hero__slide:nth-child(3) .bt-hero__disclosure {
    display: none; /* mobile drops the Cash Reserve legal copy (2026-08-12) */
  }
  /* slide 2's desktop headline break ("…$2,000 / on us") makes a stubby
     third line on mobile — drop the break and size the title so the whole
     line wraps to exactly two lines in the 350px column (34px is the
     largest that fits; 36px+ re-wraps to three) — 2026-08-12 */
  /* slide 2 drops its desktop "…/ on us" break on mobile; the 34px two-line
     special-case died when all mobile hero headlines moved to 56px */
  .bt-page .bt-hero__slide:nth-child(2) .bt-hero__title br {
    display: none;
  }

  /* all artwork squares: 468x468, bottom-centered, clipped */
  .bt-page .bt-hero .bt-hero__artwork {
    top: auto;
    right: auto;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 468px;
    height: 468px;
    max-width: none;
    overflow: hidden;
  }

  /* the hand's square pins to the comp's 390-viewport position instead of
     centering: on wider phones (430px iPhones, small tablets) a centered
     square drifts right and the wrist no longer bleeds off the
     bottom-left corner */
  .bt-page .bt-hero .bt-hero__artwork--hand {
    top: auto;
    left: -39px; /* (390 - 468) / 2 */
    width: 468px;
    height: 468px;
    transform: none;
  }
  /* hand cutout inside the XS square (Figma 3308:18395): the webp is the
     wide-frame cutout — 725.425x468 in the square, top 0, center offset
     -128.71px (percentages of the 468 square so it scales). Swap to the
     square XS re-export geometry (left 0 / width 100%) once design ships
     it without the baked dark-sky remnants. */
  .bt-page .bt-hero__artwork--hand img {
    left: 22.498%; /* 50% - 27.502% (=-128.71/468) */
    transform: translateX(-50%);
    width: 155.005% !important; /* 725.425/468 */
    height: 100% !important;
  }

  /* montage + APY board: anchored to the TOP of the artwork square (they
     were centered, leaving up to ~100px of dead headroom that pushed the
     art below the fold on phones) and scaled so the montage spans the full
     375 viewport — 2026-08-17. Comp scale was 0.50375; the +10% round took
     it to 0.554; 0.615 = 375/610 (montage design width). */
  .bt-page .bt-hero__artwork-canvas {
    --bt-hero-art-scale: 0.615;
    top: 0;
    transform: translateX(-50%) scale(var(--bt-hero-art-scale));
    transform-origin: 50% 0;
  }
  /* the APY canvas's topmost bill starts 54.4 design-px (8.5% of 640) into
     the canvas, so its VISIBLE art sat lower than the montage's — cancel
     that internal headroom (54.4 * 0.615 ≈ 33px) so slides 2 and 3 start
     their art at the same y (2026-08-18) */
  .bt-page .bt-hero__artwork-canvas--apy {
    top: -33px;
  }

  /* the comp keeps the card's 36.865px rendered radius despite the 0.50375
     scale -> pre-divide so the scaled result matches */
  .bt-page .bt-hero__apy-card {
    border-radius: 73px;
  }

  /* the XS comps compose on 20px gutters (stack x=20, 350 col at 390); the
     host .bt-container keeps 2.88rem on phones, squeezing the column to
     283px — same override the retirement section uses (2026-08-17) */
  .bt-page .bt-hero__inner {
    padding-inline: var(--bt-site-gutter);
  }

  /* content fills the container's content box (was capped at 350px) */
  .bt-page .bt-hero__content {
    gap: var(--bt-space-xl); /* 32px */
    max-width: none;
    padding-right: 0;
  }

  .bt-page .bt-hero__stack {
    gap: var(--bt-space-md); /* 16px */
  }

  .bt-page .bt-hero__title {
    font-size: 56px; /* was the comp's 40; matches the live site's mobile
                        hero headline (5.6rem @ 10px root), 2026-08-14 */
  }

  .bt-page .bt-hero__bullets {
    margin-top: 8px !important; /* body -> bullets = 24; survives list hard-reset */
    gap: 8px 16px;   /* comp bullet-list gaps */
  }

  .bt-page .bt-hero__bullet {
    font-size: var(--bt-body-3); /* 14px on XS */
  }

  .bt-page .bt-hero__cta-row {
    margin-top: 12px; /* bullets -> CTA = 28 (gap 16 + row pt 12) */
  }

  /* slide 1's comp stack is tighter: gap 12 + row pt 12 = 24 above the CTA
     (slides 2/3 use gap 16 -> 28) */
  .bt-page .bt-hero__slide:first-child .bt-hero__cta-row {
    margin-top: 8px;
  }

  .bt-page .bt-hero__disclosure {
    margin-top: 0; /* CTA -> disclosure = stack gap 16 */
    max-width: 100%; /* comp: spans the full 350px column on XS */
  }

  .bt-page .bt-hero__controls {
    bottom: 20px; /* left follows --bt-site-gutter (20px at XS) */
  }
}

/* ===== 04-product-links.css ===== */
/* ==========================================================================
   04-product-links.css — "Get started with an account in minutes."
   Figma node 3308:18471 (1440x629), background instance 3308:18452.

   Background continuity: the blue gradient (node 3308:18452) is 908px tall
   and spans page y=973..1881. This section shows its top 629px; the next
   section (05, plan cards) shows the remaining 279px. Both sections must use
   the SAME gradient definition; section 05 offsets it by -629px.
   Color at this section's bottom edge (page y=1602): #518cea.
   ========================================================================== */

.bt-page .bt-product-links {
  /* shared gradient with section 05: designed pixel stops at the top, but the
     bottom edge is PINNED to the seam color #518cea so the section can grow
     (the 2026-08-11 legal disclosure added ~96px) without breaking the
     plan-cards handoff — same pattern the ≤1024 rule already uses */
  background-image: linear-gradient(
    180deg,
    #1142a7 0,           /* deep blue (gradient-only, no token) */
    var(--bt-blue) 548px, /* 60.364% of the shared 908px band */
    var(--bt-blue) calc(100% - 48px), /* hold blue behind the legal disclosure
                                         so its 12px text passes WCAG AA */
    #518cea 100%          /* seam color; 05-plan-cards starts here */
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: top center;
  /* 109 / 90 instead of Figma's 120 / 80: compensates for Figma cap-height
     text trimming so total height lands at the designed 629px */
  padding-top: 109px;
  padding-bottom: 90px;
}

/* ---- headline ---- */
.bt-page .bt-product-links__heading {
  font-family: var(--bt-font-headline);
  font-weight: var(--bt-weight-headline); /* Season Mix Medium (Figma 580) */
  font-size: var(--bt-headline-2); /* shared H2 size (44px, 2026-08-13) */
  line-height: 1.1;
  color: var(--bt-white);
  text-align: center;
  margin-bottom: 66px; /* columns land at designed y=232 */
}

/* ---- three-column grid ---- */
.bt-page .bt-product-links__grid {
  display: flex;
  justify-content: space-between;
  gap: var(--bt-grid-gap);
}
.bt-page .bt-product-links__col {
  flex: 0 1 364px;
  min-width: 0;
}
.bt-page .bt-product-links__col-title {
  font-family: var(--bt-font-text);
  font-weight: 500;
  font-size: var(--bt-subhead-1); /* 28px */
  line-height: 1.35;
  color: var(--bt-white);
  margin-bottom: 20px; /* Figma 28 minus untrimmed descender half-leading */
}
.bt-page .bt-product-links__list > li + li {
  margin-top: 28px !important; /* survives the base list hard-reset */
}

/* ---- row link ---- */
.bt-page .bt-product-links__row {
  position: relative;
  z-index: 0; /* own stacking context so the hover pill can sit behind content */
  display: flex;
  align-items: center;
  gap: var(--bt-grid-gap); /* 20px */
  padding-top: 17px; /* tile top at designed offset (was 16 + 1px border) */
  min-height: 67px;
}

/* hairline separator as an overlay (not border-top) so the hover pill's
   radius never bends it */
.bt-page .bt-product-links__row::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.2); /* hairline per comp */
  transition: opacity 0.15s ease;
}

/* hover container (Figma 3308:18189 / frame 1984079077): a 20%-white
   18px-radius pill that OUTSETS the content — 16px left, 17px right and
   bottom; its top lands on the hairline (17px above the tile) */
.bt-page .bt-product-links__row::after {
  content: '';
  position: absolute;
  z-index: -1; /* behind the row content, inside the row's stacking context */
  top: 0;
  left: -16px;
  right: -17px;
  bottom: -17px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.2);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none; /* visual only; the <a> is the hit area */
}

/* hover: the hairline disappears and the container fades in; the whole
   row is the link */
.bt-page .bt-product-links__row:hover::after,
.bt-page .bt-product-links__row:focus-visible::after {
  opacity: 1;
}
.bt-page .bt-product-links__row:hover::before,
.bt-page .bt-product-links__row:focus-visible::before,
.bt-page .bt-product-links__list > li:hover + li .bt-product-links__row::before {
  opacity: 0; /* hide the hovered row's line and the one below it */
}

.bt-page .bt-product-links__row:hover .bt-product-links__subtitle {
  color: var(--bt-white);
}

/* guardrail: betterment.com underlines every a:hover ((0,1,1) — outranks the
   :where() reset); these rows are block links, never underline any state */
.bt-page .bt-product-links__row:hover,
.bt-page .bt-product-links__row:focus-visible,
.bt-page .bt-product-links__row:active {
  text-decoration: none;
}

/* ---- icon tile ---- */
.bt-page .bt-product-links__tile {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 10.731px; /* per comp */
  background: var(--bt-grey-10);
  box-shadow: var(--bt-shadow-long); /* 6px offset drop + inset bevel */
}

/* glyph canvas: 32.691px designed box, parts absolutely positioned inside */
.bt-page .bt-product-links__glyph {
  position: relative;
  display: block;
  width: 32.691px;
  height: 32.691px;
}
.bt-page .bt-product-links__part {
  position: absolute;
  display: block;
}
/* Automated investing — three ellipse strokes, all mirrored in comp */
.bt-page .bt-product-links__part--auto-outer { left: 2.72px; top: 2.72px;  width: 27.24px; height: 27.24px; transform: scaleX(-1); }
.bt-page .bt-product-links__part--auto-bl { left: 2.72px; top: 16.35px; width: 13.62px; height: 13.62px; transform: scaleX(-1); }
.bt-page .bt-product-links__part--auto-tl { left: 2.72px; top: 2.72px;  width: 13.62px; height: 13.62px; transform: scaleX(-1); }
/* Self-directed investing */
.bt-page .bt-product-links__part--self { left: 4.09px; top: 4.09px; width: 24.52px; height: 24.52px; }
/* Custom portfolios — plus sign + three donut arcs */
.bt-page .bt-product-links__part--custom-plus { left: 19.07px; top: 2.72px;  width: 10.9px;  height: 10.9px; }
.bt-page .bt-product-links__part--custom-left { left: 2.72px;  top: 2.72px;  width: 13.62px; height: 27.24px; transform: scaleX(-1); }
.bt-page .bt-product-links__part--custom-br { left: 16.34px; top: 16.34px; width: 13.62px; height: 13.62px; }
.bt-page .bt-product-links__part--custom-tl { left: 2.72px;  top: 2.72px;  width: 13.62px; height: 13.62px; transform: scaleX(-1); }
/* High-yield cash */
.bt-page .bt-product-links__part--cash { left: 1.36px; top: 5.45px; width: 29.97px; height: 21.79px; }
/* Checking — blue card + navy band (band is a plain rect in the comp) */
.bt-page .bt-product-links__part--card { left: 2.72px; top: 5.45px;  width: 27.24px; height: 21.79px; }
.bt-page .bt-product-links__part--card-band { left: 2.72px; top: 10.9px;  width: 27.24px; height: 5.45px; background: var(--bt-navy); }
/* IRAs / SEP IRA — umbrella, mirrored in comp */
.bt-page .bt-product-links__part--umbrella { left: 4.09px; top: 3.75px; width: 24.55px; height: 24.59px; transform: scaleX(-1); }
/* Solo 401(k) — briefcase + gold clasp rect */
.bt-page .bt-product-links__part--briefcase { left: 2.72px;  top: 2.72px;  width: 27.24px; height: 25.88px; }
.bt-page .bt-product-links__part--briefcase-lock { left: 13.62px; top: 16.35px; width: 5.45px;  height: 5.44px; background: var(--bt-gold); }

/* ---- row text ---- */
.bt-page .bt-product-links__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px; /* Figma 12 between trimmed text boxes ≈ 2px between untrimmed line boxes */
  /* no right padding: text box is the full 294px in the comp, longest
     subtitle runs up to the arrow's left edge */
}
.bt-page .bt-product-links__title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bt-page .bt-product-links__title {
  font-family: var(--bt-font-text);
  font-weight: 500;
  font-size: 18px; /* Figma literal, between body-2 and subhead-3 */
  line-height: 1.35;
  color: var(--bt-white);
}
.bt-page .bt-product-links__subtitle {
  font-size: var(--bt-body-2); /* 16px */
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap; /* single line at 1440 per comp */
  transition: color 0.15s ease;
}
@media (max-width: 1024px) {
  .bt-page .bt-product-links__subtitle { white-space: normal; }
}

/* ---- pill badge ---- */
.bt-page .bt-product-links__pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px; /* tight vertical hug per copy-edit round 2026-08-11 (was 8px all around) */
  margin-block: -3px; /* pill overflows its text row in the comp; keep row height at the title's line box */
  border-radius: var(--bt-radius-round); /* Figma 60px */
  background: var(--bt-light-blue);
  color: var(--bt-navy);
  font-size: var(--bt-body-3); /* 14px */
  line-height: 1.5;
  white-space: nowrap;
}

/* ---- arrow ---- */
.bt-page .bt-product-links__arrow {
  position: absolute;
  right: 0;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
}
.bt-page .bt-product-links__arrow img {
  position: absolute;
  left: 3.02px;
  top: 3.61px;
  width: 13.09px;
  height: 13.09px;
  transition: transform 0.15s ease;
}
/* hover: the north-east arrow rotates 45° clockwise to point due right
   (replaces the earlier 2px diagonal nudge — copy-edit round 2026-08-11) */
.bt-page .bt-product-links__row:hover .bt-product-links__arrow img,
.bt-page .bt-product-links__row:focus-visible .bt-product-links__arrow img {
  transform: rotate(45deg);
}

/* ---- legal disclosure below the grid (Cash Reserve / APY Boost, mirrors
   the hero slide-3 copy) — 12px per copy-edit round 2026-08-11 ---- */
.bt-page .bt-product-links__disclosure {
  margin-top: var(--bt-space-3xl); /* 48px below the grid */
  /* centered at the plan-cards disclaimer's measure so the page's
     disclosures read as one system (stakeholder feedback 2026-08-13) */
  max-width: 1200px;
  margin-inline: auto;
  text-align: center;
  font-size: 12px;
  line-height: 1.35;
  /* full-opacity (not the hero's 0.7 alpha): this bg is --bt-blue, far
     lighter than the hero photo — 0.7 white composites to ~3.5:1, failing
     WCAG AA for 12px legal text; solid #f5f5f5 on --bt-blue passes 4.5:1 */
  color: #f5f5f5;
}
.bt-page .bt-product-links__disclosure a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- responsive ---- */
@media (max-width: 1024px) {
  .bt-page .bt-product-links {
    /* stacked columns exceed the designed 908px gradient band; stretch the
       gradient to the full section and end at the plan-cards seam color */
    background-image: linear-gradient(180deg, #1142a7 0%, var(--bt-blue) 55%, var(--bt-blue) calc(100% - 48px), #518cea 100%);
    background-size: 100% 100%;
  }
  .bt-page .bt-product-links__heading {
    font-size: clamp(34px, 5vw, 44px); /* matches .bt-type-h2's clamp */
  }
  .bt-page .bt-product-links__grid {
    flex-wrap: wrap;
    gap: 48px var(--bt-grid-gap);
  }
  .bt-page .bt-product-links__col {
    flex: 1 1 300px;
    max-width: 364px;
  }
}
@media (max-width: 768px) {
  .bt-page .bt-product-links {
    padding-top: 64px;
    /* 48 here + 48 plan-cards header padding-top = 96px total between the
       legal disclosure and "Invest the way you want." (mobile round 2026-08-11) */
    padding-bottom: 48px;
  }
  .bt-page .bt-product-links__heading {
    margin-bottom: 40px;
  }
  .bt-page .bt-product-links__col-title {
    font-size: 22px; /* mobile-only, down from 28px (mobile round 2026-08-11) */
  }
  .bt-page .bt-product-links__grid {
    flex-direction: column;
    gap: 40px;
  }
  .bt-page .bt-product-links__col {
    flex: 1 1 auto;
    max-width: none;
    width: 100%;
  }
}

/* ===== 05-plan-cards.css ===== */
/* ==========================================================================
   05-plan-cards.css — "Invest the way you want." (Figma node 3308:18528)
   Top 279px continues the shared blue gradient from node 3308:18452:
   full gradient = 180deg #1142a7 0% → #1d6ae5 60.364% → #b3cbf2 85.893%
   → #f9f0e2 100% over page y=973..1881; in flow this section starts where
   section 04 ends (page y=1602 = 69.27% in) → top-edge color #518cea,
   #b3cbf2 at y=151, cream at y=279.
   ========================================================================== */

.bt-page .bt-plan-cards {
  position: relative;
  overflow: hidden;
  background-color: var(--bt-cream);
  background-image: linear-gradient(
    180deg,
    #518cea 0px,      /* seam color, matches section 04 bottom edge */
    #b3cbf2 151px,    /* gradient stop from shared bg node 3308:18452 */
    var(--bt-cream) 279px
  );
  background-repeat: no-repeat;
}

/* ---- warm orange arc behind the cards ---- */
.bt-page .bt-plan-cards__arc {
  position: absolute;
  top: 325px;
  left: 0;
  right: 0;
  height: 772px;
  overflow: hidden;
  pointer-events: none;
}
.bt-page .bt-plan-cards__arc img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1619px;
  height: 772px;
  max-width: none;
}

/* ---- headline ---- */
.bt-page .bt-plan-cards__header {
  position: relative;
  z-index: 1;
  padding-top: var(--bt-space-5xl); /* 120px */
}
.bt-page .bt-plan-cards__title {
  font-family: var(--bt-font-headline);
  font-weight: var(--bt-weight-headline); /* Season Mix Medium (Figma 580) */
  font-size: var(--bt-headline-2); /* shared H2 size (44px, 2026-08-13) */
  line-height: 1.1;
  color: var(--bt-navy);
  text-align: center;
}

/* ---- cards row (spans x=40..1400 at 1440, wider than .bt-container) ---- */
.bt-page .bt-plan-cards__row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bt-grid-gap);
  width: min(1360px, 100% - 48px);
  margin: 246px auto 0; /* middle card top lands at y=414 per comp */
}
.bt-page .bt-plan-cards__item {
  position: relative;
  flex: 0 1 437px;
  min-width: 0;
}
.bt-page .bt-plan-cards__item--side {
  margin-top: 139px; /* side cards top y=553 vs raised middle y=414 */
}

/* ---- floating tooltip chips with stem + hollow dot ---- */
.bt-page .bt-plan-cards__tip {
  position: absolute;
  top: -142px;
  left: 218px; /* stem-center x from comp */
  transform: translateX(-50%);
  white-space: nowrap;
}
.bt-page .bt-plan-cards__tip--left { left: 217.5px; }
.bt-page .bt-plan-cards__tip--center { top: -143px; left: 220px; }
.bt-page .bt-plan-cards__tip--right { left: 218.5px; }
.bt-page .bt-plan-cards__tip-chip {
  position: relative;
  z-index: 1;
  padding: 10px 19px; /* was 17px block; 15px on 08-11, shaved to 10px per copy round 2026-08-12 */
  border-radius: 13px;
  background: var(--bt-grey-10);
  box-shadow: var(--bt-shadow-short);
  font-weight: 700; /* GT America Bold */
  font-size: var(--bt-body-2);
  line-height: 1.5;
  color: var(--bt-navy);
}
.bt-page .bt-plan-cards__tip-stem {
  position: absolute;
  top: 44px;   /* overlaps chip bottom by 14px, painted behind it */
  left: 50%;
  margin-left: -13px; /* stem line box is 26px wide (svg has 3px shadow bleed) */
  width: 29px;
  height: 91px;
}
.bt-page .bt-plan-cards__tip--center .bt-plan-cards__tip-stem,
.bt-page .bt-plan-cards__tip--right  .bt-plan-cards__tip-stem {
  top: 45px;
  height: 87px;
}

/* ---- cards ---- */
.bt-page .bt-plan-cards__card {
  overflow: hidden;
  border-radius: 20px;
  background: var(--bt-white);
  box-shadow: var(--bt-shadow-long);
}
.bt-page .bt-plan-cards__card-body {
  padding: 40px 36px 36px;
}
.bt-page .bt-plan-cards__card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bt-space-md);
}
.bt-page .bt-plan-cards__card-title {
  max-width: 240px; /* forces the two-line break of the comp */
  font-family: var(--bt-font-headline);
  font-weight: var(--bt-weight-headline); /* Season Mix Medium (Figma 580) */
  font-size: 32px;  /* section-local size per comp */
  line-height: 1.2;
  color: var(--bt-navy);
}
.bt-page .bt-plan-cards__badge {
  flex: none;
  padding: 3px var(--bt-space-sm); /* pills hug their text vertically — copy-edit round 2026-08-11 (was 8px all around) */
  border-radius: 60px;
  background: var(--bt-light-blue);
  font-size: var(--bt-body-3);
  line-height: 1.5;
  color: var(--bt-navy);
  white-space: nowrap;
}
.bt-page .bt-plan-cards__card-copy {
  margin-top: var(--bt-space-xl); /* 32px */
  font-size: var(--bt-body-2);
  line-height: 1.5;
  color: var(--bt-navy);
}
.bt-page .bt-plan-cards__ctas {
  display: flex;
  align-items: center;
  gap: var(--bt-space-lg); /* 24px */
  margin-top: 36px;
}

/* artwork panels — holder ships a static PNG; js/05-plan-cards.js swaps
   in the animated SVG fetched from assets/plan-cards/motion-*.svg (kept
   as files: HubSpot's rich-text sanitizer guts inline SVG defs). The
   aspect-ratio pins the box so the swap can't shift layout. */
.bt-page .bt-plan-cards__artwork {
  display: block;
  width: 100%;
  aspect-ratio: 437 / 398;
}
.bt-page .bt-plan-cards__artwork img,
.bt-page .bt-plan-cards__artwork svg {
  display: block;
  width: 100%;
  height: auto;
}
/* the SVGs' <text> names the licensed fonts; route through the token
   stacks so the placeholder fonts render until the host loads them */
.bt-page .bt-plan-cards__artwork text {
  font-family: var(--bt-font-text);
}
.bt-page .bt-plan-cards__artwork text[font-family='Season Mix'] {
  font-family: var(--bt-font-headline);
  font-weight: var(--bt-weight-headline);
}

/* ---- disclaimer ---- */
.bt-page .bt-plan-cards__disclaimer {
  position: relative;
  z-index: 1;
  margin-top: 15px;
  padding: var(--bt-space-xl) var(--bt-space-2xl); /* 32px 40px */
}
.bt-page .bt-plan-cards__disclaimer p {
  max-width: 1200px;
  margin-inline: auto;
  font-size: var(--bt-disclosure);
  line-height: 1.35;
  color: var(--bt-text-muted);
  text-align: center;
}
.bt-page .bt-plan-cards__disclaimer p + p {
  margin-top: var(--bt-space-sm); /* 8px between disclosure paragraphs */
}

/* ---- responsive ---- */
@media (max-width: 1024px) {
  .bt-page .bt-plan-cards__title { font-size: clamp(34px, 5vw, 44px); }
  .bt-page .bt-plan-cards__row {
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--bt-space-3xl); /* title-to-cards gap without tips */
  }
  /* the floating tooltip chips only exist in the single-row desktop
     layout — once the cards wrap/stack, they're gone */
  .bt-page .bt-plan-cards__tip { display: none; }
  .bt-page .bt-plan-cards__item,
.bt-page .bt-plan-cards__item--side {
    margin-top: 0; /* was reserving room for the tips; row gap spaces the stack */
  }
}
@media (max-width: 768px) {
  /* 48 here + 48 product-links padding-bottom = 96px total between the legal
     disclosure above and this headline (mobile round 2026-08-11) */
  .bt-page .bt-plan-cards__header { padding-top: var(--bt-space-3xl); }
  .bt-page .bt-plan-cards__row { width: min(437px, 100% - 48px); }
  .bt-page .bt-plan-cards__item { flex-basis: 100%; }
  /* mobile stack leads with the raised middle card */
  .bt-page .bt-plan-cards__item:not(.bt-plan-cards__item--side) { order: -1; }
}

/* ===== 06-retirement.css ===== */
/* ==========================================================================
   06-retirement.css — "Text & Media 5" (Figma 3308:18574, 1440x761)
   Full-bleed photo of a woman by a pool holding a phone; white text on the
   left over a warm multiply gradient scrim.
   ========================================================================== */

.bt-page .bt-retirement {
  position: relative;
  min-height: 761px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: var(--bt-space-4xl); /* Figma py-80 */
  background: #7a6a55; /* fallback while the photo loads (photo midtone) */
}

/* ---- background layers ---- */
.bt-page .bt-retirement__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Figma crop: w 104.73%, h 110.64%, offset -2.36% / -2.63%.
   At 1440x761 the box aspect equals the photo aspect, so object-fit: cover
   reproduces the comp exactly and only protects against distortion at
   other viewport sizes. */
.bt-page .bt-retirement__photo {
  position: absolute;
  width: 104.73%;
  height: 110.64%;
  max-width: none;
  left: -2.36%;
  top: -2.63%;
  object-fit: cover;
}
/* warm darkening scrim behind the copy (one-off values from the comp) */
.bt-page .bt-retirement__scrim {
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  background-image: linear-gradient(
    -90deg,
    rgba(238, 233, 224, 0) 39.306%,
    rgb(180, 168, 146) 63.611%
  );
}

/* ---- content ---- */
.bt-page .bt-retirement__inner {
  position: relative;
  width: 100%;
}
.bt-page .bt-retirement__content {
  max-width: 550px; /* 630px column minus its 80px right padding in the comp */
  display: flex;
  flex-direction: column;
  gap: var(--bt-space-2xl); /* 40px title -> body stack */
}
.bt-page .bt-retirement__title {
  color: var(--bt-text-overlay);
}
.bt-page .bt-retirement__stack {
  display: flex;
  flex-direction: column;
  gap: var(--bt-space-lg); /* 24px body -> CTA row */
}
.bt-page .bt-retirement__body {
  max-width: 522px;
  color: var(--bt-text-overlay);
}
.bt-page .bt-retirement__cta-row {
  display: flex;
  align-items: center;
  gap: var(--bt-space-lg); /* 24px between button and link */
  padding-top: var(--bt-space-base); /* 12px per comp */
}

/* "Image is illustrative." under the CTAs (compliance, 2026-08-15) —
   solid near-white like the PPP disclosure for legibility on the photo */
.bt-page .bt-retirement__disclosure {
  font-size: var(--bt-disclosure);
  line-height: 1.35;
  color: #f5f5f5;
}

/* ---- responsive degradation ---- */
@media (max-width: 1024px) {
  .bt-page .bt-retirement {
    min-height: 620px;
  }
}
/* ---- XS layout (Figma 3308:19058, 390x761 comp) ----
   content flows from the top; the photo is re-cropped so the phone fills
   the lower half; the desktop multiply gradient stays and a 20% black
   overlay is added for copy legibility. */
@media (max-width: 768px) {
  .bt-page .bt-retirement {
    min-height: 720px; /* mobile proto frame (Figma 365:2672) */
    align-items: flex-start;
    /* 48px above the headline (was the comp's 40) per mobile round
       2026-08-11; bottom keeps the comp's 40 */
    padding-block: var(--bt-space-3xl) var(--bt-space-2xl);
  }
  /* the mobile source is the designer's 390x720-composition export
     (2x, scrims baked in) — plain cover, no re-crop needed; !important
     defends against host rich-text img max-width/height rules */
  .bt-page .bt-retirement__photo {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    left: 0;
    top: 0;
  }
  /* contrast treatment is baked into the mobile export — the desktop
     multiply scrim would double-darken it */
  .bt-page .bt-retirement__scrim {
    display: none;
  }
  .bt-page .bt-retirement__body {
    font-size: 16px; /* proto body reads at 16 (Body Row 350x77) */
  }
  /* the proto composes on the comp's 20px mobile gutters (350px column);
     the host .bt-container keeps 2.88rem (283px column) — override for
     this section only, (0,2,0) outranks the host's bare .bt-container */
  .bt-page .bt-retirement__inner {
    padding-inline: var(--bt-site-gutter);
  }
  .bt-page .bt-retirement__cta-row {
    flex-wrap: wrap;
  }
}

/* ===== 07-cash.css ===== */
/* ==========================================================================
   07-cash.css — "Your cash should work harder." (Figma 3308:18575, 1440x746)
   Cream section: 602x602 media raster left, navy copy + bullets + CTAs right.
   All selectors scoped under .bt-cash
   ========================================================================== */

.bt-page .bt-cash {
  background: var(--bt-cream);
  /* Figma: pt 80 / pb 64 -> 80 + 602 media + 64 = 746 section height */
  padding-top: var(--bt-space-4xl);
  padding-bottom: 64px; /* one-off per comp (no token) */
}

.bt-page .bt-cash__inner {
  display: flex;
  align-items: center;
  gap: var(--bt-space-3xl); /* 48px column gap per comp */
}

/* ---- media (Figma 3308:18576, 602x602) ----
   Single raster export: rounded panel corners and the bills that overflow it
   are baked into the PNG alpha — no CSS radius/clip needed. */
.bt-page .bt-cash__media {
  flex: 0 0 602px;
  max-width: 602px;
}

/* ---- text column ----
   Comp: 630px col with 80px left pad (128px total gutter after the 48px gap).
   Originally compressed to 32px to protect the 413px body measure; restored
   to the comp's 80px per copy-edit round 2026-08-11 (body measure narrows). */
.bt-page .bt-cash__content {
  flex: 1;
  min-width: 0;
  max-width: 630px; /* 550px content + the 80px pad — matches the retirement
                       section's content column (copy round 2026-08-12) */
  padding-left: var(--bt-space-4xl); /* 80px, see note above */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bt-space-2xl); /* 40px title -> body block */
  color: var(--bt-navy); /* section copy is navy, not default ink */
}

/* Figma trims text boxes to cap height/baseline; progressive enhancement */
.bt-page .bt-cash__title,
.bt-page .bt-cash__body {
  text-box: trim-both cap alphabetic;
}

.bt-page .bt-cash__stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bt-space-xl); /* 32px body -> bullets */
}

.bt-page .bt-cash__body {
  max-width: 550px; /* was the comp's 413px; widened to the retirement
                       section's measure (copy round 2026-08-12) */
}

/* bullet list: rows of icon 16 + 8px gap, 20px between rows (36px pitch) */
.bt-page .bt-cash__bullets {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Figma gap-base */
}

.bt-page .bt-cash__bullet {
  display: flex;
  /* checkmark rides the FIRST line of copy, so wrapped bullets keep the
     check top-aligned (2026-08-17; supersedes the 08-11 middle-align) */
  align-items: flex-start;
  gap: var(--bt-space-sm); /* 8px */
  /* all four bullets share one size — reviewers flagged the comp's smaller
     FDIC row as inconsistent; settled at 16px across the board 2026-08-12 */
  font-size: var(--bt-body-2); /* 16px */
  line-height: 1; /* row height matches the trimmed comp */
}

.bt-page .bt-cash__bullet img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* CTA row: stack gap 24 + row padding-top 12 = 36px above buttons
   (stack gap is 32, so add the 4px difference here) */
.bt-page .bt-cash__cta-row {
  display: flex;
  align-items: center;
  gap: var(--bt-space-lg); /* 24px between button and link */
  margin-top: 4px;
}

/* ---- responsive degradation ---- */
/* the 80px comp pad + fixed 602px media starves the text column (~203px at
   1025px) once the container narrows — fall back to the old 32px compromise
   until the ≤1024 stack takes over (review finding 2026-08-11) */
@media (max-width: 1200px) {
  .bt-page .bt-cash__content {
    padding-left: var(--bt-space-xl); /* 32px */
  }
  .bt-page .bt-cash__bullet {
    line-height: 1.35; /* bullets wrap below ~1200px; base line-height 1 left
                          zero leading between wrapped lines */
  }
  .bt-page .bt-cash__bullet img {
    /* optically center the 16px check on the taller 21.6px first line */
    margin-top: 3px;
  }
}
@media (max-width: 1024px) {
  .bt-page .bt-cash {
    padding-block: var(--bt-space-3xl);
  }
  .bt-page .bt-cash__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--bt-space-2xl);
  }
  .bt-page .bt-cash__media {
    flex: none;
    width: min(602px, 100%);
  }
  .bt-page .bt-cash__content {
    padding-left: 0;
  }
}

@media (max-width: 768px) {
  /* bullet checkmarks stay middle-aligned against wrapped copy via the base
     align-items: center (mobile round 2026-08-11 removed a flex-start
     override here); wrapped-line leading comes from the ≤1200 rule above */
  .bt-page .bt-cash__cta-row {
    flex-wrap: wrap;
  }
}

/* ===== 08-protection.css ===== */
/* ==========================================================================
   08-protection.css — "Text & Media 4" (Figma 3308:18588, 1440x666)
   Cream section: navy serif headline + WSJ Buy Side award unit on the left,
   rounded canoe photo with frosted stat card anchored to the right edge.
   Every selector scoped under .bt-protection.
   ========================================================================== */

.bt-page .bt-protection {
  position: relative;
  height: 666px;
  background: var(--bt-cream);
}

.bt-page .bt-protection__inner {
  position: relative; /* positioning context for the absolute media */
  height: 100%;
  display: flex;
  align-items: center;
  padding-bottom: 64px; /* photo is 602 tall inside the 666 section */
}

/* ---- left column ---- */
.bt-page .bt-protection__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bt-space-3xl); /* 48 between title and award unit */
  width: 630px;
  max-width: 100%;
  padding-right: var(--bt-space-4xl); /* 80 -> 550px text column */
  flex-shrink: 0;
}

/* ---- award unit (lockup image / disclosure) ---- */
.bt-page .bt-protection__award {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8.76px; /* Figma: gap below the lockup, unchanged from the 3-part unit */
}

/* one 2x export (548x233) of laurels + title + WSJ logo — display at the
   comp's 273.87px unit width (2026-08-12, replaces the pixelated 1x logo) */
.bt-page .bt-protection__award-lockup {
  width: 273.87px;
  height: auto;
}

.bt-page .bt-protection__disclosure {
  font-size: 13.146px; /* scaled disclosure size from the comp */
  line-height: 1.35;
  text-align: center;
  color: var(--bt-navy);
  opacity: 0.8;
  white-space: nowrap;
}

.bt-page .bt-protection__see-more {
  text-decoration: underline;
  text-underline-position: from-font;
}

/* ---- media: rounded photo anchored to the container's right edge ---- */
.bt-page .bt-protection__media {
  position: absolute;
  top: 0; /* comp: photo flush to section top, 64px cream below */
  right: var(--bt-site-gutter); /* photo right edge on the content edge */
  width: 602px;
  height: 602px;
}

.bt-page .bt-protection__photo {
  position: absolute;
  inset: 0;
  border-radius: 20px; /* Figma literal on the media frame */
  overflow: hidden;
}

/* Figma crop: 1205.59x803.958 image placed at (-214.01, -131.96)
   inside the 602x602 box — expressed as % so the crop scales. */
.bt-page .bt-protection__photo-img {
  position: absolute;
  max-width: none;
  width: 200.264%;
  height: 133.548%;
  left: -35.549%;
  top: -21.921%;
  object-fit: cover;
}

/* ---- frosted stat card overlapping the photo's left edge ---- */
.bt-page .bt-protection__stat {
  position: absolute;
  top: 57px;
  left: -113px; /* card starts 113px onto the cream, left of the photo */
  width: 273px;
  padding: 27px 23px;
  border-radius: 10.647px; /* Figma literal */
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(8px); /* frosted glass */
  backdrop-filter: blur(8px);
  box-shadow: inset 3px 3px 1.863px 0 rgba(255, 255, 255, 0.15);
  color: var(--bt-navy);
}

.bt-page .bt-protection__stat-figure {
  display: flex;
  align-items: baseline;
  white-space: nowrap;
  line-height: 1;
}

.bt-page .bt-protection__stat-number {
  font-family: var(--bt-font-headline);
  font-weight: var(--bt-weight-headline); /* Season Mix Medium (Figma 580) */
  font-size: 124.952px;
  line-height: 1;
  text-box: trim-both cap alphabetic; /* match Figma cap trim where supported */
}

.bt-page .bt-protection__stat-unit {
  font-family: var(--bt-font-text);
  font-weight: 500; /* GT America Medium */
  font-size: 57.848px;
  line-height: 1;
  text-box: trim-both cap alphabetic;
}

.bt-page .bt-protection__stat-copy {
  margin-top: 22.75px; /* Figma gap */
  font-family: var(--bt-font-text);
  font-weight: 500; /* GT America Medium */
  font-size: 16px;
  line-height: 1.2;
  width: max-content; /* keep the designed two-line break */
  text-box: trim-both cap alphabetic;
}

/* ---- graceful stacking ---- */
@media (max-width: 1024px) {
  .bt-page .bt-protection {
    height: auto;
  }
  .bt-page .bt-protection__inner {
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--bt-space-3xl);
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .bt-page .bt-protection__copy {
    width: 100%;
    max-width: 630px;
    padding-right: 0;
  }
  .bt-page .bt-protection__media {
    position: relative;
    top: auto;
    right: auto;
    width: min(602px, 100%);
    height: auto;
    aspect-ratio: 1 / 1;
    margin-inline: auto;
  }
  .bt-page .bt-protection__stat {
    left: -40px; /* keep a smaller overlap so the card stays on-screen */
    top: 40px;
  }
}

@media (max-width: 768px) {
  /* 48px of cream below the photo/stat block (was 64 from the ≤1024 rule) —
     mobile round 2026-08-11 */
  .bt-page .bt-protection__inner {
    padding-bottom: var(--bt-space-3xl);
  }
  /* award lockup centers in the column on mobile (2026-08-12) */
  .bt-page .bt-protection__award {
    align-self: center;
  }
  /* mobile proto (Figma 366:2701): the stat card is the desktop card at
     ~0.652 scale, pinned to the photo's BOTTOM-left, text left-aligned —
     scaling the whole card keeps every internal size/padding/radius in the
     designed ratio without per-part overrides (2026-08-13) */
  .bt-page .bt-protection__stat {
    left: 20px;
    top: auto;
    bottom: 32px;
    transform: scale(0.652);
    transform-origin: left bottom;
  }
}

/* ===== 09-features.css ===== */
/* ==========================================================================
   09-features.css — "Features Grid 4" (Figma node 3308:18640, 1440x412)
   Cream band, four equal feature columns: gold circular icon,
   navy subhead, navy body copy. Scoped to .bt-features.
   ========================================================================== */

.bt-page .bt-features {
  background: var(--bt-cream);
  padding-top: var(--bt-space-2xl);    /* 40px per comp */
  padding-bottom: var(--bt-space-4xl); /* 80px per comp */
}

.bt-page .bt-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* three even cols while the
     expense-ratio item is pulled (2026-08-15); comp is repeat(4, 1fr) */
  column-gap: var(--bt-grid-gap);
  row-gap: var(--bt-space-4xl);
  align-items: start;
}

.bt-page .bt-features__item {
  padding-top: var(--bt-space-md) !important;    /* 16px per comp; survives list hard-reset */
  padding-bottom: var(--bt-space-lg) !important; /* 24px per comp */
}

.bt-page .bt-features__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: var(--bt-gold);
  border-radius: var(--bt-radius-round);
}

.bt-page .bt-features__icon img {
  width: 29.333px; /* designed glyph box inside the 44px circle */
  height: 29.333px;
}

.bt-page .bt-features__title {
  margin-top: 28px; /* 16px stack gap + 12px text-block padding in comp */
  font-family: var(--bt-font-text);
  font-weight: 500;
  font-size: var(--bt-subhead-3); /* 20px */
  line-height: 1.35;
  color: var(--bt-navy);
}

.bt-page .bt-features__body {
  margin-top: var(--bt-space-xl); /* 32px per comp */
  font-size: var(--bt-body-2);    /* 16px */
  line-height: 1.5;
  color: var(--bt-navy);
}

/* ---- graceful stacking ---- */
@media (max-width: 1024px) {
  .bt-page .bt-features__grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--bt-space-3xl);
  }
  /* let the "SIPC…" heading wrap naturally once columns narrow */
  .bt-page .bt-features__title br { display: none; }
}

@media (max-width: 768px) {
  .bt-page .bt-features__grid {
    grid-template-columns: 1fr;
    row-gap: var(--bt-space-xl);
  }
  .bt-page .bt-features__item {
    padding-top: var(--bt-space-sm) !important;
    padding-bottom: var(--bt-space-md) !important;
  }
  /* tighten the title's breathing room (icon→title was 28, title→body 32) —
     mobile round 2026-08-11 asked for reduced spacing */
  .bt-page .bt-features__title { margin-top: var(--bt-space-lg); }  /* 24px */
  .bt-page .bt-features__body { margin-top: var(--bt-space-lg); }   /* 24px */
}

/* ===== 10-stats.css ===== */
/* ==========================================================================
   10-stats.css — navy stats ticker (Figma node 3308:18674, 1440x384)
   Marquee of 413x183 light cards overflowing both viewport edges,
   plus a centered 12px disclosure line below.
   ========================================================================== */

.bt-page .bt-stats {
  background: var(--bt-navy);
  padding-block: var(--bt-space-4xl); /* 80px top/bottom -> 384px total */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bt-space-xl); /* 32px between card row and disclosure */
  overflow: hidden;
}

/* ---- marquee ---- */
.bt-page .bt-stats__marquee {
  display: flex;
  width: 100%;
  overflow: hidden;
}
.bt-page .bt-stats__track {
  display: flex;
  align-items: center;
  gap: 28px;              /* card gap per comp */
  padding-inline-end: 28px !important; /* seam gap; survives the base list hard-reset */
  flex-shrink: 0;
  animation: bt-stats-scroll 40s linear infinite;
}
@keyframes bt-stats-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
.bt-page .bt-stats__marquee:hover .bt-stats__track,
.bt-page .bt-stats__marquee:focus-within .bt-stats__track {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .bt-page .bt-stats__track { animation: none; }
  .bt-page .bt-stats__track[aria-hidden="true"] { display: none; }
  .bt-page .bt-stats__marquee { justify-content: center; }
}

/* ---- cards ---- */
.bt-page .bt-stats__card {
  width: 413px;
  height: 183px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px; /* visual gap; Figma uses 24px between cap-trimmed text boxes */
  background: var(--bt-grey-10);
  border-radius: 20px; /* comp-specific radius (between tokens lg and round) */
  box-shadow: var(--bt-shadow-long);
  text-align: center;
}
.bt-page .bt-stats__stat {
  font-family: var(--bt-font-headline);
  font-weight: var(--bt-weight-headline); /* Season Mix Medium (Figma 580) */
  font-size: var(--bt-headline-1); /* 68px */
  line-height: 1;
  color: var(--bt-navy);
  white-space: nowrap;
}
.bt-page .bt-stats__caption {
  font-family: var(--bt-font-text);
  font-weight: 400; /* GT America Regular in comp */
  font-size: var(--bt-subhead-3); /* 20px */
  line-height: 1.35;
  color: var(--bt-text-muted);
  white-space: nowrap;
}

/* ---- rating card (laurels / stars / store marks) ---- */
.bt-page .bt-stats__card--rating {
  display: block;
  position: relative;
}
.bt-page .bt-stats__rating {
  /* 282x124 content box centered in the 413x183 card (Figma geometry) */
  position: absolute;
  top: 27.5px;
  left: 50%;
  transform: translateX(calc(-50% - 0.5px));
  width: 282px;
  height: 124px;
}
.bt-page .bt-stats__laurel {
  position: absolute;
  top: -0.5px;
  width: 33.67px;
  height: 72.71px;
}
.bt-page .bt-stats__laurel--left {
  left: 0;
  transform: scaleX(-1); /* mirrored in comp */
}
.bt-page .bt-stats__laurel--right { right: 0; }
.bt-page .bt-stats__rating-center {
  position: absolute;
  top: 6.35px;
  left: calc(50% + 0.7px);
  transform: translateX(-50%);
  width: 185.27px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.4px;
}
.bt-page .bt-stats__stars {
  font-family: var(--bt-font-text);
  font-size: 25.85px;        /* comp-specific star row metrics */
  line-height: 1.27;
  letter-spacing: 10.86px;
  margin-right: -10.86px;    /* cancel trailing letter-space for centering */
  color: var(--bt-navy);
  white-space: nowrap;
}
.bt-page .bt-stats__rating-text {
  font-family: var(--bt-font-text);
  font-weight: 400;
  font-size: 14.5px;         /* comp-specific */
  line-height: 1.5;
  color: var(--bt-navy);
  white-space: nowrap;
}
.bt-page .bt-stats__marks {
  position: absolute;
  top: 79.5px;
  left: 50%;
  transform: translateX(calc(-50% + 6.3px));
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.bt-page .bt-stats__mark-apple { width: 38px; height: 41px; }
.bt-page .bt-stats__mark-play { width: 34px; height: 38px; margin-top: 5px; }

/* ---- disclosure ---- */
.bt-page .bt-stats__disclosure {
  font-family: var(--bt-font-text);
  font-weight: 400;
  font-size: var(--bt-disclosure); /* 12px */
  line-height: 1.35;
  color: rgba(245, 245, 245, 0.7); /* comp: grey-10 at 70% on navy */
  max-width: 902px;
  padding-inline: var(--bt-space-lg);
  text-align: center;
}
.bt-page .bt-stats__see-more {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bt-page .bt-stats__see-more:hover { color: var(--bt-white); }

/* ---- graceful degradation ---- */
@media (max-width: 1024px) {
  .bt-page .bt-stats { padding-block: 64px; }
}
@media (max-width: 768px) {
  .bt-page .bt-stats { padding-block: 48px; gap: var(--bt-space-lg); }
  .bt-page .bt-stats__card {
    width: 320px;
    height: 150px;
  }
  .bt-page .bt-stats__stat { font-size: 48px; }
  .bt-page .bt-stats__caption { font-size: 16px; white-space: normal; padding-inline: 16px; }
  .bt-page .bt-stats__rating { transform: translateX(calc(-50% - 0.5px)) scale(0.82); transform-origin: top center; top: 20px; }
}

/* ===== 11-faq.css ===== */
/* ==========================================================================
   11-faq.css — FAQ accordion (Figma 3308:18737). Originally a navy panel;
   flipped to cream with navy text 2026-08-14 so it flows into the cream
   desktop CTA below.
   ========================================================================== */

.bt-page .bt-faq {
  background: var(--bt-cream);
}

.bt-page .bt-faq__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: var(--bt-grid-gap);
  padding-block: var(--bt-space-4xl); /* 80px top/bottom per comp */
}

/* ---- left column ---- */
.bt-page .bt-faq__intro {
  flex: 1 0 0;
  min-width: 1px;
  max-width: 630px;
  padding-bottom: var(--bt-space-3xl); /* 48px per comp stack */
}

.bt-page .bt-faq__title {
  font-family: var(--bt-font-headline);
  font-weight: var(--bt-weight-headline); /* Season Mix Medium (Figma 580) */
  font-size: var(--bt-headline-2); /* was comp Headline 3 (36px); shared H2 size per stakeholder feedback 2026-08-13 */
  line-height: 1.1;
  color: var(--bt-navy);
  max-width: 413px; /* comp title box — at 44px it yields the clean
                       "Common questions. / Real answers." break */
}

/* ---- right column: accordion ---- */
.bt-page .bt-faq__list {
  flex: 1 0 0;
  min-width: 1px;
  max-width: 630px;
  display: flex;
  flex-direction: column;
  gap: var(--bt-space-xl); /* 32px between items */
}

.bt-page .bt-faq__item {
  width: 100%;
  padding-bottom: var(--bt-space-xl); /* 32px above hairline */
  border-bottom: 1px solid var(--bt-border-muted); /* muted hairline on cream */
}

.bt-page .bt-faq__heading {
  font: inherit;
}

.bt-page .bt-faq__trigger {
  display: flex;
  align-items: center;
  gap: var(--bt-space-lg); /* 24px title/icon gap */
  width: 100%;
  text-align: left;
}

.bt-page .bt-faq__question {
  flex: 1 0 0;
  min-width: 1px;
  font-family: var(--bt-font-text);
  font-weight: 500;
  font-size: var(--bt-subhead-3); /* 20px */
  line-height: 1.35;
  color: var(--bt-navy);
}

.bt-page .bt-faq__chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.bt-page .bt-faq__item--open .bt-faq__chevron {
  transform: rotate(180deg); /* down chevron becomes up when open */
}

/* ---- collapsible panel (CSS-only default state, JS toggles the --open modifier) ---- */
.bt-page .bt-faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.3s ease, visibility 0.3s;
}

.bt-page .bt-faq__item--open .bt-faq__panel {
  grid-template-rows: 1fr;
  visibility: visible;
}

.bt-page .bt-faq__panel-inner {
  overflow: hidden;
  min-height: 0;
}

.bt-page .bt-faq__body {
  max-width: 522px; /* comp body box */
  font-size: var(--bt-body-3); /* 14px */
  line-height: 1.5;
  color: var(--bt-navy);
}
.bt-page .bt-faq__panel-inner > .bt-faq__body:first-child {
  padding-top: var(--bt-space-lg); /* 24px gap under the title row */
}
.bt-page .bt-faq__body + .bt-faq__body {
  margin-top: var(--bt-space-base); /* 12px between answer paragraphs */
}
.bt-page .bt-faq__body a {
  color: inherit; /* navy, matching the section copy */
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- responsive ---- */
@media (max-width: 1024px) {
  .bt-page .bt-faq__title { font-size: clamp(34px, 5vw, 44px); }
}

@media (max-width: 768px) {
  .bt-page .bt-faq__inner {
    flex-direction: column;
    gap: var(--bt-space-2xl);
    padding-block: var(--bt-space-3xl);
  }
  .bt-page .bt-faq__intro,
.bt-page .bt-faq__list {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
  }
  .bt-page .bt-faq__intro { padding-bottom: 0; }
}

/* ===== 12-cta.css ===== */
/* ==========================================================================
   12-cta.css — "Ready to start building wealth?" illustrated CTA
   Figma node 3308:18738 (Section, 1440x797)
   Artwork 3308:18739 + bottom fade "gdr" (noise layer removed per request)
   (3308:17654 inside the artwork, 3308:18740 at section level) blending
   into the navy footer. Bottom boundary color: var(--bt-navy) #000b50.
   ========================================================================== */

.bt-page .bt-cta {
  position: relative;
  height: 797px;
  overflow: hidden;
  /* desktop comp (387:3212) opens on cream; the bottom fade still guards
     the navy footer seam while the artwork loads */
  background: var(--bt-cream);
}

/* ---- background stack (artwork -> grain -> fade) ---- */
.bt-page .bt-cta__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bt-page .bt-cta__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* bottom-anchored: when cover crops at non-comp aspects, the hills/truck
     stay in frame and only the cream sky gives way (desktop comp 387:3212) */
  object-position: 50% 100%;
}

/* Two stacked "gdr" rectangles, both 1440x137 at the bottom.
   Figma end color #010a4f; token navy #000b50 used so the seam
   with the navy footer below is invisible. */
.bt-page .bt-cta__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 137px;
  background:
    linear-gradient(to bottom, rgba(0, 11, 80, 0) 25.182%, var(--bt-navy) 99.963%),
    linear-gradient(to bottom, rgba(0, 11, 80, 0) 16.423%, var(--bt-navy) 99.963%);
}

/* ---- content ---- */
.bt-page .bt-cta__content {
  position: relative; /* sits above the background stack */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bt-space-xl); /* 32px stack gap */
  padding-top: var(--bt-space-5xl); /* 120px */
}

.bt-page .bt-cta__title {
  /* was Display/Headline 1 (68px); uses the shared H2 size (44px) per
     stakeholder feedback 2026-08-13 */
  font-family: var(--bt-font-headline);
  font-weight: var(--bt-weight-headline); /* Season Mix Medium (Figma 580) */
  font-size: var(--bt-headline-2);
  line-height: 1.1;
  color: var(--bt-navy); /* navy on cream per desktop comp; mobile re-overlays white */
  text-align: center;
  max-width: 970px;
  /* Figma cap-height trim so the cap top sits exactly 120px down */
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* button row has 12px extra top padding in the comp (44px total gap) */
.bt-page .bt-cta__btn {
  margin-top: var(--bt-space-base);
}

/* ---- graceful degradation ---- */
@media (max-width: 1024px) {
  .bt-page .bt-cta { height: 640px; }
  .bt-page .bt-cta__content { padding-top: var(--bt-space-4xl); }
  .bt-page .bt-cta__title { font-size: clamp(34px, 5vw, 44px); }
}

@media (max-width: 768px) {
  /* the mobile export is the full 390x500 comp frame (sunset treatment,
     same art direction as desktop) — base cream bg, navy title, blue
     button and cover-crop art all apply as-is; only the frame is shorter */
  .bt-page .bt-cta { height: 500px; }
  .bt-page .bt-cta__content { padding-top: var(--bt-space-3xl); }
}

/* ===== 99-assembly.css ===== */

/* ===== Local interactions and registration dialog ===== */
html { scroll-behavior: smooth; }

.bt-registration-modal[hidden] { display: none; }
.bt-registration-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 20px;
}
.bt-registration-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 11, 80, 0.72);
  backdrop-filter: blur(3px);
}
.bt-registration-modal__dialog {
  position: relative;
  width: min(100%, 520px);
  max-height: calc(100vh - 40px);
  overflow: auto;
  border-radius: 12px;
  background: #fff;
  color: #000b50;
  padding: clamp(28px, 5vw, 48px);
  box-shadow: 0 24px 80px rgba(0, 11, 80, 0.28);
}
.bt-registration-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #000b50;
  cursor: pointer;
  font-size: 30px;
  line-height: 1;
}
.bt-registration-modal__title {
  margin: 0 40px 12px 0;
  font-family: "Season Mix", Georgia, serif;
  font-size: clamp(30px, 5vw, 42px);
  line-height: 1.05;
}
.bt-registration-modal__copy { margin: 0 0 24px; line-height: 1.5; }
.bt-registration-modal__field { display: block; margin-top: 16px; font-weight: 500; }
.bt-registration-modal__field input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin-top: 7px;
  border: 1px solid #a8a8a8;
  border-radius: 4px;
  padding: 13px 14px;
  font: inherit;
  color: #000b50;
}
.bt-registration-modal__submit {
  width: 100%;
  margin-top: 24px;
  border: 0;
  border-radius: 4px;
  padding: 14px 20px;
  background: #1d6ae5;
  color: #fff;
  cursor: pointer;
  font: 500 16px/1.35 "GT America", Arial, sans-serif;
}
.bt-registration-modal__success { text-align: center; padding: 30px 0 18px; }
.bt-registration-modal__success p { font-size: 18px; line-height: 1.5; }
body.bt-modal-open { overflow: hidden; }

/* ========================================================================== 
   99-assembly.css — cross-section rules owned by the assembler
   (individual sections must not know about each other)

   Currently empty: the embed ships without site chrome. The host page
   provides the global nav (above) and footer (below); the hero is the
   first section and the CTA — which ends on flat navy #000b50 — is the
   last. The original header/utility-bar/footer sections live in
   _removed/ and can be restored by moving them back and rebuilding.
   ========================================================================== */