/* Static marketing landing — paints before Blazor boots, so it must not depend on any app CSS beyond
   the shared fonts. Same visual vocabulary as the app (cream #f4f1e9, green #1e6f50, IBM Plex, type
   chips, health strips), hand-drawn in HTML/CSS so it loads instantly. See index.html for the boot gate. */

#landing {
    position: fixed;
    inset: 0;
    z-index: 9000;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    background: #f4f1e9;
    color: #1d1a13;
    font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    line-height: 1.5;
    opacity: 1;
    transition: opacity .2s ease-out;
}

/* Reveal fade — added when a CTA hands off to the (already-warm) app underneath. */
#landing.lp-hide {
    opacity: 0;
    pointer-events: none;
}

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

.lp-mono {
    font-family: 'IBM Plex Mono', monospace;
}

/* ---- Top bar ---- */
.lp-topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 0 6px;
}

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

.lp-brand__tile {
    background: #1e6f50;
    color: #fffdf7;
    font: 600 15px 'IBM Plex Mono', monospace;
    letter-spacing: .5px;
    padding: 5px 9px;
    border-radius: 5px;
}

.lp-brand__word {
    font: 600 14px 'IBM Plex Mono', monospace;
    letter-spacing: 1.8px;
    color: #1d1a13;
}

.lp-topbar__spacer { flex: 1; }

.lp-topbar__link {
    font-size: 13px;
    font-weight: 600;
    color: #1e6f50;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
}
.lp-topbar__link:hover { text-decoration: underline; }

/* ---- Buttons ---- */
.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: 600 14.5px 'IBM Plex Sans', sans-serif;
    padding: 12px 22px;
    border-radius: 8px;
    cursor: pointer;
    border: 1.5px solid transparent;
    text-decoration: none;
    transition: filter .12s ease, background .12s ease;
    white-space: nowrap;
}
.lp-btn--primary {
    background: #1e6f50;
    color: #fffdf7;
    border-color: #1e6f50;
}
.lp-btn--primary:hover { filter: brightness(1.06); }
.lp-btn--ghost {
    background: #fffdf7;
    color: #1d1a13;
    border-color: #d6cdb6;
}
.lp-btn--ghost:hover { background: #f7f3e8; }

/* ---- Hero ---- */
.lp-hero {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 44px;
    align-items: center;
    padding: 40px 0 46px;
}

.lp-eyebrow {
    display: inline-block;
    font: 600 10.5px 'IBM Plex Mono', monospace;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #1e6f50;
    background: #e6f1ea;
    padding: 4px 10px;
    border-radius: 6px;
    margin-bottom: 18px;
}

.lp-hero h1 {
    font-size: clamp(30px, 5vw, 48px);
    line-height: 1.08;
    letter-spacing: -1.2px;
    font-weight: 700;
    margin: 0 0 18px;
    color: #1d1a13;
}
.lp-hero h1 .lp-underline {
    background-image: linear-gradient(#b23c20, #b23c20);
    background-repeat: no-repeat;
    background-position: 0 92%;
    background-size: 100% 3px;
    padding-bottom: 1px;
}

.lp-lead {
    font-size: clamp(15px, 2.1vw, 17px);
    line-height: 1.6;
    color: #4a4536;
    margin: 0 0 14px;
    max-width: 52ch;
}

.lp-sub {
    font-size: 14.5px;
    line-height: 1.6;
    color: #6f6a5c;
    margin: 0 0 26px;
    max-width: 52ch;
}

.lp-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.lp-trust {
    font: 500 12px 'IBM Plex Mono', monospace;
    color: #96907e;
    letter-spacing: .2px;
}

/* ---- Mini-grid vignette (product look, hand-drawn) ---- */
.lp-vignette {
    background: #fffdf7;
    border: 1px solid #e0d9c6;
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(30, 111, 80, .12);
    padding: 14px 14px 12px;
    overflow: hidden;
}

.lp-vignette__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 2px 12px;
}
.lp-dot { width: 9px; height: 9px; border-radius: 50%; background: #e0d9c6; }
.lp-vignette__file {
    margin-left: 8px;
    font: 500 11px 'IBM Plex Mono', monospace;
    color: #96907e;
}

.lp-grid { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.lp-grid th {
    text-align: left;
    padding: 7px 8px 4px;
    border-bottom: 1px solid #ece3cf;
    vertical-align: bottom;
}
.lp-grid__h {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #4a4536;
    font-size: 11.5px;
}
.lp-chip {
    font: 600 9px 'IBM Plex Mono', monospace;
    border-radius: 4px;
    padding: 1px 5px;
}
.lp-chip--text { background: #f1ecdd; color: #6f6a5c; }
.lp-chip--email { background: #f1ecdd; color: #6f6a5c; }
.lp-chip--date { background: #f7edd2; color: #9a6b00; }
.lp-chip--num { background: #e6f1ea; color: #1e6f50; }

/* Per-column health strip under the header */
.lp-strip {
    height: 4px;
    border-radius: 2px;
    background: #ece3cf;
    margin-top: 5px;
    overflow: hidden;
}
.lp-strip > i { display: block; height: 100%; border-radius: 2px; }
.lp-strip--ok > i { width: 100%; background: #1e6f50; }
.lp-strip--err > i { width: 66%; background: #b23c20; }
.lp-strip--warn > i { width: 80%; background: #9a6b00; }

.lp-grid td {
    padding: 8px;
    border-bottom: 1px solid #f2ecdd;
    color: #33302a;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11.5px;
    white-space: nowrap;
}
.lp-grid tr:last-child td { border-bottom: none; }
.lp-bad-err {
    background-image: linear-gradient(#b23c20, #b23c20);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 2px;
    padding-bottom: 1px;
}
.lp-bad-warn {
    background-image: linear-gradient(#9a6b00, #9a6b00);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 2px;
    padding-bottom: 1px;
}
.lp-rownum { color: #b9b19a; padding-right: 4px; }

.lp-vignette__foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 4px 2px;
    font: 500 11px 'IBM Plex Mono', monospace;
    color: #6f6a5c;
}
.lp-health {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1e6f50;
    font-weight: 600;
}
.lp-health__bar { width: 60px; height: 6px; border-radius: 3px; background: #ece3cf; overflow: hidden; }
.lp-health__bar > i { display: block; height: 100%; width: 56%; background: #1e6f50; }

.lp-caption {
    text-align: center;
    font-size: 12px;
    color: #96907e;
    margin: 12px 0 0;
}

/* ---- Section scaffolding ---- */
.lp-section { padding: 46px 0; }
.lp-section--alt { background: #efe9db; }

.lp-section__eyebrow {
    text-align: center;
    font: 600 10.5px 'IBM Plex Mono', monospace;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #1e6f50;
    margin: 0 0 8px;
}
.lp-section__title {
    text-align: center;
    font-size: clamp(24px, 3.6vw, 32px);
    font-weight: 700;
    letter-spacing: -.6px;
    margin: 0 0 8px;
    color: #1d1a13;
}
.lp-section__sub {
    text-align: center;
    font-size: 14.5px;
    color: #6f6a5c;
    max-width: 56ch;
    margin: 0 auto 30px;
    line-height: 1.55;
}

/* ---- Video ---- */
.lp-video-frame {
    max-width: 820px;
    margin: 0 auto;
    background: #fffdf7;
    border: 1px solid #e0d9c6;
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .1);
    padding: 12px;
}
.lp-video-frame__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px 10px;
}
.lp-video-frame video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    background: #14120d;
}

/* ---- How it works ---- */
.lp-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.lp-step {
    background: #fffdf7;
    border: 1px solid #e0d9c6;
    border-radius: 12px;
    padding: 20px 18px 18px;
    display: flex;
    flex-direction: column;
}
.lp-step__num {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #1e6f50;
    color: #fffdf7;
    font: 600 14px 'IBM Plex Mono', monospace;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.lp-step h3 {
    font-size: 15.5px;
    font-weight: 700;
    margin: 0 0 7px;
    color: #1d1a13;
}
.lp-step p {
    font-size: 13px;
    line-height: 1.55;
    color: #5c574a;
    margin: 0 0 14px;
}
.lp-step__viz {
    margin-top: auto;
    background: #f7f3e8;
    border: 1px solid #ece3cf;
    border-radius: 8px;
    padding: 12px;
    min-height: 76px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

/* small viz atoms reused inside steps */
.lp-drop {
    border: 1.5px dashed #b9d2c5;
    border-radius: 7px;
    text-align: center;
    padding: 14px 6px;
    font: 600 11px 'IBM Plex Mono', monospace;
    color: #1e6f50;
    background: #eef5f0;
}
.lp-pill {
    font: 600 10.5px 'IBM Plex Mono', monospace;
    background: #e6f1ea;
    color: #1e6f50;
    border-radius: 5px;
    padding: 3px 8px;
    display: inline-block;
}
.lp-sentence {
    font: 500 11px 'IBM Plex Mono', monospace;
    color: #4a4536;
    background: #fffdf7;
    border: 1px solid #ece3cf;
    border-radius: 6px;
    padding: 6px 8px;
    line-height: 1.5;
}
.lp-cellrow {
    display: flex;
    gap: 6px;
    font: 500 11px 'IBM Plex Mono', monospace;
    color: #33302a;
    align-items: center;
}
.lp-report {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 600 11px 'IBM Plex Mono', monospace;
    color: #4a4536;
}
.lp-report__file {
    background: #fffdf7;
    border: 1px solid #ece3cf;
    border-radius: 6px;
    padding: 5px 9px;
}

/* ---- Value cards ---- */
.lp-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 860px;
    margin: 0 auto;
}
.lp-card {
    background: #fffdf7;
    border: 1px solid #e0d9c6;
    border-radius: 12px;
    padding: 22px 20px;
}
.lp-card__icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #e6f1ea;
    color: #1e6f50;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 600 16px 'IBM Plex Mono', monospace;
    margin-bottom: 13px;
}
.lp-card h3 {
    font-size: 15.5px;
    font-weight: 700;
    margin: 0 0 7px;
    color: #1d1a13;
}
.lp-card p {
    font-size: 13.5px;
    line-height: 1.6;
    color: #5c574a;
    margin: 0;
}

/* ---- Pricing teaser ---- */
.lp-price {
    text-align: center;
    max-width: 620px;
    margin: 0 auto;
}
.lp-price__tiers {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin: 6px 0 24px;
}
.lp-price__tier { font-size: 15px; color: #33302a; }
.lp-price__tier b { color: #1d1a13; }
.lp-price__amt {
    font: 700 18px 'IBM Plex Mono', monospace;
    color: #1e6f50;
    margin-right: 4px;
}

/* ---- Footer ---- */
.lp-footer {
    border-top: 1px solid #e0d9c6;
    padding: 26px 0 40px;
}
.lp-footer__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    font-size: 13px;
    color: #6f6a5c;
}
.lp-footer a, .lp-footer button.lp-footer__link {
    color: #1e6f50;
    font-weight: 600;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    font: 600 13px 'IBM Plex Sans', sans-serif;
    padding: 0;
}
.lp-footer a:hover, .lp-footer button.lp-footer__link:hover { text-decoration: underline; }
.lp-footer__spacer { flex: 1; }
.lp-footer__fine {
    margin-top: 14px;
    font-size: 11.5px;
    color: #a49e8c;
    line-height: 1.5;
}

/* ---- Responsive ---- */
@media (max-width: 860px) {
    .lp-hero {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 26px 0 34px;
    }
    .lp-steps { grid-template-columns: repeat(2, 1fr); }
    /* Once the hero is a single column, its children default to min-width:auto and inherit the
       vignette table's (nowrap) min-content width — stretching the whole column, and the heading,
       lead and CTA with it, past the right edge. min-width:0 lets the text column shrink to fit. */
    .lp-hero > div { min-width: 0; }
}

@media (max-width: 560px) {
    .lp-wrap { padding: 0 18px; }
    .lp-steps { grid-template-columns: 1fr; }
    .lp-cards { grid-template-columns: 1fr; }
    .lp-cta-row .lp-btn { flex: 1 1 auto; }
    .lp-section { padding: 36px 0; }
    .lp-topbar__link { display: none; }
    /* Shrink the decorative product grid so all four columns fit a phone without clipping the last;
       overflow-x:auto is the safety net for widths narrower than the 390px target. */
    .lp-grid td, .lp-grid th { padding: 5px 4px; font-size: 10.5px; }
    .lp-grid__h { font-size: 10.5px; }
    .lp-vignette { overflow-x: auto; }
    .lp-vignette__file { display: none; }
}