/* Design tokens: documentation-first, monospace reserved for evidence.
   No shadows, no rotation, no pills; one border width. */
:root{
  --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --paper:#ffffff;--surface:#f6f7f6;--line:#d6dad8;--line-soft:#e6e9e7;
  --ink:#101418;--ink-2:#4a5459;--ink-3:#6b7478;--link:#1b4db1;
  --add:#1a6b3c;--add-bg:#eaf3ec;--del:#9b2c2c;--del-bg:#fbecec;--note:#8a5600;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--link);outline-offset:2px}
button{font:inherit;cursor:pointer;border-radius:2px}
button:disabled{cursor:not-allowed;color:var(--ink-3);border-color:var(--line)}
code{font-family:var(--mono);font-size:.9em}
h1,h2,h3,h4{font-weight:650;letter-spacing:0}
.wrap{width:100%;max-width:1120px;margin-inline:auto;padding-inline:var(--s5)}
.sprite{display:none}
.icon{width:16px;height:16px;flex:none;vertical-align:-2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:var(--s5);top:-100px;background:var(--paper);border:1px solid var(--line);padding:var(--s3)}
.skip:focus{top:var(--s3)}

/* Header */
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);padding-block:var(--s4);border-bottom:1px solid var(--line)}
.brand{font-size:16px;font-weight:700}
.brand span{color:var(--ink-3);font-weight:500}
.nav nav{display:flex;align-items:center;gap:var(--s5);font-size:14px}
.nav nav a{color:var(--ink-2)}
.nav nav a:hover{color:var(--ink)}
.nav-cta{border:1px solid var(--line);padding:var(--s2) var(--s3);color:var(--ink)!important}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--s8);padding-block:var(--s8) var(--s7);align-items:start}
.hero-copy{max-width:34em}
.eyebrow{margin:0 0 var(--s4);font-family:var(--mono);font-size:12px;line-height:1.4;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.hero h1{margin:0 0 var(--s5);font-size:36px;line-height:1.15}
.hero h1 em{font-style:normal;color:var(--link)}
.intro{margin:0 0 var(--s6);font-size:19px;line-height:1.5;color:var(--ink-2)}
.intro code{color:var(--ink);background:var(--surface);padding:1px 4px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s5)}
.button{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;padding:var(--s3) var(--s5);border:1px solid var(--line);background:var(--paper);color:var(--ink);font-size:14px;font-weight:600}
.button.primary{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.button.primary:hover{background:#000}
.button.light{background:var(--paper);color:var(--ink);border-color:var(--ink)}
.text-link{font-size:14px;font-weight:600;color:var(--link)}
.fine{margin:var(--s5) 0 0;font-size:14px;color:var(--ink-3)}

/* Specimen report: a figure, axis aligned, quotable */
.hero-report{border:1px solid var(--line);background:var(--paper)}
.report-bar{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);background:var(--surface);font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.report-heading{padding:var(--s5) var(--s4) var(--s4)}
.report-heading h2{margin:var(--s4) 0 var(--s2);font-size:23px;line-height:1.25}
.report-heading p{margin:0;font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.pill{display:inline-block;padding:2px 6px;border:1px solid var(--note);color:var(--note);font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.report-line{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-top:1px solid var(--line-soft);font-size:14px}
.report-line .mono{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.status{display:inline-flex;align-items:center;color:var(--add)}
.status.warn{color:var(--note)}
.code-change{margin:var(--s4);border:1px solid var(--line);font-family:var(--mono);font-size:12px}
.code-change>span{display:block;padding:var(--s2) var(--s3);border-bottom:1px solid var(--line-soft);background:var(--surface);color:var(--ink-3)}
.code-change>div{padding:var(--s2) var(--s3)}
.code-change .del{background:var(--del-bg);color:var(--del)}
.code-change .add{background:var(--add-bg);color:var(--add)}
.report-footer{padding:var(--s3) var(--s4);border-top:1px solid var(--line-soft);font-size:12px;color:var(--ink-3)}

/* Audience strip */
.audience{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s4);padding-block:var(--s4);border-block:1px solid var(--line);font-size:14px;color:var(--ink-3)}
.audience p{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-2)}
.audience i{color:var(--line);font-style:normal;margin-inline:var(--s2)}

/* Sections */
.section{padding-block:var(--s8)}
.section-heading{max-width:44em}
.section h2{font-size:28px;line-height:1.2;margin:0 0 var(--s4)}
.section-heading>p:last-child{font-size:16px;color:var(--ink-2)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6);margin-top:var(--s6)}
.cards article{border-top:2px solid var(--ink);padding-top:var(--s4)}
.card-number{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.cards h3{margin:var(--s3) 0 var(--s2);font-size:19px;line-height:1.35}
.cards p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-2)}

/* Demo */
.demo-section{background:var(--surface);border-block:1px solid var(--line);padding-block:var(--s7)}
.demo-heading{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s5);align-items:baseline;margin-bottom:var(--s5)}
.demo-heading>p{margin:0;max-width:38em;font-size:14px;color:var(--ink-2)}
.demo-shell{background:var(--paper);border:1px solid var(--line)}
.demo-controls{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;justify-content:space-between;padding:var(--s4);border-bottom:1px solid var(--line)}
.scenario-buttons{display:flex;flex-wrap:wrap;gap:var(--s2)}
.scenario-buttons button{padding:var(--s2) var(--s3);border:1px solid var(--line);background:var(--paper);font-size:14px;color:var(--ink-2)}
.scenario-buttons button[aria-pressed=true]{border-color:var(--ink);color:var(--ink);background:var(--surface);font-weight:600}
.demo-empty{margin:0;padding:var(--s7) var(--s4);text-align:center;font-size:16px;color:var(--ink-2)}
.demo-empty span{display:block;margin-top:var(--s2);font-size:14px;color:var(--ink-3)}
.result-summary{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;justify-content:space-between;padding:var(--s4);background:var(--surface);border-bottom:1px solid var(--line)}
.result-summary h3{margin:0 0 var(--s1);font-size:19px}
.result-summary p{margin:0;font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.result-chip{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;padding:4px var(--s2);border:1px solid var(--note);color:var(--note)}
.result-chip.clear{border-color:var(--add);color:var(--add)}
.result-block{padding:var(--s4);border-bottom:1px solid var(--line-soft)}
.result-block h4{margin:0 0 var(--s3);font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.result-block p{margin:0 0 var(--s2);font-size:14px;color:var(--ink-2)}
.result-block code{display:block;padding:var(--s2) var(--s3);border:1px solid var(--line-soft);background:var(--surface);font-size:12px;margin-bottom:var(--s1);overflow-wrap:anywhere}
.diff{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto) minmax(0,auto);gap:0;border:1px solid var(--line);font-family:var(--mono);font-size:12px;margin-bottom:var(--s3)}
.diff>div{padding:var(--s2) var(--s3);border-bottom:1px solid var(--line-soft)}
.diff .diff-head{background:var(--surface);color:var(--ink-3)}
.diff .del{background:var(--del-bg);color:var(--del);border-left:3px solid var(--del)}
.diff .add{background:var(--add-bg);color:var(--add);border-left:3px solid var(--add)}
.diff .path{border-left:3px solid transparent}
.result-cta{padding:var(--s5) var(--s4);background:var(--surface)}
.result-cta h4{margin:0 0 var(--s3);font-size:19px}
.result-cta p{margin:0 0 var(--s4);font-size:14px;color:var(--ink-2)}
.demo-bottom{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;justify-content:space-between;padding:var(--s4);border-top:1px solid var(--line)}
.demo-bottom>span{font-size:12px;color:var(--ink-3)}
.demo-bottom>div{display:flex;flex-wrap:wrap;gap:var(--s3)}
.demo-bottom button{min-height:44px;padding:var(--s2) var(--s3);border:1px solid var(--line);background:var(--paper);color:var(--link);font-size:14px;font-weight:600}
.demo-note{margin:var(--s4) 0 0;font-size:14px;color:var(--ink-3)}

/* Checklist */
.guide{padding-bottom:0}
.guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s7);margin-top:var(--s5)}
.guide h3{font-size:19px;line-height:1.35;margin:var(--s5) 0 var(--s2)}
.guide h3:first-child{margin-top:0}
.guide p{margin:0;font-size:14px;color:var(--ink-2)}
.guide code{background:var(--surface);padding:1px 4px}
.guide-faq{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--line);max-width:60em}
.guide-faq h3{font-size:19px;margin:var(--s5) 0 var(--s2)}
.guide-faq h3:first-child{margin-top:0}
.standards{font-size:14px;color:var(--ink-3)}
.standards a{color:var(--link);text-decoration:underline}

/* Scope */
.boundaries{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s8)}
.boundaries ul{margin:0;padding:0;list-style:none}
.boundaries li{padding-block:var(--s3);border-bottom:1px solid var(--line-soft);font-size:14px;color:var(--ink-2)}

/* Pilot */
.pilot{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--s8);padding:var(--s7);border:1px solid var(--ink);margin-block:var(--s8)}
.pilot h2{font-size:28px;line-height:1.2;margin:0 0 var(--s4)}
.pilot>div>p:not(.eyebrow){margin:0 0 var(--s5);font-size:16px;color:var(--ink-2);max-width:32em}
.pilot-fine{margin:var(--s4) 0 0!important;font-size:14px!important;color:var(--ink-3)!important}
.pilot aside{border-left:1px solid var(--line);padding-left:var(--s6)}
.pilot-label{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.pilot aside h3{margin:var(--s3) 0 var(--s3);font-size:23px;line-height:1.25}
.pilot aside p{margin:0 0 var(--s3);font-size:14px;color:var(--ink-2)}

/* Privacy + footer */
.privacy{padding-block:var(--s7);border-top:1px solid var(--line);max-width:60em}
.privacy h2{font-size:19px;margin:0 0 var(--s3)}
.privacy p{margin:0 0 var(--s3);font-size:14px;color:var(--ink-2)}
.privacy a{color:var(--link);text-decoration:underline}
.footer{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);align-items:baseline;justify-content:space-between;padding-block:var(--s5);border-top:1px solid var(--line)}
.footer p{margin:0;font-size:12px;color:var(--ink-3)}

@media(max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr);gap:var(--s6);padding-block:var(--s7) var(--s6)}
  .hero h1{font-size:28px}
  .intro{font-size:17px}
  .cards{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .boundaries{grid-template-columns:minmax(0,1fr);gap:var(--s2)}
  .pilot{grid-template-columns:minmax(0,1fr);gap:var(--s5);padding:var(--s5)}
  .pilot aside{border-left:0;border-top:1px solid var(--line);padding:var(--s5) 0 0}
  .guide-grid{grid-template-columns:minmax(0,1fr);gap:var(--s2)}
  .guide h3{margin-top:var(--s5)}
  .section{padding-block:var(--s6)}
  .nav nav>a:not(.nav-cta){display:none}
  .demo-heading{margin-bottom:var(--s4)}
}
@media(max-width:560px){
  .wrap{padding-inline:var(--s4)}
  .demo-controls,.demo-bottom,.result-summary{align-items:stretch;flex-direction:column}
  .diff{grid-template-columns:minmax(0,1fr)}
  .diff .diff-head{display:none}
  .diff>div[data-label]::before{content:attr(data-label) ": ";color:var(--ink-3)}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}