/*
 * Arc's website, in the app's design: the same tokens (src/theme/tokens.ts),
 * Barlow / Barlow Condensed bundled here (no font CDN — no user IPs leak).
 * Light and dark: the system setting, or the visitor's pick (theme.js sets
 * data-theme on <html>). The phone mock-ups follow it, like the app does.
 */
@font-face { font-family: 'Barlow Condensed'; font-weight: 800; font-display: swap; src: url('/fonts/BarlowCondensed_800ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url('/fonts/Barlow_400Regular.ttf') format('truetype'); }
@font-face { font-family: 'Barlow'; font-weight: 500; font-display: swap; src: url('/fonts/Barlow_500Medium.ttf') format('truetype'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url('/fonts/Barlow_600SemiBold.ttf') format('truetype'); }

/* ─── Tokens ───────────────────────────────────────────────────────────── */
:root {
  --bg: #F4F4EF; --surface: #FFFFFF; --raised: #EBEBE5; --off: #DCDCD5; --text: #0F1217;
  --muted: #6E6E68; --line: #DADAD3; --accent: #2563EB; --accent-ink: #FFFFFF;
  --success: #1FA35C; --danger: #D93636;
  --shadow: rgba(15, 18, 23, 0.18);
  --radius-card: 24px; --radius-box: 16px; --control: 46px; --bar: 58px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  color-scheme: light;
}
/* Dark: the system's, unless the visitor picked light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #0F1217; --surface: #181C23; --raised: #22272F; --off: #343A44; --text: #F3F5F8;
    --muted: #8B93A0; --line: #2C323C; --accent: #2F7BFF; --success: #3DDC84; --danger: #FF4D4D;
    --shadow: rgba(0, 0, 0, 0.55); color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --bg: #0F1217; --surface: #181C23; --raised: #22272F; --off: #343A44; --text: #F3F5F8;
  --muted: #8B93A0; --line: #2C323C; --accent: #2F7BFF; --success: #3DDC84; --danger: #FF4D4D;
  --shadow: rgba(0, 0, 0, 0.55); color-scheme: dark;
}

/* ─── Base ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 17px/1.55 'Barlow', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; transition: background-color 300ms, color 300ms;
}
.page { max-width: 720px; margin: 0 auto; padding: 24px 24px 64px; }
p { margin: 0 0 12px; }
ul { margin: 0 0 12px; padding-left: 20px; }
li { margin-bottom: 6px; }
a { color: var(--accent); }
strong { font-weight: 600; }
.hidden { display: none; }

/* Header: wordmark, pages as capsules (the current one inverted), theme switch. */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; }
.wordmark { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.wordmark img, .wordmark .mascot { width: 34px; height: 34px; }
.wordmark span { font: 800 28px/1 'Barlow Condensed', sans-serif; letter-spacing: 1px; }
.nav { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.nav a, .pill {
  height: var(--control); padding: 0 18px; display: inline-flex; align-items: center; gap: 8px;
  border-radius: 999px; background: var(--raised); color: var(--text);
  font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap;
}
.nav a[aria-current='page'] { background: var(--text); color: var(--bg); }
.pill.accent { background: var(--accent); color: var(--accent-ink); }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: pulse 1.6s ease-in-out infinite; }
.theme-toggle {
  width: var(--control); height: var(--control); border-radius: 999px; border: 0; cursor: pointer;
  background: var(--raised); color: var(--text); display: inline-flex; align-items: center; justify-content: center;
}
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .sun { display: none; }
:root[data-theme='dark'] .theme-toggle .sun { display: block; }
:root[data-theme='dark'] .theme-toggle .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme-toggle .sun { display: block; }
  :root:not([data-theme='light']) .theme-toggle .moon { display: none; }
}
button:active, .pill:active { transform: scale(0.97); }

/* Display type: Barlow Condensed caps, tight — the app's headlines. */
h1 {
  font: 800 clamp(44px, 11vw, 72px)/0.92 'Barlow Condensed', sans-serif;
  text-transform: uppercase; margin: 0 0 16px;
}
h2 { font: 800 28px/1 'Barlow Condensed', sans-serif; text-transform: uppercase; margin: 0 0 12px; }
h3 { font-weight: 600; font-size: 17px; margin: 20px 0 4px; }
.lead { color: var(--muted); font-weight: 500; font-size: 19px; margin: 0 0 32px; }
.meta { color: var(--muted); font-size: 15px; margin: 0 0 32px; }

/* Sections are cards on the ground; space splits them (no rules). */
.card { background: var(--surface); border-radius: var(--radius-card); padding: 24px; margin-bottom: 16px; }
.card > :last-child { margin-bottom: 0; }
.box { background: var(--raised); border-radius: var(--radius-box); padding: 14px 16px; margin: 12px 0; }
.todo { background: var(--raised); border-radius: 8px; padding: 1px 8px; color: var(--muted); font-weight: 500; }
.box .todo { background: none; padding: 0; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 8px 12px 8px 0; }
th { color: var(--muted); font-weight: 600; }

/* Buttons and fields: capsules at the tab bar's height. */
.button {
  height: var(--bar); width: 100%; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  font: 800 20px/1 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: 0.5px;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.field {
  height: var(--bar); width: 100%; border-radius: 999px; padding: 0 24px;
  background: var(--raised); color: var(--text); font: 500 17px 'Barlow', sans-serif;
  border: 1.5px solid transparent; outline: none;
}
.field:focus { border-color: var(--text); }
.field.invalid { border-color: var(--danger); }
.error { color: var(--danger); font-weight: 500; font-size: 15px; margin: 8px 0 0; }

/* The login: one centred column in the middle of the screen. */
.login {
  min-height: 100vh; min-height: 100dvh; max-width: 440px;
  display: flex; flex-direction: column; justify-content: center; text-align: center;
}
.login > img { width: 72px; margin: 0 auto 24px; }
.login .field { text-align: center; }

footer { margin-top: 48px; color: var(--muted); font-size: 14px; display: flex; gap: 16px; flex-wrap: wrap; }
footer a { color: var(--muted); }

/* ─── Landing page ─────────────────────────────────────────────────────── */
.landing { max-width: 1080px; }
.landing .top { margin-bottom: 24px; }
section.block { padding: 72px 0; }
.eyebrow { color: var(--accent); font-weight: 600; font-size: 15px; margin: 0 0 10px; letter-spacing: 0.3px; }
.big { font: 800 clamp(48px, 12vw, 104px)/0.9 'Barlow Condensed', sans-serif; text-transform: uppercase; margin: 0 0 20px; }
.split { display: grid; gap: 48px; align-items: center; }
@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1fr; gap: 64px; }
  .split.flip > :first-child { order: 2; }
}
.copy p { color: var(--muted); font-size: 19px; font-weight: 500; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

.hero-l { display: grid; gap: 24px; align-items: center; padding: 40px 0 24px; }
@media (min-width: 860px) { .hero-l { grid-template-columns: 1.3fr 1fr; } }

.steps { display: grid; gap: 16px; margin-top: 32px; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step .n { font: 800 72px/0.9 'Barlow Condensed', sans-serif; color: var(--accent); margin-bottom: 12px; }
.step h3, .grid4 .card h3 { font: 800 26px/1 'Barlow Condensed', sans-serif; text-transform: uppercase; margin: 0 0 8px; }
.step p, .grid4 .card p { color: var(--muted); }
.grid4 { display: grid; gap: 16px; margin-top: 32px; }
@media (min-width: 700px) { .grid4 { grid-template-columns: repeat(2, 1fr); } }
.card.step, .grid4 .card { transition: transform 220ms var(--ease), background-color 300ms; }
@media (hover: hover) { .card.step:hover, .grid4 .card:hover { transform: translateY(-4px); } }

.final { text-align: center; }
.final .mascot-btn { width: 140px; margin: 0 auto 8px; display: block; }
.final .ctas { justify-content: center; }

/* Reveal on scroll (main.js adds .in). */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 100ms; } .reveal.d2 { transition-delay: 200ms; }

.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 10; pointer-events: none; }
.progress i { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }

/* ─── The mascot ───────────────────────────────────────────────────────── */
.mascot { display: block; width: 100%; overflow: visible; }
.mascot .m-all { transform-box: fill-box; transform-origin: 50% 100%; animation: float 4.2s ease-in-out infinite; }
.mascot .m-eye { transform-box: fill-box; transform-origin: center; animation: blink 5.2s infinite; }
.mascot.hop .m-all { animation: hop 2.4s cubic-bezier(0.3, 0, 0.3, 1) infinite; }
.mascot-btn { background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; justify-self: center; }
.mascot-btn:active { transform: none; }
.mascot-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; border-radius: 24px; }
.mascot-btn.bounce .m-all { animation: hop 900ms cubic-bezier(0.3, 0, 0.3, 1) 1; }
.hero-mascot { width: min(48vw, 340px); will-change: transform; }
@keyframes float { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-4%) scale(0.98, 1.02); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.08); } }
@keyframes hop {
  0%, 60%, 100% { transform: translateY(0) scale(1, 1); }
  10% { transform: translateY(0) scale(1.12, 0.86); }
  25% { transform: translateY(-28%) scale(0.92, 1.1); }
  40% { transform: translateY(0) scale(1.1, 0.9); }
  50% { transform: translateY(0) scale(0.98, 1.03); }
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ─── Phones ──────────────────────────────────────────────────────────────
 * Flat: a dark frame with a soft shadow; it lifts a little under the cursor.
 */
.stage { display: flex; justify-content: center; padding: 24px 0 40px; }
.device {
  position: relative; width: 340px; max-width: 100%; aspect-ratio: 9 / 18.5;
  border-radius: 52px; box-shadow: 0 30px 70px var(--shadow);
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
}
@media (hover: hover) {
  .device:hover { transform: translateY(-8px); box-shadow: 0 40px 90px var(--shadow); }
}

/* The phone's face: the app inside, in the page's light or dark. */
.phone {
  --p-bg: var(--bg); --p-surface: var(--surface); --p-raised: var(--raised); --p-off: var(--off);
  --p-text: var(--text); --p-muted: var(--muted); --p-accent: var(--accent); --p-success: var(--success);
  position: absolute; inset: 0;
  background: var(--p-bg); color: var(--p-text); border-radius: 52px; border: 10px solid #05070A;
  padding: 50px 16px 16px; overflow: hidden; font-size: 14px; transition: background-color 300ms, color 300ms;
}
.phone::before { /* the island */
  content: ''; position: absolute; top: 10px; left: 50%; width: 92px; height: 26px; z-index: 3;
  transform: translateX(-50%); background: #000; border-radius: 999px;
}
.phone .status { position: absolute; top: 14px; left: 30px; font-weight: 600; font-size: 13px; z-index: 2; }

/* Pieces of the app's UI inside the phones. */
.ph-title { font: 800 34px/0.9 'Barlow Condensed', sans-serif; text-transform: uppercase; margin: 6px 4px 14px; }
.ph-head { display: flex; align-items: center; justify-content: space-between; margin: 6px 4px 14px; }
.ph-head .ph-title { margin: 0; }
.ph-chip { height: 32px; padding: 0 12px; border-radius: 999px; background: var(--p-text); color: var(--p-bg); display: inline-flex; align-items: center; font-weight: 600; font-size: 12px; }
.ph-chip.soft { background: var(--p-raised); color: var(--p-text); }
.ph-chip.on { background: var(--p-accent); color: #fff; }
.ph-card { background: var(--p-surface); border-radius: 22px; padding: 8px; }
.ph-label { color: var(--p-muted); font-weight: 600; font-size: 12px; margin: 14px 4px 8px; }
.ph-btn {
  position: absolute; left: 16px; right: 16px; bottom: 18px; height: 50px; border-radius: 999px;
  background: var(--p-accent); color: #fff; display: flex; align-items: center; justify-content: center;
  font: 800 19px/1 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: 0.4px;
}
.ph-row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; }
.ph-num {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--p-muted); flex: none; position: relative;
  display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; color: var(--p-muted);
}
.ph-num.next { border-color: var(--p-accent); color: var(--p-accent); }
.ph-num.done { border-color: var(--p-success); color: var(--p-success); }
.ph-num .tick { position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--p-success); background: var(--p-surface);
  display: flex; align-items: center; justify-content: center; color: var(--p-success); transform: scale(0); }
.ph-name { font: 800 21px/1 'Barlow Condensed', sans-serif; text-transform: uppercase; }
.ph-meta { color: var(--p-muted); font-size: 12px; margin-top: 2px; }
.ph-grow { flex: 1; min-width: 0; }
.in .ph-num .tick { animation: pop 420ms cubic-bezier(0.3, 1.6, 0.5, 1) forwards; }
.in .ph-row:nth-child(2) .tick { animation-delay: 600ms; }
.ph-thumb { width: 64px; height: 48px; border-radius: 8px; background: var(--p-raised); flex: none; overflow: hidden; }
.ph-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-thumbs { display: flex; }
.ph-thumbs .ph-thumb { width: 40px; height: 30px; margin-left: -10px; border: 2px solid var(--p-surface); }
.ph-thumbs .ph-thumb:first-child { margin-left: 0; }
.ph-field { height: 44px; border-radius: 999px; background: var(--p-raised); color: var(--p-muted); display: flex; align-items: center; padding: 0 18px; margin: 0 0 10px; }
.ph-chips { display: flex; gap: 6px; margin-bottom: 12px; }
.ph-list { display: grid; gap: 8px; }
.ph-item { display: flex; align-items: center; gap: 12px; background: var(--p-surface); border-radius: 16px; padding: 8px; }
.ph-item .t { font-weight: 600; font-size: 14px; }
.ph-new { background: var(--p-success); color: var(--p-bg); font-weight: 700; font-size: 10px; padding: 2px 6px; border-radius: 999px; margin-left: 6px; }
.ph-big { font: 800 italic 64px/0.9 'Barlow Condensed', sans-serif; color: var(--p-accent); margin: 4px 4px 2px; font-variant-numeric: tabular-nums; }
.ph-rest { position: absolute; left: 16px; right: 16px; bottom: 18px; height: 50px; border-radius: 999px; background: var(--p-raised); overflow: hidden; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; font-weight: 600; }
.ph-rest i { position: absolute; left: 0; top: 0; bottom: 0; width: 62%; background: var(--p-accent); opacity: 0.25; }
.ph-rest span { position: relative; }
.ph-cycle { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; }
.ph-cycle .ph-name { font-size: 20px; }
.ph-cycle.dim { opacity: 0.55; }

.rings { display: flex; gap: 10px; margin: 0 4px 14px; }
.ring { width: 54px; height: 54px; }
.ring circle { fill: none; stroke-width: 6; }
.ring .track { stroke: var(--p-raised); }
.ring .fill { stroke: var(--p-accent); stroke-linecap: round; stroke-dasharray: 138; stroke-dashoffset: 138; transform: rotate(-90deg); transform-origin: center; }
.in .ring .fill { transition: stroke-dashoffset 1400ms var(--ease) 300ms; stroke-dashoffset: 92; }
.ring.full .fill { stroke-dashoffset: 92; }

/* Logger: a set table that ticks itself off. */
.ph-ex { display: flex; gap: 12px; align-items: center; margin: 0 4px 16px; }
.sets { display: grid; gap: 8px; }
.set { display: grid; grid-template-columns: 26px 1fr 1fr 44px; gap: 8px; align-items: center; position: relative; }
.set .badge { color: var(--p-muted); font-weight: 600; text-align: center; }
.set .cell { height: 44px; border-radius: 999px; background: var(--p-raised); display: flex; align-items: center; justify-content: center; font: 700 20px/1 'Barlow Condensed', sans-serif; }
.set .cell.ghost { color: var(--p-muted); }
.set .box-check { width: 44px; height: 44px; border-radius: 999px; background: var(--p-off); display: flex; align-items: center; justify-content: center; color: var(--p-bg); position: relative; }
.set .box-check::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--p-text); transform: scale(0); }
.set .box-check svg { position: relative; z-index: 1; opacity: 0; }
.set.done .box-check::after { transform: scale(1); }
.set.done .box-check svg { opacity: 1; }
.in .set .box-check::after { animation: pop 360ms cubic-bezier(0.3, 1.6, 0.5, 1) forwards; }
.in .set .box-check svg { animation: show 200ms ease forwards; }
.in .set:nth-child(1) .box-check::after, .in .set:nth-child(1) .box-check svg { animation-delay: 500ms; }
.in .set:nth-child(2) .box-check::after, .in .set:nth-child(2) .box-check svg { animation-delay: 1300ms; }
.in .set:nth-child(3) .box-check::after, .in .set:nth-child(3) .box-check svg { animation-delay: 2100ms; }
.in .set:nth-child(3) .cell.ghost { animation: ink 300ms ease forwards 2000ms; }
.pr { position: absolute; right: -4px; top: -8px; z-index: 2; background: var(--p-success); color: var(--p-bg); font-weight: 700; font-size: 11px; padding: 2px 7px; border-radius: 999px; transform: scale(0); }
.in .pr { animation: pop 420ms cubic-bezier(0.3, 1.8, 0.5, 1) forwards 2400ms; }
.burst { position: absolute; right: 18px; top: 18px; width: 0; height: 0; z-index: 1; }
.burst i { position: absolute; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--p-success); opacity: 0; }
.in .burst i { animation: burst 700ms var(--ease) forwards 2450ms; }
.burst i:nth-child(1) { --x: 0px; --y: -34px; } .burst i:nth-child(2) { --x: 30px; --y: -18px; }
.burst i:nth-child(3) { --x: 30px; --y: 18px; } .burst i:nth-child(4) { --x: 0px; --y: 34px; }
.burst i:nth-child(5) { --x: -30px; --y: 18px; } .burst i:nth-child(6) { --x: -30px; --y: -18px; }
.forsight { margin-top: 16px; background: var(--p-surface); border-radius: 16px; padding: 12px 14px; color: var(--p-muted); font-weight: 500; opacity: 0; transform: translateY(8px); }
.forsight b { color: var(--p-text); font-weight: 600; }
.in .forsight { transition: all 500ms ease 3000ms; opacity: 1; transform: none; }

/* Progress: week bars and numbers that count up. */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 0 4px 14px; }
.stat b { display: block; font: 800 40px/0.9 'Barlow Condensed', sans-serif; }
.stat span { color: var(--p-muted); font-size: 12px; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding: 14px; background: var(--p-surface); border-radius: 22px; }
.bars i { flex: 1; border-radius: 3px; background: var(--p-accent); opacity: 0.55; height: 2%; transition: height 900ms var(--ease); }
.bars i:last-child { opacity: 1; }
.streak { margin-top: 12px; background: var(--p-surface); border-radius: 22px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; }
.streak b { font: 800 40px/0.9 'Barlow Condensed', sans-serif; color: var(--p-accent); }

@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes show { to { opacity: 1; } }
@keyframes ink { to { color: var(--p-text); } }
@keyframes burst { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(0.4); } }

/* ─── Gallery: one phone, its screen changing as you scroll through ───── */
.gallery { height: 420vh; position: relative; margin: 40px 0; }
.gallery-sticky { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; align-items: center; }
.gallery-grid { display: grid; gap: 16px; width: 100%; align-items: center; }
.gallery-copy .big { margin-bottom: 8px; }
.g-list { list-style: none; padding: 0; margin: 24px 0 0; display: none; }
.g-item { padding: 14px 0 14px 20px; border-left: 3px solid var(--raised); color: var(--muted); transition: color 300ms, border-color 300ms; }
.g-item h3 { font: 800 26px/1 'Barlow Condensed', sans-serif; text-transform: uppercase; margin: 0 0 4px; }
.g-item p { margin: 0; font-weight: 500; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 400ms var(--ease), opacity 300ms; }
.g-item.active { color: var(--text); border-color: var(--accent); }
.g-item.active p { color: var(--muted); max-height: 80px; opacity: 1; }
.gallery-phone { display: flex; flex-direction: column; align-items: center; }
.gallery-phone .stage { padding: 8px 0 16px; }
.gallery-phone .device { width: 340px; zoom: 0.66; }
@media (max-height: 760px) { .gallery-phone .device { zoom: 0.56; } }
.g-item { cursor: pointer; }
.gallery-phone .phone { opacity: 0; transform: translateY(14px) scale(0.98); transition: opacity 320ms var(--ease), transform 320ms var(--ease); }
.gallery-phone .phone.active { opacity: 1; transform: none; }
.g-caption { color: var(--muted); font-weight: 500; text-align: center; max-width: 320px; min-height: 3.1em; margin: 0; }
.g-dots { display: flex; gap: 8px; margin-top: 12px; }
.g-dots i { width: 8px; height: 8px; border-radius: 999px; background: var(--raised); transition: width 300ms var(--ease), background-color 300ms; }
.g-dots i.active { width: 24px; background: var(--accent); }
@media (min-width: 860px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; gap: 64px; }
  .g-list { display: block; }
  .g-caption, .g-dots { display: none; }
  .gallery-phone .device { zoom: 1; }
}
@media (min-width: 860px) and (max-height: 860px) { .gallery-phone .device { zoom: 0.84; } }
@media (min-width: 860px) and (max-height: 760px) { .gallery-phone .device { zoom: 0.72; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; animation-delay: 0ms !important; }
  .reveal { opacity: 1; transform: none; }
  .gallery { height: auto; } .gallery-sticky { position: static; height: auto; }
}

/* ─── Eye-catcher: the landing fills the screen ────────────────────────────── */
.landing { max-width: 1320px; padding-top: 0; }
.landing .big { font-size: clamp(56px, 9.5vw, 156px); line-height: 0.88; }
.giant { font: 800 clamp(84px, 19vw, 300px)/0.82 'Barlow Condensed', sans-serif; text-transform: uppercase; margin: 0; letter-spacing: -0.5px; }
section.block { padding: 120px 0; }
@media (max-width: 700px) { section.block { padding: 80px 0; } }

/* The hero: the whole first screen. */
.hero-full {
  position: relative; min-height: calc(100vh - 80px); min-height: calc(100svh - 80px);
  display: flex; flex-direction: column; justify-content: center; padding: 24px 0 96px;
}
.hero-full .giant { position: relative; z-index: 1; }
.hero-full .eyebrow { font-size: 17px; margin-bottom: 18px; }
.hero-glow {
  position: absolute; right: -10%; top: 5%; width: 75%; aspect-ratio: 1; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 34%, transparent), transparent 70%);
  filter: blur(10px); animation: breathe 6s ease-in-out infinite;
}
.hero-full .hero-mascot {
  position: absolute; right: 2%; top: 12%; width: min(46vw, 560px); z-index: 2;
}
.hero-foot { position: relative; z-index: 3; display: grid; gap: 8px; margin-top: 36px; max-width: 620px; }
.hero-foot .lead { margin: 0; font-size: clamp(19px, 1.6vw, 24px); }
.hero-foot .ctas { margin-top: 18px; }
@media (max-width: 700px) {
  .hero-full .hero-mascot { width: 52vw; top: 6%; right: -2%; }
  .hero-glow { width: 120%; right: -50%; top: 0; }
}
.scroll-cue {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--muted); font-weight: 600; font-size: 13px; text-decoration: none; letter-spacing: 0.5px;
}
.scroll-cue svg { animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.08); opacity: 1; } }

/* Full-width bands (the colour runs to the screen edges, the content stays put). */
.band { position: relative; }
.band::before { content: ''; position: absolute; inset: 0 -100vmax; background: var(--surface); z-index: -1; }
.band .card { background: var(--bg); }
.band.inverse::before { background: var(--text); }
.band.inverse { color: var(--bg); }
.band.inverse .lead { color: color-mix(in srgb, var(--bg) 65%, transparent); }
.band.inverse .pill:not(.accent) { background: color-mix(in srgb, var(--bg) 14%, transparent); color: var(--bg); }
body { overflow-x: hidden; }
.final.band { padding: 140px 0 120px; margin-bottom: 0; }
.final .giant { margin-bottom: 24px; }
.final .mascot-btn { width: 160px; }

/* Bigger phones on big screens. */
@media (min-width: 1100px) {
  .split .device { width: 380px; }
  .step .n { font-size: 110px; }
}

/* Hero fit: the headline scales with the width AND the height (all of it on the
 * first screen); the mascot sits in the free space right of the words. */
.hero-full .giant { font-size: min(19vw, 25vh); }
.hero-title { position: relative; }
.hero-full .hero-mascot {
  position: absolute; right: 0; top: 50%; margin-top: calc(min(36vw, 50vh) / -2);
  width: min(36vw, 50vh);
}
@media (max-width: 700px) {
  .hero-full .hero-mascot { width: 27vw; margin-top: -13.5vw; right: 0; top: 50%; }
}

/* ─── Every section fits the screen ─────────────────────────────────────────
 * Tablets get the two-column layout too; headings and spacing scale with the
 * height; the phones are sized by main.js to the space there is (--pz, --gz).
 */
.landing .big { font-size: min(9.5vw, 11vh, 156px); }
section.block { padding: clamp(48px, 9vh, 120px) 0; }
.split .device { zoom: var(--pz, 1); }
.gallery-phone .device, .gallery-phone .device[style] { zoom: var(--gz, 0.66) !important; }
.split .stage { padding: 0; }
@media (min-width: 640px) {
  .split { grid-template-columns: 1fr auto; gap: clamp(24px, 5vw, 64px); }
  .split.flip { grid-template-columns: auto 1fr; }
  .split.flip > :first-child { order: 2; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .step .n { font-size: min(72px, 8vh); }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .copy p { font-size: 17px; }
  .step { padding: 18px; }
  .step h3 { font-size: 22px; }
  .gallery-grid { grid-template-columns: 1fr auto; gap: 32px; }
  .g-list { display: block; }
  .g-caption, .g-dots { display: none; }
}

/* The phone size comes from --pz alone (main.js). */
@media (min-width: 1100px) { .split .device { width: 340px; } }

/* Short screens (a laptop's browser window): the giant headlines scale with the
 * height, so the hero — buttons included — and the ending each fit one view. */
.hero-full { padding: 16px 0 72px; min-height: calc(100vh - 76px); min-height: calc(100svh - 76px); }
.hero-full .giant { font-size: min(19vw, 19vh); }
.hero-full .hero-mascot { width: min(34vw, 46vh); margin-top: calc(min(34vw, 46vh) / -2); }
.hero-foot { margin-top: clamp(16px, 3vh, 36px); }
.hero-foot .ctas { margin-top: clamp(10px, 2vh, 18px); }
.hero-full .eyebrow { margin-bottom: clamp(8px, 1.6vh, 18px); }
.final.band { padding: clamp(56px, 10vh, 140px) 0 clamp(48px, 9vh, 120px); }
.final .giant { font-size: min(17vw, 17vh); margin-bottom: clamp(12px, 2.4vh, 24px); }
.final .mascot-btn { width: min(160px, 16vh); }
@media (max-width: 700px) {
  .hero-full .hero-mascot { width: 27vw; margin-top: -13.5vw; }
}

/* The glow belongs to the mascot: always centred behind it. */
.hero-glow { display: none; }
.hero-full .hero-mascot::before {
  content: ''; position: absolute; inset: -55%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 34%, transparent), transparent 72%);
  animation: breathe 6s ease-in-out infinite;
}

/* Pinned sections: each stays on screen while its phone plays, then the page
 * moves on (the section is taller than the screen; its content is sticky). */
.pinned { position: relative; height: 175vh; }
.pinned .pin {
  position: sticky; top: 0; min-height: 100vh; min-height: 100svh;
  display: grid; align-content: center; align-items: center; padding: 48px 0;
}
@media (prefers-reduced-motion: reduce) {
  .pinned { height: auto; } .pinned .pin { position: static; min-height: 0; padding: 80px 0; }
}

/* The ending as big as the opening. */
.final .giant { font-size: min(19vw, 19vh); }
.final .mascot-btn { width: min(150px, 13vh); }

.hl { color: var(--accent); }

/* Content sits above the line. */
.landing > section, .landing > header, footer { position: relative; z-index: 1; }
.hero-full .hero-mascot { z-index: 3; }

/* Nothing may stick out sideways (the bands run past the edges): clip, not
 * hidden — "hidden" would make the page a scroll box and break the pinned
 * sections; iPad Safari needs it on <html> too. */
html, body { overflow-x: clip; }
body { overflow-x: clip; }

/* Phones: the mascot sits at the bottom right, under the buttons, so the arc
 * rises from Day 1 to it without crossing any text. */
@media (max-width: 700px) {
  .hero-full { padding-bottom: calc(34vw + 56px); }
  .hero-full .hero-title { position: static; }
  .hero-full .hero-mascot { top: auto; bottom: 40px; right: 0; margin-top: 0; width: 30vw; }
  .scroll-cue { display: none; }
}

/* ─── Chapters: the story of a gym arc ─────────────────────────────────────── */
.chapter { position: relative; padding: clamp(64px, 12vh, 140px) 0; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
.chapter-body { position: relative; z-index: 1; width: 100%; }
/* The chapter's name, huge, behind everything — like a title card in a series. */
.chapter-num {
  position: absolute; left: -0.04em; top: 50%; transform: translateY(-50%); z-index: 0;
  font: 800 min(30vw, 42vh)/0.8 'Barlow Condensed', sans-serif; text-transform: uppercase; white-space: nowrap;
  color: var(--raised); letter-spacing: -1px; pointer-events: none; user-select: none;
}
.band .chapter-num { color: color-mix(in srgb, var(--text) 6%, transparent); }
.chapter .big { font-size: min(7vw, 9vh, 112px); }

/* The running number: the same lift, chapter by chapter. */
.lift {
  display: inline-grid; grid-template-columns: auto; gap: 2px; margin-top: 20px;
  background: var(--bg); border-radius: var(--radius-card); padding: 18px 24px 16px;
}
.lift-label { color: var(--muted); font-weight: 600; font-size: 14px; }
.lift-num { font: 800 22px/1 'Barlow Condensed', sans-serif; color: var(--muted); }
.lift-num b { font-size: 64px; line-height: 0.9; color: var(--text); font-variant-numeric: tabular-nums; }
.lift-note { color: var(--muted); font-size: 14px; }

/* The onboarding screen inside the phone (the app's own words). */
.ob-bar { height: 6px; border-radius: 999px; background: var(--p-raised); margin: 8px 4px 22px; overflow: hidden; }
.ob-bar i { display: block; height: 100%; width: 18%; background: var(--p-accent); border-radius: inherit; transition: width 900ms var(--ease) 300ms; }
.in .ob-bar i { width: 28%; }
.ob-title { font: 800 34px/0.95 'Barlow Condensed', sans-serif; text-transform: uppercase; margin: 0 4px 10px; }
.ob-why { color: var(--p-muted); font-size: 13px; margin: 0 4px 16px; }
.ob-opts { display: grid; gap: 8px; }
.ob-opt { background: var(--p-surface); border-radius: 18px; padding: 12px 14px; display: grid; gap: 2px; transition: background-color 300ms, color 300ms; }
.ob-opt b { font-weight: 600; font-size: 15px; }
.ob-opt span { color: var(--p-muted); font-size: 12px; transition: color 300ms; }
/* Picked: inverted, as in the app. */
.in .ob-opt.on { background: var(--p-text); color: var(--p-bg); transition-delay: 700ms; }
.in .ob-opt.on span { color: color-mix(in srgb, var(--p-bg) 70%, transparent); transition-delay: 700ms; }
.chapter .device { zoom: var(--pz, 1); }

/* Chapter title on top (readable), the story below it. */
.chapter { flex-direction: column; align-items: stretch; justify-content: center; }
.chapter-num {
  position: relative; top: auto; transform: none; left: -0.05em;
  font-size: min(24vw, 26vh); line-height: 0.8; margin-bottom: clamp(-60px, -4vh, -20px);
}
.band .chapter-num { color: var(--raised); }
.copy .eyebrow { color: var(--accent); font-size: 15px; font-weight: 600; }
@media (max-width: 700px) { .chapter .big { font-size: min(12vw, 9vh); } }

/* ─── The original logo ──────────────────────────────────────────────────── */
.logo { display: inline-flex; align-items: center; color: var(--text); }
.logo .wordmark-svg { height: 30px; width: auto; fill: currentColor; display: block; }

/* The mascot's pupil light pulses, as in the app. */
.mascot .m-spark { transform-box: fill-box; transform-origin: center; animation: spark 1.3s ease-in-out infinite; }
@keyframes spark { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.82); } }

/* ─── The intro (splash.js) ────────────────────────────────────────────────
 * The logo, the mascot peeking from behind its "c", a hop — and it drops,
 * the view following it down onto the page, where it lands in the hero.
 */
.splash { display: none; }
html.intro { overflow: hidden; }
html.intro .splash { display: block; position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.splash-panel {
  position: absolute; inset: 0; background: var(--bg); display: flex; align-items: center; justify-content: center;
  will-change: transform;
}
.splash-logo { width: min(46vw, 230px); height: auto; fill: var(--text); opacity: 0; display: block; }
.splash-beam { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.splash-mascot { z-index: 2; }
.splash-mascot { position: absolute; left: 0; top: 0; will-change: transform; }
.splash-mascot .mascot .m-all, .splash-mascot .mascot .m-eye { animation: none; }
/* The page waits one screen below until the camera brings it up. */
html.intro main { transform: translateY(100vh); will-change: transform; }
html.intro .hero-mascot { opacity: 0; transition: none; }
.hero-mascot { transition: opacity 500ms var(--ease); }
/* The landing: a jolt through the headline. */
.hero-full.impact .giant { animation: impact 420ms cubic-bezier(0.3, 0, 0.3, 1); }
@keyframes impact { 0% { transform: none; } 25% { transform: translateY(10px) scaleY(0.94); } 60% { transform: translateY(-3px); } 100% { transform: none; } }
.hero-mascot.landed .m-all { animation: land 420ms cubic-bezier(0.3, 0, 0.3, 1), float 4.2s ease-in-out 420ms infinite; }
@keyframes land { 0% { transform: scale(1.18, 0.8); } 55% { transform: scale(0.95, 1.06); } 100% { transform: none; } }

/* Until the intro mascot has handed over, only one mascot shows. */
html.intro-landing .hero-mascot { opacity: 0; }

/* The navbar: the mascot beside the logo. */
.logo { gap: 10px; text-decoration: none; }
.logo .logo-mascot { width: 34px; height: auto; display: block; }

/* ─── Hero: the app as the stage ──────────────────────────────────────────── */
.hero-grid { display: grid; gap: 24px; align-items: center; width: 100%; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 48px; } }
.hero-copy { position: relative; z-index: 2; }
.hero-copy .giant { font-size: min(13vw, 19vh); }
@media (max-width: 899px) { .hero-copy .giant { font-size: min(17vw, 12vh); } }
.hero-copy .lead { margin: clamp(14px, 2.4vh, 28px) 0 0; font-size: clamp(18px, 1.5vw, 22px); max-width: 560px; }
.hero-copy .ctas { margin-top: clamp(14px, 2.4vh, 24px); }
.hero-stage { display: flex; justify-content: center; align-items: center; position: relative; }

/* The phone, sized to the screen (--hz from main.js), the mascot on its top edge. */
.hero-device { width: 340px; zoom: var(--hz, 0.8); position: relative; }
.hero-stage .hero-mascot, .hero-full .hero-stage .hero-mascot {
  position: absolute; top: -78px; right: 34px; left: auto; bottom: auto; margin: 0;
  width: 112px; z-index: 5;
}
.hero-full .hero-stage .hero-mascot::before { inset: -45%; }

/* Chips floating round the phone: they drift, and lean toward the cursor (main.js). */
.float-chip { position: absolute; z-index: 6; will-change: transform; }
.chip-in {
  display: flex; align-items: center; gap: 10px; white-space: nowrap;
  background: var(--surface); color: var(--text); border-radius: 999px; padding: 12px 18px 12px 12px;
  font-weight: 600; font-size: 16px; box-shadow: 0 16px 40px var(--shadow);
  animation: drift 6s ease-in-out infinite;
}
.chip-ico { width: 30px; height: 30px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: #fff; }
.chip-ico.ok { background: var(--success); }
.chip-ico.acc { background: var(--accent); }
.c-pr { top: 18%; left: -150px; }
.c-pr .chip-in { animation-delay: -1s; }
.c-next { top: 48%; right: -170px; }
.c-next .chip-in { animation-delay: -3s; animation-duration: 7s; }
.c-streak { bottom: 14%; left: -110px; }
.c-streak .chip-in { animation-delay: -4.5s; animation-duration: 6.5s; }
@keyframes drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(6px, -10px); } }

/* Phones: stacked; the chips tucked closer; the action pinned at the bottom. */
.cta-bar { display: none; }
@media (max-width: 899px) {
  .hero-full { padding-bottom: 120px; }
  .hero-ctas { display: none; }
  .c-pr { left: -60px; top: 10%; } .c-next { right: -70px; top: 44%; } .c-streak { left: -50px; bottom: 10%; }
  .cta-bar {
    display: flex; justify-content: center; position: fixed; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 30; pointer-events: none; transition: transform 300ms var(--ease), opacity 300ms;
  }
  .cta-bar .pill { height: 56px; padding: 0 28px; font-size: 17px; box-shadow: 0 12px 30px var(--shadow); pointer-events: auto; }
  html.intro .cta-bar { opacity: 0; transform: translateY(40px); }
  .scroll-cue { display: none; }
  .landing footer { padding-bottom: 96px; }
}

/* ─── Phones: the navbar collapses into a menu ─────────────────────────────── */
.menu-toggle { display: none; }
@media (max-width: 700px) {
  .top { flex-wrap: nowrap; position: relative; }
  .menu-toggle {
    display: inline-flex; align-items: center; justify-content: center; width: var(--control); height: var(--control);
    border: 0; border-radius: 999px; background: var(--raised); color: var(--text); cursor: pointer;
  }
  .menu-toggle path { transition: transform 260ms var(--ease), opacity 200ms; transform-origin: 12px 12px; }
  .top.open .menu-toggle .l1 { transform: translateY(5px) rotate(45deg); }
  .top.open .menu-toggle .l2 { opacity: 0; }
  .top.open .menu-toggle .l3 { transform: translateY(-5px) rotate(-45deg); }
  /* The links: a card under the bar (the app's grouped-card shape). */
  .top .nav {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40;
    flex-direction: column; align-items: stretch; gap: 4px; padding: 8px;
    background: var(--surface); border-radius: 28px; box-shadow: 0 20px 50px var(--shadow);
    opacity: 0; transform: translateY(-8px) scale(0.98); transform-origin: top right; pointer-events: none;
    transition: opacity 200ms var(--ease), transform 220ms var(--ease);
  }
  .top.open .nav { opacity: 1; transform: none; pointer-events: auto; }
  .top .nav a { height: 52px; justify-content: flex-start; padding: 0 18px; background: none; font-size: 17px; }
  .top .nav a[aria-current='page'] { background: var(--text); color: var(--bg); }
  .top .nav .theme-toggle { align-self: flex-start; margin: 4px 0 4px 10px; }
  .landing .top.away.open { transform: none; }
}

/* Room for the mascot on the phone's top edge. */
.hero-stage { padding-top: 70px; }
@media (max-width: 899px) {
  .hero-stage { padding-top: 64px; }
  .c-pr { left: -170px; top: 24%; }
  .c-next { right: -170px; left: auto; top: 60%; }
  .c-streak { display: none; }
}

/* The phone keeps its own width (the flex row must not squeeze it). */
.hero-device { flex: none; max-width: none; }

/* The hero phone scales as one piece (transform, not zoom — Safari scaled
 * the frame but not its contents at small sizes); the margins give back the
 * space the scaling frees, so the layout matches its size on screen. */
.hero-device {
  zoom: 1; transform: scale(var(--hz, 0.8)); transform-origin: top center;
  margin: 0 calc(340px * (var(--hz, 0.8) - 1) / 2) calc(699px * (var(--hz, 0.8) - 1));
}

/* ─── Hero close-up: the phone large, rising from the hero's bottom edge ─── */
.hero-full { overflow: clip; padding-bottom: 0; align-items: stretch; }
.hero-grid { align-items: stretch; min-height: inherit; }
.hero-copy { align-self: center; padding-bottom: 48px; }
.hero-stage { align-items: flex-start; padding-top: clamp(96px, 16vh, 160px); overflow: visible; }
.hero-device { margin-bottom: -60vh; }
@media (max-width: 899px) {
  .hero-full { min-height: 0; padding-top: 8px; }
  .hero-copy { padding-bottom: 0; }
  .hero-stage { padding-top: 78px; height: 58vh; height: 58svh; }
  .c-pr { left: -60px; top: 20%; } .c-next { right: -60px; top: 44%; }
}

/* Clip only at the hero's bottom (the close-up's edge), not at the sides. */
.hero-full { overflow: visible; overflow-y: clip; overflow-x: visible; }
.c-next { right: -40px; }
@media (max-width: 899px) {
  .c-pr { left: -14px; top: 22%; } .c-next { right: -14px; top: 46%; }
}

@media (max-width: 899px) { .c-pr { top: 7%; left: -14px; } .c-next { top: 15%; right: -14px; } }

/* ─── A realistic iPhone ───────────────────────────────────────────────────
 * Titanium frame (with light catching its edge), a thin black bezel, the
 * island, side buttons, a hint of glass. iPhone 15 Pro proportions.
 */
.device {
  border-radius: 58px; padding: 0;
  background: linear-gradient(140deg, #6b7079 0%, #2a2d33 18%, #4b4f57 45%, #1c1e22 70%, #5c6068 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 0 0 3px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.05),
    0 40px 80px var(--shadow), 0 12px 24px color-mix(in srgb, var(--shadow) 60%, transparent);
}
.device .phone {
  inset: 5px; border: 10px solid #000; border-radius: 53px;
  box-shadow: 0 0 0 1px #000;
}
/* The glass: a soft sheen across the screen. */
.device .phone::after {
  content: ''; position: absolute; inset: 0; z-index: 8; pointer-events: none; border-radius: 43px;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 28%, transparent 42%);
}
.device .phone::before { top: 11px; width: 96px; height: 28px; z-index: 9; } /* the island */
/* Side buttons: action + volume on the left, power on the right. */
.device::before, .device::after {
  content: ''; position: absolute; width: 4px; border-radius: 2px; z-index: 0;
  background: linear-gradient(90deg, #2a2d33, #6b7079 60%, #3b3e45);
}
.device::before {
  left: -3px; top: 17%; height: 26%;
  background:
    linear-gradient(to bottom, transparent 0 0, #50545c 0 12%, transparent 12% 24%, #50545c 24% 58%, transparent 58% 66%, #50545c 66% 100%);
}
.device::after { right: -3px; top: 27%; height: 15%; background: #50545c; }
.ph-time { font-variant-numeric: tabular-nums; }

/* ─── The hero phone, alive ─────────────────────────────────────────────── */
/* A notification drops in from the top now and then (main.js). */
.ph-notif {
  position: absolute; left: 10px; right: 10px; top: 8px; z-index: 7;
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 22px;
  background: color-mix(in srgb, var(--p-surface) 88%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  transform: translateY(-140%); opacity: 0;
  transition: transform 520ms cubic-bezier(0.2, 1.3, 0.4, 1), opacity 300ms;
}
.ph-notif.show { transform: translateY(34px); opacity: 1; }
.ph-notif img { width: 34px; height: 34px; border-radius: 9px; background: #0F1217; padding: 4px; flex: none; }
.ph-notif .n-text { min-width: 0; }
.ph-notif .n-top { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--p-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.ph-notif .n-title { font-weight: 600; font-size: 13px; color: var(--p-text); }
.ph-notif .n-body { font-size: 12.5px; color: var(--p-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The next workout breathes. */
.hero-device .ph-num.next { animation: next-pulse 2.2s ease-in-out infinite; }
@keyframes next-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--p-accent) 45%, transparent); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--p-accent) 0%, transparent); } }
/* The hero's rings fill on arrival. */
.hero-device .ring .fill { transition: stroke-dashoffset 1600ms var(--ease) 600ms; }
.hero-device:not(.alive) .ring .fill { stroke-dashoffset: 138 !important; }
/* Now and then the mascot hops on its perch. */
.hero-mascot.perch-hop .m-all { animation: hop 900ms cubic-bezier(0.3, 0, 0.3, 1) 1; }

/* Phones: the notifications bring the life — no chips over the small screen. */
@media (max-width: 899px) { .float-chip { display: none; } }

/* ─── Centered hero: the headline on top, the phone in the middle, stickers ─ */
.hero-center { flex-direction: column; justify-content: flex-start; align-items: center; text-align: center; padding-top: clamp(16px, 4vh, 48px); }
.hero-head { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; }
.hero-center .giant { font-size: min(11vw, 15vh, 168px); line-height: 0.86; }
.hero-center .lead { max-width: 640px; margin: clamp(12px, 2vh, 22px) auto 0; font-size: clamp(17px, 1.4vw, 21px); }
.hero-center .ctas { justify-content: center; margin-top: clamp(14px, 2.4vh, 24px); }
.hero-center .hero-stage {
  position: relative; width: 100%; display: flex; justify-content: center;
  padding-top: clamp(80px, 11vh, 120px); margin-top: clamp(8px, 2vh, 24px);
}
/* No hover tricks on the hero phone (it shrank); no blur: never scaled up. */
.hero-device:hover { transform: scale(var(--hz, 0.8)); }
.hero-mascot, .float-chip { will-change: auto; }
.device { will-change: auto; }

/* ─── Comic stickers ──────────────────────────────────────────────────────
 * Thick black ink, flat colours, a white sticker edge, a tilt, a gentle bob;
 * they lean toward the cursor (data-depth, main.js) and wiggle on hover.
 */
.stickers { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.sticker { position: absolute; pointer-events: auto; }
.st-in {
  transform: rotate(var(--tilt, 0deg)); animation: bob 5s ease-in-out infinite;
  filter:
    drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)
    drop-shadow(0 14px 16px rgba(0, 0, 0, 0.28));
  transition: transform 220ms var(--ease);
}
.st-in svg { display: block; width: 100%; height: auto; overflow: visible; }
@keyframes bob { 0%, 100% { transform: rotate(var(--tilt)) translateY(0); } 50% { transform: rotate(calc(var(--tilt) + 2deg)) translateY(-8px); } }
@keyframes wiggle { 0%, 100% { transform: rotate(var(--tilt)) scale(1.06); } 25% { transform: rotate(calc(var(--tilt) - 8deg)) scale(1.1); } 60% { transform: rotate(calc(var(--tilt) + 6deg)) scale(1.08); } }
/* Text stickers: a comic label in Barlow, black ink outline. */
.tsticker {
  font: 800 italic 26px/1 'Barlow Condensed', sans-serif; letter-spacing: 0.5px; padding: 10px 16px 9px;
  border: 4px solid #0F1217; border-radius: 14px; white-space: nowrap;
}
.t-black { background: #0F1217; color: #fff; border-color: #0F1217; }
.t-blue { background: #2F7BFF; color: #fff; }
/* Where they sit round the phone (centre ± the phone's half width + room). */
.s-dumbbell { width: 170px; left: calc(50% - 470px); top: 6%; --tilt: -14deg; }
.s-day1 { left: calc(50% - 330px); top: 40%; --tilt: -6deg; }
.s-kettlebell { width: 120px; left: calc(50% - 440px); top: 58%; --tilt: 10deg; }
.s-plate { width: 120px; left: calc(50% + 300px); top: 2%; --tilt: 12deg; }
.s-pr { width: 170px; left: calc(50% + 230px); top: 30%; --tilt: 8deg; z-index: 2; }
.s-locked { left: calc(50% + 330px); top: 62%; --tilt: -8deg; }
.s-shaker { width: 86px; left: calc(50% + 450px); top: 30%; --tilt: -10deg; }
.s-stopwatch { width: 100px; left: calc(50% - 560px); top: 30%; --tilt: -8deg; }
@media (max-width: 1180px) { .s-shaker, .s-stopwatch { display: none; } }
/* Phones: four small ones round the top of the phone. */
@media (max-width: 899px) {
  .s-kettlebell, .s-locked, .s-shaker, .s-stopwatch { display: none; }
  .s-dumbbell { width: 96px; left: 0; top: 8%; }
  .s-day1 { left: 4px; top: 30%; }
  .s-day1 .tsticker, .s-locked .tsticker { font-size: 18px; padding: 7px 11px 6px; border-width: 3px; }
  .s-plate { width: 74px; left: auto; right: 4px; top: 4%; }
  .s-pr { width: 108px; left: auto; right: -4px; top: 24%; }
}

/* ─── Liquid Glass (iOS 26): the notification ──────────────────────────── */
.ph-notif {
  left: 8px; right: 8px; top: 4px; gap: 10px; padding: 11px 13px 12px 11px; border-radius: 26px; align-items: center;
  background: color-mix(in srgb, var(--p-surface) 42%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.8) brightness(1.05); backdrop-filter: blur(22px) saturate(1.8) brightness(1.05);
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.65),
    inset 0 -1px 1px rgba(255, 255, 255, 0.12),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.35),
    0 10px 30px rgba(0, 0, 0, 0.22);
}
.ph-notif.show { transform: translateY(40px); }
.ph-notif .n-icon { width: 38px; height: 38px; border-radius: 10px; padding: 0; background: none; flex: none; }
.ph-notif .n-text { flex: 1; min-width: 0; text-align: left; }
.ph-notif .n-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ph-notif .n-title { font-weight: 600; font-size: 14px; color: var(--p-text); }
.ph-notif .n-time { font-size: 12px; color: var(--p-muted); flex: none; }
.ph-notif .n-body { font-size: 13.5px; color: var(--p-text); opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The centred hero: the phone whole (no crop) — it comes into view as you
 * scroll, stickers spread round its full height; its screen reads normally. */
.hero-center { overflow: visible; min-height: 0; padding-bottom: clamp(48px, 8vh, 96px); }
.hero-center .hero-device { margin-bottom: calc(699px * (var(--hz, 0.8) - 1)); text-align: left; }
.s-locked { top: 74%; }
.s-pr { top: 26%; }

/* Wide screens: the phone bigger, drawn at that size (zoom renders it crisp;
 * a transform would scale a smaller picture up and blur it). */
@media (min-width: 900px) {
  .hero-center .hero-device, .hero-center .hero-device:hover { transform: none; zoom: var(--hz, 1.2); margin: 0; }
  .s-day1 { left: calc(50% - 400px); }
  .s-pr { left: calc(50% + 270px); }
  .s-plate { left: calc(50% + 330px); }
  .s-locked { left: calc(50% + 360px); }
  .s-dumbbell { left: calc(50% - 500px); }
  .s-kettlebell { left: calc(50% - 470px); }
}

/* ─── Liquid Glass ─────────────────────────────────────────────────────────
 * Not frosted: clear (little blur), a thick bright rim that catches the
 * light top-left, inner light for its depth, a specular highlight that
 * follows the light (--lx/--ly, the cursor), and — in Chromium — refraction:
 * the backdrop bends through a lens at the edges (#lg-refract).
 */
.lg {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 55%, rgba(255, 255, 255, 0.08));
  -webkit-backdrop-filter: blur(3px) saturate(1.9) brightness(1.08) contrast(1.05);
  backdrop-filter: blur(3px) saturate(1.9) brightness(1.08) contrast(1.05);
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, 0.75),
    inset 1.5px 0 1px rgba(255, 255, 255, 0.35),
    inset 0 -1px 1px rgba(255, 255, 255, 0.2),
    inset 0 0 18px rgba(255, 255, 255, 0.10),
    inset 0 -14px 24px rgba(0, 0, 0, 0.10),
    0 12px 32px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.18);
}
html.lg-refract .lg {
  -webkit-backdrop-filter: url(#lg-refract) blur(2px) saturate(1.9) brightness(1.08);
  backdrop-filter: url(#lg-refract) blur(2px) saturate(1.9) brightness(1.08);
}
/* The rim: a gradient edge, brightest where the light hits. */
.lg::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; z-index: 2; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.45) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* The specular highlight, where the light is. */
.lg::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 90% at var(--lx, 22%) var(--ly, 0%), rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.06) 38%, transparent 60%);
  mix-blend-mode: soft-light;
}
.lg > * { position: relative; z-index: 3; }
/* Light mode: a touch more body so the glass reads on light screens. */
:root:not([data-theme='dark']) .lg { background: linear-gradient(160deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.22) 55%, rgba(255, 255, 255, 0.35)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .lg { background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 55%, rgba(255, 255, 255, 0.08)); } }
/* Tinted glass (the pinned action): the accent, still see-through. */
.lg.lg-tint { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 80%, #fff 20%), color-mix(in srgb, var(--accent) 70%, transparent)); }
/* The notification on glass: its own text colours win. */
.ph-notif.lg { background-color: transparent; }

/* Every phone: a fixed size (iPhone proportions) instead of an aspect ratio —
 * Safari applied zoom to the ratio's height twice and stretched it. */
.device { width: 340px; height: 699px; aspect-ratio: auto; max-width: none; }

/* Glass layers under the content (text nodes can't be lifted above them). */
.lg::before, .lg::after { z-index: -1; }
.lg > * { z-index: auto; }
/* The notification: denser glass over a busy screen, so it stays readable (as iOS does). */
.ph-notif.lg {
  background: linear-gradient(160deg, color-mix(in srgb, var(--p-surface) 70%, transparent), color-mix(in srgb, var(--p-surface) 50%, transparent));
  -webkit-backdrop-filter: blur(10px) saturate(1.9) brightness(1.06); backdrop-filter: blur(10px) saturate(1.9) brightness(1.06);
}
html.lg-refract .ph-notif.lg { -webkit-backdrop-filter: url(#lg-refract) blur(8px) saturate(1.9); backdrop-filter: url(#lg-refract) blur(8px) saturate(1.9); }

/* The tinted glass keeps its colour in light mode too (it lost to the light-glass rule). */
.cta-bar .pill.lg.lg-tint, :root .cta-bar .pill.lg.lg-tint {
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 88%, #fff 12%), color-mix(in srgb, var(--accent) 78%, transparent));
  color: var(--accent-ink);
}

/* The notification floats over the screen (the glass made it part of the
 * flow, pushing the app down and off to the side). */
.ph-notif.lg { position: absolute; left: 8px; right: 8px; top: 4px; }
/* No mascot on the phone for now: the phone sits higher, under the words. */
.hero-center .hero-stage { padding-top: clamp(20px, 4vh, 44px); }

/* ─── More stickers, up round the headline ────────────────────────────── */
.hero-head { width: 100%; }
.stickers-top { z-index: 1; }
.t-cyan { background: #22D3EE; color: #0F1217; }
.s-trophy { width: 104px; left: calc(50% - 520px); top: 8%; --tilt: -12deg; }
.s-flame { width: 84px; left: calc(50% + 430px); top: 4%; --tilt: 10deg; }
.s-bolt { width: 66px; left: calc(50% - 420px); top: 56%; --tilt: 14deg; }
.s-plus { left: calc(50% + 380px); top: 52%; --tilt: -9deg; }
.s-letsgo { width: 150px; left: calc(50% - 600px); top: 70%; --tilt: -6deg; }
/* The ones round the phone sit a little higher. */
.s-dumbbell { top: 0%; } .s-plate { top: -2%; } .s-pr { top: 18%; } .s-day1 { top: 30%; }
.s-stopwatch { top: 22%; } .s-kettlebell { top: 48%; } .s-locked { top: 60%; } .s-shaker { top: 24%; }
@media (max-width: 1180px) { .s-letsgo, .s-bolt { display: none; } .s-trophy { left: 8px; } .s-flame { left: auto; right: 8px; } .s-plus { left: auto; right: 0; } }
@media (max-width: 899px) {
  .s-trophy { width: 58px; left: -4px; top: 6%; }
  .s-flame { width: 48px; left: auto; right: -2px; top: 2%; }
  .s-plus { display: none; }
}

/* ─── A sticker collage, not two columns ───────────────────────────────────
 * Each sticker is placed by its centre, relative to the phone's edge
 * (--edge: half the phone's width); some sit in front of the phone, some are
 * tucked behind it, a few are slapped onto the headline.
 */
:root { --edge: calc(170px * var(--hz, 1)); }
.sticker { translate: -50% -50%; }
.hero-center .stickers { z-index: auto; }
.hero-center .hero-device { z-index: 5; }
.sticker.front { z-index: 7; }
.sticker.back { z-index: 3; }
@media (min-width: 900px) {
  /* Round the phone (top: from the top of the phone's area). */
  .s-dumbbell  { width: 200px; left: calc(50% - var(--edge) - 20px);  top: 120px; --tilt: -20deg; z-index: 7; }
  .s-plate     { width: 150px; left: calc(50% + var(--edge) - 10px);  top: 40px;  --tilt: 14deg;  z-index: 3; }
  .s-pr        { width: 200px; left: calc(50% + var(--edge) + 40px);  top: 300px; --tilt: 10deg;  z-index: 7; }
  .s-day1      {               left: calc(50% - var(--edge) - 170px); top: 330px; --tilt: -7deg; }
  .s-stopwatch { width: 120px; left: calc(50% - var(--edge) - 290px); top: 190px; --tilt: -10deg; }
  .s-kettlebell{ width: 150px; left: calc(50% - var(--edge) + 10px);  top: 560px; --tilt: 12deg;  z-index: 3; }
  .s-shaker    { width: 96px;  left: calc(50% + var(--edge) + 230px); top: 470px; --tilt: -12deg; }
  .s-locked    {               left: calc(50% + var(--edge) - 20px);  top: 700px; --tilt: -8deg;  z-index: 7; }
  .s-bolt      { width: 74px;  left: calc(50% - var(--edge) - 120px); top: 760px; --tilt: 16deg; }
  .s-letsgo    { width: 170px; left: calc(50% - var(--edge) - 300px); top: 560px; --tilt: -5deg; }
  /* On the headline: overlapping its words, as if slapped on. */
  .s-plus   { left: calc(50% + 300px); top: 110px; --tilt: -10deg; z-index: 2; }
  .s-trophy { width: 110px; left: calc(50% - 360px); top: 250px; --tilt: -14deg; z-index: 2; }
  .s-flame  { width: 86px;  left: calc(50% + 450px); top: 300px; --tilt: 12deg; }
  .s-shaker, .s-stopwatch, .s-letsgo, .s-bolt { display: block; }
}
@media (min-width: 900px) and (max-width: 1180px) {
  .s-stopwatch, .s-letsgo, .s-shaker { display: none; }
  .s-plus { left: calc(50% + 240px); } .s-trophy { left: calc(50% - 300px); } .s-flame { left: calc(50% + 380px); }
}
/* Phones: a few, overlapping the phone's corners. */
@media (max-width: 899px) {
  .s-letsgo, .s-bolt, .s-locked, .s-kettlebell, .s-shaker, .s-stopwatch, .s-plus { display: none; }
  .s-dumbbell { width: 100px; left: calc(50% - var(--edge) + 6px); top: 34px; }
  .s-plate    { width: 76px;  left: calc(50% + var(--edge) - 4px); top: 20px; }
  .s-pr       { width: 112px; left: calc(50% + var(--edge) - 10px); top: 120px; }
  .s-day1     { left: calc(50% - var(--edge) + 4px); top: 120px; }
  .s-trophy   { width: 58px; left: 34px; top: 40px; }
  .s-flame    { width: 48px; left: auto; right: 0; top: 30px; translate: 0 0; }
}

/* ─── Pictures, not text: nothing in the mock-ups or stickers is selectable ─ */
.device, .device *, .stickers, .stickers *, .mascot, .splash, .float-chip, .ph-notif, .logo, .giant + .stickers {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
img, svg { -webkit-user-drag: none; user-drag: none; }

@media (max-width: 899px) { .s-dumbbell, .s-plate, .s-pr, .s-day1 { z-index: 7; } }

/* Stickers: no hover reaction; each floats its own way (main.js sets
 * --dur, --amp, --dx, --rot and a start point per sticker, at random). */
.st-in {
  animation: bob var(--dur, 6s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes bob {
  0%, 100% { transform: rotate(var(--tilt)) translate(0, 0); }
  30% { transform: rotate(calc(var(--tilt) + var(--rot, 2deg))) translate(var(--dx, 3px), calc(var(--amp, 8px) * -0.6)); }
  65% { transform: rotate(calc(var(--tilt) - var(--rot, 2deg) * 0.5)) translate(calc(var(--dx, 3px) * -0.5), calc(var(--amp, 8px) * -1)); }
}

/* The kettlebell: only tucked behind the phone a little, mostly in view. */
@media (min-width: 900px) { .s-kettlebell { left: calc(50% - var(--edge) - 62px); width: 160px; } }

/* ─── Real screenshots in the phones (light / dark, with the page) ─────── */
.phone.shot-phone { padding: 0; background: #000; }
.phone.shot-phone::before { display: none; } /* the screenshot has its own island */
.phone .shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 43px; }
.phone .shot-d { display: none; }
:root[data-theme='dark'] .phone .shot-l { display: none; }
:root[data-theme='dark'] .phone .shot-d { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .phone .shot-l { display: none; }
  :root:not([data-theme='light']) .phone .shot-d { display: block; }
}
.phone.shot-phone .ph-notif { z-index: 7; }

/* ─── The logger, rebuilt from the app (Forsight's animated phone) ─────── */
.lgr { position: absolute; inset: 0; padding: 46px 12px 12px; display: flex; flex-direction: column; font-size: 12px; text-align: left; }
.lgr-top { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.lgr-ic { color: var(--p-text); display: flex; }
.lgr-name { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.lgr-name b { font-weight: 600; font-size: 13px; }
.lgr-name i { font: 800 italic 14px 'Barlow Condensed', sans-serif; color: var(--p-text); font-variant-numeric: tabular-nums; }
.lgr-strip { display: flex; gap: 6px; margin: 12px -12px 0 0; overflow: hidden; padding: 3px 0 3px 2px; }
.lgr-thumb { width: 52px; height: 39px; flex: none; border-radius: 8px; overflow: hidden; background: var(--p-raised); }
.lgr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lgr-thumb.on { box-shadow: 0 0 0 2px var(--p-bg), 0 0 0 4px var(--p-accent); }
.lgr-head { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.lgr-head h4 { flex: 1; margin: 0; font: 800 27px/0.9 'Barlow Condensed', sans-serif; text-transform: uppercase; }
.lgr-round { width: 34px; height: 34px; border-radius: 999px; background: var(--p-raised); display: flex; align-items: center; justify-content: center; color: var(--p-text); flex: none; }
.lgr-note { display: flex; align-items: center; gap: 5px; color: var(--p-muted); font-size: 11.5px; margin-top: 4px; }
.lgr-fs { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; height: 30px; padding: 0 10px 0 6px; border-radius: 999px; background: var(--p-raised); color: var(--p-muted); font-size: 11.5px; font-weight: 500; }
.lgr-fs b { color: var(--p-text); font: 800 15px 'Barlow Condensed', sans-serif; }
.lgr-fs em { color: var(--p-success); font-style: normal; font-weight: 600; font-size: 10.5px; }
.lgr-fs-ic { width: 20px; height: 20px; border-radius: 999px; background: var(--p-text); color: var(--p-bg); display: flex; align-items: center; justify-content: center; }
.lgr-cols, .lgr-row { display: grid; grid-template-columns: 30px 1fr 60px 54px 32px; gap: 6px; align-items: center; }
.lgr-cols { margin: 14px 4px 6px; color: var(--p-muted); font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.lgr-sets { gap: 6px; }
.lgr-row { background: var(--p-surface); border-radius: 999px; padding: 5px 5px 5px 6px; position: relative; }
.lgr-badge { width: 28px; height: 28px; border-radius: 999px; background: var(--p-raised); display: flex; align-items: center; justify-content: center; font: 800 15px 'Barlow Condensed', sans-serif; }
.lgr-row.warm .lgr-badge { color: #D98A00; }
.lgr-prev { color: var(--p-muted); font-size: 11px; }
.lgr-row .cell { height: 32px; border-radius: 999px; font-size: 17px; }
.lgr-row .box-check { width: 30px; height: 30px; }
.lgr-row .pr { right: -2px; top: -9px; }
.lgr-add { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; height: 36px; border-radius: 999px; background: var(--p-raised); font-weight: 600; font-size: 12.5px; }
/* The ticks play one after another (main.js fills in the reps first). */
.in .lgr-row:nth-child(1) .box-check::after, .in .lgr-row:nth-child(1) .box-check svg { animation-delay: 600ms; }
.in .lgr-row:nth-child(2) .box-check::after, .in .lgr-row:nth-child(2) .box-check svg { animation-delay: 1500ms; }
.in .lgr-row:nth-child(3) .box-check::after, .in .lgr-row:nth-child(3) .box-check svg { animation-delay: 2400ms; }
.in .lgr-row:nth-child(3) .pr { animation-delay: 2700ms; }
.in .lgr-row:nth-child(3) .burst i { animation-delay: 2750ms; }

/* Phones in sections and the gallery: scaled as one piece with a transform
 * (Safari's zoom scaled the frame but not its contents — the rebuilt logger
 * fell apart); the margins hand back the space the scaling frees. */
.split .device, .chapter .device {
  zoom: 1 !important; transform: scale(var(--pz, 1)); transform-origin: top center;
  margin: 0 calc(340px * (var(--pz, 1) - 1) / 2) calc(699px * (var(--pz, 1) - 1));
}
.gallery-phone .device, .gallery-phone .device[style] {
  zoom: 1 !important; transform: scale(var(--gz, 0.66)); transform-origin: top center;
  margin: 0 calc(340px * (var(--gz, 0.66) - 1) / 2) calc(699px * (var(--gz, 0.66) - 1));
}

/* ─── The hero's lower half: app cards over the phone's edges ─────────── */
.hero-card { position: absolute; z-index: 8; top: 0; left: 50%; }
.hero-card .chip-in { padding: 14px 22px 14px 14px; gap: 14px; border-radius: 22px; box-shadow: 0 24px 50px var(--shadow); animation: none; }
.hero-card .chip-in b { display: block; font-size: 16px; font-weight: 600; }
.hero-card .chip-in span:not(.chip-ico) { display: block; font-size: 14px; color: var(--muted); font-weight: 500; }
.hero-card .chip-ico { width: 40px; height: 40px; }
@media (min-width: 900px) {
  .hc-pr   { translate: calc(-1 * var(--edge) - 190px) calc(560px * var(--hz, 1)); }
  .hc-next { translate: calc(var(--edge) - 40px) calc(690px * var(--hz, 1)); }
  /* Stickers spread further down the phone. */
  .s-shaker { top: 640px; } .s-locked { top: 880px; } .s-bolt { top: 900px; }
  .s-letsgo { top: 720px; }
}
@media (max-width: 899px) { .hero-card { display: none; } }
/* Chapter 1 starts right after the hero (no empty screen in between). */
.chapter { min-height: 0; padding-top: clamp(48px, 8vh, 96px); }
.hero-card .chip-in { text-align: left; }
@media (min-width: 900px) { .s-locked { top: 520px; left: calc(50% + var(--edge) + 150px); } }
.in .ob-opt.on b { color: var(--p-bg); }

/* One medal at the phone's lower right. */
.s-medal { display: none; }
@media (min-width: 900px) {
  .s-medal { display: block; width: 120px; left: calc(50% + var(--edge) + 70px); top: calc(700px * var(--hz, 1)); --tilt: 10deg; z-index: 7; }
}

/* ─── Chapter 1: a deck of the first onboarding screens ───────────────────
 * Closed: stacked, a little askew. Hover (or tap): it fans out in an arc,
 * a label under each. Hover (or tap) a card: it lifts to the front.
 */
.chapter-deck { display: grid; gap: 28px; }
.chapter-deck .copy { max-width: 820px; }
.deck {
  --dz: 0.62; --cw: calc(340px * var(--dz)); --ch: calc(699px * var(--dz)); --gap: calc(var(--cw) * 0.82);
  position: relative; height: calc(var(--ch) + 110px); outline: none; cursor: pointer;
}
.deck-card {
  position: absolute; left: 50%; top: 24px; width: var(--cw); height: var(--ch); margin-left: calc(var(--cw) / -2);
  transform: translateX(calc(var(--i) * 7px)) translateY(calc(var(--i) * -4px)) rotate(calc(var(--i) * 2.2deg - 3deg));
  transition: transform 560ms cubic-bezier(0.2, 0.9, 0.25, 1.08), filter 300ms;
}
.deck-card .device { transform: scale(var(--dz)); transform-origin: top left; margin: 0; }
.deck-label {
  position: absolute; left: 0; right: 0; top: calc(100% + 18px); text-align: center; white-space: nowrap;
  font-weight: 600; font-size: 15px; color: var(--muted); opacity: 0; transform: translateY(-6px);
  transition: opacity 300ms, transform 300ms var(--ease);
}
.deck-label b { color: var(--accent); font: 800 18px 'Barlow Condensed', sans-serif; margin-right: 4px; }
/* Open: an arc of cards. */
.deck:hover .deck-card, .deck:focus-within .deck-card, .deck.open .deck-card {
  transform: translateX(calc(var(--o) * var(--gap))) translateY(calc(var(--a) * var(--a) * 9px)) rotate(calc(var(--o) * 6deg));
}
.deck:hover .deck-label, .deck:focus-within .deck-label, .deck.open .deck-label { opacity: 1; transform: none; transition-delay: 200ms; }
/* The card under the cursor (or tapped) lifts to the front. */
.deck .deck-card:hover, .deck .deck-card.picked {
  z-index: 20 !important;
  transform: translateX(calc(var(--o) * var(--gap))) translateY(-28px) rotate(0deg) scale(1.07);
}
.deck .deck-card:hover .deck-label, .deck .deck-card.picked .deck-label { color: var(--text); }
.deck-hint { text-align: center; color: var(--muted); font-size: 14px; font-weight: 500; margin: 0; }
.hint-tap { display: none; }
@media (hover: none) { .hint-hover { display: none; } .hint-tap { display: inline; } }
@media (max-width: 899px) { .deck { --dz: 0.46; --gap: calc(var(--cw) * 0.3); } .deck-label { font-size: 12px; } .deck-label b { font-size: 14px; } }
@media (max-width: 899px) { .deck.open .deck-label { opacity: 0; } .deck .deck-card.picked .deck-label { opacity: 1; } }

/* Chapter 1: the words centred above the deck. */
.chapter-deck .copy { margin: 0 auto; text-align: center; }
.chapter-deck .lift { margin-left: auto; margin-right: auto; }
.chapter-deck + * { }
#day1 .chapter-num { text-align: center; left: 0; }

/* ─── Chapter 1, layered: DAY 1 → the deck over its lower quarter → the
 * words over the phones' lower quarter. The deck fans out as it scrolls in
 * (--p, 0 closed … 1 open, from main.js). */
#day1 { padding-top: clamp(40px, 7vh, 80px); }
#day1 .chapter-num {
  position: relative; z-index: 0; text-align: center; left: 0; margin: 0;
  font-size: min(30vw, 34vh); line-height: 0.8; color: var(--text); letter-spacing: -2px;
}
#day1 .chapter-deck { display: block; position: relative; }
#day1 .deck {
  --p: 0; z-index: 1; height: calc(var(--ch) + 40px);
  margin-top: calc(min(30vw, 34vh) * -0.8 * 0.25); /* over DAY 1's lower quarter */
  cursor: default;
}
#day1 .deck-card {
  transform:
    translateX(calc(var(--i) * 7px * (1 - var(--p)) + var(--o) * var(--gap) * var(--p)))
    translateY(calc(var(--i) * -4px * (1 - var(--p)) + var(--a) * var(--a) * 9px * var(--p)))
    rotate(calc((var(--i) * 2.2deg - 3deg) * (1 - var(--p)) + var(--o) * 6deg * var(--p)));
  transition: transform 120ms linear;
}
#day1 .deck:hover .deck-card, #day1 .deck:focus-within .deck-card, #day1 .deck.open .deck-card { transform:
    translateX(calc(var(--i) * 7px * (1 - var(--p)) + var(--o) * var(--gap) * var(--p)))
    translateY(calc(var(--i) * -4px * (1 - var(--p)) + var(--a) * var(--a) * 9px * var(--p)))
    rotate(calc((var(--i) * 2.2deg - 3deg) * (1 - var(--p)) + var(--o) * 6deg * var(--p))); }
#day1 .deck .deck-card:hover, #day1 .deck .deck-card.picked {
  transform: translateX(calc(var(--o) * var(--gap) * var(--p))) translateY(-28px) rotate(0deg) scale(1.07);
  transition: transform 400ms cubic-bezier(0.2, 0.9, 0.25, 1.08);
}
#day1 .deck-label { display: none; }
/* The words, over the phones' lower quarter, on a fade so they read. */
#day1 .copy {
  position: relative; z-index: 2; max-width: none; margin: calc(var(--ch) * -0.25 - 40px) auto 0;
  padding: clamp(40px, 8vh, 90px) 24px 0; text-align: center;
  background: linear-gradient(to bottom, transparent, var(--surface) 38%);
}
#day1 .copy .big { max-width: 1000px; margin-left: auto; margin-right: auto; }
#day1 .copy p { max-width: 640px; margin-left: auto; margin-right: auto; }
@media (max-width: 899px) { #day1 .deck { --gap: calc(var(--cw) * 0.36); } }
#day1 .copy { padding-top: 0; margin-top: calc(var(--ch) * -0.27 - 40px); background: none; }
/* A fade behind the words, reaching up over the phones' lower part. */
#day1 .copy::before {
  content: ''; position: absolute; z-index: -1; left: -100vmax; right: -100vmax; top: -70px; bottom: 0;
  background: linear-gradient(to bottom, transparent 0, var(--surface) 110px);
}

/* Closed, the deck is already a small fan (a hand of cards, pivoting at the
 * bottom), opening into the wide arc as you scroll. */
#day1 .deck-card { transform-origin: 50% 100%; }
#day1 .deck-card, #day1 .deck:hover .deck-card, #day1 .deck:focus-within .deck-card, #day1 .deck.open .deck-card {
  transform:
    translateX(calc(var(--o) * 14px * (1 - var(--p)) + var(--o) * var(--gap) * var(--p)))
    translateY(calc(var(--a) * 6px * (1 - var(--p)) + var(--a) * var(--a) * 9px * var(--p)))
    rotate(calc(var(--o) * 5deg * (1 - var(--p)) + var(--o) * 6deg * var(--p)));
}

/* Alive: each card has its own opening (--p, sprung by main.js) and a little
 * sway (--sw) and bob (--sy) of its own. */
#day1 .deck-card, #day1 .deck:hover .deck-card, #day1 .deck:focus-within .deck-card, #day1 .deck.open .deck-card {
  transition: none;
  transform:
    translateX(calc(var(--o) * 14px * (1 - var(--p)) + var(--o) * var(--gap) * var(--p)))
    translateY(calc(var(--a) * 6px * (1 - var(--p)) + var(--a) * var(--a) * 9px * var(--p) + var(--sy, 0px)))
    rotate(calc(var(--o) * 5deg * (1 - var(--p)) + var(--o) * 6deg * var(--p) + var(--sw, 0deg)));
}
#day1 .deck .deck-card:hover, #day1 .deck .deck-card.picked {
  transform: translateX(calc(var(--o) * var(--gap) * var(--p))) translateY(-28px) rotate(0deg) scale(1.07);
  transition: transform 400ms cubic-bezier(0.2, 0.9, 0.25, 1.08);
}

/* The fan's angles: narrower on phones so the outer cards stay on screen. */
#day1 .deck { --rc: 5deg; --ro: 6deg; }
@media (max-width: 899px) { #day1 .deck { --rc: 3deg; --ro: 3.5deg; --gap: calc(var(--cw) * 0.27); } }
#day1 .deck-card, #day1 .deck:hover .deck-card, #day1 .deck:focus-within .deck-card, #day1 .deck.open .deck-card {
  transform:
    translateX(calc(var(--o) * 14px * (1 - var(--p)) + var(--o) * var(--gap) * var(--p)))
    translateY(calc(var(--a) * 6px * (1 - var(--p)) + var(--a) * var(--a) * 9px * var(--p) + var(--sy, 0px)))
    rotate(calc(var(--o) * var(--rc) * (1 - var(--p)) + var(--o) * var(--ro) * var(--p) + var(--sw, 0deg)));
}

/* Hover / tap: sprung by main.js — the card lifts (--l), straightens and grows;
 * its neighbours ease aside (--push). No idle floating. */
#day1 .deck-card, #day1 .deck:hover .deck-card, #day1 .deck:focus-within .deck-card, #day1 .deck.open .deck-card,
#day1 .deck .deck-card:hover, #day1 .deck .deck-card.picked {
  transition: none;
  transform:
    translateX(calc(var(--o) * 14px * (1 - var(--p)) + var(--o) * var(--gap) * var(--p) + var(--push, 0px)))
    translateY(calc((var(--a) * 6px * (1 - var(--p)) + var(--a) * var(--a) * 9px * var(--p)) * (1 - var(--l, 0)) - 30px * var(--l, 0)))
    rotate(calc((var(--o) * var(--rc) * (1 - var(--p)) + var(--o) * var(--ro) * var(--p)) * (1 - var(--l, 0))))
    scale(calc(1 + 0.16 * var(--l, 0)));
}

/* Chapter 1 fits one screen: DAY 1, the deck (sized to the height by main.js,
 * --dz) and the words all scale with the window's height. */
#day1 { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 5vh, 56px) 0; }
#day1 .chapter-num { font-size: min(24vw, 22vh); }
#day1 .deck { margin-top: calc(min(24vw, 22vh) * -0.8 * 0.25); height: calc(var(--ch) + 24px); }
#day1 .copy { margin-top: calc(var(--ch) * -0.27 - 24px); }
#day1 .copy .big { font-size: min(7vw, 6.2vh, 96px); }
#day1 .copy .eyebrow { margin-bottom: 6px; }
#day1 .copy p { margin-bottom: 0; }

/* Chapter 1 fills the screen: everything × --fit (main.js measures the free
 * room and grows DAY 1, the phones and the words together). */
#day1 { --fit: 1; padding: clamp(16px, 3vh, 40px) 0; }
#day1 .chapter-num { font-size: min(calc(min(24vw, 22vh) * var(--fit)), 38vw); }
#day1 .deck { margin-top: calc(min(calc(min(24vw, 22vh) * var(--fit)), 38vw) * -0.8 * 0.25); }
#day1 .copy .big { font-size: min(calc(min(7vw, 6.2vh, 96px) * var(--fit)), 9vw); }
#day1 .copy p { font-size: calc(19px * min(var(--fit), 1.35)); }
#day1 .copy .eyebrow { font-size: calc(15px * min(var(--fit), 1.3)); }

#day1 .deck, #day1 .deck-card { cursor: default; }

/* ─── Forsight: one tick, then the camera pulls back (forsight.js) ─────────
 * The board is drawn big (in em, --Z × its shown size) and only ever scaled
 * down, so it stays sharp; forsight.js moves the camera with the scroll.
 */
.fs-scroll { position: relative; height: 320vh; }
.fs-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.fs-cam { position: absolute; inset: 0; }
.fs-board {
  --Z: 4; position: absolute; left: 0; top: 0; transform-origin: 0 0; width: 34em; font-size: calc(16px * var(--Z));
  background: var(--surface); border-radius: 1.6em; padding: 1.4em 1.2em 1.3em; color: var(--text);
  box-shadow: 0 2em 4em var(--shadow);
}
.fs-head { display: flex; align-items: center; gap: 0.8em; margin: 0 0.3em 1.1em; }
.fs-head img { width: 4.4em; height: 3.3em; border-radius: 0.5em; object-fit: cover; }
.fs-head b { display: block; font: 800 2em/0.9 'Barlow Condensed', sans-serif; text-transform: uppercase; }
.fs-head span { color: var(--muted); font-size: 0.95em; }
.fs-cols, .fs-row { display: grid; grid-template-columns: 2.6em 1fr 5.6em 4.6em 3.2em; gap: 0.6em; align-items: center; }
.fs-cols { margin: 0 0.5em 0.5em; color: var(--muted); font-size: 0.72em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.fs-row { background: var(--bg); border-radius: 999px; padding: 0.4em 0.4em 0.4em 0.45em; margin-bottom: 0.5em; }
.fs-badge { width: 2.4em; height: 2.4em; border-radius: 999px; background: var(--raised); display: flex; align-items: center; justify-content: center; font: 800 1.3em/1 'Barlow Condensed', sans-serif; }
.fs-badge { font-size: 1em; }
.fs-prev { color: var(--muted); font-size: 0.95em; }
.fs-cell { height: 2.6em; border-radius: 999px; background: var(--raised); display: flex; align-items: center; justify-content: center; font: 700 1.55em/1 'Barlow Condensed', sans-serif; }
.fs-cell { font-size: 1.55em; height: 1.68em; }
.fs-check { width: 2.6em; height: 2.6em; border-radius: 999px; background: var(--off); position: relative; display: flex; align-items: center; justify-content: center; color: var(--bg); justify-self: end; }
.fs-check svg { width: 1.3em; height: 1.3em; position: relative; z-index: 1; }
.fs-check::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--text); transform: scale(var(--tick, 1)); }
.fs-row.live .fs-check { --tick: var(--t, 0); }
.fs-row.live .fs-check svg { opacity: var(--t, 0); transform: scale(calc(0.6 + 0.4 * var(--t, 0))); }
.fs-reps { position: relative; }
.fs-reps i { font-style: normal; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.fs-ghost { color: var(--muted); opacity: calc(1 - var(--r, 0)); }
.fs-real { opacity: var(--r, 0); }
.fs-last { position: relative; }
.fs-pr {
  position: absolute; right: -0.2em; top: -0.55em; z-index: 2; background: var(--success); color: var(--bg);
  font-weight: 700; font-size: 0.85em; padding: 0.15em 0.55em; border-radius: 999px; transform: scale(var(--pr, 0));
}
.fs-burst { position: absolute; right: 1.3em; top: 1.6em; width: 0; height: 0; }
.fs-burst i { position: absolute; width: 0.45em; height: 0.45em; margin: -0.225em; border-radius: 50%; background: var(--success);
  opacity: calc(var(--b, 0) * (1 - var(--b, 0)) * 4);
  transform: rotate(calc(var(--k) * 45deg)) translateY(calc(var(--b, 0) * -3.4em)); }
.fs-burst i:nth-child(1) { --k: 0; } .fs-burst i:nth-child(2) { --k: 1; } .fs-burst i:nth-child(3) { --k: 2; } .fs-burst i:nth-child(4) { --k: 3; }
.fs-burst i:nth-child(5) { --k: 4; } .fs-burst i:nth-child(6) { --k: 5; } .fs-burst i:nth-child(7) { --k: 6; } .fs-burst i:nth-child(8) { --k: 7; }
.fs-next {
  display: flex; align-items: center; gap: 0.55em; margin-top: 0.9em; padding: 0.7em 1em 0.7em 0.7em; border-radius: 999px;
  background: var(--raised); color: var(--muted); font-size: 1.05em; font-weight: 500;
  opacity: var(--n, 0); transform: translateY(calc((1 - var(--n, 0)) * 1em));
}
.fs-next b { color: var(--text); font: 800 1.45em/1 'Barlow Condensed', sans-serif; }
.fs-next em { color: var(--success); font-style: normal; font-weight: 600; }
.fs-spark { width: 1.9em; height: 1.9em; border-radius: 999px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; }
.fs-spark svg { width: 1.1em; height: 1.1em; }
/* The words: in once the camera has pulled back. */
.fs-copy {
  position: absolute; z-index: 2; left: max(24px, calc((100vw - 1320px) / 2 + 24px)); top: 50%; width: min(42vw, 560px);
  transform: translateY(calc(-50% + (1 - var(--c, 0)) * 30px)); opacity: var(--c, 0);
}
.fs-copy .big { font-size: min(6.4vw, 9vh, 104px); }
.fs-copy p:not(.eyebrow) { color: var(--muted); font-size: clamp(17px, 1.4vw, 21px); font-weight: 500; }
.fs-caption {
  position: absolute; left: 0; right: 0; bottom: 12vh; text-align: center; margin: 0; z-index: 2;
  font: 800 clamp(28px, 4vw, 52px)/1 'Barlow Condensed', sans-serif; text-transform: uppercase; opacity: var(--cap, 1);
}
@media (max-width: 899px) {
  .fs-copy { left: 24px; right: 24px; width: auto; top: 8vh; transform: translateY(calc((1 - var(--c, 0)) * 20px)); }
  .fs-copy .big { font-size: min(10vw, 6vh); }
}

/* Integrated: the board takes the page's colour; only the rows are cards. */
.fs-board { background: var(--bg); box-shadow: none; }
.fs-row { background: var(--surface); }
/* The check: spins in with a little overshoot (--spin) and draws its tick (--draw). */
.fs-row.live .fs-check { transform: rotate(calc(var(--spin, 0) * 1deg)) scale(calc(0.86 + 0.14 * var(--t, 0))); }
.fs-row.live .fs-check svg { opacity: 1; transform: none; }
.fs-row.live .fs-check svg path { stroke-dasharray: 24; stroke-dashoffset: calc(24 * (1 - var(--draw, 0))); }

/* Close up: only the check (and the PR). The rest of the board comes in, piece
 * by piece, as the camera pulls back (--rest 0 → 1, each with its own start). */
.fs-board > .fs-head { --d: 0; } .fs-board > .fs-cols { --d: 0.12; }
.fs-board > .fs-row:nth-of-type(1) { --d: 0.22; }
.fs-board > .fs-row:nth-of-type(2), .fs-board > .fs-row ~ .fs-row { --d: 0.32; }
.fs-board > .fs-head, .fs-board > .fs-cols, .fs-board > .fs-row {
  --in: clamp(0, calc((var(--rest, 0) - var(--d)) * 2.4), 1);
  opacity: var(--in); transform: translateY(calc((1 - var(--in)) * 0.8em));
}
.fs-last .fs-row { --in: clamp(0, calc((var(--rest, 0) - 0.4) * 2.4), 1); background: color-mix(in srgb, var(--surface) calc(var(--in) * 100%), transparent); }
.fs-last .fs-row > :not(.fs-check) { opacity: var(--in); transform: translateX(calc((1 - var(--in)) * -0.8em)); }

/* (the rows by position: they are all divs, so nth-of-type would miscount) */
.fs-board > .fs-cols + .fs-row { --d: 0.22; }
.fs-board > .fs-row + .fs-row { --d: 0.32; }

/* No dot before the tick starts drawing (its round line end). */
.fs-row.live .fs-check svg { opacity: clamp(0, calc(var(--draw, 0) * 25), 1); }

/* A shorter scroll through Forsight (was 320vh). */
.fs-scroll { height: 220vh; }

/* The burst: centred in the check. */
.fs-check .fs-burst { position: absolute; left: 50%; top: 50%; right: auto; width: 0; height: 0; z-index: 0; }
.fs-check svg { z-index: 2; }
.fs-check .fs-burst i { transform: rotate(calc(var(--k) * 45deg)) translateY(calc(var(--b, 0) * -3em)); }

/* The rows: no sliding (the spacing stays put) — each row's card grows from
 * left to right like a bar, its contents appearing once it has passed. */
.fs-board > .fs-head, .fs-board > .fs-cols, .fs-board > .fs-row { transform: none; }
.fs-row { background: none; position: relative; }
.fs-row::before {
  content: ''; position: absolute; inset: 0; border-radius: 999px; background: var(--surface); z-index: 0;
  clip-path: inset(0 calc((1 - var(--grow, 1)) * 100%) 0 0 round 999px);
}
.fs-row > * { position: relative; z-index: 1; }
.fs-board > .fs-row { opacity: 1; --grow: clamp(0, calc((var(--rest, 0) - var(--d)) * 2.4), 1); }
.fs-board > .fs-row > * { opacity: clamp(0, calc((var(--rest, 0) - var(--d) - 0.18) * 4), 1); }
.fs-last .fs-row { background: none; --grow: clamp(0, calc((var(--rest, 0) - 0.4) * 2.4), 1); }
.fs-last .fs-row > :not(.fs-check) { transform: none; opacity: clamp(0, calc((var(--rest, 0) - 0.58) * 4), 1); }

/* The row's contents pop in once its bar is done, one after another
 * (--j: their place in the row), each with a little overshoot. */
.fs-row > :nth-child(1) { --j: 0; } .fs-row > :nth-child(2) { --j: 1; } .fs-row > :nth-child(3) { --j: 2; }
.fs-row > :nth-child(4) { --j: 3; } .fs-row > :nth-child(5) { --j: 4; }
.fs-board > .fs-row > * {
  --x: clamp(0, calc((var(--rest, 0) - var(--d) - 0.42 - var(--j) * 0.045) * 14), 1);
  opacity: var(--x);
  transform: scale(calc(0.5 + 0.5 * var(--x) + 0.28 * sin(var(--x) * 180deg)));
}
.fs-last .fs-row > :not(.fs-check) {
  --x: clamp(0, calc((var(--rest, 0) - 0.82 - var(--j) * 0.045) * 14), 1);
  opacity: var(--x);
  transform: scale(calc(0.5 + 0.5 * var(--x) + 0.28 * sin(var(--x) * 180deg)));
}
/* The last row a touch earlier, so its contents are all in by the end. */
.fs-last .fs-row { --grow: clamp(0, calc((var(--rest, 0) - 0.3) * 2.4), 1); }
.fs-last .fs-row > :not(.fs-check) { --x: clamp(0, calc((var(--rest, 0) - 0.73 - var(--j) * 0.045) * 14), 1); }

/* The contents pop up as the bar reaches them (--at: where each sits along
 * the row, 0 left … 1 right) — left to right, with the bar. */
.fs-row > :nth-child(1) { --at: 0.04; } .fs-row > :nth-child(2) { --at: 0.16; }
.fs-row > :nth-child(3) { --at: 0.66; } .fs-row > :nth-child(4) { --at: 0.8; } .fs-row > :nth-child(5) { --at: 0.93; }
.fs-board > .fs-row > *, .fs-last .fs-row > :not(.fs-check) {
  --x: clamp(0, calc((var(--grow, 0) - var(--at)) * 9), 1);
  opacity: var(--x);
  transform: scale(calc(0.5 + 0.5 * var(--x) + 0.28 * sin(var(--x) * 180deg)));
}

/* The column titles on exactly the rows' grid (same font size on the row, so
 * the em-sized columns match; the small type is on the labels), centred over
 * their fields. */
.fs-cols { font-size: 1em; margin: 0 0 0.5em; padding: 0 0.4em 0 0.45em; letter-spacing: 0; }
.fs-cols span { font-size: 0.72em; letter-spacing: 0.06em; }
.fs-cols span:nth-child(1) { text-align: center; }
.fs-cols span:nth-child(3), .fs-cols span:nth-child(4) { text-align: center; }

/* The bars as an even staircase: set 1 leads, set 2 a step behind, set 3 a
 * step behind that — all at the same speed. */
.fs-board > .fs-cols + .fs-row { --d: 0.2; }
.fs-board > .fs-row + .fs-row { --d: 0.28; }
.fs-last .fs-row { --grow: clamp(0, calc((var(--rest, 0) - 0.36) * 2.4), 1); }

/* "FORSIGHT", huge and faint, edge to edge behind it all; drifting a little
 * with the scroll. */
.fs-word {
  position: absolute; left: 0; top: 50%; z-index: 0; white-space: nowrap; pointer-events: none; user-select: none;
  font: 800 100px/0.8 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: -0.01em;
  color: var(--text); opacity: 0.06;
  transform: translate(calc((0.5 - var(--drift, 0)) * 4%), -50%);
}
.fs-cam, .fs-copy, .fs-caption { z-index: 1; }
.fs-copy { z-index: 2; }

/* The AI sparkles on the word (the app's sparkles icon), twinkling. */
.fs-word { opacity: 1; color: color-mix(in srgb, var(--text) 6%, transparent); }
.fs-stars {
  position: absolute; right: 0.02em; top: -0.32em; width: 0.42em; height: 0.42em;
  color: var(--accent); opacity: 0.55;
}
.fs-stars path { transform-box: fill-box; transform-origin: center; animation: twinkle 2.6s ease-in-out infinite; }
.fs-stars .st-a { animation-delay: -0.9s; animation-duration: 2.1s; }
.fs-stars .st-b { animation-delay: -1.7s; animation-duration: 3s; }
@keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; } 50% { transform: scale(0.72) rotate(12deg); opacity: 0.55; } }

/* The word: fainter, bigger (past both edges), and only once it all unfolded. */
.fs-word {
  left: 50%; color: color-mix(in srgb, var(--text) 3.5%, transparent);
  opacity: var(--word, 0);
  transform: translate(calc(-50% + (0.5 - var(--drift, 0)) * 4%), -50%) scale(calc(0.96 + 0.04 * var(--word, 0)));
}
/* The whole word visible: no sideways drift past the edges. */
.fs-word { transform: translate(-50%, -50%) scale(calc(0.96 + 0.04 * var(--word, 0))); }
/* Stretched tall (like a poster headline): same width, about twice the height. */
.fs-word { transform: translate(-50%, -50%) scale(calc(0.96 + 0.04 * var(--word, 0)), calc((0.96 + 0.04 * var(--word, 0)) * 2.1)); }
/* In at its normal shape, then stretched until it fills the screen's height. */
.fs-word { transform: translate(-50%, -50%) scale(1, calc(1 + (var(--tall, 1) - 1) * var(--stretch, 0))); }

/* ─── Your plan: calm. A week strip; once, the missed workout hops on. ──── */
.calm { padding: clamp(80px, 14vh, 160px) 0; }
.calm-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .calm-grid { grid-template-columns: 0.9fr 1.1fr; gap: 72px; } }
.calm .big { font-size: min(5.2vw, 7vh, 84px); }
.week { position: relative; }
.wk-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.wk-day { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wk-name { color: var(--muted); font-weight: 600; font-size: 13px; }
.wk-slot {
  width: 100%; aspect-ratio: 0.62; border-radius: 18px; background: var(--surface); position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.wk-chip { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 0 6px; }
.wk-chip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.wk-chip b { font: 800 clamp(12px, 1.1vw, 15px)/1 'Barlow Condensed', sans-serif; text-transform: uppercase; text-align: center; }
.wk-tick { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 999px; background: var(--success); color: #fff; display: flex; align-items: center; justify-content: center; }
.wk-tick svg { width: 12px; height: 12px; }
.wk-day.missed .wk-slot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
.wk-miss { color: var(--muted); font-size: 11px; font-weight: 600; }
.wk-up { position: absolute; bottom: 10px; color: var(--accent); font-size: 11px; font-weight: 600; opacity: 0; transition: opacity 400ms 900ms; }
.week.in .wk-up { opacity: 1; }
.wk-day.next .wk-slot { transition: box-shadow 400ms 800ms; }
.week.in .wk-day.next .wk-slot { box-shadow: inset 0 0 0 2px var(--accent); }
/* The workout that moves: starts in Tuesday's slot, hops to Wednesday (main.js places it). */
.wk-move { position: absolute; left: 0; top: 0; pointer-events: none; }
.wk-move .wk-chip { padding: 0 6px; }

/* ─── Your plan: the plan bends, it doesn't break (plays once, plan.js) ─── */
.calm { padding: clamp(80px, 14vh, 150px) 0; }
.calm-head { display: grid; gap: 32px; align-items: end; margin-bottom: clamp(28px, 5vh, 48px); }
@media (min-width: 900px) { .calm-head { grid-template-columns: 1.2fr 1fr; gap: 64px; } }
.calm .big { font-size: min(5.6vw, 8vh, 92px); }
.calm .copy p:not(.eyebrow) { max-width: 520px; }
/* The cycle row, as on Today. */
.cycles { justify-self: end; }
.cy-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.cy-head b { font: 800 26px/1 'Barlow Condensed', sans-serif; text-transform: uppercase; }
.cy-head span { color: var(--muted); font-size: 13px; }
.cy-row { display: flex; gap: 10px; }
.cy { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 44px; }
.cy svg { width: 40px; height: 40px; overflow: visible; }
.cy span { font: 800 13px/1 'Barlow Condensed', sans-serif; }
.cy em { font-style: normal; font-size: 9px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.cy.now { background: var(--raised); border-radius: 14px; padding: 6px 0 5px; margin-top: -6px; }
.cy circle { fill: none; stroke-width: 4; }
.r-track { stroke: var(--raised); }
.cy.now .r-track { stroke: var(--off); }
.r-fill { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 113.1; stroke-dashoffset: 113.1; transform: rotate(-90deg); transform-origin: center; }
.r-now { stroke-dashoffset: calc(113.1 * (1 - var(--ring, 0.33))); transition: stroke-dashoffset 700ms var(--ease); }
.r-check { color: var(--accent); }
.cy.todo .r-track { stroke: var(--line); }

/* The week: big cards; the workouts are chips laid over them (plan.js moves them). */
.week { position: relative; }
.wk-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(6px, 1vw, 14px); }
.wk-day { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wk-name { color: var(--muted); font-weight: 600; font-size: 14px; }
.wk-slot {
  width: 100%; aspect-ratio: 0.72; border-radius: clamp(14px, 1.6vw, 22px); background: var(--surface); position: relative;
  box-shadow: inset 0 0 0 0 transparent; transition: background-color 500ms, box-shadow 500ms;
}
.wk-day.missed .wk-slot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
.wk-day.next .wk-slot { box-shadow: inset 0 0 0 2.5px var(--accent); }
.wk-note { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-size: 12px; font-weight: 600; color: var(--muted); opacity: 0; transition: opacity 400ms; }
.wk-day.missed .wk-note, .wk-day.next .wk-note { opacity: 1; }
.wk-day.next .wk-note { color: var(--accent); }
.wk-chips { position: absolute; inset: 0; pointer-events: none; }
.wk-chip {
  position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 0 clamp(6px, 0.8vw, 12px); will-change: transform;
}
.wk-chip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; }
.wk-chip b { font: 800 clamp(13px, 1.3vw, 19px)/1 'Barlow Condensed', sans-serif; text-transform: uppercase; text-align: center; }
.wk-tick {
  position: absolute; top: -8px; right: 2px; width: 24px; height: 24px; border-radius: 999px; background: var(--success); color: #fff;
  display: flex; align-items: center; justify-content: center; transform: scale(0); transition: transform 420ms cubic-bezier(0.3, 1.7, 0.5, 1);
}
.wk-tick svg { width: 14px; height: 14px; }
.wk-chip.done .wk-tick { transform: scale(1); }
/* The note at the end, in glass. */
.wk-toast {
  position: absolute; left: 50%; bottom: -76px; display: flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 12px 20px 12px 12px; border-radius: 999px; color: var(--text); font-size: 15px;
  opacity: 0; transform: translate(-50%, 20px) scale(0.96); transition: opacity 500ms var(--ease), transform 600ms cubic-bezier(0.2, 1.3, 0.4, 1);
}
.wk-toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.wk-toast b { font-weight: 600; }
.wk-toast-ico { width: 28px; height: 28px; border-radius: 999px; background: var(--success); color: #fff; display: flex; align-items: center; justify-content: center; }
.wk-toast-ico svg { width: 15px; height: 15px; }
.calm { padding-bottom: clamp(140px, 20vh, 220px); }

/* ─── Your plan: the week as a punch card (plan.js) ──────────────────────── */
.punch {
  position: relative; background: var(--surface); border-radius: 32px; padding: clamp(20px, 2.4vw, 32px) clamp(18px, 2.4vw, 36px) clamp(26px, 3vw, 40px);
  max-width: 1100px; margin: 0 auto; will-change: transform;
}
.pc-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: clamp(16px, 2.4vw, 28px); }
.pc-head b, .pc-head span:not(.pc-count) { font: 800 clamp(20px, 1.9vw, 28px)/1 'Barlow Condensed', sans-serif; text-transform: uppercase; }
.pc-sep { color: var(--muted); }
.pc-head span:nth-child(3) { color: var(--muted); }
.pc-count { margin-left: auto; color: var(--muted); font-size: 14px; font-weight: 600; }
.pc-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(6px, 1.2vw, 18px); }
.pc-day { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pc-name { color: var(--muted); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; }
.pc-slot {
  width: 100%; aspect-ratio: 1; border-radius: 50%; position: relative;
  border: 2px dashed var(--line); transition: border-color 500ms, box-shadow 500ms;
}
.pc-note { position: absolute; left: 0; right: 0; top: calc(100% + 8px); text-align: center; font-size: 12px; font-weight: 600; color: var(--muted); opacity: 0; transition: opacity 400ms; }
.pc-day.missed .pc-note, .pc-day.next .pc-note { opacity: 1; }
.pc-day.next .pc-slot { border: 2px solid var(--accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 14%, transparent); }
.pc-day.next .pc-note { color: var(--accent); }
.pc-marks { position: absolute; inset: 0; pointer-events: none; }
.pc-mark { position: absolute; left: 0; top: 0; will-change: transform; }
/* Pencilled in: the name in grey, a little hand-set. */
.pc-pencil {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--muted); font: 800 italic clamp(13px, 1.5vw, 22px)/0.95 'Barlow Condensed', sans-serif; letter-spacing: 0.04em;
  transition: opacity 400ms;
}
.pc-mark.stamped .pc-pencil, .pc-mark.gone .pc-pencil { opacity: 0; }
/* The ink stamp: comes down big, lands with a thud (plan.js sets --press 1 → 0). */
.pc-stamp {
  position: absolute; inset: -4%; width: 108%; height: 108%; color: var(--accent); overflow: visible;
  opacity: 0; transform: rotate(var(--tilt)) scale(calc(1 + var(--press, 1) * 0.9)) translateY(calc(var(--press, 1) * -30%));
  mix-blend-mode: multiply;
}
:root[data-theme='dark'] .pc-stamp { mix-blend-mode: normal; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .pc-stamp { mix-blend-mode: normal; } }
.pc-stamp text { fill: currentColor; font: 800 19px 'Barlow Condensed', sans-serif; letter-spacing: 1px; }
.pc-mark.stamped .pc-stamp { opacity: 0.92; }
/* Ink specks from the thud. */
.pc-splat { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.pc-splat i { position: absolute; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--accent); opacity: 0; }
.pc-mark.splat .pc-splat i { animation: speck 600ms cubic-bezier(0.2, 0.8, 0.3, 1) forwards; }
.pc-splat i:nth-child(1) { --x: 46px; --y: -30px; } .pc-splat i:nth-child(2) { --x: -50px; --y: -18px; } .pc-splat i:nth-child(3) { --x: 40px; --y: 38px; }
.pc-splat i:nth-child(4) { --x: -36px; --y: 42px; } .pc-splat i:nth-child(5) { --x: 6px; --y: -54px; } .pc-splat i:nth-child(6) { --x: -8px; --y: 56px; }
@keyframes speck { 0% { opacity: 0.9; transform: translate(0, 0) scale(1.2); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(0.4); } }
.punch .wk-toast { bottom: -82px; }

/* The rubber stamp itself (plan.js moves it): drops, presses, lifts away. */
.pc-tool {
  position: absolute; left: 0; top: 0; z-index: 5; width: 120px; pointer-events: none; opacity: 0;
  transform-origin: 50% 100%; filter: drop-shadow(0 14px 14px rgba(0, 0, 0, 0.25));
}
.pc-tool svg { display: block; width: 100%; height: auto; }
/* The print just appears at the impact (no zoom), at its own slight tilt. */
.pc-stamp { transform: rotate(var(--tilt)); transition: opacity 80ms; }

/* The cartoon print: a bold blue disc, white letters (no realistic ink holes). */
.pc-stamp { mix-blend-mode: normal !important; }
.pc-stamp text { fill: #fff; font: 800 18px 'Barlow Condensed', sans-serif; letter-spacing: 0.5px; }
.pc-mark.stamped .pc-stamp { opacity: 1; }
/* The tool's shadow on the card: grows and darkens as it comes down. */
.pc-tool { width: 140px; }
.pc-tool-shadow {
  position: absolute; left: 0; top: 0; z-index: 4; width: 120px; height: 30px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.35), transparent); opacity: 0;
}

/* The week's success: the count goes green, the card glows a moment, confetti. */
.pc-count { transition: color 400ms; }
.pc-count.win { color: var(--success); }
.punch.win { animation: win-glow 1400ms ease-out; }
@keyframes win-glow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 45%, transparent); } 100% { box-shadow: 0 0 0 22px color-mix(in srgb, var(--success) 0%, transparent); } }
.pc-confetti {
  position: absolute; z-index: 6; width: 9px; height: 14px; margin: -7px -4px; border-radius: 3px; pointer-events: none;
  animation: confetti 1500ms cubic-bezier(0.15, 0.7, 0.35, 1) forwards;
}
@keyframes confetti {
  0% { transform: translate(0, 0) rotate(0deg) scale(0.6); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 120px)) rotate(var(--rot)) scale(1); opacity: 0; }
}
.wk-toast.win .wk-toast-ico { background: var(--success); }
/* From above: the tool and its shadow are squares over the field. */
.pc-tool { transform-origin: 50% 50%; filter: none; }
.pc-tool-shadow { border-radius: 30%; background: rgba(0, 0, 0, 0.45); transform-origin: 50% 50%; }

/* Duolingo-style stamp: soft, no outlines; its shadow soft and round. */
.pc-tool-shadow { border-radius: 34%; background: rgba(15, 18, 23, 0.28); }
.pc-stamp text { font: 800 17px 'Barlow Condensed', sans-serif; letter-spacing: 0.6px; fill: #fff; }
.pc-splat i { background: #3D86FF; }

/* Round stamp: a round shadow. */
.pc-tool-shadow { border-radius: 50%; }

.punch { margin-bottom: 0; }
.calm { padding-bottom: clamp(80px, 14vh, 150px); }

/* The missed day: a rest-day moon inside its circle, and a bigger note. */
.pc-rest {
  position: absolute; left: 50%; top: 50%; width: 38%; height: 38%; color: var(--muted);
  transform: translate(-50%, -50%) scale(0.6) rotate(-20deg); opacity: 0;
  transition: opacity 500ms 150ms, transform 600ms 150ms cubic-bezier(0.2, 1.4, 0.4, 1);
}
.pc-day.missed .pc-rest { opacity: 0.7; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
.pc-note { font-size: clamp(14px, 1.2vw, 17px); font-weight: 600; top: calc(100% + 10px); }
.pc-day.missed .pc-slot { border-style: dashed; background: color-mix(in srgb, var(--muted) 7%, transparent); }

/* ─── Progress: one big chart, drawn once in view (progress.js) ─────────── */
.prog { padding: clamp(80px, 14vh, 150px) 0; }
.prog-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .prog-grid { grid-template-columns: 0.8fr 1.2fr; gap: 64px; } }
.prog .big { font-size: min(5.6vw, 8vh, 92px); }
.prog-big { display: grid; gap: 4px; margin-top: 28px; }
.pb-label { color: var(--muted); font-weight: 600; font-size: 15px; }
.pb-num { font: 800 28px/1 'Barlow Condensed', sans-serif; color: var(--muted); }
.pb-num b { font-size: clamp(72px, 8vw, 120px); line-height: 0.85; color: var(--text); font-variant-numeric: tabular-nums; }
.pb-gain { color: var(--success); font-weight: 600; font-size: 16px; opacity: 0; transition: opacity 500ms; }
.prog.done .pb-gain { opacity: 1; }
.chart { position: relative; height: clamp(260px, 42vh, 440px); }
.chart-svg { position: absolute; inset: 0 0 30px 0; width: 100%; height: calc(100% - 30px); overflow: visible; }
.chart-svg .grid line { stroke: var(--line); stroke-width: 1; }
.chart-svg .area { fill: url(#chartFade); }
.chart-svg .line { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.chart-svg .head { fill: var(--accent); }
.chart-svg .head-ring { fill: var(--accent); opacity: 0.25; }
.chart-pins { position: absolute; inset: 0 0 30px 0; pointer-events: none; }
.chart-pin { position: absolute; transform: translate(-50%, -50%) scale(0); transition: transform 420ms cubic-bezier(0.3, 1.7, 0.5, 1); }
.chart-pin.on { transform: translate(-50%, -50%) scale(1); }
.chart-pin i { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px var(--bg); }
.chart-pin span { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--success); color: var(--bg); font-weight: 700; font-size: 12px; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.chart-x { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; font-weight: 600; }
.prog-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: clamp(40px, 7vh, 72px); max-width: 720px; }
.prog-stats b { display: block; font: 800 clamp(44px, 5vw, 68px)/0.9 'Barlow Condensed', sans-serif; font-variant-numeric: tabular-nums; }
.prog-stats span { color: var(--muted); font-weight: 600; font-size: 14px; }

/* ─── Full-screen feature sections: the graphic is the hero ─────────────── */
.full {
  position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(40px, 7vh, 80px) 0;
}
.full > *:not(.bg-word) { position: relative; z-index: 1; }
/* The faint background word (fitted to the width and stretched to the height by main.js). */
.bg-word {
  position: absolute; left: 50%; top: 50%; z-index: 0; white-space: nowrap; pointer-events: none; user-select: none;
  font: 800 100px/0.8 'Barlow Condensed', sans-serif; text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 3.5%, transparent);
  opacity: 0; transform: translate(-50%, -50%) scale(1, 1);
  transition: opacity 700ms var(--ease), transform 1100ms cubic-bezier(0.2, 0.9, 0.2, 1);
}
.bg-word.on { opacity: 1; transform: translate(-50%, -50%) scale(1, var(--tall, 1)); }

/* Plan: a small headline above, the punch card big. */
.calm.full .calm-head { margin-bottom: clamp(20px, 4vh, 40px); }
.calm.full .big { font-size: min(4.4vw, 6.4vh, 72px); }
.calm.full .punch { max-width: 1320px; width: 100%; padding: clamp(24px, 3vw, 44px); }
.calm.full .pc-days { gap: clamp(8px, 1.6vw, 24px); }
.calm.full .pc-name { font-size: clamp(13px, 1.1vw, 16px); }
.calm.full .pc-head b, .calm.full .pc-head span:not(.pc-count) { font-size: clamp(24px, 2.4vw, 36px); }
.calm.full .pc-pencil { font-size: clamp(16px, 2vw, 30px); }
.calm.full .pc-stamp text { font-size: 18px; }

/* Progress: headline row on top, the chart across the width, the number inside it. */
.prog.full .prog-grid { grid-template-columns: 1fr; gap: clamp(16px, 3vh, 32px); }
.prog.full .copy { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.prog.full .copy .big { margin: 0; font-size: min(4.4vw, 6.4vh, 72px); }
.prog.full .copy p:not(.eyebrow) { margin: 0; max-width: 360px; }
.prog.full .copy .eyebrow { width: 100%; margin-bottom: -18px; }
.prog.full .chart { height: clamp(300px, 52vh, 600px); }
.prog.full .prog-big { position: absolute; left: 0; top: 0; z-index: 2; margin: 0; }
.prog.full .pb-num b { font-size: clamp(80px, 10vw, 150px); }
.prog.full .prog-stats { max-width: none; margin-top: clamp(20px, 4vh, 40px); }
/* Progress fits one screen: a slightly shorter chart, smaller totals. */
.prog.full .chart { height: clamp(240px, 42vh, 540px); }
.prog.full .prog-stats { margin-top: clamp(14px, 2.6vh, 32px); }
.prog.full .prog-stats b { font-size: clamp(36px, 4vw, 58px); }
/* The background words a little fainter. */
.bg-word { color: color-mix(in srgb, var(--text) 2.5%, transparent); }

/* ─── The streak: the app's bolt (chunky, extruded), 5 → 6 on the week's win ── */
.pc-head { align-items: center; }
.pc-streak {
  display: flex; align-items: center; gap: 6px; margin-left: 16px;
  opacity: 0; transform: scale(0.6); transform-origin: right center;
  transition: opacity 300ms, transform 600ms cubic-bezier(0.2, 1.5, 0.4, 1);
}
.punch.win .pc-streak { opacity: 1; transform: scale(1); transition-delay: 350ms; }
.sk-bolt { width: clamp(40px, 3.6vw, 54px); height: auto; overflow: visible; }
.sk-glow { filter: blur(3px); opacity: 0; transition: opacity 600ms 500ms; }
.punch.win .sk-glow { opacity: 0.45; }
.sk-white { opacity: 1; transition: opacity 500ms 700ms; }
.punch.win .sk-white { opacity: 0; }
.sk-shine { transform: skewX(-20deg) translateX(0); }
.punch.win .sk-shine { animation: sk-shine 900ms 1100ms ease-in-out forwards; }
@keyframes sk-shine { to { transform: skewX(-20deg) translateX(40px); } }
.punch.win .sk-bolt { animation: sk-strike 700ms 350ms cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes sk-strike { 0% { transform: translateY(-30px) rotate(-14deg) scale(0.4); } 100% { transform: none; } }
/* The number rolls 5 → 6. */
.sk-num { height: clamp(40px, 3.6vw, 54px); overflow: hidden; display: block; }
.sk-roll { display: flex; flex-direction: column; transition: transform 500ms cubic-bezier(0.3, 1.4, 0.5, 1) 1300ms; }
.sk-roll i { font: 800 clamp(40px, 3.6vw, 54px)/1 'Barlow Condensed', sans-serif; font-style: normal; color: var(--text); height: clamp(40px, 3.6vw, 54px); display: flex; align-items: center; }
.punch.win .sk-roll { transform: translateY(-50%); }
.sk-label { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; line-height: 1.1; letter-spacing: 0.04em; }

.pc-head .sk-label, .calm.full .pc-head .sk-label { font: 700 12px/1.1 'Barlow', sans-serif; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.pc-head .sk-num, .pc-head .sk-roll i { font-family: 'Barlow Condensed', sans-serif; }

/* The streak floats at the card's top right corner, outside it. */
.pc-streak.float {
  position: absolute; z-index: 6; top: -34px; right: -18px; margin: 0;
  background: var(--surface); border-radius: 999px; padding: 10px 22px 10px 14px; gap: 8px;
  box-shadow: 0 18px 40px var(--shadow);
  transform-origin: 70% 50%;
}
.punch.win .pc-streak.float { animation: sk-float 4.5s ease-in-out 1.6s infinite; }
@keyframes sk-float { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -7px; rotate: -1.5deg; } }
.pc-streak.float .sk-bolt, .pc-streak.float .sk-num, .pc-streak.float .sk-roll i { width: auto; height: clamp(48px, 4.2vw, 64px); }
.pc-streak.float .sk-bolt { width: clamp(48px, 4.2vw, 64px); }
.pc-streak.float .sk-roll i { font-size: clamp(48px, 4.2vw, 64px); }
/* Reached: little bolts burst out, and a glow ring pulses. */
.sk-zaps { position: absolute; left: 44px; top: 50%; width: 0; height: 0; pointer-events: none; }
.sk-zaps i { position: absolute; width: 20px; height: 20px; margin: -10px; color: #2F7BFF; opacity: 0; }
.sk-zaps i svg { width: 100%; height: 100%; display: block; }
.punch.win .sk-zaps i { animation: sk-zap 900ms cubic-bezier(0.15, 0.8, 0.3, 1) 1.25s forwards; }
@keyframes sk-zap {
  0% { opacity: 1; transform: rotate(var(--a)) translateX(0) rotate(calc(-1 * var(--a))) scale(0.3); }
  60% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) rotate(calc(-1 * var(--a) + 25deg)) scale(var(--s)); }
}
.sk-pulse { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.punch.win .sk-pulse { animation: sk-pulse 1.4s ease-out 1.3s 2; }
@keyframes sk-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, #2F7BFF 55%, transparent); } 100% { box-shadow: 0 0 0 26px color-mix(in srgb, #2F7BFF 0%, transparent); } }
.punch.win .sk-glow { opacity: 0.6; }

.pc-streak.float { right: clamp(-18px, calc((100vw - 1320px) / 2 - 18px), 8px); top: -38px; }

/* ─── The streak beside the card: freezes when a day is missed, comes back ── */
.plan-row { display: grid; gap: clamp(24px, 3vw, 48px); align-items: center; }
@media (min-width: 900px) { .plan-row { grid-template-columns: 1fr clamp(190px, 18vw, 280px); } }
.plan-row .punch { max-width: none; }
.streak-side { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ss-bolt { position: relative; width: clamp(110px, 11vw, 170px); }
.ss-bolt .sk-bolt { width: 100%; height: auto; display: block; overflow: visible; transition: filter 700ms var(--ease); }
.ss-bolt .sk-white { opacity: 0; }
.ss-bolt .sk-glow { opacity: 0.35; transition: opacity 600ms; }
.ss-num { height: clamp(80px, 8vw, 124px); overflow: hidden; margin-top: 4px; }
.ss-num .sk-roll i { font: 800 clamp(80px, 8vw, 124px)/1 'Barlow Condensed', sans-serif; height: clamp(80px, 8vw, 124px); justify-content: center; transition: color 600ms; }
.ss-label { color: var(--muted); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; }
.ss-status { position: relative; height: 24px; margin-top: 10px; width: 100%; }
.ss-status span { position: absolute; left: 0; right: 0; font-weight: 600; font-size: 15px; opacity: 0; transform: translateY(6px); transition: opacity 400ms, transform 400ms var(--ease); }
.ss-status .st-a { color: var(--accent); opacity: 1; transform: none; }
/* Frozen: icy, still, a frost mark over it. */
.sk-frost { position: absolute; right: -6%; top: -6%; width: 42%; height: 42%; color: #8FD3F4; opacity: 0; transform: scale(0.4) rotate(-40deg); transition: opacity 500ms, transform 700ms cubic-bezier(0.2, 1.5, 0.4, 1); }
.streak-side.frozen .sk-frost { opacity: 1; transform: none; }
.streak-side.frozen .sk-bolt { filter: grayscale(1) brightness(1.35) sepia(0.3) hue-rotate(160deg) saturate(1.6); animation: shiver 420ms ease-in-out 2; }
.streak-side.frozen .sk-glow { opacity: 0; }
.streak-side.frozen .sk-roll i { color: #7DB9DA; }
.streak-side.frozen .st-a { opacity: 0; transform: translateY(-6px); }
.streak-side.frozen .st-b { opacity: 1; transform: none; color: #5FA8CF; }
@keyframes shiver { 0%, 100% { transform: none; } 25% { transform: translateX(-3px) rotate(-2deg); } 75% { transform: translateX(3px) rotate(2deg); } }
/* Back on: thaw, the number rolls 5 → 6, little bolts burst, the glow pulses. */
.streak-side.win .sk-bolt { filter: none; animation: sk-strike 700ms cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.streak-side.win .sk-frost { opacity: 0; transform: scale(1.6) rotate(30deg); }
.streak-side.win .sk-glow { opacity: 0.7; }
.streak-side.win .sk-roll { transform: translateY(-50%); transition-delay: 450ms; }
.streak-side.win .sk-roll i { color: var(--text); }
.streak-side.win .st-a, .streak-side.win .st-b { opacity: 0; }
.streak-side.win .st-c { opacity: 1; transform: none; color: var(--accent); transition-delay: 600ms; }
.ss-bolt .sk-zaps { left: 50%; }
.ss-bolt .sk-zaps i { width: 26px; height: 26px; margin: -13px; }
.streak-side.win .sk-zaps i { animation: sk-zap 900ms cubic-bezier(0.15, 0.8, 0.3, 1) 300ms forwards; }
.ss-bolt .sk-pulse { inset: 10%; border-radius: 50%; }
.streak-side.win .sk-pulse { animation: sk-pulse 1.4s ease-out 350ms 2; }
.streak-side.win .sk-shine { animation: sk-shine 900ms 700ms ease-in-out forwards; }
.streak-side.win .ss-bolt { animation: sk-float 4.5s ease-in-out 1.6s infinite; }
@media (max-width: 899px) { .streak-side { flex-direction: row; gap: 16px; justify-content: center; } .ss-bolt { width: 72px; } }

/* The streak on top: in the head row, right of the headline, laid out sideways. */
.plan-row { grid-template-columns: 1fr !important; }
.calm-head { align-items: center; }
@media (min-width: 900px) { .calm.full .calm-head { grid-template-columns: 1fr auto; } }
.calm-head .streak-side { flex-direction: row; align-items: center; gap: clamp(12px, 1.6vw, 24px); text-align: left; justify-self: end; }
.calm-head .ss-bolt { width: clamp(84px, 8vw, 128px); }
.calm-head .ss-num { margin-top: 0; }
.calm-head .ss-text { display: flex; flex-direction: column; }
.calm-head .ss-status { margin-top: 6px; width: 220px; }
.calm-head .ss-status span { text-align: left; }
/* The bolt's glow: a real soft shadow round the whole bolt (Safari didn't blur the old layer). */
.ss-bolt .sk-bolt { filter: drop-shadow(0 6px 14px color-mix(in srgb, #2F7BFF 35%, transparent)); }
.streak-side.win .sk-bolt { filter: drop-shadow(0 0 18px color-mix(in srgb, #2F7BFF 60%, transparent)); }

/* ─── Freeze and break the ice ────────────────────────────────────────────
 * frozen: ice creeps up over the bolt from the bottom, frost spins in, a shiver.
 * cracking: white cracks draw across the ice. win: it shatters — shards fly,
 * the ice is gone, the bolt strikes back blue. */
.ss-bolt .sk-ice { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ice-rect { transform: translateY(0); transition: transform 1100ms cubic-bezier(0.3, 0.7, 0.2, 1); }
.streak-side.frozen .ice-rect { transform: translateY(-28px); }
.ice-cracks path { stroke-dasharray: 8; stroke-dashoffset: 8; transition: stroke-dashoffset 380ms ease-out; }
.streak-side.cracking .ice-cracks path { stroke-dashoffset: 0; }
.streak-side.cracking .ice-cracks path:nth-child(2) { transition-delay: 90ms; }
.streak-side.cracking .ice-cracks path:nth-child(3) { transition-delay: 160ms; }
.streak-side.cracking .ice-cracks path:nth-child(4) { transition-delay: 220ms; }
.streak-side.cracking .sk-bolt, .streak-side.cracking .sk-ice { animation: shiver 140ms ease-in-out 3; }
/* The bolt under the ice: muted, not hue-shifted (the ice does the colour). */
.streak-side.frozen .sk-bolt { filter: saturate(0.35) brightness(1.1); animation: shiver 420ms ease-in-out 1100ms 2; }
/* Shatter. */
.streak-side.win .sk-ice g:first-of-type, .streak-side.win .ice-cracks { opacity: 0; transition: opacity 120ms; }
.ice-shards { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.ice-shards i {
  position: absolute; width: 12px; height: 9px; margin: -4px -6px; opacity: 0;
  background: linear-gradient(135deg, #F2FBFF, #9AD6F2); clip-path: polygon(0 30%, 60% 0, 100% 70%, 30% 100%);
}
.streak-side.win .ice-shards i { animation: shard 800ms cubic-bezier(0.15, 0.8, 0.3, 1) forwards; }
@keyframes shard {
  0% { opacity: 1; transform: rotate(var(--a)) translateX(4px) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) translateY(26px) rotate(var(--r)) scale(0.6); }
}
.streak-side.win .sk-frost { transition-duration: 300ms; }

/* Snappy and flowing: quick moves with a springy finish. */
.ice-rect { transition: transform 620ms cubic-bezier(0.2, 1.25, 0.35, 1); }
.ice-cracks path { transition: stroke-dashoffset 200ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.streak-side.cracking .ice-cracks path:nth-child(2) { transition-delay: 50ms; }
.streak-side.cracking .ice-cracks path:nth-child(3) { transition-delay: 90ms; }
.streak-side.cracking .ice-cracks path:nth-child(4) { transition-delay: 130ms; }
.streak-side.cracking .sk-bolt, .streak-side.cracking .sk-ice { animation: shiver 90ms ease-in-out 3; }
.streak-side.frozen .sk-bolt { animation: shiver 260ms ease-in-out 600ms 1; }
.streak-side.frozen .sk-frost { transition: opacity 250ms, transform 450ms cubic-bezier(0.2, 1.6, 0.4, 1); }
.streak-side.win .ice-shards i { animation: shard 560ms cubic-bezier(0.1, 0.9, 0.25, 1) forwards; }
.streak-side.win .sk-bolt { animation: snap-back 520ms cubic-bezier(0.2, 1.8, 0.4, 1) both; }
@keyframes snap-back { 0% { transform: scale(0.82) rotate(-8deg); } 100% { transform: none; } }
.streak-side.win .sk-roll { transition: transform 380ms cubic-bezier(0.3, 1.6, 0.5, 1) 180ms; }
.streak-side.win .sk-zaps i { animation: sk-zap 620ms cubic-bezier(0.1, 0.9, 0.25, 1) 60ms forwards; }
.streak-side.win .sk-pulse { animation: sk-pulse 900ms ease-out 80ms 2; }
.streak-side.win .st-c { transition-delay: 250ms; }

/* ─── Unfreeze, Duolingo-style ─────────────────────────────────────────────
 * cracking: a beam of light strikes from above, rays turn behind, glowing
 *   cracks spread, sparks. burst: a white blob bursts out (the ice flies off
 *   as shards), a flash behind. win: the blob squashes and stretches, and the
 *   bolt springs out of it; the number pops. */
.ss-bolt { isolation: isolate; }
.ss-bolt > .sk-bolt, .ss-bolt > .sk-ice { position: relative; z-index: 2; }
.sb-flash, .sb-rays, .sb-beam, .sb-blob { position: absolute; pointer-events: none; }
.sb-flash { inset: -120%; z-index: 0; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, color-mix(in srgb, #9CC2FF 70%, transparent), color-mix(in srgb, #2F7BFF 25%, transparent) 45%, transparent 70%); }
.sb-rays { inset: -70%; z-index: 0; border-radius: 50%; opacity: 0; transform: scale(0.6);
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.55) 0deg 7deg, transparent 7deg 22deg);
  -webkit-mask: radial-gradient(closest-side, #000 25%, transparent 72%); mask: radial-gradient(closest-side, #000 25%, transparent 72%); }
.sb-beam { left: 50%; bottom: 45%; width: 22%; height: 260%; z-index: 1; transform: translateX(-50%) scaleY(0); transform-origin: 50% 100%; opacity: 0;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0)); filter: blur(2px); }
.sb-blob { left: 50%; top: 50%; width: 92%; height: 92%; z-index: 3; transform: translate(-50%, -50%) scale(0); overflow: visible;
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.9)); }
.sb-blob path { fill: #fff; }

/* 1 · cracking */
.streak-side.cracking .sb-beam { animation: beam 420ms cubic-bezier(0.2, 0.9, 0.2, 1) forwards; }
.streak-side.cracking .sb-rays { animation: rays-in 420ms ease-out forwards, rays-turn 4s linear infinite; }
.streak-side.cracking .ice-cracks { filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 3px #7FD8FF); }
.streak-side.cracking .ice-cracks path { stroke: #fff; stroke-width: 1.1; }
@keyframes beam { 0% { opacity: 0; transform: translateX(-50%) scaleY(0); } 40% { opacity: 1; } 100% { opacity: 0.85; transform: translateX(-50%) scaleY(1); } }
@keyframes rays-in { to { opacity: 1; transform: scale(1); } }
@keyframes rays-turn { to { rotate: 360deg; } }

/* 2 · burst */
.streak-side.burst .sb-beam { opacity: 0; transition: opacity 150ms; }
.streak-side.burst .sb-flash { animation: flash 700ms ease-out forwards; }
.streak-side.burst .sb-rays { animation: rays-out 600ms ease-out forwards, rays-turn 4s linear infinite; }
.streak-side.burst .sb-blob { animation: blob 620ms cubic-bezier(0.2, 1.4, 0.4, 1) forwards; }
.streak-side.burst .sb-blob path { animation: blob-morph 620ms ease-in-out forwards; }
.streak-side.burst .sk-ice, .streak-side.burst .sk-frost { opacity: 0; transition: opacity 80ms; }
.streak-side.burst .ice-shards i { animation: shard 620ms cubic-bezier(0.1, 0.9, 0.25, 1) forwards; }
.streak-side.burst .sk-bolt { opacity: 0; }
@keyframes flash { 0% { opacity: 0; transform: scale(0.5); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.2); } }
@keyframes rays-out { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes blob {
  0% { transform: translate(-50%, -50%) scale(0.3); }
  35% { transform: translate(-50%, -50%) scale(1.25, 1.1); }
  60% { transform: translate(-50%, -50%) scale(1.05, 0.8); }
  100% { transform: translate(-50%, -50%) scale(0.85, 1.15); }
}
@keyframes blob-morph {
  0% { d: path('M50 8 C74 8 92 26 92 50 C92 74 74 92 50 92 C26 92 8 74 8 50 C8 26 26 8 50 8 Z'); }
  40% { d: path('M52 4 C80 10 96 30 90 56 C84 80 70 94 46 92 C20 90 6 70 10 46 C14 20 30 2 52 4 Z'); }
  70% { d: path('M50 14 C76 6 96 36 88 58 C82 78 66 92 48 90 C24 86 4 74 12 50 C18 28 28 20 50 14 Z'); }
  100% { d: path('M50 2 C70 18 90 40 86 62 C82 82 66 94 50 94 C32 94 16 82 14 62 C10 40 30 18 50 2 Z'); }
}

/* 3 · win: the bolt springs out of the blob */
.streak-side.win .sb-blob { animation: blob-out 260ms ease-in forwards; transform: translate(-50%, -50%) scale(0.85, 1.15); }
@keyframes blob-out { to { transform: translate(-50%, -50%) scale(0.2, 1.6); opacity: 0; } }
.streak-side.win .sk-bolt { opacity: 1; animation: bolt-pop 640ms cubic-bezier(0.2, 1.7, 0.4, 1) both; }
@keyframes bolt-pop {
  0% { transform: scale(0.3, 1.5); }
  45% { transform: scale(1.18, 0.86); }
  70% { transform: scale(0.95, 1.06); }
  100% { transform: none; }
}
.streak-side.win .sk-ice, .streak-side.win .sk-frost, .streak-side.win .sb-beam, .streak-side.win .sb-rays { opacity: 0; }
.streak-side.win .sk-roll { transition: transform 420ms cubic-bezier(0.3, 1.7, 0.5, 1) 120ms; }
.streak-side.win .ss-num { animation: num-pop 520ms cubic-bezier(0.2, 1.7, 0.4, 1) 100ms both; }
@keyframes num-pop { 0% { transform: scale(0.6); } 100% { transform: none; } }

.streak-side.win .ice-shards i { animation: none; opacity: 0; }

.ss-bolt > .sk-ice { position: absolute; inset: 0; z-index: 3; }

/* The unfreeze in colour (it has to read on the light page too). */
.sb-rays { background: repeating-conic-gradient(from 0deg, color-mix(in srgb, #2F7BFF 45%, transparent) 0deg 7deg, transparent 7deg 22deg); }
.sb-beam { background: linear-gradient(to top, #6FA8FF, color-mix(in srgb, #2F7BFF 0%, transparent)); filter: blur(3px); }
.sb-flash { background: radial-gradient(closest-side, color-mix(in srgb, #2F7BFF 55%, transparent), color-mix(in srgb, #2F7BFF 22%, transparent) 45%, transparent 72%); }
.sb-blob path { fill: #CFE2FF; }
.sb-blob { filter: drop-shadow(0 0 10px #6FA8FF) drop-shadow(0 0 22px color-mix(in srgb, #2F7BFF 60%, transparent)); }
.streak-side.cracking .ice-cracks path { stroke: #2F7BFF; stroke-width: 1.3; }
.streak-side.cracking .ice-cracks { filter: drop-shadow(0 0 1.2px #fff) drop-shadow(0 0 3px #2F7BFF); }
.ice-shards i { background: linear-gradient(135deg, #E9F6FF, #7CC6EE); box-shadow: 0 0 0 1px color-mix(in srgb, #2F7BFF 30%, transparent); }
/* Sparks off the cracks (the little bolts, early and small). */
.streak-side.cracking .sk-zaps i { animation: sk-zap 520ms cubic-bezier(0.1, 0.9, 0.25, 1) 180ms forwards; }

/* ─── Unfreeze, driven frame by frame (unfreeze in plan.js) ─────────────── */
.streak-side.js-anim .sk-bolt, .streak-side.js-anim .ss-num, .streak-side.js-anim .sk-ice,
.streak-side.js-anim .sb-beam, .streak-side.js-anim .sb-rays, .streak-side.js-anim .sb-flash,
.streak-side.js-anim .sb-blob, .streak-side.js-anim .sk-frost { animation: none !important; transition: none !important; }
.sb-blob { width: 200%; height: 200%; transform: translate(-50%, -50%); filter: none; opacity: 1; }
.sb-blob .mb { fill: #BFD8FF; }
.sb-blob g { filter: url(#goo) drop-shadow(0 0 8px #6FA8FF); }
.ice-shards b {
  position: absolute; left: 0; top: 0; width: 14px; height: 10px; margin: -5px -7px;
  background: linear-gradient(135deg, #F2FBFF, #7CC6EE); clip-path: polygon(0 30%, 60% 0, 100% 70%, 30% 100%);
  box-shadow: 0 0 0 1px color-mix(in srgb, #2F7BFF 30%, transparent);
}

.streak-side.js-anim .sk-pulse { display: none; }
.streak-side.js-anim.win .sk-bolt { filter: drop-shadow(0 0 16px color-mix(in srgb, #2F7BFF 55%, transparent)) !important; }

/* ─── The streak pauses and recharges (no ice) ───────────────────────────── */
.ss-bolt { position: relative; }
.ss-bolt .sk-charge { position: absolute; left: 0; top: 0; z-index: 3; clip-path: inset(100% 0 0 0); filter: none; opacity: 0; }
.streak-side .sk-zaps, .streak-side .sk-pulse { z-index: 4; }
/* Paused: the bolt drains to grey and droops a little (springs set it in plan.js). */
.streak-side.paused .ss-bolt > .sk-bolt:not(.sk-charge) { filter: grayscale(1) brightness(1.15) opacity(0.6); }
.streak-side.paused .sk-roll i { color: var(--muted); }
.streak-side.paused .st-a { opacity: 0; transform: translateY(-6px); }
.streak-side.paused .st-b { opacity: 1; transform: none; color: var(--muted); }
.ss-bolt .sk-roll i, .ss-num .sk-roll i { transition: color 500ms; }

/* The fill is clipped inside the SVG (a wave rising), so its glow is never cut. */
.ss-bolt .sk-charge { clip-path: none !important; overflow: visible; }

.ss-bolt .sk-charge { filter: none !important; }

/* The bolt's glow as its own soft light behind it (Safari clipped the SVG's
 * drop-shadow to a box): calm normally, a burst when it's back on. */
.ss-bolt .sk-bolt, .streak-side.win .sk-bolt, .streak-side.js-anim.win .sk-bolt { filter: none !important; }
.streak-side.paused .ss-bolt > .sk-bolt:not(.sk-charge) { filter: grayscale(1) brightness(1.15) opacity(0.6) !important; }
.ss-glow {
  position: absolute; left: 50%; top: 52%; width: 150%; height: 150%; z-index: 0; pointer-events: none; border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.8); opacity: 0.45;
  background: radial-gradient(closest-side, color-mix(in srgb, #2F7BFF 55%, transparent), color-mix(in srgb, #2F7BFF 18%, transparent) 55%, transparent 100%);
  transition: opacity 500ms, transform 500ms;
}
.streak-side.paused .ss-glow { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
.streak-side.win .ss-glow { animation: glow-burst 1100ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@keyframes glow-burst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(1.6); }
  100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.9); }
}
.ss-bolt > .sk-bolt { position: relative; z-index: 2; }
.ss-bolt > .sk-charge { position: absolute; z-index: 3; }

.pb-num b { font-variant-numeric: tabular-nums; display: inline-block; min-width: 3.1ch; }

/* ─── Inside the app: a camera flight through the real screens (inside.js) ─ */
.ia { position: relative; height: 380vh; }
.ia-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.ia-cam { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
/* The screen at half its pixel size (sharp when shown up to 2× on a 1× screen). */
.ia-screen { position: relative; width: 603px; height: 1311px; border-radius: 76px; overflow: hidden; background: var(--bg); }
.ia-layer { position: absolute; inset: 0; }
.ia-shot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ia-d { display: none; }
:root[data-theme='dark'] .ia-l { display: none; } :root[data-theme='dark'] .ia-d { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .ia-l { display: none; } :root:not([data-theme='light']) .ia-d { display: block; } }
.ia-logger { transform: translateY(100%); box-shadow: 0 -30px 60px var(--shadow); }
/* The live tick on Full Body B's number (12.9 %, 49.5 % of the screen). */
.ia-tick { position: absolute; left: 12.9%; top: 49.5%; width: 9.2%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.ia-tick i { position: absolute; inset: 0; border-radius: 50%; }
.ia-cover { background: #FFFFFF; inset: -8% !important; opacity: 0; }
:root[data-theme='dark'] .ia-cover { background: #181C23; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .ia-cover { background: #181C23; } }
.ia-ring { border: 4px solid var(--success); color: var(--success); display: flex; align-items: center; justify-content: center; transform: scale(0); }
.ia-ring svg { width: 58%; height: 58%; }
/* The press on Start. */
.ia-press { position: absolute; left: 5%; right: 5%; top: 64.3%; height: 6.3%; border-radius: 999px; background: #000; opacity: 0; }
/* Forsight's chip, lit up. */
.ia-fs { position: absolute; left: 4.6%; top: 29.9%; width: 53.6%; height: 4.4%; border-radius: 999px; box-shadow: 0 0 0 0 transparent; }
/* The phone closes round the screen at the end. */
.ia-frame {
  position: absolute; left: -22px; top: -22px; width: calc(100% + 44px); height: calc(100% + 44px); border-radius: 96px; opacity: 0;
  background: linear-gradient(140deg, #6b7079 0%, #2a2d33 18%, #4b4f57 45%, #1c1e22 70%, #5c6068 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18), inset 0 0 0 12px #000, 0 60px 120px var(--shadow);
}
.ia-cam { width: 603px; height: 1311px; }
/* Captions: one at a time, in the app's display type. */
.ia-captions { position: absolute; z-index: 2; left: max(24px, calc((100vw - 1320px) / 2 + 24px)); top: 50%; transform: translateY(-50%); width: min(36vw, 520px); }
.ia-captions .eyebrow { margin-bottom: 14px; }
.ia-cap {
  position: absolute; left: 0; top: 28px; margin: 0; font: 800 min(5.4vw, 8vh, 92px)/0.88 'Barlow Condensed', sans-serif; text-transform: uppercase;
  opacity: 0; transform: translateY(24px);
}
@media (max-width: 899px) {
  .ia-captions { left: 24px; right: 24px; width: auto; top: auto; bottom: 10vh; transform: none; }
  .ia-cap { font-size: min(10vw, 6vh); position: absolute; top: 24px; }
}
@media (prefers-reduced-motion: reduce) { .ia { height: auto; } }

/* ─── The rebuilt screens (calc(1 * var(--u)) = 1pt of an iPhone, drawn at 3×) ─────────── */
.ia-cam { width: 1170px; height: 2532px; }
.ia-screen { --u: 3px; width: calc(390 * var(--u)); height: calc(844 * var(--u)); border-radius: calc(55 * var(--u)); background: var(--bg); color: var(--text); }
.ia-frame { left: calc(-14 * var(--u)); top: calc(-14 * var(--u)); width: calc(100% + calc(28 * var(--u))); height: calc(100% + calc(28 * var(--u))); border-radius: calc(69 * var(--u)); --u: 3px;
  box-shadow: inset 0 0 0 calc(1.5 * var(--u)) rgba(255, 255, 255, 0.18), inset 0 0 0 calc(9 * var(--u)) #000, 0 calc(40 * var(--u)) calc(90 * var(--u)) var(--shadow); }
.t-screen { position: absolute; inset: 0; background: var(--bg); font-family: 'Barlow', sans-serif; }
.t-screen * { position: absolute; margin: 0; }
.t-screen svg { overflow: visible; }
/* status bar */
.t-status { left: 0; right: 0; top: 0; height: calc(54 * var(--u)); }
.t-status b { left: calc(32 * var(--u)); top: calc(17 * var(--u)); font: 600 calc(17 * var(--u))/1 'Barlow', sans-serif; letter-spacing: calc(-0.01 * var(--u)); }
.t-island { left: calc(133 * var(--u)); top: calc(11 * var(--u)); width: calc(124 * var(--u)); height: calc(36 * var(--u)); border-radius: calc(18 * var(--u)); background: #000; }
.t-sig { right: calc(30 * var(--u)); top: calc(20 * var(--u)); width: calc(27 * var(--u)); height: calc(13 * var(--u)); border-radius: calc(4 * var(--u)); border: calc(1.3 * var(--u)) solid currentColor; opacity: 0.9; }
.t-sig::after { content: ''; position: absolute; inset: calc(1.6 * var(--u)); border-radius: calc(2 * var(--u)); background: currentColor; }
.t-sig::before { content: ''; position: absolute; right: calc(-4.5 * var(--u)); top: calc(3.5 * var(--u)); width: calc(2 * var(--u)); height: calc(5 * var(--u)); border-radius: 0 calc(1 * var(--u)) calc(1 * var(--u)) 0; background: currentColor; opacity: 0.5; }
/* header */
.t-title { left: calc(20 * var(--u)); top: calc(80 * var(--u)); font: 800 calc(30 * var(--u))/0.9 'Barlow Condensed', sans-serif; text-transform: uppercase; }
.t-streak { left: calc(227 * var(--u)); top: calc(82 * var(--u)); display: flex; align-items: center; gap: calc(3 * var(--u)); position: absolute; color: var(--accent); }
.t-streak svg { position: static; width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.t-streak b { position: static; font: 800 calc(30 * var(--u))/0.9 'Barlow Condensed', sans-serif; color: var(--text); }
.t-gym { left: calc(281 * var(--u)); top: calc(76 * var(--u)); width: calc(101 * var(--u)); height: calc(46 * var(--u)); border-radius: calc(999 * var(--u)); background: var(--text); color: var(--bg); display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--u)); }
.t-gym svg, .t-gym span { position: static; }
.t-gym svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); } .t-gym svg:last-child { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.t-gym span { font: 600 calc(15 * var(--u))/1 'Barlow', sans-serif; }
/* cycle row */
.t-cy { top: calc(142 * var(--u)); width: calc(44 * var(--u)); height: calc(70 * var(--u)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.t-cy .r, .t-cy b, .t-cy em, .t-now-bg { position: static; }
.t-cy .r { width: calc(36 * var(--u)); height: calc(36 * var(--u)); margin-top: calc(2 * var(--u)); }
.t-cy b { font: 800 calc(14 * var(--u))/1 'Barlow Condensed', sans-serif; margin-top: calc(5 * var(--u)); }
.t-cy em { font: 700 calc(8 * var(--u))/1 'Barlow', sans-serif; text-transform: uppercase; letter-spacing: calc(0.05 * var(--u)); color: var(--muted); font-style: normal; margin-top: calc(2 * var(--u)); }
.t-cy.now { width: calc(44 * var(--u)); }
.t-now-bg { position: absolute !important; inset: calc(-4 * var(--u)) calc(-2 * var(--u)) calc(-6 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--raised); }
.t-cy.now > :not(.t-now-bg) { position: relative; }
.t-cy.todo b { color: var(--muted); }
.r circle { fill: none; stroke-width: 3.2; }
.r .rt { stroke: var(--raised); }
.t-cy.todo .rt { stroke: var(--line); }
.r .rf { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 106.8; stroke-dashoffset: calc(106.8 * (1 - var(--f, 0))); transform: rotate(-90deg); transform-origin: 20px 20px; }
.r .rc { color: var(--accent); transform-box: fill-box; transform-origin: center; transform: scale(var(--c, 0)); }
.t-week { left: calc(20 * var(--u)); top: calc(228 * var(--u)); font: 400 calc(12 * var(--u))/1 'Barlow', sans-serif; color: var(--muted); }
.t-week .tw-n { position: relative; display: inline-block; }
/* this cycle */
.t-sec { left: calc(20 * var(--u)); top: calc(276 * var(--u)); font: 800 calc(26 * var(--u))/1 'Barlow Condensed', sans-serif; text-transform: uppercase; }
.t-sec span { position: static; color: var(--muted); margin-left: calc(6 * var(--u)); letter-spacing: calc(0.1 * var(--u)); }
.t-card { left: calc(18 * var(--u)); top: calc(318 * var(--u)); width: calc(364 * var(--u)); height: calc(228 * var(--u)); border-radius: calc(28 * var(--u)); background: var(--surface); }
.t-row { left: 0; right: 0; height: calc(60 * var(--u)); }
.t-num { left: calc(18 * var(--u)); top: calc(13 * var(--u)); width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
.t-num .r { position: absolute; inset: 0; width: 100%; height: 100%; }
.t-num i { inset: 0; display: flex; align-items: center; justify-content: center; font: 600 calc(15 * var(--u))/1 'Barlow', sans-serif; font-style: normal; color: var(--muted); }
.t-row.next .t-num .rt { stroke: var(--accent); stroke-width: 2.4; }
.t-row.next .t-num i { color: var(--accent); }
.t-row.todo .t-num .rt { stroke: var(--muted); stroke-width: 2.4; opacity: 0.7; }
.t-row .t-num .rf { stroke: var(--success); }
.t-row .t-num .rc { color: var(--success); }
.t-row.done .t-num { --f: 1; --c: 1; }
.t-row.done .t-num i { opacity: 0; }
.t-name { left: calc(62 * var(--u)); top: calc(8 * var(--u)); width: calc(140 * var(--u)); }
.t-name b { position: relative; display: block; font: 800 calc(22 * var(--u))/1 'Barlow Condensed', sans-serif; text-transform: uppercase; white-space: nowrap; }
.t-meta { position: relative !important; display: block; font: 400 calc(12 * var(--u))/1.2 'Barlow', sans-serif; color: var(--muted); margin-top: calc(3 * var(--u)) !important; }
.t-th { left: calc(192 * var(--u)); top: calc(4 * var(--u)); width: calc(156 * var(--u)); height: calc(52 * var(--u)); border-radius: calc(14 * var(--u)); background: var(--raised); }
.t-th img { top: calc(4 * var(--u)); width: calc(44 * var(--u)); height: calc(44 * var(--u)); object-fit: cover; border-radius: calc(8 * var(--u)); }
.t-th img:nth-child(1) { left: calc(4 * var(--u)); z-index: 3; } .t-th img:nth-child(2) { left: calc(32 * var(--u)); z-index: 2; } .t-th img:nth-child(3) { left: calc(60 * var(--u)); z-index: 1; }
.t-row:not(.done) .t-th img { filter: grayscale(1) opacity(0.55); }
.t-th span { right: calc(12 * var(--u)); top: calc(15 * var(--u)); font: 800 calc(20 * var(--u))/1 'Barlow Condensed', sans-serif; color: var(--muted); }
.t-start { left: calc(20 * var(--u)); top: calc(562 * var(--u)); width: calc(362 * var(--u)); height: calc(56 * var(--u)); border-radius: calc(999 * var(--u)); background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; }
.t-start span { position: static; font: 800 calc(21 * var(--u))/1 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: calc(0.03 * var(--u)); }
.t-tabs { left: calc(62 * var(--u)); top: calc(784 * var(--u)); width: calc(278 * var(--u)); height: calc(60 * var(--u)); border-radius: calc(999 * var(--u)); background: var(--surface); box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) var(--shadow); display: flex; align-items: center; justify-content: space-around; padding: 0 calc(8 * var(--u)); }
.t-tabs span { position: static; width: calc(56 * var(--u)); height: calc(46 * var(--u)); border-radius: calc(999 * var(--u)); display: flex; align-items: center; justify-content: center; color: var(--muted); }
.t-tabs span.on { background: var(--accent); color: #fff; }
.t-tabs svg { position: static; width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
/* the logger */
.ia-logger { transform: translateY(102%); box-shadow: 0 calc(-10 * var(--u)) calc(40 * var(--u)) var(--shadow); border-radius: calc(55 * var(--u)); }
.l-top { left: calc(20 * var(--u)); right: calc(20 * var(--u)); top: calc(64 * var(--u)); height: calc(40 * var(--u)); display: flex !important; align-items: center; justify-content: space-between; position: absolute; }
.l-top > * { position: relative; }
.l-top > span { width: calc(30 * var(--u)); height: calc(30 * var(--u)); display: flex; align-items: center; justify-content: center; font: 700 calc(20 * var(--u))/1 'Barlow', sans-serif; color: var(--muted); }
.l-top > span svg { position: static; width: calc(24 * var(--u)); height: calc(24 * var(--u)); color: var(--text); }
.l-top > span:last-child { width: auto; font-size: calc(20 * var(--u)); }
.l-top div { display: flex; flex-direction: column; align-items: center; }
.l-top div b { position: static; font: 600 calc(15 * var(--u))/1 'Barlow', sans-serif; }
.l-top div i { position: static; font: 800 italic calc(16 * var(--u))/1 'Barlow Condensed', sans-serif; margin-top: calc(3 * var(--u)); font-variant-numeric: tabular-nums; }
.l-strip { left: calc(17 * var(--u)); top: calc(128 * var(--u)); display: flex; gap: calc(12 * var(--u)); position: absolute; }
.l-th { position: relative !important; width: calc(60 * var(--u)); height: calc(46 * var(--u)); border-radius: calc(8 * var(--u)); overflow: hidden; flex: none; }
.l-th img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.l-th.on { box-shadow: 0 0 0 calc(2 * var(--u)) var(--bg), 0 0 0 calc(4 * var(--u)) var(--accent); }
.l-title { left: calc(20 * var(--u)); top: calc(196 * var(--u)); font: 800 calc(30 * var(--u))/0.9 'Barlow Condensed', sans-serif; text-transform: uppercase; }
.l-round { top: calc(202 * var(--u)); width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: 50%; background: var(--raised); display: flex; align-items: center; justify-content: center; font: 700 calc(16 * var(--u))/1 'Barlow', sans-serif; transform: translateX(-50%); }
.l-note { left: calc(40 * var(--u)); top: calc(236 * var(--u)); font: 400 calc(14 * var(--u))/1 'Barlow', sans-serif; color: var(--muted); }
.l-fs { left: calc(20 * var(--u)); top: calc(264 * var(--u)); height: calc(34 * var(--u)); border-radius: calc(999 * var(--u)); background: var(--raised); display: flex !important; align-items: center; gap: calc(6 * var(--u)); padding: 0 calc(12 * var(--u)) 0 calc(6 * var(--u)); font: 500 calc(13 * var(--u))/1 'Barlow', sans-serif; color: var(--muted); position: absolute; }
.l-fs > * { position: static; }
.l-fs-ic { width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: 50%; background: var(--text); color: var(--bg); display: flex; align-items: center; justify-content: center; }
.l-fs-ic svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.l-fs b { font: 800 calc(18 * var(--u))/1 'Barlow Condensed', sans-serif; color: var(--text); }
.l-fs em { font-style: normal; color: var(--success); font-weight: 600; font-size: calc(11 * var(--u)); }
.l-fs > svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); color: var(--muted); }
.l-cols { left: calc(20 * var(--u)); right: calc(20 * var(--u)); top: calc(316 * var(--u)); font: 600 calc(11 * var(--u))/1 'Barlow', sans-serif; text-transform: uppercase; letter-spacing: calc(0.05 * var(--u)); color: var(--muted); }
.l-cols span:nth-child(1) { left: calc(6 * var(--u)); } .l-cols span:nth-child(2) { left: calc(54 * var(--u)); } .l-cols span:nth-child(3) { left: calc(199 * var(--u)); } .l-cols span:nth-child(4) { left: calc(244 * var(--u)); }
.l-row { left: calc(20 * var(--u)); width: calc(350 * var(--u)); height: calc(50 * var(--u)); border-radius: calc(999 * var(--u)); background: var(--surface); }
.l-badge { left: calc(6 * var(--u)); top: calc(7 * var(--u)); width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: 50%; background: var(--raised); display: flex; align-items: center; justify-content: center; font: 800 calc(18 * var(--u))/1 'Barlow Condensed', sans-serif; }
.l-row.warm .l-badge { color: #D98A00; }
.l-prev { left: calc(54 * var(--u)); top: calc(18 * var(--u)); font: 400 calc(13 * var(--u))/1 'Barlow', sans-serif; color: var(--muted); }
.l-cell { top: calc(5 * var(--u)); height: calc(40 * var(--u)); border-radius: calc(999 * var(--u)); background: var(--raised); display: flex; align-items: center; justify-content: center; font: 700 calc(20 * var(--u))/1 'Barlow Condensed', sans-serif; color: var(--muted); }
.l-kg { left: calc(176 * var(--u)); width: calc(60 * var(--u)); }
.l-kg i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-style: normal; }
.l-kg .ghost { color: var(--muted); opacity: 0.6; }
.l-kg .real { color: var(--text); opacity: 0; transform: scale(0.4); }
.l-reps { left: calc(242 * var(--u)); width: calc(58 * var(--u)); }
.l-chk { left: calc(307 * var(--u)); width: calc(36 * var(--u)); height: calc(36 * var(--u)); top: calc(7 * var(--u)); }
.l-add { left: calc(20 * var(--u)); top: calc(586 * var(--u)); width: calc(350 * var(--u)); height: calc(46 * var(--u)); border-radius: calc(999 * var(--u)); background: var(--raised); display: flex !important; align-items: center; justify-content: center; gap: calc(6 * var(--u)); font: 600 calc(15 * var(--u))/1 'Barlow', sans-serif; position: absolute; }
.l-add svg { position: static; width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.ia-fs, .ia-tick, .ia-press, .ia-shot { display: none; }

/* Each screen its own layer: the logger always over Today. */
.ia-layer { z-index: 0; isolation: isolate; }
.ia-logger { z-index: 1; }
/* (the legal pages' .todo placeholder style must not reach the app screens) */
.t-screen .todo { background: none; padding: 0; border-radius: 0; font-weight: inherit; color: inherit; }
.t-row.todo { height: calc(60 * var(--u)); }
/* Not-done workouts: their pictures greyed but solid (they overlap). */
.t-row:not(.done) .t-th img { filter: grayscale(1) brightness(1.08) contrast(0.85); }
.l-row.warm .l-kg .real { transform: none; opacity: 1; }
/* Full Body A before its tick; B "up next", its ring pulsing. */
.t-row.rowA .t-num .rt { stroke: var(--muted); stroke-width: 2.4; opacity: 0.7; }
.t-row.rowA .t-num i { color: var(--muted); }
.t-up { color: var(--accent) !important; font-weight: 600 !important; }
.t-row.next .t-num { border-radius: 50%; box-shadow: 0 0 0 calc(var(--pulse, 0) * 7 * var(--u)) color-mix(in srgb, var(--accent) calc((1 - var(--pulse, 0)) * 45%), transparent); }
.ia { height: 300vh; }

/* Previews as in the app: 4:3 pictures, overlapping in a pill; done → blue check badges. */
.t-th { left: calc(190 * var(--u)); top: calc(5 * var(--u)); width: calc(158 * var(--u)); height: calc(52 * var(--u)); border-radius: calc(14 * var(--u)); background: var(--raised); }
.t-pic { top: calc(4 * var(--u)); width: calc(59 * var(--u)); height: calc(44 * var(--u)); border-radius: calc(8 * var(--u)); overflow: visible; }
.t-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: calc(8 * var(--u)); box-shadow: calc(-2 * var(--u)) 0 0 0 var(--raised); }
.t-pic:nth-child(1) { left: calc(4 * var(--u)); z-index: 3; } .t-pic:nth-child(2) { left: calc(32 * var(--u)); z-index: 2; } .t-pic:nth-child(3) { left: calc(60 * var(--u)); z-index: 1; }
.t-badge {
  right: calc(-3 * var(--u)); bottom: calc(-4 * var(--u)); width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: 50%;
  background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; z-index: 4;
  box-shadow: 0 0 0 calc(2 * var(--u)) var(--raised); transform: scale(var(--bd, 0));
}
.t-badge svg { position: static; width: 62%; height: 62%; }
.t-more { right: calc(12 * var(--u)); top: calc(15 * var(--u)); font: 800 calc(20 * var(--u))/1 'Barlow Condensed', sans-serif; color: var(--muted); }
.t-row:not(.done) .t-pic img { filter: grayscale(1) brightness(1.08) contrast(0.85); }

/* Exactly the app's ThumbPill: 56 × 42 cards with a 2pt ring in the pill's colour,
 * each tucked 30 under the one before; the pill padded 4. They slide out from
 * under the front card one by one (--add, from inside.js). */
.t-th { width: auto; right: calc(16 * var(--u)); left: auto; height: calc(54 * var(--u)); top: calc(3 * var(--u)); }
.t-pic {
  top: calc(4 * var(--u)); width: calc(60 * var(--u)); height: calc(46 * var(--u)); border-radius: calc(10 * var(--u));
  background: var(--raised); padding: calc(2 * var(--u)); box-sizing: border-box;
}
.t-pic img { position: absolute; left: calc(2 * var(--u)); top: calc(2 * var(--u)); width: calc(56 * var(--u)); height: calc(42 * var(--u)); inset: auto; box-shadow: none; }
.t-pic:nth-child(1) { left: calc(4 * var(--u)); z-index: 3; }
.t-pic:nth-child(2) { left: calc((4 + 30 * var(--add2, 1)) * var(--u)); z-index: 2; }
.t-pic:nth-child(3) { left: calc((4 + 60 * var(--add3, 1)) * var(--u)); z-index: 1; }
.t-more { right: calc(12 * var(--u)); opacity: var(--addm, 1); }
.t-th { width: calc(160 * var(--u)); }

/* The previews, cleanly: each card is the picture with a 2pt border in the
 * pill's colour (that border is the gap you see where they overlap), all
 * centred in the pill; the pill centred in the row. */
.ia .t-th { top: calc(3 * var(--u)); height: calc(54 * var(--u)); width: calc(160 * var(--u)); right: calc(14 * var(--u)); left: auto; border-radius: calc(14 * var(--u)); background: var(--raised); }
.ia .t-th .t-pic { top: calc(4 * var(--u)); width: calc(60 * var(--u)); height: calc(46 * var(--u)); padding: 0; background: none; border-radius: 0; }
.ia .t-th .t-pic img {
  position: absolute; left: 0; top: 0; right: auto; bottom: auto; inset: 0;
  width: 100%; height: 100%; box-sizing: border-box; object-fit: cover;
  border: calc(2 * var(--u)) solid var(--raised); border-radius: calc(10 * var(--u)); box-shadow: none;
}
.ia .t-th .t-more { top: 50%; right: calc(12 * var(--u)); transform: translateY(-50%); line-height: 1; }

.ia { height: 340vh; }

/* Logger: reps go in, the check fills (the text colour, a white tick), and the
 * exercise's preview gets its badge once all sets are done. */
.l-reps i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-style: normal; }
.l-reps .ghost { color: var(--muted); }
.l-reps .real { color: var(--text); opacity: 0; transform: scale(0.4); }
.l-chk { overflow: hidden; }
.l-chk .l-fill { position: absolute; inset: 0; border-radius: 50%; background: var(--text); transform: scale(var(--t, 0)); }
.l-chk svg { position: absolute; left: 22%; top: 22%; width: 56%; height: 56%; color: var(--bg); z-index: 1; }
.l-chk svg path { stroke-dasharray: 24; stroke-dashoffset: calc(24 * (1 - var(--d, 0))); }
.l-row { overflow: visible; }
.l-th { overflow: visible !important; }
.l-th img { border-radius: calc(8 * var(--u)); }
.l-done {
  position: absolute; right: calc(-5 * var(--u)); bottom: calc(-5 * var(--u)); width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: 50%;
  background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; z-index: 2;
  box-shadow: 0 0 0 calc(2 * var(--u)) var(--bg); transform: scale(var(--bd, 0));
}
.l-done svg { position: static; width: 62%; height: 62%; }

/* Re-rasterised when zoomed (no frozen layer): sharp up close. */
.ia-cam { will-change: auto; }
.ia { height: 420vh; }

.ia-vp { position: absolute; inset: 0; }

/* The captions stay inside their column (left of 42% of the window). */
@media (min-width: 900px) { .ia-captions { width: calc(42vw - 72px - max(24px, (100vw - 1320px) / 2 + 24px)); } .ia-cap { font-size: min(4.6vw, 8vh, 88px); } }

/* The section's eyebrow fades out with the last caption. */
.ia-captions .eyebrow { transition: opacity 200ms; }

/* ─── Smooth on iPad and iPhone ───────────────────────────────────────────
 * Things that move get their own layer (drawn once, then only moved — not
 * repainted every frame with their shadows); no snap point and no live blur
 * behind the navbar on touch screens. */
.sticker, .st-in, .fs-board, .ia-cam, .deck-card, .pc-mark, .device { will-change: transform; }
.st-in { backface-visibility: hidden; }
@media (hover: none) {
  .landing .top.scrolled { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface); }
}

/* Big drawings stay out of separate layers (a layer for a 3–4× drawing is
 * tens of megabytes on an iPad); only the small moving things get one. */
.fs-board, .ia-cam, .device, .deck-card { will-change: auto; }
@media (hover: none) {
  /* No live blur on touch devices: the glass becomes a calm, solid tint. */
  .lg, html.lg-refract .lg, .cta-bar .pill.lg, .landing .top.scrolled {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .cta-bar .pill.lg.lg-tint { background: var(--accent); }
  .lg::after { display: none; }
  /* The section headers' reveal: opacity only (no slide) — less to redraw while scrolling. */
  .reveal { transform: none; }
}

/* ─── Touch devices: nothing moves forever (each endless animation repaints
 * every frame on an iPad). The Mac keeps all of it. ─────────────────────── */
@media (hover: none) {
  /* Day 1's phones and the hero phone: lighter shadows. */
  .device { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), inset 0 0 0 3px rgba(0, 0, 0, 0.35), 0 18px 36px var(--shadow); }
  /* The mascots: no endless float, hop, blink or pulsing light. */
  .mascot .m-all, .mascot .m-eye, .mascot .m-spark, .mascot.hop .m-all { animation: none !important; }
  .pill .dot { animation: none; }
  .hero-full .hero-mascot::before { animation: none; }
}


/* Safari's toolbar shows and hides while scrolling; nothing is sized to it. */
.gallery-sticky { height: 100svh; }

/* ─── A phone on its side (html.land: wide, under ~520 px high) ──────────
 * The side-by-side layouts of the iPad and Mac, sized to the low height, and
 * less on screen: no body paragraphs, no floating pill, fewer stickers. */
html.land .cta-bar { display: none; }
html.land .copy p:not(.eyebrow), html.land .fs-copy p:not(.eyebrow), html.land .hero-head .lead { display: none; }
/* Hero: the words fill the first screen. */
html.land .hero-full { min-height: 0; padding-bottom: 32px; }
html.land .hero-full .giant { font-size: min(9vw, 21vh); }
html.land .stickers-top .s-plus, html.land .s-day1, html.land .s-plate, html.land .s-pr { display: none; }
/* Forsight: the words left, the list right. */
html.land .fs-copy {
  left: 24px; right: auto; top: 50%; width: 38vw;
  transform: translateY(calc(-50% + (1 - var(--c, 0)) * 30px));
}
html.land .fs-copy .big { font-size: min(5.2vw, 12vh); }
html.land .fs-caption { bottom: 8vh; font-size: min(7vw, 9vh); }
/* Inside the app: the captions left, the camera right. */
html.land .ia-captions { left: 24px; right: auto; top: 50%; bottom: auto; width: 36vw; transform: translateY(-50%); }
html.land .ia-cap { font-size: min(4.6vw, 11vh); top: 20px; }
/* Day 1 and the sections fit the low screen with less air. */
html.land .chapter, html.land #day1 { padding-top: 16px; padding-bottom: 16px; }
html.land #day1 .copy .big { font-size: min(5vw, 11vh); }
/* No floating pill here, so the hero keeps its own buttons. */
html.land .hero-ctas { display: flex; justify-content: center; margin-top: 16px; }
html.land .final .giant { font-size: min(9vw, 20vh); }
html.land .final .mascot-btn { width: min(110px, 18vh); }
/* Your plan: the streak beside the headline, the card narrower (lower). */
html.land .calm-head { grid-template-columns: 1.2fr 1fr; gap: 32px; margin-bottom: 14px; }
html.land .calm.full .punch { max-width: 56vw; margin-left: auto; margin-right: auto; padding: 18px 20px; }
html.land .calm.full, html.land .prog.full { padding-top: 20px; padding-bottom: 20px; }

/* ─── Phones upright: less is more ────────────────────────────────────────
 * Headlines big and in your face (filling the width, as on the iPad), the
 * body paragraphs left out, no floating pill over the content. */
@media (max-width: 600px) {
  .cta-bar { display: none; }
  .copy p:not(.eyebrow), .fs-copy p:not(.eyebrow), .hero-head .lead, .final .lead { display: none; }
  /* Hero: the headline fills the width; one button under it. */
  .hero-full .giant { font-size: 19vw !important; line-height: 0.88; }
  .hero-ctas { display: flex; justify-content: center; margin-top: 18px; }
  .hero-ctas .pill:not(.accent) { display: none; }
  .stickers-top { display: none; }
  /* Section headlines: big. */
  main .big:not(.ia-cap) { font-size: 12.5vw !important; line-height: 0.92; }
  #day1 .copy .big { font-size: 11vw !important; }
  /* Your plan: the card's head on one line. */
  .punch .pc-head, .punch .pc-title { white-space: nowrap; }
  /* Privacy: just the four titles, two by two. */
  #privacy .grid4 { grid-template-columns: 1fr 1fr; gap: 10px; }
  #privacy .card { padding: 18px 16px; }
  #privacy .card h3 { margin: 0; font-size: 22px; line-height: 1; }
  #privacy .card p { display: none; }
}
/* Phones upright, the first screen: the words centred in it, the phone
 * peeking in under them; stickers spread round the words and the phone. */
@media (max-width: 600px) {
  .hero-full .hero-head { min-height: calc(50svh - 40px); display: flex; flex-direction: column; justify-content: center; position: relative; }
  .hero-center .hero-stage { margin-top: 0; padding-top: 34px; }
  .stickers-top { display: block; }
  .s-trophy { width: 54px; left: 34px; top: 6%; }
  .s-flame  { width: 44px; left: auto; right: 30px; top: 0%; translate: 0 0; }
  .s-dumbbell { width: 92px;  left: calc(50% - var(--edge) - 4px);  top: 30px; }
  .s-plate    { width: 70px;  left: calc(50% + var(--edge) + 2px);  top: -6px; }
  .s-day1     { left: calc(50% - var(--edge) + 2px); top: 200px; }
  .s-pr       { width: 100px; left: calc(50% + var(--edge) - 6px); top: 128px; }
}

/* The navbar (and its opened menu) above everything on the page. */
.landing > header.top, .top { position: relative; z-index: 60; }

/* Phones upright: Day 1's deck fans out like on the Mac (wide apart, tilted,
 * on an arc), all of it inside the card. */
@media (max-width: 600px) {
  #day1 .deck { --rc: 3deg; --ro: 5deg; --gap: calc(var(--cw) * 0.5); }
}

/* Phones upright: Forsight's board narrower, so the list is shown bigger. */
@media (max-width: 600px) {
  .fs-board { width: 24em; padding: 1.2em 0.9em 1.1em; }
  .fs-cols, .fs-row { grid-template-columns: 2.4em 1fr 4.4em 3.6em 3em; gap: 0.45em; }
}

/* The day notes ("Rest day", "Up next") on one line, centred under the day. */
.pc-note { left: 50%; right: auto; transform: translateX(-50%); white-space: nowrap; }
/* Phones upright: the card runs off the right edge, so Mon–Thu (the stamps
 * and the rest day) are shown big; the count sits beside the title. */
@media (max-width: 600px) {
  .calm-head .streak-side { justify-self: center; justify-content: center; }
  .calm-head .ss-status { width: 150px; }
  #plan .punch, .calm.full .punch { width: 168vw; max-width: none; margin-left: 0; margin-right: 0; padding-bottom: 48px; }
  .pc-count { margin-left: 14px; }
}

/* Upright (phones, an iPad on its end): Inside the app's captions on top,
 * the camera under them. */
@media (max-width: 899px) {
  html:not(.land) .ia-captions { top: calc(env(safe-area-inset-top, 0px) + 7vh); bottom: auto; }
  /* The app shows only under the captions (inside.js frames it there too). */
  html:not(.land) .ia-vp { clip-path: inset(28% 0 0 0); }
  html:not(.land) .ia { height: 280vh; }
  html:not(.land) .ia-cap { font-size: min(11vw, 6.5vh); }
}

/* The captions stacked in one cell under the eyebrow, so the block's height
 * includes them and it centres for real (they used to hang below it). */
.ia-captions { display: grid; grid-template-columns: 100%; }
.ia-captions .eyebrow { grid-row: 1; grid-column: 1; }
.ia-captions .ia-cap, html.land .ia-captions .ia-cap { position: relative; top: auto; left: auto; grid-row: 2; grid-column: 1; align-self: start; }

/* The navbar logo, a size smaller (it outweighed the page). */
.logo { gap: 8px; }
.logo .wordmark-svg { height: 23px; }
.logo .logo-mascot { width: 27px; }
@media (max-width: 600px) { .logo .wordmark-svg { height: 21px; } .logo .logo-mascot { width: 25px; } }

/* ─── The navbar: logo · links · (toggle · Coming soon · menu) ──────────── */
.top { justify-content: flex-start; flex-wrap: nowrap; }
.top .nav { margin-left: auto; }
.top-actions { display: flex; align-items: center; gap: 8px; margin-left: 8px; }
.nav-cta { height: var(--control); }
@media (max-width: 700px) {
  .top-actions { margin-left: auto; }
  .nav-cta { display: none; }
}

/* The light/dark switch: sun and moon trade places — one turns away and
 * shrinks, the other turns in with a little overshoot. */
.theme-toggle { position: relative; overflow: hidden; }
.theme-toggle svg {
  position: absolute; left: 50%; top: 50%; margin: -10px 0 0 -10px; display: block !important;
  transition: transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 240ms ease;
}
.theme-toggle .moon { opacity: 1; transform: none; }
.theme-toggle .sun { opacity: 0; transform: rotate(-120deg) scale(0.3); }
:root[data-theme='dark'] .theme-toggle .sun { opacity: 1; transform: none; }
:root[data-theme='dark'] .theme-toggle .moon { opacity: 0; transform: rotate(120deg) scale(0.3); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme-toggle .sun { opacity: 1; transform: none; }
  :root:not([data-theme='light']) .theme-toggle .moon { opacity: 0; transform: rotate(120deg) scale(0.3); }
}
/* While switching, the page's colours blend over instead of snapping. */
html.theme-anim, html.theme-anim body, html.theme-anim *:not(svg *) {
  transition-property: background-color, color, border-color, box-shadow !important;
  transition-duration: 360ms !important; transition-timing-function: ease !important;
}
html.theme-anim .theme-toggle svg { transition: transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 240ms ease !important; }
@media (prefers-reduced-motion: reduce) { .theme-toggle svg { transition: none; } }

/* ─── The landing's navbar stays at the top ───────────────────────────────
 * Pinned; slides away while scrolling down, back as soon as you scroll up;
 * once scrolled it gets a full-width backing (glass on desktop, solid on
 * touch). main.js sets .scrolled and .away. */
.landing > header.top {
  position: sticky; top: 0; z-index: 60;
  padding-top: 12px; padding-bottom: 12px; margin-bottom: 12px;
  transition: transform 320ms var(--ease);
}
.landing > header.top::before {
  content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: -100vmax; right: -100vmax;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent);
  opacity: 0; transition: opacity 220ms ease;
}
.landing > header.top.scrolled::before { opacity: 1; }
.landing > header.top.away:not(.open) { transform: translateY(-110%); }
@media (hover: none) {
  .landing > header.top::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); }
}
.progress { z-index: 70; }

/* ─── The companion (buddy.js; iPad and Mac) ─────────────────────────────── */
.buddy {
  position: absolute; z-index: 50; width: 64px; height: 64px; pointer-events: auto; cursor: pointer;
  -webkit-user-select: none; user-select: none;
}
.buddy.flying { position: absolute; transform-origin: 50% 100%; will-change: transform; }
.buddy-hop, .buddy-body { width: 100%; height: 100%; transform-origin: 50% 100%; }
.buddy-svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.22)); }
.buddy-svg .m-all { animation: none; }
/* Perched: a slow, small float of its own. */
.buddy:not(.flying) .buddy-hop { animation: buddy-bob 3.2s ease-in-out infinite; }
@keyframes buddy-bob { 0%, 100% { transform: scale(1, 1) rotate(-1.5deg); } 50% { transform: scale(1.03, 0.96) rotate(1.5deg); } } /* standing: it breathes, it doesn't hover */
.buddy:not(.flying) .buddy-hop.cheer { animation: buddy-cheer 700ms cubic-bezier(0.3, 0, 0.3, 1); }
@keyframes buddy-cheer { 0% { transform: none; } 35% { transform: translateY(-34px) rotate(-8deg); } 70% { transform: translateY(0) rotate(4deg); } 100% { transform: none; } }
.buddy-layer { position: fixed; inset: 0; z-index: 65; pointer-events: none; }
.buddy-layer .buddy { pointer-events: none; }
.buddy-beam { position: absolute; inset: 0; width: 100%; height: 100%; }
.buddy-probe { position: absolute; width: 0; height: 0; transform: translateY(calc(-1 * var(--up, 0px))); pointer-events: none; }
#day1 .d1-one { position: relative; display: inline-block; }
@media (max-width: 899px) { .buddy, .buddy-layer { display: none; } }

/* The finale: it melts into the big mascot. */
.buddy { transition: opacity 260ms ease; }
.buddy.merged { opacity: 0; pointer-events: none; }
.buddy.merged .buddy-hop { animation: none; transform: scale(1.8); transition: transform 300ms ease; }
/* Sections that stack their children (.full > *) must not pull it into the flow. */
.buddy, .full > .buddy { position: absolute !important; z-index: 50 !important; }