/* ==========================================================================
   Vatdi UI — the one design layer for the public site.

   Loaded after landing.css / seo-pages.css / hero-chat.css so it wins the
   cascade. Where an older sheet used a compound selector (e.g. `.hero
   .btn-primary`), the same class is doubled here (`.btn-primary.btn-primary`)
   to tie specificity; source order then decides. Nothing here uses !important.

   Sections: 1 tokens · 2 base · 3 buttons · 4 badges · 5 cards · 6 sections
   and heroes · 7 header · 8 footer · 9 tables · 10 FAQ · 11 pricing ·
   12 SEO templates · 13 motion · 14 mobile · 15 reduced motion
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
    --v-primary: #14c975;
    --v-primary-600: #10a862;
    --v-primary-700: #0d8a51;
    --v-primary-50: #ecfdf4;
    --v-primary-100: #d3f8e5;
    --v-teal: #0fbfbd;
    --v-blue: #4f7dff;
    --v-ink: #0f172a;
    --v-ink-2: #334155;
    --v-ink-3: #64748b;
    --v-ink-4: #94a3b8;
    --v-line: rgba(15, 23, 42, 0.08);
    --v-line-strong: rgba(15, 23, 42, 0.14);
    --v-bg: #ffffff;
    --v-bg-soft: #f6f9fb;
    --v-bg-tint: #f2fbf6;
    --v-surface: #ffffff;
    --v-gradient: linear-gradient(135deg, #14c975 0%, #0fbfbd 50%, #4f7dff 100%);
    --v-gradient-soft: linear-gradient(135deg, rgba(20, 201, 117, 0.12), rgba(15, 191, 189, 0.10) 50%, rgba(79, 125, 255, 0.10));
    --v-font-head: 'Plus Jakarta Sans', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --v-font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --v-fs-display: clamp(2.25rem, 1.45rem + 3vw, 3.5rem);
    --v-fs-h1: clamp(2rem, 1.35rem + 2.3vw, 2.875rem);
    --v-fs-h2: clamp(1.625rem, 1.25rem + 1.4vw, 2.25rem);
    --v-fs-h3: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
    --v-fs-lede: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
    --v-r-sm: 10px;
    --v-r-md: 14px;
    --v-r-lg: 20px;
    --v-r-xl: 28px;
    --v-r-pill: 999px;
    --v-sh-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px -8px rgba(15, 23, 42, 0.10);
    --v-sh-md: 0 2px 4px rgba(15, 23, 42, 0.04), 0 18px 40px -16px rgba(15, 23, 42, 0.18);
    --v-sh-lg: 0 4px 8px rgba(15, 23, 42, 0.04), 0 32px 64px -20px rgba(15, 23, 42, 0.24);
    --v-sh-glow: 0 10px 30px -8px rgba(20, 201, 117, 0.55);
    --v-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --v-dur: 220ms;
    --v-section-y: clamp(3rem, 5vw, 5.5rem);
    --v-container-x: clamp(1.25rem, 4vw, 2.5rem);
}

/* 2. Base ------------------------------------------------------------------ */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--v-font-body);
    color: var(--v-ink-2);
    background: var(--v-bg);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, .seo-hero h1, .seo-content-section h2, .cta-box h2 {
    font-family: var(--v-font-head);
    color: var(--v-ink);
    letter-spacing: -0.015em;
    line-height: 1.15;
    text-wrap: balance;
}
.section-header { margin-bottom: 2.5rem; }
.section-header h2 { margin-bottom: 0.75rem; }
.section-header p { max-width: 60ch; margin-left: auto; margin-right: auto; }
h1, .seo-hero h1 { font-size: var(--v-fs-h1); font-weight: 800; }
h2, .seo-content-section h2, .cta-box h2 { font-size: var(--v-fs-h2); font-weight: 700; letter-spacing: -0.02em; }
h3 { font-size: var(--v-fs-h3); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
h4 { font-size: 1.0625rem; font-weight: 700; letter-spacing: 0; }
p { line-height: 1.7; }
p, li { text-wrap: pretty; }
main .section-lede, main .page-hero__lede, .seo-subtitle, .hero p.lede { font-size: var(--v-fs-lede); color: var(--v-ink-3); line-height: 1.6; }
::selection { background: var(--v-primary-100); color: var(--v-ink); }
:focus-visible { outline: 3px solid rgba(20, 201, 117, 0.45); outline-offset: 3px; border-radius: var(--v-r-sm); }
img, svg, video { max-width: 100%; height: auto; }
/* Inside shrink-to-fit flex tracks a percentage max-width resolves to 0; logos there need pixel bounds. */
.brand-chip img, .brand-slider img { max-width: 140px; width: auto; height: 48px; }
.brand-chip { min-width: 7.5rem; }

/* Prose links: no more browser blue. */
main p a:not([class]), main li a:not([class]), .section-body a, .faq-answer a, .blog-post-content a, .answer-block a {
    color: var(--v-primary-700);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(13, 138, 81, 0.35);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    transition: color var(--v-dur) var(--v-ease), text-decoration-color var(--v-dur) var(--v-ease);
}
main p a:not([class]):hover, main li a:not([class]):hover, .section-body a:hover, .faq-answer a:hover, .blog-post-content a:hover, .answer-block a:hover {
    color: var(--v-primary-600);
    text-decoration-color: currentColor;
}

/* 3. Buttons --------------------------------------------------------------- */
.btn-primary.btn-primary, .btn-getstarted.btn-getstarted, .btn-secondary.btn-secondary, .btn-link.btn-link,
.btn-signin.btn-signin, .btn-link--inverse.btn-link--inverse, .free-setup-callout .btn-primary, .cta .btn-primary,
.plan-footer .btn-primary, .plan-footer .btn-link, .btn-tint.btn-tint, .plan-footer .btn-tint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 3rem;
    padding: 0.8rem 1.5rem;
    border-radius: var(--v-r-pill);
    font-family: var(--v-font-body);
    font-size: 0.975rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform var(--v-dur) var(--v-ease), box-shadow var(--v-dur) var(--v-ease), background-color var(--v-dur) var(--v-ease), color var(--v-dur) var(--v-ease), border-color var(--v-dur) var(--v-ease);
    will-change: transform;
}
.btn-primary.btn-primary, .btn-getstarted.btn-getstarted, .free-setup-callout .btn-primary, .cta .btn-primary, .plan-footer .btn-primary {
    color: #fff;
    background: var(--v-gradient);
    background-size: 160% 160%;
    background-position: 0% 50%;
    box-shadow: var(--v-sh-glow);
}
.btn-primary.btn-primary:hover, .btn-getstarted.btn-getstarted:hover, .free-setup-callout .btn-primary:hover, .cta .btn-primary:hover, .plan-footer .btn-primary:hover {
    transform: translateY(-2px);
    background-position: 100% 50%;
    box-shadow: 0 16px 36px -10px rgba(20, 201, 117, 0.65);
    color: #fff;
}
.btn-primary.btn-primary:active, .btn-getstarted.btn-getstarted:active { transform: translateY(0) scale(0.985); box-shadow: var(--v-sh-glow); }
.btn-primary.btn-primary i, .btn-getstarted.btn-getstarted i { font-size: 0.9em; opacity: 0.95; }

.btn-secondary.btn-secondary, .btn-link.btn-link, .plan-footer .btn-link {
    color: var(--v-ink);
    background: var(--v-surface);
    border-color: var(--v-line-strong);
    box-shadow: var(--v-sh-sm);
}
.btn-secondary.btn-secondary:hover, .btn-link.btn-link:hover, .plan-footer .btn-link:hover {
    transform: translateY(-2px);
    border-color: var(--v-primary);
    color: var(--v-primary-700);
    box-shadow: var(--v-sh-md);
}
/* Tinted: a paid plan that is not the recommended one — clearly a step above the outlined Free button. */
.btn-tint.btn-tint, .plan-footer .btn-tint { color: var(--v-primary-700); background: var(--v-primary-50); border-color: rgba(20, 201, 117, 0.35); box-shadow: none; }
.btn-tint.btn-tint:hover, .plan-footer .btn-tint:hover { transform: translateY(-2px); background: var(--v-primary-100); border-color: var(--v-primary); color: var(--v-primary-700); box-shadow: var(--v-sh-sm); }
.btn-link--inverse.btn-link--inverse { color: #fff; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.28); box-shadow: none; }
.btn-link--inverse.btn-link--inverse:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; color: #fff; }
.btn-signin.btn-signin { min-height: 2.5rem; padding: 0.5rem 0.9rem; font-size: 0.9rem; color: var(--v-ink-2); background: transparent; border-color: transparent; box-shadow: none; }
.btn-signin.btn-signin:hover { color: var(--v-ink); background: var(--v-bg-soft); }
.btn-getstarted.btn-getstarted { min-height: 2.5rem; padding: 0.5rem 1.1rem; font-size: 0.875rem; }
.btn-block.btn-block { width: 100%; }
.hero-actions, .cta-buttons, .steps-cta, .seo-hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* 4. Eyebrows & badges ----------------------------------------------------- */
.eyebrow, .hero .eyebrow, .page-hero .eyebrow, .pricing-hero .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem 0.4rem 0.7rem;
    border-radius: var(--v-r-pill);
    background: var(--v-primary-50);
    color: var(--v-primary-700);
    border: 1px solid rgba(20, 201, 117, 0.25);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: none;
    line-height: 1;
    margin-bottom: 1.1rem;
}
.eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--v-primary); box-shadow: 0 0 0 3px rgba(20, 201, 117, 0.22); }
.eyebrow i { display: none; }
.pricing-trust-badges span, .hero-trust span, .hero-trust-badges span {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: 0.9rem; font-weight: 500; color: var(--v-ink-3);
}
.pricing-trust-badges span i, .hero-trust span i, .hero-trust-badges span i { color: var(--v-primary-600); }

/* 5. Cards ----------------------------------------------------------------- */
.feature-card, .comparison-card, .setup-step, .integration-card, .platform-card, .blog-card, .bestof-card, .alternative-card,
.step-card, .pain-point-card, .use-case-card, .free-setup-box, .free-setup-callout, .metric-card, .impact-card, .resource-card,
.doc-card, .contact-card, .faq-item {
    background: var(--v-surface);
    border: 1px solid var(--v-line);
    border-radius: var(--v-r-lg);
    box-shadow: var(--v-sh-sm);
    transition: transform var(--v-dur) var(--v-ease), box-shadow var(--v-dur) var(--v-ease), border-color var(--v-dur) var(--v-ease);
}
.feature-card:hover, .comparison-card:hover, .integration-card:hover, .platform-card:hover, .blog-card:hover, .bestof-card:hover,
.alternative-card:hover, .step-card:hover, .pain-point-card:hover, .use-case-card:hover, .resource-card:hover, .doc-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--v-sh-md);
    border-color: rgba(20, 201, 117, 0.35);
}
.feature-card h3, .comparison-card h3, .setup-step h3, .integration-card h3, .bestof-card h3, .alternative-card h3 { margin-bottom: 0.5rem; }
.feature-card p, .integration-card p, .bestof-card p, .alternative-card p, .step-card p, .pain-point-card p, .use-case-card p { color: var(--v-ink-3); font-size: 0.975rem; line-height: 1.6; }

/* Featured metric keeps its brand ground and light text under the unified card rules. */
.metric-card--featured { background: linear-gradient(160deg, #0b1220 0%, #0d8a51 100%); border-color: transparent; color: #fff; }
.metric-card--featured .metric-card__value, .metric-card--featured .metric-card__label { color: #fff; }
.metric-card--featured .metric-card__description { color: rgba(255, 255, 255, 0.8); }
.metric-card--featured .metric-card__icon { background: rgba(255, 255, 255, 0.16); color: #fff; }
.metric-card__value { font-family: var(--v-font-head); font-size: 2.25rem; font-weight: 800; letter-spacing: -0.03em; }

/* Icon tiles: brand tint instead of lavender/blue one-offs. */
.feature-icon, .free-setup-box__icon, .free-setup-callout__icon, .integration-card .icon, .platform-card .icon, .dropdown-icon, .step-number, .comparison-header i, .metric-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3rem; height: 3rem;
    border-radius: var(--v-r-md);
    background: var(--v-gradient-soft);
    color: var(--v-primary-700);
    font-size: 1.15rem;
}
.feature-icon { margin-bottom: 1rem; }
.dropdown-icon { width: 2.25rem; height: 2.25rem; border-radius: var(--v-r-sm); }
.dropdown-icon img { width: 1.25rem; height: 1.25rem; object-fit: contain; }
.step-number, .setup-step .step-number { background: var(--v-gradient); color: #fff; font-weight: 800; font-family: var(--v-font-head); box-shadow: var(--v-sh-glow); }
/* Numbered setup steps: the badge sits inside the card with real padding, not on its edge. */
.setup-guide { gap: 1rem; }
.setup-step { padding: 1.5rem 1.75rem; gap: 1.25rem; align-items: flex-start; }
.setup-step .step-number { flex: none; width: 3rem; height: 3rem; border-radius: var(--v-r-md); font-size: 1.05rem; }
.setup-step .step-content { min-width: 0; }
.setup-step .step-content h3 { margin: 0.35rem 0 0.5rem; font-size: 1.2rem; }
.setup-step .step-content p { color: var(--v-ink-3); margin: 0 0 0.75rem; }
.setup-step .feature-points { margin: 0; }
.feature-points li i, .plan-features li i, .pricing-card ul li i, .free-setup-box__features i { color: var(--v-primary-600); }

/* Platform tiles: the two badge colours come from the brand ramp (green = native plugin, blue = widget). */
.platform-link-card__badge.is-widget { background: rgba(79, 125, 255, 0.12); color: #3557d6; }
.platform-link-card__badge.is-native { background: var(--v-primary-50); color: var(--v-primary-700); }

/* Fixed-count feature grids collapse on smaller screens instead of squeezing cards. */
.feature-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.feature-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 1024px) { .feature-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .feature-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .feature-grid--4, .feature-grid--3 { grid-template-columns: 1fr; } }

/* 6. Sections & heroes ----------------------------------------------------- */
.container { padding-left: var(--v-container-x); padding-right: var(--v-container-x); }
main > .section, main .section { padding-top: var(--v-section-y); padding-bottom: var(--v-section-y); }
.section-alt, .seo-content-section:nth-child(even) { background: var(--v-bg-soft); }
.section-header { max-width: 780px; margin-left: auto; margin-right: auto; margin-bottom: clamp(2rem, 4vw, 3.25rem); text-align: center; }
.section-header h2 { margin-bottom: 0.85rem; }
.section-header p, .section-header .section-lede { color: var(--v-ink-3); font-size: var(--v-fs-lede); max-width: 64ch; margin-left: auto; margin-right: auto; }

.page-hero, .seo-hero, .pricing-hero, .hero, .blog-hero, .docs-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(60% 60% at 18% 10%, rgba(20, 201, 117, 0.16), transparent 62%),
        radial-gradient(50% 50% at 88% 12%, rgba(79, 125, 255, 0.12), transparent 60%),
        radial-gradient(60% 50% at 60% 100%, rgba(15, 191, 189, 0.10), transparent 60%),
        var(--v-bg);
}
.page-hero::before, .seo-hero::before, .pricing-hero::before, .hero::before, .blog-hero::before {
    content: '';
    position: absolute; inset: 0; z-index: -1;
    background-image: radial-gradient(rgba(15, 23, 42, 0.06) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(70% 70% at 50% 0%, #000 30%, transparent 100%);
    mask-image: radial-gradient(70% 70% at 50% 0%, #000 30%, transparent 100%);
}
.page-hero, .pricing-hero, .seo-hero { padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
/* Every single-column hero reads the same: centred eyebrow, balanced heading, centred lede and actions. */
.page-hero, .pricing-hero, .blog-hero, .docs-hero { text-align: center; }
.page-hero .hero-actions, .pricing-hero .hero-actions, .page-hero .hero-trust-badges, .page-hero .cta-buttons { justify-content: center; }
h1, h2, h3 { text-wrap: balance; hyphens: manual; }
.page-hero h1, .pricing-hero h1, .seo-hero h1 { max-width: 24ch; margin-left: auto; margin-right: auto; }
.page-hero .page-hero__lede, .pricing-hero .section-lede, .seo-hero .seo-subtitle { max-width: 62ch; margin-left: auto; margin-right: auto; }

/* Dark CTA bands. */
.cta, .seo-cta-section, .blog-post-cta.dark {
    position: relative; isolation: isolate; overflow: hidden;
    background:
        radial-gradient(50% 80% at 15% 0%, rgba(20, 201, 117, 0.35), transparent 60%),
        radial-gradient(40% 70% at 90% 100%, rgba(79, 125, 255, 0.35), transparent 60%),
        #0b1220;
    color: #fff;
}
.cta h2, .seo-cta-section h2, .cta-box h2 { color: #fff; }
.cta p, .seo-cta-section p, .cta-box p { color: rgba(255, 255, 255, 0.78); }

/* 7. Header ---------------------------------------------------------------- */
/* The blur lives on a pseudo-element: a filter on the header itself would become the containing
   block for the fixed off-canvas mobile nav inside it and push the hidden menu into the page width. */
.site-header {
    position: sticky; top: 0; z-index: 60;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: border-color var(--v-dur) var(--v-ease), box-shadow var(--v-dur) var(--v-ease);
}
.site-header::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    transition: background-color var(--v-dur) var(--v-ease);
}
.site-header.is-scrolled { border-bottom-color: var(--v-line); box-shadow: 0 8px 24px -16px rgba(15, 23, 42, 0.18); }
/* The header is sticky and in flow, so main no longer needs the fixed-header offset. */
.site-header ~ main, .site-header ~ main main { padding-top: 0; }
/* Integrations menu: three columns on desktop so 14 platforms fit without a long scroll. */
@media (min-width: 769px) {
    .dropdown-panel--wide { grid-template-columns: repeat(3, minmax(176px, 1fr)); min-width: 640px; gap: 0.125rem 0.375rem; padding: 0.75rem; }
    .dropdown-panel--wide .dropdown-link--all { grid-column: 1 / -1; }
}
.dropdown-icon img { width: 20px; height: 20px; object-fit: contain; }
.site-header.is-scrolled::before { background: rgba(255, 255, 255, 0.92); }
html, body { overflow-x: clip; }
.header-nav .nav-item, .header-nav .nav-dropdown-btn {
    position: relative; font-weight: 500; color: var(--v-ink-2); font-size: 0.9rem;
    transition: color var(--v-dur) var(--v-ease);
}
.header-nav .nav-item:hover, .header-nav .nav-dropdown-btn:hover, .header-nav .nav-item.active, .header-nav .nav-dropdown-btn.active { color: var(--v-ink); }
.header-nav > .nav-item.active::after, .header-nav .nav-dropdown-btn.active::after {
    content: ''; position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.15rem; height: 2px; border-radius: 2px; background: var(--v-gradient);
}
.dropdown-panel { border-radius: var(--v-r-lg); border: 1px solid var(--v-line); box-shadow: var(--v-sh-lg); padding: 0.6rem; }
.dropdown-link { border-radius: var(--v-r-sm); transition: background-color var(--v-dur) var(--v-ease), transform var(--v-dur) var(--v-ease); }
.dropdown-link:hover { background: var(--v-bg-tint); transform: translateX(2px); }
.dropdown-link .dropdown-text { font-weight: 500; color: var(--v-ink-2); }

/* 8. Footer ---------------------------------------------------------------- */
.site-footer { background: #0b1220; color: rgba(255, 255, 255, 0.72); }
.site-footer .footer-main { padding: clamp(3rem, 5vw, 4.5rem) 0 2.5rem; }
.footer-links-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2rem 1.5rem; }
.footer-links-col h4 { color: #fff; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.9rem; }
.footer-links-col a { display: block; color: rgba(255, 255, 255, 0.66); font-size: 0.925rem; padding: 0.22rem 0; transition: color var(--v-dur) var(--v-ease), transform var(--v-dur) var(--v-ease); }
.footer-links-col a:hover { color: #fff; transform: translateX(2px); }
.footer-tagline { color: rgba(255, 255, 255, 0.66); max-width: 30ch; }
.footer-social a { display: inline-flex; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; border-radius: var(--v-r-sm); background: rgba(255, 255, 255, 0.06); color: #fff; border: 1px solid rgba(255, 255, 255, 0.08); transition: background-color var(--v-dur) var(--v-ease), transform var(--v-dur) var(--v-ease); }
.footer-social a:hover { background: rgba(20, 201, 117, 0.25); transform: translateY(-2px); }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 1.25rem 0; font-size: 0.875rem; color: rgba(255, 255, 255, 0.55); }
.footer-legal-links a { color: rgba(255, 255, 255, 0.6); }
.footer-legal-links a:hover { color: #fff; }

/* 9. Tables ---------------------------------------------------------------- */
.section-body table, .comparison-table, .docs-table, .plans-table, .blog-post-content table, .features-table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    font-size: 0.95rem; line-height: 1.5;
    background: var(--v-surface);
    border: 1px solid var(--v-line); border-radius: var(--v-r-md); overflow: hidden;
}
.section-body table thead th, .comparison-table thead th, .docs-table thead th, .blog-post-content table thead th, .features-table thead th {
    background: var(--v-bg-soft); color: var(--v-ink); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase;
    padding: 0.85rem 1rem; text-align: left; border-bottom: 1px solid var(--v-line);
}
.section-body table td, .comparison-table td, .docs-table td, .blog-post-content table td, .features-table td {
    padding: 0.8rem 1rem; border-bottom: 1px solid var(--v-line); vertical-align: top; color: var(--v-ink-2);
}
.section-body table tbody tr:last-child td, .comparison-table tbody tr:last-child td, .blog-post-content table tbody tr:last-child td { border-bottom: 0; }
.section-body table tbody tr:nth-child(even) td, .blog-post-content table tbody tr:nth-child(even) td { background: rgba(246, 249, 251, 0.6); }
.section-body table td:first-child, .blog-post-content table td:first-child { font-weight: 600; color: var(--v-ink); }
.comparison-table-wrapper, .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--v-r-md); }
.check-yes { color: var(--v-primary-600); }
.check-no { color: var(--v-ink-4); }

/* 10. FAQ ------------------------------------------------------------------ */
.faq-item { border-radius: var(--v-r-md); box-shadow: none; margin-bottom: 0.75rem; overflow: hidden; }
.faq-item:hover { transform: none; box-shadow: var(--v-sh-sm); border-color: var(--v-line-strong); }
.faq-item.open, .faq-item:has(.faq-question[aria-expanded="true"]) { border-color: rgba(20, 201, 117, 0.4); box-shadow: var(--v-sh-sm); }
.faq-trigger, .faq-question {
    width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: 1.1rem 1.25rem; background: transparent; border: 0; text-align: left; cursor: pointer;
    font-family: var(--v-font-head); font-size: 1.0625rem; font-weight: 600; color: var(--v-ink); line-height: 1.35;
}
.faq-trigger i, .faq-question i, .faq-icon {
    flex: none; width: 1.75rem; height: 1.75rem; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--v-bg-soft); color: var(--v-ink-3); font-size: 0.75rem;
    transition: transform var(--v-dur) var(--v-ease), background-color var(--v-dur) var(--v-ease), color var(--v-dur) var(--v-ease);
}
.faq-item.open .faq-trigger i, .faq-question[aria-expanded="true"] i { transform: rotate(45deg); background: var(--v-primary-50); color: var(--v-primary-700); }
.faq-question[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }
.faq-answer p, .faq-answer-text { color: var(--v-ink-3); line-height: 1.7; }
.faq-answer { padding: 0 1.25rem; }
.faq-answer.open, .faq-item.open .faq-answer { padding-bottom: 1.1rem; }

/* Static (non-accordion) FAQ lists on integration pages. */
.faq-item--static { padding: 1.25rem 1.4rem; margin-bottom: 0.9rem; }
.faq-item--static:hover { transform: none; }
.faq-item--static h3 { font-family: var(--v-font-head); font-size: 1.0625rem; font-weight: 700; color: var(--v-ink); margin: 0 0 0.5rem; display: flex; gap: 0.6rem; align-items: flex-start; }
.faq-item--static h3::before { content: 'Q'; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--v-primary-50); color: var(--v-primary-700); font-size: 0.7rem; font-weight: 800; margin-top: 0.1rem; }
.faq-item--static p { margin: 0; color: var(--v-ink-3); line-height: 1.65; padding-left: 2.1rem; }

/* 11. Pricing -------------------------------------------------------------- */
.pricing-toggle-wrapper { display: flex; justify-content: center; margin-bottom: 2.5rem; }
.pricing-toggle { display: inline-flex; padding: 0.3rem; gap: 0.25rem; background: var(--v-bg-soft); border: 1px solid var(--v-line); border-radius: var(--v-r-pill); box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04); }
.pricing-toggle__option {
    position: relative; display: inline-flex; align-items: center; gap: 0.5rem;
    min-height: 2.6rem; padding: 0.5rem 1.25rem; border: 0; border-radius: var(--v-r-pill);
    background: transparent; color: var(--v-ink-3); font-weight: 600; font-size: 0.95rem; cursor: pointer;
    transition: background-color var(--v-dur) var(--v-ease), color var(--v-dur) var(--v-ease), box-shadow var(--v-dur) var(--v-ease);
}
.pricing-toggle__option.active { background: var(--v-surface); color: var(--v-ink); box-shadow: var(--v-sh-sm); }
.pricing-toggle__option .pricing-toggle__badge, .pricing-toggle__option.active .pricing-toggle__badge {
    position: static; transform: none; animation: none; box-shadow: none; margin-left: 0.15rem; padding: 0.2rem 0.55rem; border-radius: var(--v-r-pill);
    background: var(--v-primary-100); color: var(--v-primary-700); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.02em;
}
.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-items: stretch; }
.pricing-card {
    position: relative; display: flex; flex-direction: column;
    background: var(--v-surface); border: 1px solid var(--v-line); border-radius: var(--v-r-xl);
    padding: 2rem 1.75rem 1.75rem; box-shadow: var(--v-sh-sm);
    transition: transform var(--v-dur) var(--v-ease), box-shadow var(--v-dur) var(--v-ease), border-color var(--v-dur) var(--v-ease);
}
.pricing-card:hover { transform: translateY(-4px); box-shadow: var(--v-sh-md); }
.pricing-card.popular {
    border-color: transparent;
    background: linear-gradient(var(--v-surface), var(--v-surface)) padding-box, var(--v-gradient) border-box;
    border: 2px solid transparent;
    box-shadow: var(--v-sh-lg), 0 0 0 6px rgba(20, 201, 117, 0.08);
}
.pricing-card .label {
    position: absolute; top: 1.25rem; right: 1.25rem; display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.35rem 0.75rem; border-radius: var(--v-r-pill); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.02em;
    background: var(--v-primary-50); color: var(--v-primary-700); border: 1px solid rgba(20, 201, 117, 0.25);
}
.pricing-card.popular .label { background: var(--v-gradient); color: #fff; border-color: transparent; box-shadow: var(--v-sh-glow); }
/* Card reads: name → meta → price → limits (the real difference) → what sets it apart → CTA. */
.pricing-card > h3, .pricing-card > h3.has-label { font-size: 1.35rem; margin: 0 0 0.35rem; padding-right: 7rem; }
.pricing-card > .plan-meta { color: var(--v-ink-3); font-size: 0.95rem; line-height: 1.55; min-height: 3.1em; margin: 0 0 1.25rem; }
/* Same block height whether or not a "/month" line exists, so limits align across cards. */
.pricing-card > .price-wrapper { min-height: 6.9rem; display: flex; flex-direction: column; justify-content: flex-start; margin: 0 0 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px dashed var(--v-line-strong); }
.pricing-card > .plan-limits-summary { margin: 0 0 1.25rem; }
.pricing-card > .plan-footer { margin-top: auto; }
.plan-diff { margin: 0 0 1.5rem; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.plan-diff li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.925rem; line-height: 1.5; color: var(--v-ink-2); }
.plan-diff li i { flex: none; margin-top: 0.3rem; font-size: 0.75rem; color: var(--v-primary-600); }
.plan-diff li.is-muted, .plan-diff li.is-muted i { color: var(--v-ink-4); }
.plan-diff a { color: var(--v-primary-700); text-decoration: underline; text-underline-offset: 2px; }
.plan-shared {
    margin-top: 3rem; padding: 2.25rem; border-radius: var(--v-r-xl); background: var(--v-surface); border: 1px solid var(--v-line); box-shadow: var(--v-sh-sm);
    display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 2rem 3rem; align-items: start;
}
.plan-shared__head h3 { font-size: 1.5rem; margin: 0.75rem 0 0.5rem; }
.plan-shared__head p { color: var(--v-ink-3); margin: 0; font-size: 0.95rem; line-height: 1.6; }
.plan-shared__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem 1.5rem; }
.plan-shared__list li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.95rem; line-height: 1.5; color: var(--v-ink-2); }
.plan-shared__list li i { flex: none; margin-top: 0.3rem; font-size: 0.75rem; color: var(--v-primary-600); }
.price, .price-amount { font-family: var(--v-font-head); font-size: 3rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--v-ink); }
.price-primary { display: flex; align-items: baseline; gap: 0.6rem; }
.price-original { font-size: 1.05rem; color: var(--v-ink-4); text-decoration: line-through; }
.price-period { margin-top: 0.4rem; color: var(--v-ink-3); font-size: 0.95rem; display: flex; gap: 0.6rem; align-items: baseline; }
.monthly-equivalent { color: var(--v-ink-4); font-size: 0.875rem; }
.price-savings { display: inline-block; margin-top: 0.6rem; padding: 0.25rem 0.6rem; border-radius: var(--v-r-pill); background: var(--v-primary-50); color: var(--v-primary-700); font-size: 0.775rem; font-weight: 700; }
/* Limits as label → value rows: one layout at every width, nothing to overflow. */
.plan-limits-summary { display: grid; grid-template-columns: 1fr; gap: 0.4rem; background: transparent; border: 0; padding: 0; }
.plan-limits-row {
    display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 0.75rem;
    padding: 0.6rem 0.9rem; border-radius: var(--v-r-md); background: var(--v-bg-soft); border: 1px solid var(--v-line);
}
.pricing-card.popular .plan-limits-row { background: var(--v-bg-tint); border-color: rgba(20, 201, 117, 0.18); }
.plan-limits-label { min-width: 0; font-size: 0.85rem; font-weight: 500; color: var(--v-ink-3); line-height: 1.35; display: inline-flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.plan-limits-value { flex: none; font-family: var(--v-font-head); font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; color: var(--v-ink); line-height: 1.1; white-space: nowrap; }
.plan-limits-value__text { font-size: 0.95rem; letter-spacing: 0; color: var(--v-primary-700); }
.plan-limits-info { flex: none; width: 0.95rem; height: 0.95rem; border-radius: 50%; font-size: 0.6rem; display: inline-flex; align-items: center; justify-content: center; background: var(--v-line); color: var(--v-ink-3); cursor: help; }
.plan-footer .btn-primary, .plan-footer .btn-link { width: 100%; min-height: 3.1rem; font-size: 1rem; }
.free-setup-box { display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem 1.75rem; border-radius: var(--v-r-lg); background: linear-gradient(135deg, var(--v-bg-tint), #eef8ff); border: 1px solid rgba(20, 201, 117, 0.22); box-shadow: var(--v-sh-sm); }
.free-setup-box:hover { transform: none; }
.free-setup-box__features { display: flex; flex-wrap: wrap; gap: 0.6rem 1.25rem; margin-top: 0.75rem; font-size: 0.9rem; color: var(--v-ink-2); }
.free-setup-box__cta small { display: block; margin-top: 0.5rem; color: var(--v-ink-4); font-size: 0.8rem; text-align: center; }

/* 12. SEO templates (243 pages) ------------------------------------------- */
.seo-hero { text-align: center; }
.seo-hero h1 { margin-bottom: 0.9rem; }
.seo-subtitle { margin: 0 auto 1.5rem; }
.answer-block {
    max-width: 780px; margin: 1.75rem auto 0; padding: 1.4rem 1.6rem; text-align: left;
    background: var(--v-surface); border: 1px solid var(--v-line); border-left: 4px solid var(--v-primary); border-radius: var(--v-r-md);
    box-shadow: var(--v-sh-md);
}
.answer-block .answer-summary { margin: 0; color: var(--v-ink-2); font-size: 1.0625rem; line-height: 1.7; }
.seo-updated { text-align: center; color: var(--v-ink-4); font-size: 0.85rem; margin-top: 0.9rem; }
.seo-content-section { padding: var(--v-section-y) 0; }
.seo-content-section .container { max-width: 860px; }
.seo-content-section h2 { margin-bottom: 1.25rem; padding-left: 1rem; border-left: 4px solid var(--v-primary); line-height: 1.2; }
.seo-content-section .section-body { font-size: 1.0625rem; color: var(--v-ink-2); line-height: 1.75; }
.seo-content-section .section-body p { margin-bottom: 1.1rem; }
.seo-content-section .section-body ul, .seo-content-section .section-body ol { margin: 0 0 1.25rem 1.25rem; }
.seo-content-section .section-body li { margin-bottom: 0.5rem; }
.seo-content-section .section-body li::marker { color: var(--v-primary-600); font-weight: 700; }
.seo-content-section .section-body strong { color: var(--v-ink); font-weight: 650; }
.seo-content-section .section-body table { margin: 1.25rem 0 1.75rem; }
.bestof-grid, .alternatives-grid, .steps-list, .steps-grid, .pain-points-grid, .use-cases-grid { gap: 1.25rem; }
.bestof-card.top-pick, .alternative-card.highlighted { border-color: transparent; background: linear-gradient(var(--v-surface), var(--v-surface)) padding-box, var(--v-gradient) border-box; border: 2px solid transparent; box-shadow: var(--v-sh-md); }
.top-pick-badge, .bestof-rank, .alt-rank { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem; border-radius: var(--v-r-pill); font-size: 0.75rem; font-weight: 800; background: var(--v-bg-soft); color: var(--v-ink-3); margin-bottom: 0.75rem; }
.top-pick-badge { background: var(--v-gradient); color: #fff; box-shadow: var(--v-sh-glow); }
.bestof-note, .alt-advantage { margin-top: 0.9rem; padding: 0.75rem 0.9rem; border-radius: var(--v-r-sm); background: var(--v-bg-tint); border: 1px solid rgba(20, 201, 117, 0.18); font-size: 0.9rem; color: var(--v-ink-2); }
.step-card.step-numbered { text-align: left; display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; align-items: start; }
.step-card.step-numbered .step-number { grid-row: 1 / span 2; width: 2.75rem; height: 2.75rem; border-radius: var(--v-r-md); font-size: 0.8rem; padding: 0 0.5rem; white-space: nowrap; }
.step-card.step-numbered h3 { margin: 0.2rem 0 0; font-size: 1.1rem; }
.step-card.step-numbered p { margin: 0; color: var(--v-ink-3); }
.seo-related-section { background: var(--v-bg-soft); }
.related-links a { font-weight: 600; color: var(--v-ink); }
.related-links a:hover { color: var(--v-primary-700); }
.related-desc { display: block; color: var(--v-ink-4); font-size: 0.875rem; margin-top: 0.15rem; }
.cta-box { max-width: 720px; margin: 0 auto; text-align: center; }

/* Stacked mini-features inside a card: one icon colour, no per-item rainbow. */
.stack-item > i { color: var(--v-primary-600); }
.stack-item strong { color: var(--v-ink); }
.stack-item span { color: var(--v-ink-3); }

/* Dark accent card (contact tips): keeps its navy ground and light text under the unified card rules. */
.contact-card--dark { background: linear-gradient(135deg, #0b1220, #14223d); border-color: transparent; color: rgba(255, 255, 255, 0.86); }
.contact-card--dark h3, .contact-card--dark strong { color: #fff; }
.contact-card--dark .feature-points li { color: rgba(255, 255, 255, 0.86); }
.contact-card--dark .feature-points li i { color: var(--v-primary); }
.contact-card--dark p { color: rgba(255, 255, 255, 0.72); }

/* Home hero: gradient accent, proof list with hairline dividers, platform icon strip. */
.hero-accent { background: var(--v-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-proof { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0; margin: 1.35rem 0 0; padding: 0; font-size: 0.925rem; font-weight: 600; color: var(--v-ink-2); }
.hero-proof li { display: inline-flex; align-items: center; gap: 0.45rem; }
.hero-proof li i { color: var(--v-primary); font-size: 1rem; }
.hero-proof li + li { margin-left: 1.1rem; padding-left: 1.1rem; border-left: 1px solid var(--v-line-strong); }
.hero-platforms { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; margin-top: 1.75rem; padding-top: 1.4rem; border-top: 1px solid var(--v-line); }
.hero-platforms__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--v-ink-4); }
.hero-platforms__list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin: 0; padding: 0; }
.hero-platforms__list a {
    display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem;
    border-radius: var(--v-r-sm); background: var(--v-surface); border: 1px solid var(--v-line); box-shadow: var(--v-sh-sm);
    transition: transform var(--v-dur) var(--v-ease), border-color var(--v-dur) var(--v-ease), box-shadow var(--v-dur) var(--v-ease);
}
.hero-platforms__list a:hover { transform: translateY(-2px); border-color: rgba(20, 201, 117, 0.45); box-shadow: var(--v-sh-md); }
.hero-platforms__list img { width: 22px; height: 22px; object-fit: contain; }
.hero-platforms__more a { width: auto; padding: 0 0.8rem; font-size: 0.8rem; font-weight: 700; color: var(--v-primary-700); text-decoration: none; }

/* Hero chat mock: one typographic spec (mirrors the real widget header). */
.hero-chat-header { padding: 12px 14px; gap: 12px; }
.hero-chat-header-left { gap: 10px; min-width: 0; }
.hero-chat-header-left img { width: 38px; height: 38px; border-width: 2px; flex: none; }
.hero-chat-header-left .name { font-family: var(--v-font-body); font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0; margin: 0 0 2px; }
.hero-chat-header-left small { display: block; font-size: 12px; line-height: 1.25; opacity: 0.92; }
.hero-chat-header-icons { gap: 4px; font-size: 15px; opacity: 1; }
.hero-chat-header-icons i { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; opacity: 0.9; transition: background-color var(--v-dur) var(--v-ease); }
.hero-chat-header-icons i:hover { background: rgba(255, 255, 255, 0.16); opacity: 1; }
.hero-chat-messages { padding: 14px; }
.hero-chat-bubble { font-family: var(--v-font-body); font-size: 14px; line-height: 1.5; padding: 10px 14px; border-radius: 14px; max-width: 78%; }
.hero-chat-input-area { padding: 10px 12px; border-top-color: var(--v-line); }

/* Dark "train on your content" band: glass tiles with brand icon chips instead of flat rows. */
.eyebrow--dark, .language-section .eyebrow { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: rgba(255, 255, 255, 0.18); }
.language-section .eyebrow { margin-bottom: 1.1rem; }
.language-section h2 { color: #fff; margin-bottom: 1rem; }
.language-section__left > p { color: rgba(255, 255, 255, 0.76); margin: 0; }
.source-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.25rem 0 0; padding: 0; }
.source-chips li { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; padding: 0.35rem 0.7rem; border-radius: var(--v-r-pill); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.92); }
.language-section__link { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.5rem; color: var(--v-primary); font-weight: 700; text-decoration: none; }
.language-section__link:hover { color: #fff; }
.language-section__link i { font-size: 0.8em; transition: transform var(--v-dur) var(--v-ease); }
.language-section__link:hover i { transform: translateX(3px); }
.language-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.language-list li {
    display: flex; gap: 0.9rem; align-items: flex-start; margin: 0; padding: 1.15rem 1.2rem; border-radius: var(--v-r-lg);
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; font-size: 1rem;
    transition: transform var(--v-dur) var(--v-ease), border-color var(--v-dur) var(--v-ease), background-color var(--v-dur) var(--v-ease);
}
.language-list li:hover { transform: translateY(-3px); border-color: rgba(20, 201, 117, 0.5); background: rgba(255, 255, 255, 0.09); }
.language-list__icon { flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--v-r-md); display: inline-flex; align-items: center; justify-content: center; background: var(--v-gradient); color: #fff; font-size: 1rem; box-shadow: var(--v-sh-glow); }
.language-list li strong { display: block; font-family: var(--v-font-head); font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 0.2rem; }
.language-list li div > span { display: block; font-size: 0.9rem; color: rgba(255, 255, 255, 0.72); line-height: 1.5; }
@media (max-width: 640px) { .language-list { grid-template-columns: 1fr; } }

/* 12a. Blog cards ---------------------------------------------------------- */
.blog-card-modern { background: var(--v-surface); border: 1px solid var(--v-line); border-radius: var(--v-r-lg); box-shadow: var(--v-sh-sm); overflow: hidden; transition: transform var(--v-dur) var(--v-ease), box-shadow var(--v-dur) var(--v-ease), border-color var(--v-dur) var(--v-ease); }
.blog-card-modern:hover { transform: translateY(-4px); box-shadow: var(--v-sh-md); border-color: rgba(20, 201, 117, 0.35); }
.blog-card-modern__image-placeholder { background: var(--v-gradient); color: #fff; }
.blog-card-modern__read-more { color: var(--v-primary-700); font-weight: 600; }
.blog-card-modern__read-more:hover { color: var(--v-primary-600); }
.blog-card-modern h3 a, .blog-related__title { color: var(--v-ink); }
.blog-card-modern h3 a:hover { color: var(--v-primary-700); }

/* 12b. Wide tables that were overflowing the phone viewport ---------------- */
/* vatdi-ui.js wraps every content table in .v-table-scroll; the wrapper scrolls, the page never does. */
.v-table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; border-radius: var(--v-r-md); contain: paint; }
.v-table-scroll > table { margin: 0; }
.plan-feature-table, .docs-table { width: 100%; }
.plan-feature-table thead th { position: sticky; top: 0; z-index: 1; }
.plan-feature-table .pf-group td, .plan-feature-table tr.pf-group th { background: var(--v-bg-tint); color: var(--v-primary-700); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 900px) {
    .plan-feature-table { min-width: 40rem; }
    .plan-feature-table thead th { position: static; }
}

/* 12c. Home hero mockup: brand colours instead of a generic blue ---------- */
.hero-chat-header { background: var(--v-gradient); }
.hero-chat-user-msg { background: var(--v-primary-600); }
.hero-chat-send-btn { background: var(--v-gradient); box-shadow: var(--v-sh-glow); }
.hero-chat-box { border-radius: var(--v-r-xl); box-shadow: var(--v-sh-lg); border: 1px solid var(--v-line); }

/* 13. Motion --------------------------------------------------------------- */
.v-reveal { opacity: 0; transform: translateY(16px); transition: opacity 560ms var(--v-ease), transform 560ms var(--v-ease); transition-delay: calc(var(--i, 0) * 70ms); will-change: opacity, transform; }
.v-reveal.in-view { opacity: 1; transform: none; }
.v-reveal.in-view:hover { transition-delay: 0ms; }
@media print { .v-reveal { opacity: 1; transform: none; transition: none; } }

/* 14. Mobile --------------------------------------------------------------- */
@media (max-width: 1024px) {
    .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pricing-card.popular { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
    body { font-size: 1rem; }
    :root { --v-section-y: clamp(2.75rem, 9vw, 4rem); }
    .pricing-grid { grid-template-columns: 1fr; gap: 1.25rem; }
    .pricing-card { padding: 1.5rem 1.25rem 1.25rem; }
    .pricing-card > h3 { padding-right: 0; }
    .pricing-card .label { position: static; margin-bottom: 0.75rem; align-self: flex-start; order: 0; }
    .free-setup-box { flex-direction: column; align-items: flex-start; text-align: left; gap: 1rem; }
    .free-setup-box__cta { width: 100%; }
    .free-setup-box__cta .btn-primary { width: 100%; }
    .hero-actions, .cta-buttons, .steps-cta, .seo-hero-cta { flex-direction: column; align-items: stretch; }
    .hero-actions .btn-primary, .hero-actions .btn-link, .hero-actions .btn-secondary, .cta-buttons .btn-primary, .cta-buttons .btn-secondary, .cta-buttons .btn-link, .seo-hero-cta .btn-primary, .seo-hero-cta .btn-secondary { width: 100%; }
    /* Home page: the three heaviest card sections become swipe rows with the next card peeking. */
    #pricing .pricing-grid, #blogs .blog-grid, #resources .feature-grid--6 {
        display: flex; gap: 0.9rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
        margin: 0 calc(-1 * var(--v-container-x, 1.25rem)); padding: 0.35rem var(--v-container-x, 1.25rem) 1rem; scrollbar-width: none; overscroll-behavior-x: contain;
    }
    #pricing .pricing-grid::-webkit-scrollbar, #blogs .blog-grid::-webkit-scrollbar, #resources .feature-grid--6::-webkit-scrollbar { display: none; }
    #pricing .pricing-card, #blogs .blog-card, #resources .feature-grid--6 > .feature-card { flex: 0 0 84%; max-width: 84%; scroll-snap-align: center; }
    #pricing .pricing-card.popular { order: -1; }
    /* Docs: header and content column must never be wider than the phone. */
    .docs-header-container { max-width: 100%; flex-wrap: wrap; gap: 0.5rem; }
    .docs-layout > * , .docs-content, .doc-section { min-width: 0; max-width: 100%; }
    /* Footer link groups collapse into an accordion so nine columns don't become a 2,000px scroll. */
    .footer-links-grid { grid-template-columns: 1fr; gap: 0; }
    .footer-links-col { border-top: 1px solid rgba(255, 255, 255, 0.08); }
    .footer-links-col h4 { position: relative; cursor: pointer; margin: 0; padding: 0.95rem 2rem 0.95rem 0; user-select: none; }
    .footer-links-col h4::after {
        content: ''; position: absolute; right: 0.4rem; top: 50%; width: 0.5rem; height: 0.5rem;
        border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
        transform: translateY(-70%) rotate(45deg); transition: transform var(--v-dur) var(--v-ease);
    }
    .footer-links-col.is-open h4::after { transform: translateY(-30%) rotate(-135deg); }
    .footer-links-col > a { display: none; }
    .footer-links-col.is-open > a { display: block; padding: 0.45rem 0; }
    .footer-links-col.is-open { padding-bottom: 0.75rem; }
    .plan-shared { grid-template-columns: 1fr; padding: 1.5rem; gap: 1.25rem; margin-top: 2rem; }
    .plan-shared__list { grid-template-columns: 1fr; }
    .footer-bottom .footer-container { flex-direction: column; gap: 0.75rem; text-align: center; }
    .footer-legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1rem; }
    .section-body table, .blog-post-content table, .features-table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
    .comparison-table-wrapper { margin-left: calc(-1 * var(--v-container-x)); margin-right: calc(-1 * var(--v-container-x)); padding: 0 var(--v-container-x); border-radius: 0; }
    .step-card.step-numbered { grid-template-columns: 1fr; }
    .step-card.step-numbered .step-number { grid-row: auto; }
    .pricing-toggle__option { padding: 0.5rem 1rem; }
    .dropdown-panel { box-shadow: none; border: 0; padding: 0; }
}
@media (max-width: 480px) {
}
/* Sticky header must never block the viewport on short phones. */
@media (max-height: 640px) { .site-header { position: relative; } }

/* 15. Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .v-reveal { opacity: 1; transform: none; transition: none; }
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}