/* /join — the beta sign-up the studio QR codes open.
   Phone-first: most visitors arrive on an iPhone. Dark to match the app,
   the app's own type scale, and no webfonts, because a studio's wifi is bad. */
:root {
  --bg: #0E1014;
  --ink: #F2F4F7;
  --muted: rgba(255,255,255,0.62);
  --faint: rgba(255,255,255,0.42);
  --rule: rgba(255,255,255,0.10);
  --card: rgba(255,255,255,0.035);
  --input: rgba(255,255,255,0.05);
  --cold: #40D5F9;
  --sauna: #FD3D42;
  --good: #66D999;
  --spring: cubic-bezier(0.2, 0.7, 0.2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; position: relative;
}
/* The Today screen's navy wash, carried behind the top of the page. */
body::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 110vh; z-index: -1; pointer-events: none;
  background:
    radial-gradient(90% 60% at 15% 0%, rgba(13,38,64,0.95), transparent 70%),
    radial-gradient(60% 40% at 100% 10%, rgba(64,213,249,0.08), transparent 70%);
}
p, h1, h2, h3, ol, ul { margin: 0; }
a { color: inherit; }
svg { display: block; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

main, .top, footer { width: 100%; max-width: 64rem; margin: 0 auto; padding-inline: 20px; }
.top { padding-top: max(20px, env(safe-area-inset-top)); }
.wordmark { display: inline-block; line-height: 0; }
.wordmark img { height: 20px; width: auto; }

/* Section label — the app's uppercase, tracked header. */
.label, .eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint);
}
.label span { color: var(--ink); margin-right: 0.7em; font-variant-numeric: tabular-nums; }

/* ============ Hero ============ */
.hero { padding: 44px 0 20px; display: grid; gap: 44px; align-items: center; }
.hero__copy { max-width: 34rem; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); }
.pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--cold);
  box-shadow: 0 0 4px var(--cold), 0 0 10px rgba(64,213,249,0.6);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.35; } }
.hero h1 {
  font-size: clamp(2.5rem, 11vw, 4.2rem); font-weight: 200; line-height: 1.04;
  letter-spacing: -0.025em; margin: 18px 0;
}
.sub { font-size: 1.05rem; font-weight: 300; color: var(--muted); max-width: 30rem; }

/* ============ Sign-up ============ */
.signup { margin-top: 28px; }
.field {
  display: flex; gap: 8px; padding: 6px;
  background: var(--input); border: 1px solid var(--rule); border-radius: 18px;
  transition: border-color .2s, box-shadow .2s;
}
.field:focus-within { border-color: rgba(255,255,255,0.30); box-shadow: 0 0 0 4px rgba(64,213,249,0.08); }
.field.is-invalid { border-color: rgba(255,149,0,0.6); }
.field input {
  flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--ink);
  font: inherit; font-size: 17px; padding: 12px 10px 12px 12px;
}
.field input::placeholder { color: rgba(255,255,255,0.35); }
.field button {
  position: relative; flex: none; border: 0; cursor: pointer; font: inherit;
  font-size: 16px; font-weight: 600; color: #06131A; padding: 0 20px; min-height: 50px; border-radius: 13px;
  background: linear-gradient(180deg, #7FE6FF 0%, var(--cold) 100%);
  box-shadow: 0 0 18px rgba(64,213,249,0.35), inset 0 1px 0 rgba(255,255,255,0.5);
  transition: transform .18s var(--spring), box-shadow .2s;
}
.field button:active { transform: scale(0.96); }
.field button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.spinner {
  position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(6,19,26,0.25); border-top-color: #06131A; opacity: 0;
}
.is-busy .field button .btn-text { opacity: 0; }
.is-busy .field button .spinner { opacity: 1; animation: spin .7s linear infinite; }
.is-busy .field button { pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }
/* "Where did you hear about RCVRY?" (or "…scan this?" from a flyer/card). */
.where { margin-bottom: 10px; }
.where label b { font-weight: inherit; }
.where label { display: block; margin: 0 4px 7px; font-size: 14px; color: var(--muted); }
.where label span { color: var(--faint); font-size: 12px; margin-left: 4px; }
.where input {
  width: 100%; padding: 14px 16px; border-radius: 16px; outline: 0;
  background: var(--input); border: 1px solid var(--rule); color: var(--ink);
  font: inherit; font-size: 17px; transition: border-color .2s, box-shadow .2s;
}
.where input::placeholder { color: rgba(255,255,255,0.35); }
.where input:focus { border-color: rgba(255,255,255,0.30); box-shadow: 0 0 0 4px rgba(64,213,249,0.08); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.note { font-size: 13px; color: var(--faint); margin: 12px 4px 0; }
.note a { color: var(--muted); }
.note.is-error { color: #FFB350; }

.done {
  padding: 22px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(64,213,249,0.10), rgba(64,213,249,0.02));
  border: 1px solid rgba(64,213,249,0.28);
  animation: rise .7s var(--spring) both;
}
.done[hidden], form[hidden] { display: none; }
.done__mark {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--cold); box-shadow: 0 0 12px var(--cold), 0 0 28px rgba(64,213,249,0.5);
  margin-bottom: 16px;
}
.done__mark svg { width: 24px; height: 24px; fill: none; stroke: #06131A; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.done__mark path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw .5s .25s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.done__title { font-size: 1.5rem; font-weight: 300; letter-spacing: -0.01em; outline: 0; margin-bottom: 8px; }
.done__body { color: var(--muted); font-size: 0.98rem; font-weight: 300; }
.done__body strong { color: var(--ink); font-weight: 500; word-break: break-all; }

/* After sign-up: the one thing to do now, since the beta ships through TestFlight. */
.next { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.10); }
.next__label { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cold); }
.next__app { display: flex; align-items: center; gap: 14px; margin: 12px 0 12px; }
/* The App Store icon as iOS draws it: the continuous-corner squircle, approximated. */
.next__icon {
  flex: none; width: 60px; height: 60px; border-radius: 22.5%;
  box-shadow: 0 0 0 0.5px rgba(255,255,255,0.18), 0 6px 18px -6px rgba(0,122,255,0.55);
}
.next__title { font-size: 1.1rem; font-weight: 500; line-height: 1.25; margin: 0; }
.next__meta { font-size: 13px; color: var(--faint); margin-top: 3px; }
.next__body { color: var(--muted); font-size: 0.95rem; font-weight: 300; }
.next__btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px;
  min-height: 50px; padding: 0 20px; border-radius: 13px; text-decoration: none;
  font-size: 16px; font-weight: 600; color: #06131A;
  background: linear-gradient(180deg, #7FE6FF 0%, var(--cold) 100%);
  box-shadow: 0 0 18px rgba(64,213,249,0.35), inset 0 1px 0 rgba(255,255,255,0.5);
  transition: transform .18s var(--spring);
}
.next__btn:active { transform: scale(0.97); }
.next__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.steps p a { color: var(--cold); text-decoration: none; white-space: nowrap; }


/* Hero phone: the recorded Today screen, in the same frame as the mockups below. */
.hero__device { display: flex; justify-content: center; position: relative; }
.hero__device::before {
  content: ""; position: absolute; width: 120%; height: 80%; top: 10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(closest-side at 50% 40%, rgba(64,213,249,0.20), transparent),
    radial-gradient(closest-side at 50% 75%, rgba(94,92,230,0.14), transparent);
  filter: blur(24px);
}
.phone--hero { --u: calc(min(320px, 82vw) / 300); }
.screen--video { padding: 0; background: #0E1014; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============ Modalities ============ */
.modalities { padding: 40px 0 8px; }
.modalities ul { list-style: none; padding: 14px 0 6px; display: flex; flex-wrap: wrap; gap: 8px; }
.modalities li {
  display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--muted);
  border: 1px solid var(--rule); border-radius: 999px; padding: 8px 14px; background: var(--card);
}
.dot, .dots i, .routine li i, .goal i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none;
  box-shadow: 0 0 4px var(--c), 0 0 9px var(--c);
}

/* ============ Feature rows ============ */
.feature { padding: 64px 0 8px; display: grid; gap: 34px; align-items: center; }
.feature__text { max-width: 30rem; }
.feature h2 {
  font-size: clamp(1.75rem, 7vw, 2.4rem); font-weight: 250; line-height: 1.12;
  letter-spacing: -0.02em; margin: 14px 0;
}
.feature__text > p:last-child { color: var(--muted); font-weight: 300; }

@media (min-width: 820px) {
  .feature { grid-template-columns: 1fr 1fr; gap: 64px; padding-top: 96px; }
  .feature--flip .feature__text { order: 2; }
  .hero { grid-template-columns: 1.15fr 0.85fr; gap: 56px; padding-top: 64px; }
  .phone--hero { --u: calc(340px / 300); }
}

/* ============ Phone mockup ============
   Sized in `--u` so the whole screen scales as one: 1u = one iOS point on a
   300px-wide phone. Everything inside is laid out in app points. */
.device { display: flex; justify-content: center; position: relative; }
.device::before {
  content: ""; position: absolute; width: 70%; height: 60%; top: 20%; z-index: -1;
  background: radial-gradient(closest-side, rgba(64,213,249,0.14), transparent); filter: blur(20px);
}
.phone {
  --u: calc(min(300px, 78vw) / 300);
  width: calc(300 * var(--u)); aspect-ratio: 300 / 630; padding: calc(9 * var(--u));
  border-radius: calc(50 * var(--u));
  background: linear-gradient(145deg, #3a3f47, #16181c 40%, #2a2e35);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.08), inset 0 0 0 1px rgba(255,255,255,0.06);
}
.screen {
  position: relative; height: 100%; overflow: hidden; border-radius: calc(42 * var(--u));
  background: #000; padding: calc(56 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u));
  font-size: calc(13 * var(--u)); line-height: 1.35;
}
.island {
  position: absolute; top: calc(10 * var(--u)); left: 50%; transform: translateX(-50%);
  width: calc(86 * var(--u)); height: calc(25 * var(--u)); border-radius: 99px; background: #000;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04);
}
.s-label {
  font-size: calc(10 * var(--u)); font-weight: 600; letter-spacing: 0.1em; color: rgba(255,255,255,0.6);
  margin: calc(20 * var(--u)) 0 calc(9 * var(--u));
}

/* Today */
.screen--today {
  background: linear-gradient(180deg, rgb(13,38,64) 0%, rgb(8,18,28) 30%, transparent 56%), #000;
}
.t-head { display: flex; justify-content: space-between; align-items: flex-start; gap: calc(12 * var(--u)); }
.t-date { font-size: calc(9.5 * var(--u)); font-weight: 600; letter-spacing: 0.16em; color: rgba(255,255,255,0.5); margin-bottom: calc(6 * var(--u)); }
.t-hi { font-size: calc(23 * var(--u)); font-weight: 300; min-height: 1.3em; white-space: nowrap; }
.caret { display: inline-block; width: 1px; height: 0.95em; background: rgba(255,255,255,0.7); margin-left: 2px; vertical-align: -0.1em; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.t-score { position: relative; width: calc(44 * var(--u)); text-align: center; flex: none; }
.t-score svg { width: calc(44 * var(--u)); height: calc(44 * var(--u)); transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 3; }
.ring {
  fill: none; stroke: rgba(255,255,255,0.30); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 135.1; stroke-dashoffset: 135.1;
  transition: stroke-dashoffset 1.6s var(--spring), filter .4s;
}
.t-score.is-lit .ring { filter: drop-shadow(0 0 4px rgba(255,255,255,0.9)); }
.t-score span {
  position: absolute; top: 0; left: 0; width: 100%; height: calc(44 * var(--u)); display: grid; place-items: center;
  font-size: calc(16 * var(--u)); font-weight: 200; color: rgba(255,255,255,0.88); font-variant-numeric: tabular-nums;
}
.t-score em { display: block; font-style: normal; font-size: calc(7.5 * var(--u)); font-weight: 600; letter-spacing: 0.1em; color: rgba(255,255,255,0.35); margin-top: calc(4 * var(--u)); }
.t-line { font-size: calc(15 * var(--u)); font-weight: 300; line-height: 1.4; color: #fff; }
.t-foot { font-size: calc(10 * var(--u)); color: rgba(255,255,255,0.4); margin-top: calc(6 * var(--u)); }
.vitals { display: grid; grid-template-columns: 1fr 1fr; gap: calc(9 * var(--u)); }
.vital { background: rgba(255,255,255,0.05); border-radius: calc(15 * var(--u)); padding: calc(11 * var(--u)); min-height: calc(84 * var(--u)); }
.v-title { display: flex; align-items: center; gap: calc(5 * var(--u)); color: var(--t); font-size: calc(10.5 * var(--u)); font-weight: 600; }
.v-title svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.v-val { font-size: calc(22 * var(--u)); font-weight: 400; margin: calc(6 * var(--u)) 0 calc(4 * var(--u)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.v-val small { font-size: calc(10.5 * var(--u)); color: rgba(255,255,255,0.5); margin-left: calc(3 * var(--u)); }
.v-cap { font-size: calc(9 * var(--u)); color: rgba(255,255,255,0.5); line-height: 1.3; }
.v-cap.good { color: var(--good); font-weight: 600; }
.yday {
  display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(12 * var(--u));
  background: rgba(255,255,255,0.05); border-radius: calc(15 * var(--u)); font-size: calc(12 * var(--u));
}
.yday em { margin-left: auto; white-space: nowrap; font-style: normal; color: rgba(255,255,255,0.45); font-size: calc(10.5 * var(--u)); }
.dots { display: inline-flex; gap: calc(4 * var(--u)); }

/* Session timer */
.screen--timer {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: linear-gradient(180deg, rgba(64,213,249,0.35) 0%, #000 50%, #000 100%);
}
.tm-kind { font-size: calc(12 * var(--u)); font-weight: 600; letter-spacing: 0.25em; color: var(--cold); margin-top: calc(-20 * var(--u)); }
.tm-time {
  font-size: calc(72 * var(--u)); font-weight: 100; line-height: 1.1; margin-top: calc(6 * var(--u));
  font-variant-numeric: tabular-nums; text-shadow: 0 0 calc(16 * var(--u)) rgba(64,213,249,0.5);
}
.tm-sub { font-size: calc(11.5 * var(--u)); color: rgba(255,255,255,0.5); }
.tm-hr { display: flex; align-items: center; gap: calc(4 * var(--u)); margin-top: calc(10 * var(--u)); font-size: calc(10.5 * var(--u)); color: rgba(255,255,255,0.5); }
.tm-hr b { font-size: calc(15 * var(--u)); color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.tm-hr svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); fill: #FF3B30; }
.breath { position: relative; width: calc(120 * var(--u)); height: calc(120 * var(--u)); margin-top: calc(30 * var(--u)); display: grid; place-items: center; }
.breath span {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(64,213,249,0.55);
  background: radial-gradient(circle, rgba(64,213,249,0.18), rgba(64,213,249,0.02) 70%);
  box-shadow: 0 0 calc(24 * var(--u)) rgba(64,213,249,0.25);
  transform: scale(0.55); animation: breathe 8s ease-in-out infinite;
}
.breath em { position: relative; font-style: normal; font-size: calc(10.5 * var(--u)); color: rgba(255,255,255,0.7); letter-spacing: 0.04em; }
@keyframes breathe { 0%, 100% { transform: scale(0.55); } 50% { transform: scale(1); } }
.tm-controls { position: absolute; bottom: calc(36 * var(--u)); }
.ctl {
  display: grid; place-items: center; width: calc(58 * var(--u)); height: calc(58 * var(--u)); border-radius: 50%;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(10px);
}
.ctl svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); stroke: #fff; stroke-width: 2.4; stroke-linecap: round; fill: none; }

/* Routine + week */
.screen--plan { background: linear-gradient(180deg, rgba(191,90,242,0.16) 0%, transparent 40%), #0E1014; }
.p-title { font-size: calc(30 * var(--u)); font-weight: 700; letter-spacing: -0.01em; }
.routine {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  border-radius: calc(18 * var(--u)); padding: calc(14 * var(--u));
}
.r-tag { font-size: calc(9 * var(--u)); font-weight: 600; letter-spacing: 0.12em; color: #BF5AF2; }
.r-name { font-size: calc(18 * var(--u)); font-weight: 500; margin-top: calc(3 * var(--u)); }
.r-meta { font-size: calc(10.5 * var(--u)); color: rgba(255,255,255,0.5); margin-top: calc(2 * var(--u)); }
.routine ol { list-style: none; padding: 0; margin: calc(12 * var(--u)) 0; display: grid; gap: calc(8 * var(--u)); }
.routine li { display: flex; align-items: center; gap: calc(9 * var(--u)); font-size: calc(12 * var(--u)); color: rgba(255,255,255,0.85); position: relative; }
.routine li + li::before {
  content: ""; position: absolute; left: calc(3 * var(--u)); top: calc(-8 * var(--u)); height: calc(8 * var(--u));
  width: 1px; background: rgba(255,255,255,0.15);
}
.routine li em { margin-left: auto; font-style: normal; color: rgba(255,255,255,0.45); font-variant-numeric: tabular-nums; }
.r-start {
  display: block; text-align: center; padding: calc(10 * var(--u)); border-radius: 99px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  font-size: calc(12 * var(--u)); font-weight: 600;
}
.goals { display: grid; gap: calc(8 * var(--u)); }
.goal {
  display: grid; grid-template-columns: 1fr auto; row-gap: calc(8 * var(--u));
  background: rgba(255,255,255,0.05); border-radius: calc(13 * var(--u)); padding: calc(11 * var(--u)) calc(12 * var(--u));
  font-size: calc(12 * var(--u));
}
.goal span { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.goal em { font-style: normal; color: rgba(255,255,255,0.55); font-variant-numeric: tabular-nums; }
.goal b { grid-column: 1 / -1; height: calc(4 * var(--u)); border-radius: 9px; background: rgba(255,255,255,0.08); position: relative; overflow: hidden; }
.goal b::after {
  content: ""; position: absolute; inset: 0; background: var(--c); border-radius: inherit;
  box-shadow: 0 0 8px var(--c); transform-origin: left; transform: scaleX(0);
  transition: transform 1.2s var(--spring) .3s;
}
.is-visible .goal b::after, .no-js .goal b::after { transform: scaleX(var(--p)); }

/* Watch */
.device--watch { padding: 30px 0; }
.watch {
  --w: min(210px, 56vw);
  position: relative; width: var(--w); aspect-ratio: 41 / 49; padding: calc(var(--w) * 0.055);
  border-radius: calc(var(--w) * 0.26);
  background: linear-gradient(145deg, #4a4f57, #17191d 45%, #2c3037);
  box-shadow: 0 40px 70px -30px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.08);
}
.watch__crown {
  position: absolute; right: calc(var(--w) * -0.045); top: 26%; width: calc(var(--w) * 0.05); height: 18%;
  border-radius: 4px; background: linear-gradient(90deg, #2a2e35, #5a5f68);
}
.watch__screen {
  position: relative; height: 100%; border-radius: calc(var(--w) * 0.21); background: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  overflow: hidden;
}
.w-ring { position: absolute; width: 84%; transform: rotate(-90deg); }
.w-ring .ring-bg { stroke-width: 6; stroke: rgba(253,61,66,0.15); }
.w-arc {
  fill: none; stroke: var(--sauna); stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 339.3; stroke-dashoffset: 339.3; filter: drop-shadow(0 0 4px rgba(253,61,66,0.8));
  transition: stroke-dashoffset 2s var(--spring) .2s;
}
.is-visible .w-arc, .no-js .w-arc { stroke-dashoffset: 97; }
.w-kind { font-size: calc(var(--w) * 0.05); font-weight: 600; letter-spacing: 0.2em; color: var(--sauna); position: relative; }
.w-time { font-size: calc(var(--w) * 0.19); font-weight: 200; line-height: 1.1; font-variant-numeric: tabular-nums; position: relative; }
.w-hr { display: flex; align-items: center; gap: 4px; font-size: calc(var(--w) * 0.075); font-weight: 600; position: relative; }
.w-hr svg { width: calc(var(--w) * 0.06); height: calc(var(--w) * 0.06); fill: #FF3B30; }

/* ============ Privacy, steps, closing ============ */
.privacy {
  margin-top: 88px; display: flex; gap: 16px; align-items: flex-start;
  padding: 22px; border-radius: 22px; background: var(--card); border: 1px solid var(--rule);
}
.privacy svg { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--good); stroke-width: 1.7; stroke-linecap: round; margin-top: 3px; filter: drop-shadow(0 0 6px rgba(102,217,153,0.5)); }
.privacy h2 { font-size: 1.15rem; font-weight: 500; margin-bottom: 6px; }
.privacy p { color: var(--muted); font-weight: 300; font-size: 0.96rem; }

.steps { padding: 72px 0 0; }
.steps ol { list-style: none; padding: 0; margin-top: 18px; display: grid; gap: 22px; }
.steps li { display: flex; gap: 16px; align-items: flex-start; }
.steps b {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 300; font-size: 15px; border: 1px solid var(--rule); background: var(--card);
}
.steps h3 { font-size: 1.05rem; font-weight: 500; margin-bottom: 2px; }
.steps p { color: var(--muted); font-weight: 300; font-size: 0.96rem; }
@media (min-width: 820px) {
  .steps ol { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}

.closing { padding: 88px 0 24px; max-width: 34rem; }
.closing h2 { font-size: clamp(2rem, 8.5vw, 2.8rem); font-weight: 200; line-height: 1.08; letter-spacing: -0.02em; }

.warning { padding: 48px 0 40px; }
.warning p {
  background: rgba(255,149,0,0.06); border: 1px solid rgba(255,149,0,0.24); border-radius: 16px;
  padding: 16px 18px; font-size: 0.86rem; font-weight: 300; color: #F0D7B0;
}
.warning strong { color: #FFB350; font-weight: 600; }

footer {
  border-top: 1px solid var(--rule); padding-top: 24px; padding-bottom: max(32px, env(safe-area-inset-bottom));
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
}
footer nav { display: flex; gap: 20px; }
footer a { color: var(--muted); text-decoration: none; font-size: 0.9rem; }
.fine { color: #5A616D; font-size: 0.82rem; }

/* ============ Motion ============
   The app's entrance: 16pt up out of a 2pt blur, one beat per element. */
@keyframes rise { from { opacity: 0; transform: translateY(16px); filter: blur(2px); } }
.rise { animation: rise .8s var(--spring) both; }
.hero .rise:nth-child(1) { animation-delay: .05s; }
.hero .rise:nth-child(2) { animation-delay: .11s; }
.hero .rise:nth-child(3) { animation-delay: .17s; }
.hero .rise:nth-child(4) { animation-delay: .23s; }
.hero .hero__device.rise { animation-delay: .3s; }
.js .reveal { opacity: 0; transform: translateY(16px); filter: blur(2px); transition: opacity .8s var(--spring), transform .8s var(--spring), filter .8s var(--spring); }
.js .reveal.is-visible { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  .rise, .done, .pulse, .breath span, .caret { animation: none !important; }
  .breath span { transform: scale(0.8); }
  .js .reveal { transform: none; filter: none; transition: opacity .4s; }
  .ring, .w-arc, .goal b::after { transition: none; }
}

/* Let the browser break the headline into even lines at every width, so a
   word like "Routine" never ends up alone on the last line. */
h1 { text-wrap: balance; }