/* BevvyStats — one stylesheet.
   The page is a deck: one full-screen slide per scroll (scroll-snap
   mandatory + snap-stop). Every slide is designed to fit one screen; app.js
   adds .dense / .denser when a screen is too short.

   Colour has one meaning each:
     beer amber = quantities           wine  = money spent, loss
     green      = growth (investing)   blue  = volume / water
     violet     = time                 coral = body and health
     pink icing = calories (doughnuts)
   Loss vs possible loss uses different materials (solid vs hatching). */

@font-face {
  font-family: 'Bricolage';
  src: url('../fonts/bricolage.woff2') format('woff2');
  font-weight: 200 800; font-stretch: 75% 100%; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter.woff2') format('woff2');
  font-weight: 100 900; font-display: swap;
}

/* Registered so the background glow can fade between slides. */
/* Not inherited: only the one .ambient element restyles when the colour fades. */
@property --glow-a { syntax: '<color>'; inherits: false; initial-value: rgba(246, 183, 60, 0.13); }
@property --glow-b { syntax: '<color>'; inherits: false; initial-value: rgba(224, 53, 107, 0.15); }
@property --t { syntax: '<percentage>'; inherits: false; initial-value: 100%; }

:root {
  --bg: #120914;
  --card: #211428;
  --card-2: #2b1a34;
  --line: rgba(255, 236, 245, 0.11);
  --line-2: rgba(255, 236, 245, 0.2);
  --ink: #fff5ec;
  --ink-2: #dccbd6;
  --ink-3: #ab96a8;

  --beer: #f6b73c;
  --beer-2: #ffd27a;
  --foam: #fff4e3;
  --wine: #e0356b;
  --wine-2: #ff6b95;
  --wine-deep: #8f1440;
  --grow: #3ddc97;
  --pool: #4cc9f0;
  --time: #b69cff;
  --coral: #ff8a65;
  --icing: #ff6fa0;

  --display: 'Bricolage', 'Inter', system-ui, sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Type scale with floors: secondary text never below 16px. */
  --step--1: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-0: clamp(1.0625rem, 1.03rem + 0.2vw, 1.15rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.55vw, 1.45rem);
  --step-2: clamp(1.45rem, 1.25rem + 1vw, 1.95rem);
  --step-3: clamp(1.9rem, 1.45rem + 2.2vw, 3.1rem);
  --step-4: clamp(2.3rem, 1.5rem + 3.6vw, 4.6rem);
  --step-5: clamp(3.3rem, 1.2rem + 6vw, 7.2rem);

  --radius: 22px;
  --radius-sm: 14px;
  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1180px;
  --bar-h: 64px;
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-snap-type: y mandatory;
  background: var(--bg);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--step-0)/1.55 var(--body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
/* Ambient glow that takes each slide's colour: one fixed element, painted
   on its own layer, so changing colour never restyles the page. */
.ambient {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70vmax 60vmax at 90% -10%, var(--glow-b), transparent 60%),
    radial-gradient(60vmax 60vmax at -10% 110%, var(--glow-a), transparent 60%);
}
.ambient[data-accent="beer"]  { --glow-a: rgba(246, 183, 60, 0.13); --glow-b: rgba(224, 53, 107, 0.15); }
.ambient[data-accent="pool"]  { --glow-a: rgba(76, 201, 240, 0.14); --glow-b: rgba(76, 201, 240, 0.12); }
.ambient[data-accent="wine"]  { --glow-a: rgba(224, 53, 107, 0.12); --glow-b: rgba(224, 53, 107, 0.2); }
.ambient[data-accent="grow"]  { --glow-a: rgba(61, 220, 151, 0.12); --glow-b: rgba(61, 220, 151, 0.14); }
.ambient[data-accent="time"]  { --glow-a: rgba(182, 156, 255, 0.14); --glow-b: rgba(182, 156, 255, 0.14); }
.ambient[data-accent="donut"] { --glow-a: rgba(255, 111, 160, 0.14); --glow-b: rgba(226, 161, 90, 0.16); }
.ambient[data-accent="coral"] { --glow-a: rgba(255, 138, 101, 0.12); --glow-b: rgba(255, 138, 101, 0.16); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .ambient { transition: --glow-a 1.2s ease, --glow-b 1.2s ease; }
}

img, svg { max-width: 100%; }
a { color: var(--beer-2); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); line-height: 1.02; margin: 0; letter-spacing: -0.02em; }
h2 { font-size: var(--step-4); font-weight: 750; font-stretch: 90%; text-wrap: balance; }
h3 { font-size: var(--step-1); font-weight: 700; }
p { margin: 0; }
b, strong { font-weight: 700; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--beer); outline-offset: 3px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--beer); color: #1a0e1e; padding: 10px 16px; border-radius: 10px; font-weight: 700; }
.skip:focus { left: 16px; }

/* ---------- Top bar ---------------------------------------------------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: calc(var(--bar-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) var(--gutter) 0;
  background: linear-gradient(to bottom, rgba(18, 9, 20, 0.9), rgba(18, 9, 20, 0.55));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 700 1.15rem/1 var(--display); }
.brand b { color: var(--beer); font-weight: 800; }
.brand-mark { width: 28px; height: 28px; }
.lang { display: inline-flex; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.lang button { border: 0; background: transparent; padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: 1rem; cursor: pointer; color: var(--ink-2); min-width: 44px; min-height: 38px; }
.lang button[aria-pressed="true"] { background: var(--foam); color: #1a0e1e; }
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.05); }
.progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--beer), var(--wine)); transition: width .5s cubic-bezier(.2,.8,.2,1); }

.dots { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 40; display: none; flex-direction: column; gap: 12px; }
.dots a { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); transition: transform .3s, background .3s; pointer-events: auto; }
.dots a.on { background: var(--beer); transform: scale(1.5); }
@media (min-width: 1100px) { .dots { display: flex; } }

/* ---------- Slides ----------------------------------------------------- */
.slide {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  scroll-snap-align: start; scroll-snap-stop: always;
  padding: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + clamp(12px, 3vh, 36px)) var(--gutter) clamp(64px, 9vh, 88px);
  max-width: var(--maxw); margin: 0 auto;
  display: flex; flex-direction: column; justify-content: center; gap: clamp(14px, 2.6vh, 30px);
}
.slide > * { min-width: 0; }
.slide-head { display: grid; gap: clamp(10px, 1.6vh, 16px); max-width: 920px; }
.lead { font-size: var(--step-1); color: var(--ink-2); line-height: 1.42; max-width: 62ch; text-wrap: pretty; }
.lead b, .lead strong { color: var(--ink); }
.note { font-size: var(--step--1); color: var(--ink-3); max-width: 80ch; }
.quip { font-size: var(--step-0); color: var(--ink-2); max-width: 64ch; }
.h3 { margin-bottom: 12px; }

/* Screens too short for a slide: tighten, then drop the optional bits. */
.slide.dense { gap: 12px; }
.slide.dense h2 { font-size: var(--step-3); }
.slide.dense .lead { font-size: var(--step-0); }
.slide.dense .big { font-size: var(--step-2); }
.slide.dense .tile { min-height: 0; padding: 14px 16px; }
.slide.denser .note, .slide.denser .opt { display: none !important; }
.slide.denser .kicker { display: none; }
.slide.denser h2 { font-size: var(--step-2); }
.slide.denser .support h2 { font-size: var(--step-2); }
.slide.densest { gap: 8px; padding-top: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + 6px); padding-bottom: 58px; }
.slide.densest .lead { font-size: 1rem; line-height: 1.35; }
.slide.densest .slide-head { gap: 6px; }
.slide.densest .hero-stage { height: min(36svh, calc(100vw * 0.89)); }
.slide.densest .next { bottom: 8px; width: 42px; height: 42px; }

/* Next-slide button */
.next {
  position: absolute; left: 50%; bottom: clamp(12px, 2.4vh, 24px); transform: translateX(-50%);
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.06); color: var(--ink); cursor: pointer; display: grid; place-items: center;
  transition: background .2s;
}
.next:hover { background: rgba(255, 255, 255, 0.14); }
.next svg { width: 22px; height: 22px; }

.kicker {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  font: 700 var(--step--1)/1 var(--body); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line);
}
.kicker::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.kicker--beer { color: var(--beer); }
.kicker--wine { color: var(--wine-2); }
.kicker--pool { color: var(--pool); }
.kicker--time { color: var(--time); }
.kicker--coral { color: var(--coral); }
.kicker--grow { color: var(--grow); }
.kicker--donut { color: var(--icing); }

.hl-beer { color: var(--beer); }
.hl-wine { color: var(--wine-2); }
.hl-pool { color: var(--pool); }
.hl-grow { color: var(--grow); }
.hl-time { color: var(--time); }
.hl-coral { color: var(--coral); }
.hl-donut { color: var(--icing); }

.card { background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(16px, 2.6vw, 28px); box-shadow: var(--shadow); }

/* ---------- Buttons ---------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 12px 24px; border-radius: 999px; border: 0; cursor: pointer;
  font: 700 var(--step-0)/1 var(--body); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s;
}
.btn svg { width: 22px; height: 22px; }
.btn--sm { min-height: 44px; padding: 8px 18px; font-size: 1rem; }
.btn--primary { background: linear-gradient(135deg, var(--beer-2), var(--beer)); color: #22110a; box-shadow: 0 12px 32px -10px rgba(246, 183, 60, 0.6); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(246, 183, 60, 0.75); }
.btn--ghost { background: rgba(255, 255, 255, 0.07); color: var(--ink); border: 1px solid var(--line-2); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }
.btn--text { background: none; color: var(--ink-2); text-decoration: underline; text-underline-offset: 4px; padding-inline: 10px; }
.btn--coffee { background: var(--foam); color: #22110a; font-size: var(--step-1); min-height: 60px; padding-inline: 32px; box-shadow: 0 16px 44px -14px rgba(255, 244, 227, 0.45); }
.btn--coffee:hover { transform: translateY(-2px) rotate(-1deg); }
.linkish { background: none; border: 0; padding: 0; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: inherit; }

/* ---------- Hero ------------------------------------------------------- */
.slide--hero {
  max-width: 1320px;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; align-content: center; gap: clamp(8px, 3vw, 48px);
}
.hero-copy { display: grid; gap: 22px; }
.wordmark { font-size: var(--step-5); font-weight: 800; font-stretch: 85%; letter-spacing: -0.045em; line-height: 0.9; color: var(--foam); }
.wordmark span {
  background: linear-gradient(100deg, var(--beer-2) 0%, var(--beer) 35%, var(--wine) 75%, var(--wine-2) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.hero-note { color: var(--ink-3); font-size: var(--step--1); }
.hero-stage { margin: 0; position: relative; aspect-ratio: 800 / 710; width: min(100%, calc(72svh * 800 / 710)); max-width: 100%; justify-self: center; }
.hero-svg { width: 100%; height: 100%; display: block; overflow: visible; }

@media (max-width: 860px) {
  .slide--hero { grid-template-columns: 1fr; text-align: center; gap: 0; align-content: center; }
  .hero-copy { justify-items: center; gap: 14px; }
  .hero-copy .lead { font-size: var(--step-0); }
  .hero-actions { justify-content: center; flex-direction: column; gap: 10px; }
  .hero-stage { height: min(42svh, calc(100vw * 0.89)); width: auto; }
}

/* ---------- Wizard ----------------------------------------------------- */
.slide--calc { max-width: 900px; }
.wizard { display: grid; gap: 18px; }
.wiz-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wiz-steps li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.04); color: var(--ink-3); font-size: var(--step--1); font-weight: 600; border: 1px solid transparent; }
.wiz-steps b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.08); font: 800 .95rem var(--display); flex: none; }
.wiz-steps li.on { color: var(--ink); border-color: rgba(246,183,60,.4); background: rgba(246,183,60,.08); }
.wiz-steps li.on b { background: var(--beer); color: #22110a; }
.wiz-steps li.done b { background: var(--grow); color: #0d2a1d; }
@media (max-width: 560px) { .wiz-steps li span { display: none; } .wiz-steps li { justify-content: center; } }

.wstep { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 16px; }
@media (prefers-reduced-motion: no-preference) { .wstep { animation: stepIn .45s cubic-bezier(.2,.8,.2,1); } }
@keyframes stepIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; gap: 12px; } }
.wiz-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.wiz-nav .btn--primary { margin-left: auto; }

.field { display: grid; gap: 6px; align-content: start; }
label { font-weight: 650; font-size: var(--step-0); color: var(--ink); display: inline-flex; align-items: center; gap: 10px; }
.ico { width: 22px; height: 30px; flex: none; }
input[type="number"], select {
  width: 100%; min-height: 52px; padding: 10px 16px; border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.28); border: 1.5px solid var(--line-2); color: var(--ink);
  font-size: var(--step-0); font-variant-numeric: tabular-nums; transition: border-color .2s, box-shadow .2s;
}
input:hover, select:hover { border-color: rgba(255, 236, 245, 0.32); }
input:focus, select:focus { outline: none; border-color: var(--beer); box-shadow: 0 0 0 4px rgba(246, 183, 60, 0.18); }
input[aria-invalid="true"] { border-color: var(--wine-2); box-shadow: 0 0 0 4px rgba(224, 53, 107, 0.18); }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.select-wrap { position: relative; }
.select-wrap::after { content: ''; position: absolute; right: 18px; top: 50%; width: 10px; height: 10px; border-right: 2.5px solid var(--ink-2); border-bottom: 2.5px solid var(--ink-2); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
select { appearance: none; -webkit-appearance: none; padding-right: 46px; cursor: pointer; }
select option { background: #1a0e1e; color: var(--ink); }
.hint { font-size: var(--step--1); color: var(--ink-3); }
.err { font-size: var(--step--1); color: var(--wine-2); font-weight: 600; }
.err:empty { display: none; }
.err--summary { text-align: center; }

.stepper { display: grid; grid-template-columns: 56px 1fr 56px; gap: 8px; }
.stepper input { text-align: center; font: 750 var(--step-2) var(--display); min-height: 60px; }
.step { border: 1.5px solid var(--line-2); background: rgba(255, 255, 255, 0.06); border-radius: var(--radius-sm); font-size: 1.6rem; font-weight: 600; cursor: pointer; min-height: 60px; transition: background .2s, transform .1s; }
.step:hover { background: rgba(255, 255, 255, 0.12); }
.step:active { transform: scale(0.94); }
.field--beer .step { color: var(--beer); }
.field--wine .step { color: var(--wine-2); }
.field--drink { padding: 16px; border-radius: var(--radius); border: 1px solid var(--line); gap: 10px; }
.field--beer { background: linear-gradient(160deg, rgba(246, 183, 60, 0.12), rgba(246, 183, 60, 0.02)); }
.field--wine { background: linear-gradient(160deg, rgba(224, 53, 107, 0.14), rgba(224, 53, 107, 0.02)); }

.money-input { position: relative; }
.money-input .cur { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-weight: 700; pointer-events: none; }
.money-input input { padding-left: calc(22px + var(--cur-w, 1.2ch)); }

.fine { border-top: 1px solid var(--line); padding-top: 10px; }
.fine summary { cursor: pointer; color: var(--ink-2); font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.fine summary::-webkit-details-marker { display: none; }
.fine summary::before { content: '+'; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); font-weight: 700; }
.fine[open] summary::before { content: '−'; }
.fine[open] { max-height: 38svh; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
.fine-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 8px 0; }
.fine-grid label { font-size: var(--step--1); font-weight: 600; color: var(--ink-2); }
@media (max-width: 760px) { .fine-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Shared result pieces --------------------------------------- */
.big { display: block; font: 800 var(--step-3)/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.tiles { display: grid; gap: 14px; }
.tiles--wrap { grid-template-columns: repeat(4, 1fr); }
.tiles--body { grid-template-columns: 1.2fr 1fr; }
.tile {
  position: relative; overflow: hidden; display: grid; gap: 6px; align-content: end;
  min-height: clamp(120px, 20vh, 190px); padding: 20px; border-radius: var(--radius);
  background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--line);
  color: var(--ink-2); font-size: var(--step--1);
}
.tile .big { color: var(--ink); }
.tile-ico { width: 40px; height: 54px; position: absolute; top: 16px; right: 16px; }
.tile--beer { background: linear-gradient(170deg, rgba(246, 183, 60, 0.22), var(--card) 70%); }
.tile--beer .big { color: var(--beer-2); }
.tile--wine { background: linear-gradient(170deg, rgba(224, 53, 107, 0.25), var(--card) 70%); }
.tile--wine .big { color: var(--wine-2); }
@media (max-width: 860px) {
  .tiles--wrap { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tile { min-height: 104px; padding: 14px; }
  .tile-ico { width: 30px; height: 40px; top: 12px; right: 12px; }
}

.wrap-strip { display: grid; gap: 10px; padding: 16px 20px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); }
.mix { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--line); }
.mix i { display: block; height: 100%; }
.mix-beer { background: linear-gradient(90deg, var(--beer), var(--beer-2)); }
.mix-wine { background: linear-gradient(90deg, var(--wine-deep), var(--wine)); }
.wrap-rate { color: var(--ink-2); }
.wrap-rate b { color: var(--ink); font-family: var(--display); font-size: var(--step-1); }

.split { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(16px, 3vw, 40px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--ink-2); font-size: var(--step--1); }
.chart .legend { margin-top: 10px; }
.lg { display: inline-flex; align-items: center; gap: 8px; }
.lg::before { content: ''; width: 14px; height: 14px; border-radius: 4px; background: currentColor; flex: none; }
.lg--beer::before { background: var(--beer); }
.lg--wine::before { background: var(--wine); }
.lg--grow::before { background: var(--grow); }
.lg--lost::before { background: var(--wine); }
.lg--range::before { background: repeating-linear-gradient(135deg, var(--wine-2) 0 2px, transparent 2px 5px); border: 1.5px solid var(--wine-2); }
.month-note, .axis-note { color: var(--ink-3); }
.axis-note { margin-left: auto; }
figcaption { color: var(--ink-3); font-size: var(--step--1); margin-top: 10px; }
figure { margin: 0; }

/* ---------- Volume: bodies filling with drink --------------------------- */
.split--volume { grid-template-columns: 1.6fr 1fr; }
@media (max-width: 900px) { .split--volume { grid-template-columns: 1fr; } }
.bodies { display: grid; grid-template-columns: repeat(auto-fill, minmax(24px, 1fr)); gap: 8px 6px; max-height: 44svh; overflow: hidden; }
.bodies i {
  display: block; aspect-ratio: 20 / 48;
  --t: 100%;
  background: linear-gradient(to top, var(--wine) 0%, var(--beer) var(--t), rgba(255, 244, 227, 0.12) var(--t));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 48'%3E%3Ccircle cx='10' cy='5.5' r='5'/%3E%3Cpath d='M5 12h10a4 4 0 0 1 4 4v12a2 2 0 0 1-4 0v18a2 2 0 0 1-4 0V33H9v13a2 2 0 0 1-4 0V28a2 2 0 0 1-4 0V16a4 4 0 0 1 4-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 48'%3E%3Ccircle cx='10' cy='5.5' r='5'/%3E%3Cpath d='M5 12h10a4 4 0 0 1 4 4v12a2 2 0 0 1-4 0v18a2 2 0 0 1-4 0V33H9v13a2 2 0 0 1-4 0V28a2 2 0 0 1-4 0V16a4 4 0 0 1 4-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 600px) { .bodies { grid-template-columns: repeat(auto-fill, minmax(18px, 1fr)); gap: 6px 4px; max-height: 34svh; } }
.mini-stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mini-stats li { display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 12px 16px; border-radius: var(--radius-sm); background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--ink-2); font-size: var(--step--1); }
.mini-ico { grid-row: 1 / 3; width: 52px; height: 44px; }
.mini-stats b { font: 800 var(--step-2)/1 var(--display); color: var(--ink); }
@media (max-width: 900px) {
  .mini-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .mini-stats li { grid-template-columns: 1fr; padding: 10px; gap: 2px; }
  .mini-ico { grid-row: auto; width: 34px; height: 28px; }
}

/* ---------- Skyline ---------------------------------------------------- */
.skyline-cols {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end; gap: clamp(10px, 3vw, 36px);
  height: clamp(220px, 46svh, 480px); border-bottom: 2px solid var(--line-2);
}
.col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; }
.col-label { text-align: center; margin-bottom: 8px; }
.col-label b { font: 800 var(--step-1)/1.1 var(--display); color: var(--ink); }
.col-bar { width: min(120px, 80%); border-radius: 10px 10px 0 0; transform-origin: bottom; }
.col--you .col-bar {
  background:
    repeating-linear-gradient(to top, rgba(255,244,227,.95) 0 2px, transparent 2px 9px),
    linear-gradient(90deg, var(--beer) 0%, var(--beer-2) 45%, var(--beer) 100%);
  box-shadow: 0 0 40px -6px rgba(246, 183, 60, 0.55);
}
.col--you .col-label b { color: var(--beer-2); }
.col--landmark .col-bar { background: linear-gradient(180deg, #8d7aa0, #4e3d5e); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); border-radius: 0; }
.col--landmark:nth-child(3) .col-bar { clip-path: polygon(46% 0, 54% 0, 70% 40%, 86% 100%, 14% 100%, 30% 40%); background: linear-gradient(180deg, #a592b8, #574569); }
.skyline-names { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: clamp(10px, 3vw, 36px); }
.col-under { font-size: var(--step--1); color: var(--ink-2); text-align: center; margin-top: 8px; line-height: 1.3; }

/* ---------- Money ------------------------------------------------------ */
.split--money { grid-template-columns: 0.8fr 1.4fr; align-items: stretch; }
@media (max-width: 900px) { .split--money { grid-template-columns: 1fr; } .money-cards { grid-template-columns: 1fr 1fr; } .money-growth { grid-column: 1 / -1; } }
.money-cards { display: grid; gap: 12px; align-content: center; }
.money-card { padding: 16px 20px; border-radius: var(--radius); border: 1px solid var(--line); display: grid; gap: 6px; color: var(--ink-2); font-size: var(--step--1); }
.money-card .big { font-size: var(--step-3); }
.money-card--spent { background: linear-gradient(160deg, rgba(224, 53, 107, 0.22), rgba(224, 53, 107, 0.04)); }
.money-card--spent .big { color: var(--wine-2); }
.money-card--grow { background: linear-gradient(160deg, rgba(61, 220, 151, 0.18), rgba(61, 220, 151, 0.03)); }
.money-card--grow .big { color: var(--grow); }
.money-growth { color: var(--ink-2); }
.chart { padding: clamp(12px, 2vw, 20px); border-radius: var(--radius); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { font: 500 16px var(--body); fill: var(--ink-3); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .money-card { padding: 12px 14px; } .money-card .big { font-size: var(--step-2); } }

/* 10 / 20 / 30 years */
.horizons { display: grid; gap: clamp(12px, 2.2vh, 22px); }
.hz { display: grid; grid-template-columns: 190px 1fr auto; gap: 18px; align-items: center; }
.hz-label { display: grid; gap: 2px; }
.hz-label b { font: 800 var(--step-2)/1 var(--display); }
.hz-label span { color: var(--ink-3); font-size: var(--step--1); }
.hz-bars { display: grid; gap: 6px; }
.hz-bar { position: relative; height: clamp(30px, 4.4vh, 40px); display: flex; align-items: center; }
.hz-bar i { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 8px; transform-origin: left; }
.hz-bar--spend i { background: linear-gradient(90deg, var(--wine-deep), var(--wine)); }
.hz-bar--grow i { background: linear-gradient(90deg, #1f8f5f, var(--grow)); box-shadow: 0 0 24px -6px rgba(61,220,151,.6); }
.hz-bar span { position: relative; padding-left: 12px; font: 800 var(--step-0)/1 var(--display); color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.5); white-space: nowrap; }
.hz-x { font: 800 var(--step-1)/1 var(--display); color: var(--grow); padding: 8px 12px; border-radius: 999px; background: rgba(61,220,151,.1); border: 1px solid rgba(61,220,151,.3); }
@media (max-width: 640px) {
  .hz { grid-template-columns: 1fr auto; gap: 8px 12px; }
  .hz-label { grid-column: 1; display: flex; align-items: baseline; gap: 10px; }
  .hz-x { grid-column: 2; grid-row: 1; font-size: var(--step-0); padding: 6px 10px; }
  .hz-bars { grid-column: 1 / -1; }
}

/* ---------- Time ------------------------------------------------------- */
.dot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13px, 1fr)); gap: 5px; max-height: 40svh; overflow: hidden; }
.dot-grid i { aspect-ratio: 1; border-radius: 50%; background: var(--time); box-shadow: 0 0 10px -2px rgba(182, 156, 255, 0.6); }
.dot-grid i.part { background: linear-gradient(90deg, var(--time) var(--p), rgba(255,255,255,.12) var(--p)); box-shadow: none; }
@media (max-width: 600px) { .dot-grid { grid-template-columns: repeat(auto-fill, minmax(10px, 1fr)); gap: 4px; max-height: 26svh; } }
.enough { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.enough li { display: grid; grid-template-columns: 4.2ch 1fr; gap: 14px; align-items: center; padding: 12px 16px; border-radius: var(--radius-sm); background: rgba(182, 156, 255, 0.08); border: 1px solid rgba(182, 156, 255, 0.2); color: var(--ink-2); }
.enough .times { font: 800 var(--step-2)/1 var(--display); color: var(--time); text-align: right; }

/* ---------- Calories --------------------------------------------------- */
.kcal-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(14px, 2.4vw, 28px); align-items: stretch; }
@media (max-width: 900px) { .kcal-grid { grid-template-columns: 1fr; } }
.donut-fig { padding: 16px; border-radius: var(--radius); background: rgba(255, 111, 160, 0.06); border: 1px solid rgba(255, 111, 160, 0.2); }
.donuts { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }
.donuts svg { width: 100%; aspect-ratio: 1; display: block; }
.donuts svg.part { clip-path: inset(0 calc(100% - var(--p)) 0 0 round 0 50% 50% 0); }
@media (max-width: 600px) { .donuts { grid-template-columns: repeat(auto-fill, minmax(28px, 1fr)); gap: 4px; } .donut-fig { padding: 12px; } }
.run-card { display: grid; gap: 8px; align-content: center; padding: 16px 18px; border-radius: var(--radius); background: linear-gradient(160deg, rgba(255,138,101,.16), rgba(255,138,101,.03)); border: 1px solid rgba(255,138,101,.25); color: var(--ink-2); font-size: var(--step--1); }
.run-top { display: flex; align-items: center; gap: 14px; }
.run-ico { width: 56px; height: 36px; flex: none; }
.run-top .big { color: var(--coral); }
.earth { width: min(190px, 100%); margin: 0 auto; }
.earth svg { display: block; width: 100%; height: auto; }
#run-compare { color: var(--ink); font-weight: 600; text-align: center; }
@media (max-width: 900px) {
  .run-card { grid-template-columns: 96px 1fr; align-items: center; }
  .run-top { grid-column: 2; grid-row: 1; }
  .earth { grid-column: 1; grid-row: 1 / 3; width: 96px; }
  #run-compare { grid-column: 2; text-align: left; }
}
.weekly { display: grid; grid-template-columns: auto 1fr; gap: 12px 20px; align-items: center; padding: 14px 18px; border-radius: var(--radius); border: 1px dashed var(--line-2); }
.weekly h3 { font-size: var(--step-0); color: var(--ink-2); font-family: var(--body); letter-spacing: 0; }
.weekly ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.weekly li { display: grid; gap: 2px; color: var(--ink-3); font-size: var(--step--1); }
.weekly b { font: 800 var(--step-2)/1 var(--display); color: var(--ink); }
.weekly li:nth-child(1) b { color: var(--beer-2); }
.weekly li:nth-child(2) b { color: var(--icing); }
.weekly li:nth-child(3) b { color: var(--coral); }
@media (max-width: 640px) { .weekly { grid-template-columns: 1fr; gap: 8px; padding: 12px 14px; } }

/* ---------- Body ------------------------------------------------------- */
.liver-tile { background: linear-gradient(160deg, rgba(255, 138, 101, 0.2), var(--card) 70%); }
.liver-tile .big { color: var(--coral); font-size: var(--step-4); }
.units h3 { margin-bottom: 14px; }
.units-bars { display: grid; gap: 12px; }
.ubar { display: grid; grid-template-columns: minmax(90px, 220px) 1fr; gap: 14px; align-items: center; color: var(--ink-2); font-size: var(--step--1); }
.ubar-track { position: relative; height: 34px; border-radius: 10px; background: rgba(255,255,255,.05); overflow: hidden; }
.ubar-fill { position: absolute; inset: 0 auto 0 0; border-radius: 10px; display: flex; align-items: center; justify-content: flex-end; padding: 0 12px; font: 800 1.05rem var(--display); color: #1a0e1e; min-width: 3.5em; transform-origin: left; }
.ubar--you .ubar-fill { background: linear-gradient(90deg, var(--coral), #ffb199); }
.ubar--guide .ubar-fill { background: rgba(255,255,255,.35); }
#units-verdict { margin-top: 14px; color: var(--ink-2); }
@media (max-width: 600px) { .ubar { grid-template-columns: 1fr; gap: 4px; } .tiles--body { grid-template-columns: 1fr 1fr; } .liver-tile .big { font-size: var(--step-3); } }

/* ---------- Health ----------------------------------------------------- */
.life { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.life-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.life-row h3 { font-size: var(--step-0); color: var(--ink-2); font-family: var(--body); font-weight: 650; letter-spacing: 0; }
.months { display: grid; grid-template-columns: repeat(auto-fill, minmax(18px, 1fr)); gap: 5px; max-width: 900px; }
.months i { aspect-ratio: 1; border-radius: 5px; }
.months i.lost { background: var(--wine); }
.months i.range { background: repeating-linear-gradient(135deg, var(--wine-2) 0 2px, transparent 2px 6px); outline: 1.5px solid var(--wine-2); outline-offset: -1.5px; }
.months .ref { grid-column: 1 / -1; color: var(--ink-2); font-size: var(--step--1); padding: 10px 14px; border-radius: 12px; background: rgba(61,220,151,.08); border: 1px dashed rgba(61,220,151,.4); }
.help { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; color: var(--ink-2); font-size: var(--step--1); }
.help a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line-2); text-decoration: none; color: var(--ink); font-weight: 600; }
.help a:hover { background: rgba(255,255,255,.06); }

/* ---------- Report (email a PDF) --------------------------------------- */
/* ---------- Share slide: tabs ------------------------------------------ */
.slide--share { gap: clamp(12px, 2.2vh, 24px); justify-content: flex-start; padding-top: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + clamp(14px, 5vh, 56px)); }
.share-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 14px 24px; }
.share-head .slide-head { max-width: 640px; }
.tabs { position: relative; display: inline-flex; padding: 5px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--line); isolation: isolate; }
.tabs button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 8px 18px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font-weight: 700; font-size: 1rem; cursor: pointer; transition: color .25s; white-space: nowrap; }
.tabs button svg { width: 20px; height: 20px; }
.tabs button[aria-selected="true"] { color: #22110a; }
.tab-ink { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px; width: 0; border-radius: 999px; background: linear-gradient(135deg, var(--beer-2), var(--beer)); box-shadow: 0 8px 24px -8px rgba(246,183,60,.7); transition: left .4s cubic-bezier(.2,.8,.2,1), width .4s cubic-bezier(.2,.8,.2,1); }
@media (max-width: 560px) { .tabs { width: 100%; } .tabs button { flex: 1; justify-content: center; padding: 8px 6px; font-size: .95rem; } .tabs button svg { display: none; } }
.panel { min-width: 0; }
@media (prefers-reduced-motion: no-preference) { .panel:not([hidden]) { animation: stepIn .45s cubic-bezier(.2,.8,.2,1); } }

/* Card panel */
.panel--card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 5vw, 64px); align-items: center; }
.card-stage { display: grid; place-items: center; perspective: 1400px; }
.card-frame { position: relative; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.card-frame::before { content: ''; position: absolute; inset: 8% -6% -6%; border-radius: 40px; background: var(--card-glow, rgba(246,183,60,.5)); filter: blur(46px); opacity: .55; z-index: -1; transition: background .5s; }
#card-canvas { display: block; height: min(58svh, 620px); width: auto; max-width: 100%; border-radius: 22px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.08); }
.card-stage:hover .card-frame { transform: rotateY(-7deg) rotateX(4deg) translateY(-4px); }
.card-frame.flip { animation: cardFlip .55s cubic-bezier(.2,.8,.2,1); }
@keyframes cardFlip { 0% { transform: rotateY(0) scale(1); } 45% { transform: rotateY(84deg) scale(.96); } 55% { transform: rotateY(-84deg) scale(.96); } 100% { transform: rotateY(0) scale(1); } }
@media (prefers-reduced-motion: no-preference) { .card-frame { animation: floaty 6s ease-in-out infinite; } .card-frame.flip { animation: cardFlip .55s cubic-bezier(.2,.8,.2,1); } }
@keyframes floaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.card-controls { display: grid; gap: clamp(14px, 2.2vh, 22px); min-width: 0; }
.ctl { display: grid; gap: 10px; }
.ctl-label { font: 700 var(--step--1)/1 var(--body); color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--line-2); background: rgba(255,255,255,.04); color: var(--ink-2); font-weight: 700; font-size: 1rem; cursor: pointer; transition: border-color .2s, background .2s, color .2s, transform .15s; }
.chips button i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.chips button:hover { background: rgba(255,255,255,.09); }
.chips button:active { transform: scale(.96); }
.chips button[aria-checked="true"] { border-color: var(--c); color: var(--ink); background: color-mix(in srgb, var(--c) 18%, transparent); }
.seg { display: inline-flex; gap: 6px; padding: 4px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.04); width: fit-content; }
.seg button { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 6px 16px; border-radius: 999px; border: 0; background: none; color: var(--ink-2); font-weight: 700; font-size: 1rem; cursor: pointer; }
.seg button[aria-checked="true"] { background: var(--foam); color: #22110a; }
.fmt { display: inline-block; border: 2px solid currentColor; border-radius: 3px; }
.fmt--story { width: 10px; height: 17px; }
.fmt--post { width: 13px; height: 16px; }
.card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 520px; }
.card-more { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.card-more .btn svg { width: 18px; height: 18px; }
.btn--ig { color: #fff; background: linear-gradient(45deg, #f9a13b 0%, #ee2a7b 45%, #8134af 80%, #5b51d8 100%); box-shadow: 0 12px 30px -12px rgba(238, 42, 123, .7); }
.btn--wa { color: #062b16; background: linear-gradient(135deg, #5ff08f, #25d366); box-shadow: 0 12px 30px -12px rgba(37, 211, 102, .6); }
.btn--ig:hover, .btn--wa:hover { transform: translateY(-2px); }
.btn--ig svg, .btn--wa svg { width: 22px; height: 22px; }
.card-status { font-size: var(--step--1); font-weight: 600; color: var(--grow); }
.card-status.bad { color: var(--wine-2); }
.card-status:empty { display: none; }
@media (max-width: 900px) {
  .panel--card { grid-template-columns: 1fr; gap: 14px; }
  #card-canvas { height: min(34svh, 420px); border-radius: 14px; }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-snap-type: x proximity; }
  .chips::-webkit-scrollbar { display: none; }
  .chips button { flex: none; scroll-snap-align: start; }
  .ctl { gap: 6px; }
  .card-actions { max-width: none; gap: 8px; }
  .card-actions .btn--ig, .card-actions .btn--wa { min-height: 52px; padding-inline: 8px; font-size: .95rem; gap: 6px; line-height: 1.1; }
  .card-actions .btn--ig svg, .card-actions .btn--wa svg { width: 20px; height: 20px; flex: none; }
  .card-more .btn { flex: 1; min-height: 42px; padding-inline: 8px; font-size: .95rem; white-space: nowrap; }
  .card-more .btn svg { display: none; }
  .card-controls { gap: 10px; }
  .ctl--format { display: flex; align-items: center; gap: 12px; }
}
.slide.denser #card-canvas { height: min(30svh, 380px); }
.slide.densest #card-canvas { height: min(30svh, 340px); }

/* Email panel */
.panel--email { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(20px, 5vw, 64px); align-items: center; }
.report-main { display: grid; gap: clamp(12px, 2vh, 20px); min-width: 0; }
.report-main h3 { font-size: var(--step-2); }
@media (max-width: 900px) { .panel--email { grid-template-columns: 1fr; } .panel--email .report-preview { display: none; } .report-main .lead { font-size: var(--step-0); } }

/* Link panel */
.panel--link { display: grid; place-items: center; }
.link-card { width: min(720px, 100%); display: grid; gap: 14px; padding: clamp(18px, 3vw, 30px); border-radius: var(--radius); background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--line); box-shadow: var(--shadow); }
.link-url { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: rgba(0,0,0,.3); border: 1px dashed var(--line-2); color: var(--beer-2); min-width: 0; }
.link-url svg { width: 22px; height: 22px; flex: none; }
.link-url code { font: 500 .95rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: all; }
.link-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.report-preview { position: relative; width: min(340px, 100%); aspect-ratio: 210 / 297; justify-self: center; perspective: 900px; }
.paper { position: absolute; inset: 0; border-radius: 10px; background: #fffaf4; box-shadow: 0 30px 60px -20px rgba(0,0,0,.7); }
.paper--3 { transform: rotate(7deg) translate(18px, 10px); opacity: .45; }
.paper--2 { transform: rotate(3.5deg) translate(9px, 5px); opacity: .75; }
.paper--1 { overflow: hidden; display: grid; grid-template-rows: auto auto 1fr auto; transform: rotate(-2deg); transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s; }
.report-preview:hover .paper--1 { transform: rotate(0deg) translateY(-6px); }
.paper-head { background: #1a0e1e; padding: 9% 9% 7%; display: grid; gap: 4px; }
.paper-head b { font: 800 clamp(1.3rem, 2.4vw, 1.9rem)/1 var(--display); color: var(--foam); letter-spacing: -0.03em; }
.paper-head b span { color: var(--beer); }
.paper-head small { color: #dccbd6; font: 600 .8rem/1.2 var(--body); }
.paper-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 7% 7% 4%; }
.ps { border-radius: 7px; padding: 8px 9px; display: grid; gap: 2px; }
.ps b { font: 800 clamp(.85rem, 1.3vw, 1.05rem)/1.1 var(--display); letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps span { font: 500 .62rem/1.2 var(--body); color: #4a3a4f; }
.ps--pool { background: #e0f2fb; } .ps--pool b { color: #1581bd; }
.ps--wine { background: #fbe3ec; } .ps--wine b { color: #c2185b; }
.ps--grow { background: #dff5ea; } .ps--grow b { color: #15935d; }
.ps--donut { background: #fde4ef; } .ps--donut b { color: #e34688; }
.paper-lines { padding: 2% 7%; display: grid; gap: 7px; align-content: start; }
.paper-lines i { display: block; height: 6px; border-radius: 3px; background: #eadfe3; }
.paper-lines i.short { width: 60%; }
.paper-bars { padding: 0 7% 9%; display: grid; gap: 6px; }
.paper-bars i { display: block; height: 9px; border-radius: 3px; width: var(--w); background: linear-gradient(90deg, #c2185b, #e0356b); }
.paper-bars i:nth-child(2) { background: linear-gradient(90deg, #15935d, #3ddc97); }
.paper-bars i:nth-child(3) { background: linear-gradient(90deg, #d98c0f, #f6b73c); }
.paper-badge { position: absolute; left: -10px; bottom: 16px; background: var(--wine); color: #fff; font: 700 .9rem/1 var(--body); padding: 9px 14px; border-radius: 999px; box-shadow: 0 10px 24px -8px rgba(224,53,107,.7); transform: rotate(-4deg); }
.paper-check { position: absolute; right: -14px; top: -14px; width: 58px; height: 58px; border-radius: 50%; background: var(--grow); color: #0d2a1d; display: grid; place-items: center; transform: scale(0); transition: transform .5s cubic-bezier(.3,1.6,.5,1) .35s; box-shadow: 0 12px 30px -8px rgba(61,220,151,.7); }
.paper-check svg { width: 30px; height: 30px; }
.report-preview.sent .paper--1 { transform: rotate(-6deg) translate(-8px, -26px); }
.report-preview.sent .paper-check { transform: scale(1); }

.report-form { display: grid; gap: 12px; padding: clamp(16px, 2.4vw, 24px); border-radius: var(--radius); background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--line); box-shadow: var(--shadow); }
.email-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
input[type="email"] { width: 100%; min-height: 54px; padding: 10px 16px; border-radius: 999px; background: rgba(0,0,0,.28); border: 1.5px solid var(--line-2); color: var(--ink); font-size: var(--step-0); }
input[type="email"]:focus { outline: none; border-color: var(--beer); box-shadow: 0 0 0 4px rgba(246,183,60,.18); }
.email-row .btn[disabled] { opacity: .65; cursor: progress; transform: none; }
@media (max-width: 560px) { .email-row { grid-template-columns: 1fr; } }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.consent { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-weight: 400; font-size: var(--step--1); color: var(--ink-2); cursor: pointer; }
.consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--beer); }
.consent a { color: var(--beer-2); }
.rep-status { font-size: var(--step--1); font-weight: 600; }
.rep-status:empty { display: none; }
.rep-status.ok { color: var(--grow); }
.rep-status.bad { color: var(--wine-2); }
.copied { width: 100%; color: var(--grow); font-weight: 600; font-size: var(--step--1); }
.copied:empty { display: none; }
@media (max-width: 900px) {
  .report-preview { width: min(170px, 44vw); order: 0; }
  .paper-badge { font-size: .75rem; padding: 6px 10px; left: -14px; }
  .ps span, .paper-lines, .paper-bars { display: none; }
  .paper-stats { gap: 4px; padding: 6%; }
  .ps { padding: 5px 6px; }
  .paper-check { width: 40px; height: 40px; right: -10px; top: -10px; }
}

/* ---------- Support (last slide) --------------------------------------- */
.slide--support { align-items: center; text-align: center; justify-content: center; }
.support { display: grid; justify-items: center; gap: clamp(10px, 1.8vh, 16px); max-width: 720px; }
.support h2 { font-size: var(--step-3); }
.support .lead { font-size: var(--step-0); }
.coffee { width: clamp(90px, 15vh, 160px); }
.small { color: var(--ink-3); font-size: var(--step--1); }
.setup-note { color: var(--beer); border: 1px dashed var(--beer); padding: 12px 16px; border-radius: 12px; font-size: var(--step--1); }
.footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; color: var(--ink-3); font-size: var(--step--1); margin-top: clamp(8px, 2vh, 24px); }
.footer a { color: var(--ink-2); }
.sources-dialog { max-width: min(680px, calc(100vw - 32px)); max-height: 80svh; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--card); color: var(--ink); padding: 24px; }
.sources-dialog::backdrop { background: rgba(8, 3, 10, 0.7); backdrop-filter: blur(4px); }
.sources-dialog ul { padding-left: 20px; display: grid; gap: 10px; color: var(--ink-2); font-size: var(--step--1); margin: 14px 0 18px; }

/* ---------- Motion (explains something, plays once per slide) ------------ */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .slide .slide-head > * { transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
  .slide:not(.seen) .slide-head > * { opacity: 0; transform: translateY(18px); }
  .slide-head > :nth-child(2) { transition-delay: .08s; }
  .slide-head > :nth-child(3) { transition-delay: .16s; }
  .reveal { transition: opacity .8s ease .2s, transform .8s cubic-bezier(.2,.8,.2,1) .2s; }
  .slide:not(.seen) .reveal { opacity: 0; transform: translateY(24px); }
  .tiles .reveal:nth-child(2) { transition-delay: .28s; }
  .tiles .reveal:nth-child(3) { transition-delay: .36s; }
  .tiles .reveal:nth-child(4) { transition-delay: .44s; }
  /* Bars grow from zero so you feel the size. */
  .col-bar { transition: transform 1.4s cubic-bezier(.2,.8,.2,1) .3s; }
  .slide:not(.seen) .col-bar { transform: scaleY(0); }
  .col:nth-child(2) .col-bar { transition-delay: .45s; }
  .col:nth-child(3) .col-bar { transition-delay: .6s; }
  .ubar-fill, .hz-bar i { transition: transform 1.2s cubic-bezier(.2,.8,.2,1) .3s; }
  .slide:not(.seen) .ubar-fill, .slide:not(.seen) .hz-bar i { transform: scaleX(0); }
  .hz-bar--grow i { transition-delay: .5s; }
  .hz:nth-child(2) i { transition-delay: .7s; }
  .hz:nth-child(3) i { transition-delay: .9s; }
  /* Icons arrive one by one so you can count them; bodies fill up. */
  .dot-grid i, .months i, .donuts svg { transition: opacity .3s, transform .35s; transition-delay: calc(.3s + var(--i, 0) * 6ms); }
  .months i { transition-delay: calc(.3s + var(--i, 0) * 25ms); }
  .donuts svg { transition-delay: calc(.3s + var(--i, 0) * 22ms); }
  .slide:not(.seen) .dot-grid i, .slide:not(.seen) .months i, .slide:not(.seen) .donuts svg { opacity: 0; transform: scale(.3); }
  .bodies i { transition: --t 1.1s cubic-bezier(.3,.7,.3,1); transition-delay: calc(.3s + var(--i, 0) * 25ms); }
  .slide:not(.seen) .bodies i { --t: 0%; }
  .chart .line { stroke-dasharray: var(--len); stroke-dashoffset: 0; transition: stroke-dashoffset 2s cubic-bezier(.4,.1,.2,1) .3s; }
  .slide:not(.seen) .chart .line { stroke-dashoffset: var(--len); }
  .chart .area, .chart .end { transition: opacity 1s 1.4s; }
  .slide:not(.seen) .chart .area, .slide:not(.seen) .chart .end { opacity: 0; }
  .earth .arc { stroke-dashoffset: var(--off); transition: stroke-dashoffset 2s cubic-bezier(.4,.1,.2,1) .5s; }
  .slide:not(.seen) .earth .arc { stroke-dashoffset: var(--c); }
  .earth .dotrun { transition: opacity .4s 2.3s; }
  .slide:not(.seen) .earth .dotrun { opacity: 0; }
  .next svg { animation: nudge 2.2s ease-in-out infinite; }
  .steam path { animation: steam 3s ease-in-out infinite; }
  .steam path:nth-child(2) { animation-delay: .5s; }
  .steam path:nth-child(3) { animation-delay: 1s; }
}
.earth .arc { stroke-dashoffset: var(--off); }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes steam { 0%, 100% { transform: translateY(0); opacity: .2; } 50% { transform: translateY(-8px); opacity: .8; } }

/* ---------- Phones and tablets: keep the GPU light ---------------------- */
@media (hover: none), (pointer: coarse) {
  .topbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(18, 9, 20, 0.94); }
  .card-frame::before { display: none; }
  .card-frame, .card-frame.flip { animation: none !important; }
  .card-stage:hover .card-frame { transform: none; }
  #card-canvas { box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 18px 40px -18px var(--card-glow, rgba(246,183,60,.6)); }
  .dot-grid i, .col--you .col-bar, .hz-bar--grow i, .chips button i { box-shadow: none; }
  .sources-dialog::backdrop { backdrop-filter: none; }
}

/* Very short screens: shrink the whole slide rather than let it overflow. */
.slide > :not(.next) { zoom: var(--fit, 1); }

@media print {
  html { scroll-snap-type: none; }
  .topbar, .dots, .hero-stage, .support .btn, .next { display: none !important; }
}
.slide--calc.densest .slide-head { display: none; }