:root{
  --paper:#E7E3D7; --paper-2:#F1EDE4; --card:#EFEBE1;
  --sumi:#2A2620; --sumi-soft:#6C6559; --muted:#948C7E;
  --line:#D7D1C4; --hair:#CFC8B9;
  --moss:#6E7A5F; --moss-deep:#55604A;
  --amber:#C08A46; --clay:#9E5C43; --indigo:#4C5A6E;
  --stone:#8B8677;
  --sand:#DED7C6; --sand-line:#C7BEAA; --sand-ridge:#B7AC93;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,sans-serif;
  --mono:"SF Mono","JetBrains Mono","Roboto Mono",ui-monospace,Menlo,monospace;
  --maxw:1080px;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#161410; --paper-2:#201D18; --card:#211E18;
    --sumi:#EAE4D7; --sumi-soft:#A79E8E; --muted:#7B7466;
    --line:#322E26; --hair:#2C2820;
    --moss:#98A47E; --moss-deep:#7C8964;
    --amber:#D6A45E; --clay:#C47959; --indigo:#7E90A6;
    --stone:#6A655A;
    --sand:#221F19; --sand-line:#2E2A22; --sand-ridge:#38332A;
  }
}
:root[data-theme="light"]{
  --paper:#E7E3D7; --paper-2:#F1EDE4; --card:#EFEBE1;
  --sumi:#2A2620; --sumi-soft:#6C6559; --muted:#948C7E;
  --line:#D7D1C4; --hair:#CFC8B9;
  --moss:#6E7A5F; --moss-deep:#55604A;
  --amber:#C08A46; --clay:#9E5C43; --indigo:#4C5A6E; --stone:#8B8677;
  --sand:#DED7C6; --sand-line:#C7BEAA; --sand-ridge:#B7AC93;
}
:root[data-theme="dark"]{
  --paper:#161410; --paper-2:#201D18; --card:#211E18;
  --sumi:#EAE4D7; --sumi-soft:#A79E8E; --muted:#7B7466;
  --line:#322E26; --hair:#2C2820;
  --moss:#98A47E; --moss-deep:#7C8964;
  --amber:#D6A45E; --clay:#C47959; --indigo:#7E90A6; --stone:#6A655A;
  --sand:#221F19; --sand-line:#2E2A22; --sand-ridge:#38332A;
}

*{box-sizing:border-box}
html,body{margin:0; background:var(--paper)}
body{
  background:var(--paper); color:var(--sumi);
  font-family:var(--sans); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{
  padding:clamp(20px,5vw,64px) clamp(16px,4vw,40px) 80px;
  min-height:100vh;
}
.inner{max-width:var(--maxw); margin:0 auto}

/* ---------- Theme toggle ---------- */
.themebtn{position:fixed; top:16px; right:16px; z-index:50; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line); background:var(--card); color:var(--sumi-soft); font-size:15px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-family:var(--sans)}
.themebtn:hover{color:var(--sumi); border-color:var(--moss)}

/* ---------- Masthead ---------- */
.masthead{display:flex; flex-direction:column; gap:14px; padding-bottom:clamp(28px,5vw,52px);
  border-bottom:1px solid var(--line)}
.brandrow{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap}
.wordmark{font-family:var(--serif); font-size:clamp(38px,7vw,64px); font-weight:600;
  letter-spacing:-.01em; line-height:.95; margin:0}
.deva{font-family:var(--serif); font-size:clamp(22px,4vw,34px); color:var(--moss); font-weight:400;
  opacity:.85}
.kicker{font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted)}
.thesis{font-family:var(--serif); font-size:clamp(19px,2.6vw,26px); line-height:1.4; max-width:34ch;
  color:var(--sumi); text-wrap:balance; margin:6px 0 0}
.thesis em{color:var(--moss-deep); font-style:italic}
.metarow{display:flex; gap:22px; flex-wrap:wrap; font-family:var(--mono); font-size:11.5px;
  color:var(--sumi-soft); margin-top:4px}
.metarow span{display:inline-flex; gap:7px; align-items:center}
.metarow b{color:var(--muted); font-weight:500}

/* ---------- Section scaffolding ---------- */
section{padding-top:clamp(40px,6vw,68px)}
.eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--moss-deep); display:flex; align-items:center; gap:12px; margin:0 0 6px}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--moss); opacity:.6}
h2.sec{font-family:var(--serif); font-size:clamp(26px,4vw,38px); font-weight:600; margin:0 0 10px;
  letter-spacing:-.01em; text-wrap:balance}
.lede{max-width:60ch; color:var(--sumi-soft); font-size:15.5px; margin:0}

/* ---------- Stage / device ---------- */
.stage{display:grid; grid-template-columns:minmax(0,300px) 1fr; gap:clamp(24px,4vw,52px);
  align-items:start; margin-top:34px}
@media (max-width:760px){ .stage{grid-template-columns:1fr; justify-items:center} }

.devicecol{display:flex; flex-direction:column; align-items:center; gap:18px; position:sticky; top:24px}
@media (max-width:760px){ .devicecol{position:static} }

.phone{
  width:288px; height:600px; border-radius:40px; position:relative;
  background:#0f0e0c;
  padding:11px;
  box-shadow:0 2px 3px rgba(0,0,0,.28), 0 28px 60px -20px rgba(30,26,20,.55),
    inset 0 0 0 1.5px rgba(255,255,255,.06);
}
.phone::after{content:""; position:absolute; top:15px; left:50%; transform:translateX(-50%);
  width:96px; height:22px; background:#0f0e0c; border-radius:0 0 14px 14px; z-index:6}
.glass{position:absolute; inset:11px; border-radius:30px; overflow:hidden; background:var(--paper-2)}
.screen{position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .45s ease;
  display:flex; flex-direction:column}
.screen.on{opacity:1; visibility:visible}

/* screen chrome */
.statusbar{height:34px; display:flex; align-items:flex-end; justify-content:space-between;
  padding:0 18px 3px; font-family:var(--mono); font-size:11px; color:var(--sumi-soft); flex:0 0 auto}
.statusbar .dots{display:flex; gap:4px; align-items:center}
.statusbar .dots i{width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.5; font-style:normal}

/* ---- Screen 1: Zen Dashboard ---- */
.dash{background:var(--paper-2); color:var(--sumi)}
.dashhead{padding:2px 20px 0}
.dashhead h3{font-family:var(--serif); font-size:20px; margin:0; font-weight:600}
.dashhead p{margin:2px 0 0; font-size:12px; color:var(--muted)}
.gardenwrap{flex:1; margin:12px 14px 6px; border-radius:20px; overflow:hidden; position:relative;
  box-shadow:inset 0 0 0 1px var(--hair)}
#garden{display:block; width:100%; height:100%}
.gardencap{position:absolute; left:0; right:0; bottom:0; padding:12px 16px;
  background:linear-gradient(transparent, rgba(0,0,0,.30)); color:#F3EEE2;
  font-family:var(--mono); font-size:11.5px; display:flex; justify-content:space-between; align-items:center}
.gardencap .state{display:inline-flex; align-items:center; gap:6px}
.gardencap .state i{width:7px; height:7px; border-radius:50%; background:var(--moss); font-style:normal}
.metricstrip{display:flex; gap:8px; padding:6px 16px 16px}
.metric{flex:1; background:var(--card); border-radius:13px; padding:9px 11px; box-shadow:inset 0 0 0 1px var(--hair)}
.metric .k{font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.metric .v{font-family:var(--mono); font-size:15px; margin-top:2px; font-variant-numeric:tabular-nums}

/* ---- Screen 2: Monitoring overlay ---- */
.reel{position:relative; flex:1; overflow:hidden; background:#14110d}
.reelbg{position:absolute; inset:0}
.reelbg::before{content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(158,92,67,.55), transparent 60%),
    radial-gradient(120% 90% at 75% 80%, rgba(76,90,110,.6), transparent 55%),
    linear-gradient(160deg,#211a16,#2c2620 55%,#181410)}
.reelbg::after{content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 2px, transparent 2px 5px); opacity:.5}
.playglyph{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:58px; height:58px; border-radius:50%; background:rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(3px)}
.playglyph::before{content:""; border-left:16px solid rgba(255,255,255,.82);
  border-top:10px solid transparent; border-bottom:10px solid transparent; margin-left:4px}
.reelmeta{position:absolute; left:16px; bottom:20px; right:70px; color:#EDE7DA; text-shadow:0 1px 6px rgba(0,0,0,.5)}
.reelmeta .u{font-family:var(--sans); font-weight:600; font-size:13px}
.reelmeta .c{font-size:11.5px; opacity:.82; margin-top:3px}
.reelrail{position:absolute; right:12px; bottom:26px; display:flex; flex-direction:column; gap:16px; align-items:center}
.reelrail i{width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.14); display:block}
.pill{position:absolute; top:44px; right:14px; z-index:5;
  font-family:var(--mono); font-size:11.5px; color:#F4EFE4;
  background:rgba(30,26,20,.42); border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  padding:6px 11px; border-radius:999px; display:flex; align-items:center; gap:7px;
  box-shadow:0 4px 14px rgba(0,0,0,.28)}
.pill .lume{width:6px; height:6px; border-radius:50%; background:var(--moss); box-shadow:0 0 8px var(--moss)}
.pill.warn .lume{background:var(--amber); box-shadow:0 0 10px var(--amber)}
.perimeter{position:absolute; inset:0; z-index:4; pointer-events:none; border-radius:0;
  box-shadow:inset 0 0 0 0 transparent; opacity:0; transition:opacity .6s}
.perimeter.on{opacity:1; animation:breathe 2s ease-in-out infinite;
  box-shadow:inset 0 0 44px 6px rgba(192,138,70,.0)}
@keyframes breathe{
  0%,100%{box-shadow:inset 0 0 30px 3px rgba(192,138,70,.16)}
  50%{box-shadow:inset 0 0 66px 10px rgba(192,138,70,.5)}
}

/* ---- Screen 3: Somatic lockout ---- */
.lockout{position:absolute; inset:0; z-index:8; background:rgba(20,17,13,.9);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
  opacity:0; visibility:hidden; transition:opacity .5s; color:#EDE7DA; text-align:center; padding:22px}
.lockout.on{opacity:1; visibility:visible}
.lockout .lead{font-family:var(--serif); font-size:19px; margin:0 0 3px; letter-spacing:.01em}
.lockout .sub{font-size:12px; color:rgba(237,231,218,.68); margin:0 0 18px; max-width:24ch}
.ringstage{position:relative; width:190px; height:190px; touch-action:none; cursor:crosshair}
#ringcanvas{position:absolute; inset:0; width:100%; height:100%}
.lockout .status{font-family:var(--mono); font-size:11.5px; margin-top:16px; color:rgba(237,231,218,.8);
  font-variant-numeric:tabular-nums; min-height:16px}
.lockout .tiltbtn{margin-top:14px; font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  background:transparent; color:#EDE7DA; border:1px solid rgba(237,231,218,.35); border-radius:999px;
  padding:8px 15px; cursor:pointer}
.lockout .tiltbtn:hover{border-color:var(--moss); color:var(--moss)}
.lockout.done .ringstage{opacity:.25; transition:opacity .6s}
.grantbadge{position:absolute; opacity:0; font-family:var(--serif); font-size:22px; color:var(--moss);
  display:flex; flex-direction:column; align-items:center; gap:4px; pointer-events:none}
.grantbadge small{font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:rgba(237,231,218,.7)}
.lockout.done .grantbadge{opacity:1; transition:opacity .6s .2s}

/* ---------- Controls ---------- */
.controls{display:flex; flex-direction:column; gap:16px; max-width:300px; width:100%}
.tabs{display:flex; background:var(--card); border-radius:13px; padding:4px; box-shadow:inset 0 0 0 1px var(--hair)}
.tabs button{flex:1; border:0; background:transparent; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.04em; text-transform:uppercase; color:var(--sumi-soft); padding:9px 4px; border-radius:9px;
  cursor:pointer; transition:.2s}
.tabs button.on{background:var(--paper-2); color:var(--sumi); box-shadow:0 1px 3px rgba(0,0,0,.12)}
.ctlcard{background:var(--card); border-radius:15px; padding:15px 16px 17px; box-shadow:inset 0 0 0 1px var(--hair)}
.ctlcard h4{margin:0 0 3px; font-size:12.5px; font-family:var(--mono); letter-spacing:.05em;
  text-transform:uppercase; color:var(--sumi-soft)}
.ctlcard p{margin:0 0 12px; font-size:12.5px; color:var(--muted)}
.sliderrow{display:flex; align-items:center; gap:12px}
.sliderrow output{font-family:var(--mono); font-size:13px; min-width:62px; text-align:right;
  font-variant-numeric:tabular-nums; color:var(--sumi)}
input[type=range]{-webkit-appearance:none; appearance:none; flex:1; height:3px; border-radius:2px;
  background:var(--hair); outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:18px; height:18px; border-radius:50%;
  background:var(--moss); cursor:pointer; border:3px solid var(--paper-2); box-shadow:0 1px 4px rgba(0,0,0,.25)}
input[type=range]::-moz-range-thumb{width:15px; height:15px; border-radius:50%; background:var(--moss);
  cursor:pointer; border:3px solid var(--paper-2)}
input[type=range]:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--moss) 40%,transparent)}
.hintline{font-size:12px; color:var(--sumi-soft); line-height:1.5}
.hintline b{color:var(--sumi)}

/* ---------- Critique ---------- */
.risks{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:32px}
@media (max-width:720px){ .risks{grid-template-columns:1fr} }
.risk{background:var(--paper-2); border-radius:16px; padding:19px 20px; box-shadow:inset 0 0 0 1px var(--line);
  display:flex; flex-direction:column; gap:9px}
.risk.span{grid-column:1/-1}
.risktop{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.rid{font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.05em}
.chip{font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; font-weight:600; display:inline-flex; align-items:center; gap:5px}
.chip::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.chip.crit{color:var(--clay); background:color-mix(in srgb,var(--clay) 15%,transparent)}
.chip.high{color:var(--amber); background:color-mix(in srgb,var(--amber) 16%,transparent)}
.chip.med{color:var(--indigo); background:color-mix(in srgb,var(--indigo) 15%,transparent)}
.risk h3{font-family:var(--serif); font-size:18.5px; margin:0; font-weight:600; letter-spacing:-.005em; text-wrap:balance}
.risk .claim{font-size:14px; color:var(--sumi-soft); margin:0}
.risk .fix{font-size:13.5px; margin:2px 0 0; padding-top:10px; border-top:1px dashed var(--hair); color:var(--sumi)}
.risk .fix b{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--moss-deep); display:block; margin-bottom:3px}

/* validate list */
.val{margin-top:30px; background:var(--card); border-radius:18px; padding:clamp(20px,3vw,30px);
  box-shadow:inset 0 0 0 1px var(--line)}
.val h3{font-family:var(--serif); font-size:21px; margin:0 0 4px; font-weight:600}
.val > p{margin:0 0 20px; color:var(--sumi-soft); font-size:14.5px; max-width:58ch}
.steps{display:grid; gap:2px}
.step{display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:baseline;
  padding:14px 0; border-top:1px solid var(--hair)}
.step:first-child{border-top:0}
.step .n{font-family:var(--mono); font-size:12px; color:var(--moss); font-variant-numeric:tabular-nums}
.step .body b{font-size:14.5px; display:block; margin-bottom:2px}
.step .body span{font-size:13px; color:var(--sumi-soft)}
.step .cost{font-family:var(--mono); font-size:11px; color:var(--muted); white-space:nowrap; text-align:right}

.verdict{margin-top:30px; border-left:3px solid var(--moss); padding:4px 0 4px 20px}
.verdict p{font-family:var(--serif); font-size:clamp(17px,2.2vw,21px); line-height:1.5; margin:0; text-wrap:balance}
.verdict em{color:var(--moss-deep); font-style:italic}

footer{margin-top:56px; padding-top:22px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11px; color:var(--muted); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px}

a.jump{color:var(--moss-deep); text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--moss) 40%,transparent)}

@media (prefers-reduced-motion:reduce){
  .perimeter.on{animation:none; box-shadow:inset 0 0 40px 6px rgba(192,138,70,.28)}
  *{scroll-behavior:auto}
}

/* ================= SITE CHROME (sidebar + doc pages) ================= */
.sitelayout{display:grid; grid-template-columns:232px 1fr; min-height:100vh; align-items:start;
  transition:grid-template-columns .2s ease}
.sitelayout.nav-collapsed{grid-template-columns:64px 1fr}
@media (max-width:820px){
  .sitelayout, .sitelayout.nav-collapsed{grid-template-columns:1fr}
}

.sitenav{position:sticky; top:0; height:100vh; overflow-y:auto; padding:22px 18px 24px;
  display:flex; flex-direction:column; gap:26px; border-right:1px solid var(--line); background:var(--paper-2)}
@media (max-width:820px){
  .sitenav{position:static; height:auto; border-right:0; border-bottom:1px solid var(--line); padding:18px 16px}
}
.sitenav.collapsed{padding-left:10px; padding-right:10px}

.navtop{display:flex; align-items:flex-start; justify-content:space-between; gap:8px}
.sitenav.collapsed .navtop{flex-direction:column-reverse; align-items:center; gap:14px}

.navcollapse{flex:0 0 auto; width:26px; height:26px; border-radius:50%; margin-top:2px;
  border:1px solid var(--line); background:var(--card); color:var(--sumi-soft);
  font-family:var(--sans); font-size:13px; line-height:1; display:flex; align-items:center;
  justify-content:center; cursor:pointer; transition:.15s}
.navcollapse:hover{color:var(--sumi); border-color:var(--moss)}
@media (max-width:820px){ .navcollapse{display:none} }

.navbrand{display:flex; flex-direction:column; gap:2px; min-width:0}
.navbrand a{text-decoration:none; color:inherit; display:flex; align-items:baseline; gap:8px}
.navword{font-family:var(--serif); font-size:22px; font-weight:600; color:var(--sumi); letter-spacing:-.01em}
.navkicker{font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.sitenav.collapsed .navword{font-size:19px}
.sitenav.collapsed .navkicker{display:none}
.sitenav.collapsed .navbrand a{justify-content:center}

.navlinks{display:flex; flex-direction:column; gap:2px; list-style:none; margin:0; padding:0}
@media (max-width:820px){ .navlinks{flex-direction:row; flex-wrap:wrap; gap:6px} }
.navlinks a{font-family:var(--mono); font-size:12px; letter-spacing:.02em; color:var(--sumi-soft);
  text-decoration:none; padding:9px 12px; border-radius:9px; display:flex; align-items:center; gap:8px;
  transition:background .15s, color .15s}
.navlinks a:hover{background:var(--card); color:var(--sumi)}
.navlinks a.active{background:var(--card); color:var(--sumi); box-shadow:inset 0 0 0 1px var(--hair); font-weight:600}
.navlinks a.active::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--moss); flex:0 0 auto}
.navlinks a:not(.active)::before{content:""; width:5px; height:5px; flex:0 0 auto}
.navlinks a .abbr{display:none; font-weight:700}
.sitenav.collapsed .navlinks a{justify-content:center; padding:9px 2px}
.sitenav.collapsed .navlinks a::before{content:none}
.sitenav.collapsed .navlinks a .lbl{display:none}
.sitenav.collapsed .navlinks a .abbr{display:inline}

.navfoot{margin-top:auto; padding-top:14px; border-top:1px solid var(--line)}
@media (max-width:820px){ .navfoot{display:none} }
.sitenav.collapsed .navfoot{display:none}
.navfoot a{font-family:var(--mono); font-size:11px; color:var(--muted); text-decoration:none}
.navfoot a:hover{color:var(--moss-deep)}

.sitemain{min-width:0}
.sitemain .wrap{padding:clamp(20px,4vw,56px) clamp(16px,4vw,56px) 80px}

/* Standalone pages (no sidebar) — privacy.html, linked from the Play listing rather than
   browsed to from the site nav, so a single centered column reads better than the full-width
   grid the sidebar layout assumes. */
.sitemain.standalone{max-width:var(--maxw); margin:0 auto}
.standalonebrand{font-family:var(--serif); font-size:20px; font-weight:600; color:var(--sumi);
  text-decoration:none; display:inline-block; margin-bottom:18px}
.standalonebrand:hover{color:var(--moss)}

/* ---- document pages (PRD, critique, remediation plan, execution plan) ---- */
.docpage{max-width:74ch}
.dockicker{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin:0 0 10px}
.docpage h1{font-family:var(--serif); font-size:clamp(28px,4.5vw,42px); font-weight:600; letter-spacing:-.01em;
  margin:0 0 8px; text-wrap:balance}
.docstatus{font-family:var(--mono); font-size:11.5px; color:var(--sumi-soft); margin:0 0 32px;
  padding-bottom:24px; border-bottom:1px solid var(--line)}
.docstatus b{color:var(--muted); font-weight:500}
.docpage h2{font-family:var(--serif); font-size:clamp(21px,3vw,27px); font-weight:600; letter-spacing:-.005em;
  margin:40px 0 12px; padding-top:26px; border-top:1px solid var(--line); text-wrap:balance}
.docpage h2:first-of-type{margin-top:0; padding-top:0; border-top:0}
.docpage h3{font-family:var(--serif); font-size:18.5px; font-weight:600; margin:22px 0 8px}
.docpage p{font-size:15.5px; line-height:1.65; color:var(--sumi-soft); margin:0 0 14px}
.docpage p strong, .docpage li strong{color:var(--sumi); font-weight:600}
.docpage em{color:var(--moss-deep); font-style:italic}
.docpage ul, .docpage ol{padding-left:1.25em; color:var(--sumi-soft); font-size:15px; line-height:1.65; margin:0 0 16px}
.docpage li{margin-bottom:7px}
.docpage code{font-family:var(--mono); font-size:.88em; background:var(--card); padding:.15em .4em;
  border-radius:5px; box-shadow:inset 0 0 0 1px var(--hair); color:var(--sumi)}
.docpage hr{border:0; border-top:1px solid var(--line); margin:32px 0}

.tablewrap{overflow-x:auto; margin:14px 0 22px}
.docpage table{width:100%; border-collapse:collapse; font-size:13.5px; min-width:520px}
.docpage th{text-align:left; font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); font-weight:600; padding:8px 14px 8px 0; border-bottom:1px solid var(--line); white-space:nowrap}
.docpage td{padding:11px 14px 11px 0; border-bottom:1px solid var(--hair); color:var(--sumi-soft); vertical-align:top}
.docpage tr:last-child td{border-bottom:0}

.callout{background:var(--card); border-radius:14px; padding:15px 18px; margin:14px 0 20px;
  box-shadow:inset 0 0 0 1px var(--hair)}
.callout .label{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--moss-deep); display:block; margin-bottom:6px}
.callout p{margin:0; font-size:14.5px}
.callout p + p{margin-top:8px}
.callout.amber .label{color:var(--amber)}
.callout.clay .label{color:var(--clay)}

.phasehead{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:40px 0 12px; padding-top:26px;
  border-top:1px solid var(--line)}
.phasehead:first-of-type{margin-top:0; padding-top:0; border-top:0}
.phasehead h2{margin:0; padding:0; border:0}
.phasetag{font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; font-weight:600; background:color-mix(in srgb, var(--moss) 15%, transparent);
  color:var(--moss-deep); white-space:nowrap}
.phasetag.next{background:color-mix(in srgb, var(--amber) 16%, transparent); color:var(--amber)}
.phasetag.done{background:color-mix(in srgb, var(--indigo) 15%, transparent); color:var(--indigo)}

/* ---- prototype page intro (context for a first-time visitor) ---- */
.pagehead{padding-bottom:clamp(26px,4vw,42px); margin-bottom:clamp(30px,5vw,48px); border-bottom:1px solid var(--line)}
.introword{font-family:var(--serif); font-size:clamp(30px,5.5vw,46px); font-weight:600; letter-spacing:-.01em;
  line-height:1; margin:0 0 14px; text-wrap:balance}
.introdeva{color:var(--moss); font-weight:400; opacity:.85; font-size:.66em}
.pagehead .thesis{margin:0; max-width:62ch}

.docpage .checklist{list-style:none; padding-left:0}
.docpage .checklist li{display:flex; gap:10px; align-items:baseline}
.docpage .checklist li::before{content:"☐"; color:var(--muted); flex:0 0 auto; font-size:13px}

/* ---- download page ---- */
.dlcard{background:var(--card); border-radius:16px; padding:clamp(18px,3vw,26px); margin:20px 0 26px;
  box-shadow:inset 0 0 0 1px var(--hair); display:flex; flex-wrap:wrap; align-items:center; gap:18px;
  justify-content:space-between}
.dlmeta{font-family:var(--mono); font-size:12.5px; color:var(--sumi-soft); line-height:1.7}
.dlmeta b{color:var(--sumi)}
.dlbtn{font-family:var(--sans); font-size:15px; font-weight:600; color:var(--paper); background:var(--moss-deep);
  border-radius:11px; padding:13px 22px; text-decoration:none; white-space:nowrap; box-shadow:0 1px 3px rgba(0,0,0,.15);
  transition:background .15s}
.dlbtn:hover{background:var(--moss)}
.stepnum{list-style:none; counter-reset:step; padding-left:0}
.stepnum li{counter-increment:step; position:relative; padding-left:34px; margin-bottom:12px; font-size:15px;
  color:var(--sumi-soft); line-height:1.6}
.stepnum li::before{content:counter(step); position:absolute; left:0; top:1px; width:22px; height:22px;
  border-radius:50%; background:var(--paper-2); box-shadow:inset 0 0 0 1px var(--hair); color:var(--sumi);
  font-family:var(--mono); font-size:11.5px; font-weight:600; display:flex; align-items:center; justify-content:center}
.stepnum li strong{color:var(--sumi)}

/* ---- features grid (landing page) ---- */
.herocta{display:flex; flex-wrap:wrap; gap:12px; margin-top:20px}
.ctabtn{font-family:var(--sans); font-size:15px; font-weight:600; text-decoration:none;
  border-radius:11px; padding:12px 20px; white-space:nowrap}
.ctabtn.primary{color:var(--paper); background:var(--moss-deep); box-shadow:0 1px 3px rgba(0,0,0,.15)}
.ctabtn.primary:hover{background:var(--moss)}
.ctabtn.ghost{color:var(--sumi); background:transparent; box-shadow:inset 0 0 0 1px var(--hair)}
.ctabtn.ghost:hover{box-shadow:inset 0 0 0 1px var(--moss)}
.buildtag{font-family:var(--mono); font-size:11px; color:var(--moss-deep); letter-spacing:.04em}

.features{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:28px}
@media (max-width:860px){ .features{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .features{grid-template-columns:1fr} }
.feature{background:var(--paper-2); border-radius:16px; padding:19px 20px; box-shadow:inset 0 0 0 1px var(--line);
  display:flex; flex-direction:column; gap:8px}
.feature .ftag{font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--moss-deep)}
.feature h3{font-family:var(--serif); font-size:17.5px; margin:0; font-weight:600; letter-spacing:-.005em; text-wrap:balance}
.feature p{font-size:13.5px; color:var(--sumi-soft); margin:0; line-height:1.6}