/* ═══════════════════════════════════════════════════════════════════════════
   Landing page v3 — `lp-*`
   ═══════════════════════════════════════════════════════════════════════════

   The marketing site, rebuilt from the "Landing Page v3" design. Self-contained
   on purpose: index.html loads THIS and nothing else from the old landing stack
   (`landing.css` / `landing-showcase.css` / `landing-mobile-fixes.css` /
   `style.css` are still on disk for the legal + about pages, and are no longer
   loaded here). Nothing in this file may be reused by a dashboard surface —
   the dashboard has its own tokens, and this page deliberately does not use
   them.

   ⚠️ NO `var()` ON DESIGN-SYSTEM TOKENS. `--r-*`, `--action*`, `--surface-*`
   and friends are documented in DESIGN_SYSTEM.md but no stylesheet defines
   them, so a `var()` on one computes to `initial` — square corners and
   unpainted fills, silently. Literal values only, as the design emits them.

   Prefix map for anything nearby: `lp-` is this page. `sc-` is the retired
   landing showcase, `rr-`/`it-`/`cm-`/`xpl-`/… are dashboard modules.

   ── Structure ──────────────────────────────────────────────────────────────
     §1  Reset, page frame, type scale
     §2  Hero — chrome, terrain, the two columns
     §3  The hero rail (rotating experience tabs)
     §4  Discord message mocks (shared vocabulary — used in five places)
     §5  Hero right column: dashboard card, message card, proof card
     §6  Account-state heroes (empty / first / back)
     §7  Body sections: your servers, system map, features, dashboard,
         compare, pricing, close
     §8  The roaming pet
     §9  Footer
     §10 Motion, reduced motion
     §11 Responsive
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── §1 Reset + frame ───────────────────────────────────────────────────── */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    padding: 0;
    background: #070B18;
    color: #b3b8c2;
    font: 400 16px/1.55 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* The hero terrain and the trail overflow their boxes horizontally by
       design; the page must not gain a scrollbar because of decoration. */
    overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

img { max-width: 100%; }

/* ⚠️ `[hidden]` is a UA rule at specificity (0,0,1) and loses to any class that
   sets `display` — which on this page is nearly every element that also gets
   hidden (`.lp-panel`, `.lp-dc-body`, `.lp-auto`, `.lp-ini` …). Without this
   the attribute silently does nothing. Same trap as `.sidebar-item[hidden]` in
   the dashboard. */
[hidden] { display: none !important; }

a { color: #9fb0f2; text-decoration: none; }
a:hover { color: #c4cdf8; }

button {
    font-family: inherit;
    /* A <button> inherits neither font nor color. Every control on this page is
       one, and the whole page renders as black Arial without this. */
    color: inherit;
}

:focus-visible {
    outline: 2px solid rgba(147, 180, 255, .75);
    outline-offset: 2px;
    border-radius: 6px;
}

.lp-root {
    position: relative;
    background: #070B18;
    overflow-x: clip;
}

.lp-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Skip link — the hero is a wall of decorative SVG before any content. */
.lp-skip {
    position: fixed;
    left: 12px;
    top: -60px;
    z-index: 90;
    padding: 10px 16px;
    border-radius: 9px;
    background: #12151f;
    border: 1px solid rgba(255, 255, 255, .16);
    color: #f2f3f5;
    font: 600 13px 'Geist', system-ui;
    transition: top .16s cubic-bezier(.4, 0, .2, 1);
}
.lp-skip:focus { top: 12px; color: #f2f3f5; }

/* Type ------------------------------------------------------------------- */

.lp-h1 {
    margin: 0;
    font: 600 clamp(42px, 4.9vw, 72px)/1.07 'Geist', system-ui;
    letter-spacing: -.045em;
    color: #f2f3f5;
    text-wrap: balance;
    max-width: 15ch;
}
.lp-h1-sm {
    font-size: clamp(36px, 3.9vw, 58px);
    line-height: 1.11;
    letter-spacing: -.042em;
    max-width: 17ch;
}

/* The one gradient in the product's type, and it is the hero's second half
   only. Nothing else on the page gets gradient text. */
.lp-grad {
    background: linear-gradient(96deg, #9fb0f2, #b4a6f3);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.lp-lede {
    margin: 20px 0 0;
    max-width: 432px;
    font: 400 16.5px/1.55 'Geist', system-ui;
    color: #b3b8c2;
    text-wrap: pretty;
}

.lp-h2 {
    margin: 0;
    font: 600 clamp(30px, 3vw, 40px)/1.07 'Geist', system-ui;
    letter-spacing: -.04em;
    color: #f2f3f5;
    text-wrap: pretty;
}

.lp-sec-lede {
    margin: 18px 0 0;
    font: 400 16px/1.6 'Geist', system-ui;
    color: #b3b8c2;
    text-wrap: pretty;
}

/* The 9–9.5px mono all-caps eyebrow. Used for every section label. */
.lp-cap {
    font: 700 9.5px 'Geist Mono', ui-monospace, monospace;
    letter-spacing: .14em;
    color: #6b7078;
}
.lp-cap-dim { color: #5b5f67; }

.lp-num { font-variant-numeric: tabular-nums; }

/* Decorative fills ------------------------------------------------------- */

.lp-noise {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .016;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

.lp-glow { position: absolute; pointer-events: none; }

/* ── §2 Hero ────────────────────────────────────────────────────────────── */

.lp-hero {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #080C1A 0%, #0A0F26 52%, #0B1030 100%);
}

.lp-hero-glow-a {
    right: -6%;
    top: -200px;
    width: min(1180px, 74%);
    height: 940px;
    background: radial-gradient(closest-side, rgba(124, 140, 236, .17), rgba(124, 140, 236, .05) 58%, rgba(124, 140, 236, 0));
}
.lp-hero-glow-b {
    left: -14%;
    top: 200px;
    width: min(900px, 62%);
    height: 760px;
    background: radial-gradient(closest-side, rgba(90, 110, 210, .09), rgba(90, 110, 210, 0));
}

/* Top bar ---------------------------------------------------------------- */

.lp-nav {
    flex: none;
    height: 68px;
    position: relative;
    z-index: 9;
    border-bottom: 1px solid rgba(255, 255, 255, .055);
}
.lp-nav-in {
    height: 100%;
    max-width: 1560px;
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    align-items: center;
    gap: 34px;
}
/* The lockup is css/brand-lockup.css — `.nb-brand`, the same component the
   dashboard's sidebar and topbar use. `.lp-brand` is gone; do not bring back a
   landing-only copy of the logo. */
.lp-nav-links {
    display: flex;
    align-items: center;
    gap: 26px;
    white-space: nowrap;
    font: 400 13.5px 'Geist', system-ui;
    color: #8b8f97;
}
.lp-nav-links a { color: inherit; }
.lp-nav-links a:hover { color: #e6e8ea; }
.lp-nav-spacer { flex: 1; }

.lp-nav-signin {
    font: 500 13.5px 'Geist', system-ui;
    color: #8b8f97;
    white-space: nowrap;
}
.lp-nav-signin:hover { color: #e6e8ea; }

/* A <button>, because it opens a menu. It inherits neither font nor colour, and
   the chevron it wears has to mean something — see the switcher in index.html. */
.lp-srv-chip {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 34px;
    padding: 0 11px 0 8px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .03);
    white-space: nowrap;
    color: #c8cbd1;
    font-family: 'Geist', system-ui, sans-serif;
    cursor: pointer;
    transition: background-color .16s cubic-bezier(.4, 0, .2, 1),
                border-color .16s cubic-bezier(.4, 0, .2, 1);
}
.lp-srv-chip:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); }
.lp-srv-chip svg { transition: transform .18s cubic-bezier(.4, 0, .2, 1); }
.lp-srv-chip.active svg { transform: rotate(180deg); }
/* The switcher's own menu sits under a 34px chip rather than a 28px avatar, so
   it is a little wider than the account menu and its rows carry a server tile. */
.lp-srv-drop .profile-menu { width: 250px; }
.lp-srv-menu-ini {
    width: 20px;
    height: 20px;
    flex: none;
    border-radius: 6px;
    font-size: 8px;
}
.lp-srv-drop .profile-menu-item[aria-current="true"] { color: #f2f3f5; }
.lp-srv-chip .lp-ini {
    width: 20px;
    height: 20px;
    flex: none;
    border-radius: 6px;
    font-size: 8.5px;
}
.lp-srv-chip-name { font: 500 13px 'Geist', system-ui; color: #c8cbd1; }

/* Guild avatar / initials tile. `--g` is the tile's gradient, `--gt` its ink;
   both are written by the JS from the guild's own id so two servers never
   share a colour. */
.lp-ini {
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 12px 'Geist', system-ui;
    background: var(--g, linear-gradient(150deg, rgba(147, 112, 219, .5), rgba(109, 40, 217, .35)));
    color: var(--gt, #cbb8f6);
    overflow: hidden;
}
.lp-ini img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Buttons ---------------------------------------------------------------- */

/* ⚠️ Centres its own label, and that is not optional. These variants set a
   fixed `height`, which a <button> centres text inside for free — but half of
   them are <a> elements, and an anchor in a flex row blockifies to `display:
   block`, so the text sat on the first baseline with all the slack underneath.
   The "Open" button on the server card was visibly top-heavy because of it.
   Declaring the centring on the base means it cannot depend on which tag a
   caller reached for. */
.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    font-family: 'Geist', system-ui;
    transition: background-color .16s cubic-bezier(.4, 0, .2, 1),
                box-shadow .24s cubic-bezier(.4, 0, .2, 1),
                color .16s cubic-bezier(.4, 0, .2, 1),
                border-color .16s cubic-bezier(.4, 0, .2, 1),
                transform .12s cubic-bezier(.4, 0, .2, 1);
}
.lp-btn:active { transform: scale(.96); }

/* Blue is the only button colour. Brand purple is chrome — icon tiles, glows,
   selected states — and never a button. */
.lp-btn-blue {
    background: #3b82f6;
    color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .45),
                0 6px 14px -6px rgba(59, 130, 246, .5),
                inset 0 1px 0 rgba(255, 255, 255, .18);
}
.lp-btn-blue:hover { background: #2563eb; }

.lp-btn-ghost {
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .05);
    color: #e6e8ea;
}
.lp-btn-ghost:hover { background: rgba(255, 255, 255, .09); color: #f2f3f5; }

.lp-btn-nav {
    padding: 9px 16px;
    border-radius: 9px;
    flex: none;
    font-size: 13px;
    font-weight: 600;
}

.lp-btn-sm {
    height: 31px;
    padding: 0 13px;
    border-radius: 8px;
    font: 600 12.5px 'Geist', system-ui;
    border: 1px solid rgba(255, 255, 255, .09);
    background: rgba(255, 255, 255, .05);
    color: #c8cbd1;
}
.lp-btn-sm:hover { background: rgba(255, 255, 255, .09); color: #f2f3f5; }

/* The hero's primary. Its resting shadow already carries the ring, so the
   hover state only deepens what is there rather than adding a new layer. */
.lp-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    height: 56px;
    padding: 0 30px;
    border-radius: 14px;
    border: none;
    background: #3b82f6;
    color: #fff;
    font: 600 16.5px 'Geist', system-ui;
    letter-spacing: -.012em;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .5),
                0 12px 28px -10px rgba(59, 130, 246, .5),
                0 0 0 1px rgba(147, 180, 255, .18),
                inset 0 1px 0 rgba(255, 255, 255, .22);
    transition: background-color .18s cubic-bezier(.4, 0, .2, 1),
                box-shadow .24s cubic-bezier(.4, 0, .2, 1),
                transform .12s cubic-bezier(.4, 0, .2, 1);
}
.lp-cta:hover {
    background: #2563eb;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .5),
                0 18px 40px -12px rgba(59, 130, 246, .62),
                0 0 0 1px rgba(147, 180, 255, .28),
                inset 0 1px 0 rgba(255, 255, 255, .26);
}
.lp-cta:active { transform: scale(.97); }
.lp-cta img,
.lp-cta svg { width: 21px; height: 21px; display: block; flex: none; }

.lp-cta-wrap {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}
.lp-cta-note {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 2px;
    font: 400 12.5px 'Geist', system-ui;
    color: #9aa0aa;
    white-space: nowrap;
}
.lp-cta-note .lp-dot { color: #3d434d; }

/* Scene + parallax terrain ----------------------------------------------- */

.lp-scene {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 820px;
    overflow: hidden;
}

.lp-terr {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 320px;
    pointer-events: none;
    will-change: transform;
}
.lp-terr svg { width: 100%; height: 100%; display: block; }
.lp-terr-far { opacity: .05; }
.lp-terr-mid { opacity: .11; }

.lp-hero-in {
    position: absolute;
    inset: 0;
    will-change: transform, opacity;
}

.lp-row {
    height: 100%;
    max-width: 1560px;
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 56px;
}

.lp-col-l {
    flex: 0 1 484px;
    min-width: 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 0 96px;
    position: relative;
    z-index: 8;
}

.lp-col-r {
    flex: 1 1 620px;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 36px;
}

/* The line art behind the right column. One per experience; only the active
   one is in the DOM's flow, and it never moves — it is a backdrop, not a
   layer that competes with the cards in front of it. */
.lp-artline {
    position: absolute;
    inset: -40px -20px;
    pointer-events: none;
    opacity: .08;
    color: #c4baf7;
}
.lp-artline svg { width: 100%; height: 100%; display: block; }

.lp-cue {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #7c828d;
}
.lp-cue:hover { color: #c8cbd1; }
.lp-cue span { font: 400 12.5px 'Geist', system-ui; white-space: nowrap; color: inherit; }
.lp-cue-arrow {
    display: inline-flex;
    animation: lpBob 2.6s cubic-bezier(.4, 0, .2, 1) infinite;
    color: inherit;
}

/* ── §3 Hero rail ───────────────────────────────────────────────────────── */

.lp-rail { margin-top: 40px; }
.lp-rail-list { display: flex; flex-wrap: wrap; gap: 6px; }

.lp-rail-btn {
    position: relative;
    overflow: hidden;
    height: 42px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .028);
    border: 1px solid rgba(255, 255, 255, .07);
    color: #a7adb8;
    cursor: pointer;
    transition: background-color .18s cubic-bezier(.4, 0, .2, 1),
                border-color .18s cubic-bezier(.4, 0, .2, 1),
                color .18s cubic-bezier(.4, 0, .2, 1),
                transform .12s cubic-bezier(.4, 0, .2, 1);
}
.lp-rail-btn:hover { color: #e6e8ea; }
.lp-rail-btn:active { transform: scale(.97); }
.lp-rail-btn[aria-selected="true"] {
    background: rgba(167, 139, 250, .13);
    border-color: rgba(255, 255, 255, .14);
    color: #f2f3f5;
}
.lp-rail-btn span:not(.lp-rail-ico):not(.lp-rail-bar) {
    font: 600 13px 'Geist', system-ui;
    white-space: nowrap;
}

/* The glyphs are PNG/SVG art, masked so they take the button's own ink and
   the selected state can lift them with the label. */
.lp-rail-ico {
    width: 16px;
    height: 16px;
    flex: none;
    display: block;
    background: currentColor;
    opacity: .92;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* The dwell bar. Driven by transform from JS, so it costs no layout — and it
   is only ever painted while the rail is actually rotating. */
.lp-rail-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 999px;
    background: rgba(167, 139, 250, .62);
    transform-origin: left;
    transform: scaleX(0);
}

.lp-claim-box { margin-top: 24px; min-height: 62px; }
.lp-claim {
    font: 500 20px/1.28 'Geist', system-ui;
    letter-spacing: -.03em;
    color: #e6e8ea;
    text-wrap: pretty;
}
.lp-mods {
    margin-top: 9px;
    font: 400 13px/1.5 'Geist', system-ui;
    color: #8b8f97;
}

/* ── §4 Discord message mocks ───────────────────────────────────────────── */

/* One vocabulary for every Discord surface on the page — the hero's four
   experience cards, the first-run preview, the features panels and the
   dashboard's live preview. Discord's own colours, not ours. */

.lp-dc {
    border-radius: 12px;
    overflow: hidden;
    background: #313338;
}
.lp-dc-head {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .2);
}
.lp-dc-head svg { flex: none; }
.lp-dc-chan { font: 600 14.5px 'Geist', system-ui; color: #f2f3f5; }
.lp-dc-note { font: 400 11px 'Geist', system-ui; color: #949ba4; white-space: nowrap; }

.lp-dc-body { padding: 13px 14px; display: flex; flex-direction: column; gap: 12px; }

.lp-dm { display: flex; gap: 13px; }
/* Doubles as a <span> with initials and an <img>. The people in these mocks are
   real, so their faces start as the shipped SVG and are upgraded to the live
   Discord avatar by hydrateFaces() — `object-fit` is what keeps a non-square
   CDN image from stretching when it lands. */
.lp-dm-av {
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 50%;
    display: block;
    background: #1e1f22;
    object-fit: cover;
}
.lp-dm-av-txt {
    display: flex;
    align-items: center;
    justify-content: center;
    font: 600 14px 'Geist', system-ui;
}
.lp-dm-main { flex: 1; min-width: 0; }
.lp-dm-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lp-dm-name { font: 500 14.5px 'Geist', system-ui; color: #a78bfa; white-space: nowrap; }
.lp-dm-time { font: 400 11px 'Geist', system-ui; color: #949ba4; white-space: nowrap; }
.lp-dm-app {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 15px;
    padding: 0 4px;
    border-radius: 3px;
    background: #5865F2;
    white-space: nowrap;
}
.lp-dm-app span { font: 600 9.5px 'Geist', system-ui; color: #fff; }
.lp-dm-text {
    margin-top: 2px;
    font: 400 14.5px/1.375 'Geist', system-ui;
    color: #dbdee1;
}
.lp-dm-list {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font: 400 14px/1.45 'Geist', system-ui;
    color: #dbdee1;
}

.lp-mention {
    padding: 0 3px;
    border-radius: 4px;
    background: rgba(88, 101, 242, .3);
    color: #c9cdfb;
}
.lp-mention-role {
    padding: 0 3px;
    border-radius: 4px;
    background: rgba(167, 139, 250, .24);
    color: #d3c4f7;
}
.lp-chan-ref { color: #c9cdfb; }

/* Discord's own button shapes — flat, 31px, no shadow. */
.lp-dc-btns { margin-top: 11px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lp-dc-btn {
    display: inline-flex;
    align-items: center;
    height: 31px;
    padding: 0 15px;
    border-radius: 8px;
    background: #4e5058;
    font: 500 13px 'Geist', system-ui;
    color: #fff;
    white-space: nowrap;
}
.lp-dc-btn-primary { background: #5865F2; }
.lp-dc-btn-danger { background: #DA373C; }

.lp-embed {
    margin-top: 8px;
    display: flex;
    gap: 13px;
    border-radius: 8px;
    overflow: hidden;
    background: #2b2d31;
}
.lp-embed-bar { width: 4px; flex: none; background: #9370DB; }
.lp-embed-in { flex: 1; min-width: 0; padding: 14px 16px 14px 0; }
.lp-embed-title { font: 600 16px/1.25 'Geist', system-ui; color: #f2f3f5; }
.lp-embed-title-ico { display: flex; align-items: center; gap: 9px; }
.lp-embed-title-ico img { width: 21px; height: 21px; display: block; flex: none; }
.lp-embed-reason {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font: 400 13px/1.4 'Geist', system-ui;
    color: #dbdee1;
}
.lp-embed-reason img { width: 15px; height: 15px; display: block; flex: none; margin-top: 2px; }
.lp-embed-reason b { font-weight: 600; }
.lp-embed-text { margin-top: 10px; font: 400 13.5px/1.4 'Geist', system-ui; color: #dbdee1; }
.lp-embed-rule { margin: 11px 0; height: 1px; background: rgba(255, 255, 255, .08); }
.lp-embed-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 16px;
    font: 400 13px 'Geist', system-ui;
    color: #dbdee1;
}
.lp-embed-fields span { display: inline-flex; align-items: center; gap: 6px; }
.lp-embed-fields img { width: 15px; height: 15px; display: block; }
.lp-embed-fields b { font-weight: 600; }
.lp-embed-foot { font: 400 11.5px 'Geist', system-ui; color: #949ba4; }

/* ── §5 Hero right column ───────────────────────────────────────────────── */

/* Every floating panel in the hero shares one elevation. Their parallax
   translate is written by JS onto the element itself. */
.lp-float {
    position: relative;
    z-index: 2;
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(28, 31, 47, .93), rgba(16, 19, 30, .95));
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .5),
                0 34px 66px -30px rgba(0, 0, 0, .78),
                inset 0 1px 0 rgba(255, 255, 255, .06);
    transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

.lp-dash {
    align-self: flex-end;
    width: min(608px, 100%);
    height: 296px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.lp-dash-top {
    flex: none;
    height: 46px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    gap: 11px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.lp-dash-top img { height: 15px; width: auto; display: block; opacity: .9; }
.lp-vrule { width: 1px; height: 14px; background: rgba(255, 255, 255, .10); }
.lp-dash-srv { font: 500 12.5px 'Geist', system-ui; color: #c8cbd1; white-space: nowrap; }
.lp-tile-sm {
    width: 21px;
    height: 21px;
    flex: none;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 600 8.5px 'Geist', system-ui;
    color: #e6e8ea;
    background: linear-gradient(150deg, #5b4bc4, #3a3a7e);
    overflow: hidden;
}
.lp-tile-sm img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lp-pro {
    display: inline-flex;
    align-items: center;
    height: 16px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(167, 139, 250, .14);
    border: 1px solid rgba(255, 255, 255, .14);
    font: 700 8.5px 'Geist Mono', ui-monospace, monospace;
    letter-spacing: .1em;
    color: #c9b6ee;
}

.lp-dash-body {
    flex: 1;
    min-height: 0;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.lp-dash-head { display: flex; align-items: center; gap: 12px; padding: 0 2px 7px; }
.lp-ico-tile {
    width: 27px;
    height: 27px;
    flex: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c8cbd1;
}
.lp-dash-titles { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lp-dash-area {
    font: 700 8.5px 'Geist Mono', ui-monospace, monospace;
    letter-spacing: .13em;
    color: #6b7078;
    white-space: nowrap;
}
.lp-dash-title {
    font: 600 15.5px 'Geist', system-ui;
    letter-spacing: -.015em;
    color: #f2f3f5;
    white-space: nowrap;
}
.lp-dash-meta {
    font: 500 11.5px 'Geist', system-ui;
    color: #7b8088;
    white-space: nowrap;
}

/* The dashboard's own ON switch, at the size the dashboard draws it. */
.lp-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 38px;
    height: 21px;
    flex: none;
    padding: 0 3px;
    border-radius: 999px;
    background: #3b82f6;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
}
.lp-toggle i {
    font: 700 7.5px 'Geist', system-ui;
    font-style: normal;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .85);
    padding-left: 2px;
}
.lp-toggle b {
    width: 15px;
    height: 15px;
    margin-left: 3px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}

.lp-dash-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .022);
    border: 1px solid rgba(255, 255, 255, .05);
    transition: background-color .24s cubic-bezier(.4, 0, .2, 1),
                border-color .24s cubic-bezier(.4, 0, .2, 1);
}
.lp-dash-row span:first-child {
    flex: 1;
    min-width: 0;
    font: 500 12.5px 'Geist', system-ui;
    color: #6b7078;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .24s cubic-bezier(.4, 0, .2, 1);
}
.lp-dash-row span:last-child {
    flex: none;
    font: 600 12px 'Geist', system-ui;
    color: #5b5f67;
    white-space: nowrap;
    transition: color .24s cubic-bezier(.4, 0, .2, 1);
}
/* The one row the experience is actually about. */
.lp-dash-row.is-lit {
    background: rgba(167, 139, 250, .10);
    border-color: rgba(255, 255, 255, .14);
}
.lp-dash-row.is-lit span:first-child { color: #e6e8ea; }
.lp-dash-row.is-lit span:last-child { color: #c9b6ee; }

/* The Discord card overlaps the dashboard card from the left — the two are one
   composition, so the negative margin is load-bearing, not decoration. */
.lp-msg-slot {
    align-self: flex-start;
    width: min(452px, 96%);
    height: 328px;
    margin-top: -40px;
    position: relative;
    z-index: 6;
}
.lp-msg {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .5),
                0 16px 28px -14px rgba(0, 0, 0, .6),
                0 44px 72px -40px rgba(0, 0, 0, .7);
    transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

/* ── The signed-in mod log ───────────────────────────────────────────────
   Real rows from the server's own audit_logs, in the same Discord chrome the
   demo card uses — so a returning visitor reads their own log rather than a
   staged one. Every value here came from the database; nothing is invented,
   and the card is not rendered at all when there is nothing to show. */
.lp-live { display: flex; flex-direction: column; }
.lp-live-body {
    padding: 6px 0 8px;
    display: flex;
    flex-direction: column;
    max-height: 292px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.lp-live-row {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 9px 14px;
    border-left: 2px solid transparent;
}
.lp-live-row + .lp-live-row { border-top: 1px solid rgba(255, 255, 255, .04); }
.lp-live-ico {
    width: 26px;
    height: 26px;
    flex: none;
    margin-top: 1px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .05);
    color: #b5bac1;
}
/* The three that carry weight get their own ink. Everything else stays neutral
   — colouring every row would make none of them mean anything. */
.lp-live-row[data-sev="high"] .lp-live-ico { background: rgba(218, 55, 60, .16); color: #f2a1a1; }
.lp-live-row[data-sev="mid"] .lp-live-ico { background: rgba(245, 158, 11, .14); color: #e8b562; }
.lp-live-row[data-sev="good"] .lp-live-ico { background: rgba(16, 185, 129, .14); color: #6ee7b7; }
.lp-live-main { flex: 1; min-width: 0; }
.lp-live-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lp-live-label { font: 600 13.5px 'Geist', system-ui; color: #f2f3f5; }
.lp-live-time { font: 400 11.5px 'Geist', system-ui; color: #6b7078; white-space: nowrap; }
.lp-live-who { margin-top: 3px; font: 400 13px/1.45 'Geist', system-ui; color: #b5bac1; }
.lp-live-none {
    padding: 26px 18px 30px;
    text-align: center;
    font: 400 13px/1.6 'Geist', system-ui;
    color: #949ba4;
    text-wrap: pretty;
}
.lp-live-reason {
    margin-top: 4px;
    font: 400 12.5px/1.45 'Geist', system-ui;
    color: #949ba4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lp-proof {
    align-self: flex-end;
    width: min(302px, 84%);
    margin-top: -96px;
    position: relative;
    z-index: 4;
    transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.lp-proof-in {
    border-radius: 13px;
    padding: 13px 15px;
    background: linear-gradient(180deg, rgba(28, 30, 42, .96), rgba(19, 21, 30, .96));
    border: 1px solid rgba(255, 255, 255, .09);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 16px 30px -14px rgba(0, 0, 0, .65);
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 62px;
}
.lp-proof-ico {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 9px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .09);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c9b6ee;
}
.lp-proof-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lp-proof-title { font: 600 13px 'Geist', system-ui; color: #f2f3f5; text-wrap: pretty; }
.lp-proof-sub { font: 400 11.5px 'Geist', system-ui; color: #7b8088; }

/* Music card ------------------------------------------------------------- */

.lp-np {
    margin-top: 8px;
    border-radius: 9px;
    padding: 15px 16px;
    background: #2b2d31;
    border: 1px solid rgba(255, 255, 255, .06);
    display: flex;
    gap: 15px;
}
.lp-np-main { flex: 1; min-width: 0; }
.lp-np-head { display: flex; align-items: center; gap: 8px; }
.lp-np-head img { width: 17px; height: 17px; display: block; flex: none; }
.lp-np-head span { font: 600 15.5px 'Geist', system-ui; color: #f2f3f5; }
.lp-np-track { margin-top: 10px; font: 400 15px/1.3 'Geist', system-ui; color: #00a8fc; }
.lp-np-artist { margin-top: 3px; font: 400 14px 'Geist', system-ui; color: #b5bac1; }
.lp-np-bar { margin-top: 12px; display: flex; align-items: center; gap: 11px; }
.lp-np-track-bg {
    flex: 1;
    min-width: 0;
    height: 8px;
    border-radius: 999px;
    background: #31405c;
    display: block;
    overflow: hidden;
}
.lp-np-track-bg i { display: block; height: 100%; border-radius: 999px; background: #2ee0c8; }
.lp-np-time {
    flex: none;
    padding: 4px 9px;
    border-radius: 6px;
    background: #1e1f22;
    font: 400 13px 'Geist Mono', ui-monospace, monospace;
    color: #dbdee1;
    white-space: nowrap;
}
.lp-np-req { margin-top: 11px; font: 400 13.5px 'Geist', system-ui; color: #b5bac1; }
.lp-np-foot { margin-top: 11px; font: 400 13.5px 'Geist', system-ui; color: #949ba4; }
.lp-np-art {
    width: 104px;
    height: 104px;
    flex: none;
    border-radius: 8px;
    background: radial-gradient(120% 120% at 30% 20%, #2a2f3a, #131519);
    border: 1px solid rgba(255, 255, 255, .06);
    display: flex;
    align-items: center;
    justify-content: center;
}
.lp-np-art i {
    width: 34px;
    height: 34px;
    display: block;
    background: #5b6270;
    -webkit-mask: url('/assets/icons/music.png') center / contain no-repeat;
    mask: url('/assets/icons/music.png') center / contain no-repeat;
}
.lp-np-ctrls { margin-top: 9px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lp-np-ctrl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 34px;
    border-radius: 8px;
    background: #4e5058;
}
.lp-np-ctrl-primary { background: #5865F2; }
.lp-np-ctrl-danger { background: #DA373C; }

/* ── §6 Account-state heroes ────────────────────────────────────────────── */

/* One hero variant is on at a time. Written as "hide what is NOT on" rather
   than "show what is" on purpose: `.is-on { display: block }` would outrank
   `.lp-dash { display: flex }` and flatten every card that is also a variant. */
[data-lp-state]:not(.is-on) { display: none !important; }

.lp-datline {
    margin: 16px 0 0;
    font: 400 14px 'Geist', system-ui;
    color: #8b8f97;
    font-variant-numeric: tabular-nums;
}

.lp-back-actions {
    margin-top: 26px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 11px;
}
.lp-open-srv {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    height: 60px;
    padding: 0 20px 0 12px;
    border-radius: 14px;
    border: none;
    background: #3b82f6;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .5),
                0 14px 30px -12px rgba(59, 130, 246, .55),
                inset 0 1px 0 rgba(255, 255, 255, .22);
    transition: background-color .18s cubic-bezier(.4, 0, .2, 1),
                transform .12s cubic-bezier(.4, 0, .2, 1);
}
.lp-open-srv:hover { background: #2563eb; }
.lp-open-srv:active { transform: scale(.97); }
.lp-open-srv .lp-ini {
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 11px;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-size: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
.lp-open-srv b {
    font: 600 16px 'Geist', system-ui;
    letter-spacing: -.014em;
    white-space: nowrap;
}

.lp-all-srv {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 60px;
    padding: 0 20px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .04);
    color: #c8cbd1;
    font: 600 14.5px 'Geist', system-ui;
    white-space: nowrap;
    transition: background-color .16s cubic-bezier(.4, 0, .2, 1), color .16s cubic-bezier(.4, 0, .2, 1);
}
.lp-all-srv:hover { background: rgba(255, 255, 255, .08); color: #f2f3f5; }
.lp-all-srv svg { flex: none; }
.lp-all-srv i {
    font: 600 13px 'Geist Mono', ui-monospace, monospace;
    font-style: normal;
    color: #6b7078;
}

.lp-ask {
    margin-top: 18px;
    max-width: 468px;
    display: flex;
    align-items: center;
    gap: 11px;
    height: 52px;
    padding: 0 16px;
    border-radius: 13px;
    background: rgba(10, 12, 16, .6);
    border: 1px solid rgba(255, 255, 255, .09);
    transition: border-color .16s cubic-bezier(.4, 0, .2, 1);
}
.lp-ask:hover,
.lp-ask:focus-within { border-color: rgba(255, 255, 255, .16); }
.lp-ask svg { flex: none; }
.lp-ask input {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    outline: none;
    color: #f2f3f5;
    font: 400 14.5px 'Geist', system-ui;
}
.lp-ask input::placeholder { color: #6b7078; }
.lp-ask kbd {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .09);
    font: 400 11px 'Geist Mono', ui-monospace, monospace;
    color: #5b5f67;
}
.lp-ask-sm { height: 48px; padding: 0 15px; border-radius: 12px; margin-top: 14px; }
.lp-ask-sm input { font-size: 14px; }

.lp-fault-list {
    margin-top: 20px;
    max-width: 468px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lp-fault {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 16px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(26, 28, 33, .86), rgba(18, 20, 24, .82));
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 18px 34px -20px rgba(0, 0, 0, .7);
}
.lp-fault-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #EF4444; }
.lp-fault-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lp-fault-title { font: 600 13.5px 'Geist', system-ui; color: #f2f3f5; }
.lp-fault-sub { font: 400 12.5px 'Geist', system-ui; color: #8b8f97; }
.lp-fault .lp-btn-blue {
    flex: none;
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    font: 600 12.5px 'Geist', system-ui;
}

/* First run -------------------------------------------------------------- */

.lp-steps {
    margin-top: 26px;
    max-width: 468px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.lp-step {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 16px;
    text-align: left;
    border-radius: 14px;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .07);
    color: #f2f3f5;
    cursor: pointer;
    transition: background-color .18s cubic-bezier(.4, 0, .2, 1),
                border-color .18s cubic-bezier(.4, 0, .2, 1);
}
.lp-step:hover,
.lp-step:focus-visible {
    background: rgba(255, 255, 255, .055);
    border-color: rgba(255, 255, 255, .14);
}
.lp-step-ico {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 9px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c8cbd1;
}
.lp-step-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lp-step-title { font: 600 13.5px 'Geist', system-ui; color: #f2f3f5; }
.lp-step-sub { font: 400 12.5px 'Geist', system-ui; color: #8b8f97; }

.lp-first-preview {
    align-self: flex-end;
    width: min(452px, 100%);
    height: 286px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 34px 66px -30px rgba(0, 0, 0, .78);
    transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.lp-first-preview .lp-dc-head { flex: none; height: 42px; }
.lp-first-stage {
    flex: 1;
    min-height: 0;
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.lp-first-stage > * { animation: lpScene .3s cubic-bezier(.4, 0, .2, 1) both; }
.lp-first-idle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    text-align: center;
}
.lp-first-idle img { width: 40px; height: 40px; border-radius: 50%; display: block; opacity: .5; }
.lp-first-idle span {
    font: 400 13.5px/1.5 'Geist', system-ui;
    color: #949ba4;
    max-width: 270px;
    text-wrap: pretty;
}
.lp-first-ghost {
    margin-top: 5px;
    padding: 13px;
    border-radius: 8px;
    border: 1px dashed rgba(255, 255, 255, .16);
    font: 400 13.5px/1.45 'Geist', system-ui;
    color: #949ba4;
    text-wrap: pretty;
}
.lp-first-log {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    border-radius: 8px;
    background: #2b2d31;
}
.lp-first-log svg { flex: none; }
.lp-first-log span { font: 400 13px/1.4 'Geist', system-ui; color: #dbdee1; }
.lp-strike { text-decoration: line-through; }

/* The `back` hero's automation card. */
.lp-auto {
    align-self: flex-end;
    width: min(438px, 100%);
    padding: 17px 18px;
    display: flex;
    flex-direction: column;
}
/* ⚠️ ONE icon column for the whole card. The two rows came from different
   places — `.lp-tile-sm` is 21px because it sits inline among other topbar
   chrome, `.lp-ico-tile` is 27px because it is a feature tile — so stacked
   here the server name started at x=49 and the title under it at x=59, and the
   card read as two half-aligned lists. Same defect the account menu had. */
.lp-auto-top { display: flex; align-items: center; gap: 12px; }
.lp-auto .lp-tile-sm { width: 27px; height: 27px; border-radius: 8px; font-size: 9.5px; }
.lp-auto-when { margin-top: 15px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* No pills is no row — otherwise its 15px margin stacks with the foot's 16px
   and the card grows a 31px band of nothing above the rule. */
.lp-auto-when:empty { display: none; }
.lp-pill {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 7px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .06);
    font: 600 10.5px 'Geist Mono', ui-monospace, monospace;
    letter-spacing: .05em;
    color: #8b8f97;
}
.lp-pill-lit {
    background: rgba(167, 139, 250, .12);
    border-color: rgba(255, 255, 255, .10);
    color: #c9b6ee;
}
.lp-auto-foot {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .06);
    display: flex;
    align-items: center;
    gap: 11px;
}
.lp-auto-foot .lp-warn {
    font: 500 12.5px 'Geist', system-ui;
    color: #e8b562;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── §7 Body sections ───────────────────────────────────────────────────── */

.lp-body { position: relative; overflow: hidden; background: #070B18; }

.lp-trail {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;
    will-change: transform;
}
.lp-trail svg { width: 100%; height: 100%; overflow: visible; }

.lp-body-glow-a { left: -16%; top: 1%; width: min(1100px, 72%); height: 900px; background: radial-gradient(closest-side, rgba(124, 140, 236, .12), rgba(124, 140, 236, 0)); }
.lp-body-glow-b { right: -10%; top: 22%; width: min(1000px, 66%); height: 860px; background: radial-gradient(closest-side, rgba(167, 139, 250, .09), rgba(167, 139, 250, 0)); }
.lp-body-glow-c { left: -12%; bottom: 8%; width: min(1000px, 68%); height: 820px; background: radial-gradient(closest-side, rgba(96, 120, 220, .07), rgba(96, 120, 220, 0)); }

.lp-dots {
    position: absolute;
    left: 0;
    right: 0;
    top: 44%;
    height: 900px;
    pointer-events: none;
    opacity: .05;
    background-image: radial-gradient(rgba(196, 205, 247, .5) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 74%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 22%, #000 74%, transparent);
}

/* The seam between the hero's #0B1030 and the body's #070B18. Without it the
   two backgrounds meet as a hard line right under the fold. */
.lp-seam {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 300px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(11, 16, 48, .92) 0%, rgba(9, 12, 32, .5) 42%, rgba(7, 11, 24, .16) 74%, rgba(7, 11, 24, 0) 100%);
}

.lp-sec { position: relative; padding: 96px 40px 104px; }
.lp-wrap { max-width: 1180px; margin: 0 auto; position: relative; }
.lp-wrap-wide { max-width: 1280px; }
.lp-wrap-mid { max-width: 1100px; }
.lp-wrap-close { max-width: 1264px; }
.lp-intro { max-width: 660px; }

/* Your servers ----------------------------------------------------------- */

.lp-sec-servers { padding: 110px 40px 24px; }
.lp-sec-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.lp-sec-head .lp-h2 { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.1; }
.lp-sec-head span { font: 400 14px 'Geist', system-ui; color: #7b8088; }

.lp-resume {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}
.lp-resume-row {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 17px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .022);
    border: 1px solid rgba(255, 255, 255, .06);
    text-align: left;
    cursor: pointer;
    transition: background-color .18s cubic-bezier(.4, 0, .2, 1), border-color .18s cubic-bezier(.4, 0, .2, 1);
}
.lp-resume-row:hover { background: rgba(255, 255, 255, .045); border-color: rgba(255, 255, 255, .12); }
.lp-resume-row .lp-ini { width: 26px; height: 26px; flex: none; border-radius: 8px; font-size: 9.5px; }
.lp-resume-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lp-resume-title {
    font: 600 13.5px 'Geist', system-ui;
    color: #e6e8ea;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lp-resume-sub {
    font: 400 12px 'Geist', system-ui;
    color: #7b8088;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lp-srv-grid {
    margin-top: 26px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
}
.lp-srv-card {
    padding: 19px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(26, 28, 33, .82), rgba(18, 20, 24, .78));
    border: 1px solid rgba(255, 255, 255, .07);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
    transition: border-color .18s cubic-bezier(.4, 0, .2, 1);
}
.lp-srv-card:hover { border-color: rgba(255, 255, 255, .15); }
.lp-srv-card-top { display: flex; align-items: center; gap: 11px; }
.lp-srv-card-top .lp-ini {
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 11px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.lp-srv-card-names { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lp-srv-card-name-row { display: flex; align-items: center; gap: 8px; }
.lp-srv-card-name {
    font: 600 14.5px 'Geist', system-ui;
    color: #f2f3f5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lp-srv-card-sub { font: 400 12px 'Geist', system-ui; color: #6b7078; font-variant-numeric: tabular-nums; }
.lp-badge-pro {
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 17px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(167, 139, 250, .15);
    font: 700 8.5px 'Geist Mono', ui-monospace, monospace;
    letter-spacing: .09em;
    color: #c4b5fd;
}
.lp-srv-card-fact {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .05);
    display: flex;
    align-items: flex-start;
    gap: 9px;
}
.lp-srv-card-fact i {
    margin-top: 5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: none;
    background: #34d399;
}
.lp-srv-card-fact span {
    flex: 1;
    min-width: 0;
    font: 400 13px/1.5 'Geist', system-ui;
    color: #b3b8c2;
    text-wrap: pretty;
}
.lp-srv-card-foot { margin-top: 15px; display: flex; align-items: center; gap: 10px; }
.lp-srv-card-foot > span { font: 400 12px 'Geist', system-ui; color: #6b7078; }

/* System map ------------------------------------------------------------- */

.lp-sec-system { padding: 132px 40px 116px; }
.lp-map {
    margin-top: 56px;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}
.lp-map-src { flex: 0 0 auto; min-width: 236px; display: flex; align-items: center; padding: 8px 0; }
.lp-map-msg {
    border-radius: 13px;
    padding: 13px 15px;
    background: linear-gradient(180deg, rgba(30, 33, 46, .94), rgba(20, 22, 32, .94));
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 18px 34px -18px rgba(0, 0, 0, .6);
    display: flex;
    align-items: center;
    gap: 12px;
}
.lp-map-msg-av {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 50%;
    background: linear-gradient(150deg, #7c5af0, #4a4a9e);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 600 13px 'Geist', system-ui;
    color: #f2f3f5;
    object-fit: cover;
}
.lp-map-msg-txt { display: flex; flex-direction: column; gap: 3px; }
.lp-map-msg-who { font: 600 12px 'Geist', system-ui; color: #c8cbd1; }
.lp-map-msg-who i { font-weight: 400; font-style: normal; color: #6b7078; }
.lp-map-msg-body { font: 400 13px 'Geist', system-ui; color: #9aa0aa; white-space: nowrap; }

.lp-map-wires { flex: 0 0 76px; position: relative; min-height: 250px; }
.lp-map-wires svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lp-map-wires path {
    stroke: rgba(255, 255, 255, .1);
    transition: stroke .2s cubic-bezier(.4, 0, .2, 1);
}
.lp-map.is-lane-0 .lp-wire-0,
.lp-map.is-lane-1 .lp-wire-1,
.lp-map.is-lane-2 .lp-wire-2 { stroke: rgba(167, 139, 250, .6); }
.lp-map.is-lane-0 .lp-map-wires path:not(.lp-wire-0),
.lp-map.is-lane-1 .lp-map-wires path:not(.lp-wire-1),
.lp-map.is-lane-2 .lp-map-wires path:not(.lp-wire-2) { stroke: rgba(255, 255, 255, .05); }

.lp-lanes {
    flex: 1 1 460px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 26px;
}
.lp-lane { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lp-node {
    border-radius: 11px;
    padding: 9px 13px;
    background: rgba(24, 26, 38, .7);
    border: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background-color .2s cubic-bezier(.4, 0, .2, 1), border-color .2s cubic-bezier(.4, 0, .2, 1);
}
.lp-lane.is-on .lp-node { background: rgba(36, 39, 54, .96); border-color: rgba(255, 255, 255, .14); }
.lp-node img { width: 16px; height: 16px; display: block; flex: none; }
.lp-arrow { stroke: rgba(255, 255, 255, .16); transition: stroke .2s cubic-bezier(.4, 0, .2, 1); }
.lp-lane.is-on .lp-arrow { stroke: rgba(167, 139, 250, .6); }
.lp-lane-note {
    flex: 1 1 230px;
    min-width: 210px;
    font: 400 13px/1.5 'Geist', system-ui;
    color: #7b8088;
    text-wrap: pretty;
    transition: color .2s cubic-bezier(.4, 0, .2, 1);
}
.lp-lane.is-on .lp-lane-note { color: #c8cbd1; }
.lp-map.is-lane-0 .lp-lane:not(.is-on) .lp-lane-note,
.lp-map.is-lane-1 .lp-lane:not(.is-on) .lp-lane-note,
.lp-map.is-lane-2 .lp-lane:not(.is-on) .lp-lane-note { color: #5b5f67; }

.lp-xp { font: 600 13.5px 'Geist', system-ui; color: #c9b6ee; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lp-xp-bar { width: 74px; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .09); overflow: hidden; }
.lp-xp-bar i { display: block; height: 100%; border-radius: 999px; background: #a78bfa; }
.lp-node-cap { font: 700 8px 'Geist Mono', ui-monospace, monospace; letter-spacing: .13em; color: #6b7078; }
.lp-node-big { font: 600 17px/1 'Geist', system-ui; letter-spacing: -.03em; color: #f2f3f5; font-variant-numeric: tabular-nums; }
.lp-node-mid { font: 600 14px 'Geist', system-ui; color: #f2f3f5; font-variant-numeric: tabular-nums; }
.lp-node-role { width: 8px; height: 8px; border-radius: 50%; background: #a78bfa; }
.lp-node-label { font: 600 12.5px 'Geist', system-ui; color: #e6e8ea; }
.lp-pips { display: flex; align-items: center; gap: 4px; }
.lp-pips i { width: 16px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .12); }
.lp-pips i.is-on { background: #a78bfa; }

.lp-map-foot {
    margin-top: 44px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    font: 500 14.5px 'Geist', system-ui;
    color: #c8cbd1;
    text-wrap: pretty;
}

/* Features --------------------------------------------------------------- */

.lp-sec-modules { padding: 96px 40px 108px; }
.lp-cats {
    margin-top: 36px;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 5px;
    border-radius: 13px;
    background: rgba(0, 0, 0, .30);
    border: 1px solid rgba(255, 255, 255, .07);
    max-width: 100%;
}
.lp-cat {
    height: 34px;
    padding: 0 15px;
    border-radius: 9px;
    background: transparent;
    border: 1px solid transparent;
    color: #8b8f97;
    font: 600 12.5px 'Geist', system-ui;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .18s cubic-bezier(.4, 0, .2, 1),
                border-color .18s cubic-bezier(.4, 0, .2, 1),
                color .18s cubic-bezier(.4, 0, .2, 1),
                transform .12s cubic-bezier(.4, 0, .2, 1);
}
.lp-cat:hover { color: #e6e8ea; }
.lp-cat:active { transform: scale(.97); }
.lp-cat[aria-selected="true"] {
    background: rgba(167, 139, 250, .15);
    border-color: rgba(255, 255, 255, .12);
    color: #f2f3f5;
}

.lp-mod-grid {
    margin-top: 34px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 44px 56px;
    align-items: start;
}
.lp-mod-copy { display: flex; flex-direction: column; gap: 18px; padding-top: 4px; }
.lp-mod-h3 {
    margin: 12px 0 0;
    font: 600 clamp(24px, 2.2vw, 31px)/1.14 'Geist', system-ui;
    letter-spacing: -.032em;
    color: #f2f3f5;
    text-wrap: pretty;
}
.lp-mod-body {
    margin: 0;
    max-width: 44ch;
    font: 400 15px/1.62 'Geist', system-ui;
    color: #9aa0aa;
    text-wrap: pretty;
}
.lp-mod-included { display: flex; flex-direction: column; gap: 10px; padding-top: 2px; }
.lp-chips { display: flex; flex-wrap: wrap; gap: 5px 18px; }
.lp-chips span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 400 13px 'Geist', system-ui;
    color: #9aa0aa;
    white-space: nowrap;
}
.lp-chips i { width: 3px; height: 3px; flex: none; border-radius: 50%; background: #5b5f67; }

.lp-mod-stage { min-width: 0; min-height: 380px; }
.lp-panel {
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(26, 28, 38, .82), rgba(17, 19, 27, .78));
    border: 1px solid rgba(255, 255, 255, .07);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .45),
                0 30px 60px -30px rgba(0, 0, 0, .75),
                inset 0 1px 0 rgba(255, 255, 255, .04);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: lpSwap .22s cubic-bezier(.4, 0, .2, 1) both;
}
.lp-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lp-panel-head span:last-child { font: 400 11.5px 'Geist', system-ui; color: #6b7078; }
.lp-well {
    border-radius: 10px;
    background: rgba(0, 0, 0, .24);
    border: 1px solid rgba(255, 255, 255, .07);
    overflow: hidden;
}
.lp-well-rows > div {
    padding: 11px 13px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.lp-well-rows > div:last-child { border-bottom: none; }
.lp-well-rows span:first-child { flex: 1; font: 500 13px 'Geist', system-ui; color: #e6e8ea; }
.lp-well-rows span:last-child { font: 500 12px 'Geist', system-ui; color: #a78bfa; }
.lp-well-rows span.lp-off { font-weight: 400; color: #8b8f97; }

.lp-list { display: flex; flex-direction: column; gap: 8px; }
.lp-list-row {
    border-radius: 10px;
    background: rgba(0, 0, 0, .24);
    border: 1px solid rgba(255, 255, 255, .07);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
}
.lp-list-row span:first-child {
    flex: 1;
    min-width: 0;
    font: 500 13px 'Geist', system-ui;
    color: #e6e8ea;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lp-list-row span:last-child { flex: none; font: 500 12px 'Geist', system-ui; color: #a78bfa; white-space: nowrap; }
.lp-list-row span.lp-off { color: #8b8f97; }
.lp-list-row i { font-style: normal; color: #6b7078; font-variant-numeric: tabular-nums; }

.lp-hist > div {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 13px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.lp-hist > div:last-child { border-bottom: none; }
.lp-hist time { font: 500 11.5px 'Geist Mono', ui-monospace, monospace; color: #6b7078; font-variant-numeric: tabular-nums; }
.lp-hist span { flex: 1; font: 400 12.5px 'Geist', system-ui; color: #c8cbd1; }
.lp-hist b { font: 600 11px 'Geist', system-ui; color: #f59e0b; }

/* The rank card is drawn at its real 934x282 and scaled — so what the page
   shows is the geometry the canvas renderer actually produces, not a redraw
   of it that could drift. JS sets the wrapper's height + the scale factor. */
.lp-rank { position: relative; width: 100%; height: 104px; overflow: hidden; border-radius: 8px; }
.lp-rank-card {
    width: 934px;
    height: 282px;
    transform: scale(.368);
    transform-origin: top left;
    position: absolute;
    top: 0;
    left: 0;
    background: #23272A;
    overflow: hidden;
    border-radius: 8px;
}
.lp-rank-card > div { position: absolute; }

.lp-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.lp-tags span {
    border-radius: 10px;
    background: rgba(0, 0, 0, .24);
    border: 1px solid rgba(255, 255, 255, .07);
    padding: 7px 11px;
    font: 500 12px 'Geist', system-ui;
    color: #c8cbd1;
}
.lp-quote {
    border-radius: 10px;
    background: rgba(0, 0, 0, .24);
    border: 1px solid rgba(255, 255, 255, .07);
    padding: 12px 14px;
    font: 400 13.5px/1.4 'Geist', system-ui;
    color: #dbdee1;
}
.lp-answer {
    border-radius: 10px;
    padding: 13px 14px;
    background: rgba(59, 130, 246, .10);
    border: 1px solid rgba(255, 255, 255, .08);
    font: 400 13px/1.5 'Geist', system-ui;
    color: #dbdee1;
}
.lp-mini-embed { background: #313338; border-color: rgba(0, 0, 0, .3); }
.lp-mini-embed > div { display: flex; }
.lp-mini-embed-bar { width: 4px; flex: none; background: #5865F2; }
.lp-mini-embed-in { flex: 1; min-width: 0; padding: 12px 14px; }
.lp-mini-embed-title { font: 600 13.5px 'Geist', system-ui; color: #f2f3f5; }
.lp-mini-embed-text { margin-top: 6px; font: 400 12.5px/1.45 'Geist', system-ui; color: #b5bac1; }
.lp-mini-embed-btn {
    margin-top: 11px;
    display: inline-flex;
    align-items: center;
    height: 29px;
    padding: 0 14px;
    border-radius: 8px;
    background: #5865F2;
    font: 500 12.5px 'Geist', system-ui;
    color: #fff;
}
.lp-track-row {
    border-radius: 10px;
    background: rgba(0, 0, 0, .24);
    border: 1px solid rgba(255, 255, 255, .07);
    padding: 13px;
    display: flex;
    align-items: center;
    gap: 13px;
}
.lp-track-play {
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 7px;
    background: #3b82f6;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lp-track-meta { flex: 1; min-width: 0; }
.lp-track-name { font: 500 13px 'Geist', system-ui; color: #e6e8ea; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-track-artist { margin-top: 3px; font: 400 11.5px 'Geist', system-ui; color: #6b7078; }
.lp-track-time { flex: none; font: 400 11.5px 'Geist Mono', ui-monospace, monospace; color: #8b8f97; font-variant-numeric: tabular-nums; }
.lp-stat-pair { display: flex; gap: 8px; }
.lp-stat-pair > div {
    border-radius: 10px;
    background: rgba(0, 0, 0, .24);
    border: 1px solid rgba(255, 255, 255, .07);
    flex: 1;
    padding: 11px 13px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.lp-stat-pair span:first-child { font: 400 12.5px 'Geist', system-ui; color: #8b8f97; }
.lp-stat-pair span:last-child { font: 600 13px 'Geist', system-ui; font-variant-numeric: tabular-nums; }

/* Dashboard section ------------------------------------------------------ */

.lp-sec-dashboard { padding: 104px 40px 116px; }
.lp-brw {
    margin-top: 56px;
    position: relative;
    z-index: 2;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(160deg, rgba(28, 31, 47, .94), rgba(15, 18, 28, .96));
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .5),
                0 48px 96px -38px rgba(0, 0, 0, .82),
                inset 0 1px 0 rgba(255, 255, 255, .06);
}
.lp-brw-bar {
    height: 50px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.lp-brw-dots { display: flex; align-items: center; gap: 6px; }
.lp-brw-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .13); }
.lp-brw-url {
    flex: 1;
    /* ⚠️ A flex item's default `min-width: auto` floors it at its content's
       min-content width, and the URL inside is `nowrap` — so without this the
       pill refuses to shrink, runs past the bar, and the ellipsis on the span
       never fires because the span always has the room it asked for. */
    min-width: 0;
    max-width: 440px;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 27px;
    padding: 0 11px;
    border-radius: 7px;
    background: rgba(10, 12, 16, .6);
    border: 1px solid rgba(255, 255, 255, .08);
}
.lp-brw-url svg { flex: none; }
.lp-brw-url span {
    min-width: 0;
    font: 500 11px 'Geist Mono', ui-monospace, monospace;
    color: #7b8088;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lp-brw-who { display: flex; align-items: center; gap: 9px; }
.lp-brw-who span { font: 500 12px 'Geist', system-ui; color: #8b8f97; }

.lp-brw-cols { display: flex; flex-wrap: wrap; align-items: stretch; }
.lp-brw-cfg {
    flex: 1 1 520px;
    min-width: 400px;
    padding: 32px 34px 34px;
    border-right: 1px solid rgba(255, 255, 255, .06);
}
.lp-field { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }
.lp-field-label { font: 600 12.5px 'Geist', system-ui; color: #c8cbd1; }
.lp-field-box {
    padding: 14px 15px;
    border-radius: 8px;
    background: rgba(10, 12, 16, .6);
    border: 1px solid rgba(255, 255, 255, .08);
    font: 400 13.5px/1.45 'Geist', system-ui;
    color: #e6e8ea;
}
.lp-var { color: #9fb0f2; }
.lp-vars { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 6px; }
.lp-vars span {
    display: inline-flex;
    align-items: center;
    height: 23px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .08);
    font: 500 11px 'Geist Mono', ui-monospace, monospace;
    color: #8b8f97;
}
.lp-vars span.is-used { color: #9fb0f2; }
.lp-settings { margin-top: 26px; display: flex; flex-direction: column; gap: 8px; }
.lp-setting {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 15px;
    border-radius: 11px;
    background: rgba(0, 0, 0, .22);
    border: 1px solid rgba(255, 255, 255, .07);
}
.lp-setting > span:first-child { flex: 1; font: 500 12.5px 'Geist', system-ui; color: #8b8f97; }
.lp-setting > span:last-child { font: 600 12px 'Geist', system-ui; color: #c8cbd1; white-space: nowrap; }
.lp-swatch { display: flex; align-items: center; gap: 8px; }
.lp-swatch i { width: 13px; height: 13px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, .16); }
.lp-swatch b { font: 600 11.5px 'Geist Mono', ui-monospace, monospace; color: #c8cbd1; }

.lp-brw-pv {
    flex: 1 1 460px;
    min-width: 380px;
    padding: 32px 34px 34px;
    background: rgba(0, 0, 0, .16);
    position: relative;
}
/* The arrow that says "the left column becomes this". It sits ON the seam. */
.lp-brw-arrow {
    position: absolute;
    left: -13px;
    top: 50%;
    width: 26px;
    height: 26px;
    margin-top: -13px;
    border-radius: 50%;
    background: #12151f;
    border: 1px solid rgba(255, 255, 255, .10);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8b8f97;
    z-index: 3;
}
.lp-pv-card {
    margin-top: 26px;
    border-radius: 12px;
    overflow: hidden;
    background: #313338;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .5),
                0 26px 48px -20px rgba(0, 0, 0, .7),
                0 0 0 1px rgba(255, 255, 255, .04),
                inset 0 1px 0 rgba(255, 255, 255, .05);
}
.lp-pv-card .lp-dm { padding: 15px; }
.lp-pv-card .lp-dm-av { width: 38px; height: 38px; }
.lp-pv-card .lp-dm-name { font-size: 15px; }
.lp-pv-card .lp-dm-text { font-size: 15px; }
.lp-pv-embed { margin-top: 8px; display: flex; border-radius: 4px; overflow: hidden; background: #2b2d31; }
.lp-pv-embed-bar { width: 4px; flex: none; background: #00BFFF; }
.lp-pv-fields { flex: 1; min-width: 0; padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 12px 20px; }
.lp-pv-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 104px; min-width: 0; }
.lp-pv-field > span:first-child {
    font: 600 12.5px 'Geist', system-ui;
    color: #f2f3f5;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.lp-pv-field img { width: 15px; height: 15px; display: block; flex: none; }
.lp-pv-field code {
    display: block;
    padding: 8px 9px;
    border-radius: 4px;
    background: #1e1f22;
    font: 400 12.5px/1.35 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    white-space: pre;
    color: #dbdee1;
}
.lp-pv-field code.is-accent { color: #d8a657; }

.lp-bullets { margin-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.lp-bullets > span { display: flex; align-items: flex-start; gap: 10px; }
.lp-bullets i {
    width: 5px;
    height: 5px;
    flex: none;
    margin-top: 7px;
    border-radius: 50%;
    background: rgba(167, 139, 250, .7);
}
.lp-bullets span span {
    font: 400 13.5px/1.5 'Geist', system-ui;
    color: #8b8f97;
    text-wrap: pretty;
}
.lp-bullets b { font-weight: 600; color: #c8cbd1; }

.lp-savebar {
    height: 60px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    background: rgba(0, 0, 0, .2);
}
.lp-savebar > span:first-child { font: 500 12px 'Geist', system-ui; color: #8b8f97; font-variant-numeric: tabular-nums; }
.lp-savebar-btn {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 15px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, .10);
    font: 600 12.5px 'Geist', system-ui;
    color: #c8cbd1;
}
.lp-savebar-btn.is-primary {
    padding: 0 17px;
    border-color: transparent;
    background: #3b82f6;
    color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .45),
                0 6px 14px -6px rgba(59, 130, 246, .55),
                inset 0 1px 0 rgba(255, 255, 255, .18);
}

/* Compare ---------------------------------------------------------------- */

.lp-cmp { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.lp-cmp-col { flex: 1 1 380px; min-width: 300px; }
.lp-stack { margin-top: 22px; position: relative; height: 300px; }
.lp-stack span {
    position: absolute;
    width: min(310px, 82%);
    height: 46px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .022);
    border: 1px solid rgba(255, 255, 255, .05);
    display: flex;
    align-items: center;
    padding: 0 15px;
    gap: 11px;
}
.lp-stack i { width: 7px; height: 7px; border-radius: 2px; background: rgba(255, 255, 255, .14); flex: none; }
.lp-stack b { font: 500 12.5px 'Geist', system-ui; font-weight: 500; color: #7b8088; }
.lp-stack em { flex: 1; }
.lp-stack u {
    font: 400 11px 'Geist', system-ui;
    text-decoration: none;
    color: #4e535c;
    white-space: nowrap;
}
.lp-cmp-note {
    margin: 26px 0 0;
    max-width: 340px;
    font: 400 13.5px/1.6 'Geist', system-ui;
    color: #6b7078;
    text-wrap: pretty;
}

.lp-one {
    margin-top: 22px;
    border-radius: 16px;
    padding: 24px;
    background: linear-gradient(180deg, rgba(26, 28, 33, .86), rgba(18, 20, 24, .82));
    border: 1px solid rgba(255, 255, 255, .11);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .45),
                0 34px 66px -30px rgba(0, 0, 0, .75),
                inset 0 1px 0 rgba(255, 255, 255, .05);
}
.lp-one-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.lp-one-head img { height: 18px; width: auto; display: block; }
.lp-one-head span { font: 600 14.5px 'Geist', system-ui; letter-spacing: -.02em; color: #f2f3f5; }
.lp-one-grid {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}
.lp-one-grid span {
    padding: 9px 11px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .035);
    font: 500 12px 'Geist', system-ui;
    color: #c8cbd1;
}
.lp-one-foot { margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .09); }
.lp-one-foot div { font: 600 15px 'Geist', system-ui; letter-spacing: -.02em; color: #f2f3f5; }
.lp-one-foot p {
    margin: 9px 0 0;
    max-width: 380px;
    font: 400 13.5px/1.6 'Geist', system-ui;
    color: #8b8f97;
    text-wrap: pretty;
}

/* Pricing ---------------------------------------------------------------- */

.lp-sec-pricing .lp-h2 { font-size: clamp(28px, 2.6vw, 36px); line-height: 1.08; }
.lp-sec-pricing .lp-sec-lede { font-size: 15.5px; }
.lp-plans { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 18px; align-items: stretch; }
.lp-plan {
    flex: 1 1 300px;
    min-width: 280px;
    padding: 26px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(26, 28, 33, .7), rgba(18, 20, 24, .66));
    border: 1px solid rgba(255, 255, 255, .07);
}
.lp-plan-now {
    background: linear-gradient(180deg, rgba(26, 28, 33, .82), rgba(18, 20, 24, .78));
    border-color: rgba(255, 255, 255, .10);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
}
.lp-plan-name { display: flex; align-items: center; gap: 10px; font: 600 15.5px 'Geist', system-ui; color: #c8cbd1; }
.lp-plan-now .lp-plan-name { color: #f2f3f5; }
.lp-badge-now {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(167, 139, 250, .14);
    border: 1px solid rgba(255, 255, 255, .14);
    font: 700 8.5px 'Geist Mono', ui-monospace, monospace;
    letter-spacing: .1em;
    color: #c9b6ee;
}
.lp-plan-price {
    margin-top: 16px;
    display: flex;
    align-items: baseline;
    gap: 6px;
    font: 600 38px/1 'Geist', system-ui;
    letter-spacing: -.04em;
    color: #e6e8ea;
    font-variant-numeric: tabular-nums;
}
.lp-plan-now .lp-plan-price { color: #f2f3f5; }
.lp-plan-price small { font: 400 13.5px 'Geist', system-ui; color: #7b8088; }
.lp-plan-year { margin-top: 7px; font: 400 12.5px 'Geist', system-ui; color: #6b7078; font-variant-numeric: tabular-nums; }
.lp-plan-note { margin-top: 12px; font: 400 13.5px/1.55 'Geist', system-ui; color: #8b8f97; }
.lp-plan-btn {
    margin-top: 22px;
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    font: 600 13.5px 'Geist', system-ui;
}

/* Close ------------------------------------------------------------------ */

.lp-sec-close { padding: 104px 40px 0; }
.lp-close-in { text-align: center; }
.lp-close-in .lp-h2 { font-size: clamp(32px, 3.4vw, 44px); line-height: 1.06; letter-spacing: -.045em; }
.lp-close-in p { margin: 20px auto 0; max-width: 520px; font: 400 16.5px/1.6 'Geist', system-ui; color: #b3b8c2; text-wrap: pretty; }
.lp-close-cta { margin-top: 34px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lp-close-cta .lp-cta { height: auto; padding: 15px 26px; border-radius: 12px; font-size: 15.5px; gap: 9px; }
.lp-close-cta .lp-cta img,
.lp-close-cta .lp-cta svg { width: 19px; height: 19px; }
.lp-close-cta > span { font: 400 12.5px 'Geist', system-ui; color: #9aa0aa; }

.lp-close-terr { margin: 84px -40px 0; position: relative; height: 280px; }
/* ⚠️ Named layers, NOT `.lp-close-terr > div`. That descendant selector also
   caught `.lp-close-pet` and outranked it (0,1,1 vs 0,1,0), so `inset: 0`
   stretched the pet's wrapper to the full 1425px band and its own
   `translateX(-50%)` then threw the sprite 712px off the left of the page. */
.lp-close-far,
.lp-close-mid,
.lp-close-gnd { position: absolute; inset: 0; pointer-events: none; }
.lp-close-terr svg { width: 100%; height: 100%; display: block; }
.lp-close-far { opacity: .05; }
.lp-close-mid { opacity: .11; }
.lp-close-pet {
    position: absolute;
    left: 50%;
    bottom: 38px;
    transform: translateX(-50%);
    pointer-events: none;
}
.lp-pet-shadow {
    position: absolute;
    left: 10px;
    bottom: 2px;
    width: 76px;
    height: 13px;
    background: radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
}


/* ── Day-one empty state (`lp-es-*`) ────────────────────────────────────────
   The one place the product's honesty is a visible, checkable claim rather than
   a promise. A brand-new server has no history, and what a dashboard does with
   that is a real difference: the common answer is a row of zeros wearing green
   upward-trend badges, which is a fabricated fact. NeoBot's Overview says what
   it knows, what starts recording today, and what unlocks when.

   ⚠️ The left column is deliberately GENERIC — "most bots" — and names nobody.
   Mocking a named competitor's UI on our own marketing page is a different
   thing legally and in tone, and the point lands without it.

   Reuses .lp-cmp / .lp-cmp-col / .lp-cap from the compare section; only the two
   panels are new. Literal values only — see the token warning at the top. */

.lp-es-panel {
    margin-top: 22px;
    border-radius: 16px;
    padding: 22px;
    background: linear-gradient(180deg, rgba(26, 28, 33, .86), rgba(18, 20, 24, .82));
    border: 1px solid rgba(255, 255, 255, .11);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .45),
                0 34px 66px -30px rgba(0, 0, 0, .75),
                inset 0 1px 0 rgba(255, 255, 255, .05);
}

/* Four stat tiles — the shape almost every bot dashboard opens with. */
.lp-es-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.lp-es-tile {
    padding: 13px 14px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .022);
    border: 1px solid rgba(255, 255, 255, .05);
}
/* ⚠️ A dedicated class, NOT `.lp-es-tile > span`. The badge below is also a
   direct-child span, and `.lp-es-tile > span` is (0,1,1) against `.lp-es-fake`'s
   (0,1,0) — so the descendant selector won and painted the green trend badge
   grey, and its `display: block` broke the inline-flex. Removing the collision
   beats out-specifying it. */
.lp-es-k {
    display: block;
    font: 400 11px 'Geist', system-ui;
    color: #6b7078;
}
.lp-es-tile > b {
    display: block;
    margin: 4px 0 6px;
    font: 500 26px/1 'Geist', system-ui;
    font-variant-numeric: tabular-nums;
    color: #8b9099;
    letter-spacing: -.02em;
}

/* The fabricated trend: green, upward and meaningless. Rendered accurately
   rather than caricatured — the exaggeration would let a reader dismiss it. */
.lp-es-fake {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 5px;
    background: rgba(52, 199, 123, .1);
    font: 600 10px 'Geist Mono', ui-monospace, monospace;
    color: #34c77b;
}
.lp-es-fake + i {
    font-style: normal;
    margin-left: 6px;
    font: 400 10px 'Geist', system-ui;
    color: #4e535c;
}
.lp-es-sync {
    margin: 16px 0 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font: 400 11.5px 'Geist', system-ui;
    color: #5b5f67;
}
.lp-es-sync s {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34c77b;
    flex: none;
}

/* NeoBot's answer: one honest number, and what it actually means. */
.lp-es-num {
    font: 500 clamp(40px, 5vw, 56px)/1 'Geist', system-ui;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.03em;
    color: #e8ebf2;
}
.lp-es-nodata {
    display: inline-block;
    margin-left: 12px;
    padding: 3px 9px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .05);
    font: 500 11px 'Geist Mono', ui-monospace, monospace;
    letter-spacing: .06em;
    color: #7b8088;
    vertical-align: 12px;
}
.lp-es-cap {
    margin: 8px 0 0;
    font: 700 9.5px 'Geist Mono', ui-monospace, monospace;
    letter-spacing: .14em;
    color: #5b5f67;
}
.lp-es-say {
    margin: 18px 0 0;
    font: 400 13.5px/1.62 'Geist', system-ui;
    color: #9aa0a9;
    text-wrap: pretty;
}
.lp-es-unlock {
    margin: 18px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .07);
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.lp-es-unlock li {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 400 12.5px 'Geist', system-ui;
    color: #8b9099;
}
.lp-es-unlock li svg { flex: none; color: #4e535c; }
.lp-es-unlock li em {
    margin-left: auto;
    font-style: normal;
    font: 500 9.5px 'Geist Mono', ui-monospace, monospace;
    letter-spacing: .1em;
    color: #5b5f67;
    white-space: nowrap;
}

/* ⚠️ No single-column collapse for `.lp-es-grid` here — the mobile pass (§12)
   keeps the 2×2 zero-grid on phones on purpose: four stacked full-width zero
   cards was ~1.5 screens of the same joke, and the joke lands once. */

/* ── §8 The roaming pet ─────────────────────────────────────────────────── */

/* Absolutely positioned inside `.lp-root`, driven entirely by transform from
   JS. `touch-action: none` so a drag never scrolls the page underneath it. */
.lp-pet {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 40;
    touch-action: none;
    will-change: transform;
    transform-origin: 0 0;
    cursor: grab;
}
.lp-pet.is-drag { cursor: grabbing; }
.lp-pet > span { position: relative; display: block; }
.lp-pet .lp-pet-shadow {
    bottom: -4px;
    pointer-events: none;
    transition: opacity .18s cubic-bezier(.4, 0, .2, 1);
}
.lp-pet.is-drag .lp-pet-shadow { opacity: .45; }
/* `.pet` is `pointer-events: none` by default in pet.css; the roamer is the one
   placement that is genuinely grabbable, so the HOST takes the pointer. */
.lp-pet .pet { display: block; }

/* ── §9 Footer ──────────────────────────────────────────────────────────── */

.lp-foot { position: relative; border-top: 1px solid rgba(255, 255, 255, .04); background: #070B18; }
.lp-foot-in { padding: 0 40px; }
.lp-foot-cols {
    max-width: 1264px;
    margin: 0 auto;
    padding: 44px 0 34px;
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
}
.lp-foot-brand { flex: 1 1 260px; min-width: 220px; }
.lp-foot-brand p { margin: 14px 0 0; max-width: 260px; font: 400 13px/1.55 'Geist', system-ui; color: #6b7078; }
.lp-foot-col { flex: 0 1 160px; display: flex; flex-direction: column; gap: 11px; }
.lp-foot-cap {
    font: 700 8.5px 'Geist Mono', ui-monospace, monospace;
    letter-spacing: .13em;
    color: #5b5f67;
}
.lp-foot-col a,
.lp-foot-col span:not(.lp-foot-cap) { font: 400 13px 'Geist', system-ui; color: #7b8088; }
.lp-foot-col a:hover { color: #c8cbd1; }
.lp-foot-legal { max-width: 1264px; margin: 0 auto; padding: 0 0 34px; border-top: 1px solid rgba(255, 255, 255, .05); }
.lp-foot-legal div { padding-top: 20px; font: 400 12px 'Geist', system-ui; color: #5b5f67; }

/* ── §10 Motion ─────────────────────────────────────────────────────────── */

@keyframes lpScene { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes lpSwap  { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes lpBob   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* Entrance. Every section rises once when it first reaches the fold — never on
   a repaint, and never a loop.

   ⚠️ Gated on `.lp-js`, which the inline head script adds and removes again if
   landing-v3.js never reports in. An `opacity: 0` that only JS can undo is a
   blank page whenever the script fails. */
.lp-js [data-rise] { opacity: 0; transform: translateY(22px); }
[data-rise].in {
    opacity: 1;
    transform: none;
    transition: opacity .6s cubic-bezier(.4, 0, .2, 1), transform .68s cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
    .lp-js [data-rise] { opacity: 1; transform: none; }
    .lp-cue-arrow { animation: none; }
    .lp-first-stage > *,
    .lp-panel { animation: none; }
    /* The parallax layers keep their JS transform but stop being driven — see
       landing-v3.js, which reads the same query. */
    .lp-float,
    .lp-msg,
    .lp-proof,
    .lp-first-preview { transition: none; }
}

/* ── §11 Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 1280px) {
    .lp-nav-in { padding: 0 28px; }
    .lp-row { padding: 0 28px; gap: 40px; }
}

/* The hero's two columns stop fitting side by side well before they wrap, so
   the breakpoint is set where the right column would start crushing rather
   than where flex-wrap happens to fire. */
@media (max-width: 1080px) {
    .lp-hero { min-height: 0; }
    .lp-scene { min-height: 0; }
    .lp-hero-in { position: static; }
    .lp-row {
        height: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 40px;
        padding: 0 28px 96px;
    }
    .lp-col-l { flex: none; min-width: 0; padding: 40px 0 0; max-width: 620px; }
    .lp-col-r { flex: none; padding-bottom: 0; min-height: 0; }
    .lp-artline { display: none; }
    .lp-dash,
    .lp-auto,
    .lp-first-preview,
    .lp-proof { align-self: stretch; width: 100%; }
    .lp-msg-slot { align-self: stretch; width: 100%; height: auto; margin-top: 20px; }
    .lp-proof { margin-top: 20px; width: 100%; }
    /* Parallax translate is meaningless once the cards are stacked. */
    .lp-float,
    .lp-msg,
    .lp-proof,
    .lp-first-preview { transform: none !important; }
    .lp-cue { display: none !important; }
    .lp-terr { height: 220px; }
}

/* The dashboard mock's two columns wrap on their own flex bases (520 + 460)
   once the panel drops under ~980px — i.e. around a 1060px viewport. The
   query has to match that, not sit at a rounder number: between the two the
   columns are stacked but `.lp-brw-cfg` still wears its `border-right`, which
   paints a vertical rule down the right edge of a full-width block. */
@media (max-width: 1060px) {
    .lp-brw-cfg,
    .lp-brw-pv { flex: 1 1 100%; min-width: 0; }
    .lp-brw-cfg { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, .06); }
    .lp-brw-arrow { display: none; }
}

@media (max-width: 900px) {
    .lp-nav-links { display: none; }
    .lp-sec { padding: 72px 24px 76px; }
    .lp-sec-servers { padding: 80px 24px 20px; }
    .lp-sec-system,
    .lp-sec-dashboard { padding: 84px 24px 84px; }
    .lp-sec-close { padding: 84px 24px 0; }
    .lp-close-terr { margin: 64px -24px 0; height: 220px; }
    .lp-foot-in { padding: 0 24px; }
    .lp-brw-cfg,
    .lp-brw-pv { padding: 26px 22px; }
    .lp-map-wires { display: none; }
    .lp-map-src { min-width: 0; width: 100%; }
    .lp-lanes { flex: 1 1 100%; margin-top: 26px; }
    .lp-mod-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .lp-mod-stage { min-height: 0; }
}

@media (max-width: 760px) {
    .lp-nav-in { padding: 0 18px; gap: 16px; }
    .lp-row { padding: 0 18px 72px; }
    .lp-sec { padding: 60px 18px 64px; }
    .lp-sec-servers { padding: 64px 18px 16px; }
    .lp-sec-system,
    .lp-sec-dashboard { padding: 68px 18px 68px; }
    .lp-sec-close { padding: 68px 18px 0; }
    .lp-close-terr { margin: 48px -18px 0; height: 170px; }
    .lp-foot-in { padding: 0 18px; }
    .lp-foot-cols { gap: 32px; }
    .lp-h1 { font-size: clamp(34px, 9vw, 46px); }
    .lp-h1-sm { font-size: clamp(30px, 8vw, 40px); }
    .lp-cta { width: 100%; }
    .lp-cta-wrap { align-items: stretch; }
    .lp-cta-note { justify-content: center; }
    .lp-back-actions > * { flex: 1 1 100%; justify-content: center; }
    /* The roamer needs terrain, a pointer and room to fall. A phone has none of
       the three — and a 96px sprite over a single-column layout is in the way
       rather than alive. The closing scene keeps its sleeping pet. */
    .lp-pet { display: none; }
    .lp-cmp { gap: 32px; }
    .lp-brw-cfg,
    .lp-brw-pv { padding: 22px 18px; }
    /* The browser chrome runs out of room before the panel does. `.lp-brw` has
       `overflow: hidden`, so left alone the URL and the server chip are simply
       cut off mid-word rather than wrapping — drop the chip and let the URL
       have the bar. */
    .lp-brw-bar { padding: 0 14px; gap: 10px; }
    .lp-brw-who { display: none; }
    .lp-brw-url { max-width: none; }
    .lp-np { flex-direction: column; }
    .lp-np-art { width: 100%; height: 120px; }
}

/* ── §12 Mobile pass (≤560px) ───────────────────────────────────────────────
   The phone recomposition from the "Landing Mobile Pass" design (390px master,
   checked at 320 and 430). Desktop and tablet above 560px are untouched — this
   block only recomposes the six problem areas for touch and trims the middle
   chapters. Spacing tiers: 32 inside · 72 between subsections · ~104 at
   chapter breaks.

   `.lp-m-only` marks phone-only markup (hidden here, revealed in the query);
   `.lp-d-only` is the inverse, for copy that reads wrong on a phone ("hover a
   branch", "edit on the left"). */

.lp-m-only { display: none; }
.lp-chips-more { display: none; }
.lp-badge-later { display: none; }

@media (max-width: 560px) {
    .lp-d-only { display: none; }
    .lp-m-only { display: block; }
    span.lp-m-only { display: inline; }
    a.lp-m-only { display: inline; }
    .lp-cut { display: none; }

    /* ── Hero — KEPT, tightened ─────────────────────────────────────────── */

    .lp-nav-in { gap: 12px; }
    .lp-h1 { font-size: clamp(34px, 10.5vw, 41px); line-height: 1.08; }
    /* ⚠️ Must be restated here. This block's `.lp-h1` rule is LATER in source
       at the same (0,1,0) specificity than `.lp-h1-sm` in the <=760 query, so
       without this the three signed-in headlines (which carry both classes)
       silently jumped from ~31px to ~41px — collapsing the deliberate
       marketing-vs-signed-in headline distinction by accident. */
    .lp-h1-sm { font-size: clamp(30px, 9vw, 36px); }
    .lp-lede { margin-top: 14px; font-size: 15.5px; }
    .lp-cta-wrap { margin-top: 24px; gap: 9px; }
    .lp-cta {
        height: 52px;
        padding: 0 26px;
        border-radius: 13px;
        font-size: 15.5px;
        gap: 10px;
    }
    .lp-cta img,
    .lp-cta svg { width: 20px; height: 20px; }
    /* Back to the design's left-hung note — the ≤760 rule centres it. */
    .lp-cta-note { justify-content: flex-start; gap: 10px; font-size: 12px; }
    /* ⚠️ nowrap is load-bearing: `.lp-row` is a COLUMN flex, and a wrapping
       column flex sizes its line to the widest item's fit-content — the
       rail's unwrapped pill row (468px) dragged BOTH hero columns past the
       390px viewport. A single-line column stretches to the container. */
    .lp-row { flex-wrap: nowrap; gap: 24px; padding-bottom: 44px; }
    /* Production's 40px is KEPT — the hero shell is not what the mobile pass is
       for, and generous top air is part of why it works. (This was briefly 32.) */

    /* The selector becomes ONE scrollable row — the next pill peeks past the
       right edge, the edge fades, and no "Moderation" is orphaned onto its own
       line. Hit areas extend past the 40px visual via ::before. */
    .lp-rail { margin: 30px -18px 0; }
    .lp-rail-list {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 2px 18px;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 86%, transparent);
        mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 86%, transparent);
    }
    .lp-rail-list::-webkit-scrollbar { display: none; }
    .lp-rail-list::after { content: ''; flex: none; width: 14px; }
    /* The dwell bar never paints on a phone (rotation is off), so the clip it
       needed can go — which is what lets the hit-area pseudo escape the box. */
    .lp-rail-btn { flex: none; height: 40px; overflow: visible; }
    .lp-rail-btn::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: -2px;
        bottom: -2px;
    }
    .lp-rail-btn span:not(.lp-rail-ico):not(.lp-rail-bar) { font-size: 12.5px; }
    .lp-rail-ico { width: 15px; height: 15px; }

    /* Selector → claim gap tightened (24 → 14). */
    .lp-claim-box { margin-top: 14px; min-height: 74px; }
    .lp-claim { font-size: 17px; letter-spacing: -.025em; }
    .lp-mods { margin-top: 7px; font-size: 12.5px; }

    /* Demos editorialized: the dashboard card collapses to a one-line config
       summary strip (browser chrome and skeleton rows cut), a short connector
       drops to the real Discord output, and the proof line becomes a compact
       outcome chip outside the frame. */
    .lp-dash { height: auto; overflow: visible; }
    .lp-dash-top,
    .lp-dash-row { display: none; }
    .lp-dash-body { padding: 13px 15px; gap: 0; }
    .lp-dash-head { padding: 0; gap: 9px; }
    .lp-ico-tile { order: 0; width: 24px; height: 24px; border-radius: 7px; }
    .lp-dash-area { display: none; }
    /* The design's one-line strip is `mark | Title · meta          [ON]`, so the
       toggle is pushed right and the two text runs truncate ahead of it.
       ⚠️ NEVER `flex: 1` here. `.lp-nav-spacer` in this same head is already
       `flex: 1 1 0%`, so two `flex:1` siblings split the free space 50/50 and
       size the title box to HALF what it needs — and `.lp-dash-title` is
       `white-space: nowrap` with no ellipsis, so the text does not truncate,
       it paints straight over the blue ON pill. Measured before this fix:
       "AI Assistant" overlapped the pill by 6px at 375px and 34px at 320px,
       and since rotation is off on phones that is the pinned first state every
       visitor sees. `flex: 0 1 auto` + `min-width: 0` + ellipsis instead. */
    .lp-dash-titles { order: 1; flex: 0 1 auto; min-width: 0; }
    .lp-dash-title { font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
    /* Secondary, so it yields first (shrink 5) and truncates rather than
       stealing the title's room — `white-space: nowrap` alone would floor its
       min-content at the whole string. */
    .lp-dash-meta {
        order: 2;
        flex: 0 5 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 400;
        color: #6b7078;
    }
    .lp-dash-meta::before { content: '· '; }
    .lp-dash-head .lp-nav-spacer { order: 3; }
    .lp-toggle { order: 4; }
    .lp-dash::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: -12px;
        width: 2px;
        height: 12px;
        margin-left: -1px;
        background: rgba(196, 186, 247, .22);
    }
    .lp-msg-slot { margin-top: 12px; width: 100%; }
    .lp-proof { margin-top: 12px; width: 100%; position: relative; }
    .lp-proof::before {
        content: '';
        position: absolute;
        left: 50%;
        top: -12px;
        width: 2px;
        height: 12px;
        margin-left: -1px;
        background: rgba(196, 186, 247, .22);
    }
    .lp-proof-in { padding: 11px 14px; gap: 10px; min-height: 0; border-radius: 12px; }
    .lp-proof-ico { width: 28px; height: 28px; border-radius: 8px; }
    .lp-proof-txt { gap: 3px; }
    .lp-proof-title { font-size: 12.5px; }
    .lp-proof-sub { font-size: 11px; }

    /* The music mock keeps its compact art tile instead of the ≤760 full-width
       stack — the design's 390 frame shows the card exactly as Discord draws
       it, art beside the text. */
    .lp-np { flex-direction: row; padding: 12px 13px; gap: 12px; }
    .lp-np-art { width: 58px; height: 58px; flex: none; }

    /* The scroll cue returns — hidden ≤1080 because its absolute pin has no
       hero bottom to pin to; on the phone it simply joins the flow.
       ⚠️ relative + z-index, not static: the terrain layers are positioned,
       and positioned boxes paint over in-flow content — a static cue sits
       UNDER the near-opaque ground path it now shares the bottom of the
       hero with. */
    .lp-cue {
        display: flex !important;
        position: relative;
        z-index: 8;
        left: auto;
        right: auto;
        bottom: auto;
        margin: 28px auto 20px;
    }

    /* ── 02 System map — REDESIGNED ─────────────────────────────────────────
       "Hover a branch" is gone. The story unfolds downward on its own:
       message → XP → coins → achievement, ~450ms apart, fired on scroll-in
       (landing-v3.js adds .is-seq1..4). Tap a branch to follow it; tap the
       message to replay. Connectors brightened (.075 → .28) so they read
       causal, not decorative.

       ⚠️ Every waiting state is gated on `.lp-js`, same as [data-rise] — an
       opacity: 0 only JS can undo is a blank diagram when the script fails. */

    .lp-map { margin-top: 30px; display: block; }
    .lp-map-src { display: block; width: 100%; min-width: 0; padding: 0; }
    .lp-map-msg { cursor: pointer; }
    .lp-js .lp-map-msg {
        opacity: 0;
        transform: translateY(8px);
        transition: opacity .4s cubic-bezier(.4, 0, .2, 1), transform .45s cubic-bezier(.4, 0, .2, 1);
    }
    .lp-js .lp-map.is-seq1 .lp-map-msg { opacity: 1; transform: none; }

    .lp-lanes {
        position: relative;
        margin-top: 12px;
        padding-left: 32px;
        min-width: 0;
        justify-content: flex-start;
        gap: 24px;
    }
    /* The spine. Stops short of the container's end so it ends at the last
       branch's connector rather than running past it. */
    .lp-lanes::before {
        content: '';
        position: absolute;
        left: 14px;
        top: -12px;
        bottom: 58px;
        width: 2px;
        border-radius: 999px;
        background: rgba(196, 186, 247, .28);
        transition: background-color .4s cubic-bezier(.4, 0, .2, 1);
    }
    .lp-js .lp-map:not(.is-seq2) .lp-lanes::before { background: rgba(196, 186, 247, .08); }

    .lp-lane { position: relative; cursor: pointer; }
    .lp-lane::before {
        content: '';
        position: absolute;
        left: -18px;
        top: 18px;
        width: 18px;
        height: 2px;
        border-radius: 999px;
        background: rgba(196, 186, 247, .28);
        transition: background-color .3s cubic-bezier(.4, 0, .2, 1);
    }
    .lp-js .lp-lane {
        opacity: .18;
        transform: translateY(7px);
        transition: opacity .4s cubic-bezier(.4, 0, .2, 1), transform .45s cubic-bezier(.4, 0, .2, 1);
    }
    .lp-js .lp-lane::before { background: rgba(196, 186, 247, .08); }
    .lp-js .lp-map.is-seq2 .lp-lane:nth-child(1),
    .lp-js .lp-map.is-seq3 .lp-lane:nth-child(2),
    .lp-js .lp-map.is-seq4 .lp-lane:nth-child(3) { opacity: 1; transform: none; }
    .lp-js .lp-map.is-seq2 .lp-lane:nth-child(1)::before,
    .lp-js .lp-map.is-seq3 .lp-lane:nth-child(2)::before,
    .lp-js .lp-map.is-seq4 .lp-lane:nth-child(3)::before { background: rgba(196, 186, 247, .28); }

    /* Tapped branch: the followed one lights, the others step back. */
    .lp-lane.is-on::before { background: rgba(167, 139, 250, .55) !important; }
    .lp-lane.is-on .lp-node {
        background: rgba(167, 139, 250, .10);
        border-color: rgba(167, 139, 250, .30);
    }
    .lp-js .lp-map.is-lane-0 .lp-lane:not(.is-on),
    .lp-js .lp-map.is-lane-1 .lp-lane:not(.is-on),
    .lp-js .lp-map.is-lane-2 .lp-lane:not(.is-on) { opacity: .45; }

    .lp-node { padding: 8px 11px; border-radius: 10px; gap: 8px; }
    .lp-lane-note { flex: 1 1 100%; min-width: 0; font-size: 12.5px; margin-top: -2px; }
    .lp-map-hint { margin-top: 20px; font: 400 11px 'Geist', system-ui; color: #515863; }
    .lp-map-foot { margin-top: 22px; padding-top: 18px; font-size: 13.5px; }

    /* ── 03 Six systems — REFINED ───────────────────────────────────────── */

    /* The category control becomes a snap carousel — no wrap, no "Music & Fun"
       orphan, right edge fades, next pill peeks. */
    .lp-cats {
        margin: 26px -18px 0;
        padding: 2px 18px;
        display: flex;
        flex-wrap: nowrap;
        gap: 5px;
        overflow-x: auto;
        border: none;
        border-radius: 0;
        background: transparent;
        max-width: none;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 86%, transparent);
        mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 86%, transparent);
    }
    .lp-cats::-webkit-scrollbar { display: none; }
    .lp-cats::after { content: ''; flex: none; width: 14px; }
    .lp-cat {
        position: relative;
        flex: none;
        scroll-snap-align: start;
        height: 36px;
        padding: 0 14px;
        background: rgba(255, 255, 255, .02);
        border-color: rgba(255, 255, 255, .07);
        color: #9aa0aa;
    }
    .lp-cat::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: -4px;
        bottom: -4px;
    }
    .lp-cat[aria-selected="true"] {
        background: rgba(255, 255, 255, .075);
        border-color: rgba(255, 255, 255, .17);
        color: #f2f3f5;
    }

    /* Head/body/card hold min-heights so category swaps never bounce. */
    .lp-mod-grid { margin-top: 24px; gap: 22px; }
    .lp-mod-copy { gap: 14px; }
    .lp-mod-h3 { font-size: 20px; line-height: 1.2; }
    .lp-mod-body { min-height: 66px; font-size: 13.5px; }
    .lp-mod-stage { min-height: 252px; }
    .lp-panel { padding: 17px; }

    /* INCLUDED is 3 chips + "+N more" (tap expands) — breadth without the
       catalogue. Chips wear pill clothes so the tap target reads as one. */
    .lp-chips { gap: 5px; }
    .lp-chips span {
        display: inline-flex;
        align-items: center;
        height: 26px;
        padding: 0 11px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .03);
        border: 1px solid rgba(255, 255, 255, .07);
        font: 500 11.5px 'Geist', system-ui;
        color: #9aa0aa;
        white-space: nowrap;
    }
    .lp-chips i { display: none; }
    .lp-chips:not(.is-open) span:nth-child(n+4) { display: none; }
    .lp-chips-more {
        position: relative;
        display: inline-flex;
        align-items: center;
        height: 26px;
        padding: 0 11px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .05);
        border: 1px solid rgba(255, 255, 255, .10);
        font: 600 11.5px 'Geist', system-ui;
        color: #c8cbd1;
        white-space: nowrap;
        cursor: pointer;
        transition: background-color .16s cubic-bezier(.4, 0, .2, 1);
    }
    .lp-chips-more::before {
        content: '';
        position: absolute;
        left: -2px;
        right: -2px;
        top: -9px;
        bottom: -9px;
    }
    .lp-chips-more:active { transform: scale(.96); }
    .lp-panel-more { font: 400 11.5px 'Geist', system-ui; color: #6b7078; }

    /* ── 04 Configure — REDESIGNED ──────────────────────────────────────────
       One card, CONFIGURE ⇄ PREVIEW tabs; browser chrome dropped. Both states
       share a min-height so the swap never bounces, and the swap is the
       155ms crossfade. "3 unsaved changes · Publish" stays as the footer. */

    .lp-brw { margin-top: 28px; border-radius: 16px; }
    .lp-brw-bar { display: none; }
    .lp-brw-tabs {
        display: flex;
        gap: 3px;
        margin: 14px 14px 0;
        padding: 4px;
        border-radius: 11px;
        background: rgba(0, 0, 0, .30);
        border: 1px solid rgba(255, 255, 255, .07);
    }
    .lp-brw-tab {
        position: relative;
        flex: 1;
        height: 32px;
        border-radius: 8px;
        background: transparent;
        border: 1px solid transparent;
        color: #6b7078;
        font: 700 10px 'Geist Mono', ui-monospace, monospace;
        letter-spacing: .12em;
        text-transform: uppercase;
        cursor: pointer;
        transition: background-color .18s cubic-bezier(.4, 0, .2, 1), color .18s cubic-bezier(.4, 0, .2, 1);
    }
    .lp-brw-tab::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: -6px;
        bottom: -6px;
    }
    .lp-brw-tab:active { transform: scale(.98); }
    .lp-brw-tab[aria-selected="true"] {
        background: rgba(255, 255, 255, .08);
        border-color: rgba(255, 255, 255, .14);
        color: #f2f3f5;
    }
    .lp-brw-cfg,
    .lp-brw-pv {
        padding: 18px 16px;
        border-right: none;
        border-bottom: none;
        min-height: 302px;
        box-sizing: border-box;
        animation: lpSwap .16s cubic-bezier(.4, 0, .2, 1) both;
    }
    #lpBrw:not(.is-pv) .lp-brw-pv { display: none; }
    #lpBrw.is-pv .lp-brw-cfg { display: none; }
    .lp-bullets { display: none; }
    .lp-pv-note {
        margin: 14px 0 0;
        font: 400 12.5px/1.55 'Geist', system-ui;
        color: #8b8f97;
        text-wrap: pretty;
    }
    .lp-savebar { height: 52px; padding: 0 16px; }
    .lp-savebar-btn:not(.is-primary) { display: none; }
    .lp-savebar-btn.is-primary { height: 32px; }

    /* ── 05 Day one — COMPRESSED ────────────────────────────────────────────
       Four full-screen zero-cards → one quiet 2×2 grid. The joke lands once.
       "Most bots" goes deliberately dimmer; the NeoBot card keeps the glass,
       the weight and the pitch. Whole comparison ~420px, not ~1.5 screens. */

    .lp-sec .lp-cmp { margin-top: 26px; gap: 14px; flex-direction: column; }
    .lp-cmp-col { min-width: 0; flex: none; width: 100%; }
    #dayone .lp-sec-lede { display: none; }
    #dayone .lp-cmp-note { display: none; }
    #dayone .lp-cmp-col:first-child .lp-es-panel {
        margin-top: 12px;
        padding: 15px;
        border-radius: 14px;
        background: rgba(255, 255, 255, .018);
        border-color: rgba(255, 255, 255, .055);
        box-shadow: none;
    }
    .lp-es-panel { margin-top: 12px; padding: 19px; }
    .lp-es-grid { gap: 7px; }
    .lp-es-tile { padding: 11px 12px; }
    .lp-es-k { font-size: 10.5px; }
    .lp-es-tile > b { margin: 5px 0 0; font-size: 21px; color: #5b5f67; }
    .lp-es-tile > b + .lp-es-fake { margin-top: 4px; }
    .lp-es-fake {
        padding: 0;
        background: transparent;
        font-weight: 400;
        color: #4a4f58;
    }
    .lp-es-fake + i { display: none; }
    .lp-es-sync { margin-top: 11px; font-size: 11px; }
    .lp-es-sync s { width: 6px; height: 6px; background: #6b7078; }
    .lp-es-num { font-size: 38px; color: #f2f3f5; }
    .lp-es-nodata {
        margin-left: 12px;
        padding: 2px 8px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, .09);
        font-size: 8.5px;
        font-weight: 700;
        letter-spacing: .1em;
        vertical-align: 7px;
    }
    .lp-es-cap { display: none; }
    .lp-es-say { margin-top: 13px; font-size: 13px; color: #b3b8c2; }
    /* ⚠️ RESTORED on phone, deliberately, against the design's compression.
       These four rows are the ONLY place the page says WHEN each capability
       arrives, and the phone `.lp-es-say` string drops that clause entirely —
       so hiding them left the NeoBot column (238px) SHORTER than the "most
       bots" column (278px) it argues against. Measured cost of restoring:
       +112px compacted, on a section that is still the most compressed on the
       page. It REPLACED the `.lp-es-track` row (markup deleted) rather than stacking
       with it — both drew a border-top, and "Tracking activity from today"
       is already the second clause of `.lp-es-say`. */
    .lp-es-unlock { display: flex; margin-top: 14px; padding-top: 13px; gap: 8px; }
    .lp-es-unlock li { gap: 9px; font-size: 12px; }
    .lp-es-unlock li svg { width: 12px; height: 12px; }
    /* `margin-left: auto` collapses once a label fills the row (the 320px case
       for "Ask NeoBot about your server"), so the gutter needs a floor. */
    .lp-es-unlock li em { padding-left: 10px; font-size: 9px; letter-spacing: .08em; }

    /* ── 06 Stack → one — COMPRESSED ────────────────────────────────────────
       The two columns become one moment: six scattered rows collapse into the
       One-dashboard card (~700px of repetition → one 322px stage). The stage
       is fixed-height so the collapse never shifts the page. Rows move by
       transform + opacity only; landing-v3.js fires it once on scroll-in and
       a tap replays it. Reduced motion renders the settled card immediately. */

    #compare .lp-cap,
    #compare .lp-stack,
    #compare .lp-one,
    #compare .lp-cmp-note { display: none; }
    #compare .lp-cmp { margin-top: 0; gap: 0; }
    .lp-mstack {
        position: relative;
        margin-top: 26px;
        height: 322px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .lp-mstack-row {
        position: absolute;
        left: var(--x);
        top: var(--y);
        width: min(236px, 76%);
        height: 38px;
        box-sizing: border-box;
        border-radius: 10px;
        background: rgba(255, 255, 255, .024);
        border: 1px solid rgba(255, 255, 255, .055);
        display: flex;
        align-items: center;
        padding: 0 13px;
        gap: 10px;
        transform: rotate(var(--r));
        transition: transform .55s cubic-bezier(.4, 0, .2, 1) var(--d),
                    opacity .45s cubic-bezier(.4, 0, .2, 1) var(--d);
    }
    .lp-mstack-row i { width: 6px; height: 6px; border-radius: 2px; background: rgba(255, 255, 255, .14); flex: none; }
    .lp-mstack-row b { font: 500 12px 'Geist', system-ui; color: #7b8088; white-space: nowrap; }
    .lp-mstack-row em { flex: 1; }
    .lp-mstack-row u { font: 400 10.5px 'Geist', system-ui; text-decoration: none; color: #4e535c; white-space: nowrap; }
    .lp-mstack.is-merged .lp-mstack-row {
        transform: translate(var(--mx), var(--my)) rotate(0deg) scale(.55);
        opacity: 0;
    }
    .lp-mstack-card {
        position: absolute;
        left: 0;
        right: 0;
        top: 22px;
        box-sizing: border-box;
        border-radius: 16px;
        padding: 20px;
        background: linear-gradient(180deg, rgba(26, 28, 33, .9), rgba(18, 20, 24, .88));
        border: 1px solid rgba(255, 255, 255, .11);
        box-shadow: 0 1px 2px rgba(0, 0, 0, .45),
                    0 30px 60px -26px rgba(0, 0, 0, .78),
                    inset 0 1px 0 rgba(255, 255, 255, .05);
        opacity: 0;
        transform: translateY(18px) scale(.97);
        transition: opacity .5s cubic-bezier(.4, 0, .2, 1) .35s,
                    transform .55s cubic-bezier(.4, 0, .2, 1) .35s;
        pointer-events: none;
    }
    .lp-mstack.is-merged .lp-mstack-card { opacity: 1; transform: none; }
    .lp-mstack-card-head {
        display: flex;
        align-items: center;
        gap: 10px;
        padding-bottom: 15px;
        border-bottom: 1px solid rgba(255, 255, 255, .07);
    }
    .lp-mstack-card-head img { height: 16px; width: auto; display: block; }
    .lp-mstack-card-head span { font: 600 14px 'Geist', system-ui; letter-spacing: -.02em; color: #f2f3f5; }
    .lp-mstack-grid { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    .lp-mstack-grid span {
        padding: 8px 10px;
        border-radius: 8px;
        background: rgba(255, 255, 255, .028);
        font: 500 11.5px 'Geist', system-ui;
        color: #9aa0aa;
    }
    .lp-mstack-cap {
        margin-top: 10px;
        min-height: 38px;
        font: 400 12.5px/1.55 'Geist', system-ui;
        color: #6b7078;
        text-wrap: pretty;
    }
    #compare .lp-one-foot { margin-top: 24px; padding-top: 18px; }

    /* ── 07 Pricing — REFINED ───────────────────────────────────────────────
       Vertical stacking kept. Free keeps the big card and the only blue CTA;
       the paid cards tighten to name + badge + price on one row, with the
       NOW / COMING LATER badges making the future-pricing state impossible to
       misread without the paragraph. */

    .lp-plans { margin-top: 26px; gap: 12px; }
    .lp-plan { flex: none; width: 100%; min-width: 0; box-sizing: border-box; }
    .lp-plan-now { padding: 22px; }
    .lp-plan-now .lp-plan-name { font-size: 15px; }
    .lp-plan-now .lp-plan-price { margin-top: 14px; font-size: 36px; }
    .lp-plan-btn { margin-top: 18px; }
    .lp-plan:not(.lp-plan-now) {
        padding: 22px 19px;
        border-radius: 14px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 10px;
    }
    .lp-plan:not(.lp-plan-now) .lp-plan-name {
        grid-column: 1;
        grid-row: 1;
        font-size: 14px;
        flex-wrap: wrap;
        row-gap: 6px;
    }
    .lp-plan:not(.lp-plan-now) .lp-plan-price {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        margin: 0;
        font-size: 21px;
        gap: 4px;
    }
    .lp-plan:not(.lp-plan-now) .lp-plan-price small { font-size: 11.5px; }
    .lp-plan:not(.lp-plan-now) .lp-plan-note {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-top: 9px;
        font-size: 12.5px;
        line-height: 1.5;
    }
    /* Annual price contrast raised a step (design rev 2). */
    .lp-plan:not(.lp-plan-now) .lp-plan-year {
        grid-column: 1 / -1;
        grid-row: 3;
        margin-top: 3px;
        font-size: 12px;
        color: #8b8f97;
    }
    .lp-badge-later {
        display: inline-flex;
        align-items: center;
        height: 18px;
        padding: 0 7px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .04);
        border: 1px solid rgba(255, 255, 255, .09);
        font: 700 8.5px 'Geist Mono', ui-monospace, monospace;
        letter-spacing: .1em;
        color: #8b8f97;
        white-space: nowrap;
    }

    /* ── 08/09 Close + footer — KEPT, recomposed ────────────────────────── */

    .lp-close-in .lp-h2 { font-size: 29px; }
    .lp-close-cta { margin-top: 26px; }
    .lp-close-cta .lp-cta { padding: 14px 24px; font-size: 15px; }

    .lp-foot-cols {
        padding: 32px 0 26px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 26px 24px;
    }
    .lp-foot-brand { grid-column: 1 / -1; min-width: 0; }
    .lp-foot-brand p { margin-top: 12px; font-size: 12.5px; }
    .lp-foot-col { min-width: 0; gap: 10px; }
    .lp-foot-col a,
    .lp-foot-col span:not(.lp-foot-cap) { font-size: 12.5px; }
    /* LEGAL collapses into the inline row below. */
    .lp-foot-col:last-child { display: none; }
    .lp-foot-legal {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 14px;
        padding: 16px 0 26px;
    }
    .lp-foot-legal a { font: 400 11.5px 'Geist', system-ui; color: #5b5f67; }
    .lp-foot-legal a:hover { color: #c8cbd1; }
    .lp-foot-legal .lp-nav-spacer { display: block; flex: 1; }
    .lp-foot-legal div { padding-top: 0; font-size: 11.5px; }
}

/* ── Hero → body junction (phone) ────────────────────────────────────
   ⚠️ The hero's last painted row is NOT its gradient — it is the ground SVG's
   near-opaque `rgba(5,7,14,.94)` slab over `#1b2246 @ .62` over `#0B1030`,
   which composites to ~rgb(6,8,17) and is clipped dead straight by
   `.lp-hero { overflow: hidden }`. `.lp-seam` then opened at
   `rgba(11,16,48,.92)` over `#070B18` = ~rgb(11,16,46) — NINE luminance units
   LIGHTER. So the junction stepped UP in brightness at a straight line and the
   silhouette read as a terminated black band rather than as ground. The seam's
   own comment says it blends "the hero's #0B1030 and the body's #070B18",
   which is true only where the terrain does not paint — and at <=1080 the
   terrain is 220px tall and sits exactly there.
   Starting the seam at the slab's OWN colour makes the last hero pixel and the
   first body pixel identical, then lifts to the body over 180px. The mountain
   edge itself (path 1 → path 2) is untouched.
   ⚠️ rgb(6,8,17) is DERIVED from those three layers — change any one of them
   and this stop must be recomputed or the hard edge comes back. */
@media (max-width: 560px) {
    .lp-seam {
        height: 180px;
        background: linear-gradient(180deg,
            rgb(6, 8, 17) 0%,
            rgba(6, 9, 19, .82) 26%,
            rgba(7, 11, 24, .42) 58%,
            rgba(7, 11, 24, .12) 82%,
            rgba(7, 11, 24, 0) 100%);
    }
}

/* Motion honesty for the phone recomposition. */
@media (prefers-reduced-motion: reduce) {
    .lp-map-msg,
    .lp-lane,
    .lp-lanes::before,
    .lp-lane::before { transition: none !important; }
    .lp-brw-cfg,
    .lp-brw-pv { animation: none; }
    .lp-mstack-row,
    .lp-mstack-card { transition: none !important; }
}