/* VENDORED from the evntrace design system: Digital Forensics repo, origin/main 0339288, css/evntrace.css, copied 2026-10-10.
   Do not edit this copy — change it upstream and re-copy (see README.md). Page-only layout lives in each page's <style>. */
/* EVNTRACE TOKENS — Coherent Education visual system, adapted (2026-09-14).
   Hex source: coherencedaddy-landing/app/globals.css (.canvas-paper + .dark).
   Ratios: WCAG 2.x relative luminance, python, re-measured 2026-09-14. */
:root{
  color-scheme:light;
  --c-paper:#F8F7F4; --c-white:#FFFFFF; --c-stone:#EDEBE7;
  --c-ink:#0E0E10; --c-ink-raised:#18181B; --c-ink-2:#1F1F22; --c-paper-ink:#F2F1ED;
  --c-muted:#6B6B70; --c-fog:#A1A1A6;
  --c-coral:#FF6B4A; --c-coral-deep:#E5553A; --c-verdant:#4A9D7C; --c-flare:#D94343;
  --c-coral-sheen:#FD8A6F; /* coral 78% + paper 22% (owner, 2026-09-21): the light corner of the button gradient only, never text */
  --c-gold:#C8A96E; --c-steel:#5B78B5;

  --bg:var(--c-paper); --surface:var(--c-white); --surface-2:var(--c-stone);
  --text:var(--c-ink); --text-dim:var(--c-muted); --accent-text:var(--c-ink);
  --line:rgba(14,14,16,.08); --line-strong:var(--c-muted); --line-selected:var(--c-ink);
  --accent-fill:var(--c-coral); --accent-fill-press:var(--c-coral-deep); --accent-fill-sheen:var(--c-coral-sheen);
  --on-accent:var(--c-ink); --accent-mark:var(--c-coral);
  --focus-ring:var(--c-ink); --ring-width:2px; --ring-offset:2px;
  --ok-mark:var(--c-verdant); --error-mark:var(--c-flare);
  --sample-fill:var(--c-gold); --on-sample:var(--c-ink);

  --viz-1:var(--c-steel); --viz-2:var(--c-coral-deep); --viz-context:var(--c-muted);
  --viz-grid:rgba(14,14,16,.08); --viz-axis:var(--c-muted);
  --viz-seq-1:color-mix(in srgb,var(--c-steel) 55%,var(--c-paper));
  --viz-seq-2:color-mix(in srgb,var(--c-steel) 78%,var(--c-paper));
  --viz-seq-3:var(--c-steel);
  --viz-seq-4:color-mix(in srgb,var(--c-steel) 72%,var(--c-ink));
  --viz-seq-5:color-mix(in srgb,var(--c-steel) 48%,var(--c-ink));
  --viz-div-neg-2:color-mix(in srgb,var(--c-coral-deep) 72%,var(--c-ink));
  --viz-div-neg-1:color-mix(in srgb,var(--c-coral-deep) 60%,var(--c-paper));
  --viz-div-mid:var(--c-stone);
  --viz-div-pos-1:color-mix(in srgb,var(--c-steel) 55%,var(--c-paper));
  --viz-div-pos-2:color-mix(in srgb,var(--c-steel) 72%,var(--c-ink));

  --font-display:'Archivo Narrow','Arial Narrow','Helvetica Neue',Arial,sans-serif;
  --font-body:'Geist',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --fs-hero:clamp(2.5rem,6vw,4.5rem);
  --fs-hero-long:clamp(1.625rem,4.2vw,3rem);   /* + cell-page H1 exception only (§4.7) */
  --fs-h2:clamp(2rem,3.6vw,3rem);
  --fs-h3:1.375rem;
  --fs-lead:1.25rem;                            /* + router legend, door titles on desktop */
  --fs-body:clamp(1.0625rem,.9375rem + .6vw,1.1875rem);
  --fs-sm:.9375rem; --fs-label:.75rem; --fs-stat:clamp(2.25rem,4vw,3.5rem);
  --lh-display:.97; --lh-h2:1.02; --lh-body:1.6;
  --tracking-display:-.02em; --tracking-label:.14em; --measure:65ch;

  --space-1:4px; --space-2:8px; --space-3:16px; --space-4:24px;
  --space-5:40px; --space-6:64px; --space-7:96px;
  --pad:clamp(20px,5vw,90px); --maxw:1200px;
  --header-h:64px; --sticky-bar-h:64px;

  --target-min:48px; --target-lg:56px; --target-gap:8px; --control-border:1.5px;
  --door-min-h:88px;                            /* + */
  --progress-h:6px;                             /* + */

  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-xl:24px; --radius-pill:9999px;

  --shadow-sm:0 1px 2px rgba(14,14,16,.04);
  --shadow-md:0 4px 16px rgba(14,14,16,.08);
  --shadow-lg:0 12px 40px rgba(14,14,16,.12);
  --shadow-lift:0 10px 24px -8px rgba(14,14,16,.35),0 2px 6px -1px rgba(14,14,16,.25),inset 0 1px 0 rgba(255,255,255,.14);
  --shadow-lift-hover:0 16px 32px -10px rgba(14,14,16,.45),0 4px 10px -2px rgba(14,14,16,.3),inset 0 1px 0 rgba(255,255,255,.18);

  --ease-out:cubic-bezier(.22,.61,.36,1);
  --dur-ack:100ms; --dur-fast:180ms; --dur-base:260ms; --dur-max:360ms; --stagger:60ms;
  --dur-out:120ms;                              /* + step fade-out, reduced-motion fades */
  --dur-reveal:600ms;                           /* + scroll reveal (js/site.js §5) */

  /* + paper effects (owner, 2026-10-01) — see "Paper effects" at the end of this file */
  --manila:color-mix(in srgb,var(--c-gold) 30%,var(--c-paper));      /* folder tab + panel in front */
  --manila-back:color-mix(in srgb,var(--c-gold) 48%,var(--c-paper)); /* folder tab behind */
  --wash:color-mix(in srgb,var(--c-coral) 34%,var(--c-white));       /* highlighter wash: a fill behind ink text, never text */
  --stamp-ink:var(--c-steel);                                         /* "Received" stamp: 4.37:1 on white, large bold type */
  --paper-shade:rgba(14,14,16,.18);                                   /* shadow under a turned corner */
  --grain-blend:multiply;                                             /* paper grain (its strength is baked into the noise image) */
  --pt-x:calc(100vw + 100vh);                                         /* page turn: the crease travels this far (W+H) */
  --pt-pull-dur:1100ms;                                               /* page turn: owner pick, "1.1 speed" */
  --pt-crease:color-mix(in srgb,var(--c-stone) 72%,var(--c-ink));   /* page turn: the shadow in the fold */

  --z-bar:40; --z-header:50; --z-sheet:60; --z-tooltip:70;   /* + */
}

.band-ink{
  color-scheme:dark;
  --bg:var(--c-ink); --surface:var(--c-ink-raised); --surface-2:var(--c-ink-2);
  --text:var(--c-paper-ink); --text-dim:var(--c-fog); --accent-text:var(--c-coral);
  --line:rgba(255,255,255,.08); --line-strong:var(--c-fog); --line-selected:var(--c-paper-ink);
  --accent-mark:var(--c-coral); --focus-ring:var(--c-coral);
  --ok-mark:var(--c-verdant); --error-mark:var(--c-flare);
  --viz-context:var(--c-fog); --viz-grid:rgba(255,255,255,.08); --viz-axis:var(--c-fog);
  --viz-seq-1:color-mix(in srgb,var(--c-steel) 58%,var(--c-ink));
  --viz-seq-2:color-mix(in srgb,var(--c-steel) 82%,var(--c-ink));
  --viz-seq-3:color-mix(in srgb,var(--c-steel) 80%,var(--c-paper-ink));
  --viz-seq-4:color-mix(in srgb,var(--c-steel) 55%,var(--c-paper-ink));
  --viz-seq-5:color-mix(in srgb,var(--c-steel) 32%,var(--c-paper-ink));
  --viz-div-neg-2:color-mix(in srgb,var(--c-coral-deep) 62%,var(--c-paper-ink));
  --viz-div-neg-1:color-mix(in srgb,var(--c-coral-deep) 50%,var(--c-ink));
  --viz-div-mid:var(--c-ink-2);
  --viz-div-pos-1:color-mix(in srgb,var(--c-steel) 55%,var(--c-ink));
  --viz-div-pos-2:color-mix(in srgb,var(--c-steel) 60%,var(--c-paper-ink));
  --shadow-sm:none; --shadow-md:none; --shadow-lg:none;
  --wash:color-mix(in srgb,var(--c-coral) 38%,var(--c-ink)); --paper-shade:rgba(0,0,0,.5);
  --grain-blend:soft-light;
  background:var(--bg); color:var(--text);
}

html{scroll-padding-top:calc(var(--header-h) + 16px);scroll-padding-bottom:calc(var(--sticky-bar-h) + 16px)}
body{margin:0;background:var(--bg);color:var(--text);font:400 var(--fs-body)/var(--lh-body) var(--font-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:var(--ring-width) solid var(--focus-ring);outline-offset:var(--ring-offset)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:var(--dur-out)!important;animation-iteration-count:1!important;
    transition-duration:var(--dur-out)!important;transition-property:opacity!important;
    scroll-behavior:auto!important}
  [data-motion="transform"]{transform:none!important}
}

/* ==========================================================================
   EVNTRACE COMPONENTS — revamp spec §3 (+ §5 intake shells, §6 view shells).
   Literal colors live only in the --c-* token lines above; data-URI colors
   are written %23RRGGBB so the hex audit stays clean.
   Coral is never a text color (spec §9 check 31).
   ========================================================================== */

/* --- Base elements -------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}   /* beats .btn/.link display rules; §5.3 hides controls by attribute */
h1,h2,h3,h4{margin:0 0 var(--space-3);text-wrap:balance;overflow-wrap:break-word}
h1,h2{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-display)}
h1{font-size:var(--fs-hero);line-height:var(--lh-display)}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2)}
h3{font-family:var(--font-body);font-weight:600;font-size:var(--fs-h3);line-height:1.25;letter-spacing:-.01em}
h4{font-family:var(--font-body);font-weight:600;font-size:1.0625rem;line-height:1.35}

/* --- Layout rhythm (DESIGN-SYSTEM.md "Layout" L2/L3) ----------------------
   A heading's own next sibling decides its bottom margin: prose (p/ul/ol)
   gets L2's 24px; a card/grid/table/figure/animated-row/FAQ list gets L3's 40px.
   Anything else keeps the base 16px above (a heading followed by another
   heading, a form, or an unlisted wrapper) — unchanged, no regression. */
:where(h1,h2,h3,h4):has(+p),:where(h1,h2,h3,h4):has(+ul),:where(h1,h2,h3,h4):has(+ol){margin-bottom:var(--space-4)}
:where(h1,h2,h3,h4):has(+:is(.card,.well,.feature-cols,.grid-2,.tiles,.stat-tiles,.steps-list,.steps-list--strip,.ws-row,.choice-grid,table,.table-wrap,figure,.checklist,.intake,.split,.showcase,.faq,.paper-stack,.tabs--folder)){margin-bottom:var(--space-5)}
p{margin:0 0 var(--space-3);max-width:var(--measure)}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 var(--space-3) var(--space-2);padding-left:var(--space-4)}
li{margin:0 0 var(--space-2)}
a{color:inherit}
img,svg{max-width:100%}
code,kbd,samp,pre{font-family:var(--font-mono);font-size:.9375rem}
hr{border:0;border-top:1px solid var(--line);margin:var(--space-5) 0}
::selection{background:var(--accent-fill);color:var(--on-accent)}

/* --- Utilities ------------------------------------------------------------ */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.meta{font-family:var(--font-mono);font-weight:500;font-size:var(--fs-label);
  text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--text-dim)}
.cta-row+.meta{margin-top:var(--space-4)}
.meta+.jump-links{margin-top:var(--space-4)}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:0}
.lead{font-size:var(--fs-lead);line-height:1.45;max-width:38ch}
.trust-row{font-family:var(--font-mono);font-weight:500;font-size:var(--fs-label);
  text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--text-dim);max-width:none}
.well{background:var(--surface-2);border-radius:var(--radius-lg);padding:var(--space-4)}
.note{display:block;font-size:var(--fs-sm);color:var(--text-dim);margin:var(--space-1) 0 0}
/* Contrast: --text-dim measures 5.30:1 on white, 4.95:1 on paper — both pass 4.5:1.
   On --surface-2 (stone, e.g. .well) it is 4.45:1 and FAILS — never place .note there. */

/* --- §3.1 Layout primitives ---------------------------------------------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--space-6)}
@media (min-width:1024px){.section{padding-block:var(--space-7)}}
/* L1: a page whose <main> does not end in a .section still ends clear of the footer (owner 2026-09-28: "BUTTON SPACing bottom of the page"). Report documents keep their own sheet rhythm. */
body:not(.kit-doc) main:not(:has(> .section:last-child)){padding-block-end:var(--space-6)}
@media (min-width:1024px){body:not(.kit-doc) main:not(:has(> .section:last-child)){padding-block-end:var(--space-7)}}
.section--tight{padding-block:var(--space-6)}
.split{display:grid;grid-template-columns:1fr;gap:var(--space-5)}
@media (min-width:1024px){.split{grid-template-columns:1.1fr .9fr;gap:var(--space-6);align-items:start}}
.grid-2{display:grid;grid-template-columns:1fr;gap:var(--space-4);margin-bottom:var(--space-5)}
@media (min-width:768px){.grid-2{grid-template-columns:1fr 1fr}}
.stack>*+*{margin-top:var(--space-3)}
/* Section/card rhythm on the --space-* scale (D5) — pick the class, don't invent a px value.
   rhythm-4 (24px): closely related items. rhythm-5 (40px): cards/findings inside one section.
   rhythm-6 (64px): section-to-section, matches .section's own padding-block. */
.rhythm-4>*+*{margin-top:var(--space-4)}
.rhythm-5>*+*{margin-top:var(--space-5)}
.rhythm-6>*+*{margin-top:var(--space-6)}
/* L4: sibling boxes (cards/tables/callouts/figures/tiles) stacked directly get >=24px by
   default. Zero-specificity (:where()) on purpose — any existing component rule (e.g.
   .sample-row+.sample-row's own 8px) already wins over this. For 40px between GROUPS of
   boxes, wrap the group in .rhythm-5 above, don't rely on this default. */
:where(.card,.well,.checklist,.intake,.canbox,table,.table-wrap,figure,.tiles,.stat-tiles)+:where(.card,.well,.checklist,.intake,.canbox,table,.table-wrap,figure,.tiles,.stat-tiles){margin-top:var(--space-4)}
/* G14: a grid's own gap spaces its items, so the L4 default above never fires inside one (it staggered side-by-side
   cards by 24px and doubled the row gap). Same zero specificity, declared after it, so it wins only over L4. */
:where(.grid-2,.feature-cols,.tiles,.stat-tiles)>*{margin-top:0}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.skip-link{position:absolute;left:16px;top:0;z-index:calc(var(--z-header) + 1);
  display:inline-flex;align-items:center;min-height:var(--target-min);padding:0 var(--space-3);
  background:var(--c-white);color:var(--c-ink);border-radius:var(--radius-md);
  font-weight:600;text-decoration:none;transform:translateY(-110%);
  transition:transform var(--dur-fast) var(--ease-out)}
.skip-link:focus{transform:translateY(8px)}

/* --- §3.2 Site header ----------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:var(--z-header);background:var(--bg);
  border-bottom:1px solid transparent}
.site-header.is-stuck{border-bottom-color:var(--line)}
.site-header__inner{display:flex;align-items:center;gap:var(--space-3);min-height:var(--header-h)}
.site-header__brand{display:inline-flex;align-items:center;gap:10px;min-height:var(--target-min);
  text-decoration:none;font-family:var(--font-display);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;font-size:1.0625rem;color:var(--text)}
.brand-mark{width:28px;height:28px;flex:none;color:var(--text)}
.brand-wordmark{display:block;height:.79em;width:5.48em;flex:none;color:var(--text)}
.site-header__nav{display:none}
@media (min-width:1024px){
  .site-header__nav{display:flex;align-items:center;gap:var(--space-4);margin-inline:auto}
  .site-header__nav a{display:inline-flex;align-items:center;min-height:var(--target-min);
    text-decoration:none;font-size:var(--fs-sm);font-weight:500;color:var(--text)}
  .site-header__nav a:hover{text-decoration:underline;text-underline-offset:3px}
  .site-header__nav a[aria-current="page"]{font-weight:600;box-shadow:inset 0 -2px 0 var(--line-selected)}
}
.site-header__call{display:inline-flex;align-items:center;gap:8px;min-height:var(--target-min);
  margin-left:auto;padding-inline:8px;text-decoration:none;font-weight:600;
  font-size:var(--fs-sm);color:var(--text)}
.site-header__call svg{width:18px;height:18px;flex:none}
.site-header__num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:500}
/* The phone digits hide where the header is tight (measured 2026-09-21, once "Sign in" joined it):
   below 480px (this was 399.98px; digits + Sign in overflow from 400 to ~470px) and from 1024 to
   1099px, where the menu and the coral header button otherwise wrap onto two lines. The Call link
   still dials and keeps its accessible name; only the digits hide. */
@media (max-width:479.98px),(min-width:1024px) and (max-width:1099.98px){
  .site-header__num{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
}
.site-header .site-header__cta{display:none}
@media (min-width:768px){.site-header .site-header__cta:not([hidden]){display:inline-flex}}
/* Header sign-in link (owner, 2026-09-21): styled like the call link beside it. */
.site-header__signin{display:inline-flex;align-items:center;min-height:var(--target-min);
  padding-inline:8px;text-decoration:none;font-weight:600;font-size:var(--fs-sm);color:var(--text);
  white-space:nowrap}
.site-header__signin:hover{text-decoration:underline;text-underline-offset:3px}
.site-header__signin[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--line-selected)}
/* Below 360px the word "Call" hides too; the icon still dials and the link keeps its accessible name. */
@media (max-width:359.98px){
  .site-header__call>span:first-of-type{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
}

/* --- §3.3 Buttons and links ---------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--target-min);padding-inline:var(--space-4);border:0;border-radius:var(--radius-md);
  font-family:var(--font-body);font-weight:600;font-size:1rem;line-height:1.2;
  text-align:center;text-decoration:none;cursor:pointer;background:transparent;color:var(--text);
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out)}
.btn+.btn{margin-left:var(--target-gap)}
/* Coral sheen (owner, 2026-09-21: option C of the button review): light corner, coral, deep coral.
   Brand tokens only; the label stays ink, 5.23:1 at the darkest end. Pressed stays solid deep coral. */
.btn--solid{background:linear-gradient(135deg,var(--accent-fill-sheen) 0%,var(--accent-fill) 45%,var(--accent-fill-press) 100%);
  color:var(--on-accent);box-shadow:var(--shadow-lift)}
.btn--solid:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift-hover)}
.btn--solid:active{background:var(--accent-fill-press);transform:translateY(0);
  box-shadow:var(--shadow-sm);transition-duration:var(--dur-ack)}
.btn--hero{min-height:var(--target-lg);font-family:var(--font-display);font-weight:700;
  font-size:1.25rem;text-transform:uppercase;letter-spacing:var(--tracking-label)}
.btn--ghost{background:transparent;border:var(--control-border) solid var(--line-strong);color:var(--text)}
.btn--ghost:hover{background:var(--surface-2)}
.well .btn--ghost,.band-ink .btn--ghost:hover{background:var(--surface)}
.btn--block{width:100%}
@media (max-width:767.98px){
  .btn--block{min-height:var(--target-lg)}
  .btn+.btn{margin-left:0}
}
.btn[aria-busy="true"]{pointer-events:none}
/* §3.22 copy button fallback field (inserted by site.js when the clipboard API is absent) */
.copy-fallback{display:block;width:100%;max-width:22rem;min-height:var(--target-min);
  margin-top:var(--space-2);padding:12px 14px;font-family:var(--font-mono);font-size:1rem;
  color:var(--text);background:var(--surface);
  border:var(--control-border) solid var(--line-strong);border-radius:var(--radius-md)}
.link{display:inline-flex;align-items:center;min-height:var(--target-min);
  color:var(--text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  background:none;border:0;padding:0;font:inherit;font-size:var(--fs-sm);cursor:pointer;text-align:left}
.link:hover{text-decoration:underline 2px var(--accent-mark);text-underline-offset:3px}
p a:not(.link):not(.btn),li a:not(.link):not(.door):not(.btn),.card__body a:not(.btn){color:var(--text);text-decoration:underline;text-underline-offset:3px}

/* --- §3.4 Eyebrow and highlighter ---------------------------------------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 var(--space-2);
  font-family:var(--font-mono);font-weight:500;font-size:var(--fs-label);
  text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--accent-text)}
.eyebrow__rule{display:inline-block;width:40px;height:2px;flex:none;background:var(--line-strong)}
.hl{background:linear-gradient(transparent 88%,var(--accent-fill) 88%);color:var(--text);
  box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* --- §3.5 Router (home only) ---------------------------------------------- */
.router{margin-block:var(--space-4)}
.router__legend{font-family:var(--font-body);font-weight:600;text-transform:none;
  letter-spacing:0;font-size:1.0625rem;line-height:1.3;margin-bottom:var(--space-3)}
@media (min-width:1024px){.router__legend{font-size:var(--fs-lead)}}
.router__list{list-style:none;margin:0;padding:0;display:grid;gap:var(--target-gap)}
.router__list>li{margin:0}
.router__fallback{margin-top:var(--space-2)}
.door{display:flex;align-items:center;gap:var(--space-3);min-height:var(--door-min-h);
  padding:20px 24px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);text-decoration:none;color:var(--text);
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out)}
@media (max-width:399.98px){.door{padding:16px}}
.door:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}
.door__icon{width:32px;height:32px;flex:none;color:var(--text)}
.door__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.door__title{font-weight:600;font-size:1.125rem;line-height:1.25}
@media (min-width:1024px){.door__title{font-size:var(--fs-lead)}}
.door__line{font-size:var(--fs-sm);line-height:1.4;color:var(--text-dim)}
.door__arrow{width:20px;height:20px;flex:none;margin-left:auto;padding:8px;box-sizing:content-box;
  border:var(--control-border) solid var(--line-strong);border-radius:var(--radius-pill);color:var(--text)}

/* --- §3.6 Cards, sample rows, steps list ---------------------------------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--space-4);box-shadow:var(--shadow-sm)}
@media (max-width:767.98px){.card{padding:var(--space-3)}}
/* .card__title sets no margin of its own (G11): the L2/L3 heading defaults give it 24px to its body, 40px to a grid. */
.card__body{margin-bottom:var(--space-2)}
.card__meta{font-family:var(--font-mono);font-weight:500;font-size:var(--fs-label);
  text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--text-dim);
  margin:0 0 var(--space-2)}
.card--link{display:block;text-decoration:none;color:var(--text);
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.card--link:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.card--feature{border-radius:var(--radius-xl);box-shadow:var(--shadow-lg)}
/* .card--price: one emphasised price for a single product — the figure is the emphasis
   (display font, larger size); everything else is the ordinary .card recipe. */
.card--price .card__title{font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.75rem,4vw,2.5rem);line-height:var(--lh-h2);letter-spacing:var(--tracking-display)}
/* Card parts (owner, 2026-10-06; first used by the home page's services, _dev/home-services-ux.md): an icon at
   the top, a compact list, and one action at the card's foot. A card that holds a .card__action stacks as a
   column and the action sits 24px under the content above it, so cards side by side in a grid line up their
   buttons. Give the element before the action no bottom margin (.card__list has none). */
.card__icon{display:block;flex:none;width:32px;height:32px;color:var(--text);margin-bottom:var(--space-3)}
.card__list{margin-bottom:0;font-size:var(--fs-sm);color:var(--text-dim)}
.card__list>li{margin:0}
.card__list>li+li{margin-top:var(--space-1)}
.card:has(>.card__action){display:flex;flex-direction:column}
.card__action{margin-top:auto;padding-top:var(--space-4)}
.sample-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);min-height:64px;
  padding:var(--space-3) var(--space-4);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);text-decoration:none;color:var(--text);
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out)}
.sample-row+.sample-row{margin-top:var(--target-gap)}
.sample-row+h3{margin-top:var(--space-5)}
.sample-row:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}
@media (max-width:399.98px){.sample-row{padding:var(--space-3)}}
.sample-row__text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 60%}
.sample-row__title{font-weight:600}
.sample-row__line{font-size:var(--fs-sm);color:var(--text-dim)}
.sample-row__arrow{width:20px;height:20px;flex:none;margin-left:auto}
.steps-list{list-style:none;margin:0;padding:0}
.steps-list__item{position:relative;margin:0;padding:0 0 var(--space-5) 52px}
.steps-list__item:last-child{padding-bottom:0}
.steps-list__item::before{content:"";position:absolute;left:15px;top:36px;bottom:4px;
  width:2px;background:var(--line)}
.steps-list__item:last-child::before{display:none}
.steps-list__num{position:absolute;left:0;top:0;display:inline-flex;align-items:center;
  justify-content:center;width:32px;height:32px;border:var(--control-border) solid var(--line-strong);
  border-radius:50%;background:var(--bg);color:var(--text);
  font-family:var(--font-mono);font-weight:500;font-size:var(--fs-sm)}
.steps-list__title{margin-bottom:var(--space-1)}
.steps-list__body{color:var(--text-dim);margin:0}
/* Home: the four steps as one joined strip, title and line only (ivo.ai pattern, owner 2026-09-26) */
.steps-list--strip{display:grid;grid-template-columns:1fr;gap:var(--space-4);counter-reset:step}
@media (min-width:600px){.steps-list--strip{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.steps-list--strip{grid-template-columns:repeat(4,1fr)}}
/* Owner 2026-10-01 ("this is ugly", on one box split by 1px rules): four separate paper cards, each numbered
   01-04 by a CSS counter under a short coral marker (a border, never text). */
.steps-list--strip .steps-list__item,.steps-list--strip .steps-list__item:last-child{display:flex;flex-direction:column;
  gap:var(--space-2);padding:var(--space-4);counter-increment:step;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.steps-list--strip .steps-list__item::before,.steps-list--strip .steps-list__item:last-child::before{display:block;
  position:static;width:auto;align-self:flex-start;content:counter(step,decimal-leading-zero);
  padding-top:var(--space-2);border-top:2px solid var(--accent-mark);background:none;font-family:var(--font-mono);
  font-weight:500;font-size:var(--fs-label);letter-spacing:var(--tracking-label);color:var(--text-dim)}
.steps-list--strip .steps-list__title{margin:0;font-size:1.125rem}

/* --- §3.7 Can/can't box --------------------------------------------------- */
.canbox{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent-mark);
  border-radius:var(--radius-md);padding:16px 20px;color:var(--text)}
.canbox p{margin:0}
.canbox__do+.canbox__cant{margin-top:var(--space-2)}

/* --- §3.8 In-memory checklist (fraud page) -------------------------------- */
.checklist{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--space-4)}
.checklist__title{font-family:var(--font-body);font-weight:600;font-size:var(--fs-h3);
  text-transform:none;letter-spacing:-.01em;line-height:1.25}
.checklist ul{list-style:none;margin:0 0 var(--space-3);padding:0;display:grid;gap:var(--target-gap)}
.checklist li{margin:0}
.checklist__count{font-family:var(--font-mono);font-weight:500;font-size:var(--fs-label);
  text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--text-dim);
  margin:0 0 var(--space-2)}
.checklist__done{font-weight:500;margin:0 0 var(--space-2)}
.checklist__foot{font-size:var(--fs-sm);color:var(--text-dim);margin:0}

/* --- §3.9 Choice rows ----------------------------------------------------- */
.choice{display:flex;align-items:center;gap:12px;min-height:var(--target-min);
  padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius-md);
  background:var(--surface);cursor:pointer}
.choice__text{font-size:1rem;line-height:1.35}
.choice input[type="radio"],.choice input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin:0;
  border:var(--control-border) solid var(--line-strong);background:var(--surface);cursor:pointer;
  background-repeat:no-repeat;background-position:center}
.choice input[type="radio"]{border-radius:50%}
.choice input[type="checkbox"]{border-radius:4px}
.choice input[type="radio"]:checked{background-color:var(--line-selected);border-color:var(--line-selected);
  background-image:radial-gradient(circle,var(--bg) 0 3.2px,transparent 3.4px)}
.choice input[type="checkbox"]:checked{background-color:var(--line-selected);border-color:var(--line-selected);
  background-size:14px 14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.4l3.3 3.3L14 6' fill='none' stroke='%23F8F7F4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.band-ink .choice input[type="checkbox"]:checked{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.4l3.3 3.3L14 6' fill='none' stroke='%230E0E10' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.choice:has(input:checked){border:2px solid var(--line-selected);padding:7px 11px}
.choice-grid{display:grid;grid-template-columns:1fr;gap:var(--target-gap);margin:0;padding:0;border:0;
  list-style:none}
.choice-grid>li{margin:0}
@media (min-width:600px){.choice-grid--multi{grid-template-columns:1fr 1fr}}

/* --- §3.10 Text field, hint, error, suggestion, notice, counter ----------- */
.field{margin-bottom:var(--space-3)}
.field>label{display:block;font-weight:600;font-size:var(--fs-sm);margin-bottom:var(--space-1)}
.field__hint{font-size:var(--fs-sm);color:var(--text-dim);margin:0 0 var(--space-2)}
.field input,.field textarea,.field select{display:block;width:100%;min-height:var(--target-min);
  padding:12px 14px;font-family:var(--font-body);font-size:1rem;line-height:1.4;color:var(--text);
  background:var(--surface);border:var(--control-border) solid var(--line-strong);
  border-radius:var(--radius-md)}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border:2px solid var(--line-selected);
  padding:11px 13px}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border:2px solid var(--error-mark);
  padding:11px 13px}
.field__error{display:flex;align-items:flex-start;gap:8px;margin:var(--space-1) 0 0;
  font-weight:500;font-size:var(--fs-sm);color:var(--text)}
.field__error svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--error-mark)}
.field__suggest{margin:var(--space-1) 0 0;font-size:var(--fs-sm)}
.field__notice{margin:var(--space-2) 0 0;padding:12px 16px;background:var(--surface);
  border:1px solid var(--line);border-left:4px solid var(--line-selected);
  border-radius:var(--radius-md);color:var(--text);max-width:none}
.field__notice .btn{margin-top:var(--space-2)}
.field__count{margin:var(--space-1) 0 0;font-family:var(--font-mono);font-weight:500;
  font-size:var(--fs-label);font-variant-numeric:tabular-nums;color:var(--text-dim)}

/* --- §3.11 Intake stepper, banners, error summary, completion ------------- */
.intake{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--space-4);max-width:720px}
@media (max-width:399.98px){.intake{padding:var(--space-3)}}
.intake__progress{margin-bottom:var(--space-4)}
.progress__text{font-family:var(--font-mono);font-weight:500;font-size:var(--fs-label);
  text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--text-dim);
  margin:0 0 var(--space-2)}
.progress__bar{height:var(--progress-h);border-radius:var(--radius-pill);background:var(--surface-2);
  overflow:hidden}
.progress__fill{display:block;height:100%;border-radius:var(--radius-pill);background:var(--line-selected);
  transform-origin:left;transform:scaleX(0);transition:transform var(--dur-base) var(--ease-out)}
.progress__nodes{display:none}
@media (min-width:768px){
  .progress__nodes{display:block;margin-top:var(--space-2)}
  .progress__nodes ol{list-style:none;display:flex;align-items:center;margin:0;padding:0}
  .progress__nodes li{position:relative;margin:0;flex:1;display:flex;align-items:center;
    justify-content:center}
  .progress__nodes li+li::before{content:"";position:absolute;right:50%;left:-50%;top:50%;
    border-top:1.5px dashed var(--line-strong)}
  .progress__nodes li.is-done+li::before{border-top:2px solid var(--line-selected)}
  .progress__nodes a,.progress__nodes button,.progress__nodes span{position:relative;z-index:1;
    display:inline-flex;align-items:center;justify-content:center;width:var(--target-min);
    height:var(--target-min);background:transparent;border:0;padding:0;text-decoration:none;
    font-family:var(--font-mono);font-weight:500;font-size:var(--fs-sm);color:var(--text-dim)}
  .progress__nodes a,.progress__nodes button{cursor:pointer}
  .progress__nodes a::before,.progress__nodes button::before,.progress__nodes span::before{
    content:"";position:absolute;width:32px;height:32px;border-radius:50%;
    border:var(--control-border) solid var(--line-strong);background:var(--surface)}
  .progress__nodes li.is-done :where(a,button)::before{background:var(--line-selected);
    border-color:var(--line-selected)}
  .progress__nodes li.is-done :where(a,button){color:var(--bg)}
  .progress__nodes li.is-current span::before{background:var(--accent-fill);border:2px solid var(--c-ink)}
  .progress__nodes li.is-current span{color:var(--on-accent)}
}
.intake__done1{font-size:var(--fs-sm);color:var(--text-dim);margin:0 0 var(--space-3)}
.intake__actions{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  margin-top:var(--space-4)}
.intake__actions .btn{margin-left:auto}
@media (max-width:767.98px){
  .intake__actions{flex-direction:column-reverse;align-items:stretch}
  .intake__actions .btn{width:100%;min-height:var(--target-lg);margin-left:0}
  .intake__actions .link{justify-content:center}
}
.intake__privacy{font-size:var(--fs-sm);color:var(--text-dim);margin-top:var(--space-3)}
.intake__preview{white-space:pre-wrap;word-break:break-word;margin:0;padding:var(--space-3);
  background:var(--surface-2);border-radius:var(--radius-md);font-size:var(--fs-sm);color:var(--text)}
.step{animation:evt-step-in var(--dur-base) var(--ease-out) both}
.step.is-leaving{animation:evt-step-out var(--dur-out) var(--ease-out) both}
@keyframes evt-step-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes evt-step-out{from{opacity:1}to{opacity:0}}
fieldset.q{margin:0 0 var(--space-4);padding:0;border:0}
fieldset.q>legend{padding:0;margin-bottom:var(--space-2);font-weight:600;font-size:var(--fs-sm)}
.banner{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-3);
  padding:var(--space-3) var(--space-4);background:var(--surface);border:1px solid var(--line);
  border-left:4px solid var(--line-selected);border-radius:var(--radius-md);color:var(--text)}
.banner--error{border-left-color:var(--error-mark)}
.banner p{margin:0}
.banner__actions{display:flex;flex-wrap:wrap;gap:var(--target-gap)}
.error-summary{margin-bottom:var(--space-3);padding:var(--space-3) var(--space-4);
  background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--error-mark);
  border-radius:var(--radius-md);color:var(--text)}
.error-summary h2,.error-summary h3{font-family:var(--font-body);font-weight:600;font-size:1.0625rem;
  text-transform:none;letter-spacing:0;line-height:1.3;margin-bottom:var(--space-2)}
.error-summary ul{list-style:none;margin:0;padding:0}
.error-summary li{margin:0}
.error-summary a{display:inline-flex;align-items:center;min-height:var(--target-min);
  color:var(--text);text-decoration:underline;text-underline-offset:3px;font-size:var(--fs-sm)}
.done__check{width:48px;height:48px;color:var(--ok-mark);margin-bottom:var(--space-3)}
.done__check path{stroke-dasharray:48;stroke-dashoffset:0;animation:evt-draw 300ms var(--ease-out) 1}
@keyframes evt-draw{from{stroke-dashoffset:48}to{stroke-dashoffset:0}}
.done__title{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:var(--tracking-display);font-size:var(--fs-h2);line-height:var(--lh-h2)}
.done__ref{display:flex;flex-wrap:wrap;align-items:center;gap:var(--target-gap)}
.done__ref code{font-weight:500;font-variant-numeric:tabular-nums}

/* --- §3.12 Evidence label chip and inference tag -------------------------- */
.label-chip{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-pill);
  color:var(--text);font-family:var(--font-body);font-weight:500;font-size:var(--fs-sm);
  line-height:1.5;white-space:nowrap}
button.label-chip{min-height:var(--target-min);cursor:pointer}
.label-chip__glyph{width:16px;height:16px;flex:none;color:var(--text-dim)}
.label-chip[data-label="record"] .label-chip__glyph,
.label-chip[data-label="corroborated"] .label-chip__glyph,
.label-chip[data-status="agreed"] .label-chip__glyph,
.label-chip[data-status="verified"] .label-chip__glyph{color:var(--ok-mark)}
.label-chip[data-label="contradicted"] .label-chip__glyph,
.label-chip[data-status="disputed"] .label-chip__glyph,
.label-chip[data-status="pastdue"] .label-chip__glyph{color:var(--error-mark)}
.tag-inference{display:inline-flex;align-items:center;padding:1px 8px;
  border:1px dashed var(--line-strong);border-radius:var(--radius-sm);color:var(--text);
  font-family:var(--font-mono);font-weight:500;font-size:var(--fs-label);
  text-transform:uppercase;letter-spacing:var(--tracking-label)}

/* --- §3.14 Disclosure and §3.21 FAQ --------------------------------------- */
/* D3 (owner, 27 Sep: "chevrons look bad"; 22 Sep, MDB app: "buttons still have chevrons, I thought
   we came up with something better… it could be a hover action"; the Green report's buttons named
   good, 27 Sep). Canonical disclosure everywhere on the site: the kit's outlined pill, real text,
   a small turning indicator INSIDE the pill — never a bare chevron with no label.
   kit/evntrace-doc.css's `main details>summary` rule matches this in behaviour (D2 parity test) —
   not textually identical: the kit hard-codes min-height:44px where this rule uses
   var(--target-min), and the kit also sets text-transform:none;letter-spacing:0, which this rule
   does not; see kit/README.md. */
main details>summary{list-style:none;display:inline-flex;align-items:center;gap:10px;
  min-height:var(--target-min);padding:4px 18px 4px 14px;border:1px solid var(--line-strong);
  border-radius:var(--radius-pill);background:var(--surface);color:var(--text);cursor:pointer;
  font:500 .9rem/1.3 var(--font-body);user-select:none}
main details>summary::-webkit-details-marker{display:none}
main details>summary::before{content:"";flex:none;width:7px;height:7px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);margin:0 2px;transition:transform var(--dur-fast) var(--ease-out)}
main details[open]>summary::before{transform:rotate(45deg);margin-top:-4px}
main details>summary:hover{background:var(--surface-2);border-color:var(--text)}
/* ---- disclosure ROW variant: a full-width row for a list of same-width entries (e.g. a
   timeline), not a pill — same chevron and Show/Hide mechanism, just a different container
   shape. The D3 pill above stays the default for small "Show ..." triggers. Mirrors
   kit/evntrace-doc.css's copy (this file's own radius token is --radius-md, not --radius). ---- */
main details.disclosure-row>summary{display:flex;flex-wrap:wrap;align-items:baseline;width:100%;
  border-radius:var(--radius-md);column-gap:var(--space-2)}
main details.disclosure-row>summary .tm{margin-left:auto}
/* Pair the pill with `<span class="when-closed">Show X</span><span class="when-open">Hide X</span>`
   where the trigger is a task label ("Check what we'll send"). A question (FAQ) or a per-item label
   (a timeline entry) reads fine as its own text; the words stay put, only the pill+arrow apply. */
summary .when-open{display:none}
details[open]>summary .when-open{display:inline}
details[open]>summary .when-closed{display:none}
.disclosure,.faq details{background:none;border:0;border-radius:0}
.faq details+details{margin-top:var(--space-2)}
.disclosure__body,.faq__ans{padding:var(--space-2) 0 0}

/* --- §3.15 Tabs and segmented toggle -------------------------------------- */
.tabs{display:flex;flex-wrap:wrap;gap:var(--space-3);border-bottom:1px solid var(--line);
  margin-bottom:var(--space-4)}
.tabs[hidden]{display:none}
.tabs [role="tab"]{min-height:var(--target-min);padding:0 var(--space-2);border:0;
  background:none;cursor:pointer;font-family:var(--font-body);font-size:1rem;font-weight:500;
  color:var(--text);box-shadow:inset 0 -2px 0 transparent}
.tabs [role="tab"][aria-selected="true"]{font-weight:600;box-shadow:inset 0 -2px 0 var(--line-selected)}
.seg{display:inline-flex;border:var(--control-border) solid var(--line-strong);
  border-radius:var(--radius-md);overflow:hidden}
.seg button{min-height:var(--target-min);padding-inline:var(--space-3);border:0;background:var(--surface);
  color:var(--text);font-family:var(--font-body);font-size:var(--fs-sm);font-weight:500;cursor:pointer}
.seg button+button{border-left:var(--control-border) solid var(--line-strong)}
.seg button[aria-pressed="true"]{background:var(--surface-2);font-weight:600;
  box-shadow:inset 0 -2px 0 var(--line-selected)}

/* --- §3.16 Drawer / bottom sheet ------------------------------------------ */
.drawer{margin:var(--space-2) 0 var(--space-3);padding:var(--space-3) var(--space-4);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);
  animation:evt-drawer-in var(--dur-fast) var(--ease-out) both}
@keyframes evt-drawer-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.drawer__close{display:none}
@media screen and (max-width:760px){
  .drawer{position:fixed;inset-inline:0;bottom:0;margin:0;max-height:60vh;overflow:auto;
    z-index:var(--z-sheet);border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow:var(--shadow-lg);padding-bottom:calc(var(--space-4) + env(safe-area-inset-bottom))}
  .drawer__close{display:inline-flex}
}

/* --- §3.17 Tooltip -------------------------------------------------------- */
.tooltip{position:absolute;top:0;left:0;z-index:var(--z-tooltip);max-width:min(280px,80vw);
  padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--text);font-size:var(--fs-sm);line-height:1.35;
  pointer-events:none;box-shadow:var(--shadow-md)}

/* --- §3.18 Viz frame and data tables -------------------------------------- */
.viz{margin:0 0 var(--space-5)}
.viz__head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3)}
.viz__title{margin:0;flex:1 1 20ch}
.viz__controls{display:flex;flex-wrap:wrap;gap:var(--target-gap);margin-bottom:var(--space-3)}
.viz__chart{margin-bottom:var(--space-3)}
.viz__chart svg{width:100%;height:auto}
.viz__chart text{font-family:var(--font-mono);font-size:var(--fs-label);font-variant-numeric:tabular-nums;
  fill:var(--viz-axis)}
.viz__method{font-size:var(--fs-sm);color:var(--text-dim);margin:var(--space-2) 0 0}
/* Stage B (2026-09-28): chart marks drawn by js/evidence-views.js (classes appear only at
   runtime) — promoted from sample-mediation-brief.html's page-local <style>, unchanged. */
.tl-dot{fill:var(--c-ink)}
.tl-dot--ring{stroke:var(--c-ink)}
.tl-mark{cursor:pointer}
.tl-mark.is-focus .tl-dot{stroke:var(--c-ink);stroke-width:2}
.amt-bar{fill:var(--viz-1)}
.amt-tick{fill:var(--c-ink)}
.amt-row text{fill:var(--viz-axis)}
.obl-mark .glyph{stroke:var(--text-dim)}
.obl-mark[data-status="verified"] .glyph{stroke:var(--ok-mark)}
.obl-mark[data-status="pastdue"] .glyph{stroke:var(--error-mark)}
.viz__now{stroke:var(--viz-axis)}
/* Stage B bug fix: js/evidence-views.js draws every chart's grid baseline as class="viz__grid"
   with no inline stroke — this selector had no rule anywhere, so all 10 grid lines across the 3
   live charts on sample-mediation-brief.html render stroke:none (verified in-browser, 2026-09-28). */
.viz__grid{stroke:var(--viz-grid)}
/* Stage B: comparison/range chart (js/settlement-worksheet.js chart()) — was entirely unstyled;
   .ws-zone/.ws-zone-hatch painted solid black over the whole chart (SVG fill defaults to black),
   verified in-browser on settlement-range-worksheet.html, 2026-09-28. .viz__axis/.viz__label make
   the same two classes work outside a .viz__chart host — specificity (.viz__chart text is more
   specific than .viz__axis/.viz__label alone) keeps the identical existing value for the
   JS-drawn charts above, so nothing there changes. */
.viz__axis{fill:var(--viz-axis)}
.viz__label{fill:var(--text)}
.ws-bar1{fill:var(--viz-1)}
.ws-bar2{fill:var(--viz-2)}
.ws-zone{fill:var(--viz-context);opacity:.22}
.ws-zone-hatch{color:var(--viz-context)}
.ws-gap{stroke:var(--error-mark)}
/* Fix round (2026-09-28): an SVG's text scales with its viewBox-to-viewport ratio, same as its
   geometry — at 375px this chart's 640-wide viewBox compresses its 12px labels to ~5px actual
   height (measured), illegible. Unlike the evidence-views.js charts (§ below) this one has no
   table.data fallback yet (flagged above), but the two sentences printed just above the chart
   already state the same numbers in words, so hiding the decorative SVG (aria-hidden) below the
   phone breakpoint loses nothing. */
@media screen and (max-width:760px){.worksheet__chart{display:none}}
table.data{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
table.data caption{text-align:left;font-weight:600;padding-bottom:var(--space-2)}
table.data th,table.data td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);
  vertical-align:top}
table.data thead th{font-family:var(--font-mono);font-weight:500;font-size:var(--fs-label);
  text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--text-dim)}
table.data td.num,table.data th.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
@media screen and (max-width:760px){
  /* §6.5: wide tables become stacked cards, CSS only. Each td carries data-th. */
  table.data--stack,table.data--stack caption,table.data--stack tbody,table.data--stack tr,table.data--stack td{display:block}
  table.data--stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  table.data--stack tr{background:var(--surface);border:1px solid var(--line);
    border-radius:var(--radius-md);padding:var(--space-3);margin-bottom:var(--target-gap)}
  table.data--stack td{border:0;padding:4px 0}
  table.data--stack td[data-th]::before{content:attr(data-th);display:block;
    font-family:var(--font-mono);font-size:var(--fs-label);text-transform:uppercase;
    letter-spacing:var(--tracking-label);color:var(--text-dim)}
}
/* §6.9 linked highlighting: fade, never hide */
[data-sel] [data-issues]:not(.is-linked){opacity:.25;transition:opacity var(--dur-fast) var(--ease-out)}

/* --- §3.19 Sticky mobile action bar --------------------------------------- */
.stickybar{display:none}
@media (max-width:767.98px){
  body{padding-bottom:calc(var(--sticky-bar-h) + env(safe-area-inset-bottom))}
  .stickybar:not([hidden]){display:flex;align-items:center;gap:var(--target-gap);
    position:fixed;inset-inline:0;bottom:0;z-index:var(--z-bar);
    height:calc(var(--sticky-bar-h) + env(safe-area-inset-bottom));
    padding:8px var(--space-3) calc(8px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line)}
  .stickybar .btn{flex:1;min-height:var(--target-min);margin-left:0}
}

/* --- §3.20 Site footer ---------------------------------------------------- */
.site-footer{padding-block:var(--space-6)}
.site-footer__cols{display:grid;grid-template-columns:1fr;gap:var(--space-5)}
@media (min-width:768px){.site-footer__cols{grid-template-columns:repeat(3,1fr)}}
.site-footer__h{font-family:var(--font-mono);font-weight:500;font-size:var(--fs-label);
  text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--text-dim);
  margin-bottom:var(--space-2)}
.site-footer nav,.site-footer__cols>div{display:flex;flex-direction:column;align-items:flex-start}
.site-footer a{display:inline-flex;align-items:center;min-height:var(--target-min);
  color:var(--text);text-decoration:none;font-size:var(--fs-sm)}
.site-footer a:hover{text-decoration:underline;text-underline-offset:3px}
.site-footer p{color:var(--text-dim);font-size:var(--fs-sm);margin:var(--space-2) 0 0}
.site-footer__legal{margin-top:var(--space-5);padding-top:var(--space-4);
  border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--text-dim);max-width:none}

/* --- Sample-page frame (§4.4, §4.6, §4.8) --------------------------------- */
.samplebar{position:sticky;top:0;z-index:var(--z-header);padding:10px var(--space-3);
  text-align:center;font-family:var(--font-mono);font-weight:500;font-size:var(--fs-label);
  text-transform:uppercase;letter-spacing:var(--tracking-label)}
.watermark{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;z-index:0;color:var(--text);opacity:.04;
  font-family:var(--font-display);font-weight:700;font-size:22vw;letter-spacing:.1em;
  transform:rotate(-24deg)}
.traces{display:flex;flex-wrap:wrap;gap:var(--target-gap);margin:var(--space-2) 0 0;padding:0;
  list-style:none}
.traces li{margin:0}

/* --- Tiles (§6.9 "Tiles: buttons") ---------------------------------------- */
.tiles{display:grid;grid-template-columns:1fr;gap:var(--space-4);margin-bottom:var(--space-4)}
@media (min-width:600px){.tiles{grid-template-columns:1fr 1fr}}
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  min-height:var(--target-min);padding:var(--space-3) var(--space-4);text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  color:var(--text);font-family:var(--font-body);cursor:pointer;
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
/* A .tile that is not, and holds no, button or link is a static figure (G13): no pointer, no hover lift. */
.tile:not(button,a):not(:has(button,a)){cursor:default}
.tile:not(button,a):not(:has(button,a)):hover{transform:none;box-shadow:none}
.tile__num{font-family:var(--font-display);font-weight:700;font-size:1.75rem;line-height:1;
  font-variant-numeric:tabular-nums}
.tile__label{font-size:var(--fs-sm);color:var(--text-dim)}

/* --- Rate-sheet request form (§4.2) --------------------------------------- */
.rate-form{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--space-4);max-width:560px}

/* ==========================================================================
   DESIGN SYSTEM v2 (2026-09-27) — the document/report catalog (D1-D8).
   DESIGN-SYSTEM.md is the sources-of-truth map; kit/ is the report-layer twin
   (kit/evntrace-doc.css matches the disclosure pill above in behaviour, not byte-for-byte —
   see the §3.14 comment above and kit/README.md).
   ========================================================================== */

/* --- Document viewer: a report as a white sheet on a stone surface -------- */
/* The surface pads its own top, so the sheet never touches what is above it (owner, 28 Sep, on sample-report.html:
   "SEE HOW THE TOP OF PAGE IS TOUCHING THE TOP BAR DOESNT LOOK GOOD" — the white sheet started 0px under the links bar).
   --space-5 (40px) from 768px, --space-4 (24px) below. Print resets it: the bar is hidden there and a page's first sheet must not move.
   _dev/layout-check.mjs rule L4a measures it (DESIGN-SYSTEM.md, Layout, L1/L4 addendum). */
.doc-surface{background:var(--surface-2);padding-top:var(--space-4)}
@media (min-width:768px){.doc-surface{padding-top:var(--space-5)}}
.doc-sheet{max-width:820px;margin-inline:auto;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:clamp(20px,5vw,64px)}
@media (max-width:599.98px){
  .doc-sheet{border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:var(--space-3)}
}
@media print{.doc-surface{background:#fff;padding-top:0}.doc-sheet{box-shadow:none;border:0;padding:0;max-width:none}}

/* --- Generic round icon button (44x44 pill) -------------------------------
   Same recipe the kit's .theme-btn/.to-top/.print-btn already use; the site's
   own dock buttons (e.g. "jump to a section") share it so kit + site match. */
.icon-btn{flex:none;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  padding:0;border:var(--control-border) solid var(--line-strong);border-radius:var(--radius-pill);
  background:var(--surface);color:var(--text);font-size:1.1rem;cursor:pointer}
.icon-btn:hover{background:var(--surface-2)}
.icon-btn svg{width:20px;height:20px}

/* --- Bottom dock: fixed, safe-area aware; hosts the kit's smart search
   (prepended into it by kit/evntrace-search.js, which looks for #notes-bar)
   plus round tool buttons in .nb-acts (kit/evntrace-doc.js, evntrace-print.js
   look for #notes-bar .nb-acts). Desktop and phone both use it (D4). -------- */
.notes-bar{position:fixed;inset-inline:0;bottom:0;z-index:var(--z-bar);display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:8px var(--target-gap);
  padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -2px 12px rgba(14,14,16,.08)}
.nb-info{display:flex;align-items:center;gap:var(--target-gap);flex:1 1 280px;min-width:0}
.nb-acts{display:flex;align-items:center;gap:var(--target-gap)}
body:has(.notes-bar){padding-bottom:calc(var(--sticky-bar-h) + env(safe-area-inset-bottom))}
@media (max-width:559.98px){.notes-bar .search{flex:1 1 100%;max-width:none}}
@media print{.notes-bar{display:none!important}body:has(.notes-bar){padding-bottom:0}}

/* --- Testimonial card: quote, name, role, firm, optional photo ------------
   Hidden by rule when either the quote or the name is missing, so a slot
   with no real quote yet never shows placeholder text (D4). The page/script
   filling the slot mirrors the two text values into data-quote/data-name;
   the CSS attribute check is used (not :empty) because a whitespace text
   node would defeat :empty silently. */
.testimonial{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--space-4);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:var(--space-3)}
.testimonial:not([data-quote]),.testimonial[data-quote=""],
.testimonial:not([data-name]),.testimonial[data-name=""]{display:none}
.testimonial__quote{margin:0;font-size:1.0625rem;line-height:1.5}
.testimonial__quote::before{content:"\201C"}
.testimonial__quote::after{content:"\201D"}
.testimonial__who{display:flex;align-items:center;gap:var(--space-3)}
.testimonial__photo{width:44px;height:44px;flex:none;border-radius:50%;object-fit:cover;background:var(--surface-2)}
.testimonial__name{font-weight:600;font-size:var(--fs-sm)}
.testimonial__role{font-size:var(--fs-sm);color:var(--text-dim)}

/* --- Feature columns: 3-up icon + short title + bullets -------------------- */
.feature-cols{display:grid;grid-template-columns:1fr;gap:var(--space-4)}
@media (min-width:768px){.feature-cols{grid-template-columns:repeat(3,1fr)}}
.feature-col__icon{width:32px;height:32px;color:var(--text);margin-bottom:var(--space-2)}
.feature-col__title{font-weight:600;font-size:1.0625rem}
.feature-col ul{margin-bottom:0}
.feature-col li{font-size:var(--fs-sm);color:var(--text-dim);margin:0 0 var(--space-1)}

/* --- CTA band --------------------------------------------------------------- */
.cta-band{background:var(--surface-2);border-radius:var(--radius-xl);
  padding:clamp(32px,6vw,64px);text-align:center}
.cta-band .lead{max-width:52ch;margin-inline:auto}
.cta-band .cta-row{margin-top:var(--space-4);justify-content:center}

/* --- Stat tiles: real card contrast (critique: tiles fused into the page) --
   Same recipe as the kit's .clock/.clocks; a coloured top border spends one
   of the four non-coral accents per tile instead of leaving them all grey. */
.stat-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3);margin-top:var(--space-4)}
@media (min-width:768px){.stat-tiles{grid-template-columns:repeat(4,1fr)}}
/* .stat-tiles--pair: exactly two tiles — stays a 2-up row at every width instead of the
   4-column grid above leaving two columns empty. */
.stat-tiles--pair{grid-template-columns:repeat(2,minmax(0,1fr))}
.stat-tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(14px,2.4vw,24px);box-shadow:var(--shadow-sm);border-top:4px solid var(--line-strong)}
.stat-tile[data-accent="gold"]{border-top-color:var(--c-gold)}
.stat-tile[data-accent="steel"]{border-top-color:var(--c-steel)}
.stat-tile[data-accent="coral"]{border-top-color:var(--c-coral)}
.stat-tile[data-accent="verdant"]{border-top-color:var(--c-verdant)}
.stat-tile b{display:block;font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:var(--fs-stat);font-weight:700;line-height:1.05;margin-bottom:6px}
.stat-tile span{display:block;font-family:var(--font-mono);font-size:var(--fs-label);
  text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--text-dim)}
@media print{.stat-tile{break-inside:avoid-page}}

/* --- Reduced motion: no resting or hover transform (§3 global rules) ------- */
@media (prefers-reduced-motion: reduce){
  .btn:hover,.btn--solid:hover,.btn--solid:active,.door:hover,.card--link:hover,
  .sample-row:hover,.tile:hover{transform:none}
  .step,.step.is-leaving,.drawer{animation-name:evt-fade}
}
@keyframes evt-fade{from{opacity:0}to{opacity:1}}

/* --- Print ---------------------------------------------------------------- */
@media print{
  .site-header,.stickybar,.skip-link,.tabs,.viz__controls,.seg,.drawer,.drawer-row,.tooltip{display:none!important}
  [role="tabpanel"][hidden],[data-stage][hidden],.viz__table[hidden]{display:block!important}
  .viz__chart[hidden]{display:block!important}
  .disclosure__body,.faq__ans{display:block!important}
  .disclosure::details-content,.faq details::details-content{display:block;content-visibility:visible}
  /* An opened panel's trigger prints as a plain label, not a pill button (D3; matches kit/evntrace-doc.css). */
  main details[open]>summary{display:block;min-height:0;padding:0;border:0;background:none;margin:0 0 6px}
  main details>summary::before,summary .when-open,summary .when-closed{display:none!important}
  [data-sel] [data-issues]:not(.is-linked){opacity:1}
  button.label-chip{min-height:0}
  .watermark{display:flex!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .samplebar{position:static}
  body{padding-bottom:0}
}

/* --- Print: marketing pages only (track Q6, 2026-09-28) -------------------
   Scoped to body:has(.site-header) — every marketing page's shared header,
   present on neither sample/document page (sample-report.html uses the
   kit's doc header; sample-mediation-brief.html uses .brief-head) — so none
   of this reaches the two samples' already-verified print output (guarded
   separately by _dev/print-check.mjs's own page-by-page --compare). Three
   defects measured 2026-09-26/27 on mediation-settlement-support.html and
   recorded as marketing-page print debt (DESIGN-SYSTEM.md); fixed here in
   the shared layer for every marketing page, not just that one. */
@media print{
  /* 1. .band-ink (the footer, and every dark content band) printed light
     text on assumed-white paper with background graphics off: Chrome's own
     "darken a light colour toward the paper" heuristic only takes
     --c-paper-ink (#F2F1ED) to about rgb(158,157,155) on white — 2.71:1,
     under the 4.5:1 (normal text) / 3:1 (large text) floor (measured). A
     marketing-page ink band is a screen accent, not a brand mark that must
     stay dark to read (contrast .watermark above, which DOES
     keep print-color-adjust:exact because its content only reads on
     its own fill) — so on paper it prints ink-on-white instead: the same
     custom properties :root already carries for the light theme,
     redeclared on .band-ink so every child that reads them (headings,
     a{color:inherit} links, buttons, list markers) gets a readable pair
     with no per-component print rule. */
  body:has(.site-header) .band-ink{
    --bg:var(--c-paper);--surface:var(--c-white);--surface-2:var(--c-stone);
    --text:var(--c-ink);--text-dim:var(--c-muted);--accent-text:var(--c-ink);
    --line:rgba(14,14,16,.08);--line-strong:var(--c-muted);--line-selected:var(--c-ink)
  }
  /* 2. .section's 96px/64px (L1) screen padding prints as a 1.4-1.9in blank
     run between sections (measured); paper has no viewport to fill and no
     scroll-reveal rhythm to protect, so it steps down to --space-4 (24px) —
     a real step on the same scale, not an invented value. Two adjacent
     sections now print 48px (0.5in) apart, under the 1in ceiling with
     headroom. */
  body:has(.site-header) .section{padding-block:var(--space-4)}
  /* 3. A heading could print as the last line on a page with the content it
     introduces stranded on the next one; ask the printer to carry the
     heading over instead. Matches _dev/print-check.mjs's own HEADINGS list
     (h1-h4, caption, summary, .marker — table th[scope=rowgroup]/.fid/
     .vcol-h are report-kit-only, never on a marketing page, so left out
     here) so every element the check treats as a heading is covered. */
  body:has(.site-header) :is(h1,h2,h3,h4,caption,summary,.marker){break-after:avoid-page}
  /* 4. A disclosure's trigger is a pill button on screen (D3); every
     <details> on the page prints open regardless of its [open] attribute
     (the shared ::details-content rule above), so the existing "print as a
     plain label" flattening (scoped to main details[open]>summary, first
     written for the two sample pages, which DO set [open]) never reached a
     marketing-page FAQ, whose <details> has no [open] attribute — it kept
     the on-screen pill (border, fill, pill radius) instead. Scoped to
     marketing pages only: the two samples' own print output, [open]-gated,
     is unchanged. */
  body:has(.site-header) main details>summary{display:block;min-height:0;padding:0;border:0;background:none;margin:0 0 6px}
  /* 5. .ws-pill (inside a .ws-screen product-showcase mockup, e.g. the home
     page's "Choose files"/"Choose a folder" drop-zone labels) is a small
     dark chip with light text, the same --pill-bg/--pill-fg pair as every
     .ws-tile/.ws-trow "selected" state (L10's end-state). Unlike .band-ink
     above, this is not page content to re-theme for paper — it is a
     verbatim detail of the product screenshot the scene exists to show
     (L9), so — like .watermark already does — it keeps its
     authored colours with print-color-adjust:exact rather than following
     the "background graphics off" default; measured 2.52:1 without this. */
  body:has(.site-header) .ws-pill{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* 6. A <form> cannot be filled in on paper; every marketing page's
     contact/rate-request form (.intake, .rate-form) printed as a stack of
     empty, boxy inputs — read as mostly blank space (measured: several
     1.0-1.7in gaps trace to a form's own input boxes, wider than the L1
     section-padding fix above touches, since it is the form's OWN spacing,
     not a section's). A form is a control, same category as the tabs/
     drawers/tooltips already hidden above; any heading or intro paragraph
     before it (kept, not part of the <form>) still explains how to reach
     us, and the phone/email in the footer (already printing) still work
     from paper. This also takes [data-preview] (the "Check what we'll
     send" live JSON preview, a child of .intake) out of print with it: it
     starts [hidden] in the markup but js/intake.js clears that flag
     unconditionally on init (screen-only progressive enhancement), so
     without this it would force-open (via the shared ::details-content
     rule above) to an empty body once its parent form no longer hides it
     either. */
  body:has(.site-header) form{display:none!important}
  /* 7. .btn (a CTA link styled as a button: solid coral or outlined ghost)
     keeps its box shape in print even with background graphics off — the
     gradient fill/shadow drop out, but border, border-radius, min-height
     and padding do not, so what is left is an empty-looking outlined
     rounded box around a couple of words (measured on
     forensics-for-attorneys.html's closing CTA: two ~48px-tall bordered
     boxes wrapped onto their own lines). Flattened to plain underlined
     text — the same "control becomes a label" move already applied to a
     disclosure's pill trigger (#4 above) — so a CTA prints as a readable
     link (its real destination is still whatever the surrounding sentence
     or the footer already says) instead of a half-empty button outline. */
  body:has(.site-header) .btn{display:inline;min-height:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--text);text-decoration:underline;text-underline-offset:3px}
  body:has(.site-header) .btn+.btn{margin-left:var(--space-2)}
  /* 8. break-after:avoid-page on a heading (#3 above) is a should, not a
     must: measured on the footer's "Who we help" column (an <h2> directly
     followed by its <nav> of links, nothing else), it was still sometimes
     the last line on a page. Keeping the small heading+list unit whole
     with break-inside:avoid-page on the column itself (each of the
     footer's three <nav>/<div> columns) is the more reliable form of the
     same request and does not depend on the heading rule succeeding. */
  body:has(.site-header) .site-footer__cols>*{break-inside:avoid-page}
  /* 9. .showcase__panel's inactive states (opacity:0;visibility:hidden, so
     the check's own exemption above correctly does not require them to
     print) are not display:none, so CSS Grid still sizes .showcase__stage's
     row to the TALLEST of the three stacked panels even though only the
     .is-active one is visible — measured: a 429px-tall stage around a
     ~300px card, min-height:0 (above, in the other @media print block)
     alone does not reach this, since it is auto sizing to content, not the
     min-height, that is too big. display:none on the inactive panels
     removes them from grid sizing entirely, so the row shrinks to the one
     panel actually shown — the same "prints only its end state" promise
     L9/L10 already make for a .ws-row scene, applied here to .showcase. */
  body:has(.site-header) .showcase__panel:not(.is-active){display:none}
  /* 10. .site-footer's own 64px (--space-6) padding-block is the same
     screen-generous spacing L1 already stepped down for .section (#2
     above), just on a different class — measured stacking with the
     .section above it (24px, already reduced) to still read as a ~0.9-1in
     blank run right before the footer on several pages. Same fix, same
     reasoning, same token as L1's paper step. */
  body:has(.site-header) .site-footer{padding-block:var(--space-4)}
  /* 11. .cta-band's padding (clamp(32px,6vw,64px), used by the mediation
     page's closing section) is the same over-generous-for-paper pattern as
     #2 and #10 above, just its own clamp instead of a --space-* token —
     measured stacking with the .section above it to read as a ~1in blank
     run before "Know what's settled before the session." */
  body:has(.site-header) .cta-band{padding:var(--space-4)}
  /* 12. .showcase__stage's own clamp(20px,5vw,56px) padding, stacked below
     L3's 40px heading gap, still read as a ~1.1in blank run on top of the
     one resting card (#9 above already removed the reserved min-height;
     this is the box's own padding, a second, separate contributor). */
  body:has(.site-header) .showcase__stage{padding:var(--space-3)}
  /* 13. .card has no break-inside rule (unlike .stat-tile, which already
     has one): measured on forensics-for-attorneys.html (A4) as a services
     card split mid-content across a page boundary — its heading and body
     text on one page, just its closing link and bottom border trailing
     onto the next, reading as a stray rounded-corner fragment at the top
     of the new page (and the source of that page's own blank-gap fail,
     since the fragment leaves an irregular run above it). Kept whole, like
     every other small content box (.stat-tile, .site-footer__cols>*, the
     showcase panel's own card) already is. */
  body:has(.site-header) .card{break-inside:avoid-page}
  /* 14. .showcase__more's own 24px/16px (--space-4/--space-3) margin,
     stacked below the showcase's own reduced padding (#12) and above
     #capabilities details.disclosure's own top margin, still read as a
     measured 1.1in run on A4 with background graphics off (the one
     combination of the five this check runs where it crossed the 1in
     ceiling). Same --space-* step down as every fix above. */
  body:has(.site-header) .showcase__more{margin:var(--space-2) 0 var(--space-2)}
  /* 15. Sample-tag cleanup (2026-09-28): removing the hero card's sample badge
     (<p class="card__meta">) shifted mediation-settlement-support.html's content up just
     enough that #independence's <h2>"Who we work for on a mediation."</h2> moved to A4's page-1/
     page-2 boundary. break-after:avoid-page on the heading (#3 above) did not hold it — measured:
     the break landed INSIDE the first .feature-col instead, between its icon and its own
     <h4>+<ul>, same "should, not a must" gap #8 above already found on the footer columns. Same
     fix, same reasoning: break-inside:avoid-page on the column itself. */
  body:has(.site-header) .feature-col{break-inside:avoid-page}
  /* 16. Services (2026-10-06): a card's .card__action only leads to the contact form, and the form does not
     print (#6). On paper it read as a dead "Ask about this service" line under every service card, and its
     visually hidden suffix (.vh, for screen readers) tripped the DOM check's "cut off" rule three times on
     index.html. Hidden like the form it points at. */
  body:has(.site-header) .card__action{display:none}
  /* 17. A grid of service cards (cards that carry a .card__action) keeps the screen's two columns on paper.
     Printed single file, the home page's four cards ran to nearly three pages and, each kept whole (#13), left
     a page only 37-39% full on Letter or A4 (measured 2026-10-06). No other grid holds an action card. */
  body:has(.site-header) .grid-2:has(>.card>.card__action){grid-template-columns:1fr 1fr}
}
/* --- Print: any page — a tab list is a control, per _dev/print-check.mjs's
   own CHROME contract ([role="tablist"] is checked site-wide). .tabs
   already had this; .showcase__list (index.html) did not. */
@media print{[role="tablist"]{display:none!important}}

/* Scroll reveal (js/site.js §5, owner request 2026-09-15). Only elements JS has marked are hidden. */
.motion [data-reveal]{opacity:0;transform:translateY(16px);
  transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
.motion [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.motion [data-reveal]{opacity:1;transform:none;transition:none}}
@media print{.motion [data-reveal]{opacity:1!important;transform:none!important}}

/* --- Showcase: point at a line, the picture changes (home #capabilities, owner 2026-09-26) --- */

.showcase{display:grid;grid-template-areas:"stage" "list";gap:var(--space-4)}
@media (min-width:1024px){.showcase{grid-template-columns:1.1fr .9fr;grid-template-areas:"stage list";gap:var(--space-6);align-items:center}}
/* Owner 2026-10-01: no coloured square behind the card ("off brand color now and the color square behind just
   doesnt match style"). The card sits on the page's own paper on two sheets (its box-shadow); the stage sizes to
   the tallest card (all panels share one grid cell, so switching lines moves nothing), keeps room right and below
   for the sheets, and lines the card up with the heading. data-tone (js/showcase.js) still names each line; it no
   longer paints anything. */
.showcase__stage{grid-area:stage;display:grid;place-items:center start;padding:0 var(--space-3) var(--space-3) 0}
/* All panels share the stage's one grid cell: the stage sizes to the tallest card. */
.showcase__panel{grid-area:1/1;width:100%;display:grid;place-items:center start;opacity:0;visibility:hidden;
  transition:opacity var(--dur-base) var(--ease-out),visibility 0s linear var(--dur-base)}
.showcase__panel.is-active{opacity:1;visibility:visible;transition:opacity var(--dur-base) var(--ease-out),visibility 0s}
.showcase__card{width:100%;max-width:420px;min-width:0;background:var(--c-white);color:var(--c-ink);
  border-radius:var(--radius-lg);padding:var(--space-4);text-align:left;
  box-shadow:6px 6px 0 -1px var(--c-white),6px 6px 0 0 var(--paper-shade),12px 12px 0 -1px var(--c-white),
    12px 12px 0 0 var(--paper-shade),var(--shadow-lg);
  overflow-wrap:anywhere}
@media (max-width:399.98px){.showcase__card{padding:20px}}
.showcase__kicker{font-family:var(--font-mono);font-weight:500;font-size:var(--fs-label);
  text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--c-muted);margin:0 0 var(--space-2)}
.showcase__title{font-weight:600;font-size:1.125rem;line-height:1.3;margin:0 0 var(--space-3);text-wrap:balance}
.showcase__label{font-family:var(--font-mono);font-weight:500;font-size:var(--fs-label);
  text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--c-muted);margin:0 0 var(--space-1)}
.showcase__rows{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)}
.showcase__row{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2);min-width:0;margin:0}
.showcase__row+.showcase__row{border-top:1px solid var(--line);padding-top:var(--space-2)}
.showcase__glyph{width:16px;height:16px;flex:none;align-self:center;color:var(--c-muted)}
.showcase__rowtext{flex:1 1 12ch;min-width:0;font-size:var(--fs-sm);line-height:1.45}
.showcase__rowtext--q{flex-basis:14ch;color:var(--text);font-weight:500}
.showcase__rowtext--a{color:var(--c-muted);font-weight:400}
.showcase__num{flex:none;font-family:var(--font-display);font-weight:700;font-size:1.75rem;line-height:1;min-width:1ch}
.showcase__bubble{margin:0 0 var(--space-2);padding:10px 14px;background:var(--c-stone);
  border-radius:var(--radius-md);font-size:var(--fs-sm);font-weight:600;line-height:1.45}
.showcase__answer{margin:0 0 var(--space-3);font-size:var(--fs-sm);line-height:1.5}
.showcase__chips{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0;padding:0}
.showcase__chip{display:inline-flex;align-items:center;min-width:0;padding:3px 10px;background:var(--c-paper);
  border:1px solid var(--line);border-radius:var(--radius-pill);font-family:var(--font-mono);
  font-weight:500;font-size:var(--fs-label);text-transform:uppercase;letter-spacing:var(--tracking-label);
  color:var(--c-muted);margin:0}
.showcase__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin:var(--space-4) 0 0;
  font-size:var(--fs-sm);color:var(--c-muted)}
.showcase__foottext{min-width:0}
.showcase__strip{display:inline-flex;flex-wrap:wrap;gap:var(--space-1);min-width:0}
.showcase__tabitem{display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--radius-sm);
  font-family:var(--font-mono);font-weight:500;font-size:var(--fs-label);text-transform:uppercase;
  letter-spacing:var(--tracking-label);color:var(--c-muted);background:var(--c-paper)}
.showcase__tabitem.is-on{color:var(--c-ink);background:var(--c-white);box-shadow:inset 0 0 0 1px var(--line)}
.showcase__list{grid-area:list;display:grid;gap:var(--space-2)}
.showcase__tab{display:flex;align-items:flex-start;gap:var(--space-3);width:100%;min-height:var(--target-min);
  padding:var(--space-3) var(--space-4);border:0;border-radius:var(--radius-lg);background:transparent;
  color:var(--text-dim);font-family:var(--font-body);font-size:1.0625rem;line-height:1.45;text-align:left;
  cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.showcase__tab:hover{color:var(--text)}
.showcase__tab[aria-selected="true"]{background:var(--surface-2);color:var(--text)}
.showcase__icon{width:24px;height:24px;flex:none;margin-top:2px;color:var(--text)}
.showcase__more{margin:var(--space-4) 0 var(--space-3)}

@media (prefers-reduced-motion: reduce){.showcase__stage,.showcase__panel,.showcase__panel.is-active,.showcase__tab{transition:none!important}}
@media print{.showcase__stage,.steps-list--strip{break-inside:avoid}#capabilities h2,h2:has(+.steps-list--strip){break-after:avoid}.showcase__stage{min-height:0}}

/* --- Workspace cards: "Inside the workspace." (home #workspace, owner 2026-09-26) --- */
.ws-row{display:grid;grid-template-columns:1fr;gap:var(--space-4);margin-top:var(--space-4)}
@media (min-width:1024px){.ws-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* L9 proximity (owner 2026-09-28: "on mobile the spacing between the inside the workplace cards is tight"): when an unframed row stacks, cards sit --space-6 apart so each caption (16px below its scene) reads as its own card's. Framed rows group by their frame. */
.ws-row:not(.ws-row--flat){row-gap:var(--space-6)}
.ws-card{display:flex;flex-direction:column;gap:var(--space-2);margin:0}
.ws-card__title{margin:var(--space-2) 0 0;font-size:1.125rem}
.ws-card__line{margin:0;color:var(--text-dim);font-size:var(--fs-sm)}
/* .ws-row--flat (G4, L9; opt-in, the default row above is unchanged): the card is the frame, flat, 4px around
   the scene; the caption sits below it in its own 24px zone on the card's own surface. */
.ws-row--flat .ws-card{gap:0;padding:var(--space-1);border-radius:var(--radius-lg);background:var(--surface)}
.ws-row--flat .ws-screen{border:0;box-shadow:none;border-radius:var(--radius-md)}
.ws-card__cap{padding:var(--space-4)}
.ws-row--flat .ws-card__title{margin:0 0 var(--space-4)}
.ws-screen{position:relative;overflow:hidden;display:flex;flex-direction:column;height:320px;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:12px;line-height:1.4;text-align:left;--bg:var(--c-paper);--surface:var(--c-white);--text:var(--c-ink);--text-dim:var(--c-muted);--line:rgba(14,14,16,.1);--pill-bg:var(--c-ink);--pill-fg:var(--c-paper)}
/* The scene follows the page it sits on, not the OS (G2, L10): light by default, dark only inside .band-ink. */
.band-ink .ws-screen{color-scheme:dark;--bg:var(--c-ink);--surface:var(--c-ink-raised);--text:var(--c-paper-ink);--text-dim:var(--c-fog);--line:rgba(255,255,255,.1);--pill-bg:var(--c-paper-ink);--pill-fg:var(--c-ink)}
.ws-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--surface)}
.ws-logo{display:block;width:16px;height:16px}
.ws-crumb{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-display);font-size:13px}
.ws-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;padding:12px}
.ws-drop{display:grid;gap:8px;justify-items:center;padding:12px;border:1.5px dashed var(--text-dim);border-radius:10px;background:var(--surface)}
.ws-drop__hint{color:var(--text-dim)}
.ws-pills{display:flex;gap:6px}
.ws-pill{padding:4px 10px;border-radius:var(--radius-pill);background:var(--pill-bg);color:var(--pill-fg);font-weight:600;font-size:11px}
.ws-files{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.ws-file{display:flex;justify-content:space-between;gap:8px;margin:0;padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.ws-file__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-mono);font-size:11px}
.ws-file__hash{white-space:nowrap;font-family:var(--font-mono);font-size:10px;color:var(--text-dim)}
.ws-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto}
.ws-status{font-size:11px;color:var(--text-dim)}
.ws-cta{display:inline-flex;align-items:center;white-space:nowrap;padding:6px 12px;border-radius:var(--radius-pill);background:var(--accent-fill);color:var(--on-accent);font-weight:600;font-size:11px;transition:transform var(--dur-fast) var(--ease-out)}
.ws-cta--sm{padding:5px 10px}
.ws-search{display:flex;align-items:center;gap:6px}
.ws-search__box{flex:1;min-width:0;min-height:28px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:12px}
.ws-screen.is-playing .ws-type::after{content:"";display:inline-block;width:1px;height:1em;margin-left:1px;vertical-align:-2px;background:var(--text);animation:evt-caret 1s steps(1) infinite}
@keyframes evt-caret{50%{opacity:0}}
.ws-count{margin:0;font-size:11px;color:var(--text-dim)}
.ws-hits{display:grid;gap:6px}
.ws-hit{display:grid;gap:2px;padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.ws-hit__src{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim)}
.ws-hit__text{font-size:12px}
.ws-hit mark{background:color-mix(in srgb,var(--c-gold) 45%,transparent);color:inherit;border-radius:3px;padding:0 2px}
.ws-hit__bates{font-family:var(--font-mono);font-size:10px;color:var(--text-dim)}
/* Scene-scale evidence label (G5): the catalog .label-chip at the scene's type scale. */
.ws-screen .label-chip{gap:4px;padding:1px 6px;font-size:10px}
.ws-screen .label-chip__glyph{width:11px;height:11px}
.ws-body--doc{padding:0;overflow:hidden}
.ws-doc{display:grid;gap:8px;padding:14px 16px;transform:translateY(-104px)}
.ws-doc__mark{display:block;width:84px;height:12px}
.ws-doc__title{margin:0;font-weight:700;font-size:14px}
.ws-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ws-tile{display:grid;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim)}
.ws-tile b{font-size:15px;letter-spacing:0;color:var(--text)}
.ws-sec{margin:4px 0 0;padding-top:6px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-weight:600;font-size:12px}
.ws-sec span{font-weight:400;font-size:11px;color:var(--text-dim)}
.ws-trow{display:grid;grid-template-columns:1fr auto 1.2fr;gap:8px;padding:4px 0;border-bottom:1px solid var(--line);font-size:11px}
.ws-trow span:nth-child(2){font-family:var(--font-mono);font-size:10px}
/* Issue row (G6): id, question, optional label chip. */
.ws-trow--issue{grid-template-columns:auto 1fr auto;align-items:center;padding:5px 6px;border-radius:6px}
.ws-trow--issue>span:first-child{font-family:var(--font-mono);font-size:10px;color:var(--text-dim)}
.ws-trow--issue>span:nth-child(2){font-family:var(--font-body);font-size:11px}
.ws-pdf{justify-self:start;margin:6px 0 0;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-weight:600;font-size:11px;transition:transform var(--dur-fast) var(--ease-out)}
.ws-cta.is-pressed,.ws-pdf.is-pressed{transform:scale(.94)}
/* A scripted click leaves a state (G3, L10): js/workspace.js adds .is-selected at data-press and clears it when
   the loop resets or the scene stops. No press-scale on these three; the home row's press targets get no look. */
.ws-tile.is-selected{background:var(--pill-bg);border-color:var(--pill-bg);color:var(--pill-fg)}
.ws-tile.is-selected b{color:var(--pill-fg)}
.ws-trow.is-selected,.ws-hit.is-selected{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--text)}
/* The pointer (G15): an ink arrow with a crisp 1px --bg outline, so it reads on any fill, an ink selected tile included.
   The outline filter sits on the element and the masked arrow on ::before: a filter runs before the element's own
   mask, so a halo on the masked element itself was clipped away. data-out (js/workspace.js) adds .is-out: the
   pointer leaves once the click has changed the state (L10). */
.ws-cursor{position:absolute;z-index:2;left:var(--x,86%);top:var(--y,92%);width:14px;height:20px;pointer-events:none;opacity:0;filter:drop-shadow(1px 0 0 var(--bg)) drop-shadow(-1px 0 0 var(--bg)) drop-shadow(0 1px 0 var(--bg)) drop-shadow(0 -1px 0 var(--bg));transition:left 700ms var(--ease-out),top 700ms var(--ease-out),opacity var(--dur-fast) linear}
.ws-cursor::before{content:"";position:absolute;inset:0;background:var(--text);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 20'%3E%3Cpath d='M1 1v15l4-4 3 7 2.5-1-3-7h5.5z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 20'%3E%3Cpath d='M1 1v15l4-4 3 7 2.5-1-3-7h5.5z'/%3E%3C/svg%3E") center/contain no-repeat}
.ws-screen.is-playing .ws-cursor{opacity:1}
.ws-screen.is-playing .ws-cursor.is-out{opacity:0}
.ws-screen [data-at]{transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.ws-screen.is-playing [data-at]:not(.is-on):not(.ws-doc){opacity:0;transform:translateY(4px)}
.ws-screen .ws-doc{transition:transform 900ms var(--ease-out)}
.ws-screen.is-playing .ws-doc:not(.is-on){transform:none}
@media (prefers-reduced-motion: reduce){.ws-cursor{display:none}.ws-screen [data-at],.ws-screen .ws-doc,.ws-cta,.ws-pdf{transition:none}}
@media print{.ws-cursor{display:none}.ws-screen [data-at]:not(.ws-doc){opacity:1!important;transform:none!important}.ws-card{break-inside:avoid}.ws-row--flat .ws-screen{height:auto}}

/* --- Paper effects (owner, 2026-10-01: picked from the "Evntrace Paper Effects" demo) ---------
   Seven touches that make the site feel like paper. The CSS is here; js/paper.js adds the little
   behaviour four of them need (draw on scroll, the stamp's date, folder tabs, folding a form away).
   Every one rests in its finished state without JS, under reduced motion and in print.
   Demoed in _dev/components.html "Paper effects", on paper and on .band-ink. */

/* Dog-eared corner: .dogear on a .card or .sample-row. The corner is cut away (clip-path) and its
   folded-back flap drawn on ::after; pointing at the card or focusing it turns the corner further.
   clip-path also clips the card's own shadow and an outside focus ring, so the ring is drawn inset. */
@property --dogear{syntax:'<length>';inherits:true;initial-value:22px}
.dogear{--dogear:22px;position:relative;
  clip-path:polygon(0 0,calc(100% - var(--dogear)) 0,100% var(--dogear),100% 100%,0 100%);
  transition:--dogear var(--dur-base) var(--ease-out),transform var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out)}
.dogear::after{content:"";position:absolute;top:0;right:0;width:var(--dogear);height:var(--dogear);pointer-events:none;
  background:linear-gradient(225deg,transparent 50%,var(--surface-2) 50%,var(--bg) 92%);
  filter:drop-shadow(-2px 3px 3px var(--paper-shade))}
.dogear:hover,.dogear:focus-visible{--dogear:44px}
.dogear:focus-visible{outline-offset:calc(var(--ring-width) * -2)}

/* Paper stack: wrap a .card or .sample-row in .paper-stack and two more sheets sit behind it; they
   fan out a little when the reader points at it or tabs into it. */
.paper-stack{position:relative;isolation:isolate;display:block}
.paper-stack::before,.paper-stack::after{content:"";position:absolute;inset:0 var(--space-1);z-index:-1;pointer-events:none;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  transition:transform var(--dur-base) var(--ease-out)}
.paper-stack::before{transform:rotate(-.4deg) translate(-2px,5px)}
.paper-stack::after{transform:rotate(.3deg) translate(2px,9px)}
.paper-stack:hover::before,.paper-stack:focus-within::before{transform:rotate(-1.4deg) translate(-10px,8px)}
.paper-stack:hover::after,.paper-stack:focus-within::after{transform:rotate(1.1deg) translate(10px,12px)}
/* A tilt's reach grows with the width (1.6deg stuck ~15px out of each end of an 865px sample row; owner: "to close
   together"), so the sheets mostly step down and tilt a little, inset 4px a side so they stay inside the row's width
   (layout gate L8). Stacks sit 40px apart and 40px above a heading. */
.paper-stack+.paper-stack,.paper-stack+h3{margin-top:var(--space-5)}

/* Highlighter swipe: .hl--swipe on a .hl draws the coral bar left to right. .hl--wash turns the
   mark into a soft highlighter wash behind the words instead of a bar under them (ink text on a
   coral tint; coral is never text). A swipe draws on first render; js/paper.js holds back any that
   start below the fold (.is-waiting) and draws each as it scrolls into view. --swipe-delay staggers. */
.hl--wash{background:linear-gradient(transparent 10%,var(--wash) 10%,var(--wash) 94%,transparent 94%);
  border-radius:.2em;padding-inline:.1em}
.hl--swipe{background-repeat:no-repeat;background-position:0 0;
  animation:paper-swipe var(--dur-reveal) var(--ease-out) var(--swipe-delay,150ms) both}
.hl--swipe.is-waiting{animation:none;background-size:0 100%}
@keyframes paper-swipe{from{background-size:0 100%}to{background-size:100% 100%}}

/* "Received" stamp: a dated ink stamp on a confirmation. It thumps down the first time it is shown
   (un-hidden), so a thank-you panel needs no extra JS; js/paper.js writes today's date into an empty
   .stamp__date. Steel, not coral, because the stamp is text. The speckle is a noise mask. */
.stamp{display:inline-grid;justify-items:center;gap:2px;padding:var(--space-2) var(--space-3) var(--space-1);
  border:3px solid var(--stamp-ink);border-radius:var(--radius-sm);color:var(--stamp-ink);
  box-shadow:inset 0 0 0 2px var(--surface),inset 0 0 0 4px var(--stamp-ink);transform:rotate(-9deg);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3 2.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E") 0 0/140px 140px;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3 2.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E") 0 0/140px 140px;
  animation:paper-stamp 450ms cubic-bezier(.3,1.35,.5,1) 200ms both}
.stamp__word{font-family:var(--font-display);font-weight:700;font-size:1.75rem;line-height:1;
  letter-spacing:.06em;text-transform:uppercase}
.stamp__date{font-family:var(--font-mono);font-weight:500;font-size:var(--fs-label);letter-spacing:var(--tracking-label)}
.done>.stamp{margin-bottom:var(--space-4)}   /* the contact form's confirmation (js/intake.js) */
@keyframes paper-stamp{0%{opacity:0;transform:scale(1.6) rotate(-14deg)}   /* 1.6, not more: a bigger start pushed past a 1024px page edge mid-thump */
  55%{opacity:1;transform:scale(.95) rotate(-9deg)}100%{opacity:1;transform:rotate(-9deg)}}

/* Folder tabs: .tabs--folder on a .tabs list makes each tab a manila folder tab, and .folder-panel
   makes its panels the folder. js/paper.js switches them (click, arrow keys, Home/End) and adds
   .is-pulled, so the folder you pick is pulled up and laid on top. Manila is light in both themes,
   so a panel keeps ink text, and its dim text is ink too (--c-muted fails 4.5:1 on manila). */
.tabs--folder{gap:var(--space-1);margin-bottom:0;padding-inline:var(--space-3);border-bottom:0}
.tabs--folder [role="tab"]{padding:0 var(--space-4);border-radius:var(--radius-md) var(--radius-md) 0 0;
  background:var(--manila-back);color:var(--c-ink);font-family:var(--font-mono);font-size:var(--fs-label);
  font-weight:500;letter-spacing:var(--tracking-label);text-transform:uppercase;box-shadow:none}
.tabs--folder [role="tab"][aria-selected="true"]{background:var(--manila);font-weight:600;box-shadow:none}
.folder-panel{--text:var(--c-ink);--text-dim:var(--c-ink-2);--line:var(--c-fog);--line-strong:var(--c-muted);
  --focus-ring:var(--c-ink);color-scheme:light;padding:var(--space-4);border-radius:var(--radius-lg);
  background:var(--manila);color:var(--text);box-shadow:var(--shadow-md)}
.folder-panel.is-pulled{animation:paper-pull var(--dur-reveal) var(--ease-out)}
.folder-panel+:not(.folder-panel){margin-top:var(--space-4)}
@keyframes paper-pull{0%{transform:translateY(var(--space-4)) scale(.985)}
  45%{transform:translateY(calc(var(--space-3) * -1)) rotate(-.6deg);box-shadow:var(--shadow-lg)}
  100%{transform:none}}

/* Fold-and-send: EvntracePaper.foldAway(el) (js/paper.js) lays three slices of a copy of el over it,
   folds them into thirds like a letter, slides the letter away and hides el; show the confirmation
   when its promise resolves. These rules style that temporary overlay; no page uses them directly.
   No filter or overflow on .paper-fold or a panel: either one flattens the 3D fold. */
.paper-fold{position:absolute;z-index:var(--z-sheet);display:grid;align-content:start;perspective:1100px;
  transform-style:preserve-3d;pointer-events:none;
  transition:transform 600ms cubic-bezier(.55,0,.75,.3),opacity 500ms ease-in 100ms}
.paper-fold__panel{position:relative;transform-style:preserve-3d;transition:transform 500ms cubic-bezier(.45,.05,.35,1)}
/* A face and a back carry a hairline and a small shadow: paper-coloured backs on a paper page were all
   but invisible mid-fold (measured on the catalog demo, 2026-10-01). */
.paper-fold__face,.paper-fold__back{border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.paper-fold__face{height:100%;overflow:hidden;background:var(--surface);backface-visibility:hidden}
.paper-fold__back{position:absolute;inset:0;background:linear-gradient(var(--surface-2),var(--surface));
  transform:rotateX(180deg);backface-visibility:hidden}
.paper-fold.is-folding .paper-fold__panel:last-child{transform-origin:50% 0;transform:translateZ(1px) rotateX(180deg)}
.paper-fold.is-folding .paper-fold__panel:first-child{transform-origin:50% 100%;
  transform:translateZ(2px) rotateX(-180deg);transition-delay:450ms}
.paper-fold.is-sent{transform:translate(120%,calc(var(--space-4) * -1)) rotate(10deg) scale(.85);opacity:0}

/* Paper grain: .paper-grain on <body> (the page background), a section or a card. A faint noise texture painted INTO
   the element's own background (a second background layer, blended by background-blend-mode), never a separate
   overlay: measured 2026-10-01, a fixed, blended ::before overlay made real Chrome and Brave 154 windows drop the old
   page's snapshot in the page turn (blank paper where the old page should be; headless Chrome hid it). */
.paper-grain{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 .13'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-blend-mode:var(--grain-blend)}

@media (prefers-reduced-motion: reduce){
  .dogear,.paper-stack::before,.paper-stack::after{transition:none}
  .hl--swipe,.stamp,.folder-panel.is-pulled{animation:none}
  .hl--swipe.is-waiting{background-size:100% 100%}
}
@media print{
  .dogear{clip-path:none}
  .dogear::after,.paper-stack::before,.paper-stack::after,.paper-fold{display:none}
  .paper-grain{background-image:none}
  .hl--swipe,.stamp,.folder-panel{animation:none!important}
  .hl--swipe{background-size:100% 100%!important}
}

/* --- Page turn: the corner pull between pages (owner, 2026-10-01: "Book page", "1.1 speed") -------------------
   Cross-document View Transitions. Every page opts in here; js/page-turn.js (render-blocking in <head>) names the
   turn "book" and adds .pt-flap, the empty layer the folded corner is painted on (its snapshot is transparent, so
   what shows is ::view-transition-new(pt-flap)'s own background). The old page stays whole underneath and the new
   page is revealed on top, growing from the bottom-right corner behind the flap: a 45deg crease x+y=c with c
   running W+H -> 0; the flap is the part x+y>=c mirrored across the crease. Back/Forward get no turn
   (js/page-turn.js says why). Browsers without cross-document view transitions just load the next page; reduced
   motion never opts in.
   Measured in real Chrome and Brave 154 windows (headless Chrome hid both): a fixed, blended overlay on the old
   page (the first paper grain) made the old snapshot vanish, so the new page showed before the turn; and nothing
   here may depend on z-index or backface-visibility on ::view-transition-old/new(root). */
@media (prefers-reduced-motion: no-preference){@view-transition{navigation:auto}}
.pt-flap{position:fixed;inset:0;z-index:var(--z-sheet);pointer-events:none;view-transition-name:pt-flap}
@media print{.pt-flap{display:none}}
::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal}
html:active-view-transition-type(book)::view-transition-old(root){animation:none}
html:active-view-transition-type(book)::view-transition-new(root){
  animation:pt-curl-reveal var(--pt-pull-dur) ease-in-out both,pt-shade-off var(--pt-pull-dur) ease-in-out both}
html:active-view-transition-type(book)::view-transition-group(pt-flap){filter:drop-shadow(var(--shadow-lg))}
html:active-view-transition-type(book)::view-transition-new(pt-flap){mix-blend-mode:normal;transform-origin:0 0;
  /* the crease sits at 33.3% of this 3(W+H) square at every moment: background-position moves with c */
  background:linear-gradient(135deg,var(--pt-crease) 33.3%,var(--c-stone) 34.2%,var(--c-white) 36%,
    var(--c-paper) 42%,var(--c-stone) 50%) no-repeat;
  background-size:calc(var(--pt-x) * 3) calc(var(--pt-x) * 3);
  animation:pt-curl-flap var(--pt-pull-dur) ease-in-out both}
@keyframes pt-curl-reveal{   /* the new page shows where the page has turned away: x+y>=c */
  from{clip-path:polygon(var(--pt-x) 0,var(--pt-x) 0,var(--pt-x) var(--pt-x),0 var(--pt-x),0 var(--pt-x))}
  to{clip-path:polygon(0 0,var(--pt-x) 0,var(--pt-x) var(--pt-x),0 var(--pt-x),0 0)}}
@keyframes pt-curl-flap{     /* mirror: (x,y) -> (c-y, c-x) */
  from{transform:translate(var(--pt-x),var(--pt-x)) matrix(0,-1,-1,0,0,0);
    clip-path:polygon(var(--pt-x) 0,var(--pt-x) 0,var(--pt-x) var(--pt-x),0 var(--pt-x),0 var(--pt-x));
    background-position:0 calc(var(--pt-x) * -1)}
  to{transform:translate(0,0) matrix(0,-1,-1,0,0,0);
    clip-path:polygon(0 0,var(--pt-x) 0,var(--pt-x) var(--pt-x),0 var(--pt-x),0 0);
    background-position:calc(var(--pt-x) * -1) calc(var(--pt-x) * -1)}}
@keyframes pt-shade-off{from{filter:brightness(.8)}to{filter:brightness(1)}}