/*
 * Edit/Build by: Bruce
 * Date: 2026-08-06 10:45
 *
 * 2026-08-06 10:45 update: fixed a WCAG AA contrast failure found in
 * /code-review of page-product-videos.php — .mode-tab-num (the "01"/"02"/
 * "03" labels in the DNE mode-tabbar) was 11px text colored var(--green)
 * (#069A44, ~3.68:1 on the surface background), which fails the 4.5:1
 * normal-text threshold (11px bold doesn't reach WCAG's ~19px/14pt bold
 * cutoff for the reduced 3:1 large-text threshold). Switched to
 * var(--green-dark) (#047A35) — the same accessible-green token already
 * used at this size elsewhere in this file (.playlist-link-text,
 * .next-step-link-row a, .contact-strip-secondary-link, all 16px bold) —
 * rather than enlarging the text, since it's a secondary label not worth
 * upsizing to match the main tab text.
 *
 * This fixes the *selected* tab (opacity:1, ~5.19:1 against --surface —
 * passes AA). The *inactive* tabs still render this token through
 * `opacity: 0.45` a few lines down, which blends it toward the light tab
 * background to ~1.9:1 regardless of which green token is used — verified
 * this isn't fixable by a darker color choice alone short of going
 * near-black, which would defeat the point of a green accent. Decision:
 * left as-is. The tab's own label text ("Follow-Me" etc.) is fully opaque
 * and already meets contrast on its own, carrying the mode's identity;
 * the dimmed "01/02/03" is treated as a supplementary/decorative index
 * rather than load-bearing text, so the residual contrast gap on inactive
 * tabs is an accepted tradeoff, not an oversight.
 *
 * 2026-07-28 14:09 update: removed 2 dead rules found in the
 * design/page-design/product-videos-design-spec.md audit (Known Issues
 * #8) — .thumb-chip.playlist and .playlist-coming-soon. Neither class
 * appears in page-product-videos.php anymore (GAROO got a real playlist
 * row instead of a "coming soon" note); leaving them in would mislead the
 * next person reading the CSS into thinking that state is still reachable.
 *
 * 2026-07-28 11:57 update: .modal-bg had no overflow handling — it's a
 * fixed, full-viewport flex container that vertically centers .modal-box,
 * but never let content taller than the viewport scroll into view. On a
 * short mobile viewport (portrait address-bar chrome, or landscape),
 * .modal-box's iframe + #modal-playlist-hint + .modal-disclaimer stack can
 * exceed the visible height, silently clipping the playlist hint below
 * the fold with no way to reach it — reported as "the note doesn't appear
 * on mobile". Added overflow-y: auto (+ -webkit-overflow-scrolling: touch
 * for older iOS momentum scroll) so the modal scrolls instead of clipping.
 *
 * 2026-07-28 11:48 update: styled the "watch it on YouTube" link inside
 * .modal-playlist-hint (matching js/product-videos.js's openModal()
 * change to fill in its href) — same underline/hover/focus-visible
 * pattern as .modal-disclaimer a below, just brighter (#fff vs
 * rgba(255,255,255,0.75)) to match the hint's own brighter base color.
 *
 * 2026-07-28 11:41 update: moved the playlist prev/next-controls note
 * from a static on-page .playlist-hint (added 11:38, now removed) into
 * the modal itself as .modal-playlist-hint — see matching
 * page-product-videos.php / js/product-videos.js updates.
 *
 * 2026-07-28 11:31 update: removed .modal-box--playlist (added 11:21) —
 * screenshot evidence (reference/Screenshot 2026-07-28 112749.png) showed
 * YouTube's embedded player never actually renders the playlist sidebar
 * this was meant to make room for, so the widened box was just adding
 * letterboxing. See matching js/product-videos.js revert and
 * docs/specs/2026-07-28-product-videos-playlist-embed.md.
 *
 * 2026-07-28 10:36 update: hero "Learn more about THOUZER" scroll cue was
 * sitting closer to the video/copy grid above it than to the bottom edge
 * of the green hero section (28-44px gap above vs 64-112px gap below).
 * Swapped .hero-grid margin-bottom and #hero's bottom padding to
 * clamp(46px, 7vh, 78px) each — the averaged value — so the cue now sits
 * roughly centered in the space below the grid, with equal gaps above
 * and below the text. Overall hero section height is unchanged.
 *
 * 2026-07-28 10:23 update: fixed .facts-strip on mobile (<=640px) — the
 * desktop-only `justify-content: flex-end` right-alignment was producing a
 * ragged ladder of unevenly-indented lines once the chips wrapped on narrow
 * screens (reported via screenshot on "What is THOUZER?"). Added a 640px
 * override switching to `flex-direction: column; align-items: flex-start`,
 * matching the existing .contact-strip / .modal-next-step mobile pattern —
 * each fact-chip now reads as a normal left-aligned list item. Covers both
 * .facts-strip instances (THOUZER feature-caption + #mp-facts in the DNE
 * panel body) since it's one shared rule.
 *
 * 2026-07-28 10:02 update: reverted the 09:56 mode-tab overlap change per
 * request — .mode-tabbar back to `gap: 4px`, .mode-tab's `margin-left:
 * -7px` / :first-child override removed, and the :hover `z-index: 3`
 * removed. Tabs are back to clear 4px separation.
 *
 * 2026-07-28 09:47 update: right-aligned .facts-strip (the 5px green-dot
 * .fact-chip rows — "No facility modifications" / etc. under "What is
 * THOUZER?" and the #mp-facts strip in the DNE panel body) via
 * justify-content: flex-end — was left-aligned by default. One shared
 * rule covers both instances.
 *
 * 2026-07-28 09:26 update: right-aligned .next-step-link-row (the small
 * green cross-link CTAs, e.g. "See full THOUZER specs") via
 * justify-content: flex-end — was left-aligned by default. Single shared
 * rule covers all 6 instances in page-product-videos.php.
 *
 * 2026-07-28 09:10 update: removed the .subnav sticky sub-nav bar per
 * request (see matching page-product-videos.php / product-videos.js
 * updates). .dne-sticky-frame's `top: var(--header-h)` already only
 * accounted for the fixed header, not the sub-nav, so it needed no change
 * — it now sticks flush against the fixed header instead of below where
 * the sub-nav used to sit.
 *
 * Product Videos page — converted from mock-ups/product-videos-mockup-v10.html (v10.7).
 *
 * 2026-07-27 17:36 update: added `background: var(--surface)` to the
 * .product-videos wrapper rule. page.css sets no body/page background for
 * this standalone template, so the page was defaulting to browser white
 * everywhere except the few components (.dne-panel-body, .dne-sticky-frame,
 * active .mode-tab) that explicitly set var(--surface) — a visible cream
 * vs. white seam confirmed via screenshot at the DNE section. Now the whole
 * page carries the design-system surface color as its base, matching the
 * "surface everywhere, hero is the only exception" rule.
 *
 * 2026-07-27 17:19 update: replaced 5 hardcoded #FAF9F5/#141413 hex values
 * that exactly duplicated existing tokens with var(--surface) /
 * var(--text-on-dark) / var(--surface-dark) (audit finding — no visual
 * change, just removes silent drift risk if the palette ever shifts).
 * Left the couple of literal #fff values alone since #fff isn't actually
 * equal to any declared token (--text-on-dark is #FAF9F5, not pure white).
 *
 * Scoping strategy (matches contact-page.css precedent):
 *   Everything lives under .product-videos (a wrapper div around
 *   <main> + lightbox modal — see page-product-videos.php). The
 *   mockup was a standalone document and used a universal reset (*, body,
 *   img, button, a) that would clobber the shared header/footer/drawer if
 *   loaded unscoped on a real page, so those rules are re-scoped to
 *   `.product-videos *` etc. below instead of being left bare.
 *
 *   Design tokens (--green, --muted, ...) are declared as custom properties
 *   on .product-videos itself so every descendant still inherits them via
 *   var() exactly like the mockup did with :root.
 *
 *   `html { scroll-behavior: smooth }` is left global (harmless, and
 *   reduced-motion already resets it to auto) — everything else that could
 *   visually clobber other pages is scoped.
 *
 *   The @keyframes name is prefixed (pv-hero-enter) so it can't collide
 *   with an unrelated animation of the same name defined elsewhere.
 *
 * Sticky-header integration note: this theme has a real position:fixed
 * #pageheader (72px desktop / 60px mobile, see header.css). The DNE
 * scroll-driven tab switcher's NAV_H is computed at runtime in
 * product-videos.js from the actual rendered header height rather than
 * hardcoded, since --header-h itself changes at the 950px breakpoint.
 */

/* ─── Design tokens (scoped) ─────────────────────────────────────────── */
.product-videos {
  --green:        #069A44;
  --green-60:     #38B86A;
  --green-dark:   #047A35;
  --surface:      #FAF9F5;
  --surface-dark: #141413;
  --text:         #141413;
  --text-on-dark: #FAF9F5;
  --muted:        #5A6370;
  --border:       #8A9199;
  --border-light: #E2E1DD;

  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-exit: cubic-bezier(0.55, 0, 1, 0.45);
  --dur-fast:  150ms;
  --dur-base:  250ms;
  --dur-slow:  400ms;

  --max-w:   1280px;
  --gutter:  clamp(16px, 4vw, 40px);
  --section: 96px;

  --z-sticky:   200;
  --z-modal-bg: 1000;

  /* fixed #pageheader height — see header.css (60px mobile / 72px EN desktop ≥950px) */
  --header-h: 60px;

  font-family: 'Manrope', sans-serif;
  color: var(--text);
  background: var(--surface); /* page.css sets no body background for this standalone
                                  template — without this the page defaults to browser
                                  white while .dne-panel-body etc. render cream, causing
                                  a visible seam (2026-07-27 screenshot finding) */
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
@media (min-width: 950px) {
  .product-videos { --header-h: 72px; }
}

/* ─── Scoped reset (replaces the mockup's global *, body, img, button, a) ── */
.product-videos,
.product-videos *,
.product-videos *::before,
.product-videos *::after {
  box-sizing: border-box;
}
.product-videos :is(h1, h2, h3, h4, h5, h6, p, ul, ol, figure) {
  margin: 0;
  padding: 0;
}
.product-videos ul { list-style: none; }
.product-videos img { display: block; max-width: 100%; }
.product-videos button { font-family: inherit; cursor: pointer; }
.product-videos a { text-decoration: none; color: inherit; }

/* ─── Skip link (page-level override — matches contact-page.css's override
       of the shared header.css .skip-link; only one loads at a time since
       both are enqueued conditionally per template) ─────────────────────── */
.skip-link {
  position: absolute; top: -60px; left: 16px;
  background: var(--surface-dark); color: #fff;
  padding: 10px 16px; border-radius: 4px;
  font-size: 16px; font-weight: 700;
  z-index: 9999; transition: top var(--dur-fast, 150ms);
}
.skip-link:focus-visible { top: 16px; }

/* ─── Container ──────────────────────────────────────────────────────── */
.product-videos .container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ═══════════════════════════════════════════════════════════════════════
   HERO — split grid: copy left / video right on green background
═══════════════════════════════════════════════════════════════════════ */
.product-videos #hero {
  background: var(--green); /* fallback when video can't load */
  padding: clamp(52px, 8vh, 96px) 0 clamp(46px, 7vh, 78px);
  min-height: min(640px, 86vh);
  display: flex; align-items: center;
  position: relative;
  overflow: hidden;
}
.product-videos #hero .container { width: 100%; position: relative; z-index: 2; }

.product-videos .hero-bg-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.product-videos .hero-bg-overlay {
  position: absolute; inset: 0;
  background: rgba(3, 74, 32, 0.72);
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .product-videos .hero-bg-video { display: none; }
}

.product-videos .hero-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  margin-bottom: clamp(46px, 7vh, 78px);
}

.product-videos .hero-copy { animation: pv-hero-enter 0.60s var(--ease) both; }

.product-videos .product-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 700; color: var(--text-on-dark);
  border: 1.5px solid rgba(255,255,255,0.38);
  border-radius: 9999px; padding: 5px 14px 5px 10px;
  margin-bottom: 24px;
}
.product-videos .product-label::before {
  content: ''; width: 6px; height: 6px;
  border-radius: 50%; background: rgba(255,255,255,0.80); flex-shrink: 0;
}

.product-videos .hero-title {
  font-size: clamp(36px, 7.8vw, 62px); /* headline-display */
  font-weight: 700; line-height: 1.06;
  letter-spacing: -0.035em;
  color: #fff; margin-bottom: 20px;
  text-wrap: balance;
}

/* All hero text below 24px must be weight 700 for WCAG AA on green bg */
.product-videos .hero-desc {
  font-size: 18px; font-weight: 700; /* body-sm */
  line-height: 1.65; color: var(--text-on-dark);
  max-width: 380px; text-wrap: pretty;
  margin-bottom: 32px;
}

.product-videos .hero-cta-btn {
  font-family: 'Manrope', sans-serif;
  font-size: 16px; font-weight: 700;
  color: var(--green-dark); background: #fff;
  border: none; border-radius: 4px;
  padding: 16px 24px; min-height: 48px;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.14);
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast);
}
.product-videos .hero-cta-btn:hover { background: rgba(255,255,255,0.90); }
.product-videos .hero-cta-btn:active { transform: scale(0.97); }
.product-videos .hero-cta-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.product-videos .hero-video-col { animation: pv-hero-enter 0.60s 0.10s var(--ease) both; }

.product-videos .hero-video-wrap {
  display: block; position: relative; border-radius: 12px; overflow: hidden; cursor: pointer;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.18),
    0 28px 80px rgba(0,0,0,0.22);
}
.product-videos .hero-video-wrap:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.product-videos .hero-video-wrap img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block;
  transition: transform var(--dur-slow) var(--ease);
}
.product-videos .hero-video-wrap:hover img { transform: scale(1.012); }

.product-videos .hero-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-base) var(--ease);
}
.product-videos .hero-video-wrap:hover .hero-overlay { background: rgba(0,0,0,0.06); }

.product-videos .hero-play-btn {
  width: 72px; height: 72px; border-radius: 50%;
  background: #fff; border: none;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 28px rgba(0,0,0,0.18), 0 1px 4px rgba(0,0,0,0.10);
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast), box-shadow var(--dur-fast) var(--ease);
}
.product-videos .hero-video-wrap:hover .hero-play-btn {
  transform: scale(1.09); background: rgba(255,255,255,0.92);
  box-shadow: 0 8px 40px rgba(0,0,0,0.24), 0 2px 8px rgba(0,0,0,0.14);
}
.product-videos .hero-play-btn svg {
  width: 32px; height: 32px; fill: var(--green); margin-left: 4px;
  transition: transform var(--dur-fast) var(--ease);
}
.product-videos .hero-video-wrap:hover .hero-play-btn svg { transform: scale(1.25); }

.product-videos .hero-scroll-cue {
  display: flex; justify-content: center; align-items: center; gap: 6px;
  font-size: 16px; font-weight: 700; color: rgba(250,249,245,0.70);
  transition: color var(--dur-fast);
  animation: pv-hero-enter 0.60s 0.20s var(--ease) both;
}
.product-videos .hero-scroll-cue:hover { color: #fff; }
.product-videos .hero-scroll-cue:focus-visible {
  outline: 2px solid #fff; outline-offset: 3px; border-radius: 2px;
}

@keyframes pv-hero-enter {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Page section shell ─────────────────────────────────────────────── */
.product-videos .page-section { padding: var(--section) 0; }

/* ─── Section head ───────────────────────────────────────────────────── */
.product-videos .section-head { margin-bottom: 56px; }
.product-videos .section-title {
  font-size: clamp(26px, 5.2vw, 42px); /* headline-lg */
  font-weight: 700; line-height: 1.08;
  letter-spacing: -0.025em; margin-bottom: 12px; text-wrap: balance;
}
.product-videos .section-sub {
  font-size: 18px; line-height: 1.65; /* body-sm */
  color: var(--muted); max-width: 600px; text-wrap: pretty;
}
.product-videos .section-title-logo-img {
  display: block;
  height: clamp(26px, 5.2vw, 42px); /* matches section-title / headline-lg */
  width: auto;
}
.product-videos .section-title-logo-img--lg {
  height: clamp(52px, 10.4vw, 84px);
}
.product-videos .section-title-logo-img--xl {
  height: clamp(52px, 10.4vw, 84px);
}

/* ─── Section mini-hero banner ──────────────────────────────────────── */
.product-videos .page-section.has-section-banner { padding-top: 0; }
.product-videos .section-mini-hero {
  padding: clamp(40px, 6vh, 64px) 0 0;
  margin-bottom: 56px;
}
.product-videos #dne .section-mini-hero { margin-bottom: 28px; }

/* ─── Group label ────────────────────────────────────────────────────── */
.product-videos .group-label {
  font-size: 16px; font-weight: 700; color: var(--text);
  margin-bottom: 20px;
  display: flex; align-items: center; gap: 8px;
}
.product-videos .group-label::before {
  content: ''; display: inline-block;
  width: 16px; height: 2px;
  background: var(--green); border-radius: 9999px; flex-shrink: 0;
}

/* ─── Block divider ──────────────────────────────────────────────────── */
.product-videos .block-divider {
  border: none; border-top: 1px solid var(--border-light);
  margin: 40px 0; /* spacing.lg — section-grouping break */
}
.product-videos .block-divider.tight { margin: 24px 0; } /* spacing.md — component-level break */

/* ─── Video card (shared base) ───────────────────────────────────────── */
.product-videos .video-card { display: block; cursor: pointer; }
.product-videos .video-card:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 8px; }

.product-videos .video-thumb {
  position: relative; border-radius: 6px; /* rounded.md */
  overflow: hidden; background: var(--border-light);
}
.product-videos .video-thumb img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block;
  transition: transform var(--dur-slow) var(--ease);
}
/* Black backing on the mode-panel video so fading the img shows black,
   not the panel's white background                                     */
.product-videos #mp-video .video-thumb { background: #000; }
.product-videos .video-card:hover .video-thumb img { transform: scale(1.04); }

.product-videos .thumb-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0);
  transition: background var(--dur-fast) var(--ease);
}
.product-videos .video-card:hover .thumb-play { background: rgba(0,0,0,0.10); }

.product-videos .thumb-play-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.90);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.20);
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast), box-shadow var(--dur-fast);
}
.product-videos .video-card:hover .thumb-play-icon {
  transform: scale(1.12); background: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.24);
}
.product-videos .thumb-play-icon svg {
  width: 24px; height: 24px; fill: var(--text); margin-left: 2px;
  transition: transform var(--dur-fast) var(--ease), fill var(--dur-fast);
}
.product-videos .video-card:hover .thumb-play-icon svg { transform: scale(1.25); fill: var(--green); }

.product-videos .thumb-chip {
  position: absolute; top: 10px; left: 10px;
  font-size: 16px; font-weight: 700; /* chip-on-image component */
  padding: 4px 10px; border-radius: 9999px; line-height: 1.4;
}
.product-videos .thumb-chip.dark {
  background: rgba(20,20,19,0.80); color: var(--surface);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}

.product-videos .card-title {
  font-size: 17px; font-weight: 700;
  line-height: 1.35; margin-top: 14px; margin-bottom: 6px; text-wrap: balance;
}
.product-videos .card-desc {
  font-size: 18px; line-height: 1.65; color: var(--muted); text-wrap: pretty; /* body-sm */
}

/* ═══════════════════════════════════════════════════════════════════════
   THOUZER — feature editorial
═══════════════════════════════════════════════════════════════════════ */

.product-videos .feature-video { display: block; cursor: pointer; margin-bottom: 0; }
.product-videos .feature-video:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 14px; }

.product-videos .feature-thumb {
  position: relative; border-radius: 12px; /* rounded.lg */
  overflow: hidden; background: var(--border-light);
}
.product-videos .feature-thumb img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block;
  transition: transform var(--dur-slow) var(--ease);
}
.product-videos .feature-video:hover .feature-thumb img { transform: scale(1.015); }

.product-videos .feature-thumb .thumb-play .thumb-play-icon {
  width: 64px; height: 64px;
}
.product-videos .feature-thumb .thumb-play .thumb-play-icon svg {
  width: 32px; height: 32px; /* canonical: feature */
}
.product-videos .feature-video:hover .thumb-play-icon svg { transform: scale(1.25); fill: var(--green); }

/* Caption strip: 1fr + 2fr grid */
.product-videos .feature-caption {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  padding: 20px 0 0;
  margin-bottom: 10px;
}
.product-videos .feature-caption + .facts-strip {
  margin-bottom: 56px;
}
.product-videos .feature-caption-title {
  font-size: clamp(21px, 3.25vw, 26px); /* headline-md */
  font-weight: 700; line-height: 1.1;
  letter-spacing: -0.02em; text-wrap: balance;
  margin-bottom: 8px;
}
.product-videos .feature-caption-chip {
  display: inline-block;
  font-size: 16px; font-weight: 700; /* chip-on-image component */
  padding: 4px 10px; border-radius: 9999px;
  background: rgba(20,20,19,0.08); color: var(--text);
}
.product-videos .feature-caption-desc {
  font-size: 18px; line-height: 1.7; /* body-sm */
  color: var(--muted); text-wrap: pretty;
  margin-top: -5px;
}

/* Secondary 2-col grid */
.product-videos .thouzer-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

/* ═══════════════════════════════════════════════════════════════════════
   DNE — tab switcher
═══════════════════════════════════════════════════════════════════════ */

.product-videos .mode-tabbar {
  display: flex; gap: 4px;
  border-bottom: none;
  margin-bottom: 0;
  align-items: flex-end;
}
.product-videos .mode-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 24px;
  font-family: 'Manrope', sans-serif;
  font-size: 16px; font-weight: 700; /* label-sm */
  color: var(--muted);
  background: rgba(226,225,221,0.50);
  border: 1.5px solid var(--border);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  cursor: pointer; white-space: nowrap;
  position: relative; z-index: 1;
  transition: color var(--dur-fast), background var(--dur-fast) var(--ease);
}
.product-videos .mode-tab-num {
  font-size: 11px; font-weight: 700;
  color: var(--green-dark); opacity: 0.45;
  transition: opacity var(--dur-fast);
}
.product-videos .mode-tab[aria-selected="true"] {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border);
  border-top: 2.5px solid var(--green);
  margin-bottom: -1.5px;
  z-index: 2;
}
.product-videos .mode-tab[aria-selected="true"] .mode-tab-num { opacity: 1; }
.product-videos .mode-tab:hover:not([aria-selected="true"]) {
  color: var(--text);
  background: rgba(226,225,221,0.80);
}
.product-videos .mode-tab:focus-visible {
  outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px 4px 0 0;
}

/* Mode panel */
.product-videos .mode-panel {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  min-height: 260px;
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}

.product-videos .mode-panel-badge {
  display: block;
  font-size: 16px; font-weight: 700; /* label-sm */
  color: var(--text); margin-bottom: 10px;
  letter-spacing: 0.04em;
}
.product-videos .mode-panel-name {
  font-size: clamp(26px, 5.2vw, 42px); /* headline-lg */
  font-weight: 700; line-height: 1.08;
  letter-spacing: -0.025em; margin-bottom: 16px; text-wrap: balance;
}
.product-videos .mode-panel-desc {
  font-size: 18px; line-height: 1.72; /* body-sm */
  color: var(--muted); text-wrap: pretty;
}

/* ── DNE folder-tab panel body ──────────────────────────────────────── */
.product-videos .dne-panel-body {
  border: 1.5px solid var(--border);
  border-radius: 0 6px 6px 6px;
  padding: clamp(28px, 4vh, 44px) clamp(20px, 4vw, 40px);
  margin-bottom: 48px;
  background: var(--surface);
  position: relative;
  z-index: 0;
}
.product-videos .dne-panel-body .mode-panel {
  min-height: 260px;
}

/* ── DNE scroll-driven sticky frame ─────────────────────────────────── */
.product-videos .dne-scroll-zone {
  position: relative;
  /* Height set by JS: (100vh − header height) + N × STEP_H          */
}
.product-videos .dne-sticky-frame {
  position: sticky;
  top: var(--header-h); /* flush against the fixed header */
  height: calc(100vh - var(--header-h));
  background: var(--surface); /* covers zone travel space while sticky */
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: clamp(16px, 2.5vh, 28px);
}
.product-videos .dne-sticky-frame .container {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-bottom: clamp(32px, 5vh, 56px);
  min-height: 0;
}
.product-videos .dne-sticky-frame .dne-panel-body {
  flex: 1;
  min-height: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}
.product-videos .dne-sticky-frame .mode-panel {
  flex: 1;
  min-height: 0;
}

/* ── Facts strip ──────────────────────────────────────────────────────
   Generic (not DNE-specific) so THOUZER's feature-caption reuses it.  ── */
.product-videos .facts-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 36px;
  padding-top: clamp(16px, 2.5vh, 24px);
  border-top: 1px solid var(--border-light);
}
.product-videos .fact-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 16px; /* label-sm */
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.product-videos .fact-chip::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
}

/* Mobile: disable sticky — tabs are click-only */
@media (max-width: 640px) {
  .product-videos .dne-scroll-zone  { height: auto !important; }
  .product-videos .dne-sticky-frame { position: static; height: auto; display: block; padding-top: 0; }
  .product-videos .dne-sticky-frame .container { display: block; flex: none; padding-bottom: 0; }
  .product-videos .dne-sticky-frame .dne-panel-body { flex: none; margin-bottom: 48px; display: block; }
  .product-videos .dne-sticky-frame .mode-panel { flex: none; }
}

/* ── Possibilities — compact 3-column video card grid ────────────────── */
.product-videos .poss-intro { margin-bottom: 28px; }
.product-videos .poss-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.product-videos .poss-card-title {
  font-size: 16px; font-weight: 700; /* label-sm */
  margin: 12px 0 0; line-height: 1.35; text-wrap: balance;
}

/* ── Insights & Testimonials — 2-column card grid, grouped by label ──── */
.product-videos .insights-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

/* ═══════════════════════════════════════════════════════════════════════
   OTHER PRODUCTS — showcase grid
═══════════════════════════════════════════════════════════════════════ */

.product-videos .products-showcase {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.product-videos .product-col-category {
  font-size: 16px; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.product-videos .product-col-category::before {
  content: ''; display: inline-block;
  width: 16px; height: 2px;
  background: var(--green); border-radius: 9999px; flex-shrink: 0;
}

.product-videos .product-col-name {
  font-size: clamp(26px, 5.2vw, 42px); /* headline-lg */
  font-weight: 700; line-height: 1.04;
  letter-spacing: -0.03em; margin-bottom: 20px; text-wrap: balance;
}

.product-videos .product-col-desc {
  font-size: 18px; line-height: 1.65; /* body-sm */
  color: var(--muted); margin-top: 14px; margin-bottom: 20px;
  text-wrap: pretty;
}

/* Playlist link row */
.product-videos .playlist-link-row {
  display: flex; align-items: center; gap: 12px;
  border-top: 1px solid var(--border-light);
  padding-top: 16px; cursor: pointer;
}
.product-videos .playlist-thumb {
  width: 56px; height: 40px; border-radius: 4px;
  overflow: hidden; flex-shrink: 0; background: var(--border-light);
}
.product-videos .playlist-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-videos .playlist-link-text {
  font-size: 16px; font-weight: 700; color: var(--green-dark);
  display: inline-flex; align-items: center; gap: 5px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast), gap var(--dur-fast) var(--ease);
}
.product-videos .playlist-link-row:hover .playlist-link-text {
  border-bottom-color: var(--green); gap: 7px;
}
.product-videos .playlist-link-row:focus-visible {
  outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px;
}

/* Next-step cross-link row — text-only variant of .playlist-link-row */
.product-videos .next-step-link-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 20px;
  border-top: 1px solid var(--border-light);
  padding-top: 16px; margin-top: 8px;
}
.product-videos .next-step-link-row a {
  font-size: 16px; font-weight: 700; color: var(--green-dark);
  display: inline-flex; align-items: center; gap: 5px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast), gap var(--dur-fast) var(--ease);
}
.product-videos .next-step-link-row a:hover { border-bottom-color: var(--green); gap: 7px; }
.product-videos .next-step-link-row a:focus-visible {
  outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px;
}
.product-videos .next-step-link-row a.secondary { color: var(--muted); }
.product-videos .next-step-link-row a.secondary:hover { border-bottom-color: var(--muted); }
.product-videos .playlist-link-row + .next-step-link-row {
  border-top: none; padding-top: 8px; margin-top: 0;
}


/* ─── Contact strip ──────────────────────────────────────────────────── */
.product-videos .contact-strip {
  background: rgba(6,154,68,0.06);
  border: 1.5px solid rgba(6,154,68,0.18);
  border-radius: 12px; padding: 52px 56px;
  display: flex; align-items: center;
  justify-content: space-between; gap: 32px;
  margin-top: 80px;
}
.product-videos .contact-strip-actions {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 14px; flex-shrink: 0;
}
.product-videos .contact-strip-secondary-link {
  font-size: 16px; font-weight: 700; color: var(--green-dark); /* label-sm */
  display: inline-flex; align-items: center; gap: 5px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast), gap var(--dur-fast) var(--ease);
}
.product-videos .contact-strip-secondary-link:hover { border-bottom-color: var(--green-dark); gap: 7px; }
.product-videos .contact-strip-secondary-link:focus-visible {
  outline: 2px solid var(--green); outline-offset: 2px; border-radius: 2px;
}
.product-videos .contact-strip-copy p {
  font-size: clamp(21px, 3.25vw, 26px); /* headline-md */
  font-weight: 700; color: var(--text);
  max-width: 440px; line-height: 1.35;
  text-wrap: balance; margin-bottom: 8px;
}
.product-videos .contact-strip-copy span {
  font-size: 16px; font-weight: 400; /* label-sm */
  color: var(--muted); display: block;
}

/* ─── Primary button ─────────────────────────────────────────────────── */
.product-videos .btn-primary {
  font-family: 'Manrope', sans-serif;
  font-size: 16px; font-weight: 700;
  color: var(--surface); background: var(--green);
  border: none; border-radius: 4px;
  padding: 16px 28px; min-height: 48px;
  white-space: nowrap; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast);
}
.product-videos .btn-primary:hover { background: var(--green-60); }
.product-videos .btn-primary:active { background: var(--green-dark); transform: scale(0.97); }
.product-videos .btn-primary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* ─── Lightbox modal ─────────────────────────────────────────────────── */
.product-videos .modal-bg {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: var(--z-modal-bg);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease), visibility var(--dur-base);
}
.product-videos .modal-bg.open { opacity: 1; visibility: visible; }

.product-videos .modal-box {
  position: relative; width: 100%; max-width: 1000px;
  transform: scale(0.94) translateY(16px);
  transition: transform var(--dur-base) var(--ease);
}
.product-videos .modal-bg.open .modal-box { transform: scale(1) translateY(0); }

.product-videos .modal-iframe-wrap {
  position: relative; padding-top: 56.25%;
  border-radius: 6px; overflow: hidden; background: #000;
}
.product-videos .modal-iframe-wrap iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

.product-videos .modal-close-btn {
  position: absolute; top: -52px; right: 0;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.88); font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast);
}
.product-videos .modal-close-btn:hover { background: rgba(255,255,255,0.22); }
.product-videos .modal-close-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* Playlist prev/next hint — shown only when a playlist row opened the
   modal (js/product-videos.js toggles the [hidden] attribute). Slightly
   brighter than .modal-disclaimer below since it's actionable guidance,
   not a fallback disclosure. */
.product-videos .modal-playlist-hint {
  margin-top: 12px;
  font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.75);
}
.product-videos .modal-playlist-hint[hidden] { display: none; }
.product-videos .modal-playlist-hint a {
  color: #fff;
  text-decoration: underline; text-underline-offset: 2px;
}
.product-videos .modal-playlist-hint a:hover { color: rgba(255,255,255,0.85); }
.product-videos .modal-playlist-hint a:focus-visible {
  outline: 2px solid var(--green); outline-offset: 2px; border-radius: 2px;
}

/* Network-restriction disclosure — inside the video modal, under the player */
.product-videos .modal-disclaimer {
  margin-top: 12px;
  font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.6);
}
.product-videos .modal-disclaimer a {
  color: rgba(255,255,255,0.75);
  text-decoration: underline; text-underline-offset: 2px;
}
.product-videos .modal-disclaimer a:hover { color: #fff; }
.product-videos .modal-disclaimer a:focus-visible {
  outline: 2px solid var(--green); outline-offset: 2px; border-radius: 2px;
}

/* ─── Modal next-step panel (hero + THOUZER feature video only) ─────── */
.product-videos .modal-next-step {
  margin-top: 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 6px;
  padding: 20px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px 24px; flex-wrap: wrap;
}
.product-videos .modal-next-step[hidden] { display: none; }
.product-videos .modal-next-step-heading {
  font-size: 16px; font-weight: 700; color: #fff; text-wrap: balance; /* label-sm */
}
.product-videos .modal-next-step-actions {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.product-videos .modal-next-step-secondary {
  font-family: 'Manrope', sans-serif;
  font-size: 16px; font-weight: 700; color: rgba(255,255,255,0.75); /* label-sm */
  background: none; border: none; padding: 0;
  display: inline-flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.product-videos .modal-next-step-secondary:hover {
  color: #fff; border-bottom-color: rgba(255,255,255,0.6);
}
.product-videos .modal-next-step-secondary:focus-visible {
  outline: 2px solid var(--green); outline-offset: 2px; border-radius: 2px;
}

/* ─── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .product-videos .hero-grid          { grid-template-columns: 1fr; }
  .product-videos .hero-desc          { max-width: 100%; }
  .product-videos .feature-caption    { grid-template-columns: 1fr; gap: 12px; }
  .product-videos .thouzer-secondary  { grid-template-columns: 1fr; }
  .product-videos .poss-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .product-videos { --section: 64px; }
  .product-videos .hero-play-btn      { width: 56px; height: 56px; }
  .product-videos .hero-play-btn svg  { width: 26px; height: 26px; }

  .product-videos .mode-tabbar {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .product-videos .mode-tabbar::-webkit-scrollbar { display: none; }

  .product-videos .mode-tab {
    padding: 12px 16px;
    font-size: 16px; /* label-sm — same floor as desktop */
    min-height: 44px;
    flex-shrink: 0;
  }

  .product-videos .mode-panel { grid-template-columns: 1fr; }

  .product-videos .dne-panel-body { border-radius: 6px; }

  .product-videos .poss-grid { grid-template-columns: 1fr; }

  .product-videos .insights-grid { grid-template-columns: 1fr; gap: 32px; }

  .product-videos .products-showcase  { grid-template-columns: 1fr; }

  .product-videos .facts-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .product-videos .contact-strip {
    flex-direction: column;
    align-items: flex-start;
    padding: 32px var(--gutter);
    margin-top: 48px;
  }

  .product-videos .contact-strip-actions { align-items: flex-start; width: 100%; }

  .product-videos .modal-next-step { flex-direction: column; align-items: flex-start; padding: 16px 18px; }
}

/* ─── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .product-videos,
  .product-videos *,
  .product-videos *::before,
  .product-videos *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .product-videos .hero-copy, .product-videos .hero-video-col, .product-videos .hero-scroll-cue {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .product-videos .mode-panel { transition: none !important; }
}