/* Market News AI landing brand unification
   Dashboard typography and controls remain the source of truth. The landing
   keeps its navy atmosphere, framed product preview, and purposeful motion.

   NOTE: the `body.cmm-brand-unified` scope is vestigial. It existed so runtime
   JS could opt the page in after first paint; the class is now set statically
   on <body> in index.html. The scope survives only because it raises
   specificity over index.html's inline <style> block — which is also why the
   !important flags below are load-bearing. Do not "clean up" either without
   moving these rules into that inline block.

   This file is deliberately NOT a copy of the upstream PR-130 version: the
   --lp-bull/--lp-bear remaps, the hero app-strip / disclaimer hiding, and the
   .lp-frame height cap were all removed. See the inline notes at each site. */

:root {
    --cmm-header-height: 72px;
    --cmm-radius-button: 10px;
    --cmm-radius-card: 12px;
    --cmm-radius-panel: 16px;
    --cmm-surface-sunken: #11192a;
}

html body.cmm-landing.cmm-brand-unified {
    --lp-bg: #070b14;
    --lp-bg-2: #0b1120;
    --lp-surface: rgba(17, 25, 42, 0.86);
    --lp-surface-solid: #11192a;
    --lp-border: rgba(148, 163, 184, 0.16);
    --lp-border-strong: rgba(148, 163, 184, 0.28);
    --lp-text: #e7ecf3;
    --lp-text-muted: #a6b0c2;
    --lp-text-subtle: #7e8a9c;
    --lp-brand: var(--brand-600, #7c3aed);
    --lp-brand-hi: var(--brand-500, #8b5cf6);
    /* Deliberately NOT remapped onto --bull/--bear. tokens.css defines those as
       #16a34a / #dc2626 (light-mode values) and its html.theme-dark block
       overrides only --bull-soft/--bear-soft, so pointing at them would darken
       every direction label, percentage and accent bar on this near-black page
       (~11:1 contrast down to ~5.9:1). The landing keeps its own pair. */
    font-family: var(--font-sans, 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    background: var(--lp-bg) !important;
    color: var(--lp-text) !important;
}

body.cmm-brand-unified .lp-h1,
body.cmm-brand-unified .lp-h2,
body.cmm-brand-unified .lp-step h3,
body.cmm-brand-unified .lp-tile h3,
body.cmm-brand-unified button,
body.cmm-brand-unified a {
    font-family: var(--font-sans, 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
}

body.cmm-brand-unified .lp-container {
    width: min(1240px, calc(100% - 48px));
    max-width: 1240px;
    padding-left: 0;
    padding-right: 0;
}

/* Header */
body.cmm-brand-unified header.lp-nav {
    height: var(--cmm-header-height);
    background: color-mix(in srgb, var(--bg-page, #131826) 94%, transparent);
    border-bottom: 1px solid var(--border-base, rgba(148, 163, 184, 0.14));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body.cmm-brand-unified header.lp-nav > nav.lp-container {
    min-height: var(--cmm-header-height);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.cmm-brand-unified .cmm-brand-lockup {
    gap: 10px !important;
    text-decoration: none;
}

body.cmm-brand-unified header.lp-nav .lp-logo-mark {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-base, rgba(148, 163, 184, 0.14));
    border-radius: 9px;
    box-shadow: none;
}

body.cmm-brand-unified .cmm-brand-label {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    white-space: nowrap;
}

body.cmm-brand-unified .cmm-brand-name {
    color: var(--lp-text);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.018em;
    line-height: 1.1;
}

/* The header is sticky, so an in-page jump (#tiers, #faq, …) used to land with
   the section heading hidden underneath it. */
body.cmm-brand-unified section[id],
body.cmm-brand-unified [id="tiers"],
body.cmm-brand-unified [id="faq"] {
    scroll-margin-top: calc(var(--cmm-header-height) + 14px);
}

/* 768-900px is the tightest band for the header: the desktop nav is active from
   Tailwind's md breakpoint (768px) but the container is at its narrowest, which
   left only ~12px of slack. The lockup used to be two lines (an uppercase kicker
   over a longer product line) and this band hid the second one. It is now a
   single "Market News AI" wordmark, already ~60px narrower than that two-line
   block; shrinking it here frees the rest of the slack instead of hiding the
   brand entirely. Below 768px the desktop nav is hidden and the ≤767 block
   takes over, so this is deliberately bounded at both ends. */
@media (min-width: 768px) and (max-width: 900px) {
    body.cmm-brand-unified .cmm-brand-name {
        font-size: 13px;
        letter-spacing: -0.02em;
    }
}

body.cmm-brand-unified [data-cmm-simple-nav="desktop"] {
    gap: 28px !important;
    color: var(--text-secondary, #a6b0c2) !important;
}

body.cmm-brand-unified .cmm-simple-nav-link {
    color: var(--text-secondary, #a6b0c2);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: color 160ms ease;
}

body.cmm-brand-unified .cmm-simple-nav-link:hover,
body.cmm-brand-unified .cmm-simple-nav-link:focus-visible {
    color: var(--text-primary, #e7ecf3);
}

body.cmm-brand-unified .cmm-header-actions {
    gap: 6px !important;
    white-space: nowrap;
}

body.cmm-brand-unified .cmm-header-dashboard,
body.cmm-brand-unified #headerSignInBtn,
body.cmm-brand-unified #authLoadingBtn {
    min-height: 40px;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: var(--cmm-radius-button) !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text-secondary, #a6b0c2) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap;
}

body.cmm-brand-unified .cmm-header-dashboard:hover,
body.cmm-brand-unified #headerSignInBtn:hover {
    background: var(--bg-hover, #232c40) !important;
    color: var(--text-primary, #e7ecf3) !important;
}

body.cmm-brand-unified #authLoadingBtn {
    min-width: 40px;
    padding: 0 !important;
    color: var(--text-muted, #7e8a9c) !important;
}

body.cmm-brand-unified .cmm-header-start {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border: 1px solid var(--brand-600, #7c3aed);
    border-radius: var(--cmm-radius-button);
    background: var(--brand-600, #7c3aed);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease;
}

body.cmm-brand-unified .cmm-header-start:hover,
body.cmm-brand-unified .cmm-header-start:focus-visible {
    border-color: var(--brand-500, #8b5cf6);
    background: var(--brand-500, #8b5cf6);
}

/* Hero */
body.cmm-brand-unified #hero.lp-hero {
    box-sizing: border-box;
    min-height: calc(100vh - var(--cmm-header-height));
    min-height: calc(100svh - var(--cmm-header-height));
    display: grid;
    align-items: center;
    padding: clamp(28px, 5vh, 52px) 0 !important;
    overflow: hidden;
    background: linear-gradient(115deg, rgba(20, 13, 48, 0.62) 0%, var(--lp-bg) 47%, rgba(10, 19, 41, 0.94) 100%);
}

body.cmm-brand-unified #hero.lp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 42% 48% at 18% 22%, rgba(124, 58, 237, 0.16), transparent 72%),
        radial-gradient(ellipse 48% 54% at 82% 54%, rgba(59, 130, 246, 0.10), transparent 74%);
}

body.cmm-brand-unified #hero .lp-ambient {
    display: block !important;
    opacity: 0.62;
    filter: saturate(0.82);
}

body.cmm-brand-unified #hero .lp-hero-grid {
    grid-template-columns: minmax(0, 0.88fr) minmax(500px, 1.12fr);
    gap: clamp(36px, 4vw, 54px);
    align-items: center;
}

body.cmm-brand-unified #hero .cmm-hero-copy {
    position: relative;
    z-index: 1;
    min-width: 0;
}

body.cmm-brand-unified #hero .lp-hero-badge {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 9px;
    padding: 8px 13px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 999px;
    background: rgba(15, 22, 38, 0.62);
    backdrop-filter: blur(10px);
    color: var(--lp-text-muted);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.3;
    text-transform: none;
}

body.cmm-brand-unified #hero .lp-live-dot {
    flex: 0 0 auto;
}

body.cmm-brand-unified #hero .lp-h1 {
    max-width: 620px;
    margin-top: 18px !important;
    color: var(--lp-text);
    /* Capped at 50px, not 66px. The hero's left grid column is ~522px wide at a
       1240px container; measured there, the headline wraps to 5 lines at 66px,
       4 at 54px, and lands at 3 lines / 155px at 50px. */
    font-size: clamp(38px, 3.5vw, 50px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.045em !important;
    line-height: 1.01 !important;
    text-wrap: balance;
}

body.cmm-brand-unified #hero .lp-h1 > span {
    display: block;
}

/* The violet -> emerald gradient on line two is kept deliberately: it is the
   landing's signature and the reason the hero reads as Market News AI rather than a
   generic dark SaaS page. Only the block layout is set here; the gradient
   itself stays with the .lp-h1-accent rule in index.html. */
body.cmm-brand-unified #hero .lp-h1 .lp-h1-accent {
    display: block;
    margin-top: 4px;
}

body.cmm-brand-unified #hero .lp-hero-sub {
    max-width: 560px;
    margin-top: 18px !important;
    color: var(--lp-text-muted);
    font-size: 17px !important;
    line-height: 1.55 !important;
}

body.cmm-brand-unified #hero .lp-hero-ctas {
    margin-top: 24px !important;
    gap: 12px !important;
    flex-wrap: nowrap;
}

/* Re-assert the platform gate. index.html gates these pairs with
   `html[data-platform="mobile"] [data-desktop-only] { display: none !important }`,
   but the ≤767px `.lp-hero-ctas { display: grid !important }` rule below is more
   specific and was forcing BOTH CTA pairs visible on phones. Keep this ahead of
   any display rule this file sets on .lp-hero-ctas. */
html[data-platform="mobile"] body.cmm-brand-unified #hero [data-desktop-only],
html[data-platform="desktop"] body.cmm-brand-unified #hero [data-mobile-only] {
    display: none !important;
}

body.cmm-brand-unified .lp-btn {
    min-height: 44px;
    padding: 0 18px;
    border-radius: var(--cmm-radius-button);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
    backdrop-filter: none;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

body.cmm-brand-unified .lp-btn:hover {
    transform: translateY(-1px);
}

body.cmm-brand-unified .lp-btn:active {
    transform: translateY(0);
}

body.cmm-brand-unified .lp-btn--primary {
    border: 1px solid var(--brand-600, #7c3aed);
    background: var(--brand-600, #7c3aed);
    color: #fff;
    box-shadow: 0 10px 28px -16px rgba(124, 58, 237, 0.9);
}

body.cmm-brand-unified .lp-btn--primary:hover,
body.cmm-brand-unified .lp-btn--primary:focus-visible {
    border-color: var(--brand-500, #8b5cf6);
    background: var(--brand-500, #8b5cf6);
    box-shadow: 0 12px 30px -18px rgba(124, 58, 237, 0.95);
}

body.cmm-brand-unified .lp-btn--ghost {
    border: 1px solid var(--border-strong, #3d4b66);
    background: transparent;
    color: var(--text-primary, #e7ecf3);
}

body.cmm-brand-unified .lp-btn--ghost:hover,
body.cmm-brand-unified .lp-btn--ghost:focus-visible {
    border-color: var(--text-muted, #7e8a9c);
    background: var(--bg-hover, #232c40);
}

body.cmm-brand-unified #hero .lp-hero-proof {
    display: block;
    margin-top: 16px !important;
    color: var(--text-muted, #7e8a9c);
    font-size: 13px;
    line-height: 1.4;
}

body.cmm-brand-unified #hero .cmm-hero-availability {
    display: block;
}

/* The hero app strip and the "educational platform — not investment advice"
   hero disclaimer stay in flow. The upstream version set display:none on both;
   hiding a disclaimer in CSS while leaving it in the DOM is exactly the pattern
   that keeps a copy test green while the reader sees nothing. */
body.cmm-brand-unified #hero .lp-hero-disclaimer {
    margin-top: 14px;
    font-size: 11px;
    line-height: 1.5;
}

/* Product preview: preserve the framed dashboard anatomy and guide the eye through live data. */
body.cmm-brand-unified #hero .lp-hero-visual {
    position: relative;
    z-index: 1;
    min-width: 0;
    width: 100%;
}

body.cmm-brand-unified #hero .lp-hero-visual::before {
    inset: -30px;
    background:
        radial-gradient(ellipse 62% 58% at 35% 28%, rgba(124, 58, 237, 0.24), transparent 72%),
        radial-gradient(ellipse 50% 46% at 78% 78%, rgba(52, 211, 153, 0.10), transparent 74%);
    filter: blur(28px);
}

body.cmm-brand-unified #hero .lp-frame {
    width: 100%;
    /* No max-height/overflow cap. Upstream clamped the frame to
       min(66svh, 540px) and made that safe by hiding the 5th preview card; we
       show all five, and a ~510px stack would clip silently inside a 528px cap
       at an 800px-tall viewport. The hero is short enough now to not need it. */
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: var(--cmm-radius-panel);
    background: #10182a;
    box-shadow: 0 28px 72px -36px rgba(0, 0, 0, 0.92), 0 0 0 1px rgba(124, 58, 237, 0.06);
    /* The upstream PR-130 file froze this frame with `animation: none !important;
       transform: none !important` as part of a flatten-all-motion redesign. Both
       are removed: the frame's slow float is wanted, and `transform: none
       !important` is the sharper trap of the two — an !important declaration
       outranks a CSS animation, so it silently freezes the float even if the
       animation itself is left alone. Nothing here depends on either: the
       entrance transform lives on the [data-animate] .lp-hero-visual WRAPPER,
       and .lp-frame is not a .lp-anim child. */
}

body.cmm-brand-unified #hero .lp-frame-bar {
    display: flex !important;
    border-bottom-color: rgba(148, 163, 184, 0.14);
    background: #151e31;
}

body.cmm-brand-unified #hero .lp-frame-body {
    padding: 14px;
}

body.cmm-brand-unified #hero .lp-mini-topbar {
    gap: 10px;
    padding: 2px 2px 12px;
}

body.cmm-brand-unified #hero .lp-mini-search {
    border-color: var(--border-base, rgba(148, 163, 184, 0.14));
    border-radius: var(--cmm-radius-button);
    background: var(--cmm-surface-sunken);
    color: var(--text-muted, #7e8a9c);
}

body.cmm-brand-unified #hero .lp-rail-label {
    margin: 11px 4px 7px;
    color: var(--text-muted, #7e8a9c);
    font-size: 10px;
    letter-spacing: 0.12em;
}

body.cmm-brand-unified #hero .lp-card {
    border-color: rgba(148, 163, 184, 0.16);
    border-radius: var(--cmm-radius-card);
    background: var(--cmm-surface-sunken);
    margin-bottom: 8px;
}

body.cmm-brand-unified #hero .lp-card-headline,
body.cmm-brand-unified #hero .lp-card-sym {
    color: var(--text-primary, #e7ecf3);
}

body.cmm-brand-unified #hero .lp-card-industry,
body.cmm-brand-unified #hero .lp-card-time,
body.cmm-brand-unified #hero .lp-card-pct-since {
    color: var(--text-muted, #7e8a9c);
}

body.cmm-brand-unified #hero .lp-tag {
    border-radius: 6px;
    background: rgba(139, 92, 246, 0.13);
    color: var(--brand-500, #8b5cf6);
}

body.cmm-brand-unified #hero [data-animate] .lp-anim {
    opacity: 0;
    transform: translateY(14px) scale(0.99);
}

body.cmm-brand-unified #hero [data-animate].is-in .lp-anim {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 560ms var(--lp-ease), transform 620ms var(--lp-spring);
    transition-delay: var(--d, 0s);
}

body.cmm-brand-unified #hero [data-animate].is-in .cmm-preview-focus {
    animation: cmm-preview-focus 1.8s ease 0.85s both;
}

@keyframes cmm-preview-focus {
    0%, 100% { box-shadow: none; }
    42% { border-color: rgba(52, 211, 153, 0.46); box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.12), 0 12px 28px -22px rgba(52, 211, 153, 0.9); }
}

body.cmm-brand-unified #hero .lp-bell-badge {
    transform: scale(0);
}

body.cmm-brand-unified #hero .is-in .lp-bell-badge {
    animation: lp-pop 0.5s var(--lp-spring) 1.25s forwards;
}

body.cmm-brand-unified #hero .lp-frame-caption {
    margin-top: 10px;
    color: var(--text-muted, #7e8a9c);
    font-size: 11px;
}

/* The catalyst tape is compact context, not another content block. */
body.cmm-brand-unified .lp-tape-wrap {
    border-color: rgba(148, 163, 184, 0.12);
    background: rgba(255, 255, 255, 0.015);
    padding-top: 10px;
    padding-bottom: 10px;
    opacity: 0.78;
}

/* Carry the dashboard system through the rest of the page without redesigning
   every section in the hero PR. */
body.cmm-brand-unified .lp-section {
    background: var(--lp-bg);
}

body.cmm-brand-unified .lp-step,
body.cmm-brand-unified .lp-tile,
body.cmm-brand-unified .lp-verdict,
body.cmm-brand-unified .lp-honesty,
body.cmm-brand-unified .lp-final,
body.cmm-brand-unified .lp-app-strip {
    border-color: var(--border-base, rgba(148, 163, 184, 0.14));
    border-radius: var(--cmm-radius-card);
    background: var(--cmm-surface-sunken);
    box-shadow: none;
}

body.cmm-brand-unified .lp-step:hover,
body.cmm-brand-unified .lp-tile:hover {
    transform: none;
    border-color: var(--border-strong, #3d4b66);
    box-shadow: none;
}

body.cmm-brand-unified .lp-eyebrow,
body.cmm-brand-unified .lp-step-num {
    color: var(--brand-500, #8b5cf6);
}

body.cmm-brand-unified .lp-h2,
body.cmm-brand-unified .lp-step h3,
body.cmm-brand-unified .lp-tile h3 {
    color: var(--text-primary, #e7ecf3);
}

/* ---------------------------------------------------------------------------
   The accent sweep
   ---------------------------------------------------------------------------
   Violet -> emerald, the one flourish this page gets. It started on the hero's
   second headline line; these selectors make it reusable so the same treatment
   lands on the closing line of every section headline, the workflow step
   numbers and the wordmark, instead of being a one-off.

   It lives here rather than beside .lp-h1-accent in index.html because the
   brand layer is linked AFTER the page's inline <style>, so it is the only
   place a colour rule reliably beats the per-section rules above. The
   element-qualified selectors are deliberate: `.lp-step h3` above scores
   (0,2,2), so a bare `.lp-accent` at (0,2,1) would silently lose on the h3s.

   -webkit-text-fill-color is required as well as `color` — WebKit paints the
   glyph fill from that property and would otherwise cover the gradient. */
body.cmm-brand-unified .lp-accent,
body.cmm-brand-unified .lp-step h3.lp-accent,
body.cmm-brand-unified .lp-step .lp-step-num.lp-accent,
body.cmm-brand-unified .cmm-brand-name.lp-accent,
body.cmm-brand-unified .lp-h1 .lp-h1-accent {
    background-image: linear-gradient(100deg, #a78bfa 0%, #34d399 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* The step titles are ~250px wide, so the accent tail wrapped in card 01 and
   picked the gradient up again from violet on the second line. Breaking the
   accent onto its own line makes all three cards read the way the hero does —
   a white line, then the sweep — and starts their body copy at the same y. */
body.cmm-brand-unified .lp-step h3 .lp-accent {
    display: block;
}

body.cmm-brand-unified .lp-sub,
body.cmm-brand-unified .lp-step p,
body.cmm-brand-unified .lp-tile p {
    color: var(--text-secondary, #a6b0c2);
}

body.cmm-brand-unified .cmm-testimonial-photo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

body.cmm-brand-unified .cmm-testimonial-quote {
    margin-top: 16px;
    color: var(--text-primary, #e7ecf3);
    line-height: 1.65;
}

body.cmm-brand-unified .cmm-testimonial-meta {
    margin-top: 14px;
    color: var(--text-secondary, #a6b0c2);
    font-size: 13px;
}

body.cmm-brand-unified .cmm-testimonial-meta strong {
    color: var(--text-primary, #e7ecf3);
}

@media (max-height: 740px) and (min-width: 1025px) {
    body.cmm-brand-unified #hero.lp-hero {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    body.cmm-brand-unified #hero .lp-h1 {
        font-size: 50px !important;
    }

    body.cmm-brand-unified #hero .lp-hero-sub {
        font-size: 17px !important;
    }

    body.cmm-brand-unified #hero .lp-frame {
        max-height: 450px;
    }
}

@media (max-width: 1180px) and (min-width: 1025px) {
    body.cmm-brand-unified #hero .lp-hero-grid {
        grid-template-columns: minmax(0, 0.88fr) minmax(470px, 1.12fr);
        gap: 36px;
    }

    body.cmm-brand-unified #hero .lp-h1 {
        font-size: 52px !important;
    }
}

@media (max-width: 1024px) {
    body.cmm-brand-unified #hero.lp-hero {
        min-height: auto;
    }

    body.cmm-brand-unified #hero .lp-hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    body.cmm-brand-unified #hero .lp-hero-visual {
        max-width: 720px;
    }
}

@media (max-width: 767px) {
    :root {
        --cmm-header-height: 64px;
    }

    body.cmm-brand-unified .lp-container {
        width: min(100% - 32px, 1240px);
    }

    body.cmm-brand-unified header.lp-nav,
    body.cmm-brand-unified header.lp-nav > nav.lp-container {
        height: var(--cmm-header-height);
        min-height: var(--cmm-header-height);
    }

    body.cmm-brand-unified header.lp-nav .lp-logo-mark {
        width: 32px;
        height: 32px;
    }

    body.cmm-brand-unified .cmm-brand-name {
        font-size: 16px;
    }

    body.cmm-brand-unified #mobileMenuToggle {
        min-height: 38px !important;
        padding: 0 11px !important;
        gap: 7px !important;
        border: 1px solid var(--border-strong, #3d4b66) !important;
        border-radius: var(--cmm-radius-button) !important;
        background: transparent !important;
        color: var(--text-primary, #e7ecf3) !important;
        font-size: 12px !important;
        line-height: 1 !important;
        white-space: nowrap;
    }

    body.cmm-brand-unified #hero.lp-hero {
        min-height: calc(100svh - var(--cmm-header-height));
        padding: 28px 0 44px !important;
        overflow: visible;
    }

    body.cmm-brand-unified #hero .lp-hero-grid {
        gap: 36px;
    }

    body.cmm-brand-unified #hero .lp-hero-badge {
        font-size: 11px;
        letter-spacing: 0.12em;
    }

    body.cmm-brand-unified #hero .lp-h1 {
        margin-top: 16px !important;
        font-size: clamp(40px, 11.5vw, 46px) !important;
        line-height: 1.01 !important;
        letter-spacing: -0.04em !important;
    }

    body.cmm-brand-unified #hero .lp-hero-sub {
        margin-top: 18px !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
    }

    body.cmm-brand-unified #hero .lp-hero-ctas {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px !important;
        margin-top: 22px !important;
    }

    body.cmm-brand-unified #hero .lp-btn {
        min-height: 46px;
        padding: 0 14px;
        font-size: 14px;
        white-space: nowrap;
    }

    body.cmm-brand-unified #hero .lp-hero-proof {
        margin-top: 14px !important;
    }

    body.cmm-brand-unified #hero .lp-frame {
        max-height: none;
    }

    body.cmm-brand-unified #hero .lp-frame-body {
        padding: 12px;
    }

    body.cmm-brand-unified #hero .lp-card {
        grid-template-columns: 52px 1fr auto;
        gap: 9px;
        padding: 11px 10px 11px 14px;
    }

    body.cmm-brand-unified #hero .lp-mini-search {
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    body.cmm-brand-unified #hero .lp-frame-caption {
        text-align: left;
    }

    body.cmm-brand-unified [data-cmm-simple-nav="mobile"] .cmm-simple-nav-link {
        min-height: 48px;
        border-bottom: 1px solid var(--border-base, rgba(148, 163, 184, 0.14));
        color: var(--text-secondary, #a6b0c2);
        font-size: 15px;
    }
}

@media (max-width: 390px) {
    body.cmm-brand-unified #hero .lp-hero-ctas {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.cmm-brand-unified *,
    body.cmm-brand-unified *::before,
    body.cmm-brand-unified *::after {
        scroll-behavior: auto !important;
    }

    body.cmm-brand-unified #hero .lp-ambient *,
    body.cmm-brand-unified .lp-tape,
    body.cmm-brand-unified #hero .cmm-preview-focus,
    body.cmm-brand-unified #hero .lp-live-dot,
    body.cmm-brand-unified #hero .lp-bell-badge {
        animation: none !important;
    }

    body.cmm-brand-unified #hero [data-animate] .lp-anim,
    body.cmm-brand-unified #hero .lp-bell-badge {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}
