/*
    The two landing pages share this sheet so they cannot drift apart visually.
    They are static files served straight by the host, never rendered by the app,
    so the tokens below repeat the ones in front/src/index.css rather than
    importing them, the same way front/brand/og-image.html does.
*/
:root {
    --color-bg: #000000;
    --color-text: #e6edf3;
    --color-muted: #9aa7b4;
    --color-primary: #fac800;
    --color-water: #1fc7b6;
    --color-rule: #23272d;
    --measure: 42rem;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family:
        system-ui,
        -apple-system,
        "Segoe UI",
        Roboto,
        sans-serif;
    font-size: 1rem;
    line-height: 1.65;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Header */

.landing-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--color-rule);
}

.landing-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-primary);
    text-decoration: none;
}

.landing-brand-drop {
    width: 1.25rem;
    height: 1.75rem;
}

.landing-brand-name {
    font-family: "Alumni Sans SC", system-ui, sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
}

.landing-language {
    color: var(--color-muted);
    font-size: 0.875rem;
    text-decoration: none;
}

.landing-language:hover {
    color: var(--color-text);
}

/* Layout */

.landing-main {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 2.5rem 1.5rem 3rem;
}

.landing-main h1 {
    margin: 0 0 1rem;
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.landing-main h2 {
    margin: 2.5rem 0 0.75rem;
    font-size: 1.375rem;
    line-height: 1.25;
}

.landing-main h3 {
    margin: 1.75rem 0 0.5rem;
    font-size: 1.0625rem;
    color: var(--color-primary);
}

.landing-main p {
    margin: 0 0 1rem;
}

.landing-lead {
    font-size: 1.125rem;
    color: var(--color-text);
}

.landing-main ul {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

.landing-main li {
    margin-bottom: 0.5rem;
}

.landing-main strong {
    color: var(--color-primary);
    font-weight: 600;
}

.landing-main a {
    color: var(--color-water);
}

/* Call to action */

/* Qualified by the anchor, because the generic .landing-main a rule above is a
   class plus an element and would otherwise outrank a bare class and paint this
   button's text the link colour. */
.landing-main a.landing-call-to-action {
    display: inline-block;
    margin: 0.5rem 0 1rem;
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    background: var(--color-primary);
    color: #000000;
    font-weight: 600;
    text-decoration: none;
}

.landing-main a.landing-call-to-action:hover {
    filter: brightness(1.1);
}

/* Footer */

.landing-footer {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 1.5rem;
    border-top: 1px solid var(--color-rule);
    color: var(--color-muted);
    font-size: 0.875rem;
}

.landing-footer a {
    color: var(--color-muted);
}

.landing-footer p {
    margin: 0 0 0.5rem;
}

.landing-disclaimer {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-rule);
    color: var(--color-muted);
    font-size: 0.875rem;
}