/* ══════════════════════════════════════════════════════════════
   SHAUKI — landing page
   Design tokens mirror "Shauki Landing v2" from Claude Design.
   ══════════════════════════════════════════════════════════════ */

:root {
  --cream:     #FAF5EA;  /* page ground          */
  --cream-alt: #FFF6E4;  /* raised cards, pills  */
  --ink:       #1D1B45;  /* near-black navy      */
  --ink-soft:  #2A2760;  /* gradient partner     */
  --indigo:    #5A58C9;
  --pink:      #D9598C;
  --yellow:    #FFC838;
  --mint:      #7FE0C3;
  --lavender:  #B9B6EA;
  --muted:     #56537A;

  --shell: 1160px;
  --gutter: 28px;

  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-hand:    'Caveat', ui-rounded, cursive;
  --font-body:    'Gantari', system-ui, -apple-system, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

.page { overflow-x: hidden; }

h1, h2, p, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img, video { max-width: 100%; }

a { color: var(--indigo); }
a:hover { color: var(--pink); }

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

/* Hand-drawn underline that sits under a phrase ─────────────── */
.underlined { position: relative; display: inline-block; }
.underlined > svg {
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 100%;
  height: 14px;
}

/* ── SALE BANNER ─────────────────────────────────────────────
   Static, not sticky: the phone screen is already fighting to get
   the price above the fold, and a fixed bar would take a slice of
   it on every scroll. Links to the pricing panel. */
.sale-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 11px 18px;
  background: var(--ink);
  color: var(--yellow);
  text-decoration: none;
  font-size: 15px;
  text-align: center;
  transition: background-color .15s ease;
}
.sale-banner:hover { background: var(--ink-soft); color: var(--yellow); }
.sale-banner__tag {
  font-family: var(--font-hand);
  font-size: 21px;
  line-height: 1;
  background: var(--yellow);
  color: var(--ink);
  border-radius: 999px;
  padding: 3px 13px 5px;
}
.sale-banner__msg { color: var(--cream-alt); }
.sale-banner__msg strong { color: var(--yellow); font-weight: 700; }

/* ── NAV ───────────────────────────────────────────────────── */
.nav {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 24px var(--gutter) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.brand:hover { color: inherit; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.nav-cta {
  font-weight: 700;
  font-size: 14px;
  color: var(--indigo);
  text-decoration: none;
  border: 2px solid var(--indigo);
  border-radius: 999px;
  padding: 8px 18px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-cta:hover {
  background: var(--indigo);
  color: var(--cream-alt);
}

/* ── HERO ──────────────────────────────────────────────────── */
.hero {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(48px, 8vh, 88px) var(--gutter) 72px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

/* The hero names the product but can't show it, so this is the
   "show me first" path for anyone not ready to order outright. It
   also carries the colourway count, so it's one line, not two. */
.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  font-family: var(--font-hand);
  font-size: 24px;
  color: var(--indigo);
  text-decoration: none;
  --rot: -2.5deg;
  transform: rotate(var(--rot));
  transform-origin: left center;
  transition: color .15s ease;
}
.scroll-cue:hover { color: var(--pink); }
.scroll-cue svg { animation: nudgeDown 1.6s ease-in-out infinite; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cream-alt);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(37px, 6.5vw, 76px);
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin-top: 26px;
}
.hero-title .underlined { color: var(--indigo); }

.hero-lede {
  font-size: 18px;
  color: var(--muted);
  line-height: 1.65;
  max-width: 440px;
  margin-top: 26px;
}

/* The hero's one concrete fact. Everything around it is brand voice,
   so the product name carries the emphasis colour to stay scannable. */
.hero-product {
  color: var(--indigo);
  font-weight: 700;
  white-space: nowrap;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 34px;
}
/* Secondary action. Lighter than .btn-primary on purpose — no hard
   shadow — so ordering stays the obvious first move in the hero. */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16.5px;
  text-decoration: none;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 13px 24px;
  transition: background-color .15s ease, color .15s ease;
}
.btn-ghost:hover {
  background: var(--ink);
  color: var(--cream);
}

/* Chunky "sticker" button with a hard drop shadow ───────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  border-radius: 999px;
  padding: 15px 30px;
  box-shadow: 0 4px 0 var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn-primary:hover {
  color: var(--ink);
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--ink);
}
.btn-primary:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--ink);
}
.btn-primary--onDark { box-shadow: 0 4px 0 var(--cream); margin-top: 30px; }
.btn-primary--onDark:hover { box-shadow: 0 2px 0 var(--cream); }
.btn-primary--onDark:active { box-shadow: 0 0 0 var(--cream); }

/* The glowing doorway ───────────────────────────────────────── */
.hero-door-wrap {
  position: relative;
  display: flex;
  justify-content: center;
}
.door {
  width: min(340px, 78vw);
  aspect-ratio: 340 / 470;
  border-radius: 999px 999px 24px 24px;
  overflow: hidden;
  background: radial-gradient(ellipse 90% 60% at 50% 38%, var(--ink-soft) 0%, var(--ink) 65%);
  border: 3px solid var(--ink);
  box-shadow: 10px 10px 0 var(--yellow);
  animation: doorGlow 3.5s ease-in-out infinite;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.door-spark {
  transform-origin: 50% 50%;
  animation: popIn 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) both,
             sparkGlow 3s ease-in-out 1.1s infinite;
}
.door-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 48px;
  letter-spacing: -0.02em;
  color: var(--cream);
  animation: blurIn 1.3s ease-out 0.7s both;
}
.door-tag {
  font-family: var(--font-hand);
  font-size: 27px;
  color: var(--yellow);
  animation: blurIn 1.3s ease-out 1.3s both;
}

.float-chip {
  position: absolute;
  border-radius: 12px;
  padding: 7px 15px;
  font-family: var(--font-hand);
  font-size: 23px;
  box-shadow: 0 3px 0 var(--ink);
  transform: rotate(var(--r));
  animation: floaty var(--dur) ease-in-out var(--delay, 0s) infinite;
}
.float-chip--1 { top: 6%;     left: -2%;  --r: -8deg; --dur: 5s;   background: var(--yellow); }
.float-chip--2 { top: 34%;    right: -2%; --r: 6deg;  --dur: 6s;   --delay: 0.8s; background: var(--mint); }
.float-chip--3 { bottom: 10%; left: 2%;   --r: 5deg;  --dur: 5.5s; --delay: 0.4s; background: var(--pink); color: var(--cream-alt); }

/* ── MARQUEE ───────────────────────────────────────────────── */
.marquee {
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  background: var(--cream-alt);
  overflow: hidden;
  padding: 12px 0;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: drift 56s linear infinite;
}
.marquee-group {
  display: flex;
  gap: 34px;
  padding-right: 34px;
  font-family: var(--font-hand);
  font-size: 26px;
  color: var(--ink);
  white-space: nowrap;
}
.s-i { color: var(--indigo); }
.s-p { color: var(--pink); }

/* ── YAAD HAI (memory) ─────────────────────────────────────── */
.memory {
  background: radial-gradient(ellipse 80% 70% at 50% 30%, var(--ink-soft) 0%, var(--ink) 70%);
  position: relative;
  overflow: hidden;
}
.memory-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(80px, 12vh, 130px) var(--gutter);
  text-align: center;
}
.memory-kicker {
  font-family: var(--font-hand);
  font-size: clamp(30px, 4.5vw, 40px);
  color: var(--yellow);
  --rot: -1.5deg;
  transform: rotate(var(--rot));
}
.memory-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(23px, 4.5vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-top: 18px;
  color: var(--cream);
  text-wrap: pretty;
}
.memory-title span { color: var(--yellow); }
.memory-body {
  font-size: 17.5px;
  color: var(--lavender);
  line-height: 1.7;
  max-width: 520px;
  margin: 24px auto 0;
}
.memory-outro {
  font-family: var(--font-hand);
  font-size: clamp(26px, 4vw, 34px);
  color: var(--mint);
  margin-top: 30px;
  --rot: -1deg;
  transform: rotate(var(--rot));
}

/* Open-book doodles: floating at the sides on wide screens,
   a single centred one once they'd start crowding the text. */
.doodle { position: absolute; }
.doodle--left {
  top: 14%;
  left: 2.5%;
  --r: -9deg;
  transform: rotate(var(--r));
  animation: floaty 5s ease-in-out infinite;
}
.doodle--right {
  bottom: 12%;
  right: 2.5%;
  --r: 7deg;
  transform: rotate(var(--r));
  animation: floaty 6s ease-in-out 0.8s infinite;
}
.doodle--mobile {
  display: none;
  position: static;
  margin: 34px auto 0;
  transform: rotate(-4deg);
}
@media (max-width: 1050px) {
  .doodle--left, .doodle--right { display: none; }
  .doodle--mobile { display: block; }
}

/* ── PRODUCT ───────────────────────────────────────────────── */
.product {
  background: var(--cream-alt);
  border-top: 2px solid var(--ink);
}
.product-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(70px, 10vh, 100px) var(--gutter);
  text-align: center;
}
.product-kicker {
  font-family: var(--font-hand);
  font-size: 28px;
  color: var(--pink);
  transform: rotate(-2deg);
}
.product-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 5.5vw, 52px);
  letter-spacing: -0.02em;
  margin-top: 8px;
}
.product-lede {
  font-size: 17px;
  color: var(--muted);
  max-width: 520px;
  margin: 14px auto 0;
  line-height: 1.65;
}

.order-hint {
  font-family: var(--font-hand);
  font-size: 24px;
  color: var(--indigo);
  margin-top: 26px;
  --rot: -1deg;
  transform: rotate(var(--rot));
}

/* ── PRICING ──────────────────────────────────────────────────
   One panel, all three tiers. Previously the single price and the
   combos were two blocks with the whole product grid between them,
   so the price story arrived in pieces. Each tier is its own order
   link, so this panel is also the main way to buy. */
.pricing--sale { border-color: var(--ink); box-shadow: 7px 7px 0 var(--pink); }

.pricing-flag {
  display: inline-block;
  background: var(--pink);
  color: var(--cream-alt);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 11px;
  margin-right: 7px;
  vertical-align: 2px;
}

.tier-was {
  font-size: 13px;
  color: var(--muted);
  text-decoration: line-through;
  min-height: 1em;
}
/* the 3-pack has no everyday price; keep the slot, show nothing */
.tier-was:empty { text-decoration: none; }
.tier--hero .tier-was { color: #8a6a1f; }

.pricing {
  max-width: 620px;
  margin: 30px auto 0;
  padding: 18px 20px 22px;
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 24px;
  box-shadow: 7px 7px 0 var(--indigo);
}

.pricing-note {
  font-family: var(--font-hand);
  font-size: 21px;
  color: var(--pink);
  margin-bottom: 14px;
}

.tier-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: stretch;
}

.tier {
  flex: 1 1 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 14px 10px 16px;
  background: var(--cream-alt);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: transform .14s ease, box-shadow .14s ease;
}
.tier:hover,
.tier:focus-visible {
  color: inherit;
  transform: translateY(-3px);
  box-shadow: 0 5px 0 var(--ink);
}
.tier:active { transform: translateY(1px); box-shadow: none; }
.tier--hero { background: var(--yellow); }

.tier-price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 4vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.tier-label {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  text-align: center;
}
.tier--hero .tier-label { color: var(--ink); font-weight: 700; }
.tier-save {
  font-family: var(--font-hand);
  font-size: 19px;
  color: var(--pink);
  margin-top: 2px;
}
.tier--hero .tier-save { color: var(--ink); }

.order-cta { margin-top: 30px; }

.product-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(18px, 3vw, 30px);
  justify-content: center;
  align-items: flex-end;
  margin-top: 26px;
}
/* Cards hold a 210px ideal but shrink together so all five stay on
   one row. Flexbox wraps before it shrinks, so the row is nowrap
   here and steps down to 3-up then 2-up at the breakpoints below. */
.pcard {
  flex: 0 1 210px;
  min-width: 130px;
}
.pcard-frame {
  width: 100%;
  aspect-ratio: 210 / 300;
  border-radius: 999px 999px 18px 18px;
  overflow: hidden;
  border: 3px solid var(--ink);
  background: var(--card-bg);
  box-shadow: 6px 6px 0 var(--card-shadow);
}
.pcard-frame > img,
.pcard-frame > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* A card whose media hasn't landed yet drops out of the row
   entirely — an empty colour block reads as a broken image. */
.pcard.is-missing { display: none; }

.pcard figcaption,
.pcard-cap {
  display: block;
  font-family: var(--font-hand);
  font-size: 23px;
  margin-top: 14px;
}

/* The four colourways are order links — tapping one opens WhatsApp with
   that colour already written in, so an order never arrives ambiguous. */
.pcard--order {
  text-decoration: none;
  color: inherit;
  display: block;
}
.pcard--order .pcard-frame {
  display: block;
  transition: transform .16s ease, box-shadow .16s ease;
}
.pcard--order:hover {
  color: inherit;
}
.pcard--order:hover .pcard-frame,
.pcard--order:focus-visible .pcard-frame {
  transform: translateY(-4px);
  box-shadow: 9px 11px 0 var(--card-shadow);
}
.pcard--order:active .pcard-frame {
  transform: translateY(1px);
  box-shadow: 4px 4px 0 var(--card-shadow);
}
.pcard-caption--accent { color: var(--pink); }

.feature-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 44px;
}
.feature-pills li {
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: 500;
  font-size: 14px;
}
.feature-pills__hero {
  background: var(--yellow) !important;
  font-weight: 700 !important;
}

/* ── TERA SHAUK KYA HAI (quiz) ─────────────────────────────── */
.quiz {
  background: var(--indigo);
  position: relative;
  overflow: hidden;
}
.quiz-inner {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  color: var(--cream-alt);
  padding: clamp(48px, 8vh, 80px) var(--gutter) clamp(64px, 10vh, 100px);
  position: relative;
}
.quiz-badge {
  display: inline-block;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--font-hand);
  font-size: 23px;
  padding: 6px 18px;
  border-radius: 12px;
  transform: rotate(-2deg);
  box-shadow: 0 3px 0 var(--ink);
}
.quiz-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(31px, 6vw, 60px);
  letter-spacing: -0.02em;
  margin-top: 18px;
  transform: rotate(-1deg);
}
.quiz-title .underlined > svg { bottom: -8px; }
.quiz-sub {
  font-family: var(--font-hand);
  font-size: 22px;
  color: var(--lavender);
  margin-top: 20px;
}

/* Scalloped awning edges — segments are built in script.js */
.scallops {
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.scallops--bottom { align-items: flex-end; }
.scallop {
  width: 46px;
  height: 40px;
  flex: none;
  border: 3px solid var(--ink);
  margin-left: -3px;
}
.scallops--top .scallop {
  border-radius: 0 0 999px 999px;
  border-top: none;
}
.scallops--bottom .scallop {
  border-radius: 999px 999px 0 0;
  border-bottom: none;
}

.twinkle { position: absolute; animation: twinkle 2.6s ease-in-out infinite; }
.twinkle--1 { top: 90px;     left: 6%; }
.twinkle--2 { top: 170px;    right: 9%; animation-duration: 3.4s; animation-delay: 0.9s; }
.twinkle--3 { bottom: 60px;  left: 10%; animation-duration: 3.4s; animation-delay: 0.9s; }
.twinkle--4 { bottom: 120px; right: 6%; }

.hobby-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 34px;
}
.hobby {
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15.5px;
  padding: 11px 22px;
  border-radius: 999px;
  border: 2px solid var(--hd);
  background: var(--hb);
  color: var(--hf);
  box-shadow: 0 3px 0 var(--ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease,
              background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  animation: chipWiggle 5.6s ease-in-out calc(var(--i) * 0.7s) infinite;
}
.hobby:hover {
  animation: none;
  transform: translateY(-3px) rotate(-1.5deg);
  box-shadow: 0 6px 0 var(--ink);
}
.hobby:active {
  animation: none;
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--ink);
}
/* Once anyone has answered, the whole row settles down. */
.hobby-row.is-answered .hobby { animation: none; }
/* Per-chip colours arrive as inline custom properties, which outrank
   any stylesheet value — so the selected state sets the real
   properties rather than trying to redefine the variables. */
.hobby[aria-pressed="true"] {
  background: var(--ink);
  color: var(--yellow);
  border-color: var(--yellow);
}

.quiz-answer {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
}
.quiz-prompt {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-hand);
  font-size: 24px;
  color: var(--lavender);
}
.quiz-prompt > svg {
  transform: rotate(-12deg);
  flex: none;
}
.quiz-prompt > svg path { animation: tapNudge 1.4s ease-in-out infinite; }
.quiz-prompt[hidden] { display: none; }

.quiz-bubble {
  background: var(--cream-alt);
  color: var(--ink);
  border-radius: 18px 18px 18px 4px;
  padding: 16px 26px;
  font-family: var(--font-hand);
  font-size: clamp(23px, 3.5vw, 28px);
  transform: rotate(-1deg);
  box-shadow: 0 4px 0 var(--ink);
  max-width: 560px;
  animation: bubblePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.quiz-bubble[hidden] { display: none; }

/* ── FOUNDER NOTE ──────────────────────────────────────────── */
.note-wrap {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(80px, 12vh, 110px) var(--gutter);
}
.note {
  max-width: 640px;
  margin: 0 auto;
  background: #FFFFFF;
  border-radius: 18px;
  padding: clamp(30px, 5vw, 44px);
  box-shadow: 0 4px 14px rgba(29, 27, 69, 0.12);
  transform: rotate(-0.5deg);
  position: relative;
}
.note p { font-size: 16.5px; line-height: 1.75; }
.note p + p { margin-top: 14px; }
.note > p:first-of-type { margin-top: 10px; }
.note-tab {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  background: var(--mint);
  border-radius: 10px;
  padding: 5px 16px;
  font-family: var(--font-hand);
  font-size: 21px !important;
  box-shadow: 0 3px 0 var(--ink);
  white-space: nowrap;
}
.note-sign {
  font-family: var(--font-hand);
  font-size: 27px !important;
  color: var(--indigo);
  margin-top: 22px !important;
}

/* ── FAQ ─────────────────────────────────────────────────────
   Plain markup on purpose: no accordion, no JS. Answer engines and
   crawlers read what's in the DOM, and Google's FAQ rich result
   requires the answers to be visible on the page anyway. */
.faq {
  background: var(--cream-alt);
  border-top: 2px solid var(--ink);
}
.faq-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(60px, 9vh, 90px) var(--gutter);
}
.faq-kicker {
  font-family: var(--font-hand);
  font-size: 26px;
  color: var(--pink);
  text-align: center;
  --rot: -2deg;
  transform: rotate(var(--rot));
}
.faq-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 5vw, 44px);
  letter-spacing: -0.02em;
  text-align: center;
  margin-top: 6px;
}
.faq-list {
  margin-top: 36px;
  display: grid;
  gap: 18px;
}
.faq-item {
  background: var(--cream);
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  padding: 20px 24px;
}
.faq-q {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18.5px;
  letter-spacing: -0.01em;
}
.faq-a {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.65;
  margin-top: 8px;
  text-wrap: pretty;
}

/* ── FOOTER ────────────────────────────────────────────────── */
.footer {
  background: var(--ink);
  padding: clamp(44px, 7vw, 72px) var(--gutter) 40px;
  color: var(--cream-alt);
  text-align: center;
}
.footer-mark { margin-bottom: 16px; }
.footer-mark-spark {
  transform-origin: 50% 45%;
  animation: twinkle 2.6s ease-in-out infinite;
}
.footer-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(29px, 6vw, 54px);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.footer-body {
  font-size: 16px;
  color: var(--lavender);
  max-width: 440px;
  margin: 14px auto 0;
  line-height: 1.65;
}
.footer-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid rgba(250, 245, 234, 0.18);
  font-size: 13.5px;
  color: var(--lavender);
}
.footer-meta__brand {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--cream-alt);
}

/* ── SCROLL REVEAL ─────────────────────────────────────────── */
/* Gated on .js so the page is fully readable without scripting. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px) rotate(var(--rot, 0deg));
  transition: opacity 0.7s ease var(--d, 0s), transform 0.7s ease var(--d, 0s);
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0) rotate(var(--rot, 0deg));
}

/* ── KEYFRAMES ─────────────────────────────────────────────── */
@keyframes twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(0.7) rotate(22deg); }
}
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(var(--r, -6deg)); }
  50%      { transform: translateY(-10px) rotate(var(--r, -6deg)); }
}
@keyframes drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes popIn {
  from { opacity: 0; transform: translateY(20px) scale(0.85); }
  to   { opacity: 1; transform: none; }
}
@keyframes blurIn {
  from { opacity: 0; filter: blur(14px); transform: scale(1.04); }
  to   { opacity: 1; filter: blur(0); transform: none; }
}
@keyframes sparkGlow {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 200, 56, 0.55)); transform: scale(1) rotate(0deg); }
  50%      { filter: drop-shadow(0 0 26px rgba(255, 200, 56, 0.95)); transform: scale(0.86) rotate(18deg); }
}
@keyframes bubblePop {
  from { opacity: 0; transform: translateY(14px) scale(0.85) rotate(-1deg); }
  to   { opacity: 1; transform: translateY(0) scale(1) rotate(-1deg); }
}
@keyframes nudgeDown {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}
@keyframes tapNudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@keyframes chipWiggle {
  0%, 88%, 100% { transform: rotate(0deg); }
  91% { transform: rotate(-2.5deg) translateY(-2px); }
  94% { transform: rotate(2deg); }
  97% { transform: rotate(-1deg); }
}
@keyframes doorGlow {
  0%, 100% { box-shadow: 10px 10px 0 var(--yellow), 0 0 0 0 rgba(255, 200, 56, 0); }
  50%      { box-shadow: 10px 10px 0 var(--yellow), 0 0 0 14px rgba(255, 200, 56, 0.25); }
}

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 820px) {
.product-grid { flex-wrap: wrap; }
  .pcard { flex: 0 1 calc(33.333% - 20px); min-width: 0; }
}

@media (max-width: 560px) {
  .float-chip { font-size: 19px; padding: 5px 12px; }
  .feature-pills { gap: 8px; }
  .feature-pills li { font-size: 13px; padding: 7px 14px; }

  /* Stacked tall cards eat the screen at phone width — lay each tier
     out as one compact line instead. */
  .pricing { padding: 16px 14px 18px; }
  .tier {
    flex: 1 1 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 4px 10px;
    padding: 11px 14px;
  }
  .tier-price { font-size: 25px; }
  .tier-save { margin-top: 0; }
  :root { --gutter: 20px; }
  .pcard { flex: 0 1 calc(50% - 9px); }
  /* At phone width this sparkle lands on top of the heading. */
  .twinkle--2 { top: 96px; right: 5%; }
}

/* ── REDUCED MOTION ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .door { box-shadow: 10px 10px 0 var(--yellow); }
}