/* ============================================================
   Synergeus Theme — Custom CSS (non-Tailwind)
   ============================================================ */

/* ============================================================
   Section background distinguishers (DARK theme)
   Each landing-page section gets a subtle radial tint so
   transitions feel intentional. Kept VERY low alpha so
   sections remain cohesive.
   ============================================================ */

/* Section dividers — hairline that fades at edges */
section + section {
  position: relative;
}
section + section::before {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(118deg,rgba(222, 247, 255, 0.81) 0%, rgba(228, 241, 247, 0.82) 72%);
  pointer-events: none;
  z-index: 5;
}

/* Per-section subtle tints — applied as ::after radial glows so they
   sit BEHIND content but ABOVE the section's flat black bg. */
#trust, #problem, #software, #remoteqa, #workflow, #matrix, #reporting, #testimonials, #trusted-partners, #cta {
  position: relative;
  isolation: isolate;
}
#trust::after,
#problem::after,
#software::after,
#remoteqa::after,
#workflow::after,
#matrix::after,
#reporting::after,
#cta::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
#trust    > *,
#problem  > *,
#software > *,
#remoteqa > *,
#workflow > *,
#matrix   > *,
#reporting> *,
#cta      > * { position: relative; z-index: 1; }

#trust::after    { background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(255,255,255,.022) 0%, rgba(0,0,0,0) 70%); }
#problem::after  { background: radial-gradient(ellipse 60% 50% at 20% 30%,  rgba(29,161,242,.08)  0%, rgba(0,0,0,0) 65%); }
#software::after { background: radial-gradient(ellipse 50% 40% at 15% 20%, rgba(0,159,252,.07) 0%, rgba(0,0,0,0) 60%),
                               radial-gradient(ellipse 50% 40% at 85% 50%, rgba(0,159,252,.06) 0%, rgba(0,0,0,0) 60%),
                               radial-gradient(ellipse 50% 40% at 30% 80%, rgba(0,159,252,.07) 0%, rgba(0,0,0,0) 60%); }
#remoteqa::after { background: radial-gradient(ellipse 75% 55% at 75% 50%, rgba(0,159,252,.10)   0%, rgba(0,0,0,0) 65%); }
#workflow::after { background: radial-gradient(ellipse 80% 50% at 50% 100%, rgba(255,255,255,.028) 0%, rgba(0,0,0,0) 70%); }
#matrix::after   { background: radial-gradient(ellipse 40% 40% at 18% 50%, rgba(29,161,242,.06) 0%, rgba(0,0,0,0) 65%),
                               radial-gradient(ellipse 40% 40% at 50% 50%, rgba(29,161,242,.06) 0%, rgba(0,0,0,0) 65%),
                               radial-gradient(ellipse 40% 40% at 82% 50%, rgba(29,161,242,.06) 0%, rgba(0,0,0,0) 65%); }
#reporting::after{ background: radial-gradient(ellipse 65% 55% at 80% 40%, rgba(29,161,242,.09)  0%, rgba(0,0,0,0) 65%); }
#cta::after      { background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(255,255,255,.035) 0%, rgba(0,0,0,0) 70%); }

/* Light theme: disable the colored radial tints so they don't muddy
   the clean light surface; keep just the hairline divider. */
[data-theme="light"] #trust::after,
[data-theme="light"] #problem::after,
[data-theme="light"] #software::after,
[data-theme="light"] #remoteqa::after,
[data-theme="light"] #workflow::after,
[data-theme="light"] #matrix::after,
[data-theme="light"] #reporting::after,
[data-theme="light"] #cta::after {
  background: none;
}
[data-theme="light"] section + section::before {
  background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.07) 50%, transparent 100%);
}

/* ============================================================
   CSS Custom Properties — Dark / Light Theme Shell
   Usage: use var(--q-*) in new components; legacy inline styles
   will be overridden per-selector in nav.css & below.
   ============================================================ */

:root,
[data-theme="dark"] {
  --q-bg:           #000000;
  --q-surface:      rgba(18,18,18,.92);
  --q-surface-2:    rgba(28,28,28,.80);
  --q-border:       rgba(255,255,255,.07);
  --q-border-mid:   rgba(255,255,255,.13);
  --q-text:         #ffffff;
  --q-text-muted:   rgba(255,255,255,.58);
  --q-text-faint:   rgba(255,255,255,.28);
  --q-text-micro:   rgba(255,255,255,.20);
  --q-nav-bg:       rgba(10,10,10,.88);
  --q-panel-bg:     rgba(8,8,8,.97);
  --q-glass-bg:     rgba(255,255,255,.08);
  --q-glass-border: rgba(255,255,255,.15);
  --q-accent:       #1da1f2;
  --q-accent-alt:   rgba(29,161,242,.12);
  color-scheme: dark;
}

[data-theme="light"] {
  --q-bg:           #f1f5f9;
  --q-surface:      rgba(255,255,255,.95);
  --q-surface-2:    rgba(240,240,243,.90);
  --q-border:       rgba(0,0,0,.07);
  --q-border-mid:   rgba(0,0,0,.12);
  --q-text:         #0a0a0a;
  --q-text-muted:   rgba(0,0,0,.58);
  --q-text-faint:   rgba(0,0,0,.32);
  --q-text-micro:   rgba(0,0,0,.22);
  --q-nav-bg:       rgba(248,248,250,.93);
  --q-panel-bg:     rgba(252,252,254,.99);
  --q-glass-bg:     rgba(0,0,0,.04);
  --q-glass-border: rgba(0,0,0,.10);
  --q-accent:       #009ffc;
  --q-accent-alt:   rgba(0,159,252,.10);
  color-scheme: light;
}

/* Apply theme to document */
body {
  font-family: 'Inter Tight', system-ui, sans-serif;
  background-color: var(--q-bg);
  color: var(--q-text);
  transition: background-color 220ms ease, color 220ms ease;
}

/* ============================================================
   Light theme — landing page comprehensive overrides
   Targets the hardcoded inline styles & Tailwind classes used
   throughout front-page.php and footer.php. Front-page.php is
   built dark-first; these rules flip whites → darks for light
   mode without touching any PHP.
   ============================================================ */

/* --- Section / page background --- */
[data-theme="light"] section,
[data-theme="light"] .bg-black,
[data-theme="light"] section.bg-black {
  background-color: var(--q-bg) !important;
}

/* Hero layers in light mode — match each by its inline background signature */
[data-theme="light"] #hero > .absolute[style*="radial-gradient(ellipse 80% 60% at 50% 55%"] {
  background: radial-gradient(ellipse 80% 60% at 50% 55%, rgba(0,159,252,.06) 0%, transparent 70%),
              radial-gradient(ellipse 60% 50% at 80% 20%, rgba(0,159,252,.04) 0%, transparent 65%),
              var(--q-bg) !important;
}
[data-theme="light"] #hero img[src*="hero-product-stage"] {
  opacity: .22 !important;
}
[data-theme="light"] #hero > .absolute[style*="linear-gradient(180deg, rgba(0,0,0,.55)"] {
  background: linear-gradient(180deg, rgba(244,244,246,.55) 0%, rgba(244,244,246,.35) 35%, rgba(244,244,246,.70) 70%, var(--q-bg) 100%) !important;
}
[data-theme="light"] #hero > .absolute[style*="background-image:linear-gradient(rgba(255,255,255,.022)"] {
  background-image: linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0,0,0,.04) 1px, transparent 1px) !important;
}
[data-theme="light"] #hero > .absolute[style*="transparent 78%"] {
  background: linear-gradient(to bottom, transparent 78%, var(--q-bg) 100%) !important;
}

/* --- Headings --- */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3 {
  color: var(--q-text);
}

/* --- Tailwind text-white variants --- */
[data-theme="light"] .text-white {
  color: var(--q-text) !important;
}
[data-theme="light"] [class*="text-white/"] {
  color: var(--q-text-muted) !important;
}

/* --- Inline white color values (catch-all for hardcoded styles) --- */
[data-theme="light"] [style*="color:#fff"],
[data-theme="light"] [style*="color: #fff"],
[data-theme="light"] [style*="color:#FFFFFF"],
[data-theme="light"] [style*="color:#FFF"] {
  color: var(--q-text) !important;
}
[data-theme="light"] [style*="color:rgba(255,255,255"] {
  color: var(--q-text-muted) !important;
}

/* --- White-tinted borders --- */
[data-theme="light"] [style*="border-color:rgba(255,255,255"],
[data-theme="light"] [style*="border:1px solid rgba(255,255,255"],
[data-theme="light"] [style*="border-top:1px solid rgba(255,255,255"],
[data-theme="light"] [style*="border-top:1px dashed rgba(255,255,255"],
[data-theme="light"] [style*="border-right:1px solid rgba(255,255,255"],
[data-theme="light"] [style*="border-bottom:1px solid rgba(255,255,255"] {
  border-color: var(--q-border-mid) !important;
}

/* --- Glassmorphic surfaces with low-alpha white tint --- */
[data-theme="light"] [style*="background:rgba(255,255,255,.04)"],
[data-theme="light"] [style*="background:rgba(255,255,255,.06)"],
[data-theme="light"] [style*="background:rgba(255,255,255,.08)"],
[data-theme="light"] [style*="background:rgba(255,255,255,.09)"],
[data-theme="light"] [style*="background:rgba(255,255,255,.10)"],
[data-theme="light"] [style*="background:rgba(255,255,255,.015)"] {
  background: rgba(0,0,0,.04) !important;
}

/* CTA gradient card (front-page CTA section) */
[data-theme="light"] section > div[style*="linear-gradient(135deg,rgba(255,255,255"] {
  background: linear-gradient(135deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.015) 100%) !important;
  border-color: var(--q-border-mid) !important;
}

/* --- Primary white pill CTAs → flip to dark pill in light mode --- */
[data-theme="light"] a[style*="background:#fff"][style*="color:#000"] {
  background: #0a0a0a !important;
  color: #ffffff !important;
}
[data-theme="light"] a[style*="background:#fff"][style*="color:#000"] span[style*="background:#000"] {
  background: #ffffff !important;
}
[data-theme="light"] a[style*="background:#fff"][style*="color:#000"] iconify-icon {
  color: #0a0a0a !important;
}

/* Secondary outline CTA (Request Demo etc.) */
[data-theme="light"] a[style*="border:1px solid rgba(255,255,255,.18)"] {
  border-color: rgba(0,0,0,.18) !important;
  color: rgba(0,0,0,.72) !important;
}

/* --- Partner / standards marquee: was inverted to white, now inverted to black --- */
[data-theme="light"] #marquee img {
  filter: brightness(0) !important;
  opacity: .50 !important;
}

/* --- Footer (hardcoded bg #000 + white text) --- */
[data-theme="light"] footer {
  background: var(--q-bg) !important;
  border-top-color: var(--q-border) !important;
}
[data-theme="light"] footer > div > div:first-child {
  border-bottom-color: var(--q-border) !important;
}
[data-theme="light"] footer img[alt="QUBYX"] {
  filter: brightness(0);
}

/* RemoteQA dashboard mockup is intentionally white in dark mode — keep its
   own white surface + dark text untouched in light mode (it's a screenshot-
   style card and reads fine either way). */
[data-theme="light"] [style*="background:rgba(255,255,255,.92)"] {
  background: rgba(255,255,255,.95) !important;
}
[data-theme="light"] [style*="background:rgba(255,255,255,.92)"] [style*="color:rgba(0,0,0"] {
  color: rgba(0,0,0,.75) !important;
}

/* --- Theme toggle icon color in light mode --- */
[data-theme="light"] #theme-icon {
  color: rgba(0,0,0,.60) !important;
}

/* ============================================================
   Light theme — v1.5 inline section backgrounds & overlays
   Section inline `background:linear-gradient(180deg, #000 …)`
   and dark overlay layers from front-page.php need to be
   neutralized in light mode so sections actually look light.
   ============================================================ */

/* Sections that received inline near-black gradient backgrounds in v1.5
   (#problem, #remoteqa, #matrix). Match by their distinctive inline gradient. */
[data-theme="light"] section[style*="linear-gradient(180deg, #000"],
[data-theme="light"] section[style*="linear-gradient(180deg,#000"] {
  background: var(--q-bg) !important;
  border-top-color: rgba(0,0,0,.06) !important;
}

/* Section divider hairline added inline (border-top using white-alpha) */
[data-theme="light"] section[style*="border-top:1px solid rgba(255,255,255"] {
  border-top-color: rgba(0,0,0,.06) !important;
}

/* Inline absolute overlay layers: white-tint grids, dot patterns, and
   colored radial tints that look fine on black but muddy on light bg.
   Tone them down significantly. */
[data-theme="light"] section > .absolute.pointer-events-none[style*="background-image:linear-gradient(rgba(255,255,255"],
[data-theme="light"] section > .absolute.pointer-events-none[style*="background-image:radial-gradient(rgba(255,255,255"],
[data-theme="light"] section > .absolute.pointer-events-none[style*="background-image:repeating-linear-gradient"] {
  opacity: .35;
  filter: invert(1);
}

/* The colored radial-tint overlays (problem/remoteqa/software/matrix/reporting/cta)
   are full-section RGBA tints — keep them very subtle in light mode. */
[data-theme="light"] section > .absolute.pointer-events-none[style*="background:radial-gradient(ellipse"] {
  opacity: .45;
}

/* Workflow horizontal connector line — flip to dark hairline */
[data-theme="light"] #workflow > .absolute[style*="linear-gradient(90deg, transparent 0%, rgba(255,255,255"] {
  background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.10) 20%, rgba(0,0,0,.10) 80%, transparent 100%) !important;
}

/* ============================================================
   Hardware section (v1.8 redesign) — light theme treatment.
   Layout: 2-col. LEFT col has copy/specs/chips/CTA that follow
   normal light-theme rules. RIGHT col is the showcase stage —
   a self-contained dark frame with the AI backdrop + composited
   device PNG. The frame interior MUST stay dark in light mode.
   ============================================================ */

/* Section base — flatten section bg to page bg in light mode */
[data-theme="light"] #hardware {
  background: var(--q-bg) !important;
}

/* Ambient radial backdrop — keep subtle teal hint */
[data-theme="light"] #hardware > .absolute[style*="rgba(0,159,252,.10)"] {
  background: radial-gradient(ellipse 60% 50% at 75% 50%, rgba(0,159,252,.07) 0%, rgba(0,0,0,0) 65%) !important;
}

/* Showcase stage card — intentionally keeps its dark cinematic interior
   in light mode (it's a product still life, like Apple). Soften outer
   shadow so it doesn't feel like a hole in the light surface. */
[data-theme="light"] #hardware .rounded-\[28px\] {
  box-shadow: 0 30px 70px rgba(0,0,0,.15), 0 0 0 1px rgba(0,159,252,.16) inset !important;
  border-color: rgba(0,0,0,.08) !important;
}

/* Inside the dark showcase, the glass callouts use white-alpha text/borders.
   The global light-theme rules would flip those to dark — undo within stage. */
[data-theme="light"] #hardware .rounded-\[28px\] [style*="color:rgba(255,255,255"],
[data-theme="light"] #hardware .rounded-\[28px\] [style*="color:#fff"] {
  color: rgba(255,255,255,.85) !important;
}
[data-theme="light"] #hardware .rounded-\[28px\] [style*="border:1px solid rgba(255,255,255"] {
  border-color: rgba(255,255,255,.14) !important;
}
[data-theme="light"] #hardware .rounded-\[28px\] [style*="background:rgba(255,255,255,.08)"] {
  background: rgba(255,255,255,.08) !important;
}

/* Floor reflection hairline beneath stage */
[data-theme="light"] #hardware .absolute[style*="rgba(0,159,252,.55)"] {
  background: linear-gradient(90deg, transparent 0%, rgba(0,159,252,.35) 50%, transparent 100%) !important;
}

/* Feature chips (left col) — teal accent on light bg */
[data-theme="light"] #hardware [style*="background:rgba(0,159,252,.10)"][style*="border:1px solid rgba(0,159,252,.22)"] {
  background: rgba(0,159,252,.08) !important;
  border-color: rgba(0,159,252,.25) !important;
  color: rgba(0,0,0,.72) !important;
}
[data-theme="light"] #hardware [style*="background:rgba(0,159,252,.10)"][style*="border:1px solid rgba(0,159,252,.32)"] {
  background: rgba(0,159,252,.08) !important;
}

/* ============================================================
   Hardware LEFT column — explicit, high-specificity light-mode
   text overrides. The global [style*="color:rgba(255,255,255"]
   rule covers these, but on some browsers the substring match
   can fail with subtle whitespace differences. Pin them here.
   ============================================================ */

/* Paragraph: "A professional external colorimeter…" */
[data-theme="light"] #hardware .lg\:col-span-5 p {
  color: rgba(0,0,0,.65) !important;
}

/* Spec grid (2Ö2) numbers + labels */
[data-theme="light"] #hardware .lg\:col-span-5 .grid > div > div:first-child {
  color: var(--q-text) !important;
}
[data-theme="light"] #hardware .lg\:col-span-5 .grid > div > div:last-child {
  color: rgba(0,0,0,.50) !important;
}

/* Works-with badge — outer text + <strong> emphasis */
[data-theme="light"] #hardware .lg\:col-span-5 > div[style*="font-size:0.75rem"][style*="color:rgba(255,255,255,.5)"],
[data-theme="light"] #hardware .lg\:col-span-5 > div[style*="font-size:0.75rem"][style*="color:rgba(255,255,255,.5)"] span {
  color: rgba(0,0,0,.60) !important;
}
[data-theme="light"] #hardware .lg\:col-span-5 strong[style*="color:rgba(255,255,255,.78)"] {
  color: rgba(0,0,0,.85) !important;
}

/* Feature chips — text color (chip body uses color:rgba(255,255,255,.78)) */
[data-theme="light"] #hardware .lg\:col-span-5 span[style*="background:rgba(0,159,252,.10)"][style*="border:1px solid rgba(0,159,252,.22)"] {
  color: rgba(0,0,0,.72) !important;
}

/* Secondary outline CTA in hardware left col */
[data-theme="light"] #hardware .lg\:col-span-5 a[style*="border:1px solid rgba(255,255,255,.18)"] {
  border-color: rgba(0,0,0,.18) !important;
  color: rgba(0,0,0,.72) !important;
}

/* Spec ticker dividers (right border using white alpha) — caught by border rule
   already, but the values inside use color:#fff (caught by inline-color rule). */

/* Workflow / matrix / problem feature cards using rgba(255,255,255,.03) bg —
   caught by glass-surface rule. */

/* Splash app overlay images in product cards have inline drop-shadow which is
   fine; no override needed. */

/* Reporting PDF mockup is white-on-light — already readable. Border accents fine. */

/* Trust card chips have inline rgba(255,255,255,.025) bg — caught by glass rule. */

/* ============================================================
   Light theme — Testimonials & Trusted Partners (v1.6)
   ============================================================ */
[data-theme="light"] #testimonials blockquote {
  color: var(--q-text) !important;
}
[data-theme="light"] #partners-marquee .marquee-track img {
  filter: brightness(0) !important;
  opacity: .45 !important;
}
[data-theme="light"] #partners-marquee::before,
[data-theme="light"] #partners-marquee::after {
  background: linear-gradient(90deg, var(--q-bg), transparent) !important;
}
[data-theme="light"] #partners-marquee::after {
  background: linear-gradient(270deg, var(--q-bg), transparent) !important;
}

/* ============================================================
   Partners marquee — infinite scroll (both themes)
   ============================================================ */
#partners-marquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}
#partners-marquee .marquee-track {
  display: flex;
  gap: 4rem;
  align-items: center;
  width: max-content;
  animation: partners-scroll 60s linear infinite;
}
#partners-marquee:hover .marquee-track { animation-play-state: paused; }
#partners-marquee .marquee-track img {
  height: 30px;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .45;
  transition: opacity 200ms ease;
}
#partners-marquee .marquee-track img:hover { opacity: 1; }
@keyframes partners-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ============================================================
   v2.6 — Product pages: comprehensive light-mode coverage
   Fix: hero, full-bleed banners, persona slabs, deployment cards,
   bg-black sections, and inline #000 gradient sections.
============================================================ */

/* 1) Section backgrounds — bg-black + inline #000 gradients → light */
html[data-theme="light"] #sol-page section.bg-black,
html[data-theme="light"] #prod-page section.bg-black,
html[data-theme="light"] #pl-page section.bg-black,
html[data-theme="light"] #pc-page section.bg-black,
html[data-theme="light"] #pe-page section.bg-black,
html[data-theme="light"] #rq-page section.bg-black,
html[data-theme="light"] #s1-page section.bg-black,
html[data-theme="light"] #s2-page section.bg-black {
  background: var(--q-bg) !important;
}
html[data-theme="light"] #sol-page section[style*="#000"],
html[data-theme="light"] #prod-page section[style*="#000"],
html[data-theme="light"] #pl-page section[style*="#000"],
html[data-theme="light"] #pc-page section[style*="#000"],
html[data-theme="light"] #pe-page section[style*="#000"],
html[data-theme="light"] #rq-page section[style*="#000"],
html[data-theme="light"] #s1-page section[style*="#000"],
html[data-theme="light"] #s2-page section[style*="#000"] {
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 50%, #ffffff 100%) !important;
}

/* 2) Hero sections — keep image bg but invert dark veil to light */
html[data-theme="light"] #pl-hero,
html[data-theme="light"] #pc-hero,
html[data-theme="light"] #pe-hero,
html[data-theme="light"] #rq-hero,
html[data-theme="light"] #s1-hero,
html[data-theme="light"] #s2-hero {
  background-color: var(--q-bg) !important;
}
html[data-theme="light"] #pl-hero > div[style*="linear-gradient(to bottom,transparent,#000)"],
html[data-theme="light"] #pl-hero > div[style*="linear-gradient(to bottom,transparent,#000)"] {
  background: linear-gradient(to bottom, transparent, #ffffff) !important;
}
html[data-theme="light"] #pc-hero .hero-veil,
html[data-theme="light"] #s2-hero .hero-veil {
  background: linear-gradient(180deg,rgba(255,255,255,.50) 0%,rgba(255,255,255,.20) 30%,rgba(255,255,255,.55) 65%,#ffffff 100%) !important;
}

/* Hero text — switch to dark */
html[data-theme="light"] #pl-hero h1,
html[data-theme="light"] #pc-hero h1,
html[data-theme="light"] #pe-hero h1,
html[data-theme="light"] #rq-hero h1,
html[data-theme="light"] #s1-hero h1,
html[data-theme="light"] #s2-hero h1 { color: #0a0a0a !important; }

html[data-theme="light"] #pl-hero p,
html[data-theme="light"] #pc-hero p,
html[data-theme="light"] #pe-hero p,
html[data-theme="light"] #rq-hero p,
html[data-theme="light"] #s1-hero p,
html[data-theme="light"] #s2-hero p { color: rgba(0,0,0,.70) !important; }

/* Generic text-white/* utility in product pages → dark in light mode */
html[data-theme="light"] #sol-page .text-white\/75,
html[data-theme="light"] #prod-page .text-white\/75,
html[data-theme="light"] #pl-page .text-white\/75,
html[data-theme="light"] #sol-page .text-white\/80,
html[data-theme="light"] #prod-page .text-white\/80,
html[data-theme="light"] #pl-page .text-white\/80,
html[data-theme="light"] #sol-page .text-white\/60,
html[data-theme="light"] #prod-page .text-white\/60,
html[data-theme="light"] #pl-page .text-white\/60,
html[data-theme="light"] #pc-page .text-white\/75,
html[data-theme="light"] #pc-page .text-white\/80,
html[data-theme="light"] #pc-page .text-white\/60,
html[data-theme="light"] #pe-page .text-white\/75,
html[data-theme="light"] #pe-page .text-white\/80,
html[data-theme="light"] #pe-page .text-white\/60,
html[data-theme="light"] #rq-page .text-white\/75,
html[data-theme="light"] #rq-page .text-white\/80,
html[data-theme="light"] #rq-page .text-white\/60,
html[data-theme="light"] #s1-page .text-white\/75,
html[data-theme="light"] #s1-page .text-white\/80,
html[data-theme="light"] #s1-page .text-white\/60,
html[data-theme="light"] #s2-page .text-white\/75,
html[data-theme="light"] #s2-page .text-white\/80,
html[data-theme="light"] #s2-page .text-white\/60 { color: rgba(0,0,0,.70) !important; }

/* 3) Image-bg cards across product pages — LIGHT MODE strategy:
   Apply subtle white→blue gradient overlay (transparent) so the cinematic image is
   still visible but BLACK text on top remains readable. Text stays dark. */

/* 3) UNIVERSAL image-bg overlay for ALL product pages in light mode.
   Rule: any element with a background image (hero, card, banner) gets a
   subtle white→soft-blue gradient overlay so dark text on top is readable.
   Pattern applies to: .veil, .hero-veil, inline rgba(0,0,0)+url() containers,
   and <img>+sibling dark-overlay structures. */

/* 3a) Direct overlay selectors — veil/hero-veil + ANY inline absolute dark overlay
   div (rgba(0,0,0,*) gradient) inside product pages. Sweeping selector catches
   the wide variety of inline overlay patterns across all 6 product pages. */
html[data-theme="light"] :is(#pl-page,#pc-page,#pe-page,#rq-page,#s1-page,#s2-page,#sol-page,#prod-page) :is(.veil,.hero-veil),
/* Any inline-styled absolute div with rgba(0,0,0,..) — the "dark veil on image" pattern */
html[data-theme="light"] :is(#pl-page,#pc-page,#pe-page,#rq-page,#s1-page,#s2-page,#sol-page,#prod-page) div[style*="position:absolute"][style*="rgba(0,0,0,"],
/* Hero sections with absolute dark overlay layers (radial-gradient + ,#000) */
html[data-theme="light"] :is(#pl-hero,#rq-hero,#s1-hero,#pe-hero,#pc-hero,#s2-hero) > div[style*=",#000"] {
  background: linear-gradient(118deg, rgba(222,247,255,.81) 0%, rgba(228,241,247,.82) 72%) !important;
}

/* Text inside containers that hold an absolute dark overlay div → dark
   (catches the label/copy stacked above #pc-problem image card,
    #pe-scenario, #rq-cta, #s1-factory banners, etc.) */
html[data-theme="light"] :is(#pl-page,#pc-page,#pe-page,#rq-page,#s1-page,#s2-page,#sol-page,#prod-page) :has(> div[style*="position:absolute"][style*="rgba(0,0,0,"]) :is(h2,h3,h4,p,div[style*="color:#fff"]) {
  color: #0a0a0a !important;
}

/* Non-absolute card containers using inline rgba(0,0,0,*) background
   (e.g. PerfectEPD #pe-scenario 4 stat cards: "Workstations per site / 24/7 /
   PDF / Air-gap" — glass tiles over the scenario banner). Switch to light
   frosted glass with dark text; keep border tint. */
html[data-theme="light"] :is(#pl-page,#pc-page,#pe-page,#rq-page,#s1-page,#s2-page,#sol-page,#prod-page) div[style*="background:rgba(0,0,0"]:not([style*="position:absolute"]):not([style*=",url("]) {
  background: rgba(255,255,255,.72) !important;
  border-color: rgba(29,161,242,.45) !important;
  color: #0a0a0a !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
html[data-theme="light"] :is(#pl-page,#pc-page,#pe-page,#rq-page,#s1-page,#s2-page,#sol-page,#prod-page) div[style*="background:rgba(0,0,0"]:not([style*="position:absolute"]):not([style*=",url("]) :is(div,span,p) {
  color: #0a0a0a !important;
}

/* Hero bottom-fade strips ("transparent → #000") */
html[data-theme="light"] #pl-hero > div[style*="linear-gradient(to bottom,transparent,#000)"],
html[data-theme="light"] #pc-hero > div[style*="linear-gradient(to bottom,transparent,#000)"],
html[data-theme="light"] #rq-hero > div[style*="linear-gradient(to bottom,transparent,#000)"],
html[data-theme="light"] #s1-hero > div[style*="linear-gradient(to bottom,transparent,#000)"],
html[data-theme="light"] #s2-hero > div[style*="linear-gradient(to bottom,transparent,#000)"] {
  background: linear-gradient(to bottom, transparent, var(--q-bg)) !important;
}

/* Hero grid-dots backdrop — switch to dark dots on light bg */
html[data-theme="light"] :is(#pl-hero,#rq-hero,#s1-hero,#pe-hero) .grid-dots {
  background-image: radial-gradient(rgba(0,0,0,.05) 1px, transparent 1px) !important;
}

/* Hero text & body — switch to dark (blue accent via inline rgba(29,161,242,*) preserved) */
html[data-theme="light"] :is(#pl-hero,#pc-hero,#pe-hero,#rq-hero,#s1-hero,#s2-hero) h1,
html[data-theme="light"] :is(#pl-hero,#pc-hero,#pe-hero,#rq-hero,#s1-hero,#s2-hero) h1 .serif-i:not([style*="rgba(29,161,242"]),
html[data-theme="light"] :is(#pl-hero,#pc-hero,#pe-hero,#rq-hero,#s1-hero,#s2-hero) > div p,
html[data-theme="light"] :is(#pl-hero,#pc-hero,#pe-hero,#rq-hero,#s1-hero,#s2-hero) > div > div p { color: #0a0a0a !important; }

/* 3b) Inline image+gradient ARTICLES (bento) — overlay via ::before */
html[data-theme="light"] :is(#pl-page,#pc-page,#pe-page,#rq-page,#s1-page,#s2-page,#sol-page,#prod-page) [style*=",url("],
html[data-theme="light"] :is(#pl-page,#pc-page,#pe-page,#rq-page,#s1-page,#s2-page,#sol-page,#prod-page) [style*=", url("] {
  position: relative;
}
html[data-theme="light"] :is(#pl-page,#pc-page,#pe-page,#rq-page,#s1-page,#s2-page,#sol-page,#prod-page) [style*=",url("]::before,
html[data-theme="light"] :is(#pl-page,#pc-page,#pe-page,#rq-page,#s1-page,#s2-page,#sol-page,#prod-page) [style*=", url("]::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(118deg, rgba(222,247,255,.81) 0%, rgba(228,241,247,.82) 72%);
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}
html[data-theme="light"] :is(#pl-page,#pc-page,#pe-page,#rq-page,#s1-page,#s2-page,#sol-page,#prod-page) [style*=",url("] > *,
html[data-theme="light"] :is(#pl-page,#pc-page,#pe-page,#rq-page,#s1-page,#s2-page,#sol-page,#prod-page) [style*=", url("] > * {
  position: relative; z-index: 1;
}

/* 3c) Remove card outlines / borders in light mode for clean look */
html[data-theme="light"] #pc-personas .pc-persona,
html[data-theme="light"] #pe-domains  .pe-domain,
html[data-theme="light"] #s2-personas .s2-persona,
html[data-theme="light"] #rq-cases    .rq-case,
html[data-theme="light"] #pc-bento    .bn,
html[data-theme="light"] #s1-apps     .app-thumb,
html[data-theme="light"] #s1-apps     article,
html[data-theme="light"] #s1-hero     .s1-card,
html[data-theme="light"] #s2-build    .s2-detail,
html[data-theme="light"] #pe-hero     .pe-card,
html[data-theme="light"] #pe-target   .pe-card {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* 3d) Text on top of all image-bg cards / banners → dark (#0a0a0a / muted).
   Blue accent text (color:rgba(29,161,242,...) ) untouched because it uses
   a different selector. */
html[data-theme="light"] :is(
  #pc-personas .pc-persona,
  #pe-domains  .pe-domain,
  #s2-personas .s2-persona,
  #rq-cases    .rq-case,
  #pc-bento    .bn[style*="rgba(0,0,0"],
  #s1-apps     .app-thumb,
  #pe-scenario,
  #rq-cta,
  #s1-factory
) :is(h2,h3,h4) { color: #0a0a0a !important; }

html[data-theme="light"] :is(
  #pc-personas .pc-persona,
  #pe-domains  .pe-domain,
  #s2-personas .s2-persona,
  #rq-cases    .rq-case,
  #pc-bento    .bn[style*="rgba(0,0,0"],
  #s1-apps     .app-thumb,
  #pe-scenario,
  #rq-cta,
  #s1-factory
) p { color: rgba(0,0,0,.72) !important; }

/* Sub-labels / tags / meta inside cards → dark */
html[data-theme="light"] #pc-personas .pc-persona .tag,
html[data-theme="light"] #pc-personas .pc-persona .list span,
html[data-theme="light"] #pe-domains  .pe-domain  .meta,
html[data-theme="light"] #s2-personas .s2-persona .s2-label,
html[data-theme="light"] #pc-bento    .bn[style*="rgba(0,0,0"] .pc-label,
html[data-theme="light"] #s1-apps     .app-thumb .label,
html[data-theme="light"] #s1-apps     .app-thumb .seg { color: #0a0a0a !important; }

/* Tag-corner glass background flips to light */
html[data-theme="light"] #pe-domains .pe-domain .meta .tag-corner{
  background: rgba(255,255,255,.65) !important;
  border-color: rgba(0,0,0,.12) !important;
  color: #0a0a0a !important;
}

/* Section-level headings ABOVE these grids (outside the cards) → dark */
html[data-theme="light"] :is(#pe-domains,#s2-personas,#pc-personas,#rq-cases,#pc-bento) > div > div > h2,
html[data-theme="light"] :is(#pe-domains,#s2-personas,#pc-personas,#rq-cases,#pc-bento) > div > div > div + h2 { color: #0a0a0a !important; }

/* 3f) RemoteQA hierarchy tree + integrations grid — node text white in dark theme,
   force dark in light. Covers: .rq-tree .node (Organization/Facilities/Workgroups
   /Workstations) and .rq-int .item (5 product ecosystem cards) */
html[data-theme="light"] #rq-page .rq-tree .node,
html[data-theme="light"] #rq-page .rq-tree .node > span,
html[data-theme="light"] #rq-page .rq-int  .item .nm { color: #0a0a0a !important; }
html[data-theme="light"] #rq-page .rq-int  .item .desc { color: rgba(0,0,0,.55) !important; }

/* 6) SmartSensor S1 #s1-factory — full-bleed factory image */
html[data-theme="light"] #s1-factory > div > div[style*="rgba(0,0,0"] {
  background: linear-gradient(180deg,rgba(255,255,255,.40) 0%,rgba(255,255,255,.35) 50%,rgba(255,255,255,.90) 100%) !important;
}
html[data-theme="light"] #s1-factory h2,
html[data-theme="light"] #s1-factory p { color: #0a0a0a !important; }

/* 7) SmartSensor S2 #s2-personas — handled by image-bg dark-island rule above */

/* 8) Inline color:#fff in headings inside product pages */
html[data-theme="light"] #pl-page h2[style*="color:#fff"],
html[data-theme="light"] #pc-page h2[style*="color:#fff"],
html[data-theme="light"] #pe-page h2[style*="color:#fff"],
html[data-theme="light"] #rq-page h2[style*="color:#fff"],
html[data-theme="light"] #s1-page h2[style*="color:#fff"],
html[data-theme="light"] #s2-page h2[style*="color:#fff"],
html[data-theme="light"] #pl-page h3[style*="color:#fff"],
html[data-theme="light"] #pc-page h3[style*="color:#fff"],
html[data-theme="light"] #pe-page h3[style*="color:#fff"],
html[data-theme="light"] #rq-page h3[style*="color:#fff"],
html[data-theme="light"] #s1-page h3[style*="color:#fff"],
html[data-theme="light"] #s2-page h3[style*="color:#fff"] { color: #0a0a0a !important; }

/* ============================================================
   v3.0 PHASE 3 — Hub pages mobile responsive
   Scopes: #prod-page, #sol-page, #st-page, #rh-page, #sp-hub, #co-page
   Strategy: scale headings via clamp, shrink section padding, stack CTAs,
   drop min-heights, wrap tables. Desktop ≥1024px untouched.
   ============================================================ */

/* Tablet & smaller (≤1023px) — global hub patches */
@media (max-width: 1023px) {
  #prod-page section, #sol-page section, #st-page section,
  #rh-page section, #sp-hub section, #co-page section {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
  /* Hero sections — keep tighter padding-top so above-fold visible */
  #prod-page section[id$="-hero"], #sol-page section[id$="-hero"],
  #st-page section[id$="-hero"], #rh-page section[id$="-hero"],
  #sp-hub section[id$="-hero"], #co-page section[id$="-hero"],
  #prod-page > section:first-of-type, #sol-page > section:first-of-type,
  #st-page > section:first-of-type, #rh-page > section:first-of-type,
  #sp-hub > section:first-of-type, #co-page > section:first-of-type {
    padding-top: 5rem !important;
    padding-bottom: 2.5rem !important;
  }
  /* Hero h1 scale down */
  #prod-page h1, #sol-page h1, #st-page h1, #rh-page h1, #sp-hub h1, #co-page h1 {
    font-size: clamp(2.25rem, 8vw, 4rem) !important;
    line-height: 1.02 !important;
  }
  /* Section h2 scale */
  #prod-page section h2, #sol-page section h2, #st-page section h2,
  #rh-page section h2, #sp-hub section h2, #co-page section h2 {
    font-size: clamp(1.75rem, 6vw, 2.5rem) !important;
    line-height: 1.08 !important;
  }
  /* Drop min-heights on cards (allow content to dictate) */
  #prod-page [class*="min-h-"], #sol-page [class*="min-h-"], #st-page [class*="min-h-"],
  #rh-page [class*="min-h-"], #sp-hub [class*="min-h-"], #co-page [class*="min-h-"] {
    min-height: 0 !important;
  }
  /* Card padding shrink */
  #prod-page [class*="rounded-3xl"], #sol-page [class*="rounded-3xl"],
  #st-page [class*="rounded-3xl"], #rh-page [class*="rounded-3xl"],
  #sp-hub [class*="rounded-3xl"], #co-page [class*="rounded-3xl"] {
    padding: 1.5rem !important;
  }
  /* Prevent image overflow site-wide in hub scopes */
  #prod-page img, #sol-page img, #st-page img, #rh-page img,
  #sp-hub img, #co-page img { max-width: 100%; height: auto; }

  /* Tables — horizontal scroll wrapper safety */
  #prod-page table, #sol-page table, #st-page table, #rh-page table,
  #sp-hub table, #co-page table { display: block; overflow-x: auto; max-width: 100%; }
}

/* Phone (≤767px) */
@media (max-width: 767px) {
  /* Tailwind md:px-12 / md:px-8 override — shrink to 1.25rem horizontal */
  #prod-page section[class*="md:px-"], #sol-page section[class*="md:px-"],
  #st-page section[class*="md:px-"], #rh-page section[class*="md:px-"],
  #sp-hub section[class*="md:px-"], #co-page section[class*="md:px-"] {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  /* Stack CTAs (button row) — pattern: flex inside hero with gap */
  #prod-page section[id$="-hero"] .flex.gap-3,
  #prod-page section[id$="-hero"] .flex.gap-4,
  #sol-page section[id$="-hero"] .flex.gap-3,
  #sol-page section[id$="-hero"] .flex.gap-4,
  #st-page section[id$="-hero"] .flex.gap-3,
  #st-page section[id$="-hero"] .flex.gap-4,
  #rh-page section[id$="-hero"] .flex.gap-3,
  #rh-page section[id$="-hero"] .flex.gap-4,
  #sp-hub section .flex.gap-3,
  #sp-hub section .flex.gap-4,
  #co-page section[id$="-hero"] .flex.gap-3,
  #co-page section[id$="-hero"] .flex.gap-4 {
    flex-direction: column;
    align-items: stretch;
  }
  #prod-page section[id$="-hero"] .flex.gap-3 > a,
  #prod-page section[id$="-hero"] .flex.gap-4 > a,
  #sol-page section[id$="-hero"] .flex.gap-3 > a,
  #sol-page section[id$="-hero"] .flex.gap-4 > a,
  #st-page section[id$="-hero"] .flex.gap-3 > a,
  #st-page section[id$="-hero"] .flex.gap-4 > a,
  #rh-page section[id$="-hero"] .flex.gap-3 > a,
  #rh-page section[id$="-hero"] .flex.gap-4 > a,
  #co-page section[id$="-hero"] .flex.gap-3 > a,
  #co-page section[id$="-hero"] .flex.gap-4 > a { text-align: center; }

  /* Section padding further reduce */
  #prod-page section, #sol-page section, #st-page section,
  #rh-page section, #sp-hub section, #co-page section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  /* Body / paragraph readable on phones */
  #prod-page p, #sol-page p, #st-page p, #rh-page p, #sp-hub p, #co-page p {
    font-size: clamp(.9375rem, 3.6vw, 1rem);
    line-height: 1.55;
  }

  /* Solutions hub — 5-chip quick links wrap fluid */
  #sol-page section .flex.flex-wrap { gap: .5rem !important; }

  /* Store hub segment tab — horizontal scroll instead of wrap if needed */
  #st-page #st-plans .flex[role="tablist"],
  #st-page .seg-tabs {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Company timeline — alternating L/R becomes single column straight */
  #co-page .timeline-item, #co-page [class*="timeline"] {
    grid-template-columns: 1fr !important;
  }

  /* Stat strips — 4-up becomes 2x2 */
  #co-page .grid.grid-cols-4,
  #co-page .grid[class*="md:grid-cols-4"]:not([class*="lg:grid-cols-"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Support hub entry-point cards — full width */
  #sp-hub .grid[class*="md:grid-cols-3"],
  #sp-hub .grid[class*="md:grid-cols-2"] { grid-template-columns: 1fr !important; }

  /* Resources hub 6-card latest grid — single column */
  #rh-page .grid[class*="md:grid-cols-3"],
  #rh-page .grid[class*="lg:grid-cols-3"] { grid-template-columns: 1fr !important; }

  /* Form inputs — prevent iOS zoom */
  #prod-page input, #prod-page select, #prod-page textarea,
  #sol-page input, #sol-page select, #sol-page textarea,
  #st-page input, #st-page select, #st-page textarea,
  #rh-page input, #rh-page select, #rh-page textarea,
  #sp-hub input, #sp-hub select, #sp-hub textarea,
  #co-page input, #co-page select, #co-page textarea {
    font-size: 16px !important;
  }
}

/* Small phone (≤479px) */
@media (max-width: 479px) {
  #prod-page h1, #sol-page h1, #st-page h1, #rh-page h1, #sp-hub h1, #co-page h1 {
    font-size: clamp(1.875rem, 9vw, 2.5rem) !important;
  }
  /* Eyebrow tracking reduce so it doesn't overflow */
  #prod-page [class*="eyebrow"], #sol-page [class*="eyebrow"], #st-page [class*="eyebrow"],
  #rh-page [class*="eyebrow"], #sp-hub [class*="eyebrow"], #co-page [class*="eyebrow"] {
    letter-spacing: .1rem !important;
    font-size: .6875rem !important;
  }
  /* Breadcrumb wrap */
  #prod-page nav[aria-label="Breadcrumb"], #sol-page nav[aria-label="Breadcrumb"],
  #st-page nav[aria-label="Breadcrumb"], #rh-page nav[aria-label="Breadcrumb"],
  #sp-hub nav[aria-label="Breadcrumb"], #co-page nav[aria-label="Breadcrumb"] {
    flex-wrap: wrap;
  }
}

/* ============================================================
   v3.0 PHASE 4 — Product detail pages mobile responsive
   Scopes: #pl-page #pc-page #pe-page #rq-page #s1-page #s2-page
   ============================================================ */

/* SITE-WIDE: prevent horizontal scroll caused by mobile drawer (qx-mobile-nav
   is translateX(100%) off-screen but counts toward scrollWidth without this) */
@media (max-width: 1023px) {
  html, body { overflow-x: clip; }
}

@media (max-width: 1023px) {
  /* Global per-page section padding shrink */
  #pl-page section, #pc-page section, #pe-page section,
  #rq-page section, #s1-page section, #s2-page section {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
  /* Hero sections — tighter top padding above-fold */
  #pl-hero, #pc-hero, #pe-hero, #rq-hero, #s1-hero, #s2-hero {
    padding-top: 5rem !important;
    padding-bottom: 2.5rem !important;
    min-height: auto !important;
  }
  /* Heading scale */
  #pl-page h1, #pc-page h1, #pe-page h1, #rq-page h1, #s1-page h1, #s2-page h1 {
    font-size: clamp(2rem, 8.5vw, 3.75rem) !important;
    line-height: 1.04 !important;
  }
  #pl-page section h2, #pc-page section h2, #pe-page section h2,
  #rq-page section h2, #s1-page section h2, #s2-page section h2 {
    font-size: clamp(1.625rem, 6vw, 2.5rem) !important;
    line-height: 1.1 !important;
  }
  /* Drop all min-height in product cards (Tailwind + inline) */
  #pl-page [class*="min-h-"], #pc-page [class*="min-h-"], #pe-page [class*="min-h-"],
  #rq-page [class*="min-h-"], #s1-page [class*="min-h-"], #s2-page [class*="min-h-"] {
    min-height: 0 !important;
  }
  #pl-page [style*="min-height"], #pc-page [style*="min-height"], #pe-page [style*="min-height"],
  #rq-page [style*="min-height"], #s1-page [style*="min-height"], #s2-page [style*="min-height"] {
    min-height: 0 !important;
  }
  /* Card padding shrink */
  #pl-page [class*="rounded-3xl"], #pc-page [class*="rounded-3xl"],
  #pe-page [class*="rounded-3xl"], #rq-page [class*="rounded-3xl"],
  #s1-page [class*="rounded-3xl"], #s2-page [class*="rounded-3xl"] {
    padding: 1.5rem !important;
  }
  /* Image overflow safety */
  #pl-page img, #pc-page img, #pe-page img, #rq-page img, #s1-page img, #s2-page img {
    max-width: 100%; height: auto;
  }
  /* Tables — block + scroll */
  #pl-page table, #pc-page table, #pe-page table, #rq-page table, #s1-page table, #s2-page table {
    display: block; overflow-x: auto; max-width: 100%;
  }
  /* Showcase frames — adjust aspect-ratio on mobile */
  #pc-hero .rounded-\[28px\], #s2-build .rounded-\[28px\], #s2-hero .rounded-\[28px\],
  #pe-hero .rounded-\[28px\], #rq-hero .rounded-\[28px\] {
    aspect-ratio: 4/3 !important;
  }
  /* RemoteQA 3D dashboard mock — disable perspective tilt on mobile (looks broken) */
  #rq-hero [style*="perspective"] { perspective: none !important; }
  #rq-hero [style*="rotateY"], #rq-hero [style*="rotateX"] {
    transform: none !important;
  }
  /* PC bento grid — force 1-col stack */
  #pc-bento .grid { grid-template-columns: 1fr !important; }
  #pc-bento .grid > * { grid-column: auto !important; grid-row: auto !important; }
  /* Workflow horizontal 5-step (PL/PC/PE) — stack vertical */
  #pl-workflow .grid, #pe-workflow .grid, #s1-oem .grid {
    grid-template-columns: 1fr !important;
  }
  /* PE coordinate ribbon — wrap fluid */
  #pe-hero [class*="ribbon"], #pe-hero .flex.gap-4 { flex-wrap: wrap; }
  /* S1 datasheet 2-col specs — stack */
  #s1-specs .grid, #s2-build .grid { grid-template-columns: 1fr !important; }
  /* S2 spec ticker marquee — slower for mobile readability */
  #s2-page [class*="ticker"] { animation-duration: 60s !important; }
}

@media (max-width: 767px) {
  /* Tailwind md:px-* override */
  #pl-page section[class*="md:px-"], #pc-page section[class*="md:px-"],
  #pe-page section[class*="md:px-"], #rq-page section[class*="md:px-"],
  #s1-page section[class*="md:px-"], #s2-page section[class*="md:px-"] {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  /* CTA button rows stack vertical */
  #pl-hero .flex.gap-3, #pl-hero .flex.gap-4,
  #pc-hero .flex.gap-3, #pc-hero .flex.gap-4,
  #pe-hero .flex.gap-3, #pe-hero .flex.gap-4,
  #rq-hero .flex.gap-3, #rq-hero .flex.gap-4,
  #s1-hero .flex.gap-3, #s1-hero .flex.gap-4,
  #s2-hero .flex.gap-3, #s2-hero .flex.gap-4,
  section[id$="-cta"] .flex.flex-wrap.gap-3,
  section[id$="-cta"] .flex.flex-wrap.gap-4 {
    flex-direction: column;
    align-items: stretch;
  }
  section[id$="-cta"] .flex.flex-wrap > a { width: 100%; justify-content: center; }
  /* PC pricing tier 3-up → 1-col, featured card on top */
  #pc-pricing .grid { grid-template-columns: 1fr !important; gap: 1rem !important; }
  /* Form inputs no iOS zoom */
  #pl-page input, #pl-page select, #pl-page textarea,
  #pc-page input, #pc-page select, #pc-page textarea,
  #pe-page input, #pe-page select, #pe-page textarea,
  #rq-page input, #rq-page select, #rq-page textarea,
  #s1-page input, #s1-page select, #s1-page textarea,
  #s2-page input, #s2-page select, #s2-page textarea {
    font-size: 16px !important;
  }
  /* S1 inquiry form 2-col → 1-col */
  #s1-inquiry .grid { grid-template-columns: 1fr !important; }
  /* S2 compare table → wrap scroll */
  #s2-compare .grid { grid-template-columns: 1fr !important; }
  /* Eyebrow letter-spacing reduce */
  [class*="-eyebrow"], [class*="eyebrow-"] {
    letter-spacing: .1rem !important;
    font-size: .6875rem !important;
  }
}

@media (max-width: 479px) {
  #pl-page h1, #pc-page h1, #pe-page h1, #rq-page h1, #s1-page h1, #s2-page h1 {
    font-size: clamp(1.75rem, 9vw, 2.5rem) !important;
  }
}

/* ============================================================
   v3.0 PHASE 5 — Solutions sub-pages (12) mobile responsive
   Scope: [id^="sol-"] catches #sol-page (shared renderer) +
   #sol-med, #sol-dicom, #sol-mammo, #sol-tele, #sol-enterprise,
   #sol-multisite, #sol-remote, #sol-color, #sol-patho, #sol-epaper,
   #sol-oem, #sol-geo
   ============================================================ */

@media (max-width: 1023px) {
  [id^="sol-"] section {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
  [id^="sol-"] section[id*="-hero"], [id^="sol-"] > section:first-of-type {
    padding-top: 5rem !important;
    padding-bottom: 2.5rem !important;
    min-height: auto !important;
  }
  [id^="sol-"] h1 {
    font-size: clamp(2rem, 8.5vw, 3.75rem) !important;
    line-height: 1.04 !important;
  }
  [id^="sol-"] section h2 {
    font-size: clamp(1.625rem, 6vw, 2.5rem) !important;
    line-height: 1.1 !important;
  }
  [id^="sol-"] [class*="min-h-"],
  [id^="sol-"] [style*="min-height"] { min-height: 0 !important; }
  [id^="sol-"] [class*="rounded-3xl"] { padding: 1.5rem !important; }
  [id^="sol-"] img { max-width: 100%; height: auto; }
  [id^="sol-"] table { display: block; overflow-x: auto; max-width: 100%; }
  /* Standards chip bar — wrap */
  [id^="sol-"] .flex.flex-wrap { gap: .5rem !important; }
  /* Roles 2x2 → 1-col */
  [id^="sol-"] .grid[class*="md:grid-cols-2"]:not([class*="lg:grid-cols-"]) { grid-template-columns: 1fr !important; }
  /* Stack 3-col product → 1-col */
  [id^="sol-"] .grid[class*="md:grid-cols-3"],
  [id^="sol-"] .grid[class*="lg:grid-cols-3"] { grid-template-columns: 1fr !important; }
  /* 5-step workflow horizontal → vertical */
  [id^="sol-"] .grid[class*="md:grid-cols-5"],
  [id^="sol-"] .grid[class*="lg:grid-cols-5"] { grid-template-columns: 1fr !important; }
  /* Enterprise scale split panel — stack */
  [id^="sol-"] .grid[class*="lg:grid-cols-12"] { grid-template-columns: 1fr !important; }
  /* E-E-A-T 3-card */
  [id^="sol-"] .grid.gap-4 > div, [id^="sol-"] .grid.gap-5 > div, [id^="sol-"] .grid.gap-6 > div {
    min-height: 0 !important;
  }
}

@media (max-width: 767px) {
  [id^="sol-"] section[class*="md:px-"] {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  [id^="sol-"] section .flex.gap-3, [id^="sol-"] section .flex.gap-4 {
    flex-direction: column;
    align-items: stretch;
  }
  [id^="sol-"] section .flex.gap-3 > a, [id^="sol-"] section .flex.gap-4 > a {
    width: 100%; justify-content: center;
  }
}

@media (max-width: 479px) {
  [id^="sol-"] h1 { font-size: clamp(1.75rem, 9vw, 2.5rem) !important; }
}

/* ============================================================
   v3.0 PHASE 6 — Store sub-pages (7) via shared renderer
   Scopes: [id^="sp-"] catches sp-pl, sp-pc, sp-pe, sp-ss, sp-bd,
   sp-ent, sp-edu (per $sp_slug). Plus sp-plans, sp-compare, etc.
   ============================================================ */

@media (max-width: 1023px) {
  [id^="sp-"] section {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
  [id^="sp-"] section[id*="-hero"], [id^="sp-"] > section:first-of-type {
    padding-top: 5rem !important;
    padding-bottom: 2.5rem !important;
    min-height: auto !important;
  }
  [id^="sp-"] h1 { font-size: clamp(2rem, 8.5vw, 3.75rem) !important; line-height: 1.04 !important; }
  [id^="sp-"] section h2 { font-size: clamp(1.625rem, 6vw, 2.5rem) !important; line-height: 1.1 !important; }
  [id^="sp-"] [class*="min-h-"], [id^="sp-"] [style*="min-height"] { min-height: 0 !important; }
  [id^="sp-"] [class*="rounded-3xl"] { padding: 1.5rem !important; }
  [id^="sp-"] img { max-width: 100%; height: auto; }
  /* Compare table — block + scroll-x */
  [id^="sp-"] table { display: block; overflow-x: auto; max-width: 100%; }
  /* Plan card 3-up → 1-col, featured tetap di tengah natural */
  [id^="sp-"] .grid[class*="md:grid-cols-3"],
  [id^="sp-"] .grid[class*="lg:grid-cols-3"] { grid-template-columns: 1fr !important; }
  /* vs alternatives 2-col → 1-col */
  [id^="sp-"] .grid[class*="md:grid-cols-2"]:not([class*="lg:grid-cols-"]) { grid-template-columns: 1fr !important; }
  /* Volume + edu callout split */
  [id^="sp-"] .grid[class*="lg:grid-cols-12"] { grid-template-columns: 1fr !important; }
}

@media (max-width: 767px) {
  [id^="sp-"] section[class*="md:px-"] {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  [id^="sp-"] section .flex.gap-3, [id^="sp-"] section .flex.gap-4 {
    flex-direction: column; align-items: stretch;
  }
  [id^="sp-"] section .flex.gap-3 > a, [id^="sp-"] section .flex.gap-4 > a {
    width: 100%; justify-content: center;
  }
}

@media (max-width: 479px) {
  [id^="sp-"] h1 { font-size: clamp(1.75rem, 9vw, 2.5rem) !important; }
}

/* ============================================================
   v3.0 PHASE 7 — Support sub-pages (6 + hub) via _support-shared.php
   Support uses sp_id = sp-hub|sp-dl|sp-doc|sp-cs|sp-rma|sp-sec|sp-cnt
   Phase 6 [id^="sp-"] rules already cover most patterns. Add
   Support-specific overrides for .spa-tbl, form fields, 9-card,
   6-frame compliance, 4-row deployment.
   ============================================================ */

@media (max-width: 1023px) {
  /* .spa-tbl explicitly horizontal scroll (already has overflow-x:auto
     but force display:block to ensure on narrow viewport) */
  .spa-tbl { display: block; overflow-x: auto; max-width: 100%; }
  /* Doc category 9-card 3-col → 1-col */
  #sp-doc .grid[class*="md:grid-cols-3"],
  #sp-doc .grid[class*="lg:grid-cols-3"] { grid-template-columns: 1fr !important; }
  /* Security 9-card posture */
  #sp-sec .grid[class*="md:grid-cols-3"] { grid-template-columns: 1fr !important; }
  /* 5-step RMA flow horizontal → stack */
  #sp-rma .grid[class*="md:grid-cols-5"],
  #sp-rma .grid[class*="lg:grid-cols-5"] { grid-template-columns: 1fr !important; }
  /* Compliance 6-frame grid */
  #sp-sec .grid[class*="md:grid-cols-2"] { grid-template-columns: 1fr !important; }
}

@media (max-width: 767px) {
  /* Form fields 2-col → 1-col, 16px to prevent iOS zoom */
  [id^="sp-"] form .grid[class*="md:grid-cols-2"],
  [id^="sp-"] form .grid[class*="md:grid-cols-3"] { grid-template-columns: 1fr !important; }
  [id^="sp-"] input, [id^="sp-"] select, [id^="sp-"] textarea { font-size: 16px !important; }
  /* Popular task pills wrap */
  #sp-hub .flex.flex-wrap { gap: .5rem !important; }
}

/* ============================================================
   v3.0 PHASE 8 — Resources archive + singles
   Archives: #rb-page (blog), #rn-page (news), #ru-page (updates),
   #rg-page (guides), #rc-page (compliance), #rt-page (technotes)
   Singles: #sb-page (blog), #sn-page (news), #sr-page (update)
   ============================================================ */

@media (max-width: 1023px) {
  #rb-page section, #rn-page section, #ru-page section, #rg-page section,
  #rc-page section, #rt-page section,
  #sb-page section, #sn-page section, #sr-page section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  #rb-page h1, #rn-page h1, #ru-page h1, #rg-page h1, #rc-page h1, #rt-page h1,
  #sb-page h1, #sn-page h1, #sr-page h1 {
    font-size: clamp(2rem, 8.5vw, 3.5rem) !important;
    line-height: 1.04 !important;
  }
  #rb-page section h2, #rn-page section h2, #ru-page section h2,
  #rg-page section h2, #rc-page section h2, #rt-page section h2,
  #sb-page section h2, #sn-page section h2, #sr-page section h2 {
    font-size: clamp(1.5rem, 5.5vw, 2.25rem) !important;
    line-height: 1.12 !important;
  }
  [id^="r"][id$="-page"] [class*="min-h-"],
  [id^="r"][id$="-page"] [style*="min-height"],
  [id^="s"][id$="-page"] [class*="min-h-"],
  [id^="s"][id$="-page"] [style*="min-height"] { min-height: 0 !important; }
  [id^="r"][id$="-page"] img, [id^="s"][id$="-page"] img { max-width: 100%; height: auto; }
  /* Article grid 3-col → 1-col */
  #rb-page .grid[class*="md:grid-cols-3"],
  #rb-page .grid[class*="lg:grid-cols-3"],
  #rg-page .grid[class*="md:grid-cols-3"],
  #rg-page .grid[class*="lg:grid-cols-3"] { grid-template-columns: 1fr !important; }
  /* Blog featured big card 1.1/.9 → stack */
  #rb-page .grid[class*="lg:grid-cols-12"],
  #rb-page .grid[style*="1.1fr"], #rb-page .grid[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* News chronological rows */
  #rn-page .grid[class*="md:grid-cols-"], #rn-page [style*="grid-template-columns:140px"] {
    grid-template-columns: 1fr !important;
  }
  /* Product Updates timeline left gutter */
  #ru-page [style*="grid-template-columns:200px"],
  #ru-page [style*="200px 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Single sidebar drop ke bawah */
  #sb-page .grid[class*="md:grid-cols-12"],
  #sn-page .grid[class*="md:grid-cols-12"],
  #sr-page .grid[class*="md:grid-cols-12"] {
    grid-template-columns: 1fr !important;
  }
  #sb-page .grid[class*="md:grid-cols-12"] > *,
  #sn-page .grid[class*="md:grid-cols-12"] > *,
  #sr-page .grid[class*="md:grid-cols-12"] > * {
    grid-column: auto !important;
  }
  #sn-page [class*="drop-cap"] { font-size: 4rem !important; }
}

@media (max-width: 767px) {
  [id^="r"][id$="-page"] section[class*="md:px-"],
  [id^="s"][id$="-page"] section[class*="md:px-"] {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  #rb-page .flex.flex-wrap, #rn-page .flex.flex-wrap, #ru-page .flex.flex-wrap,
  #rg-page .flex.flex-wrap, #rc-page .flex.flex-wrap, #rt-page .flex.flex-wrap {
    gap: .5rem !important;
  }
}

@media (max-width: 479px) {
  [id^="r"][id$="-page"] h1, [id^="s"][id$="-page"] h1 {
    font-size: clamp(1.75rem, 9vw, 2.25rem) !important;
  }
}

/* ============================================================
   v3.0 PHASE 9 — Compare pages (3) via inc/_compare-shared.php
   Scopes: #cp-calman, #cp-displaycal, #cp-spyder (or [id^="cp-"])
   ============================================================ */

@media (max-width: 1023px) {
  [id^="cp-"] section {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
  [id^="cp-"] section[id*="-hero"], [id^="cp-"] > section:first-of-type {
    padding-top: 5rem !important;
    padding-bottom: 2.5rem !important;
    min-height: auto !important;
  }
  [id^="cp-"] h1 { font-size: clamp(2rem, 8.5vw, 3.75rem) !important; line-height: 1.04 !important; }
  [id^="cp-"] section h2 { font-size: clamp(1.625rem, 6vw, 2.5rem) !important; }
  [id^="cp-"] [class*="min-h-"], [id^="cp-"] [style*="min-height"] { min-height: 0 !important; }
  [id^="cp-"] [class*="rounded-3xl"] { padding: 1.5rem !important; }
  [id^="cp-"] img { max-width: 100%; height: auto; }
  /* 15-row compare table — horizontal scroll */
  [id^="cp-"] table { display: block; overflow-x: auto; max-width: 100%; }
  /* 2-panel "when to choose" → stack */
  [id^="cp-"] .grid[class*="md:grid-cols-2"] { grid-template-columns: 1fr !important; }
  /* FAQ 4/8 split → stack */
  [id^="cp-"] .grid[class*="lg:grid-cols-12"] { grid-template-columns: 1fr !important; }
}

@media (max-width: 767px) {
  [id^="cp-"] section[class*="md:px-"] {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  [id^="cp-"] section .flex.gap-3, [id^="cp-"] section .flex.gap-4 {
    flex-direction: column; align-items: stretch;
  }
  [id^="cp-"] section .flex.gap-3 > a, [id^="cp-"] section .flex.gap-4 > a {
    width: 100%; justify-content: center;
  }
}

/* ============================================================
   v3.0 PHASE 10 — Company pages (hub, about, partners, legal)
   Scopes: #co-page, #ab-page (about), #pn-page (partners),
   #lg-page (legal, shared via _legal-shared.php for privacy/terms/cookies)
   ============================================================ */

@media (max-width: 1023px) {
  #co-page section, #ab-page section, #pn-page section, #lg-page section {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
  #co-page > section:first-of-type, #ab-page > section:first-of-type,
  #pn-page > section:first-of-type, #lg-page > section:first-of-type {
    padding-top: 5rem !important;
    padding-bottom: 2.5rem !important;
    min-height: auto !important;
  }
  #co-page h1, #ab-page h1, #pn-page h1, #lg-page h1 {
    font-size: clamp(2rem, 8.5vw, 3.75rem) !important;
    line-height: 1.04 !important;
  }
  #co-page section h2, #ab-page section h2, #pn-page section h2, #lg-page section h2 {
    font-size: clamp(1.625rem, 6vw, 2.5rem) !important;
    line-height: 1.1 !important;
  }
  #co-page [class*="min-h-"], #ab-page [class*="min-h-"], #pn-page [class*="min-h-"],
  #lg-page [class*="min-h-"],
  #co-page [style*="min-height"], #ab-page [style*="min-height"],
  #pn-page [style*="min-height"], #lg-page [style*="min-height"] { min-height: 0 !important; }
  #co-page img, #ab-page img, #pn-page img, #lg-page img { max-width: 100%; height: auto; }
  /* Company 4-product line cards 1-col */
  #co-page .grid[class*="md:grid-cols-2"], #co-page .grid[class*="md:grid-cols-4"] {
    grid-template-columns: 1fr !important;
  }
  /* Company 4-stat 2x2 */
  #co-page .grid[class*="grid-cols-4"]:not([class*="md:grid-cols-2"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* About 4-principle 2x2 → 1-col */
  #ab-page .grid[class*="md:grid-cols-2"],
  #ab-page .grid[class*="md:grid-cols-4"] { grid-template-columns: 1fr !important; }
  /* About 16-icon "who we serve" grid → 2-col */
  #ab-page .grid[class*="md:grid-cols-4"][class*="grid-cols-2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* Partners 4 program cards + 10-row benefits matrix */
  #pn-page .grid[class*="md:grid-cols-2"],
  #pn-page .grid[class*="md:grid-cols-4"] { grid-template-columns: 1fr !important; }
  #pn-page table { display: block; overflow-x: auto; max-width: 100%; }
  /* Partners 12-logo grid → 3-col */
  #pn-page .grid[class*="grid-cols-6"], #pn-page .grid[class*="lg:grid-cols-6"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  /* Legal TOC sticky sidebar 4/8 → collapse: TOC on top, body below */
  #lg-page .grid[class*="lg:grid-cols-12"] { grid-template-columns: 1fr !important; }
  #lg-page [class*="col-span-4"], #lg-page [class*="col-span-8"] {
    grid-column: auto !important;
  }
  #lg-page [class*="sticky"] { position: relative !important; top: auto !important; }
  /* Company timeline alternating L/R → straight single-column */
  #co-page [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}

@media (max-width: 767px) {
  #co-page section[class*="md:px-"], #ab-page section[class*="md:px-"],
  #pn-page section[class*="md:px-"], #lg-page section[class*="md:px-"] {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  /* Partners 7-field form 1-col */
  #pn-page form .grid[class*="md:grid-cols-2"] { grid-template-columns: 1fr !important; }
  #pn-page input, #pn-page select, #pn-page textarea { font-size: 16px !important; }
  /* About pull-quote padding */
  #ab-page blockquote { padding: 1.5rem 1rem !important; font-size: 1.125rem !important; }
}

@media (max-width: 479px) {
  #co-page h1, #ab-page h1, #pn-page h1, #lg-page h1 {
    font-size: clamp(1.75rem, 9vw, 2.5rem) !important;
  }
}

/* ============================================================
   v3.0 PHASE 11 — Misc pages: /request-demo/, /de|fr|es|ko/ placeholders
   ============================================================ */

@media (max-width: 1023px) {
  /* Request demo — 2-column (pitch + form) → stack form bawah */
  .rd-page section, [id*="request"] section, [id^="rd-"] section {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
  body[class*="request-demo"] section .grid[class*="lg:grid-cols-12"],
  body[class*="request-demo"] section .grid[class*="md:grid-cols-2"] {
    grid-template-columns: 1fr !important;
  }
  body[class*="request-demo"] section h1 {
    font-size: clamp(2rem, 8.5vw, 3.75rem) !important;
    line-height: 1.04 !important;
  }
  body[class*="request-demo"] [class*="min-h-"],
  body[class*="request-demo"] [style*="min-height"] { min-height: 0 !important; }
  /* Language placeholders — padding + simple stack */
  body[class*="page-template-page-lang-"] section {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
}

@media (max-width: 767px) {
  body[class*="request-demo"] section[class*="md:px-"] {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  body[class*="request-demo"] input, body[class*="request-demo"] select,
  body[class*="request-demo"] textarea { font-size: 16px !important; }
  body[class*="request-demo"] form .grid[class*="md:grid-cols-2"] {
    grid-template-columns: 1fr !important;
  }
  /* Trust strip 12-logo */
  body[class*="request-demo"] .flex.flex-wrap { gap: .75rem !important; }
}

/* ============================================================
   v3.0 PHASE 12 — Footer mobile responsive
   ============================================================ */

@media (max-width: 1023px) {
  footer {
    padding-top: 3rem !important;
    padding-bottom: 2rem !important;
  }
  /* Multi-column footer → 2-col stack */
  footer .grid[class*="md:grid-cols-4"],
  footer .grid[class*="md:grid-cols-5"],
  footer .grid[class*="md:grid-cols-6"],
  footer .grid[class*="lg:grid-cols-4"],
  footer .grid[class*="lg:grid-cols-5"],
  footer .grid[class*="lg:grid-cols-6"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 2rem 1rem !important;
  }
  /* Footer headings tighter */
  footer h3, footer h4 { font-size: .875rem !important; }
  footer a, footer li { font-size: .8125rem !important; }
}

@media (max-width: 479px) {
  /* Bottom strip (copyright + lang + social) stack vertical */
  footer .flex.flex-wrap.items-center.justify-between,
  footer .flex.items-center.justify-between {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 1rem !important;
  }
  /* Footer column grid → 1-col on very small */
  footer .grid[class*="md:grid-cols-4"],
  footer .grid[class*="md:grid-cols-5"],
  footer .grid[class*="md:grid-cols-6"] {
    grid-template-columns: 1fr !important;
  }
}