/*
 * Mipkin — the site, third cut: the production.
 *
 * The first cut was a dark gallery; the second was a tidy template. This one takes the
 * actual lesson from Finch, Tolan, and Ahead: scale and staging. A drawn room for a
 * hero with the cast standing in it. A giant word the spirits climb on. Full-bleed
 * colour-blocked panels, one per room, instead of tinted washes. The refusals as an
 * editorial spread with the words struck through. One deliberate night scene where the
 * painted rooms glow. A sunset door with the whole cast waiting under it.
 *
 * Standing constraints: the deployed CSP allows no JavaScript and no inline styles, so
 * every behaviour is CSS (scroll reveals behind @supports, FAQ on <details>, marquee on
 * a keyframe). Fonts are self-hosted (SIL OFL). The cast is drawn once as SVG symbols
 * in index.html and reused; the animation rules below match the symbol originals, which
 * is how <use> instances pick them up. Text-size colours are held to WCAG AA.
 */

/* ── Fonts ──────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-var.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-italic-var.woff2') format('woff2');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Alegreya Sans';
  src: url('/fonts/alegreya-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Alegreya Sans';
  src: url('/fonts/alegreya-sans-italic-400.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Alegreya Sans';
  src: url('/fonts/alegreya-sans-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Alegreya Sans';
  src: url('/fonts/alegreya-sans-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ─────────────────────────────────────────────────────────────── */

:root {
  --ground: #fbf1e2;
  --ground-deep: #f3ddbe;
  --panel: #fffcf6;
  --panel-edge: #eeddc2;

  --ink: #42304a;
  --ink-soft: #5d4a66;
  --muted: #7b6884;

  --coral: #ff8a5b;
  --coral-deep: #b04e1e;
  --on-coral: #40210f;

  --gold: #e8a33d;
  --mint: #3fbf8f;
  --mint-deep: #1e7a58;
  --peri: #8e7be8;
  --peri-deep: #6753c4;
  --quiet-deep: #46689e;

  --night: #2e2233;
  --night-deep: #241a3e;
  --parchment: #f4ecdd;

  --display: 'Fraunces', 'Iowan Old Style', Palatino, Georgia, serif;
  --body: 'Alegreya Sans', 'Gill Sans', 'Segoe UI', system-ui, sans-serif;
  --ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;

  --measure: 36rem;
  --radius: 24px;
  --shadow-soft: 0 20px 50px -22px rgba(90, 58, 40, 0.35);
}

/* ── Ground ─────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17.5px;
  line-height: 1.68;
  overflow-x: hidden;
}

/* Paper grain over everything, very quiet. */
body::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  content: '';
  inset: 0;
  mix-blend-mode: multiply;
  opacity: 0.03;
  pointer-events: none;
  position: fixed;
  z-index: 60;
}

.cast-defs { height: 0; position: absolute; width: 0; }

::selection { background: var(--coral); color: var(--on-coral); }

img { display: block; height: auto; max-width: 100%; }

a { color: var(--coral-deep); text-decoration-color: rgba(176, 78, 30, 0.4); text-underline-offset: 3px; }

a:hover { color: #8c3a12; }

:focus-visible { border-radius: 4px; outline: 2px solid var(--coral-deep); outline-offset: 3px; }

.wrap { margin: 0 auto; max-width: 76rem; padding: 0 1.5rem; }

.skip {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 999px;
  color: var(--ink);
  left: 1rem;
  padding: 0.6rem 1.1rem;
  position: fixed;
  text-decoration: none;
  top: -4rem;
  transition: top 0.2s ease;
  z-index: 200;
}

.skip:focus-visible { top: 1rem; }

/* ── Type ───────────────────────────────────────────────────────────────── */

h1, h2, h3 {
  color: var(--ink);
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 540;
  letter-spacing: -0.016em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}

h2 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); }

h2 em { color: var(--coral-deep); font-style: italic; font-weight: 480; }

.eyebrow {
  color: var(--coral-deep);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  margin: 0 0 1.1rem;
  text-transform: uppercase;
}

.eyebrow-center { text-align: center; }

.section-lede {
  color: var(--ink-soft);
  font-size: 1.15rem;
  margin: 1.2rem 0 0;
  max-width: var(--measure);
}

.lede-center { margin-inline: auto; text-align: center; }

.band { padding: 6.5rem 0; position: relative; scroll-margin-top: 4.5rem; }

.band-head { margin-bottom: 3.2rem; }

.band-head-center { display: grid; justify-items: center; text-align: center; }

.band-head-center .section-lede { margin-inline: auto; }

/* ── Header ─────────────────────────────────────────────────────────────── */

header.site {
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  background: rgba(251, 241, 226, 0.85);
  border-bottom: 1px solid rgba(94, 62, 42, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.bar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.5rem;
  justify-content: space-between;
  padding-bottom: 0.8rem;
  padding-top: 0.8rem;
}

.mark {
  align-items: center;
  color: var(--ink);
  display: inline-flex;
  font-family: var(--display);
  font-size: 1.18rem;
  font-weight: 560;
  gap: 0.6rem;
  text-decoration: none;
}

.mark svg { display: block; }

nav.site { align-items: center; display: flex; flex-wrap: wrap; gap: 0.4rem 1.35rem; }

nav.site a {
  color: var(--ink-soft);
  font-size: 0.94rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
}

nav.site a:hover, nav.site a:focus-visible { color: var(--coral-deep); }

nav.site .nav-cta {
  background: var(--coral);
  border-radius: 999px;
  color: var(--on-coral);
  font-weight: 700;
  padding: 0.38rem 1rem;
}

nav.site .nav-cta:hover { background: var(--coral-deep); color: #fff3e8; }

/* ── Hero: the room ─────────────────────────────────────────────────────── */

.hero {
  overflow: clip;
  padding: clamp(2rem, 5vh, 4rem) 0 0;
  position: relative;
}

.hero-room { inset: 0; pointer-events: none; position: absolute; }

.hero-window {
  opacity: 0.98;
  position: absolute;
  right: clamp(-4rem, 2vw, 6rem);
  top: 4%;
  width: clamp(300px, 34vw, 500px);
}

@media (max-width: 60rem) {
  .hero-window { opacity: 0.45; right: -16vw; top: 0; width: 64vw; }
}

.hero-sprig {
  left: -1.5rem;
  position: absolute;
  top: -0.5rem;
  width: clamp(90px, 10vw, 150px);
}

.sun { animation: sun-breathe 6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }

@keyframes sun-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.cloud { animation: cloud-drift 14s ease-in-out infinite alternate; }

.cloud-b { animation-delay: -7s; }

@keyframes cloud-drift {
  from { transform: translateX(-14px); }
  to { transform: translateX(18px); }
}

.hero-floor {
  background: var(--ground-deep);
  border-top: 3px solid #e6c99e;
  bottom: 0;
  height: clamp(84px, 12vh, 140px);
  left: 0;
  position: absolute;
  right: 0;
}

.hero-grid {
  align-items: end;
  display: grid;
  gap: 2rem 2.5rem;
  grid-template-columns: minmax(0, 1fr);
  position: relative;
  z-index: 2;
}

@media (min-width: 60rem) {
  .hero-grid { grid-template-columns: 1.04fr 0.96fr; }
}

.hero-copy { padding-bottom: clamp(7rem, 16vh, 11rem); padding-top: clamp(1.5rem, 4vh, 3.5rem); }

.hero h1 {
  font-size: clamp(3rem, 6.6vw, 5.6rem);
  letter-spacing: -0.02em;
  line-height: 0.99;
  margin: 0 0 1.4rem;
}

.hero h1 em { color: var(--coral-deep); font-style: italic; font-weight: 470; }

.lede {
  color: var(--ink-soft);
  font-size: 1.16rem;
  margin: 0 0 2rem;
  max-width: 33rem;
}

.actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }

.actions-center { justify-content: center; }

.button {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 1rem;
  font-weight: 700;
  gap: 0.55rem;
  min-height: 3.1rem;
  padding: 0 1.5rem;
  text-decoration: none;
}

.button.store { background: var(--night); border: 1px solid var(--night); color: #fdf6ec; }

.button[aria-disabled='true'] { cursor: default; opacity: 0.85; }

.hero-stage {
  align-items: end;
  display: flex;
  justify-content: center;
  margin-bottom: clamp(30px, 5vh, 56px);
  max-width: 100%;
  position: relative;
}

.hero-phone { flex: none; }

.hero-mipkin {
  flex: none;
  margin-bottom: -4px;
  margin-left: clamp(-3.5rem, -4vw, -1.8rem);
  width: clamp(150px, 23vw, 290px);
  z-index: 2;
}

@media (max-width: 40rem) {
  .hero-phone { width: 72vw; }
  .hero-mipkin { margin-left: -9vw; width: 33vw; }
}

.spark {
  animation: twinkle 3.4s ease-in-out infinite;
  background: var(--gold);
  border-radius: 50%;
  height: 7px;
  opacity: 0;
  position: absolute;
  width: 7px;
}

.spark-1 { animation-delay: 0.4s; left: 5%; top: 58%; }
.spark-2 { animation-delay: 1.5s; left: 44%; top: 14%; }
.spark-3 { animation-delay: 2.4s; height: 5px; left: 58%; top: 66%; width: 5px; }
.spark-4 { animation-delay: 3.1s; height: 5px; left: 90%; top: 74%; width: 5px; }

@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  50% { opacity: 0.85; transform: scale(1); }
}

/* The cast breathes. The symbols are composed from the app's own layer recipes, so
   these rules target the recipe's slot groups (.l-*) on the originals in index.html —
   which is how every <use> instance inherits the motion. */

.l-earLeft { animation: sp-ear-l 4.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 80% 95%; }

.l-earRight { animation: sp-ear-r 4.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 20% 95%; }

.l-eyes { animation: sp-blink 5.6s steps(1) infinite; transform-box: fill-box; transform-origin: 50% 60%; }

.l-glow { animation: sp-glow 2.8s ease-in-out infinite; }

.l-tuft { animation: sp-ear-r 4.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }

@keyframes sp-ear-l {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-2.6deg); }
}

@keyframes sp-ear-r {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(2.6deg); }
}

@keyframes sp-blink {
  0%, 91%, 97%, 100% { transform: scaleY(1); }
  93%, 95% { transform: scaleY(0.12); }
}

@keyframes sp-glow {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.hero-mipkin { animation: sp-bob 4.2s ease-in-out infinite; }

@keyframes sp-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* Hero entrance. */

.rise-1, .rise-2, .rise-3, .rise-4 {
  animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.rise-2 { animation-delay: 0.08s; }
.rise-3 { animation-delay: 0.18s; }
.rise-4 { animation-delay: 0.3s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: reveal 1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
      animation-range: entry 4% entry 44%;
      animation-timeline: view();
    }
  }
}

@keyframes reveal {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}

/* ── How it works ───────────────────────────────────────────────────────── */

.steps {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.step {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 2rem 1.7rem 1.7rem;
}

.step-art { display: block; height: 84px; margin-bottom: 1.2rem; width: 120px; }

.step h3 { align-items: center; display: flex; font-size: 1.32rem; gap: 0.7rem; margin-bottom: 0.6rem; }

.step-n {
  align-items: center;
  background: var(--coral);
  border-radius: 50%;
  color: var(--on-coral);
  display: inline-flex;
  flex: none;
  font-family: var(--display);
  font-size: 1.05rem;
  height: 1.9rem;
  justify-content: center;
  width: 1.9rem;
}

.step-2 .step-n { background: var(--gold); }
.step-3 .step-n { background: var(--mint); color: #0e2e20; }

.step p { color: var(--ink-soft); margin: 0; }

.step em { color: var(--ink); }

/* ── The spirits ────────────────────────────────────────────────────────── */

.band-spirits { overflow: clip; }

.bigword-stage { margin: 0 auto; padding-top: clamp(3.5rem, 8vw, 6.5rem); position: relative; width: fit-content; }

.bigword {
  color: var(--ink);
  font-size: clamp(4.6rem, 16vw, 13rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.92;
  position: relative;
  text-align: center;
}

.word-poffle {
  bottom: 84%;
  left: 10%;
  position: absolute;
  transform: rotate(-7deg);
  width: clamp(84px, 10.5vw, 152px);
}

.word-kitti {
  bottom: 83%;
  position: absolute;
  right: 0;
  width: clamp(84px, 10.5vw, 152px);
}

.spirit-row {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(12.75rem, 1fr));
  margin-top: 3.6rem;
}

.spirit-card {
  border-radius: 30px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.spirit-hearth { background: #ffe2c4; }
.spirit-conservatory { background: #d8f1e2; }
.spirit-observatory { background: #e6dffa; }

.spirit-stage {
  align-items: end;
  display: grid;
  height: 250px;
  justify-items: center;
  padding-top: 1.6rem;
  position: relative;
}

.spirit-stage::after {
  background: rgba(66, 48, 74, 0.08);
  border-radius: 50%;
  bottom: -0.55rem;
  content: '';
  filter: blur(2px);
  height: 1.4rem;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 62%;
}

.spirit-stage svg { width: 176px; }

.spirit-card:hover .spirit-stage svg { transform: translateY(-5px); }

.spirit-stage svg { position: relative; transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); z-index: 1; }

.spirit-copy { background: var(--panel); padding: 1.4rem 1.5rem 1.6rem; }

.spirit-copy h3 {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  font-size: 1.55rem;
  gap: 0.3rem 0.7rem;
}

.affinity {
  font-family: var(--body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
}

.affinity::before { content: '● '; font-size: 0.6rem; vertical-align: 0.12em; }

.affinity-hearth { color: var(--coral-deep); }
.affinity-conservatory { color: var(--mint-deep); }
.affinity-observatory { color: var(--peri-deep); }

.species { color: var(--ink-soft); margin: 0.5rem 0 0.3rem; }

.sound {
  color: var(--muted);
  font-family: var(--display);
  font-size: 0.97rem;
  font-style: italic;
  font-weight: 420;
  margin: 0;
}

/* ── Inside the app: colour panels ──────────────────────────────────────── */

.app-head { margin-bottom: 0; padding: 6.5rem 0 3.4rem; }

.panel { padding: 4.2rem 0; }

.panel-observatory { background: #e2dbf8; }
.panel-conservatory { background: #d8efe2; }
.panel-hearth { background: #ffe3c7; }
.panel-quiet { background: #dfe7f2; }

.panel-observatory .kicker { color: var(--peri-deep); }
.panel-conservatory .kicker { color: var(--mint-deep); }
.panel-hearth .kicker { color: var(--coral-deep); }
.panel-quiet .kicker { color: var(--quiet-deep); }

.feature {
  align-items: center;
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr;
}

@media (min-width: 56rem) {
  .feature { gap: 4.5rem; grid-template-columns: 1.05fr 0.95fr; }
  .feature-flip .feature-copy { order: 2; }
  .feature-flip .phone-seat { order: 1; }
}

.kicker {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  margin: 0 0 0.9rem;
  text-transform: uppercase;
}

.feature-copy h3 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: 1rem; }

.feature-copy p { color: var(--ink-soft); margin: 0 0 1rem; max-width: 34rem; }

.feature-copy em { color: var(--ink); }

.phone-seat { display: grid; justify-items: center; margin: 0; position: relative; }

.phone {
  background: linear-gradient(160deg, #453156, #2a1f33);
  border: 1px solid rgba(66, 48, 74, 0.5);
  border-radius: 54px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 34px 60px -24px rgba(58, 38, 26, 0.5);
  padding: 10px;
  position: relative;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  width: min(330px, 88vw);
  z-index: 1;
}

.tilt-l { transform: rotate(-2.4deg); }
.tilt-r { transform: rotate(2.4deg); }

.phone:hover { transform: rotate(0deg) translateY(-4px); }

.theme-hearth       { --pfg: #f6dcbc; --psurface: #fffcf6; --pscrim: rgba(255, 252, 246, 0.92); --pedge: #efd7b8; --ptext: #42304a; --pmuted: #7b6884; --paccent: #ff8a5b; --pon: #40210f; }
.theme-observatory  { --pfg: #ded8fa; --psurface: #fbf9ff; --pscrim: rgba(251, 249, 255, 0.92); --pedge: #dbd3f5; --ptext: #3a2e52; --pmuted: #77699a; --paccent: #8e7be8; --pon: #241a3e; }
.theme-conservatory { --pfg: #d3efdc; --psurface: #f9fffa; --pscrim: rgba(249, 255, 250, 0.94); --pedge: #c8e6d0; --ptext: #26402f; --pmuted: #58775f; --paccent: #3fbf8f; --pon: #0e2e20; }
.theme-quiet        { --pfg: #dde3ec; --psurface: #fbfcfe; --pscrim: rgba(251, 252, 254, 0.94); --pedge: #d7dee9; --ptext: #2e3646; --pmuted: #67718a; --paccent: #7fa0dc; --pon: #14213b; }

.screen {
  aspect-ratio: 9 / 19;
  background: var(--pfg);
  border-radius: 44px;
  color: var(--ptext);
  display: flex;
  flex-direction: column;
  font-family: var(--ui);
  font-size: 13px;
  gap: 10px;
  line-height: 1.45;
  overflow: hidden;
  padding: 12px 13px 66px;
  position: relative;
}

.screen p { margin: 0; }

/* Real captures: the screen is the screenshot, unedited. */
.phone-shot .screen {
  aspect-ratio: 660 / 1293;
  display: block;
  padding: 0;
}

.phone-shot .screen img {
  border-radius: 44px;
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.phone-mini { border-radius: 44px; padding: 8px; width: min(272px, 82vw); }

.phone-mini .screen, .phone-mini .screen img { border-radius: 36px; }

.p-status {
  align-items: center;
  color: var(--ptext);
  display: flex;
  font-size: 12px;
  font-weight: 700;
  justify-content: space-between;
  padding: 2px 8px 0;
}

.p-island { background: #17121f; border-radius: 999px; height: 22px; width: 74px; }

.p-batt { border: 1px solid var(--pmuted); border-radius: 4px; height: 10px; position: relative; width: 20px; }

.p-batt::before { background: var(--ptext); border-radius: 2px; content: ''; inset: 1.5px 30% 1.5px 1.5px; position: absolute; }

.p-greeting { font-size: 21px; font-weight: 800; letter-spacing: -0.4px; padding: 4px 4px 0; }

.p-card {
  background: var(--psurface);
  border: 1px solid var(--pedge);
  border-radius: 20px;
  display: grid;
  gap: 8px;
  padding: 13px 14px;
}

.p-card-soft { background: color-mix(in srgb, var(--psurface) 62%, transparent); }

.p-eyebrow { color: var(--paccent); font-size: 10px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; }

.p-center { text-align: center; }

.p-title { font-size: 16px; font-weight: 800; letter-spacing: -0.2px; }

.p-name { font-size: 26px; font-weight: 800; letter-spacing: -0.7px; padding: 0 4px; text-align: center; }

.p-body { color: var(--ptext); font-size: 13px; }

.p-hint { color: var(--pmuted); font-size: 11.5px; line-height: 1.4; }

.p-row { display: grid; gap: 5px; }

.p-label { color: var(--pmuted); font-size: 10.5px; font-weight: 700; text-transform: uppercase; }

.p-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.p-chip {
  border: 1px solid color-mix(in srgb, var(--pmuted) 46%, transparent);
  border-radius: 999px;
  color: var(--pmuted);
  font-size: 12px;
  font-weight: 700;
  padding: 4.5px 10px;
}

.p-chip.is-on { background: var(--paccent); border-color: var(--paccent); color: var(--pon); }

.p-meter { background: var(--pedge); border-radius: 999px; height: 7px; overflow: hidden; }

.p-meter i { background: var(--paccent); border-radius: 999px; display: block; height: 100%; }

.p-meter-45 { width: 45%; }

.p-section { color: var(--paccent); font-size: 10.5px; font-weight: 800; letter-spacing: 1.8px; margin-top: 2px; padding: 0 4px; text-transform: uppercase; }

.p-quest {
  align-items: center;
  background: var(--psurface);
  border: 1px solid var(--pedge);
  border-radius: 16px;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  padding: 10px 12px;
}

.p-quest .p-body { font-weight: 600; }

.p-go { color: var(--paccent); font-size: 18px; font-weight: 800; line-height: 1; }

.p-keepsake {
  background: var(--psurface);
  border: 1px solid var(--pedge);
  border-radius: 16px;
  display: flex;
  gap: 10px;
  padding: 11px 12px;
}

.p-ksicon { color: var(--paccent); flex: none; font-size: 17px; line-height: 1.2; }

.p-kname { font-size: 13px; font-weight: 800; }

.p-kline { color: var(--pmuted); font-size: 11.5px; line-height: 1.4; }

.p-write {
  background: color-mix(in srgb, var(--pfg) 46%, var(--psurface));
  border: 1px dashed color-mix(in srgb, var(--pmuted) 55%, transparent);
  border-radius: 14px;
  font-size: 12.5px;
  min-height: 64px;
  padding: 10px 11px;
}

.p-caret {
  animation: caret 1.1s steps(1) infinite;
  background: var(--paccent);
  border-radius: 1px;
  display: inline-block;
  height: 13px;
  margin-left: 2px;
  vertical-align: -2px;
  width: 2px;
}

@keyframes caret { 50% { opacity: 0; } }

.p-button {
  background: var(--paccent);
  border-radius: 999px;
  color: var(--pon);
  font-size: 12.5px;
  font-weight: 800;
  justify-self: start;
  padding: 7px 14px;
}

.p-paper { background: #f6eedd; border-radius: 16px; display: grid; gap: 4px; padding: 12px 14px; }

.p-paper-date { color: #9a7b52; font-size: 9px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; }

.p-paper-title { color: #2e241c; font-size: 15.5px; font-weight: 800; letter-spacing: -0.2px; }

.p-paper-body { color: #3e3128; font-size: 12.5px; line-height: 1.5; }

.p-paper-sign { color: #8a7458; font-size: 11.5px; font-style: italic; }

.p-toggle-row { align-items: center; display: flex; justify-content: space-between; }

.p-switch { background: var(--pedge); border-radius: 999px; display: inline-block; flex: none; height: 26px; position: relative; width: 44px; }

.p-switch.is-on { background: var(--paccent); }

.p-switch i { background: #fff; border-radius: 50%; height: 22px; left: 2px; position: absolute; top: 2px; width: 22px; }

.p-switch.is-on i { left: auto; right: 2px; }

.p-tabbar {
  align-items: center;
  background: var(--pscrim);
  border-top: 1px solid var(--pedge);
  bottom: 0;
  display: flex;
  justify-content: space-around;
  left: 0;
  padding: 11px 6px 16px;
  position: absolute;
  right: 0;
}

.p-tabbar span { color: var(--pmuted); font-size: 11px; font-weight: 700; }

.p-tabbar .is-here { color: var(--paccent); }

/* ── Night: the rooms ───────────────────────────────────────────────────── */

.night {
  background-color: var(--night-deep);
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, rgba(255, 231, 154, 0.9), transparent 100%),
    radial-gradient(1.2px 1.2px at 32% 68%, rgba(244, 236, 221, 0.7), transparent 100%),
    radial-gradient(1.6px 1.6px at 54% 14%, rgba(255, 231, 154, 0.8), transparent 100%),
    radial-gradient(1.1px 1.1px at 70% 48%, rgba(244, 236, 221, 0.6), transparent 100%),
    radial-gradient(1.5px 1.5px at 86% 24%, rgba(255, 231, 154, 0.85), transparent 100%),
    radial-gradient(1.1px 1.1px at 22% 86%, rgba(244, 236, 221, 0.55), transparent 100%),
    radial-gradient(1.3px 1.3px at 92% 78%, rgba(255, 231, 154, 0.7), transparent 100%);
  padding: 6.5rem 0;
  scroll-margin-top: 4.5rem;
}

.eyebrow-night { color: #ffd9a0; }

.night-title { color: var(--parchment); }

.night-lede { color: #b9aecb; }

.room-row {
  display: grid;
  gap: 2.2rem 1.6rem;
  /* Narrow enough that all five rooms sit on one line at desktop. At the old 16rem only
     four fit and the fifth was orphaned on a row of its own, which reads as a mistake
     rather than as a set. Narrower screens still fall to three, then two, then one. */
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

/* Scoped to this row rather than changing .phone-mini everywhere: the same mock is used
   at full size in the feature bands, where there are only ever two side by side. */
.room-row .phone-mini { width: min(212px, 82vw); }

.room-shot { display: grid; justify-items: center; margin: 0; }

.room-shot .phone {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 30px 60px -22px rgba(0, 0, 0, 0.8),
    0 6px 60px -8px rgba(244, 180, 92, 0.22);
}

.room-shot figcaption { display: grid; gap: 0.1rem; justify-items: center; margin-top: 1.2rem; text-align: center; }

.room-shot strong {
  color: var(--parchment);
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 540;
}

.room-shot span { color: #b9aecb; font-size: 0.97rem; }

.nook-note { color: #b9aecb; margin: 2.4rem 0 0; text-align: center; }

.nook-note strong { color: #ffd9a0; font-weight: 700; }

/* ── The refusals ───────────────────────────────────────────────────────── */

.refuse { background: var(--ink); padding: 6.5rem 0 7rem; scroll-margin-top: 4.5rem; }

.eyebrow-refuse { color: #ffb08a; }

.refuse-title { color: var(--parchment); font-size: clamp(2.2rem, 4.6vw, 3.7rem); }

.refuse-lede { color: #c5b8cf; }

.refuse-list {
  display: grid;
  gap: 1.5rem 3.5rem;
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 54rem) {
  .refuse-list { grid-template-columns: 1fr 1fr; }
}

.refuse-list li {
  border-bottom: 1px solid rgba(244, 236, 221, 0.14);
  color: #cfc2d8;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  line-height: 1.4;
  padding-bottom: 1.5rem;
}

.refuse-list s {
  color: var(--parchment);
  display: inline-block;
  font-family: var(--display);
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  font-style: italic;
  font-weight: 520;
  letter-spacing: -0.01em;
  margin-right: 0.5rem;
  text-decoration-color: var(--coral);
  text-decoration-thickness: 0.13em;
}

.refuse-privacy {
  border-left: 3px solid var(--coral);
  color: #cfc2d8;
  margin-top: 3.2rem;
  max-width: 46rem;
  padding: 0.2rem 0 0.2rem 1.4rem;
}

.refuse-privacy p { margin: 0; }

.refuse-privacy strong { color: var(--parchment); }

.refuse-privacy a { color: #ffc9a8; text-decoration-color: rgba(255, 201, 168, 0.5); }

.refuse-privacy a:hover { color: #ffe0cd; }

/* ── Pricing ────────────────────────────────────────────────────────────── */

.plans {
  align-items: stretch;
  display: grid;
  gap: 1.3rem;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
}

.plan {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius);
  box-shadow: 0 10px 26px -18px rgba(90, 58, 40, 0.4);
  display: flex;
  flex-direction: column;
  padding: 1.7rem 1.6rem;
}

.plan-hi {
  background: linear-gradient(180deg, rgba(255, 138, 91, 0.12), rgba(255, 138, 91, 0.03) 55%), var(--panel);
  border-color: rgba(255, 138, 91, 0.65);
  box-shadow: 0 26px 54px -26px rgba(214, 106, 60, 0.55);
}

.plan-badge {
  background: var(--coral);
  border-radius: 999px;
  color: var(--on-coral);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin: 0 0 1.1rem;
  padding: 0.34rem 0.85rem;
  text-transform: uppercase;
  width: fit-content;
}

.plan-name { color: var(--muted); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.05em; margin: 0 0 0.5rem; text-transform: uppercase; }

.price {
  color: var(--ink);
  font-family: var(--display);
  font-size: 2.5rem;
  font-weight: 540;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}

/* The old price is muted rather than shrunk: nothing on this page hides by scale. */
.price s { color: var(--muted); font-weight: 420; margin-right: 0.4rem; text-decoration-thickness: 1px; }

.per { color: var(--muted); margin: 0.1rem 0 0; }

.note { color: var(--ink-soft); font-size: 0.94rem; margin: 0.9rem 0 0; }

.ledger {
  border-top: 1px solid rgba(94, 62, 42, 0.12);
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  margin-top: 2.6rem;
  padding-top: 2.2rem;
}

.ledger-col h3 { font-size: 1.25rem; margin-bottom: 0.6rem; }

.ledger-col p { color: var(--ink-soft); margin: 0; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */

.band-faq { padding-top: 0; }

.faq-wrap { max-width: 52rem; }

.faq { display: grid; gap: 0.9rem; }

.faq details {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 16px;
  box-shadow: 0 10px 26px -18px rgba(90, 58, 40, 0.4);
}

.faq summary {
  align-items: center;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  font-family: var(--display);
  font-size: 1.18rem;
  font-weight: 540;
  gap: 1rem;
  justify-content: space-between;
  list-style: none;
  padding: 1.1rem 1.4rem;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  color: var(--coral-deep);
  content: '+';
  flex: none;
  font-family: var(--body);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.25s ease;
}

.faq details[open] summary::after { transform: rotate(45deg); }

.faq details p { color: var(--ink-soft); margin: 0; padding: 0 1.4rem 1.25rem; }

/* ── The door ───────────────────────────────────────────────────────────── */

.door {
  background: linear-gradient(180deg, #ffbd8a 0%, #ff9a63 52%, #f0a94e 100%);
  overflow: clip;
  padding: 6.5rem 0 0;
  scroll-margin-top: 4.5rem;
}

.door-inner { text-align: center; }

.door h2 { color: #40210f; font-size: clamp(2.6rem, 5.6vw, 4.6rem); }

.door .actions { margin-top: 2.2rem; }

.door-note { color: #6e3a1b; margin: 1.5rem 0 0; }

.door-note a { color: #4a2410; text-decoration-color: rgba(74, 36, 16, 0.5); }

.door-cast {
  align-items: flex-end;
  display: flex;
  /* Nine of them now rather than five, so they wrap rather than overflow — a second
     row of the cast at the door reads as a crowd, which is the right ending anyway. */
  flex-wrap: wrap;
  gap: clamp(0.3rem, 2vw, 1.4rem);
  justify-content: center;
  margin-top: clamp(2rem, 6vh, 4rem);
}

/* Widths vary on purpose: a row of ten identical heights reads as a chart. Ordered in the
   markup so the tallest sits near the middle. The vw coefficients sum to about 68, which
   with nine gaps is what keeps all ten on one line inside the wrap at desktop — ten at the
   old sizes overflowed and wrapped nine-then-one, which looks like a mistake rather than a
   crowd. Below that they wrap deliberately, and two rows of five is the intended fallback. */
.door-sundrop { width: clamp(46px, 5.6vw, 84px); }
.door-hoplin { width: clamp(50px, 6.3vw, 94px); }
.door-poffle { width: clamp(56px, 7.2vw, 106px); }
.door-cindle { width: clamp(58px, 7.4vw, 110px); }
.door-mipkin { width: clamp(66px, 8.6vw, 126px); }
.door-brackle { width: clamp(62px, 8vw, 118px); }
.door-kitti { width: clamp(56px, 7.2vw, 106px); }
.door-twinket { width: clamp(52px, 6.5vw, 96px); }
.door-pipwick { width: clamp(54px, 6.9vw, 102px); }
.door-tussock { width: clamp(48px, 5.9vw, 88px); }

/* ── Footer ─────────────────────────────────────────────────────────────── */

footer.site { background: var(--night); }

.foot {
  color: #b8a9be;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.93rem;
  gap: 0.6rem 1.5rem;
  justify-content: space-between;
  padding-bottom: 2.4rem;
  padding-top: 2rem;
}

.foot-links { display: flex; gap: 1.4rem; }

.foot a { color: #b8a9be; text-decoration: none; }

.foot a:hover { color: #ffc9a8; }

/* ── Documents (privacy, terms, support) ────────────────────────────────── */

.doc { padding: 3.5rem 0 5rem; }

.doc h1 {
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(2.1rem, 5vw, 3rem);
  font-weight: 540;
  letter-spacing: -0.014em;
  margin: 0 0 0.5rem;
}

.doc .updated { color: var(--muted); font-size: 0.94rem; margin: 0 0 2.6rem; }

.doc article { max-width: var(--measure); }

.doc h2 { font-size: 1.45rem; margin: 2.6rem 0 0.7rem; }

.doc h3 { font-size: 1.08rem; margin: 1.7rem 0 0.35rem; }

.doc p, .doc li { color: var(--ink-soft); }

.doc strong { color: var(--ink); }

.doc ul { padding-left: 1.2rem; }

.doc li { margin-bottom: 0.45rem; }

.callout {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-left: 3px solid var(--coral);
  border-radius: 6px 18px 18px 6px;
  box-shadow: 0 10px 26px -18px rgba(90, 58, 40, 0.4);
  padding: 1.3rem 1.5rem;
}

.callout p { color: var(--ink-soft); margin: 0 0 0.8rem; }

.callout p:last-child { margin-bottom: 0; }

.callout strong { color: var(--ink); }

.doc .callout { margin: 1.6rem 0; }

/* Wide content scrolls inside itself, never the page. */
.scroller { overflow-x: auto; }

table { border-collapse: collapse; min-width: 26rem; width: 100%; }

th, td { border-bottom: 1px solid var(--panel-edge); padding: 0.6rem 0.8rem 0.6rem 0; text-align: left; }

td { color: var(--ink-soft); }

th { color: var(--muted); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* Doc pages keep a light footer. */
body:not(.home) footer.site { background: transparent; border-top: 1px solid rgba(94, 62, 42, 0.12); }

body:not(.home) .foot, body:not(.home) .foot a { color: var(--muted); }

body:not(.home) .foot a:hover { color: var(--coral-deep); }

/* ── Motion respect ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-delay: 0s !important;
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }

  .marquee-track { animation: none !important; }
}