/* ============================================================
   RCS Viewer Landing — RESPONSIVE LAYER
   Mobile (0–767px) overrides. Tablet/Desktop/Wide/Ultra tuned
   by Lukas manually; stubs reserved below.
   Loaded after styles.css in index.html so rules cascade last.
   ============================================================ */

/* ============================================================
   SAFARI BACKDROP-FILTER STABILIZERS (all viewports)
   Safari/WebKit flickers backdrop-filter elements when a parent
   has transform / backdrop-filter too. Force each of these into
   its own compositing layer so repaints don't drop the blur. */
.s5-board-card,
#s9-btn,
.s9-form-glass,
.glass-pill {
  isolation: isolate;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: backdrop-filter, transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ============================================================
   MOBILE — 0 … 767px
   ============================================================ */
@media (max-width: 767px) {

  /* ------- MOBILE SCROLL SMOOTHNESS ------- */
  /* URL-bar collapse on mobile Chrome/Safari causes the viewport height to
     change mid-scroll which fights GSAP ScrollTrigger pins. Mitigations: */
  html {
    scroll-behavior: auto !important; /* native smooth + pins = jitter on mobile */
    -webkit-overflow-scrolling: touch;
  }
  body {
    -webkit-overflow-scrolling: touch;
  }
  /* S9 Role dropdown MUST scroll inside on mobile (was getting stuck) */
  .s9-select-menu, .s9-select-menu-inner {
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ------- DISABLE S9 STICKY PIN ON MOBILE ------- */
  /* Sticky pin + URL bar collapse = layout shift hell. Make S9 a normal
     section flow on mobile. Pin-related vars become no-ops. */
  .s9-cta-wrap {
    min-height: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .s9-cta-wrap > #cta {
    position: static !important;
    min-height: auto !important;
    top: auto !important;
  }

  /* ------- S3 INTERACTIVE DEMOS — DESKTOP ONLY (b3) ------- */
  /* Lens wheel + DoF wheel are inherently desktop-first interactions.
     Header (Real lenses. Real sensors. Real decisions.) stays visible. */
  #focal-section,
  #dof-section { display: none !important; }
  /* tagline area + jackpot cards (BODY/LENS/GATE with + symbols) STAY visible
     on mobile — only the interactive lens/dof wheel demos are cut. */

  /* ------- GLOBAL ------- */
  /* Kill horizontal overflow aggressively. overflow-x:clip beats :hidden
     because it doesn't create a new scrolling context, which was letting
     rotated/absolute children still expand document width on Chromium. */
  html, body {
    overflow-x: clip !important;
    max-width: 100vw !important;
    width: 100% !important;
  }
  /* Safari < 16 and older Chromium fallback */
  @supports not (overflow-x: clip) {
    html, body { overflow-x: hidden !important; }
  }
  /* Section-level clip for any section whose children may translate or
     scale past the viewport (carousels, PDF stack, poster strips). */
  section, main { overflow-x: clip; max-width: 100vw; }
  /* Navbar: tighten breathing room on phone */
  #navbar .navbar-inner { padding-top: 2rem !important; }

  /* ============================================================
     S1 — HERO
     - centered text + subhead
     - smaller headline + button
     - 2/3 text over 1/3 phone (force 2D mockup via JS flag)
     - CTA relabel: "Discover" -> "Early Access" (via JS below)
     ============================================================ */
  #hero {
    padding-top: 96px !important;
    padding-bottom: 56px !important;
    min-height: var(--app-height, 100vh) !important;
  }
  #hero > .grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
    align-items: stretch;
  }
  /* Lift hero-text children into flex parent so we can reorder them around the phone */
  #hero > .grid > #hero-text { display: contents !important; }
  #hero-badge      { order: 0; }
  #hero-headline   { order: 1; margin-bottom: var(--r-s1-head-gap, 8px) !important; }
  #hero-device     { order: 2; position: relative; z-index: 1; }
  #hero-subhead    { order: 3; position: relative; z-index: 2; margin-top: var(--r-s1-sub-mt, -24px) !important; }
  #hero-text > .pt-4 { order: 4; position: relative; z-index: 2; margin-top: var(--r-s1-cta-mt, 4px) !important; }
  /* Navbar sizing overrides */
  #navbar a img { height: var(--r-nav-logo-h, 24px) !important; }
  #mobile-menu-btn svg, #mobile-menu-btn i { width: var(--r-nav-icon-sz, 24px) !important; height: var(--r-nav-icon-sz, 24px) !important; }
  #navbar .navbar-inner { padding-top: var(--r-nav-pad-top, 2rem) !important; }

  #hero-text {
    text-align: center !important;
    align-items: center !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 18px !important;
    padding: 0 4% !important;
  }
  #hero-headline {
    font-size: 40px !important;
    line-height: 1.05 !important;
    text-align: center !important;
  }
  #hero-subhead {
    font-size: 14px !important;
    line-height: 1.55 !important;
    max-width: 340px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  /* Shrink the Discover CTA + recenter it */
  #discover-btn {
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 10px 22px !important;
    font-size: 11px !important;
  }
  #discover-btn span { font-size: 11px !important; }

  /* Phone device area: collapse to ~1/3 of the viewport, 2D only */
  #hero-device {
    justify-content: center !important;
    align-items: flex-start !important;
  }
  #hero-phone-wrapper {
    width: 60% !important;
    max-width: 240px !important;
    margin-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Hide Spline canvas on mobile — always 2D fallback */
  #hero-spline-canvas,
  #hero-spline-loading { display: none !important; }
  /* Baked video mode (?video=1) — mobile calibration from Resp tab.
     All values read from CSS vars set by the debug Resp tab; fallbacks
     are the current mobile-tuned defaults. */
  body.rcs-video-mode #hero-phone-wrapper {
    width: var(--r-s1-wrap-w, 180%) !important;
    max-width: none !important;
    margin-right: var(--r-s1-wrap-mr, -23%) !important;
    margin-left: auto !important;
  }
  body.rcs-video-mode #hero-spline-video {
    width: var(--r-s1-vid-w, 200%) !important;
    height: var(--r-s1-vid-h, 40vh) !important;
    max-height: var(--r-s1-vid-max-h, 900px) !important;
    min-height: var(--r-s1-vid-min-h, 270px) !important;
    transform: translate(var(--r-s1-vid-tx, 2.5%), var(--r-s1-vid-ty, -40%)) scale(var(--r-s1-vid-scale, 2.1)) !important;
    mask-image: radial-gradient(ellipse var(--r-s1-mask-ew, 100%) var(--r-s1-mask-eh, 61%) at center, black var(--r-s1-mask-core, 61%), transparent 100%) !important;
    -webkit-mask-image: radial-gradient(ellipse var(--r-s1-mask-ew, 100%) var(--r-s1-mask-eh, 61%) at center, black var(--r-s1-mask-core, 61%), transparent 100%) !important;
  }
  body.rcs-video-mode #hero-phone-2d { display: none !important; }
  /* Mobile hero: hide "Trusted by teams at" label — logo strip carries the story alone */
  #s1-logo-label { display: none !important; }
  #hero-phone-2d {
    display: block !important;
    opacity: 1 !important;
    position: relative !important;
  }
  .hero-phone-2d-frame {
    width: 200px !important;
    transform: rotate(0deg) !important;
  }

  /* Logo carousel: push closer to bottom + shrink */
  #hero .absolute.left-0.right-0[class*="bottom"] { bottom: 24px !important; }
  #s1-logo-label {
    font-size: 8px !important;
    letter-spacing: 0.25em !important;
    margin-bottom: 14px !important;
  }
  #logo-carousel { gap: 32px !important; }
  #logo-carousel img { height: 18px !important; opacity: 0.15 !important; }


  /* ============================================================
     S2 — TECHNOLOGY (Digital twin)
     - ever-so-slightly smaller headline
     - right-aligned block sticks to viewport bottom 2/3 area
     ============================================================ */
  #scroll-video-container { height: 200vh !important; }
  #scroll-video-overlay {
    align-items: flex-end !important;
    padding-bottom: 12vh !important;
  }
  /* S2 — driven by Resp tab vars (see RESPONSIVE_SECTIONS s2). */
  #scroll-video-overlay > .w-full {
    padding-left: var(--r-s2-pad-x, 5%) !important;
    padding-right: var(--r-s2-pad-x, 5%) !important;
  }
  #scroll-text-content {
    max-width: var(--r-s2-block-mw, 100%) !important;
    margin-left: auto !important;
    margin-right: var(--r-s2-block-mr, 0) !important;
    text-align: var(--r-s2-align, right) !important;
    gap: 0 !important;
  }
  /* Tailwind space-y-7 adds margin-top:28px to siblings → collapses with our
     margin-bottom vars (max wins). Kill it so the per-element gaps land. */
  #scroll-text-content > * + * { margin-top: 0 !important; }
  #s2-label {
    font-size: var(--r-s2-label-sz, 9px) !important;
    margin-bottom: var(--r-s2-label-mb, 8px) !important;
  }
  #s2-headline {
    font-size: var(--r-s2-headline, 36px) !important;
    line-height: var(--r-s2-headline-lh, 1.04) !important;
    margin-bottom: var(--r-s2-head-mb, 14px) !important;
  }
  #s2-desc {
    font-size: var(--r-s2-desc-sz, 13px) !important;
    line-height: var(--r-s2-desc-lh, 1.55) !important;
    max-width: var(--r-s2-desc-mw, 320px) !important;
    margin-left: auto !important;
    margin-bottom: var(--r-s2-desc-mb, 14px) !important;
  }
  #s2-compat-label { font-size: var(--r-s2-compat-sz, 8px) !important; }


  /* ============================================================
     S3 — CAMERA (top block "Real lenses. Real sensors.")
     - 1-viewport fit, centered cards, `+` between cards (vertical)
     - subtitle tighter line-height + smaller max-width
     ============================================================ */
  #camera {
    padding-top: 96px !important;
    padding-bottom: 96px !important;
    min-height: auto !important;
    display: block !important;
  }
  #camera > .w-full {
    padding-left: 5% !important;
    padding-right: 5% !important;
  }
  #camera > .w-full > .text-center.mb-28 {
    margin-bottom: 40px !important;
    gap: 14px !important;
  }
  #s3-label { font-size: 9px !important; }
  #s3-title {
    font-size: 34px !important;
    line-height: 1.12 !important;
  }
  #s3-subtitle {
    font-size: 13px !important;
    line-height: 1.55 !important;
    max-width: 280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Stack 3 cards vertically centered with + between them.
     Card width + plus sign size/opacity bind to Resp tab CSS vars. */
  #camera-cards-row {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: var(--r-s3t-card-gap, 12px) !important;
    margin-bottom: 44px !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #camera-cards-row #card-body,
  #camera-cards-row #card-lens,
  #camera-cards-row #card-gate {
    width: 100% !important;
    max-width: var(--r-s3t-card-w, 260px) !important;
  }
  /* `+` separators — bigger + more visible per Lukas, between each card */
  #separator-1, #separator-2 {
    display: block !important;
    text-align: center !important;
    font-size: var(--r-s3t-plus-sz, 26px) !important;
    opacity: var(--r-s3t-plus-op, 70%) !important;
    line-height: 1 !important;
    margin: 4px 0 !important;
    color: rgba(255,255,255,0.85);
  }

  /* Tagline + disclaimer — Resp-tab driven (--r-s3t-tag-* / --r-s3t-disc-*) */
  #s3-tagline-area {
    margin-top: var(--r-s3t-tag-mt, 32px) !important;
    margin-bottom: var(--r-s3t-tag-mb, 64px) !important;
  }
  .s3-tagline {
    font-size: var(--r-s3t-tag-sz, 16px) !important;
    line-height: 1.5 !important;
    max-width: var(--r-s3t-tag-mw, 300px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .s3-disclaimer {
    font-size: var(--r-s3t-disc-sz, 9px) !important;
    margin-top: var(--r-s3t-disc-mt, 8px) !important;
    max-width: var(--r-s3t-disc-mw, 280px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    opacity: var(--r-s3t-disc-op, 25%) !important;
  }


  /* ============================================================
     S3 ALTERNATING ROWS — Know Your Lenses / Pull Focus
     - keep L/R alternation within a single column
     - image in lower 1/3 of its row
     - text pulled to the top with inward padding

     NB: main.js runs gsap.from(#focal-section, { x: -40 }) and
     gsap.from(#dof-section, { x: 40 }) as an entrance animation.
     Before the ScrollTrigger fires we are stuck at that initial
     offset. Nuke the transform on mobile to keep layout stable.
     ============================================================ */
  #focal-section,
  #dof-section {
    margin-bottom: 64px !important;
    transform: none !important;
    opacity: 1 !important;
    left: auto !important;
    right: auto !important;
  }
  #focal-section .grid,
  #dof-section .grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* Focal (Know Your Lenses) — text first, image under */
  #focal-section .grid > div:first-child {
    order: 2;
    margin: 0 !important;
    transform: none !important;
    padding: 0 !important;
  }
  #focal-section .grid > div:last-child {
    order: 1;
    padding: 0 5% !important;
    transform: none !important;
  }
  #focal-section #focal-image-wrap {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* DoF (Pull Focus) — text first, image under (mirror of focal) */
  #dof-section .grid > div:first-child {
    order: 1;
    padding: 0 5% !important;
    transform: none !important;
    text-align: left !important;
  }
  #dof-section .grid > div:last-child {
    order: 2;
    margin: 0 !important;
    transform: none !important;
  }
  #dof-section #dof-image-wrap {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Shared text block tuning + alternating L/R alignment.
     Focal = LEFT (matches desktop image-on-left layout).
     DoF = RIGHT (matches desktop image-on-right layout).
     Sizes wired to --r-s3a-text-scale so the Resp tab can dial. */
  #focal-section .s3-text-block,
  #dof-section .s3-text-block {
    transform: none !important;
    padding: 0 6% !important;
  }
  #focal-section .s3-text-block { text-align: left !important; }
  #dof-section .s3-text-block   { text-align: right !important; }
  #focal-section .s3-text-block h3,
  #dof-section .s3-text-block h3 {
    font-size: calc(44px * var(--r-s3a-text-scale, 1)) !important;
    line-height: 1.1 !important;
    margin-bottom: 12px !important;
  }
  #focal-section .s3-text-block p,
  #dof-section .s3-text-block p {
    font-size: calc(15px * var(--r-s3a-text-scale, 1)) !important;
    line-height: 1.55 !important;
    max-width: 100% !important;
  }

  /* Glass card (floating wheels) — shift inward so it fits the frame */
  #focal-glass-card { right: auto !important; left: 50% !important; transform: translate(-50%, -50%) !important; }
  #dof-glass-card   { left: auto !important; right: 50% !important; transform: translate(50%, -50%) !important; }
  /* Fallback simpler: center both on mobile */
  #focal-glass-card,
  #dof-glass-card {
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    width: 180px !important;
    height: 260px !important;
  }

  /* Focal value overlays smaller */
  #focal-value-overlay,
  #dof-value-overlay {
    font-size: 34px !important;
    bottom: 10px !important;
    left: 10px !important;
    right: auto !important;
  }
  #dof-value-overlay { left: auto !important; right: 10px !important; }


  /* ============================================================
     HIW — How It Works
     HIDDEN ON MOBILE per Lukas request — the section doesn't read
     well at phone width and the impact it adds doesn't justify the
     vertical real estate. Flow goes S3 focus rings -> S4 tiles.
     Stub rules below are kept in case we ever re-enable it.
     ============================================================ */
  #hiw-section, .hiw-section { display: none !important; }

  .hiw-section {
    /* Kill the pin on mobile: let the native page scroll show all 3 stacked */
    height: auto !important;
  }
  .hiw-pinned {
    position: relative !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    padding: 80px 5% !important;
    transform: none !important;
  }
  .hiw-header-layer {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    text-align: center !important;
    margin-bottom: 40px !important;
    padding: 0 4% !important;
  }
  #hiw-headline {
    font-size: 32px !important;
    line-height: 1.12 !important;
  }
  #hiw-headline .text-white\/40 {
    font-family: 'Poppins', system-ui, sans-serif !important;
    font-weight: 400 !important;
  }

  /* Stack step columns vertically */
  .hiw-steps-row {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 40px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }
  .hiw-step-col {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    opacity: 1 !important;
    transform: none !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
  .hiw-big-num {
    font-size: 120px !important;
    line-height: 0.8 !important;
    margin-bottom: 8px !important;
    opacity: 0.08 !important;
  }
  .hiw-step-title { font-size: 30px !important; margin-bottom: 12px !important; }
  .hiw-step-desc  { font-size: 14px !important; line-height: 1.6 !important; margin-bottom: 14px !important; }
  .hiw-micro-benefit { font-size: 12px !important; }

  /* Hide connectors (arrows) and progress dots on mobile */
  .hiw-connector,
  .hiw-progress,
  .hiw-bg { display: none !important; }


  /* ============================================================
     S4-1 — Feature Tiles (Purpose-built for production)
     Lukas wants tiles to render IDENTICAL to landing/ on phone.
     Tailwind already handles the stacking via grid-cols-1 +
     lg:col-span-* in the HTML, so we add NO mobile overrides
     here. Only the headline line-height tweak that was originally
     requested remains. Per-tile min-height, font sizes, image
     saturation, image scale, etc. all stay at their landing/
     values via universal-debug.js init().
     ============================================================ */
  #s4-tiles-title {
    line-height: 1.1 !important;
  }


  /* ============================================================
     S4 — COLLABORATION (Plan together. From anywhere.)
     HIDE on mobile — the scene is desktop-only per plan.
     ============================================================ */
  #collaboration { display: none !important; }


  /* ============================================================
     S5 — STORYLINE (3 subsections)
     ============================================================ */
  #storyline { padding-top: 72px !important; padding-bottom: 96px !important; }

  /* S5 header — "From viewpoints to storyline" */
  #s5-header {
    margin-bottom: 56px !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
  }
  #s5-header h2 { font-size: 34px !important; line-height: 1.1 !important; }
  #s5-header p {
    font-size: 12px !important;
    line-height: 1.55 !important;
    max-width: 300px !important;
  }
  /* Label uses tracking: 0.2em — last letter trailing space pulls text
     visually to the LEFT of true center. Compensate with padding-left. */
  #s5-label { font-size: 9px !important; padding-left: 0.2em !important; }
  #s2-label { padding-left: 0.2em !important; }
  #s3-label { padding-left: 0.2em !important; }
  #s4-tiles-label { padding-left: 0.25em !important; }
  #s7-label { padding-left: 0.2em !important; }
  #s8-label, #s8-tiles-label { padding-left: 0.2em !important; }

  /* S5 storyboard carousel: tighten card width so one fits visually */
  .s5-board-card { width: 300px !important; }
  .s5-board-arrow { width: 36px !important; }
  #s5-carousel-wrap { margin-bottom: 80px !important; }

  /* S5 AI section — "Realism on the fly" */
  #s5-ai-section {
    margin-bottom: 80px !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
  }
  #s5-ai-container {
    flex-direction: column !important;
    gap: 32px !important;
  }
  #s5-ai-copy {
    max-width: 100% !important;
    text-align: center !important;
  }
  #s5-ai-heading {
    font-size: 38px !important;
    line-height: 1.15 !important;
    margin-bottom: 16px !important;
    padding-top: 18px;
  }
  #s5-ai-desc {
    font-size: 13px !important;
    line-height: 1.65 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 300px !important;
  }
  #s5-ai-board-wrap { max-width: 100% !important; }
  #s5-ai-meta-left span,
  #s5-ai-meta-right span { font-size: 9px !important; }

  /* S5 PDF section — "One click. Full report." */
  #s5-pdf-section {
    padding-left: 5% !important;
    padding-right: 5% !important;
  }
  #s5-pdf-container {
    flex-direction: column-reverse !important;
    gap: 28px !important;
    max-width: 100% !important;
  }
  #s5-pdf-mock-wrap { max-width: 100% !important; }
  #s5-pdf-copy {
    max-width: 100% !important;
    text-align: center !important;
    padding: 0 4%;
  }
  #s5-pdf-heading {
    font-size: 38px !important;
    line-height: 1.15 !important;
    margin-bottom: 14px !important;
  }
  #s5-pdf-desc {
    font-size: 13px !important;
    line-height: 1.65 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 300px !important;
  }


  /* ============================================================
     S7 — SAVINGS (Real savings. Proven technology.)
     - smaller vertical gaps
     - posters slider contained
     - industry heading max-width contained
     ============================================================ */
  #savings { padding-top: 72px !important; padding-bottom: 72px !important; }
  #savings > .w-full { padding-left: 5% !important; padding-right: 5% !important; }

  #s7-header { margin-bottom: 36px !important; gap: 10px !important; }
  #s7-label { font-size: 9px !important; }
  #s7-headline { font-size: 32px !important; line-height: 1.1 !important; }

  /* Stats: stack + tighten. styles.css has a BAKED rule
     `#s7-stats > .flex-1 { padding: 80px !important }` which
     outranks plain `#s7-stats > div` (higher specificity).
     Match its selector to win the cascade on mobile. */
  #s7-stats {
    flex-direction: column !important;
    margin-bottom: 72px !important;
    gap: 4px !important;
  }
  #s7-stats > .flex-1 {
    flex: 0 0 auto !important;
    padding: 14px 10px !important;
    gap: 6px !important;
  }
  #s7-stats .s7-stat-num { font-size: 44px !important; }
  #s7-stats .s7-stat-divider { display: none !important; }

  /* Industry row: stack, contain poster carousel */
  #s7-industry {
    flex-direction: column !important;
    gap: 28px !important;
    max-width: 100% !important;
  }
  .s7-carousel-area {
    width: 100% !important;
    max-width: 320px !important;
    height: 260px !important;
    margin: 0 auto !important;
  }
  #s7-industry-copy {
    width: 100% !important;
    text-align: center !important;
  }
  #s7-ind-sublabel { font-size: 9px !important; }
  #s7-ind-heading {
    font-size: 22px !important;
    line-height: 1.2 !important;
    max-width: 300px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #s7-ind-desc {
    font-size: 12px !important;
    line-height: 1.6 !important;
    max-width: 280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #s7-disclaimer { font-size: 8px !important; margin-top: 32px !important; }

  /* NOTE: S8 / S9 / Footer intentionally NOT touched per plan. */
}


/* ============================================================
   RESPONSIVE DEBUG TAB — CSS VAR BINDINGS (mobile)
   Reads CSS custom properties written by the Resp debug tab on
   :root and applies them to the real elements. All rules use
   var(--x, <fallback>) so if the user hasn't touched the slider
   the page renders the default. Everything is scoped to the
   mobile @media block so desktop is untouched.
   ============================================================ */
@media (max-width: 767px) {

  /* ---- S1 Hero ---- */
  #hero {
    padding-top: var(--r-s1-pad-y, 96px) !important;
    padding-bottom: var(--r-s1-pad-y, 96px) !important;
  }
  #hero-text { text-align: var(--r-s1-align, center) !important; align-items: var(--r-s1-align, center) !important; }
  #hero-headline {
    font-size: var(--r-s1-headline, 42px) !important;
    line-height: var(--r-s1-headline-lh, 1.05) !important;
  }
  #hero-subhead {
    font-size: var(--r-s1-subhead, 14px) !important;
    max-width: var(--r-s1-subhead-mw, 300px) !important;
  }
  #discover-btn { transform: scale(var(--r-s1-btn-scale, 0.9)) !important; transform-origin: center !important; }
  .hero-phone-2d-frame {
    width: var(--r-s1-mock-w, 260px) !important;
    aspect-ratio: var(--r-s1-mock-ar, 0.56) !important;
    transform: translateY(var(--r-s1-mock-y, 0px)) rotate(var(--r-s1-mock-rot, -3deg)) !important;
  }
  #hero, #hero-text, #hero-device { transform: scale(var(--r-s1-scale, 1)); transform-origin: center top; }
  #hero-text, #hero-device { transform: none; } /* children reset so only the outer scale applies */
  #hero { transform: scale(var(--r-s1-scale, 1)); transform-origin: center top; }

  /* ---- S2 Technology ----
     Desktop layout: text block is right-aligned via flex justify-end +
     ml-auto + text-right on #scroll-text-content. Default fallback
     stays 'right' so mobile preserves that layout when the slider is
     untouched. The actual element ids are #scroll-text-content (block
     wrapper), #s2-headline, #s2-desc, #s2-label — NOT #s2-text. */
  #technology {
    padding-top: var(--r-s2-pad-y, 96px) !important;
    padding-bottom: var(--r-s2-pad-y, 96px) !important;
  }
  #scroll-text-content,
  #s2-label, #s2-headline, #s2-desc {
    text-align: var(--r-s2-align, right) !important;
  }
  /* Margin auto rules so the text-align value also shifts the block */
  #scroll-text-content {
    margin-left: var(--r-s2-margin-l, auto) !important;
    margin-right: var(--r-s2-margin-r, 0) !important;
  }
  #s2-desc { margin-left: auto !important; margin-right: 0 !important; }
  #s2-headline {
    font-size: var(--r-s2-headline, 42px) !important;
    line-height: var(--r-s2-headline-lh, 1.05) !important;
  }
  /* V-align: control the parent flex's items alignment */
  #scroll-video-overlay {
    align-items: var(--r-s2-valign, center) !important;
  }

  /* ---- S3 top cards (Real lenses) ----
     Real selectors are #s3-title (h2) + #camera-cards-row + #card-body/lens/gate.
     The previous block referenced #s3-cards/#s3-camera-cards which never
     existed. Card width / gap / plus styling is wired in the dedicated
     'Stack 3 cards vertically' block higher up — do NOT duplicate here. */
  #s3-title {
    font-size: var(--r-s3t-headline, 32px) !important;
    line-height: var(--r-s3t-headline-lh, 1.15) !important;
    text-align: var(--r-s3t-align, center) !important;
  }
  #s3-tagline {
    max-width: var(--r-s3t-tag-mw, 280px) !important;
    margin-left: auto !important; margin-right: auto !important;
  }

  /* ---- S3 alternating (Know Your Lenses / Pull Focus) ----
     Real selectors: .s3-text-block (text), #focal-image-wrap /
     #dof-image-wrap (image wrapper), #focal-glass-card /
     #dof-glass-card (glass overlay). The .s3-alt-* / #focal-copy
     classes never existed.
     The text-align rule is intentionally NOT bound to a single var
     because the mobile design uses ALTERNATING alignment (focal=left,
     dof=right) — overriding both with a single Resp slider would
     break the alternation. Image + glass position vars are honored. */
  #focal-image-wrap, #dof-image-wrap {
    transform: translate(var(--r-s3a-img-x, 0px), var(--r-s3a-img-y, 0px)) scale(var(--r-s3a-img-scale, 1)) !important;
  }
  #focal-glass-card, #dof-glass-card {
    transform: translate(calc(-50% + var(--r-s3a-glass-x, 0px)), calc(-50% + var(--r-s3a-glass-y, 0px))) scale(var(--r-s3a-glass-scale, 1)) !important;
  }

  /* ---- HIW How It Works ---- */
  #hiw-section { transform: scale(var(--r-hiw-scale, 1)); transform-origin: center top; }
  #hiw-headline, #hiw-section h2 {
    font-size: var(--r-hiw-headline, 38px) !important;
  }
  #hiw-cards, .hiw-cards-wrap { gap: var(--r-hiw-card-gap, 16px) !important; }
  #hiw-cards > *, .hiw-step { max-width: var(--r-hiw-card-w, 280px) !important; }
  #hiw-section, #hiw-cards, .hiw-step { text-align: var(--r-hiw-align, center) !important; }

  /* ---- S4 Tiles (Purpose-built) — selectors fixed to actual HTML IDs ---- */
  #s4-tiles-header, #features-grid {
    transform: scale(var(--r-s4t-scale, 1)) !important;
    transform-origin: center top;
  }
  #s4-tiles-label {
    font-size: var(--r-s4t-label-sz, 10px) !important;
    margin-bottom: var(--r-s4t-label-mb, 8px) !important;
  }
  #s4-tiles-title {
    font-size: var(--r-s4t-headline, 36px) !important;
    line-height: var(--r-s4t-headline-lh, 1.15) !important;
    margin-bottom: var(--r-s4t-head-mb, 16px) !important;
  }
  #s4-tiles-desc {
    font-size: var(--r-s4t-desc-sz, 14px) !important;
    line-height: var(--r-s4t-desc-lh, 1.55) !important;
    max-width: var(--r-s4t-desc-mw, 320px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #s4-tiles-header { margin-bottom: var(--r-s4t-desc-mb, 64px) !important; }
  .feature-tile { min-height: var(--r-s4t-min-h, 360px) !important; }
  #features-grid { gap: var(--r-s4t-gap, 16px) !important; }

  /* ---- S5 Realism on the fly ---- */
  #s5-ai-heading {
    font-size: var(--r-s5r-headline, 44px) !important;
    line-height: var(--r-s5r-headline-lh, 1.15) !important;
    text-align: var(--r-s5r-align, left) !important;
    padding-top: var(--r-s5r-push-y, 40px) !important;
  }
  #s5-ai-copy { text-align: var(--r-s5r-align, left) !important; }

  /* ---- S5 One click / PDF ---- */
  #s5-pdf-heading {
    font-size: var(--r-s5p-headline, 44px) !important;
    line-height: var(--r-s5p-headline-lh, 1.15) !important;
    text-align: var(--r-s5p-align, right) !important;
    padding-top: var(--r-s5p-push-y, 40px) !important;
  }
  #s5-pdf-copy {
    text-align: var(--r-s5p-align, right) !important;
    transform: translateX(var(--r-s5p-push-x, 0px)) !important;
  }
  #s5-ai-copy {
    transform: translateX(var(--r-s5r-push-x, 0px)) !important;
  }

  /* ---- S7 Savings — wired via Resp tab vars ---- */
  #savings { transform: scale(var(--r-s7-scale, 1)); transform-origin: center top; }
  .s7-stat-num { font-size: var(--r-s7-stat-num, 56px) !important; }
  /* Per-stat number sizes — override the global statNum */
  #s7-stats > .flex-1:nth-child(1) .s7-stat-num { font-size: var(--r-s7-stat1-num, var(--r-s7-stat-num, 56px)) !important; }
  #s7-stats > .flex-1:nth-child(3) .s7-stat-num { font-size: var(--r-s7-stat2-num, var(--r-s7-stat-num, 56px)) !important; }
  #s7-stats > .flex-1:nth-child(5) .s7-stat-num { font-size: var(--r-s7-stat3-num, var(--r-s7-stat-num, 56px)) !important; }
  #s7-stat1-label, #s7-stat2-label, #s7-stat3-label {
    font-size: var(--r-s7-stat-label-sz, 10px) !important;
    line-height: var(--r-s7-stat-label-lh, 1.4) !important;
  }
  /* Stat descriptions: override Tailwind font-mono with Red Hat (default) or
     keep mono if --r-s7-stat-desc-font is "mono". Apply size/lh/max-width. */
  #s7-stat1-desc, #s7-stat2-desc, #s7-stat3-desc {
    font-family: 'Red Hat Display', system-ui, sans-serif !important;
    font-size: var(--r-s7-stat-desc-sz, 12px) !important;
    line-height: var(--r-s7-stat-desc-lh, 1.55) !important;
    max-width: var(--r-s7-stat-desc-mw, 240px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #s7-stats { gap: var(--r-s7-stat-gap, 24px) !important; }
  #s7-stats > .flex-1 { padding: var(--r-s7-stat-pad, 32px) !important; }
  /* S7 disclaimer: width/size/opacity tunable from Resp tab */
  #s7-disclaimer {
    font-size: var(--r-s7-disc-sz, 9px) !important;
    max-width: var(--r-s7-disc-mw, 360px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: var(--r-s7-disc-mt, 32px) !important;
    opacity: var(--r-s7-disc-op, 8%) !important;
    color: rgba(255,255,255,1) !important;
  }
  /* Scale the carousel area only — the JS lays out each .s7-poster-card
     with an absolute translate(), so adding scale to the cards directly
     would override the translate and pile every poster on top of each
     other. Scaling the parent inherits visually without breaking layout. */
  #s7-carousel-area { transform: scale(var(--r-s7-posters, 0.85)); transform-origin: center center; }
  #s7-ind-heading { font-size: var(--r-s7-ind-head, 24px) !important; }
  #s7-ind-desc { max-width: var(--r-s7-ind-mw, 300px) !important; }

  /* ---- S9 CTA form ----
     Default scale stays 1 so the submit button keeps its full size.
     Slider in the Resp tab still works if you want to dial it down. */
  #cta {
    padding-top: var(--r-s9-pad-y, 64px) !important;
    padding-bottom: var(--r-s9-pad-y, 64px) !important;
  }
  #s9-content { transform: scale(var(--r-s9-scale, 1)); transform-origin: center top; }
  #s9-headline {
    font-size: var(--r-s9-headline, 30px) !important;
    line-height: var(--r-s9-headline-lh, 1.08) !important;
    margin-bottom: var(--r-s9-head-mb, 16px) !important;
  }
  /* S9 desc: visible, sized via Resp tab vars. */
  #s9-desc {
    display: block !important;
    font-size: var(--r-s9-desc-sz, 13px) !important;
    line-height: var(--r-s9-desc-lh, 1.5) !important;
    max-width: var(--r-s9-desc-mw, 280px) !important;
    margin-bottom: var(--r-s9-desc-mb, 24px) !important;
  }
  /* Form note ("You will receive...") — hidden on mobile per Lukas. */
  #s9-btn-note { display: none !important; }
  /* S3 was huge with min-h-screen + py-32 — content (header + jackpot cards
     + tagline) fits in much less since wheels are cut. Tighten on mobile. */
  #camera {
    min-height: auto !important;
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  #s9-content { gap: 16px !important; }
  .s9-form-glass, #s9-form { max-width: var(--r-s9-form-w, 340px) !important; }
  #s9-inputs { gap: var(--r-s9-form-gap, 16px) !important; }

  /* === S5 main header (From viewpoints to storyline) === */
  #s5-label { margin-bottom: var(--r-s5m-label-mb, 16px) !important; }
  #s5-headline {
    font-size: var(--r-s5m-head-sz, 36px) !important;
    line-height: var(--r-s5m-head-lh, 1.1) !important;
    margin-bottom: var(--r-s5m-head-mb, 16px) !important;
  }
  #s5-desc {
    font-size: var(--r-s5m-desc-sz, 14px) !important;
    line-height: var(--r-s5m-desc-lh, 1.55) !important;
    max-width: var(--r-s5m-desc-mw, 300px) !important;
  }
  #s5-header { margin-bottom: var(--r-s5m-sect-mb, 56px) !important; }

  /* === S5 Realism subsection === */
  #s5-ai-heading {
    margin-bottom: var(--r-s5r-head-mb, 16px) !important;
  }
  #s5-ai-desc {
    font-size: var(--r-s5r-desc-sz, 14px) !important;
    line-height: var(--r-s5r-desc-lh, 1.55) !important;
    max-width: var(--r-s5r-desc-mw, 360px) !important;
    margin-bottom: var(--r-s5r-desc-mb, 24px) !important;
  }
  #s5-ai-cta { font-size: var(--r-s5r-cta-sz, 11px) !important; }
  /* Typewriter prompt: wrapper is in normal flex flow (so actors stay right
     via justify-between) BUT has height:0 + overflow:visible — prompt text
     paints freely above/below without ever pushing parent layout. */
  #s5-ai-prompt-row {
    position: relative !important;
    min-height: var(--r-s5r-prompt-row-h, 24px) !important;
    overflow: visible !important;
    align-items: center !important;
  }
  #s5-ai-prompt-row > div:first-child {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    overflow: visible !important;
    position: relative !important;
    pointer-events: none !important;
    /* prompt-mt now offsets ONLY the prompt text, NOT the actors row */
    top: var(--r-s5r-prompt-mt, 14px) !important;
  }
  #s5-ai-prompt {
    font-size: var(--r-s5r-prompt-sz, 11px) !important;
    line-height: var(--r-s5r-prompt-lh, 1.4) !important;
    white-space: normal !important;
    word-break: break-word !important;
    display: inline !important;
  }
  /* Gap between left copy column (CTA) and right demo board on mobile */
  #s5-ai-container {
    gap: var(--r-s5r-block-gap, 32px) !important;
  }

  /* === S5 PDF subsection === */
  #s5-pdf-heading {
    margin-bottom: var(--r-s5p-head-mb, 16px) !important;
  }
  #s5-pdf-desc {
    font-size: var(--r-s5p-desc-sz, 14px) !important;
    line-height: var(--r-s5p-desc-lh, 1.55) !important;
    max-width: var(--r-s5p-desc-mw, 360px) !important;
    margin-bottom: var(--r-s5p-desc-mb, 24px) !important;
  }
  #s5-pdf-cta { font-size: var(--r-s5p-cta-sz, 11px) !important; }

  /* === S7 main header (Real savings. Proven technology.) === */
  #s7-headline {
    font-size: var(--r-s7-main-head, 36px) !important;
    line-height: var(--r-s7-main-head-lh, 1.1) !important;
    margin-bottom: var(--r-s7-main-head-mb, 56px) !important;
  }
  /* === S7 Industry block === */
  #s7-ind-heading {
    font-size: var(--r-s7-ind-head, 24px) !important;
    line-height: var(--r-s7-ind-head-lh, 1.2) !important;
    margin-bottom: var(--r-s7-ind-head-mb, 12px) !important;
  }
  #s7-ind-desc {
    font-size: var(--r-s7-ind-desc, 14px) !important;
    line-height: var(--r-s7-ind-desc-lh, 1.55) !important;
    max-width: var(--r-s7-ind-mw, 300px) !important;
  }

  /* ============================================================
     SECTION OFFSET Y (universal vertical offset)
     One slider per section that translates the section's main
     content block up/down in pixels. Applied via translateY on
     a child block that does NOT also receive scale (avoids the
     'composed transform overrides itself' trap). The Resp tab
     ships these as --r-<sec>-offset-y CSS vars.
     ============================================================ */
  #hero-text         { transform: translate3d(0, var(--r-s1-offset-y,  0px), 0) !important; }
  #scroll-text-content { transform: translate3d(0, var(--r-s2-offset-y, 0px), 0) !important; }
  #s3-title          { transform: translate3d(0, var(--r-s3t-offset-y, 0px), 0); }
  #camera-cards-row  { transform: translate3d(0, var(--r-s3t-offset-y, 0px), 0); }
  #focal-section     { transform: translate3d(0, var(--r-s3a-offset-y, 0px), 0); }
  #dof-section       { transform: translate3d(0, var(--r-s3a-offset-y, 0px), 0); }
  #hiw-section       { transform: translate3d(0, var(--r-hiw-offset-y, 0px), 0) scale(var(--r-hiw-scale, 1)); transform-origin: center top; }
  #features-grid, #s4-features-wrap > .grid {
    transform: translate3d(0, var(--r-s4t-offset-y, 0px), 0);
  }
  #s5-ai-section     { transform: translate3d(0, var(--r-s5r-offset-y, 0px), 0); }
  #s5-pdf-section    { transform: translate3d(0, var(--r-s5p-offset-y, 0px), 0); }
  #s7-stats          { transform: translate3d(0, var(--r-s7-offset-y, 0px), 0); }
  #s9-headline, #s9-form, .s9-form-glass {
    /* group offset — both headline and form move together */
    --_s9-off: var(--r-s9-offset-y, 0px);
  }
  #s9-content { transform: translate3d(0, var(--r-s9-offset-y, 0px), 0) scale(var(--r-s9-scale, 1)); transform-origin: center top; }
}


/* ============================================================
   TABLET, DESKTOP, WIDE, ULTRA — reserved for manual tuning
   Keep sections as empty blocks so Lukas can drop values in.
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Tablet — stub (manual tune) */
}
@media (min-width: 1024px) and (max-width: 1439px) {
  /* Desktop — stub (manual tune) */
}
@media (min-width: 1440px) and (max-width: 1919px) {
  /* Wide — stub (manual tune) */
}
@media (min-width: 1920px) {
  /* Ultra — stub (manual tune) */
}