/* 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;
  /* nav is 64px + a 1px rule. The hero subtracts it from the fold. */
  --nav-h:65px;
  --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;
  /* body line-height is 1.6; without this a wrapped section heading gaps badly */
  line-height:1.1;text-transform:uppercase;text-wrap:balance}
.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}
/* margin-top is required, not cosmetic: .h-sec carries no bottom margin, and
   once data-lines has run the heading's box ends exactly where this paragraph's
   begins — measured 0px in four sections, so the note read as a third heading
   line. (A pre-animation measurement shows 24px and is misleading.) */
.secnote{font-size:14px;font-weight:500;color:var(--muted);max-width:58ch;
  margin-top:12px;margin-bottom:26px;text-wrap:pretty}

/* ---------- 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.ghost{background:#FFFFFF;color:var(--blue);border:1.5px solid var(--edge);
  box-shadow:none}
.nav-li{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex-shrink:0;border-radius:999px;
  background:#FFFFFF;color:var(--blue);border:1.5px solid var(--edge)}
/* Hover is gated on a real pointer. A touch device latches :hover on tap and
   holds it until the reader taps something else, so an ungated rule leaves a
   lifted, glowing button behind every press. */
@media(hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(14,76,147,.5)}
  .btn.ghost:hover{border-color:var(--blue);background:var(--blue-wash)}
  .nav-li: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}
/* pointer-gated: on a phone this painted a blue ring round the whole form card
   the moment he tapped his first field, and it never cleared. */
@media(hover:hover) and (pointer:fine){
  .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. */
  /* Opaque, now that the hero underneath is ink. At .94 the remaining 6% of
     #0B131B came through and the bar rendered as a muddy grey stripe across the
     top of the darkest thing on the site. The comment above already concluded a
     translucent white scrim hides nothing, so there is no reason to keep one —
     and with a solid fill the backdrop-filter had nothing left to do. */
  background:#FFFFFF;
  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;gap:10px;min-height:44px}
/* the supplied KSR mark, trimmed to its own bounds. The name stays in text
   beside it: the whole diagnosis of the old page was that the brand never said
   what it was, so dropping the words for a mark alone would undo that. */
.wm-mark{height:30px;width:auto;display:block}
.wm-txt{font-size:15px}
@media(max-width:430px){.wm-mark{height:26px}.wm-txt{font-size:13px}}
.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{position:relative;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)}
/* The underline is drawn to the TEXT, not to the border of the 44px tap box —
   on the box it floated 13.5px under its own word and only 10.5px above the
   nav rule, reading as a stray line rather than as "you are here". */
.langs a[aria-current="true"]{color:var(--text)}
.langs a[aria-current="true"]::after{content:"";position:absolute;left:2px;right:2px;
  top:calc(50% + 0.62em);height:2px;background:var(--blue)}

/* 320px: "KAISER COLLECTIVE" at 15px plus the language switcher exceeds the
   288px of content width an iPhone SE 1 leaves, pushing the page 15px wide.
   Below any current handset, but it costs two lines to stop being broken. */
@media(max-width:374px){
  .nav-in{gap:8px}
  /* .wm-txt, not .wordmark: the span sets its own 13px at the 430px breakpoint,
     so shrinking the parent never reached the type and the wordmark ran 11.5px
     INTO the language switch at 320 — real overprinted ink, invisible to the
     scrollWidth overflow check because .wordmark is white-space:nowrap. */
  .wordmark{letter-spacing:0}
  .wm-txt{font-size:12px}
  .langs{gap:6px;font-size:12px}
}
/* Second step. 12px still overprints by 0.8px at 320 — the lockup and the
   switch shrink at different rates, so one breakpoint cannot serve both the
   360/375 band and an SE-class screen. Measured clearance with this in place:
   320 -> 18px, 344 -> 23px, 360 -> 39px, 374 -> 53px, 375 -> 22px. */
@media(max-width:343px){
  .wm-txt{font-size:11px}
  .langs{font-size:11px}
}
/* 1069, not 969. The 969 figure covered a single .nav-li (LinkedIn). Adding two
   more — Instagram, Facebook, ~54px each with their gap — reopened the same
   failure: Spanish's "Agende una llamada de 15 minutos" wraps to two lines
   below the new content width. Bisected the live nav again, same method as the
   969 figure: broken at 1043, clear at 1047. English never got close (still
   clear at 970, the old threshold) — Spanish is the binding case again. */
@media(max-width:1069px){.nav .btn,.nav .nav-li{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)}