/* ============================================================
   INLINER brand landing pages — dark editorial overrides
   Loaded after landing-styles.css / landing-pages.css and
   home-alt.css / brand-content.css. Scoped under body.ha so it
   wins over the light landing styles while keeping their layout
   (hero grid, signup forms, example cards) intact.
   ============================================================ */

/* landing-styles.css forces height: 100% which traps scrolling on body */
html { height: auto !important; min-height: 100%; overflow-y: auto; }
body.ha { height: auto !important; min-height: 100%; overflow-y: visible; }

/* ---------- hero ---------- */

body.ha .hero {
    background: var(--ink);
    border-bottom: 1px solid var(--line);
}

body.ha .hero::after {
    background: linear-gradient(180deg, rgba(15, 14, 12, 0.92), rgba(15, 14, 12, 0.86));
}

body.ha .hero h1 {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--cream);
}

body.ha .hero-subtitle { color: var(--cream-dim); }

body.ha .hero-cta .btn-outline {
    border: 1px solid var(--line-strong);
    color: var(--cream);
    font-family: var(--font-mono);
    font-size: 0.92rem;
}

body.ha .hero-cta .btn-outline:hover {
    background: rgba(240, 234, 220, 0.05);
    border-color: var(--cream-dim);
    color: var(--cream);
    box-shadow: none;
}

/* ---------- sections ---------- */

body.ha .features {
    background: var(--ink-2);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

body.ha .examples { background: transparent; }

body.ha .section-header h2 {
    font-family: var(--font-display);
    font-weight: 480;
    letter-spacing: -0.012em;
    color: var(--cream);
}

body.ha .section-header p { color: var(--cream-dim); }

/* ---------- feature rows ---------- */

body.ha .feature-content h3 {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--cream);
}

body.ha .feature-content p { color: var(--cream-dim); }

body.ha .feature-icon {
    background: rgba(125, 167, 255, 0.12);
    border: 1px solid rgba(125, 167, 255, 0.35);
    color: var(--link-bright);
}

body.ha .feature-image {
    border: 1px solid var(--line);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

/* ---------- example cards ---------- */

body.ha .example-card {
    background: var(--ink-2);
    border: 1px solid var(--line);
    box-shadow: none;
}

body.ha .example-card:hover {
    border-color: var(--line-strong);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
}

body.ha .example-card-content h4 { color: var(--cream); }
body.ha .example-card-content p { color: var(--cream-dim); }

body.ha .example-code {
    background: var(--ink);
    border: 1px solid var(--line);
}

body.ha .code-domain { color: var(--link-bright); }
body.ha .code-project { color: var(--verb); }
body.ha .code-image-path { color: var(--ok); }

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

body.ha .cta {
    background: var(--ink-2);
    border-top: 1px solid var(--line);
    position: relative;
    overflow: hidden;
}

body.ha .cta::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(640px 320px at 50% 0%, rgba(125, 167, 255, 0.12), transparent 65%);
}

body.ha .cta > .container { position: relative; }

body.ha .cta h2 {
    font-family: var(--font-display);
    font-weight: 480;
    letter-spacing: -0.012em;
    color: var(--cream);
}

body.ha .cta p { color: var(--cream-dim); }

body.ha .cta .cta-buttons .btn-outline {
    border: 1px solid var(--line-strong);
    color: var(--cream);
    font-family: var(--font-mono);
    font-size: 0.9rem;
}

body.ha .cta .cta-buttons .btn-outline:hover {
    background: rgba(240, 234, 220, 0.05);
    border-color: var(--cream-dim);
    color: var(--cream);
}

/* ---------- feature cards (grid variant) ---------- */

body.ha .feature-card {
    background: var(--ink-2);
    border: 1px solid var(--line);
    box-shadow: none;
}

body.ha .feature-card:hover {
    border-color: var(--line-strong);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
}

body.ha .feature-card h3 { color: var(--cream); font-family: var(--font-display); font-weight: 500; }
body.ha .feature-card p { color: var(--cream-dim); }

/* ---------- use-case cards ---------- */

body.ha .use-cases {
    background: var(--ink-2);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

body.ha .use-case-card {
    background: var(--ink);
    border: 1px solid var(--line);
    box-shadow: none;
}

body.ha .use-case-card:hover {
    border-color: var(--line-strong);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
}

body.ha .use-case-content h3,
body.ha .use-case-content h4 { color: var(--cream); }
body.ha .use-case-content p { color: var(--cream-dim); }

body.ha .use-case-example {
    background: var(--ink-3);
    border: 1px solid var(--line);
    color: var(--cream);
    font-family: var(--font-mono);
}

/* ---------- inline code examples block ---------- */

body.ha .code-examples {
    background: var(--ink-3);
    border: 1px solid var(--line);
    color: var(--cream);
}

body.ha .code-examples code { font-family: var(--font-mono); }

/* signup cards stay light for form legibility; soften their frame on dark */
body.ha .signup-form,
body.ha .lead-capture-form {
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(240, 234, 220, 0.16);
}