/* WishNap — marketing page. Mobile first. Colors come from tokens.css only.

   Type scale (one of each, on purpose):
   - display 34px → 44px from 900px: the hero h1 and every section h2 share it;
     the hero's real headline is the phone's number (80–92px)
   - finale 56px from 900px: the closing band only, the page's last word
   - item titles 22px (steps, privacy points) and 18px (answers, plan names)
   - captions 15px; legal fine print 13px */

/* ---------- Numerals fallback: self-hosted Nunito (Latin subset, SIL OFL, fonts/OFL.txt).
   Only fetched where ui-rounded (SF Pro Rounded) doesn't exist; nothing comes from a third party. ---------- */
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/nunito-700.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonts/nunito-800.woff2") format("woff2");
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--base);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; height: auto; }
p { margin: 0; }
a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-deep); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
figure { margin: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: 16px; top: -80px; z-index: 50;
  padding: 10px 16px; border-radius: var(--radius-button);
  background: var(--ink); color: var(--base); font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; color: var(--base); }

.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 600px) { .wrap { padding-inline: 32px; } }
@media (min-width: 1100px) { .wrap { padding-inline: 48px; } }

/* ---------- Type ---------- */
.h2 {
  margin: 0;
  font-size: 34px; line-height: 1.08; font-weight: 700; letter-spacing: -0.022em;
  text-wrap: balance;
}
.h3, .step__t { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -0.012em; }
.eyebrow { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.lede { margin-top: 16px; max-width: 32em; font-size: 19px; line-height: 1.45; color: var(--ink-muted); text-wrap: pretty; }
.caption { margin-top: 18px; max-width: 26em; font-size: 15px; line-height: 1.45; color: var(--ink-muted); text-wrap: pretty; }
.fine { font-size: 13px; line-height: 1.5; color: var(--ink-muted); }
@media (min-width: 900px) {
  .h2 { font-size: 44px; }
  .lede { font-size: 20px; }
}

.section { position: relative; padding-block: 64px; }
@media (min-width: 600px) { .section { padding-block: 88px; } }
@media (min-width: 900px) { .section { padding-block: 120px; } }
#for, #how, #privacy, #pricing, #faq { scroll-margin-top: 62px; }
/* A full-width hairline between two sections on the same light ground */
.section--ruled { border-top: 1px solid var(--ink-line); }

/* Heading on the left, content on the right (who it's for, questions) */
.split { display: grid; gap: 40px; }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 72px; align-items: start; }
  .split__head { position: sticky; top: 96px; }
}

/* ---------- App Store badge (52px tall, 60–64px in the hero; clear space ≥ a quarter of its height) ---------- */
.get { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.badge { display: inline-block; padding: 6px; margin: -6px; border-radius: 14px; line-height: 0; }
.badge img { width: 156px; height: 52px; }
.get__note { font-size: 15px; line-height: 1.45; color: var(--ink-muted); }

/* ---------- Header ---------- */
.site-header { position: relative; z-index: 2; }
.site-header__in { display: flex; align-items: center; height: 64px; }
/* The WishNap lockup, primary (terracotta mark, ink word): every spot it sits on is a light ground.
   Byte-identical copy of brand/svg/wishnap-lockup-horizontal-primary.svg, sized by height only
   so it never stretches. Its clear space is one tag width, 0.79 of its height; the brand minimum
   is 22px tall. 28px in the header puts the word's cap height level with the nav links.
   Forced colours (Windows high contrast) with a dark theme turn the slim bar and footer dark, so
   their <picture>s swap in the monochrome white lockup (brand/svg/, byte-identical copy). The
   header keeps primary: it sits on the hero's photo field, a url() image that forced colours keep. */
.wordmark { margin: 0; line-height: 0; text-decoration: none; }
.wordmark img { width: auto; max-width: none; height: 28px; }
.site-nav { display: none; margin-left: auto; }
.site-nav ul { display: flex; gap: 32px; margin: 0; padding: 0; list-style: none; }
.site-nav a { font-size: 15px; font-weight: 500; color: var(--ink-muted); text-decoration: none; }
.site-nav a:hover { color: var(--ink); }
@media (min-width: 720px) { .site-nav { display: block; } }
/* 44px tap targets for the small text links */
a.wordmark, .site-nav a, .privacy__link a, .footer__nav a { display: inline-flex; align-items: center; min-height: 44px; }

/* The slim bar: appears once the hero's badge has scrolled out of view. Its ground is solid
   cream, so over the dark night section nothing shows through behind the primary lockup's
   terracotta mark and the accent link. */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--page-bar);
  box-shadow: 0 0.5px 0 var(--ink-line);
  transform: translate3d(0, -100%, 0); visibility: hidden;
  transition: transform 420ms var(--ease-calm), visibility 0s linear 420ms;
}
.bar.is-on { transform: none; visibility: visible; transition: transform 420ms var(--ease-calm), visibility 0s; }
/* 58px tall so the 22px lockup keeps its 17px clear space from the bar's edges */
.bar__in { display: flex; align-items: center; justify-content: space-between; height: 58px; }
.bar .wordmark img { height: 22px; }
.bar__get {
  display: inline-flex; align-items: center; min-height: 44px; margin-right: -8px; padding: 0 8px;
  font-size: 16px; font-weight: 600; text-decoration: none;
}

/* ---------- Mascot (white-ground clips, multiplied onto the page) ----------
   The still is the resting pose and stays up until the clip is actually playing. */
.mascot { position: relative; display: block; width: var(--m, 120px); height: var(--m, 120px); pointer-events: none; }
.mascot img, .mascot video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; mix-blend-mode: multiply;
  transition: opacity 360ms var(--ease-calm);
}
.mascot video { opacity: 0; }
.mascot.is-live video { opacity: 1; }
.mascot.is-live img { opacity: 0; }

/* ---------- 1 · Hero ---------- */
.hero { position: relative; isolation: isolate; --hh: 64px; }
.hero { padding-bottom: 48px; }
@media (min-width: 960px) { .hero { padding-bottom: 72px; } }
.hero__bg {
  position: absolute; left: 0; right: 0; top: calc(-1 * var(--hh)); bottom: 0;
  overflow: hidden; background: var(--base);
}
.hero__field { position: absolute; inset: 0; background: url("../media/ambient-hero.webp") 50% 40% / cover no-repeat; }
.hero__bg::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26%;
  background: linear-gradient(to bottom, transparent, var(--base));
}

/* Lavender and amber never overlap (mixed, they read pink) */
.blob {
  position: absolute; border-radius: 50%; pointer-events: none;
  animation: drift 42s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
.blob--lav {
  width: 90vw; height: 90vw; max-width: 760px; max-height: 760px; left: -38vw; top: 2%;
  background: radial-gradient(closest-side, var(--lav-700), transparent);
  opacity: 0.35;
}
.blob--amber {
  width: 70vw; height: 70vw; max-width: 620px; max-height: 620px; right: -30vw; top: 50%;
  background: radial-gradient(closest-side, var(--peach), transparent);
  opacity: 0.3; animation-duration: 54s; animation-direction: alternate-reverse;
}
@media (min-width: 960px) {
  .blob--lav { left: -30vw; top: 4%; }
  .blob--amber { right: -24vw; top: 38%; }
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(4vw, 3vh, 0) scale(1.06); }
}

.hero__in { position: relative; display: flex; flex-direction: column; padding-top: 20px; }
/* The copy is one centred column at every width: mascot, headline, subhead, badge and note
   each centre on the column's own axis (from 960px that is the left grid column, not the page). */
.hero__copy { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
/* A soft wash of the base behind the copy, so small text keeps its contrast on the field.
   No z-index or isolation here: the mascot's multiply has to reach the field below. */
.hero__copy::before {
  content: ""; position: absolute; inset: -16% -12%;
  background: radial-gradient(closest-side, var(--page-wash) 50%, transparent);
  pointer-events: none;
}
/* On phones keep the wash inside the 16px gutter (older Safari lacks overflow-x: clip). */
@media (max-width: 599px) { .hero__copy::before { inset: -16% -16px; } }
.hero__copy > * { position: relative; }
/* The breathing mascot anchors the column, centred above the headline. Its clip is white-ground:
   across every frame the drawing spans x 23–78% and y 25.6–78.5% of the square, so the negative
   margins hand back most of the white above the "z"s and below the shadow.
   Never give it (or .hero__copy) a transform, opacity, filter, z-index or isolation: that makes a
   stacking context, the multiply stops reaching the field and the white square shows. */
.mascot--hero { --m: 200px; flex: none; margin: calc(-0.22 * var(--m)) 0 calc(-0.19 * var(--m)); }
.hero__title {
  margin: 0; max-width: 12em;
  font-size: clamp(26px, 7.9vw, 34px); line-height: 1.12; font-weight: 700; letter-spacing: -0.024em;
}
.hero__line { white-space: nowrap; }
.hero__line2 { display: block; text-wrap: balance; }
.hero__sub { margin-top: 14px; max-width: 28em; font-size: 16px; line-height: 1.45; color: var(--ink-muted); text-wrap: balance; }
/* The hero's badge is the one conversion point above the fold, so it runs larger than the others.
   Width comes from the artwork's own 119.66407 × 40 viewBox, so it is never stretched; the gap
   to the note keeps Apple's clear space (a quarter of the badge height). The radius follows the
   artwork's corners out through the 6px padding, for the focus ring. */
.hero .get { --bh: 60px; margin-top: 22px; align-items: center; gap: 18px; }
.hero .badge { border-radius: 18px; }
.hero .badge img { width: calc(var(--bh) * 119.66407 / 40); height: var(--bh); }
.hero .get__note { color: var(--ink); }

.hero__shot { position: relative; margin-top: 28px; display: flex; flex-direction: column; align-items: center; }
.hero__phone .phone { --s: 0.68; --crop: 336px; --fade: 84%; }
/* Phones: the caption tucks into the phone's faded edge, right under the number */
.hero__caption {
  position: relative; margin-top: -16px; max-width: 21em;
  font-size: 15px; line-height: 1.45; color: var(--ink-muted); text-align: center; text-wrap: balance;
}
@media (min-width: 360px) { .hero__phone .phone { --s: 0.78; } }
@media (min-width: 390px) { .hero__phone .phone { --s: 0.85; } }
@media (min-width: 414px) { .hero__phone .phone { --s: 0.9; } }
/* Short phone screens (iPhone SE and friends): headline, badge and note stay above the fold,
   with the top of the phone peeking in under them */
@media (max-width: 599px) and (max-height: 620px) {
  .hero__in { padding-top: 8px; }
  .mascot--hero { --m: 176px; }
  .hero__sub { display: none; }
  .hero__shot { margin-top: 12px; }
}
@media (min-width: 600px) {
  .hero__in { align-items: center; padding-top: 40px; }
  .mascot--hero { --m: 224px; }
  .hero__title { font-size: 44px; max-width: none; }
  .hero__sub { font-size: 18px; }
  .hero .get { --bh: 64px; }
  .hero__phone .phone { --s: 0.9; --crop: 440px; --fade: 72%; }
  .hero__caption { margin-top: 4px; }
}
@media (min-width: 960px) {
  .hero__in {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 56px;
    align-items: center; padding-top: 24px;
  }
  .hero__copy { padding-bottom: 72px; }
  .hero__title { font-size: 40px; max-width: 13em; }
  .mascot--hero { --m: 248px; }
  .hero__shot { margin-top: 0; }
  .hero__phone .phone { --s: 0.96; --crop: 600px; }
  .hero__caption { margin-top: 10px; }
}
@media (min-width: 1200px) {
  .hero__title { font-size: 44px; }
  .mascot--hero { --m: 264px; }
  .hero__phone .phone { --s: 1.12; --crop: 560px; }
}
/* Short windows 600–959px wide: under the tablet rules above, the note's text ends at 550px. Up to
   that height, step the mascot down (the note then ends at 522px); below that, compact like the short
   portrait screens. Headline, badge and note stay in view from 384px tall up. */
@media (min-width: 600px) and (max-width: 959px) and (max-height: 550px) { .mascot--hero { --m: 176px; } }
/* Landscape phones (600–959px wide, all under 500px tall) and windows up to 521px tall */
@media (min-width: 600px) and (max-width: 959px) and (max-height: 521px) {
  .hero__in { padding-top: 8px; }
  .mascot--hero { --m: 176px; }
  .hero__title { font-size: 38px; }
  .hero__sub { display: none; }
}
/* Landscape phones under 600px wide (iPhone SE 1st gen, 568 × 320): the short-phone rules still
   leave a three-line headline under a 176px mascot. Let the headline run two lines and step the
   mascot down so the badge stays in view. */
@media (max-width: 599px) and (max-height: 420px) {
  .mascot--hero { --m: 128px; }
  .hero__title { max-width: none; }
}
/* Short desktop windows: the phone is taller than the viewport, so centring the copy against it
   pushes the badge and note under the fold. Hang the copy from the top of the column instead. */
@media (min-width: 960px) and (max-height: 680px) {
  .hero__copy { align-self: start; padding-bottom: 0; }
}
/* Short desktop windows: step the mascot down only where the full size would push the note (and then
   the badge) under the fold. Each max-height is the last height at which the note's text would not fit
   at the larger size, so any window that fits the full-size mascot (1280 × 558 and up, 1024 × 540 and
   up) keeps it.
   Below 1024px the narrow column wraps the headline onto a third line. In Chrome that happens at 1005px
   and narrower (the second line is 484.8px wide); 1023px leaves headroom for other browsers' fonts. */
@media (min-width: 960px) and (max-width: 1023px) and (max-height: 610px),
       (min-width: 1024px) and (max-width: 1199px) and (max-height: 539px),
       (min-width: 1200px) and (max-height: 557px) {
  .mascot--hero { --m: 176px; }
}
/* Three-line headline in a very short window (960 × 540, say): one more step, so at 960px wide the
   badge stays in view down to 509px tall and the note down to 540px. */
@media (min-width: 960px) and (max-width: 1023px) and (max-height: 567px) { .mascot--hero { --m: 128px; } }

/* ---------- Section heads ---------- */
.sec-head { max-width: 38em; }

/* ---------- 2 · Mechanic ---------- */
/* Phones: heading, then the three steps, then the demo and its timer card */
.mech__grid { display: grid; grid-template-areas: "head" "steps" "demo"; }
.mech__text { display: contents; }
.mech__head { grid-area: head; }
.mech__demo { grid-area: demo; margin-top: 56px; display: flex; flex-direction: column; align-items: center; }
/* The demo and its pause button fit one screen */
.demo-slot { width: min(300px, 80vw); width: min(300px, 80vw, calc((100svh - 130px) * 0.476)); }
.demo-slot .loop-demo { width: 100%; }
.js .loop-demo:empty { aspect-ratio: 417 / 876; border-radius: 16% / 7.6%; background: var(--card-alt); }
.demo-poster { width: 100%; height: auto; }

.demo-steps {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px;
  margin: 14px 0 0; padding: 0; list-style: none;
  font-size: 14px; line-height: 1.2; font-weight: 600; color: var(--ink-soft);
}
.demo-steps li { padding: 7px 12px; border-radius: var(--radius-pill); transition: background-color 500ms var(--ease-calm), color 500ms var(--ease-calm); }
.demo-steps li.is-active { background: var(--ink); color: var(--base); }
.demo-caption { text-align: center; }
.demo-caption__still { display: none; }

.naps {
  width: 100%; max-width: 360px; margin-top: 32px; padding: 20px 20px 18px;
  background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
.naps__label { margin-bottom: 6px; font-size: 15px; font-weight: 600; color: var(--ink-soft); }
/* Phones: the four tiers as a 2 × 2 grid */
.naps__list { margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
.naps__list div { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.naps__list dt, .naps__list dd {
  font-family: var(--font-num); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.naps__list dt { color: var(--ink-muted); }
.naps__list dd { margin: 0; font-weight: 700; }
.naps__foot { margin-top: 12px; font-size: 15px; line-height: 1.45; color: var(--ink-muted); }
@media (min-width: 600px) {
  .naps__list { display: block; }
  .naps__list div { flex-direction: row; justify-content: space-between; gap: 16px; padding: 11px 0; }
}

.nightstand { display: none; }

.steps { grid-area: steps; list-style: none; margin: 48px 0 0; padding: 0; display: flex; flex-direction: column; gap: 36px; }
.step {
  display: grid; grid-template-columns: 40px auto minmax(0, 1fr); grid-template-areas: "n t blob" ". p p";
  column-gap: 16px; align-items: start;
}
.step__body { display: contents; }
.step__t { grid-area: t; margin: 5px 0 6px; }
.step__body p { grid-area: p; max-width: 28em; color: var(--ink-muted); }
.step__n {
  grid-area: n; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--card); box-shadow: var(--shadow-card); color: var(--ink);
  font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 700;
  transition: background-color 700ms var(--ease-calm), color 700ms var(--ease-calm);
}
.step.is-active .step__n { background: var(--ink); color: var(--base); }
.mascot--step { grid-area: blob; justify-self: start; --m: 120px; margin: -54px 0 -66px -8px; }
@media (min-width: 600px) {
  .mascot--step { --m: 132px; margin: -66px 0 -80px -8px; }
}
/* From 720px: the steps beside the demo, and they stay in view while it plays */
@media (min-width: 720px) {
  .mech__grid {
    grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "text demo";
    column-gap: 48px; align-items: start;
  }
  /* sticky makes a stacking context: paint the base inside it so the mascots' multiply has a ground */
  .mech__text { display: block; grid-area: text; position: sticky; top: max(72px, calc(50vh - 330px)); background: var(--base); }
  .mech__demo { margin-top: 0; }
  .demo-slot { width: 300px; }
  .demo-steps { display: none; }
  .steps { margin-top: 56px; gap: 44px; }
}
@media (min-width: 960px) {
  .mech__grid { grid-template-columns: minmax(0, 1fr) 400px; column-gap: 64px; }
  .demo-slot { width: 392px; }
  .steps { margin-top: 64px; gap: 52px; }
  .mascot--step { --m: 140px; margin: -76px 0 -94px -4px; }
  .nightstand { display: block; width: 100%; max-width: 360px; margin-top: 56px; }
  .nightstand img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-card); box-shadow: var(--shadow-card); background: var(--card-alt); }
}

/* ---------- 3 · The moment (night) ---------- */
.moment { background: var(--night-ground); color: var(--night-text); overflow: hidden; isolation: isolate; }
.moment__bg { position: absolute; inset: 0; }
.moment__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; opacity: 0.85; }
.moment .eyebrow { color: var(--night-answer); }
.moment .lede { color: var(--night-muted); }
.moment__grid { position: relative; display: grid; grid-template-areas: "head" "shot" "answers"; }
.moment__head { grid-area: head; }
.moment__shot { grid-area: shot; position: relative; justify-self: center; margin-top: 48px; }
.moment__shot::before {
  content: ""; position: absolute; inset: -18% -40%; pointer-events: none;
  background: radial-gradient(closest-side, var(--sc-night-glow), transparent);
}
/* Two classes, so it beats screens.css's `.phone { --s }`, which loads later */
.moment .phone--night { --s: 0.68; box-shadow: 0 0 0 1px var(--page-night-edge), 0 0 80px var(--sc-night-glow), 0 30px 90px var(--page-scrim); }
@media (min-width: 360px) { .moment .phone--night { --s: 0.72; } }
@media (min-width: 600px) { .moment .phone--night { --s: 0.88; } }
.moment__answers { grid-area: answers; margin-top: 48px; }
.answers { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--page-night-line); }
.answers li { display: flex; flex-direction: column; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--page-night-line); }
.answers__b { font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--night-answer); }
.answers__c { font-size: 16px; line-height: 1.45; color: var(--night-muted); }
.micro { margin-top: 28px; display: flex; flex-direction: column; gap: 10px; max-width: 30em; }
.micro p { font-size: 15px; line-height: 1.45; color: var(--night-muted); }
.moment .get { margin-top: 40px; }
@media (min-width: 960px) {
  .moment__grid {
    grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "shot head" "shot answers";
    grid-template-rows: auto 1fr; column-gap: 96px;
  }
  .moment__shot { margin-top: 0; }
  .moment__head { align-self: end; }
  .moment .phone--night { --s: 0.96; }
  .moment__answers { max-width: 480px; }
}

/* ---------- 4 · What you kept ---------- */
.kept__grid { display: grid; gap: 48px; }
.shelf { margin-top: 36px; }
.shelf img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-card); box-shadow: var(--shadow-card); background: var(--card-alt); }
.shot { display: flex; flex-direction: column; align-items: center; }
/* Captions clear the phones' drop shadow */
.shot .caption { margin-top: 32px; text-align: center; }
.pro-tag {
  display: inline-block; margin-right: 4px; padding: 2px 8px; border-radius: 8px;
  background: var(--page-chip); color: var(--accent-deep);
  font-size: 13px; line-height: 1.35; font-weight: 600; vertical-align: 1px;
}
/* Phones: the two screens side by side in a row that scrolls, the second one peeking in */
.kept__phones {
  display: flex; gap: 16px; align-items: flex-start;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
  margin-inline: -16px; padding: 8px 16px 104px; margin-bottom: -72px;
  scrollbar-width: none;
}
.kept__phones::-webkit-scrollbar { display: none; }
.kept__phones:focus-visible { outline-offset: -2px; }
.kept__phones .shot { flex: none; width: calc(417px * 0.62); scroll-snap-align: start; }
.kept .phone { --s: 0.62; }
.patterns__map .phone { --s: 0.68; }
@media (min-width: 375px) { .patterns__map .phone { --s: 0.78; } }
@media (min-width: 600px) {
  .kept__phones { margin-inline: -32px; padding-inline: 32px; scroll-padding-inline: 32px; }
}
@media (min-width: 700px) {
  .kept__copy { display: grid; grid-template-columns: minmax(0, 1fr) 40%; column-gap: 40px; align-items: end; }
  .shelf { margin-top: 0; }
  .shelf img { aspect-ratio: 3 / 2; }
  .kept__phones {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; justify-items: center; align-items: start;
    overflow: visible; margin: 0; padding: 0;
  }
  .kept__phones .shot { width: auto; }
  .kept .phone { --s: 0.66; }
  .shot--b { margin-top: 112px; }
}
@media (min-width: 1040px) {
  .kept__grid { grid-template-columns: minmax(0, 4.4fr) minmax(0, 7fr); column-gap: 64px; align-items: start; }
  .kept__copy { display: block; padding-top: 24px; }
  .shelf { margin-top: 40px; }
  .kept .phone { --s: 0.62; }
}
@media (min-width: 1200px) { .kept .phone { --s: 0.7; } }

/* ---------- 5 · Patterns ---------- */
.patterns { isolation: isolate; }
.patterns__bg { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, var(--base), var(--card-alt) 50%, var(--base)); }
.patterns__grid { display: grid; grid-template-areas: "copy" "story" "map"; row-gap: 48px; }
.patterns__copy { grid-area: copy; }
.pro-note { margin-top: 20px; font-size: 15px; color: var(--ink-muted); max-width: 30em; }
.patterns__map { grid-area: map; }
.story { grid-area: story; min-width: 0; }
.story__row {
  display: flex; gap: 16px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
  /* room for the phones' 28px/64px shadow inside the scroller, so it isn't cut in a straight line */
  margin-inline: -16px; padding: 8px 16px 104px; margin-bottom: -72px;
  scrollbar-width: none;
}
.story__row::-webkit-scrollbar { display: none; }
.story__row:focus-visible { outline-offset: -2px; }
.story__item { flex: none; scroll-snap-align: start; }
.story .phone { --s: 0.6; }
.story__cap { margin-top: 0; }
/* On the patterns gradient, inside the phones' shadow: captions in ink */
.patterns .caption { color: var(--ink); }
/* Phones: the map's board without its quiet-hours card and tab bar */
@media (max-width: 699px) {
  .patterns__map .phone {
    --crop: 696px; --fade: 92%;
    height: calc(var(--crop) * var(--s));
    border-radius: calc(67px * var(--s)) calc(67px * var(--s)) 0 0;
    box-shadow: none;
    -webkit-mask-image: linear-gradient(to bottom, var(--ink) var(--fade), transparent 100%);
            mask-image: linear-gradient(to bottom, var(--ink) var(--fade), transparent 100%);
  }
  .patterns__map .caption { margin-top: 8px; }
}
@media (min-width: 600px) {
  .story__row { margin-inline: -32px; padding-inline: 32px; scroll-padding-inline: 32px; gap: 24px; }
}
@media (min-width: 1100px) {
  .patterns__grid {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "copy map" "story story";
    column-gap: 64px; row-gap: 56px; align-items: start;
  }
  .patterns__copy { padding-top: 72px; }
  .story__row { overflow: visible; margin: 0; padding: 0 0 28px; justify-content: space-between; gap: 24px; }
  .story .phone { --s: 0.55; }
  .story__cap { margin-inline: auto; text-align: center; }
  .patterns__map .phone { --s: 0.74; }
}
@media (min-width: 1200px) { .story .phone { --s: 0.58; } }

/* ---------- 6 · Privacy ---------- */
.privacy__band {
  position: relative; min-height: 440px; display: flex; align-items: flex-end;
  background: var(--night-ground); color: var(--night-text); overflow: hidden;
}
.privacy__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.privacy__scrim { position: absolute; inset: 0; background: linear-gradient(to top, var(--page-scrim) 0%, var(--page-scrim) 30%, var(--page-scrim-0) 78%); }
.privacy__over { position: relative; padding-block: 56px 48px; }
.privacy .eyebrow { color: var(--night-answer); }
.privacy__head .h2 { color: var(--night-text); }
.privacy__head .lede { color: var(--night-answer); }
.privacy__body { padding-block: 56px 72px; }
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px; }
.points li { padding-top: 20px; border-top: 1px solid var(--hairline); font-size: 17px; line-height: 1.55; color: var(--ink-muted); max-width: 30em; }
.points strong { display: block; margin-bottom: 6px; font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -0.012em; color: var(--ink); }
.privacy__link { margin-top: 40px; font-size: 17px; font-weight: 600; }
@media (min-width: 700px) {
  .privacy__band { min-height: 600px; }
  .privacy__over { padding-block: 64px 52px; }
  .privacy__body { padding-block: 72px 104px; }
  .points { grid-template-columns: 1fr 1fr; column-gap: 48px; row-gap: 52px; }
  .privacy__link { margin-top: 56px; }
}
@media (min-width: 960px) {
  .privacy__band { min-height: min(88vh, 820px); align-items: center; }
  .privacy__img { object-position: 50% 50%; }
  .privacy__scrim { background: linear-gradient(to left, var(--page-scrim) 0%, var(--page-scrim) 42%, var(--page-scrim-0) 72%); }
  .privacy__head { margin-left: auto; max-width: 470px; }
  .privacy__body { padding-block: 120px 150px; }
  .points { grid-template-columns: repeat(3, 1fr); column-gap: 56px; row-gap: 72px; }
}

/* ---------- 7 · Pricing ---------- */
.pricing { overflow: hidden; isolation: isolate; }
.pricing__bg { position: absolute; inset: 0; z-index: -1; }
.pricing__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: 0.4; }
/* The field fades to the base above and below, so the plans and the fine print sit on the calm ground */
.pricing__bg::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, var(--base) 0%, transparent 18%, transparent 46%, var(--base) 82%);
}
.pricing .eyebrow { color: var(--ink-muted); }
.pricing__grid { display: grid; gap: 28px; margin-top: 48px; }

.estimate {
  padding: 26px 22px 24px; border-radius: var(--radius-card);
  background: var(--card); box-shadow: var(--shadow-lift);
}
.estimate__fallback { margin-top: 12px; color: var(--ink-muted); }
.estimate__prompt { display: block; margin-top: 12px; max-width: 34em; color: var(--ink-muted); line-height: 1.45; }
.estimate__q { margin-top: 2px; color: var(--ink); font-weight: 600; }
.estimate__readout { margin-top: 22px; display: flex; align-items: baseline; gap: 10px; }
.estimate__readout .num { font-size: 60px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.estimate__unit { font-size: 19px; font-weight: 600; color: var(--ink-muted); }
.estimate__result { margin-top: 18px; display: flex; flex-direction: column; gap: 6px; text-wrap: pretty; }
.estimate__result p:first-child { font-size: 17px; font-weight: 600; color: var(--ink); }
.estimate__one { color: var(--ink-muted); }
.estimate .fine { margin-top: 18px; }

/* The slider: a 44px thumb to grab, drawn as a 28px disc with a terracotta ring */
.range {
  --p: 10%;
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 44px; margin: 10px 0 0; padding: 0;
  background: transparent; cursor: pointer; touch-action: pan-y;
}
.range:focus { outline: none; }
.range:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
.range::-webkit-slider-runnable-track {
  height: 8px; border-radius: 8px;
  background: linear-gradient(to right, var(--amber) 0 var(--p), var(--goal-track) var(--p) 100%);
  box-shadow: inset 0 0 0 1px var(--ink-faint);
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  box-sizing: border-box; width: 44px; height: 44px; margin-top: -18px;
  border: 8px solid transparent; border-radius: 50%;
  background: var(--card); background-clip: padding-box;
  box-shadow: inset 0 0 0 3px var(--accent);
}
.range::-moz-range-track { height: 8px; border-radius: 8px; background: var(--goal-track); box-shadow: inset 0 0 0 1px var(--ink-faint); }
.range::-moz-range-progress { height: 8px; border-radius: 8px; background: var(--amber); }
.range::-moz-range-thumb {
  box-sizing: border-box; width: 44px; height: 44px;
  border: 8px solid transparent; border-radius: 50%;
  background: var(--card); background-clip: padding-box;
  box-shadow: inset 0 0 0 3px var(--accent);
}

/* Plans: Free on its own; Annual and Monthly grouped as WishNap Pro under what Pro includes */
.plans, .plans__pair { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.plans { gap: 20px; }
.plan { padding: 20px 22px; border-radius: var(--radius-card); background: var(--card); box-shadow: var(--shadow-card); }
.plan__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.plan__name { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 700; }
.plan__tag { padding: 3px 8px; border-radius: 8px; background: var(--page-chip); color: var(--accent-deep); font-size: 13px; line-height: 1.3; font-weight: 600; }
.plan__line { margin-top: 6px; color: var(--ink-muted); }
.plan__price { margin-top: 6px; font-size: 17px; font-weight: 600; color: var(--ink-muted); }
.plan__price .num { font-size: 36px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin-right: 2px; }
.plan__note { margin-top: 2px; font-size: 15px; color: var(--ink-muted); }
.plans__includes { margin-bottom: 12px; font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.plans__inc-l { font-weight: 600; color: var(--ink); }
.plans__under { margin-top: 14px; font-weight: 600; text-wrap: pretty; }
.plans-col .get { margin-top: 32px; }
/* Phones: the closing band's badge follows within a screen, so this one would only repeat it */
.pricing__get { display: none; }
@media (min-width: 960px) { .pricing__get { display: flex; } }
.pricing__fine { display: flex; flex-direction: column; gap: 8px; max-width: 46em; }
.pricing__fine a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.pricing__fine p:last-child { margin-top: -10px; margin-bottom: -12px; }
@media (min-width: 600px) {
  .estimate { padding: 34px 36px 30px; }
  .estimate__readout .num { font-size: 72px; }
  .plans__pair { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .pricing__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "est plans" "fine plans";
    grid-template-rows: auto 1fr; column-gap: 32px; row-gap: 32px; align-items: start; margin-top: 64px;
  }
  .estimate { grid-area: est; padding: 44px 48px 40px; }
  .plans-col { grid-area: plans; }
  .pricing__fine { grid-area: fine; max-width: 44em; padding-inline: 4px; }
  .estimate .h3 { font-size: 26px; }
  .estimate__readout .num { font-size: 88px; }
}

/* ---------- Closing band ---------- */
.closing { position: relative; isolation: isolate; overflow: hidden; padding-block: 80px 88px; text-align: center; }
.closing__bg { position: absolute; inset: 0; z-index: -1; background: var(--lav-100); }
.closing .blob--lav { left: -30vw; top: -40%; opacity: 0.45; }
.closing .blob--amber { right: -30vw; top: 45%; opacity: 0.4; background: radial-gradient(closest-side, var(--amber), transparent); }
.closing__in { display: flex; flex-direction: column; align-items: center; }
.closing .lede { margin-top: 12px; color: var(--ink); }
.closing .get { margin-top: 32px; align-items: center; }
.closing .get__note { color: var(--ink); }
@media (min-width: 900px) {
  .closing { padding-block: 168px 176px; }
  .closing .h2 { font-size: 56px; }
  .closing .blob--lav { left: -20vw; top: -30%; }
  .closing .blob--amber { right: -18vw; top: 20%; }
}

/* ---------- Who it's for ---------- */
.traits { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.traits li { padding-top: 20px; border-top: 1px solid var(--ink-line); }
.traits__t { margin: 0 0 8px; font-size: 19px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
.traits p { max-width: 30em; font-size: 17px; line-height: 1.55; color: var(--ink-muted); text-wrap: pretty; }
@media (min-width: 640px) { .traits { grid-template-columns: 1fr 1fr; column-gap: 32px; row-gap: 40px; } }

/* ---------- Questions ---------- */
.faq .lede a { color: inherit; text-underline-offset: 3px; }
.qa { border-bottom: 1px solid var(--ink-line); }
.qa details { border-top: 1px solid var(--ink-line); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 64px; padding-block: 18px; cursor: pointer; list-style: none;
  font-size: 18px; line-height: 1.35; font-weight: 600; color: var(--ink);
}
.qa summary::-webkit-details-marker { display: none; }
/* A plus that turns into a minus when the answer is open */
.qa summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
  color: var(--ink-soft); transition: transform 300ms var(--ease-calm);
}
.qa details[open] summary::after { transform: rotate(90deg); background-size: 14px 2px, 0 0; }
.qa summary:hover { color: var(--accent-deep); }
.qa summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.qa details p { max-width: 36em; padding-bottom: 24px; margin-top: -4px; font-size: 17px; line-height: 1.55; color: var(--ink-muted); text-wrap: pretty; }

/* ---------- Footer ---------- */
.site-footer { padding-block: 48px 40px; background: var(--base); color: var(--ink-muted); font-size: 14px; line-height: 1.55; }
.footer__top { display: flex; flex-direction: column; gap: 20px; padding-bottom: 32px; }
/* The lockup at 24px; the tagline sits a full clear space (19px) below it */
.footer__brand .wordmark img { height: 24px; }
.footer__brand p:last-child { margin-top: 20px; }
.footer__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 28px; }
.footer__nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; }
.footer__nav a:hover { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.footer__bottom { display: flex; flex-direction: column; gap: 6px; padding-top: 24px; border-top: 1px solid var(--ink-line); }
.footer__tm { margin-top: 16px; max-width: 72em; font-size: 12px; color: var(--ink-soft); }
@media (min-width: 900px) {
  .footer__top { flex-direction: row; align-items: center; justify-content: space-between; }
  .footer__bottom { flex-direction: row-reverse; justify-content: space-between; gap: 32px; }
}

/* ---------- Scroll reveal (headings and phones only) ---------- */
.reveal-on .reveal {
  opacity: 0; transform: translate3d(0, 20px, 0);
  transition: opacity var(--dur-rise) var(--ease-calm), transform 1100ms var(--ease-calm);
}
.reveal-on .reveal.is-in { opacity: 1; transform: none; }

@media print {
  .reveal-on .reveal { opacity: 1; transform: none; }
  /* The hero keeps its plain base ground (it reaches up under the header), so the mascot's
     multiply still has something to land on; only the field, blobs and grain go. */
  .hero__bg > *, .hero__bg::after, .moment__bg, .pricing__bg, .closing__bg, .mascot video, .bar { display: none; }
  /* The clip is hidden, so bring the still back (the hero mascot takes up space in the column) */
  .mascot.is-live img { opacity: 1; }
}

/* ---------- Reduced motion: everything still, numbers final ---------- */
@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; }
  .reveal-on .reveal { opacity: 1; transform: none; transition: none; }
  .step__n, .demo-steps li, .mascot img, .mascot video, .bar { transition: none; }
  .demo-steps { display: none; }
  .demo-caption__motion { display: none; }
  .demo-caption__still { display: inline; }
}