/* =============================================================================
   W33KND landing — the few components the marketing site's system does not
   already carry. Everything else comes from main.css unchanged, so this page
   and prjctlazrus.com stay one design system rather than two that resemble
   each other.
   ========================================================================== */

@layer components {

    /* --- Status line ------------------------------------------------------ */
    /* Not a pill badge. A dated status line, the way a spec sheet stamps its
       revision: mono, hairline-ruled on the left, one beat of accent. */
    .status-line {
        display: inline-flex;
        align-items: baseline;
        gap: 0.55rem;
        font-family: var(--mono);
        font-size: var(--t-meta);
        color: var(--ink-2);
        border-left: 2px solid var(--signal);
        padding: 0.15rem 0 0.15rem 0.7rem;
        margin-block: 1.5rem;
    }
    .status-line .k { color: var(--ink-3); font-size: var(--t-micro); }

    /* --- Waitlist form ---------------------------------------------------- */
    /* The field is a rule, not a rounded box, and the button squares off
       against it. Same geometry as the contact form on the main site. */
    .waitlist {
        display: flex;
        align-items: flex-end;
        gap: 0.9rem;
        flex-wrap: wrap;
        max-width: 34rem;
        margin-top: 2.5rem;
    }
    .waitlist .form-field { flex: 1 1 18rem; margin-bottom: 0; min-width: 0; }
    .waitlist .btn { flex: none; }

    /* .form-notice already carries the rule, the measure and the colour; this
       only sets it away from the field above it. */
    .waitlist-note { margin-top: 1.25rem; margin-bottom: 0; }

    /* From products.css: a product page opens on its own name, so the standing
       line back to the parent index is a label, not a link in accent. */
    .product-page .product-hero-content > .overline { display: block; margin-bottom: 1rem; }
    .product-page .product-hero-content > .overline a {
        color: inherit;
        text-decoration: none;
        border-bottom: 1px solid var(--rule-2);
    }
    .product-page .product-hero-content > .overline a:hover { border-bottom-color: var(--ink-3); }

    .waitlist-done {
        display: none;
        margin-top: 2.5rem;
        border-left: 2px solid var(--green);
        padding: 0.35rem 0 0.35rem 1rem;
        max-width: 46rem;
    }
    .waitlist-done[data-state='ok'] { display: block; }
    .waitlist-done strong {
        display: block;
        font-family: var(--mono);
        font-size: var(--t-meta);
        font-weight: 600;
        color: var(--ink);
        margin-bottom: 0.3rem;
    }
    .waitlist-done p { font-size: var(--t-small); color: var(--ink-2); }

    /* --- Ecosystem register ----------------------------------------------- */
    /* The chip row is replaced by a register: name, one line of scope, and the
       state it is monitored in. A row a reader can check, not five lozenges. */
    .register { border-top: 1px solid var(--rule); }
    .register-row {
        display: grid;
        grid-template-columns: 10rem minmax(0, 1fr) auto;
        align-items: baseline;
        gap: 0.4rem 1.25rem;
        padding: 1.15rem 0;
        border-bottom: 1px solid var(--rule);
    }
    .register-row .n {
        font-family: var(--mono);
        font-size: var(--t-meta);
        font-weight: 600;
        color: var(--ink);
    }
    .register-row .d { font-size: var(--t-small); color: var(--ink-2); }
    .register-row .s {
        font-family: var(--mono);
        font-size: var(--t-micro);
        color: var(--ink-3);
        white-space: nowrap;
    }
    @media (max-width: 640px) {
        .register-row { grid-template-columns: minmax(0, 1fr) auto; }
        .register-row .d { grid-column: 1 / -1; }
    }

    /* --- Stack line ------------------------------------------------------- */
    .stack-line {
        font-family: var(--mono);
        font-size: var(--t-micro);
        line-height: 2;
        color: var(--ink-3);
        margin-top: 1.6rem;
        padding-top: 1.2rem;
        border-top: 1px solid var(--rule);
        max-width: 76ch;
    }
    .stack-line span { color: var(--ink-2); }

    /* --- Landing footer --------------------------------------------------- */
    /* One product, so the five-column site footer would be mostly empty. Same
       rule, same mono, one row. */
    .footer--slim .footer-inner {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
        gap: 2rem var(--gap);
    }
    @media (max-width: 640px) { .footer--slim .footer-inner { grid-template-columns: 1fr; } }
}

@layer components {
    /* At two columns the third stat keeps the vertical rule that separated it
       from a cell no longer beside it. The datasheet strip in main.css already
       solves this; the product stat row never got the same treatment. */
    @media (max-width: 640px) {
        .product-stats { grid-template-columns: repeat(2, 1fr); }
        .stat { border-left: 0; padding-left: 0; padding-block: 1.15rem; }
        .stat:nth-child(n+3) { border-top: 1px solid var(--rule); }
    }
}