/*
 * landing.css — the public presentation page (S44 · PART B, redesigned LP-01).
 *
 * Separate from style.css on purpose: the shell's stylesheet is 400 KB of
 * operator console that a stranger has no reason to download, and the landing
 * is served under a *stricter* CSP than the shell (no inline style at all), so
 * its styles have to live in a file regardless.
 *
 * LP-01 — why this page stopped looking like the console
 * ------------------------------------------------------
 * The first version reused the Factory's dark palette and its bordered panels,
 * and the result read as documentation for an internal tool: every block was a
 * box, every box had the same weight, and nothing on the screen said what to
 * look at first. The console is right to look like that — it is a dense
 * instrument for somebody who already knows what they are doing. A stranger
 * needs the opposite.
 *
 * So: a light surface, one accent, one dominant call to action, panels only
 * where a panel carries content, and vertical rhythm doing the work that
 * borders used to do. Brand continuity is kept in the mark and the accent hue,
 * not in the background colour. marker: lp01-landing-is-not-the-console
 *
 * Layout rules that are requirements rather than taste:
 *   * nothing may overflow horizontally at 360px — every grid collapses, every
 *     media element is max-width:100%, and no fixed pixel width exceeds 320px;
 *   * every interactive target is at least 44px tall;
 *   * focus is always visible, and never removed;
 *   * the type scale is fluid between 360px and 1920px, so 1366 and 1024 are
 *     not special cases that were never looked at;
 *   * the hero fits above the fold at 1024×768 — the shortest desktop viewport
 *     the phase reviews. marker: lp01-hero-fits-the-shortest-desktop
 *
 * markers: s44-landing-responsive / s44-no-horizontal-overflow /
 * s44-strict-csp-on-public-pages / lp01-landing-is-not-the-console
 */

:root {
    color-scheme: light;

    --lp-bg: #ffffff;
    --lp-bg-alt: #f4f5fa;
    --lp-panel: #ffffff;
    --lp-line: #e2e4ee;
    --lp-line-soft: #eceef6;
    --lp-ink: #14161f;
    --lp-muted: #565c72;
    --lp-accent: #4b47d6;
    --lp-accent-2: #7a3fd4;
    --lp-accent-soft: #eeeefc;
    --lp-ok: #177a4d;
    --lp-danger: #b3261e;

    --lp-shell: 1120px;
    --lp-radius: 18px;
    --lp-radius-sm: 12px;
    --lp-shadow: 0 1px 2px rgba(20, 22, 31, 0.05),
                 0 12px 32px rgba(20, 22, 31, 0.07);
    --lp-section-y: clamp(48px, 7vw, 104px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; animation: none !important; }
}

body.lp {
    font-family: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
    background: var(--lp-bg);
    color: var(--lp-ink);
    font-size: clamp(16px, 1.05vw, 18px);
    line-height: 1.62;
    /* The one rule that makes "no horizontal overflow" true rather than hoped
       for: nothing in the document can make the page wider than the viewport. */
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: var(--lp-accent); }

:focus-visible {
    outline: 2px solid var(--lp-accent);
    outline-offset: 3px;
    border-radius: 6px;
}

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

.lp-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--lp-accent);
    color: #fff;
    padding: 12px 18px;
    border-radius: 0 0 10px 0;
    z-index: 50;
}
.lp-skip:focus { left: 0; top: 0; }

/* ── top bar ─────────────────────────────────────────────────────────────
   Deliberately light: a sticky dark bar over a light page is the single
   loudest element on the screen, and the loudest element should be the one
   call to action. */

.lp-top {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, 0.88);
    border-bottom: 1px solid var(--lp-line-soft);
    backdrop-filter: blur(10px);
}

.lp-top-inner {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 66px;
    flex-wrap: wrap;
    padding-top: 9px;
    padding-bottom: 9px;
}

.lp-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    color: var(--lp-ink);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.01em;
}

.lp-brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--lp-accent), var(--lp-accent-2));
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    flex: none;
}

.lp-brand-text span { color: var(--lp-accent); }

.lp-top-nav {
    display: flex;
    gap: 22px;
    margin-left: auto;
    flex-wrap: wrap;
}

.lp-top-nav a {
    color: var(--lp-muted);
    text-decoration: none;
    font-size: 15px;
    padding: 11px 2px;
}
.lp-top-nav a:hover { color: var(--lp-ink); }

.lp-top-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ── buttons — exactly one dominant style ────────────────────────────────
   `.lp-btn-primary` is the only filled button on the page and it always says
   the same thing. `.lp-btn-quiet` is a link that happens to be button-shaped;
   it must never compete. */

.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 11px 20px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, background-color 0.15s;
    font-family: inherit;
    text-align: center;
}

.lp-btn-primary {
    background: linear-gradient(135deg, var(--lp-accent), var(--lp-accent-2));
    color: #fff;
    box-shadow: 0 6px 18px rgba(75, 71, 214, 0.28);
}
.lp-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(75, 71, 214, 0.34); }

.lp-btn-quiet {
    background: transparent;
    color: var(--lp-accent);
}
.lp-btn-quiet:hover { background: var(--lp-accent-soft); }

.lp-btn-lg { min-height: 54px; padding: 14px 30px; font-size: 17px; border-radius: 14px; }

.lp-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ── hero ────────────────────────────────────────────────────────────────
   The height budget matters: at 1024×768 the header takes 66px and the whole
   hero has to fit in what is left, so the padding is fluid and the tallest
   element (the vertical poster) is capped against the viewport rather than
   against a fixed pixel height. */

/* Vertical rhythm in `vh`, not only `vw`: the constraint the hero has to
   satisfy is the *height* of a 768px laptop, and a padding that scales with
   width alone gets it wrong on exactly the viewport that matters. */
.lp-hero { padding: clamp(20px, 4vh, 72px) 0 clamp(24px, 4.5vh, 76px); }

.lp-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
}

.lp-eyebrow {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lp-accent);
    background: var(--lp-accent-soft);
    border-radius: 999px;
    padding: 6px 14px;
    margin-bottom: 18px;
}

.lp-hero h1 {
    font-size: clamp(30px, min(3.6vw, 6.4vh), 52px);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.022em;
    max-width: 19ch;
}

.lp-lead {
    margin-top: 18px;
    font-size: clamp(17px, 1.35vw, 20px);
    color: var(--lp-muted);
    max-width: 46ch;
}

.lp-hero-actions { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }

.lp-qualifier {
    margin-top: 18px;
    font-size: 16px;
    color: var(--lp-muted);
    max-width: 48ch;
}

.lp-note { margin-top: 16px; font-size: 16px; color: var(--lp-muted); }

/* ── the hero's visual ───────────────────────────────────────────────────
   The end of the journey, cropped out of the real product: a finished ролик
   sitting in its player with the three things you can do to it. Not the full
   console — one panel, the one this page is about. */

.lp-hero-shot { display: grid; gap: 12px; justify-items: center; }

.lp-hero-shot a {
    display: block;
    border-radius: var(--lp-radius);
    overflow: hidden;
    box-shadow: var(--lp-shadow);
    line-height: 0;
    max-width: 100%;
}

.lp-hero-shot img {
    /* Capped against the viewport height so the whole hero clears a 768px
       laptop. marker: lp01-hero-fits-the-shortest-desktop */
    max-height: min(46vh, 430px);
    width: auto;
    margin: 0 auto;
}

.lp-hero-shot figcaption {
    font-size: 15px;
    color: var(--lp-muted);
    text-align: center;
    max-width: 42ch;
}

/* S50A — the «ВХОД» / «ВЫХОД» pills went with the block they labelled: the
   page no longer presents an input/output pair at all.
   marker: s50a-no-synthetic-example */

/* ── sections ────────────────────────────────────────────────────────────
   Contrast between sections comes from the surface colour and the whitespace,
   not from a border around every block. */

.lp-section { padding: var(--lp-section-y) 0; }
.lp-section-alt { background: var(--lp-bg-alt); }

.lp-section h2 {
    font-size: clamp(24px, 2.7vw, 38px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    max-width: 22ch;
}

.lp-section-lead {
    margin-top: 14px;
    color: var(--lp-muted);
    font-size: clamp(16px, 1.15vw, 18px);
    max-width: 60ch;
}

.lp-sub {
    margin-top: clamp(36px, 4vw, 56px);
    font-size: clamp(18px, 1.6vw, 22px);
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* ── the walkthrough ─────────────────────────────────────────────────────
   S50A removed the «вход → выход» block this section used to be: the two-column
   grid, the frame strip, the player and the measured sentence under it. All of
   them described a fixture render as a customer example. What is left is the
   honesty line, which now sits under the four cropped screens.
   marker: s50a-no-synthetic-example */

.lp-proof-honesty {
    margin-top: clamp(20px, 2.5vw, 32px);
    font-size: 15px;
    color: var(--lp-muted);
    max-width: 62ch;
}

/* ── the four cropped screens ────────────────────────────────────────────*/

/* One row per screen rather than a four-up grid. The panels these are cropped
   from have wildly different shapes — a media row is a strip, the scenario is
   a page — and side by side at a quarter of the width each becomes an
   unreadable thumbnail. A row gives every one of them the full column.
   marker: lp01-cropped-proof-shots */

.lp-shots {
    margin-top: 22px;
    display: grid;
    gap: clamp(20px, 2.5vw, 34px);
}

.lp-shot {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(160px, 250px) minmax(0, 1fr);
    gap: clamp(16px, 2.5vw, 32px);
    align-items: start;
}

.lp-shot img {
    width: 100%;
    border-radius: var(--lp-radius-sm);
    border: 1px solid var(--lp-line);
    background: #fff;
}

.lp-shot figcaption {
    font-size: 16px;
    font-weight: 600;
    color: var(--lp-ink);
    padding-top: 2px;
}

/* ── the three stages ────────────────────────────────────────────────────
   Numbered, unboxed. The number carries the sequence; a border would only
   repeat what the number already says. */

.lp-steps {
    list-style: none;
    margin-top: clamp(28px, 3.5vw, 44px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(22px, 3vw, 40px);
}

.lp-steps li { display: grid; align-content: start; gap: 10px; }

.lp-step-n {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--lp-accent);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

.lp-steps h3 { font-size: clamp(17px, 1.4vw, 20px); font-weight: 700; line-height: 1.3; }
.lp-steps p { color: var(--lp-muted); font-size: 16px; }

/* ── expandable detail ───────────────────────────────────────────────────*/

.lp-detail {
    margin-top: clamp(28px, 3vw, 40px);
    border-top: 1px solid var(--lp-line);
    padding-top: 8px;
}

.lp-detail summary, .lp-more summary, .lp-faq summary {
    cursor: pointer;
    font-weight: 600;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
}

.lp-detail summary::-webkit-details-marker,
.lp-more summary::-webkit-details-marker,
.lp-faq summary::-webkit-details-marker { display: none; }

.lp-detail summary::before,
.lp-more summary::before,
.lp-faq summary::before {
    content: "+";
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: var(--lp-accent-soft);
    color: var(--lp-accent);
    display: grid;
    place-items: center;
    font-size: 16px;
    font-weight: 700;
}
.lp-detail[open] summary::before,
.lp-more[open] summary::before,
.lp-faq details[open] summary::before { content: "–"; }

.lp-detail-list {
    margin: 8px 0 12px;
    padding-left: 22px;
    display: grid;
    gap: 8px;
    color: var(--lp-muted);
    font-size: 16px;
}
.lp-detail-list b { color: var(--lp-ink); }

/* ── fit / not fit ───────────────────────────────────────────────────────*/

.lp-fit {
    margin-top: clamp(28px, 3.5vw, 44px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(18px, 2.5vw, 32px);
}

.lp-fit-col {
    background: var(--lp-panel);
    border-radius: var(--lp-radius);
    padding: clamp(22px, 2.5vw, 32px);
    box-shadow: var(--lp-shadow);
}

.lp-fit-col h3 {
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.lp-fit-col h3::before {
    content: "✓";
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 15px;
    background: rgba(23, 122, 77, 0.12);
    color: var(--lp-ok);
}
.lp-fit-no h3::before {
    content: "—";
    background: rgba(179, 38, 30, 0.1);
    color: var(--lp-danger);
}

.lp-fit-col ul { margin-top: 16px; padding-left: 20px; display: grid; gap: 10px; }
.lp-fit-col li { color: var(--lp-muted); font-size: 16px; }

/* ── control cards ───────────────────────────────────────────────────────*/

.lp-cards {
    margin-top: clamp(28px, 3.5vw, 44px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(18px, 2.5vw, 30px);
}

.lp-card {
    background: var(--lp-panel);
    border-radius: var(--lp-radius);
    padding: clamp(20px, 2.2vw, 28px);
    box-shadow: var(--lp-shadow);
}

.lp-card h3 { font-size: 17px; font-weight: 700; line-height: 1.3; }
.lp-card p { margin-top: 10px; font-size: 16px; color: var(--lp-muted); }

/* ── lists ───────────────────────────────────────────────────────────────*/

.lp-limits, .lp-list {
    margin-top: 14px;
    padding-left: 22px;
    color: var(--lp-muted);
    display: grid;
    gap: 10px;
}
.lp-limits li, .lp-list li { font-size: 16px; }

.lp-two {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(24px, 4vw, 56px);
}

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

.lp-apply { max-width: 660px; }

/* `hidden` is `display: none` only through the user-agent stylesheet, and any
   author `display:` rule silently outranks it. The form and the status box are
   both toggled with the attribute, so without this the "заявка принята" state
   shows the confirmation *and* the form the visitor just submitted.
   marker: s44-hidden-really-means-hidden */
.lp-form[hidden],
.lp-form-status[hidden],
[hidden] { display: none !important; }

.lp-form { margin-top: 28px; display: grid; gap: 20px; }

.lp-field { display: grid; gap: 8px; }

.lp-field label { font-size: 15px; font-weight: 600; color: var(--lp-ink); }

.lp-req { color: var(--lp-accent); }

.lp-field input, .lp-field textarea, .lp-field select {
    width: 100%;
    min-height: 48px;
    padding: 12px 15px;
    border-radius: 12px;
    border: 1px solid var(--lp-line);
    background: #fff;
    color: var(--lp-ink);
    font-size: 16px;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.lp-field textarea { resize: vertical; min-height: 96px; }

/* No `outline: none` anywhere in this file, and that is deliberate: a rule
   like `.lp-field input { outline: none }` out-specifies the global
   `:focus-visible` ring (0,1,1 beats 0,1,0), so a keyboard user would lose
   every focus indicator on the one form this page has. The border colour
   change below is *in addition to* the ring, never instead of it.
   marker: s44-focus-is-always-visible */
.lp-field input:focus, .lp-field textarea:focus, .lp-field select:focus {
    border-color: var(--lp-accent);
    box-shadow: 0 0 0 3px var(--lp-accent-soft);
}

.lp-field input[aria-invalid="true"], .lp-field textarea[aria-invalid="true"] {
    border-color: var(--lp-danger);
}

.lp-hint { font-size: 15px; color: var(--lp-muted); }

.lp-more { border-top: 1px solid var(--lp-line); padding-top: 8px; }
.lp-more-body { display: grid; gap: 20px; padding: 12px 0 4px; }

.lp-consent {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 12px;
    align-items: start;
    font-size: 15px;
    color: var(--lp-muted);
}

.lp-consent input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--lp-accent); }

/* The honeypot. Off-screen rather than display:none — some bots skip hidden
   fields but fill positioned ones — and hidden from assistive technology by
   aria-hidden on the wrapper. marker: s44-honeypot-is-silent */
.lp-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.lp-form-status {
    margin-top: 20px;
    padding: 16px 18px;
    border-radius: 12px;
    font-size: 16px;
    border: 1px solid var(--lp-line);
    background: var(--lp-panel);
}
.lp-form-status.is-ok { border-color: rgba(23, 122, 77, 0.45); color: var(--lp-ok); }
.lp-form-status.is-error { border-color: rgba(179, 38, 30, 0.45); color: var(--lp-danger); }

.lp-after-submit {
    margin-top: 22px;
    font-size: 15px;
    color: var(--lp-muted);
    max-width: 60ch;
}

/* ── FAQ ─────────────────────────────────────────────────────────────────*/

.lp-faq { margin-top: 26px; display: grid; gap: 4px; max-width: 780px; }

.lp-faq details { border-bottom: 1px solid var(--lp-line); padding: 6px 0; }

.lp-faq summary { padding: 12px 0; font-size: 17px; }

.lp-faq p, .lp-faq .lp-limits {
    padding: 0 0 16px 34px;
    color: var(--lp-muted);
    font-size: 16px;
}
.lp-faq .lp-limits { margin-top: 0; padding-left: 56px; }

/* ── footer ──────────────────────────────────────────────────────────────*/

.lp-foot {
    border-top: 1px solid var(--lp-line);
    padding: 40px 0;
    color: var(--lp-muted);
    font-size: 15px;
}

.lp-foot-inner { display: grid; gap: 10px; }
.lp-foot-note { font-size: 15px; max-width: 60ch; }

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

@media (max-width: 980px) {
    .lp-hero-grid { grid-template-columns: minmax(0, 1fr); }
    .lp-hero h1 { max-width: 20ch; }
}

@media (max-width: 720px) {
    .lp-top-nav { display: none; }
    .lp-top-actions { margin-left: auto; }
    .lp-btn { padding: 11px 16px; font-size: 15px; }
    .lp-btn-lg { padding: 13px 20px; font-size: 16px; }
    .lp-ba-shot img { max-height: min(52vh, 440px); }
    .lp-shot { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .lp-faq .lp-limits { padding-left: 40px; }
}

@media (max-width: 420px) {
    .lp-shell { padding: 0 16px; }
    .lp-top-actions { width: 100%; }
    .lp-top-actions .lp-btn { flex: 1 1 auto; }
    .lp-hero-actions { gap: 10px; }
    .lp-hero-actions .lp-btn { width: 100%; }
    .lp-hero h1 { max-width: none; }
    .lp-faq p { padding-left: 0; }
    .lp-faq .lp-limits { padding-left: 22px; }
}