/* Fullday website — Site A's structure (owner's pick, 11 Oct 2026; research/site-round-2/) in the app's own look since
   19 Oct 2026, **Signal** (Liftbook Design/SIGNAL.md, build 44): a light, airy canvas (#F2F3F7) with a faint hue mist
   (the page's hue from the top-left, blue from the top-right — no scenery), opaque white cards with a 1 px specular rim
   and a two-step lift (a hued card adds its colour's own soft shadow), the hero on a two-plate deck, Liquid Glass only
   for chrome (the floating nav, the phone menu), machined score rings (.ring, drawn by [[ring]]), SF Pro Rounded Bold
   for titles and numbers (Manrope ExtraBold, self-hosted, elsewhere), the Fullday mark + wordmark, and coral as the one
   action colour (#D63A32 → #C42B43 under white words). Signal's hues: Recovery #12B76A, Strain #0B97D6, Sleep
   #8B5CF6, Fuel #F5832F, the heart #EC4C7C; words in a hue use its readable tone (Theme.text). Real app screens sit
   in drawn iPhone and Apple Watch frames (.ph, .wt), cut by the edge of whatever holds them. 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 {
  /* Signal's tokens (Liftbook Shared/Design/Theme.swift): canvas, card, raised, hairline, inks. */
  --bg: #F2F3F7; --tile: #FFFFFF; --tile2: #F4F5F8; --sheet: #F7F8FB; --chip: var(--tile2);
  --cardBg: #FFFFFF;
  --ink: #0D1120; --ink2: #596072; --ink2t: #535A6B; --ink3: #949AA9;          /* ink2t: grey words on a mist or tint; ink3: glyphs only */
  --hair: #E4E6EC;
  /* The hues: the colour, its readable word tone (≥ 4.5:1 on the card and the mist), a pale tint, a soft glow. */
  --strain: #0B97D6; --strainT: #076A99; --strainW: #E2F2FA; --strainG: rgba(11, 151, 214, .16);
  --recovery: #12B76A; --recoveryT: #0A7A47; --recoveryW: #E0F5EA; --recoveryG: rgba(18, 183, 106, .15);
  --sleep: #8B5CF6; --sleepT: #6A3FD6; --sleepW: #EEE8FE; --sleepG: rgba(139, 92, 246, .16);
  --fuel: #F5832F; --fuelT: #AA500C; --fuelW: #FDEDE0; --fuelG: rgba(245, 131, 47, .16);
  --heart: #EC4C7C; --heartT: #B43B5B; --heartW: #FCE6ED; --heartG: rgba(236, 76, 124, .14);
  --gold: #F0A020; --goldT: #946313; --alert: #EF4444;
  --coral: #FF5A4E; --coralT: #C22F1D; --coralW: #FFE7E3; --coralG: rgba(255, 90, 78, .15);
  /* The hero's mist (Signal's screenBackground(glow:)): each hue held down to 9 % in light, so every word on the stage —
     the hue's own readable tone included — clears 4.5:1 against any of the mist's colours (tools/audit.mjs checks). */
  --strainM: rgba(11, 151, 214, .09); --recoveryM: rgba(18, 183, 106, .09); --sleepM: rgba(139, 92, 246, .09);
  --fuelM: rgba(245, 131, 47, .09); --heartM: rgba(236, 76, 124, .09); --coralM: rgba(255, 90, 78, .09);
  --mistBlue: rgba(11, 151, 214, .09);
  --stageBg: #F7F8FB; --rimTop: rgba(255, 255, 255, .95);
  /* The one action colour: coral, deepened under white words (Theme.cta → ctaDeep; white ≥ 4.6:1 on both stops). */
  --act1: #D63A32; --act2: #C42B43; --onAct: #FFFFFF; --actGlow: rgba(229, 54, 75, .42);
  --pill: var(--act2); --onPill: #FFFFFF;
  /* Liquid Glass, for chrome only (the nav, the phone menu). */
  --glass: rgba(250, 251, 253, .72);
  --glassEdge: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 .5px rgba(255, 255, 255, .55), 0 0 0 .5px rgba(13, 17, 32, .08), 0 10px 30px -12px rgba(13, 17, 32, .22);
  /* Signal's card: opaque, a 1 px specular rim along the top, a hairline, a two-step lift. */
  --surf: inset 0 1px 0 #FFFFFF, 0 0 0 .5px rgba(13, 17, 32, .07), 0 1px 3px rgba(13, 17, 32, .05), 0 16px 34px -18px rgba(13, 17, 32, .18);
  --lift: 0 0 0 .5px rgba(13, 17, 32, .07), 0 24px 60px -28px rgba(13, 17, 32, .32);
  --plate1: #FAFBFC; --plate2: #F6F7FA; --plateEdge: rgba(13, 17, 32, .07);
  /* The machined ring: a groove, the lit tube, a metal step, a flat face. */
  --groove1: #E3E6EC; --groove2: #F6F7F9; --step1: #FFFFFF; --step2: #D5D9E1; --face: #FFFFFF; --faceEdge: #F3F4F7;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Titles and numbers: SF Pro Rounded on Apple devices (the app's), Manrope ExtraBold (self-hosted) for numbers elsewhere. */
  --round: ui-rounded, "SF Pro Rounded", var(--sans);
  --num: ui-rounded, "SF Pro Rounded", "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(--tile); --disp: var(--round); --text: var(--sans); --shadow: var(--lift);
  --amberW: var(--fuelW); --amberT: var(--fuelT); --greenT: var(--recoveryT); --indigoT: var(--sleepT);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
      --bg: #0A0C13; --tile: #171C29; --tile2: #1E2433; --sheet: #11141E;
      --cardBg: linear-gradient(180deg, #171C29, #11141E);
      --ink: #F3F5FA; --ink2: #ABB2C2; --ink2t: #B4BBCA; --ink3: #666E80;
      --hair: #2A3142;
      --strain: #2AB4F2; --strainT: #5CC8F7; --strainW: rgba(42, 180, 242, .16); --strainG: rgba(42, 180, 242, .2);
      --recovery: #2BD585; --recoveryT: #4BE39A; --recoveryW: rgba(43, 213, 133, .15); --recoveryG: rgba(43, 213, 133, .17);
      --sleep: #A07CFF; --sleepT: #B79BFF; --sleepW: rgba(160, 124, 255, .18); --sleepG: rgba(160, 124, 255, .22);
      --fuel: #FF9A4D; --fuelT: #FFAE70; --fuelW: rgba(255, 154, 77, .15); --fuelG: rgba(255, 154, 77, .18);
      --heart: #FF6B96; --heartT: #FF8AAD; --heartW: rgba(255, 107, 150, .16); --heartG: rgba(255, 107, 150, .18);
      --gold: #FFC04D; --goldT: #FFC04D; --alert: #FF5C5C;
      --coral: #FF6B5E; --coralT: #FF8A7A; --coralW: rgba(255, 138, 122, .16); --coralG: rgba(255, 107, 94, .18);
      --mistBlue: rgba(42, 180, 242, .12);
      --strainM: var(--strainG); --recoveryM: var(--recoveryG); --sleepM: var(--sleepG); --fuelM: var(--fuelG); --heartM: var(--heartG); --coralM: var(--coralG);
      --stageBg: #0E111A; --rimTop: rgba(255, 255, 255, .07);
      --actGlow: rgba(229, 54, 75, .45);
      --glass: rgba(23, 28, 41, .7);
      --glassEdge: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 .5px rgba(255, 255, 255, .07), 0 0 0 .5px rgba(0, 0, 0, .5), 0 10px 30px -12px rgba(0, 0, 0, .7);
      --surf: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 .5px rgba(255, 255, 255, .06), 0 1px 3px rgba(0, 0, 0, .35), 0 16px 34px -18px rgba(0, 0, 0, .8);
      --lift: 0 0 0 .5px rgba(255, 255, 255, .09), 0 24px 60px -28px rgba(0, 0, 0, .9);
      --plate1: #141925; --plate2: #10141D; --plateEdge: rgba(255, 255, 255, .06);
      --groove1: #0B0E15; --groove2: #1C2230; --step1: #3A4254; --step2: #0B0E15; --face: #151A26; --faceEdge: #11151F;
      color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --bg: #0A0C13; --tile: #171C29; --tile2: #1E2433; --sheet: #11141E;
    --cardBg: linear-gradient(180deg, #171C29, #11141E);
    --ink: #F3F5FA; --ink2: #ABB2C2; --ink2t: #B4BBCA; --ink3: #666E80;
    --hair: #2A3142;
    --strain: #2AB4F2; --strainT: #5CC8F7; --strainW: rgba(42, 180, 242, .16); --strainG: rgba(42, 180, 242, .2);
    --recovery: #2BD585; --recoveryT: #4BE39A; --recoveryW: rgba(43, 213, 133, .15); --recoveryG: rgba(43, 213, 133, .17);
    --sleep: #A07CFF; --sleepT: #B79BFF; --sleepW: rgba(160, 124, 255, .18); --sleepG: rgba(160, 124, 255, .22);
    --fuel: #FF9A4D; --fuelT: #FFAE70; --fuelW: rgba(255, 154, 77, .15); --fuelG: rgba(255, 154, 77, .18);
    --heart: #FF6B96; --heartT: #FF8AAD; --heartW: rgba(255, 107, 150, .16); --heartG: rgba(255, 107, 150, .18);
    --gold: #FFC04D; --goldT: #FFC04D; --alert: #FF5C5C;
    --coral: #FF6B5E; --coralT: #FF8A7A; --coralW: rgba(255, 138, 122, .16); --coralG: rgba(255, 107, 94, .18);
    --mistBlue: rgba(42, 180, 242, .12);
    --strainM: var(--strainG); --recoveryM: var(--recoveryG); --sleepM: var(--sleepG); --fuelM: var(--fuelG); --heartM: var(--heartG); --coralM: var(--coralG);
    --stageBg: #0E111A; --rimTop: rgba(255, 255, 255, .07);
    --actGlow: rgba(229, 54, 75, .45);
    --glass: rgba(23, 28, 41, .7);
    --glassEdge: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 .5px rgba(255, 255, 255, .07), 0 0 0 .5px rgba(0, 0, 0, .5), 0 10px 30px -12px rgba(0, 0, 0, .7);
    --surf: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 .5px rgba(255, 255, 255, .06), 0 1px 3px rgba(0, 0, 0, .35), 0 16px 34px -18px rgba(0, 0, 0, .8);
    --lift: 0 0 0 .5px rgba(255, 255, 255, .09), 0 24px 60px -28px rgba(0, 0, 0, .9);
    --plate1: #141925; --plate2: #10141D; --plateEdge: rgba(255, 255, 255, .06);
    --groove1: #0B0E15; --groove2: #1C2230; --step1: #3A4254; --step2: #0B0E15; --face: #151A26; --faceEdge: #11151F;
    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: 80px; }
@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; }
/* Titles in SF Pro Rounded Bold, as the app sets them (.screenTitle, .sectionTitle). */
h1, h2, h3 { font-family: var(--round); font-weight: 700; 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: -.02em; }
/* Eyebrows as the app draws them ("TODAY'S PLAN", .sectionEyebrow): Rounded Heavy capitals, tracked, in the section's
   readable hue (coral words by default, as on Today's plan). */
.eyebrow { display: flex; align-items: center; gap: 8px; font: 800 13px/1.3 var(--round); letter-spacing: .1em; text-transform: uppercase; color: var(--t, var(--coralT)); margin-bottom: 12px; }
.stage .eyebrow, .close .eyebrow, .privacy .eyebrow, .works .eyebrow { justify-content: center; }
.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); }
/* Numbers: SF Pro Rounded Bold, tabular (the app's .signalScore / .heroNumber). */
.num { font-family: var(--num); font-weight: 700; letter-spacing: -.025em; font-variant-numeric: tabular-nums; line-height: .95; }
.num small { font: 600 17px/1 var(--round); letter-spacing: 0; color: var(--ink2); margin-left: 6px; }
/* A section's hue: --dot the colour, --t its readable word tone, --w a pale tint, --g its glow (mist and card shadow). */
.hue-strain { --dot: var(--strain); --t: var(--strainT); --w: var(--strainW); --g: var(--strainG); --m: var(--strainM); }
.hue-recovery { --dot: var(--recovery); --t: var(--recoveryT); --w: var(--recoveryW); --g: var(--recoveryG); --m: var(--recoveryM); }
.hue-sleep { --dot: var(--sleep); --t: var(--sleepT); --w: var(--sleepW); --g: var(--sleepG); --m: var(--sleepM); }
.hue-fuel { --dot: var(--fuel); --t: var(--fuelT); --w: var(--fuelW); --g: var(--fuelG); --m: var(--fuelM); }
.hue-heart { --dot: var(--heart); --t: var(--heartT); --w: var(--heartW); --g: var(--heartG); --m: var(--heartM); }
.hue-brand { --dot: var(--coral); --t: var(--coralT); --w: var(--coralW); --g: var(--coralG); --m: var(--coralM); }
.hue-alert { --dot: var(--alert); --t: var(--coralT); --w: var(--coralW); --g: var(--coralG); --m: var(--coralM); }
.hue-gold { --dot: var(--gold); --t: var(--goldT); --w: var(--fuelW); --g: var(--fuelG); --m: var(--fuelM); }
.hue-ink { --dot: var(--ink3); --t: var(--ink2); --w: var(--tile2); --g: rgba(13, 17, 32, .04); --m: rgba(13, 17, 32, .03); }

/* Links: coral words (the app's accentText), 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: coral, the app's one filled action per screen (Start, Complete set) ---------- */
.pill { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border: 0; border-radius: 999px;
  background: linear-gradient(180deg, var(--act1), var(--act2)); color: var(--onAct); font: 600 17px/1.2 var(--sans); letter-spacing: -.01em; text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(0, 0, 0, .08), 0 1px 2px rgba(150, 20, 30, .25), 0 12px 26px -10px var(--actGlow); }
.pill:hover { background: linear-gradient(180deg, var(--act2), var(--act2)); }
.pill--sm { min-height: 44px; padding: 0 18px; font-size: 15px; }
.pill--quiet { background: var(--cardBg); color: var(--ink); box-shadow: var(--surf); }
.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: the app's pills (a hue's tint, Rounded Bold, no edge). */
.free, .pro, .tag { display: inline-block; font: 700 12px/1.4 var(--round); letter-spacing: .02em; padding: 3px 9px; border-radius: 999px; vertical-align: 2px; white-space: nowrap; }
.free { color: var(--recoveryT); background: var(--recoveryW); }
.pro { color: var(--sleepT); background: var(--sleepW); }
.tag { color: var(--ink2); background: var(--tile2); }
.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); }

/* ---------- The brand: the Fullday mark (the app icon's ring and sun on its coral squircle) + the wordmark ---------- */
.mark { width: 28px; height: 28px; flex: none; filter: drop-shadow(0 3px 6px rgba(238, 71, 73, .28)); }
.brand { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; text-decoration: none; color: var(--ink); font: 800 21px/1 var(--num); letter-spacing: -.02em; }

/* ---------- Nav: Liquid Glass chrome, floating — brand, Features, five links, the pill ---------- */
.nav { position: sticky; top: 0; z-index: 50; padding: 8px 8px 0; }
.nav__in { display: flex; align-items: center; gap: 12px; min-height: 56px; max-width: calc(var(--max) + 2 * var(--gutter) - 16px); padding-inline: 14px 8px; border-radius: 999px;
  background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); box-shadow: var(--glassEdge); }
.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% + 10px); left: -12px; z-index: 60; width: 380px; padding: 8px; border-radius: 24px; gap: 2px; background: var(--cardBg); 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: 16px; color: var(--ink); text-decoration: none; font-size: 15px; }
.nav__sub a:hover, .nav__sub a[aria-current="page"] { background: var(--tile2); }
/* The app's icon tile (SignalIconTile): a glossy rounded square in the hue, a white glyph, the hue's own shadow. */
.nav__sub .ic { width: 36px; height: 36px; padding: 8px; border-radius: 11px; color: #fff; stroke-width: 1.9;
  background: linear-gradient(180deg, color-mix(in srgb, var(--dot, var(--ink3)) 78%, #fff), var(--dot, var(--ink3)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 10px -4px var(--dot, rgba(0, 0, 0, .3)); }
.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(--cardBg); box-shadow: var(--surf); color: var(--ink); align-items: center; justify-content: center; cursor: pointer; }
@media (max-width: 959px) {
  .nav__in { gap: 8px; padding-inline: 12px 6px; }
  .nav__pill { margin-left: auto; order: 2; }
  .nav__menu { display: inline-flex; order: 3; }
  .nav__links { display: none; position: absolute; left: 8px; right: 8px; top: calc(100% + 6px); flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 4px 18px 14px; max-height: calc(100vh - 80px); overflow-y: auto;
    border-radius: 26px; background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(26px); backdrop-filter: saturate(180%) blur(26px); box-shadow: var(--glassEdge), 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:last-child { border-bottom: 0; }
  .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; }
  .nav__sub a:hover, .nav__sub a[aria-current="page"] { background: none; }
}
@media (max-width: 380px) { .brand { font-size: 19px; } .nav__pill { padding: 0 14px; } }

/* ---------- Device frames, drawn, so any real screenshot sits in one (cool titanium) ---------- */
.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, #A3A8B2 0%, #2C3038 16%, #1A1D23 50%, #2E323A 84%, #8C929D 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24), inset 0 0 0 2px rgba(0, 0, 0, .5), 0 0 0 .5px rgba(13, 17, 32, .45), 0 34px 60px -30px rgba(13, 17, 32, .42), 0 12px 26px -16px rgba(13, 17, 32, .26); }
.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, .24), inset 0 0 0 2px rgba(0, 0, 0, .5), 0 0 0 .5px rgba(13, 17, 32, .45), 0 -2px 30px -12px rgba(13, 17, 32, .3); }
.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, #A6ABB5, #2B2E35 24%, #1A1C21 60%, #757B86 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(13, 17, 32, .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, #2A2C31, #5C6069); }
.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 0 0 .5px rgba(0, 0, 0, .08), 0 14px 30px -12px rgba(238, 71, 73, .5), 0 4px 10px -6px rgba(0, 0, 0, .2); }
.shot { border-radius: 20px; overflow: hidden; box-shadow: var(--surf); }
/* The app's own widget renders (B8Tests), light and dark, floating like a Home Screen stack. */
.widgets { width: min(100%, var(--w, 520px)); margin-top: 26px; }
.widgets img { width: 100%; border-radius: 26px; filter: drop-shadow(0 22px 30px rgba(13, 17, 32, .16)); }

/* ---------- The machined score ring (the app's SignalRingView), drawn by [[ring]] ---------- */
.ring { display: flex; flex-direction: column; align-items: center; gap: 14px; width: var(--s); flex: none; text-align: center; }
.ring__disc { position: relative; width: 100%; aspect-ratio: 1; container-type: inline-size; }
/* The hue's soft pool on the floor under the ring, and a contact shadow. */
.ring__disc::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: -7%; height: 16%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--dot) 40%, transparent), transparent); }
.ring__art { position: relative; width: 100%; height: 100%; overflow: visible; }

.ring__v { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; color: var(--ink);
  font-size: 25cqw; letter-spacing: -.035em; }
.ring__v small { font: 700 9cqw / 1 var(--num); margin: 9cqw 0 0 2px; color: var(--ink); letter-spacing: 0; }
.ring figcaption { display: grid; gap: 1px; line-height: 1.3; }
.ring figcaption b { display: block; font-size: 17px; font-weight: 600; color: var(--ink); }
/* The score card's label dot ("● Recovery"), inline so a long label wraps with it. */
.ring figcaption b::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 7px; vertical-align: 1px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot) 20%, transparent); }
.ring__sub { font-size: 15px; color: var(--ink2); }
.rings { display: flex; justify-content: center; align-items: flex-start; gap: clamp(10px, 2.4vw, 32px); }
.rings .ring { flex: 1 1 0; max-width: var(--s); min-width: 0; }
.rings .ring__sub { font-size: 14px; }
.rings .ring figcaption b { font-size: 16px; }
/* Three small rings on a phone: no room for the label dot beside a long word ("Restfulness"); the ring is the hue. */
@media (max-width: 559px) { .rings .ring figcaption b::before { display: none; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ring__arc { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--dot) 60%, transparent)); } }
:root[data-theme="dark"] .ring__arc { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--dot) 60%, transparent)); }

/* ---------- 1 · The hero stage: the page's mist on Signal's canvas, on a two-plate deck; the device cut by its edge ---------- */
.stage { position: relative; margin: 8px 8px 26px; border-radius: 28px; overflow: hidden; text-align: center; color: var(--ink); --ink2: var(--ink2t);
  background: radial-gradient(75% 70% at 0% 0%, var(--m, var(--coralM)), transparent 72%),
    radial-gradient(70% 70% at 100% 0%, var(--mistBlue), transparent 72%),
    radial-gradient(70% 50% at 50% 100%, var(--m, var(--coralM)), transparent 72%), var(--stageBg);
  box-shadow: inset 0 1px 0 var(--rimTop), 0 0 0 .5px var(--plateEdge),
    0 10px 0 -5px var(--plate1), 0 10px 0 -4.5px var(--plateEdge), 0 20px 0 -11px var(--plate2), 0 20px 0 -10.5px var(--plateEdge), 0 30px 40px -30px rgba(13, 17, 32, .25); }
.stage--home { background: radial-gradient(60% 60% at 0% 0%, var(--coralM), transparent 72%), radial-gradient(60% 60% at 100% 0%, var(--mistBlue), transparent 72%),
  radial-gradient(45% 45% at 14% 96%, var(--recoveryM), transparent 72%), radial-gradient(45% 45% at 86% 96%, var(--sleepM), transparent 72%),
  radial-gradient(40% 40% at 50% 100%, var(--strainM), transparent 72%), var(--stageBg); }
.stage--plain { background: radial-gradient(70% 90% at 0% 0%, var(--coralM), transparent 72%), radial-gradient(70% 90% at 100% 0%, var(--mistBlue), transparent 72%), var(--stageBg); }
.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-ring { position: absolute; z-index: 0; right: calc(50% + clamp(240px, 25vw, 330px) * .62); bottom: 20%; }
@media (max-width: 899px) { .hero-ring { display: none; } }
.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; }
/* The athletes page: the 27 beside the Athlete screen (desktop), as the hero ring sits beside Today on home. */
.hero-count { bottom: 34%; text-align: center; }
.hero-count .num { font-size: clamp(88px, 9vw, 132px); color: var(--ink); }
.hero-count .num small { display: block; margin: 6px 0 0; font-size: 19px; }
.hero-num--narrow { margin-top: 18px; padding-bottom: 0; }
.hero-num--narrow .num { font-size: clamp(88px, 22vw, 120px); }
@media (min-width: 900px) { .hero-num--narrow { display: none; } }
.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 12px 34px; 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; } }

/* Hued cards (the app's .signalSurface(hue:)): white, the words top-left, the phone cut by the card's bottom edge, the
   hue as a soft pool at the foot (like a score card's chart) and as the card's own shadow. */
.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: radial-gradient(90% 50% at 50% 100%, var(--g, transparent), transparent 75%), var(--cardBg);
  box-shadow: var(--surf), 0 30px 50px -34px color-mix(in srgb, var(--dot, transparent) 70%, transparent); }
.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; }
}

/* Plain cards (Signal's .card()): opaque, a specular rim, a hairline, a two-step lift */
.tile { background: var(--cardBg); border-radius: 28px; --chip: var(--tile2); box-shadow: var(--surf); }
.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 18px 22px; border-radius: 22px; background: var(--cardBg); box-shadow: var(--surf), 0 22px 40px -30px color-mix(in srgb, var(--dot, var(--coral)) 70%, transparent); border-left: 4px solid var(--dot, var(--coral)); }
.quote q { display: block; font: 600 19px/1.35 var(--round); letter-spacing: -.015em; quotes: "“" "”"; }
.quote p { font-size: 14px; color: var(--ink2); 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); box-shadow: 0 0 0 .5px var(--hair); 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(--cardBg); box-shadow: var(--surf); 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: 700 17px/1.3 var(--round); }
.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(--recoveryT); border-bottom: 2px solid var(--recoveryT); 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(--tile2); }
.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: 600 18px/1.3 var(--round); letter-spacing: -.01em; }
.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(--cardBg); box-shadow: var(--surf); 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: 800 12px/1.3 var(--round); letter-spacing: .1em; text-transform: uppercase; 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(--cardBg); box-shadow: var(--surf); color: var(--ink); font: 700 14px/1 var(--num); }
.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: 700 17px/1.3 var(--num); font-variant-numeric: tabular-nums; }
.day .t small { display: block; font: 400 13px/1.3 var(--sans); 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(--tile); 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(--cardBg); box-shadow: var(--surf); 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: radial-gradient(90% 70% at 50% 120%, var(--g, transparent), transparent 70%), var(--cardBg); box-shadow: var(--surf), 0 26px 44px -32px color-mix(in srgb, var(--dot, transparent) 70%, transparent); 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(--cardBg); box-shadow: var(--surf); }
.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: 22px; background: var(--cardBg); box-shadow: var(--surf); 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: linear-gradient(180deg, #171C29, #11141E); color: #F3F5FA; --ink: #F3F5FA; --ink2: #ABB2C2; --coralT: #FF8A7A; }
.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(--cardBg); box-shadow: var(--surf); }
.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(--tile); 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(--cardBg); box-shadow: var(--surf); 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: 12px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--dot, var(--ink3)) 78%, #fff), var(--dot, var(--ink3))); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 14px -6px var(--dot, rgba(0, 0, 0, .3)); }
.help .gi svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; 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 .mark { width: 30px; height: 30px; }
.foot__top { display: grid; gap: 22px; }
.foot__brand p { margin-top: 6px; }
.foot__brand a:not(.brand) { display: flex; width: fit-content; 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(--fuelW); color: var(--fuelT); 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; }
}

/* One card cut out of an app screen ([[card]]), floating with the app's own surface shadow. */
.appcard { width: var(--w); max-width: 100%; margin-inline: auto; border-radius: 22px; box-shadow: var(--surf), 0 30px 50px -30px color-mix(in srgb, var(--dot, #0D1120) 55%, transparent); }
.appcard img { width: 100%; border-radius: 22px; }
/* The rest timer's Live Activity under the lead (train): left-aligned with the words, the Lock Screen's 16 px corners. */
.appcard--la { margin: 24px 0 2px; border-radius: 16px; }
.appcard--la img { border-radius: 16px; }
.tiles > .tile--card { padding-bottom: 28px; }
.tile--card > :nth-last-child(2) { margin-bottom: 24px; }
.tile--card .appcard { margin-top: auto; }

/* A big ring over a row of small ones (the sleep score and its parts) */
.ringset { display: grid; justify-items: center; gap: 30px; }
.ringset .rings { width: min(100%, 460px); }