/* Twice Precise: the v23 "Board: Brand" system (approved 2026-09-24).
   One stylesheet for every page. The CSP allows only this file (style-src 'self'):
   no inline style blocks or attributes, and no JavaScript.
   Fonts: Onest + IBM Plex Mono (both SIL OFL 1.1), self-hosted in /fonts/.
   Order: 1 fonts  2 tokens  3 base  4 frame  5 header/nav/menu  6 footer
          7 components (tile, type, link, tag, btn, pill, paid, status, cells, readout, fig, callouts)
          8 home-only tiles  8b subpages  9 contrast / forced colours / reduced transparency / reduced motion */

/* ==========================================================================
   1. Fonts
   ========================================================================== */
@font-face{font-family:"Onest";src:url(/fonts/onest-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Onest";src:url(/fonts/onest-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Onest";src:url(/fonts/onest-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Onest";src:url(/fonts/onest-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(/fonts/plex-mono-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(/fonts/plex-mono-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(/fonts/plex-mono-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* ==========================================================================
   2. Tokens
   Light: a pale steel frame with brand tiles. Dark: tiles re-assigned, not inverted.
   ========================================================================== */
:root{
  --navy:#28469E; --navy-2:#1F3A88; --deep:#0B1428; --deep-2:#131F3C; --deep-3:#1B294B;
  --field:#CAE8E8; --canvas:#F4F8FC; --white:#FFFFFF;
  --olive:#6A7508; --olive-press:#5A6306; --chart:#C9DB3A; --chart-press:#B5C62F;
  --ink:#101E3D; --ink-mute:#4A5A7E; --on-deep:#DCE6F5; --on-deep-mute:#AFBFE0;
  --frame:#DFE8F2; --frame-edge:#C6D6E8; --hair:#C6D6E8;

  /* roles */
  --page:var(--frame);
  --focus:#28469E;
  --t-paper:var(--white); --t-canvas:var(--canvas); --t-field:var(--field);
  --t-fg:var(--ink); --t-mute:var(--ink-mute); --t-link:var(--navy);

  /* the action: olive on light tiles */
  --act:var(--olive); --act-press:var(--olive-press); --on-act:#FFFFFF;

  /* number tile */
  --n-bg:var(--white); --n-num:var(--navy); --n-fg:var(--ink);

  /* mark on light */
  --mark-ring:var(--navy); --mark-lo:var(--navy); --mark-hi:var(--olive);

  /* glass (header bar + CTA pill only) */
  --glass-bar:rgb(244 248 252 / .78); --glass-bar-edge:rgb(255 255 255 / .9);
  --glass-pill:rgb(255 255 255 / .74); --glass-pill-edge:rgb(255 255 255 / .95);
  --pill-fg:var(--ink);

  /* shapes and space */
  --r-tile:28px; --r-inner:14px; --r-pill:9999px; --gap:14px;
  --pad:clamp(20px, 2.2vw, 30px);
  --shadow-tile:0 1px 2px rgb(16 30 61 / .04), 0 10px 30px -18px rgb(16 30 61 / .22);

  --ease:cubic-bezier(0.22, 1, 0.36, 1);
  --font:"Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"Plex Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --frame:#060B17; --frame-edge:#1B294B; --hair:#2A3A60;
    --page:var(--frame);
    --focus:#C9DB3A;
    --t-paper:#131F3C; --t-canvas:#101A33; --t-field:#1B294B;
    --t-fg:#DCE6F5; --t-mute:#9AAACC; --t-link:#9DB2EE;
    --act:var(--chart); --act-press:var(--chart-press); --on-act:#0B1428;
    --n-bg:var(--field); --n-num:var(--navy); --n-fg:#0B1428;
    --mark-ring:#FFFFFF; --mark-lo:#FFFFFF; --mark-hi:var(--chart);
    --glass-bar:rgb(11 20 40 / .76); --glass-bar-edge:rgb(122 147 224 / .22);
    --glass-pill:rgb(11 20 40 / .70); --glass-pill-edge:rgb(220 230 245 / .28);
    --pill-fg:#F1F5FC;
    --shadow-tile:0 0 0 1px rgb(122 147 224 / .07), 0 18px 40px -24px rgb(0 0 0 / .8);
  }
}
@media (min-width:64em){ :root{--gap:16px} }
@media (max-width:47.99em){ :root{--r-tile:24px} }

/* ==========================================================================
   3. Base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{font-size:100%;background:var(--page);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--t-fg);font-family:var(--font);font-size:1.0625rem;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
svg{display:block}
.m-ring{stroke:var(--mark-ring)}.m-lo{fill:var(--mark-lo)}.m-hi{fill:var(--mark-hi)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.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}
.skip{position:absolute;left:16px;top:-100px;z-index:50;background:var(--navy);color:#fff;padding:12px 18px;border-radius:var(--r-pill);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:8px}

/* ==========================================================================
   4. The frame (wraps header, main and footer on every page)
   ========================================================================== */
.frame{width:min(100% - 2 * max(12px, env(safe-area-inset-left)), 1260px);margin-inline:auto;padding-block:14px 28px}

/* ==========================================================================
   5. Header: sticky glass bar, desktop nav, <details> phone menu
   ========================================================================== */
.bar{position:sticky;top:10px;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:60px;padding:8px 8px 8px 18px;margin-bottom:var(--gap);border-radius:var(--r-pill);
  background:var(--t-paper);border:1px solid var(--frame-edge)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .bar{background:var(--glass-bar);border-color:var(--glass-bar-edge);
    -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}
}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font-weight:700;font-size:1.0625rem;letter-spacing:-0.01em;color:var(--t-fg)}
.brand svg{width:30px;height:30px;flex:none}
.nav ul{display:flex;gap:4px}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--r-pill);text-decoration:none;font-weight:500;font-size:.9375rem;color:var(--t-fg)}
.nav a.nav-cta{border:1.5px solid var(--t-fg);font-weight:600}
.menu{display:none;position:relative}
.menu summary{list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--r-pill);
  cursor:pointer;font-weight:600;font-size:.9375rem;background:var(--t-canvas);border:1px solid var(--hair);color:var(--t-fg)}
.menu summary::-webkit-details-marker{display:none}
.menu summary svg{width:16px;height:16px}
.menu[open] summary svg{transform:scaleY(-1)}
.menu ul{position:absolute;right:0;top:calc(100% + 8px);min-width:13.5rem;padding:8px;border-radius:20px;background:var(--t-paper);
  border:1px solid var(--hair);box-shadow:0 20px 40px -20px rgb(0 0 0 / .45)}
.menu a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:12px;text-decoration:none;font-weight:500}
@media (hover:hover) and (pointer:fine){
  .nav a:hover,.menu a:hover{background:var(--t-canvas)}
}
/* phones: the inline nav gives way to the menu */
@media (max-width:47.99em){
  .nav{display:none}
  .menu{display:block}
}

/* ==========================================================================
   6. Footer
   ========================================================================== */
.footer{margin-top:var(--gap);border-radius:var(--r-tile);padding:var(--pad);background:#0B1428;color:#DCE6F5;display:grid;gap:18px;
  font-size:.875rem;line-height:1.5}
.footer .fl{display:flex;flex-wrap:wrap;gap:4px 8px}
.footer .fl a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-radius:10px;color:#DCE6F5;font-weight:500}
.footer strong{color:#FFFFFF}
.footer .row{display:flex;flex-wrap:wrap;gap:6px 18px;color:#AFBFE0}
.footer .row a{color:#DCE6F5}
.footer .lk{display:flex;align-items:center;gap:10px;font-weight:700;color:#FFFFFF}
.footer .lk svg{width:28px;height:28px}
@media (min-width:64em){ .footer{grid-template-columns:1.1fr 2fr;align-items:start} .footer .fl{justify-content:flex-end} }
@media (prefers-color-scheme: dark){
  .footer{background:#0B1428;box-shadow:0 0 0 1px #1B294B inset}
}

/* ==========================================================================
   7. Components (shared by every page)
   ========================================================================== */

/* --- Tile: the rounded card every block sits in. Each tile is a size container. --- */
.tile{position:relative;isolation:isolate;overflow:hidden;container-type:inline-size;border-radius:var(--r-tile);
  padding:var(--pad);background:var(--t-paper);color:var(--t-fg);box-shadow:var(--shadow-tile)}

/* --- Type inside tiles --- */
.eyebrow{font-size:.8125rem;font-weight:600;letter-spacing:.01em;color:var(--t-mute)}
.h2{font-size:1.375rem;line-height:1.2;font-weight:700;letter-spacing:-0.015em;text-wrap:balance}
.lead{font-size:1.0625rem;color:var(--t-mute);max-width:62ch}
.tile p + p{margin-top:.75em}

/* --- Link with arrow (a.link > text + svg) --- */
.link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;color:var(--t-link);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.link svg{width:16px;height:16px;transition:transform 250ms var(--ease)}
@media (hover:hover) and (pointer:fine){ .link:hover svg{transform:translateX(3px)} }

/* --- Tag: outlined capsule, e.g. "Example only, not my results" --- */
.tag{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:600;padding:4px 10px;border-radius:var(--r-pill);
  border:1px solid currentColor}
.tag svg{width:12px;height:12px}

/* --- Buttons: .btn + .btn-deep (chartreuse, on dark tiles) or .btn-ghost (outline, on dark tiles) --- */
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:14px 22px;border-radius:var(--r-pill);
  font-weight:600;font-size:1.0625rem;line-height:1;text-decoration:none;transition:background-color 150ms var(--ease), transform 150ms var(--ease)}
.btn svg{width:18px;height:18px}
.btn-deep{background:#C9DB3A;color:#0B1428}
.btn-deep:active{background:#B5C62F}
.btn-ghost{color:#FFFFFF;border:1.5px solid rgb(220 230 245 / .7)}
@media (hover:hover) and (pointer:fine){
  .btn-deep:hover{background:#B5C62F}
  .btn-ghost:hover{background:rgb(255 255 255 / .08)}
}

/* --- Pill: frosted subscribe capsule with a round action "go" (glass surface 2 of 2) --- */
.pill{display:inline-flex;align-items:center;gap:14px;min-height:64px;padding:8px 26px 8px 8px;border-radius:var(--r-pill);
  text-decoration:none;font-weight:600;font-size:1.125rem;letter-spacing:-0.01em;color:var(--pill-fg);
  background:var(--t-paper);border:1px solid var(--hair);
  box-shadow:0 1px 0 rgb(255 255 255 / .6) inset, 0 16px 32px -18px rgb(11 20 40 / .55);
  transition:transform 250ms var(--ease), box-shadow 250ms var(--ease)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .pill{background:var(--glass-pill);border-color:var(--glass-pill-edge);
    -webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%)}
}
.pill .go{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--act);color:var(--on-act);flex:none}
.pill .go svg{width:20px;height:20px}
.pill:active .go{background:var(--act-press)}
@media (hover:hover) and (pointer:fine){
  .pill:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgb(255 255 255 / .6) inset, 0 22px 36px -18px rgb(11 20 40 / .6)}
  .pill:hover .go{background:var(--act-press)}
}

/* --- Paid-link chip: sits right next to every paid link --- */
.paid{display:inline-flex;align-items:center;font-size:.8125rem;font-weight:600;padding:2px 9px;border-radius:var(--r-pill);background:var(--act);color:var(--on-act);vertical-align:1px}

/* --- Status line with a dot --- */
.status{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.9375rem}
.status::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--act);box-shadow:0 0 0 3px color-mix(in srgb, var(--act) 25%, transparent)}

/* --- Coverage cells: ol.cells > li (hollow until a real, dated check exists) --- */
.cells{display:grid;grid-template-columns:repeat(7, 1fr);gap:6px}
.cells li{aspect-ratio:1;border-radius:8px;border:1.5px solid var(--hair);background:var(--t-canvas)}
@container (min-width:36rem){ .cells{grid-template-columns:repeat(14, 1fr)} }

/* --- Readout: dl.readout > div > dt + dd (numbers in Plex Mono) --- */
.readout{display:grid;grid-template-columns:repeat(auto-fit, minmax(9rem,1fr));gap:8px}
.readout div{border-radius:var(--r-inner);background:var(--t-canvas);padding:12px 14px}
.readout dt{font-size:.8125rem;color:var(--t-mute);font-weight:500}
.readout dd{margin:2px 0 0;font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;font-size:1.0625rem}

/* --- Figure: flat bounce figure (figure.fig > figcaption + svg + .tag) --- */
.fig{border-radius:var(--r-inner);background:var(--t-canvas);padding:clamp(10px, 3cqi, 16px);display:grid;gap:10px}
.fig figcaption{font-weight:600;font-size:1rem;line-height:1.3}
.fig svg{width:100%;height:auto}
.fig .axis{stroke:var(--t-mute)}
.fig .band{fill:var(--navy);opacity:.10}
.fig .bandline{stroke:var(--t-link);stroke-dasharray:3 4}
.fig .d1{fill:var(--mark-lo)}
.fig .d2{fill:var(--mark-hi)}
.fig .d3{fill:var(--t-paper);stroke:var(--t-fg);stroke-width:2.5}
.fig text{fill:var(--t-fg);font-family:var(--font);font-size:15px;font-weight:500}
.fig text.b{font-weight:700;fill:var(--t-link)}
.fig .tag{justify-self:start;color:var(--t-mute)}
@media (prefers-color-scheme: dark){
  .fig .band{fill:#7A93E0;opacity:.14}
}

/* --- Liquid noise used by .liquid fields (inline data: SVG, no request) --- */
.liquid::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.14;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ==========================================================================
   8. Home page tiles
   ========================================================================== */

/* --- The board grid --- */
.board{display:grid;gap:var(--gap);grid-template-columns:1fr;
  grid-template-areas:"hero" "cta" "n2" "why" "fair" "mail" "wont" "tracker" "about" "money" "words" "brandt" "close"}
.hero{grid-area:hero}.cta{grid-area:cta}.n2{grid-area:n2}.why{grid-area:why}.fair{grid-area:fair}.mail{grid-area:mail}
.wont{grid-area:wont}.tracker{grid-area:tracker}.about{grid-area:about}.money{grid-area:money}.words{grid-area:words}
.brandt{grid-area:brandt}.close{grid-area:close}
@media (min-width:48em){
  .board{grid-template-columns:repeat(2, minmax(0,1fr));
    grid-template-areas:
      "hero hero"
      "cta n2"
      "why why"
      "fair mail"
      "wont mail"
      "tracker tracker"
      "words words"
      "brandt brandt"
      "about money"
      "close close"}
}
@media (min-width:64em){
  .board{grid-template-columns:repeat(12, minmax(0,1fr));
    grid-template-areas:
      "mail mail mail hero hero hero hero hero hero n2 n2 n2"
      "mail mail mail brandt brandt brandt brandt brandt cta cta cta cta"
      "words words words words words words words fair fair fair fair fair"
      "why why why why why wont wont wont tracker tracker tracker tracker"
      "about about about about money money money close close close close close"}
}

/* --- Hero: headline + the Two Hits mark as an object --- */
.hero{background:radial-gradient(120% 90% at 85% 10%, #3553B0 0%, transparent 55%),
  linear-gradient(160deg, #0B1428 0%, #16275A 55%, #28469E 120%);
  color:#FFFFFF;--t-mute:#C3D0EC;min-height:24rem;display:grid;align-content:space-between;gap:24px}
.hero .top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.hero .top .eyebrow{color:#D7E0F3}
.hero h1{font-size:clamp(2.25rem, 7.4cqi, 3.5rem);line-height:1.02;letter-spacing:-0.035em;font-weight:700;text-wrap:balance;max-width:11ch}
.hero .sub{margin-top:14px;font-size:1.0625rem;line-height:1.5;color:#D7E0F3;max-width:40ch}
.hero-body{display:grid;gap:20px}
.stage{position:relative;height:14rem;margin-inline:auto;width:16rem;max-width:100%}
@container (min-width:34rem){
  .hero-body{grid-template-columns:minmax(0,1fr) 15.5rem;align-items:end;column-gap:12px}
  .stage{height:15rem;width:15.5rem;margin:0}
}
.stage::before{content:"";position:absolute;left:-12%;right:-12%;bottom:0;height:34%;border-radius:50%;
  background:radial-gradient(closest-side, rgb(122 147 224 / .38), transparent)}
.sph{position:absolute;border-radius:50%;width:4.8rem;height:4.8rem}
.sph::after{content:"";position:absolute;left:8%;right:8%;bottom:-2.1rem;height:1.1rem;border-radius:50%;
  background:radial-gradient(closest-side, rgb(0 0 0 / .55), transparent)}
.sph.lo{left:0;bottom:3rem;
  background:radial-gradient(circle at 34% 28%, #FFFFFF 0 6%, rgb(255 255 255 / .0) 30%),
             radial-gradient(circle at 50% 45%, #FFFFFF 0%, #DCE6F5 38%, #8FA3D6 78%, #4A63AE 100%);
  box-shadow:inset -8px -12px 22px rgb(11 20 40 / .35), 0 18px 30px -14px rgb(0 0 0 / .55)}
.sph.hi{left:5.4rem;bottom:6rem;
  background:radial-gradient(circle at 34% 28%, #FFFFFF 0 6%, rgb(255 255 255 / 0) 30%),
             radial-gradient(circle at 50% 45%, #F2FBA8 0%, #C9DB3A 42%, #8E9C1C 82%, #5A6306 100%);
  box-shadow:inset -8px -12px 22px rgb(40 45 0 / .35), 0 18px 30px -14px rgb(0 0 0 / .55)}
.sph.hi::after{bottom:-5.1rem}
.bracket{position:absolute;left:10.8rem;bottom:5.4rem;height:3rem;width:12px;border:2px solid #C9DB3A;border-left:0;border-radius:0 4px 4px 0}
.bracket-l{position:absolute;left:11.7rem;bottom:6.1rem;font-size:.8125rem;font-weight:600;color:#EEF3FB;line-height:1.2}
.stage .tag{position:absolute;left:0;bottom:0;color:#DCE6F5;white-space:nowrap}
.hero .tag{border-color:rgb(220 230 245 / .5)}
@media (prefers-reduced-motion:no-preference){
  .sph.hi{animation:land 700ms 250ms var(--ease) both}
  .bracket{animation:grow 400ms 900ms var(--ease) both;transform-origin:50% 100%}
  @keyframes land{from{transform:translateY(-22px)}to{transform:none}}
  @keyframes grow{from{transform:scaleY(.2)}to{transform:none}}
}

/* --- CTA: liquid field + the frosted .pill --- */
.cta{min-height:17rem;display:grid;place-items:center;align-content:center;gap:16px;text-align:center;
  background:
    radial-gradient(55% 45% at 22% 26%, rgb(255 255 255 / .95), transparent 70%),
    radial-gradient(40% 55% at 84% 78%, rgb(40 70 158 / .38), transparent 70%),
    radial-gradient(35% 40% at 70% 18%, rgb(202 232 232 / .9), transparent 70%),
    linear-gradient(135deg, #E9F2FA, #BCD6E6 55%, #9FB6DA)}
.cta::before{content:"";position:absolute;inset:-20%;z-index:-1;filter:blur(18px);opacity:.75;
  background:conic-gradient(from 200deg at 58% 46%, #CAE8E8, #FFFFFF 18%, #9DB0DA 34%, #EAF4F8 52%, #7F98CF 68%, #DDEEF1 84%, #CAE8E8)}
.cta .fine{font-size:.8125rem;line-height:1.4;color:#1E2C4E;max-width:34ch;font-weight:500}
.cta .alt{color:#1E2C4E}
.cta .alt.link{color:#1B3380}

/* --- Giant number tile --- */
.n2{background:var(--n-bg);color:var(--n-fg);min-height:15rem;display:grid}
.n2 .in{display:grid;align-content:space-between;gap:16px;height:100%}
.n2 .big{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;line-height:.82;letter-spacing:-0.06em;
  color:var(--n-num);font-size:clamp(7rem, 58cqi, 11rem)}
.n2 p{font-size:1.1875rem;line-height:1.3;font-weight:500;max-width:16ch}
.n2 .sub{display:block;margin-top:6px;font-size:.9375rem;font-weight:400;color:#33446B}
@container (min-width:30rem){
  .n2 .in{grid-template-columns:auto 1fr;align-items:end}
  .n2 p{padding-bottom:10px}
}

/* --- Brand lockup tile --- */
.brandt{background:radial-gradient(90% 120% at 0% 0%, #3A5CC0 0%, transparent 60%),
  linear-gradient(120deg, #28469E 0%, #1F3A88 55%, #1A2F6E 100%);
  color:#FFFFFF;display:flex;align-items:center;min-height:14rem}
.lockup{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:22px;row-gap:10px}
.lockup .mk{grid-row:1 / span 2}
.lockup .mk{width:clamp(64px, 18cqi, 104px);height:auto;flex:none}
.lockup .wm{font-size:clamp(2rem, 9.5cqi, 3.25rem);font-weight:700;letter-spacing:-0.035em;line-height:1}
.lockup .dotsep{display:none}
.lockup .strap{font-size:1.125rem;line-height:1.35;color:#E6ECF8;max-width:30ch}
@container (max-width:24rem){ .lockup{grid-template-columns:1fr} .lockup .mk{grid-row:auto} }

/* --- Mail tile: generic rounded device with a sample email --- */
.mail{background:linear-gradient(180deg, #DDF0F0 0%, var(--field) 70%)}
.mail .in{display:grid;align-content:start;gap:18px}
.mail .h2{font-size:1.25rem}
.mail .eyebrow{color:#33446B}
.device{margin-inline:auto;width:min(100%, 17rem);border-radius:40px;padding:10px;
  background:linear-gradient(145deg, #34405E, #0B1428 40%, #1B294B);
  box-shadow:0 0 0 1px rgb(255 255 255 / .08) inset, 0 30px 50px -26px rgb(11 20 40 / .7)}
.screen{border-radius:31px;background:linear-gradient(180deg, #16244A, #0E1830 60%);color:#DCE6F5;padding:22px 16px 18px;min-height:26rem;display:grid;align-content:start;gap:14px}
.screen .from{display:flex;align-items:center;gap:10px;font-size:.8125rem;color:#B7C5E4}
.screen .from svg{width:28px;height:28px;flex:none;border-radius:50%;background:#28469E;padding:3px}
.screen .from b{display:block;color:#F1F5FC;font-weight:600;font-size:.875rem}
.screen .subj{font-size:1.125rem;line-height:1.22;font-weight:700;color:#FFFFFF;letter-spacing:-0.01em}
.screen .sec{font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#C9DB3A}
.screen ul{display:grid;gap:8px}
.screen li{display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:start;padding:10px;border-radius:14px;background:rgb(122 147 224 / .12);font-size:.8125rem;line-height:1.35;color:#E3EAF7}
.screen li svg{width:22px;height:22px}
.screen .foot{font-size:.75rem;color:#AFBFE0;border-top:1px solid rgb(122 147 224 / .22);padding-top:10px}
.mail .tag{color:#1E2C4E;justify-self:center}
@container (min-width:34rem){
  .mail .in{grid-template-columns:1fr 17rem;column-gap:28px;align-content:center;align-items:center}
  .mail .in > :not(.device){grid-column:1}
  .mail .device{grid-column:2;grid-row:1 / span 4;margin:0}
  .mail .tag{justify-self:start}
}

/* --- Words tile: brushed "liquid metal" field with a fading word list --- */
.words{min-height:21rem;
  background:
    radial-gradient(60% 80% at 12% 90%, rgb(40 70 158 / .45), transparent 70%),
    radial-gradient(50% 60% at 30% 20%, rgb(255 255 255 / .9), transparent 70%),
    conic-gradient(from 90deg at 24% 55%, #B9CCE6, #E9F1F8, #9BB0D6, #DCEAF0, #A9BCDF, #B9CCE6),
    #C9D8EA}
.words::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg, transparent 30%, rgb(236 243 249 / .94) 52%, #EEF4FA 100%)}
@container (max-width:35.99rem){ .words::before{background:linear-gradient(180deg, transparent 20%, rgb(236 243 249 / .94) 45%, #EEF4FA 100%)} }
.words .in{display:grid;gap:28px;align-content:space-between;height:100%}
.words .lock{display:flex;align-items:center;gap:14px}
.words .lock svg{width:56px;height:56px}
.words .lock b{font-size:1.75rem;letter-spacing:-0.03em;font-weight:700;color:var(--ink)}
.words .lock span{font-size:.9375rem;color:#22325A;font-weight:500}
.stack{font-size:clamp(2rem, 7.2cqi, 3.125rem);line-height:1.08;font-weight:600;letter-spacing:-0.03em}
.stack li:nth-child(1){color:#101E3D}
.stack li:nth-child(2){color:#1D3478}
.stack li:nth-child(3){color:#2E4A96}
.stack li:nth-child(4){color:#48609F}
.stack li:nth-child(5){color:#5B6E9A}
.words .note{font-size:.9375rem;color:#22325A;max-width:34ch}
@container (min-width:36rem){
  .words .in{grid-template-columns:1fr auto;align-items:end}
  .words .left{align-self:stretch;display:grid;align-content:space-between;gap:24px}
}

/* --- Fair tile: the method as a spec with callouts --- */
.fair{background:var(--t-canvas);display:grid;gap:16px;align-content:start}
.spec{position:relative}
.spec svg{width:100%;height:auto;max-width:15rem;margin-inline:auto}
.callouts{display:grid;gap:8px;margin-top:12px}
.callouts li{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:18px;background:var(--t-paper);
  border:1px solid var(--hair);font-size:.9375rem;font-weight:600;line-height:1.25}
.callouts li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--act)}
.spec .lead-lines{display:none}
@container (min-width:24rem){
  .spec{aspect-ratio:1 / .74}
  .spec svg{position:absolute;inset:0;max-width:none;height:100%}
  .spec .lead-lines{display:inline}
  .callouts{margin:0;display:block}
  .callouts li{position:absolute;max-width:40%;box-shadow:0 8px 18px -12px rgb(11 20 40 / .45)}
  .callouts li:nth-child(1){left:0;top:4%}
  .callouts li:nth-child(2){right:0;top:4%}
  .callouts li:nth-child(3){left:0;bottom:4%}
  .callouts li:nth-child(4){right:0;bottom:4%}
}
.lo0{stop-color:#8FA7EA}.lo1{stop-color:#28469E}.lo2{stop-color:#0F1E4F}
.hi0{stop-color:#E9F59A}.hi1{stop-color:#9AA814}.hi2{stop-color:#4E5605}
.fair .aside{font-size:.9375rem;color:var(--t-mute)}

/* --- Why tile (holds a .fig) --- */
.why{background:var(--t-paper);display:grid;gap:18px;align-content:start}

/* --- Won't tile --- */
.wont{background:var(--t-field);display:grid;gap:14px;align-content:start}
.wont ul{display:grid;gap:10px}
.wont li{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start;font-size:1rem;line-height:1.4}
.wont li svg{width:22px;height:22px;margin-top:1px;color:var(--t-link)}
.wont .eyebrow{color:#33446B}

/* --- Tracker tile (uses .status, .cells, .readout) --- */
.tracker{display:grid;gap:16px;align-content:start}
.tracker .meta{font-size:.9375rem;color:var(--t-mute)}
.tracker .meta b{color:var(--t-fg);font-weight:600}

/* --- About + money --- */
.about{background:var(--t-canvas);display:grid;gap:12px;align-content:start}
.about .nd{display:inline-flex;align-self:start;justify-self:start;align-items:center;gap:8px;font-weight:700;font-size:.9375rem;
  padding:8px 14px;border-radius:var(--r-pill);background:var(--t-paper);border:1.5px solid var(--t-fg)}
.money{background:var(--t-paper);display:grid;gap:12px;align-content:start}
.money .zero{display:flex;align-items:baseline;gap:12px}
.money .zero .num{font-size:clamp(4rem, 34cqi, 6rem);line-height:.9;font-weight:500;color:var(--t-link);letter-spacing:-0.05em}
.money .zero span:last-child{font-weight:600;font-size:1rem;line-height:1.25;max-width:10ch}
.money p,.about p{font-size:1rem;color:var(--t-mute)}

/* --- Close tile (uses .btns / .btn-deep / .btn-ghost) --- */
.close{background:radial-gradient(80% 100% at 100% 0%, #3A5CC0, transparent 60%), linear-gradient(150deg, #1F3A88, #0B1428);
  color:#FFFFFF;display:grid;gap:16px;align-content:center}
.close h2{font-size:clamp(1.75rem, 6.2cqi, 2.375rem);line-height:1.08;letter-spacing:-0.03em;font-weight:700;text-wrap:balance;max-width:18ch}
.close p{color:#D7E0F3;max-width:44ch}

/* --- Home tiles in dark mode: re-assigned, not inverted --- */
@media (prefers-color-scheme: dark){
  .hero{background:radial-gradient(120% 90% at 85% 10%, #28469E 0%, transparent 60%), linear-gradient(160deg, #0B1428 0%, #131F3C 60%, #1B294B 120%)}
  .n2 .sub{color:#33446B}
  .mail{background:linear-gradient(180deg, #1B294B 0%, #131F3C 80%)}
  .mail .eyebrow{color:#AFBFE0}
  .mail .tag{color:#C9D5EE}
  .device{background:linear-gradient(145deg, #3A4868, #05080F 45%, #1B294B)}
  .screen{background:linear-gradient(180deg, #0E1830, #0A1226 60%)}
  .cta{background:
    radial-gradient(50% 45% at 24% 28%, rgb(122 147 224 / .34), transparent 70%),
    radial-gradient(40% 55% at 82% 80%, rgb(201 219 58 / .16), transparent 70%),
    radial-gradient(35% 40% at 70% 18%, rgb(202 232 232 / .22), transparent 70%),
    linear-gradient(135deg, #1B294B, #0E1830 55%, #0B1428)}
  .cta::before{opacity:.55;background:conic-gradient(from 200deg at 58% 46%, #1B294B, #3A5296 18%, #0B1428 34%, #2B4280 52%, #0B1428 68%, #2E4A96 84%, #1B294B)}
  .cta .fine,.cta .alt{color:#F1F5FC}
  .cta .alt.link{color:#F1F5FC}
  .words{background:
    radial-gradient(60% 80% at 12% 90%, rgb(40 70 158 / .7), transparent 70%),
    radial-gradient(50% 60% at 30% 20%, rgb(143 163 214 / .45), transparent 70%),
    conic-gradient(from 90deg at 24% 55%, #1B294B, #3F5690, #0E1830, #2B3F74, #111C36, #1B294B),
    #131F3C}
  .words::before{background:linear-gradient(90deg, transparent 30%, rgb(11 20 40 / .9) 52%, #0B1428 100%)}
  .words .lock b{color:#FFFFFF}
  .words .lock span,.words .note{color:#C3D0EC}
  .stack li:nth-child(1){color:#FFFFFF}
  .stack li:nth-child(2){color:#DCE6F5}
  .stack li:nth-child(3){color:#B3C3E6}
  .stack li:nth-child(4){color:#8EA2D2}
  .stack li:nth-child(5){color:#7489BF}
  .fair{background:#1B294B}
  .lo0{stop-color:#FFFFFF}.lo1{stop-color:#C9D5EE}.lo2{stop-color:#6D82BF}
  .hi0{stop-color:#F2FBA8}.hi1{stop-color:#C9DB3A}.hi2{stop-color:#7C8A12}
  .callouts li{background:#0B1428;border-color:#34457A}
  .wont .eyebrow{color:var(--t-mute)}
  .about .nd{background:#0B1428;border-color:#DCE6F5}
  .brandt{background:radial-gradient(90% 120% at 0% 0%, #3A5CC0 0%, transparent 60%), linear-gradient(120deg, #28469E 0%, #1F3A88 60%, #16275A 100%)}
  .close{background:radial-gradient(80% 100% at 100% 0%, #28469E, transparent 65%), linear-gradient(150deg, #1B294B, #0B1428)}
}

/* ==========================================================================
   8b. Subpages (about, tracker, disclosure, 404)
   Calmer reading pages on the same board: an intro tile, a text column of paper tiles
   (max ~68ch), a side column of fact tiles, and one navy .close tile for subscribing.
   Markup: main.page > section.tile.intro + aside.side + div.col + section.tile.close
   ========================================================================== */

/* --- Current page in the header nav and phone menu --- */
.nav a[aria-current="page"]{background:var(--t-paper);box-shadow:inset 0 0 0 1px var(--hair);font-weight:600;
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:var(--act)}
.menu a[aria-current="page"]{background:var(--t-canvas);font-weight:600;
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:var(--act)}

/* --- Page grid: phones stack intro, side, text, close. Desktop: text column + side column. --- */
.page{display:grid;gap:var(--gap);grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "side" "col" "close"}
.page > .intro{grid-area:intro}
.page > .side{grid-area:side}
.page > .col{grid-area:col}
.page > .close{grid-area:close}
.page [id]{scroll-margin-top:96px}
.page.short{grid-template-areas:"intro" "close"}
.col{display:grid;gap:var(--gap);align-content:start;min-width:0}
.side{display:grid;gap:var(--gap);align-content:start;min-width:0}
@media (min-width:48em) and (max-width:63.99em){
  .side{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (min-width:64em){
  .page{grid-template-columns:minmax(0,1fr) minmax(17rem, 21rem);
    grid-template-areas:"intro side" "col side" "close close"}
  .page > .side{grid-row:1 / span 2;align-self:start;position:sticky;top:90px}
  /* short pages (404): message and subscribe side by side */
  .page.short{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-areas:"intro close"}
}
@media (min-width:64em){
  .page:not(.short) > .close{grid-template-columns:minmax(0,1fr) auto;column-gap:32px;align-items:center}
  .page:not(.short) > .close .btns{grid-column:2;grid-row:1 / span 2;margin:0}
}

/* --- Intro tile: the page title --- */
.intro{background:var(--t-field);display:grid;gap:14px;align-content:start}
.intro .eyebrow{color:#33446B}
.intro h1{font-size:clamp(2rem, 6cqi, 2.875rem);line-height:1.06;letter-spacing:-0.03em;font-weight:700;text-wrap:balance;max-width:22ch}
.intro .lead{color:var(--t-fg);font-size:1.125rem;max-width:60ch}
.intro .nd{display:inline-flex;justify-self:start;align-items:center;font-weight:700;font-size:.9375rem;
  padding:8px 14px;border-radius:var(--r-pill);background:var(--t-paper);border:1.5px solid var(--t-fg)}
.intro .meta{font-size:.9375rem;color:var(--t-fg)}
.intro .meta b{font-weight:600}
.intro .cells li{background:var(--t-paper)}
.intro .links{display:flex;flex-wrap:wrap;gap:4px 24px}

/* --- Prose tile: one reading section --- */
.prose{display:grid;gap:14px;align-content:start}
.prose .h2{font-size:clamp(1.375rem, 4.4cqi, 1.625rem)}
.prose h3{font-size:1.125rem;line-height:1.25;font-weight:700;margin-top:10px}
.prose p,.prose li,.prose dd{max-width:68ch;line-height:1.6}
.prose .tile p + p,.prose p + p{margin-top:0}
.prose a:not(.link){color:var(--t-link);text-decoration-thickness:1.5px;text-underline-offset:3px}
.prose strong{font-weight:600}
.prose .fig{max-width:34rem}
.intro .status{align-items:flex-start}
.intro .status::before{flex:none;margin-top:.4em}

/* bullet lists: .dots (things I do) and .nots (things I don't) */
.dots,.nots{display:grid;gap:12px}
.dots li,.nots li{position:relative;padding-left:26px}
.dots li::before{content:"";position:absolute;left:4px;top:.6em;width:9px;height:9px;border-radius:50%;background:var(--act)}
.nots li::before{content:"\00D7";position:absolute;left:2px;top:-.05em;font-weight:700;font-size:1.25rem;line-height:1.3;color:var(--t-link)}

/* callout inside a prose tile */
.callout{border-radius:var(--r-inner);background:var(--t-canvas);border-left:4px solid var(--act);padding:14px 16px}
.callout p{max-width:64ch}

/* --- Side tiles --- */
.side .tile{background:var(--t-canvas);display:grid;gap:10px;align-content:start}
.side .h3{font-size:1rem;font-weight:700;line-height:1.25}
.toc{display:grid}
.toc a{display:flex;align-items:center;min-height:44px;padding:0 2px;border-top:1px solid var(--hair);color:var(--t-link);
  font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.toc li:first-child a{border-top:0}
.keyfacts{display:grid}
.keyfacts div{display:grid;gap:2px;padding:10px 0;border-top:1px solid var(--hair)}
.keyfacts div:first-child{border-top:0;padding-top:0}
.keyfacts div:last-child{padding-bottom:0}
.keyfacts dt{font-size:.8125rem;font-weight:500;color:var(--t-mute)}
.keyfacts dd{margin:0;font-weight:600;line-height:1.35}

/* --- Tracker: scope lists, column definitions, tables --- */
.scope{display:grid;grid-template-columns:repeat(auto-fill, minmax(12rem,1fr));gap:8px}
.scope li{display:grid;justify-items:start;align-content:start;gap:6px;padding:10px 14px;border-radius:var(--r-inner);
  background:var(--t-canvas);font-weight:500;line-height:1.3}
.scope .tag{flex:none;color:var(--t-mute)}
.defs{display:grid;gap:0}
.defs dt{font-weight:600;padding-top:12px;border-top:1px solid var(--hair)}
.defs dt:first-child{border-top:0;padding-top:0}
.defs dd{margin:2px 0 12px;color:var(--t-mute)}
@container (min-width:36rem){
  .defs{grid-template-columns:12rem minmax(0,1fr);column-gap:18px}
  .defs dt,.defs dd{margin:0;padding:12px 0;border-top:1px solid var(--hair)}
  .defs dt:first-of-type,.defs dt:first-of-type + dd{border-top:0;padding-top:0}
}
.table-wrap{overflow-x:auto;border:1px solid var(--hair);border-radius:var(--r-inner);background:var(--t-paper);overscroll-behavior-x:contain}
.data{width:100%;min-width:52rem;border-collapse:collapse;font-size:.9375rem;line-height:1.4}
.data caption{caption-side:top;text-align:left;padding:12px 14px;font-weight:600}
.data th,.data td{padding:10px 12px;text-align:left;vertical-align:top;border-top:1px solid var(--hair)}
.data thead th{background:var(--t-canvas);font-size:.8125rem;font-weight:600;color:var(--t-mute);white-space:nowrap}
.data .empty{padding:20px 14px;color:var(--t-mute)}
.data .empty span{display:block;position:sticky;left:14px;max-width:min(40rem, calc(100vw - 7rem))}
.scroll-hint{font-size:.875rem;color:var(--t-mute)}
@media (min-width:64em){ .scroll-hint{display:none} }
.changelog{display:grid;gap:10px}
.changelog time{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.875rem;font-weight:500;color:var(--t-mute)}
.updated{font-size:.9375rem;color:var(--t-fg)}

/* --- Subpages in dark mode --- */
@media (prefers-color-scheme: dark){
  .intro .eyebrow{color:var(--t-mute)}
  .intro .nd{background:#0B1428;border-color:#DCE6F5}
  .intro .cells li{background:#0B1428}
  .side .tile{background:var(--t-canvas);box-shadow:var(--shadow-tile)}
  .scope li,.callout{background:#0B1428}
  .table-wrap{background:#0B1428}
  .data thead th{background:#101A33}
}

/* ==========================================================================
   9. More contrast, reduced transparency, forced colours, reduced motion
   ========================================================================== */
@media (prefers-contrast: more){
  .bar{background:var(--t-paper);-webkit-backdrop-filter:none;backdrop-filter:none}
  .pill{background:var(--t-paper);-webkit-backdrop-filter:none;backdrop-filter:none;border:2px solid var(--t-fg)}
  .stack li{color:inherit !important}
  .liquid::after{display:none}
}
@media (prefers-reduced-transparency: reduce){
  .bar,.pill{background:var(--t-paper);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (forced-colors: active){
  .tile,.bar,.footer{border:1px solid CanvasText}
  .pill,.btn,.nav a.nav-cta{border:2px solid ButtonText}
  .sph,.cells li{forced-color-adjust:none}
}
@media (prefers-reduced-motion: reduce){ *{transition:none !important;animation:none !important} }