/* =============================================================================
   Marketing tokens, ALIASED onto the shared vocabulary.
   =============================================================================

   This file used to declare its own palette — #4285F4, #f8f9fa, --gray-500 — with
   ZERO names in common with the console's. Two products, visually, from one company.

   Rather than rewrite 2,400 lines of rules, the token layer is now a MAPPING onto
   ui-design-system. Every rule below keeps working unchanged, and every colour now
   derives from the one vocabulary, so a palette or theme change made once reaches
   this site too.

   Three surface values are BYTE-IDENTICAL between the two systems already
   (#ffffff, #f8f9fa, #f1f3f4), which is what makes the mapping safe rather than a
   redesign. Text and border values shift by a few points — that IS the convergence
   and it is the intent.

   ONE DECISION IS DELIBERATELY NOT MADE HERE. The brand hues stay literal, because
   the logo is #4285F4→#1a73e8 while the console's primary is #1976d2, and picking
   one silently would either restyle this site or restyle the whole console. The
   logo is the stronger claim on "the brand blue"; changing the shared token is the
   change worth discussing.

   As rules are touched, prefer referencing --md-sys-* directly and retire the alias.
   ============================================================================= */

:root {
    /* Brand hues — now the SHARED primary, so one blue spans the marketing site,
       the console and the auth pages. Previously literal Google-ish blues that
       matched the logo but nothing else. Because these are aliases resolved at
       :root, they follow the token layer into dark automatically. */
    --blue: var(--md-sys-color-primary);
    --blue-dark: var(--sct-color-primary-hover);
    --blue-light: var(--md-sys-color-primary-container);
    --red: var(--md-sys-color-error);
    --yellow: var(--md-extended-color-yellow, #FBBC05);
    --green: var(--md-sys-color-success, #34A853);

    /* Surfaces — exact matches in both systems. */
    --bg-primary: var(--md-sys-color-surface);
    --bg-secondary: var(--md-sys-color-surface-container-high);
    --bg-tertiary: var(--md-sys-color-surface-container-highest);
    --bg-card: var(--md-sys-color-surface);
    --bg-elevated: var(--md-sys-color-surface);

    --border-color: var(--md-sys-color-outline-variant);
    --border-color-light: var(--md-sys-color-outline);

    --text-primary: var(--md-sys-color-on-surface);
    --text-secondary: var(--md-sys-color-on-surface-variant);
    --text-light: var(--md-sys-color-on-surface-muted);
    --text-inverse: var(--md-sys-color-on-primary);

    /* Elevation comes from the shared scale rather than four bespoke shadows. */
    --shadow-sm: var(--md-sys-elevation-1);
    --shadow-md: var(--md-sys-elevation-2);
    --shadow-lg: var(--md-sys-elevation-3);
    --shadow-xl: var(--md-sys-elevation-4, var(--md-sys-elevation-3));

    /* THE BRAND BLUE USED AS TEXT, which needs opposite ends of the ramp in the two
       themes — that is the whole reason this is a token and not a literal.

       --blue is tuned to sit BEHIND on-primary text (buttons, active tabs). As text
       it is 4.60:1 on white: fine there, but 4.37:1 on the tinted section surfaces
       and 4.13:1 behind inline code, both below AA. The darker alias fixes light and
       breaks dark, where it measures 4.05:1 on --bg-tertiary against 7.09:1 for the
       lighter one. Measured in a browser, on 41 elements of /sctx/ alone.

       Used by `a`, inline `code` and `.section-label`. NOT a second brand blue —
       both ends already existed; this only picks the readable one per theme. */
    --brand-text: var(--blue-dark);
    --code-bg: var(--md-sys-color-inverse-surface);
    --code-text: var(--md-sys-color-inverse-on-surface);

    /* The grey ramp is referenced widely by older rules; kept as aliases so those
       rules need no edit, and so the ramp cannot drift from the shared surfaces. */
    --white: var(--md-sys-color-surface);
    --gray-50: var(--md-sys-color-surface-container-high);
    --gray-100: var(--md-sys-color-surface-container-highest);
    --gray-200: var(--md-sys-color-outline-variant);
    --gray-300: var(--md-sys-color-outline);
    --gray-400: #bdc1c6;
    --gray-500: var(--md-sys-color-on-surface-muted);
    --gray-600: var(--md-sys-color-on-surface-muted);
    --gray-700: var(--md-sys-color-on-surface-variant);
    --gray-800: #3c4043;
    --gray-900: var(--md-sys-color-on-surface);
}

/* Dark theme */
[data-theme="dark"] {
    --bg-primary: #202124;
    --bg-secondary: #292a2d;
    --bg-tertiary: #35363a;
    --bg-card: #292a2d;
    --bg-elevated: #35363a;
    --border-color: #3c4043;
    --border-color-light: #5f6368;
    --text-primary: #e8eaed;
    --text-secondary: #9aa0a6;
    /* NOT a dimmer grey, because this palette has no room for one. Measured in
       the browser: #80868b was 4.37:1 on --bg-primary and 3.90:1 on the card
       surface, and every muted string on the site sits on one of those two — so
       the whole tier failed AA in dark mode while passing in light, which is what
       kept it invisible. The dimmest compliant value on this palette rounds to
       --text-secondary itself, so the third tier genuinely collapses here rather
       than being faked with two indistinguishable greys. Restore a dimmer value
       only alongside darker backgrounds. */
    --text-light: var(--text-secondary);
    --text-inverse: #202124;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5), 0 1px 3px 1px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 4px 8px 3px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 8px 16px 4px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 2px 6px 0 rgba(0, 0, 0, 0.5), 0 16px 24px 8px rgba(0, 0, 0, 0.3);
    --brand-text: var(--blue);
    --code-bg: #35363a;
    --code-text: #e8eaed;

    --white: #202124;
    --gray-50: #292a2d;
    --gray-100: #35363a;
    --gray-200: #3c4043;
    --gray-300: #5f6368;
    --gray-400: #80868b;
    --gray-500: #9aa0a6;
    --gray-600: #bdc1c6;
    --gray-700: #dadce0;
    --gray-800: #e8eaed;
    --gray-900: #f1f3f4;
}

/* System preference dark mode — the NO-JS fallback.
   Gated `:not([data-theme="light"])` rather than `[data-theme="system"]`: the
   pre-paint script now resolves the preference and always writes a concrete
   "light" or "dark", so nothing ever carries "system" and that selector matched
   nothing. This form still works when the attribute is ABSENT, which is the case
   this block actually exists for. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-primary: #202124;
        --bg-secondary: #292a2d;
        --bg-tertiary: #35363a;
        --bg-card: #292a2d;
        --bg-elevated: #35363a;
        --border-color: #3c4043;
        --border-color-light: #5f6368;
        --text-primary: #e8eaed;
        --text-secondary: #9aa0a6;
        /* NOT a dimmer grey, because this palette has no room for one. Measured in
       the browser: #80868b was 4.37:1 on --bg-primary and 3.90:1 on the card
       surface, and every muted string on the site sits on one of those two — so
       the whole tier failed AA in dark mode while passing in light, which is what
       kept it invisible. The dimmest compliant value on this palette rounds to
       --text-secondary itself, so the third tier genuinely collapses here rather
       than being faked with two indistinguishable greys. Restore a dimmer value
       only alongside darker backgrounds. */
    --text-light: var(--text-secondary);
        --text-inverse: #202124;
        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5), 0 1px 3px 1px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 4px 8px 3px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 8px 16px 4px rgba(0, 0, 0, 0.3);
        --shadow-xl: 0 2px 6px 0 rgba(0, 0, 0, 0.5), 0 16px 24px 8px rgba(0, 0, 0, 0.3);
        --brand-text: var(--blue);
    --code-bg: #35363a;
        --code-text: #e8eaed;

        --white: #202124;
        --gray-50: #292a2d;
        --gray-100: #35363a;
        --gray-200: #3c4043;
        --gray-300: #5f6368;
        --gray-400: #80868b;
        --gray-500: #9aa0a6;
        --gray-600: #bdc1c6;
        --gray-700: #dadce0;
        --gray-800: #e8eaed;
        --gray-900: #f1f3f4;
    }
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

::selection {
    background: rgba(66, 133, 244, 0.2);
    color: var(--text-primary);
}

body {
    font-family: 'Inter', 'Google Sans', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 16px;
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ===== LANDING PAGE STYLES ===== */

.landing-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Navigation */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 16px 24px;
    background: var(--bg-primary);
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.nav.scrolled {
    box-shadow: var(--shadow-sm);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.25em;
    letter-spacing: -0.5px;
}

.nav-brand:hover {
    color: var(--text-primary);
    text-decoration: none;
}

.nav-logo {
    height: 32px;
    width: auto;
}

.nav-links {
    display: flex;
    gap: 24px;
    align-items: center;
}

.nav-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.95em;
    font-weight: 500;
    transition: color 0.2s;
}

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

/* Theme Switcher */
.theme-switcher {
    display: flex;
    align-items: center;
    background: var(--bg-tertiary);
    border-radius: 100px;
    padding: 4px;
    gap: 2px;
}

.theme-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-light);
}

.theme-btn:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
}

.theme-btn.active {
    background: var(--bg-primary);
    color: var(--blue);
    box-shadow: var(--shadow-sm);
}

.theme-btn svg {
    width: 18px;
    height: 18px;
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 140px 24px 100px;
    position: relative;
    background: var(--bg-primary);
    overflow: hidden;
    transition: background-color 0.3s ease;
}

/* Subtle decorative shapes */
.hero::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(66, 133, 244, 0.04) 0%, transparent 70%);
    pointer-events: none;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: -10%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(52, 168, 83, 0.03) 0%, transparent 70%);
    pointer-events: none;
}

.hero-content {
    max-width: 800px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--gray-100);
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 0.875em;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 32px;
    animation: fadeIn 0.6s ease-out;
}

.badge::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--green);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.hero h1 {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 400;
    margin: 0 0 24px;
    color: var(--text-primary);
    letter-spacing: -1px;
    line-height: 1.2;
    animation: fadeIn 0.6s ease-out 0.1s both;
}

.hero h1 .rotating-text {
    color: var(--blue);
    font-weight: 500;
}

.hero .subtitle {
    font-size: 1.25em;
    color: var(--text-secondary);
    max-width: 640px;
    margin: 0 auto 16px;
    line-height: 1.8;
    font-weight: 400;
    animation: fadeIn 0.6s ease-out 0.2s both;
}

.hero .subtitle-small {
    font-size: 1em;
    color: var(--text-light);
    margin-bottom: 48px;
    animation: fadeIn 0.6s ease-out 0.3s both;
}

/* Hero CTA Buttons */
.hero-cta {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    animation: fadeIn 0.6s ease-out 0.4s both;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: none;
    position: relative;
    overflow: hidden;
}

.btn:focus {
    outline: none;
}

.btn:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.btn-primary {
    background: var(--blue);
    color: var(--white);
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    background: var(--blue-dark);
    color: var(--white);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.btn-secondary {
    background: var(--bg-primary);
    color: var(--blue);
    border: 1px solid var(--border-color-light);
}

.btn-secondary:hover {
    background: var(--bg-secondary);
    border-color: var(--blue-light);
    transform: translateY(-1px);
}

.btn-secondary:active {
    transform: translateY(0);
}

.btn-large {
    padding: 18px 40px;
    font-size: 1.05em;
}

/* Hero Visual / Search Preview */
.hero-visual {
    margin-top: 64px;
    width: 100%;
    max-width: 680px;
    animation: fadeIn 0.8s ease-out 0.5s both;
}

.search-preview {
    background: var(--bg-card);
    border: 1px solid var(--border-color-light);
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: var(--shadow-xl);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

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

.ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(66, 133, 244, 0.1), rgba(52, 168, 83, 0.1));
    border: 1px solid rgba(66, 133, 244, 0.2);
    border-radius: 100px;
    padding: 6px 14px;
    font-size: 0.8em;
    font-weight: 600;
    color: var(--blue);
}

.ai-icon {
    width: 16px;
    height: 16px;
    color: var(--blue);
    animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: scale(1.1) rotate(5deg);
        opacity: 0.8;
    }
}

.search-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-tertiary);
    border-radius: 12px;
    padding: 14px 20px;
    margin-bottom: 16px;
    position: relative;
}

.search-icon {
    width: 20px;
    height: 20px;
    color: var(--text-light);
    flex-shrink: 0;
}

.search-placeholder {
    color: var(--text-light);
    font-size: 0.95em;
    flex: 1;
}

.search-placeholder .typing-cursor {
    display: inline-block;
    width: 2px;
    height: 1.1em;
    background: var(--blue);
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: blink 1s step-end infinite;
}

.search-ai-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--blue), var(--green));
    border-radius: 8px;
    flex-shrink: 0;
}

.search-ai-hint svg {
    width: 16px;
    height: 16px;
    color: white;
}

.search-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag {
    background: var(--bg-card);
    border: 1px solid var(--border-color-light);
    color: var(--text-secondary);
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 0.85em;
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.tag:hover {
    background: rgba(66, 133, 244, 0.08);
    border-color: var(--blue);
    color: var(--blue);
    transform: translateY(-1px);
}

/* Scroll Animation Classes */
.fade-in-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }

/* Value Props Section */
.value-props {
    padding: 100px 24px;
    background: var(--bg-secondary);
    transition: background-color 0.3s ease;
}

.value-props-container {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
}

.value-prop {
    text-align: center;
    padding: 32px;
}

.value-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.value-prop:hover .value-icon {
    transform: scale(1.1);
}

.value-icon .icon {
    width: 48px;
    height: 48px;
    stroke: var(--blue);
    stroke-width: 1.25;
    transition: stroke 0.3s ease;
}

.value-prop:nth-child(1) .value-icon .icon { stroke: var(--blue); }
.value-prop:nth-child(2) .value-icon .icon { stroke: var(--red); }
.value-prop:nth-child(3) .value-icon .icon { stroke: var(--green); }

.value-prop h3 {
    color: var(--text-primary);
    font-size: 1.25em;
    margin: 0 0 12px;
    font-weight: 500;
}

.value-prop p {
    color: var(--text-secondary);
    font-size: 1em;
    line-height: 1.7;
    margin: 0;
}

/* Section Styling */
.section-header {
    text-align: center;
    margin-bottom: 72px;
}

.section-label {
    display: inline-block;
    font-size: 0.875em;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    /* --brand-text: the primary is 4.37:1 on the tinted section backgrounds and
       this is 14px text. See the token's definition. */
    color: var(--brand-text);
    margin-bottom: 16px;
}

/* Features Section */
.features {
    padding: 120px 24px;
    background: var(--bg-primary);
    transition: background-color 0.3s ease;
}

.features-container {
    max-width: 1100px;
    margin: 0 auto;
}

.features h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 400;
    color: var(--text-primary);
    margin: 0 0 16px;
    letter-spacing: -0.5px;
    border: none;
    padding: 0;
}

.features .section-subtitle {
    color: var(--text-secondary);
    font-size: 1.125em;
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.7;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 40px 32px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--blue), var(--green));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.feature-card:hover {
    border-color: var(--border-color-light);
    box-shadow: var(--shadow-lg);
    transform: translateY(-6px);
}

.feature-card:hover::before {
    opacity: 1;
}

.feature-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-card:hover .feature-icon {
    transform: scale(1.1);
}

.feature-icon .icon {
    width: 40px;
    height: 40px;
    stroke-width: 1.25;
    transition: stroke 0.3s ease;
}

/* Icon path animations */
.feature-icon .icon path,
.feature-icon .icon circle,
.feature-icon .icon polyline {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: none;
}

.feature-card:hover .feature-icon .icon path,
.feature-card:hover .feature-icon .icon circle,
.feature-card:hover .feature-icon .icon polyline {
    animation: drawIcon 0.6s ease forwards;
}

/* Value prop icon animations */
.value-icon .icon path,
.value-icon .icon circle,
.value-icon .icon polyline {
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.4s ease;
}

.value-prop:hover .value-icon .icon path,
.value-prop:hover .value-icon .icon circle,
.value-prop:hover .value-icon .icon polyline {
    animation: drawIcon 0.6s ease forwards;
}

.feature-card:nth-child(1) .feature-icon .icon { stroke: var(--blue); }
.feature-card:nth-child(2) .feature-icon .icon { stroke: var(--red); }
.feature-card:nth-child(3) .feature-icon .icon { stroke: var(--yellow); }
.feature-card:nth-child(4) .feature-icon .icon { stroke: var(--green); }
.feature-card:nth-child(5) .feature-icon .icon { stroke: var(--blue); }
.feature-card:nth-child(6) .feature-icon .icon { stroke: var(--red); }

.feature-card h3 {
    color: var(--text-primary);
    font-size: 1.125em;
    margin: 0 0 12px;
    font-weight: 500;
}

.feature-card p {
    color: var(--text-secondary);
    font-size: 0.95em;
    margin: 0;
    line-height: 1.7;
}

/* Who Section */
.who-section {
    padding: 120px 24px;
    background: var(--bg-secondary);
    transition: background-color 0.3s ease;
}

.who-container {
    max-width: 1100px;
    margin: 0 auto;
}

.who-section .section-header {
    margin-bottom: 56px;
}

.who-section h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 400;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.5px;
}

.who-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.who-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 32px;
    transition: all 0.3s ease;
}

.who-card:hover {
    border-color: var(--border-color-light);
    box-shadow: var(--shadow-sm);
}

.who-card h3 {
    color: var(--text-primary);
    font-size: 1.05em;
    margin: 0 0 8px;
    font-weight: 500;
}

.who-card p {
    color: var(--text-secondary);
    font-size: 0.95em;
    margin: 0;
    line-height: 1.7;
}

/* CTA Section */
.cta-section {
    padding: 120px 24px;
    background: var(--bg-primary);
    text-align: center;
    transition: background-color 0.3s ease;
}

.cta-container {
    max-width: 600px;
    margin: 0 auto;
}

.cta-section h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 400;
    color: var(--text-primary);
    margin: 0 0 16px;
    letter-spacing: -0.5px;
}

.cta-section p {
    font-size: 1.125em;
    color: var(--text-secondary);
    margin: 0 0 40px;
    line-height: 1.7;
}

/* Landing Footer */
.landing-footer {
    background: var(--bg-secondary);
    padding: 64px 24px 32px;
    border-top: 1px solid var(--border-color);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.footer-container {
    max-width: 1100px;
    margin: 0 auto;
}

.footer-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 64px;
    margin-bottom: 48px;
    flex-wrap: wrap;
}

.footer-brand {
    max-width: 280px;
}

.footer-brand .logo {
    max-width: 40px;
    margin-bottom: 16px;
}

.footer-brand p {
    color: var(--text-secondary);
    font-size: 0.95em;
    margin: 0;
    line-height: 1.6;
}

.footer-brand .footer-byline {
    margin: 12px 0 0;
    font-size: 0.9em;
    color: var(--text-light);
}
.footer-brand .footer-byline a {
    color: var(--text-secondary);
    font-weight: 500;
    text-decoration: none;
}
.footer-brand .footer-byline a:hover {
    color: var(--blue-dark);
    text-decoration: underline;
}

.footer-links-grid {
    display: flex;
    gap: 80px;
}

.footer-col h4 {
    color: var(--text-primary);
    font-size: 0.875em;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 16px;
}

.footer-col a {
    display: block;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.95em;
    margin-bottom: 10px;
    transition: color 0.2s;
}

.footer-col a:hover {
    color: var(--brand-text);
}

.footer-bottom-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap;
    gap: 16px;
}

.social-links {
    display: flex;
    gap: 8px;
}

.social-links a {
    width: 40px;
    height: 40px;
    background: transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    text-decoration: none;
}

.social-links a:hover {
    background: var(--bg-tertiary);
}

.social-links svg {
    width: 20px;
    height: 20px;
    fill: var(--text-secondary);
    transition: fill 0.2s ease;
}

.social-links a:hover svg {
    fill: var(--text-primary);
}

.footer-bottom {
    font-size: 0.875em;
    color: var(--text-light);
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes drawIcon {
    0% {
        stroke-dashoffset: 100;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

/* Landing Page Responsive */
@media (max-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .nav {
        padding: 12px 20px;
    }

    .nav-brand span {
        display: none;
    }

    .hero {
        padding: 120px 20px 80px;
        min-height: auto;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .hero-cta {
        flex-direction: column;
        align-items: center;
    }

    .btn {
        width: 100%;
        max-width: 280px;
    }

    .hero-visual {
        margin-top: 48px;
    }

    .value-props {
        padding: 80px 20px;
    }

    .value-props-container {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .value-prop {
        padding: 24px;
    }

    .features, .who-section, .cta-section {
        padding: 80px 20px;
    }

    .section-header {
        margin-bottom: 48px;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .feature-card {
        padding: 32px 24px;
    }

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

    .footer-main {
        flex-direction: column;
        gap: 32px;
    }

    .footer-links-grid {
        gap: 48px;
    }

    .footer-bottom-section {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .hero h1 {
        font-size: 1.75rem;
        letter-spacing: -0.5px;
    }

    .hero .subtitle {
        font-size: 1.05em;
    }

    .search-tags {
        display: none;
    }
}

/* ===== BOT PAGE & GENERAL STYLES ===== */

.page-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 40px 20px;
    background: var(--bg-secondary);
    transition: background-color 0.3s ease;
}

.container {
    background-color: var(--bg-card);
    padding: 48px 56px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    max-width: 800px;
    width: 100%;
    text-align: left;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.header {
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 32px;
    margin-bottom: 40px;
    position: relative;
}

.bot-page-theme {
    position: absolute;
    top: 0;
    right: 0;
}

.logo {
    max-width: 100px;
    height: auto;
    margin-bottom: 16px;
}

.logo.large {
    max-width: 180px;
    margin-bottom: 24px;
}

h1 {
    font-size: 1.75em;
    color: var(--text-primary);
    margin: 0;
    font-weight: 500;
}

h2 {
    font-size: 1.375em;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 12px;
    margin-top: 40px;
    margin-bottom: 24px;
    font-weight: 500;
}

h3 {
    font-size: 1.05em;
    color: var(--text-primary);
    margin-top: 28px;
    margin-bottom: 12px;
    font-weight: 500;
}

p {
    margin-bottom: 16px;
    color: var(--text-secondary);
}

code {
    background-color: var(--bg-tertiary);
    padding: 4px 8px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;
    color: var(--brand-text);
    font-size: 0.875em;
}

pre {
    background-color: var(--code-bg);
    color: var(--code-text);
    padding: 24px;
    border-radius: 12px;
    overflow-x: auto;
    font-size: 0.875em;
    font-family: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;
    line-height: 1.6;
    margin: 20px 0;
}

pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
    font-size: inherit;
}

ul {
    color: var(--text-secondary);
    padding-left: 24px;
}

li {
    margin-bottom: 10px;
}

.contact-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    margin-top: 28px;
}

.contact-box p {
    color: var(--text-secondary);
    margin: 0;
}

a {
    /* --brand-text, not --blue: the primary is tuned to sit BEHIND on-primary text,
       and as text it measures 4.60:1 on white but 4.37:1 on the tinted section
       surfaces — below AA. See the token's definition for why one alias cannot
       serve both themes. */
    color: var(--brand-text);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: var(--blue-dark);
    text-decoration: underline;
}

.footer {
    text-align: center;
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
    font-size: 0.875em;
    color: var(--text-light);
}

/* =====================================================
   BOT PAGE - Modern Layout Styles
   ===================================================== */

.bot-hero {
    padding: 140px 24px 80px;
    background: var(--bg-primary);
    text-align: center;
    transition: background-color 0.3s ease;
}

.bot-hero-content {
    max-width: 700px;
    margin: 0 auto;
}

.bot-hero h1 {
    font-size: 3em;
    font-weight: 700;
    color: var(--text-primary);
    margin: 16px 0;
    letter-spacing: -1px;
}

.bot-hero .subtitle {
    font-size: 1.25em;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.bot-content {
    padding: 60px 24px 100px;
    background: var(--bg-secondary);
    transition: background-color 0.3s ease;
}

.bot-container {
    max-width: 800px;
    margin: 0 auto;
}

.bot-section {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 40px;
    margin-bottom: 24px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.bot-section h2 {
    font-size: 1.5em;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 20px 0;
    padding: 0;
    border: none;
}

.bot-section h3 {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--text-primary);
    margin: 28px 0 12px 0;
}

.bot-section p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0 0 16px 0;
}

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

.bot-section pre {
    background: var(--code-bg);
    border-radius: 8px;
    padding: 16px 20px;
    overflow-x: auto;
    margin: 16px 0;
}

.bot-section code {
    font-family: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;
    font-size: 0.9em;
    color: var(--code-text);
}

.bot-section p code {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    padding: 2px 8px;
    border-radius: 4px;
}

/* Policy Cards Grid */
.bot-policies {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 24px;
}

.policy-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 24px;
    transition: background-color 0.3s ease;
}

.policy-icon {
    width: 48px;
    height: 48px;
    background: var(--blue);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.policy-icon svg {
    color: white;
}

.policy-card h4 {
    font-size: 1em;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.policy-card p {
    font-size: 0.9em;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

/* Contact Card */
.contact-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 32px;
    text-align: center;
}

.contact-card p {
    margin: 0 0 24px 0;
}

.contact-card .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.contact-card .contact-note {
    font-size: 0.875em;
    color: var(--text-light);
    margin: 0;
}

/* Bot Page Responsive */
@media (max-width: 768px) {
    .bot-hero {
        padding: 120px 20px 60px;
    }

    .bot-hero h1 {
        font-size: 2.25em;
    }

    .bot-content {
        padding: 40px 20px 80px;
    }

    .bot-section {
        padding: 28px;
    }

    .bot-policies {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .container {
        padding: 32px 24px;
    }
    h1 {
        font-size: 1.5em;
    }
    .logo.large {
        max-width: 120px;
    }
}

/* =====================================================
   COOKIE CONSENT BANNER
   ===================================================== */

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    padding: 20px 24px;
    z-index: 10000;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
}

.cookie-banner.visible {
    transform: translateY(0);
}

.cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.cookie-text {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.cookie-icon {
    width: 32px;
    height: 32px;
    color: var(--blue);
    flex-shrink: 0;
}

.cookie-text p {
    margin: 0;
    font-size: 0.95em;
    color: var(--text-secondary);
    line-height: 1.5;
}

.cookie-actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.cookie-btn {
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    font-family: inherit;
}

.cookie-btn-primary {
    background: var(--blue);
    color: white;
}

.cookie-btn-primary:hover {
    background: var(--blue-dark);
    transform: translateY(-1px);
}

.cookie-btn-secondary {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.cookie-btn-secondary:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

@media (max-width: 768px) {
    .cookie-content {
        flex-direction: column;
        text-align: center;
    }

    .cookie-text {
        flex-direction: column;
    }

    .cookie-actions {
        width: 100%;
    }

    .cookie-btn {
        flex: 1;
    }
}

/* ==========================================================================
   Navigation — account actions
   ========================================================================== */

.nav-cta {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: 8px;
    background: var(--blue);
    color: var(--white);
    font-size: 0.95em;
    font-weight: 500;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-cta:hover {
    background: var(--blue-dark);
    color: var(--white);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.nav-cta:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.nav-cta:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

/* ==========================================================================
   Pricing
   ========================================================================== */

.pricing {
    padding: 120px 24px;
    background: var(--bg-secondary);
    transition: background-color 0.3s ease;
}

.pricing-container {
    max-width: 1200px;
    margin: 0 auto;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    align-items: stretch;
}

.plan-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 32px 28px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.plan-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* The self-serve tier — the only one a visitor can start on their own. */
.plan-card.plan-featured {
    border-color: var(--blue);
    box-shadow: var(--shadow-md);
}

.plan-flag {
    position: absolute;
    top: -11px;
    left: 28px;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--blue);
    color: var(--white);
    font-size: 0.7em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.plan-name {
    font-size: 1.15em;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px;
}

.plan-tagline {
    font-size: 0.9em;
    color: var(--text-secondary);
    margin: 0 0 24px;
    min-height: 2.6em;
}

.plan-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
}

.plan-price .amount {
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    line-height: 1;
}

.plan-price .period {
    font-size: 0.9em;
    color: var(--text-secondary);
}

.plan-price-note {
    font-size: 0.8em;
    color: var(--text-light);
    margin: 0 0 24px;
    min-height: 1.2em;
}

.plan-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 0.95em;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 28px;
}

.plan-cta-primary {
    background: var(--blue);
    color: var(--white);
    box-shadow: var(--shadow-sm);
}

.plan-cta-primary:hover {
    background: var(--blue-dark);
    color: var(--white);
    box-shadow: var(--shadow-md);
}

.plan-cta-secondary {
    background: var(--bg-primary);
    color: var(--blue);
    border: 1px solid var(--border-color-light);
}

.plan-cta-secondary:hover {
    background: var(--bg-tertiary);
    border-color: var(--blue-light);
}

.plan-cta:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.plan-limits {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
}

.plan-limits li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.9em;
    color: var(--text-secondary);
    padding: 7px 0;
}

.plan-limits li .limit-value {
    color: var(--text-primary);
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
}

.plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9em;
    color: var(--text-secondary);
    padding: 6px 0;
}

.plan-features li svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    color: var(--green);
}

.plan-features li.feature-off {
    color: var(--text-light);
}

.plan-features li.feature-off svg {
    color: var(--gray-400);
}

.pricing-footnote {
    text-align: center;
    margin-top: 40px;
    font-size: 0.9em;
    color: var(--text-secondary);
}

.pricing-footnote a {
    color: var(--brand-text);
    text-decoration: none;
}

.pricing-footnote a:hover {
    text-decoration: underline;
}

@media (max-width: 1024px) {
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .pricing {
        padding: 80px 20px;
    }

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

    .plan-tagline,
    .plan-price-note {
        min-height: 0;
    }

}

/* Three footer columns (Product / Account / Company) need to wrap rather
   than overflow at the 80px gap the two-column layout was tuned for. */
.footer-links-grid {
    flex-wrap: wrap;
    gap: 48px 64px;
}

/* "Talk to us" is a phrase, not a figure — at the numeric size it out-shouts
   the one price on the page that is real ($0). Set it a tier down. */
.plan-price .amount-text {
    font-size: 1.55rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    line-height: 1.15;
}

/* Taglines wrap to two or three lines depending on the plan; without a
   shared floor the CTA buttons stagger across the row. */
.plan-tagline {
    min-height: 3.9em;
}

.plan-price {
    min-height: 2.4rem;
    align-items: flex-end;
}

/* Long values ("500M tokens/mo") were wrapping the LABEL instead of
   themselves, which knocked the limit rows out of alignment across cards. */
.plan-limits li > span:first-child {
    white-space: nowrap;
}

.plan-limits li .limit-value {
    white-space: normal;
}

.plan-limits li .limit-value {
    white-space: nowrap;
}

.pricing-footnote + .pricing-footnote {
    margin-top: 10px;
}

/* "Sign in" stays reachable on mobile — a returning user should never have
   to scroll to the footer to find it. Only the section anchors collapse. */
/* ==========================================================================
   Pricing — compact (homepage summary)
   ========================================================================== */

.pricing-grid-compact .plan-card {
    padding: 28px 24px;
}

.plan-summary {
    font-size: 0.92em;
    color: var(--text-secondary);
    margin: 4px 0 24px;
    line-height: 1.6;
}

.plan-summary-sub {
    font-size: 0.9em;
    color: var(--text-light);
}

.pricing-grid-compact .plan-cta {
    margin-bottom: 0;
    margin-top: auto;
}

.pricing-compare-link {
    font-weight: 500;
}

/* ==========================================================================
   Sub-page hero (pricing, sctx)
   ========================================================================== */

.page-hero {
    padding: 88px 24px 56px;
    text-align: center;
    background: var(--bg-primary);
    transition: background-color 0.3s ease;
}

.page-hero-container {
    max-width: 820px;
    margin: 0 auto;
}

.page-hero h1 {
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.12;
    color: var(--text-primary);
    margin: 16px 0 20px;
}

.page-hero p {
    font-size: 1.15em;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0 auto;
    max-width: 680px;
}

@media (max-width: 768px) {
    .page-hero {
        padding: 56px 20px 40px;
    }

    .page-hero h1 {
        font-size: 2.1rem;
    }
}

/* ==========================================================================
   Feature comparison table
   ========================================================================== */

.compare {
    padding: 96px 24px;
    background: var(--bg-primary);
    transition: background-color 0.3s ease;
}

.compare-container {
    max-width: 1100px;
    margin: 0 auto;
}

/* The table is wide by nature; it scrolls inside its own box so the page
   body never scrolls sideways on a phone. */
.compare-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--bg-card);
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
    font-size: 0.94em;
}

.compare-table th,
.compare-table td {
    padding: 14px 20px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.compare-table thead th {
    position: sticky;
    top: 0;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-weight: 600;
    white-space: nowrap;
    z-index: 1;
}

.compare-table tbody th {
    font-weight: 400;
    color: var(--text-secondary);
}

.compare-table td {
    color: var(--text-primary);
    font-weight: 500;
    white-space: nowrap;
}

.compare-table tr:last-child th,
.compare-table tr:last-child td {
    border-bottom: none;
}

.compare-table .row-group th {
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.86em;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.compare-table .yes {
    color: var(--green);
    font-weight: 700;
}

.compare-table .no {
    color: var(--text-light);
}

.compare-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    display: block;
}

.compare-price-sub {
    display: block;
    font-weight: 400;
    font-size: 0.8em;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* ==========================================================================
   Seat-price calculator table
   ========================================================================== */

.seats {
    padding: 96px 24px;
    background: var(--bg-secondary);
    transition: background-color 0.3s ease;
}

.seats-container {
    max-width: 900px;
    margin: 0 auto;
}

.seat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 8px;
}

.seat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 24px;
    text-align: center;
}

.seat-card .seat-count {
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.seat-card .seat-price {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.seat-card .seat-plan {
    font-size: 0.85em;
    color: var(--text-light);
    margin-top: 8px;
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq {
    padding: 96px 24px;
    background: var(--bg-primary);
    transition: background-color 0.3s ease;
}

.faq-container {
    max-width: 820px;
    margin: 0 auto;
}





/* ==========================================================================
   Trial timeline (lifecycle explainer)
   ========================================================================== */

.timeline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.timeline-step {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--blue);
    border-radius: 12px;
    padding: 22px 24px;
}

.timeline-step.step-muted {
    border-left-color: var(--border-color-light);
}

.timeline-day {
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--blue);
    margin-bottom: 8px;
}

.timeline-step.step-muted .timeline-day {
    color: var(--text-light);
}

.timeline-step h3 {
    font-size: 1em;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 6px;
}

.timeline-step p {
    font-size: 0.9em;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

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

    .compare, .seats, .faq {
        padding: 64px 20px;
    }
}

/* Five seat tiers should sit on one row rather than leaving a single
   orphaned card below the other four. */
.seat-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.seat-card {
    padding: 22px 16px;
}

/* ============================================
   Legal pages (Privacy Policy, Terms of Service)
   ============================================ */
.legal {
    padding: 8px 24px 80px;
    background: var(--bg-primary);
    transition: background-color 0.3s ease;
}
.legal-content {
    max-width: 800px;
    margin: 0 auto;
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.75;
}
.legal-meta {
    color: var(--text-light);
    font-size: 0.9rem;
    margin: 0 0 32px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--border-color);
}
.legal-toc {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 22px 26px 8px;
    margin: 0 0 44px;
}
.legal-toc h2 {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-weight: 700;
    color: var(--text-light);
    margin: 0 0 14px;
}
.legal-toc ol {
    margin: 0;
    padding: 0 0 0 20px;
    columns: 2;
    column-gap: 36px;
}
.legal-toc li {
    margin: 0 0 10px;
    break-inside: avoid;
}
.legal-toc a {
    color: var(--text-secondary);
    text-decoration: none;
}
.legal-toc a:hover {
    color: var(--blue-dark);
    text-decoration: underline;
}
.legal-content h2 {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin: 48px 0 14px;
    scroll-margin-top: 88px;
}
.legal-content h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 30px 0 10px;
}
.legal-content p {
    margin: 0 0 16px;
}
.legal-content ul {
    margin: 0 0 18px;
    padding-left: 22px;
}
.legal-content li {
    margin: 0 0 9px;
}
.legal-content a {
    color: var(--blue-dark);
    text-decoration: none;
}
.legal-content a:hover {
    text-decoration: underline;
}
.legal-content strong {
    color: var(--text-primary);
    font-weight: 600;
}
.legal-data {
    width: 100%;
    border-collapse: collapse;
    margin: 4px 0 22px;
    font-size: 0.95rem;
}
.legal-data th,
.legal-data td {
    text-align: left;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    vertical-align: top;
}
.legal-data th {
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 600;
    white-space: nowrap;
}
.legal-callout {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--blue);
    border-radius: 10px;
    padding: 18px 22px;
    margin: 0 0 24px;
}
.legal-callout p:last-child {
    margin-bottom: 0;
}
@media (max-width: 768px) {
    .legal-toc ol {
        columns: 1;
    }
    .legal-data {
        display: block;
        overflow-x: auto;
    }
}

/* =============================================================================
   "SynapCTX in numbers"
   =============================================================================
   Rendered only when the domain judged the figures publishable, so there is no empty
   or zero state to style — see templates/index.html.

   THREE ACROSS, TWO ROWS, EVERYTHING CENTRED. A previous version used auto-fit, which
   packed four onto the first row and left the remaining two ORPHANED and left-aligned
   under them — the kind of ragged second row that reads as a layout bug rather than a
   choice. Six figures divide by three exactly, so the count and the column count are
   pinned to each other on purpose: adding a seventh figure needs a decision here, and
   that is better than it silently going ragged.

   ONE COLOUR for every figure. The measured saving was picked out in brand blue, and
   emphasising one of six made the other five look like footnotes. */
.numbers {
    padding: 4.5rem 2rem;
    background: var(--md-sys-color-surface-container-low);
    border-top: 1px solid var(--md-sys-color-outline-variant);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.numbers-inner {
    max-width: 1080px;
    margin: 0 auto;
}

.numbers-head {
    text-align: center;
    margin-bottom: 3.25rem;
}

.numbers-head h2 {
    margin: 0 0 0.75rem;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--md-sys-color-on-surface);
}

.numbers-sub {
    margin: 0;
    font-size: 1rem;
    color: var(--md-sys-color-on-surface-variant);
}

.numbers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem 2rem;
    margin: 0;
}

.numbers-stat {
    text-align: center;
    /* A column so the icon, figure and label stack and centre together. Without it the
       icon sits on the text baseline and the whole cell reads as left-aligned even with
       text-align: center. */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.numbers-icon {
    width: 26px;
    height: 26px;
    margin-bottom: 0.85rem;
    fill: currentColor;
    /* The icon is supporting, not the message: the figure must stay the loudest thing
       in the cell, so the glyph takes the muted label colour rather than the brand. */
    color: var(--md-sys-color-on-surface-variant);
}

.numbers-stat dt {
    font-size: 2.375rem;
    font-weight: 600;
    line-height: 1.05;
    color: var(--md-sys-color-on-surface);
    /* tabular-nums so figures do not shift width as they tick up — a proportional font
       makes a refresh look like a layout bug. */
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.numbers-stat dd {
    margin: 0.5rem 0 0;
    max-width: 22ch;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--md-sys-color-on-surface-variant);
}

/* Two across before one, so the second row never carries a single orphan. */
@media (max-width: 900px) {
    .numbers-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; }
}

@media (max-width: 560px) {
    .numbers { padding: 3rem 1.25rem; }
    .numbers-grid { grid-template-columns: 1fr; gap: 2rem; }
    .numbers-head { margin-bottom: 2.25rem; }
    .numbers-head h2 { font-size: 1.625rem; }
    .numbers-stat dt { font-size: 2rem; }
}

/* =============================================================================
   BUTTONS NEVER UNDERLINE. One rule, last in the file.
   =============================================================================
   Every button on this site is an <a>, and there is a global
   `a:hover { text-decoration: underline; }` earlier in this file. That rule is right
   for PROSE links — an underline on hover is a real affordance in body copy — but on
   something already shaped like a button it reads as a defect, and it fired on every
   CTA regardless of colour.

   Fixed here rather than by narrowing the global rule: `a:not([class*="btn"])…` is
   fragile (it silently stops covering the next class someone adds) and it would also
   change prose links, which are fine. Listing the button classes is explicit, and
   TestButtonsNeverUnderlineOnHover pins that every class used as a button in the
   templates appears below.

   All four interaction states, not just :hover — :focus-visible and :active underline
   in some browsers via the same global rule, and a keyboard user should see the same
   button a mouse user does. */
.btn,
.btn:hover,
.btn:focus,
.btn:focus-visible,
.btn:active,
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary:active,
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:focus-visible,
.btn-secondary:active,
.btn-large,
.btn-large:hover,
.btn-large:focus,
.btn-large:focus-visible,
.btn-large:active,
.nav-cta,
.nav-cta:hover,
.nav-cta:focus,
.nav-cta:focus-visible,
.nav-cta:active,
.plan-cta,
.plan-cta:hover,
.plan-cta:focus,
.plan-cta:focus-visible,
.plan-cta:active,
.plan-cta-primary,
.plan-cta-primary:hover,
.plan-cta-primary:focus,
.plan-cta-primary:focus-visible,
.plan-cta-primary:active,
.plan-cta-secondary,
.plan-cta-secondary:hover,
.plan-cta-secondary:focus,
.plan-cta-secondary:focus-visible,
.plan-cta-secondary:active {
    text-decoration: none;
}

/* =============================================================================
   HEADER: burger, icon menus
   =============================================================================
   Replaces a header that had NO mobile navigation. Below 768px the secondary links
   were `display: none` and nothing took their place — measured on a 390px viewport,
   four of five links hidden and no toggle anywhere, so a phone visitor could reach
   nothing but "Get started". A comment claimed the footer covered it; a footer at the
   bottom of a long page is not navigation.

   The toggle exists in the markup at every width and is hidden here by CSS, so there
   is no JS-inserted element to go out of step with the templates. */
.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    cursor: pointer;
}

.nav-toggle:hover { background: var(--md-sys-color-surface-container-high); }

.nav-toggle-icon { width: 24px; height: 24px; fill: currentColor; }
/* One button, two glyphs: the close mark replaces the burger while the panel is open,
   which is clearer than rotating bars and needs no animation. */
.nav-toggle-icon.is-close { display: none; }
.nav-links.is-open ~ .nav-toggle .nav-toggle-icon,
.nav-toggle[aria-expanded="true"] .nav-toggle-icon { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon.is-close { display: block; }

/* --- Icon menus (theme, account) ----------------------------------------- */

/* The icon buttons are round hit targets LARGER than their glyphs, and the gap either
   side of the header's divider has to be measured against the GLYPH, not the box. 38px
   button around a 20px glyph leaves 9px of invisible padding, so a box gap that is
   numerically equal on both sides of the divider looks 9px wider on the icon side —
   measured live at 30px versus 39px, which is exactly what a reader notices.

   Declared here beside the button it is derived from, so the two move together: change
   the button size or the glyph and this stays correct. */
.nav-controls { --nav-icon-optical-pad: 9px; }

/* Pull the icon cluster left by that padding, so the two visual gaps match. Applied to
   the CLUSTER rather than the divider because it is the cluster's first glyph that is
   optically inset — the divider itself is exactly where it should be. */
.nav-links .nav-controls { margin-left: calc(-1 * var(--nav-icon-optical-pad)); }

.nav-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.nav-icon-btn svg { width: 20px; height: 20px; fill: currentColor; }
.nav-icon-btn:hover { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); }
.nav-icon-btn[aria-expanded="true"] { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-primary); }




/* A row that is a LABEL for a control rather than an action itself: no hover affordance,
   no pointer, because nothing happens when you click the words "Appearance". */

/* THE LABEL IS SELECTED BY CLASS, NOT BY ELEMENT — this rule used to be
   `.nav-menu-row span { flex: 1 1 auto }`, which is a (0,1,1) selector and therefore beat
   the `flex: 0 0 38px` that the theme switch (a <span>) declared on itself at (0,1,0). The
   switch's track silently grew from 38px to 47.8px, its knob kept its hard-coded 16px of
   travel, and the result was a toggle that stopped a third short of the right-hand end.
   Measured, not guessed. Every rule involved was locally correct; only the pairing was
   wrong, which is why the fix is to stop selecting by element name at all. */

/* A divider under the menu title, matching the console's settings menu. */

/* THE SESSION-CONTROL CLUSTER: the ⋮ trigger and the account avatar, tight against each
   other. `.nav-links` sets `gap: 24px`, which is right for text links and wrong for two
   adjacent icon buttons — at 24px the ⋮ and the avatar read as unrelated controls with a
   hole between them, which is exactly how it looked. 2px is the console's own
   `.sx-header-right` spacing, so the two headers now match.

   THE OLD `.nav-switch` LIVED HERE and is gone. It was a hand-copy of the console's
   `.sx-switch`, kept local with a note saying "if a third surface ever needs it, that is
   the moment to move it into the design system". A third surface did, and both copies had
   by then developed their own bug — so the replacement went into ui-design-system as
   `.sctx-theme` rather than becoming a third copy. */
.nav-controls {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* --- The account avatar, LAST in the header ------------------------------- */
.nav-avatar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    cursor: pointer;
    transition: box-shadow 0.15s;
}

/* WHICH AVATAR SHOWS IS DECIDED HERE, by one class on the button.
   It used to be `svg.hidden = true` in JS, which does nothing: `hidden` is an
   HTMLElement IDL attribute and SVGElement does not implement it, so both the generic
   mark and the initial disc rendered at once. CSS cannot make that mistake. */
.nav-avatar-icon { width: 30px; height: 30px; fill: currentColor; }
.nav-avatar-btn.is-signed-in .nav-avatar-icon { display: none; }
.nav-avatar-btn:not(.is-signed-in) .nav-avatar-initial { display: none; }

/* =============================================================================
   ACCOUNT MENU STATE — derived from ONE class, never from `hidden`.
   =============================================================================
   `.nav-account.is-signed-in` and `.nav-account.has-photo` on the anchor are the only inputs;
   every child's visibility follows from them. That replaced four `hidden` attributes, and the
   reason is worth keeping: `hidden` is a UA-stylesheet rule, so any author `display`
   declaration beats it. The signed-out menu rendered its "Signed in" head anyway, and an
   empty avatar circle with it — both looked like logic bugs and were not.

   DEFAULT IS SIGNED OUT. A visitor with no hint cookie is the common case and gets the
   correct menu with no JavaScript having run at all. */

/* The avatar button: generic mark -> initial disc -> photo. */
.nav-avatar-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    /* A provider's crop is not guaranteed square; without this a portrait is stretched into
       a distorted circle. */
    object-fit: cover;
    display: none;
}

.nav-account.has-photo .nav-avatar-img { display: block; }
.nav-account.has-photo .nav-avatar-initial,
.nav-account.has-photo .nav-avatar-icon { display: none; }

/* The menu body: the identity head only exists when we know who it is; the "ACCOUNT" title
   only when we do not. */
.nav-menu-head { display: none; }
.nav-account.is-signed-in .nav-menu-head { display: flex; }
.nav-account.is-signed-in .nav-menu-title { display: none; }

/* The signed-in state: an initial disc. Brand-coloured so it reads as "you" at a glance
   and is distinguishable from the neutral signed-out mark. */
.nav-avatar-initial {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    /* Optical centring: a capital letter sits slightly high in a circle otherwise. */
    line-height: 1;
    padding-top: 1px;
}

.nav-avatar-btn:hover { box-shadow: 0 0 0 8px var(--md-sys-color-surface-container-high); }
.nav-avatar-btn[aria-expanded="true"] { box-shadow: 0 0 0 8px var(--md-sys-color-surface-container-high); }

/* The account menu opens from the far right edge of the header. */
.nav-account .sctx-menu { right: 0; }

/* The initial disc again in the menu head, where the console shows an avatar. */
.nav-menu-avatar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
}

.nav-menu-account { min-width: 250px; }

.nav-menu-head {
    /* display is state-driven above — this rule only carries layout. */
    align-items: center;
    gap: 12px;
    padding: 10px 12px 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.nav-menu-meta { min-width: 0; }
.nav-menu-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
    /* An email can be long and the menu must not grow to fit it. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 190px;
}
.nav-menu-sub { font-size: 0.75rem; color: var(--md-sys-color-on-surface-variant); }

/* --- Mobile: the panel ---------------------------------------------------- */
@media (max-width: 768px) {
    .nav-toggle { display: inline-flex; }

    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 150;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 12px 16px 20px;
        border-bottom: 1px solid var(--md-sys-color-outline-variant);
        background: var(--md-sys-color-surface);
        box-shadow: var(--md-sys-elevation-2);
        /* display, not just a transform: a panel that is merely moved off-screen keeps
           its links in the tab order, so a keyboard user tabs into an invisible menu. */
        display: none;
    }

    .nav-links.is-open { display: flex; }

    .nav-links .nav-link {
        padding: 12px 8px;
        font-size: 1rem;
        border-radius: 8px;
    }

    .nav-links .nav-link:hover { background: var(--md-sys-color-surface-container-high); }

    /* The two icon menus sit side by side on their own row, and their dropdowns anchor
       to the LEFT here — right-anchored inside a full-width panel would hang off the
       edge on a narrow phone.

       The cluster is what carries `align-self` now that it, not each anchor, is the child
       of the stretched column: `align-items: stretch` on the open panel would otherwise
       make the wrapper full-width and drag the avatar to the far edge, away from the ⋮ it
       is paired with. */
    .nav-controls { align-self: flex-start; }
    .sctx-menu { right: auto; left: 0; }

    .nav-cta { margin-top: 8px; justify-content: center; }
}


/* ============================================================================
   INSTALL — platform tabs, CSS-ONLY

   No JavaScript, and that is a design decision rather than a limitation. Every
   panel is server-rendered and one is revealed by a `:checked` sibling
   selector, so the section works with scripting disabled and cannot flash the
   wrong panel before a script runs. On a page whose argument is about not
   paying for output nobody needed, shipping a tab controller to toggle three
   blocks of static text would be the same mistake in a different medium.

   It is a REAL radio group. "Which operating system" is exactly what radios are
   for, so arrow-key navigation, focus handling and screen-reader semantics come
   from the platform instead of from ARIA we would have to keep correct.
   ============================================================================ */

.install {
    padding: 96px 24px;
    background: var(--bg-primary);
    transition: background-color 0.3s ease;
}

.install-container {
    max-width: 900px;
    margin: 0 auto;
}

/* The tab component lives in ui-design-system; this is the surface's half of it.

   THE HOOKS ARE OVERRIDDEN, NOT INHERITED. This site hardcodes its dark palette and
   never redefines `--md-sys-color-*`, so a component reading those tokens directly
   would render a tablist from a DIFFERENT palette in dark mode — right on the
   console, subtly wrong here. Mapping the hooks to this site's own aliases is what
   keeps one component looking native on both. */
.sctx-tabs {
    margin-top: 40px;
    --sctx-tablist-bg: var(--bg-secondary);
    --sctx-tablist-border: var(--border-color);
    --sctx-tab-fg: var(--text-secondary);
    --sctx-tab-hover-bg: var(--bg-tertiary);
    --sctx-tab-hover-fg: var(--text-primary);
    --sctx-tab-active-bg: var(--blue);
    --sctx-tab-active-fg: var(--md-sys-color-on-primary);
    --sctx-tab-focus: var(--blue);
}

/* PADDING, NOT MARGIN, and on the panel rather than its contents. The panel's first
   child varies — an `h3` in the install commands, a `dl` in the agent guide — and
   each brings its own top margin, so a margin here would collapse against whichever
   happened to be larger and the gap would differ per tab for no visible reason.
   Padding cannot collapse, so the distance from the tab row is stated once. */
.sctx-tab-panels > .sctx-tab-panel { padding-top: var(--md-spacing-sm); }

/* The agent guide needs more of it than the install commands do: its panel opens
   straight onto a definition list whose first row sits hard against the tab row at
   8px, which is what made the instructions read as part of the tabs. */
.install-after .sctx-tab-panels > .sctx-tab-panel { padding-top: var(--md-spacing-lg); }

/* The three pairings, spelled out. A selector per platform rather than anything
   clever: an attribute-matching trick would couple the input id to the panel's
   data attribute silently, and a typo in either would hide a panel with nothing
   failing anywhere. */
/* These SWITCH ON the component's hooks rather than restating colours, so "what an
   active tab looks like" has one definition, in ui-design-system, shared with the
   link-driven tabs it styles through `[aria-current]`. */
#os-mac:checked ~ .sctx-tablist label[for="os-mac"],
#os-linux:checked ~ .sctx-tablist label[for="os-linux"],
#os-windows:checked ~ .sctx-tablist label[for="os-windows"],
#cov-code:checked ~ .sctx-tablist label[for="cov-code"],
#cov-search:checked ~ .sctx-tablist label[for="cov-search"],
#cov-files:checked ~ .sctx-tablist label[for="cov-files"],
#cov-git:checked ~ .sctx-tablist label[for="cov-git"],
#cov-containers:checked ~ .sctx-tablist label[for="cov-containers"],
#cov-system:checked ~ .sctx-tablist label[for="cov-system"]
{
    background: var(--sctx-tab-active-bg);
    color: var(--sctx-tab-active-fg);
}

#os-mac:checked ~ .sctx-tab-panels .sctx-tab-panel[data-tab="mac"],
#os-linux:checked ~ .sctx-tab-panels .sctx-tab-panel[data-tab="linux"],
#os-windows:checked ~ .sctx-tab-panels .sctx-tab-panel[data-tab="windows"],
/* The agent guide's per-platform steps live inside .install-after rather than
   directly beside the radios, so `~ .sctx-tab-panels` does not reach them. Spelled out
   per platform for the same reason as everything else in this block: there is no
   relational selector for "the panel whose data-tab equals the checked radio", and
   an attribute-matching trick would couple the id to the data attribute silently. */
#os-mac:checked ~ .install-after .sctx-tab-panel[data-tab="mac"],
#os-linux:checked ~ .install-after .sctx-tab-panel[data-tab="linux"],
#os-windows:checked ~ .install-after .sctx-tab-panel[data-tab="windows"],
#cov-code:checked ~ .sctx-tab-panels .sctx-tab-panel[data-tab="code"],
#cov-search:checked ~ .sctx-tab-panels .sctx-tab-panel[data-tab="search"],
#cov-files:checked ~ .sctx-tab-panels .sctx-tab-panel[data-tab="files"],
#cov-git:checked ~ .sctx-tab-panels .sctx-tab-panel[data-tab="git"],
#cov-containers:checked ~ .sctx-tab-panels .sctx-tab-panel[data-tab="containers"],
#cov-system:checked ~ .sctx-tab-panels .sctx-tab-panel[data-tab="system"]
{
    display: block;
}

/* Focus is forwarded to the LABEL, since the input itself is off-screen. There is no
   relational selector that says "the label whose `for` matches the focused radio", so
   each pairing is spelled out — the same reason the reveal rules above are. */
#os-mac:focus-visible ~ .sctx-tablist label[for="os-mac"],
#os-linux:focus-visible ~ .sctx-tablist label[for="os-linux"],
#os-windows:focus-visible ~ .sctx-tablist label[for="os-windows"],
#cov-code:focus-visible ~ .sctx-tablist label[for="cov-code"],
#cov-search:focus-visible ~ .sctx-tablist label[for="cov-search"],
#cov-files:focus-visible ~ .sctx-tablist label[for="cov-files"],
#cov-git:focus-visible ~ .sctx-tablist label[for="cov-git"],
#cov-containers:focus-visible ~ .sctx-tablist label[for="cov-containers"],
#cov-system:focus-visible ~ .sctx-tablist label[for="cov-system"]
{
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

/* ── Agent setup guide (#teach) ──────────────────────────────────────────────
   The agent tabs are LINKS, not radios, because the panel below them is rendered
   by the server: MEASURED, one agent's block is ~11KB, so shipping all seven would
   take this page from 87KB to about 160KB — an 84% increase on the page whose
   argument is that output should not be wasted. Selection lives in the query
   string, which also makes a given agent's setup a shareable URL, and main.js
   swaps the panel in place so a click does not reload or jump.

   A link cannot be `:checked`, so the active state comes from `aria-current`, set
   by the template — the only thing that knows which agent was requested. That
   attribute is doing real work; if it stops being emitted the active tab stops
   being marked for sighted and assistive users at once. */

/* Labels the agent tab row inside the Install section. --text-secondary rather
   than --text-light: this is 13px, so it carries the full 4.5:1 obligation, and
   --text-light was measured at 3.90:1 in dark mode before that token was fixed. */
.teach-picker-label {
    display: block;
    margin: var(--md-spacing-xl) 0 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* The facts table: where this agent keeps its instructions, and what we add.
   A definition list rather than a table because it is label/value pairs, not
   rows and columns — and it reflows to one column on a phone without the
   horizontal scroll a table would need. */
.teach-facts {
    display: grid;
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    gap: 12px 24px;
    margin: 0 0 var(--md-spacing-xl);
    padding: 0;
}

.teach-facts dt {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.teach-facts dd {
    margin: 0;
    min-width: 0;
    font-size: 0.9375rem;
    color: var(--text-primary);
}

/* Paths and file names break anywhere rather than overflowing: Windsurf's
   `%USERPROFILE%\.codeium\windsurf\memories\global_rules.md` is wider than a phone,
   and a path that overflows its container is a path the reader cannot read, let
   alone copy. Measured at 390px: it ran 144px past the paragraph edge.

   INLINE code only — `p` and `dd`, never `pre`. The .sctx-code block owns its own
   overflow behaviour and scrolls on purpose; a shell command broken across lines at
   arbitrary characters reads as several commands. `p code` cannot match inside
   .sctx-code because the block's code element is a child of `pre`. */
.install-after :where(p, dd) code {
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    .teach-facts {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .teach-facts dd {
        margin-bottom: 8px;
    }
}

.teach-note {
    margin: var(--md-spacing-xl) 0 0;
    font-size: 0.875rem;
    /* See .teach-picker-label above: --text-light fails AA in dark mode. */
    color: var(--text-secondary);
}

.install-step {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 32px 0 12px;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-primary);
}

.sctx-tab-panel > .install-step:first-child { margin-top: 24px; }

.install-pill {
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* `:where()` KEEPS THIS AT ZERO SPECIFICITY, and that is the whole point.
   Written as `.sctx-tab-panel p` this is (0,1,1) and silently outranks every component class
   inside the panel — it zeroed `.tab-panel-lead`'s (0,1,0) top margin, so the sentence
   under the coverage tabs sat 8px from the tab bar instead of 32px, and no rule was
   wrong on its own. That is the third time today an element-name descendant has beaten a
   component's own class: the theme switch's flex, the closing CTA's footnote margin, and
   this. `:where()` contributes nothing to specificity, so this behaves as the (0,0,1)
   default it was always meant to be and any class can override it.

   Same technique the console uses to keep its legacy bare-element button layer from
   reaching namespaced components. */
:where(.sctx-tab-panel, .install-after) p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0 0 12px;
}

.install-after {
    margin-top: var(--md-spacing-2xl);
    padding-top: var(--md-spacing-xl);
}

.install-footnote {
    margin-top: 20px;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* ============================================================================
   MEASURED — the live savings table and the sctx/SynapCTX comparison
   ============================================================================ */

.measured {
    padding: 96px 24px;
    background: var(--bg-primary);
    transition: background-color 0.3s ease;
}

.measured-container {
    max-width: 900px;
    margin: 0 auto;
}

/* The total row is the one a reader checks the column against, so it is set
   apart rather than left looking like another area. */
.measured .compare-table tfoot th,
.measured .compare-table tfoot td {
    border-top: 2px solid var(--border-color-light);
    font-weight: 600;
    color: var(--text-primary);
}

.together {
    padding: 96px 24px;
    background: var(--bg-secondary);
    transition: background-color 0.3s ease;
}

.together-container {
    max-width: 900px;
    margin: 0 auto;
}

.together-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 40px;
}

.together-card {
    padding: 32px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--bg-primary);
}

.together-card h3 {
    margin: 0 0 4px;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.together-price {
    margin: 0 0 20px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--blue-dark);
}

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

.together-list li {
    position: relative;
    padding: 0 0 12px 24px;
    color: var(--text-secondary);
    line-height: 1.65;
}

/* CENTRED ON THE FIRST LINE, DERIVED FROM THE LINE HEIGHT.
   A hardcoded `top` is a guess against one font size: at 9px the dot sat visibly high,
   and it would drift again the moment the type scale or the line height moved. Half a
   line box is `0.825em` (line-height 1.65), less half the dot's own height. */
.together-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: calc(0.825em - 3px);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue);
}

.hero-note {
    margin: 20px 0 0;
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

/* The shared component zeroes its own <pre> margin (a wrapper owns the spacing), so
   the surrounding rhythm is set on the wrapper here rather than on the element. */
.sctx-code { margin: 20px 0; }

.cta-command {
    max-width: 420px;
    margin: 0 auto 32px;
    text-align: left;
}

/* SPECIFICITY, NOT ORDER, IS WHY THIS NEEDS THE PARENT.
   `.cta-section p { margin: 0 0 40px }` is (0,1,1) and beat `.cta-footnote` at
   (0,1,0) regardless of where either sat in the file — so the footnote rendered with
   NO top margin and sat directly under the buttons. Every rule was correct alone.
   Same trap as `.nav-menu-row span` overriding the theme switch's own flex: an
   element-name descendant selector quietly outranks a component's own class. */
.cta-section .cta-footnote {
    margin: var(--md-spacing-2xl) 0 0;
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .install,
    .measured,
    .together { padding: 64px 16px; }

    /* Tabs stay one per line on a narrow screen: three 33% targets are below a
       comfortable tap size once padding is subtracted. */
    .sctx-tablist { flex-direction: column; }
    /* Left-aligned in the stacked layout, so the glyphs form a column of their own. */
    .sctx-tab { justify-content: flex-start; text-align: left; }
}

/* ============================================================================
   IT'S FREE — the "no account needed" band, and the disclosure density

   This copy used to sit under the hero buttons where it crowded them: three
   clauses containing a code fragment wrap to two lines on most viewports and
   read as part of the button group rather than as a statement about the
   product. It gets its own band immediately before the install steps, which is
   where a reader is deciding whether they need an account before starting.
   ============================================================================ */

.freebar {
    padding: 72px 24px;
    background: var(--bg-secondary);
    transition: background-color 0.3s ease;
}

.freebar-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.freebar-head { margin-bottom: 20px; }

.freebar-head h2 {
    margin: 12px 0 0;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 400;
    letter-spacing: -0.5px;
    color: var(--text-primary);
}

.freebar-lead {
    margin: 0 0 24px;
    font-size: 1.0625em;
    line-height: 1.7;
    color: var(--text-secondary);
}

/* Narrower than the install blocks and centred: it is one short command, and a
   full-width block around twenty characters reads as an empty panel. */
/* STANDARD SPACING COMES FROM THE DESIGN SYSTEM'S SCALE, not from hand-picked
   pixels. `--md-spacing-2xl` (48px) is the step for "a control group and the prose
   that follows it", and it is used for exactly that in three places on this page:
   here, above the install disclosures, and under the closing buttons. At 28px the
   facts list read as a caption attached to the command rather than a separate
   statement. */
.freebar-code {
    max-width: 420px;
    margin: 0 auto var(--md-spacing-2xl);
    text-align: left;
}

.freebar-facts {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;
    text-align: left;
}

.freebar-facts li {
    position: relative;
    padding: 0 0 10px 26px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* A tick, not a bullet: each line is a guarantee rather than an item. */
/* Same derivation as the bullets above. The tick's own box is 6px tall before the
   rotation, so half of it is 3px. */
.freebar-facts li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: calc(0.8em - 3px);
    width: 10px;
    height: 6px;
    border-left: 2px solid var(--blue);
    border-bottom: 2px solid var(--blue);
    transform: rotate(-45deg);
}

/* ---- Disclosure density on this page --------------------------------------
   The shared component owns the mechanics; these are metrics only. The install
   accordions sit inside a panel that already has its own rhythm, so they carry
   no top border of their own — the summary row is the separator. */
/* NO RULE ABOVE THE FIRST DISCLOSURE. Separation here is the 48px step, not a line:
   a border directly under the recommended command drew a divider with nothing above
   it to divide from, which reads as a stray line. The shared component already
   suppresses the rule below the LAST one. */
.sctx-tab-panel > .sctx-accordion:first-of-type {
    margin-top: var(--md-spacing-2xl);
}

.sctx-tab-panel > .sctx-accordion { --sctx-accordion-pad: 18px 0; }

/* The FAQ list, on BOTH pages. /pricing/ used plain `.faq-item` divs until
   2026-08-04; converting them retired that class entirely, so its four rules are
   gone rather than left as dead weight for the next reader to wonder about. */
.faq .sctx-accordion { --sctx-accordion-pad: 22px 0; }
.faq .sctx-accordion > summary { font-size: 1.05em; }
.faq .sctx-accordion-body { color: var(--text-secondary); line-height: 1.7; }
.faq .sctx-accordion-body p { margin: 0; }

@media (max-width: 768px) {
    .freebar { padding: 56px 16px; }
}


/* ---- Tabbed Coverage and Measured -----------------------------------------
   Same component as the install picker, so all three tab groups on the page look
   and behave identically — the alternative was a third bespoke thing that would
   have drifted from the other two within a week. */

.tab-panel-lead {
    /* The tab bar is a control; the sentence below it is prose about the selected tab.
       At 20px the two read as one block and the sentence looked like a tab label that
       had wrapped. */
    margin: var(--md-spacing-xl) 0 var(--md-spacing-md);
    color: var(--text-secondary);
    line-height: 1.7;
}

.sctx-tab-panel-empty {
    color: var(--text-secondary);
    font-style: italic;
}

/* A command name is a command name: monospace, and not the inline chip treatment
   bare `code` gets, which inside a table cell reads as a badge. */
.compare-table th[scope="row"] code {
    background: none;
    padding: 0;
    color: inherit;
    font-size: 0.9375em;
}

/* Each group's own subtotal, set apart from its rows. */
.measured .compare-table tfoot th,
.measured .compare-table tfoot td {
    border-top: 2px solid var(--border-color-light);
    font-weight: 600;
    color: var(--text-primary);
}

/* The totals band, reusing the home page's figure treatment so the same concept
   wears the same glyph in both places. */
/* NO RULE ABOVE THE COUNTERS. It was the only horizontal line in the section and it
   divided the figures from the sentence that introduces them — which is the one thing
   here that does belong together. The air does the separating, equally on both sides:
   the figures are the section's subject, not a footer under a heading. */
/* BOTH GAPS ARE PADDING, NOT MARGIN.
   Four rules contribute margins around this band — the section header's 72px, the
   subtitle's 16px, the band's own, and the footnote's 40px — and they collapse against
   one another, so the resulting gap is decided by whichever happens to be largest rather
   than by anything stated here. Padding never collapses: with the neighbours' margins
   zeroed, the two 48px values are the only things in play and the gaps are exactly equal.
   Verified in a browser at 48px above and 48px below.

   Rule of thumb worth keeping: when a gap must be EXACT, put padding on the element that
   owns it. Margin is for spacing that may reasonably collapse into its neighbours.

   MEASURING THIS SECTION HAS A TRAP. main.js adds `fade-in-section` plus a
   `stagger-N` to every `.section-header`, so the header sits at `translateY(30px)`
   until its reveal finishes — up to a 0.6s delay plus a 0.6s transition. Every gap
   read before that completes is 30px wrong, which is exactly how three successive
   "fixes" were made here against numbers that were artefacts. Scroll the section into
   view, wait past 1.2s, and ASSERT the transform has settled before believing any
   measurement.

   Do not write the stagger number here. N comes from the header's DOCUMENT ORDER, so
   inserting any section above this one shifts it — this comment said `stagger-4` until
   the agent setup guide was added between Install and How it works, at which point it
   silently described the wrong element. The mechanism is stable; the index is not. */
.measured-totals {
    margin: 0;
    padding: var(--md-spacing-2xl) 0;
    border: 0;
}

.measured .section-header { margin-bottom: 0; }
.measured .section-subtitle { margin-bottom: 0; }
.measured .pricing-footnote { margin-top: 0; }

.measured-totals .numbers-stat dd { max-width: 22ch; }


/* The platform glyph on an install tab. Sized to the cap height of the label rather
   than to the row, and `flex: none` so a long label cannot squash it. */
.sctx-tab-icon {
    flex: none;
    width: 15px;
    height: 15px;
    fill: currentColor;
}