/* Base Styles & Smooth Scrolling */
        html { scroll-behavior: smooth; background-color: #05050A; color: white; }
        html { overflow-x: hidden; }
        body { overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
        /* Prevent pull-to-refresh on touch devices only — does not affect desktop mouse scroll */
        @media (pointer: coarse) {
            body { overscroll-behavior-y: contain; }
        }

        /* Custom Grid Background */
        .bg-grid {
            background-size: 40px 40px;
            background-image: 
                linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
            mask-image: linear-gradient(to bottom, transparent, black, transparent);
            -webkit-mask-image: linear-gradient(to bottom, transparent 5%, black 40%, black 80%, transparent 100%);
        }

        /* Nav Link Animated Underline */
        .nav-link { position: relative; padding-bottom: 4px; }
        .nav-link::after {
            content: ''; position: absolute; width: 0; height: 2px;
            bottom: 0; left: 50%; background-color: #3B82F6;
            transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
            transform: translateX(-50%);
            box-shadow: 0 0 10px rgba(59, 130, 246, 0.8);
            border-radius: 2px;
        }
        .nav-link:hover::after, .nav-link.active::after { width: 100%; }
        [data-page="vetra-os"].nav-link::after, [data-page="vetra-os"].mobile-nav-link::after {
            background: linear-gradient(90deg, #A855F7, #06B6D4);
            box-shadow: 0 0 10px rgba(168, 85, 247, 0.6);
        }

        .hiring-chip {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.45rem 0.88rem;
            border-radius: 999px;
            border: 1px solid rgba(255, 130, 0, 0.52);
            background: rgba(255, 130, 0, 0.14);
            color: #FF8200;
            font-size: 0.68rem;
            font-weight: 800;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            white-space: nowrap;
            cursor: pointer;
            box-shadow: 0 0 0 0 rgba(255, 130, 0, 0.34);
            transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
            animation: utk-hiring-pulse 1.7s ease-in-out infinite;
        }

        .hiring-chip:hover {
            transform: translateY(-1px);
            border-color: rgba(255, 130, 0, 0.72);
            background: rgba(255, 130, 0, 0.22);
            color: #FFB15C;
        }

        .hiring-chip.is-copied {
            animation: none;
            background: rgba(255, 130, 0, 0.26);
            color: #FFF2DF;
        }

        .hiring-chip.is-failed {
            animation: none;
            border-color: rgba(251, 146, 60, 0.38);
            background: rgba(124, 45, 18, 0.28);
            color: #FED7AA;
        }

        .hero-hiring-chip {
            margin-bottom: 1rem;
            font-size: 0.72rem;
            padding: 0.55rem 1rem;
        }

        @keyframes utk-hiring-pulse {
            0%, 100% {
                box-shadow: 0 0 0 0 rgba(255, 130, 0, 0.34);
            }
            55% {
                box-shadow: 0 0 0 10px rgba(255, 130, 0, 0);
                background: rgba(255, 130, 0, 0.22);
            }
        }

        /* 'Alive' Hero Text Animation */
        @keyframes breathe-float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-6px); }
        }
        @keyframes gradient-shift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        .animate-alive {
            display: inline-block;
            will-change: transform;
            animation: breathe-float 4s ease-in-out infinite;
        }
        .gradient-alive {
            background: linear-gradient(270deg, #60A5FA, #3B82F6, #8B5CF6, #60A5FA);
            background-size: 200% 200%;
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            will-change: background-position;
            animation: gradient-shift 6s ease infinite;
        }

        /* SPA Page Transitions */
        .page-view {
            display: none;
            opacity: 0;
            transition: opacity 0.3s ease;
            contain: layout style paint;
        }
        .page-view.active {
            display: block;
            opacity: 1;
        }

        /* background-position can't composite off main thread — use transform on a wider gradient instead */
        @keyframes page-gradient-flow {
            0%   { transform: translateX(0%); }
            50%  { transform: translateX(-25%); }
            100% { transform: translateX(0%); }
        }
        @keyframes page-aura-pulse {
            0%, 100% { opacity: 0.35; }
            50% { opacity: 0.55; }
        }
        @keyframes page-orb-drift {
            0% { transform: translate3d(-3%, 0, 0); }
            100% { transform: translate3d(3%, -2%, 0); }
        }
        .page-aura {
            position: relative;
            isolation: isolate;
        }
        .page-aura::before {
            content: "";
            position: absolute;
            inset: 0;
            /* 400% wide so translateX(-25%) pans across the full element */
            width: 400%;
            background: linear-gradient(90deg, rgba(59,130,246,0.08), rgba(14,165,233,0.06), rgba(139,92,246,0.08), rgba(59,130,246,0.08), rgba(14,165,233,0.06), rgba(59,130,246,0.08));
            will-change: transform, opacity;
            animation: page-gradient-flow 14s ease-in-out infinite, page-aura-pulse 9s ease-in-out infinite;
            pointer-events: none;
            z-index: 0;
            mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
            -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
        }
        .page-aura::after {
            content: "";
            position: absolute;
            inset: 6% -8% auto;
            height: 70%;
            background:
                radial-gradient(circle at 15% 50%, rgba(59,130,246,0.07), transparent 35%),
                radial-gradient(circle at 50% 50%, rgba(139,92,246,0.08), transparent 38%),
                radial-gradient(circle at 85% 50%, rgba(6,182,212,0.06), transparent 32%);
            filter: blur(90px);
            will-change: transform;
            animation: page-orb-drift 18s ease-in-out infinite alternate;
            pointer-events: none;
            z-index: 0;
            opacity: 0.6;
        }
        .page-aura > * {
            position: relative;
            z-index: 1;
        }

        /* Scroll Reveal Animations — fade only, no vertical movement */
        .reveal {
            opacity: 0;
            transition: opacity 0.5s ease;
        }
        .reveal.visible {
            opacity: 1;
        }

        /* Industry chooser cards — self-contained sizing + branding so a purged Tailwind
           build can never collapse or de-brand them. (h-48, border-*-500/25, bg-cyan-400,
           hover:-translate-y-1 were all purged out → cards rendered as an empty void, 2026-07-09.) */
        /* NOTE the `> *` selectors below. Two cards are plain onclick blocks and two are anchors,
           so the old `> div` rules silently applied to only half the grid — Cafés and Bars
           were getting their lift from a Tailwind utility instead, which is exactly the kind
           of thing a purge can strip. Everything structural now lives here and matches both. */
        #os-industry-grid > * {
            min-height: 13rem;
            transition: transform .45s cubic-bezier(.22,.7,.3,1),
                        box-shadow .45s ease,
                        border-color .45s ease;
        }
        #os-industry-grid > *:hover { transform: translateY(-6px); }

        /* Image layer. Lives on a child so it can scale WITHOUT scaling the text with it —
           zooming the card itself would drag the headline and CTA along and blur them. */
        #os-industry-grid .ind-bg {
            position: absolute; inset: 0;
            background-size: cover; background-position: center;
            transform: scale(1.02);          /* pre-scaled so the zoom has no visible edge seam */
            transition: transform 1.05s cubic-bezier(.22,.7,.3,1);
        }
        #os-industry-grid > *:hover .ind-bg { transform: scale(1.09); }

        /* Type. Sized here rather than via utilities so a purge can never shrink it back. */
        #os-industry-grid .ind-copy {
            transition: transform .45s cubic-bezier(.22,.7,.3,1);
        }
        #os-industry-grid > *:hover .ind-copy { transform: translateY(-5px); }
        #os-industry-grid .ind-copy h3 {
            font-size: 1.6rem; line-height: 1.12; letter-spacing: -0.02em; margin-bottom: 0.28rem;
        }
        #os-industry-grid .ind-copy p  { font-size: 0.985rem; line-height: 1.45; }
        #os-industry-grid .ind-cta     { font-size: 0.9rem; margin-top: 0.6rem; }
        /* Arrow leads the eye toward the click — the one motion that says "this goes somewhere". */
        #os-industry-grid .ind-cta i,
        #os-industry-grid .ind-cta svg { transition: transform .4s cubic-bezier(.22,.7,.3,1); }
        #os-industry-grid > *:hover .ind-cta i,
        #os-industry-grid > *:hover .ind-cta svg { transform: translateX(5px); }

        @media (max-width: 640px) {
            #os-industry-grid .ind-copy h3 { font-size: 1.4rem; }
            #os-industry-grid .ind-copy p  { font-size: 0.92rem; }
        }
        /* Motion is decoration here; the larger type is not. Keep the sizes, drop the movement. */
        @media (prefers-reduced-motion: reduce) {
            #os-industry-grid > *,
            #os-industry-grid .ind-bg,
            #os-industry-grid .ind-copy,
            #os-industry-grid .ind-cta i,
            #os-industry-grid .ind-cta svg { transition: none !important; }
            #os-industry-grid > *:hover { transform: none; }
            #os-industry-grid > *:hover .ind-bg { transform: scale(1.02); }
            #os-industry-grid > *:hover .ind-copy { transform: none; }
            #os-industry-grid > *:hover .ind-cta i,
            #os-industry-grid > *:hover .ind-cta svg { transform: none; }
        }

        #os-industry-grid > *:nth-child(1) { border-color: rgba(16,185,129,.28); }  /* Auto — emerald */
        #os-industry-grid > *:nth-child(2) { border-color: rgba(139,92,246,.28); }  /* Restaurants & cafes — purple */
        #os-industry-grid > *:nth-child(3) { border-color: rgba(245,158,11,.28); }  /* Bars — amber */
        #os-industry-grid > *:nth-child(4) { border-color: rgba(99,102,241,.28); }  /* Liquor — indigo */
        #os-industry-grid .animate-pulse { background: #22d3ee; }

        /* Staggered child reveal — transition-based so re-adding .visible is a no-op */
        .reveal-child {
            opacity: 0;
            transition: opacity 0.4s ease;
        }
        .reveal-stagger.visible .reveal-child {
            opacity: 1;
        }
        .reveal-stagger.visible .reveal-child:nth-child(1) { transition-delay: 0.05s; }
        .reveal-stagger.visible .reveal-child:nth-child(2) { transition-delay: 0.18s; }
        .reveal-stagger.visible .reveal-child:nth-child(3) { transition-delay: 0.31s; }

        /* Skip all reveal transitions during nav jumps */
        .skip-reveal .reveal,
        .skip-reveal .reveal-stagger,
        .skip-reveal .reveal-child {
            opacity: 1 !important;
            transition: none !important;
            transition-delay: 0s !important;
            animation: none !important;
        }

        /* Respect OS-level reduced motion preference */
        @media (prefers-reduced-motion: reduce) {
            .reveal, .reveal-stagger, .reveal-child {
                opacity: 1 !important;
                transition: none !important;
                transition-delay: 0s !important;
                animation: none !important;
            }
            .page-view {
                transition: none !important;
            }
        }

        /* Skip all reveal transitions during nav jumps */
        .skip-reveal .reveal,
        .skip-reveal .reveal-stagger,
        .skip-reveal .reveal-child {
            opacity: 1 !important;
            transition: none !important;
            animation: none !important;
        }

        /* Respect OS-level reduced motion preference */
        @media (prefers-reduced-motion: reduce) {
            .reveal, .reveal-stagger, .reveal-child {
                opacity: 1 !important;
                transition: none !important;
                animation: none !important;
            }
        }

        /* Advanced Mouse-Tracking Glow Cards */
        .glow-card {
            background-color: rgba(15, 17, 26, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.05);
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(12px);
            transition: border-color 0.3s ease, transform 0.3s ease;
        }
        .glow-card::before {
            content: "";
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: radial-gradient(
                800px circle at var(--mouse-x, 0) var(--mouse-y, 0), 
                rgba(59, 130, 246, 0.08),
                transparent 40%
            );
            z-index: 0;
            pointer-events: none;
            transition: background 0.3s ease;
        }
        .glow-card::after {
            content: "";
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: radial-gradient(
                400px circle at var(--mouse-x, 0) var(--mouse-y, 0), 
                rgba(59, 130, 246, 0.3),
                transparent 40%
            );
            z-index: -1;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .glow-card:hover::after { opacity: 1; }
        .glow-card:hover { 
            box-shadow: 0 0 40px rgba(59, 130, 246, 0.15); 
            border-color: rgba(255, 255, 255, 0.15); 
            transform: translateY(-2px); 
        }
        .glow-card > * { position: relative; z-index: 1; }

        @keyframes innovation-halo-spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .innovation-rotator {
            position: relative;
            border: 1px solid rgba(59, 130, 246, 0.25);
            border-radius: 20px;
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.65), rgba(15, 17, 26, 0.82));
            overflow: hidden;
        }
        @media (min-width: 768px) and (max-width: 1023px) {
            .innovation-item { padding: 24px; }
        }
        .innovation-rotator::before {
            content: "";
            position: absolute;
            width: 240px;
            height: 240px;
            top: -90px;
            right: -70px;
            border-radius: 9999px;
            border: 1px dashed rgba(96, 165, 250, 0.35);
            animation: innovation-halo-spin 16s linear infinite;
            will-change: transform;
            pointer-events: none;
        }
        @keyframes inno-exit {
            0%   { opacity: 1; transform: translateX(0)    scale(1); }
            100% { opacity: 0; transform: translateX(-28px) scale(0.96); }
        }
        @keyframes inno-enter {
            0%   { opacity: 0; transform: translateX(28px)  scale(0.96); }
            100% { opacity: 1; transform: translateX(0)    scale(1); }
        }
        .innovation-item {
            display: none;
            pointer-events: none;
            padding: 28px;
            padding-bottom: 56px;
            will-change: transform, opacity;
        }
        .innovation-item.active {
            display: block;
            pointer-events: auto;
        }
        @media (max-width: 767px) {
            .innovation-item { padding: 20px; padding-bottom: 52px; }
        }

        @keyframes pulse-green {
            0%   { transform: scale(1);   opacity: 0.5; }
            70%  { transform: scale(2.5); opacity: 0; }
            100% { transform: scale(2.5); opacity: 0; }
        }
        .status-dot {
            width: 8px; height: 8px;
            background-color: #10B981;
            border-radius: 50%;
            position: relative;
        }
        .status-dot::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background: rgba(16, 185, 129, 0.5);
            animation: pulse-green 2s infinite;
            will-change: transform, opacity;
        }

        /* STORY ROTATOR ENGINE */
        .story-rotator-wrapper {
            position: relative;
            border: 1px solid rgba(59, 130, 246, 0.25);
            border-radius: 1.5rem;
            background: linear-gradient(to bottom, rgba(15, 23, 42, 0.6), rgba(10, 12, 16, 0.9));
            box-shadow: inset 0 2px 20px rgba(255, 255, 255, 0.05), 0 30px 60px -15px rgba(0, 0, 0, 0.8);
            overflow: hidden;
            /* Grid stacking: all slides share one cell — zero layout reflow on switch */
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: 1fr;
        }
        .story-item {
            grid-column: 1;
            grid-row: 1;
            opacity: 0;
            transform: translateY(14px) scale(0.99);
            transition: opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1), transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
            pointer-events: none;
            display: flex;
            flex-direction: column;
            min-width: 0;
        }
        .story-item.active {
            opacity: 1;
            transform: translateY(0) scale(1);
            pointer-events: auto;
            z-index: 10;
        }
        .story-img-mask {
            width: 100%;
            aspect-ratio: 16 / 9;
            flex-shrink: 0;
            display: block;
            border-radius: 1.5rem 1.5rem 0 0;
            background: #060810;
            overflow: hidden;
            position: relative;
        }
        @media (max-width: 1023px) {
            .story-img-mask { aspect-ratio: 16 / 7; }
        }
        @media (max-width: 767px) {
            .story-img-mask { aspect-ratio: 4 / 3; }
        }
        /* Fake browser top bar for the images */
        .story-img-mask::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 28px;
            background: rgba(255, 255, 255, 0.04);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            z-index: 5;
        }
        .story-img-mask::after {
            content: '•••';
            position: absolute;
            top: -2px; left: 10px;
            font-size: 24px;
            letter-spacing: -2px;
            color: rgba(255, 255, 255, 0.2);
            z-index: 6;
        }
        .story-img-mask img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top center;
            padding-top: 28px;
            display: block;
            transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .story-item:hover .story-img-mask img {
            transform: scale(1.015);
        }

        /* WIDGET ISOLATION ENGINE: Hides global widgets when not on Platform page */
        body.hide-n8n-widget #vetra-widget-wrapper,
        body.hide-n8n-widget #n8n-chat-widget,
        body.hide-n8n-widget .n8n-chat,
        body.hide-n8n-widget iframe[src*="n8n"],
        body.hide-n8n-widget div[data-chat-widget] {
            display: none !important;
            opacity: 0 !important;
            pointer-events: none !important;
            visibility: hidden !important;
            z-index: -9999 !important;
        }

        @keyframes tier-selected-ring {
            0%   { transform: scale(1);    opacity: 0.6; }
            100% { transform: scale(1.05); opacity: 0; }
        }

        .pricing-tier-card.tier-selected {
            border-color: rgba(96, 165, 250, 0.85) !important;
            box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
            position: relative;
        }
        .pricing-tier-card.tier-selected::after {
            content: '';
            position: absolute;
            inset: -1px;
            border-radius: inherit;
            border: 1.5px solid rgba(96, 165, 250, 0.7);
            animation: tier-selected-ring 1.35s ease-in-out infinite;
            will-change: transform, opacity;
            pointer-events: none;
            z-index: 10;
        }

        @media (max-width: 767px) {
            .checkout-proof-metrics,
            .checkout-risk-strip {
                display: none;
            }

            .checkout-mobile-guide {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                margin: 0 0 14px;
                padding: 10px 12px;
                border: 1px solid rgba(59, 130, 246, 0.25);
                border-radius: 12px;
                background: linear-gradient(135deg, rgba(59, 130, 246, 0.16), rgba(6, 182, 212, 0.08));
                color: #bfdbfe;
                font-size: 12px;
                letter-spacing: 0.2px;
            }

            #checkout-tier-grid {
                display: flex;
                overflow-x: auto;
                overscroll-behavior-x: contain;
                scroll-snap-type: x mandatory;
                gap: 14px;
                padding: 2px 2px 10px;
                margin-bottom: 22px;
                scrollbar-width: none;
                -webkit-overflow-scrolling: touch;
            }

            #checkout-tier-grid::-webkit-scrollbar {
                display: none;
            }

            #checkout-tier-grid .pricing-tier-card {
                min-width: 86%;
                scroll-snap-align: start;
                padding: 20px;
            }

            #checkout-tier-grid .pricing-tier-card .tier-feature-list li:nth-child(n+4) {
                display: none;
            }

            #checkout-tier-grid .pricing-tier-card .tier-feature-list {
                font-size: 13px;
            }

            .checkout-mobile-spacer {
                height: 76px;
            }
        }
        @keyframes hw-gate-exit {
            0%   { transform: translateY(0);     opacity: 1; }
            100% { transform: translateY(-105%); opacity: 0; }
        }
        .hardware-gate-exiting {
            animation: hw-gate-exit 0.72s cubic-bezier(0.4, 0, 0.2, 1) forwards;
            pointer-events: none;
        }
        /* Transition the bg/text swap smoothly */
        body, nav, #page-vetra-os { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; }

        /* Light mode body context */
        body.os-light {
            background-color: #FAF9F6;
            color: #16130F;
        }
        body.os-light .bg-grid { display: none; }
        body.os-light .fixed.bg-blue-900\/10,
        body.os-light .fixed.bg-blue-600\/5 { display: none; }

        /* Nav — light */
        body.os-light nav {
            background-color: rgba(250, 249, 246, 0.92) !important;
            border-bottom-color: #E4DFD6 !important;
        }
        body.os-light nav .text-gray-400 { color: #5F5850 !important; }
        body.os-light nav .hover\:text-white:hover { color: #16130F !important; }
        body.os-light nav #mobile-menu {
            background-color: rgba(250, 249, 246, 0.98) !important;
            border-bottom-color: #E4DFD6 !important;
        }
        body.os-light nav #mobile-menu .text-gray-400,
        body.os-light nav #mobile-menu .hover\:text-white { color: #5F5850 !important; }
        body.os-light nav #mobile-menu .border-b { border-color: #E4DFD6 !important; }

        /* Logo border in light mode */
        body.os-light nav img.border { border-color: #E4DFD6 !important; }

        /* page-vetra-os light overrides */
        body.os-light #page-vetra-os { background: transparent !important; }
        body.os-light #page-vetra-os.page-aura::before,
        body.os-light #page-vetra-os.page-aura::after { display: none; }

        /* Hero eyebrow badge */
        body.os-light #page-vetra-os .border-purple-500\/30 {
            border-color: #E4DFD6 !important;
            background-color: rgba(139,92,246,0.06) !important;
        }
        body.os-light #page-vetra-os .text-purple-300 { color: #7C3AED !important; }

        /* H1 — ink */
        body.os-light #page-vetra-os h1.font-heading { color: #16130F !important; }
        /* Sub paragraph */
        body.os-light #page-vetra-os .text-gray-400 { color: #5F5850 !important; }
        body.os-light #page-vetra-os .text-gray-500 { color: #7A7168 !important; }

        /* "Choose your industry" nudge */
        body.os-light #page-vetra-os .text-gray-500 i { color: #5F5850; }

        /* Industry grid LIVE cards — Auto, Restaurants & cafes, Bars (all LIVE) */
        body.os-light #os-industry-grid > *:nth-child(1),
        body.os-light #os-industry-grid > *:nth-child(2),
        body.os-light #os-industry-grid > *:nth-child(3) {
            background-image: none !important;
            background-color: #FFFFFF !important;
        }

        /* Auto — emerald */
        body.os-light #os-industry-grid > *:nth-child(1) {
            border-color: rgba(29,158,117,0.35) !important;
            box-shadow: 0 2px 16px rgba(29,158,117,0.08);
        }
        body.os-light #os-industry-grid > *:nth-child(1):hover { box-shadow: 0 6px 24px rgba(29,158,117,0.14); }
        body.os-light #os-industry-grid > *:nth-child(1) .text-white,
        body.os-light #os-industry-grid > *:nth-child(1) .text-gray-100 { color: #16130F !important; }
        body.os-light #os-industry-grid > *:nth-child(1) .text-gray-300 { color: #5F5850 !important; }
        body.os-light #os-industry-grid > *:nth-child(1) .text-emerald-300 { color: #1D9E75 !important; }
        body.os-light #os-industry-grid > *:nth-child(1) .bg-emerald-500\/20 { background: rgba(29,158,117,0.12) !important; }
        body.os-light #os-industry-grid > *:nth-child(1) .border-emerald-500\/40 { border-color: rgba(29,158,117,0.4) !important; }
        body.os-light #os-industry-grid > *:nth-child(1) .bg-emerald-400 { background: #1D9E75 !important; }

        /* Restaurants & cafes — purple */
        body.os-light #os-industry-grid > *:nth-child(2) {
            border-color: rgba(139,92,246,0.35) !important;
            box-shadow: 0 2px 16px rgba(139,92,246,0.08);
        }
        body.os-light #os-industry-grid > *:nth-child(2):hover { box-shadow: 0 6px 24px rgba(139,92,246,0.14); }
        body.os-light #os-industry-grid > *:nth-child(2) .text-white,
        body.os-light #os-industry-grid > *:nth-child(2) .text-gray-100 { color: #16130F !important; }
        body.os-light #os-industry-grid > *:nth-child(2) .text-gray-300 { color: #5F5850 !important; }
        body.os-light #os-industry-grid > *:nth-child(2) .text-purple-300 { color: #7C3AED !important; }
        body.os-light #os-industry-grid > *:nth-child(2) .bg-purple-500\/20 { background: rgba(139,92,246,0.12) !important; }
        body.os-light #os-industry-grid > *:nth-child(2) .border-purple-500\/40 { border-color: rgba(139,92,246,0.4) !important; }
        body.os-light #os-industry-grid > *:nth-child(2) .bg-purple-400 { background: #7C3AED !important; }

        /* Bars — amber */
        body.os-light #os-industry-grid > *:nth-child(3) {
            border-color: rgba(245,158,11,0.35) !important;
            box-shadow: 0 2px 16px rgba(245,158,11,0.08);
        }
        body.os-light #os-industry-grid > *:nth-child(3):hover { box-shadow: 0 6px 24px rgba(245,158,11,0.14); }
        body.os-light #os-industry-grid > *:nth-child(3) .text-white,
        body.os-light #os-industry-grid > *:nth-child(3) .text-gray-100 { color: #16130F !important; }
        body.os-light #os-industry-grid > *:nth-child(3) .text-gray-300,
        body.os-light #os-industry-grid > *:nth-child(3) .text-gray-400 { color: #5F5850 !important; }
        body.os-light #os-industry-grid > *:nth-child(3) .text-amber-300,
        body.os-light #os-industry-grid > *:nth-child(3) .text-amber-400 { color: #B45309 !important; }
        body.os-light #os-industry-grid > *:nth-child(3) .bg-amber-500\/15 { background: rgba(245,158,11,0.12) !important; }
        body.os-light #os-industry-grid > *:nth-child(3) .border-amber-500\/30 { border-color: rgba(245,158,11,0.4) !important; }

        /* Liquor — BUILDING card: muted, recede */
        body.os-light #os-industry-grid > *:nth-child(4) {
            background-image: none !important;
            background-color: #FBFAF8 !important;
            border-color: #E4DFD6 !important;
            opacity: 0.72;
            box-shadow: none !important;
            filter: grayscale(0.25);
        }
        body.os-light #os-industry-grid > *:nth-child(4):hover {
            opacity: 0.88;
            transform: translateY(-2px) !important;
        }
        body.os-light #os-industry-grid > *:nth-child(4) .text-gray-100,
        body.os-light #os-industry-grid > *:nth-child(4) .text-white { color: #5F5850 !important; }
        body.os-light #os-industry-grid > *:nth-child(4) .text-gray-400,
        body.os-light #os-industry-grid > *:nth-child(4) .text-gray-300 { color: #A39A8E !important; }
        body.os-light #os-industry-grid > *:nth-child(4) .bg-white\/10 { background: rgba(22,19,15,0.06) !important; }
        body.os-light #os-industry-grid > *:nth-child(4) .border-white\/15 { border-color: rgba(22,19,15,0.12) !important; }

        /* Proof strip — light card */
        body.os-light #page-vetra-os .glow-card {
            background-color: #FFFFFF !important;
            border-color: #E4DFD6 !important;
            box-shadow: 0 1px 8px rgba(22,19,15,0.06) !important;
        }
        body.os-light #page-vetra-os .glow-card::before,
        body.os-light #page-vetra-os .glow-card::after { display: none; }
        body.os-light #page-vetra-os .glow-card:hover {
            box-shadow: 0 4px 16px rgba(22,19,15,0.1) !important;
            border-color: #C8C2B8 !important;
        }
        body.os-light #page-vetra-os .glow-card .text-white { color: #16130F !important; }
        body.os-light #page-vetra-os .glow-card .text-gray-500 { color: #7A7168 !important; }

        /* Proof strip icons — tinted in brand colours */
        body.os-light #page-vetra-os .bg-purple-500\/10 { background-color: rgba(139,92,246,0.07) !important; }
        body.os-light #page-vetra-os .border-purple-500\/20 { border-color: rgba(139,92,246,0.2) !important; }
        body.os-light #page-vetra-os .bg-blue-500\/10 { background-color: rgba(59,130,246,0.07) !important; }
        body.os-light #page-vetra-os .border-blue-500\/20 { border-color: rgba(59,130,246,0.2) !important; }
        body.os-light #page-vetra-os .bg-emerald-500\/10 { background-color: rgba(29,158,117,0.07) !important; }
        body.os-light #page-vetra-os .border-emerald-500\/20 { border-color: rgba(29,158,117,0.2) !important; }
        body.os-light #page-vetra-os .bg-cyan-500\/10 { background-color: rgba(6,182,212,0.07) !important; }
        body.os-light #page-vetra-os .border-cyan-500\/20 { border-color: rgba(6,182,212,0.2) !important; }

        /* Page main area bg fallback */
        body.os-light main { background-color: transparent; }
.hw-tab-btn { border: 1px solid rgba(255,255,255,0.08); color: #9ca3af; background: transparent; }
.hw-tab-btn:hover { background: rgba(255,255,255,0.05); color: #fff; }
.hw-tab-btn.active-hw-tab { background: rgba(59,130,246,0.15); border-color: rgba(59,130,246,0.4); color: #fff; box-shadow: 0 0 18px rgba(59,130,246,0.18); }
.hw-stack-btn.in-stack { background: rgba(59,130,246,0.2) !important; border-color: rgba(96,165,250,0.5) !important; color: #93c5fd !important; }
.hw-roi-bar { background: rgba(255,255,255,0.08); height: 4px; border-radius: 9999px; overflow: hidden; }
.hw-roi-fill { height: 4px; border-radius: 9999px; }

/* ============================================================
   OS Selector Module — row 2460 (2026-08-20)
   Stripe-grade design: bar light tokens, one accent, no multi-hue gradients
   ============================================================ */

/* Tab rail */
.os-tab-rail {
    display: inline-flex;
    gap: 2px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    padding: 4px;
    flex-wrap: wrap;
    justify-content: center;
}
@media (max-width: 640px) {
    .os-tab-rail { width: 100%; }
}

.os-tab {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 7px;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(255,255,255,0.55);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    white-space: nowrap;
    line-height: 1.3;
}
.os-tab:hover:not(.active) {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.8);
}
.os-tab.active {
    background: #635bff;
    border-color: #635bff;
    color: #fff;
    box-shadow: 0 2px 8px rgba(99,91,255,0.4);
}

.os-tab-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}
.os-badge-live {
    background: rgba(14,98,69,0.25);
    color: #4ade80;
    border: 1px solid rgba(74,222,128,0.3);
}
.os-tab.active .os-badge-live {
    background: rgba(14,98,69,0.4);
}
.os-badge-building {
    background: rgba(99,91,255,0.18);
    color: #a5b4fc;
    border: 1px solid rgba(165,180,252,0.3);
}
.os-tab.active .os-badge-building {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border-color: rgba(255,255,255,0.35);
}

/* Preview wrapper */
.os-preview-wrap {
    background: rgba(255,255,255,0.025);
}

/* Panels */
.os-panel {
    display: none;
    padding: 28px;
    animation: os-panel-in 0.25s ease;
}
.os-panel.active { display: block; }
@keyframes os-panel-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .os-panel { animation: none; }
}

/* Panel two-column grid */
.os-panel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
}
@media (max-width: 767px) {
    .os-panel-grid { grid-template-columns: 1fr; }
    .os-panel { padding: 18px; }
}

/* Demo column */
.os-demo-col { display: flex; flex-direction: column; gap: 12px; }
.os-demo-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(255,255,255,0.4);
}
.os-demo-note {
    font-size: 12px;
    color: rgba(255,255,255,0.35);
    font-style: italic;
    line-height: 1.5;
}

/* Transcript */
.os-transcript-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 16px;
    font-size: 13px;
    line-height: 1.5;
}
.os-msg { padding: 6px 10px; border-radius: 8px; max-width: 90%; }
.os-msg-caller {
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.75);
    align-self: flex-start;
}
.os-msg-agent {
    background: rgba(99,91,255,0.15);
    border: 1px solid rgba(99,91,255,0.25);
    color: rgba(255,255,255,0.88);
    align-self: flex-end;
}
.os-tool-call {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-family: 'Courier New', monospace;
    color: rgba(74,222,128,0.7);
    padding: 3px 8px;
    background: rgba(74,222,128,0.05);
    border-radius: 4px;
    border: 1px solid rgba(74,222,128,0.12);
    align-self: center;
}

/* Insight box (café panel) */
.os-insight-box {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.os-insight-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(255,255,255,0.03);
    font-size: 13px;
}
.os-insight-name { font-weight: 600; color: rgba(255,255,255,0.85); flex-shrink: 0; min-width: 70px; }
.os-insight-visits { flex: 1; color: rgba(255,255,255,0.45); font-size: 12px; }
.os-insight-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}
.os-tag-winback { background: rgba(251,191,36,0.15); color: #fbbf24; border: 1px solid rgba(251,191,36,0.2); }
.os-tag-active  { background: rgba(74,222,128,0.12); color: #4ade80; border: 1px solid rgba(74,222,128,0.2); }
.os-tag-vip     { background: rgba(99,91,255,0.15);  color: #a5b4fc; border: 1px solid rgba(99,91,255,0.25); }
.os-tag-new     { background: rgba(56,189,248,0.12); color: #7dd3fc; border: 1px solid rgba(56,189,248,0.2); }
.os-insight-note {
    font-size: 10px;
    text-align: center;
    color: rgba(255,255,255,0.3);
    letter-spacing: 0.03em;
    padding: 4px;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 2px;
}

/* Slip box (bar panel) */
.os-slip-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 14px;
    font-size: 12px;
}
.os-slip-raw-label, .os-slip-parsed-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.35);
    font-weight: 600;
    margin-bottom: 8px;
}
.os-slip-lines { display: flex; flex-direction: column; gap: 4px; }
.os-slip-line { color: rgba(255,255,255,0.55); }
.os-tip-line { color: rgba(251,191,36,0.6); font-size: 13px; }
.os-slip-muted { color: rgba(255,255,255,0.3); font-size: 11px; }
.os-slip-parsed { display: flex; flex-direction: column; gap: 4px; }
.os-slip-field { display: flex; justify-content: space-between; gap: 6px; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.os-field-key { color: rgba(255,255,255,0.35); }
.os-field-val { color: rgba(255,255,255,0.85); font-weight: 500; }
.os-tip-parsed { color: rgba(251,191,36,0.85); }
.os-slip-muted-field .os-field-val { color: rgba(255,255,255,0.4); }

/* CTA column */
.os-cta-col { display: flex; flex-direction: column; gap: 16px; }
.os-cta-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.os-cta-icon-wrap {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: rgba(99,91,255,0.15);
    border: 1px solid rgba(99,91,255,0.25);
    display: flex; align-items: center; justify-content: center;
    color: #635bff;
}
.os-icon-purple { background: rgba(139,92,246,0.15); border-color: rgba(139,92,246,0.25); color: #a78bfa; }
.os-icon-amber  { background: rgba(245,158,11,0.15);  border-color: rgba(245,158,11,0.25);  color: #fbbf24; }
.os-icon-indigo { background: rgba(99,102,241,0.15);  border-color: rgba(99,102,241,0.25);  color: #818cf8; }
.os-cta-headline { font-size: 15px; font-weight: 700; color: rgba(255,255,255,0.92); line-height: 1.35; }
.os-cta-body { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.6; }

.os-call-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    background: #635bff;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}
.os-call-btn:hover { background: #7c75ff; transform: translateY(-1px); }
.os-call-disclaimer { font-size: 11px; color: rgba(255,255,255,0.35); text-align: center; }

.os-learn-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: #635bff;
    text-decoration: none;
    transition: color 0.2s;
}
.os-learn-link:hover { color: #7c75ff; }
.os-link-amber  { color: #fbbf24; }
.os-link-amber:hover  { color: #fde68a; }
.os-link-indigo { color: #818cf8; }
.os-link-indigo:hover { color: #a5b4fc; }

.os-building-pill {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 5px;
    background: rgba(99,91,255,0.12);
    color: #a5b4fc;
    border: 1px solid rgba(99,91,255,0.25);
    align-self: flex-start;
}

/* Card color variants */
.os-card-amber { border-color: rgba(245,158,11,0.15); }
.os-card-indigo { border-color: rgba(99,102,241,0.15); }

/* Slip reader tip animation */
@keyframes os-tip-reveal {
    0%   { opacity: 0; }
    30%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { opacity: 0.6; }
}
.os-tip-anim { animation: os-tip-reveal 3s ease-in-out; }

/* Proof strip — unified accent for row 2460 */
#page-vetra-os .glow-card .bg-\[#635bff\]\/10 {
    background-color: rgba(99,91,255,0.1);
}

/* Mobile tab label truncation */
@media (max-width: 420px) {
    .os-tab-label { display: none; }
    .os-tab-badge { font-size: 10px; }
}
/* ============================================================
   END OS Selector Module
   ============================================================ */