/* ============================================================================
   Capture landing page (16 September 2026)
   ----------------------------------------------------------------------------
   Replaces public/css/optimized/index.css, which carried three palettes at once
   (GitHub Primer, Bootstrap blue and pure black), styled around forty selectors
   that no longer existed in the markup, and had no real mobile layer.

   Same language as the dashboard: greys only, no lines, contrast from blocks,
   one type hierarchy, grey buttons with grey text, nothing in the face, one
   centred shell. Every rule here is prefixed `.lp-` so it cannot reach the app.
   ============================================================================ */

.lp {
    --lp-shell: 1240px;        /* the app's centred shell */
    --lp-measure: 720px;       /* comfortable reading width for prose */
    --lp-t1: #555;             /* strongest ink the language allows */
    --lp-t2: #666;             /* headings */
    --lp-t3: #777;             /* item titles */
    --lp-t4: #8a8a8a;          /* body */
    --lp-t5: #aaa;             /* meta */
    --lp-label: #b8b8b8;       /* 10px uppercase labels */
    --lp-block: #f7f7f7;       /* grey block */
    --lp-block-soft: #fafafa;
    --lp-radius: 10px;
    --lp-header: 64px;

    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--lp-t4);
    background: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.lp h1,
.lp h2,
.lp h3 {
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--lp-t2);
    margin: 0;
}

.lp p {
    margin: 0;
}

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

/* Smooth scroll for the in-page links, honoured only where motion is welcome */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* ---------- Shell ---------------------------------------------------------- */

.lp-shell {
    width: 100%;
    max-width: var(--lp-shell);
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* ---------- Header --------------------------------------------------------- */

.lp-header {
    position: sticky;
    top: 0;
    z-index: 10;
    height: var(--lp-header);
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04), 0 6px 16px rgba(0, 0, 0, 0.05);
}

.lp-header .lp-shell {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 100%;
}

.lp-logo img {
    display: block;
    width: 96px;
}

.lp-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.lp-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--lp-t3);
    transition: color 0.15s ease, background-color 0.15s ease;
}

.lp-nav a:hover {
    color: var(--lp-t1);
    background: #f5f5f5;
}

/* the one action in the header, still a grey button with grey text */
.lp-nav .lp-nav-cta {
    color: var(--lp-t3);
    background: #e8e8e8;
}

.lp-nav .lp-nav-cta:hover {
    color: var(--lp-t1);
    background: #dedede;
}

/* ---------- Sections ------------------------------------------------------- */

.lp-section {
    padding: 72px 0;
}

.lp-section--block {
    background: var(--lp-block-soft);
}

/* the sticky header must not cover an anchor target */
.lp-section[id] {
    scroll-margin-top: calc(var(--lp-header) + 12px);
}

.lp-label {
    display: block;
    margin-bottom: 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lp-label);
}

.lp-section h2 {
    font-size: 26px;
}

.lp-section-sub {
    max-width: var(--lp-measure);
    margin-top: 8px;
    font-size: 15px;
    color: var(--lp-t5);
}

/* ---------- Hero ----------------------------------------------------------- */

.lp-hero {
    padding: 88px 0 72px;
    text-align: center;
}

.lp-hero h1 {
    max-width: 16ch;
    margin: 0 auto;
    font-size: 44px;
    color: var(--lp-t1);
}

.lp-hero-sub {
    max-width: 52ch;
    margin: 16px auto 0;
    font-size: 16px;
    color: var(--lp-t4);
}

.lp-demo {
    max-width: 560px;
    margin: 36px auto 0;
}

.lp-demo-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 52px;
    padding: 0 18px;
    font-family: inherit;
    font-size: 16px;            /* iOS zooms anything smaller */
    color: var(--lp-t2);
    background: var(--lp-block);
    border: 0;
    border-radius: 26px;
    outline: 0;
    transition: background-color 0.15s ease;
}

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

.lp-demo-input:hover {
    background: #f2f2f2;
}

/* focus is a block swap plus a soft ring, never a hairline colour change */
.lp-demo-input:focus {
    background: #fff;
    outline: 2px solid #d8d8d8;
    outline-offset: 2px;
}

.lp-demo-hint {
    margin-top: 10px;
    font-size: 12px;
    color: var(--lp-t5);
}

.lp-demo-note {
    margin-top: 4px;
    font-size: 12px;
    color: var(--lp-label);
}

/* what replaced the full-screen pop-up: a quiet block under the demo */
.lp-demo-more {
    display: none;
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: var(--lp-radius);
    background: var(--lp-block);
    font-size: 13px;
    color: var(--lp-t4);
}

.lp-demo-more.is-open {
    display: block;
}

.lp-demo-more strong {
    display: block;
    margin-bottom: 2px;
    font-size: 14px;
    font-weight: 600;
    color: var(--lp-t2);
}

.lp-demo-more-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

/* ---------- Buttons -------------------------------------------------------- */

.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: 22px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--lp-t3);
    background: #e8e8e8;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.lp-btn:hover {
    color: var(--lp-t1);
    background: #dedede;
}

.lp-btn--quiet {
    background: #f0f0f0;
    color: var(--lp-t5);
}

.lp-btn--quiet:hover {
    background: #e8e8e8;
    color: var(--lp-t3);
}

/* ---------- Feature blocks (About) ----------------------------------------- */

.lp-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 28px;
}

.lp-card {
    padding: 20px;
    border-radius: var(--lp-radius);
    background: #fff;
}

.lp-section--block .lp-card {
    background: #fff;
}

.lp-card h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--lp-t2);
}

.lp-card p {
    margin-top: 6px;
    font-size: 13px;
    color: var(--lp-t4);
}

/* ---------- How it works --------------------------------------------------- */

.lp-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 28px;
    counter-reset: lp-step;
}

.lp-step {
    padding: 20px;
    border-radius: var(--lp-radius);
    background: var(--lp-block);
}

.lp-step-no {
    display: block;
    margin-bottom: 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--lp-label);
}

.lp-step h3 {
    font-size: 15px;
}

.lp-step p {
    margin-top: 6px;
    font-size: 13px;
    color: var(--lp-t4);
}

/* ---------- Closing call to action ----------------------------------------- */

.lp-cta {
    padding: 72px 0;
    text-align: center;
}

.lp-cta h2 {
    font-size: 26px;
}

.lp-cta .lp-btn {
    margin-top: 20px;
}

/* ---------- Footer --------------------------------------------------------- */

.lp-footer {
    padding: 32px 0 40px;
    background: var(--lp-block-soft);
}

.lp-footer .lp-shell {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px 24px;
}

.lp-footer-name {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--lp-t2);
}

.lp-footer-tagline {
    font-size: 12px;
    color: var(--lp-t5);
}

.lp-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-left: auto;
}

.lp-footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 12px;
    color: var(--lp-t5);
    transition: color 0.15s ease, background-color 0.15s ease;
}

.lp-footer-links a:hover {
    color: var(--lp-t3);
    background: #f2f2f2;
}

.lp-footer-copy {
    flex: 1 0 100%;
    margin-top: 4px;
    font-size: 11px;
    color: var(--lp-label);
}

/* ---------- Focus ---------------------------------------------------------- */

.lp :focus-visible {
    outline: 2px solid #8a8a8a;
    outline-offset: 2px;
    border-radius: 6px;
}

/* a skip link that only appears when tabbed to */
.lp-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 20;
}

.lp-skip:focus {
    left: 12px;
    top: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--lp-t1);
    background: #e8e8e8;
}

/* ---------- Phones --------------------------------------------------------- */

@media (max-width: 768px) {
    .lp-shell {
        padding: 0 16px;
    }

    .lp-header {
        height: auto;
        min-height: 56px;
    }

    .lp-header .lp-shell {
        flex-wrap: wrap;
        gap: 8px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .lp-logo img {
        width: 84px;
    }

    .lp-nav {
        gap: 2px;
    }

    .lp-nav a {
        min-height: 44px;
        padding: 0 10px;
        font-size: 12px;
    }

    .lp-hero {
        padding: 40px 0 44px;
    }

    .lp-hero h1 {
        max-width: none;
        font-size: 30px;
    }

    .lp-hero-sub {
        font-size: 15px;
    }

    .lp-section {
        padding: 44px 0;
    }

    .lp-section h2,
    .lp-cta h2 {
        font-size: 22px;
    }

    .lp-section-sub {
        font-size: 14px;
    }

    .lp-grid,
    .lp-steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        margin-top: 20px;
    }

    .lp-card,
    .lp-step {
        padding: 16px;
    }

    .lp-card p,
    .lp-step p,
    .lp-demo-more {
        font-size: 13px;
    }

    /* the phone floors set in the app's accessibility pass: labels 11, meta 12 */
    .lp-label,
    .lp-step-no {
        font-size: 11px;
    }

    .lp-footer-copy {
        font-size: 12px;
    }

    .lp-footer-links {
        margin-left: 0;
    }
}

@media (max-width: 380px) {
    .lp-nav a {
        padding: 0 8px;
    }
}