/* ==========================================================================
   Landing page — the public single-page site. Token-driven (tokens.css loads
   first); everything under .landing so nothing leaks into the app shell.
   ========================================================================== */

/*
   Landing palette — deliberately its own: warm paper, deep pine green and ink
   instead of the app's indigo/neutral theme. Scoped to .landing by overriding
   the same tokens the components consume, so buttons/cards restyle themselves
   and the app shell is untouched.
*/
.landing {
    --bg-body:      oklch(0.985 0.005 95);   /* warm paper */
    --bg-surface:   oklch(1 0 0);
    --bg-sunken:    oklch(0.962 0.006 95);

    --accent:       oklch(0.46 0.085 168);   /* deep pine */
    --accent-hover: oklch(0.40 0.085 168);
    --accent-soft:  oklch(0.945 0.028 168);

    --primary:       oklch(0.30 0.045 175);  /* ink-green CTAs */
    --primary-hover: oklch(0.24 0.045 175);

    --text-strong:  oklch(0.24 0.025 175);
    --text-default: oklch(0.36 0.018 175);
    --text-muted:   oklch(0.50 0.014 170);
    --text-faint:   oklch(0.62 0.010 170);

    --border-color:        oklch(0.88 0.008 110);
    --border-color-subtle: oklch(0.925 0.006 110);


    /* Vertical rhythm — one knob for the whole page (sections, hero, bands,
       footer all derive from it), built from the app spacing scale. */
    --landing-rhythm: clamp(var(--space-10), 7vw, var(--space-16));
    --landing-header-h: 64px;

    background: var(--bg-body); color: var(--text-default);
}
.landing__container { max-width: 1080px; margin-inline: auto; padding-inline: clamp(var(--space-4), 4vw, var(--space-8)); }

/* ---- Header -------------------------------------------------------------- */
.landing__header {
    position: sticky; top: 0; z-index: var(--z-sticky, 20);
    background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border-color-subtle);
}
.landing__header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); }
.landing__brand { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--font-semibold); color: var(--text-strong); font-size: var(--text-lg); }
.landing__brand-mark {
    display: grid; place-items: center; width: 30px; height: 30px;
    border-radius: var(--radius-md); background: var(--accent); color: var(--text-on-accent);
    font-size: var(--text-sm); font-weight: var(--font-bold);
}
.landing__nav { display: flex; align-items: center; gap: var(--space-2); }

/* ---- Hero ----------------------------------------------------------------- */
.landing__hero {
    padding-block: calc(var(--landing-rhythm) * 1.1) var(--landing-rhythm);
    text-align: center;
    background:
        radial-gradient(600px 280px at 50% -40px, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
        var(--bg-body);
}
.landing__eyebrow {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
    background: var(--accent-soft); color: var(--accent);
    font-size: var(--text-sm); font-weight: var(--font-medium);
    margin-block-end: var(--space-5);
}
.landing__title {
    font-size: clamp(2.1rem, 1.4rem + 3.4vw, 3.5rem);
    line-height: 1.12; letter-spacing: -0.02em;
    color: var(--text-strong); font-weight: var(--font-bold);
    max-width: 21ch; margin-inline: auto;
}
.landing__title em { font-style: normal; color: var(--accent); }
.landing__lede {
    font-size: var(--text-lg); color: var(--text-muted); line-height: 1.6;
    max-width: 56ch; margin: var(--space-5) auto 0;
}
.landing__cta { display: flex; justify-content: center; gap: var(--space-3); margin-block-start: var(--space-8); flex-wrap: wrap; }
.landing__cta-note { margin-block-start: var(--space-3); font-size: var(--text-sm); color: var(--text-muted); }

/* ---- Section scaffolding --------------------------------------------------- */
.landing__section { padding-block: var(--landing-rhythm); }
.landing__section--alt { background: var(--bg-surface); border-block: 1px solid var(--border-color-subtle); }
.landing__section-head { text-align: center; max-width: 60ch; margin-inline: auto; margin-block-end: calc(var(--landing-rhythm) * 0.6); }
.landing__kicker { color: var(--accent); font-weight: var(--font-semibold); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.08em; }
.landing__heading { font-size: var(--text-3xl); color: var(--text-strong); font-weight: var(--font-bold); letter-spacing: -0.015em; margin-block-start: var(--space-2); }
.landing__sub { color: var(--text-muted); margin-block-start: var(--space-3); line-height: 1.6; }

/* ---- Feature grid ----------------------------------------------------------- */
.landing__grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .landing__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .landing__grid { grid-template-columns: 1fr; } }
.landing__feature {
    background: var(--bg-surface); border: 1px solid var(--border-color-subtle);
    border-radius: var(--radius-xl); padding: var(--space-5);
    display: flex; flex-direction: column; gap: var(--space-3);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.landing__feature:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border-color)); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.landing__section--alt .landing__feature { background: var(--bg-body); }
.landing__feature-icon {
    display: grid; place-items: center; width: 38px; height: 38px;
    border-radius: var(--radius-lg); background: var(--accent-soft); color: var(--accent);
}
.landing__feature h3 { font-size: var(--text-md); color: var(--text-strong); font-weight: var(--font-semibold); }
.landing__feature p { color: var(--text-muted); font-size: var(--text-sm); line-height: 1.6; }

/* ---- Steps ------------------------------------------------------------------ */
.landing__steps { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: step; }
.landing__step { padding: var(--space-5); border-radius: var(--radius-xl); border: 1px dashed var(--border-color); }
.landing__step::before {
    counter-increment: step; content: counter(step);
    display: grid; place-items: center; width: 30px; height: 30px;
    border-radius: var(--radius-pill); background: var(--accent); color: var(--text-on-accent);
    font-weight: var(--font-bold); font-size: var(--text-sm);
    margin-block-end: var(--space-3);
}
.landing__step h3 { color: var(--text-strong); font-size: var(--text-md); font-weight: var(--font-semibold); margin-block-end: var(--space-2); }
.landing__step p { color: var(--text-muted); font-size: var(--text-sm); line-height: 1.6; }

/* ---- Trust strip ------------------------------------------------------------- */
.landing__trust { display: grid; gap: var(--space-5) var(--space-8); grid-template-columns: repeat(2, 1fr); max-width: 880px; margin-inline: auto; }
@media (max-width: 700px) { .landing__trust { grid-template-columns: 1fr; } }
.landing__trust-item { display: flex; gap: var(--space-3); align-items: flex-start; }
.landing__trust-item svg { flex-shrink: 0; color: var(--color-success-600, var(--accent)); margin-block-start: 2px; }
.landing__trust-item strong { display: block; color: var(--text-strong); font-size: var(--text-sm); font-weight: var(--font-semibold); }
.landing__trust-item span { color: var(--text-muted); font-size: var(--text-sm); line-height: 1.55; }

/* ---- Final CTA + footer -------------------------------------------------------- */
.landing__cta-panel {
    text-align: center; background: var(--accent); color: var(--text-on-accent);
    border-radius: var(--radius-2xl, var(--radius-xl)); padding: clamp(var(--space-8), 6vw, var(--space-10)) var(--space-5);
}
/* base.css colours headings dark directly, which beats the panel's inherited
   white — so the colour is pinned here. Same for the paragraph. */
.landing__cta-panel h2 { color: var(--text-on-accent); font-size: var(--text-2xl); font-weight: var(--font-bold); letter-spacing: -0.015em; }
.landing__cta-panel p { color: var(--text-on-accent); margin-block-start: var(--space-3); opacity: 0.85; }
.landing__cta-panel .landing__cta { margin-block-start: var(--space-6); }
.landing__cta-panel .button--secondary {
    background: color-mix(in srgb, var(--text-on-accent) 14%, transparent);
    color: var(--text-on-accent); border-color: color-mix(in srgb, var(--text-on-accent) 25%, transparent);
}
.landing__footer { padding-block: calc(var(--landing-rhythm) * 0.5); border-top: 1px solid var(--border-color-subtle); }
.landing__footer-inner { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3) var(--space-4); flex-wrap: wrap; font-size: var(--text-sm); color: var(--text-muted); }
/* Links wrap as whole labels, never mid-word ("Sign / in"), and reflow with a gap. */
.landing__footer-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.landing__footer-links a { white-space: nowrap; }
@media (max-width: 560px) {
    .landing__footer-inner { flex-direction: column; align-items: center; text-align: center; }
    .landing__footer-links { justify-content: center; }
}

/* ---- Header anchor menu ----------------------------------------------------- */
.landing__menu { display: flex; gap: var(--space-5); margin-inline: auto; }
.landing__menu a { color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--font-medium); }
.landing__menu a:hover { color: var(--text-strong); }
@media (max-width: 820px) { .landing__menu { display: none; } }
/* Small phones: compress the brand + buttons so the single header row fits. */
@media (max-width: 430px) {
    .landing__header-inner { gap: var(--space-2); }
    .landing__brand { font-size: var(--text-base); }
    .landing__nav .button { padding-inline: var(--space-3); }
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---- Three pillars (the day-one feelings) ------------------------------------ */
.landing__pillars { display: grid; gap: var(--space-5); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px) { .landing__pillars { grid-template-columns: 1fr; } }
.landing__pillar { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); }
.landing__pillar-icon {
    display: grid; place-items: center; width: 44px; height: 44px;
    border-radius: var(--radius-lg); background: var(--accent); color: var(--text-on-accent);
}
.landing__pillar h2 { font-size: var(--text-xl); color: var(--text-strong); font-weight: var(--font-bold); letter-spacing: -0.01em; }
.landing__pillar p { color: var(--text-muted); line-height: 1.65; font-size: var(--text-sm); }

/* ---- Audience split (roles) --------------------------------------------------- */
.landing__roles { display: grid; gap: var(--space-4); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px) { .landing__roles { grid-template-columns: 1fr; } }
.landing__role {
    background: var(--bg-body); border: 1px solid var(--border-color-subtle);
    border-radius: var(--radius-xl); padding: var(--space-5);
}
.landing__role h3 { display: flex; align-items: center; gap: var(--space-2); color: var(--text-strong); font-size: var(--text-md); font-weight: var(--font-semibold); margin-block-end: var(--space-3); }
.landing__role h3 svg { color: var(--accent); }
.landing__role p { color: var(--text-muted); font-size: var(--text-sm); line-height: 1.65; }

/* ---- Switching band ------------------------------------------------------------ */
.landing__switch { display: grid; gap: clamp(var(--space-6), 5vw, var(--space-10)); grid-template-columns: 1.1fr 1fr; align-items: center; }
@media (max-width: 880px) { .landing__switch { grid-template-columns: 1fr; } }
.landing__switch .landing__heading { margin-block-start: var(--space-2); }
.landing__switch-steps { display: flex; flex-direction: column; gap: var(--space-3); counter-reset: sw; list-style: none; padding: 0; }
.landing__switch-steps li {
    display: grid; grid-template-columns: 34px 1fr; column-gap: var(--space-3);
    background: var(--bg-surface); border: 1px solid var(--border-color-subtle);
    border-radius: var(--radius-lg); padding: var(--space-4);
}
.landing__switch-steps li::before {
    counter-increment: sw; content: counter(sw);
    display: grid; place-items: center; width: 28px; height: 28px; grid-row: span 2;
    border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent);
    font-weight: var(--font-bold); font-size: var(--text-sm);
}
.landing__switch-steps strong { color: var(--text-strong); font-size: var(--text-sm); font-weight: var(--font-semibold); }
.landing__switch-steps span { grid-column: 2; color: var(--text-muted); font-size: var(--text-sm); line-height: 1.5; }

/* ---- Honest numbers band -------------------------------------------------------- */
.landing__numbers { background: oklch(0.26 0.04 172); color: oklch(0.97 0.01 120); padding-block: calc(var(--landing-rhythm) * 0.66); }
.landing__numbers-inner { display: grid; gap: var(--space-5); grid-template-columns: repeat(4, 1fr); text-align: center; }
@media (max-width: 760px) { .landing__numbers-inner { grid-template-columns: repeat(2, 1fr); } }
.landing__number strong { display: block; font-size: var(--text-3xl); font-weight: var(--font-bold); letter-spacing: -0.02em; }
.landing__number span { display: block; margin-block-start: var(--space-1); font-size: var(--text-sm); opacity: 0.7; }

/* ---- Contact page --------------------------------------------------------------- */
.landing__contact { display: grid; gap: clamp(var(--space-6), 5vw, var(--space-12)); grid-template-columns: 1fr 1.1fr; align-items: start; }
@media (max-width: 880px) { .landing__contact { grid-template-columns: 1fr; } }
.landing__contact-intro .landing__heading { margin-block-start: var(--space-2); }
.landing__contact-points { list-style: none; padding: 0; margin-block-start: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.landing__contact-points li { display: flex; align-items: center; gap: var(--space-2); color: var(--text-muted); font-size: var(--text-sm); }
.landing__contact-points svg { color: var(--accent); flex-shrink: 0; }
.landing__contact-form {
    background: var(--bg-surface); border: 1px solid var(--border-color-subtle);
    border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
    padding: clamp(var(--space-5), 4vw, var(--space-8));
    display: flex; flex-direction: column; gap: var(--space-4);
}
.landing__contact-row { display: grid; gap: var(--space-4); grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .landing__contact-row { grid-template-columns: 1fr; } }

/* Anchor targets stop clear of the sticky header (top) and keep breathing
   room at the viewport's bottom edge too. */
.landing [id] { scroll-margin-block: calc(var(--landing-header-h) + var(--space-8)) var(--space-8); }

/* Accessibility: the skip link sits off-screen until focused. */
.skip-link {
    position: absolute; inset-block-start: var(--space-2); inset-inline-start: var(--space-2);
    z-index: var(--z-toast, 999);
    padding: var(--space-2) var(--space-4);
    background: var(--primary); color: var(--text-on-accent);
    border-radius: var(--radius-md);
    transform: translateY(-300%);
}
.skip-link:focus { transform: none; }

/* Grids that are semantically lists keep their layout without bullets. Only
   list-specific properties are reset — margin-inline/padding-inline belong to
   the layout classes these elements share (.landing__container centres the
   numbers band; .landing__trust centres itself) and must not be clobbered. */
ul.landing__trust, ul.landing__numbers-inner { list-style: none; margin-block: 0; }
ul.landing__trust { padding-inline-start: 0; }

/* Policy pages — calm reading column on the landing palette. */
.legal { max-width: 72ch; padding-block: calc(var(--landing-rhythm) * 0.75); }
.legal h1 { font-size: var(--text-3xl); color: var(--text-strong); margin-block-end: var(--space-2); }
.legal__updated { color: var(--text-faint); font-size: var(--text-sm); margin-block-end: var(--space-8); }
.legal h2 { font-size: var(--text-xl); color: var(--text-strong); margin-block: var(--space-8) var(--space-3); }
.legal p, .legal li { color: var(--text-default); line-height: var(--leading-relaxed, 1.65); }
.legal p { margin-block-end: var(--space-4); }
.legal ul { padding-inline-start: var(--space-5); margin-block-end: var(--space-4); display: grid; gap: var(--space-2); }
.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }