/* Foundific — design tokens (C4, D-022 / D-032)
   Layout: a quiet reading column (68ch) for guides, a wider 1100px frame for the home grid.
   Colour: cool paper, deep ink, one teal accent for actions, one brass accent for the figures. */
:root {
  --paper: #ffffff;
  --paper-2: #f6f7f9;
  --ink: #0e1424;
  --ink-2: #2f3747;
  --ink-3: #5a6373;
  --line: #e5e8ee;
  --teal: #2443c4;
  --pill-fg: #1d379f;
  --teal-soft: #e9edfb;
  --brass: #0e1424;
  --brass-soft: #eef0f5;
  --card: #ffffff;
  --display: "Outfit", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --body: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f171d; --paper-2: #16222a; --ink: #eef3f6; --ink-2: #cdd8de; --ink-3: #a3b3bd;
    --line: #28363f; --teal: #8ea2ff; --pill-fg: #b4c1ff; --teal-soft: #1a2350; --brass: #a9c0e8; --brass-soft: #1b2a44; --card: #141f27;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0f171d; --paper-2: #16222a; --ink: #eef3f6; --ink-2: #cdd8de; --ink-3: #a3b3bd;
  --line: #28363f; --teal: #8ea2ff; --pill-fg: #b4c1ff; --teal-soft: #1a2350; --brass: #a9c0e8; --brass-soft: #1b2a44; --card: #141f27;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--body); font-size: 1rem; line-height: 1.7; font-feature-settings: "cv11", "ss01"; letter-spacing: -.003em;
  font-feature-settings: "kern", "liga";
}
img { max-width: 100%; }
a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); }
h2 { font-size: clamp(1.45rem, 2.6vw, 1.9rem); }
h3 { font-size: 1.15rem; }
p { margin: 0; }
.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.eyebrow { font-family: var(--display); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Header */
:root { --head-bg: #2443c4; --head-bg-2: #2443c4; --head-fg: #ffffff; --head-fg-2: rgba(255,255,255,.82); --head-line: rgba(255,255,255,.2); }
.site-head { background: var(--head-bg); color: var(--head-fg); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; }
.head-row { display: flex; align-items: center; gap: 1.5rem; padding-block: .6rem; min-height: 60px; }
.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--head-fg); font-family: var(--display); font-weight: 600; font-size: 1.15rem; letter-spacing: -.02em; flex: none; }
.brand .mark { width: 28px; height: 28px; border-radius: 7px; background: #fff; display: grid; place-items: center; flex: none; }
.brand .mark i { width: 9px; height: 9px; border-radius: 50%; background: #2443c4; box-shadow: 6px -5px 0 -2px #e4572e; }
.mainnav { flex: 1; }
.menu { list-style: none; margin: 0; padding: 0; display: flex; gap: .15rem; }
.menu-btn { appearance: none; background: none; border: 0; font: inherit; font-family: var(--display); font-weight: 500; font-size: .95rem; color: var(--head-fg-2); padding: .55rem .8rem; border-radius: 8px; display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; text-decoration: none; }
.menu-btn:hover, .menu-btn[aria-expanded="true"] { color: #fff; background: rgba(255,255,255,.12); }
.menu-btn[data-current] { color: #fff; }
.menu-btn .chev { width: 16px; height: 16px; transition: transform .15s; }
.menu-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.soon { color: var(--head-fg-2); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--head-line); border-radius: 999px; padding: .05rem .4rem; }
.head-actions { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.search-trigger { appearance: none; display: inline-flex; align-items: center; gap: .55rem; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); color: #fff; border-radius: 10px; padding: .5rem .7rem; font: inherit; font-family: var(--display); font-size: .9rem; cursor: pointer; min-width: 15rem; }
.search-trigger:hover { background: rgba(255,255,255,.22); }
.search-trigger .ico { width: 18px; height: 18px; }
.search-trigger .st-label { color: var(--head-fg-2); flex: 1; text-align: left; }
.search-trigger kbd { font-family: var(--mono); font-size: .72rem; background: rgba(255,255,255,.16); border-radius: 5px; padding: .1rem .35rem; color: #fff; }
.cc-switch { display: inline-flex; background: rgba(0,0,0,.18); border-radius: 9px; padding: 3px; }
.cc-switch a { color: var(--head-fg-2); text-decoration: none; font-family: var(--display); font-weight: 600; font-size: .8rem; padding: .3rem .55rem; border-radius: 7px; letter-spacing: .04em; }
.cc-switch a[aria-current] { background: #fff; color: var(--head-bg); }
.menu-toggle { display: none; appearance: none; background: rgba(255,255,255,.14); border: 0; color: #fff; border-radius: 9px; padding: .45rem; cursor: pointer; }
.menu-toggle .ico, .drawer-close .ico { width: 22px; height: 22px; }
.site-head a:focus-visible, .site-head button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Mega menu */
.has-mega { position: static; }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--card); color: var(--ink); border-bottom: 1px solid var(--line); box-shadow: 0 24px 48px rgba(11, 29, 69, .14); }
.mega-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); gap: 2.5rem; padding-block: 1.8rem 2rem; }
.mega-inner.mega-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 760px; }
.mega-h { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 .6rem; }
.mega-col .mega-h:not(:first-child) { margin-top: 1.3rem; }
.ml { display: block; text-decoration: none; color: var(--ink); padding: .45rem .6rem; margin-inline: -.6rem; border-radius: 8px; }
.ml b { display: block; font-family: var(--display); font-weight: 600; font-size: .95rem; }
.ml span { display: block; font-family: var(--display); font-size: .8rem; color: var(--ink-3); }
.ml:hover { background: var(--paper-2); }
.ml:hover b { color: var(--teal); }
.mega-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1rem .8rem; }
.mf { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink); font-family: var(--display); font-size: .9rem; padding: .4rem .5rem; margin-inline: -.5rem; border-radius: 8px; }
.mf .ico { width: 18px; height: 18px; color: var(--teal); }
.mf span { flex: 1; }
.mf em { font-style: normal; font-family: var(--mono); font-size: .75rem; color: var(--ink-3); }
.mf:hover { background: var(--paper-2); }
.mg { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .8rem; text-decoration: none; color: var(--ink); padding: .55rem .6rem; margin-inline: -.6rem; border-radius: 8px; }
.mg .rb { grid-column: 1 / -1; }
.mg-t { font-family: var(--display); font-weight: 600; font-size: .92rem; }
.mg-v { font-family: var(--mono); font-size: .9rem; }
.mg:hover { background: var(--paper-2); }
.mega-all { display: inline-flex; align-items: center; gap: .3rem; margin-top: .9rem; font-family: var(--display); font-weight: 600; font-size: .9rem; color: var(--teal); text-decoration: none; }
.mega-all .ico { width: 16px; height: 16px; }
.mega-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.mega-list li { display: flex; justify-content: space-between; gap: 1rem; font-family: var(--display); font-size: .9rem; padding: .35rem 0; border-bottom: 1px solid var(--line); }
.mega-list b { font-family: var(--mono); font-weight: 500; }
.mega-tools { display: grid; gap: .6rem; }
.mt { display: flex; gap: .7rem; align-items: flex-start; color: var(--ink-3); font-family: var(--display); }
.mt .ico { width: 20px; height: 20px; margin-top: .1rem; }
.mt b { display: block; color: var(--ink-2); font-weight: 600; font-size: .92rem; }
.mt span span { font-size: .8rem; }

/* Drawer (mobile) */
.drawer { position: fixed; inset: 0; z-index: 60; background: rgba(11, 29, 69, .45); }
.drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 92vw); background: var(--paper); overflow-y: auto; padding: 1rem max(1.2rem, env(safe-area-inset-right, 0px)) 2rem 1.2rem; display: flex; flex-direction: column; gap: 1rem; }
.drawer-top { display: flex; justify-content: space-between; align-items: center; }
.drawer-top .brand { color: var(--ink); }
.drawer-top .brand .mark { background: var(--head-bg-2); color: #fff; }
.drawer-close { appearance: none; background: var(--paper-2); border: 0; border-radius: 9px; padding: .45rem; cursor: pointer; color: var(--ink); }
.drawer .search-trigger.wide { width: 100%; background: var(--paper-2); border-color: var(--line); color: var(--ink); }
.drawer .search-trigger.wide .st-label { color: var(--ink-3); }
.drawer details { border-bottom: 1px solid var(--line); padding: .7rem 0; }
.drawer summary { font-family: var(--display); font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.drawer summary::after { content: "+"; color: var(--teal); }
.drawer details[open] summary::after { content: "–"; }
.drawer ul { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .1rem; }
.drawer li a { display: block; padding: .45rem 0; color: var(--ink-2); text-decoration: none; font-family: var(--display); }
html.lock, html.lock body { overflow: hidden; }

/* Search palette */
.palette { position: fixed; inset: 0; z-index: 70; background: rgba(11, 29, 69, .5); display: flex; justify-content: center; align-items: flex-start; padding: 10vh max(16px, env(safe-area-inset-right, 0px)) 2rem max(16px, env(safe-area-inset-left, 0px)); }
.palette[hidden] { display: none; }
.palette-panel { width: min(680px, 100%); background: var(--card); border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.3); overflow: hidden; display: flex; flex-direction: column; max-height: 78vh; }
.palette-field { display: flex; align-items: center; gap: .7rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); }
.palette-field .ico { width: 20px; height: 20px; color: var(--ink-3); }
.palette-field input { flex: 1; border: 0; outline: 0; font: inherit; font-family: var(--display); font-size: 1.1rem; background: transparent; color: var(--ink); min-width: 0; }
.palette-field .esc { appearance: none; border: 1px solid var(--line); background: var(--paper-2); border-radius: 6px; font-family: var(--mono); font-size: .72rem; padding: .2rem .45rem; color: var(--ink-3); cursor: pointer; }
.palette-results { overflow-y: auto; padding: .4rem .5rem .8rem; }
.palette-foot { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; padding: .6rem 1.1rem; border-top: 1px solid var(--line); font-family: var(--display); font-size: .75rem; color: var(--ink-3); }
.palette-foot kbd, .r-none kbd { font-family: var(--mono); font-size: .7rem; border: 1px solid var(--line); border-radius: 4px; padding: 0 .3rem; margin-right: .15rem; }
.r-h { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding: .8rem .6rem .3rem; }
.r, .wr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 160px) auto; gap: 1rem; align-items: center; text-decoration: none; color: var(--ink); padding: .55rem .6rem; border-radius: 9px; }
.r.r-link { grid-template-columns: 4.2rem minmax(0, 1fr); }
.r:hover, .r.on { background: var(--teal-soft); }
.r-t { font-family: var(--display); font-weight: 500; font-size: .95rem; min-width: 0; }
.r-t small { display: block; font-size: .78rem; color: var(--ink-3); font-weight: 400; }
.r-t small b { color: var(--teal); font-weight: 600; }
.r-v { font-family: var(--mono); font-size: .95rem; text-align: right; white-space: nowrap; }
.r-v small { display: block; font-family: var(--display); font-size: .7rem; color: var(--ink-3); }
.r-kind { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--teal); background: var(--teal-soft); border-radius: 5px; padding: .15rem .35rem; text-align: center; }
.r-none { padding: 1rem .6rem; color: var(--ink-2); font-family: var(--display); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Range bar: the signature element (D-019) */
.rb { position: relative; display: block; height: 10px; border-radius: 5px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); min-width: 60px; }
.rb::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--lo); width: calc(var(--hi) - var(--lo)); min-width: 3px; background: color-mix(in srgb, var(--teal) 32%, transparent); border-radius: 5px; }
.rb i { position: absolute; top: -3px; bottom: -3px; left: var(--mid); width: 3px; margin-left: -1.5px; background: var(--teal); border-radius: 2px; }
.rb-empty { box-shadow: inset 0 0 0 1px var(--line); background: repeating-linear-gradient(45deg, transparent 0 4px, var(--line) 4px 5px); }
.rb-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.2rem; font-family: var(--display); font-size: .78rem; color: var(--ink-3); }
.rb-legend .sw { display: inline-block; width: 26px; height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--teal) 32%, transparent); vertical-align: -1px; margin-right: .35rem; }
.rb-legend .tk { display: inline-block; width: 3px; height: 14px; background: var(--teal); border-radius: 2px; vertical-align: -3px; margin-right: .4rem; }
tr:target { background: var(--teal-soft); }
tr:target td { animation: flash 1.6s ease-out; }
@keyframes flash { from { background: color-mix(in srgb, var(--teal) 25%, transparent); } to { background: transparent; } }

@media (max-width: 1100px) { .search-trigger { min-width: 0; } .search-trigger .st-label, .search-trigger kbd { display: none; } }
@media (max-width: 900px) {
  .mainnav { display: none; }
  .menu-toggle { display: inline-flex; }
  .head-row { gap: .8rem; }
}

/* Footer */
.site-foot { border-top: 1px solid var(--line); margin-top: 5rem; color: var(--ink-3); font-size: .9rem; font-family: var(--display); }
.site-foot .wrap { padding-block: 2rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }

/* Buttons & pills */
.btn { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--display); font-weight: 600; font-size: .95rem; padding: .7rem 1.15rem; border-radius: 999px; text-decoration: none; border: 1px solid transparent; }
.btn-primary { background: var(--head-bg-2); color: #fff; }
.btn-ghost { border-color: var(--line); color: var(--ink); background: var(--card); }
.pill { display: inline-block; font-family: var(--display); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: .22rem .6rem; border-radius: 999px; background: var(--teal-soft); color: var(--pill-fg); }
.pill.my { background: var(--brass-soft); color: var(--brass); }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { padding: .7rem .9rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
th { font-family: var(--display); font-weight: 600; font-size: .8rem; letter-spacing: .04em; color: var(--ink-2); background: var(--paper-2); }
td.n, th.n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
th.n { font-family: var(--display); }
tbody tr:last-child td { border-bottom: 0; }
td strong { color: var(--ink); }
.src { font-family: var(--display); font-size: .82rem; color: var(--ink-3); margin-top: .6rem; }

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

/* Pillar pages */
.page-head { padding-block: 3rem 2.5rem; border-bottom: 1px solid var(--line); }
.page-head h1 { margin-top: 1rem; max-width: 22ch; }
.page-head .standfirst { margin-top: 1.2rem; font-size: 1.2rem; color: var(--ink-2); max-width: 34em; }
.dateline { margin-top: 1.4rem; font-family: var(--display); font-size: .85rem; color: var(--ink-3); display: flex; gap: 1.2rem; flex-wrap: wrap; }
.crumbs { font-family: var(--display); font-size: .85rem; color: var(--ink-3); display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--teal); }
.keys { margin-top: 2rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.key { background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px rgba(15,31,42,.04); padding: 1.1rem 1.2rem; min-width: 0; }
.key .v { font-family: var(--mono); font-size: 1.7rem; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.key .v.brass { color: var(--brass); }
.key .l { font-family: var(--display); font-size: .88rem; color: var(--ink-2); margin-top: .25rem; }
.key .s { font-family: var(--display); font-size: .76rem; color: var(--ink-3); margin-top: .5rem; }
.layout { display: grid; grid-template-columns: minmax(0, 68ch) minmax(0, 1fr); gap: 4rem; padding-block: 3rem; }
.layout.wide { grid-template-columns: minmax(0, 1fr) 220px; }
.toc { position: sticky; top: 5.5rem; align-self: start; font-family: var(--display); font-size: .9rem; min-width: 0; }
.toc .eyebrow { margin-bottom: .8rem; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.toc li a { display: block; padding: .35rem 0 .35rem 1rem; color: var(--ink-2); text-decoration: none; border-left: 2px solid transparent; margin-left: -1px; }
.toc li a:hover { color: var(--teal); border-left-color: var(--teal); }
article { min-width: 0; }
article > * + * { margin-top: 1.3rem; }
article h2 { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
article h2 + p { margin-top: 1rem; }
article h3 { margin-top: 1.8rem; }
article .table-wrap { margin-top: 1.4rem; }
article .src + p { margin-top: 1.4rem; }
.callout { border-left: 3px solid var(--brass); background: var(--brass-soft); padding: 1rem 1.2rem; border-radius: 0 10px 10px 0; font-size: .98rem; }
.callout strong { font-family: var(--display); }
.note { border-left: 3px solid var(--teal); background: var(--teal-soft); padding: 1rem 1.2rem; border-radius: 0 10px 10px 0; font-size: .98rem; }
.defs { display: grid; gap: 0; margin-top: 1.4rem; }
.def { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 1rem; padding: .9rem 0; border-top: 1px solid var(--line); font-size: .98rem; }
.def:last-child { border-bottom: 1px solid var(--line); }
.def dt { font-family: var(--display); font-weight: 600; margin: 0; }
.def dd { margin: 0; color: var(--ink-2); }
.who { display: grid; gap: 1rem; margin-top: 1.4rem; }
.who div { background: var(--paper-2); border-radius: 10px; padding: 1rem 1.2rem; }
.who h3 { font-size: 1rem; color: var(--ink); margin: 0 0 .35rem; }
.who p { font-size: .98rem; }
.sources { font-size: .95rem; }
.sources ol { padding-left: 1.3rem; margin: 1rem 0 0; }
.sources li + li { margin-top: .8rem; }
.sources code { font-family: var(--mono); font-size: .85em; background: var(--paper-2); padding: .05rem .35rem; border-radius: 4px; }
.bounds ul, .notes-list { padding-left: 1.2rem; margin: 1rem 0 0; font-size: .98rem; color: var(--ink-2); }
.bounds li + li, .notes-list li + li { margin-top: .5rem; }
figure { margin: 1.4rem 0 0; }
figcaption { font-family: var(--display); font-size: .82rem; color: var(--ink-3); margin-top: .6rem; }
.chart { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 1.2rem 1.2rem 1rem; }
.chart svg { width: 100%; height: auto; display: block; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.chart text { fill: var(--ink-2); font-size: 12px; }
.chart text.val { fill: var(--ink); font-size: 12.5px; font-weight: 500; }
.chart text.grp { font-family: var(--display); fill: var(--ink-2); font-size: 13px; }
.chart line.grid { stroke: var(--line); stroke-width: 1; }
.chart .b1 { fill: var(--teal); }
.chart .b2 { fill: var(--brass); }
.chart .ln { fill: none; stroke: var(--teal); stroke-width: 2.5; stroke-linejoin: round; }
.chart .dot { fill: var(--teal); }
.chart .dot.end { fill: var(--brass); }

/* Occupation explorer */
.explorer { margin-top: 1.4rem; }
.explorer .controls { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .6rem; margin-bottom: .8rem; }
.explorer input, .explorer select { font: inherit; font-family: var(--display); font-size: .95rem; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); min-width: 0; }
.explorer input:focus, .explorer select:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.explorer .count { font-family: var(--display); font-size: .82rem; color: var(--ink-3); margin: .4rem 0 .6rem; }
.explorer th button { font: inherit; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; font-weight: 600; letter-spacing: .04em; }
.explorer th button[aria-sort="descending"]::after { content: " ↓"; }
.explorer th button[aria-sort="ascending"]::after { content: " ↑"; }
.explorer td.occ { min-width: 16rem; }
.explorer td .grp { display: block; font-family: var(--display); font-size: .74rem; color: var(--ink-3); margin-top: .15rem; }
.explorer .bar { height: 4px; background: var(--paper-2); border-radius: 2px; margin-top: .4rem; overflow: hidden; }
.explorer .bar i { display: block; height: 100%; background: var(--teal); }
.explorer .more { margin-top: .8rem; }
.btn-sm { padding: .45rem .9rem; font-size: .85rem; }
.quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .7rem; margin-top: 1.4rem; }
.quick a, .quick div { display: flex; flex-direction: column; gap: .15rem; padding: .8rem .95rem; background: var(--card); border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: inherit; min-width: 0; }
.quick a:hover { border-color: var(--teal); }
.quick .t { font-family: var(--display); font-size: .88rem; font-weight: 600; }
.quick .v { font-family: var(--mono); font-size: 1.15rem; }
.quick .s { font-family: var(--display); font-size: .74rem; color: var(--ink-3); }
.related { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.related a { display: block; padding: 1rem 1.1rem; background: var(--card); border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: inherit; }
.related a:hover { border-color: var(--teal); }
.related .t { font-family: var(--display); font-weight: 600; display: block; margin-top: .3rem; }
.related .s { font-family: var(--display); font-size: .8rem; color: var(--ink-3); display: block; margin-top: .3rem; }
.faq details { border-top: 1px solid var(--line); padding: .9rem 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { font-family: var(--display); font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::after { content: "+"; color: var(--teal); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: .6rem; color: var(--ink-2); font-size: .98rem; }

@media (max-width: 900px) {
  .layout, .layout.wide { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .toc { position: static; }
  .keys { grid-template-columns: minmax(0, 1fr); }
  .key .v { font-size: 1.45rem; }
  .def { grid-template-columns: 1fr; gap: .3rem; }
  .explorer .controls { grid-template-columns: 1fr; }
}

/* Icons */
.ico { width: 22px; height: 22px; fill: currentColor; stroke: none; flex: none; }
.ico-wrap { display: inline-flex; flex: none; color: var(--teal); padding-top: .1rem; }
.ico-wrap .ico { width: 28px; height: 28px; }

/* Tiles: boxes of things to pick from */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .9rem; margin-top: 1.4rem; }
.tile { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.05rem; background: var(--card); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: inherit; min-width: 0; transition: border-color .15s, box-shadow .15s; }
.tile:hover { border-color: var(--teal); box-shadow: 0 4px 16px rgba(31,94,255,.08); }
.tile .t { font-family: var(--display); font-weight: 600; font-size: .98rem; display: block; }
.tile .s { font-family: var(--display); font-size: .8rem; color: var(--ink-3); display: block; margin-top: .2rem; }
.tile .n { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin-top: .55rem; font-family: var(--display); font-size: .8rem; color: var(--ink-2); }
.tile .n b { font-family: var(--mono); font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.tile { position: relative; padding-right: 2.4rem; }
.tile .go { position: absolute; right: .9rem; top: 1.05rem; color: var(--teal); }
.tile .go .ico { width: 18px; height: 18px; }
.tile.muted { border-style: dashed; background: transparent; }
.tile.muted .ico-wrap { color: var(--ink-3); }

/* Rows: compact selectable list */
.rows { margin-top: 1.4rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden; }
.row-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: .85rem 1.05rem; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.row-item:first-child { border-top: 0; }
.row-item:hover { background: var(--paper-2); }
.row-item .t { display: block; font-family: var(--display); font-weight: 600; font-size: .95rem; }
.row-item .s { display: block; font-family: var(--display); font-size: .8rem; color: var(--ink-3); margin-top: .1rem; }
.row-item .v { font-family: var(--mono); font-size: 1.05rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.row-item .v small { display: block; font-family: var(--display); font-size: .72rem; color: var(--ink-3); text-align: right; }
.row-item .ico-wrap { padding-top: 0; }
.row-item .ico-wrap .ico { width: 22px; height: 22px; }


/* Country boxes */
.countries-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.country { display: block; padding: 1.3rem 1.4rem; background: var(--card); border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: inherit; min-width: 0; }
.country:hover { border-color: var(--teal); }
.country .head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.country h3 { font-size: 1.25rem; }
.country .fig { font-family: var(--mono); font-size: 1.6rem; margin-top: .6rem; font-variant-numeric: tabular-nums; }
.country .fig small { display: block; font-family: var(--display); font-size: .78rem; color: var(--ink-3); margin-top: .2rem; }
.country ul { margin: .9rem 0 0; padding: 0; list-style: none; display: grid; gap: .3rem; font-family: var(--display); font-size: .88rem; color: var(--ink-2); }
.country li::before { content: "›"; color: var(--teal); margin-right: .4rem; }
@media (max-width: 640px) { .countries-grid { grid-template-columns: 1fr; } }

/* Section intro on hubs */
.section-intro { padding-block: 2.5rem 1rem; }
.section-intro p { color: var(--ink-2); max-width: 44em; margin-top: .4rem; }
.soon-banner { margin-top: 1.4rem; padding: 1rem 1.2rem; border: 1px dashed var(--line); border-radius: 12px; font-family: var(--display); font-size: .92rem; color: var(--ink-2); background: var(--paper-2); }



.skip { position: absolute; left: -999px; top: 8px; background: var(--teal); color: #fff; padding: .5rem .9rem; border-radius: 8px; z-index: 50; font-family: var(--display); font-weight: 600; }
.skip:focus { left: 8px; }
main:focus { outline: none; }
@media print { .site-head, .site-footer, .toc, .skip { display: none !important; } body { background: #fff; color: #000; } a { color: inherit; text-decoration: none; } }

/* ---------- Footer ---------- */
.site-footer { margin-top: 5rem; background: #0e1424; color: #c9d5ee; font-family: var(--display); }
.site-footer .wrap { padding-block: 3rem 0; }
.site-footer .cols { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.site-footer .about p { font-size: .92rem; line-height: 1.6; margin-top: .8rem; max-width: 30em; color: #c9d5ee; }
.site-footer .brand { color: #fff; }
.site-footer .brand .mark { background: #fff; }
.site-footer .badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.site-footer .badges span { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; padding: .25rem .6rem; border-radius: 999px; background: rgba(255,255,255,.08); color: #e6ecf8; }
.site-footer h2 { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #8fa3cc; font-weight: 600; margin: 0 0 .9rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.site-footer a { color: #e6ecf8; text-decoration: none; font-size: .92rem; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer .bottom { margin-top: 2.5rem; border-top: 1px solid rgba(255,255,255,.12); padding-block: 1.2rem 1.6rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem; font-size: .82rem; color: #8fa3cc; }
.site-footer a:focus-visible { outline-color: #fff; }
@media (max-width: 860px) { .site-footer .cols { grid-template-columns: 1fr 1fr; } .site-footer .about { grid-column: 1 / -1; } }
@media (max-width: 480px) { .site-footer .cols { grid-template-columns: 1fr; } }

/* ---------- Guide format v2: scannable ---------- */
article { color: var(--ink); }
article p { max-width: 78ch; }
article h2 { margin-top: 2.6rem; padding-top: 1.4rem; font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
article h2 + p.lead, article h2 + .lead { margin-top: .6rem; }
.lead { color: var(--ink-2); font-size: 1rem; }
.glance { background: var(--teal-soft); border-radius: 14px; padding: 1.3rem 1.5rem 1.2rem; }
.glance h2 { border: 0; margin: 0 0 .7rem; padding: 0; font-size: 1.05rem; letter-spacing: .02em; }
.glance ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.glance li { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr); gap: .5rem; line-height: 1.5; }
.glance li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); margin-top: .55rem; justify-self: center; }
.points { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.points li { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: .45rem; line-height: 1.55; }
.points li::before { content: "→"; color: var(--teal); font-weight: 600; }
.points strong, .glance strong { font-weight: 600; }
.kicker { font-family: var(--display); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); margin-top: 1.2rem; }
article .kicker + .points { margin-top: .5rem; }
details.sources-box { border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1.1rem; }
details.sources-box summary { cursor: pointer; font-family: var(--display); font-weight: 600; }
details.sources-box[open] summary { margin-bottom: .6rem; }
table.compare td:first-child { font-family: var(--display); font-weight: 600; }
.related a .t { color: var(--ink); }

.src details.cells { display: inline; }
.src details.cells summary { display: inline; cursor: pointer; color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
.src details.cells[open] { display: block; margin-top: .3rem; word-break: break-word; }

[id] { scroll-margin-top: 84px; }

/* ---------- Homepage v3 ---------- */
.home-hero { position: relative; padding-block: 3.2rem 2.8rem; background:
   radial-gradient(1200px 380px at 15% -10%, color-mix(in srgb, var(--teal) 14%, transparent), transparent 70%),
   linear-gradient(var(--paper-2), var(--paper)); border-bottom: 1px solid var(--line); overflow: hidden; }
.home-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px; opacity: .35; mask-image: linear-gradient(to bottom, #000, transparent 75%); pointer-events: none; }
.home-hero .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3rem; align-items: start; }
.home-hero .wrap > * { min-width: 0; }
.mono-eyebrow { font-family: var(--mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); }
.home-hero h1 { margin-top: .9rem; font-size: clamp(2.1rem, 4.6vw, 3.4rem); letter-spacing: -.02em; }
.home-hero .lede { margin-top: 1rem; font-size: 1.1rem; color: var(--ink-2); max-width: 30em; }
.hero-points { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .5rem; font-family: var(--display); color: var(--ink-2); }
.hero-points li { display: flex; gap: .55rem; align-items: center; }
.hero-points .ico { width: 18px; height: 18px; color: var(--teal); }
.finder { background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 20px 50px rgba(11, 29, 69, .10); padding: 1.2rem 1.2rem 1rem; }
.finder label { font-family: var(--display); font-weight: 600; font-size: 1rem; }
.finder .field { position: relative; margin-top: .6rem; }
.finder .field .ico { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--ink-3); }
.finder input { width: 100%; font: inherit; font-family: var(--display); font-size: 1.05rem; padding: .85rem 1rem .85rem 2.7rem; border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); }
.finder input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 18%, transparent); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.chips button { appearance: none; border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); border-radius: 999px; padding: .3rem .75rem; font-family: var(--display); font-size: .82rem; cursor: pointer; }
.chips button:hover { border-color: var(--teal); color: var(--teal); }
.finder .res-label { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 1rem 0 .2rem; display: flex; justify-content: space-between; gap: 1rem; }
.finder .wr { padding: .6rem .5rem; margin-inline: -.5rem; border-top: 1px solid var(--line); border-radius: 0; }
.finder .wr:hover { background: var(--teal-soft); border-radius: 8px; }
.finder .finder-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; margin-top: .7rem; }
.finder .finder-foot a { font-family: var(--display); font-weight: 600; font-size: .88rem; color: var(--teal); text-decoration: none; }

.stats { border-bottom: 1px solid var(--line); }
.stats .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat { padding: 1.4rem 1.2rem 1.4rem 0; border-right: 1px solid var(--line); }
.stat + .stat { padding-left: 1.4rem; }
.stat:last-child { border-right: 0; }
.stat b { display: block; font-family: var(--mono); font-weight: 500; font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat span { display: block; font-family: var(--display); font-size: .85rem; color: var(--ink-2); margin-top: .2rem; }

.hsec { padding-block: 3.2rem; }
.hsec + .hsec { border-top: 1px solid var(--line); }
.hsec-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.hsec-head p { color: var(--ink-2); margin-top: .35rem; max-width: 44em; }
.hsec-head .more { font-family: var(--display); font-weight: 600; font-size: .9rem; color: var(--teal); text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.hsec-head .more .ico { width: 16px; height: 16px; }

.pb { border: 1px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden; }
.pb-head, .pb-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr) 6.5rem; gap: 1.4rem; align-items: center; padding: .75rem 1.1rem; }
.pb-head { background: var(--paper-2); font-family: var(--display); font-size: .78rem; font-weight: 600; color: var(--ink-2); }
.pb-head > span:last-child, .pb-v { text-align: right; }
.pb-axis { position: relative; display: block; height: 1em; }
.pb-axis span { position: absolute; transform: translateX(-50%); font-family: var(--mono); font-weight: 400; font-size: .72rem; color: var(--ink-3); }
.pb-axis span:first-child { transform: none; }
.pb-axis span:last-child { transform: translateX(-100%); }
.pb-row { border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.pb-row:hover { background: var(--teal-soft); }
.pb-t { font-family: var(--display); font-weight: 500; min-width: 0; }
.pb-t small { display: block; font-size: .78rem; color: var(--ink-3); font-weight: 400; }
.pb-t small b { color: var(--teal); font-weight: 600; }
.pb-v { font-family: var(--mono); font-size: 1rem; }

.split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.split > * { min-width: 0; }
.how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.how > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem; }
.how h3 { font-size: 1rem; margin-bottom: .3rem; }
.how p { color: var(--ink-2); font-size: .93rem; }
@media (max-width: 900px) {
  .home-hero .wrap, .split, .how { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .stats .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(3) { padding-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .pb-head, .pb-row { grid-template-columns: minmax(0, 1fr) 5.5rem; gap: .4rem 1rem; }
  .pb-row .rb, .pb-axis { grid-column: 1 / -1; grid-row: 2; }
  .pb-head .pb-axis { display: none; }
  .r, .wr { grid-template-columns: minmax(0, 1fr) auto; }
  .r .rb, .wr .rb { grid-column: 1 / -1; grid-row: 2; }
}

.occ-table td.occ .grp { display: block; font-family: var(--display); font-size: .74rem; color: var(--ink-3); margin-top: .15rem; }
.occ-table .rb-col { width: 34%; min-width: 160px; vertical-align: middle; }
.occ-table th.rb-col { padding-bottom: .9rem; }
@media (max-width: 700px) { .occ-table .rb-col { min-width: 120px; } }

/* ---------- Spacing fixes (v4) ---------- */
article > h2 + .points, article > h2 + .table-wrap, article > h2 + .src, article > h2 + figure { margin-top: 1rem; }
article > .table-wrap + .points, article > .src + .points, article > figure + .table-wrap { margin-top: 1.3rem; }
article > .points + .table-wrap { margin-top: 1.6rem; }
article .src { margin-top: .55rem; }

/* ---------- Glossary tooltips ---------- */
.term { border-bottom: 1px dotted currentColor; cursor: help; text-decoration: none; outline-offset: 2px; }
th .term { border-bottom-style: dotted; }
.term:focus-visible { outline: 2px solid var(--teal); border-radius: 2px; }
.tip { position: fixed; z-index: 90; max-width: 280px; background: #0e1424; color: #fff; font-family: var(--display); font-size: .8rem; line-height: 1.45; font-weight: 400; letter-spacing: 0; text-transform: none; padding: .55rem .7rem; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.25); pointer-events: none; }
.tip[hidden] { display: none; }

/* ---------- Guide hero v4 ---------- */
.article-head .head-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 3rem; align-items: center; }
.article-head .head-grid > * { min-width: 0; }
.article-head .head-grid h1 { max-width: none; }
.article-head .head-grid .standfirst { max-width: 36em; }
.hero-ladder { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 1rem 1.1rem .9rem; box-shadow: 0 1px 2px rgba(15,31,42,.04), 0 14px 34px -16px rgba(15,31,42,.18); }
.hl-h { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-family: var(--display); font-size: .8rem; color: var(--ink-3); margin-bottom: .4rem; }
.hl-h b { color: var(--ink); font-size: .92rem; font-weight: 600; }
.hl-row, .hl-axis { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.35fr) 4.6rem; gap: .9rem; align-items: center; }
.hl-row { padding: .55rem 0; border-top: 1px solid var(--line); }
.hl-t { font-family: var(--display); font-size: .88rem; font-weight: 500; line-height: 1.3; }
.hl-v { font-family: var(--mono); font-size: .92rem; text-align: right; }
.hl-axis { padding-top: .2rem; }
.hl-f { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .4rem 1rem; border-top: 1px solid var(--line); margin-top: .6rem; padding-top: .6rem; font-family: var(--display); font-size: .74rem; color: var(--ink-3); }
.article-head .keys { margin-top: 2.2rem; }
@media (max-width: 900px) { .article-head .head-grid { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; } }

/* A7 reliability chips */
.rel { display: inline-block; margin-left: .5rem; vertical-align: 1px; font-family: var(--display); font-size: .68rem; font-weight: 600; letter-spacing: .02em; border-radius: 999px; padding: .05rem .5rem; border: 1px solid var(--line); border-bottom-style: solid; white-space: nowrap; }
.rel-full { color: var(--ink-3); }
.rel-partial { color: var(--ink-2); background: var(--paper-2); }
.rel-limited { color: var(--ink); background: var(--paper-2); border-color: var(--ink-3); }

.tip .tip-fig { display: block; width: 100%; height: auto; margin: .15rem 0 .55rem; overflow: visible; }
.tip .tip-fig text { font-family: var(--display); font-size: 9.5px; fill: rgba(255,255,255,.78); }
.tip:has(.tip-fig) { max-width: 300px; width: 300px; padding: .7rem .8rem .65rem; }

/* history and projection (D-027) */
.spark { display: inline-block; vertical-align: middle; }
.spark path { fill: none; stroke: var(--teal); stroke-width: 1.8; stroke-linejoin: round; }
.spark circle { fill: var(--teal); }
.proj .table-wrap { border-style: dashed; }
.proj td.proj-bar { width: 22%; min-width: 120px; }
.proj tr.np td { color: var(--ink-3); }
.proj-badge { display: inline-block; font-family: var(--display); font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; border: 1px dashed var(--ink-3); color: var(--ink-2); border-radius: 999px; padding: .1rem .55rem; margin-left: .5rem; vertical-align: 3px; }

/* ---------- Readability v2 (D-028) ---------- */
/* answer first */
.takeaway { margin-top: .7rem; padding: .75rem 1rem; border-left: 3px solid var(--teal); background: var(--teal-soft); border-radius: 0 8px 8px 0; font-size: 1rem; line-height: 1.6; max-width: none; }
.takeaway b { font-weight: 600; }
article > h2 + .takeaway { margin-top: .8rem; }
article > .takeaway + .lead { margin-top: .9rem; }
/* parts and chips */
.part { font-family: var(--display); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); font-weight: 600; margin: 3rem 0 -.6rem; display: flex; align-items: center; gap: .6rem; }
.part::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.part + h2 { border-top: 0 !important; padding-top: .9rem !important; margin-top: 0 !important; }
.chips-nav { position: sticky; top: calc(60px + env(safe-area-inset-top, 0px)); z-index: 4; background: var(--paper); border-bottom: 1px solid var(--line); display: flex; gap: .4rem; overflow-x: auto; padding: .6rem 0; margin: 0 0 .4rem; scrollbar-width: none; }
.chips-nav::-webkit-scrollbar { display: none; }
.chips-nav a { flex: none; font-family: var(--display); font-size: .82rem; border: 1px solid var(--line); border-radius: 999px; padding: .25rem .75rem; color: var(--ink-2); text-decoration: none; background: var(--card); }
.chips-nav a:hover { border-color: var(--teal); color: var(--teal); }
.chips-nav a.on { background: var(--ink); color: #fff; border-color: var(--ink); }
/* tables: highlight, units, diff bars */
article table tr.focus { background: #f5f8ff; }
article table tr.focus td:first-child { font-weight: 600; box-shadow: inset 3px 0 0 var(--teal); }
article table.has-focus tbody tr:not(.focus) td { color: var(--ink-2); }
td.diff { white-space: nowrap; }
.dv { display: inline-block; position: relative; width: 52px; height: 8px; margin-left: .5rem; vertical-align: 0; background: var(--paper-2); border-radius: 4px; }
.dv::before { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--ink-3); }
.dv i { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.dv i.pos { background: var(--teal); } .dv i.neg { background: #e4572e; }
/* quieter sources */
article .src { position: relative; padding-left: 1.3rem; }
article .src::before { content: "i"; position: absolute; left: 0; top: .15rem; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--ink-3); display: grid; place-items: center; font-size: .6rem; font-style: italic; font-family: Georgia, serif; color: var(--ink-3); }
/* phone: tables become cards */
@media (max-width: 640px) {
  article table.cards thead { display: none; }
  article table.cards, article table.cards tbody, article table.cards tr, article table.cards td { display: block; width: 100%; }
  article table.cards tr { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem .9rem; padding: .8rem .95rem; border-top: 1px solid var(--line); }
  article table.cards tbody tr:first-child { border-top: 0; }
  article table.cards td { border: 0 !important; padding: .1rem 0 !important; text-align: left !important; white-space: normal; }
  article table.cards td:first-child { grid-column: 1 / -1; font-size: 1rem; margin-bottom: .25rem; }
  article table.cards td[colspan] { grid-column: 1 / -1; }
  article table.cards td[data-l]:not(:first-child)::before { content: attr(data-l); display: block; font-family: var(--display); font-size: .72rem; font-weight: 400; color: var(--ink-3); }
  article table.cards tr.focus td:first-child { box-shadow: none; }
  article table.cards tr.focus { box-shadow: inset 3px 0 0 var(--teal); }
  article .table-wrap:has(table.cards) { overflow: visible; }
  article table.cards td.proj-bar, article table.cards td.rb-col { grid-column: 1 / -1; }
  .chips-nav { top: calc(56px + env(safe-area-inset-top, 0px)); }
}
@media (max-width: 640px) {
  article figure .chart { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  article figure .chart svg { min-width: 520px; }
}

/* ---------- Guide hero v3 (D-029) ---------- */
.hero-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .9rem 0 0; }
.hchip { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--display); font-size: .8rem; font-weight: 500; color: var(--ink-2); border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: .2rem .65rem; text-decoration: none; }
.hchip .ico { width: 15px; height: 15px; color: var(--teal); }
a.hchip:hover { border-color: var(--teal); color: var(--teal); }
.hchip.field { background: var(--teal-soft); border-color: transparent; color: var(--pill-fg); font-weight: 600; }
.article-head .head-grid h1 { margin-top: .7rem; }
.article-head .standfirst.short { font-size: 1.15rem; margin-top: .8rem; }
.src-badges { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: 1.1rem; font-family: var(--display); font-size: .82rem; color: var(--ink-2); }
.src-badges span { display: inline-flex; align-items: center; gap: .35rem; }
.src-badges .ico { width: 15px; height: 15px; color: var(--ink-3); }
.lvl { display: block; font-style: normal; font-family: var(--display); font-size: .66rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .05rem; }
.qstrip { margin-top: 2rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden; }
.qa { padding: 1rem 1.1rem; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem .7rem; align-items: start; }
.qa + .qa { border-left: 1px solid var(--line); }
.qa .ico { width: 22px; height: 22px; color: var(--teal); grid-row: span 3; margin-top: .15rem; }
.qa .ql { font-family: var(--display); font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.qa .qv { font-family: var(--mono); font-size: 1.3rem; font-weight: 500; color: var(--ink); letter-spacing: -.01em; line-height: 1.3; }
.qa .qv.na { font-family: var(--display); font-size: 1rem; font-weight: 600; color: var(--ink-2); }
.qa .qn { font-family: var(--display); font-size: .8rem; color: var(--ink-2); line-height: 1.4; }
.qa .est { display: inline-block; font-family: var(--display); font-size: .62rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; border: 1px dashed var(--ink-3); border-radius: 999px; padding: 0 .4rem; margin-left: .3rem; vertical-align: 2px; color: var(--ink-2); }
@media (max-width: 900px) { .qstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qa:nth-child(3) { border-left: 0; } .qa:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 480px) { .qstrip { grid-template-columns: minmax(0, 1fr); } .qa + .qa { border-left: 0; border-top: 1px solid var(--line); } }
@media (max-width: 480px) {
  .hl-row { grid-template-columns: minmax(0, 1fr) auto; gap: .35rem .8rem; }
  .hl-row .rb { grid-column: 1 / -1; grid-row: 2; }
  .hl-h { flex-wrap: wrap; }
}

/* clickable hero (D-030) */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
[id] { scroll-margin-top: 128px; }
a.qa { text-decoration: none; color: inherit; transition: background .15s; }
a.qa:hover { background: var(--teal-soft); }
a.qa:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.qa .qgo { grid-column: 2; font-family: var(--display); font-size: .76rem; font-weight: 600; color: var(--teal); margin-top: .35rem; opacity: 0; transform: translateY(-2px); transition: opacity .15s, transform .15s; }
a.qa:hover .qgo, a.qa:focus-visible .qgo { opacity: 1; transform: none; }
@media (hover: none) { .qa .qgo { opacity: 1; transform: none; } }
a.hl-row { text-decoration: none; color: inherit; border-radius: 6px; margin-inline: -.4rem; padding-inline: .4rem; }
a.hl-row:hover { background: var(--paper-2); }
a.hl-row:hover .hl-t { color: var(--teal); }
a.hl-row:focus-visible { outline: 2px solid var(--teal); }

/* ---- D-031 AI exposure panel ---- */
.ai-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 1rem 0 1.6rem; }
.ai-role { border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; background: var(--card); min-width: 0; }
.ai-role-h { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; }
.ai-role-t { font-family: var(--display); font-weight: 600; font-size: .98rem; color: var(--ink); }
.ai-code { font-family: var(--mono); font-size: .68rem; color: var(--ink-3); white-space: nowrap; }
.ai-verdict { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin: .7rem 0 .6rem; }
.ai-word { font-family: var(--display); font-size: 1.45rem; font-weight: 600; color: var(--teal); letter-spacing: -.01em; }
.ai-word-s { font-family: var(--display); font-size: .84rem; color: var(--ink-3); }
.ai-scale { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.ai-scale li { font-family: var(--display); font-size: .66rem; color: var(--ink-3); text-align: center; padding-top: .4rem; border-top: 4px solid var(--line); line-height: 1.2; }
.ai-scale li.on { color: var(--ink); font-weight: 600; border-top-color: var(--teal); }
.ai-line { font-size: .86rem; color: var(--ink-2); margin: .8rem 0 0; line-height: 1.5; }
.ai-n { display: inline-block; font-family: var(--mono); font-size: .68rem; color: var(--teal); border: 1px solid var(--line); border-radius: 4px; padding: 0 .3rem; margin-right: .45rem; }
.ai-dim { color: var(--ink-3); font-size: .82em; }
.ai-facts td { vertical-align: top; }
.ai-facts td.ai-f { width: 44%; }
.ai-facts td.ai-f b { font-weight: 600; color: var(--ink); }
.ai-what { display: block; color: var(--ink-3); font-size: .8rem; line-height: 1.45; margin: .2rem 0 0 1.75rem; }
.ai-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: .6rem 0 1.6rem; }
.ai-col { border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1rem; min-width: 0; }
.ai-col-t { font-family: var(--display); font-weight: 600; font-size: .95rem; margin-bottom: .5rem; }
.ai-sub { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: .7rem 0 .3rem; }
.ai-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.ai-tasks li { display: grid; grid-template-columns: 2.8rem 1fr; gap: .5rem; font-size: .88rem; color: var(--ink-2); line-height: 1.45; }
.ai-sc { font-size: .8rem; text-align: right; color: var(--ink-3); padding-top: .05rem; }
.ai-tasks.hi .ai-sc { color: var(--teal); font-weight: 600; }
.ai-note { margin: .9rem 0 0; padding: .1rem 0 .1rem .75rem; border-left: 3px solid var(--line); font-size: .82rem; color: var(--ink-2); line-height: 1.5; }
.ai-bar { display: block; height: 6px; border-radius: 3px; background: var(--paper-2); overflow: hidden; min-width: 60px; }
.ai-bar i { display: block; height: 100%; background: var(--teal); border-radius: 3px; }
.ai-barcell { width: 26%; }
@media (max-width: 640px) { .ai-scale li { font-size: .58rem; } .ai-facts td.ai-f { width: auto; } .ai-what { margin-left: 0; } }

/* ---- D-033 hub links (country overview) ---- */
.hub-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 1rem 0 .5rem; }
.hub-links a { display: flex; flex-direction: column; gap: .15rem; border: 1px solid var(--line); border-radius: 10px; padding: .8rem .95rem; text-decoration: none; color: var(--ink); background: var(--card); transition: border-color .15s; }
.hub-links a:hover { border-color: var(--teal); }
.hub-links b { font-family: var(--display); font-weight: 600; font-size: .98rem; color: var(--teal); }
.hub-links span { font-size: .84rem; color: var(--ink-3); }

/* ---- D-035 AI section: simple / detailed ---- */
.ai-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; padding: 3px; gap: 2px; margin: .4rem 0 1rem; background: var(--paper-2); }
.ai-switch button { appearance: none; border: 0; background: none; font: inherit; font-family: var(--display); font-size: .86rem; font-weight: 500; color: var(--ink-3); padding: .35rem .9rem; border-radius: 7px; cursor: pointer; }
.ai-switch button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(14,20,36,.08); }
.ai-switch { display: none; }
.js .ai-switch { display: inline-flex; }
.js .ai-wrap[data-ai-view="simple"] .ai-detail, .js .ai-wrap[data-ai-view="detailed"] .ai-simple { display: none; }
.ais-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: 1.4rem; }
.ais-card { border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; background: var(--card); min-width: 0; }
.ais-h { font-family: var(--display); font-weight: 600; font-size: .98rem; }
.ais-verdict { display: flex; align-items: baseline; gap: .5rem; margin: .5rem 0 .55rem; flex-wrap: wrap; }
.ais-word { font-family: var(--display); font-size: 1.5rem; font-weight: 600; color: var(--teal); letter-spacing: -.01em; }
.ais-sub { font-family: var(--display); font-size: .84rem; color: var(--ink-3); }
.ais-meter { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.ais-meter i { height: 8px; border-radius: 3px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); }
.ais-meter i.on { background: var(--teal); box-shadow: none; }
.ais-ends { display: flex; justify-content: space-between; font-family: var(--display); font-size: .7rem; color: var(--ink-3); margin-top: .3rem; }
.ais-say { margin: .8rem 0 .7rem; font-size: .95rem; color: var(--ink); line-height: 1.5; }
.ais-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; border-top: 1px solid var(--line); padding-top: .7rem; }
.ais-list li { display: grid; gap: .1rem; font-size: .88rem; color: var(--ink-2); line-height: 1.45; }
.ais-list b { font-family: var(--display); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.ais-note { margin: .7rem 0 0; font-size: .8rem; color: var(--ink-3); }

/* ---- D-040 grouped pay bars (Malaysia private-firm section) ---- */
.gp { display: grid; gap: 14px; margin: 1rem 0 .4rem; }
.gp-group { border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1rem .6rem; background: var(--card); }
.gp-h { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .5rem; }
.gp-h b { display: block; font-family: var(--display); font-weight: 600; font-size: .98rem; color: var(--ink); }
.gp-h span { display: block; font-size: .82rem; color: var(--ink-3); }
.gp-n { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line); font-family: var(--mono); font-size: .72rem; color: var(--teal); display: grid; place-items: center; margin-top: .1rem; }
.gp ul { list-style: none; margin: 0; padding: 0; }
.gp-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 5.5rem; gap: .9rem; align-items: center; padding: .55rem 0; border-top: 1px solid var(--line); }
.gp-t b { display: block; font-weight: 500; font-size: .9rem; color: var(--ink); line-height: 1.35; }
.gp-t span { display: block; font-size: .76rem; color: var(--ink-3); margin-top: .1rem; }
.gp-bar { position: relative; height: 10px; border-radius: 5px; background: var(--paper-2); }
.gp-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--teal); opacity: .85; }
.gp-bar::after { content: ""; position: absolute; top: -5px; bottom: -5px; left: var(--gov); border-left: 2px dashed var(--ink-3); }
.gp-v { font-family: var(--mono); font-size: .92rem; text-align: right; color: var(--ink); }
.gp-axis { display: flex; justify-content: space-between; gap: .5rem; font-size: .74rem; color: var(--ink-3); padding: 0 .2rem; }
.gp-gov { display: inline-flex; align-items: center; gap: .35rem; }
.gp-gov::before { content: ""; width: 14px; border-top: 2px dashed var(--ink-3); }
@media (max-width: 640px) {
  .gp-row { grid-template-columns: minmax(0, 1fr) 5rem; }
  .gp-bar { grid-column: 1 / -1; grid-row: 2; }
}

/* ---- D-044 guide pay check ---- */
.gpc { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 1rem 1.1rem; margin: 1.6rem 0 .6rem; }
.gpc-head b { display: block; font-family: var(--display); font-size: 1.02rem; font-weight: 600; color: var(--ink); }
.gpc-head span { display: block; font-size: .8rem; color: var(--ink-3); margin-top: .1rem; }
.gpc-form { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 10px; align-items: end; margin-top: .8rem; }
.gpc-form label span { display: block; font-family: var(--display); font-size: .76rem; font-weight: 600; color: var(--ink-2); margin-bottom: .25rem; }
.gpc-form select, .gpc-form input { width: 100%; min-width: 0; font: inherit; font-size: .92rem; padding: .55rem .65rem; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); }
.gpc-form button { appearance: none; border: 0; background: var(--teal); color: #fff; font: inherit; font-family: var(--display); font-weight: 600; font-size: .92rem; padding: .6rem 1.1rem; border-radius: 8px; cursor: pointer; }
.gpc-res { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .9rem; }
.gpc-res[hidden] { display: none; }
.gpc-line { margin: 0 0 .7rem; font-size: .98rem; color: var(--ink); }
.gpc-line b { color: var(--teal); font-family: var(--display); }
.gpc-bar { position: relative; height: 12px; border-radius: 6px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); margin: .3rem 0 .7rem; }
.gpc-bar i { position: absolute; top: 0; bottom: 0; }
.gpc-band { border-radius: 6px; background: var(--teal-soft); box-shadow: inset 0 0 0 1px var(--teal); }
.gpc-med { width: 2px; top: -4px !important; bottom: -4px !important; background: var(--ink); }
.gpc-you { width: 14px; height: 14px; top: -1px !important; margin-left: -7px; border-radius: 50%; background: #e4572e; border: 2px solid var(--card); }
.gpc-facts { margin: 0 0 .6rem; font-size: .86rem; color: var(--ink-2); }
.gpc-more { font-family: var(--display); font-weight: 600; font-size: .9rem; }
@media (max-width: 640px) { .gpc-form { grid-template-columns: 1fr 1fr; } .gpc-form label:first-child, .gpc-form button { grid-column: 1 / -1; } }

/* ---------- D-049: hero actions and country heroes ---------- */
.hero-cta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.hero-cta .ico { width: 18px; height: 18px; }
.hero-src { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin: 1.6rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line); font-family: var(--display); font-size: .85rem; }
.hero-src dt { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.hero-src dd { margin: .15rem 0 0; color: var(--ink-2); font-weight: 600; }
.finder-my { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--line); font-family: var(--display); font-size: .86rem; }
.finder-my a { color: var(--teal); text-decoration: none; font-weight: 600; }
.finder-my a:hover { text-decoration: underline; }
.country-hero { padding-block: 2rem 2.4rem; }
.country-hero .crumbs { margin-bottom: .2rem; }
.country-hero h1 { font-size: clamp(2rem, 4vw, 3rem); }
.country-hero .dateline { margin-top: 1.2rem; }
.country-hero .hero-keys { grid-column: 1 / -1; }
.country-hero .hero-keys .keys { margin-top: 0; }
.finder.jump { display: grid; gap: 0; padding: .9rem 1rem; }
.finder.jump .jump-h { font-family: var(--display); font-weight: 600; padding: .2rem .5rem .6rem; }
.finder.jump a { display: grid; gap: .1rem; padding: .65rem .5rem; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); border-radius: 8px; }
.finder.jump a:hover { background: var(--teal-soft); }
.finder.jump b { font-family: var(--display); font-size: .95rem; }
.finder.jump span { font-size: .82rem; color: var(--ink-3); }
@media (max-width: 900px) { .country-hero .wrap { gap: 1.5rem; } }
@media (max-width: 640px) { .hero-cta .btn { flex: 1 1 auto; justify-content: center; } }
.country-hero .dateline { row-gap: .3rem; }
@media (max-width: 640px) {
  .hero-src { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; font-size: .78rem; margin-top: 1.2rem; }
  .home-hero .lede { font-size: 1.02rem; }
}

/* ---------- D-051: homepage, both countries ---------- */
.hero-cta .btn .pill { font-size: .62rem; padding: .1rem .4rem; }
.twins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.twin { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.2rem; display: grid; gap: .7rem; min-width: 0; }
.twin h3 { font-size: 1.15rem; }
.tw-c { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .8rem; row-gap: .15rem; align-items: baseline; padding: .8rem .9rem; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--ink); background: var(--paper); }
.tw-c:hover { border-color: var(--teal); }
.tw-c .pill { grid-row: 1; }
.tw-v { font-family: var(--mono); font-size: 1.5rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.tw-l { grid-column: 1 / -1; font-size: .84rem; color: var(--ink-2); }
.tw-go { grid-column: 1 / -1; font-family: var(--display); font-weight: 600; font-size: .85rem; color: var(--teal); display: inline-flex; align-items: center; gap: .3rem; }
.tw-go .ico { width: 14px; height: 14px; }
.r-tag { display: inline-block; font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; padding: .05rem .35rem; border-radius: 4px; background: var(--teal-soft); color: var(--teal); margin-right: .4rem; vertical-align: middle; }
@media (max-width: 760px) { .twins { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .hero-cta .btn-primary { flex-basis: 100%; } .hero-cta .btn-ghost { flex: 1 1 0; } }

/* ---------- D-052: guide styles shared by every profession guide (were inline per page) ---------- */
.article-head { padding-block: 3rem 2.5rem; border-bottom: 1px solid var(--line); }
.article-head h1 { margin-top: 1rem; max-width: 20ch; }
.article-head .standfirst { margin-top: 1.2rem; font-size: 1.2rem; color: var(--ink-2); max-width: 34em; }
.chart .legend { display: flex; gap: 1.2rem; font-family: var(--display); font-size: .82rem; color: var(--ink-2); margin-bottom: 1rem; flex-wrap: wrap; }
.chart .legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: .4rem; vertical-align: -1px; }
.chart text.na { fill: var(--ink-3); font-style: italic; font-family: var(--display); }

/* ---------- D-054: shared tool styles (.pc-*), moved from the salary comparison page ---------- */
.pc-wrap { display: grid; gap: 16px; margin-top: 1.4rem; }
.pc-card { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 1.2rem 1.25rem; }
.pc-card h2 { font-size: 1.15rem; margin: 0 0 .25rem; border: 0; padding: 0; }
.pc-sub { font-size: .88rem; color: var(--ink-3); margin: 0 0 1rem; }
.pc-form { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.pc-f label { display: block; font-family: var(--display); font-size: .8rem; font-weight: 600; color: var(--ink-2); margin-bottom: .3rem; }
.pc-f input, .pc-f select { width: 100%; font: inherit; font-size: .95rem; padding: .62rem .75rem; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); color: var(--ink); min-width: 0; }
.pc-f input:focus, .pc-f select:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.pc-hint { font-size: .76rem; color: var(--ink-3); margin-top: .3rem; }
.pc-go { grid-column: 1 / -1; display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.pc-btn { appearance: none; border: 0; background: var(--teal); color: #fff; font: inherit; font-family: var(--display); font-weight: 600; font-size: .95rem; padding: .7rem 1.2rem; border-radius: 9px; cursor: pointer; }
.pc-btn:hover { filter: brightness(1.08); }
.pc-btn:disabled { opacity: .55; cursor: default; filter: none; }
.pc-btn.ghost { background: transparent; color: var(--teal); border: 1px solid var(--teal); }
.pc-err { color: #b42318; font-size: .86rem; }
.pc-res[hidden], .pc-survey[hidden] { display: none; }
.pc-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.pc-big { font-family: var(--display); font-size: 2.1rem; font-weight: 600; color: var(--teal); letter-spacing: -.02em; line-height: 1.1; }
.pc-big small { font-size: 1rem; color: var(--ink-2); font-weight: 500; letter-spacing: 0; }
.pc-verdict { display: inline-block; font-family: var(--display); font-size: .82rem; font-weight: 600; border: 1px solid var(--line); border-radius: 999px; padding: .15rem .65rem; color: var(--ink-2); }
.pc-scale { position: relative; height: 54px; margin: 1.4rem 0 .4rem; }
.pc-track { position: absolute; left: 0; right: 0; top: 22px; height: 12px; border-radius: 6px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); }
.pc-band { position: absolute; top: 22px; height: 12px; border-radius: 6px; background: var(--teal-soft); box-shadow: inset 0 0 0 1px var(--teal); }
.pc-med { position: absolute; top: 16px; width: 2px; height: 24px; background: var(--ink); }
.pc-you { position: absolute; top: 20px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #e4572e; border: 3px solid var(--card); box-shadow: 0 0 0 1px #e4572e; }
.pc-you-tag { position: absolute; top: -2px; transform: translateX(-50%); font-family: var(--display); font-size: .74rem; font-weight: 600; color: #fff; background: #e4572e; border-radius: 6px; padding: .05rem .45rem; white-space: nowrap; }
.pc-axis { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .3rem .8rem; font-family: var(--mono); font-size: .72rem; color: var(--ink-3); }
.pc-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 1.1rem; }
.pc-fact { border: 1px solid var(--line); border-radius: 10px; padding: .7rem .8rem; }
.pc-fact b { display: block; font-family: var(--mono); font-size: 1.05rem; font-weight: 500; color: var(--ink); }
.pc-fact span { font-size: .8rem; color: var(--ink-3); }
.pc-note { font-size: .82rem; color: var(--ink-3); margin-top: .9rem; }
.pc-preview { display: inline-block; font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line); border-radius: 5px; padding: .05rem .4rem; margin-left: .4rem; vertical-align: middle; }
.pc-sform { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.pc-consent { display: flex; gap: .5rem; align-items: flex-start; font-size: .86rem; color: var(--ink-2); margin: 1rem 0; }
.pc-consent input { margin-top: .2rem; flex: none; }
.pc-thanks { border-left: 3px solid var(--teal); padding: .3rem 0 .3rem .8rem; font-size: .9rem; color: var(--ink-2); }
.pc-lock h2 { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pc-lockbadge { font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; border-radius: 5px; padding: .08rem .45rem; border: 1px solid var(--line); color: var(--ink-3); }
.pc-lockbadge.open { color: var(--teal); border-color: var(--teal); }
.pc-locked { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.pc-skel { position: absolute; inset: 0; padding: 1rem; filter: blur(3px); opacity: .55; pointer-events: none; user-select: none; }
.pc-skel .row { display: grid; grid-template-columns: 9rem 1fr 4rem; gap: .8rem; align-items: center; padding: .45rem 0; }
.pc-skel .row i { display: block; height: 10px; border-radius: 5px; background: var(--teal); opacity: .5; }
.pc-skel .row b { display: block; height: 10px; border-radius: 5px; background: var(--line); }
.pc-gate { position: relative; min-height: 280px; display: grid; place-items: center; text-align: center; padding: 1.4rem 1rem; background: color-mix(in srgb, var(--card) 70%, transparent); }
.pc-gate p { margin: .35rem 0 .9rem; font-size: .9rem; color: var(--ink-2); max-width: 30em; }
.pc-gate .pc-btns { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.pc-gate small { display: block; margin-top: .6rem; font-size: .76rem; color: var(--ink-3); }
.pc-lockicon { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; margin: 0 auto .4rem; background: var(--card); }
.pc-lockicon svg { width: 16px; height: 16px; fill: none; stroke: var(--ink-2); stroke-width: 2; }
.pc-report[hidden], .pc-locked[hidden] { display: none; }
.pc-rsec { margin-top: 1.1rem; }
.pc-rsec h3 { font-size: .95rem; margin: 0 0 .5rem; }
.pc-rrow { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 5rem; gap: .8rem; align-items: center; padding: .4rem 0; border-top: 1px solid var(--line); font-size: .88rem; }
.pc-rrow .bar { position: relative; height: 10px; border-radius: 5px; background: var(--paper-2); }
.pc-rrow .bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--teal); opacity: .8; }
.pc-rrow .bar u { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #e4572e; text-decoration: none; }
.pc-rrow .v { font-family: var(--mono); text-align: right; }
.pc-rnote { font-size: .8rem; color: var(--ink-3); margin-top: .4rem; }
.pc-unlocked { font-size: .84rem; color: var(--ink-2); border-left: 3px solid var(--teal); padding-left: .7rem; margin: .2rem 0 0; }
@media (max-width: 640px) { .pc-rrow { grid-template-columns: minmax(0, 1fr) 4.5rem; } .pc-rrow .bar { grid-column: 1 / -1; grid-row: 2; } }
@media (max-width: 640px) { .pc-form { grid-template-columns: 1fr; } .pc-big { font-size: 1.7rem; } .pc-axis span:nth-child(2) { order: 3; flex-basis: 100%; } }

/* ---------- D-054: take-home pay calculator ---------- */
.th-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.th-split { margin: 1.1rem 0 .4rem; }
.th-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--paper-2); }
.th-bar i, .th-legend i { display: block; }
.th-bar i.k, .th-legend i.k { background: var(--teal); }
.th-bar i.c, .th-legend i.c { background: color-mix(in srgb, var(--teal) 40%, var(--card)); }
.th-bar i.t, .th-legend i.t { background: #e0a030; }
.th-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: .5rem; font-family: var(--display); font-size: .8rem; color: var(--ink-2); }
.th-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.th-legend i { width: 10px; height: 10px; border-radius: 3px; }
.th-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 1rem; }
.th-col { border: 1px solid var(--line); border-radius: 10px; padding: .8rem .9rem; min-width: 0; }
.th-col h3 { font-size: .92rem; margin: 0 0 .4rem; }
.th-list { margin: 0; display: grid; }
.th-list > div { display: flex; justify-content: space-between; gap: .8rem; padding: .32rem 0; border-top: 1px solid var(--line); font-size: .88rem; }
.th-list > div:first-child { border-top: 0; }
.th-list dt { color: var(--ink-2); }
.th-list dd { margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.th-list .tot dt, .th-list .tot dd { font-weight: 700; color: var(--ink); }
.th-list .muted dt, .th-list .muted dd { color: var(--ink-3); font-size: .82rem; }
@media (max-width: 900px) { .th-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .th-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .th-form { grid-template-columns: minmax(0, 1fr); } }

/* ---------- D-055: notice period calculator and letter template ---------- */
.np-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 6px; }
.np-check { grid-column: span 2; align-self: end; }
.np-check label { display: flex; gap: .5rem; align-items: center; font-weight: 500; font-size: .88rem; padding-bottom: .65rem; }
.np-check input { width: auto; }
.np-sub { color: var(--ink-2); margin: .4rem 0 0; }
.pc-f[hidden] { display: none; }
a.pc-btn { text-decoration: none; display: inline-block; }
@media (max-width: 900px) { .np-check { grid-column: 1 / -1; } }
.rl-opts { grid-column: span 2; display: grid; gap: .35rem; align-self: end; }
.rl-opts label { display: flex; gap: .5rem; align-items: center; font-weight: 500; font-size: .88rem; margin: 0; }
.rl-opts input { width: auto; }
.rl-head { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .8rem; }
.rl-btns { display: flex; gap: .5rem; flex-wrap: wrap; }
.rl-out { white-space: pre-wrap; word-break: break-word; font-family: var(--body, inherit); font-size: .95rem; line-height: 1.6; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.1rem; margin: 0; color: var(--ink); }
.rl-static { margin-top: 1rem; }
@media (max-width: 900px) { .rl-opts { grid-column: 1 / -1; } }

/* ---------- D-056: every plain page header gets the C4 hero treatment (same as the homepage and hubs) ---------- */
.page-head { position: relative; padding-block: 2.6rem 2.4rem; background:
   radial-gradient(1200px 380px at 15% -10%, color-mix(in srgb, var(--teal) 14%, transparent), transparent 70%),
   linear-gradient(var(--paper-2), var(--paper)); overflow: hidden; }
.page-head::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px; opacity: .35; mask-image: linear-gradient(to bottom, #000, transparent 75%); -webkit-mask-image: linear-gradient(to bottom, #000, transparent 75%); pointer-events: none; }
.page-head > .wrap { position: relative; }
.page-head h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); letter-spacing: -.02em; max-width: 24ch; }
.page-head .hero-chips { margin-top: 1.1rem; }

/* ---------- D-057: offer comparison ---------- */
.oc-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; align-items: center; }
.oc-grid .oc-h { font-family: var(--display); font-weight: 600; font-size: .85rem; color: var(--ink-2); }
.oc-grid label { font-family: var(--display); font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.oc-grid input { width: 100%; font: inherit; font-size: .95rem; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); color: var(--ink); min-width: 0; }
.oc-grid input:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.oc-table td.oc-up { color: #1a7f4b; font-weight: 600; }
.oc-table td.oc-down { color: #b42318; }
@media (max-width: 640px) { .oc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .oc-grid label, .oc-grid .oc-h:first-child { grid-column: 1 / -1; } .oc-grid .oc-h:first-child { display: none; } }

.pc-wrap > * { min-width: 0; }

/* ---------- D-058: cover letter, negotiation email and resume templates ---------- */
.cl-wide { grid-column: 1 / -1; }
.pc-f textarea { width: 100%; font: inherit; font-size: .95rem; padding: .62rem .75rem; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); color: var(--ink); resize: vertical; min-width: 0; }
.pc-f textarea:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.rs-job { border: 1px solid var(--line); border-radius: 10px; padding: .8rem .9rem 1rem; margin: 0; min-width: 0; }
.rs-job legend { font-family: var(--display); font-weight: 600; font-size: .85rem; padding: 0 .3rem; }
.rs-job .th-form { margin-bottom: .6rem; }
.rs-job > label { display: block; font-family: var(--display); font-size: .8rem; font-weight: 600; color: var(--ink-2); margin-bottom: .3rem; }
.rs-job textarea { width: 100%; font: inherit; font-size: .95rem; padding: .62rem .75rem; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); color: var(--ink); resize: vertical; }
.rs-sheet { background: #fff; color: #111; border: 1px solid var(--line); border-radius: 6px; padding: 2rem 2.2rem; font-family: Georgia, "Times New Roman", serif; font-size: .95rem; line-height: 1.45; min-height: 20rem; }
.rs-sheet h1 { font-family: inherit; font-size: 1.7rem; letter-spacing: 0; margin: 0 0 .1rem; color: #111; }
.rs-sheet .rs-head { margin: 0; font-weight: 600; }
.rs-sheet .rs-contact { margin: .2rem 0 0; font-size: .88rem; color: #333; }
.rs-sheet h2 { font-family: inherit; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; border-top: 1px solid #999; border-bottom: 0; padding-top: .5rem; margin: 1.1rem 0 .4rem; color: #111; }
.rs-sheet p { margin: .2rem 0; }
.rs-sheet ul { margin: .2rem 0 .3rem 1.1rem; padding: 0; }
.rs-sheet li { margin: .1rem 0; }
.rs-sheet .rs-j { margin-bottom: .6rem; }
.rs-sheet .rs-jh { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.rs-sheet .rs-jh span { color: #333; font-size: .9rem; }
@media (max-width: 640px) { .rs-sheet { padding: 1.2rem 1rem; } }
@media print {
  body > *:not(main), main > *:not(.layout), .layout > aside, article > *:not(.pc-wrap), .pc-wrap > section:not(:has(.rs-sheet)), .rl-head, .pc-note { display: none !important; }
  .pc-wrap, .pc-card, .layout, .wrap { display: block !important; padding: 0 !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; max-width: none !important; }
  .rs-sheet { border: 0; border-radius: 0; padding: 0; font-size: 11pt; }
  @page { size: A4; margin: 18mm; }
}

/* ---------- D-061: quick answer box on tool pages ---------- */
.qa-box { margin: 1.2rem 0 0; max-width: 46em; font-size: 1rem; line-height: 1.55; color: var(--ink-2); background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--teal); border-radius: 10px; padding: .8rem 1rem; }

/* ---------- D-067: menus grouped by country and field; guide sections folded, nothing removed ---------- */
.mega-inner.mega-salary { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .9fr); }
.mega-inner.mega-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 980px; }
.mgrps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem 1.2rem; }
.mgrp { break-inside: avoid; margin-bottom: .5rem; }
.mgrp-h { font-family: var(--display); font-size: .78rem; font-weight: 600; color: var(--ink-3); margin: .3rem 0 .1rem; }
.mgrp a { display: flex; justify-content: space-between; gap: .6rem; text-decoration: none; color: var(--ink); font-family: var(--display); font-size: .88rem; padding: .22rem .4rem; margin-inline: -.4rem; border-radius: 6px; }
.mgrp a:hover { background: var(--teal-soft); }
.mgrp a em { font-style: normal; font-family: var(--mono); font-size: .74rem; color: var(--ink-3); white-space: nowrap; }
.mega-fields.one { grid-template-columns: minmax(0, 1fr); }
.mega-col > .mgrps + .ml, .mega-fields + .ml { margin-top: .6rem; }
@media (max-width: 1100px) { .mgrps { grid-template-columns: minmax(0, 1fr); } }
details.more { margin-top: 1.2rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
details.more > summary { cursor: pointer; list-style: none; font-family: var(--display); font-weight: 600; font-size: .98rem; padding: .85rem 1.1rem; display: flex; align-items: center; gap: .6rem; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: "+"; font-family: var(--mono); color: var(--teal); width: 1.1rem; }
details.more[open] > summary::before { content: "−"; }
details.more > summary::after { content: "Show"; margin-left: auto; font-size: .78rem; font-weight: 500; color: var(--ink-3); }
details.more[open] > summary::after { content: "Hide"; }
details.more > *:not(summary) { margin-left: 1.1rem; margin-right: 1.1rem; }
details.more > *:last-child { margin-bottom: 1.1rem; }
details.more .lead.strong { font-weight: 500; color: var(--ink); margin-top: .2rem; }
details.more h3 { margin-top: 1.2rem; }
.table-wrap.folded tr.fold { display: none; }
.fold-btn { appearance: none; border: 1px solid var(--line); background: var(--card); color: var(--teal); font: inherit; font-family: var(--display); font-weight: 600; font-size: .84rem; padding: .4rem .8rem; border-radius: 999px; cursor: pointer; margin-top: .5rem; }
.fold-btn:hover { border-color: var(--teal); }

/* ---------- D-068: folded panels show their key line; quiet breadcrumb; sticky chips become tabs ---------- */
details.more > summary { flex-wrap: wrap; padding: .9rem 1.1rem; border-left: 3px solid var(--teal); border-radius: 12px; }
details.more > summary .more-t { font-weight: 600; }
details.more > summary .more-k { flex-basis: 100%; padding-left: 1.7rem; font-weight: 400; font-size: .9rem; color: var(--ink-2); line-height: 1.45; }
details.more[open] > summary .more-k { display: none; }
details.more > summary::after { content: "Show"; margin-left: auto; font-size: .78rem; font-weight: 600; color: var(--teal); border: 1px solid var(--teal); border-radius: 999px; padding: .1rem .6rem; }
details.more[open] > summary::after { content: "Hide"; }
.article-head .crumbs, .page-head .crumbs { font-size: .76rem; color: var(--ink-3); opacity: .85; }
.article-head .crumbs .pill, .page-head .crumbs .pill { font-size: .66rem; padding: .05rem .45rem; background: transparent; border: 1px solid var(--line); color: var(--ink-3); }
.article-head .hero-chips .hchip.field { display: none; }
.chips-nav.stuck { gap: 0; padding: 0; border-bottom: 1px solid var(--line); box-shadow: 0 6px 16px -12px rgba(14, 20, 36, .25); }
.chips-nav.stuck a { border: 0; border-radius: 0; background: transparent; padding: .8rem .9rem; color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.chips-nav.stuck a:hover { color: var(--teal); }
.chips-nav.stuck a.on { background: transparent; color: var(--teal); border-bottom-color: var(--teal); font-weight: 600; }

/* ---------- D-069: guide page design v5 — one navigation, one hero treatment, fewer boxes ---------- */
/* hero: same ground as every other page head; dateline replaces the two chip rows */
.article-head { position: relative; padding-block: 2.4rem 2.2rem; border-bottom: 1px solid var(--line); background:
   radial-gradient(1200px 380px at 15% -10%, color-mix(in srgb, var(--teal) 14%, transparent), transparent 70%),
   linear-gradient(var(--paper-2), var(--paper)); overflow: hidden; }
.article-head::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px; opacity: .35; mask-image: linear-gradient(to bottom, #000, transparent 75%); -webkit-mask-image: linear-gradient(to bottom, #000, transparent 75%); pointer-events: none; }
.article-head > .wrap { position: relative; }
.article-head .head-grid { align-items: start; gap: 3.5rem; }
.article-head .head-grid h1 { margin-top: 1.1rem; font-size: clamp(2.1rem, 4.4vw, 3.3rem); letter-spacing: -.025em; line-height: 1.05; }
.article-head .standfirst.short { margin-top: 1rem; font-size: 1.12rem; line-height: 1.55; }
.article-head .src-badges { margin-top: 1.4rem; gap: .4rem .5rem; }
.article-head .src-badges span { font-size: .78rem; color: var(--ink-2); padding: .22rem .6rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); }
.article-head .src-badges .ico { color: var(--teal); }
.article-head .src-badges span:first-child { font-weight: 600; color: var(--ink); }
.hero-ladder { box-shadow: none; border-radius: 12px; padding: .9rem 1rem .8rem; }
/* quick answers: a stat row, not a card grid */
.qstrip { margin-top: 2rem; border: 0; border-radius: 0; background: transparent; border-top: 1px solid var(--line); overflow: visible; gap: 0 2rem; }
.qa { padding: 1.1rem 0 .4rem; grid-template-columns: minmax(0, 1fr); gap: .15rem; }
.qa + .qa { border-left: 0; }
.qa .ico { display: none; }
.qa .ql { font-size: .7rem; color: var(--ink-3); }
.qa .qv { font-size: clamp(1.45rem, 2.4vw, 1.9rem); letter-spacing: -.02em; margin-top: .15rem; }
.qa .qn { color: var(--ink-3); font-size: .82rem; }
.qa .qgo { grid-column: 1; margin-top: .3rem; }
a.qa:hover { background: transparent; }
a.qa:hover .qv { color: var(--teal); }
@media (max-width: 900px) { .qa:nth-child(n+3) { border-top: 0; } .qstrip { gap: 0 1.5rem; } }
@media (max-width: 480px) { .qstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qa + .qa { border-top: 0; } }
/* one navigation: the contents rail on wide screens, flat tabs on narrow ones */
@media (min-width: 901px) { .chips-nav { display: none; } }
@media (max-width: 900px) { .layout > .toc { display: none; } }
.toc { top: calc(60px + 1.5rem + env(safe-area-inset-top, 0px)); font-size: .86rem; }
.toc li a { padding: .3rem 0 .3rem .9rem; color: var(--ink-3); line-height: 1.4; }
.toc li a.on { color: var(--ink); border-left-color: var(--teal); font-weight: 600; }
.chips-nav, .chips-nav.stuck { gap: 0; padding: 0; margin: 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px))) 0; padding-inline: max(16px, env(safe-area-inset-left, 0px)); box-shadow: none; }
.chips-nav a, .chips-nav.stuck a { border: 0; border-radius: 0; background: transparent; padding: .75rem .8rem; color: var(--ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: .84rem; }
.chips-nav a.on, .chips-nav.stuck a.on { background: transparent; color: var(--ink); border-bottom-color: var(--teal); font-weight: 600; }
.chips-nav.stuck { box-shadow: 0 6px 16px -12px rgba(14, 20, 36, .25); }
/* glance: a plain opening, not a tinted box */
.glance { background: transparent; border: 0; border-radius: 0; padding: .4rem 0 0; }
.glance .eyebrow { color: var(--teal); }
.glance h2 { font-size: clamp(1.35rem, 2.3vw, 1.7rem); margin: .45rem 0 1rem; letter-spacing: -.015em; }
.glance ul { gap: .55rem; padding-left: 1rem; border-left: 2px solid var(--teal-soft); }
.glance li { grid-template-columns: minmax(0, 1fr); gap: 0; line-height: 1.55; font-size: 1.02rem; }
.glance li::before { display: none; }
.glance .term { border-bottom-color: var(--line); }
/* section openers: the answer stands on its own line, no fill */
.takeaway { background: transparent; border-left: 3px solid var(--teal); border-radius: 0; padding: .15rem 0 .15rem 1rem; font-size: 1.06rem; line-height: 1.6; color: var(--ink); }
.takeaway b { font-weight: 600; }
.part { margin: 3.4rem 0 -.4rem; font-size: .7rem; }
.part + h2 { font-size: clamp(1.5rem, 2.6vw, 1.95rem); letter-spacing: -.02em; }
article h2 { font-size: clamp(1.35rem, 2.3vw, 1.7rem); letter-spacing: -.015em; }
.kicker { color: var(--ink-3); font-size: .7rem; }
/* pay check: quieter card that reads as part of the opening */
.gpc { border-radius: 12px; padding: 1rem 1.1rem 1.1rem; margin: 1.8rem 0 .4rem; background: var(--paper-2); border-color: transparent; }
.gpc-head span { display: inline; }
.gpc-head .gpc-s { display: block; font-size: .8rem; color: var(--ink-3); margin-top: .1rem; }
/* folded panels: a row with a chevron, not a pill */
details.more { margin-top: 1.4rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden; }
details.more > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t i" "k i"; gap: .15rem 1rem; align-items: center; padding: .95rem 1.1rem; border-left: 0; border-radius: 0; }
details.more > summary::before, details.more > summary::after, details.more[open] > summary::before, details.more[open] > summary::after { content: none; }
details.more > summary .more-t { grid-area: t; font-weight: 600; font-size: 1rem; }
details.more > summary .more-k { grid-area: k; flex-basis: auto; padding-left: 0; font-size: .9rem; color: var(--ink-3); }
details.more > summary .more-i { grid-area: i; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); position: relative; flex: none; }
details.more > summary .more-i::before { content: ""; position: absolute; left: 9px; top: 7px; width: 7px; height: 7px; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: rotate(45deg); transition: transform .15s; }
details.more[open] > summary .more-i::before { transform: rotate(225deg); top: 11px; }
details.more > summary:hover { background: var(--paper-2); }
details.more[open] > summary { border-bottom: 1px solid var(--line); background: var(--paper-2); }
details.more[open] > summary .more-k { display: block; }
details.more > *:not(summary) { margin-left: 1.1rem; margin-right: 1.1rem; }
details.more > summary + * { margin-top: 1rem; }
/* related: title first, country as a small tag */
.related a { border-radius: 12px; }
.related a .pill { font-size: .62rem; }
@media (max-width: 900px) { .article-head .head-grid { gap: 1.6rem; } .article-head { padding-block: 1.8rem 1.6rem; } .article-head .head-grid h1 { margin-top: .8rem; } }

/* ---------- D-070: review of v5 — fuller tables, clearer fold panels, clear button on the pay check ---------- */
.gpc-head { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.gpc-clear { appearance: none; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); font: inherit; font-family: var(--display); font-weight: 600; font-size: .8rem; padding: .35rem .75rem; border-radius: 999px; cursor: pointer; flex: none; }
.gpc-clear:hover { border-color: var(--teal); color: var(--teal); }
details.more { border-color: color-mix(in srgb, var(--teal) 35%, var(--line)); }
details.more > summary { padding: 1.05rem 1.2rem; background: var(--teal-soft); }
details.more > summary .more-t { font-size: 1.08rem; }
details.more > summary .more-k { color: var(--ink-2); }
details.more > summary .more-i { width: 32px; height: 32px; background: var(--teal); border-color: var(--teal); }
details.more > summary .more-i::before { left: 11px; top: 9px; width: 8px; height: 8px; border-color: #fff; }
details.more[open] > summary .more-i::before { top: 13px; }
details.more > summary:hover { background: color-mix(in srgb, var(--teal) 16%, var(--card)); }
details.more[open] > summary { background: var(--teal-soft); }

/* ---------- D-071: menus show categories and recent guides, names only; homepage as a directory ---------- */
.ml { font-family: var(--display); font-size: .92rem; font-weight: 500; padding: .38rem .6rem; }
.ml:hover { color: var(--teal); }
.ml.mi { display: flex; align-items: center; gap: .55rem; }
.ml.mi .ico { width: 17px; height: 17px; color: var(--teal); flex: none; }
.mega-inner.mega-salary { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); max-width: 980px; }
.mega-col .mega-all { margin-top: .5rem; font-size: .86rem; }
.mega-fields { gap: .05rem .6rem; }
.dir { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .7rem; margin-top: 1.2rem; }
.dir + .dir { margin-top: .7rem; }
.dir-i { display: flex; gap: .8rem; align-items: center; padding: .8rem .9rem; background: var(--card); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: inherit; min-width: 0; }
.dir-i:hover { border-color: var(--teal); box-shadow: 0 4px 16px rgba(31,94,255,.08); }
.dir-i .ico-wrap { flex: none; }
.dir-i .t { font-family: var(--display); font-weight: 600; font-size: .95rem; display: block; line-height: 1.3; }
.dir-i .s { font-family: var(--display); font-size: .78rem; color: var(--ink-3); display: block; margin-top: .15rem; }
.dir-i .s .pill { font-size: .58rem; padding: .1rem .4rem; vertical-align: 1px; margin-right: .2rem; }
.dir-g { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.finder.jump a { padding: .6rem .5rem; }
article .dir { margin-top: 1.2rem; }
.dir-h { display: flex; align-items: center; gap: .5rem; font-family: var(--display); font-weight: 600; font-size: .9rem; color: var(--ink-2); margin-top: 1.4rem; }
.dir-h + .dir { margin-top: .6rem; }

/* ---------- D-072: one navigation model (docs/navigation.md) ---------- */
.mega-inner.mega-salary { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); max-width: 940px; }
.mega-h .pill { margin-right: .45rem; font-size: .6rem; vertical-align: 1px; }
.mega-strip { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; border-top: 1px solid var(--line); padding-top: .9rem; margin-top: .4rem; font-family: var(--display); font-size: .88rem; }
.mega-strip > span { color: var(--ink-3); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.mega-strip a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.mega-strip a:hover { color: var(--teal); }
.mega-strip .pill { font-size: .58rem; padding: .08rem .4rem; }
.drawer summary { font-size: 1.02rem; padding: .25rem 0; }
.dr-h { display: flex; align-items: center; gap: .5rem; font-family: var(--display); font-size: .78rem; font-weight: 600; color: var(--ink-3); margin: .8rem 0 .1rem; }
.dr-h .pill { font-size: .58rem; padding: .08rem .4rem; }
.drawer ul { margin-top: .1rem; }
.drawer li a { padding: .4rem 0 .4rem .2rem; font-size: .95rem; }
.site-footer .cols { grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); gap: 2rem; }
@media (max-width: 860px) { .site-footer .cols { grid-template-columns: 1fr 1fr; } }

/* ---------- D-074: field pages share the hub/guide treatment ---------- */
.field-head .standfirst { max-width: 40em; }
.field-head .hero-cta { margin-top: 1.4rem; }
.field-head .src-badges { margin-top: 1.2rem; gap: .4rem .5rem; }
.field-head .src-badges span { font-size: .78rem; color: var(--ink-2); padding: .22rem .6rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); }
.field-head .src-badges .ico { color: var(--teal); }
.field-head .src-badges span:first-child { font-weight: 600; color: var(--ink); }
.field-head .qstrip { margin-top: 1.8rem; }
.field-head .qa { padding-bottom: 0; }
.hsec .dir { margin-top: .4rem; }
.hsec .table-wrap { margin-top: .4rem; }

/* ---------- D-075: homepage as a hub; small flags ---------- */
.flag { width: 18px; height: 12px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); vertical-align: -1px; flex: none; }
.cc-switch a { display: inline-flex; align-items: center; gap: .35rem; }
.cc-switch .flag { width: 15px; height: 10px; }
.hub-hero .wrap { display: block; max-width: 760px; text-align: center; }
.hub-hero h1 { max-width: none; }
.hub-hero .lede { margin-inline: auto; max-width: 36em; }
.search-bar { display: flex; align-items: center; gap: .7rem; width: 100%; max-width: 620px; margin: 1.6rem auto 0; padding: .9rem 1rem .9rem 1.1rem; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink-3); font: inherit; font-family: var(--display); font-size: 1rem; text-align: left; cursor: text; box-shadow: 0 10px 30px rgba(11, 29, 69, .08); }
.search-bar:hover, .search-bar:focus-visible { border-color: var(--teal); }
.search-bar .ico { width: 20px; height: 20px; color: var(--ink-3); flex: none; }
.search-bar span { flex: 1; }
.search-bar kbd { font-family: var(--mono); font-size: .72rem; color: var(--ink-3); border: 1px solid var(--line); border-radius: 5px; padding: .1rem .4rem; }
.country h3 { display: flex; align-items: center; gap: .55rem; }
.country .cl { margin-top: 1rem; gap: .2rem; }
.country .cl li::before { content: none; }
.country .cl a { display: flex; align-items: center; gap: .6rem; padding: .45rem .5rem; margin-inline: -.5rem; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: .95rem; }
.country .cl a:hover { background: var(--teal-soft); color: var(--teal); }
.country .cl .ico { width: 18px; height: 18px; color: var(--teal); flex: none; }
.country .btn { margin-top: 1rem; font-size: .88rem; padding: .55rem 1rem; }
.country .btn .ico { width: 15px; height: 15px; }
.country:hover { border-color: var(--line); }
.dir-4 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
@media (max-width: 900px) { .countries-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .search-bar kbd { display: none; } .hub-hero .wrap { text-align: left; } .hub-hero .lede { margin-inline: 0; } .search-bar { margin-left: 0; } }

/* ---------- D-076: plain search palette; homepage copy and 2x2 grid ---------- */
.r-try { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: 1rem .6rem .4rem; }
.r-try > span { font-family: var(--display); font-size: .8rem; color: var(--ink-3); margin-right: .2rem; }
.r-try button { appearance: none; border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); border-radius: 999px; padding: .3rem .75rem; font-family: var(--display); font-size: .84rem; cursor: pointer; }
.r-try button:hover { border-color: var(--teal); color: var(--teal); }
.r-hint { font-family: var(--display); font-size: .84rem; color: var(--ink-3); padding: .4rem .6rem 1rem; max-width: 46em; }
.palette-results a.r { grid-template-columns: minmax(0, 1fr) auto; }
.palette-results .r-v { font-size: .92rem; }
.dir-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.dir-4 .dir-i { padding: 1.1rem 1.2rem; gap: 1rem; }
.dir-4 .dir-i .t { font-size: 1.05rem; }
.dir-4 .dir-i .s { font-size: .86rem; margin-top: .25rem; }
@media (max-width: 640px) { .dir-4 { grid-template-columns: minmax(0, 1fr); } }
.palette-results a.r.r-plain { grid-template-columns: minmax(0, 1fr) auto; }
.r-k { font-family: var(--display); font-size: .72rem; font-weight: 600; color: var(--ink-3); border: 1px solid var(--line); border-radius: 999px; padding: .08rem .5rem; }

/* ---------- D-077: branded spot graphics; counts out of navigation copy ---------- */
.spot { width: 56px; height: 56px; flex: none; }
.spot.sm { width: 40px; height: 40px; }
.country h3 { gap: .75rem; }
.country h3 > span { display: inline-flex; align-items: center; gap: .5rem; }
.dir-4 .dir-i { align-items: center; }

/* ---------- D-078: hubs match the homepage; compact field tiles ---------- */
.hub-hero h1 .flag.lg { width: 34px; height: 23px; border-radius: 4px; margin-right: .6rem; vertical-align: -2px; }
.hub-hero .crumbs { justify-content: center; margin-bottom: 1rem; }
.hub-hero .hero-cta { justify-content: center; margin-top: 1.2rem; }
@media (max-width: 640px) { .hub-hero .crumbs, .hub-hero .hero-cta { justify-content: flex-start; } }
.tiles.compact { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: .6rem; margin-top: .4rem; }
.tiles.compact .tile { padding: .7rem .85rem; align-items: center; gap: .7rem; }
.tiles.compact .tile .t { font-size: .92rem; }
.tiles.compact .tile .s { font-size: .76rem; margin-top: .1rem; }
.tiles.compact .ico-wrap .ico { width: 22px; height: 22px; }

/* ---------- D-079: flag in the crumb, spot graphics on hub and tool cards, section intros ---------- */
.crumbs .pill .flag { width: 14px; height: 9px; margin-right: .35rem; vertical-align: 0; }
.dir-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.dir-2 .dir-i { padding: 1.1rem 1.2rem; gap: 1rem; align-items: center; }
.dir-2 .dir-i .t { font-size: 1.05rem; }
.dir-2 .dir-i .s { font-size: .86rem; margin-top: .25rem; line-height: 1.45; }
.dir .dir-i .spot { width: 48px; height: 48px; }
.dir-2 .dir-i .spot, .dir-4 .dir-i .spot { width: 56px; height: 56px; }
.dir .dir-i { align-items: center; }
.hsec-head p { font-size: .95rem; }
@media (max-width: 640px) { .dir-2 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- D-080: field grid four across, icon on a tinted tile, guides under each field ---------- */
.tiles.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.tiles.compact .tile { display: block; padding: .9rem 1rem; }
.tiles.compact .tile-h { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: inherit; }
.tiles.compact .tile-h:hover .t { color: var(--teal); }
.tiles.compact .ico-wrap { width: 44px; height: 44px; border-radius: 12px; background: var(--teal-soft); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.tiles.compact .ico-wrap .ico { width: 22px; height: 22px; }
.tiles.compact .tile .t { font-size: .98rem; }
.tiles.compact .tile .s { font-size: .78rem; }
.tiles.compact .tile .go { display: none; }
.gchips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .75rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.gchips a { font-family: var(--display); font-size: .78rem; font-weight: 500; color: var(--ink-2); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: .15rem .6rem; }
.gchips a:hover { border-color: var(--teal); color: var(--teal); }
@media (max-width: 1000px) { .tiles.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tiles.compact { grid-template-columns: minmax(0, 1fr); } }

/* ---------- D-086: blog — articles under /{cc}/blog/, index and category pages as directories ---------- */
.post-head .dateline { align-items: center; }
.post-head .dateline .cat { color: var(--teal); font-weight: 600; text-decoration: none; }
.post-head .dateline .cat:hover { text-decoration: underline; }
.post > p, .post > ul.points, .post > ol { max-width: 70ch; }
.post > h2 { margin-top: 2.6rem; }
.post > h3 { margin-top: 1.8rem; }
.post > div > .table-wrap, .post > .table-wrap { margin-top: 1.1rem; }
.post .src { margin-top: .5rem; }
.dir-posts { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.dir-posts .dir-i { align-items: start; }
.dir-posts .dir-i .s .cat { color: var(--teal); font-weight: 600; }
@media (max-width: 640px) { .dir-posts { grid-template-columns: minmax(0, 1fr); } }

/* ---------- D-087: country bar above the header ---------- */
.geo-bar { background: var(--paper-2); color: var(--ink); border-bottom: 1px solid var(--line); font-family: var(--display); font-size: .92rem; }
.geo-bar .wrap { display: flex; align-items: center; gap: 1rem; padding-block: .55rem; }
.geo-bar p { flex: 1; min-width: 0; display: flex; align-items: center; gap: .55rem; color: var(--ink-2); }
.geo-bar .flag { width: 20px; height: 13px; }
.geo-go { flex: none; background: var(--ink); color: #fff; text-decoration: none; font-weight: 600; font-size: .86rem; padding: .45rem .9rem; border-radius: 8px; white-space: nowrap; }
.geo-go:hover { background: var(--teal); }
.geo-x { flex: none; appearance: none; border: 0; background: transparent; color: var(--ink-3); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: .2rem .4rem; }
.geo-x:hover { color: var(--ink); }
@media (max-width: 640px) { .geo-bar .wrap { flex-wrap: wrap; gap: .5rem .8rem; } .geo-bar p { flex-basis: 100%; } .geo-go { flex: 1; text-align: center; } }