/* Fluent Family — launch waitlist page
   Brand: the app's "Candlelit" system (Petrona display, Karla UI, Literata story
   text; warm amber primary, plum for heritage-language words). Fonts are
   self-hosted so no visitor IPs go to Google — matches the cookieless setup. */

/* ---------- Fonts ---------- */
@font-face { font-family: "Petrona"; src: url("../fonts/petrona-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Petrona"; src: url("../fonts/petrona-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Petrona"; src: url("../fonts/petrona-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Petrona"; src: url("../fonts/petrona-600italic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Karla"; src: url("../fonts/karla-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Karla"; src: url("../fonts/karla-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Karla"; src: url("../fonts/karla-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Literata"; src: url("../fonts/literata-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("../fonts/literata-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Literata"; src: url("../fonts/literata-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --paper: hsl(38 62% 95%);
  --paper-2: hsl(36 48% 90%);
  --paper-3: hsl(36 39% 83%);
  --card: hsl(43 100% 99%);
  --ink: hsl(25 29% 13%);
  --ink-2: hsl(28 16% 31%);
  --ink-3: hsl(30 14% 42%);
  --amber: hsl(22 66% 40%);
  --amber-2: hsl(26 72% 52%);
  --amber-glow: hsl(36 96% 66%);
  --plum: hsl(331 37% 39%);
  --plum-soft: hsl(331 40% 93%);
  --night-0: #090a1c;
  --night-1: #12142f;
  --night-2: #1e1a3d;
  --night-3: #3a2347;
  --dusk: #7b3f45;
  --on-night: hsl(35 48% 92%);
  --on-night-2: hsl(35 25% 76%);

  --f-display: "Petrona", ui-serif, Georgia, serif;
  --f-ui: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-story: "Literata", ui-serif, Georgia, serif;

  --radius: 22px;
  --radius-sm: 14px;
  --shadow-sm: 0 1px 2px hsl(25 40% 20% / .06), 0 2px 8px hsl(25 40% 20% / .06);
  --shadow: 0 2px 4px hsl(25 40% 20% / .05), 0 12px 32px hsl(25 40% 20% / .10);
  --shadow-lg: 0 4px 10px hsl(25 40% 10% / .10), 0 30px 70px hsl(25 40% 10% / .22);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1180px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  font-family: var(--f-ui);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--amber); text-underline-offset: 3px; }
a:hover { color: var(--plum); }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; line-height: 1.1; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
::selection { background: hsl(331 37% 39% / .22); }
:focus-visible { outline: 3px solid var(--amber-2); outline-offset: 3px; border-radius: 6px; }

[hidden] { display: none !important; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--card); color: var(--ink); padding: 10px 16px; border-radius: 10px; box-shadow: var(--shadow); transition: top .2s; }
.skip-link:focus { top: 12px; }

/* Heritage-language words: colour + weight + underline so it survives
   grayscale and colour-blindness (same rule as the reader). */
.h {
  color: var(--plum);
  font-weight: 600;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1.5px;
  background-position: 0 92%;
  background-repeat: no-repeat;
  padding-bottom: 1px;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .55em;
  font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber);
}
.eyebrow::before { content: ""; width: 22px; height: 1.5px; background: currentColor; border-radius: 2px; }

.section { position: relative; padding-block: clamp(80px, 11vw, 140px); }
.section-head { max-width: 680px; margin-bottom: clamp(40px, 6vw, 64px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head h2 { font-size: clamp(2rem, 4.4vw, 3.25rem); margin-top: 14px; }
.section-head p { margin-top: 16px; font-size: 1.15rem; color: var(--ink-2); }
.section-head h2 em, .hero h1 em { font-style: italic; color: var(--amber); }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--amber);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 52px; padding: 0 26px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--bg); color: hsl(32 100% 97%);
  font-family: var(--f-ui); font-weight: 700; font-size: 1.02rem; letter-spacing: .01em;
  text-decoration: none;
  box-shadow: 0 1px 0 hsl(0 0% 100% / .25) inset, 0 8px 22px hsl(22 66% 40% / .35);
  transition: transform .35s var(--ease-spring), box-shadow .3s, background .3s;
}
.btn::after { /* shine sweep */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, hsl(40 100% 85% / .45) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .8s var(--ease-out);
}
.btn:hover { color: hsl(32 100% 97%); transform: translateY(-2px); box-shadow: 0 1px 0 hsl(0 0% 100% / .25) inset, 0 14px 30px hsl(22 66% 40% / .42); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0) scale(.98); }
.btn svg { width: 18px; height: 18px; transition: transform .3s var(--ease-spring); }
.btn:hover svg { transform: translateX(3px); }
.btn-ghost {
  background: transparent; color: var(--on-night);
  box-shadow: inset 0 0 0 1.5px hsl(35 48% 92% / .35);
}
.btn-ghost:hover { color: var(--on-night); background: hsl(35 48% 92% / .08); box-shadow: inset 0 0 0 1.5px hsl(35 48% 92% / .6); }
.btn-block { width: 100%; }

/* ---------- Header ---------- */
.progress-bar {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60;
  background: linear-gradient(90deg, var(--amber-glow), var(--amber-2), var(--plum));
  transform-origin: 0 50%; transform: scaleX(var(--p, 0));
}
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: background .4s, box-shadow .4s, color .4s, backdrop-filter .4s;
  color: var(--on-night);
}
.site-header .wrap { display: flex; align-items: center; gap: 24px; height: 72px; }
.site-header.is-solid {
  background: hsl(38 62% 95% / .82);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 hsl(36 39% 83% / .8);
  color: var(--ink);
}
.site-header.is-solid.on-dark {
  background: hsl(245 38% 12% / .78);
  box-shadow: 0 1px 0 hsl(35 48% 92% / .08);
  color: var(--on-night);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-family: var(--f-display); font-weight: 600; font-size: 1.4rem; letter-spacing: -.01em; }
.brand:hover { color: inherit; }
.brand-mark { width: 38px; height: 38px; flex: none; overflow: visible; }
/* Logo: the moon lifts and the star twinkles on hover */
.brand-mark .bm-moon { transition: transform .7s var(--ease-spring); }
.brand-mark .bm-star { transform-box: fill-box; transform-origin: center; transition: transform .7s var(--ease-spring), opacity .4s; }
.brand:hover .bm-moon { transform: translateY(-2.5px); }
.brand:hover .bm-star { transform: scale(1.5) rotate(45deg); }
/* Wordmark: "Fluent Family", with "Family" in italic amber */
.brand-fam { font-style: italic; color: var(--amber-glow); }
.site-header.is-solid:not(.on-dark) .brand-fam, .sample-bar .brand-fam { color: var(--amber); }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a {
  color: inherit; text-decoration: none; font-weight: 500; font-size: .98rem;
  padding: 8px 14px; border-radius: 999px; opacity: .85; transition: opacity .2s, background .2s;
}
.nav a:hover { opacity: 1; color: inherit; background: hsl(35 48% 50% / .12); }
.header-cta { min-height: 42px; padding: 0 18px; font-size: .95rem; }
@media (max-width: 860px) {
  .nav { display: none; }
  .header-cta { margin-left: auto; }
}
@media (max-width: 380px) { .brand { font-size: 1.2rem; } .header-cta { padding: 0 14px; } }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: max(760px, 100svh);
  padding: 132px 0 clamp(170px, 20vw, 260px);
  color: var(--on-night);
  background:
    radial-gradient(120% 70% at 50% 108%, hsl(18 70% 45% / .55), transparent 60%),
    linear-gradient(180deg, var(--night-0) 0%, var(--night-1) 30%, var(--night-2) 55%, var(--night-3) 78%, var(--dusk) 100%);
}
.sky { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; will-change: transform; }
.moon {
  position: absolute; z-index: -2;
  top: clamp(90px, 13vh, 150px); right: clamp(-40px, 8vw, 140px);
  width: clamp(110px, 14vw, 180px); aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, hsl(48 100% 97%) 0%, hsl(44 85% 86%) 45%, hsl(36 60% 72%) 100%);
  box-shadow: 0 0 60px 10px hsl(44 100% 80% / .28), 0 0 160px 50px hsl(40 100% 70% / .12), inset -14px -10px 30px hsl(30 50% 50% / .35);
  animation: moon-float 9s ease-in-out infinite;
  will-change: transform;
}
.moon::before, .moon::after { content: ""; position: absolute; border-radius: 50%; background: hsl(36 45% 74% / .55); }
.moon::before { width: 22%; height: 22%; top: 46%; left: 24%; }
.moon::after { width: 13%; height: 13%; top: 24%; left: 58%; box-shadow: 18px 52px 0 -3px hsl(36 45% 74% / .5); }
@keyframes moon-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

.hills { position: absolute; left: 0; right: 0; bottom: -1px; z-index: -1; width: 100%; height: auto; pointer-events: none; }
.hills .hill-far { fill: #2b2148; }
.hills .hill-mid { fill: #4a2a48; }
.hills .hill-near { fill: var(--paper); }
.hills .house { fill: #24183a; }
.hills .window { fill: var(--amber-glow); animation: window-glow 4s ease-in-out infinite; }
.hills .window-halo { fill: url(#windowHalo); animation: window-glow 4s ease-in-out infinite; }
@keyframes window-glow { 0%, 100% { opacity: 1; } 45% { opacity: .82; } 50% { opacity: .95; } 55% { opacity: .78; } }

.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 72px); align-items: center;
}
.hero-copy .eyebrow { color: var(--amber-glow); }
.hero h1 {
  font-size: clamp(2.5rem, 5.6vw, 4.5rem);
  margin-top: 20px; line-height: 1.04;
  color: hsl(40 60% 96%);
}
.hero h1 em { color: var(--amber-glow); }
.hero .lede { margin-top: 24px; font-size: clamp(1.08rem, 1.5vw, 1.25rem); color: var(--on-night-2); max-width: 34em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-note { margin-top: 22px; font-size: .95rem; color: var(--on-night-2); display: flex; align-items: center; gap: 10px; }
.hero-note strong { color: var(--on-night); font-weight: 700; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber-glow); box-shadow: 0 0 0 0 hsl(36 96% 66% / .6); animation: pulse 2.4s infinite; flex: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 hsl(36 96% 66% / .55); } 70% { box-shadow: 0 0 0 12px hsl(36 96% 66% / 0); } 100% { box-shadow: 0 0 0 0 hsl(36 96% 66% / 0); } }

/* headline word-rise */
.w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.w > span { display: inline-block; }
.js .w > span { transform: translateY(105%); animation: word-rise 1s var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 60ms + 150ms); }
@keyframes word-rise { to { transform: translateY(0); } }
.js .hero-fade { opacity: 0; animation: fade-up 1s var(--ease-out) forwards; animation-delay: var(--d, .6s); }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* the swapping language word */
.lang-word { display: inline-block; transition: opacity .25s, transform .35s var(--ease-out), filter .25s; }
.lang-word.is-out { opacity: 0; transform: translateY(-.35em) rotateX(60deg); filter: blur(4px); }
.lang-word.is-in { animation: lang-in .55s var(--ease-spring); }
@keyframes lang-in { from { opacity: 0; transform: translateY(.4em) rotateX(-60deg); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------- Language switch ---------- */
.lang-switch {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr;
  padding: 4px; border-radius: 999px;
  background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--paper-3);
}
.lang-switch button {
  position: relative; z-index: 1; border: 0; background: none; cursor: pointer;
  padding: 7px 16px; border-radius: 999px; font-weight: 700; font-size: .9rem; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 7px; transition: color .3s;
}
.lang-switch button[aria-pressed="true"] { color: var(--ink); }
.lang-switch .thumb {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  border-radius: 999px; background: var(--card); box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease-spring);
}
.lang-switch[data-active="es"] .thumb { transform: translateX(100%); }
.flag { width: 18px; height: 12px; border-radius: 2px; overflow: hidden; flex: none; box-shadow: 0 0 0 1px hsl(0 0% 0% / .08); }

/* ---------- Demo (the four-level sentence) ---------- */
.demo-wrap { position: relative; perspective: 1400px; }
.demo-glow {
  position: absolute; inset: 8% 4% -6%; z-index: -1; border-radius: 40px;
  background: radial-gradient(60% 60% at 50% 50%, hsl(36 96% 62% / .45), transparent 70%);
  filter: blur(30px); animation: glow-breathe 6s ease-in-out infinite;
}
@keyframes glow-breathe { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }
.demo {
  position: relative; color: var(--ink);
  background:
    radial-gradient(120% 80% at 0% 0%, hsl(43 100% 99%), transparent 60%),
    var(--card);
  border-radius: 28px; padding: clamp(20px, 3vw, 30px);
  box-shadow: var(--shadow-lg), 0 0 0 1px hsl(36 39% 83% / .7);
  transform-style: preserve-3d;
}
.js .demo { opacity: 0; transform: translateY(30px) rotateX(8deg); animation: demo-in 1.2s var(--ease-out) .5s forwards; }
@keyframes demo-in { to { opacity: 1; transform: none; } }
.demo-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.demo-label { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

.demo-stage { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: end; margin-top: 18px; }
.demo-text {
  font-family: var(--f-story); font-size: clamp(1.18rem, 1.9vw, 1.42rem); line-height: 1.7;
  min-height: 7.2em; padding: 6px 0;
  transition: opacity .28s, filter .28s, transform .28s;
}
.demo-text.is-out { opacity: 0; filter: blur(5px); transform: translateY(-4px); }
.demo-text .h { display: inline; animation: bloom .7s var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 90ms + 60ms); }
@keyframes bloom {
  0% { opacity: 0; filter: blur(4px); background-size: 0% 1.5px; }
  60% { opacity: 1; filter: none; }
  100% { background-size: 100% 1.5px; }
}

/* sprout: the roots deepen as the mix grows */
.sprout { width: 84px; height: 128px; flex: none; overflow: visible; }
.sprout .ground { stroke: var(--paper-3); stroke-width: 2; stroke-linecap: round; }
.sprout .stem, .sprout .root { fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--ease-out); }
.sprout .stem { stroke: hsl(110 30% 36%); stroke-width: 3; }
.sprout .root { stroke: var(--plum); stroke-width: 2; opacity: .8; }
.sprout .leaf { fill: hsl(105 32% 44%); transform-box: fill-box; transform: scale(0); transition: transform .7s var(--ease-spring); }
.sprout .leaf-l { transform-origin: 100% 100%; }
.sprout .leaf-r { transform-origin: 0% 100%; }
.sprout .bloom { fill: var(--amber-glow); transform-box: fill-box; transform-origin: 50% 50%; transform: scale(0) rotate(-90deg); transition: transform .8s var(--ease-spring); }
.sprout .bloom-c { fill: var(--amber); transform-box: fill-box; transform-origin: 50% 50%; transform: scale(0); transition: transform .6s var(--ease-spring) .2s; }
.sprout [data-lv] { transition-delay: .1s; }
.demo[data-level="1"] .sprout [data-lv="1"],
.demo[data-level="2"] .sprout :is([data-lv="1"], [data-lv="2"]),
.demo[data-level="3"] .sprout :is([data-lv="1"], [data-lv="2"], [data-lv="3"]),
.demo[data-level="4"] .sprout [data-lv] { stroke-dashoffset: 0; transform: none; }

.mix { margin-top: 16px; }
.mix-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: .9rem; }
.mix-name { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; }
.mix-desc { color: var(--ink-3); text-align: right; }
.mix-bar { position: relative; height: 10px; margin-top: 10px; border-radius: 999px; background: hsl(36 60% 88%); overflow: hidden; }
.mix-fill {
  position: absolute; inset: 0 auto 0 0; width: var(--pct, 15%); border-radius: inherit;
  background: linear-gradient(90deg, hsl(331 37% 45%), var(--plum));
  transition: width .9s var(--ease-out);
}
.mix-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, hsl(0 0% 100% / .35), transparent); animation: sheen 2.8s ease-in-out infinite; }
@keyframes sheen { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.mix-legend { display: flex; justify-content: space-between; margin-top: 6px; font-size: .78rem; color: var(--ink-3); }
.mix-legend b { color: var(--plum); }

.levels { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 18px; padding: 4px; border-radius: 16px; background: var(--paper-2); }
.levels button {
  position: relative; z-index: 1; border: 0; background: none; cursor: pointer;
  padding: 10px 4px 9px; border-radius: 12px; font-size: .86rem; font-weight: 700; color: var(--ink-3);
  display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.15;
  transition: color .3s;
}
.levels button small { font-weight: 500; font-size: .72rem; opacity: .8; }
.levels button[aria-selected="true"], .levels button[aria-checked="true"] { color: var(--ink); }
.levels .lv-thumb {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px;
  width: calc((100% - 8px - 12px) / 4);
  border-radius: 12px; background: var(--card); box-shadow: var(--shadow-sm);
  transform: translateX(calc(var(--lv, 0) * (100% + 4px)));
  transition: transform .5s var(--ease-spring);
}
.levels .lv-timer { position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--amber); transform-origin: 0 50%; transform: scaleX(0); z-index: 2; }
.levels button[aria-selected="true"] .lv-timer.run { animation: timer var(--dur, 4s) linear forwards; }
@keyframes timer { to { transform: scaleX(1); } }

.demo-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.link-btn {
  border: 0; background: none; cursor: pointer; padding: 6px 0;
  font-weight: 700; font-size: .92rem; color: var(--amber);
  display: inline-flex; align-items: center; gap: 8px;
}
.link-btn:hover { color: var(--plum); }
.link-btn svg { width: 16px; height: 16px; transition: transform .35s var(--ease-spring); }
.link-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.icon-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--paper-2); color: var(--ink-2); display: grid; place-items: center;
  transition: background .2s, transform .3s var(--ease-spring);
}
.icon-btn:hover { background: var(--paper-3); transform: scale(1.06); }
.icon-btn svg { width: 14px; height: 14px; }

.reveal-lines { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-out); }
.reveal-lines.open { grid-template-rows: 1fr; }
.reveal-lines > div { overflow: hidden; }
.whole { padding-top: 12px; display: grid; gap: 8px; }
.whole p {
  font-family: var(--f-story); font-size: .98rem; line-height: 1.6; color: var(--ink-2);
  padding: 10px 14px; border-radius: 12px; background: var(--paper);
  border-left: 3px solid var(--paper-3);
}
.whole p.is-heritage { border-left-color: var(--plum); color: var(--plum); }
.whole small { display: block; font-family: var(--f-ui); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }

/* ---------- Word ribbon ---------- */
.ribbon {
  position: relative; overflow: hidden; padding: 22px 0;
  background: var(--paper);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.ribbon-track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.ribbon:hover .ribbon-track { animation-play-state: paused; }
.ribbon-set { display: flex; align-items: baseline; gap: 0; padding-right: 0; }
.ribbon-item { display: inline-flex; align-items: baseline; gap: 10px; padding: 0 28px; white-space: nowrap; font-family: var(--f-display); font-size: clamp(1.4rem, 2.6vw, 2rem); position: relative; }
.ribbon-item::after { content: "✦"; position: absolute; right: -6px; top: 50%; translate: 0 -50%; font-size: .55em; color: var(--amber-2); opacity: .55; }
.ribbon-item .rw { color: var(--plum); font-style: italic; }
.ribbon-item .rg { font-family: var(--f-ui); font-size: .82rem; color: var(--ink-3); letter-spacing: .02em; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Reveal on scroll ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--d, 0s); }
.js [data-reveal="left"] { transform: translateX(-32px); }
.js [data-reveal="right"] { transform: translateX(32px); }
.js [data-reveal="scale"] { transform: scale(.94); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* ---------- How it works ---------- */
.how { background: linear-gradient(180deg, var(--paper), var(--paper-2) 120%); }
.steps { position: relative; display: grid; gap: clamp(40px, 7vw, 90px); }
.root-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.root-line path { fill: none; stroke-linecap: round; }
.root-line .rl-track { stroke: var(--paper-3); stroke-width: 2; stroke-dasharray: 2 8; }
.root-line .rl-draw { stroke: url(#rootGrad); stroke-width: 3.5; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--draw, 0)); }
.root-line .rl-twig { stroke: var(--plum); stroke-width: 2; opacity: .55; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease-out); }
.root-line .rl-twig.on { stroke-dashoffset: 0; }

.step { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 96px 1fr; align-items: center; }
.step-node {
  grid-column: 2; justify-self: center;
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--f-display); font-size: 1.6rem; font-weight: 600; color: var(--amber);
  background: var(--card); box-shadow: 0 0 0 6px var(--paper), 0 0 0 7px var(--paper-3), var(--shadow);
  transition: color .5s, background .5s, box-shadow .5s, transform .6s var(--ease-spring);
}
.step.reached .step-node { color: hsl(32 100% 97%); background: var(--amber); box-shadow: 0 0 0 6px var(--paper), 0 0 0 7px hsl(22 66% 40% / .4), 0 0 30px hsl(26 72% 52% / .5); transform: scale(1.06); }
.step-card {
  grid-row: 1; padding: clamp(22px, 3vw, 34px); border-radius: var(--radius);
  background: var(--card); box-shadow: var(--shadow); border: 1px solid hsl(36 39% 83% / .7);
}
.step:nth-child(odd of .step) .step-card { grid-column: 1; }
.step:nth-child(even of .step) .step-card { grid-column: 3; }
.step-card h3 { font-size: clamp(1.45rem, 2.4vw, 1.85rem); }
.step-card p { margin-top: 10px; color: var(--ink-2); }
.step-visual { grid-row: 1; padding: 0 clamp(16px, 3vw, 36px); }
.step:nth-child(odd of .step) .step-visual { grid-column: 3; }
.step:nth-child(even of .step) .step-visual { grid-column: 1; }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px; background: var(--card);
  border: 1px solid var(--paper-3); font-weight: 500; font-size: .95rem; box-shadow: var(--shadow-sm);
}
.js .step .chip { opacity: 0; transform: translateY(10px) scale(.9); transition: opacity .5s, transform .6s var(--ease-spring); transition-delay: calc(var(--i) * 90ms + .2s); }
.js .step.reached .chip { opacity: 1; transform: none; }
.mini-dial { display: grid; gap: 10px; max-width: 320px; }
.mini-dial .md-row { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 12px; font-size: .9rem; font-weight: 700; color: var(--ink-3); }
.mini-dial .md-bar { height: 8px; border-radius: 999px; background: hsl(36 60% 86%); overflow: hidden; }
.mini-dial .md-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--plum); transition: width 1.1s var(--ease-out); transition-delay: calc(var(--i) * 120ms + .2s); }
.step.reached .mini-dial .md-bar i { width: var(--w); }
.feedback-row { display: flex; gap: 10px; flex-wrap: wrap; }
.fb {
  padding: 10px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--paper-3);
  font-weight: 700; font-size: .95rem; color: var(--ink-2); box-shadow: var(--shadow-sm);
}
.fb.picked { background: var(--amber); color: hsl(32 100% 97%); border-color: transparent; }
.js .step.reached .fb.picked { animation: tap 1.6s var(--ease-spring) .8s both; }
@keyframes tap { 0% { background: var(--card); color: var(--ink-2); transform: scale(1); } 30% { transform: scale(.92); } 60% { background: var(--amber); color: hsl(32 100% 97%); transform: scale(1.06); } 100% { background: var(--amber); color: hsl(32 100% 97%); transform: scale(1); } }
.levelup { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .9rem; color: var(--plum); background: var(--plum-soft); padding: 6px 12px; border-radius: 999px; }
.js .step .levelup { opacity: 0; transform: translateY(8px); transition: opacity .5s 1.6s, transform .6s var(--ease-spring) 1.6s; }
.js .step.reached .levelup { opacity: 1; transform: none; }

/* ---------- Story excerpts ---------- */
.stories { background: var(--paper-2); overflow: hidden; }
.stories::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(hsl(22 66% 40% / .09) 1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.stories-top { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.stories-top .section-head { margin-bottom: 0; }
.book { position: relative; display: grid; grid-template-columns: 260px 1fr; gap: 0; border-radius: 30px; background: var(--card); box-shadow: var(--shadow-lg); overflow: hidden; perspective: 1600px; }
.book-tabs { display: flex; flex-direction: column; gap: 6px; padding: 24px 16px; background: linear-gradient(180deg, hsl(36 48% 92%), hsl(36 48% 88%)); border-right: 1px solid var(--paper-3); }
.book-tab {
  position: relative; text-align: left; border: 0; cursor: pointer; background: none;
  padding: 14px 16px; border-radius: 16px; transition: background .3s, transform .3s var(--ease-spring);
}
.book-tab:hover { background: hsl(43 100% 99% / .6); }
.book-tab[aria-selected="true"] { background: var(--card); box-shadow: var(--shadow-sm); transform: translateX(4px); }
.book-tab .bt-band { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); }
.book-tab .bt-title { display: block; margin-top: 4px; font-family: var(--f-display); font-weight: 600; font-size: 1.1rem; line-height: 1.25; }
.book-tab .bt-mix { display: block; margin-top: 8px; height: 4px; border-radius: 4px; background: var(--paper-3); overflow: hidden; }
.book-tab .bt-mix i { display: block; height: 100%; width: var(--w); background: var(--plum); border-radius: inherit; }

.book-page { position: relative; padding: clamp(26px, 4.5vw, 56px); min-height: 460px; transform-origin: 0% 50%; }
.book-page.turn-out { animation: page-out .32s ease-in forwards; }
.book-page.turn-in { animation: page-in .7s var(--ease-out); }
@keyframes page-out { to { opacity: 0; transform: rotateY(-14deg) translateX(-10px); filter: blur(2px); } }
@keyframes page-in { from { opacity: 0; transform: rotateY(12deg) translateX(16px); } to { opacity: 1; transform: none; } }
.book-page::after { /* gutter shadow */
  content: ""; position: absolute; inset: 0 auto 0 0; width: 34px; pointer-events: none;
  background: linear-gradient(90deg, hsl(25 40% 20% / .09), transparent);
}
.page-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .85rem; color: var(--ink-3); }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--plum-soft); color: var(--plum); font-weight: 700; font-size: .78rem; letter-spacing: .04em; }
.page-title { margin-top: 16px; font-size: clamp(1.7rem, 3vw, 2.3rem); }
.page-title .h { background-size: 0 0; }
.page-subtitle { margin-top: 4px; font-family: var(--f-display); font-style: italic; color: var(--ink-3); font-size: 1.1rem; }
.page-body { margin-top: 26px; display: grid; gap: 6px; }
.sent {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 0; background: none; padding: 10px 14px; margin-inline: -14px; border-radius: 14px;
  font-family: var(--f-story); font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.75; color: var(--ink);
  transition: background .25s;
  width: calc(100% + 28px);
}
.sent:hover { background: hsl(36 60% 93%); }
.sent[aria-expanded="true"] { background: hsl(36 60% 93%); }
.sent .tr { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-out); }
.sent[aria-expanded="true"] .tr { grid-template-rows: 1fr; }
.sent .tr > span { overflow: hidden; display: block; }
.sent .tr em { display: block; padding-top: 6px; font-size: .88em; color: var(--ink-3); font-style: italic; }
.page-body .sent:first-child .s-text::first-letter { font-family: var(--f-display); font-weight: 600; float: left; font-size: 3.4em; line-height: .82; padding: .08em .1em 0 0; color: var(--amber); }
.page-hint { margin-top: 22px; display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--ink-3); }
.page-hint svg { width: 18px; height: 18px; color: var(--amber); animation: nudge 2s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.page-art { position: absolute; right: clamp(16px, 3vw, 40px); bottom: clamp(16px, 3vw, 32px); width: clamp(70px, 9vw, 110px); opacity: .9; color: var(--amber); }
.page-art svg { width: 100%; height: auto; }
.page-art .float { animation: bob 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
.disclaimer { margin-top: 16px; font-size: .85rem; color: var(--ink-3); text-align: center; }

/* ---------- Features (bento) ---------- */
.features { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.feature {
  --rx: 0deg; --ry: 0deg;
  position: relative; grid-column: span 2; overflow: hidden;
  padding: clamp(24px, 3vw, 32px); border-radius: var(--radius);
  background: var(--card); border: 1px solid hsl(36 39% 83% / .8); box-shadow: var(--shadow-sm);
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .5s var(--ease-out), box-shadow .4s;
}
.feature:hover { box-shadow: var(--shadow); }
.feature::before { /* pointer spotlight */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), hsl(36 96% 66% / .14), transparent 60%);
}
.feature:hover::before { opacity: 1; }
.feature.wide { grid-column: span 3; }
.feature h3 { font-size: 1.45rem; margin-top: 18px; }
.feature p { margin-top: 10px; color: var(--ink-2); }
.f-icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--paper-2); color: var(--amber); }
.f-icon svg { width: 30px; height: 30px; overflow: visible; }
.f-icon .draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease-out) .3s; }
.feature.in .f-icon .draw { stroke-dashoffset: 0; }
.feature:hover .f-icon .wiggle { animation: wiggle .8s var(--ease-spring); transform-box: fill-box; transform-origin: center; }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 60% { transform: rotate(9deg); } }
.feature:hover .f-icon .slide { animation: slide-out 1s var(--ease-out); }
@keyframes slide-out { 0% { transform: translateY(-6px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.feature:hover .f-icon .spin { animation: spin 1.2s var(--ease-out); transform-box: fill-box; transform-origin: center; }
@keyframes spin { to { transform: rotate(360deg); } }
.feature .f-demo { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: var(--paper); font-family: var(--f-story); font-size: 1.02rem; line-height: 1.6; }
.feature .f-demo .f-en { display: block; color: var(--ink-3); font-style: italic; font-size: .92em; margin-top: 4px; }

/* ---------- Who it's for ---------- */
.who { background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); }
.who-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.quote-card {
  position: relative; padding: clamp(26px, 3vw, 36px); border-radius: var(--radius);
  background: var(--card); box-shadow: var(--shadow); border: 1px solid hsl(36 39% 83% / .7);
  display: flex; flex-direction: column; gap: 18px;
}
.quote-card::before { content: "“"; position: absolute; top: -18px; left: 24px; font-family: var(--f-display); font-size: 6rem; line-height: 1; color: var(--amber-glow); opacity: .7; }
.quote-card blockquote { margin: 0; font-family: var(--f-display); font-style: italic; font-size: clamp(1.3rem, 2vw, 1.55rem); line-height: 1.3; color: var(--ink); padding-top: 18px; }
.quote-card p { color: var(--ink-2); }
.quote-card .who-tag { margin-top: auto; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--plum); }

/* ---------- Join (founding + form) ---------- */
.join { color: var(--on-night); background: linear-gradient(180deg, var(--night-1), var(--night-2) 60%, var(--night-3)); overflow: hidden; isolation: isolate; }
.join .sky-small { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.join .section-head h2 { color: hsl(40 60% 96%); }
.join .section-head p { color: var(--on-night-2); }
.join .section-head h2 em { color: var(--amber-glow); }
.join .eyebrow { color: var(--amber-glow); }
.join-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }

@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.founding {
  position: relative; border-radius: 28px; padding: 2px;
  background: conic-gradient(from var(--angle), hsl(36 96% 66% / .9), hsl(331 37% 50% / .4), hsl(36 96% 66% / .1), hsl(22 66% 50% / .8), hsl(36 96% 66% / .9));
  animation: rotate-border 7s linear infinite;
  box-shadow: 0 20px 60px hsl(260 50% 5% / .5);
}
@keyframes rotate-border { to { --angle: 360deg; } }
.founding-inner { border-radius: 26px; padding: clamp(26px, 3.6vw, 40px); background: linear-gradient(160deg, hsl(250 35% 17%), hsl(270 30% 13%)); }
.founding .tag { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--amber-glow); }
.price { display: flex; align-items: baseline; gap: 8px; margin-top: 16px; font-family: var(--f-display); }
.price .amt { font-size: clamp(3.4rem, 6vw, 4.6rem); font-weight: 600; line-height: 1; color: hsl(40 70% 96%); letter-spacing: -.03em; }
.price .per { font-size: 1.2rem; color: var(--on-night-2); }
.price-sub { margin-top: 6px; font-weight: 700; color: var(--amber-glow); }
.ticks { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.ticks li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; color: var(--on-night); }
.ticks svg { width: 22px; height: 22px; color: var(--amber-glow); margin-top: 2px; }
.founding .fine { margin-top: 22px; padding-top: 18px; border-top: 1px solid hsl(35 48% 92% / .12); font-size: .9rem; color: var(--on-night-2); }

.form-card { position: relative; border-radius: 28px; padding: clamp(24px, 3.6vw, 40px); background: var(--card); color: var(--ink); box-shadow: var(--shadow-lg); }
.form-card h3 { font-size: clamp(1.6rem, 2.6vw, 2rem); }
.form-card > p { margin-top: 6px; color: var(--ink-2); }
.form { margin-top: 24px; display: grid; gap: 20px; }
.field { display: grid; gap: 8px; }
.field > label, .field legend { font-weight: 700; font-size: .95rem; color: var(--ink); padding: 0; }
.field legend { margin-bottom: 8px; }
.field .opt { font-weight: 500; color: var(--ink-3); }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.input, .select {
  width: 100%; min-height: 52px; padding: 0 16px; border-radius: 14px;
  border: 1.5px solid var(--paper-3); background: var(--paper);
  font: inherit; font-size: 1rem; color: var(--ink);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a6650' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
.input:hover, .select:hover { border-color: hsl(30 25% 70%); }
.input:focus, .select:focus { outline: none; border-color: var(--amber); background: var(--card); box-shadow: 0 0 0 4px hsl(22 66% 40% / .14); }
.input[aria-invalid="true"] { border-color: hsl(9 55% 45%); }
.err { font-size: .88rem; font-weight: 500; color: hsl(9 55% 38%); min-height: 0; }
.err:empty { display: none; }

.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pill span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1.5px solid var(--paper-3); background: var(--paper); font-weight: 500; cursor: pointer; user-select: none;
  transition: border-color .2s, background .2s, color .2s, transform .3s var(--ease-spring);
}
.pill:hover span { border-color: hsl(30 25% 70%); }
.pill input:checked + span { border-color: var(--amber); background: hsl(26 80% 94%); color: var(--amber); font-weight: 700; transform: scale(1.03); }
.pill input:focus-visible + span { outline: 3px solid var(--amber-2); outline-offset: 2px; }
.other-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease-out); }
.other-wrap.open { grid-template-rows: 1fr; }
.other-wrap > div { overflow: hidden; }
.other-wrap .input { margin-top: 10px; }

.check { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; padding: 16px; border-radius: 16px; background: hsl(331 40% 96%); border: 1.5px solid hsl(331 30% 88%); cursor: pointer; transition: border-color .2s, background .2s; }
.check:hover { border-color: hsl(331 30% 78%); }
.check input { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin: 0; border-radius: 8px; border: 2px solid hsl(331 25% 70%); background: var(--card); display: grid; place-items: center; cursor: pointer; transition: background .2s, border-color .2s; }
.check input::after { content: ""; width: 12px; height: 7px; border: solid hsl(32 100% 97%); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) scale(0); margin-top: -3px; transition: transform .35s var(--ease-spring); }
.check input:checked { background: var(--plum); border-color: var(--plum); }
.check input:checked::after { transform: rotate(-45deg) scale(1); }
.check strong { display: block; font-size: .98rem; }
.check small { display: block; color: var(--ink-3); font-size: .88rem; margin-top: 2px; }

.form-foot { font-size: .85rem; color: var(--ink-3); line-height: 1.5; }
.form-foot a { color: inherit; }
.submit { min-height: 58px; font-size: 1.08rem; }
.submit .spinner { display: none; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid hsl(32 100% 97% / .35); border-top-color: hsl(32 100% 97%); animation: spin .8s linear infinite; }
.submit.loading .spinner { display: inline-block; }
.submit.loading .label, .submit.loading svg { display: none; }
.dev-note { display: none; margin-top: 4px; padding: 10px 14px; border-radius: 12px; background: hsl(48 90% 90%); color: hsl(35 60% 25%); font-size: .85rem; }
.dev-note.show { display: block; }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.faq-grid .section-head { position: sticky; top: 110px; }
.faq-list { display: grid; gap: 12px; }
.faq {
  border-radius: 18px; background: var(--card); border: 1px solid hsl(36 39% 83% / .8);
  box-shadow: var(--shadow-sm); transition: box-shadow .3s;
}
.faq[open] { box-shadow: var(--shadow); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px; font-family: var(--f-display); font-weight: 600; font-size: 1.18rem; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq .plus { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--paper-2); transition: background .3s, transform .45s var(--ease-spring); }
.faq .plus::before, .faq .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 2px; background: var(--amber); translate: -50% -50%; transition: transform .45s var(--ease-spring); }
.faq .plus::after { transform: rotate(90deg); }
.faq[open] .plus { background: var(--amber); transform: rotate(180deg); }
.faq[open] .plus::before, .faq[open] .plus::after { background: hsl(32 100% 97%); }
.faq[open] .plus::after { transform: rotate(0); }
.faq-body { padding: 0 22px 22px; color: var(--ink-2); }
.faq-body p + p { margin-top: 10px; }
.faq-body a { font-weight: 500; }
.faq-anim { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-out); }
.faq-anim > div { overflow: hidden; }
.faq.is-open .faq-anim, html:not(.js) .faq-anim { grid-template-rows: 1fr; }

/* ---------- Founder note ---------- */
.founder { padding-top: 0; }
.letter {
  position: relative; max-width: 760px; margin: 0 auto; padding: clamp(30px, 5vw, 56px);
  background:
    linear-gradient(transparent 31px, hsl(36 39% 83% / .45) 32px) 0 18px / 100% 32px,
    var(--card);
  border-radius: 6px 28px 28px 28px; box-shadow: var(--shadow-lg); rotate: -.6deg;
}
.letter::before { content: ""; position: absolute; top: -14px; left: 50%; width: 110px; height: 30px; translate: -50% 0; rotate: 2deg; background: hsl(36 96% 66% / .45); border-radius: 3px; }
.letter .eyebrow { margin-bottom: 14px; }
.letter p { font-family: var(--f-story); font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.78; color: var(--ink-2); }
.letter p + p { margin-top: 14px; }
.signature { margin-top: 22px; display: flex; align-items: center; gap: 14px; }
.sig-name { position: relative; font-family: var(--f-display); font-style: italic; font-weight: 600; font-size: 2.1rem; line-height: 1; color: var(--amber); padding-bottom: 10px; }
.sig-name svg { position: absolute; left: -4px; right: -10px; bottom: -4px; width: calc(100% + 14px); height: 14px; overflow: visible; }
.sig-name svg path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease-out) .5s; }
.letter.in .sig-name svg path { stroke-dashoffset: 0; }
.signature small { color: var(--ink-3); font-size: .9rem; }

/* ---------- Final CTA + footer ---------- */
.final { text-align: center; padding-block: clamp(70px, 10vw, 120px); }
.final h2 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); max-width: 16em; margin: 0 auto; }
.final p { margin: 16px auto 0; max-width: 34em; color: var(--ink-2); font-size: 1.12rem; }
.final .btn { margin-top: 30px; }
.site-footer { background: var(--night-1); color: var(--on-night-2); padding-block: 48px 36px; font-size: .95rem; }
.footer-grid { display: flex; justify-content: space-between; gap: 28px; flex-wrap: wrap; align-items: flex-start; }
.site-footer .brand { color: var(--on-night); }
.motto { margin-top: 10px; font-family: var(--f-display); font-style: italic; font-size: 1.1rem; color: var(--on-night-2); }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-links a { color: var(--on-night-2); text-decoration: none; }
.footer-links a:hover { color: var(--amber-glow); }
.footer-base { margin-top: 32px; padding-top: 22px; border-top: 1px solid hsl(35 48% 92% / .1); font-size: .85rem; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------- Simple pages (thanks / privacy / 404) ---------- */
.page-hero {
  position: relative; overflow: hidden; isolation: isolate; color: var(--on-night);
  padding: 150px 0 clamp(150px, 18vw, 220px);
  background: linear-gradient(180deg, var(--night-0), var(--night-2) 60%, var(--night-3) 85%, var(--dusk));
}
.page-hero .moon { top: 110px; }
.page-hero h1 { margin-top: 18px; font-size: clamp(2.4rem, 5.4vw, 4rem); color: hsl(40 60% 96%); max-width: 14em; }
.page-hero .lede { margin-top: 18px; font-size: 1.2rem; color: var(--on-night-2); max-width: 34em; }
.page-hero .eyebrow { color: var(--amber-glow); }
.next-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: -90px; position: relative; z-index: 2; }
.next-step { padding: 28px; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.next-step .n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--amber); color: hsl(32 100% 97%); font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; }
.next-step h2 { font-size: 1.35rem; margin-top: 16px; }
.next-step p { margin-top: 8px; color: var(--ink-2); }
.share-box { margin-top: 56px; padding: clamp(26px, 4vw, 44px); border-radius: 28px; background: var(--paper-2); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.share-box h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.share-box p { margin-top: 6px; color: var(--ink-2); }
.share-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-soft { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--paper-3); }
.btn-soft:hover { color: var(--ink); box-shadow: var(--shadow), inset 0 0 0 1px var(--paper-3); }
.prose { max-width: 720px; margin: 0 auto; }
.prose h2 { font-size: 1.6rem; margin-top: 44px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-2); }
.prose p { margin-top: 12px; }
.prose ul { margin: 12px 0 0; padding-left: 1.2em; display: grid; gap: 8px; }
.prose table { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: .97rem; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--paper-3); }
.prose th { font-weight: 700; color: var(--ink); background: var(--paper-2); }
.prose .table-scroll { overflow-x: auto; }
.prose .updated { font-size: .9rem; color: var(--ink-3); }
.draft-banner { margin: 0 auto 32px; max-width: 720px; padding: 14px 18px; border-radius: 14px; background: hsl(48 90% 90%); color: hsl(35 60% 25%); font-size: .92rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 116px; }
  .demo-wrap { max-width: 620px; }
  .join-grid, .faq-grid { grid-template-columns: 1fr; }
  .faq-grid .section-head { position: static; }
  .features { grid-template-columns: repeat(2, 1fr); }
  .feature, .feature.wide { grid-column: span 1; }
}
@media (max-width: 860px) {
  .who-grid, .next-steps { grid-template-columns: 1fr; }
  .book { grid-template-columns: 1fr; }
  .book-tabs { flex-direction: row; overflow-x: auto; padding: 12px; border-right: 0; border-bottom: 1px solid var(--paper-3); scrollbar-width: none; }
  .book-tabs::-webkit-scrollbar { display: none; }
  .book-tab { flex: 1 0 170px; }
  .book-tab[aria-selected="true"] { transform: translateY(-2px); }
  .book-page { min-height: 0; }
  /* steps collapse to a left-hand root line */
  .step { grid-template-columns: 56px 1fr; column-gap: 16px; row-gap: 18px; align-items: start; }
  .step-node { grid-column: 1; grid-row: 1; width: 48px; height: 48px; font-size: 1.25rem; justify-self: start; }
  .step:nth-child(n of .step) .step-card { grid-column: 2; grid-row: 1; }
  .step:nth-child(n of .step) .step-visual { grid-column: 2; grid-row: 2; padding: 0; }
}
@media (max-width: 640px) {
  .hero { padding-top: 150px; }
  .hero .moon, .page-hero .moon { width: 64px; top: 84px; right: 20px; }
  .features { grid-template-columns: 1fr; }
  .demo-stage { grid-template-columns: 1fr; }
  .sprout { position: absolute; right: 14px; top: 58px; width: 54px; height: 84px; opacity: .9; }
  .demo-text { padding-right: 50px; min-height: 8.6em; }
  .levels button { font-size: .78rem; padding: 9px 2px 8px; }
  .levels button small { display: none; }
  .mix-row { flex-direction: column; gap: 2px; }
  .mix-desc { text-align: left; }
  .hero-actions .btn { width: 100%; }
  .share-box .share-actions, .share-box .share-actions .btn { width: 100%; }
}


/* ---------- Fixed-language mode (?lang=it|es) ---------- */
[data-lang-fixed="true"] [data-lang-switch] { display: none !important; }

/* ---------- Illustrations (generated image, or line-art fallback) ---------- */
.illus {
  position: relative; margin: 0; overflow: hidden; isolation: isolate;
  aspect-ratio: 16 / 6; border-radius: 20px;
  display: grid; place-items: center; color: hsl(40 85% 84%);
  background:
    radial-gradient(90% 120% at 85% 0%, hsl(36 96% 66% / .38), transparent 55%),
    linear-gradient(135deg, hsl(248 36% 22%), hsl(300 28% 27%) 62%, hsl(18 52% 42%));
}
.illus::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .7;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 20%, #fff, transparent), radial-gradient(1px 1px at 30% 60%, #ffe2b0, transparent),
    radial-gradient(1.3px 1.3px at 48% 18%, #fff, transparent), radial-gradient(1px 1px at 70% 40%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 88% 70%, #ffe2b0, transparent), radial-gradient(1px 1px at 20% 85%, #fff, transparent);
}
.illus-art { width: clamp(64px, 18%, 120px); }
.illus-art svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 4px 14px hsl(36 96% 60% / .35)); }
.illus-art .float { animation: bob 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.illus img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: img-in .9s var(--ease-out); }
.illus.has-img .illus-art, .illus.has-img::before { display: none; }
@keyframes img-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
.illus-sm { aspect-ratio: 16 / 10; border-radius: 14px; }
.illus-sm .illus-art { width: 30%; }

/* ---------- Story book: level control inside the page ---------- */
.book-page .illus { margin-bottom: 22px; }
.book-mix { margin-top: 22px; padding: 14px 14px 12px; border-radius: 18px; background: var(--paper); border: 1px solid var(--paper-3); }
.book-mix-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 0 4px; }
.book-mix-label { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.book-mix-name { font-weight: 700; font-size: .9rem; color: var(--plum); }
.levels-sm { margin-top: 10px; background: var(--paper-2); }
.levels-sm button { padding: 9px 4px; font-size: .86rem; }
.page-body { transition: opacity .23s, filter .23s; }
.page-body.is-out { opacity: 0; filter: blur(4px); }
.page-body.stagger .sent { animation: line-in .55s var(--ease-out) both; animation-delay: calc(var(--li, 0) * 70ms); }
.page-body.stagger .h { animation: bloom .7s var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 60ms + 160ms); }
@keyframes line-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.page-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.page-foot .page-hint { margin-top: 0; }
.book-tab .bt-band { letter-spacing: .06em; }

/* ---------- Peek inside: animated phone ---------- */
.inside { background: linear-gradient(180deg, var(--paper-2), var(--paper)); overflow: hidden; }
.inside-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  grid-template-areas: "head phone" "tour phone"; column-gap: clamp(40px, 7vw, 100px); align-items: center;
}
.inside-grid > .section-head { grid-area: head; margin-bottom: 28px; align-self: end; }
.inside-grid > .tour { grid-area: tour; align-self: start; }
.inside-grid > .phone-stage { grid-area: phone; }
.tour { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tour button {
  width: 100%; text-align: left; cursor: pointer; display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: start;
  padding: 14px 16px; border-radius: 18px; border: 1px solid transparent; background: transparent; color: var(--ink-2);
  transition: background .35s, border-color .35s, box-shadow .35s, transform .4s var(--ease-spring);
}
.tour button:hover { background: hsl(43 100% 99% / .6); }
.tour button[aria-pressed="true"] { background: var(--card); border-color: hsl(36 39% 83% / .8); box-shadow: var(--shadow); transform: translateX(6px); }
.tour strong { display: block; font-family: var(--f-display); font-weight: 600; font-size: 1.18rem; color: var(--ink); margin-bottom: 2px; }
.tour-n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-display); font-weight: 600; background: var(--paper-2); color: var(--amber); transition: background .35s, color .35s; }
.tour button[aria-pressed="true"] .tour-n { background: var(--amber); color: hsl(32 100% 97%); }

.phone-stage { position: relative; display: grid; place-items: center; padding: 20px 0; }
.phone-glow { position: absolute; width: 80%; height: 70%; border-radius: 50%; background: radial-gradient(closest-side, hsl(36 96% 62% / .45), transparent); filter: blur(30px); }
.phone {
  position: relative; width: min(330px, 80vw); aspect-ratio: 9 / 18.5; padding: 11px; border-radius: 48px;
  background: linear-gradient(160deg, #2a2440, #141126);
  box-shadow: 0 0 0 1.5px #4a4266, inset 0 0 0 1px hsl(0 0% 100% / .08), 0 40px 80px hsl(260 50% 12% / .35), 0 12px 24px hsl(260 50% 12% / .2);
  rotate: -2deg; animation: phone-float 8s ease-in-out infinite;
}
@keyframes phone-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.phone-notch { position: absolute; z-index: 3; top: 20px; left: 50%; translate: -50% 0; width: 92px; height: 25px; border-radius: 20px; background: #141126; }
.screens { position: relative; height: 100%; border-radius: 38px; overflow: hidden; background: var(--paper); }
.screen {
  position: absolute; inset: 0; padding: 54px 16px 18px; display: flex; flex-direction: column; gap: 12px;
  opacity: 0; transform: translateX(34px) scale(.98); pointer-events: none;
  transition: opacity .55s, transform .7s var(--ease-out);
}
.screen.is-active { opacity: 1; transform: none; }
.screen.is-prev { transform: translateX(-34px) scale(.98); }
.app-bar { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .8rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-bar i { font-style: italic; color: var(--plum); }
.app-dot { flex: none; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--amber-glow), var(--amber)); }
.app-back { font-size: 1.3rem; line-height: 1; color: var(--amber); }
.app-kicker { font-family: var(--f-display); font-weight: 600; font-size: 1.22rem; line-height: 1.2; color: var(--ink); }
.app-kicker.small { font-size: .98rem; margin-top: 4px; }
.app-card { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 20px; background: var(--card); box-shadow: var(--shadow-sm); }
.app-card-title { margin-top: 4px; font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; line-height: 1.2; }
.app-card-sub { font-size: .8rem; font-style: italic; color: var(--ink-3); }
.app-pills { display: flex; gap: 6px; }
.app-pill { font-size: .68rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--plum-soft); color: var(--plum); }
.app-pill + .app-pill { background: var(--paper-2); color: var(--ink-3); }
.app-btn { display: flex; justify-content: center; margin-top: 6px; padding: 11px; border-radius: 999px; background: var(--amber); color: hsl(32 100% 97%); font-weight: 700; font-size: .84rem; }
.screen > .app-btn { margin-top: auto; }
.reader { display: grid; gap: 8px; font-family: var(--f-story); font-size: .92rem; line-height: 1.6; }
.reader-line { padding: 8px 10px; border-radius: 12px; }
.reader-line.is-tapped { background: hsl(36 60% 92%); }
.reader-tr { display: block; margin-top: 4px; font-size: .82em; color: var(--ink-3); }
.screen.is-active .reader-tr { animation: tr-in .6s var(--ease-out) 1.3s both; }
.screen.is-active .reader-line.is-tapped { animation: tapped-bg .6s ease 1.1s both; }
@keyframes tr-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes tapped-bg { from { background: transparent; } to { background: hsl(36 60% 92%); } }
.reader-tools { margin-top: auto; display: flex; justify-content: space-around; padding-top: 10px; border-top: 1px solid var(--paper-3); font-size: .72rem; font-weight: 700; color: var(--ink-3); }
.fb-row { display: flex; gap: 6px; }
.fb-row span { flex: 1; text-align: center; padding: 10px 2px; border-radius: 12px; background: var(--card); border: 1px solid var(--paper-3); font-size: .74rem; font-weight: 700; color: var(--ink-2); }
.screen.is-active .fb-row .pick { animation: tap 1.4s var(--ease-spring) .8s both; }
.word-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-word { padding: 6px 11px; border-radius: 999px; background: var(--card); border: 1.5px solid var(--paper-3); font-family: var(--f-story); font-weight: 600; font-size: .86rem; color: var(--plum); }
.screen.is-active .chip-word.picked { animation: chip-pick .5s var(--ease-spring) both; animation-delay: calc(1.8s + var(--i) * .4s); }
@keyframes chip-pick { 0% { transform: scale(1); } 40% { transform: scale(.9); } 100% { transform: scale(1); background: var(--plum-soft); border-color: var(--plum); } }
.stat { display: flex; flex-direction: column; padding: 14px 16px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow-sm); }
.stat-n { font-family: var(--f-display); font-weight: 600; font-size: 2.7rem; line-height: 1; color: var(--plum); }
.stat-l { margin-top: 4px; font-size: .8rem; font-weight: 500; color: var(--ink-3); }
.spark { display: flex; align-items: flex-end; gap: 6px; height: 74px; padding: 10px 14px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow-sm); }
.spark i { flex: 1; height: 6%; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, hsl(331 37% 52%), var(--plum)); transition: height .9s var(--ease-out) .3s; }
.screen.is-active .spark i { height: var(--h); }
.journey { display: flex; gap: 4px; font-size: .6rem; font-weight: 700; color: var(--ink-3); }
.journey span { flex: 1; text-align: center; padding: 6px 2px; border-radius: 999px; background: var(--paper-2); }
.journey .done { background: var(--plum-soft); color: var(--plum); }
.journey .now { background: var(--amber); color: hsl(32 100% 97%); }
.levelup-card { padding: 10px 12px; border-radius: 14px; background: var(--plum-soft); color: var(--plum); font-size: .78rem; font-weight: 600; line-height: 1.4; }
.screen.is-active .levelup-card { animation: fade-up .7s var(--ease-out) 1.2s both; }
.tap-dot { position: absolute; left: var(--tx); top: var(--ty); width: 34px; height: 34px; margin: -17px; border-radius: 50%; background: hsl(26 72% 52% / .3); border: 2px solid hsl(26 72% 52% / .7); opacity: 0; pointer-events: none; }
.screen.is-active .tap-dot { animation: tap-dot 1.3s ease-out .9s both; }
@keyframes tap-dot { 0% { opacity: 0; transform: scale(1.6); } 30% { opacity: 1; transform: scale(.8); } 60% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }

.app-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.app-list li { display: grid; grid-template-columns: 8px 1fr auto; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 14px; background: var(--card); box-shadow: var(--shadow-sm); }
.app-list b { display: block; font-family: var(--f-display); font-weight: 600; font-size: .86rem; color: var(--ink); }
.app-list small { display: block; font-size: .68rem; color: var(--ink-3); }
.app-list-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--plum); opacity: .6; }
.app-star { color: var(--amber-2); font-size: .9rem; }
.app-row { display: flex; gap: 6px; }
.app-row span { flex: 1; text-align: center; padding: 8px 4px; border-radius: 12px; background: var(--paper-2); font-size: .7rem; font-weight: 700; color: var(--ink-2); }
.app-note { padding: 10px 12px; border-radius: 14px; background: var(--card); box-shadow: var(--shadow-sm); font-size: .76rem; line-height: 1.45; color: var(--ink-2); }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stats .stat-n { font-size: 2.3rem; }
.screen.is-active .app-list li { animation: fade-up .6s var(--ease-out) both; }
.screen.is-active .app-list li:nth-child(2) { animation-delay: .12s; }

/* Dense levels: a lighter mark, so a mostly-heritage page stays easy to read */
.demo[data-level="3"] .demo-text .h, .demo[data-level="4"] .demo-text .h,
.page-body[data-level="3"] .h, .page-body[data-level="4"] .h {
  font-weight: 500;
  background-image: linear-gradient(hsl(331 37% 39% / .35), hsl(331 37% 39% / .35));
}

/* ---------- Language picker (searchable combobox) ---------- */
.combo { position: relative; }
.combo-box { position: relative; }
.combo-input { padding-left: 44px; padding-right: 88px; text-overflow: ellipsis; }
.combo.has-value .combo-input { font-weight: 700; }
.combo-search { position: absolute; left: 15px; top: 0; height: 52px; display: flex; align-items: center; color: var(--ink-3); pointer-events: none; }
.combo-search svg { width: 19px; height: 19px; }
.combo-toggle, .combo-clear { position: absolute; top: 6px; width: 40px; height: 40px; border: 0; border-radius: 10px; background: none; color: var(--ink-3); cursor: pointer; display: grid; place-items: center; transition: background .2s, transform .3s var(--ease-spring); }
.combo-toggle { right: 6px; }
.combo-clear { right: 44px; }
.combo-clear[hidden] { display: none; }
.combo-toggle:hover, .combo-clear:hover { background: var(--paper-2); }
.combo-toggle svg, .combo-clear svg { width: 18px; height: 18px; }
.combo.is-open .combo-toggle { transform: rotate(180deg); }
.combo-list {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px);
  max-height: min(330px, 46vh); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  margin: 0; padding: 6px; list-style: none;
  background: var(--card); border: 1px solid var(--paper-3); border-radius: 16px; box-shadow: var(--shadow-lg);
  animation: list-in .22s var(--ease-out);
}
.combo-list[hidden] { display: none; }
@keyframes list-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.combo-group { padding: 10px 12px 4px; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.combo-opt { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 9px 12px; border-radius: 10px; cursor: pointer; }
.combo-opt .o-name { font-weight: 500; }
.combo-opt .o-native { color: var(--ink-3); font-size: .9rem; text-align: right; }
.combo-opt.is-active, .combo-opt:hover { background: hsl(26 80% 95%); }
.combo-opt[aria-selected="true"] .o-name { font-weight: 700; color: var(--amber); }
.combo-opt[aria-selected="true"] .o-name::after { content: " ✓"; }
.combo-opt mark { background: hsl(36 96% 66% / .45); color: inherit; border-radius: 3px; padding: 0 1px; }
.combo-opt.is-custom .o-name { color: var(--plum); font-weight: 700; }

/* ---------- New sections: responsive ---------- */
@media (max-width: 1020px) {
  .inside-grid { grid-template-columns: 1fr; grid-template-areas: "head" "phone" "tour"; }
  .inside-grid > .section-head { margin-bottom: 8px; }
  .tour { max-width: 560px; margin: 8px auto 0; width: 100%; }
  .tour button[aria-pressed="true"] { transform: none; }
}
@media (max-width: 640px) {
  .illus { aspect-ratio: 16 / 9; border-radius: 16px; }
  .levels-sm button { font-size: .74rem; padding: 9px 2px; }
  .book-mix { padding: 12px 10px 10px; }
  .phone { width: min(300px, 78vw); }
  .tour button { padding: 12px; grid-template-columns: 32px 1fr; gap: 10px; }
  .tour-n { width: 30px; height: 30px; }
  .tour strong { font-size: 1.08rem; }
}

/* ---------- Example-language menu ---------- */
.lang-menu { position: relative; display: inline-block; }
.lm-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px 0 12px;
  border: 0; border-radius: 999px; cursor: pointer; font-weight: 700; font-size: .92rem; color: var(--ink);
  background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--paper-3); transition: background .2s, box-shadow .2s;
}
.lm-btn:hover { background: var(--card); box-shadow: inset 0 0 0 1px hsl(30 25% 72%), var(--shadow-sm); }
.lm-globe { width: 17px; height: 17px; color: var(--amber); }
.lm-chev { width: 16px; height: 16px; color: var(--ink-3); transition: transform .3s var(--ease-spring); }
.lang-menu.is-open .lm-chev { transform: rotate(180deg); }
.lm-list {
  position: absolute; z-index: 40; right: 0; top: calc(100% + 8px); min-width: 230px; padding: 6px;
  border-radius: 16px; background: var(--card); border: 1px solid var(--paper-3); box-shadow: var(--shadow-lg);
  animation: list-in .22s var(--ease-out);
}
.lm-list[hidden] { display: none; }
.lm-list ul { list-style: none; margin: 0; padding: 0; }
.lm-list [role="option"] {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px; min-height: 42px; padding: 9px 12px;
  border-radius: 10px; cursor: pointer; outline: none;
}
.lm-list [role="option"]:hover, .lm-list [role="option"]:focus { background: hsl(26 80% 95%); }
.lm-list [role="option"][aria-selected="true"] .lm-native { color: var(--amber); }
.lm-list [role="option"][aria-selected="true"] .lm-native::after { content: " ✓"; }
.lm-native { font-weight: 700; color: var(--ink); }
.lm-en { font-size: .85rem; color: var(--ink-3); }
.lm-more { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 4px; padding: 11px 12px; border-top: 1px dashed var(--paper-3); border-radius: 0 0 10px 10px; text-decoration: none; font-size: .88rem; color: var(--ink-2); }
.lm-more b { color: var(--plum); white-space: nowrap; }
.lm-more:hover, .lm-more:focus { color: var(--ink); background: var(--plum-soft); outline: none; }
.stories-lang { display: grid; justify-items: end; gap: 8px; text-align: right; }
.stories-lang-label { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.stories-lang-note { font-size: .88rem; color: var(--ink-3); max-width: 22em; }
.stories-lang-note a { font-weight: 700; color: var(--plum); }
@media (max-width: 860px) {
  .stories-lang { justify-items: start; text-align: left; }
  .stories-lang .lm-list { left: 0; right: auto; }
}

/* ---------- Italian-only examples + "more languages are coming" ---------- */
.ex-lang {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: var(--plum-soft); color: var(--plum); font-size: .8rem; font-weight: 700;
}
.ex-lang::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--plum); }
.more-langs {
  max-width: 380px; padding: 18px 20px; border-radius: 20px;
  background: var(--card); border: 1px solid hsl(36 39% 83% / .8); box-shadow: var(--shadow-sm);
}
.more-langs-label { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--plum); }
.more-langs-text { margin-top: 6px; font-size: .95rem; color: var(--ink-2); line-height: 1.5; }
.more-langs-chips { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.more-langs-chips li { padding: 5px 11px; border-radius: 999px; background: var(--paper-2); font-size: .82rem; font-weight: 500; color: var(--ink-2); }
.js .more-langs.in .more-langs-chips li { animation: fade-up .5s var(--ease-out) both; }
.js .more-langs.in .more-langs-chips li:nth-child(2) { animation-delay: .05s; } .js .more-langs.in .more-langs-chips li:nth-child(3) { animation-delay: .1s; }
.js .more-langs.in .more-langs-chips li:nth-child(4) { animation-delay: .15s; } .js .more-langs.in .more-langs-chips li:nth-child(5) { animation-delay: .2s; }
.js .more-langs.in .more-langs-chips li:nth-child(6) { animation-delay: .25s; } .js .more-langs.in .more-langs-chips li:nth-child(7) { animation-delay: .3s; }
.js .more-langs.in .more-langs-chips li:nth-child(8) { animation-delay: .35s; } .js .more-langs.in .more-langs-chips li:nth-child(9) { animation-delay: .4s; }
.more-langs-chips li.yours { padding: 0; background: none; }
.more-langs-chips li.yours a { display: inline-block; padding: 5px 11px; border-radius: 999px; border: 1.5px dashed hsl(331 30% 70%); color: var(--plum); font-weight: 700; text-decoration: none; }
.more-langs-chips li.yours a:hover { background: var(--plum-soft); }
@media (max-width: 860px) { .more-langs { max-width: none; } }

/* ---------- Form reassurance ---------- */
.reassure { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; padding: 14px 16px; border-radius: 16px; background: hsl(105 30% 95%); border: 1px solid hsl(105 25% 84%); }
.reassure svg { width: 26px; height: 26px; color: hsl(110 30% 34%); }
.reassure p { font-size: .9rem; line-height: 1.5; color: var(--ink-2); }
.reassure strong { display: block; color: var(--ink); margin-bottom: 2px; }

/* ---------- One-story book ---------- */
.book { grid-template-columns: 1fr; max-width: 900px; margin-inline: auto; }
.stories .disclaimer { max-width: 900px; margin-inline: auto; }

/* ---------- Scene art (drawn fallback until a generated illustration exists) ---------- */
.illus.is-scene::before { display: none; }
.illus.is-scene .illus-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.illus.is-scene .illus-art svg { width: 100%; height: 100%; filter: none; }
.scene .hop { animation: hop 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.scene .clap-l { animation: clap-l 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.scene .clap-r { animation: clap-r 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes hop { 0%, 55%, 100% { transform: translateY(0); } 62% { transform: translateY(-7px) rotate(-6deg); } 70% { transform: translateY(0); } 76% { transform: translateY(-4px); } 82% { transform: translateY(0); } }
@keyframes clap-l { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@keyframes clap-r { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-6px); } }
.illus-reader { aspect-ratio: 16 / 9; border-radius: 16px; flex: none; }
.screen .reader { font-size: .86rem; line-height: 1.55; gap: 4px; }
.screen .reader-line { padding: 6px 10px; }

/* ---------- Founding card without a price ---------- */
.founding-big { margin-top: 16px; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.15; color: hsl(40 70% 96%); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .ribbon-track { animation: none; }
  .ribbon { overflow-x: auto; }
  .moon { animation: none; }
}

/* The real cover art is detailed: give it more height in the story book */
.book-page .illus { aspect-ratio: 16 / 8; }
@media (max-width: 640px) { .book-page .illus { aspect-ratio: 3 / 2; } }

/* Longer brand name ("Fluent Family"): keep it on one line on the smallest phones */
.brand span { white-space: nowrap; }
@media (max-width: 380px) {
  .site-header .wrap { gap: 10px; }
  .site-header .brand { font-size: 1.08rem; gap: 7px; }
  .site-header .brand-mark { width: 28px; height: 28px; }
  .header-cta { padding: 0 12px; font-size: .84rem; min-height: 38px; }
}