/* Generated by scripts/build-guides.mts - edit the template there, not here. */
:root{--paper:#fff;--wash:#f7f8fa;--ink:#0f1115;--ink-soft:#4a5058;--ink-faint:#767d87;--hairline:#e4e7ec;--accent:#ff7a1a;--accent-ink:#9a4200;--brand-blue:#2563eb;--warn-bg:#fffaf0;--warn-line:#e8c88a;--warn-ink:#6b4708;--ok:#0f7a4a;--radius:16px}
@font-face{font-family:Poppins;font-weight:400;font-display:swap;src:url(/fonts/poppins-400.woff2) format('woff2')}
@font-face{font-family:Poppins;font-weight:600;font-display:swap;src:url(/fonts/poppins-600.woff2) format('woff2')}
@font-face{font-family:Poppins;font-weight:700;font-display:swap;src:url(/fonts/poppins-700.woff2) format('woff2')}
@font-face{font-family:Poppins;font-weight:800;font-display:swap;src:url(/fonts/poppins-800.woff2) format('woff2')}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16.5px/1.6 Poppins,system-ui,sans-serif;-webkit-text-size-adjust:100%}
a{color:var(--accent-ink)}
img{max-width:100%;height:auto}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;border-bottom:1px solid var(--hairline);position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);z-index:5}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;color:var(--ink);text-decoration:none}
/* "Tools" is BLUE, not the orange accent (Kenneth, 2026-08-15). The wordmark is
   brand identity rather than a UI accent, and #2563eb is the exact colour the
   React app already computes for it - measured off the live landing page, so
   these 41 static pages now match the app instead of disagreeing with it. Every
   real accent on these pages (the tick bullets, the form links, the pills) is
   still the orange. 5.2:1 on white. */
.brand b{color:var(--brand-blue)}
.cta{background:var(--ink);color:#fff;text-decoration:none;font-weight:700;font-size:14px;padding:9px 15px;border-radius:999px;white-space:nowrap}
/* 1120, not 760. At 760 a laptop shows two thirds empty gutter, and the Kape
   Explains diagrams are drawn 1240 wide - in a 760 column they would be scaled
   to half size and become unreadable. Prose does NOT get the full width: the
   detail page splits into a reading column plus a rail (.doc below), because a
   1100px line of text is harder to read, not easier. */
.wrap{max-width:1120px;margin:0 auto;padding:34px 24px 10px}
/* Reading column + sticky rail. One column until there is genuinely room. */
.doc{display:grid;gap:40px;align-items:start}
.doc-main{min-width:0;max-width:760px}
/* align-self:stretch is what makes the rail below ACTUALLY sticky, and without
   it the rail was never sticky on any of these pages. The align-items:start
   above collapses this aside to its own CONTENT height, and a sticky element
   with no taller parent to travel inside just scrolls away with the article.
   Measured before the fix: .doc-side and .rail came back the same height on
   every page. (No backticks in this block - the CSS is a TS template literal
   and one would end the string, which is exactly how this edit failed first.) */
.doc-side{min-width:0;align-self:stretch}
.nav{display:flex;align-items:center;gap:20px}
.nav a{color:var(--ink-soft);text-decoration:none;font-size:14px;font-weight:500;white-space:nowrap}
.nav a:hover{color:var(--ink)}
/* .nav a beats .cta on specificity, so without this the CTA's label inherits
   ink-soft and renders grey on the dark pill. Caught in a screenshot, not by
   any assertion - nothing overflowed and every link still worked. */
.nav a.cta{color:#fff}
.nav a.cta:hover{color:#fff}
/* Once it sticks it never moves, so a rail taller than the window would have its
   bottom permanently out of reach - the Kape Explains jump lists run to 1,573px
   against a 900px viewport. It scrolls inside itself past that point, using auto
   rather than scroll so the shorter ID rails show no bar at all. */
.rail{position:sticky;top:84px;max-height:calc(100dvh - 104px);overflow-y:auto;overscroll-behavior:contain}
.rail h4{margin:0 0 10px;font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint)}
.rail ul{list-style:none;margin:0 0 26px;padding:0}
.rail li{margin:0 0 8px}
.rail a{color:var(--ink-soft);text-decoration:none;font-size:14px}
.rail a:hover{color:var(--ink)}
.crumbs{font-size:13.5px;color:var(--ink-faint);margin-bottom:14px}
.crumbs span{margin:0 6px}
h1{font-weight:800;font-size:clamp(28px,5vw,40px);line-height:1.12;letter-spacing:-.02em;margin:0 0 14px;text-wrap:balance}
h2{font-weight:800;font-size:22px;letter-spacing:-.01em;margin:38px 0 12px;padding-top:20px;border-top:1px solid var(--hairline)}
h3{font-weight:700;font-size:17px;margin:22px 0 8px}
.lead{font-size:18px;color:var(--ink-soft);margin:0 0 22px}
p{margin:0 0 12px}
.facts{display:grid;gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden;margin:0 0 26px}
.facts>div{background:var(--wash);padding:12px 16px;display:flex;flex-direction:column;gap:3px;min-width:0}
.facts dt{margin:0;font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint)}
.facts dd{margin:0;font-weight:600;font-size:15px;line-height:1.4;min-width:0;overflow-wrap:anywhere}
.facts a{color:inherit;text-decoration-color:var(--hairline)}
.shot{margin:0 0 26px;border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden;background:#fff}
.shot img{display:block;width:100%;max-height:280px;object-fit:contain;padding:14px}
.shot figcaption{font-size:12px;color:var(--ink-faint);padding:8px 14px;border-top:1px solid var(--hairline);background:var(--wash)}
.ch{border:1px solid var(--hairline);border-radius:var(--radius);padding:16px 18px;margin:0 0 14px;background:var(--paper)}
.ch h3{margin:0 0 8px;font-size:18px}
.ch-off{background:var(--wash);color:var(--ink-soft)}
.ch-off h3{display:inline;margin-right:8px}
.ch-off .state{display:inline;margin:0}
.pill{display:inline-block;font-size:12.5px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--wash);border:1px solid var(--hairline)}
.pill-yes{background:#eaf7f0;border-color:#b8e0cb;color:var(--ok)}
.pill-partial{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-ink)}
.pill-varies{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-ink)}
.pill-no{background:var(--wash);color:var(--ink-faint)}
.summary{color:var(--ink-soft);margin:8px 0 0}
.steps{margin:14px 0 0;padding-left:22px}
.steps li{margin:0 0 9px;padding-left:3px}
.note{margin-top:12px;font-size:14.5px;color:var(--ink-soft);background:var(--wash);border-radius:10px;padding:10px 13px}
.ticks{list-style:none;margin:0;padding:0}
.ticks li{position:relative;padding-left:26px;margin:0 0 9px}
.ticks li:before{content:"";position:absolute;left:4px;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--accent);opacity:.5}
.warn{background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:var(--radius);padding:14px 18px;margin:26px 0}
.warn h2{border:0;padding:0;margin:0 0 6px;font-size:17px;color:var(--warn-ink)}
.warn p{font-size:14.5px;color:var(--warn-ink)}
.warn ul{margin:0;padding-left:20px;font-size:14.5px}
.cap{color:var(--ink-faint);font-size:14.5px;margin:-6px 0 14px}
/* Rows, not the two-column list the requirements use: a form is a thing you act
   on, so each gets the full width and reads as one target. */
.forms{list-style:none;margin:0;padding:0}
.forms li{margin:0 0 10px}
.forms a{display:block;border:1px solid var(--hairline);border-radius:var(--radius);padding:13px 16px;text-decoration:none;color:inherit;background:var(--paper)}
.forms a:hover{border-color:var(--accent);background:var(--wash)}
.fl-t{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;font-weight:700;font-size:15px;color:var(--accent-ink)}
.fl-k{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);border:1px solid var(--hairline);background:var(--wash);border-radius:6px;padding:2px 6px}
.fl-n{display:block;margin-top:5px;font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
.srcs{padding-left:20px}
.srcs li{margin:0 0 7px}
.cards{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cards li{border:1px solid var(--hairline);border-radius:var(--radius);padding:14px 16px;background:var(--paper)}
.cards a{display:flex;justify-content:space-between;gap:12px;align-items:baseline;text-decoration:none;color:var(--ink);font-weight:700}
.cards .c{font-size:13px;color:var(--accent-ink);white-space:nowrap;font-weight:700}
.cards p{margin:6px 0 0;font-size:14.5px;color:var(--ink-soft)}
dl{margin:0 0 12px}
dt{font-weight:700;margin-top:10px}
dd{margin:0 0 6px}
ol,ul{padding-left:22px}
.foot{max-width:760px;margin:44px auto 0;padding:22px 20px 46px;border-top:1px solid var(--hairline);color:var(--ink-soft);font-size:14.5px}
.foot .fine{font-size:13px;color:var(--ink-faint)}
/* Four controls plus a wordmark do not fit 390px. The text links drop and the
   CTA stays; getting home is still one tap via the wordmark and the breadcrumb,
   which both link to /home/ on every page. */
@media(max-width:719px){.nav a:not(.cta){display:none}.nav{gap:0}}
@media(min-width:640px){.cards{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){
  .doc{grid-template-columns:minmax(0,1fr) 280px}
  .cards{grid-template-columns:1fr 1fr 1fr}
}