/* ============================================================================
   LANDING — the marketing page.

   Deliberately self-contained: no Tailwind, no build step, no dependency on
   styles.css. The whole point of this page is that a crawler and a first-time
   visitor get readable content from the HTML alone, and every render-blocking
   script in front of that works against it. The tokens below are copied from
   styles.css rather than imported for the same reason — /ka/ and /ru/ are
   standalone documents that never load the app.

   Used by three pages: the landing block inside index.html, and the two
   standalone language pages. All three are written by
   launch/compose/render-landing.mjs — edit the copy there, not here.
   ========================================================================= */

:root {
    --l-bg: #F3F9FA;
    --l-surface: #FFFFFF;
    --l-ink: #16323E;
    --l-ink-2: #5E7883;
    --l-ink-3: #7F97A1;
    --l-accent: #21759E;
    --l-line: #DFECF0;
    --l-grad-a: #37B5CE;
    --l-grad-b: #3E7BE0;
    --l-tint: #E9F4F7;
    --l-shadow: 0 12px 32px rgba(22, 50, 62, .08);
}

/* The app has no dark theme yet, but a marketing page is read in a browser
   that does — and a white sheet at night is the fastest way to lose someone
   before the first sentence. */
@media (prefers-color-scheme: dark) {
    :root {
        --l-bg: #0A1A22;
        --l-surface: #12262F;
        --l-ink: #E8F2F6;
        --l-ink-2: #A9C2CC;
        --l-ink-3: #7F97A1;
        --l-accent: #6FC5DE;
        --l-line: #1E3A46;
        --l-tint: #16303B;
        --l-shadow: 0 12px 32px rgba(0, 0, 0, .35);
    }
}

.landing {
    margin: 0;
    background: var(--l-bg);
    color: var(--l-ink);
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    /* The app shell is a fixed-height, non-scrolling surface. This page is the
       opposite: it is long on purpose, and it has to be able to scroll even
       when it is sitting inside index.html next to that shell. */
    height: auto;
    min-height: 100%;
    overflow-y: auto;
}

.landing__inner {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 20px 72px;
}

/* ─── Header ─────────────────────────────────────────────────────────────── */

.landing__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 0 8px;
}

.landing__wordmark {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: Sora, Inter, sans-serif;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -.02em;
    color: var(--l-ink);
    text-decoration: none;
}

.landing__wordmark img {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.landing__langs {
    display: flex;
    gap: 4px;
    font-size: 13px;
}

.landing__langs a,
.landing__langs span {
    padding: 5px 10px;
    border-radius: 999px;
    text-decoration: none;
    color: var(--l-ink-2);
}

/* The current language is a <span>, not a link — a link to the page you are
   already on is a dead end for a person and a self-referential hop for a
   crawler. */
.landing__langs span {
    background: var(--l-tint);
    color: var(--l-accent);
    font-weight: 600;
}

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

.landing__hero {
    padding: 40px 0 8px;
}

.landing h1 {
    font-family: Sora, Inter, sans-serif;
    font-size: clamp(34px, 7vw, 52px);
    line-height: 1.06;
    letter-spacing: -.03em;
    font-weight: 800;
    margin: 0 0 18px;
}

.landing__lede {
    font-size: clamp(18px, 2.4vw, 21px);
    line-height: 1.5;
    color: var(--l-ink-2);
    margin: 0 0 28px;
    max-width: 30em;
}

.landing__cta {
    display: inline-block;
    padding: 15px 30px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--l-grad-a), var(--l-grad-b));
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(62, 123, 224, .28);
    border: 0;
    cursor: pointer;
    font-family: inherit;
}

.landing__cta:active {
    transform: scale(.97);
}

.landing__note {
    font-size: 14px;
    color: var(--l-ink-3);
    margin: 14px 0 0;
}

/* A tall phone capture. width/height are set on the element too, so the
   browser reserves the box before the image arrives — without them this is
   the one element on the page that shifts everything below it on load, which
   is exactly what Cumulative Layout Shift measures and Google ranks on. */
.landing__shot {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
    margin: 40px auto 0;
    border-radius: 22px;
    box-shadow: var(--l-shadow);
}

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

.landing section {
    padding: 48px 0 0;
}

.landing h2 {
    font-family: Sora, Inter, sans-serif;
    font-size: clamp(24px, 4vw, 32px);
    line-height: 1.15;
    letter-spacing: -.02em;
    font-weight: 700;
    margin: 0 0 8px;
}

.landing h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 6px;
    letter-spacing: -.01em;
}

.landing p {
    margin: 0 0 16px;
    color: var(--l-ink-2);
}

.landing__sub {
    max-width: 34em;
}

.landing__cards {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr;
    margin-top: 24px;
    padding: 0;
    list-style: none;
}

@media (min-width: 640px) {
    .landing__cards--3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .landing__cards--2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

.landing__cards li {
    background: var(--l-surface);
    border: 1px solid var(--l-line);
    border-radius: 16px;
    padding: 20px;
}

.landing__cards p {
    margin: 0;
    font-size: 15px;
}

/* The step number is decoration for a sighted reader and noise for a screen
   reader, which already gets the ordering from the <ol>. */
.landing__step {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--l-tint);
    color: var(--l-accent);
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 12px;
}

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

.landing__faq {
    margin-top: 24px;
    border-top: 1px solid var(--l-line);
}

.landing__faq > div {
    border-bottom: 1px solid var(--l-line);
    padding: 20px 0;
}

.landing__faq h3 {
    margin-bottom: 8px;
}

.landing__faq p:last-child {
    margin-bottom: 0;
}

/* ─── Closing + footer ───────────────────────────────────────────────────── */

.landing__close {
    margin-top: 56px;
    padding: 40px 24px;
    border-radius: 20px;
    background: linear-gradient(135deg, #177C95 0%, #2648C0 100%);
    text-align: center;
    color: #fff;
}

.landing__close h2 {
    color: #fff;
    margin-bottom: 10px;
}

.landing__close p {
    color: rgba(255, 255, 255, .88);
    max-width: 26em;
    margin-inline: auto;
}

.landing__close .landing__cta {
    background: #fff;
    color: #16323E;
    box-shadow: none;
    margin-top: 8px;
}

.landing footer {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--l-line);
    font-size: 14px;
    color: var(--l-ink-3);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    align-items: center;
}

.landing footer a {
    color: var(--l-ink-2);
}

/* ─── Which of the two documents is on screen ────────────────────────────
   Only meaningful inside index.html, where the landing and the app share a
   body. The class is stamped on <html> by an inline script in the head — see
   the note there for why it cannot wait for script.js. */
html.app-on .landing {
    display: none;
}

html.landing-on #app-shell {
    display: none;
}

/* The landing is a normal scrolling document, but styles.css locks body to
   the viewport height for the app shell. Undo that only while the landing is
   the thing being shown. */
html.landing-on,
html.landing-on body {
    height: auto;
    overflow: visible;
}