
:root{
  --paper:#eceff2; --sheet:#ffffff; --ink:#12171e; --ink-2:#39424e; --ink-3:#6c7684;
  --rule:#d2d9df; --rule-2:#e7ebef;
  --band:#132c36;
  --signal:#1f6fb2; --signal-soft:#e2edf7;
  --alert:#9c5c07; --alert-soft:#f8ecd8;
  --care:#186b4c; --care-soft:#dff0e7;
  --stop:#7a3f68; --stop-soft:#f4e3ee;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular","Cascadia Mono",Menlo,Consolas,monospace;
  --measure:72ch;
  --r:4px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.66;
  font-kerning:normal;text-rendering:optimizeLegibility;
}
a{color:var(--ink);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--signal)}
code{font-family:var(--mono);font-size:.86em;background:var(--rule-2);padding:.06em .34em;border-radius:2px}
b,strong{font-weight:650}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:9;background:var(--band);color:#fff;padding:.5rem .8rem}

/* masthead ---------------------------------------------------------------- */
.top{position:sticky;top:0;z-index:5;background:var(--band);border-left:6px solid var(--signal)}
.bar-inner{max-width:1200px;margin:0 auto;padding:.72rem 1.4rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.brandmark{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.02rem;
  letter-spacing:-.015em;text-decoration:none;color:#fff}
.brandmark .mark{color:#5fb0e6;font-size:1.1rem}
.duty-tag{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;
  border:1px solid #3a545f;border-radius:99px;padding:.18rem .6rem;color:#a9bfc8}
.menu{display:flex;gap:.1rem;flex-wrap:wrap;margin-left:auto}
.menu a{font-size:.8rem;letter-spacing:.02em;text-decoration:none;color:#a9bfc8;padding:.3rem .55rem;border-radius:99px}
.menu a:hover{color:#fff;background:#1e424e}
.menu a[aria-current="page"]{color:#fff;background:#1e424e;font-weight:600}

.btn{display:inline-block;background:var(--signal);color:#fff;text-decoration:none;border-radius:var(--r);
  font-size:.83rem;font-weight:600;letter-spacing:.02em;padding:.58rem 1rem;border:1px solid var(--signal)}
.btn:hover{background:var(--care);border-color:var(--care);color:#fff}
.ghost{display:inline-block;border:1px solid var(--rule);border-radius:var(--r);color:var(--ink-2);
  text-decoration:none;font-size:.83rem;padding:.52rem .95rem;background:var(--sheet)}
.ghost:hover{border-color:var(--ink);color:var(--ink)}

/* obligations ribbon ------------------------------------------------------ */
.ribbon{background:#0e222b;border-bottom:1px solid #24434f}
.ribbon-inner{max-width:1200px;margin:0 auto;padding:.5rem 1.4rem;display:flex;gap:1.4rem;flex-wrap:wrap}
.ribbon-inner span{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:#8aa7b1}
.ribbon-inner b{color:#e8eff2;font-weight:600}

/* shell ------------------------------------------------------------------- */
.wrap{max-width:1200px;margin:0 auto;padding:0 1.4rem}
.disclosure{background:var(--sheet);border:1px solid var(--rule);border-left:4px solid var(--alert);
  border-radius:var(--r);padding:.95rem 1.1rem;display:flex;gap:.9rem;align-items:flex-start;
  font-size:.86rem;color:var(--ink-2);max-width:88ch;margin:1.1rem 0}
.tag{font-family:var(--mono);font-size:.63rem;text-transform:uppercase;letter-spacing:.13em;
  border:1px solid currentColor;border-radius:99px;padding:.16rem .5rem;white-space:nowrap;margin-top:.2rem}
.tag-money{color:var(--alert)}

/* hero -------------------------------------------------------------------- */
.linehead{padding:2rem 0 0;border-bottom:1px solid var(--rule)}
.crumb{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3)}
.head-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(250px,.85fr);gap:2.4rem;
  align-items:start;padding:1.1rem 0 1.7rem}
.eyebrow{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;color:var(--signal);margin-bottom:.55rem}
h1{font-weight:760;font-size:clamp(2rem,4.6vw,3.1rem);line-height:1.05;letter-spacing:-.03em;
  margin:0 0 .8rem;max-width:23ch;padding-left:.9rem;border-left:3px solid var(--signal)}
.lede{font-size:1.12rem;color:var(--ink-2);max-width:54ch;margin:0 0 1.15rem}
.hero-cta{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.specrail{background:var(--sheet);border:1px solid var(--rule);border-top:3px solid var(--band);
  border-radius:var(--r);padding:1rem 1.1rem}
.specrail strong{display:block;font-family:var(--mono);font-size:.66rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--ink-3);margin-bottom:.65rem}
.specrail dl{display:grid;grid-template-columns:1fr auto;gap:.32rem .8rem;margin:0}
.specrail dt{font-size:.82rem;color:var(--ink-2)}
.specrail dd{margin:0;font-family:var(--mono);font-size:.82rem;text-align:right;font-weight:600}

/* the watch band (signature component 1) ---------------------------------- */
.watchband{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r);margin:1.7rem 0 0;overflow:hidden}
.watchband-head{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;flex-wrap:wrap;
  padding:.75rem 1.1rem;background:#f6f8fa;border-bottom:1px solid var(--rule)}
.watchband-head b{font-family:var(--mono);font-size:.94rem;text-transform:uppercase;letter-spacing:.05em}
.watchband-head span{font-family:var(--mono);font-size:.72rem;color:var(--ink-3)}
.watch-row{display:grid;grid-template-columns:minmax(150px,1.15fr) minmax(120px,2.4fr) minmax(120px,1fr);
  gap:.9rem;align-items:center;padding:.72rem 1.1rem;border-top:1px solid var(--rule-2)}
.watch-row:first-of-type{border-top:0}
.watch-row .sg{font-size:.9rem;font-weight:620}
.watch-row .sg small{display:block;font-weight:400;font-size:.76rem;color:var(--ink-3)}
.track{position:relative;height:10px;background:var(--rule-2);border-radius:99px;overflow:hidden}
.track i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;display:block}
.track .tick{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);left:50%}
.fill-signal i{background:var(--signal)}
.fill-alert i{background:var(--alert)}
.fill-care i{background:var(--care)}
.watch-row .out{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;
  text-align:right;padding:.14rem .45rem;border:1px solid currentColor;border-radius:99px;justify-self:end}
.out-signal{color:var(--signal)}
.out-alert{color:var(--alert)}
.out-care{color:var(--care)}
.out-stop{color:var(--stop)}
.watchband-foot{padding:.75rem 1.1rem;border-top:1px solid var(--rule-2);font-size:.82rem;color:var(--ink-3);background:#f6f8fa}

/* the duty chain (signature component 2) ---------------------------------- */
.chain{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin:1.5rem 0}
.chain-step{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r);
  padding:1rem 1rem 1.05rem;position:relative}
.chain-step::after{content:"\2192";position:absolute;right:-.72rem;top:1.15rem;color:var(--ink-3);
  font-size:1rem;background:var(--paper);padding:0 .14rem}
.chain-step:last-child::after{content:""}
.chain-step .no{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--ink-3);
  text-transform:uppercase}
.chain-step .ob{display:block;font-family:var(--mono);font-size:.68rem;text-transform:uppercase;
  letter-spacing:.1em;margin:.35rem 0 .5rem;color:var(--care)}
.chain-step h3{margin:0 0 .35rem;font-size:1rem;font-weight:650}
.chain-step p{margin:0;font-size:.83rem;color:var(--ink-2)}

/* direct answer ----------------------------------------------------------- */
.answer{background:var(--sheet);border:1px solid var(--rule);border-left:4px solid var(--signal);
  border-radius:var(--r);padding:1rem 1.15rem;margin:1.7rem 0 0;max-width:var(--measure)}
.answer b{display:block;font-family:var(--mono);font-size:.67rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--signal);margin-bottom:.4rem}
.answer p{margin:0;font-size:1.05rem}

/* state chips ------------------------------------------------------------- */
.chip{display:inline-block;font-family:var(--mono);font-size:.67rem;text-transform:uppercase;
  letter-spacing:.1em;padding:.15rem .48rem;border:1px solid currentColor;border-radius:99px;white-space:nowrap}
.chip-signal{color:var(--signal)}
.chip-alert{color:var(--alert)}
.chip-care{color:var(--care)}
.chip-stop{color:var(--stop)}

/* cards / samples --------------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:1rem;margin:1.6rem 0}
.card{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r);padding:1rem 1.05rem}
.card-top{font-family:var(--mono);font-size:.67rem;text-transform:uppercase;letter-spacing:.11em;
  color:var(--signal);margin-bottom:.5rem}
.card p{margin:0 0 .75rem;font-size:.88rem;color:var(--ink-2)}
.card-spec{display:grid;grid-template-columns:1fr auto;gap:.24rem .7rem;margin:0}
.card-spec dt{font-size:.78rem;color:var(--ink-3)}
.card-spec dd{margin:0;font-family:var(--mono);font-size:.78rem;text-align:right;font-weight:600}

/* prose ------------------------------------------------------------------- */
main h2{font-weight:730;font-size:1.62rem;line-height:1.15;letter-spacing:-.02em;margin:2.6rem 0 .7rem}
main h3{font-size:1.07rem;margin:1.7rem 0 .4rem;letter-spacing:-.005em}
main p{max-width:var(--measure)}
main ul,main ol{max-width:var(--measure);padding-left:1.15rem}
main li{margin:.32rem 0}
section{padding-bottom:1rem}
blockquote{margin:1.3rem 0;padding:.2rem 0 .2rem 1rem;border-left:3px solid var(--signal);
  font-size:1.1rem;color:var(--ink-2)}

/* worked arithmetic ------------------------------------------------------- */
.calc{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r);padding:.95rem 1.05rem;
  margin:1rem 0;max-width:var(--measure)}
.calc h4{margin:0 0 .55rem;font-family:var(--mono);font-size:.69rem;text-transform:uppercase;
  letter-spacing:.12em;color:var(--ink-3);font-weight:600}
.calc ol{margin:.3rem 0 .55rem;padding-left:1.25rem;font-family:var(--mono);font-size:.84rem}
.calc .res{border-top:1px dashed var(--rule);padding-top:.5rem;font-family:var(--mono);font-size:.86rem;font-weight:600}
.calc .res em{color:var(--alert);font-style:normal}

/* tables ------------------------------------------------------------------ */
table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.85rem;max-width:var(--measure);
  background:var(--sheet)}
caption{caption-side:top;text-align:left;font-family:var(--mono);font-size:.69rem;text-transform:uppercase;
  letter-spacing:.12em;color:var(--ink-3);padding-bottom:.5rem}
th,td{border-bottom:1px solid var(--rule-2);padding:.55rem .65rem;text-align:left;vertical-align:top}
th{font-family:var(--mono);font-size:.71rem;text-transform:uppercase;letter-spacing:.08em;
  border-bottom:1px solid var(--ink);background:#f6f8fa}
td.num,th.num{text-align:right;font-family:var(--mono)}
tbody tr:hover{background:#f6f8fa}

/* checks / steps / tallies / myths --------------------------------------- */
.checks,.steps,.tally{max-width:var(--measure);margin:1rem 0;padding:0;list-style:none}
.checks li,.steps li,.tally li{border-top:1px solid var(--rule-2);padding:.62rem 0 .62rem 2.2rem;position:relative}
.checks li:last-child,.steps li:last-child,.tally li:last-child{border-bottom:1px solid var(--rule-2)}
.checks li::before{content:"\2713";position:absolute;left:.3rem;color:var(--care);font-weight:700}
.steps{counter-reset:s}
.steps li{counter-increment:s}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;font-family:var(--mono);
  font-size:.74rem;color:var(--signal);font-weight:600}
.tally li::before{content:"\25CF";position:absolute;left:.35rem;color:var(--signal);font-size:.62rem;top:.95rem}
.myth{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r);padding:.95rem 1.05rem;
  margin:.8rem 0;max-width:var(--measure)}
.myth .claim{font-size:1.04rem;font-weight:620;margin:0 0 .45rem}
.myth .verdict{font-family:var(--mono);font-size:.67rem;text-transform:uppercase;letter-spacing:.12em;
  border:1px solid currentColor;border-radius:99px;padding:.13rem .48rem;margin-right:.5rem}
.v-false{color:var(--stop)}
.v-partly{color:var(--alert)}
.v-true{color:var(--care)}
.myth p:last-child{margin-bottom:0;font-size:.9rem;color:var(--ink-2)}

/* faq --------------------------------------------------------------------- */
.qa{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem;border-top:1px solid var(--rule-2);
  padding:.95rem 0;max-width:var(--measure)}
.qa .ref{font-family:var(--mono);font-size:.7rem;color:var(--signal);padding-top:.28rem}
.qa h3{margin:0 0 .3rem}
.qa p{margin:0;font-size:.92rem;color:var(--ink-2)}

/* navlinks ---------------------------------------------------------------- */
.navlinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:1rem;margin:2.2rem 0}
.navlink{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r);padding:.85rem 1rem;
  text-decoration:none;display:block}
.navlink b{display:block;font-size:1rem;font-weight:650;margin-bottom:.15rem}
.navlink span{font-size:.82rem;color:var(--ink-3)}
.navlink:hover{border-color:var(--signal);background:var(--signal-soft)}
.navlink:hover b{color:var(--signal)}

/* footer ------------------------------------------------------------------ */
.footer{border-top:3px solid var(--band);background:var(--sheet);margin-top:2.6rem;padding:2.1rem 0}
.foot-grid{max-width:1200px;margin:0 auto;padding:0 1.4rem;display:grid;
  grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:2rem}
.foot-grid p{font-size:.82rem;color:var(--ink-3);max-width:46ch}
.foot-grid strong{display:block;font-family:var(--mono);font-size:.69rem;text-transform:uppercase;
  letter-spacing:.12em;color:var(--ink-3);margin-bottom:.5rem}
.foot-grid a{display:block;font-size:.84rem;color:var(--ink-2);text-decoration:none;padding:.17rem 0}
.foot-grid a:hover{color:var(--signal)}
.fine{max-width:1200px;margin:1.7rem auto 0;padding:1.25rem 1.4rem 0;border-top:1px solid var(--rule-2);
  font-size:.76rem;color:var(--ink-3)}

@media (max-width:920px){
  .head-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .chain{grid-template-columns:1fr 1fr}
  .chain-step::after{content:""}
  .watch-row{grid-template-columns:1fr;row-gap:.45rem}
  .watch-row .out{justify-self:start}
}
