/* eila landing — design tokens */
:root {
    /* Vital palette — obsidian + mint. Mirrors mobile/lib/config/eila_tokens.dart
       (§2.1 DESIGN_SYSTEM.md). Keep these two files in lockstep when either changes. */
    --bg: #04130F;
    --bg-2: #071A14;
    --surface: #0E1F19;
    --surface-2: #13261F;
    --line: #1E332B;

    --ink: #F4FBF7;
    --sub: #7FA091;
    --faint: #5F7A6D;

    --accent: #34E0A1;
    --accent-hover: #2DCB93;
    --accent-press: #26B884;
    --accent-ink: #04130F;

    --alert: #E8455F;
    --warn: #E6BC6B;
    --info: #5BB7E8;

    --radius-sm: 6px;
    --radius-card: 14px;
    --radius-pill: 999px;

    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 48px;
    --space-4xl: 64px;

    --motion-micro: 150ms;
    --motion-state: 250ms;

    --max-width: 960px;
}

/* Reset */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Self-hosted brand fonts (Archivo + JetBrains Mono Medium) — bundled locally so
   the site renders offline and needs no fonts.gstatic.com CSP allowance (#1583).
   Browsers fetch only the faces actually used; declaring all bundled faces is free. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/Archivo-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: italic; font-weight: 400; font-display: swap; src: url('assets/fonts/Archivo-Italic.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/Archivo-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/Archivo-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/Archivo-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: italic; font-weight: 700; font-display: swap; src: url('assets/fonts/Archivo-BoldItalic.woff2') format('woff2'); }
/* Brand mark only — Archivo Black Italic 900, subset to `EILA` (#1724). Powers the
   `.wordmark` mark, NOT the system display scale (which stays italic 700, brandbook §3). */
@font-face { font-family: 'Archivo'; font-style: italic; font-weight: 900; font-display: swap; src: url('assets/fonts/Archivo-BlackItalic.woff2') format('woff2'); }
@font-face { font-family: 'JetBrainsMono'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/JetBrainsMono-Medium.woff2') format('woff2'); }

body {
    font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--ink);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    font-feature-settings: 'cv11', 'ss01';
}

/* Single ambient mint glow — top right */
.glow {
    position: fixed;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    top: -20%;
    right: -15%;
    background: radial-gradient(circle, rgba(52, 224, 161, 0.10) 0%, transparent 65%);
    filter: blur(100px);
    pointer-events: none;
    z-index: 0;
}

/* Layout */
main {
    position: relative;
    z-index: 1;
    flex: 1;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

/* Hero */
.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 96px 0 64px;
    animation: fade-up 0.7s ease-out both;
}

.wordmark {
    font-family: 'Archivo', sans-serif;
    font-style: italic;
    font-weight: 900;
    font-size: clamp(4rem, 12vw, 7rem);
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 var(--space-sm);
}

.wordmark abbr {
    text-decoration: none;
}

/* The mint `A` — matches the app wordmark SVG (ink E-I-L + mint accent A, #1724). */
.wordmark__accent {
    color: var(--accent);
}

.wordmark-expansion {
    font-family: 'Archivo', sans-serif;
    font-weight: 600;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sub);
    margin: 0 0 var(--space-2xl);
}

.eyebrow {
    font-family: 'Archivo', sans-serif;
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    /* --accent on --bg is 11.1:1 under the Vital palette — AA-safe. Kept --ink
       here for prose scannability; underline carries the link affordance. */
    color: var(--ink);
    margin-bottom: var(--space-md);
}

.hero__title {
    font-family: 'Archivo', sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: clamp(2rem, 6vw, 3.2rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: var(--space-xl);
    max-width: 720px;
}

.hero__body {
    max-width: 580px;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--sub);
    margin-bottom: var(--space-2xl);
}

.hero__cta-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}

.hero__cta-buttons {
    display: flex;
    gap: var(--space-md);
}

.hero__cta-note {
    font-size: 0.75rem;
    color: var(--sub);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: var(--space-xs);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 14px 28px;
    border-radius: var(--radius-pill);
    font-family: 'Archivo', sans-serif;
    font-size: 0.95rem;
    text-decoration: none;
    transition: background-color var(--motion-state) ease, color var(--motion-state) ease, transform var(--motion-micro) ease;
    cursor: pointer;
    border: none;
    line-height: 1.2;
}

.btn--primary {
    background: var(--accent);
    color: var(--accent-ink);
    font-style: italic;
    font-weight: 700;
}

.btn--primary:hover {
    background: var(--accent-hover);
}

.btn--primary:active {
    background: var(--accent-press);
    transform: scale(0.98);
}

.btn--secondary {
    background: transparent;
    color: var(--ink);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.btn--secondary:hover {
    background: var(--surface);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.btn--secondary:active {
    background: var(--surface-2);
    transform: scale(0.98);
}

.btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* Features */
.features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    padding: var(--space-2xl) 0 96px;
}

.feature {
    background: var(--surface);
    border-radius: var(--radius-card);
    padding: var(--space-xl);
    transition: background-color var(--motion-state) ease;
}

@media (hover: hover) {
    .feature:hover {
        background: var(--surface-2);
    }
}

.feature__title {
    font-family: 'Archivo', sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.3;
    color: var(--ink);
    margin-bottom: var(--space-md);
    letter-spacing: -0.01em;
}

.feature__desc {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--sub);
}

/* Manifesto excerpt (landing section, below features) */
.manifesto-excerpt {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--space-2xl) 0 96px;
    text-align: center;
}

.manifesto-excerpt__quote {
    font-family: 'Archivo', sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: clamp(1.5rem, 4.5vw, 2.4rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-bottom: var(--space-xl);
}

.manifesto-excerpt__body {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--sub);
    margin-bottom: var(--space-xl);
}

.manifesto-excerpt__link {
    display: inline-block;
    font-family: 'Archivo', sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ink);
    text-decoration: none;
    transition: color var(--motion-state) ease;
}

.manifesto-excerpt__link:hover {
    /* --accent on --bg is 11.1:1 under the Vital palette — AA-safe. Kept --ink
       here for prose scannability; underline carries the link affordance. */
    color: var(--ink);
}

.manifesto-excerpt__link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
}

/* Manifesto page (long-form) */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    margin: var(--space-xl) 0 var(--space-lg);
    padding: var(--space-sm) var(--space-md);
    margin-left: calc(var(--space-md) * -1);
    font-family: 'Archivo', sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--sub);
    text-decoration: none;
    transition: color var(--motion-state) ease;
    border-radius: var(--radius-sm);
}

.back-link:hover {
    color: var(--ink);
}

.back-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

.manifesto-page {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--space-xl) 0 var(--space-4xl);
}

.manifesto-page .eyebrow {
    margin-bottom: var(--space-2xl);
}

.manifesto-page__section {
    margin-bottom: var(--space-3xl);
}

.manifesto-page__section-title {
    font-family: 'Archivo', sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: clamp(1.4rem, 3.5vw, 1.9rem);
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-bottom: var(--space-lg);
}

.manifesto-page__section p {
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--sub);
    margin-bottom: var(--space-lg);
}

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

.manifesto-page__section p.manifesto-page__pullout {
    font-family: 'Archivo', sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.5;
    color: var(--ink);
    padding-left: var(--space-lg);
    border-left: 2px solid var(--accent);
    margin-top: var(--space-xl);
}

.manifesto-page__signature {
    margin-top: var(--space-4xl);
    padding-top: var(--space-2xl);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}

.manifesto-page__signature-name {
    font-family: 'Archivo', sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--ink);
    margin: 0 0 var(--space-xs);
}

.manifesto-page__signature-role {
    font-size: 0.85rem;
    color: var(--sub);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0;
}

/* Footer */
.footer {
    position: relative;
    z-index: 1;
    padding: var(--space-xl);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

.footer__text {
    margin: 0;
    font-size: 0.8rem;
    color: var(--sub);
    letter-spacing: 0.04em;
}

.footer__links {
    margin: 0;
    font-size: 0.85rem;
    color: var(--sub);
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    justify-content: center;
}

.footer__links a {
    color: var(--sub);
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    transition: color var(--motion-state) ease;
}

.footer__links a:hover {
    color: var(--ink);
}

.footer__links a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.footer__links-sep {
    color: var(--sub);
    user-select: none;
}

.footer__lang-switch {
    font-style: italic;
    font-weight: 600;
}

/* Legal pages (privacy, contact) */
.legal-page {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--space-xl) 0 var(--space-4xl);
}

.legal-page .eyebrow {
    margin-bottom: var(--space-2xl);
}

.legal-page__title {
    font-family: 'Archivo', sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: clamp(1.8rem, 4.5vw, 2.6rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 var(--space-2xl);
}

.legal-page__section {
    margin-bottom: var(--space-3xl);
}

.legal-page__section-title {
    font-family: 'Archivo', sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin-bottom: var(--space-lg);
}

.legal-page__section p,
.legal-page__section li {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--sub);
}

.legal-page__section p {
    margin-bottom: var(--space-md);
}

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

.legal-page__section ul {
    margin: 0 0 var(--space-md);
    padding-left: var(--space-xl);
}

.legal-page__section li {
    margin-bottom: var(--space-sm);
}

.legal-page__section li:last-child {
    margin-bottom: 0;
}

.legal-page__section strong {
    color: var(--ink);
    font-weight: 600;
}

.legal-page__section code {
    font-family: 'JetBrainsMono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 500;
    color: var(--ink);
}

.legal-page__section a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--motion-state) ease;
}

.legal-page__section a:hover {
    /* --accent on --bg is 11.1:1 under the Vital palette — AA-safe. Kept --ink
       here for prose scannability; underline carries the link affordance. */
    color: var(--ink);
}

.legal-page__section a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

.legal-page__updated {
    margin-top: var(--space-4xl);
    padding-top: var(--space-xl);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.85rem;
    color: var(--sub);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 600;
}

/* Animations */
@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .hero {
        padding: 72px 0 48px;
    }

    .features {
        grid-template-columns: 1fr;
        padding-bottom: 48px;
    }

    .manifesto-excerpt {
        padding: var(--space-xl) 0 64px;
    }

    .manifesto-page__section {
        margin-bottom: var(--space-2xl);
    }

    .glow {
        width: 360px;
        height: 360px;
    }
}

@media (max-width: 480px) {
    .hero {
        padding: 56px 0 40px;
    }

    .hero__cta-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }

    .btn {
        padding: 13px 24px;
    }

    .wordmark-expansion {
        font-size: 0.56rem;
        letter-spacing: 0.1em;
    }

    .manifesto-page__section p.manifesto-page__pullout {
        padding-left: var(--space-md);
        font-size: 1.05rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}