/* ===========================================================================
   startstop.smartifie.com — the public page.

   SELF-CONTAINED on purpose. The application's sheets (tokens/base/shell) are
   built for a signed-in kiosk: fixed shell height, no page scroll, sizes tuned
   for arm's length in gloves. Loading them here to reuse six variables would
   drag that layout onto a marketing page. The colours below are the product's
   own, from brand/colors.json → products.startstop.

   No JavaScript, no web font, no external request: the page has to render on a
   phone on factory wifi, and every byte here is served from this origin.
   =========================================================================== */

:root {
    --lp-accent-from: #2DD4BF;
    --lp-accent-to: #5B8CFF;
    --lp-ink: #0B1020;
    --lp-ink-soft: #46506b;
    --lp-line: #dfe4ee;
    --lp-surface: #ffffff;
    --lp-tint: #f5f8fc;
    --lp-radius: 14px;
    --lp-gap: 20px;
    --lp-max: 1120px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--lp-surface);
    color: var(--lp-ink);
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.62;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); letter-spacing: -.01em; }
h3 { font-size: 1.12rem; }
p { margin: 0 0 1em; }
a { color: #1f6fd8; }

/* ── Top bar ─────────────────────────────────────────────────────────────── */

.lp-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lp-gap);
    max-width: var(--lp-max);
    margin: 0 auto;
    padding: 18px 16px;
}

.lp-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }

.lp-mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--lp-accent-from), var(--lp-accent-to));
    color: #fff;
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: -.02em;
}

.lp-brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.lp-brand__text span { color: var(--lp-ink-soft); font-size: .9rem; }

.lp-top__right { margin-left: auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.lp-langs { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.lp-langs a { color: var(--lp-ink-soft); text-decoration: none; }
.lp-langs a:hover { text-decoration: underline; }
.lp-langs a.is-current { color: var(--lp-ink); font-weight: 600; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.lp-btn {
    display: inline-block;
    padding: 11px 20px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-weight: 600;
    text-decoration: none;
    /* 44px is the WCAG 2.5.5 / iOS HIG floor for a touch target, and this page is read on
       phones far more often than the application is. */
    min-height: 44px;
    line-height: 22px;
}

.lp-btn--primary { background: linear-gradient(135deg, var(--lp-accent-from), var(--lp-accent-to)); color: #07223a; }
.lp-btn--primary:hover { filter: brightness(1.06); }
.lp-btn--ghost { border-color: var(--lp-line); color: var(--lp-ink); background: #fff; }
.lp-btn--ghost:hover { border-color: var(--lp-ink-soft); }
.lp-btn--lg { padding: 14px 26px; font-size: 1.03rem; min-height: 52px; line-height: 24px; }

/* ── Hero ────────────────────────────────────────────────────────────────── */

.lp-hero {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 44px;
    align-items: center;
    max-width: var(--lp-max);
    margin: 0 auto;
    padding: 40px 16px 64px;
}

.lp-lede { font-size: 1.1rem; color: var(--lp-ink-soft); max-width: 46ch; }
.lp-lede--sm { font-size: 1rem; }
.lp-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 18px; }
.lp-note { font-size: .92rem; color: var(--lp-ink-soft); max-width: 62ch; }

/* The terminal mock. Nothing here is interactive; it is a picture made of boxes. */
.lp-mock {
    background: var(--lp-ink);
    border-radius: 18px;
    padding: 18px;
    color: #eaf0ff;
    box-shadow: 0 18px 44px rgba(11, 16, 32, .22);
}

.lp-mock__bar {
    display: flex;
    justify-content: space-between;
    font-size: .9rem;
    color: #9fb0d4;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.lp-mock__job {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 18px 2px 20px;
    font-size: 1rem;
}
.lp-mock__job b { font-size: 2rem; }

.lp-mock__keys { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

.lp-key {
    display: grid;
    place-items: center;
    height: 92px;
    border-radius: 12px;
    font-size: 1.9rem;
    color: #07223a;
}

.lp-key--go { background: linear-gradient(135deg, var(--lp-accent-from), var(--lp-accent-to)); }
.lp-key--stop { background: #f0b429; }
.lp-key--done { background: #7bd389; }

/* ── Sections ────────────────────────────────────────────────────────────── */

.lp-section { max-width: var(--lp-max); margin: 0 auto; padding: 56px 16px; }
.lp-section--tint { max-width: none; background: var(--lp-tint); }
.lp-section--tint > * { max-width: var(--lp-max); margin-left: auto; margin-right: auto; }
.lp-plain p { max-width: 74ch; }

.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--lp-gap); }
.lp-steps li { border-left: 3px solid var(--lp-accent-from); padding-left: 16px; }
.lp-steps__n { display: block; color: var(--lp-ink-soft); font-size: .85rem; font-weight: 700; letter-spacing: .08em; }
.lp-steps p { color: var(--lp-ink-soft); margin-bottom: 0; }

.lp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--lp-gap); }
.lp-grid--plans { grid-template-columns: repeat(4, 1fr); }

.lp-card, .lp-plan {
    background: var(--lp-surface);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    padding: 22px;
}

.lp-card p, .lp-plan p { color: var(--lp-ink-soft); margin-bottom: 0; }
.lp-plan__price { font-weight: 700; color: var(--lp-ink) !important; font-size: 1.08rem; margin-bottom: .5em !important; }
.lp-plan--accent { border-color: var(--lp-accent-from); box-shadow: 0 0 0 3px rgba(45, 212, 191, .14); }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.lp-foot {
    border-top: 1px solid var(--lp-line);
    padding: 32px 16px 46px;
    text-align: center;
    color: var(--lp-ink-soft);
    font-size: .92rem;
}

.lp-foot__mark { letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; font-weight: 700; color: var(--lp-ink); }
.lp-foot nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; margin: 14px 0; }
.lp-foot__legal { margin: 0; }

/* ── Narrow screens ──────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .lp-hero { grid-template-columns: 1fr; gap: 32px; padding-bottom: 44px; }
    .lp-steps, .lp-grid, .lp-grid--plans { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    body { font-size: 16px; }
    .lp-top { padding: 14px 16px; }
    .lp-top__right { width: 100%; margin-left: 0; justify-content: space-between; }
    .lp-steps, .lp-grid, .lp-grid--plans { grid-template-columns: 1fr; }
    .lp-section { padding: 40px 16px; }
    .lp-key { height: 76px; }
}

@media (prefers-reduced-motion: no-preference) {
    a, .lp-btn { transition: filter .15s ease, border-color .15s ease; }
}

/* Dark mode. The page is read on phones at every hour; a white sheet at night is a page
   people close. */
@media (prefers-color-scheme: dark) {
    :root {
        --lp-ink: #e8edf8;
        --lp-ink-soft: #9aa6c2;
        --lp-line: #262f45;
        --lp-surface: #0e1424;
        --lp-tint: #131b2e;
    }

    body { background: var(--lp-surface); }
    a { color: #7fb4ff; }
    .lp-btn--ghost { background: transparent; }
    .lp-mock { background: #070c18; }
}