/* ═══════════════════════════════════════════════════════════════
   Wickabee — landing styles
   Apple-style: system type, generous whitespace, soft motion
   ═══════════════════════════════════════════════════════════════ */

:root {
  --ink: #1a1035;
  --ink-2: #6e6680;
  --royal: #5b2fd4;
  --electric: #7c52ff;
  --gold: #f0a500;
  --bg: #fcfbf8;
  --surface: #ffffff;
  --line: rgba(26, 16, 53, 0.08);
  --radius: 28px;
  --shadow-soft: 0 2px 8px rgba(26, 16, 53, .04), 0 24px 60px rgba(26, 16, 53, .07);
  --shadow-phone: 0 8px 24px rgba(26, 16, 53, .12), 0 48px 120px rgba(91, 47, 212, .22);
  --ease: cubic-bezier(.22, .61, .21, 1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --serif: "New York", ui-serif, "Iowan Old Style", Georgia, serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

::selection { background: rgba(124, 82, 255, .22); }

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

.section-title {
  font-size: clamp(2.1rem, 5.4vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.06;
  text-align: center;
}

.section-sub {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--ink-2);
  text-align: center;
  max-width: 40em;
  margin: 1.1rem auto 0;
  letter-spacing: -0.01em;
}

.eyebrow {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--royal);
}

/* ── Nav ────────────────────────────────────────────────────── */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background .35s var(--ease), box-shadow .35s var(--ease),
              backdrop-filter .35s var(--ease);
}

.nav.is-scrolled {
  background: rgba(252, 251, 248, .72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 var(--line);
}

.nav-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.nav-brand img { border-radius: 7px; }

.nav-links {
  display: flex;
  gap: 28px;
  margin-left: auto;
  font-size: .92rem;
  color: var(--ink-2);
}

.nav-links a { transition: color .25s; }
.nav-links a:hover { color: var(--ink); }

.nav-cta {
  font-size: .88rem;
  font-weight: 600;
  color: #fff;
  background: var(--royal);
  padding: 8px 18px;
  border-radius: 999px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
}

.nav-cta:hover {
  background: var(--electric);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(91, 47, 212, .35);
}

@media (max-width: 640px) {
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; }
}

/* ── Hero ───────────────────────────────────────────────────── */

.hero {
  position: relative;
  padding: clamp(120px, 18vh, 180px) 24px 0;
  text-align: center;
  overflow: clip;
}

.hero-glow {
  position: absolute;
  left: 50%;
  top: -12%;
  width: min(1100px, 130vw);
  aspect-ratio: 1.6;
  transform: translateX(-50%);
  background:
    radial-gradient(closest-side, rgba(124, 82, 255, .16), transparent 68%),
    radial-gradient(closest-side at 32% 62%, rgba(240, 165, 0, .12), transparent 60%),
    radial-gradient(closest-side at 70% 55%, rgba(255, 77, 143, .09), transparent 62%);
  filter: blur(2px);
  animation: glow-drift 14s var(--ease) infinite alternate;
  pointer-events: none;
}

@keyframes glow-drift {
  from { transform: translateX(-53%) scale(1); }
  to   { transform: translateX(-47%) scale(1.06); }
}

.hero-sparkles span {
  position: absolute;
  color: var(--gold);
  opacity: 0;
  font-size: 14px;
  animation: sparkle 4.8s ease-in-out infinite;
}

.hero-sparkles span:nth-child(1) { left: 12%; top: 22%; animation-delay: 0s; }
.hero-sparkles span:nth-child(2) { left: 84%; top: 18%; animation-delay: .9s; font-size: 11px; }
.hero-sparkles span:nth-child(3) { left: 7%;  top: 55%; animation-delay: 1.7s; font-size: 18px; }
.hero-sparkles span:nth-child(4) { left: 90%; top: 48%; animation-delay: 2.6s; }
.hero-sparkles span:nth-child(5) { left: 22%; top: 76%; animation-delay: 3.4s; font-size: 10px; }
.hero-sparkles span:nth-child(6) { left: 76%; top: 70%; animation-delay: 4.1s; font-size: 16px; }

@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); }
  50%      { opacity: .8; transform: scale(1) rotate(24deg); }
}

.hero-title {
  font-size: clamp(2.6rem, 7.6vw, 5.4rem);
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.02;
  max-width: 13em;
  margin: 1.1rem auto 0;
}

.hero-title em {
  font-style: normal;
  background: linear-gradient(96deg, var(--royal), var(--electric) 55%, #ff4d8f 120%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 560px) {
  /* Let narrow screens wrap naturally. The markup keeps whitespace around the
     <br>, so hiding it still leaves a word space. */
  .hero-title br { display: none; }
  /* Decorative sparkles collide with the headline at this width */
  .hero-sparkles { display: none; }
}

.hero-sub {
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  color: var(--ink-2);
  max-width: 36em;
  margin: 1.5rem auto 0;
  letter-spacing: -0.01em;
}

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

.hero-note {
  margin-top: .9rem;
  font-size: .85rem;
  color: var(--ink-2);
}

/* App Store badge */
.appstore-badge {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: var(--ink);
  color: #fff;
  padding: 11px 22px 11px 18px;
  border-radius: 14px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.appstore-badge:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 16px 36px rgba(26, 16, 53, .28);
}

/* Pre-launch state. The badge keeps its weight so the hero still has an
   anchor, but it is a status rather than a control: no link, no hover lift,
   no pointer — nothing here promises a tap that would go nowhere. */
.appstore-badge.is-pending {
  background: linear-gradient(180deg, #2a2140, var(--ink));
  cursor: default;
}

.appstore-badge.is-pending:hover {
  transform: none;
  box-shadow: none;
}

.appstore-badge.is-pending .badge-text small {
  opacity: .92;
  letter-spacing: .01em;
}

.nav-cta.is-pending {
  background: none;
  color: var(--royal);
  border: 1px solid rgba(91, 47, 212, .32);
  padding: 7px 17px;
}

.nav-cta.is-pending:hover {
  background: rgba(91, 47, 212, .07);
  color: var(--royal);
  transform: none;
  box-shadow: none;
}

.badge-text { display: flex; flex-direction: column; text-align: left; line-height: 1.15; }
.badge-text small { font-size: .68rem; opacity: .8; }
.badge-text strong { font-size: 1.18rem; font-weight: 600; letter-spacing: -0.01em; }

/* Hero phone */
/* The device is deliberately cropped by the fold. A soft mask makes it dissolve
   into the page instead of being sliced by the next section's hard edge. */
.hero-phone {
  margin: clamp(48px, 7vw, 84px) auto 0;
  display: flex;
  justify-content: center;
  perspective: 1400px;
  padding-bottom: 4px;
  -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 68%, transparent 99%);
}

.phone {
  width: min(340px, 78vw);
  border-radius: clamp(40px, 6vw, 54px);
  background: #0d0a1a;
  padding: clamp(10px, 1.6vw, 14px);
  box-shadow: var(--shadow-phone);
  position: relative;
  transform-style: preserve-3d;
  transition: transform .2s ease-out;
}

.phone::after { /* dynamic island */
  content: "";
  position: absolute;
  top: clamp(20px, 3vw, 26px);
  left: 50%;
  transform: translateX(-50%);
  width: 28%;
  height: clamp(20px, 3vw, 26px);
  background: #0d0a1a;
  border-radius: 999px;
  z-index: 2;
}

.phone-screen {
  border-radius: clamp(30px, 4.6vw, 42px);
  overflow: hidden;
  aspect-ratio: 1320 / 2868;
  background: #f6f2ea;
  position: relative;
}

.phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.phone-sm { width: min(300px, 74vw); }

/* Hero load-in sequence — hidden states only when JS is available,
   so the page is fully readable without scripts (and in static renders) */
.has-js .hero-seq {
  opacity: 0;
  transform: translateY(26px);
  animation: rise .9s var(--ease) forwards;
  animation-delay: var(--d, 0s);
}

@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}

/* ── Trust strip ────────────────────────────────────────────── */

.strip {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  padding: 22px 24px;
}

.strip-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 42px;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-2);
}

.strip-list li::before {
  content: "✓";
  color: var(--royal);
  font-weight: 700;
  margin-right: 8px;
}

/* ── Sections & cards ───────────────────────────────────────── */

.section {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(90px, 13vw, 150px) 24px 0;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: clamp(40px, 6vw, 64px);
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 30px;
  box-shadow: var(--shadow-soft);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 4px 12px rgba(26, 16, 53, .05), 0 36px 80px rgba(26, 16, 53, .12);
}

.card-icon {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 19px;
  background: linear-gradient(135deg, rgba(124, 82, 255, .12), rgba(240, 165, 0, .12));
  color: var(--royal);
  margin-bottom: 20px;
}

.card-icon svg { width: 30px; height: 30px; }

.card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.card p { color: var(--ink-2); font-size: .98rem; }

/* ── Worlds ─────────────────────────────────────────────────── */

.worlds {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  margin-top: clamp(40px, 6vw, 64px);
}

@media (max-width: 980px) { .worlds { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .worlds { grid-template-columns: repeat(2, 1fr); } }

.world {
  text-align: center;
  transition: transform .5s var(--ease);
}

.world:hover { transform: translateY(-8px) scale(1.03); }

.world img {
  border-radius: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

.world figcaption {
  margin-top: 12px;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: -0.01em;
}

.worlds-note {
  text-align: center;
  color: var(--ink-2);
  margin-top: 34px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
}

/* ── Scrollytelling ─────────────────────────────────────────── */

.story {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(90px, 13vw, 150px) 24px 0;
}

.story-sticky {
  position: sticky;
  top: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title phone"
    "steps phone";
  align-content: center;
  gap: clamp(24px, 6vw, 90px);
  padding: 80px 0 40px;
}

.story-title { grid-area: title; text-align: left; align-self: end; }
.story-phone { grid-area: phone; align-self: center; }
.story-steps { grid-area: steps; align-self: start; }

.story-steps { display: grid; gap: 8px; }

.story-step {
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  column-gap: 18px;
  padding: 18px 20px;
  border-radius: 22px;
  opacity: .38;
  transition: opacity .5s var(--ease), background .5s var(--ease), transform .5s var(--ease);
}

.story-step.is-active {
  opacity: 1;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  transform: translateX(4px);
}

.step-num {
  grid-row: 1 / 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 700;
  background: linear-gradient(135deg, var(--royal), var(--electric));
  color: #fff;
  align-self: start;
}

.story-step h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; align-self: center; }
.story-step p { color: var(--ink-2); font-size: .95rem; margin-top: 4px; }

.story-phone { display: flex; justify-content: center; }

/* The grid gap already separates the two rows; pull the steps up a touch so
   the title and the list read as one column. */
.story-sticky { row-gap: clamp(20px, 3vw, 34px); }

.story-img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .6s var(--ease), transform .8s var(--ease);
}

.story-img.is-active { opacity: 1; transform: scale(1); }

.story-track { position: relative; z-index: -1; margin-top: -100vh; }
.story-zone { height: 90vh; }

/* On narrow screens the sticky two-column layout is dropped. The section
   becomes a normal flow — title, a phone that sticks while you read, then the
   full step copy. Every step keeps its real text: no pseudo-element captions,
   so screen readers and search engines get the same content as desktop. */
@media (max-width: 820px) {
  .story { padding-bottom: 8px; }

  .story-sticky {
    position: static;
    display: block;
    min-height: 0;
    padding: 0 0 8px;
  }

  .story-title { text-align: center; }

  /* The device is pinned in an opaque band at the top of the section, so the
     screen keeps swapping while the step cards scroll cleanly underneath it.
     Without the band the phone floats over the copy and hides it. */
  .story-phone {
    position: sticky;
    top: 52px;
    z-index: 2;
    margin: clamp(20px, 4vw, 30px) -24px clamp(18px, 4vw, 26px);
    padding: 14px 24px 16px;
    background: var(--bg);
  }

  /* softens the edge where cards disappear under the band */
  .story-phone::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 22px;
    background: linear-gradient(to bottom, var(--bg), transparent);
    pointer-events: none;
  }

  .phone-sm { width: min(168px, 43vw); }

  .story-steps { gap: 12px; }

  /* All steps stay fully legible; the active one just gains a card. */
  .story-step {
    opacity: 1;
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 20px;
    transform: none;
  }

  .story-step.is-active {
    transform: none;
    border-color: transparent;
  }

  .story-track { display: none; } /* steps drive the phone instead */
}

@media (max-width: 420px) {
  .story-step {
    grid-template-columns: 36px 1fr;
    column-gap: 14px;
  }
  .step-num { width: 36px; height: 36px; font-size: .95rem; }
}

/* ── Privacy ────────────────────────────────────────────────── */

.privacy {
  position: relative;
  margin-top: clamp(90px, 13vw, 150px);
  background:
    radial-gradient(1000px 500px at 50% -10%, rgba(124, 82, 255, .25), transparent 60%),
    #120c26;
  color: #fff;
  padding: clamp(90px, 12vw, 140px) 24px;
  overflow: clip;
}

.privacy .section-sub { color: rgba(255, 255, 255, .72); }

.privacy-stars span {
  position: absolute;
  color: rgba(240, 165, 0, .8);
  font-size: 12px;
  animation: sparkle 6s ease-in-out infinite;
}
.privacy-stars span:nth-child(1) { left: 8%;  top: 18%; }
.privacy-stars span:nth-child(2) { left: 88%; top: 14%; animation-delay: 1.2s; }
.privacy-stars span:nth-child(3) { left: 16%; top: 78%; animation-delay: 2.4s; }
.privacy-stars span:nth-child(4) { left: 78%; top: 82%; animation-delay: 3.6s; font-size: 16px; }
.privacy-stars span:nth-child(5) { left: 50%; top: 8%;  animation-delay: 4.5s; }

.privacy-grid {
  max-width: 920px;
  margin: clamp(40px, 6vw, 64px) auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

@media (max-width: 900px) { .privacy-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .privacy-grid { grid-template-columns: 1fr; } }

.privacy-grid li {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px;
  padding: 24px 22px;
  display: grid;
  gap: 6px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.privacy-grid strong { font-size: 1.05rem; letter-spacing: -0.015em; }
.privacy-grid span { color: rgba(255, 255, 255, .66); font-size: .92rem; }

.privacy-link { text-align: center; margin-top: 42px; }
.privacy-link a {
  color: #b9a5ff;
  font-weight: 600;
  transition: color .25s;
}
.privacy-link a:hover { color: #d6cbff; }

/* ── Honest quote ───────────────────────────────────────────── */

.honest blockquote {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.honest p {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.honest footer {
  margin-top: 22px;
  color: var(--ink-2);
  font-size: .95rem;
  font-weight: 600;
}

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

.faq-list {
  max-width: 720px;
  margin: clamp(36px, 5vw, 56px) auto 0;
  border-top: 1px solid var(--line);
}

.faq-list details { border-bottom: 1px solid var(--line); }

.faq-list summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 40px 22px 4px;
  font-weight: 600;
  font-size: 1.06rem;
  letter-spacing: -0.015em;
  position: relative;
  transition: color .25s;
}

.faq-list summary:hover { color: var(--royal); }
.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--ink-2);
  transition: transform .35s var(--ease);
}

.faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }

.faq-list details p {
  padding: 0 4px 24px;
  color: var(--ink-2);
  max-width: 60ch;
}

/* ── Final CTA ──────────────────────────────────────────────── */

.final {
  text-align: center;
  padding: clamp(100px, 14vw, 170px) 24px;
}

.final-icon {
  margin: 0 auto 28px;
  border-radius: 24px;
  box-shadow: 0 12px 40px rgba(91, 47, 212, .3);
}

.final .appstore-badge { margin-top: 34px; }

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

.footer {
  border-top: 1px solid var(--line);
  padding: 34px 24px;
  background: var(--surface);
}

.footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  justify-content: space-between;
  font-size: .88rem;
  color: var(--ink-2);
}

.footer nav { display: flex; gap: 24px; }
.footer nav a:hover { color: var(--ink); }

/* ── Requirements link in the hero ──────────────────────────── */

.req-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 4px;
  padding: 2px 2px 2px 6px;
  font: inherit;
  font-weight: 600;
  color: var(--royal);
  background: none;
  border: 0;
  cursor: pointer;
  border-radius: 6px;
  transition: color .25s;
}

.req-link:hover { color: var(--electric); }
.req-link svg { transition: transform .25s var(--ease); }
.req-link:hover svg { transform: translateX(2px); }

@media (max-width: 560px) {
  .req-link { margin-left: 0; display: flex; justify-content: center; width: 100%; margin-top: 6px; }
}

/* ── Safety & parental control ──────────────────────────────── */

.safety-layout {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 320px);
  gap: clamp(28px, 6vw, 72px);
  align-items: center;
  margin-top: clamp(40px, 6vw, 64px);
}

.safety-points { display: grid; gap: 22px; }

.safety-points h3 {
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 5px;
}

.safety-points p { color: var(--ink-2); font-size: .97rem; }

.safety-points li {
  padding-left: 20px;
  border-left: 2px solid var(--line);
  transition: border-color .4s var(--ease);
}

.safety-points li:hover { border-left-color: var(--royal); }

.safety-phone { display: flex; justify-content: center; }

@media (max-width: 820px) {
  .safety-layout { grid-template-columns: 1fr; }
  .safety-phone { order: -1; }
  .safety-phone .phone { width: min(250px, 64vw); }
}

/* ── Story excerpt ──────────────────────────────────────────── */

.excerpt {
  max-width: 680px;
  margin: clamp(56px, 8vw, 88px) auto 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(30px, 5vw, 52px);
  box-shadow: var(--shadow-soft);
}

.excerpt-label {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--royal);
  margin-bottom: 20px;
}

.excerpt blockquote p {
  font-family: var(--serif);
  font-size: clamp(1.08rem, 2.1vw, 1.28rem);
  line-height: 1.62;
  color: var(--ink);
}

.excerpt blockquote p + p { margin-top: 1.05em; }

/* ── Requirements dialog ────────────────────────────────────── */

.req {
  width: min(560px, calc(100vw - 32px));
  max-height: min(82vh, 760px);
  margin: auto; /* centre in the viewport, both axes */
  padding: 0;
  border: 0;
  border-radius: 26px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 30px 90px rgba(26, 16, 53, .3);
  overflow: hidden;
}

.req::backdrop {
  background: rgba(26, 16, 53, .34);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.req[open] { animation: req-in .34s var(--ease); }

@keyframes req-in {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.req-inner {
  padding: clamp(28px, 5vw, 40px);
  overflow-y: auto;
  max-height: min(82vh, 760px);
  position: relative;
}

.req-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(26, 16, 53, .06);
  color: var(--ink-2);
  cursor: pointer;
  transition: background .25s, color .25s;
}

.req-close:hover { background: rgba(26, 16, 53, .11); color: var(--ink); }

.req h2 {
  font-size: clamp(1.5rem, 3.6vw, 1.95rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  padding-right: 40px;
}

.req-lead { color: var(--ink-2); margin-top: 10px; font-size: .98rem; }

.req-block {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.req-block h3 {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--royal);
  margin-bottom: 9px;
}

.req-block p { font-size: .98rem; }
.req-block p + p { margin-top: 7px; }
.req-block strong { font-weight: 600; }
.req-muted { color: var(--ink-2); font-size: .9rem !important; }

.req-block ul { display: grid; gap: 7px; font-size: .98rem; }

.req-block li {
  padding-left: 20px;
  position: relative;
}

.req-block li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--royal);
}

.req-source {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: .87rem;
  color: var(--ink-2);
}

.req-source a {
  display: inline-block;
  margin-top: 6px;
  color: var(--royal);
  font-weight: 600;
}

.req-source a:hover { color: var(--electric); }

/* ── Legal pages (privacy / terms / support) ────────────────── */

.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(110px, 16vh, 150px) 24px clamp(70px, 10vw, 110px);
}

.legal h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.06;
}

.legal .meta {
  color: var(--ink-2);
  margin-top: 12px;
  font-size: .92rem;
}

.legal .lead {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  color: var(--ink-2);
  margin-top: 22px;
  line-height: 1.6;
}

.legal h2 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 52px 0 12px;
  scroll-margin-top: 80px;
}

.legal h3 {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 28px 0 8px;
}

.legal p, .legal li { color: var(--ink-2); margin-top: 10px; line-height: 1.65; }
.legal strong { color: var(--ink); font-weight: 600; }

.legal ul { margin-top: 12px; }

.legal li {
  padding-left: 20px;
  position: relative;
}

.legal li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .78em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--royal);
}

.legal a { color: var(--royal); font-weight: 600; }
.legal a:hover { color: var(--electric); }

/* callout for the parts people actually need to notice */
.legal .callout {
  margin-top: 26px;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--royal);
  border-radius: 16px;
}

.legal .callout p:first-child { margin-top: 0; }

.legal .toc {
  margin-top: 34px;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.legal .toc p {
  margin: 0 0 10px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--royal);
}

.legal .toc ol { display: grid; gap: 7px; counter-reset: toc; }
.legal .toc li { padding-left: 26px; margin-top: 0; }
.legal .toc li::before {
  counter-increment: toc;
  content: counter(toc);
  background: none;
  width: auto;
  height: auto;
  top: 0;
  left: 4px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink-2);
}

/* uppercase blocks that disclaimers legally want to stand out */
.legal .allcaps {
  text-transform: uppercase;
  font-size: .86rem;
  letter-spacing: .01em;
  line-height: 1.6;
}

/* ── Scroll reveal ──────────────────────────────────────────── */

.has-js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--d, 0s);
}

.has-js .reveal.in { opacity: 1; transform: none; }

/* ── Reduced motion ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-seq, .reveal,
  .has-js .hero-seq, .has-js .reveal { animation: none; opacity: 1; transform: none; transition: none; }
  .hero-glow, .hero-sparkles span, .privacy-stars span { animation: none; }
  .phone { transition: none; }
  .story-img { transition: opacity .2s linear; transform: none; }
  .card:hover, .world:hover, .appstore-badge:hover, .nav-cta:hover { transform: none; }
}