/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Additional reset for h3 and p elements */
h3, p {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

:root {
    /* Color — ink/text/surfaces */
    --color-ink: #121212;
    --color-ink-hover: #2a2a2a;
    --color-text: #333333;
    --color-muted: #666666;
    --color-subtle: #888888;
    --color-border: #e8e8e8;
    --color-bg: #ffffff;
    --color-bg-soft: #fafafa;
    --color-bg-muted: #f0f0f0;

    /* Color — accents */
    --color-accent: #10b981;
    --color-error: #dc2626;

    /* Color — deal stages */
    --color-stage-inquiry: #f59e0b;
    --color-stage-hold: #6366f1;
    --color-stage-proposal: #8b5cf6;
    --color-stage-confirmed: #10b981;

    /* Spacing scale (4px base) */
    --space-xs: 0.25rem;   /* 4px  */
    --space-sm: 0.5rem;    /* 8px  */
    --space-md: 1rem;      /* 16px */
    --space-lg: 1.5rem;    /* 24px — matches mobile nav padding */
    --space-xl: 2rem;      /* 32px */
    --space-2xl: 3rem;     /* 48px */
    --space-3xl: 5rem;     /* 80px */

    /* Type scale */
    --text-xs: 0.85rem;
    --text-sm: 0.95rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;

    /* Radii + borders */
    --radius: 0;
    --border-width: 2px;

    /* Motion */
    --transition-fast: transform 0.18s ease-out,
                       background-color 0.18s ease-out,
                       border-color 0.18s ease-out,
                       color 0.18s ease-out,
                       box-shadow 0.18s ease-out;

    /* Legacy aliases — keep so existing rules keep working */
    --primary-color: var(--color-ink);
    --text-color: var(--color-text);
    --background-color: var(--color-bg);
    --spacing-unit: 1rem;
    --transition: all 0.3s ease;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--background-color);
    /* Inter OpenType features: single-story 'a' (cv11), stylistic set 01,
       tabular numbers for stats, contextual alternates. */
    font-feature-settings: 'cv11', 'ss01', 'cv02';
    font-variant-numeric: proportional-nums;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Typography */
h1, h2, p, .subtext, .nav-link, .cta-button {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}

h1 {
    font-size: clamp(4rem, 12vw, 8rem);
    font-weight: 900;
    line-height: 1.02;
    color: white;
    margin-bottom: 0.75rem;
    letter-spacing: -0.035em;
    max-width: 1400px;
    transition: color 0.4s ease;
}

h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.12;
    color: var(--primary-color);
    margin-bottom: 2rem;
    letter-spacing: -0.025em;
}

/* Canonical h3/h4 base — contextual overrides live on more specific selectors */
h3 {
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--color-ink);
}

h4 {
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--color-ink);
}

.subtext {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    line-height: 1.6;
    color: var(--text-color);
    max-width: 800px;
    margin-bottom: 2rem;
    transition: color 0.4s ease;
}

/* Navigation */
.main-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    height: 64px;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: none;
    transition: background 0.3s;
}

/* Navigation scrolled state - ENABLED FOR HEADER TO CONTENT TRANSITION */
.main-nav.scrolled {
    background: rgba(255,255,255,0.92);
    box-shadow: none;
}

.main-nav.scrolled .nav-link {
    color: var(--primary-color);
}

.main-nav.scrolled .nav-link:hover {
    color: var(--color-ink-hover);
}

.main-nav.scrolled .nav-link.active {
    color: var(--primary-color);
}

.main-nav.scrolled .nav-link.active::after {
    background-color: var(--primary-color);
}

.main-nav.scrolled .cta-button {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.main-nav.scrolled .cta-button:hover {
    background-color: #2a2a3e;
    border-color: #2a2a3e;
    color: white;
}

.main-nav.scrolled .nav-demo-button {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px inset var(--primary-color);
}

.main-nav.scrolled .nav-demo-button:hover {
    background-color: var(--primary-color);
    color: white;
}

.main-nav.scrolled .logo svg mask *,
.main-nav.scrolled .logo svg clipPath * {
    fill: white !important;
}

/* Navigation blog-scrolled state - for #121212 background sections */
.main-nav.blog-scrolled {
    background: rgba(18, 18, 18, 0.9);
    box-shadow: none;
}

.main-nav.blog-scrolled .nav-link {
    color: white;
}

.main-nav.blog-scrolled .nav-link:hover {
    color: var(--color-bg-muted);
}

.main-nav.blog-scrolled .nav-link.active {
    color: white;
}

.main-nav.blog-scrolled .nav-link.active::after {
    background-color: white;
}

.main-nav.blog-scrolled .cta-button {
    background-color: white;
    color: #121212;
}

.main-nav.blog-scrolled .cta-button:hover {
    background-color: var(--color-bg-muted);
    color: #121212;
}

.main-nav.blog-scrolled .logo svg {
    fill: white;
}

.main-nav.blog-scrolled .logo svg mask *,
.main-nav.blog-scrolled .logo svg path {
    fill: white !important;
}

.nav-container {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.25rem;
}

.logo {
    display: block;
    transition: var(--transition);
    height: 28px;
    width: auto;
}

.logo svg {
    height: 100%;
    width: auto;
    transition: all 0.4s ease;
    filter: invert(1) brightness(0);
}

.logo svg path {
    transition: fill 0.4s ease;
}

.logo:hover {
    opacity: 0.8;
}

/* Logo scrolled state - ENABLED FOR NAV TRANSITION */
.main-nav.scrolled .logo svg {
    filter: invert(1) brightness(0);
}

/* Keep mask/clipPath fills white so the logo silhouette inverts cleanly */
.main-nav.scrolled .logo svg mask *,
.main-nav.scrolled .logo svg clipPath * {
    fill: white !important;
}

/* Skip-to-content link — visible on focus for keyboard / screen-reader users */
.skip-to-content {
    position: absolute;
    top: -100px;
    left: var(--space-md);
    z-index: 9999;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-ink);
    color: var(--color-bg);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--text-sm);
}
.skip-to-content:focus {
    top: var(--space-md);
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.nav-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 2rem;
    align-items: center;
}

.nav-links {
    display: flex;
    gap: 2rem;
    align-items: center;
}

/* Mobile hamburger toggle — hidden on desktop, shown ≤652px */
.nav-toggle {
    display: none;
    background: transparent;
    border: 0;
    padding: var(--space-sm);
    cursor: pointer;
    margin-left: var(--space-sm);
    z-index: 1200;
}

.nav-toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-ink);
    margin: 4px 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
    transform-origin: center;
}

.main-nav.scrolled .nav-toggle-bar,
.main-nav.blog-scrolled .nav-toggle-bar {
    background: var(--color-ink);
}

/* Animated X when open */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
    opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* Mobile drawer — hidden off-screen above, slides down when open */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--color-bg);
    padding: 110px var(--space-lg) var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    z-index: 1050;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.mobile-menu.is-open {
    transform: translateY(0);
}

.mobile-menu-link {
    font-size: var(--text-xl);
    font-weight: 500;
    color: var(--color-ink);
    text-decoration: none;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border);
}

.mobile-menu-link:last-child {
    border-bottom: 0;
}

.mobile-menu-cta {
    margin-top: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-ink);
    color: var(--color-bg);
    text-align: center;
    border: var(--border-width) solid var(--color-ink);
    border-bottom: var(--border-width) solid var(--color-ink);
}

.whitepaper-page .toc-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 4px;
    gap: 4px;
    border-radius: 0;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.whitepaper-page .toc-toggle span {
    display: block;
    position: relative;
    width: 18px;
    height: 2px;
    background-color: #121212;
    border-radius: 1px;
}

.whitepaper-page .toc-toggle span::before {
    content: '';
    position: absolute;
    left: -6px;
    top: -1px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #121212;
}

@media (hover: hover) and (pointer: fine) {
    .whitepaper-page .toc-toggle:hover {
        background-color: rgba(0,0,0,0.03);
        transform: translateY(-1px);
    }
}

.whitepaper-page .toc-sidebar {
    position: fixed;
    top: 90px;
    right: 0;
    width: 280px;
    max-width: 80vw;
    height: calc(100vh - 90px);
    background: #ffffff;
    box-shadow: none;
    border-left: none;
    transform: translateX(100%);
    transition: transform 0.25s ease-out;
    z-index: 1200;
    overflow-y: auto;
}

.whitepaper-page .toc-sidebar.open {
    transform: translateX(0);
}

.whitepaper-page .toc-sidebar-inner {
    padding: 1.5rem 1.5rem 2rem 1.5rem;
}

.whitepaper-page .toc-sidebar-inner h3 {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-muted);
    margin-bottom: 1rem;
}

.whitepaper-page .toc-sidebar-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.whitepaper-page .toc-sidebar-list li {
    margin-bottom: 0.4rem;
}

.whitepaper-page .toc-sidebar-list a {
    display: block;
    font-size: 0.95rem;
    color: #333333;
    text-decoration: none;
    padding: 0.25rem 0;
}

.whitepaper-page .toc-sidebar-list a:hover {
    color: var(--primary-color);
}

.whitepaper-page .toc-sidebar-list a.active {
    font-weight: 600;
    color: var(--primary-color);
}

@media (max-width: 768px) {
    .whitepaper-page .toc-sidebar {
        width: 100%;
        max-width: 100%;
    }
}

.nav-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.4s ease;
    font-size: 0.9rem;
    position: relative;
}

.nav-link:hover {
    color: var(--color-ink-hover);
}

.nav-link.active {
    color: var(--primary-color);
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--primary-color);
    transition: background-color 0.4s ease;
}

/* Login button — same size as CTA, text style */
.nav-login {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    text-decoration: none;
    border: var(--border-width) solid transparent;
    border-radius: var(--radius);
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--color-ink);
    transition: var(--transition-fast);
}

.nav-login:hover {
    text-decoration: underline;
}

/* Buttons — shared base for primary CTA and outline variant */
.cta-button,
.nav-demo-button {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    text-decoration: none;
    border: var(--border-width) solid var(--color-ink);
    border-radius: var(--radius);
    font-weight: 500;
    font-size: 0.9rem;
    transition: var(--transition-fast);
    position: relative;
    z-index: 10;
    will-change: transform;
}

.cta-button {
    background-color: var(--color-ink);
    color: var(--color-bg);
}

/* Only apply hover lifts on devices that actually hover — prevents
   sticky tap states on touch devices where :hover latches until
   the user taps elsewhere. */
@media (hover: hover) and (pointer: fine) {
    .cta-button:hover {
        background-color: var(--color-ink-hover);
        border-color: var(--color-ink-hover);
        color: var(--color-bg);
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(18, 18, 18, 0.18);
    }
}

.cta-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(18, 18, 18, 0.15);
}

/* Outlined variant used alongside the primary CTA */
.nav-demo-button {
    background-color: transparent;
    color: var(--color-ink);
    border-style: inset;
}

/* Button group for closely spaced action buttons */
.button-group {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

@media (hover: hover) and (pointer: fine) {
    .nav-demo-button:hover {
        background-color: var(--color-ink);
        color: var(--color-bg);
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(18, 18, 18, 0.12);
    }
}

.nav-demo-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(18, 18, 18, 0.1);
}

/* Focus-visible rings — refined, brand-aligned */
.cta-button:focus-visible,
.nav-demo-button:focus-visible,
.nav-link:focus-visible,
.mobile-menu-link:focus-visible,
.nav-toggle:focus-visible,
.cs-tab:focus-visible,
input:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: 3px;
    border-radius: 1px;
}

/* Reduce motion preference — honor user settings */
@media (prefers-reduced-motion: reduce) {
    .cta-button,
    .nav-demo-button,
    .property-card,
    .blog-card {
        transition: none !important;
    }
    .cta-button:hover,
    .nav-demo-button:hover,
    .property-card:hover,
    .blog-card:hover {
        transform: none !important;
    }
}


/* Hide desktop-only nav demo button on mobile/tablet to avoid duplicate */
@media (max-width: 1024px) {
    .nav-demo-button.desktop-only {
        display: none;
    }
}

/* Mobile nav demo button */
@media (max-width: 652px) {
    .nav-demo-button {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
    
    .button-group {
        gap: 0.5rem;
    }
}

/* Layout */
main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-unit);
}

section {
    padding: calc(var(--spacing-unit) * 8) 0;
}

/* Scroll offset for anchor navigation */
#features,
#how-it-works,
#pricing,
#blog {
    scroll-margin-top: 100px;
}

/* Hero Section */
.hero {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 120px;
    padding-bottom: 4rem;
    padding-left: 2rem;
    padding-right: 2rem;
    max-width: 100%;
    text-align: center;
}

.hero-eyebrow {
    margin-bottom: 1.25rem;
}

.hero-eyebrow span {
    display: inline-block;
    padding: 0.45rem 0.85rem;
    background: var(--color-bg-soft);
    border: 1px solid rgba(18, 18, 18, 0.12);
    color: #333333;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.hero h1 {
    font-size: clamp(2.75rem, 5.4vw, 4.75rem);
    font-weight: 900;
    line-height: 1.05;
    color: var(--primary-color);
    margin-bottom: 1rem;
    letter-spacing: -0.03em;
    max-width: 980px;
    transition: color 0.4s ease;
}

.hero .subtext {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    line-height: 1.6;
    color: #333333;
    margin-bottom: 3rem;
    max-width: 800px;
    transition: color 0.4s ease;
}

.hero-subtext {
    margin-bottom: 1.2rem;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.hero-subtext p:last-child {
    margin-bottom: 0;
}



.hero-subtext p {
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    line-height: 1.55;
    color: #1f1f1f;
    font-weight: 600;
    margin-bottom: 0.25rem;
    transition: color 0.4s ease;
}

#hero-tagline {
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    line-height: 1.55;
    color: #1f1f1f;
    font-weight: 400;
}

.hero-get-started {
    margin-top: 0;
    max-width: 760px;
    width: 100%;
}

/* Hero form has 2 fields + button (no "box" styling) */
.hero-get-started .hero-get-started-form {
    grid-template-columns: minmax(200px, 260px) auto;
    justify-content: center;
    gap: 8px;
}

/* Hero email input: tighter width + icon */
.hero-get-started .hero-get-started-form input[type="email"] {
    padding-left: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23777777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 5L2 7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px 50%;
    background-size: 16px 16px;
}

.hero-subtext p:first-child {
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
}

.video-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 3rem 0;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(18, 18, 18, 0.1);
    aspect-ratio: 16/9;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.video-container::before {
    content: "";
    display: block;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

/* Features List */
.features {
    list-style: none;
    max-width: 800px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.features li {
    position: relative;
    padding-left: 1.5rem;
    font-size: 1.25rem;
    line-height: 1.5;
    flex: 0 0 calc(50% - 1.5rem);
}

.features li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--primary-color);
}

.feature-benefits {
    list-style: none;
    padding: 0;
    margin: 1rem 0 1rem 2rem;
}

.feature-benefits li {
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    line-height: 1.6;
    color: var(--text-color);
    padding-left: 1.5rem;
    margin: 0;
    position: relative;
}

.feature-benefits li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.1em;
}

.feature-content p a {
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 0.3s ease;
}

.feature-content p a:hover {
    color: var(--color-ink-hover);
    text-decoration-thickness: 2px;
}

.read-more-link {
    font-size: 1.1rem;
    font-weight: 700;
}

/* CTA Section */
.cta-section {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: calc(var(--spacing-unit) * 6) 0;
    background: var(--color-bg-soft);
    color: var(--text-color);
}


.cta-inner, .cta-section h2, .cta-section .cta-subtext {
    color: var(--text-color);
}

.cta-inner {
    padding-left: 2rem;
    padding-right: 2rem;
}

.cta-section h2 {
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}

.cta-subtext {
    font-size: 1.25rem;
    margin-bottom: 2rem;
}

/* Thank You Message */
.thank-you {
    font-size: 1.25rem;
    color: var(--text-color);
    text-align: left;
    margin: 2rem 0;
    font-weight: 500;
}

/* Email Form */
.email-form {
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#form-container {
    max-width: 500px;
}

#form-container form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#form-container input {
    width: 100%;
    padding: 1rem;
    background: #fff;
    color: var(--text-color);
    border: 2px solid var(--primary-color);
    border-radius: 8px;
    font-size: 1.25rem;
    font-family: 'Inter', sans-serif;
    transition: var(--transition);
}

#form-container input:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(18, 18, 18, 0.1);
}

#form-container button {
    width: 100%;
    padding: 1rem;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 0;
    font-size: 1.25rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

@media (hover: hover) and (pointer: fine) {
    #form-container button:hover {
        background-color: #2a2a3e;
        color: white;
        transform: translateY(-1px);
    }
}

/* Footer Styles */
#site-footer {
    background: #f7f7f7;
    border-top: 1px solid rgba(0,0,0,0.08);
    margin-bottom: 0;
    padding-bottom: 0;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

.footer-content {
    /* max-width and padding mirror main's 1rem outer padding + product-grid's
       2rem inner padding, so footer content aligns with the product-grid content
       above at all viewport widths. */
    max-width: calc(1100px + var(--spacing-unit) * 2);
    margin: 0 auto;
    padding: 2.5rem calc(2rem + var(--spacing-unit)) 2rem;
}

.footer-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.footer-column {
    text-align: left;
    width: 100%;
}

.footer-column h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 1rem 0;
    text-align: left;
}

.footer-column p {
    font-size: 1rem;
    line-height: 1.6;
    color: #666;
    margin: 0 0 1.5rem 0;
    text-align: left;
}

.footer-contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1rem;
}

.footer-contact-item {
    display: flex;
    align-items: center;
    margin: 0;
    font-size: 1rem;
    line-height: 1.4;
}

.footer-icon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    color: var(--primary-color);
    flex-shrink: 0;
}

.footer-contact-item a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.footer-contact-item a:hover {
    color: var(--color-ink-hover);
    text-decoration: underline;
}

.footer-newsletter-subtext {
    font-size: 0.9rem;
    color: #888;
    margin: 0 0 0.5rem 0;
    text-align: left;
}

.footer-form-container form {
    display: flex;
    gap: 0.5rem;
}

.footer-form-container input {
    flex: 1;
    padding: 0.75rem;
    border: 1px solid rgba(0,0,0,0.15);
    font-size: 1rem;
    background: white;
}

.footer-form-container button {
    padding: 0.75rem 1.5rem;
    background: var(--primary-color);
    color: white;
    border: none;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.footer-form-container button:hover {
    background-color: #2a2a3e;
}

.footer-bottom {
    border-top: 1px solid rgba(0,0,0,0.08);
    background: var(--color-bg-muted);
    margin: 0;
    padding: 0;
}

.footer-bottom-content {
    /* Match the main + product-grid alignment scheme (see .footer-content). */
    max-width: calc(1100px + var(--spacing-unit) * 2);
    margin: 0 auto;
    padding: 0.5rem calc(2rem + var(--spacing-unit));
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-bottom p {
    margin: 0;
    font-size: 0.9rem;
    color: #666;
}

.footer-legal-links {
    display: flex;
    gap: 1.5rem;
}

.footer-legal-links a {
    font-size: 0.9rem;
    color: #666;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-legal-links a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

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

@media (max-width: 768px) {
    .footer-columns {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .footer-content {
        padding: 2rem 1.5rem 1.5rem 1.5rem;
    }
    
    .footer-contact {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .footer-bottom-content {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
        padding: 0.75rem 1.5rem;
    }
    
    .footer-form-container form {
        flex-direction: column;
    }
    
    .footer-form-container button {
        width: 100%;
    }
}


@media (max-width: 768px) {
    #form-container {
        flex-direction: column;
    }
    
    #form-container input {
        margin-bottom: 12px;
        margin-right: 0;
    }
    
    #form-container button {
        width: 100%;
    }
}

/* Legal Pages Styles */
.legal-page {
    padding: 6rem 2rem 4rem 2rem;
    background: white;
}

.legal-content {
    max-width: 800px;
    margin: 0 auto;
}

.legal-content h1 {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 700;
    color: var(--text-color);
    margin: 0 0 1rem 0;
    line-height: 1.2;
}

.legal-updated {
    font-size: 1rem;
    color: #666;
    margin: 0 0 3rem 0;
    font-style: italic;
}

.legal-content h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 2.5rem 0 1rem 0;
    line-height: 1.3;
}

.legal-content p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-color);
    margin: 0 0 1.5rem 0;
}

.legal-content ul {
    margin: 0 0 1.5rem 0;
    padding-left: 1.5rem;
}

.legal-content li {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

.legal-content a {
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.3s ease;
}

.legal-content a:hover {
    color: var(--color-ink-hover);
}

@media (max-width: 768px) {
    .legal-page {
        padding: 4rem 1.5rem 3rem 1.5rem;
    }
    
    .legal-content h2 {
        margin: 2rem 0 1rem 0;
    }
}

/* Onboarding Form Styles */
.onboarding-form {
    max-width: 600px;
    margin: 0 auto;
}

.form-field {
    margin-bottom: 1.5rem;
}

.form-field label {
    display: block;
    font-size: clamp(0.95rem, 1.3vw, 1.05rem);
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

.onboarding-form input[type="text"],
.onboarding-form input[type="email"],
.onboarding-form input[type="url"],
.onboarding-form select,
.onboarding-form textarea {
    width: 100%;
    padding: 0.875rem;
    background: #fff;
    color: var(--text-color);
    border: 2px solid var(--primary-color);
    border-radius: 0;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    font-family: 'Inter', sans-serif;
    transition: var(--transition);
    box-sizing: border-box;
}

.onboarding-form input:focus,
.onboarding-form select:focus,
.onboarding-form textarea:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(18, 18, 18, 0.1);
    border-color: var(--primary-color);
}

.onboarding-form input.error,
.onboarding-form select.error,
.onboarding-form textarea.error {
    border-color: var(--color-error);
}

.onboarding-form textarea {
    resize: vertical;
    min-height: 100px;
}

.onboarding-form select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23121212' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    padding-right: 2.5rem;
}

.error-message {
    display: none;
    color: var(--color-error);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.onboarding-submit-btn {
    width: 100%;
    padding: 1rem;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 0;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    margin-top: 1rem;
}

.onboarding-submit-btn:hover {
    background-color: var(--color-ink-hover);
}

.onboarding-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .onboarding-form {
        padding: 0 1rem;
    }
}

#email-form input[type="email"] {
    flex: 1;
    padding: 1rem;
    border: 1px solid var(--primary-color);
    border-radius: 0;
    font-size: 1rem;
    min-width: 0;
}

/* Footer */
footer {
    text-align: center;
    padding: calc(var(--spacing-unit) * 2) 0;
    color: #666;
    font-size: 0.9rem;
    background-color: var(--color-bg-soft);
}

/* Overview Section */
.overview {
    padding: calc(var(--spacing-unit) * 8) 0;
}

.overview-content {
    max-width: 800px;
}

.overview h2 {
    font-size: 2rem;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
}

.overview h2:first-child {
    margin-top: 0;
}

.overview .features {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.overview .features li {
    position: relative;
    padding-left: 1.5rem;
    font-size: 1.25rem;
    line-height: 1.5;
    flex: 0 0 calc(50% - 1.5rem);
}

.overview .features li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--primary-color);
}

/* Features Stacked Section */
.features-stacked {
    display: flex;
    flex-direction: column;
    gap: 120px;
    position: relative;
    z-index: 2;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: calc(var(--spacing-unit) * 8) 2rem;
}

/* AI Reservations section - reduce top spacing only */
#ai-reservations {
    /* Give the header divider room to breathe */
    padding-top: calc(var(--spacing-unit) * 5);
}

/* ── Product Grid ── */

#product {
    padding: calc(var(--spacing-unit) * 5) 0;
}

#case-studies {
    padding-top: calc(var(--spacing-unit) * 5) !important;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2rem;
}

.product-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    box-shadow: 0 1px 3px rgba(18, 18, 18, 0.04);
}


.product-card--hero {
    grid-column: 1 / -1;
}


.product-card__text {
    padding: 28px 28px 0;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.product-card__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-ink);
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}

.product-card__subtitle {
    font-size: 0.85rem;
    color: var(--color-muted);
    line-height: 1.45;
    margin: 0;
}

.product-card__visual {
    flex: 1;
    display: flex;
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
    position: relative;
    padding: 0 28px;
    min-height: 220px;
}

.product-card__visual > * {
    align-self: stretch;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.product-card__visual > * {
    width: 100%;
}


.product-card__visual > * {
    width: 100%;
}

/* Hero card: side-by-side knowledge + chat */
.product-card__visual--hero {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    padding: 0 28px;
    height: 360px;
}

.product-card__hero-knowledge {
    flex: 1;
    height: 360px;
    display: flex;
    flex-direction: column;
}

.product-card__hero-chat {
    flex: 1;
    max-width: 360px;
    height: 360px;
}

.product-card__hero-chat .line-chat-demo {
    width: 100%;
    max-width: 100%;
    height: 360px;
}

/* Elevated visuals inside cards */
.product-card .op-proposal,
.product-card .op-calendar,
.product-card .op-insights,
.product-card .op-inbox,
.product-card .op-knowledge {
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    box-shadow: 0 2px 12px rgba(18, 18, 18, 0.06);
}

/* ── Knowledge component ── */
.op-knowledge {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.op-knowledge__header {
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.op-knowledge__title {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text);
}

.op-knowledge__count {
    font-size: 0.62rem;
    color: var(--color-muted);
}

.op-knowledge__stats {
    display: flex;
    gap: 12px;
    font-size: 0.62rem;
    color: var(--color-muted);
}

.op-knowledge__list {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.op-knowledge__item {
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border);
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.op-knowledge__item:last-child {
    border-bottom: none;
}

.op-knowledge__item-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 3px;
}

.op-knowledge__item-name {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-ink);
}

.op-knowledge__item-badge {
    flex-shrink: 0;
    font-size: 0.55rem;
    font-weight: 600;
    padding: 2px 6px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: var(--color-bg-muted);
    color: var(--color-muted);
}

.op-knowledge__item-badge--space {
    background: rgba(16, 185, 129, 0.12);
    color: var(--color-stage-confirmed);
}

.op-knowledge__item-badge--package {
    background: rgba(139, 92, 246, 0.12);
    color: var(--color-stage-proposal);
}

.op-knowledge__item-badge--policy {
    background: rgba(99, 102, 241, 0.12);
    color: var(--color-stage-hold);
}

.op-knowledge__item-badge--pricing {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
}

.op-knowledge__item-badge--learned {
    background: var(--color-ink);
    color: var(--color-bg);
}

.op-knowledge__item-detail {
    font-size: 0.62rem;
    color: var(--color-muted);
    line-height: 1.4;
}

/* Component internals stretch to fill card height */

/* Proposal: body expands, rows distribute evenly */
.product-card .op-proposal__body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.product-card .op-proposal__row {
    flex: 1;
}

/* Calendar: grid expands, spaces column matches, rows stay consistent */
.product-card .op-calendar {
    flex-direction: row;
    display: flex;
}

.product-card .op-calendar__spaces {
    display: flex;
    flex-direction: column;
}

.product-card .op-calendar__space-header {
    flex-shrink: 0;
}

.product-card .op-calendar__space-label {
    flex: 1;
}

.product-card .op-calendar__grid {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.product-card .op-calendar__dates {
    flex-shrink: 0;
}

.product-card .op-calendar__row {
    flex: 1;
    height: auto;
}

/* Insights: grid expands, cards stretch */
.product-card .op-insights__grid {
    flex: 1;
}

.product-card .op-insights__card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px 20px;
}

/* Inbox: list expands, items distribute */
.product-card .op-inbox__list {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.product-card .op-inbox__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* ── Inbox component ── */
.op-inbox {
    width: 100%;
    overflow: hidden;
}

.op-inbox__header {
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.op-inbox__title {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text);
}

.op-inbox__count {
    font-size: 0.62rem;
    color: var(--color-muted);
}

.op-inbox__list {
    display: flex;
    flex-direction: column;
}

.op-inbox__item {
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
}

.op-inbox__item:last-child {
    border-bottom: none;
}

.op-inbox__item--unread {
    background: rgba(99, 102, 241, 0.03);
    border-left: 2px solid var(--color-stage-hold);
    padding-left: 12px;
}

.op-inbox__item-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 3px;
}

.op-inbox__item-sender {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-ink);
}

.op-inbox__item-badge {
    flex-shrink: 0;
    font-size: 0.55rem;
    font-weight: 600;
    padding: 2px 6px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: var(--color-bg-muted);
    color: var(--color-muted);
}

.op-inbox__item-badge--qualified {
    background: rgba(16, 185, 129, 0.12);
    color: var(--color-stage-confirmed);
}

.op-inbox__item-badge--hot {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
}

.op-inbox__item-subject {
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.op-inbox__item-preview {
    font-size: 0.62rem;
    color: var(--color-muted);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Images inside cards — same treatment as components */
.product-card__visual > img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--color-border);
    box-shadow: 0 2px 12px rgba(18, 18, 18, 0.06);
}

/* AI Group Sales section - reduce .gif image size and center them */
#ai-group-sales .feature-img[src*=".gif"] {
    max-width: min(85%, 600px);
    margin: 0 auto;
    display: block;
}

/* Reduce distribution.png image width */
#ai-reservations .feature-img[src*="distribution.png"] {
    max-width: 75%;
    margin: 0 auto;
    display: block;
}

/* Larger .gif images on mobile */
@media (max-width: 768px) {
    #ai-group-sales .feature-img[src*=".gif"] {
        max-width: 90%;
    }
    
    /* Expand all feature images on mobile */
    .feature-img {
        max-width: 95%;
        width: 95%;
    }
    
    /* Center header content on mobile */
    .hero {
        text-align: center;
        align-items: center;
    }
    
    /* Center feature sections copy on mobile */
    .feature-content {
        text-align: center;
        align-items: center;
    }
    
    /* Ensure all content elements are centered on mobile */
    .feature-content h2,
    .feature-content p {
        text-align: center !important;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Specific centering for knowledge layer section */
    .ada-greets-section .feature-content,
    .ada-greets-section .feature-content h2,
    .ada-greets-section .feature-content p {
        text-align: center !important;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Mobile adjustments for agent frame wrapper */
    .agent-frame-wrapper {
        padding: 20px !important;
        text-align: center;
    }
    
    /* Fix feature-benefits spacing on mobile */
    .feature-benefits {
        margin: 1rem auto;
        padding: 0;
        text-align: left;
        display: inline-block;
        max-width: fit-content;
    }
    
    .feature-benefits li {
        padding-left: 1.2rem;
        margin-bottom: 0.5rem;
    }
    
    /* Hide feature demo buttons on mobile */
    .feature-demo-button {
        display: none !important;
    }
    
    /* Reduce features section padding on mobile to tighten layout */
    .features-stacked {
        padding: calc(var(--spacing-unit) * 4) 2rem;
    }
    
    /* ai-group-sales: on mobile, image first, then text below */
    #ai-group-sales .feature-block {
        display: flex;
        flex-direction: column;
    }
    
    #ai-group-sales .feature-content {
        order: 2;
    }
    
    #ai-group-sales .feature-image {
        order: 1;
    }
}

.feature-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
}

.feature-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
}

.feature-image {
    width: 100%;
    text-align: center;
}

.feature-block.left-image,
.feature-block.right-image {
    flex-direction: column;
}

.feature-img {
    width: 100%;
    max-width: 100%;
    border-radius: 0px;
    box-shadow: 0 4px 24px rgba(18,18,18,0.07);
    object-fit: cover;
    background: #f7f7f7;
    flex-shrink: 0;
    margin-bottom: 1rem;
}

/* Smaller images without shadows for new sections */
.feature-img[src*="reservation_agent.png"] {
    width: 60%;
    max-width: 400px;
    box-shadow: none;
    background: transparent;
    margin: 0 auto;
    display: block;
}

/* Larger second image */
.feature-img[src*="distribution.png"] {
    width: 80%;
    max-width: 600px;
    box-shadow: none;
    background: transparent;
    margin: 0 auto;
    display: block;
}

/* Section headers */
.section-header {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    color: var(--primary-color);
    margin-bottom: 3rem;
    text-align: center;
}

/* Section divider */
.section-divider {
    border: none;
    height: 2px;
    background: var(--primary-color);
    margin: 4rem auto;
    width: 100px;
    opacity: 0.3;
}

.feature-text {
    flex: 1;
    text-align: left;
    max-width: none;
}

.feature-text h3 {
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: 1rem;
    color: var(--primary-color);
    letter-spacing: -0.01em;
}

.feature-text p {
    font-size: 1.18rem;
    line-height: 1.7;
    color: var(--text-color);
    max-width: none;
}

.feature-block h3 {
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 900;
    line-height: 1.15;
    color: var(--primary-color);
    margin-bottom: -0.5rem;
    letter-spacing: -0.01em;
}

.feature-block p {
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    line-height: 1.4;
    color: var(--text-color);
    max-width: none;
    margin-top: 0;
}

/* Match first three homepage feature blurbs to hero tagline sizing */
#ai-reservations .feature-block:first-child .feature-content > p,
#ai-group-sales .feature-block .feature-content > p {
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    line-height: 1.55;
}

/* ── Operator Calendar ── */

.op-calendar {
    display: flex;
    border: 2px solid var(--color-border);
    background: var(--color-bg);
    overflow: hidden;
    width: 100%;
}

.op-calendar__spaces {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 120px;
    border-right: 2px solid var(--color-border);
}

.op-calendar__space-header {
    height: 36px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-soft);
}

.op-calendar__space-label {
    display: flex;
    align-items: center;
    padding: 0 12px;
    height: 56px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-ink);
    border-bottom: 1px solid var(--color-border);
    letter-spacing: 0.01em;
}

.op-calendar__space-label:last-child {
    border-bottom: none;
}

.op-calendar__grid {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
}

.op-calendar__dates {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    height: 36px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-soft);
}

.op-calendar__date {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-right: 1px solid var(--color-border);
}

.op-calendar__date:last-child {
    border-right: none;
}

.op-calendar__date--today {
    color: var(--color-ink);
    background: rgba(18, 18, 18, 0.03);
}

.op-calendar__row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    height: 56px;
    border-bottom: 1px solid var(--color-border);
    position: relative;
}

.op-calendar__row:last-child {
    border-bottom: none;
}

.op-calendar__cell {
    border-right: 1px solid var(--color-border);
    min-height: 100%;
}

.op-calendar__cell:last-child {
    border-right: none;
}

.op-calendar__block {
    position: absolute;
    top: 6px;
    bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 0 8px;
    border-left: 3px solid transparent;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    z-index: 1;
    overflow: hidden;
}

.op-calendar__block.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.op-calendar__block--inquiry {
    background: rgba(245, 158, 11, 0.12);
    border-left-color: var(--color-stage-inquiry);
}

.op-calendar__block--hold {
    background: rgba(99, 102, 241, 0.12);
    border-left-color: var(--color-stage-hold);
}

.op-calendar__block--proposal {
    background: rgba(139, 92, 246, 0.12);
    border-left-color: var(--color-stage-proposal);
}

.op-calendar__block--confirmed {
    background: rgba(16, 185, 129, 0.12);
    border-left-color: var(--color-stage-confirmed);
}

.op-calendar__block-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.op-calendar__block-badge {
    flex-shrink: 0;
    font-size: 0.58rem;
    font-weight: 700;
    padding: 2px 5px;
    background: rgba(16, 185, 129, 0.15);
    color: var(--color-stage-confirmed);
    letter-spacing: 0.02em;
}

.op-calendar__block-badge--expiry {
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
}

.op-calendar__block-badge--hold {
    background: rgba(99, 102, 241, 0.15);
    color: var(--color-stage-hold);
}

/* ── Booking Insights Dashboard ── */

.op-insights {
    border: 2px solid var(--color-border);
    background: var(--color-bg);
    overflow: hidden;
    width: 100%;
}

.op-insights__header {
    padding: 12px 20px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.op-insights__title {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: 0.01em;
}

.op-insights__period {
    font-size: 0.62rem;
    color: var(--color-subtle);
}

.op-insights__body {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.op-insights__view {
    position: absolute;
    inset: 0;
    display: flex;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.op-insights__view.is-active {
    opacity: 1;
    pointer-events: auto;
}

.op-insights__view--metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--color-border);
}

.op-insights__view--insight {
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--color-bg);
}

.op-insights__insight {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    max-width: 320px;
}

.op-insights__insight-icon {
    flex-shrink: 0;
    color: var(--color-stage-confirmed);
    margin-top: 2px;
}

.op-insights__insight-text {
    flex: 1;
}

.op-insights__insight-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-stage-confirmed);
    margin-bottom: 6px;
}

.op-insights__insight-body {
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--color-ink);
    font-weight: 500;
}

.op-insights__insight-body strong {
    font-weight: 700;
}

.op-insights__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--color-border);
}

.op-insights__card {
    background: var(--color-bg);
    padding: 18px 20px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.op-insights__card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.op-insights__card-value {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-ink);
    line-height: 1.2;
    margin-bottom: 4px;
}

.op-insights__card-label {
    display: block;
    font-size: 0.68rem;
    color: var(--color-muted);
    margin-bottom: 4px;
}

.op-insights__card-trend {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--color-stage-confirmed);
}

.op-insights__list {
    border-top: 1px solid var(--color-border);
    padding: 14px 20px;
}

.op-insights__list-title {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}

.op-insights__list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.op-insights__list-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.op-insights__list-item:last-child {
    margin-bottom: 0;
}

.op-insights__list-label {
    flex-shrink: 0;
    width: 120px;
    font-size: 0.68rem;
    color: var(--color-text);
}

.op-insights__list-bar {
    flex: 1;
    height: 6px;
    background: var(--color-bg-muted);
    overflow: hidden;
}

.op-insights__list-fill {
    height: 100%;
    background: var(--color-ink);
    transition: width 0.6s ease;
}

.op-insights__list-pct {
    flex-shrink: 0;
    width: 32px;
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--color-muted);
    text-align: right;
}

/* ── Proposal Builder ── */

.op-proposal {
    border: 2px solid var(--color-border);
    background: var(--color-bg);
    overflow: hidden;
    width: 100%;
}

.op-proposal__header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-soft);
}

.op-proposal__badge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 8px;
    margin-bottom: 8px;
}

.op-proposal__badge--auto {
    background: rgba(16, 185, 129, 0.12);
    color: var(--color-stage-confirmed);
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.op-proposal__title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-ink);
    margin-bottom: 4px;
}

.op-proposal__meta {
    font-size: 0.68rem;
    color: var(--color-subtle);
}

.op-proposal__body {
    padding: 4px 0;
}

.op-proposal__row {
    display: flex;
    align-items: baseline;
    padding: 10px 20px;
    border-bottom: 1px solid var(--color-border);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.op-proposal__row:last-child {
    border-bottom: none;
}

.op-proposal__row.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.op-proposal__row-label {
    flex-shrink: 0;
    width: 100px;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.op-proposal__row-value {
    font-size: 0.78rem;
    color: var(--color-text);
}

.op-proposal__row-value--highlight {
    font-weight: 700;
    color: var(--color-ink);
}

.op-proposal__footer {
    padding: 12px 20px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-soft);
}

.op-proposal__learning {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.68rem;
    color: var(--color-muted);
    font-style: italic;
}

.op-proposal__learning-dot {
    width: 6px;
    height: 6px;
    background: var(--color-stage-confirmed);
    flex-shrink: 0;
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* Proposal — responsive */
@media (max-width: 768px) {
    .op-proposal__row {
        flex-direction: column;
        gap: 2px;
    }

    .op-proposal__row-label {
        width: auto;
    }
}

/* Operator calendar — responsive */
@media (max-width: 1023px) {
    .op-calendar__grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .op-calendar__spaces {
        width: 80px;
    }

    .op-calendar__space-label {
        font-size: 0.65rem;
        padding: 0 6px;
    }

    .op-calendar__block-label {
        font-size: 0.6rem;
    }

    .op-calendar__block-badge {
        font-size: 0.52rem;
    }
}

@media (max-width: 768px) {
    .op-calendar {
        flex-direction: column;
        border-width: 1px;
    }

    .op-calendar__spaces {
        flex-direction: row;
        width: 100%;
        border-right: none;
        border-bottom: 2px solid var(--color-border);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .op-calendar__space-header {
        display: none;
    }

    .op-calendar__space-label {
        height: auto;
        padding: 6px 10px;
        white-space: nowrap;
        border-bottom: none;
        border-right: 1px solid var(--color-border);
        font-size: 0.62rem;
    }

    .op-calendar__space-label:last-child {
        border-right: none;
    }

    .op-calendar__grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        min-width: 420px;
    }

    .op-calendar__date {
        font-size: 0.6rem;
    }

    .op-insights__card-value {
        font-size: 1.1rem;
    }

    .op-insights__list-label {
        width: 90px;
        font-size: 0.62rem;
    }

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

    .product-card--hero,
    .product-card--mid {
        grid-column: 1 / -1;
        min-height: 260px;
    }

    .product-card__visual--hero {
        flex-direction: column;
    }

    .product-card__hero-chat {
        max-width: 100%;
    }

    .product-card__text {
        padding: 20px 20px 0;
    }

    .product-card__visual {
        padding: 0 20px;
    }

    .product-card__visual--hero {
        padding: 0 20px;
    }

}

/* Testimonial Section */
.testimonial-section {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: calc(var(--spacing-unit) * 6) 2rem;
    background-color: var(--color-bg-soft);
}

.testimonial-content {
    max-width: 1200px;
    margin: 0 auto;
    text-align: left;
}

.testimonial-content h2,
.testimonial-content > p,
.signature {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.testimonial-content > p {
    margin-bottom: 1.5rem;
}

.signature {
    margin-top: 1rem;
    margin-bottom: 0;
}

.testimonial-content h2 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    line-height: 1.15;
    color: var(--primary-color);
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
}

.testimonial-content > p {
    font-size: clamp(1.1rem, 1.8vw, 1.3rem);
    line-height: 1.6;
    color: #333333;
    margin-bottom: 1.5rem;
}

.testimonial-content > p:last-child {
    margin-bottom: 0;
}

.testimonial-content > p strong {
    color: var(--primary-color);
    font-weight: 600;
}

.testimonial-content > p em {
    color: #cccccc;
    font-style: italic;
}

.testimonial-content > p a {
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 0.3s ease;
}

.testimonial-content > p a:hover {
    color: var(--color-ink-hover);
    text-decoration-thickness: 2px;
}

.signature {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.signature .avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.signature p {
    margin: 0;
    color: var(--color-muted);
}

/* Team Layout Styles */
.team-layout {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    margin-top: 3rem;
    margin-bottom: 0;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
}

.team-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.team-avatar {
    width: 150px;
    height: 150px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #fafbfc, #f1f3f4);
    padding: 10px;
    box-shadow:
        0 0 0 1px #e8e8e8,
        0 4px 8px rgba(0, 0, 0, 0.06),
        inset 0 1px 1px rgba(255, 255, 255, 0.9),
        inset 0 -1px 1px rgba(0, 0, 0, 0.03);
}

.team-avatar-inner {
    width: 100%;
    height: 100%;
    border-radius: 0;
    overflow: hidden;
}

.team-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-info {
    text-align: center;
}

.team-name {
    font-size: clamp(1rem, 1.4vw, 1.1rem);
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.team-title {
    font-size: clamp(0.9rem, 1.2vw, 0.95rem);
    color: #666;
    font-weight: 400;
}

.team-linkedin {
    display: inline-flex;
    align-items: center;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.team-linkedin:hover {
    opacity: 1;
}

/* Mobile responsive for team layout */
@media (max-width: 768px) {
    .team-layout {
        flex-direction: column;
        gap: 2rem;
        margin-top: 2rem;
    }
    
    .team-member {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
    }
    
    .team-info {
        text-align: left;
    }
    
    .team-name {
        justify-content: flex-start;
    }
    
    .agent-frame-wrapper {
        padding: 80px 80px 80px 0px;
    }
}

/* Ada Greets Section Styles */
.ada-greets-section {
    background-color: var(--color-bg-soft) !important;
    padding: 32px !important;
}

.ada-greets-section h2 {
    margin-bottom: 0;
}

.agent-frame-wrapper {
    border: 2px solid #121212;
    padding: 80px 80px 80px 0px;
    width: 100%;
    box-sizing: border-box;
    background-color: #ffffff;
}

/* Meet Ada Section Styles */
.meet-ada-section {
    background-color: var(--color-bg-soft) !important;
}

.meet-ada-section .testimonial-content h2 {
    margin-bottom: 2.5rem;
}

.meet-ada-section .step-number {
    background: var(--color-bg-soft);
    border: none;
}

.how-it-works-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
}

.how-it-works-steps::before {
    content: '';
    position: absolute;
    left: 40px;
    top: 80px;
    bottom: 80px;
    width: 2px;
    background: linear-gradient(to bottom, var(--primary-color), var(--primary-color));
    opacity: 0.3;
}

.step {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    padding: 2rem 0;
    position: relative;
}

.step-number {
    font-size: 3rem;
    line-height: 1;
    font-weight: 400;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #ffffff;
    border-radius: 50%;
    position: relative;
    z-index: 1;
}

.step-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Adjust spacing for step with schedule box */
.step:first-child .step-content {
    gap: 0.75rem;
}

/* Knowledge Layer Card Styles */
.knowledge-layer-card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.1);
    margin-top: 16px;
    border-radius: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.knowledge-layer-card:hover,
.knowledge-layer-card.expanded {
    border-color: var(--primary-color);
}

.knowledge-toggle {
    width: 100%;
    background: none;
    border: none;
    padding: 16px 20px;
    cursor: pointer;
    text-align: left;
    transition: all 0.3s ease;
}


.knowledge-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.learn-more-mobile {
    display: none;
}

.knowledge-image {
    width: 48px;
    height: 48px;
    object-fit: cover;
    flex-shrink: 0;
    border: none;
    border-radius: 0;
}

.knowledge-title {
    flex: 1;
}

.knowledge-title span {
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    font-weight: 400;
    color: var(--primary-color);
}

.learn-more-text {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-right: 8px;
    flex-shrink: 0;
}

.toggle-icon {
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.knowledge-toggle[aria-expanded="true"] .toggle-icon {
    transform: rotate(180deg);
}

.knowledge-content {
    padding: 20px;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.knowledge-expanded-layout {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.knowledge-text-content {
    flex: 1;
}

.knowledge-image-content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.knowledge-expanded-image {
    width: 100%;
    max-width: 300px;
    height: auto;
    object-fit: contain;
}

.knowledge-text-content p {
    font-size: clamp(0.95rem, 1.4vw, 1.1rem);
    line-height: 1.6;
    color: var(--text-color);
    margin: 0 0 16px 0;
}

.knowledge-text-content p:last-child {
    margin-bottom: 0;
}

.knowledge-benefits {
    list-style: none;
    padding: 0;
    margin: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.knowledge-benefits li {
    font-size: clamp(0.9rem, 1.2vw, 1rem);
    line-height: 1.5;
    color: var(--text-color);
    padding-left: 1.5rem;
    position: relative;
}

.knowledge-benefits li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.1em;
}

.step h3 {
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    font-weight: 700;
    color: var(--primary-color);
    margin: 0;
}

.step p {
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    line-height: 1.6;
    color: var(--text-color);
    margin: 0;
}

/* Onboarding Schedule Box Styles */
.onboarding-schedule-box {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.15);
    padding: clamp(20px, 1.25rem, 24px);
    margin-top: 12px;
    margin-bottom: 0;
    border-radius: 0;
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Get started intake form */
.get-started-box {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.15);
    padding: clamp(16px, 1.1rem, 20px);
    margin-top: 12px;
}

.get-started-form {
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr auto;
    gap: 10px;
    align-items: center;
}

.get-started-form input {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border: 2px solid var(--primary-color);
    border-radius: 0;
    font-size: 1rem;
    background: #ffffff;
    color: var(--text-color);
    font-family: 'Inter', sans-serif;
    transition: var(--transition);
    box-sizing: border-box;
    min-width: 0;
}

.get-started-form input::placeholder {
    color: #777777;
}

.get-started-form input:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(18, 18, 18, 0.1);
    border-color: var(--primary-color);
}

.get-started-form button[type="submit"] {
    height: 44px;
    padding: 0 18px;
    border: none;
    border-radius: 0;
    background: var(--primary-color);
    color: #ffffff;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s ease;
    white-space: nowrap;
    font-size: 1rem;
}

.get-started-form button[type="submit"][disabled] {
    opacity: 0.65;
    cursor: not-allowed;
}

.get-started-error {
    margin-top: 10px;
    font-size: 0.95rem;
    color: #8a1f1f;
}

@media (max-width: 768px) {
    .get-started-form {
        grid-template-columns: 1fr;
    }

    .get-started-form button[type="submit"] {
        width: 100%;
    }
}

.onboarding-schedule-box:hover {
    border-color: var(--primary-color);
    text-decoration: none;
    color: inherit;
}

.schedule-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 12px;
}

.schedule-avatar {
    width: 48px;
    height: 48px;
    object-fit: cover;
    flex-shrink: 0;
    border: none;
    border-radius: 0;
}

.schedule-title {
    flex: 1;
}

.schedule-title h4 {
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    font-weight: 400;
    margin: 0;
    color: var(--primary-color);
}

.schedule-checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
}

.schedule-checklist li {
    font-size: clamp(0.9rem, 1.2vw, 0.95rem);
    line-height: 1.5;
    color: var(--text-color);
    padding-left: 1.5rem;
    position: relative;
    margin-bottom: 8px;
}

.schedule-checklist li:last-child {
    margin-bottom: 0;
}

.schedule-checklist li::before {
    content: '▶';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.1em;
}

.schedule-cta {
    text-align: left;
    margin-top: 16px;
}

.schedule-button {
    display: inline-block;
    background: var(--primary-color);
    color: white;
    padding: 10px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 0;
    transition: background-color 0.3s ease;
}

.onboarding-schedule-box:hover .schedule-button {
    background-color: var(--color-ink-hover);
}

.get-started-link {
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Merged Section Divider and Subheader */
.merged-section-divider {
    margin: clamp(80px, 7rem, 112px) 0;
    height: 1px;
    background: #121212;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.merged-section-subheader {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 1rem;
    margin-top: 0;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.team-section-subtext {
    font-size: clamp(1.1rem, 1.6vw, 1.3rem);
    color: #666;
    text-align: left;
    margin: 0 auto 3rem auto;
    max-width: 1100px;
    line-height: 1.6;
}

.mission-subheader {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
    color: var(--primary-color);
    margin-top: 48px;
    margin-bottom: 1.5rem;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.mission-paragraph {
    margin-top: 1rem;
}

.mission-paragraph a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}

.mission-paragraph a:hover {
    text-decoration: underline;
}

.team-closing-message {
    font-size: clamp(1.1rem, 1.6vw, 1.3rem);
    color: #666;
    text-align: left;
    margin: 3rem auto 0 auto;
    max-width: 1100px;
    line-height: 1.6;
}

.team-closing-message a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}

.team-closing-message a:hover {
    text-decoration: underline;
}

/* Pricing Section Styles */
.pricing-section {
    background-color: white !important;
}

.pricing-section .testimonial-content h2 {
    margin-bottom: 0.75rem;
}

.pricing-intro {
    font-size: clamp(1.1rem, 1.8vw, 1.3rem);
    line-height: 1.6;
    color: var(--text-color);
    margin-bottom: clamp(32px, 2.5rem, 40px);
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.pricing-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 1100px;
    margin: clamp(32px, 2.5rem, 40px) auto;
}

.pricing-card {
    background: white;
    border: 1px solid #e5e5e5;
    border-radius: 0;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    text-align: left;
    position: relative;
    min-height: 500px;
}


.pricing-card.pro-card {
    background: white;
}

.pricing-badge {
    position: absolute;
    top: -8px;
    right: -12px;
    background: #F5F5F5;
    color: #222;
    border: 1px solid #DDD;
    padding: 0.4rem 0.8rem 0.4rem 1.2rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border-radius: 0;
    z-index: 2;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.pricing-badge::before {
    content: '';
    position: absolute;
    right: 0;
    top: 100%;
    width: 0;
    height: 0;
    border-right: 10px solid transparent;
    border-left: 0;
    border-top: 8px solid #DDD;
}

.enterprise-badge {
    background: #F5F5F5;
    color: #222;
    border-color: #DDD;
}

.enterprise-badge::before {
    border-top-color: #DDD;
}

.pricing-card h3 {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 600;
    color: var(--primary-color);
    margin: 0 0 10px 0;
    text-align: left;
}


.pricing-subtitle {
    font-size: clamp(0.85rem, 1.3vw, 1rem);
    line-height: 1.4;
    color: #666;
    margin: 0 0 18px 0;
    text-align: left;
}

.pricing-price {
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    font-weight: 700;
    color: var(--text-color);
    margin: 22px 0 7px 0;
    text-align: left;
}

.pricing-note {
    font-size: clamp(0.75rem, 1vw, 0.85rem);
    color: #888;
    text-align: left;
    margin: 0 0 22px 0;
    font-style: normal;
    line-height: 1.4;
}

.pricing-features {
    text-align: left;
}

.pricing-features ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1;
    padding-bottom: 22px;
}

.pricing-features li {
    font-size: clamp(0.9rem, 1.2vw, 0.95rem);
    line-height: 1.5;
    color: var(--text-color);
    padding-left: 1.75rem;
    position: relative;
    font-weight: 400;
}

.pricing-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.5;
}

.pricing-card .cta-button {
    width: 100%;
    text-align: center;
    margin-top: 0;
}

/* Price block grouping */
.pricing-price-block {
    margin-top: auto;
}

/* Pricing FAQ Styles */
.pricing-faq {
    margin-top: clamp(32px, 2.5rem, 40px);
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.faq-header {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
    color: var(--primary-color);
    margin-top: clamp(24px, 1.5rem, 32px);
    margin-bottom: 2rem;
    text-align: left;
}

.faq-section {
    margin-bottom: 2.5rem;
}

.faq-section:last-child {
    margin-bottom: 0;
}

.faq-category {
    font-size: clamp(0.85rem, 1.2vw, 1rem);
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 1rem;
    margin-top: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.faq-item {
    margin-bottom: 1rem;
    background: white;
    border: 1px solid #e5e5e5;
    border-radius: 0;
    padding: 1.5rem;
    transition: box-shadow 0.2s ease, border 0.2s ease;
}

.faq-item:hover {
    box-shadow: none;
    border: 2px solid #121212;
}

.faq-item:has(.faq-question[aria-expanded="true"]) {
    box-shadow: none;
    border: 2px solid #121212;
}

.faq-item:last-child {
    margin-bottom: 0;
}

.faq-question {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-size: clamp(1rem, 1.4vw, 1.1rem);
    line-height: 1.6;
    color: var(--text-color);
    margin: 0;
    transition: color 0.2s ease;
}

.faq-question:hover {
    color: var(--primary-color);
}

.faq-question-text {
    font-weight: 600;
    color: var(--primary-color);
    flex: 1;
}

.faq-question[aria-expanded="true"] .faq-question-text {
    color: var(--primary-color);
}

.faq-icon {
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--primary-color);
    line-height: 1;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.faq-question[aria-expanded="true"] .faq-icon {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0;
}

.faq-question[aria-expanded="true"] + .faq-answer {
    padding-top: 1rem;
}

.faq-answer p {
    font-size: clamp(0.95rem, 1.3vw, 1.05rem);
    line-height: 1.6;
    color: var(--text-color);
    margin: 0;
}

.contact-line {
    margin-top: clamp(32px, 2.5rem, 40px);
    text-align: center;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 2rem;
}

.contact-line p {
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    line-height: 1.6;
    color: var(--text-color);
    margin: 0;
}

.contact-line a {
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.contact-line a:hover {
    color: var(--color-ink-hover);
}

.ada-content-wrapper {
    display: flex;
    gap: 3rem;
    align-items: center;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.ada-image {
    width: 250px;
    flex-shrink: 0;
}

.ada-image img {
    width: 100%;
    height: auto;
    display: block;
}

.ada-text {
    flex: 1;
}

.ada-text p {
    font-size: clamp(1.1rem, 1.8vw, 1.3rem);
    line-height: 1.6;
    color: #333333;
    margin-bottom: 1.5rem;
}

.ada-text p:last-child {
    margin-bottom: 0;
}

/* Responsive Testimonials */
@media (min-width: 1024px) {
    .testimonial-section {
        padding: calc(var(--spacing-unit) * 8) 2rem;
    }
    
    .testimonial-content > p {
        font-size: clamp(1.2rem, 1.8vw, 1.4rem);
        line-height: 1.7;
    }
}

/* Responsive Meet Ada Section */
@media (min-width: 1024px) {
    .ada-text p {
        font-size: clamp(1.2rem, 1.8vw, 1.4rem);
        line-height: 1.7;
    }
}

@media (max-width: 768px) {
    .ada-content-wrapper {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .ada-image {
        width: 180px;
        margin: 0 auto;
    }
    
    .how-it-works-steps {
        max-width: 100%;
        padding: 0 1.25rem;
    }

    .how-it-works-steps::before {
        left: calc(1.25rem + 25px);
        top: 70px;
        bottom: 70px;
    }

    .step {
        padding: 2rem 0;
        gap: 1.25rem;
    }

    .step:first-child {
        padding-top: 1.5rem;
    }

    .step:last-child {
        padding-bottom: 1.5rem;
    }

    .step-number {
        width: 50px;
        height: 50px;
        font-size: 2rem;
    }

    .step-content {
        gap: 0.75rem;
    }

    /* Mobile responsive for schedule box */
    .onboarding-schedule-box {
        max-width: 100%;
        width: 100%;
        padding: 1.25rem;
        margin-top: 1rem;
    }
    
    /* Mobile responsive for knowledge layer card */
    .knowledge-toggle {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .knowledge-header {
        gap: 0.75rem;
    }
    
    .knowledge-header .learn-more-text,
    .knowledge-header .toggle-icon {
        display: none;
    }
    
    .knowledge-image {
        width: 40px;
        height: 40px;
    }
    
    .knowledge-title span {
        font-size: clamp(1rem, 1.6vw, 1.2rem);
    }
    
    .learn-more-mobile {
        display: flex !important;
        align-items: center;
        gap: 0.25rem;
        margin-left: calc(40px + 0.75rem);
        padding-top: 0.25rem;
    }
    
    .learn-more-mobile .learn-more-text {
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--primary-color);
    }
    
    .learn-more-mobile .toggle-icon {
        transition: transform 0.3s ease;
        flex-shrink: 0;
    }
    
    /* Mobile responsive for expanded knowledge layout */
    .knowledge-expanded-layout {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .knowledge-expanded-image {
        max-width: 250px;
    }
    
    .schedule-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        margin-bottom: 1rem;
    }
    
    .schedule-avatar {
        width: 40px;
        height: 40px;
    }
    
    .schedule-title h4 {
        font-size: clamp(1rem, 1.6vw, 1.2rem);
    }
    
    .pricing-cards {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .pricing-card {
        text-align: left;
        padding: 1.5rem;
        min-height: auto;
    }
    
    .pricing-card.pro-card {
        padding-top: 2rem;
    }
    
    .pricing-badge {
        font-size: 0.65rem;
        padding: 0.3rem 0.6rem 0.3rem 1rem;
        top: -4px;
        right: -8px;
    }
    
    .pricing-card h3 {
        text-align: left;
        margin-bottom: 8px;
    }
    
    
    .pricing-subtitle {
        text-align: left;
        margin-bottom: 16px;
    }
    
    .pricing-price {
        text-align: left;
        margin-top: 20px;
    }
    
    .pricing-price-block {
        margin-top: 20px;
    }
    
    .pricing-note {
        text-align: left;
    }
    
    .pricing-faq {
        margin-top: 3rem;
    }
    
    .faq-header {
        text-align: left;
        margin-bottom: 1.5rem;
    }
    
    .faq-section {
        margin-bottom: 2rem;
    }
    
    .faq-category {
        margin-bottom: 1rem;
    }
    
    .faq-item {
        margin-bottom: 1rem;
        padding: 1rem;
    }
}

/* Large Desktop Layout (2-column) */
@media (min-width: 1024px) {
    .features-stacked {
        padding: calc(var(--spacing-unit) * 8) 2rem;
        gap: 140px;
    }

    #ai-reservations {
        padding-top: calc(var(--spacing-unit) * 1);
    }
    
    .feature-block {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        align-items: center;
        max-width: 100%;
        width: 100%;
    }
    
    .feature-content {
        order: 2;
        padding-left: 0;
        max-width: none;
        width: 100%;
    }
    
    .feature-image {
        order: 1;
        width: 100%;
    }
    
    
    /* Even blocks - text left, image right (for other sections) */
    .features-stacked:not(#ai-group-sales) .feature-block:nth-child(even) .feature-content {
        order: 1;
    }
    
    .features-stacked:not(#ai-group-sales) .feature-block:nth-child(even) .feature-image {
        order: 2;
    }
    
    .feature-block h3 {
        font-size: clamp(2rem, 3.5vw, 2.8rem);
        margin-bottom: -0.5rem;
    }
    
    .feature-block p {
        font-size: clamp(1.3rem, 2vw, 1.7rem);
        line-height: 1.4;
        margin-top: 0;
        max-width: none;
    }
    
    .feature-img {
        margin-bottom: 0;
        width: 100%;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-container {
        padding: 0.75rem 1.5rem;
    }

    .nav-links {
        gap: 1rem;
    }

    section {
        padding: calc(var(--spacing-unit) * 3) 0;
    }

    .hero {
        padding-top: 140px;
        padding-bottom: 3.25rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .hero .subtext {
        margin-bottom: 2rem;
    }

    .video-container {
        margin: 2rem 0;
    }

    .features li {
        flex: 0 0 100%;
    }

    .overview {
        padding: calc(var(--spacing-unit) * 4) 0;
    }

    .overview h2 {
        font-size: 1.75rem;
        margin-top: 2rem;
    }

    .overview .features li {
        flex: 0 0 100%;
    }

    main {
        margin-top: 32px;
    }

    .cta-inner {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .logo {
        height: 36px;
    }

    .hero-subtext p:nth-child(3),
    .hero-subtext p:nth-child(4) {
        display: none;
    }
    
    .hero-demo-button.mobile-hidden {
        display: none !important;
    }
}

@media (max-width: 652px) {
    .main-nav {
        height: 52px;
    }
    .nav-container {
        padding: 0 var(--space-md);
    }
    .logo {
        height: 22px;
    }
    .nav-links {
        gap: 0.75rem;
    }
    .nav-center {
        display: none !important;
    }
    .nav-link {
        display: none !important;
    }
    .nav-contact {
        display: none !important;
    }
    .nav-links .cta-button {
        display: none;
    }
    .nav-demo-button,
    .nav-login {
        display: none !important;
    }
    .nav-toggle {
        display: block;
    }
    .cta-button {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
    .features li {
        font-size: 1.1rem;
    }
    .video-container {
        margin: 1.5rem 0;
    }
    .hero {
        padding-top: 100px;
        padding-bottom: 3rem;
        padding-left: var(--space-lg);
        padding-right: var(--space-lg);
    }
    .hero .subtext {
        margin-bottom: 1.5rem;
    }
    .overview h2 {
        font-size: 1.5rem;
    }
    .overview .features li {
        font-size: 1.1rem;
    }
    main {
        margin-top: 24px;
    }
    .logo {
        height: 32px;
    }
    .cta-inner {
        padding-left: var(--space-lg);
        padding-right: var(--space-lg);
    }
    .mobile-demo-link {
        display: inline-block !important;
    }
    .header-bg-container .overlay {
        opacity: 1;
    }
    .nav-link[href*="cal.com"] {
        display: none !important;
    }
    
    /* Update CTA button for mobile */
    .cta-button[data-mobile-href] {
        content: attr(data-mobile-text);
    }
}

@media (max-width: 900px) {
    .feature-block {
        flex-direction: column !important;
        gap: 32px;
        align-items: flex-start;
    }
    
    /* On mobile, show image before text in AI reservations section */
    #ai-reservations .feature-block .feature-image {
        order: 1;
    }
    
    #ai-reservations .feature-block .feature-content {
        order: 2;
    }
    
    .feature-img {
        width: 100%;
        max-width: 100%;
        margin-bottom: 1rem;
    }
}

@media (max-width: 1023px) {
    .feature-block {
        flex-direction: column !important;
        gap: 32px;
        align-items: flex-start;
    }
    
    /* On mobile/tablet, show image before text in AI reservations section */
    #ai-reservations .feature-block .feature-image {
        order: 1;
    }
    
    #ai-reservations .feature-block .feature-content {
        order: 2;
    }
    
    .feature-img {
        width: 100%;
        max-width: 100%;
        margin-bottom: 1rem;
    }
}

@media (max-width: 768px) {
    /* Homepage: "How does it go live?" box - keep Schedule demo only */
    #ai-group-sales .how-it-works-box .button-group .cta-button {
        display: none;
    }

    /* Case studies carousel (homepage): hide Schedule demo CTA on mobile */
    #case-studies .button-group .nav-demo-button {
        display: none;
    }
}

@media (max-width: 600px) {
    .features-stacked {
        gap: 56px;
    }
    .feature-block {
        padding: 0 0.5rem;
    }
    .feature-text h3 {
        font-size: 1.25rem;
    }
    .feature-text p {
        font-size: 1rem;
    }

    /* Extra spacing for how-it-works on very small screens */
    .how-it-works-steps {
        padding: 0 1rem;
    }

    .how-it-works-steps::before {
        left: calc(1rem + 25px);
    }

    .step {
        padding: 1.75rem 0;
    }

    .onboarding-schedule-box {
        padding: 1rem;
    }
}

.header-bg-container {
    position: relative;
    width: 100%;
    padding: calc(var(--spacing-unit) * 1.5) 0; /* Further reduced from 2.5 to 1.5 for much tighter spacing */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    background-color: white;
}

.header-bg-container .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    opacity: 1;
    pointer-events: none;
    z-index: 1;
}

.header-bg-container .main-nav,
.header-bg-container .hero {
    position: relative;
    z-index: 2;
}

.header-bg-container main {
    position: relative;
    z-index: 2;
}

.hero-text-bg {
    background: white;
    padding: 2.5rem 2.5rem 2rem 2.5rem;
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(18,18,18,0.07);
    max-width: 700px;
    margin-left: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-top: 0;
    z-index: 3;
    position: relative;
}

.highlight-bg {
    background: white;
}

.mobile-demo-link {
    display: none;
    color: white;
    text-decoration: underline;
    font-weight: 500;
    font-size: 1.1rem;
    margin-top: 1rem;
    transition: color 0.4s ease;
}

.mobile-demo-link:hover {
    color: #cccccc;
}

/* Blog Section */
.blog-section {
    width: 100vw;
    max-width: none;
    margin: 0;
    padding: 160px 0 calc(var(--spacing-unit) * 8) 0;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background-color: white;
    color: #333333;
    z-index: 2;
}

.blog-section h2 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    color: var(--primary-color);
    margin-bottom: 3rem;
    text-align: left;
    letter-spacing: -0.02em;
    line-height: 1.2;
    padding: 0 2rem;
}

.blog-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 2rem;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding: 0 2rem;
}

.blog-card {
    background: white;
    color: #333333;
    padding: 2rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: var(--transition);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: stretch;
    min-height: 200px;
}

@media (hover: hover) and (pointer: fine) {
    .blog-card:hover {
        transform: translateY(-2px);
        box-shadow: none;
        border: 2px solid #121212;
    }
}

.blog-card.active {
    background: white;
    color: #333333;
    transform: none;
    box-shadow: none;
    border: 2px solid #121212;
}

.blog-card.active h3,
.blog-card.active .blog-description,
.blog-card.active .author-info {
    color: #333333;
}

.blog-card.active .share-button {
    background: var(--primary-color);
    color: white;
    border: 1px solid var(--primary-color);
}

.blog-card.active .share-button:hover {
    background: var(--color-ink-hover);
    border: 1px solid var(--color-ink-hover);
}

.blog-card h3 {
    font-size: 1.75rem;
    font-weight: 900;
    margin-bottom: 1rem;
    color: #333333;
    line-height: 1.3;
}

.blog-description {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #333333;
    margin-bottom: 1rem;
    flex: 1 1 auto;
    transition: var(--transition);
    opacity: 0.8;
}

.blog-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: auto;
}

.author-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.author-info {
    font-size: 0.9rem;
    color: var(--color-muted);
    font-weight: 500;
    transition: var(--transition);
    opacity: 0.8;
}


.blog-content-expanded {
    display: none;
    background: white;
    color: #333333;
    padding: 3rem 2rem;
    margin: 2rem 0;
    animation: fadeIn 0.5s ease-in-out;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    grid-column: 1 / -1;
    z-index: 10;
}

/* Mobile: disable 100vw full-bleed trick, let grid handle full width */
@media (max-width: 768px) {
    .blog-content-expanded {
        width: auto;
        left: auto;
        right: auto;
        margin-left: -2rem;
        margin-right: -2rem;
    }
}

.blog-content-expanded.active {
    display: block !important;
}

.blog-content-expanded h1,
.blog-content-expanded h2,
.blog-content-expanded h3,
.blog-content-expanded h4,
.blog-content-expanded p,
.blog-content-expanded ul,
.blog-content-expanded ol,
.blog-content-expanded blockquote,
.blog-content-expanded .blog-image,
.blog-content-expanded .video-container {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Force alignment for headers - more specific */
.blog-content-expanded h2 {
    font-size: clamp(1.25rem, 2.5vw, 1.6rem);
    font-weight: 900;
    color: var(--primary-color);
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
}

.blog-content-expanded h1 {
    font-size: clamp(1.4rem, 2.8vw, 2rem);
    font-weight: 900;
    color: var(--primary-color);
    margin-top: 3rem;
    margin-bottom: 1rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.blog-content-expanded h3 {
    font-size: clamp(1rem, 1.5vw, 1.1rem);
    font-weight: 700;
    color: var(--primary-color);
    margin-top: 2rem;
    margin-bottom: 0.4rem;
    line-height: 1.4;
}

.blog-content-expanded h4 {
    font-size: clamp(0.95rem, 1.4vw, 1.05rem);
    font-weight: 600;
    color: var(--primary-color);
    margin-top: 1.25rem;
    margin-bottom: 0.3rem;
    line-height: 1.4;
}

.blog-content-expanded p {
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    color: #333333;
}

/* Drop cap for the opening paragraph in each expanded blog post */
.blog-content-expanded > p:first-of-type::first-letter {
    float: left;
    font-size: 3.4em;
    line-height: 0.9;
    font-weight: 700;
    color: var(--primary-color);
    padding-right: 0.12em;
    margin-top: 0.05em;
}

.blog-content-expanded ul,
.blog-content-expanded ol {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
    list-style-position: outside;
    color: #333333;
}

.blog-content-expanded li {
    margin-bottom: 0.3rem;
    padding-left: 0.3rem;
}

/* Whitepaper-specific typography tuning */
.whitepaper-page .blog-content-expanded p {
    font-size: 1.075rem;
    line-height: 1.7;
}

.whitepaper-page .blog-content-expanded ul,
.whitepaper-page .blog-content-expanded ol {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-top: 0.4rem;
    margin-bottom: 1.1rem;
    padding-left: 1.25rem;
}

.whitepaper-page .blog-content-expanded li {
    margin-bottom: 0.2rem;
}

.whitepaper-page .blog-content-expanded p + ul,
.whitepaper-page .blog-content-expanded p + ol {
    margin-top: 0.25rem;
}

/* Slightly tighter lists under Path A/B to visually group them with the heading */
.whitepaper-page #middle-layer-unlocks-market h4 + ul {
    margin-top: 0.4rem;
}

.whitepaper-page #middle-layer-unlocks-market h4 + ul li {
    margin-bottom: 0.2rem;
}

@media (max-width: 768px) {
    /* Whitepaper pages: drop the desktop full-bleed + negative-margin layering
       on mobile so side padding lives on a single element (.blog-section) and
       visually matches the top nav (1.5rem). */
    .whitepaper-page main {
        padding-left: 0;
        padding-right: 0;
    }

    .whitepaper-page .blog-section {
        width: 100%;
        left: auto;
        right: auto;
        margin-left: 0;
        margin-right: 0;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .whitepaper-page .blog-content-expanded {
        width: 100%;
        left: auto;
        right: auto;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .whitepaper-page .blog-content-expanded p {
        font-size: 0.98rem;
        line-height: 1.65;
    }

    .whitepaper-page .blog-content-expanded ul,
    .whitepaper-page .blog-content-expanded ol {
        font-size: 0.9rem;
        line-height: 1.55;
    }
}

.blog-content-expanded blockquote {
    border-left: 4px solid var(--primary-color);
    padding-left: 2rem;
    margin: 2rem auto;
    font-style: italic;
    font-size: 1.125rem;
}

.blog-content-expanded blockquote p {
    margin-bottom: 0.5rem;
}

.blog-content-expanded blockquote cite {
    font-size: 1rem;
    color: var(--color-muted);
    font-style: normal;
}

.blog-content-expanded .blog-footnote {
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--color-muted);
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.blog-content-expanded .blog-image {
    width: 100%;
    max-width: 800px;
    height: auto;
    margin: 2rem auto;
    border-radius: 0;
    display: block;
}

.blog-content-expanded .small-image {
    max-width: 400px;
}

.blog-content-expanded .video-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 2rem auto;
}

.blog-content-expanded .next-post {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.blog-content-expanded .next-post-link {
    color: var(--primary-color) !important;
    text-decoration: underline;
    font-size: 1.125rem;
    font-weight: 600;
    transition: color 0.3s ease;
}

.blog-content-expanded .next-post-link:hover {
    color: var(--color-ink-hover) !important;
    text-decoration: underline;
}

.blog-content-expanded a {
    color: var(--primary-color);
    text-decoration: underline;
}

.blog-content-expanded a:hover {
    color: var(--color-ink-hover);
}

.blog-content-expanded .blog-content-author {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.blog-content-expanded .blog-content-author img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.blog-content-expanded .blog-content-author span {
    font-size: 1rem;
    color: var(--color-muted);
    font-weight: 500;
    opacity: 0.9;
}


/* Perfect alternating pattern with 6-column grid! */
/* Row 1: big (4 cols) + small (2 cols) */
.blog-grid article:nth-of-type(1) { grid-column: span 4; }
.blog-grid article:nth-of-type(2) { grid-column: span 2; }

/* Row 2: 50/50 spread (3 cols each) */
.blog-grid article:nth-of-type(3) { grid-column: span 3; }
.blog-grid article:nth-of-type(4) { grid-column: span 3; }

/* Row 3: 50/50 spread (3 cols each) */
.blog-grid article:nth-of-type(5) { grid-column: span 3; }
.blog-grid article:nth-of-type(6) { grid-column: span 3; }

/* Row 4: 50/50 spread (3 cols each) */
.blog-grid article:nth-of-type(7) { grid-column: span 3; }
.blog-grid article:nth-of-type(8) { grid-column: span 3; }

/* Row 5: 50/50 spread (3 cols each) */
.blog-grid article:nth-of-type(9) { grid-column: span 3; }
.blog-grid article:nth-of-type(10) { grid-column: span 3; }

/* Row 6: 50/50 spread (3 cols each) */
.blog-grid article:nth-of-type(11) { grid-column: span 3; }
.blog-grid article:nth-of-type(12) { grid-column: span 3; }

/* If there's an odd number of cards, let the last one span full width */
.blog-grid article:nth-of-type(odd):last-of-type { grid-column: 1 / -1; }

/* iPhone Video Container Styling */
.iphone-video-container {
    display: flex;
    justify-content: center;
    margin: 1rem auto; /* Reduced from 3rem to 1rem for much closer spacing */
    max-width: 100%; /* Remove width constraint completely */
}

.iphone-frame {
    background: linear-gradient(145deg, #fafbfc, #f1f3f4); /* Lighter gradient */
    border-radius: 40px; /* Increased for better proportions */
    padding: 10px; /* Reduced padding for thinner frame */
    box-shadow:
        0 0 0 1px #e8e8e8, /* Much lighter outside border */
        0 4px 8px rgba(0, 0, 0, 0.06), /* Even lighter drop shadow */
        inset 0 1px 1px rgba(255, 255, 255, 0.9), /* Thinner highlight */
        inset 0 -1px 1px rgba(0, 0, 0, 0.03); /* Much thinner inset shadow */
}

.demo-video {
    width: 400px; /* Increased width for larger display */
    height: auto; /* Let video determine its own height based on aspect ratio */
    border-radius: 32px; /* Proportional to frame radius (40px - 8px) */
    object-fit: contain;
    background: #000;
    cursor: pointer;
    transition: all 0.3s ease;
    display: block;
    
    /* White padding effect - using box-shadow inset */
    box-shadow: 
        inset 0 -25px 0 white, /* Only bottom white padding */
        0 0 0 1px var(--color-bg-muted), /* Much lighter screen border */
        inset 0 2px 0 rgba(255, 255, 255, 0.95); /* Thinner screen highlight */
}

.demo-video:hover {
    transform: none;
}

/* Lightweight chat bubble animation demo (scoped) */
.line-chat-demo {
    width: min(100%, 460px);
    height: 360px;
    overflow: hidden;
    border: none;
    background: transparent;
    padding: 0;
    position: relative;
}

.line-chat-demo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 54px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0));
    pointer-events: none;
    z-index: 2;
}

.line-chat-demo__scroll {
    height: 100%;
    overflow-y: hidden;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scroll-behavior: smooth;
    pointer-events: none;
}

.line-chat-demo__scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.line-chat-demo__row {
    display: flex;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.line-chat-demo__row.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.line-chat-demo__row.is-soft {
    opacity: 0.55;
}

.line-chat-demo__row.is-exit {
    opacity: 0;
    transform: translateY(-10px);
}

.line-chat-demo__row--guest {
    justify-content: flex-start;
}

.line-chat-demo__row--property {
    justify-content: flex-end;
}

.line-chat-demo__bubble {
    max-width: 75%;
    border: 1px solid rgba(18, 18, 18, 0.12);
    background: #ffffff;
    color: #222222;
    padding: 7px 9px;
    border-radius: 12px;
    box-shadow: 0 1px 6px rgba(18, 18, 18, 0.04);
    font-size: 0.68rem;
    line-height: 1.32;
}

.line-chat-demo__row--guest .line-chat-demo__bubble {
    background: #f3f4f6;
}

.line-chat-demo__bubble--gallery {
    width: min(100%, 230px);
}

.line-chat-demo__gallery-title {
    margin: 0 0 5px 0;
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-muted);
}

/* Override broader .feature-block p sizing for gallery labels */
.line-chat-demo .line-chat-demo__gallery-title {
    font-size: 0.54rem;
    line-height: 1.2;
    margin: 0 0 5px 0;
}

.line-chat-demo__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.line-chat-demo__thumbs img {
    width: 48px;
    height: 34px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(18, 18, 18, 0.12);
    background: #ededed;
    display: block;
}

/* Use this on videos that should render without the iPhone frame look */
.no-frame-video {
    width: min(100%, 420px);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.natural-video-wrapper {
    background: linear-gradient(145deg, #fafbfc, #f1f3f4);
    padding: 10px;
    display: inline-block;
    border-radius: 0;
    box-shadow:
        0 0 0 1px #e8e8e8, /* Much lighter outside border */
        0 4px 8px rgba(0, 0, 0, 0.06), /* Even lighter drop shadow */
        inset 0 1px 1px rgba(255, 255, 255, 0.9), /* Thinner highlight */
        inset 0 -1px 1px rgba(0, 0, 0, 0.03); /* Much thinner inset shadow */
    margin: 0 auto;
}

.natural-video {
    width: 100% !important;
    height: auto !important;
    max-width: 600px;
    border-radius: 0 !important;
    object-fit: contain;
    background: #000;
    cursor: pointer;
    transition: all 0.3s ease;
    display: block;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .iphone-video-container {
        max-width: 100%; /* Remove width constraint on mobile too */
        margin: 0; /* No margin at all on mobile - completely flush */
    }
    
    /* Reduce spacing before iPhone videos on mobile */
    .blog-content-expanded p + .iphone-video-container {
        margin-top: -1rem; /* Pull video closer by reducing the gap */
    }
    
    .iphone-frame {
        border-radius: 35px; /* Proportional to desktop (40px scaled down) */
        padding: 8px; /* Reduced padding for thinner frame on mobile */
        box-shadow:
            0 0 0 1px #e8e8e8, /* Much lighter outside border */
            0 3px 6px rgba(0, 0, 0, 0.06), /* Even lighter drop shadow */
            inset 0 1px 1px rgba(255, 255, 255, 0.9), /* Thinner highlight */
            inset 0 -1px 1px rgba(0, 0, 0, 0.03); /* Much thinner inset shadow */
    }
    
    .demo-video {
        width: 280px; /* Reduced mobile width for better fit */
        height: auto; /* Let video determine its own height based on aspect ratio */
        border-radius: 28px; /* Proportional to frame radius (35px - 7px) */
        object-fit: contain;
        box-shadow: 
            inset 0 -18px 0 white, /* Only bottom white padding */
            0 0 0 1px var(--color-bg-muted), /* Much lighter screen border */
            inset 0 2px 0 rgba(255, 255, 255, 0.95); /* Thinner screen highlight */
    }

    .no-frame-video {
        width: min(100%, 360px);
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }
    
    /* Eli spotlight layout - stack on mobile */
    .eli-spotlight-layout {
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .eli-spotlight-layout .team-avatar {
        margin: 0 auto !important;
    }
    
    .natural-video-wrapper {
        padding: 8px;
    }
    
    .natural-video {
        width: 100% !important;
        height: auto !important;
        border-radius: 0 !important;
    }

    .line-chat-demo {
        width: min(100%, 320px);
        height: 300px;
        padding: 0;
    }

    .line-chat-demo__bubble {
        max-width: 86%;
        font-size: 0.64rem;
        padding: 6px 8px;
    }

    .line-chat-demo__bubble--gallery {
        width: min(100%, 205px);
    }

    .line-chat-demo__thumbs img {
        width: 44px;
        height: 32px;
    }
}




.share-button {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    background: rgba(0, 0, 0, 0.05);
    color: #333333;
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding: 0.5rem 1rem;
    border-radius: 0;
    font-size: 0.875rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
}

@media (hover: hover) and (pointer: fine) {
    .share-button:hover {
        background: rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(0, 0, 0, 0.3);
        transform: scale(1.05);
    }
}


.share-button svg {
    width: 16px;
    height: 16px;
}

.share-button.copied {
    background: var(--color-accent) !important;
    color: white !important;
    border-color: var(--color-accent) !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.share-button.copied:hover {
    background: #059669 !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}

/* Ensure copied state works properly with active cards */
.blog-card.active .share-button.copied {
    background: var(--color-accent) !important;
    color: white !important;
    border-color: var(--color-accent) !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.blog-card.active .share-button.copied:hover {
    background: #059669 !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}

/* Desktop with max-height constraint */
@media (min-width: 1025px) {
    .header-bg-container {
        max-height: 90vh;
    }
}

/* Tablet adjustments (iPad, etc.) */
@media (max-width: 1024px) {
    .header-bg-container {
        padding: calc(var(--spacing-unit) * 3) 0;
    }
    
    .hero h1 {
        font-size: clamp(2.35rem, 7vw, 4rem);
    }
    
    .hero-subtext p {
        font-size: clamp(1.02rem, 2.2vw, 1.25rem);
    }
}

/* iPad Portrait specific (most constrained) */
@media (max-width: 820px) and (max-height: 1180px) {
    .header-bg-container {
        padding: calc(var(--spacing-unit) * 2) 0 0 0;
    }
    
    /* Eliminate gap between header and AI reservations on iPad portrait */
    #ai-reservations {
        padding-top: calc(var(--spacing-unit) * 2);
        margin-top: 0;
    }

    .hero h1 {
        font-size: clamp(2.35rem, 7vw, 4rem);
        margin-bottom: 0.75rem;
    }
}

@media (max-width: 768px) {
    .header-bg-container {
        padding: calc(var(--spacing-unit) * 2) 0 0 0;
    }
    
    /* Eliminate gap between header and AI reservations on mobile */
    #ai-reservations {
        padding-top: calc(var(--spacing-unit) * 2);
        margin-top: 0;
    }
    
    /* Previously tightened spacing for the first block's iPhone video.
       Keep healthier spacing now that the first block is an image. */
    #ai-reservations .feature-block:first-child {
        gap: 24px;
    }
    
    #ai-reservations .feature-block:first-child .feature-content p {
        margin-bottom: 0.75rem;
    }
    
    #ai-reservations .feature-block:first-child .feature-image {
        margin-top: 0;
        margin-bottom: 0;
    }
    
    .blog-section {
        padding: calc(var(--spacing-unit) * 3) 0;
    }
    
    .blog-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    /* Reset all grid-column spans on mobile */
    .blog-grid article:nth-of-type(1),
    .blog-grid article:nth-of-type(2),
    .blog-grid article:nth-of-type(3),
    .blog-grid article:nth-of-type(4),
    .blog-grid article:nth-of-type(5),
    .blog-grid article:nth-of-type(6),
    .blog-grid article:nth-of-type(7),
    .blog-grid article:nth-of-type(8),
    .blog-grid article:nth-of-type(9),
    .blog-grid article:nth-of-type(10),
    .blog-grid article:nth-of-type(11),
    .blog-grid article:nth-of-type(12) {
        grid-column: span 1 !important;
    }
    
    .blog-card {
        padding: 1.5rem;
    }
    
    .blog-card h3 {
        font-size: 1.5rem;
    }
    
    .blog-description {
        font-size: 1rem;
    }
    
    .blog-content {
        padding: 1.5rem;
    }
    
    .blog-content h1,
    .blog-content h2 {
        font-size: 1.75rem;
    }
    
    .blog-content p,
    .blog-content ul,
    .blog-content ol {
        font-size: 1rem;
}

.share-button {
        bottom: 1rem;
        right: 1rem;
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
    }
}

.blog-content .blog-image {
    width: 100%;
    max-width: 600px;
    height: auto;
    margin: 2rem auto;
    border-radius: 0;
    display: block;
}

.blog-content .blog-image.chatbot {
    max-width: 300px;
    border-radius: 0;
}

/* Link styles */
a {
    text-decoration: underline;
    color: #333333;
}

a:hover {
    color: #333333;
}

.two-column {
    padding: 4rem 0;
}

.columns-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    margin-top: 2rem;
}

.column h4 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 900;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    letter-spacing: -0.01em;
}

.column ul, .column ol {
    list-style-position: outside;
    padding-left: 1.5rem;
}

.column ul li, .column ol li {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--text-color);
    margin-bottom: 1rem;
}

.column ol li {
    padding-left: 0.5rem;
}

@media (max-width: 768px) {
    .columns-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Header scrolled state - COMMENTED OUT FOR NOW */
/*
.header-bg-container.scrolled {
    background-color: white;
    background-image: url('images/background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.header-bg-container.scrolled .overlay {
    background-color: white;
    opacity: 0.8;
}

.header-bg-container.scrolled .hero {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
}

.header-bg-container.scrolled .hero h1 {
    color: var(--primary-color);
    position: relative;
    z-index: 3;
}

.header-bg-container.scrolled .hero .subtext {
    color: var(--text-color);
    position: relative;
    z-index: 3;
}

.header-bg-container.scrolled .hero-subtext p {
    color: var(--text-color);
    position: relative;
    z-index: 3;
}

.header-bg-container.scrolled .mobile-demo-link {
    color: var(--primary-color);
    position: relative;
    z-index: 3;
}

.header-bg-container.scrolled .mobile-demo-link:hover {
    opacity: 0.8;
}

.header-bg-container.scrolled .cta-button {
    background-color: var(--primary-color);
    color: white;
}

.header-bg-container.scrolled .cta-button:hover {
    background-color: #2a2a3e;
    color: white;
}
*/

/* Remove the custom How we help section CSS - revert to original */

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

.hero-demo-button {
    display: inline-block;
    background-color: transparent;
    color: white;
    padding: 1rem 2rem;
    text-decoration: none;
    border-radius: 0;
    font-weight: 600;
    font-size: 1.1rem;
    margin: 2.5rem 0;
    transition: all 0.3s ease;
    border: 2px solid white;
}

@media (hover: hover) and (pointer: fine) {
    .hero-demo-button:hover {
        background-color: white;
        color: var(--primary-color);
        transform: translateY(-2px);
    }
}

.feature-demo-button {
    display: inline-block;
    background-color: transparent;
    color: var(--primary-color);
    padding: 1rem 2rem;
    text-decoration: none;
    border-radius: 0;
    font-weight: 600;
    font-size: 1.1rem;
    margin-top: 1rem;
    transition: all 0.3s ease;
    border: 2px solid var(--primary-color);
    width: fit-content;
    align-self: flex-start;
}

@media (hover: hover) and (pointer: fine) {
    .feature-demo-button:hover {
        background-color: var(--primary-color);
        color: white;
        transform: translateY(-2px);
    }
}

/* Hide feature demo buttons on mobile - placed here for higher specificity */
@media (max-width: 768px) {
    .feature-demo-button {
        display: none !important;
    }
}

/* Social media links in CTA */
.social-link {
    display: inline-flex;
    align-items: center;
    margin: 0 0.1rem;
    color: var(--primary-color);
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-link:hover {
    color: #2a2a3e;
    transform: translateY(-1px);
}

.social-link svg {
    width: 20px;
    height: 20px;
    margin: 0 0.25rem;
}

/* Mobile responsive button changes */
@media (max-width: 768px) {
    .hero-demo-button.mobile-hidden {
        display: none !important;
    }
    
    .cta-button[data-mobile-href] {
        content: attr(data-mobile-text);
    }
}

/* ---------------------------
   Case studies carousel
   --------------------------- */

#case-studies {
    position: relative;
    background-color: var(--color-bg-soft);
    background-image: url('images/background_study.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    padding: calc(var(--spacing-unit) * 5) var(--space-xl);
    gap: 56px;
}

/* Case-studies content rhythm (migrated from inline styles in index.html) */
#case-studies .feature-image {
    order: 1;
}

#case-studies .feature-content {
    order: 2;
    gap: 1.1rem;
}

#case-studies .feature-benefits {
    margin: 0.75rem 0;
}

/* Case-study statement metrics (Junto) — replaces bullet list with big numbers */
#case-studies .cs-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin: 1.25rem 0 0.75rem;
    padding: 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
}

#case-studies .cs-stat {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

#case-studies .cs-stat-value {
    font-size: clamp(2.4rem, 4.2vw, 3.4rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.035em;
    color: var(--color-ink);
    font-variant-numeric: tabular-nums;
    margin: 0;
}

#case-studies .cs-stat-unit {
    font-size: 0.6em;
    font-weight: 700;
    margin-left: 0.05em;
    letter-spacing: -0.02em;
}

#case-studies .cs-stat-label {
    font-size: var(--text-sm);
    line-height: 1.45;
    color: var(--color-muted);
    margin: 0;
}

@media (max-width: 768px) {
    #case-studies .cs-stats {
        grid-template-columns: 1fr;
        gap: var(--space-md);
        padding-top: var(--space-md);
        padding-bottom: var(--space-md);
    }
    #case-studies .cs-stat {
        flex-direction: row;
        align-items: baseline;
        gap: var(--space-md);
    }
    #case-studies .cs-stat-value {
        font-size: clamp(2rem, 8vw, 2.6rem);
        min-width: 3.5rem;
    }
}

#case-studies .cs-quote p {
    margin: 0;
}

#case-studies .button-group {
    margin-top: var(--space-xs);
}

#case-studies.is-junto {
    background-image: url('images/junto.png');
}

#case-studies::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.9);
    pointer-events: none;
}

#case-studies > * {
    position: relative;
    z-index: 1;
}

/* Subtle parallax-style fixed background on desktop (mobile browsers are inconsistent) */
@media (min-width: 1024px) {
    #case-studies {
        background-attachment: fixed;
    }
}

@media (prefers-reduced-motion: reduce) {
    #case-studies {
        background-attachment: scroll;
    }
}

@media (max-width: 1023px) {
    /* Prevent mobile horizontal overflow from 100vw full-bleed layout */
    #case-studies.features-stacked {
        width: 100%;
        left: auto;
        right: auto;
        margin-left: 0;
        margin-right: 0;
        overflow: hidden;
    }

    /* Case studies carousel (mobile/tablet): show only last 2 gallery images side-by-side */
    #case-studies .cs-portrait-wrap {
        display: none !important;
    }

    #case-studies .cs-gallery-grid {
        grid-template-columns: 1fr 1fr;
    }

    #case-studies .cs-gallery-grid img {
        display: none !important;
    }

    /* Explicitly show image 3 and 4 */
    #case-studies .cs-gallery-grid img:nth-child(3),
    #case-studies .cs-gallery-grid img:nth-child(4) {
        display: block !important;
    }
}

/* Keep the case studies block tighter on large screens */
#case-studies .feature-block {
    max-width: 1100px;
}

/* Case studies image column: portrait + gallery grid */
#case-studies .cs-photo-stack {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    display: grid;
    gap: 10px;
}

#case-studies .cs-portrait-wrap {
    width: 100%;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

#case-studies .cs-portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Crop slightly off the top */
    object-position: 50% 92%;
    display: block;
    border-radius: 0;
}

/* Gallery should read as one clean object */
#case-studies .cs-gallery-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    overflow: hidden;
    border-radius: 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    background: var(--color-bg-soft);
}

/* Typography + contrast tuning (scoped) */
#case-studies .feature-content p {
    color: #1f1f1f;
    font-size: clamp(1.1rem, 1.6vw, 1.25rem);
    line-height: 1.55;
}

#case-studies .feature-content h3 {
    font-size: clamp(1.9rem, 3.1vw, 2.35rem);
    line-height: 1.12;
}

#case-studies .feature-content > p:first-child {
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: #555555 !important;
    margin-bottom: var(--space-sm);
}

#case-studies .feature-benefits li {
    font-size: clamp(1.05rem, 1.4vw, 1.15rem);
    line-height: 1.5;
}

#case-studies .cs-quotes {
    display: grid;
    gap: 24px;
    margin: 0.9rem 0;
}

#case-studies .cs-quote {
    border-left: 3px solid var(--primary-color);
    padding-left: 1rem;
}

/* Quote text: smaller + italic, attribution normal */
#case-studies .cs-quote p:first-child {
    font-size: clamp(0.98rem, 1.2vw, 1.05rem);
    line-height: 1.55;
    font-style: italic;
    color: var(--color-ink-hover);
}

#case-studies .cs-quote p + p {
    font-style: normal;
    margin-top: 0.35rem;
    font-size: var(--text-sm);
    color: var(--color-muted);
}

#case-studies .cs-gallery-grid img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

/* Make onboarding section background white */
#how-it-works.testimonial-section {
    background-color: #ffffff;
}

@media (min-width: 1024px) {
    #case-studies .feature-block {
        max-width: 1100px;
        width: 100%;
        grid-template-columns: minmax(240px, 360px) 1fr;
        gap: 2.5rem;
        align-items: stretch;
    }

    #case-studies .cs-photo-stack {
        max-width: 340px;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    /* Let the portrait grow so the gallery bottom aligns with the CTA */
    #case-studies .cs-portrait-wrap {
        aspect-ratio: auto;
        flex: 1;
    }

    /* Junto: keep portrait fixed at 1:1, don't let it stretch */
    #case-studies .cs-slide[data-slide="1"] .cs-portrait-wrap {
        flex: 0 0 auto;
        aspect-ratio: 1 / 1;
    }

    /* Match "Get started" content width/alignment (no extra max-width cap) */
    #case-studies .feature-content {
        width: 100%;
        max-width: none;
    }
}

/* ---- Case Studies Carousel ---- */
.cs-carousel {
    position: relative;
    overflow: hidden;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

.cs-track {
    display: flex;
    align-items: flex-start;
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.cs-slide {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    overflow: hidden;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

/* Case study tabs */
.cs-tabs {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-top: 2rem;
    position: relative;
    z-index: 3;
    border-bottom: 1px solid #e0e0e0;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* Desktop: align tabs with the case-study content/button column */
@media (min-width: 1024px) {
    .cs-tabs {
        max-width: 1100px;
        justify-content: flex-start;
        padding-left: calc(340px + 2.5rem);
        margin-top: 1.25rem;
    }
}

.cs-tab {
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: #999999;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    margin-bottom: -1px;
}

.cs-tab:hover {
    color: var(--primary-color);
}

.cs-tab--active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    font-weight: 600;
}

/* Junto portrait crop — portrait-oriented source, keep faces centered */
#case-studies .cs-slide[data-slide="1"] .cs-portrait {
    object-position: 50% 72%;
}

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

@media (max-width: 767px) {
    .cs-tabs {
        max-width: 100%;
    }

    .cs-tab {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }

    .cs-carousel {
        overflow: hidden;
    }

    .cs-slide .feature-block {
        display: flex !important;
        flex-direction: column;
        max-width: 100%;
    }

    .cs-slide .feature-content,
    .cs-slide .feature-image {
        width: 100%;
        max-width: 100%;
        order: unset !important;
    }

    .cs-slide .feature-content p,
    .cs-slide .feature-content h3,
    .cs-slide .cs-quotes {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

/* ==========================================================================
   Property Showcase Section — Scrolling card rail
   ========================================================================== */

.property-showcase {
    padding: 0;
    overflow: hidden;
    position: relative;
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.property-showcase-divider {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    max-width: 1200px;
    margin: 0 auto;
}

.property-showcase-divider:first-child {
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.property-showcase-divider-bottom {
    margin-top: calc(var(--spacing-unit) * 3);
    margin-bottom: 0;
}

.property-showcase-heading {
    text-align: center;
    padding: 0 2rem;
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.property-showcase-heading p {
    font-size: clamp(0.95rem, 1.5vw, 1.1rem);
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-muted);
    letter-spacing: 0;
    margin-bottom: 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Edge fade overlays */
.property-showcase::before,
.property-showcase::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    z-index: 2;
    pointer-events: none;
}

.property-showcase::before {
    left: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
}

.property-showcase::after {
    right: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
}

/* Scrolling track */
.property-rail {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: property-scroll 50s linear infinite;
}

.property-rail:hover {
    animation-play-state: running;
}

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

/* Property card */
.property-card {
    flex-shrink: 0;
    width: 280px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform 0.25s ease-out,
                box-shadow 0.25s ease-out,
                border-color 0.25s ease-out;
}

.property-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #f5f5f5;
}

.property-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.property-card:hover .property-card-image img {
    transform: none;
}

.property-card-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: var(--primary-color);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 2px 8px;
    line-height: 1.4;
}

.property-card-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.property-card-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    line-height: 1.3;
}

.property-card-location {
    font-size: 12px;
    color: #888888;
    line-height: 1.4;
}

.property-card-descriptor {
    font-size: 12px;
    color: #888888;
    line-height: 1.4;
}

.property-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}

.property-card-tag {
    font-size: 10px;
    padding: 1px 6px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: var(--primary-color);
    line-height: 1.5;
}

/* ==========================================================================
   Demo CTA — last grid item inside .product-grid. Reuses .product-card
   .product-card--hero (full-width grid span + visual frame). Layout
   override flips flex direction to row for the avatar + content layout.
   ========================================================================== */

.product-card--demo {
    flex-direction: row;
    align-items: center;
    gap: 28px;
    padding: 32px 36px;
}

.product-card--demo .demo-cta-avatar {
    width: 64px;
    height: 64px;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}

.product-card--demo .demo-cta-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.product-card--demo .demo-cta-headline {
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    font-weight: 600;
    color: var(--color-ink);
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.product-card--demo .demo-cta-sub {
    font-size: 0.92rem;
    color: var(--color-muted);
    line-height: 1.55;
    margin: 0;
}

.product-card--demo .demo-cta-button {
    align-self: flex-start;
    margin-top: 14px;
    font-size: 0.9rem;
}

@media (max-width: 700px) {
    .product-card--demo {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        padding: 24px;
    }

    .product-card--demo .demo-cta-button {
        margin-top: 4px;
    }
}