/* The design layer: the ledger, lit.
   Two themes, neither forced: the system preference decides and the
   toggle overrides it per person (2026-08-30). One display face (Bricolage Grotesque, variable
   400-800, self-hosted WOFF2 ~75KB), mono microlabels for the system's
   voice, sans for reading text. Committed color lives in deep-green ink
   containers on the paper, not in a timid grey wash.
   No framework, no build step. craft/WEB.md Parts 16 and 17. */

@font-face{
  font-family:"Bricolage Grotesque";
  src:url(/assets/fonts/bricolage-v2.woff2) format("woff2");
  font-weight:400 800;font-style:normal;font-display:swap;
}

/* ---- the palette ------------------------------------------------------
   NEITHER theme is forced. `color-scheme: light dark` hands the choice to
   the visitor's own system, and the toggle overrides it per person and
   remembers. Both looks are first-class and both are designed; picking one
   for everybody would be picking for them.

   Every colour is declared ONCE with light-dark(), light value first. The
   palette used to be written out three times (a light :root, a
   prefers-color-scheme block, and a [data-theme] block), which is how a
   token gets fixed in two of the three places and one theme quietly rots.
   light-dark() cannot express gradients, shadows or numbers, so those few
   stay in the small paired block below and are the only thing written
   twice.

   Surfaces are modelled, not filled. --sheen is the light falling on a
   card from above, --edge is the lit top edge itself, and the shadows are
   layered ambient + contact, tinted to the scene rather than pure black.
   A flat fill with a 1px border and a black drop shadow is the default,
   and the default is what this is built against. */
:root{
  /* Native controls read this: selects, scrollbars, date pickers and
     autofill. Without it a <select> renders as a white system widget on a
     dark page, which is the loudest possible "nobody checked". */
  color-scheme:light dark;

  /* paper / ground */
  --bg:light-dark(#f6f1e7,#0b0f0d);
  --bg2:light-dark(#efe8da,#111713);
  --panel:light-dark(rgba(255,255,255,.82),rgba(255,255,255,.045));
  --panel2:light-dark(#ffffff,rgba(255,255,255,.085));
  --card:light-dark(#fffdf9,#151d18);
  --line:light-dark(rgba(29,34,43,.10),rgba(226,240,232,.10));
  --line2:light-dark(rgba(29,34,43,.20),rgba(226,240,232,.19));
  --txt:light-dark(#161b21,#eef3ee);
  --txt2:light-dark(#4c545c,#aab4ad);
  --txt3:light-dark(#666d75,#7c877f);

  /* the accent world */
  --green:light-dark(#166c4e,#4fd39b);
  --green-bright:light-dark(#219a6f,#77f0bb);
  --green-deep:light-dark(#0f4633,#1d5e4a);
  --green-glow:light-dark(rgba(26,107,79,.11),rgba(79,211,155,.15));
  --amber:light-dark(#8a5220,#d99a5e);
  --amber-big:light-dark(#a25f2c,#e5a86a);
  --amber-sheen:light-dark(#d99a5e,#ecc094);
  --amber-glow:light-dark(rgba(176,106,53,.12),rgba(217,154,94,.10));
  --red:light-dark(#7a3030,#cf7f74);
  --madder:light-dark(#b23a32,#c9645a);

  /* The committed container. Its whole job is to be the surface furthest
     from the ground, so it inverts with the theme: ink on paper, paper on
     the dark. A panel defined as "the dark one" rather than "the far one"
     disappears the moment the page itself goes dark. */
  --ink:light-dark(#0f1a14,#efe7d7);
  --ink-2:light-dark(#16261d,#f8f3e9);
  --ink-txt:light-dark(#f2efe6,#141a16);
  --ink-txt2:light-dark(#b9c2b6,#3f4842);
  --ink-txt3:light-dark(#84907f,#6b756e);
  --ink-line:light-dark(rgba(242,239,230,.14),rgba(255,255,255,.22));
  --ink-panel:light-dark(rgba(255,255,255,.05),rgba(20,26,22,.05));
  --ink-green:light-dark(#5fd4a2,#116b4c);
  --ink-amber:light-dark(#d99a5e,#9a5d29);
  --ink-rule:light-dark(rgba(150,180,220,.06),rgba(40,60,50,.07));
  --ink-glow-a:light-dark(rgba(95,212,162,.13),rgba(26,107,79,.10));
  --ink-glow-b:light-dark(rgba(217,154,94,.10),rgba(176,106,53,.10));
  --ink-accent-a:light-dark(#ecc094,#c8813a);
  --ink-accent-b:light-dark(#e5a86a,#8a5220);

  --rule:light-dark(rgba(70,110,160,.07),rgba(150,200,175,.045));
  --cta-txt:light-dark(#ffffff,#04140d);

  /* shape and type */
  --r:26px;
  --r-s:16px;
  --display:"Bricolage Grotesque",-apple-system,"Segoe UI",Arial,sans-serif;
  --serif:var(--display); /* legacy alias; every page reads this */
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;

  /* light values for what light-dark() cannot express */
  --sheen:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.25) 40%,rgba(255,255,255,0) 72%);
  --edge:inset 0 1px 0 rgba(255,255,255,.95);
  --ink-edge:inset 0 1px 0 rgba(255,255,255,.10);
  --shadow:0 30px 64px -22px rgba(62,49,28,.28), 0 8px 20px -10px rgba(62,49,28,.16), 0 1px 2px rgba(62,49,28,.10);
  --shadow-s:0 14px 34px -14px rgba(62,49,28,.22), 0 3px 8px -4px rgba(62,49,28,.12);
  --cta:linear-gradient(180deg,#1e8460,#12583f);
  --cta-glow:0 10px 26px -10px rgba(18,88,63,.55), inset 0 1px 0 rgba(255,255,255,.22);
  --vignette:rgba(60,45,20,.07);
  --grain:.035;
}

/* The dark values for the seven tokens light-dark() cannot carry. Written
   twice on purpose: once for the system preference, once for an explicit
   choice. Nothing else in the palette is duplicated. */
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --sheen:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012) 38%,rgba(255,255,255,0) 70%);
  --edge:inset 0 1px 0 rgba(255,255,255,.075);
  --ink-edge:inset 0 1px 0 rgba(255,255,255,.7);
  --shadow:0 34px 80px -24px rgba(0,0,0,.8), 0 8px 24px -10px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.5);
  --shadow-s:0 16px 40px -16px rgba(0,0,0,.7), 0 3px 10px -4px rgba(0,0,0,.5);
  --cta:linear-gradient(180deg,#5fe0aa,#2fa478);
  --cta-glow:0 10px 30px -8px rgba(79,211,155,.5), inset 0 1px 0 rgba(255,255,255,.4);
  --vignette:rgba(0,0,0,.30);
  --grain:.05;
}}
:root[data-theme=dark]{
  color-scheme:dark;
  --sheen:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012) 38%,rgba(255,255,255,0) 70%);
  --edge:inset 0 1px 0 rgba(255,255,255,.075);
  --ink-edge:inset 0 1px 0 rgba(255,255,255,.7);
  --shadow:0 34px 80px -24px rgba(0,0,0,.8), 0 8px 24px -10px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.5);
  --shadow-s:0 16px 40px -16px rgba(0,0,0,.7), 0 3px 10px -4px rgba(0,0,0,.5);
  --cta:linear-gradient(180deg,#5fe0aa,#2fa478);
  --cta-glow:0 10px 30px -8px rgba(79,211,155,.5), inset 0 1px 0 rgba(255,255,255,.4);
  --vignette:rgba(0,0,0,.30);
  --grain:.05;
}
:root[data-theme=light]{color-scheme:light}

*{box-sizing:border-box}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
html{scroll-behavior:smooth;overflow-x:clip}
html,body{margin:0}
body{
  background:var(--bg);
  color:var(--txt);
  font:17px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* The ground: ruled ledger texture, two glows, and a vignette that pulls
   the edges down so the page has a centre. Fixed, cheap, no images. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(64rem 40rem at 78% -14%, var(--green-glow), transparent 62%),
    radial-gradient(44rem 30rem at -12% 106%, var(--amber-glow), transparent 62%),
    radial-gradient(120% 90% at 50% 40%, transparent 45%, var(--vignette) 100%),
    repeating-linear-gradient(to bottom, transparent 0 71px, var(--rule) 71px 72px);
}
/* Grain. A flat dark ground bands on real displays and reads as untreated
   CSS; a little noise is what gives a screen surface a material. One
   inline SVG, no request, no layout cost, and it sits above the ground and
   below everything else. */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  opacity:var(--grain);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-transparency:reduce){body::after{display:none}}

.wrap{max-width:64rem;margin:0 auto;padding:0 1.25rem 6rem}

/* the system's voice */
.micro{
  font:600 .72rem/1 var(--mono);
  letter-spacing:.18em;text-transform:uppercase;color:var(--txt3);
}
.micro .live{color:var(--green)}

/* display type */
.display{
  font-family:var(--display);font-weight:640;
  letter-spacing:-.03em;line-height:1;margin:0;
  font-variation-settings:"opsz" 96;
}
.serifnum{font-family:var(--display);font-weight:620;
  font-variant-numeric:lining-nums;letter-spacing:-.03em;
  font-variation-settings:"opsz" 96}
.ital{font-family:var(--display);font-weight:520;letter-spacing:-.015em}


/* shared page furniture (used by /, /system, /book) */
section,[id]{scroll-margin-top:6.5rem}
/* capsule nav */
.nav{position:sticky;top:1rem;z-index:20;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;margin-top:1.1rem;
  padding:.55rem .6rem .55rem 1.4rem;border-radius:999px;
  transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.nav.hid{transform:translateY(calc(-100% - 1.4rem))}
.nav .wordmark{font-family:var(--display);font-weight:680;font-size:1.3rem;
  letter-spacing:-.03em;color:var(--txt);text-decoration:none;
  display:inline-flex;align-items:center;gap:.6rem}
/* The mark, shared: the homepage carries its own copy for the hero and
   footer; this is the nav's, so any product page's header wears the same
   logo at the same size. The dot pulses like the homepage's, and stops
   when the visitor has asked motion to stop. */
.nav .mark{width:1.7em;height:1.7em;flex:none;border-radius:.42em;
  box-shadow:0 1px 4px rgba(15,26,20,.25)}
@media (prefers-reduced-motion:no-preference){
  .nav .markdot{transform-box:fill-box;transform-origin:center;
    animation:markpulse 3.2s ease-in-out infinite}
  @keyframes markpulse{0%,72%,100%{transform:scale(1)}84%{transform:scale(1.35)}}
}
.nav .links{display:flex;gap:1.6rem}
.nav .links a{font:600 .72rem/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--txt3);text-decoration:none;
  transition:color .25s}
.nav .links a:hover{color:var(--txt)}
.nav .right{display:flex;align-items:center;gap:.5rem}
.nav .btn{min-height:42px;padding:.7rem 1.25rem;font-size:.88rem}
.tbtn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line2);
  background:transparent;color:var(--txt2);cursor:pointer;font-size:1rem;
  display:inline-flex;align-items:center;justify-content:center;
  transition:color .25s,border-color .25s,transform .25s}
.tbtn:hover{color:var(--txt);border-color:var(--txt3);transform:rotate(15deg)}
@media(max-width:720px){.nav .links{display:none}}
.rec{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:baseline;
  padding:.68rem 1rem;border-bottom:1px solid var(--line)}
.rec:last-child{border-bottom:0}
.rec .t{font-weight:650;font-size:.92rem}
.rec .t small{display:block;font-weight:400;color:var(--txt3);font-size:.78rem;margin-top:.1rem}
.rec .a{font:600 .6rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt3);white-space:nowrap}
.rec.green .t,.rec.green .a{color:var(--green)}
.frag{border:1px solid var(--line);border-radius:var(--r-s);
  background:var(--sheen),var(--bg2);box-shadow:var(--edge);padding:.95rem 1rem}
.frag .fslots{display:flex;gap:.45rem;flex-wrap:wrap}
.frag .fslot{font:600 .8rem/1 var(--sans);padding:.5rem .75rem;background:var(--panel2);
  border-radius:999px;border:1px solid var(--line2);color:var(--txt2);cursor:pointer;
  transition:color .2s,background .2s,border-color .2s}
.frag .fslot:hover{border-color:var(--txt3);color:var(--txt)}
/* a held time is green everywhere this system speaks; this one demo pill
   was ink, which said "selected" where the page means "held" */
.frag .fslot.on{background:var(--cta);color:var(--cta-txt);
  border-color:transparent;font-weight:700;box-shadow:var(--cta-glow)}
.frag .fline{display:flex;justify-content:space-between;gap:.4rem 1rem;flex-wrap:wrap;
  font:500 .78rem/2.1 var(--mono);color:var(--txt3)}
.frag .fline b{color:var(--green);font-weight:600;min-width:0;text-align:right}
.frag .ftaps{display:grid;gap:.45rem}
.frag .ftap{font:600 .82rem/1 var(--sans);padding:.55rem .8rem;text-align:center;
  background:var(--panel2);border-radius:999px;border:1px solid var(--line2);color:var(--txt2);
  cursor:pointer;transition:color .2s,background .2s,border-color .2s}
.frag .ftap:hover{border-color:var(--txt3);color:var(--txt)}
.frag .ftap.on{border-color:var(--green);color:var(--green)}
.mhead{display:flex;justify-content:space-between;align-items:center;
  padding:.8rem 1rem;border-bottom:1px solid var(--line)}
.mbody{padding:.9rem 1rem 1rem}

/* masthead */
.mast{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem 1rem;
  padding:1.6rem 0 0;flex-wrap:wrap;
}
.mast>.micro{white-space:nowrap}
.dot{
  display:inline-block;width:.5rem;height:.5rem;border-radius:50%;
  background:var(--green);vertical-align:1px;margin-right:.45rem;
  box-shadow:0 0 0 0 var(--green-glow);
}
@media (prefers-reduced-motion:no-preference){
  .dot{animation:pulse 2.6s ease-out infinite}
  @keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(46,162,114,.45)}
    70%{box-shadow:0 0 0 .6rem rgba(46,162,114,0)}
    100%{box-shadow:0 0 0 0 rgba(46,162,114,0)}
  }
}

/* panels */
.panel{
  background:var(--sheen),var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow),var(--edge);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
}
.panel--tint{
  background:linear-gradient(160deg, var(--green-glow), transparent 55%), var(--panel);
}
.panel--amber{
  background:linear-gradient(160deg, var(--amber-glow), transparent 55%), var(--panel);
}
/* The committed container: the one panel on the page that is not the
   page. Its whole job is to be the loudest surface, and the way a surface
   gets loud is by being FURTHEST from the ground it sits on.

   On paper that meant deep green ink. On the dark ground it has to be the
   inverse or it disappears, which is exactly what happened when dark
   became the default: an ink panel on a near-black page is a rectangle
   you cannot see. So under dark this is the paper itself, laid on the
   desk like a document. Same idea, opposite direction, and it ties the
   two themes together instead of leaving one of them broken. */
.panel--ink{
  background:
    repeating-linear-gradient(to bottom, transparent 0 47px, var(--ink-rule) 47px 48px),
    radial-gradient(46rem 30rem at 85% -20%, var(--ink-glow-a), transparent 60%),
    radial-gradient(36rem 26rem at -8% 112%, var(--ink-glow-b), transparent 60%),
    linear-gradient(170deg, var(--ink-2), var(--ink));
  border:1px solid var(--ink-line);
  color:var(--ink-txt);
  box-shadow:var(--shadow),var(--ink-edge);
}
.panel--ink .micro{color:var(--ink-txt3)}
.panel--ink .micro .live{color:var(--ink-green)}

/* pills */
.pill{
  font:600 .85rem/1 var(--sans);
  padding:.62rem 1.05rem;border-radius:999px;cursor:pointer;
  border:1px solid var(--line2);background:transparent;color:var(--txt2);
  min-height:44px;
  transition:color .18s,background .18s,border-color .18s;
}
.pill:hover{color:var(--txt);border-color:var(--txt3)}
.pill[aria-pressed=true]{
  background:var(--txt);color:var(--bg);border-color:var(--txt);font-weight:700;
}
.btn{
  font:650 .95rem/1 var(--sans);
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.95rem 1.5rem;border-radius:999px;border:0;cursor:pointer;
  background:var(--txt);color:var(--bg);min-height:48px;
  text-decoration:none;
  transition:transform .18s ease,opacity .18s;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
/* The one thing on the page a visitor is asked to press should look
   lit, not filled. Gradient body, lit top edge, and a glow the colour of
   the button rather than a grey drop shadow. */
.btn.green{background:var(--cta);color:var(--cta-txt);box-shadow:var(--cta-glow)}
.btn.green:hover{transform:translateY(-1px);filter:saturate(1.06) brightness(1.04)}
.btn.ghost{
  background:var(--bg);color:var(--txt2);border:1px solid var(--line2);
}
.btn.ghost:hover{color:var(--txt)}

/* inputs */
.field{
  width:100%;padding:.85rem 1rem;font:inherit;color:var(--txt);
  background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r-s);
  outline:none;transition:border-color .18s;
}
.field:focus{border-color:var(--green)}
label.lab{display:block;margin:1.1rem 0 .4rem}

/* entrance: quiet, staggered, honored off */
.rise{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0;transform:translateY(14px);
    animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
  .rise.d1{animation-delay:.08s}.rise.d2{animation-delay:.16s}
  .rise.d3{animation-delay:.24s}.rise.d4{animation-delay:.32s}
  @keyframes rise{to{opacity:1;transform:none}}
}

/* skeleton shimmer that reserves its box */
.skel{
  color:transparent!important;background:var(--bg2);
  border-radius:10px;user-select:none;
}
@media (prefers-reduced-motion:no-preference){
  .skel{animation:sk 1.5s ease-in-out infinite}
  @keyframes sk{50%{opacity:.5}}
}


/* shared components (both product surfaces) */

/* The standings row. It was drawn as a flow with arrows between the
   steps, which claimed a cohort moving through a funnel; the numbers are
   current-state counts and grew at every step, because outcome_reported
   accumulates for ever while captured empties as people book. It is a
   column of standings now, and the chain with real rates lives on
   /record/flow/. */
.path{padding:1.7rem 1.6rem;display:block}
.path a{color:var(--green)}
.pathrow{display:flex;align-items:baseline;flex-wrap:wrap;gap:1.1rem 2.4rem}
.step{display:flex;align-items:baseline;gap:1.1rem}
.step .n{font-family:var(--display);font-weight:620;font-size:2.1rem;line-height:1;
  letter-spacing:-.02em}
.step .l{font:600 .68rem/1.25 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--txt3);max-width:7.5rem}
.step .arrow{color:var(--txt3);font-size:1.1rem;padding:0 1.2rem}
/* No green on the last one: it used to mean "the end of the chain" and
   in a standings row the last item is only whatever sorted last. */

/* section heads */
section{margin-top:4.6rem}
.shead{display:flex;align-items:baseline;justify-content:space-between;
  gap:.4rem 1rem;margin-bottom:1.2rem;flex-wrap:wrap}
/* Air between blocks that each carry their own heading, so two sections
   inside one <section> read as two sections rather than as a title with a
   subtitle under it. The rule sits on the wrappers rather than on .shead
   because the headings are INSIDE them, so no sibling selector reaches. */
#callswrap + #unmarkedwrap,#callswrap + .shead,
#unmarkedwrap + .shead,.panel + .shead{margin-top:2.8rem}
.shead h2{font-family:var(--display);font-weight:640;
  font-size:clamp(1.9rem,5vw,2.6rem);
  letter-spacing:-.03em;margin:0;line-height:1.02;
  font-variation-settings:"opsz" 96}
.shead .micro{white-space:nowrap}

/* the running table as a product panel */
.runpanel{overflow:hidden}
.runwrap{overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.runwrap::-webkit-scrollbar{height:8px}
.runwrap::-webkit-scrollbar-thumb{background:var(--line2);border-radius:4px}
.runwrap::-webkit-scrollbar-track{background:transparent}
.runhead,.runrow{display:grid;gap:.8rem;align-items:center;padding:.95rem 1.5rem}
.runhead{border-bottom:1px solid var(--line)}
.runhead span{font:600 .66rem/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--txt3)}
.runrow{border-bottom:1px solid var(--line)}
.runrow:last-child{border-bottom:0}
.chip{font:650 .72rem/1 var(--mono);letter-spacing:.06em;
  padding:.38rem .6rem;border-radius:9px;background:var(--panel2);
  border:1px solid var(--line);box-shadow:var(--edge);display:inline-block}
.chip.bad{color:var(--red);border-color:var(--red)}
.chip.green{color:var(--green);border-color:var(--green)}
.runrow .num{font-family:var(--display);font-weight:620;font-size:1.35rem;
  text-align:right;letter-spacing:-.02em}
.runrow .cost{color:var(--amber-big);font-size:1.55rem}
.runfoot{padding:1rem 1.5rem;border-top:1px solid var(--line);
  font-size:.85rem;color:var(--txt3)}

/* statement panels: empty states as designed moments */
.statement{padding:2.6rem 2rem 2.4rem;text-align:center}
.statement .big{font-family:var(--display);font-weight:560;
  font-size:clamp(1.6rem,4.6vw,2.2rem);line-height:1.12;margin:0;
  letter-spacing:-.02em}
.statement .sub{color:var(--txt3);font-size:.95rem;max-width:44ch;
  margin:.9rem auto 0}

/* error panel */
.errpanel{padding:3rem 2rem;text-align:center;margin-top:4rem}
.errpanel .big{font-family:var(--display);font-weight:620;
  font-size:clamp(1.9rem,6vw,2.8rem);
  line-height:1.05;margin:0 0 1rem;letter-spacing:-.03em}
.errpanel p{color:var(--txt2);max-width:46ch;margin:.4rem auto}

footer{margin-top:5.5rem;color:var(--txt3);font-size:.85rem;
  border-top:1px solid var(--line);padding-top:1.5rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

[hidden]{display:none!important}
::selection{background:var(--green-deep);color:#fff}

/* narrow screens: the system's voice wraps instead of pushing the page */
@media(max-width:520px){
  .shead .micro,.mast>.micro,.vhead .micro{white-space:normal;line-height:1.6}
}

/* ---- shared chrome on every page (2026-09-10) -----------------------
   The header, the breadcrumb line and the footer are the same markup on
   every page; the front page carries the same footer. Pages used to end
   in a one-line list of links and a sentence about a data file. */
.crumbs{margin:1.6rem 0 0;font:600 .72rem/1.6 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--txt3);display:flex;flex-wrap:wrap;gap:.45rem}
.crumbs a{color:var(--txt3);text-decoration:none}
.crumbs a:hover{color:var(--txt)}
.crumbs span[aria-current]{color:var(--txt2)}
.crumbs+.head{margin-top:1.2rem}
.bigfoot{margin-top:5.5rem;border-top:1px solid var(--line);padding-top:2.6rem;
  display:block;color:var(--txt2);font-size:.95rem}
.fgrid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  gap:2rem 3rem}
@media(max-width:720px){.fgrid{grid-template-columns:1fr;gap:1.8rem}}
.fbrand .wordmark{font-family:var(--display);font-weight:680;font-size:1.5rem;
  letter-spacing:-.03em;color:var(--txt);text-decoration:none;display:inline-flex;align-items:center;gap:.6rem}
.fbrand .mark{width:1.5em;height:1.5em;border-radius:.42em}
.fbrand p{color:var(--txt2);max-width:24rem;margin:.8rem 0 0}
.fcol{display:flex;flex-direction:column;gap:.65rem;align-items:flex-start}
.fcol .micro{margin-bottom:.35rem}
.fcol a{color:var(--txt2);text-decoration:none;transition:color .25s}
.fcol a:hover{color:var(--txt)}
.fcol span{color:var(--txt3)}
.fbase{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-top:1px solid var(--line);margin-top:2.4rem;padding:1.4rem 0 0;
  color:var(--txt3);font-size:.85rem;align-items:center}
.fbase a{color:var(--txt3)}
@media(max-width:820px){.nav .links{display:none}}
.nav .links a,.nav .btn{white-space:nowrap}
@media(max-width:1180px){.nav .links{gap:1.1rem}.nav .links a{font-size:.66rem;letter-spacing:.1em}}

/* ---- the header's menus and the footer's groups (2026-09-10) --------
   Two of the header links open a panel on hover or focus: the calculators
   and the guides. The footer's two middle columns open the same lists on
   hover, so a person who reads to the bottom can go straight to a tool. */
.nav .links{position:relative;align-items:center}
.nav .links>a,.nav .has-menu>a{display:inline-flex;align-items:center;line-height:1}
.nav .has-menu{display:inline-flex;align-items:center}
.nav .has-menu{position:relative}
.nav .has-menu>a::after{content:"";display:inline-block;width:.42em;height:.42em;margin-left:.45em;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-.15em) rotate(45deg);opacity:.7}
.nav .menu{position:absolute;left:-1rem;top:calc(100% + .9rem);min-width:19rem;padding:1.1rem 1.2rem 1.2rem;
  border-radius:var(--r-s);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);
  display:grid;gap:1rem 2.2rem;opacity:0;visibility:hidden;transform:translateY(-.4rem);
  transition:opacity .18s ease,transform .22s cubic-bezier(.2,.7,.2,1),visibility 0s linear .22s;z-index:30}
.nav .menu.wide{min-width:36rem;grid-template-columns:1fr 1fr}
.nav .menu.end{left:auto;right:-1rem}
.nav .mg{display:grid;gap:.1rem;align-content:start}
.nav .has-menu:hover .menu,.nav .has-menu:focus-within .menu,.nav .has-menu.open .menu{
  opacity:1;visibility:visible;transform:none;transition-delay:0s}
.nav .has-menu::before{content:"";position:absolute;left:0;right:0;top:100%;height:1rem}
.nav .menu .mh{font:600 .66rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--txt3);
  margin:0 0 .4rem;padding:0}
.nav .menu a{font:500 .92rem/1.35 var(--sans);letter-spacing:0;text-transform:none;color:var(--txt);
  padding:.32rem .5rem;margin:0 -.5rem;border-radius:8px;text-decoration:none;display:block}
.nav .menu a:hover,.nav .menu a:focus-visible{background:var(--bg2);color:var(--txt)}
.nav .menu a small{display:block;color:var(--txt3);font-size:.8rem;margin-top:.05rem}
@media(prefers-reduced-motion:reduce){.nav .menu{transition:none}}

.fcol .group{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s cubic-bezier(.2,.7,.2,1)}
.fcol .group>div{overflow:hidden;display:flex;flex-direction:column;gap:.55rem;align-items:flex-start}
.fcol .group>div>a:first-child{margin-top:.55rem}
.fcol:hover .group,.fcol:focus-within .group,.fcol.open .group{grid-template-rows:1fr}
.fcol .hint{font-size:.85rem;color:var(--txt3)}
.fcol .lead{color:var(--txt);font-weight:600}
@media(prefers-reduced-motion:reduce){.fcol .group{transition:none}}
@media(max-width:720px){.fcol .group{grid-template-rows:1fr}}

.crumbs{margin:1.4rem 0 0;font:500 .86rem/1.6 var(--sans);letter-spacing:0;text-transform:none;
  color:var(--txt3);display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.crumbs a{color:var(--txt2);text-decoration:none}
.crumbs a:hover{color:var(--txt);text-decoration:underline;text-underline-offset:.2em}
.crumbs .sep{opacity:.55}
.crumbs span[aria-current]{color:var(--txt3)}

/* ---- the article template: guides and posts (2026-09-10) ------------
   A category tag and read time on the byline, the contents in a rail on
   the right that stays put while the page scrolls, one pitch box in the
   rail and one two thirds down the body, and related reading with the
   section and the read time on each. */
.byline{color:var(--txt3);font-size:.92rem;margin:1rem 0 0}
.byline .tag{display:inline-block;font:600 .68rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--green);border:1px solid var(--line2);border-radius:999px;padding:.4rem .7rem;margin-right:.7rem;vertical-align:middle}
.article{display:grid;grid-template-columns:minmax(0,1fr) 17rem;gap:2.6rem 3.4rem;align-items:start;margin-top:.6rem}
.article .body{min-width:0}
.article .rail{position:sticky;top:5.6rem}
.article .rail .toc{margin:0 0 1.4rem}
.article .rail .toc ol{margin:0;padding-left:1.1rem;font-size:.9rem;line-height:1.5;color:var(--txt2)}
.article .rail .toc li{margin:.35rem 0}
.article .rail .toc a{color:var(--txt2);text-decoration:none}
.article .rail .toc a:hover{color:var(--txt);text-decoration:underline;text-underline-offset:.2em}
.article .rail .toclabel{font:600 .68rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--txt3);margin:0 0 .7rem}
.pitch{background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);padding:1.3rem 1.4rem;box-shadow:var(--shadow)}
.pitch .ph{font-family:var(--display);font-weight:640;font-size:1.25rem;letter-spacing:-.02em;color:var(--txt);margin:0 0 .5rem}
.pitch p{margin:0 0 .8rem;color:var(--txt2);font-size:.95rem}
.pitch p:last-child{margin-bottom:0}
.pitch .btn{display:inline-flex}
.pitch .pm a{color:var(--green)}
.pitch.inline{margin:2.4rem 0;padding:1.6rem 1.8rem}
.pitch.inline .btn{margin:.2rem .4rem .2rem 0}
.next a{display:block;text-decoration:none;color:var(--txt);padding:.55rem 0;border-top:1px solid var(--line)}
.next a:first-of-type{border-top:0}
.next a b{font-weight:600}
.next a small{display:block;color:var(--txt3);font-size:.82rem;margin-top:.15rem}
.next a:hover b{text-decoration:underline;text-underline-offset:.2em}
@media(max-width:900px){.article{grid-template-columns:1fr}.article .rail{position:static;order:-1}.article .rail .pitch{display:none}}

/* ---- day one of the stress test (2026-09-10 evening) ---------------
   Links keep the site's colour everywhere, not the browser's blue. The
   header folds into a phone menu below 820px. A teardown card closes
   every calculator and guide. */
a{color:var(--green)}
.fbrand p a,.method a,.article a{color:var(--green);text-decoration-thickness:1px;text-underline-offset:.18em}
.head .kicker a{color:inherit}
.menubtn{display:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line2);background:transparent;
  color:var(--txt2);cursor:pointer;align-items:center;justify-content:center;flex:none}
.menubtn span{display:block;width:16px;height:2px;background:currentColor;position:relative;border-radius:2px}
.menubtn span::before,.menubtn span::after{content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor;border-radius:2px}
.menubtn span::before{top:-5px}.menubtn span::after{top:5px}
.nav .links .mobile-only{display:none}
@media(max-width:820px){
  .nav .links{display:none}
  .menubtn{display:inline-flex}
  .nav .tbtn{display:none}
  .nav{position:sticky}
  .nav.open .links{display:flex;position:absolute;left:0;right:0;top:calc(100% + .6rem);z-index:50;flex-direction:column;align-items:stretch;gap:0;
    padding:.6rem 1.4rem 1.4rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);box-shadow:var(--shadow);
    max-height:calc(100vh - 7rem);overflow:auto}
  .nav.open .links>a,.nav.open .has-menu>a{font:600 1.25rem/1.2 var(--display);letter-spacing:-.02em;text-transform:none;
    color:var(--txt);padding:.8rem 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}
  .nav.open .has-menu{display:block}
  .nav.open .has-menu>a::after{display:none}
  .nav.open .menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:transparent;
    padding:.2rem 0 .8rem;min-width:0;grid-template-columns:1fr;gap:.8rem}
  .nav.open .menu a{padding:.3rem 0;margin:0;font-size:1rem}
  .nav.open .links .mobile-only{display:flex;gap:.8rem;margin-top:1.2rem}
  .nav.open .links .mobile-only .btn,.nav.open .links .mobile-only .tbtn2{display:inline-flex}
  .tbtn2{width:42px;height:42px;border-radius:50%;border:1px solid var(--line2);background:transparent;color:var(--txt2);
    cursor:pointer;font-size:1rem;align-items:center;justify-content:center}
  .nav.open .menubtn span{background:transparent}
  .nav.open .menubtn span::before{top:0;transform:rotate(45deg)}
  .nav.open .menubtn span::after{top:0;transform:rotate(-45deg)}
}
.tcard{margin:3rem 0 0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);padding:1.6rem 1.8rem;box-shadow:var(--shadow);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem 2rem;align-items:center}
.tcard .th{font-family:var(--display);font-weight:640;font-size:1.3rem;letter-spacing:-.02em;color:var(--txt);margin:0 0 .35rem}
.tcard p{margin:0;color:var(--txt2);font-size:.95rem}
.tcard .btn{white-space:nowrap}
@media(max-width:720px){.tcard{grid-template-columns:1fr}}

/* ---- the menus and the footer, second design (2026-09-10 night) -----
   Three featured items with a line each, a short row of more, one "see
   all". The footer's columns are always visible: four links and "see all". */
.nav .menu{min-width:24rem;max-width:26rem;padding:.9rem;grid-template-columns:1fr;gap:.2rem}
.nav .menu.wide{min-width:24rem;grid-template-columns:1fr}
.nav .menu .mi{display:block;padding:.7rem .8rem;margin:0;border-radius:10px;text-decoration:none}
.nav .menu .mi b{display:block;font:600 .98rem/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--txt)}
.nav .menu .mi small{display:block;font:400 .84rem/1.4 var(--sans);color:var(--txt3);margin-top:.15rem;letter-spacing:0;text-transform:none}
.nav .menu .mi:hover,.nav .menu .mi:focus-visible{background:var(--bg2)}
.nav .menu .mmore{display:flex;flex-wrap:wrap;gap:.3rem .8rem;padding:.6rem .8rem .2rem;border-top:1px solid var(--line);margin-top:.4rem}
.nav .menu .mmore a{font:500 .84rem/1.6 var(--sans);letter-spacing:0;text-transform:none;color:var(--txt2);padding:0;margin:0;border-radius:0}
.nav .menu .mmore a:hover{color:var(--txt);background:transparent;text-decoration:underline;text-underline-offset:.2em}
.nav .menu .mall{display:block;margin:.5rem .8rem .2rem;padding:0;font:600 .9rem/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--green);border-radius:0}
.nav .menu .mall:hover{background:transparent;text-decoration:underline;text-underline-offset:.2em}
.fcol .ft{font:600 .95rem/1.3 var(--sans);color:var(--txt);margin-bottom:.35rem}
.fcol .more{color:var(--green);font-weight:600}
.fbrand .btn{margin-top:.6rem}
@media(max-width:820px){
  .nav.open .menu .mi{padding:.5rem 0}
  .nav.open .menu .mmore{padding:.4rem 0 0}
  .nav.open .menu .mall{margin:.5rem 0 0}
}
.nav .menu .mmore{display:grid;grid-template-columns:1fr 1fr;gap:.35rem 1.2rem}
@media(max-width:820px){
  .nav.open .menu{min-width:0;max-width:none;width:100%}
  .nav.open .menu .mi small{white-space:normal}
  .nav.open .menu .mmore{grid-template-columns:1fr}
}

/* ---- the menus, third pass (2026-09-11) ----------------------------
   The header links are nowrap; the menu's items are not. Wider panel,
   one column for the "more" row, and nothing bleeds past the edge. */
.nav .menu,.nav .menu a,.nav .menu .mi b,.nav .menu .mi small{white-space:normal}
.nav .menu{min-width:27rem;max-width:30rem;padding:1rem 1rem .9rem}
.nav .menu .mi{padding:.75rem .9rem}
.nav .menu .mi b{font-size:1rem}
.nav .menu .mi small{font-size:.86rem;line-height:1.45;margin-top:.2rem}
.nav .menu .mmore{display:grid;grid-template-columns:1fr;gap:.3rem;padding:.7rem .9rem .2rem;margin-top:.5rem}
.nav .menu .mmore a{font-size:.9rem}
.nav .menu .mall{margin:.6rem .9rem .2rem;font-size:.92rem}
.nav .menu.end{left:auto;right:-1rem}