/* Conformance House — one stylesheet for the whole site.
   Palette and type are the design canvas's: warm paper, ink, deep green,
   oxide red reserved for the live deadline and nothing else. */

:root{
  color-scheme: light;
  --paper:#FBFAF8; --white:#FFFFFF; --sunk:#F5F3EE;
  --ink:#15171A; --body:#45494F; --muted:#6B7078; --faint:#9AA0A8;
  --rule:#E4E2DC; --line:#D8D5CD; --hair:#EFEDE7;
  --green:#14503C; --green-deep:#0D3628; --green-soft:#BFD6CC; --green-pale:#9FBFB2;
  --oxide:#9A3B1E; --oxide-bg:#FDF6F3; --oxide-line:#DCC4B8; --oxide-hair:#E8D4CA;
  --pad:88px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{margin:0; background:var(--paper); color:var(--body);
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{color:var(--ink); margin:0; letter-spacing:-.02em; text-wrap:pretty}
p{margin:0}
a{color:var(--green); text-decoration:none}
a:hover{color:var(--green-deep); text-decoration:underline}
b{color:var(--ink); font-weight:600}
:focus-visible{outline:2px solid var(--green); outline-offset:2px}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}
.wrap{max-width:1100px; margin:0 auto; padding:0 var(--pad)}
section{padding:0 0 66px}
.hp{position:absolute; left:-9999px}

/* masthead */
.mast{background:var(--white); border-bottom:1px solid var(--rule)}
.mast .in{max-width:1100px; margin:0 auto; padding:20px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap}
.brand{display:flex; align-items:baseline; gap:9px; text-decoration:none}
.brand:hover{text-decoration:none}
.brand .b1{font-size:21px; font-weight:700; color:var(--ink); letter-spacing:-.02em}
.brand .b2{font-size:21px; font-weight:400; color:var(--green); letter-spacing:-.02em}
.mast nav{display:flex; align-items:center; gap:30px; font-size:15px}
.mast nav a{color:var(--body)}
.mast .reg{font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--muted)}

/* hero */
.hero{padding-top:70px}
.hero h1{font-size:clamp(30px,4.4vw,52px); line-height:1.07; font-weight:700; max-width:26ch;
  margin-bottom:20px; letter-spacing:-.035em}
.lede{font-size:clamp(17px,1.6vw,20px); line-height:1.5; max-width:60ch; margin-bottom:38px}

.qualifier{display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line);
  background:var(--white); margin-bottom:38px}
.qualifier>div{padding:26px 30px}
.q-in{border-right:1px solid var(--rule)}
.q-head{display:flex; align-items:center; gap:9px; font-size:16px; font-weight:600; margin-bottom:15px}
.qualifier ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px}
.qualifier li{font-size:16px; line-height:1.45}
.q-out li{color:var(--muted)}
.ic{width:18px; height:18px; flex:none; fill:none; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round}
.ic-ok{stroke:var(--green)} .ic-no{stroke:var(--oxide)}

/* lead magnet */
.magnet{display:flex; align-items:flex-start; gap:40px; background:var(--green);
  padding:30px 34px; margin-bottom:18px; flex-wrap:wrap}
.m-copy{flex:1 1 320px}
.m-copy h2{font-size:21px; font-weight:600; color:#fff; margin-bottom:7px; letter-spacing:-.015em}
.m-copy p{font-size:16px; line-height:1.5; color:var(--green-soft); max-width:46ch}
.m-form{flex:0 1 380px; min-width:280px}
.m-form .row{display:flex; gap:8px}
.m-form input[type=email]{flex:1; min-width:0; padding:14px 15px; font:inherit; font-size:16px;
  border:1px solid var(--green-deep); background:#fff; color:var(--ink)}
.m-form button{padding:14px 22px; font:inherit; font-size:16px; font-weight:600; cursor:pointer;
  border:1px solid var(--green-deep); background:#fff; color:var(--green); white-space:nowrap}
.m-form button:hover{background:var(--sunk)}
.m-form .fine{font-size:13px; color:var(--green-pale); margin-top:9px}
.m-done{font-size:16px; line-height:1.5; color:#fff; background:var(--green);
  padding:26px 34px; margin-bottom:18px}
.undercta{font-size:15px; color:var(--muted); margin-bottom:10px}

/* the check card */
.card{background:var(--white); border:1px solid var(--line); box-shadow:0 1px 2px rgba(21,23,26,.04),
  0 14px 34px -24px rgba(21,23,26,.3)}
.card-top{display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 26px; background:var(--sunk); border-bottom:1px solid var(--hair)}
.card-lbl{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--green); font-weight:500}
.count{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--muted)}
.bar{display:flex; gap:4px; padding:0 26px 13px; background:var(--sunk);
  border-bottom:1px solid var(--hair)}
.bar i{flex:1; height:3px; background:var(--rule)}
.bar i.on{background:var(--green)}
.card-body{padding:30px 26px 26px}
.q-intro h2{font-size:clamp(22px,2.4vw,30px); line-height:1.2; margin-bottom:10px; font-weight:700}
.q-intro p{font-size:17px; line-height:1.55; max-width:62ch; margin-bottom:22px}
.go{font:inherit; font-size:17px; font-weight:600; cursor:pointer; border:1px solid var(--green-deep);
  background:var(--green); color:#fff; padding:15px 28px}
.go:hover{background:var(--green-deep)}

/* quiz question */
.qtext h2{font-size:clamp(21px,2.4vw,30px); line-height:1.18; font-weight:700; margin-bottom:8px}
.qhint{font-size:16px; line-height:1.5; color:var(--muted); max-width:62ch; margin-bottom:24px}
.chips{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:22px}
.chips .cl{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--faint);
  letter-spacing:.05em}
.chips span.c{background:var(--sunk); border:1px solid var(--rule); font-size:13px;
  color:var(--body); padding:5px 11px}
.opts{display:flex; flex-direction:column; gap:8px}
.opt{display:flex; align-items:center; gap:14px; width:100%; text-align:left; cursor:pointer;
  font:inherit; font-size:16px; color:var(--ink); background:var(--white);
  border:1px solid var(--rule); padding:15px 18px}
.opt:hover{border-color:var(--green); background:var(--sunk)}
.opt .k{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--faint); width:16px; flex:none}
.opt.lead{border:1.5px solid var(--green); font-size:19px; font-weight:600; padding:19px 22px}
.opt.lead .k{color:var(--green); font-weight:500}
.opt.risk{border-color:var(--oxide-hair); background:var(--oxide-bg)}
.opt.risk .k{color:#B98A75}
.grp{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.09em;
  color:var(--faint); margin:18px 0 9px}
.grp.risk{color:var(--oxide)}
.qfoot{display:flex; align-items:center; justify-content:space-between; gap:18px;
  margin-top:26px; padding-top:20px; border-top:1px solid var(--rule); font-size:15px;
  color:var(--muted); flex-wrap:wrap}
.back{background:none; border:0; font:inherit; font-size:15px; color:var(--muted); cursor:pointer;
  padding:0; text-decoration:underline}

/* verdict */
.verdict{border-bottom:1px solid var(--rule); padding-bottom:24px; margin-bottom:24px}
.v-lbl{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; font-weight:500; color:var(--green); margin-bottom:13px}
.v-lbl.out{color:var(--muted)}
.verdict h2{font-size:clamp(23px,2.8vw,34px); line-height:1.14; font-weight:700; margin-bottom:13px}
.verdict p{font-size:17px; line-height:1.55; max-width:66ch}
.stats{display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--rule);
  margin-bottom:26px}
.stats div{padding:18px 22px; border-right:1px solid var(--rule)}
.stats div:last-child{border-right:0}
.stats .n{font-family:"IBM Plex Mono",monospace; font-size:21px; font-weight:500; color:var(--ink);
  display:block; line-height:1}
.stats .n.warn{color:var(--oxide)}
.stats .l{font-size:14px; color:var(--muted); margin-top:7px; display:block; line-height:1.4}
.steps{display:flex; flex-direction:column; gap:2px; margin-bottom:26px}
.step{display:grid; grid-template-columns:38px 1fr; gap:16px; border:1px solid var(--rule);
  padding:18px 22px}
.step .sn{font-family:"IBM Plex Mono",monospace; font-size:14px; font-weight:500; color:#fff;
  background:var(--ink); width:25px; height:25px; display:flex; align-items:center;
  justify-content:center}
.step b{display:block; font-size:17px; margin-bottom:3px}
.step p{font-size:16px; line-height:1.5}
.field{display:flex; gap:8px; margin:6px 0 9px}
.field input{flex:1; min-width:0; padding:14px 15px; font:inherit; font-size:16px;
  border:1px solid var(--green-deep); background:#fff; color:var(--ink)}
.err{font-size:14px; color:var(--oxide); margin-bottom:8px}

/* the live obligation */
.flag{border:1px solid var(--oxide-line); background:var(--oxide-bg); padding:30px 34px}
.flag-tag{display:block; font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--oxide); font-weight:500; margin-bottom:11px}
.flag h2{font-size:clamp(21px,2.6vw,29px); line-height:1.18; font-weight:700; max-width:30ch;
  margin-bottom:11px}
.flag p{font-size:17px; line-height:1.55; color:#4A4239; max-width:74ch; margin-bottom:20px}
.legs{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.leg{background:var(--white); border:1px solid var(--oxide-hair); padding:15px 18px}
.leg .t{font-family:"IBM Plex Mono",monospace; font-size:25px; font-weight:500; color:var(--oxide);
  display:block; line-height:1}
.leg .d{font-size:14px; color:var(--muted); margin-top:6px; display:block; line-height:1.4}

/* sections */
.sh{font-size:clamp(24px,3vw,34px); font-weight:700; margin-bottom:10px; letter-spacing:-.03em}
.sp{font-size:17px; line-height:1.6; max-width:66ch; margin-bottom:14px}
.sp.muted{color:var(--muted)}
.docs{border-top:1px solid var(--ink); margin-top:16px}
.doc{display:grid; grid-template-columns:132px 300px 1fr; gap:0 28px; padding:19px 0;
  border-bottom:1px solid var(--rule)}
.doc .ref{font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--green);
  font-weight:500; padding-top:3px}
.doc .nm{font-size:17px; font-weight:600; color:var(--ink)}
.doc .ds{font-size:16px; line-height:1.5}
.split{display:grid; grid-template-columns:1fr 430px; gap:58px; align-items:start}
.price-close{border-top:1px solid var(--ink); padding-top:38px}
.tl{border:1px solid var(--line); background:var(--white)}
.tr{display:grid; grid-template-columns:118px 1fr; gap:0 16px; padding:14px 20px;
  border-bottom:1px solid var(--rule); font-size:15px}
.tr:last-child{border-bottom:0}
.tr .dt{font-family:"IBM Plex Mono",monospace; font-size:13px; font-weight:500; color:var(--ink)}
.tr.past{background:var(--sunk)}
.tr.past .dt{color:var(--oxide)}
.fine-box{border:1px solid var(--oxide-line); background:var(--oxide-bg); padding:15px 20px;
  margin-top:12px}
.fb-n{display:block; font-family:"IBM Plex Mono",monospace; font-size:18px; font-weight:500;
  color:var(--oxide); line-height:1.2; margin-bottom:5px}
.fb-d{display:block; font-size:14px; line-height:1.5; color:var(--muted)}
.ctas{display:flex; flex-direction:column; gap:13px}
.btn{display:block; text-align:center; font-size:17px; font-weight:600; padding:16px 26px}
.btn:hover{text-decoration:none}
.btn.primary{background:var(--green); color:#fff; border:1px solid var(--green-deep)}
.btn.primary:hover{background:var(--green-deep)}
.btn.ghost{border:1px solid #C9C6BE; color:var(--ink); font-weight:500}
.btn.ghost:hover{background:var(--sunk)}

/* pricing page */
.plans{display:grid; grid-template-columns:1.3fr 1fr; gap:18px; align-items:start; margin-bottom:26px}
.plan{background:var(--white); border:1px solid var(--line); padding:28px 30px}
.plan.lead{border:1.5px solid var(--green); padding:32px 34px}
.plan .flagline{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.08em;
  font-weight:500; color:var(--green); margin-bottom:17px}
.plan.alt .flagline{color:var(--muted)}
.amt{display:flex; align-items:baseline; gap:11px; flex-wrap:wrap; margin-bottom:13px}
.amt .big{font-size:58px; font-weight:700; color:var(--ink); letter-spacing:-.04em; line-height:1}
.plan.alt .amt .big{font-size:42px}
.amt .per{font-size:17px; color:var(--muted)}
.amt .was{font-family:"IBM Plex Mono",monospace; font-size:16px; color:var(--faint);
  text-decoration:line-through}
.plan .note{font-size:16px; line-height:1.55; max-width:48ch; margin-bottom:14px}
.plan .note.sm{font-size:14px; color:var(--muted); margin-bottom:0}
.plan .btn{margin:18px 0 16px}
.incl{display:flex; flex-direction:column; gap:10px; font-size:15px; line-height:1.45}
.incl div{display:flex; gap:10px}
.incl svg{width:17px; height:17px; flex:none; margin-top:3px; fill:none; stroke:var(--green);
  stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.promise{display:flex; gap:16px; border:1px solid var(--line); background:var(--sunk);
  padding:24px 28px; margin-bottom:56px}
.promise svg{width:22px; height:22px; flex:none; margin-top:3px; fill:none; stroke:var(--green);
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.promise b{display:block; font-size:18px; margin-bottom:6px}
.promise p{font-size:16px; line-height:1.55; max-width:76ch}
.faqs{display:grid; grid-template-columns:1fr 1fr; gap:30px 48px; margin-bottom:48px}
.faq b{display:block; font-size:17px; margin-bottom:7px}
.faq p{font-size:16px; line-height:1.55}

footer{background:var(--white); border-top:1px solid var(--rule); margin-top:10px}
footer .in{max-width:1100px; margin:0 auto; padding:26px var(--pad) 40px; font-size:14px;
  color:var(--muted); line-height:1.6; display:flex; flex-direction:column; gap:9px}

@media (max-width:900px){
  :root{--pad:24px}
  .split,.plans,.faqs{grid-template-columns:1fr; gap:30px}
  .doc{grid-template-columns:1fr; gap:4px; padding:16px 0}
  .doc .ref{padding-top:0}
}
@media (max-width:680px){
  .qualifier{grid-template-columns:1fr}
  .q-in{border-right:0; border-bottom:1px solid var(--rule)}
  .legs,.stats{grid-template-columns:1fr}
  .stats div{border-right:0; border-bottom:1px solid var(--rule)}
  .stats div:last-child{border-bottom:0}
  .magnet,.flag,.promise{padding:22px 20px}
  .mast nav{gap:18px; font-size:14px}
  .mast .reg{display:none}
  .field{flex-direction:column}
  .m-form .row{flex-direction:column}
}

/* ---------- articles ---------- */
.art{max-width:760px; margin:0 auto; padding:0 var(--pad)}
.art-meta{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); margin-bottom:14px}
.art h1{font-size:clamp(28px,4vw,44px); line-height:1.1; font-weight:700; letter-spacing:-.035em;
  margin-bottom:18px}
.art h2{font-size:clamp(21px,2.4vw,27px); line-height:1.2; font-weight:700; letter-spacing:-.025em;
  margin:44px 0 14px}
.art h3{font-size:18px; font-weight:600; margin:28px 0 8px}
.art p{font-size:17px; line-height:1.65; margin-bottom:16px}
.art ul,.art ol{font-size:17px; line-height:1.65; margin:0 0 16px; padding-left:24px}
.art li{margin-bottom:8px}
.art .answer{border-left:4px solid var(--green); background:var(--sunk); padding:20px 24px;
  margin-bottom:28px}
.art .answer p{margin-bottom:10px}
.art .answer p:last-child{margin-bottom:0}
.art table{width:100%; border-collapse:collapse; font-size:16px; margin:0 0 20px}
.art th{text-align:left; font-size:12px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); border-bottom:1px solid var(--ink); padding:0 14px 7px 0; font-weight:600}
.art td{padding:11px 14px 11px 0; border-bottom:1px solid var(--rule); vertical-align:top;
  line-height:1.5}
.art td:first-child{font-weight:600; color:var(--ink)}
.art td.nw:first-child{white-space:nowrap}
/* A wide table scrolls inside itself rather than widening the page. */
.tw{overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; margin:0 0 20px}
.tw table{margin-bottom:0}
.art .caveat{border:1px solid var(--line); background:var(--white); padding:18px 22px;
  font-size:15px; line-height:1.6; color:var(--muted); margin:0 0 20px}
.art .caveat b{color:var(--ink)}
.art blockquote{margin:0 0 18px; padding:0 0 0 20px; border-left:3px solid var(--line);
  font-size:17px; line-height:1.6; font-style:italic; color:var(--body)}
.art .cta{border-top:1px solid var(--ink); margin-top:48px; padding-top:28px}
.art .cta h2{margin-top:0}
.toc{border:1px solid var(--line); background:var(--white); padding:20px 24px; margin-bottom:34px}
.toc b{display:block; font-size:13px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); margin-bottom:10px; font-weight:600}
.toc ol{margin:0; padding-left:20px; font-size:16px; line-height:1.7}
@media (max-width:680px){
  .art td.nw:first-child{white-space:normal}
  .art table,.art thead,.art tbody,.art tr,.art th,.art td{display:block; width:100%}
  .art th{display:none}
  .art td{border-bottom:0; padding:2px 0}
  .art tr{border-bottom:1px solid var(--rule); padding:12px 0; display:block}
}

/* ---------- guides index + related ---------- */
.guides{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.guide{display:block; border:1px solid var(--line); background:var(--white); padding:20px 24px}
.guide:hover{border-color:var(--green); text-decoration:none; background:var(--sunk)}
.g-t{display:block; font-size:18px; font-weight:600; color:var(--ink); margin-bottom:6px;
  letter-spacing:-.015em}
.g-d{display:block; font-size:15px; line-height:1.5; color:var(--body)}
.related{border-top:1px solid var(--rule); margin-top:44px; padding-top:22px}
.related b{display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin-bottom:10px}
.related ul{margin:0; padding-left:20px; font-size:17px; line-height:1.8}
.art code{font-family:"IBM Plex Mono",monospace; font-size:15px; background:var(--sunk);
  padding:1px 5px; border:1px solid var(--rule)}
@media (max-width:680px){ .guides{grid-template-columns:1fr} }