/* Landing page only. Loaded through {% block extra_css %} on core/landing.html
   and nowhere else, so nothing here can affect the operator pages.

   Colours come from the variables app.css already defines, so the page follows
   the light/dark selection like the rest of the site instead of pinning its
   own palette. */

.landing-hero {
    max-width: 62ch;
    margin: clamp(1.5rem, 6vw, 4rem) auto clamp(2rem, 6vw, 4rem);
    text-align: center;
}

.landing-hero h1 {
    margin: .4rem 0 1rem;
    font-size: clamp(1.9rem, 5vw, 3.1rem);
    line-height: 1.12;
    letter-spacing: -.015em;
}

.landing-lede {
    margin: 0 auto;
    max-width: 56ch;
    font-size: clamp(1.02rem, 2.1vw, 1.2rem);
    line-height: 1.6;
    color: var(--ink-soft, #587071);
}

.landing-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .7rem;
    margin-top: 1.8rem;
}

.landing-cta {
    display: inline-block;
    padding: .78rem 1.5rem;
    border: 1px solid var(--teal, #176b68);
    border-radius: 999px;
    background: var(--teal, #176b68);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.landing-cta:hover,
.landing-cta:focus-visible {
    background: var(--teal-dark, #0f4f4d);
    border-color: var(--teal-dark, #0f4f4d);
}

.landing-cta-quiet {
    background: transparent;
    color: var(--ink, #183738);
}

.landing-cta-quiet:hover,
.landing-cta-quiet:focus-visible {
    background: var(--mint, #dcece5);
    border-color: var(--teal, #176b68);
    color: var(--ink, #183738);
}

.landing-note {
    margin-top: .9rem;
    font-size: .86rem;
    color: var(--ink-soft, #587071);
}

.landing-why,
.landing-what,
.landing-models,
.landing-foot {
    margin: clamp(2rem, 7vw, 4.5rem) auto 0;
    max-width: 1100px;
}

.landing-why h2,
.landing-what h2,
.landing-models h2,
.landing-foot h2 {
    margin-bottom: 1.4rem;
    font-size: clamp(1.35rem, 3vw, 1.8rem);
    text-align: center;
}

.landing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: 1rem;
}

.landing-grid article {
    padding: 1.3rem 1.4rem;
    border: 1px solid var(--line, #d8ddd5);
    border-radius: 14px;
    background: var(--surface, #fffdf7);
}

.landing-grid h3 {
    margin: 0 0 .5rem;
    font-size: 1.02rem;
    letter-spacing: .01em;
}

.landing-grid p {
    margin: 0;
    line-height: 1.58;
    color: var(--ink-soft, #587071);
}

/* Models: the first card is the one being led with, so it carries the accent.
   Order comes from the view, not from CSS, so changing the order is a code
   change and not a styling accident. */
.landing-grid-models article:first-child {
    border-color: var(--teal, #176b68);
    box-shadow: 0 6px 22px rgba(23, 107, 104, .12);
}

.landing-model ul {
    margin: .9rem 0 0;
    padding-left: 1.1rem;
    line-height: 1.55;
    color: var(--ink-soft, #587071);
}

.landing-model li + li {
    margin-top: .3rem;
}

.landing-contact,
.landing-foot p {
    margin-top: 1.3rem;
    text-align: center;
    color: var(--ink-soft, #587071);
}

.landing-foot {
    margin-bottom: clamp(2rem, 7vw, 4rem);
}

@media (max-width: 650px) {
    .landing-hero {
        margin-top: 1rem;
        text-align: left;
    }
    .landing-actions {
        justify-content: flex-start;
    }
    .landing-cta {
        flex: 1 1 auto;
        text-align: center;
    }
}