/* meetkeely.com's home: a day with Keely, told as you scroll. The night, the morning's Recovery, the day's Load, stress
   as it happens, the shape of the weeks, fitness in years. Each chapter has its own piece of art, drawn from the app's
   own language (design book › System), and the screenshots are kept for the gallery. Shared pieces (tokens, nav,
   buttons, proofs, the Loop, the keel, the footer) come from site.css.
   1 Frame · 2 Hero and the ring · 3 Chapters · 4 The night · 5 What moved it · 6 The day · 7 Stress · 8 The weeks
   9 Fitness · 10 Gallery · 11 Privacy · 12 Motion · 13 Responsive · 14 Reduced motion

   Rules kept from Max's reviews: text sits on calm ground, never over light or motion; the ring is light around a calm
   centre; cool means normal, warm asks. Every loop pauses off screen, and Reduce Motion shows each final frame. */

/* 1 · Frame ---------------------------------------------------------------------------------------------------- */
:root { --rise: 56px; }
body { background: var(--night); }
/* The page's light moves with the day it tells: night at the top, a cool dawn by the morning, back to night. Two
   soft washes on a fixed layer, never under text that isn't on a card. */
.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--night); }
.sky::before, .sky::after { content: ""; position: absolute; inset: -20% -10%; opacity: var(--wash, 0); transition: opacity 1.2s ease; }
.sky::before { background: radial-gradient(60% 45% at 78% 8%, rgba(79, 216, 196, 0.10), transparent 70%); }
.sky::after { background: radial-gradient(70% 50% at 18% 100%, rgba(154, 140, 255, 0.10), transparent 70%); opacity: var(--dusk, 0); }
/* A whisper of grain, as on film: the dark never bands. */
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0.045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }

/* 2 · Hero and the ring ------------------------------------------------------------------------------------------ */
.hero2 { display: grid; gap: 40px; align-items: center; padding-block: 40px 24px; }
.hero2 h1 { font-size: clamp(52px, 7vw, 104px); line-height: 0.96; letter-spacing: -0.03em; margin-bottom: 26px; }
.hero2 .lede { max-width: 24em; }
.hero-art { position: relative; display: grid; justify-items: center; gap: 22px; padding-block: 12px 4px; }
.hero-art canvas.stars { position: absolute; inset: -12% -20%; width: 140%; height: 124%; pointer-events: none; opacity: 0.9; }
.cue { display: inline-flex; align-items: center; gap: 12px; margin-top: 44px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mist); text-decoration: none; transition: color 0.2s; }
.cue:hover { color: var(--snow); }
.cue i { position: relative; width: 1.5px; height: 34px; overflow: hidden; background: var(--hair-2); border-radius: 1px; }
.cue i::after { content: ""; position: absolute; left: 0; right: 0; top: -40%; height: 40%; background: var(--glacier); animation: cue 2.4s var(--ease-glide) infinite; }

/* The ring: the app's Recovery orb (RecoveryOrb.swift) as a piece of its own. Light lives in a band around the ring;
   the centre stays the page's colour, so the number reads on calm ground. */
.orb {
  --s: min(78vw, 400px); --state: #4FD8C4; --state-hi: #A8F3E6; --state-lo: #2E86D6;
  position: relative; width: var(--s); aspect-ratio: 1; isolation: isolate;
}
.orb-tint { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--state) 7%, transparent), transparent); }
.orb-light {
  position: absolute; inset: -12%;
  -webkit-mask-image: radial-gradient(closest-side, transparent 62%, rgba(0,0,0,.2) 68%, rgba(0,0,0,.65) 73%, #000 77%, rgba(0,0,0,.8) 83%, rgba(0,0,0,.32) 90%, rgba(0,0,0,.08) 96%, transparent 100%);
  mask-image: radial-gradient(closest-side, transparent 62%, rgba(0,0,0,.2) 68%, rgba(0,0,0,.65) 73%, #000 77%, rgba(0,0,0,.8) 83%, rgba(0,0,0,.32) 90%, rgba(0,0,0,.08) 96%, transparent 100%);
  animation: breath var(--breath) ease-in-out infinite;
}
.orb-light::before {
  content: ""; position: absolute; inset: 6%; border-radius: 50%; opacity: 0.92; filter: blur(calc(var(--s) * 0.026));
  background: conic-gradient(from 20deg, var(--state-lo), var(--state), var(--state-hi), var(--state), var(--state-lo), var(--state), var(--state-hi), var(--state), var(--state-lo));
  animation: turn 50s linear infinite;
}
.orb-light i { position: absolute; left: 50%; top: 50%; width: 58%; height: 58%; margin: -29% 0 0 -29%; border-radius: 50%; filter: blur(calc(var(--s) * 0.09)); mix-blend-mode: screen; opacity: 0.5; }
.orb-light i:nth-child(1) { background: var(--state-hi); --r: 30%; animation: orbit 19s linear infinite; }
.orb-light i:nth-child(2) { background: var(--state); --r: 32%; animation: orbit 27s linear infinite reverse; }
.orb-light i:nth-child(3) { background: var(--state-lo); --r: 28%; animation: orbit 35s linear -12s infinite; }
.orb svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orb-track circle { fill: none; stroke: rgba(236, 241, 245, 0.08); stroke-width: 2.9; }
.orb-track rect { fill: rgba(236, 241, 245, 0.28); }
.orb-arc { filter: drop-shadow(0 0 calc(var(--s) * 0.018) color-mix(in oklab, var(--state) 80%, transparent)); }
.orb-arc circle { fill: none; stroke: var(--state); stroke-width: 4.5; stroke-linecap: round; }
.orb-read { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; }
.orb-label { font: 600 calc(var(--s) * 0.05)/1.2 var(--font-ui); color: var(--fog); }
.orb-num { display: flex; align-items: flex-start; font: 300 calc(var(--s) * 0.29)/1.05 var(--font-num); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.orb-num small { font: 400 calc(var(--s) * 0.093)/1 var(--font-num); color: var(--fog); margin: calc(var(--s) * 0.06) 0 0 calc(var(--s) * 0.006); letter-spacing: 0; }
.orb-chip {
  display: inline-flex; align-items: center; gap: 7px; margin-top: calc(var(--s) * 0.012); height: calc(var(--s) * 0.085); padding: 0 calc(var(--s) * 0.033);
  border-radius: 999px; background: color-mix(in oklab, var(--state) 14%, transparent); font: 600 calc(var(--s) * 0.044)/1 var(--font-ui);
}
.orb-chip i { width: calc(var(--s) * 0.03); height: calc(var(--s) * 0.03); border-radius: 50%; background: var(--state); }

/* The band under the ring: no screen, three lights at a resting heart rate. */
.band-mini { display: flex; align-items: center; gap: 14px; color: var(--fog); font: italic 400 17px/1.35 var(--font-voice); }
.band-mini svg { width: 84px; height: auto; flex: none; overflow: visible; }

/* 3 · Chapters ----------------------------------------------------------------------------------------------- */
.chapter { position: relative; padding-block: 104px; }
.chapter + .chapter { padding-top: 40px; }
.chapter-head { max-width: 38em; }
.chapter h2, .scene h2 { font-size: clamp(40px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -0.022em; margin-bottom: 20px; }
.chapter-head > p:not(.eyebrow), .scene-copy > p:not(.eyebrow) { color: var(--fog); max-width: 32em; }
.chapter-head > p + p, .scene-copy > p + p { margin-top: 12px; }
.time { font-variant-numeric: tabular-nums; color: var(--snow); }
.pair { display: grid; gap: 48px; align-items: center; margin-top: 8px; }
/* A chapter's art sits on its own card: the night's dark, a hairline, room inside. */
.art {
  position: relative; padding: clamp(18px, 3vw, 30px); border-radius: 30px; overflow: hidden;
  background: var(--deep-water); box-shadow: inset 0 0 0 1px var(--hair), 0 40px 120px -40px rgba(0, 0, 0, 0.6);
}
.art-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 18px; font-size: 14px; font-weight: 600; color: var(--snow); }
.art-top span:last-child { font-weight: 500; color: var(--fog); font-variant-numeric: tabular-nums; }
.art-foot { margin-top: 16px; font-size: 13.5px; line-height: 1.5; color: var(--fog); }
.chip2 { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 14px; font-size: 13px; font-weight: 600; color: var(--snow); background: color-mix(in oklab, var(--c, var(--glacier)) 16%, transparent); white-space: nowrap; transition: background var(--d-glide) var(--ease-glide); }
.chip2::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--glacier)); transition: background var(--d-glide) var(--ease-glide); }
.big { font: 300 clamp(44px, 6vw, 64px)/1 var(--font-num); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.big small { font: 400 0.36em/1 var(--font-num); letter-spacing: 0; color: var(--fog); margin-left: 6px; }

/* Pinned scenes: the art stays while the page scrolls, and the scroll is the time. */
/* Long enough to read the scene as it plays, short enough that it never feels stuck. */
.scene { position: relative; height: 220vh; }
.scene[data-scene="day"] { height: 200vh; }
.scene-stage { position: sticky; top: var(--nav-h); min-height: calc(100svh - var(--nav-h)); display: grid; align-content: center; gap: 28px; padding-block: 28px; }
.scene-copy { max-width: 36em; }

/* 4 · The night --------------------------------------------------------------------------------------------------- */
.night-art { padding-bottom: 22px; }
.clock { font: 300 clamp(40px, 5vw, 56px)/1 var(--font-num); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--snow); }
.stage-now { font-size: 14px; font-weight: 600; color: var(--fog); }
.stage-now b { color: var(--snow); font-weight: 600; }
.hypno-wrap { position: relative; margin-top: 18px; }
.hypno { display: block; width: 100%; height: clamp(190px, 26vw, 300px); overflow: visible; }
.hy-grid line { stroke: rgba(236, 241, 245, 0.05); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hy-links path { stroke: rgba(236, 241, 245, 0.18); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.st-awake { fill: var(--awake); } .st-rem { fill: var(--rem); } .st-light { fill: var(--light); } .st-deep { fill: var(--deep); }
.hy-hr { fill: none; stroke: var(--snow); stroke-opacity: 0.55; stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hy-low { fill: var(--night); stroke: var(--snow); stroke-width: 2; vector-effect: non-scaling-stroke; }
/* What's still to come is covered by the night itself; the playhead is the moment the scroll has reached. */
.hy-veil { position: absolute; top: -6px; bottom: -6px; right: 0; left: calc(var(--p, 1) * 100%); background: linear-gradient(90deg, rgba(17, 24, 32, 0.55), var(--deep-water) 22px); pointer-events: none; }
.hy-head { position: absolute; top: -10px; bottom: -10px; left: calc(var(--p, 1) * 100%); width: 1.5px; margin-left: -0.75px; background: linear-gradient(var(--snow), rgba(236, 241, 245, 0.15)); opacity: var(--head, 0); }
.hy-head::before { content: ""; position: absolute; left: 50%; top: 0; width: 9px; height: 9px; margin: -4px 0 0 -4.5px; border-radius: 50%; background: var(--snow); box-shadow: 0 0 0 4px rgba(236, 241, 245, 0.12); }
.hy-rows { position: absolute; left: 0; top: 0; height: clamp(190px, 26vw, 300px); pointer-events: none; }
.hy-axis { display: flex; justify-content: space-between; margin-top: 10px; font-size: 11.5px; color: var(--mist); font-variant-numeric: tabular-nums; }
.hy-key { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; padding: 0; list-style: none; font-size: 13px; font-weight: 600; }
.hy-key li { display: inline-flex; align-items: center; gap: 7px; }
.hy-key li::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.hy-key .hr::before { height: 2px; border-radius: 1px; background: rgba(236, 241, 245, 0.55); }
.caption-live { min-height: 2.9em; margin-top: 16px; font: italic 400 19px/1.45 var(--font-voice); color: var(--snow); transition: opacity 0.35s ease; }
.caption-live.swap { opacity: 0; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 4px; transition: opacity 0.6s ease; }
.js .night-art:not(.done) .facts { opacity: 0.3; }
.fact { padding: 14px 16px; border-radius: 18px; background: var(--night); box-shadow: inset 0 0 0 1px var(--hair); }
.fact b { display: block; font: 400 24px/1.1 var(--font-num); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fact span { font-size: 12.5px; color: var(--fog); }

/* 5 · What moved it ------------------------------------------------------------------------------------------- */
.moved { display: grid; gap: 4px; }
.moved-head { display: flex; gap: 10px; align-items: baseline; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--hair); font-size: 15px; font-weight: 600; }
.moved-head::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--glacier); transform: translateY(-1px); }
.input { display: grid; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.input:last-child { border-bottom: 0; }
.in-top { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.in-top b { font-weight: 600; }
.in-top span { font-variant-numeric: tabular-nums; color: var(--snow); font-weight: 500; }
/* The usual range behind the reading, and the reading itself (F76). */
.range { position: relative; height: 6px; border-radius: 3px; background: var(--fill); }
.range i { position: absolute; top: 0; bottom: 0; left: var(--lo); right: calc(100% - var(--hi)); border-radius: 3px; background: rgba(236, 241, 245, 0.16); }
.range b { position: absolute; top: 50%; left: var(--at); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--c, var(--glacier)); box-shadow: 0 0 0 3px var(--deep-water); }
.in-foot { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--mist); font-variant-numeric: tabular-nums; }
.in-foot em { font-style: normal; font-weight: 600; color: var(--c, var(--glacier)); }

/* 6 · The day ------------------------------------------------------------------------------------------------------ */
.daytrack { display: block; width: 100%; height: clamp(120px, 15vw, 160px); overflow: visible; }
.dt-hours line { stroke: rgba(236, 241, 245, 0.05); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* Half of heart-rate reserve: below it a minute adds nothing (metrics.md › Load). */
.dt-base { stroke: rgba(236, 241, 245, 0.14); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.dt-hr { fill: none; stroke: rgba(236, 241, 245, 0.32); stroke-width: 1.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.dt-zones path { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.dt-zones .z1 { stroke: var(--z1); } .dt-zones .z2 { stroke: var(--z2); } .dt-zones .z3 { stroke: var(--z3); } .dt-zones .z4 { stroke: var(--z4); } .dt-zones .z5 { stroke: var(--z5); }
.dt-axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11.5px; color: var(--mist); font-variant-numeric: tabular-nums; }
.day-wrap { position: relative; }
.day-wrap .hy-veil { top: -4px; bottom: 18px; }
.day-wrap .hy-head { bottom: 18px; }
.gauge { margin-top: 26px; }
.gauge-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.gauge-bar { position: relative; height: 12px; margin-top: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--fill) 80%, transparent); }
.gauge-target { position: absolute; top: -7px; bottom: -7px; left: var(--lo); width: calc(var(--hi) - var(--lo)); border-radius: 9px; box-shadow: inset 0 0 0 1.5px rgba(236, 241, 245, 0.42); transition: box-shadow 0.5s ease, background 0.5s ease; }
.gauge.in .gauge-target { background: rgba(79, 216, 196, 0.10); box-shadow: inset 0 0 0 1.5px rgba(79, 216, 196, 0.7); }
.gauge-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--fill, 1) * 100%); border-radius: 6px; background: var(--snow); }
.gauge-axis { display: flex; justify-content: space-between; margin-top: 12px; font-size: 11.5px; color: var(--mist); }
.gauge-axis span:last-child::after { content: " →"; }
.minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.mini { padding: 16px 18px; border-radius: 20px; background: var(--night); box-shadow: inset 0 0 0 1px var(--hair); }
.mini-top { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; font-weight: 600; }
.mini-top b { font-weight: 600; }
.mini-top span { color: var(--fog); font-weight: 500; text-align: right; }
.mini .val { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 8px 0 6px; }
.mini .val b { font: 300 34px/1 var(--font-num); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.mini p { font-size: 12.5px; line-height: 1.45; color: var(--fog); }
.who { position: relative; height: 8px; margin: 12px 0 2px; border-radius: 4px; background: var(--fill); }
.who i { position: absolute; top: -4px; bottom: -4px; left: 45%; width: 45%; border-radius: 6px; box-shadow: inset 0 0 0 1.2px rgba(79, 216, 196, 0.55); background: rgba(79, 216, 196, 0.07); }
.who b { position: absolute; left: 0; top: 0; bottom: 0; width: 56%; border-radius: 4px; background: var(--glacier); }

/* 7 · Stress, live --------------------------------------------------------------------------------------------- */
.live-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.beat { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--calm); }
.beat::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid var(--calm); opacity: 0; animation: ripple var(--beat) ease-out infinite; }
.live-line { position: relative; height: 130px; margin-top: 18px; overflow: hidden; border-radius: 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 100%); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 100%); }
.live-line svg { position: absolute; left: 0; top: 0; width: 200%; max-width: none; height: 100%; will-change: transform; }
.live-line .sl { fill: none; stroke: var(--calm); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.live-line .lvl { stroke: rgba(236, 241, 245, 0.06); stroke-width: 1; vector-effect: non-scaling-stroke; }
.live-dot { position: absolute; right: 0; top: var(--y, 52%); width: 12px; height: 12px; margin: -6px -2px 0 0; border-radius: 50%; background: var(--calm); box-shadow: 0 0 0 4px var(--deep-water); }

/* 8 · The weeks ----------------------------------------------------------------------------------------------- */
.weeks { display: grid; gap: 18px; margin-top: 44px; }
.reg { display: block; width: 100%; height: auto; overflow: visible; }
.reg-track { fill: var(--fill); }
.reg-sleep { fill: var(--light); transform: translateX(calc(var(--s) * var(--loose, 0) * 0.694px)); transition: transform 0.2s linear; }
.reg-axis { display: flex; justify-content: space-between; margin-top: 10px; font-size: 11.5px; color: var(--mist); font-variant-numeric: tabular-nums; }
.dial { display: block; width: min(100%, 320px); height: auto; margin: 0 auto; overflow: visible; }
.dial-face { fill: none; stroke: var(--hair); }
.dial-bars line { stroke: rgba(236, 241, 245, 0.28); stroke-width: 7; stroke-linecap: round; }
.dial-bars line.active { stroke: var(--glacier); }
.dial-bars line.quiet { stroke: var(--calm); }
.dial-arc { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 0; }
.dial-arc.active { stroke: var(--glacier); }
.dial-arc.quiet { stroke: var(--calm); }
.dial-h { fill: var(--mist); font: 500 11px var(--font-ui); text-anchor: middle; }
.windows { display: grid; gap: 0; margin-top: 10px; }
.windows div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hair); font-size: 14px; }
.windows span { display: inline-flex; align-items: center; gap: 8px; color: var(--snow); }
.windows span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.windows b { font-weight: 600; font-variant-numeric: tabular-nums; }
.hrvweek { position: relative; height: 54px; margin-top: 18px; }
.hw-band { position: absolute; top: 18px; height: 18px; left: 30%; width: 40%; border-radius: 9px; background: rgba(79, 216, 196, 0.12); box-shadow: inset 0 0 0 1.2px rgba(79, 216, 196, 0.45); }
.hw-axis { position: absolute; left: 0; right: 0; top: 27px; height: 1px; background: var(--hair-2); }
.hrvweek i { position: absolute; top: 27px; left: var(--x); width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: rgba(236, 241, 245, 0.55); }
.hrvweek b { position: absolute; top: 27px; left: var(--x); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--glacier); box-shadow: 0 0 0 4px var(--deep-water); }
.hw-labels { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--mist); font-variant-numeric: tabular-nums; }

/* 9 · Fitness, in years ---------------------------------------------------------------------------------------- */
.years { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.year-card { padding: 20px; border-radius: 22px; background: var(--night); box-shadow: inset 0 0 0 1px var(--hair); }
.year-card .val { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 6px; }
.year-card .val b { font: 300 clamp(48px, 6vw, 64px)/1 var(--font-num); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.year-card .val span { color: var(--fog); font-size: 15px; }
.year-card p { font-size: 13px; line-height: 1.45; color: var(--fog); }
.likely { position: relative; height: 8px; margin: 14px 0 8px; border-radius: 4px; background: var(--fill); }
.likely i { position: absolute; top: 0; bottom: 0; left: var(--lo); right: calc(100% - var(--hi)); border-radius: 4px; background: rgba(79, 216, 196, 0.35); }
.likely b { position: absolute; top: 50%; left: var(--at); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--glacier); box-shadow: 0 0 0 3px var(--night); }

/* 10 · Gallery: the real screens, as the App Store shows them ------------------------------------------------------- */
.gallery { position: relative; margin-top: 40px; }
/* Full bleed: the first screen lines up with the words above, and the strip runs to the window's edge. */
.shots {
  --inset: max(var(--gutter), calc(50vw - var(--max) / 2 + var(--gutter)));
  display: flex; gap: clamp(16px, 2.6vw, 34px); overflow-x: auto; padding: 18px var(--inset) 30px; margin-inline: calc(50% - 50vw);
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--inset); scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.shots::-webkit-scrollbar { display: none; }
.shots figure { flex: none; scroll-snap-align: start; display: grid; gap: 14px; justify-items: center; transform: translateY(calc(var(--lift, 0) * 1px)); transition: transform var(--d-drift) var(--ease-drift); }
.shots .device { --device-w: clamp(210px, 22vw, 270px); }
.shots figcaption { font-size: 13.5px; font-weight: 600; color: var(--fog); text-align: center; }
.gallery-nav { display: flex; gap: 10px; justify-content: flex-end; }
.gallery-nav button {
  display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 22px; cursor: pointer;
  background: var(--fill); color: var(--snow); transition: background 0.2s, transform var(--d-tap) var(--ease-tap);
}
.gallery-nav button:hover { background: var(--hair-2); }
.gallery-nav button:active { transform: scale(0.94); }
.gallery-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* 11 · Privacy: the heartbeat stays inside the phone; only the day's summary leaves ------------------------------------ */
.keep { display: block; width: min(100%, 420px); height: auto; margin: 0 auto; overflow: visible; }
.keep .phone { fill: var(--night); stroke: rgba(236, 241, 245, 0.22); stroke-width: 1.5; }
.keep .ecg { fill: none; stroke: var(--glacier); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 340; animation: ecg 2.6s linear infinite; }
.keep .cloud { fill: none; stroke: rgba(236, 241, 245, 0.28); stroke-width: 1.5; stroke-dasharray: 3 5; }
.keep .route { fill: none; stroke: rgba(236, 241, 245, 0.18); stroke-width: 1.2; stroke-dasharray: 2 6; }
.keep .pebble { fill: var(--snow); opacity: 0; animation: pebble 5.2s var(--ease-glide) infinite; }
.keep .pebble:nth-of-type(2) { animation-delay: 1.7s; }
.keep .pebble:nth-of-type(3) { animation-delay: 3.4s; }
.keep text { fill: var(--fog); font: 500 12px var(--font-ui); text-anchor: middle; }

/* 12 · Motion --------------------------------------------------------------------------------------------------- */
@keyframes cue { 0% { top: -40%; } 70%, 100% { top: 100%; } }
@keyframes ripple { 0% { opacity: 0.7; transform: scale(0.6); } 100% { opacity: 0; transform: scale(1.8); } }
@keyframes ecg { from { stroke-dashoffset: 340; } to { stroke-dashoffset: -340; } }
@keyframes pebble { 0% { opacity: 0; transform: translate(0, 0); } 12% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(132px, -96px); } }

/* Arrivals: each chapter's words and art rise once, on the app's glide; the art a beat after the words. */
.js .reveal { opacity: 0; transform: translateY(var(--rise)); transition: opacity var(--d-drift) var(--ease-glide), transform var(--d-drift) var(--ease-drift); transition-delay: calc(var(--i, 0) * 70ms); }
.js .reveal.seen { opacity: 1; transform: none; }
/* Bars and arcs that draw themselves when their chapter arrives. */
.js .dial-bars line { transform-box: fill-box; transform-origin: center; opacity: 0; transition: opacity 0.5s ease; transition-delay: calc(var(--h) * 28ms); }
.js .seen .dial-bars line { opacity: 1; }
.js .dial-arc { stroke-dashoffset: 100; transition: stroke-dashoffset 1.4s var(--ease-glide) 0.5s; }
.js .seen .dial-arc { stroke-dashoffset: 0; }
.js .range b, .js .likely b { left: 50%; transition: left 1.1s var(--ease-settle); transition-delay: calc(var(--i, 0) * 90ms + 200ms); }
.js .seen .range b, .js .seen .likely b { left: var(--at); }
.js .hrvweek i, .js .hrvweek b { opacity: 0; transform: translateY(-10px); transition: opacity 0.4s ease, transform var(--d-settle) var(--ease-settle); transition-delay: calc(var(--i, 0) * 90ms + 200ms); }
.js .seen .hrvweek i, .js .seen .hrvweek b { opacity: 1; transform: none; }
.js .who b { width: 0; transition: width 1.3s var(--ease-glide) 0.3s; }
.js .seen .who b { width: 56%; }

/* Ambient loops rest off screen. */
.offscreen .orb-light, .offscreen .orb-light::before, .offscreen .orb-light i, .offscreen .beat::after,
.offscreen .ecg, .offscreen .pebble, .offscreen .leds, .offscreen .led-glow { animation-play-state: paused !important; }

/* 13 · Responsive ------------------------------------------------------------------------------------------------ */
/* Narrow screens: nothing pins; each scene's art plays as it passes (home.js). */
@media (max-width: 959px) {
  .scene { height: auto; padding-block: 72px; }
  .scene-stage { position: static; min-height: 0; padding-block: 0; }
}
@media (max-width: 719px) {
  .chapter { padding-block: 72px; }
  .facts { gap: 8px; }
  .fact { padding: 10px 12px; border-radius: 14px; }
  .fact b { font-size: 18px; }
  .fact span { font-size: 11.5px; }
  .minis, .years { grid-template-columns: minmax(0, 1fr); }
  .caption-live { font-size: 17px; }
  .art { border-radius: 24px; }
}
@media (min-width: 960px) {
  .hero2 { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: calc(100svh - var(--nav-h)); padding-block: 40px 64px; }
  .pair { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(48px, 6vw, 96px); }
  .pair.flip { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .pair.flip > :first-child { order: 2; }
  .scene-stage { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; column-gap: clamp(40px, 5vw, 80px); }
  .weeks { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
  .weeks .art:first-child { grid-row: span 2; }
}

/* 14 · Reduced motion: no pinning, no loops, every final frame ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .scene { height: auto; }
  .scene-stage { position: static; min-height: 0; }
  .hy-veil, .hy-head { display: none; }
  .orb-light, .orb-light::before, .orb-light i, .beat::after, .ecg, .pebble, .cue i::after { animation: none !important; }
  .keep .pebble { opacity: 1; }
  .js .reveal { opacity: 1; transform: none; }
  .js .dial-bars line { opacity: 1; }
  .js .dial-arc { stroke-dashoffset: 0; }
  .js .range b, .js .likely b { left: var(--at); }
  .js .hrvweek i, .js .hrvweek b { opacity: 1; transform: none; }
  .js .who b { width: 56%; }
  .reg-sleep { transform: none; }
}