/* The site.
   Every colour is a token: the app's from tokens.css (Art/room-study/theme.py through
   emit.py), the coats' from coats.css (widget-faces.json through build.py). This file
   holds no colour values, with one exception: the phone's own metal and glass, which
   belong to the device, not to the app's palette.
   The site is not coloured like the app. It is coloured like the app's icons: ginger's
   sky is the stage, and each coat brings its own gradient when it appears.
   Shell rules follow Spec/UI-STYLE.md: no visible borders, surfaces separated by
   shadow and tone. */

:root {
  --font: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --shade: color-mix(in srgb, var(--text-primary) 55%, transparent);
}

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

html {
  background: var(--white-n-deep); /* the night at the foot of the page */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

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

.px-icon { width: 24px; height: 24px; fill: currentColor; flex: none; }
.px { image-rendering: pixelated; image-rendering: crisp-edges; }

/* ── the show ──────────────────────────────────────────────────────── */

.show {
  --ph: min(64svh, 44rem);           /* phone height during the show */
  --pw: calc(var(--ph) * 0.4785);    /* iPhone 17 Pro Max body, 78 × 163 mm */
  --line: clamp(2.25rem, 1.2rem + 4.2vw, 5rem);
  --ink: var(--fur-cream);           /* the text colour of whatever field is showing */
  position: relative;
  height: max(100svh, 40rem);
  overflow: hidden;
  isolation: isolate;
  color: var(--ink);
}

/* The fields: night, the sky, one per coat. Each covers the ones before it. */
.fields { position: absolute; inset: 0; z-index: 0; }
.field {
  position: absolute;
  inset: 0;
  visibility: hidden;
  background: radial-gradient(130% 95% at 50% 40%, var(--c-light) 0%, var(--c-deep) 100%);
}
.field:first-child { visibility: visible; }
/* Night is ginger's icon after dark, its edges going down into the deepest night the
   icons have, the white coat's leaves. */
.f-night {
  background: radial-gradient(80% 70% at 50% 46%, var(--ginger-n-deep) 0%,
    color-mix(in oklab, var(--ginger-n-deep) 25%, var(--white-n-deep)) 100%);
}
/* The morning opens through the cat's head: the icons pack's cat, filled in. */
.f-mask {
  --m: 0px;
  -webkit-mask: url("cat-mask.svg") 50% 50% / var(--m) var(--m) no-repeat;
  mask: url("cat-mask.svg") 50% 50% / var(--m) var(--m) no-repeat;
}

.show-top {
  position: absolute;
  inset: 0 0 auto;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
  padding: 0 var(--gutter);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.top-actions { display: flex; align-items: center; gap: 1.25rem; }
.sound {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.sound .px-icon { width: 20px; height: 20px; }
.sound[aria-pressed="true"] { opacity: 1; }

.skip, .replay, .sound {
  min-height: 2.75rem;
  padding: 0 0.25rem;
  border: 0;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: inherit;
  background: none;
  cursor: pointer;
  opacity: 0.75;
}
.skip:hover, .replay:hover, .sound:hover { opacity: 1; }

/* No z-index here on purpose: the act's pieces stack with the phone, so a widget can
   come to rest in front of it. */
.act {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* The dial: sixty ticks and the time. */
.dial {
  --size: min(84vw, 64svh);
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--size);
  height: var(--size);
  translate: -50% -50%;
  display: grid;
  place-items: center;
}
.ticks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ticks line { stroke-linecap: round; }
.clock {
  position: relative;
  display: flex;
  margin: 0;
  font-size: calc(var(--size) * 0.27);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--fur-cream);
}
.clock .d {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 1.08em;
  padding: 0 0.01em;
}
.clock .d > span { display: block; }
.clock .d > span + span { position: absolute; inset: 0 0 auto; }
.clock .colon { margin: 0 0.02em; translate: 0 -0.06em; opacity: 0.8; }

.pulses {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
}
.pulses i {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--r, 20rem);
  height: var(--r, 20rem);
  translate: -50% -50%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--pc, var(--surface));
  opacity: 0;
}

/* Kinetic lines, one at a time. The word that matters lands on ginger. */
.line {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(4rem + 2svh);
  margin: 0;
  padding: 0 var(--gutter);
  text-align: center;
  font-size: var(--line);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.035em;
  text-wrap: balance;
  visibility: hidden;
}
.line.mid { top: 50%; translate: 0 -50%; }
.line .w { display: inline-block; }
.line b {
  font-weight: inherit;
  padding: 0 0.14em 0.04em;
  margin: 0 -0.02em;
  border-radius: 0.14em;
  color: var(--text-primary);
  background: var(--fur-shadow);
  box-shadow: 0 0.12em 0.3em -0.12em var(--shade);
}

.sticker {
  position: absolute;
  left: 50%;
  top: 50%;
  visibility: hidden;
}
.st-cat { width: calc(29px * var(--k, 5)); height: auto; }

/* ── the deck: a coat, a room ── */
.deck {
  --k: 3;
  position: absolute;
  left: 50%;
  top: calc(50% + 3.5rem);
  width: 0;
  height: 0;
}
.card {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  translate: -50% -50%;
  visibility: hidden;
}
.card canvas {
  display: block;
  width: calc(128px * var(--k));
  height: calc(109px * var(--k));
  border-radius: var(--row-radius);
  box-shadow: 0 1.75rem 3.5rem -1.5rem var(--shade), 0 0.5rem 1rem -0.5rem var(--shade);
}
.card figcaption {
  position: absolute;
  top: calc(100% + 1.25rem);
  left: 50%;
  translate: -50% 0;
  width: max-content;
  text-align: center;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-ink);
}
.card strong {
  display: block;
  font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

/* ── the Home Screen: widgets and icons ── */
.home {
  --u: min(1px, calc((100vw - 2.5rem) / 558));   /* one point of the widget */
  position: absolute;
  z-index: 4;
  left: 50%;
  top: calc(50% + 3.5rem);
  display: grid;
  grid-template-columns: repeat(3, calc(170 * var(--u)));
  grid-template-rows: repeat(2, calc(170 * var(--u))) auto;
  gap: calc(24 * var(--u));
  translate: -50% -50%;
}
.wg {
  position: relative;
  overflow: hidden;
  border-radius: calc(22 * var(--u));
  box-shadow: 0 calc(20 * var(--u)) calc(44 * var(--u)) calc(-18 * var(--u)) var(--shade);
  visibility: hidden;
}
.wg p { margin: 0; }
.wg-m { grid-column: span 2; }
.wg-s { grid-column: span 1; }
.wg-label {
  font: 400 calc(11 * var(--u)) / calc(13 * var(--u)) var(--mono);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  white-space: nowrap;
}
.wg-time {
  font-size: calc(34 * var(--u));
  line-height: calc(41 * var(--u));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.wg-when {
  font-size: calc(15 * var(--u));
  line-height: calc(20 * var(--u));
  font-weight: 600;
  white-space: nowrap;
}
.wg-small {
  font-size: calc(13 * var(--u));
  line-height: calc(18 * var(--u));
  font-weight: 400;
}

/* Room: the hero card, free. */
.wg-room {
  display: flex;
  flex-direction: column;
  color: var(--text-primary);
  background: var(--surface);
}
.wg-pic {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: var(--surface-sunken);
}
.wg-pic canvas { position: absolute; }
.wg-room .wg-label { color: var(--label); }
.wg-room .wg-small { color: var(--text-muted); }
.wg-s.wg-room .wg-words {
  display: grid;
  gap: calc(2 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u));
}
.wg-row { display: flex; align-items: baseline; justify-content: space-between; gap: calc(4 * var(--u)); }
.wg-row .wg-time { font-size: calc(22 * var(--u)); line-height: calc(28 * var(--u)); }
.wg-m.wg-room { flex-direction: row; }
.wg-m.wg-room .wg-pic { flex: none; width: calc(170 * var(--u)); }
.wg-m .wg-words {
  flex: 1;
  display: grid;
  align-content: center;
  gap: calc(4 * var(--u));
  padding: calc(16 * var(--u));
}

/* Cat: the coat's own gradient, in the icons pack. */
.wg-cat {
  color: var(--c-ink);
  background: radial-gradient(circle calc(132 * var(--u)) at 50% 34%, var(--c-light), var(--c-deep));
}
.wg-s.wg-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(4 * var(--u));
  padding-top: calc(6.8 * var(--u));
  text-align: center;
}
.wg-s.wg-cat .wg-sprite { display: flex; align-items: flex-end; height: calc(78.2 * var(--u)); }
.wg-m.wg-cat {
  display: flex;
  background: radial-gradient(circle calc(221 * var(--u)) at 24% 50%, var(--c-light), var(--c-deep));
}
.wg-m.wg-cat .wg-sprite { flex: none; display: grid; place-items: center; width: 48%; }
.wg-m.wg-cat .wg-words { padding: 0 calc(16 * var(--u)) 0 0; }
.wg-cat .wg-label, .wg-cat .wg-small { opacity: 0.8; }

.icons {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: calc(24 * var(--u));
  padding-top: calc(8 * var(--u));
}
.icons img {
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  border-radius: 22.4%;
  box-shadow: 0 calc(10 * var(--u)) calc(22 * var(--u)) calc(-10 * var(--u)) var(--shade);
  visibility: hidden;
}

/* The phone: an iPhone 17 Pro Max body, a recording of the real app inside. */
.phone {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: calc(100% - var(--ph) - 6svh);
  width: var(--pw);
  height: var(--ph);
  padding: calc(var(--pw) * 0.016);
  border-radius: calc(var(--pw) * 0.17);
  background:
    linear-gradient(135deg, #b9b6b0 0%, #6f6c67 18%, #3a3835 45%, #75726c 75%, #c9c6bf 100%);
  box-shadow:
    0 2.5rem 5rem -1.5rem var(--shade),
    0 0.75rem 1.5rem -0.5rem var(--shade);
  visibility: hidden;
  transform-origin: 50% 0;
}
.phone::before, .phone::after {
  content: "";
  position: absolute;
  width: calc(var(--pw) * 0.012);
  border-radius: 2px;
  background: #57544f;
}
.phone::before { left: calc(var(--pw) * -0.008); top: 20%; height: 7%; box-shadow: 0 calc(var(--ph) * 0.1) 0 #57544f; }
.phone::after { right: calc(var(--pw) * -0.008); top: 27%; height: 11%; }
.glass {
  height: 100%;
  padding: calc(var(--pw) * 0.024);
  border-radius: calc(var(--pw) * 0.155);
  background: #0c0c0d;
}
.screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--pw) * 0.13);
  background: var(--app-bg);
}
.screen video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.screen .v-feed { opacity: 0; }

/* Where everything comes to rest. */
.final {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3rem;
  max-width: 78rem;
  margin: 0 auto;
  padding: 5rem var(--gutter) 3rem;
  visibility: hidden;
}
.final-copy { max-width: 34rem; }
.final h1 {
  margin: 0;
  font-size: clamp(2.5rem, 1.3rem + 3.3vw, 4.5rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.final .lede {
  margin: 1.5rem 0 0;
  max-width: 26ch;
  font-size: clamp(1.1875rem, 1.05rem + 0.4vw, 1.4375rem);
  line-height: 1.4;
  font-weight: 500;
  text-wrap: pretty;
}
.final-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 2.25rem;
}
.soon {
  margin: 0;
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0 1.25rem;
  border-radius: 999px;
  font-weight: 600;
  color: var(--on-primary);
  background: var(--primary);
}
.phone-slot {
  position: relative;
  width: calc(min(70svh, 44rem) * 0.4785);
  height: min(70svh, 44rem);
}
/* A widget comes to rest against the phone, half over its edge. */
.dock {
  --u: min(1px, calc((100vw - 2.5rem) / 558));
  position: absolute;
  left: calc(-110 * var(--u));
  bottom: 9%;
  width: calc(170 * var(--u));
  height: calc(170 * var(--u));
}

@media (max-height: 800px) {
  .deck { --k: 2; }
  .home { --u: min(0.8px, calc((100vw - 2.5rem) / 558)); }
  .dock { --u: min(0.8px, calc((100vw - 2.5rem) / 558)); }
}

@media (max-width: 767px) {
  .show { --ph: min(58svh, 36rem); }
  .deck { --k: 2; }
  .final {
    grid-template-columns: 1fr;
    align-content: start;
    justify-items: start;
    gap: 2rem;
    padding-top: 5rem;
  }
  .phone-slot {
    justify-self: center;
    width: calc(56svh * 0.4785);
    height: 56svh;
  }
  /* The phone runs off the bottom of a small screen; the widget sits high enough to be seen. */
  .dock { left: -8%; top: 10%; bottom: auto; }
  .st-cat { --k: 3; }
}

.show.is-still .skip, .show.is-still .sound { display: none; }


/* ── the page below the show: one day, in the icons' colours ─────────── */
/* One system for everything below: sizes on an 8 px step; three corner rules (controls
   are pills, panels and art take the app's row radius, icons their own squircle); one
   text size step between headings and body so the eye always knows what leads. */

:root {
  --t-display: clamp(3rem, 1.2rem + 6.6vw, 8rem);
  --t-h2: clamp(2.25rem, 1.3rem + 3.6vw, 4.75rem);
  --t-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --t-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
}

html { scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.wrap {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.band {
  --band-ink: var(--c-ink);
  position: relative;
  padding: clamp(5rem, 2.5rem + 8vw, 10rem) 0;
  color: var(--band-ink);
  background: var(--band-bg);
}
/* Each band runs from a coat's light to halfway to its deep, so the text keeps its
   contrast at the bottom of the band as well as the top. The garden and the night are
   the white coat's, darkest last. */
.b-butter { --band-ink: var(--blue-ink); --band-soft: var(--blue-light); --band-bg: linear-gradient(180deg, var(--blue-light), color-mix(in oklab, var(--blue-light) 50%, var(--blue-deep))); }
.b-leaf   { --band-ink: var(--brown-ink); --band-soft: var(--brown-light); --band-bg: linear-gradient(180deg, var(--brown-light), color-mix(in oklab, var(--brown-light) 50%, var(--brown-deep))); }
.b-dusk   { --band-ink: var(--cream-ink); --band-soft: var(--cream-light); --band-bg: linear-gradient(180deg, var(--cream-light), color-mix(in oklab, var(--cream-light) 50%, var(--cream-deep))); }
.b-forest { --band-ink: var(--white-ink); --band-soft: var(--white-light); --band-bg: linear-gradient(180deg, color-mix(in oklab, var(--white-light) 60%, var(--white-deep)), var(--white-deep)); }
.b-night  { --band-ink: var(--white-n-ink); --band-soft: var(--white-n-light); --band-bg: linear-gradient(180deg, var(--white-n-light), var(--white-n-deep)); }
.b-deep   { --band-ink: var(--white-n-ink); --band-soft: var(--white-n-light); --band-bg: var(--white-n-deep); }

.band h2 {
  margin: 0;
  font-size: var(--t-h2);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.band h3 {
  margin: 0 0 0.5rem;
  text-wrap: balance;
  font-size: var(--t-h3);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.band p, .band dd {
  margin: 0;
  max-width: 36rem;
  font-size: 1.125rem;
  line-height: 1.5;
  text-wrap: pretty;
}
.band p + p { margin-top: 1rem; }
.band a { font-weight: 700; text-underline-offset: 0.2em; text-decoration-thickness: 2px; }

/* ── the bar ── */
.nav {
  position: fixed;
  z-index: 50;
  top: 0.75rem;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem;
  border-radius: 999px;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  box-shadow:
    0 0.75rem 2rem -1rem var(--shade),
    0 0.125rem 0.5rem -0.25rem color-mix(in srgb, var(--text-primary) 25%, transparent);
  translate: -50% calc(-100% - 1.5rem);
  transition: translate 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav.is-shown { translate: -50% 0; }
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 0.875rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.nav-mark { gap: 0.4rem; margin-right: 0.5rem; font-size: 1.0625rem !important; font-weight: 800 !important; }
.nav-mark .px-icon { width: 20px; height: 20px; }
.nav-links { display: flex; }
.nav-links a:hover { background: color-mix(in srgb, var(--text-primary) 8%, transparent); }
.nav-cta { margin-left: 0.25rem; font-weight: 700 !important; color: var(--on-primary); background: var(--primary); }
.nav-cta:hover { background: var(--primary-pressed); }
@media (prefers-reduced-transparency: reduce) {
  .nav { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav { translate: -50% 0; opacity: 0; transition: opacity 0.2s ease; }
  .nav.is-shown { opacity: 1; }
}

/* ── how a morning goes: a line of minutes ── */
/* --under is the band's colour where the line runs, near its foot. */
.morning { --under: color-mix(in oklab, var(--blue-light) 70%, var(--blue-deep)); }
/* The heading across the top; under it, what the alarms are and three of them drawn
   like the app's rows. The one picked is the morning the line below plays. */
.morning-head {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 1.75rem clamp(2rem, 1rem + 4vw, 5rem);
  align-items: end;
  margin-bottom: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
}
.morning-head h2 { grid-column: 1 / -1; }
.alarms-side { display: contents; }
.alarms-side .alarms-note { max-width: 26rem; font-size: 1.0625rem; }
.alarms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.alarm {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 0.125rem;
  min-height: 4.5rem;
  padding: 0.75rem 1.25rem;
  border: 0;
  border-radius: var(--row-radius);
  font: inherit;
  text-align: left;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--surface) 65%, transparent);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.alarm:hover { background: var(--surface); }
.alarm-time { font-size: 1.375rem; line-height: 1.27; font-weight: 600; font-variant-numeric: tabular-nums; }
.alarm-sum { font-size: 0.875rem; line-height: 1.3; color: var(--text-muted); }
.alarm[aria-pressed="true"] { color: var(--band-soft); background: var(--band-ink); }
.alarm[aria-pressed="true"] .alarm-sum { color: color-mix(in srgb, var(--band-soft) 78%, transparent); }
.timeline { --span: 30; --fed: 18; --ring: 3rem; --k: 3; }
.track {
  position: relative;
  height: clamp(13rem, 10rem + 6vw, 16rem);
  margin: 0 calc(var(--ring) / 2);
}
.rail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3.5rem;
  height: 6px;
  translate: 0 50%;
  border-radius: 3px;
  background: color-mix(in srgb, var(--band-ink) 14%, transparent);
}
.rail-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--fed) / var(--span) * 100%);
  border-radius: inherit;
  background: var(--band-ink);
  transform-origin: 0 50%;
}
.mark {
  position: absolute;
  left: calc(var(--at) / var(--span) * 100%);
  bottom: 3.5rem;
}
.ring {
  display: grid;
  place-items: center;
  width: var(--ring);
  height: var(--ring);
  translate: -50% 50%;
  border-radius: 50%;
  color: var(--band-soft);
  background: var(--band-ink);
  /* A ring of the band's own colour round each, so the ones that crowd stay apart. */
  box-shadow: 0 0 0 4px var(--under), 0 0.5rem 1rem -0.5rem var(--shade);
}
.ring .px-icon { position: relative; width: 24px; height: 24px; }
.pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px var(--band-ink);
  opacity: 0;
}
.ring.ghost {
  color: color-mix(in srgb, var(--band-ink) 45%, transparent);
  background: color-mix(in oklab, var(--under) 80%, var(--band-ink));
  box-shadow: none;
}
.chip {
  position: absolute;
  top: calc(100% + 0.625rem);
  left: 50%;
  translate: -50% 0;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-primary);
  background: var(--surface);
}
/* He sits on the line, beside his bowl, where the rings stop. */
.fed {
  display: flex;
  align-items: flex-end;
  gap: calc(2px * var(--k));
  translate: -50% 3px;
}
.fed-cat { display: block; width: calc(29px * var(--k)); height: calc(33px * var(--k)); }
.bowl-sprite {
  --cell: 0;
  display: block;
  width: calc(21px * var(--k));
  height: calc(14px * var(--k));
  overflow: hidden;
}
.bowl-sprite img {
  display: block;
  width: calc(84px * var(--k));
  height: 100%;
  translate: calc(var(--cell) * -25%) 0;
}
.end {
  width: 6px;
  height: 2rem;
  translate: -50% 50%;
  border-radius: 3px;
  background: color-mix(in srgb, var(--band-ink) 30%, transparent);
}
.track .t-start, .track .t-end {
  position: absolute;
  top: 0;
  display: grid;
  margin: 0;
  max-width: none;
  font-size: clamp(2.75rem, 1.8rem + 3vw, 4.5rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.track .t-start > span:first-child, .track .t-end > span:first-child {
  margin-bottom: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0;
}
.track .t-start { left: calc(var(--ring) / -2); }
.track .t-end { right: calc(var(--ring) / -2); text-align: right; color: color-mix(in srgb, var(--band-ink) 55%, transparent); }
.track .t-quiet {
  position: absolute;
  left: calc(var(--at) / var(--span) * 100%);
  bottom: calc(3.5rem + var(--ring) / 2 + 1rem);
  translate: -50% 0;
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  color: color-mix(in srgb, var(--band-ink) 70%, transparent);
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem 3rem;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
}
.steps li { transition: opacity 0.4s ease; }
.steps p { font-size: 1.0625rem; }
.is-waiting .steps li { opacity: 0.35; }
.is-waiting .steps li.is-lit { opacity: 1; }

/* ── the playground ── */
.try { --band-ink: var(--c-ink); isolation: isolate; transition: color 0.6s ease; }
.try.is-night { --band-ink: var(--n-ink); }
.try-fields { position: absolute; inset: 0; z-index: -1; }
.try-field {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--c-light), color-mix(in oklab, var(--c-light) 50%, var(--c-deep)));
  transition: opacity 0.6s ease;
}
.try-field.is-night { background: linear-gradient(180deg, var(--n-light), color-mix(in oklab, var(--n-light) 50%, var(--n-deep))); }
.try-field.is-new { opacity: 0; }

/* The room on the left; what to do, and what to pick, beside it. */
.try-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "stage head" "stage pick";
  gap: 2rem clamp(3rem, 1rem + 5vw, 6rem);
  max-width: 72rem;
}
.try-head { grid-area: head; align-self: end; display: grid; gap: 1rem; }
.try-head h2 { font-size: clamp(3rem, 1.6rem + 4.4vw, 6rem); }
.try-status { min-height: 3em; font-size: 1.25rem !important; font-weight: 700; }
.try-stage { grid-area: stage; display: grid; justify-items: center; gap: 1.5rem; }
.try-room {
  display: grid;
  place-items: center;
  width: min(32rem, 42vw);
  aspect-ratio: 128 / 109;
  max-height: 56svh;
}
.try-room canvas {
  --bowl-glow: var(--surface);
  display: block;
  border-radius: var(--row-radius);
  box-shadow: 0 1.75rem 3.5rem -1.5rem var(--shade), 0 0.5rem 1rem -0.5rem var(--shade);
}
.try-food { display: flex; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap; justify-content: center; }
.pellets {
  display: flex;
  gap: 12px;
  padding: 12px 20px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--band-ink) 12%, transparent);
}
.pellet {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: var(--on-feed);
  background: var(--feed);
  box-shadow: 0 0.5rem 1rem -0.4rem var(--shade);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.pellet.is-held { position: relative; z-index: 5; cursor: grabbing; }
.pellet.is-taken { color: var(--text-disabled); background: var(--surface-disabled); box-shadow: none; cursor: default; }
.fill, .pick button {
  min-height: 2.75rem;
  padding: 0 1.1rem;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  color: inherit;
  background: color-mix(in srgb, var(--band-ink) 12%, transparent);
  cursor: pointer;
}
.fill:disabled { opacity: 0.45; cursor: default; }
.fill:not(:disabled):hover, .pick button:hover { background: color-mix(in srgb, var(--band-ink) 20%, transparent); }

.try-pick { grid-area: pick; align-self: start; display: grid; justify-items: start; gap: 1.25rem; }
.pick { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pick button[aria-pressed="true"] { color: var(--c-light); background: var(--band-ink); }
.try.is-night .pick button[aria-pressed="true"] { color: var(--n-light); }
/* The coats are picked by their icons, as in the app's pack sheet. */
.pick-coat { margin-left: -0.4rem; }
.pick-coat button {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  min-height: 0;
  padding: 0.4rem 0.4rem 0.5rem;
  border-radius: 1.25rem;
  background: none;
}
.pick-coat img {
  width: 52px;
  height: 52px;
  border-radius: 22.4%;
  box-shadow: 0 0.4rem 0.9rem -0.45rem var(--shade);
  transition: transform 0.2s ease;
}
.pick-coat span { font-size: 0.8125rem; font-weight: 600; opacity: 0.8; }
.pick-coat button[aria-pressed="true"] { color: inherit; background: color-mix(in srgb, var(--band-ink) 12%, transparent); }
.pick-coat button[aria-pressed="true"] img { transform: scale(1.08); }
.pick-coat button[aria-pressed="true"] span { font-weight: 800; opacity: 1; }
.pick button:disabled { cursor: default; }

/* ── what is sold, and what never is ── */
.packs-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(3rem, 2rem + 3vw, 5rem) clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
.packs-copy { display: grid; gap: 1.5rem; }
.packs-copy p { font-size: var(--t-lead); }
/* The five icons held like a hand of cards; the one pointed at comes up. */
.coat-fan {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 2rem 0 0;
  list-style: none;
}
.coat-fan li {
  --r: 0deg;
  --y: 0rem;
  --w: clamp(4.25rem, 2.5rem + 7vw, 10rem);
  width: var(--w);
  margin: 0 calc(var(--w) * -0.12);
  rotate: var(--r);
  translate: 0 var(--y);
  transform-origin: 50% 120%;
  transition: translate 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), rotate 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.coat-fan li:nth-child(1) { --r: -14deg; --y: 1.75rem; }
.coat-fan li:nth-child(2) { --r: -7deg; --y: 0.5rem; }
.coat-fan li:nth-child(3) { z-index: 1; }
.coat-fan li:nth-child(4) { --r: 7deg; --y: 0.5rem; }
.coat-fan li:nth-child(5) { --r: 14deg; --y: 1.75rem; }
.coat-fan li:hover { z-index: 2; translate: 0 calc(var(--y) - 1.25rem); }
.coat-fan img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22.4%;
  box-shadow: 0 1.5rem 2.5rem -1.25rem var(--shade), 0 0.25rem 0.5rem -0.25rem var(--shade);
}

.bowls-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 2rem 3rem;
  align-items: end;
  padding: clamp(2rem, 1rem + 3vw, 3.5rem);
  border-radius: var(--row-radius);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
}
.bowls-copy h3 { font-size: clamp(1.75rem, 1.35rem + 1.3vw, 2.5rem); line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 1rem; }
.bowls {
  --k: 5;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 5rem 0 0;
  list-style: none;
}
.bowls li { position: relative; display: grid; justify-items: center; }
.drop {
  position: absolute;
  bottom: calc(14px * var(--k) * 0.6);
  left: 50%;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-left: -1.125rem;
  border-radius: 50%;
  color: var(--on-feed);
  background: var(--feed);
  visibility: hidden;
}
.drop .px-icon { width: 18px; height: 18px; }

/* ── firm, never mean ── */
.firm-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 3rem clamp(3rem, 1rem + 5vw, 6rem);
  align-items: center;
}
.points {
  display: grid;
  gap: 2rem;
  margin: clamp(2.5rem, 2rem + 2vw, 4rem) 0 0;
  padding: 0;
  list-style: none;
}
.points li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.points .px-icon {
  width: 3.5rem;
  height: 3.5rem;
  padding: 1rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}
.points h3 { margin-top: 0.25rem; }
.stop-demo { display: grid; gap: 1.25rem; }
.stop-demo > h3 { margin: 0; font-size: clamp(1.75rem, 1.35rem + 1.3vw, 2.5rem); line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; }
/* The app's sheet, in the app's own day colours. */
.sheet {
  display: grid;
  min-height: 19rem;
  padding: 2rem;
  border-radius: var(--row-radius);
  color: var(--text-primary);
  background: var(--surface);
  box-shadow: 0 2rem 4rem -2rem var(--shade), 0 0.5rem 1rem -0.5rem var(--shade);
}
.sheet-ask, .sheet-done { display: grid; align-content: start; gap: 0.75rem; }
.sheet-ask[hidden], .sheet-done[hidden] { display: none; }
.sheet .label {
  margin: 0 0 0.5rem;
  font: 400 0.6875rem / 1.2 var(--mono);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--label);
}
.sheet-title { margin: 0; font-size: 1.375rem !important; line-height: 1.27 !important; font-weight: 600; }
.sheet-body { margin: 0; font-size: 0.9375rem !important; color: var(--text-muted); }
.hold {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 3.5rem;
  margin-top: 1rem;
  overflow: hidden;
  border: 0;
  border-radius: var(--row-radius);
  font: inherit;
  font-weight: 600;
  color: var(--danger);
  background: var(--danger-bg);
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.hold-fill {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--danger) 30%, transparent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.hold span { position: relative; }
.done-mark {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 0.5rem;
  border-radius: 50%;
  color: var(--on-feed);
  background: var(--feed);
}
.again {
  justify-self: start;
  min-height: 2.75rem;
  margin-top: 1rem;
  padding: 0 1.5rem;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  color: var(--on-primary);
  background: var(--primary);
  cursor: pointer;
}
.demo-note { font-size: 0.9375rem !important; font-weight: 600; }

/* ── nothing leaves your phone ── */
.privacy h2 { max-width: 11ch; font-size: var(--t-display); line-height: 0.95; letter-spacing: -0.045em; }
/* What the app does without, each struck through, in steps, like a line drawn in pixels. */
.nopes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem clamp(1.5rem, 1rem + 2vw, 3rem);
  margin: clamp(2.5rem, 2rem + 2vw, 4rem) 0 0;
  padding: 0;
  list-style: none;
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.75rem);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.035em;
}
.nopes li { position: relative; color: color-mix(in srgb, var(--band-ink) 72%, transparent); }
.nopes li::after {
  content: "";
  position: absolute;
  left: -0.06em;
  right: -0.06em;
  top: 52%;
  height: 0.12em;
  background: var(--band-ink);
  transform-origin: 0 50%;
  transition: transform 0.45s steps(9, end);
}
.nopes li:nth-child(2)::after { transition-delay: 0.25s; }
.nopes li:nth-child(3)::after { transition-delay: 0.5s; }
.nopes li:nth-child(4)::after { transition-delay: 0.75s; }
.nopes.is-waiting li::after { transform: scaleX(0); transition: none; }
.privacy-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 3rem;
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
}
.privacy-foot p { font-size: var(--t-lead); max-width: 34rem; }
.more {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0 1.25rem;
  border-radius: 999px;
  text-decoration: none;
  color: var(--text-primary);
  background: var(--surface);
}
.more:hover { background: var(--surface-pressed); }

/* ── questions ── */
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 3rem clamp(3rem, 1rem + 5vw, 6rem);
  align-items: start;
}
.faq-side { position: sticky; top: 6rem; display: grid; gap: 2rem; }
.faq-room { display: grid; place-items: center; width: 100%; aspect-ratio: 128 / 109; max-width: 28rem; }
.faq-room canvas {
  display: block;
  border-radius: var(--row-radius);
  box-shadow: 0 1.75rem 3.5rem -1.5rem rgb(0 0 0 / 0.5);
}
.faq-more { font-size: 1rem !important; opacity: 0.85; }
.faq-list { display: grid; gap: 0.75rem; }
.faq details {
  border-radius: var(--row-radius);
  background: color-mix(in srgb, var(--band-ink) 7%, transparent);
  transition: background 0.2s ease;
}
.faq details[open] { background: color-mix(in srgb, var(--band-ink) 11%, transparent); }
.faq summary {
  text-wrap: balance;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.5rem;
  padding: 1rem 1.25rem 1rem 1.75rem;
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  list-style: none;
  cursor: pointer;
  border-radius: var(--row-radius);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .px-icon { rotate: 90deg; transition: rotate 0.25s ease; opacity: 0.7; }
.faq details[open] summary .px-icon { rotate: -90deg; }
.faq details p { padding: 0 1.75rem 1.75rem; max-width: 40rem; }

/* ── the last word, and the foot ── */
.finale { padding-bottom: clamp(3rem, 2rem + 3vw, 5rem); text-align: center; }
.finale-inner { display: grid; justify-items: center; gap: 2.5rem; }
.finale h2 { max-width: 12ch; font-size: var(--t-display); line-height: 0.95; letter-spacing: -0.045em; }
.finale-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2rem; }
.soon-pill {
  display: inline-flex;
  align-items: center;
  min-height: 3.5rem;
  padding: 0 1.75rem;
  border-radius: 999px;
  font-size: 1.125rem !important;
  font-weight: 700;
  color: var(--text-primary);
  background: var(--surface);
}
.rewatch { font-weight: 600 !important; opacity: 0.85; }
.rewatch:hover { opacity: 1; }

.foot {
  overflow: hidden;
  font-size: 0.9375rem;
  color: var(--white-n-ink);
  background: var(--white-n-deep);
}
.foot-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 3rem;
  padding-top: 2rem;
}
.foot p { margin: 0; font-size: inherit; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.foot-links a { font-weight: 600; text-decoration: none; }
.foot-links a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.foot-ai, .foot-legal { opacity: 0.7; }
/* The name, as wide as the page; the cats' seats are found by footer.js. 31vw is a first
   guess, and footer.js sets --fit so that the word, whatever it is, fills 7/8 of the page. */
.giant {
  --k: 3;
  margin: calc(33px * var(--k) + clamp(2rem, 1rem + 3vw, 4rem)) 0 0 !important;
  padding-bottom: 0.035em;
  font-size: calc(31vw * var(--fit, 1)) !important;
  line-height: 0.74;
  font-weight: 800;
  letter-spacing: -0.055em;
  text-align: center;
  white-space: nowrap;
  color: color-mix(in oklab, var(--white-n-light) 75%, var(--white-n-deep));
  user-select: none;
  -webkit-user-select: none;
}
.giant span { position: relative; display: inline-block; }
.giant .base { display: inline-block; width: 0; height: 0; }
.perch {
  position: absolute;
  will-change: transform;
  width: calc(29px * var(--k));
  height: calc(33px * var(--k));
  translate: -50% 0;
  cursor: pointer;
}

/* ── Privacy and Support: reading pages, on the butter of the morning ── */
.doc-top { padding: 1.25rem 0 0; color: var(--blue-ink); background: var(--blue-light); }
.doc { padding-top: 3rem; }
.prose, .doc-top .wrap { max-width: 46rem; } /* the wordmark stands on the text's own edge */
.prose h1 {
  margin: 0 0 2rem;
  font-size: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.035em;
}
.prose h2 { margin: 3rem 0 0.75rem; font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); line-height: 1.2; letter-spacing: -0.02em; }
.prose ul { margin: 1rem 0 0; padding-left: 1.25rem; }
.prose li { margin: 0.4rem 0; font-size: 1.125rem; line-height: 1.5; }
.prose p { max-width: none; }

@media (max-width: 1023px) {
  .try-grid { grid-template-columns: 1fr; grid-template-areas: "head" "stage" "pick"; justify-items: center; }
  .try-head, .try-pick { justify-items: center; text-align: center; }
  .pick { justify-content: center; }
  .try-room { width: min(100%, 34rem); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .morning-head, .packs-grid, .firm-grid, .faq-grid { grid-template-columns: 1fr; }
  .morning-head { align-items: start; }
  .bowls-panel { grid-template-columns: 1fr; }
  .faq-side { position: static; }
  .faq-room { max-width: 22rem; }
}

@media (max-width: 767px) {
  .nav { width: calc(100% - 1.5rem); justify-content: space-between; }
  .nav-links { display: none; }
  .alarms { grid-template-columns: 1fr; }
  .alarm { display: flex; align-items: baseline; gap: 1rem; min-height: 3.75rem; }
  .timeline { --ring: 2.25rem; --k: 2; --fed: 20.5; }
  .mark { left: calc(var(--at-phone, var(--at)) / var(--span) * 100%); }
  .fed { gap: 0; }
  .ghost:not(.on-phone) { display: none; }
  .track .t-quiet { left: auto; right: calc(var(--ring) / -2); bottom: 0.25rem; translate: none; }
  .ring .px-icon { width: 18px; height: 18px; }
  .ring { box-shadow: 0 0 0 3px var(--under); }
  .chip { display: none; }
  .ring:first-of-type .chip { display: block; }
  .track .t-quiet { font-size: 0.875rem; }
  .track { height: 12rem; }
  .steps { grid-template-columns: 1fr; gap: 1.75rem; }
  .bowls { --k: 3; gap: 0.25rem; padding-top: 4rem; }
  .drop { width: 1.75rem; height: 1.75rem; margin-left: -0.875rem; }
  .pick-coat img { width: 44px; height: 44px; }
  .pick-coat button { padding: 0.3rem 0.25rem 0.4rem; }
  .try-pick { gap: 1rem; }
  .sheet { padding: 1.5rem; min-height: 0; }
}

@media (max-width: 420px) {
  .bowls { --k: 2; }
}