/* dark.css — the Kaiser LIGHT theme.
   NOTE: filename kept from the earlier dark build so nothing breaks; the palette
   below is now white-ground. Same token NAMES throughout (--plate, --page, etc.)
   so every section stylesheet keeps working — only the VALUES inverted.

   Colour coding — one hue and two neutrals, each with exactly ONE job:
     BLUE   = with us. Everything we build, every control you can press.
     SLATE  = without us. The blind state, the competitor, the jobs he misses.
     INK    = the money. The figure he is not billing, and nothing else.
   No orange (Sean, 4 Aug: "I dont like orange here at all"). It had been
   carrying three unrelated meanings — loss, heat, competitor — and the build
   could not keep them apart: the competitor ended up grey because orange was
   busy, while the tracked bar spent orange on bookings he WON. Loss now reads
   as absence (slate) and weight (ink), which is what it actually is.
   Every text colour below was checked against its real background with a pixel
   sampler, not by eye — see the contrast audit in the commit. */

@font-face{font-family:'Montserrat Variable';font-style:normal;font-display:swap;
  font-weight:100 900;src:url('../fonts/MontserratVariable.woff2') format('woff2')}

:root{
  /* The page is white, so a card cannot separate itself by FILL — it has to do
     it with an edge. Every value below is a real step: nothing sits within
     ~2 L* of its neighbour, because a step that small does no work and just
     adds a value to the ramp. */
  --page:#FFFFFF;          /* Sean: "definitely want a white background" */
  --plate:#FFFFFF;         /* L*100 — cards separate by border, never by fill */
  --plate-2:#F5F8FA;       /* L*97 — subtle inset */
  --plate-3:#E9EEF4;       /* L*93 — the real well */

  /* Blue darkened for a white ground. The old #5CA8F0 measures ~2.1:1 on white
     and is unusable as text; it survives only as a FILL. */
  --blue:#1668C4;          /* 5.6:1 on white — safe for text */
  --blue-bright:#3B8AE0;   /* fills, hovers, chart marks only */
  --blue-deep:#0E4C93;
  --blue-wash:#E8F1FB;     /* tinted panels */
  /* Both stops clear 4.5:1 on white (5.0 top, 8.6 bottom). The old top stop
     #2B7FD4 was 4.15:1, and text clipped to this gradient takes its cap-heights
     from the TOP — so 9.5px badges and the wordmark were failing at the letter
     tops while measuring fine at the baseline. */
  --grad-blue:linear-gradient(180deg,#1A6FCB,#0E4C93);

  --slate:#8794A2;         /* L*63 — "without us". Also the mid-tone the ramp
                              was missing: a white ground otherwise leaves a
                              40 L* void between the washes and the text. */

  --text:#0F1A24;          /* 17.4:1 on white */
  --muted:#41525F;         /* 8.9:1 */
  --muted-2:#5C6B78;       /* 5.6:1 — the floor for small print */
  --hair:rgba(22,104,196,.30);
  --soft:rgba(15,26,36,.20);   /* card hairlines — 1.55:1. The inherited .11 rendered
                                  #E5E6E7 at 1.25:1, which is below the point where an
                                  edge registers at all, and it was the ONLY edge on
                                  every plate, input and tile. */
  --edge:rgba(15,26,36,.32);   /* interactive borders (inputs, ghost buttons) — these
                                  have to read as "you can touch this", not as a seam */

  --ff:'Montserrat Variable',system-ui,-apple-system,sans-serif;
  --r:14px; --r-lg:20px;
  --w:1140px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  color:var(--text);
  background:var(--page);
  font-family:var(--ff);font-size:15.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;font-synthesis:none;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 clamp(16px,4vw,36px)}
/* tighter on desktop — the old max left fields of blank between sections */
section{padding:clamp(3rem,5.5vw,4.4rem) 0}
section[id],footer[id]{scroll-margin-top:84px}

/* ---------- type roles ---------- */
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue);margin-bottom:12px}
.h-display{font-size:clamp(30px,5vw,58px);font-weight:800;letter-spacing:-.02em;
  line-height:1.03;text-transform:uppercase;text-wrap:balance}
.h-sec{font-size:clamp(21px,2.8vw,30px);font-weight:800;letter-spacing:-.015em;
  text-transform:uppercase}
.g{background:var(--grad-blue);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{color:var(--muted);font-size:15px;font-weight:500;max-width:56ch}
.label{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-2)}
.sechead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.sechead .eyebrow{margin:0}
.secnote{font-size:14px;font-weight:500;color:var(--muted);max-width:58ch;margin-bottom:26px}

/* ---------- badges & buttons ---------- */
.badge{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:#FFFFFF;background:var(--grad-blue);
  padding:4px 10px;border-radius:999px}
.btn{display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ff);font-size:12.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:#FFFFFF;
  background:var(--grad-blue);border:0;border-radius:999px;
  padding:16px 26px;text-decoration:none;cursor:pointer;
  box-shadow:0 6px 18px -8px rgba(14,76,147,.45);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(14,76,147,.5)}
.btn.ghost{background:#FFFFFF;color:var(--blue);border:1.5px solid var(--edge);
  box-shadow:none}
.btn.ghost:hover{border-color:var(--blue);background:var(--blue-wash)}
.btn[aria-disabled="true"]{opacity:.4;pointer-events:none}

/* ---------- section bands ---------- */
/* The scroll rhythm. Three sections sit on a tinted ground — the calculator
   (money in), the board (proof), and the reserve form (conversion) — so the
   page reads white / tint / white instead of one unbroken column. This is the
   Philip fix ("separate sections, stop the scroll feeling monotonous") done
   without a second hue, and it restores the fill separation the white cards
   lost: a white plate on a tinted band pops the way it never can on white. */
.band{background:linear-gradient(180deg,#F3F8FD, var(--blue-wash) 120px, var(--blue-wash) calc(100% - 120px), #F3F8FD);
  border-top:1px solid rgba(22,104,196,.14);border-bottom:1px solid rgba(22,104,196,.14)}

/* ---------- plates ---------- */
/* No drop shadow. A 32px grey pool under a white card on a white page is not
   lift, it is dirt — and the FAQ rows sit 12px apart, so the paper between them
   never returned to white and four cards read as one grey-striped slab. The
   border does the separating now, which is why --soft had to get darker. */
.plate{position:relative;min-width:0;
  background:var(--plate);
  border:1px solid var(--soft);border-radius:var(--r-lg);
  padding:clamp(22px,3vw,30px);
  transition:box-shadow .3s, border-color .3s}
.plate:hover{border-color:var(--blue);
  box-shadow:0 0 0 1px var(--blue)}
.ptag{position:absolute;top:-10px;right:18px}
.ptitle{font-size:18px;font-weight:800;letter-spacing:-.01em;text-transform:uppercase;
  margin-bottom:4px}
.psub{font-size:13.5px;font-weight:500;color:var(--muted);margin-bottom:18px}
.pfoot{margin-top:18px;padding-top:13px;border-top:1px solid var(--soft);
  font-size:12.5px;font-weight:600;color:var(--muted-2)}
.pair{display:grid;gap:22px;align-items:start}
@media(min-width:940px){.pair{grid-template-columns:1fr 1fr}}
.trio{display:grid;gap:18px;align-items:stretch}
@media(min-width:700px){.trio{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.trio{grid-template-columns:repeat(4,1fr)}}

/* ---------- numbers ---------- */
.bignum{font-weight:900;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;
  background:var(--grad-blue);-webkit-background-clip:text;background-clip:text;color:transparent}
/* The one number on the page that is HIS money. Solid ink, no gradient, no
   hue — at 64px/900 on white it is the heaviest object in the viewport, which
   is the whole job. A colour would only soften it. */
.bignum.loss{background:none;-webkit-text-fill-color:var(--text);color:var(--text)}

/* ---------- reveal (js/dark.js arms .rise only when it will animate) ---------- */
.rise{opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--d,0s)}
.rise.in,html.motion-off .rise{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:20;
  /* .86 was inherited from the dark build, where an 86% scrim genuinely hid what
     passed under it. An 86% WHITE scrim does not: body copy and the peach calc
     panel smeared through the bar at up to 1.45:1. */
  background:rgba(255,255,255,.94);backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--soft)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.wordmark{font-size:15px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;display:flex;align-items:center;min-height:44px}
.wordmark .g{margin-left:5px}
.nav-right{display:flex;align-items:center;gap:14px}
.nav .btn{padding:11px 18px;font-size:11px}
/* language switch in words — "English · Español". Full words, no flags, no
   abbreviations: the 50-60 year old reader should not have to decode anything. */
.langs{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;
  color:var(--muted-2)}
.langs a{text-decoration:none;color:var(--muted);padding:10px 2px;min-height:44px;
  display:inline-flex;align-items:center;transition:color .2s}
.langs a:hover{color:var(--text)}
.langs a[aria-current="true"]{color:var(--text);border-bottom:2px solid var(--blue)}
@media(max-width:560px){.nav .btn{display:none}}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--soft);padding:30px 0 44px}
.foot-row{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;
  font-size:12px;font-weight:600;color:var(--muted-2)}
.foot-row a{color:var(--muted-2);text-decoration:none}
.foot-row a:hover{color:var(--text)}