/* ============================================================
   Adla brand system (B2a) — ported from the first-home funnel.
   Warm cream paper, mango/amber/rust, Capriola + Roboto + Caveat,
   chunky ink-outlined components, hand-drawn kiwi character.
   Presentation only — copy, fields, flow, and logic unchanged.
   ============================================================ */

/* ============================================================
   Web fonts, self-hosted (2026-09-07). The woff2 files Google Fonts serves
   were copied byte-for-byte into public/fonts (Capriola v15, Caveat v23,
   Roboto v51; latin + latin-ext subsets, unicode-range exactly as Google
   emits them), then cut down with fontTools to what the pages use: Caveat
   is a static Bold (700 is its only weight here, 51KB vs 75KB variable) and
   Roboto is the variable file restricted to 400-700 (27KB vs 38KB). Every
   file name carries its version, because server.js gives *.woff2 the same
   year-long immutable cache header as the images (that is what lets the
   Netlify path-proxy edge-cache them), so a changed file needs a new name.
   Each page preloads Capriola + Roboto, its first-paint fonts. Caveat is
   deliberately NOT preloaded and uses font-display: block: it is one
   decorative eyebrow line (and the typed signature on the sign page), so it
   should not compete with the readable text for first paint, and it is
   better to appear a beat late than to flash in the fallback script.
   tests/fonts.test.js pins the set.
   Why: the Google Fonts stylesheet was a third-party hop the browser had to
   finish before it even learned the font URLs, so every first paint was in
   fallback fonts (a calligraphic system script for the Caveat eyebrow) and
   the real ones swapped in ~1.3s later on slow 4G, reflowing the page.
   ============================================================ */
/* latin-ext */
@font-face {
  font-family: 'Capriola';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/capriola-v15-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Capriola';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/capriola-v15-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url(../fonts/caveat-v23-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url(../fonts/caveat-v23-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/roboto-v51-400-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/roboto-v51-400-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --cream: #fffdf6;      /* page canvas */
  --cream2: #fdf8ea;     /* soft cream band */
  --tan: #efe6cf;
  --tan2: #e4dabe;       /* warm tan */
  --sand: #f6ecd2;
  --ink: #111111;        /* text + outlines */
  --text: #3a3328;
  --soft: #6a6353;
  --mango: #fbc45c;      /* PRIMARY accent / CTA */
  --amber: #e09a4a;
  --rust: #c47b35;
  --amberlite: #fcd58c;
  --green: #6f9140;      /* sparingly: ticks / yes-states */
  --green-d: #5d7a32;
  --green-l: #cfe0b4;
  --green-ll: #f1f4eb;
  --white: #fff;
  --line: #cdbf9c;                        /* warm hairline outline */
  --line-ink: rgba(17,17,17,.16);         /* faint ink edge */
  --lift: 0 1px 2px rgba(43,36,26,.06), 0 8px 22px rgba(43,36,26,.10);
  --lift-key: 0 2px 0 rgba(17,17,17,.10), 0 10px 26px rgba(43,36,26,.12);
  --press: 0 1px 1px rgba(17,17,17,.10);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--text);
  font-family: 'Roboto', system-ui, sans-serif;
  line-height: 1.6;
  background: var(--cream);
  /* warm layered atmosphere — not a flat one-note cream */
  background-image:
    radial-gradient(120% 90% at 100% -8%, rgba(251,196,92,.30) 0%, rgba(251,196,92,0) 46%),
    radial-gradient(110% 80% at -10% 4%, rgba(224,154,74,.16) 0%, rgba(224,154,74,0) 42%),
    radial-gradient(130% 70% at 50% 108%, rgba(111,145,64,.11) 0%, rgba(111,145,64,0) 50%);
  background-attachment: fixed;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
/* fine grain overlay for texture (no external asset) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: 'Capriola', sans-serif; font-weight: 400; color: var(--ink); line-height: 1.16; }
a { color: inherit; }

/* the hand-drawn mango underline accent (animated draw-on) */
.draw { position: relative; display: inline-block; white-space: nowrap; }
.draw svg { position: absolute; left: -3%; width: 106%; bottom: -.22em; height: .46em; overflow: visible; }
.draw svg path {
  fill: none; stroke: var(--mango); stroke-width: 11; stroke-linecap: round;
  stroke-dasharray: 600; stroke-dashoffset: 600;
  transition: stroke-dashoffset 1.1s cubic-bezier(.6,.1,.2,1) .35s;
}
.draw.in svg path { stroke-dashoffset: 0; }

/* ============ Shared bits ============ */

.badge-pill {
  display: inline-block;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--mango);
  color: var(--ink);
  border: 1.5px solid rgba(17,17,17,.14);
  font: 400 12px 'Capriola', sans-serif;
  letter-spacing: .01em;
}

.badge-muted {
  display: inline-block;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--sand);
  color: var(--rust);
  border: 1.5px solid var(--line);
  font: 400 11px 'Capriola', sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* primary button — refined mango pill with a soft key-lift (not toy/sticker) */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: 52px;
  padding: 15px 30px;
  background: var(--mango);
  color: var(--ink);
  border: 1.5px solid rgba(17,17,17,.14);
  border-radius: 999px;
  font: 400 16px 'Capriola', sans-serif;
  cursor: pointer;
  box-shadow: var(--lift-key);
  transition: transform .12s, box-shadow .12s, filter .12s;
}
.btn-pill:hover { transform: translateY(-2px); box-shadow: 0 4px 0 rgba(17,17,17,.10), 0 14px 30px rgba(43,36,26,.16); filter: brightness(1.02); }
.btn-pill:active { transform: translateY(1px); box-shadow: var(--press); }
.btn-pill:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: var(--lift); }
.btn-pill:disabled:hover { filter: none; }
/* An incomplete form's Continue (2026-09-15, js/field-hints.js): looks exactly
   like :disabled above, but stays tappable so it can say what's missing. */
.btn-pill.is-waiting, .btn-pill.is-waiting:hover, .btn-pill.is-waiting:active { opacity: .5; cursor: not-allowed; transform: none; box-shadow: var(--lift); filter: none; }
.btn-pill.full { width: 100%; }
/* Quiet secondary action (fund step's "Keep my current fund", 2026-07-17) —
   same pill geometry, no fill, no lift: present and tappable without
   competing with the primary. The stay option must remain plainly visible
   (compliance: a real outcome, recorded), just visually secondary. */
.btn-pill.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); box-shadow: none; }
.btn-pill.ghost:hover { background: var(--cream2); transform: translateY(-2px); box-shadow: none; filter: none; }
.btn-pill.ghost:active { transform: translateY(1px); }

.link-btn {
  background: none;
  border: none;
  font: 500 14px 'Roboto', sans-serif;
  color: var(--rust);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 8px 0;
}
.link-btn:hover { color: var(--ink); }
/* The Q2 "I'm not sure" door (2026-09-04): its own line, tucked under the
   provider dropdown. The select carries 20px of bottom margin; this pulls the
   link up to 10px below it, and Continue's row sits 26px further down. */
.notsure-link { display: block; margin-top: -10px; }

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  font: 500 14px 'Roboto', sans-serif;
  color: var(--ink);
  opacity: .6;
  cursor: pointer;
  padding: 6px 0;
  text-decoration: none;
  transition: opacity .14s;
}
.back-btn:hover { opacity: 1; }

.field-label {
  display: block;
  font: 400 14px 'Capriola', sans-serif;
  margin-bottom: 7px;
  color: var(--ink);
}
.field-label .optional { font-family: 'Roboto', sans-serif; font-weight: 500; color: var(--soft); font-size: 13px; }

.field-input {
  width: 100%;
  box-sizing: border-box;
  height: 52px;
  padding: 0 16px;
  border: 1.5px solid var(--line-ink);
  background: #fff;
  border-radius: 13px;
  font: 400 15px 'Roboto', sans-serif;
  color: var(--ink);
  outline: none;
  margin-bottom: 20px;
  box-shadow: 0 1px 2px rgba(43,36,26,.05);
  transition: box-shadow .14s, border-color .14s;
}
.field-input::placeholder { color: #b5ac9e; }
.field-input:focus { border-color: var(--mango); box-shadow: 0 0 0 3px rgba(251,196,92,.30); }
/* Field hints (2026-09-15, js/field-hints.js): the line that says why Continue
   is still grey. Ported from adla.co.nz's homepage form (rust outline, one short
   line under the field). Pulled up into the field's 20px bottom margin so it
   reads as belonging to the field above, not the label below. */
.field-input.has-hint { border-color: var(--rust); }
.field-input.has-hint:focus { border-color: var(--rust); box-shadow: 0 0 0 3px rgba(196,123,53,.20); }
.field-hint { margin: -13px 0 17px; font: 400 13px/1.45 'Roboto', sans-serif; color: var(--rust); }
.fc-group + .field-hint { margin-top: 2px; }

/* iOS Safari gives type=date its native control shell (appearance auto), which
   skips the standard width plus border-box layout and lets the control run off
   the right edge of the screen on phones. Strip the shell so it lays out like
   any other .field-input, bound it to its column, and left-align the value
   wrapper the UA otherwise centres. line-height keeps the value vertically
   centred once the native shell is gone. */
.field-input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  min-width: 0;
  max-width: 100%;
  line-height: 49px;
}
.field-input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
}

/* address finder dropdown — field-input sibling family; mango border pairs it with the focused input above */
.address-wrap { position: relative; }
.address-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 30;
  background: #fff;
  border: 1.5px solid var(--mango);
  border-radius: 13px;
  box-shadow: 0 10px 24px rgba(43,36,26,.14);
  max-height: 260px;
  overflow-y: auto;
}
.address-suggestions[hidden] { display: none; }
.address-suggestion {
  padding: 12px 16px;
  font: 400 14.5px 'Roboto', sans-serif;
  color: var(--ink);
  cursor: pointer;
}
.address-suggestion + .address-suggestion { border-top: 1px solid var(--cream2); }
.address-suggestion:hover, .address-suggestion:active { background: var(--cream2); }

/* quiz answer — bold chunky button, the main-site signature form */
.option-btn {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 15px 18px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 15px;
  font: 400 15.5px 'Capriola', sans-serif;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  /* SOFT LIFT, not the old ink slab (Jacob 2026-08-20, picked from four
     mocked variants). The 0 4px 0 ink offset shouted — a raised card holding
     five raised slabs — but fully flat went white-on-white. --lift is the
     Save pill's own shadow, so buttons and CTA share one depth language.
     Border stays 2px ink. */
  box-shadow: var(--lift);
  transition: transform .1s, box-shadow .1s, background .14s;
  margin-bottom: 11px;
}
.option-btn:last-child { margin-bottom: 0; }
.option-btn:hover { transform: translateY(-1px); box-shadow: var(--lift-key); background: var(--cream2); }
.option-btn:active { transform: translateY(1px); box-shadow: var(--press); }
/* amberlite, not mango — mango is the CTA fill, and a selected option
   shouldn't shout like a Save button (the app made the same call 08-19). */
.option-btn.sel { background: var(--amberlite); }

/* The provider question (Fisher's scheme chips) sits directly above Continue
   on the details page — give it the same breathing room the fund-check page
   leaves before its action (22px). :not(:empty) so bank/Booster/Generate
   leads, which render no question, don't get a stray gap. */
#provider-questions:not(:empty) { margin-bottom: 22px; }

/* provider chip — smaller chunky pill */
.chip-btn {
  min-height: 44px;
  padding: 10px 18px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 13px;
  font: 400 14px 'Capriola', sans-serif;
  color: var(--ink);
  cursor: pointer;
  /* Same soft lift as .option-btn (Jacob 2026-08-20, "funnel wide") — one
     button language across all three questions. */
  box-shadow: var(--lift);
  transition: transform .1s, box-shadow .1s, background .14s;
}
.chip-btn:hover { transform: translateY(-1px); box-shadow: var(--lift-key); background: var(--cream2); }
.chip-btn:active { transform: translateY(1px); box-shadow: var(--press); }
.chip-btn.sel { background: var(--amberlite); }
/* Provider chips condense from 560px up (Jacob 2026-09-04): at the card's
   full width the ten chips packed 5/4/1 with Booster alone on a third row.
   13px sides pack them 6/4 from 570px (5/5 at 560). Phones keep the chunky
   18px pill: it breaks 3/3/2/2 or 4/3/3 up to 530px, and 13px looked
   squished there. Measured 2026-09-04 with real font widths in 10px steps;
   540 to 559px orphans either way and no common device sits there. Scoped
   to the provider row; the details page's scheme chips are untouched. */
@media (min-width: 560px) {
  #provider-chips .chip-btn { padding: 10px 13px; }
}

.lock-icon { display: inline-flex; flex-direction: column; align-items: center; }
.lock-icon .shackle { width: 8px; height: 6px; border: 1.5px solid var(--rust); border-bottom: none; border-radius: 4px 4px 0 0; display: block; }
.lock-icon .body { width: 13px; height: 9px; background: var(--rust); border-radius: 2.5px; display: block; }

.trust-note {
  margin: 16px 0 0;
  font-size: 12.5px;
  color: var(--soft);
  display: flex;
  align-items: center;
  gap: 8px;
}

.error-text { color: var(--rust); font-size: 13px; margin-top: 12px; }

/* decorative abstract shapes retired — replaced by the warm background + kiwi */
.decor, .rail-decor { display: none !important; }

/* ============ Landing / quiz ============ */

.landing {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: transparent;
  overflow: hidden;
}

.landing-header, .done-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  padding: 0 clamp(20px, 4.5vw, 56px);
  flex: none;
}
.landing-header img, .done-header img { height: 34px; display: block; }
/* Returning-client door (2026-08-24): the adla.co.nz nav's Log in, softened
   per Jacob (soft colour + underline vs the site's ink) so the quiz card
   stays the loudest thing on the page. Same corner, same portal destination
   as the marketing site's nav. */
.landing-header .login-link { color: var(--soft); text-decoration: underline; text-underline-offset: 3px; font: 500 16px 'Roboto', sans-serif; }
.landing-header .login-link:hover { color: var(--rust); }

.hero-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 4vw, 64px);
  padding: clamp(24px, 3.5vw, 44px) clamp(20px, 4.5vw, 56px) 44px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  justify-content: center;
}
.hero-copy { flex: 1 1 420px; max-width: 560px; }
.hero-copy h1 {
  margin: 0 0 22px;
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.15;
  text-wrap: pretty;
}
.hero-kiwi { width: clamp(150px, 20vw, 210px); margin: 0 0 20px; filter: drop-shadow(0 8px 14px rgba(43,36,26,.14)); }
/* Title first as the focal point; steps + kiwi share a row beneath it
   (kiwi to the RIGHT of the steps — Jacob feedback 2026-07-09) */
.hero-bottom { display: flex; align-items: flex-end; gap: clamp(14px, 3vw, 48px); }
/* Kiwi +15% (Jacob 2026-07-09); min-width lets it give way before the steps wrap */
.hero-bottom .hero-kiwi { margin: 0; width: clamp(150px, 15vw, 200px); flex-shrink: 1; min-width: 0; height: auto; }
.hero-steps { display: flex; flex-direction: column; gap: 14px; font-size: 15.5px; font-weight: 500; color: var(--text); }
/* flex-start + the -1px nudge pins each badge to its row's FIRST line, so a
   wrapped row (step 3 on phones) doesn't pull its badge down between the two
   lines and unbalance the column (Jacob 2026-08-05). The .gate-steps rules
   that first solved this left with the turn-away card, 2026-09-01. */
.hero-steps span.row { display: flex; align-items: flex-start; gap: 12px; white-space: nowrap; }
.hero-steps .step-badge { margin-top: -1px; }
.step-badge {
  width: 27px; height: 27px; border-radius: 50%; background: var(--mango); border: 2px solid var(--ink);
  color: var(--ink); display: grid; place-items: center; font: 400 13px 'Capriola', sans-serif; flex: none;
}

.quiz-card, .quiz-card-standalone {
  flex: 1 1 360px;
  max-width: 480px;
  background: #fff;
  /* Ink underline + 2px ink border, matching the app's .qcard (Jacob
     2026-08-20, "the card needs the dark underline"). The soft ambient stays —
     unlike the app's inline cards this one floats on the hero. Applies to
     EVERY quiz card (q2/q3/gate/signup share these classes). */
  border: 2px solid var(--ink);
  border-radius: 22px;
  box-shadow: 0 4px 0 var(--ink), 0 18px 40px rgba(43,36,26,.16);
  padding: 0 0 28px;
  overflow: hidden;
}
.quiz-card-standalone {
  width: 100%;
  max-width: 560px;
  padding: 0 0 32px;
  margin: 0 auto;
}
.quiz-progress-track { height: 6px; background: var(--sand); }
.quiz-progress-fill { height: 100%; background: var(--mango); border-radius: 0 3px 3px 0; transition: width .45s cubic-bezier(.6,.1,.2,1); }
.quiz-body { padding: 24px clamp(20px, 3vw, 28px) 0; }
.quiz-body h2 { margin: 14px 0 18px; font-size: 22px; }
.quiz-body p.hint { margin: 0 0 18px; font-size: 14.5px; line-height: 1.6; color: var(--soft); }

.q-page { position: relative; padding: clamp(20px, 4vw, 48px) 20px 72px; display: flex; justify-content: center; }

.chip-row { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 22px; }

.q-actions { display: flex; align-items: center; gap: 18px; margin-top: 26px; flex-wrap: wrap; }

.how-it-works {
  position: relative;
  z-index: 1;
  background: var(--cream2);
  border-top: 1.5px solid var(--line);
  border-radius: 32px 32px 0 0;
  padding: 46px clamp(20px, 4.5vw, 56px) 60px;
}
.how-it-works h2 { margin: 0 auto 40px; max-width: 1200px; font-size: clamp(26px, 2.8vw, 34px); }
.how-grid { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(20px, 2.5vw, 32px); max-width: 1200px; margin: 0 auto; }
.how-card {
  position: relative;
  flex: 1 1 240px;
  max-width: 360px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 16px;
  box-shadow: 0 4px 0 var(--ink);
  padding: 30px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform .12s, box-shadow .12s;
}
.how-card:hover { transform: translateY(-3px); box-shadow: 0 7px 0 var(--ink); }
.how-card .num {
  position: absolute; top: -16px; left: -10px; width: 40px; height: 40px; border-radius: 50%;
  background: var(--mango); color: var(--ink); display: grid; place-items: center;
  font: 400 16px 'Capriola', sans-serif; border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink);
}
.how-card p.title { margin: 4px 0 0; font: 400 17px 'Capriola', sans-serif; }
.how-card p.desc { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--soft); }

/* ============ Rail layout (account / details / disclosure / sign) ============ */

.rail-layout { position: relative; z-index: 1; display: flex; flex-wrap: wrap; min-height: 100vh; background: transparent; }

.rail-side {
  flex: 1 1 300px;
  max-width: 100%;
  background: #fff;
  border-right: 1.5px solid var(--line);
  border-bottom: 1.5px solid var(--line);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 32px 36px 28px;
  box-sizing: border-box;
}
.rail-side img.rail-logo { position: relative; height: 32px; width: auto; display: block; margin-bottom: 40px; align-self: flex-start; }
.rail-side .badge-pill { position: relative; align-self: flex-start; }
.rail-side .rail-title { position: relative; font: 400 25px 'Capriola', sans-serif; color: var(--ink); line-height: 1.25; margin-top: 14px; }
.rail-progress-track { position: relative; height: 9px; background: var(--sand); border: 1.5px solid var(--line); border-radius: 999px; margin-top: 24px; overflow: hidden; }
.rail-progress-fill { height: 100%; background: var(--mango); border-radius: 999px; transition: width .45s cubic-bezier(.6,.1,.2,1); }
.rail-footer { position: relative; margin-top: auto; padding-top: 40px; }
.fc-question { margin: 14px 0 18px; font: 400 21px 'Capriola', sans-serif; color: var(--ink); line-height: 1.3; }
/* Fund step's labelled sections (screen 4, round 3 — the layout is Jacob's
   own mock, 2026-07-17): rust mini-label on the left, content right,
   hairlines between rows; stacks on phones. The label register matches the
   portal worksheet's rust mini-labels. */
.fc-def { border-top: 1.5px solid var(--tan2); margin-top: 20px; }
.fc-def-row { display: flex; gap: 26px; padding: 20px 0; border-bottom: 1.5px solid var(--tan2); }
.fc-def-label { flex: 0 0 132px; padding-top: 3px; font: 400 12px 'Capriola', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--rust); }
.fc-def-body { flex: 1; min-width: 0; }
.fc-def-body p { margin: 0 0 10px; font-size: 15px; line-height: 1.6; color: var(--text); }
.fc-def-body p:last-child { margin-bottom: 0; }
@media (max-width: 560px) {
  .fc-def-row { flex-direction: column; gap: 8px; }
  .fc-def-label { flex: none; padding-top: 0; }
}

/* (Round 4: the round-2 intro tile was retired — it read as an AI info box;
   the intro now reuses .fc-def + .fc-fund-mark so the step opens and closes
   in the recommendation screen's own language.) */
/* The recommended fund's name gets the mango highlighter — the attention
   anchor of the whole screen. clone keeps multi-line wraps reading as one
   marker pass. */
/* inline-block + nowrap keeps the fund name an atomic unit: it wraps to the
   next line WHOLE rather than breaking mid-phrase ("Core" / "Conservative
   Fund"), so on a phone it drops together under "…we recommend the" and reads
   cleanly. Fits within a 393px card for the Fisher fund names. */
.fc-fund-mark { display: inline-block; white-space: nowrap; background: var(--amberlite); padding: 0 6px; border-radius: 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
/* Quiet doc links at the very foot of the decision screen. */
.fc-foot { margin: 24px 0 0; font-size: 12.5px; color: var(--soft); }
.fc-foot a { color: var(--soft); }
/* Kiwi stands ON the footer pill (feet on its top edge), in front of it —
   bottom offset = rail padding-bottom (28) + pill height (~44) − a small
   feet-overlap; z-index keeps it in front. (Jacob feedback 2026-07-09) */
/* In-flow above the pill since 2026-07-28 (was absolute, bottom-anchored to
   the panel): a panel-anchored kiwi lands ON the pill the moment the footer
   grows an extra line. Perching it in flow inside .rail-footer — the same
   mechanism .content-footer img has always used — keeps it on the pill's top
   edge no matter what the footer holds. -12px left keeps the old left:24px
   position (panel pads 36px). */
.rail-kiwi { position: relative; display: block; width: 130px; margin: 0 0 6px -12px; opacity: .95; pointer-events: none; z-index: 1; }

/* Mobile-only mirror of the rail's kiwi-on-pill footer, rendered below the
   form card so the form keeps focus on stacked layouts. Hidden on desktop. */
.content-footer { display: none; flex-direction: column; align-items: center; max-width: 590px; margin-top: 36px; }
.content-footer img { width: 112px; margin-bottom: 6px; position: relative; z-index: 1; filter: drop-shadow(0 8px 14px rgba(43,36,26,.14)); pointer-events: none; }

/* Footer trust line (Jacob 2026-08-05, replacing the .badge-muted capsule):
   a short hairline with the claim beneath it. The capsule read as a stock
   SaaS trust badge — .badge-muted itself stays, it still clothes the two
   auth-box expander summaries. The kiwi's perch offsets above changed from
   negative to positive with it: they existed to sink its feet into the
   pill's padding, and with no pill the coins collided with the words.
   Alignment follows context — left in the rail, centred under the mobile
   kiwi. */
.trust-line::before { content: ""; display: block; width: 46px; height: 1.5px; background: var(--line); margin: 0 0 9px; }
.trust-line > span { font: 500 13px 'Roboto', sans-serif; color: var(--soft); }
.content-footer .trust-line { text-align: center; }
.content-footer .trust-line::before { margin: 0 auto 9px; }

.rail-content { flex: 999 1 420px; padding: 36px clamp(20px, 5vw, 72px) 64px; box-sizing: border-box; }

.form-card {
  max-width: 590px;
  margin-top: 24px;
  background: #fff;
  border-radius: 18px;
  border: 1.5px solid var(--line-ink);
  box-shadow: 0 3px 0 rgba(17,17,17,.06), 0 14px 34px rgba(43,36,26,.12);
  padding: 32px clamp(20px, 4vw, 36px) 36px;
}
.form-card.wide { max-width: 620px; }
.form-card p.hint { margin: 0 0 26px; font-size: 14.5px; line-height: 1.6; color: var(--soft); }
/* Added by JS on the details page when a held provider's "<Provider> checks
   these against their records" line renders directly below the intro — the two
   sentences read as one short paragraph, and 26px split them (Jacob
   2026-07-16). Deliberately NOT applied to p.hint generally: everywhere else
   the next element is a field label or a form, where 26px is correct. */
.form-card p.hint.tight { margin-bottom: 6px; }

.callout {
  background: var(--cream2);
  border: 1.5px solid var(--line);
  border-radius: 13px;
  padding: 16px 18px;
  margin-bottom: 20px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--soft);
}
.callout a { color: var(--rust); }

/* The signup lead's .why-note / .why-lead / .why-mark / .why-desc rules were
   REMOVED 2026-07-16. That line had gone callout-box (07-14, de-boxed as
   AI-looking) -> highlighter marker -> translucent sand tile, all in a week;
   Jacob's call was to drop the per-reason line and the box entirely — "too
   wordy and unnecessary for now". What's left is one sentence using the
   funnel's standard p.hint muted copy, so it needs no rules of its own.
   Don't re-add a bespoke treatment here without asking. */

/* reassurance / privacy note — soft green tint */
.microcopy {
  display: flex; gap: 9px; align-items: flex-start;
  background: var(--green-ll); border: 1px solid var(--green-l);
  border-radius: 13px; padding: 12px 14px; margin: 6px 0 18px;
  font-size: 13px; color: var(--green-d); line-height: 1.5;
}
.microcopy svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--green); margin-top: 1px; }

/* Disclosure */
/* .disclosure-list intentionally has no border-top (Jacob 2026-07-16): on the
   sign page it sits under .review-list, whose last row already draws a bottom
   border — a top border here put two identical lines 26px apart with an empty
   band between them. The review list closes itself; the disclosure section
   just starts after the gap. */
/* 20px -> 15px, 8 -> 6 (2026-07-27): the stage-2 disclosure is materially
   longer than the two lines it replaced, so the vertical rhythm was tightened
   to buy some of that back. Type size deliberately untouched — reg 229H(1)(c)
   requires disclosure in "a format, font, and type size that are easily
   readable", and shrinking it below the surrounding page is precisely the
   pattern that reads as burying. */
.disclosure-item { padding: 15px 2px; border-bottom: 1.5px solid var(--tan2); }
.disclosure-item h2 { margin: 0 0 6px; font-size: 16.5px; }
.disclosure-item p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--soft); }
.disclosure-item a { color: var(--rust); text-decoration: underline; text-underline-offset: 3px; }

/* Sign */
.review-list { border-top: 1.5px solid var(--tan2); margin-bottom: 26px; }
.review-row { display: flex; justify-content: space-between; gap: 20px; padding: 13px 2px; border-bottom: 1.5px solid var(--tan2); font-size: 13.5px; }
.review-row .label { color: var(--soft); font-weight: 500; flex: none; }
.review-row .value { font-family: 'Capriola', sans-serif; text-align: right; overflow-wrap: anywhere; }

/* Your details — two-column grid (2026-07-27). Replaces the nine-row stacked
   list on the SIGN page only: same nine fields, all still visible, ~200px
   instead of ~500px at 390px wide. Deliberately not collapsed — the authority
   text the member signs says "the details above are correct", so having them
   genuinely above with no tap required is the cleanest reading of that.
   Dotted rules between rows (Jacob's call) so the pairs stay easy to track on
   a phone; the last row carries the solid rule that opens the disclosure.
   .review-list / .review-row above are still used elsewhere — don't remove. */
.ks-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; border-top: 1.5px solid var(--tan2); margin: 0 0 4px; padding: 4px 0 0; }
.ks-grid > div { padding: 8px 0; min-width: 0; border-bottom: 1px dotted var(--line); }
.ks-grid > div.wide { grid-column: 1 / -1; }
.ks-grid > div:last-child { border-bottom: 1.5px solid var(--tan2); }
.ks-grid span { display: block; font: 500 10.5px/1.4 'Roboto', sans-serif; color: var(--soft); text-transform: uppercase; letter-spacing: .055em; margin-bottom: 1px; }
.ks-grid em { display: block; font: 400 12.5px/1.45 'Capriola', sans-serif; font-style: normal; color: var(--ink); overflow-wrap: anywhere; }

/* "Your one signature signs two documents" — muted, sits between the
   disclosure and the two collapsed forms it refers to. */
.docs-intro { margin: 22px 0 10px; font-size: 13px; line-height: 1.55; color: var(--soft); }

/* Sticky submit, v2 (2026-08-04, from Jacob's ANZ walk) — sticky INSIDE the
   card, replacing the 2026-07-27 position:fixed bar. Fixed-to-viewport
   overlaid mid-page content: the collapsed forms and the docs line scrolled
   under it, and iOS Safari's collapsing toolbar left content peeking out
   beneath the bar. position:sticky failed when first tried on 07-27 only
   because the bar was NOT the card's last child, so sticky had no range to
   hold; sign.html now parks the bar at the very end of .form-card (outside
   #sign-area) and sticky delivers: pinned to the viewport bottom the whole
   way down, parks into the card's own corners at the end, and nothing can
   ever scroll out from under it.
   The negative margins mirror .form-card's padding (32px clamp() 36px) so the
   bar bleeds to the card's edges; change one, change both.
   Until the pad is on screen the bar shows a quiet tappable guide line
   ("Review and sign ↓", picked by Jacob 2026-08-04 over a jump button and a
   dual-role Sign & submit) — Code Standard 1's no-pressure concern, answered
   with navigation instead of a live-looking dead button. The real controls
   swap in at the pad; Clear only exists once there's ink (script-gated). */
@media (max-width: 720px) {
  .sticky-cta {
    position: sticky;
    bottom: 0;   /* fallback for browsers without sv/dv units */
    /* Jacob's 2026-08-05 walk: with the browser toolbar collapsed, the visual
       viewport is TALLER than the layout viewport that bottom:0 pins to, so
       the bar floated above the true bottom with page text showing beneath
       it. 100svh - 100dvh is 0 while the toolbar is up and exactly minus the
       toolbar's height once it collapses — pinning the bar to the DYNAMIC
       bottom. Only a real phone exercises this; desktop computes it to 0. */
    bottom: calc(100svh - 100dvh);
    z-index: 20;
    margin: 26px calc(-1 * clamp(20px, 4vw, 36px)) -36px;
    padding: 15px 18px calc(17px + env(safe-area-inset-bottom, 0px));   /* taller, Jacob 2026-08-05 */
    background: var(--white);
    border-top: 1.5px solid var(--tan2);
    border-radius: 0 0 18px 18px;
    box-shadow: 0 -6px 22px rgba(43, 36, 26, .12);
    gap: 10px;
  }
}
/* The white overhang (Jacob 2026-08-05, his suggestion after the svh/dvh
   attempt failed on real WebKit): iOS browsers reveal extra screen below the
   layout viewport when their toolbar collapses, and NO viewport-unit trick
   reliably re-pins a sticky bar there. So the bar's box simply extends 140px
   further down — whatever the chrome reveals is the bar's own white, never
   page text. Script-toggled OFF (.parked) once the card's bottom is on
   screen, so the overhang never juts past the card's end over the kiwi. */
@media (max-width: 720px) {
  .sticky-cta:not(.parked)::after {
    content: "";
    position: absolute;
    top: calc(100% - 18px);
    left: 0; right: 0;
    height: 140px;
    background: var(--white);
    z-index: -1;
  }
}
.cta-guide { display: flex; align-items: center; justify-content: center; width: 100%; cursor: pointer; }
/* Jacob's pick 2026-08-05 (mock round 6, "B — heavyweight", then "slightly
   bigger, more obvious arrow"): bold ink Roboto with a larger animated
   chevron — reads as instruction, not decoration. */
.cta-guide .guide-text { font: 700 15.5px/1.45 'Roboto', sans-serif; color: var(--ink); }
.cta-guide .chev-inline { display: inline-block; font-family: 'Capriola', sans-serif; font-size: 18px; color: var(--rust); animation: chev-bob 1.6s ease-in-out infinite alternate; }
@keyframes chev-bob { from { transform: translateY(-2px); } to { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .cta-guide .chev-inline { animation: none; } }
#cta-sign { display: none; width: 100%; align-items: center; gap: 10px; }
#cta-sign .btn-pill { flex: 1; white-space: nowrap; }
#cta-sign .link-btn { white-space: nowrap; flex: none; font-size: 13px; }

/* De-boxed 2026-07-16 (Jacob: "remove the highlight box around the authority to
   act and the [provider] adviser form, and bring those drop-downs closer
   together just so they take up less space"). The cream fill + hairline +
   18/20 padding are gone; the pill IS the affordance, so the box was doing
   nothing but eating vertical space on the page's densest screen. Margin
   26px -> 8px puts the two dropdowns in one tight cluster. */
.auth-box { margin: 0 0 8px; }
.auth-box .badge-muted { margin-bottom: 10px; }
.auth-box p { margin: 0; font-size: 14px; line-height: 1.7; }
/* Open state: the legal text no longer has a box to sit in, so it's inset to
   line up past the marker and given room to breathe before the next dropdown.
   :not(summary) catches every child — the provider box has an adviser line AND
   a declaration div after its summary, not just one paragraph. */
.auth-box[open] { margin-bottom: 18px; }
.auth-box[open] > *:not(summary) { padding-left: 14px; }

/* Collapsed <details> summaries (authority to act + the provider adviser form,
   which became a dropdown to match it 2026-07-16). The "tap to read the full
   wording you're signing" hint was dropped the same day (Jacob: the dropdown is
   self-evident), so a summary is now just the marker + its pill. Flex keeps the
   custom marker optically centred against the pill; the default list-item marker
   sits on the text baseline instead, which reads low against a pill. */
.auth-box > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
}
.auth-box > summary::-webkit-details-marker { display: none; }
.auth-box > summary::before {
  content: '';
  flex: none;
  width: 0; height: 0;
  border-left: 6px solid var(--rust);
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  transition: transform .18s ease;
}
.auth-box[open] > summary::before { transform: rotate(90deg); }
.auth-box > summary .badge-muted { flex: none; margin-bottom: 0; }
.auth-box[open] > summary { margin-bottom: 12px; }

/* The pad sits directly under the dropdowns now that the "one signature signs
   both" note is gone (Jacob 2026-07-16) — that adjacency IS the message, so
   keep it close. But not 8px: that's the BETWEEN-dropdowns gap, and reusing it
   here made "Your signature" read as part of the last dropdown rather than the
   next thing you do. 20px separates the sections while staying tight. */
#sign-area { margin-top: 20px; }
.sig-label-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sig-label-row label { font: 400 14px 'Capriola', sans-serif; }

.sig-wrap { position: relative; background: #fffdf9; border: 2px dashed var(--tan2); border-radius: 13px; overflow: hidden; }
.sig-wrap canvas { display: block; width: 100%; height: 220px; cursor: crosshair; touch-action: none; } /* 180→220, Jacob 2026-08-04 */
.sig-guideline { position: absolute; left: 22px; right: 22px; bottom: 36px; border-bottom: 1.5px solid var(--tan2); pointer-events: none; }
.sig-hint { position: absolute; left: 22px; bottom: 13px; font-size: 12px; color: var(--soft); pointer-events: none; }

.sig-toggle { display: inline-flex; gap: 4px; background: var(--sand); border: 2px solid var(--ink); border-radius: 999px; padding: 3px; margin-bottom: 12px; box-shadow: 0 3px 0 var(--ink); }
.sig-toggle-btn { border: none; background: none; padding: 7px 20px; border-radius: 999px; font: 400 13px 'Capriola', sans-serif; color: var(--ink); cursor: pointer; }
.sig-toggle-btn.active { background: var(--mango); color: var(--ink); }
.sig-type-input { display: block; width: 100%; height: 220px; box-sizing: border-box; border: none; background: transparent; text-align: center; font: 700 48px 'Caveat', cursive; color: var(--ink); outline: none; padding: 0 20px 40px; }
.sig-type-input::placeholder { font: 500 18px 'Roboto', sans-serif; color: var(--soft); }

/* Prominent card treatment so the required tick can't be missed
   (Jacob feedback 2026-07-09) — same ink-outline language as option buttons. */
.disclosure-check { display: flex; align-items: flex-start; gap: 12px; margin-top: 22px; padding: 14px 16px; background: var(--cream2, #fdf7ea); border: 2px solid var(--ink); border-radius: 14px; box-shadow: 0 3px 0 var(--ink); font-size: 14px; line-height: 1.6; color: var(--text); cursor: pointer; }
.disclosure-check input { margin: 3px 0 0; width: 20px; height: 20px; flex: none; accent-color: var(--mango); cursor: pointer; }
.disclosure-check a { color: var(--rust); text-decoration: underline; text-underline-offset: 2px; }

/* Click-wrap notice that replaced the disclosure tick (Jacob 2026-07-16).
   Sits between the pad and the submit button so it's read before the act.
   Deliberately --text, not --soft: it's the on-screen statement of what
   signing agrees to, so it can't be greyed-out small print. */
.sign-consent-line { margin: 14px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--text); }
.sign-consent-line a { color: var(--rust); text-decoration: underline; text-underline-offset: 2px; }

/* #dual-sign-note ("Your one signature signs both…") was removed 2026-07-16 —
   Jacob: the pad sitting directly under both dropdowns already implies it.
   Don't re-add a note here without asking; the fact it carried is structural
   (both documents above the pad) and is stated in the authority text itself. */

/* ============ Done ============ */

.done-page-content { position: relative; z-index: 1; padding: clamp(20px, 4vw, 48px) 20px 80px; display: flex; justify-content: center; }
.done-card {
  width: 100%; max-width: 640px; background: #fff; border: 1.5px solid var(--line-ink);
  border-radius: 20px; box-shadow: 0 3px 0 rgba(17,17,17,.06), 0 16px 38px rgba(43,36,26,.14); padding: 36px clamp(20px, 4vw, 40px) 38px;
  box-sizing: border-box;
}
.done-check {
  width: 52px; height: 52px; border-radius: 50%; background: var(--green); border: 2px solid var(--ink); color: #fff;
  display: grid; place-items: center; font-size: 24px; margin-bottom: 20px; box-shadow: 0 3px 0 var(--ink);
}
.done-card h1 { margin: 0 0 12px; font-size: clamp(26px, 3.2vw, 32px); line-height: 1.22; text-wrap: pretty; }
/* The one instruction on the close (2026-07-17): reads as a subheading so
   "check your email" can't be missed under the all-set headline. */
.done-card .done-sub { margin: 0 0 14px; font: 400 17.5px 'Capriola', sans-serif; color: var(--ink); line-height: 1.45; text-wrap: pretty; }
.done-card p.lead { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--soft); text-wrap: pretty; }

/* Stacked rail (the flex wraps once rail-side 300px + rail-content 420px no
   longer fit side by side): the rail becomes a short header block, so the
   absolutely-positioned kiwi (which lands on the heading there) + footer
   pill move out of it and re-render below the form card via .content-footer
   — form first, reassurance after (Jacob 2026-07-09). */
@media (max-width: 720px) {
  .rail-side { border-right: none; padding: 24px 20px 24px; }
  .rail-side img.rail-logo { margin-bottom: 22px; height: 30px; }
  .rail-side .rail-kiwi, .rail-side .rail-footer { display: none; }
  .content-footer { display: flex; }
  .rail-content { padding-top: 26px; }
}

/* ---- mobile pass: stack the hero, keep everything inside the viewport ---- */
@media (max-width: 620px) {
  .hero-row {
    flex-direction: column;
    align-items: stretch;
    gap: 26px;
    padding: 22px 18px 36px;
  }
  .hero-copy, .quiz-card, .quiz-card-standalone {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .hero-copy { text-align: left; }
  .hero-copy h1 { font-size: clamp(28px, 8vw, 34px); }
  /* Steps + kiwi share one row: steps 1–2 hold a single line (Jacob
     2026-07-09) — type steps down a notch and the kiwi flexes into the
     width left over (capped at +15% = 150px), bleeding a little into the
     right padding. Step 3 may still wrap. */
  .hero-bottom { gap: 12px; justify-content: space-between; }
  .hero-steps { font-size: 14px; gap: 12px; min-width: 0; }
  .hero-steps span.row { gap: 10px; }
  .hero-steps span.row:last-child { white-space: normal; }
  .step-badge { width: 24px; height: 24px; font-size: 12px; }
  .hero-bottom .hero-kiwi { flex: 0 1 150px; width: 150px; margin-right: -12px; }
  .how-it-works { padding: 40px 18px 52px; }
  .how-grid { flex-direction: column; align-items: stretch; }
  .how-card { flex: 1 1 auto; max-width: 100%; min-width: 0; margin-left: 12px; }
  .how-card .num { left: -12px; }
  .q-page { padding: 24px 16px 60px; }
  .rail-content { padding: 28px 18px 56px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001s !important; transition-duration: .001s !important; }
}


/* ===== Hardship landing redesign 2026-07-23 (hero questions, guide, footer) ===== */

  html { scroll-behavior: smooth; }

  /* ===== hero eyebrow + lead-in ===== */
  .hero-eyebrow{ display:block; font-family:'Caveat',cursive; font-weight:700; font-size:clamp(19px,1.9vw,22px); color:var(--rust); line-height:1; margin-bottom:7px; }
  .hero-lead{ font-size:14px; color:var(--soft); margin-bottom:-2px; }
  .hero-free{ margin-top:8px; font-size:14.5px; color:var(--text); }
  .free-mark{ background:var(--amberlite); padding:1px 7px; border-radius:6px; font-weight:500; box-decoration-break:clone; -webkit-box-decoration-break:clone; }

  /* curved band top AND bottom, so both edges divide with the same curve */
  .how-it-works{ margin-top:36px; margin-bottom:40px; border-bottom:1.5px solid var(--line); border-radius:32px; }

  /* desktop: pull the kiwi in closer to the questions and drop it so its feet line up with Q3 */
  @media (min-width:621px){
    .hero-bottom{ gap:20px; }
    .hero-bottom .hero-kiwi{ margin-bottom:-14px; }
  }

  /* smaller How-we-help tiles on mobile so it doesn't eat the page */
  @media (max-width:620px){
    .how-it-works{ margin-top:24px; padding:32px 18px 40px; }
    .how-it-works h2{ margin:0 auto 24px; }
    .how-grid{ gap:16px; }
    .how-card{ padding:18px 18px 16px; gap:6px; }
    .how-card .num{ width:32px; height:32px; font-size:14px; top:-14px; }
    .how-card p.title{ font-size:15px; margin-top:2px; }
    .how-card p.desc{ font-size:13px; line-height:1.55; }
    /* bigger, higher handwritten eyebrow on mobile */
    .hero-eyebrow{ font-size:21px; margin-bottom:9px; }
    /* kiwi next to the questions, nudged down + a touch closer */
    .hero-bottom{ justify-content:flex-start; align-items:center; gap:6px; }
    .hero-bottom .hero-kiwi{ flex:0 0 142px; width:142px; margin-right:0; margin-top:16px; }
  }

  /* small reassurance line under How it works */
  .how-note{ max-width:1200px; margin:34px auto 0; text-align:center; font-size:14.5px; color:var(--soft); }
  .how-note strong{ color:var(--text); font-weight:500; }

  /* ===== The guide (education) — ANZ-style two column ===== */
  .guide{ position:relative; z-index:1; max-width:1140px; margin:0 auto; padding:64px clamp(20px,4.5vw,56px) 8px; }
  .guide-title{ font-size:clamp(27px,3.1vw,36px); margin:0 0 30px; line-height:1.18; max-width:840px; }

  .guide-layout{ display:grid; grid-template-columns:230px minmax(0,1fr); gap:clamp(28px,3.4vw,52px); align-items:start; }

  /* left index (sticky) — a clean linked contents list, not pills */
  .guide-index{ position:sticky; top:24px; }
  .idx-toggle{
    display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
    background:none; border:none; padding:0; margin:0 0 18px; cursor:default; text-align:left;
    font:400 12px 'Capriola',sans-serif; letter-spacing:.07em; text-transform:uppercase; color:var(--rust);
  }
  .summary-chev{ display:none; width:17px; height:17px; flex:none; }
  .idx-list{ list-style:none; margin:0; padding:0; }
  .idx-list li{ margin-bottom:12px; }
  .idx-list li:last-child{ margin-bottom:0; }
  .idx-list a{
    display:inline-block; text-decoration:none; font:400 14px 'Capriola',sans-serif; color:var(--ink);
    border-bottom:1.5px solid var(--tan2); padding-bottom:2px;
    transition:color .14s, border-color .14s;
  }
  .idx-list a:hover{ color:var(--rust); border-color:var(--rust); }
  .idx-kiwi{ margin:28px auto 0; width:172px; display:block; filter:drop-shadow(0 8px 14px rgba(43,36,26,.14)); }

  /* right content — dotted divider from the index, dotted rules between sections */
  .guide-content{ min-width:0; max-width:720px; border-left:1.5px dotted var(--line); padding-left:clamp(28px,3.4vw,52px); }
  .guide-section{ padding-top:24px; margin-top:24px; border-top:1.5px dotted var(--line); scroll-margin-top:22px; }
  .guide-section:first-child{ padding-top:0; margin-top:0; border-top:none; }
  .guide-section h3{ font:400 22px 'Capriola',sans-serif; color:var(--ink); margin:0 0 13px; line-height:1.3; }
  .guide-section p{ font-size:16px; line-height:1.78; color:var(--text); margin:0 0 14px; }
  .guide-section p:last-child{ margin-bottom:0; }
  .guide-section a.inline{ color:var(--rust); text-decoration:underline; text-underline-offset:3px; }
  .guide-list{ margin:0 0 14px; padding:0; list-style:none; }
  .guide-list li{ position:relative; padding:6px 0 6px 26px; font-size:16px; line-height:1.6; color:var(--text); }
  .guide-list li::before{ content:''; position:absolute; left:2px; top:14px; width:7px; height:7px; border-radius:50%; background:var(--mango); border:1.5px solid var(--ink); }

  /* "where else to get help" link rows (ANZ-ish list of links) */
  .help-links{ margin:2px 0 0; padding:0; list-style:none; }
  .help-links li{ border-top:1.5px solid var(--tan2); }
  .help-links li:first-child{ border-top:none; }
  .help-links a{ display:flex; justify-content:space-between; align-items:baseline; gap:18px; text-decoration:none; padding:13px 2px; color:var(--ink); }
  .help-links a:hover .hl-name{ color:var(--rust); text-decoration:underline; text-underline-offset:3px; }
  .help-links .hl-name{ font:400 15.5px 'Capriola',sans-serif; white-space:nowrap; }
  .help-links .hl-desc{ font-size:13.5px; color:var(--soft); text-align:right; }

  /* talk-to-someone note (soft green, like the funnel's reassurance) */
  .talk-note{ margin:18px 0 0; padding:16px 18px; background:var(--green-ll); border:1px solid var(--green-l); border-radius:13px; font-size:14.5px; line-height:1.65; color:var(--green-d); }
  .talk-note a{ color:var(--green-d); font-weight:500; text-decoration:underline; text-underline-offset:2px; }

  .guide-disclaimer{ font-size:14px; color:var(--soft); line-height:1.65; margin:22px 0 0; }

  /* ===== gentle end CTA ===== */
  .guide-cta{ max-width:1140px; margin:44px auto 0; padding:0 clamp(20px,4.5vw,56px); }
  .guide-cta-inner{
    background:var(--cream2); border:2px solid var(--ink); border-radius:20px; box-shadow:0 4px 0 var(--ink);
    padding:26px 28px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px;
  }
  .guide-cta-inner p{ margin:0; font:400 19px 'Capriola',sans-serif; color:var(--ink); line-height:1.35; }
  .guide-cta-inner .btn-pill{ text-decoration:none; }

  /* ===== footer — brand beige-dark, no image ===== */
  .site-footer{
    position:relative; z-index:1; background:var(--cream2);
    border-top:1.5px solid var(--line); border-radius:32px 32px 0 0;
    margin-top:56px; overflow:hidden;
  }
  .footer-inner{ padding:52px clamp(20px,4.5vw,56px) 0; }
  .footer-banner{ display:block; width:100%; height:auto; margin-top:36px; }
  .footer-grid{ max-width:1100px; margin:0 auto; display:flex; flex-wrap:wrap; gap:36px 56px; justify-content:space-between; }
  .footer-brand{ flex:1 1 300px; max-width:440px; }
  .footer-brand img{ height:30px; margin-bottom:16px; }
  .footer-brand p{ font-size:13.5px; line-height:1.7; color:var(--text); margin:0 0 10px; opacity:.82; }
  .footer-brand .providers{ opacity:1; color:var(--ink); }
  .footer-social{ display:flex; gap:11px; margin-top:16px; }
  .footer-social a{ width:34px; height:34px; border:1.5px solid var(--ink); border-radius:50%; display:grid; place-items:center; color:var(--ink); transition:background .14s, color .14s; }
  .footer-social a:hover{ background:var(--ink); color:var(--tan2); }
  .footer-social svg{ width:16px; height:16px; }
  .footer-cols{ display:flex; flex-wrap:wrap; gap:34px 52px; }
  .footer-col h4{ font:400 12px 'Capriola',sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--rust); margin:0 0 13px; }
  .footer-col a{ display:block; font-size:14px; color:var(--ink); text-decoration:none; margin-bottom:10px; }
  .footer-col a:hover{ text-decoration:underline; text-underline-offset:3px; }
  .footer-col a span{ color:var(--soft); font-size:12.5px; }
  .footer-legal{ max-width:1100px; margin:38px auto 0; padding-top:20px; border-top:1.5px solid var(--line); font-size:12.5px; color:var(--soft); line-height:1.7; }

  @media (max-width:820px){
    .guide{ padding-top:48px; }
    .guide-layout{ grid-template-columns:1fr; gap:20px; }
    .guide-index{ position:static; }
    /* mobile only: contents as a subtle text dropdown, not a tile */
    .idx-toggle{
      display:inline-flex; width:auto; gap:8px;
      cursor:pointer; text-transform:none; letter-spacing:0; font:400 15px 'Capriola',sans-serif; color:var(--soft);
      padding:2px 2px 5px; border:none; background:none; box-shadow:none; border-radius:0;
      border-bottom:1.5px dotted var(--line); margin-bottom:0;
    }
    .summary-chev{ display:block; color:var(--rust); transition:transform .2s; }
    .idx-list{ display:none; }
    .guide-index.open .idx-list{ display:block; }
    .guide-index.open .idx-toggle{ margin-bottom:16px; }
    .guide-index.open .summary-chev{ transform:rotate(180deg); }
    .idx-kiwi{ display:none; }
    .guide-content{ max-width:100%; border-left:none; padding-left:0; }
    .guide-cta-inner{ flex-direction:column; align-items:stretch; text-align:left; }
    .footer-grid{ gap:30px; }
  }

/* ===== The under-$10k self-serve guide (2026-08-29) ===== */
/* The landing's guide treatment as a standalone destination screen (Jacob:
   the cards are the questions; this is not one). Single centred column, no
   index, centred title — approved via the Balance Gate mock. */
#balance-gate-block .guide { padding-top: 44px; }
/* Dotted rule under the title (Jacob 2026-09-01) — same 1.5px dotted line as
   the section separators, width capped to the content column so the edges
   line up, 24px each side to match the inter-section rhythm. */
#balance-gate-block .guide-title { text-align: center; max-width: 720px; margin: 0 auto 24px; border-bottom: 1.5px dotted var(--line); padding-bottom: 24px; }
#balance-gate-block .guide-content { border-left: none; padding-left: 0; margin: 0 auto; }