/* =====================================================================
   ANTAEUS — the homepage and its scenes. Depends on tokens-11.css.

   ONE RULE FOR EVERY SCENE: the FINAL state is the default. A scene's
   "from" state exists only inside BOTH
     @media (prefers-reduced-motion: no-preference)
   and either
     @supports (animation-timeline: view())      (Chrome, Safari 26+)
   or
     html.sx-io                                   (set by scenes-5.js
                                                   where view() is absent)
   so no JS, a failed script, or Reduce Motion all show the finished
   scene. JS never reveals content; it only adds motion to content that
   is already on the page. (Same contract as .marks-anim in styles-13.)
   Motion is transform and opacity only.
   ===================================================================== */

.home main { overflow-x: clip; }

/* ---------- shared section anatomy ---------- */
.home section { padding-top: 104px; padding-bottom: 104px; }
.home section.hero { padding: 64px var(--gutter) 40px; }
.sec-head { max-width: 760px; margin-bottom: 40px; }
.sec-head h2,
.map-copy h2,
.mob-copy h2,
.join h2 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(32px, 4.2vw, 50px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
.sec-head p,
.map-copy > p,
.mob-copy > p,
.join-in > p {
  margin: 14px 0 0;
  font-size: 18px;
  line-height: 28px;
  color: var(--t2);
  max-width: 54ch;
}
.scene-cap {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--t3);
}
.scene-cap a { color: inherit; }
.mob-copy > .scene-cap, .map-copy > .scene-cap { font-size: 13px; line-height: 18px; color: var(--t3); margin-top: 18px; }
/* A Slate group: the rounded panel on the canvas. The scene that
   carries the page's answer wears the focal material. */
.panel,
.receipt,
.week-scene {
  background: var(--card-el);
  border-radius: var(--r-xl);
  box-shadow: var(--catch), var(--focal-shadow);
}
i { font-style: normal; }

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  max-width: var(--maxw);
  margin: 0 auto;
}
.hero-status {
  margin: 0 0 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--t3);
}
.hero h1 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(40px, 5.6vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 0;
}
.hero .lede { margin: 24px 0 0; max-width: 40ch; font-size: 19px; line-height: 29px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; margin-top: 32px; }

.hero-visual { position: relative; margin: 0; display: flex; justify-content: center; }
/* The capture stops mid-screen, so the phone sinks into the ground
   rather than ending on a cut edge. */
.phone {
  width: 100%;
  max-width: 330px;
  border-radius: 46px 46px 0 0;
  border: 1.5px solid var(--hairline);
  border-bottom: 0;
  padding: 8px 8px 0;
  -webkit-mask-image: linear-gradient(#000 74%, transparent);
  mask-image: linear-gradient(#000 74%, transparent);
}
.shot {
  display: block;
  width: 100%;
  aspect-ratio: 720 / 1075;
  border-radius: 38px 38px 0 0;
  background-size: cover;
  background-position: top center;
  background-color: #09090b;
}
/* A real capture of the current build. Dark only: the app was captured
   in its default theme, and a light page showing a dark phone is what a
   phone on a desk looks like. Versioned in the FILENAME (siteIntegrity). */
.shot.today { background-image: url('screens/today-dark-5.webp'); }

.pull {
  position: absolute;
  left: -8%;
  bottom: 0;
  width: min(340px, 92%);
  background: var(--card-el);
  border-radius: var(--r-xl);
  box-shadow: var(--catch), 0 18px 48px rgba(0, 0, 0, 0.28);
  border: 1px solid var(--hairline);
  padding: 6px 16px 10px;
}

/* ---------- the coach's adjustment block (app: CoachAnnotation inline +
   CoachCorrection + CoachReasons). The tick says WHO; the label says
   WHAT; the rows carry the numbers: label left, figure parked right,
   the plan struck in ghost beside today's solid value. ---------- */
/* (.pull positions the hero instance; other instances sit in flow.) */
.ca-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 0 0 0 15px;
  border: 0;
  background: transparent;
  color: var(--t1);
  font: 600 15px/20px var(--f-sys);
  text-align: left;
  cursor: pointer;
  transition: transform 160ms var(--ease-out);
}
.ca-head:active { transform: scale(0.98); }
/* The coach's mark: one teal tick, at the label's left. */
.ca-head::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 2px;
  background: var(--tip);
}
.ca-label { flex: 1 1 auto; }
.chev { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--t3); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transform: rotate(180deg); transition: transform 200ms var(--ease-out); }
.coach-act.is-folded .chev { transform: none; }

.ca-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 200ms var(--ease-out); }
.coach-act.is-folded .ca-body { grid-template-rows: 0fr; }
.ca-inner { min-height: 0; overflow: hidden; padding-left: 15px; }
.coach-act.is-folded .ca-inner > * { opacity: 0; }
.ca-inner > * { transition: opacity 160ms ease; }

.ca-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--hairline);
}
.ca-k { flex: 1 1 auto; font-size: 15px; color: var(--t2); }
.ca-v { display: flex; align-items: baseline; justify-content: flex-end; gap: 10px; flex-shrink: 1; font-family: var(--f-display); font-weight: 600; font-variant-numeric: tabular-nums; }
.ca-v s { font-size: 15px; color: var(--ghost); text-decoration-thickness: 1.5px; }
.ca-v b { font-size: 18px; color: var(--t1); }
.ca-v.ca-phrase { font-family: var(--f-sys); font-weight: 400; font-size: 15px; color: var(--t1); text-align: right; }
.ca-reasons { display: grid; gap: 8px; padding: 10px 0 2px; border-top: 1px solid var(--hairline); }
.ca-reason { display: grid; gap: 1px; }
.ca-rl { font-size: 12px; font-weight: 600; color: var(--t3); }
.ca-rt { font-size: 14px; line-height: 20px; color: var(--t2); }
.ca-undo { display: inline-block; padding: 8px 0 2px; font-size: 14px; font-weight: 600; color: var(--t1); }
.ca-rows .ca-row:first-child { border-top: 0; }
.r-note .ca-undo { padding: 0; }

/* Load: the block arrives FOLDED and opens itself once, the way the
   app's block answers a tap: 200ms ease-out, rows 40ms apart, chevron
   turning. Default (no JS, Reduce Motion, no animation support) is the
   OPEN block, because the reveal is an animation, not a state. */
@media (prefers-reduced-motion: no-preference) {
  .pull:not(.touched) .ca-body { animation: ca-open 200ms var(--ease-out) 700ms backwards; }
  .pull:not(.touched) .chev { animation: ca-chev 200ms var(--ease-out) 700ms backwards; }
  .pull:not(.touched) .ca-inner > * { animation: rise 220ms var(--ease-out) backwards; }
  .pull:not(.touched) .ca-inner > :nth-child(1) { animation-delay: 740ms; }
  .pull:not(.touched) .ca-inner > :nth-child(2) { animation-delay: 780ms; }
  .pull:not(.touched) .ca-inner > :nth-child(3) { animation-delay: 820ms; }
  .pull:not(.touched) .ca-inner > :nth-child(4) { animation-delay: 860ms; }
  .pull:not(.touched) .ca-inner > :nth-child(5) { animation-delay: 900ms; }
  .pull { animation: pull-in 420ms var(--ease-out) 250ms backwards; }
}
@keyframes ca-open { from { grid-template-rows: 0fr; } }
@keyframes ca-chev { from { transform: none; } }
@keyframes pull-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

/* =====================================================================
   SCENE 1 · THE RECEIPT
   ===================================================================== */
.receipt-scene {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.receipt-scene > .scene-cap { grid-column: 2; margin-top: -14px; }
.r-tabs { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 92px; }
.r-tabs button {
  text-align: left;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--t3);
  background: transparent;
  border: 0;
  border-radius: var(--r-lg);
  padding: 12px 14px;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.r-tabs button:hover { color: var(--t1); }
.r-tabs button[aria-selected='true'] { color: var(--t1); background: var(--card-el); box-shadow: var(--catch); }
.receipt { padding: 12px 28px; }
.receipt[hidden] { display: none; }
.r-steps { list-style: none; margin: 0; padding: 0; position: relative; }
.r-step {
  position: relative;
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 20px;
  padding: 22px 0 22px 26px;
}
.r-step + .r-step { border-top: 1px solid var(--hairline); }
/* The rail: evidence -> decision -> change, one node each. */
.r-step::before {
  content: '';
  position: absolute;
  left: 0;
  top: 28px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--t3);
}
.r-step:last-child::before { background: var(--accent); border-color: var(--accent); }
.r-k { font-size: 13px; font-weight: 600; color: var(--t3); padding-top: 3px; }
.r-v p { margin: 0; }
.r-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 4px 0;
  color: var(--t2);
  font-size: 15px;
}
.r-line span { flex-shrink: 1; }
.r-line b {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 19px;
  color: var(--t1);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.r-line b.w { color: var(--warn); }
.r-say { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--t1); max-width: 34ch; }
.r-fig {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.1;
  color: var(--t1);
  font-variant-numeric: tabular-nums;
}
.r-note { margin-top: 8px !important; font-size: 15px; color: var(--t2); }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .receipt .r-step {
      animation: rise-step linear both;
      animation-timeline: view();
      animation-range: entry 15% cover 30%;
    }
    .receipt .r-step:nth-child(2) { animation-range: entry 45% cover 38%; }
    .receipt .r-step:nth-child(3) { animation-range: entry 75% cover 45%; }
  }
  html.sx-io .receipt-scene:not(.in) .r-step { opacity: 0; transform: translateY(14px); }
  html.sx-io .receipt .r-step { transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); }
  html.sx-io .receipt .r-step:nth-child(2) { transition-delay: 220ms; }
  html.sx-io .receipt .r-step:nth-child(3) { transition-delay: 440ms; }
  /* A tab switch replays the three steps in time, not on scroll. */
  .receipt.replay .r-step { animation: rise-step 420ms var(--ease-out) backwards !important; animation-timeline: auto !important; }
  .receipt.replay .r-step:nth-child(2) { animation-delay: 180ms !important; }
  .receipt.replay .r-step:nth-child(3) { animation-delay: 360ms !important; }
}
@keyframes rise-step {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* =====================================================================
   SCENE 2 · THE WEEK
   ===================================================================== */
.week-scene { padding: 24px 28px 22px; }
.wk-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.wk-title { font-size: 17px; font-weight: 600; color: var(--t1); }
.wk-pace { font-size: 15px; font-weight: 600; color: var(--t2); font-variant-numeric: tabular-nums; }
.wk-days {
  list-style: none;
  margin: 18px 0 0;
  padding: 16px 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.wk-days li { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wk-days .d { font-size: 14px; font-weight: 600; color: var(--t3); }
.k { display: block; width: 22px; height: 22px; border-radius: 50%; background: var(--kind-workout); }
.k-r { background: var(--info); }
.k-m1 { background: var(--ring-train); }
/* Several kinds in one day split the disc, in the order workout, run,
   mobility (CLAUDE.md "Week-strip hue = kind of work"). */
.k-w.k-m { background: linear-gradient(90deg, var(--kind-workout) 50%, var(--ring-train) 50%); }
.k-wr { background: linear-gradient(90deg, var(--kind-workout) 50%, var(--info) 50%); }
.k-none { width: 14px; height: 2px; margin: 10px 0; border-radius: 1px; background: var(--hairline); }

.wk-chart { position: relative; margin-top: 18px; }
.wk-chart svg { width: 100%; height: auto; overflow: visible; }
.wk-usual { fill: var(--control); opacity: 0.7; }
.wk-band-label { fill: var(--t3); font: 600 9px var(--f-sys); }
.wk-mid { stroke: var(--ghost-outline); stroke-width: 1; stroke-dasharray: 2 5; }
.wk-line { fill: none; stroke: var(--t1); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.wk-dots circle { fill: var(--card-el); stroke: var(--t1); stroke-width: 2.5; }
.wk-dots circle.hot { fill: var(--warn); stroke: var(--warn); }
.wk-axis { display: flex; justify-content: space-between; font-size: 13px; color: var(--t3); margin-top: 6px; }
.wk-verdict { margin: 14px 0 0; font-size: 17px; font-weight: 600; color: var(--t1); }
.wk-legend { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--t2); }
.wk-legend li { display: flex; align-items: center; gap: 8px; }
.wk-legend .k { width: 10px; height: 10px; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .week-scene .wk-line { animation: draw linear both; animation-timeline: view(); animation-range: entry 30% cover 50%; }
    .week-scene .wk-dots circle { animation: pop linear both; animation-timeline: view(); }
    .week-scene .wk-dots circle:nth-child(1) { animation-range: entry 30% cover 30%; }
    .week-scene .wk-dots circle:nth-child(2) { animation-range: entry 35% cover 33%; }
    .week-scene .wk-dots circle:nth-child(3) { animation-range: entry 40% cover 36%; }
    .week-scene .wk-dots circle:nth-child(4) { animation-range: entry 45% cover 39%; }
    .week-scene .wk-dots circle:nth-child(5) { animation-range: entry 50% cover 42%; }
    .week-scene .wk-dots circle:nth-child(6) { animation-range: entry 55% cover 45%; }
    .week-scene .wk-dots circle:nth-child(7) { animation-range: entry 60% cover 50%; }
    .week-scene .wk-days .k { animation: pop linear both; animation-timeline: view(); animation-range: entry 10% cover 30%; }
  }
  html.sx-io .week-scene:not(.in) .wk-line { stroke-dashoffset: 1; }
  html.sx-io .week-scene:not(.in) .wk-dots circle,
  html.sx-io .week-scene:not(.in) .wk-days .k { opacity: 0; transform: scale(0.4); }
  html.sx-io .week-scene .wk-line { transition: stroke-dashoffset 1100ms var(--ease-out) 200ms; }
  html.sx-io .week-scene .wk-dots circle,
  html.sx-io .week-scene .wk-days .k { transition: opacity 300ms ease, transform 300ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
}
.wk-dots circle, .wk-days .k { transform-box: fill-box; transform-origin: center; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }

.inputs {
  margin: 40px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
}
.inputs > div { padding: 18px 0; border-top: 1px solid var(--hairline); }
.inputs dt { font-size: 16px; font-weight: 600; color: var(--t1); }
.inputs dd { margin: 4px 0 0; font-size: 15px; line-height: 22px; color: var(--t2); }

/* =====================================================================
   SCENE 3 · THE MUSCLE MAP
   ===================================================================== */
.map-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: center;
}
.map-scrub { margin-top: 32px; }
.map-scrub label { display: block; margin-bottom: 10px; }
.map-scrub output { color: var(--t1); }
.map-scrub input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 32px;
  background: transparent;
  margin: 0;
  cursor: pointer;
}
.map-scrub input[type='range']::-webkit-slider-runnable-track { height: 2px; background: var(--hairline); border-radius: 1px; }
.map-scrub input[type='range']::-moz-range-track { height: 2px; background: var(--hairline); border-radius: 1px; }
.map-scrub input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px; height: 24px; margin-top: -11px; border-radius: 50%;
  background: var(--t1); border: 4px solid var(--card-el); box-shadow: 0 0 0 1px var(--hairline);
}
.map-scrub input[type='range']::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--t1); border: 4px solid var(--card-el); box-shadow: 0 0 0 1px var(--hairline);
}
.map-ticks { display: flex; justify-content: space-between; padding: 0 6px; font-size: 13px; font-weight: 600; color: var(--t3); }
.map-read { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--hairline); min-height: 78px; }
.map-read p { margin: 0; }
.map-sel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.map-sel b { font-family: var(--f-display); font-size: 24px; color: var(--t1); }
.map-sel span { font-size: 15px; font-weight: 600; color: var(--t2); font-variant-numeric: tabular-nums; }
.map-sel-from { margin-top: 4px !important; font-size: 14px; color: var(--t3); }
.map-legend { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--t2); }
.map-legend li { display: flex; align-items: center; gap: 7px; }
.map-legend i { width: 10px; height: 10px; border-radius: 3px; }
.lg-on { background: var(--accent); }
.lg-low { background: var(--warn); }
.lg-past { background: var(--accent-deep); }
.lg-none { background: var(--not-hit); }

.map-figs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  aspect-ratio: 1454 / 1280;
  align-items: start;
}
.map-figs svg { width: 100%; height: auto; overflow: visible; }
.map-figs .fig-label { text-align: center; font-size: 13px; font-weight: 600; color: var(--t3); margin-top: 6px; }
.map-nojs { grid-column: 1 / -1; align-self: center; color: var(--t3); text-align: center; }
.bm-base { fill: var(--silhouette); }
.bm-m { fill: var(--not-hit); cursor: pointer; transition: fill 220ms ease; stroke: var(--card); stroke-width: 2; }
.bm-m.on { fill: var(--accent); }
.bm-m.low { fill: var(--warn); }
.bm-m.past { fill: var(--accent-deep); }
.bm-m.sel { stroke: var(--t1); stroke-width: 5; }
.bm-m:focus-visible { outline: none; stroke: var(--t1); stroke-width: 6; }
.map-scene .scene-cap { text-align: center; }

/* =====================================================================
   SCENES 4 + 5 · READINESS AND THE SET LOGGER
   ===================================================================== */
.home section.pair { padding-top: 0; }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.panel { padding: 28px; display: flex; flex-direction: column; }
.panel h2 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(26px, 2.6vw, 32px);
  line-height: 1.08;
  margin: 0 0 24px;
  text-wrap: balance;
}
.panel > .scene-cap { margin-top: auto; padding-top: 18px; }

.seg { border: 0; padding: 0; margin: 0; min-width: 0; }
.seg legend { padding: 0; margin-bottom: 10px; }
.seg-track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; padding: 2px; border-radius: var(--r-lg); background: var(--control); }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span {
  display: block;
  text-align: center;
  padding: 10px 2px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--t2);
  transition: background-color 160ms ease, color 160ms ease;
}
.seg input:checked + span { background: var(--card-el); color: var(--t1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); }
.seg input:focus-visible + span { outline: 2px solid var(--t1); outline-offset: 1px; }

.rd-register { position: relative; height: 54px; margin: 22px 10px 0; container-type: inline-size; }
.rd-line { position: absolute; left: 0; right: 0; top: 16px; height: 2px; background: var(--hairline); border-radius: 1px; }
.rd-ghost, .rd-now {
  position: absolute;
  left: 0;
  top: 17px;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  transform: translateX(calc((var(--p) - 1) * 25cqw));
}
.rd-ghost { border: 1.5px solid var(--ghost-outline); }
.rd-now { width: 18px; height: 18px; margin: -9px 0 0 -9px; background: var(--t1); transition: transform 260ms var(--ease-out); }
.rd-stops { position: absolute; left: 0; right: 0; top: 30px; display: flex; justify-content: space-between; }
.rd-stops b { width: 0; display: flex; justify-content: center; font-size: 13px; font-weight: 600; color: var(--t3); font-variant-numeric: tabular-nums; }

.rd-out { margin-top: 14px; padding-top: 18px; border-top: 1px solid var(--hairline); min-height: 132px; }
.rd-out p { margin: 0; }
.rd-state { font-size: 14px; font-weight: 600; color: var(--warn); }
.rd-state.plan { color: var(--t3); }
.rd-fig { margin-top: 6px !important; font-family: var(--f-display); font-weight: 600; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15; color: var(--t1); font-variant-numeric: tabular-nums; }
.rd-why { margin-top: 8px !important; font-size: 15px; line-height: 22px; color: var(--t2); }

.lg-card { border-top: 1px solid var(--hairline); }
.lg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 0 8px; }
.lg-sets { list-style: none; margin: 0; padding: 0; }
.lg-sets li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--hairline);
}
.lg-sets li > span { font-size: 14px; font-weight: 600; color: var(--t3); font-variant-numeric: tabular-nums; }
.lg-done b { font-family: var(--f-display); font-weight: 600; font-size: 19px; color: var(--t1); font-variant-numeric: tabular-nums; }
.lg-done i { font-size: 13px; font-weight: 600; color: var(--t3); }
.lg-done i.pr { color: var(--accent); }
.lg-live { grid-template-columns: 28px minmax(0, 1fr) !important; }
.lg-ghost { margin: 0; font-size: 14px; color: var(--ghost); font-variant-numeric: tabular-nums; }
.lg-steps { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.lg-now { font-family: var(--f-display); font-weight: 600; font-size: 34px; line-height: 1; color: var(--t1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lg-now span { font-size: 22px; color: var(--t2); }
.step {
  width: 48px; height: 48px; flex: none;
  border: 0; border-radius: var(--r-md);
  background: var(--control); color: var(--t1);
  font: 600 24px/1 var(--f-sys);
  cursor: pointer;
  transition: transform 140ms var(--ease-out);
}
.step:active { transform: scale(0.94); }
.lg-go { width: 100%; margin-top: 14px; }
.lg-rest { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-top: 14px; }
.lg-rest[hidden] { display: none; }
.lg-rest svg { width: 56px; height: 56px; transform: rotate(-90deg); }
.lg-rest p { margin: 0; }
.rt-track { fill: none; stroke: var(--hairline); stroke-width: 5; }
.rt-arc { fill: none; stroke: var(--t1); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.rt-t { font-family: var(--f-display); font-weight: 600; font-size: 28px; color: var(--t1); font-variant-numeric: tabular-nums; }
/* Without JavaScript the logger is a picture of itself: no dead buttons. */
html:not(.js) .step,
html:not(.js) .lg-go,
html:not(.js) .seg,
html:not(.js) #mob-toggle,
html:not(.js) .map-scrub { display: none; }

/* =====================================================================
   SCENE 6 · MOBILITY
   ===================================================================== */
.mob-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; align-items: center; }
.mob-scene {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  padding: 28px;
  background: var(--card-el);
  border-radius: var(--r-xl);
  box-shadow: var(--catch), var(--focal-shadow);
}
.mob-stage { position: relative; width: 240px; height: 240px; }
.mob-ring, .mob-fig { position: absolute; inset: 0; width: 100%; height: 100%; }
.mr-track { fill: none; stroke: var(--hairline); stroke-width: 1.5; }
.mr-breath {
  fill: none;
  stroke: var(--ring-train);
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(var(--b, 1));
}
.mob-stage .mob-fig { inset: auto; top: 13%; left: 13%; width: 74%; height: 74%; }
.mob-fig line, .mob-fig polyline { stroke-linecap: round; stroke-linejoin: round; fill: none; }
.mf-floor { stroke: var(--hairline); stroke-width: 2; }
.mf-near line { stroke: var(--t1); stroke-width: 5; }
.mf-far line { stroke: var(--ghost-outline); stroke-width: 5; }
.mf-near line.str { stroke: var(--ring-train); }
.mf-head { fill: var(--t1); }
.mob-meta p { margin: 0; }
.mob-name { font-size: 15px; font-weight: 600; color: var(--t2); }
.mob-phase { margin-top: 10px !important; font-family: var(--f-display); font-weight: 600; font-size: 30px; line-height: 1.1; color: var(--t1); }
.mob-hold { margin-top: 6px !important; font-size: 15px; color: var(--t2); font-variant-numeric: tabular-nums; }
.mob-hold span { font-family: var(--f-display); font-weight: 600; font-size: 20px; color: var(--t1); }
#mob-toggle { margin-top: 16px; }

/* =====================================================================
   FREE / PRO, PRIVACY, JOIN
   ===================================================================== */
.tier-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tier { padding: 24px 28px; background: var(--card); border-radius: var(--r-xl); box-shadow: var(--catch); }
.tier h3 { margin: 0 0 6px; font-family: var(--f-display); font-weight: 600; font-size: 24px; }
.tier ul { list-style: none; margin: 0; padding: 0; }
.tier li { padding: 12px 0; border-top: 1px solid var(--hairline); font-size: 16px; color: var(--t1); }
.tier li:first-child { border-top: 0; }
.tier-trial { margin: 18px 0 0; font-size: 15px; color: var(--t2); }

.home section.privacy { padding-top: 24px; }
.privacy .spec { max-width: 760px; }
.privacy .lrow { padding: 14px 0; border-top: 1px solid var(--hairline); }
.privacy .lrow:first-child { border-top: 0; }
.privacy .lrow > .mono:first-child { width: 150px; color: var(--t2); font-size: 15px; }
.privacy .lrow p { margin: 0; font-size: 16px; line-height: 24px; color: var(--t1); }

.join { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 56px; align-items: start; }
.join-in {
  padding: 36px;
  background: var(--card-el);
  border-radius: var(--r-xl);
  box-shadow: var(--catch), var(--focal-shadow);
}
.join-label { display: block; margin: 28px 0 8px; font-size: 14px; font-weight: 600; color: var(--t1); }
.signup { display: flex; gap: 10px; flex-wrap: wrap; max-width: 560px; }
.signup .field { flex: 1 1 260px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.note { margin: 12px 0 0; font-size: 14px; line-height: 20px; color: var(--t3); max-width: 60ch; }
.note.err { color: var(--danger); }
.note a { color: var(--t2); }
#success { display: none; margin-top: 24px; }
#success.on { display: block; }
.testers { padding-top: 8px; }
.testers h3 { margin: 0; font-size: 18px; }
.testers p { margin: 6px 0 0; font-size: 15px; color: var(--t2); }
.testers ul { list-style: none; margin: 12px 0 0; padding: 0; }
.testers li { border-top: 1px solid var(--hairline); }
.testers a { display: block; padding: 12px 0; font-size: 15px; font-weight: 600; text-decoration: none; }
.testers a:hover { text-decoration: underline; }

/* ---------- the page-wide pause (WCAG 2.2.2) ---------- */
.motion-pause {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--card-el);
  color: var(--t1);
  font: 600 14px/1 var(--f-sys);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  cursor: pointer;
}
.motion-pause[hidden] { display: none; }

/* =====================================================================
   RESPONSIVE (explicit per section)
   ===================================================================== */
@media (max-width: 980px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero-visual { justify-content: flex-start; padding-left: 12%; }
  .pull { left: 0; }
  .receipt-scene { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .receipt-scene > .scene-cap { grid-column: 1; margin-top: 0; }
  .r-tabs { flex-direction: row; position: static; overflow-x: auto; scrollbar-width: none; }
  .r-tabs button { white-space: nowrap; padding: 10px 14px; }
  .map-grid, .mob-grid, .join { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .mob-grid .mob-copy { order: -1; }
  .pair { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .home section { padding-top: 72px; padding-bottom: 72px; }
  .home section.hero { padding: 36px var(--gutter) 24px; }
  .hero .lede { font-size: 17px; line-height: 26px; }
  .hero-visual { padding-left: 0; justify-content: flex-end; }
  .phone { max-width: 270px; margin-right: -6px; }
  .hero-visual { flex-direction: column; align-items: flex-end; }
  .pull { position: relative; left: auto; bottom: auto; width: 100%; margin-top: -96px; }
  /* In flow here, so an unfolding block on load would push the page
     (CLS). It arrives open; a tap still folds it, which is input. */
  .pull:not(.touched) .ca-body,
  .pull:not(.touched) .chev,
  .pull:not(.touched) .ca-inner > * { animation: none !important; }
  .receipt { padding: 4px 18px; }
  .r-step { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-left: 22px; }
  .week-scene, .panel, .join-in, .mob-scene { padding: 20px; }
  .inputs { grid-template-columns: minmax(0, 1fr); }
  .mob-scene { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .mob-stage { width: 220px; height: 220px; }
  .tier-cols { grid-template-columns: minmax(0, 1fr); }
  .privacy .lrow { flex-direction: column; gap: 2px; }
  .privacy .lrow > .mono:first-child { width: auto; }
  .signup { flex-direction: column; }
  .signup .field { flex: 0 0 auto; width: 100%; }
  .signup .btn { width: 100%; }
  .seg span { font-size: 12.5px; padding: 10px 0; }
  .lg-now { font-size: 28px; }
  .wk-band-label { font-size: 20px; }
}