/* dfirswarm.ai — site styles. Tokens follow the DFIR Swarm design system. */
:root{
  --paper:#f4f1ea;--paper-2:#efece4;--paper-3:#e6e1d6;--card:#fffdf9;
  --ink:#1c1b1a;--ink-2:#55524c;--ink-3:#6b675f;--line:#ddd8cc;--line-2:#ccc6b8;
  --band:#1c1b1a;--band-2:#2e2c29;--band-line:#3a3835;--band-ink:#f4f1ea;--band-ink-2:#b8b3a8;--band-brick:#f0a5ae;
  --kelp:#0e7c7b;--kelp-ink:#0a5d5c;--kelp-soft:#dcefee;--kelp-light:#3fb3b1;--kelp-pale:#8fd6d4;
  --saffron:#e09f3e;--saffron-ink:#9a5f0c;--saffron-soft:#fbebd3;
  --brick:#b23a48;--brick-ink:#8b2532;--brick-soft:#f5dade;
  --slate:#3e5c76;--slate-ink:#2c4660;--slate-soft:#dce4ec;
  --moss:#4c7a34;--moss-ink:#2f5a1c;--moss-soft:#e1edd8;
  --sans:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --gutter:clamp(16px,4.4vw,64px);--maxw:1312px;--r:10px;--r-sm:6px;
  --shadow:0 1px 0 rgba(28,27,26,.04),0 1px 2px rgba(28,27,26,.06);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--kelp-ink)}a:hover{color:var(--kelp)}
h1,h2,h3{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;margin:0;line-height:1.04}
h1{font-size:clamp(40px,6.2vw,84px);line-height:.98}
h2{font-size:clamp(30px,3.6vw,48px)}
h3{font-size:clamp(24px,2.2vw,30px)}
p{margin:0}
ul,ol{margin:0;padding-left:20px}
strong{font-weight:500}
code,.mono{font-family:var(--mono);font-size:.92em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.kicker{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.band .kicker{color:var(--band-ink-2)}
.lede{font-size:clamp(16px,1.3vw,18px);color:var(--ink-2);max-width:72ch}
.band .lede{color:var(--band-ink-2)}
.muted{color:var(--ink-3)}
.small{font-size:13px}
.stack{display:flex;flex-direction:column;gap:16px}
.stack-lg{display:flex;flex-direction:column;gap:28px}
section{padding:clamp(48px,6vw,72px) 0}
section.tight{padding-top:24px}
.band{background:var(--band);color:var(--band-ink)}
.band a{color:var(--kelp-pale)}.band a:hover{color:#fff}
.paper-2{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hairline{border-top:1px solid var(--line)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--kelp);color:#fff;padding:8px 12px;z-index:100}.skip:focus{left:8px;top:8px}

/* header */
.site-header{background:var(--band);color:var(--band-ink);border-bottom:1px solid var(--band-line)}
.site-header .wrap{display:flex;align-items:center;gap:24px;min-height:72px}
.brand{display:flex;align-items:center;gap:10px;color:var(--band-ink);text-decoration:none}
.brand img{width:28px;height:28px}
.brand span{font-family:var(--serif);font-style:italic;font-size:24px;line-height:1}
.nav{display:flex;gap:22px;margin-left:12px;font-size:14px}
.nav a{color:var(--band-ink-2);text-decoration:none;padding:4px 0;border-bottom:1px solid transparent}
.nav a:hover{color:var(--band-ink)}
.nav a[aria-current="page"]{color:var(--band-ink);border-bottom-color:var(--kelp-light)}
.header-cta{margin-left:auto;display:flex;gap:10px;align-items:center}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--band-line);color:var(--band-ink);border-radius:6px;width:44px;height:40px;cursor:pointer}
.nav-toggle svg{margin:0 auto}
@media (max-width:860px){
  .site-header .wrap{flex-wrap:wrap;gap:12px;padding-top:12px;padding-bottom:12px}
  .nav-toggle{display:block}
  .header-cta{display:none}
  .nav{display:none;width:100%;flex-direction:column;gap:0;margin:0;border-top:1px solid var(--band-line);padding-top:8px}
  .nav a{padding:12px 0;border-bottom:1px solid var(--band-line);font-size:16px}
  .nav.open{display:flex}
}

/* buttons, chips */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 18px;border-radius:var(--r-sm);font-size:14px;font-weight:500;text-decoration:none;border:1px solid transparent;cursor:pointer;font-family:var(--sans);line-height:1}
.btn-primary{background:var(--kelp);color:#fff}.btn-primary:hover{background:var(--kelp-ink);color:#fff}
.btn-ghost{border-color:var(--line);color:var(--ink);background:var(--card)}.btn-ghost:hover{border-color:var(--line-2);color:var(--ink)}
.band .btn-ghost{border-color:var(--band-line);color:var(--band-ink);background:transparent}.band .btn-ghost:hover{color:#fff;border-color:var(--band-ink-2)}
.btn-sm{min-height:32px;padding:0 12px;font-size:13px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.chip{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:9999px;font-size:12px;font-weight:500;line-height:1;white-space:nowrap}
.chip.mono{font-family:var(--mono);font-weight:400}
.chip-neutral{background:var(--paper-3);color:var(--ink-2)}
.chip-kelp{background:var(--kelp-soft);color:var(--kelp-ink)}
.chip-saffron{background:var(--saffron-soft);color:var(--saffron-ink)}
.chip-brick{background:var(--brick-soft);color:var(--brick-ink)}
.chip-slate{background:var(--slate-soft);color:var(--slate-ink)}
.chip-moss{background:var(--moss-soft);color:var(--moss-ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.arrow{font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap}

/* grids */
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:28px}
.span-4{grid-column:span 4}.span-5{grid-column:span 5}.span-6{grid-column:span 6}.span-7{grid-column:span 7}.span-8{grid-column:span 8}.span-12{grid-column:span 12}
.start-9{grid-column:9/span 4}.start-7{grid-column:7/span 6}
@media (max-width:1000px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.grid-12>*{grid-column:span 12!important}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr)}}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.section-head h2{max-width:820px}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow)}
.card h3{font-size:24px}
.card p{font-size:14px;color:var(--ink-2)}
.card .kicker{color:var(--ink-3)}
.card-dark{background:var(--band-2);border-color:var(--band-line);color:var(--band-ink);box-shadow:none}
.card-dark p{color:var(--band-ink)}.card-dark .kicker{color:var(--band-brick)}
.card-dark .here{color:var(--band-ink-2);font-size:13px}.card-dark .here strong{color:var(--kelp-pale)}
.card-kelp{border-color:var(--kelp)}
.card a.card-link{color:inherit;text-decoration:none}
a.card{color:inherit;text-decoration:none}a.card:hover{border-color:var(--line-2)}
.card .name{font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.1}
.card .tools{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}

/* hero */
.hero{padding:clamp(56px,7vw,88px) 0 clamp(40px,5vw,56px)}
.hero .grid-12{align-items:end}
.dot{display:inline-block;width:8px;height:8px;border-radius:9999px;background:var(--kelp-light);margin-right:10px;vertical-align:middle}
.hero-side{font-size:13px;color:var(--band-ink-2);display:flex;flex-direction:column;gap:12px}
.hero-side .mono{font-size:12px}
.claims{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--band-line)}
.claims>div{padding:24px 24px 32px 0;border-right:1px solid var(--band-line);display:flex;flex-direction:column;gap:10px}
.claims>div+div{padding-left:24px}
.claims>div:last-child{border-right:0;padding-right:0}
.claims .n{font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--kelp-pale)}
.claims .t{font-family:var(--serif);font-style:italic;font-size:28px;line-height:1.1}
.claims .d{font-size:13px;color:var(--band-ink-2)}
@media (max-width:1000px){.claims{grid-template-columns:repeat(2,minmax(0,1fr))}.claims>div{border-right:0;padding-left:0!important;border-bottom:1px solid var(--band-line)}}
@media (max-width:640px){.claims{grid-template-columns:minmax(0,1fr)}}

/* figures */
.figure{display:flex;flex-direction:column;gap:10px}
.figure img{width:100%;border:1px solid var(--line-2);border-radius:var(--r);background:var(--card);box-shadow:var(--shadow)}
.figure figcaption{font-size:13px;color:var(--ink-2)}
.figure figcaption .mono{color:var(--ink-3);font-size:12px}
.band .figure img{border-color:var(--band-line)}
.band .figure figcaption{color:var(--band-ink-2)}
.console-overlap{background:linear-gradient(var(--band) 0,var(--band) 200px,var(--paper) 200px);padding-top:0}
@media (max-width:640px){.console-overlap{background:linear-gradient(var(--band) 0,var(--band) 80px,var(--paper) 80px)}}

/* diagrams */
.diagram-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.diagram{width:100%;height:auto;font-family:var(--mono);display:block}
.diagram-wrap .diagram{min-width:960px}
.diagram-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 24px 24px;display:flex;flex-direction:column;gap:12px}
.band .diagram-card{background:transparent;border:0;padding:0}
blockquote.pull{margin:0;padding:20px 22px;border-left:2px solid var(--band-brick);background:var(--band-2);border-radius:0 var(--r) var(--r) 0}
blockquote.pull p:first-child{font-family:var(--serif);font-style:italic;font-size:26px;line-height:1.2}
blockquote.pull p+p{margin-top:10px;font-size:12px;color:var(--band-ink-2)}

/* steps and vocab */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.step{display:flex;flex-direction:column;gap:12px}
.step .num{display:flex;align-items:center;gap:10px}
.step .num span{font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--kelp-ink)}
.step .num strong{font-family:var(--serif);font-style:italic;font-weight:400;font-size:24px}
.step p{font-size:14px;color:var(--ink-2)}
@media (max-width:1000px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.steps{grid-template-columns:minmax(0,1fr)}}
.vocab{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px 20px;font-size:14px;color:var(--ink-2)}
.vocab .w{font-family:var(--mono);color:var(--ink);font-weight:500}
@media (max-width:480px){.vocab{grid-template-columns:minmax(0,1fr)}.vocab .w{margin-top:8px}}
.mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mini>div{display:flex;flex-direction:column;gap:6px;padding:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);font-size:13px;color:var(--ink-2)}
.mini .kicker{color:var(--kelp-ink)}
@media (max-width:640px){.mini{grid-template-columns:minmax(0,1fr)}}

/* tables */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:14px;min-width:720px}
th,td{padding:12px;vertical-align:top;text-align:left;border-bottom:1px solid var(--line)}
th{font-weight:500}
thead th{font-family:var(--serif);font-style:italic;font-weight:400;font-size:22px;border-top:1px solid var(--ink)}
thead th.plain{font-family:var(--sans);font-size:14px}
tbody th{color:var(--ink-2);font-weight:400;width:18%}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:1px solid var(--ink)}
td.hl{background:var(--card)}
td.swarm{background:var(--kelp-soft);color:var(--kelp-ink)}
th.swarm{color:var(--kelp-ink)}

/* criteria list */
.criteria{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.criteria li{display:flex;gap:14px;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.criteria .n{flex:0 0 28px;height:28px;border-radius:9999px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px}
.criteria strong{display:block;margin-bottom:4px}
.criteria span.d{font-size:13.5px;color:var(--ink-2)}
@media (max-width:760px){.criteria{grid-template-columns:minmax(0,1fr)}}
.numbered{display:flex;flex-direction:column;gap:10px;font-size:13.5px;color:var(--ink-2);padding-left:22px}
.numbered strong{color:var(--ink)}

/* custody */
.custody{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;font-family:var(--mono);font-size:12px}
.custody .k{color:var(--ink-3)}.custody .adv{color:var(--brick-ink);font-weight:500}
.band .custody .k{color:var(--band-ink-2)}.band .custody .adv{color:var(--band-brick)}

/* forms */
.form{display:flex;flex-direction:column;gap:14px;padding:24px;background:var(--band-2);border:1px solid var(--band-line);border-radius:var(--r)}
.form .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:560px){.form .row{grid-template-columns:minmax(0,1fr)}}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--band-ink-2)}
.field input,.field select,.field textarea{font:inherit;font-size:15px;color:var(--band-ink);background:var(--band);border:1px solid var(--band-line);border-radius:var(--r-sm);padding:10px 12px;min-height:44px}
.field textarea{resize:vertical;min-height:140px;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--kelp-light);outline-offset:1px}
.form .actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.form .note{font-size:12px;color:var(--band-ink-2)}
.form .status{font-size:14px;min-height:1.4em}
.form .status.ok{color:var(--kelp-pale)}.form .status.err{color:var(--band-brick)}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* footer */
.site-footer{background:var(--band);color:var(--band-ink-2);border-top:1px solid var(--band-line);font-size:13px}
.site-footer .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;padding-top:28px;padding-bottom:28px}
.site-footer a{color:var(--band-ink-2);text-decoration:none}.site-footer a:hover{color:var(--band-ink)}
.site-footer .copy{margin-left:auto}
.site-footer img{width:20px;height:20px}
@media (max-width:640px){.site-footer .copy{margin-left:0;width:100%}}

/* misc */
.two-col{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:start}
@media (max-width:860px){.two-col{grid-template-columns:minmax(0,1fr)}}
.aside{display:flex;flex-direction:column;gap:10px;padding:20px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);font-size:13.5px;color:var(--ink-2)}
.aside-dark{background:var(--band);color:var(--band-ink);border-color:var(--band)}
.aside-dark .kicker{color:var(--band-ink-2)}
.list{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--ink-2)}
.tick li{list-style:none;padding-left:22px;position:relative}
.tick li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:6px;border-left:2px solid var(--kelp);border-bottom:2px solid var(--kelp);transform:rotate(-45deg)}
.sources{font-size:12px;color:var(--ink-3);line-height:1.5}
.band .sources{color:var(--ink-3)}.band .sources a{color:var(--band-ink-2)}
.tier .price{font-family:var(--mono);font-size:13px;color:var(--ink-3)}
.tier ul{font-size:14px;color:var(--ink-2);line-height:1.7;padding-left:18px}
.tier .head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tier .head span:first-child{font-family:var(--serif);font-style:italic;font-size:30px}

/* ===== mobile review, 2026-09-21 ===== */
/* type sizes that were too small on phones */
@media (max-width:640px){
  .kicker{font-size:12px}
  .sources,.small,blockquote.pull p+p,.hero-side,.figure figcaption,.form .note{font-size:13.5px}
  .hero-side .mono{font-size:13px}
  .chip{font-size:13px;height:28px;padding:0 12px}
  .card .tools{font-size:12.5px}
  .criteria .n{font-size:13px}
  .claims .n{font-size:12px}
  .lede{font-size:16px}
  h2{font-size:clamp(28px,8vw,34px)}
  h1{font-size:clamp(34px,10vw,44px)}
  section{padding:40px 0}
}
/* tap targets: text links that sit alone get a 44px hit area without moving the layout */
.arrow,.hero-side a,.site-footer a,.brand{position:relative;display:inline-block;padding:11px 0;margin:-11px 0}
.brand{padding:8px 0;margin:-8px 0}
.site-footer a{padding:12px 0;margin:-12px 0}
/* inputs at 16px so iOS Safari does not zoom the page on focus */
.field input,.field select,.field textarea{font-size:16px}
/* notched phones */
.wrap{padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right))}
/* the contact form on narrow phones: less padding so the verification widget fits */
@media (max-width:420px){.form{padding:16px}}

/* diagrams: keep the labels legible and say that the drawing scrolls */
.diagram-wrap{position:relative}
.diagram-wrap .diagram{min-width:1100px}
.diagram-wrap .diagram-narrow{min-width:824px}
@media (max-width:860px){
  .diagram-wrap .diagram{min-width:1312px}
  .diagram-wrap .diagram-narrow{min-width:824px}
  .diagram-hint{display:flex}  /* see the base rule near the end of the file */
}
.diagram-hint{align-items:center;justify-content:space-between;gap:12px;font-size:13px;color:var(--ink-3);margin-top:8px}
.band .diagram-hint{color:var(--band-ink-2)}
.diagram-hint span::after{content:" →"}
.zoom-btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.band .zoom-btn{border-color:var(--band-line);background:transparent;color:var(--band-ink)}
.diagram-tools{display:flex;justify-content:flex-end;margin-top:8px}
@media (max-width:860px){.diagram-tools{display:none}}

/* tables: on phones each row becomes a card, each cell labelled by its column */
@media (max-width:700px){
  table,thead,tbody,tr,th,td{display:block}
  table{min-width:0}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  tbody tr{border:1px solid var(--line);border-radius:var(--r);background:var(--card);margin-bottom:12px;padding:6px 0;box-shadow:var(--shadow)}
  tbody th{width:auto;padding:10px 14px 6px;font-family:var(--serif);font-style:italic;font-size:22px;color:var(--ink);border-bottom:1px solid var(--line)}
  tbody td{padding:8px 14px;border-bottom:0}
  tbody td::before{content:attr(data-col);display:block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:2px}
  tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
  tbody tr:last-child th{border-bottom:1px solid var(--line)}
  td.swarm{background:var(--kelp-soft);border-radius:6px;margin:4px 8px;padding:8px 6px}
  td.hl{background:transparent}
}

/* screenshots enlarge */
a.zoom{display:block;position:relative;cursor:zoom-in;border-radius:var(--r)}
a.zoom::after{content:"";position:absolute;right:10px;bottom:10px;width:32px;height:32px;border-radius:9999px;background:rgba(28,27,26,.72) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f4f1ea' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3M11 8v6M8 11h6'/></svg>") center/16px no-repeat;opacity:.85;pointer-events:none}
a.zoom:hover::after,a.zoom:focus-visible::after{opacity:1}
a.zoom:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(20,19,18,.94);display:none;flex-direction:column}
.lightbox.open{display:flex}
.lightbox .lb-bar{display:flex;align-items:center;gap:12px;padding:10px max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));color:var(--band-ink-2);font-size:13px;min-height:52px}
.lightbox .lb-cap{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--band-ink)}
.lightbox .lb-btn{flex:none;width:44px;height:44px;border-radius:var(--r-sm);border:1px solid var(--band-line);background:transparent;color:var(--band-ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font:inherit}
.lightbox .lb-btn:hover{background:var(--band-2)}
.lightbox .lb-btn:focus-visible{outline:2px solid var(--focus-ring)}
.lightbox .lb-body{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y pinch-zoom;padding:0 max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));display:flex;align-items:flex-start;justify-content:center}
.lightbox .lb-body img{max-width:none;width:auto;height:auto;border:1px solid var(--band-line);border-radius:var(--r);background:var(--card)}
.lightbox .lb-body img.fit{max-width:100%;max-height:calc(100vh - 80px);object-fit:contain}
.lightbox .lb-body svg{background:var(--paper);border-radius:var(--r);padding:16px;width:1400px;max-width:none;height:auto}
.lightbox .lb-body svg.dark{background:var(--band)}
.lightbox .lb-hint{font-size:12px;color:var(--band-ink-2);white-space:nowrap}
@media (max-width:640px){.lightbox .lb-hint{display:none}}
body.lb-open{overflow:hidden}

/* choice chips (radio group) */
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choice{position:relative;display:inline-flex}
.choice input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.choice span{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:9999px;border:1px solid var(--band-line);background:var(--band);color:var(--band-ink-2);font-size:14px;line-height:1;cursor:pointer;user-select:none}
.choice input:checked+span{background:var(--kelp);border-color:var(--kelp);color:#fff}
.choice input:focus-visible+span{outline:2px solid var(--focus-ring);outline-offset:2px}
.choice span:hover{border-color:var(--band-ink-2);color:var(--band-ink)}
.choice input:checked+span:hover{color:#fff}
fieldset.field{border:0;padding:0;margin:0;min-width:0}
fieldset.field legend{padding:0;margin-bottom:6px}

/* editions */
.tier .status{display:flex;align-items:center;gap:8px}
.tier .free{font-family:var(--serif);font-style:italic;font-size:44px;line-height:1;color:var(--kelp-ink)}
.tier .free small{font-family:var(--mono);font-style:normal;font-size:12px;color:var(--ink-3);display:block;margin-top:6px}
.tier.today{border-color:var(--kelp);box-shadow:0 0 0 3px var(--kelp-soft)}
.tier .cta{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.tier .foot{font-size:12.5px;color:var(--ink-3);line-height:1.5}
.availability{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 14px;align-items:start;padding:16px 18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);font-size:14px;color:var(--ink-2)}
.availability .chip{margin-top:1px}
@media (max-width:480px){.availability{grid-template-columns:minmax(0,1fr)}}

/* the edition matrix */
.matrix{min-width:760px;border-collapse:separate;border-spacing:0}
.matrix thead th{border:0;padding:0 12px 14px;vertical-align:bottom}
.matrix thead th.plain{padding-left:0}
.matrix .ed{display:flex;flex-direction:column;gap:8px;padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);font-family:var(--sans);font-style:normal;font-size:13px;color:var(--ink-2);min-height:100%}
.matrix .ed .n{font-family:var(--serif);font-style:italic;font-size:26px;line-height:1;color:var(--ink)}
.matrix .ed.today{border-color:var(--kelp);background:var(--kelp-soft)}
.matrix .ed.today .n{color:var(--kelp-ink)}
.matrix tbody th{width:22%;padding:16px 16px 16px 0;border-bottom:1px solid var(--line);color:var(--ink);font-weight:500}
.matrix tbody th small{display:block;font-weight:400;font-size:12.5px;color:var(--ink-3);margin-top:3px}
.matrix tbody td{padding:16px 12px;border-bottom:1px solid var(--line);color:var(--ink-2)}
.matrix tbody td.today{background:var(--kelp-soft);color:var(--kelp-ink)}
.matrix tbody tr:first-child td.today{border-radius:var(--r) var(--r) 0 0}
.matrix tbody tr:last-child td.today{border-radius:0 0 var(--r) var(--r)}
.matrix tbody tr:last-child td,.matrix tbody tr:last-child th{border-bottom:1px solid var(--line)}
.matrix td .plan{display:inline-block;font-family:var(--mono);font-size:11px;color:var(--saffron-ink);background:var(--saffron-soft);border-radius:4px;padding:2px 6px;margin-bottom:6px}
.matrix td .plan.ent{color:var(--slate-ink);background:var(--slate-soft)}
@media (max-width:700px){
  .matrix{min-width:0}
  .matrix thead{position:static;width:auto;height:auto;clip:auto;overflow:visible}
  .matrix thead tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:16px}
  .matrix thead th.plain{display:none}
  .matrix thead th{padding:0}
  .matrix .ed{padding:12px;gap:6px}
  .matrix .ed .n{font-size:20px}
  .matrix .ed .d{display:none}
  .matrix tbody th{padding:12px 14px 6px}
  .matrix tbody th small{font-size:12px}
  .matrix tbody td.today{background:var(--kelp-soft);border-radius:6px;margin:4px 8px;padding:8px 6px}
  .matrix tbody td::before{content:attr(data-col)}
}
.tier .free.contact{font-size:28px;color:var(--ink)}
.form .row-1{grid-template-columns:minmax(0,1fr)}
/* review round 2 */
.brand{display:inline-flex}
.choice span{text-transform:none;letter-spacing:0;font-weight:400}
.field legend{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--band-ink-2)}
.diagram-wrap .diagram-narrow{min-width:0}
@media (max-width:860px){.diagram-wrap .diagram-narrow{min-width:810px}}
@media (max-width:700px){
  .matrix tbody th{width:auto}
  .matrix .ed .chip{white-space:normal;height:auto;min-height:24px;padding:4px 10px;line-height:1.25;text-align:center}
}
.lightbox{background:#141312}
.lightbox .lb-hint-short{display:none;font-size:12px;color:var(--band-ink-2);white-space:nowrap}
@media (max-width:640px){.lightbox .lb-hint-short{display:inline}}
/* about + faq */
.about{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:20px}
.about .lead{grid-column:span 7}
.about .facts{grid-column:9/span 4;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;font-size:13.5px;color:var(--ink-2);align-content:start}
.about .facts dt{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin:0}
.about .facts dd{margin:0}
@media (max-width:860px){.about .lead,.about .facts{grid-column:span 12}}
.faq{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.2}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";flex:none;width:28px;height:28px;border:1px solid var(--line-2);border-radius:9999px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);font-style:normal;font-size:18px;color:var(--ink-2)}
.faq-item[open] summary::after{content:"–"}
.faq-item summary:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.faq-item div{padding:0 0 18px;font-size:15px;line-height:1.55;color:var(--ink-2);max-width:72ch}
/* editions, neutral */
.card .grown{font-size:13px;line-height:1.5;color:var(--ink-3);border-top:1px solid var(--line);padding-top:10px;margin-top:2px}
.matrix .ed{background:var(--card);border-color:var(--line)}
.matrix .ed.today{border-color:var(--ink);background:var(--card);box-shadow:inset 0 3px 0 var(--ink)}
.matrix .ed.today .n{color:var(--ink)}
.matrix tbody td{color:var(--ink-2)}
.matrix tbody td.today{background:transparent;color:var(--ink);border-left:1px solid var(--line);border-right:1px solid var(--line)}
.matrix tbody tr:first-child td.today,.matrix tbody tr:last-child td.today{border-radius:0}
.tier.today{border-color:var(--ink);box-shadow:none}
.tier .free{color:var(--ink)}
@media (max-width:700px){.matrix tbody td.today{background:transparent;border-left:0;border-right:0;margin:0;padding:8px 14px;font-weight:500}}
/* the run scorecard */
.scorecard-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:900px){.scorecard-grid{grid-template-columns:minmax(0,1fr)}}
.scorecard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.sc-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--band);color:var(--band-ink);font-family:var(--serif);font-style:italic;font-size:22px}
.sc-count{font-family:var(--mono);font-style:normal;font-size:13px;color:var(--kelp-pale);border:1px solid var(--band-line);border-radius:9999px;padding:4px 10px}
.sc-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:14px;align-items:start;padding:14px 18px;border-top:1px solid var(--line)}
.sc-tick{width:24px;height:24px;border-radius:9999px;background:var(--moss-soft);color:var(--moss-ink);display:inline-flex;align-items:center;justify-content:center;margin-top:1px}
.sc-text{display:flex;flex-direction:column;gap:3px}
.sc-text strong{font-weight:500;color:var(--ink)}
.sc-text span{font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.sc-src{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);background:var(--paper-2);border:1px solid var(--line);border-radius:4px;padding:3px 7px;white-space:nowrap;margin-top:2px}
.sc-foot{display:flex;justify-content:space-between;gap:14px;padding:10px 18px;border-top:1px solid var(--line);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
@media (max-width:520px){.sc-row{grid-template-columns:28px minmax(0,1fr)}.sc-src{grid-column:2;justify-self:start}.sc-foot{display:none}}
.ending{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 12px;align-items:start;padding:10px 0;border-top:1px solid var(--line);font-size:13.5px;line-height:1.5}
.ending:first-of-type{border-top:0}
.ending .chip{white-space:nowrap;margin-top:1px}
@media (max-width:420px){.ending{grid-template-columns:minmax(0,1fr)}}
/* the browser's own figure margins (1em 40px) were showing as a seam above the console and as insets in the grids */
figure{margin:0}
/* get started */
pre{margin:0;padding:16px 18px;background:var(--band);color:var(--band-ink);border-radius:var(--r);font-family:var(--mono);font-size:13px;line-height:1.55;overflow-x:auto;-webkit-overflow-scrolling:touch}
pre code{font-size:inherit;color:inherit}
pre .c{color:var(--band-ink-2)}
.step-list{display:flex;flex-direction:column;gap:0;counter-reset:step}
.gs{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px 20px;padding:28px 0;border-top:1px solid var(--line)}
.gs:first-child{border-top:0}
.gs .n{width:44px;height:44px;border-radius:9999px;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-style:italic;font-size:22px}
.gs .body{display:flex;flex-direction:column;gap:14px;min-width:0}
.gs h3{font-size:26px}
.gs p,.gs li{font-size:15px;color:var(--ink-2);line-height:1.55}
.gs ul{padding-left:20px;display:flex;flex-direction:column;gap:6px}
.gs .meta{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
@media (max-width:640px){.gs{grid-template-columns:minmax(0,1fr)}.gs .n{width:36px;height:36px;font-size:18px}}
.need{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:860px){.need{grid-template-columns:minmax(0,1fr)}}
.need .card p{font-size:13.5px}
.need .card code{font-size:12px;color:var(--ink-3)}
.host{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:640px){.host{grid-template-columns:minmax(0,1fr)}}

/* get started, redesign: the route panel in the hero */
.hero-route{display:flex;flex-direction:column;gap:14px}
.route{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.route a{display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:12px;align-items:baseline;padding:11px 0;border-top:1px solid var(--band-line);text-decoration:none;color:var(--band-ink)}
.route li:first-child a{border-top:0;padding-top:0}
.route a:hover{color:#fff}
.route a:hover .rd{color:var(--band-ink)}
.route .rn{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--kelp-pale)}
.route .rt{font-size:15px;font-weight:500}
.route .rd{grid-column:2;font-family:var(--mono);font-size:12px;color:var(--band-ink-2);margin-top:3px}
.hero-route>.small{color:var(--band-ink-2);max-width:42ch}

/* get started, redesign: prerequisite cards share one anatomy, so they line up */
.need-card{gap:12px}
.need-top{display:flex;align-items:center;gap:10px}
.need-top .nn{flex:none;width:22px;height:22px;border-radius:9999px;background:var(--paper-3);color:var(--ink-2);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px}
.need-check{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:5px}
.need-check .kicker{font-size:11px}
.need .need-check code{font-size:12px;color:var(--ink-2);word-break:break-word}

/* get started, redesign: what each platform's kernel actually holds */
.guards{border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden;box-shadow:var(--shadow)}
.g-head,.g-row{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.09fr) minmax(0,1.09fr)}
.g-head{background:var(--paper-2);border-bottom:1px solid var(--line)}
.g-head span{padding:11px 18px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.g-head span+span{border-left:1px solid var(--line)}
.g-row{border-bottom:1px solid var(--line)}
.g-row:last-child{border-bottom:0}
.g-name{padding:13px 18px;font-size:14px;font-weight:500;color:var(--ink)}
.g-name small{display:block;margin-top:4px;font-family:var(--mono);font-weight:400;font-size:11.5px;color:var(--ink-3)}
.g-cell{padding:13px 18px;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ink-2);border-left:1px solid var(--line)}
@media (max-width:760px){
  .g-head{display:none}
  .g-row{grid-template-columns:minmax(0,1fr);padding-bottom:6px}
  .g-name{padding-bottom:2px}
  .g-cell{border-left:0;padding:10px 18px;flex-direction:row;align-items:baseline;gap:10px;flex-wrap:wrap}
  .g-cell::before{content:attr(data-os);flex:none;width:52px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
}

/* the one guard that is not held by the kernel, marked once instead of badging every row */
.g-row.weak{background:var(--paper-2)}
.g-flag{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brick-ink)}

/* who builds this: the short facts beside the hero */
.hero-facts{display:flex;flex-direction:column;gap:12px}
.hero-facts .facts{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:0}
.hero-facts .facts>div{padding:10px 0;border-top:1px solid var(--band-line)}
.hero-facts .facts>div:first-child{border-top:0;padding-top:0}
.hero-facts dt{margin:0;font-family:var(--mono);font-size:12px;color:var(--band-ink-2)}
.hero-facts dd{margin:2px 0 0;font-size:14px;color:var(--band-ink)}

/* case ledger: closed it reads as a table row, open it carries the whole record */
.c-family{display:flex;align-items:baseline;gap:10px;padding:26px 0 6px;border-bottom:1px solid var(--line-2)}
.c-family:first-of-type{padding-top:0}
.c-family .c-count{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.case{border-bottom:1px solid var(--line)}
.case>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:12px 24px;align-items:center;padding:14px 4px}
.case>summary::-webkit-details-marker{display:none}
.case>summary:hover{background:var(--card)}
.case[open]>summary{background:var(--card)}
.c-head{display:flex;flex-direction:column;gap:5px;min-width:0}
.c-name{font-family:var(--serif);font-style:italic;font-size:23px;line-height:1.1;color:var(--ink)}
.case[open] .c-name{color:var(--kelp-ink)}
.c-meta{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.c-tags{gap:6px}
.c-tags .chip{font-size:11px;height:20px;padding:0 8px}
.c-nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.c-nums span{display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--ink-3)}
.c-nums b{font-family:var(--mono);font-weight:500;font-size:14px;color:var(--ink)}
.c-body{display:flex;flex-direction:column;gap:18px;padding:6px 4px 26px}
.c-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px}
.c-col{display:flex;flex-direction:column;gap:7px;min-width:0}
.c-col p{font-size:14px;color:var(--ink-2)}
.c-col .chips{gap:6px}
.c-col .chips .chip{font-size:11px;height:20px;padding:0 8px}
.c-tools{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px;font-size:13.5px;color:var(--ink-2)}
.c-tools code{color:var(--ink)}
@media (max-width:860px){
  .case>summary{grid-template-columns:minmax(0,1fr);gap:10px}
  .c-nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .c-cols{grid-template-columns:minmax(0,1fr)}
  .c-name{font-size:21px}
}

/* the three edition columns share the width equally. Without this the table sizes
   them to their own content and Enterprise, whose cells are shortest, ends up
   narrower than the other two with its card no longer matching its column. */
@media (min-width:701px){
  .matrix thead th.plain{width:22%}
  .matrix thead th[scope="col"]{width:26%}
}
/* and the cards fill the header row, so their tops line up instead of hanging
   off the bottom edge at three different heights */
@media (min-width:701px){
  .matrix thead th[scope="col"]{vertical-align:top;height:1px}
  .matrix thead th[scope="col"] .ed{height:100%}
}

/* Pack library: the figure strip above the twelve cards, and each card's own counts. */
.packs-stat{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding:18px 20px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.packs-stat div{display:flex;flex-direction:column;gap:2px}
.packs-stat b{font-family:var(--mono);font-weight:500;font-size:26px;line-height:1;color:var(--ink)}
.packs-stat span{font-size:12px;color:var(--ink-3)}
.card .counts{font-family:var(--mono);font-size:12px;color:var(--ink-3);letter-spacing:.01em}
.card .name .chip{margin-left:8px;vertical-align:middle}
@media (max-width:860px){.packs-stat{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:16px}}
@media (max-width:520px){.packs-stat{grid-template-columns:repeat(2,minmax(0,1fr))}.packs-stat b{font-size:22px}}

/* Inline code runs a size below body text; on a phone that lands under the size
   iOS will render without offering to zoom, so it keeps 12px there. */
/* On a phone, the text somebody has to READ goes no smaller than 12px: inline
   code, the contact form's own labels, and the small print under a flag name.
   The 11px chips, step numerals and kickers stay as they are; they are labels on
   something else rather than text to read, and the size is the design. */
@media (max-width:640px){
  code,.mono,pre code,.card .counts,.grown{font-size:12px}
  .field label,.field legend,.choice span,.g-name small,.small{font-size:12px}
}


/* --- Pre-launch corrections, measured rather than guessed ------------------ */

/* The primary call to action sat at 3.04:1 inside every dark band, because
   `.band a` (0,1,1) outranks `.btn-primary` (0,1,0) and repainted the label
   pale teal. It read as a disabled button beside its own ghost sibling. */
.band a.btn-primary,.band .btn-primary{color:#fff}
.band a.btn-primary:hover,.band .btn-primary:hover{color:#fff}

/* The diagrams scroll sideways from 1100px down, and the hint that says so was
   never displayed at any width. Below 860px the Enlarge button was hidden too,
   which left a phone showing 356 of 1312 pixels of a drawing with no affordance
   at all. The hint now appears wherever the drawing is actually clipped. */
.diagram-hint{display:none}
@media (max-width:1100px){.diagram-hint{display:flex}}

/* A price caption inherited line-height:1 from its 44px parent, so a two-line
   caption rendered with its lines touching. */
.tier .free small{line-height:1.45}

/* A pale aside inside a dark band kept the band's own kicker colour: 2.06:1. */
.band .aside:not(.aside-dark) .kicker{color:var(--ink-3)}

/* Source lines on a dark band, 3.06:1 at 12px. */
.band .sources{color:var(--band-ink-2)}

/* The 404 page ended two thirds of the way down a 900px viewport. */
body{min-height:100dvh;display:flex;flex-direction:column}
main{flex:1 0 auto}

/* Focus was only styled on four selectors; everything else fell back to the
   browser's blue ring, which belongs to no palette here. */
:root{--focus-ring:var(--kelp-ink)}
.band,.site-header,.site-footer,.lightbox,.card-dark,.aside-dark{--focus-ring:var(--kelp-pale)}
:where(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--r-sm)}
.btn:active{transform:translateY(1px)}
.zoom-btn:hover{border-color:var(--line-2);background:var(--paper-2)}
.band .zoom-btn:hover{border-color:var(--band-ink-2);color:#fff}

/* A long pack name pushed its own chip onto a second line and dropped the
   paragraph 24px below its siblings'. */
.card .name{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px}
.card .name .chip{margin-left:0}

/* Measured line lengths ran to 137 characters on desktop. */
.gs .body p,.gs .body li{max-width:68ch}
.gs .meta,.figure figcaption,.sources,.small{max-width:78ch}

/* The anatomy drawing shrank to 5.5px type between 861 and 1000px. */
.diagram-wrap .diagram-narrow{min-width:700px}
@media (max-width:760px){.diagram-wrap .diagram-narrow{min-width:0}}


/* ---- Mobile and accessibility audit, 2026-09-22 ---------------------------
   Every number below was measured on the built site across ten viewports. */

/* B2. The contact form's fields were drawn with a border at 1.19:1 against the
   form's own background, and the fill differed by 1.24:1, so neither said where
   a field began. A control's boundary needs 3:1. */
.field input,.field select,.field textarea{border-color:#7a766d}
.choice span{border-color:#7a766d}
.choice input:checked+span{background:var(--kelp-ink);border-color:var(--kelp-pale)}

/* S1/S2. Touch targets: 350 of 1044 measured under 44x44. The two-line negative
   margin keeps the visual rhythm while the hit area grows. */
@media (max-width:860px){
  .btn,.btn-sm,.zoom-btn,.choice span{min-height:44px}
  .nav-toggle{height:44px}
  .tier .cta{gap:12px}
  .choice{gap:12px}
}
.arrow,.hero-side a{padding:12px 0;margin:-12px 0}
.about .facts dd a{display:inline-block;padding:4px 0;margin:-4px 0}

/* S3. The footer's 16px row gap was smaller than the 24px its links grew by, so
   two links shared an 8px band and the later one in the DOM took every tap. */
.site-footer .wrap{gap:28px 24px}

/* S4. Open, the menu stood 435px tall: 136% of a landscape phone. */
@media (max-width:860px){.nav.open{max-height:60vh;overflow-y:auto;overscroll-behavior:contain}}
@media (max-width:860px) and (orientation:landscape){
  .nav.open{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
}

/* S5. The stacked table layout stopped at 700px but the tables stay 720-760px
   wide to 860px, so a tablet in portrait lost its last column without a hint. */
@media (min-width:701px) and (max-width:860px){
  .matrix{min-width:0}
  .table-wrap table{min-width:0}
}

/* S9. Nothing here animates, but the two motions there are should still stop. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .btn:active{transform:none}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* S11. 4.46:1 against its own soft background, 0.04 short. */
:root{--saffron-ink:#875208}

/* S12. A ghost button on the dark band has no fill and a 1.47:1 border, so its
   shape was never stated. */
.btn-ghost{border-color:var(--ink-3)}
.band .btn-ghost,.band .zoom-btn{border-color:#8a857b}

/* N1. Between 861 and 1100px both the hint's Enlarge and the toolbar's Enlarge
   were on screen. The hint covers everything the diagram scrolls at. */
@media (max-width:1100px){.diagram-tools{display:none}}

/* The skip link is the first tab stop on every page and stood 41px tall. */
.skip{min-height:44px;display:inline-flex;align-items:center}