/* ═══════════════════════════════════════════════════════════════════════════
   Landing page — depth and motion
   ═══════════════════════════════════════════════════════════════════════════
   Loaded by core/index.html only. The static design lives in styles.css under
   the .lp-* rules; this file adds the third dimension (perspective, layered
   depth) and the fourth (time: drift, reveal, scroll).

   Rules this file keeps, from Emil Kowalski's design-engineering notes:
   * Only transform and opacity animate. Nothing here animates layout.
   * Custom curves, never the CSS defaults, and never ease-in.
   * Entrances start from scale(.9x) + opacity, never from nothing.
   * Hover effects exist only where a hover exists: (hover:hover)+(pointer:fine).
   * Pressables answer the press: scale(.97) on :active.
   * prefers-reduced-motion keeps the page whole and still: fades stay, motion goes.
   * Anything hidden before a reveal is hidden only under .lp-motion, which the
     script adds — so with JavaScript off, nothing is ever left invisible.
   ═══════════════════════════════════════════════════════════════════════════ */

.lp-page {
    --lp-ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
    --lp-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --lp-ease-soft:   cubic-bezier(0.32, 0.72, 0, 1);
}

/* ── Hero: drifting light ─────────────────────────────────────────────────── */
.lp-aurora {
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 140%;
    pointer-events: none;
    z-index: 0;
}
.lp-aurora span {
    position: absolute;
    width: 56vmax;
    height: 56vmax;
    border-radius: 50%;
    opacity: .55;
    will-change: transform;
}
.lp-aurora span:nth-child(1) {
    top: -18vmax; left: -8vmax;
    background: radial-gradient(closest-side, rgba(var(--lp-accent-rgb), .22), transparent 70%);
    animation: lp-drift-a 22s var(--lp-ease-in-out) infinite alternate;
}
.lp-aurora span:nth-child(2) {
    top: -10vmax; right: -14vmax;
    background: radial-gradient(closest-side, rgba(99, 132, 255, .16), transparent 70%);
    animation: lp-drift-b 27s var(--lp-ease-in-out) infinite alternate;
}
.lp-aurora span:nth-child(3) {
    top: 18vmax; left: 30%;
    background: radial-gradient(closest-side, rgba(167, 110, 255, .11), transparent 70%);
    animation: lp-drift-c 31s var(--lp-ease-in-out) infinite alternate;
}
@keyframes lp-drift-a { to { transform: translate3d(14vmax, 8vmax, 0) scale(1.15); } }
@keyframes lp-drift-b { to { transform: translate3d(-12vmax, 10vmax, 0) scale(.9); } }
@keyframes lp-drift-c { to { transform: translate3d(-16vmax, -6vmax, 0) scale(1.2); } }

.lp-hero-grid { z-index: 0; }
.lp-hero-inner { z-index: 1; }

/* ── Hero: the moving floor ───────────────────────────────────────────────── */
.lp-floor {
    position: absolute;
    left: -25%;
    right: -25%;
    bottom: -2px;
    height: 46%;
    pointer-events: none;
    z-index: 0;
    perspective: 420px;
    perspective-origin: 50% 0%;
    /* Fades out well before the floor's far edge, so its horizon never shows as
       a hard line — and at the sides, so it reads as a floor, not a band. */
    -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 70%),
                        linear-gradient(to right, transparent, #000 25%, #000 75%, transparent);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to top, #000 0%, transparent 70%),
                        linear-gradient(to right, transparent, #000 25%, #000 75%, transparent);
            mask-composite: intersect;
}
.lp-floor i {
    position: absolute;
    inset: -48px 0 0 0;
    transform-origin: 50% 0%;
    transform: rotateX(62deg);
    background-image:
        linear-gradient(to right,  rgba(var(--lp-accent-rgb), .20) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(var(--lp-accent-rgb), .20) 1px, transparent 1px);
    background-size: 48px 48px;
    animation: lp-floor-run 3.2s linear infinite;
}
/* One cell per loop, so the repeat is invisible. Constant motion is linear. */
@keyframes lp-floor-run { to { transform: rotateX(62deg) translate3d(0, 48px, 0); } }

/* ── Hero: headline words resolve ─────────────────────────────────────────── */
.lp-w {
    display: inline-block;
    opacity: 0;
    transform: translate3d(0, .38em, 0) scale(.96);
    filter: blur(8px);
    animation: lp-word .9s var(--lp-ease-out) forwards;
    animation-delay: calc(120ms + var(--i, 0) * 70ms);
}
@keyframes lp-word { to { opacity: 1; transform: none; filter: blur(0); } }

.lp-hero .lp-kicker,
.lp-hero .lp-deck--hero,
.lp-hero .lp-actions,
.lp-hero .lp-terms {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    animation: lp-up .8s var(--lp-ease-out) forwards;
}
.lp-hero .lp-kicker     { animation-delay: 40ms; }
.lp-hero .lp-deck--hero { animation-delay: 560ms; }
.lp-hero .lp-actions    { animation-delay: 660ms; }
.lp-hero .lp-terms      { animation-delay: 760ms; }
@keyframes lp-up { to { opacity: 1; transform: none; } }

/* ── Hero: the 3D stage ───────────────────────────────────────────────────── */
.lp-stage {
    position: relative;
    margin: 0;
    perspective: 1600px;
    perspective-origin: 50% 40%;
    padding: 34px 0 110px;
}
.lp-stage-enter {
    transform-style: preserve-3d;
    opacity: 0;
    transform: rotateX(26deg) rotateY(-30deg) translate3d(0, 60px, -120px) scale(.92);
    animation: lp-stage-in 1.5s var(--lp-ease-out) 250ms forwards;
}
@keyframes lp-stage-in { to { opacity: 1; transform: none; } }

/* The resting pose — a board seen from slightly left and above. The script
   replaces this inline with the pointer-driven pose, sprung toward the cursor. */
.lp-stage-tilt {
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(9deg) rotateY(-13deg);
    will-change: transform;
}
.lp-stage .lp-board {
    position: relative;
    transform: translateZ(0);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .06) inset,
        0 40px 80px -20px rgba(0, 0, 0, .7),
        0 18px 36px -18px rgba(0, 0, 0, .6);
}
.lp-board-glow {
    position: absolute;
    inset: 12% 8% -6% 8%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(var(--lp-accent-rgb), .35), transparent 75%);
    transform: translateZ(-90px) scale(1.2);
    opacity: .6;
    pointer-events: none;
    animation: lp-breathe 6s var(--lp-ease-in-out) infinite alternate;
}
@keyframes lp-breathe { to { opacity: .95; transform: translateZ(-90px) scale(1.3); } }

/* Floating cards: depth on the outer element (translateZ), idle drift on the
   inner one — two elements, so the drift never overwrites the depth. */
.lp-float {
    position: absolute;
    z-index: 2;
    pointer-events: none;
}
.lp-float-in {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--lp-rule-2, rgba(255, 255, 255, .12));
    border-radius: 12px;
    background: color-mix(in srgb, var(--lp-surface) 96%, transparent);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .65), 0 1px 0 rgba(255, 255, 255, .06) inset;
    font-family: var(--lp-mono);
    white-space: nowrap;
    opacity: 0;
    animation:
        lp-float-in .9s var(--lp-ease-out) forwards,
        lp-bob 7s var(--lp-ease-in-out) infinite alternate;
}
.lp-float--toast { top: -6px;  right: -18px; transform: translateZ(120px); }
/* Hangs below the board's corner rather than over a deal: it overlaps the
   board's edge (that is the depth), never a card someone is reading. */
.lp-float--kpi   { bottom: -104px; left: -12px; transform: translateZ(170px); }
.lp-float--ring  { bottom: -40px; right: 36px; transform: translateZ(80px); }
.lp-float--toast .lp-float-in { animation-delay: 1.35s, 2.2s; }
.lp-float--kpi   .lp-float-in { animation-delay: 1.5s, 2.3s; animation-duration: .9s, 8.5s; }
.lp-float--ring  .lp-float-in { animation-delay: 1.65s, 2.4s; animation-duration: .9s, 6.2s; }
@keyframes lp-float-in {
    from { opacity: 0; transform: translate3d(0, 16px, 0) scale(.94); }
    to   { opacity: 1; transform: none; }
}
@keyframes lp-bob {
    from { translate: 0 0; }
    to   { translate: 0 -10px; }
}

.lp-float-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--lp-accent);
    box-shadow: 0 0 0 0 rgba(var(--lp-accent-rgb), .6);
    animation: lp-ping 2.4s var(--lp-ease-out) infinite;
}
@keyframes lp-ping { 70%, 100% { box-shadow: 0 0 0 9px rgba(var(--lp-accent-rgb), 0); } }
.lp-float-body { display: flex; flex-direction: column; line-height: 1.25; }
.lp-float-body b { font-weight: 600; font-size: .78rem; color: var(--lp-ink); }
.lp-float-body em { font-style: normal; font-size: .66rem; color: var(--lp-faint); }

.lp-float--kpi .lp-float-in { flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 16px; }
.lp-float-key { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lp-faint); }
.lp-float-val { font-size: 1.35rem; font-weight: 600; color: var(--lp-ink); font-family: var(--lp-display); }
.lp-float-val small { margin-left: 6px; font-size: .7rem; color: var(--status-success, #3fb950); font-family: var(--lp-mono); }
.lp-spark { width: 132px; height: 30px; overflow: visible; }
.lp-spark path {
    fill: none;
    stroke: var(--lp-accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 160;
    stroke-dashoffset: 160;
    animation: lp-draw 1.4s var(--lp-ease-out) 1.9s forwards;
}
@keyframes lp-draw { to { stroke-dashoffset: 0; } }

.lp-ring { width: 36px; height: 36px; transform: rotate(-90deg); }
.lp-ring circle { fill: none; stroke-width: 5; }
.lp-ring-track { stroke: rgba(255, 255, 255, .08); }
.lp-ring-fill {
    stroke: var(--lp-accent);
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: lp-ring 1.6s var(--lp-ease-out) 2s forwards;
}
@keyframes lp-ring { to { stroke-dashoffset: 28; } }

/* ── Pressables answer the press ──────────────────────────────────────────── */
/* The app's universal hover "pop" scales buttons up under the cursor. On a
   button whose edge sits under the pointer that is a feedback loop — grow, lose
   the hover, shrink, regain it — which read as violent flicker. The landing
   page answers the press instead, and holds still on hover. */
.lp-page {
    --omniroq-hover-pop-scale: 1;
    --omniroq-hover-glow-filter: none;
}
.lp-page .lp-btn {
    transition: transform 160ms var(--lp-ease-out), background-color .18s ease,
                border-color .18s ease, color .18s ease;
}
.lp-page .lp-btn:hover { transform: none; filter: none; }
.lp-page .lp-btn:active { transform: scale(.97); }

/* ── Scroll reveal (armed by the script: .lp-motion + data-rv) ───────────── */
.lp-motion [data-rv] {
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(.98);
}
.lp-motion [data-rv].is-in {
    opacity: 1;
    transform: none;
    transition:
        opacity .7s var(--lp-ease-out) var(--rv-d, 0ms),
        transform .95s var(--lp-ease-out) var(--rv-d, 0ms);
}
/* Once revealed, the element's transform belongs to the hover tilt, which must
   answer in a fraction of the reveal's time. */
.lp-motion [data-rv].is-done {
    transition: transform 220ms var(--lp-ease-out), background-color .18s ease;
}

/* ── Cells: spotlight and tilt under a real cursor ────────────────────────── */
.lp-page .lp-cell,
.lp-page .lp-pack,
.lp-page .lp-price-fig {
    position: relative;
    isolation: isolate;
}
.lp-page .lp-cell::before,
.lp-page .lp-pack::before,
.lp-page .lp-price-fig::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%),
                                rgba(var(--lp-accent-rgb), .13), transparent 60%);
    transition: opacity .3s ease;
}
@media (hover: hover) and (pointer: fine) {
    .lp-page .lp-cell:hover::before,
    .lp-page .lp-pack:hover::before,
    .lp-page .lp-price-fig:hover::before { opacity: 1; }
    .lp-page .lp-glyph { transition: transform 260ms var(--lp-ease-out); }
    .lp-page .lp-cell:hover .lp-glyph,
    .lp-page .lp-pack:hover .lp-glyph { transform: translate3d(0, -3px, 0) scale(1.08); }
}

/* ── Screenshots: straighten out of 3D as they arrive ─────────────────────── */
.lp-showcase-row > [class*="col-"] { perspective: 1400px; }
.lp-motion .lp-figure {
    transform-origin: 50% 100%;
    will-change: transform;
}

/* ── Stats ────────────────────────────────────────────────────────────────── */
.lp-spec-val { font-variant-numeric: tabular-nums; }

/* ── Ticker ───────────────────────────────────────────────────────────────── */
.lp-marquee {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.lp-marquee-track {
    display: flex;
    flex: none;
    gap: 8px 36px;
    margin: 0;
    padding-right: 36px;
    animation: lp-marquee 38s linear infinite;
}
.lp-marquee-track span { white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
    .lp-marquee:hover .lp-marquee-track { animation-play-state: paused; }
}
@keyframes lp-marquee { to { transform: translate3d(-100%, 0, 0); } }

/* ── The travelling edge ──────────────────────────────────────────────────── */
/* A beam of the accent runs round an element's edge: a rotating conic gradient
   behind it (::after), the element's own surface laid over it one pixel in
   (::before), so only the rim lights. Rotation is a transform, so it costs a
   composite, not a repaint. Each use sets its own --edge-dur / --edge-delay,
   so the beams never move in step. */
.lp-page .lp-edge {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    --edge-bg: var(--lp-bg);
}
.lp-page .lp-edge::after {
    content: "";
    position: absolute;
    z-index: -2;
    left: 50%;
    top: 50%;
    width: 260%;
    aspect-ratio: 1;
    background: conic-gradient(from 0deg, transparent 0 74%,
                rgba(var(--lp-accent-rgb), .15) 80%,
                rgba(var(--lp-accent-rgb), .9) 89%, transparent 95%);
    transform: translate(-50%, -50%) rotate(0deg);
    animation: lp-spin var(--edge-dur, 8s) linear var(--edge-delay, 0s) infinite;
    pointer-events: none;
}
.lp-page .lp-edge::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 1px;
    border-radius: inherit;
    opacity: 1 !important;
    background: var(--edge-bg);
    pointer-events: none;
}
@keyframes lp-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Surfaces each edge lights round. */
.lp-page .lp-board.lp-edge   { --edge-bg: var(--lp-surface); background: transparent; }
.lp-page .lp-cell.lp-edge    { --edge-bg: var(--lp-cell-bg); }
.lp-page .lp-panel.lp-edge   { --edge-bg: var(--lp-bg); }
.lp-page .lp-price-fig.lp-edge { --edge-bg: var(--lp-bg); }
/* The bento lead sits on a lifted surface, so its rim reads against the grid. */
.lp-page .lp-bento > .lp-cell.lp-edge {
    --edge-bg: color-mix(in srgb, var(--lp-surface) 70%, var(--lp-bg));
}

/* ── Close: the modules in orbit ──────────────────────────────────────────── */
.lp-close { position: relative; overflow: hidden; }
.lp-close .container { position: relative; z-index: 1; }
.lp-orbit {
    position: absolute;
    top: 50%;
    right: clamp(-120px, 4vw, 80px);
    width: 460px;
    height: 460px;
    margin-top: -230px;
    perspective: 900px;
    pointer-events: none;
    opacity: .9;
}
.lp-orbit-ring {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform: rotateX(68deg) rotateZ(0deg);
    animation: lp-orbit 36s linear infinite;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(var(--lp-accent-rgb), .22);
}
@keyframes lp-orbit {
    from { transform: rotateX(68deg) rotateZ(0deg); }
    to   { transform: rotateX(68deg) rotateZ(360deg); }
}
.lp-orbit-ring > span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
    transform-style: preserve-3d;
    transform: rotateZ(var(--a)) translateX(210px) rotateZ(calc(var(--a) * -1));
}
/* Counter-spin at the ring's speed, then stand up to face the viewer: the
   icons travel the ellipse but never turn away from you. */
.lp-orbit-ring > span > i {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 14px;
    border: 1px solid rgba(var(--lp-accent-rgb), .3);
    background: color-mix(in srgb, var(--lp-surface) 90%, transparent);
    color: var(--lp-accent);
    font-size: 1.15rem;
    box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .7);
    transform: rotateZ(0deg) rotateX(-68deg);
    animation: lp-counter 36s linear infinite;
}
@keyframes lp-counter {
    from { transform: rotateZ(0deg) rotateX(-68deg); }
    to   { transform: rotateZ(-360deg) rotateX(-68deg); }
}
.lp-orbit-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(var(--lp-accent-rgb), .38), transparent 72%);
    animation: lp-core 5s var(--lp-ease-in-out) infinite alternate;
}
.lp-orbit-core span {
    position: absolute;
    inset: 52px;
    border-radius: 50%;
    background: var(--lp-accent);
    box-shadow: 0 0 40px 8px rgba(var(--lp-accent-rgb), .55);
}
@keyframes lp-core { to { transform: scale(1.18); } }

/* ── Light theme ──────────────────────────────────────────────────────────── */
[data-bs-theme="light"] .lp-aurora span { opacity: .8; }
[data-bs-theme="light"] .lp-floor i {
    background-image:
        linear-gradient(to right,  rgba(var(--lp-accent-rgb), .30) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(var(--lp-accent-rgb), .30) 1px, transparent 1px);
}
[data-bs-theme="light"] .lp-float-in,
[data-bs-theme="light"] .lp-orbit-ring > span > i {
    box-shadow: 0 20px 40px -18px rgba(29, 39, 51, .35);
}
[data-bs-theme="light"] .lp-stage .lp-board {
    box-shadow: 0 40px 80px -24px rgba(29, 39, 51, .35), 0 16px 32px -18px rgba(29, 39, 51, .25);
}
[data-bs-theme="light"] .lp-ring-track { stroke: rgba(29, 39, 51, .1); }

/* ── Small screens ────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    /* Narrow screens: the cards sit above and below the board, not over it. */
    .lp-stage { padding: 56px 0 104px; }
    .lp-stage-tilt { transform: rotateX(8deg) rotateY(-6deg); }
    .lp-float--toast { top: -46px; right: 6px; }
    .lp-float--kpi   { bottom: -92px; left: 6px; }
    .lp-float--ring  { right: 4px; }
    .lp-orbit { opacity: .35; right: -180px; }
}
@media (max-width: 575.98px) {
    .lp-float--ring { display: none; }
    .lp-float-in { padding: 8px 11px; }
    .lp-spark { width: 96px; }
}

/* ── Reduced motion: the page, whole and still ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .lp-aurora span,
    .lp-floor i,
    .lp-board-glow,
    .lp-float-dot,
    .lp-marquee-track,
    .lp-edge::after,
    .lp-orbit-ring,
    .lp-orbit-ring > span > i,
    .lp-orbit-core { animation: none; }

    .lp-w,
    .lp-hero .lp-kicker,
    .lp-hero .lp-deck--hero,
    .lp-hero .lp-actions,
    .lp-hero .lp-terms {
        filter: none;
        transform: none;
        animation: lp-fade .4s ease forwards;
        animation-delay: 0ms;
    }
    .lp-stage-enter { transform: none; animation: lp-fade .4s ease forwards; }
    .lp-float-in { animation: lp-fade .4s ease .2s forwards; }
    .lp-spark path, .lp-ring-fill { animation: none; stroke-dashoffset: 0; }
    .lp-ring-fill { stroke-dashoffset: 28; }
    .lp-marquee { flex-wrap: wrap; -webkit-mask-image: none; mask-image: none; }
    .lp-marquee-track[aria-hidden="true"] { display: none; }
    .lp-marquee-track { flex-wrap: wrap; }
    .lp-motion [data-rv] { transform: none; }
    .lp-motion [data-rv].is-in { transition: opacity .4s ease; }
    .lp-page .lp-btn:active { transform: none; }
    .lp-orbit-ring > span > i { transform: rotateX(-68deg); }
}
@keyframes lp-fade { to { opacity: 1; } }

/* ═══════════════════════════════════════════════════════════════════════════
   Craft pass — Impeccable's craft floor, the Redesign and Taste audits, and
   Vercel's interface guidelines, applied to the existing world (dark, mint,
   Sora / Inter): refinement, not a new identity.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The browser's own surfaces carry the design too. */
.lp-body { color-scheme: dark; scrollbar-color: rgba(var(--lp-accent-rgb), .45) #0d1117; }
.lp-body ::selection { background: rgba(var(--lp-accent-rgb), .35); color: #fff; }
.lp-page a { text-underline-offset: .2em; }
html:has(.lp-body) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(.lp-body) { scroll-behavior: auto; } }
.lp-page [id] { scroll-margin-top: 84px; }

/* Headings balance; prose stays readable. */
.lp-page .lp-h1, .lp-page .lp-h2, .lp-page .lp-h3, .lp-page .lp-close-title { text-wrap: balance; }
.lp-page .lp-deck, .lp-page .lp-cell-text, .lp-page .lp-faq-grid dd { text-wrap: pretty; }

/* Section heads: no eyebrow column, so the heading takes the full measure. */
.lp-page .lp-head { grid-template-columns: minmax(0, 1fr); }
.lp-page .lp-head-body { max-width: 62ch; }

/* Monospace belongs to data — prices, amounts, step numbers — not to labels. */
.lp-page .lp-terms,
.lp-page .lp-int-key,
.lp-page .lp-panel-key,
.lp-page .lp-panel-note,
.lp-page .lp-tagline,
.lp-page .lp-figure-cap,
.lp-page .lp-checks {
    font-family: var(--lp-body) !important;
    letter-spacing: .01em;
    text-transform: none;
}
.lp-page .lp-int-key { font-weight: 600; color: var(--lp-ink); font-size: .9rem; }
.lp-page .lp-panel-key { font-weight: 600; font-size: .95rem; }
.lp-page .lp-terms, .lp-page .lp-tagline, .lp-page .lp-figure-cap { font-size: .82rem; }

/* Hero secondary action: a link, not a second outlined button. */
.lp-textlink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 4px;
    color: var(--lp-ink);
    font-weight: 500;
    text-decoration: none;
    transition: color .18s ease;
}
.lp-textlink span { display: inline-block; transition: transform 220ms var(--lp-ease-out); }
@media (hover: hover) and (pointer: fine) {
    .lp-textlink:hover { color: var(--lp-accent); }
    .lp-textlink:hover span { transform: translate3d(4px, 0, 0); }
}
.lp-actions { align-items: center; }

/* Stats as a sentence, not a row of big numbers with small labels. */
.lp-page .lp-ledger {
    margin: 0;
    padding: 34px 0;
    max-width: 58ch;
    font-family: var(--lp-display) !important;
    font-size: clamp(1.15rem, 1.9vw, 1.5rem);
    line-height: 1.45;
    letter-spacing: -.01em;
    color: var(--lp-muted);
    text-wrap: balance;
}
.lp-ledger b { font-weight: 600; color: var(--lp-ink); font-variant-numeric: tabular-nums; }
.lp-ledger .lp-ledger-price { color: var(--lp-accent); }

/* Base platform: an uneven bento — the first system leads, the last spans. */
.lp-bento { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.lp-bento > :nth-child(1) { grid-column: span 4; }
.lp-bento > :nth-child(2) { grid-column: span 2; }
.lp-bento > :nth-child(3),
.lp-bento > :nth-child(4),
.lp-bento > :nth-child(5) { grid-column: span 2; }
.lp-bento > :nth-child(6) { grid-column: span 6; }
.lp-bento > :nth-child(1) { padding: 40px 36px; }
.lp-page .lp-bento > :nth-child(1) .lp-cell-title { font-size: 1.45rem; letter-spacing: -.02em; }
.lp-bento > :nth-child(1) .lp-cell-text { font-size: 1.02rem; max-width: 52ch; }
.lp-bento > :nth-child(1) .lp-glyph { font-size: 1.5rem; }
.lp-bento > :nth-child(6) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 22px;
}
.lp-bento > :nth-child(6) .lp-glyph { margin: 0; }
.lp-bento > :nth-child(6) .lp-cell-title,
.lp-bento > :nth-child(6) .lp-cell-text { grid-column: 2; margin: 0; }
.lp-bento > :nth-child(6) .lp-fields { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
@media (max-width: 991.98px) {
    .lp-bento { grid-template-columns: minmax(0, 1fr) !important; }
    .lp-bento > * { grid-column: auto !important; }
    .lp-bento > :nth-child(6) { display: block; }
}

/* Hero event cards. */
.lp-float-icon { font-size: 1.05rem; color: var(--lp-accent); }
.lp-float-icon--ok { color: var(--status-success, #3fb950); }
.lp-float--kpi .lp-float-in { flex-direction: row; align-items: center; gap: 10px; padding: 10px 14px; }

/* Glass is not decoration here: the cards are solid surfaces at depth. */
.lp-float-in { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* No coloured side-rule on the close; the orbit and the type carry it. */
.lp-page .lp-close-inner { border-left: 0; padding-left: 0; }

/* FAQ: every answer visible, two columns. */
.lp-faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 56px;
    margin: 0;
}
.lp-qa { padding: 26px 0; border-top: 1px solid var(--lp-rule); }
.lp-page .lp-faq-grid dt {
    font-family: var(--lp-display) !important;
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -.01em;
    color: var(--lp-ink);
    margin: 0 0 10px;
    text-wrap: balance;
}
.lp-page .lp-faq-grid dd {
    margin: 0;
    max-width: 62ch;
    color: var(--lp-muted);
    line-height: 1.65;
    font-family: var(--lp-body) !important;
}
@media (max-width: 767.98px) { .lp-faq-grid { grid-template-columns: minmax(0, 1fr); } }

/* Native select in dark mode: explicit colours (Windows paints its own). */
.lp-band-switch select { background-color: var(--lp-surface); color: var(--lp-ink); }

/* ── Pause motion ─────────────────────────────────────────────────────────── */
.lp-motion-toggle {
    /* No offsets, ever: the app's global `button:hover { position: relative }`
       would apply them on hover and throw the button out from under the
       pointer — a hover/unhover loop that flickers and swallows the click. */
    position: relative;
    inset: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--lp-rule-2, rgba(255, 255, 255, .12));
    border-radius: 999px;
    background: color-mix(in srgb, var(--lp-bg) 80%, transparent);
    color: var(--lp-muted);
    font: 500 .78rem/1 var(--lp-body);
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease, transform 160ms var(--lp-ease-out);
}
.lp-motion-toggle:active { transform: scale(.97); }
.lp-motion-toggle:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
    .lp-motion-toggle:hover { color: var(--lp-ink); border-color: rgba(var(--lp-accent-rgb), .5); }
}
/* Pauses the loops only. The one-time entrances must still finish, or a
   visitor who paused on a previous visit would land on a half-drawn hero. */
.lp-still .lp-aurora span,
.lp-still .lp-floor i,
.lp-still .lp-board-glow,
.lp-still .lp-float-dot,
.lp-still .lp-marquee-track,
.lp-still .lp-edge::after,
.lp-still .lp-orbit-ring,
.lp-still .lp-orbit-ring > span > i,
.lp-still .lp-orbit-core { animation-play-state: paused; }
.lp-still .lp-float-in { animation-play-state: running, paused; }

/* ═══════════════════════════════════════════════════════════════════════════
   Scale and rhythm — measured against Linear, Vercel and Stripe's marketing
   systems (awesome-design-md): an 80px-class display, 48px section openers,
   ~120px between sections, hairline panels at 12px.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Signed in, the app shell pads its content 10px below the navbar (for button
   glows). The hero is full-bleed and must meet the navbar, as it does when
   signed out. */
body.lp-body #omniroq-main-wrap { padding-top: 0; }

.lp-page { --lp-gutter: clamp(80px, 9vw, 128px); }
.lp-page .lp-h1 {
    font-size: clamp(2.6rem, 5.4vw, 4.75rem);
    line-height: 1.02;
    letter-spacing: -.04em !important;
}
.lp-page .lp-h2 {
    font-size: clamp(1.9rem, 3.4vw, 3rem);
    line-height: 1.08;
    letter-spacing: -.035em !important;
}
.lp-page .lp-head { margin-bottom: 56px; padding-top: 30px; }
.lp-page .lp-head .lp-deck { font-size: 1.08rem; line-height: 1.6; }
.lp-hero-inner { padding-block: clamp(24px, 4vw, 56px); }

.lp-page .lp-matrix,
.lp-page .lp-panel,
.lp-page .lp-figure,
.lp-page .lp-price { border-radius: 12px; }

/* The 3D stage extends below the board (room for the floating cards) and,
   being in a 3D rendering context, is hit-tested in front of the hero's pause
   button even though it paints behind it — a real click on the button landed
   on the stage. The board is an illustration, not a control; the pointer tilt
   listens on the whole hero. So the stage takes no pointer events. */
.lp-stage { pointer-events: none; }
.lp-motion-toggle[hidden] { display: none; }

/* The glyph was a full-width block, so its hover scale(1.08) grew an ~800px box
   from its centre and threw the icon ~30px outside its card's padding — the
   "exposed edge" on hover. It is only as wide as itself, and grows from its
   own corner. */
.lp-page .lp-glyph {
    width: max-content;
    transform-origin: left bottom;
}

/* The included-at-every-seat lists sat flush against the panel's border. */
.lp-page .lp-panel > .lp-checks { padding: 18px 22px 22px; }


/* ═══════════════════════════════════════════════════════════════════════════
   Flowing separators
   ═══════════════════════════════════════════════════════════════════════════
   Every hairline on the page carries a soft light that drifts along it and
   back. The line and the light are two background layers of the element
   itself, so the light can never pass the line's ends: a background layer
   positioned at 0%..100% stays inside its box. --lp-flow is a registered
   custom property, so it interpolates smoothly; the drift is ease-in-out and
   alternates, so it eases into each end and turns, rather than snapping back.
   Animating a 1px background is a negligible repaint. */
@property --lp-flow {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 0%;
}
@keyframes lp-flow { to { --lp-flow: 100%; } }

.lp-page .lp-head,
.lp-page .lp-qa,
.lp-page .lp-fields,
.lp-page .lp-figure-cap,
.lp-page .lp-close,
.lp-page .lp-spec,
.lp-page .lp-panel-head,
.lp-page .lp-row,
.lp-page .lp-panel-foot {
    --lp-line: var(--lp-rule-2, rgba(255, 255, 255, .1));
    --lp-glow: linear-gradient(90deg, transparent, rgba(var(--lp-accent-rgb), .95), transparent);
    animation: lp-flow 7s var(--lp-ease-in-out) infinite alternate;
    background-repeat: no-repeat;
}
/* Lines on top. */
.lp-page .lp-head,
.lp-page .lp-qa,
.lp-page .lp-fields,
.lp-page .lp-figure-cap,
.lp-page .lp-close,
.lp-page .lp-panel-foot {
    border-top-color: transparent !important;
    background-image: var(--lp-glow), linear-gradient(var(--lp-line), var(--lp-line));
    background-size: 22% 1px, 100% 1px;
    background-position: var(--lp-flow) 0, 0 0;
}
/* Lines underneath. */
.lp-page .lp-panel-head,
.lp-page .lp-row {
    border-bottom-color: transparent !important;
    background-image: var(--lp-glow), linear-gradient(var(--lp-line), var(--lp-line));
    background-size: 22% 1px, 100% 1px;
    background-position: var(--lp-flow) 100%, 0 100%;
}
.lp-page .lp-panel-head { background-color: rgba(0, 0, 0, .22); }
/* The stats band is ruled above and below, the two lights moving apart. */
.lp-page .lp-spec {
    border-top: 0;
    border-bottom: 0;
    background-image: var(--lp-glow), linear-gradient(var(--lp-line), var(--lp-line)),
                      linear-gradient(90deg, transparent, rgba(var(--lp-accent-rgb), .95), transparent),
                      linear-gradient(var(--lp-line), var(--lp-line));
    background-size: 22% 1px, 100% 1px, 22% 1px, 100% 1px;
    background-position: var(--lp-flow) 0, 0 0, calc(100% - var(--lp-flow)) 100%, 0 100%;
}
/* Small lines are short-lived glints, so they flow faster; no two in step. */
.lp-page .lp-fields, .lp-page .lp-row, .lp-page .lp-qa { animation-duration: 5.5s; }
.lp-page .lp-matrix > :nth-child(2n) .lp-fields,
.lp-page .lp-row:nth-child(2n),
.lp-page .lp-qa:nth-child(2n) { animation-delay: -2.2s; }
.lp-page .lp-matrix > :nth-child(3n) .lp-fields,
.lp-page .lp-row:nth-child(3n),
.lp-page .lp-qa:nth-child(3n) { animation-delay: -3.9s; animation-duration: 6.5s; }
.lp-page .lp-section:nth-of-type(2n) .lp-head { animation-delay: -3s; animation-duration: 8s; }
.lp-still :is(.lp-head, .lp-qa, .lp-fields, .lp-figure-cap, .lp-close, .lp-spec,
              .lp-panel-head, .lp-row, .lp-panel-foot) { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    .lp-page :is(.lp-head, .lp-qa, .lp-fields, .lp-figure-cap, .lp-close, .lp-spec,
                 .lp-panel-head, .lp-row, .lp-panel-foot) {
        animation: none;
        --lp-glow: linear-gradient(transparent, transparent);
    }
}

/* ── The stats band: its own surface between hero and content ─────────────── */
.lp-page .lp-spec { background-color: var(--lp-surface); }
.lp-page .lp-ledger {
    margin: 0 auto;
    padding: clamp(40px, 5vw, 64px) 0;
    max-width: 44ch;
    text-align: center;
    font-size: clamp(1.25rem, 2.2vw, 1.7rem);
}
.lp-page .lp-spec + .lp-section { padding-top: clamp(72px, 7vw, 104px); }

/* ── Pause control: docked in the hero's corner ───────────────────────────── */
.lp-motion-dock {
    position: absolute;
    right: clamp(16px, 2.5vw, 32px);
    bottom: 18px;
    z-index: 3;
}
.lp-page .lp-motion-toggle { background: color-mix(in srgb, var(--lp-bg) 70%, transparent); }

/* ── Hero depth without blur ──────────────────────────────────────────────────
   Text on a layer the browser keeps as a bitmap (will-change, or a running
   transform animation) is drawn once and then scaled — inside a 3D scene that
   reads as soft, swimming type. So: no will-change on anything carrying text,
   no perpetual bob on the cards (the light, floor and glow still move), and
   shallower depths, so the projection magnifies the cards less. The board
   settles after each pointer move, and the browser re-renders it crisp. */
.lp-stage-tilt,
.lp-aurora span,
.lp-figure { will-change: auto !important; }
.lp-float-in { animation: lp-float-in .9s var(--lp-ease-out) forwards !important; }
.lp-float--toast .lp-float-in { animation-delay: 1.35s !important; }
.lp-float--kpi   .lp-float-in { animation-delay: 1.5s !important; }
.lp-float--ring  .lp-float-in { animation-delay: 1.65s !important; }
.lp-float--toast { transform: translateZ(70px); }
.lp-float--kpi   { transform: translateZ(95px); }
.lp-float--ring  { transform: translateZ(50px); }
.lp-stage-tilt, .lp-float-in { -webkit-font-smoothing: antialiased; backface-visibility: hidden; }