/* design-identity.md — warm-paper brutalism */
:root{--paper:#f6f4ee;--card:#fffdf8;--ink:#111110;--mute:#66625a;--soft:#e4e0d5;--accent:#e8322a;--accent-ink:#ffffff;--highlight:#fdeeda;--ok:#1d7a3c}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font:400 17px/1.6 Archivo,sans-serif;position:relative}
/* breathing dot grid — two layers drifting slowly out of phase */
body::before,body::after{content:"";position:fixed;inset:-40px;pointer-events:none;z-index:-1;
  background-image:radial-gradient(#d9d4c6 1px,transparent 1px);background-size:22px 22px}
body::after{background-image:radial-gradient(#e3ddcd 1px,transparent 1px);background-position:11px 11px}
@media(prefers-reduced-motion:no-preference){
  body::before{animation:drift1 9s ease-in-out infinite alternate}
  body::after{animation:drift2 13s ease-in-out infinite alternate}
  @keyframes drift1{0%{transform:translate(0,0)}35%{transform:translate(12px,-8px)}70%{transform:translate(-8px,11px)}100%{transform:translate(6px,6px)}}
  @keyframes drift2{0%{transform:translate(0,0);opacity:1}30%{transform:translate(-11px,-7px);opacity:.45}65%{transform:translate(9px,9px);opacity:.9}100%{transform:translate(-6px,12px);opacity:.55}}
}
nav,.runhead,footer{position:relative;background:var(--paper)}
.mono{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.wrap{max-width:1120px;margin:0 auto;padding:0 40px}
a{color:inherit}
.r{color:var(--accent)}

nav{border-bottom:2px solid var(--ink);background:var(--paper)}
nav .wrap{display:flex;justify-content:space-between;align-items:center;padding:18px 40px}
.logo{font:400 22px 'Archivo Black';letter-spacing:-.02em}
.btn{border:2px solid var(--ink);background:var(--accent);color:var(--accent-ink);padding:14px 26px;
  font:400 15px 'Archivo Black';text-transform:uppercase;cursor:pointer;display:inline-block;text-decoration:none;
  box-shadow:4px 4px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn:active{transform:translate(4px,4px) scale(.98);box-shadow:0 0 0 var(--ink)}
.btn.ghost{background:var(--card);color:var(--ink);box-shadow:3px 3px 0 var(--ink);font-size:13px;padding:10px 18px}
.btn:disabled{opacity:.5;cursor:default}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* landing */
.hero{padding-block:100px 80px}
h1{font:400 68px/1.03 'Archivo Black';letter-spacing:-.025em;text-transform:uppercase;max-width:880px;text-wrap:balance}
.sub{max-width:580px;margin:32px 0 0;font-size:19px;line-height:1.55;color:#3b382f}
.sub b{font-weight:600;background:var(--highlight);padding:0 4px}
.runform{display:flex;gap:14px;max-width:640px;margin:40px 0 0}
.runform input{flex:1;border:2px solid var(--ink);background:var(--card);padding:16px 18px;font:400 16px 'Space Mono',monospace;color:var(--ink)}
.note{margin-top:15px;color:var(--mute)}
.err{margin-top:12px;color:var(--accent);font-weight:600;display:none}
.break{border:0;border-top:2px solid var(--ink)}

/* run layout */
.runhead{border-bottom:2px solid var(--ink);background:var(--paper)}
.runhead .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:14px 40px}
.runhead .verdict{font-size:15px;color:#3b382f}
.layout{display:grid;grid-template-columns:250px 1fr;gap:44px;padding:44px 0 120px}
.rail{position:sticky;top:24px;align-self:start;background:var(--card);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:20px 22px}
.rail .step{display:flex;gap:10px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--soft);font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.rail .step.done{color:var(--ink)}
.rail .step.running{color:var(--ink)}
.rail .step .tick{width:14px;display:inline-block}
.rail .step.done .tick{color:var(--ok)}
.rail .step.running .tick{color:var(--accent);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.15}}
.rail .loglines{margin-top:18px;border-top:2px solid var(--ink);padding-top:12px}
.rail .loglines div{font-family:'Space Mono',monospace;font-size:11px;line-height:1.5;color:#4d4a42;padding:3px 0;letter-spacing:.02em}

/* top stepper */
.stepper{display:flex;align-items:center;gap:8px;padding:26px 0 6px;flex-wrap:wrap}
.sq{width:34px;height:34px;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;font:700 14px 'Space Mono',monospace;background:var(--card)}
.sq.done{background:var(--ink);color:var(--paper)}
.sq.active{box-shadow:3px 3px 0 var(--ink)}
.dash{width:22px;border-top:2px solid var(--ink)}
.dash.ghost{border-top-style:dashed;border-color:#b9b3a4}
.lockgroup{display:flex;align-items:center;gap:8px}
.sq.locked{border-style:dashed;border-color:#b9b3a4;color:#b9b3a4;background:transparent}
.locklabel{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#b9b3a4;margin-left:2px;max-width:86px;line-height:1.4}

/* content cards */
.panel{background:var(--card);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:30px 32px;margin-top:28px}
main>.panel:first-child,main>.backlink:first-child{margin-top:0}
.panel h2{font:400 24px 'Archivo Black';letter-spacing:-.01em;text-transform:uppercase;margin-bottom:16px}
.panel h2 .r{color:var(--accent)}
.bignum{font:400 56px/1 'Archivo Black';letter-spacing:-.02em}
.bignum .r{color:var(--accent)}
.kv{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{border:1.5px solid var(--ink);background:var(--paper);padding:4px 10px;font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.04em}
.chip.ghosted{border-color:#b9b3a4;color:#b9b3a4}
.chip.hit{background:var(--ink);color:var(--paper)}
.complist{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.comprow{display:flex;justify-content:space-between;align-items:center;border:1.5px solid var(--soft);background:var(--paper);padding:10px 14px;font-family:'Space Mono',monospace;font-size:13px}
.comprow .n{color:var(--mute);font-size:11px}
.gap{border:2px solid var(--ink);background:var(--paper);padding:20px 22px;margin-top:14px}
.gap .fmt{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;border:1.5px solid var(--ink);padding:2px 8px;background:var(--card)}
.gap h3{font:600 19px Archivo;margin:10px 0 6px}
.gap p{font-size:15px;color:#3b382f}
.gap .ev{margin-top:8px;font-family:'Space Mono',monospace;font-size:11px;color:var(--mute);letter-spacing:.03em}
.brief{border:2px solid var(--ink);background:var(--paper);padding:24px 26px;margin-top:16px}
.brief h3{font:400 21px 'Archivo Black';letter-spacing:-.01em}
.brief .angle{margin:10px 0;font-size:15.5px}
.brief .angle b{background:var(--highlight);padding:0 4px;font-weight:600}
.brief ol{margin:12px 0 0 20px;font-size:15px;color:#3b382f}
.brief ol li{padding:3px 0}
.brief .first{margin-top:14px;border-left:3px solid var(--accent);padding:6px 0 6px 14px;font-size:15px;font-style:italic;color:#3b382f}
.brief.teased{position:relative;max-height:120px;overflow:hidden}
.brief.teased::after{content:"";position:absolute;inset:auto 0 0 0;height:80px;background:linear-gradient(transparent,var(--paper))}
.tease-cta{margin-top:10px;font-family:'Space Mono',monospace;font-size:12px;color:var(--mute);letter-spacing:.06em;text-transform:uppercase}

/* focused complete state */
.focuswhy{margin-top:12px;max-width:600px;font-size:16.5px;color:#3b382f}
.gaprows{margin-top:20px}
.gaprow{display:flex;gap:16px;align-items:baseline;border:2px solid var(--ink);background:var(--paper);padding:14px 18px;margin-top:10px}
.gaprow .gn{font:400 20px 'Archivo Black';color:var(--accent);min-width:22px}
.gaprow h3{font:600 17px Archivo}
.gaprow .ev{display:block;margin-top:3px;color:var(--mute);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em}
.receipts{margin-top:18px;color:var(--mute)}
.receipts a{color:var(--ink)}
.backlink{margin-top:26px}
.backlink a{color:var(--ink)}
.sq.done{cursor:pointer}

/* offer */
.offer{border:2px solid var(--ink);background:var(--card);box-shadow:6px 6px 0 var(--ink);padding:38px 40px;margin-top:44px}
.offer h2{font:400 34px 'Archivo Black';letter-spacing:-.02em;text-transform:uppercase}
.offer h2 .r{color:var(--accent)}
.offer p{max-width:600px;margin:16px 0 24px;font-size:16.5px;color:#3b382f}
.offer .micro{margin-top:14px;color:var(--mute)}

/* sticky bar */
.sticky{position:fixed;left:0;right:0;bottom:0;background:var(--ink);color:var(--paper);border-top:2px solid var(--ink);transform:translateY(110%);transition:transform .25s;z-index:40}
.sticky.on{transform:none}
.sticky .wrap{display:flex;justify-content:space-between;align-items:center;padding:14px 40px;gap:20px}
.sticky .mono .r{color:#ff6a5e}

/* checkout modal */
.overlay{position:fixed;inset:0;background:rgba(17,17,16,.45);display:none;align-items:flex-start;justify-content:center;z-index:50;padding:40px 28px;overflow-y:auto}
.overlay.on{display:flex}
.modal{background:var(--card);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink);max-width:860px;width:100%;position:relative;margin:auto}
.modal .x{position:absolute;top:-16px;right:-16px;border:2px solid var(--ink);background:var(--card);width:34px;height:34px;font:700 17px 'Space Mono';cursor:pointer;box-shadow:3px 3px 0 var(--ink);z-index:1}
.mgrid{display:grid;grid-template-columns:1fr 1.15fr}
.mleft{border-right:2px solid var(--ink);background:var(--paper);padding:40px 34px}
.mright{padding:40px 38px}
.modal h3{font:400 24px 'Archivo Black';text-transform:uppercase;letter-spacing:-.01em}
.mval{list-style:none;margin:18px 0 22px}
.mval li{padding:6px 0;font-size:15px;color:#3b382f}
.mval li::before{content:"→ ";color:var(--accent);font-weight:700}
.mtiles{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.mtile{border:1.5px solid var(--ink);background:var(--card);padding:10px 12px}
.mtile .mono{display:block;color:var(--mute);font-size:9.5px}
.mtile b{font:400 17px 'Archivo Black';letter-spacing:-.01em}
.mquote{border:1.5px solid var(--ink);background:var(--card);padding:18px 20px;margin-top:22px}
.mquote p{font-size:15px;font-style:italic;color:#3b382f}
.mquote>.mono{display:block;margin-top:10px;color:var(--mute);font-size:10.5px}
.mstat{border-top:1px solid var(--soft);margin-top:14px;padding-top:12px;font-size:14px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.mstat b{font:400 18px 'Archivo Black';color:var(--accent)}
.mstat .mono{color:var(--mute);font-size:9px;margin-left:auto}
.mframe{border:1.5px solid var(--ink);background:var(--highlight);padding:14px 16px;margin:20px 0 6px;font-size:14.5px}
.mframe b{font-weight:600;display:block;margin-bottom:4px}
.mframe p{color:#3b382f}
.modal label{display:block;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin:16px 0 6px}
.mright label:first-child{margin-top:0}
.modal input{width:100%;border:2px solid var(--ink);background:var(--paper);padding:12px 14px;font:400 16px 'Space Mono',monospace}
.modal .row{display:flex;gap:12px}
.modal .btn{width:100%;margin-top:24px;text-align:center}
.modal .secure{margin-top:12px;text-align:center;color:var(--mute)}
.modal .secure a{color:var(--mute)}
.merr{margin-top:10px;color:var(--accent);font-weight:700;min-height:1em}
#stripewrap{min-height:420px;margin-top:4px}
.modal.paying .mright{padding:22px 20px}
.loadpanel{display:flex;align-items:center;gap:12px;border-style:dashed;box-shadow:none;color:var(--mute)}
main>.panel{transition:opacity .35s}
main>.panel.past{opacity:.45}
main>.panel.past:hover{opacity:1}
.loadpanel .cursor,.frame .cursor{display:inline-block;width:9px;height:15px;background:var(--accent);animation:blink 1s steps(2) infinite}
.demo-tag{position:absolute;top:-14px;left:18px;background:var(--accent);color:#fff;font:700 10px 'Space Mono';letter-spacing:.14em;padding:3px 10px;text-transform:uppercase}

footer{border-top:2px solid var(--ink);padding:24px 0;color:var(--mute);margin-top:40px}

/* ── landing sections ── */
section{padding:90px 0}
section.tight{padding:60px 0}
.h2{font:400 38px/1.1 'Archivo Black';letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance}
.h2 .r{color:var(--accent)}
.process{border-bottom:2px solid var(--ink)}
.process .flow{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:center;font-family:'Space Mono',monospace;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.process .flow .arrow{color:var(--accent)}
.process .stats{display:flex;justify-content:center;gap:44px;flex-wrap:wrap;margin-top:26px;color:var(--mute)}
.process .stats b{color:var(--ink);font-family:'Space Mono',monospace}

.frame{border:2px solid var(--ink);background:var(--card);box-shadow:6px 6px 0 var(--ink);margin-top:36px}
.frame .bar{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--ink);padding:10px 18px}
.frame .bar .dots span{display:inline-block;width:10px;height:10px;border:1.5px solid var(--ink);border-radius:50%;margin-right:5px}
.frame .body{display:grid;grid-template-columns:1fr 1fr;min-height:280px}
.frame .feed{border-right:2px solid var(--ink);padding:18px 20px;font-family:'Space Mono',monospace;font-size:12.5px;line-height:1.7;color:#3b382f}
.frame .feed div{opacity:0;animation:none}
.frame .feed div.on{opacity:1}
.frame .feed .cursor{display:inline-block;width:8px;height:14px;background:var(--accent);vertical-align:-2px;animation:blink 1s steps(2) infinite}
.frame .out{padding:18px 20px}
.frame .out .gapmini{border:1.5px solid var(--ink);background:var(--paper);padding:12px 14px;margin-bottom:10px;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.frame .out .gapmini.on{opacity:1;transform:none}
.frame .out .gapmini .fmt{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--ink);padding:1px 6px;background:var(--card)}
.frame .out .gapmini h4{font:600 15px Archivo;margin-top:6px}
.framecap{margin-top:14px;text-align:center;color:var(--mute)}

.evidence .card{background:var(--card);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:36px 40px;margin-top:34px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:36px}
.evidence .big{font:400 52px/1 'Archivo Black';color:var(--accent);letter-spacing:-.02em}
.evidence .card p{margin-top:12px;font-size:15px;color:#3b382f}
.means{border:2px solid var(--ink);background:var(--highlight);padding:20px 26px;margin-top:22px;font-size:16.5px}
.means b{font-weight:600}

.how{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;margin-top:34px}
.how .card{background:var(--card);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:26px 24px}
.how .n{font:400 30px 'Archivo Black';color:var(--accent)}
.how h3{font:600 18px Archivo;margin:10px 0 6px}
.how p{font-size:15px;color:#3b382f}

.pricing .offer{margin-top:34px}
.pricing ul{list-style:none;margin:18px 0 24px}
.pricing li{padding:7px 0;border-bottom:1px solid var(--soft);font-size:16px}
.pricing li::before{content:"→ ";color:var(--accent);font-weight:700}

.faq{max-width:760px}
.faq details{border:2px solid var(--ink);background:var(--card);margin-top:12px}
.faq summary{cursor:pointer;padding:16px 20px;font:600 16.5px Archivo;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::after{content:"+";font:700 20px 'Space Mono'}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 20px 16px;font-size:15.5px;color:#3b382f}

@media(max-width:860px){
  .wrap{padding:0 22px}
  nav .wrap{padding:14px 22px}
  .hero{padding-block:64px 56px}
  h1{font-size:40px;line-height:1.06}
  .sub{font-size:17px;margin-top:24px}
  .runform{flex-direction:column;margin-top:32px}
  .btn{text-align:center}
  .note{margin-top:14px}
  section{padding:64px 0}
  .h2{font-size:29px}
  .layout{grid-template-columns:1fr;gap:28px;padding:28px 0 110px}
  .rail{position:static}
  .complist{grid-template-columns:1fr}
  .panel{padding:22px 20px;box-shadow:4px 4px 0 var(--ink)}
  .offer{padding:26px 22px}
  .bignum{font-size:42px}
  .frame .body{grid-template-columns:1fr}
  .frame .feed{border-right:0;border-bottom:2px solid var(--ink)}
  .evidence .card{grid-template-columns:1fr;gap:26px;padding:26px 24px}
  .how{grid-template-columns:1fr}
  .process .stats{gap:18px}
  .sticky .wrap{flex-direction:column;gap:10px;padding:12px 22px}
  .runhead .wrap{flex-direction:column;align-items:flex-start;gap:12px;padding:14px 22px}
  .mgrid{grid-template-columns:1fr}
  .mleft{order:2;border-right:0;border-top:2px solid var(--ink);padding:28px 24px}
  .mright{padding:28px 24px}
  .modal .x{top:-14px;right:6px}
  footer{margin-top:24px}
}

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