/* ═══════════════════════════════════════════════════════════════
   TRUSTYBULL · EXPLAIN
   The stylesheet for the SEO article surface — hub, category,
   article, 404. Server-rendered documents, not the app.

   ⚠ THIS IS NOT "THE SECOND STYLESHEET" app.css FORBIDS. That rule
   is about splitting ONE surface across two files: app.css was
   split phone/desktop, 369 class names were shared, and every
   change had to be made twice. Nothing here is shared with it.
   These pages never load app.css and app.css never loads this —
   they have no class in common, and no rule in one can reach the
   other. Splitting on SURFACE is the thing that keeps them honest;
   splitting on WIDTH was the mistake.

   ⚠ THE @font-face BLOCK BELOW IS COPIED FROM app.css ON PURPOSE.
   The alternative was linking app.css here just for the fonts,
   which would drag the SPA's fixed no-scroll frame onto a document
   that must scroll. These declarations name files that never
   change; if a font file is ever renamed, it must be renamed in
   BOTH files.
   ═══════════════════════════════════════════════════════════════ */

/* latin-ext */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/bebas-JTUSjIg69CK48gW7PXoo9Wdhyzbi.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/bebas-JTUSjIg69CK48gW7PXoo9Wlhyw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/dmmono-aFTU7PB1QTsUX8KYthSQBLyM.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/dmmono-aFTU7PB1QTsUX8KYthqQBA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/dmmono-aFTR7PB1QTsUX8KYvumzEY2tbZX9.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/dmmono-aFTR7PB1QTsUX8KYvumzEYOtbQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/dmsans-rP2Hp2ywxg089UriCZ2IHSeH.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/dmsans-rP2Hp2ywxg089UriCZOIHQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/dmsans-rP2Hp2ywxg089UriCZ2IHSeH.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/dmsans-rP2Hp2ywxg089UriCZOIHQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/dmsans-rP2Hp2ywxg089UriCZ2IHSeH.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/dmsans-rP2Hp2ywxg089UriCZOIHQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/dmsans-rP2Hp2ywxg089UriCZ2IHSeH.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/dmsans-rP2Hp2ywxg089UriCZOIHQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════════════════════════
   TOKENS — the same values app.css uses, so the two surfaces are
   one product. Only what this page needs is repeated.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --ground:#08090d;
  --raise:#0f1117;
  --panel:#161a24;

  --seam:rgba(255,255,255,.07);
  --seam-lit:rgba(255,255,255,.13);

  --ink:#eceef3;
  --ink-2:#8b92a8;
  --ink-3:#4e5568;

  --scout:#5b8ff9;
  --up:#16c784;

  --display:'Bebas Neue',Impact,sans-serif;
  --sans:'DM Sans',system-ui,-apple-system,sans-serif;
  --mono:'DM Mono',ui-monospace,SFMono-Regular,monospace;

  --t-micro:11px;
  --track-micro:.22em;

  --r-sm:8px;
  --r:12px;
  --r-lg:16px;

  --gutter:20px;

  /* ⚠ THE MEASURE IS A READING DECISION, NOT A LAYOUT ONE. These are
     1,200-word explainers; past about 70 characters the eye loses the
     line it is returning to. Everything else on the page hangs off it. */
  --measure:68ch;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;height:auto}

a{color:var(--scout);text-decoration:none}
a:hover{text-decoration:underline}

:focus-visible{outline:2px solid var(--scout);outline-offset:2px;border-radius:4px}

/* ═══════════════════════════════════════════════════════════════
   THE BAR
   ═══════════════════════════════════════════════════════════════ */
.exbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px var(--gutter);
  border-bottom:1px solid var(--seam);
  background:rgba(8,9,13,.86);
  backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:10;
}
.exbar__brand{display:flex;align-items:center}
.exbar__brand img{display:block;width:132px;height:auto}
.exbar__nav{display:flex;align-items:center;gap:8px}
.exbar__nav a{
  display:inline-flex;align-items:center;
  padding:9px 14px;border-radius:999px;
  font-size:14px;font-weight:500;color:var(--ink-2);
}
.exbar__nav a:hover{color:var(--ink);background:var(--raise);text-decoration:none}
.exbar__cta{
  color:var(--ground)!important;background:var(--ink);
  font-weight:600;
}
.exbar__cta:hover{background:#fff;color:var(--ground)!important}

/* ═══════════════════════════════════════════════════════════════
   THE COLUMN
   ═══════════════════════════════════════════════════════════════ */
.exmain{
  max-width:var(--measure);
  margin:0 auto;
  padding:40px var(--gutter) 72px;
}

.kicker{
  display:block;
  font-family:var(--mono);
  font-size:var(--t-micro);
  letter-spacing:var(--track-micro);
  text-transform:uppercase;
  color:var(--scout);
  margin-bottom:12px;
}

.lede{
  color:var(--ink-2);
  font-size:19px;
  line-height:1.6;
  margin:14px 0 0;
}

h1{
  font-size:clamp(30px,5.4vw,44px);
  line-height:1.14;
  letter-spacing:-.02em;
  font-weight:600;
  margin:0;
}

.exempty{color:var(--ink-2)}

/* ── breadcrumb ─────────────────────────────────────────────── */
.excrumb{margin:0 0 26px}
.excrumb ol{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  list-style:none;margin:0;padding:0;
  font-size:13px;color:var(--ink-3);
}
.excrumb li{display:flex;align-items:center;gap:6px;min-width:0}
.excrumb li+li::before{content:"/";color:var(--ink-3)}
.excrumb a{color:var(--ink-2)}
.excrumb a:hover{color:var(--ink)}
/* The last crumb is the page you are on — it is a label, and a long
   title must not push the row sideways. */
.excrumb [aria-current]{
  color:var(--ink-3);
  max-width:32ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   HUB
   ═══════════════════════════════════════════════════════════════ */
.exhub__head{margin-bottom:40px}

/* ⚠ THE HUB IS WIDER THAN THE MEASURE, DELIBERATELY. A grid of 174
   category cards inside a 68ch reading column is one long ribbon.
   The measure governs prose, not indexes.

   ⚠ THE BREAKOUT IS ON THE VIEWPORT, NOT ON A PERCENTAGE. `100%`
   inside min() resolves against the containing block — which IS the
   measure — so any calc built from it comes out as zero and the grid
   silently never widens. 100vw is the only width that knows about
   the screen rather than the column. */
.exgrid{
  width:min(1080px,calc(100vw - (var(--gutter) * 2)));
  position:relative;
  left:50%;
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:14px;
}

.excard{
  display:block;
  padding:20px;
  border:1px solid var(--seam);
  border-radius:var(--r-lg);
  background:var(--raise);
  color:inherit;
  transition:border-color 200ms cubic-bezier(.22,.61,.36,1),
             background 200ms cubic-bezier(.22,.61,.36,1);
}
.excard:hover{border-color:var(--seam-lit);background:var(--panel);text-decoration:none}
.excard h2,.excard h3{
  margin:0;font-size:17px;line-height:1.3;font-weight:600;color:var(--ink);
}
.excard p{
  margin:8px 0 0;font-size:14px;line-height:1.55;color:var(--ink-2);
}
.excard__go{
  display:inline-block;margin-top:14px;
  font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:var(--track-micro);text-transform:uppercase;
  color:var(--scout);
}

/* ═══════════════════════════════════════════════════════════════
   CATEGORY
   ═══════════════════════════════════════════════════════════════ */
.excat__head{margin-bottom:34px}
.excount{
  display:inline-block;margin-top:16px;
  font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:var(--track-micro);text-transform:uppercase;
  color:var(--ink-3);
}

.exsub{margin:0 0 38px}
.exsub__h{
  display:flex;align-items:baseline;gap:10px;
  margin:0 0 14px;padding-bottom:10px;
  border-bottom:1px solid var(--seam);
  font-size:15px;font-weight:600;letter-spacing:.01em;color:var(--ink);
}
.exsub__h span{
  font-family:var(--mono);font-size:var(--t-micro);color:var(--ink-3);
}

.exlist{list-style:none;margin:0;padding:0}
.exlist li+li{border-top:1px solid var(--seam)}
.exlist a{
  display:block;padding:15px 0;color:inherit;
}
.exlist a:hover{text-decoration:none}
.exlist a:hover .exlist__t{color:var(--scout)}
.exlist__t{
  display:block;font-size:16px;font-weight:500;line-height:1.4;color:var(--ink);
}
.exlist__x{
  display:block;margin-top:5px;font-size:14px;line-height:1.55;color:var(--ink-2);
}
.exlist__m{
  display:block;margin-top:7px;
  font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--ink-3);
}

/* ═══════════════════════════════════════════════════════════════
   ARTICLE
   ═══════════════════════════════════════════════════════════════ */
.exart__head{
  padding-bottom:24px;margin-bottom:32px;
  border-bottom:1px solid var(--seam);
}
.exart__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;
  margin-top:20px;
  font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:var(--track-micro);text-transform:uppercase;
  color:var(--ink-3);
}
.exlangs{display:flex;flex-wrap:wrap;gap:8px}
.exlangs a{color:var(--ink-2)}

/* ── the body: editorial HTML we do not control tag by tag ──────
   ⚠ EVERY RULE HERE IS SELECTED BY TAG, NOT BY CLASS. The markup
   comes out of the database and carries no classes. Anything that
   depends on one silently stops applying the day the content
   pipeline changes its output. */
.exbody{font-size:17px;line-height:1.75;color:var(--ink)}

.exbody > *:first-child{margin-top:0}

.exbody p{margin:0 0 22px}

.exbody h2{
  margin:44px 0 14px;
  font-size:26px;line-height:1.25;letter-spacing:-.01em;font-weight:600;
  color:var(--ink);
}
.exbody h3{
  margin:32px 0 10px;
  font-size:20px;line-height:1.3;font-weight:600;color:var(--ink);
}
.exbody h4{margin:26px 0 8px;font-size:17px;font-weight:600;color:var(--ink)}

.exbody ul,.exbody ol{margin:0 0 22px;padding-left:24px}
.exbody li{margin:0 0 9px}
.exbody li::marker{color:var(--ink-3)}

.exbody a{text-decoration:underline;text-underline-offset:2px;
          text-decoration-color:rgba(91,143,249,.45)}
.exbody a:hover{text-decoration-color:var(--scout)}

.exbody strong{color:#fff;font-weight:600}

.exbody blockquote{
  margin:26px 0;padding:2px 0 2px 20px;
  border-left:2px solid var(--scout);
  color:var(--ink-2);font-style:italic;
}

.exbody code{
  font-family:var(--mono);font-size:.9em;
  background:var(--raise);border:1px solid var(--seam);
  border-radius:var(--r-sm);padding:1px 6px;
}
.exbody pre{
  margin:26px 0;padding:16px;overflow-x:auto;
  background:var(--raise);border:1px solid var(--seam);border-radius:var(--r);
}
.exbody pre code{background:none;border:0;padding:0}

.exbody img{border-radius:var(--r);margin:26px 0;display:block}

.exbody hr{border:0;border-top:1px solid var(--seam);margin:36px 0}

/* ⚠ A TABLE MUST SCROLL INSIDE ITSELF, NOT WIDEN THE PAGE. Rate
   and slab tables are common in this content and several are wider
   than a phone; without this the whole document scrolls sideways. */
.exbody table{
  display:block;width:100%;overflow-x:auto;
  border-collapse:collapse;margin:26px 0;font-size:15px;
}
.exbody th,.exbody td{
  border:1px solid var(--seam);padding:9px 12px;text-align:left;
  vertical-align:top;
}
.exbody th{background:var(--raise);font-weight:600;white-space:nowrap}

/* ── FAQ ────────────────────────────────────────────────────── */
.exfaq{margin-top:52px;padding-top:32px;border-top:1px solid var(--seam)}
.exfaq h2{margin:0 0 20px;font-size:22px;font-weight:600}
.exfaq dl{margin:0}
.exfaq__item{
  padding:18px 0;border-bottom:1px solid var(--seam);
}
.exfaq__item:first-child{border-top:1px solid var(--seam)}
.exfaq dt{font-weight:600;color:var(--ink);margin-bottom:7px}
.exfaq dd{margin:0;color:var(--ink-2)}

/* ── related ────────────────────────────────────────────────── */
.exrel{margin-top:52px;padding-top:32px;border-top:1px solid var(--seam)}
.exrel h2{margin:0 0 18px;font-size:22px;font-weight:600}
.exrel__cards{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;
}
.excard--sm{padding:16px;border-radius:var(--r)}
.excard--sm h3{font-size:15px}
.excard--sm .excard__go{margin-top:10px;color:var(--ink-3)}

.exback{margin:44px 0 0;font-size:15px}

/* ═══════════════════════════════════════════════════════════════
   404
   ═══════════════════════════════════════════════════════════════ */
.ex404{padding:48px 0;text-align:center}
.ex404__code{
  display:block;font-family:var(--display);
  font-size:96px;line-height:1;color:var(--ink-3);margin-bottom:10px;
}
.ex404 .lede{margin-left:auto;margin-right:auto;max-width:44ch}

/* ═══════════════════════════════════════════════════════════════
   FOOT
   ═══════════════════════════════════════════════════════════════ */
.exfoot{
  border-top:1px solid var(--seam);
  background:var(--raise);
  padding:36px var(--gutter);
}
.exfoot__in{max-width:var(--measure);margin:0 auto}
.exfoot__brand img{display:block;width:118px;height:auto;opacity:.85}
.exfoot__note{
  margin:16px 0 0;max-width:52ch;
  font-size:14px;line-height:1.6;color:var(--ink-3);
}
.exfoot__links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:18px}
.exfoot__links a{font-size:14px;color:var(--ink-2)}
.exfoot__links a:hover{color:var(--ink)}

/* ═══════════════════════════════════════════════════════════════
   TOUCH / NARROW
   ⚠ SAME QUERY app.css USES — (hover:none) OR narrow, never width
   alone. A tablet passes a width-only test and still has fingers.
   ═══════════════════════════════════════════════════════════════ */
@media (hover:none),(max-width:899px){
  .exbar__nav a{min-height:44px}
  .exlist a{padding:14px 0;min-height:44px}
  .exfoot__links a{min-height:44px;display:inline-flex;align-items:center}
  .excrumb a{min-height:32px;display:inline-flex;align-items:center}
}

@media (max-width:640px){
  body{font-size:16px}
  .exmain{padding:28px var(--gutter) 56px}
  .exbody{font-size:16px}
  .exbody h2{font-size:22px;margin-top:36px}
  .exbody h3{font-size:18px}
  .lede{font-size:17px}
  .exbar{padding:11px var(--gutter)}
  .exbar__brand img{width:112px}
  .exbar__nav a{padding:9px 11px;font-size:13px}
  .ex404__code{font-size:72px}
  /* The hub grid stops breaking out and simply fills the column. */
  .exgrid{width:100%;left:auto;transform:none}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}