/* =====================================================================
   Sayzio · Marketing animation utility CSS
   Loaded by public.layouts.site and home.blade.php.
   Pair with /js/marketing-anim.js (IntersectionObserver).
   ===================================================================== */

/* ---------- Reveal-on-scroll base ---------- */
[data-anim] {
    opacity: 0;
    will-change: transform, opacity, filter;
    transition: opacity .9s cubic-bezier(.2,.7,.2,1),
                transform .9s cubic-bezier(.2,.7,.2,1),
                filter .9s ease;
}
[data-anim="fade"]            { transform: none; }
[data-anim="fade-up"]         { transform: translateY(28px); }
[data-anim="fade-down"]       { transform: translateY(-28px); }
[data-anim="fade-left"]       { transform: translateX(28px); }
[data-anim="fade-right"]      { transform: translateX(-28px); }
[data-anim="zoom-in"]         { transform: scale(.92); }
[data-anim="zoom-out"]        { transform: scale(1.06); }
[data-anim="blur-in"]         { filter: blur(10px); transform: translateY(14px); }

[data-anim].in-view {
    opacity: 1;
    transform: none !important;
    filter: none !important;
}

/* Stagger children of any [data-stagger] ancestor */
[data-stagger] > *           { transition-delay: 0ms; }
[data-stagger] > *:nth-child(1) { transition-delay: 0ms; }
[data-stagger] > *:nth-child(2) { transition-delay: 80ms; }
[data-stagger] > *:nth-child(3) { transition-delay: 160ms; }
[data-stagger] > *:nth-child(4) { transition-delay: 240ms; }
[data-stagger] > *:nth-child(5) { transition-delay: 320ms; }
[data-stagger] > *:nth-child(6) { transition-delay: 400ms; }
[data-stagger] > *:nth-child(7) { transition-delay: 480ms; }
[data-stagger] > *:nth-child(8) { transition-delay: 560ms; }
[data-stagger] > *:nth-child(9) { transition-delay: 640ms; }
[data-stagger] > *:nth-child(10){ transition-delay: 720ms; }
[data-stagger] > *:nth-child(11){ transition-delay: 800ms; }
[data-stagger] > *:nth-child(12){ transition-delay: 880ms; }

/* ---------- Hero gradient mesh / blobs ---------- */
.mesh-bg {
    position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.mesh-bg::before,
.mesh-bg::after {
    content: ''; position: absolute; border-radius: 9999px;
    filter: blur(80px); opacity: .55;
    animation: blob-float 18s ease-in-out infinite;
}
.mesh-bg::before {
    width: 520px; height: 520px; top: -160px; left: -120px;
    background: radial-gradient(circle, #3d6bff 0%, transparent 70%);
}
.mesh-bg::after {
    width: 460px; height: 460px; bottom: -180px; right: -100px;
    background: radial-gradient(circle, #5c83ff 0%, transparent 70%);
    animation-delay: -9s;
}
@keyframes blob-float {
    0%, 100% { transform: translate(0,0) scale(1); }
    33%      { transform: translate(40px,-30px) scale(1.08); }
    66%      { transform: translate(-30px,20px) scale(.95); }
}

/* ---------- Subtle grid backdrop ---------- */
.grid-bg {
    background-image:
      linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 35%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 35%, transparent 80%);
}

/* ---------- Image cards (scroll parallax + frame) ---------- */
.img-frame {
    position: relative;
    border-radius: 1.25rem;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    box-shadow: 0 24px 70px -30px rgba(61,107,255,.45),
                0 8px 30px -8px rgba(0,0,0,.55);
    isolation: isolate;
}
.img-frame::after {
    content:''; position:absolute; inset:0;
    background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.45) 100%);
    pointer-events:none;
}
.img-frame img { display:block; width:100%; height:100%; object-fit:cover;
    transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.img-frame:hover img { transform: scale(1.04); }
.img-tilt {
    transform: perspective(1200px) rotateX(2deg) rotateY(-3deg);
    transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.img-tilt:hover { transform: perspective(1200px) rotateX(0deg) rotateY(0deg) translateY(-4px); }

/* ---------- Marquee (logo strip / endless scroll) ---------- */
.marquee {
    display:flex; gap:3rem; width:max-content;
    animation: marquee-scroll 28s linear infinite;
}
.marquee-mask { mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
                -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Animated gradient text + borders ---------- */
.grad-text {
    color: #90acff;
}
@keyframes grad-shift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.grad-border {
    position: relative;
    background: #11101c;
    border: 1px solid rgba(110,97,255,.40);
}

/* ---------- Floating tilt-on-mouse (Alpine pairs) ---------- */
.float-y { animation: floatY 6s ease-in-out infinite; }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- Pulse dot ---------- */
.pulse-dot { position: relative; }
.pulse-dot::before {
    content:''; position:absolute; inset:-4px; border-radius:9999px;
    background:currentColor; opacity:.5; animation: pulse-ring 1.8s ease-out infinite;
}
@keyframes pulse-ring { 0% { transform:scale(.6); opacity:.55; } 100% { transform:scale(2.2); opacity:0; } }

/* ---------- Bullet check tick draw ---------- */
.tick-anim path { stroke-dasharray: 24; stroke-dashoffset: 24;
    transition: stroke-dashoffset .6s cubic-bezier(.2,.7,.2,1) .15s; }
.in-view .tick-anim path,
[data-anim].in-view .tick-anim path { stroke-dashoffset: 0; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    [data-anim], [data-anim].in-view { opacity:1!important; transform:none!important; filter:none!important; transition:none!important; }
    .marquee, .float-y, .mesh-bg::before, .mesh-bg::after, .pulse-dot::before { animation: none !important; }
}

/* =====================================================================
   LIGHT MODE OVERRIDES (marketing pages)
   Activated by `html.light-mode` (toggled via theme button + Cmd/Ctrl+I).
   Goal: every marketing page is fully readable when light mode is on.
   Strategy: convert dark surfaces to white/light, dim white text to
   dark, but PRESERVE white text on saturated/gradient surfaces (so
   purple buttons keep white labels).
   ===================================================================== */

html.light-mode { color-scheme: light; }
html.light-mode body { background:#f8fafc !important; color:#111827 !important; }

/* ---- Page surfaces & nav ---- */
html.light-mode nav.bg-\[\#1e2330\]\/90 {
    background-color: rgba(255,255,255,0.92) !important;
    border-color: rgba(15,23,42,0.10) !important;
}
html.light-mode .bg-\[\#1e2330\],
html.light-mode .bg-\[\#11101c\],
html.light-mode .bg-\[\#161b26\],
html.light-mode .bg-\[\#0a0a14\],
html.light-mode .bg-\[\#14091f\],
html.light-mode .bg-\[\#1c0e2e\] {
    background-color: #ffffff !important;
}
html.light-mode footer.bg-\[\#161b26\] {
    background-color: #f9fafb !important;
}

/* ---- Floating glass navbar (public header) ---- */
.mkt-navbar-bar {
    width: 92%;
    margin: 0.85rem auto 0;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 1rem;
    background-color: rgba(30,35,48,0.45);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    box-shadow: 0 20px 45px -18px rgba(0,0,0,0.55),
                inset 0 1px 0 rgba(255,255,255,0.08);
    transition: width .35s ease, margin .35s ease, background-color .35s ease,
                border-radius .35s ease, border-color .35s ease, box-shadow .35s ease;
}
@media (min-width: 640px)  { .mkt-navbar-bar { width: 90%; } }
@media (min-width: 1024px) { .mkt-navbar-bar { width: 85%; } }
@media (min-width: 1280px) { .mkt-navbar-bar { width: 80%; } }

.mkt-navbar-bar.is-stuck {
    width: 100%;
    margin-top: 0;
    border-radius: 0;
    border-color: transparent;
    border-bottom-color: rgba(255,255,255,0.10);
    background-color: rgba(30,35,48,0.62);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    box-shadow: 0 12px 30px -20px rgba(0,0,0,0.6);
}

html.light-mode .mkt-navbar-bar {
    background-color: rgba(255,255,255,0.45);
    border-color: rgba(15,23,42,0.10);
    box-shadow: 0 20px 45px -18px rgba(15,23,42,0.18),
                inset 0 1px 0 rgba(255,255,255,0.55);
}
html.light-mode .mkt-navbar-bar.is-stuck {
    background-color: rgba(255,255,255,0.62);
    border-color: transparent;
    border-bottom-color: rgba(15,23,42,0.10);
    box-shadow: 0 12px 30px -20px rgba(15,23,42,0.16);
}

/* Graceful fallback where backdrop-filter is unsupported: lean on a more
   opaque background so the bar stays legible without the blur. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .mkt-navbar-bar { background-color: rgba(30,35,48,0.92); }
    .mkt-navbar-bar.is-stuck { background-color: rgba(30,35,48,0.96); }
    html.light-mode .mkt-navbar-bar { background-color: rgba(255,255,255,0.92); }
    html.light-mode .mkt-navbar-bar.is-stuck { background-color: rgba(255,255,255,0.96); }
}

@media (prefers-reduced-motion: reduce) {
    .mkt-navbar-bar { transition: none; }
}

/* ---- Auto-hiding header on scroll ----
   The whole <nav> slides off-screen while the visitor scrolls down and slides
   back the instant they scroll up (state driven by Alpine in the header
   partial). The extra 2rem + announcement-banner offset guarantees the bar and
   its drop shadow fully clear the viewport even in the floating-pill state.
   No will-change hint: a persistent transform containing-block on the nav
   would trap any fixed-position descendant (see the marketing header, whose
   mobile overlay is fixed), so the transform only exists while hidden. */
.mkt-nav-autohide {
    transition: transform .3s ease;
}
.mkt-nav-autohide.mkt-nav-hidden {
    transform: translateY(calc(-100% - var(--inme-anno-h, 0px) - 2rem));
}
/* While the mobile drawer is open the body scroll is locked via
   body{overflow:hidden} (x-effect in the header partial). That scroll lock
   breaks position:sticky — on a scrolled page the bar (and the drawer markup
   inside it) snaps back to its static position at the top of the DOCUMENT,
   i.e. off-viewport, taking the drawer's close button with it. Pin the bar to
   the VIEWPORT for the duration instead. The `mkt-nav-drawer-open` class is
   bound to `mobileOpen` in public/partials/header.blade.php; harmless on the
   already-fixed home variant. */
.mkt-nav-autohide.mkt-nav-drawer-open {
    position: fixed;
    top: var(--inme-anno-h, 0px);
    left: 0;
    right: 0;
}
@media (prefers-reduced-motion: reduce) {
    /* Still hide/show, just without the slide animation. */
    .mkt-nav-autohide { transition: none; }
}

/* ---- Anchor landing offset for the auto-hiding header ----
   The bar reappears on any upward scroll, so in-page anchor jumps (e.g. the
   home "Pricing" link -> #pricing) must reserve room for it or the returning
   bar covers the heading the visitor just jumped to. scroll-padding on the
   root applies to every anchor navigation: 5rem ≈ bar height + breathing
   room, plus the announcement-banner offset when one is showing. Pages with
   taller sticky chrome (features category bar, api-docs) already declare
   their own scroll-padding in page-level styles, which load after this file
   and win the tie. */
html {
    scroll-padding-top: calc(5rem + var(--inme-anno-h, 0px));
}

/* ---- Current-page ("you are here") state for the header Events pill ----
   The pill's idle look is set inline in the header partial, so the active
   state is a class that overrides it: a stronger fill + border, brighter
   label, and a soft outer ring. Light mode swaps the pale-blue label for the
   deep brand blue so it stays legible on the near-white bar. */
.mkt-events-pill-active {
    background: rgba(61,107,255,0.30) !important;
    border-color: rgba(61,107,255,0.85) !important;
    color: #dbe4ff !important;
    box-shadow: 0 0 0 3px rgba(61,107,255,0.18);
}
html.light-mode .mkt-events-pill-active {
    background: rgba(61,107,255,0.14) !important;
    border-color: rgba(61,107,255,0.60) !important;
    color: #1d4ed8 !important;
    box-shadow: 0 0 0 3px rgba(61,107,255,0.12);
}

/* ---- Account dropdown panel chrome ----
   The header account menu needs the same translucent/blur look as the navbar
   bar, but must NOT inherit the bar's responsive width/centering rules (those
   squash the narrow dropdown and wrap its label). Keep this decoupled so the
   Tailwind width (w-44), rounded corners, border and shadow on the panel apply
   cleanly. */
.mkt-acct-menu {
    background-color: rgba(30,35,48,0.75);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
}
html.light-mode .mkt-acct-menu {
    background-color: rgba(255,255,255,0.85);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .mkt-acct-menu { background-color: rgba(30,35,48,0.96); }
    html.light-mode .mkt-acct-menu { background-color: rgba(255,255,255,0.96); }
}

/* ---- Seamless top for the in-flow (sticky) marketing header ----
   On non-home marketing pages the header sticks in normal flow, so the floating
   bar's top margin used to expose a bare band of page background above it (the
   home page hides this because its FIXED header overlays the hero, which fills
   to the very top). To match the home page we pull the first content section up
   behind the sticky bar so its background reaches the top edge, then add back an
   equal amount of top padding so the hero content still clears the bar. Scoped
   to `.mkt-site-main` (only present on the sticky site layout) so the fixed
   home-page header is untouched. --mkt-nav-h ≈ the floating bar's occupied
   height: 0.85rem top margin + 4rem (h-16) bar + 2px borders. */
:root { --mkt-nav-h: calc(0.85rem + 4rem + 2px); }
.mkt-site-main { margin-top: calc(-1 * var(--mkt-nav-h)); }
.mkt-site-main > :first-child {
    padding-top: calc(var(--mkt-nav-h) + 3rem);
}
@media (min-width: 1024px) {
    .mkt-site-main > :first-child {
        padding-top: calc(var(--mkt-nav-h) + 5.5rem);
    }
}

/* ---- Translucent white surfaces become subtle dark tints ---- */
html.light-mode .bg-white\/5,
html.light-mode .bg-white\/10,
html.light-mode .bg-white\/20,
html.light-mode .bg-white\/\[0\.03\],
html.light-mode .bg-white\/\[0\.05\],
html.light-mode .bg-white\/\[0\.07\] {
    background-color: rgba(15,23,42,0.04) !important;
}
html.light-mode .hover\:bg-white\/5:hover,
html.light-mode .hover\:bg-white\/10:hover,
html.light-mode .hover\:bg-white\/\[0\.05\]:hover {
    background-color: rgba(15,23,42,0.07) !important;
}

/* ---- Borders ---- */
html.light-mode .border-white\/5,
html.light-mode .border-white\/10,
html.light-mode .border-white\/15,
html.light-mode .border-white\/20,
html.light-mode .border-white\/\[0\.07\] {
    border-color: rgba(15,23,42,0.12) !important;
}
html.light-mode .divide-white\/5 > * + *,
html.light-mode .divide-white\/10 > * + * {
    border-color: rgba(15,23,42,0.10) !important;
}

/* ---- Text: white & light grays become dark ---- */
html.light-mode .text-white,
html.light-mode .text-gray-100,
html.light-mode .text-gray-200,
html.light-mode .text-gray-300,
html.light-mode .text-slate-100,
html.light-mode .text-slate-200,
html.light-mode .text-slate-300 {
    color: #1f2937 !important;
}
html.light-mode .text-gray-400 { color: #4b5563 !important; }
html.light-mode .text-gray-500 { color: #6b7280 !important; }
html.light-mode .text-gray-600 { color: #4b5563 !important; }
/* Slate utilities mirror the gray scale (the lighter steps are the
   low-contrast offenders on the white light-mode background; slate-600+
   are already dark enough and live mostly inside always-white cards). */
html.light-mode .text-slate-400 { color: #4b5563 !important; }
html.light-mode .text-slate-500 { color: #6b7280 !important; }
html.light-mode .placeholder-gray-400::placeholder,
html.light-mode .placeholder-gray-500::placeholder,
html.light-mode .placeholder-slate-400::placeholder,
html.light-mode .placeholder-slate-500::placeholder { color: #9ca3af !important; }

/* Translucent white text variants (text-white/40, /60, /80) */
html.light-mode [class*="text-white/"] { color: rgba(15,23,42,0.55) !important; }

/* ---- Darken light accent text so it shows on white ----
   The whole 100..400 accent range washes out on the near-white light-mode
   surface (eyebrow badges, note boxes, status pills, inline icons). Darken
   each family to the same deep accent tones the signed-in dashboard uses
   (theme-styles.blade.php). Substring selectors also catch the `/NN` and
   `/[0.x]` opacity variants (e.g. text-emerald-400/40) that marketing pages
   use. Safe to darken: marketing accent text sits on soft same-hue tints,
   never on saturated/gradient fills (those use .text-white, preserved below).
   Always-dark islands (e.g. pricing .smart-banner) keep their own
   higher-specificity carve-outs so their accent text stays LIGHT. */
html.light-mode [class*="text-violet-100"],  html.light-mode [class*="text-violet-200"],  html.light-mode [class*="text-violet-300"],  html.light-mode [class*="text-violet-400"],
html.light-mode [class*="text-purple-100"],  html.light-mode [class*="text-purple-200"],  html.light-mode [class*="text-purple-300"],  html.light-mode [class*="text-purple-400"] { color: #2342c7 !important; }
html.light-mode [class*="text-fuchsia-100"], html.light-mode [class*="text-fuchsia-200"], html.light-mode [class*="text-fuchsia-300"], html.light-mode [class*="text-fuchsia-400"] { color: #a21caf !important; }
html.light-mode [class*="text-pink-100"],    html.light-mode [class*="text-pink-200"],    html.light-mode [class*="text-pink-300"],    html.light-mode [class*="text-pink-400"] { color: #be185d !important; }
html.light-mode [class*="text-rose-100"],    html.light-mode [class*="text-rose-200"],    html.light-mode [class*="text-rose-300"],    html.light-mode [class*="text-rose-400"] { color: #be123c !important; }
html.light-mode [class*="text-red-100"],     html.light-mode [class*="text-red-200"],     html.light-mode [class*="text-red-300"],     html.light-mode [class*="text-red-400"] { color: #b91c1c !important; }
html.light-mode [class*="text-emerald-100"], html.light-mode [class*="text-emerald-200"], html.light-mode [class*="text-emerald-300"], html.light-mode [class*="text-emerald-400"],
html.light-mode [class*="text-green-100"],   html.light-mode [class*="text-green-200"],   html.light-mode [class*="text-green-300"],   html.light-mode [class*="text-green-400"] { color: #047857 !important; }
html.light-mode [class*="text-teal-100"],    html.light-mode [class*="text-teal-200"],    html.light-mode [class*="text-teal-300"],    html.light-mode [class*="text-teal-400"] { color: #0f766e !important; }
html.light-mode [class*="text-amber-100"],   html.light-mode [class*="text-amber-200"],   html.light-mode [class*="text-amber-300"],   html.light-mode [class*="text-amber-400"],
html.light-mode [class*="text-yellow-100"],  html.light-mode [class*="text-yellow-200"],  html.light-mode [class*="text-yellow-300"],  html.light-mode [class*="text-yellow-400"] { color: #b45309 !important; }
html.light-mode [class*="text-orange-100"],  html.light-mode [class*="text-orange-200"],  html.light-mode [class*="text-orange-300"],  html.light-mode [class*="text-orange-400"] { color: #c2410c !important; }
html.light-mode [class*="text-sky-100"],     html.light-mode [class*="text-sky-200"],     html.light-mode [class*="text-sky-300"],     html.light-mode [class*="text-sky-400"] { color: #0369a1 !important; }
html.light-mode [class*="text-cyan-100"],    html.light-mode [class*="text-cyan-200"],    html.light-mode [class*="text-cyan-300"],    html.light-mode [class*="text-cyan-400"] { color: #0e7490 !important; }
html.light-mode [class*="text-blue-100"],    html.light-mode [class*="text-blue-200"],    html.light-mode [class*="text-blue-300"],    html.light-mode [class*="text-blue-400"] { color: #1d4ed8 !important; }
html.light-mode [class*="text-indigo-100"],  html.light-mode [class*="text-indigo-200"],  html.light-mode [class*="text-indigo-300"],  html.light-mode [class*="text-indigo-400"] { color: #4338ca !important; }

/* ---- Preserve white text on saturated/gradient surfaces ---- */
html.light-mode .bg-violet-500.text-white,
html.light-mode .bg-violet-600.text-white,
html.light-mode .bg-violet-700.text-white,
html.light-mode .bg-fuchsia-500.text-white,
html.light-mode .bg-fuchsia-600.text-white,
html.light-mode .bg-pink-500.text-white,
html.light-mode .bg-pink-600.text-white,
html.light-mode .bg-rose-600.text-white,
html.light-mode .bg-emerald-500.text-white,
html.light-mode .bg-emerald-600.text-white,
html.light-mode .bg-sky-500.text-white,
html.light-mode .bg-sky-600.text-white,
html.light-mode .bg-amber-500.text-white,
html.light-mode .bg-\[\#3d6bff\].text-white,
html.light-mode .bg-\[\#2342c7\].text-white,
html.light-mode [class*="bg-gradient"].text-white,
html.light-mode .bg-violet-600 .text-white,
html.light-mode .bg-violet-500 .text-white,
html.light-mode .bg-\[\#3d6bff\] .text-white,
html.light-mode [class*="bg-gradient"] .text-white {
    color: #ffffff !important;
}

/* Mega-menu Featured card heading: translucent gradient tint reads near-white
   in light mode, so the heading must darken instead of following the
   gradient-preserves-white rule above. Scoped to the heading only — the
   card's CTA button (bg-[#3d6bff] text-white) must stay white. */
html.light-mode .mega-featured-card .mega-featured-title.text-white {
    color: #1f2937 !important;
}

/* Hero phone screen has its own dark wallpaper (--phone-bg) — keep white text */
html.light-mode .hero-phone-screen,
html.light-mode .hero-phone-screen .text-white,
html.light-mode .hero-phone-screen [class*="text-white/"],
html.light-mode .hero-phone-content,
html.light-mode .hero-phone-content .text-white,
html.light-mode .hero-phone-content [class*="text-white/"],
html.light-mode .stack-card,
html.light-mode .stack-card .text-white,
html.light-mode .stack-card .card-title,
html.light-mode .stack-card .card-sub,
html.light-mode .stack-card .card-cta {
    color: #ffffff !important;
}
html.light-mode .stack-card .card-sub,
html.light-mode .stack-card .card-cta { color: rgba(255,255,255,0.75) !important; }

/* ---- prose-light (about + policy bodies) ---- */
html.light-mode .prose-light,
html.light-mode .prose-light p,
html.light-mode .prose-light ul,
html.light-mode .prose-light ol,
html.light-mode .prose-light li { color: #374151 !important; }
html.light-mode .prose-light strong,
html.light-mode .prose-light h3,
html.light-mode .prose-light h4 { color: #111827 !important; }
html.light-mode .prose-light blockquote { color: #4b5563 !important; border-color: rgba(61,107,255,0.45) !important; }
html.light-mode .prose-light code { background: rgba(15,23,42,0.08) !important; color: #1f2937 !important; }
html.light-mode .prose-light a { color: #2342c7 !important; }

/* ---- Mesh / aurora background blobs are softer in light mode ---- */
html.light-mode .mesh-bg::before,
html.light-mode .mesh-bg::after { opacity: 0.18 !important; }
html.light-mode .grid-bg {
    background-image:
      linear-gradient(rgba(15,23,42,.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(15,23,42,.06) 1px, transparent 1px) !important;
}
html.light-mode .aurora { opacity: 0.25 !important; }

/* ---- img-frame keeps a subtle border in light mode ---- */
html.light-mode .img-frame {
    border-color: rgba(15,23,42,0.10) !important;
    background: rgba(15,23,42,0.03) !important;
    box-shadow: 0 18px 50px -28px rgba(61,107,255,0.30),
                0 6px 20px -10px rgba(15,23,42,0.18) !important;
}
/* Theme-aware image scrim: the dark bottom fade becomes a LIGHT bottom fade
   in light mode so overlaid captions (darkened by the text remap above) stay
   legible over the artwork instead of sitting on a dark island. */
html.light-mode .img-frame::after { background: linear-gradient(180deg, transparent 55%, rgba(255,255,255,0.78) 100%) !important; }

/* ---- grad-text solid violet (light); grad-border container ---- */
html.light-mode .grad-text { color: #3d6bff; }
html.light-mode .grad-border {
    background: #ffffff !important;
    border-color: rgba(61,107,255,.35) !important;
}

/* ---- shadow-2xl shadow-black/40 (dropdowns) ---- */
html.light-mode .shadow-black\/40 {
    --tw-shadow-color: rgba(15,23,42,0.18) !important;
}

/* ---- Marketing theme toggle button (in header) ---- */
.mkt-theme-toggle {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: #e5e7eb;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.mkt-theme-toggle:hover { background: rgba(255,255,255,0.12); color: #fff; transform: translateY(-1px); }
html.light-mode .mkt-theme-toggle {
    background: rgba(15,23,42,0.05);
    border-color: rgba(15,23,42,0.12);
    color: #1f2937;
}
html.light-mode .mkt-theme-toggle:hover { background: rgba(15,23,42,0.08); color: #111827; }

/* ---- Reduced motion already handled above ---- */

/* =====================================================================
   "How we compare" competitor matrix
   ===================================================================== */
.cmp-wrap { position: relative; }

/* Highlighted Sayzio column on desktop matrix (absolute overlay band) */
.cmp-ours-band {
    position: absolute;
    top: 0; bottom: 0;
    pointer-events: none;
    border-radius: 1.25rem;
    background: rgba(61,107,255,0.12);
    box-shadow:
        0 0 0 1px rgba(144,172,255,0.35) inset,
        0 0 60px -10px rgba(144,172,255,0.55),
        0 0 80px -20px rgba(61,107,255,0.45);
    animation: cmp-glow 4.5s ease-in-out infinite;
    z-index: 0;
}
@keyframes cmp-glow {
    0%, 100% { box-shadow:
        0 0 0 1px rgba(144,172,255,0.35) inset,
        0 0 60px -10px rgba(144,172,255,0.55),
        0 0 80px -20px rgba(61,107,255,0.45); }
    50%      { box-shadow:
        0 0 0 1px rgba(61,107,255,0.45) inset,
        0 0 80px -10px rgba(61,107,255,0.65),
        0 0 110px -20px rgba(61,107,255,0.4); }
}
html.light-mode .cmp-ours-band {
    background: rgba(61,107,255,0.08);
    box-shadow:
        0 0 0 1px rgba(61,107,255,0.35) inset,
        0 0 50px -10px rgba(61,107,255,0.40),
        0 0 70px -20px rgba(61,107,255,0.30);
}

/* Header brand chip in the highlighted column */
.cmp-brand-ours {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .35rem .75rem; border-radius: 9999px;
    background: #3d6bff;
    color: #fff; font-weight: 700; letter-spacing: .02em;
    box-shadow: 0 6px 24px -6px rgba(61,107,255,.55);
}

/* Matrix rows: hover lift */
.cmp-row { position: relative; z-index: 1; transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.cmp-row:hover {
    background-color: rgba(255,255,255,.04);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px -16px rgba(144,172,255,.55);
}
html.light-mode .cmp-row:hover {
    background-color: rgba(15,23,42,.04);
    box-shadow: 0 8px 24px -16px rgba(61,107,255,.35);
}

/* Staggered row reveal inside the matrix (independent of [data-stagger] above) */
.cmp-stagger > .cmp-row { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.cmp-stagger.in-view > .cmp-row { opacity: 1; transform: none; }
.cmp-stagger.in-view > .cmp-row:nth-child(1)  { transition-delay:  60ms; }
.cmp-stagger.in-view > .cmp-row:nth-child(2)  { transition-delay: 120ms; }
.cmp-stagger.in-view > .cmp-row:nth-child(3)  { transition-delay: 180ms; }
.cmp-stagger.in-view > .cmp-row:nth-child(4)  { transition-delay: 240ms; }
.cmp-stagger.in-view > .cmp-row:nth-child(5)  { transition-delay: 300ms; }
.cmp-stagger.in-view > .cmp-row:nth-child(6)  { transition-delay: 360ms; }
.cmp-stagger.in-view > .cmp-row:nth-child(7)  { transition-delay: 420ms; }
.cmp-stagger.in-view > .cmp-row:nth-child(8)  { transition-delay: 480ms; }
.cmp-stagger.in-view > .cmp-row:nth-child(9)  { transition-delay: 540ms; }
.cmp-stagger.in-view > .cmp-row:nth-child(10) { transition-delay: 600ms; }
.cmp-stagger.in-view > .cmp-row:nth-child(11) { transition-delay: 660ms; }
.cmp-stagger.in-view > .cmp-row:nth-child(12) { transition-delay: 720ms; }

/* Animated cell marks */
.cmp-mark { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9999px; }
.cmp-mark-yes { background: rgba(16,185,129,.14); color: #34d399; }
.cmp-mark-yes-ours {
    width: 34px; height: 34px;
    background: linear-gradient(135deg, #34d399, #22d3ee);
    color: #0b1020;
    box-shadow: 0 8px 24px -8px rgba(34,211,238,.55);
}
.cmp-mark-no { background: rgba(148,163,184,.12); color: #94a3b8; }
html.light-mode .cmp-mark-yes { background: rgba(16,185,129,.18); color: #047857; }
html.light-mode .cmp-mark-no  { background: rgba(15,23,42,.06);  color: #64748b; }

/* SVG draw-in for checkmark / cross */
.cmp-draw path {
    stroke-dasharray: 28;
    stroke-dashoffset: 28;
    transition: stroke-dashoffset .65s cubic-bezier(.2,.7,.2,1) .15s;
}
.cmp-stagger.in-view .cmp-draw path { stroke-dashoffset: 0; }

/* Value badges row */
.cmp-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem .85rem; border-radius: 9999px;
    font-size: .72rem; font-weight: 700; letter-spacing: .02em;
    background: rgba(255,255,255,.05); color: #e5e7eb;
    border: 1px solid rgba(255,255,255,.10);
}
.cmp-badge-ours {
    background: rgba(61,107,255,.22);
    color: #fff;
    border-color: rgba(255,255,255,.18);
    box-shadow: 0 8px 22px -10px rgba(61,107,255,.55);
}
html.light-mode .cmp-badge {
    background: rgba(15,23,42,.05); color: #1f2937; border-color: rgba(15,23,42,.10);
}
html.light-mode .cmp-badge-ours {
    background: rgba(61,107,255,.12);
    color: #2342c7; border-color: rgba(61,107,255,.30);
}

/* Mobile competitor card */
.cmp-card {
    border-radius: 1.25rem;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    padding: 1.25rem;
    transition: transform .3s ease, box-shadow .3s ease;
}
.cmp-card:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -20px rgba(144,172,255,.45); }
.cmp-card-ours {
    background: #11101c;
    border: 1px solid rgba(110,97,255,.45);
    box-shadow: 0 0 60px -15px rgba(144,172,255,.55), 0 0 80px -25px rgba(61,107,255,.45);
    animation: cmp-glow 4.5s ease-in-out infinite;
}
html.light-mode .cmp-card {
    background: #ffffff;
    border-color: rgba(15,23,42,.10);
}
html.light-mode .cmp-card-ours {
    background: #ffffff;
    border-color: rgba(61,107,255,.40);
}

@media (prefers-reduced-motion: reduce) {
    .cmp-ours-band, .cmp-card-ours { animation: none !important; }
    .cmp-stagger > .cmp-row { opacity: 1 !important; transform: none !important; }
    .cmp-draw path { stroke-dashoffset: 0 !important; }
}

/* =====================================================================
   Compare v2: head-to-head tabs, counter, full N-tool matrix
   ===================================================================== */
[x-cloak] { display: none !important; }

/* Rival selector chips */
.cmp-tab {
    display: inline-flex; align-items: center;
    padding: .5rem .9rem; border-radius: 9999px;
    font-size: .8rem; font-weight: 600; letter-spacing: .01em;
    background: rgba(255,255,255,.04); color: #cbd5e1;
    border: 1px solid rgba(255,255,255,.08);
    transition: transform .2s ease, background-color .2s ease, color .2s ease, box-shadow .25s ease, border-color .2s ease;
    cursor: pointer;
}
.cmp-tab:hover { background: rgba(255,255,255,.07); color: #fff; transform: translateY(-1px); }
.cmp-tab-active {
    color: #fff;
    background: rgba(61,107,255,.45);
    border-color: rgba(255,255,255,.20);
    box-shadow: 0 10px 28px -12px rgba(61,107,255,.55);
}
html.light-mode .cmp-tab { background: rgba(15,23,42,.04); color: #334155; border-color: rgba(15,23,42,.08); }
html.light-mode .cmp-tab:hover { background: rgba(15,23,42,.08); color: #0f172a; }
html.light-mode .cmp-tab-active {
    color: #fff;
    background: #3d6bff;
    border-color: transparent;
}

/* Counter card */
.cmp-counter {
    background: rgba(255,255,255,.03);
    border-radius: 1rem;
}
html.light-mode .cmp-counter {
    background: #ffffff;
}
.cmp-pulse {
    width: 12px; height: 12px; border-radius: 9999px;
    background: linear-gradient(135deg, #34d399, #22d3ee);
    box-shadow: 0 0 0 0 rgba(52,211,153,.55);
    animation: cmp-pulse-anim 1.8s ease-in-out infinite;
}
@keyframes cmp-pulse-anim {
    0%   { box-shadow: 0 0 0 0 rgba(52,211,153,.55); }
    70%  { box-shadow: 0 0 0 12px rgba(52,211,153,0); }
    100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}

/* Group label rows */
.cmp-group-head {
    background: rgba(255,255,255,.025);
    color: #94a3b8;
}
html.light-mode .cmp-group-head { background: rgba(15,23,42,.025); color: #475569; }

/* Head-to-head card subtle inner glow */
.cmp-h2h-card {
    background: rgba(255,255,255,.015);
}

/* CTA pill */
.cmp-cta {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .7rem 1.1rem; border-radius: 9999px;
    font-size: .85rem; font-weight: 700; letter-spacing: .01em;
    color: #fff;
    background: linear-gradient(90deg, #3d6bff, #6e61ff);
    background-size: 200% 100%;
    box-shadow: 0 14px 40px -16px rgba(61,107,255,.55);
    transition: transform .2s ease, background-position .6s ease, box-shadow .25s ease;
    border: 0; cursor: pointer;
}
.cmp-cta:hover { transform: translateY(-1px); background-position: 100% 0; box-shadow: 0 18px 50px -16px rgba(144,172,255,.65); }

/* Full matrix grid (CSS grid version, scrolls horizontally on small screens) */
.cmp-matrix-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp-matrix {
    position: relative;
    display: grid;
    min-width: 720px;
}
.cmp-cell {
    padding: .85rem 1rem;
    border-top: 1px solid rgba(255,255,255,.05);
    font-size: .82rem;
    display: flex; align-items: center;
}
.cmp-cell.cmp-head {
    border-top: 0;
    background: rgba(255,255,255,.03);
    text-transform: uppercase; letter-spacing: .08em;
    font-size: .68rem; font-weight: 700; color: #94a3b8;
    justify-content: flex-start;
}
.cmp-cell.cmp-head.text-center { justify-content: center; }
.cmp-cell.cmp-row-cell { background: transparent; }
.cmp-cell.cmp-row-cell.text-center { justify-content: center; }
.cmp-cell.cmp-group-head {
    background: rgba(255,255,255,.025);
    color: #94a3b8;
    text-transform: uppercase; letter-spacing: .08em;
    font-size: .68rem; font-weight: 700;
    padding: .6rem 1rem;
}
html.light-mode .cmp-cell { border-top-color: rgba(15,23,42,.06); }
html.light-mode .cmp-cell.cmp-head { background: rgba(15,23,42,.04); color: #475569; }
html.light-mode .cmp-cell.cmp-group-head { background: rgba(15,23,42,.04); color: #475569; }

/* Sayzio column band over the grid (column index 2 of cmp-matrix) */
.cmp-ours-band-grid {
    grid-column: 2 / span 1;
    grid-row: 1 / -1;
    margin: 6px 4px;
    border-radius: 1rem;
}

@media (prefers-reduced-motion: reduce) {
    .cmp-pulse { animation: none !important; }
    .cmp-cta:hover { background-position: 0 0; }
}

/* =====================================================================
   Why Sayzio v2: animated card grid + SVG highlights + rotating chip
   ===================================================================== */
.why2-section { position: relative; }
.why2-bg-orb {
    position: absolute; width: 540px; height: 540px;
    pointer-events: none; opacity: .55;
    filter: blur(20px);
    animation: why2-float 14s ease-in-out infinite;
}
.why2-bg-orb-a { top: -120px; left: -120px; }
.why2-bg-orb-b { bottom: -160px; right: -140px; animation-delay: -7s; }
@keyframes why2-float {
    0%, 100% { transform: translate3d(0,0,0) scale(1); }
    50%      { transform: translate3d(20px,-30px,0) scale(1.06); }
}
html.light-mode .why2-bg-orb { opacity: .35; }

/* Animated underline draws in once on view */
.why2-underline {
    position: absolute;
    left: 0; right: 0; bottom: -10px;
    width: 100%; height: 16px;
    overflow: visible;
}
.why2-underline path {
    stroke-dasharray: 420;
    stroke-dashoffset: 420;
    transition: stroke-dashoffset 1.4s cubic-bezier(.2,.7,.2,1) .25s;
    filter: drop-shadow(0 4px 14px rgba(61,107,255,.45));
}
.why2-section [data-anim].in-view .why2-underline path,
.in-view .why2-underline path { stroke-dashoffset: 0; }

/* Rotating "vs" chip */
.why2-vs-pill {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .45rem .9rem; border-radius: 9999px;
    background: rgba(61,107,255,.16);
    border: 1px solid rgba(255,255,255,.14);
    color: #fff; font-weight: 700; letter-spacing: .01em;
    font-size: .82rem;
    box-shadow: 0 12px 30px -16px rgba(61,107,255,.45);
    min-width: 110px; justify-content: center;
}
.why2-vs-dot {
    width: 8px; height: 8px; border-radius: 9999px;
    background: linear-gradient(135deg, #34d399, #22d3ee);
    box-shadow: 0 0 0 0 rgba(52,211,153,.5);
    animation: why2-vs-pulse 1.6s ease-in-out infinite;
}
@keyframes why2-vs-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(52,211,153,.55); }
    70%  { box-shadow: 0 0 0 10px rgba(52,211,153,0); }
    100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}
.why2-vs-name {
    display: inline-block;
    animation: why2-vs-flip .35s ease;
}
@keyframes why2-vs-flip {
    0%   { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
}
html.light-mode .why2-vs-pill {
    background: rgba(61,107,255,.10);
    border-color: rgba(61,107,255,.25);
    color: #2342c7;
}

/* Card grid */
.why2-grid {
    display: grid; gap: 1rem;
    grid-template-columns: 1fr;
}
@media (min-width: 720px) {
    .why2-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
}

.why2-card {
    position: relative;
    border-radius: 1.25rem;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    padding: 1.4rem 1.4rem 1.25rem;
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    transition-delay: var(--why2-delay, 0ms);
}
.why2-card:hover {
    transform: translateY(-3px);
    border-color: rgba(144,172,255,.35);
    box-shadow: 0 22px 60px -28px rgba(144,172,255,.55);
}
html.light-mode .why2-card {
    background: #ffffff;
    border-color: rgba(15,23,42,.08);
    box-shadow: 0 4px 14px -8px rgba(15,23,42,.10);
}
html.light-mode .why2-card:hover {
    border-color: rgba(61,107,255,.35);
    box-shadow: 0 22px 50px -22px rgba(61,107,255,.30);
}

/* Animated gradient sweep behind the card on hover */
.why2-card-glow {
    position: absolute; inset: -2px;
    border-radius: inherit;
    background: rgba(61,107,255,.08);
    opacity: 0; transition: opacity .4s ease;
    pointer-events: none;
}
.why2-card:hover .why2-card-glow { opacity: 1; }

/* Number bubble */
.why2-num {
    position: relative;
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: .85rem;
    color: #fff; font-weight: 800; font-size: .82rem; letter-spacing: .04em;
}
.why2-num svg { position: absolute; inset: 0; }
.why2-num-ring {
    stroke-dasharray: 113;
    stroke-dashoffset: 113;
    transform-origin: 50% 50%;
    transition: stroke-dashoffset 1.1s cubic-bezier(.2,.7,.2,1) calc(.15s + var(--why2-delay, 0ms));
}
[data-anim].in-view .why2-num-ring,
.why2-card[data-anim].in-view .why2-num-ring { stroke-dashoffset: 0; }
html.light-mode .why2-num { color: #2342c7; }

.why2-card-title {
    font-size: 1.05rem; font-weight: 700; color: #f8fafc;
    margin-bottom: .9rem; letter-spacing: -.005em;
}
html.light-mode .why2-card-title { color: #0f172a; }

/* Per-row layout */
.why2-row {
    display: flex; align-items: flex-start; gap: .65rem;
    padding: .55rem 0;
    border-top: 1px dashed rgba(255,255,255,.06);
}
.why2-row:first-of-type { border-top: 0; padding-top: 0; }
html.light-mode .why2-row { border-top-color: rgba(15,23,42,.08); }
.why2-row-content { display: flex; flex-direction: column; gap: .25rem; min-width: 0; flex: 1; }
.why2-row-label {
    font-size: .68rem; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: #94a3b8;
}
.why2-row-ours .why2-row-label { color: #bccfff; }
html.light-mode .why2-row-ours .why2-row-label { color: #3d6bff; }

.why2-row-value { font-size: .92rem; color: #e5e7eb; font-weight: 600; }
.why2-row-value-them { color: #94a3b8; font-weight: 500; font-size: .82rem; }
html.light-mode .why2-row-value { color: #0f172a; }
html.light-mode .why2-row-value-them { color: #475569; }

/* Sayzio tick (animated check draw) */
.why2-tick {
    flex: 0 0 28px;
    width: 28px; height: 28px; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #34d399, #22d3ee);
    color: #0b1020;
    box-shadow: 0 10px 24px -10px rgba(34,211,238,.55);
}
.why2-tick-path {
    stroke-dasharray: 28; stroke-dashoffset: 28;
    transition: stroke-dashoffset .8s cubic-bezier(.2,.7,.2,1) calc(.4s + var(--why2-delay, 0ms));
}
.why2-card[data-anim].in-view .why2-tick-path { stroke-dashoffset: 0; }

/* Highlight sweep on the Yes/value pill */
.why2-hl {
    position: relative;
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: .5rem;
    color: #ecfeff;
    background: linear-gradient(90deg, rgba(52,211,153,.18), rgba(34,211,238,.18));
    border: 1px solid rgba(34,211,238,.30);
    overflow: hidden;
    isolation: isolate;
}
.why2-hl::after {
    content: '';
    position: absolute; top: 0; left: -120%;
    width: 80%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
    transform: skewX(-20deg);
    animation: why2-hl-sweep 3.6s ease-in-out infinite;
    z-index: -1;
}
@keyframes why2-hl-sweep {
    0%   { left: -120%; }
    55%  { left: 120%;  }
    100% { left: 120%;  }
}
html.light-mode .why2-hl { color: #047857; background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.35); }

/* Competitor row dash */
.why2-dash {
    flex: 0 0 28px;
    width: 28px; height: 28px; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(148,163,184,.12); color: #94a3b8;
}
html.light-mode .why2-dash { background: rgba(15,23,42,.06); color: #64748b; }

/* Rival chips */
.why2-rival-chips { display: inline-flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .15rem; }
.why2-chip {
    display: inline-flex; align-items: center;
    padding: .12rem .55rem; border-radius: 9999px;
    font-size: .68rem; font-weight: 700; letter-spacing: .02em;
    color: #cbd5e1; background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
}
.why2-chip-more { color: #94a3b8; background: transparent; border-style: dashed; }
html.light-mode .why2-chip { color: #475569; background: rgba(15,23,42,.04); border-color: rgba(15,23,42,.10); }

/* CTA pill */
.why2-cta {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .8rem 1.2rem; border-radius: 9999px;
    color: #fff; font-weight: 700; letter-spacing: .01em; font-size: .9rem;
    background: linear-gradient(90deg, #3d6bff, #6e61ff);
    background-size: 220% 100%;
    box-shadow: 0 18px 50px -16px rgba(61,107,255,.55);
    transition: transform .25s ease, background-position .7s ease, box-shadow .3s ease;
}
.why2-cta:hover { transform: translateY(-1px); background-position: 100% 0; box-shadow: 0 22px 60px -14px rgba(144,172,255,.65); }
.why2-cta-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 9999px;
    background: rgba(255,255,255,.18);
}

@media (prefers-reduced-motion: reduce) {
    .why2-bg-orb,
    .why2-vs-dot,
    .why2-hl::after { animation: none !important; }
    .why2-underline path,
    .why2-num-ring,
    .why2-tick-path { stroke-dashoffset: 0 !important; transition: none !important; }
    .why2-cta:hover { background-position: 0 0; }
}

/* =====================================================================
   Head-to-head VS hero — side-by-side brand cards above the matrix
   ===================================================================== */
.cmp-vs { position: relative; }
.cmp-vs-card {
    position: relative;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .25s ease, background .25s ease;
}
.cmp-vs-ours {
    background: rgba(61,107,255,.12);
    border-color: rgba(144,172,255,.35);
    box-shadow: 0 18px 48px -28px rgba(144,172,255,.55);
}
.cmp-vs-rival {
    background: rgba(255,255,255,.025);
}
.cmp-vs-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.18); }
.cmp-vs-name {
    font-size: 1.05rem; font-weight: 800; color: #fff;
    display: inline-flex; align-items: center; gap: .4rem;
}
.cmp-vs-ours .cmp-vs-name i { color: #90acff; }
.cmp-vs-tagline { font-size: .78rem; color: #94a3b8; margin-top: .2rem; }
.cmp-vs-meta { margin-top: .85rem; }
.cmp-vs-score {
    font-variant-numeric: tabular-nums;
    font-size: 1.6rem; font-weight: 800; line-height: 1;
}
.cmp-vs-score-total { font-size: .85rem; opacity: .65; margin-left: .15rem; font-weight: 600; }
.cmp-vs-bar {
    display: block; margin-top: .5rem;
    height: 6px; border-radius: 9999px;
    background: rgba(255,255,255,.06); overflow: hidden;
}
.cmp-vs-bar-fill {
    display: block; height: 100%;
    transition: width .8s cubic-bezier(.2,.7,.2,1);
    border-radius: 9999px;
}
.cmp-vs-bar-ours  { background: #3d6bff; }
.cmp-vs-bar-rival { background: #64748b; }

.cmp-vs-center {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .35rem; min-width: 70px;
}
.cmp-vs-badge {
    width: 56px; height: 56px; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: .82rem; letter-spacing: .08em; color: #fff;
    background: #3d6bff;
    box-shadow: 0 12px 36px -10px rgba(61,107,255,.6), inset 0 0 0 3px rgba(255,255,255,.08);
    position: relative;
    animation: cmpVsPulse 2.4s ease-in-out infinite;
}
.cmp-vs-badge::after {
    content: ""; position: absolute; inset: -8px; border-radius: 9999px;
    border: 1px dashed rgba(255,255,255,.18);
    animation: cmpVsSpin 14s linear infinite;
}
@keyframes cmpVsPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 12px 36px -10px rgba(61,107,255,.6), inset 0 0 0 3px rgba(255,255,255,.08); }
    50%      { transform: scale(1.06); box-shadow: 0 18px 44px -10px rgba(144,172,255,.7), inset 0 0 0 3px rgba(255,255,255,.14); }
}
@keyframes cmpVsSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.cmp-vs-wins {
    text-align: center; line-height: 1;
}
.cmp-vs-wins-num {
    display: block; font-weight: 900; font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
}
.cmp-vs-wins-label {
    font-size: .62rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: #94a3b8; margin-top: .15rem; display: block;
}

.cmp-vs-fade { transition: opacity .35s ease; }

@media (max-width: 640px) {
    .cmp-vs { grid-template-columns: 1fr !important; }
    .cmp-vs-center { order: 2; flex-direction: row; gap: .75rem; padding: .25rem 0; }
    .cmp-vs-card { order: 1; }
    .cmp-vs-rival { order: 3; }
}

@media (prefers-reduced-motion: reduce) {
    .cmp-vs-badge, .cmp-vs-badge::after { animation: none !important; }
    .cmp-vs-card:hover { transform: none !important; }
    .cmp-vs-bar-fill { transition: none !important; }
}