/*
  CoachMeMate showcase: the shared stylesheet for index.html and faq.html.

  Offline by construction: the only fonts are the two Inter files in
  assets/fonts, the only images are in assets/shots, and nothing else is
  fetched. The colours are the app's own tokens (dark theme); amber and green
  appear only inside the demos, where they mean what they mean in the app:
  amber "this changed", green "on target" or "saved".
*/

@font-face {
  font-family: 'Inter Site';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter Site';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------ Tokens */

:root {
  color-scheme: dark;

  --ground: #000000;
  --raised: #121212;
  --line: #262626;
  --edge: #6e6e6e;
  --avatar: #3a3a3a;
  --chalk: #f5f5f5;
  --dim: #bababa;
  --faint: #999999;
  --brand: #e33b42;
  --brand-bright: #f2585e;
  --steady: #3ea76d;
  --amber: #f5a524;

  --tonal: rgba(245, 245, 245, 0.11);
  --tonal-hover: rgba(245, 245, 245, 0.16);
  --track: rgba(245, 245, 245, 0.09);
  --thumb: #3a3a3a;
  --on-fill: rgba(245, 245, 245, 0.1);
  --rest-fill: rgba(245, 245, 245, 0.15);
  --hover-fill: rgba(245, 245, 245, 0.05);
  --card-edge: rgba(245, 245, 245, 0.07);

  /* The glow's two colours, as r,g,b, so every gradient can set its own alpha. */
  --glow-heart: 255, 162, 150;
  --glow-core: 227, 59, 66;

  --font: 'Inter Site', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --glide: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Phone sizes: L, M and S, by transform. At a phone's width every phone is M at most. */
  --L: 0.82;
  --M: 0.82;
  --S: 0.66;
  --nav-h: 56px;
}

@media (min-width: 1024px) {
  :root {
    --L: 0.82;
    --M: 0.72;
    --S: 0.58;
  }
}

@media (min-width: 1280px) {
  :root {
    --L: 1;
    --M: 0.82;
    --S: 0.66;
  }
}

/* The five glow colours are the app's own; 4.8's swatches set data-glow. */
html[data-glow='blue'] {
  --glow-heart: 150, 192, 255;
  --glow-core: 64, 132, 255;
}

html[data-glow='violet'] {
  --glow-heart: 196, 172, 255;
  --glow-core: 139, 92, 246;
}

html[data-glow='pink'] {
  --glow-heart: 255, 160, 204;
  --glow-core: 236, 72, 153;
}

html[data-glow='silver'] {
  --glow-heart: 232, 236, 242;
  --glow-core: 200, 206, 216;
}

/* ------------------------------------------------------------------ Base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--ground);
  /* Nothing scrolls sideways: a bleed or a glow past the edge is cut. */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  /* Transparent, so the fixed glow under the page shows through. */
  background: transparent;
  color: var(--chalk);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

img {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

a {
  -webkit-tap-highlight-color: transparent;
}

[hidden] {
  display: none !important;
}

/*
  In-page links glide. Only once the page has loaded (the script adds the
  class): arriving from the FAQ at #book jumps straight there, where a
  smooth scroll crawled the whole page.
*/
@media (prefers-reduced-motion: no-preference) {
  html.smooth {
    scroll-behavior: smooth;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* One focus ring for every control: 2px chalk-dim. */
:focus-visible {
  outline: 2px solid var(--dim);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* A place focus is moved to by the demos (a heading, a status line) is not a control: no ring. */
[tabindex='-1']:focus {
  outline: none;
}

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--chalk);
  color: #000;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}

.skip:focus {
  top: 8px;
}

/* ------------------------------------------------------------------ The glow */

/*
  One fixed layer under the page: a rose heart above the frame falling off
  into the colour, and a wash from the top. Its opacity follows the scroll
  (the script writes --glow-o once a frame).
*/
.glow {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--glow-o, 1);
  background:
    radial-gradient(1400px 800px at 20% -160px,
      rgba(var(--glow-heart), 0.34) 0%,
      rgba(var(--glow-core), 0.2) 28%,
      rgba(var(--glow-core), 0.08) 55%,
      rgba(var(--glow-core), 0) 80%),
    linear-gradient(180deg, rgba(var(--glow-core), 0.1), rgba(var(--glow-core), 0) 45vh);
}

/* Under reduced motion it does not follow the scroll: it lies over the top of the page and scrolls away with it. */
@media (prefers-reduced-motion: reduce) {
  .glow {
    position: absolute;
    height: 1000px;
    opacity: 1;
  }
}

/*
  A section's own light: a 900x500 ellipse above its headline. It fades in
  from the section's top edge, so it never spills into the section before
  (Sunday night stays dark).
*/
.has-glow {
  position: relative;
  isolation: isolate;
}

/*
  Nothing in the page may widen it. A section's 900px light ran 170px past
  a phone's right edge, and a phone browser widens its layout viewport to
  fit (it reported 559px on a 390px screen), so the page could be pinched
  out sideways and taps landed off target. clip, not hidden: it makes no
  scroll container, so sticky columns still stick.
*/
main {
  overflow-x: clip;
}

.has-glow::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: var(--glow-x, 28%);
  width: 900px;
  height: 560px;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(450px 250px at 50% 130px,
    rgba(var(--glow-heart), 0.3) 0%,
    rgba(var(--glow-core), 0.18) 28%,
    rgba(var(--glow-core), 0.07) 55%,
    rgba(var(--glow-core), 0) 80%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 110px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 110px);
}

/* ------------------------------------------------------------------ Layout */

.wrap {
  width: 100%;
  max-width: calc(1240px + 32px);
  margin-inline: auto;
  padding-inline: 16px;
}

.sec {
  padding-block: 48px;
  scroll-margin-top: var(--nav-h);
}

@media (min-width: 1024px) {
  .sec {
    padding-block: 80px;
  }
}

/* A frame that runs past the section's foot is cut there. */
.bleeds {
  overflow: clip;
  padding-bottom: 0 !important;
}

.g12 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 1024px) {
  .g12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 24px;
  }
}

/* ------------------------------------------------------------------ Type */

.eyebrow {
  font-size: clamp(13px, calc(12.629px + 0.0952vw), 14px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.4;
  color: var(--faint);
}

.hero-h {
  font-size: clamp(44px, calc(24.686px + 4.9524vw), 96px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--chalk);
}

.sec-h {
  font-size: clamp(32px, calc(21.6px + 2.6667vw), 60px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--chalk);
}

.sub {
  font-size: clamp(18px, calc(15.029px + 0.7619vw), 26px);
  font-weight: 400;
  line-height: 1.35;
  color: var(--dim);
  max-width: 40ch;
}

.points {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.points li {
  font-size: clamp(16px, calc(14.514px + 0.381vw), 20px);
  line-height: 1.45;
  color: var(--dim);
  max-width: 36ch;
}

.points li b {
  font-weight: 600;
  color: var(--chalk);
}

.caption {
  font-size: clamp(14px, calc(13.257px + 0.1905vw), 16px);
  line-height: 1.4;
  color: var(--faint);
}

.numeral {
  font-size: clamp(64px, calc(40.229px + 6.0952vw), 128px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--chalk);
  white-space: nowrap;
}

.fig {
  font-variant-numeric: tabular-nums;
}

.sec-head {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sec-head .eyebrow {
  margin-bottom: -8px;
}

/* ------------------------------------------------------------------ Buttons (the app's kit) */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
  transition: scale 380ms var(--spring), background-color 150ms ease-out, color 150ms ease-out;
}

.btn:active:not([aria-disabled='true']):not(:disabled) {
  scale: 0.97;
  transition-duration: 150ms;
}

.btn.lg {
  min-height: 48px;
  padding: 8px 24px;
}

.btn.primary {
  background: var(--chalk);
  color: #000;
}

.btn.primary:hover:not([aria-disabled='true']):not(:disabled) {
  background: #ffffff;
}

.btn.primary[aria-disabled='true'],
.btn.primary:disabled {
  background: var(--rest-fill);
  color: var(--dim);
  cursor: default;
}

.btn.secondary {
  background: var(--tonal);
  color: var(--chalk);
}

.btn.secondary:hover:not([aria-disabled='true']):not(:disabled) {
  background: var(--tonal-hover);
}

.btn.secondary[aria-disabled='true'],
.btn.secondary:disabled {
  opacity: 0.6;
  cursor: default;
}

.btn.quiet {
  padding: 8px 12px;
  background: transparent;
  color: var(--dim);
}

.btn.quiet:hover {
  color: var(--chalk);
}

.btn.outline {
  background: transparent;
  color: var(--chalk);
  box-shadow: inset 0 0 0 1px var(--edge);
}

.btn.outline:hover {
  box-shadow: inset 0 0 0 1px var(--dim);
}

.btn.full {
  width: 100%;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* A TO FILL box: dashed, as a message not yet sent is in the app. Nothing else on the site is dashed but a queued set. */
.tofill {
  border: 1px dashed var(--faint);
  border-radius: 16px;
  padding: 20px 24px;
}

.tofill .tag {
  display: block;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--faint);
  margin-bottom: 10px;
}

.tofill .what {
  color: var(--dim);
}

/* A button that is not wired up yet: a TO FILL box the button's size, no link. */
.tofill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 20px;
  border: 1px dashed var(--faint);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ Nav */

/*
  The top bar blends into the page, as the app's own does: no ground at the
  top, so the glow runs on behind it. Once the page has moved under it, a
  frosted glass fades in (the ground at 80%, blurred), with a hairline at
  its foot. The script sets html.nav-over.
*/
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  background: transparent;
  isolation: isolate;
}

.nav::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: inset 0 -1px 0 rgba(245, 245, 245, 0.08);
  opacity: 0;
  transition: opacity 240ms ease-out;
  pointer-events: none;
}

html.nav-over .nav::before {
  opacity: 1;
}

.nav .wrap {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lockup {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--chalk);
  text-decoration: none;
  white-space: nowrap;
}

.lockup .name {
  color: var(--brand);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav .btn.primary {
  min-height: 40px;
  padding: 6px 18px;
}

.nav-faq {
  display: none;
}

@media (min-width: 560px) {
  .nav-faq {
    display: inline-flex;
  }
}

/* ------------------------------------------------------------------ Frames: phone and laptop */

/*
  A 390x844 screen in a 10px bezel (410x864). The device box reserves the
  scaled size; the phone inside is scaled from its top centre. --s is L, M
  or S.
*/
.device {
  position: relative;
  width: calc(410px * var(--s, 1));
  height: calc(864px * var(--s, 1));
  flex: none;
}

.device.tall {
  height: calc(1060px * var(--s, 1));
}

.phone {
  position: absolute;
  top: 0;
  left: 50%;
  width: 410px;
  height: 864px;
  margin-left: -205px;
  padding: 10px;
  border-radius: 56px;
  background: #0b0b0b;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 48px 96px rgba(0, 0, 0, 0.55);
  transform: scale(var(--s, 1));
  transform-origin: top center;
}

.device.tall .phone {
  height: 1060px;
}

.screen {
  position: relative;
  width: 390px;
  height: 100%;
  border-radius: 46px;
  overflow: hidden;
  background: #000;
  isolation: isolate;
}

.screen > img.shot {
  position: relative;
  z-index: 1;
  width: 390px;
  height: auto;
}

/* A screenshot that is missing leaves the empty frame and one word. */
.screen .missing {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--faint);
  font-size: 15px;
}

.laptop {
  position: relative;
  width: 100%;
}

.laptop .lid {
  position: relative;
  padding: 1.1%;
  border-radius: 18px 18px 8px 8px;
  background: #0b0b0b;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 48px 96px rgba(0, 0, 0, 0.55);
}

.laptop .lcd {
  position: relative;
  aspect-ratio: 1440 / 900;
  overflow: hidden;
  border-radius: 4px;
  background: #000;
}

.laptop .lcd img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
}

.laptop .base {
  position: relative;
  width: 104%;
  margin-left: -2%;
  height: clamp(5px, 1.1vw, 14px);
  border-radius: 0 0 14px 14px;
  background: #1a1a1a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 30px 60px rgba(0, 0, 0, 0.6);
}

.laptop .base::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 16%;
  height: 45%;
  transform: translateX(-50%);
  border-radius: 0 0 8px 8px;
  background: #2c2c2c;
}

/* ------------------------------------------------------------------ Reveal */

/* Sections rise 16px once as they enter. Only with the script, and never under reduced motion. */
.js .reveal {
  opacity: 0;
  translate: 0 16px;
  transition: opacity 600ms ease-out, translate 700ms var(--glide);
}

.js .reveal.in {
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    translate: none;
  }
}

/* ------------------------------------------------------------------ Hero (4.2) */

.hero {
  position: relative;
  padding-top: 40px;
}

.hero .g12 {
  gap: 0;
}

.hero-text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 40px;
}

.hero-text .eyebrow {
  margin-bottom: -4px;
}

.hero-text .sub {
  max-width: 34ch;
}

.hero-text .btn-row {
  margin-top: 8px;
}

.hero-caption {
  margin-top: 4px;
}

.hero-shot {
  display: flex;
  justify-content: center;
}

/* On a phone the frame shows about 60% of itself before the section cuts it. */
.hero-shot .device {
  height: calc(864px * var(--s) * 0.6);
}

@media (min-width: 1024px) {
  .hero {
    padding-top: 0;
  }

  .hero .g12 {
    min-height: max(720px, calc(100svh - var(--nav-h)));
    align-items: center;
  }

  .hero-text {
    grid-column: 1 / 8;
    padding-block: 64px 96px;
  }

  .hero-shot {
    grid-column: 8 / 13;
    align-self: stretch;
    position: relative;
  }

  .hero-shot .device {
    position: absolute;
    top: 72px;
    left: 50%;
    margin-left: calc(-205px * var(--s));
    height: calc(864px * var(--s));
  }
}

/* ------------------------------------------------------------------ Sunday night (4.3) */

.sunday .sec-head {
  gap: 24px;
}

.sunday .sub {
  max-width: 30ch;
}

.tiles-band {
  --ts: 0.56;
  position: relative;
  height: calc(560px * var(--ts));
  margin-top: 8px;
}

.tiles {
  position: absolute;
  left: 50%;
  top: 0;
  width: 640px;
  height: 560px;
  transform: translateX(-50%) scale(var(--ts));
  transform-origin: top center;
}

@media (min-width: 560px) {
  .tiles-band {
    --ts: 0.8;
  }
}

@media (min-width: 720px) {
  .tiles-band {
    --ts: 1;
  }
}

@media (min-width: 1024px) {
  .sunday .sec-head {
    grid-column: 1 / 6;
    align-self: center;
  }

  .tiles-band {
    --ts: 0.74;
    grid-column: 7 / 13;
    align-self: center;
    margin-top: 0;
  }

  .tiles {
    left: 0;
    transform: scale(var(--ts));
    transform-origin: top left;
  }
}

@media (min-width: 1280px) {
  .tiles-band {
    --ts: 0.94;
  }
}

.tile {
  position: absolute;
  width: 380px;
}

.tile-face {
  width: 380px;
  height: 240px;
  overflow: hidden;
  border-radius: 20px;
  background: var(--raised);
  border: 1px solid var(--line);
  box-shadow: 0 36px 80px rgba(0, 0, 0, 0.6);
}

.tile .caption {
  margin: 12px 0 0 6px;
  font-size: 14px;
}

.tile-a {
  left: 0;
  top: 6px;
  rotate: -5deg;
  z-index: 1;
}

.tile-b {
  left: 252px;
  top: 118px;
  rotate: 3deg;
  z-index: 2;
}

.tile-c {
  left: 104px;
  top: 286px;
  rotate: 6deg;
  z-index: 3;
}

/* Tile A: a chat thread */
.chat-t {
  font-size: 13px;
  line-height: 1.35;
  color: var(--dim);
}

.chat-t .head {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}

.chat-t .av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--avatar);
  color: var(--chalk);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-t .who {
  font-size: 14px;
  font-weight: 600;
  color: var(--chalk);
  line-height: 1.2;
}

.chat-t .st {
  font-size: 11px;
  color: var(--faint);
}

.chat-t .body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px 14px;
}

.chat-t .b {
  max-width: 76%;
  padding: 7px 11px;
  border-radius: 14px;
  background: #222;
  align-self: flex-start;
}

.chat-t .b.out {
  align-self: flex-end;
  background: #2f2f2f;
  color: var(--chalk);
}

.chat-t .b i {
  font-style: normal;
  font-size: 10px;
  color: var(--faint);
  margin-left: 8px;
}

/* Tile B: a sheet */
.sheet-t {
  font-size: 12px;
  color: var(--dim);
}

.sheet-t table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.sheet-t th,
.sheet-t td {
  height: 30px;
  border: 1px solid var(--line);
  padding: 0 7px;
  white-space: nowrap;
  overflow: hidden;
  text-align: left;
  font-weight: 400;
}

.sheet-t th {
  height: 22px;
  color: var(--faint);
  font-size: 10px;
  text-align: center;
  padding: 0;
}

.sheet-t tr > :first-child {
  width: 26px;
  text-align: center;
  color: var(--faint);
  font-size: 10px;
  padding: 0;
}

.sheet-t td.b {
  color: var(--chalk);
  font-weight: 600;
}

.sheet-t td.n {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sheet-t td.sel {
  box-shadow: inset 0 0 0 1.5px var(--dim);
}

.sheet-t .tabs {
  display: flex;
  gap: 2px;
  padding: 0 8px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--faint);
}

.sheet-t .tabs span {
  padding: 6px 10px;
}

.sheet-t .tabs .on {
  color: var(--chalk);
  box-shadow: inset 0 -1.5px 0 var(--dim);
}

/* Tile C: a written plan */
.doc-t {
  padding: 14px 18px 0;
}

.doc-t .page {
  height: 260px;
  padding: 16px 20px;
  border-radius: 6px 6px 0 0;
  background: #1b1b1b;
  border: 1px solid var(--line);
  border-bottom: 0;
}

.doc-t .who {
  font-size: 10px;
  color: var(--faint);
}

.doc-t .h {
  margin-top: 2px;
  font-size: 18px;
  font-weight: 700;
  color: var(--chalk);
  letter-spacing: -0.01em;
}

.doc-t .d {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--chalk);
}

.doc-t .l {
  font-size: 11px;
  line-height: 1.6;
  color: var(--dim);
}

/* ------------------------------------------------------------------ Demo sections */

.demo-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.reset {
  margin-top: 4px;
}

.demo-col .caption {
  text-align: center;
  max-width: 34ch;
}

/* The view row above the client phone, in the app's view-tab style: the open word chalk and semibold over a short underline the width of its word. */
.viewrow {
  position: relative;
  display: flex;
  gap: 8px;
}

.viewrow button {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  color: var(--dim);
  white-space: nowrap;
  transition: color 150ms ease-out;
}

/* Each word reserves its semibold width, so opening another view never moves one. */
.viewrow button::after {
  content: attr(data-label);
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 600;
}

.viewrow button:hover {
  color: var(--chalk);
}

.viewrow button[aria-selected='true'] {
  font-weight: 600;
  color: var(--chalk);
}

/* The underline: placed under the open word by the script, gliding between them. */
.viewrow .line {
  position: absolute;
  left: 0;
  bottom: 4px;
  width: var(--lw, 0px);
  height: 2px;
  border-radius: 999px;
  background: var(--chalk);
  translate: var(--lx, 0px) 0;
  transition: translate 220ms var(--glide), width 220ms var(--glide);
  pointer-events: none;
}

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  max-width: 360px;
  padding: 8px 16px;
  border-radius: 16px;
  background: var(--raised);
  border: 1px solid var(--card-edge);
  cursor: pointer;
}

.switch-row .label {
  font-size: 17px;
  font-weight: 600;
}

.switch {
  position: relative;
  width: 51px;
  height: 31px;
  flex: none;
  border-radius: 999px;
  background: var(--track);
  box-shadow: inset 0 0 0 1px var(--edge);
  transition: background-color 200ms ease-out, box-shadow 200ms ease-out;
}

.switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--dim);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  transition: translate 220ms var(--glide), background-color 200ms ease-out;
}

.switch[aria-checked='true'] {
  background: var(--chalk);
  box-shadow: none;
}

.switch[aria-checked='true']::after {
  translate: 20px 0;
  background: #000;
}

/* 4.7 */
.day .shots3 {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin-inline: -16px;
  padding: 8px 16px 24px;
  scrollbar-width: none;
}

.day .shots3::-webkit-scrollbar {
  display: none;
}

.day .shot-col {
  flex: none;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  --s: 0.66;
}

.day .shot-col .caption {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  max-width: 26ch;
  min-height: 4.2em;
}

.day .points {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.day .points li {
  max-width: 40ch;
}

@media (min-width: 1024px) {
  .day .sec-head {
    grid-column: 1 / 9;
  }

  .day .shots3 {
    grid-column: 1 / 13;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    overflow: visible;
    margin: 0;
    padding: 16px 0 0;
  }

  .day .shot-col {
    --s: var(--M);
  }

  .day .points {
    grid-column: 1 / 13;
    grid-template-columns: 1fr 1fr;
    column-gap: 64px;
    row-gap: 28px;
    margin-top: 24px;
  }
}

.field-label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--chalk);
  margin-bottom: 8px;
}

.well {
  display: block;
  width: 100%;
  max-width: 360px;
  height: 48px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: var(--tonal);
  color: var(--chalk);
  font-size: 17px;
  outline: none;
}

.well::placeholder {
  color: var(--dim);
  opacity: 1;
}

.well:focus {
  border-color: transparent;
  outline: 2px solid var(--dim);
  outline-offset: 0;
}

.field-hint {
  margin-top: 8px;
  font-size: 14px;
  color: var(--faint);
}

.swatches {
  display: flex;
  gap: 8px;
}

.swatch {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: scale 380ms var(--spring);
}

.swatch:active {
  scale: 0.9;
  transition-duration: 150ms;
}

.swatch .disc {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgb(var(--c));
}

.swatch[aria-checked='true'] {
  box-shadow: inset 0 0 0 2px var(--chalk);
}

.home-tile-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.home-tile {
  position: relative;
  width: var(--tile, 220px);
  height: var(--tile, 220px);
  border-radius: calc(var(--tile, 220px) * 0.2273);
  background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 48px 96px rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}

.home-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(calc(var(--tile, 220px) * 0.727) calc(var(--tile, 220px) * 0.5) at 50% -10%,
    rgba(var(--glow-heart), 0.3),
    rgba(var(--glow-core), 0.14) 45%,
    rgba(var(--glow-core), 0) 80%);
}

.home-tile b {
  font-size: calc(var(--tile, 220px) * 0.5);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--chalk);
}

.tile-lockup {
  max-width: calc(var(--tile, 220px) + 48px);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tile-lockup .name {
  color: inherit; /* the app name is the coach's own words, one colour */
}

/* 4.9 */
.plans .points {
  order: 2;
}

.plans .shots-pair {
  order: 3;
  position: relative;
  display: flex;
  justify-content: center;
}

.plans .shots-pair .device.main {
  height: calc(1060px * var(--s) * 0.62);
}

.plans .shots-pair .device.over {
  display: none;
}

@media (min-width: 1024px) {
  .plans .sec-head {
    grid-column: 1 / 7;
  }

  .plans .points {
    grid-column: 1 / 6;
    grid-row: 2;
    order: 0;
    align-self: start;
  }

  .plans .shots-pair {
    grid-column: 7 / 12;
    grid-row: 1 / 4;
    order: 0;
    align-self: start;
    min-height: 760px;
  }

  .plans .shots-pair .device.main {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: calc(-205px * var(--s));
    height: calc(1060px * var(--s));
  }

  .plans .shots-pair .device.over {
    display: block;
    position: absolute;
    top: 400px;
    right: -24px;
    z-index: 2;
  }
}

/* 4.10 */
.anywhere .laptop-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.anywhere .laptop-col .caption {
  text-align: center;
}

.anywhere .points {
  display: grid;
  gap: 20px;
}

@media (min-width: 1024px) {
  .anywhere .sec-head {
    grid-column: 1 / 9;
  }

  .anywhere .laptop-col {
    grid-column: 2 / 12;
    margin-top: 16px;
  }

  .anywhere .points {
    grid-column: 1 / 13;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 32px;
    margin-top: 32px;
  }
}

/* 4.11 */
.numbers .calc {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.numbers .fields {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.numbers .fields > div {
  flex: 1 1 200px;
  min-width: 0;
}

.numbers .well {
  max-width: none;
  font-variant-numeric: tabular-nums;
}

.numbers .result {
  margin-top: 40px;
}

/* The figure and its line, or the waiting line: one height either way, so nothing below jumps. */
.numbers .result .slot {
  min-height: calc(clamp(64px, calc(40.229px + 6.0952vw), 128px) + 44px);
}

.numbers .result .label {
  margin-bottom: 12px;
}

.numbers .result .line {
  margin-top: 12px;
  font-size: clamp(16px, calc(14.514px + 0.381vw), 20px);
  color: var(--dim);
}

/* Before both numbers are in: one quiet line where the figure will be, never a placeholder figure. */
.numbers .result .waiting {
  max-width: 30ch;
  padding: 18px 0 18px 18px;
  border-left: 2px solid var(--line);
  font-size: clamp(16px, calc(14.514px + 0.381vw), 20px);
  line-height: 1.45;
  color: var(--faint);
}

.numbers .caption {
  max-width: 44ch;
}

/* 4.12 */
.proof .lead {
  text-align: center;
  font-size: clamp(16px, calc(14.514px + 0.381vw), 20px);
  color: var(--dim);
  max-width: 44ch;
  margin-inline: auto;
}

.proof .facts {
  display: grid;
  gap: 48px;
  margin-top: 56px;
  text-align: center;
}

.proof .facts .t {
  margin-top: 20px;
  font-size: clamp(18px, calc(15.029px + 0.7619vw), 26px);
  font-weight: 600;
}

.proof .facts .d {
  margin: 8px auto 0;
  font-size: clamp(16px, calc(14.514px + 0.381vw), 20px);
  color: var(--dim);
  max-width: 26ch;
}

.proof .facts .numeral {
  font-size: clamp(64px, calc(40.229px + 6.0952vw), 112px);
}

.proof .tofill {
  margin-top: 64px;
}

.proof .tofill .q {
  font-size: 26px;
  line-height: 1.3;
  color: var(--dim);
}

.proof .tofill .r {
  margin-top: 12px;
  font-size: 16px;
  color: var(--faint);
}

@media (min-width: 1024px) {
  .proof .facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
}

/* 4.14 */
.book .btn-row {
  flex-direction: column;
  align-items: stretch;
}

@media (min-width: 560px) {
  .book .btn-row {
    flex-direction: row;
    align-items: center;
  }
}

.book .btn-row > * {
  min-width: 160px;
}

/* ------------------------------------------------------------------ Footer */

.foot {
  padding: 48px 0 64px;
  border-top: 1px solid var(--line);
  margin-top: 48px;
}

.foot .wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.foot .links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: -12px;
}

.foot .line {
  font-size: 14px;
  color: var(--faint);
}

@media (min-width: 1024px) {
  .foot .wrap {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ------------------------------------------------------------------ FAQ page */

.faq-list {
  max-width: 42rem;
  margin-top: 40px;
  border-top: 1px solid var(--line);
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 14px 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary svg {
  flex: none;
  color: var(--dim);
  transition: rotate 220ms var(--glide);
}

.faq-list details[open] summary svg {
  rotate: 180deg;
}

.faq-list .a {
  padding: 0 0 20px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--dim);
  max-width: 60ch;
}

.faq-cta {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

/* ================================================================== The app, rebuilt for the demos

  Everything under .app is drawn at the app's own sizes (15px base, 13px
  small, 17px/700 section titles, 26px/700 page titles, 44px controls) and
  never scaled by itself: the phone frame scales it as one picture.
*/

.app {
  font-size: 15px;
  line-height: 1.55;
  color: var(--chalk);
  text-align: left;
  -webkit-user-select: none;
  user-select: none;
}

.app input,
.app textarea {
  -webkit-user-select: text;
  user-select: text;
}

.app .dim {
  color: var(--dim);
}

.app .faint {
  color: var(--faint);
}

.app .xs {
  font-size: 13px;
  line-height: 1.5;
}

.app .num {
  font-variant-numeric: tabular-nums;
}

.app .page-title {
  font-size: 26px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.app .sec-title {
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: -0.012em;
}

.app .group-title {
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  color: var(--dim);
}

.app .card {
  background: var(--raised);
  border: 1px solid var(--card-edge);
  border-radius: 18px;
}

/* The app's own ground glow, under a shell screen (the player has none). */
.screen.lit::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 520px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(300px 230px at 50% -30px,
      rgba(var(--glow-heart), 0.17) 0%,
      rgba(var(--glow-core), 0.1) 28%,
      rgba(var(--glow-core), 0.04) 55%,
      rgba(var(--glow-core), 0) 80%),
    linear-gradient(180deg, rgba(var(--glow-core), 0.07), rgba(var(--glow-core), 0) 420px);
}

/* Faces */
.face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--d, 30px);
  height: var(--d, 30px);
  border-radius: 50%;
  background: var(--avatar);
  color: var(--chalk);
  font-size: calc(var(--d, 30px) * 0.38);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.face.ring {
  box-shadow: 0 0 0 2px var(--raised), 0 0 0 4px var(--chalk);
}

/* The slim top bar with the person's face at its end. */
.app-top {
  position: relative;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 14px;
  flex: none;
}

/* Kit inside the app: same pills as the site */
.app .btn {
  font-size: 15px;
}

/* Icons */
.ico {
  display: block;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--chalk);
  flex: none;
}

/* View tabs inside the app (static) */
.vtabs {
  display: flex;
  gap: 28px;
  height: 44px;
  align-items: center;
  font-size: 15px;
}

.vtabs span {
  position: relative;
  color: var(--dim);
  font-weight: 500;
}

.vtabs span.on {
  color: var(--chalk);
  font-weight: 600;
}

.vtabs span.on::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 2px;
  border-radius: 2px;
  background: var(--chalk);
}

/* The tab bar: a glass pill of five glyphs, the open one filled on a soft capsule. */
.tabbar {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  height: 58px;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.tabbar .t {
  position: relative;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--chalk);
}

.tabbar .t.on::before {
  content: '';
  position: absolute;
  width: 56px;
  height: 40px;
  border-radius: 999px;
  background: var(--on-fill);
}

.tabbar .t svg {
  position: relative;
}

.tabbar button.t {
  border-radius: 999px;
  transition: scale 380ms var(--spring);
}

.tabbar button.t:active {
  scale: 0.88;
  transition-duration: 150ms;
}

.tabbar .dot {
  position: absolute;
  top: 12px;
  left: calc(50% + 8px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
}

.tabbar .dot.red {
  width: 9px;
  height: 9px;
  background: var(--brand);
  top: 11px;
}

/* ------------------------------------------------------------------ The player (5.1, 5.3) */

.player {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.pl-head {
  position: relative;
  flex: none;
  height: 72px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 14px 0 6px;
  background: #000;
}

.pl-head .back {
  color: var(--chalk);
}

.pl-head .tt {
  flex: 1;
  min-width: 0;
}

.pl-head .tt .t {
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: -0.012em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pl-head .tt .s {
  font-size: 15px;
  line-height: 22px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pl-clock {
  flex: none;
  text-align: right;
}

.pl-clock .v {
  font-size: 34px;
  line-height: 36px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.pl-clock .l {
  font-size: 13px;
  line-height: 18px;
  color: var(--dim);
}

.pl-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--line);
}

.pl-bar span {
  display: block;
  height: 100%;
  width: calc(var(--p, 0) * 100%);
  background: var(--chalk);
  transition: width 220ms var(--glide);
}

.pl-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 24px 16px 40px;
}

.pl-body::-webkit-scrollbar,
.scroll::-webkit-scrollbar {
  display: none;
}

.ex + .ex {
  margin-top: 40px;
}

.ex-name {
  margin-top: 2px;
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.ex-chips {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  height: 44px;
  margin-block: -6px;
  flex: none;
  border-radius: 999px;
  transition: scale 380ms var(--spring);
}

.chip:active {
  scale: 0.97;
  transition-duration: 150ms;
}

.chip .face2 {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--tonal);
  color: var(--chalk);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 150ms ease-out, color 150ms ease-out, box-shadow 150ms ease-out;
}

.chip:hover .face2 {
  background: var(--tonal-hover);
}

.ex-rx {
  margin-top: 14px;
  font-size: 36px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'case';
}

.ex-meta {
  margin-top: 8px;
  font-size: 15px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.sets {
  margin-top: 20px;
}

.sets-head,
.set,
.beat {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr) 48px;
  column-gap: 10px;
  align-items: center;
}

.sets-head {
  font-size: 15px;
  color: var(--dim);
  margin-bottom: 8px;
}

.sets-head span {
  text-align: center;
}

.sets-head span:first-child {
  text-align: left;
}

.set + .set,
.beat + .set {
  margin-top: 12px;
}

.set-n {
  font-size: 15px;
  font-weight: 600;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.set.logged .set-n {
  color: var(--steady);
}

.box {
  width: 100%;
  min-width: 0;
  height: 56px;
  border-radius: 16px;
  border: 1px solid transparent;
  background: var(--tonal);
  color: var(--chalk);
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
  outline: none;
  padding: 0 6px;
}

.box.sug {
  background: transparent;
  border: 1px dashed var(--edge);
  color: var(--dim);
  font-weight: 400;
}

.box:focus {
  border-style: solid;
  border-color: transparent;
  outline: 2px solid var(--dim);
  outline-offset: 0;
}

.box.bad {
  border-color: var(--brand-bright);
}

.tick {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--edge);
  color: var(--dim);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: scale 380ms var(--spring), background-color 150ms ease-out, border-color 150ms ease-out;
}

.tick:active {
  scale: 0.9;
  transition-duration: 150ms;
}

.tick:hover {
  border-color: var(--dim);
  color: var(--chalk);
}

.tick[data-state='logged'] {
  background: var(--steady);
  border-color: transparent;
  color: #000;
}

.tick[data-state='queued'] {
  border-style: dashed;
  border-color: var(--dim);
  color: var(--chalk);
}

.tick .mark {
  display: flex;
}

.beat {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--steady);
  font-variant-numeric: tabular-nums;
}

.beat span {
  text-align: center;
}

.set-hint {
  margin-top: 4px;
  padding-left: 38px;
  font-size: 14px;
  color: var(--dim);
}

.feel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 10px;
  margin-top: 22px;
}

.feel .chip {
  width: 100%;
}

.feel .chip .face2 {
  width: 100%;
  justify-content: center;
  color: var(--dim);
}

.feel .chip:hover .face2 {
  color: var(--chalk);
}

.feel .chip[aria-pressed='true'] .face2 {
  background: var(--chalk);
  color: #000;
}

.feel .chip.pain .face2 {
  background: transparent;
  color: var(--brand-bright);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.feel .chip.pain:hover .face2 {
  background: rgba(227, 59, 66, 0.1);
}

.feel .chip.pain[aria-pressed='true'] .face2 {
  background: rgba(227, 59, 66, 0.2);
  color: var(--chalk);
  box-shadow: inset 0 0 0 1.5px var(--brand);
}

.pain-line {
  margin-top: 12px;
  font-size: 15px;
  color: var(--dim);
}

.pl-foot {
  flex: none;
  position: relative;
  padding: 12px 16px 22px;
  border-top: 1px solid var(--line);
  background: #000;
}

.pl-foot .row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pl-foot .left-words {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.pl-foot .note {
  margin-bottom: 10px;
  font-size: 15px;
  color: var(--dim);
}

.pl-foot .unsaved {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 15px;
  color: var(--dim);
}

.pl-foot .unsaved .btn {
  margin-right: -12px;
  flex: none;
}

.pl-foot .count .btn.secondary {
  flex: 1;
  min-width: 0;
}

/* The Offline pill, under the phone's top, as the app draws it. */
.offline-pill {
  position: absolute;
  top: 22px;
  right: 14px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(18, 18, 18, 0.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  font-size: 13px;
  font-weight: 600;
  color: var(--chalk);
  pointer-events: none;
  animation: offline-in 240ms ease-out both;
}

.offline-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dim);
}

@keyframes offline-in {
  from {
    opacity: 0;
    translate: 0 -6px;
  }
}

/* ------------------------------------------------------------------ The recap */

.recap {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  padding: 56px 20px 32px;
  text-align: center;
}

.recap::-webkit-scrollbar {
  display: none;
}

.recap .inner {
  margin-block: auto;
}

.done-disc {
  width: 64px;
  height: 64px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--steady);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.recap h3 {
  margin-top: 24px;
}

.recap .what {
  margin-top: 4px;
  color: var(--dim);
}

.recap .figs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 32px;
}

.recap .figs div {
  display: flex;
  flex-direction: column-reverse;
}

.recap .figs dt {
  font-size: 13px;
  color: var(--dim);
}

.recap .figs dd {
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.recap .effort {
  margin-top: 40px;
  text-align: left;
}

.recap .effort .hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.recap .anchors {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  font-size: 13px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.recap .beats {
  margin-top: 40px;
  text-align: left;
}

.recap .beats li {
  padding: 12px 0;
  font-size: 15px;
}

.recap .beats li + li {
  border-top: 1px solid var(--line);
}

.recap .status-line {
  margin-top: 32px;
  font-size: 15px;
  color: var(--dim);
}

.recap .status-line .sent {
  color: var(--steady);
  font-weight: 600;
}

.recap .done-btn {
  margin-top: 24px;
}

.saved {
  font-size: 15px;
  color: var(--steady);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ Segmented tracks */

.seg {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 2px;
  padding: 2px;
  border-radius: 14px;
  background: var(--track);
}

.seg.rows {
  grid-auto-flow: row;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
}

.seg .clip {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

.seg .thumb {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc((100% - 4px - (var(--n) - 1) * 2px) / var(--n));
  border-radius: 12px;
  background: var(--thumb);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  translate: calc(var(--i, 0) * (100% + 2px)) 0;
  transition: translate 220ms var(--glide), opacity 150ms ease-out, scale 150ms ease-out, box-shadow 150ms ease-out, background-color 150ms ease-out;
}

.seg.rows .thumb {
  bottom: auto;
  width: calc((100% - 4px - (var(--cols) - 1) * 2px) / var(--cols));
  height: calc((100% - 4px - (var(--rows) - 1) * 2px) / var(--rows));
  translate: calc(var(--c, 0) * (100% + 2px)) calc(var(--r, 0) * (100% + 2px));
}

.seg .thumb.steady {
  background: #000;
  box-shadow: inset 0 0 0 1.5px var(--steady);
}

.seg .thumb.mark {
  background: #000;
  box-shadow: inset 0 0 0 1.5px var(--amber);
}

.seg .thumb.empty {
  opacity: 0;
  scale: 0.85;
  transition: opacity 150ms ease-out, scale 150ms ease-out;
}

.seg .cell {
  position: relative;
  height: 44px;
  min-width: 0;
  padding: 0 6px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--dim);
  white-space: nowrap;
  transition: color 150ms ease-out, background-color 150ms ease-out;
}

.seg .cell:hover {
  color: var(--chalk);
}

.seg .cell:active {
  background: var(--hover-fill);
}

.seg .cell[aria-checked='true'] {
  color: var(--chalk);
}

.seg .cell[aria-checked='true'].steady {
  color: var(--steady);
  font-weight: 600;
}

.seg .cell[aria-checked='true'].mark {
  color: var(--amber);
  font-weight: 600;
}

/* ------------------------------------------------------------------ Diet (5.1) */

.scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  scrollbar-width: none;
}

.app-page {
  padding: 0 16px 104px;
}

.title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.targets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.targets div {
  display: flex;
  flex-direction: column-reverse;
}

.targets dt {
  font-size: 15px;
  color: var(--dim);
}

.targets dd {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.row-between {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.meals {
  margin-top: 16px;
}

.meal {
  padding: 16px 0;
}

.meal + .meal {
  border-top: 1px solid var(--line);
}

.meal .mh {
  display: flex;
  align-items: center;
  gap: 10px;
}

.meal .mn {
  flex: 1;
  min-width: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
}

.meal .foods {
  font-size: 15px;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.meal .seg {
  margin-top: 10px;
}

/* ------------------------------------------------------------------ The coach phone (5.2) */

.co {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.co-head {
  flex: none;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px 0 16px;
  border-bottom: 1px solid rgba(245, 245, 245, 0.04);
}

.co-head .nm {
  font-size: 17px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.co-head .plus {
  margin-left: auto;
  color: var(--chalk);
}

.thread {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 16px 16px 24px;
}

.thread::-webkit-scrollbar {
  display: none;
}

.strip .figs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  margin-top: 14px;
}

.strip .figs dt {
  font-size: 15px;
  color: var(--dim);
}

.strip .figs dd {
  margin-top: 2px;
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.strip .figs dd small {
  font-size: 13px;
  font-weight: 400;
  color: var(--dim);
}

.strip .closes {
  margin-top: 14px;
  color: var(--dim);
}

.strip .words {
  display: flex;
  flex-wrap: wrap;
  gap: 0 4px;
  margin: 4px 0 0 -12px;
}

.strip .words .btn.quiet {
  padding-inline: 12px;
}

.co-ask {
  margin-top: 24px;
}

.bubble {
  max-width: 82%;
  margin: 24px 0 0 auto;
  padding: 10px 16px;
  border-radius: 22px;
  background: var(--tonal);
  font-size: 15px;
  line-height: 1.5;
}

.bubble-time {
  margin-top: 6px;
  text-align: right;
  font-size: 13px;
  color: var(--dim);
}

.wait {
  margin-top: 20px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 15px;
  color: var(--dim);
}

.wait .secs {
  font-variant-numeric: tabular-nums;
  color: var(--faint);
}

.shimmer {
  background-image: linear-gradient(90deg, var(--dim) 0%, var(--dim) 40%, var(--chalk) 50%, var(--dim) 60%, var(--dim) 100%);
  background-size: 250% 100%;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 1.6s linear infinite;
}

@keyframes shimmer {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: 0 0;
  }
}

.fade-in {
  animation: fade-in 260ms ease-out both;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

.rise {
  animation: rise 260ms ease-out both;
}

@keyframes rise {
  from {
    opacity: 0;
    translate: 0 12px;
  }
}

.answer {
  margin-top: 20px;
  font-size: 15px;
  line-height: 1.6;
}

.tray {
  margin-top: 20px;
}

.tray .tray-sub {
  color: var(--dim);
}

.plan-card {
  margin-top: 14px;
  padding: 16px;
  border-radius: 18px;
  background: var(--raised);
  border: 1px solid rgba(245, 165, 36, 0.75);
  transition: border-color 150ms ease-out, background-color 150ms ease-out;
}

.plan-card.out {
  background: transparent;
  border-color: var(--line);
}

.plan-card .pc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
}

.plan-card label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  min-height: 44px;
  margin-block: -6px;
}

.plan-card input[type='checkbox'] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--chalk);
  cursor: pointer;
}

.plan-card .pc-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--amber);
}

.plan-card.out .pc-name {
  color: var(--dim);
}

.plan-card .pc-meta {
  margin-top: 2px;
  font-size: 13px;
  color: var(--dim);
}

.plan-card .pc-sum {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}

.plan-card .pc-line {
  margin-top: 6px;
  font-size: 17px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.plan-card .from {
  color: var(--dim);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.plan-card .arrow {
  color: var(--dim);
  margin: 0 6px 0 0;
}

.plan-card .from,
.nw {
  white-space: nowrap;
}

.plan-card .to {
  color: var(--amber);
}

.fig-btn {
  color: var(--amber);
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  text-decoration: underline dotted var(--faint);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  padding: 10px 2px;
  margin: -10px -2px;
  border-radius: 6px;
}

.fig-btn:hover {
  text-decoration-color: var(--amber);
}

.plan-card .pc-why {
  margin-top: 6px;
  font-size: 15px;
  color: var(--dim);
}

.plan-card .pc-by {
  margin-top: 8px;
  font-size: 13px;
  color: var(--faint);
}

.plan-card .pc-reads {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.5;
}

.plan-card .pc-reads .lbl {
  color: var(--dim);
}

.link-btn {
  color: var(--chalk);
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 8px 2px;
  margin: -8px -2px;
  font-weight: 400;
}

.plan-card .pc-actions {
  margin: 8px 0 -6px -12px;
}

.plan-card .left-out {
  margin-top: 8px;
  font-size: 15px;
  color: var(--dim);
}

.edit-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.edit-row .well {
  width: 72px;
  height: 44px;
  font-size: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.edit-row .lbl {
  font-size: 15px;
  color: var(--dim);
}

.edit-err {
  margin-top: 6px;
  font-size: 14px;
  color: var(--brand-bright);
}

.note-edit {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: var(--tonal);
  font-size: 15px;
  line-height: 1.55;
  resize: none;
  outline: none;
}

.note-edit:focus {
  border-color: transparent;
  outline: 2px solid var(--dim);
  outline-offset: 0;
}

.ask-line {
  margin-top: 10px;
  font-size: 15px;
  color: var(--dim);
}

.ask-line q {
  quotes: '\201C' '\201D';
  color: var(--chalk);
}

.flash {
  animation: flash 900ms ease-out both;
}

@keyframes flash {
  0% {
    background-color: rgba(245, 165, 36, 0.18);
  }

  100% {
    background-color: transparent;
  }
}

.publish-row {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.publish-row .why {
  font-size: 13px;
  color: var(--dim);
}

.published {
  margin-top: 20px;
}

.published .ok {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 600;
}

.published .ok .disc {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--steady);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.published ul {
  margin-top: 12px;
}

.published li {
  padding: 8px 0;
  font-size: 15px;
  color: var(--dim);
}

.published li + li {
  border-top: 1px solid var(--line);
}

.published li b {
  color: var(--chalk);
  font-weight: 600;
}

.wa-msg {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--raised);
  border: 1px solid var(--card-edge);
  font-size: 14px;
  line-height: 1.5;
  color: var(--dim);
  white-space: pre-wrap;
}

.closed-line {
  margin-top: 24px;
  font-size: 15px;
  color: var(--dim);
}

.co-foot {
  flex: none;
  padding: 8px 16px 84px;
}

.co-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--tonal);
  font-size: 15px;
  font-weight: 500;
}

.co-pill .dim {
  color: var(--dim);
}

.composer {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 52px;
  padding: 0 4px 0 6px;
  border-radius: 26px;
  background: var(--tonal);
  color: var(--dim);
}

.composer .ph {
  flex: 1;
  font-size: 15px;
  color: var(--dim);
  padding-left: 6px;
}

.composer .send {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--tonal);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dim);
}

/* ------------------------------------------------------------------ The client's Training (5.2, 4.8) */

.ct-label {
  margin-top: 2px;
  color: var(--dim);
  font-size: 15px;
}

.upd-card {
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--raised);
  border: 1px solid var(--card-edge);
}

.upd-card > button,
.upd-card > .upd-row {
  border-radius: 12px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}

.upd-card .face {
  --d: 44px;
  margin: 2px;
}

.upd-card .ut {
  flex: 1;
  min-width: 0;
}

.upd-card .ut b {
  display: block;
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
}

.upd-card .ut > span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15px;
  color: var(--dim);
}

.upd-card .chev {
  color: var(--dim);
  transition: rotate 220ms var(--glide);
}

.upd-card [aria-expanded='true'] .chev {
  rotate: 90deg;
}

.changes {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.changes .ch-h {
  font-size: 13px;
  font-weight: 600;
  color: var(--dim);
}

.changes .ch {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.5;
}

.changes .ch .what {
  font-weight: 600;
}

.changes .ch .from {
  display: block;
  color: var(--dim);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.changes .ch .to {
  display: block;
  color: var(--amber);
}

.upnext {
  margin-top: 12px;
  padding: 16px;
}

.upnext .nm {
  font-size: 26px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.upnext .fake-btn {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border-radius: 999px;
  background: var(--chalk);
  color: #000;
  font-weight: 600;
}

.week-rows li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
}

.week-rows li + li {
  border-top: 1px solid var(--line);
}

.week-rows .wr {
  flex: 1;
  min-width: 0;
}

.week-rows .wr b {
  display: block;
  font-size: 17px;
  font-weight: 600;
}

.week-rows .wr span {
  display: block;
  font-size: 13px;
  color: var(--dim);
}

.week-rows .cnt {
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ Motion: a tick's pop, drawn in */

.pop {
  animation: pop 420ms var(--spring);
}

@keyframes pop {
  0% {
    scale: 0.55;
  }

  55% {
    scale: 1.25;
  }

  80% {
    scale: 0.96;
  }

  100% {
    scale: 1;
  }
}

.pop .tick-path {
  stroke-dasharray: 1;
  animation: tick-draw 300ms ease-out 40ms both;
}

@keyframes tick-draw {
  from {
    stroke-dashoffset: 1;
  }

  to {
    stroke-dashoffset: 0;
  }
}

/* ------------------------------------------------------------------ Reduced motion: every animation off, the state still in text or the drawn mark */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .shimmer {
    animation: none !important;
    background: none;
    color: var(--dim);
  }
}

/* ------------------------------------------------------------------ Additions */

.view-abs {
  position: absolute;
  inset: 0;
}

.missing {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--faint);
  font-size: 15px;
}

/* The switch reads its state from its row, which carries role="switch". */
[role='switch'][aria-checked='true'] .switch {
  background: var(--chalk);
  box-shadow: none;
}

[role='switch'][aria-checked='true'] .switch::after {
  translate: 20px 0;
  background: #000;
}

.switch-row {
  color: var(--chalk);
  width: 100%;
  text-align: left;
}

/* 4.11: the measured facts beside the calculator */
.facts-col .eyebrow {
  margin-bottom: 12px;
}

.facts-rows > div {
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.facts-rows > div:last-child {
  border-bottom: 1px solid var(--line);
}

.facts-rows dt {
  font-size: clamp(18px, calc(15.029px + 0.7619vw), 26px);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.facts-rows dd {
  margin-top: 2px;
  font-size: clamp(16px, calc(14.514px + 0.381vw), 20px);
  color: var(--dim);
}

/* ------------------------------------------------------------------ Polish pass (2026-10-26) */

/* A tablet shows all three coach screens side by side, no scrolling. */
@media (min-width: 720px) and (max-width: 1023px) {
  .day .shots3 {
    overflow: visible;
    justify-content: space-between;
    margin-inline: 0;
    padding-inline: 0;
  }

  .day .shot-col {
    --s: 0.54;
    flex: 0 1 auto;
  }
}

/* 4.8: the preview phone shows Training down to this week's sessions, fading out above the tab bar. */
.yours .preview .device {
  height: calc(864px * var(--s) * var(--crop, 0.84));
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 14% * var(--crop-fade, 1)), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 14% * var(--crop-fade, 1)), transparent 100%);
}

/* 4.9: the extra height of the tall phone goes under the points, not between the headline and them. */
@media (min-width: 1024px) {
  .plans .g12 {
    grid-template-rows: auto auto 1fr;
  }

  .plans .sec-head {
    align-self: start;
  }

  .plans .points {
    margin-top: 16px;
  }
}

/* 4.14: the closing call to action, centred. */
.book .sec-head {
  align-items: center;
  text-align: center;
}

.book .sub {
  max-width: none;
}

.book .btn-row {
  justify-content: center;
}

@media (max-width: 559px) {
  .book .btn-row {
    align-self: stretch;
  }
}

/*
  A framed device is positioned, so it paints after plain text that follows
  it, and its long soft shadow dimmed that text (a caption, Reset, the
  lockup under the Home Screen tile). Text near a frame is positioned too,
  so it paints above the shadow, in source order.
*/
.hero-text,
.sec-head,
.points,
.feats,
.caption,
.reset,
.under,
.tile-lockup,
.switch-row,
.controls,
.fields-col,
.facts-col,
.viewrow,
.who-label {
  position: relative;
}

/* Tablet: the rest of the two-column sections. */
@media (min-width: 720px) and (max-width: 1023px) {
  .plans .g12 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 32px;
    row-gap: 24px;
  }

  .plans .sec-head {
    grid-column: 1 / -1;
  }

  .plans .points {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    order: 0;
  }

  .plans .shots-pair {
    grid-column: 2;
    grid-row: 2;
    order: 0;
  }

  .day .points {
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
  }

  .anywhere .points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
  }

  .anywhere .points li,
  .day .points li {
    max-width: none;
  }
}

/* The sideways row of coach screens: its ring sits inside it, where the page's edge cannot clip it. */
.day .shots3:focus-visible {
  outline-offset: -2px;
  border-radius: 12px;
}

/* Centred captions break into even lines, never one or two words left alone. */
.checkin .under .caption,
.demo-col .caption,
.day .shot-col .caption,
.anywhere .laptop-col .caption,
.proof .lead {
  text-wrap: balance;
}

/* ================================================================== The walkthrough (2026-10-26)

  The four demos and the calculator are five numbered steps, each laid out
  as one screen: an instruction line, the phone (scaled to the window by
  the script, which writes --fit), and the step's Reset and Next. On a
  phone and a tablet the screen is the stage, under the step's words; from
  1024px the words and the stage share the screen, the phone on the right.
*/

/* The step indicator, centred in the top bar while a step is on screen. */
.tour-ind {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease-out, visibility 0s linear 220ms;
}

html.in-tour .tour-ind {
  opacity: 1;
  visibility: visible;
  transition: opacity 220ms ease-out, visibility 0s;
}

.ti-t {
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--chalk);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ti-name {
  display: none;
  font-weight: 500;
  color: var(--dim);
}

.ti-dots {
  display: flex;
  gap: 5px;
}

.ti-dots i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(245, 245, 245, 0.24);
  transition: width 260ms var(--glide), background-color 200ms ease-out;
}

.ti-dots i.seen {
  background: rgba(245, 245, 245, 0.6);
}

.ti-dots i.on {
  width: 18px;
  background: var(--chalk);
}

@media (min-width: 720px) {
  .tour-ind {
    flex-direction: row;
    gap: 14px;
  }

  .ti-name {
    display: inline;
  }
}

/* An arrow after a button's words, nudged on hover. */
.btn .arr {
  font-weight: 500;
  transition: translate 220ms var(--glide);
}

.btn:hover .arr {
  translate: 3px 0;
}

/* ------------------------------------------------------------------ A step */

.step {
  padding-bottom: 0;
}

.step .step-grid {
  position: relative;
}

.step-text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.step-head {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.step-head .eyebrow {
  margin-bottom: -6px;
}

.step .points li {
  max-width: 44ch;
}

.step .step-cap {
  max-width: 52ch;
}

/* The stage: one screen under the top bar. */
.stage {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  margin-top: 32px;
  padding-block: 12px 16px;
}

/* What to do here, in one line, with a slow light passing over it. */
.instr {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: clamp(16px, calc(14.514px + 0.381vw), 19px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--chalk);
  text-wrap: pretty;
}

/* A slow light passing over the words, about every six seconds, as the
   app's "Thinking…" line shimmers: the eye is drawn, never nagged. Still
   with reduced motion. On the visible words only: background-clip: text
   paints every glyph inside its box, the screen reader's line too. */
@media (prefers-reduced-motion: no-preference) {
  .instr .sweep {
    background: linear-gradient(100deg, var(--chalk) 0%, var(--chalk) 42%, rgb(var(--glow-heart)) 50%, var(--chalk) 58%, var(--chalk) 100%);
    background-size: 250% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: instr-sweep 6s ease-in-out infinite;
  }
}

@keyframes instr-sweep {
  0% { background-position: 100% 0; }
  45%, 100% { background-position: 0% 0; }
}

.stage-ctl {
  position: relative;
}

.stage-demo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.step .device {
  --s: var(--fit, 0.66);
}

/* Positioned, as all words near a phone are, so the phone's long shadow never dims them. */
.stage-foot,
.instr,
.step-head,
.step-cap {
  position: relative;
}

.stage-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.stage-foot .reset {
  margin: 0 0 0 -12px;
}

@media (min-width: 1024px) {
  .step {
    padding-block: 24px;
  }

  /*
    Words on the left, the demo on the right. The stage's own box gives way
    (display: contents), so its parts sit in the left column under the
    heading, and the first and last rows (1fr each) centre the column
    against the phone.
  */
  .step .step-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: 1fr repeat(6, auto) 1fr;
    column-gap: 64px;
    min-height: calc(100vh - var(--nav-h) - 48px);
    min-height: calc(100svh - var(--nav-h) - 48px);
  }

  .step-text,
  .stage {
    display: contents;
  }

  .step-head {
    grid-column: 1;
    grid-row: 2;
  }

  .instr {
    grid-column: 1;
    grid-row: 3;
    margin-top: 32px;
  }

  .stage-ctl {
    grid-column: 1;
    grid-row: 4;
    margin-top: 24px;
  }

  .step-points {
    grid-column: 1;
    grid-row: 5;
    margin-top: 32px;
  }

  .step .step-cap {
    grid-column: 1;
    grid-row: 6;
    margin-top: 24px;
  }

  .stage-foot {
    grid-column: 1;
    grid-row: 7;
    margin-top: 32px;
    justify-content: flex-start;
  }

  .stage-demo {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    justify-self: center;
  }

  .step.yours .step-grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  }

  .step .points {
    gap: 14px;
  }

  .step .points li {
    font-size: clamp(16px, calc(13.6px + 0.25vw), 18px);
  }
}

@media (min-width: 1280px) {
  .step.checkin .step-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

/* The check-in's two phones need the width: until 1280px its words sit above its one screen. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .step.checkin {
    padding-block: 80px 0;
  }

  .step.checkin .step-grid {
    display: block;
    min-height: 0;
  }

  .step.checkin .step-text,
  .step.checkin .stage {
    display: flex;
  }

  .step.checkin .instr,
  .step.checkin .step-cap,
  .step.checkin .stage-foot {
    margin-top: 0;
  }

  .step.checkin .stage {
    margin-top: 32px;
  }

  .step.checkin .stage-foot {
    justify-content: space-between;
  }
}

/* ------------------------------------------------------------------ Step 2: two phones */

.checkin .pair {
  gap: 8px;
}

.checkin .who-label {
  display: none;
  text-align: center;
  margin-bottom: 4px;
}

.viewrow button[aria-pressed='true'] {
  font-weight: 600;
  color: var(--chalk);
}

.whose .new-dot {
  position: absolute;
  top: 9px;
  right: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
}

@media (max-width: 719px) {
  .checkin .pair[data-show='coach'] .client-col,
  .checkin .pair[data-show='client'] .coach-col {
    display: none;
  }
}

@media (min-width: 720px) {
  .checkin .whose {
    display: none;
  }

  .checkin .pair {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
  }

  .checkin .who-label {
    display: block;
  }
}

/* ------------------------------------------------------------------ Step 3: the switch */

.signal .switch-row {
  max-width: 360px;
}

/* ------------------------------------------------------------------ Step 4: name, logo, glow */

.yours .controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.name-field .well {
  max-width: 300px;
}

.logo-btns {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* A file input dressed as the kit's grey pill: the input lies over the whole pill, so a press anywhere on it opens the picker. */
.file-btn {
  position: relative;
  flex: none;
  overflow: hidden;
}

.file-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
}

.file-btn:has(.file-input:focus-visible) {
  outline: 2px solid var(--dim);
  outline-offset: 2px;
}

.file-btn .ico,
.logo-remove .ico {
  flex: none;
}

.logo-field .field-hint {
  margin-top: 6px;
}

.field-err {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--brand-bright);
}

.field-err:empty {
  display: none;
}

.glow-field {
  display: flex;
  align-items: center;
  gap: 16px;
}

.glow-field .field-label {
  margin: 0;
}

.yours .preview {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16px;
  --tile: 104px;
  --crop: 0.84;
}

.yours .home-tile-wrap {
  gap: 10px;
}

.yours .tile-lockup {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* A logo on the tile: an opaque square fills it, anything else sits inside it on the dark ground. */
.tile-logo {
  position: absolute;
  inset: 15%;
  width: 70%;
  height: 70%;
  object-fit: contain;
}

.tile-logo.fill {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-tile.has-logo b {
  display: none;
}

/* The coach's lockup at the start of the preview's top bar, or their logo in its place. */
.app-top.with-mark {
  justify-content: space-between;
  gap: 12px;
}

.app-mark {
  min-width: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-mark .name {
  color: inherit; /* the app name is the coach's own words, one colour */
}

.app-logo {
  display: block;
  max-width: 160px;
  max-height: 30px;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: left center;
}

@media (min-width: 720px) {
  .yours .preview {
    gap: 32px;
    --tile: 150px;
  }

  .yours .tile-lockup {
    font-size: 16px;
  }
}

@media (min-width: 1024px) {
  .yours .controls {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 20px;
  }

  /* The logo's pill sits beside the name, level with its field. */
  .yours .logo-field {
    padding-top: 32px;
  }

  .yours .glow-field {
    grid-column: 1 / -1;
  }

  .yours .preview {
    gap: 40px;
    --tile: 180px;
  }

  .yours .tile-lockup {
    font-size: 18px;
  }
}

/* ------------------------------------------------------------------ Step 5: the calculator */

.numbers .stage-ctl {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.numbers .result {
  margin-top: 0;
}

.numbers .facts-col {
  align-items: stretch;
  gap: 28px;
}

.numbers .facts .eyebrow {
  margin-bottom: 12px;
}

@media (min-width: 1024px) {
  .numbers .facts-col {
    width: min(400px, 32vw);
    gap: 40px;
  }
}

/* ------------------------------------------------------------------ Coach marks

  A soft ring on the next thing to tap, and a short label beside it. Both
  let every press through (only the label's small cross takes one). Under
  reduced motion the ring is still and the label stays.
*/
.cm {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 30;
  pointer-events: none;
}

.cm-ring {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--w, 0px);
  height: var(--h, 0px);
  translate: var(--x, 0px) var(--y, 0px);
  border-radius: var(--r, 14px);
  box-shadow: 0 0 0 2px rgba(245, 245, 245, 0.95), 0 0 24px 4px rgba(245, 245, 245, 0.18);
  opacity: 0;
  transition: opacity 200ms ease-out;
}

.cm-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  animation: cm-pulse 1.9s ease-out infinite;
}

@keyframes cm-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(245, 245, 245, 0.55);
  }

  70%,
  100% {
    box-shadow: 0 0 0 14px rgba(245, 245, 245, 0);
  }
}

.cm-tag {
  position: absolute;
  left: 0;
  top: 0;
  translate: var(--tx, 0px) var(--ty, 0px);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 36px;
  padding: 4px 4px 4px 14px;
  border-radius: 999px;
  background: rgba(32, 32, 32, 0.94);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 0 0 1px rgba(245, 245, 245, 0.16), 0 12px 32px rgba(0, 0, 0, 0.55);
  color: var(--chalk);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease-out, visibility 0s linear 200ms;
}

.cm.show .cm-ring,
.cm.show .cm-tag {
  opacity: 1;
}

/* Shown, its cross can be reached by Tab; hidden, it cannot. */
.cm.show .cm-tag {
  visibility: visible;
  transition: opacity 200ms ease-out, visibility 0s;
}

/* A small point on the label, towards its ring. */
.cm-tag::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: rgb(32, 32, 32);
  box-shadow: 0 0 0 1px rgba(245, 245, 245, 0.16);
  rotate: 45deg;
}

.cm-tag[data-side='above']::after {
  left: calc(var(--caret, 50%) - 5px);
  bottom: -5px;
  clip-path: polygon(calc(100% + 2px) -2px, calc(100% + 2px) calc(100% + 2px), -2px calc(100% + 2px));
}

.cm-tag[data-side='below']::after {
  left: calc(var(--caret, 50%) - 5px);
  top: -5px;
  clip-path: polygon(-2px calc(100% + 2px), -2px -2px, calc(100% + 2px) -2px);
}

.cm-tag[data-side='right']::after {
  top: calc(var(--caret, 50%) - 5px);
  left: -5px;
  clip-path: polygon(-2px -2px, -2px calc(100% + 2px), calc(100% + 2px) calc(100% + 2px));
}

.cm-tag[data-side='left']::after {
  top: calc(var(--caret, 50%) - 5px);
  right: -5px;
  clip-path: polygon(-2px -2px, calc(100% + 2px) -2px, calc(100% + 2px) calc(100% + 2px));
}

.cm-tag[data-side='above'] {
  --ey: 6px;
}

.cm-tag[data-side='below'] {
  --ey: -6px;
}

.cm-tag[data-side='right'] {
  --ex: -6px;
}

.cm-tag[data-side='left'] {
  --ex: 6px;
}

.cm-x {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--dim);
  pointer-events: auto;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}

.cm-x:hover {
  background: rgba(245, 245, 245, 0.1);
  color: var(--chalk);
}

/* The cross at the label's start, where its end would sit on another control. */
.cm-tag.x-first {
  flex-direction: row-reverse;
  padding: 4px 14px 4px 4px;
}

/* On Next, the button says it all: the ring alone (the words are still spoken). */
.cm.ring-only .cm-tag {
  display: none;
}

/* No clear place for the cross: the label alone, which takes no press. */
.cm-tag.no-x {
  padding-right: 14px;
}

.cm-tag.no-x .cm-x {
  display: none;
}

/* A new label rises in beside its ring. */
@media (prefers-reduced-motion: no-preference) {
  .cm-tag.enter {
    animation: cm-enter 280ms var(--glide);
  }

  @keyframes cm-enter {
    from {
      opacity: 0;
      transform: translate(var(--ex, 0px), var(--ey, 0px));
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .cm-ring::after {
    animation: none;
  }

  .cm-ring,
  .cm-tag {
    transition: none;
  }

  .nav::before {
    transition: none;
  }

  .tour-ind,
  .ti-dots i {
    transition: none;
  }
}

/* ------------------------------------------------------------------ Phone and tablet: steps 4 and 5 on one screen */

@media (max-width: 1023px) {
  /* The preview first, so a phone's keyboard, rising under the name, leaves it in view. */
  .yours .stage-demo {
    order: 2;
  }

  .yours .stage-ctl {
    order: 3;
  }

  .yours .stage-foot {
    order: 4;
  }

  /* The logo's pill beside the name, its line under it. */
  .yours .controls {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 8px;
    row-gap: 14px;
  }

  .yours .logo-field {
    padding-top: 32px;
  }

  .yours .logo-field .field-hint {
    max-width: 22ch;
  }

  .yours .glow-field {
    grid-column: 1 / -1;
  }

  .yours #yours-name-hint {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .numbers .facts-rows > div {
    padding: 10px 0;
  }

  .numbers .facts-rows dt {
    font-size: 16px;
  }

  .numbers .facts-rows dd {
    margin-top: 0;
    font-size: 14px;
  }

  .numbers .facts .eyebrow {
    margin-bottom: 6px;
  }

  .numbers .result .label {
    margin-bottom: 8px;
  }
}

/* On a phone, a logo in place swaps its pill for Remove; from 560px both show. */
@media (max-width: 559px) {
  .logo-field.has-logo .file-btn {
    display: none;
  }
}

@media (min-width: 720px) and (max-width: 1023px) {
  .yours .controls {
    grid-template-columns: minmax(0, 18rem) auto;
    justify-content: start;
    column-gap: 12px;
  }

  .yours .logo-field .field-hint {
    max-width: none;
  }
}

/* A short laptop screen: the words beside the phone a little closer together, so a step stays one screen. */
@media (min-width: 1024px) and (max-height: 820px) {
  .step-head {
    gap: 16px;
  }

  .instr {
    margin-top: 24px;
  }

  .stage-ctl {
    margin-top: 20px;
  }

  .step-points {
    margin-top: 24px;
  }

  .step .step-cap {
    margin-top: 16px;
  }

  .stage-foot {
    margin-top: 24px;
  }

  .step .sec-h {
    font-size: clamp(32px, calc(21.6px + 2.6667vw), 54px);
  }
}

/* The hero's two ways in, one above the other on a phone. */
@media (max-width: 559px) {
  .hero-text .btn-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* A very narrow phone keeps its top bar to the name and Book a demo; each step still says its number. */
@media (max-width: 359px) {
  .tour-ind {
    display: none;
  }
}

/* ------------------------------------------------------------------ What a coach gains (2026-10-29) */

/*
  After the walkthrough, features are grouped by what a coach gains. Each
  feature is a title and one line. A section may carry phones beside its
  list (.gain-shots), on the left with .flip, or none with .wide.
*/
.feats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.feats li {
  font-size: clamp(16px, calc(15.257px + 0.1905vw), 18px);
  line-height: 1.45;
  color: var(--dim);
  max-width: 40ch;
}

.feats li b {
  display: block;
  margin-bottom: 4px;
  font-size: clamp(17px, calc(15.886px + 0.2857vw), 20px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--chalk);
}

@media (min-width: 720px) {
  .feats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
    row-gap: 32px;
  }
}

.gain {
  position: relative;
}

.gain-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.gain-shots {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin-inline: -16px;
  padding: 8px 16px 24px;
  scrollbar-width: none;
}

.gain-shots::-webkit-scrollbar {
  display: none;
}

.gain-shots .shot-col {
  flex: none;
  margin: 0;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  --s: 0.66;
}

.gain-shots .shot-col .caption {
  text-align: center;
  max-width: 26ch;
  position: relative;
}

.gain-shots.one {
  justify-content: center;
  overflow: visible;
}

.gain-shots.one .shot-col {
  --s: var(--M);
}

@media (min-width: 720px) and (max-width: 1023px) {
  .gain-shots {
    justify-content: center;
    gap: 32px;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }

  .gain-shots .shot-col {
    --s: 0.6;
  }

  .gain-shots.one .shot-col {
    --s: 0.72;
  }
}

@media (min-width: 1024px) {
  .gain-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    column-gap: 32px;
    row-gap: 40px;
    align-items: start;
  }

  .gain .sec-head {
    grid-column: 1 / 8;
    grid-row: 1;
  }

  .gain .feats {
    grid-column: 1 / 8;
    grid-row: 2;
  }

  .gain .gain-shots {
    grid-column: 8 / 13;
    grid-row: 1 / 3;
    justify-content: center;
    gap: 16px;
    overflow: visible;
    margin: 0;
    padding: 0;
  }

  .gain .gain-shots .shot-col {
    --s: 0.58;
  }

  .gain .gain-shots.one .shot-col {
    --s: var(--M);
  }

  .gain.flip .sec-head,
  .gain.flip .feats {
    grid-column: 6 / 13;
  }

  .gain.flip .gain-shots {
    grid-column: 1 / 6;
  }

  .gain.wide .sec-head {
    grid-column: 1 / 9;
  }

  .gain.wide .feats {
    grid-column: 1 / 13;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 48px;
    row-gap: 40px;
  }

  .day .feats {
    grid-column: 1 / 13;
    column-gap: 64px;
    margin-top: 16px;
  }
}

/* Pricing: no figure on the site, a calm line and the next step. */
.price-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 42rem;
  margin-inline: auto;
  padding: 40px 24px;
  border-radius: 24px;
  background: var(--raised, #121212);
  box-shadow: 0 0 0 1px var(--line, #262626);
  text-align: center;
}

.price-h {
  font-size: clamp(32px, calc(21.6px + 2.6667vw), 60px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--chalk);
}

.price-sub {
  font-size: clamp(16px, calc(14.514px + 0.381vw), 20px);
  line-height: 1.45;
  color: var(--dim);
  max-width: 40ch;
}

@media (min-width: 1024px) {
  .price-card {
    padding: 56px 48px;
  }
}