/* ============================================================================
   CasinoLedger — visual system.
   Built on the Wiza reference tokens (DESIGN.md): a light violet universe,
   compact Inter type, 8px radius, capsule pills, soft blue-tinted shadows and
   lavender gradient washes behind white surfaces. Violet is the brand/accent;
   licence + score status carry their OWN semantic colours (green/amber/red),
   deliberately kept apart from the accent so "safe/unsafe" never reads as decoration.
   ============================================================================ */

:root {
  /* violet brand */
  --deep-iris:#26114a; --plum:#312749; --amethyst:#3e0079; --mist-violet:#edecff;
  --lavender:#b99aff; --lavender-2:#7d43ff;
  /* neutrals */
  --canvas:#ffffff; --paper:#f6f7fa; --mist:#e6e2e3; --smoke:#c1c7cf;
  --ash:#9491a1; --slate:#615e6e; --charcoal:#333333;
  /* semantic status (separate from the violet accent) */
  --ok:#157347; --ok-bg:#e7f3ec; --ok-line:#b7dcc5;
  --warn:#8a5a00; --warn-bg:#fbf1dd; --warn-line:#ecd9ad;
  --bad:#b02a37; --bad-bg:#fbe9eb; --bad-line:#eec2c7;
  /* roles */
  --ink:var(--deep-iris); --body:var(--charcoal); --dim:var(--slate); --muted:var(--ash);
  --line:var(--mist); --bg:var(--canvas); --surface:var(--paper); --tint:var(--mist-violet);
  --link:var(--amethyst); --brand:var(--deep-iris);
  --shadow-sm:rgba(18,55,105,.08) 0 2px 4px 0, rgba(18,55,105,.04) 0 1px 1px 0, rgba(18,55,105,.06) 0 0 0 1px;
  --shadow-lg:rgba(14,59,101,.06) 0 32px 24px -12px, rgba(14,59,101,.02) 0 6px 4px 0, rgba(14,59,101,.03) 0 3px 3px 0, rgba(14,59,101,.05) 0 1px 1px 0;
  --wash:linear-gradient(180deg, #f3f0ff 0%, #faf9ff 40%, #ffffff 100%);
  --max:66rem;
  --r:8px; --r-lg:24px; --pill:1440px;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --display:'Plus Jakarta Sans','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --canvas:#161022; --paper:#1e1730; --mist:#2f2743; --smoke:#3b3352;
  --ash:#8b82a3; --slate:#a99fc2; --charcoal:#d9d3e6;
  --deep-iris:#e9e2f8; --plum:#d6cdec; --amethyst:#b99aff; --mist-violet:#241a3a;
  --ok:#4fd08a; --ok-bg:#123024; --ok-line:#1f5540;
  --warn:#e0a850; --warn-bg:#2e2513; --warn-line:#5a4a1f;
  --bad:#f28b96; --bad-bg:#331519; --bad-line:#61303a;
  --ink:var(--deep-iris); --body:var(--charcoal); --link:var(--amethyst); --brand:var(--deep-iris);
  --shadow-sm:rgba(0,0,0,.4) 0 2px 6px 0, rgba(125,67,255,.12) 0 0 0 1px;
  --shadow-lg:rgba(0,0,0,.5) 0 24px 40px -16px, rgba(125,67,255,.08) 0 0 0 1px;
  --wash:linear-gradient(180deg,#1d1533 0%, #191227 45%, #161022 100%);
}}
:root[data-theme="light"]{
  --canvas:#fff; --paper:#f6f7fa; --mist:#e6e2e3; --smoke:#c1c7cf; --ash:#9491a1; --slate:#615e6e;
  --charcoal:#333; --deep-iris:#26114a; --plum:#312749; --amethyst:#3e0079; --mist-violet:#edecff;
  --ok:#157347; --ok-bg:#e7f3ec; --ok-line:#b7dcc5; --warn:#8a5a00; --warn-bg:#fbf1dd; --warn-line:#ecd9ad;
  --bad:#b02a37; --bad-bg:#fbe9eb; --bad-line:#eec2c7;
  --wash:linear-gradient(180deg,#f3f0ff 0%, #faf9ff 40%, #fff 100%);
  --shadow-sm:rgba(18,55,105,.08) 0 2px 4px 0, rgba(18,55,105,.06) 0 0 0 1px;
  --shadow-lg:rgba(14,59,101,.06) 0 32px 24px -12px, rgba(14,59,101,.05) 0 1px 1px 0;
}
:root[data-theme="dark"]{
  --canvas:#161022; --paper:#1e1730; --mist:#2f2743; --smoke:#3b3352; --ash:#8b82a3; --slate:#a99fc2;
  --charcoal:#d9d3e6; --deep-iris:#e9e2f8; --plum:#d6cdec; --amethyst:#b99aff; --mist-violet:#241a3a;
  --ok:#4fd08a; --ok-bg:#123024; --ok-line:#1f5540; --warn:#e0a850; --warn-bg:#2e2513; --warn-line:#5a4a1f;
  --bad:#f28b96; --bad-bg:#331519; --bad-line:#61303a;
  --wash:linear-gradient(180deg,#1d1533 0%, #191227 45%, #161022 100%);
  --shadow-sm:rgba(0,0,0,.4) 0 2px 6px 0, rgba(125,67,255,.12) 0 0 0 1px;
  --shadow-lg:rgba(0,0,0,.5) 0 24px 40px -16px, rgba(125,67,255,.08) 0 0 0 1px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--body);
  font-family:var(--font); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  background-image:var(--wash); background-repeat:no-repeat; background-size:100% 620px;
}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--display); color:var(--ink); font-weight:600; letter-spacing:-.01em; text-wrap:balance}
h1{font-size:2.2rem; line-height:1.05; margin:.5em 0 .35em}
h2{font-size:1.4rem; line-height:1.1; margin:2em 0 .6em}
h3{font-size:1.1rem; margin:1.4em 0 .4em}
p{margin:.6em 0}
.skip{position:absolute; left:-999px}
.skip:focus{left:1rem; top:.5rem; background:var(--bg); padding:.5rem; border-radius:var(--r); z-index:10}

/* ---- layout shell ---- */
main,.crumbs{max-width:var(--max); margin-inline:auto; padding-inline:1.5rem}

/* floating pill nav */
header.site{
  max-width:var(--max); margin:1rem auto; padding:.55rem .8rem .55rem 1.1rem;
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
  background:var(--bg); border-radius:var(--pill); box-shadow:var(--shadow-sm);
  position:sticky; top:.75rem; z-index:20;
}
header.site .brand{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--display);
  font-weight:700; font-size:1.15rem; color:var(--brand); letter-spacing:-.02em}
header.site .brand:hover{text-decoration:none}
header.site .brand-mark{width:1.6rem; height:1.6rem; border-radius:6px; display:block}
.brand-word b{color:var(--amethyst); font-weight:800}
header.site nav{display:flex; flex-wrap:wrap; gap:.25rem}
header.site nav a{
  padding:.4rem .85rem; border-radius:var(--pill); font-size:.85rem; font-weight:500;
  color:var(--plum); transition:background .15s,color .15s;
}
header.site nav a:hover{background:var(--tint); color:var(--amethyst); text-decoration:none}

.crumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; padding:0; margin:1rem 0 .25rem;
  font-size:.8rem; color:var(--muted)}
.crumbs li+li::before{content:"›"; margin-right:.5rem; color:var(--smoke)}
.crumbs a{color:var(--dim)}

/* ---- generic surfaces ---- */
main > article{padding-block:.5rem 1rem}
section{margin:1.75rem 0}

/* verdict — the extractable lead, as a raised violet-tinted card */
.verdict{
  font-size:1.12rem; line-height:1.5; color:var(--plum);
  background:linear-gradient(180deg,var(--tint),transparent);
  border:1px solid var(--line); border-left:3px solid var(--amethyst);
  border-radius:var(--r); padding:1.1rem 1.25rem; margin:1rem 0 1.75rem;
  box-shadow:var(--shadow-sm);
}
.lede{color:var(--dim)}
.note{font-size:.85rem; color:var(--dim); margin:.4rem 0}
.conv{color:var(--muted); font-size:.86em; font-weight:400}

/* ---- brand mark: monogram chip or monochrome logo ---- */
.mark{flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r); overflow:hidden; vertical-align:middle}
.mark-sm{width:1.6rem; height:1.6rem; font-size:.72rem}
.mark-lg{width:3rem; height:3rem; font-size:1.05rem; border-radius:12px}
.mark-mono{font-family:var(--display); font-weight:700; letter-spacing:-.02em;
  background:var(--mk-bg,#ece7fb); color:var(--mk-fg,#3e0079); line-height:1}
.mark-mono[data-t="0"]{--mk-bg:#ede9ff; --mk-fg:#4b2bad}
.mark-mono[data-t="1"]{--mk-bg:#e7e0fb; --mk-fg:#5b3a9e}
.mark-mono[data-t="2"]{--mk-bg:#efe6fb; --mk-fg:#6a3fa0}
.mark-mono[data-t="3"]{--mk-bg:#e9e3f7; --mk-fg:#3e0079}
.mark-mono[data-t="4"]{--mk-bg:#f0e9fd; --mk-fg:#5a2ea6}
.mark-mono[data-t="5"]{--mk-bg:#e6ddf9; --mk-fg:#4a2a9a}
/* logo.dev returns branded SQUARE tiles (like app icons) — each on its own brand background,
   so they fill the rounded mark box edge-to-edge and read cleanly on light OR dark pages.
   They are shown in colour: 37 of 44 carry a baked background, and forcing grayscale turns a
   dark-background mark (bet365, Coral) into an near-invisible tile in dark mode. To switch the
   whole site to monochrome instead, add `filter:grayscale(1)` to this one rule. */
.mark-logo{background:var(--canvas); object-fit:cover}
@media (prefers-color-scheme:dark){ .mark-mono{--mk-bg:#2a2140; --mk-fg:#c3aaff} }
:root[data-theme="dark"] .mark-mono{--mk-bg:#2a2140; --mk-fg:#c3aaff}
.hd-title{display:flex; align-items:center; gap:.85rem}
.hd-title h1{margin:.1rem 0}
td.who .wholine{display:inline-flex; align-items:center; gap:.5rem}

/* ---- pills: badges & tags ---- */
.badge,.tag{display:inline-block; border-radius:var(--pill); font-weight:600; vertical-align:middle;
  line-height:1.4; white-space:nowrap}
.badge{font-size:.72rem; padding:.2em .7em; border:1px solid transparent}
.badge-ok{background:var(--ok-bg); color:var(--ok); border-color:var(--ok-line)}
.badge-warn,.badge-unverified,.badge-stale{background:var(--warn-bg); color:var(--warn); border-color:var(--warn-line)}
.badge-bad{background:var(--bad-bg); color:var(--bad); border-color:var(--bad-line)}
.badge-stale{font-weight:500; text-transform:none}
.tag{font-size:.7rem; padding:.15em .6em; background:var(--tint); color:var(--amethyst)}
.tag-attr{text-transform:capitalize; background:var(--surface); color:var(--dim); border:1px solid var(--line)}
.checked{color:var(--muted); font-size:.82rem; margin-left:.5rem}
.meta{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin:.3rem 0 0}

/* ---- data list ---- */
dl{display:grid; grid-template-columns:max-content 1fr; gap:.5rem 1.5rem; margin:1rem 0}
dl dt{font-weight:600; color:var(--dim); font-size:.82rem; text-transform:uppercase; letter-spacing:.04em;
  padding-top:.1rem}
dl dd{margin:0}

/* ---- tables: dense, alternating; each table is its own rounded scroll card ---- */
table{border-collapse:collapse; width:100%; font-size:.9rem; background:var(--bg);
  display:block; overflow-x:auto; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-sm); margin:1rem 0}
th,td{text-align:left; padding:.6rem .8rem; vertical-align:top}
thead th{font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--dim);
  font-weight:600; background:var(--surface); border-bottom:1px solid var(--line)}
tbody tr{border-bottom:1px solid var(--line)}
tbody tr:nth-child(even){background:var(--surface)}
tbody tr:last-child{border-bottom:0}
tbody tr:hover{background:var(--tint)}
tr.fastest{background:var(--ok-bg) !important}
/* 2-column key/value tables (payouts, enforcement-by-regulator) fill the width instead of
   shrinking to content — a block-level scroll table leaves dead space on the right on mobile. */
table.kv{display:table; width:100%}
table.kv td:last-child,table.kv th:last-child{text-align:right; white-space:nowrap;
  font-variant-numeric:tabular-nums; color:var(--muted)}
.rank td.pos{font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; width:2.5rem}
.rank td.who{font-weight:600; white-space:nowrap}
.rank td.who a{color:var(--ink)}
.stats td:last-child,.stats th:last-child,.acts td,.vs td{font-variant-numeric:tabular-nums}
.src{font-size:.78rem; margin-left:.4rem; white-space:nowrap}

/* ---- cards grid (hubs, facets, compare) ---- */
ul.cards{list-style:none; padding:0; margin:1rem 0; display:grid; gap:.75rem;
  grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
ul.cards li{background:var(--bg); border:1px solid var(--line); border-radius:var(--r);
  padding:.85rem 1rem; box-shadow:var(--shadow-sm); transition:transform .15s, box-shadow .15s}
ul.cards li:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg)}
ul.cards li a{font-weight:600; color:var(--ink); display:block}
ul.cards li .card-head{display:flex; align-items:center; gap:.55rem}
ul.cards li .card-head a{display:inline}
ul.cards li .conv{display:block; margin-top:.35rem}

/* ---- quick-facts card (profile) ---- */
.quickfacts{background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); padding:1.25rem 1.5rem; margin:1.25rem 0}
.qf-grid{display:grid; gap:1.1rem 2rem; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.qf h3{margin:.1rem 0 .5rem; font-family:var(--font); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--dim); font-weight:700}
.qf .headline{font-size:1.35rem; font-family:var(--display); font-weight:600; color:var(--ink); line-height:1.1}
.qf .headline .conv{display:block; font-size:.8rem; margin-top:.15rem}
.chiprow{display:flex; flex-wrap:wrap; gap:.35rem}
.chip{display:inline-flex; align-items:center; gap:.35em; border-radius:var(--pill); font-size:.75rem;
  padding:.2em .7em; background:var(--surface); color:var(--dim); border:1px solid var(--line)}
.chip.more{background:transparent; color:var(--muted); border-style:dashed}
.chip-geo{background:var(--tint); color:var(--amethyst); border-color:transparent}
.chip-link{color:var(--ink); text-decoration:none; transition:background .15s, color .15s, border-color .15s}
.chip-link:hover{background:var(--tint); color:var(--amethyst); border-color:transparent; text-decoration:none}
.fits .fitrow{display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem; margin:.7rem 0}
.fits .fitlabel{flex:0 0 9rem; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--dim); font-weight:600}
@media (max-width:640px){.fits .fitlabel{flex-basis:100%}}
/* monochrome payment icon: a CSS mask filled with the current text colour → theme-adaptive */
.payicon{display:inline-block; width:1.05em; height:1.05em; flex:0 0 auto; background:currentColor;
  -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center}
/* small country flag */
.flag{display:inline-block; width:1.2em; height:.9em; flex:0 0 auto; border-radius:2px;
  background-size:cover; background-position:center; box-shadow:0 0 0 1px rgba(0,0,0,.12)}

/* ---- offer / bonus ---- */
.offer{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1rem 1.25rem}
.offer .headline{font-size:1.15rem; font-weight:600; color:var(--ink); font-family:var(--display)}

/* ---- excluded / gap callouts ---- */
.excluded,.gap{border-radius:var(--r); padding:.85rem 1.25rem; margin:1.25rem 0; font-size:.9rem}
.excluded{background:var(--surface); border:1px solid var(--line)}
.excluded li{margin:.35rem 0}
.gap{background:var(--warn-bg); color:var(--warn); border:1px solid var(--warn-line)}

/* ---- stats figures ---- */
ul.figures{list-style:none; padding:0; margin:1.25rem 0; display:grid; gap:.9rem;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
ul.figures li{background:var(--bg); border:1px solid var(--line); border-radius:var(--r);
  padding:1.1rem; box-shadow:var(--shadow-sm)}
ul.figures .fig{display:block; font-family:var(--display); font-size:2.1rem; font-weight:600;
  line-height:1; color:var(--brand); font-variant-numeric:tabular-nums}
ul.figures .cap{display:block; margin-top:.45rem; font-size:.82rem; color:var(--dim)}
.statnote{font-size:.78rem; color:var(--muted); font-style:italic; margin:.5rem 0 0}

/* ---- versus ---- */
table.vs th:first-child{width:11rem; color:var(--dim)}
table.vs thead th{font-family:var(--font)}
table.vs td.win{background:var(--ok-bg); font-weight:600}
table.vs th .conv,table.vs td .conv{display:block; font-weight:400}

/* ---- section intros with pill eyebrow (methodology etc.) ---- */
.formula li{margin:.5rem 0}
.role,.listing{font-size:.8rem; color:var(--muted); margin-left:.3rem}

/* ---- responsible gambling: a serious safety notice, amber not violet ---- */
.rg{max-width:var(--max); margin:2.5rem auto 0; padding:1.5rem; border-radius:var(--r-lg);
  background:var(--warn-bg); border:1px solid var(--warn-line)}
.rg h2{font-family:var(--display); font-size:1.15rem; margin-top:0; color:var(--warn)}
.rg p{color:var(--body)}
.rg a{color:var(--amethyst)}
.rg ul{padding-left:1.2rem}
.rg .rg-tools{font-size:.88rem; color:var(--dim)}

/* ---- footer ---- */
footer.site{max-width:var(--max); margin:2.5rem auto 1.5rem; padding:1.5rem;
  border-top:1px solid var(--line); font-size:.85rem; color:var(--dim)}
footer.site .foot-lead{max-width:40rem}
.footlinks{display:flex; flex-wrap:wrap; gap:1.5rem 2.5rem; margin:1.25rem 0}
.footcol{display:flex; flex-direction:column; gap:.35rem}
.footcol b{color:var(--ink); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.15rem}
.footcol a{color:var(--dim)}
footer.site .disclosure{color:var(--muted); font-size:.8rem; max-width:44rem}
/* prose pages (about, sources, disclaimer, privacy, terms, responsible, partnerships) */
.prose{max-width:44rem}
.prose h2{font-size:1.25rem}
.prose ul{padding-left:1.2rem}
.prose li{margin:.35rem 0}

/* ---- licence-register directory ---- */
.registers{max-width:52rem}
.reg{border-left:3px solid var(--line); padding:.1rem 0 .1rem 1rem; margin:1.4rem 0}
.reg:hover{border-left-color:var(--brand)}
.reg h3{font-size:1rem; margin:0 0 .3rem; display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap}
.reg-juris{font-size:.78rem; font-weight:500; color:var(--dim); text-transform:uppercase; letter-spacing:.04em}
.reg-links{margin:.2rem 0 .35rem; font-size:.9rem}
.reg-shows{margin:.2rem 0; font-size:.87rem; color:var(--body)}
.reg-caveat{margin:.35rem 0 0; font-size:.85rem; color:var(--dim); border-left:2px solid var(--line);
  padding-left:.6rem}
.badge-plain{background:var(--surface); color:var(--dim); border-color:var(--line)}

/* ---- register checks: the evidence behind "licence not verified" ---- */
ul.lchecks{list-style:none; padding:0; margin:.5rem 0 0; display:flex; flex-direction:column; gap:.35rem}
ul.lchecks li{font-size:.87rem; display:flex; align-items:center; gap:.4rem; flex-wrap:wrap}

/* ---- brand Q&A: question-shaped headings, sourced answers ---- */
.qa-item{border-left:3px solid var(--line); padding:.1rem 0 .1rem 1rem; margin:1.1rem 0;
  transition:border-color .15s}
.qa-item:hover{border-left-color:var(--brand)}
.qa-item h3{font-size:1rem; margin:0 0 .35rem; color:var(--ink)}
.qa-item p{margin:0; color:var(--body)}

/* ---- contact form ---- */
.contactform{display:flex; flex-direction:column; gap:1rem; max-width:34rem; margin:1.5rem 0}
.contactform .field{display:flex; flex-direction:column; gap:.3rem}
.contactform label{font-weight:600; font-size:.9rem; color:var(--ink)}
.contactform .hint{font-size:.78rem; color:var(--dim)}
.contactform input,.contactform select,.contactform textarea{
  font:inherit; color:var(--ink); background:var(--bg); border:1px solid var(--line);
  border-radius:var(--r); padding:.6rem .7rem; width:100%}
.contactform textarea{resize:vertical; min-height:8rem}
.contactform input:focus,.contactform select:focus,.contactform textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--tint)}
.contactform .hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.btn-primary{align-self:flex-start; font:inherit; font-weight:600; cursor:pointer;
  color:#fff; background:var(--brand); border:0; border-radius:1440px; padding:.65rem 1.4rem;
  box-shadow:var(--shadow-sm); transition:transform .15s, box-shadow .15s, opacity .15s}
.btn-primary:hover{transform:translateY(-1px); box-shadow:var(--shadow-lg)}
.btn-primary:disabled{opacity:.55; cursor:default; transform:none; box-shadow:var(--shadow-sm)}
.formresult{margin:0; font-size:.9rem; min-height:1.2em}
.formresult.ok{color:var(--ok)}
.formresult.err{color:var(--bad)}

@media (max-width:640px){
  h1{font-size:1.7rem}
  header.site{border-radius:var(--r-lg)}
  main,.crumbs{padding-inline:1rem}
  dl{grid-template-columns:1fr; gap:.15rem}
  dl dd{margin-bottom:.6rem}

  /* Wide tables become stacked cards on narrow screens — a horizontal-scrolling 5-column
     table is a poor phone experience, so each row turns into a card whose cells are
     label:value pairs. Opt in with class="cardify"; each <td> needs a data-label. */
  table.cardify{display:block; border:0; box-shadow:none; background:transparent; overflow:visible; margin:1rem 0}
  table.cardify thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  table.cardify tbody,table.cardify tr,table.cardify td{display:block; width:auto}
  table.cardify tr{background:var(--bg); border:1px solid var(--line); border-radius:var(--r);
    box-shadow:var(--shadow-sm); padding:.4rem .95rem; margin-bottom:.75rem}
  table.cardify tr:nth-child(even){background:var(--bg)}
  table.cardify tr:hover{background:var(--bg)}
  table.cardify td{display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
    text-align:right; padding:.4rem 0; border:0; border-bottom:1px solid var(--line)}
  table.cardify td:last-child{border-bottom:0}
  table.cardify td::before{content:attr(data-label); flex:0 0 auto; text-align:left;
    font-weight:600; color:var(--dim); font-size:.68rem; text-transform:uppercase; letter-spacing:.04em}
  table.cardify td[data-label=""]::before{display:none}
  /* the primary "who"/name cell is the card's title: full width, no label, bigger */
  table.cardify td.who,table.cardify td.card-title{display:block; text-align:left; border-bottom:1px solid var(--line);
    padding-bottom:.5rem; margin-bottom:.15rem; font-size:1rem}
  table.cardify td.who::before,table.cardify td.card-title::before{display:none}
  /* long free-text cells (a regulator action summary) stack label-above-value, full width */
  table.cardify td.cell-wide{display:block; text-align:left}
  table.cardify td.cell-wide::before{display:block; margin-bottom:.2rem}
  tr.fastest{border-left:3px solid var(--ok) !important}
  /* versus: the two brand columns sit side by side inside each dimension card */
  table.vs.cardify td{flex:1; flex-direction:column; align-items:flex-start; text-align:left;
    border:1px solid var(--line); border-radius:var(--r); padding:.5rem .6rem; background:var(--surface)}
  table.vs.cardify tr{display:flex; flex-wrap:wrap; gap:.5rem}
  table.vs.cardify tr th{flex-basis:100%; padding:0; font-family:var(--display); font-size:.95rem; color:var(--ink)}
  table.vs.cardify td::before{font-size:.65rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}