/* ===== 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('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,500;8..60,600&family=Inter:wght@400;500;600;700&display=swap');

.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;
  }

  .bt-page .bt-hero .bt-hero__artwork {
    max-width: 55vw;
  }

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

/* ---- 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. */
    padding: 100px 0 492px !important;
  }

  /* slides 2/3 match the XS comps (3308:18412 / 3308:18431): the 468 artwork
     square stays glued to the slide bottom (y 447..915 at the 390 comp) and
     horizontally centered via the shared square rule below; only the art
     inside is scaled +10% (2026-08-12 request; comp scale is 0.50375). With
     slide 3's mobile disclosure gone, every slide holds the comp's fixed
     915px height, so the square no longer drifts away from the content the
     way it did when the track was taller. */
  .bt-page .bt-hero__slide:nth-child(n+2) .bt-hero__artwork {
    --bt-hero-art-scale: 0.554125; /* 0.50375 * 1.1 */
  }
  .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 scale by exactly 0.50375 in the XS comps */
  .bt-page .bt-hero__artwork-canvas {
    --bt-hero-art-scale: 0.50375;
  }

  /* 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;
  }

  /* content: 350px column, stack gaps tighten 40->32 and 32->16 */
  .bt-page .bt-hero__content {
    gap: var(--bt-space-xl); /* 32px */
    max-width: 350px;
    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 ===== */
/* ==========================================================================
   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.
   ========================================================================== */