/*
 * Marketing landing page v2 (CFCON-22651, rebuild of CFCON-22409). Bespoke
 * stylesheet, deliberately outside the Tailwind DS layer (app.css) — see
 * DesignSystemGuardTest::dsScopedFiles(), which excludes landing.blade.php.
 * Ported verbatim from the John McCann v2 prototype's inline <style> block,
 * with the fixes the design-critique pass required (contrast, pill tones,
 * catalogue grid). Self-hosted fonts: Libre Franklin 800 (display), Inter
 * (body), JetBrains Mono (labels/mono). Colour rhythm: dark ink hero+footer,
 * light paper body, faint-blue §02 wash, ComplyFlow-blue accents + final CTA
 * gradient band.
 */

@font-face {
    font-family: 'Libre Franklin';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/fonts/libre-franklin-800.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/inter-variable.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('/fonts/jetbrains-mono-variable.woff2') format('woff2');
}

.lm-marketing {
    --ink: #0B1220;
    --ink-soft: rgba(255, 255, 255, 0.72);
    --ink-faint: rgba(255, 255, 255, 0.5);
    --paper: #F6F2E9;
    --paper-alt: #FBF9F3;
    --blue-wash: #EDF2FB;
    --cf-blue: #0074B7;
    --cf-blue-dark: #045680;
    --text-dark: #16233A;
    --text-muted: #5B6B84;
    --border-soft: rgba(22, 35, 58, 0.12);
    --sev-critical: #E14F4F;
    --sev-high: #E88A2E;
    --sev-medium: #D8B31C;
    --sev-low: #8C96A6;

    /* Display = Libre Franklin ExtraBold 800 (John, 29 Jul). Fallback is the
       Inter stack, NOT 'Arial Black' — the 700 woff2 404'd in every pre-29-Jul
       screenshot, so what read as heavy/dated was actually the Arial Black
       fallback rendering, not the intended typeface. */
    --display-font: 'Libre Franklin', 'Inter', -apple-system, sans-serif;
    --body-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --mono-font: 'JetBrains Mono', ui-monospace, Menlo, monospace;

    font-family: var(--body-font);
    color: var(--text-dark);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

.lm-marketing * {
    box-sizing: border-box;
}

.lm-marketing a {
    color: inherit;
    text-decoration: none;
}

.lm-marketing img,
.lm-marketing svg {
    max-width: 100%;
    display: block;
}

.lm-marketing .lm-container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 40px;
}

.lm-marketing .lm-eyebrow {
    font-family: var(--mono-font);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
}

.lm-marketing .lm-eyebrow::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-soft);
}

.lm-marketing .lm-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

/* Hero eyebrow: dot + label share currentColor, prototype teal. Needs the
   .lm-marketing prefix to match .lm-marketing .lm-eyebrow's (0,2,0)
   specificity and win by source order — a bare .lm-hero-eyebrow (0,1,0)
   loses and the teal never applies. */
.lm-marketing .lm-hero-eyebrow {
    color: rgb(52, 147, 124);
    margin-bottom: 24px;
}

/* Display type: Libre Franklin 800 earns its weight at large sizes only. */
.lm-marketing h1,
.lm-marketing h2 {
    font-family: var(--display-font);
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 16px;
    color: var(--text-dark);
    letter-spacing: -0.01em;
}

/* Subheads: Inter 600. Libre Franklin reads cramped and heavy below ~24px.
   Inter is already self-hosted, so this costs no extra request. */
.lm-marketing h3,
.lm-marketing h4 {
    font-family: var(--body-font);
    font-weight: 600;
    line-height: 1.32;
    margin: 0 0 16px;
    color: var(--text-dark);
    letter-spacing: -0.005em;
}

.lm-marketing p {
    margin: 0 0 16px;
    color: var(--text-muted);
}

/* ---------- Skip link (AC27) ---------- */

.lm-skip-link {
    position: absolute;
    left: 12px;
    top: -48px;
    z-index: 100;
    background: #fff;
    color: var(--cf-blue-dark);
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    transition: top 0.16s cubic-bezier(0.4, 0, 0.2, 1);
}

.lm-skip-link:focus {
    top: 12px;
}

/* ---------- Focus visibility (AC26) ----------
   Layered ring (paper gap + blue outer ring) so it reads clearly on both the
   dark hero/footer and the light body sections. Never the same treatment as
   hover. */
.lm-marketing a:focus-visible,
.lm-marketing button:focus-visible,
.lm-marketing summary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--cf-blue);
    border-radius: 4px;
}

.lm-header :focus-visible,
.lm-footer :focus-visible,
.lm-hero :focus-visible,
.lm-final-cta :focus-visible {
    box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--cf-blue);
}

/* ---------- Header ---------- */

.lm-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--ink);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.lm-header-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px 40px;
    max-width: 1160px;
    margin: 0 auto;
}

.lm-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lm-logo svg {
    height: 20px;
    width: auto;
}

.lm-logo-tag {
    font-family: var(--mono-font);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.lm-nav {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1;
}

.lm-nav a {
    font-size: 14px;
    color: var(--ink-soft);
    padding: 4px 2px;
    transition: color 0.16s cubic-bezier(0.4, 0, 0.2, 1);
}

.lm-nav a:hover {
    color: #fff;
}

.lm-header-auth {
    display: flex;
    align-items: center;
    gap: 18px;
}

/* Header CTA needs more breathing room than the base button (John, 29 Jul). */
.lm-header-auth .lm-btn {
    padding: 11px 24px;
}

.lm-header-auth > a {
    font-size: 14px;
    color: var(--ink-soft);
    padding: 4px 2px;
    transition: color 0.16s cubic-bezier(0.4, 0, 0.2, 1);
}

.lm-header-auth > a:hover {
    color: #fff;
}

/* ---------- Buttons ---------- */

.lm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--body-font);
    font-weight: 600;
    font-size: 14px;
    border-radius: 8px;
    padding: 12px 20px;
    border: 1.5px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.16s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.16s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.16s cubic-bezier(0.4, 0, 0.2, 1);
}

.lm-btn:hover {
    transform: translateY(-1px);
}

.lm-btn:active {
    transform: translateY(0) scale(0.98);
}

.lm-btn.lm-btn-primary {
    background: var(--cf-blue);
    color: #fff;
}

.lm-btn.lm-btn-primary:hover {
    background: var(--cf-blue-dark);
}

.lm-btn.lm-btn-secondary {
    background: transparent;
    border-color: var(--border-soft);
    color: var(--text-dark);
}

.lm-btn.lm-btn-secondary:hover {
    border-color: var(--cf-blue);
    color: var(--cf-blue-dark);
}

.lm-btn.lm-btn-on-dark {
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
}

.lm-btn.lm-btn-on-dark:hover {
    border-color: rgba(255, 255, 255, 0.6);
}

.lm-btn.lm-btn-white {
    background: #fff;
    color: var(--cf-blue-dark);
}

.lm-btn.lm-btn-white:hover {
    background: var(--paper);
}

.lm-btn[aria-disabled='true'] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---------- Hero (single column — the v1 feed panel is deleted, CFCON-22651) ---------- */

.lm-hero {
    background: var(--ink);
    color: #fff;
    padding: 80px 0 64px;
    background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 48px 48px;
}

.lm-hero-inner {
    max-width: 720px;
}

.lm-hero h1 {
    font-size: 48px;
    line-height: 1.12;
    color: #fff;
    margin-bottom: 20px;
}

.lm-hero .lm-highlight {
    color: #7fb3e0;
}

/* Needs the .lm-marketing prefix: the generic `.lm-marketing p` (0,1,1) was
   silently beating this bare class (0,1,0), so the hero lead rendered
   --text-muted (#5B6B84) on the dark hero — ~3.6:1, a real WCAG AA failure
   (John caught it by eye, 29 Jul; re-verified AC23). Solid 0.9 white measures
   ~15:1. */
.lm-marketing .lm-hero-lead {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    max-width: 600px;
    margin-bottom: 28px;
}

.lm-hero-ctas {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

/* Same specificity fix as .lm-hero-lead — also a <p> on the dark hero, and it
   carries the free/no-account claim (AC23), so it needs the same safe
   contrast margin, not whatever a lower-specificity rule happens to leave. */
.lm-marketing .lm-hero-microcopy {
    font-family: var(--mono-font);
    font-size: 12px;
    color: var(--ink-soft);
    letter-spacing: 0.02em;
}

/* ---------- Generic section ---------- */

.lm-section {
    padding: 88px 0;
}

.lm-section--wash {
    background: var(--blue-wash);
}

.lm-section-head {
    max-width: 760px;
    margin-bottom: 40px;
}

.lm-section-head h2 {
    font-size: 34px;
    max-width: 720px;
}

.lm-section-head p {
    font-size: 17px;
    max-width: 640px;
}

/* ---------- §01 the library (catalogue examples + register example) ----------
   No severity/jurisdiction-status dots tied to live publishing counts —
   everything here is either a static catalogue example (real, DB-resolved
   subject) or a clearly labelled illustrative mock, so nothing here requires
   a live count to stay correct (John's brief, 2026-07-29). */

.lm-catalogue-lead {
    font-size: 15px;
    margin-bottom: 20px;
}

/* auto-fit/minmax (AC35), not a fixed repeat(3,1fr): 1-2 resolved cards fill
   their row instead of huddling left with a lopsided gap, while 6 cards still
   render 3-across at 1280 and 2-across at 960. 320px (not the prototype's
   280px) is the threshold that actually produces 2-across at a 960 viewport
   — at 280px, 3 columns still fit at 960 (872px of content vs 912px
   available), which fails AC35 as written; verified against both
   viewports before picking this value. */
.lm-catalogue-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    margin-bottom: 40px;
}

.lm-catalogue-card {
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 22px 24px;
    display: block;
    transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.lm-catalogue-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(11, 18, 32, 0.12);
}

.lm-catalogue-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.lm-jurisdiction {
    font-family: var(--mono-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cf-blue-dark);
}

.lm-catalogue-type {
    font-family: var(--mono-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--paper-alt);
    border: 1px solid var(--border-soft);
    border-radius: 5px;
    padding: 3px 8px;
}

.lm-catalogue-card h4 {
    font-size: 15px;
    margin: 0;
    color: var(--text-dark);
}

/* Register example — an illustration of "one place, not a spreadsheet", not
   live/tenant data (this page renders no org-scoped data at all, AC28). Two
   status languages, deliberately different in weight: a real user-set status
   (chip, only shown for a followed item that has a published topic) versus a
   quiet, sentence-case "watching" state for anything followed that hasn't
   published yet. */
.lm-register {
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 26px 28px;
    margin-bottom: 48px;
}

.lm-register-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.lm-register-head h3 {
    margin-bottom: 0;
    font-size: 19px;
}

.lm-register-badge {
    font-family: var(--mono-font);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--paper-alt);
    border: 1px solid var(--border-soft);
    border-radius: 5px;
    padding: 4px 10px;
}

.lm-register p {
    font-size: 14px;
    margin-bottom: 18px;
}

.lm-register-body {
    border-top: 1px solid var(--border-soft);
}

.lm-register-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-soft);
    font-size: 14px;
    flex-wrap: wrap;
}

.lm-register-body .lm-register-row:last-child {
    border-bottom: none;
}

.lm-register-name {
    color: var(--text-dark);
    font-weight: 600;
}

.lm-register-jur {
    font-family: var(--mono-font);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-left: 8px;
}

.lm-register-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    font-size: 12px;
}

.lm-register-status-watching {
    color: var(--text-muted);
}

/* Status pills — vocabulary and colours from the product's own compliance
   panel (John's direction, 29 Jul): Compliant / Non-compliant / Needs review
   / Acknowledged, matching Topic::statusMeta()'s canonical label+tone
   (app/Models/Topic.php) so this illustration can never drift from the real
   feature's vocabulary (AC32). Hex values are the ComplyFlow DS status
   colours (green/orange/red/agean per resources/css/app.css's @theme block)
   hardcoded here rather than referenced via var(--color-*) — this page
   deliberately does not load app.css (§5.1), so those custom properties
   would not exist in this stylesheet's scope. */
.lm-register-status-pill {
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.lm-register-status-ok {
    background: #D6F0E7;
    color: #33937C;
}

.lm-register-status-bad {
    background: #FFEFF3;
    color: #D03056;
}

/* Needs review (AC31) — matches app.css .lm-pill-orange (orange-100/orange-400). */
.lm-register-status-warn {
    background: #FFEBDA;
    color: #BB600C;
}

/* Acknowledged (AC32) — neutral/agean, deliberately NOT the Compliant green
   (status-dot.blade.php: "Acknowledged must never be visually confusable
   with a Compliant grade", CFCON-22596). Matches app.css .lm-pill-agean
   (agean-50/agean-400) and passes AA at 5.84:1, unlike the rest of the pill
   family (tracked separately as CFCON-22672). */
.lm-register-status-neutral {
    background: #EFF1F4;
    color: #465F7A;
}

.lm-pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
    flex: none;
}

.lm-register-tag {
    font-family: var(--mono-font);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 8px;
    vertical-align: 1px;
    white-space: nowrap;
}

.lm-register-tag-actionable {
    background: #D1DAF3;
    color: #2B3D7A;
}

.lm-register-tag-informational {
    background: #F1F4FC;
    color: #045680;
}

.lm-register-overall {
    font-family: var(--mono-font);
    font-size: 12px;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
}

.lm-register-overall-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--sev-medium);
    flex: none;
}

.lm-register-status-watching .lm-register-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
    background: var(--sev-low);
}

.lm-coverage-heading {
    font-size: 20px;
    margin-bottom: 8px;
}

.lm-coverage-note {
    font-size: 14px;
    max-width: 760px;
}

/* ---------- §02 how it works ---------- */

.lm-ai-list {
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.lm-ai-step {
    display: flex;
    gap: 16px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--border-soft);
}

.lm-ai-step:last-child {
    border-bottom: none;
}

.lm-ai-step-num {
    font-family: var(--mono-font);
    font-size: 12px;
    color: var(--cf-blue);
    flex: none;
    padding-top: 2px;
}

.lm-ai-step h4 {
    font-size: 15px;
    margin: 0 0 4px;
}

.lm-ai-step p {
    font-size: 13px;
    margin: 0;
}

.lm-ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono-font);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #2f7d5b;
    border: 1px solid #bfe3cf;
    background: #f1faf4;
    border-radius: 6px;
    padding: 8px 14px;
    margin-top: 20px;
}

/* ---------- §03 what's free ---------- */

.lm-free-tiers {
    margin: 8px 0 24px;
    border-top: 1px solid var(--border-soft);
}

.lm-free-tier {
    display: flex;
    gap: 18px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-soft);
    font-size: 14px;
}

.lm-free-tier-label {
    font-family: var(--mono-font);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cf-blue-dark);
    flex: none;
    width: 100px;
    padding-top: 2px;
}

.lm-free-microcopy {
    font-family: var(--mono-font);
    font-size: 12px;
    color: var(--text-muted);
    margin: 12px 0 0;
}

.lm-why-free {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--border-soft);
    max-width: 760px;
}

.lm-why-free h3 {
    font-size: 20px;
}

.lm-why-free p {
    font-size: 15px;
}

/* ---------- §04 FAQ (native <details> — works fully with JS disabled, AC21) ---------- */

.lm-faq-list {
    margin-top: 8px;
    border-top: 1px solid var(--border-soft);
    max-width: 820px;
}

.lm-faq-item {
    border-bottom: 1px solid var(--border-soft);
}

.lm-faq-item summary {
    list-style: none;
    cursor: pointer;
}

.lm-faq-item summary::-webkit-details-marker {
    display: none;
}

.lm-faq-question {
    display: flex;
    align-items: baseline;
    gap: 16px;
    width: 100%;
    font-family: var(--body-font);
    font-weight: 600;
    font-size: 18px;
    color: var(--text-dark);
    padding: 22px 4px;
    transition: color 0.16s cubic-bezier(0.4, 0, 0.2, 1);
}

.lm-faq-item summary:hover .lm-faq-question-text {
    color: var(--cf-blue-dark);
}

.lm-faq-q-num {
    font-family: var(--mono-font);
    font-weight: 400;
    font-size: 12px;
    color: var(--cf-blue);
    flex: none;
}

/* Heading wrapper (AC36) is unstyled so wrapping the question text in an h3
   causes no visual change — it inherits .lm-faq-question-text's own type
   rather than the browser's default heading margin/size. */
.lm-faq-question-text {
    margin: 0;
    font: inherit;
    color: inherit;
}

.lm-faq-icon {
    margin-left: auto;
    font-size: 20px;
    color: var(--text-muted);
    flex: none;
    transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.lm-faq-item[open] .lm-faq-icon {
    transform: rotate(45deg);
}

.lm-faq-answer {
    padding: 0 4px 24px 34px;
    font-size: 14.5px;
    color: var(--text-muted);
    max-width: 700px;
}

/* ---------- Final CTA ---------- */

.lm-final-cta {
    background: linear-gradient(135deg, var(--cf-blue-dark), var(--cf-blue));
    color: #fff;
    text-align: center;
    padding: 80px 0;
}

.lm-final-cta h2 {
    font-size: 38px;
    color: #fff;
}

.lm-final-cta .lm-highlight {
    color: #bfe0f5;
}

/* Contrast fix (AC22): rgba(255,255,255,.85) measured 4.07:1 over the
   gradient's light end (#0074B7) — a real WCAG AA failure (needs 4.5:1),
   found by the design-critique pass, distinct from the hero-lead failure
   above that the ticket already knew about. Solid white is 5.02:1 worst
   case. Needs the .lm-final-cta prefix — a bare `p` selector (0,0,1) loses
   to it, so without the prefix this rule is silently overridden. */
.lm-final-cta p {
    color: #fff;
    font-size: 17px;
    margin: 0 auto 28px;
    max-width: 520px;
}

.lm-final-cta .lm-hero-ctas {
    justify-content: center;
    margin-bottom: 0;
}

/* Contrast fix (AC22): rgba(255,255,255,.72) measured 3.36:1 over the
   gradient's light end — also a real AA failure. Solid white, same 5.02:1
   floor. Needs the .lm-final-cta prefix: `.lm-final-cta p` (0,1,1) outranks
   a bare class (0,1,0) and would otherwise silently override this rule's
   font-size/margin too, collapsing the gap under the buttons to zero. */
.lm-final-cta .lm-final-microcopy {
    margin: 28px auto 0;
    font-family: var(--body-font);
    font-size: 13px;
    line-height: 1.5;
    color: #fff;
    max-width: none;
}

/* ---------- Footer ---------- */

.lm-footer {
    background: var(--ink);
    color: var(--ink-soft);
    padding: 52px 0 26px;
}

.lm-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 32px;
    margin-bottom: 32px;
}

.lm-footer-brand svg {
    height: 18px;
    margin-bottom: 12px;
}

.lm-footer-tag {
    font-family: var(--mono-font);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 0 0 12px;
}

.lm-footer-brand p {
    color: var(--ink-faint);
    font-size: 13px;
    max-width: 280px;
    margin: 0;
}

.lm-footer h5 {
    font-family: var(--mono-font);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 14px;
}

.lm-footer nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lm-footer nav a {
    font-size: 14px;
    color: var(--ink-soft);
    padding: 2px 0;
}

.lm-footer nav a:hover {
    color: #fff;
}

.lm-footer-legal {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 20px;
    font-size: 12px;
    color: var(--ink-faint);
    margin: 0;
}

/* ---------- Scroll reveal (AC24/AC33) ----------
   Visible by default — content must never be permanently hidden.
   marketing-landing.js opts individual below-the-fold sections into
   .lm-reveal-hidden at load time, purely as a decorative fade-in; it always
   has a fallback timer that removes the class regardless of scroll/observer
   state (AC33), scheduled BEFORE anything is hidden so it fires even if the
   IntersectionObserver setup throws. */
.lm-reveal {
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.lm-reveal.lm-reveal-hidden {
    opacity: 0;
    transform: translateY(16px);
}

.lm-marketing.lm-reduced-motion .lm-reveal.lm-reveal-hidden {
    opacity: 1;
    transform: none;
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .lm-marketing * {
        animation: none !important;
        transition: none !important;
    }

    .lm-marketing .lm-reveal.lm-reveal-hidden {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
    .lm-container {
        padding: 0 24px;
    }

    .lm-header-inner {
        padding: 12px 24px;
        gap: 16px;
    }

    .lm-nav {
        display: none;
    }

    .lm-hero {
        padding: 56px 0 44px;
    }

    .lm-hero h1 {
        font-size: 36px;
    }

    .lm-section {
        padding: 64px 0;
    }

    .lm-section-head h2 {
        font-size: 28px;
    }

    .lm-footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 540px) {
    .lm-container {
        padding: 0 18px;
    }

    .lm-header-inner {
        padding: 10px 18px;
    }

    .lm-logo-tag {
        display: none;
    }

    .lm-hero h1 {
        font-size: 28px;
    }

    .lm-hero-ctas,
    .lm-final-cta .lm-hero-ctas {
        flex-direction: column;
        align-items: stretch;
    }

    .lm-btn {
        width: 100%;
    }

    .lm-footer-grid {
        grid-template-columns: 1fr;
    }

    .lm-final-cta h2 {
        font-size: 28px;
    }

    .lm-register-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}