:root{
  --paper:#F1F4F3;
  --paper-2:#E7EBEA;
  --ink:#14181C;
  --ink-60:#4A545C;
  --rule:#C2CBCE;
  --datum:#1B4B5A;
  --revision:#B4331F;
  --cleared:#2F6B4F;
  --max:1180px;
  --gut:clamp(20px,5vw,64px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:17px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:var(--datum)}

/* ---- drafting type system ---- */
.eyebrow{
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-60);
}
.mono{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
h1,h2,h3{font-family:"Archivo",sans-serif;line-height:1.06;letter-spacing:-.022em}
h1{font-size:clamp(38px,6.6vw,72px);font-weight:800;text-wrap:balance}
h2{font-size:clamp(28px,4.2vw,46px);font-weight:700;text-wrap:balance}
h3{font-size:clamp(19px,2.2vw,23px);font-weight:600;letter-spacing:-.012em}
p{max-width:66ch}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
section{padding-block:clamp(60px,9vw,116px);border-top:1px solid var(--rule)}
.lead{font-size:clamp(18px,2.1vw,21px);color:var(--ink-60);line-height:1.55}

/* section heading with drafting callout */
.sechead{display:flex;align-items:baseline;gap:14px;margin-bottom:12px}
.sechead .tick{
  flex:0 0 auto;width:34px;height:1px;background:var(--ink);
  position:relative;top:-6px;
}
.sechead .tick::after{
  content:"";position:absolute;right:0;top:-3px;
  border-left:6px solid var(--ink);border-block:3.5px solid transparent;
}

/* ---- header ---- */
.masthead{
  position:sticky;top:0;z-index:60;background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.masthead .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;min-height:60px;
}
.brandmark{
  font-family:"Archivo",sans-serif;font-weight:800;font-size:16px;
  letter-spacing:-.01em;text-decoration:none;color:var(--ink);
  display:flex;align-items:center;gap:9px;
}
.brandmark span{
  display:inline-block;width:11px;height:11px;
  border:2px solid var(--datum);transform:rotate(45deg);
}
.navlinks{display:flex;gap:24px;align-items:center}
.navlinks a{
  font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;color:var(--ink-60);
}
.navlinks a:hover{color:var(--ink)}
@media(max-width:820px){.navlinks{display:none}}

/* ---- buttons ---- */
.btn{
  display:inline-block;background:var(--datum);color:#fff;
  font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:500;
  letter-spacing:.07em;text-transform:uppercase;text-decoration:none;
  padding:15px 26px;border:0;cursor:pointer;transition:background .16s ease;
}
.btn:hover{background:#0F3542}
.btn-ghost{
  background:transparent;color:var(--ink);
  border:1px solid var(--ink);padding:14px 25px;
}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}

/* ---- hero ---- */
.hero{border-top:0;padding-block:clamp(50px,8vw,96px) clamp(52px,8vw,100px)}
.hero .alarm{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:26px;
  border-left:3px solid var(--revision);padding:6px 0 6px 13px;
}
.hero .alarm b{color:var(--revision);font-weight:600}
.hero h1{margin-bottom:22px}
.hero .lead{margin-bottom:34px;max-width:60ch}
.herocta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:44px}
.herocta small{
  font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-60);
}

/* spec strip — signature drafting device */
.specstrip{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--ink);background:var(--paper-2);
}
.specstrip div{padding:16px 18px;border-right:1px solid var(--rule)}
.specstrip div:last-child{border-right:0}
.specstrip dt{
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-60);margin-bottom:6px;
}
.specstrip dd{
  font-family:"Archivo",sans-serif;font-weight:700;font-size:clamp(17px,2.3vw,25px);
  letter-spacing:-.02em;
}
@media(max-width:760px){
  .specstrip{grid-template-columns:1fr 1fr}
  .specstrip div{border-bottom:1px solid var(--rule)}
  .specstrip div:nth-child(2n){border-right:0}
}

/* ---- generic grid ---- */
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,66px);align-items:start}
@media(max-width:860px){.cols2{grid-template-columns:1fr}}

/* ---- scope lists ---- */
.scopegrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);margin-top:38px}
@media(max-width:760px){.scopegrid{grid-template-columns:1fr}}
.scopelist{list-style:none}
.scopelist li{
  display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--rule);
  font-size:16px;line-height:1.5;
}
.scopelist li::before{
  font-family:"IBM Plex Mono",monospace;font-size:13px;flex:0 0 auto;
  padding-top:2px;
}
.scopelist.in li::before{content:"✓";color:var(--cleared);font-weight:600}
.scopelist.out li::before{content:"—";color:var(--ink-60)}
.scopelist.out li{color:var(--ink-60)}

/* ---- phase timeline w/ dimension lines ---- */
.phases{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:46px}
.phase{padding:0 20px 4px 0;position:relative}
.phase:not(:last-child){border-right:1px solid var(--rule);padding-right:22px;margin-right:0}
.phase:not(:first-child){padding-left:22px}
.dim{
  display:flex;align-items:center;gap:7px;margin-bottom:16px;
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--datum);
}
.dim::before,.dim::after{content:"";height:1px;background:var(--datum);flex:1 1 auto;min-width:8px}
.phase h3{margin-bottom:9px}
.phase p{font-size:15.5px;color:var(--ink-60);line-height:1.55}
@media(max-width:900px){
  .phases{grid-template-columns:1fr 1fr}
  .phase{border-right:0!important;padding:0 0 30px!important}
}
@media(max-width:560px){.phases{grid-template-columns:1fr}}

/* ---- pricing ---- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:44px;border:1px solid var(--ink)}
.tier{padding:clamp(22px,3vw,32px);border-right:1px solid var(--rule);display:flex;flex-direction:column}
.tier:last-child{border-right:0}
.tier.feature{background:var(--paper-2)}
.tier .tname{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-60);margin-bottom:16px;
}
.tier .price{
  font-family:"Archivo",sans-serif;font-weight:800;
  font-size:clamp(32px,4.6vw,46px);letter-spacing:-.03em;line-height:1;
}
.tier .per{
  font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-60);
  margin-top:8px;margin-bottom:20px;display:block;
}
.tier ul{list-style:none;font-size:15.5px;line-height:1.5;flex:1 1 auto}
.tier li{padding:8px 0;border-bottom:1px solid var(--rule)}
.tier .btn{margin-top:24px;text-align:center}
@media(max-width:880px){
  .tiers{grid-template-columns:1fr}
  .tier{border-right:0;border-bottom:1px solid var(--rule)}
  .tier:last-child{border-bottom:0}
}
.pricenote{
  margin-top:22px;font-size:15px;color:var(--ink-60);
  border-left:3px solid var(--rule);padding-left:15px;
}

/* ---- credentials revision table ---- */
.revtable{width:100%;border-collapse:collapse;margin-top:30px;font-size:15px}
.revtable th{
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-60);text-align:left;
  padding:9px 14px 9px 0;border-bottom:1px solid var(--ink);font-weight:500;
}
.revtable td{padding:11px 14px 11px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.revtable td:first-child{font-family:"IBM Plex Mono",monospace;font-size:13px;white-space:nowrap;color:var(--datum)}

/* ---- faq ---- */
.faq{margin-top:36px}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 34px 20px 0;position:relative;
  font-family:"Archivo",sans-serif;font-weight:600;font-size:clamp(17px,2vw,20px);
  letter-spacing:-.012em;line-height:1.28;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:4px;top:19px;
  font-family:"IBM Plex Mono",monospace;font-size:20px;color:var(--datum);
}
.faq details[open] summary::after{content:"–"}
.faq .answer{padding:0 0 22px}
.faq .answer p + p{margin-top:13px}

/* ---- form ---- */
.formwrap{background:var(--paper-2);border:1px solid var(--ink);padding:clamp(24px,4vw,42px);margin-top:38px}
.field{margin-bottom:20px}
.field label{
  display:block;font-family:"IBM Plex Mono",monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60);margin-bottom:7px;
}
.field label .req{color:var(--revision)}
.field input,.field select{
  width:100%;padding:12px 14px;font-family:"IBM Plex Sans",sans-serif;font-size:16px;
  background:var(--paper);border:1px solid var(--rule);color:var(--ink);border-radius:0;
}
.field input:focus,.field select:focus{outline:2px solid var(--datum);outline-offset:1px;border-color:var(--datum)}
.fieldrow{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:640px){.fieldrow{grid-template-columns:1fr}}
.formnote{font-size:14px;color:var(--ink-60);margin-top:16px}

/* ---- footer title block ---- */
.titleblock{border-top:2px solid var(--ink);background:var(--paper-2)}
.tbgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;border-top:1px solid var(--rule)}
.tbcell{padding:18px 20px;border-right:1px solid var(--rule)}
.tbcell:last-child{border-right:0}
.tbcell dt{
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink-60);margin-bottom:6px;
}
.tbcell dd{font-size:14.5px;line-height:1.4}
@media(max-width:760px){
  .tbgrid{grid-template-columns:1fr 1fr}
  .tbcell{border-bottom:1px solid var(--rule)}
  .tbcell:nth-child(2n){border-right:0}
}
.legal{padding:22px 0 30px;font-size:13.5px;color:var(--ink-60)}
.legal p{max-width:80ch}

/* ---- diagram ---- */
figure{margin-top:40px}
figcaption{
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-60);margin-top:14px;
}

/* a11y */
:focus-visible{outline:2px solid var(--datum);outline-offset:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--ink);color:#fff;padding:10px 16px;z-index:99}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* ============ ARTICLE PAGES ============ */
.crumb{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-60);margin-bottom:22px}
.crumb a{color:var(--ink-60);text-decoration:none}
.crumb a:hover{color:var(--ink)}
.arthero{border-top:0;padding-block:clamp(38px,6vw,62px) clamp(28px,4vw,44px)}
.arthero h1{max-width:19ch;margin-bottom:20px}
.standfirst{font-size:clamp(18px,2.1vw,21px);line-height:1.5;color:var(--ink-60);max-width:62ch}
.artmeta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:26px;padding-top:18px;
  border-top:1px solid var(--rule);font-family:"IBM Plex Mono",monospace;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-60)}

/* the short-answer block — extractable by AI, scannable by humans */
.shortanswer{border:1px solid var(--ink);border-left:5px solid var(--revision);
  background:var(--paper-2);padding:clamp(20px,3vw,30px);margin-block:8px 44px}
.shortanswer .eyebrow{margin-bottom:12px}
.shortanswer p{font-size:clamp(17px,2vw,19.5px);line-height:1.55;max-width:64ch}
.shortanswer p + p{margin-top:13px}

.prose{max-width:68ch}
.prose h2{font-size:clamp(24px,3.2vw,34px);margin-top:clamp(44px,6vw,66px);margin-bottom:16px}
.prose h3{margin-top:34px;margin-bottom:11px}
.prose p{margin-bottom:16px}
.prose ul,.prose ol{margin:0 0 18px 20px}
.prose li{margin-bottom:9px;padding-left:4px}
.prose strong{font-weight:600}
.prose blockquote{border-left:3px solid var(--datum);padding-left:18px;margin:24px 0;
  color:var(--ink-60);font-size:16px}
.prose table{width:100%;border-collapse:collapse;margin:26px 0;font-size:15px}
.prose th{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-60);text-align:left;padding:10px 14px 10px 0;
  border-bottom:1px solid var(--ink);font-weight:500;vertical-align:bottom}
.prose td{padding:12px 14px 12px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.prose td:first-child{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--datum);white-space:nowrap}

.pullnote{border-left:3px solid var(--revision);padding:2px 0 2px 16px;margin:26px 0;
  font-size:16px;color:var(--ink-60)}
.pullnote strong{color:var(--ink)}

.endcta{background:var(--paper-2);border:1px solid var(--ink);padding:clamp(24px,4vw,40px);
  margin-top:clamp(48px,7vw,76px)}
.endcta h2{margin-top:0;font-size:clamp(23px,3vw,31px);margin-bottom:14px}
.endcta p{max-width:60ch;margin-bottom:22px;color:var(--ink-60)}
.endcta .btn{margin-right:10px}

.related{margin-top:clamp(44px,6vw,64px);padding-top:26px;border-top:1px solid var(--rule)}
.related ul{list-style:none;margin-top:14px}
.related li{padding:11px 0;border-bottom:1px solid var(--rule)}
.related a{font-family:"Archivo",sans-serif;font-weight:600;font-size:17px;
  text-decoration:none;letter-spacing:-.01em}
.related a:hover{text-decoration:underline}
.related span{display:block;font-size:14.5px;color:var(--ink-60);margin-top:3px;
  font-family:"IBM Plex Sans",sans-serif;font-weight:400}

/* ---- form: textarea, honeypot, validation + status messages ---- */
.field textarea{
  width:100%;padding:12px 14px;font-family:"IBM Plex Sans",sans-serif;font-size:16px;
  background:var(--paper);border:1px solid var(--rule);color:var(--ink);
  border-radius:0;resize:vertical;line-height:1.5;
}
.field textarea:focus{outline:2px solid var(--datum);outline-offset:1px;border-color:var(--datum)}
.field textarea::placeholder{color:var(--ink-60);opacity:.75}

/* honeypot — hidden from people, visible to naive bots */
.pot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;
  opacity:0!important;pointer-events:none}

.fielderr{
  display:block;font-family:"IBM Plex Mono",monospace;font-size:11.5px;
  letter-spacing:.04em;color:var(--revision);margin-top:6px;
}
.fielderr:empty{display:none}
[aria-invalid="true"]{border-color:var(--revision)!important}

.fsmsg{
  border:1px solid var(--ink);padding:16px 20px;margin-bottom:20px;font-size:16px;line-height:1.5;
}
.fsmsg[hidden]{display:none}
.fsmsg:empty{display:none}
.fsmsg-success{border-left:5px solid var(--cleared);background:var(--paper-2)}
.fsmsg-error{border-left:5px solid var(--revision);background:var(--paper-2)}

/* ---- brand mark ---- */
.logomark{
  width:22px;height:22px;flex:0 0 auto;display:block;
}
.brandmark{gap:11px}
@media(max-width:420px){
  .logomark{width:20px;height:20px}
  .brandmark{font-size:14px;gap:9px}
}