/* Landing 14: the landing 10 family opened onto the game. Isolated from every other public theme.
   Tokens are real custom properties here. Resets sit inside :where() so one class can override them. */
:root { color-scheme: dark; background: #091725; }
html { scroll-padding-top: 72px; }
body { margin: 0; background: #091725; }
.landing14 {
    --ink: #091725; --navy: #0d2136; --steel: #456780; --ivory: #e8dfcb; --brass: #b99451; --muted: #adbbc8; --line: #ffffff1c;
    --gold: #c4a15e; --gold-hover: #ddbe80; --gold-edge: #d9b873; --on-gold: #0c1b29; --focus: #e3bc75;
    --panel: #102234; --strip: #122b3e; --card: #0e2031; --field: #0e2234; --well: #06131d; --footer: #071420;
    --text-bright: #d0d9de; --text-nav: #c1cbd3; --text-quiet: #a4b5c2; --brass-link: #dbc18f; --brass-meta: #d3b983; --brass-pale: #ead8b4;
    --live: #b2c59c; --error: #f5b6ad;
    /* The game's dossier language: navy enamel inside a 1px gold ring (eclesiar-2 --interface-frame-fill, .gold-ring). */
    --enamel: rgba(7, 16, 32, 0.96);
    --ring: linear-gradient(180deg, #785c3a, #e2c29a, #785c3a, #ac8e68, #785c3a);
    --hud-label: #c9a765;
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --bar: 72px; --gut: 80px; --gap: 24px;
    font-family: "Segoe UI", Arial, sans-serif; font-size: 16px; line-height: 1.65; color: var(--ivory); -webkit-font-smoothing: antialiased;
    interpolate-size: allow-keywords;
}
.landing14 *, .landing14 *::before, .landing14 *::after { box-sizing: border-box; }
:where(.landing14) :where(h1, h2, h3, p, ol, dl, dd, figure) { margin: 0; }
:where(.landing14) :where(ol) { padding: 0; list-style: none; }
:where(.landing14) :where(h1, h2, h3) { font-family: Georgia, "Times New Roman", serif; font-weight: 400; text-wrap: balance; }
:where(.landing14) :where(h2) { font-size: clamp(32px, 3.3vw, 48px); line-height: 1.12; letter-spacing: -.035em; }
:where(.landing14) :where(h3) { font-size: 26px; line-height: 1.22; letter-spacing: -.025em; }
:where(.landing14) :where(a) { color: inherit; text-decoration: none; }
:where(.landing14) :where(button, input, select) { font: inherit; }
:where(.landing14) :where(button, select, summary) { cursor: pointer; }
:where(.landing14) :where(img) { display: block; max-width: 100%; height: auto; }
.landing14 :where(a, button, select, summary) { -webkit-tap-highlight-color: #b994513b; }
.landing14 :focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; }
/* Scripts whose letters join or stack lose the tightening; Hindi is matched with or without its region. */
.landing14:lang(ar) :is(h1, h2, h3), .landing14:lang(fa) :is(h1, h2, h3), .landing14:lang(ur) :is(h1, h2, h3), .landing14:lang(he) :is(h1, h2, h3),
.landing14:lang(hi) :is(h1, h2, h3), .landing14:lang(th) :is(h1, h2, h3) { letter-spacing: 0; }
.landing14:lang(ar) h1, .landing14:lang(fa) h1, .landing14:lang(ur) h1, .landing14:lang(hi) h1, .landing14:lang(th) h1 { line-height: 1.25; }

.l14-wrap { width: min(100% - 2 * var(--gut), 1280px); margin-inline: auto; }
/* One section a screen: at least a full screen, its content centred in the space the fixed bar leaves. */
.l14-section { display: flex; flex-direction: column; justify-content: center; min-height: 100svh; padding: calc(var(--bar) + 48px) 0 48px; }
.l14-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.l14-skip { position: fixed; inset: 8px auto auto 12px; z-index: 1000; padding: 12px 20px; background: var(--ivory); color: var(--ink); transform: translateY(-200%); }
.l14-skip:focus { transform: none; }
.l14-arrow { display: inline-block; font-weight: 400; line-height: 1; transition: transform 160ms var(--ease-out); }
/* The HUD micro-label, used only inside HUD-styled parts. Tracking is dropped where it would break the script. */
.l14-label { font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--hud-label); }
.landing14:lang(ar) .l14-label, .landing14:lang(fa) .l14-label, .landing14:lang(ur) .l14-label, .landing14:lang(he) .l14-label,
.landing14:lang(hi) .l14-label, .landing14:lang(th) .l14-label, .landing14:lang(ja) .l14-label, .landing14:lang(zh) .l14-label { letter-spacing: 0; font-size: 12px; }
.l14-unavailable { color: #8293a2; }

/* Header: fixed, the same at every scroll depth. */
.l14-header { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--bar); background: #091725f5; border-bottom: 1px solid #b9945138; }
.l14-header-row { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.l14-brand { display: inline-flex; align-items: center; flex-shrink: 0; min-height: 44px; }
.l14-brand img { width: 208px; }
.l14-nav { display: flex; align-items: center; gap: 32px; }
.l14-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--text-nav); background: linear-gradient(currentColor, currentColor) 0 calc(50% + 14px) / 0 1px no-repeat; transition: background-size 150ms var(--ease-out), color 150ms ease; }
/* The link of the section on screen is marked, so the bar always says where the visitor is. */
.l14-nav a[aria-current="true"] { color: var(--ivory); background-size: 100% 1px; }
.l14-header-actions { display: flex; align-items: center; gap: 16px; }
.l14-language select { width: 134px; min-height: 44px; padding: 11px 3px; border: 0; background: transparent; color: var(--text-nav); font-size: 13px; }
.l14-language option { background: var(--navy); color: var(--ivory); }
.l14-language-code, .l14-login-icon { display: none; }
.l14-login { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border: 1px solid #b994516b; border-radius: 3px; font-size: 14px; white-space: nowrap; transition: border-color 150ms ease, color 150ms ease, transform 160ms var(--ease-out); }

/* The one gold action. */
.l14-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 56px; padding: 14px 26px; border: 1px solid var(--gold-edge); border-radius: 3px; background: var(--gold); color: var(--on-gold); font-weight: 650; line-height: 1.4; box-shadow: 0 5px 25px #0002; transition: transform 160ms var(--ease-out), background-color 150ms ease; }
.l14-button .l14-arrow { font-size: 22px; }
.l14-button--bar { min-height: 44px; padding: 8px 20px; font-size: 15px; box-shadow: none; }
.l14-chip { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 20px 8px 9px; border: 1px solid #b994516b; border-radius: 3px; background: #091725b3; color: var(--ivory); font-size: 15px; transition: transform 160ms var(--ease-out), border-color 150ms ease; }
.l14-chip-disc { display: grid; place-items: center; width: 38px; height: 38px; padding-left: 2px; border: 1px solid #d4bd8a; border-radius: 50%; font-size: 12px; transition: background-color 150ms ease, color 150ms ease; }
.l14-text-link { display: inline-flex; align-items: center; gap: 14px; padding: 12px 0; color: var(--brass-link); font-size: 14px; }
/* Press answers on pointer-down, on touch as well. */
.l14-button:active, .l14-chip:active, .l14-login:active { transform: scale(.97); }

/* Hero: the game's own night atlas, full bleed. */
.l14-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-rows: 1fr auto; min-height: 100svh; padding-top: var(--bar); }
.l14-hero-art, .l14-hero-shade { position: absolute; inset: 0; z-index: -2; }
.l14-hero-art { top: var(--bar); overflow: hidden; }
.l14-atlas { position: absolute; inset: 0; }
.l14-atlas picture { display: block; width: 100%; height: 100%; }
.l14-hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 66% 44%; }
.l14-hero-shade { z-index: -1; background: linear-gradient(90deg, #091725f2 0%, #091725cc 32%, #09172566 60%, #0917251f 100%), linear-gradient(0deg, #091725f5 0%, #09172500 36%); }

/* The living atlas. The picture sits on a stage of its own proportions, so a signal placed by a share of the
   picture stays on its painted light at every screen size. The layer is decoration: it exists only with script
   (which brings the pause control), never under reduced motion, and it animates transform and opacity alone. */
.l14-ambient, .l14-motion[hidden] { display: none; }
@supports (width: 1cqw) {
    .l14-hero-art { container-type: size; }
    .l14-atlas {
        --aw: 1920; --ah: 1081; --ox: .66; --oy: .44;
        --w: max(100cqw, 100cqh * var(--aw) / var(--ah)); --h: max(100cqh, 100cqw * var(--ah) / var(--aw));
        inset: auto; left: calc((100cqw - var(--w)) * var(--ox)); top: calc((100cqh - var(--h)) * var(--oy)); width: var(--w); height: var(--h);
    }
    /* The phone picture is another window of the same atlas (the <source> switches at the same width). */
    @media (max-width: 700px) { .l14-atlas { --aw: 780; --ah: 1040; --ox: .5; --oy: 0; } }
    .landing14[data-motion] .l14-ambient { display: block; position: absolute; inset: 0; pointer-events: none; opacity: 1; transition: opacity 320ms ease; --cycle: 30s; --signal: #f6bf62; --signal-core: #fff3d2; }
    @starting-style { .landing14[data-motion] .l14-ambient { opacity: 0; } }
    .landing14[data-motion="off"] .l14-ambient { opacity: 0; }
}
.l14-ambient i { position: absolute; left: var(--x); top: var(--y); opacity: 0; }
/* City lights glimmer, each on its own period. */
.l14-glint { width: max(9px, .8cqw); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, var(--signal-core) 0, var(--signal) 30%, #f6bf6200 70%); animation: l14-glint var(--d) ease-in-out var(--t) infinite; }
.l14-glint--node { width: max(18px, 1.7cqw); background: radial-gradient(circle, var(--signal-core) 0, #f6bf6299 22%, #f6bf6200 68%); }
@keyframes l14-glint { 0%, 100% { opacity: 0; } 16% { opacity: .95; } 29% { opacity: .3; } 43% { opacity: .8; } 68% { opacity: .08; } }
/* A light travels a route: the arc is a turn about its centre, so only transform moves. Its tail is a train of
   beads set back along the same arc, like the dotted routes painted on the atlas. One layer per light. */
.l14-run { width: var(--r); height: 0; transform-origin: 0 0; transform: rotate(var(--a0)); animation: var(--cycle) linear var(--t) infinite; }
.l14-run--s { animation-name: l14-run-s; } .l14-run--m { animation-name: l14-run-m; } .l14-run--l { animation-name: l14-run-l; }
.l14-run b { position: absolute; left: 100%; top: 0; width: 14px; height: 14px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, var(--signal-core) 0 14%, #ffd98a 26%, #f6bf6299 42%, #f6bf6200 70%); }
.l14-run s { position: absolute; left: 0; top: 0; width: 100%; height: 0; transform-origin: 0 0; transform: rotate(calc(var(--step) * var(--k))); }
.l14-run s::after { content: ""; position: absolute; left: 100%; top: 0; width: 4px; height: 4px; translate: -50% -50%; scale: calc(1 - var(--k) * .05); border-radius: 50%; background: #ffd98a; opacity: calc(1 - var(--k) * .1); }
.l14-run s:nth-of-type(1) { --k: 1; } .l14-run s:nth-of-type(2) { --k: 2; } .l14-run s:nth-of-type(3) { --k: 3; } .l14-run s:nth-of-type(4) { --k: 4; }
.l14-run s:nth-of-type(5) { --k: 5; } .l14-run s:nth-of-type(6) { --k: 6; } .l14-run s:nth-of-type(7) { --k: 7; } .l14-run s:nth-of-type(8) { --k: 8; } .l14-run s:nth-of-type(9) { --k: 9; }
/* Shares of the 30s cycle: 1.7s, 2.4s and 3.3s of travel (LandingAtlasSignals::TRAVEL), with a short fade at each end. */
@keyframes l14-run-s { 0% { transform: rotate(var(--a0)); opacity: 0; } .8% { opacity: 1; } 4.8% { opacity: 1; } 5.67%, 100% { transform: rotate(var(--a1)); opacity: 0; } }
@keyframes l14-run-m { 0% { transform: rotate(var(--a0)); opacity: 0; } .8% { opacity: 1; } 7.1% { opacity: 1; } 8%, 100% { transform: rotate(var(--a1)); opacity: 0; } }
@keyframes l14-run-l { 0% { transform: rotate(var(--a0)); opacity: 0; } .8% { opacity: 1; } 10.1% { opacity: 1; } 11%, 100% { transform: rotate(var(--a1)); opacity: 0; } }
/* Where a light arrives, a ring opens once. A painted junction answers with a second, wider ring. */
.l14-ambient .l14-ping { width: max(20px, 1.9cqw); aspect-ratio: 1; translate: -50% -50%; opacity: 1; }
.l14-ambient .l14-ping--node { width: max(40px, 4.4cqw); }
.l14-ping::before, .l14-ping::after { content: ""; position: absolute; inset: 0; border: 1.5px solid #f6cf86; border-radius: 50%; opacity: 0; animation: l14-ping var(--cycle) var(--ease-out) var(--t) infinite; }
.l14-ping::after { display: none; }
.l14-ping--node::after { display: block; animation-delay: calc(var(--t) + .42s); }
@keyframes l14-ping { 0% { opacity: 0; transform: scale(.28); } .7% { opacity: .9; } 6% { opacity: 0; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
/* A phone shows another window of the atlas: some signals fall outside it, a few exist only there. */
.l14-ambient .l14-near { display: none; }
@media (max-width: 700px) {
    .l14-ambient i { left: var(--mx); top: var(--my); }
    .l14-ambient .l14-run { width: var(--mr); }
    .l14-ambient .l14-near { display: block; }
    .l14-ambient .l14-far { display: none; }
}
/* Stopped by the visitor, or while the first screen is out of view. */
.landing14[data-motion="off"] .l14-ambient i, .landing14[data-motion="off"] .l14-ping::before, .landing14[data-motion="off"] .l14-ping::after,
.l14-ambient[data-idle="true"] i, .l14-ambient[data-idle="true"] .l14-ping::before, .l14-ambient[data-idle="true"] .l14-ping::after { animation-play-state: paused; }
/* The pause control: an icon button in the same family as the phone log-in button. */
.l14-motion { grid-area: 1 / 1; align-self: end; justify-self: end; display: grid; place-items: center; width: 44px; height: 44px; margin: 0 max(var(--gut), (100% - 1280px) / 2) 14px 0; padding: 0; border: 1px solid #b994516b; border-radius: 3px; background: #091725b3; color: var(--text-nav); transition: transform 160ms var(--ease-out), border-color 150ms ease, color 150ms ease; }
.l14-motion:active { transform: scale(.97); }
.l14-motion-play, .l14-motion[aria-pressed="true"] .l14-motion-pause { display: none; }
.l14-motion[aria-pressed="true"] .l14-motion-play { display: block; }

.l14-hero-grid { grid-area: 1 / 1; align-self: center; padding-block: 48px 40px; }
.l14-hero-text { max-width: 740px; }
.l14-hero h1 { font-size: clamp(44px, 5.2vw, 78px); line-height: 1.04; letter-spacing: -.04em; text-shadow: 0 2px 18px #0006; }
.l14-lead { max-width: 520px; margin-top: 24px; font-size: 19px; line-height: 1.6; color: var(--text-bright); }
.l14-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; margin-top: 30px; }
.l14-note { margin-top: 12px; font-size: 13px; color: #c0cbd3; }
.l14-proof { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 24px; margin-top: 10px; font-size: 13px; color: #c1cdd6; }
.l14-proof strong { color: var(--ivory); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.l14-proof > a { padding-block: 11px; color: #dfcba0; text-decoration: underline; text-underline-offset: 4px; }
.l14-proof .l14-arrow { font-size: 14px; }
.l14-hero-strip { grid-area: 2 / 1; border-top: 1px solid #b9945138; }
.l14-strip-row { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; min-height: 88px; padding-block: 14px 28px; }
.l14-strip-row p { font-size: 13px; color: #c2ced6; }
.l14-store-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.l14-store-links a { display: inline-flex; align-items: center; height: 44px; flex-shrink: 0; transition: transform 160ms var(--ease-out); }
.l14-store-links a:active { transform: scale(.97); }
.l14-store-apple img { height: 44px; width: auto; }
/* Google's artwork carries transparent padding: scale it so the visible mark matches its neighbours. */
.l14-store-google { position: relative; width: 149px; overflow: hidden; }
.l14-store-google img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 57.292px; width: auto; max-width: none; }
.l14-store-google[data-badge-locale="en"] img { height: 65.476px; }
.l14-store-steam img { width: 149px; height: 44px; padding: 9px 19px; border: 1px solid #a6a6a6; border-radius: 6px; background: #000; object-fit: contain; }

/* Ground. After the first screen no section stands on a flat fill: each has a lit ground made of a deep
   gradient, the game's own 34px HUD grid fading out from one corner, and two pools of light (steel blue
   where the subject is, a faint brass one opposite). Sections set --gx/--gy (grid) and --lx/--ly (light). */
.l14-section, .l14-join, .l14-footer { position: relative; isolation: isolate; }
.l14-section { background: linear-gradient(180deg, #0a1a2b 0%, var(--navy) 48%, #0a1929 100%); }
.l14-section::before, .l14-world-pin::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background-image: linear-gradient(#c9a76524 1px, transparent 1px), linear-gradient(90deg, #c9a76524 1px, transparent 1px), linear-gradient(#ffffff0b 1px, transparent 1px), linear-gradient(90deg, #ffffff0b 1px, transparent 1px);
    background-size: 136px 136px, 136px 136px, 34px 34px, 34px 34px; background-position: center top;
    -webkit-mask-image: radial-gradient(ellipse 72% 82% at var(--gx, 84%) var(--gy, 16%), #000 0%, transparent 74%); mask-image: radial-gradient(ellipse 72% 82% at var(--gx, 84%) var(--gy, 16%), #000 0%, transparent 74%); }
.l14-section::after, .l14-world-pin::after { content: ""; position: absolute; inset: 0; z-index: -3; pointer-events: none;
    background: radial-gradient(ellipse 56% 62% at var(--lx, 76%) var(--ly, 44%), #4a6f8a4d 0%, #4a6f8a00 70%), radial-gradient(ellipse 46% 52% at var(--wx, 6%) var(--wy, 98%), #b9945124 0%, #b9945100 72%); }
.l14-world-pin::before, .l14-world-pin::after { display: none; }
/* The alternate, deeper ground. */
.l14-world, .l14-news { background: linear-gradient(180deg, #071320 0%, #0a1a2b 50%, #071320 100%); }
/* A seam joins two sections: a brass hairline that fades at both ends, with the wordmark's diamond at its centre. */
.l14-seam { position: absolute; inset: 0 0 auto; z-index: 1; height: 1px; background: linear-gradient(90deg, #b9945100, #b994518c 24%, #b994518c 76%, #b9945100); pointer-events: none; }
.l14-seam::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; translate: -50% -50%; rotate: 45deg; border: 1px solid var(--brass); background: #0a1a2b; }
/* A plate: the atlas again, dimmed, where a section needs texture behind its subject. Always decoration. */
.l14-plate { position: absolute; z-index: -1; width: auto; max-width: none; object-fit: cover; opacity: .5; pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 12%, transparent 72%); mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 12%, transparent 72%); }
/* Surfaces: navy enamel lit from above, lifted off the ground by a long soft shadow. */
.l14-figures > div, .l14-path, .l14-news-card, .l14-questions, .l14-steps li { border: 1px solid #ffffff14; border-radius: 4px; background: linear-gradient(180deg, #152a3f 0%, #0d1e30 100%); box-shadow: inset 0 1px 0 #ffffff14, 0 28px 54px -32px #000000d9; }
/* A window onto the real game: the HUD's gold ring, corner marks set just outside it, and a deep shadow with a
   cool glow so it floats over the ground. Used by the live map and by every capture of the game. */
.l14-window, .l14-shot { position: relative; border-radius: 8px; background: var(--enamel); box-shadow: 0 46px 96px -36px #000000e6, 0 0 120px -28px #4a6f8a80; }
.l14-window::before, .l14-shot::before { content: ""; position: absolute; inset: 0; z-index: 2; padding: 1px; border-radius: inherit; background: var(--ring); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; }
.l14-window::after, .l14-shot::after { content: ""; position: absolute; inset: -11px; pointer-events: none; --mark: #c9a765a6;
    background: linear-gradient(var(--mark), var(--mark)) left top / 22px 1px no-repeat, linear-gradient(var(--mark), var(--mark)) left top / 1px 22px no-repeat,
        linear-gradient(var(--mark), var(--mark)) right top / 22px 1px no-repeat, linear-gradient(var(--mark), var(--mark)) right top / 1px 22px no-repeat,
        linear-gradient(var(--mark), var(--mark)) left bottom / 22px 1px no-repeat, linear-gradient(var(--mark), var(--mark)) left bottom / 1px 22px no-repeat,
        linear-gradient(var(--mark), var(--mark)) right bottom / 22px 1px no-repeat, linear-gradient(var(--mark), var(--mark)) right bottom / 1px 22px no-repeat; }
.l14-shot { display: block; margin: 0; aspect-ratio: var(--ar); }
.l14-shot img { width: 100%; height: 100%; border-radius: 7px; object-fit: cover; }

/* The world, live: real figures on lit tiles, the map in a HUD window. */
.l14-live { --lx: 70%; --ly: 50%; --gx: 96%; --gy: 6%; }
.l14-live-grid, .l14-world-grid, .l14-start-grid, .l14-faq-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.l14-live-grid { align-items: center; }
.l14-live-copy { grid-column: 1 / span 4; }
.l14-figures { display: grid; gap: 12px; margin-top: 32px; }
.l14-figures > div { position: relative; overflow: hidden; padding: 16px 22px 14px 24px; }
.l14-figures > div::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: linear-gradient(180deg, var(--gold-edge), #d9b87300); }
.l14-figures dd { font-family: Georgia, serif; font-size: clamp(30px, 3vw, 44px); line-height: 1.15; font-variant-numeric: tabular-nums; }
.l14-figures dd.l14-figure-date { font-size: clamp(22px, 2.2vw, 32px); line-height: 1.4; overflow-wrap: anywhere; }
.l14-window { grid-column: 6 / -1; min-width: 0; }
.l14-window-bar { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 18px; border-bottom: 1px solid #8f744859; border-radius: 8px 8px 0 0; background-image: linear-gradient(rgba(214, 179, 109, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(214, 179, 109, .035) 1px, transparent 1px); background-size: 34px 34px; }
.l14-live-dot { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 5px #b2c59c12; }
.l14-window-view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 0 0 7px 7px; background: var(--navy) url('/assets/landingpages/10/trailer-poster.webp') center / cover; }
.l14-window-view iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
/* With script, the live map cross-fades in over the still frame once it reports ready. */
.l14-js .l14-window-view iframe { opacity: 0; transition: opacity 600ms ease; }
.l14-js .l14-window-view.is-ready iframe { opacity: 1; }

/* Three paths, each shown by the real screen a player uses. Without script, on small screens and under
   reduced motion: three cards. */
.l14-world { --lx: 22%; --ly: 30%; --gx: 10%; --gy: 12%; --wx: 96%; --wy: 96%; }
.l14-world-grid { row-gap: 40px; }
.l14-world-head { grid-column: 1 / span 6; }
.l14-world-head p { max-width: 480px; margin-top: 16px; color: var(--muted); }
.l14-plate--world { display: none; }
.l14-paths { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.l14-path { min-width: 0; overflow: hidden; }
/* The capture sits whole inside a square stage, whatever its own proportions. */
.l14-path-visual { display: grid; place-items: center; aspect-ratio: 1; margin: 0; border-bottom: 1px solid #ffffff14; background: radial-gradient(ellipse 70% 70% at 50% 45%, #2b47604d 0%, #2b476000 72%), #0a1827; }
.l14-path-visual .l14-shot { width: 68%; }
.l14-path--wide .l14-path-visual .l14-shot { width: 84%; }
@supports (width: 1cqw) {
    .l14-path-visual { container-type: size; }
    .l14-path-visual .l14-shot, .l14-path--wide .l14-path-visual .l14-shot { width: min(84cqw, 84cqh * var(--ar)); }
}
.l14-path-copy { padding: 24px; }
.l14-path-number { display: block; margin-bottom: 8px; color: #d1b37a; font: 16px/1.2 Georgia, serif; letter-spacing: 0; }
.l14-path-inner p { margin-top: 12px; color: var(--muted); }
.l14-actions { display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: 16px; color: var(--brass-pale); font-size: 12px; line-height: 1.45; }
.l14-actions li + li::before { content: "›"; margin-inline: 10px; color: var(--brass); font-size: 15px; line-height: 1; }
/* With script on a wide, tall screen the section holds for one extra screen while the paths open in turn:
   the copy on the left, the screens changing on a plate of open sea at the right. */
.l14-world.is-pinned { display: block; height: 200svh; min-height: 0; padding: 0; }
.l14-world.is-pinned::before, .l14-world.is-pinned::after { display: none; }
.l14-world.is-pinned .l14-world-pin { position: sticky; top: 0; isolation: isolate; overflow: hidden; height: 100svh; padding: calc(var(--bar) + 48px) 0 48px; --lx: 74%; --ly: 48%; --gx: 8%; --gy: 10%; }
.l14-world.is-pinned .l14-world-pin::before, .l14-world.is-pinned .l14-world-pin::after { display: block; }
.l14-world.is-pinned .l14-plate--world { display: block; top: 0; right: 0; width: 64%; height: 100%; }
.l14-world.is-pinned .l14-world-grid { position: relative; height: 100%; align-content: start; row-gap: 28px; }
.l14-world.is-pinned .l14-world-head { grid-column: 1 / span 5; }
.l14-world.is-pinned .l14-paths { grid-column: 1 / span 5; display: block; border-bottom: 1px solid var(--line); }
.l14-world.is-pinned .l14-path { overflow: visible; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; }
.l14-world.is-pinned .l14-path-visual { position: absolute; top: 0; right: 0; width: calc((100% - 11 * var(--gap)) / 12 * 7 + 6 * var(--gap)); height: min(100%, 700px); aspect-ratio: auto; border: 0; background: none; opacity: 0; transition: opacity 420ms ease; }
.l14-world.is-pinned .l14-path-visual .l14-shot { transform: translateY(14px) scale(.985); transition: transform 700ms var(--ease-out); }
.l14-world.is-pinned .l14-path.is-active .l14-path-visual { opacity: 1; }
.l14-world.is-pinned .l14-path.is-active .l14-path-visual .l14-shot { transform: none; }
.l14-world.is-pinned .l14-path-copy { padding: 0; }
.l14-path-toggle { display: flex; align-items: baseline; gap: 18px; width: 100%; min-height: 60px; padding: 14px 0; border: 0; background: none; color: #93a6b6; font: inherit; letter-spacing: inherit; text-align: start; transition: color 200ms ease; }
.l14-path-toggle .l14-path-number { display: inline; margin: 0; }
.l14-path.is-active .l14-path-toggle { color: var(--ivory); }
.l14-world.is-pinned .l14-path-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 420ms var(--ease-out); }
.l14-world.is-pinned .l14-path.is-active .l14-path-body { grid-template-rows: 1fr; }
.l14-world.is-pinned .l14-path-inner { min-height: 0; overflow: hidden; opacity: 0; transition: opacity 240ms ease; }
.l14-world.is-pinned .l14-path.is-active .l14-path-inner { opacity: 1; transition-delay: 120ms; }
.l14-world.is-pinned .l14-path-inner p { margin-top: 0; max-width: 440px; }
.l14-world.is-pinned .l14-actions { margin: 14px 0 22px; }

/* First day: the citizen you start as, beside the three steps. */
.l14-start { --lx: 24%; --ly: 52%; --gx: 2%; --gy: 90%; --wx: 94%; --wy: 4%; }
.l14-start-grid, .l14-faq-grid { align-items: center; }
.l14-start-shot, .l14-faq-side { grid-column: 1 / span 6; position: relative; min-width: 0; }
.l14-start-shot .l14-shot { width: min(100%, (100svh - 216px) * var(--ar)); margin-inline: auto; }
.l14-plate--start { top: 50%; left: 50%; height: 124%; translate: -50% -50%; opacity: .42; }
.l14-start-copy { grid-column: 8 / -1; min-width: 0; }
.l14-steps { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
.l14-steps li { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 22px; align-items: center; padding: 12px 22px 12px 12px; }
.l14-steps img { width: 100%; aspect-ratio: 4 / 3; border: 1px solid #8f744866; border-radius: 3px; object-fit: cover; }
.l14-step-number { display: block; margin-bottom: 4px; color: #d1b37a; font: 16px/1.2 Georgia, serif; }
.l14-steps h3 { font-size: 22px; }
.l14-steps p { margin-top: 6px; color: var(--muted); font-size: 15px; line-height: 1.5; }

/* News. */
.l14-news { --lx: 50%; --ly: 8%; --gx: 50%; --gy: 0%; --wx: 50%; --wy: 104%; }
.l14-news-head { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 36px; }
.l14-news-head p { margin-top: 12px; color: var(--muted); }
.l14-news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.l14-news-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; transition: transform 180ms var(--ease-out), border-color 180ms ease; }
.l14-news-cover { display: block; overflow: hidden; background: var(--well); }
.l14-news-cover img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; transition: transform 600ms var(--ease-out); }
.l14-news-body { padding: 22px 24px 24px; }
.l14-news-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 12px; margin-bottom: 14px; color: #a1b5c4; font-size: 12px; }
.l14-news-meta > span { color: var(--brass-meta); }
.l14-news-card h3 { font-size: 24px; overflow-wrap: anywhere; }
.l14-news-card h3 a { transition: color 150ms ease; }
.l14-news-card h3 a::after { content: ""; position: absolute; inset: 0; }
.l14-news-card p { margin-top: 12px; color: var(--muted); font-size: 15px; }
.l14-news-card .l14-original-language { margin: -4px 0 10px; color: #a9bbc8; font-size: 11px; }

/* Questions: the world as the game draws it, beside the answers. */
.l14-faq { --lx: 22%; --ly: 58%; --gx: 98%; --gy: 96%; --wx: 96%; --wy: 2%; }
.l14-faq-side .l14-shot { margin-top: 34px; }
.l14-questions { grid-column: 8 / -1; padding: 6px 26px; }
.l14-questions details { border-bottom: 1px solid var(--line); }
.l14-questions details:last-child { border-bottom: 0; }
.l14-questions summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; list-style: none; font-size: 16px; }
.l14-questions summary::-webkit-details-marker { display: none; }
.l14-questions summary span { flex-shrink: 0; color: var(--brass); font-size: 24px; line-height: 1; transition: transform 200ms var(--ease-out); }
.l14-questions details[open] summary span { transform: rotate(45deg); }
.l14-questions details p { padding: 0 34px 22px 0; color: var(--muted); }
/* Where the browser can animate to an intrinsic height, an answer opens over 200ms; elsewhere it opens at once. */
.l14-questions details::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size 200ms var(--ease-out), opacity 200ms var(--ease-out), content-visibility 200ms allow-discrete; }
.l14-questions details[open]::details-content { block-size: auto; opacity: 1; }

/* Closing band and footer. */
/* On a wide screen the closing band and the footer share the last screen. The band closes on the atlas the page opened on. */
.l14-join { overflow: hidden; display: flex; align-items: center; min-height: max(440px, calc(100svh - 324px)); padding: 72px 0; }
.l14-join-art { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: 60% 62%; }
.l14-join::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, #06131ef5 0%, #06131ed6 28%, #09172585 54%, #09172514 86%), linear-gradient(0deg, #071420 0%, #07142000 34%), linear-gradient(180deg, #071320 0%, #07132000 26%); }
.l14-join::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(#c9a7651c 1px, transparent 1px), linear-gradient(90deg, #c9a7651c 1px, transparent 1px); background-size: 136px 136px; background-position: center;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 62%); mask-image: linear-gradient(90deg, #000 0%, transparent 62%); }
.l14-join h2 { max-width: 620px; text-shadow: 0 2px 12px #0005; }
.l14-join p { max-width: 510px; margin-top: 16px; color: #d9e0e4; }
.l14-join .l14-button { margin-top: 28px; }
.l14-footer { padding: 44px 0 24px; background: linear-gradient(180deg, #0a1a2b 0, var(--footer) 140px); }
.l14-footer-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px var(--gap); padding-bottom: 30px; }
.l14-footer p { margin-top: 10px; color: var(--text-quiet); font-size: 13px; }
.l14-footer .l14-brand img { width: 200px; }
.l14-socials { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 8px; color: #bcc8d0; font-size: 13px; }
.l14-socials a, .l14-footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; transition: color 150ms ease; }
.l14-newsletter h3 { font-size: 26px; }
.l14-field-label { display: block; margin-top: 18px; color: var(--text-quiet); font-size: 13px; }
.l14-input-row { display: flex; margin-top: 6px; border: 1px solid #ffffff2e; border-radius: 3px; background: var(--field); }
.l14-input-row input { width: 100%; min-width: 0; padding: 14px 17px; border: 0; border-radius: 3px; background: transparent; color: var(--ivory); font-size: 16px; }
.l14-input-row input::placeholder { color: var(--text-quiet); opacity: 1; }
.l14-input-row button { padding: 12px 20px; border: 0; border-left: 1px solid #ffffff2e; background: transparent; color: #d8bf8d; font-size: 14px; white-space: nowrap; transition: color 150ms ease; }
.l14-input-row button:disabled { opacity: .6; cursor: wait; }
.l14-newsletter .l14-feedback { min-height: 1.6em; color: #d4c49c; }
.l14-feedback[data-error="true"] { color: var(--error); }
.l14-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 30px; padding-top: 10px; border-top: 1px solid var(--line); color: #9aafbf; font-size: 12px; }
.l14-footer-bottom > div { display: flex; flex-wrap: wrap; gap: 0 25px; }
.l14-actionbar { display: none; }

/* Trailer dialog: fades and scales from the centre; leaves faster than it arrives. */
.l14-dialog { width: min(1120px, calc(100% - 32px), calc((100dvh - 100px) * 16 / 9)); max-width: none; max-height: none; padding: 48px 0 0; overflow: visible; border: 0; background: transparent; color: var(--ivory); opacity: 0; transform: scale(.96); transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), overlay 180ms allow-discrete, display 180ms allow-discrete; }
.l14-dialog[open] { opacity: 1; transform: none; transition-duration: 250ms; }
.l14-dialog::backdrop { background: rgb(0 0 0 / 0%); transition: background-color 180ms var(--ease-out), overlay 180ms allow-discrete, display 180ms allow-discrete; }
.l14-dialog[open]::backdrop { background: rgb(0 0 0 / 60%); transition-duration: 250ms; }
@starting-style {
    .l14-dialog[open] { opacity: 0; transform: scale(.96); }
    .l14-dialog[open]::backdrop { background: rgb(0 0 0 / 0%); }
}
.l14-dialog-close { position: absolute; top: 0; right: 0; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: #fff; font-size: 36px; line-height: 1; text-shadow: 0 2px 6px #000; transition: color 150ms ease; }
.l14-player { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: min(200px, calc(100dvh - 100px)); background: #000; }
.l14-player iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }

/* Hover moves only for a real pointer; keyboard focus shows the same state. */
@media (hover: hover) and (pointer: fine) {
    .landing14 :where(a):hover { color: #fff7e7; }
    .l14-nav a:hover, .l14-nav a:focus-visible { background-size: 100% 1px; }
    .l14-button:hover { background: var(--gold-hover); color: var(--on-gold); }
    .l14-button:hover .l14-arrow, .l14-text-link:hover .l14-arrow, .l14-proof > a:hover .l14-arrow { transform: translate(2px, -2px); }
    .l14-text-link:hover { color: var(--brass-link); }
    .l14-login:hover { border-color: var(--brass); }
    .l14-chip:hover, .l14-motion:hover { border-color: var(--brass); }
    .l14-motion:hover { color: var(--ivory); }
    .l14-chip:hover .l14-chip-disc { background: var(--brass); color: var(--ink); }
    .l14-proof > a:hover { color: #dfcba0; }
    .l14-news-card:hover, .l14-news-card:focus-within { transform: translateY(-2px); border-color: #b9945170; }
    .l14-news-card:hover .l14-news-cover img, .l14-news-card:focus-within .l14-news-cover img { transform: scale(1.03); }
    .l14-path-toggle:hover { color: var(--ivory); }
    .l14-input-row button:hover { color: #fff7e7; }
    .l14-dialog-close:hover { color: var(--brass); }
}

/* The hero enters once on load: the atlas settles, the words rise. Applied only while html has .l14-enter. */
@keyframes l14-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes l14-settle { from { transform: scale(1.05); } }
html.l14-enter .l14-atlas { animation: l14-settle 1100ms var(--ease-out) both; }
html.l14-enter .l14-hero [data-enter-item] { animation: l14-rise 520ms var(--ease-out) both; animation-delay: calc(280ms + var(--i, 0) * 60ms); }
html.l14-enter .l14-hero [data-enter-item="title"] { animation-duration: 700ms; animation-delay: 60ms; }
.l14-hero-actions { --i: 1; } .l14-note { --i: 2; } .l14-proof { --i: 3; } .l14-hero-strip { --i: 4; }

@media (min-width: 1600px) { .l14-hero h1 { font-size: 82px; } }
@media (max-width: 1279px) {
    .landing14 { --gut: 56px; }
    .l14-nav { gap: 24px; }
    .l14-steps li { grid-template-columns: 150px minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 1023px) {
    .landing14 { --gut: 48px; }
    .l14-nav { display: none; }
    .l14-section { min-height: 0; padding: 88px 0 64px; }
    .l14-live-grid { min-height: 0; row-gap: 36px; }
    .l14-live-copy, .l14-window, .l14-world-head, .l14-start-shot, .l14-start-copy, .l14-faq-side, .l14-questions { grid-column: 1 / -1; }
    .l14-start-copy { order: -1; }
    .l14-start-shot .l14-shot { width: min(100%, 560px); }
    .l14-plate--start { display: none; }
    .l14-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .l14-figures > div { display: flex; flex-direction: column; justify-content: space-between; gap: 4px; padding: 14px 14px 12px 18px; }
    .l14-figures dd { font-size: 38px; }
    .l14-paths { grid-template-columns: minmax(0, 1fr); }
    .l14-path { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
    /* Beside its copy the capture gets a taller stage, so a portrait screen stays large enough to read as one. */
    .l14-path-visual { aspect-ratio: 4 / 5; border-bottom: 0; border-right: 1px solid #ffffff14; }
    .l14-start-grid, .l14-faq-grid { row-gap: 32px; }
    .l14-join { min-height: 420px; }
    .l14-news-grid { grid-template-columns: minmax(0, 1fr); }
    .l14-news-card { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; }
}
/* Narrower than a tablet, a path stacks: the capture takes the width of its card, whatever its shape. */
@media (max-width: 767px) {
    .l14-path { display: block; }
    .l14-path-visual { aspect-ratio: auto; container-type: normal; padding: 26px 22px; border-right: 0; border-bottom: 1px solid #ffffff14; }
    .landing14 .l14-path .l14-path-visual .l14-shot { width: min(100%, 400px); margin-inline: auto; }
}
@media (max-width: 639px) {
    html { scroll-padding-top: 60px; }
    .landing14 { --gut: 24px; --bar: 60px; --gap: 16px; }
    .l14-header-row { gap: 12px; }
    .l14-header .l14-brand { width: min(184px, calc(100vw - 172px)); min-width: 0; }
    .l14-header .l14-brand img { width: 100%; }
    .l14-header-actions { gap: 8px; margin-left: auto; flex-shrink: 0; }
    .l14-language { position: relative; width: 64px; min-height: 44px; margin: 0; }
    .l14-language-code { display: flex; align-items: center; justify-content: center; gap: 5px; height: 44px; color: var(--ivory); font-size: 12px; white-space: nowrap; pointer-events: none; }
    .l14-language select { position: absolute; inset: 0; width: 100%; height: 44px; padding: 0; opacity: 0; font-size: 16px; }
    .l14-language:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
    .l14-login { width: 44px; min-width: 44px; padding: 0; }
    .l14-login-icon { display: block; }
    .l14-login-label, .l14-button--bar { display: none; }
    .l14-section { padding: 64px 0 48px; }
    :where(.landing14) :where(h2) { font-size: 34px; }
    .l14-hero-art img { object-position: center top; }
    .l14-hero-shade { background: linear-gradient(0deg, #091725 0%, #091725f2 42%, #0917258c 66%, #09172533 100%); }
    .l14-hero-grid { align-self: end; padding-block: 64px 20px; }
    .l14-motion { align-self: start; margin-top: 10px; }
    .l14-hero h1 { font-size: clamp(38px, 10.6vw, 46px); line-height: 1.08; }
    .l14-lead { margin-top: 16px; font-size: 16px; }
    .l14-hero-actions { margin-top: 22px; }
    .l14-hero-actions > * { flex: 1 1 100%; }
    .l14-button { min-height: 54px; }
    .l14-chip { min-height: 48px; }
    .l14-strip-row { flex-direction: column; align-items: flex-start; gap: 8px; min-height: 0; padding-block: 12px 16px; }
    .l14-store-links { gap: 8px 10px; }
    .l14-store-apple img, .l14-store-links a { height: 40px; }
    .l14-store-google { width: 135px; }
    .l14-store-google img { height: 52.084px; }
    .l14-store-google[data-badge-locale="en"] img { height: 59.524px; }
    .l14-store-steam img { width: 135px; height: 40px; padding: 8px 17px; }
    .l14-figures > div { padding-right: 10px; }
    .l14-figures dd { font-size: 30px; }
    .l14-figures dd.l14-figure-date { font-size: 18px; line-height: 1.9; }
    .l14-window-view { aspect-ratio: 4 / 3; }
    .l14-path, .l14-news-card { display: block; }
    .l14-path-copy { padding: 20px; }
    .l14-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .l14-figures > div:last-child { grid-column: 1 / -1; }
    .l14-news-head { flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 24px; }
    .l14-steps li { grid-template-columns: 104px minmax(0, 1fr); gap: 16px; align-items: start; padding: 10px 14px 12px 10px; }
    .l14-steps h3 { font-size: 20px; }
    .l14-questions { padding: 2px 18px; }
    .l14-faq-side .l14-shot { margin-top: 24px; }
    .l14-window::after, .l14-shot::after { inset: -7px; }
    .l14-questions summary { font-size: 15px; }
    .l14-join { min-height: 400px; padding-block: 48px; }
    .l14-join::before { background: linear-gradient(90deg, #06131eeb, #0917258c), linear-gradient(0deg, #071420 0%, #07142000 34%), linear-gradient(180deg, #071320 0%, #07132000 26%); }
    .l14-join-art { object-position: 62% center; }
    .l14-footer { padding-top: 32px; }
    .l14-footer-top { grid-template-columns: minmax(0, 1fr); padding-bottom: 20px; }
    .l14-footer-bottom { flex-direction: column; align-items: flex-start; }
    /* The main action follows the visitor on a phone once neither gold button is on screen. */
    .l14-js .l14-actionbar { display: block; position: fixed; inset: auto 0 0; z-index: 40; padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid #b9945138; background: #091725f5; transform: translateY(105%); visibility: hidden; transition: transform 240ms var(--ease-out), visibility 0s linear 240ms; }
    .l14-js[data-cta="away"] .l14-actionbar { transform: none; visibility: visible; transition-delay: 0s; }
    .l14-actionbar .l14-button { width: 100%; min-height: 48px; justify-content: center; gap: 12px; box-shadow: none; }
    .l14-js .l14-footer { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
}
@media (max-width: 370px) {
    .landing14 { --gut: 16px; }
    .l14-hero h1 { font-size: 36px; }
    .l14-steps li { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
}
/* Reduced motion keeps colour and opacity changes and drops everything that travels. */
@media (prefers-reduced-motion: reduce) {
    .landing14 *, .landing14 *::before, .landing14 *::after { animation: none !important; }
    .landing14 .l14-ambient, .landing14 .l14-motion { display: none !important; }
    .landing14 .l14-button, .landing14 .l14-chip, .landing14 .l14-login, .landing14 .l14-motion, .landing14 .l14-store-links a, .landing14 .l14-news-card, .landing14 .l14-news-cover img, .landing14 .l14-arrow,
    .landing14 .l14-shot, .landing14 .l14-questions summary span, .landing14 .l14-nav a { transition-property: background-color, border-color, color, opacity !important; }
    .landing14 .l14-button:active, .landing14 .l14-chip:active, .landing14 .l14-login:active, .landing14 .l14-store-links a:active, .landing14 .l14-news-card:hover, .landing14 .l14-news-card:focus-within,
    .landing14 .l14-news-card:hover .l14-news-cover img, .landing14 .l14-news-card:focus-within .l14-news-cover img, .landing14 :hover > .l14-arrow, .landing14 .l14-shot { transform: none !important; }
    .landing14 .l14-nav a { background-size: 0 1px !important; }
    .landing14 .l14-dialog, .landing14 .l14-dialog[open] { transform: none; }
    .landing14 .l14-questions details::details-content { transition-property: opacity, content-visibility; }
    .landing14 .l14-path-body { transition: none !important; }
    .landing14.l14-js .l14-actionbar { transition: none; }
}