/* Public landing page — page styles.
   Extracted from landing.php (384 lines of inline \3c style>).
   This entry point does NOT load style.css, so it cannot use the --c-*
   or --z-* tokens; its values stay literal on purpose. It is standalone
   by design — a signed-out visitor should not download the whole app's
   stylesheet to read one page.
   Cache-busted with filemtime, which inline CSS could never be. */
:root {
        --primary:   #0f172a;
        --primary-d: #000000;
        --slate-700: #334155;
        --slate-500: #64748b;
        --slate-300: #cbd5e1;
        --slate-200: #e2e8f0;
        --slate-100: #f1f5f9;
        --slate-50:  #f8fafc;
        --success:   #157a58;
        --warning:   #f59e0b;
        --danger:    #ef4444;
    }

    *, *::before, *::after { box-sizing: border-box; }

    html, body {
        font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        background: #fff;
        color: var(--primary);
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
    }
    body { font-size: 14px; line-height: 1.55; overflow-y: auto; }
    a { text-decoration: none; }

    /* ── Navbar ─────────────────────────────────── */
    .lp-navbar {
        position: sticky; top: 0; z-index: 1030;
        padding-top: env(safe-area-inset-top, 0px);
        background: rgba(255,255,255,.82);
        -webkit-backdrop-filter: blur(22px) saturate(190%);
        backdrop-filter: blur(22px) saturate(190%);
        border-bottom: 1px solid rgba(15,23,42,.06);
        box-shadow: inset 0 -1px 0 rgba(255,255,255,.55);
    }
    .lp-navbar .navbar-brand { font-weight: 800; font-size: 18px; letter-spacing: -.3px; color: var(--primary); display: flex; align-items: center; gap: 10px; }
    .lp-navbar .navbar-brand img { height: 26px; }
    .lp-navbar .badge-beta { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; background: var(--slate-100); color: var(--slate-700); padding: 3px 7px; border-radius: 999px; font-weight: 700; border: 1px solid var(--slate-200); }
    .lp-nav-link { color: var(--slate-500); font-weight: 500; font-size: 14px; padding: 8px 12px; transition: color .15s; }
    .lp-nav-link:hover { color: var(--primary); }

    /* ── Desktop: slim frosted-glass floating pill, pinned, content scrolls under
       it (same treatment as the app's dashboard header). position:fixed is immune
       to the html overflow-x:hidden that breaks sticky. ── */
    @media (min-width: 992px) {
        .lp-navbar {
            position: fixed;
            top: 14px; left: 50%; transform: translateX(-50%);
            width: calc(100% - 40px); max-width: 1180px;
            z-index: 1030;
            padding-top: 0;
            border-radius: 999px;
            background: rgba(255,255,255,.75);
            -webkit-backdrop-filter: blur(22px) saturate(190%);
            backdrop-filter: blur(22px) saturate(190%);
            border: 1px solid rgba(255,255,255,.6);
            box-shadow: 0 8px 28px rgba(15,23,42,.10), inset 0 1px 1px rgba(255,255,255,.7);
        }
        .lp-navbar .container { max-width: 100%; padding-left: 18px; padding-right: 12px; }
        .lp-navbar .container > div { height: 56px !important; }   /* slimmer */
        .lp-navbar .navbar-brand img { height: 24px; }
        /* push the hero below the floating pill */
        .lp-hero { padding-top: 104px; }
    }

    .btn-primary, .btn-primary:focus { background: var(--primary); border-color: var(--primary); font-weight: 600; }
    .btn-primary:hover { background: var(--primary-d); border-color: var(--primary-d); }
    .btn-outline-secondary { color: var(--primary); border-color: var(--slate-200); font-weight: 600; background: #fff; }
    .btn-outline-secondary:hover { background: var(--slate-100); color: var(--primary); border-color: var(--slate-300); }
    .btn-lg { padding: .85rem 1.4rem; font-size: 1rem; border-radius: .55rem; }

    /* ── Hero ────────────────────────────────────── */
    .lp-hero { padding: 80px 0 56px; border-bottom: 1px solid var(--slate-200); text-align: center; background: #fff; }
    .lp-status {
        display: inline-flex; align-items: center; gap: 8px;
        font-size: 12px; font-weight: 600; color: var(--slate-700);
        background: #fff;
        border: 1px solid var(--slate-200);
        padding: 6px 12px; border-radius: 999px;
        margin-bottom: 22px;
        box-shadow: 0 2px 4px rgba(15,23,42,.04);
    }
    .lp-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(34,197,94,.18); }
    .lp-hero h1 { font-size: clamp(36px, 5vw, 56px); font-weight: 800; letter-spacing: -1.6px; line-height: 1.05; margin-bottom: 18px; }
    .lp-hero h1 .accent { color: var(--slate-500); }
    .lp-hero p.lead { font-size: 18px; color: var(--slate-500); max-width: 620px; margin: 0 auto 28px; }
    .lp-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

    /* ── The hero film ────────────────────────────────
       A Remotion composition rendered to a file at build time (motion/), not a
       player embedded at runtime: the page ships no React and no extra script,
       and the animation costs one cached video request.

       The row of section-jump pills that used to sit here is gone — it repeated
       the navigation immediately below the navigation. */
    .lp-hero-media {
        max-width: 1000px;
        margin: 44px auto 0;
    }
    .lp-hero-video {
        display: block;
        width: 100%;
        height: auto;
        /* The composition's own aspect, declared so the page reserves the space
           before the file arrives and nothing below it jumps. */
        aspect-ratio: 1280 / 600;
        border-radius: 16px;
        background: var(--slate-50);
    }
    .lp-hero-media figcaption {
        margin-top: 14px;
        font-size: 13px;
        color: var(--slate-500);
        text-align: center;
        max-width: 620px;
        margin-inline: auto;
    }

    /* ── Tour section ─────────────────────────────── */
    .tour { padding: 96px 0; border-bottom: 1px solid var(--slate-200); }
    .tour.tone { background: var(--slate-50); }
    /* The fixed nav pill floats over the content, so an anchored section that
       scrolls to its own top lands underneath it — which is how headings ended up
       sliced in half. */
    .tour[id] { scroll-margin-top: 104px; }
    .tour-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
    /* Was "01 / 06" in a dark pill. Dashboard, Products, Stock, Scanner, Portal
       and Team are peers you can read in any order — numbering them claimed a
       sequence that does not exist and made section six look like a chore. */
    .tour-step {
        display: inline-flex; align-items: center; gap: 8px;
        font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700;
        color: var(--slate-500);
        margin-bottom: 14px;
        padding-bottom: 10px;
        border-bottom: 2px solid var(--slate-200);
    }
    .tour-head h2 { font-size: clamp(28px, 3.6vw, 38px); font-weight: 800; letter-spacing: -.8px; line-height: 1.15; margin-bottom: 14px; }
    .tour-head p { font-size: 17px; color: var(--slate-500); }

    /* Browser frame for each mock */
    .mock-frame {
        background: #fff;
        border: 1px solid var(--slate-200);
        border-radius: 14px;
        box-shadow: 0 24px 48px -24px rgba(15,23,42,.18);
        overflow: hidden;
    }
    .mock-bar {
        display: flex; align-items: center; gap: 8px;
        padding: 10px 14px;
        border-bottom: 1px solid var(--slate-200);
        background: var(--slate-50);
    }
    .mock-bar .d { width: 10px; height: 10px; border-radius: 50%; background: var(--slate-300); }
    .mock-bar .url { margin-left: 14px; font-size: 11px; color: var(--slate-500); font-family: ui-monospace, SFMono-Regular, monospace; padding: 3px 12px; background: #fff; border: 1px solid var(--slate-200); border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; }
    .mock-bar .url i { color: var(--slate-500); font-size: 10px; }
    .mock-body { padding: 22px; background: #fff; }

    /* ── Mock building blocks (mirroring the real app) ── */
    .m-pageheader { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--slate-100); }
    .m-pageheader h3 { font-size: 18px; font-weight: 700; color: var(--primary); margin: 0; display: flex; align-items: center; gap: 8px; }
    .m-pageheader h3 i { color: var(--primary); font-size: 18px; }
    .m-pageheader .actions { display: flex; gap: 8px; }
    .m-btn { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--slate-200); background: #fff; color: var(--primary); display: inline-flex; align-items: center; gap: 5px; }
    .m-btn.primary { background: var(--primary); color: #fff; border-color: var(--primary); }

    .m-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
    .m-stat { background: #fff; border: 1px solid var(--slate-200); border-radius: 10px; padding: 14px; }
    .m-stat .k { font-size: 11px; color: var(--slate-500); text-transform: uppercase; letter-spacing: .6px; font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 5px; }
    .m-stat .k i { font-size: 12px; }
    .m-stat .v { font-size: 22px; font-weight: 800; color: var(--primary); letter-spacing: -.5px; line-height: 1; }
    .m-stat .t { font-size: 11px; margin-top: 5px; color: var(--slate-500); font-weight: 600; }
    .m-stat .t.up { color: var(--success); }
    .m-stat .t.down { color: var(--danger); }

    .m-card { background: #fff; border: 1px solid var(--slate-200); border-radius: 10px; overflow: hidden; }
    .m-card-head { padding: 12px 16px; border-bottom: 1px solid var(--slate-100); display: flex; align-items: center; justify-content: space-between; }
    .m-card-title { font-size: 13px; font-weight: 700; color: var(--primary); display: flex; align-items: center; gap: 6px; margin: 0; }
    .m-card-title i { font-size: 14px; }
    .m-card-link { font-size: 12px; color: var(--slate-500); font-weight: 600; }

    .m-table { width: 100%; font-size: 12.5px; border-collapse: collapse; }
    .m-table thead th { background: var(--slate-50); color: var(--slate-500); text-transform: uppercase; font-size: 10px; letter-spacing: .6px; font-weight: 700; padding: 9px 16px; border-bottom: 1px solid var(--slate-200); text-align: left; white-space: nowrap; }
    .m-table tbody td { padding: 10px 16px; border-bottom: 1px solid var(--slate-100); color: var(--primary); }
    .m-table tbody tr:last-child td { border-bottom: none; }
    .m-table tbody tr:hover td { background: var(--slate-50); }
    .m-table td.mono { font-family: ui-monospace, SFMono-Regular, monospace; color: var(--slate-500); font-size: 11.5px; }

    .pill { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; letter-spacing: .3px; }
    .pill.ok   { background: rgba(34,197,94,.12); color: #12684a; }
    .pill.warn { background: rgba(245,158,11,.15); color: #b45309; }
    .pill.low  { background: rgba(239,68,68,.12); color: #b91c1c; }
    .pill.muted{ background: var(--slate-100); color: var(--slate-700); }
    .pill.blue { background: rgba(15,23,42,.08); color: var(--primary); }

    /* Side panel for product copy beside mock */
    .tour-side h3 { font-size: 24px; font-weight: 800; color: var(--primary); letter-spacing: -.5px; margin-bottom: 12px; }
    .tour-side p { font-size: 16px; color: var(--slate-500); margin-bottom: 16px; }
    .tour-side ul { list-style: none; padding: 0; margin: 0; }
    .tour-side li { display: flex; gap: 10px; padding: 8px 0; font-size: 14px; color: var(--primary); }
    .tour-side li i { color: var(--success); margin-top: 2px; flex-shrink: 0; }

    /* ── Scanner phone mock ────────────────────── */
    .phone-mock {
        width: 100%; max-width: 320px;
        margin: 0 auto;
        background: #0a0a0a;
        border-radius: 36px;
        padding: 12px;
        box-shadow: 0 28px 56px -24px rgba(15,23,42,.4);
    }
    .phone-screen {
        background: #f1f5f9;
        border-radius: 26px;
        overflow: hidden;
        position: relative;
        padding-bottom: 80px;
    }

    /* ── Portal customer mock ─────────────────── */

    /* ── Team mock ─────────────────────────────── */

    /* ── Closing CTA ──────────────────────────── */
    .start-block {
        background: var(--primary);
        color: #fff;
        border-radius: 20px;
        padding: 56px 48px;
        position: relative;
        overflow: hidden;
        text-align: center;
    }
    .start-block::before {
        content: ""; position: absolute; inset: 0;
        background-image: rgba(255,255,255,.06) 1px;
        background-size: 24px 24px;
    }
    .start-inner { position: relative; z-index: 1; }
    .start-block h2 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; letter-spacing: -1px; margin-bottom: 12px; }
    .start-block p { color: var(--slate-300); font-size: 18px; margin: 0 auto 28px; max-width: 580px; }
    .start-block .btn-light { background: #fff; color: var(--primary); border: none; font-weight: 700; padding: .95rem 1.6rem; font-size: 1rem; }
    .start-block .btn-light:hover { background: var(--slate-100); }
    .start-block .btn-outline-light { color: #fff; border-color: rgba(255,255,255,.3); font-weight: 600; padding: .95rem 1.6rem; font-size: 1rem; }
    .start-block .btn-outline-light:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); }
    .start-block .micro {
        margin-top: 22px;
        font-size: 12px;
        color: rgba(255,255,255,.55);
        display: flex; justify-content: center; gap: 18px; flex-wrap: wrap;
    }
    .start-block .micro span { display: inline-flex; align-items: center; gap: 6px; }

    /* ── Footer ──────────────────────────────── */
    .lp-footer { background: #fff; border-top: 1px solid var(--slate-200); padding: 32px 0; }
    .lp-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--slate-500); }
    .lp-footer-links a { color: var(--slate-500); margin-right: 18px; transition: color .15s; }
    .lp-footer-links a:hover { color: var(--primary); }

    @media (max-width: 991.98px) {
        .tour { padding: 64px 0; }
        .m-stats { grid-template-columns: repeat(2, 1fr); }
        .start-block { padding: 40px 24px; }
    }
    @media (max-width: 640px) {
        .m-pageheader .actions { display: none; }

        /* Compact nav on phones: drop the beta chip, shrink the buttons so the
           header doesn't feel oversized. */
        .lp-navbar .container > div { height: 58px !important; }
        .lp-navbar .badge-beta { display: none; }
        .lp-navbar .navbar-brand { font-size: 17px; gap: 8px; }
        .lp-navbar .navbar-brand img { height: 22px; }
        .lp-navbar .d-flex.align-items-center.gap-2 { gap: 8px !important; }
        .lp-navbar .btn-sm { padding: 7px 12px; font-size: 13px; border-radius: 9px; }

        /* Hero CTAs: full-width stacked, a notch smaller than desktop btn-lg. */
        .lp-hero-cta { flex-direction: column; align-items: stretch; }
        .lp-hero-cta .btn-lg { width: 100%; padding: .72rem 1rem; font-size: .95rem; }

        /* Hero heading: smaller, looser tracking (the -1.6px desktop tracking
           crowds/overlaps letters at phone sizes) and more line spacing. */
        .lp-hero { padding: 44px 0 40px; }
        .lp-hero h1 { font-size: 28px; letter-spacing: -0.4px; line-height: 1.18; margin-bottom: 14px; }
        .lp-hero p.lead { font-size: 16px; line-height: 1.55; }
        .lp-status { margin-bottom: 18px; font-size: 12.5px; }
    }