/* Site v3: the page is a drawing sheet. Paper surface, 1px hairlines, sharp corners.
   Colours are the three DESIGN.md candidate tokens; every other tone is a mix of them.
   Red-oxide marks action, holds and revisions only. Charcoal fills appear only inside
   model and NC1 viewports. Motion is a discrete state change of 120-300 ms. */
:root{
  --paper:#F6F5F2;--ink:#14181D;--oxide:#D94E1F;
  --mute:color-mix(in srgb,var(--ink) 70%,var(--paper));
  --hair:color-mix(in srgb,var(--ink) 28%,var(--paper));
  --hair-dk:color-mix(in srgb,var(--ink) 55%,var(--paper));
  --desk:color-mix(in srgb,var(--ink) 8%,var(--paper));
  --sans:'IBM Plex Sans',system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;
  --gut:clamp(16px,3vw,40px);--band:22px;
}
*{box-sizing:border-box}
html{scroll-padding-top:24px}
body{margin:0;background:var(--desk);color:var(--ink);font:17px/1.6 var(--sans)}
a{color:inherit;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--oxide);outline-offset:2px}
.mono{font-family:var(--mono);font-feature-settings:"tnum" 1,"zero" 1}
td,th,dd,.num{font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--paper);border:1px solid var(--ink);padding:12px 16px;font-weight:600}
.skip:focus{left:16px}
h1,h2,h3{margin:0;line-height:1.15;letter-spacing:-0.005em}
h1{font-size:clamp(32px,4.2vw,52px);font-weight:700}
h2{font-size:clamp(26px,2.8vw,36px);font-weight:700}
h3{font-size:18px;font-weight:600}
p{margin:0}
table{border-collapse:collapse;width:100%}
.lede{font-size:clamp(17px,1.4vw,19px);max-width:44em}
.fine{font-size:14px;color:var(--mute)}
.label{font:600 13px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
/* A fact that is not confirmed yet. Dashed oxide frame = open revision. */
.ph{font-family:var(--mono);font-size:.82em;border:1px dashed var(--oxide);padding:1px 5px;overflow-wrap:anywhere}

/* The sheet: a border, an inner frame, and zone letters and numbers in the band between. */
.sheet{position:relative;max-width:1320px;margin:0 auto;background:var(--paper);border:1px solid var(--ink)}
.frame{border-top:0}
@media (min-width:900px){
  .sheet{margin:20px auto;padding:var(--band)}
  .frame{border:1px solid var(--ink)}
  .zones{position:absolute;display:flex;font-size:11px;line-height:1;color:var(--mute);pointer-events:none}
  .zones-top{top:0;left:var(--band);right:var(--band);height:var(--band);align-items:center;justify-content:space-around}
  .zones-left{left:0;top:var(--band);bottom:var(--band);width:var(--band);flex-direction:column;align-items:center;justify-content:space-around}
}
@media (max-width:899px){.zones{display:none}}
.frame>header,.frame>main>section,.frame>footer,.strip{padding-left:var(--gut);padding-right:var(--gut)}
main>section{padding-top:clamp(48px,6vw,88px);padding-bottom:clamp(48px,6vw,88px);border-top:1px solid var(--hair)}
.sec-head{display:grid;gap:12px;margin-bottom:clamp(24px,3vw,40px)}

/* Buttons: sharp. Action = red-oxide fill, charcoal bold text (4.3:1, large-text AA). */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 20px;font:700 19px/1.2 var(--sans);text-decoration:none;border:1px solid var(--ink);cursor:pointer;border-radius:0;color:var(--ink)}
.btn-act{background:var(--oxide)}
.btn-act:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-line{background:transparent;font-weight:600;font-size:17px}
.btn-line:hover{background:var(--desk)}
.btn-sm{min-height:44px;padding:8px 14px;font-size:19px}
.btn .mono{font-size:13px;font-weight:500}
.btn:disabled{cursor:wait;background:var(--desk)}

.tag{display:inline-block;font:600 11px/1 var(--mono);letter-spacing:.06em;padding:4px 6px;border:1px solid var(--ink);vertical-align:2px}
.tag-hold{border-color:var(--oxide);border-left-width:6px}
.tag-ok{border-style:solid}
.tag-next{color:var(--mute);border-color:var(--hair-dk);border-style:dashed;margin:0 4px}

/* Header and the title strip under it */
.top{display:flex;align-items:center;gap:24px;min-height:72px;border-bottom:1px solid var(--ink)}
.brand svg{height:30px;width:auto;display:block}
.brand svg path,.tb-brand svg path{fill:var(--ink)}
.nav{margin-left:auto;display:flex;align-items:center;gap:22px;font-size:15px}
.nav a:not(.btn){text-decoration:none;padding:10px 0}
.nav a:not(.btn):hover{text-decoration:underline}
@media (max-width:860px){.nav a:not(.btn){display:none}}
.strip{margin:0;display:grid;grid-template-columns:.7fr 2fr 1.4fr .5fr .9fr;border-bottom:1px solid var(--ink);padding-left:0;padding-right:0}
.strip>div{padding:6px var(--gut);font-size:12px}
.strip>div+div{border-left:1px solid var(--ink)}
.strip dt{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.strip dd{margin:0}
@media (max-width:860px){.strip{grid-template-columns:1fr 1fr}.strip>div:nth-child(odd){border-left:0}.strip>div:nth-child(n+3){border-top:1px solid var(--hair)}}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,4vw,56px);align-items:start;border-top:0!important}
.hero-copy{display:grid;gap:20px;padding-top:8px}
.cta-row{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:960px){.hero{grid-template-columns:minmax(0,1fr)}}

/* Placeholders for part 2: dashed frame, hatching, a caption that says PLACEHOLDER. */
.ph-fig{margin:0;display:grid;gap:8px}
.ph-fig figcaption{font-size:12px;color:var(--mute)}
.ph-box{border:1px dashed var(--ink);min-height:300px;display:grid;align-content:center;gap:8px;padding:20px;text-align:center;background:repeating-linear-gradient(135deg,transparent 0 10px,var(--hair) 10px 11px)}
.ph-box p:not(.ph-tag){background:var(--paper);padding:2px 8px;justify-self:center;max-width:26em}
.ph-tag{font-size:12px;font-weight:600;letter-spacing:.1em;justify-self:center;background:var(--paper);padding:2px 8px;border:1px solid var(--oxide)}
.ph-compare{grid-template-columns:1fr 1fr;padding:0;gap:0;align-content:stretch;min-height:340px}
.ph-half{display:grid;align-content:center;gap:8px;padding:20px}
.ph-half+.ph-half{border-left:1px dashed var(--ink)}
.ph-tall{min-height:340px}
@media (max-width:520px){.ph-compare{grid-template-columns:1fr}.ph-half+.ph-half{border-left:0;border-top:1px dashed var(--ink)}}

/* The run panel: questions on paper, NC1 in a charcoal viewport */
.panel{margin:0 0 clamp(24px,3vw,40px);border:1px solid var(--ink)}
.panel-head,.panel-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding:8px 12px;font-size:12px;letter-spacing:.04em}
.panel-head{border-bottom:1px solid var(--ink)}
.panel-foot{border-top:1px solid var(--ink);color:var(--mute)}
.run-toggle{display:flex;border-bottom:1px solid var(--ink)}
.run-btn{flex:1 1 0;min-height:52px;padding:8px 12px;background:var(--desk);color:var(--ink);border:0;border-right:1px solid var(--ink);border-bottom:3px solid transparent;font:500 15px/1.3 var(--sans);text-align:left;cursor:pointer;border-radius:0}
.run-btn:last-child{border-right:0}
.run-btn .mono{display:block;font-size:11px;letter-spacing:.06em;color:var(--mute)}
.run-btn:hover{background:var(--paper)}
.run-btn[aria-pressed="true"]{background:var(--paper);font-weight:600;border-bottom-color:var(--ink)}
.pane{padding:18px 16px 16px;display:grid;gap:14px;min-height:300px;align-content:start;animation:pane-in 180ms ease-out}
@keyframes pane-in{from{opacity:.4}to{opacity:1}}
.pane[hidden]{display:none}
.pane-status{font-size:13px}
.questions{margin:0;padding:0;list-style:none;display:grid;gap:14px}
.questions li{border:2px solid var(--oxide);padding:12px 14px;position:relative}
.questions li::before{content:"";position:absolute;inset:-6px;border:1px dashed var(--oxide);pointer-events:none}
.q-meta{font-size:12px;margin-bottom:4px;letter-spacing:.04em;color:var(--mute)}
.pane-note{font-size:14px;color:var(--mute)}
.nc1{border:1px solid var(--ink);background:var(--ink);color:var(--paper)}
.nc1-file{font-size:12px;padding:6px 10px;border-bottom:1px solid var(--hair-dk);color:var(--paper)}
.nc1 pre{margin:0;padding:10px 12px;font-size:12.5px;line-height:1.5;max-height:360px;overflow:auto}
.nc1 .blk{font-weight:600}
.nc1 .hl{background:color-mix(in srgb,var(--paper) 14%,var(--ink));border-left:6px solid var(--oxide);padding-left:6px;margin-left:-12px;display:inline-block;width:calc(100% + 12px)}
.nc1 .ann{opacity:.8;font-weight:400}

/* In / out schedule */
.io{padding-top:0!important;border-top:0!important}
.sched{border:1px solid var(--ink)}
.sched th{text-align:left;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:10px 14px;border-bottom:1px solid var(--ink);background:var(--desk)}
.sched td{padding:10px 14px;border-top:1px solid var(--hair);vertical-align:top;width:50%}
.sched th+th,.sched td+td{border-left:1px solid var(--ink)}
@media (max-width:640px){.sched thead{display:none}.sched tr{display:grid}.sched td{width:auto}.sched td+td{border-left:0;padding-left:28px}}

/* Four steps, with grid bubbles */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--ink)}
.steps>li{padding:18px 16px;display:grid;gap:10px;align-content:start}
.steps>li+li{border-left:1px solid var(--ink)}
.bubble{width:34px;height:34px;border:1px solid var(--ink);display:grid;place-items:center;font-weight:600;font-size:15px}
.steps p:not(.bubble){font-size:15.5px}
@media (max-width:1000px){.steps{grid-template-columns:1fr 1fr}.steps>li:nth-child(3){border-left:0}.steps>li:nth-child(n+3){border-top:1px solid var(--ink)}}
@media (max-width:600px){.steps{grid-template-columns:1fr}.steps>li+li{border-left:0;border-top:1px solid var(--ink)}}

/* Recorded run: a native details, every row printed, nothing waits on scroll */
.runlog{margin-top:24px;border:1px solid var(--ink)}
.runlog summary{cursor:pointer;min-height:52px;display:flex;align-items:center;padding:8px 16px;font-weight:600;list-style:none}
.runlog summary::-webkit-details-marker{display:none}
.runlog summary::before{content:"+";font:400 20px/1 var(--mono);margin-right:12px}
.runlog[open] summary::before{content:"\2212"}
.runlog-body{border-top:1px solid var(--ink);padding:8px 0 12px}
.runlog-body>.fine{padding:8px 16px 0}
.log{list-style:none;margin:0;padding:0}
.ev{display:grid;grid-template-columns:70px minmax(0,1fr) auto;gap:10px;align-items:start;padding:8px 16px}
.ev p{font-size:14.5px;line-height:1.5}
.run-mark{display:block;font-size:11px;letter-spacing:.08em;color:var(--mute);padding:12px 16px 4px;border-top:1px solid var(--hair)}
.run-mark:first-child{border-top:0;padding-top:4px}
.kind{align-self:start;justify-self:start;font-size:11px;font-weight:600;letter-spacing:.05em;padding:4px 6px;border:1px solid var(--ink);white-space:nowrap}
.kind-ai{border-style:dashed}
.kind-person{border-style:double;border-width:3px;padding:2px 4px}
.res{font-size:11px;font-weight:600;letter-spacing:.05em;padding:3px 6px;border:1px solid var(--hair-dk);white-space:nowrap}
.res-hold{border-color:var(--oxide);border-left-width:6px}
@media (max-width:560px){.ev{grid-template-columns:minmax(0,1fr) auto}.ev .kind{grid-column:1/-1}}

/* RFI register and proof */
.register{border:1px solid var(--ink);overflow-x:auto}
.register caption{text-align:left;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--ink);caption-side:top}
.register th,.register td{text-align:left;padding:6px 12px;font-size:14px;border-bottom:1px solid var(--hair);vertical-align:top}
.register thead th{font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.register td:nth-child(-n+2){font-family:var(--mono);white-space:nowrap}
.register tbody th{background:var(--desk);font-weight:600;border-top:1px solid var(--ink)}
.register tbody th .mono{font-size:12px;margin-right:8px;border-left:6px solid var(--oxide);padding-left:6px}
.proof-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
@media (max-width:860px){.proof-grid{grid-template-columns:1fr}}

/* Sample download */
.transmittal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.transmittal .lede{margin-top:12px}
.tx-box{border:1px solid var(--ink);padding:16px;display:grid;gap:14px}
.tx caption{text-align:left;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding-bottom:8px}
.tx th,.tx td{text-align:left;padding:6px 0;border-bottom:1px solid var(--hair);font-size:14px;vertical-align:top}
.tx th{font:500 13px var(--mono);padding-right:12px;white-space:nowrap}
@media (max-width:860px){.transmittal{grid-template-columns:1fr}}

/* Deliver / boundaries table */
.table-wrap{overflow-x:auto}
.bound{border:1px solid var(--ink)}
.bound th,.bound td{text-align:left;padding:12px 14px;vertical-align:top;border-top:1px solid var(--hair);font-size:15.5px}
.bound thead th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;background:var(--desk);border-top:0;border-bottom:1px solid var(--ink)}
.bound tbody th{font-weight:600;width:20%}
.bound th+th,.bound td{border-left:1px solid var(--hair)}
.bound td:last-child{font-weight:600;border-left:1px solid var(--ink)}
@media (max-width:760px){.bound,.bound tbody,.bound tr,.bound th,.bound td{display:block}.bound thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.bound tbody th{width:auto;background:var(--desk);border-left:0}.bound td,.bound td:last-child{border-left:0}.bound tr{border-top:1px solid var(--ink)}}
.next-box{margin-top:24px;border:1px dashed var(--ink);padding:16px 18px}
.next-box h3{font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.next-box ul{margin:0;padding-left:1.1em;display:grid;gap:6px;font-size:15.5px}

/* Roles */
.roles{padding-top:0!important;border-top:0!important}
.role-list{margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--ink)}
.role-list>div{padding:16px}
.role-list>div+div{border-left:1px solid var(--ink)}
.role-list dt{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.role-list dd{margin:0;font-size:15px}
@media (max-width:860px){.role-list{grid-template-columns:1fr 1fr}.role-list>div:nth-child(3){border-left:0}.role-list>div:nth-child(n+3){border-top:1px solid var(--ink)}}
@media (max-width:520px){.role-list{grid-template-columns:1fr}.role-list>div+div{border-left:0;border-top:1px solid var(--ink)}}

/* Founder skeleton */
.founder{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,4vw,56px);align-items:start}
.founder .label{margin-bottom:12px}
@media (max-width:860px){.founder{grid-template-columns:1fr}}
.note{margin:0;border-left:3px solid var(--ink);padding:4px 0 4px 22px}
.beats{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.beats h3{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.beats p{font-size:17px;line-height:1.8}
.note figcaption{margin-top:20px;font-size:13px;color:var(--mute)}

/* Form + trust */
.send{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(20px,3vw,40px);align-items:start}
@media (max-width:900px){.send{grid-template-columns:1fr}}
.form-card{border:1px solid var(--ink);padding:clamp(18px,3vw,28px);display:grid;gap:12px}
.form-card h2{font-size:clamp(22px,2.4vw,30px)}
form{display:grid;gap:16px;margin-top:6px}
.field{display:grid;gap:6px;margin:0;padding:0;border:0}
label,legend{font-weight:600;font-size:15px;padding:0}
input[type=text],input[type=email],input[type=url],select{width:100%;min-height:48px;padding:10px 12px;font:16px var(--sans);border:1px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:0}
input[aria-invalid="true"]{border-width:3px;border-color:var(--ink)}
.opt{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:400;font-size:16px}
.opt input{width:20px;height:20px;accent-color:var(--ink)}
.opt-tag{font:500 11px var(--mono);color:var(--mute);text-transform:uppercase;margin-left:6px}
.hint{font-size:14px;color:var(--mute)}
.err{font-size:14px;font-weight:600;border-left:6px solid var(--oxide);padding-left:8px}
.hp{position:absolute;left:-9999px;width:1px;height:1px}
.status:empty{display:none}
.status{padding:12px 14px;border:1px solid var(--ink);font-size:15px}
.status.bad{border-left:6px solid var(--oxide)}
.trust{border:1px solid var(--ink);padding:clamp(18px,3vw,24px);display:grid;gap:12px}
.trust h2{font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.trust ul{margin:0;padding-left:1.1em;display:grid;gap:10px;font-size:16px}

/* FAQ */
.faq h2{margin-bottom:18px}
.faq-list{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;font-size:18px;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 22px/1 var(--mono)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 40px 20px 0;max-width:44em}

/* Footer: the sheet's title block */
.foot{border-top:1px solid var(--ink);padding-top:24px;padding-bottom:24px;display:grid;gap:14px}
.tb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.8fr);border:2px solid var(--ink)}
.tb-brand{padding:14px 16px;display:grid;gap:8px;font-size:14px;align-content:start}
.tb-brand svg{height:26px;width:auto}
.tb-cells{margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-left:2px solid var(--ink)}
.tb-cells>div{padding:10px 12px;font-size:12px}
.tb-cells>div+div{border-left:1px solid var(--ink)}
.tb-cells dt{color:var(--mute);letter-spacing:.06em;text-transform:uppercase;font-size:10.5px}
.tb-cells dd{margin:4px 0 0;font-size:13px;overflow-wrap:anywhere}
@media (max-width:980px){.tb{grid-template-columns:1fr}.tb-cells{border-left:0;border-top:2px solid var(--ink);grid-template-columns:1fr 1fr}.tb-cells>div:nth-child(odd){border-left:0}.tb-cells>div:nth-child(n+3){border-top:1px solid var(--ink)}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}