/* AI Readiness Snapshot. Design from the approved mockup (28 Sep 2026), brand
   tokens of Website Architecture 6.1. The rest of the site moves to the same
   tokens in phase 1 (Astro). */
:root{
  --ink:#181B20; --ink-muted:#565C64; --ink-faint:#737980;
  --surface:#FBFBF9; --raised:#FFFFFF; --border:#DCDED9;
  --accent:#C77A2E; --accent-ink:#FFFFFF; --accent-soft:#F3E4D3; --accent-text:#9A5A1C;
  --success:#2E7D57; --warning:#B25E09; --critical:#B03A2E;
  --tile:#161512; --tile-ink:#ffffff;
  --font-display:Archivo, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-sans:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --r-sm:6px; --r-md:10px; --r-lg:16px;
  --shadow:0 1px 2px rgba(20,24,31,.05), 0 6px 24px rgba(20,24,31,.06);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  color-scheme:dark;
  --ink:#ECEDE9; --ink-muted:#9AA0A8; --ink-faint:#80868E;
  --surface:#111317; --raised:#171A1F; --border:#282C32;
  --accent:#D98B3E; --accent-ink:#14161A; --accent-soft:#2A2016; --accent-text:#E3A260;
  --success:#4FB483; --warning:#D98B3E; --critical:#E0705F;
  --tile:#f2efe8; --tile-ink:#161512;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 30px rgba(0,0,0,.35);
}}
*{box-sizing:border-box}
body{font-family:var(--font-sans); background:var(--surface); color:var(--ink); line-height:1.55; -webkit-font-smoothing:antialiased; margin:0; font-size:16px}
a{color:inherit}
.wrap{max-width:880px; margin:0 auto; padding-inline:20px}
h1,h2,h3{font-family:var(--font-display); text-wrap:balance; line-height:1.12; margin:0}
p{margin:0}
.eyebrow{font-family:var(--font-mono); font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted)}
.accent{color:var(--accent)}

header.top{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--border)}
.top .wrap{display:flex; align-items:center; justify-content:space-between; height:60px; gap:12px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.tile{width:34px; height:34px; border-radius:9px; background:var(--tile); display:flex; align-items:center; justify-content:center}
.tile svg{width:20px; height:20px}
.wm{font-family:var(--font-display); font-weight:300; font-size:1.2rem; letter-spacing:-.01em}
.wm b{font-weight:700} .wm .s{color:var(--accent)}
.toplink{font-family:var(--font-mono); font-size:.74rem; color:var(--ink-muted); text-decoration:none}
.toplink:hover{color:var(--ink)}
.toplinks{display:flex; align-items:center; gap:22px; margin-left:auto; margin-right:10px; font-family:var(--font-mono); font-size:12.5px; letter-spacing:.02em; text-transform:uppercase}
.toplinks a{color:var(--ink-muted); text-decoration:none}
.toplinks a:hover, .toplinks a[aria-current]{color:var(--ink)}
header.top .navcta{font-family:var(--font-mono); font-size:12.5px; letter-spacing:.03em; text-transform:uppercase; text-decoration:none; padding:8px 14px; white-space:nowrap}
@media (max-width:760px){ header.top .wrap{gap:10px} .tile{width:30px; height:30px} .wm{font-size:1.05rem} .toplinks{gap:14px; font-size:11px; margin-right:4px} header.top .navcta{padding:7px 11px; font-size:11px} }
@media (max-width:400px){ .wm{display:none} }
/* same header width and height as the home page */
header.top .wrap{max-width:1080px; padding-left:24px; padding-right:24px; height:66px}

.hero{padding-block:40px 8px}
.hero h1{font-size:clamp(1.8rem,1.3rem + 2.4vw,2.8rem); font-weight:800; letter-spacing:-.02em; margin-top:14px; max-width:26ch}
.hero .lede{margin-top:14px; font-size:1.08rem; color:var(--ink-muted); max-width:60ch}
.meta{margin-top:18px; display:flex; gap:8px 18px; flex-wrap:wrap}
.meta span{font-family:var(--font-mono); font-size:.76rem; color:var(--ink-muted); display:inline-flex; align-items:center; gap:7px}
.dot{width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none}

.card{background:var(--raised); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow); margin-block:22px 20px; overflow:hidden}
.card-head{padding:16px 22px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:14px; justify-content:space-between}
.lbl{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-muted)}
.axis{color:var(--accent-text)}
.progress{height:4px; background:var(--border); border-radius:999px; flex:1; max-width:220px; overflow:hidden}
.progress i{display:block; height:100%; background:var(--accent); width:0; transition:width .35s ease}
.card-body{padding:26px 22px 28px}
.card-body:focus{outline:none}
.ts{display:flex; justify-content:center; min-height:0; margin-bottom:24px}

.step-q{font-family:var(--font-display); font-weight:700; font-size:1.3rem; letter-spacing:-.01em}
.step-q:focus{outline:none}
.step-sub{color:var(--ink-muted); margin-top:6px; font-size:.95rem}
.opts{display:grid; gap:10px; margin-top:20px}
.opt{display:flex; align-items:center; gap:13px; text-align:left; width:100%; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:14px 16px; cursor:pointer; font:inherit; color:inherit; transition:border-color .15s, background .15s}
.opt:hover{border-color:var(--accent)}
.opt:focus-visible,.btn:focus-visible,.chip:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.opt .mark{width:20px; height:20px; border-radius:50%; border:2px solid var(--border); flex:none; display:grid; place-items:center}
.opt.sq .mark{border-radius:5px}
.opt[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-soft)}
.opt[aria-pressed="true"] .mark{border-color:var(--accent)}
.opt[aria-pressed="true"] .mark::after{content:""; width:10px; height:10px; border-radius:50%; background:var(--accent)}
.opt.sq[aria-pressed="true"] .mark::after{border-radius:2px}
.opt[disabled]{opacity:.45; cursor:not-allowed}
.opt .txt{font-weight:500}

.sub-h{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted); margin-top:22px}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.chip{font:inherit; font-size:.92rem; background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:8px 15px; cursor:pointer; color:inherit; font-variant-numeric:tabular-nums}
.chip:hover{border-color:var(--accent)} .chip[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent)}

.nav{display:flex; justify-content:space-between; align-items:center; margin-top:24px; gap:12px; flex-wrap:wrap}
.btn{font:inherit; font-weight:600; border-radius:var(--r-sm); padding:11px 18px; cursor:pointer; border:1px solid var(--border); background:transparent; color:var(--ink)}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.btn.primary[disabled]{opacity:.45; cursor:not-allowed}
.btn.ghost{color:var(--ink-muted); border-color:transparent}

.urlrow{display:flex; gap:10px; margin-top:20px; flex-wrap:wrap}
.urlrow input{flex:1; min-width:200px}
input[type=text],input[type=email],input[type=url],textarea{font:inherit; padding:11px 14px; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--raised); color:var(--ink); width:100%}
input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
textarea{min-height:80px; resize:vertical; margin-top:12px}
.note{margin-top:14px; font-size:.9rem; color:var(--ink-muted)}
.err{margin-top:10px; color:var(--critical); font-size:.92rem}
.scanlog{list-style:none; padding:0; margin:18px 0 0; display:grid; gap:9px; font-family:var(--font-mono); font-size:.82rem}
.scanlog li{display:flex; gap:10px; align-items:center; color:var(--ink-faint)}
.scanlog li.done{color:var(--ink)}
.scanlog li .st{width:16px; flex:none; text-align:center}
.scanlog li.done .st{color:var(--success)}
.readbox{margin-top:20px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); padding:18px}
.readbox .say{font-size:1.02rem}
.facts{display:grid; grid-template-columns:150px 1fr; gap:8px 16px; margin:16px 0 0; font-size:.9rem}
.facts dt{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); padding-top:3px}
.facts dd{margin:0}
.src{margin-top:14px; font-family:var(--font-mono); font-size:.7rem; color:var(--ink-faint)}
.warn{margin-top:16px; padding:13px 15px; border-left:3px solid var(--critical); background:color-mix(in srgb, var(--critical) 9%, transparent); border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:.93rem}

.rep-sec{padding-block:22px; border-top:1px solid var(--border)}
.rep-sec:first-child{border-top:0; padding-top:0}
.rep-h{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-text)}
.rep-t{font-family:var(--font-display); font-weight:800; font-size:1.55rem; letter-spacing:-.02em; margin-top:8px}
.rep-p{margin-top:10px; color:var(--ink-muted); max-width:62ch}
.big{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-top:10px}
.big .n{font-family:var(--font-display); font-weight:800; font-size:clamp(2.2rem,1.6rem + 2.6vw,3.2rem); letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.big .u{color:var(--ink-muted)}
.est{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--warning); border:1px solid currentColor; border-radius:999px; padding:1px 7px}
.math{margin-top:10px; font-family:var(--font-mono); font-size:.78rem; color:var(--ink-muted); font-variant-numeric:tabular-nums}
.opps{display:grid; gap:12px; margin-top:16px}
.opp{border:1px solid var(--border); border-radius:var(--r-md); padding:16px 18px; background:var(--surface)}
.opp .top{display:flex; justify-content:space-between; gap:10px; align-items:baseline; flex-wrap:wrap}
.opp h3{font-size:1.08rem; font-weight:700}
.opp .from{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint)}
.opp p{margin-top:8px; font-size:.93rem}
.opp dl{display:grid; grid-template-columns:120px 1fr; gap:6px 14px; margin:12px 0 0; font-size:.88rem}
.opp dt{font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted); padding-top:2px}
.opp dd{margin:0; color:var(--ink-muted)}
.opp .exp-h{margin-top:14px; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-text)}
.opp .exp-h + dl{margin-top:6px}
.smq{margin:8px 0 0; padding-left:1.3em; color:var(--ink-muted); max-width:62ch}
.smq li{margin-top:4px}
.matrix{display:grid; grid-template-columns:minmax(0,300px) 1fr; gap:22px; align-items:center; margin-top:16px}
.matrix svg{width:100%; max-width:300px; height:auto; display:block; color:var(--ink)}
.rlist{display:grid; gap:10px}
.rrow{display:grid; grid-template-columns:auto 1fr; gap:4px 12px; align-items:baseline}
.pill{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:999px; white-space:nowrap}
.pill.good{color:var(--success); background:color-mix(in srgb, var(--success) 14%, transparent)}
.pill.part{color:var(--warning); background:color-mix(in srgb, var(--warning) 16%, transparent)}
.pill.gap{color:var(--critical); background:color-mix(in srgb, var(--critical) 13%, transparent)}
.rrow .k{font-weight:600}
.rrow .v{grid-column:2; color:var(--ink-muted); font-size:.9rem}
.start{margin-top:4px; padding:20px; border-radius:var(--r-md); background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 35%, var(--border))}
.start .t{font-family:var(--font-display); font-weight:700; font-size:1.2rem; margin-top:6px}
.start .d{color:var(--ink-muted); margin-top:8px; font-size:.94rem}
.stage{margin-top:14px; font-size:.98rem; font-style:italic}
.capture{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap}
.capture input{flex:1; min-width:180px}
.capbox{margin-top:18px; padding:16px 18px; border:1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius:var(--r-md); background:var(--accent-soft)}
.capbox .k{font-weight:700; font-family:var(--font-display)}
.capbox .d{color:var(--ink-muted); font-size:.92rem; margin-top:4px}
.consent{display:flex; gap:8px; align-items:flex-start; margin-top:10px; font-size:.84rem; color:var(--ink-muted)}
.consent input{margin-top:3px; accent-color:var(--accent); flex:none}
.consent a{color:var(--accent-text)}
.thanks{margin-top:12px; color:var(--success); font-weight:600; font-size:.95rem}

.foot{border-top:1px solid var(--border); padding-block:20px 30px; color:var(--ink-muted); font-size:.82rem; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap}
.foot a{color:var(--ink-muted)}

@media (max-width:620px){
  .facts,.opp dl{grid-template-columns:1fr; gap:2px}
  .facts dd,.opp dd{margin-bottom:8px}
  .matrix{grid-template-columns:1fr}
  .card-body{padding:22px 16px 24px}
  .card-head{padding:14px 16px}
}
@media (prefers-reduced-motion: reduce){ *{transition:none !important} }

/* Plain text pages (privacy, reader) */
.doc{max-width:720px; padding-block:40px 30px}
.doc h1{font-size:clamp(1.8rem,1.4rem + 1.6vw,2.4rem); font-weight:800; letter-spacing:-.02em}
.doc h2{font-size:1.1rem; font-weight:700; margin-top:28px}
.doc p,.doc li{color:var(--ink-muted); margin-top:10px}
.doc ul{padding-left:20px}
.doc pre{background:var(--raised); border:1px solid var(--border); border-radius:var(--r-sm); padding:12px 14px; font-family:var(--font-mono); font-size:.85rem; overflow-x:auto}
.draft-banner{margin-top:18px; padding:12px 14px; border-left:3px solid var(--warning); background:color-mix(in srgb, var(--warning) 10%, transparent); font-size:.92rem}

/* Proposal form (/contact.html) */
.steps{margin:22px 0 0; padding-left:20px; display:grid; gap:8px; max-width:62ch; color:var(--ink-muted)}
.steps b{color:var(--ink)}
.pform{display:grid; gap:16px}
.fld{display:grid; gap:6px; font-weight:600; font-size:.95rem}
.fld em{font-style:normal; font-weight:400; color:var(--ink-faint); font-size:.85rem}
.fld textarea{margin-top:0}
.hint{font-weight:400; color:var(--ink-muted); font-size:.82rem}
select{font:inherit; padding:11px 14px; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--raised); color:var(--ink); width:100%}
select:focus-visible{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
.hp{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}
.under{margin:0 0 20px}
.under a,.rep-p a{color:var(--accent-text)}