/* ============================================================
   OXMIQ v2 — Shared Design System
   Premium minimal · Light + Dark · No iridescent text
   ============================================================ */

/* ============ FONTS ============ */
@font-face {
  font-family: 'Oxygen'; font-weight: 300; font-style: normal;
  src: url('https://oxmiq-web-dgdhhccneph6ega5.z02.azurefd.net/fonts/Oxygen/Oxygen-Light.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Oxygen'; font-weight: 400; font-style: normal;
  src: url('https://oxmiq-web-dgdhhccneph6ega5.z02.azurefd.net/fonts/Oxygen/Oxygen-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Oxygen'; font-weight: 700; font-style: normal;
  src: url('https://oxmiq-web-dgdhhccneph6ega5.z02.azurefd.net/fonts/Oxygen/Oxygen-Bold.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Oxygen Mono'; font-weight: 400; font-style: normal;
  src: url('https://oxmiq-web-dgdhhccneph6ega5.z02.azurefd.net/fonts/Oxygen Mono/OxygenMonospace.ttf') format('truetype');
  font-display: swap;
}

:root[data-theme="dark"] {
  --bg:        #0e1117;
  --bg-soft:   #0a0a0e;
  --bg-card:   #0e0e14;
  --fg:        #ffffff;
  --fg-2:      rgba(255,255,255,0.66);
  --fg-3:      rgba(255,255,255,0.42);
  --fg-4:      rgba(255,255,255,0.22);
  --line:      rgba(255,255,255,0.08);
  --line-2:    rgba(255,255,255,0.14);
  --line-3:    rgba(255,255,255,0.22);
  --accent:    #5A5AF2;
  --accent-2:  #A5A5F8;
  --accent-3:  #3B5BD9;
  --bloom-a:   rgba(90, 90, 242, 0.45);
  --bloom-b:   rgba(87, 74, 142, 0.35);
  --bloom-c:   rgba(90, 90, 242, 0.22);
  --bloom-d:   rgba(90, 90, 242, 0.18);
}
:root[data-theme="light"] {
  --bg:        #ffffff;
  --bg-soft:   #f6f6f8;
  --bg-card:   #fafafc;
  --fg:        #1B1E5E;
  --fg-2:      rgba(27,30,94,0.86);
  --fg-3:      rgba(27,30,94,0.44);
  --fg-4:      rgba(27,30,94,0.22);
  --line:      rgba(27,30,94,0.08);
  --line-2:    rgba(27,30,94,0.14);
  --line-3:    rgba(27,30,94,0.24);
  --accent:    #5A5AF2;
  --accent-2:  #7B7BF5;
  --accent-3:  #3B5BD9;
  --bloom-a:   rgba(90, 90, 242, 0.18);
  --bloom-b:   rgba(87, 74, 142, 0.14);
  --bloom-c:   rgba(90, 90, 242, 0.10);
  --bloom-d:   rgba(90, 90, 242, 0.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--fg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* NOTE: do NOT set `scrollbar-gutter: stable` here. The full-bleed hero/blades
   are `width: 100vw`, so a reserved gutter makes the content area narrower than
   100vw — the page shifts left and the gutter shows as a black strip on the
   right (worst on phones and any browser in desktop mode). `body` already has
   `overflow-x: hidden`, which prevents horizontal scroll without a gutter. */
html { scrollbar-gutter: auto; scroll-behavior: smooth; }
/* In-page anchor jumps glide instead of teleporting; anchored targets clear the
   fixed nav (~68px) so they don't land tucked underneath it. */
:target { scroll-margin-top: 94px; }
body {
  font-family: 'Oxygen', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  overflow-x: clip; /* clip (not hidden) so position:fixed children stay viewport-relative */
  transition: background 320ms ease, color 320ms ease;
  min-height: 100vh;
  position: relative;
  /* leave room for fixed nav */
  padding-top: 68px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
/* Consistent trademark superscript: <sup>TM</sup>. Browser defaults shrink
   too aggressively at small font sizes; pin to 0.55em + raised baseline. */
sup {
  font-size: 0.21em;
  line-height: 0;
  vertical-align: super;
  position: relative;
  top: -10px;
  letter-spacing: 0.5px;
  font-weight: 500;
}

/* ========== AMBIENT BLOOM ========== */
.bloom {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 55% 45% at 12% 105%, var(--bloom-a) 0%, transparent 60%),
    radial-gradient(ellipse 40% 35% at 25% 95%, var(--bloom-b) 0%, transparent 55%),
    radial-gradient(ellipse 30% 25% at 5% 90%, var(--bloom-c) 0%, transparent 55%),
    radial-gradient(ellipse 25% 20% at 0% 100%, var(--bloom-d) 0%, transparent 50%);
  filter: blur(40px) saturate(1.05);
  transition: opacity 320ms ease;
}

/* ========== LAYOUT ========== */
.wrap { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 0 48px; }

/* ========== NAV — fixed, full-width backdrop, constrained inner ========== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: auto;
  max-width: 1240px;
  margin: 0 auto;
  padding: 22px 48px;
  /* 3-column grid keeps the logo left, links centered, and a balanced right
     gutter (where the theme toggle used to sit) so the bar doesn't shift. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  z-index: 100;
}
.nav-logo { justify-self: start; margin-left: -50px; }
/* The -50px pull only looks right once the viewport is wide enough that the
   centered (max-width:1240) nav has ~50px of outer margin to absorb it — i.e.
   ~1340px+. Below that (resized/non-fullscreen windows, iPad landscape) the nav
   fills the width and the pull jams the logo against the edge, so drop it and let
   the logo sit at the nav's normal inset. Boundary is continuous (~48px at 1340). */
@media (min-width: 901px) and (max-width: 1340px) { .nav-logo { margin-left: 0; } }
.nav-links { justify-self: center; }
.nav-burger { justify-self: end; grid-column: 3; }
/* full-bleed blurred backdrop behind the nav */
.nav::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 68px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-bottom: 1px solid var(--line);
  z-index: -1;
  pointer-events: none;
  transition: background 320ms ease, border-color 320ms ease;
}
[data-theme="light"] .nav::before {
  background: rgba(255, 255, 255, 0.75);
}

/* ===== Black hero sections on every page ===== */
.page-hero,
.product-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: max(32px, calc((100vw - 1240px) / 2)) !important;
  padding-right: max(32px, calc((100vw - 1240px) / 2)) !important;
  background: #0e1117;
  --bg: #0e1117; --bg-soft: #131720; --bg-card: #161b24;
  --fg: #fff; --fg-2: rgba(255,255,255,.7); --fg-3: rgba(255,255,255,.5);
  --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.14); --line-3: rgba(255,255,255,.22);
  --accent: #5A5AF2;
}

/* ========== PRODUCTS DROPDOWN ========== */
.nav-drop-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-drop-btn {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  font-family: 'Oxygen', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 200ms ease;
}
.nav-drop-wrap:hover .nav-drop-btn,
.nav-drop-wrap:focus-within .nav-drop-btn { color: var(--accent); }
.nav-drop-caret {
  font-size: 9px;
  line-height: 1;
  display: inline-block;
  transition: transform 240ms ease;
}
.nav-drop-wrap:hover .nav-drop-caret,
.nav-drop-wrap:focus-within .nav-drop-caret { transform: rotate(180deg); }
.nav-drop-menu {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 200px;
  padding: 8px;
  border-radius: 14px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms;
}
.nav-drop-wrap:hover .nav-drop-menu,
.nav-drop-wrap:focus-within .nav-drop-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 200ms ease, transform 200ms ease, visibility 0s;
}
/* invisible bridge so cursor can travel from button to menu */
.nav-drop-menu::before {
  content: '';
  position: absolute;
  top: -18px; left: 0; right: 0;
  height: 18px;
}
.nav-drop-menu a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--fg-2);
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease;
}
.nav-drop-menu a:hover {
  background: var(--bg-soft);
  color: var(--fg);
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
}
.nav-logo img {
  display: block;
  width: 130px;
  height: auto;
}
.nav-logo .light-only { display: none; }
[data-theme="light"] .nav-logo .dark-only  { display: none; }
[data-theme="light"] .nav-logo .light-only { display: block; }
.nav-links { display: flex; gap: 32px; align-items: center; }
.nav-links a {
  color: var(--fg);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: color 200ms ease;
}
.nav-links a:hover { color: var(--accent); }
/* Current-page emphasis (set by v2-nav.js). Bolder + full-contrast so it reads
   as selected, distinct from the hover state. */
/* Selected/active nav items use the same blue accent as hover, so the current
   page reads consistently across top-level links, dropdown buttons, and dropdown
   items (was var(--fg) navy, which clashed with the blue hover state). */
.nav-links a.active { color: var(--accent); font-weight: 600; }
.nav-drop-btn.active { color: var(--accent); font-weight: 600; }
.nav-drop-menu a.active { color: var(--accent); font-weight: 600; }

/* Replace the "Light/Dark" word with a compact, minimal line icon to save
   space. Masked SVG so the glyph takes the theme's text color (monochrome, no
   emoji coloring). Dark mode shows a sun (click → light); light shows a moon. */

/* ========== MOBILE NAV (hamburger + dropdown), injected by v2-nav.js ========== */
.nav-burger { display: none; }
/* Light/dark toggle injected into the mobile menu by v2-nav.js. Hidden on
   desktop (the header toggle is used there); shown only inside the open menu. */

/* ========== EYEBROW / SECTION LABELS ========== */
.eyebrow {
  font-family: 'Oxygen Mono', monospace;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-block;
  margin-bottom: 24px;
}
.eyebrow.center { text-align: center; display: block; }

.section-label {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 36px;
}
.section-label .num {
  font-family: 'Oxygen Mono', monospace;
  font-size: 0.72rem;
  line-height: 1;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: 0.16em;
  flex-shrink: 0;
  white-space: nowrap;
}
.section-label .title {
  font-family: 'Oxygen Mono', monospace;
  font-size: 0.72rem;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

/* ========== HEADINGS ========== */
.h-1 {
  font-family: 'Oxygen', sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--fg);
  margin-bottom: 32px;
}
.h-1 .em { color: var(--accent); font-style: normal; }
.h-2 {
  font-family: 'Oxygen', sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--fg);
  margin-bottom: 24px;
}
.h-2 .em { color: var(--accent); }

.lede {
  font-family: 'Oxygen', sans-serif;
  font-weight: 300;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.5;
  color: var(--fg-2);
  max-width: 56ch;
}

/* ========== BUTTONS ========== */
.btn-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 40px; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 8px;
  font-family: 'Oxygen', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2px;
  text-decoration: none;
  transition: all 220ms ease;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn-primary {
  background: #5A5AF2;
  color: #fff;
  border-color: #5A5AF2;
}
.btn-primary:hover { transform: translateY(-1px); background: #4848e0; border-color: #4848e0; }
.btn-secondary {
  background: transparent;
  color: var(--fg);
  border-color: var(--line-2);
}
.btn-secondary:hover { border-color: var(--fg-3); background: var(--bg-soft); }
.btn .arrow { transition: transform 220ms ease; display: inline-block; }
.btn:hover .arrow { transform: translateX(3px); }

/* ========== SECTIONS ========== */
.section {
  padding: 72px 0;
  border-top: 1px solid var(--line);
  position: relative;
}

/* ========== HERO (product pages) ========== */
.product-hero {
  padding: 84px 0 48px;
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.product-hero .wordmark {
  height: 64px;
  width: auto;
  margin-bottom: 28px;
  filter: none;
}
.product-hero .wordmark.mask {
  display: block;
  height: 56px;
  width: 300px;
  background-color: var(--fg);
  -webkit-mask: var(--mask-img) no-repeat left center / contain;
          mask: var(--mask-img) no-repeat left center / contain;
}

/* ========== CARDS ========== */
.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 32px;
  transition: border-color 240ms ease, transform 240ms ease;
}
.card:hover { border-color: var(--line-3); transform: translateY(-2px); }
.card .card-title {
  font-family: 'Oxygen', sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  color: var(--fg);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.card .card-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-2);
}
.card-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* ========== SPEC TABLE ========== */
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table tr { border-bottom: 1px solid var(--line); }
.spec-table tr:last-child { border-bottom: none; }
.spec-table td { padding: 22px 0; vertical-align: top; }
.spec-table td:first-child {
  font-family: 'Oxygen Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--fg-3);
  width: 240px;
  white-space: nowrap;
}
.spec-table td:last-child {
  font-family: 'Oxygen', sans-serif;
  font-size: 17px;
  color: var(--fg);
  line-height: 1.55;
}

/* ========== MEDIA EMBED ========== */
.media {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-card);
  position: relative;
}
.media-16-9 { aspect-ratio: 16/9; }
.media iframe, .media video, .media img { width: 100%; height: 100%; display: block; object-fit: cover; border: none; }

/* ========== FAQ ========== */
/* Visible Q&A list paired with FAQPage JSON-LD on product pages. Plain semantic
   markup (no <details>/<summary>) so crawlers and LLMs can read the full text
   without expanding anything. */
/* ========== COOKIE CONSENT BANNER ========== */
/* Sticky bottom-left card injected by cookie-consent.js on first visit.
   Theme-aware via CSS variables so it works in both dark and light. */
.cookie-banner {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 9999;
  width: calc(100vw - 48px);
  max-width: 460px;
  padding: 20px 22px 18px;
  background: var(--bg-card);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.42);
  font-family: 'Oxygen', sans-serif;
  color: var(--fg);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 320ms ease, transform 320ms cubic-bezier(.22,.68,0,1);
}
.cookie-banner-out { opacity: 0; transform: translateY(20px); }
.cookie-banner-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-2);
  margin-bottom: 16px;
}
.cookie-banner-text a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-banner-text a:hover { opacity: 0.8; }
.cookie-banner-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.cookie-btn {
  font-family: 'Oxygen', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.4px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease, transform 200ms ease;
}
.cookie-btn:hover { transform: translateY(-1px); }
.cookie-btn-accept {
  background: var(--accent);
  color: #1a1a1a;
}
.cookie-btn-accept:hover { background: #4848e0; }
[data-theme="light"] .cookie-btn-accept { color: #fff; }
.cookie-btn-reject {
  background: transparent;
  color: var(--fg-2);
  border-color: var(--line-2);
}
.cookie-btn-reject:hover { color: var(--fg); border-color: var(--fg-3); }
@media (max-width: 560px) {
  .cookie-banner {
    left: 12px; right: 12px; bottom: 12px;
    width: auto; max-width: none;
    padding: 16px 18px 14px;
  }
  .cookie-banner-text { font-size: 13px; margin-bottom: 12px; }
  .cookie-btn { padding: 9px 14px; font-size: 11.5px; }
}

/* ========== FOOTER ========== */
.footer {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 72px max(32px, calc((100vw - 1240px) / 2)) 44px;
  border-top: 1px solid rgba(255,255,255,0.08);
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, #0a0a14 0%, #0e1117 100%);
  --fg: #ffffff;
  --fg-2: rgba(255,255,255,0.72);
  --fg-3: rgba(255,255,255,0.44);
  --line: rgba(255,255,255,0.08);
  --bg-soft: #131320;
}
.footer::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 120%, rgba(90,90,242,0.30) 0%, transparent 65%);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 52px;
  position: relative; z-index: 1;
}
.footer-col h4 {
  font-family: 'Oxygen Mono', monospace;
  font-size: 11px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 18px;
  font-weight: 400;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a {
  color: var(--fg-2);
  text-decoration: none;
  font-size: 14px;
  transition: color 200ms ease;
}
.footer-col a:hover { color: var(--fg); }
.footer-blurb {
  font-family: 'Oxygen', sans-serif;
  font-weight: 300;
  font-size: 15px;
  color: var(--fg-2);
  line-height: 1.6;
  max-width: 34ch;
  margin-top: 12px;
}

/* Left footer column: wordmark + tagline stacked, blurb beneath, copyright at base */
.footer-col-about { max-width: 36ch; }
.footer-mark {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}
.footer-mark-logo {
  display: block;
  width: 160px;
  height: 40px;
  background-color: var(--fg);
  -webkit-mask: url('OXMIQ-logo-white.png') no-repeat left center / contain;
          mask: url('OXMIQ-logo-white.png') no-repeat left center / contain;
  transition: background-color 320ms ease;
}
.footer-mark-tagline {
  margin-top: 6px;
  font-family: 'Oxygen Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--fg-3);
}
.footer-col-about .footer-blurb {
  margin-top: 0;
  max-width: 38ch;
}
.footer-wordmark {
  display: block;
  width: 100%;
  max-width: 900px;
  height: clamp(80px, 14vw, 200px);
  margin: 28px auto 20px;
  background-color: var(--fg);
  -webkit-mask: url('OXMIQ-logo-white.png') no-repeat center / contain;
          mask: url('OXMIQ-logo-white.png') no-repeat center / contain;
  transition: background-color 320ms ease;
}
.footer-wordmark-tagline {
  text-align: center;
  font-family: 'Oxygen Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--fg-3);
  margin: -8px auto 20px;
  width: 100%;
  max-width: 900px;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-family: 'Oxygen Mono', monospace;
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.5px;
}
.footer-bottom .links { display: flex; gap: 24px; }
.footer-bottom a { color: var(--fg-3); text-decoration: none; transition: color 200ms ease; }
.footer-bottom a:hover { color: var(--fg); }

/* ========== TAGLINE BLOCK ========== */
.tagline {
  padding: 88px 0;
  border-top: 1px solid var(--line);
  text-align: center;
}
.tagline-text {
  font-family: 'Oxygen', sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--fg);
  max-width: 22ch;
  margin: 0 auto;
}
.tagline-text .em { color: var(--accent); }

/* ========== SLIDESHOW ========== */

/* ========== HERO SPLIT (for index4) ========== */

/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
  .card-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 900px) {
  .wrap { padding: 0 24px; }
  .section { padding: 56px 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .card-grid-3 { grid-template-columns: 1fr; }
  .spec-table td { padding: 16px 0; display: block; width: 100% !important; white-space: normal; }
  .spec-table td:first-child { padding-bottom: 4px; }
  .spec-table tr { padding: 12px 0; display: block; }

  /* MOBILE NAV — hide desktop links, show hamburger + slide-down panel */
  .nav { padding: 14px 24px; }
  /* Reset the desktop -50px pull so the logo isn't dragged off the left edge
     where the nav padding is only 24px (was clipping the "O" in OXMIQ). */
  .nav-logo { margin-left: 0; }
  .nav-links {
    position: fixed;
    top: 82px; left: 0; right: 0;
    /* Override the desktop grid's justify-self:center, which would otherwise
       shrink-wrap this fixed panel to its content width and center it (~190px)
       instead of spanning the full viewport. */
    width: 100%;
    justify-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 24px 24px;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border-bottom: 1px solid var(--line);
    max-height: calc(100vh - 82px);
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
  }
  [data-theme="light"] .nav-links { background: rgba(255, 255, 255, 0.92); }
  .nav-links.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 220ms ease, transform 220ms ease, visibility 0s;
  }
  .nav-links a {
    padding: 14px 4px;
    font-size: 16px;
    border-bottom: 1px solid var(--line);
    color: var(--fg);
  }
  .nav-links a:last-child { border-bottom: 0; }
  /* The dark/light toggle BUTTON stays in the header on mobile (same as desktop).
     The in-menu .nav-theme-item stays hidden (base rule) — we keep just the
     header button to avoid two toggles. */
  /* Products dropdown inside mobile menu */
  .nav-drop-wrap {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .nav-drop-btn {
    width: 100%;
    padding: 14px 4px;
    font-size: 16px;
    color: var(--fg);
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
  }
  .nav-drop-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    min-width: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 6px 0 10px 18px;
    margin-left: -4px;
    border-left: 1px solid var(--line);
    transition: none;
    /* Mobile accordion: each dropdown is collapsed by default and expands only
       when its button is tapped (v2-nav.js toggles .open on the wrap). */
    display: none;
    flex-direction: column;
    gap: 0;
  }
  .nav-drop-wrap.open .nav-drop-menu { display: flex; }
  .nav-drop-menu::before { display: none; }
  /* CRITICAL: the rule above re-enables visibility/pointer-events on the dropdown
     submenus, which overrides the closed panel's visibility:hidden + pointer-events:none.
     The result was invisible-but-tappable submenu links floating over the top of every
     page (tapping "empty space" navigated to OxCapsule/Team/etc). Re-hide and disable
     them whenever the mobile menu is closed. */
  .nav-links:not(.open) .nav-drop-menu,
  .nav-links:not(.open) .nav-drop-menu a { visibility: hidden; pointer-events: none; }
  /* Accordion caret: points down when collapsed, rotates up when its dropdown opens. */
  .nav-drop-caret { transform: none; transition: transform 200ms ease; }
  .nav-drop-wrap.open .nav-drop-caret { transform: rotate(180deg); }
  /* Cancel the desktop :hover/:focus-within centering transform on mobile.
     Without this, a finger-tap triggers hover, the desktop rule re-applies
     translateX(-50%), and the menu slides left out of view. */
  .nav-drop-wrap:hover .nav-drop-menu,
  .nav-drop-wrap:focus-within .nav-drop-menu {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  /* Keep the parent caret rotation tied to the explicit .open state, not to
     :hover (which fires on touch and would rotate the caret unexpectedly). */
  .nav-drop-wrap:hover .nav-drop-caret,
  .nav-drop-wrap:focus-within .nav-drop-caret {
    transform: none;
  }
  .nav-drop-wrap.open .nav-drop-caret { transform: rotate(180deg); }
  .nav-drop-menu a {
    padding: 11px 8px;
    font-size: 15px;
    border-bottom: 0;
    color: var(--fg);
    opacity: 0.9;
  }
  .nav-drop-menu a:hover { opacity: 1; }
  /* Hamburger X (close state): keep the two bars centered so they form a proper X */
  .nav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  /* Hamburger */
  .nav-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    cursor: pointer;
    align-items: center;
    /* Push the hamburger + theme toggle together to the right (logo stays left)
       so the hamburger isn't floating in the middle of the bar. */
    margin-left: auto;
    margin-right: 10px;
  }
  .nav-burger span {
    display: block;
    width: 16px;
    height: 1.5px;
    background: var(--fg);
    transition: transform 200ms ease, opacity 200ms ease;
  }
  .nav-burger.open span:nth-child(2) { opacity: 0; }
}
/* Hamburger hidden on desktop */
@media (min-width: 901px) {
  .nav-burger { display: none; }
}
@media (max-width: 560px) {
  /* Mobile footer: About blurb spans the full width on top; Products / Company /
     Connect sit together in a single 3-column row beneath it. */
  /* The footer is full-bleed (width:100vw) with its own 32px side padding; keep
     that comfortable inset on mobile instead of shrinking it to the edges. */
  .footer { padding: 56px 32px 40px; }
  .footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 16px;
    row-gap: 32px;
    margin-bottom: 40px;
  }
  .footer-col { min-width: 0; }
  .footer-col-about { grid-column: 1 / -1; max-width: none; }
  .footer-blurb { margin-bottom: 4px; }
  .footer-col a { font-size: 13px; }
  .footer-col h4 { margin-bottom: 12px; font-size: 10px; letter-spacing: 1px; }
  .footer-col li { margin-bottom: 11px; }
  /* Stack the bottom row instead of cramming © + links into one cut-off line. */
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer-bottom .links { gap: 18px; flex-wrap: wrap; }
  .footer-wordmark { height: clamp(44px, 16vw, 80px); margin: 24px auto 18px; }
  .nav { padding-top: 18px; }
  .nav-logo { width: 88px; height: 20px; }
  .product-hero { padding: 48px 0 32px; }
  .tagline { padding: 72px 0; }
  .btn { padding: 12px 20px; font-size: 13px; }
}

/* ========== ARTICLE (blog post) ========== */
.article-cover {
  width: 100%;
  margin-top: 32px;
  border-radius: 24px;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--line);
  max-height: 540px;
  aspect-ratio: 16/9;
  position: relative;
}
.article-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.article-header {
  max-width: 760px;
  margin: 56px auto 0;
}
.article-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Oxygen Mono', monospace;
  font-size: 11px; letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--fg-3);
  text-decoration: none;
  transition: color 200ms ease;
  margin-bottom: 32px;
}
.article-back:hover { color: var(--accent); }
.article-tag {
  display: inline-block;
  font-family: 'Oxygen Mono', monospace;
  font-size: 10px; text-transform: uppercase; letter-spacing: 2px;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--fg-2);
  margin-bottom: 20px;
}
.article-tag.tag-announcement { color: var(--accent); border-color: var(--accent); }
.article-tag.tag-product { color: var(--accent-2); border-color: var(--accent-2); }
.article-title {
  font-family: 'Oxygen', sans-serif;
  font-weight: 300;
  font-size: clamp(32px, 4.8vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--fg);
  margin-bottom: 20px;
}
.article-meta {
  font-family: 'Oxygen Mono', monospace;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--fg-3);
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 48px;
}
.article-body {
  max-width: 720px;
  margin: 0 auto 64px;
  font-family: 'Oxygen', sans-serif;
}
.article-body p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--fg);
  margin-bottom: 26px;
}
.article-body p em { color: var(--fg-2); }
.article-body h2 {
  font-family: 'Oxygen', sans-serif;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.015em;
  color: var(--fg);
  margin: 56px 0 18px;
  line-height: 1.2;
}
.article-body h3 {
  font-family: 'Oxygen', sans-serif;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0;
  color: var(--fg);
  margin: 36px 0 12px;
}
.article-body ul,
.article-body ol {
  margin: 0 0 28px 24px;
  padding: 0;
}
.article-body li {
  font-size: 17px;
  line-height: 1.7;
  color: var(--fg);
  margin-bottom: 10px;
}
.article-body strong { color: var(--fg); font-weight: 500; }
.article-body a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.article-body a:hover { text-decoration-thickness: 2px; }
.article-body .btn { text-decoration: none; }
.article-body .btn:hover { text-decoration: none; }
[data-theme="light"] .article-body .btn-primary { color: #fff; }
.article-body blockquote {
  margin: 32px 0;
  padding: 18px 0 18px 28px;
  border-left: 2px solid var(--accent);
  background: transparent;
}
.article-body blockquote p {
  font-size: 19px;
  line-height: 1.55;
  color: var(--fg);
  margin: 0;
}
.article-body blockquote p + p {
  margin-top: 12px;
  font-family: 'Oxygen Mono', monospace;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--fg-3);
}
.article-body code {
  font-family: 'Oxygen Mono', monospace;
  font-size: 14px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  padding: 2px 8px;
  border-radius: 6px;
  color: var(--accent);
}
.article-body pre {
  font-family: 'Oxygen Mono', monospace;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 26px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--fg);
  overflow-x: auto;
  margin: 0 0 28px;
  white-space: pre;
}
.article-body .spec-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 28px;
  font-family: 'Oxygen', sans-serif;
}
.article-body .spec-table td {
  padding: 14px 0;
  font-size: 15px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.article-body .spec-table td:first-child {
  font-family: 'Oxygen Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--fg-3);
  width: 200px;
  white-space: nowrap;
}
.article-body .spec-table td:last-child { color: var(--fg); }
.article-body img,
.article-body figure img {
  width: 100%; height: auto;
  border-radius: 16px;
  display: block;
  margin: 32px 0;
  border: 1px solid var(--line);
}
.article-cta {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
@media (max-width: 720px) {
  .article-header { padding: 0 4px; }
  .article-cover { border-radius: 16px; aspect-ratio: 3/2; }
}

/* ============ CALLOUT GRID (Talk to Engineer / Join Community) ============ */
.section-bloom { position: relative; isolation: isolate; }
.section-bloom::before {
  content: ''; position: absolute;
  top: 0; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(232,155,92,0.12) 0%, transparent 70%),
    var(--bg-soft);
}
[data-theme="light"] .section-bloom::before {
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(168,48,44,0.08) 0%, transparent 70%),
    var(--bg-soft);
}
.callout-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  margin-top: 44px; margin-bottom: 44px;
}
@media (max-width: 800px) { .callout-grid { grid-template-columns: 1fr; } }
.callout-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .callout-grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .callout-grid-3 { grid-template-columns: 1fr; } }
.callout-card {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 18px; padding: 36px 32px;
}
.callout-eyebrow {
  font-family: 'Oxygen Mono', monospace; font-size: 11px;
  text-transform: uppercase; letter-spacing: 2px;
  color: var(--accent); margin-bottom: 10px;
}
.callout-title {
  font-family: 'Oxygen', sans-serif; font-size: 22px;
  color: var(--fg); letter-spacing: -0.01em; margin-bottom: 10px;
}
.callout-body {
  font-size: 14px; color: var(--fg-2); line-height: 1.7; margin-bottom: 24px;
}

/* ==========================================================================
   SHARED CONTENT COMPONENTS
   Blog/post cards, featured posts, tags, article figures, two-column sections,
   and the video demo modal. Consolidated here from per-page inline <style>
   blocks (blog/index/media/about/oxcore/oxcapsule/oxquilt) so there is one
   source of truth. Pages may still add small per-page overrides inline.
   ========================================================================== */

/* Post tags */
.post-tag {
  display: inline-block;
  font-family: 'Oxygen Mono', monospace;
  font-size: 10px; font-weight: 400;
  text-transform: uppercase; letter-spacing: 2px;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--fg-2);
  margin-bottom: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
.post-tag.tag-announcement { color: var(--accent); border-color: var(--accent); }
.post-tag.tag-product      { color: var(--accent-2); border-color: var(--accent-2); }

/* Featured post (hero card) */
.featured-post {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 240ms ease, transform 240ms ease;
  margin-bottom: 56px;
}
.featured-post:hover { border-color: var(--line-3); transform: translateY(-2px); }
.featured-post .img {
  width: 100%; height: 100%;
  min-height: 360px;
  object-fit: cover;
  display: block;
}
.featured-post .body {
  padding: 56px 48px;
  display: flex; flex-direction: column; justify-content: center;
}
.featured-post .title {
  font-family: 'Oxygen', sans-serif;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.2;
  color: var(--fg);
  letter-spacing: -0.015em;
  margin-bottom: 18px;
}
.featured-post .desc {
  font-size: 15px; line-height: 1.65;
  color: var(--fg-2);
  margin-bottom: 24px;
}
.post-meta {
  font-family: 'Oxygen Mono', monospace;
  font-size: 11px; letter-spacing: 1px;
  color: var(--fg-3);
}
@media (max-width: 900px) {
  .featured-post { grid-template-columns: 1fr; }
  .featured-post .img { min-height: 0; height: auto; max-height: 260px; width: 100%; object-position: center top; }
  .featured-post .body { padding: 32px 28px; }
}

/* Post grid + cards */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1024px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .post-grid { grid-template-columns: 1fr; } }
.post-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: border-color 240ms ease, transform 240ms ease;
}
.post-card:hover { border-color: var(--line-3); transform: translateY(-3px); }
.post-card .img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.post-card .body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.post-card .title {
  font-family: 'Oxygen', sans-serif;
  font-size: 18px; line-height: 1.3;
  color: var(--fg);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  flex: 1;
}
.post-card .desc { font-size: 13px; line-height: 1.6; color: var(--fg-2); margin-bottom: 18px; }
.post-card .foot { margin-top: auto; }

/* Demo cards — reuse .post-card styling but open a YouTube modal on click
   instead of navigating, with a play-button overlay on the thumbnail. */
.demo-post { cursor: pointer; }
.demo-post .thumb { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; background: #000; }
.demo-post .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.demo-post .thumb .play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.28); transition: background 200ms ease;
}
.demo-post:hover .thumb .play { background: rgba(0,0,0,0.12); }
.demo-post .thumb .play .ring {
  width: 52px; height: 52px; border-radius: 999px;
  background: rgba(255,255,255,0.18); border: 1.5px solid #fff;
  display: flex; align-items: center; justify-content: center; color: #fff;
}

/* Video modal */
.demo-modal {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.85);
  display: none; align-items: center; justify-content: center;
  padding: 24px;
}
.demo-modal.open { display: flex; }
.demo-modal .frame { width: min(960px, 90vw); position: relative; }
.demo-modal .close {
  position: absolute; top: -38px; right: 0;
  background: transparent; border: 0; color: #fff;
  font-size: 14px; font-family: 'Oxygen Mono', monospace;
  cursor: pointer; opacity: 0.8;
}
.demo-modal .copy-link {
  position: absolute; top: -38px; left: 0;
  background: transparent; border: 0; color: #fff;
  font-size: 14px; font-family: 'Oxygen Mono', monospace;
  cursor: pointer; opacity: 0.8; transition: opacity 150ms ease;
}
.demo-modal .copy-link:hover { opacity: 1; }
.demo-modal .copy-link[hidden] { display: none; }
.demo-modal .player { aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; background: #000; }
.demo-modal .player iframe { width: 100%; height: 100%; border: 0; }
.demo-modal .title { margin-top: 14px; text-align: center; color: #fff; font-family: 'Oxygen', sans-serif; font-size: 16px; }

/* Article figures (blog posts) */
.article-figure { margin: 48px 0; }
.article-figure img {
  width: 100%; height: auto;
  border-radius: 14px;
  display: block;
  border: 1px solid var(--line);
}
.article-figure figcaption {
  font-family: 'Oxygen Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: 10px;
  text-align: center;
}

/* Two-column section (copy + media), used on product pages */
.section-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 64px;
  align-items: center;
}
.arch-copy { min-width: 0; }
.arch-video { min-width: 0; }
.arch-video video { width: 100%; display: block; border-radius: 12px; }
@media (max-width: 900px) {
  .section-two-col { grid-template-columns: 1fr; gap: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}