/* Screen Print Help: site styles (v1). Self-hosted Nunito, no third-party requests. */
@font-face { font-family: "Nunito"; src: url("nunito.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; }
:root {
  --navy-900: #0F2F5C; --navy: #17498F; --blue: #1E5FC8;
  --paper: #F6F3EE; --card: #FBF9F5; --stone: #ECE6DC; --stone-2: #E3DCD0; --rule: #DCD5C9;
  --ink: #22262C; --ink-2: #44484E; --muted: #6B6760;
  --gold: #A9874A; --gold-lt: #C9A961; --gold-tx: #7E6230; /* --gold-tx: small gold text on light backgrounds (5.2:1) */
  --on-navy: #F3EFE6; --on-navy-2: #AFC0D7; --on-navy-rule: rgba(243,239,230,.14);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { font-family: Nunito, system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 500; color: var(--ink); background: var(--paper); line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 48px; }
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.022em; line-height: 1.1; color: var(--navy-900); }
.eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--navy); }
.eyebrow.gold { color: var(--gold-tx); }
.eyebrow .dot { color: var(--gold-tx); }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--navy-900); color: var(--on-navy); padding: 8px 14px; z-index: 10; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Header */
header.site { background: var(--paper); border-bottom: 1px solid var(--rule); position: relative; z-index: 5; }
header.site .bar { display: flex; align-items: center; justify-content: space-between; height: 80px; }
header.site.wide .bar { max-width: none; padding: 0 32px; }
header.site .logo { width: 206px; height: auto; }
nav.main { display: flex; align-items: center; gap: 30px; }
nav.main a { font-size: 15px; font-weight: 700; color: var(--ink-2); padding: 6px 0; }
nav.main a:hover { color: var(--navy-900); }
nav.main a.on { color: var(--navy-900); box-shadow: inset 0 -2px 0 var(--navy); }
a.donate { border: 1px solid var(--navy); color: var(--navy) !important; padding: 8px 18px !important; border-radius: 6px; box-shadow: none !important; font-weight: 800; font-size: 15px; }
a.donate:hover { background: var(--navy); color: #fff !important; }
details.menu { display: none; }

/* Buttons, links, icons */
.btn { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15.5px; padding: 14px 22px; border-radius: 6px; white-space: nowrap; }
.btn .ico { width: 16px; height: 16px; }
.btn-light { background: var(--paper); color: var(--navy-900); }
.btn-ghost { border: 1px solid rgba(243,239,230,.34); color: var(--on-navy); }
.btn-outline { border: 1px solid var(--navy); color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: #fff; }
.more { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; color: var(--navy); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.more .ico { width: 14px; height: 14px; }
.ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* TDS note */
.tds { display: flex; gap: 14px; align-items: flex-start; border-left: 2px solid var(--gold); background: var(--card); padding: 14px 18px; font-size: 15px; color: var(--ink-2); line-height: 1.55; }
.tds .ico { width: 20px; height: 20px; color: var(--gold-tx); margin-top: 1px; }
.tds b { font-weight: 800; color: var(--navy-900); }
.meter { display: inline-flex; gap: 3px; }
.meter i { width: 14px; height: 4px; background: var(--stone-2); }
.meter i.f { background: var(--navy); }
.src { font-size: 13px; color: var(--muted); }
.src b { font-weight: 800; color: var(--ink-2); letter-spacing: .04em; }

/* Mesh chart */
.mchart .mr { display: grid; grid-template-columns: 230px 1fr; gap: 24px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--rule); }
.mchart .mr.axis { border-bottom: 0; padding-top: 10px; }
.mchart .ml b { display: block; font-size: 14.5px; font-weight: 800; color: var(--navy-900); line-height: 1.3; }
.mchart .ml small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.mchart .mt { position: relative; height: 22px; background: linear-gradient(90deg, var(--rule) 1px, transparent 1px) 0 0/12.5% 100%; }
.mchart .bar { position: absolute; top: 8px; height: 6px; background: var(--navy); border-radius: 1px; }
.mchart .rv { position: absolute; top: 1px; margin-left: 10px; font-size: 13px; font-weight: 800; color: var(--navy); white-space: nowrap; }
.mchart .rv.in { margin-left: 0; transform: translateX(calc(-100% - 10px)); }
.mchart .mk { position: absolute; top: -2px; width: 2px; height: 26px; background: var(--gold); }
.mchart .mk em { position: absolute; top: -18px; left: -12px; font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--gold-tx); }
.mchart .axis .mt { background: none; border-top: 1px solid var(--ink-2); }
.mchart .axis .mt span { position: absolute; top: 6px; transform: translateX(-50%); font-size: 12px; font-weight: 700; color: var(--muted); }

/* Footer */
footer.site { border-top: 1px solid var(--rule); background: var(--paper); padding: 56px 0 40px; }
footer.site .cols { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 40px; }
footer.site .logo { width: 180px; }
footer.site p { font-size: 14.5px; color: var(--muted); margin-top: 14px; max-width: 300px; }
footer.site h2 { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 14px; }
footer.site li { list-style: none; font-size: 14.5px; font-weight: 600; color: var(--ink-2); padding: 3px 0; }
footer.site li a:hover { color: var(--navy); }
footer.site .give p { margin-top: 0; margin-bottom: 16px; }
footer.site .base { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 20px; font-size: 13px; color: var(--muted); }
footer.site .base nav { display: flex; gap: 18px; font-weight: 700; color: var(--ink-2); }

/* ---------- HOME ---------- */
.hero { background: var(--navy-900); color: var(--on-navy); position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; --grid: rgba(243,239,230,.045);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(100deg, transparent 20%, #000 75%); mask-image: linear-gradient(100deg, transparent 20%, #000 75%); }
.hero .wrap { position: relative; }
.hero .top { display: grid; grid-template-columns: 5fr 6fr; gap: 40px; align-items: center; padding: 84px 0 64px; }
.hero h1 { color: var(--on-navy); font-size: 60px; letter-spacing: -.032em; line-height: 1.03; margin: 20px 0 22px; }
.hero h1 span { color: var(--on-navy-2); }
.hero .dek { font-size: 19px; color: var(--on-navy-2); max-width: 470px; }
.hero .cta { display: flex; gap: 12px; margin-top: 34px; }
.hero .facts { display: flex; gap: 26px; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--on-navy-rule); font-size: 13.5px; font-weight: 700; color: var(--on-navy-2); }
.hero .facts span { white-space: nowrap; }
.hero .facts b { color: var(--on-navy); font-weight: 800; }
.hero .figure { margin-right: -20px; }
.steps { border-top: 1px solid var(--on-navy-rule); padding: 30px 0 44px; }
.steps .lbl { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 22px; }
.steps .lbl .eyebrow { color: var(--on-navy-2); }
.steps .lbl a { font-size: 14px; font-weight: 800; color: var(--on-navy); display: inline-flex; gap: 8px; align-items: center; }
.steps .lbl a .ico { width: 14px; height: 14px; }
.steps ol { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); }
.steps li { border-left: 1px solid var(--on-navy-rule); }
.steps li:first-child { border-left: 0; }
.steps li a { display: block; padding: 0 22px 0 20px; }
.steps li:first-child a { padding-left: 0; }
.steps .n { font-size: 13px; font-weight: 800; letter-spacing: .12em; color: var(--gold-lt); }
.steps .ico { width: 22px; height: 22px; color: var(--on-navy-2); margin: 14px 0 12px; }
.steps h3 { color: var(--on-navy); font-size: 17px; letter-spacing: -.01em; }
.steps li a:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.steps p { font-size: 13.5px; line-height: 1.5; color: var(--on-navy-2); margin-top: 6px; }

section.ht { padding: 96px 0 0; }
.ht .grid { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: start; }
.ht figure svg { width: 100%; height: auto; }
.ht figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.ht h2 { font-size: 46px; letter-spacing: -.034em; line-height: 1.03; margin: 16px 0 20px; }
.ht .dek { font-size: 18.5px; line-height: 1.55; color: var(--ink-2); }
.ht .by { margin: 22px 0 26px; padding: 12px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: 13px; color: var(--muted); font-weight: 600; }
.ht .by b { color: var(--ink-2); font-weight: 800; }
.lpi { margin-top: 30px; background: var(--card); border: 1px solid var(--rule); padding: 20px 22px 16px; }
.lpi h3 { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--navy); }
.lpi p { font-size: 14px; color: var(--muted); margin-top: 4px; }
.lpi table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.lpi th { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 0 0 8px; border-bottom: 1px solid var(--ink-2); }
.lpi td { padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 15px; font-weight: 800; color: var(--navy-900); }
.lpi td + td, .lpi th + th { text-align: right; }
.lpi tr:last-child td { border-bottom: 0; }

section.feature { padding: 96px 0 88px; }
.feature .grid { display: grid; grid-template-columns: 5fr 6fr; gap: 72px; align-items: start; }
.feature h2 { font-size: 42px; letter-spacing: -.03em; line-height: 1.08; margin: 16px 0 20px; }
.feature .dek { font-size: 18px; color: var(--ink-2); line-height: 1.6; margin-bottom: 26px; }
.feature .tds { margin-bottom: 30px; }
.facts2 { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-bottom: 30px; }
.facts2 div { padding: 16px 16px 16px 0; }
.facts2 div + div { padding-left: 16px; border-left: 1px solid var(--rule); }
.facts2 b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--navy-900); }
.facts2 span { font-size: 13px; color: var(--muted); line-height: 1.4; display: block; margin-top: 2px; }
.panel { background: var(--card); border: 1px solid var(--rule); border-top: 3px solid var(--navy-900); }
.panel .ph { padding: 24px 28px 18px; display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--rule); }
.panel .ph h3 { font-size: 19px; }
.panel .ph span { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.panel ol { list-style: none; }
.panel li { display: grid; grid-template-columns: 36px 1fr 96px; gap: 14px; padding: 18px 28px; border-bottom: 1px solid var(--rule); align-items: start; }
.panel li .k { font-size: 26px; font-weight: 300; color: var(--navy); line-height: 1; }
.panel li b { font-size: 16px; font-weight: 800; color: var(--navy-900); }
.panel li p { font-size: 14px; color: var(--ink-2); margin-top: 3px; line-height: 1.5; }
.panel li .meter { margin-top: 7px; justify-self: end; }
.panel .src { padding: 16px 28px 20px; }

section.index { padding: 88px 0; border-top: 1px solid var(--rule); background: var(--card); scroll-margin-top: 0; }
.index .grid, section.data .grid { display: grid; grid-template-columns: 4fr 8fr; gap: 72px; align-items: start; }
.index h2, .data h2 { font-size: 36px; letter-spacing: -.028em; margin: 16px 0 16px; }
.index .side p, .data .side p { font-size: 16.5px; color: var(--ink-2); max-width: 330px; }
.data .side p { margin-bottom: 22px; }
.index .grp { margin-bottom: 34px; }
.index .grp:last-child { margin-bottom: 0; }
.index .gh { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding-bottom: 10px; border-bottom: 1px solid var(--ink-2); }
.index .row { display: grid; grid-template-columns: 44px 28px 220px 1fr 20px; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.index .row:hover b { color: var(--blue); }
.index .row .n { font-size: 13px; font-weight: 800; color: var(--gold-tx); letter-spacing: .08em; }
.index .row .ico { color: var(--navy); width: 22px; height: 22px; }
.index .row b { font-size: 17px; font-weight: 800; color: var(--navy-900); letter-spacing: -.01em; }
.index .row p { font-size: 14.5px; color: var(--muted); }
.index .row .go { width: 16px; height: 16px; color: var(--navy); }
section.data { padding: 92px 0 96px; }
.data .chartbox { background: var(--card); border: 1px solid var(--rule); padding: 34px 36px 22px; }
.data .chartbox .src { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); }

/* ---------- GUIDE (docs) ---------- */
.docs { display: grid; grid-template-columns: 288px minmax(0,1fr); }
aside.gnav { background: var(--navy-900); color: var(--on-navy-2); padding: 34px 0 40px; position: relative; }
aside.gnav::before { content: ""; position: absolute; inset: 0; --grid: rgba(243,239,230,.035);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 24px 24px; pointer-events: none; }
aside.gnav > * { position: relative; }
.gnav .title { display: block; padding: 0 28px 22px; margin-bottom: 18px; border-bottom: 1px solid var(--on-navy-rule); }
.gnav .title b { display: block; color: var(--on-navy); font-size: 18px; font-weight: 800; }
.gnav .title span { font-size: 13.5px; }
.gnav h2 { font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--on-navy-2); opacity: .8; padding: 18px 28px 8px; }
.gnav a.g { display: grid; grid-template-columns: 30px 1fr; align-items: center; padding: 9px 28px; font-size: 15px; font-weight: 700; color: var(--on-navy); border-left: 2px solid transparent; }
.gnav a.g:hover { background: rgba(243,239,230,.05); }
.gnav a.g span { font-size: 12px; font-weight: 800; letter-spacing: .06em; color: var(--on-navy-2); opacity: .8; }
.gnav a.g.on { background: rgba(243,239,230,.08); border-left-color: var(--gold-lt); }
.gnav a.g.on span { color: var(--gold-lt); opacity: 1; }
.gnav ul.sub { list-style: none; margin: 2px 0 8px; }
.gnav ul.sub a { display: block; padding: 5px 28px 5px 60px; font-size: 13.5px; font-weight: 600; color: var(--on-navy-2); }
.gnav ul.sub a:hover { color: var(--on-navy); }
.gnav .give { margin: 30px 28px 0; padding-top: 22px; border-top: 1px solid var(--on-navy-rule); font-size: 13.5px; line-height: 1.55; }
.gnav .give a { display: inline-block; margin-top: 10px; color: var(--on-navy); border-bottom: 1px solid var(--on-navy-2); font-size: 14px; font-weight: 800; }
.gnav .sticky { position: sticky; top: 0; }
details.picker { display: none; }

.content { display: grid; grid-template-columns: minmax(0,1fr) 210px; gap: 44px; padding: 40px 40px 80px 52px; max-width: 1100px; }
.crumb { font-size: 13.5px; font-weight: 700; color: var(--muted); display: flex; flex-wrap: wrap; gap: 10px; }
.crumb a:hover { color: var(--navy); }
.crumb i { font-style: normal; color: var(--rule); }
.crumb .cur { color: var(--navy-900); }
article.guide { min-width: 0; }
article.guide > .eyebrow { margin-top: 34px; }
article.guide h1 { font-size: 56px; letter-spacing: -.035em; line-height: 1; margin: 12px 0 18px; }
article.guide .lede { font-size: 20px; line-height: 1.55; color: var(--ink-2); max-width: 660px; }
article.guide .meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 22px; padding: 14px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: 13.5px; color: var(--muted); font-weight: 600; }
article.guide .meta b { color: var(--ink-2); font-weight: 800; }
article.guide h2 { font-size: 26px; letter-spacing: -.022em; margin: 52px 0 14px; display: flex; align-items: baseline; gap: 14px; scroll-margin-top: 20px; }
article.guide h2 small { font-size: 13px; font-weight: 800; color: var(--gold-tx); letter-spacing: .08em; }
article.guide h3 { font-size: 18px; letter-spacing: -.012em; margin: 26px 0 8px; }
article.guide p, article.guide li { font-size: 16.5px; line-height: 1.7; color: var(--ink-2); }
article.guide p { max-width: 690px; }
article.guide p + p { margin-top: 12px; }
article.guide b, article.guide strong { color: var(--navy-900); font-weight: 800; }
article.guide a.in { color: var(--navy); font-weight: 700; border-bottom: 1px solid rgba(23,73,143,.35); }
article.guide a.in:hover { border-bottom-color: var(--navy); }
article.guide ul.list { margin: 12px 0 0 0; padding-left: 0; list-style: none; max-width: 690px; }
article.guide ul.list li { position: relative; padding-left: 22px; margin-top: 8px; }
article.guide ul.list li::before { content: ""; position: absolute; left: 2px; top: .78em; width: 8px; height: 1.5px; background: var(--gold); }
article.guide ol.steps-list { counter-reset: s; list-style: none; margin-top: 14px; border-top: 1px solid var(--ink-2); max-width: 720px; }
article.guide ol.steps-list li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--rule); }
article.guide ol.steps-list li::before { content: counter(s, decimal-leading-zero); font-size: 13px; font-weight: 800; color: var(--gold-tx); letter-spacing: .06em; padding-top: 4px; }
.short { margin-top: 30px; background: var(--card); border: 1px solid var(--rule); padding: 22px 26px; }
.short h2 { font-size: 12px !important; letter-spacing: .16em !important; text-transform: uppercase; color: var(--navy) !important; margin: 0 0 12px !important; display: block !important; }
.short ol { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.short li { counter-increment: s; font-size: 15px !important; line-height: 1.5 !important; color: var(--ink-2); padding-top: 12px; border-top: 2px solid var(--navy-900); }
.short li::before { content: "0" counter(s); display: block; font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--gold-tx); margin-bottom: 4px; }
article.guide figure { margin: 26px 0 0; }
article.guide figure svg { width: 100%; height: auto; border-radius: 2px; }
article.guide figcaption { font-size: 13.5px; color: var(--muted); margin-top: 10px; line-height: 1.5; max-width: 690px; }
.tablewrap { margin-top: 18px; }
table.spec { width: 100%; border-collapse: collapse; font-size: 15px; }
table.spec th { text-align: left; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 0 16px 10px 0; border-bottom: 1px solid var(--ink-2); vertical-align: bottom; }
table.spec td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--rule); vertical-align: top; color: var(--ink-2); line-height: 1.5; }
table.spec td:first-child { font-weight: 800; color: var(--navy-900); }
table.spec td.v { font-weight: 800; color: var(--navy); white-space: nowrap; }
table.spec caption { caption-side: bottom; text-align: left; font-size: 13px; color: var(--muted); padding-top: 10px; }
article.guide .tds { margin-top: 18px; }
.note { margin-top: 18px; background: var(--card); border: 1px solid var(--rule); padding: 16px 18px; font-size: 15px; color: var(--ink-2); line-height: 1.6; max-width: 720px; }
.note b { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); margin-bottom: 4px; }
.checks { margin-top: 16px; border-top: 1px solid var(--ink-2); }
.checks .c { display: grid; grid-template-columns: 34px 150px 1fr 80px; gap: 16px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--rule); }
.checks .k { font-size: 24px; font-weight: 300; color: var(--navy); line-height: 1; }
.checks b { font-size: 15.5px; }
.checks span.d { font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.checks .meter { justify-self: end; }
.dlist { margin-top: 18px; border-top: 1px solid var(--ink-2); }
.dlist .d { padding: 22px 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 20px; }
.dlist .dh { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.dlist h3 { margin: 0 !important; font-size: 19px !important; }
.dlist .stage { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-tx); white-space: nowrap; }
.dlist dl { display: grid; grid-template-columns: 150px 1fr; gap: 6px 18px; margin-top: 12px; }
.dlist dt { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.dlist dd { font-size: 15.5px; color: var(--ink-2); line-height: 1.55; }
.dlist dd.fx { color: var(--navy-900); font-weight: 700; }
.dlist .dsrc { margin-top: 10px; font-size: 13px; color: var(--muted); }
.dindex { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font-size: 14.5px; font-weight: 700; }
.dindex a { color: var(--navy); border-bottom: 1px solid rgba(23,73,143,.3); }
.related { margin-top: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.related a { border: 1px solid var(--rule); background: var(--card); padding: 18px 18px 16px; display: block; }
.related a:hover { border-color: var(--navy); }
.related .eyebrow { margin: 0 0 8px; font-size: 11px; color: var(--muted); }
.related b { font-size: 16.5px; display: block; }
.related span { font-size: 14px; color: var(--ink-2); display: block; margin-top: 4px; line-height: 1.45; }
.pn { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pn a { border-top: 2px solid var(--navy-900); padding-top: 14px; }
.pn a.next { text-align: right; grid-column: 2; }
.pn small { display: block; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pn b { font-size: 19px; font-weight: 800; color: var(--navy-900); }
.pn a:hover b { color: var(--blue); }
aside.toc { position: sticky; top: 24px; align-self: start; margin-top: 92px; }
.toc h2 { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.toc ul { list-style: none; border-left: 1px solid var(--rule); }
.toc li a { display: block; font-size: 14px; font-weight: 700; color: var(--ink-2); padding: 6px 0 6px 16px; margin-left: -1px; border-left: 2px solid transparent; line-height: 1.4; }
.toc li a:hover { color: var(--navy-900); border-left-color: var(--gold-tx); }
.toc .srcs { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--rule); }
.toc .srcs ul { border: 0; }
.toc .srcs li { padding: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--muted); line-height: 1.45; }
.toc .srcs li a { display: inline; padding: 0; margin: 0; border: 0; font-size: 13px; color: var(--ink-2); font-weight: 800; }
.toc .srcs li a:hover { color: var(--navy); text-decoration: underline; }
.allsrc { margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--rule); }
.allsrc h2 { font-size: 13px !important; letter-spacing: .16em !important; text-transform: uppercase; margin: 0 0 10px !important; }
.allsrc ol { padding-left: 20px; }
.allsrc li { font-size: 14px !important; line-height: 1.6 !important; color: var(--muted) !important; margin-top: 4px; }
.allsrc a { color: var(--navy); font-weight: 700; word-break: break-word; }

/* ---------- Simple pages ---------- */
.page { padding: 64px 0 96px; }
.page .inner { max-width: 760px; }
.page h1 { font-size: 52px; letter-spacing: -.034em; line-height: 1.02; margin: 14px 0 20px; }
.page .lede { font-size: 20px; color: var(--ink-2); line-height: 1.55; }
.page h2 { font-size: 24px; margin: 44px 0 12px; }
.page p, .page li { font-size: 16.5px; line-height: 1.7; color: var(--ink-2); }
.page p + p { margin-top: 12px; }
.page ul { padding-left: 0; list-style: none; margin-top: 10px; }
.page ul li { position: relative; padding-left: 22px; margin-top: 8px; }
.page ul li::before { content: ""; position: absolute; left: 2px; top: .78em; width: 8px; height: 1.5px; background: var(--gold); }
.page a.in { color: var(--navy); font-weight: 700; border-bottom: 1px solid rgba(23,73,143,.35); }
.page .updated { margin-top: 22px; padding: 12px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: 13.5px; color: var(--muted); font-weight: 600; }

/* ---------- Phone ---------- */
@media (max-width: 900px) {
  .content { grid-template-columns: 1fr; padding: 32px 32px 64px; gap: 0; }
  aside.toc { display: none; }
}
@media (max-width: 760px) {
  .wrap { padding: 0 20px; }
  header.site .bar, header.site.wide .bar { height: 66px; padding: 0 20px; }
  header.site .logo { width: 168px; }
  nav.main { display: none; }
  details.menu { display: block; }
  details.menu summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; color: var(--navy-900); border: 1px solid var(--rule); padding: 7px 12px; border-radius: 6px; }
  details.menu summary::-webkit-details-marker { display: none; }
  details.menu summary .ico { width: 18px; height: 18px; }
  details.menu[open] summary { background: var(--card); }
  details.menu nav { position: absolute; left: 0; right: 0; top: 66px; background: var(--paper); border-bottom: 1px solid var(--rule); box-shadow: 0 12px 24px rgba(15,47,92,.08); padding: 8px 20px 18px; }
  details.menu nav a { display: block; padding: 12px 0; border-bottom: 1px solid var(--rule); font-weight: 800; font-size: 16px; color: var(--navy-900); }
  details.menu nav a.donate { display: inline-block; margin-top: 14px; border-bottom: 1px solid var(--navy); }
  .btn { font-size: 15px; padding: 13px 20px; }
  footer.site .cols { grid-template-columns: 1fr 1fr; gap: 30px 24px; }
  footer.site .cols > :first-child, footer.site .give { grid-column: 1 / -1; }
  footer.site .base { flex-direction: column; gap: 10px; }

  .hero .top { grid-template-columns: 1fr; padding: 44px 0 30px; gap: 24px; }
  .hero h1 { font-size: 38px; margin: 14px 0 16px; }
  .hero .dek { font-size: 16.5px; }
  .hero .cta { flex-direction: column; align-items: stretch; margin-top: 26px; }
  .hero .cta .btn { justify-content: center; }
  .hero .facts { flex-wrap: wrap; gap: 8px 18px; margin-top: 28px; }
  .hero .figure { margin: 0 -10px; }
  .steps { padding: 26px 0 30px; }
  .steps .lbl a { display: none; }
  .steps ol { grid-template-columns: 1fr 1fr; }
  .steps li, .steps li:first-child { border-left: 0; border-top: 1px solid var(--on-navy-rule); }
  .steps li a, .steps li:first-child a { padding: 16px 12px 16px 0; }
  .steps li:nth-child(even) { border-left: 1px solid var(--on-navy-rule); }
  .steps li:nth-child(even) a { padding-left: 14px; }
  .steps .ico { margin: 10px 0 8px; }
  .steps p { display: none; }
  section.ht { padding: 56px 0 0; }
  .ht .grid, .feature .grid, .index .grid, section.data .grid { grid-template-columns: 1fr; gap: 28px; }
  .ht figure svg { height: 250px; }
  .ht h2 { font-size: 32px; }
  .ht .dek { font-size: 16.5px; }
  section.feature, section.index, section.data { padding: 56px 0; }
  .feature h2 { font-size: 30px; }
  .feature .dek { font-size: 16.5px; }
  .facts2 b { font-size: 18px; }
  .panel .ph { padding: 18px 18px 14px; flex-direction: column; gap: 4px; }
  .panel li { grid-template-columns: 28px 1fr; padding: 16px 18px; }
  .panel li .meter { grid-column: 2; justify-self: start; margin-top: 2px; }
  .panel .src { padding: 14px 18px 18px; }
  .index h2, .data h2 { font-size: 28px; }
  .index .row { grid-template-columns: 34px 1fr 16px; gap: 6px 10px; }
  .index .row .ico:not(.go) { display: none; }
  .index .row p { grid-column: 2; grid-row: 2; font-size: 14px; }
  .index .row .go { grid-row: 1 / span 2; grid-column: 3; }
  .data .chartbox { padding: 22px 18px 16px; }
  .mchart .mr { grid-template-columns: 1fr; gap: 8px; padding: 12px 0; }
  .mchart .rv { font-size: 12px; }
  .mchart .axis .ml, .mchart .mk em { display: none; }

  .docs { grid-template-columns: 1fr; }
  aside.gnav { display: none; }
  details.picker { display: block; background: var(--navy-900); color: var(--on-navy); }
  details.picker summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; font-weight: 800; font-size: 15px; }
  details.picker summary::-webkit-details-marker { display: none; }
  details.picker summary small { display: block; font-size: 12px; color: var(--on-navy-2); font-weight: 700; }
  details.picker summary span.n { color: var(--gold-lt); font-size: 12px; letter-spacing: .1em; margin-right: 10px; }
  details.picker summary .ico { width: 20px; height: 20px; color: var(--on-navy-2); transition: transform .2s; }
  details.picker[open] summary .ico { transform: rotate(180deg); }
  details.picker .gnavp { padding: 4px 0 18px; border-top: 1px solid var(--on-navy-rule); }
  details.picker .gnavp h2 { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--on-navy-2); padding: 14px 20px 4px; }
  details.picker .gnavp a { display: grid; grid-template-columns: 30px 1fr; padding: 9px 20px; font-weight: 700; font-size: 15px; border-left: 2px solid transparent; }
  details.picker .gnavp a span { font-size: 12px; color: var(--on-navy-2); font-weight: 800; }
  details.picker .gnavp a.on { background: rgba(243,239,230,.08); border-left-color: var(--gold-lt); }
  .content { padding: 24px 20px 56px; }
  article.guide > .eyebrow { margin-top: 22px; }
  article.guide h1 { font-size: 40px; }
  article.guide .lede { font-size: 17.5px; }
  article.guide .meta { gap: 4px 16px; }
  article.guide h2 { font-size: 22px; margin-top: 44px; }
  article.guide p, article.guide li { font-size: 16px; }
  .short { padding: 18px; }
  .short ol { grid-template-columns: 1fr; gap: 14px; }
  .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.spec.stack thead { display: none; }
  table.spec.stack tr { display: grid; grid-template-columns: 1fr 1fr; padding: 14px 0; border-bottom: 1px solid var(--rule); gap: 4px 12px; }
  table.spec.stack td { border: 0; padding: 0; white-space: normal; }
  table.spec.stack td:first-child { grid-column: 1 / -1; font-size: 16px; }
  table.spec.stack td[data-l]::before { content: attr(data-l); display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 800; }
  table.spec.stack td.wide { grid-column: 1 / -1; }
  .checks .c { grid-template-columns: 30px 1fr; gap: 4px 10px; }
  .checks span.d { grid-column: 2; font-size: 14.5px; }
  .checks .meter { grid-column: 2; justify-self: start; margin-top: 6px; }
  .dlist dl { grid-template-columns: 1fr; gap: 2px; }
  .dlist dt { margin-top: 8px; }
  .related { grid-template-columns: 1fr; gap: 10px; }
  .pn b { font-size: 16px; }
  .page { padding: 40px 0 64px; }
  .page h1 { font-size: 38px; }
  .page .lede { font-size: 17.5px; }
}

/* ---------- Round 2 additions ---------- */
.tdsn { font-weight: 800; color: var(--navy-900); }
.views { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; max-width: 760px; }
.views > div { background: var(--card); border: 1px solid var(--rule); border-top: 2px solid var(--navy-900); padding: 16px 16px 14px; }
.views b { display: block; font-size: 15.5px; color: var(--navy-900); margin-bottom: 6px; }
.views span { display: block; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
table.spec.cmp { font-size: 14.5px; min-width: 640px; }
table.spec.cmp th { color: var(--navy-900); }
table.spec.cmp td { padding-right: 14px; }
table.spec.cmp td:first-child { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); width: 128px; }
.dlist ul.causes { list-style: none; padding: 0; margin: 0; }
.dlist ul.causes li { position: relative; padding-left: 18px; font-size: 15.5px; line-height: 1.55; margin: 0 0 3px; }
.dlist ul.causes li::before { content: ""; position: absolute; left: 2px; top: .75em; width: 7px; height: 1.5px; background: var(--gold); }
.dlist dd a.in { font-weight: 800; }
.dlist .dsrc a { color: var(--ink-2); font-weight: 700; }
.dlist .dsrc a:hover { color: var(--navy); text-decoration: underline; }
.dlist .regfig { margin: 18px 0 4px; max-width: 640px; background: var(--card); border: 1px solid var(--rule); padding: 14px 14px 10px; }
.dlist .regfig figcaption { margin-top: 6px; }
.dgrp { margin-top: 16px; }
.dgrp .eyebrow { color: var(--gold-tx); font-size: 11.5px; }
.dgrp .dindex { margin-top: 6px; }
.allsrc .srcnote { font-size: 13.5px !important; color: var(--muted) !important; margin-top: 12px; }
.faqlink { margin-top: 22px; }
/* FAQ */
.page .jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.page .jump a { font-size: 14px; font-weight: 800; color: var(--navy); border: 1px solid var(--rule); background: var(--card); padding: 7px 12px; border-radius: 6px; }
.page .jump a:hover { border-color: var(--navy); }
.page h2 { scroll-margin-top: 16px; }
.faq { border-top: 1px solid var(--ink-2); }
.faq .q { padding: 20px 0 18px; border-bottom: 1px solid var(--rule); scroll-margin-top: 16px; }
.faq h3 { font-size: 18.5px; letter-spacing: -.012em; display: grid; grid-template-columns: 40px 1fr; line-height: 1.3; }
.faq h3 span { font-size: 13px; font-weight: 800; color: var(--gold-tx); letter-spacing: .06em; padding-top: 3px; }
.faq .q p { margin-left: 40px; margin-top: 8px; }
.faq .q b { color: var(--navy-900); font-weight: 800; }
.faq .qs { font-size: 13.5px !important; color: var(--muted) !important; line-height: 1.6 !important; }
.faq .qs a:not(.in) { color: var(--ink-2); font-weight: 700; }
.faq .qs a:not(.in):hover { color: var(--navy); text-decoration: underline; }
.page .note { margin-top: 36px; }
@media (max-width: 760px) {
  .views { grid-template-columns: 1fr; gap: 10px; }
  .faq h3 { grid-template-columns: 32px 1fr; font-size: 17px; }
  .faq .q p { margin-left: 32px; }
  .dlist .regfig { padding: 10px 8px 8px; }
}
table.spec.power td.v { white-space: normal; }
@media (min-width: 761px) { table.spec.power td:first-child, table.spec.power td.wide { width: 30%; } }
article.guide figure.f-halftone svg { height: 470px; }
@media (max-width: 760px) { article.guide figure.f-halftone svg { height: 300px; } }

/* ---------- v2 layout: persistent sidebar, one sub-topic per page ---------- */
.shell { display: grid; grid-template-columns: 300px minmax(0,1fr); align-items: stretch; }
aside.side { background: var(--navy-900); color: var(--on-navy-2); }
aside.side .sidei { position: sticky; top: 0; max-height: 100vh; overflow-y: auto; overscroll-behavior: contain; padding: 22px 0 36px; scrollbar-width: thin; scrollbar-color: rgba(243,239,230,.25) transparent; }
.side-nav a.top { display: flex; align-items: center; gap: 10px; margin: 0 16px 6px; padding: 10px 12px; border-radius: 6px; font-weight: 800; font-size: 15px; color: var(--on-navy); }
.side-nav a.top .ico { width: 18px; height: 18px; color: var(--gold-lt); }
.side-nav a.top:hover, .side-nav a.top.on { background: rgba(243,239,230,.08); }
.side-nav h2 { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--on-navy-2); opacity: .75; padding: 16px 28px 6px; }
.side-nav details.gd summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 28px 1fr 16px; align-items: center; gap: 2px; padding: 8px 18px 8px 26px; border-left: 2px solid transparent; font-size: 14.5px; font-weight: 700; color: var(--on-navy); line-height: 1.3; }
.side-nav details.gd summary::-webkit-details-marker { display: none; }
.side-nav details.gd summary:hover { background: rgba(243,239,230,.05); }
.side-nav details.gd summary .n { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; color: var(--on-navy-2); opacity: .8; }
.side-nav details.gd summary .ico { width: 14px; height: 14px; color: var(--on-navy-2); transition: transform .15s; }
.side-nav details.gd[open] summary .ico { transform: rotate(180deg); }
.side-nav details.gd.here > summary { border-left-color: var(--gold-lt); background: rgba(243,239,230,.06); }
.side-nav details.gd.here > summary .n { color: var(--gold-lt); opacity: 1; }
.side-nav details.gd ul { list-style: none; margin: 2px 0 8px; }
.side-nav details.gd li a { display: block; padding: 5px 18px 5px 56px; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--on-navy-2); border-left: 2px solid transparent; }
.side-nav details.gd li a:hover { color: var(--on-navy); }
.side-nav details.gd li a.on { color: var(--on-navy); font-weight: 800; background: rgba(243,239,230,.1); border-left-color: var(--gold-lt); }
.side-nav a.plain { display: block; padding: 7px 28px; font-size: 14px; font-weight: 700; color: var(--on-navy-2); }
.side-nav a.plain:hover, .side-nav a.plain.on { color: var(--on-navy); }
.side-nav .free { margin: 20px 28px 0; padding-top: 16px; border-top: 1px solid var(--on-navy-rule); font-size: 12.5px; line-height: 1.5; color: var(--on-navy-2); opacity: .85; }
.topbar { display: none; }
main.main2 { min-width: 0; padding: 30px 48px 0; }
article.guide2 { max-width: 780px; }
article.guide2 > .eyebrow { margin-top: 22px; }
article.guide2 h1 { font-size: 46px; margin: 10px 0 14px; }
article.guide2 h1.sub { font-size: 38px; line-height: 1.08; margin-bottom: 6px; }
article.guide2 .lede { font-size: 18.5px; }
article.guide2 .meta { margin-top: 16px; padding: 10px 0; }
article.guide2 .short { margin-top: 20px; padding: 18px 22px; }
article.guide2 .body > :first-child { margin-top: 14px; }
article.guide2 .body > p:first-child { font-size: 17.5px; }
article.guide2 h2 { margin: 36px 0 12px; scroll-margin-top: 16px; }
article.guide2 h3 { scroll-margin-top: 16px; }
article.guide2 figure { margin-top: 20px; }
article.guide2 figure.f-halftone svg { height: 360px; }
.guide2 h2.intoc { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--navy); margin: 30px 0 8px; display: block; }
.guide2 ol.toclist { list-style: none; border-top: 1px solid var(--ink-2); }
.guide2 ol.toclist li { margin: 0; }
.guide2 ol.toclist a { display: grid; grid-template-columns: 40px 1fr 18px; align-items: center; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.guide2 ol.toclist a .k { font-size: 13px; font-weight: 800; color: var(--gold-tx); letter-spacing: .06em; }
.guide2 ol.toclist a b { font-size: 16.5px; }
.guide2 ol.toclist a .go { width: 16px; height: 16px; color: var(--navy); }
.guide2 ol.toclist a:hover b { color: var(--blue); }
.pn2 { margin-top: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pn2 a { display: block; border: 1px solid var(--rule); background: var(--card); border-radius: 6px; padding: 14px 16px; }
.pn2 a:hover { border-color: var(--navy); }
.pn2 a.next { text-align: right; background: var(--navy-900); border-color: var(--navy-900); }
.pn2 small { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pn2 a.next small { justify-content: flex-end; color: var(--on-navy-2); }
.pn2 small .ico { width: 13px; height: 13px; }
.pn2 .ico.flip { transform: scaleX(-1); }
.pn2 b { display: block; margin-top: 3px; font-size: 16.5px; font-weight: 800; line-height: 1.3; color: var(--navy-900); }
.pn2 a.next b { color: var(--on-navy); }
details.srcbox { margin-top: 22px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
details.srcbox summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 12px 0; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
details.srcbox summary::-webkit-details-marker { display: none; }
details.srcbox summary .ico { width: 16px; height: 16px; transition: transform .15s; }
details.srcbox[open] summary .ico { transform: rotate(180deg); }
details.srcbox ol { padding: 0 0 6px 20px; }
details.srcbox li { font-size: 14px !important; line-height: 1.55 !important; color: var(--muted) !important; margin-top: 4px; }
details.srcbox li a { color: var(--navy); font-weight: 700; word-break: break-word; }
details.srcbox p { font-size: 13.5px !important; color: var(--muted) !important; margin: 8px 0 14px; }
footer.mini { margin-top: 44px; padding: 18px 0 26px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted); max-width: 780px; }
footer.mini nav { display: flex; gap: 16px; font-weight: 700; color: var(--ink-2); }
/* collapsible defect cards */
.dlist details.d { padding: 0; }
.dlist details.d summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 18px; gap: 12px; align-items: center; padding: 14px 0; }
.dlist details.d summary::-webkit-details-marker { display: none; }
.dlist details.d summary b { display: block; font-size: 17.5px; color: var(--navy-900); line-height: 1.3; }
.dlist details.d summary small { display: block; font-size: 14px; color: var(--muted); line-height: 1.45; margin-top: 2px; }
.dlist details.d summary .ico { width: 18px; height: 18px; color: var(--navy); transition: transform .15s; }
.dlist details.d[open] summary .ico { transform: rotate(180deg); }
.dlist details.d[open] summary small { display: none; }
.dlist details.d dl { margin-top: 0; }
.dlist details.d > :last-child { padding-bottom: 18px; }
.dlist details.d:target summary b, .dlist details.d[open] summary b { color: var(--navy); }
/* FAQ accordion */
.guide2 .jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.guide2 .jump a { font-size: 13.5px; font-weight: 800; color: var(--navy); border: 1px solid var(--rule); background: var(--card); padding: 6px 11px; border-radius: 6px; }
.faq2 { border-top: 1px solid var(--ink-2); }
.faq2 details.q { border-bottom: 1px solid var(--rule); scroll-margin-top: 16px; }
.faq2 details.q summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 36px 1fr 18px; gap: 6px; align-items: baseline; padding: 13px 0; }
.faq2 details.q summary::-webkit-details-marker { display: none; }
.faq2 .k { font-size: 12.5px; font-weight: 800; color: var(--gold-tx); letter-spacing: .06em; }
.faq2 .qt { font-size: 16.5px; font-weight: 800; color: var(--navy-900); line-height: 1.35; }
.faq2 summary .ico { width: 16px; height: 16px; color: var(--navy); align-self: center; transition: transform .15s; }
.faq2 details.q[open] summary .ico { transform: rotate(180deg); }
.faq2 .a { padding: 0 0 16px 42px; }
.faq2 .a p + p { margin-top: 8px; }
.faq2 .qs { font-size: 13.5px !important; color: var(--muted) !important; line-height: 1.6 !important; margin-top: 10px !important; }
.faq2 .qs a:not(.in) { color: var(--ink-2); font-weight: 700; }
.simple2 h2 { margin-top: 34px; }
/* home v2 */
.hero2 { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 36px; align-items: center; background: var(--navy-900); color: var(--on-navy); border-radius: 8px; padding: 36px 40px; margin-top: 4px; position: relative; overflow: hidden; }
.hero2 > * { position: relative; }
.hero2 h1 { color: var(--on-navy); font-size: 40px; letter-spacing: -.03em; line-height: 1.06; margin: 12px 0 12px; }
.hero2 h1 span { color: var(--on-navy-2); }
.hero2 .dek { font-size: 16.5px; color: var(--on-navy-2); max-width: 520px; }
.hero2 .cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hero2 .btn { padding: 12px 18px; font-size: 15px; }
.hero2 .facts { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--on-navy-rule); font-size: 13px; font-weight: 700; color: var(--on-navy-2); }
.hero2 .facts b { color: var(--on-navy); }
.hero2 figure.ht2 svg { width: 100%; height: 220px; border-radius: 4px; background: var(--paper); }
.hero2 figure.ht2 figcaption { font-size: 12px; line-height: 1.45; color: var(--on-navy-2); margin-top: 8px; }
.hero2 figure.ht2 figcaption a { color: var(--on-navy); border-bottom: 1px solid var(--on-navy-2); font-weight: 700; }
.topics { margin-top: 10px; max-width: 1080px; }
.tg h2 { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 26px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--ink-2); }
.tg .cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
a.tc { display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto 1fr auto; column-gap: 10px; background: var(--card); border: 1px solid var(--rule); border-radius: 6px; padding: 14px 16px 12px; }
a.tc:hover { border-color: var(--navy); }
a.tc .n { grid-column: 1 / -1; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; color: var(--gold-tx); }
a.tc .ico { width: 22px; height: 22px; color: var(--navy); margin-top: 6px; }
a.tc b { font-size: 17px; font-weight: 800; color: var(--navy-900); margin-top: 6px; line-height: 1.25; }
a.tc .d { grid-column: 1 / -1; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); margin-top: 6px; }
a.tc .c { grid-column: 1 / -1; font-size: 12px; font-weight: 800; color: var(--navy); margin-top: 8px; }
.home2 footer.mini, main.main2 > .topics + footer.mini { max-width: 1080px; }
/* figures: phone legends (hidden on desktop) and the inks comparison hint */
ul.legend { display: none; }
p.swipe { display: none; }
table.spec.cmp th:first-child, table.spec.cmp td:first-child { position: sticky; left: 0; background: var(--paper); z-index: 1; }

@media (max-width: 960px) {
  .shell { display: block; }
  aside.side { display: none; }
  header.site .bar, header.site.wide .bar { height: 58px; padding: 0 16px; }
  header.site .logo { width: 156px; }
  nav.main { display: none; }
  .topbar { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 40; background: var(--navy-900); color: var(--on-navy); height: 50px; padding: 0 12px; box-shadow: 0 2px 10px rgba(15,47,92,.18); }
  .topbar .here { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 700; color: var(--on-navy-2); }
  .topbar .here .n { color: var(--gold-lt); font-weight: 800; font-size: 12px; letter-spacing: .08em; margin-right: 6px; }
  .topbar .here i { font-style: normal; color: var(--on-navy-2); opacity: .6; padding: 0 2px; }
  details.drawer > summary { list-style: none; cursor: pointer; }
  details.drawer > summary::-webkit-details-marker { display: none; }
  details.drawer > summary span { display: inline-flex; align-items: center; gap: 8px; background: var(--paper); color: var(--navy-900); font-weight: 800; font-size: 15px; padding: 7px 13px 7px 10px; border-radius: 6px; }
  details.drawer > summary .ico { width: 18px; height: 18px; stroke-width: 2; }
  details.drawer .close { display: none; }
  details.drawer[open] .open { display: none; }
  details.drawer[open] .close { display: inline-flex; position: fixed; top: 9px; right: 12px; z-index: 62; }
  details.drawer .scrim { position: fixed; inset: 0; background: rgba(15,22,34,.55); z-index: 50; }
  details.drawer .dpanel { position: fixed; top: 0; bottom: 0; left: 0; width: min(84vw, 340px); overflow-y: auto; overscroll-behavior: contain; background: var(--navy-900); color: var(--on-navy-2); z-index: 60; padding: 16px 0 40px; box-shadow: 6px 0 24px rgba(0,0,0,.25); }
  details.drawer .dpanel details.gd summary { padding-top: 10px; padding-bottom: 10px; font-size: 15px; }
  details.drawer .dpanel details.gd li a { padding-top: 8px; padding-bottom: 8px; font-size: 14.5px; }
  main.main2 { padding: 18px 28px 0; }
  .hero2 { grid-template-columns: 1fr; }
  .hero2 figure.ht2 { display: none; }
  html { scroll-padding-top: 58px; }
  article.guide2 h2, article.guide2 h3, .faq2 details.q, .dlist details.d { scroll-margin-top: 62px; }
}
@media (max-width: 760px) {
  main.main2 { padding: 14px 18px 0; }
  article.guide2 > .eyebrow { margin-top: 14px; font-size: 11.5px; letter-spacing: .12em; }
  article.guide2 h1 { font-size: 32px; line-height: 1.08; }
  article.guide2 h1.sub { font-size: 28px; }
  article.guide2 .lede { font-size: 16.5px; }
  article.guide2 h2 { font-size: 21px; margin-top: 28px; }
  article.guide2 .body > p:first-child { font-size: 16.5px; }
  .crumb { font-size: 13px; gap: 6px; }
  .pn2 { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 28px; }
  .pn2 a { padding: 11px 12px; }
  .pn2 b { font-size: 14.5px; }
  .guide2 ol.toclist a b { font-size: 15.5px; }
  .hero2 { padding: 22px 20px; border-radius: 6px; }
  .hero2 h1 { font-size: 28px; }
  .hero2 .dek { font-size: 15px; }
  .hero2 .cta { flex-direction: column; }
  .hero2 .cta .btn { justify-content: center; }
  .hero2 .facts { margin-top: 16px; }
  .tg h2 { margin-top: 20px; }
  .tg .cards { grid-template-columns: 1fr; gap: 8px; }
  a.tc { grid-template-columns: 22px 1fr auto; grid-template-rows: auto auto; padding: 11px 14px; align-items: center; }
  a.tc .n { display: none; }
  a.tc .ico { width: 20px; height: 20px; margin: 0; }
  a.tc b { font-size: 16px; margin: 0; }
  a.tc .c { grid-column: 3; grid-row: 1; margin: 0; font-size: 11.5px; white-space: nowrap; }
  a.tc .d { grid-column: 2 / -1; font-size: 13px; margin-top: 2px; }
  .faq2 details.q summary { grid-template-columns: 30px 1fr 16px; }
  .faq2 .qt { font-size: 15.5px; }
  .faq2 .a { padding-left: 0; }
  footer.mini { flex-direction: column; gap: 8px; margin-top: 32px; }
  /* small diagram labels are unreadable on a phone: hide them and show a text legend instead */
  figure.f-stroke svg text, figure.f-cure svg text { display: none; }
  figure.f-halftone svg g[font-size="12"], figure.f-halftone svg text { display: none; }
  ul.legend { display: block; list-style: none; margin: 10px 0 0; padding: 10px 12px; background: var(--card); border: 1px solid var(--rule); }
  ul.legend li { font-size: 14px !important; line-height: 1.45 !important; padding: 3px 0; margin: 0 !important; }
  ul.legend li::before { display: none; }
  article.guide2 figure.f-halftone svg { height: 240px; }
  p.swipe { display: block; font-size: 13px !important; font-weight: 800; color: var(--navy) !important; margin-top: 12px; }
  table.spec.cmp td:first-child { width: 96px; font-size: 11px; }
  table.spec.stack td, table.spec.power td:first-child, table.spec.power td.wide { width: auto; }
  p.capt { font-size: 13px !important; color: var(--muted) !important; margin-top: 8px; }
}
/* Fix: numbered step lists. The old grid put the text after the bold lead-in into the 40px number column,
   so words stacked one per line (Buying used checklist, reclaim steps, exposure test, polyester steps). */
article.guide ol.steps-list li { display: block; position: relative; padding: 13px 0 13px 40px; }
article.guide ol.steps-list li::before { position: absolute; left: 0; top: 13px; padding-top: 4px; }

@media (max-width: 760px) { article.guide ol.steps-list li { padding-left: 34px; } }

/* ---------- Round 3: Cos nav groups, start-here, glossary ---------- */
.side-nav a.item { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 2px; padding: 8px 18px 8px 26px; border-left: 2px solid transparent; font-size: 14.5px; font-weight: 700; color: var(--on-navy); line-height: 1.3; }
.side-nav a.item .n { font-size: 12px; font-weight: 800; color: var(--on-navy-2); opacity: .8; }
.side-nav a.item .n .ico { width: 15px; height: 15px; color: var(--gold-lt); }
.side-nav a.item:hover { background: rgba(243,239,230,.05); }
.side-nav a.item.on { background: rgba(243,239,230,.1); border-left-color: var(--gold-lt); font-weight: 800; }
.side-nav .foot { margin: 18px 28px 0; padding-top: 12px; border-top: 1px solid var(--on-navy-rule); display: flex; gap: 18px; }
.side-nav .foot a.plain { padding: 4px 0; }
p.start { margin-top: 14px; background: var(--card); border: 1px solid var(--rule); border-left: 3px solid var(--gold); padding: 12px 16px; font-size: 16px !important; line-height: 1.55 !important; color: var(--navy-900) !important; max-width: 720px; }
p.start b { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-tx) !important; margin-right: 4px; }
article.guide a.gl { color: inherit; border-bottom: 1px dotted var(--navy); }
article.guide a.gl:hover { color: var(--navy); }
dl.gloss { margin-top: 22px; border-top: 1px solid var(--ink-2); }
dl.gloss .gt { display: grid; grid-template-columns: 200px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 70px; }
dl.gloss .gt:target { background: var(--card); }
dl.gloss dt { font-weight: 800; color: var(--navy-900); font-size: 16.5px; }
dl.gloss dd { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 760px) { dl.gloss .gt { grid-template-columns: 1fr; gap: 2px; } p.start { font-size: 15px !important; } }
/* home: groups share rows (Print + Cure, Fix a problem + Run a shop) */
.topics { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); column-gap: 12px; }
.tg.s1 { grid-column: span 1; } .tg.s2 { grid-column: span 2; } .tg.s3 { grid-column: span 3; }
.tg.s1 .cards { grid-template-columns: 1fr; } .tg.s2 .cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 760px) { .topics { display: block; } .tg .cards, .tg.s2 .cards { grid-template-columns: 1fr; } }
@media (min-width: 961px) {
  .side-nav details.gd summary, .side-nav a.item { padding-top: 6px; padding-bottom: 6px; }
  .side-nav h2 { padding: 13px 28px 4px; }
  aside.side .sidei { padding-top: 16px; }
}
article.guide2 .body h2.h3 { font-size: 18px; letter-spacing: -.012em; margin: 26px 0 8px; display: block; }

/* ---------- Round 4: accessibility ---------- */
/* gold text on navy uses the light gold (5.9:1) */
.hero2 .eyebrow.gold, .hero2 .eyebrow .dot { color: var(--gold-lt); }
/* focus ring visible on navy areas (>=3:1) */
.side-nav :focus-visible, .hero2 :focus-visible, .topbar :focus-visible, .pn2 a.next:focus-visible, details.drawer :focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 2px; }
/* tap targets >= 44px */
.crumb a, .crumb .cur { display: inline-flex; align-items: center; min-height: 44px; }
.crumb { gap: 0 10px; }
footer.mini nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
.guide2 .jump a { display: inline-flex; align-items: center; min-height: 44px; }
.dlist .dsrc a, .faq2 .qs a { display: inline-block; padding: 12px 0; min-height: 44px; box-sizing: border-box; }
.dindex a { display: inline-flex; align-items: center; min-height: 44px; }
details.srcbox summary { min-height: 44px; }
.side-nav a.top, .side-nav .foot a.plain { min-height: 44px; display: flex; align-items: center; }
@media (max-width: 960px) {
  details.drawer > summary span { min-height: 44px; }
  details.drawer .dpanel details.gd summary, details.drawer .dpanel a.item { min-height: 44px; }
  details.drawer .dpanel details.gd li a { min-height: 44px; display: flex; align-items: center; }
  .faq2 details.q summary { min-height: 44px; }
}
/* phone tables: let value cells wrap so nothing is cut off (off-contact sources table) */
@media (max-width: 760px) {
  table.spec td.v { white-space: normal; }
  table.spec th { letter-spacing: .08em; }
  table.spec.power td { grid-column: 1 / -1; }
  table.spec.power td.pg { font-size: 14px; }
}
table.spec.power td.pg a { color: var(--navy); font-weight: 700; border-bottom: 1px solid rgba(23,73,143,.35); }
.phone-only { display: none; }
@media (max-width: 760px) { .regfig svg text { display: none; } .phone-only { display: inline; } }
/* Diagram labels never render below ~11px: when a figure is too narrow for its labels (phone, tablet, or beside the sidebar),
   hide the SVG text and show the text key instead. Uses container queries on the figure's own width. */
figure.f-stroke, figure.f-cure, figure.f-halftone, figure.regfig { container-type: inline-size; }
.hero2 figure.ht2 svg text, .hero2 figure.ht2 svg g[font-size="12"] { display: none; }
@container (max-width: 720px) {
  figure.f-stroke svg text, figure.f-cure svg text { display: none; }
  figure.f-stroke ul.legend, figure.f-cure ul.legend { display: block; list-style: none; margin: 10px 0 0; padding: 10px 12px; background: var(--card); border: 1px solid var(--rule); }
}
@container (max-width: 740px) { figure.f-halftone svg text, figure.f-halftone svg g[font-size="12"] { display: none; } }
@container (max-width: 600px) { figure.regfig svg text { display: none; } figure.regfig .phone-only { display: inline; } }
ul.legend li { font-size: 14px !important; line-height: 1.45 !important; padding: 3px 0; margin: 0 !important; }
ul.legend li::before { display: none; }
/* mesh chart on phones: inset the tracks so the "0" and "320" axis labels aren't clipped (the "156" marker label stays hidden; the row note says it) */
@media (max-width: 760px) { .mchart .mt { margin: 0 14px; } }

/* ---------- Round 5: sidebar without numbers (Cos: numbering was inconsistent) ---------- */
.side-nav details.gd summary { grid-template-columns: 1fr 16px; }
.side-nav a.item { grid-template-columns: 1fr; }
/* exposure test: Method A / Method B headings */
article.guide2 .body h3 + p { margin-top: 4px; }

/* ---------- Round 6 ---------- */
/* breadcrumb: separators sit on the text line, not at the top of the 44px row */
.crumb { align-items: center; }
.crumb i { align-self: center; }
/* sidebar: equipment pages nested under Equipment tiers */
.side-nav a.item.sub { padding-left: 40px; font-size: 14px; font-weight: 600; color: var(--on-navy-2); }
.side-nav a.item.sub.on { color: var(--on-navy); font-weight: 800; }
/* the Topics drawer now sits in the white header; desktop never shows it */
header.site details.drawer { display: none; }
@media (max-width: 960px) {
  header.site { position: sticky; top: 0; z-index: 45; }
  header.site details.drawer { display: block; }
  header.site details.drawer > summary span.open { background: var(--navy-900); color: var(--paper); }
  header.site details.drawer > summary:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
  header.site details.drawer[open] > summary .close { background: var(--paper); color: var(--navy-900); }
}
/* phones: the current-page crumb repeats the H1 right below it, so hide it (and its separator) */
@media (max-width: 600px) {
  .crumb .cur, .crumb i:last-of-type { display: none; }
}
/* Next/Back on small phones: stack full width, Next first, labels at most 2 lines */
@media (max-width: 480px) {
  .pn2 { grid-template-columns: 1fr; gap: 8px; }
  .pn2 a.next { order: -1; text-align: left; }
  .pn2 a.next small { justify-content: flex-start; }
  .pn2 b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .pn2 > span:empty { display: none; }
}

/* ---------- Round 7: E1 blueprint drawing on the Presses & setup hub ---------- */
figure.blueprint { container-type: inline-size; margin: 22px 0 6px; background: var(--navy-900); border-radius: 8px; padding: 10px; overflow: hidden; }
figure.blueprint svg { display: block; width: 100%; height: auto; }
figure.blueprint .bp-narrow, figure.blueprint .bp-key { display: none; }
figure.blueprint figcaption { color: var(--on-navy-2); font-size: 13.5px; line-height: 1.5; margin: 10px 6px 4px; }
figure.blueprint figcaption a.in { color: var(--on-navy); border-bottom-color: rgba(243,239,230,.5); }
figure.blueprint .bp-key { list-style: none; counter-reset: k; margin: 10px 4px 0; padding: 0; }
figure.blueprint .bp-key li { counter-increment: k; display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: baseline; color: var(--on-navy-2); font-size: 14px; line-height: 1.45; padding: 4px 0; margin: 0; }
figure.blueprint .bp-key li::before { content: counter(k); display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1.5px solid var(--gold-lt); border-radius: 50%; color: var(--on-navy); font-size: 12px; font-weight: 800; position: static; }
figure.blueprint .bp-key b { color: var(--on-navy); font-weight: 800; margin-right: 4px; }
/* the labelled version needs ~600px for its labels to stay at 11px or more; narrower figures get numbered callouts + this key */
@container (max-width: 599px) {
  figure.blueprint .bp-wide { display: none; }
  figure.blueprint .bp-narrow { display: block; }
  figure.blueprint .bp-key { display: block; }
}
/* key rows: block layout with an absolutely placed number (a grid here would put each text run in its own column) */
figure.blueprint .bp-key li { display: block; position: relative; padding: 5px 0 5px 34px; }
figure.blueprint .bp-key li::before { position: absolute; left: 0; top: 5px; }
figure.blueprint .bp-narrow { max-width: 520px; margin: 0 auto; }