/* ============================================================================
   DegenStake — design system
   Built from claude/DIRECTION.md. Page-by-page rollout: a page that has been
   migrated links this file; pages still on the old markup link css/style.css.
   Radii are 0 everywhere. There are no shadows. Depth is line and background
   step only.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens -- */
:root{
  /* Colour is data on this site. Each value has one job.                     */
  --bg:#1F2126;          /* instrument panel                                  */
  --bg-2:#2B2E34;        /* "someone else holds it": tracks, fills, hover     */
  --line:#3A3D44;        /* content separation only — 1.48 to --bg           */
  --text:#F3F1EC;        /* said out loud — 14.27 to --bg                    */
  --muted:#9A9891;       /* second voice: captions, dates, 18+ — 5.58        */
  --accent:#FF5A36;      /* your money stays yours · primary action · active  */

  /* Derived, from contrast arithmetic — not from taste.                      */
  --accent-hi:#FF7A5C;   /* --accent on --bg-2 is 4.39 (fails AA); this 5.31 */
  --line-strong:#757880; /* --line is 1.48 — a control border would vanish    */

  /* Type scale. 380px → 1400px. No component sets a px size of its own.      */
  --t-display:clamp(3.25rem, 1.2rem + 8.63vw, 8.75rem);
  --t-h1:clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem);
  --t-h2:clamp(1.875rem, 1.27rem + 2.55vw, 3.5rem);
  --t-h3:clamp(1.25rem, 1.11rem + .59vw, 1.625rem);
  --t-lead:clamp(1.0625rem, .97rem + .39vw, 1.3125rem);
  --t-body:clamp(1rem, .96rem + .1vw, 1.0625rem);
  --t-small:clamp(.8125rem, .79rem + .1vw, .875rem);
  --t-micro:.75rem;
  --t-ui:.9375rem;
  --t-score:clamp(1.625rem, 1.44rem + .78vw, 2.125rem);
  --t-stat:clamp(2.25rem, 1.78rem + 1.96vw, 3.5rem);

  /* Vertical rhythm. Base 8. Nothing lands between these steps.              */
  --s-section:clamp(2.75rem, 1.9rem + 3.6vw, 4.5rem);
  --s-hero-top:clamp(2rem, 1.2rem + 3.4vw, 4rem);
  --s-hero-gap:clamp(1.5rem, 1.15rem + 1.57vw, 2.5rem);
  --s-head-gap:clamp(1.5rem, 1.35rem + .78vw, 2rem);

  --gutter:24px;
  --pad:40px;
  --wrap:1400px;
  --header-h:64px;

  --font:'Archivo','Helvetica Neue',Arial,system-ui,sans-serif;

  /* Legacy alias. Review pages carry inline style="color:var(--text-faint)";
     without this the caption silently falls back to full-strength text. */
  --text-faint:var(--muted);
}

/* Components below set an explicit display, which would otherwise beat the
   hidden attribute. The cookie bar, the ranking lenses and the contact form
   status all rely on [hidden]. */
[hidden]{display:none !important}

/* The sticky header is 64px; anchor targets land clear of it. On ≤768px the
   header is not sticky and this drops to 16px (see the 768 breakpoint). */
[id]{scroll-margin-top:calc(var(--header-h) + 16px)}

/* ------------------------------------------------------------------ base -- */
*,*::before,*::after{box-sizing:border-box}
html{
  background:var(--bg);
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:var(--t-body);
  font-variation-settings:"wdth" 100;
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}

h1,h2{
  margin:0;
  font-weight:800;
  font-variation-settings:"wdth" 70;
  text-transform:uppercase;
  letter-spacing:-.01em;
}
h1{font-size:var(--t-h1);line-height:.92}
h2{font-size:var(--t-h2);line-height:.95}
h3{
  margin:0;
  font-size:var(--t-h3);
  font-weight:700;
  font-variation-settings:"wdth" 85;
  line-height:1.15;
}
p{margin:0 0 20px;max-width:65ch}
p:last-child{margin-bottom:0}

a{color:inherit}
.prose a,
main p a{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-decoration-color:var(--accent);
  text-underline-offset:3px;
}
.prose a:hover,
main p a:hover{text-decoration-color:var(--text)}
.prose a:visited,
main p a:visited{text-decoration-color:var(--muted)}

/* One focus rule for the whole site. The 2px offset matters: on an orange
   fill the ring would sit at 2.75 and disappear; offset puts it on --bg. */
:focus-visible{outline:2px solid var(--text);outline-offset:2px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:12px 20px;background:var(--accent);color:var(--bg);
  font-size:var(--t-ui);font-weight:600;text-decoration:none;
}
.skip-link:focus{left:0}

section{padding:var(--s-section) 0;border-top:1px solid var(--line)}
section:first-of-type{border-top:0}
.sec-head{margin:0 0 var(--s-head-gap)}
.sec-head p{margin:16px 0 0;color:var(--muted);max-width:65ch}

/* --------------------------------------------- 1. market composition bar -- */
/* Twelve equal divisions: six platforms that do not hold your money, six that
   do. A census, not a ranking — so the divisions are equal and unsorted by
   score. It is aria-hidden; the sentence below it carries the meaning. */
.market{display:flex;gap:2px;width:100%;background:var(--bg)}
.market i{flex:1 1 0;height:14px;background:var(--bg-2);display:block}
.market i.nc{background:var(--accent)}
.market-note{
  margin:8px 0 0;font-size:var(--t-micro);line-height:1.4;
  font-variation-settings:"wdth" 100;font-weight:500;color:var(--muted);
}
.market-wrap{padding-top:10px}
/* Inner pages: 4px, no caption, drawn at once. On a review page the division
   of that platform is raised — "this is where you are". */
.market.is-thin{align-items:flex-end;height:10px}
.market.is-thin i{height:4px}
.market.is-thin i.me{height:10px}
.market.is-thin + .age{padding-top:6px}

/* One pass, left to right, once, on the homepage only. The instrument takes
   a reading. Only background-color changes. */
.market.is-drawing i{background:var(--bg-2);animation:market-in .28s ease-out both}
.market.is-drawing i.nc{animation-name:market-in-nc}
@keyframes market-in{from{background:var(--bg)}to{background:var(--bg-2)}}
@keyframes market-in-nc{from{background:var(--bg)}to{background:var(--accent)}}
.market.is-drawing i:nth-child(1){animation-delay:0ms}
.market.is-drawing i:nth-child(2){animation-delay:40ms}
.market.is-drawing i:nth-child(3){animation-delay:80ms}
.market.is-drawing i:nth-child(4){animation-delay:120ms}
.market.is-drawing i:nth-child(5){animation-delay:160ms}
.market.is-drawing i:nth-child(6){animation-delay:200ms}
.market.is-drawing i:nth-child(7){animation-delay:240ms}
.market.is-drawing i:nth-child(8){animation-delay:280ms}
.market.is-drawing i:nth-child(9){animation-delay:320ms}
.market.is-drawing i:nth-child(10){animation-delay:360ms}
.market.is-drawing i:nth-child(11){animation-delay:400ms}
.market.is-drawing i:nth-child(12){animation-delay:440ms}

/* ------------------------------------------------------- header, 18+, nav -- */
.age{
  padding:8px 0;font-size:var(--t-micro);line-height:1.4;color:var(--muted);
  font-variation-settings:"wdth" 100;
}
.age a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.age a:hover{color:var(--text)}

.site-header{
  position:sticky;top:0;z-index:40;
  background:var(--bg);border-bottom:1px solid var(--line);
}
.site-header .bar{
  display:flex;align-items:center;gap:32px;min-height:var(--header-h);
}
.brand{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;
  font-size:var(--t-ui);font-weight:800;font-variation-settings:"wdth" 85;
  letter-spacing:.01em;text-decoration:none;color:var(--text);
}
/* The mark: the market bar reduced to its claim — one division filled (your
   money stays yours), one hollow (someone else holds it). See claude/BRAND.md. */
.brand-mark{display:block;flex:none}
.brand-mark .f{fill:var(--accent)}
.brand-mark .h{fill:none;stroke:var(--text);stroke-width:1}

/* External operator link. One system glyph instead of the mix of "→" and "↗"
   characters the copy used to carry: drawn with 1px-weight lines like every
   other mark here, and independent of whether the font has an arrow. */
a[rel~="sponsored"]::after{
  content:"";display:inline-block;flex:none;
  width:.62em;height:.62em;margin-left:.5em;vertical-align:.05em;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 8L8 2M3.5 2H8v4.5' fill='none' stroke='%23000' stroke-width='1.25'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 8L8 2M3.5 2H8v4.5' fill='none' stroke='%23000' stroke-width='1.25'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* The header CTA is .btn-secondary on every page: the header is navigation,
   and the page's own primary action is the one orange fill it gets. */
.nav{margin-left:auto;display:flex;align-items:center;gap:28px}
.nav ul{display:flex;gap:28px;margin:0;padding:0;list-style:none}
/* Scoped to the list on purpose: a bare `.nav a` outranks `.btn-primary`
   (0,1,1 vs 0,1,0) and would paint the CTA label --muted on orange — 1.07. */
.nav ul a{
  font-size:var(--t-ui);font-weight:500;color:var(--muted);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;
}
.nav ul a:hover{color:var(--text)}
.nav ul a.is-section{color:var(--text)}   /* inside this section, not on its index page */
.nav ul a[aria-current="page"]{
  color:var(--text);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;
}

/* ---------------------------------------------------------------- button -- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:12px 24px;
  font-family:var(--font);font-size:var(--t-ui);font-weight:600;
  font-variation-settings:"wdth" 100;
  text-decoration:none;border:1px solid transparent;border-radius:0;
  cursor:pointer;transition:background-color .12s ease-out,border-color .12s ease-out,color .12s ease-out;
}
.btn-primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-hi);border-color:var(--accent-hi);color:var(--bg)}
.btn-secondary{background:transparent;color:var(--text);border-color:var(--line-strong)}
.btn-secondary:hover{border-color:var(--text)}

/* ------------------------------------------------------------------ hero -- */
.hero{padding-top:var(--s-hero-top);padding-bottom:var(--s-section);border-top:0}
.hero-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter)}
.hero h1{
  grid-column:1 / -1;
  font-size:var(--t-display);line-height:.9;
  margin:0 0 var(--s-hero-gap);
}
.hero h1 .hl{color:var(--accent)}
.hero-lead{grid-column:1 / span 6;margin:0;font-size:var(--t-lead);line-height:1.45;max-width:54ch;color:var(--text)}
.hero-side{grid-column:8 / span 5;display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.hero-updated{font-size:var(--t-micro);color:var(--muted);font-weight:500}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}

/* ------------------------------------------------- 2. platform gauge (.g) -- */
/* The track is always 0–10, never "from the best", with ticks at 5.0 and 8.0.
   Without that, five platforms at 86–89% look identical and a component that
   exists for comparison stops allowing any. */
.g-list{border-top:1px solid var(--line)}
.g-scale{
  display:grid;grid-template-columns:48px 260px 1fr auto;gap:20px;
  align-items:end;padding:0 0 10px;
  font-size:var(--t-micro);color:var(--muted);
}
.g-scale .ticks{position:relative;height:1em}
.g-scale .ticks span{position:absolute;transform:translateX(-50%)}
.g-scale .ticks span:nth-child(1){left:0;transform:none}
.g-scale .ticks span:nth-child(2){left:50%}
.g-scale .ticks span:nth-child(3){left:80%}
.g-scale .ticks span:nth-child(4){right:0;left:auto;transform:none}
.g-scale .sc-h{text-align:right}

.g{
  display:grid;grid-template-columns:48px 260px 1fr auto;gap:20px;
  align-items:center;padding:18px 0;min-height:76px;
  border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;
  transition:background-color .12s ease-out;
}
.g:last-child{border-bottom:0}
a.g:hover{background:var(--bg-2)}
a.g:hover .rk{color:var(--text)}
.g .rk{
  font-size:var(--t-small);color:var(--muted);
  font-variant-numeric:tabular-nums;
  transition:color .12s ease-out;
}
.g .nm{
  font-size:var(--t-h3);font-weight:700;font-variation-settings:"wdth" 85;
  line-height:1.15;
}
.g .nm small{
  display:block;margin-top:4px;
  font-size:var(--t-micro);font-weight:500;font-variation-settings:"wdth" 100;
  color:var(--muted);text-transform:none;
}
.g .nm small.nc{color:var(--accent)}

/* Track: 0–10, ticks at 5.0 and 8.0 */
.g .bar{position:relative;height:14px;background:var(--bg-2)}
.g .bar i{display:block;height:100%;width:var(--w);background:var(--text)}
.g .bar i.nc{background:var(--accent)}
.g .bar::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to right,transparent calc(50% - .5px),var(--line-strong) calc(50% - .5px),var(--line-strong) calc(50% + .5px),transparent calc(50% + .5px)),
    linear-gradient(to right,transparent calc(80% - .5px),var(--line-strong) calc(80% - .5px),var(--line-strong) calc(80% + .5px),transparent calc(80% + .5px));
}
.g .sc{
  font-size:var(--t-score);font-weight:800;font-variation-settings:"wdth" 80;
  font-variant-numeric:tabular-nums;line-height:1;text-align:right;min-width:3ch;
}
.g-more{
  /* 44px tap height; the margin drops 24 → 16 so the visible gap to the list
     stays about the same once the line box grows. */
  display:inline-flex;align-items:center;min-height:44px;margin-top:16px;
  font-size:var(--t-ui);font-weight:600;color:var(--accent);
  text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px;
}
.g-more:hover{color:var(--accent-hi);text-decoration-color:var(--accent-hi)}

/* ------------------------------------------------------- 3. filter chips -- */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.chips + .chips{margin-top:12px}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;min-height:44px;
  font-size:var(--t-ui);font-weight:600;font-variation-settings:"wdth" 100;
  color:var(--text);background:transparent;
  border:1px solid var(--line-strong);border-radius:0;
  text-decoration:none;cursor:pointer;
  transition:border-color .12s ease-out,background-color .12s ease-out,color .12s ease-out;
}
.chip:hover{border-color:var(--text)}
.chip small{font-size:var(--t-micro);font-weight:500;color:var(--muted)}
.chip[aria-current="page"],
.chip[aria-pressed="true"]{
  background:var(--accent);border-color:var(--accent);color:var(--bg);
}
.chip[aria-current="page"]:hover,
.chip[aria-pressed="true"]:hover{background:var(--accent);border-color:var(--accent)}
.chip[aria-current="page"] small,
.chip[aria-pressed="true"] small{color:var(--bg);opacity:.75}

/* ------------------------------------------------------------- 4. awards -- */
.awards{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.awards > div{padding:0 24px;border-left:1px solid var(--line)}
.awards > div:first-child{padding-left:0;border-left:0}
.awards > div:last-child{padding-right:0}
.awards .job{font-size:var(--t-h3);font-weight:700;font-variation-settings:"wdth" 85}
.awards .who{
  margin:8px 0 0;font-size:var(--t-body);font-weight:600;color:var(--text);
}
.awards .who.nc{color:var(--accent-hi)}
.awards p{margin:12px 0 0;font-size:var(--t-small);color:var(--muted);max-width:none}

/* ---------------------------------------------------------- 5. method -- */
.method{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:var(--s-head-gap)}
.method > div{padding:0 24px;border-left:1px solid var(--line)}
.method > div:first-child{padding-left:0;border-left:0}
.method > div:last-child{padding-right:0}
.method .pct{
  font-size:var(--t-stat);font-weight:800;font-variation-settings:"wdth" 80;
  font-variant-numeric:tabular-nums;line-height:1;
}
.method .pct.is-topic{color:var(--accent)}   /* custody — the site's subject */
.method h3{margin:12px 0 0}
.method p{margin:10px 0 0;font-size:var(--t-small);color:var(--muted);max-width:none}

/* ------------------------------------------------------ 6. review cards -- */
/* A card here is a row of a list, not an object: one line underneath, no
   border, no fill, no shadow. */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter) 64px}
.card-list{border-top:1px solid var(--line)}
/* Scoped to a.card: on the homepage a card is the link itself. Inner pages use
   div.card with a heading and a paragraph, which must not become a flex row. */
a.card{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:24px 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;
  transition:border-color .12s ease-out;
}
a.card:hover{border-bottom-color:var(--accent)}
a.card .t{font-size:var(--t-h3);font-weight:700;font-variation-settings:"wdth" 85;color:var(--text)}
a.card:visited .t{color:var(--muted)}
a.card .t small{
  display:block;margin-top:6px;
  font-size:var(--t-small);font-weight:400;font-variation-settings:"wdth" 100;
  color:var(--muted);
}
a.card .meta{flex:none;font-size:var(--t-small);color:var(--muted);white-space:nowrap}

/* ---------------------------------------------------------------- 7. FAQ -- */
/* The <details class="faq-item"> markup is not touched — the validator and the
   FAQPage JSON-LD depend on it. CSS only. */
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  position:relative;list-style:none;cursor:pointer;
  padding:20px 40px 20px 0;
  font-size:var(--t-h3);font-weight:700;font-variation-settings:"wdth" 85;
  line-height:1.2;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:""}
/* "+" → "−" out of two 1px lines. No chevron rotation: rotation is a
   transform, and transforms are not used in this system. */
.faq-item summary::after,
.faq-item summary::before{
  content:"";position:absolute;right:4px;top:50%;background:var(--line-strong);
}
.faq-item summary::before{width:14px;height:1px;margin-top:-.5px}
.faq-item summary::after{width:1px;height:14px;margin-top:-7px;right:10px}
.faq-item[open] summary::after{display:none}
.faq-item summary:hover::before,
.faq-item summary:hover::after{background:var(--text)}
.faq-item > *:not(summary){margin:0 0 24px;color:var(--muted);max-width:65ch}
.faq-item[open] summary{padding-bottom:12px}

/* --------------------------------------------------------------- footer -- */
.site-footer{margin-top:96px;border-top:1px solid var(--line);padding:var(--s-section) 0 32px}
/* Four columns, not three: the old header carried a dropdown linking all eight
   sport and coin pages from every page. The new header has no dropdown, so the
   footer keeps those site-wide internal links alive. */
.footer-cols{display:grid;grid-template-columns:repeat(4,minmax(0,240px));gap:32px var(--gutter)}
.footer-cols h2{
  font-size:var(--t-micro);font-weight:600;font-variation-settings:"wdth" 100;
  text-transform:none;letter-spacing:0;color:var(--muted);line-height:1.4;margin:0 0 12px;
}
.footer-cols ul{margin:0;padding:0;list-style:none}
.footer-cols li + li{margin-top:8px}
/* The hit area, not the type, grows: 24px rows + 8px gap = a 32px pitch.
   Block-level flex so the li's own line box (17px × 1.5) cannot stretch the
   row; fit-content keeps the target to the words, not the whole column. */
.footer-cols a{
  display:flex;width:fit-content;align-items:center;min-height:24px;
  font-size:var(--t-small);color:var(--muted);text-decoration:none;
}
.footer-cols a:hover{color:var(--text)}
.footer-legal{
  margin-top:48px;padding-top:24px;border-top:1px solid var(--line);
  font-size:var(--t-micro);color:var(--muted);line-height:1.5;
}
.footer-legal p{max-width:none;margin:0 0 8px}
.footer-legal p:last-child{margin:0}

/* ---------------------------------------------------------------- anchor -- */
section:target{border-left:2px solid var(--accent)}

/* =============================================================================
   CONTENT COMPONENTS — inner pages
   The 41 inner pages keep their markup byte-for-byte where it carries meaning:
   headings, paragraphs, tables, FAQ, JSON-LD, breadcrumbs and the living blocks.
   Only the stylesheet changes, so nothing a search or answer engine reads is
   rewritten. The rules below restate the old components in this system: lines
   instead of boxes, --accent only for non-custodial and primary actions,
   no radius, no shadow, no gradient.
   ========================================================================== */

/* ------------------------------------------------------- layout wrappers -- */
.container{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.container-narrow{width:100%;max-width:calc(65ch + 2 * var(--pad));margin-inline:auto;padding-inline:var(--pad)}
section.tight{padding:calc(var(--s-section) * .66) 0}
.mt-0{margin-top:0}
.text-center{text-align:left}   /* the system is left-aligned throughout */
hr{border:0;border-top:1px solid var(--line);margin:48px 0}
main li a,
table a{text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--accent);text-underline-offset:3px}
main li a:hover,
table a:hover{text-decoration-color:var(--text)}

/* Component headings that are h2 in the markup but must not take the full
   56px section size. The element stays h2 — only the rendering changes. */
.head-row h2,.section-head h2,.cta-banner h2,.end-cta-body h2{font-size:clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem)}

.eyebrow{
  display:block;margin:0 0 12px;
  font-size:var(--t-micro);font-weight:500;color:var(--muted);
  text-transform:none;letter-spacing:0;   /* no caps label above a heading */
}
.lead{font-size:var(--t-lead);line-height:1.45;max-width:54ch;color:var(--text)}

.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin:0 0 var(--s-head-gap)}
.head-row p{margin:12px 0 0;color:var(--muted)}
.section-head{max-width:65ch;margin:0 0 var(--s-head-gap);text-align:left}
.section-head p{margin:12px 0 0;color:var(--muted)}
.link-more{
  font-size:var(--t-ui);font-weight:600;white-space:nowrap;
  text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px;
}
.link-more:hover{text-decoration-color:var(--text)}

/* ------------------------------------------------------ buttons, legacy -- */
.btn-sm{min-height:44px;padding:10px 16px;font-size:var(--t-small)}
.btn-lg{min-height:56px;padding:16px 28px}
.btn-block{width:100%}
.btn-outline,
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-strong)}
.btn-outline:hover,
.btn-ghost:hover{border-color:var(--text)}

/* ------------------------------------------------------------ page hero -- */
.content-hero{padding:var(--s-hero-top) 0 var(--s-hero-gap);border-bottom:1px solid var(--line)}
.content-hero h1{max-width:22ch;margin:0 0 20px}
.breadcrumbs{margin:0 0 20px;font-size:var(--t-micro);color:var(--muted)}
.breadcrumbs a{color:var(--muted);text-decoration:none}
.breadcrumbs a:hover{color:var(--text);text-decoration:underline}
.meta-row{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:16px;font-size:var(--t-small);color:var(--muted)}
.meta-row a{color:var(--muted)}
.meta-row a:hover{color:var(--text)}
.aff-note{margin:16px 0 0;max-width:72ch;font-size:var(--t-small);color:var(--muted)}

/* Article cover sits to the right of the title on desktop: the title column is
   22ch wide, and without it the right half of a 1440px screen is empty. */
.content-hero .container:has(> .cover){
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);column-gap:56px;align-items:start;
}
.content-hero .container:has(> .cover) > :not(.cover){grid-column:1}
.content-hero .cover{
  grid-column:2;grid-row:1 / span 3;align-self:center;
  display:block;width:100%;height:auto;border:1px solid var(--line);
}

/* Covers on listing cards are attached by the link's href, not by markup: the
   blog's "this week" card is rewritten by the daily routine inside
   TOP_MATCHES_GRID, and a cover placed in its markup would be wiped. */
.card:has(:is(h2,h3) > a[href="/blog/how-onchain-sportsbooks-settle-bets"]){--cover:url(/images/covers/cover-blog-how-onchain-sportsbooks-settle-bets.webp)}
.card:has(:is(h2,h3) > a[href="/blog/polymarket-vs-dexsport"]){--cover:url(/images/covers/cover-blog-polymarket-vs-dexsport.webp)}
.card:has(:is(h2,h3) > a[href="/blog/this-week-in-crypto-betting"]){--cover:url(/images/covers/cover-blog-this-week-in-crypto-betting.webp)}
.card:has(:is(h2,h3) > a[href="/blog/top-matches-2026-08-25"]){--cover:url(/images/covers/cover-blog-top-matches-2026-08-25.webp)}
.card:has(:is(h2,h3) > a[href="/blog/what-decentralized-really-means"]){--cover:url(/images/covers/cover-blog-what-decentralized-really-means.webp)}
.card:has(:is(h2,h3) > a[href="/guides/btc-eth-or-usdc-for-betting"]){--cover:url(/images/covers/cover-guides-btc-eth-or-usdc-for-betting.webp)}
.card:has(:is(h2,h3) > a[href="/guides/how-to-bet-with-crypto"]){--cover:url(/images/covers/cover-guides-how-to-bet-with-crypto.webp)}
.card:has(:is(h2,h3) > a[href="/guides/how-to-get-a-crypto-wallet"]){--cover:url(/images/covers/cover-guides-how-to-get-a-crypto-wallet.webp)}
.card:has(:is(h2,h3) > a[href="/guides/how-to-get-crypto"]){--cover:url(/images/covers/cover-guides-how-to-get-crypto.webp)}
.card:has(:is(h2,h3) > a:is(
  [href="/blog/how-onchain-sportsbooks-settle-bets"],[href="/blog/polymarket-vs-dexsport"],
  [href="/blog/this-week-in-crypto-betting"],[href="/blog/top-matches-2026-08-25"],
  [href="/blog/what-decentralized-really-means"],[href="/guides/btc-eth-or-usdc-for-betting"],
  [href="/guides/how-to-bet-with-crypto"],[href="/guides/how-to-get-a-crypto-wallet"],
  [href="/guides/how-to-get-crypto"]))::before{
  content:"";display:block;aspect-ratio:1200 / 630;margin:0 0 16px;
  background:var(--bg) var(--cover) center / cover no-repeat;border:1px solid var(--line);
}

/* 404 reuses .hero with a plain container */
.hero > .container .lead{margin:24px 0 32px}

/* ---------------------------------------------------------------- prose -- */
.prose{max-width:calc(65ch + 2 * var(--pad));margin:0 auto;padding:var(--s-section) var(--pad)}
.prose h2{
  font-size:clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem);
  margin:64px 0 20px;
}
.prose h2:first-child{margin-top:0}
.prose h3{margin:40px 0 12px}
.prose ul,.prose ol{padding-left:22px;margin:0 0 20px}
.prose li{margin-bottom:8px;max-width:65ch}
.prose li::marker{color:var(--muted)}

.callout{
  margin:32px 0;padding:4px 0 4px 20px;
  border-left:2px solid var(--line-strong);
  font-size:var(--t-body);color:var(--text);
}
.callout.warn{border-left-color:var(--text)}
.callout p{margin:0}
.callout p + p{margin-top:12px}

/* ------------------------------------------------------------------ tags -- */
/* In the markup .tag.green is exactly "Non-custodial" and a bare .tag is the
   custodial variants. So the class maps straight onto this system's meaning
   without touching a single page. */
.tag{
  display:inline-block;padding:3px 8px;
  font-size:var(--t-micro);font-weight:600;font-variation-settings:"wdth" 100;
  text-transform:none;letter-spacing:0;white-space:nowrap;
  color:var(--muted);background:transparent;border:1px solid var(--line-strong);border-radius:0;
}
.tag.green{color:var(--accent);border-color:var(--accent)}
.tag.gold,.tag.solid{color:var(--text);border-color:var(--text)}

.pick-badge{
  display:inline-flex;align-items:center;padding:3px 8px;
  font-size:var(--t-micro);font-weight:600;white-space:nowrap;
  color:var(--text);background:transparent;border:1px solid var(--text);border-radius:0;
}

/* ------------------------------------------------------------ score chip -- */
/* Scores are numbers, not custody — so they are --text, never orange. */
.score-chip{
  display:inline-flex;align-items:baseline;gap:1px;
  padding:3px 8px;border:1px solid var(--line-strong);border-radius:0;background:transparent;
  color:var(--text);font-variant-numeric:tabular-nums;line-height:1.2;
}
.score-chip b{font-size:1.0625rem;font-weight:800;font-variation-settings:"wdth" 80}
.score-chip small{font-size:.75rem;font-weight:500;color:var(--muted)}
.score-chip.lg{padding:6px 12px}
.score-chip.lg b{font-size:var(--t-score)}
.score-chip.lg small{font-size:.875rem}
td .score-chip{padding:2px 6px}
td .score-chip b{font-size:.9375rem}

/* ------------------------------------------------------------ logo badge -- */
/* Third-party marks are drawn for light backgrounds. Shown as they are, on
   their own tile, never tinted. */
.logo-badge{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:38px;height:38px;padding:6px;overflow:hidden;background:#fff;border-radius:0;
}
.logo-badge img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.logo-word{
  display:inline-flex;align-items:center;justify-content:center;flex:none;width:38px;height:38px;
  border:1px solid var(--line-strong);font-weight:800;font-size:.8125rem;color:var(--text);
}

/* ---------------------------------------------------- ranking: lens tabs -- */
.rank-tabs{display:flex;gap:10px;margin:0 0 24px;overflow-x:auto;scrollbar-width:none;padding-right:20px}
.rank-tabs::-webkit-scrollbar{display:none}
.rank-tab{
  flex:none;display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;
  font-family:var(--font);font-size:var(--t-ui);font-weight:600;
  color:var(--text);background:transparent;border:1px solid var(--line-strong);border-radius:0;
  cursor:pointer;white-space:nowrap;
  transition:border-color .12s ease-out,background-color .12s ease-out,color .12s ease-out;
}
.rank-tab:hover{border-color:var(--text)}
.rank-tab[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--bg)}

/* ----------------------------------------------------- ranking: the rows -- */
/* Each row is a line of the list, not a box. The score bar follows the gauge
   rule: 0-10 track, fill orange for non-custodial and --text for custodial,
   decided by the row's own custody tag. */
.rank-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.rank-item{
  display:grid;grid-template-columns:40px 220px minmax(0,1fr) 110px 150px;gap:20px;align-items:center;
  padding:20px 0;border-bottom:1px solid var(--line);background:transparent;
  transition:background-color .12s ease-out;
}
.rank-item:hover{background:var(--bg-2)}
.rank-item.featured{box-shadow:none;border-left:0}
.rank-item.is-pick{box-shadow:none}
.rank-num{
  font-size:var(--t-small);color:var(--muted);font-variant-numeric:tabular-nums;
  width:auto;height:auto;background:none;border:0;
}
.rank-item.featured .rank-num{color:var(--text);font-weight:700}
.rank-brand{min-width:0}
.rank-brand-row{display:flex;align-items:center;gap:12px;min-width:0}
.rank-name{
  margin:0 0 6px;font-size:var(--t-h3);font-weight:700;font-variation-settings:"wdth" 85;line-height:1.15;
}
.rank-name a{color:var(--text);text-decoration:none}
.rank-name a:hover{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px}
.rank-tags{display:flex;flex-wrap:wrap;gap:6px}
.rank-why{min-width:0;font-size:var(--t-small);color:var(--muted);line-height:1.5}
.rank-why strong{color:var(--text);font-weight:600}
.rank-actions{display:flex;flex-direction:column;gap:8px}
.rank-actions .btn{width:100%}

.score{text-align:right}
.score .val{
  font-size:var(--t-score);font-weight:800;font-variation-settings:"wdth" 80;
  font-variant-numeric:tabular-nums;line-height:1;color:var(--text);
}
.score .val small{font-size:.5em;font-weight:500;color:var(--muted)}
.score .bar{position:relative;height:6px;margin-top:10px;background:var(--bg-2);overflow:visible}
.score .bar i{display:block;height:100%;background:var(--text)}
.rank-item:has(.tag.green) .score .bar i{background:var(--accent)}
.score .bar::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to right,transparent calc(50% - .5px),var(--line-strong) calc(50% - .5px),var(--line-strong) calc(50% + .5px),transparent calc(50% + .5px)),
    linear-gradient(to right,transparent calc(80% - .5px),var(--line-strong) calc(80% - .5px),var(--line-strong) calc(80% + .5px),transparent calc(80% + .5px));
}
.score .lbl{margin-top:8px;font-size:var(--t-micro);color:var(--muted);text-transform:none;letter-spacing:0}

/* sport / coin chips on the ranking page — same component as the homepage */
.sport-row{display:flex;flex-wrap:wrap;gap:10px}
.sport-chip{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;
  font-size:var(--t-ui);font-weight:600;color:var(--text);text-decoration:none;
  background:transparent;border:1px solid var(--line-strong);border-radius:0;
  transition:border-color .12s ease-out;
}
.sport-chip:hover{border-color:var(--text)}
.sport-chip small{font-size:var(--t-micro);font-weight:500;color:var(--muted)}
.sport-chip[aria-current="page"]{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.sport-chip[aria-current="page"] small{color:var(--bg);opacity:.75}

/* methodology on inner pages */
.method-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:var(--s-head-gap)}
.crit{padding:0 24px;border-left:1px solid var(--line);background:none;border-radius:0}
.crit:first-child{padding-left:0;border-left:0}
.crit .w{
  font-size:var(--t-stat);font-weight:800;font-variation-settings:"wdth" 80;
  font-variant-numeric:tabular-nums;line-height:1;color:var(--text);
}
.crit:first-child .w{color:var(--accent)}   /* custody — the site's subject */
.crit .t{margin:12px 0 0;font-size:var(--t-h3);font-weight:700;font-variation-settings:"wdth" 85;line-height:1.15}
.crit p{margin:10px 0 0;font-size:var(--t-small);color:var(--muted)}

/* ------------------------------------------------------- comparison table -- */
/* Tables stay tables: they are the most extractable form of these facts. */
.table-wrap{overflow-x:auto;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:none;border-radius:0}
table.compare{width:100%;min-width:680px;border-collapse:collapse}
table.compare th,
table.compare td{padding:14px 16px 14px 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);font-size:var(--t-small)}
table.compare th{
  font-size:var(--t-micro);font-weight:600;color:var(--muted);
  text-transform:none;letter-spacing:0;background:none;
}
table.compare tr:last-child td{border-bottom:0}
table.compare tbody tr:hover{background:var(--bg-2)}
table.compare td{color:var(--text)}
table.compare td.name{font-weight:700;font-variation-settings:"wdth" 85}
table.compare td.name a{color:var(--text);text-decoration:none}
table.compare td.name a:hover{text-decoration:underline;text-decoration-color:var(--accent)}
table.compare b.ds-total{color:var(--text);font-weight:800;font-variation-settings:"wdth" 80;font-size:1rem}
table.compare.facts{min-width:0}
table.compare.facts th[scope="row"]{
  width:208px;padding-right:24px;
  font-size:var(--t-small);font-weight:500;color:var(--muted);
}
.facts-wrap{margin:16px 0 12px}
.facts-note{margin:0 0 8px;font-size:var(--t-small);color:var(--muted)}

.ds-scale{margin-top:0;padding-left:16px;border-left:2px solid var(--line-strong);font-size:var(--t-small);color:var(--muted)}
.ds-scale b{color:var(--text)}

/* ----------------------------------------------------------------- cards -- */
/* A card is a row of a list: one line underneath, no fill, no border, no
   shadow. The heading link still projects a hit area over the whole card. */
.grid{display:grid;gap:0 var(--gutter)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
div.card,
article.card{
  padding:24px 0;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;
  transition:border-color .12s ease-out;
}
.card h2,.card h3{
  margin:0 0 8px;font-size:var(--t-h3);font-weight:700;font-variation-settings:"wdth" 85;
  text-transform:none;letter-spacing:0;line-height:1.15;
}
.card h2 a,.card h3 a{color:var(--text);text-decoration:none}
.card p{margin:0;font-size:var(--t-small);color:var(--muted);max-width:none}
.card:has(:is(h2,h3,h4) > a){position:relative;cursor:pointer}
.card :is(h2,h3,h4) > a::after{content:"";position:absolute;inset:0}
.card :not(h2,h3,h4) > a{position:relative;z-index:1}
.card:has(:is(h2,h3,h4) > a):hover{border-bottom-color:var(--accent)}
.card:has(:is(h2,h3,h4) > a):hover :is(h2,h3,h4) a{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px}
.card:focus-within{border-bottom-color:var(--text)}

/* the branded banner becomes a plain label row */
.card-banner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  height:auto;margin:0 0 12px;padding:0;background:none;border:0;border-radius:0;overflow:visible;
}
.card-banner::after{display:none}
/* The mark is the old logo in the retired amber. On a card it is decoration
   only (alt=""), so it is hidden rather than recoloured. The tag stays. */
.cb-mark{display:none}
.card-banner{justify-content:flex-start}

/* reviews directory: text only until every platform has a logo file */
.rev-card .rev-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.rev-card .rev-top .logo-badge{display:none}
.rev-card .rev-top h3{margin:0 0 6px}
.rev-card .rev-top .score-chip{margin-left:auto;flex:none}
.rev-meta{margin:12px 0 0 !important;font-size:var(--t-micro) !important;color:var(--muted)}

.icon-tile{display:none}   /* SVG ornaments have no place in a system without radius or fill */

.cta-banner{padding:var(--s-section) 0 0;border-top:1px solid var(--line);background:none;border-radius:0;text-align:left}
.cta-banner p{margin:16px 0 24px;max-width:54ch;color:var(--muted)}

/* ------------------------------------------------------------ review page -- */
.review-head{
  display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:24px;align-items:center;
  padding:0;background:none;border:0;border-radius:0;
}
.review-head.no-logo{grid-template-columns:minmax(0,1fr) auto}
.review-logo{
  width:72px;height:72px;padding:10px;background:#fff;border-radius:0;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-weight:800;color:var(--bg);
}
.review-logo img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.review-head h1{margin:0 0 12px}

.score-breakdown{margin:24px 0 12px;border-top:1px solid var(--line);background:none;border-radius:0;overflow:visible}
.sb-row{
  display:grid;grid-template-columns:220px 1fr 56px;gap:20px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--line);border-top:0;
}
.sb-k{font-size:var(--t-small);font-weight:500;color:var(--text)}
.sb-k i{font-style:normal;margin-left:6px;font-size:var(--t-micro);color:var(--muted)}
.sb-bar{position:relative;height:8px;background:var(--bg-2);border-radius:0;overflow:visible}
.sb-bar i{display:block;height:100%;background:var(--text);border-radius:0}
[data-custody="nc"] .sb-bar i{background:var(--accent)}
.sb-bar::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to right,transparent calc(50% - .5px),var(--line-strong) calc(50% - .5px),var(--line-strong) calc(50% + .5px),transparent calc(50% + .5px)),
    linear-gradient(to right,transparent calc(80% - .5px),var(--line-strong) calc(80% - .5px),var(--line-strong) calc(80% + .5px),transparent calc(80% + .5px));
}
.sb-v{
  text-align:right;font-size:1.125rem;font-weight:800;font-variation-settings:"wdth" 80;
  font-variant-numeric:tabular-nums;color:var(--text);
}
.sb-total{background:none}
/* The Overall row ships an empty .sb-bar as a spacer. An empty 0-10 track with
   ticks reads as a score of zero, so it is hidden rather than drawn. */
.sb-total .sb-bar{visibility:hidden}
.sb-total .sb-k{font-weight:700}
.sb-total .sb-v{font-size:var(--t-score)}

.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;margin:32px 0}
.pros-cons .box{padding:0;background:none;border:0;border-top:1px solid var(--line);border-radius:0}
/* No green for good and red for bad: the words carry it. */
.pros-cons h3{
  margin:16px 0 12px;font-size:var(--t-small);font-weight:700;font-variation-settings:"wdth" 100;
  text-transform:none;letter-spacing:0;color:var(--text);
}
.pros-cons .pros h3,.pros-cons .cons h3{color:var(--text)}
.pros-cons ul{margin:0;padding-left:20px;font-size:var(--t-body)}
.pros-cons li{margin-bottom:8px}

.alt-grid{margin:16px 0 8px}
.alt-top{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:10px}

.end-cta{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:24px;align-items:center;
  margin:48px 0 16px;padding:32px 0;
  background:none;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;
}
.end-cta-body p{margin:8px 0 0;color:var(--muted)}

.sticky-cta{display:none}

/* ------------------------------------------------------------- about page -- */
.author-card{
  display:flex;gap:24px;align-items:flex-start;margin:0 0 32px;padding:24px 0;
  background:none;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;
}
.author-photo{width:96px;height:96px;flex:none;border-radius:0;object-fit:cover}
.author-role{margin:0 0 10px;font-size:var(--t-micro);font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0}

/* ----------------------------------------------------------- contact form -- */
.form-field{margin-bottom:20px}
.form-field label{display:block;margin-bottom:8px;font-size:var(--t-small);font-weight:600;color:var(--text)}
.form-field input,
.form-field textarea,
.form-field select{
  width:100%;padding:12px 14px;min-height:48px;
  font-family:var(--font);font-size:var(--t-body);color:var(--text);
  background:var(--bg-2);border:1px solid var(--line-strong);border-radius:0;
}
.form-field textarea{min-height:160px;resize:vertical}
.form-field input:focus-visible,
.form-field textarea:focus-visible,
.form-field select:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.form-field input:user-invalid,
.form-field textarea:user-invalid{border-color:var(--text);border-width:2px}
.form-status{margin:16px 0 0;font-size:var(--t-small);line-height:1.5;color:var(--muted)}
.form-status:empty{display:none}
.form-status.is-ok,
.form-status.is-err{padding:4px 0 4px 16px;border-left:2px solid var(--text);color:var(--text)}
#form-submit[disabled]{opacity:.6;cursor:default}

/* ------------------------------------------------------------ breakpoints -- */
/* 1180 / 980 / 768 / 600 / 480 — no others are introduced. */
@media (max-width:1180px){
  .g-scale,.g{grid-template-columns:44px 210px 1fr auto;gap:16px}
  .awards{grid-template-columns:repeat(3,1fr);row-gap:32px}
  .awards > div:nth-child(3n+1){padding-left:0;border-left:0}
}
@media (max-width:980px){
  :root{--gutter:20px}
  .hero-lead{grid-column:1 / -1}
  .hero-side{grid-column:1 / -1}
  .method{grid-template-columns:1fr 1fr;row-gap:32px}
  .method > div:nth-child(odd){padding-left:0;border-left:0}
}
@media (max-width:768px){
  :root{--pad:24px}
  /* No burger: the links wrap into a row. Navigation that depends on a script
     is navigation that can fail. */
  /* padding-block only: `padding` shorthand here would wipe the inline
     padding .wrap provides and push the CTA flush against the screen edge. */
  .site-header .bar{flex-wrap:wrap;gap:12px 20px;padding-block:12px}
  .nav{margin-left:0;width:100%;flex-wrap:wrap;gap:12px 20px}
  .nav ul{flex-wrap:wrap;gap:4px 20px}
  .nav ul a{font-size:var(--t-small)}
  /* The header wraps from here: two rows on a tablet (~130px), more on a phone
     — up to a third of a landscape phone held down for the whole read. It stops
     being sticky here instead of growing a burger: CSS only, nothing moves, it
     scrolls away like the market bar and the 18+ line above it. With no sticky
     header, anchors need only the 16px. */
  .site-header{position:static}
  [id]{scroll-margin-top:16px}
  .two-col{grid-template-columns:1fr;gap:48px}
  .awards{grid-template-columns:1fr 1fr}
  .awards > div{padding:0 16px}
  .awards > div:nth-child(3n+1){padding-left:16px;border-left:1px solid var(--line)}
  .awards > div:nth-child(odd){padding-left:0;border-left:0}
}
@media (max-width:600px){
  /* Finger-sized rows: 48px each, the next step of the 8px scale above 44. */
  .footer-cols h2{margin-bottom:0}
  .footer-cols li + li{margin-top:0}
  .footer-cols a{min-height:48px}
  .footer-cols{grid-template-columns:1fr 1fr}
  .awards{grid-template-columns:1fr}
  .awards > div{padding:0;border-left:0;border-top:1px solid var(--line);padding-top:24px}
  .awards > div:first-child{border-top:0;padding-top:0}
  .method{grid-template-columns:1fr;row-gap:0}
  .method > div{padding:24px 0;border-left:0;border-top:1px solid var(--line)}
  .method > div:first-child{border-top:0;padding-top:0}

  /* The gauge does not disappear on a phone: it moves to a second row.
     Hiding it would remove the only carrier of the custody colour. */
  .g-scale{display:none}
  .g{
    grid-template-columns:24px 1fr auto;
    grid-template-areas:"rk nm sc" "bar bar bar";
    gap:6px 12px;padding:16px 0;min-height:0;
  }
  .g .rk{grid-area:rk}
  .g .nm{
    grid-area:nm;font-size:var(--t-lead);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .g .sc{grid-area:sc}
  .g .bar{grid-area:bar;height:8px;margin-top:8px}
}
@media (max-width:480px){
  :root{--pad:20px}
  h1,h2{letter-spacing:0}   /* negative tracking starts gluing uppercase wdth 70 */
}

/* ------------------------------------------- breakpoints: inner components -- */
@media (max-width:1180px){
  .rank-item{grid-template-columns:40px 190px minmax(0,1fr) 100px 140px;gap:16px}
}
@media (max-width:980px){
  .rank-item{
    grid-template-columns:32px minmax(0,1fr) 96px;
    grid-template-areas:"n b s" "w w w" "c c c";gap:12px 16px;
  }
  .rank-num{grid-area:n}
  .rank-brand{grid-area:b}
  .score{grid-area:s}
  .rank-why{grid-area:w}
  .rank-item > .btn,.rank-actions{grid-area:c;width:100%}
  .rank-actions{flex-direction:row}
  .rank-actions .btn{flex:1}
  .score .lbl{display:none}
  .method-grid,.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .method-grid{row-gap:32px}
  .footer-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .content-hero .container:has(> .cover){display:block}
  .content-hero .cover{margin-top:32px;max-width:640px}
  .crit:nth-child(odd){padding-left:0;border-left:0}
}
@media (max-width:768px){
  .review-head,.review-head.no-logo{grid-template-columns:1fr;gap:16px}
  .end-cta{grid-template-columns:1fr;gap:16px}
  .end-cta .btn{width:100%}
  /* sticky mobile CTA on review pages. Visible by default; main.js hides it
     (the [hidden] attribute) while the hero's own Visit button is on screen,
     so the first screen never carries two orange buttons with one target. */
  body.has-sticky-cta{padding-bottom:76px}
  .sticky-cta{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;
    align-items:center;gap:12px;padding:12px var(--pad);
    background:var(--bg);border-top:1px solid var(--line-strong);
  }
  .sticky-cta .sc-name{min-width:0;font-weight:700;font-size:var(--t-body);line-height:1.2}
  .sticky-cta .sc-name span{display:block;font-size:var(--t-micro);font-weight:500;color:var(--muted)}
  .sticky-cta .btn{margin-left:auto;flex:none}
}
@media (max-width:600px){
  .method-grid,.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .method-grid{row-gap:0}
  .crit{padding:24px 0;border-left:0;border-top:1px solid var(--line)}
  .crit:first-child{border-top:0;padding-top:0}
  .pros-cons{grid-template-columns:1fr;gap:24px}
  .sb-row{grid-template-columns:1fr 56px;grid-template-areas:"k v" "b b";gap:8px 12px}
  .sb-k{grid-area:k}
  .sb-v{grid-area:v}
  .sb-bar{grid-area:b}
  table.compare.facts th[scope="row"]{width:130px;padding-right:12px}
  .author-card{flex-direction:column;gap:16px}
}

/* ------------------------------------------------------------ cookie bar -- */
/* Consent is denied until this is answered, so it has to be legible rather
   than tucked away. Same system: line, no radius, no shadow. */
.cookie-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;
  padding:16px var(--pad);
  background:var(--bg);border-top:1px solid var(--line-strong);
}
.cookie-bar[hidden]{display:none}
.cookie-bar p{margin:0;max-width:72ch;font-size:var(--t-small);color:var(--muted)}
.cookie-bar a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.cookie-actions{display:flex;gap:12px;flex:none}
.cookie-actions .btn{min-height:44px;padding:10px 20px}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--text)}
.btn-sm{font-size:var(--t-small)}

/* --------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
  .market.is-drawing i{background:var(--bg-2)}
  .market.is-drawing i.nc{background:var(--accent)}
}