/*
  Shared styles. Tailwind (CDN) handles layout and spacing. This file holds the design tokens and the
  reusable components (buttons, cards, inputs, tables, charts) so every page looks the same.

  CHANGE THE COLOURS HERE. The whole site is black with ONE accent colour (the yellow from the logo).
  Every colour, including the charts and the Instagram story cards, reads from these variables
  (space separated RGB). To try a new accent, change --accent and --soft only.
  Static files (favicon.svg, apple-touch-icon.png, og-default.jpg) are images, so redo those if you change the palette.
*/
:root {
  --bg: 7 7 7;             /* black */
  --surface: 17 17 17;
  --surface2: 26 26 26;
  --line: 44 44 44;
  --text: 243 243 238;     /* off white, same as the letters in the logo */
  --muted: 160 160 160;
  --ink: 12 12 13;         /* logo black, used for text on the yellow */
  --accent: 255 214 10;    /* logo yellow: the one accent colour */
  --soft: 255 232 92;      /* slightly lighter yellow, only used for gradient ends */
  --white: 243 243 238;    /* neutral tile colour */
  --grey: 150 150 150;     /* neutral tile colour */
  --bar: 72 72 72;         /* chart bars */
  --danger: 255 120 120;
  --ok: 255 214 10;
  --grad: linear-gradient(120deg, rgb(var(--accent)) 0%, rgb(var(--soft)) 100%);
}

/* Metric adjusted fallbacks: the page looks almost the same before and after the web fonts load, so nothing jumps. */
@font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue'), local('Roboto'); size-adjust: 106%; }
@font-face { font-family: 'Bebas Neue Fallback'; src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue'), local('Roboto'); size-adjust: 57.4%; }

html { background: rgb(var(--bg)); color: rgb(var(--text)); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; color-scheme: dark; }
body { min-height: 100vh; display: flex; flex-direction: column; background: rgb(var(--bg)); color: rgb(var(--text)); font-family: Inter, 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
main { flex: 1 0 auto; }
::selection { background: rgb(var(--accent)); color: rgb(var(--ink)); }
:focus-visible { outline: 3px solid rgb(var(--accent)); outline-offset: 3px; border-radius: 8px; }
[hidden] { display: none !important; }
/* Grid and flex children may shrink below their content, so wide tables scroll inside their own box instead of widening the page. */
.grid > *, .flex > * { min-width: 0; }

.display { font-family: 'Bebas Neue', 'Bebas Neue Fallback', Impact, sans-serif; font-weight: 400; letter-spacing: .015em; line-height: .95; text-transform: uppercase; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { display: inline-flex; align-items: center; gap: .55rem; font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgb(var(--accent)); }
.eyebrow::before { content: ''; width: 1.3rem; height: 3px; border-radius: 3px; background: var(--grad); flex: 0 0 auto; }
.muted { color: rgb(var(--muted)); }
.accent { color: rgb(var(--accent)); }
.lime { color: rgb(var(--accent)); }
.wrap { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: 1rem; }
.wrap-narrow { width: 100%; max-width: 46rem; margin-inline: auto; padding-inline: 1rem; }
.section { padding-block: 3.5rem; }
@media (min-width: 768px) { .section { padding-block: 5.5rem; } .wrap, .wrap-narrow { padding-inline: 1.5rem; } }
.h1 { font-size: clamp(3rem, 12vw, 6.25rem); }
.h2 { font-size: clamp(2.25rem, 8vw, 3.75rem); }
.h3 { font-size: clamp(1.6rem, 5vw, 2.1rem); }
.lead { font-size: 1.0625rem; color: rgb(var(--muted)); max-width: 40rem; }
@media (min-width: 768px) { .lead { font-size: 1.1875rem; } }

.skip { position: absolute; left: 1rem; top: -4rem; background: rgb(var(--accent)); color: rgb(var(--ink)); padding: .6rem 1rem; border-radius: .6rem; font-weight: 700; z-index: 100; }
.skip:focus { top: 1rem; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3.35rem; padding: .75rem 1.6rem; border-radius: 999px; border: 2px solid transparent; font-weight: 800; font-size: 1rem; line-height: 1.1; text-align: center; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease, filter .18s ease; text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--grad); color: rgb(var(--ink)); box-shadow: 0 10px 30px -10px rgb(var(--accent) / .7); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -10px rgb(var(--accent) / .85); filter: brightness(1.07) saturate(1.05); }
.btn-ghost { border-color: rgb(255 255 255 / .2); color: #fff; background: rgb(255 255 255 / .04); }
.btn-ghost:hover { border-color: rgb(var(--accent)); color: rgb(var(--accent)); background: rgb(var(--accent) / .08); }
.btn-lime { background: rgb(var(--accent)); color: rgb(var(--ink)); box-shadow: 0 10px 30px -12px rgb(var(--accent) / .6); }
.btn-lime:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn-dark { background: rgb(var(--ink)); color: #fff; }
.btn-dark:hover { transform: translateY(-2px); background: #000; }
.btn-sm { min-height: 2.75rem; padding: .5rem 1.15rem; font-size: .9rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.link { color: rgb(var(--accent)); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: rgb(var(--accent)); }

/* ---------- Cards, tags, tiles ---------- */
.card { background: linear-gradient(180deg, rgb(var(--surface)) 0%, rgb(var(--surface) / .82) 100%); border: 1px solid rgb(var(--line)); border-radius: 1.5rem; padding: 1.25rem; position: relative; }
@media (min-width: 768px) { .card { padding: 1.75rem; } }
.card-accent { border: 1px solid transparent; background: linear-gradient(rgb(var(--surface)), rgb(var(--surface))) padding-box, var(--grad) border-box; box-shadow: 0 30px 90px -36px rgb(var(--accent) / .55); }
.card-link { display: block; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.card-link:hover { transform: translateY(-4px); border-color: rgb(var(--accent) / .75); box-shadow: 0 24px 60px -30px rgb(var(--accent) / .55); }
.card-bar { border-top: 4px solid rgb(var(--c, var(--accent))); }
.tag { display: inline-block; background: rgb(var(--accent)); color: rgb(var(--ink)); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: .28rem .65rem; border-radius: 999px; }
.tag-hot { background: var(--grad); }
.tag-ink { background: rgb(var(--ink)); color: rgb(var(--accent)); }
.tag-line { display: inline-block; border: 1px solid rgb(var(--line)); color: rgb(var(--muted)); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .25rem .6rem; border-radius: 999px; }
.chip { display: inline-flex; align-items: center; gap: .35rem; background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .1); color: rgb(var(--text) / .85); font-size: .8rem; font-weight: 600; padding: .32rem .75rem; border-radius: 999px; }
.chip::before { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: rgb(var(--accent)); }
.chip.plain::before { display: none; }
.divider { border: 0; border-top: 1px solid rgb(var(--line)); }
.tile { display: grid; place-items: center; width: 3.1rem; height: 3.1rem; border-radius: 1rem; background: rgb(var(--c, var(--accent)) / .16); color: rgb(var(--c, var(--accent))); flex: 0 0 auto; }
.c-accent { --c: var(--accent); } .c-white { --c: var(--white); } .c-grey { --c: var(--grey); }

/* ---------- Hero, bands, marquee ---------- */
.hero-bg { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(48rem 26rem at 92% -10%, rgb(var(--accent) / .22), transparent 62%),
  radial-gradient(34rem 20rem at -8% 108%, rgb(var(--accent) / .1), transparent 62%); }
.hero-grid { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgb(255 255 255 / .1) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 78%); mask-image: linear-gradient(to bottom, #000 0%, transparent 78%); }
.band-lime { background: rgb(var(--accent)); color: rgb(var(--ink)); }
.band-grad { background: var(--grad); color: rgb(var(--ink)); }
.stat { background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .1); border-radius: 1.25rem; padding: 1rem 1.1rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.slant-wrap { overflow: hidden; padding-block: 1.1rem; }
.slant { transform: rotate(-1.4deg); margin-inline: -3%; width: 106%; box-shadow: 0 14px 40px -18px rgb(var(--accent) / .6); }
.marquee { overflow: hidden; white-space: nowrap; }
.marquee-track { display: inline-flex; gap: 2.2rem; padding-block: .85rem; animation: marquee 38s linear infinite; will-change: transform; }
.marquee-track span { font-family: 'Bebas Neue', 'Bebas Neue Fallback', Impact, sans-serif; font-size: 1.7rem; letter-spacing: .04em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 2.2rem; }
.marquee-track span::after { content: '/'; opacity: .5; }
@keyframes marquee { to { transform: translateX(-50%); } }
/* Touch and hold, or hover, to pause the ticker */
.marquee:hover .marquee-track, .marquee:active .marquee-track { animation-play-state: paused; }

/* ---------- Segmented control, pick buttons, checks ---------- */
.seg { display: flex; flex-wrap: wrap; gap: .5rem; }
.seg button, .pick { min-height: 2.8rem; padding: .5rem 1.05rem; border-radius: 999px; border: 1.5px solid rgb(var(--line)); background: rgb(var(--surface2) / .6); color: rgb(var(--text)); font-weight: 700; font-size: .9rem; cursor: pointer; transition: all .16s ease; }
.seg button:hover, .pick:hover { border-color: rgb(var(--accent) / .8); transform: translateY(-1px); }
.seg button[aria-pressed="true"], .pick[aria-pressed="true"] { background: var(--grad); border-color: transparent; color: rgb(var(--ink)); box-shadow: 0 8px 22px -10px rgb(var(--accent) / .8); }
.seg-scroll { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: .35rem; }
.seg-scroll::-webkit-scrollbar { display: none; }
.seg-scroll button { white-space: nowrap; flex: 0 0 auto; }

.check { position: relative; }
.check input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.check span { display: flex; align-items: center; gap: .5rem; min-height: 2.9rem; padding: .5rem .75rem; line-height: 1.25; border-radius: 1rem; border: 1.5px solid rgb(var(--line)); background: rgb(var(--surface2) / .5); font-weight: 600; font-size: .9rem; transition: all .15s ease; }
.check span::before { content: ''; width: 1.15rem; height: 1.15rem; flex: 0 0 1.15rem; border-radius: .35rem; border: 2px solid rgb(var(--muted)); transition: all .15s ease; }
.check input:hover + span { border-color: rgb(var(--accent) / .7); }
.check input:checked + span { border-color: rgb(var(--accent)); background: rgb(var(--accent) / .1); }
.check input:checked + span::before { background: rgb(var(--accent)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23070707' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; border-color: rgb(var(--accent)); }
.check input:focus-visible + span { outline: 3px solid rgb(var(--accent)); outline-offset: 2px; }

/* ---------- Inputs ---------- */
.input { width: 100%; min-height: 3.1rem; padding: .6rem .95rem; border-radius: 1rem; border: 1.5px solid rgb(var(--line)); background: rgb(var(--surface2)); color: rgb(var(--text)); font-size: 1rem; font-family: inherit; transition: border-color .15s ease, box-shadow .15s ease; }
.input::placeholder { color: rgb(var(--muted) / .75); }
.input:focus { outline: none; border-color: rgb(var(--accent)); box-shadow: 0 0 0 4px rgb(var(--accent) / .22); }
.input-time { width: 5.6rem; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; padding-inline: .4rem; font-size: 1.05rem; }
.input.invalid { border-color: rgb(var(--danger)); }
select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%23a0a0a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 1.2rem; padding-right: 2.4rem; }
.label { display: block; font-size: .85rem; font-weight: 700; margin-bottom: .4rem; }

input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 2.6rem; background: transparent; cursor: pointer; touch-action: pan-y; }
input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(to right, rgb(var(--accent)) 0%, rgb(var(--soft)) var(--fill, 50%), rgb(var(--line)) var(--fill, 50%)); }
input[type="range"]::-moz-range-track { height: 8px; border-radius: 999px; background: rgb(var(--line)); }
input[type="range"]::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--grad); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 1.7rem; height: 1.7rem; margin-top: calc((8px - 1.7rem) / 2); border-radius: 50%; background: #fff; border: 5px solid rgb(var(--accent)); box-shadow: 0 4px 14px rgb(var(--accent) / .55); transition: transform .12s ease; }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
input[type="range"]::-moz-range-thumb { width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #fff; border: 5px solid rgb(var(--accent)); box-shadow: 0 4px 14px rgb(var(--accent) / .55); }

/* ---------- Tables ---------- */
.tbl-wrap { overflow-x: auto; border: 1px solid rgb(var(--line)); border-radius: 1.25rem; background: rgb(var(--surface) / .6); }
.tbl { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tbl th, .tbl td { padding: .75rem .9rem; text-align: left; border-bottom: 1px solid rgb(var(--line) / .8); vertical-align: top; }
.tbl thead th { background: rgb(var(--surface2)); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--muted)); position: sticky; top: 0; }
.tbl tbody tr:last-child td, .tbl tbody tr:last-child th { border-bottom: 0; }
.tbl tbody tr { transition: background-color .15s ease; }
.tbl tbody tr:hover { background: rgb(255 255 255 / .03); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl tr.hl td, .tbl tr.hl th { background: linear-gradient(90deg, rgb(var(--accent) / .22), rgb(var(--soft) / .08)); }
.tbl tr.tot td, .tbl tr.tot th { font-weight: 800; background: rgb(var(--surface2)); }
.tbl tbody th { font-weight: 600; }
.tbl-compact th, .tbl-compact td { padding: .65rem .5rem; font-size: .8rem; }
.tbl-compact thead th { font-size: .62rem; letter-spacing: .05em; }
.tbl-compact tbody th { width: 28%; }
.tbl-compact .btn { min-height: 2.5rem; padding: .4rem .5rem; font-size: .72rem; line-height: 1.15; }
@media (min-width: 640px) {
  .tbl-compact th, .tbl-compact td { padding: .75rem .9rem; font-size: .92rem; }
  .tbl-compact thead th { font-size: .72rem; letter-spacing: .1em; }
  .tbl-compact .btn { min-height: 2.75rem; padding: .5rem 1.1rem; font-size: .9rem; }
}

/* ---------- FAQ ---------- */
.faq details { border: 1px solid rgb(var(--line)); background: rgb(var(--surface)); border-radius: 1.25rem; margin-bottom: .75rem; transition: border-color .2s ease; }
.faq summary { cursor: pointer; list-style: none; padding: 1.1rem 1.25rem; font-weight: 700; display: flex; justify-content: space-between; gap: 1rem; align-items: center; min-height: 3.4rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--grad); color: rgb(var(--ink)); font-size: 1.4rem; font-weight: 800; line-height: 1; transition: transform .2s ease; flex: 0 0 auto; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details[open] { border-color: rgb(var(--accent) / .65); }
.faq .ans { padding: 0 1.25rem 1.25rem; color: rgb(var(--muted)); }

/* ---------- Placeholders (replace with real content) ---------- */
.img-slot { position: relative; overflow: hidden; border-radius: 1.75rem; background: linear-gradient(135deg, rgb(var(--surface2)), rgb(var(--surface))); border: 1px solid rgb(var(--line)); }
.img-slot svg, .img-slot img { display: block; width: 100%; height: 100%; object-fit: cover; }
html[data-dev] .img-slot[data-slot]::after { content: 'IMAGE SLOT: ' attr(data-slot); position: absolute; left: .6rem; bottom: .6rem; background: rgb(var(--accent)); color: rgb(var(--ink)); font-size: .65rem; font-weight: 800; letter-spacing: .06em; padding: .2rem .5rem; border-radius: .4rem; z-index: 2; }
html[data-dev] .setup-badge { display: inline-block; }
.setup-badge { display: none; background: rgb(var(--accent)); color: rgb(var(--ink)); font-size: .65rem; font-weight: 800; letter-spacing: .08em; padding: .2rem .5rem; border-radius: .4rem; text-transform: uppercase; }
.placeholder-box { border: 2px dashed rgb(var(--line)); border-radius: 1.5rem; padding: 1.5rem; color: rgb(var(--muted)); }

/* ---------- Prose (blog, legal) ---------- */
.prose-lite { color: rgb(var(--text) / .92); font-size: 1.0625rem; }
.prose-lite h2 { font-family: 'Bebas Neue', 'Bebas Neue Fallback', Impact, sans-serif; font-weight: 400; text-transform: uppercase; font-size: 2.2rem; line-height: 1; margin: 2.5rem 0 .9rem; letter-spacing: .015em; }
.prose-lite h3 { font-weight: 700; font-size: 1.15rem; margin: 1.75rem 0 .5rem; }
.prose-lite p { margin: 0 0 1.1rem; }
.prose-lite ul { margin: 0 0 1.25rem; padding-left: 1.25rem; list-style: disc; }
.prose-lite ol { margin: 0 0 1.25rem; padding-left: 1.25rem; list-style: decimal; }
.prose-lite li { margin-bottom: .5rem; }
.prose-lite li::marker { color: rgb(var(--accent)); font-weight: 800; }
.prose-lite a { color: rgb(var(--accent)); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.prose-lite a:hover { color: rgb(var(--accent)); }
.prose-lite .stub { border-left: 3px solid rgb(var(--accent)); padding: .25rem 0 .25rem 1rem; color: rgb(var(--muted)); font-size: .95rem; }

/* ---------- Header, nav, footer ---------- */
.site-header { background: rgb(var(--bg) / .82); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid rgb(255 255 255 / .07); }
.nav-link { position: relative; font-weight: 700; font-size: .95rem; color: rgb(var(--text) / .85); padding: .5rem .25rem; }
.nav-link::after { content: ''; position: absolute; left: .25rem; right: .25rem; bottom: .1rem; height: 2px; border-radius: 2px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .22s ease; }
.nav-link:hover, .nav-link[aria-current="page"] { color: #fff; }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.dd { position: relative; }
.dd summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; }
.dd summary::-webkit-details-marker { display: none; }
.dd-panel { position: absolute; top: calc(100% + .7rem); left: -1rem; min-width: 18rem; background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: 1.25rem; padding: .5rem; box-shadow: 0 30px 70px -20px #000; z-index: 60; }
.dd-panel a { display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem; border-radius: .9rem; font-weight: 700; font-size: .92rem; }
.dd-panel a:hover { background: rgb(var(--surface2)); color: rgb(var(--accent)); }
.dd-panel .tile { width: 2.1rem; height: 2.1rem; border-radius: .7rem; }
.mobile-menu a.m-link { display: flex; align-items: center; justify-content: space-between; min-height: 3.5rem; padding: .5rem 0; border-bottom: 1px solid rgb(var(--line)); font-weight: 800; font-size: 1.05rem; }
.mobile-menu a.m-link span { color: rgb(var(--muted)); font-weight: 500; font-size: .8rem; }
.footer-glow { height: 3px; background: var(--grad); }

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom)); background: rgb(var(--bg) / .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid transparent; border-image: var(--grad) 1; transform: translateY(110%); transition: transform .3s ease; }
.sticky-cta.show { transform: translateY(0); }
@media (min-width: 768px) { .sticky-cta { display: none; } }

/* ---------- Scroll fade in. Only active when JS is on, never blocks content. ---------- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; transition-delay: calc(var(--i, 0) * 70ms); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Tool UI ---------- */
.tool-bar { position: sticky; top: 4rem; z-index: 30; background: rgb(var(--bg) / .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgb(var(--line)); }
.stat-big { font-family: 'Bebas Neue', 'Bebas Neue Fallback', Impact, sans-serif; line-height: .9; font-size: clamp(3.5rem, 17vw, 6.25rem); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.stat-pop { animation: pop .35s ease; }
@keyframes pop { 0% { transform: scale(.97); opacity: .6; } 100% { transform: scale(1); opacity: 1; } }
.fade-swap { animation: fadeSwap .3s ease; }
@keyframes fadeSwap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.progress { height: 8px; background: rgb(var(--line)); border-radius: 999px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--grad); width: 0; transition: width .35s ease; border-radius: 999px; }
.opt { display: flex; width: 100%; align-items: center; text-align: left; gap: .9rem; min-height: 3.7rem; padding: .8rem 1.1rem; border-radius: 1.1rem; border: 1.5px solid rgb(var(--line)); background: rgb(var(--surface2) / .6); font-weight: 700; cursor: pointer; transition: all .15s ease; color: inherit; font-size: 1rem; }
.opt:hover { border-color: rgb(var(--accent) / .85); transform: translateX(2px); }
.opt[aria-pressed="true"] { border-color: rgb(var(--accent)); background: rgb(var(--accent) / .14); }
.opt .dot { width: 1.3rem; height: 1.3rem; flex: 0 0 1.3rem; border-radius: 50%; border: 2px solid rgb(var(--muted)); }
.opt[aria-pressed="true"] .dot { border-color: rgb(var(--accent)); background: var(--grad); box-shadow: inset 0 0 0 3px rgb(var(--bg)); }
.share-canvas { width: 100%; max-width: 260px; aspect-ratio: 9 / 16; height: auto; border-radius: 1.1rem; border: 1px solid rgb(var(--line)); background: rgb(var(--bg)); display: block; box-shadow: 0 24px 60px -24px rgb(var(--accent) / .5); }

/* ---------- Charts (inline SVG, coloured here so the palette stays in one place) ---------- */
.chart-svg { font-family: Inter, 'Inter Fallback', system-ui, sans-serif; }
.chart-lbl { fill: rgb(var(--text)); font-size: 12px; font-weight: 600; }
.chart-lbl.hot { fill: rgb(var(--accent)); font-weight: 800; }
.chart-val { fill: rgb(var(--text)); font-size: 12px; font-weight: 700; text-anchor: end; }
.chart-val.hot { fill: rgb(var(--accent)); }
.chart-pct { fill: rgb(var(--muted)); font-weight: 500; }
.chart-bar { fill: rgb(var(--bar)); }
.chart-bar.hot { fill: url(#chart-hot); }
.lc-grid { stroke: rgb(var(--line)); }
.lc-axis { fill: rgb(var(--muted)); font-size: 10px; }
.lc-line { fill: none; stroke: url(#lc-grad); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.lc-dot { fill: rgb(var(--bg)); stroke: rgb(var(--accent)); stroke-width: 2; }
.lc-dot.best { fill: rgb(var(--accent)); stroke: rgb(var(--accent)); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  /* The station ticker is a slow, decorative drift. Phones with "Reduce motion" on still see it move, just more gently. */
  .marquee-track { animation-duration: 90s !important; animation-iteration-count: infinite !important; }
}

/* ---------- Cookie banner ---------- */
.consent { position: fixed; left: .75rem; right: .75rem; bottom: .75rem; z-index: 70; max-width: 28rem; background: rgb(var(--surface)); border: 1px solid rgb(var(--accent) / .55); border-radius: 1.25rem; padding: 1rem 1.1rem; box-shadow: 0 24px 70px -20px #000, 0 0 40px -18px rgb(var(--accent) / .6); animation: fadeSwap .3s ease; }
@media (min-width: 768px) { .consent { right: auto; left: 1.25rem; bottom: 1.25rem; } }