/* ====================================================================
   Lexend Deca — self-hosted variable font with metric-matched fallback
   ==================================================================== */

@font-face {
    font-family: 'Lexend Deca Fallback';
    src: local('Arial');
    size-adjust: 96.5%;
    ascent-override: 95%;
    descent-override: 25%;
    line-gap-override: 0%;
}

/* latin-ext */
@font-face {
    font-family: 'Lexend Deca';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('fonts/lexend-deca-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Lexend Deca';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('fonts/lexend-deca-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ====================================================================
   BEACON — Design System & Styles
   Font: Lexend Deca | Brand: #E74310
   ==================================================================== */

/* ====================================================================
   CSS VARIABLES
   ==================================================================== */
:root {
    /* Brand */
    --color-brand: #E74310;
    --color-brand-hover: #d13b0e;
    --color-brand-light: #FFF5F2;
    --color-brand-glow: rgba(231, 67, 16, 0.12);

    /* Module Colors (from V1 dashboard) */
    --color-rate-radar: #EF233C;
    --color-pricing: #FFC700;
    --color-explorer: #0058FF;
    --color-events: #171725;
    --color-forecaster: #21D59B;
    --color-systems: #FFB7FF;
    --color-signals: #E74310;

    /* Module Light Tints */
    --color-rate-radar-light: #FFF3F4;
    --color-pricing-light: #FFFBF0;
    --color-explorer-light: #F0F7FF;
    --color-events-light: #F5F5F6;
    --color-forecaster-light: #F0FDF9;
    --color-systems-light: #FFF5FF;
    --color-signals-light: #FFF5F2;

    /* Signal Priority Colors */
    --color-signal-high: #EF233C;
    --color-signal-medium: #F59E0B;
    --color-signal-low: #5fbf8b;
    --color-signal-positive: #5fbf8b;

    /* Revenue Category Colors */
    --color-category-strong: #0891B2;
    --color-category-ahead: #22C55E;
    --color-category-ontrack: #64748B;
    --color-category-behind: #BE185D;

    /* Neutrals */
    --color-text: #131523;
    --color-text-secondary: #5A607F;
    --color-text-muted: #999;
    --color-bg: #FAFAFA;
    --color-bg-secondary: #F5F5F5;
    --color-bg-white: #FFFFFF;
    --color-border: #E5E5E5;
    --color-border-light: #F0F0F0;
    --color-code-bg: #1a1a2e;

    /* Status */
    --color-success: #21D59B;
    --color-warning: #FFC700;
    --color-danger: #EF233C;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 48px;
    --space-4xl: 64px;
    --space-5xl: 100px;
    --space-6xl: 120px;

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.10);
    --shadow-xl: 0 16px 48px rgba(0,0,0,0.12);
    --shadow-brand: 0 4px 24px rgba(231, 67, 16, 0.25);

    /* Typography */
    --font: 'Lexend Deca', 'Lexend Deca Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

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

html {
    scroll-padding-top: 80px;
    -webkit-font-smoothing: antialiased;
}
html.lenis, html.lenis body {
    height: auto;
}
.lenis.lenis-smooth {
    scroll-behavior: auto;
}

body {
    font-family: var(--font);
    color: var(--color-text);
    background: var(--color-bg-white);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Skip to content link */
.skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 10000;
    padding: 8px 16px;
    background: var(--color-brand);
    color: #fff;
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-decoration: none;
    transition: top 0.2s;
}
.skip-link:focus {
    top: 16px;
}

/* Global focus-visible styles */
:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

/* ====================================================================
   ANIMATIONS
   ==================================================================== */
.fade-in {
    opacity: 0;
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-in.visible {
    opacity: 1;
}

/* ====================================================================
   NAVIGATION
   ==================================================================== */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.nav.scrolled {
    border-bottom-color: var(--color-border);
    box-shadow: 0 1px 8px rgba(0,0,0,0.04);
}
.nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-xl);
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.nav-logo {
    display: flex;
    align-items: center;
}
.nav-logo-img {
    height: 28px;
    width: auto;
}
.nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-2xl);
}
.nav-link {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary);
    transition: color 0.2s;
}
.nav-link:hover { color: var(--color-text); }
.nav-actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}
.nav-cta {
    font-size: 13px;
    font-weight: 600;
    color: white;
    background: var(--color-brand);
    padding: 8px 20px;
    border-radius: var(--radius-md);
    transition: background 0.2s, box-shadow 0.2s;
}
.nav-cta:hover {
    background: var(--color-brand-hover);
    box-shadow: var(--shadow-brand);
}
.nav-cta-login {
    color: var(--color-brand);
    background: white;
    border: 1.5px solid var(--color-brand);
}
.nav-cta-login:hover {
    background: var(--color-brand);
    color: white;
}

/* Products dropdown */
.nav-dropdown {
    position: relative;
}
.nav-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 2px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    color: var(--color-text-secondary);
    padding: 0;
    transition: color 0.2s;
}
.nav-dropdown-trigger:hover {
    color: var(--color-text);
}
.nav-dropdown-arrow {
    font-size: 18px;
    transition: transform 0.2s;
}
.nav-dropdown-trigger[aria-expanded="true"] .nav-dropdown-arrow {
    transform: rotate(180deg);
}
.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 280px;
    padding: var(--space-sm);
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    z-index: 100;
}
.nav-dropdown-menu.open {
    display: block;
}
.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-text);
    transition: background 0.15s;
}
.nav-dropdown-item:hover {
    background: var(--color-bg);
}
.nav-dropdown-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--module-color) 12%, white);
    color: var(--module-color);
    flex-shrink: 0;
}
.nav-dropdown-icon img,
.nav-dropdown-icon svg {
    width: 18px;
    height: 18px;
}
.nav-dropdown-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
}
.nav-dropdown-desc {
    display: block;
    font-size: 12px;
    color: var(--color-text-muted);
}
.nav-dropdown-item-soon {
    cursor: default;
    opacity: 0.7;
}
.nav-dropdown-item-soon:hover {
    background: transparent;
}
.nav-dropdown-soon {
    font-size: 10px;
    font-weight: 500;
    color: #666;
    background: #f0f0f0;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: var(--space-xs);
    vertical-align: middle;
}

/* Mobile toggle */
.nav-mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}
.nav-mobile-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-text);
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}
.nav-mobile-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-mobile-toggle.active span:nth-child(2) { opacity: 0; }
.nav-mobile-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Mobile menu */
.mobile-menu {
    display: none;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    background: white;
    padding: var(--space-xl);
    border-bottom: 1px solid var(--color-border);
    z-index: 99;
    flex-direction: column;
    gap: var(--space-lg);
}
.mobile-menu.open { display: flex; }
.mobile-menu-link {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-secondary);
    padding: var(--space-md) 0;
}
.mobile-menu-group { display: flex; flex-direction: column; }
.mobile-menu-accordion {
    display: flex; align-items: center; gap: 4px;
    background: none; border: none; cursor: pointer;
    font-family: inherit;
}
.mobile-menu-arrow {
    font-size: 18px;
    transition: transform 0.2s;
}
.mobile-menu-accordion[aria-expanded="true"] .mobile-menu-arrow {
    transform: rotate(180deg);
}
.mobile-menu-sub {
    display: none;
    flex-direction: column;
    padding-left: var(--space-lg);
}
.mobile-menu-sub.open { display: flex; }
.mobile-menu-sub-link {
    font-size: 15px;
    font-weight: 400;
    color: var(--color-text-muted);
    padding: var(--space-sm) 0;
    text-decoration: none;
    transition: color 0.15s;
}
.mobile-menu-sub-link:hover { color: var(--color-text); }
.mobile-menu-sub-link-soon {
    cursor: default;
    opacity: 0.55;
}
.mobile-menu-actions {
    display: flex; flex-direction: column; gap: var(--space-sm);
    margin-top: var(--space-md);
}
.mobile-menu-cta {
    display: block;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: white;
    background: var(--color-brand);
    border: 1.5px solid var(--color-brand);
    padding: 14px 24px;
    border-radius: var(--radius-md);
    text-decoration: none;
}
.mobile-menu-cta-login {
    color: var(--color-brand);
    background: white;
}

/* ====================================================================
   BUTTONS
   ==================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font);
    font-weight: 600;
    font-size: 14px;
    padding: 12px 24px;
    border-radius: var(--radius-md);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    cursor: pointer;
    border: none;
    line-height: 1.4;
}
.btn-lg {
    padding: 16px 32px;
    font-size: 15px;
    border-radius: var(--radius-lg);
}
.btn-primary {
    background: var(--color-brand);
    color: white;
    border: 2px solid var(--color-brand);
}
.btn-primary:hover {
    background: var(--color-brand-hover);
    box-shadow: var(--shadow-brand);
}
.btn-ghost {
    background: transparent;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}
.btn-ghost:hover {
    background: var(--color-bg);
    border-color: var(--color-text-muted);
}
.btn-outline {
    background: transparent;
    color: var(--color-brand);
    border: 2px solid var(--color-brand);
}
.btn-outline:hover {
    background: var(--color-brand-light);
}

.desktop-break { display: block; }

/* ====================================================================
   SECTION HELPERS
   ==================================================================== */
.section-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-brand);
    margin-bottom: var(--space-xl);
    text-align: center;
}
.section-title {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    margin-bottom: var(--space-xl);
    color: var(--color-text);
}
.section-sub {
    font-size: 18px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--space-3xl);
}

/* ====================================================================
   HERO
   ==================================================================== */
.hero {
    position: relative;
    overflow: hidden;
    padding: 130px 0 40px;
    text-align: center;
    background: linear-gradient(180deg, var(--color-bg-white) 0%, var(--color-bg) 100%);
}
.hero > .container {
    position: relative;
    z-index: 1;
}
.hero .fade-in {
    transition: none;
}

/* Hero dot-grid background */
.hero-grid-bg {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(19, 21, 35, 0.08) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 70%);
    z-index: 0;
    pointer-events: none;
}

/* Kinetic text reveal */
.line-reveal {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}
.line-reveal-block {
    display: block;
}
.line-reveal-inner {
    display: inline-block;
    transform: translateY(110%);
}
.hero-badges {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--space-2xl);
}
/* Announcement badge — "news flash" pill */
.hero-badge-live {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    background: var(--color-brand-light);
    border: 1px solid rgba(231, 67, 16, 0.15);
    padding: 8px 16px 8px 12px;
    border-radius: 100px;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.hero-badge-live:hover {
    border-color: rgba(231, 67, 16, 0.35);
    box-shadow: 0 2px 12px var(--color-brand-glow);
    background: var(--color-brand-light);
}
.hero-badge-live:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}

/* Shimmer sweep across badge */
.hero-badge-live::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(231, 67, 16, 0.06) 40%,
        rgba(231, 67, 16, 0.12) 50%,
        rgba(231, 67, 16, 0.06) 60%,
        transparent 100%
    );
    transform: translateX(-200%);
    animation: shimmer 3s ease-in-out infinite;
    pointer-events: none;
}
@keyframes shimmer {
    0% { transform: translateX(-200%); }
    100% { transform: translateX(200%); }
}

/* Pulsing live dot */
.hero-badge-dot {
    width: 8px;
    height: 8px;
    background: var(--color-success);
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
}
.hero-badge-dot::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: var(--color-success);
    opacity: 0;
    animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse-ring {
    0% { transform: scale(0.8); opacity: 0.6; }
    50% { transform: scale(1.8); opacity: 0; }
    100% { transform: scale(0.8); opacity: 0; }
}

/* "NEW" label pill */
.hero-badge-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #FFFFFF;
    background: var(--color-brand);
    padding: 2px 8px;
    border-radius: 100px;
    line-height: 1.4;
    flex-shrink: 0;
}

/* Announcement text */
.hero-badge-text {
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
}

/* Arrow icon */
.hero-badge-arrow {
    font-size: 16px;
    color: var(--color-brand);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    flex-shrink: 0;
}
.hero-badge-live:hover .hero-badge-arrow {
    transform: translateX(3px);
}

/* Hero eyebrow — SEO keyword in H1, styled as kicker */
.hero-eyebrow {
    display: block;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-brand);
    margin-bottom: var(--space-xl);
}

/* Animated highlight marker */
/* "data" word — scramble effect */
.hero-word-data {
    position: relative;
    display: inline-block;
    font-variant-numeric: tabular-nums;
}
.hero-word-data.is-scrambling {
    color: var(--color-text-secondary);
}
.hero-word-data.is-resolved {
    color: var(--color-text);
    transition: color 0.3s ease;
}

/* Animated highlight marker */
.highlight-word {
    position: relative;
    display: inline;
}
.highlight-word::after {
    content: '';
    position: absolute;
    left: -4px;
    right: -4px;
    bottom: 2px;
    height: 35%;
    background: rgba(231, 67, 16, 0.15);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    z-index: -1;
}
.highlight-word.is-highlighted::after {
    transform: scaleX(1);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.sig-inbox-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 0.15em;
    vertical-align: baseline;
    opacity: 1;
    transform: scale(1);
}
.sig-inbox-icon .material-symbols-outlined {
    font-size: 1em;
    color: var(--color-signals);
    transform: translateY(0.1em);
}
.sig-inbox-icon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--color-signals);
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
    animation: sig-ping 2.5s 0.35s ease-out infinite;
}
@keyframes sig-ping {
    0% { opacity: 0.7; transform: scale(0.8); }
    30% { opacity: 0; transform: scale(2.2); }
    100% { opacity: 0; transform: scale(2.2); }
}

.hero-title {
    font-size: clamp(36px, 5.5vw, 60px);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: var(--space-xl);
    color: var(--color-text);
}
.hero-sub {
    font-size: 18px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    max-width: 620px;
    margin: 0 auto var(--space-2xl);
}
.hero-sub strong { color: var(--color-text); font-weight: 600; }
.hero-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-lg);
}

/* ====================================================================
   VIDEO SECTION
   ==================================================================== */
.video-section {
    padding: 0 0 var(--space-5xl);
    background: var(--color-bg);
}
.video-caption {
    font-size: 16px;
    color: var(--color-text-secondary);
    text-align: center;
    margin-bottom: var(--space-2xl);
}
.video-frame {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto var(--space-2xl);
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--color-border);
}
.video-frame::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: calc(var(--radius-xl) + 2px);
    background: linear-gradient(135deg, var(--color-brand), #2563EB, var(--color-brand));
    background-size: 200% 200%;
    z-index: -1;
    opacity: 0.4;
    animation: gradientShift 6s ease infinite;
}
@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.video-frame wistia-player {
    display: block;
    width: 100%;
}

/* Hero screenshot showcase (tabbed) */
.hero-showcase {
    max-width: 900px;
    margin: 0 auto var(--space-2xl);
}
.showcase-tabs {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}
.showcase-tab {
    position: relative;
    padding: var(--space-sm) 0;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.2s ease;
}
.showcase-tab:hover {
    color: var(--color-text-secondary);
}
.showcase-tab.active {
    color: var(--color-text);
    border-bottom-color: transparent;
}
.showcase-tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    height: 2px;
    background: var(--color-brand);
    animation: tab-progress 6s linear forwards;
}
@keyframes tab-progress {
    from { width: 0; }
    to { width: 100%; }
}
.showcase-frame {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    background: var(--color-code-bg);
}
.showcase-titlebar {
    display: flex;
    gap: 6px;
    padding: 10px 14px;
    background: var(--color-code-bg);
}
.showcase-titlebar span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.showcase-titlebar span:nth-child(1) { background: #ff5f57; }
.showcase-titlebar span:nth-child(2) { background: #febc2e; }
.showcase-titlebar span:nth-child(3) { background: #28c840; }
.showcase-panels {
    position: relative;
}
.showcase-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}
.showcase-panel.active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
}
.showcase-panel img {
    width: 100%;
    height: auto;
    display: block;
}

/* ====================================================================
   HOW IT WORKS — Replaces your stack
   ==================================================================== */
.how-it-works {
    padding: var(--space-5xl) 0;
    background: linear-gradient(180deg, var(--color-brand-light) 0%, var(--color-bg-white) 100%);
}

/* Before / After comparison */
.replaces-comparison {
    display: flex;
    align-items: center;
    gap: var(--space-2xl);
}
.replaces-before,
.replaces-after {
    flex: 1;
    padding: var(--space-2xl);
    border-radius: var(--radius-xl);
    text-align: center;
}
.replaces-before {
    background: transparent;
    border: none;
    filter: grayscale(40%) brightness(0.97);
}
.replaces-after {
    background: white;
    border: 2px solid var(--color-brand);
    box-shadow: 0 8px 30px rgba(231, 67, 16, 0.1);
}
.replaces-scenario-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--space-xl);
    color: var(--color-text-muted);
}
.replaces-scenario-logo {
    display: block;
    height: 26px;
    width: auto;
    margin: 0 auto var(--space-xl);
}

/* Disconnected tools (before) — scattered, no container */
.replaces-scattered {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 6px;
    margin-bottom: var(--space-xl);
    padding: var(--space-lg) 0;
}
.replaces-tool-disconnected {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 18px;
    background: white;
    border: 1px dashed #D4D4D4;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease;
}
.replaces-tool-disconnected.rot-1 { transform: rotate(-6deg) translate(-8px, 6px);  opacity: 0.82; box-shadow: 2px 4px 12px rgba(0,0,0,0.10); }
.replaces-tool-disconnected.rot-2 { transform: rotate(5deg) translate(6px, -10px);  opacity: 0.90; box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
.replaces-tool-disconnected.rot-3 { transform: rotate(-3deg) translate(-4px, 12px); opacity: 0.75; box-shadow: 4px 6px 16px rgba(0,0,0,0.12); }
.replaces-tool-disconnected.rot-4 { transform: rotate(8deg) translate(10px, -4px);  opacity: 0.88; box-shadow: 1px 2px 6px rgba(0,0,0,0.06); }
.replaces-tool-disconnected.rot-5 { transform: rotate(-5deg) translate(-6px, 8px);  opacity: 0.78; box-shadow: 3px 5px 14px rgba(0,0,0,0.11); }
.replaces-tool-disconnected.rot-6 { transform: rotate(4deg) translate(8px, -8px);   opacity: 0.92; box-shadow: 0 2px 5px rgba(0,0,0,0.04); }
.replaces-scenario-note {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 0;
}

/* Scattered tool icons (without Beacon) */
.replaces-tools-chaos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 16px;
    padding: 0;
    margin: -8px 0;
    position: relative;
    z-index: 0;
}
.chaos-icon {
    color: var(--color-text-muted);
    opacity: 0.25;
    animation: chaos-float 4s ease-in-out infinite;
}
.chaos-icon.ci-1 { font-size: 36px; transform: rotate(-12deg); animation-delay: 0s; }
.chaos-icon.ci-2 { font-size: 28px; transform: rotate(8deg);   animation-delay: -0.5s; }
.chaos-icon.ci-3 { font-size: 42px; transform: rotate(-5deg);  animation-delay: -1s;   opacity: 0.18; }
.chaos-icon.ci-4 { font-size: 32px; transform: rotate(10deg);  animation-delay: -1.5s; }
.chaos-icon.ci-5 { font-size: 38px; transform: rotate(-7deg);  animation-delay: -2s;   opacity: 0.2; }
.chaos-icon.ci-6 { font-size: 44px; transform: rotate(-9deg);  animation-delay: -2.5s; opacity: 0.15; }

@keyframes chaos-float {
    0%, 100% { translate: 0 0; }
    50%      { translate: 2px -3px; }
}

/* Hub-and-spoke layout (after) */
.replaces-hub {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-md);
    align-items: center;
    justify-items: center;
    padding: var(--space-xl) var(--space-md);
}
.hub-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}
.hub-dot {
    fill: var(--color-brand);
    opacity: 0;
}
.hub-center {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    padding: var(--space-lg) var(--space-3xl);
    background: radial-gradient(ellipse at center, white 30%, rgba(255,255,255,0) 80%);
}
.hub-logo {
    height: 32px;
    width: auto;
}
.hub-spoke {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: var(--color-brand-light);
    border: 1px solid rgba(231, 67, 16, 0.2);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    z-index: 1;
    white-space: nowrap;
}
.replaces-unified-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--space-sm);
}
.replaces-unified-badge span {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
}

/* Arrow divider */
.replaces-arrow-divider {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-brand);
    color: white;
}
.replaces-arrow-divider .material-symbols-outlined {
    font-size: 24px;
}

/* ====================================================================
   FEATURE SPOTLIGHT (Rate Radar)
   ==================================================================== */
.feature-spotlight {
    padding: var(--space-5xl) 0;
    background: var(--color-bg);
}
.rr-title-icon {
    display: inline-block;
    height: 0.85em;
    width: auto;
    vertical-align: -0.1em;
    margin-right: 8px;
}
.sh-title-pill {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    vertical-align: middle;
}
.sh-title-pill .material-symbols-outlined {
    font-size: 0.85em;
    color: var(--color-signals);
}
.feature-spotlight .section-sub {
    margin-bottom: var(--space-3xl);
}
/* Rate Radar features bar */
.rr-features-bar {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-lg) var(--space-2xl);
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-xl);
}
.rr-features-bar li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-secondary);
    white-space: nowrap;
}
.rr-features-bar li .material-symbols-outlined {
    font-size: 22px;
    color: var(--color-rate-radar);
    flex-shrink: 0;
}

/* Rate Radar showcase container */
.rr-showcase {
    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

/* Tab hint icon */
.rr-tab-hint {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--color-text-muted);
    opacity: 0.5;
    transition: opacity 0.3s ease;
    animation: hint-nudge 1.5s ease-in-out infinite;
    pointer-events: none;
}
.rr-tab-hint.hidden {
    opacity: 0;
    animation: none;
}
@keyframes hint-nudge {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50%      { transform: translateY(-50%) translateX(4px); }
}

/* Tab bar */
.rr-tabs {
    position: relative;
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--color-border);
    background: #fafafa;
    overflow-x: auto;
}
.rr-tab {
    flex: 1;
    padding: var(--space-md) var(--space-lg);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
}
.rr-tab:hover { color: var(--color-text-secondary); }
.rr-tab-active {
    color: var(--color-rate-radar);
    border-bottom-color: var(--color-rate-radar);
}

/* Panels */
.rr-panel { display: none; padding: var(--space-xl); opacity: 0; transition: opacity 0.2s ease; }
.rr-panel-active { display: block; }
.rr-panel-visible { opacity: 1; }
.rr-panel-img { width: 100%; height: auto; display: block; border-radius: var(--radius-md); }

.rr-cta-row {
    text-align: center;
    margin-top: var(--space-2xl);
}
.rr-cta-note {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: var(--space-md);
}


/* ====================================================================
   SIGNALS HUB SPOTLIGHT
   ==================================================================== */
.signals-spotlight {
    padding: var(--space-5xl) 0;
    background: var(--color-bg);
}
.signals-spotlight .section-sub {
    margin-bottom: var(--space-2xl);
}

/* Signals Hub features bar (mirrors Rate Radar pattern) */
.sh-features-bar {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-lg) var(--space-2xl);
    margin-bottom: var(--space-xl);
}
.sh-features-bar li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-secondary);
    white-space: nowrap;
}
.sh-features-bar li .material-symbols-outlined {
    font-size: 22px;
    color: var(--color-signals);
    flex-shrink: 0;
}
.sh-showcase {
    max-width: 740px;
    margin: 0 auto;
}
.sh-cta-row {
    text-align: center;
    margin-top: var(--space-2xl);
}

/* ---- Signals Hub — Priority Sections ---- */
.sh-priority-section {
    margin-bottom: var(--space-xl);
}
.sh-priority-section:last-child {
    margin-bottom: 0;
}
.sh-priority-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-md);
}
.sh-priority-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.sh-dot-high { background: var(--color-signal-high); }
.sh-dot-medium { background: var(--color-signal-medium); }
.sh-dot-low { background: var(--color-signal-positive); }
.sh-priority-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.sh-priority-count {
    font-size: 12px;
    color: var(--color-text-muted);
}

/* ---- Signal Card (matches V1 .insight-card) ---- */
.sh-card {
    display: flex;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: var(--space-md);
    overflow: hidden;
}
.sh-card:last-child {
    margin-bottom: 0;
}
.sh-card .sh-price-btn {
    margin-left: auto;
}

/* Expanded card — focal point */
.sh-card-expanded {
    margin-left: -24px;
    margin-right: -24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.10), 0 4px 16px rgba(0,0,0,0.06);
    transform: scale(1.015);
    z-index: 2;
    position: relative;
}

/* ── Comparison: Without vs With Beacon ── */
.sh-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}

/* Left panel — the problem (recessive) */
.sh-comparison-without {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
}

/* Right panel — the solution (prominent) */
.sh-comparison-with {
    background: white;
    border: 1px solid rgba(231, 67, 16, 0.25);
    border-left: 3px solid var(--color-brand);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}

/* Shared label */
.sh-comparison-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-muted);
    margin-bottom: var(--space-lg);
}
.sh-comparison-with .sh-comparison-label {
    color: var(--color-brand);
}

/* Without: stacked conflicting items */
.sh-comparison-item {
    padding: var(--space-md) 0;
}
.sh-comparison-item + .sh-comparison-item {
    border-top: 1px solid var(--color-border-light);
}
.sh-comparison-tool {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-bottom: 2px;
}
.sh-comparison-rec {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin: 0;
}
.sh-comparison-reason {
    display: block;
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* With: insight + action */
.sh-comparison-insight {
    font-size: 13px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0;
}
.sh-comparison-action {
    margin-bottom: var(--space-sm);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
}

/* Directional arrows */
.sh-arrow {
    font-size: 18px;
    vertical-align: middle;
    margin-left: 4px;
}
.sh-arrow-down { color: var(--color-signal-high); }
.sh-arrow-flat { color: var(--color-text-muted); }
.sh-arrow-up { color: var(--color-signal-low); }

/* Summary line */
.sh-comparison-summary {
    font-size: 12px;
    color: var(--color-text-muted);
    margin: var(--space-md) 0 0;
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border-light);
}

/* Priority left bar (4px colored border — matches V1 .insight-priority-indicator) */
.sh-priority-bar {
    width: 4px;
    flex-shrink: 0;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
.sh-bar-high { background: var(--color-signal-high); }
.sh-bar-medium { background: var(--color-signal-medium); }
.sh-bar-low { background: var(--color-signal-positive); }

/* Card content area */
.sh-card-content {
    flex: 1;
    padding: var(--space-lg) var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-width: 0;
}

/* Card header (clickable area) */
.sh-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-md);
}
.sh-header-left {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    flex: 1;
    min-width: 0;
}

/* Expand/collapse icon */
.sh-expand-icon {
    color: var(--color-text-muted);
    font-size: 22px;
    flex-shrink: 0;
    margin-top: var(--space-sm);
    transition: transform 0.2s;
    cursor: default;
}
.sh-expand-open {
    transform: rotate(180deg);
}

/* ---- Date row (matches V1 .insight-date) ---- */
.sh-date-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}
.sh-date {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.2;
}

/* Event box (small numbered square) */
.sh-event-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-sm);
    background: #171725;
    color: white;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

/* Channel status pill (matches V1 .status-badge) */
.sh-short { display: none; }
.sh-status-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}
.sh-status-closed {
    background: rgba(245, 158, 11, 0.1);
    color: #D97706;
}
.sh-status-open {
    background: rgba(95, 191, 139, 0.1);
    color: var(--color-signal-positive);
}

/* Base price indicator (matches V1 .base-price-indicator) */
.sh-base-price {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}
.sh-base-price strong {
    color: var(--color-text);
}

/* LTS indicator (matches V1 .lts-indicator) */
.sh-lts {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}
.sh-lts .material-symbols-outlined {
    font-size: 14px;
}
.sh-lts strong {
    color: var(--color-text);
}

/* ---- Channel status badge ---- */
.sh-channel-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.sh-channel-open {
    background: #E8F5E9;
    color: var(--color-signal-positive);
}
.sh-channel-partial {
    background: #fff8e1;
    color: #F57C00;
}

/* ---- Expand chevron ---- */
.sh-expand-chevron {
    margin-left: auto;
    color: var(--color-text-secondary);
}
.sh-expand-chevron .material-symbols-outlined {
    font-size: 20px;
}

/* ---- Source badges (matches V1 .insight-source-badge) ---- */
.sh-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    margin-left: auto;
}
/* Outline variants (low confidence) */
.sh-source-strong { background: #fff; border: 1px solid var(--color-category-strong); color: var(--color-category-strong); }
.sh-source-ahead { background: #fff; border: 1px solid var(--color-category-ahead); color: var(--color-category-ahead); }
.sh-source-soft { background: #fff; border: 1px solid #F59E0B; color: #F59E0B; }
.sh-source-behind { background: #fff; border: 1px solid var(--color-category-behind); color: var(--color-category-behind); }
.sh-source-rateradar { background: var(--color-rate-radar); color: white; }
.sh-source-badge .material-symbols-outlined { font-size: 14px; color: white; }
/* Solid variants (high confidence) */
.sh-source-strong-solid { background: var(--color-category-strong); color: white; }
.sh-source-ahead-solid { background: var(--color-category-ahead); color: white; }
.sh-source-soft-solid { background: #F59E0B; color: white; }
.sh-source-behind-solid { background: var(--color-category-behind); color: white; }
.sh-source-rateradar-solid { background: var(--color-rate-radar); color: white; }

/* ---- Action row (matches V1 .insight-action-row) ---- */
.sh-action-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}
.sh-action-suggestion {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg);
    border-radius: var(--radius-md);
    font-size: 12px;
    color: var(--color-text-secondary);
    line-height: 1.5;
    min-width: 180px;
}
.sh-action-suggestion strong {
    color: var(--color-text);
    font-weight: 600;
}
/* Inline metric badges inside action suggestion (matches V1 .metric-value-badge) */
.sh-inline-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    vertical-align: middle;
    margin: 0 1px;
}
.sh-inline-positive {
    background: rgba(95, 191, 139, 0.12);
    color: var(--color-signal-positive);
}
.sh-inline-negative {
    background: rgba(239, 35, 60, 0.12);
    color: var(--color-danger);
}
.sh-inline-action {
    background: rgba(0, 88, 255, 0.12);
    color: var(--color-explorer);
}

/* Price suggestion button (matches V1 .price-suggestion-btn) */
.sh-price-btn {
    font-family: var(--font);
    font-size: 12px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-explorer);
    background: var(--color-explorer);
    color: white;
    cursor: default;
    white-space: nowrap;
    flex-shrink: 0;
}
/* Review mode (outlined blue) */
.sh-price-review {
    background: white;
    border: 2px solid var(--color-explorer);
    color: var(--color-explorer);
}
/* Hold mode (grey) */
.sh-price-hold {
    background: #E6E6E6;
    border-color: #E6E6E6;
    color: var(--color-text-secondary);
}

/* Mark as read button (matches V1 .mark-read-btn) */
.sh-mark-read {
    font-family: var(--font);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: default;
    white-space: nowrap;
    flex-shrink: 0;
}
.sh-mark-read .material-symbols-outlined {
    font-size: 16px;
}

/* ---- Collapsible expanded detail (matches V1 .insight-collapsible) ---- */
.sh-collapsible {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Detail boxes (forecast + rate radar) */
.sh-detail-box {
    padding: var(--space-md);
    background: var(--color-bg);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-border);
}
.sh-detail-forecast {
    border-left-color: var(--color-forecaster);
}
.sh-detail-rateradar {
    border-left-color: var(--color-rate-radar);
}
.sh-detail-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--color-border-light);
}
.sh-detail-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.sh-detail-context {
    font-size: 10px;
    color: var(--color-text-muted);
    margin-left: auto;
}

/* Forecast metrics (matches V1 .forecast-metrics-row) */
.sh-forecast-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
}
.sh-forecast-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-sm);
    background: white;
    border-radius: var(--radius-sm);
}
.sh-metric-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.sh-metric-value {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
}
.sh-metric-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
}
.sh-badge-positive {
    background: rgba(95, 191, 139, 0.12);
    color: var(--color-signal-positive);
}
.sh-badge-negative {
    background: rgba(239, 35, 60, 0.12);
    color: var(--color-danger);
}
.sh-badge-neutral {
    background: var(--color-bg);
    color: var(--color-text-secondary);
}

/* Rate Radar 6-column competitor grid (matches V1 .rate-metrics-row) */
.sh-rate-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-sm);
}
.sh-rate-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-sm);
    background: white;
    border-radius: var(--radius-sm);
}
.sh-rate-cheapest {
    background: rgba(95, 191, 139, 0.08);
    border: 1px solid var(--color-signal-positive);
}
.sh-rate-expensive {
    background: rgba(237, 27, 50, 0.08);
    border: 1px solid var(--color-danger);
}
.sh-rate-you {
    background: rgba(0, 88, 255, 0.08);
    border: 1px solid var(--color-explorer);
}
.sh-rate-soldout .sh-rate-value {
    color: var(--color-text-muted);
}
.sh-rate-name {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.sh-rate-you .sh-rate-name {
    color: var(--color-explorer);
}
.sh-rate-value {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
}
.sh-sold-out-text {
    font-size: 11px;
    color: var(--color-danger);
    font-weight: 600;
}
.sh-rate-change {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
}
.sh-change-up {
    background: rgba(95, 191, 139, 0.12);
    color: var(--color-signal-positive);
}
.sh-change-down {
    background: rgba(239, 35, 60, 0.12);
    color: var(--color-danger);
}
.sh-rate-room {
    font-size: 9px;
    color: var(--color-text-muted);
}

/* ====================================================================
   PLATFORM FEATURES (Module Grid)
   ==================================================================== */
.platform-features {
    padding: var(--space-5xl) 0;
}
.module-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}
.module-card {
    padding: 0;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    background: white;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
}
.module-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--module-color);
}
.module-img {
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 1px solid var(--color-border);
}
.module-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--module-color) 12%, white);
    color: var(--module-color);
    margin: var(--space-lg) 0 0 var(--space-xl);
    transition: transform 0.3s ease;
}
.module-icon img,
.module-icon svg {
    width: 24px;
    height: 24px;
}
.module-card:hover .module-icon {
    animation: iconBounce 0.4s ease;
}
@keyframes iconBounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}
.module-subtitle {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
    padding: 0 var(--space-xl);
    margin-bottom: var(--space-sm);
}
.module-card h3 {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: var(--space-sm);
    padding: var(--space-lg) var(--space-xl) 0;
}
.module-card p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-secondary);
    padding: 0 var(--space-xl) var(--space-md);
    margin: 0;
}
.module-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 13px;
    font-weight: 500;
    color: var(--module-color);
    padding: 0 var(--space-xl) var(--space-lg);
    margin-top: auto;
    transition: gap 0.2s ease;
}
.module-link:hover {
    gap: var(--space-sm);
}
.module-link .material-symbols-outlined {
    font-size: 16px;
}
.module-link-soon {
    color: var(--color-text-muted);
    cursor: default;
}
.module-link-soon:hover {
    gap: var(--space-xs);
}

/* Systems callout */
.systems-callout {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin-top: var(--space-2xl);
    padding: var(--space-lg) var(--space-xl);
    background: var(--color-systems-light);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}
.systems-callout-icon {
    flex-shrink: 0;
    color: var(--color-systems);
}
.systems-callout-text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text-secondary);
}
.systems-callout-text strong {
    color: var(--color-text);
}

/* ====================================================================
   BUILT-IN INTELLIGENCE (Combined Signals + AI)
   ==================================================================== */
.intelligence-section {
    padding: var(--space-5xl) 0;
    position: relative;
    overflow: hidden;
}
.intelligence-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}
.intelligence-section .container {
    position: relative;
    z-index: 1;
}
.intelligence-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 120px;
    align-items: start;
    margin-top: var(--space-3xl);
}
.intelligence-col-title {
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 700;
    line-height: 1.2;
    padding-left: var(--space-xl);
}
.intelligence-col-title .sh-title-pill {
    vertical-align: baseline;
}
.intelligence-col-desc {
    margin-top: var(--space-xl);
    color: var(--color-text-secondary);
    font-size: 1rem;
    line-height: 1.6;
    padding-left: var(--space-xl);
}
.intelligence-link {
    color: var(--color-signals);
    text-decoration: none;
    font-weight: 500;
    margin-left: var(--space-md);
}
.intelligence-link:hover {
    text-decoration: underline;
}
.intelligence-link .material-symbols-outlined {
    font-size: 14px;
    vertical-align: -2px;
    margin-left: 2px;
    transition: margin-left 0.2s ease;
}
.intelligence-link:hover .material-symbols-outlined {
    margin-left: 5px;
}
.intelligence-col .sh-showcase {
    margin-top: var(--space-3xl);
    margin-left: 0;
    margin-right: 0;
}
.intelligence-col .ai-panel-wrapper {
    margin-top: var(--space-3xl);
    margin-left: 0;
    margin-right: 0;
    max-width: none;
}
.intelligence-col .sh-comparison {
    gap: var(--space-sm);
}
.intelligence-col .sh-comparison-without,
.intelligence-col .sh-comparison-with {
    padding: var(--space-lg);
}
.intelligence-col .sh-comparison-label {
    margin-bottom: var(--space-sm);
}
.intelligence-col .sh-comparison-item {
    padding: var(--space-sm) 0;
}
.intelligence-col .sh-comparison-summary {
    margin: var(--space-sm) 0 0;
    padding-top: var(--space-sm);
}
.intelligence-section .testimonial {
    margin-top: var(--space-3xl);
    padding-bottom: var(--space-xl);
}
.intelligence-col .ai-panel {
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    transition: box-shadow 0.2s;
}
.intelligence-col .ai-panel:hover {
    box-shadow: var(--shadow-md);
}

/* ====================================================================
   AI INSIGHTS
   ==================================================================== */
.ai-insights-section {
    padding: var(--space-5xl) 0 var(--space-3xl);
    background: var(--color-bg);
}
.ai-panel-wrapper {
    max-width: 560px;
    margin: var(--space-3xl) auto 0;
}

/* AI Insights panel mockup */
.ai-panel {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.10), var(--shadow-lg);
    border: 1px solid rgba(124, 58, 237, 0.15);
    overflow: hidden;
}
.ai-panel-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-lg) var(--space-xl);
    background: linear-gradient(135deg, #7C3AED, #2563EB);
    color: white;
}
.ai-panel-header .material-symbols-outlined {
    font-size: 20px;
}
.ai-panel-title {
    font-size: 14px;
    font-weight: 600;
}
.ai-panel-body {
    padding: var(--space-md) var(--space-xl) var(--space-lg);
}
.ai-panel-section {
    margin-bottom: var(--space-md);
}
.ai-panel-section:last-child {
    margin-bottom: 0;
}
.ai-panel-section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: var(--space-sm) 0;
    margin-bottom: var(--space-sm);
}
.ai-panel-section-header .material-symbols-outlined {
    font-size: 16px;
}
.ai-panel-section-header.positive { color: var(--color-success); }
.ai-panel-section-header.observation { color: var(--color-text-muted); }
.ai-panel-section-header.concern { color: var(--color-danger); }

/* Individual insight */
.ai-insight {
    padding: var(--space-md);
    border-left: 3px solid transparent;
    margin-bottom: var(--space-sm);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--color-bg);
}
.ai-insight:last-child { margin-bottom: 0; }
.ai-insight.positive { border-left-color: var(--color-success); }
.ai-insight.observation { border-left-color: var(--color-text-muted); }
.ai-insight.concern { border-left-color: var(--color-danger); }
.ai-insight-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 2px;
}
.ai-insight-detail {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}
.ai-insight-detail strong {
    color: var(--color-text);
}
.ai-insight-context {
    font-size: 11px;
    line-height: 1.5;
    color: var(--color-text-muted);
}
/* ====================================================================
   TESTIMONIAL STRIP
   ==================================================================== */
.testimonial-strip {
    padding: var(--space-2xl) 0;
    background: var(--color-bg);
    position: relative;
    overflow: hidden;
}
.testimonial-strip::before {
    display: none;
}
.testimonial {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    border: none;
    padding: 0;
}
.testimonial p {
    font-size: clamp(16px, 2.5vw, 20px);
    line-height: 1.6;
    color: var(--color-text);
    font-style: normal;
    font-weight: 500;
    margin-bottom: var(--space-md);
}
.testimonial cite {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    color: var(--color-text-secondary);
}

/* ====================================================================
   PRICING
   ==================================================================== */
.pricing {
    padding: var(--space-5xl) 0;
}
.pricing:first-child {
    padding-top: 130px;
}
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    align-items: stretch;
}
.pricing-card {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    position: relative;
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
}
.pricing-card:hover {
    box-shadow: var(--shadow-lg);
}
.pricing-card.popular {
    border-color: var(--color-brand);
    box-shadow: var(--shadow-md);
}
.pricing-popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 600;
    color: white;
    background: var(--color-brand);
    padding: 4px 16px;
    border-radius: 100px;
    white-space: nowrap;
}
.pricing-tier {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-brand);
    margin-bottom: var(--space-xs);
}
.pricing-module-icons {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--space-sm);
}
.pricing-module-icons span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, currentColor 8%, white);
}
.pricing-module-icons svg,
.pricing-module-icons img {
    width: 20px;
    height: 20px;
}
.pricing-module {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-lg);
}
.pricing-price {
    font-size: 36px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
}
.pricing-price span {
    font-size: 15px;
    font-weight: 400;
    color: var(--color-text-secondary);
}
.pricing-note {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid var(--color-border-light);
}
.pricing-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
}
.pricing-features li {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 14px;
    color: var(--color-text-secondary);
}
.pricing-features li .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-success);
}
.pricing-features .pricing-feature-add .material-symbols-outlined {
    color: var(--color-text-muted);
}
.pricing-card .btn {
    width: 100%;
    margin-top: auto;
}

.pricing-trial-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 600;
    color: white;
    background: var(--color-brand);
    padding: 4px 16px;
    border-radius: 100px;
    white-space: nowrap;
}
.pricing-price-trial {
    font-size: 36px;
    font-weight: 700;
    color: var(--color-brand);
    margin-bottom: var(--space-xs);
}
.pricing-price-trial span {
    font-size: 15px;
    font-weight: 400;
    color: var(--color-text-secondary);
}
.pricing-then {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid var(--color-border-light);
}
.pricing-trial-note {
    font-size: 12px;
    color: var(--color-text-muted);
    text-align: center;
    margin-top: var(--space-md);
}

/* Enterprise banner (plans page) */
.enterprise-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xl);
    margin-top: var(--space-2xl);
    padding: var(--space-2xl) var(--space-3xl);
    background: var(--color-text);
    color: white;
    border-radius: var(--radius-xl);
}
.enterprise-banner .pricing-tier {
    color: white;
}
.enterprise-banner-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}
.enterprise-banner-text p {
    color: rgba(255,255,255,0.7);
    font-size: 15px;
    margin: var(--space-xs) 0 0;
}
.enterprise-banner-features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-xl);
    font-size: 14px;
    color: rgba(255,255,255,0.85);
}
.enterprise-banner .btn {
    white-space: nowrap;
    flex-shrink: 0;
    border-color: rgba(255,255,255,0.4);
    color: white;
}
.enterprise-banner .btn:hover {
    background: white;
    color: var(--color-text);
    border-color: white;
}


/* Feature comparison table */
.comparison-section {
    padding: var(--space-5xl) 0;
    background: var(--color-bg);
}
.comparison-wrapper {
    margin-top: var(--space-3xl);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
}
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.comparison-table thead th {
    padding: var(--space-lg) var(--space-xl);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    background: white;
    border-bottom: 2px solid var(--color-border);
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 2;
}
.comparison-table thead th:first-child {
    text-align: left;
}
.comparison-table .comparison-popular {
    color: var(--color-brand);
}
.comparison-feature-col {
    min-width: 240px;
}
.comparison-table tbody td {
    padding: var(--space-md) var(--space-xl);
    border-bottom: 1px solid var(--color-border);
    text-align: center;
    color: var(--color-text);
}
.comparison-table tbody td:first-child {
    text-align: left;
    color: var(--color-text-secondary);
}
.comparison-table .comparison-group-header td {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text);
    background: var(--color-bg);
    padding: var(--space-lg) var(--space-xl);
    text-align: left;
    border-bottom: none;
    vertical-align: middle;
}
.comparison-group-icons {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 10px;
    vertical-align: middle;
}
.comparison-group-icons > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, currentColor 8%, white);
}
.comparison-group-icons svg,
.comparison-group-icons img {
    width: 15px;
    height: 15px;
}
.comparison-cta-row td {
    padding: var(--space-xl) var(--space-xl) var(--space-lg);
    border-bottom: none;
}
.comparison-cta-row .btn {
    width: 100%;
}
.comparison-cta-row-mobile { display: none; }
/* Tier toggle (mobile only) */
.comparison-tier-toggle { display: none; }

.comparison-check {
    color: var(--color-success, #22c55e);
    font-size: 20px;
}
.comparison-cross {
    color: var(--color-text-muted);
    font-size: 20px;
    opacity: 0.3;
}

/* FAQ categories (plans page) */
.faq-categories {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xl);
    max-width: 720px;
    margin: var(--space-3xl) auto 0;
}
.faq-category-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text);
    padding-bottom: var(--space-md);
    border-bottom: 2px solid var(--color-brand);
    margin-bottom: 0;
}
.faq-categories .faq-list {
    margin: 0;
}

/* Currency toggle — pill segmented control */
.currency-toggle {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-top: var(--space-lg);
    margin-bottom: var(--space-2xl);
}
.currency-btn {
    padding: var(--space-sm) var(--space-lg);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: all 0.2s ease;
}
.currency-btn:first-child {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.currency-btn:last-child {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.currency-btn:not(:first-child) {
    border-left: none;
}
.currency-btn:hover {
    color: var(--color-text-secondary);
}
.currency-btn-active {
    background: var(--color-text);
    color: white;
    border-color: var(--color-text);
}
.currency-btn-active + .currency-btn {
    border-left: none;
}

/* Price swap fade */
.data-price {
    transition: opacity 0.2s ease;
}
.data-price.price-fading {
    opacity: 0;
}

/* ====================================================================
   CTA FINAL
   ==================================================================== */
.cta-final {
    padding: var(--space-5xl) 0;
    text-align: center;
    background: linear-gradient(180deg, var(--color-bg-white) 0%, var(--color-brand-light) 100%);
}
.cta-final h2 {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--space-lg);
}
.cta-final > .container > p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    max-width: 520px;
    margin: 0 auto var(--space-2xl);
}
.cta-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

/* ====================================================================
   ABOUT PAGE
   ==================================================================== */
.about-hero {
    padding: 130px 0 var(--space-4xl);
    text-align: center;
}
.about-hero .hero-sub {
    max-width: 680px;
    margin: 0 auto var(--space-lg);
}
.mission-section {
    padding: var(--space-4xl) 0;
    background: var(--color-brand-light);
}
.mission-quote {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 300;
    line-height: 1.5;
    color: var(--color-text);
    border-left: none;
    padding: 0;
}
.mission-quote p {
    margin: 0;
}
.story-section {
    padding: var(--space-4xl) 0;
}
.story-content {
    max-width: 620px;
    margin: var(--space-2xl) auto 0;
    text-align: left;
}
.story-content p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-lg);
}
.values-section {
    padding: var(--space-4xl) 0;
    background: var(--color-bg);
}
.values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2xl);
    margin-top: var(--space-3xl);
}
.value-card {
    padding: var(--space-2xl);
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.value-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--value-color, var(--color-brand)) 10%, white);
    color: var(--value-color, var(--color-brand));
    margin-bottom: var(--space-lg);
}
.value-card h3 {
    font-size: 18px;
    margin-bottom: var(--space-sm);
}
.value-card p {
    font-size: 15px;
    color: var(--color-text-secondary);
    line-height: 1.6;
}
.contact-section {
    padding: var(--space-4xl) 0;
}
.contact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
    margin-top: var(--space-3xl);
    text-align: center;
}
.contact-item h4 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: var(--space-xs);
}
.contact-item a {
    font-size: 14px;
    color: var(--color-brand);
    word-break: break-all;
}

/* Dark contact override for about page */
.cta-final#contact {
    background: var(--color-text);
    color: white;
}
.cta-final#contact .section-label {
    color: rgba(255,255,255,0.5);
}
.cta-final#contact .section-title {
    color: white;
}
.cta-final#contact .contact-item h4 {
    color: white;
}
.cta-final#contact .contact-item a {
    color: var(--color-brand);
}

/* ====================================================================
   404 ERROR PAGE
   ==================================================================== */
.error-page {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5xl) 0;
}

.error-content {
    text-align: center;
    max-width: 480px;
    margin: 0 auto;
}

.error-beacon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--color-brand-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-xl);
    animation: error-pulse 3s ease-in-out infinite;
}

.error-beacon .material-symbols-outlined {
    font-size: 36px;
    color: var(--color-brand);
}

.error-label {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
}

.error-content h1 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: var(--space-lg);
}

.error-description {
    color: var(--color-text-secondary);
    font-size: 17px;
    line-height: 1.6;
    margin-bottom: var(--space-2xl);
}

@keyframes error-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
    .error-beacon { animation: none; }
}

/* ====================================================================
   FOOTER
   ==================================================================== */
.footer {
    padding: var(--space-3xl) 0 var(--space-2xl);
    border-top: 1px solid var(--color-border);
    background: white;
}
.footer-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}
.footer-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}
.footer-logo-img {
    height: 24px;
    width: auto;
}
.footer-tagline {
    font-size: 13px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}
.footer-columns {
    display: flex;
    justify-content: space-between;
}
.footer-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.footer-col-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
}
.footer-col a {
    font-size: 13px;
    color: var(--color-text-secondary);
    transition: color 0.2s;
}
.footer-col a:hover { color: var(--color-brand); }
.footer-soon {
    font-size: 13px;
    color: var(--color-text-muted);
    opacity: 0.55;
}
.footer-soon-badge {
    font-size: 9px;
    font-weight: 500;
    color: #666;
    background: #f0f0f0;
    padding: 1px 6px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 6px;
    vertical-align: middle;
}
.footer-copy {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: var(--space-2xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* ====================================================================
   STICKY MOBILE CTA
   ==================================================================== */
.sticky-cta {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: var(--space-md) var(--space-xl);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}
.sticky-cta.visible {
    transform: translateY(0);
}
.sticky-cta-btn {
    flex: 1;
    max-width: 240px;
    text-align: center;
}

/* ====================================================================
   PREMIUM ANIMATIONS — Grain, Glow, Pulse, Micro-interactions
   ==================================================================== */

/* Grain/noise texture overlay */
.grain-overlay {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}

/* Signals Hub — live-data pulsing */
.sh-metric-value {
    animation: metricPulse 3s ease-in-out infinite;
}
@keyframes metricPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}
.sh-price-btn {
    animation: btnGlow 2.5s ease-in-out infinite;
}
@keyframes btnGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 88, 255, 0); }
    50% { box-shadow: 0 0 12px 2px rgba(0, 88, 255, 0.15); }
}
.sh-rate-cell:nth-child(2) .sh-rate-value { animation: metricPulse 3s ease-in-out 0.3s infinite; }
.sh-rate-cell:nth-child(3) .sh-rate-value { animation: metricPulse 3s ease-in-out 0.6s infinite; }
.sh-rate-cell:nth-child(4) .sh-rate-value { animation: metricPulse 3s ease-in-out 0.9s infinite; }
.sh-rate-cell:nth-child(5) .sh-rate-value { animation: metricPulse 3s ease-in-out 1.2s infinite; }
.sh-rate-cell:nth-child(6) .sh-rate-value { animation: metricPulse 3s ease-in-out 1.5s infinite; }

/* Glow accent behind AI panel */
.ai-panel-wrapper {
    position: relative;
}
.ai-panel-wrapper::after {
    content: '';
    position: absolute;
    inset: 20px;
    background: linear-gradient(135deg, #7C3AED, #2563EB);
    filter: blur(60px);
    opacity: 0.08;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}

/* Trial badge bounce-in */
.pricing-trial-badge {
    animation: badgeBounce 0.6s ease 0.5s both;
}
@keyframes badgeBounce {
    0% { transform: translateX(-50%) scale(0); }
    60% { transform: translateX(-50%) scale(1.1); }
    100% { transform: translateX(-50%) scale(1); }
}

/* Button click ripple */
.btn-primary {
    position: relative;
    overflow: hidden;
}
.btn-primary::after {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    top: 50%;
    left: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 60%);
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.5s ease, opacity 0.5s ease;
    opacity: 0;
    pointer-events: none;
}
.btn-primary:active::after {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    transition: transform 0s, opacity 0s;
}


/* 3D card tilt perspective */
.module-card, .pricing-card {
    transform-style: preserve-3d;
}

/* ====================================================================
   REDUCED MOTION
   ==================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .grain-overlay { display: none; }
    .hero-grid-bg { display: none; }
    .intelligence-canvas { display: none; }
    .fade-in { opacity: 1; transform: none; }
    .line-reveal-inner { transform: none; }
}

/* ====================================================================
   RESPONSIVE
   ==================================================================== */
@media (max-width: 1024px) {
    .rr-features-bar, .sh-features-bar { justify-content: center; }
    .intelligence-grid { grid-template-columns: 1fr; }
    .module-grid { grid-template-columns: repeat(2, 1fr); }
    .pricing-grid { grid-template-columns: repeat(2, 1fr); }
    .pricing-grid .pricing-card:last-child { grid-column: 1 / -1; max-width: 400px; margin: 0 auto; }
    .calculator-results { grid-template-columns: repeat(3, 1fr); }
    .calculator-slider-row { flex-wrap: wrap; }
    .comparison-feature-col { min-width: 180px; }
    .replaces-comparison { gap: var(--space-lg); }
    .replaces-before, .replaces-after { padding: var(--space-xl); }
    .replaces-hub { gap: var(--space-sm); padding: var(--space-lg) var(--space-sm); }
    .hub-spoke { font-size: 13px; padding: 8px 10px; }
    .hub-spoke .material-symbols-outlined { font-size: 16px; }

}

@media (max-width: 768px) {
    .desktop-break { display: none; }
    .nav-links, .nav-actions { display: none; }
    .nav-mobile-toggle { display: flex; }

    .hero { padding: 80px 0 24px; }
    .hero-sub { font-size: 16px; }
    .module-grid { grid-template-columns: 1fr; }
    .replaces-comparison { flex-direction: column; }
    .replaces-arrow-divider { transform: rotate(90deg); }
    .hub-spoke { font-size: 13px; padding: 6px 8px; gap: 4px; }
    .hub-spoke .material-symbols-outlined { font-size: 14px; }
    .replaces-hub { gap: 8px; padding: var(--space-md) var(--space-xs); }
    .hub-logo { height: 44px; padding: 10px 20px; }
    .pricing-grid { grid-template-columns: 1fr; }
    .pricing-grid .pricing-card:last-child { max-width: none; }
    .enterprise-banner { flex-direction: column; text-align: center; padding: var(--space-xl); }
    .enterprise-banner-features { justify-content: center; }
    .calculator { padding: var(--space-xl); }
    .calculator-slider-row { flex-direction: column; align-items: stretch; gap: var(--space-md); }
    .calculator-type-row { flex-direction: column; align-items: stretch; gap: var(--space-sm); }
    .calculator-type-toggle { width: 100%; }
    .calculator-type-btn { flex: 1; text-align: center; padding: var(--space-sm) var(--space-sm); }
    .calculator-results { grid-template-columns: 1fr; }
    .calculator-value-row { flex-wrap: wrap; gap: var(--space-xs); }

    .calculator-net-gain { flex-direction: column; text-align: center; gap: var(--space-xs); }
    .comparison-wrapper { overflow-x: visible; }
    .comparison-tier-toggle {
        display: flex;
        gap: 0;
        margin-bottom: var(--space-lg);
    }
    .comparison-tier-btn {
        flex: 1;
        padding: var(--space-sm) var(--space-lg);
        font-family: var(--font);
        font-size: 13px;
        font-weight: 500;
        background: white;
        color: var(--color-text-muted);
        border: 1px solid var(--color-border);
        cursor: pointer;
        text-align: center;
    }
    .comparison-tier-btn:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
    .comparison-tier-btn:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
    .comparison-tier-btn:not(:first-child) { border-left: none; }
    .comparison-tier-btn-active {
        background: var(--color-text);
        color: white;
        border-color: var(--color-text);
    }
    .comparison-tier-btn-active + .comparison-tier-btn { border-left: none; }

    /* Hide non-active columns on mobile */
    .comparison-table td[data-col],
    .comparison-table th[data-col] { display: none; }
    .comparison-table[data-active-col="essential"] td[data-col="essential"],
    .comparison-table[data-active-col="essential"] th[data-col="essential"],
    .comparison-table[data-active-col="insight"] td[data-col="insight"],
    .comparison-table[data-active-col="insight"] th[data-col="insight"],
    .comparison-table[data-active-col="predict"] td[data-col="predict"],
    .comparison-table[data-active-col="predict"] th[data-col="predict"] { display: table-cell; }

    .comparison-table thead th { font-size: 11px; padding: var(--space-sm) var(--space-md); }
    .comparison-table tbody td { padding: var(--space-sm) var(--space-md); font-size: 13px; }
    .comparison-feature-col { min-width: auto; }
    .comparison-cta-row { display: none; }
    .comparison-cta-row-mobile { display: table-row; }
    .comparison-cta-row-mobile td { text-align: center; padding: var(--space-lg) var(--space-md) var(--space-md); border-bottom: none; }
    .comparison-cta-row-mobile .btn { display: none; }
    .comparison-table[data-active-col="essential"] .comparison-cta-essential,
    .comparison-table[data-active-col="insight"] .comparison-cta-insight,
    .comparison-table[data-active-col="predict"] .comparison-cta-predict { display: inline-flex; }

    .footer-inner {
        flex-direction: column;
        gap: var(--space-2xl);
    }
    .footer-columns {
        flex-wrap: wrap;
        gap: var(--space-2xl);
    }
    .footer-copy {
        text-align: center;
        flex-direction: column;
        gap: var(--space-sm);
    }

    .sh-card-content { padding: var(--space-md) var(--space-lg); }
    .sh-card-expanded { margin-left: -12px; margin-right: -12px; transform: scale(1.01); }
    .sh-comparison { grid-template-columns: 1fr; }
    .sh-rate-grid { grid-template-columns: repeat(3, 1fr); }
    .sh-action-row { gap: var(--space-xs); }
    .sh-price-btn { font-size: 11px; padding: 6px 10px; }
    .sh-mark-read { display: none; }
    .sh-full { display: none; }
    .sh-short { display: inline; }
    .sh-date { width: 100%; }

    /* Rate Radar responsive */
    .rr-panel { padding: var(--space-md); }

    /* About page responsive */
    .about-hero { padding: 80px 0 var(--space-2xl); }
    .values-grid { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: repeat(2, 1fr); }

    /* Sticky mobile CTA */
    .sticky-cta { display: flex; }
    body { padding-bottom: 64px; }
}

@media (max-width: 480px) {
    .hero { padding: 70px 0 16px; }
    .hero-actions, .cta-actions { flex-direction: column; align-items: center; gap: var(--space-md); }
    .hero-actions .btn, .cta-actions .btn { width: 100%; max-width: 320px; }

    /* Announcement badge responsive */
    .hero-badge-live { font-size: 12px; gap: 8px; padding: 7px 14px 7px 10px; }
    .hero-badge-text { white-space: normal; }
    .hero-badge-label { font-size: 9px; padding: 2px 6px; }

    /* Rate Radar responsive */
    .rr-tab { font-size: 11px; padding: var(--space-sm) var(--space-xs); }
}


/* ====================================================================
   RATE RADAR LANDING PAGE — Additional Styles
   ==================================================================== */

/* Hero trust line */
.hero-trust {
    text-align: center;
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: var(--space-md);
}

/* Landing page hero image */
.lp-hero-logo {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-sm);
}
.lp-hero-logo-img {
    height: 36px;
    width: auto;
}
.lp-hero-image {
    max-width: 960px;
    margin: var(--space-2xl) auto 0;
}
.lp-hero-image img {
    width: 100%;
    height: auto;
}

/* Signals outcomes bar */
.sig-outcomes-section {
    padding: var(--space-5xl) 0;
}
.sig-outcomes-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2xl);
    max-width: 960px;
    margin: 0 auto;
}
.sig-outcome {
    text-align: center;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl) var(--space-3xl);
    transition: transform 0.2s, box-shadow 0.2s;
}
.sig-outcome:hover {
    box-shadow: var(--shadow-lg);
}
.sig-outcome .material-symbols-outlined {
    font-size: 32px;
    color: var(--color-signals);
    margin-bottom: var(--space-md);
}
.sig-outcome strong {
    display: block;
    font-size: 17px;
    font-weight: 600;
    margin-bottom: var(--space-sm);
}
.sig-outcome p {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}



/* Mid-section CTA */
.section-cta {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-top: var(--space-3xl);
}

/* Signal Priority Tier Cards */
.signal-tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    max-width: 960px;
    margin: var(--space-3xl) auto 0;
}
.signal-tier-card {
    background: color-mix(in srgb, var(--tier-color) 6%, var(--color-bg-white));
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--tier-color);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl) var(--space-3xl);
    transition: transform 0.2s, box-shadow 0.2s;
}
.signal-tier-icon {
    font-size: 28px;
    color: var(--tier-color);
    margin-bottom: var(--space-sm);
    display: block;
}
.signal-tier-card:hover {
    box-shadow: var(--shadow-lg);
}
.signal-tier-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #fff;
    padding: 4px 10px;
    border-radius: 100px;
    margin-bottom: var(--space-lg);
}
.signal-tier-desc {
    font-size: 15px;
    color: var(--color-text-secondary);
    line-height: 1.7;
}
.signals-section {
    padding: var(--space-5xl) 0;
    background: var(--color-bg);
}
.signals-section .testimonial,
.sig-prioritisation-section .testimonial {
    margin-top: var(--space-3xl);
}

/* Signals two-column layout */
.signals-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: start;
    margin-top: var(--space-3xl);
}
.signals-subheading {
    font-size: 22px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-lg);
    display: flex;
    align-items: center;
    gap: 10px;
}
.advanced-pill {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    background: transparent;
    cursor: default;
    position: relative;
    white-space: nowrap;
}
.advanced-pill:hover::after {
    content: attr(title);
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 12px;
    border-radius: 6px;
    background: var(--color-text);
    color: var(--color-bg);
    font-size: 12px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
}
.signals-content .section-sub {
    text-align: left;
    max-width: none;
    margin: 0 0 var(--space-2xl);
}
.signals-layout .signal-tiers {
    grid-template-columns: 1fr;
    max-width: none;
    margin: 0;
}

/* Signal demo — right column */
.signals-demo {
    position: relative;
    min-height: 400px;
    max-width: 468px;
    justify-self: center;
}
.signals-stack {
    display: flex;
    flex-direction: column;
}
.signal-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    max-height: 250px;
    margin-bottom: var(--space-md);
    transition: opacity 0.4s ease, max-height 0.4s ease 0.1s, margin-bottom 0.4s ease 0.1s;
}
.signal-card img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.3s ease;
}
.signal-card-check {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}
.signal-card-check .material-symbols-outlined {
    font-size: 48px;
    color: white;
    background: #28c840;
    border-radius: 50%;
    padding: 4px;
}
.signal-card.checking .signal-card-check {
    opacity: 1;
}
.signal-card.checking img {
    opacity: 0.4;
}
.signal-card.dismissed {
    opacity: 0;
    max-height: 0;
    margin-bottom: 0;
    overflow: hidden;
    pointer-events: none;
}
.signals-empty {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.5s ease;
    text-align: center;
}
.signals-empty.visible {
    opacity: 1;
}
.signals-empty img {
    width: 100%;
    max-width: 470px;
    height: auto;
    margin: 0 auto;
    display: block;
}

/* ============================================================
   SIGNALS PAGE (.signals-landing)
   ============================================================ */

/* Hero sub text */
.signals-landing .hero-sub {
    font-size: 18px;
    color: var(--color-text-secondary);
    max-width: 640px;
    margin: 0 auto var(--space-xl);
    text-align: center;
    line-height: 1.6;
}

.signals-landing .hero-cta {
    text-align: center;
    margin-top: var(--space-3xl);
}

/* How-steps (rate-radar.html) */
.how-steps-section {
    padding: var(--space-5xl) 0;
}
.how-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3xl);
    max-width: 800px;
    margin: var(--space-3xl) auto 0;
    position: relative;
}
.how-steps::before {
    content: '';
    position: absolute;
    top: 61px;
    left: 15%;
    right: 15%;
    height: 2px;
    background: var(--color-border);
}
.how-step {
    text-align: center;
    position: relative;
}
.how-step-number {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-secondary);
    letter-spacing: 1px;
    margin-bottom: var(--space-md);
}
.how-step-icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--color-bg-secondary);
    border: 2px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-lg);
    position: relative;
    z-index: 1;
}
.how-step-icon {
    font-size: 28px;
    color: var(--color-brand);
}
.how-step h3 {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}
.how-step-desc {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-top: var(--space-sm);
}

/* Sig source features (icon + text list) */
.sig-source-features {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}
.sig-source-feature {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
}
.sig-source-feature .material-symbols-outlined {
    font-size: 24px;
    color: var(--color-signals);
    flex-shrink: 0;
    margin-top: 2px;
}
.sig-source-feature strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 2px;
}
.sig-source-feature p {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* Sig example cards (static sh-cards in demo column) */
.sig-example-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}
.sig-example-cards .sh-card {
    position: relative;
    transform: none;
    cursor: default;
}

/* Hero demo frame */
.sig-hero-demo {
    max-width: 680px;
    margin: var(--space-3xl) auto 0;
}
.sig-hero-frame {
    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
}
.sig-hero-titlebar {
    display: flex;
    gap: 6px;
    padding: 10px 14px;
    background: var(--color-code-bg);
}
.sig-hero-titlebar span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.sig-hero-titlebar span:nth-child(1) { background: #ff5f57; }
.sig-hero-titlebar span:nth-child(2) { background: #febc2e; }
.sig-hero-titlebar span:nth-child(3) { background: #28c840; }

/* Filter bar */
.sig-hero-filter-bar {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--color-border);
}
.sig-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-text-secondary);
    cursor: default;
    font-family: inherit;
}
.sig-filter-btn-active {
    background: var(--color-text);
    color: #fff;
    border-color: var(--color-text);
}
.sig-filter-btn.sig-filter-high .sig-filter-count { color: var(--color-signal-high); }
.sig-filter-btn.sig-filter-medium .sig-filter-count { color: var(--color-signal-medium); }
.sig-filter-btn.sig-filter-low .sig-filter-count { color: var(--color-signal-low); }
.sig-filter-btn-active .sig-filter-count { color: inherit; }
.sig-filter-count {
    font-weight: 600;
}

/* Hero demo cards */
.sig-hero-cards {
    padding: var(--space-lg) var(--space-lg) var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}
.sig-demo-card {
    display: flex;
    border-radius: var(--radius-md);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    background: #fff;
}
.sig-demo-card .sh-priority-bar {
    width: 4px;
    flex-shrink: 0;
}
.sig-demo-card .sh-card-content {
    padding: var(--space-md) var(--space-lg);
}
.sig-demo-card .sh-action-suggestion {
    flex: none;
}
.sig-demo-card .sh-price-btn {
    margin-left: auto;
}
/* Forecast section */
.sig-forecast-section {
    padding: var(--space-5xl) 0;
}
.sig-forecast-section .section-label {
    color: var(--color-signals);
}

/* Reversed layout for visual variety */
.sig-layout-reverse {
    direction: rtl;
}
.sig-layout-reverse > * {
    direction: ltr;
}

/* Revenue category grid */
.sig-category-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}
.sig-category-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
    padding: var(--space-lg);
    background: #fff;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}
.sig-category-pill {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    min-width: 80px;
    text-align: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.sig-category-detail strong {
    font-size: 14px;
    font-weight: 600;
    display: block;
    margin-bottom: 2px;
}
.sig-category-detail p {
    font-size: 13px;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* Forecaster section sh-card */
.sig-forecast-section .sh-card {
    margin-top: var(--space-xl);
}

/* Prioritisation section */
.sig-prioritisation-section {
    padding: var(--space-5xl) 0;
    background: var(--color-bg-secondary);
}
.sig-prioritisation-section .section-label {
    color: var(--color-signals);
}

/* Scoring factors grid */
.sig-scoring-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
    margin: var(--space-3xl) 0;
}
.sig-scoring-factor {
    text-align: center;
    padding: var(--space-xl);
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}
.sig-scoring-factor .material-symbols-outlined {
    font-size: 32px;
    color: var(--color-signals);
    margin-bottom: var(--space-md);
}
.sig-scoring-factor strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: var(--space-sm);
}
.sig-scoring-factor p {
    font-size: 13px;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* Time-decay section */
.sig-decay-title {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    margin-bottom: var(--space-sm);
}
/* Priority tiers section */
.sig-tiers-section {
    margin-top: var(--space-4xl);
}
.sig-tiers-section .sig-decay-title {
    margin-bottom: var(--space-xl);
}

/* Decision framework table */
.sig-framework-section {
    padding: var(--space-5xl) 0;
}
.sig-framework-section .section-label {
    color: var(--color-signals);
}
.sig-framework-table {
    max-width: 900px;
    margin: var(--space-3xl) auto 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
}
.sig-framework-header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    background: var(--color-text);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.sig-framework-header span {
    padding: var(--space-md) var(--space-lg);
}
.sig-framework-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    font-size: 14px;
    border-top: 1px solid var(--color-border);
    background: #fff;
}
.sig-framework-row:nth-child(odd) {
    background: var(--color-bg-secondary);
}
.sig-framework-row span {
    padding: var(--space-md) var(--space-lg);
    color: var(--color-text-secondary);
    line-height: 1.5;
}
.sig-framework-row .sig-framework-signal {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-text);
    font-weight: 500;
}
.sig-framework-signal .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-signals);
}
.sig-fw-pill {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}

/* ============================================================
   SIGNALS PAGE – Responsive
   ============================================================ */
@media (max-width: 768px) {
    .sig-outcomes-bar {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
        max-width: 360px;
    }
    .sig-scoring-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
    }
    .sig-layout-reverse {
        direction: ltr;
    }
    .sig-framework-header {
        display: none;
    }
    .sig-framework-row {
        grid-template-columns: 1fr;
        padding: var(--space-md) 0;
    }
    .sig-framework-row span {
        padding: var(--space-xs) var(--space-lg);
    }
    .sig-framework-row span[data-label]::before {
        content: attr(data-label) ": ";
        font-weight: 600;
        color: var(--color-text);
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .sig-framework-row span:first-child {
        font-weight: 600;
        color: var(--color-text);
        padding-top: var(--space-md);
    }
    .sig-framework-row span:last-child {
        padding-bottom: var(--space-md);
    }
    .sig-hero-filter-bar {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .sig-scoring-grid {
        grid-template-columns: 1fr;
    }
    .sig-category-row {
        flex-direction: column;
        gap: var(--space-sm);
    }
    .sig-hero-cards {
        padding: var(--space-sm);
    }
}

/* Parity Monitor Section */
.parity-section {
    padding: var(--space-5xl) 0;
    background: #0f1117;
    position: relative;
    overflow: hidden;
}
.parity-section .section-label {
    color: var(--color-rate-radar);
}
.parity-section .section-title {
    color: #fff;
}
.parity-section .section-sub {
    color: rgba(255, 255, 255, 0.6);
}
.parity-section .container {
    position: relative;
    z-index: 1;
}
.parity-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    align-items: center;
    margin-top: var(--space-2xl);
}
.parity-content {
    max-width: 900px;
    margin: 0 auto;
}

/* Edge radar pulse animation */
.parity-pulse {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 500px;
    height: 500px;
    pointer-events: none;
    z-index: 0;
}
.parity-pulse-left { left: -250px; }
.parity-pulse-right { right: -250px; }
.parity-pulse-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(239, 35, 60, 0.5);
    box-shadow: 0 0 30px rgba(239, 35, 60, 0.15), inset 0 0 30px rgba(239, 35, 60, 0.05);
    animation: parityPulse 4s cubic-bezier(.36, .11, .89, .32) infinite;
}
.parity-pulse-ring:nth-child(2) { animation-delay: -1.33s; }
.parity-pulse-ring:nth-child(3) { animation-delay: -2.66s; }
@keyframes parityPulse {
    0% { transform: scale(0.4); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}

.parity-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
}
.parity-feature {
    display: flex;
    gap: var(--space-lg);
    align-items: flex-start;
    padding: var(--space-xl);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.parity-feature .material-symbols-outlined {
    font-size: 26px;
    color: var(--color-rate-radar);
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 35, 60, 0.2);
    border-radius: 12px;
}
.parity-feature strong {
    font-size: 16px;
    display: block;
    margin-bottom: 4px;
    color: #fff;
}
.parity-feature p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
}

/* FAQ Accordion */
.faq-section {
    padding: 80px 0;
    background: var(--color-bg);
}
.faq-section-white {
    background: white;
}
.faq-list {
    max-width: 720px;
    margin: var(--space-3xl) auto 0;
}
.faq-item {
    border-bottom: 1px solid var(--color-border);
}
.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--space-xl) 0;
    background: none;
    border: none;
    font-family: var(--font);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    text-align: left;
    gap: var(--space-lg);
}
.faq-question:hover {
    color: var(--color-brand);
}
.faq-toggle {
    font-size: 24px;
    color: var(--color-text-muted);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}
.faq-item.open .faq-toggle {
    transform: rotate(180deg);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}
.faq-item.open .faq-answer {
    max-height: 500px;
}
.faq-answer p {
    padding: 0 0 var(--space-xl);
    font-size: 15px;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

/* Single Pricing Card (centered) — Rate Radar landing page */
.pricing:has(.pricing-grid-single) {
    padding: 120px 0 100px;
}
.pricing-grid-single {
    display: flex;
    justify-content: center;
}
.pricing-grid-single .pricing-card {
    max-width: 480px;
    width: 100%;
}

/* Footer beacon label */
.footer-beacon-label {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-left: var(--space-sm);
}


/* ====================================================================
   RATE RADAR LANDING PAGE — Responsive
   ==================================================================== */
@media (max-width: 1024px) {
    .signal-tiers { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
    .signals-layout { grid-template-columns: 1fr; }
    .signals-demo { min-height: auto; }
    .signal-card.dismissed { max-height: 250px; margin-bottom: var(--space-md); }
    .how-steps { gap: var(--space-xl); }
}
@media (max-width: 768px) {
    .lp-hero-logo-img { height: 28px; }
    .how-steps { grid-template-columns: 1fr; max-width: 280px; margin-left: auto; margin-right: auto; }
    .how-steps::before { display: none; }
    .parity-pulse { display: none; }
    .parity-features { grid-template-columns: 1fr; }
    .signal-tiers { grid-template-columns: 1fr; max-width: 540px; }
    .signal-tier-card { padding: var(--space-xl) var(--space-2xl); }
    .faq-question { padding: var(--space-xl) 0; min-height: 48px; }
    .showcase-tabs { gap: var(--space-md); flex-wrap: wrap; }
    .showcase-tab { font-size: 12px; }
}

/* ====================================================================
   HERO CTA NOTE
   ==================================================================== */
.hero-cta-note {
    font-size: 13px;
    color: var(--color-text-muted);
    text-align: center;
    margin-top: var(--space-lg);
}

/* ====================================================================
   TRUST BADGES
   ==================================================================== */

/* ====================================================================
   LEGAL PAGES
   ==================================================================== */
.legal-page {
    padding: 140px 0 var(--space-4xl);
}
.legal-page h1 {
    font-size: clamp(28px, 4vw, 36px);
    margin-bottom: var(--space-sm);
}
.legal-effective {
    font-size: 14px;
    color: var(--color-text-muted);
    margin-bottom: var(--space-3xl);
}
.legal-page h2 {
    font-size: 20px;
    font-weight: 600;
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-md);
}
.legal-page p,
.legal-page li {
    font-size: 15px;
    line-height: 1.8;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
}
.legal-page ul {
    padding-left: var(--space-xl);
    margin-bottom: var(--space-lg);
}
.legal-page a {
    color: var(--color-brand);
}

/* Footer legal links */
.footer-legal {
    display: inline-flex;
    align-items: center;
    gap: var(--space-md);
}
.footer-legal a {
    font-size: 12px;
    color: var(--color-text-muted);
}
.footer-legal a:hover {
    color: var(--color-text);
}
.footer-legal a + a::before {
    content: "·";
    margin-right: var(--space-md);
    color: var(--color-text-muted);
    pointer-events: none;
}

/* ====================================================================
   PRINT STYLESHEET
   ==================================================================== */
@media print {
    .nav, .mobile-menu, .sticky-cta, .grain-overlay,
    .hero-grid-bg, .parity-pulse, .section-cta,
    .cta-final, .hero-badges { display: none; }
    .fade-in { opacity: 1; transform: none; }
    body { padding-bottom: 0; }
}