/* Tap In — Lens, for the web.
   Tokens, type, surfaces and motion follow design/lens/README.md: ink on a neutral canvas, the display drawn in the
   logo's dots, green only for kept, verified and gained (and the logo), gold only for what's earned.
   v2: the page's own elements are liquid glass. The ground carries the display's dot grid, faintly, so the glass
   has something real to bend.
   v3: from laptop widths up the page is drawn 1.15 times its size, as a browser at 115% draws it: lengths are in rem,
   and the root font size rises from 16px at 768px wide to 18.4px by 1280px (zoom.js); hairlines stay px. The ground
   also carries soft green light behind what's kept, verified and gained, and behind the logo (.aurora), which the
   glass bends too; the habits drift through a glass ticker, and the end card's mark is poured in glass. */

:root {
  color-scheme: light;
  --canvas: #F5F5F4;
  --surface: #FFFFFF;
  --inset: #ECECEA;
  --ink: #0A0A0A;
  --secondary: #6B6B6B;
  --tertiary: #A1A1A1;
  --hairline: rgba(0, 0, 0, .09);
  --on-brand: #FFFFFF;
  --kept: #17320B;
  --mint: #D9F4CD;
  --forest: #17320B;
  --trophy: #B87D00;
  --thumb: #FFFFFF;

  /* The display: white to grey .955 by day, lit along its top edge. */
  --display-top: #FFFFFF;
  --display-bottom: #F4F4F4;
  --lit: #0A0A0A;
  --grid-dot: rgba(10, 10, 10, .075);
  --ground-dot: rgba(10, 10, 10, .1);   /* the page's grid (theme.js groundAlpha) */
  --face-shadow: rgba(0, 0, 0, .16);
  --rim-top: rgba(255, 255, 255, 1);
  --rim-bottom: rgba(0, 0, 0, .06);
  --display-shadow: 0 .75rem 2.125rem rgba(0, 0, 0, .09), 0 1px .09375rem rgba(0, 0, 0, .05);
  --raised-shadow: 0 .5rem 1.375rem -.625rem rgba(0, 0, 0, .14), 0 1px .09375rem rgba(0, 0, 0, .06);
  --raised-edge: rgba(255, 255, 255, .95);

  /* Glass that has nothing under it to refract gets a little body, like the app's glass buttons. */
  --glass-fill: rgba(255, 255, 255, .6);
  --nav-fill: rgba(255, 255, 255, .7);
  --glass-edge: rgba(255, 255, 255, .8);
  --glass-shadow: 0 .625rem 1.875rem rgba(0, 0, 0, .09), 0 1px .125rem rgba(0, 0, 0, .06);
  --glass-face: #F9F9F8;                  /* what a glass panel on the ground comes out as */
  /* Soft green light on the ground (.aurora; glass-ground.js draws the same under the glass). */
  --aurora-rgb: 188 236 166;
  --aurora-a: .55;
  --lens-shadow: 0 .625rem 1.625rem -.375rem rgba(0, 0, 0, .2), 0 .125rem .375rem -.125rem rgba(0, 0, 0, .1);
  --phone-edge: #D4D4D2;
  --phone-shadow: 0 2.75rem 5rem -2.125rem rgba(0, 0, 0, .34), 0 .625rem 1.375rem -.75rem rgba(0, 0, 0, .16);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --margin: clamp(1.25rem, 4.4vw, 3.75rem);
  --max: 75rem;
  --section: clamp(6rem, 13vw, 11rem);
  --pitch: 13px;                          /* the ground's dot grid: whole px apart, about 13 at the page's zoom */

  /* The app's springs (response, damping), sampled. */
  --spring-entrance: linear(0, 0.0182, 0.0651, 0.1308, 0.2076, 0.2897, 0.3726, 0.4533, 0.5297, 0.6003, 0.6644, 0.7216, 0.772, 0.8157, 0.8532, 0.885, 0.9116, 0.9336, 0.9515, 0.966, 0.9774, 0.9864, 0.9932, 0.9983, 1.002, 1.0046, 1.0062, 1.0072, 1.0077, 1.0077, 1.0075, 1.007, 1.0065, 1.0059, 1.0053, 1.0046, 1.004, 1.0034, 1.0029, 1.0024, 1);
  --spring-thumb: linear(0, 0.0182, 0.065, 0.1305, 0.2072, 0.2891, 0.3719, 0.4526, 0.5289, 0.5995, 0.6636, 0.7208, 0.7712, 0.815, 0.8525, 0.8844, 0.911, 0.9331, 0.9511, 0.9656, 0.9772, 0.9862, 0.993, 0.9982, 1.0019, 1.0045, 1.0062, 1.0072, 1.0076, 1.0077, 1.0075, 1.0071, 1.0065, 1.0059, 1.0053, 1.0046, 1.004, 1.0035, 1.0029, 1.0025, 1);
  --spring-burst: linear(0, 0.0274, 0.0982, 0.1973, 0.3121, 0.4325, 0.5508, 0.6613, 0.7603, 0.8458, 0.9168, 0.9734, 1.0165, 1.0474, 1.0677, 1.0791, 1.0834, 1.0822, 1.0771, 1.0692, 1.0599, 1.0499, 1.0399, 1.0305, 1.022, 1.0145, 1.0083, 1.0033, 0.9994, 0.9966, 0.9947, 0.9936, 0.9931, 0.9931, 0.9934, 0.994, 0.9948, 0.9956, 0.9965, 0.9973, 1);
  --spring-switch: linear(0, 0.0176, 0.0635, 0.1286, 0.2056, 0.2888, 0.3737, 0.4571, 0.5366, 0.6105, 0.6778, 0.7381, 0.7912, 0.8372, 0.8764, 0.9094, 0.9366, 0.9588, 0.9764, 0.9902, 1.0006, 1.0083, 1.0136, 1.0171, 1.019, 1.0199, 1.0198, 1.0191, 1.0179, 1.0165, 1.0148, 1.0132, 1.0115, 1.0099, 1.0083, 1.0069, 1.0057, 1.0046, 1.0036, 1.0028, 1);
  --t-entrance: .8s;
  --t-thumb: .44s;
  --t-burst: .66s;
  --t-switch: .46s;
}

@media (min-width: 900px) { :root { --pitch: 14px; } }
@media (min-width: 1160px) { :root { --pitch: 15px; } }

:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #0A0A0A;
  --surface: #171717;
  --inset: #242424;
  --ink: #FAFAFA;
  --secondary: #A3A3A3;
  --tertiary: #6B6B6B;
  --hairline: rgba(255, 255, 255, .12);
  --on-brand: #0A0A0A;
  --kept: #D9F4CD;
  --trophy: #FFC53D;
  --thumb: #3A3A3A;

  --display-top: #1D1D1D;
  --display-bottom: #0F0F0F;
  --lit: #FFFFFF;
  --grid-dot: rgba(255, 255, 255, .075);
  --ground-dot: rgba(255, 255, 255, .1);
  --face-shadow: rgba(0, 0, 0, .55);
  --rim-top: rgba(255, 255, 255, .17);
  --rim-bottom: rgba(255, 255, 255, .035);
  --display-shadow: 0 .875rem 2.5rem rgba(0, 0, 0, .55);
  --raised-shadow: 0 .5rem 1.375rem -.625rem rgba(0, 0, 0, .7);
  --raised-edge: rgba(255, 255, 255, .07);

  --glass-fill: rgba(28, 28, 28, .55);
  --nav-fill: rgba(26, 26, 26, .66);
  --glass-edge: rgba(255, 255, 255, .13);
  --glass-shadow: 0 .625rem 1.875rem rgba(0, 0, 0, .5);
  --glass-face: #1A1A1A;
  --aurora-rgb: 46 104 32;
  --aurora-a: .4;
  --lens-shadow: 0 .75rem 1.875rem -.375rem rgba(0, 0, 0, .6), 0 .125rem .375rem -.125rem rgba(0, 0, 0, .4);
  --phone-edge: #363636;
  --phone-shadow: 0 2.75rem 5rem -2.125rem rgba(0, 0, 0, .8);
}

/* Base */

*, *::before, *::after { box-sizing: border-box; }
/* 1 on phones and tablets, rising to 1.15 by 1280px wide: every rem with it (zoom.js). */
html { font-size: clamp(100%, calc(100% + (100vw - 768px) * .0046875), 115%); -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; }
body {
  margin: 0;
  background-color: var(--canvas);
  /* The display's dot grid across the page, fainter: what the glass elements bend (glass-ground.js draws the same). */
  background-image: radial-gradient(circle, var(--ground-dot) .040625rem, transparent .06875rem);
  background-size: var(--pitch) var(--pitch);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.47;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, canvas { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 700; }
:focus-visible { outline: .15625rem solid var(--ink); outline-offset: .1875rem; border-radius: .625rem; }

.symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.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; }
.skip { position: fixed; left: 1rem; top: -3.75rem; z-index: 100; padding: .625rem 1rem; border-radius: 999px; background: var(--ink); color: var(--on-brand); text-decoration: none; font-weight: 600; }
.skip:focus { top: 1rem; }

.wrap { width: min(var(--max), 100% - 2 * var(--margin)); margin-inline: auto; }
/* The green light, and the glass's room for its shadow, spread past the page's sides: clip them there (without making
   a scroll container, so the pinned display still sticks). */
main, .footer { overflow-x: clip; }

.section-title { font-size: clamp(2.375rem, 5.4vw, 4.625rem); line-height: 1.02; letter-spacing: -0.045em; max-width: 13.5em; text-wrap: balance; }
.muted { color: var(--secondary); }
/* Each section's label: a small chip of glass, numbered. The lens runs into it. */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem; justify-self: start; height: 2.125rem; padding: 0 .9375rem 0 .8125rem;
  margin-bottom: clamp(1.125rem, 2vw, 1.5rem); border-radius: 999px;
  font-size: .875rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap;
}
.eyebrow-n { color: var(--tertiary); font-variant-numeric: tabular-nums; }
.eyebrow .mark { width: 1.0625rem; height: 1.0625rem; color: var(--kept); fill: currentColor; stroke-width: 2.2; }

/* Soft green light on the ground, under everything: an ellipse the element's size falling off as (1 - t²)², in the
   stops glass-ground.js draws it with under the glass. Only where something is kept, verified or gained, or the logo. */
.aurora {
  position: absolute; z-index: -1; pointer-events: none;
  left: var(--x, 50%); top: var(--y, 50%); width: var(--w, 50rem); height: var(--h, 30rem); translate: -50% -50%;
  background: radial-gradient(closest-side,
    rgb(var(--aurora-rgb) / var(--aurora-a)) 0%,
    rgb(var(--aurora-rgb) / calc(var(--aurora-a) * .9216)) 20%,
    rgb(var(--aurora-rgb) / calc(var(--aurora-a) * .7056)) 40%,
    rgb(var(--aurora-rgb) / calc(var(--aurora-a) * .4096)) 60%,
    rgb(var(--aurora-rgb) / calc(var(--aurora-a) * .1296)) 80%,
    rgb(var(--aurora-rgb) / 0) 100%);
}

.body { margin-top: clamp(1.125rem, 2vw, 1.625rem); font-size: clamp(1.0625rem, 1.45vw, 1.3125rem); line-height: 1.45; letter-spacing: -0.015em; color: var(--secondary); max-width: 31em; text-wrap: pretty; }

/* The ink capsule: one primary action per page. */
.capsule {
  display: inline-flex; align-items: center; justify-content: center;
  height: 3.375rem; padding: 0 1.875rem; border-radius: 999px;
  background: var(--ink); color: var(--on-brand);
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.012em; text-decoration: none; white-space: nowrap;
  transition: transform var(--t-switch) var(--spring-switch);
}
.capsule:hover { transform: scale(1.03); }
.capsule:active { transform: scale(.96); transition-duration: .12s; }
.capsule-sm { height: 2.5rem; padding: 0 1.125rem; font-size: .9375rem; }
/* A glass button beside it: clear glass, ink text. */
.capsule-glass { color: var(--ink); }

/* Glass: blur and saturation everywhere; Chromium also bends what's under it (glass-css.js). */
.glass {
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(1.375rem) saturate(1.8);
  backdrop-filter: blur(1.375rem) saturate(1.8);
  box-shadow: inset 0 0 0 .5px var(--hairline), inset 0 1px 0 var(--glass-edge), var(--glass-shadow);
}

/* The page's glass elements. With WebGL2, glass-ground.js draws real glass behind each one (canvas.glass-back, with
   room for its shadow) and marks it .gl-ready; until then, or without WebGL2, this CSS frost stands in. */
[data-glass] { position: relative; isolation: isolate; }
.glass-back { position: absolute; z-index: -1; left: -2.25rem; top: -2.25rem; width: calc(100% + 4.5rem); height: calc(100% + 4.5rem); pointer-events: none; }
[data-glass]:not([data-glass="ink"]):not(.gl-ready) {
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(1.375rem) saturate(1.8);
  backdrop-filter: blur(1.375rem) saturate(1.8);
  box-shadow: inset 0 0 0 .5px var(--hairline), inset 0 1px 0 var(--glass-edge), var(--glass-shadow);
}
[data-glass] [data-glass]:not(.gl-ready) { box-shadow: inset 0 0 0 .5px var(--hairline), inset 0 1px 0 var(--glass-edge), var(--raised-shadow); }
[data-glass].gl-ready, .gl-ready [data-glass] { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
/* While the lens runs into a small piece of glass, that glass is raised above it, so it's never magnified. */
[data-glass].merging, .logo-land.merging { z-index: 62; }

/* The lens on the mouse (lens.js): its SVG filter bends what's behind it; a canvas carries its rim light. */
.page-lens { position: fixed; z-index: 60; left: 0; top: 0; pointer-events: none; will-change: transform; }
.page-lens-glass { position: absolute; inset: 0; border-radius: 50%; box-shadow: var(--lens-shadow); opacity: 0; scale: .4;
  transition: opacity .2s, scale var(--t-switch) var(--spring-switch); }
.page-lens.on .page-lens-glass { opacity: 1; scale: 1; }
.page-lens canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
/* Drawn by the page glass: its light following wherever it has run into other glass, and its shadow. */
.page-lens.lit .page-lens-glass { box-shadow: none; }
.page-lens-light { position: fixed; z-index: 61; left: 0; top: 0; pointer-events: none; will-change: transform; opacity: 0; scale: .4;
  transition: opacity .2s, scale var(--t-switch) var(--spring-switch); }
.page-lens-light.on { opacity: 1; scale: 1; }

/* The display: one signature surface, drawn in the logo's dots. */
.display {
  position: relative;
  border-radius: 1.875rem;
  background: linear-gradient(180deg, var(--display-top), var(--display-bottom));
  box-shadow: var(--display-shadow);
  isolation: isolate;
}
.display::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(180deg, var(--rim-top), var(--rim-bottom) 38%, var(--rim-bottom));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.display canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }

/* Navigation */

.nav { position: fixed; z-index: 50; top: max(.75rem, env(safe-area-inset-top)); left: 0; right: 0; display: flex; justify-content: center; padding: 0 .75rem; pointer-events: none; }
.nav-bar.refracts { background: var(--nav-fill); }
.nav-bar { pointer-events: auto; display: flex; align-items: center; gap: .25rem; height: 3.25rem; padding: .375rem; padding-left: 1rem; border-radius: 999px; }
.brand { display: inline-flex; align-items: center; gap: .5rem; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.025em; text-decoration: none; }
.brand .mark { width: 1.375rem; height: 1.375rem; color: var(--kept); fill: currentColor; stroke-width: 2.2; }
.nav .brand { margin-right: .75rem; }
.nav-links { position: relative; display: flex; }
.nav-links a { position: relative; z-index: 1; display: inline-flex; align-items: center; height: 2.5rem; padding: 0 .875rem; border-radius: 999px; font-size: .9375rem; font-weight: 500; color: var(--secondary); text-decoration: none; transition: color .25s; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
/* The thumbs are beads of glass: lit along the top, a little clearer at the foot. They squish as they move (main.js). */
.nav-thumb {
  position: absolute; left: 0; top: 0; height: 2.5rem; width: var(--w, 3.75rem); border-radius: 999px;
  background: linear-gradient(180deg, var(--thumb), color-mix(in srgb, var(--thumb) 80%, transparent));
  box-shadow: inset 0 1px 0 var(--raised-edge), 0 0 0 .5px var(--hairline), 0 .125rem .5rem -.1875rem rgba(0, 0, 0, .18);
  transform: translateX(var(--x, 0)); opacity: 0;
  transition: transform var(--t-thumb) var(--spring-thumb), width var(--t-thumb) var(--spring-thumb), opacity .2s;
}
.nav-links.has-active .nav-thumb { opacity: 1; }
.seg { position: relative; display: flex; padding: .1875rem; margin-left: .375rem; border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.seg button { position: relative; z-index: 1; display: grid; place-items: center; width: 2.125rem; height: 2.125rem; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--secondary); cursor: pointer; transition: color .25s; }
.seg button[aria-checked="true"] { color: var(--ink); }
.seg svg { width: 1.125rem; height: 1.125rem; }
.seg-thumb { position: absolute; left: .1875rem; top: .1875rem; width: 2.125rem; height: 2.125rem; border-radius: 999px; background: linear-gradient(180deg, var(--thumb), color-mix(in srgb, var(--thumb) 80%, transparent)); box-shadow: inset 0 1px 0 var(--raised-edge), 0 0 0 .5px var(--hairline), 0 .125rem .375rem -.125rem rgba(0, 0, 0, .18); transition: transform var(--t-thumb) var(--spring-thumb); }
:root[data-theme="dark"] .seg-thumb { transform: translateX(2.125rem); }
/* The nav's capsule only appears once the hero's has scrolled away: one primary action at a time. */
.nav-cta { display: grid; grid-template-columns: 0fr; transition: grid-template-columns var(--t-thumb) var(--spring-thumb); }
.nav-cta > span { overflow: hidden; display: flex; }
.nav-cta .capsule { margin-left: .375rem; opacity: 0; transform: scale(.7); transition: opacity .2s, transform var(--t-switch) var(--spring-switch); }
.nav.show-cta .nav-cta { grid-template-columns: 1fr; }
.nav.show-cta .nav-cta .capsule { opacity: 1; transform: none; }

/* Hero */

.hero { position: relative; padding-top: clamp(5.25rem, 6.4vw, 6.25rem); padding-bottom: clamp(1.5rem, 4vw, 3.5rem); }
.hero-copy { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-areas: "eye eye" "title lede" "title act" "title crew"; gap: 1.25rem clamp(1.75rem, 5vw, 4.5rem); align-items: end; }
.hero-eyebrow { grid-area: eye; margin-bottom: .25rem; }
/* Who sees it: the crew, under the actions. */
.crew-line { grid-area: crew; display: flex; align-items: center; gap: .75rem; font-size: .9375rem; line-height: 1.3; color: var(--secondary); }
.crew-line .faces img { box-shadow: 0 0 0 .125rem var(--canvas); }
.hero h1 { grid-area: title; font-size: clamp(3.375rem, 8.2vw, 7.375rem); line-height: .95; letter-spacing: -0.052em; }
.hero h1 .line { display: block; }
.hero .lede { grid-area: lede; font-size: clamp(1.125rem, 1.55vw, 1.375rem); line-height: 1.4; letter-spacing: -0.017em; color: var(--secondary); max-width: 20em; }
.hero .actions { grid-area: act; display: flex; flex-wrap: wrap; gap: .75rem; padding-bottom: .3em; }

/* The ink marker behind "Together.", as in the onboarding. */
.marker { position: relative; display: inline-block; padding: 0 .1em .02em; margin-left: -.1em; color: var(--on-brand); isolation: isolate; }
.marker::before {
  content: ""; position: absolute; z-index: -1; inset: .07em -.02em -.03em -.01em;
  background: var(--ink);
  clip-path: polygon(0 9%, 99.2% 0, 100% 91%, .6% 100%);
  transform: rotate(-1.4deg);
  transform-origin: 0 50%;
}
.js .hero h1 .marker { color: var(--ink); }
.js .hero h1 .marker::before { transform: rotate(-1.4deg) scaleX(0); transition: transform .62s var(--spring-entrance) .38s; }
/* The word turns as the marker draws in under it. That's an animation, not a transition, so that when the theme is
   switched it turns at once, with the marker, rather than late. */
.js .hero h1.in .marker { color: var(--on-brand); animation: marker-ink .25s .55s backwards; }
.js .hero h1.in .marker::before { transform: rotate(-1.4deg) scaleX(1); }
@keyframes marker-ink { from { color: var(--ink); } }

/* Sized so the whole display, pill and all, is in view on a laptop screen. Never wider than its column: where the
   minimum height wins over the ratio it grows taller, not wider (with an auto width, the ratio carries the minimum
   height across into the width). */
.hero-display { width: 100%; margin-top: clamp(1.75rem, 3.2vw, 3rem); aspect-ratio: 2.8 / 1; min-height: 22.5rem; overflow: hidden; }
.hero-caption { position: absolute; z-index: 2; left: 1.625rem; top: 1.25rem; display: grid; gap: 1px; pointer-events: none; transition: opacity .35s; }
.hero-verb { font-size: clamp(1.1875rem, 1.6vw, 1.4375rem); font-weight: 700; letter-spacing: -0.028em; }
.hero-how { font-size: clamp(.875rem, 1.08vw, 1rem); color: var(--secondary); }
.swap { display: inline-block; transition: opacity .18s, transform .18s, filter .18s; }
.swap.out { opacity: 0; transform: translateY(-.5rem); filter: blur(.25rem); }
.swap.pre { opacity: 0; transform: translateY(.625rem); filter: blur(.25rem); transition: none; }
.swap.in { transition: opacity .3s, transform var(--t-entrance) var(--spring-entrance), filter .35s; }

/* The habit bar: the six habits in glass, and a drop that slides to the one showing (bar.js). With WebGL2 the
   display draws the glass; otherwise it's CSS. Kept habits turn green. */
.habit-bar { position: absolute; z-index: 3; display: flex; gap: .125rem; padding: .25rem; border-radius: 999px; }
.habit-bar button { position: relative; z-index: 1; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--tertiary); cursor: pointer; transition: color .35s; }
.habit-bar button:hover { color: var(--secondary); }
.habit-bar button.now { color: var(--ink); }
.habit-bar button.kept { color: var(--kept); }
.habit-bar svg { width: 1.25rem; height: 1.25rem; }
.bar-drop { position: absolute; left: 0; top: 0; width: 2.5rem; height: 2.5rem; border-radius: 999px; pointer-events: none; }
.display:not(.gl) .habit-bar { background: var(--glass-fill); -webkit-backdrop-filter: blur(.875rem) saturate(1.6); backdrop-filter: blur(.875rem) saturate(1.6); box-shadow: inset 0 0 0 .5px var(--hairline), inset 0 1px 0 var(--glass-edge), var(--glass-shadow); }
.display:not(.gl) .bar-drop { background: linear-gradient(180deg, var(--thumb), color-mix(in srgb, var(--thumb) 80%, transparent)); box-shadow: inset 0 1px 0 var(--raised-edge), 0 0 0 .5px var(--hairline), 0 .125rem .375rem -.125rem rgba(0, 0, 0, .18); }
.hero-display .habit-bar { right: 1rem; top: .875rem; }
.habits-display .habit-bar { left: 0; right: 0; bottom: .875rem; width: max-content; margin-inline: auto; }
@keyframes breathe { 50% { transform: scale(1.14); } }

.hero-pill {
  position: absolute; z-index: 2; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  display: flex; align-items: center; gap: .625rem; height: 3.125rem; padding: 0 1.375rem 0 1rem; border-radius: 999px;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.018em; white-space: nowrap; pointer-events: none;
}
.hero-display:not(.gl) .hero-pill { background: var(--glass-fill); -webkit-backdrop-filter: blur(.875rem) saturate(1.6); backdrop-filter: blur(.875rem) saturate(1.6); box-shadow: inset 0 0 0 .5px var(--hairline), inset 0 1px 0 var(--glass-edge), var(--glass-shadow); }
.pill-mark { width: 1.25rem; height: 1.25rem; flex: none; color: var(--secondary); fill: currentColor; transition: color .3s; }
.pm-ring { fill: currentColor; fill-opacity: 0; stroke: currentColor; stroke-width: 1.6; transition: fill-opacity .35s var(--spring-burst); }
.hero-pill.verified .pill-mark { color: var(--kept); }
.hero-pill.verified .pm-ring { fill-opacity: 1; }
.pill-text { display: inline-block; font-variant-numeric: tabular-nums; }


/* The ticker: the habits in huge type drifting across, outlined, under a capsule of glass that shows them solid
   (ticker.js). Where there's a lens, there's room above and below for it to reach the capsule on the canvas. */
.ticker { position: relative; --size: clamp(4.25rem, 10vw, 9.5rem); --room: 2.5rem; height: calc(var(--size) * 1.45 + 2 * var(--room)); margin-top: -1.5rem; }
@media (hover: hover) and (pointer: fine) { .ticker { --room: 10.5rem; } }
.ticker > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ticker:not(.gl) > canvas { display: none; }
/* Without WebGL2: the words as a CSS marquee under a frosted capsule. */
.ticker-fallback { position: absolute; inset: 0; overflow: hidden; display: grid; align-items: center; }
.ticker.gl .ticker-fallback { display: none; }
.ticker-track { display: flex; align-items: center; width: max-content; font-size: var(--size); font-weight: 800; line-height: 1; letter-spacing: -0.045em; white-space: nowrap; color: var(--ink); animation: ticker 64s linear infinite; }
.ticker-track > * { margin-right: .3em; }
/* Each word outlined round the outside of its letters together (#hollow in index.html), not round every letter. */
.ticker-track > span { opacity: .32; filter: url(#hollow); }
.ticker-track svg { width: .34em; height: .34em; flex: none; color: var(--kept); fill: currentColor; stroke-width: 2.2; }
.ticker-capsule { position: absolute; left: 50%; top: 50%; width: min(calc(var(--size) * 3.44), 84%); height: calc(var(--size) * 1.52); translate: -50% -50%; border-radius: 999px; background: var(--glass-fill); -webkit-backdrop-filter: blur(.75rem) saturate(1.6); backdrop-filter: blur(.75rem) saturate(1.6); box-shadow: inset 0 0 0 .5px var(--hairline), inset 0 1px 0 var(--glass-edge), var(--glass-shadow); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* Proof */

.proof { position: relative; padding-block: calc(var(--section) * .4) calc(var(--section) * .7); }
/* A jump from the nav lands on each section's content, under the nav, not on its top padding. */
.proof { scroll-margin-top: calc(1.5rem - var(--section) * .4); }
.habits { scroll-margin-top: calc(1.5rem - var(--section) * .7); }
.crew, .money { scroll-margin-top: calc(1.5rem - var(--section) * .6); }
.proof-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3.5rem clamp(3rem, 8vw, 8.25rem); align-items: center; }
/* The proofs: a glass panel, and a drop of glass on the one showing (stage.js). */
.proof-list { list-style: none; margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; padding: .5rem; display: grid; gap: .125rem; max-width: 29.75rem; border-radius: 1.625rem; }
.proof-list button {
  position: relative; display: grid; grid-template-columns: 2.375rem minmax(0, 1fr) auto; align-items: center; gap: .875rem;
  width: 100%; min-height: 3.625rem; padding: .625rem 1rem .625rem .625rem; border: 0; border-radius: 1.125rem; background: none;
  text-align: left; font-size: 1.0625rem; color: var(--secondary); cursor: pointer; overflow: hidden;
  transition: background-color .3s, box-shadow .3s, color .3s;
}
.proof-list button:hover { color: var(--ink); }
.proof-list button[aria-current="true"] { color: var(--ink); }
.proof-list:not(.gl-ready) button[aria-current="true"] { background: var(--surface); box-shadow: inset 0 1px 0 var(--raised-edge), var(--raised-shadow); }
.proof-list img { width: 2.375rem; height: 2.375rem; border-radius: 50%; object-fit: cover; }
.proof-list b { color: var(--ink); font-weight: 600; margin-right: .25rem; }
.proof-list em { font-style: normal; font-size: .9375rem; color: var(--tertiary); font-variant-numeric: tabular-nums; }
.proof-list button::after { content: ""; position: absolute; left: 1.25rem; right: 1.25rem; bottom: 0; height: .125rem; border-radius: .125rem; background: var(--hairline); transform: scaleX(0); transform-origin: left; opacity: 0; }
.proof-list.auto button[aria-current="true"]::after { opacity: 1; animation: proof-timer var(--dwell, 6s) linear forwards; }
@keyframes proof-timer { to { transform: scaleX(1); } }

/* The phone is about 2.1 times as tall as it is wide: keep all of it on screen. */
.proof-stage { width: min(clamp(16.75rem, 25vw, 21rem), (100svh - 9.375rem) / 2.1); margin-right: clamp(0px, 4vw, 4rem); }
.phone { position: relative; padding: 3.4%; border-radius: 16.2% / 7.6%; background: #0B0B0B; box-shadow: 0 0 0 .09375rem var(--phone-edge), var(--phone-shadow); }
.screen { position: relative; aspect-ratio: 1206 / 2622; border-radius: 13.7% / 6.3%; overflow: hidden; background: var(--canvas); container-type: inline-size; }
.screen-shot, .screen canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.screen canvas { opacity: 0; }
.phone.gl .screen canvas { opacity: 1; }
.phone.gl .screen-shot { opacity: 0; }
.screen-shot { transition: opacity .35s; }
.screen-shot.fading { opacity: .001; }

/* A notification, as iOS shows it: icon, title and time, then the message. */
.push, .nudge {
  position: absolute; z-index: 2;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon title time" "icon body body";
  column-gap: 3.1cqw; align-items: center;
  color: var(--ink); pointer-events: none;
}
.push { left: 3.3%; right: 3.3%; top: 5.9%; padding: 3.2cqw 4.2cqw 3.3cqw 3.3cqw; border-radius: 6.6cqw; font-size: 3.5cqw; line-height: 1.28; letter-spacing: -0.01em; opacity: 0; transform: translateY(-140%); will-change: transform; }
.push-icon { grid-area: icon; width: 9.4cqw; height: 9.4cqw; border-radius: 22.5%; }
.push-title { grid-area: title; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; align-self: end; }
.push-time { grid-area: time; color: var(--secondary); font-size: .88em; align-self: end; }
.push-body { grid-area: body; align-self: start; }
.phone:not(.gl) .push, .habits-display:not(.gl) .nudge, .habits-display:not(.gl) .chip {
  background: var(--glass-fill); -webkit-backdrop-filter: blur(1.375rem) saturate(1.8); backdrop-filter: blur(1.375rem) saturate(1.8);
  box-shadow: inset 0 0 0 .5px var(--hairline), inset 0 1px 0 var(--glass-edge), var(--glass-shadow);
}

/* Habits: the display stays pinned and becomes each habit's instrument in turn. */

.habits { padding-block: calc(var(--section) * .7) var(--section); }
.habits-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "copy stage"; gap: 0 clamp(2rem, 6vw, 6rem); margin-top: clamp(1.5rem, 4vw, 3rem); }
.habits-stage { grid-area: stage; position: sticky; top: max(6rem, calc(50vh - 36vh)); align-self: start; height: min(72vh, 40rem); }
.habits-display { height: 100%; overflow: hidden; container-type: inline-size; }
.habits-copy { grid-area: copy; }
.chapter { min-height: 76vh; display: grid; align-content: center; gap: .875rem; padding-block: 6vh; opacity: .28; transition: opacity .5s; }
.chapter.active { opacity: 1; }
.chapter h3 { font-size: clamp(2.25rem, 4.2vw, 3.75rem); line-height: 1; letter-spacing: -0.045em; }
.chapter p { font-size: clamp(1.0625rem, 1.45vw, 1.3125rem); line-height: 1.42; letter-spacing: -0.015em; color: var(--secondary); max-width: 21em; }
.proof-kind { display: inline-flex; align-items: center; gap: .5625rem; margin-top: .25rem; font-size: .9375rem !important; color: var(--ink) !important; }
.proof-kind svg { width: 1.25rem; height: 1.25rem; }

.chip {
  position: absolute; z-index: 2; left: 0; top: 0; display: flex; align-items: center; height: 2.25rem; padding: 0 1rem; border-radius: 999px;
  font-size: .9375rem; font-weight: 600; letter-spacing: -0.015em; white-space: nowrap; pointer-events: none; opacity: 0;
}
.nudge { left: 5%; right: 5%; top: 5%; max-width: 26.25rem; margin-inline: auto; padding: .75rem 1rem .75rem .75rem; border-radius: 1.375rem; font-size: .875rem; line-height: 1.3; column-gap: .6875rem; opacity: 0; transform: translateY(-140%); will-change: transform; }
.nudge .push-icon { width: 2.25rem; height: 2.25rem; }

/* Crew: the race board. */

.crew { padding-block: calc(var(--section) * .6) var(--section); }
/* The board is a sheet of glass on the page; its week sits on it in a smaller glass chip. */
.board { margin-top: clamp(2.25rem, 4.5vw, 3.75rem); padding: clamp(1.125rem, 3vw, 2.125rem) clamp(1.125rem, 3vw, 2.375rem) clamp(.875rem, 2.4vw, 1.75rem); border-radius: 1.875rem; }
.board-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: clamp(.75rem, 1.6vw, 1.25rem); }
.board-head b { font-size: 1.0625rem; letter-spacing: -0.02em; }
.board-head span { padding: .4375rem .875rem; border-radius: 999px; font-size: .875rem; color: var(--secondary); }
.lanes { position: relative; list-style: none; margin: 0; padding: 0; display: grid; }
.lanes::after { content: ""; position: absolute; right: .5rem; top: .375rem; bottom: .375rem; width: .125rem; background: repeating-linear-gradient(180deg, var(--tertiary) 0 .125rem, transparent .125rem .4375rem); opacity: .7; z-index: 0; }
.lane { position: relative; display: grid; grid-template-columns: 2.5rem minmax(10.625rem, 15.625rem) minmax(0, 1fr); align-items: center; gap: 1rem; min-height: 3.75rem; }
.lane + .lane { border-top: 1px solid var(--hairline); }
.lane > img { width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; }
.lane-who { display: grid; line-height: 1.25; min-width: 0; }
.lane-who b { font-size: 1rem; font-weight: 600; letter-spacing: -0.015em; }
.lane-who span { display: inline-flex; align-items: center; gap: .375rem; font-size: .875rem; color: var(--secondary); }
.lane-who svg { width: .9375rem; height: .9375rem; flex: none; color: var(--ink); }
.lane-track { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; height: 1.625rem; }
.lane-track::before { content: ""; position: absolute; left: .5rem; right: .5rem; top: 50%; height: .125rem; margin-top: -1px; background: radial-gradient(circle, var(--tertiary) .05625rem, transparent .075rem) 0 50% / .4375rem .125rem repeat-x; opacity: .6; }
.lane-track i { position: relative; width: 1.125rem; height: 1.125rem; display: grid; place-items: center; }
.lane-track i::before { content: ""; width: .375rem; height: .375rem; border-radius: 50%; background: var(--tertiary); opacity: .55; }
.lane-track i.on::before { width: 1rem; height: 1rem; background: var(--lit); opacity: 1; }
.lane-track i.next::before { width: 1rem; height: 1rem; background: var(--glass-face); box-shadow: inset 0 0 0 .09375rem var(--tertiary); opacity: 1; }
.lane-track i.review::before { width: 1rem; height: 1rem; background: var(--glass-face); box-shadow: inset 0 0 0 .09375rem var(--ink); opacity: 1; }
.lane.kept .lane-track i.on::before { background: var(--kept); transition: background-color .3s; }
.lane-track i.now::before { animation: breathe 2.2s ease-in-out infinite; }
.js .lane-track i.on::before { transform: scale(var(--s, 1)); }
.js #board.play .lane-track i.on::before { animation: land var(--t-burst) var(--spring-burst) both; animation-delay: var(--d, 0s); }
@keyframes land { from { transform: scale(0); } }
.js #board:not(.play) .lane-track i.on::before { transform: scale(0); }
.lane .burst-host { position: absolute; right: .5625rem; top: 50%; width: 0; height: 0; }

/* Money */

.money { position: relative; padding-block: calc(var(--section) * .6) var(--section); }
.money-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem clamp(2.5rem, 7vw, 7rem); margin-top: clamp(2.25rem, 4.5vw, 3.75rem); align-items: start; }
.win { max-width: 32.5rem; }
.win-display { aspect-ratio: 1 / 1.02; display: grid; place-items: center; text-align: center; overflow: hidden; }
.win-face { position: relative; z-index: 2; display: grid; justify-items: center; padding: 1.5rem; }
.win-week { font-size: .9375rem; color: var(--secondary); }
.win-label { margin-top: clamp(1.25rem, 3vw, 2.125rem); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; }
/* The figure is what's centred, under the label; the small $ hangs off its left, outside the box. And it's centred by
   its ink: in tabular figures the 1 stands well in from the left of its box, and the tight spacing takes the 6 a hair
   past the right, so the box's middle is right of the figure's. It's moved back by that much (left), $ and all. */
.win-amount { position: relative; left: -.0625em; margin-top: .375rem; font-size: clamp(4.75rem, 9.6vw, 8.25rem); font-weight: 700; line-height: 1; letter-spacing: -0.055em; font-variant-numeric: tabular-nums; }
.win-dollar { position: absolute; right: 100%; top: .14em; font-size: .46em; margin-right: .04em; letter-spacing: 0; }
.win-kept { display: inline-flex; align-items: center; gap: .625rem; margin-top: clamp(1.125rem, 2.4vw, 1.75rem); font-size: 1rem; font-weight: 500; }
.win-dots { display: inline-flex; gap: .1875rem; }
.win-dots i { width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--kept); }
.js .win:not(.played) .win-dots i { transform: scale(0); }
.js .win.played .win-dots i { animation: land var(--t-burst) var(--spring-burst) both; animation-delay: calc(1.15s + var(--i, 0) * 60ms); }
/* Under the Win, a glass sheet with your own money. */
.win-sheet { margin-top: 1.125rem; padding: .25rem 1.375rem 1.125rem; border-radius: 1.625rem; }
.win-rows { margin: 0; }
.win-rows div { display: flex; justify-content: space-between; gap: 1rem; padding: .875rem 0; border-bottom: 1px solid var(--hairline); }
.win-rows dt { color: var(--secondary); }
.win-rows dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.win-rows .gained dt { color: var(--ink); }
.win-rows .gained dd { color: var(--kept); }
.win-friends { display: flex; align-items: center; gap: .75rem; margin: 1rem 0 0; font-size: .9375rem; color: var(--secondary); }
.faces { display: flex; flex: none; }
.faces img { width: 1.875rem; height: 1.875rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 .125rem var(--glass-face); }
.faces img + img { margin-left: -.5rem; }
/* The rules of money: one glass sheet, the stake raised on it as a chip. */
.free-list { padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: 1.875rem; }
.free + .free { margin-top: clamp(1.25rem, 2.4vw, 1.75rem); padding-top: clamp(1.25rem, 2.4vw, 1.75rem); border-top: 1px solid var(--hairline); }
.free h3 { font-size: clamp(1.5rem, 2.2vw, 1.875rem); letter-spacing: -0.03em; line-height: 1.1; }
.free p { margin-top: .5rem; font-size: clamp(1rem, 1.25vw, 1.125rem); color: var(--secondary); max-width: 27em; }
.free .free-stake { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin: 0 0 .875rem; padding: .5rem .875rem .5rem .75rem; border-radius: 999px; font-size: .875rem; color: var(--secondary); }
.free .free-stake b { color: var(--ink); font-weight: 600; }
.free-stake svg { width: 1.0625rem; height: 1.0625rem; color: var(--ink); }

/* The end card */

.get { position: relative; padding-block: calc(var(--section) * .8) calc(var(--section) * 1.1); text-align: center; }
.get-inner { display: grid; justify-items: center; }
/* The mark, poured in glass (logo.js); the SVG lands in its place without WebGL2. */
.logo-land { position: relative; isolation: isolate; width: clamp(7rem, 11vw, 10rem); aspect-ratio: 1; margin-bottom: clamp(2.25rem, 4.4vw, 3.5rem); color: var(--kept); }
.logo-land.gl svg { visibility: hidden; }
.logo-land svg { width: 100%; height: 100%; overflow: visible; }
.ld { fill: currentColor; transform-box: fill-box; transform-origin: center; }
.ld-ring { fill: none; stroke: currentColor; stroke-width: 1.1; }
.get h2 { font-size: clamp(2.875rem, 6.6vw, 6rem); line-height: .98; letter-spacing: -0.052em; }
/* The dock: the app, in glass. */
.dock { display: flex; align-items: center; gap: .875rem; margin-top: clamp(1.875rem, 3.6vw, 2.75rem); padding: .75rem 1.75rem .75rem .75rem; border-radius: 1.75rem; text-align: left; }
.dock-icon { width: 3.25rem; height: 3.25rem; border-radius: 22.5%; box-shadow: 0 0 0 .5px var(--hairline); }
.dock-text { display: grid; line-height: 1.25; }
.dock-text b { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; }
.dock-text span { font-size: .9375rem; color: var(--secondary); }
.domain { margin-top: 1.125rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em; }

/* Burst: five dots out from a success. */
.burst-host { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 3; }
.hero-pill .burst-host { left: 1.625rem; }
.burst-dot { position: absolute; left: 0; top: 0; border-radius: 50%; background: var(--kept); pointer-events: none; will-change: transform, opacity; }
.burst-dot.ring { background: none; box-shadow: inset 0 0 0 var(--ring, .09375rem) var(--kept); }

/* Footer */

/* The footer: a glass capsule, like the nav's, to close the page. */
.footer { padding-block: .5rem calc(1.75rem + env(safe-area-inset-bottom)); }
.footer-bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; flex-wrap: wrap; min-height: 3.75rem; padding: .625rem 1.625rem; border-radius: 1.875rem; font-size: .875rem; color: var(--secondary); }
.footer .brand { color: var(--ink); font-size: 1rem; }
.footer .brand .mark { width: 1.25rem; height: 1.25rem; }
.footer nav { display: flex; gap: 1.375rem; }
.footer nav a { text-decoration: none; }
.footer nav a:hover { color: var(--ink); }

/* Entrances: rise 18, un-blur from 6, the app's entrance spring, staggered 0.06 s. */

.js .reveal { opacity: 0; transform: translateY(1.125rem); filter: blur(.375rem); }
.js .reveal.in { opacity: 1; transform: none; filter: none; transition: opacity .45s ease-out var(--d, 0s), transform var(--t-entrance) var(--spring-entrance) var(--d, 0s), filter .5s ease-out var(--d, 0s); }
.js.no-motion-fallback .reveal { opacity: 1; transform: none; filter: none; }

/* Theme change: the new appearance opens out from the switch. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* Reduce Motion (or ?still): everything settled, nothing decorative moves. */
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.in { opacity: 1; transform: none; filter: none; transition: none; }
  .js .hero h1 .marker, .js .hero h1.in .marker { color: var(--on-brand); animation: none; }
  .js .hero h1 .marker::before { transform: rotate(-1.4deg); transition: none; }
  .js #board .lane-track i.on::before, .js #board:not(.play) .lane-track i.on::before { animation: none; transform: none; }
  .proof-list.auto button[aria-current="true"]::after { animation: none; opacity: 0; }
  .chapter { transition: none; }
  .lane-track i.now::before { animation: none; }
  .js .win .win-dots i, .js .win:not(.played) .win-dots i { animation: none; transform: none; }
  .ticker-track { animation: none; }
}
.still .reveal, .still .reveal.in { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
.still .hero h1 .marker { color: var(--on-brand) !important; animation: none !important; }
.still .hero h1 .marker::before { transform: rotate(-1.4deg) !important; transition: none !important; }
.still #board .lane-track i.on::before { animation: none !important; transform: none !important; }
.still .proof-list.auto button[aria-current="true"]::after { animation: none; opacity: 0; }
.still .lane-track i.now::before { animation: none; }
.still .win .win-dots i { animation: none !important; transform: none !important; }
.still .ticker-track { animation: none; }

/* Narrower screens */

@media (max-width: 1224px) {
  .nav-links a { padding: 0 .6875rem; }
  .lane { grid-template-columns: 2.5rem minmax(9.375rem, 13.125rem) minmax(0, 1fr); }
}

@media (max-width: 947px) {
  .nav-links { display: none; }
  .proof-grid { grid-template-columns: minmax(0, 1fr); }
  .proof-copy { display: contents; }
  .proof-copy h2 { order: 1; }
  .proof-copy .eyebrow { margin-bottom: -2rem; }
  .proof-copy .body { order: 2; margin-top: -2rem; }
  .proof-stage { order: 3; justify-self: center; margin: .5rem 0 0; width: min(19.375rem, 78vw); }
  .proof-list { order: 4; margin: 0 auto; width: 100%; }
  .habits-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "copy"; }
  /* Pinned under the nav, the display sits on a band of frosted glass, so the words scrolling past blur away. */
  .habits-stage { z-index: 3; top: 4.75rem; height: auto; margin-inline: calc(-1 * var(--margin)); padding: 0 var(--margin) .875rem; background: color-mix(in srgb, var(--canvas) 80%, transparent); -webkit-backdrop-filter: blur(1.125rem) saturate(1.4); backdrop-filter: blur(1.125rem) saturate(1.4); }
  .habits-display { height: min(50vh, 27.5rem); }
  .habits-stage::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 4.75rem; background: color-mix(in srgb, var(--canvas) 80%, transparent); -webkit-backdrop-filter: blur(1.125rem) saturate(1.4); backdrop-filter: blur(1.125rem) saturate(1.4); opacity: 0; transition: opacity .2s; pointer-events: none; }
  .habits-stage.stuck::before { opacity: 1; }
  .chapter { min-height: 58vh; padding-block: 4vh; }
  .money-grid { grid-template-columns: minmax(0, 1fr); }
  .win { max-width: 35rem; }
}

@media (max-width: 640px) {
  .nav-bar { padding-left: .875rem; }
  .nav .brand { margin-right: .25rem; }
  .hero-copy { grid-template-columns: minmax(0, 1fr); grid-template-areas: "eye" "title" "lede" "act" "crew"; gap: 1.125rem; }
  .hero-eyebrow { margin-bottom: 0; }
  .hero .actions { padding-bottom: 0; margin-top: .375rem; }
  .hero .actions .capsule { padding: 0 1.5rem; }
  .hero-display { aspect-ratio: .72; min-height: 0; border-radius: 1.625rem; }
  /* The bar across the top, the caption under it. */
  .hero-display .habit-bar { left: 0; right: 0; top: .75rem; width: max-content; margin-inline: auto; }
  .habit-bar button { width: 2.25rem; height: 2.25rem; }
  .hero-caption { left: 0; right: 0; top: 4rem; justify-items: center; text-align: center; }
  .hero-pill { bottom: 1.125rem; height: 2.875rem; font-size: 1rem; }
  .lane { grid-template-columns: 2.25rem minmax(0, 1fr); grid-template-areas: "img who" "track track"; gap: .25rem .75rem; padding: .75rem 0 .625rem; }
  .lane > img { grid-area: img; width: 2.25rem; height: 2.25rem; }
  .lane-who { grid-area: who; }
  .lane-track { grid-area: track; margin-top: .375rem; }
  .lanes::after { display: none; }
  .board, .free-list { border-radius: 1.625rem; }
  .display { border-radius: 1.625rem; }
}

@media (max-width: 380px) {
  .seg button { width: 1.875rem; height: 1.875rem; }
  .seg-thumb { width: 1.875rem; height: 1.875rem; }
  :root[data-theme="dark"] .seg-thumb { transform: translateX(1.875rem); }
  .nav .capsule-sm { padding: 0 .875rem; }
}