/* Kortklar web v2 "Skiltverket": signage typography on white, one blue, red only for the sign ring.
   The live game is shown on sign-blue screens; dark mode is the night version of the sign (asphalt).
   CSP is style-src 'self': no inline styles anywhere, everything lives here. */

@font-face {
  font-family: "Overpass";
  src: url("/fonts/overpass-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/fonts/figtree-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
/* Metric-matched fallbacks keep the layout from jumping when the web fonts swap in. */
@font-face { font-family: "Overpass fallback"; src: local("Arial"); size-adjust: 98%; ascent-override: 88%; descent-override: 38%; line-gap-override: 0%; }
@font-face { font-family: "Figtree fallback"; src: local("Arial"); size-adjust: 97%; ascent-override: 98%; descent-override: 26%; line-gap-override: 0%; }

@property --sec { syntax: "<integer>"; inherits: false; initial-value: 10; }
@property --done { syntax: "<integer>"; inherits: false; initial-value: 0; }

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --surface: #f3f5f7;
  --raised: #ffffff;
  --ink: #14181c;
  --muted: #535d68;
  --line: #e1e5e9;
  --blue: #0b57a4;          /* sign blue: links, kicker, emphasis */
  --btn: #0b57a4;
  --btn-hover: #094a8c;
  --red: #b3202a;           /* sign ring only */
  --disc: #ffffff;          /* sign disc */
  --glyph: #14181c;         /* K on the sign */
  --screen-a: #0b57a4;      /* game screen gradient */
  --screen-b: #073e76;
  --night: #121417;         /* the asphalt band */
  --night-2: #1c2025;
  --night-ink: #efeadb;
  --night-muted: #b4b0a3;
  --shadow-lg: 0 40px 80px -32px rgb(11 30 60 / 0.38), 0 12px 24px -12px rgb(11 30 60 / 0.18);
  --shadow-sm: 0 1px 2px rgb(20 24 28 / 0.06), 0 6px 16px -6px rgb(20 24 28 / 0.12);
  --display: "Overpass", "Overpass fallback", "Arial Narrow", system-ui, sans-serif;
  --text: "Figtree", "Figtree fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wrap: 74rem;
  --gutter: 1.25rem;
  --section: clamp(3rem, 2rem + 5vw, 8rem);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111316;
    --surface: #181b1f;
    --raised: #1c2025;
    --ink: #efeadb;
    --muted: #aaa699;
    --line: #2b3037;
    --blue: #7db4ee;
    --btn: #1a63b0;
    --btn-hover: #2470c0;
    --red: #d23a43;
    --disc: #1a1d21;
    --glyph: #efeadb;
    --night: #0b0d0f;
    --night-2: #171a1e;
    --shadow-lg: 0 40px 80px -32px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(255 255 255 / 0.04);
    --shadow-sm: 0 0 0 1px rgb(255 255 255 / 0.05);
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
p { margin: 0 0 1em; }
h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; overflow-wrap: break-word; hyphens: manual; }
h1 { font-weight: 900; font-size: clamp(2.6rem, 1.5rem + 5.2vw, 5.6rem); line-height: 0.95; letter-spacing: -0.038em; }
h2 { font-weight: 900; font-size: clamp(2rem, 1.35rem + 2.9vw, 3.6rem); line-height: 1; letter-spacing: -0.032em; }
h3 { font-weight: 800; font-size: 1.35rem; line-height: 1.15; letter-spacing: -0.012em; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.narrow { width: min(100% - 2 * var(--gutter), 46rem); margin-inline: auto; }
.lead { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3rem); line-height: 1.55; color: var(--muted); max-width: 34rem; text-wrap: pretty; }
.muted { color: var(--muted); }
.small { font-size: 0.9rem; color: var(--muted); }
.num { font-family: var(--display); font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 1rem; top: 1rem; background: var(--btn); color: #fff; padding: 0.6rem 1rem; border-radius: 8px; z-index: 20; }
.i { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.kicker {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 0 0 1.25rem;
  font: 800 0.78rem/1.2 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue);
}
.kicker::before { content: ""; width: 1.75rem; height: 3px; background: currentColor; flex: none; }

/* ---------- Sign mark (inline SVG, recoloured for dark mode) ---------- */
.sign .disc { fill: var(--disc); }
.sign .ring { fill: var(--red); }
.sign .k { fill: var(--glyph); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ink); text-decoration: none; }
.brand .sign { width: 2.15rem; height: 2.15rem; }
.brand .word { width: 6.6rem; height: auto; fill: currentColor; }
.nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); font: 600 0.97rem/1 var(--text); }
.nav a { color: var(--ink); text-decoration: none; padding-block: 0.5rem; white-space: nowrap; }
.nav a:hover { color: var(--blue); }
.nav a[aria-current="page"] { color: var(--blue); }
.nav .pill { background: var(--btn); color: #fff; padding: 0.65rem 1.1rem; border-radius: 999px; font-weight: 700; }
.nav .pill:hover { color: #fff; background: var(--btn-hover); }
@media (max-width: 47.99rem) { .nav .opt, .nav .wide { display: none; } .nav { gap: 1.25rem; } }
@media (max-width: 29.99rem) { .nav a:not(.pill) { display: none; } }

/* ---------- Buttons and store badges ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 3.25rem; padding: 0 1.5rem; border-radius: 999px; border: 0;
  background: var(--btn); color: #fff; font: 700 1rem/1.2 var(--text); text-decoration: none; cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.btn:hover { background: var(--btn-hover); }
.btn:active { transform: translateY(1px); }
.btn .i { width: 1.1rem; height: 1.1rem; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); }
.btn.ghost:hover { box-shadow: inset 0 0 0 2px var(--ink); }
.textlink { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; color: var(--ink); text-decoration: none; }
.textlink .i { width: 1.05rem; height: 1.05rem; transition: transform 0.15s ease; }
.textlink:hover .i { transform: translateX(3px); }

.stores { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.store {
  display: inline-flex; align-items: center; gap: 0.7rem;
  min-height: 3.5rem; min-width: 11.5rem; padding: 0.5rem 1.25rem 0.5rem 1rem;
  border-radius: 14px; background: var(--ink); color: var(--bg); text-decoration: none; line-height: 1.1;
}
.store svg { width: 1.6rem; height: 1.6rem; fill: currentColor; flex: none; }
.store span { display: grid; }
.store small { font: 600 0.72rem/1.2 var(--text); opacity: 0.85; }
.store strong { font: 800 1.15rem/1.15 var(--display); letter-spacing: -0.01em; }
.store.is-soon { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); cursor: default; }
.store.is-soon small { color: var(--blue); opacity: 1; font-weight: 700; }
.store.is-primary { order: -1; }
@media (max-width: 29.99rem) { .store { flex: 1 1 9.5rem; min-width: 0; padding-inline: 0.85rem; gap: 0.55rem; } .store strong { font-size: 1.05rem; } }
.stores-note { margin: 0.75rem 0 0; font-size: 0.9rem; color: var(--muted); }
/* Pre-launch: store buttons are quiet "Kommer i desember" chips, secondary to joining a room. */
.stores.quiet { gap: 0.5rem; margin: 0 0 1.75rem; }
.stores.quiet .store { min-height: 0; min-width: 0; flex: none; padding: 0.4rem 0.8rem 0.4rem 0.6rem; gap: 0.45rem; border-radius: 999px; }
.stores.quiet .store svg { width: 1rem; height: 1rem; }
.stores.quiet .store span { display: flex; flex-direction: row-reverse; align-items: baseline; gap: 0.35rem; }
.stores.quiet .store strong { font-size: 0.85rem; }
.stores.quiet .store small { font-size: 0.75rem; font-weight: 600; color: var(--muted); }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(1.5rem, 1rem + 3vw, 4rem) var(--section); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center; grid-template-areas: "top" "bottom" "stage"; }
.hero-top { grid-area: top; }
.hero-bottom { grid-area: bottom; }
.hero .stage { grid-area: stage; }
@media (min-width: 60rem) {
  .hero .wrap { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); grid-template-areas: "top stage" "bottom stage"; column-gap: 4rem; row-gap: 0; }
  .hero-top { align-self: end; }
  .hero-bottom { align-self: start; }
}
.hero h1 { margin-bottom: 1.5rem; }
.hero h1 em, .page-hero h1 em { font-style: normal; color: var(--blue); }
.hero .lead { margin-bottom: 0; }
@media (min-width: 60rem) { .hero .lead { margin-bottom: 2rem; } }
/* Two readers, one voice: teen and parent routes right under the lead */
.roles { display: grid; margin: 0 0 2rem; border-top: 1px solid var(--line); }
@media (min-width: 36rem) { .roles { grid-template-columns: 1fr 1fr; } .roles a + a { border-left: 1px solid var(--line); padding-left: 1.25rem; } }
.roles a { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0.2rem 0.75rem; padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.roles small { grid-column: 1; font: 700 0.85rem/1.2 var(--text); color: var(--blue); }
.roles strong { grid-column: 1; font: 800 1.08rem/1.2 var(--display); letter-spacing: -0.01em; }
.roles .i { grid-column: 2; grid-row: 1 / span 2; align-self: center; transition: transform 0.15s ease; }
.roles a:hover .i { transform: translateX(3px); }
.roles a:hover strong { color: var(--blue); }
/* ---------- Live game stage: red sign ring + phone with the real game (app spec: asphalt room) ---------- */
.stage { position: relative; display: grid; place-items: center; margin: 0; padding-block: 1rem; min-height: 35rem; isolation: isolate; }
.stage-ring {
  position: absolute; z-index: -1; width: min(31rem, 100%); aspect-ratio: 1; border-radius: 50%;
  background: var(--disc); border: clamp(1.75rem, 1rem + 2.6vw, 2.75rem) solid var(--red);
  box-shadow: 0 0 0 1px var(--line);
}
.phone {
  --g-bg: #1a1d21; --g-bg2: #22262b; --g-bg3: #2c3137; --g-ink: #f4f2ec; --g-ink2: #adb4bb;
  --g-good: #46c486; --g-timer: #f3c018; --g-low: #f06363;
  position: relative; width: 17.25rem; aspect-ratio: 9 / 18.6;
  padding: 0.55rem; border-radius: 2.75rem; background: #0c0e10;
  box-shadow: var(--shadow-lg), inset 0 0 0 1.5px #2a2f35;
}
.phone::before { content: ""; position: absolute; top: 1.05rem; left: 50%; translate: -50% 0; width: 4.5rem; height: 1.25rem; border-radius: 999px; background: #0c0e10; z-index: 3; }
.screen {
  position: relative; height: 100%; overflow: hidden; border-radius: 2.25rem; color: var(--g-ink);
  background: var(--g-bg) linear-gradient(rgb(239 234 219 / 0.055) 50%, transparent 50%) 50% 0 / 3px 2.2rem repeat-y;
}
.scene { position: absolute; inset: 0; padding: 2.6rem 0.8rem 0.85rem; display: flex; flex-direction: column; gap: 0.7rem; }
.g-top { display: flex; align-items: center; gap: 0.35rem; font: 800 0.66rem/1 var(--display); letter-spacing: 0.04em; }
.g-pill, .g-tag { padding: 0.32rem 0.5rem; border-radius: 999px; background: var(--g-bg3); }
.g-tag { background: transparent; box-shadow: inset 0 0 0 1px var(--g-bg3); color: var(--g-ink2); }
.g-score { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--g-ink2); }
.g-q { display: grid; grid-template-columns: 1fr auto; gap: 0.6rem; align-items: start; }
.q-text { margin: 0; font: 800 0.98rem/1.22 var(--display); letter-spacing: -0.01em; }
.timer { position: relative; width: 2.9rem; height: 2.9rem; display: grid; place-items: center; }
.timer svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.timer .t-track { fill: none; stroke: rgb(255 255 255 / 0.12); stroke-width: 3.5; }
.timer .t-ring { fill: none; stroke: var(--g-timer); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.timer .t-num { position: relative; font: 900 1rem/1 var(--display); font-variant-numeric: tabular-nums; counter-reset: s var(--sec); }
.timer .t-num::after { content: counter(s); }
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; }
.cards li {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 0.45rem;
  min-height: 5.4rem; padding: 0.55rem 0.6rem 0.65rem; border-radius: 0.95rem;
  font: 700 0.8rem/1.2 var(--text); color: #fff;
}
.cards .card-a { background: #0b57a4; box-shadow: inset 0 -4px 0 #073e76; --ring: #0b57a4; }
.cards .card-b { background: #f3c018; box-shadow: inset 0 -4px 0 #b98f00; --ring: #b3202a; color: #17140a; }
.cards .card-c { background: #b3202a; box-shadow: inset 0 -4px 0 #7f141b; --ring: #b3202a; }
.cards .card-d { background: #1e6b4a; box-shadow: inset 0 -4px 0 #114730; --ring: #1e6b4a; }
.plate {
  position: relative; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 6px;
  background: #fff; box-shadow: inset 0 0 0 2.5px var(--ring); color: #14181c; font: 900 0.8rem/1 var(--display);
}
.plate svg { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0.3rem; border-radius: 6px; background: #fff; fill: none; stroke: #137a45; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.tag-right { position: absolute; top: 0.6rem; right: 0.5rem; padding: 0.22rem 0.4rem; border-radius: 999px; background: #fff; color: #14181c; font: 800 0.58rem/1 var(--text); font-style: normal; opacity: 0; }
.g-foot { margin-top: auto; display: grid; gap: 0.55rem; }
.why { margin: 0; padding: 0.55rem 0.65rem; border-radius: 0.75rem; background: var(--g-bg2); font: 600 0.72rem/1.35 var(--text); opacity: 0; }
.why b { display: block; margin-bottom: 0.15rem; font: 800 0.58rem/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--g-timer); }
.why small { display: block; margin-top: 0.2rem; font-size: 0.6rem; color: var(--g-ink2); }
.q-who { display: flex; align-items: center; gap: 0.5rem; font: 600 0.72rem/1 var(--text); color: var(--g-ink2); }
.q-count { counter-reset: d var(--done); }
.q-count::before { content: counter(d) " av 5 har svart"; }
.avatars { display: flex; }
.avatars i { display: grid; place-items: center; width: 1.45rem; height: 1.45rem; margin-right: -0.3rem; border-radius: 50%; border: 2px solid var(--g-bg); background: var(--g-ink); color: #14181c; font: 900 0.62rem/1 var(--display); font-style: normal; }
.avatars i:nth-child(2) { background: #f3c018; }
.avatars i:nth-child(3) { background: #9cc4ee; }
.avatars i:nth-child(4) { background: #e8a0a6; }
.avatars .wait { background: transparent; border: 1.5px dashed var(--g-ink2); }

/* Podium (app S10): 2-1-3, yellow / lane white / bronze, one award, one short confetti burst */
.scene-podium { opacity: 0; justify-content: flex-start; }
.pod-title { margin: 0.2rem 0 0; font: 800 0.64rem/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--g-ink2); }
.pod-lead { margin: 0 0 auto; font: 900 1.7rem/1 var(--display); letter-spacing: -0.02em; }
.pod { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 0.35rem; }
.pod li { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; text-align: center; }
.pod li > i { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--g-ink); color: #14181c; font: 900 0.75rem/1 var(--display); font-style: normal; }
.pod .p1 > i { background: #f3c018; }
.pod .who { font: 800 0.8rem/1 var(--display); }
.pod .pts { font: 600 0.66rem/1 var(--text); color: var(--g-ink2); font-variant-numeric: tabular-nums; }
.pod .bar { width: 100%; margin-top: 0.2rem; display: grid; place-items: start center; padding-top: 0.45rem; border-radius: 0.6rem 0.6rem 0.2rem 0.2rem; font: 900 1.4rem/1 var(--display); color: #17140a; transform-origin: bottom; }
.pod .p1 .bar { height: 8.5rem; background: #f3c018; }
.pod .p2 .bar { height: 6.25rem; background: #efeadb; }
.pod .p3 .bar { height: 4.6rem; background: #b07a45; }
.award { margin: 0; padding: 0.5rem 0.65rem; border-radius: 0.6rem; background: var(--g-bg2); box-shadow: inset 0 3px 0 #f3c018; font: 600 0.72rem/1.3 var(--text); }
.award b { display: block; margin-bottom: 0.15rem; font: 800 0.58rem/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: #f3c018; }
.confetti { position: absolute; inset: 0 0 40% 0; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -1rem; width: 0.4rem; height: 0.7rem; border-radius: 1px; opacity: 0; background: #f3c018; }
.confetti i:nth-child(1) { left: 8%; } .confetti i:nth-child(2) { left: 18%; background: #0b57a4; } .confetti i:nth-child(3) { left: 29%; background: #b3202a; }
.confetti i:nth-child(4) { left: 40%; background: #efeadb; } .confetti i:nth-child(5) { left: 50%; background: #1e6b4a; } .confetti i:nth-child(6) { left: 60%; }
.confetti i:nth-child(7) { left: 70%; background: #0b57a4; } .confetti i:nth-child(8) { left: 79%; background: #b3202a; } .confetti i:nth-child(9) { left: 88%; background: #efeadb; } .confetti i:nth-child(10) { left: 94%; background: #1e6b4a; }

.room-tag {
  position: absolute; top: 5.5rem; left: max(0rem, calc(50% - 15.75rem));
  padding: 0.55rem 0.9rem; border-radius: 0.8rem; background: #0b57a4; color: #fff;
  font: 900 1.3rem/1 var(--display); letter-spacing: 0.03em; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 3px var(--bg), var(--shadow-sm); rotate: -4deg;
}
.room-tag small { display: block; margin-bottom: 0.3rem; font: 800 0.58rem/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.85; }
@media (max-width: 26rem) {
  .stage { min-height: 32rem; padding-top: 2.25rem; }
  .phone { width: 15.75rem; }
  .scene { padding-inline: 0.65rem; gap: 0.55rem; }
  .cards li { min-height: 4.9rem; }
  .room-tag { left: 0; top: 0.4rem; }
}

/* The loop (14 s): countdown and answers coming in, reveal at 50 % with the rule, podium 58-93 %. */
@media (prefers-reduced-motion: no-preference) {
  .timer .t-num { animation: kk-sec 14s linear infinite; }
  .timer .t-ring { animation: kk-ring 14s linear infinite; }
  .q-count { animation: kk-done 14s linear infinite; }
  .avatars i:nth-child(1) { animation: kk-pop1 14s ease-out infinite; }
  .avatars i:nth-child(2) { animation: kk-pop2 14s ease-out infinite; }
  .avatars i:nth-child(3) { animation: kk-pop3 14s ease-out infinite; }
  .avatars i:nth-child(4) { animation: kk-pop4 14s ease-out infinite; }
  .cards li:not(.is-right) { animation: kk-dim 14s ease infinite; }
  .cards .is-right { animation: kk-right 14s ease infinite; }
  .plate svg, .tag-right, .why { animation: kk-show 14s ease infinite; }
  .scene-q { animation: kk-q 14s ease infinite; }
  .scene-podium { animation: kk-pod 14s ease infinite; }
  .pod .p1 .bar { animation: kk-bar1 14s cubic-bezier(0.2, 0.8, 0.2, 1) infinite; }
  .pod .p2 .bar { animation: kk-bar2 14s cubic-bezier(0.2, 0.8, 0.2, 1) infinite; }
  .pod .p3 .bar { animation: kk-bar3 14s cubic-bezier(0.2, 0.8, 0.2, 1) infinite; }
  .confetti i { animation: kk-confetti 14s linear infinite; }
  .confetti i:nth-child(odd) { animation-name: kk-confetti2; }
  .room-tag { animation: kk-float 7s ease-in-out infinite; }
}
@keyframes kk-sec { 0% { --sec: 10; } 48%, 100% { --sec: 4; } }
@keyframes kk-ring { 0% { stroke-dashoffset: 0; stroke: #f3c018; } 34% { stroke: #f3c018; } 35%, 100% { stroke: #f06363; } 48%, 100% { stroke-dashoffset: 60; } }
@keyframes kk-done { 0%, 12% { --done: 0; } 13%, 22% { --done: 1; } 23%, 32% { --done: 2; } 33%, 42% { --done: 3; } 43%, 100% { --done: 4; } }
@keyframes kk-pop1 { 0%, 12% { transform: scale(0); } 15%, 100% { transform: scale(1); } }
@keyframes kk-pop2 { 0%, 22% { transform: scale(0); } 25%, 100% { transform: scale(1); } }
@keyframes kk-pop3 { 0%, 32% { transform: scale(0); } 35%, 100% { transform: scale(1); } }
@keyframes kk-pop4 { 0%, 42% { transform: scale(0); } 45%, 100% { transform: scale(1); } }
@keyframes kk-dim { 0%, 49% { opacity: 1; filter: none; } 53%, 100% { opacity: 0.3; filter: saturate(0.4); } }
@keyframes kk-right { 0%, 49% { outline: 0 solid transparent; } 53%, 100% { outline: 3px solid #46c486; outline-offset: 2px; } }
@keyframes kk-show { 0%, 50% { opacity: 0; } 54%, 100% { opacity: 1; } }
@keyframes kk-q { 0%, 56% { opacity: 1; } 59%, 94% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes kk-pod { 0%, 57% { opacity: 0; } 60%, 92% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes kk-bar1 { 0%, 60% { transform: scaleY(0.1); } 68%, 100% { transform: scaleY(1); } }
@keyframes kk-bar2 { 0%, 61% { transform: scaleY(0.1); } 69%, 100% { transform: scaleY(1); } }
@keyframes kk-bar3 { 0%, 62% { transform: scaleY(0.1); } 70%, 100% { transform: scaleY(1); } }
@keyframes kk-confetti { 0%, 63% { opacity: 0; transform: translateY(0) rotate(0); } 64% { opacity: 1; } 71% { opacity: 1; } 72%, 100% { opacity: 0; transform: translateY(13rem) rotate(260deg); } }
@keyframes kk-confetti2 { 0%, 64% { opacity: 0; transform: translateY(0) rotate(0); } 65% { opacity: 1; } 72% { opacity: 1; } 73%, 100% { opacity: 0; transform: translateY(11rem) rotate(-220deg); } }
@keyframes kk-float { 50% { translate: 0 -0.35rem; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .timer .t-num { --sec: 6; }
  .timer .t-ring { stroke-dashoffset: 40; }
  .q-count { --done: 4; }
  .cards li:not(.is-right) { opacity: 0.3; filter: saturate(0.4); }
  .cards .is-right { outline: 3px solid #46c486; outline-offset: 2px; }
  .plate svg, .tag-right, .why { opacity: 1; }
  .confetti { display: none; }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--section); }
.section.tint { background: var(--surface); }
.section-head { display: grid; gap: 1rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 60rem) { .section-head.split { grid-template-columns: 1fr 1fr; align-items: end; gap: 3rem; } .section-head.split .lead { margin: 0; } }
.section-head h2 { max-width: 16ch; }

/* 3 steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.5rem; counter-reset: step; }
@media (min-width: 52rem) { .steps { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.steps li { counter-increment: step; border-top: 3px solid var(--ink); padding-top: 1.75rem; }
.steps li::before {
  content: counter(step); display: grid; place-items: center; width: 4.25rem; height: 4.25rem; margin-bottom: 1.5rem;
  border-radius: 50%; background: var(--disc); border: 0.55rem solid var(--red); color: var(--glyph);
  font: 900 1.9rem/1 var(--display); letter-spacing: -0.03em; padding-top: 0.15rem;
}
.steps h3 { margin-bottom: 0.6rem; }
@media (max-width: 51.99rem) {
  .steps { gap: 0; }
  .steps li { display: grid; grid-template-columns: 3.25rem 1fr; column-gap: 1rem; padding-block: 1.25rem; border-top-width: 1px; border-color: var(--line); }
  .steps li::before { grid-row: span 2; width: 3.1rem; height: 3.1rem; margin: 0; border-width: 0.4rem; font-size: 1.35rem; }
  .steps h3 { margin-bottom: 0.3rem; }
}
.h-small { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); }
.steps p { margin: 0; color: var(--muted); }

/* Night band: family challenge */
.night { background: var(--night); color: var(--night-ink); }
.night .kicker { color: #f3c018; }
.night .lead, .night p { color: var(--night-muted); }
.night a { color: var(--night-ink); }
.night .wrap { display: grid; gap: clamp(3rem, 6vw, 5rem); align-items: center; }
@media (min-width: 60rem) { .night .wrap { grid-template-columns: 1fr 1fr; } }
.night h2 { color: var(--night-ink); margin-bottom: 1.5rem; }
.night h2 .vs { color: var(--night-muted); font-weight: 600; }
.stat { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1.25rem; align-items: center; margin: 0; padding-top: 2rem; border-top: 1px solid #2c3036; }
@media (min-width: 60rem) { .night .stat { padding: 0 0 0 3rem; border-top: 0; border-left: 1px solid #2c3036; } }
.stat b { font: 900 clamp(3rem, 2rem + 4vw, 4.5rem)/0.9 var(--display); letter-spacing: -0.04em; color: var(--night-ink); grid-row: span 2; }
.stat span { color: var(--night-ink); font-weight: 600; line-height: 1.35; }
.stat cite { font-style: normal; font-size: 0.85rem; color: var(--night-muted); }
.stat cite a { color: var(--night-muted); }

.duel { margin: 0; background: var(--night-2); border-radius: 1.75rem; padding: clamp(1.25rem, 3vw, 2rem); box-shadow: inset 0 0 0 1px #2c3036; }
.duel-top { display: flex; justify-content: space-between; align-items: center; font: 800 0.72rem/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--night-muted); margin-bottom: 1.5rem; }
.duel-top .live { display: inline-flex; align-items: center; gap: 0.45rem; color: #f3c018; }
.duel-top .live::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #d23a43; }
.podium { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 0.6rem; height: 17rem; }
.podium li { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 0.5rem; height: 100%; text-align: center; }
.podium .who { font: 800 1rem/1.1 var(--display); color: var(--night-ink); }
.podium .who small { display: block; font: 600 0.75rem/1.3 var(--text); color: var(--night-muted); }
.podium .pts { font: 700 0.85rem/1 var(--text); color: var(--night-muted); font-variant-numeric: tabular-nums; }
.podium .bar { width: 100%; display: grid; place-items: start center; padding-top: 0.75rem; border-radius: 1rem 1rem 0.35rem 0.35rem; background: #262b31; font: 900 2.25rem/1 var(--display); color: var(--night-ink); transform-origin: bottom; }
.podium .p1 .bar { height: 10rem; background: #0b57a4; color: #fff; }
.podium .p2 .bar { height: 7rem; }
.podium .p3 .bar { height: 4.75rem; }
.duel figcaption { margin-top: 1.25rem; font-size: 0.85rem; color: var(--night-muted); }

/* Parents: five-second grid */
.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
@media (min-width: 64rem) { .facts { grid-template-columns: repeat(4, 1fr); } }
.facts li { padding: 1.5rem 1rem 1.5rem 0; border-bottom: 1px solid var(--line); min-width: 0; }
.facts li:nth-child(even) { padding-left: 1rem; border-left: 1px solid var(--line); }
@media (min-width: 40rem) { .facts li { padding: 1.75rem 1.5rem 1.75rem 0; } .facts li:nth-child(even) { padding-left: 1.5rem; } }
@media (min-width: 64rem) { .facts li + li { padding-left: 1.5rem; border-left: 1px solid var(--line); } }
.facts .i { width: 1.5rem; height: 1.5rem; color: var(--blue); margin-bottom: 1.25rem; }
.facts b { display: block; font: 900 clamp(1.45rem, 1rem + 2vw, 2.1rem)/1.05 var(--display); letter-spacing: -0.03em; margin-bottom: 0.6rem; }
.facts span { color: var(--muted); display: block; max-width: 22rem; font-size: clamp(0.92rem, 0.85rem + 0.3vw, 1.0625rem); }
.facts .i { margin-bottom: 1rem; }
.facts b.num { font-size: clamp(2.75rem, 2rem + 3vw, 4.5rem); line-height: 0.9; letter-spacing: -0.045em; margin-bottom: 0.75rem; }
.after-facts { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }

/* FAQ */
.faq-grid { display: grid; gap: 2rem; }
@media (min-width: 60rem) { .faq-grid { grid-template-columns: 0.8fr 1.2fr; gap: 4rem; } }
.faq { border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.35rem 0; font: 800 1.12rem/1.3 var(--display); letter-spacing: -0.01em;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: ""; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line);
  background: linear-gradient(var(--ink), var(--ink)) center / 0.75rem 2px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 2px 0.75rem no-repeat;
  transition: transform 0.2s ease;
}
details[open] summary::after { background: linear-gradient(var(--ink), var(--ink)) center / 0.75rem 2px no-repeat; }
summary:hover::after { box-shadow: inset 0 0 0 1.5px var(--ink); }
details > :not(summary) { margin: 0 0 1.35rem; color: var(--muted); max-width: 40rem; }

/* Final CTA */
.final { padding-block: var(--section); }
.final .card {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: center; padding: clamp(1.5rem, 5vw, 4.5rem);
  border-radius: 2rem; background: var(--btn); color: #fff; position: relative; overflow: hidden; isolation: isolate;
}
.final .card::after {
  content: ""; position: absolute; z-index: -1; right: -9rem; bottom: -9rem; width: 26rem; aspect-ratio: 1; border-radius: 50%;
  background: #fff; border: 3.5rem solid var(--red); opacity: 0.1;
}
@media (min-width: 60rem) { .final .card { grid-template-columns: 1fr auto; } .final .card:has(> .qr[hidden]) { grid-template-columns: minmax(0, 1fr); } }
.final h2 { color: #fff; margin-bottom: 1rem; max-width: 14ch; }
.final p { color: rgb(255 255 255 / 0.85); max-width: 30rem; }
.final .store { background: #fff; color: #14181c; }
.final .store.is-soon { background: rgb(255 255 255 / 0.1); color: #fff; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.35); }
.final .store.is-soon small { color: #fff; opacity: 0.85; }
.final .stores-note, .final .hint { color: rgb(255 255 255 / 0.8); }
.final a:not(.store):not(.btn) { color: #fff; }
.qr { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 60rem) {
  .qr { display: grid; justify-items: center; gap: 0.75rem; margin: 0; padding: 1.25rem; border-radius: 1.25rem; background: #fff; color: #14181c; width: 13rem; }
  .qr img { width: 10.5rem; height: 10.5rem; }
  .qr figcaption { font: 700 0.85rem/1.3 var(--text); text-align: center; }
}
/* Room-code form: the one live action before launch */
.join { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; max-width: 28rem; margin: 0 0 1.25rem; }
.join label { font: 800 1.05rem/1.2 var(--display); }
.join-row { display: flex; gap: 0.5rem; }
.join input {
  flex: 1; width: 100%; min-width: 0; min-height: 3.5rem; padding: 0 1.15rem; border-radius: 999px; border: 2px solid var(--line);
  background: var(--raised); color: var(--ink); font: 800 1.3rem/1 var(--display); letter-spacing: 0.14em; font-variant-numeric: tabular-nums;
}
.join input::placeholder { color: var(--muted); letter-spacing: 0.02em; font-weight: 600; font-size: 1.05rem; }
.join input:focus-visible { border-color: var(--btn); outline: 3px solid color-mix(in srgb, var(--btn) 35%, transparent); outline-offset: 1px; }
.join input[aria-invalid="true"] { border-color: var(--red); }
.join .btn { min-height: 3.5rem; padding: 0 1.6rem; flex: none; }
.join-hint { font-size: 0.88rem; color: var(--muted); }
.final .join label { color: #fff; }
.final .join input { background: #fff; border-color: #fff; color: #14181c; }
.final .join input::placeholder { color: #535d68; }
.final .join .btn { background: #fff; color: #0b57a4; }
.final .join .btn:hover { background: #eaf1fa; }
.final .join-hint { color: rgb(255 255 255 / 0.85); }
.final .stores.quiet .store small { color: rgb(255 255 255 / 0.8); }
.center-page .join { margin: 1rem auto 0; text-align: left; }
.prose .join { margin: 0 0 3rem; }
.final .btn.ghost { color: #fff; box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.5); }
.final .btn.ghost:hover { box-shadow: inset 0 0 0 2px #fff; }
.final :focus-visible { outline-color: #fff; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding-block: 3.5rem 3rem; font-size: 0.95rem; color: var(--muted); }
.site-footer .cols { display: grid; gap: 2rem; grid-template-columns: 1fr 1fr; }
.site-footer .cols > :first-child { grid-column: 1 / -1; }
@media (min-width: 48rem) { .site-footer .cols { grid-template-columns: 1.4fr 1fr 1fr; } .site-footer .cols > :first-child { grid-column: auto; } }
.site-footer .brand { margin-bottom: 1rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.site-footer a { color: var(--ink); text-decoration: none; }
.site-footer a:hover { color: var(--blue); text-decoration: underline; }
.site-footer h2 { font: 800 0.75rem/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }
.site-footer .fine { margin: 2.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: 0.85rem; }
.site-footer .fine a { color: var(--muted); text-decoration: underline; }

/* ---------- Inner pages ---------- */
.page-hero { padding-block: clamp(2rem, 1.5rem + 3vw, 4.5rem) clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.page-hero.split .wrap { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 60rem) { .page-hero.split .wrap { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.page-hero h1 { font-size: clamp(2.4rem, 1.5rem + 4vw, 4.6rem); margin-bottom: 1.25rem; max-width: 16ch; }
.page-hero .lead { margin-bottom: 0; }
.crumbs { margin: 0 0 1.5rem; font-size: 0.9rem; color: var(--muted); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 0.4rem; color: var(--line); }
.crumbs a { color: var(--muted); }

.prose { padding-bottom: var(--section); }
.prose h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); letter-spacing: -0.025em; line-height: 1.1; margin: 3.5rem 0 1rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 2rem 0 0.75rem; }
.prose p, .prose li { color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 1.25rem; }
.prose li { margin-bottom: 0.5rem; }
.prose li::marker { color: var(--blue); font-weight: 800; }
.prose .faq { margin-top: 1.5rem; }
.prose .lead { color: var(--muted); }
.howto { list-style: none; padding: 0 !important; margin: 1.5rem 0 2rem; display: grid; gap: 0; counter-reset: h; border-top: 1px solid var(--line); }
.howto li { counter-increment: h; display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding: 1.25rem 0; margin: 0 !important; border-bottom: 1px solid var(--line); }
.howto li::before { content: counter(h); display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--disc); border: 0.35rem solid var(--red); color: var(--glyph); font: 900 1.05rem/1 var(--display); }
.howto strong { font-family: var(--display); font-weight: 800; display: block; font-size: 1.1rem; margin-bottom: 0.15rem; }
.callout { margin: 2rem 0; padding: 1.5rem; border-radius: 1.25rem; background: var(--surface); }
.callout p:last-child { margin: 0; }
.callout strong { font-family: var(--display); }
.draft { margin: 0 0 2.5rem; padding: 1.1rem 1.25rem; border-radius: 1rem; background: var(--surface); box-shadow: inset 4px 0 0 #f3c018; }
.draft strong { font-family: var(--display); }
.todo { background: color-mix(in srgb, #f3c018 30%, transparent); border-radius: 6px; padding: 0.1rem 0.4rem; font-size: 0.92em; }
.updated { font-size: 0.9rem; color: var(--muted); }
table.data { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: 0.95rem; overflow-wrap: anywhere; }
table.data th, table.data td { text-align: left; padding: 0.75rem 0.75rem 0.75rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data th { font-family: var(--display); font-weight: 800; }

/* Contact strip on /hjelp */
.contact { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding: 1.5rem; border-radius: 1.25rem; background: var(--surface); margin: 0 0 3rem; }
.contact .i { width: 1.5rem; height: 1.5rem; color: var(--blue); }
.contact a { font: 800 1.2rem/1 var(--display); }

/* Download and 404 */
.center-page { padding-block: clamp(3rem, 2rem + 6vw, 7rem); text-align: center; }
.center-page .sign-big { width: clamp(9rem, 6rem + 12vw, 13rem); height: auto; margin: 0 auto 2.5rem; border-radius: 22.5%; box-shadow: var(--shadow-sm); }
.center-page h1 { font-size: clamp(2.4rem, 1.6rem + 4vw, 4.2rem); margin-bottom: 1rem; }
.center-page .lead { margin: 0 auto 2rem; }
.center-page .stores, .center-page .actions { justify-content: center; }
.center-page .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.center-page .qr { margin: 2.5rem auto 0; box-shadow: inset 0 0 0 1px var(--line); }
.limit { position: relative; display: grid; place-items: center; width: clamp(10rem, 7rem + 12vw, 14rem); aspect-ratio: 1; margin: 0 auto 2.5rem; border-radius: 50%; background: var(--disc); border: clamp(1rem, 0.6rem + 1.5vw, 1.6rem) solid var(--red); font: 900 clamp(2.6rem, 1.8rem + 3vw, 3.8rem)/1 var(--display); letter-spacing: -0.04em; color: var(--glyph); box-shadow: 0 0 0 1px var(--line); padding-top: 0.3rem; }

/* ---------- Landing hero, game first: three-question demo against "Pappa" ----------
   Deliberately plain and token-driven: a later pass reskins it from packages/ui tokens. */
:root {
  --demo-bg: var(--surface);
  --demo-opt: var(--raised);
  --demo-opt-line: var(--line);
  --demo-plate: var(--btn);
  --demo-plate-ink: #fff;
  --demo-ok: #1e6b4a;
  --demo-radius: 1rem;
}
@media (prefers-color-scheme: dark) {
  :root { --demo-ok: #5cc28f; }
}
.hero.game-first .wrap { grid-template-areas: "top" "demo" "bottom"; }
@media (min-width: 60rem) {
  .hero.game-first .wrap { grid-template-areas: "top demo" "bottom demo"; }
}
.hero-app { margin: 0 0 0.6rem; font-size: 0.95rem; color: var(--muted); }
.demo { grid-area: demo; align-self: center; padding: 1.25rem; border-radius: var(--demo-radius); background: var(--demo-bg); }
.demo-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; margin-bottom: 0.75rem; }
.demo-title { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; }
.demo-score { display: flex; gap: 1rem; margin: 0; font-weight: 700; }
.demo-score b { font-size: 1.15rem; }
.demo-status { margin-left: 0.35rem; font-weight: 600; color: var(--muted); }
.demo-qs, .demo-opts { list-style: none; margin: 0; padding: 0; }
.demo-progress { margin: 0 0 0.35rem; font-size: 0.85rem; font-weight: 700; color: var(--blue); }
.demo-text { margin: 0 0 1rem; font: 800 1.2rem/1.3 var(--display); }
.demo-text:focus-visible, .demo-feedback:focus-visible, .demo-end:focus-visible { outline-offset: 4px; }
.demo-opts { display: grid; gap: 0.5rem; margin-bottom: 1rem; }
.demo-opts > li { display: flex; align-items: center; gap: 0.75rem; min-height: 3rem; padding: 0.5rem 0.75rem; border-radius: 0.75rem; background: var(--demo-opt); box-shadow: inset 0 0 0 1.5px var(--demo-opt-line); }
.demo.is-live .demo-opts > li { display: block; min-height: 0; padding: 0; background: none; box-shadow: none; }
.demo-opt { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; width: 100%; min-height: 3rem; padding: 0.5rem 0.75rem; border: 0; border-radius: 0.75rem; background: var(--demo-opt); box-shadow: inset 0 0 0 1.5px var(--demo-opt-line); color: var(--ink); font: 600 1rem/1.3 var(--text); text-align: left; cursor: pointer; }
.demo-opt:hover:not([aria-disabled="true"]) { box-shadow: inset 0 0 0 2px var(--btn); }
.demo-opt[aria-disabled="true"] { cursor: default; }
.demo-opt span { flex: 1 1 8rem; }
.demo-plate { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; flex: none; border-radius: 0.4rem; background: var(--demo-plate); color: var(--demo-plate-ink); font: 800 0.9rem/1 var(--display); }
.demo-opt.is-right { box-shadow: inset 0 0 0 3px var(--demo-ok); }
.demo-opt.is-picked:not(.is-right) { box-shadow: inset 0 0 0 2px var(--muted); }
.demo-tag { font: 700 0.78rem/1.2 var(--text); font-style: normal; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--demo-opt-line); }
.demo-opt.is-right .demo-tag:first-of-type { color: var(--demo-ok); }
.demo-reveal summary { cursor: pointer; font-weight: 700; color: var(--blue); }
.demo-why p { margin: 0.5rem 0 0; }
.demo-src { font-size: 0.85rem; color: var(--muted); overflow-wrap: anywhere; }
.demo-verdict { margin: 0; font-weight: 800; }
.demo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin: 1rem 0 0; }
.demo-result { margin: 0 0 0.5rem; font: 900 1.6rem/1.15 var(--display); letter-spacing: -0.02em; }
.demo-note { margin: 1rem 0 0; font-size: 0.8rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .demo-opt, .demo .btn { transition: none; }
}
/* Guides (/guide): practice questions work without JS (answer in <details>) */
.guide-list { list-style: none; padding: 0 !important; margin: 1.5rem 0 2rem !important; border-top: 1px solid var(--line); }
.guide-list li { margin: 0 !important; padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.guide-list a { font: 800 1.2rem/1.25 var(--display); letter-spacing: -0.01em; }
.guide-list p { margin: 0.35rem 0 0; color: var(--muted); }
.quiz { list-style: none; padding: 0 !important; margin: 1.5rem 0 0 !important; counter-reset: q; }
.quiz > li { counter-increment: q; margin: 0 0 1rem !important; padding: 1.25rem 1.25rem 0; border-radius: 1.25rem; background: var(--surface); }
.quiz .q { font: 800 1.1rem/1.35 var(--display); margin: 0 0 0.75rem; }
.quiz .q::before { content: counter(q) ". "; color: var(--blue); }
.prose .quiz .opts { list-style: upper-alpha; padding-left: 1.6rem; margin: 0 0 0.5rem; }
.quiz details { border-top: 1px solid var(--line); border-bottom: 0; }
.quiz summary { padding: 1rem 0; font-size: 1rem; }
.quiz details > p { color: var(--ink); margin-bottom: 0.75rem; }
.quiz details > p.small { color: var(--muted); margin-bottom: 1.25rem; }
.sources li { overflow-wrap: anywhere; }
.table-wrap { margin: 1.5rem 0; }
.table-wrap table.data { margin: 0; overflow-wrap: normal; }
@media (max-width: 35.99rem) {
  .table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table-wrap tr { display: block; padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
  .table-wrap table.data tbody th, .table-wrap table.data td { display: block; padding: 0.1rem 0; border: 0; }
  .table-wrap td[data-label]::before { content: attr(data-label) ": "; font-weight: 600; }
}
.final .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0 0; }

@media print {
  .site-header, .site-footer, .stores, .stage, .final, .demo { display: none; }
  body { background: #fff; color: #000; }
}