/* ==========================================================================
   Host An App — landing.css
   --------------------------------------------------------------------------
   Marketing surfaces: hero, sections, integrations, publishing machine,
   tiers, FAQ, pricing, showcase, playground, legal pages, error/login gate,
   provider picker, payments return, consent, demo scenes. Requires core.css.
   See AGENTS.md (CSS: modular stylesheets).
   ========================================================================== */

/* PAPER RESPONSIVE — landing surfaces. Shared chrome lives in core.css. */

/* JS toggles the connect panel's mode with the hidden attribute
   (client tabs / terminal / download), but authored display values
   (e.g. .integ-tabs' flex) beat the UA's [hidden] rule — same guard
   the other bundles carry. */
[hidden] { display: none !important; }

@media (max-width: 600px) {

    .hero,
    .section,
    .error-hero,
    .gate {
        width: calc(100% - 28px);
    }

    .error-hero h1 {
        font-size: 46px;
    }

    .gate {
        padding: 40px 0;
    }

    /* ---- hero ---- */

    .hero {
        padding: 56px 0 48px;
    }

    /* scale with the viewport instead of a fixed 64px that overflows
       narrow phones (320-430px) */
    .hero-title {
        font-size: clamp(40px, 12.5vw, 64px);
        letter-spacing: -.065em;
    }

    .hero-subtitle {
        margin-top: 26px;
        font-size: 16px;
    }

    /* stack CTAs full-width — they do not fit side by side on phones */
    .hero-actions {
        margin-top: 24px;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .hero-actions .button {
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* live ledger — 3 equal columns; labels wrap instead of overflowing */
    .hero-ledger {
        margin-top: 28px;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .ledger-sep {
        display: none;
    }

    .ledger-num {
        font-size: clamp(15px, 4.5vw, 19px);
    }

    .ledger-label {
        font-size: 8px;
        line-height: 1.45;
    }

    /* ---- sections ---- */

    .section {
        margin-bottom: 90px;
    }

    /* ---- integrations ---- */

    .config-panel {
        padding: 20px 18px 60px;
        border-radius: 16px;
    }

    /* ---- publishing machine ---- */

    .machine {
        border-radius: 18px;
    }

    /* brand + state wrap instead of squishing on very narrow screens */
    .machine-header {
        height: auto;
        min-height: 70px;
        padding: 14px 18px;
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .editor-top {
        padding: 10px 14px;
    }

    .editor-types {
        gap: 10px;
    }

    .type-btn {
        padding: 8px 2px 10px;
        font-size: 12px;
    }

    .editor textarea {
        height: 400px;
        padding: 18px;
        font-size: 12px;
    }

    .deploy-card {
        padding: 20px;
    }
}
/* =========================================================
   PAPER HERO — infrastructure edition
   Serious statement, live stats, and the platform topology
   diagram (SVG, animated packets, reduced-motion aware).
========================================================= */

.hero {
    width: min(1220px, calc(100% - 40px));
    margin: auto;
    padding: 84px 0 40px;
}

.hero-copy {
    position: relative;
    z-index: 10;
    max-width: 900px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 8px 13px;

    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg-surface);

    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .02em;

    animation: enter .8s both;
}

.spark {
    color: var(--orange);
    font-size: 14px;
}

.hero-title {
    margin: 28px 0 0;
    max-width: 1000px;

    font-size: clamp(52px, 7.2vw, 112px);
    font-weight: 700;
    line-height: .9;
    letter-spacing: -.075em;

    animation: enter .9s .08s both;
}

.hero-title em {
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -.04em;

    /* hand-drawn orange squiggle under the key word */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='7' viewBox='0 0 52 7'%3E%3Cpath d='M0 4 Q6.5 0 13 4 T26 4 T39 4 T52 4' fill='none' stroke='%23b53a0a' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-position: left 96%;
    background-size: 52px 7px;
    padding-bottom: .07em;
}

.hero-subtitle {
    max-width: 680px;
    margin: 32px 0 0;

    color: var(--muted);

    font-size: 17.5px;
    line-height: 1.65;

    animation: enter .9s .16s both;
}

.hero-actions {
    margin-top: 30px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;

    animation: enter .9s .24s both;
}

/* mono microcopy strip under the CTAs — the platform facts,
   stated plainly, like a spec sheet header */

/* live ledger — real numbers from /api/v1/stats */

.hero-ledger {
    margin-top: 38px;

    display: flex;
    align-items: stretch;
    gap: 26px;

    animation: enter .9s .32s both;
}

.ledger-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ledger-num {
    font-family: var(--mono);
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -.02em;

    font-variant-numeric: tabular-nums;
}

.ledger-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;

    color: var(--muted);
}

.ledger-sep {
    width: 1px;
    background: var(--line);
}

.ledger-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;

    box-shadow: 0 0 0 0 rgba(32, 165, 107, .5);
    animation: statusPulse 2.5s infinite;
}

@keyframes enter {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Buttons are shared primitives and live in core.css; surfaces compose
   .button/.button-primary/.button-secondary and add their own scopes. */
/* =========================================================
   PAPER SECTIONS
========================================================= */

.section {
    width: min(1220px, calc(100% - 40px));
    margin: 0 auto 150px;
}

.kicker {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;

    color: var(--orange);
}

/* =========================================================
   INTEGRATIONS
========================================================= */

.config-panel {
    margin-top: 15px;

    min-height: 140px;

    padding: 25px 25px 62px;

    background: #181817;
    color: #deddd8;

    border-radius: 20px;

    position: relative;
}

.config-panel pre {
    margin: 20px 0 0;

    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.8;

    white-space: pre-wrap;

    transition: opacity .2s, transform .2s;
}

/* ---- config note — free/managed caption under the install snippet ---- */
.config-note {
    max-width: 720px;
    margin: 16px 0 0;

    color: var(--muted);
    font-size: 13px;
    line-height: 1.65;
}

.config-note strong {
    color: var(--text);
    font-weight: 650;
}

.config-note code {
    font-family: var(--mono);
    font-size: 12px;
}

/* ---- COPY — command chip inside dark config panel ---- */
.copy-button {
    position: absolute;
    right: 18px;
    bottom: 18px;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 9px 13px;
    border-radius: 10px;

    border: 1px solid #2d2d2b;
    background: #232321;
    color: #c8c5be;

    font-family: var(--sans);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1;

    cursor: pointer;

    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    transition:
        transform .42s cubic-bezier(.16,1,.3,1),
        background .22s ease,
        color .22s ease,
        border-color .22s ease,
        box-shadow .42s cubic-bezier(.16,1,.3,1);
}

.copy-button::before {
    content: "";
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='5' width='8' height='8' rx='1.7'/%3E%3Cpath d='M3 8V4.7A1.7 1.7 0 0 1 4.7 3H8'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='5' width='8' height='8' rx='1.7'/%3E%3Cpath d='M3 8V4.7A1.7 1.7 0 0 1 4.7 3H8'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: .9;
    transition: transform .42s cubic-bezier(.16,1,.3,1);
}

.copy-button:hover {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--on-accent);
    transform: translateY(-1.5px);
    box-shadow: 0 8px 22px rgba(181,58,10,.32);
}

.copy-button:hover::before { transform: translateY(-1px); }

.copy-button:active {
    transform: scale(.97);
    transition-duration: .12s;
}

.copy-button.is-copied {
    background: #f4f2ec;
    border-color: #f4f2ec;
    color: #1a1a18;
    box-shadow: 0 4px 16px rgba(0,0,0,.14);
}

.copy-button.is-copied::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.6 8.15L6.55 11.1L12.4 4.85' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.6 8.15L6.55 11.1L12.4 4.85' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    animation: copyCheckIn .36s cubic-bezier(.16,1,.3,1);
}

@keyframes copyCheckIn {
    0% { transform: scale(.55) rotate(-10deg); }
    100% { transform: scale(1) rotate(0); }
}

.copy-button:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}

/* =========================================================
   PLAYGROUND / THE PUBLISHING MACHINE
========================================================= */

.machine {
    background: #181817;
    color: white;

    border-radius: 26px;
    overflow: hidden;

    box-shadow: 0 35px 100px rgba(0, 0, 0, .18);
}

.machine-header {
    height: 70px;
    padding: 0 25px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid #30302e;
}

.machine-brand {
    display: flex;
    align-items: center;
    gap: 10px;

    font-size: 13px;
    font-weight: 650;
}

.machine-led {
    width: 8px;
    height: 8px;

    border-radius: 50%;
    background: var(--orange);

    animation: statusPulse 2s infinite;
}

.machine-state {
    font-family: var(--mono);
    font-size: 10px;
    color: #9b9890;
}

.editor {
    min-height: 540px;
    border-right: 1px solid #30302e;
}

.editor-top {
    min-height: 60px;
    padding: 10px 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;

    border-bottom: 1px solid #30302e;
}

.editor-file {
    display: flex;
    align-items: center;
    gap: 10px;

    font-family: var(--mono);
    font-size: 11px;
}

.editor-dot {
    width: 8px;
    height: 8px;
    background: var(--orange);
    border-radius: 2px;
    flex-shrink: 0;
}

.editor-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---- TYPE SWITCHER — underline tabs, not pills ---- */
.editor-types {
    display: inline-flex;
    align-items: end;
    gap: 18px;

    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.type-btn {
    position: relative;
    border: 0;
    cursor: pointer;

    padding: 13px 4px 15px;
    margin-bottom: -1px;
    border-radius: 0;

    background: transparent;
    color: #9b9890;

    font-family: var(--sans);
    font-size: 12.5px;
    font-weight: 550;
    letter-spacing: -.015em;
    line-height: 1;

    transition: color .22s ease, transform .22s cubic-bezier(.16,1,.3,1);
}

.type-btn::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--orange);
    transform: scaleX(0);
    transform-origin: 50% 50%;
    transition: transform .34s cubic-bezier(.16,1,.3,1);
    border-radius: 2px 2px 0 0;
}

.type-btn:hover {
    color: #b8b5b0;
    background: transparent;
}

.type-btn:active { transform: scale(.96); }

.type-btn.is-active {
    background: transparent;
    color: #f4f2ec;
    font-weight: 700;
    box-shadow: none;
    animation: none;
}

.type-btn.is-active::after { transform: scaleX(1); }

.type-btn.is-active:hover { color: #fff; }

/* ---- UPLOAD — dashed ghost that solidifies on hover ---- */
.upload-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 8px 12px;
    border-radius: 9px;

    border: 1px dashed #2f2f2d;
    background: #1e1e1c;
    color: #9a9893;

    cursor: pointer;

    font-family: var(--sans);
    font-size: 12px;
    font-weight: 550;
    letter-spacing: -.01em;
    line-height: 1;

    transition:
        color .22s ease,
        border-color .22s ease,
        background .22s ease,
        transform .42s cubic-bezier(.16,1,.3,1),
        box-shadow .22s ease;
}

.upload-button::before {
    content: "";
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 11.6V3.8M8 3.8L4.7 7.1M8 3.8L11.3 7.1M3 10.6V11.9C3 12.45 3.45 12.9 4 12.9H12C12.55 12.9 13 12.45 13 11.9V10.6' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 11.6V3.8M8 3.8L4.7 7.1M8 3.8L11.3 7.1M3 10.6V11.9C3 12.45 3.45 12.9 4 12.9H12C12.55 12.9 13 12.45 13 11.9V10.6' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: .85;
    transition: transform .42s cubic-bezier(.16,1,.3,1);
}

.upload-button:hover {
    color: #f4f2ec;
    border-style: solid;
    border-color: #3a3a38;
    background: #2a2a28;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,.14);
}

.upload-button:hover::before { transform: translateY(-1.5px); }

.upload-button:active {
    transform: scale(.97);
    transition-duration: .12s;
}

.type-btn:focus-visible,
.upload-button:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}

.editor textarea {
    width: 100%;
    height: 480px;

    padding: 25px;

    border: 0;
    outline: 0;
    resize: none;

    background: transparent;

    color: #deddd8;

    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.75;
}

.editor textarea::placeholder {
    color: #555;
}

.deploy-card {
    padding: 24px;

    background: #232321;
    border: 1px solid #2d2d2b;
    border-radius: 17px;

    transition: background .5s;
}

.deploy-status-label {
    font-family: var(--mono);
    font-size: 10px;
    color: #9b9890;
}

.deploy-orb {
    width: 56px;
    height: 56px;

    margin: 20px 0 16px;

    display: grid;
    place-items: center;

    background: #2b2b29;
    border-radius: 50%;

    font-size: 21px;

    transition:
        background .5s,
        color .5s,
        box-shadow .5s,
        transform .5s;
}

.deploy-orb svg {
    width: 24px;
    height: 24px;

    display: block;
}

.deploy-card.live .deploy-orb {
    color: var(--green);
    background: rgba(32, 165, 107, .12);
    box-shadow: 0 0 35px rgba(32, 165, 107, .18);

    transform: scale(1.08);
}

.deploy-card h3 {
    margin: 0;

    font-size: 20px;
    letter-spacing: -.04em;
}

.deploy-url {
    display: none;

    margin-top: 16px;

    padding: 10px;

    background: #1a1a19;
    border-radius: 8px;

    font-family: var(--mono);
    font-size: 10px;
    color: var(--green);

    word-break: break-all;
}

.deploy-card.live .deploy-url {
    display: block;
}

.deploy-url:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.deploy-open {
    display: none;

    margin-top: 12px;

    padding: 11px 14px;

    background: var(--orange);
    color: var(--on-accent);

    border-radius: 10px;

    font-size: 12px;
    font-weight: 700;

    transition: transform .2s, background .2s;
}

.deploy-card.live .deploy-open {
    display: inline-block;
    width: 100%;
    text-align: center;
}

.deploy-open:hover {
    transform: translateY(-2px);
    background: var(--accent-hover);
}

.logs {
    margin-top: 18px;

    min-height: 130px;

    font-family: var(--mono);
    font-size: 10px;
    line-height: 1.9;

    color: #9b9890;

    overflow: hidden;
}

.publish-button {
    margin-top: auto;

    width: 100%;

    border: 0;
    border-radius: var(--r-md); /* ramp (was one-off 13px) */

    padding: 16px;

    background: var(--orange);
    color: var(--on-accent);

    font-weight: 750;
    font-size: 13px;

    cursor: pointer;

    transition:
        transform .2s,
        background .2s;
}

.publish-button:hover {
    transform: translateY(-3px);
    background: var(--accent-hover);
}

.publish-button:disabled {
    cursor: wait;
    opacity: .8;
}

/* =========================================================
   TIERS — the platform's two products, side by side.
   Free tier on paper; managed tier inverted to ink so the
   serious product reads as the heavyweight.
========================================================= */

.tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 16px;
}

.tier {
    position: relative;
    display: flex;
    flex-direction: column;

    padding: 30px;

    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--bg-surface);
}

.tier-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.tier-name {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}

.tier-badge {
    padding: 6px 12px;

    border: 1px solid var(--line);
    border-radius: 999px;

    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--muted);
}

.tier-badge--live {
    color: var(--green);
    border-color: rgba(32, 165, 107, .4);
}

.tier-title {
    margin: 26px 0 0;

    font-size: clamp(26px, 2.8vw, 38px);
    font-weight: 700;
    letter-spacing: -.05em;
    line-height: 1.02;
}

.tier-title em {
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -.03em;
    color: var(--orange);
}

.tier-desc {
    max-width: 48ch;
    margin: 12px 0 0;

    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
}

.tier-list {
    margin: 26px 0;
    padding: 0;
    list-style: none;

    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tier-list li {
    position: relative;
    padding-left: 22px;

    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text);
}

.tier-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;

    width: 12px;
    height: 2px;
    background: var(--orange);
}

.tier-list code {
    font-family: var(--mono);
    font-size: 11.5px;

    padding: .1em .35em;
    border-radius: 5px;
    background: rgba(23, 23, 21, .06);
}

.tier-foot {
    margin-top: auto;
    padding-top: 20px;

    border-top: 1px dashed var(--line);

    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: .04em;
    color: var(--muted);
}

/* The in-prose link ("See what each plan includes") inherits the small
   tier-foot size; give its hit area height without moving the text. */
.tier-foot a {
    padding: 4px 0;
}

/* The managed tier card's upgrade CTA (full width, above the footnote). */
.tier-cta {
    margin-top: auto;
    width: 100%;
    margin-bottom: 14px;
}

.tier-cta + .tier-foot {
    margin-top: 0;
}

/* The managed tier's plan prices: what the workspace costs, stated on the
   card that sells it. Two rows, mono labels, amounts right-aligned. */
.tier-price {
    margin: 0 0 22px;

    display: flex;
    flex-direction: column;
    gap: 8px;

    padding: 14px 0 0;
    border-top: 1px dashed var(--line);
}

.tier-price__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.tier-price__plan {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.tier-price__amount {
    font-size: 13.5px;
    font-weight: 700;
}

.tiers--band .tier--paper .tier-price {
    border-top-color: rgba(23, 23, 21, .12);
}

.tiers--band .tier--paper .tier-price__plan {
    color: var(--text-muted);
}

/* Inline link inside the closing CTA strip. The strip is an always-dark
   band (--ink-panel fill), so it carries its own bright accent: the paper
   accent (#b53a0a) measures 3.06:1 on it, and the larger token block for
   the strip keeps `.cta-strip .kicker` and the CTA title's em readable too. */
.cta-link {
    color: var(--orange);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cta-link:hover { color: var(--accent-hover); }

/* =========================================================
   FAQ — native details/summary, no JS
========================================================= */

/* =========================================================
   PRICING PAGE (generated from the plan catalogue)
========================================================= */

.dash-offer__link {
    margin-left: 10px;
    font-size: 12.5px;
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.pricing-hero {
    padding: 64px 0 8px;
    text-align: center;
}

.pricing-hero__title {
    margin: 14px 0 0;
    font-size: clamp(30px, 4.4vw, 52px);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: 1.04;
    color: var(--ink);
}

.pricing-hero__lead {
    max-width: 62ch;
    margin: 16px auto 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--muted);
}

.pricing-plans { padding: 34px 0 8px; }

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 18px;
    max-width: 860px;
    margin: 0 auto;
}

.pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 26px 24px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--paper-bright);
}

.pricing-card--featured {
    border-color: var(--orange);
    box-shadow: 0 18px 44px rgba(23, 23, 21, .07);
}

.pricing-card__flag {
    position: absolute;
    top: -11px;
    left: 24px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--orange);
    color: var(--on-accent);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.pricing-card__name {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.pricing-card__price {
    font-family: var(--serif);
    font-size: 34px;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--ink);
}

.pricing-card__tagline {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--muted);
}

.pricing-card__limit {
    align-self: flex-start;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--orange-soft);
    color: var(--orange);
    font-family: var(--mono);
    font-size: 11.5px;
}

.pricing-card__features {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 13.5px;
    color: var(--text);
}

.pricing-card__features li {
    position: relative;
    padding-left: 18px;
}

.pricing-card__features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--green);
    font-size: 12px;
}

.pricing-card__cta {
    margin-top: auto;
    text-align: center;
}

.pricing-note {
    max-width: 860px;
    margin: 14px auto 0;
    text-align: center;
    font-size: 12.5px;
    color: var(--muted);
}

.pricing-compare { padding: 46px 0 8px; }

.pricing-section__title {
    margin: 0;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 700;
    letter-spacing: -.035em;
}

.pricing-section__lead {
    max-width: 62ch;
    margin: 10px 0 20px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--muted);
}

.pricing-tablewrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--paper-bright);
}

.pricing-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 13.5px;
}

.pricing-table th,
.pricing-table td {
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.pricing-table thead th {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
}

.pricing-table tbody th { font-weight: 600; color: var(--ink); width: 42%; }
.pricing-table td { color: var(--text); }
.pricing-table tbody tr:last-child th,
.pricing-table tbody tr:last-child td { border-bottom: none; }

.pricing-table__detail {
    display: block;
    margin-top: 3px;
    font-weight: 400;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--muted);
}

.pricing-faq { padding: 46px 0 72px; }

.pricing-faq__list {
    max-width: 760px;
    margin-top: 12px;
}

.pricing-faq__item { border-bottom: 1px solid var(--line); }
.pricing-faq__item:first-child { border-top: 1px solid var(--line); }

.pricing-faq__q {
    padding: 16px 2px;
    cursor: pointer;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--ink);
    list-style: none;
}

.pricing-faq__q::-webkit-details-marker { display: none; }

.pricing-faq__a {
    padding: 0 2px 16px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--muted);
}

.pricing-faq__a a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 430px) {

    .pricing-hero { padding-top: 40px; }
    .pricing-card { padding: 22px 18px; }
}

.faq {
    max-width: 860px;
}

.faq-item { border-bottom: 1px solid var(--line); }

.faq-item:first-child { border-top: 1px solid var(--line); }

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding: 20px 2px;

    cursor: pointer;
    list-style: none;

    font-size: 16.5px;
    font-weight: 650;
    letter-spacing: -.02em;
    color: var(--ink);

    transition: color .15s ease;
}

.faq-q::-webkit-details-marker { display: none; }

.faq-q:hover { color: var(--orange); }

.faq-q::after {
    content: "+";
    flex-shrink: 0;

    font-family: var(--mono);
    font-weight: 400;
    font-size: 19px;
    color: var(--orange);

    transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}

.faq-item[open] .faq-q::after { transform: rotate(45deg); }

.faq-a {
    padding: 0 26px 22px 2px;
}

.faq-a p {
    margin: 0;
    max-width: 68ch;

    color: var(--muted);
    font-size: 14px;
    line-height: 1.65;
}

/* =========================================================
   LANDING RESPONSIVE — infrastructure edition blocks
========================================================= */

@media (max-width: 600px) {

    .tier { padding: 24px 18px; }

    .faq-a { padding-right: 8px; }
}

/* =========================================================
   PAPER ERROR PAGE (404) + PASSWORD GATE (login)
   Paper-theme twins of the marketing pages: same header,
   footer, buttons and type. The base body rule already
   stretches the page (flex column, min-height 100vh), so the
   footer sits at the bottom even on short pages.
========================================================= */

/* anchors borrowing the button look (404 actions) */
a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* --- 404 -------------------------------------------------- */

.error-hero {
    flex: 1;
    width: min(1220px, calc(100% - 40px));
    margin: auto;
    padding: 100px 0 130px;
}

.error-hero h1 {
    margin: 28px 0 0;

    font-size: clamp(54px, 8vw, 108px);
    font-weight: 700;
    line-height: .9;
    letter-spacing: -.085em;

    animation: enter .9s .08s both;
}

.error-hero h1 em {
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -.04em;
}

.error-hero h1 .orange { color: var(--orange); }
.error-hero h1 .error-hero__quiet { color: var(--text-muted); }

.error-hero__text {
    max-width: 560px;
    margin: 30px 0 0;

    color: var(--muted);
    font-size: 17px;
    line-height: 1.6;

    animation: enter .9s .16s both;
}

/* --- payments return page ---------------------------------- */
/* Platform-owned confirmation after hosted Stripe checkout: an animated
   green checkmark draw, a scaling ring, a spark cascade, and content
   that staggers up. Pure SVG/CSS motion — no script, so it is CSP-safe
   and works with JS disabled. Namespace: pay-return (BEM). */
.pay-return {
    flex: 1;
    width: min(1220px, calc(100% - 40px));
    margin: auto;
    padding: 72px 0 110px;
    display: grid;
    place-items: center;
}

.pay-return__card {
    position: relative;
    width: min(560px, 100%);
    text-align: center;
    padding: 56px 44px 52px;
    background: var(--paper-bright);
    border: 1px solid var(--line);
    border-radius: 26px;
    box-shadow: 0 30px 70px rgba(23, 23, 21, .09);
}

.pay-return__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg-surface);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    animation: payrise .7s cubic-bezier(.2, 0, 0, 1) .35s both;
}

.pay-return__title {
    margin: 22px 0 0;
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--text-bright);
    animation: payrise .7s cubic-bezier(.2, 0, 0, 1) .42s both;
}

.pay-return__text {
    max-width: 420px;
    margin: 18px auto 0;
    color: var(--muted);
    font-size: 16.5px;
    line-height: 1.6;
    animation: payrise .7s cubic-bezier(.2, 0, 0, 1) .5s both;
}

.pay-return__actions {
    margin-top: 32px;
    display: flex;
    justify-content: center;
    animation: payrise .7s cubic-bezier(.2, 0, 0, 1) .58s both;
}

.pay-return__actions .button-primary {
    background: var(--success-fill);
    color: var(--on-success);
    box-shadow: 0 12px 30px rgba(32, 165, 107, .32);
}
.pay-return__actions .button-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 38px rgba(32, 165, 107, .4);
}

/* The badge: ring scales in, checkmark draws, burst sparkles pop. */
.pay-return__badge {
    position: relative;
    width: 118px;
    height: 118px;
    margin: 0 auto 6px;
}

.pay-return__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.pay-return__ringcircle {
    fill: none;
    stroke: var(--green);
    stroke-width: 7;
    stroke-linecap: round;
    stroke-dasharray: calc(2 * 3.1416 * 54);
    stroke-dashoffset: calc(2 * 3.1416 * 54);
    animation: payring .7s cubic-bezier(.2, 0, 0, 1) .05s forwards;
}

.pay-return__check {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.pay-return__checkpath {
    fill: none;
    stroke: var(--green);
    stroke-width: 11;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: paydraw .45s cubic-bezier(.4, 0, .2, 1) .5s forwards;
}

/* spark burst around the checkmark */
.pay-return__burst {
    position: absolute;
    inset: -18px;
    pointer-events: none;
}
.pay-return__burst i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--green);
    opacity: 0;
    animation: payburst .6s ease-out .55s forwards;
}
.pay-return__burst i:nth-child(1) { transform: rotate(0deg) translateX(0); }
.pay-return__burst i:nth-child(2) { transform: rotate(60deg) translateX(0); }
.pay-return__burst i:nth-child(3) { transform: rotate(120deg) translateX(0); }
.pay-return__burst i:nth-child(4) { transform: rotate(180deg) translateX(0); }
.pay-return__burst i:nth-child(5) { transform: rotate(240deg) translateX(0); }
.pay-return__burst i:nth-child(6) { transform: rotate(300deg) translateX(0); }

/* floating confetti behind the card (ambient layer) */
.pay-return__confetti {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.pay-return__confetti i {
    position: absolute;
    top: -8vh;
    width: 9px;
    height: 14px;
    border-radius: 2px;
    opacity: 0;
    animation: payfall linear infinite;
}
.pay-return__confetti i:nth-child(1) { left: 6%;  background: var(--green);  animation-duration: 8.5s; animation-delay: 0s; }
.pay-return__confetti i:nth-child(2) { left: 16%; background: var(--orange); animation-duration: 10s;  animation-delay: 1.2s; }
.pay-return__confetti i:nth-child(3) { left: 27%; background: var(--blue);   animation-duration: 9s;   animation-delay: .6s; }
.pay-return__confetti i:nth-child(4) { left: 36%; background: var(--green);  animation-duration: 11s;  animation-delay: 2s; }
.pay-return__confetti i:nth-child(5) { left: 47%; background: var(--orange); animation-duration: 8s;   animation-delay: .3s; }
.pay-return__confetti i:nth-child(6) { left: 55%; background: var(--blue);   animation-duration: 10.5s; animation-delay: 1.6s; }
.pay-return__confetti i:nth-child(7) { left: 64%; background: var(--green);  animation-duration: 9.2s;  animation-delay: .9s; }
.pay-return__confetti i:nth-child(8) { left: 73%; background: var(--orange); animation-duration: 8.7s;  animation-delay: 2.4s; }
.pay-return__confetti i:nth-child(9) { left: 84%; background: var(--blue);   animation-duration: 10.2s; animation-delay: 1s; }
.pay-return__confetti i:nth-child(10) { left: 93%; background: var(--green); animation-duration: 9.6s; animation-delay: 1.9s; }

/* canceled variant: muted pulse, no checkmark */
.pay-return--canceled .pay-return__badge {
    display: none;
}
.pay-return--canceled .pay-return__pulse {
    width: 118px;
    height: 118px;
    margin: 0 auto 6px;
    border-radius: 50%;
    background: rgba(32, 165, 107, .14);
    animation: paypulse 2.4s ease-out infinite;
}
.pay-return__pulse--muted {
    background: rgba(181, 58, 10, .1) !important;
}

/* keyframes */
@keyframes payring {
    to { stroke-dashoffset: 0; }
}
@keyframes paydraw {
    to { stroke-dashoffset: 0; }
}
@keyframes payburst {
    0%   { opacity: 0; transform: rotate(0deg) translateX(0) scale(.4); }
    20%  { opacity: 1; }
    100% { opacity: 0; transform: rotate(180deg) translateX(56px) scale(1); }
}
@keyframes payrise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes payfall {
    0%   { transform: translateY(-8vh) rotate(0deg); opacity: 0; }
    10%  { opacity: .9; }
    100% { transform: translateY(110vh) rotate(540deg); opacity: 0; }
}
@keyframes paypulse {
    0%   { transform: scale(.6); opacity: .7; }
    70%  { transform: scale(1.15); opacity: 0; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {

    .pay-return * { animation: none !important; }
    .pay-return .pay-return__checkpath { stroke-dashoffset: 0; }
    .pay-return .pay-return__ringcircle { stroke-dashoffset: 0; }
    .pay-return__confetti { display: none; }
}

/* --- password gate ---------------------------------------- */

/* The sign-in gate's theme toggle: the gate carries no toolbar, so the
   shared round toggle floats in the top-right corner instead. */
.gate-theme {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 10;
}

.gate {
    flex: 1;
    width: min(1220px, calc(100% - 40px));
    margin: auto;
    padding: 70px 0;

    display: flex;
    align-items: center;
    justify-content: center;
}

.gate-card {
    width: min(400px, 100%);
    padding: 34px;

    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: 20px;

    box-shadow: 0 20px 55px rgba(0, 0, 0, .06);

    animation: enter .8s both;
}

.gate-card__mark {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    background: var(--ink);
    color: var(--paper);

    border-radius: var(--r-md); /* ramp (was one-off 13px) */

    transform: rotate(-5deg);
    font-size: 17px;
}

/* The mark glyph as inline SVG (immune to emoji font fallback), sized to
   the same optical weight the 17px text arrow had in the 44px tile. */
.gate-card__mark svg {
    width: 20px;
    height: 20px;

    display: block;
}

.gate-card__kicker { margin-top: 24px; }

.gate-card__title {
    margin: 8px 0 0;

    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.05em;
    line-height: 1.05;
}

.gate-card__hint {
    margin: 10px 0 0;

    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

.gate-form {
    margin-top: 26px;

    display: flex;
    flex-direction: column;
    gap: 9px;
}

.gate-form__label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;

    color: var(--muted);
}

.gate-form__input {
    width: 100%;
    padding: 14px 16px;

    background: var(--paper-bright);
    border: 1px solid var(--line);
    border-radius: var(--r-md); /* ramp (was one-off 13px) */

    color: var(--ink);
    font-size: 15px;

    transition: border-color .2s ease;
}

.gate-form__input:focus {
    outline: none;
    border-color: var(--ink);
}

.gate-form__error {
    margin: 0;

    color: var(--error);
    font-size: 13px;
}

.gate-form__submit { margin-top: 8px; }

/* --- provider picker (sign-in method chooser) ------------- */

/* Shared by the frontend login picker and the MCP authorize picker
   (both pages link this stylesheet); buttons are rendered by
   internal/auth/provider/picker.go. */

.provider-list {
    margin-top: 26px;
}

.provider {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 10px;
    padding: 14px 16px;

    border-radius: var(--r-md); /* ramp (was one-off 13px) */

    font-size: 14px;
    font-weight: 650;
    letter-spacing: -.01em;
    text-decoration: none;

    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.provider:hover {
    transform: translateY(-2px);
}

.provider:active {
    transform: translateY(0);
}

.provider__logo {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.provider__label {
    flex: 1;
    text-align: center;
}

.provider--google {
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink);
}

.provider--google:hover {
    border-color: var(--ink);
}

.provider--github {
    background: var(--ink-panel);
    color: var(--on-ink);

    box-shadow: 0 12px 30px rgba(0, 0, 0, .13);
}

.provider--github .provider__logo {
    width: 22px;
    height: 22px;
}

.provider--github:hover {
    box-shadow: 0 16px 34px rgba(0, 0, 0, .2);
}

.provider--plain {
    background: var(--paper-bright);
    border: 1px solid var(--line);
    color: var(--ink);
}

.provider--plain:hover {
    border-color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {

    .provider {
        transition: none;
    }

    .provider:hover {
        transform: none;
    }
}

/* =========================================================
   LEGAL PAGES — Terms, Privacy, Acceptable Use, Report
   Paper-theme centered article, shares typography with docs
   but no sidebar. Uses paper tokens so it inverts gracefully.
   ========================================================= */

.legal {
    flex: 1;
    width: min(760px, calc(100% - 40px));
    margin: 0 auto;
    padding: 48px 0 80px;
}

.legal__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 18px;
}

.legal__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--orange);
    flex-shrink: 0;
}

.legal h1 {
    margin: 0;
    font-size: clamp(32px, 5vw, 46px);
    font-weight: 750;
    line-height: .95;
    letter-spacing: -.06em;
    color: var(--ink);
}

.legal h1 em {
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -.03em;
}

.legal__meta {
    margin-top: 12px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.legal__lead {
    margin: 18px 0 0;
    font-size: 16px;
    line-height: 1.65;
    color: var(--muted);
    max-width: 44rem;
}

.legal__notice {
    margin-top: 18px;
    padding: 12px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--muted);
}

.legal__notice strong { color: var(--ink); }

.legal__toc {
    margin: 28px 0 0;
    padding: 16px;
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: 14px;
}

.legal__toc-title {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
}

.legal__toc ol {
    margin: 0;
    padding-left: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    line-height: 1.5;
}

.legal__toc a { display: block; padding: 4px 0; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(23,23,21,.18); }
.legal__toc a:hover { text-decoration-color: var(--orange); color: var(--orange); }
.legal__toc li::marker { color: var(--muted); font-family: var(--mono); font-size: 11px; }

.legal__body {
    margin-top: 36px;
    border-top: 1px solid var(--line);
    padding-top: 32px;
}

.legal__body h2 {
    margin: 36px 0 12px;
    font-size: 20px;
    font-weight: 750;
    letter-spacing: -.04em;
    color: var(--ink);
    scroll-margin-top: 96px;
}

.legal__body h2:first-child { margin-top: 0; }

.legal__body h3 {
    margin: 22px 0 8px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ink);
}

.legal__body p {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text);
}

.legal__body p strong { color: var(--ink); }

.legal__body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(23,23,21,.22); }
.legal__body a:hover { color: var(--orange); text-decoration-color: var(--orange); }

.legal__body ul, .legal__body ol {
    margin: 0 0 16px 1.25rem;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text);
}

.legal__body li { margin-bottom: 6px; }
.legal__body li::marker { color: var(--muted); }

.legal__body hr {
    border: 0;
    height: 1px;
    background: var(--line);
    margin: 28px 0;
}

/* subtle callout used for warnings (e.g. "do not deploy secrets") */
.legal__callout {
    margin: 16px 0;
    padding: 14px 16px;
    background: var(--orange-soft);
    border: 1px solid rgba(181,58,10,.18);
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text);
}
.legal__callout strong { color: var(--ink); }

/* contact card */
.legal__contact {
    margin-top: 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink);
}
.legal__contact a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* interactive report form on the /report page */
.report-form {
    margin: 24px 0 36px;
    padding: 22px;
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: 16px;
}
.report-form__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 16px;
    letter-spacing: -.01em;
}
.report-form__fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.report-form__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    margin-top: 6px;
}
.report-form__label:first-of-type { margin-top: 0; }
.report-form__optional { font-weight: 400; color: var(--muted); }
.report-form__input {
    width: 100%;
    padding: 11px 13px;
    font-size: 13px;
    font-family: inherit;
    color: var(--ink);
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.report-form__input:focus {
    outline: none;
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(181, 58, 10, .14);
}
.report-form__textarea {
    resize: vertical;
    min-height: 96px;
    line-height: 1.5;
}
.report-form__hint {
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted);
    margin: 4px 0 2px;
}
.report-form__hint a { color: var(--orange); text-decoration: underline; text-underline-offset: 2px; }
.report-form__submit {
    align-self: flex-start;
    margin-top: 8px;
    padding: 12px 20px;
}
.report-form__submit:disabled { opacity: .6; cursor: default; transform: none; }
.report-form__result {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
}
.report-form__result.is-ok {
    background: rgba(46, 160, 67, .12);
    border: 1px solid rgba(46, 160, 67, .3);
    color: #1d7a33;
}
.report-form__result.is-error {
    background: rgba(181, 58, 10, .1);
    border: 1px solid rgba(181, 58, 10, .28);
    color: #b03a1f;
}

/* footer legal nav — inline, wraps gracefully */

@media (max-width: 600px) {

    .legal { width: calc(100% - 28px); padding-top: 32px; }
    .legal__toc { padding: 14px; }
}

/* ==========================================================================
   LANDING V2 + PLAYGROUND — clear navbar, split hero, dedicated playground
   Appended block for the layout restructure. All classes BEM-style.
   ========================================================================== */

/* ----- responsive utilities: hide below breakpoints ----- */
@media (max-width: 1100px) { .u-hide-md { display: none !important; } }
@media (max-width: 760px) { .u-hide-sm { display: none !important; } }

/* =========================================================
   NAVBAR (paper, sticky)
========================================================= */

.nav {
    display: flex;
    align-items: center;
    gap: 20px;

    /* When the controls cannot fit the row, the nav becomes a horizontal
       swipe strip: items keep their natural width and tap size instead of
       wrapping text inside the fixed-height bar. */
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.nav::-webkit-scrollbar { display: none; }

.nav > * { flex-shrink: 0; }

/* CTA chip at the end of the nav */
.nav-cta {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;

    padding: 9px 16px;

    background: var(--ink-panel);
    color: var(--on-ink) !important;
    border-radius: 10px;

    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: -.01em;

    transition: transform .2s ease, background .2s ease;
}

/* Tighten the header row once the full nav no longer fits comfortably;
   below ~380px even the tightened row cannot hold the wordmark, and the
   tile alone carries the brand (the link keeps its aria-label). */
@media (max-width: 760px) {
    .nav { gap: 12px; }

    .nav-cta { padding: 8px 12px; }
}

@media (max-width: 380px) {
    .brand > span:not(.brand-mark) { display: none; }
}

.nav-cta:hover {
    transform: translateY(-2px);
    background: var(--ink-panel-hover);
}

.nav-cta.is-active {
    background: var(--orange);
    color: var(--on-accent) !important;
}

/* Sign-in chip: brand accent so it stands out beside the neutral playground chip.
   White-on-burnt-orange measures 5.88:1 (WCAG AA). */
.nav-cta--accent {
    background: var(--orange);
    color: var(--on-accent) !important;
}

.nav-cta--accent:hover {
    background: var(--accent-hover);
}

.nav-cta.is-active:hover {
    background: #8f2f10;
}

/* =========================================================
   HERO SPLIT — copy left, animated explainer right
========================================================= */

.hero {
    padding-top: 60px;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: 46px;
    align-items: center;
}

.hero-grid .hero-copy {
    max-width: none;
}

.hero-grid .hero-title {
    font-size: clamp(40px, 5.4vw, 84px);
}

/* the journey is now the animated side explainer */
.hero-grid .journey {
    margin-top: 0;
    padding: 22px;
}

@media (max-width: 1080px) {

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .hero-grid .journey {
        max-width: 640px;
        margin-inline: auto;
        width: 100%;
    }
}

@media (max-width: 600px) {

    .hero { padding-top: 34px; }
    .hero-grid { gap: 26px; }
}

/* =========================================================
   CTA STRIP — try-it banner before the FAQ
========================================================= */

/* ----- Always-dark promo bands (the landing/FAQ closing CTA strips) -----
   A fixed-dark scope: it re-declares the flip-able tokens for its subtree
   (the way the dark-panels block does for code), so the bright accent, the
   body ink, the link hover and the ink on the accent-filled button are all
   readable on the dark fill in both themes — and the rules inside need no
   literal or per-theme override. The paper accent (#b53a0a) would measure
   3.06:1 here. */
.cta-strip, .faq-cta {
    --ink-panel: #171715;
    --on-ink: #f4f2ec;
    --orange: #ff6b3d;
    --accent: #ff6b3d;
    --accent-hover: #ff9c7d;
    --on-accent: #141412;
    --ink: #f4f2ec;
    --text-bright: #f4f2ec;
    --text: #d5d1c8;
    --muted: #b5b2aa;
    --line: rgba(255, 255, 255, .16);
    --orange-soft: rgba(255, 107, 61, .14);
    color: var(--ink);
}

.cta-strip {
    width: min(1220px, calc(100% - 40px));
    margin: 0 auto 90px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;

    padding: 34px 38px;

    background: var(--ink-panel);
    border-radius: 22px;

    box-shadow: 0 24px 60px rgba(0, 0, 0, .16);
}

.cta-copy { max-width: 560px; }

.cta-strip .kicker { color: var(--orange); }

.cta-title {
    margin: 12px 0 0;

    font-size: clamp(28px, 3.6vw, 46px);
    font-weight: 700;
    letter-spacing: -.05em;
    line-height: 1.02;
}

.cta-title em {
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -.03em;
    color: var(--orange);
}

.cta-text {
    margin: 12px 0 0;

    color: #b5b2aa;
    font-size: 15px;
    line-height: 1.6;
}

.cta-strip .button-primary {
    background: var(--orange);
    color: var(--on-accent);
    box-shadow: 0 12px 30px rgba(181, 58, 10, .35);
}

.cta-strip .button-primary:hover {
    background: var(--accent-hover);
}

@media (max-width: 700px) {

    .cta-strip {
        padding: 26px 22px;
        border-radius: 18px;
    }
}

/* ==========================================================================
   PLAYGROUND PAGE
========================================================================== */

.pg-wrap {
    width: min(1220px, calc(100% - 40px));
    margin: 0 auto;
    padding: 52px 0 30px;
}

.pg-head {
    max-width: 720px;
    margin-bottom: 34px;
}

.pg-title {
    margin: 14px 0 0;

    font-size: clamp(40px, 5.6vw, 72px);
    font-weight: 700;
    line-height: .95;
    letter-spacing: -.065em;
}

.pg-lead {
    max-width: 60ch;
    margin: 18px 0 0;

    color: var(--muted);
    font-size: 16px;
    line-height: 1.65;
}

.pg-grid {
    display: grid;
    grid-template-columns: 1.35fr .72fr;
    gap: 18px;
    align-items: start;
}

/* editor console grows to fill */
.pg-editor {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pg-editor .editor {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 420px;
    border-right: 0;
}

.pg-editor .editor-top { flex-shrink: 0; }

.pg-editor .editor-shell {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.pg-editor textarea {
    flex: 1;
    height: auto;
    min-height: 320px;
}

/* ---- example button (light ghost inside the dark editor) ---- */
.example-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 8px 12px;

    border: 1px solid #2f2f2d;
    border-radius: 9px;
    background: #1e1e1c;
    color: #c8c5be;

    cursor: pointer;

    font-size: 12px;
    font-weight: 550;
    letter-spacing: -.01em;
    line-height: 1;

    transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.example-button:hover {
    color: #f4f2ec;
    border-color: #3a3a38;
    background: #2a2a28;
}

/* ---- drop overlay ---- */
.drop-overlay {
    position: absolute;
    inset: 10px;
    z-index: 5;

    display: grid;
    place-items: center;

    background: rgba(23, 23, 21, .88);
    border: 2px dashed rgba(181, 58, 10, .6);
    border-radius: 14px;

    opacity: 0;
    pointer-events: none;

    transition: opacity .18s ease;

    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: .02em;
    color: #f4f2ec;
}

.drop-overlay.is-dragging {
    opacity: 1;
    pointer-events: auto;
}

/* ---- editor meta row (byte count + shortcut) ---- */
.editor-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 14px;

    padding: 12px 22px;

    border-top: 1px solid #30302e;

    font-family: var(--mono);
    font-size: 10px;
    color: #9b9890;
}

.byte-counter.is-over { color: #ff7a5c; }

.editor-hint { letter-spacing: .02em; }

/* ---- options row (slug, password, one-time) ---- */
.opt-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;

    padding: 16px 22px;

    border-top: 1px solid #30302e;
}

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

.opt-field--slug { flex: 1 1 180px; }

.opt-label {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #9b9890;
}

.opt-input-wrap {
    display: flex;
    align-items: center;

    background: #1a1a19;
    border: 1px solid #2d2d2b;
    border-radius: 9px;

    transition: border-color .18s ease;
}

.opt-input-wrap:focus-within {
    border-color: #555;
}

.opt-prefix {
    padding-left: 11px;
    font-family: var(--mono);
    font-size: 12px;
    color: #9b9890;
}

.opt-input {
    width: 100%;
    min-width: 0;

    padding: 10px 11px;

    background: transparent;
    border: 0;
    outline: 0;

    color: #deddd8;
    font-family: var(--mono);
    font-size: 12.5px;
}

.opt-input::placeholder { color: #555; }

/* ---- one-time toggle chip ---- */
.opt-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-top: auto;
    align-self: flex-start;

    padding: 11px 13px;

    border: 1px dashed #2f2f2d;
    border-radius: 9px;
    background: #1e1e1c;

    cursor: pointer;

    user-select: none;
}

.opt-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.opt-toggle-box {
    width: 15px;
    height: 15px;
    flex-shrink: 0;

    border: 1px solid #555;
    border-radius: 5px;

    display: grid;
    place-items: center;

    transition: background .18s ease, border-color .18s ease;
}

.opt-toggle-box::after {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--orange);
    opacity: 0;
    transform: scale(.5);
    transition: opacity .18s ease, transform .18s ease;
}

.opt-toggle input:checked + .opt-toggle-box {
    border-color: var(--orange);
}

.opt-toggle input:checked + .opt-toggle-box::after {
    opacity: 1;
    transform: scale(1);
}

.opt-toggle input:focus-visible + .opt-toggle-box {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}

.opt-toggle-label {
    font-size: 12px;
    font-weight: 550;
    color: #c8c5be;
}

.opt-error {
    margin: 0;
    padding: 0 22px 14px;

    font-family: var(--mono);
    font-size: 10.5px;
    color: #ff7a5c;
}

.pg-editor .publish-button {
    margin-top: 18px;
    border-radius: 0 0 26px 26px;
}

/* =========================================================
   PLAYGROUND SIDE PANE
========================================================= */

.pg-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* result card — dark terminal panel on the paper page */
.pg-side .deploy-card {
    margin: 0;
}

/* deployed URL shown as a row with a copy button */
.deploy-url-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.pg-side .deploy-url {
    flex: 1;
    min-width: 0;
    margin-top: 0;
}

.deploy-url-copy {
    flex-shrink: 0;

    padding: 7px 11px;

    border: 1px solid #2d2d2b;
    border-radius: 8px;
    background: #232321;
    color: #c8c5be;

    font-size: 11px;
    font-weight: 650;
    letter-spacing: .03em;

    cursor: pointer;

    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.deploy-url-copy:hover {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--on-accent);
}

.deploy-url-copy.is-copied {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}

/* live preview card */
.preview-block {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--bg-surface);
    overflow: hidden;
}

.preview-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;

    padding: 12px 16px;

    border-bottom: 1px solid var(--line);

    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink);
}

.preview-note {
    font-size: 9px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted);
}

.preview-frame {
    display: block;
    width: 100%;
    height: 320px;

    border: 0;
    background: #fff;
}

/* logs on the light page get their own card */
.pg-side .logs {
    min-height: 120px;
    margin-top: 0;

    padding: 14px 18px;

    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: 16px;

    color: var(--muted);
}

/* small print under the console */
.pg-foot {
    max-width: 760px;
    margin: 22px auto 0;

    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
}

.pg-foot code {
    font-family: var(--mono);
    font-size: 12px;
    padding: .1em .35em;
    border-radius: 5px;
    background: rgba(23, 23, 21, .06);
    border: 0;
}

.pg-foot a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 1000px) {

    .pg-grid {
        grid-template-columns: 1fr;
    }

    .pg-side {
        flex-direction: column;
    }
}

@media (max-width: 600px) {

    .pg-wrap { padding-top: 34px; }
    .pg-editor .publish-button { border-radius: 0 0 18px 18px; }
    .opt-row { padding: 14px 16px; }
    .editor-meta { padding: 11px 16px; }
    .preview-frame { height: 260px; }
}

/* ==========================================================================
   LANDING V3 — strong section titles, chat demo, feature grid,
   clean integrations, playground contrast fixes.
   ========================================================================== */

/* ----- eyebrow pill uses a live dot instead of the old star ----- */
.eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(32, 165, 107, .5);
    animation: statusPulse 2.5s infinite;
}

.section-link {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.section-link:hover { color: var(--accent-hover); }

/* =========================================================
   CLEAN INTEGRATIONS (logo tabs + terminal)
========================================================= */

.integ-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.integ-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 14px 8px 9px;

    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg-surface);
    color: var(--muted);

    cursor: pointer;

    font-size: 13px;
    font-weight: 600;

    transition: color .18s ease, border-color .18s ease, background .18s ease, transform .1s ease;
}

.integ-tab:hover {
    color: var(--ink);
    border-color: var(--border-active);
}

.integ-tab:active { transform: scale(.97); }

.integ-tab.active {
    color: var(--ink);
    border-color: var(--ink);
    background: var(--paper-bright);
}

.integ-ic {
    width: 20px;
    height: 20px;
    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 6px;
    overflow: hidden;
    background: #171715;
}

.integ-ic img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
}

.integ-ic--svg svg {
    width: 18px;
    height: 18px;
    display: block;
}

.integ-term {
    margin-top: 12px;

    background: #181817;
    color: #deddd8;
    border-radius: 14px;

    overflow: hidden;
}

.integ-term-head {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 11px 16px;

    border-bottom: 1px solid #2a2a28;
}

.integ-term-dots { display: flex; gap: 5px; }

.integ-term-dots i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(244, 242, 236, .16);
}

.integ-term-name {
    flex: 1;
    min-width: 0;

    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9b9890;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.integ-copy {
    position: static;
    padding: 7px 12px;
    border-radius: 8px;
}

.integ-term pre {
    margin: 0;

    padding: 18px 20px;

    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.8;
    white-space: pre-wrap;

    transition: opacity .15s ease, transform .15s ease;
}

.integ-term pre.is-swap {
    animation: integSwap .22s ease;
}

@keyframes integSwap {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   CONNECT ROUTES (the three "publish button" tabs)
   Vertical card list in the copy column; each card picks the
   panel mode on the right (MCP clients / skill download / REST).
========================================================= */

.route-list {
    display: grid;
    gap: 10px;

    margin-top: 28px;
}

.route {
    appearance: none;
    display: flex;
    align-items: flex-start;
    gap: 13px;

    width: 100%;
    padding: 14px 16px;

    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--bg-surface);
    color: var(--muted);

    cursor: pointer;
    text-align: left;
    font: inherit;

    transition: color .18s ease, border-color .18s ease, background .18s ease,
        box-shadow .18s ease, transform .1s ease;
}

.route:hover {
    color: var(--text);
    border-color: var(--border-active);
    background: var(--bg-surface-hover);
}

.route:active { transform: scale(.985); }

.route:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.route.is-active {
    color: var(--text);
    border-color: var(--ink);
    background: var(--paper-bright);

    box-shadow: 0 10px 26px rgba(23, 23, 21, .07);
}

.route-ic {
    width: 38px;
    height: 38px;
    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 11px;
    background: #171715;
    color: #f4f2ec;
}

.route-ic svg {
    width: 19px;
    height: 19px;
    display: block;
}

/* The picked route lights its chip in the brand accent. */
.route.is-active .route-ic {
    background: var(--accent);
    color: #fff;
}

.route-body {
    display: flex;
    flex-direction: column;
    gap: 4px;

    min-width: 0;
}

.route-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.route-name {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--ink);
}

.route-rec {
    padding: 3px 8px 2px;

    border: 1px solid rgba(181, 58, 10, .28);
    border-radius: 999px;
    background: var(--orange-soft);

    font-family: var(--mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--accent);

    white-space: nowrap;
}

.route-desc {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--muted);
}

@media (max-width: 640px) {

    .route { padding: 12px 13px; }
    .route-ic { width: 34px; height: 34px; border-radius: 10px; }
    .route-desc { font-size: 12px; }
}

/* The skill route replaces the terminal with a plain download: one button
   and a sentence about where the file goes. No command to copy. */
.connect-download {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;

    padding: 22px 20px;

    border: 1px dashed rgba(23, 23, 21, .22);
    border-radius: 14px;
    background: var(--paper-bright);
}

.connect-download.is-swap { animation: integSwap .22s ease; }

.connect-download__hint {
    margin: 0;

    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.65;
}

.connect-download__hint code {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink);
}

/* =========================================================
   PLAYGROUND CONTRAST + POLISH
   The deploy card now sits outside the dark .machine, so give
   it and its text explicit light colors.
========================================================= */

.pg-side .deploy-card,
.pg-side .deploy-card * {
    color: inherit;
}

.pg-side .deploy-card {
    color: #deddd8;
    border-radius: 18px;
}

.pg-side .deploy-card h3 {
    color: #f4f2ec;
    font-size: 19px;
}

.pg-side .deploy-status-label {
    color: #9b9890;
    letter-spacing: .08em;
}

.pg-side .deploy-expiry {
    margin-top: 12px;

    font-family: var(--mono);
    font-size: 10px;
    line-height: 1.5;
    color: #9b9890;
}

.pg-side .deploy-url {
    color: var(--green);
}

/* ==========================================================================
   LANDING V5 — differentiated scenes (no numbered mono kickers), colored
   feature tiles, dedicated FAQ off the landing.
   ========================================================================== */

/* ----- scene scaffolding: full-bleed bands with a centered column ----- */
.scene {
    padding: 100px 0;
}

.scene-inner {
    width: min(1180px, calc(100% - 48px));
    margin-inline: auto;
}

.scene-inner--tight { max-width: 1120px; }

/* dark showcase band (platform) */
.scene--ink {
    /* Light band on a paper landing: paper's #b53a0a accent ink would be
       3.03:1 on #191812, so the band carries the bright burnt-orange for
       its em/emphasis (5.47:1). */
    --orange: #ff6b3d;
    --scene-ink-ink: #f4f2ec;
    --scene-ink-bg: #191812;
    background:
        radial-gradient(900px 380px at 82% -10%, rgba(181, 58, 10, .16), transparent 70%),
        var(--scene-ink-bg);
    color: var(--scene-ink-ink);
}

/* Fixed-light surfaces that sit inside a dark band (the warm integrations
   band, the managed "paper" card on the dark platform band). They keep the
   light palette even in dark mode, so the flip-able tokens are reset for
   their subtree — the card/band itself stays a cream surface with dark ink. */
.scene--warm, .tiers--band .tier--paper {
    --ink: #171715;
    --text: #2a2a27;
    --text-bright: #171715;
    --muted: #67645e;
    --text-muted: #67645e;
    --text-muted-2: #6f6c64;
    --accent: #b53a0a;
    --orange: #b53a0a;
    --paper: #f4f2ec;
    --paper-bright: #fbfaf7;
    --bg-base: #f4f2ec;
    --bg-surface: rgba(255, 255, 255, .55);
    --bg-surface-hover: #fbfaf7;
    --line: rgba(23, 23, 21, .13);
    --line-strong: rgba(23, 23, 21, .5);
    --border: rgba(23, 23, 21, .13);
    --border-active: rgba(23, 23, 21, .38);
    --orange-soft: rgba(181, 58, 10, .08);
}

/* warm band (integrations), distinct from the paper and the ink */
.scene--warm {
    --muted: #5d5a50;

    background:
        radial-gradient(700px 300px at -5% 0%, rgba(181, 58, 10, .06), transparent 70%),
        #ece9e1;
}

/* ----- opener: label (sentence case) + big title + lead ----- */
.scene-head {
    margin-bottom: 46px;
}

.scene-head--center {
    text-align: center;
    margin-inline: auto;
    max-width: 720px;
}

.scene-label {
    display: inline-flex;
    align-items: center;
    gap: 11px;

    margin: 0;

    color: var(--ink);
    font-size: 13px;
    font-weight: 650;
    letter-spacing: -.005em;
}

.scene-label i {
    width: 30px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
}

.scene-head--center .scene-label i { width: 2px; height: 30px; }

.scene--ink .scene-label { color: #c9c5bc; }
.scene--warm .scene-label { color: #4a4840; }

.scene-title {
    margin: 20px 0 0;

    color: var(--ink);
    font-size: clamp(40px, 5.4vw, 72px);
    font-weight: 800;
    line-height: .97;
    letter-spacing: -.045em;
}

.scene-title em {
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -.03em;
    color: var(--accent);
}

.scene-title--light { color: #f6f4ee; }
.scene-title--light em { color: var(--orange); }

.scene-lead {
    max-width: 58ch;
    margin: 22px 0 0;

    color: var(--muted);
    font-size: 17px;
    line-height: 1.7;
}

.scene-lead--light { color: #c2beb4; }
.scene--warm .scene-lead { color: #5d5a50; }

/* =========================================================
   PLATFORM BAND — the two tiers, one glass one paper
========================================================= */

.tiers--band {
    gap: 20px;
}

/* neutral base so band overrides win */
.tiers--band .tier {
    background: transparent;
    border: 1px solid transparent;
}

/* quick shares = the plain, no-frills option (deliberately not premium) */
.tiers--band .tier--glass {
    background: rgba(255, 255, 255, .025);
    border: 1px dashed rgba(255, 255, 255, .16);
    box-shadow: none;
}

.tier--glass .tier-name { color: #9b9890; }
.tier--glass .tier-title { color: #d6d2c9; }
.tier--glass .tier-title em { color: #c8c1b4; }
.tier--glass .tier-desc { color: #b6b1a6; }
.tier--glass .tier-list li { color: #cfc9bf; }
.tier--glass .tier-list li::before { background: #8a867c; }
.tier--glass .tier-list code { background: rgba(255, 255, 255, .08); color: #d6d2c9; }
.tier--glass .tier-foot { border-top-color: rgba(255, 255, 255, .12); color: #8f8a80; }
.tier--glass .tier-badge { border-color: rgba(255, 255, 255, .18); color: #aaa59a; }
.tier--glass .tier-badge--live { color: #9bc4ab; border-color: rgba(127, 227, 182, .28); }

/* managed = the premium paper card, the highlight on the dark band */
.tiers--band .tier--paper {
    position: relative;

    --muted: #66635a;

    background: linear-gradient(180deg, #fdfcf9 0%, #f0ede4 100%);
    border: 1px solid #1c1b19;
    border-top: 3px solid var(--orange);
    color: #171715;

    box-shadow:
        0 0 0 1px rgba(181, 58, 10, .07),
        0 44px 90px rgba(0, 0, 0, .5);
}

.tiers--band .tier--paper .tier-head {
    padding-bottom: 2px;
}

.tiers--band .tier--paper .tier-badge {
    background: rgba(181, 58, 10, .1);
    border-color: rgba(181, 58, 10, .35);
    color: var(--orange);
}

.tiers--band .tier--paper .tier-foot {
    font-weight: 600;
    letter-spacing: .03em;
}

.tiers--band .tier--paper .tier-list li::before {
    background: var(--orange);
}

.tier--paper .tier-name { color: var(--text-muted); }
.tier--paper .tier-title { color: #171715; }
.tier--paper .tier-title em { color: var(--orange); }
.tier--paper .tier-desc { color: #66635a; }
.tier--paper .tier-list li { color: #2c2b27; }
.tier--paper .tier-badge { border-color: var(--line); color: var(--muted); }
.tier--paper .tier-foot { border-top-color: var(--line); color: var(--muted); }

@media (max-width: 980px) { .tiers--band { grid-template-columns: 1fr; } }

/* =========================================================
   FEATURES — the colored tile wall (personality, not SaaS cards)
========================================================= */

.tile {
    position: relative;

    padding: 26px 26px 28px 30px;

    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: 18px;

    overflow: hidden;

    transition: border-color .3s ease, transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
}

.tile::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;

    background: transparent;
    border-radius: 0 3px 3px 0;

    transition: background .25s ease;
}

.tile:hover {
    transform: translateY(-4px);
    border-color: rgba(23, 23, 21, .5);
    box-shadow: 0 20px 44px rgba(0, 0, 0, .06);
}

.tile:hover::before {
    background: var(--orange);
}

/* index + icon sit on one quiet row */
.tile-rail {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tile-index {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .16em;
    color: var(--muted);
}

.tile-ic {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--paper-bright);
    color: var(--ink);
}

.tile-ic svg {
    width: 19px;
    height: 19px;
    display: block;
}

.tile-title {
    margin: 20px 0 0;

    color: var(--ink);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.tile-text {
    margin: 8px 0 0;
    max-width: 40ch;

    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.62;
}

.feat-wall {
    display: grid;
    /* min() keeps the 300px comfort floor from overflowing a viewport
       narrower than it (a plain minmax(300px, 1fr) overflowed 320px
       phones by the grid's own minimum). */
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 16px;
}

/* --- end features --- */
/* =========================================================
   INTEGRATIONS — split: story left, console right
========================================================= */

.integ-split {
    display: grid;
    grid-template-columns: .86fr 1.14fr;
    gap: 52px;
    align-items: center;
}

/* Grid tracks refuse to shrink below their items' min-content, and the
   console panel's content (tab pills, the config snippet's unbreakable
   URL) set a floor wider than a 320–360px viewport — the whole section
   then overflowed the page and gave phones a sideways scroll. Let both
   columns shrink; the panel's own overflow rules take it from there. */
.integ-split > * {
    min-width: 0;
}

.integ-copy .scene-head { margin-bottom: 0; }

.integ-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;

    margin-top: 26px;
}

.integ-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    font-family: var(--mono);
    font-size: 11px;
    color: #5d5a50;
}

.integ-meta-item i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}

.integ-panel {
    padding: 14px;

    background: var(--bg-surface);
    border: 1px solid rgba(23, 23, 21, .12);
    border-radius: 20px;

    box-shadow: 0 24px 60px rgba(0, 0, 0, .06);
}

.integ-panel .config-note {
    max-width: none;
    margin: 14px 10px 6px;
}

@media (max-width: 940px) {

    .integ-split {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .integ-copy .scene-lead { max-width: 60ch; }
}

@media (max-width: 640px) {

    .scene { padding: 64px 0; }
    .scene-title { font-size: clamp(34px, 9vw, 52px); }
    .scene-head { margin-bottom: 30px; }
    .scene-label { font-size: 12px; }
    .integ-panel { padding: 8px; }
}

/* =========================================================
   FAQ PAGE
========================================================= */

.faq-page {
    width: min(920px, calc(100% - 40px));
    margin: 0 auto;
    padding: 70px 0 40px;
}

.faq-page-head {
    max-width: 640px;
    margin-bottom: 54px;
}

.faq-page-title {
    margin: 20px 0 0;

    color: var(--ink);
    font-size: clamp(42px, 5.6vw, 68px);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.045em;
}

.faq-page-title em {
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -.03em;
    color: var(--accent);
}

.faq-page-lead {
    margin: 20px 0 0;

    color: var(--muted);
    font-size: 16.5px;
    line-height: 1.7;
}

.faq-groups {
    display: flex;
    flex-direction: column;
    gap: 56px;
}

.faq-group-title {
    margin: 0 0 6px;

    font-size: 20px;
    font-weight: 750;
    letter-spacing: -.02em;
    color: var(--ink);
}

.faq-cta {
    margin-top: 60px;
    padding: 30px 34px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;

    background: var(--ink-panel);
    border-radius: 20px;
}

.faq-cta-text {
    max-width: 46ch;
    font-size: 16px;
    line-height: 1.6;
}

.faq-cta-text strong { color: var(--on-ink); }

.faq-cta .button-primary {
    background: var(--orange);
    color: var(--on-accent);
    box-shadow: 0 12px 30px rgba(181, 58, 10, .35);
}

@media (max-width: 600px) {

    .faq-page { padding-top: 46px; }
    .faq-groups { gap: 44px; }
    .faq-cta { padding: 24px 22px; }
}

/* =========================================================
   AS CONSENT PAGE (#337)
   Workspace list + decision buttons on the authorization
   server's consent gate. Shares .gate-card chrome and the
   .button primitives; these rules cover only the list.
========================================================= */

.consent-workspaces {
    list-style: none;
    margin: 18px 0 4px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.consent-workspace {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg-surface);
}

.consent-workspace__slug {
    font-weight: 700;
    font-size: 14px;
}

.consent-workspace__role {
    font-size: 12px;
    color: var(--muted);
}

.consent-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 16px;
}

.consent-actions form {
    display: contents;
}

.consent-button {
    min-width: 130px;
}

/* =========================================================
   SHOWCASE PAGE (generated from the template manifest)
========================================================= */

.showcase-hero {
    padding: 64px 0 8px;
    text-align: center;
}

.showcase-hero__title {
    margin: 14px 0 0;
    font-size: clamp(30px, 4.4vw, 52px);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: 1.04;
    color: var(--ink);
}

.showcase-hero__lead {
    max-width: 62ch;
    margin: 16px auto 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--muted);
}

.showcase-section { padding: 34px 0 8px; }

.showcase-section__title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--ink);
}

.showcase-section__lead {
    max-width: 66ch;
    margin: 12px 0 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--muted);
}

.showcase-section__lead a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
    gap: 18px;
}

/* Scroll-reveal staggers for the subpage grids: each member waits its
   turn to rise. The delay rides the base selector (not :not(.visible)) so
   it is present in the after-change style when .visible lands. */
.pricing-grid .reveal:nth-child(1), .showcase-grid .reveal:nth-child(1) { transition-delay: .05s; }
.pricing-grid .reveal:nth-child(2), .showcase-grid .reveal:nth-child(2) { transition-delay: .10s; }
.pricing-grid .reveal:nth-child(3), .showcase-grid .reveal:nth-child(3) { transition-delay: .15s; }
.pricing-grid .reveal:nth-child(4), .showcase-grid .reveal:nth-child(4) { transition-delay: .20s; }
.pricing-grid .reveal:nth-child(5), .showcase-grid .reveal:nth-child(5) { transition-delay: .25s; }
.showcase-grid .reveal:nth-child(6) { transition-delay: .30s; }
.showcase-grid .reveal:nth-child(7) { transition-delay: .35s; }
.showcase-grid .reveal:nth-child(8) { transition-delay: .40s; }

.faq-groups .reveal:nth-child(1) { transition-delay: .05s; }
.faq-groups .reveal:nth-child(2) { transition-delay: .10s; }
.faq-groups .reveal:nth-child(3) { transition-delay: .15s; }
.faq-groups .reveal:nth-child(4) { transition-delay: .20s; }
.faq-groups .reveal:nth-child(5) { transition-delay: .25s; }
.faq-groups .reveal:nth-child(6) { transition-delay: .30s; }
.faq-groups .reveal:nth-child(7) { transition-delay: .35s; }

.showcase-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px 22px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--paper-bright);
}

.showcase-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.showcase-card__type {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--orange-soft);
    color: var(--accent);
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.showcase-card__surface {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--muted);
}

.showcase-card__title {
    margin: 4px 0 0;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.025em;
    color: var(--ink);
}

.showcase-card__blurb {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--muted);
    flex: 1 1 auto;
}

.showcase-card__note {
    margin: 0;
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted);
}

.showcase-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

@media (max-width: 640px) {

    .showcase-hero { padding-top: 40px; }
    .showcase-card { padding: 20px 18px; }
}
/* =========================================================
   PAPER RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .editor {
        border-right: 0;
        border-bottom: 1px solid #30302e;
    }

    /* five type tabs now — let the switcher wrap on narrow screens */
    .editor-types {
        gap: 12px;
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   LANDING V6 — the 2026 revamp (daybreak / orbit hero, product cards,
   connect terminal, closing band).
   --------------------------------------------------------------------------
   Body-only: the platform chrome (header/footer) is stamped from
   internal/brand, and shared primitives (.button/.container/.icon) come from
   core.css. Everything here lives in the `lv6-` namespace and reads the
   `--lv6-*` tokens below, which resolve to platform tokens so the paper /
   dark flip keeps working. Recto: docs/features/marketing.md.
   ========================================================================== */

/* ----- tokens: one palette, resolved per theme ----- */
.lv6-scope {
    /* accent (the new design's warmer orange) held to AA as text on paper */
    --lv6-accent: #cf4318;
    --lv6-accent-hover: #a8340f;
    --lv6-accent-ink: #9c3208;
    --lv6-accent-soft: rgba(181, 58, 10, .08);

    /* sage — the revamp's signature support colour (cards, orbits, bands) */
    --lv6-sage: #6d8a58;
    --lv6-sage-ink: #4a5b39;
    --lv6-sage-line: #a4b18f;
    --lv6-sage-soft: #eff1e9;
    --lv6-sage-soft-2: #f4f4ec;
    --lv6-live: #6d8552;   /* decorative "live" dot only (non-text) */
    --lv6-claude: #9c5c33;

    /* ink ramp for this surface (faint is held to AA on every card it lands on) */
    --lv6-ink: #242722;
    --lv6-muted: #666a5f;
    --lv6-faint: #6b6f61;

    /* surfaces + hairlines */
    --lv6-surface: #fffefa;
    --lv6-surface-2: #fffdf8;
    --lv6-line: #dedfd2;
    --lv6-line-soft: #e8e9df;

    /* the dark connect band keeps its own fixed-contrast palette in both themes */
    --lv6-band: #292d27;
    --lv6-band-2: #232720;
    --lv6-band-line: #3e4437;
    --lv6-band-bright: #f0f2e4;
    --lv6-band-ink: #c4d2ad;
    --lv6-band-muted: #a3b092;
    --lv6-band-sub: #97a385;
    --lv6-band-focus: #c1d4a4;
}

/* dark theme: the same names, dark values. The sage cards were fixed-light on
   the dark band in the source design; here they follow the page, so the
   flip-able tokens are re-declared rather than locked. */
html[data-theme="dark"] .lv6-scope {
    --lv6-accent: #ff6b3d;
    --lv6-accent-hover: #ff8a63;
    --lv6-accent-ink: #ffa184;
    --lv6-accent-soft: rgba(255, 107, 61, .14);

    --lv6-sage: #8fb075;
    --lv6-sage-ink: #b9d3a0;
    --lv6-sage-line: #55663f;
    --lv6-sage-soft: #1e2419;
    --lv6-sage-soft-2: #1a1f16;
    --lv6-live: #8fb075;
    --lv6-claude: #d9a084;

    --lv6-ink: #f3f1eb;
    --lv6-muted: #a9a7a0;
    --lv6-faint: #a09e97;

    --lv6-surface: #1d1d1b;
    --lv6-surface-2: #232321;
    --lv6-line: rgba(255, 255, 255, .14);
    --lv6-line-soft: rgba(255, 255, 255, .09);

    --lv6-band: #101210;
    --lv6-band-2: #161a15;
    --lv6-band-line: #2c332b;
    --lv6-band-bright: #f0f2e4;
    --lv6-band-ink: #c4d2ad;
    --lv6-band-muted: #a3b092;
    --lv6-band-sub: #97a385;
    --lv6-band-focus: #c1d4a4;
}

/* The illustration's cream surfaces stay light in both themes (they are
   pictures of a page, not the page): the demo window + publish tag keep the
   light palette regardless of theme. */
html[data-theme="dark"] .lv6-scope .lv6-demo-window,
html[data-theme="dark"] .lv6-scope .lv6-publish-tag,
html[data-theme="dark"] .lv6-scope .lv6-deploy-receipt {
    --lv6-surface: #fffefa;
    --lv6-surface-2: #fffdf8;
    --lv6-line: #dedfd2;
    --lv6-faint: #6b6f61;
    --lv6-muted: #666a5f;
    --lv6-sage-soft: #eff1e9;
    --lv6-sage-ink: #4a5b39;
    color: #242722;
}

/* ----- shared primitives this page needs, namespaced ----- */
.lv6-container { width: min(1200px, calc(100% - 112px)); margin-inline: auto; }
.lv6-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.lv6-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.lv6-eyebrow { font-family: var(--mono); font-size: 10px; line-height: 1.5; letter-spacing: .13em; text-transform: uppercase; }
/* The buttons compose core.css's .button/.button-primary/.button-secondary
   (padding, radius, fills, hover) and only add this page's wider gap. */
.lv6-button { gap: 12px; }
.lv6-text-link { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--lv6-accent-ink); }
.lv6-text-link:hover { color: var(--accent-hover); }
.lv6-text-link .lv6-icon { transition: transform .2s; }
.lv6-text-link:hover .lv6-icon { transform: translateX(3px); }

/* the closing band's sage softened edges + the orbit hero's own frame */
.lv6-share-orbit-one { transform: rotate(-12deg); }

/* skip link (the platform a11y affordance; core.css owns the shared one, this
   page's namespace needs its own) */
.lv6-skip-link { position: fixed; z-index: 200; top: -80px; left: 20px; padding: 14px 20px; background: var(--ink-panel); color: var(--on-ink); border-radius: var(--r-sm); transition: top .15s ease; }
.lv6-skip-link:focus { top: 16px; }

/* the quick-share card carries the accent tint; the project card the sage */
.lv6-share-card { background: var(--lv6-sage-soft-2); }

/* live ledger — real numbers from /api/v1/stats, threshold-gated by the page
   script (internal/stats): hidden until a social_proof block arrives. */
.lv6-ledger { margin-top: 30px; display: flex; align-items: stretch; gap: 22px; }
.lv6-ledger-item { display: flex; flex-direction: column; gap: 3px; }
.lv6-ledger-num { font-size: 26px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--lv6-ink); }
.lv6-ledger-label { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 9px; letter-spacing: .02em; color: var(--lv6-faint); }
.lv6-ledger-sep { width: 1px; background: var(--lv6-line); }

@media (max-width: 1000px) { .lv6-container { width: calc(100% - 64px); } }
@media (max-width: 600px) { .lv6-container { width: calc(100% - 40px); } }

.lv6-hero { display: grid; grid-template-columns: 1.06fr 1fr; align-items: center; padding-top: 51px; padding-bottom: 57px; min-height: 631px; }
.lv6-hero-copy { position: relative; z-index: 2; padding: 12px 0 15px; }
.lv6-hero-eyebrow { display: flex; align-items: center; gap: 10px; color: var(--lv6-muted); margin-bottom: 28px; font-size: 10px; }
.lv6-hero-eyebrow > span { width: 17px; height: 2px; background: var(--orange); }
.lv6-hero h1 { font-size: clamp(56px, 5.4vw, 78px); font-weight: 500; line-height: 1.07; letter-spacing: -4.9px; white-space: nowrap; }
.lv6-hero h1 em { font-family: var(--serif); font-weight: 400; font-size: 1.22em; line-height: .8; color: var(--orange); letter-spacing: -3px; }
.lv6-hero-description { color: var(--lv6-muted); font-size: 15px; line-height: 1.8; margin-top: 27px; }
.lv6-hero-actions { display: flex; gap: 10px; margin-top: 30px; }
.lv6-hero-actions .lv6-button { padding-inline: 18px; font-size: 12px; gap: 13px; }
.lv6-hero-note { display: flex; align-items: center; gap: 7px; margin-top: 18px; color: var(--lv6-faint); font-size: 10px; }
.lv6-tiny-check { display: grid; place-items: center; }
.lv6-tiny-check .lv6-icon { width: 13px; height: 13px; color: var(--green); }
.lv6-note-dot { color: var(--lv6-faint); margin-inline: 3px; }
.lv6-hero-art { position: relative; height: 507px; min-width: 0; margin-left: -4px; }
.lv6-orbit-art { position: absolute; width: 110%; height: auto; top: -18px; left: -3%; }
.lv6-art-coordinate { position: absolute; font-family: var(--mono); font-size: 8px; color: var(--lv6-faint); letter-spacing: .12em; }
.lv6-coordinate-top { top: 3px; left: 16%; }
.lv6-coordinate-bottom { bottom: 1px; right: 9%; display: flex; gap: 8px; align-items: center; }
.lv6-live-dot { display: inline-block; width: 5px; height: 5px; background: var(--lv6-live); border-radius: 50%; flex-shrink: 0; }
.lv6-publish-tag { position: absolute; z-index: 2; top: 90px; right: -1%; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--lv6-surface-2); background: rgba(255,253,243,.91); box-shadow: 0 5px 15px rgba(80,75,40,.06); border-radius: 5px; font-family: var(--mono); font-size: 8px; letter-spacing: .04em; transform: rotate(3deg); }
.lv6-publish-tag .lv6-icon { width: 13px; height: 13px; margin-left: 8px; }
.lv6-demo-window { width: 345px; position: absolute; left: 3%; top: 209px; transform: rotate(-5deg); border: 1px solid var(--lv6-surface); border-radius: 10px; box-shadow: 0 20px 55px rgba(57,60,37,.12), 0 3px 8px rgba(57,60,37,.06); background: var(--lv6-surface-2); overflow: hidden; }
.lv6-demo-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 12px 13px; background: var(--lv6-surface-2); border-bottom: 1px solid var(--lv6-line); }
.lv6-window-dots { display: flex; gap: 4px; }
.lv6-window-dots i { display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--lv6-line); }
.lv6-demo-toolbar > span:nth-child(2) { display: flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 8px; color: var(--lv6-faint); }
.lv6-demo-toolbar .lv6-icon { width: 10px; height: 10px; color: var(--lv6-faint); }
.lv6-demo-body { background: var(--lv6-sage-soft); padding: 26px 25px 20px; position: relative; }
.lv6-demo-kicker { font-family: var(--mono); font-size: 7px; letter-spacing: .13em; color: var(--lv6-faint); margin-bottom: 19px; }
.lv6-demo-heading { font-family: var(--serif); font-style: italic; font-size: 40px; color: var(--lv6-sage-ink); line-height: .98; letter-spacing: -1.4px; }
.lv6-demo-heading > span { position: absolute; right: 24px; top: 75px; color: var(--lv6-sage-ink); font-family: var(--sans); font-size: 50px; font-style: normal; font-weight: 400; }
.lv6-demo-bottom { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding-top: 24px; margin-top: 6px; }
.lv6-demo-bottom > span:first-child { font-size: 8px; color: var(--lv6-band-sub); }
.lv6-demo-button { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--lv6-line); border-radius: 50%; color: var(--lv6-sage-ink); }
.lv6-demo-button .lv6-icon { width: 14px; height: 14px; }
.lv6-deploy-receipt { position: absolute; display: flex; align-items: center; gap: 11px; width: 296px; bottom: 35px; right: 1%; background: var(--lv6-surface-2); border: 1px solid var(--lv6-line); border-radius: 7px; padding: 16px; box-shadow: 0 9px 25px rgba(66,71,42,.05); transform: rotate(2deg); }
.lv6-receipt-check { display: grid; place-items: center; background: var(--lv6-sage-soft); color: var(--lv6-sage-ink); width: 28px; height: 28px; border-radius: 50%; }
.lv6-receipt-check .lv6-icon { width: 15px; height: 15px; }
.lv6-deploy-receipt strong { display: block; font-size: 12px; font-weight: 600; }
.lv6-deploy-receipt div > span { display: block; font-size: 8px; color: var(--lv6-faint); margin-top: 4px; }
.lv6-receipt-time { font-family: var(--mono); font-size: 7px; color: var(--lv6-faint); margin-left: auto; align-self: flex-start; margin-top: 4px; white-space: nowrap; }
.lv6-integrations { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 107px; display: flex; align-items: center; gap: 37px; }
.lv6-integrations > p { color: var(--lv6-faint); font-size: 10px; line-height: 1.8; width: 146px; flex-shrink: 0; }
.lv6-integrations > p strong { font-weight: 400; color: var(--lv6-muted); }
.lv6-integration-list { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 30px; }
.lv6-integration { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 500; letter-spacing: -.65px; color: var(--lv6-muted); white-space: nowrap; }
.lv6-integration svg { width: 24px; height: 24px; }
.lv6-integration .lv6-claude-logo { color: var(--lv6-claude); }
.lv6-integration-extra { display: flex; gap: 13px; align-items: center; font-size: 10px; color: var(--lv6-faint); margin-left: 18px; white-space: nowrap; }
.lv6-integration-extra .lv6-icon { width: 12px; height: 12px; }
.lv6-possibilities { padding-top: 104px; padding-bottom: 101px; }
.lv6-section-heading { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 37px; gap: 30px; }
.lv6-section-eyebrow { color: var(--lv6-faint); margin-bottom: 19px; font-size: 9px; }
.lv6-scope h2 { font-size: 48px; line-height: 1.12; letter-spacing: -2px; font-weight: 500; }
.lv6-scope h2 em { font-family: var(--serif); font-weight: 400; font-size: 1.17em; }
.lv6-section-heading > p { font-size: 13px; line-height: 1.8; color: var(--lv6-faint); padding-right: 8px; padding-bottom: 3px; }
.lv6-product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 21px; }
.lv6-product-card { padding: 27px 30px 0; border: 1px solid var(--lv6-line); border-radius: 9px; overflow: hidden; background: var(--lv6-sage-soft-2); }
.lv6-project-card { background: var(--lv6-sage-soft); }
.lv6-product-card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.lv6-product-number { font-family: var(--mono); font-size: 8px; letter-spacing: .08em; color: var(--lv6-faint); }
.lv6-pill { padding: 6px 8px; border: 1px solid var(--lv6-line); border-radius: 4px; font-size: 8px; color: var(--lv6-faint); }
.lv6-share-visual, .lv6-project-visual { height: 205px; position: relative; margin-top: 7px; isolation: isolate; }
.lv6-share-visual { display: flex; align-items: center; justify-content: center; }
.lv6-file-stack { position: absolute; display: flex; flex-direction: column; width: 115px; height: 123px; border: 1px solid var(--lv6-line); background: var(--lv6-surface); border-radius: 7px; padding: 16px 15px 12px; box-shadow: 0 6px 12px rgba(72,79,48,.12); }
.lv6-file-stack > span:first-child { display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 34px; border: 1px solid var(--lv6-line); border-radius: 4px; background: var(--lv6-surface); color: var(--lv6-faint); font-family: var(--mono); font-size: 12px; }
.lv6-file-stack > i { font-family: var(--mono); font-size: 8px; font-style: normal; color: var(--lv6-faint); margin-top: 13px; }
.lv6-file-stack-back { transform: translate(-76px, 0) rotate(-15deg); }
.lv6-file-stack-middle { transform: translate(70px, 1px) rotate(13deg); }
.lv6-file-stack-front { transform: translate(0, 6px) rotate(-2deg); z-index: 2; }
.lv6-file-stack-front > span:first-child { background: var(--lv6-accent-soft); color: var(--lv6-accent-ink); border-color: var(--lv6-line); }
.lv6-file-live { margin-top: 12px; font-size: 6px; color: var(--lv6-faint); display: flex; align-items: center; gap: 4px; }
.lv6-file-live .lv6-live-dot { width: 3px; height: 3px; }
.lv6-share-orbit { position: absolute; width: 330px; height: 142px; border: 1px solid var(--lv6-line); border-radius: 50%; z-index: -1; transform: rotate(-12deg); }
.lv6-share-orbit-two { width: 270px; height: 185px; transform: rotate(20deg); border-style: dashed; opacity: .6; }
.lv6-product-card h3 { font-size: 27px; font-weight: 500; line-height: 1.18; letter-spacing: -.9px; }
.lv6-product-card > p { margin-top: 15px; margin-bottom: 27px; color: var(--lv6-faint); font-size: 12px; line-height: 1.8; max-width: 400px; min-height: 64px; }
.lv6-product-foot { border-top: 1px solid var(--lv6-line); min-height: 67px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lv6-product-foot .lv6-text-link { font-size: 11px; gap: 9px; }
.lv6-product-foot .lv6-icon { width: 15px; height: 15px; }
.lv6-product-foot > span, .lv6-plan-note { color: var(--lv6-faint); font-size: 8px; }
.lv6-plan-note:hover { color: var(--accent-hover); }
.lv6-project-node { position: absolute; width: 80px; height: 80px; border-radius: 9px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; background: var(--lv6-surface); border: 1px solid var(--lv6-line); box-shadow: 0 6px 12px rgba(72,79,48,.06); z-index: 2; }
.lv6-project-node .lv6-icon { width: 23px; height: 23px; color: var(--lv6-sage-ink); }
.lv6-project-node span { font-size: 8px; color: var(--lv6-faint); }
.lv6-project-node-db { left: 10%; top: 54px; transform: rotate(-6deg); }
.lv6-project-node-app { left: calc(50% - 41px); top: 31px; background: var(--lv6-sage-soft); transform: rotate(3deg); }
.lv6-project-node-app .lv6-icon { width: 25px; height: 25px; background: var(--lv6-sage); color: var(--lv6-surface); padding: 5px; border-radius: 5px; }
.lv6-project-node-auth { right: 10%; top: 87px; transform: rotate(-3deg); }
.lv6-project-connections { position: absolute; inset: 0; width: 100%; height: 190px; fill: var(--lv6-sage-line); }
.lv6-project-connections path { fill: none; stroke: var(--lv6-line); stroke-dasharray: 4 4; }
.lv6-realtime-label { position: absolute; bottom: 21px; left: 19%; display: flex; gap: 6px; align-items: center; font-family: var(--mono); color: var(--lv6-faint); font-size: 7px; }
.lv6-connect-section { background: var(--lv6-band); color: var(--lv6-band-bright); padding: 83px 0; position: relative; overflow: hidden; }
.lv6-connect-section::after { content: ''; position: absolute; width: 480px; height: 480px; border: 1px solid rgba(255,255,255,.016); border-radius: 50%; bottom: -250px; left: -150px; box-shadow: 0 0 0 60px rgba(255,255,255,.008), 0 0 0 120px rgba(255,255,255,.008); pointer-events: none; }
.lv6-connect-grid { display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; gap: 80px; position: relative; z-index: 1; }
.lv6-connect-copy > .lv6-eyebrow { color: var(--lv6-band-muted); font-size: 9px; margin-bottom: 22px; }
.lv6-connect-copy h2 { font-size: 48px; line-height: 1.14; letter-spacing: -1.7px; }
.lv6-connect-copy h2 em { color: var(--lv6-band-ink); }
.lv6-connect-copy > p:not(.lv6-eyebrow) { margin-top: 20px; font-size: 12px; line-height: 1.9; color: var(--lv6-band-muted); max-width: 310px; }
.lv6-connect-example { margin-top: 24px; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--lv6-band-ink); }
.lv6-prompt-star { color: var(--lv6-band-ink); font-size: 22px; }
.lv6-connect-copy > .lv6-text-link { font-size: 11px; color: var(--lv6-band-muted); margin-top: 31px; }
.lv6-connect-copy > .lv6-text-link:hover { color: var(--lv6-band-bright); }
.lv6-connect-copy > .lv6-text-link .lv6-icon { width: 14px; height: 14px; }
.lv6-terminal { border: 1px solid var(--lv6-band-line); border-radius: 9px; background: var(--lv6-band-2); overflow: hidden; box-shadow: 0 18px 35px rgba(0,0,0,.08); }
.lv6-terminal-top { display: flex; align-items: center; gap: 15px; padding: 20px 21px; border-bottom: 1px solid var(--lv6-band-line); }
.lv6-terminal-top > span:nth-child(2) { font-family: var(--mono); font-size: 8px; letter-spacing: .13em; color: var(--lv6-band-muted); margin-inline: auto; }
.lv6-terminal-top .lv6-icon { width: 12px; height: 12px; color: var(--lv6-band-muted); }
.lv6-terminal .lv6-window-dots i { background: var(--lv6-band-line); }
.lv6-agent-tabs { display: flex; padding: 13px 20px 0; border-bottom: 1px solid var(--lv6-band-line); }
.lv6-agent-tab { min-height: 40px; padding: 0 13px 12px; margin-bottom: -1px; border: 0; border-bottom: 1px solid transparent; background: transparent; color: var(--lv6-band-muted); font-size: 10px; white-space: nowrap; }
.lv6-agent-tab[aria-selected="true"] { color: var(--lv6-band-bright); border-color: var(--lv6-band-focus); }
.lv6-agent-tab:hover { color: var(--lv6-band-bright); }
.lv6-agent-tab:focus-visible { outline-color: var(--lv6-band-focus); outline-offset: -3px; }
.lv6-command-panel { padding: 23px 26px 25px; min-height: 197px; }
.lv6-command-panel:focus-visible { outline-color: var(--lv6-band-focus); outline-offset: -3px; }
.lv6-command-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--mono); color: var(--lv6-band-muted); font-size: 8px; letter-spacing: .07em; }
.lv6-copy-command { display: flex; gap: 5px; align-items: center; background: var(--lv6-band-line); border: 1px solid var(--lv6-band-line); border-radius: 4px; color: var(--lv6-band-ink); padding: 5px 7px; font-family: var(--sans); font-size: 9px; letter-spacing: 0; }
.lv6-copy-command:hover { background: var(--lv6-band-line); }
.lv6-copy-command:focus-visible { outline-color: var(--lv6-band-focus); }
.lv6-copy-command .lv6-icon { width: 11px; height: 11px; }
.lv6-command-panel pre { margin: 21px 0 18px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.9; }
.lv6-command-panel pre code { background: none; border: 0; padding: 0; font-family: var(--mono); color: var(--lv6-band-ink); }
.lv6-terminal-dollar { color: var(--lv6-band-muted); }
.lv6-command-hint { color: var(--lv6-band-muted); font-size: 9px; line-height: 1.8; }
.lv6-command-hint code { background: none; border: 0; padding: 0; color: var(--lv6-band-ink); font-size: 9px; }
.lv6-terminal-bottom { border-top: 1px solid var(--lv6-band-line); display: flex; align-items: center; padding: 13px 24px; gap: 8px; font-family: var(--mono); font-size: 7px; letter-spacing: .08em; color: var(--lv6-band-ink); }
.lv6-terminal-bottom-note { margin-left: auto; font-family: var(--sans); letter-spacing: 0; color: var(--lv6-band-muted); font-size: 8px; }
.lv6-copy-fallback { padding: 16px 24px; border-top: 1px solid var(--lv6-band-line); }
.lv6-copy-fallback label { display: block; color: var(--lv6-band-ink); font-size: 11px; margin-bottom: 8px; }
.lv6-copy-fallback textarea { width: 100%; font-family: var(--mono); background: var(--lv6-band-2); color: var(--lv6-band-ink); border: 1px solid var(--lv6-band-line); border-radius: 3px; font-size: 10px; padding: 8px; resize: vertical; }
.lv6-faq-section { padding-top: 99px; padding-bottom: 96px; display: grid; grid-template-columns: .85fr 1.5fr; gap: 100px; }
.lv6-faq-heading h2 { font-size: 44px; }
.lv6-faq-heading .lv6-text-link { margin-top: 28px; font-size: 11px; color: var(--lv6-faint); }
.lv6-faq-heading .lv6-text-link .lv6-icon { width: 14px; height: 14px; }
.lv6-faq-list details { border-bottom: 1px solid var(--line); }
.lv6-faq-list details:first-child { border-top: 1px solid var(--line); }
.lv6-faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; list-style: none; cursor: pointer; font-size: 13px; padding: 23px 0; }
.lv6-faq-list summary::-webkit-details-marker { display: none; }
.lv6-faq-list summary:hover { color: var(--accent-hover); }
.lv6-faq-list summary .lv6-icon { width: 13px; height: 13px; color: var(--lv6-faint); transition: transform .2s; }
.lv6-faq-list details[open] summary .lv6-icon { transform: rotate(45deg); }
.lv6-faq-list details p { padding: 0 33px 25px 0; color: var(--lv6-faint); font-size: 12px; line-height: 1.9; max-width: 580px; }
.lv6-faq-list details p a { text-decoration: underline; text-underline-offset: 3px; }
.lv6-closing { background: var(--lv6-sage-soft); border: 1px solid var(--lv6-line); border-radius: 9px; padding: 35px 45px 43px; position: relative; overflow: hidden; }
.lv6-closing-top { display: flex; justify-content: space-between; align-items: center; }
.lv6-closing-top > .lv6-eyebrow { color: var(--lv6-band-muted); font-size: 9px; }
.lv6-closing-star { position: absolute; right: 40px; top: -10px; font-size: 120px; color: var(--lv6-sage-soft); line-height: 1; }
.lv6-closing-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; position: relative; margin-top: 27px; }
.lv6-closing h2 { font-size: 54px; line-height: 1.03; letter-spacing: -2.4px; }
.lv6-closing h2 em { color: var(--lv6-sage-ink); }
.lv6-closing-bottom > div { padding-bottom: 5px; }
.lv6-closing .lv6-button { min-height: 47px; font-size: 11px; padding: 0 21px; gap: 27px; }
.lv6-closing-bottom p { font-size: 9px; color: var(--lv6-faint); margin-top: 13px; text-align: center; }
@media (max-width: 1150px) {
  .lv6-hero h1 { font-size: 64px; letter-spacing: -4px; }
  .lv6-hero-art { height: 462px; }
  .lv6-demo-window { width: 300px; top: 192px; }
  .lv6-demo-body { padding: 22px 21px 15px; }
  .lv6-demo-heading { font-size: 35px; }
  .lv6-demo-heading > span { font-size: 43px; }
  .lv6-deploy-receipt { bottom: 18px; width: 272px; right: -2%; padding: 13px; }
  .lv6-publish-tag { top: 76px; font-size: 7px; }
  .lv6-hero { min-height: 581px; }
  .lv6-hero-actions { gap: 8px; }
  .lv6-hero-actions .lv6-button { font-size: 10px; gap: 8px; padding-inline: 14px; }
  .lv6-integrations { gap: 24px; }
  .lv6-integrations > p { width: 128px; }
  .lv6-integration { font-size: 15px; gap: 7px; }
  .lv6-integration-list { gap: 20px; }
  .lv6-integration-extra { margin-left: 0; font-size: 8px; }
  .lv6-product-foot > span, .lv6-plan-note { font-size: 7px; }
  .lv6-connect-grid { gap: 45px; }
  .lv6-connect-copy h2 { font-size: 43px; }
  .lv6-faq-section { gap: 70px; }
}
@media (max-width: 900px) {
  .lv6-hero { grid-template-columns: 1.04fr 1fr; min-height: 500px; padding-top: 35px; padding-bottom: 32px; }
  .lv6-hero h1 { font-size: 50px; letter-spacing: -3.4px; }
  .lv6-hero-description { font-size: 12px; margin-top: 24px; }
  .lv6-hero-eyebrow { font-size: 8px; margin-bottom: 22px; }
  .lv6-hero-art { height: 365px; }
  .lv6-orbit-art { top: -8px; }
  .lv6-demo-window { top: 148px; width: 245px; left: 1%; }
  .lv6-demo-toolbar { padding: 9px 10px; }
  .lv6-demo-body { padding: 17px; }
  .lv6-demo-kicker { font-size: 5px; margin-bottom: 15px; }
  .lv6-demo-heading { font-size: 29px; }
  .lv6-demo-heading > span { top: 52px; right: 17px; font-size: 35px; }
  .lv6-demo-bottom { padding-top: 12px; }
  .lv6-demo-bottom > span:first-child { font-size: 6px; }
  .lv6-publish-tag { top: 51px; right: -3%; padding: 9px; font-size: 6px; gap: 7px; }
  .lv6-publish-tag .lv6-icon { margin-left: 1px; width: 11px; }
  .lv6-deploy-receipt { width: 224px; bottom: 18px; padding: 10px; gap: 8px; }
  .lv6-deploy-receipt strong { font-size: 10px; }
  .lv6-deploy-receipt div > span { font-size: 6px; }
  .lv6-receipt-time { font-size: 5px; }
  .lv6-receipt-check { width: 23px; height: 23px; }
  .lv6-coordinate-top, .lv6-coordinate-bottom { font-size: 6px; }
  .lv6-hero-actions { flex-wrap: wrap; margin-top: 23px; }
  .lv6-hero-actions .lv6-button { min-height: 42px; }
  .lv6-hero-note { font-size: 8px; gap: 5px; }
  .lv6-integrations { gap: 23px; flex-wrap: wrap; padding: 25px 0; }
  .lv6-integrations > p { width: 115px; }
  .lv6-integration-list { gap: 18px; }
  .lv6-integration { font-size: 13px; gap: 7px; }
  .lv6-integration svg { width: 20px; height: 20px; }
  .lv6-integration-extra { display: none; }
  .lv6-possibilities { padding: 75px 0; }
  .lv6-scope h2 { font-size: 41px; }
  .lv6-section-heading > p { font-size: 11px; }
  .lv6-product-card { padding: 23px 23px 0; }
  .lv6-product-card-top { flex-wrap: wrap; }
  .lv6-product-card h3 { font-size: 24px; }
  .lv6-product-card > p { font-size: 11px; min-height: 79px; }
  .lv6-share-visual, .lv6-project-visual { height: 187px; }
  .lv6-file-stack { width: 94px; height: 109px; padding: 12px; }
  .lv6-file-stack-back { transform: translate(-55px, 0) rotate(-15deg); }
  .lv6-file-stack-middle { transform: translate(53px, 1px) rotate(13deg); }
  .lv6-file-stack > i { font-size: 6px; }
  .lv6-file-live { font-size: 5px; }
  .lv6-share-orbit { width: 240px; height: 120px; }
  .lv6-share-orbit-two { width: 205px; height: 157px; }
  .lv6-project-node { width: 65px; height: 65px; }
  .lv6-project-node-db { left: 1%; }
  .lv6-project-node-auth { right: 1%; }
  .lv6-project-node-app { left: calc(50% - 33px); }
  .lv6-project-connections { height: 174px; }
  .lv6-realtime-label { left: 3%; bottom: 19px; font-size: 6px; }
  .lv6-product-foot { flex-wrap: wrap; gap: 8px; padding: 17px 0; }
  .lv6-product-foot .lv6-text-link { font-size: 10px; }
  .lv6-connect-section { padding: 65px 0; }
  .lv6-connect-grid { gap: 30px; grid-template-columns: .9fr 1.1fr; }
  .lv6-connect-copy h2 { font-size: 36px; }
  .lv6-connect-copy > .lv6-eyebrow { font-size: 7px; }
  .lv6-connect-copy > p:not(.lv6-eyebrow) { font-size: 11px; }
  .lv6-connect-example { font-size: 10px; gap: 7px; }
  .lv6-agent-tabs { padding-inline: 10px; }
  .lv6-agent-tab { padding-inline: 8px; font-size: 8px; }
  .lv6-command-panel { padding: 20px; }
  .lv6-command-panel pre { font-size: 10px; }
  .lv6-terminal-top { padding: 17px; }
  .lv6-terminal-top > span:nth-child(2) { font-size: 6px; }
  .lv6-command-label { font-size: 6px; }
  .lv6-terminal-bottom { padding-inline: 17px; }
  .lv6-terminal-bottom-note { font-size: 7px; }
  .lv6-faq-section { gap: 48px; padding: 75px 0; }
  .lv6-faq-heading h2 { font-size: 36px; }
  .lv6-faq-list summary { font-size: 11px; padding: 21px 0; }
  .lv6-faq-list details p { font-size: 11px; }
  .lv6-closing { padding: 31px 33px 36px; }
  .lv6-closing h2 { font-size: 47px; }
  .lv6-closing .lv6-button { gap: 14px; font-size: 10px; }
}
@media (max-width: 650px) {
  .lv6-hero { grid-template-columns: 1fr; padding-top: 51px; padding-bottom: 34px; min-height: auto; }
  .lv6-hero-copy { padding: 0; }
  .lv6-hero-eyebrow { font-size: 8px; margin-bottom: 24px; }
  .lv6-hero h1 { font-size: clamp(43px, 9.6vw, 61px); letter-spacing: -3px; line-height: 1.09; }
  .lv6-hero h1 em { letter-spacing: -1.5px; }
  .lv6-hero-description { font-size: 13px; line-height: 1.85; margin-top: 24px; max-width: 360px; }
  .lv6-desktop-break { display: none; }
  .lv6-hero-actions { margin-top: 25px; flex-wrap: nowrap; gap: 8px; }
  .lv6-hero-actions .lv6-button { font-size: 10px; padding: 0 13px; gap: 8px; min-height: 44px; }
  .lv6-hero-actions .lv6-icon { width: 14px; height: 14px; }
  .lv6-hero-note { font-size: 9px; margin-top: 15px; }
  .lv6-hero-art { width: min(100%, 445px); height: 400px; margin: 29px auto 0; }
  .lv6-orbit-art { width: 106%; left: -4%; top: -4px; }
  .lv6-demo-window { width: 273px; left: 2%; top: 157px; }
  .lv6-demo-toolbar { padding: 10px 12px; }
  .lv6-demo-body { padding: 22px; }
  .lv6-demo-kicker { font-size: 6px; }
  .lv6-demo-heading { font-size: 32px; }
  .lv6-demo-heading > span { font-size: 38px; top: 58px; right: 22px; }
  .lv6-demo-bottom { padding-top: 19px; }
  .lv6-demo-bottom > span:first-child { font-size: 7px; }
  .lv6-publish-tag { top: 66px; right: 0; padding: 11px; font-size: 7px; }
  .lv6-deploy-receipt { width: 255px; right: 0; bottom: 15px; padding: 13px; }
  .lv6-deploy-receipt strong { font-size: 11px; }
  .lv6-deploy-receipt div > span { font-size: 7px; }
  .lv6-receipt-time { font-size: 6px; }
  .lv6-coordinate-top { left: 4%; top: 6px; font-size: 6px; }
  .lv6-coordinate-bottom { right: 2%; bottom: -5px; font-size: 6px; }
  .lv6-integrations { display: block; padding: 25px 0 28px; }
  .lv6-integrations > p { width: auto; display: flex; gap: 4px; font-size: 10px; margin-bottom: 21px; }
  .lv6-integrations > p br { display: none; }
  .lv6-integration-list { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 15px; }
  .lv6-integration { font-size: 16px; gap: 10px; }
  .lv6-integration svg { width: 22px; height: 22px; }
  .lv6-possibilities { padding: 62px 0; }
  .lv6-section-heading { display: block; margin-bottom: 26px; }
  .lv6-section-eyebrow { font-size: 8px; }
  .lv6-scope h2 { font-size: 39px; letter-spacing: -1.7px; }
  .lv6-section-heading > p { margin-top: 21px; font-size: 12px; padding-right: 0; }
  .lv6-section-heading > p br { display: none; }
  .lv6-product-grid { grid-template-columns: 1fr; gap: 17px; }
  .lv6-product-card { padding: 24px 24px 0; }
  .lv6-product-card-top { flex-wrap: nowrap; }
  .lv6-product-number { font-size: 7px; }
  .lv6-pill { font-size: 7px; padding: 6px; }
  .lv6-share-visual, .lv6-project-visual { height: 200px; }
  .lv6-file-stack { width: 104px; height: 120px; padding: 15px; }
  .lv6-file-stack-back { transform: translate(-66px, 0) rotate(-15deg); }
  .lv6-file-stack-middle { transform: translate(62px, 1px) rotate(13deg); }
  .lv6-file-stack > i { font-size: 7px; }
  .lv6-share-orbit { width: 290px; height: 140px; }
  .lv6-share-orbit-two { width: 230px; height: 183px; }
  .lv6-product-card h3 { font-size: 27px; }
  .lv6-product-card > p { font-size: 12px; min-height: auto; margin-bottom: 24px; }
  .lv6-product-foot .lv6-text-link { font-size: 11px; }
  .lv6-product-foot > span, .lv6-plan-note { font-size: 7px; }
  .lv6-project-node { width: 73px; height: 73px; }
  .lv6-project-node-db { left: 5%; }
  .lv6-project-node-auth { right: 5%; }
  .lv6-project-node-app { left: calc(50% - 36px); }
  .lv6-project-connections { height: 185px; }
  .lv6-realtime-label { left: 6%; bottom: 18px; }
  .lv6-connect-section { padding: 55px 0; }
  .lv6-connect-grid { grid-template-columns: 1fr; gap: 32px; }
  .lv6-connect-copy > .lv6-eyebrow { font-size: 8px; }
  .lv6-connect-copy h2 { font-size: 42px; }
  .lv6-connect-copy > p:not(.lv6-eyebrow) { font-size: 12px; max-width: 340px; }
  .lv6-connect-example { font-size: 12px; margin-top: 19px; }
  .lv6-connect-copy > .lv6-text-link { margin-top: 19px; }
  .lv6-agent-tabs { padding-inline: 13px; }
  .lv6-agent-tab { font-size: 9px; padding-inline: 10px; flex: 1; }
  .lv6-terminal-top { padding: 18px; }
  .lv6-terminal-top > span:nth-child(2) { font-size: 7px; }
  .lv6-command-panel { padding: 23px; }
  .lv6-command-panel pre { font-size: 11px; }
  .lv6-command-label { font-size: 7px; }
  .lv6-terminal-bottom { padding: 14px 22px; }
  .lv6-terminal-bottom-note { font-size: 7px; }
  .lv6-faq-section { grid-template-columns: 1fr; gap: 29px; padding: 63px 0; }
  .lv6-faq-heading h2 { font-size: 39px; }
  .lv6-faq-heading h2 br { display: none; }
  .lv6-faq-heading .lv6-text-link { margin-top: 19px; }
  .lv6-faq-list summary { font-size: 12px; }
  .lv6-faq-list details p { font-size: 12px; }
  .lv6-closing { padding: 27px 25px 29px; }
  .lv6-closing-top > .lv6-eyebrow { font-size: 7px; }
  .lv6-closing-star { font-size: 90px; right: 12px; top: 2px; }
  .lv6-closing-bottom { display: block; margin-top: 29px; }
  .lv6-closing h2 { font-size: 45px; }
  .lv6-closing-bottom > div { margin-top: 29px; padding-bottom: 0; }
  .lv6-closing .lv6-button { font-size: 11px; gap: 24px; }
  .lv6-closing-bottom p { text-align: left; font-size: 8px; margin-top: 12px; }
}
@media (max-width: 370px) {
  .lv6-hero h1 { font-size: 40px; letter-spacing: -2.7px; }
  .lv6-hero-actions { flex-wrap: wrap; }
  .lv6-hero-art { height: 359px; }
  .lv6-demo-window { width: 242px; top: 132px; }
  .lv6-demo-heading { font-size: 29px; }
  .lv6-publish-tag { font-size: 6px; top: 46px; }
  .lv6-deploy-receipt { width: 237px; bottom: 8px; }
  .lv6-product-card { padding-inline: 20px; }
  .lv6-product-card-top { flex-wrap: wrap; }
  .lv6-product-foot > span, .lv6-plan-note { font-size: 6px; }
  .lv6-closing h2 { font-size: 39px; }
  .lv6-agent-tab { font-size: 8px; padding-inline: 7px; }
}

/* ----- motion: the hero artwork turns, floats and follows the pointer, with
   a manual pause control; the whole block is opt-out and reduced-motion-off. */
.lv6-hero { position: relative; }
.lv6-hero-art { --lv6-pointer-x: 0px; --lv6-pointer-y: 0px; }
.lv6-orbit-art { transform: translate(calc(var(--lv6-pointer-x) * .4), calc(var(--lv6-pointer-y) * .4)); transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.lv6-globe-grid { transform-origin: 337px 254px; animation: lv6-globe-turn 75s linear infinite; }
.lv6-demo-window { transform: translate(var(--lv6-pointer-x), var(--lv6-pointer-y)) rotate(-5deg); transition: transform .7s cubic-bezier(.2,.8,.2,1), box-shadow .7s; }
.lv6-hero-art:hover .lv6-demo-window { box-shadow: 0 25px 65px rgba(57,60,37,.153), 0 3px 8px rgba(57,60,37,.06); }
.lv6-deploy-receipt { animation: lv6-receipt-float 7s ease-in-out infinite; }
.lv6-publish-tag { animation: lv6-tag-float 8s ease-in-out infinite; }
.lv6-motion-control { position: absolute; right: 0; bottom: 28px; display: flex; align-items: center; gap: 6px; padding: 5px 0 5px 8px; border: 0; background: transparent; font-family: var(--mono); font-size: 8px; color: var(--lv6-faint); opacity: .8; }
.lv6-motion-control:hover { opacity: 1; }
.lv6-motion-icon { font-size: 10px; width: 13px; }
.lv6-motion-paused .lv6-globe-grid,
.lv6-motion-paused .lv6-deploy-receipt,
.lv6-motion-paused .lv6-publish-tag { animation-play-state: paused; }
@keyframes lv6-globe-turn { to { transform: rotate(360deg); } }
@keyframes lv6-receipt-float { 0%, 100% { transform: translateY(0) rotate(2deg); } 50% { transform: translateY(-7px) rotate(1deg); } }
@keyframes lv6-tag-float { 0%, 100% { transform: translateY(0) rotate(3deg); } 50% { transform: translateY(6px) rotate(4deg); } }

/* pointer-follow lift on the product cards (parallel to the hero) */
.lv6-product-card { transition: transform .35s, box-shadow .35s; }
.lv6-product-card:hover { transform: translateY(-5px); box-shadow: 0 14px 35px rgba(72,82,51,.043); }
.lv6-file-stack, .lv6-project-node { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.lv6-share-card:hover .lv6-file-stack-back { transform: translate(-88px, -4px) rotate(-19deg); }
.lv6-share-card:hover .lv6-file-stack-middle { transform: translate(84px, -4px) rotate(18deg); }
.lv6-share-card:hover .lv6-file-stack-front { transform: translate(0, -5px) rotate(-1deg); }
.lv6-project-card:hover .lv6-project-node-db { transform: translateY(-6px) rotate(-3deg); }
.lv6-project-card:hover .lv6-project-node-app { transform: translateY(-8px) rotate(0); }
.lv6-project-card:hover .lv6-project-node-auth { transform: translateY(-4px) rotate(0); }

/* ----- the interactive "take an idea for a spin" local demo ----- */
.lv6-play-section { display: grid; grid-template-columns: .8fr 1.3fr; gap: 70px; padding-top: 5px; padding-bottom: 87px; }
.lv6-play-intro > p:not(.lv6-eyebrow):not(.lv6-play-disclaimer) { font-size: 13px; line-height: 1.8; color: var(--lv6-faint); max-width: 305px; margin-top: 22px; }
.lv6-idea-choices { margin-top: 27px; display: flex; flex-direction: column; gap: 8px; }
.lv6-idea-choice { padding: 15px 14px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: inherit; display: flex; align-items: center; gap: 12px; text-align: left; transition: border-color .2s, background .2s; }
.lv6-idea-choice:hover { background: var(--lv6-sage-soft-2); }
.lv6-idea-choice[aria-pressed="true"] { border-color: var(--lv6-sage-line); background: var(--lv6-sage-soft); }
.lv6-idea-symbol { display: grid; place-items: center; width: 31px; height: 31px; flex-shrink: 0; background: var(--lv6-sage-soft); color: var(--lv6-sage-ink); border-radius: 5px; font-family: var(--mono); font-size: 17px; }
.lv6-idea-choice > span:nth-child(2) { font-size: 12px; font-weight: 500; }
.lv6-idea-choice small { display: block; font-size: 10px; color: var(--lv6-faint); font-weight: 400; margin-top: 4px; }
.lv6-idea-choice > .lv6-icon { width: 14px; height: 14px; margin-left: auto; color: var(--lv6-sage-ink); opacity: 0; transition: opacity .2s, transform .2s; }
.lv6-idea-choice[aria-pressed="true"] > .lv6-icon { opacity: 1; }
.lv6-idea-choice:hover > .lv6-icon { opacity: 1; transform: translateX(2px); }
.lv6-play-disclaimer { font-size: 10px; color: var(--lv6-faint); margin-top: 19px; display: flex; align-items: center; gap: 7px; }
.lv6-play-browser { align-self: center; overflow: hidden; border: 1px solid var(--lv6-line); border-radius: 10px; background: var(--lv6-surface); box-shadow: 0 14px 40px rgba(57,73,35,.04); }
.lv6-play-toolbar { padding: 15px 17px; display: flex; gap: 12px; align-items: center; border-bottom: 1px solid var(--lv6-line); }
.lv6-play-address { font-family: var(--mono); font-size: 9px; color: var(--lv6-faint); display: flex; align-items: center; justify-content: center; gap: 7px; margin-inline: auto; }
.lv6-play-address .lv6-icon { width: 12px; height: 12px; }
.lv6-preview-badge { padding: 3px 5px; border-radius: 3px; border: 1px solid var(--lv6-line); font-family: var(--mono); font-size: 6px; letter-spacing: .08em; color: var(--lv6-faint); }
.lv6-play-viewport { position: relative; min-height: 378px; background: var(--lv6-sage-soft-2); }
.lv6-play-viewport iframe { width: 100%; height: 378px; border: 0; display: block; background: var(--lv6-surface); }
.lv6-preview-loading { position: absolute; z-index: 2; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; background: var(--lv6-sage-soft-2); color: var(--lv6-faint); font-family: var(--mono); font-size: 10px; backdrop-filter: blur(8px); }
.lv6-preview-spinner { width: 31px; height: 31px; border: 1px solid var(--lv6-sage-line); border-top-color: var(--lv6-sage); border-radius: 50%; animation: lv6-preview-spin .8s linear infinite; }
@keyframes lv6-preview-spin { to { transform: rotate(360deg); } }
.lv6-play-browser-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 18px; border-top: 1px solid var(--lv6-line); }
.lv6-preview-status { display: flex; gap: 7px; align-items: center; color: var(--lv6-faint); font-size: 9px; }
.lv6-open-preview { font-size: 10px; gap: 5px; }
.lv6-open-preview .lv6-icon { width: 13px; height: 13px; }
.lv6-open-preview[aria-disabled="true"] { color: var(--lv6-faint); pointer-events: none; }
.lv6-play-caption { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 21px; margin-top: -34px; border-top: 1px solid var(--lv6-line); }
.lv6-play-caption .lv6-eyebrow { color: var(--lv6-faint); font-size: 8px; }
.lv6-play-caption .lv6-eyebrow span { margin-inline: 12px; color: var(--lv6-sage-line); }
.lv6-play-caption .lv6-text-link { font-size: 11px; }
.lv6-play-caption .lv6-text-link .lv6-icon { width: 14px; height: 14px; }

/* ----- the copy toast ----- */
.lv6-toast { position: fixed; z-index: 50; bottom: 24px; left: 50%; transform: translate(-50%, 15px); max-width: calc(100% - 40px); padding: 13px 20px; background: var(--lv6-band); color: var(--lv6-band-bright); border: 1px solid var(--lv6-band-line); border-radius: 7px; box-shadow: 0 8px 28px rgba(35,39,32,.15); font-size: 12px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.lv6-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* the landing's own scroll-progress underline (chrome-scoped to this page) */
body.lv6-scope .header--sticky::after { content: ''; position: absolute; bottom: -1px; height: 1px; left: 0; background: var(--lv6-accent); width: calc(var(--lv6-scroll-progress, 0) * 100%); }

/* scroll reveals — the page script adds .lv6-revealed as sections enter */
.lv6-revealed { animation: lv6-section-in .75s cubic-bezier(.2,.8,.2,1) both; }
@keyframes lv6-section-in { from { opacity: .25; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 1001px) {
  .lv6-hero-art { animation: lv6-art-enter .9s ease-out both; }
  .lv6-hero-copy { animation: lv6-copy-enter .7s ease-out both; }
  @keyframes lv6-art-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes lv6-copy-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
}

@media (max-width: 1150px) {
  .lv6-play-section { gap: 45px; }
}

@media (max-width: 900px) {
  .lv6-play-section { gap: 30px; padding-bottom: 65px; }
  .lv6-play-intro h2 { font-size: 37px; }
  .lv6-play-intro > p:not(.lv6-eyebrow):not(.lv6-play-disclaimer) { font-size: 11px; }
  .lv6-idea-choice { padding: 12px 8px; gap: 8px; }
  .lv6-idea-choice > span:nth-child(2) { font-size: 10px; }
  .lv6-idea-choice small { font-size: 8px; }
  .lv6-idea-symbol { width: 26px; height: 26px; }
  .lv6-play-disclaimer { font-size: 8px; }
  .lv6-play-caption .lv6-eyebrow { font-size: 6px; }
  .lv6-play-caption .lv6-eyebrow span { margin-inline: 5px; }
  .lv6-play-caption .lv6-text-link { font-size: 9px; }
  .lv6-share-card:hover .lv6-file-stack-back { transform: translate(-62px, -4px) rotate(-19deg); }
  .lv6-share-card:hover .lv6-file-stack-middle { transform: translate(59px, -4px) rotate(18deg); }
}

@media (max-width: 650px) {
  .lv6-motion-control { bottom: 7px; font-size: 7px; }
  .lv6-play-section { grid-template-columns: 1fr; gap: 27px; padding-top: 0; padding-bottom: 60px; }
  .lv6-play-intro h2 { font-size: 39px; }
  .lv6-play-intro h2 br { display: none; }
  .lv6-play-intro > p:not(.lv6-eyebrow):not(.lv6-play-disclaimer) { font-size: 12px; max-width: 360px; margin-top: 19px; }
  .lv6-idea-choices { margin-top: 20px; gap: 5px; }
  .lv6-idea-choice { padding: 13px; gap: 12px; }
  .lv6-idea-symbol { width: 31px; height: 31px; }
  .lv6-idea-choice > span:nth-child(2) { font-size: 12px; }
  .lv6-idea-choice small { font-size: 10px; }
  .lv6-play-disclaimer { font-size: 9px; margin-top: 14px; }
  .lv6-play-caption { margin-top: 0; display: block; padding-top: 17px; }
  .lv6-play-caption .lv6-eyebrow { font-size: 7px; }
  .lv6-play-caption .lv6-eyebrow span { margin-inline: 4px; }
  .lv6-play-caption .lv6-text-link { font-size: 11px; margin-top: 16px; }
  .lv6-play-viewport, .lv6-play-viewport iframe { height: 393px; min-height: 393px; }
  .lv6-share-card:hover .lv6-file-stack-back { transform: translate(-75px, -4px) rotate(-19deg); }
  .lv6-share-card:hover .lv6-file-stack-middle { transform: translate(70px, -4px) rotate(18deg); }
}

@media (max-width: 600px) {
  .lv6-ledger { gap: 14px; }
  .lv6-ledger-num { font-size: 20px; }
  .lv6-ledger-label { font-size: 8px; }
}