/* =========================================================================
   The Rested Home · bridge styles
   One night, scrolled: the film runs from midnight blue to a cool morning,
   and the rest of the page lives in that morning light.
   Palette: night navy + moonlight + one sage accent (pine on light). No orange, no metallics.
   ========================================================================= */

/* Self-hosted (SIL OFL 1.1, fonts/OFL.txt). Bricolage trimmed to Latin + quotes. */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/bricolage-grotesque.woff2") format("woff2"); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/figtree.woff2") format("woff2"); }

:root {
  /* night (the film) */
  --night-0: #0B1020;         /* stage */
  --night-1: #111831;
  --night-2: #18213D;
  --moon: #E6EBF5;            /* text on night, 16:1 */
  --moon-2: #AEB8CC;          /* 9.6:1 */
  --moon-3: #8792AA;          /* 5.9:1 */
  --hair-n: rgba(230, 235, 245, .14);

  /* morning (the page) */
  --day-0: #EEF1F4;           /* page */
  --day-1: #F8F9FB;           /* raised */
  --day-2: #E2E7ED;           /* inset */
  --ink: #121827;             /* text on day, 15.6:1 */
  --ink-2: #465166;           /* 7.4:1 */
  --ink-3: #5B667B;           /* 5.3:1 */
  --hair-d: rgba(18, 24, 39, .12);
  --hair-d2: rgba(18, 24, 39, .24);

  /* the one accent: sage at night, pine by day */
  --sage: #B9DBB5;
  --sage-soft: #DCEBD8;
  --pine: #24473C;
  --pine-2: #1A3A30;

  /* type */
  --font-display: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-body: 1.1875rem;                         /* 19px: the audience is 34 to 65+, mostly on phones */
  --fs-small: .9375rem;                         /* 15px floor */
  --fs-h1: clamp(2.45rem, 10vw, 4.6rem);
  --fs-h2: clamp(2rem, 7.6vw, 3.4rem);
  --fs-h3: 1.375rem;

  /* space */
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));

  /* shape: soft, like the foam. Controls 12px, media 16px */
  --r-1: 12px;
  --r-2: 16px;

  /* motion: one system */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-press: 140ms;
  --dur-ui: 200ms;
  --dur-move: 260ms;
  --dur-reveal: 700ms;

  /* layers */
  --z-copy: 5;
  --z-route: 12;
  --z-top: 30;
  --z-dock: 40;
  --z-progress: 50;
  --z-grain: 60;
  --z-skip: 70;

  --dock-h: 100px;
  color-scheme: light;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  background: var(--night-0);
}
body {
  margin: 0;
  background: var(--day-0);
  color: var(--ink);
  font: 400 var(--fs-body)/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
a, button, summary { touch-action: manipulation; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 650; letter-spacing: -.022em; text-wrap: balance; font-optical-sizing: auto; }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--pine); outline-offset: 3px; border-radius: 6px; }
.film :focus-visible { outline-color: var(--sage); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }

.skip {
  position: absolute; left: 12px; top: -80px; z-index: var(--z-skip);
  background: var(--moon); color: var(--night-0); padding: 12px 18px; border-radius: var(--r-1);
  font-weight: 700; text-decoration: none; transition: top var(--dur-ui) var(--ease-out);
}
.skip:focus { top: 12px; }

/* grain: fixed, pointer-less, never on a scrolling layer */
body::after {
  content: ""; position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none; opacity: .4;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .55 0 0 0 0 .65 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* reading progress */
.edge-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: var(--z-progress); pointer-events: none; }
.edge-progress span { display: block; height: 100%; background: var(--sage); transform-origin: 0 50%; transform: scaleX(0); transition: background-color 400ms ease; }
.is-day .edge-progress span { background: var(--pine); }
.no-js .edge-progress { display: none; }

/* ---------- top: disclosure + header (scroll away with the hero) ---------- */
.site-top { position: absolute; top: 0; left: 0; right: 0; z-index: var(--z-top); color: var(--moon); }
.disclosure {
  background: rgba(11, 16, 32, .72);
  border-bottom: 1px solid var(--hair-n);
  padding: 8px var(--gutter-r) 8px var(--gutter);
  color: var(--moon-2); font-size: .875rem; line-height: 1.4; text-align: center;
}
.disclosure strong { color: var(--moon); font-weight: 700; }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; padding-bottom: 12px; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; text-decoration: none; }
.mark { width: 34px; height: 34px; flex: none; }
.brand-name { font-family: var(--font-display); font-weight: 650; font-size: 1.15rem; letter-spacing: -.01em; white-space: nowrap; }
.header-note { font-size: var(--fs-small); color: var(--moon-2); white-space: nowrap; }
@media (max-width: 419px) { .header-note { display: none; } }

/* ---------- call to action ---------- */
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 58px; padding: 16px 30px; border-radius: var(--r-1);
  background: var(--sage); color: var(--night-0);
  font: 650 1.1875rem/1.1 var(--font-body); text-decoration: none; white-space: nowrap;
  box-shadow: 0 16px 36px -18px rgba(3, 6, 14, .9), inset 0 -2px 0 rgba(11, 16, 32, .12);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-ui) ease, color var(--dur-ui) ease;
}
.cta svg { width: 20px; height: 20px; fill: currentColor; flex: none; transition: transform var(--dur-ui) var(--ease-out); }
.cta:active { transform: scale(.97); }
.cta.is-going svg { transform: translateX(6px); }
.cta--day, .is-day .dock .cta { background: var(--pine); color: #F4F7F5; box-shadow: 0 16px 36px -20px rgba(18, 36, 30, .7), inset 0 -2px 0 rgba(0, 0, 0, .14); }
@media (hover: hover) and (pointer: fine) {
  .cta:hover { background: #C8E4C4; }
  .cta--day:hover, .is-day .dock .cta:hover { background: var(--pine-2); }
  .cta:hover svg { transform: translateX(3px); }
}

/* =========================================================================
   1. The film
   ========================================================================= */
.film { position: relative; }
.film-stage { position: relative; background: var(--night-0); color: var(--moon); }

/* without JS: a plain, readable column */
.no-js .film-stage { padding: 150px var(--gutter-r) var(--s-8) var(--gutter); }
.no-js .diagram { max-width: 520px; margin: 0 auto var(--s-7); }
.no-js .stage-bg, .no-js .hero-shot, .no-js .film-scrim, .no-js .film-scrim-day, .no-js .route, .no-js .dg-gap { display: none; }
.no-js .chapter { margin: 0 auto var(--s-8); max-width: 560px; }
.no-js .ch-day { color: var(--moon); }

/* with JS: one pinned stage, scroll moves the night along */
.js .film { height: calc(var(--screens, 6) * 100vh); height: calc(var(--screens, 6) * 100svh); }
.js .film-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

.stage-bg, .stage-bg > * { position: absolute; inset: 0; pointer-events: none; }
.stage-bg { background: radial-gradient(120% 80% at 50% 0%, #121B36 0%, var(--night-0) 62%); }
.glow { will-change: transform; }
.glow-a { background: radial-gradient(38% 30% at 78% 18%, rgba(205, 220, 255, .16), rgba(205, 220, 255, 0) 70%); }  /* the moon behind the curtain */
.glow-b { background: radial-gradient(50% 36% at 12% 88%, rgba(185, 219, 181, .07), rgba(185, 219, 181, 0) 70%); }
.seq { width: 100%; height: 100%; mix-blend-mode: screen; opacity: .32; }
.dawn {
  opacity: 0;
  background:
    radial-gradient(90% 70% at 70% 8%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, #DCE5EE 0%, var(--day-0) 70%);
}

/* hero photo: full bleed, fades away as the night begins */
.js .hero-shot { position: absolute; inset: 0; will-change: opacity; }
.hero-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero-shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11, 16, 32, .96) 6%, rgba(11, 16, 32, .5) 48%, rgba(11, 16, 32, .25) 100%); }
.hero-shot.is-missing { display: none; }

/* the diagram */
.js .diagram { position: absolute; left: 0; right: 0; top: 11%; height: 44%; width: 100%; margin: 0; overflow: visible; }
.diagram { --dg-body: #2B3554; --dg-hair: #1A2138; --dg-duvet: #3A4670; --dg-pillow: #A9CDB0; --dg-bed: #1C2541; --dg-line: #E6EBF5; --dg-level: #B9DBB5; }
.dg-view { will-change: transform; }
.dg-mattress-line { fill: none; stroke: var(--dg-line); stroke-opacity: .3; stroke-width: 1.5; }
.dg-torso { fill: var(--dg-body); stroke: var(--dg-line); stroke-opacity: .22; stroke-width: 1.5; }
.dg-head { fill: var(--dg-hair); stroke: var(--dg-line); stroke-opacity: .22; stroke-width: 1.5; }
.dg-neck { fill: none; stroke: var(--dg-body); stroke-width: 30; stroke-linecap: round; }
.dg-neck-edge { fill: none; stroke: var(--dg-line); stroke-opacity: .22; stroke-width: 33; stroke-linecap: round; }
.dg-duvet { fill: var(--dg-duvet); stroke: var(--dg-line); stroke-opacity: .22; stroke-width: 1.5; }
.dg-duvet-fold { fill: none; stroke: var(--dg-line); stroke-opacity: .14; stroke-width: 1.5; stroke-linecap: round; }
.dg-pillow { fill: var(--dg-pillow); }
.dg-level { fill: none; stroke: var(--dg-level); stroke-width: 2; stroke-dasharray: 6 7; stroke-linecap: round; }
.dg-dots circle { fill: var(--dg-line); }
.dg-gap { opacity: 0; }
.dg-gap-line { fill: none; stroke: var(--dg-line); stroke-width: 2; stroke-linecap: round; }
.dg-gap-label { fill: var(--dg-line); font: 600 13px/1 var(--font-body); dominant-baseline: middle; letter-spacing: .02em; }

.film-scrim { position: absolute; inset: auto 0 0 0; height: 62%; pointer-events: none; background: linear-gradient(0deg, rgba(11, 16, 32, .97) 0%, rgba(11, 16, 32, .86) 42%, rgba(11, 16, 32, 0) 100%); }
.film-scrim-day { position: absolute; inset: auto 0 0 0; height: 62%; pointer-events: none; opacity: 0; background: linear-gradient(0deg, rgba(238, 241, 244, .97) 0%, rgba(238, 241, 244, .86) 42%, rgba(238, 241, 244, 0) 100%); }

/* chapters */
.chapters { position: relative; z-index: var(--z-copy); }
.js .chapters { position: absolute; inset: 0; pointer-events: none; }
.js .chapter {
  position: absolute; left: var(--gutter); right: var(--gutter-r);
  bottom: calc(var(--dock-h) + 14px + env(safe-area-inset-bottom, 0px));
  opacity: 0; pointer-events: none; will-change: opacity, transform;
}
.js .chapter.is-on { pointer-events: auto; }
.js .ch-hero { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); opacity: 1; }
.js .chapter[data-ch="4"] { bottom: calc(30px + env(safe-area-inset-bottom, 0px)); } /* carries its own button, the dock steps aside */

.chapter h1 { font-size: var(--fs-h1); line-height: 1.04; margin-bottom: 20px; font-weight: 700; }
.chapter h2 { font-size: var(--fs-h2); line-height: 1.06; margin-bottom: 14px; }
.chapter p { color: var(--moon-2); max-width: 32em; }
.chapter .lede { font-size: 1.1875rem; margin-bottom: 26px; }
.chapter .cta { margin-top: 26px; }
.ch-day h2 { color: var(--ink); }
.ch-day p { color: var(--ink-2); }
.ch-day .cta { background: var(--pine); color: #F4F7F5; }

/* the clock: the night moving forward */
.clock { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.chapter .clock { color: var(--moon); }
.clock-t { font: 300 clamp(3.2rem, 14vw, 5.6rem)/1 var(--font-display); letter-spacing: -.04em; }
.clock-ap { font: 600 1rem/1 var(--font-body); letter-spacing: .08em; color: var(--sage); }
.ch-day .clock { color: var(--ink); }
.ch-day .clock-ap { color: var(--pine); }

/* chapter rail (wide screens) */
.route { display: none; }

/* =========================================================================
   Sections after the film: morning
   ========================================================================= */
section { position: relative; }
.positions, .shape, .offer, .faq { padding: var(--s-9) 0; }
.positions h2, .shape h2, .offer h2, .faq h2, .final h2 { font-size: var(--fs-h2); line-height: 1.08; }
.sub { margin-top: 14px; color: var(--ink-2); max-width: 36em; }
.positions { padding-top: calc(var(--s-9) + 8px); }

/* media slot + fallback card (shown until a photo arrives) */
.media { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--r-2); overflow: hidden; background: var(--day-2); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.fallback { display: none; }
.slot.is-missing img { display: none; }
.slot.is-missing .fallback, .plain-card {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: radial-gradient(80% 70% at 30% 20%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 70%), linear-gradient(160deg, var(--sage-soft), var(--day-2));
  border-radius: inherit;
}
.slot.is-missing .fallback span, .plain-card span {
  font: 650 clamp(2.6rem, 12vw, 4.6rem)/1 var(--font-display); letter-spacing: -.03em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(36, 71, 60, .35);
}

/* ---------- 2. positions ---------- */
.positions-grid { display: grid; gap: 32px; }
.picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 26px; }
.pick {
  appearance: none; min-height: 58px; padding: 12px 18px; border-radius: var(--r-1); cursor: pointer;
  border: 1px solid var(--hair-d2); background: var(--day-1); color: var(--ink);
  font-weight: 650; font-size: 1.0625rem; text-align: left;
  -webkit-user-select: none; user-select: none;
  transition: transform var(--dur-press) var(--ease-out), border-color var(--dur-ui) ease, background-color var(--dur-ui) ease, color var(--dur-ui) ease;
}
.pick:active { transform: scale(.97); }
.pick[aria-pressed="true"] { border-color: var(--pine); background: var(--pine); color: #F4F7F5; }
@media (hover: hover) and (pointer: fine) { .pick:hover { border-color: var(--pine); } }

.pos-stage { display: grid; gap: 40px; }
.pos { margin: 0; display: grid; gap: 20px; align-content: start; }
.js .pos-stage { gap: 0; }
.js .pos { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--dur-move) var(--ease-out), transform var(--dur-move) var(--ease-out), visibility 0s linear var(--dur-move); }
.js .pos.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur-move) var(--ease-out), transform var(--dur-move) var(--ease-out), visibility 0s; }
.pos figcaption h3 { font-size: 1.6rem; line-height: 1.2; margin-bottom: 8px; }
.pos figcaption p { color: var(--ink-2); max-width: 34em; }
.pos--plain .plain-card { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-2); background: linear-gradient(160deg, var(--day-1), var(--day-2)); border: 1px dashed var(--hair-d2); }
.pick-cta { margin-top: 28px; }
.js .pick-cta { grid-row: 2; }
.pick-cta[hidden] { display: none; }

/* ---------- 3. shape (bento: exactly three cells) ---------- */
.shape { background: var(--day-1); border-top: 1px solid var(--hair-d); border-bottom: 1px solid var(--hair-d); }
.bento { display: grid; gap: 14px; margin-top: 36px; }
.cell { margin: 0; border-radius: var(--r-2); padding: 26px; background: var(--day-0); border: 1px solid var(--hair-d); }
.cell h3 { font-size: var(--fs-h3); line-height: 1.25; margin-bottom: 8px; }
.cell p { color: var(--ink-2); font-size: 1.0625rem; }
.cell--photo { padding: 0; overflow: hidden; display: grid; }
.cell--photo .media { border-radius: 0; aspect-ratio: 6 / 5; }
.cell--photo figcaption { padding: 24px 26px 28px; }
.wing-outline { width: 150px; margin-bottom: 22px; }
.wing-outline path { fill: var(--sage-soft); stroke: var(--pine); stroke-width: 2.5; stroke-linejoin: round; }
.wing-outline circle { fill: var(--pine); }
.cell--firm { background: var(--pine); border-color: var(--pine); color: #F4F7F5; }
.cell--firm p { color: #CFE0D6; }

/* ---------- 4. offer ---------- */
.packs { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 12px; }
.pack {
  display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 18px;
  padding: 20px 22px; border-radius: var(--r-2); background: var(--day-1); border: 1px solid var(--hair-d);
}
.qty { font: 300 2.8rem/1 var(--font-display); color: var(--ink-3); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.pack h3 { font-size: 1.3rem; margin-bottom: 4px; }
.pack p { color: var(--ink-2); font-size: 1.0625rem; }
.pack--deep { border-color: var(--pine); box-shadow: inset 4px 0 0 var(--pine); }
.pack--deep .qty { color: var(--pine); font-weight: 450; }
.notes { display: grid; gap: 26px; margin-top: 44px; }
.note { padding-top: 18px; border-top: 1px solid var(--hair-d2); }
.note h3 { font-size: var(--fs-h3); margin-bottom: 6px; }
.note p { color: var(--ink-2); max-width: 30em; }
.offer-cta { margin-top: 40px; }

/* ---------- 5. faq ---------- */
.faq { border-top: 1px solid var(--hair-d); }
.qa { margin-top: 32px; display: grid; column-gap: 56px; }
.qa details { border-top: 1px solid var(--hair-d2); }
.qa summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding: 16px 0; font: 650 1.25rem/1.3 var(--font-display); letter-spacing: -.01em;
  -webkit-user-select: none; user-select: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary svg { width: 22px; height: 22px; fill: var(--pine); flex: none; transition: transform var(--dur-ui) var(--ease-out); }
.qa details[open] summary svg { transform: rotate(45deg); }
.qa details p { color: var(--ink-2); padding: 0 0 22px; max-width: 36em; }
.qa a { color: var(--ink); text-underline-offset: 3px; }

/* ---------- 6. final ---------- */
.final { display: grid; border-top: 1px solid var(--hair-d); overflow: hidden; }
.final-media { position: relative; aspect-ratio: 3 / 2; }
.final-media img { width: 100%; height: 100%; object-fit: cover; }
.final-media.is-missing {
  aspect-ratio: auto; height: 120px;
  background: linear-gradient(180deg, #DCE5EE, var(--day-0));
}
.final-copy { padding-top: var(--s-8); padding-bottom: var(--s-10); text-align: center; }
.final p { color: var(--ink-2); margin: 16px auto 32px; max-width: 30em; }

/* ---------- footer ---------- */
.site-footer { background: var(--day-1); border-top: 1px solid var(--hair-d); padding: 44px 0 calc(var(--dock-h) + 28px + env(safe-area-inset-bottom, 0px)); color: var(--ink-3); font-size: var(--fs-small); line-height: 1.6; }
.site-footer p { margin-bottom: 12px; max-width: 72em; }
.site-footer strong { color: var(--ink-2); }
.site-footer a { color: var(--ink-2); text-underline-offset: 3px; }
.legal { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 8px 0 10px; }
.legal a { display: inline-block; padding: 12px 0; font-weight: 700; color: var(--ink); }

/* ---------- sticky dock: the one action, in reach on phones ---------- */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-dock);
  padding: 14px var(--gutter-r) calc(10px + env(safe-area-inset-bottom, 0px)) var(--gutter);
  transform: translateY(110%); visibility: hidden;
  transition: transform 320ms var(--ease-drawer), visibility 0s linear 320ms;
}
.dock::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(11, 16, 32, .74);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  border-top: 1px solid var(--hair-n);
  transition: background-color 400ms ease, border-color 400ms ease;
}
.is-day .dock::before { background: rgba(238, 241, 244, .8); border-top-color: var(--hair-d); }
.dock.show { transform: none; visibility: visible; transition: transform 320ms var(--ease-drawer), visibility 0s; }
.dock .cta { width: 100%; }
.dock-note { margin-top: 8px; text-align: center; font-size: var(--fs-small); color: var(--moon-2); transition: color 400ms ease; }
.is-day .dock-note { color: var(--ink-2); }

/* ---------- reveal on view (once) ---------- */
.js .rv { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.js .rv.in { opacity: 1; transform: none; }

/* =========================================================================
   Wide screens
   ========================================================================= */
@media (min-width: 880px) {
  :root { --fs-body: 1.1875rem; --gutter: clamp(40px, 6vw, 96px); --gutter-r: clamp(40px, 6vw, 96px); --dock-h: 0px; }
  .positions-grid { grid-template-columns: 5fr 7fr; column-gap: 72px; align-items: start; }
  .positions-ask { position: sticky; top: 64px; }
  .picks { grid-template-columns: 1fr; max-width: 360px; }
  .bento { grid-template-columns: 7fr 5fr; grid-template-rows: auto auto; }
  .cell--photo { grid-row: 1 / span 2; grid-template-columns: 1fr; }
  .cell { padding: 34px; }
  .cell--photo { padding: 0; }
  .cell--photo .media { aspect-ratio: auto; min-height: 360px; }
  /* the ladder rises as the price per pillow falls */
  .packs { grid-template-columns: 1fr 1.15fr 1.35fr; align-items: end; }
  .pack { grid-template-columns: 1fr; align-content: space-between; min-height: 210px; padding: 26px; }
  .pack:nth-child(2) { min-height: 232px; }
  .pack--deep { min-height: 254px; }
  .qty { font-size: 3.6rem; }
  .notes { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .qa { grid-template-columns: 1fr 1fr; align-items: start; }
  .final { grid-template-columns: 1fr; min-height: 78vh; }
  .final-media, .final-copy { grid-area: 1 / 1; }
  .final-media { aspect-ratio: auto; }
  .final-media:not(.is-missing)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(238, 241, 244, .96) 8%, rgba(238, 241, 244, .55) 46%, rgba(238, 241, 244, 0) 80%); }
  .final-media.is-missing { height: auto; }
  .final-copy { position: relative; align-self: end; padding-bottom: 96px; }
  .site-footer { padding-bottom: 48px; }

  /* the dock becomes a small floating button */
  .dock { left: auto; right: 28px; bottom: 28px; padding: 0; transform: translateY(24px); opacity: 0; transition: transform 320ms var(--ease-out), opacity var(--dur-ui) ease, visibility 0s linear 320ms; }
  .dock::before { display: none; }
  .dock.show { transform: none; opacity: 1; transition: transform 320ms var(--ease-out), opacity var(--dur-ui) ease, visibility 0s; }
  .dock .cta { width: auto; min-height: 54px; padding: 14px 24px; }
  .dock-note { display: none; }
}
@media (min-width: 880px) and (min-aspect-ratio: 21/20) {
  /* the diagram takes the left of the stage, the copy sits in a right column */
  .js .diagram {
    left: 6vw; right: auto; width: 52vw; top: 12%; height: 76%; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 78%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 78%, transparent);
  }
  .js .chapter { left: auto; right: calc(max(0px, (100% - 1180px) / 2) + var(--gutter-r)); top: 50%; bottom: auto; width: min(440px, 32vw); }
  .js .ch-hero { left: calc(max(0px, (100% - 1180px) / 2) + var(--gutter)); right: auto; top: auto; bottom: 9vh; width: min(760px, 58vw); }
  .js .chapter[data-ch="4"] { bottom: auto; }
  .chapter h1 { font-size: clamp(3.3rem, 4.8vw, 4.6rem); }
  .film-scrim { inset: 0 0 0 auto; width: 52%; height: auto; background: linear-gradient(270deg, rgba(11, 16, 32, .92) 0%, rgba(11, 16, 32, .7) 50%, rgba(11, 16, 32, 0) 100%); }
  .film-scrim-day { inset: 0 0 0 auto; width: 52%; height: auto; background: linear-gradient(270deg, rgba(238, 241, 244, .92) 0%, rgba(238, 241, 244, .7) 50%, rgba(238, 241, 244, 0) 100%); }
  /* the headline sits bottom left: shade that corner, let the pillow breathe on the right */
  .hero-shot::after { background: linear-gradient(90deg, rgba(11, 16, 32, .86) 0%, rgba(11, 16, 32, .5) 38%, rgba(11, 16, 32, 0) 70%), linear-gradient(0deg, rgba(11, 16, 32, .7) 0%, rgba(11, 16, 32, 0) 45%); }
  .js .route {
    display: flex; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); z-index: var(--z-route);
    flex-direction: column; gap: 4px; padding: 6px; border-radius: 14px;
    background: rgba(11, 16, 32, .5); border: 1px solid var(--hair-n);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transition: background-color 400ms ease, border-color 400ms ease;
  }
  .route button { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 10px; cursor: pointer; background: transparent; transition: transform var(--dur-press) var(--ease-out); }
  .route button span { width: 8px; height: 8px; border-radius: 50%; background: var(--moon-3); transition: transform var(--dur-ui) var(--ease-out), background-color var(--dur-ui) ease; }
  .route button:active { transform: scale(.92); }
  .route button[aria-current="step"] span { background: var(--sage); transform: scale(1.5); }
  .is-day .route { background: rgba(238, 241, 244, .6); border-color: var(--hair-d); }
  .is-day .route button span { background: var(--ink-3); }
  .is-day .route button[aria-current="step"] span { background: var(--pine); }
  @media (hover: hover) and (pointer: fine) { .route button:hover span { background: var(--moon); } }
}

/* short phones (in-app browsers eat the height) */
@media (max-width: 879px) and (max-height: 700px) {
  :root { --fs-h1: clamp(2.15rem, 9vw, 2.7rem); --fs-h2: clamp(1.85rem, 7.6vw, 2.4rem); }
  .chapter .lede { font-size: 1.0625rem; margin-bottom: 18px; }
  .chapter p { font-size: 1.0625rem; }
  .clock-t { font-size: clamp(2.6rem, 12vw, 3.4rem); }
  .js .diagram { top: 11%; height: 36%; }
}

/* =========================================================================
   Preferences
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .js .rv { transform: none; transition: opacity 400ms ease; }
  .js .pos, .js .pos.is-active { transform: none; }
  .js .film-stage.is-cut { animation: cut 420ms var(--ease-out); }
  .dock, .dock.show { transform: none; transition: opacity var(--dur-ui) ease, visibility 0s linear var(--dur-ui); opacity: 0; }
  .dock.show { opacity: 1; transition: opacity var(--dur-ui) ease, visibility 0s; }
}
@keyframes cut { from { opacity: .4; } to { opacity: 1; } }
@media (prefers-reduced-transparency: reduce) {
  .dock::before { background: var(--night-1); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .is-day .dock::before { background: var(--day-1); }
  .disclosure { background: var(--night-1); }
}
@media (prefers-contrast: more) {
  :root { --moon-2: #D3DAE8; --moon-3: #B4BDD0; --ink-2: #2E3748; --ink-3: #3E4859; --hair-d: rgba(18, 24, 39, .3); --hair-d2: rgba(18, 24, 39, .5); }
  body::after { display: none; }
}
@media (forced-colors: active) {
  .cta, .pick { border: 2px solid ButtonText; }
  .route button[aria-current="step"] span { forced-color-adjust: none; }
}