/* ============================================================
   CLICKASE — LANDING (CHROME POSTER EDITION)
   ------------------------------------------------------------
   Monochrome editorial system:
     · hairline cells and 1px rules instead of boxes
     · mono micro-labels (MEASURE / ANALYZE / IMPLEMENT / MORE)
     · expanded grotesk display type, all caps
     · liquid-chrome hero object on a fine grid
     · dot-matrix halftone field in the footer

   Scoped to body.lp so about.html / contact.html keep landing.css.
   ============================================================ */

body.lp {
    /* surfaces */
    --lp-bg: #070708;
    --lp-panel: #0d0d0f;
    --lp-panel-2: #131316;
    --lp-grey: #2b2b2f;
    --lp-line: #232327;
    --lp-line-soft: #1a1a1d;

    /* ink */
    --lp-fg: #f2f2f3;
    --lp-dim: #9a9aa1;
    --lp-faint: #65656d;

    /* type */
    --lp-disp: "Archivo", "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
    --lp-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace;
    --lp-body: "Space Grotesk", "Inter", system-ui, sans-serif;

    /* rhythm */
    --lp-pad: var(--content-pad, 50px);
    --lp-max: var(--content-max, 100%);
    --lp-sec: clamp(72px, 9vw, 132px);

    /* shared chrome height — nav (header) and footer bottom bar stay equal */
    --lp-header-h: 70px;

    margin: 0;
    padding: 0;
    /* layer 1: soft top glow · layer 2: the 16px pixel lattice the cursor
       lights up · layer 3: flat ground. Fixed attachment keeps the lattice
       locked to the viewport so it lines up with the cursor layer. */
    background:
        radial-gradient(1100px 620px at 50% -12%, rgba(255, 255, 255, 0.055), transparent 62%) 0 0 / 100% 100% no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect x='7' y='7' width='2' height='2' fill='%23ffffff' fill-opacity='0.10'/%3E%3C/svg%3E") 0 0 / 16px 16px repeat,
        var(--lp-bg);
    background-attachment: fixed, fixed, fixed;
    color: var(--lp-fg);
    font-family: var(--lp-body);
    font-size: 15px;
    line-height: 1.55;
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

body.lp ::selection {
    background: var(--accent);
    color: #fff;
}

body.lp a {
    color: inherit;
    text-decoration: none;
}

body.lp img {
    display: block;
    max-width: 100%;
}

.lp-wrap {
    width: 100%;
    max-width: var(--lp-max);
    margin: 0 auto;
    padding: 0 var(--lp-pad);
}

/* film grain over the whole sheet */
.lp-grain {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.028;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* CursorGrid island — a fine cursor-reactive lattice on the page ground.
   The canvas is mounted by /static/react/cursor-grid.js into .lp-grid, which
   sits behind every content layer (negative z-index), so opaque panels — the
   hero poster, the cards, the footer — cover it and it only reads in the bare
   gutters between them. */
.lp-grid {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

@media (pointer: coarse), (prefers-reduced-motion: reduce) {
    .lp-grid { display: none; }
}

.lp-symbols {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ── micro type ───────────────────────────────────────────── */
.lp-micro {
    font-family: var(--lp-mono);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lp-dim);
    white-space: nowrap;
}

.lp-micro-dark {
    color: var(--lp-faint);
}

/* ── tick cluster: the little pixel square used in the ref ── */
.lp-tick {
    display: inline-block;
    width: 12px;
    height: 12px;
    flex: none;
    background-image:
        linear-gradient(var(--lp-dim) 1px, transparent 1px),
        linear-gradient(90deg, var(--lp-dim) 1px, transparent 1px);
    background-size: 4px 4px;
    background-position: 0 0;
    opacity: 0.75;
}

/* ── topline ──────────────────────────────────────────────── */
.lp-topline {
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: var(--lp-max);
    margin: 0 auto;
    padding: 18px var(--lp-pad) 16px;
}

.lp-topline-name {
    font-family: var(--lp-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lp-dim);
}

.lp-topline-rule {
    flex: 1 1 auto;
    height: 1px;
    background: var(--lp-line);
}

.lp-topline-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--lp-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lp-fg);
}

.lp-topline-meta #countdown-timer {
    color: var(--lp-dim);
}

/* ── nav ──────────────────────────────────────────────────── */
.lp-nav {
    position: sticky;
    top: 0;
    z-index: 90;
    border-top: 1px solid var(--lp-line-soft);
    border-bottom: 1px solid var(--lp-line);
    background: rgba(7, 7, 8, 0.86);
    backdrop-filter: blur(14px);
}

.lp-nav-inner {
    display: flex;
    align-items: center;
    gap: 28px;
    max-width: var(--lp-max);
    margin: 0 auto;
    /* fixed content box so the nav's total height (incl. its 1px rules)
       always equals --lp-header-h */
    height: calc(var(--lp-header-h) - 2px);
    padding: 0 var(--lp-pad);
}

.lp-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

/* Brand: text wordmark — same as the dashboard header poster skin
   (body.poster .header-brand): Archivo 500 / 125% width, "CLICK" in the
   page ink and "ASE" solid in the accent red. */
.lp-brand-text {
    font-family: var(--lp-disp, "Archivo", "Space Grotesk", sans-serif);
    font-size: 17px;
    font-weight: 500;
    font-stretch: 125%;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lp-brand-text span {
    color: var(--accent);
}

.lp-nav-links {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.4vw, 38px);
    margin-left: auto;
}

.lp-nav-links .nav-link {
    font-family: var(--lp-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--lp-dim);
    padding: 6px 0;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.lp-nav-links .nav-link:hover {
    color: var(--lp-fg);
    border-bottom-color: var(--lp-fg);
}

.lp-nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 20px;
    border-left: 1px solid var(--lp-line);
}

/* ── buttons ──────────────────────────────────────────────── */
body.lp .lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 11px 22px;
    font-family: var(--lp-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border: 1px solid var(--lp-line);
    background: transparent;
    color: var(--lp-fg);
    cursor: pointer;
    transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
    white-space: nowrap;
}

.lp-btn-ghost:hover {
    border-color: var(--lp-fg);
    background: rgba(255, 255, 255, 0.04);
}

body.lp .lp-btn-solid {
    background: var(--lp-fg);
    border-color: var(--lp-fg);
    color: #08080a;
}

body.lp .lp-btn-solid:hover {
    background: #fff;
    border-color: #fff;
    color: #08080a;
}

.lp-btn-lg {
    padding: 16px 30px;
    font-size: 11px;
}

.lp-btn-block {
    width: 100%;
}

/* ── hero poster ──────────────────────────────────────────── */
.lp-hero {
    padding: 28px var(--lp-pad) 0;
    max-width: var(--lp-max);
    margin: 0 auto;
}

.lp-poster {
    position: relative;
    border: 1px solid var(--lp-line);
    background: #000;               /* pure black — the planet and its
                                       starfield are the only things lit */
    padding: 20px clamp(18px, 3vw, 40px) clamp(28px, 3.4vw, 46px);
    overflow: hidden;
}

/* fine measurement grid behind the object — off: the poster reads pure black */
.lp-poster::before {
    display: none;
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(90deg, var(--lp-line-soft) 1px, transparent 1px),
        linear-gradient(var(--lp-line-soft) 1px, transparent 1px);
    background-size: 96px 96px;
    mask-image: radial-gradient(90% 80% at 50% 30%, #000 15%, transparent 78%);
    -webkit-mask-image: radial-gradient(90% 80% at 50% 30%, #000 15%, transparent 78%);
    opacity: 0.85;
}

.lp-poster-head {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    padding-bottom: 18px;
}

.lp-poster-head .lp-micro:nth-child(2),
.lp-poster-head .lp-micro:nth-child(3) {
    justify-self: center;
}

.lp-poster-head .lp-micro:last-child {
    justify-self: end;
}

/* chrome object stage */
.lp-visual {
    position: relative;
    height: clamp(240px, 34vw, 430px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lp-visual-rings {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.lp-visual-rings svg {
    width: min(110%, 940px);
    height: auto;
    color: #ffffff;
    opacity: 0.16;
}

.lp-chrome {
    position: relative;
    width: min(72%, 720px);
    height: auto;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.8));
}

/* the clickase planet — Glyph Orb island stage.
   Sits over the rings so the lattice and hairlines read through the
   transparent disc; the canvas itself carries no background. The stage
   fills the whole visual box so the sun can follow the pointer anywhere
   over the poster, while the disc itself is sized from the shorter side. */
.lp-orb {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lp-orb .glyph-orb {
    min-height: 0;
    width: 100%;
    height: 100%;
}

/* starfield behind the planet — same halftone-dot language as the
   footer signal matrix, kept under the orb (z-index 1) and the
   visual tags (z-index 2) */
.lp-hero-stars {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.lp-visual-tag {
    position: absolute;
    left: 0;
    bottom: 14px;
    z-index: 2;             /* above the orb stage, which is z-index 1 */
    font-family: var(--lp-mono);
    font-size: 9.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--lp-faint);
}

.lp-visual-tag-right {
    left: auto;
    right: 0;
}

/* hairline with pixel ticks at both ends */
.lp-hair {
    position: relative;
    height: 1px;
    background: var(--lp-line);
    margin: 0 0 clamp(22px, 2.6vw, 34px);
}

.lp-hair::before,
.lp-hair::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 13px;
    height: 13px;
    background-image:
        linear-gradient(var(--lp-dim) 1px, transparent 1px),
        linear-gradient(90deg, var(--lp-dim) 1px, transparent 1px);
    background-size: 4.4px 4.4px;
    opacity: 0.65;
}

.lp-hair::before { left: 0; }
.lp-hair::after { right: 0; }

.lp-hair-tight { margin-bottom: clamp(16px, 2vw, 24px); }

.lp-title {
    position: relative;
    margin: 0;
    font-family: var(--lp-disp);
    font-weight: 500;
    font-stretch: 125%;
    font-size: clamp(2rem, 5.4vw, 4.7rem);
    line-height: 1.06;
    letter-spacing: 0.005em;
    text-transform: uppercase;
}

@media (min-width: 861px) {
    .lp-title em { white-space: nowrap; }
}

.lp-title em {
    font-style: normal;
    color: var(--lp-dim);
}

/* ── accent beat ─────────────────────────────────────────────
   One red word inside a headline — the same move the auth poster
   makes on "CRYPTO". Keep it scarce: the hero, plus the sharpest
   line of a section. Never a whole paragraph. */
.lp-title .is-accent,
.lp-h2 .is-accent,
.lp-card-h .is-accent,
.lp-cta-title .is-accent {
    color: var(--accent);
}

.lp-poster-foot {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(20px, 3vw, 48px);
    align-items: end;
    padding-top: clamp(22px, 2.6vw, 34px);
}

.lp-lede {
    margin: 0;
    max-width: 46ch;
    color: var(--lp-dim);
    font-size: 13.5px;
    line-height: 1.7;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.lp-poster-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* ── price ticker ─────────────────────────────────────────── */
.lp-ticker {
    position: relative;
    margin-top: 18px;
    border-top: 1px solid var(--lp-line);
    border-bottom: 1px solid var(--lp-line);
    overflow: hidden;
}

.lp-ticker-track {
    display: flex;
    width: max-content;
    animation: lp-marquee 26s linear infinite;
}

.lp-ticker-group {
    display: flex;
    align-items: center;
}

.lp-ticker-item {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    padding: 13px 30px;
    border-right: 1px solid var(--lp-line-soft);
    font-family: var(--lp-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lp-dim);
    white-space: nowrap;
}

.lp-ticker-item .marquee-price {
    color: var(--lp-fg);
    letter-spacing: 0.04em;
}

.lp-ticker-item .marquee-chg.up { color: var(--green); }
.lp-ticker-item .marquee-chg.down { color: var(--red); }

@keyframes lp-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ── section shell ────────────────────────────────────────── */
.lp-section {
    max-width: var(--lp-max);
    margin: 0 auto;
    padding: var(--lp-sec) var(--lp-pad) 0;
}

.lp-sec-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr);
    gap: clamp(18px, 4vw, 64px);
    align-items: start;
    padding-bottom: clamp(28px, 3.4vw, 46px);
}

.lp-sec-head .lp-micro {
    padding-top: 8px;
}

.lp-h2 {
    margin: 0;
    font-family: var(--lp-disp);
    font-weight: 500;
    font-stretch: 125%;
    font-size: clamp(1.6rem, 3.6vw, 3.15rem);
    line-height: 1.08;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    text-wrap: balance;
}

.lp-h2-dim { color: var(--lp-dim); }

.lp-copy {
    margin: 0;
    color: var(--lp-dim);
    font-size: 13px;
    line-height: 1.7;
    letter-spacing: 0.01em;
}

/* ── cards ────────────────────────────────────────────────── */
.lp-trio {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr) minmax(0, 0.75fr);
    gap: 10px;
}

.lp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 330px;
    padding: clamp(20px, 2.2vw, 32px);
    border: 1px solid var(--lp-line);
    background: linear-gradient(180deg, #101012 0%, #0b0b0d 100%);
    overflow: hidden;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.lp-card:hover {
    border-color: #38383f;
}

.lp-card-light {
    background: linear-gradient(180deg, #2c2c31 0%, #212125 100%);
    border-color: #34343a;
}

.lp-card-statement .lp-card-h {
    margin: 0;
    font-family: var(--lp-disp);
    font-weight: 500;
    font-stretch: 125%;
    font-size: clamp(1.5rem, 2.6vw, 2.4rem);
    line-height: 1.06;
    text-transform: uppercase;
}

.lp-card .lp-tick {
    position: absolute;
    right: clamp(18px, 2.2vw, 30px);
    bottom: clamp(18px, 2.2vw, 30px);
}

.lp-card-statement .lp-copy {
    margin-top: auto;
    max-width: 34ch;
}

/* thin circle that bleeds out of the card */
.lp-ring {
    position: absolute;
    width: 230px;
    height: 230px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    right: -70px;
    top: 34px;
    pointer-events: none;
}

.lp-ring-xl {
    width: clamp(220px, 30vw, 420px);
    height: clamp(220px, 30vw, 420px);
    right: -18%;
    top: 12%;
    border-color: rgba(255, 255, 255, 0.1);
}

.lp-stat-big {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--lp-disp);
    font-weight: 500;
    font-stretch: 125%;
    font-size: clamp(2.6rem, 5vw, 4.4rem);
    line-height: 0.95;
    letter-spacing: -0.01em;
}

.lp-stat-unit {
    font-family: var(--lp-mono);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.18em;
    color: var(--lp-dim);
}

.lp-card-light .lp-stat-unit,
.lp-card-light .lp-copy {
    color: #c9c9cf;
}

.lp-card-stat .lp-copy {
    margin-top: auto;
    max-width: 26ch;
}

.lp-card-split {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 14px 22px 0 0;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-family: var(--lp-mono);
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lp-dim);
}

/* wireframe mesh decoration */
.lp-wire {
    position: absolute;
    inset: auto 0 0 0;
    width: 100%;
    height: 58%;
    color: #ffffff;
    opacity: 0.14;
    pointer-events: none;
}

.lp-wire-foot {
    position: relative;
    inset: auto;
    height: 180px;
    margin-top: auto;
}

/* ── split: statement + weighted rows ─────────────────────── */
.lp-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    border: 1px solid var(--lp-line);
    background: #0a0a0c;
}

.lp-split-left {
    position: relative;
    padding: clamp(24px, 3vw, 44px);
    border-right: 1px solid var(--lp-line);
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow: hidden;
    min-height: 420px;
}

.lp-split-left .lp-h2 {
    font-size: clamp(1.7rem, 3.2vw, 2.9rem);
    position: relative;
    z-index: 1;
}

.lp-split-right {
    display: flex;
    flex-direction: column;
}

.lp-bar-row {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    align-items: stretch;
    border-bottom: 1px solid var(--lp-line);
    transition: background 0.25s ease;
}

.lp-bar-row:last-child { border-bottom: 0; }

.lp-bar-row:hover { background: rgba(255, 255, 255, 0.035); }

.lp-bar-pct {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px 8px;
    border-right: 1px solid var(--lp-line);
    background: rgba(255, 255, 255, 0.045);
    font-family: var(--lp-mono);
    font-size: 11.5px;
    letter-spacing: 0.1em;
    color: var(--lp-fg);
}

.lp-bar-row:nth-child(even) .lp-bar-pct {
    background: rgba(255, 255, 255, 0.075);
}

.lp-bar-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 20px clamp(16px, 2vw, 26px);
}

.lp-bar-body h4 {
    margin: 0;
    font-family: var(--lp-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lp-fg);
}

.lp-bar-body p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--lp-dim);
    max-width: 46ch;
}

/* ── table rows (agents / pipeline) ───────────────────────── */
.lp-table {
    border-top: 1px solid var(--lp-line);
    margin-top: 12px;
}

.lp-table-head {
    display: grid;
    grid-template-columns: 56px minmax(0, 1.1fr) minmax(0, 1.6fr) 90px;
    gap: 16px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--lp-line);
}

.lp-row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1.1fr) minmax(0, 1.6fr) 90px;
    gap: 16px;
    align-items: center;
    padding: 18px 4px;
    border-bottom: 1px solid var(--lp-line-soft);
    transition: background 0.22s ease, padding 0.22s ease;
    position: relative;
}

.lp-row:hover {
    background: rgba(255, 255, 255, 0.035);
    padding-left: 12px;
    padding-right: 12px;
}

.lp-row-num {
    font-family: var(--lp-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--lp-faint);
}

.lp-row-title {
    font-family: var(--lp-disp);
    font-weight: 500;
    font-stretch: 115%;
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    line-height: 1.15;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.lp-row-desc {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--lp-dim);
    max-width: 62ch;
}

.lp-row-tail {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.lp-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--lp-mono);
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lp-faint);
}

.agent-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3a3a40;
    flex: none;
}

.agent-live-dot.active {
    background: var(--green);
    box-shadow: 0 0 0 3px rgba(0, 200, 83, 0.12);
}

.agent-live-dot.stale { background: #d9a300; }
.agent-live-dot.error { background: var(--red); }
.agent-live-dot.idle { background: #6b6b73; }

.lp-stage-cell {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* ── safety grid ──────────────────────────────────────────── */
.lp-safety-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--lp-line);
    border: 1px solid var(--lp-line);
}

.lp-safety-cell {
    position: relative;
    background: #0b0b0d;
    padding: clamp(20px, 2.2vw, 30px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 190px;
    transition: background 0.22s ease;
}

.lp-safety-cell:hover { background: #121215; }

.lp-safety-cell .lp-micro { padding-top: 2px; }

.lp-safety-cell h3 {
    margin: 0;
    font-family: var(--lp-disp);
    font-weight: 500;
    font-stretch: 115%;
    font-size: 1.05rem;
    line-height: 1.15;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.lp-safety-cell p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--lp-dim);
}

.lp-safety-cell .lp-tick {
    position: absolute;
    right: 20px;
    bottom: 20px;
    opacity: 0.4;
}

/* ── pricing ──────────────────────────────────────────────── */
.lp-pricing {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.lp-price-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: clamp(22px, 2.4vw, 34px);
    border: 1px solid var(--lp-line);
    background: #0b0b0d;
    position: relative;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.lp-price-card:hover { border-color: #3a3a41; background: #101013; }

.lp-price-card.is-featured {
    border-color: #4a4a52;
    background:
        radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, 0.07), transparent 60%),
        #0e0e11;
}

.lp-price-card.is-featured::after {
    content: "";
    position: absolute;
    inset: -1px -1px auto;
    height: 2px;
    background: var(--accent);
}

.lp-price-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--lp-line);
}

.lp-price-name {
    margin: 0;
    font-family: var(--lp-disp);
    font-weight: 500;
    font-stretch: 125%;
    font-size: 1.35rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.lp-price-amount {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: var(--lp-disp);
    font-weight: 500;
    font-stretch: 125%;
    font-size: clamp(2.2rem, 3.6vw, 3.2rem);
    line-height: 1;
    letter-spacing: -0.01em;
}

.lp-price-amount span {
    font-family: var(--lp-mono);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.16em;
    color: var(--lp-dim);
}

.lp-price-note {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--lp-dim);
}

.lp-price-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1;
}

.lp-price-list li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: var(--lp-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lp-fg);
    line-height: 1.5;
}

.lp-price-list li.is-off {
    color: var(--lp-faint);
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, 0.25);
}

.lp-price-list .mark {
    color: var(--lp-faint);
    flex: none;
}

.lp-price-list li.is-off .mark { color: var(--lp-faint); }

/* ── CTA ──────────────────────────────────────────────────── */
.lp-cta {
    position: relative;
    margin-top: var(--lp-sec);
    border-top: 1px solid var(--lp-line);
    border-bottom: 1px solid var(--lp-line);
    padding: clamp(64px, 9vw, 120px) var(--lp-pad);
    text-align: center;
    overflow: hidden;
    background:
        radial-gradient(70% 120% at 50% 0%, rgba(255, 255, 255, 0.07), transparent 62%),
        #08080a;
}

.lp-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.5;
    background-image: radial-gradient(rgba(255, 255, 255, 0.5) 0.8px, transparent 0.9px);
    background-size: 14px 14px;
    mask-image: radial-gradient(60% 90% at 50% 50%, #000 0%, transparent 72%);
    -webkit-mask-image: radial-gradient(60% 90% at 50% 50%, #000 0%, transparent 72%);
}

.lp-cta > * { position: relative; }

.lp-cta .lp-micro { display: block; margin-bottom: 22px; }

.lp-cta-title {
    margin: 0 auto 18px;
    max-width: 16ch;
    font-family: var(--lp-disp);
    font-weight: 500;
    font-stretch: 125%;
    font-size: clamp(2rem, 5.6vw, 4.6rem);
    line-height: 1.03;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    text-wrap: balance;
}

.lp-cta-copy {
    margin: 0 auto 30px;
    max-width: 52ch;
    color: var(--lp-dim);
    font-size: 13px;
    line-height: 1.7;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.lp-cta-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ── footer ───────────────────────────────────────────────── */
.lp-footer {
    position: relative;
    background: #050506;
    border-top: 1px solid var(--lp-line);
}

/* dot-matrix art band */
.lp-footer-art {
    position: relative;
    height: clamp(230px, 32vw, 400px);
    border-bottom: 1px solid var(--lp-line);
    overflow: hidden;
    background:
        radial-gradient(60% 80% at 50% 45%, rgba(255, 255, 255, 0.06), transparent 70%),
        #050506;
}

.lp-footer-art canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.lp-footer-art .lp-micro {
    position: absolute;
    top: 18px;
    left: var(--lp-pad);
    font-size: 9px;
    letter-spacing: 0.24em;
    color: var(--lp-faint);
}

.lp-footer-art .lp-micro.is-right {
    left: auto;
    right: var(--lp-pad);
}

.lp-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 4vw, 56px);
    padding: clamp(40px, 5vw, 68px) 0;
    border-bottom: 1px solid var(--lp-line);
}

.lp-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 34ch;
}

.lp-footer-brand .lp-brand-text { font-size: 15px; }

.lp-footer-brand p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--lp-dim);
}

.lp-footer-col h4 {
    margin: 0 0 16px;
    font-family: var(--lp-mono);
    font-size: 9.5px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--lp-faint);
}

.lp-footer-col a {
    display: block;
    padding: 5px 0;
    font-family: var(--lp-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lp-dim);
    transition: color 0.2s ease, transform 0.2s ease;
}

.lp-footer-col a:hover {
    color: var(--lp-fg);
    transform: translateX(3px);
}

/* The shine itself is owned by the React Bits ShinyText island
   (static/react/shiny-text.js): it mounts INSIDE this element as a
   .shiny-text span whose animated background-clip:text gradient paints
   the sweep over the glyphs. This rule keeps only the poster layout +
   the base wordmark colors — CLICK #f2f2f3 / ASE var(--accent), exactly
   as they have always been. */
/* The footer wordmark is sized from the .lp-wrap content width so the
   giant CLICKASE lockup always stretches edge to edge, on every screen.
   Each glyph is its own flex item, so justify-content distributes the
   leftover width as IDENTICAL gaps between every pair of letters. */
.lp-footer .lp-wrap {
    container-type: inline-size;
}

.lp-footer-word,
.lp-footer-word > .shiny-text,
.lp-footer-word .shiny-text__body {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    width: 100%;
}

.lp-footer-word {
    --lp-fw-ase: #e8143d;
    margin: 0;
    padding: clamp(24px, 3vw, 40px) 0 0;
    font-family: var(--lp-disp);
    font-weight: 700;
    font-stretch: 125%;
    font-size: clamp(2.6rem, 15.5vw, 22rem);
    /* Glyphs take ~6.35em for all eight letters; the remainder of the
       container becomes equal tracking between them. */
    font-size: calc(100cqw / 7.1);
    line-height: 0.82;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #f2f2f3;
    text-align: center;
    white-space: nowrap;
}

.lp-footer-word .lp-fw-letter {
    display: block;
    flex: 0 0 auto;
}

/* "ASE" is a solid accent fill. The ShinyText root inherits the
   component's `-webkit-text-fill-color: transparent`, so the accent
   letters explicitly claim an OPAQUE fill back — no transparency or
   color-mix here, otherwise the red reads dull/see-through over black.
   Keyed off .lp-fw-ase so it works both before mount (direct children)
   and after mount (inside .shiny-text__body). */
.lp-footer-word .lp-fw-ase {
    color: var(--lp-fw-ase);
    -webkit-text-fill-color: var(--lp-fw-ase);
    text-fill-color: var(--lp-fw-ase);
}

.lp-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    /* same box height as the header bar (.lp-nav) */
    min-height: var(--lp-header-h);
    padding: 18px 0 22px;
    border-top: 1px solid var(--lp-line-soft);
    margin-top: clamp(22px, 3vw, 34px);
}

.lp-footer-bottom .lp-micro { font-size: 9px; letter-spacing: 0.18em; color: var(--lp-faint); }

.lp-footer-legal {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.lp-footer-legal a {
    font-family: var(--lp-mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lp-faint);
    transition: color 0.2s ease;
}

.lp-footer-legal a:hover { color: var(--lp-fg); }

/* ── contact form ─────────────────────────────────────────
   The 02 — Write section of contact.html: fields on the left,
   "what happens next" rail on the right. Hairline cells, mono
   labels — same language as .lp-split above it. */
.lp-form {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    border: 1px solid var(--lp-line);
    background: #0a0a0c;
    margin-top: 10px;
}

.lp-form-main {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: clamp(24px, 3vw, 44px);
    border-right: 1px solid var(--lp-line);
}

.lp-form-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lp-form-head .lp-copy { max-width: 54ch; }

.lp-field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
}

.lp-field {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
}

/* label line: mono caps on the left, character counter on the right */
.lp-field > .lp-micro {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    white-space: normal;
}

.lp-field-hint {
    color: var(--lp-faint);
    letter-spacing: 0.12em;
}

.lp-input {
    width: 100%;
    padding: 13px 14px;
    font-family: var(--lp-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--lp-fg);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--lp-line);
    border-radius: 0;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.lp-input::placeholder { color: var(--lp-faint); }

.lp-input:hover { border-color: #34343a; }

.lp-input:focus {
    border-color: var(--lp-fg);
    background: rgba(255, 255, 255, 0.055);
}

.lp-input.is-invalid { border-color: var(--accent); }

.lp-textarea {
    min-height: 156px;
    resize: vertical;
    line-height: 1.65;
}

/* native arrow replaced by the poster's hairline chevron */
.lp-select-wrap { position: relative; }

.lp-select-wrap::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -5px;
    border-right: 1px solid var(--lp-dim);
    border-bottom: 1px solid var(--lp-dim);
    transform: rotate(45deg);
    pointer-events: none;
}

.lp-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 42px;
    cursor: pointer;
}

.lp-select option {
    background: #0d0d0f;
    color: var(--lp-fg);
}

/* honeypot: off-screen and out of the tab order — humans never see it */
.lp-hp {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.lp-form-foot {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.lp-form-status {
    margin: 0;
    font-family: var(--lp-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--lp-dim);
    max-width: 46ch;
}

.lp-form-status.is-error { color: var(--accent); }
.lp-form-status.is-ok { color: var(--green); }

body.lp .lp-btn[disabled] {
    opacity: 0.5;
    cursor: wait;
}

/* right rail: receipt → triage → reply, plus the direct address */
.lp-form-aside {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: clamp(24px, 3vw, 44px);
    background: linear-gradient(180deg, #101012 0%, #0b0b0d 100%);
}

.lp-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.lp-steps li {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 12px;
    padding: 15px 0;
    border-bottom: 1px solid var(--lp-line);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--lp-dim);
}

.lp-steps li:last-child { border-bottom: 0; }

.lp-steps li span {
    font-family: var(--lp-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--lp-fg);
}

.lp-form-meta {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 18px;
    border-top: 1px solid var(--lp-line);
}

.lp-form-mail {
    font-family: var(--lp-disp);
    font-weight: 500;
    font-stretch: 125%;
    font-size: clamp(1.05rem, 1.7vw, 1.5rem);
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--lp-fg);
    border-bottom: 1px solid transparent;
    align-self: flex-start;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.lp-form-mail:hover {
    border-bottom-color: var(--accent);
    color: var(--accent);
}

/* ── reveal on scroll ─────────────────────────────────────── */
.lp-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.lp-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* ── responsive ───────────────────────────────────────────── */
@media (max-width: 1080px) {
    .lp-trio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .lp-card-statement { grid-column: 1 / -1; min-height: 260px; }
    .lp-split { grid-template-columns: 1fr; }
    .lp-split-left { border-right: 0; border-bottom: 1px solid var(--lp-line); min-height: 320px; }
    .lp-form { grid-template-columns: 1fr; }
    .lp-form-main { border-right: 0; border-bottom: 1px solid var(--lp-line); }
    .lp-safety-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 860px) {
    .lp-nav-links { display: none; }
    .lp-nav-actions { margin-left: auto; }
    .lp-poster-foot { grid-template-columns: 1fr; align-items: start; }
    .lp-poster-actions { justify-content: flex-start; }
    .lp-sec-head { grid-template-columns: 1fr; gap: 14px; }
    .lp-sec-head .lp-micro { padding-top: 0; }
    .lp-pricing { grid-template-columns: 1fr; }
    .lp-row,
    .lp-table-head { grid-template-columns: 40px minmax(0, 1fr) 70px; }
    .lp-row-desc,
    .lp-table-head .lp-th-desc { display: none; }
    .lp-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    body.lp { --lp-pad: 16px; }
    .lp-topline { flex-wrap: wrap; gap: 8px; padding-top: 14px; }
    .lp-topline-rule { display: none; }
    .lp-topline-name { font-size: 9px; }
    .lp-topline-meta { font-size: 9px; letter-spacing: 0.12em; }
    .lp-poster { padding: 16px 14px 26px; }
    .lp-poster-head { grid-template-columns: repeat(2, 1fr); row-gap: 8px; }
    .lp-poster-head .lp-micro:nth-child(2) { justify-self: end; }
    .lp-poster-head .lp-micro:nth-child(3) { justify-self: start; }
    .lp-poster-head .lp-micro:last-child { justify-self: end; }
    .lp-visual { height: 190px; }
    .lp-chrome { width: 92%; }
    .lp-title { font-size: clamp(1.85rem, 9.4vw, 3rem); }
    .lp-lede { font-size: 11.5px; }
    .lp-poster-actions .lp-btn { width: 100%; }
    .lp-trio { grid-template-columns: 1fr; }
    .lp-card { min-height: 240px; }
    .lp-safety-grid { grid-template-columns: 1fr; }
    .lp-bar-row { grid-template-columns: 66px minmax(0, 1fr); }
    .lp-field-row { grid-template-columns: 1fr; }
    .lp-form-foot { flex-direction: column; align-items: stretch; gap: 14px; }
    .lp-form-foot .lp-btn { width: 100%; }
    /* Footer keeps three link columns side by side on phones, with the
       brand block spanning the full width above them. */
    .lp-footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 32px 14px;
    }
    .lp-footer-brand {
        grid-column: 1 / -1;
        max-width: none;
    }
    .lp-footer-col h4 {
        margin-bottom: 12px;
        font-size: 8.5px;
        letter-spacing: 0.16em;
    }
    .lp-footer-col a {
        padding: 4px 0;
        font-size: 9px;
        letter-spacing: 0.08em;
        white-space: nowrap;
    }
    .lp-footer-bottom { flex-direction: column; align-items: flex-start; }
    .lp-nav-actions .lp-btn { padding: 10px 14px; letter-spacing: 0.12em; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-ticker-track { animation: none; }
    .lp-reveal { opacity: 1; transform: none; transition: none; }
    /* Footer wordmark: the ShinyText island checks this media query in JS
       and paints a plain base fill instead of sweeping — no CSS override
       needed here (the old hand-rolled gradient/animation rules are gone,
       and touching text-fill on .lp-footer-word span would also hit the
       mounted .shiny-text root and turn "ASE" red). */
}