@import url('../fonts/instrumentsans.css');
@import url('../fonts/fraunces.css');

:root {
    --zinq-orange: #C85A3C;
    --zinq-surface: #F5F4F0;
    --zinq-dark: #15120F;
    --nav-height: 80px;

    --bg-color: #F7F5F0;
    --primary: #1A6B6B;
    --amber: #C85A3C;
    --button-orange-text: #15120F;
    --text-main: #1A1A1A;
    --text-muted: #4B5563;
    --card-bg: #FFFFFF;
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    --nav-bg: rgba(247, 245, 240, 0.85);
    --border-subtle: rgba(0, 0, 0, 0.05);
    --footer-bg: #15120F;

    --bg-problem: var(--card-bg);
    --bg-hiw: var(--bg-color);
    --bg-trust: var(--card-bg);
    --bg-city: var(--bg-color);
    --bg-pricing: var(--bg-color);

    --featured-card-bg: rgba(255, 255, 255, 0.6);
    --featured-card-text: var(--text-main);
    --featured-card-subtext: var(--text-muted);

    --card-border: 1px solid transparent;
    --avatar-grad: linear-gradient(135deg, #B8D4D4, #E8E0D4);
    --avatar-grad-marco: linear-gradient(135deg, #FFD194, #70E1F5);
    --tag-bg: var(--primary);
    --tag-text: #FFFFFF;
    --prop-bg: #F5F5F5;
    --prop-label: var(--primary);

    --accept-btn-hero: var(--primary);
    --propose-btn-hero: var(--primary);
    --accept-btn-trust: var(--primary);

    --prob-card-bg: #FFFFFF;
    --prob-border-strava: 1px solid rgba(192, 57, 43, 0.2);
    --problem-closing: var(--primary);
    --hiw-num-color: rgba(26, 107, 107, 0.20);
    --hiw-arrow-color: var(--primary);
    --trust-quote-border: var(--primary);
    --trust-quote-text: var(--text-main);
    --match-color: var(--primary);
    --city-stat-num: var(--text-main);
    --builder-note-border: var(--primary);

    --waitlist-input-bg: #FFFFFF;
    --waitlist-input-text: #1A1A1A;
    --waitlist-placeholder: rgba(26, 26, 26, 0.5);
    --waitlist-social: inherit;

    --price-card-border: 1px solid transparent;
    --price-annual-border: 2px solid var(--primary);
    --check-color: var(--primary);
    --price-lifetime-bg: var(--card-bg);
    --monthly-btn-border: 2px solid var(--primary);
    --monthly-btn-text: var(--primary);
    --hero-ambient: radial-gradient(circle at 50% 20%, color-mix(in oklab, var(--zinq-orange) 22%, transparent) 0%, transparent 60%);
    --discount-bg: transparent;
    --discount-border: 1px solid var(--border-subtle);

    --f-logo: #FFFFFF;
    --f-sub: rgba(255, 255, 255, 0.5);
    --f-center: rgba(255, 255, 255, 0.7);
    --f-social-default: rgba(255, 255, 255, 0.5);
    --f-social-hover: var(--amber);
    --f-bottom-border: 1px solid rgba(255, 255, 255, 0.1);
    --f-copyright: #A0AEC0;
    --step-color: var(--primary);
    --w-link-color: var(--primary);

    --theme-toggle-border: rgba(26, 26, 26, 0.2);
    --theme-toggle-hover: rgba(0, 0, 0, 0.06);

    --radius-input: 12px;
    --radius-section: 16px;
    --font-head: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;

    --h1-size: clamp(3rem, 6vw + 1rem, 5.5rem);
    --h2-size: clamp(2.25rem, 4vw, 3.5rem);
    --color-surface-match: rgba(46, 125, 114, 0.1);
    --color-text-match: #2E7D72;
    --card-width: 320px;
    --card-gap: 20px;
}

[data-theme="dark"] {
    --zinq-surface: #15120F;
    --zinq-dark: #F7F5F0;
    --zinq-orange: #FF9854;

    --button-orange-text: #15120F;

    --color-accent-primary: #FDBA74;
    --color-accent-surface: rgba(251, 146, 60, 0.12);
    --color-error-primary: #FF8A80;
    --color-error-surface: rgba(255, 138, 128, 0.12);

    --bg-color: #15120F;
    --primary: #2A8A8A;
    --text-main: #F8FAFC;
    --text-muted: #94A3B8;
    --card-bg: #1A1510;
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --nav-bg: rgba(21, 18, 15, 0.92);
    --border-subtle: rgba(255, 255, 255, 0.06);
    --footer-bg: #100C09;

    --bg-problem: #1A1510;
    --bg-hiw: #15120F;
    --bg-trust: #1A1510;
    --bg-city: #15120F;
    --bg-pricing: #15120F;

    --featured-card-bg: var(--footer-bg);
    --featured-card-text: #FFFFFF;
    --featured-card-subtext: rgba(255, 255, 255, 0.8);

    --card-border: 1px solid var(--border-subtle);
    --avatar-grad: linear-gradient(135deg, #1A4A4A, #2A3A4A);
    --avatar-grad-marco: linear-gradient(135deg, #1A4A4A, #2A3A4A);
    --tag-bg: rgba(255, 255, 255, 0.06);
    --tag-text: #E2E8F0;
    --prop-bg: #1E2128;
    --prop-label: #FFFFFF;

    --accept-btn-hero: #2A8A8A;
    --propose-btn-hero: #1A6B6B;
    --accept-btn-trust: #1A6B6B;

    --prob-card-bg: #1E2128;
    --prob-border-strava: 1px solid rgba(231, 76, 60, 0.4);
    --problem-closing: #E2E8F0;
    --hiw-num-color: rgba(255, 255, 255, 0.05);
    --hiw-arrow-color: #E2E8F0;
    --trust-quote-border: #E2E8F0;
    --trust-quote-text: #94A3B8;
    --match-color: #E2E8F0;
    --city-stat-num: #F8FAFC;
    --builder-note-border: rgba(255, 255, 255, 0.2);

    --waitlist-input-bg: #0F1115;
    --waitlist-input-text: #F8FAFC;
    --waitlist-placeholder: #94A3B8;
    --waitlist-social: rgba(255, 255, 255, 0.9);

    --price-card-border: 1px solid var(--border-subtle);
    --price-annual-border: 1px solid rgba(255, 255, 255, 0.2);
    --check-color: #FFFFFF;
    --price-lifetime-bg: var(--card-bg);
    --step-color: #E2E8F0;
    --w-link-color: var(--zinq-orange);
    --color-surface-match: rgba(255, 255, 255, 0.06);
    --color-text-match: #FFFFFF;
    --monthly-btn-border: 1.5px solid rgba(255, 255, 255, 0.15);
    --monthly-btn-text: #E2E8F0;
    --discount-bg: rgba(255, 255, 255, 0.04);
    --discount-border: 1px solid rgba(255, 255, 255, 0.08);

    --f-logo: #F0EEE9;
    --f-sub: rgba(240, 238, 233, 0.55);
    --f-center: rgba(240, 238, 233, 0.7);
    --f-social-default: rgba(240, 238, 233, 0.5);
    --f-bottom-border: 1px solid rgba(255, 255, 255, 0.06);
    --f-copyright: rgba(240, 238, 233, 0.45);

    --theme-toggle-border: rgba(240, 238, 233, 0.2);
    --theme-toggle-hover: rgba(255, 255, 255, 0.06);
    --hero-ambient: radial-gradient(circle at 50% 20%, color-mix(in oklab, var(--zinq-orange) 7%, transparent) 0%, transparent 60%);
}

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

img,
picture,
svg,
video {
    max-width: 100%;
    display: block;
}

section[id] {
    scroll-margin-top: 100px;
}

html {
    width: 100%;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-color);
    color: var(--text-main);
    font-size: 18px;
    line-height: 1.6;
    letter-spacing: -0.01em;

    width: 100%;
    position: relative;
    transition: background-color 0.3s ease, color 0.3s ease;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}


/* Theme-switching: kill ALL transitions so every element changes in one paint frame */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
    transition: none !important;
}

main {
    flex-grow: 1;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-head);
    color: var(--text-main);
    font-weight: 700;
}

h2 {
    font-size: clamp(26px, 4.5vw, 40px) !important;
    line-height: 1.15 !important;
    margin-bottom: clamp(16px, 2.5vw, 32px);
}

a {
    text-decoration: none;
    color: inherit;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Base Transitions for Dark Mode */
section,
nav,
footer,
.p-card,
.problem-card,
.city-card,
.price-card,
.builder-note,
.pc-proposal,
.w-input,
.discount-box,
.hiw-num,
.hiw-arrow,
.trust-quote,
.prob-badge,
.f-icon,
.f-bottom {
    transition-property: background-color, color, border-color, box-shadow;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-weight: 600;
    cursor: pointer;
    border: none;
    letter-spacing: -0.01em;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.btn:active {
    transform: scale(0.97) !important;
}

.btn-amber {
    background-color: var(--amber);
    color: var(--button-orange-text);
}

@media (hover: hover) {
    .btn-amber:hover {
        transform: translateY(-2px) !important;
        background-color: #C86422 !important;
    }
}

.btn-teal {
    background-color: var(--primary);
    color: #FFFFFF;
}

/* Subdue mockup UI buttons globally to enforce Single CTA rule */
.btn-teal-outline,
.btn-accept-hero,
.btn-propose-hero,
.btn-accept-trust {
    background-color: transparent !important;
    color: var(--primary) !important;
    border: 1px solid rgba(43, 92, 90, 0.3) !important;
    cursor: help;
}

[data-theme="dark"] .btn-propose-hero {
    border-color: #2A8A8A;
    color: #2A8A8A;
}

.btn-monthly {
    border: var(--monthly-btn-border);
    color: var(--monthly-btn-text);
    background: transparent;
}

@media (hover: hover) {
    .btn-monthly:hover {
        background-color: var(--primary);
        color: #FFFFFF;
        border-color: var(--primary);
    }

    [data-theme="dark"] .btn-monthly:hover {
        background-color: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.3);
        color: #FFFFFF;
    }
}

/* Nav */
nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 24px 0;
    transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

nav.scrolled {
    background-color: rgba(247, 245, 240, 0.95);
    /* Near-solid light fallback */
    border-bottom: 1px solid var(--border-subtle);
    padding: 16px 0;
}



[data-theme="dark"] nav.scrolled {
    background-color: rgba(18, 20, 24, 0.95);
    /* Near-solid dark fallback */
}



/* Graceful degradation for image tag pills */
.image-tag-pill {
    background-color: rgba(255, 255, 255, 0.95) !important;
    /* Solid fallback */
}



[data-theme="dark"] .image-tag-pill {
    background-color: rgba(18, 18, 18, 0.95) !important;
    /* Solid fallback */
}



.nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 28px;
    color: var(--text-main);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.theme-toggle {
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    opacity: 0.8;
    transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    color: var(--text-main);
}

@media (hover: hover) {
    .theme-toggle:hover {
        background-color: transparent;
        opacity: 1;
        transform: scale(1.1);
    }
}

[data-theme="dark"] .theme-toggle {
    opacity: 0.85;
}

@media (hover: hover) {
    [data-theme="dark"] .theme-toggle:hover {
        background-color: transparent;
        opacity: 1;
        transform: scale(1.1);
    }
}

.nav-btn {
    padding: 10px 24px;
    font-size: 15px;
}

.btn-nav-outline {
    background: rgba(217, 119, 54, 0.1) !important;
    border: 1px solid rgba(217, 119, 54, 0.3);
    color: #D97736 !important;
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: none !important;
}

@media (hover: hover) {
    .btn-nav-outline:hover {
        background: rgba(217, 119, 54, 0.2) !important;
        border-color: rgba(217, 119, 54, 0.6);
        color: #D97736 !important;
    }
}

/* Hero */
.hero {
    padding-top: 140px;
    padding-bottom: 80px;
    position: relative;
    z-index: 10;
    background: var(--hero-ambient);
}


.ambient-blob {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 400px;
    background: radial-gradient(circle, rgba(217, 119, 54, 0.25) 0%, rgba(26, 107, 107, 0.05) 50%, transparent 70%);
    filter: blur(60px);
    z-index: -1;
    pointer-events: none;
    animation: pulseBlobOpacity 8s ease-in-out infinite alternate;
    transition: opacity 0.3s ease;
}

[data-theme="dark"] .ambient-blob {
    background: radial-gradient(circle, rgba(217, 119, 54, 0.08) 0%, rgba(26, 107, 107, 0.03) 50%, transparent 70%);
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../topography.svg');
    background-repeat: repeat;
    opacity: 0.8;
    pointer-events: none;
    z-index: -1;
}

.hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 100%;
    min-width: 0;
}

.hero-badge {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--primary);
    border-radius: var(--radius-pill);
    color: var(--primary);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 24px;
}

.hero h1 {
    font-size: var(--h1-size);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
}

.hero p.subheadline {
    font-size: 20px;
    color: var(--text-main);
    opacity: 0.85;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
    line-height: 1.5;
}

.hero-cta {
    margin-bottom: 16px;
}

.hero-btn {
    height: 64px;
    min-width: 280px;
    font-size: 18px;
    padding: 0 32px;
    border-radius: 100px;
    font-weight: 700;
    background-color: var(--zinq-dark) !important;
    color: var(--zinq-orange) !important;
    border: 2px solid var(--zinq-orange) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    animation: pulseCTA 2s ease-in-out 3;
}

@media (hover: hover) {
    .hero-btn:hover {
        background-color: transparent !important;
        color: var(--zinq-orange) !important;
        transform: translateY(-2px) !important;
    }
}

@keyframes pulseCTA {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }

    100% {
        transform: scale(1);
    }
}

.trust-line {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 32px;
}

.social-proof-pill {
    display: inline-flex;
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-pill);
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] .social-proof-pill {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.cards-wrapper {
    position: relative;
    margin: 48px auto 0;
    padding: 0 60px;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
}

.cards-scroll {
    display: flex;
    align-items: center;
    /* Carousel Depth Physics */
    gap: var(--card-gap);
    padding: 24px calc(50% - var(--card-width) / 2);
    /* Dynamic centering padding */
    margin: -10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 1100px) {
    .cards-scroll {
        width: 1000px;
    }
}

@media (max-width: 1099px) and (min-width: 781px) {
    .cards-scroll {
        width: 660px;
    }
}

.cards-scroll::-webkit-scrollbar {
    display: none;
}

.scroll-card {
    background: var(--card-bg);
    border-radius: var(--radius-card);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    padding: 0;
    overflow: hidden;
    border: var(--card-border);
    flex: 0 0 var(--card-width);
    width: var(--card-width);
    max-width: 100%;
    scroll-snap-align: center;
    opacity: 0;
    transform: translateY(20px);
    display: flex;
    flex-direction: column;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-tap-highlight-color: transparent;
}

.scroll-card> :last-child {
    margin-top: auto !important;
    margin-bottom: 0 !important;
}

.scroll-card.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Carousel Depth — Active card */
.scroll-card.visible.is-active {
    z-index: 2;
}

/* Carousel Depth — Inactive neighbours */
.scroll-card.visible.is-inactive {
    z-index: 1;
    cursor: pointer;
}

.scroll-card.visible.is-inactive * {
    pointer-events: none;
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {

    .scroll-card,
    .carousel-dot::before {
        transition: none !important;
    }

    .cards-scroll {
        scroll-behavior: auto !important;
    }
}

.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-60%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    color: var(--text-main);
    font-size: 16px;
    transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    opacity: 1;
}

@media (hover: hover) {
    .nav-arrow:hover {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
        box-shadow: 0 4px 16px rgba(42, 138, 138, 0.3);
    }
}

.nav-arrow:disabled {
    opacity: 0;
    cursor: default;
    pointer-events: none;
}

.nav-arrow.left {
    left: 0;
}

.nav-arrow.right {
    right: 0;
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-top: 8px;
}

.carousel-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border: none;
    cursor: pointer;
    /* Invisible padding expands touch target to ~40×44px for easy mobile selection */
    padding: 12px 16px;
    background: transparent;
    box-sizing: content-box;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-dot::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background-color: rgba(0, 0, 0, 0.15);
    transition: transform 0.25s ease, background-color 0.25s ease;
    transform-origin: center;
}

[data-theme="dark"] .carousel-dot::before {
    background-color: rgba(255, 255, 255, 0.15);
}

.carousel-dot.active::before {
    background-color: var(--primary) !important;
    transform: scaleX(3);
    /* Visually stretches to 24px via GPU compositor */
}

.scroll-hint {
    display: none;
}

[data-theme="dark"] .scroll-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.hero-visual {
    width: 100%;
}

.p-card {
    background: var(--card-bg);
    border-radius: var(--radius-card);
    box-shadow: var(--card-shadow);
    padding: 24px;
    width: 100%;
    border: var(--card-border);
    overflow: hidden;
}

[data-theme="dark"] .p-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.pc-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.pc-avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
}

.pc-image {
    width: 100%;
    height: 240px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

/* Image Vignette (Gradient Protection) */
.pc-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 1;
}

.avatar-ines {
    background: url('../ines_image.webp') center/cover no-repeat, var(--avatar-grad);
}

.avatar-marcus {
    background: url('../marcus_image.webp') center 20%/cover no-repeat, linear-gradient(135deg, #FFD194, #70E1F5);
}

.avatar-roos {
    background: url('../roos_image.webp') center/cover no-repeat, linear-gradient(135deg, #E6DADA, #274046);
}

.avatar-tariq {
    background: url('../tariq_image.webp') center 20%/cover no-repeat, linear-gradient(135deg, #74ebd5, #ACB6E5);
}

.avatar-elena {
    background: url('../elena_image.webp') center 20%/cover no-repeat, linear-gradient(135deg, #a8c0ff, #3f2b96);
}

.avatar-daan {
    background: url('../daan_image.webp') center/cover no-repeat, linear-gradient(135deg, #f12711, #f5af19);
}

.pc-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.pc-name {
    font-family: var(--font-head);
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scroll-card .pc-name,
.trust-card .pc-name {
    font-size: clamp(18px, 5vw, 24px);
}

.trust-card .pc-name {
    display: flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}

.trust-card .pc-name .pc-loc-dot {
    font-weight: normal;
    opacity: 0.6;
    font-family: var(--font-sans, sans-serif);
}

.trust-card .pc-name .pc-loc {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-muted);
    font-family: var(--font-sans, sans-serif);
}

.scroll-card .pc-name {
    margin-bottom: 24px;
}

.pc-loc {
    font-size: 13px;
    color: var(--text-muted);
}

.pc-match {
    margin-left: auto;
    background: rgba(42, 138, 138, 0.15);
    color: var(--primary);
    font-size: 11px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-weight: 700;
}

/* Premium Glassmorphism Match Badge */
.scroll-card .pc-match {
    position: absolute;
    top: 16px;
    right: 16px;
    background-color: rgba(255, 255, 255, 0.75) !important;

    color: var(--primary) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    padding: 6px 14px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    margin: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.match-badge-overlay {
    background-color: rgba(255, 255, 255, 0.95) !important;
    color: var(--primary) !important;
    border: 1px solid rgba(43, 92, 90, 0.35) !important;
}

/* Match Badge Conditional Logic (Light Mode Fallback) */
/* Light Mode: Opaque White with Muted Text */
.scroll-card .pc-match.match-badge-low {
    background-color: rgba(255, 255, 255, 0.95) !important;
    color: var(--text-muted) !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
}

.pc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.scroll-card .pc-tags {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    /* Centered layout */
    width: calc(100% - 24px);
    /* Responsive width so pills wrap inside the card */
    gap: 4px;
    margin: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* Fix Heavy Profile Schedule Pills (Light Mode) */
.pc-tag {
    background-color: rgba(43, 92, 90, 0.08) !important;
    color: var(--primary) !important;
    border: none !important;
    font-size: 13px;
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    font-weight: 500;
}

/* Premium Glassmorphism overlay tags */
.scroll-card .pc-tag {
    background-color: rgba(255, 255, 255, 0.75) !important;

    color: var(--primary) !important;
    padding: 3px 8px !important;
    font-size: 10px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08) !important;
    position: relative;
    z-index: 2;
}

.pc-pace {
    font-size: 14px;
    color: var(--text-main);
    margin-bottom: 24px;
}

.pc-proposal {
    background: var(--prop-bg);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 20px;
}

.scroll-card .pc-proposal {
    padding: 12px;
    margin-top: 0;
    margin-bottom: 0;
}

.pc-prop-label {
    color: var(--prop-label);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-bottom: 4px;
    display: block;
}

.pc-prop-text {
    font-size: 13px;
    color: var(--text-main);
    margin-bottom: 12px;
}

.scroll-card .pc-prop-text {
    font-size: 14px;
    margin-bottom: 16px;
}

.pc-prop-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
}

.pc-btn-sm {
    padding: 6px 12px;
    font-size: 12px;
    height: 32px;
    white-space: nowrap;
}

.pc-btn-full {
    width: 100%;
    height: 44px;
    font-size: 14px;
}


/* Timeline line for How it Works */
.timeline-container {
    position: relative;
}

.timeline-line {
    position: absolute;
    left: 32px;
    top: 40px;
    bottom: 40px;
    width: 2px;
    background: linear-gradient(to bottom, var(--primary) 0%, rgba(26, 107, 107, 0.1) 100%);
    z-index: 0;
    display: none;
}

@media (min-width: 768px) {
    .timeline-line {
        display: block;
    }

    .hiw-step {
        position: relative;
        z-index: 1;
    }
}

[data-theme="dark"] .timeline-line {
    background: linear-gradient(to bottom, #FFFFFF 0%, rgba(255, 255, 255, 0.0) 100%);
}

/* Problem Section */
.problem-section {
    background: var(--bg-problem);
    border-radius: var(--radius-section) var(--radius-section) 0 0;
    padding: 96px 0;
}

h2.section-title,
.section-title {
    font-size: var(--h2-size);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-align: center;
    margin-bottom: 48px;
}

.problem-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto 40px auto;
}

.problem-card {
    background: var(--prob-card-bg);
    border-radius: var(--radius-card);
    padding: 40px 32px;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--card-shadow);
}

.card-strava {
    border: var(--prob-border-strava);
}

.prob-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.prob-icon {
    font-size: 32px;
}

/* Fix Heavy Warning Tags (Light Mode) */
.prob-badge,
.prob-badge-red {
    background-color: rgba(217, 83, 79, 0.1) !important;
    /* 10% Opacity Coral */
    color: #D9534F !important;
    border: none !important;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
}

.prob-title {
    font-family: var(--font-head);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
}

.prob-text {
    font-size: 18px;
    color: var(--text-muted);
}

.problem-closing {
    text-align: center;
    font-size: 17px;
    color: var(--problem-closing);
    font-style: italic;
}

/* How it works */
.hiw-section {
    padding: 96px 0;
    background: var(--bg-hiw);
}

.timeline-grid {
    display: grid;
    width: 100%;
    gap: 32px;
    max-width: 1100px;
    margin: 0 auto 40px auto;
}

@media (min-width: 768px) {
    .timeline-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.timeline-step {
    text-align: left;
    padding: 24px;
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}

.step-number {
    display: inline-block;
    font-family: var(--font-body);
    color: var(--primary);
    background-color: rgba(26, 107, 107, 0.14);
    border: 1px solid rgba(26, 107, 107, 0.2);
    font-weight: 600;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
}

.hiw-content {
    position: relative;
    z-index: 1;
}

.hiw-title {
    font-family: var(--font-head);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-main);
}

.hiw-text {
    font-size: 18px;
    color: var(--text-muted);
}

.mobile-line {
    display: none;
}

/* Trust Section */
.trust-section {
    background: var(--bg-trust);
    border-radius: var(--radius-section);
    padding: 96px 0;
    max-width: 1200px;
    margin: 0 auto;
    width: calc(100% - 48px);
}

.trust-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    max-width: 1140px;
    margin: 0 auto;
    align-items: center;
}

.trust-title {
    font-size: var(--h2-size);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin-bottom: 24px;
}

.trust-text {
    font-size: 18px;
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 500px;
}

.trust-quote {
    border-left: 3px solid var(--trust-quote-border);
    padding-left: 20px;
    margin-top: 24px;
    font-size: 14px;
    color: var(--trust-quote-text);
    font-style: italic;
}

.trust-card {
    width: 100%;
    position: relative;
    background: rgba(255, 255, 255, 0.65) !important;

    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.5) !important;
    border-radius: 20px !important;
}

[data-theme="dark"] .trust-card {
    background: rgba(30, 33, 40, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

.trust-card .pc-avatar {
    width: 64px;
    height: 64px;
}

.trust-card .pc-prop-label {
    border-left: 2px solid var(--primary);
    padding-left: 8px;
    font-size: 11px;
}

/* Standardized Premium UI/UX Components for Verified Runners card */
.profile-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.profile-card-header .user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.match-badge-premium {
    background-color: rgba(43, 92, 90, 0.12);
    /* 12% brand green */
    color: var(--zinq-dark-accent, #2B5C5A);
    border-radius: 9999px;
    padding: 6px 14px;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
    /* CRITICAL: Prevents the blob shape */
    flex-shrink: 0;
}

.profile-tag-pill {
    background-color: rgba(43, 92, 90, 0.08);
    /* 8% Brand Green */
    color: var(--zinq-dark-accent, #2B5C5A);
    border: 1px solid rgba(43, 92, 90, 0.15);
    padding: 6px 12px;
    border-radius: 6px;
    /* Keep them slightly squared to contrast the round match badge */
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    white-space: nowrap;
}

.profile-tags-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
}

.activity-proposal-block {
    background-color: rgba(255, 255, 255, 0.6);

    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    width: 100%;
    box-sizing: border-box;
}

.activity-proposal-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--primary);
    background-color: rgba(26, 107, 107, 0.14);
    border: 1px solid rgba(26, 107, 107, 0.2);
    padding: 4px 10px;
    border-radius: 100px;
    display: inline-block;
    margin-bottom: 12px;
    width: fit-content;
}

.activity-proposal-title::before {
    display: none !important;
}

/* City Strategy */
.city-section {
    padding: 96px 0;
    background: var(--bg-city);
}

.city-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto 40px auto;
}

.city-card {
    background: var(--card-bg);
    border-radius: var(--radius-card);
    padding: 32px;
    box-shadow: var(--card-shadow);
    border: var(--card-border);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.city-icon {
    font-size: 36px;
    margin-bottom: 20px;
}

.city-stat {
    font-family: var(--font-head);
    font-size: 24px;
    margin-bottom: 12px;
    color: var(--city-stat-num);
}

.city-card.featured .city-stat {
    font-size: 28px;
}

.city-text {
    font-size: 15px;
    color: var(--text-muted);
}

.city-para {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    font-size: 16px;
    color: var(--text-muted);
}

.builder-note {
    border-left: 3px solid var(--primary);
    padding-left: 20px;
    max-width: 600px;
    margin: 32px auto;
}

.bn-label {
    color: var(--primary);
    font-size: 11px;
    letter-spacing: 0.1em;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 8px;
    display: block;
}

.bn-text {
    font-family: var(--font-body);
    font-size: 15px;
    color: #4A5568;
    line-height: 1.7;
}

[data-theme="dark"] .bn-text {
    color: #8B95A1;
}

/* Waitlist Section */
.waitlist-section {
    background: var(--bg-color);
    border-radius: var(--radius-section) var(--radius-section) 0 0;
    padding: 80px 0;
    color: var(--text-main);
    text-align: center;
    scroll-margin-top: 60px;
}

.waitlist-section h2 {
    color: var(--text-main);
    font-size: var(--h2-size);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 20px;
}

.waitlist-sub {
    font-size: 18px;
    color: var(--text-muted);
    max-width: 520px;
    margin: 0 auto 40px auto;
}

.waitlist-social {
    font-size: 13px;
    margin-bottom: 24px;
    color: var(--text-muted);
}

.form-container {
    max-width: 480px;
    margin: 0 auto;
}

[data-theme="dark"] .form-container {
    background: #1A1D24 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4) !important;
}

.w-input {
    width: 100%;
    height: 52px;
    background: var(--waitlist-input-bg);
    color: var(--waitlist-input-text);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-input);
    padding: 0 20px;
    font-family: var(--font-body);
    font-size: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
    box-sizing: border-box;
}

.w-input::placeholder {
    color: var(--waitlist-placeholder);
    transition: color 0.3s;
}

.w-input:focus {
    outline: none;
    border-color: var(--check-color);
    box-shadow: 0 0 0 3px var(--color-surface-match);
}

select.w-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Custom SVG Chevron */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
    padding-right: 48px;
    /* Prevent text from overlapping the icon */
    cursor: pointer;
}

/* Dark Mode Chevron Override */
[data-theme="dark"] select.w-input {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23F8FAFC%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E") !important;
}

.w-check-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
    width: 100%;
}

.w-check-row input[type="checkbox"] {
    margin: 0;
    width: 18px;
    height: 18px;
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--card-bg);
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    display: grid;
    place-content: center;
    transition: all 0.2s ease;
}

.w-check-row input[type="checkbox"]::before {
    content: "";
    width: 10px;
    height: 10px;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--primary);
    background-color: var(--primary);
    transform-origin: center;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.w-check-row input[type="checkbox"]:checked::before {
    transform: scale(1);
}

.w-check-row input[type="checkbox"]:checked {
    border-color: var(--primary);
}

.w-check-row label {
    font-size: 13px;
    color: var(--zinq-dark);
    cursor: pointer;
    line-height: 1.2;
    user-select: none;
    text-align: left;
}

.w-check-row a {
    text-decoration: underline;
    color: var(--w-link-color);
}

.w-btn {
    height: 54px;
    width: 100%;
    font-size: 17px;
    font-weight: 700;
}

.w-error {
    color: #C0392B;
    font-size: 13px;
    margin-top: -12px;
    margin-bottom: 12px;
    text-align: left;
    display: none;
}

[data-theme="dark"] .w-error {
    color: #FFB4A2;
}

/* Success State */
.success-state {
    display: none;
    animation: fadeIn 0.5s ease;
}

.s-num {
    font-family: var(--font-head);
    font-size: 44px;
    margin-bottom: 8px;
}

.s-sub {
    font-size: 15px;
    margin-bottom: 24px;
}

.s-link-box {
    background: white;
    color: var(--primary);
    padding: 12px 20px;
    border-radius: var(--radius-pill);
    font-family: monospace;
    font-size: 16px;
    margin: 0 auto 24px auto;
    display: inline-block;
}

.s-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
}

.s-btn {
    height: 44px;
    padding: 0 24px;
    font-size: 15px;
}

.s-btn-outline {
    background: transparent;
    border: 2px solid var(--text-main);
    color: var(--text-main);
    transition: all 0.2s ease;
}

.s-btn-outline:hover {
    background: var(--text-main);
    color: var(--card-bg);
    border-color: var(--text-main);
}

.s-conf {
    font-size: 14px;
    color: var(--text-muted);
}



/* Footer */
footer {
    background: var(--footer-bg);
    color: var(--footer-text);
    padding: 60px 0 24px 0;
    border-top: 1px solid var(--border-subtle);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 40px;
    margin-bottom: 24px;
    align-items: center;
}

.f-logo {
    font-family: var(--font-head);
    font-size: 22px;
    margin-bottom: 8px;
    font-weight: 700;
    color: var(--f-logo);
}

.f-sub {
    font-size: 13px;
    color: var(--f-sub);
}

.f-center {
    font-size: 13.5px;
    font-style: italic;
    color: var(--f-center);
    text-align: center;
    line-height: 1.45;
    max-width: 800px;
    margin: 0 auto;
}

.f-social {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
}

.f-icon {
    width: 24px;
    height: 24px;
    color: var(--f-social-default);
}

.f-icon:hover {
    color: var(--f-social-hover);
}

.f-bottom {
    border-top: var(--f-bottom-border);
    padding-top: 16px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    font-size: 12px;
    color: var(--f-copyright);
}

.f-bottom>span {
    justify-self: start;
}

.f-bottom a {
    color: inherit;
}

.f-bottom a:hover {
    color: #FFFFFF;
    text-decoration: underline;
}

.f-disclaimer {
    font-size: 11px;
    color: var(--f-sub);
    text-align: center;
    opacity: 0.7;
    line-height: 1.4;
    max-width: 480px;
    margin: 0 24px;
}

.f-links {
    display: flex;
    gap: 16px;
    white-space: nowrap;
    justify-self: end;
}

/* Animations */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition-property: opacity, transform, background-color, color, border-color, box-shadow;
    transition-duration: 0.5s, 0.5s, 0.3s, 0.3s, 0.3s, 0.3s;
    transition-timing-function: ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Pricing Tab Switcher Defaults (Desktop Hidden) */
.pricing-tabs {
    display: none;
}

/* Responsive */
@media (max-width: 780px) {
    h1 {
        font-size: 2.2rem !important;
    }

    .trust-section {
        padding: 60px 0;
    }

    .trust-grid {
        grid-template-columns: 1fr;
    }

    .hero {
        padding-top: 100px;
        text-align: center;
    }

    .hero-label,
    .subheadline {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-visual {
        width: 100%;
    }

    :root {
        --card-width: min(300px, calc(100% - 64px));
        --card-gap: 12px;
    }

    /* Very small phones (≤ 380px) — tighten further */
    @media (max-width: 380px) {
        :root {
            --card-width: min(280px, calc(100% - 56px));
            --card-gap: 8px;
        }
    }

    .cards-wrapper {
        width: calc(100% + 32px) !important;
        max-width: calc(100% + 32px) !important;
        /* Break out of container padding safely without 100vw */
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding: 0 !important;
        margin-top: 16px !important;
        margin-bottom: 64px !important;
    }

    .cards-scroll {
        width: 100% !important;
        /* Perfect mathematical centering based on wrapper width */
        padding-left: calc(50% - (var(--card-width) / 2)) !important;
        padding-right: calc(50% - (var(--card-width) / 2)) !important;
        padding-top: 24px !important;
        padding-bottom: 16px !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .cards-scroll::-webkit-scrollbar {
        display: none !important;
    }

    .carousel-dots {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .scroll-card {
        flex: 0 0 var(--card-width) !important;
        width: var(--card-width) !important;
        scroll-snap-align: center !important;
    }

    .nav-arrow {
        display: none;
    }

    /* Keep nav CTA on mobile but scale it down to fit next to theme toggle */
    .nav-btn {
        padding: 8px 16px;
        font-size: 14px;
    }

    .scroll-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 13px;
        color: var(--text-muted);
        margin-top: 12px;
        margin-bottom: 16px;
    }

    .scroll-hint-chevron {
        display: inline-block;
        animation: bounceHint 1.5s ease-in-out infinite;
    }

    .scroll-hint-chevron.left {
        animation-name: bounceHintLeft;
    }

    @keyframes bounceHint {

        0%,
        100% {
            transform: translateX(0);
        }

        50% {
            transform: translateX(4px);
        }
    }

    @keyframes bounceHintLeft {

        0%,
        100% {
            transform: translateX(0);
        }

        50% {
            transform: translateX(-4px);
        }
    }

    .builder-note {
        padding: 0 20px;
    }

    .problem-grid,
    .pricing-grid,
    .city-grid {
        grid-template-columns: 1fr;
    }

    .hiw-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        border-left: none;
        padding-left: 0;
        margin-left: 0;
    }

    .hiw-arrow {
        display: none;
    }

    .hiw-col {
        padding-top: 0;
    }

    .hiw-text {
        margin-bottom: 0 !important;
    }

    .pc-free,
    .pc-supporter,
    .pc-founders {
        padding: 16px 16px 12px 16px !important;
        margin: 0 auto 16px auto !important;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .f-social {
        justify-content: center;
    }

    .f-center {
        max-width: 320px !important;
    }

    .f-bottom {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 12px !important;
    }

    .f-disclaimer {
        margin: 8px 0 !important;
        max-width: 100% !important;
    }

    .section-title,
    .trust-title,
    .waitlist-section h2,
    .pricing-section .section-title {
        font-size: clamp(24px, 6vw, 28px) !important;
        line-height: 1.15 !important;
        margin-top: 0 !important;
        padding-top: 4px !important;
    }

    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .hero h1 {
        font-size: clamp(36px, 10vw, 48px) !important;
        line-height: 1.1 !important;
        letter-spacing: -0.02em;
        padding: 0 12px !important;
    }

    /* Mobile Compactness Overrides */
    .problem-section,
    .hiw-section,
    .city-section,
    .pricing-section,
    .waitlist-section {
        padding: 64px 0 !important;
    }

    /* Reduce bottom margins on mobile grids to prevent compounding vertical gaps */
    .timeline-grid,
    .city-grid,
    .pricing-grid {
        margin-bottom: 0 !important;
    }

    .trust-section {
        padding: 40px 16px 48px 16px !important;
        width: calc(100% - 32px) !important;
        border-radius: var(--radius-section) !important;
        margin: 0 auto !important;
    }

    .trust-title {
        margin-bottom: 32px !important;
    }

    .trust-quote {
        margin-left: 0 !important;
    }

    /* Mobile Typography Strict Overrides */
    /* Consolidated above */

    .prob-title,
    .hiw-title,
    .pc-name,
    .price-title,
    .city-stat {
        font-size: 16px !important;
    }

    .prob-text,
    .hiw-text,
    .trust-text,
    .city-para,
    .bn-text,
    .waitlist-sub {
        font-size: 15px !important;
        line-height: 1.5 !important;
    }

    .hero {
        padding-top: 90px !important;
        padding-bottom: 16px !important;
    }

    .hero h1 {
        margin-bottom: 8px !important;
    }

    .subheadline {
        font-size: 16px !important;
        line-height: 1.5 !important;
        margin-bottom: 16px !important;
        padding: 0 12px;
    }

    .hero-cta {
        margin-bottom: 12px !important;
    }

    .cards-wrapper {
        margin-top: 16px !important;
        margin-bottom: 64px !important;
    }

    .p-card,
    .problem-card {
        padding: 16px !important;
    }

    .problem-grid,
    .city-grid {
        gap: 12px !important;
        margin-bottom: 16px !important;
    }

    .hiw-grid {
        gap: 16px !important;
    }

    .trust-card {
        width: 100% !important;
        box-sizing: border-box !important;
        padding-bottom: 40px !important;
    }

    .trust-card .profile-card-header {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .trust-card .profile-card-header .user-info {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .trust-card .pc-avatar {
        width: 48px !important;
        height: 48px !important;
        flex-shrink: 0 !important;
    }

    .trust-card .pc-name {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 4px 6px !important;
        white-space: normal !important;
        font-size: 16px !important;
        line-height: 1.25 !important;
    }

    .trust-card .match-badge-premium {
        flex-shrink: 0 !important;
    }

    .hiw-title {
        margin-bottom: 4px !important;
    }

    .city-para {
        margin-top: 16px !important;
        margin-bottom: 16px !important;
    }

    .builder-note {
        margin: 24px auto !important;
    }

    .city-section p.reveal:last-child {
        margin-top: 8px !important;
        margin-bottom: -16px !important;
    }

    .pricing-section .section-title {
        margin-bottom: 16px !important;
    }

    .pricing-grid {
        gap: 16px !important;
    }

    .w-input {
        margin-bottom: 12px !important;
    }

    .w-check-row {
        margin-bottom: 16px !important;
    }

    footer {
        padding-top: 32px !important;
    }

    .city-card {
        padding: 24px 20px !important;
    }

    .city-icon {
        margin-bottom: 12px !important;
    }

    .city-stat {
        font-size: 20px !important;
        margin-bottom: 8px !important;
    }

    .city-card.featured .city-stat {
        font-size: 22px !important;
    }

    .section-title {
        margin-bottom: 24px !important;
    }

    .prob-title,
    .pricing-name,
    .hiw-title {
        font-size: 22px !important;
    }

    .prob-badge,
    .social-proof-pill,
    .hero-badge {
        font-size: 11px !important;
        padding: 6px 10px !important;
    }

    .scroll-card {
        flex: 0 0 var(--card-width) !important;
        width: var(--card-width) !important;
    }

    .cards-scroll {
        padding: 24px calc(50% - var(--card-width) / 2) 16px !important;
        gap: var(--card-gap) !important;
    }

    /* =========================================
               ZINQ MOBILE UI/UX ENFORCEMENT PATCH
            ========================================= */

    /* 1. Strict Typographic Clamp for Mobile H2s */
    h2,
    .section-title,
    .trust-title {
        font-size: clamp(1.5rem, 6vw, 1.75rem) !important;
        line-height: 1.15 !important;
        margin-bottom: 1.5rem !important;
        letter-spacing: -0.01em !important;
    }

    /* 2. Absolute Margins & Unbreakable Stacked Cards */
    .timeline-grid,
    .problem-grid,
    .city-grid,
    .trust-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 24px !important;
        box-sizing: border-box !important;
    }

    .pricing-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 16px !important;
        box-sizing: border-box !important;
    }

    /* 3. The Tag Wrap Fix (Profile Cards) */
    .pc-tags {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
        margin-bottom: 16px !important;
    }

    /* 4. Touch Target & Padding Optimization */
    .price-card,
    .timeline-step,
    .problem-card,
    .city-card {
        width: 100% !important;
        padding: 20px 24px !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
    }

    .price-card {
        padding: 24px 20px 20px !important;
    }

    /* 5. Mobile Pricing Badge Positioning Fix */
    .price-card.pc-free,
    .price-card.pc-supporter,
    .price-card.pc-founders {
        position: relative !important;
        margin-top: 24px !important;
    }

    .pop-badge {
        position: absolute !important;
        top: 0 !important;
        left: 24px !important;
        transform: translateY(-50%) !important;
        z-index: 2 !important;
    }
}

/* ZINQ CRO CSS UPDATES */
body,
main,
section,
.profile-card {
    width: 100%;
    max-width: 100%;
}

section[id],
div[id] {
    scroll-margin-top: calc(var(--nav-height) + 24px);
}

.waitlist-form-btn {
    background-color: var(--zinq-dark) !important;
    color: var(--zinq-surface) !important;
    border: 2px solid var(--zinq-dark) !important;
    /* GPU-safe: no transition:all */
    transition: transform 0.2s ease, opacity 0.2s ease,
        background-color 0.2s ease, color 0.2s ease;
}

@media (hover: hover) {
    .waitlist-form-btn:hover {
        background-color: transparent !important;
        color: var(--zinq-dark) !important;
    }
}

/* CRO: Dimmed button with a black/white shine to indicate "Coming Soon" */
.lifetime-deal-btn {
    background-color: transparent !important;
    color: var(--monthly-btn-text) !important;
    border: var(--monthly-btn-border) !important;
    opacity: 0.5 !important;
    transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

@media (hover: hover) {
    .lifetime-deal-btn:hover {
        transform: none !important;
        box-shadow: none !important;
    }
}

/* Dark Mode Contrast Overrides */

/* Luminous Dark Mode: Overlay pills on user photos use Glassmorphism */
[data-theme="dark"] .scroll-card .pc-tag {
    background-color: rgba(18, 18, 18, 0.65) !important;

    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.4) !important;
    padding: 3px 8px !important;
    font-size: 10px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
}

/* Dark mode non-overlay pills: 12% tint bg + luminous text */
[data-theme="dark"] .pc-tag {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #E2E8F0 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
    /* No backdrop-filter — solid tint is sufficient */
}

/* Dark mode match badges: solid backgrounds, no blur dependency */
[data-theme="dark"] .pc-match.match-badge-high {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: none !important;
}

/* Dark mode: Glassmorphism overlay match badges */
[data-theme="dark"] .scroll-card .pc-match.match-badge-high {
    background-color: rgba(18, 18, 18, 0.65) !important;

    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Dark Mode: Opaque Dark with Muted Text */
[data-theme="dark"] .scroll-card .pc-match.match-badge-low {
    background-color: #121212 !important;
    color: #A0A0A0 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

[data-theme="dark"] .pc-match.match-badge-low {
    background-color: rgba(255, 255, 255, 0.04) !important;
    color: #A0A0A0 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .match-badge-overlay {
    background-color: #1A1A1A !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .scroll-card .pc-match.match-badge-low.match-badge-overlay {
    background-color: #1A1A1A !important;
    color: #A0A0A0 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

[data-theme="dark"] .match-badge-premium {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .profile-tag-pill {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #E2E8F0 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .activity-proposal-block {
    background-color: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="dark"] .activity-proposal-title {
    color: #FFFFFF !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

[data-theme="dark"] .activity-proposal-title::before {
    display: none !important;
}

[data-theme="dark"] .step-number {
    color: #FFFFFF !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

[data-theme="dark"] .scroll-card.visible.is-active {
    box-shadow: 0px 16px 48px -12px rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .w-check-row input[type="checkbox"] {
    border-color: rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .w-check-row input[type="checkbox"]:checked {
    border-color: var(--zinq-orange);
}

[data-theme="dark"] .w-check-row input[type="checkbox"]::before {
    box-shadow: inset 1em 1em var(--zinq-orange);
    background-color: var(--zinq-orange);
}

[data-theme="dark"] .pop-badge {
    box-shadow: 0 0 0 6px var(--bg-pricing) !important;
}

[data-theme="dark"] .w-check-row label {
    color: var(--zinq-dark);
}

/* App UI Mockup Buttons - De-escalated */
[data-theme="dark"] .btn-propose-hero,
[data-theme="dark"] .btn-accept-trust,
[data-theme="dark"] .btn-teal-outline {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #A0A0A0 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    pointer-events: none !important;
    box-shadow: none !important;
}

[data-theme="dark"] .pc-proposal {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .prob-text {
    color: #A5B0BB;
}

/* Fix the Muddy Competitor Warning Tags & Social Proof Pill */
[data-theme="dark"] .prob-badge,
[data-theme="dark"] .prob-badge-red,
[data-theme="dark"] .social-proof-pill {
    background-color: rgba(224, 114, 92, 0.06) !important;
    color: #E0725C !important;
    border: 1px solid rgba(224, 114, 92, 0.15) !important;
}

/* Elevate the Lifetime Card physically with a lighter surface and an ambient glow */
/* Elevate the Annual Card physically with a lighter surface and an ambient glow */
[data-theme="dark"] .pc-supporter {
    background-color: #282C36 !important;
    /* Physically lifts the card from the #1E2128 base */
    border: 2px solid var(--zinq-orange) !important;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2), 0px 24px 48px -12px rgba(217, 119, 54, 0.35) !important;
}

@media (hover: hover) {
    [data-theme="dark"] .pc-supporter:hover {
        transform: translateY(-4px) scale(1.01) !important;
        box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.3), 0px 32px 64px -12px rgba(217, 119, 54, 0.45) !important;
    }
}

[data-theme="dark"] .hero-btn {
    background-color: #121212 !important;
    color: var(--zinq-orange) !important;
    border: 2px solid var(--zinq-orange) !important;
}

@media (hover: hover) {
    [data-theme="dark"] .hero-btn:hover {
        background-color: transparent !important;
        color: var(--zinq-orange) !important;
    }
}

#netlify-badge,
.netlify-badge,
netlify-badge,
a[href*="netlify.com"] {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* Hero inline form */
.hero-inline-form {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 600px;
    margin: 0 auto 24px auto;
    background: #FFFFFF;
    border-radius: 100px;
    padding: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    z-index: 9999;
}

.hero-inline-form:focus-within {
    box-shadow: 0 12px 48px rgba(217, 119, 54, 0.15);
    transform: translateY(-2px);
    border-color: rgba(217, 119, 54, 0.3);
}

[data-theme="dark"] .hero-inline-form {
    background: #1A1D24;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .hero-inline-form:focus-within {
    box-shadow: 0 12px 48px rgba(217, 119, 54, 0.2);
}

.hero-inline-form .hero-divider {
    width: 1px;
    height: 24px;
    background: rgba(0, 0, 0, 0.1);
    margin: 0 12px;
}

[data-theme="dark"] .hero-inline-form .hero-divider {
    background: rgba(255, 255, 255, 0.1);
}

.hero-inline-form .w-input {
    border: none;
    box-shadow: none;
    background: transparent;
    height: 48px;
    line-height: normal;
    flex: 1;
    padding: 0 16px;
    margin-bottom: 0;
    font-size: 16px;
    color: var(--text-main);
}

.hero-inline-form select.w-input {
    appearance: none;
    cursor: pointer;
    flex: 0.8;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23888%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 32px;
}

.hero-inline-form .w-input:focus {
    box-shadow: none;
}

.hero-inline-form .hero-btn {
    height: 48px;
    min-width: 140px;
    padding: 0 24px;
    border-radius: 100px;
    font-size: 16px;
    margin: 0;
    background-color: var(--zinq-orange) !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(217, 119, 54, 0.3);
    animation: none;
}

.hero-inline-form .hero-btn:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 6px 16px rgba(217, 119, 54, 0.4);
}

/* Floating Match Badge Animation */
@keyframes gentleFloat {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-4px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* Waving Character Animation */
@keyframes waveEmoji {
    0% {
        transform: rotate(0deg);
    }

    10% {
        transform: rotate(14deg);
    }

    20% {
        transform: rotate(-8deg);
    }

    30% {
        transform: rotate(14deg);
    }

    40% {
        transform: rotate(-4deg);
    }

    50% {
        transform: rotate(10deg);
    }

    60% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.waving-hand {
    display: inline-block;
    transform-origin: 70% 70%;
    animation: waveEmoji 2.5s infinite;
}

/* Micro-interactions: heartbeat pulse on match badge hover */
.pc-match {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
}

@media (hover: hover) {
    .scroll-card:hover .pc-match {
        transform: scale(1.05) translateY(-2px);
        box-shadow: 0 4px 12px rgba(43, 92, 90, 0.2) !important;
    }
}

[data-theme="dark"] .scroll-card:hover .pc-match {
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15) !important;
}

.visually-hidden-honeypot {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
}

.editorial-blockquote {
    max-width: 520px;
    margin: 96px auto 48px;
    padding: 0 24px;
    border-left: none;
    background: none;
    border-radius: 0;
    font-size: 21px;
    font-weight: 500;
    color: var(--text-muted);
    font-family: 'Playfair Display', serif;
    font-style: italic;
    box-shadow: none;
    text-align: center;
    position: relative;
    z-index: 1;
}

.editorial-blockquote::before {
    content: "“";
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 80px;
    color: var(--primary);
    opacity: 0.3;
    font-family: 'Playfair Display', serif;
    line-height: 1;
    z-index: -1;
}

[data-theme="dark"] .editorial-blockquote {
    background: none;
}

/* Mobile Flawless Adjustments */
@media (max-width: 600px) {
    .editorial-blockquote {
        padding: 0 20px !important;
        margin: 40px auto 16px !important;
        max-width: 85% !important;
        font-size: 17px !important;
        line-height: 1.5 !important;
        color: var(--text-muted) !important;
    }

    .editorial-blockquote::before {
        top: -35px;
        font-size: 70px;
        opacity: 0.3 !important;
    }

    .city-card.featured {
        padding: 40px 24px !important;
    }

    .form-container {
        padding: 32px 20px !important;
    }

    .hero-inline-form {
        flex-direction: column;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        height: auto !important;
        gap: 16px;
        position: relative;
        z-index: 9999;
    }

    .hero-inline-form .hero-divider {
        display: none;
    }

    .hero-inline-form .w-input {
        flex: none !important;
        height: 54px !important;
        min-height: 54px !important;
        line-height: normal !important;
        background: #FFFFFF !important;
        border: 1px solid var(--border-subtle) !important;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03) !important;
        border-radius: 100px;
        margin-bottom: 0 !important;
        width: 100%;
        padding-left: 24px;
        font-size: 16px;
        /* Avoid mobile Safari auto-zoom behavior */
    }

    [data-theme="dark"] .hero-inline-form .w-input {
        background: #1A1D24 !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    }

    .hero-inline-form .hero-btn {
        width: 100%;
        border-radius: 100px;
        min-width: auto;
        font-size: 16px;
        height: 54px !important;
    }

    .price-btn {
        height: 54px !important;
        font-size: 16px !important;
    }

    .social-proof-pill {
        padding: 8px 16px;
        font-size: 12px;
    }

    .price-card.pc-supporter .price-title {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 8px;
    }

    /* --- Exact Mobile Overrides --- */
    .hero {
        padding-top: 80px !important;
        padding-bottom: 12px !important;
    }

    .hero h1 {
        font-size: clamp(3.1rem, 8.8vw, 4.4rem) !important;
        line-height: 0.96 !important;
        margin-bottom: 24px !important;
    }

    .hero p.subheadline {
        font-size: 17.5px !important;
        max-width: 24ch !important;
        margin: 0 auto 24px auto !important;
        line-height: 1.45 !important;
    }

    .hero-inline-form .w-input,
    .hero-inline-form .hero-btn {
        height: 58px !important;
        min-height: 58px !important;
    }

    .hero-inline-form .hero-btn {
        font-size: 18px !important;
    }

    .hero-microcopy-row {
        margin-top: 8px !important;
    }

    .timeline-step {
        padding: 16px !important;
    }

    .timeline-step .hiw-title {
        margin-bottom: 8px !important;
    }

    .timeline-step .hiw-text {
        font-size: 15px !important;
        line-height: 1.5 !important;
    }

    .step-number {
        margin-bottom: 12px !important;
    }

    .cards-wrapper {
        margin-top: -16px !important;
    }

    .scroll-card {
        padding: 0 !important;
    }

    .scroll-card .pc-body {
        padding: 16px 20px !important;
    }

    .scroll-card .pc-match {
        top: 8px !important;
        right: 8px !important;
        padding: 4px 10px !important;
        font-size: 12px !important;
        border-radius: 6px !important;
    }

    .scroll-card .pc-tags {
        bottom: 8px !important;
        gap: 4px !important;
    }

    .scroll-card .pc-name {
        margin-bottom: 12px !important;
    }

    .scroll-card .pc-proposal {
        margin-bottom: 0 !important;
    }

    .pc-proposal {
        padding: 12px !important;
    }

    .community-section {
        padding-top: 40px !important;
    }

    .trust-section {
        padding: 40px 0 !important;
    }

    .problem-section {
        padding: 40px 0 !important;
    }

    .problem-card {
        padding: 16px !important;
    }

    footer {
        padding: 32px 0 80px 0 !important;
    }

    .f-bottom {
        margin-top: 24px !important;
        gap: 16px !important;
    }
}

/* --- Extra Narrow Mobile (380px) --- */
@media (max-width: 380px) {
    .hero {
        padding-top: 64px !important;
        padding-bottom: 8px !important;
    }

    .hero h1 {
        font-size: clamp(2.5rem, 8vw, 3.2rem) !important;
    }

    .hero p.subheadline {
        max-width: 22ch !important;
        font-size: 16px !important;
    }

    .timeline-step,
    .feature-card,
    .problem-card,
    .city-card {
        padding: 12px !important;
    }

    .scroll-card .pc-body {
        padding: 12px 16px !important;
    }

    .prob-title {
        font-size: 18px !important;
    }

    .hero-inline-form .w-input,
    .hero-inline-form .hero-btn {
        height: 52px !important;
        min-height: 52px !important;
        font-size: 16px !important;
    }
}

/* Extracted Inline Styles */

@keyframes pulse-orange {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.7);
        /* Orange */
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(249, 115, 22, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(249, 115, 22, 0);
    }
}


.corner-ribbon {
    position: absolute;
    top: 22px;
    right: -32px;
    width: 130px;
    background-color: var(--primary);
    color: #FFFFFF;
    padding: 6px 0;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(45deg);
    box-shadow: 0 4px 12px rgba(26, 107, 107, 0.25);
    z-index: 10;
    letter-spacing: 1px;
}

[data-theme="dark"] .corner-ribbon {
    color: var(--bg-pricing);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
}




/* --- GLOBAL UI HARMONIZATION OVERRIDES --- */

/* Buttons */
.btn {
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, background-color 0.2s ease !important;
}

.btn-amber {
    box-shadow: 0 4px 12px rgba(217, 119, 54, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

@media (hover: hover) {
    .btn-amber:hover {
        transform: translateY(-2px) scale(1.02) !important;
        box-shadow: 0 8px 24px rgba(217, 119, 54, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    }
}

.btn-teal {
    box-shadow: 0 4px 12px rgba(43, 92, 90, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

@media (hover: hover) {
    .btn-teal:hover {
        transform: translateY(-2px) scale(1.02) !important;
        box-shadow: 0 8px 24px rgba(43, 92, 90, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    }
}

.btn-monthly {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

[data-theme="dark"] .btn-monthly {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

@media (hover: hover) {
    .btn-monthly:hover {
        transform: translateY(-2px) scale(1.02) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    }

    [data-theme="dark"] .btn-monthly:hover {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    }
}

/* Problem Cards */
.problem-card {
    border-radius: 24px !important;
    padding: 36px 32px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

[data-theme="dark"] .problem-card {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    background: rgba(26, 29, 36, 0.6) !important;

}

@media (hover: hover) {
    .problem-card:hover {
        transform: translateY(-6px) !important;
        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    }

    [data-theme="dark"] .problem-card:hover {
        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    }
}

/* City Cards */
.city-card {
    border-radius: 24px !important;
    padding: 36px 32px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

[data-theme="dark"] .city-card {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    background: rgba(26, 29, 36, 0.6) !important;

}

@media (hover: hover) {
    .city-card:hover {
        transform: translateY(-6px) !important;
        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    }

    [data-theme="dark"] .city-card:hover {
        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    }
}

/* Inputs */
.w-input {
    border-radius: 100px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), inset 0 2px 4px rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.w-input:focus {
    box-shadow: 0 0 0 4px rgba(43, 92, 90, 0.15), inset 0 2px 4px rgba(0, 0, 0, 0.02) !important;
    border-color: var(--primary) !important;
}

[data-theme="dark"] .w-input {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 2px 6px rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

[data-theme="dark"] .w-input:focus {
    box-shadow: 0 0 0 4px rgba(100, 255, 218, 0.15), inset 0 2px 6px rgba(0, 0, 0, 0.1) !important;
    border-color: #64FFDA !important;
}

/* --- MOBILE FIXES FOR HARMONIZED UI --- */
@media (max-width: 768px) {
    .problem-card {
        padding: 24px 20px !important;
        border-radius: 20px !important;
    }

    .city-card {
        padding: 28px 20px !important;
        border-radius: 20px !important;
    }

    .price-card {
        padding: 28px 24px;
    }

    .pricing-grid {
        gap: 16px;
    }

    .btn {
        height: 48px;
    }

    .w-input {
        height: 48px !important;
        font-size: 16px !important;
        padding: 0 16px !important;
    }
}

/* --- FORM INPUT TEXT CENTERING --- */
.w-input {
    text-align: center !important;
}

/* Fix dropdown alignment inside the custom select wrapper if necessary */
select.w-input {
    text-align: center !important;
    text-align-last: center !important;
}

/* --- FIX HERO FORM DESKTOP LAYOUT --- */
@media (min-width: 601px) {
    .hero-inline-form .w-input {
        border-radius: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        height: 48px !important;
    }

    .hero-inline-form .w-input:focus {
        box-shadow: none !important;
        outline: none !important;
    }

    [data-theme="dark"] .hero-inline-form .w-input {
        background: transparent !important;
        box-shadow: none !important;
    }
}

/* --- FIX HERO MARGIN & PLACEHOLDER FOCUS --- */
.hero h1 {
    margin-bottom: 36px !important;
}

.w-input:focus::placeholder {
    color: transparent !important;
}

/* --- CUSTOM DROPDOWN & LAYOUT FIXES --- */

/* 1. Custom Select Dropdown UI */
.custom-select-container {
    position: relative;
    flex: 0.8;
}

.hidden-native-select {
    display: none !important;
}

.custom-select-trigger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    user-select: none;
    color: var(--text-muted);
    /* Placeholder color initially */
}

.custom-select-trigger.has-value {
    color: var(--text-main);
}

.custom-select-icon {
    position: absolute;
    right: 24px;
    transition: transform 0.3s ease;
    stroke: var(--text-muted);
}

.custom-select-container.open .custom-select-icon {
    transform: rotate(180deg);
}

.custom-select-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);

    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 100;
    overflow-y: auto !important;
    max-height: 250px;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.custom-select-dropdown::-webkit-scrollbar {
    display: none;
}

[data-theme="dark"] .custom-select-dropdown {
    background: rgba(26, 29, 36, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.custom-select-container.open .custom-select-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.custom-select-option {
    padding: 12px 24px;
    font-size: 16px;
    color: var(--text-main);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.custom-select-option:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .custom-select-option:hover {
    background-color: rgba(255, 255, 255, 0.06);
}

@media (max-width: 600px) {
    .custom-select-container {
        flex: none;
        width: 100%;
    }
}

/* --- CRITICAL BUG FIXES --- */
/* Z-Index fix for Custom Dropdown */
.hero {
    position: relative;
    z-index: 900;
}

.hero-text {
    position: relative;
    z-index: 10;
    max-width: 100%;
    min-width: 0;
}

.hero-visual {
    position: relative;
    z-index: 1;
    max-width: 100%;
    min-width: 0;
}

.hero-cta {
    position: relative;
    z-index: 999;
}

.custom-select-dropdown {
    z-index: 9999 !important;
}




/* --- HERO CONSENT & ERROR STYLES --- */
.hero-consent-text {
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.hero-consent-text a:hover {
    opacity: 0.9;
}

.w-error {
    color: #C0392B;
    font-size: 13px;
    margin-top: 8px;
    margin-bottom: 12px;
    text-align: center;
    display: none;
    animation: fadeIn 0.3s ease;
}

/* --- SVG PROBLEM ICONS --- */
.prob-icon svg {
    width: 32px;
    height: 32px;
}

/* --- CONTENT BLOCK LAYERING SAFEGUARD --- */
/* Ensures content blocks appear above background elements */
.problem-card,
.timeline-step,
.city-card,
.price-card,
.scroll-card,
.p-card,
.editorial-blockquote,
.story-bridge {
    position: relative;
    z-index: 10;
}

/* --- ABOUT PAGE SPECIFIC STYLES --- */
@keyframes pulseBlob {
    0% {
        transform: translateX(-50%) scale(1);
        opacity: 0.6;
    }

    100% {
        transform: translateX(-50%) scale(1.1);
        opacity: 1;
    }
}

.founder-card {
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: 24px;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.06);
    padding: clamp(32px, 6vw, 56px) clamp(24px, 6vw, 88px);
    position: relative;
    overflow: hidden;
    text-align: left;
    max-width: 800px;
    margin: 0 auto;
    transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.feature-card {
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    padding: 32px 28px;
    border-radius: 24px;
    text-align: left;
    box-shadow: var(--card-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) {
    .feature-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    }
}

[data-theme="dark"] .feature-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .feature-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.avatar-ivan {
    background: url('../ivan_image.webp') center/cover no-repeat, var(--avatar-grad);
}

@keyframes pulseBlobOpacity {
    0% {
        opacity: 0.35;
    }

    100% {
        opacity: 0.8;
    }
}

.founder-card {
    background: var(--card-bg);
    border: var(--card-border);
    border-radius: var(--radius-card);
    box-shadow: var(--card-shadow);
    padding: clamp(32px, 6vw, 56px) clamp(24px, 6vw, 88px);
    position: relative;
    overflow: hidden;
    text-align: left;
    max-width: 800px;
    margin: 0 auto;
    transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] .founder-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.no-transition,
.no-transition * {
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Accessibility Focus States */
:focus-visible {
    outline: 2px solid var(--primary) !important;
    outline-offset: 4px !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
.custom-select-option:focus-visible,
.theme-toggle:focus-visible {
    outline: 2px solid var(--primary) !important;
    outline-offset: 4px !important;
}