/* ==========================================================================
   Wealth Farming Advisory — site stylesheet
   ==========================================================================

   Tokens are lifted verbatim from brand/index.html, which extracted them from
   the client's physical business card. Do not eyeball new values — if a colour,
   spacing step or radius isn't here, it isn't in the system.

   Fonts are locked (confirmed 2026-08-07): Stardos Stencil display,
   Grand Hotel script, Poppins body.

   The logo is ICON ONLY. "Wealth Farming Advisory" is typeset, not artwork —
   the wordmark IS the type, which is why the display font is load-bearing.
   ========================================================================== */

:root {
  /* ---- palette: teal ---- */
  --teal-deepest: #000A10;
  --teal-core: #013F41;
  --teal-highlight: #2E7A76;

  /* ---- palette: gold ---- */
  --gold-shadow: #8E4719;
  --gold-core: #D1AC66;
  --gold-highlight: #FDD781;
  --tan-bar: #C4A666;

  /* ---- neutrals ---- */
  --paper: #F6F3EC;
  --ink: #14201F;

  /* ---- the locked metal recipe. For surfaces carrying NO text. ---- */
  --metal: linear-gradient(100deg, #8E4719 0%, #D1AC66 32%, #FDD781 50%, #D1AC66 68%, #8E4719 100%);
  /* Lit variant — same ramp, bronze ends dropped. For gold surfaces that carry
     dark text, or gold clipped INTO text. This is a measurement, not taste:
     ink #1A1204 on bronze #8E4719 is 2.7:1 and fails AA. */
  --metal-lit: linear-gradient(100deg, #D1AC66 0%, #FDD781 50%, #D1AC66 100%);

  /* ---- background ---- */
  --bg-glow: radial-gradient(120% 140% at 50% -10%, #2E7A76 0%, #013F41 45%, #000A10 100%);

  /* ---- surfaces on the teal ---- */
  --surf-recessed: rgba(0, 10, 16, .42);
  --surf-resting: rgba(255, 255, 255, .045);
  --surf-raised: rgba(255, 255, 255, .085);
  --edge-quiet: rgba(255, 255, 255, .10);
  --edge-gold: rgba(209, 172, 102, .28);
  --edge-gold-strong: rgba(209, 172, 102, .60);

  /* ---- text on teal ---- */
  --on-teal-1: #FFFFFF;
  --on-teal-2: rgba(255, 255, 255, .72);
  --on-teal-3: rgba(255, 255, 255, .50);
  --ink-on-gold: #1A1204;

  /* ---- functional signal only. Never decorative, never with white text. ---- */
  --error: #FF8266;

  /* ---- spacing: 4px base. Only these values. ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* ---- radius ---- */
  --r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px;

  /* ---- type ---- */
  --display: 'Stardos Stencil', Georgia, serif;
  --script: 'Grand Hotel', cursive;
  --body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- layout ---- */
  --wrap: 1140px;
  --nav-h: 64px;
}

/* ==========================================================================
   Reset / base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--on-teal-1);
  background: var(--teal-deepest);
  background-image: var(--bg-glow);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--gold-core); text-decoration: none; }
a:hover { color: var(--gold-highlight); }

/* Display headings are stencil CAPS, per brand/index.html .wf-h2. The tracking
   is POSITIVE: Stardos Stencil is built from broken letterforms, and negative
   tracking closes the breaks up until the face stops reading as a stencil. */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 var(--sp-4);
  text-transform: uppercase;
}

h1 { font-size: clamp(32px, 7vw, 60px); letter-spacing: .025em; }
h2 { font-size: clamp(26px, 4.5vw, 40px); letter-spacing: .025em; }
h3 { font-size: clamp(19px, 2.6vw, 24px); letter-spacing: .02em; }

p { margin: 0 0 var(--sp-4); color: var(--on-teal-2); }

.lede { font-size: 16px; color: var(--on-teal-2); max-width: 54ch; }

/* The sticky nav would otherwise eat the top of every anchored section. */
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

:focus-visible {
  outline: 3px solid var(--gold-highlight);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--sp-5); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }

.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 200;
  background: var(--gold-core); color: var(--ink-on-gold);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); font-weight: 600;
}
.skip-link:focus { top: var(--sp-4); }

/* ==========================================================================
   Brand lockup — icon + typeset wordmark
   ========================================================================== */

.lockup { display: inline-flex; align-items: center; gap: var(--sp-3); }
/* Size by HEIGHT, never a square box. The mark's viewBox is 773x898 (0.861),
   so forcing it into 38x38 letterboxes it to 32.7px wide and leaves 2.6px of
   dead space on each side — which makes the gap to the wordmark read as ~14.6px
   instead of the --sp-3 token. Optical alignment beats a round number here. */
.lockup__icon { height: 38px; width: auto; aspect-ratio: 773 / 898; flex: 0 0 auto; color: var(--gold-core); }

/* External-file variant, for pages that do not inline the <symbol> (the
   /start/* stubs). An <img src="logo.svg"> CANNOT receive currentColor — the
   SVG renders as its own document and resolves currentColor to black, which is
   near-invisible on the teal nav. A CSS mask paints `background` through the
   artwork's alpha instead, so the mark stays fully themeable while the SVG
   stays an external, cacheable file rather than 15 KB inlined seven times. */
.lockup__icon--file {
  display: block;
  background: currentColor;
  -webkit-mask: url(/brand/assets/logo.svg) center / contain no-repeat;
  mask: url(/brand/assets/logo.svg) center / contain no-repeat;
}
/* One line, all stencil, wide tracking. The script face (Grand Hotel) is
   deliberately NOT used here: at ~13px a flowing script mushes, and stacking
   stencil + script + a line break puts three typographic ideas in a 38px box.
   The script belongs in the hero, where it has room to sing. */
.lockup__word {
  display: block;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .14em;
  white-space: nowrap;
  color: var(--on-teal-1);
  /* letter-spacing adds trailing space after the final glyph; claw it back so
     the lockup's right edge is optically flush. */
  margin-right: -.14em;
}
.lockup__word em { font-style: normal; color: var(--gold-core); }

/* 23 characters on one line is wide, and it now shares the bar with a burger.
   Step the size and tracking down rather than wrapping, so the wordmark keeps
   its single-line silhouette all the way to 360px. */
@media (max-width: 900px) {
  .lockup__word { font-size: 17px; letter-spacing: .12em; margin-right: -.12em; }
}
@media (max-width: 560px) {
  .lockup__icon { height: 32px; }
  .lockup__word { font-size: 14px; letter-spacing: .09em; margin-right: -.09em; }
}
@media (max-width: 380px) {
  .lockup__icon { height: 28px; }
  .lockup__word { font-size: 12.5px; letter-spacing: .06em; margin-right: -.06em; }
}

/* ==========================================================================
   Navigation — sticky, "Start Now" always reachable
   ========================================================================== */

.nav {
  position: sticky; top: 0; z-index: 100;
  min-height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(0, 10, 16, .78);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--edge-quiet);
}
.nav__inner { display: flex; align-items: center; gap: var(--sp-5); width: 100%; }
.nav__links { display: flex; align-items: center; gap: var(--sp-5); margin-left: auto; }
.nav__link {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--on-teal-2); font-size: 15px; font-weight: 500; white-space: nowrap;
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--on-teal-1); }
/* Secondary errand, not an invitation — "Check status" is for a returning
   visitor and must not compete with the one metal button in the bar. */
.nav__link--quiet { font-size: 14px; color: var(--on-teal-3); }
.nav__link--quiet:hover { color: var(--on-teal-1); }
.nav__cta { margin-left: var(--sp-2); }

.nav__toggle {
  display: none; margin-left: auto; background: none; border: 0; cursor: pointer;
  padding: var(--sp-2); color: var(--on-teal-1);
}
.nav__toggle svg { width: 24px; height: 24px; }
/* The burger becomes an X when the menu is open. Both glyphs ship; CSS picks
   one, so there is no icon swap to get wrong in JavaScript. */
.nav__x { display: none; }
.nav__toggle[aria-expanded="true"] .nav__burger { display: none; }
.nav__toggle[aria-expanded="true"] .nav__x { display: block; }

/* ---- dropdown groups ------------------------------------------------------
   <details> so a submenu opens with zero JavaScript, is keyboard- and
   screen-reader-correct without ARIA gymnastics, and keeps every sub-link in
   the DOM for crawlers even while collapsed. The shared name= attribute makes
   the groups an exclusive accordion. */
/* The panels resolve against .nav__links, NOT against their own trigger. A
   panel anchored to its trigger has no way to know how much room is left before
   the viewport edge, so the three-column Services panel overflowed to the right
   at every width below ~1300px. Hanging every panel from the right edge of the
   bar makes overflow structurally impossible. */
.nav__links { position: relative; }
.nav__group { position: static; }
.nav__summary { cursor: pointer; list-style: none; }
.nav__summary::-webkit-details-marker { display: none; }
.nav__summary[data-within="true"] { color: var(--on-teal-1); }
.nav__chev { width: 15px; height: 15px; transition: transform .2s ease; opacity: .7; }
.nav__group[open] .nav__chev { transform: rotate(180deg); }
.nav__group[open] > .nav__summary { color: var(--on-teal-1); }

.nav__panel {
  position: absolute; top: calc(100% + var(--sp-4)); z-index: 90;
  /* THE SAFE DEFAULT, and the no-JavaScript fallback: hang from the right edge
     of the bar, where overflow is structurally impossible at any width.
     assets/chrome.js then moves each panel under its OWN trigger and clamps it
     to the viewport. That split is deliberate — a panel anchored to its trigger
     cannot know in CSS how much room is left before the screen ends, so the
     stylesheet takes the option that can never crop and the script takes the
     one that looks right. */
  right: 0; left: auto;
  min-width: 260px;
  max-width: min(calc(100vw - var(--sp-6)), 1040px);
  /* Solid, not translucent. At .97 alpha a 60px stencil H1 still ghosted
     through the panel and made the link list hard to read. */
  background: var(--teal-deepest);
  background-image: linear-gradient(180deg, rgba(46,122,118,.10), rgba(46,122,118,0) 60%);
  border: 1px solid var(--edge-gold);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
/* width:max-content is load-bearing. An absolutely-positioned panel is
   shrink-to-fit, and a shrink-to-fit box containing a WRAPPING flex container
   resolves its width to the widest single item — which collapsed the three
   Services columns into one tall stack. max-content asks for the unwrapped row;
   max-width:100% then lets it wrap only when the panel's own cap forces it. */
.nav__cols {
  display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-7);
  width: max-content; max-width: 100%; padding: 0;
}
.nav__col { min-width: 180px; }
.nav__col-head {
  display: block; margin-bottom: var(--sp-3); padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--edge-quiet);
  font-family: var(--display); font-size: 14px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gold-core);
}
.nav__col-head:hover { color: var(--gold-highlight); }
.nav__panel ul { list-style: none; margin: 0; padding: 0; }
.nav__panel li { margin: 0; }
.nav__panel li a {
  display: block; padding: var(--sp-2) 0;
  font-size: 14.5px; color: var(--on-teal-2); white-space: nowrap;
}
.nav__panel li a:hover, .nav__panel li a[aria-current="page"] { color: var(--on-teal-1); }
.nav__badge {
  margin-left: var(--sp-2); padding: 1px var(--sp-2);
  border-radius: var(--r-pill); border: 1px solid var(--edge-gold);
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold-core); vertical-align: 1px;
}

/* 1000px, not the usual 900. Measured, not guessed: the lockup is a
   23-character stencil wordmark — it IS the logo, so it cannot shrink to an
   icon to buy bar space — and it alone runs 328px. Bar + links need 891px, and
   the wrap only offers that much at ~940px viewport. 1000px leaves ~60px of
   slack so a font fallback or a longer label cannot tip it into a wrap. */
@media (max-width: 1000px) {
  .nav__toggle { display: block; }
  .nav__links {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--teal-deepest);
    border-bottom: 1px solid var(--edge-gold);
    padding: var(--sp-3) var(--sp-5) var(--sp-6);
    margin-left: 0;
    /* With submenus the menu can exceed the viewport, so it scrolls inside
       itself. Without this the last links and the CTA are simply unreachable. */
    max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; overscroll-behavior: contain;
    transform: translateY(-120%);
    transition: transform .22s ease;
  }
  .nav__links[data-open="true"] { transform: translateY(0); }
  .nav__link { padding: var(--sp-4) 0; border-bottom: 1px solid var(--edge-quiet); font-size: 17px; }
  .nav__summary { display: flex; align-items: center; justify-content: space-between; }
  .nav__chev { width: 18px; height: 18px; }

  /* Inline accordion, not a floating panel: on a phone the panel IS the menu. */
  .nav__panel {
    position: static; transform: none; min-width: 0;
    background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    border: 0; border-radius: 0; box-shadow: none;
    padding: var(--sp-2) 0 var(--sp-4);
  }
  .nav__cols { flex-direction: column; gap: var(--sp-5); }
  .nav__col { min-width: 0; }
  .nav__panel li a { padding: var(--sp-3) 0 var(--sp-3) var(--sp-4); white-space: normal; font-size: 16px; }
  .nav__link--quiet { font-size: 16px; }
  .nav__cta { margin: var(--sp-5) 0 0; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--body); font-size: 16px; font-weight: 600;
  padding: var(--sp-3) var(--sp-5);
  min-height: 46px;              /* thumb target — seminar audience is on phones */
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer; text-align: center;
  transition: transform .12s ease, filter .18s ease;
  touch-action: manipulation;
}
.btn:active { transform: translateY(1px); }

/* Gold surfaces carrying dark text use --metal-lit, not --metal. See token note. */
.btn--primary { background: var(--metal-lit); color: var(--ink-on-gold); box-shadow: 0 6px 20px rgba(0,0,0,.28); }
.btn--primary:hover { filter: brightness(1.06); color: var(--ink-on-gold); }

.btn--ghost { background: var(--surf-resting); color: var(--on-teal-1); border-color: var(--edge-gold); }
.btn--ghost:hover { background: var(--surf-raised); color: var(--on-teal-1); }

.btn--block { width: 100%; }

/* ==========================================================================
   Sections, cards, proof
   ========================================================================== */

.section { padding: var(--sp-9) 0; }
.section--tight { padding: var(--sp-7) 0; }

/* Band rhythm is 96px desktop / 48px mobile. 96px of air above and below every
   band on a 640px-tall handset costs a third of the viewport per section. */
@media (max-width: 720px) {
  .section { padding: var(--sp-7) 0; }
  .section--tight { padding: var(--sp-6) 0; }
}

.section-head { margin-bottom: var(--sp-7); }
.section-head h2 { margin-bottom: var(--sp-3); }
.section-head .lede { margin-bottom: 0; }

/* The SCRIPT eyebrow — Grand Hotel, used where the brand wants warmth. */
.eyebrow {
  font-family: var(--script);
  font-size: 22px;
  color: var(--gold-core);
  margin: 0 0 var(--sp-2);
}

/* MOTIF 03 (lead-in variant) — the UPPERCASE section eyebrow. Distinct from
   .eyebrow above: this one is a structural label, not a flourish, and it is the
   one that carries the gold seam lead-in rule. */
.kicker {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-highlight); margin: 0 0 var(--sp-3);
}
.kicker::before {
  content: ""; display: block; width: 44px; height: 2px; flex: none;
  background: linear-gradient(90deg, var(--gold-highlight), var(--gold-core) 45%, rgba(142,71,25,0));
}

.card {
  background: var(--surf-resting);
  border: 1px solid var(--edge-quiet);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}
.card:hover { border-color: var(--edge-gold); background: var(--surf-raised); }

.grid { display: grid; gap: var(--sp-5); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* Inline proof — trust sits next to CTAs, never in an About backwater. */
.proof { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--surf-recessed);
  border: 1px solid var(--edge-gold);
  font-size: 13px; font-weight: 500; color: var(--on-teal-2);
}
/* At 360-390px a default chip runs ~165-200px, so three proof chips cost three
   rows and push the first real section most of a screen further down. Tightened
   just enough to pair them up. Proof chips are reassurance, not headlines. */
@media (max-width: 480px) {
  .proof { gap: var(--sp-2); }
  .proof .chip { font-size: 12px; padding: var(--sp-1) var(--sp-3); }
}

.stats { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); margin-top: var(--sp-6); }
@media (min-width: 640px) { .stats { grid-template-columns: repeat(3, 1fr); } }

.stat {
  background: var(--surf-recessed); border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r-md); padding: var(--sp-5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  display: flex; flex-direction: column;
}
.stat__value {
  font-family: var(--display); font-size: clamp(30px, 5vw, 44px); font-weight: 700; line-height: 1;
  background: var(--metal-lit); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold-core);
}
.stat__label { font-size: 14px; color: var(--on-teal-3); margin-top: var(--sp-2); }

/* ==========================================================================
   Motifs — the brand's decorative vocabulary, numbered as in brand/index.html.
   All of these animate transform/opacity ONLY, so they stay on the compositor:
   no layout, no paint. That matters on the mid-range Android these visitors are
   actually holding.
   ========================================================================== */

/* ---- MOTIF 02 — Furrow Field. ONE PER VIEWPORT. Two fields on one screen read
        as interference, not depth. It belongs in a page's hero. ---- */
.furrow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
/* Each ring runs TWO independent animations:
     drift — the slow breathing scale/rise
     swell — an opacity pulse, phase-offset per ring so brightness travels
             outward from the centre. That outward travel is the point: it reads
             as growth radiating, which is the one place the farming metaphor is
             allowed to live at this scale.
   Irregular diameters (not an even series) stop it reading as a bullseye. */
.furrow i {
  position: absolute; left: 50%; top: 100%; width: var(--d); aspect-ratio: 1;
  border: 1px solid var(--ring, rgba(46,122,118,.45)); border-radius: 50%;
  transform: translate(-50%,-50%);
  animation:
    drift var(--dur, 30s) ease-in-out infinite alternate,
    swell var(--pulse, 14s) ease-in-out infinite;
  animation-delay: var(--delay, 0s), var(--delay, 0s);
}
.furrow i:nth-child(1) { --d:  620px; --dur: 30s; --delay:  0s;   --ring: rgba(46,122,118,.46); }
.furrow i:nth-child(2) { --d:  940px; --dur: 37s; --delay: -2.6s; --ring: rgba(46,122,118,.34); }
/* One ring picks up gold. It is the only warm note in the field, and it sits
   third so the eye finds it after the teal rather than instead of it. */
.furrow i:nth-child(3) { --d: 1260px; --dur: 43s; --delay: -5.2s; --ring: rgba(209,172,102,.20); }
.furrow i:nth-child(4) { --d: 1660px; --dur: 49s; --delay: -7.8s; --ring: rgba(46,122,118,.18); }
.furrow i:nth-child(5) { --d: 2120px; --dur: 56s; --delay: -10.4s; --ring: rgba(46,122,118,.11); }

@keyframes drift {
  from { transform: translate(-50%,-50%) scale(1); }
  to   { transform: translate(-50%,-53%) scale(1.045); }
}
/* Shallow on purpose: the field should feel alive, not blink. */
@keyframes swell {
  0%, 100% { opacity: .72; }
  50%      { opacity: 1; }
}

/* ---- MOTIF 03 — Seam Rule ---- */
.seam {
  border: 0; height: 2px; width: 180px; max-width: 60%; margin: var(--sp-5) 0;
  background: linear-gradient(90deg,
    transparent 0%, rgba(142,71,25,.7) 10%, var(--gold-core) 34%,
    var(--gold-highlight) 50%, var(--gold-core) 66%, rgba(142,71,25,.7) 90%, transparent 100%);
}

/* ---- MOTIF 04 — Corner Anchor. Bottom-right = the reading-exit corner. ---- */
.anchor { position: relative; overflow: hidden; }
.anchor::before, .anchor::after {
  content: ""; position: absolute; bottom: 0; right: 0; pointer-events: none;
  transition: width .32s cubic-bezier(.2,.7,.3,1), height .32s cubic-bezier(.2,.7,.3,1);
}
.anchor::before { width: 96px; height: 3px; background: linear-gradient(90deg, rgba(142,71,25,0), var(--gold-core) 55%, var(--gold-highlight)); }
.anchor::after  { width: 3px; height: 52px; background: linear-gradient(0deg, var(--gold-highlight), var(--gold-core) 45%, rgba(142,71,25,0)); }
.anchor:hover::before { width: 132px; }
.anchor:hover::after  { height: 70px; }

/* ---- MOTIF 05 — Coin Stack. Renders COMPLETE with no JS; the .go class only
        replays it as an entrance, so a failed script costs an animation, not
        the content. ---- */
.stack { display: flex; flex-direction: column; gap: 5px; margin-top: auto; padding-top: var(--sp-4); }
.stack span { display: block; height: 4px; border-radius: 2px; background: var(--metal-lit); transform-origin: left center; }
.stack span:nth-child(1) { width: 34%; }
.stack span:nth-child(2) { width: 54%; }
.stack span:nth-child(3) { width: 76%; }
.stack span:nth-child(4) { width: 100%; }
.stack.go span { animation: build .7s cubic-bezier(.2,.8,.25,1) both; }
.stack.go span:nth-child(1) { animation-delay: .30s; }
.stack.go span:nth-child(2) { animation-delay: .20s; }
.stack.go span:nth-child(3) { animation-delay: .10s; }
@keyframes build { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---- MOTIF 06 — Sprout Tick, used as every list bullet on the site ---- */
.tick { width: 12px; height: 12px; flex: none; color: var(--gold-core); margin-top: 6px; }
.chip .tick { margin-top: 0; }

/* ==========================================================================
   Content-page furniture — the shapes every service and trust page is built
   from. Rendered by scripts/build-pages.mjs; nothing here is page-specific.
   ========================================================================== */

/* ---- page hero. Shorter than the homepage's: this visitor already chose a
        branch, so the job is to confirm they are in the right place and get
        out of the way, not to sell the firm again. ---- */
.page-hero { position: relative; overflow: hidden; padding: var(--sp-8) 0 var(--sp-7); }
.page-hero__inner { position: relative; z-index: 1; }
.page-hero h1 { margin-bottom: var(--sp-3); max-width: 18ch; }
.page-hero .eyebrow { font-size: clamp(19px, 3.4vw, 26px); margin-bottom: var(--sp-4); }
.page-hero .lede { font-size: 16.5px; margin-bottom: var(--sp-6); max-width: 58ch; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-5); }
@media (max-width: 520px) { .page-hero__actions .btn { width: 100%; } }
@media (max-width: 720px) { .page-hero { padding: var(--sp-6) 0 var(--sp-6); } }

/* ---- numbered offering cards. The number is a wayfinding device — it makes a
        long list feel finite rather than endless — so it is aria-hidden and the
        heading carries the meaning. ---- */
.offer-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.offer {
  position: relative;
  background: var(--surf-resting);
  border: 1px solid var(--edge-quiet);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}
.offer:hover { border-color: var(--edge-gold); background: var(--surf-raised); }
.offer__n {
  display: block; margin-bottom: var(--sp-3);
  font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: .22em;
  background: var(--metal-lit); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold-core);
}
.offer h3 { font-size: 21px; margin-bottom: var(--sp-3); }
.offer p { font-size: 15px; margin-bottom: var(--sp-4); }
.offer p:last-child { margin-bottom: 0; }

/* ---- tick lists. The sprout tick is the site's only bullet. ---- */
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.ticks li { display: flex; gap: var(--sp-2); font-size: 14px; line-height: 1.5; color: var(--on-teal-2); }

/* ---- numbered process. A real <ol>, so the order is in the markup and not
        only in the styling. ---- */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0;
  display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.step { counter-increment: step; position: relative; padding-top: var(--sp-6); }
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: .22em;
  color: var(--gold-core);
}
.step::after {
  content: ""; position: absolute; top: 26px; left: 0; width: 28px; height: 2px;
  background: linear-gradient(90deg, var(--gold-core), rgba(142,71,25,0));
}
.step h3 { font-size: 19px; margin-bottom: var(--sp-2); }
.step p { font-size: 14.5px; margin: 0; }

/* ---- callout. Used for the paragraphs that exist to be believed rather than
        skimmed — the misselling note, the market-risk note. ---- */
.callout {
  background: var(--surf-recessed);
  border: 1px solid var(--edge-gold);
  border-radius: var(--r-lg);
  padding: var(--sp-7) var(--sp-6);
}
.callout h2 { font-size: clamp(23px, 3.4vw, 32px); margin-bottom: var(--sp-4); }
.callout p { max-width: 68ch; font-size: 15.5px; }
.callout p:last-of-type { margin-bottom: 0; }
.callout .btn { margin-top: var(--sp-5); }
@media (max-width: 480px) { .callout { padding: var(--sp-6) var(--sp-5); } }

/* ---- founder plate ---- */
.founder { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 860px) { .founder { grid-template-columns: 260px 1fr; gap: var(--sp-7); } }
/* TODO(client): a real photograph of Nikhil (4:5, >=560px wide) replaces this.
   Until one exists it is a deliberately obvious monogram plate — a placeholder
   that admits to being one, rather than a grey silhouette pretending. */
.portrait {
  max-width: 260px; aspect-ratio: 4 / 5; border-radius: var(--r-lg);
  background: var(--surf-recessed); border: 1px solid var(--edge-gold);
  display: grid; place-items: center; position: relative; overflow: hidden;
}
.portrait b {
  font-family: var(--display); font-weight: 700; font-size: 64px; letter-spacing: .04em;
  background: var(--metal-lit); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold-core);
}
.founder__name { margin-bottom: var(--sp-1); }
.founder__role { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-core); margin-bottom: var(--sp-5); }
.founder p { max-width: 66ch; }

/* Registration numbers are the whole point of the block — monospace so a digit
   can be read off and checked without transcription errors. */
.creds { list-style: none; margin: var(--sp-5) 0 0; padding: 0; max-width: 260px; }
.creds li {
  padding: var(--sp-2) 0; border-top: 1px solid var(--edge-quiet);
  font-size: 12.5px; line-height: 1.5; color: var(--on-teal-2);
  font-variant-numeric: tabular-nums;
}

/* ---- awards ---- */
.awards { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.award {
  background: var(--surf-recessed); border: 1px solid var(--edge-gold);
  border-radius: var(--r-lg); padding: var(--sp-6);
}
.award__year {
  font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: .22em;
  color: var(--gold-core); margin: 0 0 var(--sp-3);
}
.award h3 { font-size: 19px; margin-bottom: var(--sp-3); }
.award__by { font-size: 13px; color: var(--on-teal-3); margin: 0; }

.prose p { max-width: 68ch; }
.section-cta { margin-top: var(--sp-7); }
.footnote { margin-top: var(--sp-5); font-size: 13px; line-height: 1.6; color: var(--on-teal-3); max-width: 72ch; }
.closer__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-bottom: var(--sp-6); }
@media (max-width: 520px) { .closer__actions .btn { width: 100%; } }

/* ==========================================================================
   Partner panel — who sits behind the desk. Recurs on every service page:
   it is the trust signal a seminar attendee actually checks.
   ========================================================================== */

.partners { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
@media (min-width: 620px) { .partners { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 920px) { .partners { grid-template-columns: repeat(6, 1fr); } }
/* TODO(client): partner logo files not supplied. Typeset names are the honest
   placeholder — a greyed box would read as a broken image. */
.partner {
  display: grid; place-items: center; text-align: center; min-height: 76px;
  padding: var(--sp-3); border: 1px solid var(--edge-quiet); border-radius: var(--r-md);
  background: var(--surf-recessed);
  font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--on-teal-2);
}

/* ==========================================================================
   FAQ — every service page carries one, with matching FAQPage JSON-LD.
   Keep the DOM and the schema byte-identical: schema without visible content
   is a Google structured-data policy violation, not a shortcut.
   ========================================================================== */

.faq { display: grid; gap: var(--sp-5); }
@media (min-width: 860px) { .faq { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }
.faq > div { border-top: 1px solid var(--edge-quiet); padding-top: var(--sp-4); }
/* Questions stay in BODY type, sentence case — the one deliberate exception to
   the stencil-caps heading rule. Stencil caps at 17px is a display face doing a
   paragraph's job: it costs comprehension, and this block exists to be read
   (and quoted by answer engines). */
.q { font-family: var(--body); font-size: 16.5px; font-weight: 600; text-transform: none; letter-spacing: 0; line-height: 1.4; color: var(--on-teal-1); margin: 0 0 var(--sp-2); }
.faq p { font-size: 14.5px; margin: 0; }

/* ==========================================================================
   Closing CTA band — placement 3 of the five locked CTA positions.
   ========================================================================== */

.closer { text-align: center; }
.closer .seam { margin-inline: auto; }
.closer h2 { margin-bottom: var(--sp-5); }

/* ==========================================================================
   Placeholder-form banner
   Visible ONLY while a CTA still points at a /start/* stub. Driven by the
   data-form-status attribute forms.js writes, so it disappears by itself the
   moment a real ODIV Engage URL is registered — nothing to remember to remove.
   ========================================================================== */

.stub-note {
  background: var(--surf-recessed);
  border: 1px dashed var(--edge-gold-strong);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  color: var(--on-teal-2);
  font-size: 15px;
}
.stub-note strong { color: var(--gold-highlight); }

/* Visibility, in three steps — and the order is load-bearing.
   The /start/* stub pages carry a .stub-note but have NO registry CTA at all
   (their actions are a tel: link and a back link), so a naive
   `hide by default, reveal on placeholder` pair would blank the one message
   those seven pages exist to deliver. Gating the HIDE on the page having a
   [data-form] element is what keeps both cases correct:
     no registry CTA on the page  -> always shown  (the stubs)
     registry CTAs, all live      -> hidden        (post-launch, automatically)
     registry CTAs, any placeholder -> shown       (today) */
.stub-note { display: block; margin-top: var(--sp-5); }
body:has([data-form]) .stub-note { display: none; }
body:has([data-form-status="placeholder"]) .stub-note { display: block; }

/* ==========================================================================
   Footer — legal entity + CIN, per PRD §2
   ========================================================================== */

.footer {
  border-top: 1px solid var(--edge-quiet);
  background: rgba(0, 10, 16, .55);
  padding: var(--sp-8) 0 var(--sp-7);
  margin-top: var(--sp-9);
}
/* 150px minimum, not 200px: the six columns then sit evenly across the 1092px
   wrap at ~182px each instead of wrapping 5-then-1. A footer link may wrap to
   two lines at that width; a lopsided grid is the worse of the two. */
.footer__cols { display: grid; gap: var(--sp-6) var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
/* h3 AND h4: the last heading before the footer is usually the closer's h2, so
   the column labels have to be h3 — h2 -> h4 is a skipped level, which is both
   an audit failure and a real screen-reader outline bug. Styling both means the
   markup can use whichever level keeps that page's outline intact. */
.footer h4, .footer h3 {
  font-family: var(--body); font-weight: 600; font-size: 13px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--on-teal-3); margin: 0 0 var(--sp-3);
}
.footer ul { list-style: none; margin: 0; padding: 0; }
/* Footer link lists are the classic phone mis-tap. 21px text rows sitting 8px
   apart become 33px rows sitting 12px apart — still compact, no longer a lottery. */
.footer li { margin-bottom: var(--sp-3); }
.footer li a { display: inline-block; padding: 6px 0; }
.footer a { color: var(--on-teal-2); font-size: 15px; }
.footer a:hover { color: var(--on-teal-1); }
.footer .lockup { margin-bottom: var(--sp-4); }
.footer__note { font-size: 13.5px; color: var(--on-teal-3); line-height: 1.6; }

/* Icons — Lucide, the set shadcn/ui ships. 20px is the resting size; they sit
   next to 15px body text and a 24px glyph overpowers it. */
.ico { width: 20px; height: 20px; flex: none; }
.ico--sm { width: 16px; height: 16px; }

.socials { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.social {
  display: grid; place-items: center;
  width: 40px; height: 40px;                 /* thumb target, not a 20px glyph */
  border-radius: var(--r-pill);
  border: 1px solid var(--edge-quiet);
  background: var(--surf-recessed);
  color: var(--on-teal-2);
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.social:hover { color: var(--gold-highlight); border-color: var(--edge-gold-strong); background: var(--surf-raised); }

.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  margin-bottom: var(--sp-3); font-size: 15px; color: var(--on-teal-2); line-height: 1.5;
}
.contact-list .ico { color: var(--gold-core); margin-top: 2px; }
/* The email is 34 characters in a ~180px column. Without this it is clipped at
   the column edge — the address is visibly truncated, which on a financial
   site reads as a broken page rather than a styling choice. */
.contact-list a, .contact-list span { overflow-wrap: anywhere; }
.contact-list a { display: inline-block; padding: 2px 0; }
.contact-list li { min-width: 0; }

/* Its own band above the columns, not a cell inside them — a 328px wordmark
   forced the grid to give it two tracks, which opened a tall empty well beneath
   it and pushed the six link columns into a ragged 3-then-4 wrap. */
.footer__brand {
  display: flex; flex-wrap: wrap; gap: var(--sp-5);
  align-items: flex-end; justify-content: space-between;
  padding-bottom: var(--sp-7); margin-bottom: var(--sp-7);
  border-bottom: 1px solid var(--edge-quiet);
}
.footer__brand .footer__note { margin: var(--sp-4) 0 0; }
.socials { margin-top: 0; }

.legal {
  margin-top: var(--sp-7); padding-top: var(--sp-5);
  border-top: 1px solid var(--edge-quiet);
  font-size: 12.5px; line-height: 1.7; color: var(--on-teal-3);
}
.legal strong { color: var(--on-teal-2); }

/* ==========================================================================
   Calculators
   ==========================================================================

   Sizing here is driven by one fact: the visitor is a seminar attendee on a
   mid-range Android, one-handed, quite possibly over fifty. Every control is
   at least 48px, the slider thumb is 32px, and the value itself is tappable
   so nobody has to land a slider on an exact rupee figure.
   ========================================================================== */

.page-hero--calc { padding-bottom: var(--sp-5); }

.calc { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 900px) {
  /* The answer stays on screen while the inputs are moved. On a phone it sits
     below them, which is correct there — you cannot see both at once anyway,
     and putting the result first would mean scrolling up to change anything. */
  .calc { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: var(--sp-7); }
  .calc__out { position: sticky; top: calc(var(--nav-h) + var(--sp-4)); }
}

.calc__inputs { display: flex; flex-direction: column; gap: var(--sp-5); }

.field {
  background: var(--surf-resting);
  border: 1px solid var(--edge-quiet);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.field__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.field__label { font-size: 14.5px; color: var(--on-teal-2); }

/* The readout is the primary input, not a label. It is contenteditable, so it
   needs to look tappable and give obvious focus feedback. */
.field__val {
  font-family: var(--display); font-size: clamp(19px, 4.4vw, 24px); font-weight: 700;
  letter-spacing: .01em; white-space: nowrap;
  color: var(--gold-highlight);
  /* 8px vertical, not 4: at 4px the tappable readout measured 39px tall, under
     the 44px minimum. The negative margin cancels the padding so the extra
     height costs no layout. */
  padding: var(--sp-2) var(--sp-3); margin: calc(var(--sp-2) * -1) calc(var(--sp-3) * -1);
  border-radius: var(--r-sm);
  border-bottom: 1px dashed var(--edge-gold);
  cursor: text; font-variant-numeric: tabular-nums;
}
.field__val:hover { background: var(--surf-raised); }
.field__val:focus { outline: 2px solid var(--gold-highlight); outline-offset: 1px; background: var(--surf-recessed); }

.field__control { display: flex; align-items: center; gap: var(--sp-4); }
.field__help { margin: var(--sp-3) 0 0; font-size: 12.5px; line-height: 1.5; color: var(--on-teal-3); }

/* 48px, and round. Press-and-hold is bound to these, so they get held down
   rather than tapped — a small target is genuinely painful here. */
.stepper {
  flex: 0 0 auto; width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%; cursor: pointer;
  background: var(--surf-recessed);
  border: 1px solid var(--edge-gold);
  color: var(--gold-core);
  touch-action: manipulation;         /* no double-tap-to-zoom delay */
  -webkit-user-select: none; user-select: none;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.stepper:hover { background: var(--surf-raised); border-color: var(--edge-gold-strong); color: var(--gold-highlight); }
.stepper:active { transform: scale(.94); background: var(--surf-raised); }
.stepper svg { width: 22px; height: 22px; }

/* ---- slider ----
   Styled per-engine because there is no cross-browser shorthand for a range
   track and thumb. The thumb is 32px — well past the 24px most design systems
   use — because it is dragged with a thumb, not a mouse. */
.slider {
  flex: 1 1 auto; min-width: 0;
  -webkit-appearance: none; appearance: none;
  /* 44px of touch height for a 6px track — the extra is invisible padding that
     makes the drag forgiving. WebKit centres the track in the element box, so
     the thumb offset below is unaffected. */
  height: 44px; background: transparent; cursor: pointer;
  touch-action: pan-y;                /* let a vertical swipe still scroll */
}
.slider::-webkit-slider-runnable-track {
  height: 6px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--gold-shadow), var(--gold-core));
}
.slider::-moz-range-track {
  height: 6px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--gold-shadow), var(--gold-core));
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 32px; height: 32px; margin-top: -13px;
  border-radius: 50%; background: var(--metal-lit);
  border: 2px solid var(--teal-deepest);
  box-shadow: 0 3px 10px rgba(0,0,0,.45);
}
.slider::-moz-range-thumb {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--gold-highlight); border: 2px solid var(--teal-deepest);
  box-shadow: 0 3px 10px rgba(0,0,0,.45);
}
.slider:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--gold-highlight); outline-offset: 2px; }
.slider:focus-visible::-moz-range-thumb { outline: 3px solid var(--gold-highlight); outline-offset: 2px; }

/* ---- results ---- */
.results {
  background: var(--surf-recessed);
  border: 1px solid var(--edge-gold-strong);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}
.results__label { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--on-teal-3); margin: 0 0 var(--sp-3); }
/* Sized big and then shrunk by JS if a nine-digit corpus will not fit. A
   half-visible number is worse than a smaller one. */
.results__value {
  font-family: var(--display); font-size: clamp(34px, 8vw, 46px); font-weight: 700;
  line-height: 1.05; letter-spacing: .01em; white-space: nowrap;
  /* Overflow is hidden as the last line of defence. The script shrinks the type
     to fit first; this only matters if the script has not run yet, and a
     clipped number is still better than one spilling outside the card. */
  overflow: hidden;
  background: var(--metal-lit); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold-core);
  margin: 0 0 var(--sp-2);
}
.results__sub { font-size: 14px; color: var(--on-teal-2); margin: 0 0 var(--sp-5); }
.results__rows { margin-bottom: var(--sp-5); }
.rrow {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) 0; border-top: 1px solid var(--edge-quiet);
  font-size: 13.5px; color: var(--on-teal-2); line-height: 1.4;
}
/* The LABEL is the flexible item: it wraps and gives up width first, because a
   wrapped label is readable and a wrapped rupee figure is not.
   The VALUE keeps its natural width and stays on one line, so when the pair no
   longer fits, the ROW overflows — which is the signal wfa-calc.js measures
   before scaling the value down to fit. Squeezing the value here instead would
   hide the overflow and leave the script nothing to detect. */
.rrow span { flex: 1 1 auto; min-width: 0; }
.rrow b {
  flex: 0 0 auto;
  color: var(--on-teal-1); font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums; text-align: right;
}
.rrow--strong { color: var(--on-teal-1); }
.rrow--strong b { color: var(--gold-highlight); }
.results__cta { margin-top: var(--sp-2); }
.results__note { margin: var(--sp-3) 0 0; font-size: 11.5px; line-height: 1.5; color: var(--on-teal-3); text-align: center; }

/* Before wfa-calc.js runs there is no answer to show. Say so, rather than
   leaving an em-dash that looks like a broken page. */
.calc:not([data-live]) .results__value::after {
  content: " "; }
.calc:not([data-live]) .results__sub::before {
  content: "Move a slider to see your result.";
}

.assumptions {
  margin-top: var(--sp-7); padding-top: var(--sp-6);
  border-top: 1px solid var(--edge-quiet);
}
.assumptions h2 { font-size: clamp(19px, 2.6vw, 23px); margin-bottom: var(--sp-4); }
.assumptions .ticks li { max-width: 78ch; }

.formula {
  margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5);
  background: var(--surf-recessed); border-left: 3px solid var(--gold-core);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; line-height: 1.7; color: var(--on-teal-2);
  overflow-x: auto;                   /* a long formula scrolls, the page does not */
}

/* Whole-card links on the calculator hub. */
.offer--link { display: flex; flex-direction: column; }
.offer--link .offer__go { margin-top: auto; padding-top: var(--sp-4); font-size: 13.5px; font-weight: 600; color: var(--gold-core); }
.offer--link:hover .offer__go { color: var(--gold-highlight); }

/* ==========================================================================
   Articles — /blog/ and /blog/<slug>/
   Server-rendered by api/, so this is the only place their styling lives.
   ========================================================================== */

.page-hero--article h1 { max-width: 24ch; }
.byline { font-size: 13.5px; color: var(--on-teal-3); margin: 0; }
.byline time { font-variant-numeric: tabular-nums; }

.article__cover {
  width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover;
  border-radius: var(--r-lg); border: 1px solid var(--edge-quiet);
  margin-bottom: var(--sp-6);
}

/* Body copy is set for READING, not for scanning like the marketing pages.
   66ch measure, larger type, generous leading — an article that is a chore to
   read does not build the trust it exists to build. */
.article { max-width: 68ch; font-size: 17px; line-height: 1.75; color: var(--on-teal-2); }
.article > * + * { margin-top: var(--sp-5); }
.article h2 { font-size: clamp(23px, 3.6vw, 30px); margin: var(--sp-8) 0 var(--sp-4); }
.article h3 { font-size: clamp(19px, 2.6vw, 23px); margin: var(--sp-7) 0 var(--sp-3); }
.article p { margin: 0 0 var(--sp-5); }
.article ul, .article ol { margin: 0 0 var(--sp-5); padding-left: 1.3em; }
.article li { margin-bottom: var(--sp-2); }
.article a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.article strong { color: var(--on-teal-1); }
.article blockquote {
  margin: var(--sp-6) 0; padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--gold-core); background: var(--surf-recessed);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; font-style: normal;
}
.article blockquote p:last-child { margin-bottom: 0; }
.article table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.article th, .article td { padding: var(--sp-3); border-bottom: 1px solid var(--edge-quiet); text-align: left; }
.article th { color: var(--on-teal-1); font-weight: 600; }
.article img { border-radius: var(--r-md); margin: var(--sp-5) 0; }
.article code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em;
  background: var(--surf-recessed); padding: 2px 6px; border-radius: var(--r-xs);
}

.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-7); }
.pager__count { font-size: 13.5px; color: var(--on-teal-3); }

/* ---- toggle ----
   For a boolean. It used to be a slider labelled "1 for yes, 0 for no", which
   is a defect rather than a compromise: nobody should have to drag a control to
   express yes. A real role="switch" button, so a screen reader announces a
   switch with a state rather than a slider with a number. */
.switch {
  display: flex; align-items: center; gap: var(--sp-4);
  width: 100%; min-height: 52px; padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-pill); cursor: pointer;
  background: var(--surf-recessed); border: 1px solid var(--edge-quiet);
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
  transition: border-color .18s ease, background .18s ease;
}
.switch:hover { border-color: var(--edge-gold); background: var(--surf-raised); }
.switch__track {
  flex: 0 0 auto; position: relative; width: 60px; height: 34px;
  border-radius: var(--r-pill); background: var(--surf-recessed);
  border: 1px solid var(--edge-quiet); transition: background .2s ease, border-color .2s ease;
}
.switch__thumb {
  position: absolute; top: 3px; left: 3px; width: 26px; height: 26px;
  border-radius: 50%; background: var(--on-teal-3);
  transition: transform .2s cubic-bezier(.2,.8,.25,1), background .2s ease;
}
.switch[aria-checked="true"] .switch__track { background: var(--metal-lit); border-color: transparent; }
.switch[aria-checked="true"] .switch__thumb { transform: translateX(26px); background: var(--teal-deepest); }
/* Both words are always present so the control reads as a choice rather than as
   a state you have to infer from a colour — which also survives colour blindness. */
.switch__text { display: flex; gap: var(--sp-3); font-size: 15px; font-weight: 600; }
.switch__no, .switch__yes { color: var(--on-teal-3); transition: color .18s ease; }
.switch[aria-checked="false"] .switch__no { color: var(--on-teal-1); }
.switch[aria-checked="true"] .switch__yes { color: var(--gold-highlight); }
.field__val--static { border-bottom: 0; cursor: default; }
.field__val--static:hover { background: none; }

/* ---- choice ----
   A small discrete set. Every option visible and one tap away beats hunting
   for position 4 of 8 on a slider. */
.choices { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.choice {
  flex: 1 1 auto; min-width: 48px; min-height: 48px; padding: var(--sp-2);
  border-radius: var(--r-md); cursor: pointer;
  background: var(--surf-recessed); border: 1px solid var(--edge-quiet);
  color: var(--on-teal-2); font-family: var(--body); font-size: 16px; font-weight: 600;
  touch-action: manipulation;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.choice:hover { border-color: var(--edge-gold); color: var(--on-teal-1); }
.choice[aria-checked="true"] {
  background: var(--metal-lit); border-color: transparent;
  color: var(--ink-on-gold); box-shadow: 0 4px 14px rgba(0,0,0,.28);
}

/* "for each applicant" marker on the pre-form document checklist. A separate
   token rather than bold text, because the distinction between "one of these"
   and "one each" is the thing people get wrong and then have to redo. */
.both {
  display: inline-block; margin-left: var(--sp-1); padding: 1px var(--sp-2);
  border-radius: var(--r-pill); border: 1px solid var(--edge-gold);
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold-core); white-space: nowrap; vertical-align: 1px;
}