/* buypith — Blueprint Rail
   ground: cool blueprint paper · rail: numbered step spine · accents: cobalt + sand
   Hand-built for this site only. */

:root{
  --ground:#E8ECF2;
  --paper:#F4F6FA;
  --card:#FFFFFF;
  --ink:#16202B;
  --ink-2:#4C5A6C;
  --ink-3:#7A8798;
  --rule:#C4CEDB;
  --rule-2:#DBE2EB;
  --cobalt:#2B4CE0;
  --cobalt-dk:#1E37A8;
  --cobalt-wash:#E1E7FB;
  --sand:#C08A22;
  --sand-wash:#F6ECD6;
  --flag:#B23A17;
  --flag-wash:#FAE7E1;
  --good:#1F6B4E;
  --good-wash:#E1F0E8;

  --disp:'Archivo',system-ui,sans-serif;
  --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Fragment Mono',ui-monospace,Consolas,monospace;

  --shell:1180px;
  --gut:clamp(18px,4vw,40px);
  --rail-w:210px;
}

/* ---------- per-locale font scope ----------
   The Latin faces carry no Cyrillic, so [lang="ru"] swaps the three family tokens and
   nothing else. Same classes, same layout, same colours — see build.mjs LOC.ru.fonts. */
[lang="ru"]{
  --disp:'Onest',system-ui,sans-serif;
  --sans:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Martian Mono',ui-monospace,Consolas,monospace;
}
/* Martian Mono runs wide; trim the tracking that was tuned for Fragment Mono */
[lang="ru"] .code-val{letter-spacing:.01em}
[lang="ru"] .rail-cap,[lang="ru"] .tick,[lang="ru"] .code-lbl,[lang="ru"] .art-kick,
[lang="ru"] .card-kick,[lang="ru"] .foot h4,[lang="ru"] .tool-cap{letter-spacing:.06em}
[lang="ru"] .crumbs,[lang="ru"] .art-meta,[lang="ru"] .row-m,[lang="ru"] .card-foot{letter-spacing:0}
/* Cyrillic runs longer than English — give the headline a little more room before it wraps */
[lang="ru"] h1.hero-h{max-width:19ch}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font:400 17px/1.62 var(--sans);
  letter-spacing:.002em;
  background-image:
    linear-gradient(to right,rgba(22,32,43,.045) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(22,32,43,.045) 1px,transparent 1px);
  background-size:28px 28px;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--cobalt);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--cobalt-dk)}
h1,h2,h3,h4{font-family:var(--disp);font-weight:700;letter-spacing:-.018em;line-height:1.14;margin:0}
p{margin:0 0 1.05em}
hr{border:0;border-top:1px solid var(--rule);margin:2.4rem 0}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}

.shell{max-width:var(--shell);margin:0 auto;padding:0 var(--gut)}
.skip-link{position:absolute;inset-inline-start:-9999px;top:0}
.skip-link:focus{inset-inline-start:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:99}

/* ---------- masthead ---------- */
.mast{border-bottom:1px solid var(--rule);background:rgba(232,236,242,.94);backdrop-filter:blur(6px);position:sticky;top:0;z-index:40}
.mast-in{display:flex;align-items:center;gap:22px;min-height:62px}
.wordmark{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);flex:0 0 auto}
.wordmark svg{display:block}
.wordmark b{font:700 19px/1 var(--disp);letter-spacing:-.03em}
.wordmark span{font:400 10px/1 var(--mono);color:var(--ink-3);letter-spacing:.14em;text-transform:uppercase;padding-top:3px}
.mast nav{margin-inline-start:auto;display:flex;gap:20px;flex-wrap:wrap}
.mast nav a{font:500 14.5px/1 var(--sans);color:var(--ink-2);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.mast nav a:hover,.mast nav a[aria-current]{color:var(--ink);border-bottom-color:var(--cobalt)}

/* language switcher — hover/focus dropdown, no JS */
.langsw{position:relative;flex:0 0 auto;margin-inline-start:18px}
.langsw-btn{display:inline-flex;align-items:center;gap:7px;background:transparent;border:1px solid var(--rule);
  color:var(--ink-2);font:500 13px/1 var(--sans);padding:8px 11px;min-height:36px;cursor:pointer}
.langsw-btn:hover{border-color:var(--cobalt);color:var(--ink)}
.langsw-menu{position:absolute;inset-inline-end:0;top:calc(100% + 6px);margin:0;padding:0;list-style:none;
  background:var(--card);border:1px solid var(--rule);min-width:150px;z-index:60;
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .14s,transform .14s,visibility .14s;
  box-shadow:0 12px 26px -18px rgba(22,32,43,.6)}
.langsw:hover .langsw-menu,.langsw:focus-within .langsw-menu,
.langsw[data-open="1"] .langsw-menu{opacity:1;visibility:visible;transform:translateY(0)}
.langsw-menu a{display:block;padding:11px 14px;font:500 14px/1.2 var(--sans);color:var(--ink-2);text-decoration:none;min-height:44px;box-sizing:border-box}
.langsw-menu a:hover{background:var(--cobalt-wash);color:var(--ink)}
.langsw-menu a[aria-current]{color:var(--ink);background:var(--paper)}
.langsw-menu a[aria-current]::after{content:"¹3";float:inline-end;color:var(--cobalt)}

/* ---------- hero (home) ---------- */
.hero{padding:clamp(30px,5vw,58px) 0 clamp(26px,4vw,44px);border-bottom:1px solid var(--rule)}
.hero-grid{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);gap:clamp(24px,4vw,52px);align-items:start}

.rail{position:relative;padding-inline-start:2px}
.rail-cap{font:400 10px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.rail ol{list-style:none;margin:0;padding:0;position:relative}
.rail ol::before{content:"";position:absolute;inset-inline-start:15px;top:6px;bottom:8px;width:1px;background:var(--rule)}
.rail li{position:relative;padding:0 0 15px 42px;min-height:30px}
.rail li:last-child{padding-bottom:0}
.rail-n{position:absolute;inset-inline-start:0;top:1px;width:31px;height:20px;display:grid;place-items:center;
  font:400 11px/1 var(--mono);color:var(--cobalt);background:var(--ground);border:1px solid var(--rule);letter-spacing:.04em}
.rail li.on .rail-n{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.rail-t{font:500 13.5px/1.35 var(--sans);color:var(--ink-2);display:block;text-decoration:none}
a.rail-t:hover{color:var(--cobalt)}
.rail li.on .rail-t{color:var(--ink);font-weight:600}
.rail-note{margin-top:16px;padding-top:13px;border-top:1px solid var(--rule);
  font:400 11.5px/1.5 var(--mono);color:var(--ink-3)}

.hero-kick{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.tick{font:400 10.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);
  border:1px solid var(--rule);padding:5px 9px;background:var(--paper)}
.tick.sand{border-color:var(--sand);color:var(--sand);background:var(--sand-wash)}
h1.hero-h{font-size:clamp(31px,5.1vw,54px);max-width:16ch;margin:0 0 18px}
h1.hero-h em{font-style:normal;position:relative;white-space:nowrap}
h1.hero-h em::after{content:"";position:absolute;left:0;right:0;bottom:-.02em;height:.085em;background:var(--sand)}
.hero-sub{font-size:clamp(16px,1.55vw,18.5px);line-height:1.6;color:var(--ink-2);max-width:56ch;margin:0 0 22px}
.hero-sub b{color:var(--ink);font-weight:600}

/* referral card — form A: code only, no exchange link */
.code-card{background:var(--card);border:1px solid var(--rule);position:relative;padding:20px 22px 18px;
  box-shadow:0 1px 0 var(--rule-2),0 14px 30px -22px rgba(22,32,43,.5)}
.code-card::before,.code-card::after{content:"";position:absolute;width:9px;height:9px;border:1px solid var(--cobalt)}
.code-card::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.code-card::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.code-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.code-lbl{font:400 10.5px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);width:100%;margin-bottom:-2px}
.code-val{font:400 clamp(28px,4.2vw,38px)/1 var(--mono);letter-spacing:.06em;color:var(--ink);padding:2px 4px 4px;border-bottom:2px solid var(--sand)}
.copy-btn{font:500 14px/1 var(--sans);color:#fff;background:var(--cobalt);border:1px solid var(--cobalt);
  padding:11px 17px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px}
.copy-btn:hover{background:var(--cobalt-dk);border-color:var(--cobalt-dk)}
.copy-btn:active{transform:translateY(1px)}
.copy-btn[data-done="1"]{background:var(--ink);border-color:var(--ink)}
.copy-btn svg{flex:0 0 auto}
.code-benefit{margin:14px 0 0;font-size:15.5px;line-height:1.5;color:var(--ink)}
.code-benefit b{font-weight:600}
.code-fine{margin:7px 0 0;font:400 12px/1.55 var(--sans);color:var(--ink-3)}
.code-use{margin:13px 0 0;padding-top:12px;border-top:1px dashed var(--rule);font-size:14.5px;color:var(--ink-2)}
.code-go{margin:15px 0 0;padding-top:14px;border-top:1px solid var(--rule)}
.code-go .aff-link{margin:0}
.code-go .aff-note{margin:10px 0 0}
.code-use i{font-style:normal;font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-inline-end:7px}

.hero-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.act{font:600 15px/1 var(--sans);text-decoration:none;padding:13px 18px;min-height:44px;display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--ink);color:var(--ink);background:transparent}
.act:hover{background:var(--ink);color:var(--ground)}
.act.solid{background:var(--ink);color:var(--ground)}
.act.solid:hover{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.act small{font:400 11px/1 var(--mono);opacity:.7;letter-spacing:.08em}

/* quick-answer strip */
.answers{border-top:1px solid var(--rule);background:var(--paper)}
.answers-in{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.ans{padding:18px 26px 20px;border-inline-start:1px solid var(--rule);text-decoration:none;color:inherit;display:block}
.ans:first-child{border-inline-start:0;padding-inline-start:0}
.ans:hover{background:var(--cobalt-wash)}
.ans-q{font:400 10.5px/1.3 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin:0 0 8px}
.ans-a{font:700 clamp(19px,2.2vw,25px)/1.15 var(--disp);color:var(--ink);margin:0 0 6px;letter-spacing:-.015em}
.ans-a span{font:400 13px/1 var(--mono);color:var(--ink-3);letter-spacing:.02em}
.ans-n{font:400 12.5px/1.45 var(--sans);color:var(--ink-2);margin:0}
.ans-n u{text-decoration:none;color:var(--cobalt);border-bottom:1px solid var(--cobalt-wash)}
.ans:hover .ans-n u{border-bottom-color:var(--cobalt)}

/* ---------- home sections ---------- */
.sec{padding:clamp(34px,5vw,58px) 0;border-bottom:1px solid var(--rule)}
.sec-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:24px;
  padding-bottom:11px;border-bottom:1px solid var(--rule)}
.sec-head h2{font-size:clamp(22px,2.8vw,30px)}
.sec-head .note{font:400 11.5px/1 var(--mono);color:var(--ink-3);letter-spacing:.06em;margin-inline-start:auto}

/* step blocks — the seven-step spine on the home page */
.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border:1px solid var(--rule);background:var(--card)}
.step{padding:20px 22px 22px;border-inline-start:1px solid var(--rule);border-top:1px solid var(--rule);position:relative;
  text-decoration:none;color:inherit;display:block}
.steps .step:nth-child(-n+2){border-top:0}
.steps .step:nth-child(odd){border-inline-start:0}
.step:hover{background:var(--cobalt-wash)}
.step-n{font:400 11px/1 var(--mono);color:var(--cobalt);letter-spacing:.1em}
.step h3{font-size:19.5px;margin:9px 0 7px}
.step p{font-size:14.5px;line-height:1.5;color:var(--ink-2);margin:0}
.step-meta{font:400 11px/1 var(--mono);color:var(--ink-3);letter-spacing:.05em;margin-top:11px;display:block}

/* card list (articles / tools index) */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:14px}
.card{background:var(--card);border:1px solid var(--rule);padding:0;text-decoration:none;color:inherit;display:flex;flex-direction:column}
.card:hover{background:var(--cobalt-wash);border-color:var(--cobalt)}
.card figure{margin:0;border-bottom:1px solid var(--rule-2)}
.card-body{padding:15px 17px 17px;display:flex;flex-direction:column;flex:1}
.card-kick{font:400 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 8px}
.card h3{font-size:17.5px;line-height:1.25;margin:0 0 8px}
.card p{font-size:14px;line-height:1.5;color:var(--ink-2);margin:0 0 11px}
.card-foot{margin-top:auto;font:400 11px/1 var(--mono);color:var(--ink-3);letter-spacing:.05em;display:flex;gap:12px}

/* plain index rows (wide hub links) */
.rows{border-top:1px solid var(--rule)}
.row{display:flex;gap:18px;align-items:baseline;padding:13px 2px;border-bottom:1px solid var(--rule-2);text-decoration:none;color:inherit}
.row:hover{background:var(--cobalt-wash)}
.row-n{font:400 11px/1.4 var(--mono);color:var(--ink-3);flex:0 0 34px;letter-spacing:.06em}
.row-t{font:600 16px/1.35 var(--sans);flex:1 1 auto}
.row:hover .row-t{color:var(--cobalt)}
.row-m{font:400 11.5px/1.4 var(--mono);color:var(--ink-3);flex:0 0 auto;letter-spacing:.05em}

/* honest note block on the home page */
.honest{border:1px solid var(--ink);background:var(--card);padding:clamp(20px,3vw,30px)}
.honest b{display:block;font:400 10.5px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--flag);margin-bottom:13px}
.honest p{font-size:16px;color:var(--ink-2);max-width:64ch}
.honest p:last-child{margin-bottom:0}
.honest em{font-style:italic;color:var(--ink)}
.honest .sig{font:400 11.5px/1 var(--mono);color:var(--ink-3);letter-spacing:.06em;margin-top:16px}

/* ---------- article page ---------- */
.art-wrap{padding:clamp(24px,4vw,44px) 0 0}
.crumbs{font:400 11.5px/1.5 var(--mono);color:var(--ink-3);letter-spacing:.04em;margin-bottom:20px}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--cobalt)}
.crumbs span{margin:0 7px;color:var(--rule)}
/* WCAG 2.5.8: breadcrumbs are navigation, not a block of text, so they need a real hit area.
   Vertical padding on an inline element grows the target without altering the line box. */
@media (max-width:768px){
  /* WCAG 2.5.8 target size (minimum 24px): breadcrumbs, the footer sitemap, in-list links
     and definition-list links are navigation, not a block of text, so the in-sentence
     exemption does not cover them. Vertical padding on an INLINE element grows the hit
     area without altering the line box, so none of this moves the layout. */
  .crumbs a{padding-block:6px}
  .foot li a{padding-block:4px}
  .art-body li>a,.art-body dd>a,main dd>a,.guide-in li>a,.toc li>a,.page-body li>a{padding-block:3px}
  /* .rail-t is display:block, so its padding does move things. Extend the hit area
     downward only and take the same 6px back off the li, leaving every text and badge
     position identical while the target reaches 24px. */
  .rail-t{padding-block-end:6px}
  .rail li{padding-bottom:9px}
  .wordmark{padding-block:2px}
}

.art-head{max-width:74ch}
.art-kick{font:400 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cobalt);margin:0 0 14px}
.art-head h1{font-size:clamp(28px,4.2vw,44px);margin:0 0 16px;max-width:22ch}
.art-deck{font-size:clamp(16.5px,1.6vw,19px);line-height:1.58;color:var(--ink-2);margin:0 0 18px}
.art-meta{display:flex;flex-wrap:wrap;gap:8px 20px;font:400 11.5px/1.4 var(--mono);color:var(--ink-3);letter-spacing:.04em;
  padding:11px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.art-meta a{color:var(--ink-2);text-decoration:none}
.art-meta a:hover{color:var(--cobalt)}

figure.article-cover{margin:26px 0 0;border:1px solid var(--rule);max-width:74ch}
figure.article-cover img{width:100%}
figure.article-cover figcaption{font:400 11.5px/1.5 var(--mono);color:var(--ink-3);padding:9px 12px;border-top:1px solid var(--rule);background:var(--paper)}

/* opening modules — each article picks one, they are not interchangeable decoration */
.open-answer{border-inline-start:3px solid var(--cobalt);background:var(--card);padding:17px 20px;margin:26px 0 0}
.open-answer b{display:block;font:400 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.open-answer p{font-size:17.5px;line-height:1.5;margin:0;color:var(--ink)}

.open-warn{border:1px solid var(--flag);background:var(--flag-wash);padding:17px 20px;margin:26px 0 0}
.open-warn b{display:block;font:400 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--flag);margin-bottom:9px}
.open-warn p{font-size:16px;line-height:1.55;margin:0;color:var(--ink)}

.open-tldr{border:1px solid var(--rule);background:var(--card);padding:18px 20px;margin:26px 0 0}
.open-tldr b{display:block;font:400 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:11px}
.open-tldr ul{margin:0;padding-inline-start:18px}
.open-tldr li{font-size:15.5px;line-height:1.5;margin-bottom:7px;color:var(--ink-2)}
.open-tldr li:last-child{margin-bottom:0}
.open-tldr li b{display:inline;font:600 15.5px/1.5 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink);margin:0}

.open-compare{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule);background:var(--card);margin:26px 0 0}
.open-compare>div{padding:16px 18px}
.open-compare>div+div{border-inline-start:1px solid var(--rule)}
.open-compare b{display:block;font:400 10.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;margin-bottom:9px}
.open-compare .a b{color:var(--good)}
.open-compare .b b{color:var(--flag)}
.open-compare p{font-size:15px;line-height:1.5;margin:0;color:var(--ink-2)}

.open-time{margin:26px 0 0;border:1px solid var(--rule);background:var(--card);padding:16px 20px 6px}
.open-time b{display:block;font:400 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:13px}
.open-time ol{list-style:none;margin:0;padding:0;position:relative}
.open-time li{position:relative;padding:0 0 14px 74px;font-size:15px;line-height:1.45;color:var(--ink-2)}
.open-time li i{position:absolute;inset-inline-start:0;top:1px;font:400 11px/1.4 var(--mono);color:var(--cobalt);font-style:normal;letter-spacing:.04em}

.open-qa{margin:26px 0 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:16px 0}
.open-qa dt{font:700 17px/1.35 var(--disp);margin-bottom:7px}
.open-qa dd{margin:0 0 14px;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.open-qa dd:last-child{margin-bottom:0}

/* body */
.art-body{max-width:70ch;margin:34px 0 0;font-size:17.5px;line-height:1.7}
.art-body h2{font-size:clamp(21px,2.6vw,27px);margin:2.1em 0 .62em;padding-top:.5em;border-top:1px solid var(--rule)}
.art-body h2:first-child{border-top:0;padding-top:0;margin-top:0}
.art-body h3{font-size:19px;margin:1.7em 0 .5em}
.art-body p{margin:0 0 1.05em}
.art-body ul,.art-body ol{margin:0 0 1.3em;padding-inline-start:22px}
.art-body li{margin-bottom:.5em}
.art-body li>ul,.art-body li>ol{margin-top:.5em}
.art-body strong{font-weight:600}
.art-body a{font-weight:500}
.art-body code{font:400 .88em/1 var(--mono);background:var(--paper);border:1px solid var(--rule-2);padding:2px 5px}
.art-body blockquote{margin:1.5em 0;padding:2px 0 2px 20px;border-inline-start:2px solid var(--sand);color:var(--ink-2);font-size:16.5px}

.art-body table,.tw table,.page-body table{width:100%;border-collapse:collapse;margin:1.5em 0;font-size:15px;background:var(--card)}
.art-body th,.art-body td,.tw th,.tw td,.page-body th,.page-body td{border:1px solid var(--rule);padding:9px 12px;text-align:left;vertical-align:top}
.art-body th,.tw th,.page-body th{background:var(--paper);font:600 12.5px/1.35 var(--sans);letter-spacing:.02em}
.num{font-family:var(--mono);font-size:13.5px}
.tw{overflow-x:auto;margin:1.5em 0}
.tw table{margin:0;min-width:520px}
/* tables sitting on the dark tool stage */
.tool-stage .tw{margin:16px 0 0}
.tool-stage table{background:transparent;color:inherit;min-width:0}
.tool-stage th,.tool-stage td{border-color:#33415A;color:#C6D2E4;font-size:14.5px;padding:8px 12px}
.tool-stage td:first-child{font-family:var(--mono);color:#fff;width:1%;white-space:nowrap}
/* section headings inside a tool body */
.tool-h2{font-family:var(--disp);font-size:clamp(20px,2.4vw,25px);margin:38px 0 6px}
.tool-lead{color:var(--ink-2);margin:0 0 14px;font-size:15.5px;max-width:78ch}

/* in-body furniture */
.note-box{border:1px solid var(--rule);background:var(--card);padding:15px 18px;margin:1.6em 0;font-size:16px;line-height:1.58}
.note-box b{font:400 10.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:9px}
.note-box p:last-child{margin-bottom:0}
.warn-box{border:1px solid var(--flag);background:var(--flag-wash);padding:15px 18px;margin:1.6em 0;font-size:16px;line-height:1.58}
.warn-box b{font:400 10.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--flag);display:block;margin-bottom:9px}
.warn-box p:last-child{margin-bottom:0}
.screen-note{border-inline-start:2px solid var(--rule);padding:3px 0 3px 16px;margin:1.5em 0;font:400 14.5px/1.6 var(--sans);color:var(--ink-3)}
.screen-note b{color:var(--ink-2);font-weight:600}

/* table of contents */
.toc{border:1px solid var(--rule);background:var(--paper);padding:16px 20px 18px;margin:30px 0 0;max-width:70ch}
.toc b{font:400 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:12px}
.toc ol{list-style:none;counter-reset:t;margin:0;padding:0;columns:2;column-gap:28px}
.toc li{counter-increment:t;margin-bottom:8px;break-inside:avoid;font-size:14.5px;line-height:1.4}
.toc li::before{content:counter(t,decimal-leading-zero);font:400 10.5px/1 var(--mono);color:var(--cobalt);margin-inline-end:9px}
.toc a{color:var(--ink-2);text-decoration:none}
.toc a:hover{color:var(--cobalt);text-decoration:underline}

/* faq */
.faq{max-width:70ch;margin:44px 0 0;border-top:1px solid var(--ink);padding-top:22px}
.faq>h2{font:400 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);display:block;margin:0 0 16px}
.faq h3{font-size:18.5px;margin:0 0 8px;font-family:var(--disp);font-weight:700}
.faq div+div{margin-top:20px;padding-top:20px;border-top:1px solid var(--rule-2)}
.faq p{font-size:16px;line-height:1.6;color:var(--ink-2);margin:0}

/* footnote / disclosure next to a conversion link */
.aff-note{font:400 12.5px/1.55 var(--sans);color:var(--ink-3);margin:.5em 0 1.4em;max-width:66ch}
.aff-link{display:inline-flex;align-items:center;gap:8px;font:600 15.5px/1 var(--sans);text-decoration:none;
  background:var(--ink);color:var(--ground);border:1px solid var(--ink);padding:13px 18px;min-height:44px;margin:.4em 0 0}
.aff-link:hover{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.aff-link svg{flex:0 0 auto}

/* next / prev + related */
.art-foot{max-width:70ch;margin:46px 0 0;padding-top:22px;border-top:1px solid var(--rule)}
.rel-t{font:400 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px}
.rel{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.rel a{background:var(--card);padding:13px 16px;text-decoration:none;color:inherit;display:flex;gap:14px;align-items:baseline}
.rel a:hover{background:var(--cobalt-wash)}
.rel i{font:400 10.5px/1.4 var(--mono);color:var(--ink-3);font-style:normal;flex:0 0 46px;letter-spacing:.05em}
.rel b{font:600 15.5px/1.35 var(--sans)}

/* ---------- tool pages ---------- */
.tool-head{padding:clamp(22px,3.5vw,38px) 0 0;max-width:74ch}
.tool-head h1{font-size:clamp(27px,3.8vw,40px);margin:0 0 14px}
.tool-head .art-deck{margin-bottom:0}
.tool-stage{background:var(--ink);color:var(--ground);border:1px solid var(--ink);margin:26px 0 0;padding:clamp(18px,3vw,28px)}
.tool-stage h2,.tool-stage h3{color:#fff}
.tool-cap{font:400 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#8FA3D8;margin:0 0 16px}
.tool-out{font:400 clamp(30px,5.5vw,52px)/1.05 var(--mono);color:#fff;letter-spacing:-.01em;margin:0 0 6px}
.tool-out small{font:400 15px/1 var(--mono);color:#93A3BB;letter-spacing:.04em}
.tool-sub{font-size:15.5px;line-height:1.55;color:#A8B6CC;margin:0;max-width:60ch}
.tool-stage a{color:#9FB4F5}
.tool-sub-gap{margin-bottom:14px}
.tool-cap-tight{margin-bottom:8px}
.quiz-out{margin:22px 0 0;padding-top:20px;border-top:1px solid #3B4A60}
.quiz-reset{margin:18px 0 0}

.fld{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
.fld .q-lbl{font:400 11px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:#93A3BB;width:100%;margin:0}
.opt{font:500 14.5px/1 var(--sans);background:transparent;color:var(--ground);border:1px solid #3B4A60;
  padding:12px 15px;min-height:44px;cursor:pointer}
.opt:hover{border-color:#7C93C9}
.opt[aria-pressed="true"]{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.tool-reset{font:500 13.5px/1 var(--sans);background:transparent;color:#93A3BB;border:1px solid #3B4A60;padding:10px 14px;min-height:44px;cursor:pointer}
.tool-reset:hover{color:#fff;border-color:#7C93C9}

/* checkable roadmap */
.map{border:1px solid var(--rule);background:var(--card);margin:26px 0 0}
.map-step{border-top:1px solid var(--rule);padding:0}
.map-step:first-child{border-top:0}
.map-hd{display:flex;gap:14px;align-items:flex-start;padding:15px 18px;width:100%;background:transparent;border:0;
  text-align:left;cursor:pointer;font:inherit;color:inherit}
.map-hd:hover{background:var(--cobalt-wash)}
.map-box{flex:0 0 22px;height:22px;border:1px solid var(--ink-3);display:grid;place-items:center;margin-top:2px;background:var(--card)}
.map-step[data-done="1"] .map-box{background:var(--good);border-color:var(--good)}
.map-step[data-done="1"] .map-box svg{display:block}
.map-box svg{display:none}
.map-n{font:400 11px/1.5 var(--mono);color:var(--cobalt);flex:0 0 26px;letter-spacing:.05em}
.map-t{flex:1 1 auto}
.map-t b{display:block;font:700 17px/1.3 var(--disp)}
.map-t span{display:block;font-size:14px;line-height:1.5;color:var(--ink-2);margin-top:4px}
.map-body{padding:0 18px 18px 80px;font-size:15.5px;line-height:1.62;color:var(--ink-2)}
.map-body dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px}
.map-body dt{font:400 10.5px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.map-body dd{margin:0}
.map-prog{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:14px}
.map-bar{flex:1 1 220px;height:8px;background:#2A3648;position:relative;min-width:160px}
.map-bar i{position:absolute;inset-inline-start:0;top:0;bottom:0;background:#3FA97C;width:0;transition:width .3s}
.map-num{font:400 13px/1 var(--mono);color:#A8B6CC;letter-spacing:.05em}
.map-count{font:400 clamp(34px,6vw,58px)/1 var(--mono);color:#fff;margin:0}
.map-count span{font-size:.42em;color:#93A3BB}

/* glossary */
.gloss-jump{display:flex;flex-wrap:wrap;gap:5px;margin:24px 0}
.gloss-jump a{font:400 12px/1 var(--mono);border:1px solid var(--rule);padding:8px 10px;text-decoration:none;color:var(--ink-2);background:var(--card);min-width:32px;text-align:center}
.gloss-jump a:hover{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.gloss-grp{margin:0 0 30px;scroll-margin-top:80px}
.gloss-grp>h2{font-size:22px;padding-bottom:8px;border-bottom:1px solid var(--ink);margin-bottom:2px}
.gloss dl{margin:0}
.gloss dt{font:700 16.5px/1.35 var(--disp);padding:14px 0 0;border-top:1px solid var(--rule-2)}
.gloss dt:first-of-type{border-top:0}
.gloss dd{margin:6px 0 14px;font-size:15.5px;line-height:1.6;color:var(--ink-2);max-width:74ch}
.gloss dd em{font-style:normal;font-family:var(--mono);font-size:12.5px;color:var(--ink-3);letter-spacing:.03em}

/* details / SEO guide under a tool */
details.guide{border:1px solid var(--rule);background:var(--card);margin:30px 0 0;max-width:none}
details.guide>summary{cursor:pointer;padding:15px 18px;font:600 16px/1.3 var(--sans);list-style:none;display:flex;align-items:center;gap:10px}
details.guide>summary::-webkit-details-marker{display:none}
details.guide>summary::before{content:"+";font:400 17px/1 var(--mono);color:var(--cobalt)}
details.guide[open]>summary::before{content:"−"}
details.guide>summary:hover{background:var(--cobalt-wash)}
.guide-in{padding:4px 18px 20px;border-top:1px solid var(--rule);font-size:16px;line-height:1.65;color:var(--ink-2);max-width:74ch}
.guide-in h3{font-size:17px;margin:1.5em 0 .45em;color:var(--ink)}
.guide-in h3:first-child{margin-top:1em}
.guide-in ul{padding-inline-start:20px}

/* ---------- compliance / plain pages ---------- */
.page-wrap{padding:clamp(24px,4vw,44px) 0 0;max-width:72ch}
.page-wrap h1{font-size:clamp(27px,3.6vw,38px);margin:0 0 16px}
.page-wrap .art-deck{margin-bottom:24px}
.page-body{font-size:17px;line-height:1.68}
.page-body h2{font-size:21px;margin:2em 0 .55em;padding-top:.5em;border-top:1px solid var(--rule)}
.page-body h3{font-size:17.5px;margin:1.6em 0 .45em}
.page-body ul,.page-body ol{padding-inline-start:22px}
.page-body li{margin-bottom:.5em}
.page-body dl{margin:1.2em 0}
.page-body dt{font-weight:600;margin-top:1em}
.page-body dd{margin:.3em 0 0}
.page-body table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:15px;background:var(--card)}
.page-body th,.page-body td{border:1px solid var(--rule);padding:9px 12px;text-align:left;vertical-align:top}
.page-body th{background:var(--paper);font:600 12.5px/1.35 var(--sans)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--rule);background:var(--paper);margin-top:clamp(46px,7vw,80px);padding:clamp(30px,4vw,46px) 0 26px}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px 24px}
.foot-brand .wordmark{margin-bottom:12px}
.foot-brand p{font-size:14px;line-height:1.6;color:var(--ink-2);max-width:34ch;margin:0 0 12px}
.foot h4{font:400 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 13px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:9px}
.foot li a{font-size:14.5px;color:var(--ink-2);text-decoration:none}
.foot li a:hover{color:var(--cobalt);text-decoration:underline}
.foot-legal{margin-top:30px;padding-top:20px;border-top:1px solid var(--rule);font-size:13px;line-height:1.65;color:var(--ink-3);max-width:88ch}
.foot-legal p{margin:0 0 9px}
.foot-legal p:last-child{margin-bottom:0}
.foot-legal b{color:var(--ink-2);font-weight:600}
.foot-legal a{color:var(--ink-2)}

/* 404 */
.nf{padding:clamp(50px,9vw,110px) 0;max-width:62ch}
.nf-code{font:400 clamp(58px,11vw,110px)/1 var(--mono);color:var(--rule);letter-spacing:-.02em;margin:0 0 12px}
.nf h1{font-size:clamp(26px,3.6vw,36px);margin:0 0 14px}
.nf p{color:var(--ink-2)}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:26px}
  .rail{order:2;border-top:1px solid var(--rule);padding-top:20px}
  h1.hero-h{max-width:20ch}
  .mast-in{flex-wrap:wrap;gap:0 18px;padding-top:9px;padding-bottom:2px;min-height:0}
  .mast nav{margin-inline-start:0;width:100%;gap:16px;overflow-x:auto;flex-wrap:nowrap;
    padding:2px 0 7px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .mast nav::-webkit-scrollbar{display:none}
  .mast nav a{white-space:nowrap;font-size:13.5px}
  .answers-in{grid-template-columns:1fr}
  .ans{border-inline-start:0;border-top:1px solid var(--rule);padding:15px 0 16px}
  .ans:first-child{border-top:0}
  .steps{grid-template-columns:1fr}
  .steps .step{border-inline-start:0;border-top:1px solid var(--rule)}
  .steps .step:first-child{border-top:0}
  .foot-grid{grid-template-columns:1fr 1fr}
  .toc ol{columns:1}
  .map-body{padding-inline-start:18px}
}
@media(max-width:560px){
  .open-compare{grid-template-columns:1fr}
  .open-compare>div+div{border-inline-start:0;border-top:1px solid var(--rule)}
  .foot-grid{grid-template-columns:1fr}
  .art-body{font-size:16.5px}
  .cards{grid-template-columns:1fr}
}
@media(max-width:430px){
  body{font-size:16px}
  .hero{padding:16px 0 22px}
  .hero-kick{margin-bottom:11px;gap:7px}
  .tick{font-size:9.5px;padding:4px 7px}
  h1.hero-h{font-size:28px;margin-bottom:11px}
  .hero-sub{font-size:15px;line-height:1.52;margin-bottom:14px;max-width:none}
  .hero-sub .drop{display:none}
  .code-card{padding:14px 14px 13px}
  .code-val{font-size:29px}
  .code-benefit{font-size:15px;margin-top:12px}
  .copy-btn{width:100%;justify-content:center}
  .code-use{display:none}
  .code-fine{font-size:11.5px}
  .art-head h1{font-size:26px}
  .open-time li{padding-inline-start:0}
  .open-time li i{position:static;display:block;margin-bottom:3px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}