/* Fullday website — Site A, "Apple-clean product page" (owner's pick, 11 Oct 2026; research/site-round-2/specs.md and
   the A prototype in research/site-round-2/a/). From the references: Bevel's rounded hero stage and tinted feature cards
   with the phone cut by the card's edge, Apple's grey tiles, the system face at 600 with tight tracking, one dark pill,
   short lines. Real app screens sit in drawn iPhone and Apple Watch frames (.ph, .wt). Manrope ExtraBold (self-hosted,
   the app's own) only for big numbers. Nothing moves on load; no third-party request.
   Light first. Dark keeps the same structure: tokens on :root, redefined under prefers-color-scheme unless
   data-theme="light", and again under data-theme="dark" (the claude.ai Artifact contract). Text pairs are ≥ 4.5:1 in
   both modes (tools/audit.mjs checks every text node against its real background). */

:root {
  --bg: #FFFFFF; --tile: #F5F5F7; --tile2: #EBEBEF; --chip: var(--tile);
  --ink: #1D1D1F; --ink2: #6E6E73; --ink2t: #56565B; --ink3: #8E8E93;          /* ink2t: grey words on a tint; ink3: glyphs only */
  --hair: rgba(0, 0, 0, .09);
  --coral: #FF5A43; --coralT: #B3301A; --coralW: #FFE9E4; --coralA: #FFF5F2; --coralB: #FFE4DB; --coralG: rgba(255, 90, 67, .16);
  --green: #1DB16F; --greenT: #0A7446; --greenW: #E2F4EA; --greenA: #F0FAF5; --greenB: #D7F1E3; --greenG: rgba(29, 177, 111, .14);
  --indigo: #6E6BF0; --indigoT: #4B47C6; --indigoW: #E9E8FC; --indigoA: #F4F3FF; --indigoB: #E3E2FF; --indigoG: rgba(110, 107, 240, .2);
  --amber: #F4A714; --amberT: #8A5800; --amberW: #FDF0D5; --amberA: #FFF9EC; --amberB: #FFEDCB; --amberG: rgba(244, 167, 20, .2);
  --rose: #EC4C74; --roseT: #B3304F; --roseW: #FFE6EC; --roseA: #FFF4F6; --roseB: #FFE1E8; --roseG: rgba(236, 76, 116, .15);
  --stageTop: #F7F7F9;
  --pill: #1D1D1F; --onPill: #FFFFFF;
  --navbg: rgba(255, 255, 255, .84);
  --lift: 0 0 0 .5px rgba(0, 0, 0, .06), 0 24px 60px -28px rgba(0, 0, 0, .3);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --num: "Manrope", var(--sans);
  --gutter: 20px; --max: 1080px; --sec: 44px;
  /* Aliases for the unpublished compare draft (content/compare.css), so it renders in this look too. */
  --paper: var(--bg); --well: var(--tile); --surface: var(--bg); --disp: var(--sans); --text: var(--sans); --shadow: var(--lift);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A0A0B; --tile: #1C1C1E; --tile2: #2C2C2E;
    --ink: #F5F5F7; --ink2: #A1A1A6; --ink2t: #B4B4B9; --ink3: #6E6E73;
    --hair: rgba(255, 255, 255, .12);
    --coral: #FF6B55; --coralT: #FF8C7A; --coralW: rgba(255, 140, 122, .16); --coralA: #1C1311; --coralB: #2E1813; --coralG: rgba(255, 107, 85, .24);
    --green: #34D399; --greenT: #4ADBA4; --greenW: rgba(74, 219, 164, .14); --greenA: #0F1814; --greenB: #10271D; --greenG: rgba(52, 211, 153, .2);
    --indigo: #8F8CFF; --indigoT: #A3A1FF; --indigoW: rgba(163, 161, 255, .16); --indigoA: #14131F; --indigoB: #1F1D40; --indigoG: rgba(143, 140, 255, .26);
    --amber: #FFC24D; --amberT: #FFC966; --amberW: rgba(255, 201, 102, .14); --amberA: #19150E; --amberB: #2C2210; --amberG: rgba(255, 194, 77, .2);
    --rose: #FF7196; --roseT: #FF8AA8; --roseW: rgba(255, 138, 168, .16); --roseA: #1B1115; --roseB: #2F151E; --roseG: rgba(255, 113, 150, .22);
    --stageTop: #141416;
    --pill: #F5F5F7; --onPill: #1D1D1F;
    --navbg: rgba(10, 10, 11, .8);
    --lift: 0 0 0 .5px rgba(255, 255, 255, .1), 0 24px 60px -28px rgba(0, 0, 0, .9);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0A0A0B; --tile: #1C1C1E; --tile2: #2C2C2E;
  --ink: #F5F5F7; --ink2: #A1A1A6; --ink2t: #B4B4B9; --ink3: #6E6E73;
  --hair: rgba(255, 255, 255, .12);
  --coral: #FF6B55; --coralT: #FF8C7A; --coralW: rgba(255, 140, 122, .16); --coralA: #1C1311; --coralB: #2E1813; --coralG: rgba(255, 107, 85, .24);
  --green: #34D399; --greenT: #4ADBA4; --greenW: rgba(74, 219, 164, .14); --greenA: #0F1814; --greenB: #10271D; --greenG: rgba(52, 211, 153, .2);
  --indigo: #8F8CFF; --indigoT: #A3A1FF; --indigoW: rgba(163, 161, 255, .16); --indigoA: #14131F; --indigoB: #1F1D40; --indigoG: rgba(143, 140, 255, .26);
  --amber: #FFC24D; --amberT: #FFC966; --amberW: rgba(255, 201, 102, .14); --amberA: #19150E; --amberB: #2C2210; --amberG: rgba(255, 194, 77, .2);
  --rose: #FF7196; --roseT: #FF8AA8; --roseW: rgba(255, 138, 168, .16); --roseA: #1B1115; --roseB: #2F151E; --roseG: rgba(255, 113, 150, .22);
  --stageTop: #141416;
  --pill: #F5F5F7; --onPill: #1D1D1F;
  --navbg: rgba(10, 10, 11, .8);
  --lift: 0 0 0 .5px rgba(255, 255, 255, .1), 0 24px 60px -28px rgba(0, 0, 0, .9);
  color-scheme: dark;
}
@media (min-width: 760px) { :root { --gutter: 40px; --sec: 64px; } }

/* Manrope ExtraBold (SIL OFL 1.1), a self-hosted Latin subset of the app's own file: big numbers only. */
@font-face { font-family: "Manrope"; font-weight: 800; font-style: normal; font-display: swap; src: url("../assets/fonts/manrope-800.d0803f13a5.woff2") format("woff2"); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.47 var(--sans); letter-spacing: -.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: 3px; }
h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3 { font-weight: 600; text-wrap: balance; color: var(--ink); }
b, strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 8px; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 12px 18px; border-radius: 999px; background: var(--pill); color: var(--onPill); text-decoration: none; }
.skip:focus { left: 16px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Type ---------- */
h1 { font-size: clamp(44px, 6.6vw, 84px); line-height: 1.02; letter-spacing: -.035em; }
h2 { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.06; letter-spacing: -.03em; }
h3 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.12; letter-spacing: -.025em; }
.eyebrow { font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--t, var(--coralT)); margin-bottom: 10px; }
.eyebrow--ink { color: var(--ink2); }
.lead { font-size: clamp(19px, 1.7vw, 22px); line-height: 1.38; color: var(--ink2); max-width: 30em; margin-top: 14px; }
.fine { font-size: 14px; line-height: 1.5; color: var(--ink2); margin-top: 14px; }
.src { font-size: 14px; line-height: 1.5; color: var(--ink2); margin-top: 18px; max-width: 34em; }
.lead a, .fine a, .src a, .answer a, .prose a, .rows a, .tile p a { color: var(--coralT); }
.num { font-family: var(--num); font-weight: 800; letter-spacing: -.045em; font-variant-numeric: tabular-nums; line-height: .95; }
.num small { font: 600 17px/1 var(--sans); letter-spacing: 0; color: var(--ink2); margin-left: 6px; }
.hue-coral { --t: var(--coralT); --ta: var(--coralA); --tb: var(--coralB); --w: var(--coralW); --g: var(--coralG); }
.hue-green { --t: var(--greenT); --ta: var(--greenA); --tb: var(--greenB); --w: var(--greenW); --g: var(--greenG); }
.hue-indigo { --t: var(--indigoT); --ta: var(--indigoA); --tb: var(--indigoB); --w: var(--indigoW); --g: var(--indigoG); }
.hue-amber { --t: var(--amberT); --ta: var(--amberA); --tb: var(--amberB); --w: var(--amberW); --g: var(--amberG); }
.hue-rose { --t: var(--roseT); --ta: var(--roseA); --tb: var(--roseB); --w: var(--roseW); --g: var(--roseG); }
.hue-ink { --t: var(--ink2); --w: var(--tile); }

/* Links: coral, a 44 px target when they stand alone. */
.link { display: inline-flex; align-items: center; min-height: 44px; color: var(--coralT); text-decoration: none; font-weight: 500; }
.link::after { content: "›"; margin-left: 5px; }
.link:hover { text-decoration: underline; }

/* ---------- The one button: a dark pill (a light one in dark mode) ---------- */
.pill { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--pill); color: var(--onPill); font: 600 17px/1.2 var(--sans); letter-spacing: -.01em; text-decoration: none; white-space: nowrap; cursor: pointer; }
.pill--sm { min-height: 44px; padding: 0 16px; font-size: 15px; }
.pill--quiet { background: var(--tile); color: var(--ink); }
.pill:active { transform: scale(.98); }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: 26px; }
.store { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.store__play { font-size: 14px; color: var(--ink2); }
.badge { display: inline-flex; align-items: center; min-height: 48px; border-radius: 10px; }
.badge__img { display: block; height: 52px; width: auto; }

/* Free / Pro and the other small labels */
.free, .pro, .tag { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 3px 9px; border-radius: 999px; vertical-align: 2px; white-space: nowrap; }
.free { color: var(--greenT); background: var(--greenW); }
.pro { color: var(--indigoT); background: var(--indigoW); }
.tag { color: var(--ink2); background: var(--tile); }
.state { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 999px; color: var(--t); background: var(--w); }

/* ---------- Nav: brand, Features, five links, the pill. Translucent over the page. ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: var(--navbg); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--hair); }
.nav__in { display: flex; align-items: center; gap: 12px; min-height: 56px; }
.brand { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 19px; letter-spacing: -.02em; }
.brand img { width: 28px; height: 28px; border-radius: 7px; }
.nav__links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav__links > a, .nav__feat { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border: 0; background: none; font: 15px/1.2 var(--sans); letter-spacing: -.01em; color: var(--ink2); text-decoration: none; cursor: pointer; }
.nav__links > a:hover, .nav__feat:hover, .nav__links > a[aria-current="page"], .nav__feat--current { color: var(--ink); }
.nav__feat { gap: 4px; }
.nav__feat .ic { width: 15px; height: 15px; transition: transform .2s ease; }
.nav__group { position: relative; }
.nav__group.is-open .nav__feat .ic { transform: rotate(180deg); }
.nav__sub { display: none; list-style: none; position: absolute; top: calc(100% + 8px); left: -12px; z-index: 60; width: 380px; padding: 8px; border-radius: 22px; gap: 2px; background: var(--bg); box-shadow: var(--lift); }
.nav__group:not(.has-js):hover .nav__sub, .nav__group:not(.has-js):focus-within .nav__sub, .nav__group.is-open .nav__sub { display: grid; }
.nav__sub a { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 52px; padding: 8px 12px; border-radius: 14px; color: var(--ink); text-decoration: none; font-size: 15px; }
.nav__sub a:hover, .nav__sub a[aria-current="page"] { background: var(--tile); }
.nav__sub .ic { width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: var(--w, var(--tile)); color: var(--t, var(--ink2)); }
.nav__sub b { display: block; font-weight: 600; }
.nav__sub small { display: block; font-size: 13px; color: var(--ink2); line-height: 1.35; }
.nav__pill { margin-left: 8px; }
.nav__menu { display: none; width: 44px; height: 44px; border: 0; border-radius: 999px; background: var(--tile); color: var(--ink); align-items: center; justify-content: center; cursor: pointer; }
@media (max-width: 959px) {
  .nav__in { gap: 8px; }
  .nav__pill { margin-left: auto; order: 2; }
  .nav__menu { display: inline-flex; order: 3; }
  .nav__links { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 4px var(--gutter) 16px; max-height: calc(100vh - 56px); overflow-y: auto; background: var(--bg); border-bottom: 1px solid var(--hair); box-shadow: var(--lift); }
  .nav.is-open .nav__links { display: flex; }
  .nav__links > a, .nav__feat { width: 100%; justify-content: space-between; min-height: 52px; padding: 0 2px; border-bottom: 1px solid var(--hair); font-size: 17px; color: var(--ink); }
  .nav__links > a[aria-current="page"], .nav__feat--current { font-weight: 600; }
  .nav__group { border-bottom: 1px solid var(--hair); }
  .nav__group .nav__feat { border-bottom: 0; }
  .nav__sub { position: static; width: auto; padding: 0 0 8px; box-shadow: none; background: none; border-radius: 0; }
  .nav__sub a { padding: 6px 0; }
}

/* ---------- Device frames, drawn, so any real screenshot sits in one ---------- */
.ph { --pad: calc(var(--w) * .034); position: relative; width: var(--w); flex: none; padding: var(--pad); border-radius: calc(var(--w) * .165);
  background: linear-gradient(150deg, #4a4a4f 0%, #1c1c1e 22%, #2a2a2d 60%, #121214 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 0 0 1px rgba(0, 0, 0, .55), 0 30px 60px -28px rgba(0, 0, 0, .45), 0 10px 24px -14px rgba(0, 0, 0, .25); }
.ph__scr { position: relative; display: block; overflow: hidden; border-radius: calc(var(--w) * .135); background: #000; aspect-ratio: 1206 / 2622; }
.ph__scr picture { display: block; height: 100%; }
.ph__scr img { width: 100%; height: 100%; object-fit: cover; }
.ph__scr::before { content: ""; position: absolute; z-index: 1; left: 50%; top: 1.4%; width: 31%; height: 4.1%; transform: translateX(-50%); border-radius: 999px; background: #000; }
/* Cropped: only the top of the phone, cut flat by whatever holds it. */
.ph--crop { height: calc(var(--w) * 2.17 * var(--crop)); overflow: hidden; border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 0 0 1px rgba(0, 0, 0, .55); }
.fade { -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent); mask-image: linear-gradient(180deg, #000 78%, transparent); }
.wt { --pad: calc(var(--w) * .085); position: relative; width: var(--w); flex: none; padding: var(--pad); border-radius: calc(var(--w) * .3);
  background: linear-gradient(160deg, #55555a, #1b1b1d 30%, #2b2b2e 70%, #111 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 0 0 1px rgba(0, 0, 0, .5), 0 24px 40px -20px rgba(0, 0, 0, .5); }
.wt::after { content: ""; position: absolute; right: calc(var(--w) * -.045); top: 26%; width: calc(var(--w) * .06); height: 17%; border-radius: 4px; background: linear-gradient(90deg, #2a2a2d, #5a5a5f); }
.wt__scr { display: block; overflow: hidden; border-radius: calc(var(--w) * .2); background: #000; }
.banner { width: min(100%, 360px); }
.banner img { border-radius: 22px; box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .45); }
.appicon { display: block; width: var(--s, 88px); height: var(--s, 88px); }
.appicon img { width: 100%; height: 100%; border-radius: 22.37%; box-shadow: 0 10px 30px -12px rgba(255, 90, 67, .55); }
.shot { border-radius: 20px; overflow: hidden; box-shadow: var(--lift); }

/* ---------- 1 · The hero stage: a rounded field, the device cut by its bottom edge ---------- */
.stage { margin: 8px; border-radius: 28px; overflow: hidden; text-align: center; color: var(--ink); --ink2: var(--ink2t);
  background: radial-gradient(120% 70% at 50% 100%, var(--g, var(--coralG)), transparent 62%), linear-gradient(180deg, var(--stageTop) 0%, var(--ta, var(--coralA)) 100%); }
.stage--home { background: radial-gradient(120% 70% at 50% 100%, var(--coralG), transparent 60%), radial-gradient(60% 50% at 15% 85%, var(--greenG), transparent 70%),
  radial-gradient(60% 50% at 85% 80%, var(--indigoG), transparent 70%), linear-gradient(180deg, var(--stageTop) 0%, var(--coralA) 100%); }
.stage--plain { background: var(--tile); }
.stage__in { padding-top: 44px; display: flex; flex-direction: column; align-items: center; }
.stage .lead { margin-inline: auto; }
.stage .cta, .stage .store { justify-content: center; }
.stage .fine { max-width: 40em; }
.stage--text .stage__in { padding-bottom: 48px; }
.hero-devices { position: relative; align-self: stretch; display: flex; justify-content: center; align-items: flex-end; gap: clamp(14px, 3vw, 36px); margin-top: 30px; }
.hero-devices > .ph { z-index: 1; }
.hero-watch { position: absolute; z-index: 2; left: calc(50% + clamp(240px, 25vw, 330px) * .38); bottom: 12%; }
.hero-banner { position: absolute; z-index: 2; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(92%, 380px); }
.hero-watches { display: flex; justify-content: center; align-items: flex-end; gap: clamp(12px, 3vw, 32px); padding-bottom: clamp(28px, 4vw, 48px); }
.hero-watches .wt:nth-child(2) { margin-bottom: clamp(20px, 3vw, 44px); }
.hero-num { margin-top: 26px; padding-bottom: 48px; }
.hero-num .num { font-size: clamp(96px, 14vw, 180px); color: var(--ink); }
@media (max-width: 559px) { .hero-watch { left: auto; right: max(0px, calc(50% - 120px - 82px)); bottom: 8%; } }
@media (min-width: 760px) { .stage { margin: 12px; border-radius: 36px; } .stage__in { padding-top: 64px; } .stage--text .stage__in { padding-bottom: 64px; } }

/* ---------- Sections ---------- */
.sec { padding-block: var(--sec); }
.sec--tight { padding-block: calc(var(--sec) * .5); }
.sec--top0 { padding-top: 0; }
.head { margin-bottom: 28px; }
.head .lead { margin-top: 12px; }
@media (min-width: 760px) { .head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; } .head--row .lead { margin: 0; max-width: 22em; } }

/* Text beside one or two cropped phones (the morning call, the coach) */
.split__in { display: grid; gap: 30px; align-items: center; }
.split__text > .link { margin-top: 8px; }
.pair { display: flex; justify-content: center; gap: clamp(14px, 3vw, 36px); }
.pair > div { display: flex; flex-direction: column; align-items: center; }
@media (min-width: 900px) { .split__in { grid-template-columns: 1fr 1.05fr; gap: 64px; } .split--flip .split__text { order: 2; } }

/* Tinted cards: the words top-left, the phone cut by the card's bottom edge */
.cards { display: grid; gap: 14px; }
.card { position: relative; display: flex; flex-direction: column; border-radius: 28px; overflow: hidden; padding: 28px 24px 0; --ink2: var(--ink2t);
  background: linear-gradient(180deg, var(--ta, var(--tile)) 0%, var(--tb, var(--tile)) 100%); }
.card h3 { max-width: 14em; }
.card__text > p:not(.eyebrow) { color: var(--ink2); margin-top: 10px; max-width: 26em; }
.card__text .link { margin-top: 4px; }
.card__art { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 16px; margin-top: auto; padding-top: 22px; }
.card__art--pad { padding-bottom: 28px; }
.card__banner { position: absolute; z-index: 2; left: 50%; bottom: 22px; transform: translateX(-50%); width: min(92%, 330px); }
.card .num { font-size: clamp(56px, 6vw, 76px); margin-top: 8px; }
@media (min-width: 760px) {
  .cards { grid-template-columns: 1fr 1fr; gap: 18px; }
  .cards--3 { grid-template-columns: repeat(3, 1fr); }
  .card { padding: 36px 40px 0; }
  .cards--3 .card { padding: 32px 30px 0; }
}

/* Grey tiles (Apple's #F5F5F7) */
.tile { background: var(--tile); border-radius: 28px; --chip: var(--bg); }
.tiles { display: grid; gap: 14px; }
.tiles > .tile { overflow: hidden; display: flex; flex-direction: column; padding: 28px 24px; }
.tiles > .tile--art { padding-bottom: 0; }
.tile h3 { font-size: clamp(22px, 2vw, 26px); }
.tile > p, .tile .tile__p { color: var(--ink2); margin-top: 8px; max-width: 30em; }
.tile > p b { color: var(--ink); }
.tile .art { display: flex; justify-content: center; margin-top: auto; padding-top: 24px; }
.tile .art--pad { padding-bottom: 28px; }
.tile ul.dots { list-style: none; margin-top: 12px; display: grid; gap: 8px; color: var(--ink2); }
.tile ul.dots li { position: relative; padding-left: 16px; }
.tile ul.dots li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--t, var(--ink3)); }
.tile .num { font-size: clamp(48px, 5vw, 64px); color: var(--ink); margin-bottom: 10px; }
@media (min-width: 760px) {
  .tiles { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .tiles--2 { grid-template-columns: 1fr 1fr; }
  .tiles--4 { grid-template-columns: repeat(2, 1fr); }
  .tiles > .tile { padding: 32px 32px; }
  .tiles > .tile--art { padding-bottom: 0; }
}
@media (min-width: 1000px) { .tiles--4 { grid-template-columns: repeat(4, 1fr); } }
.wide { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; margin-top: 14px; padding: 28px 24px; }
.wide > div { flex: 1 1 280px; }
.wide p { color: var(--ink2); margin-top: 8px; max-width: 36em; }
.wide .num { font-size: clamp(64px, 8vw, 104px); display: flex; align-items: baseline; }
@media (min-width: 760px) { .wide { margin-top: 18px; padding: 36px 48px; } }

/* Rows: a list with a Free / Pro tag on the right */
.rows { margin-top: 22px; border-top: 1px solid var(--hair); }
.rows > div { padding: 14px 0; border-bottom: 1px solid var(--hair); display: flex; justify-content: space-between; gap: 16px; }
.rows b { font-weight: 600; }
.rows p { color: var(--ink2); font-size: 15px; margin-top: 2px; }
.rows > div > span { flex: none; align-self: flex-start; margin-top: 3px; }

/* A quoted coaching line, with its source */
.quote { margin-top: 22px; padding: 18px 20px; border-radius: 20px; background: var(--w, var(--tile)); }
.quote q { display: block; font-size: 19px; font-weight: 600; letter-spacing: -.015em; quotes: "“" "”"; }
.quote p { font-size: 14px; color: var(--ink2t); margin-top: 6px; }

/* Lists with a glyph */
.checks { list-style: none; display: grid; gap: 12px; margin-top: 18px; }
.checks li { position: relative; padding-left: 34px; color: var(--ink2); }
.checks .ic { position: absolute; left: 0; top: 2px; color: var(--t, var(--ink)); }

/* Brand names (Works with): plain words, no logos */
.names { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.names li { padding: 7px 13px; border-radius: 999px; background: var(--chip); font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.works { text-align: center; }
.works .names { justify-content: center; max-width: 880px; margin-inline: auto; }
.works__h { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.025em; line-height: 1.15; }
.works .fine { margin-top: 12px; }
.groups { display: grid; gap: 14px; margin-top: 8px; }
.group { padding: 28px 24px; }
.group h3 { font-size: clamp(22px, 2vw, 26px); }
.group > p { color: var(--ink2); margin-top: 8px; }
@media (min-width: 760px) { .groups { grid-template-columns: 1fr 1fr; gap: 18px; } .group { padding: 32px; } .group--wide { grid-column: 1 / -1; } }

/* Siri phrases */
.phrases { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.phrases li { padding: 10px 16px; border-radius: 18px 18px 18px 6px; background: var(--tile); font-weight: 500; }

/* Privacy: centred, one line */
.privacy { text-align: center; }
.privacy .lead { margin-inline: auto; }
.privacy .link { margin-top: 6px; }
.lock { width: 34px; height: 34px; margin: 0 auto 14px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }

/* Pricing tiles */
.plans { display: grid; gap: 14px; }
.plan { padding: 28px 24px; }
.plan__name { font-weight: 600; font-size: 17px; }
.plan__num { font-size: clamp(48px, 5.4vw, 64px); margin: 10px 0 12px; display: flex; align-items: baseline; }
.plan > p:not(.plan__name):not(.plan__num) { color: var(--ink2); }
.plan ul { list-style: none; margin-top: 16px; display: grid; gap: 8px; }
.plan li { position: relative; padding-left: 26px; }
.plan li::before { content: ""; position: absolute; left: 2px; top: .35em; width: 12px; height: 7px; border-left: 2px solid var(--greenT); border-bottom: 2px solid var(--greenT); transform: rotate(-45deg); }
.prices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.prices > div { padding: 14px 16px; border-radius: 18px; background: var(--bg); }
.prices b { display: block; font-size: 14px; color: var(--ink2); font-weight: 600; }
.prices .num { font-size: 30px; display: block; margin: 6px 0 4px; }
.prices p { font-size: 14px; color: var(--ink2); }
@media (min-width: 760px) { .plans { grid-template-columns: 1fr 1fr; gap: 18px; } .plan { padding: 36px 40px; } }

/* Questions */
.faq { border-top: 1px solid var(--hair); max-width: 860px; margin-top: 22px; }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 12px 0; font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { color: var(--ink3); transition: transform .2s ease; }
.faq details[open] summary .ic { transform: rotate(180deg); }
.faq .answer { padding: 0 0 18px; color: var(--ink2); max-width: 64ch; display: grid; gap: 8px; }

/* Tables (Free vs Pro, what goes online) */
.table { margin-top: 24px; padding: 6px 24px 10px; border-radius: 24px; background: var(--tile); overflow-x: auto; }
.table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th, .table td { text-align: left; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
.table tr:last-child > * { border-bottom: 0; }
.table thead th { font-size: 13px; font-weight: 600; color: var(--ink2); }
.table tbody th { font-weight: 500; color: var(--ink); }
.table td { color: var(--ink2); }
.table td.y { color: var(--ink); font-weight: 600; }
.table .grp th { padding-top: 22px; font-size: 13px; font-weight: 600; color: var(--t, var(--coralT)); }
@media (max-width: 699px) {
  .table--stack { padding: 4px 20px; }
  .table--stack thead { display: none; }
  .table--stack tr { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--hair); }
  .table--stack tr:last-child { border-bottom: 0; }
  .table--stack th, .table--stack td { padding: 0; border: 0; }
  .table--stack td::before { content: attr(data-label) " · "; font-weight: 600; color: var(--ink); }
}

/* Numbered steps */
.steps { list-style: none; counter-reset: s; display: grid; gap: 14px; margin-top: 20px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 34px 1fr; gap: 12px; color: var(--ink2); }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tile); color: var(--ink); font-weight: 600; font-size: 14px; }
.steps b { color: var(--ink); }

/* A day as a list of times (Athletes, until the Athlete screens are captured) */
.day { list-style: none; margin-top: 18px; display: grid; }
.day li { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--hair); }
.day li:first-child { border-top: 0; }
.day .t { font-weight: 600; font-variant-numeric: tabular-nums; }
.day .t small { display: block; font-size: 13px; font-weight: 400; color: var(--ink2); margin-top: 2px; }
.day b { display: block; }
.day p { color: var(--ink2); font-size: 15px; margin-top: 2px; }
.day .m .t { color: var(--t); }

/* The close: the app icon, one line, the pill */
.close { text-align: center; }
.close__in { display: flex; flex-direction: column; align-items: center; }
.close h2 { margin-top: 22px; }
.close .lead { margin-inline: auto; }
.close .store { justify-content: center; margin-top: 26px; }
.signup { margin-top: 14px; display: grid; justify-items: center; gap: 4px; }
.signup__form { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.signup__form[hidden], .signup__fallback[hidden] { display: none; }
.signup__input { min-width: 0; width: min(320px, 100%); min-height: 48px; border-radius: 999px; border: 1px solid var(--hair); background: var(--bg); padding: 0 20px; font: 16px var(--sans); color: var(--ink); }
.signup__fallback { display: grid; justify-items: center; }
.signup__fallback .fine { margin-top: 6px; }

/* More of Fullday */
.morelinks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.morelinks a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--tile); color: var(--ink); text-decoration: none; font-weight: 500; font-size: 15px; }
.morelinks a:hover { background: var(--tile2); }
.morelinks a[aria-current="page"] { display: none; }

/* Feature cards (creators) */
.fgrid { list-style: none; display: grid; gap: 14px; margin-top: 24px; }
.fcard a { display: grid; gap: 6px; align-content: start; height: 100%; padding: 24px; border-radius: 24px; background: linear-gradient(180deg, var(--ta, var(--tile)), var(--tb, var(--tile))); color: var(--ink); text-decoration: none; --ink2: var(--ink2t); }
.fcard .eyebrow { margin: 0; font-size: 14px; }
.fcard h3 { font-size: 22px; }
.fcard p { color: var(--ink2); font-size: 15.5px; }
.fcard__more { margin-top: 6px; color: var(--t, var(--coralT)); font-weight: 500; font-size: 15px; }
.fcard__more::after { content: " ›"; }
.fcard a:hover h3 { text-decoration: underline; }
@media (min-width: 760px) { .fgrid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (min-width: 1000px) { .fgrid { grid-template-columns: repeat(4, 1fr); } }

/* Press kit */
.numbers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 8px; }
.numbers > div { padding: 24px; border-radius: 24px; background: var(--tile); }
.numbers .num { font-size: clamp(36px, 4.6vw, 56px); }
.numbers p:not(.num) { color: var(--ink2); margin-top: 8px; font-size: 15px; }
@media (min-width: 900px) { .numbers { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.facts dl { display: grid; margin-top: 12px; }
.facts dl > div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.facts dt { font-weight: 600; }
.facts dd { color: var(--ink2); }
.facts dd a { color: var(--coralT); display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; }
.press-q { margin-top: 10px; padding: 20px 22px; border-radius: 20px; background: var(--tile); font-size: 17px; }
.press-h { margin-top: 26px; font-weight: 600; }
.downloads { list-style: none; display: grid; gap: 14px; margin-top: 8px; }
.download { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: center; padding: 18px; }
.download img { width: 96px; height: 96px; border-radius: 22px; }
.download--logo { grid-template-columns: 1fr; }
.download--logo img { width: 100%; max-width: 300px; height: auto; border-radius: 0; }
.download--dark { background: #1D1D1F; color: #F5F5F7; --ink: #F5F5F7; --ink2: #A1A1A6; --coralT: #FF8C7A; }
.download h3 { font-size: 19px; color: var(--ink); }
.download .fine { margin-top: 2px; }
.download .link { min-height: 44px; }
@media (min-width: 760px) { .downloads { grid-template-columns: 1fr 1fr; gap: 18px; } }
.screens { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 8px; }
.screens a { display: grid; gap: 10px; justify-items: center; color: var(--ink); text-decoration: none; font-weight: 500; padding: 18px 12px 14px; border-radius: 24px; background: var(--tile); }
.screens a:hover span { text-decoration: underline; }
@media (min-width: 760px) { .screens { grid-template-columns: repeat(4, 1fr); gap: 18px; } }

/* ---------- Text pages (support, terms, the privacy policy) and the 404 ---------- */
.doc__wrap { max-width: calc(860px + 2 * var(--gutter)); display: grid; gap: 22px; padding-top: var(--sec); }
.doc__wrap--wide { max-width: calc(1080px + 2 * var(--gutter)); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.chips span { padding: 6px 12px; border-radius: 999px; background: var(--bg); color: var(--ink2); font-size: 13px; }
.toc { padding: 4px 0 8px; border-bottom: 1px solid var(--hair); }
.toc__h { font-size: 13px; font-weight: 600; color: var(--ink2); }
.toc ol { columns: 2 220px; column-gap: 32px; padding-left: 20px; color: var(--ink2); font-size: 15px; margin-top: 4px; }
.toc li { break-inside: avoid; }
.toc a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.prose { padding: 28px 24px; min-width: 0; overflow-wrap: anywhere; }
.prose > * + * { margin-top: 14px; }
.prose h2 { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -.025em; margin-top: 34px; scroll-margin-top: 90px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 19px; letter-spacing: -.015em; margin-top: 24px; }
.prose p, .prose li { color: var(--ink2); max-width: 70ch; }
.prose strong { color: var(--ink); }
.prose ul, .prose ol { padding-left: 22px; display: grid; gap: 8px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--hair); vertical-align: top; overflow-wrap: break-word; }
.prose thead th { font-size: 13px; font-weight: 600; color: var(--ink2); }
.prose td { color: var(--ink2); }
.table-wrap { overflow-x: auto; }
@media (min-width: 760px) { .prose { padding: 40px 48px; } }
@media (max-width: 599px) {
  .table-wrap--stack thead { display: none; }
  .table-wrap--stack tr { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
  .table-wrap--stack th, .table-wrap--stack td { padding: 0; border: 0; }
  .table-wrap--stack td::before { content: attr(data-label) ": "; font-weight: 600; color: var(--ink); }
}
.note { display: grid; grid-template-columns: 20px 1fr; gap: 12px; padding: 18px 20px; border-radius: 20px; background: var(--tile); color: var(--ink2); font-size: 15px; }
.note .ic { margin-top: 2px; }
.help-grid { display: grid; gap: 14px; }
.help { padding: 26px 24px; display: grid; gap: 10px; align-content: start; }
.help h2 { font-size: 22px; letter-spacing: -.02em; }
.help p { color: var(--ink2); font-size: 16px; }
.help .gi { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--w, var(--bg)); color: var(--t, var(--ink2)); }
.help .gi svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 760px) { .help-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.faq-block h2 { font-size: clamp(28px, 3.2vw, 40px); scroll-margin-top: 90px; }
.faq-block .faq { max-width: none; }
.lost .stage__in { padding-bottom: 56px; }
.lost h1 { margin-top: 22px; }
.lost__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 18px; margin-top: 18px; }
.lost__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink2); }

/* ---------- Footer: small, quiet ---------- */
.foot { border-top: 1px solid var(--hair); margin-top: var(--sec); padding: 32px 0 40px; font-size: 14px; color: var(--ink2); }
.foot__top { display: grid; gap: 22px; }
.foot__brand p { margin-top: 6px; }
.foot__brand a:not(.brand) { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink2); }
.foot__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.foot__cols > div { display: grid; align-content: start; }
.foot__cols > div:first-child { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; column-gap: 24px; }
.foot__cols > div:first-child .foot__h { grid-column: 1 / -1; }
.foot__h { font-weight: 600; color: var(--ink); margin: 10px 0 2px; }
.foot__cols a { display: flex; align-items: center; min-height: 44px; color: var(--ink2); text-decoration: none; }
.foot__cols a:hover, .foot__brand a:hover { color: var(--ink); }
.foot__legal { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--hair); font-size: 13px; line-height: 1.5; }
.foot__legal p + p { margin-top: 8px; }
.foot__legal strong { color: var(--ink); }
@media (min-width: 760px) {
  .foot__top { grid-template-columns: 1fr 3fr; gap: 32px; }
  .foot__cols { grid-template-columns: 2fr 1fr 1fr; }
  .foot__cols > div:first-child { grid-column: auto; }
  .foot__legal { columns: 2; column-gap: 32px; }
  .foot__legal p { break-inside: avoid; }
}

/* ---------- Draft only (research/compare-draft, never published) ---------- */
.draftbar { background: var(--amberW); color: var(--amberT); font-size: 13px; font-weight: 600; text-align: center; padding: 10px 16px; }

/* ---------- Small helpers ---------- */
.shot + .banner { margin: 24px auto 0; }
@media (max-width: 559px) { .hide-xs { display: none; } }
/* A whole card as one link: the heading's link stretches over the card (the hit area is the card) */
.stretch { color: inherit; text-decoration: none; }
.stretch::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.stretch:hover { text-decoration: underline; text-decoration-thickness: 2px; }
h3:has(> .stretch)::after { content: "\00a0›"; color: var(--t, var(--coralT)); font-weight: 500; }
.wide { position: relative; }
@media (max-width: 559px) { .names { gap: 6px; } .names li { font-size: 14px; padding: 6px 11px; } }
.tiles + .fine, .cards + .fine, .groups + .fine, .table + .fine, .numbers + .fine { margin-top: 18px; }
.plans + .link { margin-top: 10px; }
.table--cmp table { table-layout: fixed; }
.table--cmp thead th:first-child { width: 52%; }
@media (max-width: 759px) {
  .cards--3 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cards--3 .card { padding: 18px 14px 0; border-radius: 22px; }
  .cards--3 .card h3 { font-size: 17px; }
  .cards--3 .eyebrow { font-size: 13px; margin-bottom: 6px; }
  .cards--3 .ph { --w: 124px !important; }
  .cards--3 .wt { --w: 104px !important; }
  .cards--3 .card__art--pad { padding-bottom: 18px; }
  .table { padding: 4px 16px 8px; }
  .table table { font-size: 14px; }
  .table th, .table td { padding: 10px 10px 10px 0; }
}