/* Rainge · rainge.app
   Layout: a night page (After Hours) with two day spreads. The hero is one fixed phone over a scene that is sized
   from the phone, so the tripod and the hand always line up; the read pins a real swing and scrubs it frame by frame.
   Colour comes from the app's asset catalog (Ink, Bg, Surface, Rule, Ball, Status*). Yellow means "this one" only. */

:root {
  color-scheme: dark;
  /* Night (the app's dark appearance) */
  --turf: #0D1A14;
  --turf-deep: #08120D;
  --surface: #16261E;
  --raised: #1C3026;
  --rule: #2A3A32;
  --line: #5E6B66;
  --cream: #F2E9D6;
  --cream-hi: #FBF7EF;
  --haze: #A3ABA2;
  --ball: #F2D04B;
  --good: #30D158;
  --watch: #FF9F40;
  --workon: #FF6165;
  /* Day (the app's light appearance) */
  --day-bg: #F2E9D6;
  --day-surface: #FBF7EF;
  --day-col: #EAE0CB;
  --day-rule: #D9D0BE;
  --day-ink: #0D1A14;
  --day-muted: #4F5B55;
  --day-ball: #8A6A0E;
  --day-good: #1B6E30;
  --day-watch: #9A4500;
  --day-workon: #C20013;
  /* On video and stills (SwingOverlay.swift): the feel mint, amber references, the drift red */
  --feel: #5CE69E;
  --amber: #FFB833;
  --drift: #FF6166;

  --display: "Archivo", "SF Pro Display", -apple-system, system-ui, sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --gutter: clamp(16px, 4vw, 56px);
  --ph: clamp(460px, 74vh, 720px);
  --pw: calc(var(--ph) * .4843);
  /* The hero's sticky stage: the phone holds still for three steps of scroll */
  --pin-h: calc(var(--ph) + 120px);
  --step: 40vh;
  /* Centred in the space under the nav, leaving room for the line under the pill */
  --stick-top: max(calc(var(--nav-h) + 8px), calc(var(--nav-h) + (100vh - var(--nav-h) - var(--ph) - 44px) / 2));
  --nav-h: 64px;
  --sec: clamp(104px, 15vh, 190px);
  --r-l: 28px;
  --r-m: 20px;
  --glass: rgba(13, 26, 20, .56);
  --glass-line: rgba(242, 233, 214, .14);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--turf);
  color: var(--cream);
  font: 16px/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--ball); color: var(--turf); }
:focus-visible { outline: 2px solid var(--ball); outline-offset: 3px; border-radius: 6px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 100; background: var(--cream); color: var(--turf); padding: 10px 14px; border-radius: 10px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 16px; }
.wrap { max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); }
.mono { font: 500 11px/1.2 var(--mono); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.ball-ink { color: var(--ball); }

/* ---------- Type ---------- */
.eyebrow { margin: 0; font: 600 12px/1.2 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--haze); }
.eyebrow .real-tag { color: var(--cream); }
.h2 {
  margin: 0;
  font-family: var(--display); font-stretch: 112.5%; font-weight: 720;
  font-size: clamp(36px, 5.2vw, 78px); line-height: .98; letter-spacing: -.022em;
  text-wrap: balance; max-width: 15ch;
}
.h3 { margin: 0; font-family: var(--display); font-stretch: 112.5%; font-weight: 700; font-size: clamp(26px, 2.7vw, 38px); line-height: 1.04; letter-spacing: -.015em; text-wrap: balance; }
.lede { margin: 0; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; color: rgba(242, 233, 214, .8); max-width: 54ch; text-wrap: pretty; }
.lead-quote { margin: 0 0 10px; font-family: var(--display); font-stretch: 100%; font-weight: 600; font-size: clamp(17px, 1.4vw, 21px); color: var(--haze); }
.prem { display: inline-block; margin-left: 6px; font: 600 10px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--ball); border: 1px solid rgba(242, 208, 75, .45); border-radius: 999px; padding: 3px 7px 2px; vertical-align: 2px; }
.split .line-mask { overflow: clip; padding-bottom: .08em; margin-bottom: -.08em; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 50px; padding: 0 24px; border-radius: 999px; border: 0;
  font: 650 15px/1 var(--text); letter-spacing: .005em; text-decoration: none; cursor: pointer;
  transition: transform .29s cubic-bezier(.3, 0, .2, 1), background-color .29s, box-shadow .29s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn--sm { height: 38px; padding: 0 16px; font-size: 14px; }
.btn--cream { background: var(--cream); color: var(--turf); box-shadow: 0 10px 30px -12px rgba(242, 233, 214, .5); }
.btn--cream:hover { background: var(--cream-hi); }
.btn--glass { background: var(--glass); color: var(--cream); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }
.btn .play { width: 18px; height: 18px; border-radius: 50%; background: var(--cream); position: relative; }
.btn .play::after { content: ""; position: absolute; left: 7px; top: 5px; border: 4px solid transparent; border-left: 6px solid var(--turf); border-right: 0; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; z-index: 50; inset: 0 0 auto 0;
  padding: env(safe-area-inset-top, 0px) var(--gutter) 0;
  height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  transition: background-color .4s, border-color .4s, -webkit-backdrop-filter .4s, backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled { background: rgba(10, 20, 15, .66); border-bottom-color: rgba(242, 233, 214, .08); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); }
.nav__mark { color: var(--cream); display: block; width: 104px; }
.nav__mark svg { width: 100%; height: auto; overflow: visible; }
.nav__links { display: flex; gap: 28px; font-size: 14px; }
.nav__links a { text-decoration: none; color: rgba(242, 233, 214, .74); transition: color .2s; }
.nav__links a:hover { color: var(--cream); }
.nav__end { display: flex; align-items: center; gap: 10px; }
.sound { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 12px; border-radius: 999px; border: 1px solid var(--glass-line); background: var(--glass); cursor: pointer; font-size: 13px; color: var(--haze); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.sound__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.sound__bars i { width: 2px; height: 3px; background: currentColor; border-radius: 1px; transition: height .3s; }
.sound[aria-pressed="true"] { color: var(--cream); }
.sound[aria-pressed="true"] .sound__bars i { animation: eq 1s ease-in-out infinite; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(2) { animation-delay: -.3s; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(3) { animation-delay: -.6s; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(4) { animation-delay: -.15s; }
@keyframes eq { 0%, 100% { height: 3px; } 50% { height: 12px; } }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; overflow: clip; background: var(--turf); padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + clamp(24px, 4.5vh, 56px)); }
/* Layers: the scene (z -1) under the headline (z 1) under the phone, cards and pill (z 2). As the phone rises it
   slides over the fading headline. The scene and the phone pin together, as two sticky layers of one height. */
.hero__copy { position: relative; z-index: 1; display: grid; justify-items: center; gap: 18px; will-change: transform, opacity; text-align: center; padding-inline: var(--gutter); }
.eyebrow--glass { display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-line); color: rgba(242, 233, 214, .86); letter-spacing: .11em; font-size: 11px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.eyebrow--glass .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 4px rgba(48, 209, 88, .18); }
.hero__title {
  margin: 0; font-family: var(--display); font-stretch: 112.5%; font-weight: 760;
  font-size: clamp(44px, 7.4vw, 116px); line-height: .9; letter-spacing: -.032em;
  text-shadow: 0 2px 40px rgba(0, 0, 0, .28);
}
.hero__title .ln { display: block; white-space: nowrap; }
.hero__title .m { display: inline-block; overflow: clip; vertical-align: top; padding: .02em .02em .12em; margin: -.02em -.02em -.12em; }
.hero__title .w { display: inline-block; }
.stop { position: relative; top: -.025em; display: inline-block; width: .23em; height: .23em; margin-left: .05em; vertical-align: baseline; }
.stop__body { position: absolute; inset: 0; transform-origin: 50% 100%; }
.stop__ball { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 50%; filter: drop-shadow(0 .02em .03em rgba(0, 0, 0, .35)); }
.stop__shadow { position: absolute; left: -10%; right: -10%; bottom: -.035em; height: .06em; border-radius: 50%; background: rgba(0, 0, 0, .55); filter: blur(2px); transform-origin: center; }
.hero__sub { margin: 0; max-width: 54ch; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; color: rgba(242, 233, 214, .88); text-shadow: 0 1px 18px rgba(0, 0, 0, .45); text-wrap: pretty; }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 4px; }

.stage { position: relative; height: calc(var(--pin-h) + 3 * var(--step)); margin-top: clamp(22px, 4vh, 44px); }
.stage__pin { position: sticky; z-index: 2; top: var(--stick-top); height: var(--pin-h); }
.stage__bg { position: sticky; z-index: -1; top: var(--stick-top); height: var(--pin-h); margin-bottom: calc(-1 * var(--pin-h)); pointer-events: none; }
@supports (height: 100svh) { :root { --stick-top: max(calc(var(--nav-h) + 8px), calc(var(--nav-h) + (100svh - var(--nav-h) - var(--ph) - 44px) / 2)); } }
.rig { position: absolute; top: 0; left: calc(50% - var(--pw) / 2); width: var(--pw); height: var(--ph); transform-style: preserve-3d; }

/* Scene plates: 3:2, 2.4 phone-heights tall, placed so the tripod head in the Swing plate meets the phone's foot. */
.plates {
  position: absolute; z-index: -2; pointer-events: none;
  width: calc(var(--ph) * 3.6); height: calc(var(--ph) * 2.4);
  left: calc(50% - var(--ph) * 1.8); top: calc(var(--ph) * -.8);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.plate { position: absolute; inset: 0; background-size: 100% 100%; opacity: 0; transform: scale(1.05); transition: opacity .9s cubic-bezier(.4, 0, .2, 1), transform 2.2s cubic-bezier(.2, 0, .1, 1); }
.plate::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(8, 18, 13, .97) 0%, rgba(8, 18, 13, .86) 10%, rgba(8, 18, 13, .5) 21%, rgba(8, 18, 13, .12) 32%, rgba(8, 18, 13, 0) 44%, rgba(8, 18, 13, 0) 68%, rgba(8, 18, 13, .55) 75%, rgba(13, 26, 20, .96) 81%, rgba(13, 26, 20, 1) 84%),
  radial-gradient(60% 50% at 50% 55%, transparent 40%, rgba(8, 18, 13, .35) 100%); }
.plate--swing { background-image: url("../assets/scenes/swing.jpg"); }
.plate--understand { background-image: url("../assets/scenes/understand.jpg"); }
.plate--improve { background-image: url("../assets/scenes/improve.jpg"); }
.plate.is-on { opacity: 1; transform: scale(1); z-index: 2; }
.plate.was-on { opacity: 1; transform: scale(1); z-index: 1; transition: none; }

.motes { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; transition: opacity 1s; }
.hero[data-step="understand"] .motes { opacity: .25; }

.handw { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hand { position: absolute; left: -70.02%; top: -14.32%; width: 239.81%; max-width: none; pointer-events: none; opacity: 0; transition: opacity .6s cubic-bezier(.4, 0, .2, 1); filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .4)); }
.hero[data-step="understand"] .hand, .hero[data-step="improve"] .hand { opacity: 1; }
/* The tripod: one cut-out photo, its phone measured to sit exactly under ours. Only on the Swing scene. */
.tripod { position: absolute; left: -102.4%; top: -9.01%; width: 304.8%; max-width: none; pointer-events: none; opacity: 0; transition: opacity .6s cubic-bezier(.4, 0, .2, 1); filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45)) brightness(.92); }
.hero[data-step="swing"] .tripod { opacity: 1; }

/* ---------- The phone ---------- */
.device {
  position: absolute; inset: 0; z-index: 1;
  border-radius: calc(var(--pw) * .155); padding: calc(var(--pw) * .026);
  background: linear-gradient(150deg, #474d49 0%, #1a1e1c 18%, #0b0d0c 60%, #1d211f 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1.5px 0 rgba(255, 255, 255, .14), 0 50px 90px -30px rgba(0, 0, 0, .7), 0 22px 40px -10px rgba(0, 0, 0, .45);
  transform-style: preserve-3d;
}
.device::before, .device::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #2a2f2c; }
.device::before { left: -2px; top: 22%; height: 9%; box-shadow: 0 calc(var(--ph) * .12) 0 #2a2f2c; }
.device::after { right: -2px; top: 28%; height: 13%; }
.device__screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--pw) * .13); background: #000; container-type: inline-size; isolation: isolate; }
.device__screen::after { content: ""; position: absolute; z-index: 20; left: 50%; top: calc(100cqw / 393 * 11); width: calc(100cqw / 393 * 122); height: calc(100cqw / 393 * 35); transform: translateX(-50%); border-radius: 999px; background: #000; }

/* App screens, laid out in iOS points: 1pt = 100cqw / 393 */
.scr { --pt: calc(100cqw / 393); position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: scale(1.015); transition: opacity .45s, transform .71s cubic-bezier(.2, 0, .1, 1), visibility 0s .45s; font-family: var(--text); color: var(--cream); background: var(--turf); }
.scr.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s .12s, transform .71s cubic-bezier(.2, 0, .1, 1), visibility 0s; }
.ios-status { position: absolute; z-index: 10; top: calc(var(--pt) * 17); left: calc(var(--pt) * 34); right: calc(var(--pt) * 26); display: flex; justify-content: space-between; align-items: center; font-size: calc(var(--pt) * 16.5); }
.ios-status b { font-weight: 600; letter-spacing: -.01em; }
.ios-icons { width: calc(var(--pt) * 70); height: calc(var(--pt) * 13); background: no-repeat right center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 13' fill='%23F2E9D6'%3E%3Crect x='0' y='8' width='3' height='5' rx='1'/%3E%3Crect x='5' y='6' width='3' height='7' rx='1'/%3E%3Crect x='10' y='3.5' width='3' height='9.5' rx='1'/%3E%3Crect x='15' y='1' width='3' height='12' rx='1'/%3E%3Cpath d='M30 4.2a8.6 8.6 0 0 1 11.6 0l-1.3 1.4a6.7 6.7 0 0 0-9 0zm2.6 2.8a4.9 4.9 0 0 1 6.4 0l-1.4 1.4a2.9 2.9 0 0 0-3.6 0zm3.2 2.6 1.5 1.6-1.5 1.6-1.5-1.6z'/%3E%3Crect x='46.5' y='1.5' width='20' height='10' rx='3' fill='none' stroke='%23F2E9D6' stroke-opacity='.45'/%3E%3Crect x='48' y='3' width='14.5' height='7' rx='1.7'/%3E%3Crect x='67.6' y='4.6' width='1.6' height='3.8' rx='.8' fill-opacity='.45'/%3E%3C/svg%3E"); }

/* Swing: the camera */
.scr--cam { background: #111; }
.cam__feed { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; transform: scale(1.08); animation: breathe 11s ease-in-out infinite alternate; }
@keyframes breathe { to { transform: scale(1.12) translate3d(-1%, 0, 0); } }
.scr--cam::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, transparent 22%, transparent 52%, rgba(0, 0, 0, .7) 100%); }
.cam__top { position: absolute; z-index: 3; top: calc(var(--pt) * 58); left: calc(var(--pt) * 16); right: calc(var(--pt) * 16); display: flex; align-items: center; justify-content: space-between; }
.g-btn, .g-pill { -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4); background: rgba(40, 44, 42, .42); border: .5px solid rgba(255, 255, 255, .22); color: #fff; }
.g-btn--x { width: calc(var(--pt) * 42); height: calc(var(--pt) * 42); border-radius: 50%; position: relative; }
.g-btn--x::before, .g-btn--x::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--pt) * 15); height: calc(var(--pt) * 2); background: #fff; border-radius: 2px; transform: translate(-50%, -50%) rotate(45deg); }
.g-btn--x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.g-pill { display: inline-flex; align-items: center; height: calc(var(--pt) * 34); padding: 0 calc(var(--pt) * 14); border-radius: 999px; font-size: calc(var(--pt) * 14); font-weight: 600; white-space: nowrap; }
.g-pill--sm { font-size: calc(var(--pt) * 13); padding: 0 calc(var(--pt) * 11); }
.cam__rec { position: absolute; z-index: 3; top: calc(var(--pt) * 110); left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: calc(var(--pt) * 9); padding: calc(var(--pt) * 9) calc(var(--pt) * 18); border-radius: 999px; background: #E5342B; color: #fff; font-size: calc(var(--pt) * 17); font-weight: 700; letter-spacing: .04em; box-shadow: 0 calc(var(--pt) * 6) calc(var(--pt) * 22) rgba(229, 52, 43, .4); }
.cam__rec b { font-size: calc(var(--pt) * 28); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.rec-dot { width: calc(var(--pt) * 11); height: calc(var(--pt) * 11); border-radius: 50%; background: #fff; animation: blink 1.2s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: .25; } }
.cam__badge { position: absolute; z-index: 3; top: calc(var(--pt) * 170); right: calc(var(--pt) * 16); width: calc(var(--pt) * 92); padding: calc(var(--pt) * 6) calc(var(--pt) * 9); border-radius: 999px; background: rgba(13, 26, 20, .55); color: var(--cream); }
.cam__badge svg { width: 100%; height: auto; }
.cam__found { position: absolute; z-index: 3; left: calc(var(--pt) * 16); top: calc(var(--pt) * 170); display: inline-flex; align-items: center; gap: calc(var(--pt) * 7); height: calc(var(--pt) * 32); padding: 0 calc(var(--pt) * 12) 0 calc(var(--pt) * 8); border-radius: 999px; background: rgba(13, 26, 20, .6); font-size: calc(var(--pt) * 13); font-weight: 600; }
.cam__found b { font-variant-numeric: tabular-nums; }
.cam__found .tick { width: calc(var(--pt) * 18); height: calc(var(--pt) * 18); border-radius: 50%; background: var(--good); position: relative; }
.cam__found .tick::after { content: ""; position: absolute; left: 32%; top: 22%; width: 26%; height: 44%; border: solid var(--turf); border-width: 0 calc(var(--pt) * 2.2) calc(var(--pt) * 2.2) 0; transform: rotate(45deg); }
.cam__found.is-pop { animation: pop .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes pop { 30% { transform: scale(1.12); } }
.cam__thought { position: absolute; z-index: 3; left: calc(var(--pt) * 22); right: calc(var(--pt) * 22); bottom: calc(var(--pt) * 148); text-align: center; display: grid; gap: calc(var(--pt) * 8); text-shadow: 0 1px 14px rgba(0, 0, 0, .55); }
.cam__thought small { font-size: calc(var(--pt) * 13); font-weight: 600; color: rgba(255, 255, 255, .85); }
.cam__thought strong { font-family: var(--display); font-stretch: 112.5%; font-weight: 700; font-size: calc(var(--pt) * 44); line-height: 1.02; letter-spacing: -.015em; color: #fff; }
.cam__thought em { font-style: normal; font-size: calc(var(--pt) * 12.5); line-height: 1.35; color: rgba(255, 255, 255, .78); }
.cam__bar { position: absolute; z-index: 3; left: calc(var(--pt) * 18); right: calc(var(--pt) * 18); bottom: calc(var(--pt) * 38); display: flex; align-items: center; justify-content: space-between; }
.cam__side { display: flex; align-items: center; gap: calc(var(--pt) * 8); width: calc(var(--pt) * 110); font-size: calc(var(--pt) * 12.5); line-height: 1.2; color: rgba(255, 255, 255, .88); }
.cam__side--r { justify-content: flex-end; text-align: right; }
.cam__side .ring { flex: none; width: calc(var(--pt) * 26); height: calc(var(--pt) * 26); border-radius: 50%; border: calc(var(--pt) * 2) solid rgba(255, 255, 255, .7); position: relative; }
.cam__side .ring::after { content: ""; position: absolute; inset: 28%; border-radius: 50%; background: #fff; }
.cam__stop { width: calc(var(--pt) * 78); height: calc(var(--pt) * 78); border-radius: 50%; border: calc(var(--pt) * 4) solid #fff; display: grid; place-items: center; }
.cam__stop i { width: calc(var(--pt) * 30); height: calc(var(--pt) * 30); border-radius: calc(var(--pt) * 7); background: #E5342B; }

/* Understand: the Library */
.lib__top { position: absolute; top: calc(var(--pt) * 56); right: calc(var(--pt) * 16); }
.lib__top .g-pill { background: rgba(242, 233, 214, .1); }
.lib__title { position: absolute; top: calc(var(--pt) * 98); left: calc(var(--pt) * 20); margin: 0; font-size: calc(var(--pt) * 34); font-weight: 700; letter-spacing: -.01em; }
.lib__meta { position: absolute; top: calc(var(--pt) * 142); left: calc(var(--pt) * 20); margin: 0; font-size: calc(var(--pt) * 13); color: var(--haze); }
.lib__chips { position: absolute; top: calc(var(--pt) * 170); left: calc(var(--pt) * 16); right: 0; display: flex; gap: calc(var(--pt) * 7); overflow: hidden; }
.lib__chips span { flex: none; height: calc(var(--pt) * 32); display: inline-flex; align-items: center; gap: calc(var(--pt) * 5); padding: 0 calc(var(--pt) * 13); border-radius: 999px; background: rgba(242, 233, 214, .09); font-size: calc(var(--pt) * 13.5); font-weight: 600; }
.lib__chips span::after { content: ""; width: calc(var(--pt) * 6); height: calc(var(--pt) * 6); border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-30%); opacity: .7; }
.lib__day { position: absolute; top: calc(var(--pt) * 222); left: calc(var(--pt) * 20); right: calc(var(--pt) * 20); display: flex; justify-content: space-between; align-items: flex-start; }
.lib__day b { display: block; font-size: calc(var(--pt) * 20); font-weight: 700; }
.lib__day small { font-size: calc(var(--pt) * 13); color: var(--haze); }
.lib__day span { font-size: calc(var(--pt) * 14); font-weight: 600; }
.lib__day--next { top: calc(var(--pt) * 560); }
.lib__grid { position: absolute; top: calc(var(--pt) * 278); left: calc(var(--pt) * 14); right: calc(var(--pt) * 14); display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--pt) * 3); }
.lib__grid figure { position: relative; margin: 0; aspect-ratio: 378 / 467; overflow: hidden; border-radius: calc(var(--pt) * 4); background: #1c2a23; }
.lib__grid img { width: 100%; height: 100%; object-fit: cover; }
.lib__grid figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .65)); }
.lib__grid b, .lib__grid em { position: absolute; z-index: 1; bottom: calc(var(--pt) * 4); font-size: calc(var(--pt) * 10.5); font-weight: 700; font-style: normal; }
.lib__grid b { left: calc(var(--pt) * 5); }
.lib__grid em { right: calc(var(--pt) * 5); font-weight: 600; }
.lib__grid .t { position: absolute; z-index: 1; top: calc(var(--pt) * 4); left: calc(var(--pt) * 4); font-style: normal; font-size: calc(var(--pt) * 9); font-weight: 700; padding: calc(var(--pt) * 2) calc(var(--pt) * 5); border-radius: calc(var(--pt) * 4); background: rgba(0, 0, 0, .5); }
.t--heel { color: var(--watch); } .t--hosel { color: var(--workon); }
.lib__grid .is-pick { outline: calc(var(--pt) * 2.5) solid var(--ball); outline-offset: calc(var(--pt) * -2.5); }
.scr--lib.is-on .lib__grid figure { animation: found .6s both cubic-bezier(.2, .8, .2, 1); }
.scr--lib.is-on .lib__grid figure:nth-child(2) { animation-delay: .08s; } .scr--lib.is-on .lib__grid figure:nth-child(3) { animation-delay: .16s; }
.scr--lib.is-on .lib__grid figure:nth-child(4) { animation-delay: .24s; } .scr--lib.is-on .lib__grid figure:nth-child(5) { animation-delay: .32s; }
.scr--lib.is-on .lib__grid figure:nth-child(6) { animation-delay: .4s; } .scr--lib.is-on .lib__grid figure:nth-child(7) { animation-delay: .48s; }
.scr--lib.is-on .lib__grid figure:nth-child(8) { animation-delay: .56s; }
@keyframes found { from { opacity: 0; transform: scale(.9); } }

.app-bar { position: absolute; z-index: 5; left: calc(var(--pt) * 12); right: calc(var(--pt) * 12); bottom: calc(var(--pt) * 22); display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: calc(var(--pt) * 8); }
.app-start { grid-column: 1 / -1; display: flex; align-items: center; gap: calc(var(--pt) * 8); height: calc(var(--pt) * 48); padding: 0 calc(var(--pt) * 16); border-radius: 999px; background: rgba(36, 54, 45, .78); border: .5px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: calc(var(--pt) * 15); font-weight: 600; }
.app-start em { margin-left: auto; font-style: normal; font-size: calc(var(--pt) * 12.5); font-weight: 500; color: var(--haze); white-space: nowrap; }
.app-start em::before { content: "“ "; color: var(--ball); font-weight: 800; }
.bucket-i { width: calc(var(--pt) * 16); height: calc(var(--pt) * 15); border: calc(var(--pt) * 1.8) solid currentColor; border-top-width: calc(var(--pt) * 3.5); border-radius: 0 0 calc(var(--pt) * 4) calc(var(--pt) * 4); clip-path: polygon(0 0, 100% 0, 86% 100%, 14% 100%); }
.app-tabs { display: flex; height: calc(var(--pt) * 58); border-radius: 999px; padding: calc(var(--pt) * 4); background: rgba(36, 54, 45, .78); border: .5px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.app-tabs i { flex: 1; display: grid; place-items: end center; padding-bottom: calc(var(--pt) * 7); font-style: normal; font-size: calc(var(--pt) * 10.5); font-weight: 600; color: rgba(242, 233, 214, .75); border-radius: 999px; position: relative; }
.app-tabs i::before { content: ""; position: absolute; top: calc(var(--pt) * 9); width: calc(var(--pt) * 20); height: calc(var(--pt) * 17); border-radius: calc(var(--pt) * 4); background: currentColor; opacity: .9; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.app-tabs i:nth-child(1) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 17'%3E%3Cpath d='M10 0 20 8h-3v9h-5v-6H8v6H3V8H0z'/%3E%3C/svg%3E"); }
.app-tabs i:nth-child(2) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 17'%3E%3Crect x='1' y='0' width='8' height='7.5' rx='1.5'/%3E%3Crect x='11' y='0' width='8' height='7.5' rx='1.5'/%3E%3Crect x='1' y='9.5' width='8' height='7.5' rx='1.5'/%3E%3Crect x='11' y='9.5' width='8' height='7.5' rx='1.5'/%3E%3C/svg%3E"); }
.app-tabs i:nth-child(3) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 17'%3E%3Cpath d='M2 2h6v6.5C8 13 5.5 15.5 2 16v-2.6c1.6-.5 2.6-1.8 2.7-3.4H2zM12 2h6v6.5c0 4.5-2.5 7-6 7.5v-2.6c1.6-.5 2.6-1.8 2.7-3.4H12z'/%3E%3C/svg%3E"); }
.app-tabs i.on { background: rgba(242, 233, 214, .14); color: var(--ball); }
.app-coach { width: calc(var(--pt) * 58); height: calc(var(--pt) * 58); border-radius: 50%; background: rgba(36, 54, 45, .78); border: .5px solid rgba(255, 255, 255, .14); position: relative; }
.app-coach::after { content: ""; position: absolute; inset: 30%; background: var(--cream); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'%3E%3Cpath d='M3 0h14a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H8l-5 4v-4a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3zm2 5v2h10V5zm0 4v2h7V9z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'%3E%3Cpath d='M3 0h14a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H8l-5 4v-4a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3zm2 5v2h10V5zm0 4v2h7V9z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Improve: Home */
.home__avatar { position: absolute; top: calc(var(--pt) * 58); right: calc(var(--pt) * 18); width: calc(var(--pt) * 32); height: calc(var(--pt) * 32); }
.home__avatar svg { width: 100%; height: 100%; }
.home__date { position: absolute; top: calc(var(--pt) * 96); left: calc(var(--pt) * 20); margin: 0; font-size: calc(var(--pt) * 12.5); font-weight: 600; letter-spacing: .04em; color: var(--haze); }
.home__title { position: absolute; top: calc(var(--pt) * 114); left: calc(var(--pt) * 20); margin: 0; font-family: var(--display); font-stretch: 112.5%; font-weight: 700; font-size: calc(var(--pt) * 31); letter-spacing: -.01em; }
.home__card { position: absolute; top: calc(var(--pt) * 170); left: calc(var(--pt) * 14); right: calc(var(--pt) * 14); padding: calc(var(--pt) * 16); border-radius: calc(var(--pt) * 22); background: var(--surface); display: grid; gap: calc(var(--pt) * 8); }
.home__row { display: flex; justify-content: space-between; font-size: calc(var(--pt) * 11.5); font-weight: 600; letter-spacing: .06em; color: var(--haze); }
.home__row .wo { color: var(--workon); letter-spacing: .02em; }
.home__card strong { font-family: var(--display); font-stretch: 112.5%; font-weight: 700; font-size: calc(var(--pt) * 21); line-height: 1.12; }
.home__nums { display: flex; gap: calc(var(--pt) * 26); margin-top: calc(var(--pt) * 2); }
.home__nums span { display: grid; }
.home__nums b { font-family: var(--display); font-stretch: 62%; font-weight: 800; font-size: calc(var(--pt) * 40); line-height: 1; font-variant-numeric: tabular-nums; }
.home__nums small { font-size: calc(var(--pt) * 11); color: var(--haze); }
.home__nums .home__last { color: var(--workon); }
.home__thought { display: flex; align-items: center; gap: calc(var(--pt) * 10); margin-top: calc(var(--pt) * 6); padding-top: calc(var(--pt) * 12); border-top: 1px solid var(--rule); }
.home__thought .q { flex: none; width: calc(var(--pt) * 18); height: calc(var(--pt) * 14); background: var(--ball); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M0 0h8v7c0 5-3 8.5-8 9v-3c2.5-.7 3.8-2.4 4-5H0zM12 0h8v7c0 5-3 8.5-8 9v-3c2.5-.7 3.8-2.4 4-5h-4z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M0 0h8v7c0 5-3 8.5-8 9v-3c2.5-.7 3.8-2.4 4-5H0zM12 0h8v7c0 5-3 8.5-8 9v-3c2.5-.7 3.8-2.4 4-5h-4z'/%3E%3C/svg%3E") center / contain no-repeat; }
.home__thought span { display: grid; flex: 1; min-width: 0; }
.home__thought b { font-size: calc(var(--pt) * 15); font-weight: 650; }
.home__thought small { font-size: calc(var(--pt) * 11.5); color: var(--haze); }
.home__thought .chev { width: calc(var(--pt) * 8); height: calc(var(--pt) * 8); border: solid var(--haze); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); }
.home__swing { position: absolute; top: calc(var(--pt) * 452); left: calc(var(--pt) * 20); right: calc(var(--pt) * 20); display: flex; justify-content: space-between; align-items: baseline; }
.home__swing b { font-family: var(--display); font-stretch: 112.5%; font-size: calc(var(--pt) * 20); }
.home__swing span { font-size: calc(var(--pt) * 13.5); color: var(--haze); }
.home__dots, .home__labels { position: absolute; left: calc(var(--pt) * 22); right: calc(var(--pt) * 22); display: flex; justify-content: space-between; }
.home__dots { top: calc(var(--pt) * 494); }
.home__dots i { width: calc(var(--pt) * 13); height: calc(var(--pt) * 13); border-radius: 50%; background: rgba(242, 233, 214, .32); }
.home__dots i.w, .dots i.w { background: var(--watch); } .home__dots i.r, .dots i.r { background: var(--workon); } .home__dots i.g, .dots i.g { background: var(--good); }
.scr--home.is-on .home__dots i { animation: lit .5s both; }
.scr--home.is-on .home__dots i:nth-child(n) { animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes lit { from { transform: scale(.4); opacity: 0; } }
.home__labels { top: calc(var(--pt) * 513); font-size: calc(var(--pt) * 9.5); color: var(--haze); }
.home__labels span { width: calc(var(--pt) * 13); text-align: center; }
.home__note { position: absolute; top: calc(var(--pt) * 540); left: calc(var(--pt) * 20); right: calc(var(--pt) * 20); margin: 0; font-size: calc(var(--pt) * 13); line-height: 1.38; color: rgba(242, 233, 214, .78); }
.home__base { position: absolute; top: calc(var(--pt) * 604); left: calc(var(--pt) * 20); margin: 0; display: flex; align-items: center; gap: calc(var(--pt) * 7); font-size: calc(var(--pt) * 12.5); color: var(--haze); }
.home__base i { width: calc(var(--pt) * 13); height: calc(var(--pt) * 13); border-radius: 50%; border: calc(var(--pt) * 2) solid var(--haze); border-right-color: transparent; }
.home__base b { color: var(--cream); font-variant-numeric: tabular-nums; }

/* ---------- Cards around the phone ---------- */
.card {
  position: absolute; z-index: 3; width: clamp(200px, 16.5vw, 248px);
  padding: 14px 16px 15px; border-radius: var(--r-m);
  background: rgba(14, 27, 21, .56); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(20px) saturate(1.35); backdrop-filter: blur(20px) saturate(1.35);
  box-shadow: 0 30px 50px -22px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .06);
  opacity: 0; filter: blur(8px); transform: translate3d(0, 16px, 0) scale(.97);
  transition: opacity .42s cubic-bezier(.3, 0, .2, 1), transform .71s cubic-bezier(.2, 0, .1, 1), filter .42s;
  pointer-events: none;
}
.card.is-on { opacity: 1; filter: none; transform: translate3d(var(--px, 0px), var(--py, 0px), 0); }
.card p { margin: 0; }
.c-l { right: calc(100% - 30px); }
.c-r { left: calc(100% - 30px); }
.c-y1 { top: 5%; } .c-y2 { top: 37%; } .c-y3 { top: 69%; }
.card[data-for="swing"].c-y2 { right: calc(100% + 36px); }
.card .k { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--haze); margin-bottom: 5px; }
.card .t { font-family: var(--display); font-stretch: 105%; font-weight: 650; font-size: 16px; line-height: 1.25; text-wrap: balance; }
.card .s { margin-top: 4px; font-size: 13px; line-height: 1.4; color: rgba(242, 233, 214, .74); }
.card .num { font-family: var(--display); font-stretch: 62%; font-weight: 800; font-size: 52px; line-height: .95; color: var(--workon); font-variant-numeric: tabular-nums; }
.card .num small { font-size: 18px; margin-left: 4px; font-weight: 700; color: var(--cream); }
.st { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; font-weight: 650; }
.st::before { content: ""; width: 12px; height: 12px; flex: none; background: currentColor; -webkit-mask: var(--g) center / contain no-repeat; mask: var(--g) center / contain no-repeat; }
.st--wo { color: var(--workon); --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0 12 11H0z'/%3E%3C/svg%3E"); }
.st--w { color: var(--watch); --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='6'/%3E%3C/svg%3E"); }
.st--g { color: var(--good); --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0a6 6 0 1 0 0 12A6 6 0 0 0 6 0zm-1 8.6L2.4 6 3.5 5 5 6.5 8.5 3l1.1 1z'/%3E%3C/svg%3E"); }
.st--none { color: var(--haze); --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); }
.face { display: flex; align-items: center; gap: 12px; color: var(--cream); }
.face svg { width: 78px; height: auto; }
.dots { display: flex; gap: 6px; margin: 8px 0 2px; }
.dots i { width: 13px; height: 13px; border-radius: 50%; background: rgba(242, 233, 214, .3); }
.trio { display: flex; gap: 18px; margin-top: 6px; }
.trio span { display: grid; }
.trio b { font-family: var(--display); font-stretch: 62%; font-weight: 800; font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.trio .trio__last { color: var(--workon); }
.trio small { font-size: 11px; color: var(--haze); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.chips span { font-size: 12px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--glass-line); }
.chips .on { background: var(--cream); color: var(--turf); border-color: var(--cream); }

/* ---------- The loop pill ---------- */
.loop {
  position: absolute; z-index: 6; left: 50%; top: calc(var(--ph) - 30px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 3px; padding: 5px; border-radius: 999px; white-space: nowrap;
  background: rgba(9, 18, 14, .8); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .55);
}
.loop button { position: relative; overflow: hidden; border: 0; background: transparent; cursor: pointer; padding: 12px 18px; border-radius: 999px; font-family: var(--display); font-stretch: 108%; font-weight: 650; font-size: 15px; color: var(--cream); transition: background-color .3s, color .3s; }
.loop button:hover { background: rgba(242, 233, 214, .07); }
.loop button[aria-pressed="true"] { background: var(--ball); color: var(--turf); }
.loop button span { position: relative; z-index: 1; }
.loop__fill { position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px; background: rgba(13, 26, 20, .32); transform-origin: left; transform: scaleX(0); }
.loop button[aria-pressed="false"] .loop__fill { opacity: 0; }
.loop__again { display: inline-flex; align-items: center; gap: 6px; margin-left: 3px; padding: 0 14px 0 12px; border-left: 1px solid var(--rule); color: var(--haze); font-size: 12px; font-weight: 600; }
.loop__again svg { width: 15px; height: 15px; transform-origin: 50% 50%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.loop__again b { font-family: var(--display); font-stretch: 62%; font-weight: 800; font-size: 18px; color: var(--cream); font-variant-numeric: tabular-nums; min-width: 1ch; display: inline-block; }
.stepline { position: absolute; z-index: 5; left: 50%; top: calc(var(--ph) + 40px); transform: translateX(-50%); width: min(760px, calc(100vw - 32px)); margin: 0; text-align: center; font-size: 16px; line-height: 1.45; color: rgba(242, 233, 214, .9); text-shadow: 0 1px 14px rgba(0, 0, 0, .8); }
.hero__label { position: absolute; z-index: 5; left: 50%; top: calc(var(--ph) + 92px); transform: translateX(-50%); margin: 0; padding: 6px 10px; border-radius: 999px; white-space: nowrap; font: 600 10px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; color: rgba(242, 233, 214, .72); background: rgba(8, 18, 13, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@media (min-width: 1101px) {
  /* Beside the loop pill, clear of the hand and the tripod */
  .hero__label { left: calc(50% + 252px); top: calc(var(--ph) - 15px); transform: none; }
}

/* ---------- Section rhythm ---------- */
.sec-head { display: grid; gap: 18px; margin-bottom: clamp(48px, 7vw, 96px); }
.sec-head--split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; gap: clamp(24px, 5vw, 80px); }

/* The read */
.read__frame { position: relative; width: auto; aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden; background: #050a07; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(242, 233, 214, .08); }
.read__canvas { width: 100%; height: 100%; }
.read__hud { position: absolute; z-index: 2; top: 12px; display: grid; gap: 4px; }
.read__hud .mono { padding: 6px 8px; border-radius: 8px; background: rgba(5, 10, 7, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--cream); }
.read__hud--tl { left: 12px; } .read__hud--tr { right: 12px; text-align: right; }
.read__flash { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: radial-gradient(circle at var(--bx, 53%) var(--by, 80%), rgba(255, 250, 230, .95), rgba(255, 240, 200, .35) 12%, transparent 34%); mix-blend-mode: screen; }
.read__toggles { position: absolute; z-index: 2; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 6px; }
.read__toggles button { border: 1px solid rgba(255, 255, 255, .2); background: rgba(5, 10, 7, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: rgba(255, 255, 255, .7); font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 999px; cursor: pointer; }
.read__toggles button[aria-pressed="true"] { background: rgba(242, 233, 214, .92); color: var(--turf); border-color: transparent; }
.stack { display: grid; }
.stack > * { grid-area: 1 / 1; }
.stack .now { transition: opacity .5s, transform .71s cubic-bezier(.2, 0, .1, 1); }
.stack.is-coach .now { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.now { display: grid; gap: 12px; padding: 18px 20px 20px; border-radius: 22px; background: var(--surface); border: 1px solid var(--rule); }
.now__pos { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.now__code { font-family: var(--display); font-stretch: 62%; font-weight: 800; font-size: 46px; line-height: .9; color: var(--cream); font-variant-numeric: tabular-nums; }
.now__name { font-family: var(--display); font-stretch: 112.5%; font-weight: 700; font-size: 21px; }
.now__status { margin: 0 0 0 auto; }
.now__label { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--haze); }
.now__value { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.now__value b { font-family: var(--display); font-stretch: 62%; font-weight: 800; font-size: clamp(56px, 6vw, 86px); line-height: .86; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.now__value small { font-size: 15px; color: rgba(242, 233, 214, .8); }
.now__value.is-wo b { color: var(--workon); } .now__value.is-w b { color: var(--watch); } .now__value.is-g b { color: var(--good); }
.now__ref { margin: 0; font-size: 13.5px; color: rgba(242, 233, 214, .74); }
.walk { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.walk li { display: grid; gap: 1px; padding: 8px 9px 9px; border-radius: 12px; background: rgba(242, 233, 214, .03); border: 1px solid var(--rule); cursor: pointer; transition: background-color .25s, border-color .25s, opacity .25s; opacity: .55; }
.walk li:hover { opacity: .9; }
.walk .c { font-family: var(--display); font-stretch: 62%; font-weight: 800; font-size: 17px; line-height: 1; }
.walk .n { font-size: 10.5px; line-height: 1.25; color: var(--haze); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.walk .v { font-size: 11.5px; font-weight: 650; }
.walk .s-w .v { color: var(--watch); } .walk .s-r .v { color: var(--workon); } .walk .s-g .v { color: var(--good); }
.walk li.is-past { opacity: .85; }
.walk li.is-now { opacity: 1; background: rgba(242, 233, 214, .07); border-color: var(--ball); }
.walk li.root { position: relative; }
.walk li.root::after { content: "It starts here"; position: absolute; left: 8px; top: -9px; padding: 2px 6px; border-radius: 6px; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; background: var(--workon); color: #fff; opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; }
.walk li.root.is-past::after, .walk li.root.is-now::after { opacity: 1; transform: none; }
.coach { display: grid; gap: 10px; align-content: start; padding: 18px 20px; border-radius: 20px; background: linear-gradient(180deg, rgba(242, 208, 75, .07), rgba(242, 208, 75, 0)), var(--surface); border: 1px solid rgba(242, 208, 75, .28); opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .71s cubic-bezier(.2, 0, .1, 1); }
.coach.is-on { opacity: 1; transform: none; }
.coach__k { margin: 0; display: flex; align-items: center; gap: 8px; font: 600 11px/1 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--haze); }
.coach__k svg { width: 16px; height: 16px; }
.coach__t { margin: 0; font-family: var(--display); font-stretch: 104%; font-weight: 560; font-size: 16.5px; line-height: 1.45; }
.coach__cites { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.coach__cites span { font: 500 11px/1 var(--mono); padding: 5px 8px; border-radius: 7px; border: 1px solid var(--rule); }
.scrub { width: 100%; max-width: 1320px; margin-inline: auto; display: grid; gap: 6px; }
.scrub.is-live { cursor: ew-resize; touch-action: none; user-select: none; -webkit-user-select: none; }
.scrub.is-live:hover .scrub__head { box-shadow: 0 0 18px rgba(242, 208, 75, .9); }
.scrub__wave { height: 30px; }
.scrub__canvas { width: 100%; height: 100%; }
.scrub__track { position: relative; height: 30px; border-top: 1px solid var(--rule); }
.scrub__ticks span { position: absolute; top: 0; transform: translateX(-50%); display: grid; justify-items: center; gap: 3px; font: 800 12px/1 var(--display); font-stretch: 62%; color: var(--haze); }
.scrub__ticks span::before { content: ""; width: 1px; height: 7px; background: currentColor; }
.scrub__ticks span.est { color: var(--line); }
.scrub__ticks span.root { color: var(--workon); }
.scrub__head { position: absolute; top: -38px; bottom: 6px; left: 0; width: 2px; margin-left: -1px; background: var(--ball); box-shadow: 0 0 12px rgba(242, 208, 75, .6); border-radius: 2px; will-change: transform; }
.scrub__head::after { content: ""; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--ball); transform: translateX(-50%); }
.scrub__legend { display: flex; justify-content: space-between; gap: 16px; color: var(--haze); }

/* Day spreads */
.day { background: var(--day-bg); color: var(--day-ink); }
.day .eyebrow, .day .lead-quote { color: var(--day-muted); }
.day .lede { color: rgba(13, 26, 20, .74); }
.day ::selection { background: var(--day-ink); color: var(--day-bg); }

/* Improve: the journal */
.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.col { min-width: 0; display: grid; gap: 10px; align-content: start; padding: 12px; border-radius: 24px; background: var(--day-col); min-height: 460px; }
.col__h { margin: 4px 6px 6px; display: flex; align-items: center; gap: 9px; font-family: var(--display); font-stretch: 112.5%; font-weight: 700; font-size: 19px; }
.col__h small { margin-left: auto; font: 800 18px/1 var(--display); font-stretch: 62%; color: var(--day-muted); font-variant-numeric: tabular-nums; }
.glyph { width: 20px; height: 20px; flex: none; background: currentColor; -webkit-mask: var(--g) center / contain no-repeat; mask: var(--g) center / contain no-repeat; }
.g-proven { color: var(--day-good); --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.4 14.3L4.4 10l1.5-1.5 2.7 2.7 5.5-5.5L15.6 7z'/%3E%3C/svg%3E"); }
.g-testing { color: var(--day-ball); --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 1h6v2h-1v5l5.4 8.2A2.4 2.4 0 0 1 15.4 20H4.6a2.4 2.4 0 0 1-2-3.8L8 8V3H7zm-.6 12h7.2l-2.6-4V3.5H9V9z'/%3E%3C/svg%3E"); }
.g-retired { color: var(--day-muted); --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M1 2h18v5H1zm1 6h16v10H2zm5 3v2h6v-2z'/%3E%3C/svg%3E"); }
.th { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 12px; padding: 10px; border-radius: 16px; background: var(--day-surface); border: 1px solid var(--day-rule); box-shadow: 0 1px 0 rgba(13, 26, 20, .04); }
.th img { width: 62px; height: 84px; object-fit: cover; object-position: 30% 50%; border-radius: 10px; background: #ddd3bf; }
.th > div { min-width: 0; display: grid; align-content: start; gap: 3px; }
.th__pos { margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--day-muted); }
.th__t { margin: 0; font-family: var(--display); font-stretch: 106%; font-weight: 700; font-size: 16px; line-height: 1.2; }
.th__w { margin: 0; font-size: 13px; line-height: 1.4; color: rgba(13, 26, 20, .7); }
.th--ret { opacity: .66; }
.th--ret .th__t { text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: rgba(13, 26, 20, .4); }
.th--new { display: none; }
.verdict { margin: 6px 0 0; font-size: 12px; color: var(--day-muted); }
.vd { display: inline-block; margin-right: 6px; padding: 3px 8px; border-radius: 999px; font-weight: 700; font-size: 11.5px; }
.vd--no { background: rgba(194, 0, 19, .09); color: var(--day-workon); }
.vd--new { background: rgba(138, 106, 14, .14); color: var(--day-ball); }
.vd--ret { background: rgba(79, 91, 85, .14); color: var(--day-muted); }
.board__note { margin: 22px 0 0; font-size: 13.5px; color: var(--day-muted); }

/* The whole swing */
.ledger { border: 1px solid var(--rule); border-radius: 22px; overflow: hidden; background: rgba(242, 233, 214, .015); }
.ledger__head, .ledger__row { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) minmax(0, .9fr); gap: 14px; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--rule); }
.ledger__row:last-child { border-bottom: 0; }
.ledger__head { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--haze); background: var(--surface); padding-block: 12px; }
.ledger__head small { display: block; letter-spacing: .04em; text-transform: none; font-weight: 500; color: var(--line); font-size: 11px; }
.ledger__row > span:first-child { display: grid; font-size: 15px; }
.ledger__row > span:first-child b { font-family: var(--display); font-stretch: 62%; font-weight: 800; font-size: 15px; letter-spacing: .03em; color: var(--haze); }
.ledger__row > span:nth-child(4) { font-size: 13.5px; color: var(--haze); }
.yd { font-family: var(--display); font-stretch: 62%; font-weight: 800; font-size: clamp(26px, 2.6vw, 36px); line-height: 1; font-variant-numeric: tabular-nums; }
.ledger__row > .yd:nth-child(2) { color: var(--haze); }
.arrow { font-style: normal; font-size: 13px; font-weight: 650; display: inline-flex; align-items: center; gap: 6px; }
.arrow::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--g) center / contain no-repeat; mask: var(--g) center / contain no-repeat; }
.arrow.up { color: var(--good); --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 0l6 7H9v7H5V7H1z'/%3E%3C/svg%3E"); }
.arrow.down { color: var(--workon); --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 14l6-7H9V0H5v7H1z'/%3E%3C/svg%3E"); }
.arrow.flat { color: var(--haze); --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M0 5h14v4H0z'/%3E%3C/svg%3E"); }
.arrow.ok { color: var(--good); --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 0a7 7 0 1 0 0 14A7 7 0 0 0 7 0zM6 10L3 7l1.2-1.2L6 7.6 9.8 3.8 11 5z'/%3E%3C/svg%3E"); }
.ledger__row.is-catch { background: linear-gradient(90deg, rgba(255, 97, 101, .1), rgba(255, 97, 101, 0) 70%); }
.ledger__row.is-catch .yd:nth-child(3) { color: var(--workon); }
.catch { margin-top: 18px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: baseline; padding: 18px 22px; border-radius: 18px; background: var(--surface); border: 1px solid var(--rule); }
.catch__k { margin: 0; font: 600 11px/1.3 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--haze); white-space: nowrap; }
.catch__t { margin: 0; font-family: var(--display); font-stretch: 106%; font-weight: 600; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.4; }
.baseline { position: relative; width: clamp(200px, 20vw, 260px); aspect-ratio: 1; }
.baseline svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.baseline__track { fill: none; stroke: var(--rule); stroke-width: 7; }
.baseline__arc { fill: none; stroke: var(--ball); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 326.73; stroke-dashoffset: calc(326.73 * (1 - var(--b, .65))); }
.baseline__n { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.baseline__count { font-family: var(--display); font-stretch: 62%; font-weight: 800; font-size: clamp(64px, 6vw, 88px); line-height: .9; font-variant-numeric: tabular-nums; }
.baseline__n small { font-size: 13px; color: var(--haze); }
.baseline__state { margin-top: 8px; font: 600 10.5px/1 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--ball); }

/* Honest */
.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.notes li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--rule); box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .7); }
.notes li > * { min-width: 0; }
.notes b { grid-column: 2; font-weight: 650; font-size: 15px; line-height: 1.35; }
.notes small { grid-column: 2; font-size: 13.5px; line-height: 1.4; color: var(--haze); }
.ni { grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 10px; background: rgba(242, 233, 214, .06); position: relative; }
.ni::after { content: ""; position: absolute; inset: 8px; background: var(--c, var(--haze)); -webkit-mask: var(--g) center / contain no-repeat; mask: var(--g) center / contain no-repeat; }
.ni--few { --c: var(--haze); --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='3' cy='9' r='2.5'/%3E%3Ccircle cx='9' cy='9' r='2.5'/%3E%3Ccircle cx='15' cy='9' r='2.5' fill-opacity='.3'/%3E%3C/svg%3E"); }
.ni--sun { --c: var(--watch); --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='4'/%3E%3Cpath d='M8 0h2v3H8zm0 15h2v3H8zM0 8h3v2H0zm15 0h3v2h-3zM2.3 3.7l1.4-1.4 2 2-1.4 1.4zm10 10 1.4-1.4 2 2-1.4 1.4zm1.4-11.4 1.4 1.4-2 2-1.4-1.4zm-10 10 1.4 1.4-2 2-1.4-1.4z'/%3E%3C/svg%3E"); }
.ni--line { --c: var(--watch); --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M8 0h2v18H8z' fill-opacity='.4'/%3E%3Crect x='11' y='6' width='7' height='9' rx='2'/%3E%3C/svg%3E"); }
.ni--face { --c: var(--haze); --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='4' r='3'/%3E%3Cpath d='M4 18V10a5 5 0 0 1 10 0v8z'/%3E%3C/svg%3E"); }
.ni--coach { --c: var(--cream); --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'%3E%3Cpath d='M3 0h14a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H8l-5 4v-4a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3z'/%3E%3C/svg%3E"); }
.ni--you { --c: var(--ball); --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M9 0a9 9 0 1 0 0 18A9 9 0 0 0 9 0zM7.8 12.7 4.3 9.2l1.4-1.4 2.1 2.1 4.6-4.6 1.4 1.4z'/%3E%3C/svg%3E"); }
.notes__you small { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pill { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--rule); font-size: 12px; color: var(--cream); }
.pill.on { background: var(--cream); color: var(--turf); border-color: var(--cream); }

/* Coach + privacy */
.chat { display: grid; gap: 10px; margin-top: 10px; }
.chat p { margin: 0; max-width: 88%; padding: 12px 14px; border-radius: 18px; font-size: 15px; line-height: 1.45; }
.chat__me { justify-self: end; background: var(--cream); color: var(--turf); border-radius: 18px 18px 5px 18px; font-weight: 550; }
.chat__them { background: var(--raised); border: 1px solid var(--rule); border-radius: 18px 18px 18px 5px; }
.chat__them .who { margin-bottom: 8px; }
.chat__them .cite { margin-top: 8px; }
.chat__src { justify-self: start; padding: 0 !important; font-size: 12px !important; color: var(--line); }
.vault { margin-top: 12px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 22px 18px; border-radius: 20px; background: rgba(0, 0, 0, .22); border: 1px dashed var(--rule); }
.vault__phone { position: relative; width: 92px; height: 170px; border-radius: 18px; border: 2px solid var(--line); display: grid; place-items: center; align-content: center; gap: 10px; }
.vault__film { display: grid; grid-template-columns: repeat(2, 22px); gap: 4px; }
.vault__film i { height: 30px; border-radius: 4px; background: linear-gradient(135deg, #3c5a46, #1f3328); }
.vault__lock { position: absolute; right: -10px; top: -10px; width: 26px; height: 26px; border-radius: 50%; background: var(--cream); }
.vault__lock::after { content: ""; position: absolute; inset: 6px; background: var(--turf); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 6V4a4 4 0 0 1 8 0v2h1v8H2V6zm2 0h4V4a2 2 0 0 0-4 0z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 6V4a4 4 0 0 1 8 0v2h1v8H2V6zm2 0h4V4a2 2 0 0 0-4 0z'/%3E%3C/svg%3E") center / contain no-repeat; }
.vault__phone small, .vault__coach small { font-size: 10.5px; color: var(--haze); text-align: center; }
.vault__wire { position: relative; height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px); }
.pkt { position: absolute; top: 50%; left: 0; transform: translate(0, -50%); white-space: nowrap; font: 500 10.5px/1 var(--mono); padding: 5px 7px; border-radius: 6px; background: var(--raised); border: 1px solid var(--rule); color: var(--cream); animation: pkt 4.2s linear infinite; opacity: 0; }
.pkt:nth-child(2) { animation-delay: 1.4s; } .pkt:nth-child(3) { animation-delay: 2.8s; }
@keyframes pkt { 0% { left: 0; opacity: 0; } 4% { opacity: 1; } 29% { opacity: 1; } 33.3% { left: calc(100% - 96px); opacity: 0; } 100% { left: calc(100% - 96px); opacity: 0; } }
.vault__coach { display: grid; justify-items: center; gap: 8px; }
.vault__coach svg { width: 40px; height: 40px; }

/* Founder */
.founder { padding-block: var(--sec); }
.founder__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px clamp(32px, 6vw, 96px); align-items: start; }
.founder__grid .eyebrow { grid-column: 1 / -1; }
.founder__body { display: grid; gap: 18px; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.55; color: rgba(13, 26, 20, .82); }
.founder__body p { margin: 0; text-wrap: pretty; }
.founder__body p:last-child { color: var(--day-ink); font-weight: 600; }

/* FAQ */
.faq { padding-block: var(--sec); background: var(--turf); }
.faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq__grid header { display: grid; gap: 18px; position: sticky; top: calc(var(--nav-h) + 32px); }
.faq__list { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 2px; font-family: var(--display); font-stretch: 106%; font-weight: 650; font-size: clamp(17px, 1.5vw, 21px); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--rule); background: linear-gradient(var(--cream), var(--cream)) center / 10px 1.5px no-repeat, linear-gradient(var(--cream), var(--cream)) center / 1.5px 10px no-repeat; transition: transform .3s, background-color .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: -6px 0 22px; max-width: 60ch; color: rgba(242, 233, 214, .76); font-size: 16px; }

/* Join */
.join { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(140px, 22vh, 260px); text-align: center; }
.join__plate { position: absolute; inset: -10% 0; z-index: -1; background: linear-gradient(180deg, var(--turf) 0%, rgba(13, 26, 20, .55) 30%, rgba(13, 26, 20, .7) 70%, var(--turf-deep) 100%), url("../assets/scenes/improve.jpg") center / cover; }
.join__inner { display: grid; justify-items: center; gap: 22px; }
.join__h { margin: 0; font-family: var(--display); font-stretch: 112.5%; font-weight: 760; font-size: clamp(42px, 7.2vw, 112px); line-height: .94; letter-spacing: -.03em; text-wrap: balance; max-width: 13ch; }
.stop--still { width: .22em; height: .22em; }
.join .lede { color: rgba(242, 233, 214, .86); }
.form { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: min(520px, 100%); margin-top: 6px; }
.form input[type="email"] { flex: 1 1 240px; min-width: 0; height: 54px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(242, 233, 214, .26); background: rgba(8, 18, 13, .6); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--cream); font: 16px var(--text); }
.form input::placeholder { color: rgba(242, 233, 214, .5); }
.form input:focus-visible { outline: 2px solid var(--ball); outline-offset: 2px; }
.form .btn { height: 54px; }
.btn--ball { background: var(--cream); color: var(--turf); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form__msg { flex-basis: 100%; margin: 4px 0 0; font-size: 13.5px; color: rgba(242, 233, 214, .72); min-height: 1.4em; }
.form__msg.is-ok { color: var(--good); } .form__msg.is-err { color: var(--workon); }

/* Footer */
.foot { padding: 72px 0 calc(28px + env(safe-area-inset-bottom, 0px)); background: var(--turf-deep); border-top: 1px solid var(--rule); }
.foot__sign { margin: 0 0 28px; font-family: var(--display); font-stretch: 112.5%; font-weight: 700; font-size: clamp(20px, 2vw, 28px); color: var(--haze); }
.foot__mark { width: 100%; height: auto; color: var(--cream); overflow: visible; }
.foot__row { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 34px; font-size: 13px; color: var(--haze); }
.foot__row a { color: var(--haze); }
.foot__tempo { margin-left: auto; font-family: var(--mono); font-size: 11.5px; }

/* The bucket meter: page progress as balls left in the bucket */
.meter { position: fixed; z-index: 40; left: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 8px; padding: 10px; border-radius: 14px; background: rgba(8, 18, 13, .62); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; }
.meter.is-on { opacity: 1; transform: none; }
body.is-pinned .meter, body.is-foot .meter { opacity: 0; transform: translateY(8px); }
.meter__grid { display: grid; grid-template-columns: repeat(10, 5px); gap: 3px; }
.meter__grid i { width: 5px; height: 5px; border-radius: 50%; background: rgba(242, 233, 214, .78); transition: background-color .2s; }
.meter__grid i.hit { background: rgba(242, 233, 214, .12); }
.meter__grid i.next { background: var(--ball); }
.meter__label { margin: 0; font: 500 10px/1 var(--mono); color: var(--haze); white-space: nowrap; }
.meter__label b { color: var(--cream); font-weight: 600; }

/* Film grain */
.grain { position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .06; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -5%); } 60% { transform: translate(-2%, 6%); } 80% { transform: translate(5%, 2%); } 100% { transform: translate(0, 0); } }

/* ---------- Chapters: Swing · Understand · Improve ---------- */
.chapter { padding-block: clamp(72px, 11vh, 140px) clamp(88px, 13vh, 160px); background: var(--turf); }
.chapter--swing { padding-top: clamp(56px, 8vh, 100px); }
.chapter--understand { background: radial-gradient(70% 50% at 25% 30%, #11221A 0%, var(--turf-deep) 70%); }
.chapter__head { display: grid; grid-template-columns: auto minmax(0, 1.55fr) minmax(0, .8fr); gap: 20px clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(28px, 4vw, 44px); }
.chapter__num { margin: 0; display: grid; justify-items: start; gap: 6px; font: 600 12px/1 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--haze); align-self: start; }
.chapter__num b { font-family: var(--display); font-stretch: 62%; font-weight: 800; font-size: clamp(88px, 10vw, 150px); line-height: .8; letter-spacing: -.02em; color: var(--ball); }
.chapter__title { display: grid; gap: 8px; min-width: 0; }
.chapter__title .h2 { font-size: clamp(34px, 4.1vw, 62px); max-width: 19ch; }
.chapter__head .lede { align-self: end; }
.realnote { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--rule); background: rgba(242, 233, 214, .03); font-size: 13px; color: rgba(242, 233, 214, .82); }
.realnote__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 4px rgba(48, 209, 88, .16); flex: none; }

.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 14px; }
.tile { position: relative; min-width: 0; display: grid; align-content: start; gap: 12px; padding: clamp(20px, 2.4vw, 30px); border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--rule); overflow: hidden; }
.tile > p, .tile__copy > p { margin: 0; color: rgba(242, 233, 214, .78); font-size: 15.5px; line-height: 1.5; max-width: 52ch; }
.tile__k { margin: 0; font: 600 11px/1.3 var(--text) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--haze) !important; }
.tile__h { margin: 0; font-family: var(--display); font-stretch: 112.5%; font-weight: 700; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.06; letter-spacing: -.012em; text-wrap: balance; }
.tile__copy { display: grid; gap: 12px; align-content: center; min-width: 0; }
.tile__real { font: 600 11px/1.3 var(--text) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--good) !important; }

/* A small phone showing a real app screen, the same parts as the hero's phone */
.mini { position: relative; flex: none; width: var(--pw); aspect-ratio: .4843; }
.mini .device { position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1.5px 0 rgba(255, 255, 255, .14), 0 30px 60px -24px rgba(0, 0, 0, .7); }
.tile--rec, .tile--setread, .tile--next { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(20px, 3vw, 40px); }

/* Swing */
.bento--swing .tile--rec { grid-column: 1 / span 7; }
.bento--swing .tile--strike { grid-column: 8 / span 5; }
.bento--swing .tile--sets { grid-column: 1 / span 6; }
.bento--swing .tile--setread { grid-column: 7 / span 6; }
.bento--swing .tile--import { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: clamp(20px, 4vw, 56px); }
.tile--import .tile__h { align-self: center; }
.keys { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.keys li { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--rule); background: rgba(242, 233, 214, .04); font-size: 13px; font-weight: 600; }
.strike { position: relative; height: 130px; margin-top: 6px; border-radius: 16px; background: rgba(0, 0, 0, .22); border: 1px solid var(--rule); overflow: hidden; }
.strike__wave { position: absolute; inset: 0; width: 100%; height: 100%; }
.strike__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--haze); }
.btn--xs { height: 34px; padding: 0 14px; font-size: 13px; gap: 8px; }
.btn--xs .play { width: 15px; height: 15px; }
.btn--xs .play::after { left: 5.5px; top: 4px; border-width: 3.5px; border-left-width: 5px; }
.sets { width: 100%; height: auto; overflow: visible; margin-top: 4px; }
.sets .lbl { font: 600 11px var(--text); letter-spacing: .04em; fill: var(--haze); }
.sets .th { font: 600 11px var(--text); fill: rgba(242, 233, 214, .62); }
.sets .b { fill: rgba(242, 233, 214, .82); }
.sets .b.best { fill: var(--ball); }
.sets .vd { font: 650 11.5px var(--text); }
.sets .vd-no { fill: var(--workon); } .sets .vd-cl { fill: var(--watch); } .sets .vd-ok { fill: var(--good); } .sets .vd-few, .sets .vd-na { fill: var(--haze); }
.sets .swap { stroke: var(--ball); stroke-width: 1.5; stroke-dasharray: 3 4; }
.sets .swapt { font: 650 10.5px var(--text); fill: var(--ball); letter-spacing: .04em; }
.import { position: relative; width: 250px; height: 170px; }
.import img { position: absolute; top: 8px; width: 104px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; border: 2px solid rgba(242, 233, 214, .2); box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .6); }
.import img:nth-child(1) { left: 0; transform: rotate(-8deg); }
.import img:nth-child(2) { left: 70px; transform: rotate(-1deg); z-index: 1; }
.import img:nth-child(3) { left: 140px; transform: rotate(7deg); }
.import__day { position: absolute; z-index: 2; left: 50px; bottom: 0; display: grid; padding: 9px 14px; border-radius: 14px; background: var(--cream); color: var(--turf); font-size: 12px; box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .6); }
.import__day b { font-size: 14px; }
.specs { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule); }
.specs li { display: grid; gap: 4px; padding: 18px 18px 0 0; font-size: 13.5px; color: var(--haze); }
.specs b { font-family: var(--display); font-stretch: 106%; font-size: 16px; color: var(--cream); }

/* The set read sheet over the camera */
.scr--sheet .cam__feed { filter: blur(3px) brightness(.7); }
.sheet { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; top: calc(var(--pt) * 228); padding: calc(var(--pt) * 10) calc(var(--pt) * 18) calc(var(--pt) * 24); border-radius: calc(var(--pt) * 30) calc(var(--pt) * 30) 0 0; background: rgba(22, 38, 30, .94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); display: grid; align-content: start; gap: calc(var(--pt) * 8); color: var(--cream); }
.sheet__grab { justify-self: center; width: calc(var(--pt) * 40); height: calc(var(--pt) * 5); border-radius: 9px; background: rgba(242, 233, 214, .3); }
.sheet__top { display: flex; align-items: center; justify-content: space-between; font-size: calc(var(--pt) * 13); color: var(--haze); }
.sheet__title { display: grid; text-align: center; color: var(--cream); }
.sheet__title b { font-size: calc(var(--pt) * 15); }
.sheet__title small { font-size: calc(var(--pt) * 11); color: var(--haze); }
.sheet .g-btn--x { width: calc(var(--pt) * 30); height: calc(var(--pt) * 30); background: rgba(242, 233, 214, .12); }
.sheet__h { margin: calc(var(--pt) * 4) 0 0; font-family: var(--display); font-stretch: 112.5%; font-weight: 700; font-size: calc(var(--pt) * 23); line-height: 1.1; }
.sheet__vd { margin: 0; }
.sheet__vd .st { margin: 0; font-size: calc(var(--pt) * 13); }
.sheet__p { margin: 0; font-size: calc(var(--pt) * 12.5); line-height: 1.38; color: rgba(242, 233, 214, .82); }
.sheet__bw { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--pt) * 8); margin-top: calc(var(--pt) * 4); }
.sheet__bw figure { margin: 0; display: grid; gap: calc(var(--pt) * 4); }
.sheet__bw img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 40%; border-radius: calc(var(--pt) * 10); }
.sheet__bw figcaption { font-size: calc(var(--pt) * 11); color: var(--haze); }
.sheet__btn { display: grid; place-items: center; height: calc(var(--pt) * 44); border-radius: 999px; background: rgba(242, 233, 214, .1); font-size: calc(var(--pt) * 14); font-weight: 650; }
.sheet__btn--main { margin-top: calc(var(--pt) * 6); background: var(--cream); color: var(--turf); }
.sheet__row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--pt) * 8); }

/* Understand: the read, in a card */
.readcard { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px clamp(24px, 4vw, 56px); padding: clamp(16px, 2vw, 26px); border-radius: 32px; background: linear-gradient(160deg, rgba(242, 233, 214, .04), rgba(242, 233, 214, 0) 40%), var(--surface); border: 1px solid var(--rule); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7); }
.readcard__media { min-width: 0; }
.readcard .read__frame { height: clamp(440px, 62vh, 640px); }
.readcard__panel { display: grid; gap: 16px; align-content: center; min-width: 0; }
.readcard__scrub { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.readcard__play { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--rule); background: var(--raised); cursor: pointer; display: grid; place-items: center; }
.readcard__play span { width: 14px; height: 14px; position: relative; }
.readcard__play[aria-pressed="true"] span::before, .readcard__play[aria-pressed="true"] span::after { content: ""; position: absolute; top: 0; width: 4px; height: 14px; border-radius: 2px; background: var(--cream); }
.readcard__play[aria-pressed="true"] span::before { left: 2px; } .readcard__play[aria-pressed="true"] span::after { right: 2px; }
.readcard__play[aria-pressed="false"] span::before { content: ""; position: absolute; left: 3px; top: 0; border: 7px solid transparent; border-left: 11px solid var(--cream); border-right: 0; }
.readcard .walk li { opacity: .62; }
.readcard .walk li:focus-visible { outline: 2px solid var(--ball); outline-offset: 2px; }

.bento--understand { margin-top: 14px; }
.bento--understand .tile--health { grid-column: 1 / span 5; }
.bento--understand .tile--labels { grid-column: 6 / span 7; }
.bento--understand .tile--bw { grid-column: 1 / span 7; }
.bento--understand .tile--ask { grid-column: 8 / span 5; }
.bento--understand .tile--honest { grid-column: 1 / -1; }
.pdots { display: flex; justify-content: space-between; gap: 6px; margin: 6px 0; padding: 18px 16px 14px; border-radius: 18px; background: rgba(0, 0, 0, .2); border: 1px solid var(--rule); }
.pdots span { position: relative; display: grid; justify-items: center; gap: 8px; font: 800 13px/1 var(--display); font-stretch: 62%; color: var(--haze); }
.pdots i { width: 16px; height: 16px; border-radius: 50%; background: rgba(242, 233, 214, .26); }
.pdots .w i { background: var(--watch); } .pdots .r i { background: var(--workon); }
.pdots .w { color: var(--watch); } .pdots .r { color: var(--workon); }
.pdots .root::before { content: "Starts here"; position: absolute; bottom: calc(100% + 8px); white-space: nowrap; padding: 3px 7px; border-radius: 6px; background: var(--workon); color: #fff; font: 700 9.5px/1 var(--text); letter-spacing: .04em; }
.pdots .root { margin-top: 0; }
.bw { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bw__side { margin: 0; position: relative; border-radius: 18px; overflow: hidden; background: #000; }
.bw__side img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 40% 62%; }
.bw__side figcaption { position: absolute; left: 10px; bottom: 10px; display: grid; padding: 7px 10px; border-radius: 10px; background: rgba(5, 10, 7, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 12px; color: var(--haze); }
.bw__side figcaption b { font-size: 13.5px; color: var(--good); }
.bw__side--worst figcaption b { color: var(--workon); }
.bw__rows { list-style: none; margin: 4px 0 0; padding: 0; display: grid; }
.bw__rows li { display: grid; grid-template-columns: minmax(0, 1fr) 64px 64px; gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
.bw__rows li:first-child { border-top: 1px solid var(--rule); }
.bw__rows b { font-family: var(--display); font-stretch: 62%; font-weight: 800; font-size: 20px; text-align: right; font-variant-numeric: tabular-nums; }
.bw__rows b:nth-of-type(1) { color: var(--good); }
.bw__rows li.gap b:nth-of-type(2) { color: var(--workon); }
.bw__rows li:not(.gap) { color: var(--haze); }
.bw__rows li:not(.gap) b { color: rgba(242, 233, 214, .7); }
.bw__gap { margin: 0; font-family: var(--display); font-stretch: 106%; font-weight: 600; font-size: 16px !important; color: var(--cream) !important; }
.labels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.labels figure { position: relative; margin: 0; border-radius: 14px; overflow: hidden; background: #0a120e; }
.labels img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 30% 50%; }
.labels figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .7)); }
.labels figcaption { position: absolute; z-index: 1; left: 7px; right: 7px; bottom: 7px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.labels figcaption b { margin-right: auto; font-size: 12px; }
.lb { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 3px 6px; border-radius: 6px; background: rgba(0, 0, 0, .55); }
.lb--heel { color: var(--watch); } .lb--center { color: var(--good); } .lb--miss { color: #fff; background: rgba(214, 0, 20, .85); } .lb--good { color: var(--turf); background: var(--good); }
.tile--ask .chat { margin-top: 2px; }
.chat__src { font-size: 12.5px !important; color: var(--line) !important; }
.tile--honest { grid-template-columns: minmax(0, .7fr) minmax(0, 2fr); align-items: center; column-gap: clamp(20px, 4vw, 48px); }
.tile--honest .notes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile--honest .notes li { background: rgba(0, 0, 0, .18); }

/* Improve, on the day spread */
.chapter--improve { background: var(--day-bg); color: var(--day-ink); }
.day .chapter__num { color: var(--day-muted); }
.day .chapter__num b { color: var(--day-ink); }
.day .tile { background: var(--day-surface); border-color: var(--day-rule); box-shadow: 0 1px 0 rgba(13, 26, 20, .04); }
.day .tile > p, .day .tile__copy > p { color: rgba(13, 26, 20, .74); }
.day .tile__k { color: var(--day-muted) !important; }
.day .tile .ball-ink { color: var(--day-ball); }
.bento--improve .tile--next { grid-column: 1 / span 7; }
.bento--improve .tile--report { grid-column: 8 / span 5; }
.bento--improve .tile--focus { grid-column: 1 / span 5; }
.bento--improve .tile--time { grid-column: 6 / span 7; }
.bento--improve .tile--journal { grid-column: 1 / -1; }
.bento--improve .tile--real { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: clamp(24px, 5vw, 64px); }
.report__vs, .report__thoughts { list-style: none; margin: 0; padding: 0; display: grid; }
.report__vs li, .report__thoughts li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--day-rule); }
.report__vs li:first-child, .report__thoughts li:first-child { border-top: 1px solid var(--day-rule); }
.report__vs span, .report__thoughts span { font-size: 14.5px; }
.report__vs b { font-family: var(--display); font-stretch: 62%; font-weight: 800; font-size: 22px; color: var(--day-good); text-align: right; }
.report__vs li.worse b { color: var(--day-workon); }
.report__vs li:last-child b { color: var(--day-watch); font-size: 18px; }
.report__vs small, .report__thoughts small { grid-column: 1 / -1; font-size: 12.5px; color: var(--day-muted); }
.report__q { margin: 6px 0 0 !important; font: 600 11px/1.3 var(--text) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--day-muted) !important; }
.report__thoughts em { font-style: normal; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; align-self: center; }
.vd-keep { background: rgba(27, 110, 48, .12); color: var(--day-good); }
.vd-drop { background: rgba(194, 0, 19, .1); color: var(--day-workon); }
.vd-test { background: rgba(138, 106, 14, .14); color: var(--day-ball); }
.focus { display: grid; gap: 18px; margin: 4px 0; }
.focus__row { display: grid; gap: 8px; padding: 14px 16px; border-radius: 18px; background: var(--day-col); }
.focus__t { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.focus__t b { font-family: var(--display); font-stretch: 106%; font-size: 17px; }
.focus__t span { font-size: 13px; color: var(--day-muted); }
.focus__nums { display: flex; gap: 22px; }
.focus__nums span { display: grid; }
.focus__nums b { font-family: var(--display); font-stretch: 62%; font-weight: 800; font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.focus__nums b.good { color: var(--day-good); } .focus__nums b.bad { color: var(--day-workon); }
.focus__nums small { font-size: 11.5px; color: var(--day-muted); }
.focus__bar { position: relative; height: 6px; border-radius: 6px; background: rgba(13, 26, 20, .1); }
.focus__bar i { position: absolute; top: 0; bottom: 0; left: calc(var(--from) * 100%); right: calc((1 - var(--to)) * 100%); border-radius: 6px; background: var(--day-good); }
.focus__bar--worse i { left: calc(var(--to) * 100%); right: calc((1 - var(--from)) * 100%); background: var(--day-workon); }
.focus__bar::after { content: ""; position: absolute; right: 0; top: -4px; width: 2px; height: 14px; background: var(--day-ink); border-radius: 2px; }
.day .ledger { border-color: var(--day-rule); background: transparent; }
.day .ledger__head { background: var(--day-col); color: var(--day-muted); }
.day .ledger__head small { color: var(--day-muted); }
.day .ledger__head, .day .ledger__row { border-bottom-color: var(--day-rule); padding: 12px 16px; }
.day .ledger__row > span:first-child { font-size: 14px; }
.day .ledger__row > span:first-child b { color: var(--day-muted); }
.day .ledger__row > span:nth-child(4) { color: var(--day-muted); font-size: 12.5px; }
.day .yd { font-size: clamp(22px, 2vw, 28px); }
.day .ledger__row > .yd:nth-child(2) { color: var(--day-muted); }
.day .ledger__row.is-catch { background: linear-gradient(90deg, rgba(194, 0, 19, .07), rgba(194, 0, 19, 0) 70%); }
.day .ledger__row.is-catch .yd:nth-child(3) { color: var(--day-workon); }
.day .arrow.up, .day .arrow.ok { color: var(--day-good); } .day .arrow.down { color: var(--day-workon); } .day .arrow.flat { color: var(--day-muted); }
.catch__t { margin: 0; font-family: var(--display); font-stretch: 106%; font-weight: 600; font-size: 16.5px !important; line-height: 1.4; }
.day .catch__t { color: var(--day-ink) !important; }
.tile--journal .board { margin-top: 4px; }
.tile--journal .col { min-height: 0; }
.day .baseline__track { stroke: var(--day-rule); }
.day .baseline__arc { stroke: var(--day-ball); }
.day .baseline__n small { color: var(--day-muted); }
.day .baseline__state { color: var(--day-ball); }
.tile--real .lead-quote { margin-bottom: 6px; }

/* Private */
.privacy { padding-block: clamp(72px, 10vh, 120px); background: var(--turf-deep); }
.privacy__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.privacy__grid > div:first-child { display: grid; gap: 14px; }

/* The nav follows the chapters */
.nav__links .n { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 7px; border-radius: 50%; border: 1px solid rgba(242, 233, 214, .25); font: 800 11px/1 var(--display); font-stretch: 62%; color: rgba(242, 233, 214, .74); transition: background-color .3s, color .3s, border-color .3s; }
.nav__links a.is-on { color: var(--cream); }
.nav__links a.is-on .n { background: var(--ball); border-color: var(--ball); color: var(--turf); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .card { display: none; }
  .chapter__head { grid-template-columns: auto minmax(0, 1fr); }
  .chapter__head .lede { grid-column: 2; }
  .bento > .tile { grid-column: 1 / -1 !important; }
  .tile--import { grid-template-columns: auto minmax(0, 1fr) !important; }
  .tile--import > p { grid-column: 1 / -1; }
  .tile--honest { grid-template-columns: minmax(0, 1fr) !important; }
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  :root { --ph: clamp(420px, 68vh, 600px); --nav-h: 58px; --step: 38vh; --pin-h: calc(var(--ph) + 132px); }
  .nav__links { display: none; }
  .sound__label { display: none; }
  .sound { padding: 0 11px; }
  .meter { display: none; }
  .founder__grid, .faq__grid, .privacy__grid { grid-template-columns: minmax(0, 1fr); }
  .faq__grid header { position: static; }
  .chapter__head { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .chapter__head .lede { grid-column: auto; }
  .chapter__num { grid-auto-flow: column; align-items: end; justify-content: start; gap: 12px; }
  .chapter__num b { font-size: 76px; }
  .tile--rec, .tile--setread, .tile--next { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .tile--rec .tile__copy, .tile--setread .tile__copy, .tile--next .tile__copy { justify-self: stretch; }
  .tile--honest .notes { grid-template-columns: minmax(0, 1fr); }
  .labels { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .labels figcaption b { font-size: 10.5px; }
  .lb { font-size: 9px; padding: 2px 4px; }
  .board { grid-template-columns: minmax(0, 1fr); }
  .col { min-height: 0; }
  .ledger__head { display: none; }
  .ledger__row { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "c a b" "t t r"; row-gap: 6px; }
  .ledger__row > span:nth-child(1) { grid-area: c; }
  .ledger__row > span:nth-child(2) { grid-area: a; }
  .ledger__row > span:nth-child(3) { grid-area: b; }
  .ledger__row > span:nth-child(4) { grid-area: t; }
  .ledger__row > span:nth-child(5) { grid-area: r; justify-self: end; }
  .tile--real { grid-template-columns: minmax(0, 1fr) !important; justify-items: center; text-align: center; }
  .foot__tempo { margin-left: 0; }
  /* The read card stacks: the swing on top, the reading under it */
  .readcard { grid-template-columns: minmax(0, 1fr); padding: 12px; border-radius: 24px; }
  .readcard__media { display: grid; justify-items: center; }
  .readcard .read__frame { height: min(62vh, 560px); border-radius: 18px; }
  .readcard .walk { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .now { padding: 12px 14px; gap: 4px; }
  .now__pos { flex-wrap: nowrap; gap: 8px; }
  .now__code { font-size: 28px; }
  .now__name { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .now__status { font-size: 11px; white-space: nowrap; margin-top: 0; }
  .now__label { font-size: 12px; }
  .now__value b { font-size: 40px; }
  .now__ref { font-size: 12px; line-height: 1.35; }
  .coach { padding: 12px 14px; gap: 6px; }
  .coach__t { font-size: 13.5px; line-height: 1.4; }
  .read__hud--tr { display: none; }
  .read__toggles { bottom: 10px; }
  .read__toggles button { padding: 6px 11px; font-size: 11.5px; }
  .scrub__wave { height: 22px; }
  .scrub__legend .mono:last-child { display: none; }
  .eyebrow--glass { font-size: 10px; letter-spacing: .08em; }
}
@media (max-width: 560px) {
  .hero__title { font-size: clamp(42px, 12.4vw, 64px); }
  .hero__title .ln { white-space: normal; }
  .loop button { padding: 11px 12px; font-size: 13.5px; }
  .loop__again span { display: none; }
  .loop__again { padding: 0 10px; }
  .stepline { font-size: 14.5px; }
  .hero__label { font-size: 9.5px; letter-spacing: .08em; }
  .specs { grid-template-columns: minmax(0, 1fr); }
  .sets .lbl { font-size: 15px; } .sets .th { font-size: 14px; } .sets .vd { font-size: 15px; } .sets .swapt { font-size: 13.5px; }
  .labels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bw__rows li { grid-template-columns: minmax(0, 1fr) 52px 52px; font-size: 13px; }
  .import { width: 220px; transform: scale(.9); transform-origin: left center; }
  .vault { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .vault__wire { width: 2px; height: 90px; background: repeating-linear-gradient(180deg, var(--line) 0 6px, transparent 6px 12px); }
  .pkt { left: 50%; transform: translate(-50%, 0); animation-name: pktv; }
  @keyframes pktv { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { top: 80px; opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .grain { display: none; }
}