:root {
    --bg-primary: #0b0f19;
    --bg-secondary: #111827;
    --bg-card: rgba(17, 24, 39, 0.75);
    --border-color: rgba(255, 255, 255, 0.08);
    --border-focus: rgba(99, 102, 241, 0.5);
    
    --text-primary: #f9fafb;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;
    
    --accent-primary: #6366f1;
    --accent-hover: #4f46e5;
    --accent-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    
    --success: #10b981;
    --danger: #ef4444;
    
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Outfit', 'Inter', sans-serif;
    
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    
    --shadow-card: 0 20px 40px -15px rgba(0, 0, 0, 0.5), 0 0 1px 1px rgba(255, 255, 255, 0.05);
}

/* CHG-WEB-004 / PHASE 2C: extended presentation-foundation tokens for the
   Homepage reference prototype — additive only, built around the existing
   brand anchors above (bg-primary / accent-primary / accent-hover /
   accent-gradient / text-primary), which are never redefined here. Used
   exclusively by the new site-header/hero/marketing-section/site-footer
   rules further down; every existing Demo/business/content rule keeps
   using the original tokens untouched. */
:root {
    --surface-1: #10141f;
    --surface-2: #151b2b;
    --hairline: rgba(255, 255, 255, 0.07);
    --hairline-strong: rgba(255, 255, 255, 0.16);

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    --container-max: 1240px;
    --content-max: 640px;

    --text-display: clamp(2.5rem, 2rem + 2.2vw, 3.75rem);
    --text-h2: clamp(1.5rem, 1.32rem + 0.8vw, 2rem);
    --text-body-lg: 1.15rem;
    --text-small: 0.9rem;
    --text-meta: 0.8rem;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    line-height: 1.6;
    overflow-x: hidden;
    background-image: 
        radial-gradient(circle at 15% 20%, rgba(99, 102, 241, 0.12) 0%, transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(168, 85, 247, 0.12) 0%, transparent 40%);
}

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

/* DESIGN-FIX-001: skip-link, shared by index.html and business/index.html —
   same pattern already shipping on business/how-it-works/how-it-works.css,
   reused here (not reinvented) so all three public pages behave identically
   for keyboard users. Hidden until focused; the target anchor already
   exists on each page (#mainContent / #b2bMain). */
.skip-link {
    position: absolute;
    top: -48px;
    left: 12px;
    z-index: 100;
    background: var(--accent-primary);
    color: #ffffff;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: top 0.2s ease;
}

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

@media (prefers-reduced-motion: reduce) {
    .skip-link {
        transition: none;
    }
}

.app-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 20px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    margin-bottom: 40px;
}

.logo-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--accent-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.logo-text {
    display: flex;
    align-items: center;
    gap: 6px;
}

.brand-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    background: linear-gradient(180deg, #ffffff 0%, #d1d5db 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.brand-tag {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(99, 102, 241, 0.2);
    color: var(--accent-primary);
    border: 1px solid rgba(99, 102, 241, 0.3);
}

/* B2B-LANDING-001: header link to the corporate page — additive only. */
.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* B2B-MANIFEST-001-FIX-01: the visual treatment now comes entirely from
   the existing .btn-secondary component (applied alongside this class in
   index.html) — this rule only adds what an <a> needs that a <button>
   already gets for free, so the two classes compose cleanly instead of
   fighting over color/padding/radius/font/transition. */
.business-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    white-space: nowrap;
}

.business-link:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

.lang-select {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
}

.lang-select:hover, .lang-select:focus {
    border-color: var(--border-focus);
}

/* Hero Section */
.hero-section {
    text-align: center;
    margin-bottom: 40px;
}

/* CHG-UI-001: small brand overline above the H1 — replaces the former
   "Demo MVP" pill badge. Same class selector kept free of the old pill
   chrome (no background/border) so it reads as a quiet kicker, not a tag. */
.hero-overline {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #c084fc;
    margin-bottom: 16px;
}

.hero-section h1 {
    font-family: var(--font-heading);
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 28px;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

/* CHG-UI-001: the Insight -> Matrix -> Movement narrative. Deliberately NOT
   three separate .card boxes — a single flowing reveal, each step marked
   only by a small numbered label, connected by a thin rule so the eye reads
   top-to-bottom as one continuous thought rather than three modules. */
.hero-narrative {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 620px;
    margin: 0 auto;
    text-align: left;
    counter-reset: narrative-step;
}

.narrative-step {
    padding-left: 20px;
    border-left: 2px solid rgba(168, 85, 247, 0.35);
    counter-increment: narrative-step;
}

.narrative-step-label {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.narrative-step-label::before {
    content: counter(narrative-step, decimal-leading-zero) " — ";
    color: #c084fc;
}

.narrative-step-body {
    color: var(--text-primary);
    font-size: 1.02rem;
    line-height: 1.55;
}

/* Cards & Workspace */
.workspace-section {
    flex: 1;
}

.chatgpt-hint {
    margin-top: 16px;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
}

.card {
    background: var(--bg-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-card);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.card-header {
    margin-bottom: 24px;
}

.card-header h2 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.subtitle {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.situation-textarea {
    width: 100%;
    background: rgba(11, 15, 25, 0.6);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.5;
    resize: vertical;
    outline: none;
    transition: all 0.2s ease;
}

.situation-textarea:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
}

.form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    gap: 16px;
    flex-wrap: wrap;
}

.tip-box {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.btn-primary {
    background: var(--accent-gradient);
    color: #ffffff;
    border: none;
    padding: 12px 28px;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);
}

.btn-primary:active {
    transform: translateY(0);
}

/* DESIGN-FIX-001: previously only the inner text span dimmed during
   loading (via inline opacity in app.js) — the button itself kept its full
   gradient/shadow and default cursor, so a disabled submit/answer/confirm
   button still read as clickable. This rule wins over :hover/:active above
   by source order (equal specificity), matching the :disabled pattern
   already used for .b2b-cta-btn / .hiw-final-btn elsewhere in this project. */
.btn-primary:disabled,
.btn-primary:disabled:hover,
.btn-primary:disabled:active {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* SITE-DESIGN-FIX-001-ACCESSIBILITY-FIX (M-1): --border-focus at 0.5 alpha
   composites to ~1.9:1 against the dark surfaces these two buttons render
   on (page background and .card), under WCAG 1.4.11's 3:1 non-text-contrast
   guideline. Scoped to .btn-primary/.btn-secondary only — reuses the
   existing opaque --accent-primary token (already used elsewhere for these
   same buttons' own fill/badges) rather than editing --border-focus, which
   is shared by other already-shipped focus rings (.business-link,
   .hiw-nav-link, etc.) not covered by this fix's authorized scope. */
.btn-primary:focus-visible,
.btn-secondary:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Dialog Card / Active State */
.dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 24px;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--success);
    box-shadow: 0 0 10px var(--success);
}

.status-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--success);
}

.context-box {
    background: rgba(11, 15, 25, 0.5);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 24px;
}

.context-box h3 {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.context-text {
    font-size: 1.05rem;
    white-space: pre-wrap;
}

.session-info {
    display: flex;
    gap: 24px;
}

.info-item {
    font-size: 0.875rem;
}

.info-label {
    color: var(--text-muted);
    margin-right: 6px;
}

.info-value {
    color: var(--text-secondary);
    font-weight: 500;
}

/* Alert */
.alert {
    padding: 14px 18px;
    border-radius: var(--radius-md);
    margin-top: 20px;
    font-size: 0.9rem;
}

.alert-danger {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.hidden {
    display: none !important;
}

/* Question & Result Box Styling */
.question-box, .retry-box, .result-box {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.step-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.question-text {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.answer-textarea {
    width: 100%;
    background: rgba(11, 15, 25, 0.6);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    line-height: 1.5;
    resize: vertical;
    outline: none;
    margin-bottom: 12px;
}

.result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
}

.result-card {
    background: rgba(11, 15, 25, 0.5);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
}

.result-card.highlight {
    grid-column: span 2;
    border-color: rgba(168, 85, 247, 0.4);
    background: rgba(168, 85, 247, 0.08);
}

.result-card.action {
    grid-column: span 2;
    border-color: rgba(16, 185, 129, 0.4);
    background: rgba(16, 185, 129, 0.08);
}

/* DESIGN-FIX-001: replaces the emoji previously used as section markers
   (🎯 👁️ ⚖️ ⚡ 💡 ❓ 🚀) with one calm, uniform CSS marker — same shape/color
   for every card, deliberately not varying by card type, so it reads as
   structure rather than decoration. */
.result-header h3::before,
.result-card h4::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 8px;
    border-radius: 1px;
    background: var(--accent-primary);
    vertical-align: middle;
}

.result-card h4 {
    font-size: 0.95rem;
    margin-bottom: 8px;
    color: #d1d5db;
}

.result-card p, .result-card ul {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.result-card ul {
    padding-left: 18px;
}

/* Footer */
.main-footer {
    text-align: center;
    padding: 24px 0 12px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Confirm / Correct / Safe Card / Referral (CHG-04-009) */
.text-warning {
    color: #fbbf24;
    font-size: 0.9rem;
}

.alert-success {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #6ee7b7;
}

.actions-box, .safe-card-panel {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.actions-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.correction-form {
    margin-top: 16px;
}

.pending-box {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.confirmed-badge {
    margin-top: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #6ee7b7;
    font-weight: 600;
    font-size: 0.9rem;
}

.panel-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 16px;
}

.card-selector-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.selector-group {
    display: flex;
}

.safe-card-display {
    margin-top: 20px;
}

.safe-card-content {
    background: rgba(11, 15, 25, 0.5);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 18px;
    margin-bottom: 12px;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.safe-card-content h4 {
    color: #d1d5db;
    font-size: 0.9rem;
    margin-top: 12px;
    margin-bottom: 4px;
}

.safe-card-content h4:first-child {
    margin-top: 0;
}

.referral-link-box {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.referral-link-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.referral-link-input {
    flex: 1;
    min-width: 200px;
    background: rgba(11, 15, 25, 0.6);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 0.85rem;
}

.btn-danger {
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.btn-danger:hover {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.4);
}

/* CHG-UI-001 legacy hook, kept for runtime meaning only: app.js still
   toggles .entry-layout on #mainContent between the plain-entry state and
   an active dialog (setEntryLayout()). CHG-WEB-004/PHASE 2C's new design
   does not key its own layout off this class any more — the hero's
   two-column composition lives in .hero-grid, unconditionally, further
   below — so this rule is intentionally minimal. Selector kept exactly as
   test_ui_contract.py's TestEntryLayoutScopedToEntryState expects. */
@media (min-width: 960px) {
    .app-container {
        max-width: 1160px;
    }
    .main-content.entry-layout {
        display: block;
    }
    .main-content.entry-layout .workspace-section {
        position: static;
    }
}

@media (max-width: 640px) {
    /* CHG-UI-001: compact vertical rhythm so the form is reachable without
       excessive scrolling on real phone heights. Only the shared/legacy
       component rules still used by business/content pages remain here —
       the homepage's own header/hero/section rhythm is defined in the
       CHG-WEB-004 responsive rules further below. */
    .app-container {
        padding-top: 16px;
    }
    .main-header {
        margin-bottom: 20px;
        flex-wrap: wrap;
        row-gap: 12px;
    }
    .header-actions {
        width: 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
    }
    .card {
        padding: 20px;
    }
    .card-header {
        margin-bottom: 14px;
    }
    .situation-textarea {
        height: 110px;
    }
    .form-footer {
        flex-direction: column;
        align-items: stretch;
    }
    .btn-primary {
        justify-content: center;
    }
    .result-grid {
        grid-template-columns: 1fr;
    }
    .result-card.highlight, .result-card.action {
        grid-column: span 1;
    }
    .actions-row, .card-selector-row, .referral-link-row {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ==========================================================================
   CHG-WEB-004 / PHASE 2C — Homepage reference prototype: new presentation
   foundation. Every selector below is new/homepage-exclusive (verified: no
   other static page references .site-*, .hero-*, .marketing-section, or
   .section--* class names) except .btn-primary, reused as-is for the new
   CTAs — its existing declaration is not touched. Mobile-first: base rules
   below target ~390px; overridden at 768px (tablet) and 1024px (desktop).
   ========================================================================== */

/* ---- Site header ---- */
.site-header {
    border-bottom: 1px solid var(--hairline);
    background: var(--bg-primary);
}

.site-header-row {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-4) var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-primary);
    text-decoration: none;
    flex-shrink: 0;
}

.site-brand-mark {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--accent-gradient);
    color: #ffffff;
}

.site-brand-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
}

.site-nav {
    display: none;
    align-items: center;
    gap: var(--space-6);
}

.site-nav-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--text-small);
    font-weight: 500;
    transition: color 0.15s ease;
}

.site-nav-link:hover,
.site-nav-link:focus-visible {
    color: var(--text-primary);
}

.site-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.site-lang-wrapper {
    display: inline-flex;
}

.site-start-btn {
    padding: 9px 20px;
    font-size: var(--text-small);
}

/* WEB-004-RESP-01/STEP-02: below 768px .site-menu-panel already carries
   its own Start CTA duplicate (.site-menu-start), so the header's own
   Start CTA is hidden here to avoid showing it twice now that
   .site-header-actions itself (the #languageSelect's ancestor) is no
   longer display:none at this width — see ISSUE-01. */
.site-header-actions .site-start-btn {
    display: none;
}

/* No-JS mobile menu: native <details>/<summary>, per task constraint that
   mobile navigation must not introduce a JS dependency. */
.site-menu {
    position: relative;
}

.site-menu-toggle {
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: 1px solid var(--hairline-strong);
    cursor: pointer;
    list-style: none;
}

.site-menu-toggle::-webkit-details-marker {
    display: none;
}

.site-menu-icon,
.site-menu-icon::before,
.site-menu-icon::after {
    display: block;
    width: 16px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
}

.site-menu-icon {
    position: relative;
}

.site-menu-icon::before,
.site-menu-icon::after {
    content: "";
    position: absolute;
    left: 0;
}

.site-menu-icon::before {
    top: -5px;
}

.site-menu-icon::after {
    top: 5px;
}

.site-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 220px;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--hairline-strong);
    background: var(--surface-1);
    box-shadow: var(--shadow-card);
}

.site-menu-link {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    text-decoration: none;
    font-size: var(--text-small);
}

.site-menu-link:hover,
.site-menu-link:focus-visible {
    background: rgba(255, 255, 255, 0.06);
}

.site-menu-start {
    margin-top: var(--space-2);
    justify-content: center;
}

@media (min-width: 768px) {
    .site-nav {
        display: flex;
    }
    .site-header-actions .site-start-btn {
        display: flex;
    }
    .site-menu {
        display: none;
    }
}

/* ---- Hero / live entry ---- */
.hero-section {
    padding: var(--space-7) var(--space-4) var(--space-6);
    text-align: left;
    margin-bottom: 0;
}

.hero-grid {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
}

.hero-copy {
    max-width: var(--content-max);
}

.hero-overline {
    margin-bottom: var(--space-3);
}

.hero-section h1 {
    font-size: var(--text-display);
    margin-bottom: var(--space-4);
}

.hero-lead {
    max-width: 46ch;
    margin: 0 0 var(--space-5);
    color: var(--text-secondary);
    font-size: var(--text-body-lg);
    line-height: 1.55;
}

.hero-cta {
    margin-bottom: var(--space-7);
}

.hero-demo {
    max-width: var(--content-max);
}

@media (min-width: 1024px) {
    .hero-section {
        padding: var(--space-9) var(--space-6) var(--space-8);
    }
    .hero-grid {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--space-9);
    }
    .hero-copy {
        flex: 1.05;
        padding-top: var(--space-2);
    }
    .hero-demo {
        flex: 0.95;
        max-width: 480px;
    }
}

/* ---- Shared marketing-section rhythm + unified left/right section
   grammar ----
   CHG-WEB-004 / PHASE 2C / STEP-02B: OWNER-approved convergence — every
   below-Hero informational section now shares one presentation rule:
   .section-split (grid, desktop only) > .section-aside (left, ~30%:
   eyebrow + heading + optional framing copy/CTA) + .section-content
   (right, ~70%: the section's actual informational payload — process,
   sequence, product row, or comparison). "Что происходит в диалоге"
   (what-happens-here) is the reference instance this system was
   generalized from — every other section below now uses the identical
   .section-split/.section-aside/.section-content markup. Mobile-first:
   aside stacks above content (DOM order already puts LEFT before RIGHT).
   Hero and Demo are untouched — see hero-section/hero-grid/hero-demo
   above, not edited in this step. */
.marketing-section {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-7) var(--space-4);
    border-top: 1px solid var(--hairline);
}

.section-inner {
    max-width: var(--content-max);
    margin: 0 auto;
}

.section-eyebrow {
    margin: 0 0 var(--space-2);
    color: var(--text-muted);
    font-family: var(--font-heading);
    font-size: var(--text-meta);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.section-heading {
    margin: 0 0 var(--space-4);
    font-family: var(--font-heading);
    font-size: var(--text-h2);
    font-weight: 600;
    line-height: 1.25;
    max-width: 30ch;
}

.section-aside .section-heading {
    max-width: 22ch;
}

.section-body,
.section-lead {
    margin: 0 0 var(--space-4);
    color: var(--text-secondary);
    font-size: var(--text-body-lg);
    line-height: 1.6;
    max-width: 56ch;
}

.section-inline-link {
    display: inline-block;
    margin-top: var(--space-2);
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--text-small);
}

.section-inline-link:hover,
.section-inline-link:focus-visible {
    color: var(--accent-hover);
}

@media (min-width: 1024px) {
    .marketing-section {
        padding: var(--space-8) var(--space-6);
    }
    .section-split {
        display: grid;
        grid-template-columns: 30% 1fr;
        gap: var(--space-9);
        align-items: start;
    }
    .section-aside {
        padding-top: var(--space-1);
    }
}

/* ---- What Happens Here (reference instance): 01-04 process ---- */
.mechanism-sequence {
    list-style: none;
    margin: var(--space-6) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.mechanism-sequence li {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-4);
    row-gap: var(--space-1);
    align-items: baseline;
}

.mechanism-step-index {
    grid-row: 1 / span 2;
    font-family: var(--font-heading);
    font-size: var(--text-meta);
    font-weight: 600;
    color: var(--text-muted);
}

.mechanism-step-label {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--text-primary);
}

.mechanism-sequence p {
    grid-column: 2;
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-small);
    line-height: 1.5;
}

@media (min-width: 1024px) {
    .mechanism-sequence {
        margin-top: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-7) var(--space-7);
    }
    .mechanism-step-index {
        font-size: 1.5rem;
        color: rgba(99, 102, 241, 0.55);
    }
}

/* ---- Insight — a deliberate emphasis, not a fourth feature card. No
   card, no icon, no glow: larger type inside the same shared content
   column is the only differentiation. ---- */
.insight-statement {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-h2);
    font-weight: 500;
    line-height: 1.35;
    color: var(--text-primary);
}

@media (min-width: 1024px) {
    .insight-statement {
        font-size: clamp(1.75rem, 1.3rem + 1.7vw, 2.5rem);
    }
}

/* ---- Product trajectory & partner stage progression: reuse the hero
   narrative's own visual grammar (accent rule + small uppercase label).
   Mobile: vertical, left-border accent (same as the hero narrative).
   Desktop: the same steps turn into a horizontal sequence inside the
   shared content column — a top-border accent line reads left-to-right
   as movement, not a stacked list. ---- */
.trajectory-sequence,
.partner-sequence {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.trajectory-sequence li,
.partner-sequence li {
    padding-left: var(--space-4);
    border-left: 2px solid rgba(168, 85, 247, 0.35);
}

.trajectory-stage,
.partner-stage {
    display: block;
    margin-bottom: var(--space-1);
    font-family: var(--font-heading);
    font-size: var(--text-meta);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.trajectory-sequence p,
.partner-sequence p {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.02rem;
    line-height: 1.5;
}

.trajectory-status {
    color: var(--accent-primary);
    font-style: normal;
    font-weight: 600;
}

@media (min-width: 1024px) {
    .trajectory-sequence,
    .partner-sequence {
        flex-direction: row;
        gap: var(--space-5);
    }
    .trajectory-sequence li,
    .partner-sequence li {
        flex: 1;
        padding-left: 0;
        padding-top: var(--space-3);
        border-left: none;
        border-top: 2px solid rgba(168, 85, 247, 0.35);
    }
}

/* ---- For Business: three products inside the shared content column,
   distinguished by hairline dividers instead of three identical boxes. ---- */
.business-product-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.business-product {
    display: block;
    padding: var(--space-4);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius-md);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease;
}

.business-product:hover,
.business-product:focus-visible {
    border-color: var(--border-focus);
}

.business-product h3 {
    margin: 0 0 var(--space-1);
    font-family: var(--font-heading);
    font-size: 1.05rem;
    color: var(--text-primary);
}

.business-product p {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-small);
    line-height: 1.5;
}

@media (min-width: 768px) {
    .business-product-list {
        flex-direction: row;
    }
    .business-product {
        flex: 1;
    }
}

@media (min-width: 1024px) {
    .business-product-list {
        gap: 0;
    }
    .business-product {
        padding: 0 var(--space-5);
        border: none;
        border-radius: 0;
    }
    .business-product:first-child {
        padding-left: 0;
    }
    .business-product:last-child {
        padding-right: 0;
    }
    .business-product:not(:first-child) {
        border-left: 1px solid var(--hairline-strong);
    }
}

/* ---- AI comparison: restrained two-part contrast inside the shared
   content column. ---- */
.ai-comparison-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ai-comparison-col {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--hairline);
}

.ai-comparison-col--brain {
    border-color: rgba(99, 102, 241, 0.35);
    background: rgba(99, 102, 241, 0.06);
}

.ai-comparison-label {
    margin: 0 0 var(--space-2);
    font-family: var(--font-heading);
    font-size: var(--text-meta);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.ai-comparison-col p + p {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-small);
    line-height: 1.55;
}

@media (min-width: 768px) {
    .ai-comparison-grid {
        flex-direction: row;
    }
    .ai-comparison-col {
        flex: 1;
    }
}

/* ---- Final entry: a close, not another mid-page block. Deliberately
   NOT converted to the split rule — a centered closing composition is
   retained per task instruction (it does not need the split to work). ---- */
.section--final .section-inner {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.final-heading {
    font-size: var(--text-h2);
    max-width: none;
}

.final-cta {
    display: inline-flex;
}

/* ---- Site footer ---- */
.site-footer {
    border-top: 1px solid var(--hairline);
    background: var(--surface-1);
}

.site-footer-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-7) var(--space-4) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.site-footer-brand {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-primary);
}

.site-footer-columns {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.site-footer-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.site-footer-heading {
    margin: 0 0 var(--space-1);
    color: var(--text-muted);
    font-family: var(--font-heading);
    font-size: var(--text-meta);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.site-footer-col a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--text-small);
}

.site-footer-col a:hover,
.site-footer-col a:focus-visible {
    color: var(--text-primary);
}

.site-footer-copyright {
    margin: 0;
    padding: var(--space-4) var(--space-4) var(--space-6);
    color: var(--text-muted);
    font-size: var(--text-meta);
    text-align: center;
    border-top: 1px solid var(--hairline);
}

@media (min-width: 768px) {
    .site-footer-columns {
        flex-direction: row;
        gap: var(--space-8);
    }
    .site-footer-col {
        min-width: 160px;
    }
}

/* ---- Motion: restrained only, respects reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
    .site-nav-link,
    .section-inline-link,
    .business-product,
    .site-menu-link {
        transition: none;
    }
}