/* ==========================================================================
   Morphos — core stylesheet
   Direction: refined editorial-tech (dark signal field + mint accent)
   Order: tokens -> base -> layout -> components -> sections -> responsive -> motion
   ========================================================================== */

:root{
  /* ---- design tokens inherited from morphostech.com (single source of truth) ---- */
  --bg:#000000;
  --bg-elev:#000000;
  --panel:rgba(255,255,255,0.02);
  --panel-2:rgba(255,255,255,0.04);
  --text:#ffffff;
  --text-dim:rgba(255,255,255,0.62);
  --text-dimmer:rgba(255,255,255,0.52);
  --accent:#A8C8EC;
  --line:rgba(255,255,255,0.14);
  --line-strong:rgba(255,255,255,0.26);
  --line-soft:rgba(255,255,255,0.08);
  --fill-ghost:rgba(255,255,255,0.06);
  --fill-solid:rgba(255,255,255,0.1);
  --display:'Archivo','Geist','Plus Jakarta Sans',system-ui,sans-serif;
  --mono:ui-monospace,'JetBrains Mono','SF Mono','Cascadia Mono',Menlo,Consolas,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-premium:cubic-bezier(.16,1,.3,1);
  --topbar-h:78px;
  --maxw:1180px;
  --gutter:clamp(19px,5vw,86px);
  --fs-mono:13px;
  --ls-mono:.18em;
  --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:36px;
  --sp-7:56px; --sp-8:clamp(56px,7vh,86px); --sp-9:clamp(68px,10vh,86px);
  /* ---- ink / accent / state ramps: the only opacity steps the sheet uses.
     Every declaration below references these, so the palette is one list
     rather than 240 literals that drift a hundredth apart. ---- */
  --ink-2:rgba(255,255,255,0.02);
  --ink-4:rgba(255,255,255,0.04);
  --ink-6:rgba(255,255,255,0.06);
  --ink-8:rgba(255,255,255,0.08);
  --ink-10:rgba(255,255,255,0.1);
  --ink-14:rgba(255,255,255,0.14);
  --ink-18:rgba(255,255,255,0.18);
  --ink-26:rgba(255,255,255,0.26);
  --ink-34:rgba(255,255,255,0.34);
  --ink-46:rgba(255,255,255,0.46);
  --ink-52:rgba(255,255,255,0.52);
  --ink-56:rgba(255,255,255,0.56);
  --ink-62:rgba(255,255,255,0.62);
  --ink-78:rgba(255,255,255,0.78);
  --ink-90:rgba(255,255,255,0.9);
  --acc-5:rgba(168,200,236,0.05);
  --acc-8:rgba(168,200,236,0.08);
  --acc-12:rgba(168,200,236,0.12);
  --acc-16:rgba(168,200,236,0.16);
  --acc-24:rgba(168,200,236,0.24);
  --acc-40:rgba(168,200,236,0.4);
  --acc-50:rgba(168,200,236,0.5);
  --acc-55:rgba(168,200,236,0.55);
  --acc-65:rgba(168,200,236,0.65);
  --acc-85:rgba(168,200,236,0.85);
  --warn-28:rgba(230,198,137,0.28);
  --warn-40:rgba(230,198,137,0.4);
  --warn-75:rgba(230,198,137,0.75);
  --fail-45:rgba(240,160,145,0.45);
  --fail-80:rgba(240,160,145,0.8);
  /* base values that were written inline */
  --ink-solid:#ffffff;
  --canvas:#000000;
  --warm-ink:#e6c689;
  --fail-ink:#f0a091;
  --kind-standard:#9db8d6;
  --kind-research:#cfc09a;
  --good-ink:#bcd3ea;
  --select-bg:#0a0a0a;
}

/* ---- Archivo: self-hosted subsets copied from the studio site, no external request ---- */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLydOxI.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:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLySOxK-vA.woff2) format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLyTOxK-vA.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

*,*::before,*::after{box-sizing:border-box}

/* The hidden attribute must win over any component display rule. */
[hidden]{display:none!important}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  max-width:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--display);
  font-size:15.5px;
  line-height:1.7;
  overflow-x:hidden;
  max-width:100%;
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%;display:block}

a{color:inherit}

::selection{background:var(--accent);color:#000000}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- shared layout ---------- */

.section-shell{
  width:min(var(--maxw),calc(100% - var(--gutter) * 2));
  margin-inline:auto;
}

section[id]{scroll-margin-top:96px}

.eyebrow{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0;
  color:var(--accent);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.eyebrow::before{
  content:"";
  flex:0 0 28px;
  height:1px;
  background:currentColor;
  opacity:.7;
}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  letter-spacing:-.012em;
}

h1{
  font-size:clamp(40px,6.2vw,86px);
  line-height:.98;
  margin:26px 0 26px;
  letter-spacing:-.02em;
}

h2{
  font-size:clamp(27px,3.3vw,40px);
  line-height:1.08;
  margin:0;
}

h1 em,h2 em{color:var(--accent);font-style:normal}

p{margin:0}

/* ---------- top bar ---------- */

.topbar{
  position:sticky;
  top:0;
  z-index:10;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 var(--gutter);
  border-bottom:1px solid var(--line);
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.brand{
  display:flex;
  align-items:center;
  gap:11px;
  color:var(--text);
  text-decoration:none;
  font-weight:700;
  letter-spacing:.01em;
}

.brand-mark{
  display:inline-grid;
  place-items:center;
  width:26px;
  height:26px;
  border:1px solid var(--accent);
  color:var(--accent);
  font-family:var(--display);
  font-size:15.5px;
  line-height:1;
}

.topbar-meta{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--text-dim);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.status-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 3px var(--acc-12);
}

.header-link{
  color:var(--accent);
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  padding-bottom:3px;
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease);
}

.header-link:hover{border-bottom-color:var(--accent)}

/* ---------- buttons / links ---------- */

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-decoration:none;
  border:1px solid transparent;
  border-radius:2px;
  padding:15px 20px;
  font-family:var(--display);
  font-size:14px;
  font-weight:700;
  line-height:1.1;
  cursor:pointer;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .25s var(--ease);
}

.button-primary{
  background:var(--accent);
  color:#000000;
}

.button-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 26px -10px var(--acc-65);
}

.button-primary:active{transform:translateY(0)}

.text-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:0;
  border-bottom:1px solid var(--line);
  background:none;
  color:var(--text);
  font-family:var(--display);
  font-size:12.5px;
  padding:6px 0;
  text-decoration:none;
  cursor:pointer;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}

.text-link:hover{color:var(--accent);border-color:var(--accent)}

/* ---------- hero ----------
   Layout: an instrument field, not a poster. A hairline grid is masked into a
   soft radial so it never reads as a wireframe; one baked accent bloom sits
   behind the display line; four corner ticks hold the frame. Copy is a
   left-aligned column, and the three routes sit in a ledger on the right so the
   first screen already answers "what do you do" instead of only "who are you".
   Every material here is a local asset or a CSS hairline. No video, no CDN.
   ---------------------------------------------------------------------- */

.hero{
  position:relative;
  width:100%;
  min-height:calc(100vh - var(--topbar-h));
  min-height:calc(100svh - var(--topbar-h));
  display:flex;
  flex-direction:column;
  overflow:hidden;
  isolation:isolate;
  background:#000;
}

/* ---- field: grid + bloom + frame, all behind the copy ---- */
.hero-field{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

.hero-gridlines{
  position:absolute;
  inset:0;
  background-image:
    repeating-linear-gradient(to right, var(--ink-6) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(to bottom, var(--ink-4) 0 1px, transparent 1px 96px);
  -webkit-mask-image:radial-gradient(120% 96% at 34% 34%, #000 0%, rgba(0,0,0,.55) 46%, transparent 78%);
  mask-image:radial-gradient(120% 96% at 34% 34%, #000 0%, rgba(0,0,0,.55) 46%, transparent 78%);
}

.hero-glow{
  position:absolute;
  inset:0;
  /* Baked, not a live gradient: Chrome dithers steep dark multi-stop radials
     into a visible checker field at these alphas. Drawn by work/gen-bloom.py. */
  background:#000 url(assets/hero-bloom.png) no-repeat 4% 34%;
  background-size:126% auto;
  transform-origin:38% 30%;
  animation:hero-bloom-drift 26s cubic-bezier(.45,0,.55,1) infinite;
  will-change:transform;
}

@keyframes hero-bloom-drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-1.1%,1.4%,0) scale(1.035)}
  100%{transform:translate3d(0,0,0) scale(1)}
}

/* The particle radar sits between the baked bloom and the copy: one canvas,
   points only, no glow ring. It is drawn in the accent at low alpha so the
   hero still reads as a black page with a hairline instrument on it. */
.hero-radar{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  opacity:.86;
  -webkit-mask-image:radial-gradient(34% 44% at 77.5% 50%, #000 0%, #000 58%, transparent 100%);
  mask-image:radial-gradient(34% 44% at 77.5% 50%, #000 0%, #000 58%, transparent 100%);
}

/* four 1px corner ticks: the frame of an instrument, not a border */
.hero-frame{position:absolute;inset:clamp(11.5px,2vh,21px) clamp(11.5px,1.5vw,27px) auto;height:0;opacity:.55}
.hero-frame .ft{position:absolute;width:13px;height:13px;border:0 solid var(--ink-34)}
.hero-frame .tl{top:0;left:0;border-top-width:1px;border-left-width:1px}
.hero-frame .tr{top:0;right:0;border-top-width:1px;border-right-width:1px}
.hero-frame .bl,.hero-frame .br{display:none}

.hero-body{
  position:relative;
  z-index:2;
  flex:1 1 auto;
  width:100%;
  min-height:0;
  width:min(1120px,calc(100% - var(--gutter) * 2));
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(238px,300px);
  align-items:center;
  gap:clamp(34px,4vw,68px);
  padding:clamp(34px,6vh,68px) 0 clamp(27px,4.4vh,56px);
}

.hero-panel{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  max-width:620px;
}

/* ---- eyebrow: index, rule, label, meta ---- */
.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin:0 0 clamp(19px,3vh,30px);
  color:var(--text-dimmer);
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  line-height:1;
  white-space:nowrap;
}
.hero-eyebrow-idx{color:var(--accent)}
.hero-eyebrow-line{display:block;width:clamp(21px,3vw,40px);height:1px;background:var(--line-strong)}

.hero-panel h1{
  margin:0;
  font-size:clamp(40px,5.5vw,86px);
  line-height:.96;
  letter-spacing:-.032em;
  font-weight:200;
  text-wrap:balance;
}
.hero-panel h1 em{font-style:normal;color:var(--accent)}

.hero-sub{
  margin:clamp(15.5px,2.2vh,24px) 0 0;
  color:var(--text-dim);
  font-family:var(--mono);
  font-size:clamp(9.5px,.78vw,10.5px);
  letter-spacing:.2em;
  text-transform:uppercase;
  line-height:1.8;
}
.hero-sub i{margin:0 .55em;font-style:normal;color:var(--ink-26)}
.hero-sub span{white-space:nowrap}
.hero-sub .sep{white-space:normal}

.hero-lede{
  margin:clamp(14px,1.9vh,19px) 0 0;
  max-width:48ch;
  color:var(--text-dim);
  font-weight:300;
  font-size:clamp(14px,1.02vw,17px);
  line-height:1.66;
}

/* ---- the read row: the first screen already does the work ---- */
.hero-read{
  margin:clamp(21px,3vh,30px) 0 0;
  display:flex;
  align-items:stretch;
  gap:8px;
  width:min(644px,100%);
}
.hero-read input{
  flex:1 1 auto;
  min-width:0;
  background:var(--ink-4);
  border:1px solid var(--line);
  border-radius:0;
  color:var(--text);
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.02em;
  padding:16px 17px;
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.hero-read input::placeholder{color:var(--ink-34)}
.hero-read input:hover{border-color:var(--line-strong)}
.hero-read input:focus{outline:none;border-color:var(--accent);background:var(--ink-6)}
.hero-read input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.hero-read-btn{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--ink-90);
  border-radius:0;
  background:#fff;
  color:#000;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:0 24px;
  cursor:pointer;
  transition:transform .35s var(--ease-premium),background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
}
.hero-read-btn:hover{transform:translateY(-1px);background:var(--accent);border-color:var(--accent);color:#000}
.hero-read-btn:active{transform:translateY(0)}

.hero-read-hint{
  margin:10px 0 0;
  color:var(--text-dimmer);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.1em;
}

.hero-result{
  margin:18px 0 0;
  width:min(644px,100%);
  padding-top:15px;
  border-top:1px solid var(--line);
  text-align:left;
}
.hero-result .hr-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dimmer);
}
.hero-result .hr-route{
  margin:6px 0 0;color:var(--text);font-family:var(--display);font-weight:300;
  font-size:clamp(19px,1.6vw,24px);letter-spacing:-.01em;
}
.hero-result .hr-line{margin:8px 0 0;color:var(--text-dim);font-size:14px;line-height:1.6}
.hero-result .hr-line b{
  color:var(--text-dimmer);font-family:var(--mono);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;font-weight:400;margin-right:9px;
}
.hero-result .hr-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:13px}
.hero-result a.hr-go{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text);text-decoration:none;border-bottom:1px solid var(--line-strong);padding-bottom:4px;
}
.hero-result a.hr-go:hover{color:var(--accent);border-color:var(--accent)}

.hero-try{
  margin:12px 0 0;
  color:var(--text-dimmer);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.1em;
  line-height:1.9;
}
.hero-try-label{color:var(--ink-34);margin-right:2px}
.hero-try button{
  background:none;border:0;padding:0;color:var(--text-dim);font:inherit;letter-spacing:inherit;
  cursor:pointer;border-bottom:1px solid var(--line);
}
.hero-try button:hover{color:var(--accent);border-color:var(--accent)}
.hero-try i{margin:0 7px;font-style:normal;opacity:.45}

/* ---- right side: the live read, not a decorative panel ----
   The first screen should answer, not promise. This column is the same
   deterministic engine that runs further down the page: it fills as you type,
   in this browser, and it is styled as an instrument readout (hairline rows,
   mono keys, accent only on the value that matters). No card, no glass, no glow.
   ------------------------------------------------------------------------- */
.hero-readout{
  align-self:center;
  justify-self:end;
  width:100%;
  min-width:0;
  display:flex;
  flex-direction:column;
  padding:2px 0 2px 22px;
  border-left:1px solid var(--ink-8);
  /* No background, no border radius, no shadow: the radar is confined to the
     empty band under this column (see radar.js geometry + the canvas mask), so
     nothing has to be painted behind the text. Any fill here reads as a card,
     which this page forbids. */
  font-family:var(--mono);
}

.ro-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:11px;
  border-bottom:1px solid var(--line);
  font-size:9.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-46);
}
.ro-title{color:var(--ink-62)}
.ro-status{display:inline-flex;align-items:center;gap:7px;color:var(--ink-34);transition:color .3s var(--ease)}
.ro-status i{width:5px;height:5px;border-radius:50%;background:var(--ink-26);transition:background-color .3s var(--ease),box-shadow .3s var(--ease)}
.hero-readout.is-live .ro-status{color:var(--accent)}
.hero-readout.is-live .ro-status i{background:var(--accent);box-shadow:0 0 8px var(--acc-85)}

.ro-idle-line{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin:0;
  padding:10px 0;
  border-bottom:1px solid var(--ink-6);
  font-size:9.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-26);
}
.ro-idle-line b{color:var(--ink-26);font-weight:400}
.ro-idle-note{
  margin:13px 0 0;
  color:var(--ink-34);
  font-family:var(--display);
  font-size:12.5px;
  line-height:1.65;
  letter-spacing:0;
}

/* the filled state reuses .hero-result, re-styled for the readout column */
.hero-readout .hero-result{
  margin:0;
  width:100%;
  padding-top:0;
  border-top:0;
}
.hero-readout .hero-result .hr-head{display:none}

.ro-row{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:4px;
  padding:11px 0;
  border-bottom:1px solid var(--ink-6);
}
.ro-row span{
  color:var(--ink-26);
  font-size:8.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.ro-row b{
  color:var(--text);
  font-family:var(--display);
  font-size:15.5px;
  font-weight:300;
  letter-spacing:-.005em;
  line-height:1.3;
}
.ro-row.is-key b{color:var(--accent)}
.ro-row small{
  color:var(--ink-46);
  font-family:var(--display);
  font-size:12.5px;
  line-height:1.55;
  letter-spacing:0;
}

.hero-readout .hr-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-top:14px;
}
.hero-readout .hr-actions .text-link{
  background:none;border:0;border-bottom:1px solid var(--line-strong);
  padding:0 0 4px;cursor:pointer;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-62);
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.hero-readout .hr-actions .text-link:hover{color:var(--accent);border-color:var(--accent)}
.hero-readout a.hr-go{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text);text-decoration:none;border-bottom:1px solid var(--line-strong);padding-bottom:4px;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.hero-readout a.hr-go:hover{color:var(--accent);border-color:var(--accent)}

.ro-foot{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin:14px 0 0;
  padding-top:12px;
  border-top:1px solid var(--ink-6);
  color:var(--ink-26);
  font-size:8.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
}

/* ---- bottom legal rule ---- */
.hero-legal{
  position:relative;
  z-index:2;
  flex:0 0 auto;
  width:min(1120px,calc(100% - var(--gutter) * 2));
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
  padding:13px 0 15px;
  border-top:1px solid var(--line);
  color:var(--text-dimmer);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.hero-legal > span + span{color:var(--ink-34);text-align:right}
.hero-legal a{color:var(--ink-52);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:1px}
.hero-legal a:hover{color:var(--accent);border-color:var(--accent)}
.hero-legal b{color:var(--accent);font-weight:400;margin-right:8px}

/* ---- shorter laptops: keep the legal rule inside the first screen ---- */
@media(max-height:830px){
  .hero-panel h1{font-size:clamp(34px,4.4vw,68px)}
  .hero-body{padding-top:26px;padding-bottom:20px;gap:clamp(30px,4vw,56px)}
  .hero-eyebrow{margin-bottom:16px}
  .hero-sub{margin-top:12px}
  .hero-lede{margin-top:11px;font-size:14px}
  .hero-read{margin-top:18px}
  .hero-try{margin-top:9px}
}

/* ---- tablet: the ledger folds under the copy ---- */
@media(max-width:1080px){
  .hero-body{
    grid-template-columns:minmax(0,1fr);
    max-width:none;
    justify-items:start;
    align-content:center;
    row-gap:0;
  }
  .hero-panel{max-width:640px}
  .hero-panel h1{font-size:clamp(40px,7.4vw,86px)}
  /* tablet and phone: the read sits under the copy as a real block, so the
     first screen still shows what the tool does instead of empty black. */
  .hero-readout{
    display:flex;
    align-self:auto;
    justify-self:stretch;
    max-width:640px;
    margin-top:clamp(27px,4vh,40px);
    padding:16px 0 0;
    border-left:0;
    border-top:1px solid var(--line);
  }
}

/* ---- phones: one column, full-width read row, legal stacks ---- */
@media(max-width:760px){
  .hero-body{
    width:calc(100% - 44px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    padding:clamp(27px,5vh,40px) 0 clamp(19px,3.4vh,30px);
  }
  .hero-legal{width:calc(100% - 44px)}
  .hero-panel{max-width:100%}
  .hero-eyebrow{
    font-size:9.5px;letter-spacing:.14em;gap:9px;
    margin-bottom:18px;white-space:normal;
  }
  .hero-eyebrow-line{width:24px}
  .hero-panel h1{font-size:clamp(34px,10.2vw,56px);letter-spacing:-.028em}
  .hero-sub{margin-top:14px;font-size:8.5px;letter-spacing:.14em;line-height:1.9}
  .hero-lede{margin-top:12px;font-size:14px;line-height:1.64}
  .hero-read{margin-top:19px;flex-direction:column;gap:8px}
  .hero-read input{padding:14px 15px;font-size:12.5px;width:100%}
  .hero-read-btn{width:100%;height:46px;justify-content:center;padding:0 18px}
  .hero-read-hint{font-size:8.5px;line-height:1.7}
  .hero-result{margin-top:15px}
  .hero-try{margin-top:10px;font-size:8.5px;line-height:1.95}
  .hero-legal{
    flex-direction:column;align-items:flex-start;gap:5px;
    font-size:8.5px;letter-spacing:.08em;padding:11px 0 13px;
  }
  .hero-legal > span + span{text-align:left;line-height:1.7}
  .hero-legal b{margin-right:6px}
  .hero-frame{opacity:.4}
  /* Off on a phone: the readout column and the copy already fill the screen,
     and the page's own rule keeps heavy canvas work off 390px. */
  .hero-radar{display:none}
}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* ---------- services ---------- */

.services,
.diagnostic-panel,
.faq{
  display:grid;
  grid-template-columns:minmax(0,36%) minmax(0,1fr);
  gap:clamp(30px,7vw,86px);
  padding:clamp(68px,10vh,86px) 0;
}

.section-intro{min-width:0}

.service-list{border-top:1px solid var(--line)}

.service-row{
  display:grid;
  grid-template-columns:40px minmax(0,1fr) 24px;
  align-items:start;
  gap:20px;
  padding:26px 0;
  border-bottom:1px solid var(--line);
  color:inherit;
  text-decoration:none;
  transition:padding-left .3s var(--ease),background-color .3s var(--ease);
}

.service-row:hover{padding-left:12px}

.service-index,.service-arrow{
  color:var(--accent);
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.1em;
  padding-top:6px;
}

.service-arrow{transition:transform .3s var(--ease)}
.service-row:hover .service-arrow{transform:translate(3px,-3px)}

.service-row h3{
  font-size:clamp(19px,1.7vw,24px);
  line-height:1.2;
  margin:0 0 8px;
}

.service-row p{
  color:var(--text-dim);
  font-size:14px;
  line-height:1.62;
  margin:0;
  max-width:52ch;
}

/* ---------- proof strip ---------- */

.proof-strip{
  display:grid;
  grid-template-columns:minmax(0,36%) minmax(0,1fr);
  gap:clamp(30px,7vw,86px);
  padding:clamp(48px,7vh,86px) 0 clamp(68px,10vh,86px);
  border-top:1px solid var(--line);
}

.proof-strip h2{margin-top:18px}

.proof-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.proof-grid article{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:20px 18px 18px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,var(--ink-6),var(--ink-2));
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}

.proof-grid article:hover{border-color:var(--acc-40);transform:translateY(-2px)}

.proof-grid span{
  color:var(--accent);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.12em;
}

.proof-grid h3{
  font-size:21px;
  margin:34px 0 8px;
}

.proof-grid p{
  color:var(--text-dim);
  font-size:12.5px;
  line-height:1.6;
  margin:0;
}

/* ---------- diagnostic ---------- */

.diagnostic-heading{position:sticky;top:104px;align-self:start}

.diagnostic-card{
  display:flex;
  flex-direction:column;
  padding:26px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,var(--ink-4),var(--ink-2));
  border-radius:2px;
  min-height:0;
}

.diagnostic-card:has([data-question-step]:not([hidden])){min-height:520px}

.diagnostic-top,
.diagnostic-bottom{
  display:flex;
  justify-content:space-between;
  gap:16px;
  color:var(--text-dim);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.diagnostic-kicker{color:var(--text-dim)}
.progress-text{color:var(--accent)}

.progress-track{
  height:2px;
  margin:18px 0 34px;
  background:var(--line-soft);
}

.progress-track span{
  display:block;
  width:25%;
  height:100%;
  background:var(--accent);
  transition:width .35s var(--ease);
}

.input-step{display:flex;flex-direction:column}

.input-step label{
  margin-bottom:14px;
  color:var(--accent);
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.input-row{display:flex;gap:10px}

.input-row input{
  flex:1 1 auto;
  width:100%;
  min-width:0;
  height:50px;
  padding:0 14px;
  border:1px solid var(--ink-18);
  border-radius:2px;
  background:var(--ink-2);
  color:var(--text);
  font-family:var(--display);
  font-size:14px;
}

.input-row input::placeholder{color:var(--ink-46);opacity:1}

.input-row input:focus{
  border-color:var(--accent);
  background:var(--ink-6);
  outline:0;
  box-shadow:0 0 0 3px var(--acc-16);
}

.input-row .button{flex:0 0 auto;height:50px;padding:0 18px}

.input-hint{
  margin-top:12px;
  color:var(--text-dim);
  font-size:11.5px;
  line-height:1.55;
}

.intake-promises{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:30px;
  color:var(--text-dimmer);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.intake-promises span{
  padding-top:10px;
  border-top:1px solid var(--line);
}

.question-wrap{flex:1;min-width:0}

.question-index{
  margin-bottom:14px;
  color:var(--text-dimmer);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.question-wrap h3{
  font-size:clamp(27px,3vw,40px);
  line-height:1.08;
  margin:0 0 26px;
}

.answers{display:grid;gap:10px}

.answer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:15px 16px;
  border:1px solid var(--line);
  border-radius:2px;
  background:var(--ink-2);
  color:var(--text);
  font-family:var(--display);
  font-size:14px;
  line-height:1.4;
  text-align:left;
  cursor:pointer;
  transition:border-color .2s var(--ease),background-color .2s var(--ease),transform .2s var(--ease);
}

.answer span{
  flex:0 0 auto;
  color:var(--text-dimmer);
  font-family:var(--mono);
  font-size:10.5px;
}

.answer:hover,
.answer:focus-visible{
  border-color:var(--accent);
  background:var(--acc-8);
  transform:translateX(3px);
  outline:0;
}

.diagnostic-bottom{
  margin-top:22px;
  padding-top:16px;
  border-top:1px solid var(--line-soft);
  align-items:center;
}

.back-button{
  border:0;
  background:none;
  color:var(--text-dim);
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.08em;
  padding:0;
  cursor:pointer;
  transition:color .2s var(--ease);
}

.back-button:hover:not(:disabled){color:var(--accent)}
.back-button:disabled{opacity:.35;cursor:default}

.keyboard-note{font-size:9.5px}

/* result state */

.result{min-width:0}

.result-badge{
  display:inline-block;
  margin-bottom:14px;
  color:var(--accent);
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.result h3{
  font-size:clamp(27px,3.3vw,40px);
  line-height:1.06;
  margin:0 0 16px;
}

.result > p{
  color:var(--text-dim);
  font-size:14px;
  line-height:1.7;
  max-width:60ch;
}

.result-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px;
  margin-top:24px;
}

.result-actions .button{padding:13px 16px;font-size:12.5px}

/* ---------- faq ---------- */

.faq{border-top:1px solid var(--line)}

.faq-list{min-width:0}

.faq-list details{border-bottom:1px solid var(--line);padding:19px 0}

.faq-list summary{
  cursor:pointer;
  font-family:var(--display);
  font-size:19px;
  line-height:1.3;
  list-style:none;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}

.faq-list summary::-webkit-details-marker{display:none}

.faq-list summary::after{
  content:"+";
  flex:0 0 auto;
  color:var(--accent);
  font-family:var(--mono);
  font-size:15.5px;
  line-height:1.4;
  transition:transform .25s var(--ease);
}

.faq-list details[open] summary::after{transform:rotate(45deg)}

.faq-list p{
  margin-top:12px;
  max-width:64ch;
  color:var(--text-dim);
  font-size:14px;
  line-height:1.7;
}

/* ---------- footer ---------- */

.footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:26px 0 38px;
  border-top:1px solid var(--line);
  color:var(--text-dimmer);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.footer a{color:var(--accent);text-decoration:none}
.footer a:hover{text-decoration:underline;text-underline-offset:3px}

.contact-link{
  padding-bottom:3px;
  border-bottom:1px solid var(--line);
}

/* ---------- service pages ---------- */

.service-page{padding:clamp(68px,11vh,86px) 0 clamp(56px,8vh,86px)}

.service-page h1{max-width:16ch;font-size:clamp(34px,5vw,68px)}

.service-page > .hero-lede{margin:26px 0 34px;font-size:clamp(15.5px,1.3vw,17px)}

.service-content{
  margin-top:clamp(56px,9vh,86px);
  padding-top:clamp(40px,6vh,68px);
  border-top:1px solid var(--line);
  max-width:980px;
}

.service-content h2{font-size:clamp(30px,3.4vw,48px);margin:clamp(40px,6vh,68px) 0 26px}
.service-content h2:first-child{margin-top:0}

.service-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.service-grid article{padding-top:16px;border-top:1px solid var(--line-soft)}

.service-grid b{display:block;margin-bottom:8px;font-family:var(--display);font-size:19px;font-weight:400}
.service-grid p{color:var(--text-dim);font-size:14px;line-height:1.65}

.service-body{max-width:62ch;margin:0 0 4px;color:var(--text-dim);font-size:14px;line-height:1.75}

.service-list-check{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:9px;
  max-width:70ch;
}

.service-list-check li{
  position:relative;
  padding-left:20px;
  color:var(--text-dim);
  font-size:14px;
  line-height:1.65;
}

.service-list-check li::before{
  content:"→";
  position:absolute;
  left:0;
  color:var(--accent);
  font-family:var(--mono);
  font-size:10.5px;
  line-height:1.9;
}

.service-list-muted li{color:var(--text-dimmer)}

.service-content ul{
  margin:0;
  padding-left:18px;
  color:var(--text-dim);
  font-size:14px;
  line-height:1.9;
}

.workflow-line{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-bottom:34px;
  padding:18px 20px;
  border:1px solid var(--line);
  background:#000000;
  color:var(--text);
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.workflow-line i{color:var(--accent);font-style:normal}

.cta-band{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  margin-top:clamp(48px,7vh,86px);
  padding:clamp(24px,4vh,34px);
  border:1px solid var(--line);
  background:linear-gradient(120deg,var(--ink-4),var(--ink-2));
}

.cta-band h2{font-size:clamp(24px,2.6vw,34px)}
.cta-band p{margin-top:8px;color:var(--text-dim);font-size:14px}

.service-next{
  display:flex;
  flex-wrap:wrap;
  gap:22px;
  margin-top:26px;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* ---------- responsive ---------- */

/* Below 1100px the right-edge index would crowd the copy, so it goes away. */
/* hero responsive rules live with the hero above */

@media(max-width:760px){
  :root{--gutter:18px;--topbar-h:60px}

  body{font-size:15.5px}

  .topbar{height:60px}

  .topbar-meta{display:none}

  .brand{font-size:15.5px}

  .header-link{font-size:9.5px}

  h1{font-size:clamp(40px,12vw,56px);margin:20px 0 20px}

  h2{font-size:clamp(30px,8.4vw,40px)}







  .service-row{grid-template-columns:26px minmax(0,1fr) 16px;gap:12px;padding:20px 0}

  .service-row h3{font-size:19px}

  .service-row p{font-size:12.5px;line-height:1.55}

  .service-index,.service-arrow{font-size:9.5px;padding-top:4px}

  .proof-grid{grid-template-columns:minmax(0,1fr);gap:8px}

  .proof-grid article{padding:15px}

  .proof-grid h3{margin:12px 0 6px;font-size:19px}

  .proof-grid p{font-size:12.5px}

  .diagnostic-card{padding:16px}

  .diagnostic-card:has([data-question-step]:not([hidden])){min-height:0}

  .input-row{flex-direction:column;gap:8px}

  .input-row input,.input-row .button{height:46px;width:100%}

  .input-hint{font-size:10.5px;line-height:1.5}

  .intake-promises{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:20px;font-size:8.5px}

  .question-wrap h3{font-size:clamp(24px,6.4vw,30px);margin-bottom:20px}

  .answer{padding:13px;font-size:12.5px}

  .progress-track{margin:14px 0 24px}

  .result-actions{gap:14px}

  .result-actions .button{width:100%}

  .result-actions .text-link{font-size:11.5px}

  .faq-list summary{font-size:17px}

  .faq-list p{font-size:12.5px}

  .footer{flex-wrap:wrap;gap:10px;font-size:8.5px}

  .footer span:nth-child(2){display:none}

  .service-page{padding:40px 0 56px}

  .service-page h1{font-size:clamp(34px,10.6vw,48px);max-width:100%}

  .service-grid{grid-template-columns:minmax(0,1fr);gap:20px}

  .service-content h2{margin:84px 0 24px;font-size:clamp(27px,7.6vw,34px)}
  .service-content h2:first-child{margin-top:0}
  .service-body{font-size:14px;line-height:1.72}
  .service-list-check li{font-size:14px}

  .cta-band{flex-direction:column;align-items:flex-start;gap:16px}

  .cta-band .button{width:100%}

  .workflow-line{font-size:9.5px;gap:8px;padding:14px}

}

/* ---------- motion ---------- */

@keyframes rise{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}


@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}

  .hero-panel > *,
  .hero-legal,
  *{transition-duration:.01ms!important}
}

/* ---------- sample starts ---------- */

.samples{
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid var(--line-soft);
}

.samples-label{
  margin:0 0 10px;
  color:var(--text-dimmer);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.sample{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  width:100%;
  margin-bottom:6px;
  padding:9px 11px;
  border:1px solid var(--line-soft);
  border-radius:2px;
  background:var(--ink-2);
  color:var(--text-dim);
  font-family:var(--display);
  font-size:11.5px;
  line-height:1.45;
  text-align:left;
  cursor:pointer;
  transition:border-color .2s var(--ease),color .2s var(--ease),background-color .2s var(--ease);
}

.sample span{
  flex:0 0 auto;
  color:var(--text-dimmer);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.sample:hover,.sample:focus-visible{
  border-color:var(--acc-50);
  background:var(--acc-5);
  color:var(--text);
  outline:0;
}

@media(max-width:760px){
  .samples{margin-top:14px;padding-top:12px}
  .sample{font-size:11.5px;padding:9px 10px}
  .sample span{display:none}
}

/* Desktop: the intake card sizes to its content instead of stretching to the copy column. */
@media(min-width:901px){
  .diagnostic-card{align-self:start}
}

/* The sample starts are scaffolding for the empty state only. */
.diagnostic-card:has(.instant:not([hidden])) .samples{display:none}
.diagnostic-card:has(.result-step:not([hidden])) .samples{display:none}
.diagnostic-card:has([data-question-step]:not([hidden])) .samples{display:none}

/* Sticky header must never cover the top of the diagnostic card when we auto-scroll to it. */
.diagnostic-card,
.diagnostic-card .instant,
.diagnostic-card .result-step,
.diagnostic-card .question-step,
.diagnostic-card .samples{scroll-margin-top:96px}

@media(max-width:760px){
  .diagnostic-card,
  .diagnostic-card .instant,
  .diagnostic-card .result-step,
  .diagnostic-card .question-step,
  .diagnostic-card .samples{scroll-margin-top:76px}
}

/* ---------- polish: skip link + touch targets ---------- */

/* Keyboard users get a visible way past the sticky bar. Hidden until focused. */
.skip-link{
  position:fixed;
  left:16px;
  top:-80px;
  z-index:20;
  display:inline-flex;
  align-items:center;
  height:36px;
  padding:0 16px;
  border-radius:2px;
  background:var(--accent);
  color:#000000;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  box-shadow:0 10px 26px rgba(0,0,0,.6);
  transition:top .16s var(--ease);
}

.skip-link:focus,
.skip-link:focus-visible{
  top:84px;             /* below the 72px sticky bar, so it never covers the brand */
  outline:2px solid #000000;
  outline-offset:2px;
}

/* Touch targets: 44px comfortable height on phones, desktop untouched. */
@media(max-width:760px){
  .header-link,
  .brand,
  .footer a,
  .service-next a,
  .text-link,
  .sample,
  .back-button{
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }

  .brand{gap:8px}
  .header-link{padding:0 2px}
  .footer{align-items:flex-start;row-gap:0}
  .footer a{padding:0}
  .faq-list summary{align-items:center;min-height:48px;padding:10px 0}
  .faq-list details{padding:6px 0}
  .result-actions{gap:6px}
  .result-actions .text-link{min-height:44px}
}

/* A read-only note for the rare visitor without JavaScript. Honest, not a dead end. */
.nojs{
  margin:16px 0 0;
  padding:12px 14px;
  border:1px solid var(--line);
  border-left:2px solid var(--accent);
  color:var(--text-dim);
  font-size:12.5px;
  line-height:1.6;
}

.nojs a{color:var(--accent)}

/* Inline links inside body copy still need a real tap height on phones. */
@media(max-width:760px){
  .faq-list p a,
  .nojs a{
    display:inline-block;
    padding:6px 0;
    min-height:32px;
  }
}

/* Mobile bar is shorter, so the revealed skip chip sits a little higher. */
@media(max-width:760px){
  .skip-link:focus,
  .skip-link:focus-visible{top:72px}
}

/* Desktop: small inline links get a full 24px hit area without changing the look. */
.header-link{display:inline-flex;align-items:center;min-height:24px}
.footer a{display:inline-flex;align-items:center;min-height:24px}
.faq-list p a{display:inline-block;padding:3px 0}

/* ==========================================================================
   Page check (/check.html)
   ========================================================================== */

.visually-hidden{
  position:absolute;
  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;
}

.check-page{padding:clamp(56px,9vh,86px) 0 clamp(56px,8vh,86px)}
.check-page h1{max-width:15ch;font-size:clamp(40px,5.4vw,68px)}
.check-page > .hero-lede{margin:24px 0 0;max-width:58ch}

.check-form{
  margin-top:clamp(30px,5vh,48px);
  padding:clamp(19px,3vh,27px);
  border:1px solid var(--line);
  border-radius:2px;
  background:linear-gradient(140deg,var(--ink-4),var(--ink-2));
}

.check-form label{
  display:block;
  margin-bottom:10px;
  color:var(--text-dim);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.check-samples{margin-top:22px;padding-top:16px;border-top:1px solid var(--line-soft)}
.check-samples .samples-label{
  margin:0 0 10px;
  color:var(--text-dimmer);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* ---------- report ---------- */

.check-result{margin-top:clamp(34px,6vh,56px);scroll-margin-top:96px}

.check-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding-bottom:20px;
  border-bottom:1px solid var(--line);
}

.check-title{
  margin:10px 0 6px;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(24px,3vw,40px);
  line-height:1.18;
  letter-spacing:-.012em;
  max-width:34ch;
}

.check-url{margin:0;font-size:12.5px;color:var(--text-dim);word-break:break-all}
.check-url a{color:var(--text-dim);text-decoration:none;border-bottom:1px solid var(--line)}
.check-url a:hover{color:var(--accent);border-color:var(--accent)}

.check-score{display:flex;gap:18px;flex:0 0 auto}
.check-score span{
  display:flex;
  flex-direction:column;
  gap:2px;
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-dimmer);
}
.check-score b{font-family:var(--display);font-size:27px;font-weight:400;letter-spacing:0}
.score-pass b{color:var(--accent)}
.score-warn b{color:var(--warm-ink)}
.score-fail b{color:var(--fail-ink)}

.check-table{
  width:100%;
  margin-top:24px;
  border-collapse:collapse;
  font-size:14px;
}
.check-table thead th{
  padding:0 0 10px;
  border-bottom:1px solid var(--line);
  color:var(--text-dimmer);
  font-family:var(--mono);
  font-size:8.5px;
  font-weight:400;
  letter-spacing:.14em;
  text-align:left;
  text-transform:uppercase;
}
.check-table thead th:nth-child(2){width:82px}
.check-table th[scope=row],
.check-table td{
  padding:12px 0;
  border-bottom:1px solid var(--line-soft);
  text-align:left;
  vertical-align:top;
}
.check-table th[scope=row]{
  font-weight:400;
  color:var(--text);
  padding-right:18px;
  width:36%;
}
.check-detail{color:var(--text-dim);line-height:1.55}
.check-dot{
  display:inline-block;
  width:6px;height:6px;
  margin-right:9px;
  border-radius:50%;
  transform:translateY(-2px);
}
.check-pass .check-dot{background:var(--accent)}
.check-warn .check-dot{background:var(--warm-ink)}
.check-fail .check-dot{background:var(--fail-ink)}
.check-state{
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.check-pass .check-state{color:var(--accent)}
.check-warn .check-state{color:var(--warm-ink)}
.check-fail .check-state{color:var(--fail-ink)}

.check-facts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(104px,1fr));
  gap:1px;
  margin-top:24px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
}
.check-facts div{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:12px 14px;
  background:var(--bg);
}
.check-facts span{
  color:var(--text-dimmer);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.check-facts b{font-family:var(--display);font-weight:400;font-size:17px;letter-spacing:0}
.check-facts b.narrow{font-size:12.5px;line-height:1.35}

.check-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 22px;
  margin-top:26px;
}
.check-actions .button{padding:13px 18px;font-size:12.5px}
.check-actions .text-link{font-size:12.5px}

.check-limits{margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.check-limits h3{
  margin:0 0 10px;
  font-family:var(--mono);
  font-size:9.5px;
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-dimmer);
}
.check-limits ul{margin:0;padding-left:17px;color:var(--text-dim);font-size:12.5px;line-height:1.75;max-width:76ch}

.check-notes{margin-top:clamp(48px,8vh,86px);padding-top:clamp(30px,5vh,48px);border-top:1px solid var(--line)}
.check-notes > h2{font-size:clamp(24px,3vw,34px);margin:0 0 26px}

@media(max-width:760px){
  .check-page{padding:36px 0 52px}
  .check-form{padding:16px}
  .check-head{flex-direction:column;gap:16px}
  .check-score{gap:22px}
  .check-table{font-size:12.5px}
  .check-table thead{display:none}
  .check-table th[scope=row],
  .check-table td{display:block;width:auto;padding:0}
  .check-table th[scope=row]{padding-top:14px;padding-right:0;font-size:14px}
  .check-table tr{border-bottom:1px solid var(--line-soft);padding-bottom:12px}
  .check-table tbody tr:last-child{border-bottom:0}
  .check-table td{padding-bottom:2px}
  .check-table td:last-child{padding-bottom:0}
  .check-detail{font-size:12.5px}
  .check-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .check-actions .button{width:100%}
  .check-actions{gap:12px}
  .check-actions .text-link{min-height:44px;align-items:center}
}

/* ---------- top bar: two links instead of one ---------- */

.topbar-links{
  display:flex;
  align-items:center;
  gap:20px;
  flex:0 0 auto;
}

.topbar-links .header-link + .header-link{
  padding-left:20px;
  border-left:1px solid var(--line-soft);
}

@media(max-width:760px){
  .topbar-links{gap:0}
  .topbar-links .header-link + .header-link{
    padding-left:10px;
    margin-left:10px;
  }
  .topbar-links .header-link{
    font-size:8.5px;
    letter-spacing:.06em;
  }
}

.nav-short{display:none}

@media(max-width:400px){
  .nav-long{display:none}
  .nav-short{display:inline}
  .topbar{padding:0 14px;gap:10px}
  .topbar-links{gap:0}
  .topbar-links .header-link + .header-link{padding-left:8px;margin-left:8px}
}

/* ---------- home: free page check band ---------- */

.free-check{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,6vw,86px);
  align-items:start;
  padding:clamp(56px,9vh,86px) 0;
  border-top:1px solid var(--line);
}

.free-check h2{font-size:clamp(30px,3.8vw,48px);margin:18px 0 0}
.free-check-copy .section-note{max-width:46ch}

.free-check-card{
  padding:clamp(19px,3vh,27px);
  border:1px solid var(--line);
  border-radius:2px;
  background:linear-gradient(140deg,var(--ink-4),var(--ink-2));
}

.free-check-form label{
  display:block;
  margin-bottom:10px;
  color:var(--text-dim);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.free-check-form .input-row{display:flex;gap:10px}
.free-check-form .input-row input{
  flex:1 1 auto;
  min-width:0;
  height:50px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:2px;
  background:var(--ink-2);
  color:var(--text);
  font-family:var(--display);
  font-size:14px;
}
.free-check-form .input-row input::placeholder{color:var(--ink-46);opacity:1}
.free-check-form .input-row input:focus{
  outline:0;
  border-color:var(--acc-55);
  box-shadow:0 0 0 3px var(--acc-12);
}
.free-check-form .input-row .button{flex:0 0 auto;height:50px;padding:0 18px}

.free-check-list{
  margin:20px 0 18px;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-dimmer);
}
.free-check-list li{position:relative;padding-left:18px}
.free-check-list li::before{
  content:"→";
  position:absolute;
  left:0;
  color:var(--accent);
}

@media(max-width:900px){
  .free-check{grid-template-columns:minmax(0,1fr);gap:28px}
}

@media(max-width:760px){
  .free-check{padding:40px 0}
  .free-check-card{padding:16px}
  .free-check-form .input-row{flex-direction:column}
  .free-check-form .input-row input,
  .free-check-form .input-row .button{height:46px;width:100%}
}


/* ==========================================================================
   Pass 2 — morphostech.com visual language (2026-10-18)
   Source: live site tokens + inline home sheet (work/live-home-inline.css).
   Nothing here introduces a colour, font or easing that is not in that sheet.
   ========================================================================== */

body{font-weight:300;font-size:clamp(15.5px,1.05vw,17px);line-height:1.7}
p{margin:0}

/* ---- type: light display weights, tight tracking, accent only on <em> ---- */
h1,h2,h3,h4,.check-title,.result h3,.instant-title,.result-deliverable{
  font-family:var(--display);font-weight:200;
}
h2,h3,h4,.check-title,.result h3,.instant-title,.result-deliverable{font-weight:300}
h1{font-size:clamp(40px,6.2vw,86px);line-height:.94;letter-spacing:-.028em;margin:26px 0 22px}
h2{font-size:clamp(27px,3.2vw,48px);line-height:1.06;letter-spacing:-.018em;margin:0}
h3{letter-spacing:-.01em}
h1 em,h2 em,h3 em{font-style:normal;color:var(--accent)}

/* ---- eyebrow: mono, wide tracking, hairline ---- */
.eyebrow{color:var(--text-dimmer);font-family:var(--mono);font-size:11.5px;letter-spacing:.18em}
.eyebrow::before{flex:0 0 24px;background:var(--accent);opacity:.75}

/* ---- chrome: wordmark, not a badge ---- */
.topbar{height:var(--topbar-h);background:rgba(0,0,0,.72);border-bottom:1px solid var(--line)}
.brand{
  gap:10px;font-family:var(--display);font-weight:300;font-size:clamp(15.5px,1.4vw,19px);
  letter-spacing:.16em;text-transform:uppercase;line-height:1;
}
.brand-mark{
  width:6px;height:6px;border:0;border-radius:50%;background:var(--accent);
  font-size:0;line-height:0;box-shadow:0 0 10px var(--accent);
}
.topbar-meta{color:var(--text-dimmer);font-family:var(--mono);font-size:11.5px;letter-spacing:.18em}
.status-dot{background:var(--accent);box-shadow:0 0 0 3px var(--acc-16)}
.header-link{
  color:var(--text);font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;padding-bottom:0;border-bottom:0;transition:color .25s var(--ease)
}
.header-link:hover{color:var(--text-dim);border-bottom-color:transparent}

/* ---- buttons: white pill (doc-btn) + quiet mono link ---- */
.button{
  text-decoration:none;
  border-radius:999px;padding:16px 30px;font-family:var(--mono);font-weight:400;
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;gap:12px;
  transition:transform .4s var(--ease-premium),opacity .4s var(--ease-premium),background-color .25s var(--ease),border-color .25s var(--ease)
}
.button-primary{background:var(--text);color:#000}
.button-primary:hover{transform:translateY(-2px);opacity:.92;box-shadow:none}
.button-primary:active{transform:translateY(0)}
.text-link{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-dim);border-bottom:1px solid var(--line-strong);padding-bottom:4px
}
.text-link:hover{color:var(--text);border-color:var(--text)}


/* ---- ledger rows: same hover grammar as .ledger .row ---- */
.service-row{padding:24px 0;transition:background .4s var(--ease-premium),padding-left .4s var(--ease-premium)}
.service-row:hover{background:var(--ink-4);padding-left:16px}
.service-index,.service-arrow{color:var(--accent);font-family:var(--mono);font-size:11.5px;letter-spacing:.18em}
.service-row h3{font-weight:300}
.service-row p{color:var(--text-dim)}

/* ---- facts band (ascara count-in + grow-up on the rules) ---- */
.facts{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;
  border-top:1px solid var(--line);padding-top:0;margin:0 auto
}
@media(min-width:760px){.facts{grid-template-columns:repeat(4,minmax(0,1fr))}}
.facts div{
  border-left:1px solid var(--line);padding:22px 0 22px 20px;transform-origin:0 50%
}
.facts div:first-child{border-left:0;padding-left:0}
.facts b{
  display:block;font-weight:200;font-size:clamp(34px,3.6vw,56px);line-height:1;
  letter-spacing:-.02em;color:var(--text)
}
.facts span{
  display:block;margin-top:12px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-dimmer)
}

/* ---- proof cards / panels: hairline on black, no green wash ---- */
.proof-grid article{background:var(--fill-ghost);border-color:var(--line)}
.proof-grid article:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.proof-grid span{color:var(--accent);font-family:var(--mono);font-size:11.5px;letter-spacing:.18em}
.proof-grid h3{font-weight:300}
.proof-grid p{color:var(--text-dim)}

/* ---- diagnostic card: glass on black ---- */
.diagnostic-card{
  background:linear-gradient(180deg,var(--ink-4),var(--ink-2));
  border-color:var(--line);border-radius:0
}
.diagnostic-top,.diagnostic-bottom{color:var(--text-dimmer);font-size:11.5px;letter-spacing:.18em}
.progress-text{color:var(--accent)}
.progress-track{background:var(--ink-10)}
.progress-track span{background:var(--accent);transition:width .4s var(--ease-premium)}
.input-step label,.free-check-form label,.check-form label{color:var(--text-dimmer);font-family:var(--mono);font-size:11.5px;letter-spacing:.18em}
.input-row input{
  border:1px solid var(--line);border-radius:0;background:var(--fill-ghost);color:var(--text);
  font-family:var(--mono);font-size:12.5px;letter-spacing:.06em
}
.input-row input::placeholder{color:var(--text-dimmer)}
.input-row input:focus{border-color:var(--ink-56);background:var(--ink-8);box-shadow:none;outline:0}
.input-hint{color:var(--text-dimmer);font-size:11.5px}
.intake-promises{color:var(--text-dimmer);font-size:10.5px;letter-spacing:.12em}
.answer{border-radius:0;background:var(--fill-ghost);border-color:var(--line);font-weight:300}
.answer:hover,.answer:focus-visible{border-color:var(--line-strong);background:var(--ink-8);transform:translateX(3px)}
.answer span{color:var(--text-dimmer)}
.back-button,.keyboard-note{color:var(--text-dimmer)}
.result-badge,.instant-route{color:var(--accent);font-size:11.5px;letter-spacing:.18em}
.instant-title{font-weight:300}
.instant-line{color:var(--text-dim)}
.instant-line b{color:var(--text);font-family:var(--mono);font-size:10.5px;letter-spacing:.16em}
.confidence-track{background:var(--ink-10)}
.confidence-track span{background:linear-gradient(90deg,var(--acc-40),var(--accent))}
.question-wrap h3{font-weight:300;letter-spacing:-.018em}

/* ---- faq rows: the studio's + / – grammar ---- */
.faq-list summary{font-family:var(--display);font-weight:300;font-size:clamp(17px,1.35vw,21px);letter-spacing:-.006em}
.faq-list summary::after{color:var(--text-dimmer);font-family:var(--mono);font-size:15.5px;transition:transform .45s var(--ease-premium),color .3s var(--ease)}
.faq-list details[open] summary::after{transform:rotate(45deg);color:var(--accent)}
.faq-list summary:hover{color:var(--accent)}
.faq-list p{color:var(--text-dim);font-weight:300}

/* ---- free check band + page check panel ---- */
.free-check-card,.check-form{
  border-radius:0;border-color:var(--line);
  background:linear-gradient(160deg,var(--ink-6),var(--ink-2))
}
.free-check-form .input-row input{
  border-radius:0;border-color:var(--line);background:var(--fill-ghost);color:var(--text);
  font-family:var(--mono);font-size:12.5px
}
.free-check-form .input-row input::placeholder{color:var(--text-dimmer)}
.free-check-form .input-row input:focus{border-color:var(--ink-56);box-shadow:none}
.free-check-list{color:var(--text-dimmer);font-size:10.5px;letter-spacing:.14em}
.free-check-list li::before{color:var(--accent)}
.check-title{font-weight:300}
.check-score b{font-family:var(--display);font-weight:200}
.score-pass b,.check-pass .check-state{color:var(--accent)}
.check-pass .check-dot{background:var(--accent)}
.check-facts{background:var(--line);border-color:var(--line)}
.check-facts div{background:#000}
.check-facts b{font-family:var(--display);font-weight:300}
.check-table thead th,.check-facts span,.check-state{letter-spacing:.16em}
.check-table th[scope=row]{color:var(--text);font-weight:300}
.check-detail{color:var(--text-dim)}
.check-limits ul{color:var(--text-dim)}

/* ---- service inner pages ---- */
.service-content h2{font-weight:300;letter-spacing:-.018em}
.service-grid b{font-family:var(--display);font-weight:300;font-size:19px}
.service-grid p,.service-body,.service-list-check li{color:var(--text-dim)}
.service-list-check li::before{color:var(--accent)}
.workflow-line{background:var(--fill-ghost);border-color:var(--line);color:var(--text);font-size:11.5px;letter-spacing:.14em}
.workflow-line i{color:var(--accent)}
.cta-band{background:var(--fill-ghost);border-color:var(--line)}
.service-page h1{font-weight:200}
.service-next{font-size:11.5px;letter-spacing:.16em}

/* ---- footer ---- */
.footer{color:var(--text-dimmer);font-family:var(--mono);font-size:11.5px;letter-spacing:.14em}
.footer a{color:var(--text-dim)}
.footer a:hover{color:var(--text)}
.contact-link{border-bottom-color:var(--line-strong)}

/* ---- skip link + sample focus rings (a11y) ---- */
.skip-link{background:var(--text);color:#000;border-radius:0}
.sample{border-radius:0;background:var(--fill-ghost);border-color:var(--line);color:var(--text-dim)}
.sample:hover{border-color:var(--line-strong);background:var(--ink-8);color:var(--text)}
.sample:focus-visible{border-color:var(--text);background:var(--ink-8);color:var(--text);outline:2px solid var(--accent);outline-offset:2px}
.samples-label{color:var(--text-dimmer);font-size:10.5px;letter-spacing:.16em}
.nojs{border-left:2px solid var(--accent);color:var(--text-dim)}
.nojs a{color:var(--accent)}

/* ==========================================================================
   Scroll reveal — adopted from the studio sheet (.rv / --i stagger)
   Entry: Lead Funnel (getDelay, stagger .075) + Deep Neural Interface (easeOutExpo
   cubic-bezier(.16,1,.3,1), clip inset). Full prompts in design/framesbase-prompts/.
   Progressive enhancement: hidden only once JS marks html.rv-ready.
   ========================================================================== */
html.rv-ready .rv{opacity:0;transform:translateY(22px);
  transition:opacity .6s var(--ease-premium),transform .9s var(--ease-premium);
  transition-delay:var(--i,0ms)}
html.rv-ready .rv.in{opacity:1;transform:none}
html.rv-ready .rv-clip{opacity:0;clip-path:inset(0 0 100% 0);transform:none;
  transition:opacity .4s linear,clip-path .78s cubic-bezier(.65,0,.35,1);
  transition-delay:var(--i,0ms)}
html.rv-ready .rv-clip.in{opacity:1;clip-path:inset(0 0 0 0)}
@keyframes countIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes growUp{from{transform:scaleY(0)}to{transform:scaleY(1)}}
html.rv-ready .facts.rv{opacity:1;transform:none}
html.rv-ready .facts .fx-item{opacity:1}
html.rv-ready .facts.in .fx-item{
  animation:growUp .7s var(--ease-premium) both,countIn .5s var(--ease-premium) both;
  animation-delay:calc(var(--fd,0ms) + 60ms),calc(var(--fd,0ms) + 60ms)
}
html.rv-ready .facts .fx-item:nth-child(1){--fd:0ms}
html.rv-ready .facts .fx-item:nth-child(2){--fd:75ms}
html.rv-ready .facts .fx-item:nth-child(3){--fd:150ms}
html.rv-ready .facts .fx-item:nth-child(4){--fd:225ms}

@media(prefers-reduced-motion:reduce){
  html.rv-ready .rv,
  html.rv-ready .rv-clip{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  html.rv-ready .facts.in .fx-item{animation:none!important}
}


/* ==========================================================================
   Contact band — the studio's #contact anatomy
   (copy + CTA row + industry line on the left, <details> answers on the right)
   ========================================================================== */
.contact-band{
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-8);
  padding:var(--sp-9) 0 var(--sp-8);border-top:1px solid var(--line)
}
@media(min-width:1000px){
  .contact-band{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,6vw,86px)}
}
.contact-copy{min-width:0}
.contact-copy h2{margin:18px 0 0;max-width:none}
.contact-lede{
  margin:var(--sp-5) 0 0;max-width:52ch;color:var(--text-dim);
  font-weight:300;font-size:clamp(15.5px,1.05vw,17px);line-height:1.7
}
.contact-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-5);margin-top:var(--sp-7)}
.referral{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-dimmer);text-decoration:none;border-bottom:1px solid transparent;
  transition:color .3s var(--ease),border-color .3s var(--ease)
}
.referral:hover{color:var(--text-dim);border-color:var(--line-strong)}
.contact-sectors{
  display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-5);align-items:baseline;
  margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--line);
  color:var(--text-dimmer);font-family:var(--mono);font-size:11.5px;letter-spacing:.14em
}
.contact-sectors a{color:var(--text-dim);text-decoration:none;transition:color .3s var(--ease)}
.contact-sectors a:hover{color:var(--text)}
.contact-band .faq-list{border-top:1px solid var(--line)}
.contact-band .faq-list details{padding:var(--sp-4) 0}


/* facts band keeps its own rhythm on phones */
@media(max-width:760px){
  .facts div{padding:18px 0 18px 16px}
  .facts b{font-size:clamp(30px,9vw,40px)}
  .facts span{font-size:10.5px;letter-spacing:.14em}
  .contact-row .button{width:100%}
  .referral{font-size:10.5px;letter-spacing:.12em;word-break:break-all}
}


/* Keyboard focus must stay visible on text inputs: the focus ring on an input
   is the only thing that tells a keyboard user where they are (WCAG 2.4.7).
   The :focus rule above removes the outline for mouse users only, so the
   :focus-visible rule below restates a real ring for keyboard users. */
.input-row input:focus-visible,
.free-check-form .input-row input:focus-visible,
.check-form .input-row input:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-color:var(--text)
}

/* ==========================================================================
   Pass 3 — the sections under the hero join the same language (2026-10-19)
   Reference: morphostech.com's "acts" band — ledger rows on black, hairline
   rules, mono kickers, light display type. No bordered cards, no glass panels:
   the film hero already carries the image, so the body copy stays typographic.
   ========================================================================== */

/* --- sections share one rhythm and one hairline separator --- */
.services,.proof-strip,.free-check,.diagnostic-panel,.contact-band{border-top:1px solid var(--line)}
.services{padding-top:clamp(56px,8vh,86px)}

/* --- proof: three columns of ledger, not three cards --- */
.proof-grid{gap:0;border-top:1px solid var(--line)}
.proof-grid article{
  background:none;border:0;border-bottom:1px solid var(--line);
  padding:22px 26px 24px 0;justify-content:flex-start;transform:none;
}
.proof-grid article:hover{background:none;transform:none;border-color:var(--line)}
.proof-grid article + article{padding-left:26px;border-left:1px solid var(--line)}
.proof-grid span{font-size:11.5px}
.proof-grid h3{margin:16px 0 10px;font-size:clamp(19px,1.6vw,24px);font-weight:300}
.proof-grid p{font-size:14px;line-height:1.58}

/* --- free page check: an inline field on a rule, not a card --- */
.free-check-card{
  background:none;border:0;border-top:1px solid var(--line-strong);
  padding:22px 0 0;border-radius:0;
}
.free-check-form .input-row{gap:0;border-bottom:1px solid var(--line-strong)}
.free-check-form .input-row input{
  height:56px;border:0;background:none;border-radius:0;padding:0 4px;
  font-family:var(--mono);font-size:14px;letter-spacing:.04em;
}
.free-check-form .input-row input:focus{box-shadow:none;border:0}
.free-check-form .input-row .button{height:56px;border-radius:0;background:none;color:var(--text);
  border:0;border-left:1px solid var(--line-strong);padding:0 22px}
.free-check-form .input-row .button:hover{background:var(--ink-6);transform:none;opacity:1}
.free-check-list{margin:20px 0 0;gap:7px}
.free-check-card > .text-link{margin-top:20px;display:inline-block}

/* --- diagnostic: a panel of rules on black, not a glass card --- */
.diagnostic-card{
  background:none;border:0;border-top:1px solid var(--line-strong);
  padding:22px 0 0;border-radius:0;
}
.diagnostic-top{padding-bottom:18px;border-bottom:1px solid var(--line-soft)}
.input-step label{margin:22px 0 12px}
.input-row{gap:0;border-bottom:1px solid var(--line-strong)}
.input-row input{
  height:58px;border:0;background:none;border-radius:0;padding:0 4px;
  font-family:var(--mono);font-size:14px;letter-spacing:.03em;
}
.input-row input:focus{box-shadow:none;border:0}
.input-row .button{height:58px;border-radius:0;padding:0 22px;border-left:1px solid var(--line-strong);
  background:none;color:var(--text)}
.input-row .button:hover{background:var(--ink-6);transform:none;opacity:1}
.input-hint{margin-top:14px}
.intake-promises{margin-top:26px;padding-top:16px;border-top:1px solid var(--line-soft)}
.samples{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-soft)}
.sample{border:0;border-bottom:1px solid var(--line-soft);background:none;border-radius:0;
  padding:13px 2px;font-size:14px}
.sample:hover,.sample:focus-visible{background:var(--ink-4);border-color:var(--line-strong);transform:none}

/* --- quiet notes read as annotations, not paragraphs of body copy --- */
.section-note-quiet{color:var(--text-dimmer);font-size:12.5px;line-height:1.62;max-width:52ch;margin-top:14px}

/* --- contact: the details list is a ledger too --- */
.contact-band .faq-list details{border-bottom:1px solid var(--line)}
.contact-band .faq-list{border-top:1px solid var(--line)}

.section-note{margin-top:20px;color:var(--text-dim);font-size:14px;line-height:1.66;max-width:46ch}

/* --- industries links: a plain inline list, not a stretching flex row --- */
.contact-sectors{display:block;margin-top:26px;padding-top:18px;border-top:1px solid var(--line-soft);
  color:var(--text-dimmer);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.contact-sectors span{margin-right:8px}
.contact-sectors a{display:inline-block;margin-right:18px;padding:4px 0}

@media(max-width:900px){
  .proof-grid{border-top:0}
  .proof-grid article{padding:20px 0;border-left:0!important;border-top:1px solid var(--line)}
  .proof-grid article + article{padding-left:0}
}

/* the phone bar is 60px tall, not the desktop 78px — the hero height depends on it */
@media(max-width:760px){:root{--topbar-h:60px}}

/* ==========================================================================
   PAGE CHECK v0.2 — six dimensions, ranked fixes, modelled projection.
   Same language as the rest of the site: hairlines, mono keys, one accent,
   no cards stacked on cards.
   ========================================================================== */

.check-selects{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid var(--line-soft);
}
.check-select label{
  display:block;
  margin-bottom:8px;
  color:var(--text-dim);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.select-wrap{position:relative}
.select-wrap::after{
  content:'⌄';
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-58%);
  color:var(--text-dimmer);
  font-size:12.5px;
  pointer-events:none;
}
.check-select select{
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  background:var(--ink-4);
  border:1px solid var(--line);
  border-radius:0;
  color:var(--text);
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.02em;
  padding:13px 38px 13px 14px;
  cursor:pointer;
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.check-select select:hover{border-color:var(--line-strong);background:var(--ink-6)}
.check-select select:focus{outline:none;border-color:var(--accent)}
.check-select select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.check-select select option{background:var(--select-bg);color:var(--text)}
.select-note{
  margin:8px 0 0;
  color:var(--text-dimmer);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.08em;
  line-height:1.6;
}

/* ---- overall ---- */

.check-head-main{min-width:0;flex:1 1 340px}
.check-overall{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  flex:0 0 auto;
  text-align:right;
}
.co-score{
  font-family:var(--display);
  font-weight:200;
  font-size:clamp(40px,4.4vw,56px);
  line-height:.94;
  letter-spacing:-.03em;
}
.co-label{
  color:var(--accent);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.co-grade{
  margin-top:4px;
  padding-top:4px;
  border-top:1px solid var(--line-soft);
  color:var(--ink-62);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.co-counts{
  margin-top:6px;
  color:var(--text-dimmer);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.1em;
}

/* ---- dimension grid: a scoreboard, not six cards ---- */

.dim-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  margin-top:26px;
  background:var(--line-soft);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.dim{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:20px 20px 22px;
  background:#000;
}
.dim-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.dim-name{
  margin:0;
  font-family:var(--mono);
  font-size:9.5px;
  font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-dimmer);
}
.dim-score{
  font-family:var(--display);
  font-weight:300;
  font-size:30px;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--text);
}
.dim-bar{
  position:relative;
  height:1px;
  margin:14px 0 12px;
  background:var(--ink-14);
}
.dim-fill{
  position:absolute;
  left:0;top:0;
  height:1px;
  background:var(--accent);
}
.dim-band{
  position:absolute;
  top:-4px;
  width:1px;
  height:9px;
  background:var(--ink-52);
}
.dim-meta{
  margin:0;
  color:var(--text-dimmer);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.08em;
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
}
.dim-delta{color:var(--text)}
.dim-counts{margin-left:auto;color:var(--ink-26)}
.dim-why{
  margin:12px 0 0;
  color:var(--text-dimmer);
  font-size:11.5px;
  line-height:1.6;
  letter-spacing:0;
}
.dim-warn{
  margin:10px 0 0;
  padding-top:9px;
  border-top:1px solid var(--warn-28);
  color:var(--warm-ink);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.06em;
  line-height:1.6;
}
.dim.is-under .dim-score{color:var(--fail-ink)}
.dim.is-near .dim-score{color:var(--warm-ink)}
.dim.is-over .dim-score{color:var(--accent)}

/* ---- blocks ---- */

.check-block{margin-top:clamp(40px,5vh,56px)}
.block-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:8px 24px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.block-head h3{
  margin:0;
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(19px,2.2vw,27px);
  letter-spacing:-.012em;
}
.block-head p{
  margin:0;
  max-width:56ch;
  color:var(--text-dimmer);
  font-size:11.5px;
  line-height:1.6;
}

/* ---- fix table ---- */

.fix-table{
  width:100%;
  margin-top:6px;
  border-collapse:collapse;
  font-size:12.5px;
}
.fix-table thead th{
  padding:12px 0 9px;
  border-bottom:1px solid var(--line-soft);
  color:var(--text-dimmer);
  font-family:var(--mono);
  font-size:8.5px;
  font-weight:400;
  letter-spacing:.14em;
  text-align:left;
  text-transform:uppercase;
}
.fix-table tbody td{
  padding:14px 0;
  border-bottom:1px solid var(--line-soft);
  vertical-align:top;
}
.fix-table tbody tr:last-child td{border-bottom:0}
.fix-rank{
  width:34px;
  color:var(--accent);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.1em;
  padding-top:16px!important;
}
.fix-title{color:var(--text);line-height:1.55;padding-right:20px!important}
.fix-from{
  display:block;
  margin-top:5px;
  color:var(--text-dimmer);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.fix-tag{width:96px;white-space:nowrap;padding-top:15px!important}
.tag{
  display:inline-block;
  padding:3px 7px;
  border:1px solid var(--line);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-dim);
}
.tag-high{border-color:var(--fail-45);color:var(--fail-ink)}
.tag-med{border-color:var(--warn-40);color:var(--warm-ink)}
.tag-low{color:var(--text-dimmer)}
.fix-empty{margin:18px 0 0;color:var(--text-dimmer);font-size:12.5px;line-height:1.6}

/* ---- projection: explicitly a model ---- */

.proj{
  margin-top:clamp(34px,4.4vh,48px);
  padding:22px clamp(17px,2.4vw,27px) 20px;
  border:1px solid var(--acc-24);
  background:linear-gradient(180deg,var(--acc-5),var(--acc-5));
}
.proj-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px 28px;
}
.proj-kicker{
  margin:0 0 7px;
  color:var(--accent);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.proj-head h3{
  margin:0;
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(19px,2.2vw,27px);
  letter-spacing:-.012em;
}
.proj-figure{display:flex;flex-direction:column;align-items:flex-end;gap:3px;margin:0}
.proj-figure b{
  font-family:var(--display);
  font-weight:200;
  font-size:clamp(27px,3.4vw,40px);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--accent);
}
.proj-figure span{
  color:var(--text-dimmer);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.proj-basis{
  margin:16px 0 0;
  max-width:78ch;
  color:var(--text-dim);
  font-size:12.5px;
  line-height:1.68;
}
.proj-drivers{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid var(--acc-16)}
.proj-drivers li{
  display:flex;
  align-items:baseline;
  gap:14px;
  padding:9px 0;
  border-bottom:1px solid var(--acc-12);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.08em;
  color:var(--text-dimmer);
}
.pd-name{flex:1 1 auto;color:var(--text-dim);text-transform:uppercase;letter-spacing:.14em}
.pd-gap{color:var(--warm-ink)}
.pd-range{color:var(--accent);min-width:74px;text-align:right}
.proj-none{margin:16px 0 0;color:var(--text-dim);font-size:12.5px;line-height:1.65;max-width:74ch}
.proj-assume{margin-top:16px}
.proj-assume summary{
  cursor:pointer;
  color:var(--text-dimmer);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:6px 0;
}
.proj-assume summary:hover{color:var(--accent)}
.proj-assume ul{margin:8px 0 0;padding-left:17px;color:var(--text-dimmer);font-size:11.5px;line-height:1.7;max-width:80ch}

/* ---- per-group details ---- */

.group-block{border-bottom:1px solid var(--line-soft)}
.group-block summary{
  display:flex;
  align-items:center;
  gap:14px;
  padding:15px 0;
  cursor:pointer;
  list-style:none;
}
.group-block summary::-webkit-details-marker{display:none}
.gb-name{
  flex:1 1 auto;
  color:var(--text);
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.gb-count{color:var(--text-dimmer);font-family:var(--mono);font-size:9.5px;letter-spacing:.1em}
.gb-caret{
  width:15px;
  text-align:center;
  color:var(--text-dimmer);
  font-family:var(--mono);
  font-size:12.5px;
  transition:transform .3s var(--ease);
}
.group-block[open] .gb-caret{transform:rotate(45deg);color:var(--accent)}
.group-block[open] summary{border-bottom:1px solid var(--line-soft)}
.group-block .check-table{margin-top:2px}
.group-block .check-table thead{display:none}

/* ---- peers ---- */

.peer-block{margin-top:clamp(34px,4.4vh,48px)}
.peer-list{list-style:none;margin:6px 0 0;padding:0}
.peer-list li{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 16px;
  padding:13px 0;
  border-bottom:1px solid var(--line-soft);
}
.peer-list li:last-child{border-bottom:0}
.peer-list b{
  min-width:172px;
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:400;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
}
.peer-list span{flex:1 1 300px;color:var(--text-dim);font-size:12.5px;line-height:1.6}

@media(max-width:1080px){
  .dim-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .check-selects{grid-template-columns:1fr;gap:16px}
  .dim-grid{grid-template-columns:1fr}
  .dim{padding:17px 16px 19px}
  .check-overall{align-items:flex-start;text-align:left}
  .co-score{font-size:40px}
  .fix-table,.fix-table tbody,.fix-table tr,.fix-table td{display:block;width:auto}
  .fix-table thead{display:none}
  .fix-table tbody tr{
    padding:14px 0;
    border-bottom:1px solid var(--line-soft);
  }
  .fix-table tbody td{border-bottom:0;padding:0 0 6px!important}
  .fix-rank{padding-bottom:4px!important;width:auto}
  .fix-tag{display:inline-block!important;width:auto;padding:0 10px 0 0!important;margin-top:6px}
  .proj{padding:18px 16px}
  .proj-figure{align-items:flex-start}
  .peer-list b{min-width:0;display:block}
  .group-block summary{padding:13px 0}
}

/* --- mobile: the read row stacks and the selects must not clip their labels --- */
@media(max-width:760px){
  .check-form .input-row{flex-direction:column;gap:0;border-bottom:0}
  .check-form .input-row input{
    width:100%;
    border:1px solid var(--line);
    border-bottom:0;
    padding:0 14px;
  }
  .check-form .input-row .button{
    width:100%;
    border:1px solid var(--line);
    border-left:1px solid var(--line);
    height:52px;
    justify-content:center;
  }
  .check-select select{text-overflow:ellipsis}
}

@media(max-width:760px){
  .check-form .input-row input{font-size:12.5px;letter-spacing:.01em}
  .check-form .input-row input::placeholder{font-size:12.5px}
  .check-form .input-row .button{font-size:10.5px;letter-spacing:.16em}
}

/* the head is a column on phones: a flex-grow basis of 340px would open a hole */
@media(max-width:760px){
  .check-head{gap:18px}
  .check-head-main{flex:0 0 auto;min-width:0}
  .check-overall{width:100%;align-items:flex-start;text-align:left}
  .co-counts{margin-top:4px}
}

.check-scope{
  margin:8px 0 0;
  color:var(--text-dimmer);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
}

@media(max-width:760px){
  .check-head{flex-direction:column;justify-content:flex-start;align-items:stretch}
}

.dim.is-unmeasured .dim-score{color:var(--ink-34)}
.dim.is-unmeasured .dim-meta{margin-top:14px}

/* the counts line must never collide with the page edge in the head */
.check-overall{max-width:100%}
.co-counts{max-width:100%;line-height:1.5;white-space:normal}
@media(min-width:761px){
  .check-overall{flex:0 0 auto;min-width:210px;max-width:300px}
}

.check-tally{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 14px;
  margin:14px 0 0;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.check-tally span{white-space:nowrap}
.t-pass{color:var(--accent)}
.t-warn{color:var(--warm-ink)}
.t-fail{color:var(--fail-ink)}
.t-total{color:var(--ink-26)}


/* ==========================================================================
   Pass 4 — check page: instrument layout, hairlines, no card chrome (2026-10-19)
   Keeps the studio language: black field, Archivo, #A8C8EC accent, mono
   labels at .18em, 1px rules. Nothing here uses a filled panel or a shadow.
   ========================================================================== */

/* --- hero: copy column + weight ledger, same anatomy as the home hero --- */
.check-hero{
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.64fr);
  gap:clamp(30px,5vw,68px);
  align-items:start;
}
.check-hero-copy{min-width:0}

.check-keys{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  margin:clamp(27px,3.4vh,34px) 0 0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--line);
}
.check-keys li{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:14px 14px 0 0;
}
.check-keys li + li{padding-left:16px;border-left:1px solid var(--line-soft)}
.check-keys b{
  font-family:var(--display);
  font-weight:200;
  font-size:clamp(24px,2.4vw,30px);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--text);
}
.check-keys li:first-child b{color:var(--accent)}
.check-keys span{
  color:var(--text-dimmer);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.5;
}

/* --- weight ledger --- */
.check-panel{
  min-width:0;
  border-top:1px solid var(--line-strong);
  border-bottom:1px solid var(--line);
  padding:14px 0 4px;
}
.cp-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  padding-bottom:11px;
  border-bottom:1px solid var(--line-soft);
}
.cp-kicker{
  margin:0;
  color:var(--accent);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.cp-total{
  color:var(--text-dimmer);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.cp-list{list-style:none;margin:0;padding:0;counter-reset:none}
.cp-list li{
  display:grid;
  grid-template-columns:26px minmax(0,1fr) 26px;
  grid-template-areas:"i n w" ". d d";
  align-items:baseline;
  gap:2px 8px;
  padding:9px 0;
  border-bottom:1px solid var(--line-soft);
}
.cp-list li:last-child{border-bottom:0}
.cp-i{
  grid-area:i;
  color:var(--ink-26);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.1em;
}
.cp-n{
  grid-area:n;
  color:var(--text);
  font-family:var(--display);
  font-size:14px;
  font-weight:300;
  letter-spacing:-.005em;
}
.cp-w{
  grid-area:w;
  text-align:right;
  color:var(--accent);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.06em;
}
.cp-d{
  grid-area:d;
  color:var(--text-dimmer);
  font-size:10.5px;
  line-height:1.5;
}
.cp-note{
  margin:12px 0 10px;
  color:var(--text-dimmer);
  font-size:11.5px;
  line-height:1.6;
  max-width:40ch;
}

/* --- form: a ruled block, not a card --- */
.check-form{
  margin-top:clamp(34px,5vh,56px);
  padding:0;
  border:0;
  border-top:1px solid var(--line-strong);
  border-radius:0;
  background:none;
}
.cf-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:6px 20px;
  padding:13px 0 0;
}
.check-form .cf-head label,
.cf-head label{
  display:block;
  margin:0;
  color:var(--text);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.cf-note{
  color:var(--text-dimmer);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.1em;
}
.check-form .input-row{gap:0;border-bottom:1px solid var(--line-strong);margin-top:8px}
.check-form .input-row input{
  height:60px;
  border:0;
  border-radius:0;
  background:none;
  padding:0 4px;
  font-family:var(--mono);
  font-size:15.5px;
  letter-spacing:.03em;
}
.check-form .input-row input:focus{box-shadow:none;border:0;background:none}
.check-form .input-row .button{
  height:60px;
  border:0;
  border-left:1px solid var(--line-strong);
  border-radius:0;
  background:none;
  color:var(--text);
  padding:0 24px;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.18em;
}
.check-form .input-row .button:hover{background:var(--ink-6);transform:none;opacity:1}

/* --- selects join the same ruled language --- */
.check-selects{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(19px,3vw,40px);
  margin-top:26px;
}
.check-select label{
  display:block;
  margin:0 0 2px;
  color:var(--text-dim);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.select-wrap{position:relative}
.select-wrap::after{
  content:"";
  position:absolute;
  right:12px;
  top:calc(50% - 2px);
  width:6px;height:6px;
  border-right:1px solid var(--text-dimmer);
  border-bottom:1px solid var(--text-dimmer);
  transform:rotate(45deg) translateY(-3px);
  pointer-events:none;
  transition:border-color .3s var(--ease);
}
.check-select select{
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  background:none;
  border:0;
  border-bottom:1px solid var(--line-strong);
  border-radius:0;
  color:var(--text);
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.02em;
  padding:11px 30px 11px 2px;
  cursor:pointer;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.check-select select:hover{border-bottom-color:var(--ink-52)}
.check-select select:focus{outline:none;border-bottom-color:var(--accent)}
.check-select select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.check-select select option{background:var(--select-bg);color:var(--text)}
.select-wrap:hover::after{border-color:var(--text)}
.select-note{
  margin:8px 0 0;
  color:var(--text-dimmer);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.06em;
  line-height:1.6;
}

.input-hint{
  margin-top:16px;
  padding-top:13px;
  border-top:1px solid var(--line-soft);
  color:var(--text-dimmer);
  font-size:11.5px;
  line-height:1.65;
  max-width:86ch;
}

/* --- samples: ruled rows, one line each --- */
.check-samples{margin-top:22px;padding-top:16px;border-top:1px solid var(--line-soft)}
.check-samples .samples-label{
  margin:0 0 8px;
  color:var(--text-dimmer);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.check-samples .sample{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  width:100%;
  margin:0;
  padding:10px 0;
  border:0;
  border-bottom:1px solid var(--line-soft);
  border-radius:0;
  background:none;
  color:var(--text-dim);
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.02em;
  text-align:left;
  cursor:pointer;
  transition:color .25s var(--ease),padding-left .25s var(--ease),border-color .25s var(--ease);
}
.check-samples .sample:hover,
.check-samples .sample:focus-visible{
  color:var(--accent);
  padding-left:8px;
  border-bottom-color:var(--acc-40);
  outline:0;
  background:none;
  transform:none;
}
.check-samples .sample:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.check-samples .sample span{
  flex:0 0 auto;
  color:var(--text-dimmer);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.check-samples .sample:hover span{color:var(--text-dimmer)}

/* --- dimension grid: tighter cells, weight on the rule --- */
.dim-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:30px;
  border-top:1px solid var(--line-strong);
}
.dim{padding:18px 18px 18px}
.dim-top{align-items:center}
.dim-score{font-size:34px;font-weight:200}
.dim-bar{margin:12px 0 10px}
.dim-meta{font-size:8.5px;gap:10px}
.dim-w{
  color:var(--ink-26);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.12em;
  order:-1;
}
.dim-why{
  margin:10px 0 0;
  font-size:10.5px;
  line-height:1.55;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* --- report head: a rule that carries the scope --- */
.check-head{padding-bottom:18px}
.check-scope{
  margin:10px 0 0;
  color:var(--text-dimmer);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.check-tally{gap:6px 18px;margin-top:16px}
.check-tally span{position:relative}
.check-tally span + span::before{
  content:"·";
  position:absolute;
  left:-11px;
  color:var(--ink-18);
}

/* --- fix table: rank column reads as a rail --- */
.fix-table tbody tr{transition:background-color .2s var(--ease)}
.fix-table tbody tr:hover{background:var(--ink-2)}
.fix-rank{font-size:9.5px;color:var(--acc-65)}
.fix-title{padding-right:26px!important}

/* --- projection block: corner ticks instead of a card --- */
.proj{position:relative;border:0;border-top:1px solid var(--acc-24);border-bottom:1px solid var(--acc-16);background:none;padding:20px 0 18px}
.proj::before,.proj::after{
  content:"";
  position:absolute;
  top:0;width:1px;height:9px;
  background:var(--acc-55);
}
.proj::before{left:0}
.proj::after{right:0}
.proj-figure b{font-weight:200}

/* --- keyboard focus on rows that became buttons --- */
.check-samples .sample:active{color:var(--accent)}

@media(max-width:1080px){
  .check-hero{grid-template-columns:minmax(0,1fr);gap:34px}
  .check-panel{max-width:560px}
  .dim-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .check-keys{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:0}
  .check-keys li{padding:12px 12px 0 0}
  .check-keys li + li{padding-left:12px}
  .check-keys li:nth-child(3){padding-left:0;border-left:0}
  .check-keys li:nth-child(3),
  .check-keys li:nth-child(4){margin-top:12px;border-top:1px solid var(--line-soft);padding-top:12px}
  .check-selects{grid-template-columns:1fr;gap:20px}
  .dim-grid{grid-template-columns:1fr}
  .dim{padding:16px 0}
  .dim-grid{gap:1px}
  .cf-head{gap:4px}
  .cf-note{font-size:8.5px}
  .check-samples .sample span{display:none}
  .check-form .input-row input{font-size:14px}
  .check-form .input-row{flex-direction:column;border-bottom:1px solid var(--line-strong)}
  .check-form .input-row input{width:100%;border-bottom:1px solid var(--line);padding:0 2px;height:56px}
  .check-form .input-row .button{width:100%;border-left:0;border-top:0;justify-content:center;height:52px}
  .check-form .input-row .button:active{background:var(--ink-10)}
  .check-selects{border-top:0}
}


/* ==========================================================================
   Pass 5 — check page: report instrument panel (2026-10-19)
   Adds UI density without leaving the studio language: black field, Archivo,
   #A8C8EC accent, 1px rules, mono labels at .18em. No cards, no shadows.
   Motion specs copied from design/framesbase-prompts/:
     Growth Analytics 29b20047 — bars 370ms outCubic, figures 800ms outQuad
     Autonomous Ops   7e49b512 — bars grow from baseline, digits roll
     Ascend           bb77a8d9 — figures count in once, rules grow from 0
     Lead Funnel      5dc36f48 — 75ms stagger between like items
   ========================================================================== */

/* --- depth preview under the selects: what 11 / 48 / 77 actually means --- */
.depth-preview{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  margin:22px 0 0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--line-soft);
}
.depth-preview li{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:12px 14px 11px 0;
}
.depth-preview li + li{padding-left:16px;border-left:1px solid var(--line-soft)}
.depth-preview .dp-n{
  display:flex;
  align-items:baseline;
  gap:8px;
}
.depth-preview b{
  font-family:var(--display);
  font-weight:200;
  font-size:19px;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--ink-46);
  transition:color .3s var(--ease);
}
.depth-preview li[data-active="true"] b{color:var(--accent)}
.depth-preview li[data-active="true"] .dp-name{color:var(--text-dim)}
.depth-preview .dp-name{
  color:var(--text-dimmer);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.depth-preview .dp-what{
  color:var(--text-dimmer);
  font-size:10.5px;
  line-height:1.5;
}
.depth-preview .dp-meter{
  position:absolute;
  left:0;
  bottom:0;
  height:1px;
  width:0;
  background:var(--acc-55);
  transition:width .5s var(--ease);
}
.depth-preview li[data-active="true"] .dp-meter{background:var(--accent)}
.depth-preview li:first-child .dp-meter{left:0}

/* --- report: tally band, one rule that carries pass / watch / fail --- */
.check-tallyband{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 26px;
  margin:0 0 4px;
  padding:13px 0 12px;
  border-top:1px solid var(--line-strong);
  border-bottom:1px solid var(--line-soft);
}
.check-tallyband .check-tally{margin:0}
.dist{
  display:flex;
  align-items:stretch;
  gap:2px;
  width:min(220px,100%);
  height:5px;
}
.dist i{display:block;height:100%;transform-origin:left center}
.dist .d-p{background:var(--accent)}
.dist .d-w{background:var(--warm-ink)}
.dist .d-f{background:var(--fail-ink)}
.dist i[style*="flex:0 "]{display:none}

/* --- report nav: an index, not a tab bar --- */
.rep-nav{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 22px;
  padding:14px 0 2px;
}
.rep-nav-kicker{
  color:var(--text-dimmer);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.rep-nav ol{
  display:flex;
  flex-wrap:wrap;
  gap:4px 18px;
  margin:0;
  padding:0;
  list-style:none;
}
.rep-nav li{counter-increment:repnav}
.rep-nav a{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  color:var(--text-dim);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.rep-nav li a::before{
  content:counter(repnav,decimal-leading-zero);
  color:var(--ink-26);
  font-size:8.5px;
  letter-spacing:.06em;
}
.rep-nav ol{counter-reset:repnav}
.rep-nav a:hover,.rep-nav a:focus-visible{color:var(--accent);border-bottom-color:var(--acc-50);outline:0}
.rep-nav-meta{
  margin-left:auto;
  color:var(--ink-26);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* --- dimension cell: micro tally so pass / watch / fail is readable at a glance --- */
.dim-tally{
  display:flex;
  align-items:stretch;
  gap:2px;
  height:3px;
  margin:9px 0 0;
  background:var(--ink-8);
  transform-origin:left center;
}
.dim-tally i{display:block;height:100%}
.dim-tally .t-p{background:var(--acc-85)}
.dim-tally .t-w{background:var(--warn-75)}
.dim-tally .t-f{background:var(--fail-80)}
.dim-tally i[style*="flex:0 "]{display:none}

/* --- group summary meter: the same micro bar, inline --- */
.gb-meter{display:flex;align-items:stretch;width:88px;height:3px;flex:0 0 auto;background:var(--ink-8)}
.gb-meter .dim-tally{margin:0;width:100%;flex:1 1 auto}

/* --- overall score: give the number a scale --- */
.co-scale{
  margin-top:3px;
  color:var(--ink-26);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* --- bars are drawn by GSAP on report render; keep a sane pre-JS state --- */
.dim-fill{transition:none}

/* --- fix table: impact / effort as a two-tone rail --- */
.fix-table tbody tr td.fix-rank{position:relative}
.fix-table tbody tr td.fix-rank::after{
  content:"";
  position:absolute;
  left:0;top:14px;bottom:14px;
  width:1px;
  background:var(--acc-16);
}
.fix-table tbody tr:first-child td.fix-rank::after{background:var(--acc-55)}

/* --- facts band: label above a hairline, figure below --- */
.check-facts div{padding:13px 14px 14px}
.check-facts b{font-weight:200;font-size:19px;letter-spacing:-.012em}

@media(max-width:1080px){
  .rep-nav-meta{margin-left:0}
}
@media(max-width:760px){
  .depth-preview{grid-template-columns:1fr;border-top:0}
  .depth-preview li{padding:10px 0;border-top:1px solid var(--line-soft)}
  .depth-preview li + li{padding-left:0;border-left:0}
  .depth-preview b{font-size:17px}
  .depth-preview .dp-meter{display:none}
  .check-tallyband{gap:10px 0}
  .dist{width:100%;margin-top:2px}
  .rep-nav{gap:6px 0;padding:12px 0 0}
  .rep-nav ol{gap:4px 14px}
  .gb-meter{width:44px}
  .check-facts b{font-size:17px}
}

/* --- overall score: a scale, so 88 means something next to it --- */
.co-rule{
  position:relative;
  width:168px;
  height:14px;
  margin-top:12px;
}
.co-track{
  position:absolute;
  left:0;right:0;top:6px;
  height:1px;
  background:var(--ink-18);
}
.co-tick{
  position:absolute;
  top:3px;
  width:1px;
  height:7px;
  background:var(--ink-18);
}
.co-mark{
  position:absolute;
  top:0;
  left:0;
  width:1px;
  height:13px;
  background:var(--accent);
  box-shadow:0 0 6px var(--acc-55);
}
.co-legend{
  display:flex;
  justify-content:space-between;
  width:168px;
  margin-top:2px;
  color:var(--ink-26);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
@media(max-width:1080px){
  .co-rule,.co-legend{width:150px}
}
@media(max-width:760px){
  .check-overall{width:100%;align-items:flex-start;text-align:left}
  .co-rule,.co-legend{width:100%;max-width:220px}
  .cf-head{flex-direction:column;align-items:flex-start;gap:5px}
  .cf-note{font-size:8.5px;letter-spacing:.06em}
}

/* --- Pass 5b: weight chip, weighted total, state legend --- */
.dim-top{align-items:baseline;justify-content:space-between;gap:10px}
.dim-w{
  margin-left:7px;
  color:var(--ink-26);
  font-family:var(--mono);
  font-size:8.5px;
  font-weight:400;
  letter-spacing:.06em;
  vertical-align:baseline;
}
.dim-name{min-width:0}
.dim-score{flex:0 0 auto}

.dim-sum{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 12px;
  margin:0;
  padding:11px 0 0;
  border-top:1px solid var(--line-soft);
  color:var(--text-dimmer);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.dim-sum b{
  color:var(--accent);
  font-family:var(--display);
  font-size:15.5px;
  font-weight:300;
  letter-spacing:-.01em;
  text-transform:none;
}
.dim-sum span:last-child{flex:1 1 260px;text-transform:none;letter-spacing:.02em;font-size:9.5px;color:var(--ink-34);line-height:1.55}

.state-legend{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 18px;
  margin:0;
  padding:12px 0 10px;
  border-bottom:1px solid var(--line-soft);
  color:var(--text-dimmer);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.state-legend span{display:inline-flex;align-items:center;gap:6px}
.lg{display:inline-block;width:5px;height:5px;border-radius:50%}
.lg-p{background:var(--accent)}
.lg-w{background:var(--warm-ink)}
.lg-f{background:var(--fail-ink)}
.lg-note{
  flex:1 1 320px;
  text-transform:none;
  letter-spacing:.02em;
  font-size:9.5px;
  color:var(--ink-26);
}
@media(max-width:760px){
  .dim-w{font-size:8.5px;margin-right:6px}
  .dim-sum span:last-child{flex:1 1 100%}
  .state-legend{gap:6px 14px}
  .lg-note{flex:1 1 100%}
}

/* ==========================================================================
   Pass 6 — check page: quantity, depth and priority made visible (2026-10-19)
   Every new element is a hairline, a rule or a mono label. No panels, no
   shadows, no new colour. Motion specs come from the Framesbase prompts
   archived in design/framesbase-prompts/:
     - Growth Analytics 29b20047  bars 370ms outCubic, numbers 800ms outQuad
     - Autonomous Ops   7e49b512  bars grow from the baseline
     - Lead Funnel      5dc36f48  75ms stagger between like items
     - Bento Grid Stats 0c961259  cards 0.65s, opacity + scale .985, stagger .06
   ========================================================================== */

/* --- weight ledger: every row carries a hairline as long as its weight --- */
.cp-list .cp-n{position:relative;padding-bottom:4px}
.cp-list .cp-n::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  height:1px;
  width:calc(var(--w,0) * 1%);
  background:var(--acc-40);
  transform-origin:left center;
  transition:width .7s var(--ease);
  transition-delay:calc(var(--wi,1) * 60ms);
}
/* the weight rules draw once, in ledger order, only when motion is armed */
.js-anim:not(.cp-draw) .cp-list .cp-n::after{width:0}
.cp-list .cp-w{font-variant-numeric:tabular-nums}

/* --- depth strip: the meter is a share of 77, not an on/off state --- */
.depth-preview .dp-meter{width:calc(var(--share,0) * 1%);background:var(--ink-34)}
.depth-preview li[data-active="true"] .dp-meter{background:var(--accent)}

/* --- notes: what one request does, in four steps --- */
.req-steps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  margin:0 0 clamp(27px,4vh,40px);
  padding:0;
  list-style:none;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line-soft);
}
.req-steps li{display:flex;flex-direction:column;gap:5px;padding:13px 16px 14px 0}
.req-steps li + li{padding-left:16px;border-left:1px solid var(--line-soft)}
.req-steps .rs-i{color:var(--ink-26);font-family:var(--mono);font-size:8.5px;letter-spacing:.12em}
.req-steps .rs-t{color:var(--text);font-family:var(--display);font-size:14px;font-weight:300;letter-spacing:-.005em}
.req-steps .rs-d{color:var(--text-dimmer);font-size:10.5px;line-height:1.5}

/* --- report: depth levels, so 77 reads as a quantity, not a boast --- */
.level-strip{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 22px;
  margin:0;
  padding:11px 0 12px;
  border-bottom:1px solid var(--line-soft);
  color:var(--text-dimmer);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.level-strip span{display:inline-flex;align-items:baseline;gap:7px}
.level-strip b{
  color:var(--text);
  font-family:var(--display);
  font-size:14px;
  font-weight:300;
  letter-spacing:0;
  text-transform:none;
  font-variant-numeric:tabular-nums;
}
.level-strip .ls-note{
  flex:1 1 280px;
  text-transform:none;
  letter-spacing:.02em;
  font-size:9.5px;
  color:var(--ink-26);
}

/* --- fixes: impact x effort, carrying the rank numbers that follow --- */
.fix-matrix{
  display:grid;
  grid-template-columns:92px repeat(3,minmax(0,1fr));
  gap:1px;
  margin:20px 0 8px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
}
.fix-matrix > *{background:#000;padding:10px 12px}
.fm-corner,.fm-col,.fm-row{
  display:flex;
  align-items:center;
  color:var(--text-dimmer);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.fm-row{justify-content:flex-end;text-align:right}
.fm-cell{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 7px;min-height:44px}
.fm-cell b{
  color:var(--accent);
  font-family:var(--mono);
  font-size:9.5px;
  font-weight:400;
  letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
}
.fm-cell span{flex:1 1 100%;color:var(--ink-26);font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase}
.fm-cell.is-empty b{color:var(--ink-18)}

.fm-note{
  margin:9px 0 0;
  color:var(--ink-26);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.06em;
  line-height:1.7;
}
.fm-mobile{display:none}

@media(max-width:760px){
  .req-steps{grid-template-columns:1fr}
  .req-steps li{padding:11px 0 12px}
  .req-steps li + li{padding-left:0;border-left:0;border-top:1px solid var(--line-soft)}
  .depth-preview .dp-meter{display:none}
  .level-strip{gap:5px 16px}
  .level-strip .ls-note{flex:1 1 100%}
  .fix-matrix{display:none}
  .fm-note{display:none}
  .fm-mobile{
    display:block;
    margin:14px 0 0;
    color:var(--text-dimmer);
    font-family:var(--mono);
    font-size:9.5px;
    letter-spacing:.06em;
    line-height:1.8;
  }
}

@media(prefers-reduced-motion:reduce){
  .depth-preview .dp-meter,.dim-fill,.dim-tally,.dist{transition:none!important}
  .cp-list .cp-n::after{transition:none!important;width:calc(var(--w,0) * 1%)!important}
}

/* --- Pass 6b: contrast floor for micro-labels (2026-10-19) ----------------
   The hairline system keeps its very low alphas, but every element that
   carries words or numbers is lifted to a 4.5:1 floor on black (#767676 is
   the first grey that clears AA at small sizes). Decoration stays quiet;
   information stops being illegible. */
.cp-i{color:var(--ink-46)}
.req-steps .rs-i{color:var(--ink-46)}
.depth-preview b{color:var(--ink-46)}
.depth-preview .dp-what{color:var(--ink-52)}
.co-legend{color:var(--ink-46)}
.t-total{color:var(--ink-46)}
.rep-nav-meta{color:var(--ink-46)}
.dim-w{color:var(--ink-46)}
.dim-counts{color:var(--ink-46)}
.dim-sum span:last-child{color:var(--ink-46)}
.lg-note{color:var(--ink-46)}
.level-strip .ls-note{color:var(--ink-46)}
.fix-matrix .fm-corner,.fix-matrix .fm-col,.fix-matrix .fm-row{color:var(--ink-46)}
.fm-cell span{color:var(--ink-46)}
.fm-cell.is-empty b{color:var(--ink-46)}
.fm-note{color:var(--ink-46)}
.fm-mobile{color:var(--ink-46)}

/* ==========================================================================
   Pass 7 — criterion provenance, security dimension, standards block
   (2026-10-19)
   The rule behind every row has to be visible, or the score is an opinion.
   Everything here is a hairline, a mono label or a text column: no cards, no
   shadows, no new colour, no radius.
   ========================================================================== */

/* --- per-row criterion tag: kind, family, rule ------------------------- */
.check-table .check-rubric{width:26%;vertical-align:top}
.rb{display:inline-flex;flex-direction:column;gap:2px;line-height:1.35}
.rb-k{
  color:var(--ink-46);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.rb[data-kind="standard"] .rb-k{color:var(--kind-standard)}
.rb[data-kind="research"] .rb-k{color:var(--kind-research)}
.rb-n{
  color:var(--ink-78);
  font-family:var(--display);
  font-size:11.5px;
  font-weight:300;
  letter-spacing:-.002em;
}
.rb-r{color:var(--ink-46);font-size:10.5px;line-height:1.45}
.rb-none{color:var(--ink-26)}
.check-table tr.check-row:hover .rb-k{color:var(--ink-62)}

/* --- sources block ---------------------------------------------------- */
.src-list{
  list-style:none;
  margin:10px 0 0;
  padding:0;
  border-top:1px solid var(--line-soft);
}
.src-list li{
  display:grid;
  grid-template-columns:minmax(0,200px) 108px minmax(0,1fr);
  gap:4px 18px;
  align-items:baseline;
  padding:11px 0;
  border-bottom:1px solid var(--line-soft);
}
.src-list li:last-child{border-bottom:0}
.src-list b{
  font-family:var(--display);
  font-size:12.5px;
  font-weight:300;
  letter-spacing:-.005em;
  color:var(--text);
}
.src-list b a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--acc-24)}
.src-list b a:hover{border-bottom-color:var(--accent);color:var(--accent)}
.src-kind{
  color:var(--ink-46);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.src-list li[data-kind="standard"] .src-kind{color:var(--kind-standard)}
.src-list li[data-kind="research"] .src-kind{color:var(--kind-research)}
.src-ref{color:var(--text-dim);font-size:11.5px;line-height:1.55}

/* --- standards block on the page itself ------------------------------- */
.std-block{margin-top:clamp(30px,4vh,40px);padding-top:clamp(19px,3vh,30px);border-top:1px solid var(--line)}
.std-block .block-head{margin-bottom:6px}
.std-block .block-head h3{
  margin:0 0 6px;
  font-family:var(--display);
  font-size:clamp(17px,2.2vw,21px);
  font-weight:300;
  letter-spacing:-.015em;
  color:var(--text);
}
.std-block .block-head p{margin:0;max-width:74ch;color:var(--text-dim);font-size:12.5px;line-height:1.65}
.std-list{
  list-style:none;
  margin:8px 0 0;
  padding:0;
  border-top:1px solid var(--line-soft);
}
.std-list li{
  display:grid;
  grid-template-columns:minmax(0,190px) 92px minmax(0,1fr);
  gap:4px 16px;
  align-items:baseline;
  padding:10px 0;
  border-bottom:1px solid var(--line-soft);
}
.std-list li:last-child{border-bottom:0}
.std-list b{
  font-family:var(--display);
  font-size:12.5px;
  font-weight:300;
  color:var(--text);
  letter-spacing:-.005em;
}
.std-kind{
  color:var(--ink-46);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.std-list li:nth-child(-n+5) .std-kind{color:var(--kind-standard)}
.std-list li:nth-child(6) .std-kind,.std-list li:nth-child(7) .std-kind{color:var(--kind-research)}
.std-list span:last-child{color:var(--text-dimmer);font-size:11.5px;line-height:1.55}
.std-note{
  margin:12px 0 0;
  max-width:74ch;
  color:var(--ink-46);
  font-size:10.5px;
  line-height:1.65;
}
.std-note code{font-family:var(--mono);font-size:9.5px;color:var(--ink-62)}

/* --- stack read: what the page is built with --------------------------- */
.stack-list{
  list-style:none;
  margin:10px 0 0;
  padding:0;
  border-top:1px solid var(--line-soft);
}
.stack-list li{
  display:grid;
  grid-template-columns:minmax(0,150px) minmax(0,1fr);
  gap:4px 18px;
  align-items:baseline;
  padding:9px 0;
  border-bottom:1px solid var(--line-soft);
}
.stack-list li:last-child{border-bottom:0}
.st-k{
  color:var(--ink-46);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.st-v{
  color:var(--text);
  font-family:var(--display);
  font-size:12.5px;
  font-weight:300;
  letter-spacing:-.005em;
  line-height:1.5;
}
.st-v.st-mono{font-family:var(--mono);font-size:10.5px;letter-spacing:0;color:var(--text-dim);line-height:1.6}
/* The literal that matched, under the tool name. A name alone is an
   assertion; the token is what the reader can search for. */
.st-ev{
  display:block;
  margin-top:3px;
  color:var(--ink-56);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.02em;
  line-height:1.55;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.stack-empty{margin:10px 0 0;max-width:74ch;color:var(--text-dim);font-size:11.5px;line-height:1.65}
.stack-note{
  margin:12px 0 0;
  max-width:74ch;
  color:var(--ink-46);
  font-size:10.5px;
  line-height:1.65;
}


/* --- signals: three reads the score does not hold ---------------------- */
/* Editorial rows, hairline separated. No card, no radius, no shadow: the
   block has to sit in the same type system as the stack and markup reads. */
.sg-list{
  list-style:none;
  margin:12px 0 0;
  padding:0;
  border-top:1px solid var(--line-soft);
}
/* Two columns, one reading order: the claim and its basis on the left, the
   lines that prove it on the right. A single 78ch strip under a 1180px rule
   left the whole right half of the page empty and read as a broken column. */
.sg-read{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:0 56px;
  align-items:start;
  padding:22px 0 24px;
  border-bottom:1px solid var(--line-soft);
}
.sg-read:last-child{border-bottom:0;padding-bottom:6px}
.sg-lede{grid-column:1;min-width:0}
.sg-ev{grid-column:2;min-width:0;padding-top:2px}
.sg-read > .sg-limits{grid-column:1}
/* A read with nothing to list on the right runs the full measure instead of
   leaving a silent half-column. */
.sg-read.is-wide{grid-template-columns:minmax(0,1fr)}
.sg-read.is-wide .sg-lede{max-width:74ch}
.sg-kicker{
  margin:0 0 6px;
  color:var(--accent);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.sg-name{
  margin:0;
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(17px,1.7vw,21px);
  letter-spacing:-.01em;
  line-height:1.25;
}
.sg-figs{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 26px;
  margin:12px 0 0;
}
.sg-figure{
  margin:0;
  display:flex;
  align-items:baseline;
  gap:7px;
}
.sg-figure b{
  font-family:var(--display);
  font-weight:200;
  font-size:clamp(15.5px,1.6vw,19px);
  letter-spacing:-.01em;
  color:var(--text);
}
.sg-figure span{
  color:var(--text-dimmer);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.sg-bar{
  position:relative;
  height:1px;
  margin:13px 0 0;
  background:var(--ink-14);
}
.sg-bar span{
  position:absolute;
  left:0;top:0;
  height:1px;
  background:var(--accent);
  transform-origin:left center;
}
.sg-basis{
  margin:13px 0 0;
  max-width:62ch;
  color:var(--text-dim);
  font-size:11.5px;
  line-height:1.68;
}
.sg-note{
  margin:9px 0 0;
  max-width:62ch;
  color:var(--ink-52);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.02em;
  line-height:1.7;
}
.sg-hits{
  list-style:none;
  margin:12px 0 0;
  padding:0;
  border-top:1px solid var(--line-soft);
}
.sg-hits li{
  display:grid;
  grid-template-columns:minmax(0,44px) minmax(0,1fr) minmax(0,1.1fr);
  gap:3px 14px;
  align-items:baseline;
  padding:7px 0;
  border-bottom:1px solid var(--line-soft);
}
.sg-hits li:last-child{border-bottom:0}
.sg-hits b{
  color:var(--text);
  font-family:var(--mono);
  font-size:9.5px;
  font-weight:400;
  letter-spacing:.06em;
}
.sg-hits span{
  color:var(--text);
  font-family:var(--display);
  font-size:12.5px;
  font-weight:300;
  line-height:1.5;
}
.sg-hits i{
  color:var(--ink-52);
  font-family:var(--mono);
  font-size:9.5px;
  font-style:normal;
  letter-spacing:0;
  line-height:1.6;
  overflow-wrap:anywhere;
  word-break:break-word;
}
/* Human markers are evidence in the other direction: quiet, not celebratory. */
.sg-hits li.is-good b,.sg-hits li.is-good span{color:var(--good-ink)}
.sg-signals{
  list-style:none;
  margin:11px 0 0;
  padding:0;
  border-top:1px solid var(--line-soft);
}
.sg-signals li{
  position:relative;
  padding:7px 0 7px 14px;
  border-bottom:1px solid var(--line-soft);
  color:var(--text-dim);
  font-size:11.5px;
  line-height:1.6;
}
.sg-signals li:last-child{border-bottom:0}
.sg-signals li:before{
  content:"";
  position:absolute;
  left:0;top:14px;
  width:6px;
  height:1px;
  background:var(--line-strong);
}
.sg-none{
  margin:11px 0 0;
  max-width:62ch;
  color:var(--ink-52);
  font-size:10.5px;
  line-height:1.65;
}
.sg-limits{
  margin:13px 0 0;
  max-width:62ch;
}
.sg-limits summary{
  color:var(--ink-56);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  list-style:none;
}
.sg-limits summary::-webkit-details-marker{display:none}
/* A details element that looks like a label but gives no sign it opens is a
   trap: the caret is the only affordance, so it is drawn, not borrowed. */
.sg-limits summary:before{
  content:"+";
  display:inline-block;
  width:10px;
  margin-right:7px;
  color:var(--ink-52);
  font-size:9.5px;
  letter-spacing:0;
}
.sg-limits[open] summary:before{content:"\2212"}
.sg-limits summary:hover:before{color:var(--accent)}
.sg-limits summary:hover{color:var(--text)}
.sg-limits summary:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
.sg-limits ul{
  list-style:none;
  margin:10px 0 0;
  padding:0;
}
.sg-limits li{
  position:relative;
  padding-left:14px;
  margin:0 0 7px;
  color:var(--ink-52);
  font-size:10.5px;
  line-height:1.62;
}
.sg-limits li:before{
  content:"";
  position:absolute;
  left:0;top:7px;
  width:6px;
  height:1px;
  background:var(--line-strong);
}
.sg-foot{
  margin:14px 0 0;
  max-width:78ch;
  color:var(--ink-46);
  font-size:10.5px;
  line-height:1.65;
}
@media(max-width:1080px){
  .sg-read{grid-template-columns:minmax(0,1fr);gap:0}
  .sg-lede,.sg-ev,.sg-read > .sg-limits{grid-column:1}
  .sg-ev{margin-top:14px;padding-top:0}
}
@media(max-width:980px){
  .sg-hits li{grid-template-columns:minmax(0,40px) minmax(0,1fr);gap:2px 10px}
  .sg-hits i{grid-column:2;margin-top:1px}
  .sg-figs{gap:6px 18px}
  .sg-read{padding:18px 0 20px}
}

/* --- markup map: where each located problem sits ------------------------ */
.mk-summary{
  margin:12px 0 0;
  max-width:86ch;
  color:var(--text-dim);
  font-size:11.5px;
  line-height:1.7;
}
.mk-list{
  list-style:none;
  margin:12px 0 0;
  padding:0;
  border-top:1px solid var(--line-soft);
}
.mk-list li{
  display:grid;
  grid-template-columns:minmax(0,52px) minmax(0,1fr) minmax(0,1.1fr);
  gap:4px 16px;
  align-items:baseline;
  padding:8px 0;
  border-bottom:1px solid var(--line-soft);
}
.mk-list li:last-child{border-bottom:0}
.mk-line{
  /* .42 over black measured 3.94:1 at 9px and failed WCAG AA. .56 measures
     above 4.5:1 while staying quiet next to the label. */
  color:var(--ink-56);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.1em;
}
.mk-what{
  color:var(--text);
  font-family:var(--display);
  font-size:12.5px;
  font-weight:300;
  line-height:1.5;
}
.mk-code{
  color:var(--ink-56);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:0;
  line-height:1.6;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.mk-more-row .mk-what{color:var(--ink-52);font-style:italic}
.mk-more-row .mk-code{color:var(--ink-52);font-style:italic}
.mk-note{
  margin:12px 0 0;
  max-width:74ch;
  color:var(--ink-56);
  font-size:10.5px;
  line-height:1.65;
}
@media(max-width:980px){
  .mk-list li{grid-template-columns:minmax(0,1fr);gap:2px;padding:10px 0}
  .mk-code{margin-top:2px}
}

@media(max-width:980px){
  .stack-list li{grid-template-columns:minmax(0,1fr);gap:2px}
  .st-k{margin-top:2px}
}

@media(max-width:980px){
  .check-table .check-rubric{display:none}
  .src-list li,.std-list li{grid-template-columns:minmax(0,1fr);gap:2px}
  .src-kind,.std-kind{margin-top:2px}
}
@media(max-width:760px){
  .src-list li,.std-list li{padding:10px 0}
  .std-block .block-head h3{font-size:17px}
}
/* --- guide: wide-screen reading rail -----------------------------------
   A 78ch column pinned to the left of a 1180px shell left the right half of
   the page empty, which reads as an unfinished layout. From 1080px up the TOC
   becomes a sticky rail and the article sits in the second column; below that
   the two stack in source order. Text measure is unchanged (~74ch). */
@media(min-width:1080px){
  /* Narrower shell than the 1180 default: rail + article + gap has to land
     near 1,060px or the article column ends well short of the right edge and
     the page reads left-heavy again. Measure at this width is ~86ch, inside
     the 45-90 range Practical Typography documents. */
  .guide-page{
    width:min(1060px,calc(100% - var(--gutter) * 2));
    display:grid;
    grid-template-columns:236px minmax(0,1fr);
    column-gap:clamp(40px,5vw,68px);
    align-items:start;
  }
  .guide-page > .eyebrow,
  .guide-page > h1,
  .guide-page > .hero-lede{grid-column:1 / -1}
  .guide-page > .guide-toc{
    grid-column:1;
    position:sticky;
    top:calc(var(--topbar-h) + 26px);
    margin-top:clamp(30px,4vh,48px);
    max-width:none;
  }
  .guide-page > .guide-toc ol{grid-template-columns:minmax(0,1fr);gap:0}
  .guide-page > .guide-toc li{padding:5px 0;font-size:11.5px}
  .guide-page > .guide-body{grid-column:2;max-width:none;min-width:0}
  /* the CTA and the next-route links belong under the article, not the rail */
  .guide-page > .cta-band,
  .guide-page > .service-next{grid-column:2;max-width:none}
  .guide-page > .service-content{margin-top:clamp(30px,4vh,48px)}
}

/* --- service scope: what it costs and what you bring -------------------- */
/* Four labelled facts. Hairline separated, no boxes: on a page whose point is
   "this is a bounded piece of work", the terms belong in the same type system
   as the deliverable list above, not in a pricing card. */
.scope-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2px 44px;
  margin:6px 0 4px;
  border-top:1px solid var(--line-soft);
}
.scope-grid > div{
  padding:16px 0 18px;
  border-bottom:1px solid var(--line-soft);
}
.scope-k{
  display:block;
  margin-bottom:7px;
  color:var(--accent);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.scope-grid p{
  margin:0;
  max-width:44ch;
  color:var(--text-dim);
  font-size:12.5px;
  line-height:1.68;
}
@media(max-width:760px){
  .scope-grid{grid-template-columns:minmax(0,1fr);gap:0}
}

/* --- guide: the long-form method page ---------------------------------- */
/* Same hairline editorial system as the service pages, with a wider measure
   for continuous reading and one table that is allowed to be dense. */
.guide-page{padding-bottom:clamp(40px,6vh,68px)}
.guide-toc{
  margin:clamp(27px,4vh,40px) 0 0;
  padding:18px 0 20px;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  max-width:78ch;
}
.toc-kicker{
  margin:0 0 10px;
  color:var(--accent);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.guide-toc ol{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2px 32px;
  counter-reset:toc;
}
.guide-toc li{
  counter-increment:toc;
  padding:4px 0;
  font-size:12.5px;
  line-height:1.55;
}
.guide-toc li::before{
  content:counter(toc,decimal-leading-zero);
  display:inline-block;
  width:26px;
  color:var(--text-dimmer);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.1em;
}
.guide-toc a{
  color:var(--text-dim);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.guide-toc a:hover{color:var(--accent);border-bottom-color:var(--acc-50)}

/* Guide pages already carry a rule under the TOC, so the generic
   .service-content top border + 81px margin left a second hairline with an
   empty band between them. Collapse that gap for guides only. */
.guide-page .service-content{margin-top:0;padding-top:clamp(21px,3vh,34px);border-top:0}
/* service-page defaults clamp the h1 to 16ch and the lede to 62ch; on a
   1060px guide shell that left two thirds of the first screen empty and read
   as a broken column. Guides are read, not scanned: widen the top measure. */
.guide-page > h1{max-width:24ch}
.guide-page > .hero-lede{max-width:72ch}
.guide-body{max-width:78ch}
.guide-lede{
  margin:0 0 8px;
  color:var(--text);
  font-size:15.5px;
  line-height:1.75;
}
.guide-body h2{
  margin:clamp(40px,5vh,56px) 0 16px;
  font-weight:300;
  font-size:clamp(24px,2.6vw,34px);
  letter-spacing:-.016em;
  line-height:1.15;
}
.guide-body p{
  margin:0 0 14px;
  color:var(--text-dim);
  font-size:14px;
  line-height:1.78;
}
.guide-body p b,.guide-body li b{color:var(--text);font-weight:500}
.guide-body code{
  padding:1px 5px;
  background:var(--ink-6);
  border:1px solid var(--line-soft);
  font-family:var(--mono);
  font-size:.86em;
  color:var(--text);
}
.guide-body a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--acc-40)}
.guide-body a:hover{border-bottom-color:var(--accent)}
.guide-note{
  margin:16px 0 0;
  padding-left:14px;
  border-left:1px solid var(--accent);
  color:var(--ink-56);
  font-size:12.5px;
  line-height:1.72;
}
.guide-table{
  width:100%;
  margin:18px 0 18px;
  border-collapse:collapse;
  font-size:12.5px;
}
.guide-table th,.guide-table td{
  padding:10px 12px 10px 0;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--line-soft);
  line-height:1.5;
}
.guide-table thead th{
  color:var(--text-dimmer);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:400;
  border-bottom:1px solid var(--line);
}
.guide-table tbody th{
  color:var(--text);
  font-weight:400;
  white-space:nowrap;
}
.guide-table td{color:var(--text-dim)}
.guide-table td:nth-child(2){
  color:var(--accent);
  font-family:var(--mono);
  font-size:10.5px;
}
.guide-num{
  margin:0 0 16px;
  padding-left:0;
  list-style:none;
  counter-reset:gn;
}
.guide-num li{
  counter-increment:gn;
  position:relative;
  margin:0 0 10px;
  padding-left:34px;
  color:var(--text-dim);
  font-size:14px;
  line-height:1.75;
}
.guide-num li::before{
  content:counter(gn,decimal-leading-zero);
  position:absolute;
  left:0;top:1px;
  color:var(--accent);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.1em;
}
.guide-sources{
  margin:0 0 16px;
  padding:0;
  list-style:none;
  border-top:1px solid var(--line-soft);
}
.guide-sources li{
  padding:10px 0;
  border-bottom:1px solid var(--line-soft);
  color:var(--text-dim);
  font-size:12.5px;
  line-height:1.65;
}
@media(max-width:760px){
  .guide-toc ol{grid-template-columns:minmax(0,1fr)}
  .guide-table{display:block;overflow-x:auto;white-space:nowrap}
  .guide-table thead th,.guide-table td{white-space:normal}
  .guide-table tbody th{white-space:normal}
  .guide-body p,.guide-num li{font-size:14px}
}

/* --- next step: the way out of the report ------------------------------ */
/* Same editorial rules as the stack and markup reads: hairlines, no card, no
   radius. The point of this block is a decision, so the type is a size up and
   the three routes are separated by rules rather than boxed. */
.nx-block{border-top:1px solid var(--line);padding-top:clamp(27px,3.4vh,40px)}
.nx-list{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  border-top:1px solid var(--line-soft);
}
.nx-route{
  display:grid;
  grid-template-columns:minmax(0,190px) minmax(0,1fr);
  gap:2px 40px;
  align-items:start;
  padding:20px 0 22px;
  border-bottom:1px solid var(--line-soft);
}
.nx-kicker{
  grid-column:1;
  margin:2px 0 0;
  color:var(--accent);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.nx-name{
  grid-column:2;
  margin:0;
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(19px,2vw,24px);
  letter-spacing:-.012em;
  line-height:1.2;
}
.nx-name a{text-decoration:none;border-bottom:1px solid transparent;transition:border-color .35s var(--ease),color .3s var(--ease)}
.nx-name a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.nx-name a span{font-family:var(--mono);font-size:.6em;letter-spacing:.08em;color:var(--accent)}
.nx-lead{
  grid-column:2;
  margin:7px 0 0;
  max-width:72ch;
  color:var(--text-dim);
  font-size:12.5px;
  line-height:1.7;
}
.nx-act{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:18px 28px;
  margin:24px 0 0;
}
.nx-note{
  flex:1 1 300px;
  min-width:0;
  margin:0;
  max-width:62ch;
  color:var(--ink-56);
  font-size:10.5px;
  line-height:1.7;
}
.nx-note b{color:var(--text);font-family:var(--mono);font-size:9.5px;letter-spacing:.1em}
.nx-foot{
  margin:18px 0 0;
  color:var(--ink-52);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.06em;
}
@media(max-width:760px){
  .nx-route{grid-template-columns:minmax(0,1fr);gap:6px;padding:18px 0 20px}
  .nx-kicker,.nx-name,.nx-lead{grid-column:1}
  .nx-act{flex-direction:column;align-items:stretch}
  .nx-act .button{width:100%;justify-content:center}
}