/* Pulsar website, in the app's own "lit studio" (ios/Pulsar/Design.swift, Shared/Theme.swift):
   a near-black room lit by one warm ember light and one cool aqua light, real 3D objects (scenes.js),
   glass panes that tilt with the pointer and catch the same light. Ember is the only accent on chrome.
   Numbers are condensed, titles expanded, labels monospaced. Layout rhythm after Refero's "Eight Sleep"
   style: full-bleed dark stages, generous section spacing, hairlines, pill controls. */

:root {
  --ink: #08090b;
  --panel: #101216;
  --panel-hi: #1a1d23;
  --recess: #040506;
  --pearl: #f2f0eb;
  --mist: #a0a4ab;
  --haze: #62666e;
  --line: rgba(255, 255, 255, 0.07);
  --dim: rgba(255, 255, 255, 0.16);
  --ember: #ff5a36;
  --ember-deep: #c8361a;
  --aqua: #5ce1e6;
  --citrine: #d5f25b;
  --violet: #8c7cff;
  --indigo: #4a3cf0;

  --px: 0;   /* pointer, -1…1, eased by main.js */
  --py: 0;

  --f-head: "Archivo", -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --f-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(88px, 11vw, 150px);
  --glide: cubic-bezier(0.19, 1, 0.22, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
  -webkit-text-size-adjust: 100%;
  background: var(--ink);
  color-scheme: dark;
}

body {
  margin: 0;
  color: var(--pearl);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;   /* clip, not hidden: no sideways scroll on iPhone, and sticky nav keeps working */
}
html { overflow-x: clip; }

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; }
h1, h2, h3, p, dl, dd { margin: 0; }
button { font: inherit; color: inherit; }

code {
  font-family: var(--f-mono);
  font-size: 0.86em;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--recess);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.9), inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  color: var(--pearl);
}

:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 999px; background: var(--pearl); color: var(--ink);
  font-weight: 500; text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- The room: ink, a warm glow top right, a cool glow low left, fine film grain ---------- */

.room {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70vmax 70vmax at 100% 0%, rgba(255, 90, 54, 0.13), transparent 60%),
    radial-gradient(60vmax 60vmax at 0% 78%, rgba(92, 225, 230, 0.07), transparent 60%),
    var(--ink);
}
.room::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.06;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Type: titles expanded, numbers condensed, labels monospaced ---------- */

.heading {
  font-family: var(--f-head);
  font-stretch: 125%;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.02;
  text-wrap: balance;
}
.heading--1 { font-size: clamp(2.5rem, 6.2vw, 5.4rem); letter-spacing: -0.03em; }
.heading--2 { font-size: clamp(2rem, 4.2vw, 3.5rem); max-width: 16em; }
.heading--3 { font-size: clamp(1.35rem, 2.1vw, 1.75rem); line-height: 1.15; }

.num {
  font-family: var(--f-head);
  font-stretch: 62%;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}
.num--hero { font-size: clamp(5.5rem, 12vw, 9.5rem); display: inline-block; transform-origin: left bottom; animation: thump 0.882s infinite; }
@keyframes thump {
  0% { transform: scale(1); text-shadow: 0 0 0 transparent; }
  8% { transform: scale(1.045); text-shadow: 0 0 28px rgba(255, 90, 54, 0.55); }
  22% { transform: scale(1); text-shadow: 0 0 0 transparent; }
  32% { transform: scale(1.02); text-shadow: 0 0 16px rgba(255, 90, 54, 0.3); }
  50%, 100% { transform: scale(1); text-shadow: 0 0 0 transparent; }
}
.num--xl { font-size: clamp(3.6rem, 7vw, 5.6rem); }
.num--lg { font-size: clamp(3rem, 5vw, 4rem); }
.num--md { font-size: clamp(2.4rem, 4vw, 3.4rem); }
.num--sm { font-size: 1.9rem; }

.tag {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mist);
  white-space: nowrap;
}
.tag--ember { color: var(--ember); }
.tag--pearl { color: var(--pearl); }
.tag--haze { color: var(--haze); }
.center { text-align: center; }

.reading { font-size: 17px; line-height: 1.55; color: var(--mist); max-width: 34em; }
.note { font-size: 14px; color: var(--haze); }

.readout { display: flex; align-items: baseline; gap: 6px; margin: 6px 0 4px; }
.readout .tag + .num { margin-left: 10px; }

/* ---------- Lit objects ---------- */

/* A small lit sphere: highlight follows the light as the pointer moves. */
.orb {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at calc(34% - var(--px) * 12%) calc(28% + var(--py) * 12%),
    color-mix(in srgb, var(--c, var(--ember)) 20%, white) 0%, var(--c, var(--ember)) 40%, color-mix(in srgb, var(--c, var(--ember)) 40%, black) 100%);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--c, var(--ember)) 55%, transparent);
}
.orb--lg { width: 22px; height: 22px; }

.diamond {
  flex: none;
  width: 7px;
  height: 7px;
  background: var(--ember);
  transform: rotate(45deg);
  box-shadow: 0 0 8px rgba(255, 90, 54, 0.85);
}

.pulse-dot {
  position: relative;
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ember);
}
.pulse-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(255, 90, 54, 0.5);
  animation: beat 0.88s ease-out infinite; /* 68 bpm */
}
.pulse-dot--lg { width: 12px; height: 12px; margin-bottom: 28px; box-shadow: 0 0 16px var(--ember); }
@keyframes beat { from { transform: scale(1); opacity: 0.9; } to { transform: scale(2.8); opacity: 0; } }

.section-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.section-header .push { margin-left: auto; }

/* ---------- Glass: a pane of dark glass with a lit top edge and a sheen that moves with the pointer ---------- */

.glass {
  position: relative;
  isolation: isolate;
  border-radius: 26px;
  background: linear-gradient(to bottom, var(--panel-hi), var(--panel));
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.6);
}
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.03) 50%, rgba(255, 255, 255, 0.1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(420px circle at calc(25% - var(--px) * 40%) calc(-5% + var(--py) * 40%), rgba(255, 255, 255, 0.09), transparent 70%);
  pointer-events: none;
}
.pane { padding: clamp(18px, 2.4vw, 26px); }

/* Panes tilt in 3D with the pointer (Design.swift: DepthTilt). */
.tilt {
  transform: perspective(1200px) rotateY(calc(var(--px) * 4deg * var(--k, 1))) rotateX(calc(var(--py) * -4deg * var(--k, 1)));
  transform-style: preserve-3d;
}

/* ---------- Controls ---------- */

/* The one lit ember pill: glossy top, glow underneath, presses into the screen. */
.btn-ember {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 17px 26px;
  border-radius: 999px;
  font-family: var(--f-head);
  font-stretch: 125%;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: linear-gradient(to bottom, #ff8a6d, var(--ember) 50%, var(--ember-deep));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 12px 22px rgba(255, 90, 54, 0.5);
  transition: transform 0.25s var(--glide), box-shadow 0.25s var(--glide);
}
.btn-ember::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 16px;
  right: 16px;
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
  filter: blur(2.5px);
}
.btn-ember:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 14px 30px rgba(255, 90, 54, 0.65); }
.btn-ember:active { transform: translateY(2px) scale(0.98); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 3px 8px rgba(255, 90, 54, 0.3); }

/* Small raised glass key: secondary actions and links. */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border: 0;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--pearl);
  background: linear-gradient(to bottom, #20232a, var(--panel));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 5px 10px rgba(0, 0, 0, 0.55);
  cursor: pointer;
  transition: transform 0.2s var(--glide), box-shadow 0.2s var(--glide);
}
.chip:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 6px 14px rgba(0, 0, 0, 0.6); }
.chip:active { transform: translateY(1.5px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 3px rgba(0, 0, 0, 0.6); }
.chip--round { width: 44px; height: 44px; padding: 0; font-size: 16px; letter-spacing: 0; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 32px; }
.actions--center { justify-content: center; }

/* Recessed track with a raised pearl key (Design.swift: PeriodPicker). */
.picker {
  display: inline-flex;
  padding: 4px;
  border-radius: 22px;
  background: var(--recess);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.9), inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}
.picker button {
  min-width: 52px;
  padding: 9px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: var(--f-head);
  font-stretch: 125%;
  font-size: 13px;
  font-weight: 600;
  color: var(--mist);
  cursor: pointer;
  transition: background 0.3s var(--glide), color 0.3s var(--glide);
}
.picker button[aria-pressed="true"] {
  color: var(--ink);
  background: linear-gradient(to bottom, var(--pearl), #bdbbb6);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.9), 0 4px 6px rgba(0, 0, 0, 0.7);
}

/* ---------- Phones: the screen itself, a lit hairline edge and the Dynamic Island ---------- */

.phone {
  position: relative;
  border-radius: 13.4% / 6.17%;   /* iPhone 17 Pro display corners, as a share of a 720×1565 shot */
  background: var(--ink);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 40px 80px rgba(0, 0, 0, 0.7), 0 0 80px rgba(255, 90, 54, 0.07);
}
.phone img { width: 100%; border-radius: inherit; }
.phone::before {                  /* light catching the glass edge */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(calc(135deg + var(--px) * 30deg), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.04) 40%, rgba(255, 255, 255, 0.02) 70%, rgba(92, 225, 230, 0.3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.phone::after {                   /* Dynamic Island, measured from the Simulator's own, with its camera lens */
  content: "";
  position: absolute;
  z-index: 2;
  left: 34.45%;
  top: 1.6%;
  width: 31.1%;
  height: 4.2%;
  border-radius: 999px;
  background: radial-gradient(circle at 82% 50%, #1d2436 0, #0b0e15 9%, transparent 10.5%), #000;
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.07);
  pointer-events: none;
}

/* Floating in 3D: turned a little, tilting with the pointer and bobbing slowly. */
.float {
  transform: perspective(1400px) rotateY(calc(var(--ry, 0deg) + var(--px) * 9deg)) rotateX(calc(4deg + var(--py) * -6deg));
  transform-style: preserve-3d;
  animation: bob 7s ease-in-out infinite;
}
.float--late { animation-delay: -3.5s; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }

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

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(8, 9, 11, 0.6);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
  backdrop-filter: saturate(150%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--wrap);
  height: 64px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--f-head);
  font-stretch: 125%;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-decoration: none;
}
.logo .orb { width: 13px; height: 13px; }
.nav__links { display: flex; gap: 28px; }
.nav__links a {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mist);
  transition: color 0.2s;
}
.nav__links a:hover { color: var(--pearl); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: min(calc(100svh - 64px), 940px);
  display: flex;
  align-items: center;
  padding-block: clamp(48px, 8vw, 96px);
}
.hero__orb {
  position: absolute;
  inset: -64px -6vw 0 34%;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
}
.hero__orb canvas { width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; }
.hero__orb canvas:active { cursor: grabbing; }
.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px; pointer-events: none; }
.hero__copy { max-width: 600px; pointer-events: auto; }
.hero__copy .heading { margin-top: 18px; }
.hero__copy .reading { margin-top: 22px; }
.hero__readout { display: grid; justify-items: start; gap: 2px; padding-bottom: 8px; text-decoration: none; pointer-events: auto; }
.hero__live { display: inline-flex; align-items: center; gap: 8px; }
.hero__readout .readout { margin: 0; }

.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 26px 8px;
  list-style: none;
}
.facts li { display: grid; gap: 10px; padding-inline: 22px; border-left: 1px solid var(--line); }
.facts li:first-child { border-left: 0; }

/* ---------- Sections ---------- */

.section { padding-block: var(--section) 0; }
.section__head { display: grid; gap: 16px; margin-bottom: clamp(40px, 6vw, 72px); }
.section__head .reading { margin-top: 4px; }
.section__head--row { display: flex; align-items: end; justify-content: space-between; }
.section__head--row > div { display: grid; gap: 16px; }

.feature {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(32px, 6vw, 88px);
  padding-block: clamp(36px, 5vw, 64px);
}
.feature--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.feature--flip .feature__stage { order: 2; }
.feature__stage { display: flex; justify-content: center; }
.feature__stage .float { width: min(100%, 320px); }
.feature__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.feature__body .pane { margin-bottom: 18px; }
.feature__body .reading { max-width: 32em; }

/* Activity panel, as in the app. */
.activity { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 8px; }
.activity__rings { width: 100%; aspect-ratio: 1; display: block; }
.activity__rows { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.activity__rows li { display: flex; align-items: flex-start; gap: 10px; }
.activity__rows .orb { margin-top: 2px; }
.activity__rows p { display: flex; align-items: baseline; gap: 6px; }
.of { font-size: 12px; color: var(--haze); white-space: nowrap; }

.chart { display: block; width: 100%; touch-action: pan-y; cursor: crosshair; }
/* Sleep hypnogram: lane labels in a narrow column, lined up with the 3D lanes by scenes.js. */
.hypno { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; margin-top: 10px; }
.hypno__lanes { position: relative; width: 44px; margin: 0; padding: 0; list-style: none; }
.hypno__lanes li {
  position: absolute; left: 0; top: 50%; translate: 0 -50%;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--c) 70%, var(--pearl));
}
.chart--sleep { aspect-ratio: 2.6; }
.readout__note { margin-left: 8px; }
[data-sleep-caption], [data-wo-caption] { transition: color 0.2s; }
.chart--trends { aspect-ratio: 2.6; }
.chart--workout { aspect-ratio: 2.3; }

.legend { margin-top: 12px !important; }
.legend { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 10px 16px; margin: 6px 0 0; padding: 0; list-style: none; }
.legend li { display: flex; align-items: center; gap: 8px; }
.legend b { font-family: var(--f-mono); font-size: 12px; font-weight: 500; color: var(--pearl); }

/* Trends: a wide pane, then copy and phones. */
.feature--wide { grid-template-columns: 1fr; gap: clamp(32px, 5vw, 56px); }
.trends__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.trends__top .heading { margin-top: 8px; }
.trends__readout { margin-top: 18px; }
.trends__copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 6vw, 88px); }
.trends__copy > div:first-child { display: grid; gap: 14px; }
.phones-pair { display: flex; justify-content: center; gap: clamp(16px, 3vw, 32px); align-items: flex-start; }
.phones-pair .float { width: min(46%, 250px); }
.phones-pair .float--late { margin-top: 12%; }
.axis { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-inline: 12px; }
.axis > :nth-child(2) { min-width: 0; white-space: normal; text-align: center; }
.hypno + .axis { padding-left: 50px; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; }
.stats div { padding: 12px 14px; border-radius: 16px; background: var(--recess); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8), inset 0 -1px 0 rgba(255, 255, 255, 0.07); }
.stats dd { display: flex; align-items: baseline; gap: 5px; margin-top: 6px; }

/* Your Mac */
.core { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(24px, 4vw, 56px); }
.core__stage { position: relative; }
.core__stage canvas { display: block; width: 100%; aspect-ratio: 1.15; touch-action: pan-y; cursor: grab; }
.core__readout { position: absolute; left: 0; bottom: 4%; display: grid; gap: 6px; pointer-events: none; }
.steps { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; padding: 0; list-style: none; }
.steps h3 { margin-top: 12px; font-family: var(--f-head); font-stretch: 125%; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.steps p { margin-top: 8px; font-size: 14px; color: var(--mist); }

.desk { position: relative; margin-top: clamp(56px, 8vw, 104px); padding-right: clamp(0px, 9vw, 130px); }
.browser { overflow: hidden; border-radius: 18px; }
.browser img { border-radius: 0 0 18px 18px; }
.browser__bar { display: flex; align-items: center; gap: 7px; height: 38px; padding-inline: 16px; border-bottom: 1px solid var(--line); }
.browser__bar i { width: 11px; height: 11px; border-radius: 50%; background: #2c2f36; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.browser__bar span { margin-left: 14px; padding: 4px 14px; border-radius: 8px; background: var(--recess); font-family: var(--f-mono); font-size: 11px; color: var(--mist); }
.desk__phone { position: absolute; right: 0; top: 12%; width: clamp(140px, 19vw, 250px); }

/* Browse */
.browse { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.browse__col { display: grid; gap: 14px; }
.group__head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.group__head h3 { font-family: var(--f-head); font-stretch: 125%; font-size: 18px; font-weight: 600; }
.group__head .tag { margin-left: auto; }
.group ul { margin: 0; padding: 0; list-style: none; }
.group li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 15px; }
.group li:first-child { border-top: 0; }
.group li span { font-family: var(--f-mono); font-size: 12px; color: var(--mist); white-space: nowrap; }

/* Privacy */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cards p { margin-top: 14px; color: var(--mist); font-size: 15px; }

/* Gallery: phones on a curved shelf (main.js sets --d per phone: its distance from the centre). */
.gallery { overflow: hidden; }
.gallery__nav { display: flex; gap: 10px; }
.strip {
  display: flex;
  gap: clamp(16px, 2.2vw, 30px);
  padding: 24px max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))) 40px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  perspective: 1400px;
}
.strip::-webkit-scrollbar { display: none; }
.strip figure {
  --d: 0;
  flex: 0 0 auto;
  width: clamp(170px, 19vw, 236px);
  scroll-snap-align: center;
  transform: rotateY(calc(var(--d) * -16deg)) translateZ(calc(var(--a, 0) * -60px));
  transition: transform 0.15s linear;
}
.strip figcaption { margin-top: 16px; text-align: center; }
.gallery > .note { margin-top: 0; }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.faq { display: grid; gap: 12px; }
.faq details { padding: 0; }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  font-family: var(--f-head);
  font-stretch: 112%;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-family: var(--f-mono); font-size: 18px; color: var(--ember); transition: transform 0.3s var(--glide); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 24px 22px; color: var(--mist); }

/* Closing: the waitlist */
.closing { padding-block: clamp(120px, 16vw, 220px); text-align: center; }
.closing .wrap { display: grid; justify-items: center; }
.closing .tag { margin-bottom: 18px; }
.closing .reading { margin-top: 20px; }

.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;
}

/* A recessed well with the ember button beside it; the rim lights ember while you type (Design.swift: DepthField). */
.waitlist {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(100%, 560px);
  margin-top: 36px;
  padding: 8px;
  border-radius: 999px;
}
.waitlist[hidden] { display: none; }
.waitlist__field {
  flex: 1;
  min-width: 0;
  padding: 16px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--recess);
  color: var(--pearl);
  font: 16px/1.2 var(--f-body);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.9), inset 0 -1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px transparent;
  transition: box-shadow 0.2s ease;
}
.waitlist__field::placeholder { color: var(--haze); }
.waitlist__field:focus {
  outline: none;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 90, 54, 0.8), 0 0 14px rgba(255, 90, 54, 0.45);
}
.waitlist[data-state="error"] .waitlist__field { box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 0 1px var(--ember); }
.waitlist .btn-ember { flex: none; border: 0; cursor: pointer; }
.waitlist .btn-ember:disabled { opacity: 0.6; cursor: progress; }
.waitlist__status { max-width: 30em; margin-top: 16px; }
.waitlist__status[data-state="error"] { color: var(--ember); }
.waitlist__status[data-state="done"] {
  max-width: min(100%, 40em);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 36px;
  padding: 16px 22px;
  border-radius: 999px;
  background: linear-gradient(to bottom, var(--panel-hi), var(--panel));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 14px 44px rgba(0, 0, 0, 0.6);
  color: var(--pearl);
  font-size: 16px;
}
.waitlist__status[data-state="done"]::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--aqua);
  box-shadow: 0 0 8px var(--aqua);
}

/* Footer */

.footer { border-top: 1px solid var(--line); }
.footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px; padding-block: 48px 32px; }
.footer__inner .note { margin-top: 12px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 12px 26px; }
.footer__links a { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: var(--mist); }
.footer__links a:hover { color: var(--pearl); }
.footer__legal { display: grid; gap: 6px; padding-block: 22px 44px; border-top: 1px solid var(--line); font-size: 12px; color: var(--haze); }

/* ---------- Motion: rise and tip forward into place; panes fold back as they scroll ---------- */

.rise { animation: rise 0.9s var(--glide) both; transform-origin: bottom; }
.rise:nth-child(2) { animation-delay: 0.08s; }
.rise:nth-child(3) { animation-delay: 0.16s; }
.rise:nth-child(4) { animation-delay: 0.24s; }
@keyframes rise { from { opacity: 0; transform: perspective(900px) translateY(26px) rotateX(22deg); } }
.js .reveal {
  opacity: 0;
  transform: perspective(900px) translateY(26px) rotateX(22deg);
  transform-origin: bottom;
  transition: opacity 0.9s var(--glide), transform 0.9s var(--glide);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@supports (animation-timeline: view()) {
  .fold {
    animation: fold linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 35%;
  }
  @keyframes fold {
    from { transform: perspective(1200px) rotateX(-16deg) scale(0.95); opacity: 0.35; }
    to { transform: none; opacity: 1; }
  }
}

canvas.is-off { display: none; }

/* Phones: no film grain (a full-screen blended layer is costly to scroll) and lighter shadows. */
@media (hover: none) {
  .room::after { display: none; }
  .phone { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 24px 48px rgba(0, 0, 0, 0.7); }
  .strip figure { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pulse-dot::after, .float, .num--hero { animation: none; }
  .rise { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .fold { animation: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
  .nav__links { display: none; }
  .hero { flex-direction: column; align-items: stretch; padding-top: 0; min-height: 0; }
  .hero__orb { position: relative; inset: auto; height: min(70vw, 520px); margin: 0 -6vw -40px; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__readout { position: absolute; top: -190px; left: var(--gutter); }
  .feature, .feature--flip, .trends__copy, .core, .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .feature--flip .feature__stage { order: 0; }
  .feature__stage .float { width: min(62%, 300px); }
  .browse { grid-template-columns: 1fr 1fr; }
  .browse__col { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .cards { grid-template-columns: 1fr 1fr; }
  .core__readout { position: static; margin-top: -8px; }
  .desk { padding-right: 0; padding-bottom: 34%; }
  .desk__phone { top: auto; bottom: 0; right: 4%; }
}

@media (max-width: 640px) {
  .facts { grid-template-columns: 1fr 1fr; row-gap: 22px; }
  .facts li:nth-child(3) { border-left: 0; }
  .hero__orb { height: 92vw; margin: 0 -36vw -40px 8vw; }
  .hero__readout { top: -150px; }
  .hero__readout .note { max-width: 8.5em; line-height: 1.35; }
  .num--hero { font-size: 3.9rem; }
  .hide-sm { display: none; }
  .activity { grid-template-columns: 1fr; justify-items: center; }
  .activity__rings { max-width: 240px; }
  .activity__rows { grid-template-columns: repeat(3, 1fr); width: 100%; }
  .activity__rows li { flex-direction: column; gap: 6px; }
  .legend { grid-template-columns: repeat(2, minmax(0, auto)); gap: 10px 12px; }
  .legend li { gap: 6px; }
  .hypno__lanes { width: 40px; }
  .chart--sleep { aspect-ratio: 2.1; }
  .axis { flex-wrap: wrap; row-gap: 8px; padding-inline: 4px; }
  .axis > :nth-child(2) { order: 3; flex-basis: 100%; }
  .hypno + .axis { padding-left: 46px; }
  .hypno__lanes li { font-size: 9px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .browse, .browse__col, .cards, .steps { grid-template-columns: 1fr; }
  .gallery__nav { display: none; }
  .picker button { min-width: 0; padding: 9px 11px; }
  .faq summary { padding: 18px; }
  .waitlist { flex-direction: column; align-items: stretch; border-radius: 26px; }
  .nav .chip { padding: 9px 11px; font-size: 10px; letter-spacing: 0.06em; }
  .browse, .browse__col, .cards, .steps, .stats { min-width: 0; }
  .waitlist .btn-ember { justify-content: center; }
  .faq details p { padding: 0 18px 18px; }
}