/* Dokimos landing — brand book v1.2 (palette, type, 2px geometry). */

/* Fonts: self-hosted WOFF2 (Latin, Latin Extended, Greek), SIL Open Font License; see assets/fonts/OFL-*.txt. */
/* Jost's own line box is 1.445em, taller than our 1.15-1.4 line heights, so each wrapped line's selection
   highlight painted over the line above. The overrides trim it to 1.15em (deepest descender g = .23em) and
   keep the baseline where it was. Plex text: keep line-height >= 1.3 wherever it can wrap. */
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/ibm-plex-mono-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/ibm-plex-mono-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/ibm-plex-sans-italic-400-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/ibm-plex-sans-italic-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/ibm-plex-sans-italic-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/ibm-plex-sans-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/ibm-plex-sans-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/ibm-plex-sans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400 500; font-display: swap; ascent-override: 92%; descent-override: 23%; line-gap-override: 0%; src: url(/assets/fonts/jost-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400 500; font-display: swap; ascent-override: 92%; descent-override: 23%; line-gap-override: 0%; src: url(/assets/fonts/jost-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --basalt: #1C2126;
  --basalt-2: #262C32;
  --silver: #B9BFC4;
  --gold: #C9A24A;      /* accent rule only, never text on light */
  --patina: #2D6C62;
  --patina-hover: #245950;
  --patina-pale: #E3EEEB;
  --limestone: #F1F3F1;
  --paper: #FFFFFF;
  --ink: #1C2126;
  --muted: #55606A;
  --hair: #D8DDDA;
  --go: #2E7D5B;
  --cond: #B7791F;
  --nogo: #B3261E;
  --radius: 2px;
  --wrap: 1180px;
  --display: "Jost", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --sans: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", Consolas, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--limestone);
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--patina); }
code, pre { font-family: var(--mono); font-size: .9em; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: -.01em; line-height: 1.15; margin: 0; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); max-width: 24ch; }
h3 { font-size: 1.2rem; }
/* Selection: brand colours, opaque so overlapping line boxes on tight headings read as one block */
::selection { background: var(--patina); color: var(--paper); text-shadow: none; }
.top ::selection, .hero ::selection, .contact ::selection, .foot ::selection,
.rg-n.on ::selection, .rg-n.on::selection, .pipeline [aria-pressed="true"] ::selection, .pipeline [aria-pressed="true"]::selection,
.page-boil .cert b::selection, .page-boil .chapter-k::selection { background: var(--gold); color: var(--basalt); }
:focus-visible { outline: 3px solid var(--patina); outline-offset: 2px; }
/* Jost has no Greek glyphs; Greek text uses IBM Plex Sans, which does. */
[lang="el"] { font-family: var(--sans); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 10; background: var(--paper); padding: 8px 12px; }

.eyebrow {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font: 500 .78rem/1.3 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--patina);
  margin: 0 0 14px;
}

/* Availability tags */
.tag {
  display: inline-block; vertical-align: middle;
  font: 500 .68rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 7px; border-radius: var(--radius); white-space: nowrap;
}
.tag-ok { background: var(--patina-pale); color: var(--patina); }
.tag-dev { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px #A9B1B6; }

/* Header */
.top { background: var(--basalt); color: var(--limestone); border-top: 4px solid var(--patina); }
.top-row { display: flex; align-items: center; justify-content: space-between; height: 100px; gap: 24px; }
.lockup { display: flex; align-items: center; gap: 22px; color: var(--silver); text-decoration: none; flex-shrink: 0; }
.lockup-mark { width: 72px; height: 72px; }
.lockup-word { width: 230px; height: 35px; }
.top nav { display: flex; align-items: center; gap: 26px; }
.top nav a { color: var(--silver); text-decoration: none; font-size: .95rem; }
.top nav a:hover { color: var(--paper); }

/* Hero */
.hero { background: var(--basalt); color: var(--limestone); border-bottom: 3px solid var(--gold); padding: 64px 0 72px; }
.hero .eyebrow { color: var(--silver); }
.hero h1 { font-size: clamp(2.3rem, 4.8vw, 3.5rem); max-width: 16ch; }
.lede { font-size: 1.12rem; color: #D5DAD7; max-width: 52ch; margin: 22px 0 30px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.mantra { list-style: none; margin: 36px 0 0; padding: 18px 0 0; border-top: 1px solid #3A4249; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; color: var(--silver); font-size: .95rem; }
.mantra li::before { content: ""; display: inline-block; width: 10px; height: 2px; background: var(--gold); vertical-align: middle; margin-right: 10px; }

/* Hero layout: headline and buttons on top, then a band where the role list drives the product view.
   Without the script the Management view shows and the role list stays hidden. */
.hero-top { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: end; }
.hero-top .lede { margin: 0 0 28px; }
.hero-band { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; margin-top: 56px; padding-top: 40px; border-top: 1px solid #3A4249; align-items: start; }
.hero-side { display: flex; flex-direction: column; gap: 36px; }
.hero-side .mantra { grid-template-columns: 1fr; margin: 0; }
.role-list { display: flex; flex-direction: column; gap: 6px; }
.role-label { margin: 0 0 6px; font: 500 .72rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--silver); }
.role-list button {
  display: flex; justify-content: space-between; align-items: center; text-align: left; cursor: pointer;
  font: 500 .98rem/1.3 var(--sans); padding: 10px 14px; border-radius: var(--radius);
  background: transparent; color: var(--silver); border: 1px solid transparent; transition: color .2s, background .2s, border-color .2s;
}
.role-list button::after { content: "\2192"; opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; }
.role-list button:hover { color: var(--paper); }
.role-list button[aria-pressed="true"] { color: var(--paper); background: var(--basalt-2); border-color: #3A4249; box-shadow: inset 2px 0 0 var(--gold); }
.role-list button[aria-pressed="true"]::after { opacity: 1; transform: none; }
.role-list button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.role-panel { animation: role-in .3s ease; }
.role-note { margin: 0 0 22px; padding-left: 16px; border-left: 3px solid var(--gold); }
.role-tag { margin: 0 0 8px; }
.role-why { margin: 0 0 10px; font: 500 clamp(1.35rem, 2.4vw, 1.75rem)/1.25 var(--display); color: var(--paper); max-width: 34ch; text-wrap: balance; }
.role-note a { color: var(--silver); font-size: .95rem; }
.role-tag .tag-dev { color: var(--silver); box-shadow: inset 0 0 0 1px #4A535A; letter-spacing: .04em; }
.role-note a:hover { color: var(--paper); }
@keyframes role-in { from { opacity: .3; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .role-panel { animation: none; } .role-list button, .role-list button::after { transition: none; } }

.btn {
  display: inline-block; padding: 11px 22px; border-radius: var(--radius);
  font: 500 1rem/1.3 var(--sans); text-decoration: none; border: 1px solid transparent;
}
.btn-primary { background: var(--patina); color: var(--paper); }
.btn-primary:hover { background: var(--patina-hover); }
.btn-ghost { border-color: var(--silver); color: var(--limestone); }
.btn-ghost:hover { border-color: var(--paper); color: var(--paper); }

/* Product UI fragments (demo data) */
.ui { background: var(--paper); color: var(--ink); border: 1px solid var(--hair); border-radius: var(--radius); font-size: .92rem; overflow: hidden; }
.ui-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 16px; background: var(--basalt-2); color: var(--limestone); font: 500 .86rem/1.3 var(--sans); }
.ui-bar code { color: var(--silver); margin-right: 6px; }
.demo { font: 500 .66rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--silver); border: 1px solid #4A535A; padding: 4px 6px; border-radius: var(--radius); white-space: nowrap; }
.ui-hero { box-shadow: 0 0 0 1px #000, 0 -2px 0 var(--gold), 0 24px 60px rgba(0,0,0,.45); border: 0; }
.ui-metrics { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--hair); }
.ui-metrics div { padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.ui-metrics div + div { border-left: 1px solid var(--hair); }
.ui-metrics b { font: 500 1.7rem/1.1 var(--display); }
.ui-metrics span { font-size: .78rem; color: var(--muted); line-height: 1.3; }
.t-warn { color: var(--cond); }
.t-bad { color: var(--nogo); }
.ui-table { width: 100%; border-collapse: collapse; }
.ui-table th { text-align: left; font: 500 .7rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--patina); padding: 10px 16px; border-bottom: 1.5px solid var(--patina); }
.ui-table td { padding: 10px 16px; border-bottom: 1px solid var(--hair); vertical-align: top; }
.ui-table tr:last-child td { border-bottom: 0; }
.role-panel[data-role="mgt"] .ui-table td:nth-child(2), .role-panel[data-role="mgt"] .ui-table td:nth-child(3) { font-family: var(--mono); }
.ui-foot { margin: 0; padding: 10px 16px; background: var(--limestone); border-top: 1px solid var(--hair); font-size: .8rem; color: var(--muted); }
.ui-dl { display: grid; grid-template-columns: 9.5em 1fr; margin: 0; }
.ui-dl dt, .ui-dl dd { padding: 10px 16px; border-bottom: 1px solid var(--hair); margin: 0; }
.ui-dl dt { font: 500 .72rem/1.5 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); background: #F7F8F7; }
.ui-dl dt:last-of-type, .ui-dl dd:last-of-type { border-bottom: 0; }
.ui-dl-mono dd { font-family: var(--mono); font-size: .86rem; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span { border: 1px solid var(--hair); padding: 2px 8px; border-radius: var(--radius); font-size: .82rem; white-space: nowrap; }
.ui-wide { margin-top: 40px; }
.table-scroll { overflow-x: auto; }
.cal { min-width: 760px; }

/* Status chips */
.st { display: inline-block; font: 500 .74rem/1 var(--sans); padding: 5px 8px; border-radius: var(--radius); white-space: nowrap; }
.st-ok { background: #E2F0E8; color: #1F5C42; }
.st-warn { background: #F7EBD6; color: #7A4F12; }
.st-bad { background: #F6DEDC; color: #8E1E17; }
.st-none { background: var(--limestone); color: var(--muted); }
.st-outline { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }

/* Screenshot buttons */
.shot { display: block; width: 100%; padding: 0; border: 1px solid var(--hair); background: var(--paper); cursor: zoom-in; border-radius: var(--radius); overflow: hidden; }
.shot img { border-radius: var(--radius); }

/* Sections */
.section { padding: 96px 0; }
.section-alt { background: var(--paper); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.section-lede { color: var(--muted); max-width: 64ch; margin: 18px 0 0; }
.aside { margin: 36px 0 0; max-width: 78ch; color: var(--ink); }
.split { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; }
.split-wide { grid-template-columns: 1fr 1fr; align-items: center; }

/* Problem: dashed red underline on "fragmented", a keyword per pain, big red counters */
.problem-head { position: sticky; top: 32px; padding-left: 22px; border-left: 3px solid var(--nogo); }
.problem h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); max-width: 14ch; }
.frag { text-decoration: underline dashed var(--nogo); text-decoration-thickness: 3px; text-underline-offset: .14em; text-decoration-skip-ink: none; }
.problem .section-lede { color: var(--ink); font-size: 1.12rem; max-width: 34ch; }
.problems { list-style: none; margin: 0; padding: 0; counter-reset: p; border-top: 2px solid var(--basalt); }
.problems li { counter-increment: p; display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 8px; padding: 20px 0 20px; border-bottom: 1px solid var(--hair); color: var(--muted); }
.problems li::before { content: counter(p, decimal-leading-zero); grid-row: 1 / span 2; font: 500 1.9rem/1 var(--mono); color: var(--nogo); letter-spacing: -.02em; }
.problems b { display: block; font: 500 1.3rem/1.25 var(--display); color: var(--ink); margin-bottom: 4px; }

.chain { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; }
.chain li { position: relative; padding: 18px 18px 0 0; border-top: 2px solid var(--basalt); display: flex; flex-direction: column; gap: 8px; }
.chain li::before { content: ""; position: absolute; top: -6px; left: 0; width: 10px; height: 10px; background: var(--paper); border: 2px solid var(--patina); border-radius: 50%; }
.chain li:last-child { border-top-color: var(--gold); }
.chain b { font: 500 1.05rem/1.2 var(--display); }
.chain span { font-size: .88rem; color: var(--muted); line-height: 1.5; }

/* PDCA cycle: sunburst on wide screens; the .chain list replaces it on phones */
.cycle { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px; align-items: center; margin-top: 32px; }
.sunburst { display: block; width: 100%; height: auto; overflow: visible; }
.sunburst text { font-family: var(--sans); }
.sb-ph, .sb-st, .sb-lbl, .sb-ln, .sb-dot { cursor: pointer; transition: opacity .2s; }
.sb-ph:focus, .sb-lbl:focus { outline: none; }
.sb-ph:focus-visible { stroke: var(--ink); stroke-width: 2px; }
.sb-lbl:focus-visible .sb-name { text-decoration: underline; text-underline-offset: 4px; }
.sb-ph.sb-p { fill: var(--patina); }
.sb-ph.sb-d { fill: #5E9A8F; }
.sb-ph.sb-c { fill: var(--silver); }
.sb-ph.sb-a { fill: var(--gold); }
.sb-st.sb-p { fill: #BFD6D1; }
.sb-st.sb-d { fill: #D3E5E1; }
.sb-st.sb-c { fill: #DDE1E4; }
.sb-st.sb-a { fill: #EADCB5; }
.sunburst .sb-letter { font: 500 40px/1 var(--display); pointer-events: none; fill: var(--paper); }
.sunburst .sb-letter.sb-c, .sunburst .sb-letter.sb-a { fill: var(--basalt); }
.sunburst .sb-name { font: 500 20px/1 var(--display); fill: var(--ink); transition: fill .2s; }
.sunburst .sb-tag { font: 500 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; fill: var(--muted); }
/* Leader lines: a radial stub and a flat run in the phase colour. Selecting a step redraws its line from the ring out. */
.sb-ln { fill: none; stroke-width: 1.25px; stroke-dasharray: 1; stroke-dashoffset: 0; }
.sb-ln.sb-p { stroke: var(--patina); }
.sb-dot.sb-p { fill: var(--patina); }
.sb-ln.sb-d { stroke: #5E9A8F; }
.sb-dot.sb-d { fill: #5E9A8F; }
.sb-ln.sb-c { stroke: #8E989F; }
.sb-dot.sb-c { fill: #8E989F; }
.sb-ln.sb-a { stroke: var(--gold); }
.sb-dot.sb-a { fill: var(--gold); }
.sb-dot { transition: r .25s, opacity .2s; }
.sb-ln.on { stroke-width: 2.5px; animation: sb-draw .6s ease-out both; }
.sb-dot.on { r: 5px; }
.sb-lbl.on .sb-name { fill: var(--patina); }
@keyframes sb-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.sb-mark { color: var(--basalt); pointer-events: none; }
.sb-word { font-size: 15px; font-weight: 500; letter-spacing: .22em; fill: var(--ink); pointer-events: none; }
.cycle.is-dim .sb-ph:not(.on), .cycle.is-dim .sb-st:not(.on), .cycle.is-dim .sb-lbl:not(.on), .cycle.is-dim .sb-ln:not(.on), .cycle.is-dim .sb-dot:not(.on) { opacity: .22; }
.cycle-pan { background: var(--limestone); border: 1px solid var(--hair); border-left: 3px solid var(--hair); border-radius: var(--radius); padding: 22px 24px; min-height: 190px; margin-top: 96px; }
.cycle-pan[data-phase="p"] { border-left-color: var(--patina); }
.cycle-pan[data-phase="d"] { border-left-color: #5E9A8F; }
.cycle-pan[data-phase="c"] { border-left-color: var(--silver); }
.cycle-pan[data-phase="a"] { border-left-color: var(--gold); }
.cp h3 { font-size: 1.15rem; margin: 0 0 8px; }
.cp p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.55; }
.cp .cp-k { font: 500 .72rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.cp .cp-p, .cp .cp-d { color: var(--patina); }
.cp .cp-c, .cp .cp-a { color: var(--ink); }
.chain { display: none; }
.chain .ph { font: 500 .7rem/1.3 var(--sans); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--patina); }
.chain .ph-c, .chain .ph-a { color: var(--muted); }
.lane-h { margin: 56px 0 16px; font: 500 .78rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 14px; }
.lane-h::after { content: ""; flex: 1; border-top: 1px solid var(--hair); }
.lane { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.ln { background: var(--paper); border: 1px solid var(--hair); border-top: 3px solid var(--patina); border-radius: var(--radius); padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; transition: opacity .2s; }
.ln-d { border-top-color: #5E9A8F; }
.ln-c { border-top-color: var(--silver); }
.ln-a { border-top-color: var(--gold); }
.ln i { font: 500 .72rem/1 var(--mono); font-style: normal; color: var(--patina); }
.ln-c i, .ln-a i { color: var(--muted); }
.ln b { font: 500 1rem/1.25 var(--display); }
.ln span { font-size: .84rem; color: var(--muted); line-height: 1.4; }
.lane.is-dim .ln:not(.on) { opacity: .35; }
.lane-loop { margin: 12px 0 0; font-size: .86rem; color: var(--muted); }
.lane-loop::before { content: "\21BA"; margin-right: 8px; color: var(--patina); }
@media (prefers-reduced-motion: reduce) { .sb-ph, .sb-st, .sb-lbl, .sb-dot, .sb-name, .ln { transition: none; } .sb-ln.on { animation: none; } }

.ticks { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 8px; }
.ticks li { padding-left: 26px; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 10px; height: 5px; border-left: 2px solid var(--patina); border-bottom: 2px solid var(--patina); transform: rotate(-45deg); }

.src-pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 32px; margin-top: 44px; align-items: start; }
.src-list-pick { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.src-list-pick button { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; text-align: left; font: 500 .95rem/1.3 var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--hair); border-radius: var(--radius); padding: 12px 14px; cursor: pointer; }
.src-list-pick button:hover { border-color: #A9B1B6; }
.src-list-pick button[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 3px 0 0 var(--gold); }
.src-list-pick button:focus-visible { outline: 2px solid var(--patina); outline-offset: 2px; }
.src-list-pick .tag { flex: none; }
.src-more { margin: 10px 0 0; font-size: .85rem; color: var(--muted); }
.src-more .tag { margin-right: 6px; }
.src-rec { animation: src-in .25s ease-out; }
@keyframes src-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .src-rec { animation: none; } }

.reuse-graph { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(48px, 9vw, 112px); margin-top: 48px; }
.rg-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rg-lines path { fill: none; stroke: var(--hair); stroke-width: 1.5; transition: stroke .25s, opacity .25s; }
.rg-col { position: relative; display: grid; gap: 10px; align-content: center; }
.rg-h { margin: 0 0 4px; font: 500 .7rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.rg-n { background: var(--paper); border: 1px solid var(--hair); border-radius: var(--radius); padding: 11px 14px; transition: opacity .25s, background .25s, color .25s, border-color .25s, box-shadow .25s; }
.rg-n b { display: block; font: 500 1rem/1.25 var(--display); }
.rg-n small { display: block; font: 400 .76rem/1.4 var(--mono); color: var(--muted); }
.rg-ev { border-left: 3px solid var(--hair); }
.rg-n.on { background: var(--basalt); color: var(--limestone); border-color: var(--basalt); border-left-color: var(--gold); }
.rg-n.on small { color: var(--silver); }
.rg-n.hit { border-color: var(--patina); box-shadow: inset 3px 0 0 var(--patina); }
.rg-n[data-name].hit { transition-delay: .2s; } /* frameworks light as their paths arrive */
.reuse-graph.is-live .rg-n:not(.on):not(.hit) { opacity: .4; }
.reuse-graph.is-live .rg-lines path { opacity: .3; }
.rg-lines path.hot { stroke: var(--patina); stroke-width: 2; opacity: 1; stroke-dasharray: var(--len); }
.rg-note { margin: 18px 0 0; min-height: 3.2em; font-size: .95rem; color: var(--muted); }
.rg-note b { color: var(--ink); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .rg-n, .rg-lines path { transition: none; } }

.pipeline { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.pipeline button { box-sizing: border-box; display: block; width: 100%; height: 100%; margin: 0; cursor: pointer; text-align: left; background: var(--paper); border: 1px solid var(--hair); border-radius: var(--radius); padding: 16px; font: 500 1rem/1.3 var(--display); color: var(--ink); transition: border-color .15s, background-color .15s; }
.pipeline .pl-n { display: block; font: 500 .78rem/1 var(--mono); color: var(--patina); margin-bottom: 8px; }
.pipeline button:hover { border-color: var(--patina); }
.pipeline button[aria-pressed="true"] { background: var(--basalt); border-color: var(--basalt); color: var(--limestone); box-shadow: inset 0 -2px 0 var(--gold); }
.pipeline button[aria-pressed="true"] .pl-n { color: var(--gold); }
.pipeline button:focus-visible { outline: 2px solid var(--patina); outline-offset: 2px; }

.statuses { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.val-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 32px; align-items: start; min-height: 15rem; animation: role-in .3s ease; }
.val-stage[hidden] { display: none; }
.val-k { margin: 0 0 8px; font: 500 .74rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--patina); }
.val-note h3 { margin: 0 0 10px; font: 500 1.5rem/1.2 var(--display); }
.val-note > p:not(.val-k) { margin: 0; color: var(--muted); max-width: 46ch; line-height: 1.55; }
.val-dim { color: var(--muted); }
.val-foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--hair); }
.val-ai { margin: 0; max-width: 70ch; color: var(--muted); }
.val-ai strong { color: var(--ink); font-weight: 500; }
.val-next { font: 500 .9rem/1 var(--sans); color: var(--patina); background: none; border: 1px solid var(--patina); border-radius: var(--radius); padding: 10px 14px; cursor: pointer; white-space: nowrap; }
.val-next[hidden] { display: none; }
.val-next:hover { background: var(--patina-pale); }
.val-next:focus-visible { outline: 2px solid var(--patina); outline-offset: 2px; }

.reports { display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px; margin-top: 44px; align-items: start; }
.rep-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.rep-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.rep-list b { font: 500 1.02rem/1.3 var(--display); grid-column: 1; }
.rep-list span:not(.tag) { grid-column: 1; color: var(--muted); font-size: .9rem; }
.rep-list .tag { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.rep-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.rep-shots figure { margin: 0; }
.rep-shots figure:first-child { grid-column: 1 / -1; }
.rep-shots figure:first-child .shot { height: 300px; }
.rep-shots .shot { height: 220px; }
.rep-shots figcaption { margin-top: 8px; font-size: .86rem; color: var(--muted); }
.rep-shots figcaption strong { color: var(--ink); font-weight: 600; }

.verdicts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; }
.verdict { background: var(--limestone); border: 1px solid var(--hair); border-radius: var(--radius); padding: 18px; }
.verdict p { margin: 10px 0 0; color: var(--muted); font-size: .9rem; }
.v-label { display: inline-block; white-space: nowrap; font: 600 .78rem/1 var(--sans); letter-spacing: .08em; padding: 7px 10px; border-radius: var(--radius); color: var(--paper); }
.v-go .v-label { background: var(--go); }
.v-cond .v-label { background: var(--cond); }
.v-nogo .v-label { background: var(--nogo); }
.v-none .v-label { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.note { margin: 24px 0 0; font-size: .86rem; color: var(--muted); }

.caveat { margin: 24px 0 0; max-width: 78ch; padding-left: 18px; border-left: 3px solid var(--gold); }


/* Product tour (/product): one block per capability, text beside its screenshot, sides alternating. */
.top nav a[aria-current="page"] { color: var(--paper); }
.tour-index { background: var(--paper); border-bottom: 1px solid var(--hair); }
.tour-index ol { list-style: none; margin: 0; padding: 16px 0; display: flex; flex-wrap: wrap; gap: 6px 22px; counter-reset: t; }
.tour-index li { counter-increment: t; font-size: .92rem; }
.tour-index li::before { content: counter(t, decimal-leading-zero); font: 500 .78rem/1 var(--mono); color: var(--muted); margin-right: 8px; }
.tour-index a { color: var(--ink); text-decoration: none; }
.tour-index a:hover { color: var(--patina); text-decoration: underline; }
.tour-item { scroll-margin-top: 16px; }
.tour-row { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: start; }
.tour-item:nth-child(even) .tour-text { order: 2; }
.tour-text p:not(.eyebrow) { color: var(--muted); max-width: 52ch; margin: 18px 0 0; }
.tour-points { margin: 20px 0 0; padding: 0; list-style: none; }
.tour-points li { padding: 8px 0; border-top: 1px solid var(--hair); font-size: .95rem; }
.tour-points li::before { content: ""; display: inline-block; width: 10px; height: 2px; background: var(--gold); vertical-align: middle; margin-right: 10px; }
.tour-shot { margin: 0; }
.tour-shot .shot { max-height: 520px; }
.tour-shot figcaption { margin-top: 8px; font-size: .86rem; color: var(--muted); }
.tour-shot figcaption strong { color: var(--ink); font-weight: 600; }
.shot-slot { display: grid; place-items: center; min-height: 320px; border: 1px dashed #A9B1B6; border-radius: var(--radius); color: var(--muted); font: 500 .78rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; background: var(--limestone); }
.section-alt .shot-slot { background: var(--paper); }
.tour-caveat { margin: 48px 0 64px; }

/* Inner pages (/about, /pulse, /brand) */
.nav-sep { width: 1px; height: 18px; background: #3A4249; }
.page-hero h1 { max-width: 20ch; }
.hero-meta { margin: 16px 0 0; color: var(--silver); font-size: 1.05rem; }
.hero-aka { margin: 6px 0 0; color: #8E989F; font-size: .9rem; }
.hero-portrait { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 28px; align-items: end; }
.hero-portrait .lede { margin: 0; }
.portrait { margin: 0; }
.portrait img { width: 180px; height: 180px; border-radius: var(--radius); box-shadow: 0 0 0 1px #000, 0 3px 0 var(--gold); }
.prose p { margin: 0 0 18px; max-width: 64ch; }
.prose p:first-child { font-size: 1.1rem; }
.sign { color: var(--muted); font-style: italic; }

/* Legal pages (/privacy, /terms) */
.legal { max-width: 72ch; }
.legal h2 { font-size: 1.35rem; max-width: none; margin: 44px 0 14px; scroll-margin-top: 24px; }
.legal h2:first-child { margin-top: 0; }
.legal p { margin: 0 0 16px; }
.legal ul { margin: 0 0 16px; padding-left: 1.2em; }
.legal li { margin: 0 0 8px; }
.legal li::marker { color: var(--patina); }
.legal-card { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 24px; margin: 0 0 18px; padding: 18px 22px; background: var(--paper); border: 1px solid var(--hair); border-left: 3px solid var(--gold); border-radius: var(--radius); }
.legal-card dt { font: 500 .78rem/1.9 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.legal-card dd { margin: 0; overflow-wrap: anywhere; }
.legal-see { margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--hair); color: var(--muted); }
@media (max-width: 560px) { .legal-card { grid-template-columns: minmax(0, 1fr); gap: 2px; } .legal-card dd { margin-bottom: 10px; } }

/* Comic strips: four panels, each its own SVG, with HTML captions */
.comic { margin: 56px 0 0; }
.comic-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; counter-reset: c; }
.comic-grid li { counter-increment: c; }
.comic-grid svg { display: block; width: 100%; height: auto; }
.comic-grid svg text { font-family: var(--sans); }
.comic-grid p { margin: 10px 0 0; font-size: .92rem; color: var(--muted); }
.comic-grid p::before { content: counter(c, decimal-leading-zero) "  "; font: 500 .78rem/1 var(--mono); color: var(--patina); white-space: pre; }
.comic-note { margin: 18px 0 0; max-width: 78ch; font-size: .86rem; color: var(--muted); }

/* /brand comic: motion in the brand palette with "12 oz. Mouse" cues: lines that boil, ~8 fps
   steps, a hard cut as each panel starts. site.js arms it; the panels act in turn once, when the
   strip scrolls into view, and every animation ends on the static drawing. Without the script,
   or with reduced motion, the drawings stay still. */
@keyframes cb-walk   { from { transform: translateX(-26px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cb-weigh  { 0% { transform: rotate(-7deg); } 40% { transform: rotate(5deg); } 70% { transform: rotate(-2deg); } 100% { transform: none; } }
@keyframes cb-flash  { 0%, 100% { opacity: 1; } 30% { opacity: 0; } 60% { opacity: 1; } 80% { opacity: .2; } }
@keyframes cb-pop    { from { opacity: 0; transform: scale(.4); } 70% { opacity: 1; transform: scale(1.15); } to { opacity: 1; transform: none; } }
@keyframes cb-draw   { from { stroke-dashoffset: 1.05; } to { stroke-dashoffset: 0; } }
@keyframes cb-rub    { from { transform: translate(-64px, 24px); } 70% { transform: translate(-4px, 22px); } to { transform: none; } }
@keyframes cb-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes cb-sweep  { 0% { transform: translateX(-48px); } 45% { transform: translateX(52px); } 100% { transform: none; } }
@keyframes cb-nudge  { 0%, 100% { transform: none; } 50% { transform: translateY(-5px); } }
@keyframes cb-strike { 0% { transform: scale(1.35); opacity: 0; } 55% { transform: scale(.94); opacity: 1; } 75% { transform: scale(1.03); } 100% { transform: none; opacity: 1; } }
@keyframes cb-turn   { from { transform: rotate(-40deg); } to { transform: none; } }
@keyframes cb-cut    { 0%, 14% { opacity: 1; } 15%, 100% { opacity: 0; } }
@keyframes cb-boil   { 0% { filter: url(#boil-a); } 33% { filter: url(#boil-b); } 66% { filter: url(#boil-c); } }
@keyframes cb-jitter { 0% { transform: rotate(-.6deg); } 50% { transform: rotate(.5deg) translateX(1px); } }

.comic-boil .comic-grid { gap: 36px 32px; }
.comic-boil li { position: relative; --d: 0s; }
.comic-boil li:nth-child(1) { transform: rotate(-.8deg); }
.comic-boil li:nth-child(2) { transform: rotate(.6deg) translateY(6px); --d: 1.5s; }
.comic-boil li:nth-child(3) { transform: rotate(.5deg); --d: 3s; }
.comic-boil li:nth-child(4) { transform: rotate(-.6deg) translateY(4px); --d: 4.8s; }
.comic-boil svg { filter: url(#boil-a); box-shadow: 6px 6px 0 var(--basalt); border-radius: var(--radius); }
.comic-boil .frame { stroke-width: 3.5; }
.comic-boil .comic-grid p { display: inline-block; margin-top: 16px; padding: 4px 10px; background: var(--paper); border: 2.5px solid var(--basalt); border-radius: var(--radius); font: 500 1rem/1.35 var(--display); color: var(--ink); transform-origin: 0 50%; }
.comic-boil .comic-grid p::before { content: counter(c, decimal-leading-zero); display: inline-block; margin-right: 8px; padding: 0 6px; background: var(--basalt); color: var(--limestone); font: 500 .78rem/1.5 var(--mono); }
.comic-boil [class^="a-"], .comic-boil [class*=" a-"] { transform-box: fill-box; }
.comic-boil .a-beam { transform-origin: 50% 0; }
.comic-boil .a-coin4, .comic-boil .a-rim, .comic-boil .a-leaf, .comic-boil .a-x { transform-origin: 50% 50%; }
.comic-boil .a-draw { stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.comic-boil .a-ref:nth-of-type(2) { --i: 1; } .comic-boil .a-ref:nth-of-type(3) { --i: 2; } .comic-boil .a-ref:nth-of-type(4) { --i: 3; }
.comic-boil .a-leaf:nth-child(6n+2) { --i: 1; } .comic-boil .a-leaf:nth-child(6n+3) { --i: 2; } .comic-boil .a-leaf:nth-child(6n+4) { --i: 3; }
.comic-boil .a-leaf:nth-child(6n+5) { --i: 4; } .comic-boil .a-leaf:nth-child(6n) { --i: 5; }

/* Panels waiting their turn are Basalt frames; each cuts in hard when its turn comes. */
.comic-boil li::after { content: ""; position: absolute; inset: 0 0 auto 0; aspect-ratio: 292 / 222; background: var(--basalt); opacity: 0; pointer-events: none; border-radius: var(--radius); }
.comic-boil li.play::after { animation: cb-cut .5s linear var(--d) both; }
.comic-boil li.play:nth-child(1) .a-merchant { animation: cb-walk .7s ease-out var(--d) both; }
.comic-boil li.play:nth-child(1) .a-glint    { animation: cb-flash .6s linear calc(var(--d) + .7s) both; }
.comic-boil li.play:nth-child(1) .a-beam     { animation: cb-weigh 1.1s ease-in-out calc(var(--d) + .5s) both; }
.comic-boil li.play:nth-child(2) .a-hand     { animation: cb-rub 1s ease-out var(--d) both; }
.comic-boil li.play:nth-child(2) .a-streak   { animation: cb-draw .6s ease-out calc(var(--d) + .15s) both; }
.comic-boil li.play:nth-child(2) .a-spark    { animation: cb-pop .35s ease-out calc(var(--d) + .7s) both; }
.comic-boil li.play:nth-child(2) .a-trail    { animation: cb-fade .4s ease-out calc(var(--d) + .85s) both; }
.comic-boil li.play:nth-child(3) .a-ref      { animation: cb-draw .5s ease-out calc(var(--d) + .1s * var(--i, 0)) both; }
.comic-boil li.play:nth-child(3) .a-lens     { animation: cb-sweep 1.2s ease-in-out calc(var(--d) + .3s) both; }
.comic-boil li.play:nth-child(3) .a-bracket  { animation: cb-draw .45s ease-out calc(var(--d) + 1.4s) both; }
.comic-boil li.play:nth-child(3) .a-dot      { animation: cb-pop .3s ease-out calc(var(--d) + 1.4s) both; }
.comic-boil li.play:nth-child(3) .a-pick     { animation: cb-nudge .5s ease-in-out calc(var(--d) + 1.6s) 2 both; }
.comic-boil li.play:nth-child(4) .a-coin4    { animation: cb-strike .8s ease-out var(--d) both; }
.comic-boil li.play:nth-child(4) .a-rim      { animation: cb-turn 1.2s ease-out var(--d) both; }
.comic-boil li.play:nth-child(4) .a-stem     { animation: cb-draw .8s ease-out calc(var(--d) + .5s) both; }
.comic-boil li.play:nth-child(4) .a-leaf     { animation: cb-pop .3s ease-out calc(var(--d) + .6s + .07s * var(--i, 0)) both; }
.comic-boil li.play:nth-child(4) .a-streak4  { animation: cb-draw .5s ease-out calc(var(--d) + 1.1s) both; }
.comic-boil li.play:nth-child(4) .a-x        { animation: cb-pop .4s ease-out calc(var(--d) + 1.4s) both; }
/* Choppy, cartoon frame rate for the drawn parts. */
.comic-boil li.play svg * { animation-timing-function: steps(6, end) !important; }
/* Armed but not yet seen: hold every panel on its first frame. */
.comic-boil.armed:not(.in) *, .comic-boil.armed:not(.in) *::after { animation-play-state: paused !important; }
/* While on screen the lines boil and the captions shake. */
.comic-boil.live svg { animation: cb-boil .375s steps(1, end) infinite; }
.comic-boil.live .comic-grid p { animation: cb-jitter .5s steps(1, end) infinite; }
@media (prefers-reduced-motion: reduce) {
  .comic-boil *, .comic-boil *::after { animation: none !important; }
}

/* About */
.cert-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; margin-top: 40px; }
.cert-group h3 { margin: 0 0 12px; font: 500 .78rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.certs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cert { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; background: var(--limestone); border: 1px solid var(--hair); border-left: 3px solid var(--silver); border-radius: var(--radius); padding: 12px 14px; }
.cert b { font: 500 1.02rem/1.25 var(--display); }
.cert span:not(.tag) { grid-column: 1; font-size: .86rem; color: var(--muted); }
.cert .tag { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.cert-new { border-left-color: var(--gold); }
.timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--hair); }
.timeline li { position: relative; padding: 0 0 26px 28px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--limestone); border: 2px solid var(--patina); }
.timeline li:first-child::before { background: var(--gold); border-color: var(--gold); }
.timeline time { font: 500 .8rem/1.4 var(--mono); color: var(--muted); }
.timeline b { display: block; margin: 2px 0 4px; font: 500 1.1rem/1.3 var(--display); }
.timeline p { margin: 0; max-width: 64ch; font-size: .95rem; color: var(--muted); }
.work { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.work li { display: flex; flex-direction: column; gap: 4px; padding: 16px 0; border-top: 1px solid var(--hair); }
.work b { font: 500 1.05rem/1.3 var(--display); }
.work b::before { content: ""; display: inline-block; width: 10px; height: 2px; background: var(--gold); vertical-align: middle; margin-right: 10px; }
.work span { color: var(--muted); font-size: .95rem; }

/* Page "boil" style (/about and /brand): brand book v1.2 with "12 oz. Mouse" cues.
   Text never boils; only rules, frames, borders and dots do. The portrait itself is untouched:
   the wobbly frame and offset block sit around it. site.js arms the motion; without it, or
   with reduced motion, the page shows the same look standing still. */
@keyframes ab-boil   { 0% { filter: url(#boil-a); } 33% { filter: url(#boil-b); } 66% { filter: url(#boil-c); } }
@keyframes ab-draw   { from { transform: scaleX(0); } to { transform: none; } }
@keyframes ab-drawy  { from { transform: scaleY(0); } to { transform: none; } }
@keyframes ab-slap   { from { opacity: 0; transform: scale(1.25) rotate(var(--t, 0deg)); } to { opacity: 1; transform: rotate(var(--t, 0deg)); } }
@keyframes ab-cut    { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes ab-jitter { 0% { transform: rotate(calc(var(--t, 0deg) - .6deg)); } 50% { transform: rotate(calc(var(--t, 0deg) + .5deg)) translateX(1px); } }

/* Hand-drawn gold rule under the name and every section heading (an accent rule, never text). */
.page-boil .hero h1::after, .page-boil main h2::after { content: ""; display: block; width: 3.4em; max-width: 60%; height: 5px; margin-top: 14px; background: var(--gold); border-radius: 3px; filter: url(#boil-a); transform-origin: 0 50%; }

/* Portrait: photo exactly as supplied; a boiling frame and a Silver offset block around it. */
.page-boil .portrait { position: relative; width: 180px; }
.page-boil .portrait img { position: relative; z-index: 1; display: block; box-shadow: none; }
.page-boil .portrait::before { content: ""; position: absolute; inset: 8px -8px -8px 8px; background: var(--silver); border-radius: var(--radius); }
.page-boil .portrait::after { content: ""; position: absolute; inset: -6px; z-index: 2; border: 3px solid var(--limestone); border-radius: var(--radius); filter: url(#boil-b); pointer-events: none; }

/* Certifications as stickers: wobbly ink border, offset block, slight tilt, name in a badge. */
.page-boil .certs { gap: 14px; }
.page-boil .cert { position: relative; border: 0; box-shadow: inset 5px 0 0 var(--silver), 4px 4px 0 var(--basalt); transform: rotate(var(--t)); --t: -.5deg; }
.page-boil .certs li:nth-child(even) { --t: .4deg; }
.page-boil .cert-new { box-shadow: inset 5px 0 0 var(--gold), 4px 4px 0 var(--basalt); }
.page-boil .cert::after { content: ""; position: absolute; inset: 0; border: 2.5px solid var(--basalt); border-radius: var(--radius); filter: url(#boil-c); pointer-events: none; }
.page-boil .cert b { justify-self: start; padding: 1px 8px; background: var(--basalt); color: var(--limestone); }

/* Career: an ink line and wobbly dots. */
.page-boil .timeline { position: relative; border-left: 0; }
.page-boil .timeline::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; background: var(--basalt); filter: url(#boil-a); transform-origin: 50% 0; }
.page-boil .timeline li::before { left: -6px; border-width: 3px; border-color: var(--basalt); filter: url(#boil-b); }
.page-boil .timeline li:first-child::before { border-color: var(--gold); }

/* Selected work as small panels. */
.page-boil .work { gap: 22px 28px; }
.page-boil .work li { position: relative; padding: 16px 18px; border-top: 0; background: var(--limestone); box-shadow: 5px 5px 0 var(--basalt); transform: rotate(var(--t)); --t: .5deg; }
.page-boil .work li:nth-child(4n+2), .page-boil .work li:nth-child(4n+3) { --t: -.5deg; }
.page-boil .work li::after { content: ""; position: absolute; inset: 0; border: 2.5px solid var(--basalt); border-radius: var(--radius); filter: url(#boil-c); pointer-events: none; }

/* Buttons: offset block that presses in. */
.page-boil .btn { box-shadow: 4px 4px 0 var(--silver); }
.page-boil .btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--silver); }
.page-boil .btn:active { transform: translate(4px, 4px); box-shadow: none; }

/* ---------- motion (armed by script) ---------- */
.page-boil.armed section:not(.in) h1::after, .page-boil.armed section:not(.in) h2::after { transform: scaleX(0); }
.page-boil.armed section:not(.in) .cert, .page-boil.armed section:not(.in) .timeline li, .page-boil.armed section:not(.in) .work li { opacity: 0; }
.page-boil.armed section:not(.in) .timeline::before { transform: scaleY(0); }

.page-boil.armed .in h1::after, .page-boil.armed .in h2::after { animation: ab-draw .5s steps(4, end) both; }
.page-boil.armed .in.live h1::after, .page-boil.armed .in.live h2::after { animation: ab-draw .5s steps(4, end) both, ab-boil .375s steps(1, end) .5s infinite; }
.page-boil.armed .live .portrait::after { animation: ab-boil .375s steps(1, end) infinite; }

.page-boil.armed .in .cert { animation: ab-slap .36s steps(3, end) calc((var(--g, 0) * 4 + var(--m, 0)) * 70ms) both; }
.page-boil .cert-group:nth-child(2) { --g: 1; } .page-boil .cert-group:nth-child(3) { --g: 2; } .page-boil .cert-group:nth-child(4) { --g: 3; }
/* stagger index for every list on the page */
.page-boil main li:nth-child(2) { --m: 1; } .page-boil main li:nth-child(3) { --m: 2; } .page-boil main li:nth-child(4) { --m: 3; }
.page-boil main li:nth-child(5) { --m: 4; } .page-boil main li:nth-child(6) { --m: 5; } .page-boil main li:nth-child(7) { --m: 6; }

.page-boil.armed .in .timeline::before { animation: ab-drawy 1.2s steps(8, end) both; }
.page-boil.armed .in.live .timeline::before { animation: ab-drawy 1.2s steps(8, end) both, ab-boil .375s steps(1, end) 1.2s infinite; }
.page-boil.armed .in .timeline li { animation: ab-cut .3s steps(3, end) calc(var(--m, 0) * 150ms) both; }

.page-boil.armed .in .work li { animation: ab-slap .36s steps(3, end) calc(var(--m, 0) * 90ms) both; }
.page-boil.armed .work li:hover { animation: ab-jitter .5s steps(1, end) infinite; }

/* Cards scale up as they slap in; keep that from widening the page on phones. */
.page-boil main { overflow-x: clip; }
/* /brand: chapter labels as Basalt badges, like the strip's captions; the anatomy list as a panel.
   The mark itself is never filtered. */
.page-boil .chapter-k { justify-self: start; padding: 2px 8px; border-top: 0; background: var(--basalt); color: var(--limestone); transform: rotate(var(--t)); --t: -1deg; }
.page-boil .chapter:nth-child(2) { --m: 1; } .page-boil .chapter:nth-child(3) { --m: 2; }
.page-boil .anatomy dl { position: relative; padding: 4px 20px; border-top: 0; background: var(--limestone); box-shadow: 5px 5px 0 var(--basalt); transform: rotate(var(--t)); --t: -.4deg; }
.page-boil .anatomy dl::after { content: ""; position: absolute; inset: 0; border: 2.5px solid var(--basalt); border-radius: var(--radius); filter: url(#boil-c); pointer-events: none; }
.page-boil .anatomy dt:last-of-type, .page-boil .anatomy dd:last-of-type { border-bottom: 0; }
.page-boil.armed section:not(.in) .chapter-k, .page-boil.armed section:not(.in) .anatomy dl { opacity: 0; }
.page-boil.armed .in .chapter-k { animation: ab-slap .36s steps(3, end) calc(var(--m, 0) * 200ms) both; }
.page-boil.armed .in .anatomy dl { animation: ab-slap .36s steps(3, end) .2s both; }

/* Anatomy of the mark: the mark builds itself part by part, in step with its rows, then stands
   exactly as drawn (fill-mode backwards: nothing stays dashed or scaled). Never filtered.
   Pointing at a row lights its part. The cut-outs are drawn in the section's white. */
@keyframes am-strike { from { opacity: 0; transform: scale(1.3); } to { opacity: 1; transform: none; } }
@keyframes am-draw   { from { stroke-dasharray: 1 2; stroke-dashoffset: 1.02; } to { stroke-dasharray: 1 2; stroke-dashoffset: 0; } }
@keyframes am-spin   { from { opacity: 0; transform: rotate(-120deg); } to { opacity: 1; transform: none; } }
@keyframes am-pop    { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }
@keyframes am-slide  { from { transform: scaleX(0); } to { transform: none; } }
@keyframes am-row    { from { background: var(--patina-pale); } to { background: transparent; } }
.anat-mark * { transform-box: fill-box; transform-origin: 50% 50%; transition: fill .2s, stroke .2s; }
.anat-mark .mk-beam { transform-origin: 0 50%; }
.page-boil.armed .anatomy:not(.in) .anat-mark > * { opacity: 0; }
.page-boil.armed .anatomy.in .mk-coin  { animation: am-strike .5s steps(4, end) backwards; }
.page-boil.armed .anatomy.in .mk-ring  { animation: am-draw .6s steps(6, end) .6s backwards; }
.page-boil.armed .anatomy.in .mk-beads { animation: am-spin .6s steps(6, end) .9s backwards; }
.page-boil.armed .anatomy.in .mk-ped   { animation: am-draw .6s steps(6, end) 1.6s backwards; }
.page-boil.armed .anatomy.in .mk-dot   { animation: am-pop .3s steps(3, end) 2.2s backwards; }
.page-boil.armed .anatomy.in .mk-beam  { animation: am-slide .4s steps(4, end) 2.4s backwards; }
.page-boil.armed .anatomy.in :is(dt, dd):nth-of-type(1) { animation: am-row .9s steps(4, end) 0s backwards; }
.page-boil.armed .anatomy.in :is(dt, dd):nth-of-type(2) { animation: am-row .9s steps(4, end) .6s backwards; }
.page-boil.armed .anatomy.in :is(dt, dd):nth-of-type(3) { animation: am-row .9s steps(4, end) 1.6s backwards; }
.page-boil.armed .anatomy.in :is(dt, dd):nth-of-type(4) { animation: am-row .9s steps(4, end) 2.4s backwards; }
.anatomy:has(dt:nth-of-type(1):hover, dd:nth-of-type(1):hover) .mk-coin { fill: var(--patina); }
.anatomy:has(dt:nth-of-type(2):hover, dd:nth-of-type(2):hover) .mk-ring { stroke: var(--gold); }
.anatomy:has(dt:nth-of-type(2):hover, dd:nth-of-type(2):hover) .mk-beads { fill: var(--gold); }
.anatomy:has(dt:nth-of-type(3):hover, dd:nth-of-type(3):hover) .mk-ped { stroke: var(--gold); }
.anatomy:has(dt:nth-of-type(3):hover, dd:nth-of-type(3):hover) .mk-dot { fill: var(--gold); }
.anatomy:has(dt:nth-of-type(4):hover, dd:nth-of-type(4):hover) .mk-beam { fill: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .page-boil *, .page-boil *::before, .page-boil *::after { animation: none !important; }
  .page-boil .btn:hover, .page-boil .btn:active { transform: none; }
}

/* Brand */
.chapters { display: grid; gap: 64px; }
.chapter { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; }
.chapter-k { margin: 0; padding-top: 10px; border-top: 2px solid var(--gold); font: 500 .78rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--patina); align-self: start; }
.chapter h2 { margin: 0 0 16px; }
.chapter p { margin: 0 0 14px; max-width: 64ch; }
.anatomy { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 56px; align-items: center; margin-top: 40px; }
.anatomy svg { width: 100%; height: auto; color: var(--basalt); }
.anatomy dl { margin: 0; display: grid; grid-template-columns: 9em 1fr; border-top: 1px solid var(--hair); }
.anatomy dt, .anatomy dd { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.anatomy dt { font: 500 1.02rem/1.4 var(--display); }
.anatomy dd { color: var(--muted); }

/* Pulse */
.trio { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: q; }
.trio li { counter-increment: q; display: flex; flex-direction: column; gap: 8px; background: var(--paper); border: 1px solid var(--hair); border-top: 3px solid var(--patina); border-radius: var(--radius); padding: 18px; }
.trio li::before { content: counter(q, decimal-leading-zero); font: 500 .78rem/1 var(--mono); color: var(--patina); }
.trio b { font: 500 1.1rem/1.3 var(--display); }
.trio span { color: var(--muted); font-size: .95rem; }
.pulse-item { margin-top: 36px; max-width: 860px; }
.pi { padding: 22px 24px 24px; }
.pi-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; font: 500 .8rem/1.4 var(--mono); color: var(--muted); }
.stage { white-space: nowrap; font: 500 .68rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--patina); box-shadow: inset 0 0 0 1px var(--patina); padding: 5px 7px; border-radius: var(--radius); }
.pi h3 { margin: 14px 0 10px; font-size: 1.35rem; max-width: 40ch; }
.pi p:not(.pi-meta) { margin: 0 0 10px; max-width: 70ch; }
.pi-affects b { font: 500 .72rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: 8px; }
.pi .pi-src { margin-bottom: 0; }
.cra-line { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cra-line li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 16px 0 0; border-top: 2px solid var(--basalt); }
.cra-line li::before { content: ""; position: absolute; top: -6px; left: 0; width: 10px; height: 10px; background: var(--paper); border: 2px solid var(--patina); border-radius: 50%; }
.cra-line .now { border-top-color: var(--gold); }
.cra-line .now::before { background: var(--gold); border-color: var(--gold); }
.cra-line time { font: 500 .8rem/1 var(--mono); color: var(--muted); }
.cra-line span { font-size: .92rem; }
.cra-line .now span { font-weight: 600; }

.foot-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* Contact */
.contact { background: var(--basalt); color: var(--limestone); padding: 88px 0; border-top: 3px solid var(--gold); }
.contact-inner { display: grid; grid-template-columns: 140px 1fr; gap: 48px; align-items: center; }
.contact-mark { width: 140px; height: 140px; color: var(--silver); }
.contact h2 { max-width: 26ch; }
.contact p { color: #D5DAD7; margin: 14px 0 26px; max-width: 60ch; }
.contact .cta-row { align-items: center; gap: 20px; }
.on-dark, .contact-mail { color: var(--silver); }
.on-dark:hover, .contact-mail:hover { color: var(--paper); }
.contact-mail { font-family: var(--mono); font-size: .95rem; }

.foot { background: var(--basalt); color: var(--silver); border-top: 1px solid #2E353B; font-size: .88rem; }
.foot-row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 22px; padding-bottom: 22px; }
.foot a { color: var(--silver); }

/* Lightbox */
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(1100px, 94vw); max-height: 94vh; overflow: auto; }
.lightbox::backdrop { background: rgba(28,33,38,.88); }
.lightbox img { border-radius: var(--radius); background: var(--paper); }
.lb-cap { color: var(--limestone); margin: 12px 0 0; font-size: .95rem; }
.lb-close { position: sticky; top: 0; float: right; margin: 0 0 8px; width: 40px; height: 40px; border: 0; border-radius: var(--radius); background: var(--paper); color: var(--ink); font-size: 26px; line-height: 1; cursor: pointer; }

/* Responsive */
@media (max-width: 1100px) {
  .lane { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .top nav a:not(.nav-keep), .nav-sep { display: none; }
}
@media (max-width: 980px) {
  .cycle { grid-template-columns: 1fr; gap: 24px; }
  .cycle-pan { margin-top: 0; }
  .tour-row { grid-template-columns: 1fr; gap: 32px; }
  .tour-item:nth-child(even) .tour-text { order: 0; }
  .problem-head { position: static; }
  .hero-top, .hero-band, .split, .split-wide, .val-stage, .reports, .src-pick { grid-template-columns: 1fr; gap: 36px; }
  .hero-band { margin-top: 40px; padding-top: 28px; gap: 24px; }
  .hero-side { gap: 0; }
  .hero-side .mantra { display: none; }
  .role-list { flex-direction: row; flex-wrap: wrap; }
  .role-label { flex-basis: 100%; }
  .role-list button { padding: 8px 12px; border-color: #3A4249; }
  .role-list button::after { display: none; }
  .verdicts { grid-template-columns: 1fr 1fr; }
  .pipeline { grid-template-columns: repeat(3, 1fr); }
  .reuse-graph { grid-template-columns: 1fr; gap: 28px; }
  .rg-lines { display: none; }
  .chapter, .anatomy, .cert-groups, .work, .trio { grid-template-columns: 1fr; gap: 24px; }
  .anatomy svg { max-width: 200px; }
  .cra-line { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .top-row { height: 64px; }
  .top-row { height: 72px; gap: 12px; }
  .lockup { gap: 12px; }
  .lockup-mark { width: 48px; height: 48px; }
  .lockup-word { width: 136px; height: 21px; }
  .hero { padding: 40px 0 48px; }
  .section { padding: 64px 0; }
  .problems li { grid-template-columns: 48px minmax(0, 1fr); padding: 16px 0; }
  .problems li::before { font-size: 1.5rem; }
  .problems b { font-size: 1.15rem; }
  .mantra { grid-template-columns: 1fr; }
  .ui-metrics { grid-template-columns: 1fr 1fr; }
  .ui-metrics div:nth-child(3) { border-left: 0; }
  .ui-metrics div:nth-child(n+3) { border-top: 1px solid var(--hair); }
  .ui-table th, .ui-table td { padding: 8px 10px; }
  .ui-hero .ui-table { font-size: .82rem; }
  .ui-dl { grid-template-columns: 1fr; }
  .ui-dl dt { border-bottom: 0; padding-bottom: 2px; }
  .cycle { display: none; }
  .chain { display: grid; row-gap: 28px; margin-top: 36px; }
  .lane { grid-template-columns: 1fr 1fr; }
  .chain, .verdicts, .rep-shots { grid-template-columns: 1fr; }
  .pipeline { grid-template-columns: 1fr 1fr; }
  .pipeline li:last-child { grid-column: 1 / -1; }
  .val-foot { flex-direction: column; align-items: flex-start; }
  .rep-shots figure:first-child .shot, .rep-shots .shot { height: 260px; }
  .contact-inner { grid-template-columns: 1fr; gap: 24px; }
  .contact-mark { width: 88px; height: 88px; }
  .top nav { gap: 16px; }
  .top nav a { font-size: .88rem; }
  .comic-grid, .cra-line { grid-template-columns: 1fr; }
  .hero-portrait { grid-template-columns: 1fr; }
  .portrait img { width: 140px; height: 140px; }
  .anatomy dl { grid-template-columns: 1fr; }
  .anatomy dt { border-bottom: 0; padding-bottom: 0; }
}
@media (max-width: 980px) { .val-stage { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .val-stage { animation: none; } .pipeline button { transition: none; } }