/* ─────────────────────────────────────────────────────────────────────
   EXPERIMENT · blue replaces navy as the dark surface
   2026-07-31 · v4 only. Live site untouched.

   TO REVERSE: delete this file and the one <link> per page:
     cd v4 && rm theme-blue.css && sed -i '' '/theme-blue.css/d' *.html

   ── HOW THE SURFACE COLOUR WAS CHOSEN ──────────────────────────────
   Not picked by eye. The band carries 13px gold labels and 15-19px body
   in --onDark-60, and both were tuned against navy #12213A (luminance
   0.0153). Working backwards from a 4.5:1 floor for that gold
   (#B8924B, luminance 0.3116) the surface must sit at luminance
   <= 0.0304. That is the whole constraint.

   #3264FA (logo)  luminance 0.167  ->  gold 1.91:1, body 2.80:1   ✗✗
   #2E5CE6         luminance 0.139  ->  gold 2.12:1, body 2.80:1   ✗✗
   #132A6B (used)  luminance 0.0284 ->  gold 4.61:1, body 5.42:1   ✓

   #132A6B is hue 224 deg, saturation 0.82 - the same hue as the logo and
   markedly bluer than the old navy (hue 216, saturation 0.69), just deep
   enough to be a surface. Anything more vivid costs legibility on this
   band; that is a measured trade, not a preference.
   ───────────────────────────────────────────────────────────────────── */

:root{
  --blue-900:#0E1F50;   /* deepest, foot of the band              */
  --blue-800:#132A6B;   /* the dark surface                       */
  --blue-600:#2A56D8;   /* solid buttons + accents on cream, 5.46:1 with cream */
  --blue-500:#3264FA;   /* the true logo blue, cream surfaces only */

  --stone:var(--blue-500);   /* second lines on cream: 4.30:1 */
  --dark:var(--blue-800);
  --navy:var(--blue-600);
}

/* ── the dark bands become blue ──────────────────────────────────────
   porcelain.css:174 and index.html:448 both hardcode the gradient top
   #172A4C, so moving --dark alone will not shift them.                */
.section--dark,
.trust{
  background:linear-gradient(180deg,var(--blue-800),var(--blue-900) 62%) !important;
}

/* ── text on the blue is the cream ───────────────────────────────────
   Was the muted sage. On a blue ground it becomes cream, held back so a
   two-tone headline still reads as two tones. 8.10:1.

   .closing was in this rule and did not belong: it is not a dark surface.
   It is the pale skyline, so cream-on-cream rendered the second line of
   "Everything a company runs on, / in one system." at about 1.1:1, which
   is invisible rather than subtle. It now falls through to --stone like
   every other two-tone line on cream, which in this theme is the logo
   blue at 4.30:1, matching "One bill." in the hero.                     */
.onDark .stone{
  color:rgba(244,239,230,.8);
}

/* Gold stays gold. At 4.61:1 on this surface it clears the floor, so the
   editorial voice does not have to change colour to survive the band. */

/* ── card fills, retuned for a saturated ground ──────────────────────
   The .05 white fill and .16 hairlines were set against a desaturated
   navy and go muddy on blue.                                          */
.section--dark .card,
.trust .card{
  background:rgba(244,239,230,.07) !important;
  border-color:rgba(244,239,230,.20) !important;
}

/* ── button pressed state, to match --navy moving to --blue-600 ───── */
.btn--solid:hover,
body #acConsent .acc__btn--solid:hover{
  background:#2247B8;
}

/* ── compliance badge states ─────────────────────────────────────────
   Two states share this band: gold = we have it, neutral = in progress.
   The neutral was the old sage, which dies on blue. A held-back cream
   keeps the distinction and measures 6.75:1.                          */
#compliance{
  --stone:rgba(244,239,230,.72);
}

/* ── nav fit, four audiences ─────────────────────────────────────────
   The audience-first nav carries six items (Startups, Enterprises,
   Investors, Network, Platform, Pricing) where the old one carried five,
   and .topbar__nav is absolutely centred while .topbar__cta sits right.
   Measured: it collides with the CTA by 2px at 1100px. The hamburger does
   not take over until 900px, so 900-1200 needs the items drawn tighter
   rather than a raised breakpoint - dropping to a burger at 1150 would
   hide the four audiences on exactly the laptop widths they matter on. */
@media (min-width:1025px) and (max-width:1200px){
  .topbar__nav{gap:2px}
  .topbar__nav a,
  .topbar__drop>button{padding:8px 8px;font-size:14.5px}
}
/* At or below 1024 six items plus the CTA cannot fit at any readable size —
   measured 6px over at 950, 28px over at 901, and still 1px tight at 1001
   even fully tightened — so the burger takes over at 1024 instead of
   porcelain.css's 900. The four audiences stay in the drawer, first group. */
@media (max-width:1024px){
  .topbar__nav{display:none}
  .topbar .topbar__cta{display:none}
  .topbar__burger{display:flex}
}

/* ── index.html only: two sages hardcoded outside --stone ────────────
     :262 .manifesto .stone #8E8163   ·   :547 $78 strikethrough        */
.manifesto .stone{
  color:var(--blue-500);
}
.proof__fig--was{
  text-decoration-color:rgba(50,100,250,.5);
}