/* ==========================================================================
   Food Replay — marketing site
   Tokens are lifted verbatim from the "Food Hero Design System" v1.0 (app design system; brand renamed Food Replay).
   Brand laws: no red anywhere; violet-tinted shadows; light from above,
   warm; radius language 999/36/28/16; Fredoka display + Nunito text.
   ========================================================================== */

/* ---------- Fonts (self-hosted variable subsets) ---------- */
@font-face {
  font-family: "Fredoka";
  src: url("../fonts/fredoka-var.woff2") format("woff2");
  font-weight: 300 700;
  font-stretch: 75% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-var.woff2") format("woff2");
  font-weight: 200 1000;
  font-display: swap;
}

/* ---------- Design tokens (source of truth: design system §01–§04) ---------- */
:root {
  /* Aurora ramp */
  --aurora-50:#F4F1FF; --aurora-100:#E8E2FF; --aurora-200:#D3C7FF;
  --aurora-300:#B7A4FF; --aurora-400:#9B82FB; --aurora-500:#7C5CF0;
  --aurora-600:#6544D6; --aurora-700:#4F32AC; --aurora-800:#3A2480;
  --aurora-900:#241553;
  /* Meadow ramp */
  --meadow-50:#EFFBF4; --meadow-100:#D8F5E6; --meadow-200:#B2ECCF;
  --meadow-300:#82DEB2; --meadow-400:#4FCB94; --meadow-500:#2FB57C;
  --meadow-600:#219665; --meadow-brand:#79C94F;
  /* Sunbeam ramp */
  --sun-50:#FFF6EE; --sun-100:#FFE9D4; --sun-200:#FFD3A8;
  --sun-300:#FFB772; --sun-400:#FF9C46; --sun-500:#FB8329;
  --sun-brand:#FFC24B;
  /* Semantic — five states, none punitive (design system §01.2) */
  --growth:#2FB57C; --guide:#5AA7F2; --nudge:#F2A93B;
  --celebrate:#FF6FA5; --rest:#8A8699;
  /* Daylight surfaces (§01.6) */
  --canvas:#FBFAFF; --card:#FFFFFF; --sunken:#F2EFFB;
  --ink:#1E1A2B; --muted:#6B6480;
  /* Nightlight surfaces (§01.7) */
  --night-bg:#14121C; --night-card:#1D1A28; --night-raised:#262233;
  --night-text:#F2EFFA; --night-muted:#A9A2BE; --night-primary:#A78BFF;
  /* Radius language (§03) */
  --r-press:999px; --r-sheet:36px; --r-card:28px; --r-chip:16px;
  /* Elevation — violet-tinted, never grey (§04) */
  --sh-rest:0 2px 6px rgba(101,68,214,.16);
  --sh-card:0 10px 24px rgba(101,68,214,.14);
  --sh-float:0 20px 44px rgba(79,50,172,.22);
  --sh-hero:0 32px 64px rgba(58,36,128,.28);
  --inset-top:inset 0 1px 0 rgba(255,255,255,.65);
  /* Type */
  --display:"Fredoka",system-ui,sans-serif;
  --text:"Nunito",system-ui,sans-serif;
  /* Layout */
  --w-content:1120px; --w-prose:70ch;
  --pad-x:clamp(20px, 5vw, 48px);
}

/* ---------- Reset-ish ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:clip; -webkit-text-size-adjust:100%; }
body {
  margin:0; font-family:var(--text); color:var(--ink);
  background:var(--canvas); font-size:17px; line-height:1.65;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img,svg,video { max-width:100%; height:auto; display:block; }
a { color:var(--aurora-600); text-decoration-thickness:.08em; text-underline-offset:.16em; }
a:hover { color:var(--aurora-500); }
:focus-visible { outline:4px solid var(--aurora-300); outline-offset:3px; border-radius:8px; }
::selection { background:var(--aurora-200); color:var(--aurora-900); }

h1,h2,h3 { font-family:var(--display); font-weight:600; color:var(--aurora-900); text-wrap:balance; margin:0 0 .45em; }
h1 { font-size:clamp(2.5rem, 6.4vw, 4.35rem); line-height:1.02; letter-spacing:-.03em; }
h2 { font-size:clamp(1.85rem, 4vw, 2.8rem); line-height:1.08; letter-spacing:-.02em; }
h3 { font-size:clamp(1.25rem, 2.4vw, 1.55rem); line-height:1.2; letter-spacing:-.01em; font-weight:500; }
h4 { font-family:var(--text); font-weight:800; font-size:1.06rem; margin:0 0 .4em; color:var(--aurora-900); }
p { margin:0 0 1.1em; }
.lede { font-size:clamp(1.1rem, 2vw, 1.3rem); line-height:1.55; color:var(--muted); max-width:56ch; }

.skip-link {
  position:absolute; left:-9999px; top:12px; z-index:200;
  background:var(--aurora-900); color:#fff; padding:12px 22px; border-radius:var(--r-press);
  font-weight:800; text-decoration:none;
}
.skip-link:focus { left:12px; }

/* ---------- Grain — the human tell ---------- */
body::after {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:90;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

/* ---------- Header ---------- */
.site-header {
  position:sticky; top:0; z-index:100; padding:14px var(--pad-x);
  transition:transform .3s ease;
}
.site-header .bar {
  max-width:var(--w-content); margin:0 auto;
  display:flex; align-items:center; gap:18px; justify-content:space-between;
  background:rgba(255,255,255,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid #EFE8FA; border-radius:var(--r-press);
  padding:10px 12px 10px 20px; box-shadow:var(--sh-rest), var(--inset-top);
}
.logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.logo strong { font-family:var(--display); font-weight:600; font-size:1.3rem; color:var(--aurora-900); letter-spacing:-.02em; }
.logo .nova-mark { width:34px; height:34px; flex:none; }
.main-nav { display:flex; align-items:center; gap:4px; }
.main-nav a {
  font-weight:800; font-size:.92rem; color:var(--aurora-900); text-decoration:none;
  padding:10px 14px; border-radius:var(--r-press); min-height:44px; display:inline-flex; align-items:center;
}
.main-nav a:hover { background:var(--sunken); }
.main-nav a[aria-current="page"] { background:var(--aurora-100); color:var(--aurora-700); }
.header-cta { flex:none; }

.nav-toggle { display:none; }

@media (max-width: 900px) {
  .main-nav {
    display:none; position:absolute; top:calc(100% + 8px); left:var(--pad-x); right:var(--pad-x);
    flex-direction:column; align-items:stretch; gap:6px;
    background:#fff; border:1px solid #EFE8FA; border-radius:var(--r-card);
    padding:14px; box-shadow:var(--sh-float);
  }
  .main-nav a { min-height:48px; font-size:1.05rem; }
  .site-header.nav-open .main-nav { display:flex; }
  .nav-toggle {
    display:inline-flex; align-items:center; justify-content:center;
    width:48px; height:48px; border:0; background:var(--sunken);
    border-radius:var(--r-press); cursor:pointer; color:var(--aurora-900);
  }
  .header-cta .btn { padding:12px 18px; font-size:.9rem; }
}
@media (max-width: 560px) { .header-cta { display:none; } }

/* ---------- Buttons — pill, min 56px, squash on press (§03) ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:56px; padding:15px 30px; border-radius:var(--r-press);
  font-family:var(--text); font-weight:800; font-size:1.02rem; letter-spacing:.01em;
  text-decoration:none; border:0; cursor:pointer;
  transition:transform .18s cubic-bezier(.34,1.4,.5,1), box-shadow .18s ease, background .18s ease;
  will-change:transform;
}
.btn:active { transform:scale(.955); }
.btn-primary { background:linear-gradient(150deg, var(--aurora-500), var(--aurora-600)); color:#fff; box-shadow:var(--sh-card), var(--inset-top); }
.btn-primary:hover { box-shadow:var(--sh-float); transform:translateY(-2px); color:#fff; }
.btn-sun { background:linear-gradient(150deg, var(--sun-brand), var(--sun-400)); color:#3A1A04; box-shadow:var(--sh-card), var(--inset-top); }
.btn-sun:hover { box-shadow:var(--sh-float); transform:translateY(-2px); color:#3A1A04; }
.btn-ghost { background:rgba(255,255,255,.85); color:var(--aurora-700); border:2px solid var(--aurora-200); }
.btn-ghost:hover { background:#fff; border-color:var(--aurora-300); color:var(--aurora-700); }
.btn-night { background:var(--night-raised); color:var(--night-text); border:1px solid rgba(255,255,255,.16); }
.btn-night:hover { background:#2E2940; color:#fff; }

/* Store badges */
.store-row { padding-top:14px; padding-bottom:18px; display:flex; flex-wrap:wrap; gap:14px; align-items:center; overflow:visible; }
.store-badge {
  display:inline-flex; align-items:center; gap:12px; min-height:60px;
  background:var(--aurora-900); color:#fff; border-radius:18px; padding:10px 20px 10px 14px;
  text-decoration:none; box-shadow:var(--sh-card);
  transition:transform .18s cubic-bezier(.34,1.4,.5,1), box-shadow .18s ease;
}
.store-badge:hover { transform:translateY(-2px); box-shadow:var(--sh-float); color:#fff; }
.store-badge:active { transform:scale(.955); }
.store-badge svg { width:26px; height:26px; flex:none; }
.store-badge .lines { display:flex; flex-direction:column; line-height:1.15; text-align:left; }
.store-badge .small { font-size:.68rem; font-weight:700; color:#EDE9FA; letter-spacing:.04em; text-transform:uppercase; }
.store-badge .big { font-family:var(--display); font-weight:500; font-size:1.12rem; letter-spacing:.01em; }
.store-badge.on-dark { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); }

/* ---------- Trust strip — repeated near every CTA ---------- */
.trust-strip {
  display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center;
  font-size:.86rem; font-weight:700; color:var(--muted); margin-top:16px;
}
.trust-strip span { display:inline-flex; align-items:center; gap:7px; }
.trust-strip .dot { width:8px; height:8px; border-radius:50%; background:var(--meadow-400); flex:none; }
.on-dark .trust-strip, .trust-strip.on-dark { color:var(--night-muted); }

/* ---------- Journey sections (home) ---------- */
.journey-section { position:relative; padding:clamp(72px,10vw,130px) var(--pad-x); }
.journey-inner { max-width:var(--w-content); margin:0 auto; position:relative; }

/* World skies — day drifts to night as you scroll (mirrors app surface modes) */
.sky-vale   { background:linear-gradient(178deg, #FDF3F7 0%, #F4F1FF 42%, #EDF9F0 100%); }
.sky-reef   { background:linear-gradient(178deg, #EDF9F0 0%, #ECFBFE 40%, #D3F3FA 100%); }
.sky-grove  { background:linear-gradient(178deg, #D3F3FA 0%, #FFF6E3 34%, #FFE9D4 100%); }
.sky-dusk   { background:linear-gradient(178deg, #FFE9D4 0%, #C9B8FF 46%, #4F3F73 100%); }
.sky-night  { background:linear-gradient(178deg, #4F3F73 0%, #241553 40%, #14121C 100%); color:var(--night-text); }
.sky-dawn   { background:linear-gradient(178deg, #14121C 0%, #3A2480 44%, #F4F1FF 100%); }
.sky-night h2, .sky-night h3, .sky-dusk h2 { color:var(--night-text); }
.sky-dawn h2 { color:var(--night-text); }
.sky-dawn .lede { color:var(--night-muted); }
.sky-dawn .card h2, .sky-dawn .card h3 { color:var(--aurora-900); }
.sky-dawn .card .lede, .sky-dawn .card p { color:var(--text); }
.sky-night p, .sky-dusk p { color:var(--night-muted); }
.sky-night .lede, .sky-dusk .lede { color:var(--night-muted); }

/* Terrain dividers between worlds — hand-wobbled SVG hills */
.terrain { display:block; width:100%; height:auto; margin-bottom:-2px; }
.terrain-flip { transform:scaleX(-1); }

/* World label — the map waypoint */
.waypoint {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--display); font-weight:500; font-size:.95rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--aurora-600);
  background:rgba(255,255,255,.8); border:1px solid var(--aurora-100);
  padding:8px 18px; border-radius:var(--r-press); margin-bottom:22px;
  box-shadow:var(--sh-rest);
}
.waypoint .pip { width:10px; height:10px; border-radius:50%; flex:none; }
.sky-night .waypoint, .sky-dusk .waypoint {
  background:rgba(21,12,51,.72); border-color:rgba(255,255,255,.16); color:var(--sun-brand);
}

/* ---------- Journey map rail (desktop nav-as-map) ---------- */
.journey-map {
  position:fixed; right:26px; top:50%; transform:translateY(-50%); z-index:95;
  display:flex; flex-direction:column; gap:16px; padding:14px 10px;
  background:rgba(255,255,255,.78); backdrop-filter:blur(10px);
  border-radius:var(--r-press); border:1px solid #EFE8FA; box-shadow:var(--sh-rest);
}
.journey-map a { width:14px; height:14px; border-radius:50%; background:var(--aurora-200); display:block; position:relative; }
.journey-map a:hover { background:var(--aurora-400); }
.journey-map a.active { background:var(--aurora-600); box-shadow:0 0 0 4px var(--aurora-100); }
.journey-map a .tip {
  position:absolute; right:26px; top:50%; transform:translateY(-50%);
  white-space:nowrap; font-size:.8rem; font-weight:800; color:var(--aurora-900);
  background:#fff; border-radius:10px; padding:5px 11px; box-shadow:var(--sh-card);
  opacity:0; pointer-events:none; transition:opacity .15s ease;
}
.journey-map a:hover .tip, .journey-map a:focus-visible .tip { opacity:1; }
@media (max-width: 1279px) { .journey-map { display:none; } }

/* ---------- Nova, the scroll companion ---------- */
.nova-companion {
  position:fixed; left:22px; bottom:22px; z-index:96; width:76px;
  pointer-events:none; filter:drop-shadow(0 10px 20px rgba(79,50,172,.3));
}
.nova-companion .bubble {
  position:absolute; left:64px; bottom:52px; width:max-content; max-width:210px;
  background:#fff; color:var(--aurora-900); font-size:.85rem; font-weight:700; line-height:1.35;
  padding:10px 14px; border-radius:18px 18px 18px 4px; box-shadow:var(--sh-card);
  opacity:0; transform:translateY(6px); transition:opacity .35s ease, transform .35s ease;
}
.nova-companion.speaking .bubble { opacity:1; transform:translateY(0); }
.nova-body {
  width:64px; height:64px; position:relative;
  background:linear-gradient(150deg, #C9B8FF, var(--aurora-500));
  border-radius:58% 42% 46% 54% / 52% 48% 52% 48%;
  animation:nova-breathe 4s ease-in-out infinite, nova-morph 11s ease-in-out infinite;
}
.nova-body::before {
  content:""; position:absolute; inset:-11px; border-radius:50%; z-index:-1;
  background:radial-gradient(circle, rgba(183,164,255,.55), transparent 70%);
  animation:nova-aura 3s ease-in-out infinite;
}
.nova-eye { position:absolute; top:24px; width:9px; height:13px; border-radius:5px; background:var(--aurora-900); transition:transform .3s ease, height .2s ease; }
.nova-eye.l { left:19px; } .nova-eye.r { left:36px; }
.nova-companion.blink .nova-eye { height:3px; transform:translateY(5px); }
.nova-companion.night .nova-body { background:linear-gradient(150deg,#8C93C8,#4A4F86); animation-duration:8s, 14s; }
.nova-companion.night .nova-body::before { background:radial-gradient(circle, rgba(91,107,168,.5), transparent 70%); }
@media (max-width: 767px) {
  .nova-companion { width:56px; left:14px; bottom:14px; }
  .nova-body { width:48px; height:48px; }
  .nova-eye { top:18px; width:7px; height:10px; } .nova-eye.l{left:14px;} .nova-eye.r{left:27px;}
  .nova-companion .bubble { left:50px; bottom:40px; max-width:180px; font-size:.8rem; }
}

@keyframes nova-breathe { 0%,100%{transform:scale(1) translateY(0);} 50%{transform:scale(1.045) translateY(-6px);} }
@keyframes nova-morph { 0%,100%{border-radius:58% 42% 46% 54% / 52% 48% 52% 48%;} 50%{border-radius:44% 56% 60% 40% / 46% 58% 42% 54%;} }
@keyframes nova-aura { 0%,100%{transform:scale(.92);opacity:.55;} 50%{transform:scale(1.12);opacity:.9;} }
@keyframes floaty { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
@keyframes drifty { 0%{transform:translate(0,0) rotate(0);} 50%{transform:translate(10px,-14px) rotate(6deg);} 100%{transform:translate(0,0) rotate(0);} }

/* ---------- Device mockups — real app screens only ---------- */
.device {
  position:relative; border-radius:44px; background:var(--aurora-900);
  padding:12px; box-shadow:var(--sh-hero);
  width:min(300px, 78vw);
}
.device::before { /* speaker notch pill */
  content:""; position:absolute; top:24px; left:50%; transform:translateX(-50%);
  width:86px; height:22px; background:var(--aurora-900); border-radius:12px; z-index:2;
}
.device img { border-radius:34px; width:100%; }
.device.tablet { width:min(560px, 92vw); border-radius:32px; padding:14px; }
.device.tablet::before { display:none; }
.device.tablet img { border-radius:20px; }
.device-tilt-l { transform:rotate(-5deg); }
.device-tilt-r { transform:rotate(4.5deg); }
.device-caption {
  position:absolute; z-index:3; left:50%; bottom:-18px; transform:translateX(-50%) rotate(-2deg);
  background:var(--sun-brand); color:#3A1A04; font-weight:800; font-size:.82rem;
  padding:8px 16px; border-radius:var(--r-press); white-space:nowrap; box-shadow:var(--sh-card);
}

.split > *, .grid-2 > *, .grid-3 > * { min-width:0; }

/* Overlapping device cluster */
.device-cluster { position:relative; display:flex; justify-content:center; align-items:flex-end; max-width:100%; }
.device-cluster .device { flex:0 0 auto; }
.device-cluster .device + .device { margin-left:-64px; }
@media (max-width:640px) {
  .device-cluster .device { width:min(228px, 56vw); }
  .device-cluster .device + .device { margin-left:-28vw; }
  .device-cluster .device::before { width:64px; height:16px; top:18px; }
}

/* ---------- Stickers & arc text — deliberate grid breaks ---------- */
.sticker {
  display:inline-block; font-family:var(--display); font-weight:500;
  background:#fff; border-radius:var(--r-press); padding:10px 20px;
  box-shadow:var(--sh-card); border:1px solid var(--aurora-100);
}
.sticker.rot-l { transform:rotate(-3.5deg); } .sticker.rot-r { transform:rotate(2.5deg); }
.arc-text { overflow:visible; }
.arc-text text { font-family:var(--display); font-weight:600; letter-spacing:.3em; text-transform:uppercase; fill:var(--aurora-400); font-size:13px; }

/* ---------- Cards ---------- */
.card {
  background:var(--card); border-radius:var(--r-card); padding:30px;
  box-shadow:var(--sh-card), var(--inset-top);
}
.card-sunken { background:var(--sunken); box-shadow:none; }
.card-night { background:var(--night-card); color:var(--night-text); border:1px solid rgba(255,255,255,.08); }
.card-night h3, .card-night h4 { color:var(--night-text); }
.card-night p { color:var(--night-muted); }

.grid-2 { display:grid; gap:26px; grid-template-columns:1fr; }
.grid-3 { display:grid; gap:26px; grid-template-columns:1fr; }
@media (min-width:720px) { .grid-2 { grid-template-columns:1fr 1fr; } .grid-3 { grid-template-columns:repeat(3,1fr); } }

.split { display:grid; gap:clamp(36px,6vw,80px); grid-template-columns:1fr; align-items:center; }
@media (min-width:920px) {
  .split { grid-template-columns:1.06fr .94fr; }
  .split.flip > .split-media { order:-1; }
}
.split-media { display:flex; justify-content:center; position:relative; }

/* Power chips — the five powers with load-bearing shapes */
.power-chips { display:flex; flex-wrap:wrap; gap:12px; margin:18px 0 6px; padding:0; list-style:none; }
.power-chips li {
  display:inline-flex; align-items:center; gap:9px; font-weight:800; font-size:.9rem;
  background:#fff; border-radius:var(--r-press); padding:9px 16px; box-shadow:var(--sh-rest);
}
.pshape { width:16px; height:16px; flex:none; display:inline-block; }

/* ---------- Interior page hero ---------- */
.page-hero { padding:clamp(56px,8vw,96px) var(--pad-x) clamp(36px,5vw,60px); }
.page-hero .journey-inner { max-width:var(--w-content); }
.breadcrumbs { font-size:.85rem; font-weight:700; color:var(--muted); margin-bottom:18px; }
.breadcrumbs ol { list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; }
.breadcrumbs li + li::before { content:"→"; margin-right:6px; color:var(--aurora-300); }
.breadcrumbs a { color:var(--muted); }

.section { padding:clamp(48px,7vw,88px) var(--pad-x); }
.section-inner { max-width:var(--w-content); margin:0 auto; }
.section-tint { background:var(--sunken); }

/* ---------- Prose (articles) ---------- */
.prose { max-width:var(--w-prose); margin:0 auto; font-size:1.08rem; }
.prose h2 { margin-top:2em; font-size:clamp(1.5rem,3vw,2rem); }
.prose h3 { margin-top:1.6em; }
.prose ul, .prose ol { padding-left:1.3em; margin:0 0 1.2em; }
.prose li { margin-bottom:.5em; }
.prose li::marker { color:var(--aurora-400); font-weight:800; }
.prose table { width:100%; border-collapse:collapse; margin:1.4em 0; font-size:.98rem; }
.prose th { text-align:left; font-weight:800; color:var(--aurora-900); background:var(--sunken); }
.prose th, .prose td { padding:12px 14px; border-bottom:1px solid #EFE8FA; }
.prose tr:last-child td { border-bottom:0; }
.prose table { border-radius:var(--r-chip); overflow:hidden; box-shadow:var(--sh-rest); }
.prose blockquote {
  margin:1.6em 0; padding:18px 24px; border-left:5px solid var(--sun-brand);
  background:var(--sun-50); border-radius:0 var(--r-chip) var(--r-chip) 0;
  font-weight:600; color:#5A3A10;
}

/* Direct-answer block — AEO snippet target, first thing under the H1 */
.direct-answer {
  background:linear-gradient(150deg, var(--aurora-50), #fff);
  border:2px solid var(--aurora-100); border-radius:var(--r-card);
  padding:24px 28px; margin:0 0 2em; font-size:1.12rem; font-weight:600;
  color:var(--aurora-900); box-shadow:var(--sh-rest);
}
.direct-answer .da-label {
  display:inline-block; font-family:var(--display); font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--aurora-500); margin-bottom:8px; font-weight:600;
}

/* Key takeaways box */
.takeaways {
  background:var(--meadow-50); border:2px solid var(--meadow-200);
  border-radius:var(--r-card); padding:26px 30px; margin:2em 0;
}
.takeaways h2, .takeaways h3 { margin-top:0; color:#12563B; font-size:1.3rem; }
.takeaways ul { margin-bottom:0; }
.takeaways li::marker { color:var(--meadow-500); }

/* Quotable block — GEO: easy to cite verbatim */
.quotable {
  position:relative; background:var(--aurora-900); color:var(--night-text);
  border-radius:var(--r-card); padding:34px 36px; margin:2em 0;
  box-shadow:var(--sh-float);
}
.quotable p { color:var(--night-text); font-size:1.1rem; }
.quotable p:last-of-type { margin-bottom:0; }
.quotable .q-label {
  font-family:var(--display); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sun-brand); display:block; margin-bottom:12px;
}

/* ---------- FAQ accordion ---------- */
.faq-group h2 { margin-top:1.8em; }
details.faq {
  background:#fff; border-radius:var(--r-chip); margin-bottom:12px;
  box-shadow:var(--sh-rest); border:1px solid #F1EBFF; overflow:hidden;
}
details.faq summary {
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:18px 22px; font-weight:800; font-size:1.02rem; color:var(--aurora-900); min-height:56px;
}
details.faq summary::-webkit-details-marker { display:none; }
details.faq summary::after {
  content:"+"; font-family:var(--display); font-size:1.5rem; color:var(--aurora-400);
  transition:transform .25s cubic-bezier(.34,1.4,.5,1); flex:none; line-height:1;
}
details.faq[open] summary::after { transform:rotate(45deg); }
details.faq .faq-a { padding:0 22px 20px; }
details.faq .faq-a p:last-child { margin-bottom:0; }

/* ---------- Footer — the journey's basecamp ---------- */
.site-footer { background:var(--aurora-900); color:var(--night-muted); padding:0; margin-top:0; }
.site-footer .footer-inner { max-width:var(--w-content); margin:0 auto; padding:64px var(--pad-x) 40px; }
.footer-grid { display:grid; gap:36px; grid-template-columns:1fr; }
@media (min-width:760px) { .footer-grid { grid-template-columns:1.4fr 1fr 1fr 1fr; } }
.site-footer h4, .site-footer .foot-h { color:#fff; font-family:var(--display); font-weight:500; font-size:1rem; letter-spacing:.04em; }
.site-footer ul { list-style:none; margin:0; padding:0; }
.site-footer li { margin-bottom:10px; }
.site-footer a { color:var(--night-muted); text-decoration:none; }
.site-footer a:hover { color:#fff; text-decoration:underline; }
.footer-legal { border-top:1px solid rgba(255,255,255,.12); margin-top:44px; padding-top:24px; display:flex; flex-wrap:wrap; gap:12px 26px; font-size:.85rem; justify-content:space-between; }
.footer-brand p { max-width:34ch; }

/* ---------- Email capture ---------- */
.kit-form { display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; }
.kit-form input[type="email"] {
  flex:1 1 240px; min-height:56px; border-radius:var(--r-press); border:2px solid var(--aurora-200);
  padding:14px 22px; font-family:var(--text); font-size:1rem; font-weight:600; color:var(--ink);
  background:#fff;
}
.kit-form input[type="email"]:focus { outline:4px solid var(--aurora-200); border-color:var(--aurora-400); }
.kit-note { font-size:.85rem; color:var(--muted); font-weight:600; margin-top:10px; }
.on-dark .kit-note { color:var(--night-muted); }

/* ---------- Reveal on scroll (JS-gated so content never hides without JS) ---------- */
.js .reveal { opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.js .reveal.in { opacity:1; transform:none; }
.js .reveal-d1 { transition-delay:.08s; } .js .reveal-d2 { transition-delay:.16s; } .js .reveal-d3 { transition-delay:.24s; }

/* Parallax layers */
.plx { will-change:transform; }

/* Float loops (ambient, low amplitude — §07) */
.floaty { animation:floaty 3.6s ease-in-out infinite; }
.floaty.f2 { animation-delay:.6s; animation-duration:4.2s; }
.floaty.f3 { animation-delay:1.1s; animation-duration:4.8s; }
.drifty { animation:drifty 14s ease-in-out infinite; }

/* ---------- 404 ---------- */
.lost-hero { min-height:72vh; display:flex; align-items:center; }

/* ---------- Compare table page-level ---------- */
.badge-soft {
  display:inline-block; background:var(--meadow-100); color:#12563B;
  font-weight:800; font-size:.8rem; padding:5px 13px; border-radius:var(--r-press);
}

/* ---------- Reduced motion: ambient stops, springs collapse (§07) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after {
    animation-duration:.001s !important; animation-iteration-count:1 !important;
    transition-duration:.001s !important;
  }
  .js .reveal { opacity:1; transform:none; }
  .nova-companion .bubble { transition:none; }
  .plx { transform:none !important; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .journey-map, .nova-companion, .site-footer, .kit-form { display:none; }
  body::after { display:none; }
}

h3.h4 { font-size:1.05rem; margin:0 0 8px; }

.foot-h { font-family:var(--display); font-weight:600; font-size:.95rem; color:#fff; margin:0 0 14px; }

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Launching-Soon / waitlist ──────────────────────────────────── */
.wl-row { display:flex; gap:10px; flex-wrap:wrap; }
.wl-row input[type=email] { transition:border-color .2s; }
.wl-row input[type=email]:focus { border-color:var(--aurora-500); }
.wl-note { font-size:.82rem; color:var(--muted); margin:10px 0 0; }
.wl-counter { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:30px; }
.wl-bubble { display:inline-flex; align-items:center; gap:6px; background:var(--aurora-50); border:1.5px solid var(--aurora-100); border-radius:999px; padding:7px 16px; font-size:.88rem; font-weight:700; color:var(--aurora-700); }
/* Launching-soon badge overlay */
.store-badge.badge-soon { cursor:default; position:relative; opacity:1; overflow:visible; }
.soon-chip {
  display:inline-block;
  background:linear-gradient(135deg,#FFC24B,#FB8329);
  color:#241553;
  font-size:.55rem; font-weight:900;
  letter-spacing:.08em; text-transform:uppercase;
  border-radius:999px;
  padding:2px 9px;
  white-space:nowrap;
  position:absolute;
  bottom:-12px; left:50%; transform:translateX(-50%);
  border:2px solid #fff;
  box-shadow:0 2px 8px rgba(251,131,41,.4);
  z-index:10;
  pointer-events:none;
}

/* Tablet device mockup in clusters */
.device-tablet {
  border-radius:28px;
  width:min(380px,88vw);
}
.device-tablet::before { display:none; } /* no phone notch */
.device-tablet img { border-radius:22px; }

/* ── Hide-on-scroll header ───────────────────────────────────── */
.site-header {
  transition: transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s;
}
.site-header.header-scroll {
  box-shadow: 0 2px 20px -8px rgba(45,28,90,.22);
}
.site-header.header-hidden {
  transform: translateY(-110%);
}
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}



/* ══════════════════════════════════════════════════════════════════
   HERO — creative iPhone + iPad composition (no overlap collision)
   Layout: iPad angled behind-right, iPhone upright front-left,
   the two clearly separated with the phone in front of the iPad's
   LEFT edge only, never centred on it.
   ══════════════════════════════════════════════════════════════════ */
.hero-stage {
  position: relative;
  width: 100%;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* soft aura glow behind the devices */
.hero-stage::before {
  content: "";
  position: absolute;
  width: 78%; height: 78%;
  right: 4%; top: 8%;
  background: radial-gradient(circle at 60% 40%, rgba(124,92,240,.28), rgba(200,107,232,.12) 45%, transparent 70%);
  filter: blur(20px);
  z-index: 0;
}
/* iPad — the big canvas, tilted, on the right */
.hero-ipad {
  position: absolute;
  right: -2%;
  top: 4%;
  width: 74%;
  margin: 0;
  border-radius: 26px;
  overflow: hidden;
  background: #0e0a1e;
  padding: 8px;
  box-shadow: 0 40px 80px -28px rgba(45,28,90,.62), 0 0 0 2px rgba(45,28,90,.12);
  transform: rotate(3deg);
  z-index: 1;
}
.hero-ipad img { width: 100%; height: auto; display: block; border-radius: 20px; }
/* iPhone — upright, front-left, clearly its own object */
.hero-phone {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30%;
  min-width: 168px;
  max-width: 236px;
  margin: 0;
  border-radius: 34px;
  background: #0e0a1e;
  padding: 7px;
  box-shadow: 0 34px 60px -20px rgba(45,28,90,.75), 0 0 0 2px rgba(45,28,90,.14);
  transform: rotate(-4deg);
  z-index: 3;
}
.hero-phone img { width: 100%; height: auto; display: block; border-radius: 28px; }
.hero-phone::before {
  content: "";
  position: absolute;
  top: 15px; left: 50%;
  transform: translateX(-50%);
  width: 46px; height: 13px;
  background: #0e0a1e;
  border-radius: 8px;
  z-index: 4;
}
/* floating "5 powers" chip badge on the stage for delight */
.hero-badge {
  position: absolute;
  z-index: 5;
  background: #fff;
  border-radius: 16px;
  padding: 10px 14px;
  box-shadow: 0 16px 32px -12px rgba(45,28,90,.4);
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: .82rem;
  color: var(--aurora-900);
}
.hero-badge-a { top: 12%; right: 2%; }
.hero-badge-b { bottom: 14%; right: 8%; }
.hero-badge .hb-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }

@media (max-width: 900px) {
  .hero-stage { min-height: 480px; }
  .hero-ipad { width: 80%; right: -6%; }
  .hero-phone { width: 36%; min-width: 150px; }
  .hero-badge { display: none; }
}
@media (max-width: 640px) {
  .hero-stage {
    min-height: 0;
    flex-direction: column;
    gap: 0;
  }
  .hero-stage::before { display: none; }
  .hero-ipad {
    position: relative;
    right: auto; top: auto;
    width: 100%;
    transform: rotate(0);
    margin: 0 0 -14% 0;
  }
  .hero-phone {
    position: relative;
    left: auto; bottom: auto;
    width: 46%;
    margin: 0 auto;
    transform: rotate(-3deg);
    align-self: flex-start;
    margin-left: 6%;
  }
}

/* ══════════════════════════════════════════════════════════════════
   HOME comic teaser — fanned cards
   ══════════════════════════════════════════════════════════════════ */
.comic-teaser-fan {
  position: relative;
  width: 100%;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.comic-teaser-card {
  position: absolute;
  width: 56%;
  max-width: 260px;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 48px -18px rgba(45,28,90,.6), 0 0 0 1.5px rgba(255,255,255,.08);
  line-height: 0;
}
.comic-teaser-card img { width: 100%; height: auto; display: block; }
.comic-teaser-card.ct-front  { z-index: 3; transform: rotate(0deg) translateY(-6px); }
.comic-teaser-card.ct-back-l { z-index: 1; transform: rotate(-9deg) translate(-42%, 14px); }
.comic-teaser-card.ct-back-r { z-index: 2; transform: rotate(8deg) translate(42%, 10px); }
@media (max-width: 640px) {
  .comic-teaser-fan { min-height: 340px; }
  .comic-teaser-card { width: 52%; }
  .comic-teaser-card.ct-back-l { transform: rotate(-8deg) translate(-36%, 12px); }
  .comic-teaser-card.ct-back-r { transform: rotate(7deg) translate(36%, 8px); }
}

/* ══════════════════════════════════════════════════════════════════
   COMICS PAGE
   ══════════════════════════════════════════════════════════════════ */
.comics-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(90px, 14vh, 150px) var(--pad-x) clamp(70px, 10vh, 110px);
  background: linear-gradient(178deg, #2a1c52 0%, #1a1030 60%, #14121c 100%);
}

.comics-story-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
}
.comics-story {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
.comics-story:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -24px rgba(0,0,0,.5); }
.comics-story-feature {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 28px 56px -20px rgba(45,28,90,.7);
}
.comics-story-frame { line-height: 0; overflow: hidden; }
.comics-story-frame img { width: 100%; height: auto; display: block; }
.comics-story-body { padding: 20px 22px 24px; }
.comics-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-weight: 600;
  font-size: .92rem;
  color: #fff;
  margin-bottom: 10px;
}
.comics-dot { width: 13px; height: 13px; border-radius: 50%; flex: none; }
.comics-story-body h3 { color: #fff; margin: 0 0 8px; font-size: 1.15rem; }
.comics-story-body p { color: rgba(255,255,255,.78); font-size: .92rem; line-height: 1.6; margin: 0; }
@media (max-width: 860px) {
  .comics-story-grid { grid-template-columns: 1fr; max-width: 460px; }
}

/* Reader showcase */
.comics-reader-showcase {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 44px;
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
}
.comics-reader-frame {
  margin: 0;
  border-radius: 26px;
  overflow: hidden;
  background: #0e0a1e;
  padding: 8px;
  box-shadow: 0 40px 80px -28px rgba(0,0,0,.6), 0 0 0 2px rgba(255,255,255,.08);
}
.comics-reader-frame img { width: 100%; height: auto; display: block; border-radius: 20px; }
.comics-reader-points { display: flex; flex-direction: column; gap: 26px; }
.comics-point { display: flex; gap: 15px; align-items: flex-start; }
.comics-point-ico {
  font-size: 1.35rem; flex: none;
  width: 44px; height: 44px;
  background: rgba(255,255,255,.1);
  border-radius: 13px;
  display: grid; place-items: center;
}
.comics-point strong { display: block; color: #fff; margin-bottom: 4px; font-size: 1rem; }
.comics-point p { margin: 0; color: rgba(255,255,255,.72); font-size: .88rem; line-height: 1.55; }
@media (max-width: 900px) {
  .comics-reader-showcase { grid-template-columns: 1fr; gap: 32px; }
  .comics-reader-points { flex-direction: row; flex-wrap: wrap; }
  .comics-point { flex: 1 1 220px; }
}