/*
 * Cluematic public homepage + website-builder section styles.
 * Layout patterns follow WeAreBrain (sticky nav, full-viewport hero,
 * section storytelling, cards, FAQ, dual panels, multi-column footer)
 * using Cluematic tokens only — no hard-coded brand hex in markup.
 */

:root {
    --color-bg: #0a0a0f;
    --color-bg-secondary: #111118;
    --color-bg-urgency: #0d0d14;
    --color-bg-footer: #080810;
    --color-accent: #ff5c00;
    --color-accent-hover: #e04e00;
    --color-accent-rgb: 255, 92, 0;
    --color-text: #ffffff;
    --color-text-secondary: #a0a0b0;
    --color-border: rgba(255, 255, 255, 0.08);
    --color-placeholder-from: #1a1a2e;
    --color-placeholder-to: #16213e;
    --cm-nav-height: 5rem;
    --cm-radius: 1rem;
    --cm-radius-full: 9999px;
    --cm-max: 80rem;
    --cm-pad-x: clamp(1.25rem, 5vw, 3rem);
}

html {
    scroll-behavior: smooth;
}

html[data-theme='dark'] {
    --app-page: var(--color-bg);
    --app-surface: var(--color-bg-secondary);
    --app-card: var(--color-bg-secondary);
    --app-border: #1c1c26;
    --app-text: var(--color-text);
    --app-muted: var(--color-text-secondary);
    --app-subtle: #7a7a8a;
    --app-faint: #555566;
    --app-dim: #d6d6e0;
    --app-accent: var(--color-accent);
    --app-accent-secondary: var(--color-accent-hover);
    --app-accent-soft: #ff8a4a;
    --app-accent-hover: var(--color-accent-hover);
}

/* ── Light-mode overrides for the public/marketing site ─────────────────── */
/* When a visitor (or logged-in user) switches to light mode the dark tokens  */
/* must be replaced so the page doesn't stay jet-black.                       */
html[data-theme='light'] {
    --color-bg:            #f8f8fc;
    --color-bg-secondary:  #ffffff;
    --color-bg-urgency:    #f0f0f8;
    --color-bg-footer:     #e8e8f0;
    --color-text:          #0a0a0f;
    --color-text-secondary:#4a4a5a;
    --color-border:        rgba(0, 0, 0, 0.08);
    --color-placeholder-from: #e0e0ee;
    --color-placeholder-to:   #d0d0e8;
    --color-accent-rgb: 255, 92, 0;
}

/* Adjust placeholder (image stand-in) text for light mode */
html[data-theme='light'] .cm-placeholder {
    color: #888898;
}

/* Nav: light bg with subtle border */
html[data-theme='light'] .cm-nav {
    background: rgba(248, 248, 252, 0.9);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
html[data-theme='light'] .cm-nav.is-scrolled {
    background: rgba(248, 248, 252, 0.97);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}
html[data-theme='light'] .cm-logo,
html[data-theme='light'] .cm-nav-links a,
html[data-theme='light'] .cm-nav-link-quiet {
    color: #0a0a0f;
}
html[data-theme='light'] .cm-overlay {
    background: color-mix(in srgb, var(--color-bg) 96%, transparent);
}

/* ── Per-section theme lock (color mode stick) ───────────────────────────── */
/* Sections can force dark/light tokens even when the site theme is the opposite. */
[data-section-theme="dark"] {
    --color-bg: #0a0a0f;
    --color-bg-secondary: #111118;
    --color-bg-urgency: #0d0d14;
    --color-bg-footer: #080810;
    --color-text: #ffffff;
    --color-text-secondary: #a0a0b0;
    --color-border: rgba(255, 255, 255, 0.08);
    --color-placeholder-from: #1a1a2e;
    --color-placeholder-to: #16213e;
    --app-page: var(--color-bg);
    --app-surface: var(--color-bg-secondary);
    --app-card: var(--color-bg-secondary);
    --app-border: #1c1c26;
    --app-text: var(--color-text);
    --app-muted: var(--color-text-secondary);
    --app-subtle: #7a7a8a;
    --app-faint: #555566;
    --app-dim: #d6d6e0;
    color: var(--color-text);
    background-color: var(--color-bg);
}
[data-section-theme="light"] {
    --color-bg: #f8f8fc;
    --color-bg-secondary: #ffffff;
    --color-bg-urgency: #f0f0f8;
    --color-bg-footer: #e8e8f0;
    --color-text: #0a0a0f;
    --color-text-secondary: #4a4a5a;
    --color-border: rgba(0, 0, 0, 0.08);
    --color-placeholder-from: #e0e0ee;
    --color-placeholder-to: #d0d0e8;
    --app-page: var(--color-bg);
    --app-surface: var(--color-bg-secondary);
    --app-card: var(--color-bg-secondary);
    --app-border: rgba(0, 0, 0, 0.08);
    --app-text: var(--color-text);
    --app-muted: var(--color-text-secondary);
    --app-subtle: #6b6b7a;
    --app-faint: #9a9aaa;
    --app-dim: #2a2a3a;
    color: var(--color-text);
    background-color: var(--color-bg);
}
[data-section-theme="dark"] .brand-logo-light { display: none !important; }
[data-section-theme="dark"] .brand-logo-dark { display: inline-block !important; }
[data-section-theme="light"] .brand-logo-light { display: inline-block !important; }
[data-section-theme="light"] .brand-logo-dark { display: none !important; }
[data-section-theme="dark"] .cm-card {
    background: var(--color-bg-secondary);
    border-color: var(--color-border);
}
[data-section-theme="light"] .cm-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}
[data-section-theme="light"] .cm-placeholder { color: #888898; }
[data-section-theme="dark"] .cm-placeholder { color: #8888aa; }

/* Cards */
html[data-theme='light'] .cm-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}
html[data-theme='light'] .cm-card:hover {
    border-color: rgba(var(--color-accent-rgb), 0.3);
}

/* FAQ accordion */
html[data-theme='light'] details {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}
html[data-theme='light'] details summary {
    color: #0a0a0f;
}
html[data-theme='light'] .cm-faq-answer {
    color: #4a4a5a;
}

/* Urgency / stats sections keep a light tint */
html[data-theme='light'] .cm-urgency {
    background: var(--color-bg-urgency);
}
html[data-theme='light'] .cm-stats {
    background: #f0f0f8;
}

/* Footer */
html[data-theme='light'] .cm-footer {
    background: var(--color-bg-footer);
    border-top-color: rgba(0, 0, 0, 0.1);
}
html[data-theme='light'] .cm-footer,
html[data-theme='light'] .cm-footer a {
    color: #3a3a4a;
}

/* Hero glow: softer on light backgrounds */
html[data-theme='light'] .hero::before {
    opacity: 0.08;
}
html[data-theme='light'] .cm-final-cta::before {
    opacity: 0.07;
}

/* Hero text colours in light mode */
html[data-theme='light'] .hero {
    background: var(--color-bg);
}
html[data-theme='light'] .cm-hero-title {
    color: var(--color-text);
}
html[data-theme='light'] .cm-hero-sub {
    color: var(--color-text-secondary);
}
html[data-theme='light'] .cm-marquee-track span {
    color: var(--color-text-secondary);
}
html[data-theme='light'] .cm-scroll-hint {
    color: var(--color-text-secondary);
}

/* Buttons stay orange regardless of theme */
html[data-theme='light'] .cm-btn {
    color: #ffffff;
}

/* Quote blocks */
html[data-theme='light'] .cm-quote {
    border-left-color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), 0.05);
}
html[data-theme='light'] .cm-quote p {
    color: var(--color-text);
}
html[data-theme='light'] .cm-quote-attr {
    color: var(--color-text-secondary);
}

/* Founder / face-behind-brand */
html[data-theme='light'] .cm-pull {
    color: var(--color-text);
}
html[data-theme='light'] .cm-text-link {
    color: var(--color-accent);
}

/* Fit-check panels */
html[data-theme='light'] .cm-fit-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}
html[data-theme='light'] .cm-fit-card li {
    color: var(--color-text-secondary);
}
html[data-theme='light'] .cm-fit-card h3 {
    color: var(--color-text);
}

/* Stats bar */
html[data-theme='light'] .cm-stat-value {
    color: var(--color-accent);
}
html[data-theme='light'] .cm-stat-label {
    color: var(--color-text-secondary);
}
html[data-theme='light'] .cm-stats-note {
    color: var(--color-text-secondary);
}

/* Step numbers */
html[data-theme='light'] .cm-step-num {
    color: var(--color-accent);
}

/* Footer list links */
html[data-theme='light'] .cm-footer-list a {
    color: #4a4a5a;
}
html[data-theme='light'] .cm-footer-list a:hover {
    color: var(--color-accent);
}
html[data-theme='light'] .cm-footer-bottom {
    border-top-color: rgba(0, 0, 0, 0.1);
    color: #6a6a7a;
}
html[data-theme='light'] .cm-social a {
    color: #4a4a5a;
}
html[data-theme='light'] .cm-social a:hover {
    color: var(--color-accent);
}

/* Pain cards */
html[data-theme='light'] .cm-pain-card,
html[data-theme='light'] .cm-carousel-card {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 6%, transparent), transparent 42%),
        #ffffff;
}

html[data-theme='light'] .cm-carousel-nav {
    background: #ffffff;
}

/* Urgency section columns */
html[data-theme='light'] .cm-col-title {
    color: var(--color-text);
}

/* Final CTA section */
html[data-theme='light'] .cm-final-cta {
    background: var(--color-bg);
}

/* Testimonials */
html[data-theme='light'] .cm-testimonial {
    background: #ffffff;
}
html[data-theme='light'] .cm-avatar {
    background: rgba(var(--color-accent-rgb), 0.12);
    color: var(--color-accent);
}

/* Team cards */
html[data-theme='light'] .cm-team-card {
    background: #ffffff;
}

/* Prose strip accent variant */
html[data-theme='light'] .cm-urgency .cm-heading,
html[data-theme='light'] .cm-urgency .cm-sub,
html[data-theme='light'] .cm-urgency .cm-card-text {
    color: var(--color-text);
}

body.cm-public {
    background: var(--color-bg);
    color: var(--color-text);
}

/* ── Section background layer system ────────────────────────────────────────
   Background layers (color/image/video/overlay) are absolutely positioned
   INSIDE each <section> as the first children.
   Each <section> already has position:relative (via .cm-section / .hero).
   The section-bg partial also sets isolation:isolate and overflow:hidden via
   an inline script so stacking contexts work without extra wrapper divs.

   All bg layers use z-index 0; the #cm-bg-anchor-N ~ * rule in section-bg
   bumps sibling content to z-index 2 so it renders above.
   ──────────────────────────────────────────────────────────────────────────── */

.cm-section {
    position: relative;
    padding: clamp(5rem, 10vw, 9rem) 0;
    border-bottom: 1px solid var(--color-border);
}

.cm-section:last-of-type {
    border-bottom: 0;
}

.cm-container {
    width: 100%;
    max-width: var(--cm-max);
    margin: 0 auto;
    padding: 0 var(--cm-pad-x);
}

.cm-label {
    display: inline-block;
    margin-bottom: 1rem;
    padding: 0.3rem 0.85rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent);
    border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
    border-radius: var(--cm-radius-full);
    background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}

.cm-label.is-center {
    display: table;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.cm-heading {
    margin: 0 0 1.25rem;
    font-size: clamp(2.2rem, 5vw, 3.75rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.04em;
    color: var(--color-text);
}

.cm-heading.is-center {
    text-align: center;
}

.cm-sub {
    margin: 0 auto 3rem;
    max-width: 44rem;
    font-size: 1.1rem;
    line-height: 1.75;
    color: var(--color-text-secondary);
}

.cm-sub.is-center {
    text-align: center;
}

.cm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 0;
    border-radius: var(--cm-radius-full);
    background: var(--color-accent);
    color: var(--color-text);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.cm-btn:hover {
    background: var(--color-accent-hover);
    box-shadow: 0 0 28px color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.cm-btn.is-lg {
    padding: 1rem 2rem;
    font-size: 1.05rem;
}

.cm-btn.is-md {
    padding: 0.7rem 1.35rem;
    font-size: 0.92rem;
}

.cm-btn.is-sm {
    padding: 0.55rem 1.1rem;
    font-size: 0.82rem;
}

.cm-card {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--cm-radius);
    overflow: hidden;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.cm-card:hover {
    border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
    box-shadow: 0 8px 40px rgba(0,0,0,0.3);
    transform: translateY(-2px);
}

.cm-placeholder {
    background: linear-gradient(135deg, var(--color-placeholder-from) 0%, var(--color-placeholder-to) 100%);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
}

/* ----- Navbar ----- */
.cm-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--cm-nav-height);
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background 0.25s ease, border-color 0.25s ease, backdrop-filter 0.25s ease;
}

.cm-nav.is-scrolled {
    background: color-mix(in srgb, var(--color-bg) 78%, transparent);
    border-bottom-color: var(--color-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.cm-nav-inner {
    height: 100%;
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 var(--cm-pad-x);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.cm-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--color-text);
    text-decoration: none;
}

.cm-logo-dot {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 10px var(--color-accent);
}

.cm-logo img {
    height: 2rem;
    width: auto;
    max-height: 2rem;
    object-fit: contain;
}

.cm-nav-links {
    display: none;
    align-items: center;
    gap: 1.6rem;
}

.cm-nav-links a {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.2s ease;
    position: relative;
}

.cm-nav-links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 2px;
    background: var(--color-accent);
    border-radius: 1px;
    transition: width 0.2s ease;
}

.cm-nav-links a:hover::after,
.cm-nav-links a.is-active::after {
    width: 100%;
}

.cm-nav-links a:hover,
.cm-nav-links a.is-active {
    color: var(--color-text);
}

.cm-nav-right {
    display: none;
    align-items: center;
    gap: 0.85rem;
}

.cm-nav-link-quiet {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 0.88rem;
}

.cm-nav-link-quiet:hover {
    color: var(--color-text);
}

.cm-burger {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.7rem;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.cm-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    flex-direction: column;
    background: color-mix(in srgb, var(--color-bg) 94%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    /* Alpine x-show toggles visibility; keep display:flex so open state always works */
}

.cm-overlay-glow {
    pointer-events: none;
    position: absolute;
    top: -20%;
    right: -30%;
    width: min(28rem, 90vw);
    height: min(28rem, 90vw);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--color-accent-rgb), 0.22) 0%, rgba(var(--color-accent-rgb), 0.06) 40%, transparent 70%);
    z-index: 0;
}

.cm-overlay-shell {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100dvh;
    max-height: 100%;
    padding: max(0.75rem, env(safe-area-inset-top, 0px)) var(--cm-pad-x) max(1rem, env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    min-height: 0;
}

.cm-overlay-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: var(--cm-nav-height);
    flex-shrink: 0;
}

.cm-overlay-top-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cm-overlay-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding: 0.5rem 0 0.25rem;
}

.cm-overlay-kicker {
    margin: 0 0 0.75rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.cm-overlay-nav {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.cm-overlay-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.95rem 1rem;
    border-radius: 0.9rem;
    border: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-bg-secondary) 82%, transparent);
    color: var(--color-text);
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.cm-overlay-link svg {
    flex-shrink: 0;
    color: var(--color-text-secondary);
    opacity: 0.7;
}

.cm-overlay-link:active,
.cm-overlay-link:hover {
    border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
    background: color-mix(in srgb, var(--color-accent) 10%, var(--color-bg-secondary));
    transform: translateY(-1px);
}

.cm-overlay-link:active svg,
.cm-overlay-link:hover svg {
    color: var(--color-accent);
    opacity: 1;
}

.cm-overlay-meta {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
}

.cm-overlay-meta-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    padding: 0.35rem 0;
}

.cm-overlay-meta-link:hover {
    color: var(--color-accent);
}

.cm-overlay-cta {
    margin-top: 1.25rem;
    padding-bottom: 0.5rem;
}

.cm-overlay-cta-card {
    border-radius: 1.15rem;
    border: 1px solid color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
    background:
        linear-gradient(160deg, rgba(var(--color-accent-rgb), 0.16) 0%, transparent 55%),
        color-mix(in srgb, var(--color-bg-secondary) 92%, transparent);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
    padding: 1.15rem 1.15rem 1.25rem;
}

.cm-overlay-cta-eyebrow {
    margin: 0 0 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.cm-overlay-cta-copy {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.cm-overlay-cta-btn {
    width: 100%;
    color: #fff !important;
    box-shadow: 0 8px 28px rgba(var(--color-accent-rgb), 0.35);
}

.cm-overlay-cta-btn:hover {
    transform: translateY(-1px);
}

html[data-theme='light'] .cm-overlay {
    background: color-mix(in srgb, var(--color-bg) 96%, transparent);
}

html[data-theme='light'] .cm-overlay-link {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
    color: #0a0a0f;
}

html[data-theme='light'] .cm-overlay-cta-card {
    background:
        linear-gradient(160deg, rgba(var(--color-accent-rgb), 0.1) 0%, transparent 55%),
        #ffffff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

html[data-theme='light'] .cm-overlay-cta-copy {
    color: #4a4a5a;
}

@media (min-width: 768px) {
    .cm-nav-links,
    .cm-nav-right {
        display: flex;
    }

    .cm-burger {
        display: none;
    }
}

/* ----- Hero ----- */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    background: var(--color-bg);
    padding: calc(var(--cm-nav-height) + 1rem) 0 0;
}

.hero::before {
    content: '';
    position: absolute;
    width: 900px;
    height: 900px;
    background: radial-gradient(circle, rgba(var(--color-accent-rgb), 0.12) 0%, rgba(var(--color-accent-rgb), 0.04) 45%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.cm-marquee {
    position: relative;
    overflow: hidden;
    margin-top: auto;
    margin-bottom: 0;
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: 1rem 0;
}

.cm-hero-copy {
    position: relative;
    text-align: center;
    max-width: 64rem;
    margin: 0 auto auto;
    padding: 0 var(--cm-pad-x) 2.5rem;
}

.cm-marquee-track {
    display: flex;
    width: max-content;
    gap: 3rem;
    animation: marquee 36s linear infinite;
}

.cm-marquee-track span {
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0.6;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.cm-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 1rem;
    margin-bottom: 1.75rem;
    border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
    border-radius: var(--cm-radius-full);
    background: color-mix(in srgb, var(--color-accent) 8%, transparent);
    color: var(--color-accent);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.cm-hero-title {
    margin: 0 0 1.5rem;
    font-size: clamp(2.8rem, 8vw, 6.5rem);
    font-weight: 900;
    line-height: 1.0;
    letter-spacing: -0.05em;
    color: var(--color-text);
}

.cm-hero-sub {
    margin: 0 auto 2.5rem;
    max-width: 42rem;
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    font-weight: 400;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

.cm-hero-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
}

.cm-hero-cta .cm-btn {
    white-space: nowrap;
}

.cm-btn-arrow {
    display: inline-block;
    flex-shrink: 0;
    line-height: 1;
    transform: translateY(-0.5px);
}

.cm-hero-note {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.45rem;
    max-width: min(34rem, 100%);
    margin: 0;
    padding: 0 0.75rem;
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    line-height: 1.45;
    text-align: left;
}

.cm-hero-note-arrow {
    flex-shrink: 0;
    color: var(--color-accent);
    font-weight: 600;
    line-height: 1.45;
}

.cm-hero-note-text {
    min-width: 0;
}

.cm-hero-video {
    width: 100%;
    max-width: 52rem;
    margin: 0 auto 2rem;
    aspect-ratio: 16 / 9;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-surface) 80%, #000);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.cm-hero-video iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.cm-hero-video-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 1.5rem;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 0.95rem;
}

.hero.has-video .cm-hero-title {
    font-size: clamp(2.2rem, 6vw, 4.5rem);
}

.hero.has-video .cm-hero-sub {
    margin-bottom: 1.5rem;
}

.hero.has-video .cm-hero-copy {
    padding-bottom: 2rem;
}

/* ----- Classic / legacy video hero ----- */
.hero-classic {
    position: relative;
    overflow: hidden;
    background: var(--color-bg);
    padding: calc(var(--cm-nav-height) + 2.5rem) 0 0;
}

.cm-hero-classic-inner {
    position: relative;
    z-index: 1;
    max-width: 64rem;
    margin: 0 auto;
    padding: 0 var(--cm-pad-x) 3.5rem;
    text-align: center;
}

.cm-hero-classic-title {
    margin: 0 0 1.25rem;
    font-size: clamp(2.25rem, 5.5vw, 3.75rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.04em;
    color: var(--color-text);
}

.cm-hero-classic-sub {
    margin: 0 auto 2rem;
    max-width: 42rem;
    font-size: clamp(1rem, 2vw, 1.2rem);
    line-height: 1.7;
    color: var(--color-text-secondary);
}

.cm-hero-video.is-classic {
    max-width: 56rem;
    margin-bottom: 2.25rem;
    border-radius: 1.25rem;
}

.cm-marquee--classic {
    margin-top: 0;
    margin-bottom: 0;
}

.cm-hero-cta .cm-scroll-hint,
.cm-scroll-hint {
    position: relative;
    z-index: 5;
    left: auto;
    bottom: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0.35rem 0 0;
    padding: 0;
    transform: none;
    color: var(--color-text-secondary);
    text-decoration: none;
    animation: cm-bounce 1.8s ease-in-out infinite;
}

@keyframes cm-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

/* ----- Process / aspiration cards ----- */
.cm-card-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 3rem;
}

.cm-card-media {
    height: 220px;
}

.cm-card-body {
    padding: 1.75rem 1.6rem 2rem;
}

.cm-step-num {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--color-accent);
}

/* ----- How it works process ----- */
.cm-how .cm-heading {
    max-width: 16em;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(2rem, 4vw, 3.1rem);
}

.cm-process {
    list-style: none;
    margin: 3rem auto 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    max-width: 68rem;
    counter-reset: none;
}

.cm-process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.15rem;
}

.cm-process-index {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.cm-process-num {
    flex-shrink: 0;
    width: 3.25rem;
    height: 3.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    color: var(--color-accent);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.cm-process-rail {
    display: none;
}

.cm-process-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 22rem;
}

.cm-process-icon {
    display: inline-flex;
    margin-bottom: 0.85rem;
    color: var(--color-accent);
}

.cm-process-icon.icon-wrap {
    width: auto;
    height: auto;
    border: 0;
    background: transparent;
    border-radius: 0;
}

.cm-process .cm-card-title {
    margin: 0 0 0.75rem;
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--color-text);
    text-align: center;
}

.cm-process .cm-card-text {
    margin: 0;
    max-width: 22rem;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    text-align: center;
}

.cm-process .cm-card-text p {
    margin: 0;
}

@media (min-width: 900px) {
    .cm-process {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
        align-items: start;
    }

    .cm-process-index {
        position: relative;
        margin-bottom: 0.15rem;
    }

    .cm-process-rail {
        display: block;
        flex: 1;
        height: 1px;
        min-width: 1.5rem;
        background: linear-gradient(
            90deg,
            color-mix(in srgb, var(--color-accent) 45%, transparent),
            color-mix(in srgb, var(--color-border) 70%, transparent)
        );
    }

    .cm-process-rail.is-before {
        background: linear-gradient(
            90deg,
            color-mix(in srgb, var(--color-border) 70%, transparent),
            color-mix(in srgb, var(--color-accent) 45%, transparent)
        );
    }

    .cm-process-card {
        max-width: none;
        padding: 0 0.5rem;
    }

    .cm-process .cm-card-text {
        max-width: 20rem;
    }
}

/* ── Icon system ─────────────────────────────────────── */
.icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cm-icon {
    display: block;
    flex-shrink: 0;
    color: var(--color-accent);
}

.cm-icon-yes {
    color: var(--color-accent);
}

.cm-icon-no {
    color: #666680;
}

.cm-card-icon {
    display: flex;
    align-items: center;
    margin: 0.65rem 0 0.7rem;
    color: var(--color-accent);
}

.cm-card-title {
    margin: 0 0 0.75rem;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text);
}

.cm-card-text {
    margin: 0;
    color: var(--color-text-secondary);
    line-height: 1.7;
    font-size: 1rem;
}

/* ----- Pain grid / automate carousel ----- */
.cm-pain-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 2.5rem;
}

.cm-pain-card {
    padding: 1.75rem 1.5rem;
    border-radius: var(--cm-radius);
}

.cm-pain-example {
    margin: 0.35rem 0 0;
    color: var(--color-text-secondary);
    font-size: 0.92rem;
    line-height: 1.55;
}

.cm-automate .cm-heading {
    max-width: 16em;
    margin-left: auto;
    margin-right: auto;
}

.cm-carousel {
    margin-top: 2.5rem;
    padding: 0 0 0.5rem;
}

.cm-carousel-shell {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.65rem;
    max-width: calc(var(--cm-max) + 5rem);
    margin: 0 auto;
    padding: 0 var(--cm-pad-x);
}

.cm-carousel-shell.no-nav {
    grid-template-columns: 1fr;
}

.cm-carousel-viewport {
    position: relative;
    min-width: 0;
    mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 3.5%,
        #000 96.5%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 3.5%,
        #000 96.5%,
        transparent 100%
    );
}

.cm-carousel-viewport.is-start {
    mask-image: linear-gradient(90deg, #000 0, #000 96.5%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 96.5%, transparent 100%);
}

.cm-carousel-viewport.is-end {
    mask-image: linear-gradient(90deg, transparent 0, #000 3.5%, #000 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3.5%, #000 100%);
}

.cm-carousel-viewport.is-start.is-end {
    mask-image: none;
    -webkit-mask-image: none;
}

.cm-carousel-track {
    display: flex;
    gap: 1.15rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 0.35rem 1.15rem 1rem;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    cursor: grab;
    scrollbar-width: none;
    user-select: none;
}

.cm-carousel-track.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    scroll-snap-type: none;
}

.cm-carousel-track::-webkit-scrollbar {
    display: none;
}

.cm-carousel-card {
    flex: 0 0 min(84vw, 23rem);
    scroll-snap-align: start;
    min-height: 17rem;
    padding: 2rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 7%, transparent), transparent 42%),
        var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: calc(var(--cm-radius) + 0.15rem);
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.cm-carousel-card.is-grid {
    flex: initial;
    min-height: 15rem;
    scroll-snap-align: unset;
}

.cm-carousel-card:hover {
    border-color: color-mix(in srgb, var(--color-accent) 42%, transparent);
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

.cm-carousel-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.9rem;
    border: 1px solid color-mix(in srgb, var(--color-accent) 28%, transparent);
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    color: var(--color-accent);
}

.cm-carousel-card .cm-card-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.cm-carousel-card .cm-card-text {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--color-text-secondary);
}

.cm-carousel-nav {
    width: 2.65rem;
    height: 2.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
    color: var(--color-text);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease, color 0.2s ease;
}

.cm-carousel-nav:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
    color: var(--color-accent);
}

.cm-carousel-nav:disabled {
    opacity: 0.35;
    cursor: default;
}

.cm-pain-grid[data-cols="1"] { --cm-grid-cols: 1; }
.cm-pain-grid[data-cols="2"] { --cm-grid-cols: 2; }
.cm-pain-grid[data-cols="3"] { --cm-grid-cols: 3; }
.cm-pain-grid[data-cols="4"] { --cm-grid-cols: 4; }

@media (min-width: 768px) {
    .cm-pain-grid {
        grid-template-columns: repeat(var(--cm-grid-cols, 3), minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .cm-carousel-card {
        flex-basis: 22.5rem;
        min-height: 18rem;
    }
}

@media (max-width: 720px) {
    .cm-carousel-shell {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }

    .cm-carousel-nav {
        display: none;
    }

    .cm-carousel-viewport {
        mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
    }
}

/* ----- Stats ----- */
.cm-stats {
    background: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.cm-stats-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    text-align: center;
}

.cm-stat-value {
    font-size: clamp(3.5rem, 9vw, 7.5rem);
    font-weight: 900;
    line-height: 0.92;
    color: var(--color-accent);
    letter-spacing: -0.05em;
}

.cm-stat-label {
    margin-top: 0.85rem;
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}

.cm-stats-note {
    margin: 3rem 0 0;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    font-style: italic;
}

/* ----- Urgency ----- */
.cm-urgency {
    background: var(--color-bg-urgency);
}

.cm-cols-3,
.cm-cols-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.cm-col-title {
    margin: 0 0 0.7rem;
    font-size: 1.15rem;
    font-weight: 700;
}

.cm-quote {
    margin: 3rem 0 0;
    padding: 2rem 2rem 2rem 2.5rem;
    border-left: 4px solid var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 5%, var(--color-bg-secondary));
    border-radius: 0 var(--cm-radius) var(--cm-radius) 0;
}

.cm-quote p,
.cm-quote blockquote {
    margin: 0;
    color: var(--color-text);
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    line-height: 1.7;
    font-style: italic;
}

.cm-quote-attr {
    display: block;
    margin-top: 1rem;
    color: var(--color-text-secondary);
    font-style: normal;
    font-size: 0.92rem;
}

/* ----- Fit check ----- */
.cm-fit-card {
    padding: 1.75rem 1.5rem;
}

.cm-fit-card.is-yes {
    border-top: 2px solid var(--color-accent);
}

.cm-fit-card h3 {
    margin: 0 0 1.2rem;
    font-size: 1.25rem;
}

.cm-fit-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cm-fit-card li {
    display: flex;
    gap: 0.7rem;
    color: var(--color-text-secondary);
    line-height: 1.55;
    margin-bottom: 0.85rem;
}

/* ----- Founder ----- */
.cm-founder-media {
    min-height: 320px;
    border-radius: var(--cm-radius);
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--color-text);
}

.cm-founder-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--cm-radius);
}

.cm-pull {
    margin: 1.75rem 0;
    font-size: clamp(1.3rem, 2.8vw, 1.85rem);
    font-style: italic;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-text);
    letter-spacing: -0.02em;
}

.cm-text-link {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: none;
}

.cm-text-link:hover {
    color: var(--color-accent-hover);
}

/* ----- Final CTA ----- */
.cm-final-cta {
    position: relative;
    overflow: hidden;
    background: var(--color-bg);
    text-align: center;
}

.cm-final-cta::before {
    content: '';
    position: absolute;
    width: 900px;
    height: 900px;
    background: radial-gradient(circle, rgba(var(--color-accent-rgb), 0.12) 0%, transparent 65%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.cm-final-cta .cm-heading {
    font-size: clamp(2.2rem, 5vw, 4rem);
}

.cm-final-cta .cm-container {
    position: relative;
}

/* ----- FAQ ----- */
.cm-faq details {
    border-bottom: 1px solid var(--color-border);
}

.cm-faq summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 0;
    font-weight: 600;
    color: var(--color-text);
}

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

.cm-faq-toggle {
    color: var(--color-accent);
    font-size: 1.4rem;
    line-height: 1;
}

.cm-faq details[open] .cm-faq-plus { display: none; }
.cm-faq details:not([open]) .cm-faq-minus { display: none; }

.cm-faq-answer {
    padding: 0 0 1.25rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

/* ----- Footer ----- */
.cm-footer {
    background: var(--color-bg-footer);
    border-top: 1px solid var(--color-border);
    padding: 4rem 0 1.5rem;
}

.cm-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.cm-footer-tag {
    margin: 0.8rem 0 1.1rem;
    color: var(--color-text-secondary);
    max-width: 18rem;
    line-height: 1.6;
}

.cm-social {
    display: flex;
    gap: 0.7rem;
}

.cm-social a {
    width: 2.2rem;
    height: 2.2rem;
    border: 1px solid var(--color-border);
    border-radius: 0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
}

.cm-social a:hover {
    color: var(--color-text);
    border-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
}

.cm-footer h4 {
    margin: 0 0 1rem;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text);
}

.cm-footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cm-footer-list a,
.cm-footer-list li {
    display: block;
    color: var(--color-text-secondary);
    text-decoration: none;
    margin-bottom: 0.55rem;
    font-size: 0.95rem;
}

.cm-footer-list a:hover {
    color: var(--color-text);
}

.cm-footer-bottom {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    color: var(--color-text-secondary);
    font-size: 0.82rem;
}

.cm-footer-bottom a {
    color: var(--color-text-secondary);
    text-decoration: none;
}

/* ----- Section headers (label + heading + sub centered block) ----- */
.cm-section-header {
    text-align: center;
    margin-bottom: 3.5rem;
}

.cm-section-header .cm-heading {
    margin-bottom: 1rem;
}

/* ----- Builder extras ----- */
.cm-testimonial,
.cm-team-card,
.cm-form-wrap {
    padding: 1.75rem;
}

.cm-avatar {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--color-placeholder-from);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
}

@media (min-width: 768px) {
    .cm-card-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .cm-pain-grid {
        grid-template-columns: repeat(var(--cm-grid-cols, 2), minmax(0, 1fr));
    }

    .cm-stats-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
    }

    .cm-stat + .cm-stat {
        border-left: 1px solid var(--color-border);
    }

    .cm-cols-3,
    .cm-cols-2,
    .cm-founder {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
        align-items: center;
    }

    .cm-footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cm-footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

@media (min-width: 1024px) {
    .cm-card-row {
        grid-template-columns: repeat(3, 1fr);
    }

    .cm-pain-grid {
        grid-template-columns: repeat(var(--cm-grid-cols, 3), minmax(0, 1fr));
    }

    .cm-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .cm-footer-grid {
        grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
    }
}

@media (max-width: 480px) {
    .cm-hero-title {
        font-size: 2.15rem;
    }

    .cm-card-row,
    .cm-pain-grid,
    .cm-cols-3,
    .cm-cols-2,
    .cm-stats-row,
    .cm-founder,
    .cm-footer-grid {
        grid-template-columns: 1fr;
    }

    .cm-stat + .cm-stat {
        border-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cm-marquee-track,
    .cm-scroll-hint {
        animation: none;
    }
}