/* ---------------------------------------------------------------------------
   Norquin — the shared page system for every static page.

   Until 2026-08-30 each static page carried its own copy of the stylesheet, on
   the retired cream/wine palette with Newsreader and Plex, while the home page
   had moved to white/blue and Inter. Seven copies is why they drifted. This is
   the one file now; it holds the palette and type of `app/src/index.css`, and
   the pages carry nothing of their own.

   Palette and type are the ones recorded in design-rules §5¾. The report page
   is NOT styled from here: it keeps its own sheet, because a licensed broker
   reviewed that document and its status colours mean something.
   ------------------------------------------------------------------------- */

@font-face{font-family:"Inter";src:url(/fonts/inter-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(/fonts/inter-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Inter";src:url(/fonts/inter-600.woff2) format("woff2");font-weight:600;font-display:swap}
/* the wordmark only — the logo and the footer name, nowhere in running text */
@font-face{font-family:"Newsreader";src:url(/fonts/newsreader.woff2) format("woff2");font-weight:200 800;font-display:swap}
/* the headline face, the landing's (app/src/index.css): Plex, with the trio in front of
   it exactly as the landing declares them — local() only, so a machine without the
   licensed fonts falls straight through to Plex and Inter and the page is unchanged. */
@font-face{font-family:"Plex";src:url(/fonts/plexsans.woff2) format("woff2");font-weight:100 700;font-display:swap}
@font-face{font-family:"Mars";src:local("Mars Standard"),local("MarsStandard-Regular"),local("Mars"),local("Mars-Regular");font-weight:400}
@font-face{font-family:"Mars";src:local("Mars Standard Bold"),local("MarsStandard-Bold"),local("Mars Bold");font-weight:600 700}
@font-face{font-family:"Forma DJR Text";src:local("Forma DJR Text"),local("FormaDJRText-Regular");font-weight:400}
@font-face{font-family:"Forma DJR Text";src:local("Forma DJR Text Medium"),local("FormaDJRText-Medium");font-weight:500}
@font-face{font-family:"Forma DJR Text";src:local("Forma DJR Text Bold"),local("FormaDJRText-Bold");font-weight:600 700}

:root{
  --paper:#FFFFFF; --ink:#101418; --brand:#1552C4; --dark:#0F1B2D;
  --mark:#C084FC;  /* the one purple. 6.7:1 on the footer's ground, AA at any size */
  --rule:#E2E7ED; --mute:#5A6472; --faint:#9AA4B2;
  --parch:#F5F6F8; --band:#F5F6F8;
  --col:1200px;
  /* one stack for every headline on the domain, the landing's own */
  --face-head:"Mars","Plex","IBM Plex Sans",Helvetica,Arial,sans-serif;
  /* the posts' variables, kept so their markup needs no rewriting */
  --tx:#101418; --hi:#101418; --mu:#5A6472; --lk:#1552C4; --bg:#FFFFFF;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:"Forma DJR Text","Inter",Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.47;-webkit-font-smoothing:antialiased;position:relative}
a{color:inherit}
::selection{background:var(--brand);color:#fff}

/* paper grain, same as the home page: no colour, no motion, ~5%. It is what
   makes a flat white page read as printed rather than as a browser default. */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:70;opacity:.05;
  mix-blend-mode:multiply;
  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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media print{body::before{display:none}}

.wrap{max-width:var(--col);margin:0 auto;padding:0 44px}

/* ---------- masthead ---------- */
nav{display:flex;align-items:center;justify-content:space-between;padding:34px 0;gap:26px 56px;flex-wrap:wrap}
/* the wordmark alone, as in the landing's header: the mark came out of every page on
   2026-09-14 (Vlad, "remove the logo"), and the svg with it. */
.logo{display:inline-flex;align-items:center;text-decoration:none}
.logo .mark{display:none}
.logo span,.logo b{font-family:"Newsreader",Georgia,serif;font-weight:400;font-size:27px;
  letter-spacing:.055em;line-height:1}
.nav,.navr{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.nav a,.navr a{font-size:16px;text-decoration:none;color:rgba(23,22,18,.86)}
.nav a:hover,.navr a:hover{color:var(--ink)}
.nav a.here,.navr a.here{color:var(--faint);pointer-events:none}
.btn{display:inline-block;background:var(--brand);color:#fff;text-decoration:none;font-size:15.5px;
  font-weight:500;padding:15px 30px;border-radius:999px;border:0;cursor:pointer}
.btn.sm{padding:11px 22px;font-size:14.5px}
.nav a.btn,.navr a.btn{color:#fff}
/* ---------- type ----------
   One family, two weights. The section label is Apple's mechanism as recorded in
   §5¾: a coloured word at headline size inside an otherwise black sentence, on
   the same line — not an eyebrow sitting above it. */
h1{font-family:var(--face-head);font-weight:600;
  font-size:clamp(38px,4.6vw,60px);line-height:1.07;letter-spacing:-.028em;
  margin-top:26px;max-width:20ch;text-wrap:balance}
h2{font-family:var(--face-head);font-weight:600;font-size:40px;line-height:1.08;
  letter-spacing:-.014em;margin:0 0 20px;max-width:22ch}
h2 .lbl{color:var(--brand)}
h3{font-family:var(--face-head);font-weight:600;font-size:21px;line-height:1.25;
  letter-spacing:-.012em;margin:0 0 9px}
.kicker{font-size:15.5px;color:var(--mute);padding-top:44px}
.stand{font-size:19px;line-height:1.5;color:var(--mute);margin-top:22px;max-width:52ch}
.cta{display:flex;align-items:center;gap:28px;margin-top:38px;flex-wrap:wrap}
.lnk{font-size:15.5px;text-decoration:none;color:var(--brand);
  border-bottom:1px solid rgba(21,82,196,.35);padding-bottom:2px}
.lnk:hover{border-bottom-color:var(--brand)}
section{padding:70px 0 0}
p{margin:0 0 16px;max-width:66ch;color:var(--mute);font-size:17px;line-height:1.47}
p.lead{color:var(--ink);font-size:19px;line-height:1.5}
p b{color:var(--ink);font-weight:600}
.rule{border-top:1px solid var(--rule);margin-top:70px}

/* ---------- tables: the report's own column language ---------- */
table.f{width:100%;border-collapse:collapse;margin:26px 0 10px;max-width:900px}
table.f th{font-size:13px;color:var(--mute);text-align:left;font-weight:500;
  padding:0 20px 10px 0;border-bottom:1.5px solid var(--ink)}
table.f td{padding:14px 20px 14px 0;border-bottom:1px solid var(--rule);vertical-align:top;
  font-size:16px;line-height:1.5;color:var(--mute)}
table.f td.m{font-weight:600;color:var(--ink);white-space:nowrap;
  font-variant-numeric:tabular-nums}
table.f td.w{color:var(--brand);font-weight:500}

/* ---------- sources: the citations stay visible, that is the brand ---------- */
ol.srcs{list-style:none;counter-reset:s;margin:22px 0 0;max-width:900px}
/* A citation is one sentence with a quote and a link inside it, so the li stays
   a normal block: display:flex made every text run, <i> and <a> its own column
   and tore each source into ragged strips. The number hangs in the margin. */
ol.srcs li{counter-increment:s;position:relative;padding:12px 0 12px 34px;
  border-bottom:1px solid var(--rule);font-size:14.5px;line-height:1.5;color:var(--mute)}
ol.srcs li::before{content:counter(s);position:absolute;left:0;top:12px;width:18px;
  text-align:right;font-size:13px;color:var(--faint);font-variant-numeric:tabular-nums;
  line-height:inherit}
ol.srcs a{color:var(--brand);word-break:break-word}

/* ---------- grounds. two flat tones and one dark, never a ramp ---------- */
.band{background:var(--parch);margin-top:70px}
.band .in{max-width:var(--col);margin:0 auto;padding:6px 44px 70px}
.dark{background:var(--dark);color:#fff;margin-top:70px}
.dark .in{max-width:var(--col);margin:0 auto;padding:64px 44px;display:grid;
  grid-template-columns:1fr auto;gap:40px;align-items:end}
.dark .k{font-size:15.5px;color:rgba(255,255,255,.66);margin-bottom:18px}
.dark .big{font-family:var(--face-head);font-weight:600;font-size:38px;
  line-height:1.12;letter-spacing:-.018em;max-width:26ch}
.dark .btn{background:#fff;color:var(--dark);white-space:nowrap}
.dark p{color:rgba(255,255,255,.72)}

/* /resources — the same dated list the two indexes use, three times over with a
   heading on each group. The headings are what stop it reading as one long roll of
   nine unrelated things (design-rules §5¼). Generated by scripts/resources.mjs. */
.rsgroup{font-family:var(--face-head);font-size:26px;font-weight:600;letter-spacing:-.018em;
  margin:64px 0 6px;padding-top:34px;border-top:1px solid var(--rule)}
.post article .rsgroup:first-of-type{margin-top:0;padding-top:0;border-top:0}
.rsnote{margin:0 0 26px;color:var(--mute);max-width:62ch}
.rsnote a{color:var(--brand)}

/* ---------- the header, the landing's, on every page ----------
   Ported from app/src/index.css on 2026-09-15 (Vlad: "lets align all, everywhere with
   the same"). scripts/header.mjs writes the markup; these are the rules that make it
   behave like the landing's — including the letter roll, which is CSS only, so a static
   page gets it with no script.
   ⚠️ TWO COPIES, ONE HEADER. app/src/index.css owns the React one. A change to either
   belongs in both, the same bargain the footer and the report stylesheet already carry. */
nav{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:22px 0;gap:26px}
nav > .logo,nav > .nav,nav > .navact{position:relative;z-index:61}
.logo{display:flex;align-items:center;gap:14px;white-space:nowrap;
  font-family:"Newsreader",Georgia,serif;font-weight:400;font-size:27px;
  letter-spacing:.055em;text-decoration:none;color:var(--ink)}
.logo span,.logo b{font-family:"Newsreader",Georgia,serif;font-weight:400;font-size:27px;
  letter-spacing:.055em;line-height:1}
.nav{display:flex;align-items:center;justify-content:center;gap:10px}
.nav > a.navlink{padding:7px 14px}
.navlink{display:inline-flex;align-items:center;text-decoration:none;color:inherit;
  white-space:nowrap;font-size:16px}
.navlbl{--rollh:1.35em;display:inline-flex;align-items:center}
.navchar{display:inline-block;height:var(--rollh);line-height:var(--rollh);
  overflow:hidden;vertical-align:bottom}
.navroll{display:block;transition:transform .44s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--i) * 22ms)}
.navroll > span{display:block;height:var(--rollh);line-height:var(--rollh)}
.navroll > span:last-child{color:var(--brand)}
.navlink:hover .navroll,.navlink:focus-visible .navroll{transform:translateY(calc(-1 * var(--rollh)))}
.navact{display:flex;align-items:center;justify-content:flex-end;gap:22px}
.navsign{font-size:16px;text-decoration:none;color:rgba(23,22,18,.86);white-space:nowrap}
.navsign:hover{color:var(--brand)}

/* the call to action, the same one the landing draws: the arrow flies across, the text
   slides with it, and a dot grows into a filled pill behind both */
.flow-btn{--fb-l:20px;--fb-r:15px;--fb-gutter:18px;
  position:relative;display:inline-flex;align-items:center;gap:2px;overflow:hidden;
  padding:10.5px calc(var(--fb-r) + var(--fb-gutter)) 10.5px var(--fb-l);
  border-radius:999px;border:1.5px solid rgba(23,22,18,.38);white-space:nowrap;
  background:transparent;font-family:"Forma DJR Text","Inter",Helvetica,Arial,sans-serif;
  font-size:14.5px;font-weight:500;color:var(--ink);text-decoration:none;cursor:pointer;
  transition:border-color .5s cubic-bezier(.23,1,.32,1),color .5s cubic-bezier(.23,1,.32,1)}
.flow-btn:hover{border-color:transparent;color:#fff}
.flow-arrow{position:absolute;width:15px;height:15px;color:var(--ink);z-index:2;
  transition:left .7s cubic-bezier(.34,1.56,.64,1),right .7s cubic-bezier(.34,1.56,.64,1),color .5s}
.flow-arrow-left{left:-30%}
.flow-arrow-right{right:var(--fb-r)}
.flow-btn:hover .flow-arrow-left{left:var(--fb-l);color:#fff}
.flow-btn:hover .flow-arrow-right{right:-30%;color:#fff}
.flow-btn-text{position:relative;z-index:1;transform:translateX(-7px);
  transition:transform .7s cubic-bezier(.22,1,.36,1)}
.flow-btn:hover .flow-btn-text{transform:translateX(15px)}
.flow-btn-circle{position:absolute;top:50%;left:50%;width:16px;height:16px;
  background:var(--brand);border-radius:50%;opacity:0;transform:translate(-50%,-50%);
  transition:width .7s cubic-bezier(.19,1,.22,1),height .7s cubic-bezier(.19,1,.22,1),opacity .5s}
.flow-btn:hover .flow-btn-circle{width:280px;height:280px;opacity:1}

/* ⚠️ INVERTED ON A DARK GROUND, AND THERE ARE TWO OF THEM. Sixteen of the eighteen
   static pages put this header on near-black, under one of two wrappers: posts and
   /resources use `.hero .top`, the legal pages and the two explainers use `.masthead`.
   Missing the second left "Go to app" and the button in ink-on-near-black — invisible —
   on terms, privacy, thanks, entry-check and surtax-refund. Only /report and /404 are
   genuinely light.
   The brand blue on the rolled-up letter goes white here for the same reason: #1552C4
   on #010409 is 2.2:1 and unreadable. */
.hero .top .logo,.hero .top .navlink,.hero .top .navsign,
.masthead .logo,.masthead .navlink,.masthead .navsign{color:rgba(255,255,255,.86)}
.hero .top .navlink:hover,.hero .top .navsign:hover,
.masthead .navlink:hover,.masthead .navsign:hover{color:#fff}
.hero .top .navroll > span:last-child,
.masthead .navroll > span:last-child{color:#fff}
.hero .top .flow-btn,.masthead .flow-btn{border-color:rgba(255,255,255,.5);color:#fff}
.hero .top .flow-arrow,.masthead .flow-arrow{color:#fff}
.hero .top .flow-btn-circle,.masthead .flow-btn-circle{background:#fff}
.hero .top .flow-btn:hover,.masthead .flow-btn:hover{color:var(--ink)}
.hero .top .flow-btn:hover .flow-arrow-left,.hero .top .flow-btn:hover .flow-arrow-right,
.masthead .flow-btn:hover .flow-arrow-left,.masthead .flow-btn:hover .flow-arrow-right{color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  .navroll,.flow-btn,.flow-arrow,.flow-btn-text,.flow-btn-circle{transition:none}
  .navlink:hover .navroll{transform:none}
  .navlink:hover{color:var(--brand)}
}
/* ⚠️ The menu goes, the two doors stay. A phone still needs a way into the app and a way
   to reach a person; the links live in the footer below this width. */
@media (max-width:820px){
  nav{grid-template-columns:1fr auto;gap:14px;padding:18px 0}
  .nav{display:none}
  .navsign{font-size:14.5px}
}

/* the one action on /report, under the lede where the old nav's copy used to be */
.headact{margin:26px 0 0}

/* ---------- footer: the home page's, so every page closes the same way ----------
   Rebuilt 2026-09-14 alongside app/src/components/Footer.jsx and kept identical to it by
   scripts/footer.mjs — a four-column map of the site, then the name, then a thin legal
   line. The wordmark is HTML letters here as it is there, so one set of rules covers
   both; these pages simply do not animate them. */
footer{background:#171A1F;color:rgba(255,255,255,.55);margin-top:80px}
footer .in{max-width:var(--col);margin:0 auto;padding:88px 44px 30px}
/* ⚠️ THE FOUR COLUMNS ARE NOT EQUAL, AND THAT IS THE POINT. Equal columns look tidy in
   the CSS and wrong on the page: measured at 1440px, Product and At the border were
   full to the millimetre and wrapping their labels onto two lines, while Company sat on
   111px of nothing and the identity column on 102px. The eye reads that dead space at
   the end of the row as the footer failing to reach the edge (Vlad, 2026-09-14: "on the
   right side we have gap, free space we need close this").
   So each column gets what its longest line actually needs: the two with sentences for
   labels get the width, Company's four short links give it up, and the last column
   drops its right padding so its ink ends where the rule above it does. */
.footgrid{display:grid;grid-template-columns:.9fr 1.2fr 1.2fr max-content;gap:0;margin-top:64px}
/* ⚠️ `max-content` ON THE LAST COLUMN, NOT A FRACTION, AND NO RIGHT PADDING. A fraction
   gives it a share of the row whether its links need one or not, so "Terms of service"
   stopped 31px short of the rule above it and the row read as unfinished at the right
   end (Vlad, 2026-09-14: "still see free gap on the right side"). Sized to its own
   widest line it ends exactly where the grid does, and the slack it was sitting on goes
   to the three columns that can use it. */
.footcol:last-child{padding-right:0}
.footcol{display:flex;flex-direction:column;align-items:flex-start;gap:15px;padding:0 30px;
  border-left:1px solid rgba(255,255,255,.10)}
.footcol:first-child{padding-left:0;border-left:0}
.footcol h3,.footid b{font-family:var(--face-head);font-size:17px;font-weight:600;
  letter-spacing:-.012em;color:#fff;margin:0 0 8px}
body footer .footid p{margin:0;font-size:16.5px;font-weight:500;line-height:1.45;color:rgba(255,255,255,.74)}
/* ⚠️ `.footid p.footsay`, not `.footsay`: the rule above it zeroes the margin on every
   p in this column and would otherwise win on specificity, closing the gap that sets
   the sentence apart from the address. */
body footer .footrow span{font-size:14px;font-weight:500;color:rgba(255,255,255,.5)}
/* ⚠️ SOLID LINKS, NO UNDERLINE AND NO BORDER (Vlad, 2026-09-14). The only state change
   is the ink going to white.
   ⚠️ Every selector here carries a CLASS, never `footer a` alone: the posts set their
   own link and paragraph colours (`.post a` is brand blue and underlined, `.post p` is
   body ink) and a class beats any number of element names. Without it the footer's links
   rendered as blue underlines and its address as near-black on near-black. */
footer .footcol a,footer .footrow a{color:rgba(255,255,255,.74);text-decoration:none;border:0;
  padding:0;font-size:16.5px;font-weight:500;line-height:1.4;transition:color .14s ease}
footer .footcol a:hover,footer .footrow a:hover{color:#fff;text-decoration:none}
footer .footid a{color:rgba(255,255,255,.9)}
/* ⚠️ The wordmark and the closing line are ONE ROW, and that is what fills the footer's
   top half. On its own the wordmark reaches about 58% across and the rest read as dead
   space (Vlad, 2026-09-14). The line is Daniel's, from 2026-09-10; it was a 20px
   footnote in the identity column and is the second half of a lockup now, set flush to
   the right edge so the row closes where the rules do. */
/* ⚠️ `last baseline`, not `flex-end`. Bottom-aligning the two boxes left the sentence
   sitting 20px under the wordmark's baseline — measured — because a box bottom is not a
   baseline, and the two faces have different descenders. `last baseline` puts the last
   line of the sentence on the wordmark's own baseline and keeps it there at every size
   in the two clamps, which a fixed nudge in em could not. flex-end stays first as the
   fallback for anything that does not know the keyword. */
.foottop{display:flex;align-items:flex-end;align-items:last baseline;
  justify-content:space-between;gap:56px;
  border-top:1px solid rgba(255,255,255,.16);padding-top:52px}
.footmark{display:flex;align-items:baseline;overflow:hidden;margin-left:-.055em;
  font-family:"Newsreader",Georgia,serif;font-weight:400;line-height:1;color:#fff;
  letter-spacing:.02em;font-size:clamp(54px,8.6vw,132px)}
body footer .footid p.footsay,
body footer .footsay{margin:0;color:var(--mark,#C084FC);font-weight:600;text-align:right;
  font-size:clamp(20px,2.3vw,32px);line-height:1.18;letter-spacing:-.02em;white-space:nowrap}
.footmark span{display:inline-block}
.footrow{display:flex;justify-content:space-between;align-items:center;gap:12px 40px;
  flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.16);margin-top:44px;padding-top:22px;
  font-size:14px;font-weight:500;color:rgba(255,255,255,.5)}

@media (max-width:900px){
  .wrap,.band .in,.dark .in{padding-left:22px;padding-right:22px}
  h2{font-size:28px}
  .nav a:not(.btn){display:none}
  .dark .in{grid-template-columns:1fr}
  table.f td,table.f th{font-size:15px}
}
@media (max-width:900px){
  .footgrid{grid-template-columns:1fr 1fr;gap:40px 0}
  .footcol:nth-child(3){padding-left:0;border-left:0}
}
@media (max-width:700px){
  footer .in{padding:56px 24px 26px}
  .footgrid{grid-template-columns:1fr;gap:34px 0;margin-top:40px}
  .footcol{padding:0;border-left:0}
  .foottop{flex-direction:column;align-items:flex-start;gap:26px;padding-top:34px}
  .footmark{font-size:calc((100vw - 48px) * .2)}
  body footer .footsay{text-align:left;white-space:normal}
  .footrow{justify-content:flex-start;gap:10px 26px;margin-top:26px}
}
@page{size:Letter;margin:14mm}
@media print{body{background:#fff}.nav,.navr,.cta,.dark .btn{display:none}
  .dark{background:#fff;color:var(--ink)}.dark .big,.dark p{color:var(--ink)}}

/* ---------- the legal and utility pages ----------
   A narrower measure than the marketing pages, because these are read, not
   scanned, and clause headings that carry a number keep it in its own column.
   Scoped on <body class="legal"> so the wide pages are untouched. */
.legal .wrap{max-width:760px}
/* on these pages the masthead is a direct child of <body>, not inside .wrap, so it
   has to carry the column itself or it spans the whole viewport */
.legal nav{max-width:var(--col);margin:0 auto;padding-left:44px;padding-right:44px}
.legal h1{font-size:clamp(34px,3.6vw,42px);max-width:none}
.legal h2{font-size:25px;line-height:1.3;letter-spacing:-.012em;margin:46px 0 12px;
  display:flex;gap:16px;align-items:baseline;max-width:none}
.legal h2 .cl{color:var(--faint);font-size:14px;font-weight:500;min-width:34px;
  font-variant-numeric:tabular-nums}
.legal p{margin:0 0 13px;max-width:none}
.legal p a{color:var(--brand)}
.legal footer{margin-top:0}
.intro{font-size:19px;line-height:1.5;color:var(--mute);margin-top:26px;max-width:60ch}
.stamp{font-size:14px;color:var(--faint);margin-top:22px}
.back{font-size:15.5px;text-decoration:none;color:var(--mute);
  border-bottom:1px solid var(--rule);padding-bottom:2px}
.back:hover{color:var(--ink)}
@media print{.back{display:none}.legal h2{break-after:avoid}.legal p{orphans:3;widows:3}}

/* ---------- the header band (2026-09-03) ----------
   Every page that is not the home page now opens the same way: the site's
   shader on a dark ground, the masthead over it, and on the two marketing
   pages the headline too. Colours come off the canvas per page and the shader
   itself is web/wash.js, one copy for the whole site — the same reason this
   stylesheet exists at all.

   This was added because /updates/ and /answers/ shipped with a band and these
   pages did not, which made three designs on one domain.

   Named .masthead, not .band: site.css line 119 already owns .band for a light
   grey section, and the first version of this collided with it — every existing
   .band section on /entry-check and /surtax-refund was silently repainted with
   white type on light grey.

   The scrim is not decoration. The wave's light stops climb past #9169BF,
   where white type falls under 4.5:1, and the field moves, so the worst case
   is not a fixed pixel. Contrast is measured on the rendered canvas. */
.masthead{position:relative;overflow:hidden;isolation:isolate;color:#fff}
.masthead .wash{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%}
.masthead .scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(3,4,12,.66),rgba(3,4,12,.52) 46%,rgba(3,4,12,.72))}
.masthead .wrap,.masthead nav{position:relative;z-index:2}
.masthead .wrap{padding-bottom:clamp(48px,6vw,88px)}
.masthead.slim nav{padding-bottom:32px}

/* the masthead, inverted onto the band */
.masthead .logo span{color:#fff}
.masthead .logo .mark{stroke:#fff}
.masthead .nav a,.masthead .navr a,.masthead .back{color:rgba(255,255,255,.82)}
.masthead .back{border-bottom-color:rgba(255,255,255,.3)}
.masthead .nav a:hover,.masthead .navr a:hover,.masthead .back:hover{color:#fff}
.masthead .nav a.here,.masthead .navr a.here{color:rgba(255,255,255,.52)}
/* a brand-blue pill on a blue band disappears; the inverse is the same button.
   Specificity matters here: .nav a.btn is (0,2,1), so .masthead .btn at (0,2,0)
   loses and the pill renders white on white. .masthead a.btn ties and wins on
   source order, and it also catches the hero button, which .nav never did. */
.masthead a.btn{background:#fff;color:var(--ink)}
.masthead a.btn:hover{background:rgba(255,255,255,.88)}

/* the hero, on the band */
.masthead .kicker{color:rgba(255,255,255,.78)}
.masthead h1{color:#fff}
.masthead .stand{color:rgba(255,255,255,.86)}
.masthead .stand b,.masthead .kicker b{color:#fff}
.masthead .lnk{color:#fff;border-bottom-color:rgba(255,255,255,.45)}
.masthead .lnk:hover{border-bottom-color:#fff}

/* ---------------------------------------------------------------------------
   THE POSTS — /updates/ (what changed at the border) and /answers/ (the standing
   rules). Until 2026-09-14 each of the ten pages carried its own 144-line copy of
   a third design: a different measure, a different scale, Inter for the headlines.
   Vlad: "make the whole design-code the same as the landing, remove the logo, sync
   the style, keep it simple." So the rules live here now, once, and the pages keep
   their markup — the class names below are the ones those pages already use.
   ------------------------------------------------------------------------- */
body.post{font-size:19px;line-height:1.72;overflow-x:hidden}
.post .wrap{max-width:41rem;padding:0 24px}
/* the reading progress hairline */
.post .prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:9;transform:scaleX(0);
  transform-origin:0 50%;background:var(--brand);will-change:transform}
@media (prefers-reduced-motion:reduce){.post .prog{display:none}}
/* the band: the site's shader, a scrim over it, the masthead and the title over that */
.post .hero{position:relative;overflow:hidden;isolation:isolate;text-align:center;color:#fff;
  display:flex;flex-direction:column;min-height:clamp(430px,62vh,660px)}
.post .wash{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%}
.post .scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(3,4,12,.66),rgba(3,4,12,.52) 46%,rgba(3,4,12,.72))}
.post .top{position:relative;z-index:2;flex:none;display:flex;align-items:center;
  justify-content:space-between;gap:16px;width:100%;max-width:72rem;margin:0 auto;
  padding:20px 24px;font-size:14px}
.post .top a{color:rgba(255,255,255,.82);text-decoration:none}
.post .top a:hover{color:#fff}
.post .top nav a{margin-left:22px}
.post .logo{color:#fff}
.post .logo b{font-size:21px}
.post .hero .in{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;
  justify-content:center;max-width:44rem;margin:0 auto;width:100%;
  padding:clamp(24px,4vw,48px) 24px clamp(40px,6vw,72px)}
.post .meta{font-size:14px;color:rgba(255,255,255,.82);margin:0 0 clamp(20px,3vw,30px)}
.post .meta b{font-weight:400;color:#fff}
.post .meta i{font-style:normal;opacity:.5;padding:0 9px}
.post .meta a{color:rgba(255,255,255,.82)}
.post h1{font-family:var(--face-head);font-weight:600;color:#fff;margin:0;max-width:none;
  font-size:clamp(37px,6.4vw,68px);line-height:1.03;letter-spacing:-.033em}
/* the accent word cannot be the link blue here: 2.8:1 on this ground */
.post h1 .lbl{color:rgba(255,255,255,.62)}
.post .deck{font-size:clamp(18px,2.1vw,21px);line-height:1.5;color:rgba(255,255,255,.86);
  max-width:33rem;margin:clamp(20px,3vw,28px) auto 0}
/* the article */
.post article{padding-top:clamp(40px,6vw,72px)}
.post p{margin:0 0 28px;max-width:none;font-size:inherit;line-height:inherit;color:var(--ink)}
.post h2{font-family:var(--face-head);font-weight:600;color:var(--ink);letter-spacing:-.022em;
  max-width:none;font-size:clamp(23px,3vw,30px);line-height:1.22;margin:clamp(46px,6vw,72px) 0 20px}
.post a{color:var(--brand);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--brand) 40%,transparent)}
.post a:hover{text-decoration-color:currentColor}
.post blockquote{margin:32px 0;padding:2px 0 2px 22px;border-left:2px solid var(--brand);
  color:var(--ink);font-size:20px;line-height:1.6}
.post blockquote p{margin:0}
.post blockquote p+p{margin-top:16px}
/* a wide table scrolls inside itself; the page never scrolls sideways */
.post .tw{overflow-x:auto;margin:32px 0;padding-bottom:2px}
.post table{border-collapse:collapse;width:100%;min-width:33rem;font-size:16px;line-height:1.5}
.post th,.post td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--rule);vertical-align:top}
.post th{font-weight:600;color:var(--ink);background:var(--parch);white-space:nowrap}
.post td.n,.post .n{font-variant-numeric:tabular-nums}
.post td.n:first-child{white-space:nowrap}
.post .cta{border:1px solid var(--rule);border-left:2px solid var(--brand);
  padding:24px 26px;margin:clamp(46px,6vw,72px) 0 0;font-size:18px;line-height:1.62;display:block}
.post .cta p{margin:0}
.post .cta strong{color:var(--ink);font-weight:600}
.post .src{font-size:15px;line-height:1.62;color:var(--mute);
  border-top:1px solid var(--rule);margin-top:clamp(44px,6vw,64px);padding-top:26px}
.post .src strong{color:var(--ink);font-weight:600}
.post .src p{margin:0 0 14px;color:var(--mute);font-size:inherit;line-height:inherit}
.post .src ul{margin:14px 0;padding:0;list-style:none}
.post .src li{margin-bottom:10px;padding-left:16px;position:relative}
.post .src li::before{content:"";position:absolute;left:0;top:.75em;width:7px;height:1px;background:var(--mute)}
/* the index pages' list of posts */
.post ol.list{list-style:none;margin:0;padding:0}
.post ol.list li{border-top:1px solid var(--rule);padding:30px 0}
.post ol.list li:last-child{border-bottom:1px solid var(--rule)}
.post ol.list time{display:block;font-size:14px;color:var(--mute);margin-bottom:9px;font-variant-numeric:tabular-nums}
.post ol.list h2{font-size:clamp(22px,2.6vw,27px);margin:0 0 10px;line-height:1.24}
.post ol.list h2 a{color:var(--ink);text-decoration:none}
.post ol.list h2 a:hover{color:var(--brand)}
.post ol.list p{margin:0;color:var(--mute);font-size:18px;line-height:1.55}
.post nav.foot{display:flex;flex-wrap:wrap;gap:22px;font-size:15px;padding:26px 0 clamp(64px,9vw,110px);
  border-top:1px solid var(--rule);margin-top:clamp(46px,6vw,72px)}
.post nav.foot a{color:var(--mute);text-decoration:none}
.post nav.foot a:hover{color:var(--ink)}
/* the title arrives once and never loops; nothing is ever hidden by script */
@keyframes rise{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
@keyframes dawn{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .post .hero .meta,.post .hero h1,.post .hero .deck{opacity:0;animation:rise .85s cubic-bezier(.2,.7,.2,1) forwards}
  .post .hero h1{animation-delay:.07s}
  .post .hero .deck{animation-delay:.15s}
  .post .wash,.post .scrim{opacity:0;animation:dawn 1.4s cubic-bezier(.2,.7,.2,1) forwards}
}
@media (max-width:640px){
  body.post{font-size:17.5px}
  .post .top{padding:16px 20px;font-size:13px}
  .post .top nav a{margin-left:16px}
  .post .wrap,.post .hero .in{padding-left:20px;padding-right:20px}
  .post blockquote{font-size:18px;margin:26px 0;padding-left:18px}
  .post .cta{padding:20px;font-size:17px}
}