/* Best Chargers design system: tokens and component classes.
   This file is the single source of truth for the system's look. Hex values
   appear ONLY in the :root block below; everything else is a token or a
   color-mix() of tokens. See readme.md for how to use it and ../../design.md
   for the reasoning.

   Idea: day for reading, night for charging. Warm paper surfaces for reading
   and deciding; a deep teal night world for 3D, motion and results, where only
   things carrying energy glow. */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Figtree:wght@400;500;600;700&display=swap');

/* ═══════════════════════════════════════════════════════════════════════════
   1. Tokens
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Roles: day */
  --color-bg: #F8F7F3;            /* paper: the page ground */
  --color-surface: #FFFFFF;       /* cards, answer boxes, inputs */
  --color-surface-2: #EFEDE7;     /* stone: soft fills, tracks */
  --color-divider: #E3E0D8;       /* hairlines */
  --color-text: #13201D;          /* ink */
  --color-text-2: #2B3633;        /* body copy */
  --color-muted: #5E6865;         /* secondary text, 5.38:1 on paper */

  /* Roles: brand */
  --color-accent: #388377;        /* teal: identity, bars, large text */
  --color-accent-ink: #1F5E55;    /* links, text on tints, focus */
  --color-accent-2: #61CE70;      /* green: primary action only */
  --color-accent-2-hover: #4FB55E;

  /* Roles: night */
  --color-night: #0F2A26;
  --color-night-2: #132F2B;
  --color-night-deep: #06161A;
  --color-night-lift: #12352F;
  --color-on-night: #EAF5F2;
  --color-on-night-muted: #A9C7C0;
  --color-glow: #71FFEE;          /* night only: energy */

  /* Roles: signals and the product plate */
  --color-sun: #F5A623;           /* Google stars, peak warnings */
  --color-rose: #D65A5A;          /* negatives, cost above the cheap rate */
  --color-plate-1: #E0F0EF;
  --color-plate-2: #C8E8E6;

  /* Tonal ramps: OKLCH, one shared lightness scale; locked colours pinned */
  --color-neutral-100: #F8F7F3;
  --color-neutral-200: #EFEDE7;
  --color-neutral-300: #E3E0D8;
  --color-neutral-400: #B8B8B0;
  --color-neutral-500: #969A92;
  --color-neutral-600: #737B75;
  --color-neutral-700: #5E6865;
  --color-neutral-800: #2B3633;
  --color-neutral-900: #13201D;

  --color-accent-100: #EAF5F2;
  --color-accent-200: #D3EBE5;
  --color-accent-300: #B7DED6;
  --color-accent-400: #7EC8BA;
  --color-accent-500: #5EA89B;
  --color-accent-600: #388377;
  --color-accent-700: #1F5E55;
  --color-accent-800: #0C4A42;
  --color-accent-900: #032E28;

  --color-accent-2-100: #E3FFE4;
  --color-accent-2-200: #D5F1D6;
  --color-accent-2-300: #ADE5B1;
  --color-accent-2-400: #61CE70;
  --color-accent-2-500: #4FB55E;
  --color-accent-2-600: #338E43;
  --color-accent-2-700: #246B30;
  --color-accent-2-800: #104D1C;
  --color-accent-2-900: #00300A;

  --color-sun-100: #FFF4E6;
  --color-sun-200: #FBE4C8;
  --color-sun-300: #F8CC94;
  --color-sun-400: #F5A623;
  --color-sun-500: #CD8801;
  --color-sun-600: #A46B01;
  --color-sun-700: #7C5000;
  --color-sun-800: #593800;
  --color-sun-900: #372100;

  --color-rose-100: #FFF2F2;
  --color-rose-200: #FFDFDD;
  --color-rose-300: #FFC3BF;
  --color-rose-400: #FF9591;
  --color-rose-500: #D65A5A;
  --color-rose-600: #C44A4C;
  --color-rose-700: #A0272E;
  --color-rose-800: #74181E;
  --color-rose-900: #4A0A0F;

  /* Derived: mixes of tokens only, never new hues */
  --color-divider-strong: color-mix(in oklch, var(--color-divider) 65%, var(--color-text-2));
  --color-night-line: color-mix(in oklch, var(--color-night) 76%, var(--color-accent));
  --color-night-raise: color-mix(in oklch, var(--color-night) 86%, var(--color-accent));
  --color-glow-soft: color-mix(in oklch, var(--color-glow) 28%, transparent);
  --color-scrim: color-mix(in oklch, var(--color-night-deep) 60%, transparent);
  --icon-grip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F2A26' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-4 5 4 5M15 7l4 5-4 5'/%3E%3C/svg%3E");
  --plate: linear-gradient(150deg, var(--color-plate-1) 0%, var(--color-plate-2) 100%);
  --night-gradient: linear-gradient(180deg, var(--color-night-deep) 0%, var(--color-night) 55%, var(--color-night-lift) 100%);

  /* Type */
  --font-heading: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading-weight: 800;
  --font-figure: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-reading-xl: clamp(2.75rem, 1.9rem + 4vw, 5rem);
  --text-reading-lg: clamp(2rem, 1.6rem + 1.8vw, 3rem);
  --text-h1: clamp(2.125rem, 1.45rem + 3vw, 3.75rem);
  --text-h2: clamp(1.625rem, 1.25rem + 1.6vw, 2.5rem);
  --text-h3: clamp(1.1875rem, 1.1rem + 0.4vw, 1.4375rem);
  --text-h4: 1.0625rem;
  --text-lead: clamp(1.125rem, 1.08rem + 0.25vw, 1.25rem);
  --text-article: 1.125rem;
  --text-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --text-sm: 0.875rem;
  --text-xs: 0.78125rem;
  --text-eyebrow: 0.75rem;

  /* Space: a 4pt scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --section: clamp(56px, 7vw + 16px, 112px);
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1240px;
  --measure: 68ch;
  --target: 44px;
  --head-h: 64px;

  /* Shape */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* Depth: tinted with night, never grey */
  --shadow-sm: 0 1px 2px color-mix(in oklch, var(--color-night) 12%, transparent);
  --shadow-md: 0 6px 18px -6px color-mix(in oklch, var(--color-night) 22%, transparent), 0 2px 6px -2px color-mix(in oklch, var(--color-night) 10%, transparent);
  --shadow-lg: 0 24px 48px -20px color-mix(in oklch, var(--color-night) 42%, transparent), 0 4px 12px -4px color-mix(in oklch, var(--color-night) 14%, transparent);
  --shadow-dock: 0 -10px 30px -16px color-mix(in oklch, var(--color-night) 40%, transparent);
  --shadow-glow: 0 0 0 1px color-mix(in oklch, var(--color-glow) 45%, transparent), 0 0 18px color-mix(in oklch, var(--color-glow) 35%, transparent);

  /* Motion */
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: linear(0, 0.36 9%, 0.94 22%, 1.07 30%, 1.02 40%, 0.99 52%, 1);
  --dur-press: 120ms;
  --dur-state: 220ms;
  --dur-reveal: 420ms;
  --dur-count: 900ms;
  --dur-fill: 1400ms;
  --stagger: 60ms;
}

@media (min-width: 981px) {
  :root { --head-h: 72px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. Base
   ═══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--head-h) + var(--space-6));
  overflow-x: clip;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-text-2);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  min-height: 100vh;
}
main { display: block; overflow-x: clip; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 {
  font-family: var(--font-heading);
  color: var(--color-text);
  text-wrap: balance;
}
h1 { font-size: var(--text-h1); font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; }
h2 { font-size: var(--text-h2); font-weight: 800; line-height: 1.1; letter-spacing: -0.022em; }
h3 { font-size: var(--text-h3); font-weight: 700; line-height: 1.25; letter-spacing: -0.012em; }
.h1 { font-family: var(--font-heading); font-size: var(--text-h1); font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; color: var(--color-text); text-wrap: balance; }
h4 { font-family: var(--font-body); font-size: var(--text-h4); font-weight: 700; line-height: 1.3; color: var(--color-text); }

p { text-wrap: pretty; }
strong, b { font-weight: 700; color: var(--color-text); }

a {
  color: var(--color-accent-ink);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in oklch, currentColor 40%, transparent);
  transition: color var(--dur-state) var(--ease-out), text-decoration-color var(--dur-state) var(--ease-out);
}
a:hover { color: var(--color-accent); text-decoration-color: currentColor; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-accent-ink);
  outline-offset: 3px;
  border-radius: 6px;
}
.night :focus-visible { outline-color: var(--color-glow); }
::selection { background: color-mix(in oklch, var(--color-accent-2) 35%, transparent); }

.hidden { display: none !important; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: calc(-1 * var(--space-16));
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-night);
  color: var(--color-on-night);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: var(--space-3); color: var(--color-on-night); }

/* Icons: inline SVG sprite, 24px grid, 1.75px stroke, currentColor */
.i {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.i-sm { width: 1em; height: 1em; }
.i-lg { width: 1.5em; height: 1.5em; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════════════════
   3. Layout
   ═══════════════════════════════════════════════════════════════════════════ */
.container {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section); }
.section-tight { padding-block: calc(var(--section) * 0.6); }
.surface-2 { background: var(--color-surface-2); }
.surface { background: var(--color-surface); }
.rule-top { border-top: 1px solid var(--color-divider); }

.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-lg { display: flex; flex-direction: column; gap: var(--space-8); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.grid-2, .grid-3, .grid-4 { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 981px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.section-head { display: grid; gap: var(--space-3); margin-bottom: var(--space-8); max-width: 62ch; }
.section-head p { color: var(--color-muted); font-size: var(--text-lead); line-height: 1.5; }

/* ═══════════════════════════════════════════════════════════════════════════
   4. Type helpers
   ═══════════════════════════════════════════════════════════════════════════ */
.eyebrow {
  font-family: var(--font-heading);
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--color-accent-ink);
}
.night .eyebrow { color: var(--color-accent-2); }
.lead { font-size: var(--text-lead); line-height: 1.55; color: var(--color-text-2); max-width: 60ch; }
.muted { color: var(--color-muted); }
.small { font-size: var(--text-sm); line-height: 1.5; }
.fine { font-size: var(--text-xs); line-height: 1.45; color: var(--color-muted); }
.num { font-variant-numeric: tabular-nums; }
.highlight { color: var(--color-accent); }
.night .highlight { color: var(--color-accent-2); }

/* Long-form article text: Figtree at 18px, 68ch */
.prose { font-size: var(--text-article); line-height: 1.7; color: var(--color-text-2); max-width: var(--measure); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 1.8em; font-size: var(--text-h2); }
.prose h3 { margin-top: 1.5em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--color-accent); }
.prose > :first-child { margin-top: 0; }
.lp-section.prose { display: block; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--target);
  font-weight: 700;
  color: var(--color-accent-ink);
  text-decoration: none;
}
.link-arrow .i { transition: transform var(--dur-state) var(--ease-out); }
.link-arrow:hover { color: var(--color-accent); }
.link-arrow:hover .i { transform: translateX(3px); }
.night .link-arrow { color: var(--color-accent-2); }
.night .link-arrow:hover { color: var(--color-on-night); }

/* ═══════════════════════════════════════════════════════════════════════════
   5. Buttons
   ═══════════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-6);
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-state) var(--ease-out), border-color var(--dur-state) var(--ease-out),
              color var(--dur-state) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.btn .i { width: 1.15em; height: 1.15em; }

/* Primary: green with night text. White on green fails contrast; never use it. */
.btn-primary { background: var(--color-accent-2); color: var(--color-night); }
.btn-primary:hover { background: var(--color-accent-2-hover); color: var(--color-night); }
.btn-primary:active { background: var(--color-accent-2-600); color: var(--color-on-night); }

.btn-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-divider-strong); }
.btn-secondary:hover { border-color: var(--color-accent-ink); color: var(--color-accent-ink); }

.btn-night { background: var(--color-night); color: var(--color-on-night); }
.btn-night:hover { background: var(--color-accent-700); color: var(--color-surface); }

.btn-quiet { background: var(--color-accent-100); color: var(--color-accent-ink); }
.btn-quiet:hover { background: var(--color-accent-200); color: var(--color-accent-800); }

.btn-ghost { min-height: var(--target); padding: 0 var(--space-3); color: var(--color-accent-ink); }
.btn-ghost:hover { background: var(--color-accent-100); color: var(--color-accent-800); }

.night .btn-secondary { background: transparent; color: var(--color-on-night); border-color: var(--color-night-line); }
.night .btn-secondary:hover { border-color: var(--color-glow); color: var(--color-surface); }
.night .btn-ghost { color: var(--color-accent-2); }
.night .btn-ghost:hover { background: var(--color-night-raise); color: var(--color-on-night); }

.btn-sm { min-height: var(--target); padding: 0 var(--space-4); font-size: var(--text-sm); border-radius: 11px; }
.btn-lg { min-height: 56px; padding: 0 var(--space-8); font-size: 1.0625rem; }
.btn-block { width: 100%; }
.btn-icon { width: var(--target); min-height: var(--target); padding: 0; border-radius: var(--radius-pill); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   6. Chips and badges
   ═══════════════════════════════════════════════════════════════════════════ */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text-2);
  white-space: nowrap;
}
.chip .i { width: 15px; height: 15px; color: var(--color-accent); }
.chip-yes { background: var(--color-accent-100); color: var(--color-accent-ink); }
.chip-yes .i { color: var(--color-accent-ink); }
.chip-no { background: var(--color-rose-100); color: var(--color-rose-700); }
.chip-no .i { color: var(--color-rose-700); }
.chip-warn { background: var(--color-sun-100); color: var(--color-sun-800); }
.chip-warn .i { color: var(--color-sun-700); }
.chip-night { background: var(--color-night); color: var(--color-on-night); }
.chip-night .i { color: var(--color-glow); }
.night .chip { background: var(--color-night-raise); color: var(--color-on-night); }
.night .chip .i { color: var(--color-glow); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
  white-space: nowrap;
  background: var(--color-accent-100);
  color: var(--color-accent-ink);
}
.badge-award { background: var(--color-night); color: var(--color-accent-2); }
.badge-featured { background: var(--color-sun-100); color: var(--color-sun-800); }
.badge-affiliate { background: transparent; border: 1px solid var(--color-divider-strong); color: var(--color-muted); }
.badge-ai { background: var(--color-night); color: var(--color-glow); }

/* ═══════════════════════════════════════════════════════════════════════════
   7. Readings: the smart-meter grammar
   ═══════════════════════════════════════════════════════════════════════════ */
.reading {
  display: inline-flex;
  align-items: baseline;
  gap: 0.16em;
  font-family: var(--font-figure);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.reading .unit {
  font-family: var(--font-body);
  font-size: 0.42em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--color-muted);
}
.reading-xl { font-size: var(--text-reading-xl); }
.reading-lg { font-size: var(--text-reading-lg); }
.reading-md { font-size: 1.5rem; }
.reading-sm { font-size: 1.125rem; letter-spacing: -0.015em; }
.night .reading { color: var(--color-surface); }
.night .reading .unit { color: var(--color-on-night-muted); }
.reading.is-good { color: var(--color-accent); }
.night .reading.is-good { color: var(--color-accent-2); }
.reading.is-bad { color: var(--color-rose-700); }
.night .reading.is-bad { color: var(--color-rose-400); }

/* A stat tile: label, reading, meta */
.stat { display: grid; gap: var(--space-2); align-content: start; }
.stat-label { font-size: var(--text-xs); font-weight: 600; color: var(--color-muted); letter-spacing: 0.01em; }
.stat-meta { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.4; }
.night .stat-label, .night .stat-meta { color: var(--color-on-night-muted); }

/* A row of readings separated by hairlines (hero spec strip) */
.readings-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--color-divider);
  list-style: none;
}
.readings-row > * {
  display: grid;
  gap: 4px;
  padding: var(--space-4) var(--space-4) var(--space-4) 0;
  border-bottom: 1px solid var(--color-divider);
  min-width: 0;
}
.readings-row > *:nth-child(even) { padding-left: var(--space-4); border-left: 1px solid var(--color-divider); }
.readings-row dt { font-size: var(--text-xs); font-weight: 600; color: var(--color-muted); }
.readings-row dd { font-family: var(--font-figure); font-size: 1.125rem; font-weight: 700; color: var(--color-text); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.readings-row dd small { display: block; margin-top: 2px; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); letter-spacing: 0; }
@media (min-width: 981px) {
  .readings-row { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
  .readings-row > *, .readings-row > *:nth-child(even) { padding: var(--space-4) var(--space-5); border-left: 1px solid var(--color-divider); }
  .readings-row > *:first-child { padding-left: 0; border-left: 0; }
}

/* Facts: a definition list with units in the text */
.facts { display: grid; gap: 0; }
.facts > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-divider); }
.facts dt { color: var(--color-muted); font-weight: 500; }
.facts dd { font-weight: 700; color: var(--color-text); text-align: right; font-variant-numeric: tabular-nums; }

/* The score tag: an energy-label arrow pointing at our verdict.
   Our editorial score ALWAYS uses this shape. Stars mean Google ratings only. */
.score-tag {
  --tip: 16px;
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  height: 44px;
  padding: 0 calc(var(--tip) + 10px) 0 14px;
  line-height: 44px;
  border-radius: 8px 0 0 8px;
  background: var(--color-night);
  color: var(--color-surface);
  font-family: var(--font-figure);
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  clip-path: polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%);
  white-space: nowrap;
  flex: none;
}
.score-tag small { font-family: var(--font-body); font-size: 0.6em; font-weight: 600; color: var(--color-on-night-muted); letter-spacing: 0; }
.score-tag-sm { --tip: 11px; height: 30px; line-height: 30px; padding: 0 calc(var(--tip) + 7px) 0 10px; font-size: 0.9375rem; border-radius: 6px 0 0 6px; }
.score-tag-lg { --tip: 22px; height: 64px; line-height: 64px; padding: 0 calc(var(--tip) + 14px) 0 20px; font-size: 2.125rem; border-radius: 10px 0 0 10px; letter-spacing: -0.03em; }
.night .score-tag { background: var(--color-accent-2); color: var(--color-night); }
.night .score-tag small { color: var(--color-night-2); }
.score-tag.is-empty { background: var(--color-surface-2); color: var(--color-muted); font-size: var(--text-sm); font-weight: 600; }

.score-line { display: inline-flex; align-items: center; gap: var(--space-4); }
.score-line .score-caption { font-size: var(--text-sm); line-height: 1.35; color: var(--color-muted); }
.score-line .score-caption strong { display: block; font-size: 0.9375rem; color: var(--color-text); }
.night .score-line .score-caption { color: var(--color-on-night-muted); }
.night .score-line .score-caption strong { color: var(--color-surface); }

/* Stars: Google ratings only, always with the number and the review count */
.stars {
  --star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4l-5.8 3.1 1.1-6.5-4.7-4.6 6.5-.9z'/%3E%3C/svg%3E");
  position: relative;
  display: inline-block;
  width: 80px;
  height: 16px;
  flex: none;
  background: linear-gradient(90deg, var(--color-sun) var(--r, var(--v, 0%)), var(--color-divider-strong) var(--r, var(--v, 0%)));
  -webkit-mask: var(--star-mask) 0 0 / 16px 16px repeat-x;
  mask: var(--star-mask) 0 0 / 16px 16px repeat-x;
}
.stars[data-r="4"] { --r: 80%; }
.stars[data-r="4.5"] { --r: 90%; }
.stars[data-r="4.6"] { --r: 92%; }
.stars[data-r="4.7"] { --r: 94%; }
.stars[data-r="4.8"] { --r: 96%; }
.stars[data-r="4.9"] { --r: 98%; }
.stars[data-r="5"] { --r: 100%; }
.rating { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; }
.rating strong { font-size: 0.9375rem; font-weight: 800; color: var(--color-text); }

/* Label bars: graduated category scores with an arrow tip */
.label-bars { display: grid; gap: var(--space-3); list-style: none; }
.label-bars li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 3.5rem; gap: var(--space-3); align-items: center; }
.label-bars .lb-name { font-size: var(--text-sm); font-weight: 700; color: var(--color-text); }
.label-bars .lb-track { position: relative; height: 14px; border-radius: 3px; background: var(--color-surface-2); overflow: hidden; }
.label-bars .lb-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--v, 0%);
  background: var(--color-accent);
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%);
  transform-origin: left center;
}
.label-bars .is-best .lb-fill { background: var(--color-night); }
.label-bars .lb-val { font-family: var(--font-figure); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--color-text); text-align: right; }
.label-bars .lb-val small { font-family: var(--font-body); font-weight: 500; font-size: var(--text-xs); color: var(--color-muted); }
.label-bars.is-win-a .lb-fill, .label-bars .lb-fill.is-rival { background: var(--color-accent-400); }
.night .label-bars .lb-name, .night .label-bars .lb-val { color: var(--color-surface); }
.night .label-bars .lb-track { background: var(--color-night-raise); }
.night .label-bars .lb-fill { background: var(--color-accent-2); }

/* ═══════════════════════════════════════════════════════════════════════════
   8. The 24-hour strip: when is electricity cheap?
   SVG with viewBox 0 0 240 H: one unit per six minutes, so 10 units = 1 hour.
   ═══════════════════════════════════════════════════════════════════════════ */
.strip { display: grid; gap: 6px; min-width: 0; }
.strip svg { width: 100%; height: 14px; overflow: visible; }
.strip-lg svg { height: 36px; }
.strip .s-track { fill: var(--color-surface-2); }
.strip .s-window { fill: var(--color-accent); }
.strip .s-smart { fill: url(#hatch); }
.strip .s-charge { fill: var(--color-accent-2); }
.strip .s-over { fill: var(--color-rose); }
.strip .s-plug { stroke: var(--color-text); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.strip .s-tick { stroke: var(--color-divider-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.strip-ticks { display: flex; justify-content: space-between; font-size: var(--text-xs); font-weight: 600; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.strip-key { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: var(--text-xs); color: var(--color-muted); }
.strip-key span { display: inline-flex; align-items: center; gap: 6px; }
.strip-key i { display: inline-block; width: 18px; height: 8px; border-radius: 2px; background: var(--color-accent); }
.strip-key i.k-charge { background: var(--color-accent-2); }
.strip-key i.k-over { background: var(--color-rose); }
.strip-key i.k-smart { background: repeating-linear-gradient(135deg, var(--color-accent) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1px var(--color-accent); }

.night .strip .s-track { fill: var(--color-night-raise); }
.night .strip .s-window { fill: var(--color-glow); fill-opacity: 0.32; stroke: var(--color-glow); stroke-width: 1; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px var(--color-glow)); }
.night .strip .s-charge { fill: var(--color-accent-2); }
.night .strip .s-over { fill: var(--color-rose-400); }
.night .strip .s-plug { stroke: var(--color-surface); }
.night .strip .s-tick { stroke: var(--color-night-line); }
.night .strip-ticks, .night .strip-key { color: var(--color-on-night-muted); }
.night .strip-key i { background: var(--color-glow); }
.night .strip-key i.k-charge { background: var(--color-accent-2); }
.night .strip-key i.k-over { background: var(--color-rose-400); }
.night .strip-key i.k-smart { background: repeating-linear-gradient(135deg, var(--color-glow) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1px var(--color-glow); }

/* ═══════════════════════════════════════════════════════════════════════════
   9. Answer box, trust and disclosure
   ═══════════════════════════════════════════════════════════════════════════ */
.answer {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
}
.answer-q { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 700; color: var(--color-accent-ink); }
.answer p { font-size: var(--text-lead); line-height: 1.55; color: var(--color-text-2); }

.checked { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); font-size: var(--text-sm); color: var(--color-muted); }
.checked > span { display: inline-flex; align-items: center; gap: 6px; }
.checked strong { color: var(--color-text); font-weight: 600; }
.checked .i { color: var(--color-accent); width: 16px; height: 16px; }

.disclosure {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--color-text-2);
}
.disclosure .i { color: var(--color-muted); margin-top: 2px; }
.night .disclosure { background: var(--color-night-raise); color: var(--color-on-night); }
.night .disclosure .i { color: var(--color-on-night-muted); }

.takeaways { padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-accent-100); }
.takeaways h2, .takeaways h3 { font-size: var(--text-h3); margin-bottom: var(--space-3); }
.takeaways ul, ul.takeaways { list-style: none; display: grid; gap: var(--space-3); }
.takeaways li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--space-3); }
.takeaways li .i { color: var(--color-accent-ink); margin-top: 2px; }

.fit-lists { display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .fit-lists { grid-template-columns: 1fr 1fr; } }
.fit-list { padding: var(--space-5) var(--space-6); border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-divider); }
.fit-list h3 { display: flex; align-items: center; gap: var(--space-2); font-size: 1.0625rem; margin-bottom: var(--space-3); }
.fit-list ul { list-style: none; display: grid; gap: var(--space-2); }
.fit-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-2); font-size: 0.9375rem; }
.fit-list.is-good h3 .i, .fit-list.is-good li .i { color: var(--color-accent); }
.fit-list.is-less h3 .i, .fit-list.is-less li .i { color: var(--color-rose-600); }

.callout { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--color-accent-100); color: var(--color-text-2); }
.callout .i { color: var(--color-accent-ink); margin-top: 2px; }
.callout-warn { background: var(--color-sun-100); }
.callout-warn .i { color: var(--color-sun-700); }

/* ═══════════════════════════════════════════════════════════════════════════
   10. Forms
   ═══════════════════════════════════════════════════════════════════════════ */
.field { display: grid; gap: 6px; }
.field > label, .field > .field-label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.field .req { color: var(--color-rose-700); }
.field-help { font-size: var(--text-xs); color: var(--color-muted); }
.input, .select {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-4);
  border: 1.5px solid var(--color-divider-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--dur-state) var(--ease-out), box-shadow var(--dur-state) var(--ease-out);
}
.input::placeholder { color: var(--color-neutral-600); }
.input:hover, .select:hover { border-color: var(--color-accent-500); }
.input:focus-visible, .select:focus-visible { outline: none; border-color: var(--color-accent-ink); box-shadow: 0 0 0 3px var(--color-accent-200); border-radius: var(--radius-sm); }
.input[aria-invalid="true"] { border-color: var(--color-rose-600); }
.field-error { font-size: var(--text-xs); font-weight: 600; color: var(--color-rose-700); }
.select {
  appearance: none;
  padding-right: var(--space-10);
  background-image: linear-gradient(45deg, transparent 50%, var(--color-muted) 50%), linear-gradient(135deg, var(--color-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

/* Range: native input, styled track and thumb */
.range { width: 100%; height: var(--target); appearance: none; background: transparent; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--color-accent) var(--fill, var(--v, 50%)), var(--color-surface-2) var(--fill, var(--v, 50%))); }
.range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--color-surface-2); }
.range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--color-accent); }
.range::-webkit-slider-thumb { appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: var(--color-surface); border: 2px solid var(--color-accent-ink); box-shadow: var(--shadow-sm); }
.range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--color-surface); border: 2px solid var(--color-accent-ink); }
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--color-accent-200); }
.range-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.range-row output { font-family: var(--font-figure); font-weight: 800; color: var(--color-text); font-variant-numeric: tabular-nums; }

/* Segmented control (generic, native radios) */
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border: 0; border-radius: var(--radius-pill); background: var(--color-surface-2); }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-2); transition: background-color var(--dur-state) var(--ease-out), color var(--dur-state) var(--ease-out); }
.seg label:hover span { background: color-mix(in oklch, var(--color-surface) 70%, transparent); }
.seg input:checked + span { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-sm); }
.seg input:focus-visible + span { outline: 2px solid var(--color-accent-ink); outline-offset: 2px; }

/* Choice cards (quiz and finder steps) */
.choices { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 0; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span {
  display: grid;
  gap: 4px;
  min-height: 64px;
  padding: var(--space-4);
  border: 1.5px solid var(--color-divider-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-weight: 700;
  color: var(--color-text);
  transition: border-color var(--dur-state) var(--ease-out), background-color var(--dur-state) var(--ease-out);
}
.choice small { font-weight: 500; color: var(--color-muted); font-size: var(--text-sm); }
.choice:hover span { border-color: var(--color-accent-500); }
.choice input:checked + span { border-color: var(--color-accent-ink); background: var(--color-accent-100); box-shadow: inset 0 0 0 1px var(--color-accent-ink); }
.choice input:focus-visible + span { outline: 2px solid var(--color-accent-ink); outline-offset: 2px; }

.postcode { display: flex; gap: var(--space-2); max-width: 460px; }
.postcode .input { flex: 1; text-transform: uppercase; }
.postcode .input::placeholder { text-transform: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   11. Views: the four-in-one landing page
   The control is a fieldset of native radios. Sections carry data-views;
   sections without it (hero, answer, dates, disclosures) never hide.
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-view="info"] [data-views]:not([data-views~="info"]),
html[data-view="compare"] [data-views]:not([data-views~="compare"]),
html[data-view="act"] [data-views]:not([data-views~="act"]) { display: none !important; }

.views { display: grid; gap: var(--space-2); border: 0; min-width: 0; }
.views legend { padding: 0; margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); }
.views-track {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 4px;
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
}
.views-opt { position: relative; min-width: 0; }
.views-opt span { width: 100%; justify-content: center; }
@media (min-width: 768px) {
  .views-track { display: flex; width: max-content; max-width: 100%; border-radius: var(--radius-pill); }
  .views-opt span { width: auto; }
}
.views-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.views-opt span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 42px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-2);
  white-space: nowrap;
  transition: background-color var(--dur-state) var(--ease-out), color var(--dur-state) var(--ease-out);
}
.views-opt span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  display: none;
}
.views-opt:hover span { background: color-mix(in oklch, var(--color-surface) 70%, transparent); color: var(--color-text); }
.views-opt input:checked + span { background: var(--color-night); color: var(--color-surface); }
.views-opt input:checked + span::before { display: block; opacity: 1; background: var(--color-glow); box-shadow: 0 0 8px var(--color-glow); }
.views-opt input:focus-visible + span { outline: 2px solid var(--color-accent-ink); outline-offset: 2px; }
.views-hint { font-size: var(--text-sm); color: var(--color-muted); }
.views-hint button { font-weight: 700; color: var(--color-accent-ink); text-decoration: underline; text-underline-offset: 0.22em; min-height: 32px; }
.views-hint button:hover { color: var(--color-accent); }

/* "More on this page": lists sections hidden by the current view */
.more-on-page { display: none; }
html[data-view] .more-on-page { display: block; }
.more-on-page .panel { display: grid; gap: var(--space-4); padding: var(--space-6); border: 1.5px dashed var(--color-divider-strong); border-radius: var(--radius-lg); background: var(--color-surface); }
.more-on-page h2 { font-size: var(--text-h3); }
.more-on-page ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.more-on-page li button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--target);
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text);
}
.more-on-page li button:hover { background: var(--color-accent-100); color: var(--color-accent-ink); }

/* View sheet (mobile): pick a view from the dock */
.view-sheet { margin: auto auto 0; width: 100%; max-width: 560px; border: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: var(--space-6) var(--gutter) var(--space-8); background: var(--color-surface); color: var(--color-text-2); box-shadow: var(--shadow-lg); }
.view-sheet::backdrop { background: var(--color-scrim); }
.view-sheet h2 { font-size: var(--text-h3); margin-bottom: var(--space-4); }
.view-sheet .choices { grid-template-columns: 1fr; }

/* ═══════════════════════════════════════════════════════════════════════════
   12. The AI layer: Read with AI, Copy for AI, the assistant box
   ═══════════════════════════════════════════════════════════════════════════ */
.ai-bar { display: grid; gap: var(--space-2); min-width: 0; }
.ai-bar-label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); }
.ai-bar-label .i { color: var(--color-accent); }
.night .ai-bar-label { color: var(--color-on-night-muted); }
.night .ai-bar-label .i { color: var(--color-glow); }
.ai-bar ul { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; }
.ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-divider-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--dur-state) var(--ease-out), background-color var(--dur-state) var(--ease-out), color var(--dur-state) var(--ease-out);
}
.ai-btn .i { width: 16px; height: 16px; color: var(--color-accent); }
.ai-btn:hover { border-color: var(--color-accent-ink); color: var(--color-accent-ink); background: var(--color-accent-100); }
.ai-btn.ai-copy { border-style: dashed; background: transparent; }
.night .ai-btn { background: transparent; border-color: var(--color-night-line); color: var(--color-on-night); }
.night .ai-btn .i { color: var(--color-glow); }
.night .ai-btn:hover { border-color: var(--color-glow); background: var(--color-night-raise); color: var(--color-surface); }

/* Toast (copy confirmations) */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: calc(100vw - 2 * var(--gutter));
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--color-night);
  color: var(--color-on-night);
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  transform: translate(-50%, 160%);
  visibility: hidden;
  transition: transform var(--dur-reveal) var(--ease-expo), visibility 0s linear var(--dur-reveal);
}
.toast .i { color: var(--color-glow); }
.toast.is-problem .i { color: var(--color-sun); }
.toast.is-on { transform: translate(-50%, 0); visibility: visible; transition: transform var(--dur-reveal) var(--ease-expo), visibility 0s; }

/* The assistant: "Describe your home and car" */
.assist { display: grid; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-xl); background: var(--night-gradient); color: var(--color-on-night); }
.assist h2, .assist h3 { color: var(--color-surface); }
.assist-form { display: grid; gap: var(--space-3); }
@media (min-width: 768px) { .assist-form { grid-template-columns: minmax(0, 1fr) auto; } }
.assist-input {
  width: 100%;
  min-height: 56px;
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-night-line);
  border-radius: var(--radius-md);
  background: var(--color-night-deep);
  color: var(--color-surface);
  font-size: 1.0625rem;
}
.assist-input::placeholder { color: var(--color-on-night-muted); }
.assist-input:focus-visible { outline: none; border-color: var(--color-glow); box-shadow: var(--shadow-glow); border-radius: var(--radius-md); }
.assist-echo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-on-night-muted); }
.assist-echo .chip { background: var(--color-night-raise); color: var(--color-surface); }
.assist-echo .chip { min-height: 48px; padding: 2px 2px 2px 14px; }
.assist-echo .chip button { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--color-on-night-muted); }
.assist-echo .chip button:hover { color: var(--color-surface); background: var(--color-night-line); }
.assist-note { font-size: var(--text-xs); color: var(--color-on-night-muted); }
.assist-note a { color: var(--color-on-night); }

/* ═══════════════════════════════════════════════════════════════════════════
   13. Product plate and cards
   ═══════════════════════════════════════════════════════════════════════════ */
.plate {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  background: var(--plate);
  overflow: hidden;
}
.plate img { position: absolute; inset: 0; margin: auto; width: 80%; height: 82%; object-fit: contain; filter: drop-shadow(0 22px 20px color-mix(in oklch, var(--color-night) 24%, transparent)); }
.plate-sm { aspect-ratio: 1; width: 100%; max-width: 104px; border-radius: var(--radius-md); }
.plate-sm img { height: 78%; }

.card {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-5);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  min-width: 0;
}
.card-link { text-decoration: none; color: inherit; transition: border-color var(--dur-state) var(--ease-out), box-shadow var(--dur-state) var(--ease-out), transform var(--dur-state) var(--ease-out); }
.card-link:hover { color: inherit; border-color: var(--color-accent-300); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card-title { font-family: var(--font-heading); font-size: var(--text-h3); font-weight: 700; line-height: 1.2; letter-spacing: -0.012em; color: var(--color-text); }
.card-body { font-size: 0.9375rem; color: var(--color-text-2); }
.card-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; font-size: var(--text-sm); color: var(--color-muted); }
.card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--color-divider); }
.card.is-featured { border-color: var(--color-sun-300); background: linear-gradient(180deg, var(--color-sun-100), var(--color-surface) 40%); }
.card.is-muted { opacity: 0.62; }

/* Ranked row (Top 10 and roundups) */
.rank-list { list-style: none; display: grid; gap: var(--space-3); counter-reset: rank; }
.rank-row {
  display: grid;
  grid-template-columns: 2.25rem 84px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.rank-row .rank-n { font-family: var(--font-figure); font-weight: 800; font-size: 1.5rem; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.rank-row .plate { aspect-ratio: 1; border-radius: var(--radius-md); }
.rank-row > :nth-child(4) { grid-column: 3; justify-self: start; margin-top: calc(var(--space-3) * -1); }
@media (min-width: 981px) {
  .rank-row { grid-template-columns: 2.5rem 104px minmax(0, 1fr) auto; padding: var(--space-4) var(--space-6); }
  .rank-row > :nth-child(4) { grid-column: auto; justify-self: end; margin-top: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   14. Tables
   ═══════════════════════════════════════════════════════════════════════════ */
.table-wrap { overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--color-divider); border-radius: var(--radius-lg); background: var(--color-surface); }
.table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.table caption { padding: var(--space-4) var(--space-5); text-align: left; font-size: var(--text-sm); color: var(--color-muted); caption-side: bottom; border-top: 1px solid var(--color-divider); }
.table th, .table td { padding: var(--space-3) var(--space-5); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--color-divider); }
.table thead th { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted); background: var(--color-surface-2); white-space: nowrap; }
.table tbody th { font-weight: 700; color: var(--color-text); }
.table tbody tr:last-child > * { border-bottom: 0; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-compare td.num { text-align: left; }
.table .is-win { background: var(--color-accent-100); color: var(--color-accent-ink); font-weight: 700; }
.table .is-win::after { content: " ✓"; }
.table-sticky th:first-child, .table-sticky td:first-child { position: sticky; left: 0; background: var(--color-surface); z-index: 1; }
.table-sticky thead th:first-child { background: var(--color-surface-2); }

/* ═══════════════════════════════════════════════════════════════════════════
   15. Header, navigation, breadcrumbs, table of contents, footer
   ═══════════════════════════════════════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--head-h);
  background: color-mix(in oklch, var(--color-bg) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--color-divider);
}
.site-header .container { display: flex; align-items: center; gap: var(--space-6); height: 100%; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; min-height: var(--target); }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.brand-word { font-family: var(--font-heading); font-weight: 800; font-size: 1.1875rem; letter-spacing: -0.02em; color: var(--color-text); }
.brand-word b { color: var(--color-accent); font-weight: 800; }
.night .brand-word, .site-footer .brand-word { color: var(--color-surface); }
.night .brand-word b, .site-footer .brand-word b { color: var(--color-accent-2); }
.nav { display: none; }
.nav ul { display: flex; gap: var(--space-1); list-style: none; }
.nav-link { display: inline-flex; align-items: center; gap: 4px; min-height: var(--target); padding: 0 var(--space-3); border-radius: var(--radius-sm); font-weight: 600; font-size: 0.9375rem; color: var(--color-text); text-decoration: none; }
.nav-link:hover { background: var(--color-surface-2); color: var(--color-text); }
.nav-link[aria-current="page"] { color: var(--color-accent-ink); box-shadow: inset 0 -2px 0 var(--color-accent); border-radius: 0; }
.header-actions { display: none; gap: var(--space-2); margin-left: auto; }
.menu-toggle { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: var(--target); height: var(--target); border-radius: var(--radius-sm); color: var(--color-text); }
.menu-toggle:hover { background: var(--color-surface-2); }
@media (min-width: 981px) {
  .nav { display: block; }
  .header-actions { display: flex; }
  .menu-toggle { display: none; }
}
.mobile-menu { position: fixed; inset: var(--head-h) 0 0; z-index: 49; padding: var(--space-6) var(--gutter); background: var(--color-bg); overflow-y: auto; }
.mobile-menu ul { list-style: none; display: grid; }
.mobile-menu a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; border-bottom: 1px solid var(--color-divider); font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; color: var(--color-text); text-decoration: none; }

/* Mega menu panel */
.mega { display: grid; gap: var(--space-6); padding: var(--space-6); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-lg); }
@media (min-width: 981px) { .mega { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr); } }
.mega h3 { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--space-2); }
.mega ul { list-style: none; display: grid; }
.mega li a { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; font-weight: 600; color: var(--color-text); text-decoration: none; }
.mega li a:hover { color: var(--color-accent-ink); }
.mega-feature { display: grid; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-md); background: var(--night-gradient); color: var(--color-on-night); }

.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; font-size: var(--text-sm); color: var(--color-muted); }
.crumbs li { display: inline-flex; align-items: center; gap: 4px; }
.crumbs li + li::before { content: "›"; color: var(--color-neutral-500); }
.crumbs a { color: var(--color-muted); text-decoration: none; }
.crumbs a:hover { color: var(--color-accent-ink); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--color-text); font-weight: 600; }

.toc { display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.toc h2 { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }
.toc ol { list-style: none; display: grid; border-left: 2px solid var(--color-divider); }
.toc a { display: block; padding: 6px 0 6px var(--space-4); margin-left: -2px; border-left: 2px solid transparent; color: var(--color-text-2); text-decoration: none; }
.toc a:hover { color: var(--color-accent-ink); }
.toc a[aria-current="true"] { border-left-color: var(--color-accent); color: var(--color-text); font-weight: 700; }

.site-footer { padding-block: var(--space-16) var(--space-8); background: var(--color-night); color: var(--color-on-night-muted); font-size: var(--text-sm); }
.site-footer a { color: var(--color-on-night); text-decoration: none; }
.site-footer a:hover { color: var(--color-accent-2); text-decoration: underline; }
.footer-grid { display: grid; gap: var(--space-8); }
@media (min-width: 981px) { .footer-grid { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); } }
.footer-grid h2 { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-on-night-muted); margin-bottom: var(--space-3); }
.footer-grid ul { list-style: none; display: grid; gap: var(--space-2); }
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--color-night-line); }

/* ═══════════════════════════════════════════════════════════════════════════
   16. FAQ (native details: content is always in the DOM)
   ═══════════════════════════════════════════════════════════════════════════ */
.faq { display: grid; border-top: 1px solid var(--color-divider); }
.faq details { border-bottom: 1px solid var(--color-divider); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 60px;
  padding: var(--space-3) 0;
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  font-size: var(--text-h4);
  color: var(--color-text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { transition: transform var(--dur-state) var(--ease-out); color: var(--color-accent); }
.faq details[open] summary .i { transform: rotate(180deg); }
.faq summary:hover { color: var(--color-accent-ink); }
.faq .faq-a { padding: 0 0 var(--space-5); max-width: var(--measure); color: var(--color-text-2); }

/* ═══════════════════════════════════════════════════════════════════════════
   17. Interactives: the tool shell and animated results
   Day inputs on the left, a night result on the right: the result is a
   decision moment, so it lives on night.
   ═══════════════════════════════════════════════════════════════════════════ */
.tool { display: grid; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--color-divider); background: var(--color-surface); }
@media (min-width: 981px) { .tool { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.tool-inputs { display: grid; gap: var(--space-5); align-content: start; padding: var(--space-6); }
.tool-inputs h3 { font-size: var(--text-h3); }
.tool-result { position: relative; display: grid; gap: var(--space-5); align-content: start; padding: var(--space-6); background: var(--night-gradient); color: var(--color-on-night); }
@media (min-width: 981px) { .tool-inputs, .tool-result { padding: var(--space-8); } }
.result-head { display: grid; gap: var(--space-2); }
.result-sentence { font-size: var(--text-lead); line-height: 1.5; color: var(--color-on-night); max-width: 44ch; }
.result-sentence strong { color: var(--color-surface); }
.result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-5); }
.howcalc summary { display: inline-flex; align-items: center; gap: 6px; min-height: var(--target); cursor: pointer; font-weight: 600; font-size: var(--text-sm); color: var(--color-on-night); list-style: none; }
.howcalc summary::-webkit-details-marker { display: none; }
.howcalc[open] summary .i { transform: rotate(180deg); }
.howcalc .howcalc-body { display: grid; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-on-night-muted); }
.tool .result-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--color-night-line); }

/* Cost meters: two bars compared (standard rate vs EV tariff) */
.meters { display: grid; gap: var(--space-4); }
.meter { display: grid; gap: 6px; }
.meter-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-on-night-muted); }
.meter-bar { height: 14px; border-radius: 4px; background: var(--color-night-raise); overflow: hidden; }
.meter-bar i { display: block; height: 100%; width: var(--v, 0%); border-radius: 4px; background: var(--color-rose-400); transform-origin: left center; }
.meter.is-good .meter-bar i { background: var(--color-accent-2); box-shadow: 0 0 12px color-mix(in oklch, var(--color-accent-2) 60%, transparent); }

/* ═══════════════════════════════════════════════════════════════════════════
   18. Before/after slider
   A native range input drives --pos; the "after" layer is clipped to it.
   Without JS both layers show side by side (.ba without .is-ready).
   ═══════════════════════════════════════════════════════════════════════════ */
.ba { --pos: 50%; display: grid; gap: var(--space-3); }
.ba-frame { position: relative; display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 768px) { .ba:not(.is-ready) .ba-frame { grid-template-columns: 1fr 1fr; } }
.ba-layer { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface-2); }
.ba-layer img, .ba-layer svg { width: 100%; height: 100%; object-fit: cover; }
.ba-tag {
  position: absolute;
  top: var(--space-3);
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--color-night) 82%, transparent);
  color: var(--color-surface);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.ba-layer:first-child .ba-tag { left: var(--space-3); }
.ba-layer + .ba-layer .ba-tag { right: var(--space-3); }
.ba-range { display: none; }
.ba.is-ready .ba-frame { display: block; aspect-ratio: var(--ratio, 16 / 10); border-radius: var(--radius-lg); overflow: hidden; }
.ba.is-ready .ba-layer { position: absolute; inset: 0; border-radius: 0; }
.ba.is-ready .ba-layer + .ba-layer { clip-path: inset(0 0 0 var(--pos)); }
.ba.is-ready .ba-range { display: block; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; }
.ba-handle { display: none; }
.ba.is-ready .ba-handle {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: var(--color-surface);
  z-index: 2;
  pointer-events: none;
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--color-night) 25%, transparent);
}
.ba.is-ready .ba-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--target);
  height: var(--target);
  margin: calc(var(--target) / -2) 0 0 calc(var(--target) / -2);
  border-radius: 50%;
  background: var(--color-surface) var(--icon-grip) center / 22px no-repeat;
  box-shadow: var(--shadow-md);
}
.ba.is-ready .ba-range:focus-visible ~ .ba-handle::after { outline: 3px solid var(--color-accent-2); outline-offset: 2px; }
.ba-panel { display: grid; align-content: center; gap: var(--space-3); height: 100%; min-height: 220px; padding: var(--space-6); background: var(--color-surface); }
.ba-panel.night { background: var(--night-gradient); }
/* The after layer is revealed from the right, so its data sits at the end of the panel. */
.ba.is-ready .ba-layer + .ba-layer .ba-panel { justify-items: end; text-align: end; }
@media (min-width: 768px) { .ba-panel { padding: var(--space-10); } }
.ba-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   19. Night surfaces: slabs, loops, next steps, 3D icons
   ═══════════════════════════════════════════════════════════════════════════ */
.night { background: var(--night-gradient); color: var(--color-on-night); }
.night h1, .night h2, .night h3, .night h4, .night strong { color: var(--color-surface); }
.night a:not(.btn) { color: var(--color-on-night); }
.night .muted, .night .fine { color: var(--color-on-night-muted); }
.night .lead { color: var(--color-on-night); }
.night .h1 { color: var(--color-surface); }
.night-grid {
  background-image:
    linear-gradient(color-mix(in oklch, var(--color-glow) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklch, var(--color-glow) 7%, transparent) 1px, transparent 1px),
    var(--night-gradient);
  background-size: 48px 48px, 48px 48px, auto;
}
.slab { border-radius: var(--radius-xl); overflow: hidden; }

.loop { position: relative; margin: 0; border-radius: var(--radius-xl); overflow: hidden; background: var(--color-night-deep); aspect-ratio: 16 / 9; }
.loop img, .loop video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.loop-toggle {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 2;
  display: inline-grid;
  place-items: center;
  width: var(--target);
  height: var(--target);
  border-radius: 50%;
  background: color-mix(in oklch, var(--color-night-deep) 70%, transparent);
  color: var(--color-surface);
  border: 1px solid var(--color-night-line);
}
.loop-toggle:hover { border-color: var(--color-glow); }

.next-step { display: grid; gap: var(--space-6); align-items: center; padding: var(--space-8); border-radius: var(--radius-xl); }
@media (min-width: 981px) { .next-step { grid-template-columns: minmax(0, 1fr) auto; padding: var(--space-10) var(--space-12); } }
.next-step h2 { font-size: var(--text-h2); }

/* Cards and heroes on night */
.night .card { background: var(--color-night-2); border-color: var(--color-night-line); color: var(--color-on-night); }
.night .card-title { color: var(--color-surface); }
.night .card-body { color: var(--color-on-night-muted); }
.night .card-link:hover { border-color: var(--color-glow); box-shadow: var(--shadow-glow); }
.hero-night { display: grid; gap: var(--space-8); align-items: center; padding: var(--space-8) var(--gutter); color: var(--color-on-night); }
.hero-night h1, .hero-night .h1 { color: var(--color-surface); }
@media (min-width: 981px) { .hero-night { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); padding: var(--space-16) var(--space-12); } }

.tile-night { justify-items: start; }
.i3d { width: 96px; height: 96px; object-fit: contain; }
.i3d-lg { width: 160px; height: 160px; }
.night .i3d { filter: drop-shadow(0 10px 18px color-mix(in oklch, var(--color-night-deep) 70%, transparent)); }

.glow-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-glow); box-shadow: 0 0 10px var(--color-glow); }
@media (prefers-reduced-motion: no-preference) {
  .glow-dot.is-live { animation: glow-pulse 2.4s var(--ease-out) infinite; }
}
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 6px var(--color-glow); }
  50% { box-shadow: 0 0 16px var(--color-glow), 0 0 2px var(--color-glow); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   20. Dock: the page's next step, docked (bottom on mobile, top on desktop)
   ═══════════════════════════════════════════════════════════════════════════ */
.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: var(--color-surface);
  border-top: 1px solid var(--color-divider);
  box-shadow: var(--shadow-dock);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform var(--dur-reveal) var(--ease-expo), visibility 0s linear var(--dur-reveal);
}
.dock.is-on { transform: none; visibility: visible; transition: transform var(--dur-reveal) var(--ease-expo), visibility 0s; }
.dock-name { display: none; min-width: 0; }
.dock-name strong { display: block; font-size: 0.9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-view { display: inline-flex; align-items: center; gap: 6px; min-height: var(--target); padding: 0 var(--space-4); border-radius: var(--radius-pill); background: var(--color-surface-2); font-weight: 700; font-size: var(--text-sm); color: var(--color-text); white-space: nowrap; }
.dock-view .glow-dot { width: 7px; height: 7px; }
.dock .btn { flex: 1; }
.dock .views { display: none; }
@media (min-width: 981px) {
  .dock { top: var(--head-h); bottom: auto; padding: var(--space-2) max(var(--gutter), calc((100vw - var(--max)) / 2)); border-top: 0; border-bottom: 1px solid var(--color-divider); box-shadow: var(--shadow-md); transform: translateY(-120%); }
  .dock-name { display: flex; align-items: center; gap: var(--space-3); flex: 1; }
  .dock .views { display: block; }
  .dock .views legend, .dock .views-hint { display: none; }
  .dock .views-opt span { min-height: 36px; padding: 0 var(--space-3); font-size: var(--text-sm); }
  .dock .views-track { display: flex; }
  .dock-view { display: none; }
  .dock .btn { flex: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   21. Dialogs and the cookie banner
   ═══════════════════════════════════════════════════════════════════════════ */
.dialog { width: min(560px, calc(100vw - 2 * var(--gutter))); padding: var(--space-8); border: 0; border-radius: var(--radius-xl); background: var(--color-surface); color: var(--color-text-2); box-shadow: var(--shadow-lg); }
.dialog::backdrop { background: var(--color-scrim); }
.dialog-title { font-size: var(--text-h3); margin-bottom: var(--space-3); }
.dialog-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-divider); }
.switch { position: relative; flex: none; width: 48px; height: 28px; }
.switch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: var(--radius-pill); background: var(--color-neutral-400); transition: background-color var(--dur-state) var(--ease-out); }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--color-surface); box-shadow: var(--shadow-sm); transition: transform var(--dur-state) var(--ease-out); }
.switch input:checked + span { background: var(--color-accent-ink); }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:disabled + span { opacity: 0.55; }
.switch input:focus-visible + span { outline: 2px solid var(--color-accent-ink); outline-offset: 2px; }

.cookie-bar { position: fixed; left: var(--space-3); right: var(--space-3); bottom: var(--space-3); z-index: 80; display: grid; gap: var(--space-4); max-width: 100vw; padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-night); color: var(--color-on-night); box-shadow: var(--shadow-lg); }
.cookie-bar p { min-width: 0; font-size: var(--text-sm); }
.cookie-bar a { color: var(--color-on-night); }
.cookie-bar .btn-ghost { color: var(--color-accent-2); }
.cookie-bar .btn-ghost:hover { background: var(--color-night-raise); color: var(--color-on-night); }
@media (min-width: 981px) { .cookie-bar { left: auto; max-width: 520px; right: var(--space-6); bottom: var(--space-6); } }

/* Inline variants: render the fixed-position pieces in the page flow, for
   designs, mock-ups and documentation frames. */
.cookie-bar.is-inline, .toast.is-inline, .dock.is-inline { position: relative; left: auto; right: auto; top: auto; bottom: auto; }
.cookie-bar.is-inline { max-width: 560px; }
.toast.is-inline { transform: none; }
.dock.is-inline { transform: none; visibility: visible; border: 1px solid var(--color-divider); border-radius: var(--radius-lg); }

/* ═══════════════════════════════════════════════════════════════════════════
   22. Motion: one orchestrated entrance, results that explain themselves
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-reveal) var(--ease-expo), transform var(--dur-reveal) var(--ease-expo); transition-delay: calc(var(--i, 0) * var(--stagger)); }
  .reveal.is-in { opacity: 1; transform: none; }
  .score-tag.is-animate { animation: tag-in 700ms var(--ease-spring) both; }
  .label-bars.is-animate .lb-fill, .meters.is-animate .meter-bar i { animation: bar-grow var(--dur-fill) var(--ease-expo) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
  .strip.is-animate .s-charge, .strip.is-animate .s-over { animation: strip-fill var(--dur-fill) var(--ease-expo) both; transform-box: fill-box; transform-origin: left center; }
  .strip.is-animate .s-over { animation-delay: calc(var(--dur-fill) * 0.7); }
  .result-pulse { animation: result-pulse 1.6s var(--ease-out) 1; }
}
@keyframes tag-in { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes strip-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes result-pulse {
  0% { text-shadow: 0 0 0 transparent; }
  40% { text-shadow: 0 0 22px color-mix(in oklch, var(--color-glow) 70%, transparent); }
  100% { text-shadow: 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   24. Landing page layout: hero, sticky contents, section rhythm
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-has-views] { scroll-padding-top: calc(var(--head-h) + 88px); }
.lp-hero { padding-block: var(--space-5) var(--space-8); background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%); border-bottom: 1px solid var(--color-divider); }
.lp-hero .crumbs { margin-bottom: var(--space-5); }
.lp-hero-grid { display: grid; gap: var(--space-6); margin-bottom: var(--space-8); }
.lp-hero-grid > .stack { gap: var(--space-5); min-width: 0; }
.lp-plate { order: -1; aspect-ratio: 16 / 9; width: 100%; }
@media (min-width: 981px) {
  .lp-hero { padding-block: var(--space-6) var(--space-10); }
  .lp-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); align-items: start; }
  .lp-plate { order: 0; aspect-ratio: 4 / 5; position: sticky; top: calc(var(--head-h) + var(--space-6)); }
}
.readings-row.cols-6 { --cols: 6; }
.with-toc { display: grid; gap: var(--space-8); padding-block: var(--space-10) var(--space-16); }
.with-toc > .toc { display: none; }
@media (min-width: 981px) {
  .with-toc { grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-12); }
  .with-toc > .toc { display: grid; position: sticky; top: calc(var(--head-h) + 88px); align-self: start; }
}
.lp-body { display: grid; gap: var(--space-16); min-width: 0; }
.lp-section { display: grid; gap: var(--space-5); min-width: 0; }
.lp-section > h2 { font-size: var(--text-h2); }
.choices-legend { font-weight: 700; color: var(--color-text); margin-bottom: var(--space-3); }

/* ═══════════════════════════════════════════════════════════════════════════
   23. Utilities: percentage fills for bars and meters (no inline styles).
   Scores out of 5 map to even percentages: 4.8/5 is .fill-96.
   ═══════════════════════════════════════════════════════════════════════════ */
.fill-0 { --v: 0%; }
.fill-2 { --v: 2%; }
.fill-4 { --v: 4%; }
.fill-6 { --v: 6%; }
.fill-8 { --v: 8%; }
.fill-10 { --v: 10%; }
.fill-12 { --v: 12%; }
.fill-14 { --v: 14%; }
.fill-16 { --v: 16%; }
.fill-18 { --v: 18%; }
.fill-20 { --v: 20%; }
.fill-22 { --v: 22%; }
.fill-24 { --v: 24%; }
.fill-26 { --v: 26%; }
.fill-28 { --v: 28%; }
.fill-30 { --v: 30%; }
.fill-32 { --v: 32%; }
.fill-34 { --v: 34%; }
.fill-36 { --v: 36%; }
.fill-38 { --v: 38%; }
.fill-40 { --v: 40%; }
.fill-42 { --v: 42%; }
.fill-44 { --v: 44%; }
.fill-46 { --v: 46%; }
.fill-48 { --v: 48%; }
.fill-50 { --v: 50%; }
.fill-52 { --v: 52%; }
.fill-54 { --v: 54%; }
.fill-56 { --v: 56%; }
.fill-58 { --v: 58%; }
.fill-60 { --v: 60%; }
.fill-62 { --v: 62%; }
.fill-64 { --v: 64%; }
.fill-66 { --v: 66%; }
.fill-68 { --v: 68%; }
.fill-70 { --v: 70%; }
.fill-72 { --v: 72%; }
.fill-74 { --v: 74%; }
.fill-76 { --v: 76%; }
.fill-78 { --v: 78%; }
.fill-80 { --v: 80%; }
.fill-82 { --v: 82%; }
.fill-84 { --v: 84%; }
.fill-86 { --v: 86%; }
.fill-88 { --v: 88%; }
.fill-90 { --v: 90%; }
.fill-92 { --v: 92%; }
.fill-94 { --v: 94%; }
.fill-96 { --v: 96%; }
.fill-98 { --v: 98%; }
.fill-100 { --v: 100%; }