/* build 20260805-1640: fixed CTA 81px + wordmark 224px (+15%) */
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;600;700&family=Merriweather:wght@400;700&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,600,1,0');
/* cache-bust legal-popups-responsive 20260728-1735 */

/* ==========================================================================
     0. GLOBAL VISUAL DASHBOARD (EDITABLE PARAMETERS)
     ========================================================================== */
  :root {
    --brand-accent: #4400ff;
    --brand-accent-glow: rgba(68, 0, 255, 0.5);
    --brand-status-live: #00c577;
    --brand-status-glow: rgba(0, 197, 119, 0.9);
    --brand-bg: #000000;
    /* Horizontal wordmark — match previous logo: brand + white */
    --wordmark-introspective: var(--brand-accent);
    --wordmark-media: #ffffff;
    --preloader-bg: #000000;
    --text-white: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.6);
    --text-dim: #a1a1aa;
    --font-heading-bold: 'Benzin-Bold', 'Benzin', sans-serif;
    --font-heading-regular: 'Benzin', sans-serif;
    --font-body: 'Merriweather', Georgia, serif;
    /* Glitch matrix (dashboard)
       Background: --glitch-bg-start → --glitch-bg-end (scroll via --glitch-scroll-t)
       Font color: --glitch-color-start → --glitch-color-end (scroll via --glitch-scroll-t) */
    --glitch-font: 'JetBrains Mono', monospace;
    --glitch-color-start: #ffffff;
    --glitch-color-end: #4400ff;
    --glitch-bg-start: #e8000a;
    --glitch-bg-end: #000000;
    --glitch-bg-opacity: 1.00;
    --glitch-scroll-t: 0; /* 0→1 published by runtime */
    /* Z-depth dolly scales (far → near). Runtime publishes live --*-z-scale.
       Start/end endpoints lerp wide→narrow with --viewport-reflow-t. */
    --glitch-z-scale-start: 1;
    --glitch-z-scale-end: 1.08;
    --camera-z-scale-start: calc(0.9 + 0.1 * var(--viewport-reflow-t, 0));
    --camera-z-scale-end: calc(1 + 0.06 * var(--viewport-reflow-t, 0));
    --logo-z-scale-start: calc(0.9 + 0.1 * var(--viewport-reflow-t, 0));
    --logo-z-scale-end: calc(1.05 + 0.01 * var(--viewport-reflow-t, 0));
    --camera-z-scale: 1;
    --logo-z-scale: 1;
    --logo-drop-shadow: drop-shadow(0 0px 0px rgba(0, 0, 0, 0.35));
    /* Logo + camera sizing — fluid with --viewport-reflow-t (wide→narrow).
       Camera is centered bleed; sticky overflow crops edges on narrow. */
    --logo-max-width: calc(
      min(900px, 90vw) * (1 - var(--viewport-reflow-t, 0))
        + 340px * var(--viewport-reflow-t, 0)
    );
    --logo-max-height: max(
      calc(45vh * (1 - var(--viewport-reflow-t, 0)) + 34vh * var(--viewport-reflow-t, 0)),
      calc(45vh * (1 - var(--viewport-reflow-t, 0)) + 168px * var(--viewport-reflow-t, 0))
    );
    --camera-size: max(
      calc(100vmin + 40vmin * var(--viewport-reflow-t, 0)),
      calc(100vmin * (1 - var(--viewport-reflow-t, 0)) + 520px * var(--viewport-reflow-t, 0))
    );
    --camera-opacity: 1;
    --camera-blend-mode: normal;
    /* Pull camera/REC up over the wall so handoff reads on top of the last plate. */
    --camera-pull-up: 80vh;
    /* Camera chapter — iris/logos/dolly/REC. Slightly shorter for lighter wheel travel. */
    --camera-chapter-vh: 720vh;
    /* GPU chapter — taller so PC frames get more scroll after iris mid, without
       stretching camera beats. Margin pulls GPU up to align with camera start. */
    --gpu-chapter-vh: 1200vh; 
    /* PC → pricing sticky handoff (published by runtime) */
    --pc-handoff: 0;
    --pc-scatter-exit: 0;
    --pc-bg-fade: 0;
    --pc-pricing-enter: 0;
    --audio-font: 'Benzin', sans-serif;
    --audio-text-inactive: rgba(150, 150, 150, 0.8);
    --audio-text-active: #ffffff;
    /* Glass Parameters — blur must live on the card shell (not .card-glass-bg).
       Transform/opacity on cards create a backdrop root, so child backdrop-filter
       cannot sample the GPU canvas behind the panel. */
    --glass-panel-blur: 15px;
    /* Shared fill strength (Look Panel). GPU scatter/side keep one-off values. */
    --glass-panel-brightness: 42;
    --glass-panel-alpha: calc(var(--glass-panel-brightness) * 0.01);
    --glass-panel-bg: rgba(18, 18, 26, var(--glass-panel-alpha));
    --gpu-card-bg: rgba(18, 18, 26, 0.42);
    /* Per-surface blur hooks (Look Panel) — default to shared glass blur */
    --stat-blur: var(--glass-panel-blur);
    --reviews-blur: var(--glass-panel-blur);
    --gpu-card-blur: var(--glass-panel-blur);
    --gpu-side-blur: var(--glass-panel-blur);
    --pricing-blur: var(--glass-panel-blur);
    --contact-blur: var(--glass-panel-blur);
    --legal-blur: var(--glass-panel-blur);
    --glass-side-bg: rgba(8, 8, 12, 0.55); 
    --card-border-line: rgba(255, 255, 255, 0.1);
    /* Site-wide decorative rule lines — always hairline gradient */
    --rule-line-height: 1px;
    --rule-line-gradient: linear-gradient(90deg, var(--brand-accent), rgba(68, 0, 255, 0.15));
    --card-shadow: 0 16px 40px rgba(0,0,0,0.5);
    --shimmer-inner-1: transparent;
    --shimmer-inner-2: rgba(255, 255, 255, 0.06);
    --shimmer-inner-3: rgba(255, 255, 255, 0.15);
    --shimmer-border-1: rgba(68, 0, 255, 0);
    --shimmer-border-2: rgba(100, 40, 255, 0.85);
    --shimmer-border-3: rgba(160, 100, 255, 0.95);
    /* Global sweep border on/off — cards, badges, standalone, wall */
    --shimmer-border-on: 1;
    /* Aliases kept for older freeform / inline refs */
    --standalone-border-on: var(--shimmer-border-on);
    --standalone-shimmer-1: var(--shimmer-border-1);
    --standalone-shimmer-2: var(--shimmer-border-2);
    --standalone-shimmer-3: var(--shimmer-border-3);
    --wall-border-on: var(--shimmer-border-on);
    --wall-shimmer-1: var(--shimmer-border-1);
    --wall-shimmer-2: var(--shimmer-border-2);
    --wall-shimmer-3: var(--shimmer-border-3);
    /* Standalone echo rings */
    --echo-ring-start: #f13918;
    --echo-ring-end: var(--brand-accent);
    /* PC Scatter Layout (dashboard)
     Scheme A:
     - Desktop: left free glass + locked editorial rail; cluster vertically centered;
       ULTRASTACK header floats top-left (not glued to cards)
     - Mobile: editorial bucket (Specs/Live/Env) stacked FIRST for context, then glass pods;
       GPU plate may be covered
     - Bucket 1: .scatter-card — no hierarchy, may reflow
     - Bucket 2: .pc-side-panel — Specs/Live/Env stay together always */
  --pc-pad-x: clamp(16px, 2.5vw, 40px);
  --pc-pad-y: clamp(16px, 4vh, 40px);
  /* Clears minimized audio widget — PC header must never sit under it (+50px breathing room) */
  --audio-clear-top: 138px;
  --pc-col-gap: clamp(14px, 1.6vw, 28px);
  --pc-row-gap: clamp(14px, 1.8vh, 22px);
  --pc-max-width: 100%;
  --pc-icon-size: 40px;
  --pc-icon-cell: 64px;
  --pc-icon-gap-row: 10px;
  --pc-icon-gap-col: 10px;
  --pc-card-pad: 16px;
  /* GPU plate crop scale — 1 wide → 1.12 narrow (full-bleed via overflow clip) */
  --gpu-plate-scale: calc(1 + 0.12 * var(--viewport-reflow-t, 0));
    /* Preloader (dashboard) — equal stack gaps; bar width follows text (or fixed when text off) */
    --preload-label-gap: 32px;
    --preload-no-text-gap: 16px;
    --preload-logo-size: 84px;
    --preload-bar-width: 220px;
    /* Sacred Wall copy + dots (dashboard) — shares audio clear band */
    --wall-copy-top: var(--audio-clear-top);
    --wall-text-zone: 22dvh;
    --wall-text-video-gap: 2.5dvh;
    --wall-player-bottom: 15dvh; /* midpoint between 12dvh and 18dvh */
    --wall-title-font: var(--font-heading-regular);
    --wall-body-font: var(--font-body);
    --wall-title-size: clamp(28px, 3.2vw, 32px);
    --wall-body-size: clamp(13px, 1.15vw, 14px);
    --wall-title-color: var(--brand-accent);
    --wall-body-color: var(--text-muted);
    --wall-copy-max-width: 1200px; /* shared with video player width */
    --wall-side-inset: 5%; /* shared text + video side margins */
    --wall-body-max-width: 100%; /* fill wall column (was 72ch / too narrow) */
    --wall-body-type-in: 1.4s;  /* body readout on enter */
    --wall-body-type-out: 1.0s; /* body readout on exit */
    --wall-body-type-ease-in: cubic-bezier(0.22, 1, 0.36, 1);
    --wall-body-type-ease-out: cubic-bezier(0.55, 0, 0.84, 0);
    --wall-body-lead-settle: 0.45s; /* frontier word brand → white after type-in */
    --about-body-type-in: 4s;
    --about-body-type-out: 2s;
    --wall-title-nudge: 1.35rem; /* gentle L→R slide — not edge-of-viewport */
    --wall-title-duration: 0.38s;
    --wall-title-ease: cubic-bezier(0.22, 1, 0.36, 1);
    /* Stat cards (between standalone + wall) — edit copy/targets here */
    --stat-pad-x: clamp(16px, 4vw, 48px);
    --stat-pad-y: clamp(28px, 5vh, 56px);
    --stat-gap: clamp(12px, 1.4vw, 20px);
    --stat-card-pad: clamp(20px, 2.2vw, 28px);
    --stat-card-min: 200px;
    --stat-card-max: 300px;
    --stat-card-aspect: auto; /* height follows tallest card content */
    --stat-number-size: 112px;
    --stat-body-size: 14px;
    --stat-color-rest: #ffffff;
    --stat-color-active: #4400ff;
    --stat-body-color: var(--text-muted);
    --stat-sticky-top: var(--audio-clear-top); /* pin below minimized audio */
    --stat-chapter-vh: 280vh;
    --stat-stagger-lift: 28vh; /* gentler travel distance */
    --stat-stagger-step: 0.2; /* clearer delay between cards L→R */
    --stat-stagger-window: 0.58; /* each card still eases in/out; step owns the gap */
    /* Cards park after enter; reviews glide under. Wall clearance keeps a gap
       above the videowall (never overlap it). */
    --stat-wall-gap: 2vh; /* clear air between cards and videowall section */
    --sticky-handoff-enter: 1.0; /* vh fraction — fade in before pin */
    --sticky-handoff-exit: 1.0;  /* vh fraction — fade out before unpin */
    --sticky-handoff-lift: 24px;
    /* About exit holds longer so parked avatar doesn't vanish mid-handoff */
    --about-handoff-exit: 2.2;
    /* Nudge About lower so park finishes while section is still solid */
    --about-shift-down: 12vh;
    /* Extra bottom runway while presence stays solid (avatar + readout) */
    --about-hold-pad: 14vh;
    --closing-handoff-lift: 56px; /* FAQ + contact move-up (subtle, equal-opposite) */
    /* About section (between standalone + stats) */
    --about-pad-x: clamp(16px, 5vw, 80px);
    --about-pad-y: clamp(48px, 8vh, 96px);
    /* Clears about off the first viewport so standalone is the sole centerpiece.
       Applied as about margin-top — NOT standalone margin (that collapses aspect-ratio). */
    --standalone-stage-bottom: calc(36vh * (1 - var(--standalone-reflow-t) * 0.55));
    /* Shared viewport reflow (wide→narrow). Standalone + camera/logo/GPU share this. */
    --viewport-reflow-wide: 1100px;
    --viewport-reflow-narrow: 390px;
    --viewport-reflow-t: clamp(
      0,
      (var(--viewport-reflow-wide) - 100vw)
        / (var(--viewport-reflow-wide) - var(--viewport-reflow-narrow)),
      1
    );
    /* Fluid standalone window: 16:9 (wide) → 9:16 (narrow). */
    --standalone-reflow-t: var(--viewport-reflow-t);
    --standalone-aspect: calc(
      (16 / 9) * (1 - var(--standalone-reflow-t))
        + (9 / 16) * var(--standalone-reflow-t)
    );
    --standalone-max-h: min(
      72dvh,
      calc(100dvh - var(--audio-clear-top, 120px) - 48px)
    );
    /* Wall player — same fluid aspect as standalone. Shared column width for
       copy + embed; embed stays absolute/centered; no aspect-ratio on <video>. */
    --wall-player-aspect: var(--standalone-aspect);
    --wall-player-slot-h: calc(
      100dvh
        - var(--wall-copy-top)
        - var(--wall-text-zone)
        - var(--wall-text-video-gap)
        - var(--wall-player-bottom, 15dvh)
    );
    --wall-column-width: min(
      var(--wall-copy-max-width),
      calc(100% - (2 * var(--wall-side-inset))),
      calc(var(--wall-player-slot-h) * var(--wall-player-aspect))
    );
    --about-gap: clamp(16px, 2vw, 28px);
    --about-max-width: 1200px;
    --about-title-size: clamp(28px, 3.2vw, 32px);
    --about-body-size: clamp(13px, 1.15vw, 14px);
    --about-image-radius: 16px;
    /* Floating Create CTA → parks as About avatar (right of copy) */
    /* Fixed rest size — small enough for all orientations; hover grows via scale. */
    --cta-rest-size: 81px;
    --cta-hover-scale: 1.5384615385; /* 1 / 0.65 */
    --cta-park-max: min(360px, 42vw);
    --cta-face-bg: #f13918;
    --cta-orange-deep: #c62810;
    --cta-orange-mid: #f13918;
    --cta-orange-bright: #ff7a45;
    --cta-brand-deep: #2a0099;
    --cta-brand-mid: var(--brand-accent);
    --cta-brand-bright: #8b5cff;
    --cta-face-bg-hover: var(--brand-accent);
    --cta-hover-ms: 0.4s;
    --cta-idle-ms: 4.8s;
    --cta-wall-fade-ms: 0.2s;
    --cta-enter-ms: 0.55s;
    --cta-enter-ease: cubic-bezier(0.22, 1, 0.36, 1);
    /* Reviews — master window + slides (edit each slide below) */
    --reviews-pad-x: clamp(16px, 5vw, 80px);
    --reviews-pad-y: clamp(40px, 7vh, 80px);
    --reviews-max-width: 720px;
    /* Reviews rise under held cards via pull-up + normal scroll. No locks.
       Higher pull-up = reviews enter sooner after cards settle. */
    --reviews-pull-up: 195vh;
    --reviews-park-vh: 20vh;
    --reviews-dot-gap: 10px;
    --reviews-window-pad: clamp(22px, 2.4vw, 32px);
    --reviews-window-radius: 16px;
    --reviews-slide-gap: 18px;
    --reviews-fade-duration: 0.45s;
    --reviews-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --reviews-slide-offset: 48px; /* R→L travel distance */
    --reviews-slide-duration: 4s; /* autoplay seconds per slide */
    --reviews-dots-pad-top: 16px;
    /* Quote typography + marks */
    --reviews-quote-font: var(--font-body); /* Merriweather-regular */
    --reviews-quote-weight: 400;
    --reviews-quote-color: var(--text-white);
    --reviews-quote-size: clamp(15px, 1.35vw, 18px);
    --reviews-quote-line: 1.45;
    --reviews-mark-color: #f13918;
    --reviews-mark-size: 1.05em; /* inline with paragraph */
    /* Attribution typography */
    --reviews-name-font: var(--font-heading-regular);
    --reviews-name-color: var(--text-white);
    --reviews-name-size: 14px;
    --reviews-meta-font: var(--font-body);
    --reviews-meta-color: var(--text-muted);
    --reviews-meta-size: 12px;
    --reviews-info-gap: 0px; /* name / title / company stack */
    --reviews-info-line: 1.2;
    --reviews-avatar-size: 48px;
    --reviews-badge-size: 28px;
    --reviews-lockup-gap: 1rem;
    /* Contiguous reviews 1…N (Look Panel reviewItems). Empty quote ends the list; clear leftovers when shortening. */
    --review-1-quote: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, elit, sed do eiusmod tempor. Lorem ipsum dolor sit eiusmod tempor. Lorem ipsum dolor.";
    --review-1-name: "Mei Mei";
    --review-1-title: "Title";
    --review-1-company: "Company";
    --review-1-avatar: "https://YOUR_ZONE.b-cdn.net/reviews/1-avatar.webp"; /* bunny.net — raster */
    --review-1-badge: "https://YOUR_ZONE.b-cdn.net/reviews/1-badge.webp"; /* bunny.net — use .webp/.png (not .svg via img) */
    --review-2-quote: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, elit, sed do eiusmod tempor. Lorem ipsum dolor sit eiusmod tempor. Lorem ipsum dolor.";
    --review-2-name: "Woke Liberal";
    --review-2-title: "Title";
    --review-2-company: "Company";
    --review-2-avatar: "https://YOUR_ZONE.b-cdn.net/reviews/2-avatar.webp";
    --review-2-badge: "https://YOUR_ZONE.b-cdn.net/reviews/2-badge.webp";
    --review-3-quote: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, elit, sed do eiusmod tempor. Lorem ipsum dolor sit eiusmod tempor. Lorem ipsum dolor.";
    --review-3-name: "Tamil Tiger";
    --review-3-title: "Title";
    --review-3-company: "Company";
    --review-3-avatar: "https://YOUR_ZONE.b-cdn.net/reviews/3-avatar.webp";
    --review-3-badge: "https://YOUR_ZONE.b-cdn.net/reviews/3-badge.webp";
    --review-4-quote: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, elit, sed do eiusmod tempor. Lorem ipsum dolor sit eiusmod tempor. Lorem ipsum dolor.";
    --review-4-name: "Jacob Traitor";
    --review-4-title: "Title";
    --review-4-company: "Company";
    --review-4-avatar: "https://YOUR_ZONE.b-cdn.net/reviews/4-avatar.webp";
    --review-4-badge: "https://YOUR_ZONE.b-cdn.net/reviews/4-badge.webp";
    --review-5-quote: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, elit, sed do eiusmod tempor. Lorem ipsum dolor sit eiusmod tempor. Lorem ipsum dolor.";
    --review-5-name: "Karen Manager";
    --review-5-title: "Title";
    --review-5-company: "Company";
    --review-5-avatar: "https://YOUR_ZONE.b-cdn.net/reviews/5-avatar.webp";
    --review-5-badge: "https://YOUR_ZONE.b-cdn.net/reviews/5-badge.webp";
    /* Brand wheel — lowest layer above page bg (z:-1); under glass blur.
       Responsive levers: plate size (radius), orbit %, logo slot %. */
    --brand-chapter-vh: 0vh;
    --brand-sticky-height: min(70vh, 720px);
    --brand-wheel-size: clamp(1200px, 150vw, 2400px);
    --brand-orbit-pct: 45; /* logo path radius as % of plate (JS reads this) */
    --brand-logo-size: 4.4%; /* desktop marks — bumped from 3.4% (were reading tiny) */
    --brand-logo-color: #9ea3a5; /* resting mark color — a few shades under prior #cdd1d2 */
    --brand-logo-color-faint: #2a2a2a; /* wall wipe target — faintly above black */
    --brand-pull-up: 80vh; /* overlap up under stat cards */
    --brand-under-wall: 80vh; /* overlap down under videowall player */
    /* Closing sections (after PC) */
    --closing-pad-x: clamp(16px, 5vw, 80px);
    --closing-pad-y: clamp(48px, 8vh, 96px);
    --closing-max: 1200px;
    --faq-max: 900px;
    --contact-max: 760px;
    --dot-nav-bottom: 10dvh; /* midpoint between 12.5dvh and 7dvh */
    --dot-active-glow: 0 0 14px rgba(68, 0, 255, 0.95), 0 0 20px rgba(68, 0, 255, 0.45);
    /* Contiguous wall slides 1…N (Look Panel wallSlides). Runtime clones/trims .video-item plates to --wall-slide-count. */
    --wall-slide-count: 5;
    --wall-1-title: "Film and Video";
    --wall-1-body: "Cinematic, story-driven film and video work that communicates ideas with clarity and emotional impact. Every project blends narrative intention with refined visual craft, ensuring each frame supports the message. The production process is built around precision, collaboration, and modern workflows from concept to final delivery. The result is polished, purposeful content designed to resonate across platforms and audiences.";
    --wall-1-stream: "https://vz-e1ac5957-e25.b-cdn.net/c23f35f3-87c5-41d2-93d9-6d680b96ae65/playlist.m3u8";
    --wall-1-poster: "";
    --wall-2-title: "Motion & Animation";
    --wall-2-body: "Motion and animation transform complex ideas into fluid, engaging visual experiences. Thoughtful pacing, expressive movement, and intentional design make abstract concepts clear and memorable. Each piece enhances storytelling, reinforces brand identity, and elevates viewer understanding. Whether subtle UI motion or full narrative sequences, every animation is crafted with detail and purpose.";
    --wall-2-stream: "https://vz-e1ac5957-e25.b-cdn.net/6ffad6c1-b7bc-4e7c-b656-a5ca011c2fb0/playlist.m3u8";
    --wall-2-poster: "";
    --wall-3-title: "Graphic Design";
    --wall-3-body: "Graphic design focuses on creating visual systems that communicate with clarity, consistency, and emotional resonance. Every layout, mark, and composition is crafted to strengthen identity and audience connection. The work blends modern aesthetics with timeless design principles to deliver clean, intentional visuals. From brand assets to campaign materials, each piece is built to be both beautiful and functional.";
    --wall-3-stream: "https://vz-e1ac5957-e25.b-cdn.net/b94021f7-d405-4558-a68c-c88fcce7a7b0/playlist.m3u8";
    --wall-3-poster: "";
    --wall-4-title: "UX / UI / Interaction Design";
    --wall-4-body: "Digital experiences are designed to feel intuitive, human, and visually refined. Interfaces balance usability, clarity, and aesthetic cohesion to guide people effortlessly through content. The process emphasizes user behavior, accessibility, and thoughtful interaction patterns. The result is digital products that look polished, function seamlessly, and communicate with purpose";
    --wall-4-stream: "https://vz-e1ac5957-e25.b-cdn.net/abd6a81a-1d9c-4d3c-892e-ee95e0efb80f/playlist.m3u8";
    --wall-4-poster: "";
    --wall-5-title: "Gen AI";
    --wall-5-body: "Generative AI expands creative possibilities by blending human direction with advanced computational tools. It accelerates ideation, enhances visual development, and unlocks new forms of storytelling. Each output is curated, refined, and integrated into a cohesive creative workflow that maintains artistic integrity. The goal is amplification -- using AI to push design, motion, and narrative further than traditional methods alone.";
    --wall-5-stream: "https://vz-e1ac5957-e25.b-cdn.net/e9730819-132a-4e85-8beb-0f5cd234af30/playlist.m3u8";
    --wall-5-poster: "";
    --wall-6-title: "";
    --wall-6-body: "";
    --wall-6-stream: "";
    --wall-6-poster: "";
    --wall-7-title: "";
    --wall-7-body: "";
    --wall-7-stream: "";
    --wall-7-poster: "";
    --wall-8-title: "";
    --wall-8-body: "";
    --wall-8-stream: "";
    --wall-8-poster: "";
    --wall-9-title: "";
    --wall-9-body: "";
    --wall-9-stream: "";
    --wall-9-poster: "";
    --wall-10-title: "";
    --wall-10-body: "";
    --wall-10-stream: "";
    --wall-10-poster: "";
    --wall-11-title: "";
    --wall-11-body: "";
    --wall-11-stream: "";
    --wall-11-poster: "";
    --wall-12-title: "";
    --wall-12-body: "";
    --wall-12-stream: "";
    --wall-12-poster: "";
    /* Contiguous pricing 1…N (Look Panel pricingCards). Empty title ends the list; clear leftovers when shortening. */
    --pricing-title: "Pricing plans";
    --pricing-subtitle: "Let's start with your budget";
    --pricing-1-title: "$180/hr";
    --pricing-1-body: "Great for smaller, quick turnaround projects like logos, where the design process is estimated by time averages.";
    --pricing-1-features: "2 included revisions";
    --pricing-2-title: "Flat Rate";
    --pricing-2-body: "Great for larger projects on predefined budgets.";
    --pricing-2-features: "2 included revisions\nExtra revisions available";
    --pricing-3-title: "$200/hr";
    --pricing-3-body: "Feeling nitpicky but exceeded the limit of revisions under a flat rate? You have options!";
    --pricing-3-features: "";
    --pricing-4-title: "Original files";
    --pricing-4-body: "When you need to own the original project files for intellectual property rights and/or future use. Price varies on scope of project.";
    --pricing-4-features: "";
    --pricing-5-title: "";
    --pricing-5-body: "";
    --pricing-5-features: "";
    --pricing-6-title: "";
    --pricing-6-body: "";
    --pricing-6-features: "";
    --pricing-7-title: "";
    --pricing-7-body: "";
    --pricing-7-features: "";
    --pricing-8-title: "";
    --pricing-8-body: "";
    --pricing-8-features: "";
    --pricing-9-title: "";
    --pricing-9-body: "";
    --pricing-9-features: "";
    --pricing-10-title: "";
    --pricing-10-body: "";
    --pricing-10-features: "";
    --pricing-11-title: "";
    --pricing-11-body: "";
    --pricing-11-features: "";
    --pricing-12-title: "";
    --pricing-12-body: "";
    --pricing-12-features: "";
    /* REC backdrop word — glitch mono (matches matrix text) */
    --rec-tools-font: var(--glitch-font);
    /* Fallback only — the runtime fits this to the viewport width per frame. */
    --rec-tools-size: clamp(72px, 18vw, 240px);
    --rec-tools-color-start: #ffffff; /* timecode reads as camera HUD white */
    --rec-tools-color: #4400ff;
    --rec-tools-tracking: 0.02em; /* was 0.14em — too open */
    --rec-knockout-color: #000000; /* black band between REC ring + iris */
  }
  /* ==========================================================================
     CORE CONFIGURATION & UTILITIES
     ========================================================================== */
  html { scroll-behavior: auto !important; overflow-x: hidden !important; }
  /* Scroll works; chrome stays out of the composition. */
  html,
  body,
  * {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  *::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }
  /* Page plate: pure black. Kill leftover Webflow gradients/images. */
  html,
  body.page,
  .page {
    background-color: var(--brand-bg) !important;
    background-image: none !important;
  }
  .interactive-fluid-gradient_scripts,
  .interactive-fluid-gradient_script,
  [class*="interactive-fluid-gradient"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  #rec-btn, .rec-btn { display: none !important; }
  .glitch-matrix-text {
    font-family: var(--glitch-font) !important;
    color: color-mix(
      in srgb,
      var(--glitch-color-end) calc(var(--glitch-scroll-t, 0) * 100%),
      var(--glitch-color-start)
    ) !important;
  }
  /* Wire knockout is punched per character by the runtime — no pixel mask here,
     so glyphs are dropped whole instead of sliced mid-stroke. */
  .glitch-matrix-text-layer {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    pointer-events: none !important;
  }
  /* Glitch plate lives ONLY inside the iris clip; armed by runtime (.is-lit).
     Do not paint black during REC-only — that read as a plate behind the rec ring.
     BG + text color deltas: start → end via --glitch-scroll-t (runtime). */
  .glitch-matrix-bg {
    background-color: transparent !important;
    opacity: 1 !important;
  }
  .glitch-matrix-bg.is-lit {
    background-color: color-mix(
      in srgb,
      color-mix(
        in srgb,
        var(--glitch-bg-end) calc(var(--glitch-scroll-t, 0) * 100%),
        var(--glitch-bg-start)
      ) calc(var(--glitch-bg-opacity) * 100%),
      transparent
    ) !important;
  }
  /* ==========================================================================
     1. GLOBAL PRELOADER
     ========================================================================== */
  .preloader-wrapper { position: fixed !important; top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100vw !important; height: 100dvh !important; z-index: 9999 !important; background-color: var(--preloader-bg); display: flex !important; align-items: center !important; justify-content: center !important; transition: opacity 1s ease !important; will-change: opacity; }
  .preloader-wrapper * { transition: opacity 0.8s ease !important; }
  .preloader-wrapper[style*='opacity: 0'] *, .preloader-wrapper[style*='opacity: 0.0'] * { opacity: 0 !important; }
  /* After audio commit, kill the black plate — base rule uses display:flex !important
     which otherwise beats inline display:none and can leave REC/camera covered. */
  body.app-ready .preloader-wrapper,
  .preloader-wrapper.is-cleared {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  /* Width shrink-wraps the label so .progress-track (100%) matches the text.
     Stack: symbol → text → 1px hairline bar; equal gap; glow must not clip. */
  .preload-progress-bar-wrapper { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: max-content !important; max-width: min(86vw, 520px) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: var(--preload-label-gap) !important; transition: opacity 0.6s ease; z-index: 2; overflow: visible; }
  /* Text off: drop the label from flow, pull logo toward the bar, fixed track width. */
  .preload-progress-bar-wrapper.is-no-text {
    width: var(--preload-bar-width, 220px) !important;
    max-width: min(86vw, var(--preload-bar-width, 220px)) !important;
    gap: var(--preload-no-text-gap, 16px) !important;
  }
  .preload-progress-bar-wrapper.is-no-text .preload-text {
    display: none !important;
  }
  .preload-logo { width: var(--preload-logo-size, 84px); height: 53px; display: block; flex: none; margin: 0; overflow: visible; shape-rendering: geometricPrecision; }
  .progress-track { width: 100%; height: 1px; flex: none; background: rgba(255, 255, 255, 0.14); overflow: visible; border-radius: 0; }
  .progress-fill {
    width: 0%;
    height: 100%;
    background: var(--brand-accent);
    box-shadow:
      0 0 4px var(--brand-accent),
      0 0 10px var(--brand-accent-glow),
      0 0 18px var(--brand-accent-glow);
    transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* In-flow inside the bar wrapper — sits directly above the track. */
  .preload-text {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
    flex: none !important;
    z-index: 3 !important;
    color: var(--brand-accent) !important;
    font-family: var(--font-heading-regular) !important;
    font-size: clamp(14px, 1.6vw, 18px) !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    transition: opacity 0.6s ease !important;
    pointer-events: none !important;
  }
  /* ==========================================================================
     2. GLOBAL SEAMLESS AUDIO WIDGET
     Visual size via transform scale (0.75 = −25%). Do not rewrite pill translateX math.
     ========================================================================== */
  .global-audio-widget {
    --audio-widget-scale: 0.75;
    /* Volume slot stays fixed; track is a shorter scale inside it. */
    --audio-vol-slot: 135px;
    --audio-vol-track: 84px;
    --audio-vol-gap: 12px;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    z-index: 10000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0px;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0) !important;
    transform-origin: center center;
    transition: visibility 0.8s ease, opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), top 1.2s cubic-bezier(0.22, 1, 0.36, 1), gap 1.2s ease !important;
    will-change: transform, opacity;
  }
  .global-audio-widget.is-visible { visibility: visible; opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(var(--audio-widget-scale)) !important; }
  .global-audio-widget.is-minimized { visibility: visible; display: flex !important; top: 30px !important; transform: translate(-50%, 0) scale(var(--audio-widget-scale)) !important; gap: 8px; }
  /*
   * Glass shell — concentric nook around .pill-active-bg.
   * .pill-active-bg is already inset 8px from .audio-pill-wrapper on top/left/bottom.
   * Extra shell pad on those sides stacks only on the left (flex child fills Y), so
   * hug the wrapper on top/left/bottom; pad only the end for the volume thumb.
   */
  .global-audio-widget.is-visible,
  .global-audio-widget.is-minimized {
    --audio-shell-pad-end: 8px;
    padding: 0 var(--audio-shell-pad-end) 0 0;
    border-radius: 999px;
    background: transparent;
    backdrop-filter: blur(var(--glass-panel-blur, 15px));
    -webkit-backdrop-filter: blur(var(--glass-panel-blur, 15px));
    /* Drop shadow + 0.5px hairline — softens knarled radius clips with backdrop-filter */
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(255, 255, 255, 0.16);
    overflow: hidden;
    box-sizing: border-box;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .global-audio-widget.is-visible::after,
  .global-audio-widget.is-minimized::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border-bottom: 2px solid var(--brand-accent);
    pointer-events: none;
    z-index: 10;
  }
  .audio-pill-wrapper { position: relative; display: inline-flex; align-items: center; justify-content: center; background: transparent; border-radius: 100px; padding: 8px; z-index: 1; overflow: hidden; }
  .pill-active-bg { position: absolute; top: 8px; bottom: 8px; left: 8px; width: 80px; background: transparent; border-radius: 100px; z-index: -1; transform: translateX(85px); opacity: 0; transition: transform 0.6s cubic-bezier(0.87, 0, 0.13, 1), background 0.4s ease, box-shadow 0.6s ease, opacity 0.4s ease; will-change: transform, opacity; }
  .pill-btn { font-family: var(--audio-font) !important; width: 80px; background: transparent !important; color: var(--audio-text-inactive); border: none; padding: 12px 0; border-radius: 100px; cursor: pointer; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; transition: color 0.3s ease; text-align: center; box-shadow: none !important; }
  .pill-btn.active { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
  .audio-pill-wrapper.state-on #btn-sound-on,
  .audio-pill-wrapper.state-off #btn-sound-off { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
  .pill-divider { font-family: var(--audio-font) !important; width: 90px; color: var(--audio-text-active); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; text-align: center; pointer-events: none; background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; transition: width 1s cubic-bezier(0.22, 1, 0.36, 1), color 0.8s ease; overflow: hidden; white-space: nowrap; }
  .global-audio-widget.is-minimized .pill-divider { width: 70px; color: var(--audio-text-inactive); font-size: 12px; }
  .audio-pill-wrapper.state-off .pill-active-bg { transform: translateX(0); background: var(--brand-accent); box-shadow: 0 4px 20px var(--brand-accent-glow); opacity: 1; }
  .audio-pill-wrapper.state-on .pill-active-bg { transform: translateX(170px); background: var(--brand-accent); box-shadow: 0 4px 20px var(--brand-accent-glow); opacity: 1; }
  .global-audio-widget.is-minimized .audio-pill-wrapper.state-on .pill-active-bg { transform: translateX(150px); }
  .volume-container { width: 0px; opacity: 0; overflow: hidden; pointer-events: none; display: flex; align-items: center; justify-content: flex-start; gap: var(--audio-vol-gap, 12px); transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 1.2s ease; }
  .global-audio-widget.is-minimized .volume-container { width: var(--audio-vol-slot, 135px); opacity: 1; pointer-events: auto; }
  /* EQ bars replace the old speaker SVG — fake levels, brand accent. */
  #speaker { display: none !important; }
  .audio-eq {
    --eq-amp: 0.7;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 20px;
    height: 18px;
    flex-shrink: 0;
    gap: 2.5px;
  }
  .audio-eq span {
    display: block;
    width: 3.5px;
    height: 100%;
    border-radius: 1px;
    background: var(--brand-accent);
    transform: scaleY(0.22);
    transform-origin: center bottom;
    transition: transform 0.25s ease, opacity 0.25s ease;
    opacity: 0.45;
  }
  .global-audio-widget:has(.state-on) .audio-eq span {
    opacity: 1;
    animation: audio-eq-bar var(--eq-dur, 0.36s) ease-in-out infinite alternate;
  }
  .audio-eq span:nth-child(1) { --eq-dur: 0.32s; animation-delay: 0s; }
  .audio-eq span:nth-child(2) { --eq-dur: 0.40s; animation-delay: -0.12s; }
  .audio-eq span:nth-child(3) { --eq-dur: 0.26s; animation-delay: -0.20s; }
  .audio-eq span:nth-child(4) { --eq-dur: 0.46s; animation-delay: -0.05s; }
  @keyframes audio-eq-bar {
    from { transform: scaleY(0.2); }
    to { transform: scaleY(var(--eq-amp, 0.7)); }
  }
  @media (prefers-reduced-motion: reduce) {
    .global-audio-widget:has(.state-on) .audio-eq span {
      animation: none;
      transform: scaleY(calc(0.35 + var(--eq-amp, 0.7) * 0.35));
    }
  }
  #global-volume { -webkit-appearance: none; width: var(--audio-vol-track, 84px); background: transparent; cursor: pointer; flex-shrink: 0; }
  #global-volume::-webkit-slider-runnable-track { height: 4px; background: var(--card-border-line); border-radius: 2px; }
  #global-volume::-webkit-slider-thumb { -webkit-appearance: none; height: 14px; width: 14px; border-radius: 50%; background: var(--brand-accent); margin-top: -5px; transition: transform 0.2s; }
  #global-volume::-webkit-slider-thumb:hover { transform: scale(1.3); }
  /* Narrow phones: extra shrink on top of global −25% (was 0.82 alone). */
  @media (max-width: 420px) {
    .global-audio-widget.is-minimized {
      top: 18px !important;
      gap: 4px;
      transform: translate(-50%, 0) scale(calc(var(--audio-widget-scale) * 0.82)) !important;
    }
  }
  /* Short viewports: free vertical room for the wall player (tokens only — layout architecture unchanged). */
  @media (max-height: 700px) {
    :root {
      --audio-clear-top: 100px;
      --wall-text-zone: 16dvh;
      --wall-text-video-gap: 1.5dvh;
      --wall-player-bottom: 11dvh;
      --dot-nav-bottom: 7dvh;
    }
  }
  @media (max-height: 560px) {
    :root {
      --audio-clear-top: 72px;
      --wall-text-zone: 14dvh;
      --wall-text-video-gap: 1dvh;
      --wall-player-bottom: 9dvh;
      --dot-nav-bottom: 5dvh;
    }
  }
  /* ==========================================================================
     3. LOGO WORDMARK (coded vector — not Designer embed)
     Parallel center-out: i + m start together; i staggers faster so both end even.
     Starts on .is-revealing — delayed after standalone/audio widget settles.
     ========================================================================== */
  /* Host spacer above wordmark: stellar = 100px; prod Webflow uses 4em (~56px). */
  .spacer:has(+ #logo-wordm) {
    height: 100px !important;
  }
  #logo-wordm.logo-wordm-div {
    position: relative;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: stretch;
    /* Fixed width — small enough for all orientations; no vw shrink. */
    max-width: 224px;
    width: 100%;
    margin: 30px auto;
    --wordmark-i-stagger: 40ms;
    --wordmark-m-stagger: 120ms;
    --path-max-i: 0;
    --path-max-m: 0;
  }
  #logo-wordm .logo-wordm {
    display: block;
    width: 100%;
    margin: 0 auto;
  }
  #logo-wordm .logo-wordm svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
  }
  #logo-wordm .wordmark-i,
  #logo-wordm .wordmark-m {
    opacity: 0;
    transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* Enter: center-out. Exit: outer-in (equal-opposite). */
  #logo-wordm.is-revealing .wordmark-i {
    fill: var(--wordmark-introspective);
    opacity: 1;
    transition-delay: calc(var(--path-i, 0) * var(--wordmark-i-stagger));
  }
  #logo-wordm.is-revealing .wordmark-m {
    fill: var(--wordmark-media);
    opacity: 1;
    transition-delay: calc(var(--path-i, 0) * var(--wordmark-m-stagger));
  }
  #logo-wordm:not(.is-revealing) .wordmark-i {
    fill: var(--wordmark-introspective);
    transition-delay: calc((var(--path-max-i, 0) - var(--path-i, 0)) * var(--wordmark-i-stagger));
  }
  #logo-wordm:not(.is-revealing) .wordmark-m {
    fill: var(--wordmark-media);
    transition-delay: calc((var(--path-max-m, 0) - var(--path-i, 0)) * var(--wordmark-m-stagger));
  }
  @media (prefers-reduced-motion: reduce) {
    #logo-wordm .wordmark-i,
    #logo-wordm .wordmark-m {
      opacity: 1;
      transition: none;
    }
  }
  /* ==========================================================================
     4. SACRED WALL & PLAYER STYLES
     ========================================================================== */
  /* Section opacity driven by runtime (--wall-section-opacity): load-in only.
     Pulls up over brand-wheel so the wall sits on top of the wheel with no middle gap. */
  .video-wall {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    opacity: var(--wall-section-opacity, 0) !important;
    transition: opacity 0.5s ease-in-out !important;
    z-index: 4 !important;
    margin-top: calc(-1 * var(--brand-under-wall, 80vh)) !important;
  }
  .video-wall.is-scroll-fading { transition: none !important; }
  /* Transparent frame: the opaque video window itself occludes the next beat. */
  .video-sticky {
    position: sticky !important;
    top: 0 !important;
    height: 100dvh !important;
    width: 100% !important;
    max-width: 100% !important;
    background-color: transparent !important;
    overflow: hidden !important;
    z-index: 4 !important;
    /* Opaque + no lift — presence vars are not used for chrome (avoids enter bite). */
    opacity: 1;
    transform: none;
    will-change: auto;
  }
  .video-track { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; height: 100dvh !important; will-change: transform; margin: 0 !important; padding: 0 !important; position: relative !important; z-index: 1 !important; }
  /* min-width:0 kills flex min-content blowout (was sizing cells to 100dvh wide on mobile). */
  .video-track .video-item {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100dvh !important;
    display: block !important;
    position: relative !important;
    box-sizing: border-box !important;
    /* Media is absolutely placed — no padding (padding collapsed % height before). */
    padding: 0 !important;
    overflow: hidden !important;
  }
  /*
    Explicit box matching .wall-copy-inner (--wall-column-width):
    shared fluid width (inset + aspect cap like standalone), centered under copy.
    Height from aspect-ratio on the embed box (NOT on <video>); max-height = slot.
    Never use height:100% — it failed and shrink-wrapped to intrinsic video width.
  */
  .video-track .video-item .w-embed {
    position: absolute !important;
    top: calc(var(--wall-copy-top) + var(--wall-text-zone) + var(--wall-text-video-gap)) !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: var(--wall-column-width) !important;
    height: auto !important;
    max-width: none !important;
    max-height: var(--wall-player-slot-h) !important;
    min-width: 0 !important;
    aspect-ratio: var(--wall-player-aspect) !important;
    margin: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
    /* Opaque plate — video stays at opacity 1; shade dims instead of punching holes. */
    background-color: #000 !important;
    border-radius: 32px !important;
    overflow: hidden !important;
  }
  .locked-video,
  .video-track .locked-video,
  .video-track video.locked-video,
  .locked-video.is-square,
  .locked-video.is-portrait {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: unset !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 32px !important;
    background-color: #000 !important;
    display: block !important;
    opacity: 1 !important;
  }
  /* Black window over each clip — fades out toward center, in when off-center. */
  .wall-video-shade {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    border-radius: 32px !important;
    background: #000 !important;
    opacity: 0;
    pointer-events: none !important;
  }
  /* Permanent faint dark-grey ring + brand sweep on top (transform beam —
     background-position freezes under .video-track translate3d). */
  .video-track .video-item .w-embed > .shimmer-border {
    z-index: 20;
    border-radius: 32px;
    background: rgba(70, 70, 70, 0.45);
    animation: none !important;
    overflow: hidden;
    opacity: var(--wall-border-on, 1);
  }
  .video-track .video-item .w-embed > .shimmer-border::before,
  .standalone-container > .shimmer-border::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      transparent 0%,
      transparent 38%,
      var(--shimmer-border-2) 48%,
      var(--shimmer-border-3) 50%,
      var(--shimmer-border-2) 52%,
      transparent 62%,
      transparent 100%
    );
    transform: translate3d(-70%, 0, 0);
  }
  .video-track .video-item .w-embed > .shimmer-border::before {
    opacity: 0;
  }
  .video-track .video-item .w-embed > .shimmer-border.is-wall-sweep::before {
    opacity: 1;
    animation: videoShimmerBeam var(--bDur, 8.7s) linear 0s infinite;
  }
  .standalone-container > .shimmer-border::before {
    opacity: 1;
    animation: videoShimmerBeam var(--bDur, 8.7s) linear 0s infinite;
  }
  @keyframes videoShimmerBeam {
    /* Fully clear left → fully clear right so the loop never hard-cuts a visible tail. */
    from { transform: translate3d(-70%, 0, 0); }
    to { transform: translate3d(20%, 0, 0); }
  }
  .video-track .mute_button {
    position: absolute !important;
    z-index: 5 !important;
  }
  .mute_button { pointer-events: auto !important; cursor: pointer !important; position: relative; display: flex; align-items: center; justify-content: center; }
  .mute_button > div { position: absolute !important; transition: opacity 0.2s ease !important; }
  .mute_button svg { pointer-events: none !important; }
  .mute_button > div:nth-child(1) { opacity: 1 !important; }
  .mute_button > div:nth-child(2) { opacity: 0 !important; }
  .mute_button.is-unmuted > div:nth-child(1) { opacity: 0 !important; }
  .mute_button.is-unmuted > div:nth-child(2) { opacity: 1 !important; }
  /* Canvas text slides hidden -- copy driven from GSS vars via footer JS */
  .text-overlay { position: absolute !important; top: var(--wall-copy-top) !important; left: 0 !important; width: 100% !important; height: var(--wall-text-zone) !important; z-index: 10 !important; pointer-events: none !important; }
  .text-container {
    width: var(--wall-column-width) !important;
    max-width: none !important;
    margin: 0 auto !important;
    position: relative !important;
    height: 100% !important;
  }
  .text-slide { display: none !important; }
  .wall-copy-overlay { position: absolute !important; top: var(--wall-copy-top) !important; left: 0 !important; width: 100% !important; height: var(--wall-text-zone) !important; z-index: 11 !important; pointer-events: none !important; display: flex !important; align-items: flex-end !important; box-sizing: border-box !important; }
  .wall-copy-inner {
    position: relative !important;
    width: var(--wall-column-width) !important;
    max-width: none !important;
    margin: 0 auto !important;
    height: 100% !important;
    padding-bottom: 0 !important;
  }
  /* Slides stay opaque — body readout is the motion; title fades lightly */
  .wall-copy-slide {
    position: absolute !important;
    left: 50% !important;
    bottom: 0 !important;
    transform: translateX(-50%) !important;
    /* Fill .wall-copy-inner — do NOT re-apply --wall-column-width here:
       its 90% term would resolve against the already-sized column and shrink copy. */
    width: 100% !important;
    max-width: none !important;
    opacity: 1 !important;
    transition: none !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }
  .wall-copy-slide.active { z-index: 1 !important; }
  .wall-copy-title {
    font-family: var(--wall-title-font) !important;
    font-size: var(--wall-title-size) !important;
    color: var(--wall-title-color) !important;
    -webkit-text-fill-color: var(--wall-title-color) !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    margin: 0 0 0.45em !important;
    opacity: 0 !important;
    transform: translate3d(calc(-1 * var(--wall-title-nudge, 1.35rem)), 0, 0) !important;
    transition:
      opacity var(--wall-title-duration, 0.38s) var(--wall-title-ease, ease),
      transform var(--wall-title-duration, 0.38s) var(--wall-title-ease, ease) !important;
    will-change: opacity, transform;
  }
  .wall-copy-slide.active .wall-copy-title {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
  }
  .wall-copy-body {
    position: relative !important;
    font-family: var(--wall-body-font) !important;
    font-size: var(--wall-body-size) !important;
    color: var(--wall-body-color) !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    max-width: var(--wall-body-max-width) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Full body (invisible) — locks slide height so title stays put while typing */
  .wall-copy-body-sizer {
    visibility: hidden !important;
    pointer-events: none !important;
    display: block !important;
    white-space: pre-wrap !important;
  }
  .wall-copy-body-live {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    white-space: pre-wrap !important;
    color: var(--wall-body-color) !important;
    -webkit-text-fill-color: var(--wall-body-color);
  }
  /* Word at the type frontier leads in brand, then settles to the body color */
  .wall-copy-body-live .wall-readout-lead {
    color: var(--brand-accent) !important;
    -webkit-text-fill-color: var(--brand-accent);
    transition:
      color var(--wall-body-lead-settle, 0.45s) ease,
      -webkit-text-fill-color var(--wall-body-lead-settle, 0.45s) ease;
  }
  .wall-copy-body-live.is-settled .wall-readout-lead {
    color: var(--wall-body-color) !important;
    -webkit-text-fill-color: var(--wall-body-color);
  }
  /* Fixed center-to-center pitch — gap never changes with viewport/reflow */
  .video-sticky .dot-nav,
  .dot-nav {
    position: absolute !important;
    bottom: var(--dot-nav-bottom) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    z-index: 99999 !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .video-sticky .dot,
  .dot {
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 24px !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    transition: none !important;
    /* Fade + fan both use staggered --dot-fan (center-out, each dot independent) */
    opacity: var(--dot-fan, 0) !important;
    visibility: visible !important;
    transform: translate3d(
      calc((1 - var(--dot-fan, 0)) * var(--fan-x, 0px)),
      0,
      0
    ) !important;
    will-change: opacity, transform;
  }
  .video-sticky .dot::after,
  .dot::after {
    content: '' !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    /* --dot-rec-t: 0 white → 1 REC red (wall→camera optical handoff) */
    background-color: color-mix(
      in srgb,
      #e8000a calc(var(--dot-rec-t, 0) * 100%),
      rgba(255, 255, 255, 0.3)
    ) !important;
    box-shadow: none !important;
    transition: background-color 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
    transform: scale(1) !important;
  }
  .video-sticky .dot:hover::after,
  .dot:hover::after {
    background-color: color-mix(
      in srgb,
      #e8000a calc(var(--dot-rec-t, 0) * 100%),
      rgba(255, 255, 255, 0.8)
    ) !important;
    transform: scale(1.3) !important;
  }
  .video-sticky .dot.active::after,
  .dot.active::after {
    background-color: color-mix(
      in srgb,
      #e8000a calc(var(--dot-rec-t, 0) * 100%),
      var(--brand-accent, #4400ff)
    ) !important;
    transform: scale(1.5) !important;
    box-shadow: var(--dot-active-glow) !important;
  }
  /* During REC handoff: kill hover/active scale so collapse reads as one red cluster */
  .video-sticky .dot.is-rec-flush::after,
  .dot.is-rec-flush::after,
  .video-sticky .dot.is-rec-flush:hover::after,
  .dot.is-rec-flush:hover::after,
  .video-sticky .dot.is-rec-flush.active::after,
  .dot.is-rec-flush.active::after {
    transition: none !important;
    transform: scale(1) !important;
    box-shadow: none !important;
  }
  /* Optical bridge: collapsed red cluster → center REC iris (separate from .dot) */
  .rec-handoff-seed {
    position: fixed;
    left: 0;
    top: 0;
    width: 10px;
    height: 10px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    background: #e8000a;
    pointer-events: none;
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    will-change: opacity;
  }
  /* ==========================================================================
     5. STANDALONE PLAYER
     ========================================================================== */
  .standalone-container {
    display: block !important;
    /* Width capped so height (from aspect) never exceeds --standalone-max-h */
    width: min(
      90vw,
      1200px,
      calc(var(--standalone-max-h) * var(--standalone-aspect))
    ) !important;
    max-width: min(90vw, 1200px) !important;
    margin: 40px auto !important;
    background-color: transparent !important;
    align-self: center !important;
    justify-self: center !important;
    position: relative !important;
    aspect-ratio: var(--standalone-aspect) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: var(--standalone-max-h) !important;
    border-radius: 32px !important;
    z-index: 1;
  }
  /* Permanent faint dark-grey ring + brand transform beam on top */
  .standalone-container > .shimmer-border {
    z-index: 20;
    border-radius: 32px;
    background: rgba(70, 70, 70, 0.45);
    animation: none !important;
    overflow: hidden;
    opacity: 0;
    transition: opacity 1.2s ease;
  }
  body.app-ready .standalone-container.is-in-view > .shimmer-border {
    opacity: var(--standalone-border-on, 1);
  }
  .standalone-container .w-embed { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 2; -webkit-clip-path: inset(50% round 32px) !important; clip-path: inset(50% round 32px) !important; opacity: 0 !important; transition: -webkit-clip-path 1.2s cubic-bezier(0.22, 1, 0.36, 1), clip-path 1.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 1.2s ease !important; will-change: clip-path, opacity; }
  .standalone-video {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 32px !important;
  }
  body.app-ready .standalone-container.is-in-view .w-embed { -webkit-clip-path: inset(0% round 32px) !important; clip-path: inset(0% round 32px) !important; opacity: 1 !important; }
  .echo-ring { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 2px solid var(--echo-ring-start, #f13918); border-radius: 32px; opacity: 0; pointer-events: none; z-index: 0; transform: scale(0.9); will-change: transform, opacity; }
  @keyframes echo-expand { 0% { transform: scale(0.85); opacity: 0; border-color: var(--echo-ring-start, #f13918); } 20% { opacity: 1; border-color: var(--echo-ring-start, #f13918); } 100% { transform: scale(1.15); opacity: 0; border-color: var(--echo-ring-end, var(--brand-accent)); } }
  body.app-ready .standalone-container.is-in-view .echo-ring.ring-1 { animation: echo-expand 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards; }
  body.app-ready .standalone-container.is-in-view .echo-ring.ring-2 { animation: echo-expand 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards; }
  body.app-ready .standalone-container.is-in-view .echo-ring.ring-3 { animation: echo-expand 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards; }
  body.app-ready .standalone-container.is-in-view .echo-ring.ring-4 { animation: echo-expand 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards; }
  body.app-ready .standalone-container.is-in-view .echo-ring.ring-5 { animation: echo-expand 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.45s forwards; }
  /* ==========================================================================
     5b. ABOUT + STAT CARDS (glass = PC scatter lighter cards)
     ========================================================================== */
  .about-section {
    position: relative;
    z-index: 3;
    width: 100%;
    box-sizing: border-box;
    margin-top: calc(var(--standalone-stage-bottom, 36vh) + var(--about-shift-down, 0vh));
    padding: var(--about-pad-y) var(--about-pad-x);
    padding-top: max(var(--about-pad-y), var(--audio-clear-top));
    padding-bottom: calc(var(--about-pad-y) + var(--about-hold-pad, 0vh));
    display: flex;
    justify-content: center;
    opacity: var(--about-presence, 1);
    transform: translate3d(0, var(--about-lift, 0px), 0);
    will-change: opacity, transform;
  }
  .about-div {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--about-gap);
    width: 100%;
    max-width: var(--about-max-width);
  }
  .about-copy {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .about-title {
    font-family: var(--font-heading-regular);
    font-weight: 600;
    font-size: var(--about-title-size);
    line-height: 1.2;
    color: var(--brand-accent);
    -webkit-text-fill-color: var(--brand-accent);
    margin: 0 0 15px;
    text-align: left;
  }
  .about-body {
    position: relative;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--about-body-size);
    line-height: 1.7;
    color: var(--text-muted);
    margin: 0;
    text-align: left;
  }
  .about-body-sizer {
    visibility: hidden;
    pointer-events: none;
    display: block;
    white-space: pre-wrap;
  }
  .about-body-live {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    white-space: pre-wrap;
    color: var(--text-muted);
    -webkit-text-fill-color: var(--text-muted);
  }
  .about-body-live .wall-readout-lead {
    color: var(--brand-accent);
    -webkit-text-fill-color: var(--brand-accent);
    transition:
      color var(--wall-body-lead-settle, 0.45s) ease,
      -webkit-text-fill-color var(--wall-body-lead-settle, 0.45s) ease;
  }
  .about-body-live.is-settled .wall-readout-lead {
    color: var(--text-muted);
    -webkit-text-fill-color: var(--text-muted);
  }
  /* Layout slot for parked CTA avatar (right of About copy). */
  .about-avatar-park {
    position: relative;
    flex: 0 1 42%;
    min-width: 0;
    width: 100%;
    max-width: var(--cta-park-max);
    aspect-ratio: 1;
    align-self: center;
    border-radius: var(--about-image-radius);
    pointer-events: none;
  }
  .about-avatar-park .stellar-cta {
    pointer-events: auto;
  }

  /* Code-driven Create CTA — fixed overlay; JS event-morphs to park slot. */
  @keyframes stellar-cta-idle-sweep {
    /* Slight Y drift so the elliptical highlight reads as a curved front, not a flat bar. */
    0%, 100% { background-position: 0% 42%; }
    50% { background-position: 100% 58%; }
  }
  .stellar-cta {
    position: fixed;
    z-index: 500;
    left: 0;
    top: 0;
    width: var(--cta-rest-size);
    height: var(--cta-rest-size);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    /* Opaque shell — AA fringe matches visible face, never page content. */
    background: var(--cta-orange-mid);
    cursor: pointer;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    will-change: opacity, transform;
    pointer-events: auto;
    opacity: calc(var(--cta-presence, 1) * var(--cta-enter, 0));
    transform: scale(calc(0.72 + 0.28 * var(--cta-enter, 0)));
    transform-origin: center center;
    transition:
      transform var(--cta-enter-ms) var(--cta-enter-ease),
      background 0s;
  }
  .stellar-cta.is-entered {
    --cta-enter: 1;
  }
  .stellar-cta.is-parked,
  .stellar-cta.is-morphing,
  .about-avatar-park .stellar-cta {
    /* Beat resting :hover grow while seating into About. */
    transform: none !important;
  }
  /* Rest hover/hold only — never while morphing/parked into About. */
  .stellar-cta.is-resting:not(.is-morphing):not(.is-parked):hover,
  .stellar-cta.is-resting:not(.is-morphing):not(.is-parked):focus-visible,
  .stellar-cta.is-resting:not(.is-morphing):not(.is-parked):active {
    background: var(--cta-face-bg-hover);
    transform: scale(
      calc((0.72 + 0.28 * var(--cta-enter, 0)) * var(--cta-hover-scale))
    );
  }
  /* Park / morph: shell matches brand so the orange disc never bleeds under the avatar. */
  .stellar-cta:not(.is-resting) {
    background: var(--brand-accent);
    transition: none;
  }
  .stellar-cta.is-wall-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity var(--cta-wall-fade-ms) ease;
  }
  .stellar-cta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
  }
  .stellar-cta-face,
  .stellar-cta-avatar {
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }
  /* Resting only: pull orange face off the clip edge so brand shell owns the AA rim. */
  .stellar-cta.is-resting .stellar-cta-face,
  .stellar-cta.is-resting .stellar-cta-avatar {
    inset: 1.5px;
  }
  .stellar-cta-face {
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    /* Living idle: curved elliptical highlight sweeping orange hues. */
    background-color: var(--cta-orange-mid);
    background-image: radial-gradient(
      160% 95% at 50% 50%,
      var(--cta-orange-bright) 0%,
      var(--cta-orange-mid) 34%,
      var(--cta-orange-deep) 58%,
      var(--cta-orange-deep) 100%
    );
    background-size: 240% 200%;
    background-position: 0% 42%;
    background-repeat: no-repeat;
    color: #fff;
    opacity: calc(1 - var(--cta-park, 0));
    overflow: hidden;
    pointer-events: none;
  }
  .stellar-cta.is-resting.is-entered .stellar-cta-face {
    animation: stellar-cta-idle-sweep var(--cta-idle-ms) ease-in-out infinite;
  }
  /* One-shot brand wipe on hover enter; then fades so the held brand loop shows. */
  .stellar-cta-face::before {
    content: '';
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: 0;
    width: 180%;
    /* No radius — parent clips; avoids a second circular AA fringe. */
    border-radius: 0;
    /* 58% × 180% ≈ 104% of the disc — solid brand past the right edge when settled. */
    /* Curved leading edge (ellipse), not a flat 45°/90° cut. */
    background: radial-gradient(
      70% 140% at 0% 50%,
      var(--cta-face-bg-hover) 0%,
      var(--cta-face-bg-hover) 52%,
      color-mix(in srgb, var(--cta-face-bg-hover) 45%, transparent) 68%,
      transparent 82%
    );
    transform: translateX(-100%);
    opacity: 1;
    transition:
      transform var(--cta-hover-ms) cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0s;
    z-index: 0;
    pointer-events: none;
  }
  /* Held hover: same curved elliptical loop, brand-hue range (rest only). */
  .stellar-cta.is-resting:not(.is-morphing):not(.is-parked):hover .stellar-cta-face,
  .stellar-cta.is-resting:not(.is-morphing):not(.is-parked):focus-visible .stellar-cta-face {
    animation: stellar-cta-idle-sweep var(--cta-idle-ms) ease-in-out infinite;
    background-color: var(--cta-brand-mid);
    background-image: radial-gradient(
      160% 95% at 50% 50%,
      var(--cta-brand-bright) 0%,
      var(--cta-brand-mid) 34%,
      var(--cta-brand-deep) 58%,
      var(--cta-brand-deep) 100%
    );
    background-size: 240% 200%;
    background-position: 0% 42%;
    background-repeat: no-repeat;
  }
  .stellar-cta.is-resting:not(.is-morphing):not(.is-parked):hover .stellar-cta-face::before,
  .stellar-cta.is-resting:not(.is-morphing):not(.is-parked):focus-visible .stellar-cta-face::before {
    transform: translateX(0);
    opacity: 0;
    transition:
      transform var(--cta-hover-ms) cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.3s ease var(--cta-hover-ms);
  }
  .stellar-cta.is-resting:not(.is-morphing):not(.is-parked):not(:hover):not(:focus-visible) .stellar-cta-face::before {
    transition:
      transform var(--cta-hover-ms) cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0s;
  }
  /* Park morph only — brand overlay immediately (never orange), fading to reveal avatar. */
  .stellar-cta:not(.is-resting) .stellar-cta-face {
    background: var(--brand-accent);
    animation: none;
    transition: none;
  }
  .stellar-cta:not(.is-resting) .stellar-cta-face::before {
    display: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .stellar-cta.is-resting.is-entered .stellar-cta-face {
      animation: none;
    }
  }
  .stellar-cta-label {
    position: relative;
    z-index: 1;
    font-family: var(--font-heading-regular);
    font-weight: 600;
    font-size: clamp(10px, 1.15vw, 12px);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    color: #fff;
    -webkit-text-fill-color: #fff;
  }
  .stellar-cta-avatar {
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Hidden at rest — nothing under the disc to fringe through. Crossfades in on park. */
    opacity: var(--cta-park, 0);
    pointer-events: none;
  }
  .stellar-cta.is-parked {
    border-radius: var(--about-image-radius);
  }

  .stat-chapter {
    position: relative;
    z-index: 3;
    width: 100%;
    height: var(--stat-chapter-vh, 160vh);
    /* Chapter is a tall overlay above reviews — must not steal clicks */
    pointer-events: none;
  }
  .stat-section {
    position: sticky;
    top: var(--stat-sticky-top, 0px);
    z-index: 3;
    width: 100%;
    min-height: 100dvh;
    box-sizing: border-box;
    padding: var(--stat-pad-y) var(--stat-pad-x);
    /* Park in the upper band — ABOVE the videowall player forever (not mid/low). */
    padding-top: max(
      var(--stat-pad-y),
      calc(var(--stat-sticky-top, 0px) + 3vh)
    );
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
    transform-origin: center center;
    pointer-events: none;
  }
  .stat-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: var(--stat-gap);
    width: 100%;
    max-width: min(1200px, 100%);
    pointer-events: none;
    /* Rises to keep padding above .video-wall — never overlays wall copy/player */
    transform: translate3d(0, var(--stat-wall-clear, 0px), 0);
    will-change: transform;
  }
  .stat-card {
    position: relative;
    /* Never interactive — cards overlap reviews (pull-up) and must not eat dot clicks */
    pointer-events: none;
    flex: 1 1 var(--stat-card-min);
    width: 100%;
    max-width: var(--stat-card-max);
    aspect-ratio: var(--stat-card-aspect, auto);
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: var(--stat-card-pad);
    border-radius: 12px;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: var(--card-shadow);
    background: var(--glass-panel-bg, rgba(18, 18, 26, 0.42));
    /* Glass blur must live on the card shell (not a child / not when ancestor transform pins) */
    backdrop-filter: blur(var(--stat-blur, var(--glass-panel-blur, 15px)));
    -webkit-backdrop-filter: blur(var(--stat-blur, var(--glass-panel-blur, 15px)));
    opacity: var(--stat-item-opacity, 1);
    transform: translate3d(
      0,
      calc((1 - var(--stat-item-t, 1)) * var(--stat-card-lift, var(--stat-stagger-lift, 40vh))),
      0
    );
    will-change: opacity, transform;
  }
  .stat-card[data-stat-settled="true"] {
    opacity: 1;
    /* Keep transform on --stat-item-t — transform:none snaps exit */
    will-change: auto;
    backdrop-filter: blur(var(--stat-blur, var(--glass-panel-blur, 15px)));
    -webkit-backdrop-filter: blur(var(--stat-blur, var(--glass-panel-blur, 15px)));
  }
  .stat-card > *:not(.card-glass-bg):not(.card-border):not(.shimmer-inner):not(.shimmer-border) {
    position: relative;
    z-index: 2;
  }
  .stat-number {
    font-family: var(--font-heading-regular);
    font-weight: 600;
    font-size: var(--stat-number-size);
    line-height: 0.9;
    letter-spacing: -0.02em;
    color: var(--stat-color-rest);
    -webkit-text-fill-color: currentColor;
    margin: 0;
    text-align: center;
    font-variant-numeric: tabular-nums;
    opacity: 0; /* fade in with count — avoid solid white 0 */
  }
  .stat-body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--stat-body-size);
    line-height: 1.35;
    color: var(--stat-body-color, var(--text-muted));
    -webkit-text-fill-color: var(--stat-body-color, var(--text-muted));
    text-align: center;
    margin: 0;
    max-width: 22ch;
    min-height: 2.7em; /* hold space while readout types in */
    flex-shrink: 0;
  }
  @media (max-width: 900px) {
    .about-div {
      flex-direction: column;
    }
    .about-avatar-park {
      flex: 1 1 auto;
      /* Keep park on --cta-park-max (not 70vw) so stacked About doesn't push
         a huge square below the fold on phones / portrait tablets. */
      max-width: var(--cta-park-max);
      width: 100%;
      align-self: center;
    }
  }
  @media (max-width: 720px) {
    .stat-card {
      flex: 0 1 auto;
      width: min(100%, var(--stat-card-max));
      max-width: var(--stat-card-max);
    }
    .stat-chapter {
      height: auto;
      min-height: auto;
    }
    .stat-section {
      position: relative;
      top: auto;
      min-height: 0;
      /* In-flow on mobile — still clear the fixed audio widget */
      padding-top: max(var(--stat-pad-y), var(--audio-clear-top));
      /* Desktop overflow:hidden clips the sticky park; here the section hugs
         content, so the same clip eats the enter lift (cards rise from below). */
      overflow: visible;
    }
  }

  /* Reviews chapter — pull-up under stats + runway after the stacked beat. */
  .reviews-chapter {
    position: relative;
    z-index: 2;
    width: 100%;
    margin-top: calc(-1 * var(--reviews-pull-up, 50vh));
    padding-bottom: var(--reviews-park-vh, 30vh);
    pointer-events: none;
  }
  /* Reviews — in-flow only. Smooth scroll under held cards; no sticky / transform lock. */
  .reviews-section {
    position: relative;
    z-index: 2;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0;
    padding: var(--reviews-pad-y) var(--reviews-pad-x);
    padding-top: max(var(--reviews-pad-y), var(--audio-clear-top));
    display: flex;
    justify-content: center;
    pointer-events: auto;
  }
  .reviews-inner,
  .reviews-slider,
  .reviews-window {
    pointer-events: auto;
  }
  .reviews-inner {
    width: 100%;
    max-width: var(--reviews-max-width);
  }
  .reviews-slider {
    position: relative;
    width: 100%;
  }
  /* Glass shell: blur + fill only. Opacity/transform on this element (or any
     ancestor) kill backdrop sampling — smoke-tested. Presence fades blur/alpha;
     lift/fade live on content + chrome children. */
  .reviews-window {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 280px;
    padding: var(--reviews-window-pad);
    border-radius: var(--reviews-window-radius);
    box-sizing: border-box;
    overflow: hidden;
    background: rgba(18, 18, 26, calc(var(--glass-panel-alpha, 0.42) * var(--reviews-presence, 1)));
    backdrop-filter: blur(calc(var(--reviews-blur, var(--glass-panel-blur, 15px)) * var(--reviews-presence, 1)));
    -webkit-backdrop-filter: blur(calc(var(--reviews-blur, var(--glass-panel-blur, 15px)) * var(--reviews-presence, 1)));
    box-shadow: 0 16px 40px rgba(0, 0, 0, calc(0.5 * var(--reviews-presence, 1)));
  }
  .reviews-window > .reviews-track {
    opacity: var(--reviews-presence, 1);
    transform: translate3d(0, var(--reviews-lift, 0px), 0);
    will-change: opacity, transform;
  }
  /* Dots fan owns opacity — keep lift with the window, not a second fade. */
  .reviews-window > .reviews-dots {
    opacity: 1;
    transform: translate3d(0, var(--reviews-lift, 0px), 0);
    will-change: transform;
  }
  /* Chrome stays pinned to the shell — lifting .card-border under overflow:hidden
     clips the brand accent bottom edge. */
  .reviews-window > .card-border,
  .reviews-window > .shimmer-border,
  .reviews-window > .shimmer-inner {
    opacity: var(--reviews-presence, 1);
  }
  .reviews-window > *:not(.card-glass-bg):not(.card-border):not(.shimmer-inner):not(.shimmer-border) {
    position: relative;
    z-index: 2;
  }
  /* Grid stack: track height = tallest quote so lockup + dots stay put. */
  .reviews-track {
    position: relative;
    display: grid;
    width: 100%;
    flex: 1 1 auto;
  }
  /* Idle = parked right (ready to enter); active = center; leaving = exit left */
  .review-slide {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--reviews-slide-gap);
    opacity: 0;
    transform: translate3d(var(--reviews-slide-offset, 48px), 0, 0);
    pointer-events: none;
    transition:
      opacity var(--reviews-fade-duration, 1.2s) var(--reviews-slide-ease, ease),
      transform var(--reviews-fade-duration, 1.2s) var(--reviews-slide-ease, ease);
  }
  .review-slide.is-active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
  }
  .review-slide.is-leaving {
    opacity: 0;
    transform: translate3d(calc(-1 * var(--reviews-slide-offset, 48px)), 0, 0);
  }
  /* Dots sit inside the glass frame — wall-style pips, same size/position */
  .reviews-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--reviews-dot-gap, 10px);
    padding-top: var(--reviews-dots-pad-top, 16px);
    position: relative;
    z-index: 20;
    flex-shrink: 0;
    pointer-events: auto !important;
  }
  .reviews-dot {
    width: 8px;
    height: 8px;
    margin: 0;
    padding: 0;
    flex: 0 0 8px;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto !important;
    position: relative;
    z-index: 20;
    transition: none;
    opacity: var(--dot-fan, 0);
    transform: translate3d(
      calc((1 - var(--dot-fan, 0)) * var(--fan-x, 0px)),
      0,
      0
    );
    will-change: opacity, transform;
  }
  /* Hit expand — does not change visual pitch */
  .reviews-dot::before {
    content: '';
    position: absolute;
    inset: -12px;
  }
  /* Visible pip — same language as videowall .dot::after, sized to 8px */
  .reviews-dot::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    box-shadow: none;
    transition:
      background-color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    transform: scale(1);
  }
  .reviews-dot:hover::after {
    background-color: rgba(255, 255, 255, 0.8);
    transform: scale(1.3);
  }
  .reviews-dot.is-active::after {
    background-color: var(--brand-accent, #4400ff);
    transform: scale(1.5);
    box-shadow: var(--dot-active-glow);
  }
  .reviews-dot:focus-visible {
    outline: 2px solid var(--brand-accent, #4400ff);
    outline-offset: 3px;
  }
  .review-quote {
    position: relative;
    margin: 0;
    font-family: var(--reviews-quote-font);
    font-weight: var(--reviews-quote-weight, 400);
    font-size: var(--reviews-quote-size);
    line-height: var(--reviews-quote-line, 1.45);
    color: var(--reviews-quote-color);
    text-align: left;
  }
  /* Full quote (invisible) — locks quote block height so frame/lockup don't reflow */
  .review-quote-sizer {
    visibility: hidden;
    pointer-events: none;
  }
  .review-quote-live {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
  }
  .review-quote-text {
    white-space: pre-wrap;
  }
  /* Inline quotation marks — sit in the paragraph flow */
  .review-mark {
    display: inline-block;
    width: var(--reviews-mark-size, 1.05em);
    height: auto;
    vertical-align: -0.12em;
    color: var(--reviews-mark-color);
    line-height: 0;
  }
  .review-mark svg {
    display: block;
    width: 100%;
    height: auto;
  }
  .review-mark-open { margin-right: 0.2em; }
  .review-mark-close { margin-left: 0.2em; }
  .review-lockup {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--reviews-lockup-gap, 1rem);
    width: 100%;
    margin-top: auto;
  }
  /* Company badge — size the box; img or inline SVG, never CSS scale() */
  .review-logo {
    width: var(--reviews-badge-size, 28px);
    height: var(--reviews-badge-size, 28px);
    flex: none;
    color: var(--text-muted);
    line-height: 0;
  }
  .review-logo img,
  .review-logo svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    overflow: visible;
    shape-rendering: geometricPrecision;
  }
  .review-profile {
    width: var(--reviews-avatar-size, 48px);
    height: var(--reviews-avatar-size, 48px);
    border-radius: 50%;
    overflow: hidden;
    flex: none;
  }
  .review-profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .review-info {
    display: flex;
    flex-direction: column;
    gap: var(--reviews-info-gap, 0px);
    min-width: 0;
    line-height: var(--reviews-info-line, 1.2);
  }
  .review-name {
    font-family: var(--reviews-name-font);
    font-weight: 600;
    font-size: var(--reviews-name-size, 14px);
    line-height: inherit;
    color: var(--reviews-name-color);
  }
  .review-meta {
    font-family: var(--reviews-meta-font);
    font-size: var(--reviews-meta-size, 12px);
    line-height: inherit;
    color: var(--reviews-meta-color);
  }
  @media (max-width: 720px) {
    .reviews-chapter {
      margin-top: 0;
      padding-bottom: 0;
    }
    .reviews-section {
      position: relative;
      margin-top: 0;
    }
  }

  /* Brand wheel — z:0 (above page bg, under glass z:2) so backdrop-filter can
     sample logos. z:-1 parks them behind the canvas → blur samples empty black. */
  .brand-chapter {
    position: relative;
    z-index: 0;
    width: 100%;
    height: calc(
      var(--brand-chapter-vh, 0vh) + var(--brand-pull-up, 80vh) + var(--brand-under-wall, 80vh)
    );
    margin-top: calc(-1 * var(--brand-pull-up, 80vh));
    pointer-events: none;
  }
  .brand-div {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 0;
    width: 100vw;
    height: var(--brand-sticky-height, 70vh);
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 100rem;
    transform-style: preserve-3d;
    will-change: transform, opacity;
    transform-origin: center center;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .brand_wheel {
    width: var(--brand-wheel-size);
    height: var(--brand-wheel-size);
    flex-shrink: 0;
    transform-style: preserve-3d;
    transform-origin: center center;
    will-change: transform;
    position: relative;
  }
  .brand_wheel-spin {
    position: absolute;
    inset: 0;
    /* Logos are positioned by JS on the orbit — plate itself does not rotate
       (keeps every mark screen-upright, matching the old Lottie carousel). */
  }
  .brand_logo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--brand-logo-size);
    height: var(--brand-logo-size);
    /* Center on orbit point; never rotate — always face up. */
    transform: translate(-50%, -50%);
    transform-origin: center center;
    color: var(--brand-logo-color, #9ea3a5);
  }
  .brand_logo-face {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: inherit;
  }
  .brand_logo-face svg {
    width: 100% !important;
    height: 100% !important;
    display: block;
    overflow: visible;
  }
  /* Wipe recolors via .brand_logo color → currentColor (overrides baked SVG fills). */
  .brand_logo-face svg :is(path, polygon, circle, rect, ellipse) {
    fill: currentColor !important;
  }
  .brand_wheel svg {
    width: 100% !important;
    height: 100% !important;
    display: block;
  }
  /* Tablet: slightly smaller plate, marks a touch larger so they stay readable. */
  @media (max-width: 1100px) {
    :root {
      --brand-wheel-size: clamp(960px, 155vw, 1800px);
      --brand-orbit-pct: 44;
      --brand-logo-size: 5.2%;
    }
  }
  /*
    Mobile brand wheel — match the hand-arc composition:
    center sits just off the LEFT edge; orbit sweeps through mid-right;
    marks are large enough to read on a phone (not a tiny left-edge peek).
  */
  @media (max-width: 720px) {
    :root {
      /* Size from viewport height so the arc spans most of the phone. */
      --brand-wheel-size: clamp(900px, 125vh, 1280px);
      --brand-orbit-pct: 46;
      /* ~8% of ~1000px plate ≈ 80px marks. */
      --brand-logo-size: 8%;
      --brand-sticky-height: 100vh;
    }
    .brand-chapter {
      height: calc(var(--brand-pull-up, 80vh) + var(--brand-under-wall, 80vh));
    }
    .brand-div {
      left: 0;
      top: 50%;
      width: 100vw;
      height: 100vh;
      justify-content: flex-start;
      align-items: center;
      transform: translateY(-50%);
      transform-origin: left center;
      overflow: visible;
    }
    .brand_wheel {
      /* Nudge right so left-arc marks clear wall title/body (was -0.68 / -0.66). */
      margin-left: calc(-0.42 * var(--brand-wheel-size)) !important;
      margin-top: calc(0.05 * var(--brand-wheel-size));
    }
  }
  @media (max-width: 420px) {
    :root {
      --brand-wheel-size: clamp(860px, 130vh, 1180px);
      --brand-orbit-pct: 47;
      --brand-logo-size: 9.2%;
    }
    .brand_wheel {
      margin-left: calc(-0.40 * var(--brand-wheel-size)) !important;
      margin-top: calc(0.06 * var(--brand-wheel-size));
    }
  }

  /* ==========================================================================
     6. CAMERA ENGINE & LOGOS
     ========================================================================== */
  .camera-canvas-container { position: relative; background-color: var(--brand-bg); }
  /* Timecode counts up behind the REC dot, morphs into TOOLS, then shifts
     white → brand via --rec-tools-brand-t (runtime). */
  .rec-tools-label {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: none !important;
    z-index: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
    user-select: none !important;
    white-space: nowrap !important;
    text-align: center !important;
    text-transform: uppercase !important;
    font-family: var(--rec-tools-font) !important;
    font-size: var(--rec-tools-size) !important;
    font-weight: 600 !important;
    font-stretch: normal !important;
    line-height: 1 !important;
    letter-spacing: var(--rec-tools-tracking, 0.02em) !important;
    color: color-mix(
      in srgb,
      var(--rec-tools-color) calc(var(--rec-tools-brand-t, 0) * 100%),
      var(--rec-tools-color-start)
    ) !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 0;
    visibility: hidden;
    will-change: transform, opacity;
  }
  /* Black disc under the red ring — knocks TOOLS out between iris + outer ring. */
  .rec-hud-knockout {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    border-radius: 50%;
    background: var(--rec-knockout-color, #000);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    will-change: opacity;
  }
  /* REC outer ring stays vector SVG — size via width/height, never CSS scale(). */
  .rec-hud-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    will-change: opacity;
  }
  .rec-hud-ring svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    shape-rendering: geometricPrecision;
  }
  .rec-hud-ring .rec-hud-ring-fill {
    fill: #e8000a;
  }
  #camera-canvas {
    display: block;
    /* Centered bleed square — size fluid via --camera-size (wide fill → narrow overscan) */
    position: absolute !important;
    inset: auto !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--camera-size) !important;
    height: var(--camera-size) !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain;
    z-index: 10;
    opacity: var(--camera-opacity) !important;
    mix-blend-mode: var(--camera-blend-mode);
    transform: translate(-50%, -50%) scale(var(--camera-z-scale, 1)) !important;
    transform-origin: center center;
    will-change: transform;
    /* Sharp feed — enter/exit blur removed (perf). */
    filter: none;
    transition: none;
  }
  #camera-canvas.is-clear {
    filter: none;
  }
  /* Runtime hard-cuts most logos; first logo fades via scroll slot fraction.
     If a .logo-item is ever an SVG (not a photo/PNG), avoid CSS scale()+filter on it —
     those paint as bitmaps; resize via width/height like .rec-hud-ring instead. */
  .logo-item {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(var(--logo-z-scale, 1)) !important;
    max-width: var(--logo-max-width) !important;
    max-height: var(--logo-max-height) !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) var(--logo-drop-shadow);
    opacity: 0;
    z-index: 20 !important;
    margin: 0 !important;
    pointer-events: none !important;
    transition: none !important;
    transform-origin: center center !important;
  }
  /* Section chrome — fixed corner badge; fly-in is vertical only (no X). */
  .section-badge {
    position: fixed;
    right: clamp(12px, 2.4vw, 28px);
    bottom: clamp(12px, 2.4vh, 28px);
    z-index: 40;
    width: max-content;
    max-width: calc(100% - 2 * clamp(12px, 2.4vw, 28px));
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 14px 9px;
    border-radius: 14px;
    background: #000;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    opacity: var(--section-badge-t, 0);
    visibility: hidden;
    /* Presence 0→1: rise straight up. No translateX. */
    transform: translate3d(0, calc((1 - var(--section-badge-t, 0)) * 18px), 0);
    will-change: opacity, transform;
  }
  .section-badge.is-on {
    visibility: visible;
  }
  /* Camera: lives inside the iris clip layer (absolute to sticky frame, not viewport-fixed). */
  .section-badge--iris {
    position: absolute !important;
    z-index: 30;
    /* Avoid compositor escapes from ancestor clip-path. */
    will-change: auto;
  }
  .section-badge > *:not(.shimmer-border):not(.card-border) {
    position: relative;
    z-index: 2;
  }
  .section-badge-title {
    margin: 0;
    font-family: var(--font-heading-regular);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.02em;
    line-height: 1;
    text-align: center;
    color: var(--brand-accent);
    -webkit-text-fill-color: var(--brand-accent);
  }
  .section-badge-tools {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }
  .section-badge-tool {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    min-width: 0;
  }
  .section-badge-icon {
    display: flex;
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: #c8c8c8;
  }
  .section-badge-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .section-badge-label {
    font-family: var(--font-body);
    font-size: 10px;
    line-height: 1;
    white-space: nowrap;
    color: rgba(200, 200, 200, 0.88);
    -webkit-text-fill-color: rgba(200, 200, 200, 0.88);
  }
  .w-webflow-badge { display: none !important; }
  /* ==========================================================================
     7. GPU SEQUENCE ENGINE
     ========================================================================== */
  /* Container stays transparent so it can overlap camera without painting a black plate behind REC.
     Black plate lives on .gpu-sticky-frame (hidden until the GPU chapter reveals). */
  .gpu-canvas-container { position: relative; width: 100vw; height: 400vh; background-color: transparent; z-index: 5; }
  .gpu-sticky-frame { position: sticky; top: 0; width: 100vw; height: 100dvh; overflow: hidden; display: flex; align-items: center; justify-content: center; opacity: 0; will-change: transform, opacity; background-color: var(--brand-bg); }
  #gpu-canvas {
    display: block;
    width: 100vw !important;
    height: 100dvh !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    pointer-events: none;
    z-index: 1;
    will-change: opacity;
    transform: scale(var(--gpu-plate-scale, 1));
    transform-origin: center center;
  }
  /* ==========================================================================
     8. PC SCATTER & SHIMMER STYLES
     ========================================================================== */
  .pc-scatter-wrapper {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    transform: none;
    pointer-events: none;
    z-index: 10;
    display: flex;
    flex-direction: column;
    /* Center the glass+editorial block in the viewport (header is absolute, out of flow) */
    justify-content: center;
    align-items: stretch;
    box-sizing: border-box;
    padding: var(--pc-pad-y) var(--pc-pad-x);
  }
  .scatter-main-header {
    position: absolute !important;
    left: var(--pc-pad-x) !important;
    /* Never sit under the fixed audio widget */
    top: max(var(--pc-pad-y), var(--audio-clear-top)) !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    width: max-content;
    max-width: calc(100% - (2 * var(--pc-pad-x)));
    margin: 0 !important;
    align-self: flex-start;
    white-space: nowrap;
    filter: drop-shadow(0px 4px 5px rgba(0,0,0,0.25));
    opacity: 0;
    will-change: transform, opacity;
    z-index: 2;
    pointer-events: none;
  }
  .scatter-layout {
    width: 100% !important;
    max-width: var(--pc-max-width) !important;
    margin: 0 !important;
    /* Hug content height so the wrapper can vertically center this block */
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    /* Desktop A: glass cluster left, editorial rail pins right, center stage open */
    grid-template-columns: max-content max-content max-content 1fr !important;
    grid-template-areas:
      "tools image  image  side"
      "tools ux     prod   side"
      "video layout audio  side"
      "ai    ai     ai     side" !important;
    justify-content: start !important;
    justify-items: start !important;
    align-items: start !important;
    align-content: start !important;
    column-gap: var(--pc-col-gap) !important;
    row-gap: var(--pc-row-gap) !important;
  }
  .scatter-col {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--pc-row-gap) !important;
    width: max-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  /* Lift glass cards into parent grid — editorial rail stays a real column */
  .scatter-col-left,
  .scatter-col-mid {
    display: contents !important;
  }
  .scatter-col-left > .scatter-card:nth-child(1) { grid-area: tools !important; }
  .scatter-col-left > .scatter-card:nth-child(2) { grid-area: video !important; }
  .scatter-col-left > .scatter-card:nth-child(3) { grid-area: ai !important; }
  .scatter-col-mid > .scatter-card:nth-child(1) { grid-area: image !important; }
  .scatter-col-mid > .scatter-card:nth-child(2) { grid-area: ux !important; }
  .scatter-col-mid > .scatter-card:nth-child(3) { grid-area: layout !important; }
  .scatter-col-mid > .scatter-card:nth-child(4) { grid-area: audio !important; }
  .scatter-col-mid > .scatter-card:nth-child(5) { grid-area: prod !important; }

  .scatter-card,
  .pc-side-panel .panel-box {
    opacity: 0;
    will-change: transform, opacity;
  }
  .scatter-card {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    /* Hug content; title/divider full width; icon grid centered when narrower */
    width: max-content !important;
    max-width: 100% !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: var(--pc-card-pad);
    border-radius: 12px;
    align-items: center;
    justify-content: flex-start;
    box-shadow: var(--card-shadow);
    overflow: hidden;
    background: var(--gpu-card-bg, rgba(18, 18, 26, 0.42));
    backdrop-filter: blur(var(--gpu-card-blur, var(--glass-panel-blur, 15px)));
    -webkit-backdrop-filter: blur(var(--gpu-card-blur, var(--glass-panel-blur, 15px)));
    box-sizing: border-box;
  }
  .scatter-card .card-title,
  .scatter-card .card-divider,
  .scatter-card .pricing-rule {
    align-self: stretch;
    width: 100%;
  }
  .pc-side-panel {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: max-content !important;
    max-width: 340px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--pc-row-gap) !important;
    transform-origin: top right;
    /* Editorial bucket — Specs / Live / Env stay one rail */
    grid-area: side !important;
    justify-self: end !important;
    align-self: start !important;
    margin-left: auto !important;
  }

  .pc-side-panel .panel-box {
    position: relative;
    border-radius: 20px;
    border: 1px solid var(--card-border-line);
    overflow: hidden;
    background: var(--glass-side-bg, rgba(8, 8, 12, 0.55));
    backdrop-filter: blur(var(--gpu-side-blur, var(--glass-panel-blur, 15px)));
    -webkit-backdrop-filter: blur(var(--gpu-side-blur, var(--glass-panel-blur, 15px)));
  }
  /* Structural layer only — glass fill + blur live on the card / panel shell. */
  .card-glass-bg {
    position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .pc-side-panel .panel-box .card-glass-bg {
    background: transparent;
  }
  .scatter-card > *:not(.card-glass-bg):not(.card-border):not(.shimmer-inner):not(.shimmer-border),
  .pc-side-panel .panel-box > *:not(.card-glass-bg):not(.card-border):not(.shimmer-inner):not(.shimmer-border) {
    position: relative;
    z-index: 2;
  }
  .shimmer-inner, .shimmer-border { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
  .shimmer-inner { display: none; z-index: 5; overflow: hidden; }
  .shimmer-inner::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(108deg, var(--shimmer-inner-1) 20%, var(--shimmer-inner-2) 40%, var(--shimmer-inner-3) 50%, var(--shimmer-inner-2) 60%, var(--shimmer-inner-1) 80%); animation: shimmerSweep var(--iDur) ease-in-out var(--iDelay) infinite normal backwards; }
  .shimmer-border { z-index: 6; padding: 2px; background: linear-gradient(108deg, var(--shimmer-border-1) 15%, var(--shimmer-border-2) 48%, var(--shimmer-border-3) 52%, var(--shimmer-border-1) 85%); background-size: 200% 100%; background-repeat: no-repeat; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: borderShimmerSweep var(--bDur) cubic-bezier(0.4,0,0.2,1) var(--bDelay) infinite normal backwards; opacity: var(--shimmer-border-on, 1); }
  html.is-page-hidden .shimmer-inner::before,
  html.is-page-hidden .shimmer-border { animation-play-state: paused !important; }
  .status-flash-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-status-live); box-shadow: 0 0 7px var(--brand-status-glow); flex-shrink: 0; animation: statusFlash 2.6s ease-out forwards; }
  @keyframes shimmerSweep { 0% { transform: translateX(-100%) skewX(-15deg); } 100% { transform: translateX(100%) skewX(-15deg); } }
  @keyframes borderShimmerSweep { 0% { background-position: -100% 0; } 100% { background-position: 200% 0; } }
  @keyframes statusFlash { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
  .ultra-stack {
    position: relative;
    font-family: var(--font-heading-bold);
    font-weight: 900;
    font-size: clamp(42px, 5.2vw, 72px);
    line-height: 0.9;
    margin: 0;
  }
  .ultra-stack-sizer {
    visibility: hidden;
    pointer-events: none;
  }
  .ultra-stack-live {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
  }
  .text-white { color: var(--text-white); }
  .text-blue { color: var(--brand-accent); }
  .sub-header {
    position: relative;
    font-family: var(--font-heading-regular);
    font-weight: 600;
    font-size: clamp(14px, 1.3vw, 18px);
    color: var(--text-muted);
    margin: 0;
  }
  .sub-header-sizer {
    visibility: hidden;
    pointer-events: none;
    white-space: nowrap;
  }
  .sub-header-live {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
  }
  .card-border { position: absolute; inset: 0; border-radius: inherit; border-bottom: 2px solid var(--brand-accent); pointer-events: none; z-index: 10; }
  .scatter-header-wipe { width: 100%; display: flex; flex-direction: column; gap: 6px; }
  .card-title { font-family: var(--font-heading-regular); font-size: 14px; font-weight: bold; color: var(--text-white); text-transform: uppercase; margin: 0; }
  /* GPU glass cards share the pricing gradient rule (class swapped in JS) */
  .card-divider {
    width: 100%;
    height: var(--rule-line-height);
    border-radius: 0;
    background: var(--rule-line-gradient);
  }
  .card-grid {
    position: relative;
    display: grid;
    gap: var(--pc-icon-gap-row) var(--pc-icon-gap-col);
    width: max-content;
    margin-inline: auto;
    justify-items: center;
    /* Fixed track counts — never auto-fit (avoids 1-col collapse) */
  }
  .card-grid-5x2 { grid-template-columns: repeat(5, var(--pc-icon-cell)); }
  .card-grid-5x1 { grid-template-columns: repeat(5, var(--pc-icon-cell)); }
  .card-grid-3x1 { grid-template-columns: repeat(3, var(--pc-icon-cell)); }
  .card-grid-2x1 { grid-template-columns: repeat(2, var(--pc-icon-cell)); }
  /* AI: one wide row (9 icons) — do not reflow to a tall multi-row card */
  .card-grid-ai { grid-template-columns: repeat(9, var(--pc-icon-cell)); }
  .scatter-inner-frame {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: var(--pc-icon-cell);
    min-width: var(--pc-icon-cell);
    max-width: var(--pc-icon-cell);
    min-height: 55px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    will-change: transform, clip-path;
  }
  .scatter-inner-frame p {
    position: relative !important;
    top: auto !important;
    width: 100%;
    text-align: center;
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
    margin: 4px 0 0;
    /* Two-word labels may wrap — keep leading tight */
    line-height: 1.15;
    overflow-wrap: break-word;
    hyphens: manual;
  }
  /* PC scatter icons: if source is SVG, prefer inline DOM SVG over <img> + filter
     (filter forces bitmap compositing). Photos/PNG icons may keep filter. */
  .icon-svg {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: var(--pc-icon-size);
    height: var(--pc-icon-size);
    object-fit: contain;
    filter: brightness(0) invert(1);
  }
  .specs-box { padding: 20px 24px 20px 20px; display: flex; flex-direction: column; gap: 12px; }
  .panel-title { font-family: var(--font-heading-regular); font-size: 18px; font-weight: bold; color: var(--text-white); -webkit-text-fill-color: var(--text-white); text-transform: uppercase; margin: 0; }
  .specs-list { display: flex; flex-direction: column; gap: 10px; width: 100%; }
  .spec-item { display: flex; gap: 12px; align-items: center; }
  .spec-icon { width: 30px; height: 30px; border-radius: 6px; background: var(--brand-accent); flex-shrink: 0; display: flex; justify-content: center; align-items: center; }
  .spec-icon span.material-symbols-outlined { font-size: 20px; color: #ffffff !important; line-height: 1; display: block; margin: 0; padding: 0; }
  .spec-text { display: flex; flex-direction: column; gap: 2px; }
  .spec-label { font-family: var(--font-heading-regular); font-weight: bold; font-size: 11px; color: var(--brand-accent); -webkit-text-fill-color: var(--brand-accent); text-transform: uppercase; }
  .spec-desc { font-family: var(--font-body); font-size: 11px; color: var(--text-white); -webkit-text-fill-color: var(--text-white); line-height: 1.35; }
  .status-box { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
  .status-header { display: flex; gap: 8px; align-items: center; }
  .status-label { font-family: var(--font-heading-regular); font-weight: 600; font-size: 12px; color: var(--brand-status-live); -webkit-text-fill-color: var(--brand-status-live); margin: 0; }
  .status-value {
    font-family: var(--font-heading-bold);
    font-weight: 900;
    font-size: 22px;
    color: var(--text-white);
    -webkit-text-fill-color: var(--text-white);
    -webkit-text-stroke: 0;
    paint-order: normal;
    margin: 0;
    letter-spacing: 0.02em;
  }
  .env-box { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
  .env-content { display: flex; flex-direction: column; gap: 12px; z-index: 2; }
  .env-section { display: flex; flex-direction: column; gap: 8px; }
  .env-label { font-family: var(--font-heading-regular); font-weight: bold; font-size: 11px; color: var(--brand-accent); -webkit-text-fill-color: var(--brand-accent); letter-spacing: 1px; margin: 0; }
  .env-desc { font-family: var(--font-body); font-size: 12px; color: rgba(255, 255, 255, 0.88); -webkit-text-fill-color: rgba(255, 255, 255, 0.88); line-height: 1.6; margin: 0; }
  /* Desktop — more horizontal inset so glass/editorial don't hug the viewport edges */
  @media (min-width: 1101px) {
    :root {
      --pc-pad-x: clamp(40px, 5.5vw, 88px);
    }
  }
  /* Tablet — glass reflows freely; editorial bucket stays one full-width unit.
     IMPORTANT: desktop grid-area uses :nth-child + !important — resets must match
     that specificity or named areas keep the 4-col desktop track list and crush the rail. */
  @media (max-width: 1100px) {
    .scatter-col-left,
    .scatter-col-mid {
      display: contents !important;
    }
    .scatter-col-left > .scatter-card:nth-child(1),
    .scatter-col-left > .scatter-card:nth-child(2),
    .scatter-col-left > .scatter-card:nth-child(3),
    .scatter-col-mid > .scatter-card:nth-child(1),
    .scatter-col-mid > .scatter-card:nth-child(2),
    .scatter-col-mid > .scatter-card:nth-child(3),
    .scatter-col-mid > .scatter-card:nth-child(4),
    .scatter-col-mid > .scatter-card:nth-child(5) {
      grid-area: auto !important;
    }
    .scatter-layout {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      grid-template-areas: none !important;
      grid-auto-flow: row !important;
      justify-content: stretch !important;
      justify-items: stretch !important;
    }
    .scatter-card {
      width: 100% !important;
      max-width: 100% !important;
    }
    .pc-side-panel {
      grid-area: auto !important;
      grid-column: 1 / -1 !important;
      justify-self: stretch !important;
      order: 100;
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      width: 100% !important;
      max-width: none !important;
      margin-left: 0 !important;
      margin-top: calc(var(--pc-row-gap) * 0.5) !important;
      gap: var(--pc-col-gap) !important;
    }
    .pc-side-panel .panel-box {
      flex: 1 1 0 !important;
      min-width: 0 !important;
    }
    .spec-text { min-width: 0; flex: 1 1 auto; }
    .spec-desc { overflow-wrap: anywhere; }
    .card-grid-ai { grid-template-columns: repeat(5, var(--pc-icon-cell)); }
    .ultra-stack { font-size: clamp(36px, 7vw, 56px); }
  }
  /* Mobile D→A caveat: editorial bucket FIRST (context), then free glass pods; GPU cover OK */
  @media (max-width: 720px) {
    .pc-scatter-wrapper {
      justify-content: flex-start;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      /* Clear fixed audio widget before in-flow header */
      padding-top: max(var(--pc-pad-y), var(--audio-clear-top));
    }
    .scatter-main-header {
      position: relative !important;
      left: auto !important;
      top: auto !important;
      margin: 0 0 var(--pc-row-gap) 0 !important;
      max-width: 100%;
    }
    .scatter-col-left,
    .scatter-col-mid {
      display: contents !important;
    }
    .scatter-col-left > .scatter-card:nth-child(1),
    .scatter-col-left > .scatter-card:nth-child(2),
    .scatter-col-left > .scatter-card:nth-child(3),
    .scatter-col-mid > .scatter-card:nth-child(1),
    .scatter-col-mid > .scatter-card:nth-child(2),
    .scatter-col-mid > .scatter-card:nth-child(3),
    .scatter-col-mid > .scatter-card:nth-child(4),
    .scatter-col-mid > .scatter-card:nth-child(5) {
      grid-area: auto !important;
      order: 10;
    }
    .scatter-layout {
      flex: 0 0 auto !important;
      height: auto !important;
      align-content: start !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      grid-template-areas: none !important;
      grid-auto-flow: row !important;
      justify-content: stretch !important;
      justify-items: stretch !important;
      width: 100% !important;
    }
    .scatter-card {
      width: 100% !important;
      max-width: 100% !important;
    }
    /* Wider tool cards read as pods spanning the row */
    .scatter-col-left > .scatter-card:nth-child(1),
    .scatter-col-left > .scatter-card:nth-child(3),
    .scatter-col-mid > .scatter-card:nth-child(1) {
      grid-column: 1 / -1;
    }
    /* Editorial bucket on TOP — Specs / Live / Env stacked, before glass cards */
    .pc-side-panel {
      grid-area: auto !important;
      grid-column: 1 / -1 !important;
      justify-self: stretch !important;
      order: 1;
      flex-direction: column !important;
      flex-wrap: nowrap !important;
      width: 100% !important;
      max-width: none !important;
      margin-left: 0 !important;
      margin-top: 0 !important;
      margin-bottom: var(--pc-row-gap) !important;
      padding-top: 0 !important;
      padding-bottom: var(--pc-row-gap) !important;
      border-top: none;
      border-bottom: 1px solid var(--card-border-line);
      gap: var(--pc-row-gap) !important;
    }
    .pc-side-panel .panel-box {
      flex: 0 0 auto !important;
      width: 100% !important;
      max-width: none !important;
    }
    .specs-box,
    .status-box,
    .env-box {
      padding-left: 16px;
      padding-right: 16px;
    }
    .status-value {
      font-size: clamp(16px, 5.2vw, 22px);
      line-height: 1.15;
      overflow-wrap: normal;
      word-break: normal;
    }
    .env-desc {
      font-size: 13px;
      line-height: 1.55;
    }
    .card-grid-5x2,
    .card-grid-5x1 {
      grid-template-columns: repeat(4, var(--pc-icon-cell));
    }
    .card-grid-ai { grid-template-columns: repeat(3, var(--pc-icon-cell)); }
    .scatter-main-header { white-space: normal; }
    .ultra-stack { font-size: clamp(32px, 10vw, 44px); }
  }

  /* ==========================================================================
     8b. CLOSING SECTIONS — Pricing, FAQ, Contact, Footer (after PC)
     ========================================================================== */
  .pricing-section,
  .faq-section,
  .contact-section {
    position: relative;
    z-index: 4;
    width: 100%;
    box-sizing: border-box;
    padding: var(--closing-pad-y) var(--closing-pad-x);
    padding-top: max(var(--closing-pad-y), var(--audio-clear-top));
  }
  /* FAQ rows keep the pricing-echo fly-in from below; title stays put (readout).
     Contact rise lives on .contact-card (same node as glass blur — pricing pattern).
     Do NOT transform an ancestor of .contact-card or backdrop-filter dies. */
  .faq-section {
    margin-top: -18vh;
    position: relative;
    z-index: 4;
    /* Handoff under Contact: settle down well behind the card + fade to fully 0%
       (equal-opposite reverse). */
    transform: translate3d(0, calc(var(--faq-under, 0) * 45vh), 0);
    opacity: calc(1 - var(--faq-under, 0));
    will-change: transform, opacity;
    pointer-events: auto;
  }
  .faq-section[data-under-contact='1'] {
    pointer-events: none;
  }
  .faq-section .faq-item {
    opacity: var(--closing-item-t, 1);
    /* Keep the original bottom fly-in distance. */
    transform: translate3d(0, calc((1 - var(--closing-item-t, 1)) * 70vh), 0);
    will-change: opacity, transform;
  }
  .faq-title {
    position: relative;
    /* No rise — readout types in place above the shell. */
  }
  .faq-title-sizer {
    visibility: hidden;
    display: block;
  }
  .faq-title-live {
    position: absolute;
    inset: 0;
    text-align: center;
  }
  .contact-section {
    position: relative;
    z-index: 5;
    /* Light overlap so FAQ is still partly visible while the glass card rises over it —
       the handoff timing itself is gated on the card's real position (see JS), not this
       gap, so this stays small on purpose (a big gap scrolls FAQ off-screen first and the
       slide-under/fade never reads as visible). */
    margin-top: -8vh;
  }
  .contact-section .contact-card {
    opacity: var(--closing-item-t, 1);
    transform: translate3d(0, calc((1 - var(--closing-item-t, 1)) * 28vh), 0);
    will-change: opacity, transform;
  }
  @media (prefers-reduced-motion: reduce) {
    .faq-section {
      transform: none;
      opacity: 1;
      will-change: auto;
    }
    .faq-section .faq-item,
    .contact-section .contact-card {
      opacity: 1;
      transform: none;
      will-change: auto;
    }
  }

  /* PC → pricing sticky bridge: overlaps last viewport of GPU, then settles in flow.
     IMPORTANT: do not leave transform/opacity/will-change on this section while cards
     are visible — ancestors with transform create a backdrop root and kill glass blur. */
  .pricing-section {
    margin-top: -100vh;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 6;
    opacity: 0;
    transform: none;
    pointer-events: none;
  }
  .pricing-section[data-pc-bridge="idle"] {
    opacity: 0;
    pointer-events: none;
  }
  /* Active = fixed overlay during PC handoff; settled = in-flow park (cards stay put). */
  .pricing-section[data-pc-bridge="active"] {
    position: fixed;
    inset: 0;
    margin-top: 0;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    z-index: 20;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .pricing-section[data-pc-bridge="settled"] {
    position: relative;
    margin-top: -100vh;
    min-height: 100vh;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  /* Mobile only: tall stack + center align bleeds under audio; keep desktop centered.
     No overflow-y here — nested scroll on the fixed bridge caused a double scrollbar. */
  @media (max-width: 720px) {
    .pricing-section,
    .pricing-section[data-pc-bridge="active"],
    .pricing-section[data-pc-bridge="settled"] {
      align-items: flex-start;
      justify-content: flex-start;
      padding-top: max(var(--closing-pad-y), var(--audio-clear-top));
    }
  }
  /* Rise + stagger live on the items (same element as backdrop-filter for cards). */
  .pricing-section .pricing-title,
  .pricing-section .pricing-subtitle {
    opacity: var(--pricing-item-t, 1);
    transform: translate3d(0, calc((1 - var(--pricing-item-t, 1)) * 70vh), 0);
    will-change: opacity, transform;
  }
  .pricing-section .pricing-card {
    opacity: var(--pricing-item-t, 1);
    transform: translate3d(0, calc((1 - var(--pricing-item-t, 1)) * 70vh), 0);
    will-change: opacity, transform;
  }
  .pricing-section[data-pc-bridge="settled"] .pricing-title,
  .pricing-section[data-pc-bridge="settled"] .pricing-subtitle,
  .pricing-section[data-pc-bridge="settled"] .pricing-card {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
  .pricing-inner,
  .faq-inner,
  .contact-inner,
  .footer-inner {
    width: 100%;
    max-width: var(--closing-max);
    margin: 0 auto;
  }
  .pricing-title,
  .faq-title,
  .contact-title {
    font-family: var(--font-heading-regular);
    font-weight: 600;
    font-size: clamp(28px, 3.2vw, 40px);
    line-height: 1.15;
    color: var(--brand-accent);
    -webkit-text-fill-color: var(--brand-accent);
    margin: 0 0 10px;
    text-align: center;
  }
  .faq-title {
    margin-bottom: 25px; /* gap before accordion window */
    /* Title stays centered (shared with pricing/contact); accordion content is left. */
    text-align: center;
  }
  .faq-item.is-open .faq-question {
    color: var(--brand-accent);
    -webkit-text-fill-color: var(--brand-accent);
  }
  .pricing-subtitle,
  .contact-body {
    font-family: var(--font-body);
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.6;
    color: var(--text-muted);
    text-align: center;
    margin: 0 0 clamp(28px, 4vh, 48px);
  }
  .pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(12px, 1.4vw, 18px);
    /* Row stretch = equal heights when side-by-side; 1-col rows hug content */
    align-items: stretch;
  }
  .pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* Grid row stretch equalizes peers; never a fixed floor (breaks 1-col hug) */
    min-height: 0 !important;
    height: auto !important;
    /* Host Webflow sets width: 15rem — fill the 4-col track like stellar. */
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    padding: clamp(20px, 2vw, 28px);
    border-radius: 14px;
    overflow: hidden;
    box-sizing: border-box;
    background: var(--glass-panel-bg);
    backdrop-filter: blur(var(--pricing-blur, var(--glass-panel-blur)));
    -webkit-backdrop-filter: blur(var(--pricing-blur, var(--glass-panel-blur)));
    box-shadow: var(--card-shadow);
  }
  .pricing-card > *:not(.card-glass-bg):not(.card-border):not(.shimmer-inner):not(.shimmer-border) {
    position: relative;
    z-index: 2;
  }
  .pricing-card-title {
    font-family: var(--font-heading-regular);
    font-weight: 600;
    font-size: clamp(28px, 2.6vw, 36px);
    line-height: 1.05;
    color: var(--text-white);
    margin: 0;
    flex-shrink: 0;
  }
  .pricing-card-title .price-unit {
    font-size: 0.45em;
    font-weight: 500;
    color: var(--brand-accent);
    -webkit-text-fill-color: var(--brand-accent);
  }
  .pricing-rule {
    width: 100%;
    height: var(--rule-line-height);
    border-radius: 0;
    background: var(--rule-line-gradient);
    flex-shrink: 0;
    --rule-wipe: 0;
    /* Site-wide L→R wipe in/out (--rule-wipe 0→1) */
    -webkit-mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 calc(var(--rule-wipe, 0) * 100%),
      transparent calc(var(--rule-wipe, 0) * 100% + 0.01%)
    );
    mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 calc(var(--rule-wipe, 0) * 100%),
      transparent calc(var(--rule-wipe, 0) * 100% + 0.01%)
    );
  }
  .pricing-card-body {
    position: relative;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
    flex-shrink: 0;
  }
  .pricing-card-body-sizer {
    visibility: hidden;
    pointer-events: none;
    white-space: pre-wrap;
  }
  .pricing-card-body-text {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    white-space: pre-wrap;
  }
  .pricing-features {
    list-style: none;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-block-start: 0 !important;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
  }
  .pricing-feature {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-dim);
  }
  .pricing-check {
    width: 1.15rem;
    height: 1.15rem;
    color: var(--brand-accent);
    flex: none;
    margin-top: 1px;
  }
  .pricing-check svg { display: block; width: 100%; height: 100%; }

  .faq-inner { max-width: var(--faq-max); }
  .faq-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: clamp(12px, 2vw, 20px) clamp(16px, 2.5vw, 28px);
    background: rgba(12, 12, 18, 0.35);
  }
  .faq-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .faq-item:last-child { border-bottom: 0; }
  .faq-toggle {
    width: 100%;
    display: flex;
    /* Beat leftover Webflow .faq-toggle { flex-direction: column } on production */
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    text-align: left;
  }
  .faq-question {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-heading-regular);
    font-weight: 500;
    font-size: clamp(14px, 1.2vw, 16px);
    color: var(--text-white);
    text-align: left;
  }
  .faq-arrow {
    width: 24px;
    height: 24px;
    color: var(--brand-accent);
    flex: none;
    margin-left: auto;
    transition: transform 0.25s ease;
  }
  .faq-item.is-open .faq-arrow { transform: rotate(180deg); }
  .faq-panel {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    opacity: 0;
    transition: grid-template-rows 0.35s ease, opacity 0.2s ease;
  }
  .faq-item.is-open .faq-panel {
    grid-template-rows: 1fr;
    opacity: 1;
  }
  .faq-answer {
    overflow: hidden;
    min-height: 0;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-muted);
    text-align: left;
    padding: 0 0 18px;
  }
  @media (prefers-reduced-motion: reduce) {
    .faq-panel,
    .faq-arrow { transition: none; }
  }
  .faq-answer strong { color: var(--text-white); font-weight: 600; }

  .contact-inner { max-width: var(--contact-max); }
  .contact-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: clamp(28px, 4vw, 48px);
    border-radius: 16px;
    overflow: hidden;
    /* Typical glass — blur stays on the shell (no transform on this node). */
    background: var(--glass-panel-bg);
    backdrop-filter: blur(var(--contact-blur, var(--glass-panel-blur)));
    -webkit-backdrop-filter: blur(var(--contact-blur, var(--glass-panel-blur)));
    box-shadow: var(--card-shadow);
  }
  .contact-card > *:not(.card-glass-bg):not(.card-border):not(.shimmer-inner):not(.shimmer-border) {
    position: relative;
    z-index: 2;
  }
  /* Border sweep only — no inner light wash over the form */
  .contact-card .shimmer-inner { display: none; }
  .contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
    margin-top: 8px;
  }
  .contact-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }
  .contact-field.is-full { grid-column: 1 / -1; }
  .contact-label {
    font-family: var(--font-heading-regular);
    font-size: 12px;
    color: var(--text-dim);
  }
  .contact-required {
    color: #f13918;
    -webkit-text-fill-color: #f13918;
  }
  .contact-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.35);
    color: var(--text-white);
    font-family: var(--font-body);
    font-size: 14px;
    padding: 12px 14px;
    outline: none;
  }
  .contact-input:focus {
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 1px rgba(68, 0, 255, 0.35);
  }
  textarea.contact-input { resize: vertical; min-height: 120px; }
  .contact-submit {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 4px;
    border: 2px solid var(--brand-accent);
    background: transparent;
    color: var(--brand-accent);
    -webkit-text-fill-color: var(--brand-accent);
    border-radius: 8px;
    padding: 14px 28px;
    font-family: var(--font-heading-regular);
    font-weight: 600;
    font-size: 14px;
    text-transform: capitalize;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .contact-submit:hover {
    background: var(--brand-accent);
    color: #fff;
    -webkit-text-fill-color: #fff;
  }
  .contact-note {
    margin: 8px 0 0;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--brand-status-live);
    text-align: center;
  }

  .site-footer {
    position: relative;
    z-index: 4;
    width: 100%;
    box-sizing: border-box;
    padding: 0 var(--closing-pad-x) clamp(28px, 4vh, 40px);
    background: #000;
  }
  /* Top rule after contact: center wipe (clip-path), then crossfade to grey.
     clip-path — not scaleX — keeps a true 1px hairline (scaleX AA'd into two bands).
     Grey is the base so the gradient can fade fully out. */
  .site-footer > .footer-rule-top {
    position: relative;
    height: var(--rule-line-height);
    width: calc(100% + 2 * var(--closing-pad-x));
    margin-left: calc(-1 * var(--closing-pad-x));
    margin-bottom: clamp(40px, 6vh, 72px);
    background: rgba(255, 255, 255, 0.08);
    clip-path: inset(0 calc((1 - var(--rule-wipe, 0)) * 50%) 0 calc((1 - var(--rule-wipe, 0)) * 50%));
    /* Kill .pricing-rule L→R mask — this line uses clip-path instead. */
    -webkit-mask-image: none !important;
    mask-image: none !important;
    transform: none;
  }
  .site-footer > .footer-rule-top::after {
    content: '';
    position: absolute;
    inset: 0;
    height: var(--rule-line-height);
    background: var(--rule-line-gradient);
    opacity: calc(1 - var(--rule-settle, 0));
    pointer-events: none;
  }
  .footer-top {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: clamp(24px, 4vw, 48px);
    padding-bottom: clamp(24px, 3vh, 36px);
  }
  /* End rolling credits — base structure; tweak duration/copy later */
  .footer-credits {
    --credits-stage-h: clamp(140px, 22vh, 220px);
    --credits-roll-duration: 28s;
    margin: 0 0 clamp(28px, 4vh, 40px);
    text-align: center;
  }
  .footer-credits-eyebrow {
    font-family: var(--font-heading-regular);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brand-accent);
    -webkit-text-fill-color: var(--brand-accent);
    margin: 0 0 14px;
  }
  .footer-credits-stage {
    position: relative;
    height: var(--credits-stage-h);
    overflow: hidden;
    mask-image: linear-gradient(
      180deg,
      transparent 0%,
      #000 18%,
      #000 82%,
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      180deg,
      transparent 0%,
      #000 18%,
      #000 82%,
      transparent 100%
    );
  }
  .footer-credits-track {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    will-change: transform;
  }
  /* Roll is WAAPI-driven in runtime (pause keeps currentTime). CSS keyframes = fallback only. */
  .footer-credits.is-css-roll .footer-credits-track {
    animation: footer-credits-roll var(--credits-roll-duration) linear infinite;
  }
  .footer-credit-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 12px 20px;
    width: min(100%, 420px);
    align-items: baseline;
  }
  .footer-credit-role {
    font-family: var(--font-heading-regular);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
    text-align: right;
  }
  .footer-credit-name {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-white);
    text-align: left;
  }
  @keyframes footer-credits-roll {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(0, -50%, 0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .footer-credits.is-css-roll .footer-credits-track {
      animation: none;
      transform: none;
    }
    .footer-credits-stage {
      height: auto;
      mask-image: none;
      -webkit-mask-image: none;
      overflow: visible;
    }
    .footer-credits-track > .footer-credit-row.is-loop-clone {
      display: none; /* hide duplicated loop half */
    }
  }
  /* Mid rule — original light grey hairline (no gradient / wipe) */
  .footer-rule-muted {
    width: 100%;
    height: var(--rule-line-height, 1px);
    background: rgba(255, 255, 255, 0.08);
  }
  .footer-heading {
    font-family: var(--font-heading-regular);
    font-weight: 600;
    font-size: 14px;
    color: var(--brand-accent);
    -webkit-text-fill-color: var(--brand-accent);
    margin: 0 0 8px;
  }
  .footer-heading + .footer-heading { margin-top: 22px; }
  .footer-copy {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-muted);
    margin: 0;
  }
  .footer-email {
    color: var(--text-white);
    text-decoration: none;
    display: inline-block;
  }
  .footer-email:hover { color: var(--brand-accent); }
  .footer-socials {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
  }
  .footer-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: #3a3a42;
    -webkit-text-fill-color: #3a3a42;
    text-decoration: none;
    transition: color 0.2s ease, -webkit-text-fill-color 0.2s ease;
  }
  .footer-social svg path,
  .footer-social svg polygon {
    fill: #3a3a42;
  }
  .footer-social svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  .footer-social:hover,
  .footer-social:focus-visible {
    color: var(--brand-accent);
    -webkit-text-fill-color: var(--brand-accent);
  }
  .footer-social:hover svg path,
  .footer-social:hover svg polygon,
  .footer-social:focus-visible svg path,
  .footer-social:focus-visible svg polygon {
    fill: var(--brand-accent);
  }
  .footer-brand {
    color: var(--text-white);
    text-align: right;
    line-height: 0;
  }
  .footer-brand svg {
    width: clamp(72px, 10.5vw, 99px);
    height: auto;
    display: inline-block;
    vertical-align: top;
  }
  .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px 24px;
    padding-top: clamp(18px, 2.5vh, 28px);
  }
  .footer-bottom .footer-copy {
    font-size: 11px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.32);
  }
  .footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
  }
  .footer-legal a {
    font-family: var(--font-body);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.32);
    text-decoration: none;
  }
  .footer-legal a:hover { color: var(--text-white); }

  /* Legal popups (Privacy / TOS / Cookies) — glass dialog over dimmed backdrop */
  html.legal-open,
  html.legal-open body {
    overflow: hidden;
    overscroll-behavior: none;
  }
  html.legal-open body {
    /* iOS Safari ignores overflow:hidden alone — JS also pins position while open */
    touch-action: none;
  }
  .legal-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(12px, env(safe-area-inset-top, 0px))
      max(12px, env(safe-area-inset-right, 0px))
      max(12px, env(safe-area-inset-bottom, 0px))
      max(12px, env(safe-area-inset-left, 0px));
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.78);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0.28s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .legal-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .legal-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 720px;
    max-height: 82vh; /* fallback */
    max-height: min(82dvh, 780px);
    padding: clamp(18px, 3vw, 36px);
    border-radius: 16px;
    overflow: hidden;
    box-sizing: border-box;
    background: rgba(12, 12, 18, 0.94); /* solid fallback if backdrop-filter unsupported */
    background: var(--glass-panel-bg);
    -webkit-backdrop-filter: blur(var(--legal-blur, var(--glass-panel-blur)));
    backdrop-filter: blur(var(--legal-blur, var(--glass-panel-blur)));
    box-shadow: var(--card-shadow);
    transform: translateY(12px) scale(0.98);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .legal-overlay.is-open .legal-dialog {
    transform: translateY(0) scale(1);
  }
  .legal-dialog > *:not(.card-glass-bg):not(.card-border):not(.shimmer-inner):not(.shimmer-border) {
    position: relative;
    z-index: 2;
  }
  .legal-dialog .shimmer-inner { display: none; }
  .legal-dialog-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'eyebrow close'
      'title close'
      'updated close';
    gap: 4px 12px;
    align-items: start;
    flex-shrink: 0;
  }
  .legal-dialog-eyebrow {
    grid-area: eyebrow;
    font-family: var(--font-heading-regular);
    font-size: 12px;
    color: var(--brand-accent);
    -webkit-text-fill-color: var(--brand-accent);
    overflow-wrap: anywhere;
  }
  .legal-dialog-title {
    grid-area: title;
    margin: 0;
    font-family: var(--font-heading-regular);
    font-weight: 600;
    font-size: clamp(20px, 3.4vw, 30px);
    line-height: 1.15;
    color: var(--text-white);
    overflow-wrap: anywhere;
  }
  .legal-dialog-updated {
    grid-area: updated;
    margin: 2px 0 0;
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-dim);
  }
  .legal-dialog-close {
    grid-area: close;
    justify-self: end;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.35);
    color: var(--text-muted);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-appearance: none;
    appearance: none;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  }
  .legal-dialog-close:hover,
  .legal-dialog-close:focus-visible {
    color: var(--text-white);
    border-color: var(--brand-accent);
    background: rgba(68, 0, 255, 0.18);
    outline: none;
  }
  .legal-dialog-rule {
    flex-shrink: 0;
    margin: 14px 0 16px;
    height: var(--rule-line-height);
    background: var(--rule-line-gradient);
    /* Popup isn't scroll-gated — wipe mask fails to paint this 1px over glass
       (same kill as .footer-rule-top). Keep the hairline fully visible. */
    --rule-wipe: 1;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .legal-dialog-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-right: 4px;
    touch-action: pan-y;
    scrollbar-width: thin;
    scrollbar-color: rgba(68, 0, 255, 0.55) transparent;
  }
  .legal-dialog-body::-webkit-scrollbar {
    width: 6px;
  }
  .legal-dialog-body::-webkit-scrollbar-thumb {
    background: rgba(68, 0, 255, 0.55);
    border-radius: 999px;
  }
  .legal-section + .legal-section { margin-top: 18px; }
  .legal-section-heading {
    margin: 0 0 6px;
    font-family: var(--font-heading-regular);
    font-weight: 600;
    font-size: 14px;
    /* Beat leftover Webflow h3 line-height tokens (~90px) on production */
    line-height: 1.3;
    color: var(--text-white);
  }
  .legal-section-copy,
  .legal-section-copy p,
  .legal-section-copy li {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-muted);
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  .legal-section-copy p { margin: 0 0 0.75em; }
  .legal-section-copy p:last-child { margin-bottom: 0; }
  .legal-section-copy ul {
    margin: 0.4em 0 0.75em;
    padding-left: 1.15em;
  }
  .legal-section-copy li { margin: 0.25em 0; }
  .legal-section-copy strong { color: var(--text-white); font-weight: 600; }
  .legal-section-copy a {
    color: var(--brand-accent);
    text-decoration: none;
    overflow-wrap: anywhere;
  }
  .legal-section-copy a:hover { text-decoration: underline; }
  .legal-dialog-footer {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
    padding-top: 4px;
  }
  .legal-dialog-ack {
    margin-top: 0;
    justify-self: auto;
    touch-action: manipulation;
    -webkit-appearance: none;
    appearance: none;
  }

  @media (max-width: 720px) {
    .legal-overlay {
      align-items: flex-end;
      padding: max(8px, env(safe-area-inset-top, 0px))
        max(8px, env(safe-area-inset-right, 0px))
        max(8px, env(safe-area-inset-bottom, 0px))
        max(8px, env(safe-area-inset-left, 0px));
    }
    .legal-dialog {
      max-width: none;
      width: 100%;
      max-height: 92vh;
      max-height: 92dvh;
      border-radius: 16px 16px 12px 12px;
      padding: 18px 16px 16px;
    }
    .legal-dialog-footer {
      justify-content: stretch;
    }
    .legal-dialog-ack {
      width: 100%;
      text-align: center;
    }
  }

  @media (max-height: 560px) and (orientation: landscape) {
    .legal-overlay {
      align-items: stretch;
      padding: max(6px, env(safe-area-inset-top, 0px))
        max(10px, env(safe-area-inset-right, 0px))
        max(6px, env(safe-area-inset-bottom, 0px))
        max(10px, env(safe-area-inset-left, 0px));
    }
    .legal-dialog {
      max-height: none;
      height: 100%;
      border-radius: 12px;
      padding: 14px 16px;
    }
    .legal-dialog-rule { margin: 10px 0 12px; }
    .legal-dialog-footer { margin-top: 12px; }
  }

  @media (max-width: 1100px) {
    .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 720px) {
    .pricing-grid { grid-template-columns: 1fr; }
    .pricing-card {
      padding: clamp(16px, 4.5vw, 22px);
      gap: 10px;
    }
    .contact-form { grid-template-columns: 1fr; }
    .footer-top { grid-template-columns: 1fr; }
    .footer-brand { text-align: left; }
  }

  @media (prefers-reduced-motion: reduce) {
    .legal-overlay,
    .legal-dialog {
      transition: none;
    }
    .legal-overlay.is-open .legal-dialog {
      transform: none;
    }
    .pc-scatter-wrapper,
    .pricing-section,
    .pricing-section .pricing-title,
    .pricing-section .pricing-subtitle,
    .pricing-section .pricing-card,
    .stat-card,
    #gpu-canvas,
    .gpu-sticky-frame {
      transition: none !important;
    }
    .pricing-section[data-pc-bridge="settled"],
    .pricing-section[data-pc-bridge="active"] {
      opacity: 1;
      transform: none;
    }
    .pricing-section .pricing-title,
    .pricing-section .pricing-subtitle,
    .pricing-section .pricing-card,
    .stat-card {
      opacity: 1;
      transform: none;
    }
  }

  /* ==========================================================================
     9. SECTION MERGE & REVEAL CSS
     ========================================================================== */
  /* Collapse Designer spacer so REC/camera enters directly under the wall (no dead scroll). */
  .video-wall + .spacer.large,
  .stat-chapter + .spacer.large,
  .brand-chapter + .spacer.large,
  .reviews-section + .spacer.large,
  .about-section + .spacer.large,
  .site-footer ~ .spacer,
  .site-footer ~ .spacer.large,
  .site-footer ~ .react-app-mount {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
  /* REC lives OVER the wall so suck→grow→ring reads on top of the last plate.
     Nothing inside this chapter is ever clickable (pure canvas/HUD visuals) —
     pointer-events:none so its stacking-only overlap never blocks clicks on
     whatever it paints over (e.g. the wall dot-nav during the pull-up). */
  #camera-canvas-container,
  .camera-canvas-container {
    background-color: transparent !important;
    z-index: 5 !important;
    height: var(--camera-chapter-vh, 800vh) !important;
    pointer-events: none !important;
  }
  /* Pull camera up to overlap the wall; stacking (z:5 > wall z:4) paints REC on top. */
  .camera-canvas-container {
    margin-top: calc(-1 * var(--camera-pull-up, 80vh)) !important;
  }
  #camera-canvas-container {
    margin-top: 0 !important;
  }
  /* Aligns to camera start; taller than camera so PC anim has extra scroll runway. */
  .gpu-canvas-container {
    margin-top: calc(-1 * var(--camera-chapter-vh, 800vh)) !important;
    height: var(--gpu-chapter-vh, 1200vh) !important;
    z-index: 1 !important;
    background-color: transparent !important;
  }
/* pricing-card-body-readout 20260727-1835 */

/* ===== EMBED OVERRIDES (from home-embed) ===== */
/* Stellar home embed overrides (was inline in HtmlEmbed) */
/* Only tokens that have no responsive override may live here — this block is
   unconditional, so anything repeated from a @media :root above silently wins
   over it (media queries add no specificity). Wall/dot sizing tokens are
   declared once at the top of the file so the short-viewport queries apply. */
:root {
  --preload-label-gap: 32px;
  --preload-no-text-gap: 16px;
  --preload-logo-size: 84px;
  --preload-bar-width: 220px;
  --wall-copy-top: var(--audio-clear-top);
  --wall-side-inset: 5%;
  --glitch-font: 'JetBrains Mono', monospace;
  --glitch-color-start: #ffffff;
  --glitch-color-end: #4400ff;
  --glitch-bg-start: #e8000a;
  --glitch-bg-end: #000000;
  --glitch-bg-opacity: 1.00;
  --camera-pull-up: 80vh;
  --camera-chapter-vh: 720vh;
  --gpu-chapter-vh: 1200vh;
}
/* Keep video-item padding at 0 — locked wall uses absolute .w-embed top/bottom, not item padding. */
.pill-active-bg {
  background: transparent !important;
  opacity: 0 !important;
  box-shadow: none !important;
}
.audio-pill-wrapper.state-off .pill-active-bg,
.audio-pill-wrapper.state-on .pill-active-bg {
  opacity: 1 !important;
  background: var(--brand-accent, #4400ff) !important;
  box-shadow: 0 4px 20px var(--brand-accent-glow, rgba(68, 0, 255, 0.5)) !important;
}
.audio-pill-wrapper.state-on #btn-sound-on,
.audio-pill-wrapper.state-off #btn-sound-off,
.pill-btn.active {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.pill-divider {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}