/* New landing design at /landing-next. It loads after landing.css and uses the same color tokens and fonts.
   The dark theme is the default. The light theme adds daylight scenery tones for the veils over artwork.
   Labels and controls on top of artwork keep dark backgrounds in both themes, as on the current page. */
html.landing-active {
  --lnx-veil: var(--night);
  --lnx-backdrop-opacity: .22;
  /* Accent for the two key words of the headline. */
  --lnx-accent: var(--gold);
}
html.landing-active[data-theme="light"] {
  /* A pale daylight sky tone. It replaces the night veil behind hero and closing text. */
  --lnx-veil: #e4ecf1;
  --lnx-backdrop-opacity: .16;
  --lnx-accent: var(--purple-deep);
}

/* Section rhythm. Wide section heads keep most headings on one line, so the page is shorter. Body text keeps a short line length. */
.lnx-page .landing-section { padding-block: 72px; }
.lnx-page .landing-section-head { max-width: 900px; margin-bottom: 32px; }
.lnx-page .landing-section-head > p:not(.landing-kicker) { max-width: 700px; }

/* Scene frames: a still image, and an optional loop that fades in over it when it plays. */
.lnx-scene { position: relative; margin: 0; overflow: hidden; background: var(--surface); }
.landing-page .lnx-scene img, .lnx-scene video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lnx-scene video { z-index: 1; opacity: 0; transition: opacity .6s ease; }
.lnx-scene.has-playing-video video { opacity: 1; }
.lnx-scene .lnx-scene-control { z-index: 3; }

/* Hero: a bright, wide view of the world, a large pet in the foreground, and the waitlist.
   The scene stays in daylight in both themes. Only the veil behind the copy follows the theme. */
.lnx-page { --lnx-loop-overlap: 44px; }
.lnx-hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: max(560px, min(calc(100svh - 69px), 900px)); padding: 56px var(--gutter) calc(56px + var(--lnx-loop-overlap)); overflow: hidden; }
.lnx-hero-scene { position: absolute; inset: 0; z-index: -3; }
.landing-page .lnx-hero-scene img { object-position: 50% 40%; transform: scale(var(--lnx-scene-zoom, 1)); transform-origin: 100% 40%; }
/* The veil keeps the copy readable. It fades out after the end of the headline, so the right half of the scene stays bright.
   The pet sits above the veil, so the veil does not dim it. */
.lnx-hero::before { content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none; background:
  linear-gradient(90deg, var(--lnx-veil) 0%, var(--lnx-veil) 40%, color-mix(in srgb, var(--lnx-veil) 86%, transparent) 50%, color-mix(in srgb, var(--lnx-veil) 48%, transparent) 58%, color-mix(in srgb, var(--lnx-veil) 10%, transparent) 66%, transparent 74%),
  linear-gradient(0deg, var(--night) 0%, transparent 14%); }
.lnx-hero-copy { position: relative; max-width: min(760px, 56vw); }
.lnx-page h1 { font-size: clamp(2.2rem, 3.4vw, 3.05rem); text-shadow: 0 2px 18px var(--lnx-veil); }
/* The headline has two sentences: the anime half and the game half. Each starts on a new line. */
.lnx-title-line { display: block; }
.lnx-page h1 em { font-style: normal; color: var(--lnx-accent); }
.lnx-hero .landing-lede { max-width: 540px; text-shadow: 0 1px 10px var(--lnx-veil); }
.lnx-hero-pet { position: absolute; z-index: -1; right: max(16px, calc(var(--gutter) - 12px)); bottom: calc(3% + var(--lnx-loop-overlap)); width: clamp(260px, 30vw, 470px); pointer-events: none; }
.lnx-hero-pet::after { content: ''; position: absolute; z-index: -1; left: 12%; right: 12%; bottom: 1%; height: 12%; border-radius: 50%; background: radial-gradient(closest-side, #0b1a1073, transparent); }
.landing-page .lnx-hero-pet img { width: 100%; filter: drop-shadow(0 16px 20px #0b1a1059); }
/* A place card in the style of an anime location title. It is decoration, so screen readers skip it. */
.lnx-place { position: absolute; z-index: 2; top: 24px; right: var(--gutter); display: inline-flex; align-items: center; gap: 8px; height: 40px; margin: 0; padding: 0 16px 0 12px; border: 1px solid #ffffff33; border-radius: 99px; background: #0e0b1fb3; color: var(--on-art); font-size: .9rem; font-weight: 600; letter-spacing: .02em; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lnx-place svg { color: var(--gold); }

/* Show loop: four linked steps under the hero, then a line back to the start for the next episode.
   On wide screens the cards overlap the bottom of the hero, so the first screen shows the top of the loop. */
.lnx-loop { position: relative; z-index: 1; margin-top: calc(-1 * var(--lnx-loop-overlap)); padding: 0 var(--gutter) 36px; }
.landing-page .lnx-loop-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.lnx-loop-steps li { position: relative; }
/* A gold arrow between two steps. */
.lnx-loop-steps li + li::before { content: ''; position: absolute; z-index: 2; left: -22px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; background: var(--gold); box-shadow: 0 4px 12px #0006; }
.lnx-loop-steps li + li::after { content: ''; position: absolute; z-index: 3; left: -17px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border: solid var(--gold-ink); border-width: 2px 2px 0 0; transform: rotate(45deg); }
.landing-page .lnx-loop-step { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: 0 18px 44px var(--shadow-soft); transition: transform .2s ease, border-color .2s ease; }
.landing-page .lnx-loop-step:hover { transform: translateY(-3px); border-color: var(--gold-text); }
.lnx-loop-thumb { position: relative; display: block; flex: none; aspect-ratio: 2.1 / 1; overflow: hidden; background: var(--night-2); }
.landing-page .lnx-loop-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* The Grow thumbnail: the hero pet, an arrow, and its glowing outline, like the evolution teaser. */
.lnx-loop-thumb-grow { background: radial-gradient(circle at 72% 55%, #ffd23f59, transparent 42%), radial-gradient(circle at 26% 60%, #5be38a40, transparent 40%), #1d1840; }
.landing-page .lnx-loop-thumb-grow img { position: absolute; left: 10%; bottom: 10%; width: 30%; height: auto; }
.lnx-loop-arrow { position: absolute; left: 47%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border: solid #ffd23f; border-width: 3px 3px 0 0; transform: rotate(45deg); }
.lnx-loop-glow { position: absolute; right: 9%; bottom: 8%; width: 36%; aspect-ratio: 720 / 708; filter: drop-shadow(0 0 6px #ffd23f) drop-shadow(0 0 14px #ffd23f); }
.lnx-loop-glow::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, #fff 0 38%, #fff3b0 80%); -webkit-mask: var(--lnx-mask) center / contain no-repeat; mask: var(--lnx-mask) center / contain no-repeat; }
.lnx-loop-text { display: grid; gap: 4px; padding: 12px 16px 16px; }
.lnx-loop-label { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 1.25rem; line-height: 1.2; }
.lnx-loop-number { display: grid; flex: none; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: var(--gold-ink); font: 700 .85rem/1 'DM Sans', sans-serif; }
.lnx-loop-line { color: var(--muted); font-size: .95rem; line-height: 1.4; }
.lnx-loop-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* The line back: it leaves the last step, runs under the loop, and returns to the first step. */
.lnx-loop-next { display: flex; align-items: center; gap: 12px; margin: 0 calc(12.5% - 18px); color: var(--muted); font-weight: 600; font-size: .95rem; white-space: nowrap; }
.lnx-loop-next svg { flex: none; color: var(--gold-text); }
.lnx-loop-next::before, .lnx-loop-next::after { content: ''; flex: 1; height: 20px; margin-top: -20px; border: 2px dashed var(--border-strong); border-top: 0; }
.lnx-loop-next::before { order: -1; border-right: 0; border-radius: 0 0 0 14px; }
.lnx-loop-next::after { border-left: 0; border-radius: 0 0 14px 0; }

/* Part 1, Watch: the fork scene and the next scene. */
.lnx-world { position: relative; isolation: isolate; overflow: hidden; background: var(--night-2); }
.lnx-world::before { content: ''; position: absolute; inset: -60px; z-index: -1; pointer-events: none; background: var(--lnx-backdrop) center / cover no-repeat; filter: blur(32px) saturate(1.2); opacity: var(--lnx-backdrop-opacity); }
.lnx-choice { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); grid-template-areas: 'ask arrow answer' 'menu . result'; align-items: start; }
.lnx-choice-step { display: contents; }
.lnx-choice-step:first-child .lnx-choice-frame { grid-area: ask; }
.lnx-choice-menu { grid-area: menu; }
.lnx-choice-arrow { grid-area: arrow; }
.lnx-choice-answer { grid-area: answer; }
.lnx-choice-result { grid-area: result; }
.lnx-choice-frame { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 24px 60px var(--shadow-soft); }
.landing-page .lnx-choice-frame img, .lnx-choice-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lnx-choice-frame video { z-index: 1; }
.landing-page .lnx-choice-frame video[hidden] { display: none; }
.lnx-choice-frame .adv-episode { z-index: 2; }
.lnx-choice-answer { transition: border-color .2s ease, box-shadow .2s ease; }
.lnx-choice-answer.is-moving { border-color: #ffd23f99; box-shadow: 0 0 0 4px #ffd23f33, 0 24px 60px var(--shadow-soft); }
/* Path markers on the fork frame. They repeat the three choices. The buttons below are the controls. */
.lnx-choice-marker { position: absolute; z-index: 1; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 3px solid #fff; border-radius: 50%; background: #ffd23f4d; box-shadow: 0 2px 8px #0008; transition: transform .2s ease, background .2s ease; }
.lnx-choice-marker.is-selected { background: var(--gold); transform: scale(1.3); box-shadow: 0 0 0 6px #ffd23f66, 0 2px 8px #0008; }
.lnx-choice-marker-grass { left: 17%; top: 55%; }
.lnx-choice-marker-river { left: 48%; top: 44%; }
.lnx-choice-marker-burned { left: 67%; top: 64%; }
.lnx-choice-arrow { align-self: center; justify-self: center; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--gold); color: var(--gold-ink); box-shadow: 0 8px 24px #ffd23f40; }
.lnx-choice-arrow::before { content: ''; width: 12px; height: 12px; margin-left: -4px; border: solid currentColor; border-width: 3px 3px 0 0; transform: rotate(45deg); }
.lnx-choice-menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.landing-page .lnx-choice-button { min-height: 48px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--hover); color: var(--ink); font: 600 .95rem/1.25 'DM Sans', sans-serif; text-align: center; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.landing-page .lnx-choice-button:hover { border-color: var(--gold-text); }
.landing-page .lnx-choice-button[aria-pressed="true"] { border-color: var(--gold-text); background: #ffd23f24; color: var(--checked-ink); }
.lnx-choice-result { min-height: 3.2em; margin: 14px 0 0; color: var(--muted); font-size: 1.05rem; }
.lnx-choice-result strong { color: var(--ink); }

/* Evolution teaser: a starter, three example paths, and the glowing outline of a future form.
   The glow is the classic anime sign of an evolution. It shows a changed shape, not final art. */
.lnx-grow { position: relative; background: radial-gradient(ellipse at 50% 60%, #6b4fd12e, transparent 65%), var(--night); }
.lnx-page .lnx-grow .landing-section-head { margin-inline: auto; text-align: center; }
.lnx-page .lnx-grow .landing-section-head > p:not(.landing-kicker) { margin-inline: auto; }
.lnx-grow-demo { --tint: #4cb7ff; --glow: var(--gold); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr); grid-template-areas: 'start paths future' '. . more'; align-items: center; gap: 12px 56px; max-width: 1080px; margin: 0 auto; }
.lnx-grow-demo[data-starter="green"] { --tint: #5be38a; }
.lnx-grow-demo[data-starter="red"] { --tint: #ff7a45; }
.lnx-grow-demo[data-path="strong"] { --glow: var(--purple); }
.lnx-grow-demo[data-path="swift"] { --glow: #b7f0ff; }
.lnx-grow-start { grid-area: start; }
.lnx-grow-paths { grid-area: paths; }
.lnx-grow-future { grid-area: future; }
.lnx-grow-start, .lnx-grow-future { display: grid; justify-items: center; text-align: center; }
.lnx-grow-disc { position: relative; display: grid; place-items: center; width: min(220px, 100%); aspect-ratio: 1; margin: 0; border: 1px solid var(--line); border-radius: 50%; background: radial-gradient(circle at 50% 62%, color-mix(in srgb, var(--tint) 34%, transparent), transparent 68%), var(--surface); box-shadow: 0 24px 60px var(--shadow-soft); }
.landing-page .lnx-grow-pet { width: 70%; filter: drop-shadow(0 10px 12px #0000004d); }
.lnx-grow-label { max-width: 260px; margin: 14px 0 0; color: var(--muted); }
.lnx-grow-label strong { display: block; color: var(--ink); font-size: 1.05rem; }
.landing-page .lnx-grow-starters { display: flex; gap: 10px; margin-top: 14px; }
.landing-page .lnx-grow-avatar { display: grid; place-items: center; width: 48px; height: 48px; padding: 6px; border: 2px solid var(--border); border-radius: 50%; background: var(--surface); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.landing-page .lnx-grow-avatar:hover { border-color: var(--border-hover); }
.landing-page .lnx-grow-avatar[aria-pressed="true"] { border-color: var(--gold-text); background: #ffd23f24; }
.landing-page .lnx-grow-avatar img { width: 100%; }
/* Path buttons. Short lines join them to the starter and to the future form on wide screens. */
.lnx-grow-paths { position: relative; display: grid; gap: 12px; }
.lnx-grow-paths::before, .lnx-grow-paths::after { content: ''; position: absolute; top: 50%; width: 40px; border-top: 2px dashed var(--border-strong); }
.lnx-grow-paths::before { right: 100%; margin-right: 8px; }
.lnx-grow-paths::after { left: 100%; margin-left: 8px; }
.landing-page .lnx-grow-path { display: grid; gap: 2px; min-height: 64px; padding: 12px 18px; border: 1px solid var(--border); border-radius: 18px; background: var(--hover); color: var(--ink); font: 400 .95rem/1.35 'DM Sans', sans-serif; text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.lnx-grow-path strong { font-family: var(--display); font-weight: 400; font-size: 1.15rem; }
.lnx-grow-path span { color: var(--muted); }
.landing-page .lnx-grow-path:hover { border-color: var(--border-hover); }
.landing-page .lnx-grow-path[aria-pressed="true"] { border: 2px solid var(--gold-text); padding: 11px 17px; background: #ffd23f1f; }
/* Future form: the starter outline, filled with light and scaled for the selected path. */
.lnx-grow-preview { width: min(250px, 100%); background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--glow) 38%, transparent), transparent 70%), var(--surface); }
.lnx-grow-glow { position: absolute; inset: 16%; filter: drop-shadow(0 0 10px var(--glow)) drop-shadow(0 0 26px var(--glow)); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.lnx-grow-glow::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, #fff 0 38%, color-mix(in srgb, var(--glow) 55%, #fff) 80%); -webkit-mask: var(--lnx-mask) center / contain no-repeat; mask: var(--lnx-mask) center / contain no-repeat; }
.lnx-grow-demo[data-path="cute"] .lnx-grow-glow { transform: scale(1.1, .96) translateY(4%); }
.lnx-grow-demo[data-path="strong"] .lnx-grow-glow { transform: scale(1.24) translateY(-2%); }
.lnx-grow-demo[data-path="swift"] .lnx-grow-glow { transform: scale(.94, 1.18) translateY(-5%) skewX(-6deg); }
.lnx-grow-spark { position: absolute; width: 14px; height: 14px; background: radial-gradient(circle, #fff 0 20%, transparent 22%), conic-gradient(from 45deg, transparent 0 20%, #fff 20% 30%, transparent 30% 45%, #fff 45% 55%, transparent 55% 70%, #fff 70% 80%, transparent 80% 95%, #fff 95%); -webkit-mask: radial-gradient(circle, #000 0 45%, transparent 70%); mask: radial-gradient(circle, #000 0 45%, transparent 70%); }
.lnx-grow-spark-a { top: 16%; right: 18%; }
.lnx-grow-spark-b { top: 58%; left: 12%; width: 10px; height: 10px; }
.lnx-grow-spark-c { bottom: 16%; right: 24%; width: 11px; height: 11px; }
.lnx-grow-more { grid-area: more; justify-self: center; }
.landing-page .lnx-link { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border: 1px solid var(--border-strong); border-radius: 99px; font-weight: 700; color: var(--ink); transition: background .15s ease, border-color .15s ease; }
.landing-page .lnx-link:hover { background: var(--hover); border-color: var(--gold-text); }
.lnx-link span { color: var(--gold-text); }

/* Part 2, Choose: the shared episode demo. */
.lnx-story { background: var(--night); }

/* Part 4, Grow: the shared evolution explorer follows the teaser. A narrower timeline keeps it shorter on wide screens. */
.lnx-evolve { margin-top: 64px; scroll-margin-top: 72px; }
.lnx-evolve-head { max-width: 760px; margin-bottom: 20px; }
.lnx-evolve-head h3 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-bottom: 6px; }
.lnx-evolve-head p { margin: 0; color: var(--muted); font-size: 1.05rem; }
.lnx-evolve .evo-timeline { max-width: 900px; margin-inline: auto; }

/* Part 3, Battle: the frame shows footage only. Example moves sit below the frame, outside the picture.
   The opponents list and the Later line sit under the heading. */
.lnx-battle { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: 'head stage' 'stakes stage'; column-gap: 56px; align-items: center; background: radial-gradient(ellipse at 80% 0%, #6b4fd140, transparent 60%), var(--night-2); }
.lnx-battle .landing-section-head { grid-area: head; align-self: end; margin-bottom: 24px; }
.lnx-battle h2 { font-size: clamp(2rem, 3vw, 2.6rem); }
.lnx-battle-stage { grid-area: stage; }
.lnx-battle-scene { aspect-ratio: 16 / 9; border: 1px solid var(--border); border-radius: 24px; box-shadow: 0 30px 80px var(--shadow), 0 0 0 6px var(--hover); }
.lnx-moves { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; }
.lnx-moves p { margin: 0; color: var(--muted); font-size: .85rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.landing-page .lnx-moves ul { display: flex; flex-wrap: wrap; gap: 8px; }
.lnx-moves .landing-move { min-height: 40px; padding: 0 14px; border-color: var(--border-strong); background: var(--surface); color: var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; }
.lnx-stakes { grid-area: stakes; align-self: start; }
.landing-page .lnx-opponents { display: grid; gap: 10px; }
.lnx-opponents li { display: grid; gap: 2px; padding: 12px 18px; border: 1px solid var(--line); border-left: 4px solid var(--opponent); border-radius: 6px 16px 16px 6px; background: var(--surface); }
.lnx-opponents li:nth-child(1) { --opponent: var(--purple); }
.lnx-opponents li:nth-child(2) { --opponent: var(--gold); }
.lnx-opponents li:nth-child(3) { --opponent: #5be38a; }
.lnx-opponents strong { font-family: var(--display); font-weight: 400; font-size: 1.1rem; }
.lnx-opponents span { color: var(--muted); }
.lnx-later { display: flex; align-items: flex-start; gap: 12px; margin: 16px 0 0; color: var(--muted); }
.lnx-later .roadmap-label { flex: none; margin: 2px 0 0; }

/* Roadmap teaser with the mobile apps notice. */
.lnx-apps { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px 20px; margin-top: 24px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.lnx-page .roadmap-link { margin-top: 16px; }
.lnx-apps-icon { color: var(--purple); }
.lnx-apps-copy h3 { font-size: 1.2rem; margin-bottom: 4px; }
.lnx-apps-copy p { margin: 0; color: var(--muted); }
.landing-page .lnx-stores { display: flex; flex-wrap: wrap; gap: 8px; }
.lnx-store { display: grid; grid-template-columns: auto auto; align-items: center; gap: 0 12px; padding: 8px 12px 8px 16px; border: 1px solid var(--border); border-radius: 14px; }
.lnx-store-name { font-weight: 700; }
.lnx-store-devices { grid-row: 2; color: var(--muted); font-size: .85rem; }
.lnx-store .landing-store-status { grid-row: 1 / 3; grid-column: 2; }

/* Closing: the start of the forest path, the starters, and the waitlist.
   The Next episode card uses the style of the episode chip on the demos. It is decoration, not a feature. */
.lnx-final-copy > .lnx-next-card { display: inline-block; margin: 0 0 16px; padding: 4px 14px; 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%); }
.lnx-final { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 40px; min-height: 440px; overflow: hidden; background: var(--night); }
.lnx-final::before { content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: var(--lnx-backdrop) 50% 55% / cover no-repeat; }
.lnx-final::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  linear-gradient(90deg, var(--lnx-veil) 0%, color-mix(in srgb, var(--lnx-veil) 92%, transparent) 42%, color-mix(in srgb, var(--lnx-veil) 55%, transparent) 60%, color-mix(in srgb, var(--lnx-veil) 15%, transparent) 100%),
  linear-gradient(180deg, var(--night) 0%, transparent 18%); }
.lnx-final-copy h2 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); margin-bottom: 12px; text-shadow: 0 2px 18px var(--lnx-veil); }
.lnx-final-copy > p { max-width: 520px; margin: 0 0 26px; font-size: 1.15rem; color: var(--lede); }
.lnx-final-pets { display: flex; align-items: flex-end; justify-content: center; }
.lnx-final-pets li { width: 30%; margin: 0 -1%; }
.lnx-final-pets .lnx-final-pet-blue { position: relative; z-index: 1; width: 34%; margin-bottom: -4%; }
.landing-page .lnx-final-pets img { width: 100%; filter: drop-shadow(0 14px 16px #0b1a1066); }


/* Tablets */
@media (max-width: 960px) {
  .lnx-grow-demo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: 'start future' 'paths paths' 'more more'; gap: 24px; }
  .lnx-grow-paths { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lnx-grow-paths::before, .lnx-grow-paths::after { display: none; }
  .landing-page .lnx-loop-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .lnx-loop-steps li + li::before, .lnx-loop-steps li + li::after { display: none; }
  /* The steps wrap, so the line back is a plain line under the steps. */
  .lnx-loop-next { margin: 14px 0 0; }
  .lnx-loop-next::before, .lnx-loop-next::after { height: 0; margin-top: 0; border-width: 2px 0 0; border-top: 2px dashed var(--border-strong); border-radius: 0; }
  .lnx-battle { display: block; }
  .lnx-stakes { margin-top: 24px; }
  .landing-page .lnx-opponents { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lnx-apps { grid-template-columns: auto minmax(0, 1fr); }
  .landing-page .lnx-stores { grid-column: 1 / -1; }
  .lnx-final { grid-template-columns: 1fr; gap: 32px; }
  .lnx-final::after { background: linear-gradient(0deg, var(--lnx-veil) 0%, color-mix(in srgb, var(--lnx-veil) 92%, transparent) 55%, color-mix(in srgb, var(--lnx-veil) 40%, transparent) 100%); }
  .lnx-final-pets { order: -1; max-width: 420px; justify-self: center; }
}

/* Tablets: the header has five section links on this page, so the links are more compact. */
@media (min-width: 721px) and (max-width: 960px) {
  .lnx-page .landing-header { gap: 8px; }
  .lnx-page .landing-header nav { gap: 0; }
  .lnx-page .landing-header nav a { padding: 8px 7px; font-size: .92rem; }
  .lnx-page .landing-header-actions { gap: 4px; }
}
/* Narrow tablets hide the Roadmap header link. The roadmap teaser and the footer keep the link. */
@media (min-width: 721px) and (max-width: 780px) {
  .lnx-page .landing-header nav a[data-nav-section="roadmap"] { display: none; }
}

/* Phones: the scene sits above the copy. The waitlist and the tutorial link stay in the first screen. */
@media (max-width: 720px) {
  .lnx-hero { display: block; min-height: 0; padding: 0 var(--gutter) 40px; }
  /* The scene is 3:2, so its height is two thirds of the width. The pet stands on the left, in front of the painted ball. */
  .lnx-hero-scene { position: relative; inset: auto; aspect-ratio: 3 / 2; margin: 0 calc(-1 * var(--gutter)); }
  .landing-page .lnx-hero-scene img { object-position: 60% 50%; transform: none; }
  .lnx-hero::before { background: linear-gradient(180deg, transparent 0, transparent calc(66.667vw - 80px), var(--night) 66.667vw); }
  .lnx-hero-pet { top: calc(66.667vw - 40vw - 18px); left: 4px; right: auto; bottom: auto; width: 40vw; }
  .lnx-hero-copy { max-width: none; margin-top: -20px; }
  .lnx-page h1 { font-size: 2.15rem; margin-bottom: 14px; }
  .lnx-hero .landing-eyebrow { margin-bottom: 14px; }
  .lnx-hero .landing-lede { margin-bottom: 20px; font-size: 1.05rem; line-height: 1.55; }
  .lnx-place { top: 12px; right: 12px; height: 36px; padding: 0 12px 0 10px; font-size: .8rem; }
  .lnx-page { --lnx-loop-overlap: 0px; }
  .lnx-page .landing-section { padding-block: 52px; }
  /* The loop becomes a list: a small thumbnail beside each step. */
  .lnx-loop { padding-bottom: 28px; }
  .landing-page .lnx-loop-steps { grid-template-columns: 1fr; gap: 10px; }
  .landing-page .lnx-loop-step { flex-direction: row; align-items: stretch; border-radius: 16px; }
  .lnx-loop-thumb { width: 38%; max-width: 150px; aspect-ratio: auto; min-height: 76px; }
  .lnx-loop-text { align-content: center; padding: 10px 14px; }
  .lnx-loop-label { font-size: 1.1rem; }
  .lnx-loop-line { font-size: .9rem; }
  .landing-page .lnx-opponents { grid-template-columns: 1fr; }
  .lnx-page .landing-section-head { margin-bottom: 24px; }
  .lnx-choice { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'ask' 'menu' 'arrow' 'answer' 'result'; }
  .landing-page .lnx-choice-button { padding: 6px 8px; font-size: .9rem; }
  .lnx-choice-arrow { margin: 12px 0; transform: rotate(90deg); }
  .lnx-choice-frame { border-radius: 16px; }
  .lnx-grow-demo { gap: 20px 12px; }
  .lnx-grow-paths { grid-template-columns: 1fr; gap: 8px; }
  .landing-page .lnx-grow-path { min-height: 56px; padding: 10px 16px; }
  .landing-page .lnx-grow-path[aria-pressed="true"] { padding: 9px 15px; }
  .lnx-grow-label { font-size: .9rem; }
  .lnx-grow-start .lnx-grow-label span, .lnx-grow-start .lnx-grow-label { max-width: 160px; }
  .lnx-apps { padding: 18px 16px; }
  .lnx-store { flex: 1 1 100%; }
  .lnx-final { min-height: 0; text-align: center; }
  .lnx-final .landing-waitlist { margin-inline: auto; }
  .lnx-final-copy > p { margin-inline: auto; }
}

/* Small phones stack the path choices, so each label stays on one or two lines. */
@media (max-width: 360px) {
  .lnx-choice-menu { grid-template-columns: 1fr; }
}

/* Short landscape screens keep the hero copy clear of the pet. */
@media (min-width: 721px) and (max-height: 500px) {
  .lnx-hero { padding-block: 32px 48px; }
  .lnx-hero-pet { width: clamp(200px, 24vw, 320px); bottom: 4%; }
}

/* Scroll entrances for the new blocks. landing.js adds landing-motion only when motion is allowed. */
@media screen and (prefers-reduced-motion: no-preference) {
  html.landing-motion .lnx-reveal { transition: opacity .55s ease, transform .7s var(--reveal-ease); }
  html.landing-motion .lnx-reveal:not(.is-revealed) { opacity: 0; transform: translateY(32px) scale(.97); }
  /* The scene drifts slowly, like a camera move in an anime opening. The pets breathe. Both use transform only. */
  .landing-page .lnx-hero-scene img { animation: lnx-drift 32s ease-in-out infinite alternate; }
  @keyframes lnx-drift { from { transform: scale(var(--lnx-scene-zoom, 1)); } to { transform: scale(calc(var(--lnx-scene-zoom, 1) * 1.05)) translate(-1%, -1%); } }
  .landing-page .lnx-hero-pet img, .landing-page .lnx-grow-pet { animation: lnx-breathe 4.8s ease-in-out infinite; }
  @keyframes lnx-breathe { 50% { transform: translateY(-5px) scale(1.012, .99); } }
  .lnx-grow-spark { animation: lnx-twinkle 2.4s ease-in-out infinite; }
  .lnx-grow-spark-b { animation-delay: -.8s; }
  .lnx-grow-spark-c { animation-delay: -1.6s; }
  @keyframes lnx-twinkle { 50% { opacity: .2; transform: scale(.5) rotate(45deg); } }
  .lnx-choice-marker.is-selected { animation: lnx-pulse 2s ease-in-out infinite; }
  @keyframes lnx-pulse { 50% { box-shadow: 0 0 0 12px #ffd23f1a, 0 2px 8px #0008; } }
}