/* self-hosted, latin subset — see build/selfhost_fonts.py */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/source-serif-4-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/source-serif-4-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* parhaatbritekasinot.com — visual layer (presentation only) */

/* ---------------------------------------------------------------- tokens */
.theme-zimpler{
  --brand:#121a2b; --brand-2:#23314d; --brand-3:#0b1220;
  --accent:#5ee0a0; --accent-2:#8ff0bf; --accent-ink:#071a10;
  --bg:#f5f2ea; --surface:#fffdf8; --surface-2:#eeeae0; --surface-3:#e4dfd3;
  --ink:#151a24; --ink-soft:#4b5262; --ink-faint:#7b8394; --line:#dcd7cb;
  --line-soft:#e7e3d9; --line-strong:#c8c2b3;
  --prov-ok:#1f7a4d;  --prov-ok-bg:#e3f5ea;
  --prov-est:#8a5f12; --prov-est-bg:#fbf1de;
  --prov-no:#4a5262;  --prov-no-bg:#eceef2;
  --ok:#1f7a4d; --ok-bg:#e3f5ea; --no:#a83a2e; --no-bg:#fbeae7;
  --warn-bg:#fbf3df; --warn-line:#ead9a9; --info-bg:#eef0f5;
  --shadow:0 1px 2px rgba(11,18,32,.06),0 10px 26px -14px rgba(11,18,32,.22);
  --shadow-lg:0 2px 4px rgba(11,18,32,.07),0 22px 52px -22px rgba(11,18,32,.34);
  --maxw:1160px;
  --font-body:"Archivo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --font-head:"Archivo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --font-data:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
}
/* Column width comes from base v2's --prose/--wide, which its break-out rule also
   computes against. Hardcoding .prose{max-width} here desyncs the two and makes wide
   blocks burst out of the column on every page. Set the variables instead. */
.theme-zimpler{--prose:900px}

body{font-family:var(--font-body);font-weight:500;font-size:17px;line-height:1.68;
  -webkit-font-smoothing:antialiased;background:var(--bg);color:var(--ink)}
::selection{background:var(--accent);color:var(--accent-ink)}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;text-wrap:balance}
h1{font-size:clamp(2.05rem,1.2rem + 3.1vw,3.1rem);letter-spacing:-.024em;line-height:1.08}
h2{font-size:clamp(1.42rem,1.06rem + 1.35vw,2.02rem);letter-spacing:-.018em}
h3{font-size:1.16rem;letter-spacing:-.008em}
.prose p{margin:0 0 1.1em}
.prose li{line-height:1.66}

/* ONE COLUMN, ONE LEFT EDGE (owner directive 17.9.2026).
   Running text sits at exactly the same width as the tables, the toplist and the TOC.

   Done by dropping the reading-measure cap, NOT by raising --prose. The shared theme's
   break-out rule derives its negative margin from --prose:
       margin-inline: calc((var(--prose) - min(var(--wide), 100vw - 52px)) / 2)
   so raising --prose to --wide turns that calc positive between 1000px and ~1148px and
   INSETS every table by up to 24px — the same mismatch in the other direction. Zeroing
   the cap and the margin together keeps text and data blocks in lockstep at every width.

   Trade-off, recorded deliberately: line length now runs past the ~65-character reading
   measure on a wide desktop. That is the requested behaviour, and the line-height and
   paragraph spacing below are set generously to carry it. */
.prose{max-width:none}
@media (min-width:1000px){
  .prose > .rec-head,
  .prose > .toc,
  .prose > .paylist,
  .prose > .people,
  .prose .table-wrap{margin-inline:0}
}

/* The data voice — anything that is a label, a figure or a date */
.fine,.byline,.rec-meta,.paystrip-h,.keyfacts h2,.crumbs,.topbar,
table caption,thead th,.pill,.prov,.featured-kicker,.related strong{
  font-family:var(--font-data);font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums}
.byline,.rec-meta,.fine{letter-spacing:-.005em}

/* ---------------------------------------------------------------- chrome */
.topbar{background:var(--brand-3);font-size:.76rem;letter-spacing:.01em}
.topbar .wrap{padding-block:9px}
.topbar a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
.age{border-width:1.5px;font-weight:700;letter-spacing:.02em;font-family:var(--font-data)}
.site-header{background:var(--brand);border-top:0;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.10)}
.site-header .wrap{min-height:74px}
.brand{font-family:var(--font-head);font-size:1.12rem;font-weight:700;gap:12px;
  letter-spacing:-.018em}
.brand-mark{width:44px;height:44px;border-radius:var(--radius-sm);flex:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.16),0 6px 14px -8px rgba(0,0,0,.7)}
.brand span small{font-family:var(--font-data);font-weight:500;font-size:.66rem;
  opacity:.72;letter-spacing:.04em;text-transform:uppercase;margin-top:3px}
.nav a{font-family:var(--font-head);font-size:.92rem;font-weight:600;
  border-radius:var(--radius-xs);padding:10px 13px;transition:background .15s ease}
.nav a[aria-current="page"]{background:rgba(255,255,255,.16);
  box-shadow:inset 0 -2px 0 var(--accent)}

/* ---------------------------------------------------------------- hero band */
.hero{position:relative;background:
   linear-gradient(100deg, var(--brand-3) 0%, rgba(11,18,32,.90) 42%, rgba(11,18,32,.45) 100%),
   url("/img/hero-zimpler-pikakasinot.webp") right center / cover no-repeat,
   var(--brand-3);
  color:#eef0f4;padding:48px 0 58px;margin-bottom:0}
@media (max-width:640px){
  .hero{background:
    linear-gradient(170deg, var(--brand) 0%, var(--brand-3) 100%),
    url("/img/hero-zimpler-pikakasinot-800.webp") right center / cover no-repeat,
    var(--brand-3)}
}
.hero .wrap{position:relative;z-index:1}
.hero h1{color:#fff;margin:.1em 0 .34em}
.hero .lead{color:#c9cfdb;font-size:1.14rem;line-height:1.6}
.hero .byline{color:#a5adbd;margin-top:24px;gap:12px 22px;font-size:.8rem}
.hero .byline b,.hero .byline a{color:#fff}
.hero .byline a{text-decoration-color:rgba(255,255,255,.45)}
.hero .byline img{border-color:rgba(255,255,255,.28);box-shadow:0 0 0 1px rgba(255,255,255,.16)}
.hero .byline time{color:#c9cfdb}
.crumbs{color:#9aa3b5;margin:0 0 8px;font-size:.76rem;letter-spacing:.02em}
.crumbs a{color:#d3d9e4}
.crumbs li+li::before{color:#6f7889}
.hero-split .hero .wrap{gap:48px;align-items:start}
/* One mint flow rule closing the band. The accent is spent here and on CTAs, nowhere else. */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:0;
  border-bottom:5px solid var(--accent)}

/* The hero sets a light text colour for its dark band. Any WHITE card sitting inside it
   has to reset the colour explicitly or the copy renders near-white on white — the same
   defect that made the featured card unreadable on the sibling build. Do not remove. */
.hero .keyfacts,.hero .keyfacts li,.hero .keyfacts strong,.hero .keyfacts p{color:var(--ink)}
.hero .keyfacts h2{color:var(--ink-soft)}
.hero .keyfacts a{color:var(--brand-2)}

/* ---------------------------------------------------------------- provenance */
/* The site's signature mark. Three states, one shape, used identically everywhere. */
.prov{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;padding:3px 9px 3px 7px;
  border-radius:999px;border:1px solid transparent;white-space:nowrap}
.prov::before{content:"";width:7px;height:7px;border-radius:50%;flex:none}
.prov--ok{background:var(--prov-ok-bg);color:var(--prov-ok);border-color:#c3e0d1}
.prov--ok::before{background:var(--prov-ok)}
.prov--est{background:var(--prov-est-bg);color:var(--prov-est);border-color:#ecd9ae}
.prov--est::before{background:var(--prov-est)}
.prov--no{background:var(--prov-no-bg);color:var(--prov-no);border-color:#d5dcdc}
.prov--no::before{background:var(--prov-no)}

/* ---------------------------------------------------------------- criteria band */
/* The eight criteria and their weights, as an actual graphic. This is the page's thesis,
   so it gets the one structural device on the site that nothing else reuses. */
.criteria{background:var(--brand-3);color:#dbe8e6;padding:30px 28px;
  border-radius:var(--radius);margin:34px 0;box-shadow:var(--shadow-lg)}
.criteria h2{color:#fff;margin:0 0 6px;font-size:1.35rem}
.criteria>p{color:#a8c2be;font-size:.92rem;margin:0 0 22px}
.criteria ol{list-style:none;margin:0;padding:0;display:grid;gap:14px}
@media (min-width:700px){.criteria ol{grid-template-columns:1fr 1fr}}
.criteria li{margin:0;display:grid;grid-template-columns:auto 1fr;gap:12px;
  align-items:start;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.10)}
.crit-w{font-family:var(--font-data);font-size:.74rem;font-weight:600;color:var(--accent-2);
  background:rgba(201,114,47,.16);border-radius:var(--radius-xs);padding:3px 8px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.crit-n{font-family:var(--font-head);font-weight:600;color:#fff;font-size:.99rem;
  display:block;margin-bottom:2px}
.crit-d{font-size:.85rem;color:#a8c2be;line-height:1.5;display:block}
.criteria .prov{margin-top:7px}

/* ---------------------------------------------------------------- featured */
.featured{background:var(--surface);color:var(--ink);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px 20px 18px;box-shadow:var(--shadow-lg);
  text-align:center;position:relative;overflow:hidden}
.featured p{color:inherit}
.featured::before{content:"";position:absolute;inset:0 0 auto;height:5px;
  background:linear-gradient(90deg,var(--accent) 0%,var(--accent-2) 100%)}
.featured-kicker{margin:6px 0 14px;font-size:.64rem;letter-spacing:.14em;font-weight:600;
  color:var(--ink-faint);text-transform:uppercase}
.featured-logo{max-width:280px;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:#fff;padding:10px;width:100%;height:auto}
.featured-name{font-family:var(--font-head);font-size:1.5rem;font-weight:700;
  margin:14px 0 6px;color:var(--ink);letter-spacing:-.018em}
.featured-desc{font-size:.95rem;color:var(--ink-soft);margin:0 0 14px}
.featured .tags{justify-content:center;margin-bottom:16px}
.featured-cta{width:100%;font-size:1.02rem;padding:14px 18px}
.featured-more{margin:12px 0 10px;font-size:.88rem}
.featured .fine{margin:0;text-align:left;font-size:.7rem;line-height:1.55;
  border-top:1px solid var(--line-soft);padding-top:12px}

/* ---------------------------------------------------------------- toplist */
.rec-list{gap:18px;margin-top:20px}
.rec-card{border:1px solid var(--line);border-radius:var(--radius);padding:16px;gap:18px;
  background:var(--surface);box-shadow:var(--shadow);
  transition:box-shadow .16s ease,transform .16s ease,border-color .16s ease}
.rec-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);
  border-color:var(--line-strong)}
.rec-card::before{width:28px;height:28px;font-size:.8rem;background:var(--brand);
  color:#fff;font-weight:600;font-family:var(--font-data)}
.rec-card:first-child::before{background:linear-gradient(145deg,var(--accent-2),var(--accent));
  color:#fff}
.rec-logo{border-radius:var(--radius-sm);background:#fff;border:1px solid var(--line-soft)}
.rec-body h3{margin:0 0 6px;font-size:1.1rem}
.rec-desc{font-size:.93rem;color:var(--ink-soft)}
.rec-meta{font-size:.78rem;color:var(--ink-soft)}
.rec-meta dt{font-weight:600;color:var(--ink)}

/* ---------------------------------------------------------------- blocks */
.paystrip{background:var(--surface-2);border:1px solid var(--line);padding:18px 20px;
  border-radius:var(--radius);box-shadow:var(--shadow)}
.paystrip-h{margin:0 0 14px;font-weight:600;font-size:.76rem;color:var(--ink-soft);
  letter-spacing:.06em;text-transform:uppercase}
/* Structural rules — these are OUR classes, the shared theme knows nothing about them.
   Without them every payment strip renders as a bulleted vertical list. */
.paystrip ul{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin:0;padding:0}
.paystrip li{margin:0}
.paystrip img{width:124px;height:50px;padding:7px;border:1px solid var(--line);
  border-radius:var(--radius-xs);background:#fff;object-fit:contain;
  transition:transform .15s ease}
.paystrip img:hover{transform:translateY(-2px)}
.paystrip-c{margin:14px 0 0}
.cols-2{display:grid;gap:22px}
@media (min-width:760px){.cols-2{grid-template-columns:1fr 1fr}}

.keyfacts{border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:var(--radius);padding:20px 24px;background:var(--surface)}
.keyfacts h2{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
details.toc{background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:4px 6px}
details.toc summary{font-family:var(--font-head);font-weight:600;padding:12px 14px}
details.toc a{font-size:.94rem}
.note{border-radius:var(--radius);padding:16px 18px;border-left:4px solid var(--brand-2);
  font-size:.95rem}
.note--warn{border-left-color:var(--accent)}
.note strong{font-family:var(--font-head)}

.table-wrap{border-radius:var(--radius);box-shadow:var(--shadow);border-color:var(--line)}
table caption{color:var(--ink-soft);font-size:.76rem;text-align:left;padding:13px 15px;
  line-height:1.55;letter-spacing:.005em}
thead th{background:var(--surface-2);font-size:.73rem;letter-spacing:.06em;
  text-transform:uppercase;font-weight:600;color:var(--ink-soft)}
tbody th[scope="row"]{font-family:var(--font-head);font-weight:600;color:var(--ink)}
tbody td{font-size:.95rem}

.faq details{border-radius:var(--radius);border-color:var(--line);box-shadow:var(--shadow)}
.faq summary{font-family:var(--font-head);font-weight:600}
.author-box{border-radius:var(--radius);padding:22px;gap:20px;
  grid-template-columns:96px minmax(0,1fr);background:var(--surface);
  border:1px solid var(--line)}
.author-box h2,.author-box h3{font-size:1.1rem;margin:0 0 2px}
.author-box .role{color:var(--brand-2);font-weight:600;font-family:var(--font-data);
  font-size:.76rem;letter-spacing:.03em}
.sources{background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px 24px}
.sources h2{font-size:1.05rem}
.sources ol{font-size:.9rem}
.illus img{border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--radius)}
.illus figcaption{font-family:var(--font-data);font-size:.74rem;color:var(--ink-faint)}

/* Section figure: float so the copy wraps it. flow-root on the section, NOT
   overflow:hidden — the latter contains the float but also clips the wide break-out
   blocks (tables, toplist, TOC) stone dead. */
.prose>section{display:flow-root}
.secfig{float:right;margin:4px 0 18px 26px;max-width:290px}
.secfig img{width:100%;max-width:290px;height:auto;border-radius:var(--radius);
  border:1px solid var(--line);box-shadow:var(--shadow)}
.secfig figcaption{font-family:var(--font-data);font-size:.72rem;color:var(--ink-faint);
  margin-top:9px;line-height:1.5}
/* Alternate the float so a long page does not become a single right-hand rail. */
.prose>section:nth-of-type(even) .secfig{float:left;margin:4px 26px 18px 0}
@media (max-width:760px){
  .prose>section .secfig,.prose>section:nth-of-type(even) .secfig{
    float:none;margin:0 0 18px;max-width:none}
  .secfig img{max-width:none}
}

/* ---------------------------------------------------------------- related */
.related{margin:34px 0 0}
.related ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
@media (min-width:720px){.related ul{grid-template-columns:1fr 1fr}}
.related li{margin:0}
.related a{display:block;padding:14px 16px;background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--radius-sm);text-decoration:none;color:inherit;
  transition:box-shadow .15s ease,border-color .15s ease}
.related a:hover{box-shadow:var(--shadow);border-color:var(--line-strong)}
.related strong{display:block;color:var(--brand-2);font-size:.82rem;margin-bottom:4px;
  letter-spacing:.03em;text-transform:uppercase;font-weight:600}
.related span{display:block;font-size:.88rem;color:var(--ink-soft);line-height:1.5}

/* ---------------------------------------------------------------- buttons */
.btn{background:var(--accent);color:#fff;border-radius:var(--radius-sm);
  font-family:var(--font-head);font-weight:600;letter-spacing:.005em;
  box-shadow:0 1px 2px rgba(0,0,0,.10)}
.btn:hover{background:var(--accent-2);transform:translateY(-1px)}
.pill{background:var(--surface-2);border:1px solid var(--line);border-radius:999px;
  font-size:.7rem;padding:4px 11px;letter-spacing:.03em}
.pill--no{background:var(--no-bg);border-color:#f0cdc8;color:var(--no)}

/* ---------------------------------------------------------------- footer */
.site-footer{background:var(--brand-3);color:#c6d8d5;font-size:.92rem}
.site-footer a{color:#e7f0ef}
.foot-h{font-family:var(--font-data);color:#fff;font-weight:600;font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase}
.site-footer .legal{border-top:1px solid rgba(255,255,255,.14);font-size:.84rem}

:where(a):focus-visible,:where(button):focus-visible,:where(summary):focus-visible{
  outline:3px solid var(--accent-2);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .rec-card,.btn,.paystrip img,.faq details,.related a{transition:none!important}
  .rec-card:hover,.btn:hover,.paystrip img:hover{transform:none!important}
}
@media (max-width:640px){
  .rec-card{gap:14px;padding:14px}
  .keyfacts{padding:16px 18px}
  .hero{padding:34px 0 40px}
  .criteria{padding:22px 18px}
  body{font-size:17px}
}

/* footer sitemap (hub links with section anchors) */
.sitemap{margin:26px 0 8px;border-top:1px solid var(--line);padding-top:14px}
.sitemap summary{cursor:pointer;font-family:var(--font-data);font-size:.78rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft)}
.sm-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px 22px;margin-top:14px}
.sm-cols .sm-page{font-weight:700;text-decoration:none;color:var(--ink)}
.sm-cols ul{list-style:none;margin:6px 0 0;padding:0}
.sm-cols li{font-size:.8rem;line-height:1.5}
.sm-cols li a{color:var(--ink-soft);text-decoration:none}
.sm-cols li a:hover{text-decoration:underline}
/* three-up illustration strips */
.fig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:14px 0 20px;clear:both}
.fig-grid figure{margin:0}
.fig-grid img{width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--line);display:block}
.fig-grid figcaption{font-family:var(--font-data);font-size:.7rem;color:var(--ink-faint);margin-top:6px;line-height:1.4}
@media(max-width:600px){.fig-grid{grid-template-columns:repeat(3,1fr);gap:8px}.fig-grid figcaption{font-size:.62rem}}

/* ---------------------------------------------------------------- zimpler: CTA + cards */
.theme-zimpler .btn{background:var(--accent);background-image:none;color:var(--accent-ink);
  font-family:var(--font-head);font-weight:700;letter-spacing:-.01em;border:0;
  box-shadow:0 8px 20px -10px rgba(94,224,160,.9)}
.theme-zimpler .btn:hover{background:var(--accent-2);color:var(--accent-ink)}
.theme-zimpler .featured::before{background:linear-gradient(90deg,var(--accent) 0%,var(--accent-2) 100%)}
.theme-zimpler .rec-card::before{background:var(--brand);color:#fff}
.theme-zimpler .rec-card:first-child::before{background:var(--accent);color:var(--accent-ink)}
.theme-zimpler .nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--accent)}
.theme-zimpler .keyfacts{border-left-color:var(--accent)}
.theme-zimpler .note--warn{border-left-color:#d9a441}
.theme-zimpler .author-box .role{color:var(--brand-2)}
.theme-zimpler .pill--no{background:var(--no-bg);color:var(--no)}
.theme-zimpler .site-footer{background:var(--brand-3)}
/* flow line: the mint rule also appears as a thin top border on tables and the paystrip */
.theme-zimpler .table-wrap{border-top:3px solid var(--accent)}
.theme-zimpler thead th{background:var(--brand);color:#eef0f4}
.theme-zimpler .paystrip{border-top:3px solid var(--accent)}
/* mobile table row-label cells (empty data-label) read as headings, not blanks */
@media (max-width:860px){
  .theme-zimpler td[data-label=""]{font-weight:700;color:var(--ink)}
  .theme-zimpler td[data-label=""]::before{display:none}
}