/* usekeep.health — the site's one stylesheet.
   Its rules are the design file's (Stream C, rev 4.3, keep-site-design-rev4.3-source.html, sha256 f560c52c…3e617),
   without that file's own apparatus, its build notes and the section label's unchosen alternative (.slab.alt). Where
   this file differs from the design file it says so, in a comment beginning "build:". The asset URLs are placeholders
   that build.mjs fills with fingerprinted paths.
   Tokens copied by Stream C from apps/portal/app/globals.css and app/packs/pack.css (read 23 Sep 2026). */
@font-face{font-family:"Newsreader";font-weight:400;font-style:normal;font-display:swap;src:url("/assets/fonts/Newsreader-400.d38c397b12.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-weight:500;font-style:normal;font-display:swap;src:url("/assets/fonts/Newsreader-500.30f5253e54.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-weight:600;font-style:normal;font-display:swap;src:url("/assets/fonts/Newsreader-600.e6f7252cff.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-weight:400;font-style:normal;font-display:swap;src:url("/assets/fonts/PublicSans-400.e780e424b9.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-weight:500;font-style:normal;font-display:swap;src:url("/assets/fonts/PublicSans-500.c39ade2169.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-weight:600;font-style:normal;font-display:swap;src:url("/assets/fonts/PublicSans-600.5149c17f8d.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-style:normal;font-display:swap;src:url("/assets/fonts/PlexMono-400.08949f728d.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-style:normal;font-display:swap;src:url("/assets/fonts/PlexMono-500.01d2854474.woff2") format("woff2")}

:root{
  /* brand core */
  --bastion:#14352b; --iron:#222722; --brass:#b9862f; --signal:#b23a2e; --moat:#6c7a70; --sage:#dde6de;
  /* platform light, globals.css --pf-* — THE SITE'S GROUND IS THE PRODUCT'S */
  --pf-bg:#f4f6f4; --pf-panel:#fff; --pf-panel-2:#fafbfa; --pf-edge:#e0e4e0; --pf-sunk:#eaedea; --pf-active:#e7f0ec;
  --pf-ink:#0f1913; --pf-ink-2:#3a453f; --pf-ink-3:#5e6963; --pf-action:#1c5c48;
  --party-ours:#12705c; --party-theirs:#c2452f; --party-base:#98a29b;
  /* the pack's desk, app/packs/pack.css */
  --pk-desk:#e7e1d5; --pk-ink:#222722; --pk-ink-2:#4a5149; --pk-ink-3:#6c7a70; --pk-rule:#d8d0c2; --pk-rule-strong:#b6ac99;
  /* roles */
  --ground:var(--pf-bg); --panel:var(--pf-panel); --panel-2:var(--pf-panel-2); --edge:var(--pf-edge); --sunk:var(--pf-sunk);
  --ink:var(--pf-ink); --ink-2:var(--pf-ink-2); --ink-3:var(--pf-ink-3);
  --rule:color-mix(in oklab, var(--moat) 8%, var(--pf-bg));
  --rule-strong:color-mix(in oklab, var(--moat) 13%, var(--pf-bg));
  --met:var(--bastion); --breach:var(--signal); --held:var(--brass);
  --met-fill:color-mix(in oklab, var(--met) 16%, var(--pf-panel));
  --breach-fill:color-mix(in oklab, var(--breach) 12%, var(--pf-panel));
  --held-ground:color-mix(in oklab, var(--brass) 18%, var(--pf-bg));
  --action:var(--bastion); --on-action:#e6efe9;
  --radius:6px;
  --shadow-panel:0 2px 4px rgba(16,22,19,.05), 0 10px 26px -14px rgba(16,22,19,.22);
  --font-serif:"Newsreader",Georgia,serif;
  --font-sans:"Public Sans",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  --max:1180px; --wide:1320px; --gutter:clamp(20px, 4vw, 64px);
  --band:clamp(56px, 7vw, 104px);
  --hdr-h:64px;
}
@media (max-width:760px){ :root{ --hdr-h:56px } }
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
/* build: the design file paints body #e3e6e3 behind its apparatus bars. Here the body is the page's ground, so the
   header, which has no surface at rest, sits on the ground over the hero, and an overscrolled page shows the ground. */
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}

/* ---------- the site ---------- */
.site{background:var(--ground);color:var(--ink)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);padding-left:max(var(--gutter), env(safe-area-inset-left));padding-right:max(var(--gutter), env(safe-area-inset-right))}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.fig{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:500}
.syn{display:inline-block;font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);background:var(--panel-2);border:1px solid var(--edge);border-radius:3px;padding:4px 8px;line-height:1;white-space:nowrap}
.chip{display:inline-block;font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;border-radius:3px;line-height:1;white-space:nowrap}
.chip.met{background:var(--met-fill);color:var(--met)} .chip.breach{background:var(--breach-fill);color:var(--breach)} .chip.silent{background:var(--sunk);color:var(--ink-3)}
.eb{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.nb{white-space:nowrap}
.panel{background:var(--panel);border:1px solid var(--edge);border-radius:var(--radius);box-shadow:var(--shadow-panel);display:flex;flex-direction:column;min-width:0}
.panel .head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--edge)}
.panel .body{padding:16px 18px;flex:1}
.hd{display:flex;justify-content:space-between;gap:10px;align-items:center}
@media (max-width:340px){ .hd{flex-wrap:wrap} }
/* THE PROVENANCE: one per exhibit, in the exhibit's own foot — the panel's second ground, mono 12 px, ink-3 (anything lighter fails 4.5:1 at 12 px) */
.pfoot{margin-top:auto;padding:9px 18px;border-top:1px solid var(--edge);background:var(--panel-2);border-radius:0 0 var(--radius) var(--radius);font-family:var(--font-mono);font-size:12px;color:var(--ink-3);line-height:1.5;letter-spacing:.01em}
.pfoot.standalone{border:1px solid var(--edge);border-top:0;margin-top:0}
.pfoot .hd{gap:12px}

/* ---------- BANDS: every section is its own full-bleed band, ground and white by turns, a hairline between ---------- */
main.site{scroll-margin-top:var(--hdr-h)}
.band{padding:var(--band) 0;border-top:1px solid var(--rule-strong);scroll-margin-top:calc(var(--hdr-h) + 8px)}
.band.ground{background:var(--ground)} .band.white{background:#fff}
/* THE NEAR-WHITE DECISION (rev 4): on a white band an exhibit that is a screen of the product sits in a well of the
   product's ground WITH A HAIRLINE EDGE, so the well reads as a window onto the product rather than as a third grey;
   on a ground band panels sit directly on the ground, as they do in the product; text exhibits (§2's table) take no
   well; the pack's desk is its own well. Two wells on the page: how it works, §6. */
.well{background:var(--ground);border:1px solid var(--edge);border-radius:10px;padding:clamp(14px,1.6vw,22px)}

/* ---------- THE HEADER: sticky, constant height, no surface over the hero, a surface once the page scrolls ---------- */
.skip{position:fixed;left:var(--gutter);top:-100px;z-index:70;background:var(--ink);color:#fff;font-family:var(--font-mono);font-size:13px;padding:10px 14px;border-radius:4px;text-decoration:none}
.skip:focus{top:14px}   /* over the header's own row, never over the page's first line (site-build's fix, rev 4.1) */
.hdr{position:sticky;top:0;z-index:50;height:var(--hdr-h);background:transparent}
.hdr::before{content:"";position:absolute;inset:0;background:color-mix(in srgb, var(--ground) 82%, transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--rule-strong);box-shadow:0 8px 24px -16px rgba(16,22,19,.28);opacity:1;transition:opacity .2s ease}
html.js .hdr:not(.is-scrolled)::before{opacity:0}           /* at rest over the hero: no surface — without JavaScript the surface is the resting state */
.hdr .in{position:relative;max-width:var(--max);margin:0 auto;padding:0 var(--gutter);padding-left:max(var(--gutter), env(safe-area-inset-left));padding-right:max(var(--gutter), env(safe-area-inset-right));height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.hdr .lockup{display:block;width:150px;height:37px;color:var(--bastion);flex:none;transform-origin:left center;transition:transform .2s ease}
.hdr.is-scrolled .lockup{transform:scale(.84)}               /* the lockup steps down by transform only: nothing reflows */
.hdr .links{display:flex;gap:4px;font-size:14px;color:var(--ink-2);margin-left:auto}
.hdr .links a{position:relative;text-decoration:none;padding:8px 10px;border-radius:4px;line-height:1}
.hdr .links a:hover{color:var(--ink);background:color-mix(in srgb, var(--ink) 6%, transparent)}
.hdr .links a[aria-current="true"]{color:var(--ink)}
.hdr .links a[aria-current="true"]::after{content:"";position:absolute;left:10px;right:10px;bottom:2px;height:2px;background:var(--ink);border-radius:1px}   /* the section in view: an ink mark, never brass */
.hdr .cta{flex:none;font-family:var(--font-mono);font-size:13px;letter-spacing:.02em;color:var(--on-action);background:var(--action);text-decoration:none;padding:9px 14px;border-radius:999px;line-height:1;white-space:nowrap;border:1px solid var(--action)}
.hdr .cta:hover{background:#1c5c48;border-color:#1c5c48}
@media (max-width:900px){ .hdr .links{display:none} }
@media (max-width:760px){ .hdr .lockup{width:122px;height:30px} .hdr .cta{font-size:12.5px;padding:8px 12px} }
@media (max-width:340px){ .rcard .foot .nb{white-space:normal} .hdr .in{gap:12px} .hdr .lockup{width:100px;height:25px} .hdr .cta{padding:8px 10px} .strat{grid-template-columns:minmax(80px,1.6fr) minmax(0,3fr) minmax(52px,1fr);gap:8px} .mini{padding:12px} .well{padding:10px} }
@media (prefers-reduced-motion: reduce){ .hdr::before,.hdr .lockup{transition:none} }

/* hero — the glance test: who (eyebrow), what (h1), how (sub); then the loop on its stage */
.hero-band{border-top:0;padding-top:clamp(28px,4vw,56px)}
.hero .eyebrow{font-family:var(--font-mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.hero h1{font-family:var(--font-serif);font-weight:500;font-size:clamp(36px,4.8vw,64px);line-height:1.04;letter-spacing:-.02em;margin:16px 0 0;color:var(--ink);max-width:19ch}
.hero .sub{font-size:clamp(17px,1.5vw,21px);line-height:1.5;color:var(--ink-2);margin:20px 0 0;max-width:54ch}
.hero .row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.play{display:inline-flex;align-items:center;gap:12px;padding:10px 16px 10px 10px;background:var(--panel);border:1px solid var(--edge);border-radius:999px;cursor:pointer;font:inherit;color:var(--ink);font-size:14px;white-space:nowrap}
.play,.play:hover,.play:focus-visible{text-decoration:none} .play:hover{border-color:var(--ink-3)}
.play .btn{width:30px;height:30px;border-radius:50%;background:var(--action);position:relative;flex:none}
.play .btn:after{content:"";position:absolute;left:11px;top:8px;border-left:11px solid var(--on-action);border-top:7px solid transparent;border-bottom:7px solid transparent}
.play small{font-family:var(--font-mono);font-size:12px;color:var(--ink-3);margin-left:4px}
@media (max-width:560px){ .play{white-space:normal;max-width:100%;border-radius:22px;text-align:left;flex-wrap:wrap;row-gap:2px} .play small{display:block;margin-left:0;flex-basis:100%} }
/* the loop on a larger stage: the wide measure, no border, a soft ground shadow — the product at nearer its own size */
.stage{max-width:var(--wide);margin:clamp(32px,4vw,56px) auto 0;padding:0 var(--gutter);padding-left:max(var(--gutter), env(safe-area-inset-left));padding-right:max(var(--gutter), env(safe-area-inset-right))}
.loop{position:relative;border-radius:6px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(16,22,19,.45),0 1px 0 rgba(16,22,19,.05);background:var(--ground)}
.loop video,.loop img{display:block;width:100%;height:auto;aspect-ratio:16/9}
.loop .still{display:none}
.loop .note{position:absolute;right:14px;top:12px}
@media (prefers-reduced-motion: reduce){ .loop video{display:none} .loop .still{display:block} }
/* below 960 px the phone loop takes the wide loop's place: the same four moments on a portrait 4:5 stage, built to be
   read at 390 CSS px wide, so on a phone it runs the full width of the screen (no gutter); above 560 px it is capped at
   560 px and at the height the screen leaves below the header */
.stage-m{display:none}
.loopm{position:relative;overflow:hidden;background:var(--ground);border-radius:6px;box-shadow:0 40px 80px -40px rgba(16,22,19,.45),0 1px 0 rgba(16,22,19,.05)}
.loopm video,.loopm img{display:block;width:100%;height:auto;aspect-ratio:4/5}
.loopm .still{display:none}
.loop.is-still video,.loopm.is-still video{display:none} .loop.is-still .still,.loopm.is-still .still{display:block}
@media (prefers-reduced-motion: reduce){ .loopm video{display:none} .loopm .still{display:block} }
@media (max-width:959px){
  .stage{display:none}
  .stage-m{display:block;width:min(100% - 2 * var(--gutter), 560px);width:min(100% - 2 * var(--gutter), 560px, calc((100svh - 120px) * 4 / 5));margin:28px 0 0 max(var(--gutter), env(safe-area-inset-left))}
}
@media (max-width:560px){ .stage-m{width:100%;margin:24px 0 0} .loopm{border-radius:0;box-shadow:none;border-block:1px solid var(--edge)} }

/* utility classes standing in for the inline styles rev 4 carried (CSP: style-src 'self', no style attributes) */
.mt0{margin-top:0} .mt10{margin-top:10px} .mt12{margin-top:12px} .mt18{margin-top:18px} .pt4{padding-top:4px} .col{display:flex;flex-direction:column}

.bar i.w100,.mk-strata i.w100{width:100%} .bar i.w333,.mk-strata i.w333{width:33.3%} .bar i.w456,.mk-strata i.w456{width:45.6%}
.sc-row .tr i.at811{left:81.1%} .sc-row .tr i.at497{left:49.7%}
.money-line{margin-top:10px;font-size:12.5px;color:var(--ink-2)}
.focus .held .mk{width:12px;height:10px;display:inline-block}

/* section heads */
/* THE SECTION LABEL (rev 4.1, Sheil's note 2): a treatment of its own, distinct from the product's eyebrows — the number on an
   ink square, the title in Public Sans 500 caps in ink. The page's sections read louder than the product's chrome, and the
   numbers stay: 1 to 7 is the page's order. "How it works" carries the mark on its square instead of a number. */
.slab{display:inline-flex;align-items:center;gap:11px;font-family:var(--font-sans);font-size:13.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);line-height:1}
h2.slab{margin:0;max-width:none}
.slab .n{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:4px;background:var(--ink);color:#fff;font-family:var(--font-mono);font-size:13.5px;font-weight:500;letter-spacing:0;flex:none}
.slab .n.mark svg{width:14px;height:12px}
.num{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
h2{font-family:var(--font-serif);font-weight:500;font-size:clamp(28px,3.1vw,42px);line-height:1.1;letter-spacing:-.017em;margin:12px 0 0;max-width:22ch;color:var(--ink)}
.one{font-size:clamp(16px,1.3vw,18px);line-height:1.5;color:var(--ink-2);margin:14px 0 0;max-width:56ch}
.one .fig{color:var(--ink);font-size:.95em}
/* a wide exhibit: the head at full measure — the thesis at left, its one line at right, on one baseline — and the exhibit beneath */
.shead{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:end}
.shead .one{margin:0 0 6px}
@media (max-width:900px){ .shead{grid-template-columns:minmax(0,1fr)} .shead .one{margin-top:14px} }
.under{margin-top:clamp(28px,3vw,40px)}
/* a tall exhibit beside a sticky headline column: the text stays with the exhibit as it is read, and clears the header */
.split{display:grid;grid-template-columns:minmax(0,4.5fr) minmax(0,7.5fr);gap:clamp(24px,4vw,64px);align-items:start}
.split .lead{position:sticky;top:calc(var(--hdr-h) + 28px)}
.split h2{font-size:clamp(28px,2.8vw,38px)}
@media (max-width:900px){ .split{grid-template-columns:minmax(0,1fr)} .split .lead{position:static} }
.exhibit{min-width:0}

/* how it works: three steps in one well on the white band, left to right */
.how .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:900px){ .how .steps{grid-template-columns:minmax(0,1fr)} }
.step{display:flex;flex-direction:column} .step > .panel,.step > .desk{flex:1}
/* the row's height comes from the tallest product panel; the desk carries no height of its own and crops the cover there (rev 4.1, main) */
@media (min-width:901px){ .how .desk{position:relative;padding:0;min-height:0} .how .desk .cover{position:absolute;top:22px;left:22px;right:22px} .how .desk .cover.short .h3{max-height:calc(3 * 1.08em);overflow:hidden;padding-bottom:0} }   /* the headline is cut at a line's end, never through a glyph; below 900 px the steps stack and the desk is its own height again */
/* the well's footer row, spanning the three steps: the product's Declined mark, one sentence, a link down to §5 (rev 4.1, Sheil's note 3) */
.howfoot{display:flex;align-items:center;gap:18px;margin-top:20px;padding-top:16px;border-top:1px solid var(--edge)}
.howfoot .dlab{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--edge);background:var(--panel);border-radius:3px;padding:6px 9px;line-height:1;white-space:nowrap;flex:none}
.howfoot .refusal-line{margin:0;flex:1;font-family:var(--font-serif);font-size:clamp(16px,1.35vw,18px);line-height:1.4;color:var(--ink);max-width:none;text-wrap:balance}
.howfoot .down{font-family:var(--font-mono);font-size:13px;color:var(--bastion);text-decoration:none;border-bottom:1.5px solid var(--bastion);padding-bottom:2px;white-space:nowrap;flex:none}
@media (max-width:760px){ .howfoot{flex-wrap:wrap;gap:12px} .howfoot .refusal-line{flex-basis:100%;order:2} .howfoot .down{order:3} }
.step .cap{margin:12px 0 0;font-size:15.5px;line-height:1.45;color:var(--ink)}
.step .cap i{font-style:normal;font-family:var(--font-mono);font-size:12px;color:var(--ink-3);margin-right:8px}

/* mini exhibits, all type ≥ 12 px */
.mini{padding:14px 16px}
/* the Monitor's term row, as the product draws it (captures 12 and 15): the term with its twelve month marks — met sage, breached red, withheld hatched, silent outlined — then THRESHOLD · MONTH · DISTANCE · STANDING; two-by-two where the panel is a third of the measure, four across at half */
.msite{margin-top:10px;font-size:14px;font-weight:500;color:var(--ink);line-height:1.4} .msite small{font-family:var(--font-mono);font-size:12px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-left:6px}
.mrow{padding:12px 0;border-top:1px solid var(--edge)}
.mrow:last-child{padding-bottom:2px}
.mrow .t{font-size:15px;font-weight:500;color:var(--ink);line-height:1.25}
.marks{display:flex;gap:3px;margin-top:7px;max-width:225px}
.marks i{flex:1 1 0;min-width:0;max-width:16px;aspect-ratio:1;border-radius:2px;background:var(--sage)}   /* 16 px where there is room; the twelve shrink together below 340 px, never wrap */
.marks i.b{background:var(--breach)}
.marks i.w{background:repeating-linear-gradient(135deg,var(--ink-3) 0 1.5px,var(--sage) 1.5px 5px)}
.marks i.s{background:transparent;border:1px solid var(--edge)}
.mrow .cells{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;margin-top:10px}
.mrow .cells > div{font-size:14px;color:var(--ink);line-height:1.35}
.mrow .cells .k{display:block;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:2px}
.mrow .cells small{display:block;font-family:var(--font-mono);font-size:12px;color:var(--ink-3);margin-top:2px}
.mrow .cells .br{color:var(--breach);font-weight:500} .mrow .cells em{font-style:italic;color:var(--ink-2)} .mrow .cells .dash{color:var(--ink-3)}
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;border-radius:999px;line-height:1;white-space:nowrap;margin-top:3px}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.met{background:var(--sage);color:var(--met)} .pill.breached{background:var(--breach-fill);color:var(--breach)} .pill.silent{background:var(--sage);color:var(--ink-3)} .pill.silent::before{display:none}
.strat{display:grid;grid-template-columns:minmax(120px,1.6fr) minmax(0,3fr) minmax(70px,1fr);align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--edge)}
.strat:last-of-type{border-bottom:1px solid var(--edge)}
.strat .lbl{font-size:14px;color:var(--ink);line-height:1.2} .strat .lbl small{display:block;font-family:var(--font-mono);font-size:12px;margin-top:3px}
.strat.ours .lbl small{color:var(--party-ours)} .strat.theirs .lbl small{color:var(--party-theirs)} .strat.joint .lbl small{color:var(--ink-2)}
.bar{position:relative;height:16px;background:var(--sunk);border-radius:3px}
.bar i{position:absolute;left:0;top:0;bottom:0;border-radius:3px}
.ours .bar i{background:var(--party-ours)} .theirs .bar i{background:var(--party-theirs)}
.joint .bar i{background:repeating-linear-gradient(135deg,var(--party-ours) 0 4px,var(--party-theirs) 4px 8px)}
.strat .val{font-family:var(--font-mono);font-size:20px;text-align:right;color:var(--ink);line-height:1}
.strat .val small{display:block;font-size:12px;color:var(--ink-3);margin-top:3px}
.ours .val{color:var(--party-ours)} .theirs .val{color:var(--party-theirs)}
/* the pack cover, composed at legible size on the product's ground — off the tan desk, as the film's pack beat (main's ruling, 24 Sep); the desk is its own well */
.desk{background:var(--pf-bg);border:1px solid var(--edge);border-radius:var(--radius);padding:22px 22px 0;overflow:hidden}
.desk.footed{border-radius:var(--radius) var(--radius) 0 0}
.cover{background:#fff;padding:18px 20px 0;box-shadow:0 20px 50px -24px rgba(34,39,34,.45),0 2px 6px rgba(34,39,34,.12);color:var(--pk-ink);font-family:var(--font-sans)}
.cover .top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:2px solid var(--pk-ink);flex-wrap:wrap}
.cover .lk{width:78px;height:19px;color:var(--pk-ink)}
.cover .seal{display:inline-flex;align-items:center;border:1.5px solid var(--brass);color:var(--brass);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;line-height:1.4}
.cover .shape,.cover .sitel{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--pk-ink-3)}
.cover .sitel{margin-top:16px}
.cover h3,.cover .h3{font-family:var(--font-serif);font-weight:700;font-size:clamp(22px,2vw,28px);line-height:1.08;letter-spacing:-.015em;margin:8px 0 0;max-width:18ch;color:var(--pk-ink)}
.cover .lead{font-family:var(--font-serif);font-size:14px;line-height:1.45;color:var(--pk-ink-2);margin:12px 0 0;max-width:52ch}
.cover .figs{display:grid;grid-template-columns:1fr 1fr 1fr;margin-top:16px;padding:12px 0 18px;border-top:1px solid var(--pk-rule-strong);column-gap:14px}
.cover .f .v{font-family:var(--font-mono);font-size:22px;color:var(--pk-ink)} .cover .f .v.breach{color:var(--signal)} .cover .f .v small{font-size:12px;color:var(--pk-ink-3);margin-left:3px}
.cover .f .c{margin-top:5px;font-family:var(--font-mono);font-size:12px;line-height:1.5;color:var(--pk-ink-3)}
.cover.short h3,.cover.short .h3{padding-bottom:18px}
@media (max-width:560px){ .cover .figs{grid-template-columns:1fr;row-gap:14px} }

/* §1 · TERMS AGAINST THRESHOLD, as the scorecard draws it (capture 17): one scale for every term, 0 at the left, the threshold line at 1.0, 1.75+ at the right; met to the left of the line as a circle, breached to the right as a diamond; the value and its coverage at the right */
.sc-h{display:flex;justify-content:space-between;gap:12px;padding:10px 18px;background:var(--sunk);border-bottom:1px solid var(--edge)}
.sc{padding:6px 18px 4px}
.sc-scale{display:grid;grid-template-columns:minmax(130px,1fr) minmax(220px,2.8fr) minmax(110px,1fr);gap:14px;align-items:end;padding:8px 0 4px;font-family:var(--font-mono);font-size:12px;color:var(--ink-3)}
.sc-scale .ax{position:relative;height:34px}
.sc-scale .ax span{position:absolute;bottom:0;transform:translateX(-50%);white-space:nowrap}
.sc-scale .ax .th{bottom:18px;left:57.1%}
.sc-scale .ax .mt{left:57.1%;transform:translateX(calc(-100% - 8px))} .sc-scale .ax .bd{left:57.1%;transform:translateX(8px)}
.sc-scale .ax .z{left:0;transform:none} .sc-scale .ax .mx{left:100%;transform:translateX(-100%)}
.sc-row{display:grid;grid-template-columns:minmax(130px,1fr) minmax(220px,2.8fr) minmax(110px,1fr);gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--edge)}
.sc-row .n{font-size:15px;font-weight:500;color:var(--ink);line-height:1.25} .sc-row .n small{display:block;font-family:var(--font-mono);font-size:12px;font-weight:400;color:var(--ink-3);margin-top:4px;line-height:1.5}
.sc-row .n small b{font-weight:400} .sc-row .n small b.met{color:var(--met)} .sc-row .n small b.br{color:var(--breach)}
.sc-row .tr{position:relative;height:28px}
.sc-row .tr::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--rule-strong)}
.sc-row .tr::after{content:"";position:absolute;left:57.1%;top:2px;bottom:2px;width:1px;background:var(--ink-3)}
.sc-row .tr i{position:absolute;top:50%;width:14px;height:14px;transform:translate(-50%,-50%);border-radius:50%;background:var(--met)}
.sc-row .tr i.d{border-radius:1px;background:var(--breach);transform:translate(-50%,-50%) rotate(45deg) scale(.92)}
.sc-row .v{font-family:var(--font-mono);font-size:14px;color:var(--ink-2);text-align:right;line-height:1.5;white-space:nowrap}
.sc-row .v b{font-weight:400;font-size:17px;color:var(--ink);border-bottom:1px solid var(--rule-strong)} .sc-row .v small{font-size:12px;color:var(--ink-3);margin-left:5px} .sc-row .v span{display:block;font-size:12px;color:var(--ink-3)}
@media (max-width:560px){ .sc-scale{display:none} .sc-row{grid-template-columns:1fr;gap:8px} .sc-row .v{text-align:left} }
.yband{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;padding:14px 18px;border-top:1px solid var(--edge);background:var(--panel-2)}
.yband .yr{font-family:var(--font-mono);font-size:22px;color:var(--ink);line-height:1.1}
.yband .yr small{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}
.yband p{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2)}
@media (min-width:901px){ #s1 .sc-scale,#s1 .sc-row{grid-template-columns:minmax(180px,1.4fr) minmax(320px,3fr) minmax(150px,1fr)} }

/* §2 */
table.cmp{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45}
table.cmp th,table.cmp td{text-align:left;vertical-align:top;padding:13px 16px 13px 0;border-bottom:1px solid var(--rule-strong)}
table.cmp th{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:500;padding-bottom:10px}
table.cmp td:first-child{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-3);width:22%}
table.cmp td:nth-child(2){color:var(--ink-2);width:36%}
table.cmp td:nth-child(3){color:var(--ink);font-weight:500}
@media (min-width:901px){ table.cmp{font-size:16px} table.cmp th,table.cmp td{padding:15px 24px 15px 0} }
table.cmp td{overflow-wrap:anywhere}
/* below 560 px the table stacks: each row a block, its label above the two answers */
@media (max-width:560px){ table.cmp,table.cmp tbody,table.cmp tr,table.cmp td{display:block;width:auto} table.cmp thead{display:none} table.cmp tr{padding:12px 0;border-bottom:1px solid var(--rule-strong)} table.cmp td{border:0;padding:2px 0} table.cmp td:first-child,table.cmp td:nth-child(2),table.cmp td:nth-child(3){width:auto} table.cmp td:first-child{padding-bottom:4px} table.cmp td:nth-child(2)::before{content:"An analytics platform";display:block;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px} table.cmp td:nth-child(3)::before{content:"KEEP";display:block;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--bastion);font-weight:500;margin-bottom:5px} }

/* §2 as an exhibit (rev 4.1, Sheil's note 4): the comparison in a panel; the KEEP column on its own surface (the product's active tint, with the word KEEP above it, so the surface never carries the meaning alone); a small mark from the product's own forms in three of its cells; the analytics column plain text and generic */
.cmpx table.cmp{font-size:15px} .cmpx table.cmp th,.cmpx table.cmp td{padding:13px 18px;border-bottom:1px solid var(--edge)} .cmpx table.cmp th{padding-top:12px;padding-bottom:10px}
.cmpx table.cmp td:first-child{width:18%} .cmpx table.cmp td:nth-child(2){width:34%}
.cmpx table.cmp tbody tr:last-child td{border-bottom:0}
.cmpx .kc{background:var(--pf-active);box-shadow:inset 3px 0 0 var(--bastion)} .cmpx th.kc{color:var(--bastion);font-weight:600}
.cmpx td.kc{color:var(--ink);font-weight:500}
.cmpx .marks.mk-months{margin:10px 0 0;max-width:225px} .cmpx .marks.mk-months i{width:14px;height:14px}
.mk-strata{display:grid;gap:4px;width:150px;margin:10px 0 0} .mk-strata > span{display:block;height:8px;background:var(--sunk);border-radius:2px;position:relative} .mk-strata i{position:absolute;left:0;top:0;bottom:0;border-radius:2px}
.mk-strata .ours i{background:var(--party-ours)} .mk-strata .theirs i{background:var(--party-theirs)} .mk-strata .joint i{background:repeating-linear-gradient(135deg,var(--party-ours) 0 3px,var(--party-theirs) 3px 6px)}
.mk-cover{display:block;width:78px;background:#fff;border:1px solid var(--edge);padding:7px 8px 8px;margin:10px 0 0;box-shadow:0 2px 6px rgba(34,39,34,.12)} .mk-cover .lk{display:block;width:36px;height:9px;color:var(--pk-ink)} .mk-cover .rl{display:block;height:1.5px;background:var(--pk-ink);margin-top:5px} .mk-cover .ln{display:block;height:3px;background:var(--pk-rule-strong);margin-top:5px;width:80%} .mk-cover .ln.short{width:55%}
@media (max-width:560px){ .cmpx table.cmp td:first-child,.cmpx table.cmp td:nth-child(2),.cmpx table.cmp td:nth-child(3){width:auto} .cmpx table.cmp td{padding:2px 18px} .cmpx table.cmp tr{padding:12px 0} .cmpx table.cmp td.kc{padding:8px 18px;margin-top:6px} .cmpx table.cmp td:first-child{padding-top:0} }
@media (min-width:901px){ .cmpx table.cmp{font-size:16px} .cmpx table.cmp th,.cmpx table.cmp td{padding:15px 20px} }

/* §3 */
.scope{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-2);line-height:1.6}
.scope b{font-weight:500;color:var(--ink)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
@media (max-width:560px){ .pair{grid-template-columns:1fr} }
.pc{padding:14px 16px;border:1px solid var(--edge);border-radius:var(--radius);background:var(--panel-2)}
.pc.subject{border-left:5px solid var(--party-theirs)}
.pc .site{font-weight:500;font-size:14.5px;line-height:1.25;color:var(--ink)}
.pc .std{font-family:var(--font-mono);font-size:12px;color:var(--ink-3);margin-top:4px}
.pc .big{margin-top:12px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pc .big b{font-family:var(--font-mono);font-weight:400;font-size:32px;line-height:1;color:var(--party-theirs);border-bottom:1px solid var(--rule-strong)} .pc .big span{font-family:var(--font-mono);font-size:12px;color:var(--ink-2)}
.pc .l2{margin-top:8px;font-family:var(--font-mono);font-size:12px;color:var(--ink-3);line-height:1.6}
.pc .money{margin-top:12px;padding-top:12px;border-top:1px solid var(--edge);font-family:var(--font-mono);font-size:13px;color:var(--ink-2);line-height:1.5} .pc .money b{font-weight:400;color:var(--ink);border-bottom:1px solid var(--rule-strong)}
.pc u{text-decoration:none;border-bottom:1px solid var(--rule-strong)}
.pc .hatch{display:inline-block;width:9px;height:9px;margin-left:2px;vertical-align:-1px;background:repeating-linear-gradient(135deg,var(--ink-3) 0 1px,transparent 1px 3px);opacity:.55}
.ratio{margin-top:14px;font-family:var(--font-serif);font-size:18px;line-height:1.4;color:var(--ink)}

/* §5 */
/* the refusal, as the product prints it (capture 05): the section band, then the card — DECLINED, the sentence in serif, the foot */
.sband{margin-top:12px;background:var(--sunk);border-radius:4px;padding:10px 14px}
.sband b{display:block;font-family:var(--font-serif);font-weight:500;font-size:16.5px;color:var(--ink)}
.sband span{display:block;font-family:var(--font-mono);font-size:12px;color:var(--ink-3);margin-top:5px;line-height:1.4}
.rcard{margin-top:12px;padding:20px 22px 16px;border:1px solid var(--edge);border-radius:var(--radius);background:var(--panel);display:flex;flex-direction:column;flex:1}
.rcard .lab{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.rcard .sent{margin:12px 0 0;font-family:var(--font-serif);font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--ink);flex:1}
.rcard .foot{margin-top:14px;padding-top:10px;border-top:1px solid var(--rule-strong);font-family:var(--font-mono);font-size:12px;color:var(--ink-3);line-height:1.5}
.rcard .foot u{text-decoration:none;border-bottom:1px solid var(--rule-strong);color:var(--ink-2)}
.lin .body{padding:16px 18px}
.lin .subj{margin-top:10px;background:var(--sunk);border-radius:4px;padding:12px 14px}
.lin .subject{font-family:var(--font-serif);font-size:17px;line-height:1.3;color:var(--ink);text-wrap:balance}
.lin .restate{margin-top:6px;font-family:var(--font-mono);font-size:12px;color:var(--ink-3);line-height:1.6}
.lin .d{color:var(--moat)}
.lin .s{margin-top:12px}
.lin .s .t{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);background:var(--sunk);border-radius:3px;padding:7px 10px}
.lin .s .t i{font-style:normal;color:var(--ink-3);margin-right:8px}
.lin .s .b{margin-top:8px;font-family:var(--font-mono);font-size:12.5px;color:var(--ink-2);line-height:1.55;white-space:pre-line}
.lin .s .k{color:var(--ink-3)}
.lin .why{margin-top:8px;font-size:13px;color:var(--ink-2);line-height:1.5}
/* an equal-height composition: the declined card leads with the Monitor's rows beside it; then the close line over the two lineage panels, which it pairs */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:clamp(28px,3vw,40px);align-items:stretch}
.duo > .panel{height:100%}
@media (min-width:1100px){ .duo .mrow .cells{grid-template-columns:repeat(4,minmax(0,1fr))} }
.lineages{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch;margin-top:18px}
.lineages > div{display:flex;flex-direction:column;min-width:0} .lineages .panel{flex:1}
.lineages .cap{margin:0 0 10px;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);min-height:18px;line-height:18px}   /* one line each, the same height */
.lineages .cap b{font-weight:500;color:var(--ink)}
.closeline{margin:clamp(40px,4.5vw,64px) 0 0;font-family:var(--font-serif);font-size:clamp(22px,2.3vw,30px);line-height:1.3;letter-spacing:-.01em;color:var(--ink);max-width:34ch}
@media (max-width:900px){ .duo,.lineages{grid-template-columns:minmax(0,1fr)} }

/* §6 */
.focus .body{padding:16px 18px}
.focus .h4{margin:8px 0 0;font-size:19px;font-weight:600;color:var(--ink)}
.focus .sub{font-family:var(--font-mono);font-size:12px;color:var(--ink-3);margin-top:4px}
.focus .held{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:#7a5a1c;background:var(--held-ground);border:1.5px solid var(--brass);border-radius:3px;padding:6px 10px}
.kv{margin-top:12px;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:13.5px;line-height:1.5}
.kv .k{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding-top:2px}
.kv .v{color:var(--ink-2)} .kv .v b{font-family:var(--font-mono);font-weight:500;color:var(--ink)}
/* the pane's own graph (capture 13): twelve bars, the dashed threshold, breached months red, August outlined; heights read off the capture, not recomputed */
.bym{margin-top:16px;padding-top:14px;border-top:1px solid var(--edge)}
.bym .h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:15px;font-weight:500;color:var(--ink)} .bym .h small{font-family:var(--font-mono);font-size:12px;font-weight:400;color:var(--ink-3);letter-spacing:.02em}
.bym .chart{margin-top:8px} .bym .svgw{position:relative}
.bym svg{display:block;width:100%;height:auto}
.bym .thl{position:absolute;left:0;bottom:calc(52.15% + 4px);font-family:var(--font-mono);font-size:12px;color:var(--ink-3);line-height:1}
.bym .mo{display:grid;grid-template-columns:repeat(12,1fr);padding-right:1.72%;margin-top:6px;text-align:center;font-family:var(--font-mono);font-size:12px;color:var(--ink-3)}
.bym .cov{margin-top:6px;font-family:var(--font-mono);font-size:12px;color:var(--ink-3);line-height:1.55}
.bym .sum{margin:10px 0 0;font-size:15px;line-height:1.5;color:var(--ink)} .bym .sum b{font-weight:600}
@media (max-width:560px){ .kv{grid-template-columns:1fr;gap:4px 0} .kv .k{padding-top:10px} }

/* §7 + the ask + foot */
.ask-block{margin-top:14px}
.ask-block a{display:inline-block;font-family:var(--font-mono);font-size:clamp(20px,2.4vw,30px);color:var(--bastion);text-decoration:none;border-bottom:2px solid var(--bastion);padding-bottom:4px;word-break:break-all}
.ask-block p{margin:12px 0 0;font-size:15px;color:var(--ink-2);max-width:48ch;line-height:1.5}
.foot{margin-top:clamp(40px,5vw,72px);padding-top:24px;border-top:1px solid var(--rule-strong);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center;font-family:var(--font-mono);font-size:12px;color:var(--ink-3);letter-spacing:.04em}
.foot .lockup{width:110px;height:27px;color:var(--bastion)}

/* ---------- THE FILM IN A MODAL (rev 4.1, Sheil's note 1): a native dialog; the backdrop is Bastion at 92 % — the film's own cold-open ground, the page dimmed to one colour of the palette rather than to grey, and white player controls read on it ---------- */
dialog.film{border:0;padding:0;margin:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100vh;color:#f1f5f2}
dialog.film[open]{display:grid;place-items:center}
dialog.film::backdrop{background:rgba(20,53,43,.92)}
body:has(dialog.film[open]),body.has-modal{overflow:hidden}
.film-in{width:min(1280px, calc(100vw - 2 * var(--gutter)), calc((100vh - 140px) * 16 / 9))}
.film-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:0 0 12px}
.film-title{margin:0;font-family:var(--font-sans);font-size:15px;font-weight:500;color:#f1f5f2} .film-title span{font-family:var(--font-mono);font-size:12px;font-weight:400;color:#a9c0b2;letter-spacing:.02em}
.film-close{font:inherit;font-family:var(--font-mono);font-size:13px;letter-spacing:.02em;color:#f1f5f2;background:rgba(255,255,255,.08);border:1px solid rgba(241,245,242,.35);border-radius:999px;padding:9px 14px;line-height:1;cursor:pointer}
.film-close:hover{background:rgba(255,255,255,.16)} .film-close:focus-visible{outline:2px solid #f1f5f2;outline-offset:3px}
.film-in{background:var(--bastion);padding:14px 16px 16px;border-radius:10px}
.film-frame{aspect-ratio:16/9;background:#000;border-radius:6px;overflow:hidden;box-shadow:0 40px 100px -30px rgba(0,0,0,.7)} .film-frame video{display:block;width:100%;height:100%}
/* at 760 px and below the dialog is the whole screen: one Bastion surface from edge to edge, under the status bar,
   Safari's toolbar and the home indicator (100lvh, with viewport-fit=cover); the title row and Close at the top clear
   the notch by the safe-area inset; the film, full width, is centred in the height left below them */
@media (max-width:760px){
  dialog.film{position:fixed;inset:0;width:100%;height:100vh;height:100lvh;background:var(--bastion)}
  dialog.film::backdrop{background:var(--bastion)}
  dialog.film[open]{display:block}
  .film-in{width:100%;height:100vh;height:100dvh;border-radius:0;display:flex;flex-direction:column;padding:max(12px, env(safe-area-inset-top)) 0 max(20px, env(safe-area-inset-bottom))}
  .film-bar{flex:none;padding:0 max(var(--gutter), env(safe-area-inset-right)) 12px max(var(--gutter), env(safe-area-inset-left));min-height:56px}
  .film-frame{margin:auto;width:min(100%, calc((100dvh - 120px) * 16 / 9));border-radius:0;box-shadow:none}
  .film-close{padding:11px 16px}
}
/* motion: a fade and settle on open (220 ms), a fade on close (160 ms); none under reduced motion */
dialog.film[open]{animation:film-in .22s cubic-bezier(.23,1,.32,1)} dialog.film[open]::backdrop{animation:film-bd .22s ease}
dialog.film.closing{animation:film-out .16s ease forwards} dialog.film.closing::backdrop{animation:film-bd-out .16s ease forwards}
@keyframes film-in{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}} @keyframes film-out{to{opacity:0}} @keyframes film-bd{from{opacity:0}} @keyframes film-bd-out{to{opacity:0}}
@media (prefers-reduced-motion: reduce){ dialog.film[open],dialog.film[open]::backdrop,dialog.film.closing,dialog.film.closing::backdrop{animation:none} }

/* ---------- build: the inlined SVGs ----------
   The design file's build gives each inlined SVG a style attribute (display:block; width and height 100%), which the
   Content-Security-Policy would block, so they are sized here instead, to the same result. That attribute also beats
   the design file's own .slab .n.mark svg{14 × 12}, so the chosen label draws the mark across its 28-px square (the
   mark's viewBox carries its own margin); this rule, later and as specific, keeps that. */
.lockup svg,.lk svg,.mk svg{display:block;width:100%;height:100%}
.slab .n.mark svg{display:block;width:100%;height:100%}