/* The new landing (build plan 0.5, .plans/043), ported from the
   devrel-helper prototype `bethere-ux/landing.html` (paper edition).
   Tokens live on `.lp` (the landing root, which carries `data-theme`). Each
   ported section paints its own paper/navy, so the sections not yet ported
   keep the app palette until their slice lands. Light = paper, dark = the
   site's navy (ASKS-4 §17). One ease; reduced motion settles everything.
   The hero is the exception: it is always the night room (R4.1), so it
   takes the dark tokens in both themes and the hall's card takes the
   page's back. */

.lp,
.lp:not([data-theme="dark"]) .lp-hall-box {
    --lp-paper: #f4f0e6;
    --lp-paper-2: #ebe5d6;
    --lp-ink: #121212;
    --lp-ink-2: #4a4740;
    --lp-ink-3: #67635b;
    --lp-line: rgba(18, 18, 18, 0.14);
    --lp-field: #6b63f0;
    --lp-t-field: #5a54cb;
    --lp-h-field: #6b63f0;
    --lp-t-warm: #af3f27;
    --lp-kw-bg: rgba(107, 99, 240, 0.38);
    --lp-sans: Inter, Anuphan, system-ui, sans-serif;
    --lp-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --lp-micro: 200ms;
}

.lp[data-theme="dark"],
.lp-hero {
    --lp-paper: #12152a;
    --lp-paper-2: #171b33;
    --lp-ink: #e9e4d3;
    --lp-ink-2: #b9b6ad;
    --lp-ink-3: #8f93a8;
    --lp-line: rgba(241, 236, 224, 0.16);
    --lp-t-field: #8f88ff;
    --lp-h-field: #8f88ff;
    --lp-t-warm: #ff7a5c;
}

.lp-wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Shared pieces */
.lp-kicker {
    font: 600 13px/1.4 var(--lp-sans);
    margin: 0 0 18px;
}
.lp-quote {
    font: 600 15px/1.3 var(--lp-sans);
    color: var(--lp-t-warm);
    margin: 0 0 10px;
}
.lp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 600 16px/1 var(--lp-sans);
    padding: 15px 22px;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid var(--lp-ink);
    background: transparent;
    color: var(--lp-ink);
    transition: transform var(--lp-micro) var(--lp-ease);
}
.lp-btn:hover {
    transform: translateY(-2px);
}
.lp-btn:focus-visible,
.lp-kw:focus-visible,
.lp-theme:focus-visible {
    outline: 3px solid var(--lp-field);
    outline-offset: 3px;
}
.lp-btn-primary {
    background: var(--lp-ink);
    color: var(--lp-paper);
}
a.lp-kw {
    text-decoration: none;
    font-weight: 700;
    color: inherit;
    background: linear-gradient(transparent 62%, var(--lp-kw-bg) 62%);
    border-bottom: 2px dotted var(--lp-field);
}
a.lp-kw:hover {
    background: var(--lp-kw-bg);
}
mark.lp-hl {
    background: linear-gradient(transparent 62%, var(--lp-kw-bg) 62%);
    color: inherit;
    font-weight: 700;
}

/* nav: the light bar (bethere-ux/landing.html `nav`). The language switch
   and the theme button sit inline; the section links fold away under 900 px. */
.lp-nav {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--lp-paper);
    color: var(--lp-ink);
    border-bottom: 2px solid var(--lp-ink);
    font: 400 15px/1.4 var(--lp-sans);
}
.lp-nav-row {
    display: flex;
    align-items: center;
    gap: 18px;
    height: 64px;
}
.lp-logo {
    font: 800 24px/1 var(--lp-sans);
    letter-spacing: -0.04em;
    text-decoration: none;
    color: var(--lp-ink);
}
.lp-logo::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    background: var(--lp-field);
    margin-left: 3px;
}
.lp-nav-links {
    display: flex;
    gap: 22px;
    margin-left: auto;
}
.lp-nav-links a {
    color: inherit;
    text-decoration: none;
}
.lp-nav-links a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}
.lp-nav-links a[aria-current="page"] {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
/* The app's `nav a[aria-current="page"]` paints an orange block (a tab look
   for the app header); in the site frame the current page is the underline
   above, in the header and the footer alike. */
.lp nav a[aria-current="page"] {
    background: transparent;
    color: inherit;
    border-color: transparent;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
.lp-lang .lang-switch {
    min-height: 44px;
    color: var(--lp-ink);
    font-size: 14px;
}
.lp-lang .lang-switch-chip {
    padding: 0;
    border: 0;
    border-bottom: 1px solid currentColor;
    border-radius: 0;
}
.lp-nav .lp-nav-btn {
    padding: 10px 14px;
    font-size: 14px;
}
.lp-nav-me {
    min-width: 40px;
    justify-content: center;
}
.lp-nav a:focus-visible,
.lp-lang .lang-switch:focus-visible {
    outline: 3px solid var(--lp-field);
    outline-offset: 3px;
}
@media (max-width: 767px) {
    /* Phones: the page links take their own row under the logo, rather than
       disappearing (the doors at the foot were the only way across). */
    .lp-nav-row {
        gap: 10px;
        height: auto;
        min-height: 56px;
        flex-wrap: wrap;
    }
    .lp-nav-links {
        order: 10;
        width: 100%;
        margin: 0;
        gap: 18px;
        overflow-x: auto;
        border-top: 1px solid var(--lp-line);
    }
    .lp-nav-links a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        white-space: nowrap;
    }
    .lp-lang {
        margin-left: auto;
    }
    .lp-nav-out {
        display: none;
    }
}
.lp-theme {
    background: none;
    border: 2px solid var(--lp-ink);
    color: var(--lp-ink);
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
    flex: none;
}

/* side index: dots on the right, wide screens only; a label on hover */
.lp-side {
    position: fixed;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    display: none;
    flex-direction: column;
    gap: 12px;
}
.lp-side a {
    position: relative;
    width: 10px;
    height: 10px;
    border: 2px solid var(--lp-ink);
    border-radius: 50%;
    background: var(--lp-paper);
    font-size: 0;
    text-decoration: none;
}
.lp-side a.on {
    background: var(--lp-ink);
    box-shadow: 0 0 0 2px var(--lp-paper);
}
.lp-side a::after {
    content: attr(data-label);
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    font: 600 12px/1 var(--lp-sans);
    background: var(--lp-ink);
    color: var(--lp-paper);
    padding: 5px 7px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--lp-micro) var(--lp-ease);
}
.lp-side a:hover::after,
.lp-side a:focus-visible::after {
    opacity: 1;
}
.lp-side a:focus-visible {
    outline: 3px solid var(--lp-field);
    outline-offset: 3px;
}
@media (min-width: 1240px) {
    .lp-side {
        display: flex;
    }
}

/* the "why a deposit" film */
.lp-film {
    /* The app's reset zeroes margins, which took the modal out of centre. */
    margin: auto;
    overflow: visible;
    padding: 0;
    border: 0;
    background: transparent;
    width: min(960px, 94vw);
    max-width: 94vw;
}
.lp-film::backdrop {
    background: rgba(18, 18, 18, 0.86);
}
.lp-film video {
    width: 100%;
    display: block;
}
/* Above the frame, not on it: the film's own text runs to the corners. */
.lp-film-close {
    position: absolute;
    top: -52px;
    right: 0;
    z-index: 1;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 2px solid #121212;
    background: #f4f0e6;
    color: #121212;
    font: 700 26px/1 var(--lp-sans);
    cursor: pointer;
}
.lp-film-close:focus-visible {
    outline: 3px solid #6b63f0;
    outline-offset: 2px;
}
.lp-theme svg {
    width: 18px;
    height: 18px;
}

/* 1 · hero, over the lit room (.plans/045 R4.1, room/room.js). Until the
   room's image is in, and if it never comes, the hero is its night colour. */
.lp-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #0e1020;
    color: var(--lp-ink);
    font: 400 17px/1.6 var(--lp-sans);
    padding: 72px 0 64px;
    border-bottom: 2px solid var(--lp-ink);
}
.lp-room {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    image-rendering: pixelated;
    opacity: 0;
    transition: opacity 600ms var(--lp-ease);
}
.lp-room.lp-room-on {
    opacity: 1;
}
/* After the canvas in paint order, under the copy: the left, where the
   words are, stays darker. */
.lp-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgba(14, 16, 32, 0.65) 0%,
        rgba(14, 16, 32, 0.25) 55%,
        rgba(14, 16, 32, 0.1) 100%
    );
}
.lp-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
    align-items: center;
}
/* room.js keeps its light off each child of this column (the quiet boxes) */
.lp-hero-text {
    min-width: 0;
}
.lp-hero .lp-kicker {
    color: var(--lp-t-field);
}
.lp-hero-h1 {
    margin: 0;
    font-weight: 700;
    font-size: 66px;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--lp-ink);
}
.lp-hero-h1-2 {
    color: var(--lp-h-field);
}
:lang(th) .lp-hero-h1 {
    line-height: 1.16;
    letter-spacing: -0.01em;
}
.lp-hero-sub,
.lp-hero-now {
    white-space: pre-line;
}
.lp-hero-sub {
    margin: 16px 0 24px;
    font-size: 19px;
    color: var(--lp-ink-2);
}
.lp-hero-now {
    font: 500 14px/1.5 var(--lp-sans);
    margin: -8px 0 26px;
    padding-left: 12px;
    border-left: 3px solid var(--lp-field);
    color: var(--lp-ink-2);
}
.lp-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
/* The payers' hall (.plans/045 R4.2): one chair per payer, solid = came. */
.lp-hall-box {
    display: grid;
    gap: 6px;
    padding: 20px;
    background: var(--lp-paper);
    color: var(--lp-ink);
    border: 2px solid var(--lp-ink);
}
.lp-hall {
    width: 100%;
    height: auto;
    display: block;
}
.lp-hall g {
    cursor: pointer;
    outline: none;
}
.lp-hall-hit {
    fill: transparent;
}
.lp-hall-came {
    fill: var(--lp-ink);
}
.lp-hall-gone {
    fill: none;
    stroke: var(--lp-ink-3);
    stroke-width: 1.6;
}
.lp-hall path {
    transition: opacity var(--lp-micro) var(--lp-ease);
}
.lp-hall-picking g:not(.lp-hall-on) path {
    opacity: 0.18;
}
.lp-hall g:focus-visible .lp-hall-came {
    fill: var(--lp-t-field);
}
.lp-hall-big {
    margin: 4px 0 0;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.lp-hall-big b {
    font: 800 44px/1 var(--lp-sans);
    letter-spacing: -0.03em;
}
.lp-hall-say {
    min-height: 1.4em;
    margin: 0;
    font: 600 13px/1.4 var(--lp-sans);
    color: var(--lp-ink-3);
}
.lp-hall-fine {
    margin: 0;
    font-size: 13px;
    color: var(--lp-ink-2);
}
@media (prefers-reduced-motion: reduce) {
    .lp-hall path,
    .lp-room {
        transition: none;
    }
    .lp-btn {
        transition: none;
    }
}

@media (max-width: 767px) {
    .lp-hero {
        padding: 40px 0;
    }
    .lp-hero-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}
@media (max-width: 480px) {
    .lp-hero-h1 {
        font-size: 46px;
    }
}

/* Shared section pieces */
.lp-h2 {
    margin: 0 0 24px;
    /* The app's global heading colours would win over the inherited ink. */
    font-weight: 700;
    font-size: 44px;
    line-height: 1.08;
    letter-spacing: -0.03em;
    max-width: 18em;
    color: var(--lp-ink);
}
:lang(th) .lp-h2 {
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.lp-card {
    background: var(--lp-paper);
    border: 2px solid var(--lp-ink);
    color: var(--lp-ink);
}
.lp-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.lp-chip {
    font: 600 12px/1 var(--lp-sans);
    border: 1.5px solid var(--lp-ink);
    padding: 5px 8px;
}
.lp-rule {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--lp-ink-2);
}

/* 2 · upcoming events */
.lp-events {
    background: var(--lp-paper-2);
    color: var(--lp-ink);
    font: 400 17px/1.6 var(--lp-sans);
    border-bottom: 2px solid var(--lp-ink);
    padding: 48px 0;
}
.lp-event-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.lp-event-list.lp-one {
    grid-template-columns: minmax(0, 560px);
}
.lp-event {
    padding: 20px;
    display: grid;
    gap: 8px;
    align-content: start;
    text-decoration: none;
    transition:
        transform var(--lp-micro) var(--lp-ease),
        box-shadow var(--lp-micro) var(--lp-ease);
}
a.lp-event:hover {
    transform: translate(-3px, -3px);
    box-shadow: 6px 6px 0 var(--lp-ink);
}
a.lp-event:focus-visible {
    outline: 3px solid var(--lp-field);
    outline-offset: 3px;
}
.lp-event h3 {
    margin: 0;
    color: var(--lp-ink);
    font-size: 21px;
    letter-spacing: -0.02em;
    line-height: 1.3;
}
.lp-when {
    font: 600 13px/1 var(--lp-sans);
    color: var(--lp-t-field);
}
.lp-meta {
    color: var(--lp-ink-2);
    font-size: 15px;
}
.lp-cover {
    display: block;
    width: calc(100% + 40px);
    height: auto;
    margin: -20px -20px 6px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-bottom: 2px solid var(--lp-ink);
}
.lp-event-empty {
    gap: 10px;
}
.lp-more {
    margin: 20px 0 0;
}
@media (prefers-reduced-motion: reduce) {
    .lp-event {
        transition: none;
    }
    a.lp-event:hover {
        transform: none;
    }
}
@media (max-width: 767px) {
    .lp-event-list {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 480px) {
    .lp-h2 {
        font-size: 30px;
    }
    .lp-event-list {
        grid-template-columns: 1fr;
    }
}

/* 3 · how it works: a swimlane. Columns are the four steps, rows the routes */
.lp {
    --lp-sol: #12b886;
    --lp-t-sol: #0b7354;
    --lp-ai: #ff5c39;
    --lp-t-ok: #167147;
    --lp-t-dev: #875916;
}
.lp[data-theme="dark"] {
    --lp-sol: #3ccf9e;
    --lp-t-sol: #3ccf9e;
    --lp-t-ok: #3ccf8e;
    --lp-t-dev: #e0a84a;
}
.lp-how {
    background: var(--lp-paper-2);
    color: var(--lp-ink);
    font: 400 17px/1.6 var(--lp-sans);
    border-bottom: 2px solid var(--lp-ink);
    padding: 72px 0;
}
.lp-lede {
    color: var(--lp-ink-2);
    font-size: 19px;
    margin: -8px 0 32px;
    max-width: 36em;
    white-space: pre-line;
}
.lp-fineprint {
    font-size: 13px;
    color: var(--lp-ink-3);
    margin: 14px 0 0;
}
.lp-tag {
    font: 600 10px/1 var(--lp-sans);
    letter-spacing: 0.12em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.lp-tag::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}
.lp-live {
    color: var(--lp-t-ok);
}
.lp-devnet {
    color: var(--lp-t-dev);
}
.lp-lanes {
    display: grid;
    /* The route column gives up width first: from 768px the four step
       columns sit at their longest word and 200px would overflow. */
    grid-template-columns: minmax(120px, 200px) repeat(4, 1fr);
    border: 2px solid var(--lp-ink);
    background: var(--lp-paper);
}
.lp-shead {
    padding: 16px 14px 12px;
    border-bottom: 2px solid var(--lp-ink);
    border-left: 1px solid var(--lp-line);
}
.lp-shead.lp-corner {
    border-left: 0;
}
.lp-shead h3 {
    margin: 2px 0 0;
    font-size: 19px;
    color: var(--lp-ink);
}
.lp-n {
    font: 700 12px/1 var(--lp-sans);
    color: var(--lp-ink-3);
}
.lp-lane {
    display: contents;
}
.lp-lane-thb {
    --lp-c: var(--lp-field);
    --lp-ct: var(--lp-t-field);
}
.lp-lane-sol {
    --lp-c: var(--lp-sol);
    --lp-ct: var(--lp-t-sol);
}
.lp-lane-ai {
    --lp-c: var(--lp-ai);
    --lp-ct: var(--lp-t-warm);
}
.lp-lane-toggle {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 10px;
    align-items: flex-start;
    text-align: left;
    padding: 16px 14px;
    background: none;
    border: 0;
    border-top: 1px solid var(--lp-line);
    cursor: pointer;
    color: var(--lp-ink);
    font: inherit;
}
.lp-lane-toggle:focus-visible {
    outline: 3px solid var(--lp-field);
    outline-offset: -3px;
}
.lp-ln {
    display: grid;
    flex: 1;
}
.lp-ln b {
    font-size: 15px;
    line-height: 1.3;
}
.lp-ln small {
    font-size: 12px;
    color: var(--lp-ink-3);
}
.lp-lane-toggle .lp-tag {
    margin-top: 3px;
}
.lp-box {
    width: 18px;
    height: 18px;
    flex: none;
    border: 2px solid var(--lp-c);
    display: grid;
    place-items: center;
    font: 800 12px/1 var(--lp-sans);
    font-style: normal;
    color: var(--lp-paper);
    margin-top: 1px;
}
.lp-lane-toggle[aria-pressed="true"] .lp-box {
    background: var(--lp-c);
}
.lp-lane-toggle[aria-pressed="true"] .lp-box::after {
    content: "\2713";
}
.lp-cell {
    position: relative;
    padding: 26px 14px 16px;
    border-top: 1px solid var(--lp-line);
    border-left: 1px solid var(--lp-line);
    transition: opacity var(--lp-micro) var(--lp-ease);
}
.lp-cell::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--lp-c) 0 10px, transparent 10px 16px);
    animation: lp-flow 1s linear infinite;
}
.lp-cell::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 14px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--lp-paper);
    border: 2px solid var(--lp-c);
}
@keyframes lp-flow {
    to {
        background-position: 16px 0;
    }
}
.lp-stp {
    display: none;
    font: 700 12px/1.3 var(--lp-sans);
    color: var(--lp-ink);
    margin-bottom: 2px;
}
.lp-cell p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--lp-ink-2);
}
.lp-cell em {
    display: block;
    font: 700 12px/1.4 var(--lp-sans);
    font-style: normal;
    color: var(--lp-ct);
    margin-top: 4px;
}
.lp-off .lp-cell {
    opacity: 0.22;
}
.lp-off .lp-cell::before {
    animation: none;
}
.lp-off .lp-lane-toggle {
    color: var(--lp-ink-3);
}
.lp-r {
    font: 600 11px/1 var(--lp-sans);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1.5px solid var(--lp-ink);
    padding: 3px 5px;
    margin-right: 4px;
    background: var(--lp-paper);
    color: var(--lp-ink);
}
:lang(th) .lp-r {
    letter-spacing: 0;
    font-size: 12px;
}
.lp-r-you {
    background: var(--lp-ink);
    color: var(--lp-paper);
}
.lp-r-prog {
    background: #0b7354;
    color: #f4f0e6;
    border-color: #0b7354;
}
.lp-r-agent {
    background: #167147;
    color: #f4f0e6;
    border-color: #167147;
}
.lp-lane-tabs {
    display: none;
}
@media (prefers-reduced-motion: reduce) {
    .lp-cell::before {
        animation: none;
    }
    .lp-cell {
        transition: none;
    }
}
@media (max-width: 767px) {
    .lp-lanes {
        display: block;
        border: 0;
        background: none;
    }
    .lp-shead {
        display: none;
    }
    .lp-lane-tabs {
        display: flex;
        border: 2px solid var(--lp-ink);
        margin-bottom: 12px;
    }
    .lp-lane-tabs button {
        flex: 1;
        font: 700 14px/1 var(--lp-sans);
        padding: 12px 6px;
        background: var(--lp-paper);
        color: var(--lp-ink);
        border: 0;
        border-left: 2px solid var(--lp-ink);
        cursor: pointer;
    }
    .lp-lane-tabs button:first-child {
        border-left: 0;
    }
    .lp-lane-tabs button[aria-selected="true"] {
        background: var(--lp-ink);
        color: var(--lp-paper);
    }
    .lp-lane:not(.lp-shown) {
        display: none;
    }
    .lp-lane {
        display: block;
        border: 2px solid var(--lp-ink);
        margin-bottom: 12px;
        background: var(--lp-paper);
    }
    .lp-lane-toggle {
        width: 100%;
        border-top: 0;
        border-bottom: 2px solid var(--lp-ink);
        cursor: default;
    }
    .lp-lane-toggle .lp-box {
        display: none;
    }
    /* One route at a time here, so a faded row would be the only row. */
    .lp-off .lp-cell {
        opacity: 1;
    }
    .lp-cell {
        border-left: 0;
        padding: 14px 14px 14px 44px;
    }
    .lp-stp {
        display: block;
    }
    .lp-cell::before {
        top: 0;
        bottom: 0;
        left: 21px;
        right: auto;
        width: 2px;
        height: auto;
        background: repeating-linear-gradient(180deg, var(--lp-c) 0 10px, transparent 10px 16px);
    }
    .lp-cell::after {
        top: 18px;
        left: 15px;
    }
}

/* 4 · so far, on the one night field (same in both themes) */
.lp-goal {
    background: #121212;
    color: #f4f0e6;
    font: 400 17px/1.6 var(--lp-sans);
    padding: 0;
    overflow: hidden;
}
.lp[data-theme="dark"] .lp-goal {
    border-top: 2px solid var(--lp-ink);
}
.lp-goal .lp-wrap {
    padding-top: 40px;
    padding-bottom: 40px;
}
.lp-tape {
    /* #f4f0e6 on #5a54cb is 5.18:1; ink on the brand #6b63f0 was 4.16, under
       AA for 15 px text (axe, CI 37381847919). */
    background: #5a54cb;
    color: #f4f0e6;
    transform: rotate(-1.2deg);
    margin: 28px -20px 0;
    border-block: 2px solid #121212;
    overflow: hidden;
    white-space: nowrap;
}
.lp-tape.lp-t2 {
    transform: rotate(1deg);
    margin: 0 -20px 28px;
}
.lp-tape-run {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 8px 0;
    font: 800 15px/1 var(--lp-sans);
    letter-spacing: 0.12em;
    animation: lp-tape 40s linear infinite;
}
.lp-t2 .lp-tape-run {
    animation-direction: reverse;
}
.lp-tape-run i {
    width: 8px;
    height: 8px;
    background: #f4f0e6;
    transform: rotate(45deg);
}
@keyframes lp-tape {
    to {
        transform: translateX(-50%);
    }
}
.lp-livebar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font: 600 13px/1.4 var(--lp-sans);
    color: rgba(244, 240, 230, 0.72);
}
.lp-livebar i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3ccf8e;
}
.lp-done {
    text-align: center;
    margin: 10px 0 0;
    font-size: 17px;
    white-space: pre-line;
}
.lp-goal mark.lp-hl {
    background: none;
    color: #8f88ff;
}
.lp-payers {
    font-size: 15px;
}
.lp-center {
    text-align: center;
}
.lp-goal .lp-fineprint {
    color: rgba(244, 240, 230, 0.66);
}
.lp-communities {
    margin-top: 36px;
    text-align: center;
}
.lp-goal .lp-kicker {
    color: #8f88ff;
}
.lp-slots {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.lp-slot {
    border: 2px solid #f4f0e6;
    padding: 10px 16px;
    font: 700 15px/1 var(--lp-sans);
    color: #f4f0e6;
    text-decoration: none;
}
.lp-slot-open {
    border-style: dashed;
    color: rgba(244, 240, 230, 0.72);
}
.lp-slot-open:focus-visible {
    outline: 3px solid #8f88ff;
    outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
    .lp-tape-run {
        animation: none;
    }
}

/* Read by screen readers, not drawn: the final figures behind a count-up. */
.lp-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* 5 · sponsors: a wireframe of where a logo actually goes */
.lp-sponsors {
    background: var(--lp-paper);
    color: var(--lp-ink);
    font: 400 17px/1.6 var(--lp-sans);
    border-bottom: 2px solid var(--lp-ink);
    padding: 72px 0;
}
.lp-sponsors .lp-kicker {
    color: var(--lp-t-field);
}
.lp-cats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 22px;
}
.lp-cat {
    font: 600 14px/1 var(--lp-sans);
    background: var(--lp-paper);
    border: 2px solid var(--lp-ink);
    padding: 10px 14px;
    cursor: pointer;
    color: var(--lp-ink);
}
.lp-cat[aria-pressed="true"] {
    background: var(--lp-ink);
    color: var(--lp-paper);
}
.lp-cat:focus-visible,
.lp-spot:focus-visible {
    outline: 3px solid var(--lp-field);
    outline-offset: 3px;
}
.lp-spots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.lp-spot {
    padding: 16px;
    transition: opacity var(--lp-micro) var(--lp-ease);
}
.lp-spot.lp-dim {
    opacity: 0.25;
}
.lp-spot svg {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 12px;
    background: var(--lp-paper-2);
}
.lp-spot h3 {
    margin: 0;
    font-size: 17px;
    letter-spacing: -0.01em;
    color: var(--lp-ink);
}
.lp-spot p {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--lp-ink-2);
}
.lp-st {
    font: 600 11px/1 var(--lp-sans);
    letter-spacing: 0.06em;
    float: right;
    padding: 4px 6px;
    border: 1.5px solid;
}
:lang(th) .lp-st {
    letter-spacing: 0;
}
.lp-st-yes {
    color: var(--lp-t-ok);
}
.lp-st-prop {
    color: var(--lp-t-dev);
}
.lp-wf-ink {
    fill: var(--lp-ink);
}
.lp-wf-dim {
    fill: var(--lp-ink-3);
}
.lp-wf-line {
    fill: none;
    stroke: var(--lp-ink);
    stroke-width: 2;
}
.lp-wf-field {
    fill: var(--lp-field);
}
.lp-wf-paper {
    fill: var(--lp-paper);
}
.lp-wf-paper2 {
    fill: var(--lp-paper-2);
}
.lp-wf-slot rect {
    fill: rgba(107, 99, 240, 0.16);
    stroke: var(--lp-field);
    stroke-width: 2;
    stroke-dasharray: 5 3;
}
.lp-contact {
    margin-top: 18px;
    padding: 22px;
}
.lp-contact h3 {
    margin: 0;
    font-size: 21px;
    color: var(--lp-ink);
}
.lp-who {
    margin: 6px 0 12px;
    color: var(--lp-ink-2);
    font-size: 15px;
}
.lp-who strong {
    color: var(--lp-ink);
}
.lp-who-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 10px 0 12px;
}
.lp-who-row .lp-who {
    margin: 0;
}
.lp-avatar {
    flex: none;
    width: 56px;
    height: 56px;
    object-fit: cover;
    border: 2px solid var(--lp-ink);
}
.lp-tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 16px 0 0;
}
.lp-tier {
    padding: 16px 18px;
    display: grid;
    gap: 2px;
}
.lp-tier b {
    font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.lp-tier span {
    font-size: 14px;
    color: var(--lp-ink-2);
}
.lp-tier.lp-gold {
    box-shadow: 6px 6px 0 var(--lp-field);
}
/* Wide screens with a mouse: the placement text shows on hover or focus. */
@media (hover: hover) and (min-width: 768px) {
    .lp-spot p {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition:
            opacity var(--lp-micro) var(--lp-ease),
            max-height var(--lp-micro) var(--lp-ease);
    }
    .lp-spot:hover p,
    .lp-spot:focus-within p,
    .lp-spot:focus p {
        max-height: 4em;
        opacity: 1;
    }
}
@media (prefers-reduced-motion: reduce) {
    .lp-spot,
    .lp-spot p {
        transition: none;
    }
}
@media (max-width: 767px) {
    .lp-spots {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 480px) {
    .lp-tiers {
        grid-template-columns: 1fr;
    }
    .lp-spots {
        gap: 10px;
    }
    .lp-spot {
        padding: 10px;
    }
    .lp-spot h3 {
        font-size: 14px;
    }
}

/* 6 · join: share, and the organizer card */
.lp-join {
    background: var(--lp-paper-2);
    color: var(--lp-ink);
    font: 400 17px/1.6 var(--lp-sans);
    border-bottom: 2px solid var(--lp-ink);
    padding: 72px 0;
}
.lp-join-lede {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}
.lp-join-card {
    max-width: 560px;
    padding: 26px;
    display: grid;
    gap: 14px;
    align-content: start;
}
.lp-join-card h3 {
    margin: 0;
    font-size: 22px;
    color: var(--lp-ink);
}
.lp-join-card > p {
    margin: 0;
    color: var(--lp-ink-2);
    white-space: pre-line;
}
.lp-join-details summary {
    list-style: none;
    width: fit-content;
}
.lp-join-details summary::-webkit-details-marker {
    display: none;
}
.lp-join-form {
    margin-top: 14px;
}
/* The shared waitlist form, in the landing's palette. */
.lp-join .landing-waitlist-form {
    margin: 0;
    max-width: none;
}
.lp-join .landing-waitlist-input {
    border-radius: 0;
    border: 2px solid var(--lp-ink);
    background: var(--lp-paper);
    color: var(--lp-ink);
}
.lp-join .landing-waitlist-input:focus-visible {
    outline: 3px solid var(--lp-field);
    outline-offset: 2px;
}
.lp-join .landing-waitlist-submit {
    border-radius: 0;
    box-shadow: none;
    background: var(--lp-ink);
    color: var(--lp-paper);
    border: 2px solid var(--lp-ink);
}
.lp-join .landing-waitlist-success-desc,
.lp-join .landing-waitlist-error {
    color: var(--lp-ink-2);
}

/* how it works: "why USDC on Solana", under the swimlane */
.lp-usdc {
    margin-top: 28px;
    padding: 26px;
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 10px 32px;
    border-top: 0;
    background-image: linear-gradient(90deg, #9945ff, #8752f3 25%, #5497d5 50%, #43b4ca 70%, #19fb9b);
    background-size: 100% 4px;
    background-repeat: no-repeat;
}
.lp-usdc .lp-kicker {
    color: var(--lp-t-field);
}
.lp-usdc h3 {
    margin: 0;
    font-size: 30px;
    letter-spacing: -0.03em;
    line-height: 1.15;
    white-space: pre-line;
    color: var(--lp-ink);
}
.lp-ref {
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--lp-ink-2);
}
.lp-usdc ol {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
    counter-reset: lp-u;
}
.lp-usdc li {
    display: grid;
    gap: 2px;
    counter-increment: lp-u;
    padding-left: 34px;
    position: relative;
}
.lp-usdc li::before {
    content: counter(lp-u);
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    border: 2px solid var(--lp-ink);
    display: grid;
    place-items: center;
    font: 700 12px/1 var(--lp-sans);
}
.lp-usdc li span {
    color: var(--lp-ink-2);
    font-size: 15px;
}
@media (max-width: 767px) {
    .lp-usdc {
        grid-template-columns: 1fr;
    }
}

/* footer: ink in light, the deepest navy in dark */
.lp-footer {
    background: #121212;
    color: #f4f0e6;
    font: 400 15px/1.6 var(--lp-sans);
    padding: 44px 0 28px;
}
.lp-frow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.lp-flogo {
    font: 800 24px/1 var(--lp-sans);
    letter-spacing: -0.04em;
    text-decoration: none;
    color: #f4f0e6;
}
.lp-flogo::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    background: #6b63f0;
    margin-left: 3px;
}
.lp-flinks {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}
.lp-flinks a {
    color: #f4f0e6;
    text-decoration: none;
}
.lp-flinks a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}
.lp-flinks a:focus-visible,
.lp-flogo:focus-visible {
    outline: 3px solid #8f88ff;
    outline-offset: 3px;
}
.lp-fine {
    border-top: 1px solid rgba(244, 240, 230, 0.2);
    margin-top: 26px;
    padding-top: 16px;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    color: rgba(244, 240, 230, 0.72);
}
.lp-version {
    font-variant-numeric: tabular-nums;
}

/* ===== Goal: the globe beside the bar (.plans/043 L10) ===== */
.lp-goal-grid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 40px;
    align-items: start;
    margin-top: 48px;
}
/* The goal text stays beside the globe when the country panel makes the
   globe column tall. */
@media (min-width: 768px) {
    .lp-goal-text {
        position: sticky;
        top: 96px;
        padding-top: 24px;
    }
}
@media (max-width: 767px) {
    .lp-goal-grid {
        grid-template-columns: 1fr;
    }
}
.lp-goal-text h2 {
    white-space: pre-line;
    /* Pinned, not inherited: the app's global h2 colour follows the app
       theme, the goal field is always dark. */
    color: #f4f0e6;
}
.lp-goal-text .lp-communities {
    text-align: left;
}
.lp-goal-text .lp-slots {
    justify-content: flex-start;
}
.lp-globe-col {
    justify-self: center;
    width: 100%;
    max-width: 460px;
}
.lp-globe {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    cursor: grab;
    /* Vertical swipes still scroll the page; horizontal drags turn the globe. */
    touch-action: pan-y;
}
.lp-globe.lp-dragging {
    cursor: grabbing;
}
.lp-globe-hint {
    margin: 8px 0;
    text-align: center;
    font-size: 13px;
    color: rgba(244, 240, 230, 0.66);
}
.lp-globe-search {
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    font: 600 14px/1 var(--lp-sans);
    background: #1c1c1c;
    color: #f4f0e6;
    border: 1.5px solid rgba(244, 240, 230, 0.3);
}
.lp-globe-search:focus-visible {
    outline: 3px solid #8f88ff;
    outline-offset: 2px;
}
.lp-globe-panel {
    margin-top: 12px;
    padding: 14px 16px;
    border: 1.5px solid rgba(244, 240, 230, 0.3);
}
.lp-globe-panel h3 {
    margin: 0;
    font-size: 20px;
}
.lp-globe-meta {
    margin: 2px 0 10px;
    font-size: 13px;
    color: rgba(244, 240, 230, 0.66);
}
.lp-globe-panel ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.lp-globe-panel li {
    display: grid;
    gap: 2px;
    font-size: 14px;
}
.lp-globe-panel li small {
    font-size: 12px;
    color: rgba(244, 240, 230, 0.66);
}
.lp-bar {
    height: 10px;
    margin-top: 26px;
    background: rgba(244, 240, 230, 0.12);
}
.lp-bar span {
    display: block;
    height: 100%;
    background: #8f88ff;
    transform-origin: left;
    animation: lp-bar-grow 1.2s var(--lp-ease) both;
}
.lp-bar-next {
    background: transparent;
    border: 1.5px dashed rgba(244, 240, 230, 0.35);
}
.lp-bar-next span {
    display: none;
}
.lp-barlabel {
    margin: 10px 0 0;
    color: rgba(244, 240, 230, 0.72);
}
.lp-barlabel strong {
    font-size: 22px;
    color: #f4f0e6;
}
@keyframes lp-bar-grow {
    from {
        transform: scaleX(0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .lp-bar span {
        animation: none;
    }
}

/* ===== Story: the commitment ladder, one room of chairs (.plans/043 L8) ===== */
.lp-story {
    padding: 72px 0;
    background: var(--lp-paper-2);
    color: var(--lp-ink);
    border-top: 2px solid var(--lp-ink);
    border-bottom: 2px solid var(--lp-ink);
}
.lp-story-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 48px;
    align-items: center;
}
@media (max-width: 767px) {
    .lp-story-grid {
        grid-template-columns: 1fr;
    }
}
.lp-story h2 {
    margin: 0;
    /* The app's global h2 colour would win over the inherited ink (axe:
       contrast on paper-2). */
    color: var(--lp-ink);
    font: 800 clamp(36px, 4.4vw, 58px) / 1.05 var(--lp-sans);
    white-space: pre-line;
}
.lp-pct {
    margin: 22px 0 6px;
    font: 800 clamp(96px, 13vw, 176px) / 0.9 var(--lp-sans);
    letter-spacing: -0.05em;
    font-variant-numeric: tabular-nums;
}
.lp-cap2 {
    min-height: 1.4em;
    margin: 0 0 18px;
    font: 600 15px/1.4 var(--lp-sans);
}
.lp-stages {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.lp-stage {
    padding: 10px 12px;
    font: 600 14px/1 var(--lp-sans);
    background: transparent;
    color: var(--lp-ink);
    border: 2px solid var(--lp-ink);
    cursor: pointer;
}
.lp-stage[aria-pressed="true"] {
    background: var(--lp-ink);
    color: var(--lp-paper);
}
.lp-stage:focus-visible {
    outline: 3px solid var(--lp-field);
    outline-offset: 2px;
}
.lp-allpaid {
    margin: 16px 0 0;
    font: 600 16px/1.5 var(--lp-sans);
}
.lp-ladder {
    margin: 12px 0 0;
    font-size: 14px;
}
.lp-ladder summary {
    cursor: pointer;
    font-weight: 600;
}
.lp-ladder table {
    width: 100%;
    margin: 10px 0 6px;
    border-collapse: collapse;
}
.lp-ladder th,
.lp-ladder td {
    padding: 6px 8px 6px 0;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--lp-line);
    font-variant-numeric: tabular-nums;
}
.lp-chairs svg {
    display: block;
    width: 100%;
    height: auto;
}
.lp-seat {
    fill: var(--lp-ink);
    stroke: var(--lp-t-warm);
    stroke-width: 0;
    transition:
        fill 600ms var(--lp-ease),
        stroke-width 600ms var(--lp-ease),
        opacity 600ms var(--lp-ease);
}
.lp-seat-empty {
    fill: transparent;
    stroke-width: 2.4;
}
.lp-seat-out {
    opacity: 0.18;
}
@media (prefers-reduced-motion: reduce) {
    .lp-seat {
        transition: none;
    }
}

/* ===== So far: the photo reel (.plans/043 L9) ===== */
.lp-reel {
    padding: 28px 0 8px;
}
.lp-reel-track {
    display: flex;
    gap: 14px;
    padding: 0 24px 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}
.lp-moment {
    flex: none;
    margin: 0;
    scroll-snap-align: start;
}
.lp-moment-open {
    display: block;
    padding: 0;
    background: none;
    border: 2px solid #f4f0e6;
    cursor: zoom-in;
}
.lp-moment-open:focus-visible {
    outline: 3px solid #8f88ff;
    outline-offset: 3px;
}
.lp-moment img {
    display: block;
    height: 200px;
    width: auto;
}
.lp-moment figcaption {
    margin-top: 6px;
    font: 600 13px/1.3 var(--lp-sans);
    color: rgba(244, 240, 230, 0.72);
}
.lp-reel-remove {
    margin: 4px 24px 0;
    font-size: 13px;
    color: rgba(244, 240, 230, 0.72);
}
.lp-reel-remove a {
    color: #f4f0e6;
}
.lp-photo {
    /* Centred like the film: the app's reset zeroes dialog margins, and the
       close button sits above the frame. */
    margin: auto;
    max-width: min(94vw, 1600px);
    padding: 0;
    background: #121212;
    border: 0;
    overflow: visible;
}
.lp-photo::backdrop {
    background: rgba(0, 0, 0, 0.82);
}
.lp-photo img {
    display: block;
    max-width: 100%;
    max-height: 86vh;
    width: auto;
    height: auto;
}
.lp-photo-cap {
    margin: 0;
    padding: 8px 12px;
    font: 600 14px/1.3 var(--lp-sans);
    color: #f4f0e6;
}

/* ===== Doors: every page ends on the others (.plans/045 R4.0) ===== */
.lp-doors-sec {
    padding: 40px 0;
    border-top: 2px solid var(--lp-ink);
    /* Its own ground: without it the app's dark body showed through and the
       ink heading vanished in the light theme. */
    background: var(--lp-paper);
    color: var(--lp-ink);
}
/* /events: the Discover list inside the site frame. Its rules use the app's
   colour variables, so they are mapped to the site theme here and the list
   follows light and dark like the rest of the frame (.plans/045 R4.0). */
.lp-events-sec {
    padding: 8px 0 48px;
    background: var(--lp-paper);
    color: var(--lp-ink);
    --text-primary: var(--lp-ink);
    --text-heading: var(--lp-ink);
    --text-secondary: var(--lp-ink-2);
    --text-muted: var(--lp-ink-3);
    --border: var(--lp-line);
    --bg-void: var(--lp-paper-2);
    --bg-card: var(--lp-paper-2);
    --bg-secondary: var(--lp-paper-2);
    /* The poster card's date chip sits on this one. */
    --bg-primary: var(--lp-paper);
    /* The app's orange is 2.44:1 on paper-2 (axe, the date chip's month);
       the site's link colour is 4.69:1 light and 5.75:1 dark. */
    --accent: var(--lp-t-field);
    /* The date chip's ground: the app's orange tint under the month cost it
       AA; plain paper keeps 5.18:1 light and 6.12:1 dark. */
    --accent-bg: var(--lp-paper);
    --accent-border: var(--lp-line);
}
.lp-doors-sec .lp-h2 {
    margin: 0 0 18px;
}
.lp-doors {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.lp-door {
    display: grid;
    gap: 8px;
    align-content: start;
    padding: 20px;
    border: 2px solid var(--lp-ink);
    background: var(--lp-paper);
    color: var(--lp-ink);
    text-decoration: none;
    transition:
        transform var(--lp-micro) var(--lp-ease),
        box-shadow var(--lp-micro) var(--lp-ease);
}
.lp-door:hover {
    transform: translate(-3px, -3px);
    box-shadow: 6px 6px 0 var(--lp-ink);
}
.lp-door b {
    font-size: 20px;
}
.lp-door span {
    color: var(--lp-ink-2);
}
.lp-door i {
    font-style: normal;
    font-weight: 700;
    color: var(--lp-t-field);
    margin-top: 6px;
}
.lp-door-try {
    grid-column: 1 / -1;
    border-color: var(--lp-t-dev);
    border-style: dashed;
}
.lp-door-try i {
    color: var(--lp-t-dev);
}
.lp-try-link {
    margin: 0 0 32px;
    font-weight: 700;
}
.lp-try-link a {
    color: var(--lp-t-dev);
}
@media (prefers-reduced-motion: reduce) {
    .lp-door {
        transition: none;
    }
    .lp-door:hover {
        transform: none;
    }
}
@media (max-width: 767px) {
    .lp-doors {
        grid-template-columns: 1fr;
    }
}