/* Marketing Office — site stylesheet (marketingoffice.net) */
:root{
  --paper:#F2F3EF; --panel:#FBFBF8; --panel-deep:#EAECE5;
  --ink:#1A231E; --ink-soft:#4C574F; --ink-faint:#77817A;
  --rule:#D8DBD1; --rule-strong:#B9BFB2;
  --accent:#1D5C46; --accent-soft:#E3EDE6; --on-accent:#F6FAF7;
  --go:#217A4B; --wait:#96690F; --stop:#AC3A2F;
  --go-soft:#E1EFE5; --wait-soft:#F3EAD3; --stop-soft:#F5E3E0;
  --term-bg:#0F1713; --term-ink:#D9E5DC; --term-dim:#8FA396;
  --term-green:#7FD7A8; --term-amber:#E4C070; --term-red:#EF9086;
  --mark:#F0E9C8;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#101512; --panel:#171D19; --panel-deep:#1D2420;
    --ink:#E7EAE3; --ink-soft:#A8B2A8; --ink-faint:#7D877E;
    --rule:#2A322B; --rule-strong:#3B453C;
    --accent:#57B98C; --accent-soft:#1C2B23; --on-accent:#0D1710;
    --go:#4FBE85; --wait:#D9A83F; --stop:#E06B5E;
    --go-soft:#16281E; --wait-soft:#2B2413; --stop-soft:#2E1B18;
    --term-bg:#0B100D; --term-ink:#D3DFD5; --term-dim:#79887D;
    --term-green:#74CE9F; --term-amber:#DDBA6B; --term-red:#EC8B80;
    --mark:#3A3620;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Source Serif 4", Georgia, "Times New Roman", serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1060px; margin:0 auto; padding:0 24px}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
h1,h2,h3,h4{font-family:Archivo,"Helvetica Neue",Arial,sans-serif; line-height:1.12; text-wrap:balance; margin:0}
p{margin:0 0 1em; max-width:70ch}
ul,ol{max-width:70ch}
.mono, code, kbd{font-family:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace}
code{font-size:.86em; background:var(--panel-deep); border:1px solid var(--rule); border-radius:4px; padding:.08em .36em}
.num{font-variant-numeric:tabular-nums}
.fic{color:var(--wait); font-weight:600}

/* nav */
nav.site{position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:1px solid var(--rule)}
.nav-in{display:flex; align-items:center; gap:20px; padding:12px 24px; max-width:1060px; margin:0 auto; flex-wrap:wrap}
.wordmark{font-family:Archivo,sans-serif; font-weight:800; font-size:.92rem; letter-spacing:.02em; color:var(--ink); text-transform:uppercase}
.wordmark span{color:var(--accent)}
.wordmark:hover{text-decoration:none}
.nav-links{display:flex; gap:16px; flex-wrap:wrap; margin-left:auto}
.nav-links a{font-family:"IBM Plex Mono",monospace; font-size:.67rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); padding:4px 2px}
.nav-links a:hover{color:var(--accent); text-decoration:none}
.nav-links a[aria-current="page"]{color:var(--accent); border-bottom:2px solid var(--accent)}

/* page header */
header.page{padding:64px 0 48px; border-bottom:1px solid var(--rule)}
.eyebrow{font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin:0 0 16px}
header.page h1{font-size:clamp(2rem,4.8vw,3.2rem); font-weight:800; letter-spacing:-.015em; max-width:22ch}
.lede{font-size:1.1rem; color:var(--ink-soft); margin:20px 0 0; max-width:64ch}
.lede strong{color:var(--ink); font-weight:600}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px}
.btn{display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:.78rem; letter-spacing:.04em;
  border:1.5px solid var(--accent); border-radius:5px; padding:9px 16px; color:var(--accent); background:transparent}
.btn:hover{background:var(--accent-soft); text-decoration:none}
.btn.primary{background:var(--accent); color:var(--on-accent)}
.btn.primary:hover{opacity:.92}

/* stats */
.statrow{display:grid; grid-template-columns:repeat(4,minmax(140px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:6px; overflow:hidden; margin-top:44px}
@media (max-width:860px){ .statrow{grid-template-columns:repeat(2,1fr)} }
.stat{background:var(--panel); padding:15px 18px}
.stat .v{font-family:Archivo,sans-serif; font-weight:800; font-size:1.45rem; letter-spacing:-.01em}
.stat .k{font-family:"IBM Plex Mono",monospace; font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-top:2px}

/* sections */
section{padding:58px 0; border-bottom:1px solid var(--rule)}
section.last{border-bottom:none}
.sec-head{display:flex; align-items:baseline; gap:16px; margin-bottom:12px}
.sec-no{font-family:"IBM Plex Mono",monospace; font-size:.76rem; color:var(--accent); letter-spacing:.1em}
h2{font-size:clamp(1.45rem,2.8vw,1.95rem); font-weight:800; letter-spacing:-.012em}
.sec-sub{color:var(--ink-soft); font-size:1.02rem; max-width:68ch; margin-bottom:30px}
h3{font-size:1.1rem; font-weight:700; margin:26px 0 10px}
h3:first-of-type{margin-top:0}
.cols2{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:32px}

/* figures */
figure{margin:24px 0; background:var(--panel); border:1px solid var(--rule); border-radius:6px; padding:20px}
figure .scroll{overflow-x:auto}
figure svg{display:block; min-width:640px; max-width:100%; height:auto}
figcaption{font-family:"IBM Plex Mono",monospace; font-size:.71rem; color:var(--ink-soft); margin-top:12px; line-height:1.55}
figcaption b{color:var(--ink); font-weight:600}

/* terminal */
.term{background:var(--term-bg); color:var(--term-ink); border-radius:6px; border:1px solid var(--rule-strong); overflow:hidden; margin:24px 0}
.term-bar{display:flex; gap:10px; align-items:center; padding:8px 14px; border-bottom:1px solid rgba(255,255,255,.08);
  font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--term-dim)}
.term-bar .dotset{display:flex; gap:5px}
.term-bar .dotset i{width:9px; height:9px; border-radius:50%; background:var(--term-dim); opacity:.45; display:block}
.term pre{margin:0; padding:16px 20px; overflow-x:auto; font-family:"IBM Plex Mono",monospace; font-size:.78rem; line-height:1.66}
.t-you{color:var(--term-green); font-weight:600}
.t-dim{color:var(--term-dim)}
.t-amber{color:var(--term-amber)}
.t-red{color:var(--term-red)}
.t-green{color:var(--term-green)}
.t-b{color:var(--term-ink); font-weight:600}

/* documents */
.doc{background:var(--panel); border:1px solid var(--rule-strong); border-radius:6px; margin:24px 0; overflow:hidden}
.doc-tab{display:flex; justify-content:space-between; gap:12px; padding:8px 16px; background:var(--panel-deep); border-bottom:1px solid var(--rule);
  font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-soft); flex-wrap:wrap}
.doc-body{padding:18px 22px; font-size:.95rem}
.doc-body p{max-width:none}
.memo-line{font-family:"IBM Plex Mono",monospace; font-size:.79rem; line-height:1.7; color:var(--ink); white-space:pre-wrap; overflow-wrap:break-word; margin:0 0 .6em}
.memo-h{font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin:14px 0 4px}
.memo-h:first-child{margin-top:0}
.verdict{font-weight:600}
.v-fail{color:var(--stop)} .v-pass{color:var(--go)} .v-wait{color:var(--wait)}
.needs{background:var(--mark); border-radius:3px; padding:0 4px; font-weight:600}
blockquote{margin:10px 0; padding:2px 0 2px 16px; border-left:3px solid var(--stop); font-style:italic; color:var(--ink-soft); max-width:66ch}
blockquote .who{display:block; font-style:normal; font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-top:4px}
.stamp{display:inline-block; font-family:Archivo,sans-serif; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  border:3px solid var(--wait); color:var(--wait); border-radius:6px; padding:5px 13px; font-size:.98rem; transform:rotate(-6deg); margin:8px 4px}
.stamp.go{border-color:var(--go); color:var(--go)}

/* tables — never scroll; content wraps to fit */
.tblwrap{border:1px solid var(--rule); border-radius:6px; margin:20px 0; background:var(--panel); overflow:hidden}
table{border-collapse:collapse; width:100%; font-size:.9rem}
th{font-family:"IBM Plex Mono",monospace; font-size:.65rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-soft);
  text-align:left; padding:10px 14px; border-bottom:1px solid var(--rule-strong); background:var(--panel-deep)}
td{padding:10px 14px; border-bottom:1px solid var(--rule); vertical-align:top; overflow-wrap:break-word}
tr:last-child td{border-bottom:none}
td.mono{font-size:.79rem; overflow-wrap:anywhere}
td code{white-space:normal; overflow-wrap:anywhere}
@media (max-width:640px){ th,td{padding:8px 10px} table{font-size:.85rem} }

/* pills */
.pill{display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:.63rem; letter-spacing:.09em; text-transform:uppercase;
  border-radius:99px; padding:2px 9px; border:1px solid; white-space:nowrap}
.p-adv{color:var(--ink-soft); border-color:var(--rule-strong); background:var(--panel-deep)}
.p-veto{color:var(--stop); border-color:var(--stop); background:var(--stop-soft)}
.p-dec{color:var(--accent); border-color:var(--accent); background:var(--accent-soft)}
.p-prod{color:var(--wait); border-color:var(--wait); background:var(--wait-soft)}
.p-go{color:var(--go); border-color:var(--go); background:var(--go-soft)}

/* outcome list */
.outcomes{list-style:none; margin:20px 0; padding:0; border:1px solid var(--rule); border-radius:6px; background:var(--panel); overflow:hidden; max-width:none}
.outcomes li{padding:12px 18px; border-bottom:1px solid var(--rule)}
.outcomes li:last-child{border-bottom:none}
.outcomes .get{font-weight:600; display:block}
.outcomes .why{display:block; font-size:.88rem; color:var(--ink-soft); margin-top:2px}
.outcomes .why::before{content:"mechanism — "; font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.09em; text-transform:uppercase; color:var(--accent)}

/* rails */
.railgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin:24px 0}
.rail{background:var(--panel); border:1px solid var(--rule); border-radius:6px; padding:15px 17px}
.rail .v{font-family:Archivo,sans-serif; font-weight:800; font-size:1.35rem; letter-spacing:-.01em}
.rail .k{font-size:.85rem; color:var(--ink-soft); margin-top:4px; line-height:1.5}
.rail .o{font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); margin-top:9px}
.calcstrip{background:var(--panel); border:1px solid var(--rule-strong); border-radius:6px; padding:16px 20px; margin:24px 0;
  font-family:"IBM Plex Mono",monospace; font-size:.85rem; line-height:1.9; overflow-wrap:break-word}
.calcstrip b{color:var(--accent)}

/* steps */
.steps{counter-reset:st; display:grid; gap:0; margin:24px 0; border:1px solid var(--rule); border-radius:6px; overflow:hidden}
.step{counter-increment:st; display:grid; grid-template-columns:60px minmax(0,1fr); background:var(--panel); border-bottom:1px solid var(--rule)}
.step:last-child{border-bottom:none}
.step::before{content:counter(st,decimal-leading-zero); font-family:"IBM Plex Mono",monospace; font-size:.84rem; color:var(--accent);
  display:flex; align-items:flex-start; justify-content:center; padding:17px 0; border-right:1px solid var(--rule); background:var(--panel-deep)}
.step > div{padding:15px 20px}
.step h4{font-size:1rem; font-weight:700; margin:0 0 4px; font-family:Archivo,sans-serif}
.step p{font-size:.93rem; color:var(--ink-soft); margin:0 0 .5em; max-width:none}
.step p:last-child{margin-bottom:0}
.say{display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:.77rem; background:var(--accent-soft); color:var(--accent);
  border:1px solid var(--accent); border-radius:4px; padding:2px 9px; margin:2px 0; overflow-wrap:anywhere}

/* cards */
.cardgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; margin:22px 0}
.card{background:var(--panel); border:1px solid var(--rule); border-radius:6px; padding:17px 20px; display:block; color:var(--ink)}
a.card:hover{text-decoration:none; border-color:var(--accent)}
.card h4{font-family:Archivo,sans-serif; font-size:.98rem; margin:0 0 7px}
.card p{font-size:.89rem; color:var(--ink-soft); margin:0; max-width:none}
.card .mono-k{font-family:"IBM Plex Mono",monospace; font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:7px}

/* notices */
.notice{border-left:3px solid var(--accent); background:var(--panel); border-radius:0 6px 6px 0; padding:13px 18px; margin:20px 0; font-size:.94rem}
.notice.warn{border-left-color:var(--wait)}
.notice.stop{border-left-color:var(--stop)}
.notice p{margin:0; max-width:none}

footer.site{padding:40px 0 60px; color:var(--ink-faint); font-size:.84rem}
footer.site p{max-width:none}
footer.site .mono{font-size:.7rem; letter-spacing:.05em}
footer.site nav{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:14px}
footer.site nav a{font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft)}