/* Color tokens. The dark theme is the default. html[data-theme="light"] replaces the page tokens.
   Frames, labels, and controls on top of artwork keep dark backgrounds in both themes. They use the on-art tokens. */
html.landing-active {
  color-scheme: dark;
  --night: #0e0b1f;
  --night-2: #151130;
  --surface: #1d1840;
  --line: #ffffff1c;
  --border: #ffffff2e;
  --border-strong: #ffffff40;
  --border-hover: #ffffff66;
  --hover: #ffffff10;
  --ink: #f6f3ff;
  --muted: #c3bce2;
  --faint: #a79fca;
  --faint-label: #8f87b3;
  --lede: #e4dff7;
  --eyebrow-ink: #e3d9ff;
  --purple: #a98bf0;
  --purple-deep: #6b4fd1;
  --gold: #ffd23f;
  --gold-ink: #1d1500;
  --gold-text: #ffd23f;
  --checked-ink: #fff4c2;
  --focus: #ffd23f;
  --shadow: #00000080;
  --shadow-soft: #00000059;
  --rays: #ffffff;
  --rays-blend: screen;
  --rays-opacity: .12;
  --ow-bg: linear-gradient(135deg, #1d1840, #243d33);
  --pet-disc: radial-gradient(circle, #2a2258 40%, #17132f);
  --on-art: #f6f3ff;
  --on-art-muted: #c3bce2;
  height: auto; overflow: auto; background: var(--night);
}
html.landing-active[data-theme="light"] {
  color-scheme: light;
  --night: #e6e2f0;
  --night-2: #dcd6ea;
  --surface: #f1eef7;
  --line: #1d154a1f;
  --border: #1d154a26;
  --border-strong: #1d154a40;
  --border-hover: #1d154a66;
  --hover: #1d154a0d;
  --ink: #1b1638;
  --muted: #4d4869;
  --faint: #5a5378;
  --faint-label: #5a5378;
  --lede: #2e2752;
  --eyebrow-ink: #4a32a8;
  --purple: #5b3fc4;
  --purple-deep: #3f2a9e;
  --gold-text: #734b00;
  --checked-ink: #5c3d00;
  --focus: #5b3fc4;
  --shadow: #2a1d6b33;
  --shadow-soft: #2a1d6b26;
  --rays: #6b4fd1;
  --rays-blend: multiply;
  --rays-opacity: .06;
  --ow-bg: linear-gradient(135deg, #f1eef7, #d9e8e0);
  --pet-disc: radial-gradient(circle, #f1eef7 40%, #d6cceb);
}
/* The body must not scroll by itself. A body scroll container breaks the sticky header. */
html.landing-active body { height: auto; min-width: 320px; margin: 0; overflow: visible; background: var(--night); }
html.landing-active #app, html.landing-active #app > .landing-page { height: auto; overflow: visible; }
@media (prefers-reduced-motion: no-preference) { html.landing-active { scroll-behavior: smooth; } }

.landing-page {
  --gutter: max(20px, calc((100vw - 1240px) / 2));
  --display: 'Dela Gothic One', 'DM Sans', system-ui, sans-serif;
  color: var(--ink);
  background: var(--night);
  font: 400 1rem/1.6 'DM Sans', system-ui, sans-serif;
  overflow-x: clip;
}
.landing-page *, .landing-page *::before, .landing-page *::after { box-sizing: border-box; }
.landing-page a { color: inherit; text-decoration: none; }
.landing-page :is(a, button, input):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.landing-page img { display: block; max-width: 100%; height: auto; }
.landing-page :is(h1, h2, h3) { font-family: var(--display); font-weight: 400; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
.landing-page :is(ul, ol) { list-style: none; margin: 0; padding: 0; }
.landing-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Header */
.landing-header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 24px; padding: 12px var(--gutter); background: color-mix(in srgb, var(--night) 85%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.landing-header.is-hidden { transform: translateY(-100%); }
/* Compact bar after the top of the page. The header keeps 40-pixel targets. */
.landing-header { transition: transform .25s ease, padding .2s ease; }
.landing-header.is-compact { padding-block: 6px; }
.landing-header.is-compact .landing-brand { min-height: 40px; font-size: 1.15rem; }
.landing-header.is-compact .landing-brand-mark { width: 30px; height: 30px; font-size: 1.2rem; }
.landing-page .landing-header.is-compact :is(.landing-signin, .landing-header-cta) { min-height: 40px; }
.landing-header.is-compact nav a { padding-block: 8px; }
.landing-brand { display: inline-flex; align-items: center; min-height: 44px; gap: 8px; font-family: var(--display); font-size: 1.35rem; line-height: 1; }
.landing-brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--purple), var(--purple-deep)); color: #fff; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 1.5rem; }
.landing-header nav { display: flex; gap: 8px; margin-left: auto; }
.landing-header nav a { padding: 10px 14px; border-radius: 99px; font-weight: 600; color: var(--muted); }
.landing-header nav a:hover { color: var(--ink); background: var(--hover); }
/* Active section or page: gold text and an underline bar. */
.landing-header nav a[aria-current] { color: var(--gold-text); background: #ffd23f14; box-shadow: inset 0 -2px 0 var(--gold-text); }
.landing-header-actions { display: flex; align-items: center; gap: 8px; }
.landing-header nav + .landing-header-actions { margin-left: 8px; }
.landing-page .landing-signin { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 0; border-radius: 99px; background: transparent; color: var(--ink); font: 600 1rem 'DM Sans', sans-serif; white-space: nowrap; cursor: pointer; }
.landing-page .landing-signin:hover { background: var(--hover); }
.landing-header-cta { display: inline-flex; align-items: center; gap: .3em; min-height: 44px; padding: 0 18px; border-radius: 99px; background: var(--gold); color: var(--gold-ink) !important; font-weight: 700; white-space: nowrap; }
.landing-header-cta:hover { background: #ffe07a; }
/* Theme toggle: a round icon button with the same height as the header links. It shows the icon of the other theme. */
.landing-page .landing-theme-toggle { display: grid; flex: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: background .15s ease, width .2s ease, height .2s ease; }
.landing-page .landing-theme-toggle:hover { background: var(--hover); }
.landing-header.is-compact .landing-theme-toggle { width: 40px; height: 40px; }
html[data-theme="light"] .landing-theme-icon-light, html:not([data-theme="light"]) .landing-theme-icon-dark { display: none; }

/* Buttons and forms */
.landing-page .landing-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border: 0; border-radius: 99px; background: var(--gold); color: var(--gold-ink); font: 700 1rem 'DM Sans', sans-serif; white-space: nowrap; cursor: pointer; box-shadow: 0 8px 28px #ffd23f40; transition: transform .15s ease, background .15s ease; }
.landing-page .landing-cta:hover { background: #ffe07a; transform: translateY(-1px); }
.landing-waitlist { display: flex; flex-wrap: wrap; gap: 8px; max-width: 520px; padding: 6px; border: 1px solid var(--border); border-radius: 99px; background: color-mix(in srgb, var(--night) 70%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.landing-waitlist input { flex: 1 1 200px; width: 100%; min-width: 0; min-height: 52px; padding: 0 18px; border: 0; border-radius: 99px; background: transparent; color: var(--ink); font: 400 1rem 'DM Sans', sans-serif; }
.landing-waitlist input::placeholder { color: var(--faint); }
.landing-waitlist-status { flex-basis: 100%; margin: 0; padding: 0 18px; font-size: .95rem; color: var(--gold-text); }
.landing-waitlist-status:empty { display: none; }
.landing-waitlist:has(.landing-waitlist-status:not(:empty)) { border-radius: 26px; padding-bottom: 12px; }
.landing-secondary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 12px; font-weight: 600; color: var(--muted); }
.landing-secondary:hover { color: var(--ink); }

/* Media frames and optional clips */
.landing-media { position: relative; margin: 0; overflow: hidden; background: var(--surface); }
.landing-page .landing-scene-image, .landing-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.landing-media video { z-index: 1; opacity: 0; transition: opacity .3s ease; }
.landing-media.has-playing-video video { opacity: 1; }
.landing-media figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.landing-media.has-failed-video figcaption { z-index: 3; left: 16px; bottom: 16px; width: auto; height: auto; clip-path: none; padding: 8px 12px; border-radius: 99px; background: #0e0b1fe6; color: var(--on-art); font-size: .9rem; }
/* A 40-pixel round icon button, the same target size as the compact header. */
.landing-video-control { position: absolute; z-index: 3; right: 16px; bottom: 16px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid #ffffff40; border-radius: 50%; background: #0e0b1fb3; color: #fff; cursor: pointer; opacity: .8; transition: opacity .15s ease, background .15s ease; }
.landing-video-control:is(:hover, :focus-visible) { opacity: 1; background: #0e0b1fe6; }

/* Hero */
/* The hero and the highlight strip together fill one screen. */
.landing-hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: max(520px, min(calc(100svh - 184px), 760px)); padding: 56px var(--gutter) 64px; }
.landing-media-overview { position: absolute; inset: 0; z-index: -2; }
/* Mirror the placeholder so the partner stands clear of the copy. */
.landing-page .landing-media-overview .landing-scene-image { object-position: 30% center; transform: scaleX(-1); }
.landing-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  linear-gradient(90deg, var(--night) 0%, color-mix(in srgb, var(--night) 90%, transparent) 30%, color-mix(in srgb, var(--night) 40%, transparent) 58%, transparent 80%),
  linear-gradient(0deg, var(--night) 0%, transparent 26%); }
.landing-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--rays-opacity); mix-blend-mode: var(--rays-blend);
  background: repeating-conic-gradient(from 0deg at 78% 50%, transparent 0deg 5deg, var(--rays) 5deg 5.6deg);
  -webkit-mask-image: radial-gradient(circle at 78% 50%, transparent 0 34%, #000 70%); mask-image: radial-gradient(circle at 78% 50%, transparent 0 34%, #000 70%); }
.landing-hero-copy { max-width: 700px; }
.landing-eyebrow { display: inline-block; margin: 0 0 20px; padding: 6px 14px; border: 1px solid #a98bf080; border-radius: 99px; background: #6b4fd133; color: var(--eyebrow-ink); font-size: .9rem; font-weight: 600; }
.landing-page h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1.04; margin-bottom: 22px; text-shadow: 0 4px 24px var(--night); }
.landing-lede { max-width: 540px; margin: 0 0 30px; font-size: 1.2rem; line-height: 1.6; color: var(--lede); }

/* Highlight strip */
/* The gutter sits on the strip so that all three columns get equal width. */
.landing-page .landing-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 max(0px, calc(var(--gutter) - 28px)); border-block: 1px solid var(--line); background: var(--night-2); }
.landing-pillars li + li { border-left: 1px solid var(--line); }
.landing-pillars a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 24px 28px; transition: background .15s ease; }
.landing-pillars a:hover { background: var(--hover); }
.landing-pillars strong { font-family: var(--display); font-weight: 400; font-size: 1.15rem; color: var(--gold-text); }
.landing-pillars span { color: var(--muted); }

/* Shared section layout */
.landing-section { padding: 88px var(--gutter); scroll-margin-top: 56px; }
.landing-section-head { max-width: 720px; margin-bottom: 36px; }
.landing-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px; color: var(--purple); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .9rem; }
.landing-kicker::before { content: ''; width: 28px; height: 3px; border-radius: 3px; background: currentColor; transform: skewX(-30deg); }
.landing-page h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.08; margin-bottom: 20px; }
.landing-section-head > p:last-child { margin: 0; font-size: 1.15rem; color: var(--muted); }

/* Battle */
.landing-battles { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: 'head stage' 'compare stage'; column-gap: 56px; align-items: center; background: radial-gradient(ellipse at 80% 0%, #6b4fd140, transparent 60%), var(--night); }
.landing-battles .landing-section-head { grid-area: head; align-self: end; margin-bottom: 24px; }
.landing-battles h2 { font-size: clamp(2rem, 3vw, 2.6rem); }
.landing-battles .landing-battle-stage { grid-area: stage; }
.landing-battle-stage { position: relative; }
.landing-media-battles { aspect-ratio: 16 / 9; border-radius: 24px; border: 1px solid var(--border); box-shadow: 0 30px 80px var(--shadow), 0 0 0 6px var(--hover); }
.landing-media-battles::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(0deg, #0e0b1fcc 0%, #0e0b1f00 38%), linear-gradient(180deg, #0e0b1f99 0%, #0e0b1f00 22%); }
.landing-battle-hud { position: absolute; inset: 20px 24px auto; z-index: 3; display: flex; justify-content: space-between; gap: 16px; color: var(--on-art); pointer-events: none; }
.landing-hp { width: min(240px, 42%); }
.landing-hp span { display: block; margin-bottom: 6px; font-weight: 700; font-size: .95rem; text-shadow: 0 2px 6px #000; }
.landing-hp i { display: block; height: 10px; border-radius: 99px; background: #ffffff33; overflow: hidden; }
.landing-hp i::before { content: ''; display: block; width: var(--hp); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5be38a, #c8f36b); }
.landing-hp-foe { text-align: right; }
.landing-hp-foe i::before { margin-left: auto; background: linear-gradient(90deg, #ffb13b, #ff6a4d); }
.landing-moves { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 3; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
/* The move row covers the bottom of the battle frame on wide screens, so the video control sits at the top center. */
@media (min-width: 721px) { .landing-media-battles .landing-video-control { top: 16px; bottom: auto; right: auto; left: 50%; transform: translateX(-50%); } }
.landing-move { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 8px; font-size: .95rem; border-radius: 12px; border: 1px solid #ffffff40; background: #0e0b1fcc; color: var(--on-art); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-weight: 700; text-align: center; box-shadow: inset 0 -3px 0 var(--move); }
.landing-move-fire { --move: #ff7a45; }
.landing-move-water { --move: #4cb7ff; }
.landing-move-air { --move: #b7f0ff; }
.landing-move-light { --move: var(--gold); }
.landing-compare { grid-area: compare; align-self: start; display: grid; gap: 12px; }
.landing-compare > div { padding: 18px 22px; border-radius: 16px; }
.landing-compare p { margin: 0; font-size: 1.05rem; }
.landing-compare .landing-compare-label { margin-bottom: 8px; font-size: .9rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.landing-compare-old { border: 2px dashed var(--border); color: var(--faint); font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; }
.landing-compare-old .landing-compare-label { font-family: 'DM Sans', sans-serif; }
.landing-compare-new { background: linear-gradient(135deg, #6b4fd1, #3b2a8f); color: #fff; box-shadow: 0 20px 50px #6b4fd155; }
.landing-compare-new .landing-compare-label { color: var(--gold); }
.landing-compare-new p:last-child { font-family: var(--display); font-size: 1.15rem; line-height: 1.35; }

/* Explore */
.landing-explore { background: var(--night-2); }
/* Adventure demo: one episode scene with three choices. */
.adv-player { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); overflow: hidden; border-radius: 24px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 30px 80px var(--shadow-soft); }
.adv-frame { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--night); }
.landing-page .adv-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.adv-frame.is-zoomed img { transform: scale(1.35); transform-origin: 30% 70%; }
.adv-frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #0e0b1fd9 0%, #0e0b1f00 40%); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .adv-frame.is-changed img { animation: adv-cut .5s ease; }
  @keyframes adv-cut { from { opacity: .2; } to { opacity: 1; } }
}
.adv-episode { position: absolute; z-index: 1; top: 14px; left: 14px; padding: 4px 12px; background: var(--gold); color: var(--gold-ink); font-weight: 700; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.adv-panel { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 28px; }
.adv-prompt { margin: 0; font-family: var(--display); font-size: 1.3rem; }
.adv-choices { display: grid; gap: 10px; }
.landing-page .adv-choice { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--hover); color: var(--ink); font: 600 1.05rem 'DM Sans', sans-serif; text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.landing-page .adv-choice::before { content: '▸'; color: var(--gold-text); }
.landing-page .adv-choice:hover { border-color: var(--gold-text); background: #ffd23f14; }
.adv-result { align-self: flex-start; margin: 0; padding: 6px 14px; border-radius: 99px; background: var(--gold); color: var(--gold-ink); font-weight: 700; }
.adv-result:focus { outline: none; }
.adv-result:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.adv-outcome-text { margin: 0; color: var(--muted); }
.landing-page .adv-again { align-self: flex-start; min-height: 44px; padding: 0 18px; border: 1px solid var(--border-strong); border-radius: 99px; background: transparent; color: var(--ink); font: 600 1rem 'DM Sans', sans-serif; cursor: pointer; }
.landing-page .adv-again:hover { background: var(--hover); }

/* Story episode dialogue, in the style of an anime subtitle box. */
.adv-dialogue { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 14px; margin: 0; padding: 14px 18px 12px; border-radius: 14px; background: #0e0b1fd9; color: var(--on-art); border: 1px solid #ffffff2e; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.adv-speaker { position: absolute; top: -14px; left: 14px; padding: 2px 12px; border-radius: 8px; background: #6b4fd1; color: #fff; font-weight: 700; font-size: .9rem; }
.adv-line-text { display: block; font-weight: 600; font-size: 1.05rem; line-height: 1.45; }
.adv-result-shortcut { background: #ff6a4d; color: #1d0700; }

/* Two adventure modes */
.adv-mode { margin-bottom: 32px; }
.adv-mode:last-child { margin-bottom: 0; }
.adv-mode-head { max-width: 720px; margin-bottom: 20px; }
.adv-mode-head h3 { font-size: 1.6rem; margin: 4px 0 8px; }
.adv-mode-head h3 + p { margin: 0; color: var(--muted); }

/* Open world: a point-and-click scene with glowing spots. */
.ow-demo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); overflow: hidden; border-radius: 24px; background: var(--ow-bg); border: 1px solid var(--border); }
.ow-scene { position: relative; aspect-ratio: 16 / 9; }
.landing-page .ow-scene video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--night); }
.landing-page .ow-scene video[hidden] { display: none; }
.ow-clip { z-index: 1; }
.ow-spots { position: absolute; inset: 0; z-index: 2; }
.ow-scene .adv-episode { z-index: 3; }
.landing-page .ow-spot { position: absolute; width: 48px; height: 48px; margin: -24px 0 0 -24px; padding: 0; border: 3px solid #fff; border-radius: 50%; background: #ffd23f59; box-shadow: 0 0 0 6px #ffd23f40, 0 4px 14px #0008; cursor: pointer; }
.landing-page .ow-spot::after { content: ''; position: absolute; inset: 12px; border-radius: 50%; background: #fff; }
.landing-page .ow-spot[aria-pressed="true"] { background: var(--gold); box-shadow: 0 0 0 8px #ffd23f80, 0 4px 14px #0008; }
@media (prefers-reduced-motion: no-preference) {
  .landing-page .ow-spot { animation: ow-pulse 2s ease-in-out infinite; }
  @keyframes ow-pulse { 50% { box-shadow: 0 0 0 14px #ffd23f1a, 0 4px 14px #0008; } }
}
.ow-detail { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 28px; }
.ow-place { margin: 0; color: var(--purple); font-weight: 700; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; }
.ow-name { margin: 0; font-family: var(--display); font-size: 1.3rem; }
.ow-name:focus { outline: none; }
.ow-text { margin: 0; color: var(--muted); }
.ow-hint { margin: 0; color: var(--gold-text); font-weight: 600; font-size: .95rem; }
.ow-actions { display: grid; gap: 10px; margin-top: 4px; }
.landing-page .ow-action { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--gold); color: var(--gold-ink); font: 700 1.02rem 'DM Sans', sans-serif; text-align: left; cursor: pointer; box-shadow: 0 6px 18px #ffd23f33; transition: background .15s ease, transform .15s ease; }
.landing-page .ow-action:hover { background: #ffe07a; transform: translateY(-1px); }
.landing-page .ow-skip { align-self: flex-start; min-height: 44px; padding: 0 18px; border: 1px solid var(--border-strong); border-radius: 99px; background: transparent; color: var(--ink); font: 600 1rem 'DM Sans', sans-serif; cursor: pointer; }
.landing-page .ow-skip:hover { background: var(--hover); }
.adv-mode-head .adv-link { display: flex; gap: 10px; margin: 10px 0 0; color: var(--ink); font-weight: 600; }
.adv-link::before { content: '⇄'; color: var(--gold-text); }
.ow-action span { padding: 2px 8px; border-radius: 6px; background: #1d150026; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }

.landing-episode-number { display: inline-block; margin: 0 0 8px; padding: 3px 12px; background: var(--gold); color: var(--gold-ink); font-weight: 700; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.landing-page h3 { font-size: 1.3rem; line-height: 1.2; margin-bottom: 12px; }

/* Evolve */
.landing-evolve { background: radial-gradient(ellipse at 20% 100%, #6b4fd133, transparent 60%), var(--night); }
/* The margin keeps the explorer head below the compact header after Try this path. */
.evo-explorer { scroll-margin-top: 72px; }
.evo-explorer { padding: 28px; border: 1px solid var(--line); border-radius: 24px; background: var(--hover); }
.evo-explorer-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 20px; }
.evo-explorer-head h3 { margin: 0; font-size: 1.5rem; }
.evo-explorer-head p { margin: 0; color: var(--muted); }

/* Placeholder forms: element sets color, form sets shape, marks add a pattern. Real art replaces all three. */
.evo-form { --tone: #a98bf0; position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 16px; background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--tone) 30%, transparent), transparent 70%); }
.evo-body { position: relative; width: 56%; aspect-ratio: 1; transition: width .3s ease, transform .3s ease; }
.evo-form[data-stage="1"] .evo-body { width: 66%; }
.evo-form[data-stage="2"] .evo-body { width: 76%; }
.evo-form[data-stage="3"] .evo-body { width: 86%; }
.landing-page .evo-body img { width: 100%; height: 100%; filter: hue-rotate(var(--hue, 0deg)) saturate(var(--sat, 1)) drop-shadow(0 8px 12px #00000059); }
.evo-form[data-element="ember"] { --tone: #ff7a45; --hue: 95deg; --sat: 1.5; }
.evo-form[data-element="tide"] { --tone: #4cb7ff; --hue: -60deg; --sat: 1.4; }
.evo-form[data-element="bloom"] { --tone: #5be38a; --hue: -150deg; --sat: 1.3; }
.evo-form[data-form="crest"] .evo-body { transform: scale(.92, 1.12) translateY(-4%); }
.evo-form[data-form="fins"] .evo-body { transform: scale(1.14, .94); }
.evo-form[data-form="tail"] .evo-body { transform: rotate(-9deg) scale(1.02); }
.evo-marks { position: absolute; inset: 0; -webkit-mask: url('/artwork/landing/pet-cutout.webp') center / contain no-repeat; mask: url('/artwork/landing/pet-cutout.webp') center / contain no-repeat; pointer-events: none; }
.evo-form[data-marks="stripes"] .evo-marks { background: repeating-linear-gradient(120deg, transparent 0 9%, #1a0f3a73 9% 14%); mix-blend-mode: multiply; }
.evo-form[data-marks="stars"] .evo-marks { background: radial-gradient(circle, #fffbe6 0 14%, transparent 18%) 0 0 / 22% 22%; mix-blend-mode: screen; opacity: .85; }
.evo-form[data-marks="glow"] .evo-body { filter: drop-shadow(0 0 8px var(--tone)) drop-shadow(0 0 18px var(--tone)); }
.evo-form[data-marks="glow"] .evo-marks { background: repeating-radial-gradient(circle at 50% 62%, transparent 0 10%, #ffffff8c 10% 12%); mix-blend-mode: overlay; }

.evo-timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.evo-frame { position: relative; }
.evo-frame + .evo-frame::before { content: '→'; position: absolute; left: -22px; top: 40%; color: var(--gold-text); font-size: 1.2rem; font-weight: 700; }
.evo-frame .evo-form { background-color: var(--surface); border: 1px solid var(--line); }
.evo-frame p { margin: 10px 0 0; font-weight: 700; }
.evo-frame p span { display: block; color: var(--muted); font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.evo-frame:last-child .evo-form { border-color: #ffd23f80; box-shadow: 0 0 0 1px #ffd23f40, 0 18px 40px var(--shadow-soft); }
@media (prefers-reduced-motion: no-preference) {
  .evo-frame.is-changed .evo-body { animation: evo-pop .45s ease; }
  @keyframes evo-pop { 0% { scale: .8; opacity: .4; } 60% { scale: 1.06; } 100% { scale: 1; opacity: 1; } }
}
.evo-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.evo-stage { margin: 0; padding: 0; border: 0; min-width: 0; }
.evo-stage legend { padding: 0; margin-bottom: 10px; font-weight: 700; }
.evo-stage legend span { display: block; color: var(--purple); font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; }
.evo-options { display: flex; flex-wrap: wrap; gap: 8px; }
/* These option sizes match the earlier layout, which took them from the game stylesheet. */
.evo-option { position: relative; margin-bottom: 8px; font-size: .88rem; cursor: pointer; }
.evo-option input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.evo-option span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--border); border-radius: 99px; background: var(--hover); font-weight: 600; transition: background .15s ease, border-color .15s ease; }
.evo-option:hover span { border-color: var(--border-hover); }
.evo-option input:checked + span { border-color: var(--gold-text); background: #ffd23f24; color: var(--checked-ink); }
.evo-option input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.evo-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
/* Example trainer paths: a short label and one row of Try this path buttons. The row wraps on narrow screens. */
.evo-trainer-paths { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0; }
.evo-trainer-paths p { margin: 0; font-weight: 700; }
.evo-try-list { display: flex; flex-wrap: wrap; gap: 8px; }
.evo-try span[aria-hidden] { color: var(--gold-text); }
.landing-page :is(.evo-random, .evo-try) { min-height: 44px; padding: 0 18px; border: 1px solid var(--border-strong); border-radius: 99px; background: transparent; color: var(--ink); font: 600 1rem 'DM Sans', sans-serif; cursor: pointer; }
.landing-page :is(.evo-random, .evo-try):hover { background: var(--hover); }
.landing-page .evo-try { padding: 0 14px; font-size: .92rem; }

/* Play */
/* The playpen is a secondary feature, so it uses a compact two-column band. */
.landing-play { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: center; padding-block: 64px; background: var(--night-2); }
.landing-play .landing-section-head { margin-bottom: 0; }
.landing-play h2 { font-size: clamp(1.8rem, 2.8vw, 2.4rem); }
/* The Later tag uses the roadmap Later label, so both pages mark the phase the same way. */
.landing-kicker .roadmap-label { margin: 0; }
.landing-playpen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 24px; border: 1px solid var(--border); box-shadow: 0 30px 80px var(--shadow); }
.landing-page .landing-playpen-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.landing-playpen::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #0e0b1f66 0%, #0e0b1f00 30%); pointer-events: none; }
.landing-page .landing-playpen-pets { position: absolute; inset: 0; z-index: 1; }
.landing-playpen-pet { position: absolute; width: 17%; display: flex; flex-direction: column; align-items: center; }
.landing-page .landing-playpen-pet img { width: 100%; filter: hue-rotate(var(--pet-hue)) saturate(1.3) drop-shadow(0 10px 10px #0000004d); }
.landing-playpen-pet span { margin-top: -6px; padding: 3px 8px; border-radius: 99px; background: #0e0b1fd9; font-size: .8rem; white-space: nowrap; color: var(--on-art-muted); }
.landing-playpen-pet strong { color: var(--on-art); }
.landing-playpen-pet-a { left: 8%; bottom: 6%; }
.landing-playpen-pet-b { left: 47%; bottom: 20%; width: 13%; }
.landing-playpen-pet-c { left: 72%; bottom: 4%; transform: scaleX(1); }
.landing-playpen-pet-c img { transform: scaleX(-1); }

/* Roadmap teaser and page */
.landing-roadmap { background: var(--night); }
.landing-page .roadmap-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.roadmap-column { padding: 24px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.roadmap-label { display: inline-block; margin: 0 0 10px; padding: 3px 12px; border-radius: 99px; font-weight: 700; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--border-strong); color: var(--muted); }
.roadmap-now .roadmap-label { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.roadmap-next .roadmap-label { background: #6b4fd1; border-color: #6b4fd1; color: #fff; }
.roadmap-column h3 { font-size: 1.25rem; }
.landing-page .roadmap-column ul { display: grid; gap: 8px; }
.roadmap-column li { display: flex; gap: 10px; }
.roadmap-column li::before { content: ''; flex: none; width: 8px; height: 8px; margin-top: .6em; border-radius: 50%; background: var(--purple); }
.roadmap-column .roadmap-more { color: var(--muted); }
.roadmap-column .roadmap-more::before { background: transparent; border: 1px solid var(--purple); }
.roadmap-link { margin-top: 20px; }
.roadmap-page { padding: 72px var(--gutter) 40px; }
.roadmap-page-hero { max-width: 760px; margin-bottom: 48px; }
.roadmap-page-hero p:last-child { margin: 0; font-size: 1.15rem; color: var(--muted); }
.landing-page .roadmap-phases { display: grid; gap: 20px; }
.roadmap-phase { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 32px; padding: 32px 0; border-top: 1px solid var(--line); }
.roadmap-phase-head h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 8px; }
.roadmap-phase-head p:last-child { margin: 0; color: var(--muted); }
.landing-page .roadmap-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.landing-page .roadmap-now .roadmap-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.roadmap-item { padding: 20px 22px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.roadmap-item h3 { font-size: 1.15rem; margin-bottom: 6px; }
.roadmap-item p { margin: 0; color: var(--muted); }
.landing-footer-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--muted); }
.landing-footer-link:hover { color: var(--ink); }
.landing-footer-link[aria-current] { color: var(--gold-text); }

/* About page. Each section has a heading column and a content column, like the roadmap phases. */
.about-page { padding: 72px var(--gutter) 40px; }
.about-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; margin-bottom: 48px; }
.about-hero-copy { max-width: 820px; }
.about-hero h1 { margin-bottom: 20px; font-size: clamp(2.4rem, 5vw, 4rem); }
.about-hero p { margin: 0 0 12px; color: var(--muted); font-size: 1.1rem; }
.about-hero .about-value { color: var(--ink); font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.5; }
.about-inline-link { color: var(--gold-text) !important; font-weight: 600; text-decoration: underline !important; text-underline-offset: 3px; white-space: nowrap; }
.landing-page .about-hero-pet { width: clamp(200px, 22vw, 300px); margin: 18px; aspect-ratio: 1; padding: 6%; object-fit: contain; border-radius: 50%; background: var(--pet-disc); box-shadow: 0 0 0 8px #a98bf040, 0 0 0 18px #a98bf01a, 0 24px 80px #6b4fd1aa; }
/* Contents links jump to each section. */
.landing-page .about-contents ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.about-contents a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--border); border-radius: 99px; color: var(--muted); font-weight: 600; font-size: .95rem; }
.about-contents a:hover { color: var(--ink); background: var(--hover); }
.about-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 32px; padding: 36px 0; border-top: 1px solid var(--line); scroll-margin-top: 72px; }
/* On wide screens the section heading stays in view while a long section scrolls. */
@media (min-width: 961px) { .about-section-head { position: sticky; top: 88px; align-self: start; } }
.about-section-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: 10px; }
.about-section-head p { margin: 0; color: var(--muted); }
.landing-page .about-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.about-card { padding: 20px 22px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.about-card h3 { font-size: 1.15rem; margin-bottom: 6px; }
.about-card p { margin: 0; color: var(--muted); }
.about-card p + p { margin-top: 8px; }
/* An odd last card fills the row, so that the grid has no empty cell. */
.about-cards > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.about-compare .about-compare-row { display: grid; gap: 2px; }
.about-compare-label { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.about-card .about-compare-others { color: var(--faint); }
.about-compare-others .about-compare-label { color: var(--faint-label); }
.about-card .about-compare-ours { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink); }
.about-compare-ours .about-compare-label { color: var(--gold-text); }
.about-founder { display: flex; gap: 16px; align-items: flex-start; }
.about-avatar { display: grid; flex: none; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--purple), var(--purple-deep)); color: #fff; font-family: var(--display); font-size: 1.4rem; }
.about-founder .about-role { color: var(--purple); font-weight: 700; }
.landing-page .about-steps { counter-reset: about-step; }
.about-steps > li { counter-increment: about-step; }
.about-steps > li h3::before { content: counter(about-step) '. '; color: var(--gold-text); }
.landing-page .about-list { display: grid; gap: 10px; }
.about-list li { display: flex; gap: 12px; font-size: 1.05rem; }
.about-list li::before { content: ''; flex: none; width: 8px; height: 8px; margin-top: .65em; border-radius: 50%; background: var(--purple); }
/* Key facts: one row for each term. Search tools read the dt and dd pairs. */
.about-facts { margin: 0; border-top: 1px solid var(--line); }
.about-facts > div { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.about-facts dt { font-weight: 700; color: var(--muted); }
.about-facts dd { margin: 0; }
.about-faq { display: grid; gap: 22px; }
.about-question h3 { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 700; font-size: 1.15rem; letter-spacing: 0; margin-bottom: 4px; }
.about-question p { margin: 0; color: var(--muted); }
/* A missing fact in the draft. The owner replaces each marker before launch. */
.about-todo { display: inline-block; vertical-align: middle; padding: 1px 10px; font-family: 'DM Sans', system-ui, sans-serif; letter-spacing: 0; line-height: 1.5; border: 1px dashed var(--gold-text); border-radius: 99px; color: var(--gold-text); font-size: .9rem; font-weight: 600; }


/* Mobile apps */
/* The apps are not released. Each store entry is a status label, not a link, so it has no hover or focus state. */
.landing-apps { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px; align-items: center; padding-block: 72px; background: radial-gradient(ellipse at 85% 50%, #6b4fd133, transparent 55%), var(--night-2); }
.landing-apps .landing-section-head { margin-bottom: 28px; }
.landing-stores { display: grid; gap: 12px; max-width: 440px; }
.landing-store { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.landing-store-icon { flex: none; color: var(--purple); }
.landing-store-text { display: flex; flex: 1 1 150px; flex-direction: column; line-height: 1.3; }
.landing-store-name { font-weight: 700; }
.landing-store-devices { font-size: .9rem; color: var(--muted); }
.landing-store-status { margin-left: auto; padding: 3px 10px; border-radius: 99px; background: #ffd23f1f; color: var(--gold-text); font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.landing-apps-device { position: relative; justify-self: center; width: min(240px, 100%); }
.landing-phone { position: relative; aspect-ratio: 9 / 19; overflow: hidden; border: 10px solid #07061a; border-radius: 40px; background: var(--surface); box-shadow: 0 0 0 1px var(--border), 0 30px 80px var(--shadow), 0 0 60px #6b4fd166; transform: rotate(4deg); }
.landing-phone::before { content: ''; position: absolute; z-index: 1; top: 8px; left: 50%; width: 34%; height: 18px; border-radius: 99px; background: #07061a; transform: translateX(-50%); }
.landing-page .landing-phone img { width: 100%; height: 100%; object-fit: cover; object-position: 30% center; }
.landing-page .landing-apps-pet { position: absolute; left: -30%; bottom: -6%; width: 62%; filter: drop-shadow(0 12px 18px #00000080); }

/* Closing */
.landing-page .landing-final-pet { width: clamp(180px, 22vw, 280px); aspect-ratio: 1; padding: 6%; object-fit: contain; border-radius: 50%; background: var(--pet-disc); box-shadow: 0 0 0 8px #a98bf040, 0 0 0 18px #a98bf01a, 0 24px 80px #6b4fd1aa; }
.landing-final { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 56px; background: radial-gradient(circle at 22% 50%, #6b4fd166, transparent 45%), var(--night); }
.landing-final h2 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); margin-bottom: 12px; }
.landing-final-copy > p { margin: 0 0 26px; font-size: 1.15rem; color: var(--muted); }

/* Footer */
.landing-footer { display: flex; align-items: center; gap: 24px; padding: 28px var(--gutter); border-top: 1px solid var(--line); color: var(--muted); }
.landing-footer > span { margin-left: auto; }

/* Tablets keep the section links in a compact row. Phones hide the nav at 720 pixels and below. */
@media (max-width: 1100px) {
  .landing-header { gap: 12px; }
  .landing-header nav { gap: 4px; }
  .landing-header nav a { padding: 8px 10px; }
  .landing-header nav + .landing-header-actions { margin-left: 4px; }
  .landing-page .landing-signin { padding: 0 10px; }
  .landing-header-cta { padding: 0 14px; }
}

@media (max-width: 960px) {
  .landing-battles { display: block; }
  .adv-player, .ow-demo { grid-template-columns: 1fr; }
  .landing-play { display: block; }
  .landing-play .landing-section-head { margin-bottom: 24px; }
  .landing-apps { grid-template-columns: 1fr; gap: 40px; }
  .landing-apps-device { width: 200px; }
  .landing-compare { grid-template-columns: 1fr 1.4fr; margin-top: 16px; }
  .landing-page .roadmap-columns { grid-template-columns: 1fr; }
  .roadmap-phase { grid-template-columns: 1fr; gap: 16px; }
  .about-section { grid-template-columns: 1fr; gap: 16px; }
  .about-hero { gap: 32px; }
}

@media (max-width: 720px) {
  .landing-header { gap: 12px; padding-block: 10px; }
  .landing-header nav { display: none; }
  .landing-header nav + .landing-header-actions { margin-left: auto; }
  .landing-brand { font-size: 1.15rem; }
  .landing-brand-mark { width: 32px; height: 32px; font-size: 1.3rem; }
  .landing-hero { flex-direction: column; align-items: stretch; min-height: 0; padding: 0 var(--gutter) 56px; }
  .landing-media-overview { position: relative; inset: auto; z-index: -2; aspect-ratio: 4 / 3; margin: 0 calc(-1 * var(--gutter)) -64px; }
  .landing-hero::before { display: none; }
  .landing-media-overview::after { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(0deg, var(--night) 0%, transparent 45%); }
  .landing-hero::after { display: none; }
  .landing-lede { font-size: 1.1rem; }
  .landing-pillars { grid-template-columns: 1fr; }
  .landing-pillars li + li { border-left: 0; border-top: 1px solid var(--line); }
  .landing-page .landing-pillars { padding: 0; grid-template-columns: 1fr; }
  .landing-pillars li:nth-child(n) { border-left: 0; }
  .landing-pillars a { padding: 12px var(--gutter); }
  .landing-section { padding-block: 56px; }
  .landing-section-head { margin-bottom: 24px; }
  .landing-section-head > p:last-child { font-size: 1.05rem; }
  .landing-media-battles { aspect-ratio: 4 / 3; border-radius: 18px; }
  .landing-media-battles .landing-scene-image { object-position: 35% center; }
  .landing-battle-hud { inset: 14px 14px auto; }
  .landing-hp span { font-size: .85rem; }
  .landing-moves { position: static; grid-template-columns: 1fr 1fr; margin-top: 12px; }
  .landing-move { border-color: var(--border-strong); background: var(--surface); color: var(--ink); }
  .landing-compare { grid-template-columns: 1fr; }
  .landing-compare > div { padding: 16px 18px; }
  /* Episodes scroll sideways on phones instead of stacking. */
  .adv-panel, .ow-detail { padding: 20px 18px 22px; }
  .adv-line-text { font-size: .92rem; }
  .adv-dialogue { left: 10px; right: 10px; bottom: 10px; padding: 12px 12px 10px; }
  .adv-mode { margin-bottom: 28px; }
  .adv-mode-head h3 { font-size: 1.35rem; }
  .adv-episode { font-size: .75rem; top: 10px; left: 10px; }
  .evo-explorer { padding: 18px 16px; border-radius: 18px; }
  .evo-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
  .evo-frame:nth-child(3)::before { display: none; }
  .evo-frame + .evo-frame::before { left: -17px; }
  .evo-controls { grid-template-columns: 1fr; gap: 14px; }
  .evo-option span { padding: 0 14px; }
  .landing-playpen { aspect-ratio: 4 / 3; border-radius: 18px; }
  .landing-playpen-pet { width: 27%; }
  .landing-playpen-pet-a { left: 2%; }
  .landing-playpen-pet-b { left: 38%; width: 22%; bottom: 28%; }
  .landing-playpen-pet-c { left: 68%; }
  .landing-playpen-pet span { font-size: .75rem; padding: 3px 8px; }
  .landing-apps { padding-block: 56px; }
  .landing-stores { max-width: none; }
  .landing-apps-device { width: 180px; }
  .roadmap-page { padding-top: 48px; }
  .about-page { padding-top: 48px; }
  .about-hero { grid-template-columns: 1fr; }
  .landing-page .about-hero-pet { display: none; }
  .landing-page .about-cards { grid-template-columns: 1fr; }
  .about-facts > div { grid-template-columns: 1fr; gap: 2px; }
  .landing-page .roadmap-items, .landing-page .roadmap-now .roadmap-items { grid-template-columns: 1fr; }
  .landing-final { grid-template-columns: 1fr; justify-items: center; gap: 24px; text-align: center; }
  .landing-final .landing-waitlist { margin-inline: auto; }
  .landing-footer { flex-wrap: wrap; gap: 8px 16px; }
  .landing-footer > span { order: 3; width: 100%; margin-left: 0; }
  .landing-footer .landing-signin { margin-left: auto; }
}

@media (max-width: 480px) {
  .landing-header-cta { padding: 0 14px; font-size: .95rem; }
  .landing-page .landing-signin { padding: 0 10px; }
  .landing-waitlist { flex-direction: column; border-radius: 24px; }
  .landing-waitlist input { flex-basis: auto; }
  .landing-page .landing-waitlist .landing-cta { width: 100%; }
}

@media (max-width: 400px) {
  .landing-eyebrow-extra { display: none; }
}

/* Tablets and phones show a short Join label in the header. The link keeps its full accessible name. */
@media (max-width: 1100px) {
  .landing-header-cta-extra { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Small phones keep the Join link in the header. Sign in stays in the footer. */
@media (max-width: 360px) {
  .landing-header .landing-signin { display: none; }
}

/* Scroll entrances. The script adds landing-motion and is-revealed. The hidden states apply on screens with motion allowed only.
   Transitions, not animations, drive the entrances, so evolution frames that render again after a choice do not replay them. */
@media screen and (prefers-reduced-motion: no-preference) {
  html.landing-motion .landing-page {
    --reveal-ease: cubic-bezier(.2, .7, .2, 1);
  }
  html.landing-motion-setup .landing-page *, html.landing-motion-setup .landing-page *::before { transition: none !important; }
  /* 1. Section heads: the kicker bar wipes in, then the heading and text rise. */
  html.landing-motion .landing-section-head > * { transition: opacity .5s ease, transform .6s var(--reveal-ease); }
  html.landing-motion .landing-section-head > :nth-child(2) { transition-delay: 80ms; }
  html.landing-motion .landing-section-head > :nth-child(3) { transition-delay: 160ms; }
  html.landing-motion .landing-section-head:not(.is-revealed) > * { opacity: 0; transform: translateY(24px); }
  html.landing-motion .landing-section-head .landing-kicker::before { transform-origin: left center; transition: transform .45s var(--reveal-ease) .15s; }
  html.landing-motion .landing-section-head:not(.is-revealed) .landing-kicker::before { transform: skewX(-30deg) scaleX(0); }
  /* 1. Media frames and demos rise and grow into place. */
  html.landing-motion :is(.landing-battle-stage, .adv-player, .ow-demo, .evo-explorer, .landing-playpen, .landing-apps-device) { transition: opacity .55s ease, transform .7s var(--reveal-ease); }
  html.landing-motion :is(.landing-battle-stage, .adv-player, .ow-demo, .evo-explorer, .landing-playpen, .landing-apps-device):not(.is-revealed) { opacity: 0; transform: translateY(32px) scale(.97); }
  /* 1. Card groups appear one after another. */
  html.landing-motion :is(.landing-compare > div, .roadmap-columns > li, .roadmap-phase, .about-section, .landing-final > *, .landing-stores > li) { transition: opacity .5s ease, transform .6s var(--reveal-ease); }
  html.landing-motion :is(.landing-compare > div, .roadmap-columns > li, .landing-final > *, .landing-stores > li):nth-child(2) { transition-delay: 100ms; }
  html.landing-motion .roadmap-columns > li:nth-child(3) { transition-delay: 200ms; }
  html.landing-motion :is(.landing-compare:not(.is-revealed) > div, .roadmap-columns:not(.is-revealed) > li, .roadmap-phase:not(.is-revealed), .about-section:not(.is-revealed), .landing-final:not(.is-revealed) > *, .landing-stores:not(.is-revealed) > li) { opacity: 0; transform: translateY(24px); }
  /* 2. Battle frame: the HP bars fill and the four moves appear in order after the frame arrives. */
  html.landing-motion .landing-hp i::before { transform-origin: left center; transition: transform .9s var(--reveal-ease) .35s; }
  html.landing-motion .landing-hp-foe i::before { transform-origin: right center; }
  html.landing-motion .landing-battle-stage:not(.is-revealed) .landing-hp i::before { transform: scaleX(0); }
  html.landing-motion .landing-move { transition: opacity .35s ease, transform .45s var(--reveal-ease); transition-delay: calc(350ms + var(--move-index) * 90ms); }
  html.landing-motion .landing-battle-stage:not(.is-revealed) .landing-move { opacity: 0; transform: translateY(14px); }
  .landing-move:nth-child(1) { --move-index: 0; }
  .landing-move:nth-child(2) { --move-index: 1; }
  .landing-move:nth-child(3) { --move-index: 2; }
  .landing-move:nth-child(4) { --move-index: 3; }
  /* 4. Evolution timeline: the forms appear left to right, in the order of the arrows. */
  html.landing-motion .evo-timeline .evo-frame { transition: opacity .45s ease, transform .55s var(--reveal-ease); transition-delay: calc(200ms + var(--frame-index) * 140ms); }
  html.landing-motion .evo-timeline:not(.is-revealed) .evo-frame { opacity: 0; transform: translateX(-16px); }
  .evo-frame:nth-child(1) { --frame-index: 0; }
  .evo-frame:nth-child(2) { --frame-index: 1; }
  .evo-frame:nth-child(3) { --frame-index: 2; }
  .evo-frame:nth-child(4) { --frame-index: 3; }
}

@media (prefers-reduced-motion: reduce) { .landing-page * { scroll-behavior: auto; transition: none; animation: none; } }