/* landing.css — Solomon AI Landing Page
 * Design System: CDO Playbook (designer.md)
 * "Desaturated & Deep" — Cinematic NYC Editorial
 * Inherits all tokens from the brand system.
 * DO NOT hard-code colors outside :root. Use tokens only.
 */

/* ═══════════════════════════════════════════════════════════════════
   DESIGN TOKENS — Single Source of Truth (mirrors client/style.css)
   ═══════════════════════════════════════════════════════════════════ */
:root {
    /* ── Core Neutrals (Paper / Ink) ───────────────────────────── */
    --c-paper-50:  #FAFAF9;
    --c-paper-100: #F5F5F4;
    --c-surface-0: #FFFFFF;
    --c-ink-950:   #0B0F1A;
    --c-ink-900:   #141821;
    --c-ink-800:   #1F2430;
    --c-ink-700:   #2B3242;
    --c-ink-500:   #667085;
    --c-ink-300:   #AAB2C5;
    --c-border:    rgba(20, 24, 33, 0.10);
    --c-border-2:  rgba(20, 24, 33, 0.18);

    /* ── Accent (Antique Gold / Bronze) ────────────────────────── */
    --c-gold-700:  #8B6B3E;
    --c-gold-600:  #B5884A;
    --c-gold-200:  #E7DCC9;
    --c-gold-100:  #F1EAE0;

    /* ── Status (Muted — no neon) ───────────────────────────────── */
    --c-success:   #0F766E;
    --c-warning:   #A16207;
    --c-error:     #991B1B;

    /* ── Navy Depth Tones ─────────────────────────────────────── */
    --c-ink-850:   #171D2C;
    --c-blue-mid:  #1E2D4A;
    --c-blue-deep: #131929;

    /* ── Cinematic overlay ──────────────────────────────────────── */
    --c-overlay:        #0F172A;
    --overlay-hero:     0.88;
    --overlay-section:  0.78;

    /* ── Aliases ────────────────────────────────────────────────── */
    --bg-paper:          var(--c-paper-50);
    --bg-surface:        var(--c-surface-0);
    --ink-black:         var(--c-ink-950);
    --ink-navy:          var(--c-ink-700);
    --ink-muted:         var(--c-ink-500);
    --accent-gold:       var(--c-gold-600);
    --accent-gold-light: var(--c-gold-200);
    --border-hairline:   var(--c-border);
    --status-success:    var(--c-success);
    --status-error:      var(--c-error);

    /* ── Typography ─────────────────────────────────────────────── */
    /* Alternative hosted fonts: "Libre Baskerville" (heading), "Inter" (body) */
    --font-heading: Georgia, "Times New Roman", serif;
    --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-label:   var(--font-body);
    --font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    --text-xs:  clamp(11px, 0.72vw, 12px);
    --text-sm:  clamp(13px, 0.85vw, 14px);
    --text-md:  clamp(15px, 1.05vw, 16px);
    --text-lg:  clamp(18px, 1.35vw, 20px);
    --text-xl:  clamp(22px, 1.8vw, 26px);
    --text-2xl: clamp(28px, 2.6vw, 36px);
    --text-3xl: clamp(36px, 3.6vw, 48px);

    --lh-tight: 1.1;
    --lh-body:  1.8;
    --ls-tight: -0.03em;
    --ls-label:  0.08em;

    /* ── Spacing (4px base) ─────────────────────────────────────── */
    --s-1: 4px;  --s-2: 8px;   --s-3: 12px; --s-4: 16px;
    --s-5: 20px; --s-6: 24px;  --s-7: 32px; --s-8: 40px;
    --s-9: 48px; --s-10: 64px; --s-11: 80px; --s-12: 96px; --s-13: 120px;

    /* ── Radius: Sharp & Premium ────────────────────────────────── */
    --r-1: 2px;
    --r-2: 4px;
    --r-3: 6px;

    /* ── Shadows (navy-tinted) ──────────────────────────────────── */
    --sh-1: 0 10px 40px -10px rgba(15, 23, 42, 0.10);
    --sh-2: 0 18px 60px -18px rgba(15, 23, 42, 0.18);
    --sh-3: 0 24px 80px -20px rgba(15, 23, 42, 0.24);
    --focus: 0 0 0 3px rgba(176, 141, 85, 0.25);

    /* ── Motion ─────────────────────────────────────────────────── */
    --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
    --t-fast: 160ms;
    --t-med:  320ms;
    --t-slow: 560ms;
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px; /* account for sticky nav */
}

body {
    font-family: var(--font-body);
    font-size: var(--text-md);
    line-height: var(--lh-body);
    color: var(--ink-black);
    background: var(--bg-paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-tight);
    color: var(--c-ink-800);
}

a {
    color: var(--accent-gold);
    text-decoration: none;
    transition: color var(--t-fast) var(--ease-out);
}
a:hover { text-decoration: underline; }

img { display: block; max-width: 100%; }

/* ═══════════════════════════════════════════════════════════════════
   LAYOUT PRIMITIVES
   ═══════════════════════════════════════════════════════════════════ */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--s-7);
}

/* Generic section wrapper — vertical breathing room */
.section {
    padding: var(--s-13) 0;
}
@media (max-width: 768px) {
    .section { padding: var(--s-10) 0; }
}

.section--paper   { background: linear-gradient(180deg, var(--bg-paper) 0%, #F3F2F0 100%); }
.section--surface { background: linear-gradient(180deg, var(--bg-surface) 0%, var(--c-paper-50) 100%); border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); }
.section--dark    { background: var(--c-ink-950); }

/* ── Label (uppercase editorial tag) ───────────────────────────── */
.label {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink-muted);
}

/* ── Section header ─────────────────────────────────────────────── */
.section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--s-11);
}
.section-eyebrow {
    display: block;
    margin-bottom: var(--s-3);
    color: var(--c-gold-700);
}
.section-eyebrow--gold { color: var(--accent-gold); }

.section-title {
    font-size: var(--text-2xl);
    font-weight: 700;
    margin-bottom: var(--s-5);
    color: var(--c-ink-800);
}
.section-title--light { color: var(--c-paper-50); }

.section-body {
    font-size: var(--text-md);
    color: var(--ink-muted);
    line-height: var(--lh-body);
    max-width: 560px;
    margin: 0 auto;
}
.section-body--light { color: var(--c-ink-300); max-width: 560px; margin: 0 auto; }

/* Split section header (left text + right text) */
.section-header--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-10);
    align-items: start;
    text-align: left;
    max-width: 100%;
    margin: 0 auto var(--s-11);
}
.section-header--split .section-title { margin-bottom: 0; }
.section-header--split .section-body  { margin: 0; max-width: none; }
@media (max-width: 768px) {
    .section-header--split { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* ═══════════════════════════════════════════════════════════════════
   BUTTONS — designer.md 5.2
   ═══════════════════════════════════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: 14px 28px;
    border-radius: var(--r-1);
    border: 1px solid transparent;
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition:
        transform var(--t-med) var(--ease-out),
        box-shadow var(--t-med) var(--ease-out),
        background var(--t-med) var(--ease-out),
        color var(--t-med) var(--ease-out),
        border-color var(--t-med) var(--ease-out);
}

.btn--sm  { padding: 10px 20px; font-size: 10px; }
.btn--lg  { padding: 16px 32px; }
.btn--xl  { padding: 18px 40px; font-size: var(--text-xs); }
.btn--full { width: 100%; }

.btn--primary {
    background: var(--ink-black);
    color: var(--bg-surface);
    box-shadow: var(--sh-1);
}
.btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--sh-2);
    background: var(--c-ink-900);
    text-decoration: none;
    color: var(--bg-surface);
}

.btn--accent {
    background: var(--accent-gold);
    color: var(--c-ink-950);
}
.btn s {
    opacity: 0.6;
    text-decoration: line-through;
    text-decoration-color: var(--c-danger, #e74c3c);
    text-decoration-thickness: 2px;
    margin-right: 2px;
}
.btn--accent:hover {
    transform: translateY(-1px);
    background: var(--c-gold-700);
    color: var(--bg-surface);
    text-decoration: none;
}

.btn--ghost {
    background: transparent;
    color: var(--ink-black);
    border-color: var(--c-border-2);
}
.btn--ghost:hover {
    background: rgba(176, 141, 85, 0.08);
    border-color: rgba(176, 141, 85, 0.30);
    text-decoration: none;
    color: var(--ink-black);
}

/* Ghost on dark backgrounds */
.btn--ghost-light {
    background: transparent;
    color: rgba(250, 250, 249, 0.85);
    border-color: rgba(250, 250, 249, 0.25);
}
.btn--ghost-light:hover {
    background: rgba(250, 250, 249, 0.08);
    border-color: rgba(250, 250, 249, 0.45);
    color: var(--c-paper-50);
    text-decoration: none;
}

.btn:focus-visible { box-shadow: var(--focus); outline: none; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ═══════════════════════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════════════════════ */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--c-border);
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    font-weight: 600;
}
.badge--gold {
    background: rgba(176, 141, 85, 0.15);
    color: var(--c-gold-200);
    border-color: rgba(176, 141, 85, 0.30);
}

/* ═══════════════════════════════════════════════════════════════════
   CINEMATIC IMAGE TREATMENT — designer.md 4
   ═══════════════════════════════════════════════════════════════════ */
.bg-cinematic {
    position: relative;
    background-size: cover;
    background-position: center;
    /* Fallback: if no background-image is set, use a deep ink gradient */
    background-color: var(--c-ink-950);
    background-image:
        radial-gradient(
            ellipse 80% 60% at 50% 0%,
            var(--c-blue-mid) 0%,
            var(--c-blue-deep) 40%,
            var(--c-ink-950) 100%
        );
    overflow: hidden;
}

/* Film grain layer */
.bg-cinematic::before {
    content: "";
    position: absolute;
    inset: -20%;
    background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 3px 3px;
    opacity: 0.12;
    transform: rotate(2deg);
    pointer-events: none;
    z-index: 1;
}

/* Overlay gradient — navy over the image */
.bg-cinematic::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(10, 14, 26, 0.82),
        rgba(15, 23, 42, 0.75)
    );
    pointer-events: none;
    z-index: 2;
}

.bg-cinematic > * {
    position: relative;
    z-index: 3;
}

/* ── Image editorial filter (desaturated cinematic tone) ─────────── */
.img-editorial {
    filter: saturate(0.78) contrast(1.12) brightness(0.92);
}

/* ═══════════════════════════════════════════════════════════════════
   NAVIGATION — editorial masthead
   ═══════════════════════════════════════════════════════════════════ */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: linear-gradient(180deg, var(--c-blue-deep) 0%, var(--c-ink-950) 100%);
    border-bottom: 1px solid rgba(176, 141, 85, 0.20);
    transition: box-shadow var(--t-fast) var(--ease-out);
}
.site-nav.scrolled {
    box-shadow: 0 2px 24px rgba(15, 23, 42, 0.32);
    border-bottom-color: rgba(176, 141, 85, 0.35);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--s-7);
    height: 68px;
    display: flex;
    align-items: center;
    gap: var(--s-7);
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    text-decoration: none;
    flex-shrink: 0;
}
.nav-logo:hover { text-decoration: none; }

.nav-logo-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--accent-gold);
    color: var(--c-ink-950);
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    border-radius: var(--r-1);
    flex-shrink: 0;
}
.nav-logo-text {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    color: var(--bg-surface);
    letter-spacing: -0.02em;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
}
.nav-link {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    font-weight: 500;
    color: var(--c-ink-300);
    padding: var(--s-2) var(--s-4);
    border-bottom: 2px solid transparent;
    text-decoration: none;
    transition: color var(--t-fast), border-color var(--t-fast);
}
.nav-link:hover {
    color: var(--bg-surface);
    text-decoration: none;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex-shrink: 0;
}
/* Ghost button style inside dark nav */
.nav-actions .btn--ghost {
    color: var(--c-ink-300);
    border-color: rgba(255, 255, 255, 0.15);
}
.nav-actions .btn--ghost:hover {
    color: var(--bg-surface);
    border-color: rgba(255, 255, 255, 0.35);
    background: transparent;
}

/* Mobile toggle — hidden on desktop */
.nav-mobile-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    margin-left: auto;
}
.nav-mobile-toggle span {
    display: block;
    height: 1.5px;
    background: var(--c-ink-300);
    border-radius: 1px;
    transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast);
}

/* Mobile drawer */
.nav-mobile-drawer {
    display: none;
    flex-direction: column;
    background: linear-gradient(180deg, #111827 0%, var(--c-ink-900) 100%);
    border-top: 1px solid rgba(176, 141, 85, 0.15);
    padding: var(--s-5) var(--s-7) var(--s-7);
    gap: var(--s-2);
}
.nav-mobile-link {
    font-family: var(--font-label);
    font-size: var(--text-sm);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--c-ink-300);
    padding: var(--s-3) 0;
    text-decoration: none;
    border-bottom: 1px solid var(--c-border);
}
.nav-mobile-link:hover { color: var(--bg-surface); text-decoration: none; }
.nav-mobile-actions {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    margin-top: var(--s-5);
}

@media (max-width: 900px) {
    .nav-links, .nav-actions { display: none; }
    .nav-mobile-toggle { display: flex; }
    .nav-mobile-drawer.open { display: flex; }
}

/* ═══════════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════════ */
.hero {
    min-height: min(92vh, 900px);
    display: flex;
    align-items: center;
    padding: var(--s-12) 0 var(--s-11);
    background-image: url('assets/hero-cityscape.webp');
}

/* Subtle animated grid lines — pure CSS, no JS */
.hero-grid-overlay {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(176, 141, 85, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(176, 141, 85, 0.03) 1px, transparent 1px);
    background-size: 80px 80px;
    z-index: 2;
    pointer-events: none;
}

.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--s-7);
    max-width: 860px;
    width: 100%;
    /* Allow left alignment on the grid */
    margin-left: auto;
    margin-right: auto;
}

/* Eyebrow row: badge + line + text */
.hero-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    margin-bottom: var(--s-7);
    animation: fadeInUp var(--t-slow) var(--ease-out) both;
}
.hero-eyebrow-line {
    width: 40px;
    height: 1px;
    background: rgba(176, 141, 85, 0.45);
    flex-shrink: 0;
}
.hero-eyebrow-text {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--c-ink-300);
}

/* Main headline — Playfair, large, italic em */
.hero-headline {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: var(--ls-tight);
    line-height: 1.05;
    color: var(--c-paper-50);
    margin-bottom: var(--s-7);
    animation: fadeInUp var(--t-slow) var(--ease-out) 80ms both;
}
.hero-headline em {
    font-style: italic;
    color: var(--accent-gold);
}

/* Sub-headline */
.hero-subheadline {
    font-size: var(--text-md);
    line-height: 1.75;
    color: var(--c-ink-300);
    max-width: 640px;
    margin-bottom: var(--s-8);
    animation: fadeInUp var(--t-slow) var(--ease-out) 160ms both;
}

/* CTA row */
.hero-actions {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    flex-wrap: wrap;
    margin-bottom: var(--s-11);
    animation: fadeInUp var(--t-slow) var(--ease-out) 240ms both;
}

/* Proof row — 4 stats in a horizontal strip */
.hero-proof-row {
    display: flex;
    align-items: center;
    gap: 0;
    padding: var(--s-6) var(--s-7);
    border: 1px solid rgba(176, 141, 85, 0.18);
    border-radius: var(--r-2);
    background: rgba(30, 45, 74, 0.18);
    backdrop-filter: blur(4px);
    animation: fadeInUp var(--t-slow) var(--ease-out) 320ms both;
}
.hero-proof-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    padding: 0 var(--s-6);
}
.hero-proof-item:first-child { padding-left: 0; }
.hero-proof-item:last-child { padding-right: 0; }

.hero-proof-number {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--c-paper-50);
    line-height: 1;
}
.hero-proof-plus,
.hero-proof-unit {
    font-size: var(--text-md);
    color: var(--accent-gold);
}
.hero-proof-msrp {
    font-size: var(--text-md);
    opacity: 0.5;
    text-decoration: line-through;
    text-decoration-color: var(--c-danger, #e74c3c);
    text-decoration-thickness: 2px;
    margin-right: 4px;
}
.hero-proof-label {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-ink-500);
}
.hero-proof-divider {
    width: 1px;
    height: 40px;
    background: rgba(176, 141, 85, 0.18);
    flex-shrink: 0;
}

/* Scroll indicator */
.hero-scroll {
    position: absolute;
    bottom: var(--s-7);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    animation: scrollPulse 2.4s var(--ease-inout) infinite;
}
.hero-scroll-line {
    width: 1px;
    height: 48px;
    background: linear-gradient(
        to bottom,
        rgba(176, 141, 85, 0.6),
        transparent
    );
    margin: 0 auto;
}

@media (max-width: 768px) {
    .hero {
        min-height: auto;
        padding: var(--s-10) 0;
        background-image: url('assets/hero-cityscape-mobile.webp');
    }
    .hero-proof-row {
        flex-wrap: wrap;
        gap: var(--s-4);
    }
    .hero-proof-item { flex: 1 1 40%; padding: 0; }
    .hero-proof-divider { display: none; }
    .hero-scroll { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   HOW IT WORKS — 3-step grid
   ═══════════════════════════════════════════════════════════════════ */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-6);
    margin-bottom: var(--s-10);
}
@media (max-width: 900px) {
    .steps-grid { grid-template-columns: 1fr; max-width: 540px; margin-left: auto; margin-right: auto; }
}

.step-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-hairline);
    border-radius: var(--r-2);
    box-shadow: var(--sh-1);
    padding: var(--s-7);
    position: relative;
    overflow: hidden;
    transition: border-color var(--t-med) var(--ease-out);
}
.step-card:hover {
    border-color: rgba(181, 136, 74, 0.35);
}

.step-number {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--accent-gold);
    font-weight: 500;
    margin-bottom: var(--s-5);
}

.step-icon-wrap {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-gold-100);
    border-radius: var(--r-2);
    border: 1px solid var(--c-gold-200);
    color: var(--c-gold-700);
    margin-bottom: var(--s-5);
    transition: background var(--t-fast), border-color var(--t-fast);
}
.step-card:hover .step-icon-wrap {
    background: var(--c-gold-200);
    border-color: var(--accent-gold);
}

.step-title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--s-4);
    color: var(--c-ink-800);
}

.step-body {
    font-size: var(--text-sm);
    line-height: var(--lh-body);
    color: var(--ink-muted);
}

/* Step card top image */
.step-card-image {
    display: block;
    width: calc(100% + var(--s-7) * 2);
    height: 200px;
    object-fit: cover;
    object-position: center;
    border-radius: var(--r-2) var(--r-2) 0 0;
    margin: calc(-1 * var(--s-7)) calc(-1 * var(--s-7)) var(--s-5) calc(-1 * var(--s-7));
}

/* CTA row below steps */
.hiw-cta-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-4);
}
.hiw-cta-note {
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

/* ═══════════════════════════════════════════════════════════════════
   FEATURES GRID
   ═══════════════════════════════════════════════════════════════════ */
.features-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--s-5);
}
/* 5-card layout: first 3 span 2 cols each (full row), last 2 centered */
.features-grid .feature-card:nth-child(-n+3) {
    grid-column: span 2;
}
.features-grid .feature-card:nth-child(4) {
    grid-column: 2 / span 2;
}
.features-grid .feature-card:nth-child(5) {
    grid-column: 4 / span 2;
}
@media (max-width: 1100px) {
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .features-grid .feature-card:nth-child(-n+3),
    .features-grid .feature-card:nth-child(4),
    .features-grid .feature-card:nth-child(5) { grid-column: span 1; }
}
@media (max-width: 600px) {
    .features-grid { grid-template-columns: 1fr; }
}

.feature-card {
    padding: var(--s-7);
    border-radius: var(--r-2);
    border: 1px solid var(--border-hairline);
    background: var(--bg-surface);
    box-shadow: var(--sh-1);
    transition: border-color var(--t-med) var(--ease-out);
}
.feature-card:hover {
    border-color: rgba(181, 136, 74, 0.35);
}

.feature-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-paper-100);
    border-radius: var(--r-2);
    border: 1px solid var(--border-hairline);
    color: var(--c-gold-700);
    margin-bottom: var(--s-5);
}

.feature-title {
    font-family: var(--font-heading);
    font-size: var(--text-md);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: var(--s-3);
    color: var(--c-ink-800);
}

.feature-body {
    font-size: var(--text-sm);
    line-height: var(--lh-body);
    color: var(--ink-muted);
}

.link-gold {
    color: var(--accent-gold);
}
.link-gold:hover { color: var(--c-gold-700); }

/* ═══════════════════════════════════════════════════════════════════
   PRICING
   ═══════════════════════════════════════════════════════════════════ */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-6);
    align-items: start;
}
@media (max-width: 900px) {
    .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}

.pricing-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-hairline);
    border-radius: var(--r-2);
    box-shadow: var(--sh-1);
    padding: var(--s-8);
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
    position: relative;
}

.pricing-card--featured {
    border-color: rgba(181, 136, 74, 0.45);
    box-shadow: 0 0 0 1px rgba(181, 136, 74, 0.25), var(--sh-2);
    /* Slight scale up */
    transform: scale(1.02);
}
@media (max-width: 900px) {
    .pricing-card--featured { transform: none; }
}

.pricing-featured-ribbon {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-gold);
    color: var(--c-ink-950);
    padding: 4px 16px;
    border-radius: 0 0 var(--r-2) var(--r-2);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pricing-tier-badge {
    color: var(--c-gold-700);
    font-size: 10px;
}

.pricing-price {
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
}
.pricing-msrp {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--ink-muted);
    text-decoration: line-through;
    text-decoration-color: var(--c-danger, #c0392b);
    text-decoration-thickness: 2px;
    opacity: 0.6;
}
.pricing-from {
    font-size: var(--text-sm);
    color: var(--ink-muted);
}
.pricing-amount {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--c-ink-800);
    line-height: 1;
}
.pricing-per {
    font-size: var(--text-sm);
    color: var(--ink-muted);
}
.pricing-discount-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #b45309;
    background: #fef3c7;
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: var(--s-2);
}
.pricing-card--featured .pricing-discount-tag {
    color: #fff;
    background: var(--c-accent, #c8a961);
}

.pricing-desc {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    line-height: var(--lh-body);
    padding-bottom: var(--s-4);
    border-bottom: 1px solid var(--border-hairline);
}

.pricing-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    flex: 1;
}

.pricing-feature {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    font-size: var(--text-sm);
    color: var(--ink-muted);
}
.pricing-feature::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
    border-radius: 999px;
}
.pricing-feature--yes {
    color: var(--c-ink-700);
}
.pricing-feature--yes::before {
    background: var(--c-success);
    /* Checkmark via SVG encoded in CSS */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px;
}
.pricing-feature--no {
    opacity: 0.45;
}
.pricing-feature--no::before {
    background: var(--c-ink-300);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 8px;
}

.pricing-note {
    font-size: 11px;
    color: var(--ink-muted);
    text-align: center;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════
   TESTIMONIALS
   ═══════════════════════════════════════════════════════════════════ */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-6);
}
@media (max-width: 900px) {
    .testimonials-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
}

.testimonial-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-hairline);
    border-radius: var(--r-2);
    box-shadow: var(--sh-1);
    padding: var(--s-7);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--s-6);
}

.testimonial-quote-mark {
    font-family: var(--font-heading);
    font-size: 64px;
    line-height: 0.6;
    color: var(--c-gold-200);
    height: 32px;
    display: block;
    user-select: none;
}

.testimonial-text {
    font-size: var(--text-md);
    line-height: var(--lh-body);
    color: var(--c-ink-700);
    flex: 1;
    font-style: italic;
}

.testimonial-footer {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding-top: var(--s-5);
    border-top: 1px solid var(--border-hairline);
}

.testimonial-author-info {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}
.testimonial-author {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--c-ink-800);
}
.testimonial-location {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
}


/* ═══════════════════════════════════════════════════════════════════
   FINAL CTA SECTION
   ═══════════════════════════════════════════════════════════════════ */
.cta-section {
    padding: var(--s-12) 0;
    background-image: url('assets/cta-boardroom.webp');
}
.cta-inner {
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
}
.cta-headline {
    font-size: var(--text-2xl);
    margin-bottom: var(--s-5);
}
.cta-body {
    margin-bottom: var(--s-8);
}
.cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-4);
    flex-wrap: wrap;
    margin-bottom: var(--s-6);
}
.cta-reassurance {
    font-family: var(--font-label);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-ink-500);
}

/* ═══════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════ */
.site-footer {
    background: linear-gradient(180deg, var(--c-ink-850) 0%, var(--c-ink-950) 60%);
    border-top: 2px solid rgba(176, 141, 85, 0.20);
    padding: var(--s-11) 0 var(--s-8);
}

.footer-top {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--s-10);
    margin-bottom: var(--s-10);
    padding-bottom: var(--s-10);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
@media (max-width: 768px) {
    .footer-top { grid-template-columns: 1fr; gap: var(--s-8); }
}

.footer-brand { display: flex; flex-direction: column; gap: var(--s-4); }
.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    text-decoration: none;
}
.footer-logo:hover { text-decoration: none; }
.footer-brand-desc {
    font-size: var(--text-sm);
    color: var(--c-ink-500);
    line-height: 1.7;
}

.footer-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-7);
}
@media (max-width: 600px) {
    .footer-nav { grid-template-columns: 1fr 1fr; }
}

.footer-nav-col { display: flex; flex-direction: column; gap: var(--s-3); }
.footer-nav-heading {
    color: var(--c-ink-500);
    margin-bottom: var(--s-2);
}
.footer-nav-link {
    font-size: var(--text-sm);
    color: var(--c-ink-300);
    text-decoration: none;
    transition: color var(--t-fast);
}
.footer-nav-link:hover { color: var(--accent-gold); text-decoration: none; }

.footer-bottom {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-6);
    flex-wrap: wrap;
}
.footer-legal {
    font-size: 11px;
    color: var(--c-ink-500);
    max-width: 620px;
    line-height: 1.7;
}
.footer-badges {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex-shrink: 0;
}
.footer-badge {
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    padding: 4px 10px;
    border: 1px solid rgba(176, 141, 85, 0.22);
    border-radius: var(--r-1);
    color: var(--c-ink-300);
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE IMAGE OVERRIDES
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .cta-section { background-image: url('assets/cta-boardroom-mobile.webp'); }
    .step-card-image { height: 180px; }
}

/* ═══════════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════════ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scrollPulse {
    0%, 100% { opacity: 0.3; transform: translateX(-50%) scaleY(0.8); }
    50%       { opacity: 0.8; transform: translateX(-50%) scaleY(1); }
}

/* Scroll-triggered entrance animation — applied via JS IntersectionObserver */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity var(--t-slow) var(--ease-out),
        transform var(--t-slow) var(--ease-out);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal--delay-1 { transition-delay: 80ms; }
.reveal--delay-2 { transition-delay: 160ms; }
.reveal--delay-3 { transition-delay: 240ms; }
.reveal--delay-4 { transition-delay: 320ms; }

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

:focus-visible {
    outline: none;
    box-shadow: var(--focus);
}