/* ─────────────────────────────────────────────────────────────────────────
   The landing page.

   A third stylesheet, loaded only by layouts/cms-public. It reads the same
   tokens as blueprint.css — it invents no colour and no radius — and adds
   only what a marketing page needs and an application does not: a bar that
   is not a rail, a hero, a price table.

   Everything is `lp-*` so nothing here can reach a screen inside the
   application, which is the same reason blueprint and the legacy stylesheet
   are never in one document.
   ───────────────────────────────────────────────────────────────────────── */

.bp-public {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--fs-15);
    line-height: var(--lh-body);
}

/* ── the bar ──────────────────────────────────────────────────────────── */

.lp-bar {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-5);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}
.lp-bar__brand {
    display: flex; align-items: center; gap: 10px;
    color: var(--cms-navy); text-decoration: none; flex: none;
}
.lp-bar__brand span {
    font-family: var(--font-display); font-weight: 900;
    font-size: var(--fs-20); letter-spacing: -.04em; color: var(--ink);
}
.lp-bar__nav { display: flex; gap: var(--sp-4); margin-inline-start: var(--sp-4); }
.lp-bar__nav a {
    color: var(--muted); text-decoration: none; font-weight: 500; font-size: var(--fs-14);
}
.lp-bar__nav a:hover { color: var(--ink); }
.lp-bar__end { margin-inline-start: auto; display: flex; align-items: center; gap: var(--sp-2); }

.lp-lang {
    height: 30px; padding: 0 10px; border-radius: var(--r-pill);
    background: transparent; color: var(--muted);
    font-size: var(--fs-12); font-weight: 600; cursor: pointer; border: 0;
}
.lp-lang[aria-pressed="true"] { background: var(--cms-navy); color: #fff; }

/* ── sections ─────────────────────────────────────────────────────────── */

.lp-section { padding: clamp(48px, 7vw, 96px) var(--sp-5); }
.lp-section__inner { max-width: 1100px; margin: 0 auto; }
.lp-section--navy {
    background: var(--cms-navy); color: #EEF1FA;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: var(--grid-step) var(--grid-step);
}
.lp-section--navy .lp-lead { color: #C9D1EA; }

/* ⚠️ Not mono, and not uppercased or tracked: all three are for Latin, and these
   eyebrows are Georgian. IBM Plex Mono has no Georgian glyphs, so the letters
   fall back to the UI face while the spaces keep the mono width — which reads as
   the tracking the design forbids. `--latin` is the product's own name, the one
   line on this page that is Latin and takes all three. */
.lp-eyebrow {
    font-family: var(--font-ui); font-size: var(--fs-12);
    font-weight: 600; color: var(--muted);
}
.lp-eyebrow--latin {
    font-family: var(--font-mono); font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase;
}
.lp-section--navy .lp-eyebrow { color: #8E97B8; }

/* Archivo and Latin only: Georgian is never set in the display face, so a
   Georgian headline falls back to the body face at the same size. */
.lp-h1 {
    margin: var(--sp-3) 0 0;
    font-weight: 700; font-size: clamp(30px, 4.4vw, 52px);
    line-height: 1.12; letter-spacing: -.02em;
}
.lp-h2 {
    margin: var(--sp-2) 0 0;
    font-weight: 700; font-size: clamp(24px, 3vw, 34px);
    line-height: 1.18; letter-spacing: -.015em;
}
.lp-lead {
    margin: var(--sp-3) 0 0; max-width: 62ch;
    font-size: var(--fs-16); color: var(--muted);
}

.lp-hero__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-5); }
.lp-hero__note { margin-top: var(--sp-3); font-size: var(--fs-13); color: #8E97B8; }

/* ── the grid of things ───────────────────────────────────────────────── */

.lp-grid {
    display: grid; gap: var(--sp-4); margin-top: var(--sp-5);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.lp-card {
    background: var(--surface); color: var(--ink);
    border-radius: var(--r-20); padding: var(--sp-4);
    box-shadow: var(--shadow-1);
    display: flex; flex-direction: column; gap: 6px;
}
.lp-card__num {
    font-family: var(--font-mono); font-size: var(--fs-12);
    color: var(--cms-primary); font-weight: 500;
}
.lp-card__title { font-weight: 700; font-size: var(--fs-16); }
.lp-card__body { color: var(--muted); font-size: var(--fs-14); }

/* The module list: many short things, so a tighter shape than a card. */
.lp-modules {
    display: grid; gap: var(--sp-2); margin-top: var(--sp-5);
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.lp-module {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255, 255, 255, .06);
    border-radius: var(--r-14); padding: 12px var(--sp-3);
    font-size: var(--fs-14);
}
.lp-module::before {
    content: ""; width: 8px; height: 8px; border-radius: 2px;
    background: var(--cms-accent); flex: none;
}

/* ── prices ───────────────────────────────────────────────────────────── */

.lp-prices {
    display: grid; gap: var(--sp-4); margin-top: var(--sp-5);
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    align-items: start;
}
.lp-price {
    background: var(--surface); border-radius: var(--r-24);
    padding: var(--sp-5); box-shadow: var(--shadow-1);
    display: flex; flex-direction: column; gap: var(--sp-3);
}
/* The tier most companies land on. The accent means one of three things and
   "the primary action on this page" is one of them. */
.lp-price--on { box-shadow: var(--shadow-2), inset 0 4px 0 var(--cms-accent); }
.lp-price__name { font-weight: 700; font-size: var(--fs-20); }
.lp-price__band { font-size: var(--fs-13); color: var(--muted); }
.lp-price__fig { display: flex; align-items: baseline; gap: 6px; }
.lp-price__amount { font-weight: 700; font-size: 40px; letter-spacing: -.02em; }
.lp-price__per { color: var(--muted); font-size: var(--fs-13); }
.lp-price__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lp-price__list li {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: var(--fs-14); color: var(--ink);
}
.lp-price__list li::before {
    content: "✓"; color: var(--success); font-weight: 700; flex: none; line-height: 1.45;
}

/* ── the form ─────────────────────────────────────────────────────────── */

.lp-demo { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.lp-demo__form { background: var(--surface); border-radius: var(--r-24); padding: var(--sp-5); box-shadow: var(--shadow-1); }
/* A honeypot: off-screen rather than display:none, because a bot that reads
   the stylesheet skips what is hidden and fills what it can see. */
.lp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.lp-note {
    background: var(--surface); border-radius: var(--r-16);
    padding: var(--sp-3) var(--sp-4); box-shadow: var(--shadow-1);
    border-inline-start: 3px solid var(--success);
    margin-bottom: var(--sp-4);
}

/* ── the foot ─────────────────────────────────────────────────────────── */

.lp-foot { padding: var(--sp-5); border-top: 1px solid var(--border); }
.lp-foot__inner {
    max-width: 1100px; margin: 0 auto;
    display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center;
    font-size: var(--fs-13); color: var(--muted);
}
.lp-foot__inner a { color: var(--muted); }
.lp-foot__inner span:nth-child(2) { margin-inline-end: auto; }

/* ── narrow ───────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .lp-demo { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
    .lp-bar { padding: var(--sp-3) var(--sp-4); gap: var(--sp-2); }
    /* The section links go: the bar keeps what a visitor came to press. */
    .lp-bar__nav { display: none; }
    .lp-bar__end { gap: 6px; }
    .lp-bar__end .bp-btn { padding: 0 10px; }
    .lp-lang { height: 28px; padding: 0 8px; }
    .lp-section { padding: 44px var(--sp-4); }
}

/* At 390px the bar is 34px too wide for brand + language + sign in + the call
   to action, and all four earn their place — a returning visitor needs the way
   in as much as a new one needs the way to ask. The wordmark is the one part
   that carries nothing the mark beside it does not, so it is what goes. */
@media (max-width: 480px) {
    .lp-bar__brand span { display: none; }
}