/* ───────── Brand fonts ───────── */
        @font-face { font-family: 'MiSans'; src: url('../fonts/MiSans-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
        @font-face { font-family: 'MiSans'; src: url('../fonts/MiSans-Medium.woff2')  format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
        @font-face { font-family: 'MiSans'; src: url('../fonts/MiSans-Bold.woff2')    format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

        /* ───────── Tokens — clearly stepped surface scale ───────── */
        :root {
            --ink:         #060b24;   /* deeper near-black */
            --ink-2:       #14193b;
            --ink-soft:    #2a2f4a;
            --brand:       #4f46e5;   /* indigo */
            --brand-2:     #6366f1;
            --cyan:        #06b6d4;   /* cubes accent */
            --cyan-soft:   #67e8f9;
            --gold:        #f59e0b;   /* amber — warm spotlight */
            --gold-2:      #f97316;
            --gold-soft:   #fbbf24;
            /* Cool slate surface scale — each step ~6% lightness apart so sections actually read as distinct */
            --surface:     #eef2f7;   /* light slate — alternating section bg */
            --surface-2:   #dde5f0;   /* deeper slate */
            --surface-cool:#dbe7ff;   /* clearly visible blue tint */
            --surface-warm:#fff7e6;   /* warm cream for warmth contrast */
            --muted:       #475569;   /* cool slate text */
            --muted-2:     #64748b;
            --line:        #cbd5e1;   /* cool border, clearly visible on light slate */
            --line-2:      #94a3b8;
        }

        /* ───────── Foundation ───────── */
        html {
            scroll-behavior: smooth;
            scroll-padding-top: 5rem;
            -webkit-text-size-adjust: 100%;
        }
        body {
            font-family: 'MiSans', system-ui, -apple-system, 'Segoe UI', sans-serif;
            color: var(--ink);
            background: var(--surface);
            overflow-x: hidden;
            overscroll-behavior-y: contain;
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        body.no-scroll { overflow: hidden; }
        img, svg { display: block; max-width: 100%; height: auto; }

        /* ───────── Type ───────── */
        .display    { font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; }
        .display-sm { font-size: clamp(1.375rem, 1.2vw + 0.75rem, 1.75rem); }
        .display-md { font-size: clamp(1.75rem,  2vw + 0.75rem,   2.5rem);   line-height: 1.1; }
        .display-lg { font-size: clamp(1.875rem, 2.2vw + 0.8rem,  2.875rem); line-height: 1.12; }
        .display-xl { font-size: clamp(2.5rem,   3.5vw + 1rem,    4rem);     line-height: 1.05; }

        .text-ink    { color: var(--ink); }
        .text-muted  { color: var(--muted); }
        .text-brand  { color: var(--brand); }

        /* Strong premium gradient text + animated gold underline */
        .grad-text {
            background: linear-gradient(135deg, var(--brand) 0%, var(--cyan) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            padding-bottom: 0.05em;
            display: inline-block;
            position: relative;
        }
        .grad-text::after {
            content: '';
            position: absolute;
            left: 0; right: 0; bottom: -0.05em;
            height: 4px;
            background: linear-gradient(90deg, var(--gold) 0%, var(--gold-2) 100%);
            border-radius: 2px;
            transform-origin: left;
            transform: scaleX(0);
            animation: gold-underline 1s cubic-bezier(0.22, 1, 0.36, 1) 1.2s forwards;
        }
        @keyframes gold-underline { to { transform: scaleX(1); } }

        /* ───────── Nav ───────── */
        #site-nav {
            transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
            background: rgba(255, 255, 255, 0.78);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid transparent;
        }
        #site-nav.scrolled {
            background: rgba(255, 255, 255, 0.96);
            border-bottom-color: var(--line);
            box-shadow: 0 8px 24px -16px rgba(10, 14, 39, 0.12);
        }
        .nav-link {
            position: relative;
            color: var(--ink);
            text-decoration: none;
            transition: color 0.2s ease;
            padding: 0.25rem 0;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            left: 0; right: 0; bottom: -0.25rem;
            height: 2px;
            background: linear-gradient(90deg, var(--brand), var(--cyan));
            border-radius: 1px;
            transform-origin: left;
            transform: scaleX(0);
            transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .nav-link:hover { color: var(--brand); }
        .nav-link:hover::after { transform: scaleX(1); }

        /* ───────── Hero ───────── */
        .hero {
            position: relative;
            overflow: hidden;
            min-height: 92vh;
            display: flex;
            align-items: center;
            background:
                radial-gradient(ellipse 60% 50% at 80% 40%, rgba(6, 182, 212, 0.18) 0%, transparent 60%),
                radial-gradient(ellipse 40% 40% at 20% 80%, rgba(245, 158, 11, 0.10) 0%, transparent 60%),
                linear-gradient(135deg, #fafaf9 0%, #eef4ff 100%);
        }
        .hero-bg-image {
            position: absolute;
            inset: 0;
            background-image: url('../images/hero/blue-cubes-hero.jpg');
            background-size: cover;
            background-position: right center;
            background-repeat: no-repeat;
            transform: translateZ(0);
            animation: hero-bg-in 1.6s cubic-bezier(0.22, 1, 0.36, 1) both;
        }
        @keyframes hero-bg-in {
            from { opacity: 0; transform: scale(1.05) translateZ(0); }
            to   { opacity: 1; transform: scale(1)    translateZ(0); }
        }
        .hero-bg-image::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg,
                rgba(250,250,249,0.96) 0%,
                rgba(250,250,249,0.80) 35%,
                rgba(250,250,249,0.10) 70%,
                rgba(250,250,249,0) 100%);
        }
        @media (max-width: 768px) {
            .hero-bg-image { opacity: 0.35; background-position: center; }
            .hero-bg-image::after { background: linear-gradient(180deg, rgba(250,250,249,0.85) 0%, rgba(250,250,249,0.95) 100%); }
        }
        .hero-content { position: relative; z-index: 2; }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            padding: 0.5rem 0.9rem 0.5rem 0.6rem;
            background: rgba(255, 255, 255, 0.85);
            border: 1px solid rgba(79, 70, 229, 0.18);
            backdrop-filter: blur(10px);
            border-radius: 9999px;
            box-shadow: 0 8px 32px -16px rgba(79, 70, 229, 0.4);
            opacity: 0;
            transform: translateY(-12px) scale(0.92);
            animation: badge-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
        }
        @keyframes badge-in { to { opacity: 1; transform: translateY(0) scale(1); } }

        /* Hero H1 — word-by-word slide-up */
        .hero-h1 { margin-top: 1.75rem; }
        .hero-h1 .word {
            display: inline-block;
            overflow: hidden;
            vertical-align: top;
            line-height: 1.05;
            padding-bottom: 0.05em;
        }
        .hero-h1 .word > span {
            display: inline-block;
            transform: translateY(110%);
            opacity: 0;
            animation: word-up 0.95s cubic-bezier(0.22, 1, 0.36, 1) both;
        }
        /* Stagger across all words inside .hero-h1 (whether direct or inside the rotator) */
        .hero-h1 .rotator-inner .word:nth-child(1) > span { animation-delay: 0.30s; }
        .hero-h1 .rotator-inner .word:nth-child(2) > span { animation-delay: 0.40s; }
        .hero-h1 .rotator-inner .word:nth-child(3) > span { animation-delay: 0.50s; }
        .hero-h1 .rotator-inner .word:nth-child(4) > span { animation-delay: 0.60s; }
        .hero-h1 > .word:nth-of-type(1) > span        { animation-delay: 0.70s; }
        .hero-h1 > .word:nth-of-type(2) > span        { animation-delay: 0.80s; }
        @keyframes word-up { to { transform: translateY(0); opacity: 1; } }

        /* Headline phrase rotator — slot-machine vertical wipe */
        .rotator {
            display: inline-block;
            vertical-align: top;
            overflow: hidden;
        }
        .rotator-inner {
            display: inline-block;
            will-change: opacity, transform;
        }

        .hero-sub  { opacity: 0; transform: translateY(16px); animation: rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.10s both; }
        .hero-ctas { opacity: 0; transform: translateY(16px); animation: rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.30s both; }
        .hero-meta { opacity: 0; transform: translateY(16px); animation: rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.50s both; }
        @keyframes rise { to { opacity: 1; transform: translateY(0); } }

        .scroll-cue {
            position: absolute;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%);
            color: var(--muted);
            font-size: 0.75rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            opacity: 0;
            z-index: 2;
            animation: rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.8s both;
        }
        .scroll-cue::after {
            content: '';
            width: 1px;
            height: 30px;
            background: linear-gradient(180deg, var(--muted), transparent);
            animation: cue-pulse 2s ease-in-out infinite;
        }
        @keyframes cue-pulse {
            0%, 100% { opacity: 0.3; transform: scaleY(0.6); }
            50%      { opacity: 1;   transform: scaleY(1); }
        }

        /* ───────── Reveal variants ───────── */
        .reveal,
        .reveal-left,
        .reveal-right,
        .reveal-scale {
            opacity: 0;
            transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
            will-change: opacity, transform;
        }
        .reveal       { transform: translateY(28px); }
        .reveal-left  { transform: translateX(-40px); }
        .reveal-right { transform: translateX(40px); }
        .reveal-scale { transform: scale(0.94); }

        .reveal.is-visible,
        .reveal-left.is-visible,
        .reveal-right.is-visible,
        .reveal-scale.is-visible { opacity: 1; transform: none; }

        [data-delay="100"] { transition-delay: 0.10s; }
        [data-delay="200"] { transition-delay: 0.20s; }
        [data-delay="300"] { transition-delay: 0.30s; }
        [data-delay="400"] { transition-delay: 0.40s; }
        [data-delay="500"] { transition-delay: 0.50s; }

        @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }
            .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1; transform: none; transition: none; }
            .scroll-cue::after, .hero-h1 .word > span, .hero-badge, .hero-sub, .hero-ctas, .hero-meta, .hero-bg-image, .scroll-cue, .grad-text::after { animation: none; opacity: 1; transform: none; }
        }

        /* Format wheel — full 360° entrance rotation */
        .wheel-anim {
            opacity: 0;
            transform: rotate(-360deg) scale(0.85);
            transform-origin: center center;
            transition: opacity 1.8s cubic-bezier(0.22, 1, 0.36, 1),
                        transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .wheel-anim.is-visible { opacity: 1; transform: rotate(0deg) scale(1); }

        /* ───────── Buttons ───────── */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.875rem 1.5rem;
            font-size: 0.9375rem;
            font-weight: 600;
            border-radius: 0.625rem;
            transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                        box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
            text-decoration: none;
            cursor: pointer;
            border: none;
            position: relative;
            overflow: hidden;
        }
        .btn-primary {
            background: linear-gradient(135deg, var(--brand) 0%, var(--cyan) 100%);
            color: #ffffff;
            box-shadow:
                0 10px 24px -8px rgba(79, 70, 229, 0.55),
                0 4px 8px -4px rgba(6, 182, 212, 0.35),
                inset 0 1px 0 rgba(255,255,255,0.18);
            isolation: isolate;
        }
        .btn-primary::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, var(--cyan) 0%, var(--brand) 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: -1;
        }
        .btn-primary > * { position: relative; z-index: 1; }
        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -12px rgba(79, 70, 229, 0.6), 0 6px 12px -6px rgba(6, 182, 212, 0.45); }
        .btn-primary:hover::after { opacity: 1; }

        .btn-secondary {
            background: rgba(255, 255, 255, 0.75);
            color: var(--ink);
            border: 1px solid var(--line-2);
            backdrop-filter: blur(8px);
        }
        .btn-secondary:hover { background: #ffffff; border-color: var(--brand); color: var(--brand); transform: translateY(-1px); }

        /* ───────── Section utils ───────── */
        .section { padding: 6rem 1.25rem; }
        @media (min-width: 768px) { .section { padding: 8rem 2rem; } }
        .wrap { max-width: 80rem; margin: 0 auto; }
        .eyebrow {
            display: inline-block;
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .section-ink   { background: var(--surface); }      /* #eef2f7 cool light slate */
        .section-white { background: #ffffff; }              /* pure white — visibly lighter than --surface */
        .section-cool  { background: linear-gradient(180deg, var(--surface-cool) 0%, #ffffff 100%); }
        .section-warm  { background: linear-gradient(180deg, var(--surface-warm) 0%, #ffffff 100%); }
        .section-dark {
            background: #060b24;   /* deeper than --ink for clear contrast vs the bg-ink section that precedes it */
            color: #f8fafc;
            position: relative;
            overflow: hidden;
        }

        /* ───────── Demo video section ───────── */
        .section-video {
            background: #060b24;
            color: #f8fafc;
            position: relative;
            overflow: hidden;
        }
        .section-video::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 22% 28%, rgba(79, 70, 229, 0.22) 0%, transparent 55%),
                radial-gradient(circle at 78% 72%, rgba(6, 182, 212, 0.20) 0%, transparent 55%);
            pointer-events: none;
        }
        .section-video .wrap { position: relative; z-index: 1; }
        .video-frame {
            position: relative;
            max-width: 64rem;
            margin: 0 auto;
            border-radius: 1.25rem;
            overflow: hidden;
            background: #0a0e27;
            box-shadow:
                0 32px 64px -24px rgba(0, 0, 0, 0.65),
                0 0 0 1px rgba(79, 70, 229, 0.32),
                0 0 64px rgba(6, 182, 212, 0.18);
        }
        .video-frame video {
            display: block;
            width: 100%;
            height: auto;
            aspect-ratio: 16 / 9;
            background: #0a0e27;
        }
        /* Thin animated brand-color hairline between sections — visible separator */
        .section + .section::before,
        .section + section.hero + .section::before {
            content: '';
            display: block;
            height: 1px;
            margin: -1px auto 0;
            max-width: 24rem;
            background: linear-gradient(90deg, transparent 0%, var(--line-2) 50%, transparent 100%);
            opacity: 0.5;
        }

        /* ───────── Bento cards ───────── */
        .bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
        @media (min-width: 768px) { .bento { gap: 1.25rem; } }
        .bento-card {
            background: #ffffff;
            border: 1px solid var(--line);
            border-radius: 1.25rem;
            padding: 1.5rem;
            box-shadow:
                0 1px 2px rgba(6, 11, 36, 0.04),
                0 8px 24px -16px rgba(6, 11, 36, 0.12);
            transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                        box-shadow 0.35s ease,
                        border-color 0.35s ease;
            overflow: hidden;
            position: relative;
        }
        .bento-card:hover {
            transform: translateY(-6px);
            box-shadow:
                0 24px 48px -24px rgba(79, 70, 229, 0.28),
                0 12px 24px -16px rgba(6, 182, 212, 0.18);
            border-color: rgba(79, 70, 229, 0.35);
        }
        .bento-card.dark {
            background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%);
            color: #ffffff;
            border-color: rgba(255,255,255,0.06);
        }
        .bento-card.dark .feature-title { color: #ffffff; }
        .bento-card.dark .feature-desc  { color: #cbd5e1; }
        .bento-img-wrap {
            margin: -0.5rem -0.5rem 1rem -0.5rem;
            border-radius: 0.75rem;
            overflow: hidden;
            background: linear-gradient(135deg, #f5f5f4, #e7e5e4);
        }

        /* ───────── Slideshow (bento feature cards) ───────── */
        .slideshow {
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, #f5f5f4, #dde5f0);
        }
        .slideshow .slide {
            position: absolute;
            inset: 0;
            opacity: 0;
            transform: scale(1.06);
            transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
                        transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
            will-change: opacity, transform;
        }
        .slideshow .slide.is-active {
            opacity: 1;
            transform: scale(1);
        }
        .slideshow .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .slideshow .progress {
            position: absolute;
            left: 0; right: 0; bottom: 0;
            height: 3px;
            display: flex;
            gap: 3px;
            padding: 0 0.5rem 0.5rem;
            z-index: 2;
            pointer-events: none;
        }
        .slideshow .progress span {
            flex: 1;
            background: rgba(255, 255, 255, 0.4);
            border-radius: 2px;
            box-shadow: 0 0 0 1px rgba(6, 11, 36, 0.08);
            transition: background-color 0.4s ease;
        }
        .slideshow .progress span.is-active {
            background: linear-gradient(90deg, var(--brand), var(--cyan));
        }

        /* Ken Burns — slow zoom/pan loop for single-image feature cards */
        .kenburns img {
            animation: kenburns 18s ease-in-out infinite alternate;
            will-change: transform;
        }
        @keyframes kenburns {
            from { transform: scale(1)    translate(0, 0); }
            to   { transform: scale(1.12) translate(-2%, -1.5%); }
        }

        /* ───────── Interior design band — wide cinematic strip ───────── */
        .interior-band {
            position: relative;
            overflow: hidden;
            min-height: 360px;
            display: flex;
            align-items: center;
            /* Warm beige fallback so the band has tone even before the JPG is dropped in. */
            background:
                linear-gradient(135deg, #e8dfd1 0%, #d4c5b0 45%, #c2b094 100%);
        }
        @media (min-width: 768px) { .interior-band { min-height: 440px; } }
        .interior-band-image {
            position: absolute;
            inset: 0;
            background-image: url('../images/lifestyle/interior-band.jpg');
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            transform: translateZ(0);
            animation: band-zoom 22s ease-in-out infinite alternate;
        }
        @keyframes band-zoom {
            from { transform: scale(1)    translate(0, 0); }
            to   { transform: scale(1.06) translate(-1%, -0.5%); }
        }
        .interior-band-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg,
                rgba(15, 12, 8, 0.78) 0%,
                rgba(15, 12, 8, 0.55) 30%,
                rgba(15, 12, 8, 0.20) 55%,
                rgba(15, 12, 8, 0)    75%);
        }
        @media (max-width: 767px) {
            .interior-band-overlay {
                background: linear-gradient(180deg,
                    rgba(15, 12, 8, 0.20) 0%,
                    rgba(15, 12, 8, 0.55) 60%,
                    rgba(15, 12, 8, 0.85) 100%);
            }
        }
        .interior-band-content {
            position: relative;
            z-index: 2;
            padding: 3rem 1.25rem;
            width: 100%;
        }
        @media (min-width: 768px) { .interior-band-content { padding: 4rem 2rem; } }
        @media (min-width: 1024px) {
            .interior-band-content {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 3rem;
            }
        }
        .interior-band-panel { max-width: 34rem; color: #fafaf9; }
        .interior-band .eyebrow {
            background: linear-gradient(135deg, var(--gold-soft), var(--gold-2));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        /* Glass tools panel on the right side of the band — works with or without the bg image */
        .interior-band-tools {
            display: none;
            width: 22rem;
            max-width: 100%;
            padding: 1.75rem 1.5rem;
            background: rgba(15, 18, 38, 0.78);   /* dark glass — readable on warm beige + future image */
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 1rem;
            backdrop-filter: blur(16px) saturate(1.15);
            -webkit-backdrop-filter: blur(16px) saturate(1.15);
            box-shadow: 0 28px 56px -16px rgba(0, 0, 0, 0.55);
            color: #fafaf9;
            flex-shrink: 0;
        }
        @media (min-width: 1024px) { .interior-band-tools { display: block; } }
        .interior-band-tools .tools-eyebrow {
            display: flex; align-items: center; gap: 0.55rem;
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.20em;
            text-transform: uppercase;
            color: var(--gold-soft);
            margin-bottom: 1.1rem;
        }
        .interior-band-tools .tools-eyebrow::before {
            content: '';
            width: 0.45rem; height: 0.45rem;
            border-radius: 9999px;
            background: linear-gradient(135deg, var(--gold), var(--gold-2));
            box-shadow: 0 0 10px rgba(245, 158, 11, 0.6);
        }
        .interior-band-tools ul {
            list-style: none; padding: 0; margin: 0;
            display: flex; flex-direction: column;
        }
        .interior-band-tools li {
            display: flex; align-items: baseline; gap: 0.6rem;
            padding: 0.6rem 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.07);
            font-size: 0.9rem;
        }
        .interior-band-tools li:last-child { border-bottom: none; }
        .interior-band-tools li .tool-name { font-weight: 600; color: #fafaf9; flex-shrink: 0; }
        .interior-band-tools li .tool-meta { color: rgba(250, 250, 249, 0.82); font-size: 0.78rem; margin-left: auto; text-align: right; }

        @media (prefers-reduced-motion: reduce) {
            .interior-band-image { animation: none; }
        }

        /* Flowing horizontal carousel — slides translate left as a single track */
        .slideshow.flow { overflow: hidden; position: relative; }
        .flow-track {
            display: flex;
            height: 100%;
            width: 100%;
            transition: transform 0.95s cubic-bezier(0.65, 0, 0.35, 1);
            will-change: transform;
        }
        .flow-slide {
            width: 100%;
            flex-shrink: 0;
            height: 100%;
            position: relative;
        }
        .flow-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        @media (prefers-reduced-motion: reduce) {
            .slideshow .slide { transition: none; }
            .kenburns img    { animation: none; }
            .flow-track      { transition: none; }
        }

        /* ───────── FAQ ───────── */
        .faq-item { border-bottom: 1px solid var(--line); }
        .faq-item summary {
            list-style: none;
            cursor: pointer;
            padding: 1.5rem 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            font-weight: 600;
            color: var(--ink);
            font-size: 1.0625rem;
            transition: color 0.2s ease;
        }
        .faq-item summary:hover { color: var(--brand); }
        .faq-item summary::-webkit-details-marker { display: none; }
        .faq-item summary::after {
            content: '';
            width: 1.25rem; height: 1.25rem;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%234f46e5' stroke-width='2.5' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
            background-repeat: no-repeat; background-position: center;
            transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
            flex-shrink: 0;
        }
        .faq-item[open] summary::after { transform: rotate(180deg); }
        /* Override the user-agent rule that hides <details> children when not [open] —
           we need the body in the layout so we can animate its height instead of having
           it pop in/out instantly. */
        .faq-item > .faq-body {
            display: block;
            overflow: hidden;
            height: 0;
            opacity: 0;
            color: var(--muted);
            line-height: 1.7;
            font-size: 0.9375rem;
            padding-bottom: 0;
            transition: height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                        opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                        padding-bottom 0.4s cubic-bezier(0.22, 1, 0.36, 1);
            will-change: height, opacity;
        }
        .faq-item[open] > .faq-body {
            opacity: 1;
            padding-bottom: 1.5rem;
            /* height is set inline by the JS controller for smooth open/close */
        }

        /* ───────── Compare cards — spotlight ───────── */
        .compare-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
        @media (min-width: 700px) and (max-width: 1099px) {
            .compare-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; align-items: stretch; }
        }
        @media (min-width: 1100px) {
            .compare-grid { grid-template-columns: 1fr 1.25fr 1fr 1fr; gap: 1rem; align-items: stretch; }
        }
        .compare-col {
            background: #ffffff;
            border: 1px solid var(--line);
            border-radius: 1.25rem;
            padding: 1.75rem 1.5rem;
            display: flex;
            flex-direction: column;
            box-shadow: 0 1px 2px rgba(6, 11, 36, 0.04), 0 8px 24px -16px rgba(6, 11, 36, 0.10);
            transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
        }
        .compare-col:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -16px rgba(6, 11, 36, 0.16); }
        .compare-col.spotlight {
            background: linear-gradient(180deg, #ffffff 0%, #cfdeff 100%);
            border: 2px solid var(--brand);
            box-shadow:
                0 32px 64px -16px rgba(79, 70, 229, 0.40),
                0 16px 32px -16px rgba(6, 182, 212, 0.28),
                0 0 0 6px rgba(79, 70, 229, 0.06);
            position: relative;
        }
        @media (min-width: 1100px) {
            .compare-col.spotlight { transform: translateY(-12px); }
            .compare-col.spotlight:hover { transform: translateY(-16px); }
        }
        .compare-col .title { font-size: 1.5rem; font-weight: 700; color: var(--ink); }
        .compare-row {
            padding: 0.75rem 0;
            border-bottom: 1px dashed var(--line);
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.875rem;
        }
        .compare-row:last-child { border-bottom: none; }
        .compare-row .label { color: var(--muted); }
        .compare-row .val   { font-weight: 600; color: var(--ink); }
        .compare-row .val.yes { color: var(--brand); font-size: 1.125rem; }
        .compare-row .val.no  { color: #a8a29e; }

        /* Gold premium badge */
        .gold-badge {
            display: inline-block;
            padding: 0.35rem 0.85rem;
            background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
            color: #ffffff;
            font-size: 0.6875rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            border-radius: 9999px;
            box-shadow: 0 8px 20px -8px rgba(245, 158, 11, 0.55);
        }

        /* ───────── Form ───────── */
        .field input:not([type="radio"]):not([type="checkbox"]),
        .field textarea,
        .field select {
            width: 100%;
            padding: 0.875rem 1rem;
            border: 1px solid var(--line);
            border-radius: 0.625rem;
            font-size: 0.9375rem;
            font-family: inherit;
            background: #ffffff;
            color: var(--ink);
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }
        .field input:not([type="radio"]):not([type="checkbox"]):focus,
        .field textarea:focus,
        .field select:focus {
            outline: none;
            border-color: var(--brand);
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
        }
        .field input[type="radio"],
        .field input[type="checkbox"] {
            width: auto;
            margin: 0;
            accent-color: var(--brand);   /* indigo radio dot — matches the brand */
            flex-shrink: 0;
        }
        .field label.lbl {
            display: block;
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--ink);
            margin-bottom: 0.4rem;
        }

        [x-cloak] { display: none !important; }
        .honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

        /* ───────── Format chip marquee ───────── */
        .chip {
            display: inline-flex;
            align-items: center;
            gap: 0.625rem;
            background: #ffffff;
            border: 1px solid var(--line);
            padding: 0.75rem 1.15rem 0.75rem 0.65rem;
            border-radius: 9999px;
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--ink);
            white-space: nowrap;
            box-shadow: 0 1px 2px rgba(6, 11, 36, 0.04), 0 6px 16px -8px rgba(6, 11, 36, 0.10);
            transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
        }
        .chip:hover {
            transform: translateY(-4px) scale(1.04);
            border-color: var(--brand);
            background: linear-gradient(180deg, #ffffff 0%, #eff3ff 100%);
            box-shadow:
                0 1px 2px rgba(6, 11, 36, 0.04),
                0 18px 36px -12px rgba(79, 70, 229, 0.38),
                0 8px 16px -10px rgba(6, 182, 212, 0.28);
            z-index: 1;
        }
        .chip:hover .chip-icon {
            transform: scale(1.08);
            box-shadow:
                0 2px 6px -1px rgba(0,0,0,0.28),
                0 4px 12px -4px rgba(0,0,0,0.20),
                inset 0 1px 0 rgba(255,255,255,0.22);
        }
        .chip-icon { transition: transform 0.2s ease, box-shadow 0.2s ease; }
        .chip .ext { color: var(--muted); font-weight: 500; font-size: 0.75rem; }
        .chip-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.65rem;
            height: 1.65rem;
            border-radius: 0.4rem;
            color: #ffffff;
            font-family: system-ui, -apple-system, sans-serif;
            font-weight: 800;
            line-height: 1;
            letter-spacing: 0;
            flex-shrink: 0;
            box-shadow: 0 1px 2px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.18);
            font-size: 0.82rem;
        }
        .chip-icon[data-len="2"] { font-size: 0.7rem;  letter-spacing: -0.02em; }
        .chip-icon[data-len="3"] { font-size: 0.6rem;  letter-spacing: -0.04em; }

        .marquee {
            position: relative;
            overflow: hidden;
            padding: 1.25rem 0;      /* room for the lift + scale on hover so the chip top isn't clipped */
            -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
                    mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
        }
        .marquee-track {
            display: flex;
            gap: 0.65rem;
            width: max-content;
            animation: marquee-scroll 60s linear infinite;
            will-change: transform;
        }
        .marquee:hover .marquee-track,
        .marquee-track:focus-within { animation-play-state: paused; }

        @keyframes marquee-scroll {
            from { transform: translate3d(0, 0, 0); }
            to   { transform: translate3d(-50%, 0, 0); }
        }
        @media (prefers-reduced-motion: reduce) {
            .marquee-track { animation: none; transform: none; }
        }

        /* ───────── Layout utilities (native — no Tailwind dependency) ───────── */
        .fixed       { position: fixed; }
        .top-0       { top: 0; }
        .inset-x-0   { left: 0; right: 0; }
        .z-50        { z-index: 50; }
        .flex        { display: flex; }
        .inline-flex { display: inline-flex; }
        .items-center    { align-items: center; }
        .justify-between { justify-content: space-between; }
        .shrink-0    { flex-shrink: 0; }
        .hidden      { display: none; }
        @media (min-width: 768px) {
            .md\:flex   { display: flex; }
            .md\:hidden { display: none; }
        }
        @media (min-width: 1024px) {
            .lg\:flex        { display: flex; }
            .lg\:inline-flex { display: inline-flex; }
            .lg\:hidden      { display: none; }
        }