/* ============================================================
   The marketing site (#887, the only one since #977): the client
   page (/) and the firm page (/for-advisers).

   This sheet holds what both pages share and the firm page, built
   from the canvas board "Firm page · logo-geometry tiles · light".
   The client page is the board "Direct · one page, the real
   screens", in the app's dark theme; its own rules are in
   client.css. Motion on the firm page is entrances only and plays
   once; with reduced motion every section is a finished still.

   The app screens drawn on these pages are pictures of the
   product, so they carry the app's own palette, held as page
   tokens because the marketing pages do not load the app's
   semantic sheet.
   ============================================================ */

:root {
  /* ── Page type: poster steps the app's ladder stops short of ── */
  --nv-t-hero:    clamp(38px, 5vw, 60px);     /* the h1 */
  --nv-t-hero-f:  clamp(38px, 5vw, 62px);     /* the firm page's h1 */
  --nv-t-h2:      clamp(30px, 3.6vw, 44px);   /* section heads */
  --nv-t-close:   clamp(22px, 2.4vw, 30px);   /* the closing line */
  --nv-t-punch:   clamp(24px, 2.6vw, 32px);   /* "Your first meeting starts…" */
  --nv-t-lede:    19px;
  --nv-t-lede-2:  17px;
  --nv-t-body:    var(--t-h2);
  --nv-t-nav:     var(--t-h3);
  --nv-t-h3:      var(--t-title-lg);
  --nv-t-brand:   17px;
  --nv-t-figure:  38px;   /* Home's net worth, cut down */
  --nv-t-stat:    34px;   /* the Pension tool's answer */
  --nv-t-home-nw: 50px;   /* her Home's net worth, at the laptop's scale */

  /* ── Page tracking beyond the app's ladders ── */
  --nv-tk-poster: -0.025em;
  --nv-tk-h3:     -0.015em;
  --nv-tk-mono:   0.07em;
  --nv-tk-eyebrow: 0.09em;

  /* ── Layout ── */
  --nv-gutter:    clamp(16px, 4.5vw, 64px);
  --nv-col:       1312px;
  --nv-measure:   720px;   /* a column of prose: About us and FAQ */
  --nv-pad-hero:  clamp(48px, 7vw, 96px);
  --nv-section:   64px;
  --nv-section-l: 72px;
  --nv-section-x: 96px;
  --nv-gap-l:     48px;
  --nv-gap-xl:    64px;
  --nv-gap-xxl:   72px;
  --nv-r-frame:   12px;   /* the app screens' outer frame */
  --nv-tap:       48px;   /* the primary buttons */

  /* ── Colour: page values with no app equivalent ── */
  --nv-shadow-frame: 0 30px 60px -30px rgba(12, 26, 43, 0.35);

  /* ── The app's light palette, for the screens drawn on the page ── */

  /* ── Sarah's Home on the firm page: the app's light theme as it renders today ── */
  --nv-home-ground:   var(--grey-150);
  --nv-home-surface:  var(--grey-0);
  --nv-home-surface2: var(--grey-100);
  --nv-home-border:   var(--grey-200);
  --nv-home-t1:       #1b2530;   /* light --text-1 */
  --nv-home-t2:       #495461;   /* light --text-2 */
  --nv-home-t3:       #5f6977;   /* light --text-3 */
  --nv-home-brand:    #15803d;   /* light --brand */
  --nv-home-cash:     #0369a1;   /* light --asset-cash (--data-ink-4) */
  --nv-home-inv:      #a21caf;   /* light --asset-investments (--data-ink-1) */
  --nv-home-pens:     #1d4ed8;   /* light --asset-pensions (--data-ink-3) */
  --nv-home-prop:     #6d28d9;   /* light --asset-property (--data-ink-5) */
  --nv-home-debt:     var(--grey-600);
  --nv-home-gold:     #9a6b00;
  --nv-home-rail:     color-mix(in oklab, var(--nv-home-t1) 6%, transparent);   /* light --rail-active-wash */
  --nv-ring: 0 0 0 2px var(--mint), 0 0 28px rgba(var(--mint-rgb), 0.35);

  /* ── The household report: a printed page ── */
  --nv-rp-paper: #ffffff;
  --nv-rp-ink:   var(--ink-fixed);
  --nv-rp-ink2:  #44525e;
  --nv-rp-ink3:  var(--grey-600);
  --nv-rp-note:  #5b6772;
  --nv-rp-rule:  #dce4eb;
  --nv-rp-rule2: #edf1f6;
  --nv-rp-bar:   #2f4f6e;
  --nv-rp-warn:  #9a5b1e;
  --nv-rp-shadow: 0 1px 0 rgba(12, 26, 43, 0.06), 0 24px 48px -24px rgba(12, 26, 43, 0.55);
  --nv-rp-t:     var(--t-meta);
  --nv-rp-t-head: 9.5px;
  --nv-rp-t-title: 19px;
  --nv-rp-t-fig:  var(--t-tile-figure);
  --nv-rp-t-note: var(--t-dense-5);
  --nv-rp-t-fine: var(--t-dense-4);

  /* ── The laptop her Home sits on ── */
  --nv-lt-bezel:  #0b0f14;
  --nv-lt-edge:   #4a5563;
  --nv-lt-cam:    #2a323d;
  --nv-lt-base-a: #d5dce4;
  --nv-lt-base-b: #8d98a5;
  --nv-lt-notch:  #7c8794;
  --nv-lt-shadow: 0 50px 90px -40px rgba(var(--black-rgb), 0.7);
  --nv-lt-shadow-base: 0 18px 30px -12px rgba(var(--black-rgb), 0.55);
  --nv-r-lid:     16px;
  --nv-r-base:    14px;
  --nv-z-page3:   2;      /* the report pages fan behind one another, page 1 in front */
  --nv-z-page2:   3;
  --nv-z-page1:   4;
  --nv-z-laptop:  5;      /* the laptop sits over the tucked pages */
  --nv-z-screen:  6;

  /* ── The header mosaic (the hero reference, light): read by site.js for the wave ── */
  --nv-hm-grey:  #cdd6df;
  --nv-hm-crest: #7fc4b2;
  --nv-hm-mint:  #3ed598;
  --nv-hm-glow:  #1fa874;
  --nv-hm-green: #36c48c;

  /* ── Motion ── */
  --nv-dur-enter: 420ms;
  --nv-dur-fan:   900ms;
  --nv-dur-chat:  260ms;
  --nv-stagger-b: 450ms;  /* between the three beats, and the hero's copy and picture */
  --nv-delay-cap: 1100ms; /* the firm page's caption, once the pages have fanned out */
  --nv-stagger-p: var(--dur-5);  /* between the report pages */
}

/* ---------- Base ---------- */
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--grey-50);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
button, input { font: inherit; }
h1, h2, h3, p, figure, ol, dl, dd { margin: 0; }
.nv-mono { font-family: var(--font-mono); }
.nv-skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--grey-0); padding: var(--s-2) var(--s-4); z-index: var(--z-skip); }
.nv-skip:focus { left: 0; }
.nv-page { display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; }
.nv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Header ---------- */
.nv-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-7); padding: 18px var(--nv-gutter); border-bottom: 1px solid var(--hair); }
.nv-brand { display: flex; align-items: center; gap: 10px; font-size: var(--nv-t-brand); font-weight: var(--fw-semibold); }
.nv-brand:hover { text-decoration: none; }
.nv-brand svg { fill: var(--ink); }
.nv-brand__sub { font-weight: var(--fw-regular); color: var(--ink-2); }
.nv-nav { display: flex; flex-wrap: wrap; gap: var(--s-6); margin-left: auto; align-items: center; font-size: var(--nv-t-nav); font-weight: var(--fw-medium); color: var(--ink-2); }
.nv-nav__strong { color: var(--ink); }
/* The menu marks the page you are on. */
.nv-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; }
.nv-nav__cta { color: var(--ink); border: 1px solid var(--ink); border-radius: var(--r-4); padding: var(--s-2) 14px; }
.nv-nav__cta:hover { text-decoration: none; background: var(--grey-100); }

/* ---------- Shared type ---------- */
.nv-eyebrow { font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: var(--nv-tk-eyebrow); text-transform: uppercase; color: var(--ink-2); }
.nv-h1 { font-size: var(--nv-t-hero); line-height: 1.04; font-weight: var(--fw-semibold); letter-spacing: var(--nv-tk-poster); }
.nv-h2 { font-size: var(--nv-t-h2); line-height: 1.08; font-weight: var(--fw-semibold); letter-spacing: var(--tk-tight-3); }
.nv-lede { font-size: var(--nv-t-lede); line-height: 1.5; color: var(--ink-2); }
.nv-lede-2 { font-size: var(--nv-t-lede-2); line-height: 1.5; color: var(--ink-2); }
.nv-fine { font-size: var(--t-small); color: var(--ink-2); }

/* ---------- Buttons ---------- */
.nv-btn { display: inline-flex; align-items: center; min-height: var(--nv-tap); padding: 0 22px; border-radius: var(--r-4); font-size: var(--t-dense-1); font-weight: var(--fw-semibold); }
.nv-btn:hover { text-decoration: none; }
.nv-btn--mint { background: var(--mint); color: var(--mint-ink); border: 0; }
.nv-btn--mint:hover { background: var(--mint-press); }
.nv-btn--line { border: 1px solid var(--ink); color: var(--ink); font-weight: var(--fw-medium); }
.nv-btn--line:hover { background: var(--grey-100); }
.nv-demo { display: inline-flex; flex-direction: column; justify-content: center; min-height: var(--nv-tap); padding: 0 var(--s-1); font-size: var(--t-dense-1); font-weight: var(--fw-medium); text-decoration: underline; text-underline-offset: 3px; }
.nv-demo span { font-size: var(--t-small); font-weight: var(--fw-regular); color: var(--ink-2); }

/* ---------- Sections ---------- */
.nv-col { max-width: var(--nv-col); width: 100%; margin: 0 auto; padding-left: var(--s-4); padding-right: var(--s-4); }
.nv-footer { padding: var(--s-6) var(--nv-gutter); border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-3) var(--s-6); font-size: var(--t-body); color: var(--ink-2); }
/* The footer's links, About us first; the disclaimer sits on the far side. The current page's link is marked
   as the header marks it. */
.nv-footer__nav { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-weight: var(--fw-medium); }
.nv-footer__nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: var(--s-1); }
.nv-footer__note { margin: 0; }

/* Entrances: rise into place once, when the section first scrolls into view. */
.nv-rise { opacity: 0; transform: translateY(16px); transition: opacity var(--nv-dur-enter) ease-out, transform var(--nv-dur-enter) ease-out; transition-delay: calc(var(--n, 0) * var(--nv-stagger-b)); }
.nv-rise.is-in { opacity: 1; transform: none; }
.fm-caption.nv-rise { transition-delay: var(--nv-delay-cap); }
.no-js .nv-rise { opacity: 1; transform: none; }

/* ============================================================
   Firm page
   ============================================================ */

.fm-hero-wrap { position: relative; overflow: hidden; width: 100%; }
.fm-hero { position: relative; padding-top: var(--nv-pad-hero); padding-bottom: var(--s-8); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8) var(--nv-gap-l); }
.fm-hero__copy { flex: 1 1 520px; min-width: 0; max-width: 660px; display: flex; flex-direction: column; gap: var(--s-6); position: relative; z-index: var(--z-raise); }
.fm-hero__copy .nv-h1 { font-size: var(--nv-t-hero-f); }
.fm-hero__copy .nv-lede { max-width: 560px; }
.fm-hero__art { flex: 1 1 360px; min-width: 0; display: flex; justify-content: center; }
.fm-hero__frame { position: relative; width: 100%; max-width: 620px; aspect-ratio: 1; transform: translateY(var(--dy, 0px)); }
.hm-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hm-t { fill: var(--nv-hm-grey); stroke: var(--nv-hm-grey); stroke-linejoin: round; opacity: var(--o, 1); }
.hm-logo { fill: var(--nv-hm-mint); stroke: var(--nv-hm-mint); }
.fm-hero__press { left: 37.34%; top: 37.34%; width: 25.32%; height: 25.32%; position: absolute; padding: 0; border: 0; border-radius: var(--r-5); background: transparent; cursor: pointer; }
.fm-hero__press:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }

/* She shares, you receive */
.fm-report { padding-top: var(--s-4); padding-bottom: var(--nv-gap-l); display: flex; flex-direction: column; gap: var(--s-6); }
.fm-points { padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-8); }
.fm-points li { flex: 1 1 280px; min-width: 0; display: flex; gap: 14px; padding-top: var(--s-4); border-top: 1px solid var(--hair); }
.fm-num { flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--mint); color: var(--mint-ink); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: var(--t-meta); }
.fm-points__text { display: flex; flex-direction: column; gap: 6px; }
.fm-points__h { font-size: var(--t-lead); font-weight: var(--fw-semibold); }
.fm-points__p { font-size: var(--t-dense-1); line-height: 1.5; color: var(--ink-2); }
.fm-report__head { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.fm-report__head .nv-h2 { line-height: 1.06; }
.fm-caption { display: flex; flex-wrap: wrap; gap: var(--s-6) var(--nv-gap-xl); align-items: flex-start; }
.fm-caption > p { flex: 1 1 400px; min-width: 0; }
.fm-caption__right { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.fm-caption p { font-size: var(--nv-t-lede-2); line-height: var(--lh-body); color: var(--ink-2); }
.fm-caption .fm-punch { font-size: var(--nv-t-punch); line-height: 1.15; font-weight: var(--fw-semibold); letter-spacing: var(--nv-tk-h3); color: var(--ink); }

/* The stage: drawn at 1440 x 980 and scaled to the column (--fs, set by site.js) */
.fm-stage { position: relative; width: 100%; height: calc(530px * var(--fs, 1)); }
.fm-stage__inner { position: absolute; left: 0; top: 0; width: 1440px; height: 980px; transform: scale(var(--fs, 1)) translate(-64px, -244px); transform-origin: 0 0; }
.fm-page { position: absolute; width: 420px; height: 594px; transform-origin: 50% 100%; transition: left var(--nv-dur-fan) cubic-bezier(0.2, 0.7, 0.2, 1), top var(--nv-dur-fan) cubic-bezier(0.2, 0.7, 0.2, 1), transform var(--nv-dur-fan) cubic-bezier(0.2, 0.7, 0.2, 1), opacity 400ms ease-out; transition-delay: calc(var(--k) * var(--nv-stagger-p)); left: 360px; top: 200px; transform: scale(0.7); opacity: 0; }
.fm-page--1 { z-index: var(--nv-z-page1); } .fm-page--2 { z-index: var(--nv-z-page2); } .fm-page--3 { z-index: var(--nv-z-page3); }
.is-out .fm-page { opacity: 1; }
.is-out .fm-page--1 { left: 860px; top: 166px; transform: rotate(-5deg) scale(0.86); }
.is-out .fm-page--2 { left: 920px; top: 172px; transform: scale(0.86); }
.is-out .fm-page--3 { left: 980px; top: 178px; transform: rotate(5deg) scale(0.86); }
.fm-lid { position: absolute; left: 109px; top: 284px; width: 700px; height: 456px; z-index: var(--nv-z-laptop); border-radius: var(--nv-r-lid) var(--nv-r-lid) var(--r-1) var(--r-1); background: var(--nv-lt-bezel); border: 1px solid var(--nv-lt-edge); box-shadow: var(--nv-lt-shadow); }
.fm-lid::after { content: ''; position: absolute; left: 50%; top: 5px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--nv-lt-cam); }
.fm-base { position: absolute; left: 64px; top: 740px; width: 790px; height: 15px; z-index: var(--nv-z-laptop); border-radius: var(--r-micro) var(--r-micro) var(--nv-r-base) var(--nv-r-base); background: linear-gradient(var(--nv-lt-base-a), var(--nv-lt-base-b)); box-shadow: var(--nv-lt-shadow-base); }
.fm-base::after { content: ''; position: absolute; left: 50%; top: 0; width: 128px; height: 6px; margin-left: -64px; border-radius: 0 0 var(--r-5) var(--r-5); background: var(--nv-lt-notch); }
.fm-screen { position: absolute; left: 123px; top: 300px; width: 672px; height: 426px; z-index: var(--nv-z-screen); overflow: hidden; border-radius: var(--r-xs); }
.fm-screen__scale { width: 1200px; height: 760px; transform: scale(0.56); transform-origin: 0 0; }
.fm-screen__label { position: absolute; left: 109px; top: 254px; font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: var(--tk-caps-4); text-transform: uppercase; color: var(--ink-2); }

/* Sarah's Home, as the app draws it (light) */
.hh { width: 1200px; height: 760px; display: flex; border: 1px solid var(--nv-home-border); border-radius: var(--r-6); overflow: hidden; background: var(--nv-home-ground); color: var(--nv-home-t1); }
.hh-rail { flex: 0 0 64px; padding: 14px var(--s-2); border-right: 1px solid var(--nv-home-border); background: var(--nv-home-surface); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hh-rail__logo { fill: var(--nv-home-brand); margin-bottom: 22px; }
.fm-rail__item { width: 48px; height: 44px; border-radius: var(--r-4); color: var(--nv-home-t2); display: flex; align-items: center; justify-content: center; }
.fm-rail__item--on { background: var(--nv-home-rail); color: var(--nv-home-t1); }
.fm-rail__item--gap { margin-top: var(--s-6); }
.hh-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.hh-top { display: flex; align-items: center; gap: var(--s-4); height: 56px; padding: 0 var(--s-7); border-bottom: 1px solid var(--nv-home-border); background: var(--nv-home-surface); }
.hh-search { flex: 0 1 460px; margin-left: auto; height: 38px; display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-3); background: var(--nv-home-surface2); border: 1px solid var(--nv-home-border); border-radius: var(--r-pill); font-size: var(--t-body); color: var(--nv-home-t3); }
.hh-search svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.hh-adviser { display: inline-flex; align-items: center; gap: var(--s-2); height: 40px; padding: 0 var(--s-4); border-left: 1px solid var(--nv-home-border); border-right: 1px solid var(--nv-home-border); border-radius: var(--r-1); }
.hh-adviser__text { display: flex; flex-direction: column; gap: var(--s-1); line-height: 1.2; }
.hh-adviser__role { font-size: var(--t-dense-4); letter-spacing: var(--tk-caps-4); text-transform: uppercase; color: var(--nv-home-t3); }
.hh-adviser__name { font-size: var(--t-body); white-space: nowrap; }
.hh-adviser__name strong { font-weight: var(--fw-semibold); }
.hh-adviser__name span { color: var(--nv-home-t3); }
.hh-body { padding: 30px var(--s-9) var(--s-7); display: flex; flex-direction: column; gap: 18px; }
.hh-greet { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
.hh-greet__l { display: flex; flex-direction: column; gap: var(--s-2); }
.hh-greet__hello { font-size: var(--t-headline); font-weight: var(--fw-semibold); letter-spacing: var(--nv-tk-h3); }
.hh-greet__line { font-size: var(--t-dense-2); color: var(--nv-home-t2); border-radius: var(--r-1); }
.hh-greet__line strong { color: var(--nv-home-t1); font-weight: var(--fw-semibold); }
.hh-greet__line u { color: var(--nv-home-t1); }
.hh-date { font-family: var(--font-mono); font-size: var(--t-body); color: var(--nv-home-t2); }
.hh-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.hh-row4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.hh-card { border: 1px solid var(--nv-home-border); border-radius: var(--r-5); background: var(--nv-home-surface); display: flex; flex-direction: column; transition: opacity 300ms ease-out, box-shadow 300ms ease-out; }
.hh-card--l { padding: 22px; gap: var(--s-3); }
.hh-card--s { padding: 18px; gap: 10px; }
.hh-cap { font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: var(--tk-caps-4); text-transform: uppercase; color: var(--nv-home-t3); }
.hh-nw { display: flex; align-items: baseline; gap: var(--s-4); }
.hh-nw__fig { font-size: var(--nv-t-home-nw); line-height: 1; font-weight: var(--fw-semibold); letter-spacing: var(--tk-tight-3); }
.hh-nw__chg { font-size: var(--t-dense-2); font-weight: var(--fw-semibold); color: var(--nv-home-brand); }
.hh-nw__chg span { font-weight: var(--fw-regular); color: var(--nv-home-t2); }
.hh-spark { display: block; width: 100%; background: var(--nv-home-surface2); }
.hh-spark__area { fill: var(--nv-home-brand); opacity: 0.08; }
.hh-spark__line { fill: none; stroke: var(--nv-home-brand); stroke-width: 1.5; }
.hh-spark__dot { fill: var(--nv-home-brand); }
.hh-spark-cap { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--t-dense-4); color: var(--nv-home-t3); }
.hh-mix { display: flex; flex-direction: column; gap: 5px; }
.hh-mix__label { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--nv-t-nav); }
.hh-mix__label > span:first-child { display: flex; align-items: center; gap: var(--s-2); }
.hh-mix__label > span:last-child { font-family: var(--font-mono); font-size: var(--t-dense-2); }
.hh-dot { width: 8px; height: 8px; border-radius: 50%; }
.hh-track { height: 4px; border-radius: var(--r-micro); background: var(--nv-home-surface2); }
.hh-fill { height: 4px; border-radius: var(--r-micro); width: var(--w); }
.hh--prop { background: var(--nv-home-prop); } .hh--pens { background: var(--nv-home-pens); } .hh--inv { background: var(--nv-home-inv); } .hh--cash { background: var(--nv-home-cash); }
.hh--debt { background-color: var(--nv-home-surface2); background-image: repeating-linear-gradient(135deg, var(--nv-home-debt) 0 1px, transparent 1px 3px); border: 1px solid var(--nv-home-debt); }
.hh-fig { display: flex; align-items: baseline; gap: var(--s-2); }
.hh-fig b { font-size: var(--t-tile-figure); line-height: 1; font-weight: var(--fw-semibold); }
.hh-fig span, .hh-sub { font-size: var(--t-body); color: var(--nv-home-t2); }
.hh-sub { font-size: var(--t-small); }
.hh-goal { display: flex; justify-content: space-between; align-items: baseline; }
.hh-goal b { font-size: var(--t-dense-1); font-weight: var(--fw-semibold); }
.hh-goal span { font-family: var(--font-mono); font-size: var(--t-dense-1); color: var(--nv-home-gold); }
.hh-goal-track { height: 6px; border-radius: var(--r-micro); background: var(--nv-home-surface2); }
.hh-goal-track span { display: block; height: 6px; width: 72%; border-radius: var(--r-micro); background: var(--nv-home-gold); }
.hh-rec { padding: var(--s-4) 18px; flex-direction: row; align-items: center; gap: var(--s-6); }
.hh-rec__item { display: flex; flex-direction: column; gap: 2px; font-size: var(--t-dense-2); }
.hh-rec__item span { font-size: var(--t-meta); color: var(--nv-home-gold); }
.hh-rec__go { margin-left: auto; font-size: var(--t-body); text-decoration: underline; }
/* While the pages are tucked away, the adviser line is what she is about to use: it is picked out, the rest dims. */
.hh-pick .hh-card, .hh-pick .hh-greet__hello { opacity: 0.28; }
.hh-pick .hh-adviser, .hh-pick .hh-greet__line { box-shadow: var(--nv-ring); }

/* One page of the household report */
.rp { width: 420px; height: 594px; background: var(--nv-rp-paper); color: var(--nv-rp-ink); border-radius: var(--r-1); box-shadow: var(--nv-rp-shadow); padding: 28px 28px 22px; display: flex; flex-direction: column; gap: 14px; font-size: var(--nv-rp-t); line-height: 1.45; }
.rp-head { display: flex; justify-content: space-between; gap: var(--s-2); font-family: var(--font-mono); font-size: var(--nv-rp-t-head); letter-spacing: var(--tk-caps-3); text-transform: uppercase; color: var(--nv-rp-ink3); padding-bottom: 10px; border-bottom: 1px solid var(--nv-rp-rule); }
.rp-title { font-size: var(--nv-rp-t-title); font-weight: var(--fw-semibold); letter-spacing: var(--tk-tight-2); }
.rp-cap { font-size: var(--nv-rp-t-note); letter-spacing: var(--tk-caps-3); text-transform: uppercase; color: var(--nv-rp-ink3); }
.rp-fig { font-size: var(--nv-rp-t-fig); font-weight: var(--fw-semibold); letter-spacing: var(--tk-tight-3); }
.rp-muted { color: var(--nv-rp-ink2); }
.rp-mono { font-family: var(--font-mono); white-space: nowrap; }
.rp-block { display: flex; flex-direction: column; gap: var(--s-1); }
.rp-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); }
.rp-hold { padding: var(--s-1) 0; border-top: 1px solid var(--nv-rp-rule2); }
.rp-hold small { display: block; font-size: var(--nv-rp-t-note); color: var(--nv-rp-note); }
.rp-hold small.rp-warn, .rp-warn { color: var(--nv-rp-warn); }
.rp-total { padding-top: var(--s-1); border-top: 1px solid var(--nv-rp-rule2); font-weight: var(--fw-semibold); }
.rp-foot3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); margin-top: auto; padding-top: 10px; border-top: 1px solid var(--nv-rp-rule); }
.rp-foot3 span { display: flex; flex-direction: column; font-size: var(--nv-rp-t-note); color: var(--nv-rp-ink3); }
.rp-foot3 b { font-family: var(--font-mono); font-size: var(--t-body); font-weight: var(--fw-regular); color: var(--nv-rp-ink); }
.rp-bar { height: 5px; border-radius: var(--r-micro); background: var(--nv-rp-rule2); }
.rp-bar span { display: block; width: 72%; height: 5px; border-radius: var(--r-micro); background: var(--nv-rp-bar); }
.rp-end { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--nv-rp-rule); }
.rp-q { border-left: 2px solid var(--nv-rp-ink); padding: 2px 0 2px var(--s-3); font-size: var(--t-body); }
.rp-opt { display: flex; flex-direction: column; gap: 3px; padding: var(--s-2) 0; border-top: 1px solid var(--nv-rp-rule2); }
.rp-opt b { font-weight: var(--fw-semibold); }
.rp-ret { display: flex; flex-direction: column; gap: var(--s-1); padding-top: 10px; border-top: 1px solid var(--nv-rp-rule); }
.rp-fine { margin-top: auto; font-size: var(--nv-rp-t-fine); color: var(--nv-rp-ink2); }

/* The deal: one term sheet, the headline and its button on the ink panel, the terms beside it */
.fm-deal { padding-top: var(--nv-section-l); padding-bottom: var(--nv-section-l); border-top: 1px solid var(--hair); }
.fm-sheet { max-width: 880px; margin: 0 auto; display: flex; flex-wrap: wrap; background: var(--grey-0); border: 1px solid var(--hair); border-radius: var(--nv-r-frame); box-shadow: var(--nv-shadow-frame); overflow: hidden; }
.fm-sheet__head { flex: 1 1 300px; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-7); padding: var(--s-8); background: var(--ink); color: var(--grey-0); }
.fm-sheet__title { display: flex; flex-direction: column; gap: var(--s-4); }
.fm-sheet__eyebrow { font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: var(--nv-tk-eyebrow); text-transform: uppercase; color: var(--mint); }
.fm-sheet__h2 { font-size: var(--nv-t-punch); line-height: var(--lh-snug); font-weight: var(--fw-semibold); letter-spacing: var(--nv-tk-h3); }
.fm-sheet__cta { align-self: flex-start; }
.fm-terms { flex: 999 1 380px; min-width: 0; display: flex; flex-direction: column; padding: var(--s-4) var(--s-8); }
.fm-terms div { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-5) 0; border-top: 1px solid var(--hair); }
.fm-terms div:first-child { border-top: 0; }
.fm-terms dt { font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: var(--tk-caps-3); text-transform: uppercase; color: var(--ink-2); }
.fm-terms dd { font-size: var(--nv-t-body); line-height: 1.5; }

/* Start */
.fm-start { padding-top: var(--nv-section-l); padding-bottom: var(--nv-section-x); display: flex; flex-direction: column; align-items: center; gap: var(--s-6); text-align: center; border-top: 1px solid var(--hair); }
.fm-start__line { font-size: var(--nv-t-close); line-height: var(--lh-snug); font-weight: var(--fw-semibold); letter-spacing: var(--nv-tk-h3); max-width: 760px; }
.fm-start__sub { font-size: var(--nv-t-body); color: var(--ink-2); }
.fm-start__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: var(--s-2); }

/* ---------- Reduced motion: every section a finished still ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nv-rise { opacity: 1; transform: none; transition: none; }
  .fm-page, .hh-card { transition: none; }
}

/* ---------- Stacked hero ----------
   Side by side, the header mosaic runs out under the headline, held down by its own fade. Once the art drops
   below the copy that fade no longer lines up with the text, so the mosaic stays inside its own box. */
@media (max-width: 960px) {
  .fm-hero__frame { overflow: hidden; border-radius: var(--nv-r-frame); }
  .hm-svg { overflow: hidden; }
}

/* ---------- Phone ---------- */
@media (max-width: 640px) {
  .nv-head { padding-top: 14px; padding-bottom: 14px; }
  .nv-nav { gap: var(--s-4); }
  .nv-nav a[aria-current="page"], .nv-nav__cta { display: none; }
  .nv-brand__sub, .nv-nav__other { display: none; }
  .fm-sheet__head, .fm-terms { padding-left: var(--s-6); padding-right: var(--s-6); }
}