/* ditchd.app — one stylesheet for every page.
   Brand colours and fonts live here, in :root. Change them once and every page follows.
   The logo is the <img class="logo"> in each page's header (favicon-96.png); nowhere else. */

:root {
  /* brand: dark (default) */
  --bg: #0b0b0f;
  --bg-2: #101015;          /* alternate section band */
  --card: #16171c;
  --card-2: #1d1e24;
  --line: #2a2b32;
  --text: #f4f2ee;
  --muted: #a9a7a2;
  --accent: #ff8a3d;        /* campfire orange */
  --accent-2: #ffc94a;      /* ember yellow */
  --accent-text: #ff9b57;   /* accent used as text on --bg */
  --on-accent: #1a0d03;     /* text on an orange button */
  --glow: rgba(255, 138, 61, 0.18);
  --todo: #ffb44a;

  /* type */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* shape */
  --radius: 22px;
  --radius-sm: 14px;
  --gutter: 16px;
  --max: 1140px;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f8f5ef;
    --bg-2: #f1ece3;
    --card: #fffdf9;
    --card-2: #f6f1e8;
    --line: #e2dbcf;
    --text: #1b1916;
    --muted: #5e5952;
    --accent: #ff8a3d;
    --accent-2: #f2a516;
    --accent-text: #b4480b;
    --on-accent: #1a0d03;
    --glow: rgba(255, 138, 61, 0.22);
    --todo: #9a5b00;
    color-scheme: light;
  }
}

@media (min-width: 720px) { :root { --gutter: 28px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 var(--font-body);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 650; line-height: 1.08; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li { margin-bottom: .4em; }
b, strong { font-weight: 650; }
em.hi, .hi { color: var(--accent-text); font-style: normal; }
code { font: .88em/1.5 var(--font-mono); background: var(--card-2); border: 1px solid var(--line); border-radius: 8px; padding: 2px 6px; overflow-wrap: anywhere; }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--accent); color: var(--on-accent); padding: 10px 14px; border-radius: 10px; font-weight: 600; }
.skip:focus { left: 8px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.narrow { max-width: 780px; }
.section { padding-block: clamp(64px, 9vw, 108px); }
.section.tight { padding-block: clamp(40px, 6vw, 72px); }
.band { background: var(--bg-2); border-block: 1px solid var(--line); }
.center { text-align: center; }
.center .lede { margin-inline: auto; }

/* ---------- type helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 13px/1.2 var(--font-mono); letter-spacing: .04em;
  color: var(--accent-text); margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.h1 { font-size: clamp(44px, 8.4vw, 92px); letter-spacing: -0.035em; line-height: 1.0; }
.h2 { font-size: clamp(32px, 5vw, 56px); letter-spacing: -0.03em; }
.h3 { font-size: clamp(21px, 2.2vw, 25px); letter-spacing: -0.015em; line-height: 1.2; }
.lede { font-size: clamp(18px, 1.9vw, 21px); line-height: 1.55; color: var(--muted); max-width: 36em; margin-top: 20px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.mono { font-family: var(--font-mono); }
.section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head.center { margin-inline: auto; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 12px 22px; border-radius: 999px;
  font: 600 16px/1.2 var(--font-body); text-decoration: none; text-align: center;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 8px 30px -10px var(--accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, #fff); }
.btn-ghost { border-color: var(--line); color: var(--text); background: transparent; }
.btn-ghost:hover { border-color: var(--muted); }
.btn[aria-disabled="true"] { background: var(--card-2); color: var(--muted); box-shadow: none; pointer-events: none; }
.btn svg { width: 18px; height: 18px; flex: none; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.actions-note { margin-top: 14px; font-size: 14px; color: var(--muted); }

/* ---------- LAUNCH SWITCH ----------
   Before ditchd is on Google Play, every page shows "coming soon to google play" (.soon: a muted badge
   in place of each Play button, the header's pill and the "coming soon" lines) and hides the Play buttons (.live).
   On launch day, change the one selector below from .live to .soon. That's the whole switch:
   the Play buttons and links appear and the coming-soon badges go, on every page. (docs/roadmap.md "At launch") */
.live { display: none !important; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nw { white-space: nowrap; }

/* ---------- coming soon to google play: the Play button's shape, muted, and not a link ---------- */
.play-soon {
  display: inline-flex; align-items: center; gap: 14px; margin: 0;
  min-height: 62px; padding: 10px 28px 10px 22px; border-radius: 18px;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--card); color: var(--muted);
}
.play-soon svg.play { width: 28px; height: 28px; flex: none; color: var(--accent-text); opacity: .75; }
.play-soon .play-text { display: flex; flex-direction: column; align-items: flex-start; text-align: left; font: 700 21px/1.05 var(--font-display); letter-spacing: -0.02em; color: var(--text); }
.play-soon .play-text small { font: 500 12px/1.2 var(--font-mono); letter-spacing: .05em; color: var(--muted); margin-bottom: 3px; }
.header-soon { cursor: default; border-color: var(--line); color: var(--muted); background: transparent; white-space: nowrap; }
.header-soon:hover { transform: none; }
.center-form .join-note { text-align: center; }

/* ---------- google play button (styled in our colours; no third-party badge image) ---------- */
.join { margin-top: 32px; scroll-margin-top: 96px; }
.btn-play svg.play { width: 18px; height: 18px; }
.btn-play.big { min-height: 62px; padding: 10px 28px 10px 22px; gap: 14px; border-radius: 18px; }
.btn-play.big svg.play { width: 28px; height: 28px; }
.btn-play .play-text { display: flex; flex-direction: column; align-items: flex-start; text-align: left; font: 700 21px/1.05 var(--font-display); letter-spacing: -0.02em; }
.btn-play .play-text small { font: 500 12px/1.2 var(--font-mono); letter-spacing: .05em; opacity: .8; margin-bottom: 3px; }
.join-note { margin-top: 14px; font-size: 14px; color: var(--muted); }
.center-form { display: flex; flex-direction: column; align-items: center; }
.price-card .join { margin-top: 28px; }
.price-card .btn-play.big, .price-card .play-soon { width: 100%; justify-content: center; margin-top: 0; }
.price-card .join-note { text-align: center; }
@media (max-width: 480px) { .header-cta .long { display: none; } }

/* ---------- digby, the dino ---------- */
.digby { display: block; height: auto; }
.hero-digby { width: clamp(110px, 13vw, 150px); margin: 0 0 -6px auto; position: relative; z-index: 1; filter: drop-shadow(0 14px 24px rgba(0,0,0,.25)); }
.digby-card { display: grid; place-items: center; padding: clamp(28px, 5vw, 56px); background: radial-gradient(closest-side, var(--glow), transparent 75%); }
.digby-card img { width: min(100%, 360px); }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; padding: 0; list-style: none; }
.swatches li { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line); }
.mi img { width: 24px; height: auto; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.site-header .wrap { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 700 21px/1 var(--font-display); letter-spacing: -0.03em; margin-right: auto; }
.brand .logo { width: 34px; height: 34px; border-radius: 9px; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { text-decoration: none; color: var(--muted); font-size: 15px; padding: 8px 12px; border-radius: 999px; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); background: var(--card); }
.header-cta { min-height: 40px; padding: 8px 16px; font-size: 15px; }
.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary svg { width: 20px; height: 20px; }
.menu[open] summary { background: var(--card); }
.menu-panel { position: absolute; right: 0; top: calc(100% + 10px); width: min(280px, calc(100vw - 2 * var(--gutter))); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px; box-shadow: 0 20px 60px -20px rgba(0,0,0,.5); }
.menu-panel a { display: block; padding: 12px 14px; border-radius: 10px; text-decoration: none; }
.menu-panel a:hover, .menu-panel a[aria-current="page"] { background: var(--card-2); }
@media (max-width: 860px) {
  .nav { display: none; }
  .menu { display: block; }
}
@media (max-width: 380px) { .header-cta { display: none; } }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding-block: 56px 40px; color: var(--muted); font-size: 15px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.footer-grid h2 { font: 600 13px/1.2 var(--font-mono); letter-spacing: .04em; color: var(--text); margin-bottom: 14px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 10px; }
.footer-grid a { text-decoration: none; }
.footer-grid a:hover { color: var(--text); }
.wordmark { font: 700 26px/1 var(--font-display); letter-spacing: -0.03em; color: var(--text); margin-bottom: 12px; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }

/* ---------- hero ---------- */
.hero { position: relative; padding-block: clamp(56px, 9vw, 112px) clamp(56px, 8vw, 96px); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: auto -20% -40% auto; width: 900px; height: 900px; max-width: 160vw;
  background: radial-gradient(closest-side, var(--glow), transparent 70%);
  pointer-events: none; animation: flicker 6s ease-in-out infinite;
}
.hero-grid { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; grid-template-areas: "text digby" "text fig"; column-gap: clamp(32px, 6vw, 72px); align-items: center; }
.hero-text { grid-area: text; }
.hero-grid > .hero-digby-wrap { grid-area: digby; align-self: end; }
.hero-grid > .moments-fig { grid-area: fig; align-self: start; }
@media (max-width: 900px) {
  .hero { padding-top: 20px; }
  .hero-grid { grid-template-columns: 1fr; grid-template-areas: "digby" "text" "fig"; }
  .hero-grid > .moments-fig { margin-top: 44px; }
}
@keyframes flicker { 0%, 100% { opacity: .85; transform: scale(1); } 45% { opacity: 1; transform: scale(1.04); } 70% { opacity: .9; transform: scale(.99); } }

/* "moments": short illustrative lines, not app screenshots */
.moments { position: relative; display: grid; gap: 14px; }
.moment {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px;
  font: 15px/1.45 var(--font-mono); color: var(--muted);
  box-shadow: 0 24px 60px -36px rgba(0,0,0,.6);
}
.moment b { color: var(--text); font-weight: 600; }
.moment .dot { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-text); }
.moment .dot svg { width: 18px; height: 18px; }
.moments .moment:nth-child(2) { margin-left: clamp(0px, 4vw, 40px); }
.moments .moment:nth-child(3) { margin-left: clamp(0px, 2vw, 18px); }
.moments .moment:nth-child(4) { margin-left: clamp(0px, 6vw, 64px); }
@media (max-width: 900px) { .moments .moment { margin-left: 0 !important; } }

/* proof strip */
.proof { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: center; color: var(--muted); font-size: 15px; }
.proof span { display: inline-flex; align-items: center; gap: 8px; }
.proof svg { width: 18px; height: 18px; color: var(--accent-text); flex: none; }

/* big statement */
.statement { font: 600 clamp(26px, 3.8vw, 44px)/1.18 var(--font-display); letter-spacing: -0.025em; max-width: 22em; text-wrap: balance; }
.statement .dim { color: var(--muted); }
.cite { margin-top: 24px; color: var(--muted); font-size: 15px; }

/* ---------- cards & grids ---------- */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 2.6vw, 28px); display: flex; flex-direction: column; }
.card > * { flex: none; }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--muted); }
.card .icon { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 18px; background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent-text); }
.card .icon svg { width: 22px; height: 22px; }
.card .rate { display: block; margin-top: auto; padding-top: 16px; font: 500 13px/1.3 var(--font-mono); color: var(--accent-text); }
.tag { display: inline-block; font: 500 12px/1 var(--font-mono); letter-spacing: .03em; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); vertical-align: middle; margin-left: 6px; white-space: nowrap; }
.tag.coming { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); color: var(--accent-text); }

/* steps */
.steps { counter-reset: step; }
.step { position: relative; }
.step .num { font: 600 14px/1 var(--font-mono); color: var(--accent-text); margin-bottom: 22px; display: flex; align-items: center; gap: 10px; }
.step .num::after { content: ""; height: 1px; flex: 1; background: var(--line); }

/* split: text + aside */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.split.top { align-items: start; }
.split > *, .hero-grid > * { min-width: 0; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* checklist */
.checks { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.checks li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; margin: 0; }
.checks li::before { content: ""; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8a3d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }
.checks.x li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9a7a2' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E"); background-color: var(--card-2); }

/* ---------- years timeline ---------- */
/* the four rungs, used in the legend, the timeline and the features table */
.rung { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text); white-space: nowrap; }
.rung::before { content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--rung); }
.rung.pause { --rung: #e9d36a; }
.rung.puzzle { --rung: var(--accent-2); }
.rung.dinos { --rung: var(--accent); }
.rung.gone { --rung: #e2574c; }
.rung.open { --rung: var(--muted); }
.legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 36px; }
.legend p { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; color: var(--muted); font-size: 15px; line-height: 1.45; }
.legend .rung { display: flex; margin-bottom: 4px; font-size: 16px; }
.legend-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 0; }
.feature-row .legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feature-row .legend-5 { grid-template-columns: 1fr; gap: 0; margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); overflow: hidden; }
.feature-row .legend-5 p { display: grid; grid-template-columns: 140px 1fr; gap: 12px; align-items: baseline; border: 0; border-radius: 0; border-bottom: 1px solid var(--line); background: none; padding: 12px 16px; }
.feature-row .legend-5 p:last-child { border-bottom: 0; }
.feature-row .legend-5 .rung { margin: 0; }
.lex th[scope="row"] { min-width: 150px; }
.lex th .small { font-weight: 400; }
@media (max-width: 960px) { .legend, .legend-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .legend, .legend-5, .feature-row .legend, .feature-row .legend-5 { grid-template-columns: 1fr; } .feature-row .legend-5 p { grid-template-columns: 1fr; gap: 2px; } }
.years { list-style: none; padding: 0; margin: 0; position: relative; display: grid; gap: 0; max-width: 900px; }
.years::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(180deg, var(--accent-2), var(--accent) 45%, #e2574c 85%); opacity: .8; }
.years li { position: relative; margin: 0; padding: 0 0 26px 40px; display: grid; grid-template-columns: 130px 1fr; gap: 6px 24px; align-items: baseline; }
.years li:last-child { padding-bottom: 0; }
.years li::before { content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg-2); border: 2px solid var(--accent); }
.years li:first-child::before { background: var(--accent); box-shadow: 0 0 16px var(--accent); }
.years .yr { font: 700 clamp(22px, 2.4vw, 28px)/1.1 var(--font-display); letter-spacing: -0.02em; white-space: nowrap; }
.years .what { font-size: 16px; line-height: 1.55; color: var(--muted); }
.years .what b { color: var(--text); }
.years .what .rung, .lex .rung { display: inline; white-space: normal; text-decoration: underline 2px var(--rung); text-underline-offset: 4px; }
.years .what .rung::before, .lex .rung::before { display: none; }
@media (max-width: 620px) {
  .years li { grid-template-columns: 1fr; padding-left: 36px; }
}
.mini-note { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; }
.mini-note b { display: block; margin-bottom: 4px; }
.mini-note span { color: var(--muted); font-size: 15px; }
/* ---------- a day with ditchd ---------- */
.daylist { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; max-width: 900px; }
.daylist li { margin: 0; display: grid; grid-template-columns: 64px 38px 1fr; gap: 14px; align-items: start; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; color: var(--muted); }
.daylist li b { color: var(--text); }
.daylist .t { font: 600 16px/38px var(--font-mono); color: var(--accent-text); }
.daylist .dot { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent-text); }
.daylist .dot svg { width: 19px; height: 19px; }
.daylist li > span:last-child { padding-top: 6px; }
@media (max-width: 520px) {
  .daylist li { grid-template-columns: 38px 1fr; }
  .daylist .t { grid-column: 1 / -1; line-height: 1.2; }
  .daylist li > span:last-child { padding-top: 0; }
}
/* captions under illustrations */
figure { margin: 0; }
.caption { margin-top: 14px; font-size: 14px; color: var(--muted); line-height: 1.5; }
.moments-fig .caption { padding-left: 4px; }
/* list with an icon per item (rewards) */
.icon-mini > div { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.icon-mini .mi { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent-text); }
.icon-mini .mi svg { width: 20px; height: 20px; }
.icon-mini p { margin: 0; }
.icon-mini p span { display: block; }
.card .icon img, .moment .dot img { width: 24px; height: 24px; }
.moment .dot img { width: 20px; height: 20px; }
.daylist .dot img { width: 20px; height: 20px; }
/* friction ladder */
.ladder { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.ladder span { font: 500 14px/1 var(--font-mono); padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); }
.ladder span:nth-child(1) { opacity: .7; }
.ladder span:nth-child(5) { border-color: var(--accent); color: var(--accent-text); }

/* ---------- table ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 14px 18px; border-bottom: 1px solid var(--line); }
thead th { color: var(--muted); font-weight: 500; font-size: 14px; }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody th { font-weight: 600; }
.compare td:last-child, .compare th:last-child { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.compare thead th:last-child { color: var(--accent-text); font-weight: 700; }
.compare th[scope="row"] { min-width: 140px; }
.compare td { min-width: 180px; }

/* ---------- inbox illustration ---------- */
.clockface { display: grid; gap: 12px; }
.slot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-radius: 18px; border: 1px dashed var(--line); font-family: var(--font-mono); color: var(--muted); }
.slot b { font: 700 28px/1 var(--font-display); color: var(--text); letter-spacing: -0.02em; }
.slot.open { border-style: solid; border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, var(--card)); color: var(--accent-text); }

/* ---------- pricing ---------- */
.toggle { display: inline-flex; padding: 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); gap: 4px; }
.toggle button { appearance: none; border: 0; background: transparent; color: var(--muted); font: 600 15px/1 var(--font-body); padding: 11px 18px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.toggle button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.toggle .save { font: 600 11px/1 var(--font-mono); padding: 4px 7px; border-radius: 999px; background: var(--accent); color: var(--on-accent); }
.price-card { position: relative; max-width: 560px; margin: 32px auto 0; background: var(--card); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 28px; padding: clamp(24px, 4vw, 40px); box-shadow: 0 40px 120px -60px var(--accent); text-align: left; }
.price-card .plan { font: 600 14px/1 var(--font-mono); color: var(--accent-text); }
.price-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; margin: 18px 0 6px; }
.price-amount { font: 700 clamp(48px, 8vw, 68px)/1 var(--font-display); letter-spacing: -0.04em; }
.price-per { color: var(--muted); font-size: 18px; }
.price-sub { color: var(--muted); font-size: 15px; min-height: 1.6em; }
.price-card .checks { margin-top: 28px; }
.price-card .btn { width: 100%; margin-top: 28px; }
.notice { display: flex; gap: 12px; align-items: flex-start; max-width: 560px; margin: 20px auto 0; padding: 14px 16px; border-radius: var(--radius-sm); border: 1px dashed color-mix(in srgb, var(--accent) 55%, var(--line)); color: var(--muted); font-size: 15px; text-align: left; }
.notice svg { width: 20px; height: 20px; color: var(--accent-text); flex: none; margin-top: 2px; }
.teaser-price { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.teaser-price .price-amount { font-size: clamp(44px, 6vw, 60px); }

/* ---------- faq ---------- */
.faq { display: grid; gap: 10px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
.faq summary { list-style: none; cursor: pointer; padding: 20px 56px 20px 22px; position: relative; font: 600 18px/1.35 var(--font-display); letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 12px; height: 12px; margin-top: -8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.faq .answer { padding: 0 22px 22px; color: var(--muted); }
.faq-group { margin-top: 56px; }
.faq-group:first-of-type { margin-top: 0; }
.faq-group > h2 { font-size: 24px; margin-bottom: 18px; }

/* ---------- page head (inner pages) ---------- */
.page-head { padding-block: clamp(56px, 8vw, 104px) clamp(32px, 5vw, 56px); position: relative; overflow: hidden; }
.page-head::before { content: ""; position: absolute; left: 50%; top: -360px; width: 820px; height: 620px; transform: translateX(-50%); background: radial-gradient(closest-side, var(--glow), transparent 70%); pointer-events: none; }
.page-head .wrap { position: relative; }
.page-head .h1 { font-size: clamp(42px, 7vw, 76px); }

/* feature rows (features page) */
.feature-row { display: grid; grid-template-columns: 300px 1fr; gap: clamp(24px, 5vw, 72px); padding-block: clamp(40px, 6vw, 72px); border-top: 1px solid var(--line); }
.feature-row:first-child { border-top: 0; }
.feature-row .side .icon { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 18px; background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent-text); }
.feature-row .side .icon svg { width: 26px; height: 26px; }
.feature-row .side p { color: var(--muted); margin-top: 12px; }
.feature-row .body > p { color: var(--muted); }
.feature-row .body > p strong { color: var(--text); }
@media (max-width: 860px) { .feature-row { grid-template-columns: 1fr; } }
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.toc a { text-decoration: none; font-size: 14px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.toc a:hover { color: var(--text); border-color: var(--muted); }
.mini { display: grid; gap: 10px; margin-top: 20px; }
.mini > div { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; }
.mini > div b { display: block; margin-bottom: 2px; }
.mini > div span { color: var(--muted); font-size: 15px; }

/* final cta */
.final { text-align: center; position: relative; overflow: hidden; }
.final::before { content: ""; position: absolute; left: 50%; bottom: -420px; width: 900px; height: 700px; transform: translateX(-50%); background: radial-gradient(closest-side, var(--glow), transparent 70%); pointer-events: none; }
.final .wrap { position: relative; }
.final .actions { justify-content: center; }
.fire { width: 72px; height: 72px; margin: 0 auto 28px; color: var(--accent); }

/* ---------- prose (privacy, terms, about) ---------- */
.prose { max-width: 760px; }
.prose h2 { font-size: clamp(24px, 3vw, 30px); margin: 56px 0 14px; }
.prose h3 { font-size: 19px; margin: 28px 0 8px; }
.prose p, .prose li { color: color-mix(in srgb, var(--text) 86%, var(--muted)); }
.prose .card { margin: 20px 0; }
.prose .card b.title { display: block; font: 600 19px/1.3 var(--font-display); margin-bottom: 10px; color: var(--text); }
.prose .table-wrap { margin: 18px 0; }
.prose td:first-child { font-weight: 600; min-width: 130px; }
.meta { color: var(--muted); font-size: 14px; margin-top: 14px; }
.todo { color: var(--todo); background: color-mix(in srgb, var(--todo) 12%, transparent); border: 1px dashed var(--todo); border-radius: 8px; padding: 1px 6px; font-size: .92em; }
.placeholder { border: 2px dashed var(--todo); border-radius: var(--radius); padding: 24px; color: var(--muted); background: color-mix(in srgb, var(--todo) 6%, transparent); }
.placeholder .label { display: inline-block; font: 600 12px/1 var(--font-mono); color: var(--todo); letter-spacing: .05em; margin-bottom: 12px; }

/* download */
.dl-card { display: flex; flex-direction: column; gap: 14px; }
.dl-card .btn { align-self: flex-start; }
.dl-card code { overflow-wrap: anywhere; }
.grid > * { min-width: 0; }
.sum { font: 12px/1.5 var(--font-mono); color: var(--muted); overflow-wrap: anywhere; }

/* 404 */
.lost { min-height: 62vh; display: grid; place-items: center; text-align: center; }

/* ---------- small-screen fixes ---------- */
.teaser-price > div { flex: 1 1 320px; min-width: 0; }
@media (max-width: 640px) {
  .proof { flex-direction: column; align-items: flex-start; gap: 12px; }
  /* the comparison table becomes one card per row */
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: 100%; }
  .compare thead { display: none; }
  .compare tr { padding: 16px 18px; border-bottom: 1px solid var(--line); }
  .compare tbody tr:last-child { border-bottom: 0; }
  .compare th, .compare td { border: 0; padding: 0; min-width: 0; }
  .compare th[scope="row"] { font: 600 18px/1.3 var(--font-display); margin-bottom: 10px; }
  .compare td { padding: 8px 12px; border-radius: 10px; font-size: 15px; }
  .compare td::before { content: attr(data-label); display: block; font: 500 12px/1.4 var(--font-mono); color: var(--muted); margin-bottom: 2px; }
  .compare td + td { margin-top: 6px; }
  .compare td:last-child::before { color: var(--accent-text); }
  /* the years table on the features page, one block per kind of app */
  .lex, .lex tbody, .lex tr, .lex th, .lex td { display: block; width: 100%; }
  .lex thead { display: none; }
  .lex tr { padding: 14px 18px; border-bottom: 1px solid var(--line); }
  .lex tbody tr:last-child { border-bottom: 0; }
  .lex th, .lex td { border: 0; padding: 0; }
  .lex th[scope="row"] { margin-bottom: 6px; min-width: 0; }
  .lex th br { display: none; }
  .lex th .small { margin-left: 6px; }
  .lex td { color: var(--muted); }
  /* the rates table on the features page, one block per way to earn */
  .rates, .rates tbody, .rates tr, .rates th, .rates td { display: block; width: 100%; }
  .rates thead { display: none; }
  .rates tr { padding: 14px 18px; border-bottom: 1px solid var(--line); }
  .rates tbody tr:last-child { border-bottom: 0; }
  .rates th, .rates td { border: 0; padding: 0; }
  .rates th[scope="row"] { margin-bottom: 6px; }
  .rates td { color: var(--muted); }
  .rates td + td { margin-top: 4px; color: var(--accent-text); font-family: var(--font-mono); font-size: 14px; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- pre-launch notice (pricing) ---------- */
.notice { display: flex; gap: 12px; align-items: flex-start; max-width: 560px; margin: 20px auto 0; padding: 14px 16px; border-radius: var(--radius-sm); border: 1px dashed color-mix(in srgb, var(--accent) 55%, var(--line)); color: var(--muted); font-size: 15px; text-align: left; }
.notice svg { width: 20px; height: 20px; color: var(--accent-text); flex: none; margin-top: 2px; }

/* =====================================================================
   MOTION AND PLAY
   Everything below is extra: with no script, or with reduced motion, every
   section is simply there. html.js is set by a one-line script in each <head>
   (which also shows everything after 3 s if site.js never runs).
   ===================================================================== */

/* ---------- reveal on scroll ---------- */
.js .section .section-head,
.js .section .card,
.js .section .mini-note,
.js .section .mini > div,
.js .section .checks li,
.js .section .daylist li,
.js .section .faq details,
.js .section .legend p,
.js .section .statement,
.js .section .table-wrap,
.js .section .feature-row,
.js .section .rv {
  opacity: 0; transform: translateY(26px);
  transition: opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--d, 0s);
}
.js .section .daylist li { transform: translateX(-22px); }
.js .section .in, .js.rv-all .section * { opacity: 1 !important; transform: none !important; }
.js .section .card.in:hover { transform: translateY(-3px) !important; transition-delay: 0s; }

/* ---------- digby, drawn (the ads' poses): tap him and he bites ---------- */
.digby2d { display: block; width: 100%; height: auto; overflow: visible; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.digby2d .phone-pos { transform-box: view-box; transform-origin: 1040px 165px; transition: transform .18s cubic-bezier(.3,1.6,.5,1); }
.digby2d .crack { opacity: 0; transition: opacity .1s; }
.digby2d .bitemarks circle { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .16s cubic-bezier(.3,1.6,.5,1); }
.digby2d .phone { transition: opacity .5s ease; }
.digby2d.crunch .phone-pos { transform: rotate(20deg) translate(-8px, 6px); }
.digby2d.crunch .crack { opacity: .9; }
.digby2d.bitten .bitemarks circle { transform: scale(1); }
.digby2d.regrow .phone { opacity: 0; }
.digby2d.crunch, .digby2d.bitten { animation: chomp .42s ease; }
.digby2d .crumbs circle { opacity: 0; }
.digby2d.bitten .crumbs circle { animation: crumb .8s ease-out forwards; }
.digby2d.bitten .crumbs circle:nth-child(2) { animation-delay: .05s; --cx: -30px; }
.digby2d.bitten .crumbs circle:nth-child(3) { animation-delay: .1s; --cx: 50px; }
@keyframes chomp { 0% { transform: none; } 30% { transform: translateY(-3%) rotate(-2deg) scale(1.02, .98); } 60% { transform: translateY(1%) scale(.99, 1.01); } 100% { transform: none; } }
@keyframes crumb { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(var(--cx, 20px), 120px); } }

/* speech bubbles: digby's lines */
.bubble {
  position: relative; display: inline-block; max-width: 22em; margin: 0;
  background: var(--text); color: var(--bg); border-radius: 16px; padding: 10px 14px;
  font: 600 15px/1.35 var(--font-display); letter-spacing: -0.01em;
  box-shadow: 0 18px 40px -20px rgba(0,0,0,.6);
  transform-origin: 20% 100%;
}
.bubble::after { content: ""; position: absolute; left: 28px; bottom: -6px; width: 14px; height: 14px; background: inherit; transform: rotate(45deg); border-radius: 0 0 3px 0; }
.bubble.pop { animation: pop .32s cubic-bezier(.3,1.6,.5,1); }
.bubble:empty { visibility: hidden; }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* hero digby */
.hero-digby-wrap { position: relative; width: min(100%, 400px); margin: 0 0 18px auto; padding-top: 64px; }
.hero-digby-wrap .bubble { position: absolute; left: 30%; top: 0; }
.tap-hint { font: 500 12px/1.2 var(--font-mono); color: var(--muted); text-align: right; margin: 4px 0 0; }
.js .moments .moment { opacity: 0; transform: translateY(14px) scale(.98); animation: notify .5s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(.4s + var(--i, 0) * .4s); }
@keyframes notify { to { opacity: 1; transform: none; } }
@media (max-width: 900px) { .hero-digby-wrap { margin: 0 auto 4px 0; width: min(58%, 230px); padding-top: 50px; } .hero-digby-wrap .bubble { left: 34%; width: max-content; max-width: min(15em, calc(100vw - 120px)); } }

/* ---------- digby peeking in from the corner, following the page ---------- */
.peek { position: fixed; right: max(6px, env(safe-area-inset-right)); bottom: 0; z-index: 40; width: clamp(92px, 15vw, 132px); height: 0; }
.peek-btn { position: absolute; right: 0; bottom: 0; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; transform: translateY(130%); transition: transform .55s cubic-bezier(.3,1.4,.5,1); -webkit-tap-highlight-color: transparent; }
.peek-btn img { width: 100%; height: auto; display: block; }
.peek.up .peek-btn img { filter: drop-shadow(0 -4px 18px rgba(0,0,0,.35)); }
.peek.up .peek-btn { transform: translateY(42%); }
.peek.chomp .peek-btn { animation: peekchomp .5s ease; }
@keyframes peekchomp { 0%, 100% { transform: translateY(42%) rotate(0); } 25% { transform: translateY(34%) rotate(-8deg); } 55% { transform: translateY(44%) rotate(4deg); } }
.peek .bubble { position: absolute; right: 64%; bottom: calc(clamp(92px, 15vw, 132px) * .62); width: max-content; max-width: min(240px, 60vw); opacity: 0; transform: scale(.6); transform-origin: 100% 100%; transition: opacity .2s, transform .3s cubic-bezier(.3,1.6,.5,1); pointer-events: none; }
.peek .bubble::after { left: auto; right: 16px; }
.peek.up .bubble.on { opacity: 1; transform: scale(1); }
@media print { .peek { display: none; } }

/* ---------- free minutes, draining ---------- */
.today { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(18px, 2.6vw, 26px); box-shadow: 0 40px 100px -60px var(--accent); }
.today-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.today-head b { font: 650 20px/1.2 var(--font-display); }
.today-head span { font: 500 13px/1.2 var(--font-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.kind { padding: 12px 0; border-top: 1px solid var(--line); }
.kind:first-of-type { border-top: 0; }
.kind-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.kind-top b { font-weight: 600; white-space: nowrap; }
.kind-top span { font: 500 13px/1.3 var(--font-mono); color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.kind.paying .kind-top span { color: var(--accent-text); }
.kind.capped .kind-top span { color: #e2574c; }
.bar { height: 8px; border-radius: 99px; background: var(--card-2); margin-top: 9px; overflow: hidden; }
.bar i { display: block; height: 100%; width: calc(var(--left, 1) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .2s linear; }
.today-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 14px; border-top: 1px dashed var(--line); font: 500 14px/1.3 var(--font-mono); color: var(--muted); }
.today-foot img { width: 26px; height: auto; }
.today-foot b { color: var(--text); font: 700 20px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.today-split { margin-top: clamp(40px, 6vw, 64px); }
@media (max-width: 520px) { .kind-top { flex-direction: column; gap: 2px; } .kind-top span { text-align: left; } }
.kind-top small { font-weight: 400; font-size: 13px; }

/* ---------- the "how much do you scroll?" calculator ---------- */
.calc { background: var(--card); border: 1px solid var(--line); border-radius: 28px; padding: clamp(20px, 4vw, 40px); }
.calc-q { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.calc-q label { font: 650 clamp(20px, 2.4vw, 26px)/1.2 var(--font-display); letter-spacing: -0.02em; }
.calc-q output { font: 700 clamp(34px, 5vw, 52px)/1 var(--font-display); color: var(--accent-text); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; background: transparent; margin: 14px 0 6px; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--accent) var(--fill, 30%), var(--card-2) var(--fill, 30%)); }
.range::-moz-range-track { height: 10px; border-radius: 99px; background: var(--card-2); }
.range::-moz-range-progress { height: 10px; border-radius: 99px; background: var(--accent); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; margin-top: -12px; border-radius: 50%; background: #f4f2ee url("/dino.svg") center / 22px no-repeat; border: 3px solid var(--accent); box-shadow: 0 6px 18px -6px rgba(0,0,0,.6); }
.range::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: #f4f2ee url("/dino.svg") center / 20px no-repeat; border: 3px solid var(--accent); }
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--glow), 0 0 0 6px var(--accent); }
.range-scale { display: flex; justify-content: space-between; font: 500 12px/1 var(--font-mono); color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; border: 0; min-width: 0; }
.chips legend { font: 500 13px/1.2 var(--font-mono); color: var(--muted); margin-bottom: 10px; padding: 0; float: left; width: 100%; }
.chip { appearance: none; border: 1px solid var(--line); background: transparent; color: var(--muted); font: 600 15px/1 var(--font-body); padding: 11px 16px; border-radius: 999px; cursor: pointer; min-height: 44px; }
.chip:hover { color: var(--text); border-color: var(--muted); }
.chip[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.calc-out { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px; }
.wk { background: var(--card-2); border-radius: 18px; padding: 18px; min-width: 0; }
.wk h3 { font: 500 13px/1.2 var(--font-mono); color: var(--muted); letter-spacing: .02em; margin-bottom: 12px; }
.wk p { margin: 0 0 8px; color: var(--muted); font-size: 15px; line-height: 1.35; }
.wk p b { display: block; font: 700 clamp(26px, 3.6vw, 36px)/1.1 var(--font-display); color: var(--text); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.wk .dear b { color: var(--accent-text); }
.calc-verdict { margin: 20px 0 0; font: 600 clamp(17px, 1.9vw, 20px)/1.4 var(--font-display); }
.calc-meter { height: 10px; border-radius: 99px; background: var(--card-2); margin-top: 12px; position: relative; overflow: hidden; }
.calc-meter i { position: absolute; inset: 0 auto 0 0; width: var(--m, 0%); background: linear-gradient(90deg, var(--accent-2), var(--accent) 60%, #e2574c); border-radius: inherit; transition: width .35s ease; }
.calc-meter-scale { display: flex; justify-content: space-between; margin-top: 6px; font: 500 12px/1.3 var(--font-mono); color: var(--muted); }
.calc-meter-scale { position: relative; }
.calc-meter-scale span:nth-child(2) { position: absolute; left: 30.3%; transform: translateX(-2px); padding-left: 6px; border-left: 2px solid var(--muted); }
.calc-meter::after { content: ""; position: absolute; left: 30.3%; top: 0; bottom: 0; width: 2px; background: var(--bg); opacity: .7; }
@media (max-width: 480px) { .calc-meter-scale span:nth-child(1) { visibility: hidden; } }
.calc-note { margin-top: 14px; font-size: 14px; color: var(--muted); }
@media (max-width: 420px) { .calc-out { grid-template-columns: 1fr; } }

/* ---------- the years: a counter that ticks back as you scroll ---------- */
.years-wrap { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.year-dial { position: sticky; top: 92px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.yd-label { display: block; font: 500 12px/1.2 var(--font-mono); color: var(--muted); letter-spacing: .03em; }
.yd-year { display: block; font: 750 clamp(44px, 5vw, 60px)/1 var(--font-display); letter-spacing: -0.04em; color: var(--accent-text); margin: 8px 0 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.yd-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.yd-kinds li { margin: 0; font: 500 12px/1 var(--font-mono); padding: 6px 8px; border-radius: 99px; border: 1px solid var(--line); color: var(--text); transition: color .3s, border-color .3s, opacity .3s; }
.yd-kinds li.gone { color: #e2574c; border-color: color-mix(in srgb, #e2574c 45%, var(--line)); opacity: .8; text-decoration: line-through 2px; }
.js .years li { transition: opacity .5s ease; }
.js .years li:not(.on) { opacity: .4; }
.js .years li.on::before { background: var(--accent); box-shadow: 0 0 14px var(--accent); }
.js .years li .what .rung.gone { text-decoration-color: transparent; transition: text-decoration-color .4s .15s; }
.js .years li.on .what .rung.gone { text-decoration-color: var(--rung); }
@media (max-width: 860px) {
  .years-wrap { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .year-dial { top: 64px; z-index: 5; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 14px; padding: 10px 14px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--card) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 14px 30px -20px rgba(0,0,0,.6); }
  .yd-label { grid-column: 1 / -1; }
  .yd-year { font-size: 30px; margin: 0; min-width: 4.6ch; }
  .yd-kinds { gap: 4px; }
  .yd-kinds li { font-size: 10.5px; padding: 3px 5px; }
}

/* ---------- earning: exercise, the headline way ---------- */
.exercise { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; margin: 0 0 clamp(28px, 4vw, 44px); }
.exercise > * { min-width: 0; }
.ex-title { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.05; }
.ex-text .lede { margin-top: 14px; }
.ex-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 14px; padding: 0; list-style: none; }
.ex-list li { margin: 0; font: 500 13px/1.2 var(--font-mono); padding: 9px 12px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); }
.ex-list li.ex-soon { border-style: dashed; color: var(--muted); }
.ex-list li small { margin-left: 6px; color: var(--accent-text); font-size: 11px; }
.reps { background: var(--card); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: var(--radius); padding: clamp(18px, 2.6vw, 26px); box-shadow: 0 40px 100px -60px var(--accent); }
.reps-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.reps-head b { font: 650 20px/1.2 var(--font-display); }
.reps-live { display: inline-flex; align-items: center; gap: 7px; font: 500 12px/1.2 var(--font-mono); color: var(--muted); }
.reps-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.reps.going .reps-live i { background: var(--accent); animation: reps-blink 1s ease-in-out infinite; }
.reps.done .reps-live i { background: var(--accent); }
@keyframes reps-blink { 50% { opacity: .3; } }
.reps-fig { display: block; width: 100%; max-width: 380px; height: auto; margin: 14px auto 6px; }
.reps-fig .floor { stroke: var(--line); stroke-width: 2; stroke-linecap: round; }
.reps-fig .who { fill: none; stroke: var(--text); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.reps-fig .head { fill: var(--accent); stroke: none; }
.reps-count { display: flex; align-items: baseline; gap: 10px; }
.reps-count b { font: 750 clamp(56px, 8vw, 84px)/1 var(--font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.reps-count span { font: 500 14px/1.2 var(--font-mono); color: var(--muted); }
.reps-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font: 500 13px/1.3 var(--font-mono); color: var(--muted); }
.reps-foot b { color: var(--text); font-variant-numeric: tabular-nums; }
.reps-dinos { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-text); font-size: 16px; }
.reps-dinos b { color: var(--accent-text); }
@media (max-width: 900px) { .exercise { grid-template-columns: 1fr; } }

/* ---------- earning: the counter ---------- */
.dinocount { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin: 0 0 28px; padding: 20px 22px; border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 9%, var(--card)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); }
.dc-total { display: flex; align-items: center; gap: 12px; }
.dc-total img { width: 52px; height: auto; }
.dc-total b { display: block; font: 750 clamp(44px, 6vw, 64px)/1 var(--font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; min-width: 2.2ch; }
.dc-total span { display: block; font: 500 13px/1.3 var(--font-mono); color: var(--muted); }
.dc-parts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; flex: 1 1 300px; }
.dc-parts li { margin: 0; font: 500 13px/1.2 var(--font-mono); padding: 9px 11px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); color: var(--muted); transition: color .3s, border-color .3s, opacity .3s; }
.dc-parts li b { color: var(--text); }
.js .dc-parts li:not(.on) { opacity: .45; }
.dc-parts li.on { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }

/* ---------- try to get round it ---------- */
.bypass-game {
  position: relative; overflow: clip;
  background: var(--card); border: 1px solid var(--line); border-radius: 28px; padding: clamp(20px, 3.4vw, 34px); margin-top: clamp(40px, 6vw, 64px);
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: "stage head" "stage list";
  column-gap: clamp(20px, 4vw, 44px); row-gap: 18px; align-items: start;
}
.bg-head { grid-area: head; }
.bg-list { grid-area: list; }
.bg-stage { grid-area: stage; align-self: center; }
/* digby's line: in the flow, with room kept for the longest one, so nothing jumps or overlaps */
.bg-say { display: flex; align-items: flex-end; gap: 10px; min-height: 112px; }
.bg-face { flex: none; width: 46px; height: auto; }
.bg-say .bubble { flex: 1 1 auto; max-width: 30em; transform-origin: 0 100%; }
.bg-say .bubble::after { left: -5px; bottom: 14px; }
.bg-box { position: relative; width: min(100%, 176px); aspect-ratio: 1 / 2; margin: 22px auto 0; }
.bg-defs { position: absolute; width: 0; height: 0; }
.bg-phone, .bg-phone > svg, .bg-shard, .bg-shard > svg { display: block; width: 100%; height: 100%; }
.bg-phone > svg, .bg-shard > svg { filter: drop-shadow(0 18px 26px rgba(0,0,0,.35)); }
.bg-phone.gone { visibility: hidden; }
.bg-crack path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.bg-crack.new path { animation: crackdraw .38s ease-out both; }
@keyframes crackdraw { from { stroke-dashoffset: 1; } }
.bg-shard { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform, opacity; }
.bg-shard > svg { filter: none; }
.bg-digby { position: absolute; left: 50%; bottom: -6px; width: 290px; max-width: none; visibility: hidden; transform: translateX(-50%); pointer-events: none; }
.bypass-game.done .bg-digby { visibility: visible; animation: digbyin .6s cubic-bezier(.3,1.5,.5,1) both; }
.bypass-game.still .bg-digby { display: none; }
@keyframes digbyin { 0% { opacity: 0; transform: translate(-50%, 30%) scale(.5); } 100% { opacity: 1; transform: translateX(-50%); } }
.bg-tries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bg-try {
  appearance: none; display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 9px 12px; text-align: left;
  font: 600 15px/1.25 var(--font-body); color: var(--text); background: var(--card-2); border: 1px solid var(--card-2); border-radius: 14px; cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s; -webkit-tap-highlight-color: transparent;
}
.bg-try::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font: 800 11px/1 var(--font-body); }
.bg-try:hover { border-color: var(--muted); }
.bg-try.tried { background: transparent; color: var(--muted); border-color: var(--line); }
.bg-try.tried::before { content: "✓"; background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.bg-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 16px; min-height: 50px; }
.bg-score { margin: 0; font: 500 14px/1.5 var(--font-mono); color: var(--muted); }
.bg-score b { color: var(--accent-text); }
.bg-again[hidden], .bg-end[hidden] { display: none; }
.bg-end { margin: 12px 0 0; font-size: 15px; color: var(--muted); }
@media (max-width: 760px) {
  .bypass-game { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "list"; padding: 20px 16px; row-gap: 14px; }
  /* the phone stays in view while you work down the list */
  .bg-stage {
    position: sticky; top: 64px; z-index: 3; margin-inline: -16px; padding: 10px 16px;
    background: var(--card); border-bottom: 1px solid var(--line);
    display: grid; grid-template-columns: clamp(86px, 27vw, 112px) minmax(0, 1fr); gap: 14px; align-items: center;
    transition: grid-template-columns .4s ease;
  }
  .bypass-game.done:not(.still) .bg-stage { grid-template-columns: clamp(130px, 42vw, 180px) minmax(0, 1fr); }
  .bypass-game.done:not(.still) .bg-box { aspect-ratio: 1120 / 820; }
  .bg-box { width: 100%; margin: 0; order: -1; }
  .bg-say { flex-direction: column; align-items: flex-start; min-height: 0; gap: 8px; }
  .bg-say .bubble { font-size: 14px; padding: 9px 12px; }
  .bg-say .bubble::after { left: 16px; bottom: -6px; }
  .bg-face { width: 38px; order: 2; }
  .bg-digby { width: 100%; bottom: 0; }
  .bg-try { font-size: 14px; padding: 8px 10px; gap: 8px; min-height: 52px; }
  .bg-try::before { width: 16px; height: 16px; }
}

/* ---------- 3D: the app's low-poly models ---------- */
.stage { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 420px; margin-inline: auto; }
.stage::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(closest-side, var(--glow), transparent 72%); }
.stage::after { content: ""; position: absolute; left: 26%; right: 26%; bottom: 8%; height: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.42), transparent); }
.stage canvas { position: relative; z-index: 1; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; opacity: 0; transition: opacity .5s ease; }
.stage canvas:active { cursor: grabbing; }
.stage.ready canvas { opacity: 1; }
.stage-fallback { position: absolute; inset: 20%; display: grid; place-items: center; transition: opacity .4s; }
.stage-fallback img, .stage-fallback svg { width: 100%; height: auto; }
.stage.ready .stage-fallback { opacity: 0; }
.stage-hint { text-align: center; font: 500 12px/1.3 var(--font-mono); color: var(--muted); margin: 4px 0 0; }
@media (prefers-color-scheme: light) { .stage::after { background: radial-gradient(closest-side, rgba(60,40,20,.25), transparent); } }
.reward-picks { display: grid; gap: 8px; margin-top: 22px; }
.reward-picks button { appearance: none; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: center; text-align: left; width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; cursor: pointer; transition: border-color .2s, background-color .2s; }
.reward-picks button:hover { border-color: var(--muted); }
.reward-picks button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 70%, var(--line)); background: color-mix(in srgb, var(--accent) 9%, var(--card)); }
.reward-picks .mi { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent-text); }
.reward-picks .mi svg { width: 20px; height: 20px; }
.reward-picks .mi img { width: 24px; height: auto; }
.reward-picks b { display: block; font-weight: 600; line-height: 1.3; }
.reward-picks small { display: block; color: var(--muted); font-size: 14px; line-height: 1.4; }

/* digby's colours: buttons that recolour every digby on the page */
.swatches li { width: auto; height: auto; border: 0; margin: 0; border-radius: 0; }
.swatch { appearance: none; display: block; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--line); background: var(--sw); cursor: pointer; padding: 0; transition: transform .15s; }
.swatch:hover { transform: scale(1.08); }
.swatch[aria-pressed="true"] { border-color: var(--bg); box-shadow: 0 0 0 2px var(--text); }

/* inbox: opening early */
.early { margin-top: 16px; display: flex; align-items: center; gap: 12px; font: 500 14px/1.3 var(--font-mono); color: var(--muted); }
.early .ring { flex: none; width: 34px; height: 34px; border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--p, 0) * 360deg), var(--card-2) 0); -webkit-mask: radial-gradient(circle, transparent 52%, #000 55%); mask: radial-gradient(circle, transparent 52%, #000 55%); }
.early b { color: var(--text); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .js .section .section-head, .js .section .card, .js .section .mini-note, .js .section .mini > div, .js .section .checks li,
  .js .section .daylist li, .js .section .faq details, .js .section .legend p, .js .section .statement, .js .section .table-wrap,
  .js .section .feature-row, .js .section .rv, .js .moments .moment, .js .years li, .js .dc-parts li { opacity: 1 !important; transform: none !important; animation: none !important; }
  .peek { display: none; }
}