/* Can I put this into AI?, this box owns its entire appearance.
 *
 * The palette is built around the four answers, because the traffic light is
 * the article's central device: green means go, amber means clean it first,
 * red means never, blue means only on a controlled platform. Those four colours
 * then do all the structural work too, so the reader learns the code once.
 *
 * Type is set large. This is a document somebody reads end to end and then
 * sends to their management team, not a dashboard to be scanned.
 */

:root{
  --paper:#FBFAF7;
  --card:#FFFFFF;
  --ink:#1A1917;
  --ink-2:#454139;
  --muted:#7C766C;
  --rule:#E6E2D9;
  --rule-2:#CFC9BC;

  --ok:#1B7A4B;   --ok-w:#E9F3EC;   --ok-b:#C3E0CE;
  --warn:#B45309; --warn-w:#FBF0E1; --warn-b:#EFD8B6;
  --no:#B42318;   --no-w:#FBECE9;   --no-b:#F0CFC8;
  --app:#1D4E89;  --app-w:#E8EEF6;  --app-b:#C6D6E9;

  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:ui-sans-serif,-apple-system,"Segoe UI",Inter,Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;

  --read:1.19rem;
  --lh:1.78;
  --measure:66ch;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}

article{max-width:60rem;margin:0 auto;padding:0 1.3rem 5rem}
section{margin:3rem 0}
p{margin:0 0 1.3rem;font-size:var(--read);line-height:var(--lh);color:var(--ink-2);
  max-width:var(--measure)}
p strong,li strong{color:var(--ink);font-weight:640}
em{font-style:italic}
a{color:var(--app);text-decoration:none;border-bottom:1px solid rgba(29,78,137,.3)}
a:hover{border-bottom-color:var(--app)}

/* ─────────── hero ─────────── */
.hero{display:grid;gap:2rem;grid-template-columns:minmax(0,1fr);align-items:center;
  padding:3.2rem 0 1.5rem}
@media(min-width:60rem){.hero{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:2.6rem}}
.eyebrow{font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin:0 0 1.3rem}
.hero h1{font:400 clamp(2.5rem,7vw,4.1rem)/1.02 var(--serif);margin:0 0 1.2rem;
  letter-spacing:-.022em;text-wrap:balance}
.hero h1 span{font-style:italic;color:var(--no)}
.dek{font-size:clamp(1.02rem,2.3vw,1.16rem);line-height:1.62;color:var(--ink-2);
  margin:0 0 1.5rem;max-width:44ch}
.byline{display:flex;flex-wrap:wrap;gap:1.1rem;margin:0;padding:1.1rem 0 0;
  border-top:1px solid var(--rule);
  font:500 11.5px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.hero-fig{margin:0}
.rings{position:relative;width:100%;height:clamp(250px,32vw,360px)}
.rings canvas{display:block;width:100%!important;height:100%!important}
.rings svg{width:100%;height:100%}
/* A legend, not projected labels, concentric rings put every label on the same
   line, so projected text collides or runs off the edge. */
.ring-key{display:flex;flex-direction:column;gap:.3rem;margin-top:.9rem}
.ring-key span{display:flex;align-items:baseline;gap:.5rem;font-size:.87rem;line-height:1.4;
  color:var(--ink-2);flex-wrap:wrap}
.ring-key i{width:.62rem;height:.62rem;border-radius:2px;flex:none;transform:translateY(1px)}
.ring-key b{font-weight:600;color:var(--ink)}
.ring-key em{font-style:normal;color:var(--muted);font-size:.82rem}
.hero-fig figcaption{margin-top:.9rem;font-size:.9rem;line-height:1.6;color:var(--muted)}
.hero-fig figcaption b{color:var(--ink)}

/* ─────────── tl;dr ─────────── */
/* The article is eighteen minutes. This is the version for somebody deciding
   whether to spend them, and the one people will forward on its own, so it has
   to stand up without the rest of the page around it. */
.tldr{background:var(--card);border:1px solid var(--rule-2);border-radius:16px;
  padding:1.6rem 1.8rem 1.7rem;margin:1rem 0 2.5rem;position:relative}
.tldr::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  border-radius:16px 0 0 16px;
  background:linear-gradient(var(--ok) 0 25%,var(--app) 25% 55%,var(--warn) 55% 80%,var(--no) 80% 100%)}
.tldr-l{display:inline-block;font:700 11px/1 var(--mono);letter-spacing:.2em;
  color:var(--no);margin-bottom:.9rem}
.tldr-lead{font-size:1.2rem;line-height:1.55;color:var(--ink);max-width:58ch;margin:0 0 1.4rem}

.tldr-list{list-style:none;margin:0 0 1.5rem;padding:0;display:flex;flex-direction:column;gap:.75rem}
.tldr-list li{position:relative;padding-left:1.5rem;font-size:1.02rem;line-height:1.65;
  color:var(--ink-2);max-width:74ch}
.tldr-list li::before{content:"";position:absolute;left:0;top:.62em;width:.55rem;height:.55rem;
  border-radius:2px;background:var(--rule-2)}
.tldr-list li.t-ok::before{background:var(--ok)}
.tldr-list li.t-warn::before{background:var(--warn)}
.tldr-list li.t-no::before{background:var(--no)}
.tldr-list li.t-app::before{background:var(--app)}
.tldr-list b{color:var(--ink);font-weight:640}

.tldr-gates{background:var(--paper);border:1px solid var(--rule);border-radius:12px;
  padding:1rem 1.2rem;margin-bottom:1.2rem}
.tldr-gates>span{display:block;font:600 10.5px/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.7rem}
.tldr-gates ol{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;
  grid-template-columns:minmax(0,1fr)}
@media(min-width:52rem){.tldr-gates ol{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tldr-gates li{display:flex;align-items:baseline;gap:.55rem;font-size:1.02rem;color:var(--ink)}
.tldr-gates b{font:700 11px/1 var(--mono);color:#fff;background:var(--ink);border-radius:4px;
  padding:.25rem .38rem;flex:none}

.tldr-end{font-size:.98rem;line-height:1.65;color:var(--muted);margin:0;max-width:70ch}

@media(max-width:34rem){
  .tldr{padding:1.2rem 1.2rem 1.3rem;border-radius:12px}
  .tldr-lead{font-size:1.08rem}
  .tldr-list li{font-size:.98rem}
}

/* ─────────── contents ─────────── */
.toc{display:grid;gap:.4rem;grid-template-columns:minmax(0,1fr);margin:1.5rem 0 3rem}
@media(min-width:44rem){.toc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:70rem){.toc{grid-template-columns:repeat(5,minmax(0,1fr))}}
.toc a{display:flex;flex-direction:column;gap:.25rem;border:0;border-top:2px solid var(--rule-2);
  padding:.65rem .1rem;color:var(--ink-2);font-size:.9rem;line-height:1.35}
.toc a b{font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.toc a:hover{color:var(--ink);border-top-color:var(--ink)}
.toc .toc-hi{border-top-color:var(--no)}
.toc .toc-hi b{color:var(--no)}

/* ─────────── headings ─────────── */
.part{margin:4.5rem 0 1.5rem;padding-top:1.5rem;border-top:2px solid var(--ink);
  font:400 clamp(1.8rem,4.4vw,2.6rem)/1.1 var(--serif);letter-spacing:-.015em;
  display:flex;flex-direction:column;gap:.4rem;text-wrap:balance}
.part span{font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--no)}
h3{font:600 clamp(1.3rem,3vw,1.65rem)/1.25 var(--sans);letter-spacing:-.012em;
  margin:2.6rem 0 1rem;color:var(--ink);text-wrap:balance}
h4{font:600 1.12rem/1.3 var(--sans);margin:2.2rem 0 .8rem;color:var(--ink)}
.lede{font-size:1.32rem;line-height:1.55;color:var(--ink);max-width:56ch;
  border-left:3px solid var(--no);padding-left:1.2rem;margin:0 0 2rem}
.cap{font-size:1.06rem;line-height:1.7;color:var(--ink);background:var(--card);
  border:1px solid var(--rule);border-left:3px solid var(--ink);border-radius:0 10px 10px 0;
  padding:1.1rem 1.3rem;max-width:var(--measure)}

ul.plain{margin:0 0 1.4rem;padding-left:1.3rem;max-width:var(--measure)}
ul.plain li{font-size:var(--read);line-height:var(--lh);color:var(--ink-2);margin:.55rem 0}
ol.caveats{margin:0 0 1.4rem;padding-left:1.4rem;max-width:var(--measure);counter-reset:cv}
ol.caveats li{font-size:1.04rem;line-height:1.7;color:var(--ink-2);margin:.8rem 0}
ol.caveats b{color:var(--ink)}

/* ─────────── asides ─────────── */
.note{background:var(--app-w);border:1px solid var(--app-b);border-left:3px solid var(--app);
  border-radius:0 12px 12px 0;padding:1.2rem 1.4rem;margin:2rem 0;max-width:var(--measure)}
.note>b{display:block;font:600 11px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;
  color:var(--app);margin-bottom:.7rem}
.note p{margin:0 0 .8rem;font-size:1.05rem;line-height:1.68;color:var(--ink-2);max-width:none}
.note p:last-child{margin-bottom:0}
.note-warn{background:var(--warn-w);border-color:var(--warn-b);border-left-color:var(--warn)}
.note-warn>b{color:var(--warn)}
.note-good{background:var(--ok-w);border-color:var(--ok-b);border-left-color:var(--ok)}
.note-good>b{color:var(--ok)}
.quote-line{font-family:var(--serif);font-size:1.12rem!important;color:var(--ink)!important;
  padding-left:1rem;border-left:2px solid currentColor}

/* ─────────── inside / outside ─────────── */
.split{display:grid;gap:.8rem;grid-template-columns:minmax(0,1fr);align-items:center;margin:1.8rem 0}
@media(min-width:46rem){.split{grid-template-columns:1fr auto 1fr;gap:1rem}}
.split-c{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:1.1rem 1.3rem}
.split-c.ok{border-top:3px solid var(--ok)}
.split-c.bad{border-top:3px solid var(--no)}
.split-c b{display:block;font-size:1.1rem;margin-bottom:.6rem}
.split-c.ok b{color:var(--ok)} .split-c.bad b{color:var(--no)}
.split-c ul{margin:0 0 .8rem;padding-left:1.1rem}
.split-c li{font-size:1rem;line-height:1.6;color:var(--ink-2);margin:.28rem 0}
.split-c i{font-style:normal;font-size:.88rem;color:var(--muted);display:block;
  border-top:1px dotted var(--rule-2);padding-top:.6rem}
.split-x{text-align:center;font:500 12px/1 var(--mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted)}

/* ─────────── comparison table ─────────── */
.compare{overflow-x:auto;margin:1.8rem 0;border:1px solid var(--rule);border-radius:12px;
  background:var(--card)}
.cmp{border-collapse:collapse;width:100%;min-width:34rem;font-size:1rem}
.cmp th,.cmp td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--rule)}
.cmp thead th{font:600 10.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted)}
.cmp tbody th{font-weight:500;color:var(--ink);width:42%}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.c-bad{color:var(--no)} .c-ok{color:var(--ok)}
.cmp thead .c-bad,.cmp thead .c-ok{font-weight:700}

/* ─────────── svg figures ─────────── */
.dgm{margin:2.2rem 0;padding:0}
.dgm svg{display:block;width:100%;height:auto;background:var(--card);
  border:1px solid var(--rule);border-radius:12px;padding:1rem}
.s-lbl{font:600 11px var(--mono);letter-spacing:.14em;fill:var(--muted)}
.s-lbl.s-bad{fill:var(--no)} .s-lbl.s-ok{fill:var(--ok)}
.s-flow rect{fill:var(--paper);stroke:var(--rule-2);stroke-width:1.3}
.s-flow rect.s-danger{fill:var(--no-w);stroke:var(--no)}
.s-flow rect.s-local{fill:var(--ok-w);stroke:var(--ok)}
.s-flow rect.s-model{fill:var(--app-w);stroke:var(--app)}
.s-t{font:500 13px var(--sans);fill:var(--ink);text-anchor:middle}
.s-t.s-sm{font-size:12px} .s-t.s-b{font-weight:700}
.s-s{font:400 10.5px var(--sans);fill:var(--muted);text-anchor:middle}
.s-tiny{font:400 9.5px var(--mono);fill:var(--muted);text-anchor:middle}
.s-note{font:400 12px var(--sans);fill:var(--ink-2)}
.s-ar{stroke:var(--rule-2);stroke-width:1.4;fill:none}
.s-arh{fill:var(--rule-2)}
.s-rule{stroke:var(--rule);stroke-width:1;stroke-dasharray:4 5}
.s-box{fill:var(--paper);stroke:var(--rule-2);stroke-width:1.3}
.s-box.s-danger{fill:var(--no-w);stroke:var(--no)}
.s-flat{fill:var(--ok-w);stroke:var(--ok-b);stroke-width:1.2}
#oversharing .s-t,#oversharing .s-s{text-anchor:start}

/* gates */
.gate rect{fill:var(--card);stroke:var(--rule-2);stroke-width:1.4}
.gate circle{fill:currentColor}
.gate.g1{color:var(--ok)} .gate.g2{color:var(--app)} .gate.g3{color:var(--warn)}
.gate.g1 rect{stroke:var(--ok)} .gate.g2 rect{stroke:var(--app)} .gate.g3 rect{stroke:var(--warn)}
.gate-n{font:700 15px var(--sans);fill:#fff;text-anchor:middle}
.gate-t{font:600 16px var(--sans);fill:var(--ink)}
.gate-s{font:400 12.5px var(--sans);fill:var(--ink-2)}
.gate-q{font:400 11.5px var(--mono);fill:currentColor}

/* ─────────── maths flip ─────────── */
.callout-flip{display:grid;gap:.7rem;grid-template-columns:minmax(0,1fr);margin:1.8rem 0}
@media(min-width:48rem){.callout-flip{grid-template-columns:repeat(2,minmax(0,1fr))}}
.flip{border-radius:12px;padding:1rem 1.2rem;border:1px solid}
.flip.bad{background:var(--no-w);border-color:var(--no-b)}
.flip.ok{background:var(--ok-w);border-color:var(--ok-b)}
.flip span{font:600 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;display:block;
  margin-bottom:.5rem}
.flip.bad span{color:var(--no)} .flip.ok span{color:var(--ok)}
.flip b{display:block;font-family:var(--serif);font-size:1.2rem;line-height:1.35;color:var(--ink);
  margin-bottom:.5rem}
.flip i{font-style:normal;font-size:.95rem;line-height:1.6;color:var(--ink-2)}

/* ─────────── traffic light ─────────── */
.lights{display:grid;gap:.6rem;grid-template-columns:minmax(0,1fr);margin:1.8rem 0}
@media(min-width:44rem){.lights{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:72rem){.lights{grid-template-columns:repeat(4,minmax(0,1fr))}}
.light{border-radius:12px;padding:1rem 1.1rem;border:1px solid;display:flex;flex-direction:column;gap:.35rem}
.light-k{font:700 11px/1 var(--mono);letter-spacing:.12em}
.light b{font-size:1.05rem;color:var(--ink)}
.light i{font-style:normal;font-size:.93rem;line-height:1.55;color:var(--ink-2)}
.light.ok{background:var(--ok-w);border-color:var(--ok-b)} .light.ok .light-k{color:var(--ok)}
.light.warn{background:var(--warn-w);border-color:var(--warn-b)} .light.warn .light-k{color:var(--warn)}
.light.no{background:var(--no-w);border-color:var(--no-b)} .light.no .light-k{color:var(--no)}
.light.app{background:var(--app-w);border-color:var(--app-b)} .light.app .light-k{color:var(--app)}

/* ─────────── classification table ─────────── */
.tbl-wrap{overflow-x:auto;border:1px solid var(--rule);border-radius:12px;background:var(--card);
  margin:1.6rem 0}
.cls{border-collapse:collapse;width:100%;min-width:40rem;font-size:1rem}
.cls th,.cls td{padding:.7rem 1rem;text-align:left;border-bottom:1px solid var(--rule);
  vertical-align:top}
.cls thead th{font:600 10.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted)}
.cls tbody th{font-weight:500;color:var(--ink);width:38%}
.cls tbody td:last-child{color:var(--ink-2);font-size:.96rem}
.cls tbody tr:last-child th,.cls tbody tr:last-child td{border-bottom:0}
.tag{display:inline-block;font:700 10px/1 var(--mono);letter-spacing:.08em;
  padding:.32rem .5rem;border-radius:5px;white-space:nowrap}
.tag.ok{background:var(--ok-w);color:var(--ok)}
.tag.warn{background:var(--warn-w);color:var(--warn)}
.tag.no{background:var(--no-w);color:var(--no)}
.tag.app{background:var(--app-w);color:var(--app)}

/* ─────────── tiers ─────────── */
.tiers{display:grid;gap:.7rem;grid-template-columns:minmax(0,1fr);margin:1.8rem 0}
@media(min-width:52rem){.tiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tier{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:1.1rem 1.3rem;
  border-top:3px solid var(--rule-2)}
.tier.ok{border-top-color:var(--ok)} .tier.warn{border-top-color:var(--warn)}
.tier.no{border-top-color:var(--no)} .tier.app{border-top-color:var(--app)}
.tier-n{font:700 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tier b{display:block;font-family:var(--serif);font-size:1.3rem;color:var(--ink);margin:.3rem 0 .2rem}
.tier>i{font-style:normal;display:block;font-size:.92rem;color:var(--muted);margin-bottom:.8rem}
.tier dl{margin:0;display:flex;flex-direction:column;gap:.5rem}
.tier dl div{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:.7rem}
.tier dt{font:500 10.5px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tier dd{margin:0;font-size:.97rem;line-height:1.5;color:var(--ink-2)}

/* ─────────── failures / cases ─────────── */
.fails{display:grid;gap:.6rem;grid-template-columns:minmax(0,1fr);margin:1.6rem 0}
@media(min-width:44rem){.fails{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:72rem){.fails{grid-template-columns:repeat(3,minmax(0,1fr))}}
.fail{background:var(--no-w);border:1px solid var(--no-b);border-radius:10px;padding:.85rem 1rem}
.fail b{display:block;font-size:1rem;color:var(--no);margin-bottom:.3rem}
.fail i{font-style:normal;font-size:.93rem;line-height:1.55;color:var(--ink-2)}

.cases{display:grid;gap:.6rem;grid-template-columns:minmax(0,1fr);margin:1.6rem 0}
@media(min-width:56rem){.cases{grid-template-columns:repeat(3,minmax(0,1fr))}}
.case{background:var(--card);border:1px solid var(--rule);border-left:3px solid var(--warn);
  border-radius:0 10px 10px 0;padding:.9rem 1.1rem}
.case b{display:block;font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--warn);margin-bottom:.5rem}
.case p{margin:0;font-size:.96rem;line-height:1.6;max-width:none}

/* ─────────── verify / blast ─────────── */
.verify,.blast{display:flex;flex-direction:column;gap:.55rem;margin:1.6rem 0}
.vrow,.blast-r{display:grid;gap:.25rem;grid-template-columns:minmax(0,1fr);
  background:var(--card);border:1px solid var(--rule);border-left:3px solid var(--rule-2);
  border-radius:0 10px 10px 0;padding:.85rem 1.1rem}
@media(min-width:52rem){
  .vrow{grid-template-columns:9rem 16rem minmax(0,1fr);gap:1.2rem;align-items:baseline}
  .blast-r{grid-template-columns:6rem 16rem minmax(0,1fr);gap:1.2rem;align-items:baseline}
}
.vrow.ok,.blast-r.ok{border-left-color:var(--ok)}
.vrow.warn,.blast-r.warn{border-left-color:var(--warn)}
.vrow.no,.blast-r.no{border-left-color:var(--no)}
.vrow b,.blast-r b{font-size:1.05rem;color:var(--ink)}
.vrow.ok b,.blast-r.ok b{color:var(--ok)}
.vrow.warn b,.blast-r.warn b{color:var(--warn)}
.vrow.no b,.blast-r.no b{color:var(--no)}
.vrow i,.blast-r i{font-style:normal;font-size:.95rem;color:var(--muted)}
.vrow span,.blast-r span{font-size:.98rem;line-height:1.55;color:var(--ink-2)}

/* ─────────── mirror ─────────── */
.mirror{margin:1.8rem 0;border:1px solid var(--rule);border-radius:12px;overflow:hidden;
  background:var(--card)}
.mirror-h,.mirror-r{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.mirror-h{background:var(--paper);border-bottom:1px solid var(--rule)}
.mirror-h b{padding:.7rem 1.1rem;font:600 10.5px/1 var(--mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}
.mirror-h b:first-child{border-right:1px solid var(--rule)}
.mirror-r{border-bottom:1px solid var(--rule)}
.mirror-r:last-child{border-bottom:0}
.mirror-r span{padding:.7rem 1.1rem;font-size:1rem;line-height:1.5;color:var(--ink-2)}
.mirror-r span:first-child{border-right:1px solid var(--rule);color:var(--muted)}

/* ─────────── ladder ─────────── */
.ladder{display:flex;flex-direction:column;gap:.5rem;margin:1.8rem 0}
.rung{display:grid;gap:.4rem;grid-template-columns:minmax(0,1fr);
  background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:.9rem 1.1rem;
  position:relative;padding-left:3rem}
@media(min-width:60rem){
  .rung{grid-template-columns:11rem minmax(0,1fr) minmax(0,1fr) 13rem;gap:1.2rem;align-items:baseline}
}
.rung-n{position:absolute;left:1rem;top:.95rem;width:1.5rem;height:1.5rem;border-radius:50%;
  display:grid;place-items:center;font:700 11px var(--mono);color:#fff;background:var(--rule-2)}
.rung.r0 .rung-n{background:var(--ok)} .rung.r1 .rung-n{background:var(--ok)}
.rung.r2 .rung-n{background:var(--warn)} .rung.r3 .rung-n{background:var(--warn)}
.rung.r4 .rung-n{background:var(--no)}
.rung b{font-size:1.08rem;color:var(--ink)}
.rung-c{font-size:.97rem;line-height:1.5;color:var(--ink-2)}
.rung-l{display:block;font:500 9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.2rem}
.rung>i{font-style:normal;font-size:.92rem;color:var(--muted)}

/* ─────────── validation stack ─────────── */
.stack{display:flex;flex-direction:column;gap:.55rem;margin:1.6rem 0}
.val{position:relative;background:var(--card);border:1px solid var(--rule);border-radius:12px;
  padding:.95rem 1.1rem .95rem 3rem;border-left:3px solid var(--rule-2)}
.val.ok{border-left-color:var(--ok)} .val.warn{border-left-color:var(--warn)}
.val.no{border-left-color:var(--no)}
.val-n{position:absolute;left:1.1rem;top:1rem;font:700 12px var(--mono);color:var(--muted)}
.val b{display:block;font-size:1.06rem;color:var(--ink);margin-bottom:.25rem}
.val i{font-style:normal;display:block;font-size:.98rem;line-height:1.6;color:var(--ink-2);
  margin-bottom:.35rem}
.val-w{font:500 11px/1.4 var(--mono);letter-spacing:.03em;color:var(--muted)}

/* ─────────── functions ─────────── */
.funcs{display:grid;gap:.6rem;grid-template-columns:minmax(0,1fr);margin:1.6rem 0}
@media(min-width:48rem){.funcs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.func{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:1rem 1.15rem}
.func>b{display:block;font-family:var(--serif);font-size:1.18rem;color:var(--ink);margin-bottom:.6rem}
.func-y,.func-n{font-size:.96rem;line-height:1.55;color:var(--ink-2);margin-bottom:.5rem}
.func-n{margin-bottom:0}
.func-y span,.func-n span{display:block;font:600 9.5px/1 var(--mono);letter-spacing:.13em;
  text-transform:uppercase;margin-bottom:.25rem}
.func-y span{color:var(--ok)} .func-n span{color:var(--warn)}

/* ─────────── stats ─────────── */
.stats{display:grid;gap:.6rem;grid-template-columns:repeat(2,minmax(0,1fr));margin:1.6rem 0}
@media(min-width:56rem){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat{background:var(--no-w);border:1px solid var(--no-b);border-radius:12px;padding:1rem}
.stat b{display:block;font-family:var(--serif);font-size:2rem;line-height:1;color:var(--no);
  margin-bottom:.4rem}
.stat i{font-style:normal;font-size:.92rem;line-height:1.5;color:var(--ink-2)}

/* ─────────── policy ─────────── */
.policy{display:flex;flex-direction:column;gap:.45rem;margin:1.6rem 0;max-width:var(--measure)}
.prow{display:flex;gap:.9rem;align-items:baseline;background:var(--card);border:1px solid var(--rule);
  border-radius:10px;padding:.85rem 1.1rem}
.prow span{font:700 12px var(--mono);color:var(--ok);flex:none}
.prow p{margin:0;font-size:1.02rem;line-height:1.6;max-width:none}

/* ─────────── quiz ─────────── */
.quiz-sec{border-top:2px solid var(--ink);padding-top:2rem;margin-top:4.5rem}
.quiz{background:var(--card);border:1px solid var(--rule-2);border-radius:16px;
  padding:1.6rem;margin:1.8rem 0;max-width:44rem}
.q-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1.2rem;
  font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.q-q{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin:0 0 .6rem}
.q-item{font-family:var(--serif);font-size:1.5rem;line-height:1.3;color:var(--ink);
  margin:0 0 1.4rem;max-width:none}
.q-opts{display:grid;gap:.5rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:34rem){.q-opts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.q-o{font:500 1rem/1.3 var(--sans);text-align:left;padding:.85rem 1rem;border-radius:10px;
  border:1.5px solid var(--rule-2);background:var(--paper);color:var(--ink);cursor:pointer;
  transition:border-color .14s,background .14s}
.q-o:hover:enabled{border-color:var(--ink)}
.q-o:disabled{cursor:default;opacity:.55}
.q-o.is-right{border-color:var(--ok);background:var(--ok-w);color:var(--ok);opacity:1;font-weight:700}
.q-o.is-wrong{border-color:var(--no);background:var(--no-w);color:var(--no);opacity:1}
.q-fb{margin-top:1.1rem;padding:1rem 1.2rem;border-radius:10px;border:1px solid}
.q-fb.good{background:var(--ok-w);border-color:var(--ok-b)}
.q-fb.bad{background:var(--warn-w);border-color:var(--warn-b)}
.q-fb b{display:block;font-size:1.05rem;margin-bottom:.4rem}
.q-fb.good b{color:var(--ok)} .q-fb.bad b{color:var(--warn)}
.q-fb p{margin:0 0 .9rem;font-size:1rem;line-height:1.6;max-width:none}
.q-btn{font:600 .95rem var(--sans);padding:.6rem 1.2rem;border-radius:8px;border:0;
  background:var(--ink);color:#fff;cursor:pointer}
.q-btn:hover{background:var(--app)}
.q-done{text-align:center;padding:1.5rem 0}
.q-done b{display:block;font-family:var(--serif);font-size:3rem;color:var(--ink);line-height:1}
.q-done p{margin:.8rem auto 1.4rem;max-width:34ch;font-size:1.05rem}

/* ─────────── end ─────────── */
.end{margin-top:4.5rem;padding-top:2rem;border-top:2px solid var(--ink)}
.recap{display:grid;gap:.6rem;grid-template-columns:minmax(0,1fr);margin:2rem 0}
@media(min-width:52rem){.recap{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rc{background:var(--card);border:1px solid var(--rule);border-top:3px solid var(--ink);
  border-radius:0 0 12px 12px;padding:1rem 1.2rem}
.rc span{font:700 11px/1 var(--mono);color:var(--muted)}
.rc b{display:block;font-family:var(--serif);font-size:1.25rem;color:var(--ink);margin:.4rem 0 .3rem}
.rc i{font-style:normal;font-size:.96rem;line-height:1.55;color:var(--ink-2)}
.offer{background:var(--app-w);border:1px solid var(--app-b);border-radius:12px;
  padding:1.1rem 1.3rem;font-size:1.05rem;line-height:1.65;max-width:var(--measure)}
.src{font-size:.88rem;line-height:1.65;color:var(--muted);margin-top:2rem;max-width:none}

@media(max-width:34rem){
  body{font-size:16px}
  :root{--read:1.08rem}
  .quiz{padding:1.1rem}
  .q-item{font-size:1.25rem}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{
  .toc,.quiz-sec,.offer,.rings{display:none}
  body{background:#fff}
  article{max-width:none}
}