/* ============================================================
   MAROSA SmartRoaster - Global Theme CSS
   Stack: DaisyUI + Tailwind CSS + CSS Custom Properties
   ============================================================ */

/* --- 1. Custom DaisyUI Theme Definition ---
   Overrides the built-in "dark" theme with MAROSA brand tokens.
   These feed directly into DaisyUI component classes.
   ----------------------------------------------------------- */
html[data-theme="marosa"] {
  /* DaisyUI Semantic Colors - boosted for higher contrast */
  --p: 174 85% 45%;
  /* primary: Teal - brighter */
  --pf: 174 85% 35%;
  /* primary-focus */
  --pc: 0 0% 100%;
  /* primary-content */

  --s: 142 70% 48%;
  /* secondary: Emerald - brighter */
  --sf: 142 70% 36%;
  --sc: 0 0% 100%;

  --a: 28 95% 62%;
  /* accent: Warm Orange - brighter */
  --af: 28 95% 48%;
  --ac: 0 0% 100%;

  --n: 220 14% 12%;
  /* neutral */
  --nf: 220 14% 8%;
  --nc: 220 15% 85%;
  /* neutral-content: much brighter */

  --b1: 222 22% 6%;
  /* base-100: background */
  --b2: 222 22% 10%;
  /* base-200 - clearly separable */
  --b3: 222 22% 14%;
  /* base-300 - visible on b2 */
  --bc: 220 15% 90%;
  /* base-content: near-white for max readability */

  --in: 210 90% 65%;
  /* info - brighter */
  --su: 142 71% 52%;
  /* success */
  --wa: 38 90% 62%;
  /* warning */
  --er: 0 85% 62%;
  /* error */

  --rounded-box: 1.25rem;
  --rounded-btn: 9999px;
  --rounded-badge: 9999px;
  --animation-btn: 0.2s;
  --animation-input: 0.2s;
  --btn-focus-scale: 0.97;
  --border-btn: 1px;
  --tab-border: 1px;
  --tab-radius: 0.75rem;

  --text-strong: hsl(220, 15%, 96%);
  --text-main: hsl(220, 15%, 82%);
  --text-muted: hsl(220, 12%, 68%);
  --text-subtle: hsl(220, 10%, 54%);
  --text-meta: hsl(220, 12%, 70%);
  --text-danger: hsl(0, 85%, 70%);
  --text-inverse: hsl(222, 25%, 10%);

  --accent: hsl(152, 85%, 55%);
  --accent-strong: hsl(152, 85%, 72%);
  --accent-line: rgba(45, 212, 191, 0.32);
  --accent-muted: rgba(90, 175, 135, 0.12);

  --card-bg: rgba(255, 255, 255, 0.052);
  --card-border: rgba(255, 255, 255, 0.12);
  --card-shadow: 0 20px 54px rgba(0, 0, 0, 0.28);
  --card-highlight-bg: linear-gradient(145deg, rgba(90, 175, 135, 0.13), rgba(255, 255, 255, 0.045));
  --card-danger-bg: rgba(251, 113, 133, 0.055);
  --card-danger-border: rgba(251, 113, 133, 0.22);
}

html[data-theme="marosa-light"] {
  --p: 174 66% 36%;
  --pf: 174 66% 30%;
  --pc: 0 0% 100%;

  --s: 184 72% 35%;
  --sf: 184 72% 29%;
  --sc: 0 0% 100%;

  --a: 35 92% 48%;
  --af: 35 92% 40%;
  --ac: 222 28% 12%;

  --n: 222 20% 16%;
  --nf: 222 20% 10%;
  --nc: 210 20% 96%;

  --b1: 42 32% 97%;
  --b2: 42 28% 93%;
  --b3: 42 20% 87%;
  --bc: 222 28% 13%;

  --in: 203 84% 44%;
  --su: 142 56% 39%;
  --wa: 38 89% 48%;
  --er: 0 78% 55%;

  --rounded-box: 1.25rem;
  --rounded-btn: 9999px;
  --rounded-badge: 9999px;
  --animation-btn: 0.2s;
  --animation-input: 0.2s;
  --btn-focus-scale: 0.97;
  --border-btn: 1px;
  --tab-border: 1px;
  --tab-radius: 0.75rem;

  --text-strong: hsl(222, 33%, 11%);
  --text-main: hsl(222, 19%, 29%);
  --text-muted: hsl(218, 19%, 33%);
  /* L3 bump from 43% → 33% for AAA on small/uppercase metadata */
  --text-subtle: hsl(215, 17%, 40%);
  /* L3 bump from 55% → 40% to clear AA on 14px body */
  --text-meta: hsl(218, 22%, 30%);
  --text-danger: hsl(0, 72%, 45%);
  --text-inverse: #ffffff;

  --accent: hsl(152, 78%, 28%);
  --accent-strong: hsl(152, 80%, 22%);
  --accent-line: rgba(59, 128, 97, 0.55);
  --accent-muted: rgba(59, 128, 97, 0.10);

  --card-bg: rgba(255, 255, 255, 0.9);
  --card-border: rgba(15, 23, 42, 0.12);
  --card-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
  --card-highlight-bg: linear-gradient(145deg, rgba(59, 128, 97, 0.11), rgba(255, 255, 255, 0.94));
  --card-danger-bg: rgba(220, 38, 38, 0.055);
  --card-danger-border: rgba(220, 38, 38, 0.16);
}

/* --- 2. CSS Custom Properties (Design Tokens) ---
   These tokens are referenced throughout the stylesheet.
   ----------------------------------------------------------- */
:root {
  /* Brand Palette - vivid, high-contrast values */
  --clr-teal-100: hsl(152, 85%, 92%);
  --clr-teal-300: hsl(152, 85%, 72%);
  --clr-teal-400: hsl(152, 85%, 55%);
  /* primary - was 50% */
  --clr-teal-500: hsl(152, 85%, 44%);
  --clr-teal-600: hsl(152, 85%, 34%);

  --clr-emerald-400: hsl(142, 70%, 60%);
  --clr-emerald-500: hsl(142, 70%, 50%);

  --clr-orange-400: hsl(28, 95%, 65%);
  --clr-rose-400: hsl(0, 85%, 70%);
  --clr-blue-400: hsl(210, 90%, 72%);
  --clr-purple-400: hsl(270, 75%, 76%);

  /* Glassmorphism - more opaque + visible border */
  --glass-bg: rgba(255, 255, 255, 0.065);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
  --glass-blur: 16px;

  /* Glow Effects */
  --glow-teal: 0 0 80px rgba(90, 175, 135, 0.25);
  --glow-orange: 0 0 80px rgba(249, 115, 22, 0.15);

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;

  /* Spacing */
  --section-gap: 6rem;
  --card-radius: 1.5rem;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.6s ease;

  --surface-soft: rgba(255, 255, 255, 0.052);
  --surface-strong: rgba(255, 255, 255, 0.082);
  --line-soft: rgba(255, 255, 255, 0.11);

  --text-strong: hsl(220, 15%, 96%);
  --text-main: hsl(220, 15%, 82%);
  --text-muted: hsl(220, 12%, 68%);
  --text-subtle: hsl(220, 10%, 54%);
  --text-meta: hsl(220, 12%, 70%);
  --text-danger: hsl(0, 85%, 70%);
  --text-inverse: hsl(222, 25%, 10%);

  --accent: hsl(152, 85%, 55%);
  --accent-strong: hsl(152, 85%, 72%);
  --accent-line: rgba(45, 212, 191, 0.32);
  --accent-muted: rgba(90, 175, 135, 0.12);

  --card-bg: rgba(255, 255, 255, 0.052);
  --card-border: rgba(255, 255, 255, 0.12);
  --card-shadow: 0 20px 54px rgba(0, 0, 0, 0.28);
  --card-highlight-bg: linear-gradient(145deg, rgba(90, 175, 135, 0.13), rgba(255, 255, 255, 0.045));
  --card-danger-bg: rgba(251, 113, 133, 0.055);
  --card-danger-border: rgba(251, 113, 133, 0.22);
}

/* --- 3. Base Resets ---
   ----------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.25rem;
}

section[id],
#control-chart,
#contact,
#safety {
  scroll-margin-top: 5.25rem;
}

body {
  font-family: var(--font-sans);
  background-color: hsl(222, 20%, 5%);
  background-image:
    radial-gradient(at 0% 0%, rgba(90, 175, 135, 0.12) 0px, transparent 55%),
    radial-gradient(at 100% 50%, rgba(90, 175, 135, 0.07) 0px, transparent 55%),
    radial-gradient(at 100% 100%, rgba(249, 115, 22, 0.08) 0px, transparent 55%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Force light text globally - overrides DaisyUI/Tailwind base resets */
  color: hsl(220, 15%, 90%);
}

/* ============================================================
   3.5. EXPLICIT LIGHT TEXT OVERRIDES
   DaisyUI + Tailwind base layer injects color: #1f2937 (dark)
   on many elements. These rules explicitly force light colors
   with maximum specificity to override those resets.
   ============================================================ */

/* Global paragraph, span, small, li text */
[data-theme="marosa"] p,
[data-theme="marosa"] span:not(.badge):not([class*="badge"]),
[data-theme="marosa"] small,
[data-theme="marosa"] li {
  color: inherit;
}

/* Force all text inside cards/sections to be light */
[data-theme="marosa"] .feature-card *,
[data-theme="marosa"] .app-feature-card *,
[data-theme="marosa"] .card * {
  color: inherit;
}

/* Feature card paragraphs - explicitly light gray */
[data-theme="marosa"] .feature-card p {
  color: hsl(220, 15%, 80%) !important;
}

/* App feature card paragraphs */
[data-theme="marosa"] .app-feature-card p {
  color: hsl(220, 15%, 80%) !important;
}

/* Safety cards (DaisyUI .card) */
[data-theme="marosa"] .card>p,
[data-theme="marosa"] .card p {
  color: hsl(220, 15%, 80%) !important;
}

/* Stats component */
[data-theme="marosa"] .stat-title {
  color: hsl(220, 15%, 75%) !important;
}

[data-theme="marosa"] .stat-desc {
  color: hsl(220, 15%, 68%) !important;
}

/* Timeline end text */
[data-theme="marosa"] .timeline-end {
  color: hsl(220, 15%, 80%) !important;
}

/* Section descriptive paragraphs (direct children of section wrappers) */
[data-theme="marosa"] section p:not(.feature-card p):not(.app-feature-card p) {
  color: hsl(220, 15%, 82%);
}

/* Hero badge text - keep teal */
[data-theme="marosa"] .hero-badge {
  color: hsl(152, 85%, 72%) !important;
}

/* Nav links - bright */
[data-theme="marosa"] .nav-link {
  color: hsl(220, 15%, 85%) !important;
}

/* Badge ghost - light text so it's readable */
[data-theme="marosa"] .badge-ghost {
  color: hsl(220, 15%, 80%) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Footer copyright */
[data-theme="marosa"] #footer p {
  color: hsl(220, 15%, 62%) !important;
}

/* Footer social icons */
[data-theme="marosa"] .footer-social a {
  color: hsl(220, 15%, 60%) !important;
}

/* Error alert description text */
[data-theme="marosa"] .alert p,
[data-theme="marosa"] .alert div:not([class*="font-semibold"]) {
  color: hsl(0, 85%, 80%) !important;
}

/* DaisyUI menu links in mobile nav */
[data-theme="marosa"] .menu a {
  color: hsl(220, 15%, 82%) !important;
}

/* Timeline box labels */
[data-theme="marosa"] .timeline-box {
  color: #fff !important;
}

/* Progress bar track should be subtle */
[data-theme="marosa"] .progress {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* ============================================================
   3.6. BUTTON TEXT CONTRAST FIXES
   body color is forced near-white, so buttons with LIGHT
   backgrounds need explicit DARK text to stay readable.
   ============================================================ */

/* White bg CTA button ? must be DARK text */
[data-theme="marosa"] .btn.bg-white {
  color: hsl(222, 25%, 10%) !important;
}

[data-theme="marosa"] .btn.bg-white *,
[data-theme="marosa"] .btn.bg-white svg,
[data-theme="marosa"] .btn.bg-white i {
  color: hsl(222, 25%, 10%) !important;
  stroke: hsl(222, 25%, 10%) !important;
}

[data-theme="marosa"] .btn.bg-white:hover {
  color: hsl(222, 25%, 18%) !important;
}

/* Ghost / outline buttons ? keep bright text */
[data-theme="marosa"] .btn-ghost {
  color: hsl(220, 15%, 88%) !important;
}

[data-theme="marosa"] .btn-outline {
  color: hsl(220, 15%, 88%) !important;
}

[data-theme="marosa"] .btn-outline.btn-primary {
  color: var(--clr-teal-300) !important;
  border-color: hsl(152, 85%, 40%) !important;
}

[data-theme="marosa"] .btn-outline.btn-primary:hover {
  color: #fff !important;
  background-color: hsl(152, 85%, 40%) !important;
}

/* Primary button always white text + icon */
[data-theme="marosa"] .btn-primary {
  color: #fff !important;
}

[data-theme="marosa"] .btn-primary svg,
[data-theme="marosa"] .btn-primary i {
  color: #fff !important;
  stroke: #fff !important;
}

/* Success / error small buttons in mockup */
[data-theme="marosa"] .btn-success {
  color: #fff !important;
}

[data-theme="marosa"] .btn-error {
  color: #fff !important;
}

/* --- 4. Utility Classes ---
   ----------------------------------------------------------- */

.text-strong {
  color: var(--text-strong) !important;
}

.text-main {
  color: var(--text-main) !important;
}

.text-muted {
  color: var(--text-muted) !important;
}

.text-subtle {
  color: var(--text-subtle) !important;
}

.text-danger {
  color: var(--text-danger) !important;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 120;
  transform: translateY(-160%);
  padding: 0.75rem 1rem;
  border-radius: 999px;
  background: var(--clr-teal-400);
  color: hsl(222, 25%, 10%);
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  transition: transform 160ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#main-content:focus {
  outline: none;
}

/* Glass Panel (Glassmorphism) */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/* Gradient Text */
.text-gradient {
  background: linear-gradient(135deg, var(--clr-teal-400), var(--clr-emerald-400));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.text-gradient-warm {
  background: linear-gradient(135deg, var(--clr-orange-400), var(--clr-rose-400));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Gradient Borders */
.gradient-border {
  position: relative;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--clr-teal-400), transparent 60%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* --- 5. Layout & Sections ---
   ----------------------------------------------------------- */
.section {
  position: relative;
  padding-top: var(--section-gap);
  padding-bottom: var(--section-gap);
  overflow: hidden;
}

.section>.max-w-7xl,
.section>.max-w-4xl,
.section>.max-w-3xl {
  position: relative;
  z-index: 1;
}

.section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 8%, rgba(90, 175, 135, 0.08), transparent 30rem),
    radial-gradient(circle at 92% 78%, rgba(249, 115, 22, 0.06), transparent 28rem);
  opacity: 0.7;
}

@media (max-width: 640px) {
  :root {
    --section-gap: 4.5rem;
  }

  section[id],
  #control-chart,
  #contact,
  #safety {
    scroll-margin-top: 4.75rem;
  }

  html {
    scroll-padding-top: 4.75rem;
  }
}

.section-dark {
  background-color: rgba(0, 0, 0, 0.46);
  position: relative;
}
/* Feather edges — soft gradient fade at top + bottom of dark sections
   instead of hard 1px borders, so adjacent sections blend visually */
.section-dark::before,
.section-dark::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 60px;
  pointer-events: none;
  z-index: 0;
}
.section-dark::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.50), transparent);
}
.section-dark::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.50), transparent);
}
.section-dark > * { position: relative; z-index: 1; }

html[data-theme="marosa-light"] .section-dark::before {
  background: linear-gradient(to bottom, rgba(15, 23, 42, 0.04), transparent);
}
html[data-theme="marosa-light"] .section-dark::after {
  background: linear-gradient(to top, rgba(15, 23, 42, 0.04), transparent);
}

/* Hero — extra soft bottom fade so mockup card transitions smoothly into
   the next section instead of meeting a hard horizontal page band */
#hero { position: relative; isolation: isolate; }
#hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.45) 100%);
  pointer-events: none;
  z-index: 0;
}
html[data-theme="marosa-light"] #hero::after {
  background: linear-gradient(to bottom, transparent 0%, rgba(15, 23, 42, 0.04) 100%);
}

/* --- 6. Navigation ---
   ----------------------------------------------------------- */
#navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 50;
  transition: background var(--transition-normal),
    box-shadow var(--transition-normal),
    backdrop-filter var(--transition-normal);
  background: rgba(7, 10, 12, 0.9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

#navbar.scrolled {
  background: rgba(7, 10, 12, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 var(--glass-border);
}

.nav-logo-icon {
  width: 2.5rem;
  height: 2.5rem;
  background: linear-gradient(135deg, var(--clr-teal-400), var(--clr-emerald-500));
  border-radius: 0.75rem;
  box-shadow: 0 0 20px rgba(90, 175, 135, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-normal);
}

.nav-logo-icon:hover {
  transform: rotate(-5deg) scale(1.1);
}

.nav-link {
  color: hsl(220, 15%, 82%);
  /* was 65% - now clearly visible */
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--transition-fast);
  position: relative;
  padding-bottom: 2px;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--clr-teal-400);
  transition: width var(--transition-normal);
}

.nav-link:hover {
  color: #fff;
}

.nav-link:hover::after {
  width: 100%;
}

/* --- 7. Hero Section ---
   ----------------------------------------------------------- */
#hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 6rem;
  padding-bottom: 4rem;
  position: relative;
  overflow: hidden;
}

/* MAROSA hero strip — 9-color heat/phase spectrum divider */
.hero-strip {
  display: flex;
  width: 100%;
  height: 6px;
}
.hero-strip span { flex: 1; }

/* Display voice — Stick No Bills brand wordmark (basic-Latin only; VN headline stays Inter) */
/* The wordmark is a <p> inside #hero, so the mobile rule
   `@media (max-width:640px) { #hero p { font-size: 1rem !important } }` used to flatten
   it to 16px and clip it to 22rem. That rule now excludes .hero-wordmark; the clamp
   below is what sizes it at every width. */
#hero .hero-wordmark {
  font-family: "Stick No Bills", var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 5.4vw, 3.6rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1;
  margin: 0 0 1.1rem;
  color: var(--accent-strong);
}

.hero-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 700px;
  background: rgba(90, 175, 135, 0.20); /* MAROSA brand green glow (#5AAF87) */
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
  animation: glowPulse 6s ease-in-out infinite;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 1rem;
  border-radius: 9999px;
  background: rgba(90, 175, 135, 0.1);
  border: 1px solid rgba(90, 175, 135, 0.3);
  color: var(--clr-teal-300);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 2rem;
}

.hero-mockup {
  animation: floatY 6s ease-in-out infinite;
  position: relative;
}

.hero-mockup-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, hsl(222, 20%, 5%) 0%, transparent 60%);
  transform: translateY(4rem);
  pointer-events: none;
  border-radius: 1.5rem;
}

@media (max-width: 640px) {
  #hero {
    min-height: auto;
    justify-content: flex-start;
    padding-top: 5.5rem;
    padding-bottom: 3rem;
  }

  #hero>.max-w-7xl {
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
  }

  #hero h1 {
    max-width: 100%;
    font-size: 2.65rem !important;
    line-height: 1.08 !important;
  }

  #hero p:not(.hero-wordmark) {
    max-width: 22rem;
    font-size: 1rem !important;
  }

  .hero-badge {
    max-width: calc(100vw - 2rem);
    justify-content: center;
    white-space: normal;
  }

  #hero .btn {
    width: 100%;
    max-width: 22rem;
    min-height: 3.75rem;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    white-space: normal;
  }

  .hero-mockup {
    height: 18rem;
    margin-top: 4rem !important;
    max-width: calc(100vw - 2rem);
    overflow: hidden;
  }

  .hero-mockup>.glass-panel {
    position: absolute;
    left: 50%;
    width: 46rem;
    transform: translateX(-50%) scale(0.48);
    transform-origin: top center;
  }
}

/* --- 8. Feature Cards ---
   ----------------------------------------------------------- */
.feature-card {
  min-height: 17.5rem;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr;
  column-gap: 1rem;
  row-gap: 0.9rem;
  align-content: start;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.035);
  /* slightly brighter panel */
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--card-radius);
  padding: 1.75rem;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
  transition: transform var(--transition-normal),
    border-color var(--transition-normal),
    box-shadow var(--transition-normal);
}

.feature-card > h3 {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin: 0 !important;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.feature-card p {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0 0 0.25rem;
}

.feature-card > .feature-viz {
  grid-column: 1 / -1;
  grid-row: 3;
  align-self: start;
}

.feature-card > .mt-4 {
  grid-column: 1 / -1;
  grid-row: 4;
  align-self: end;
  margin-top: 0 !important;
}

.feature-card .badge {
  align-self: flex-start;
}

.feature-card:hover {
  transform: translateY(-8px);
  border-color: rgba(45, 212, 191, 0.4);
  /* teal glow on hover */
  box-shadow: 0 0 40px rgba(90, 175, 135, 0.2), 0 25px 60px rgba(0, 0, 0, 0.5);
}

.feature-icon-wrap {
  grid-column: 1;
  grid-row: 1;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  transition: transform var(--transition-normal);
}

.feature-card:hover .feature-icon-wrap {
  transform: scale(1.15);
}

/* Feature-specific icon wrap colors. Color applies to the inner <i>/<svg>. */
.icon-teal {
  background: rgba(90, 175, 135, 0.12);
  color: var(--clr-teal-400);
}

.icon-emerald {
  background: rgba(52, 211, 153, 0.12);
  color: var(--clr-emerald-400);
}

.icon-orange {
  background: rgba(249, 115, 22, 0.12);
  color: var(--clr-orange-400);
}

.icon-blue {
  background: rgba(96, 165, 250, 0.12);
  color: var(--clr-blue-400);
}

.icon-rose {
  background: rgba(251, 113, 133, 0.12);
  color: var(--clr-rose-400);
}

.icon-purple {
  background: rgba(167, 139, 250, 0.12);
  color: var(--clr-purple-400);
}

/* Light theme: keep icon hue but darken color so it contrasts white-ish bg */
html[data-theme="marosa-light"] .icon-teal { color: var(--accent); }
html[data-theme="marosa-light"] .icon-emerald { color: hsl(142, 55%, 28%); }
html[data-theme="marosa-light"] .icon-orange { color: hsl(28, 78%, 32%); }
html[data-theme="marosa-light"] .icon-blue { color: hsl(210, 75%, 36%); }
html[data-theme="marosa-light"] .icon-rose { color: hsl(0, 65%, 38%); }
html[data-theme="marosa-light"] .icon-purple { color: hsl(263, 60%, 38%); }

/* --- 9. Control Chart ---
   ----------------------------------------------------------- */
.control-chart-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.045)),
    linear-gradient(135deg, rgba(90, 175, 135, 0.045), rgba(249, 115, 22, 0.035));
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.13);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.control-layout {
  align-items: center;
}

#control .timeline.timeline-vertical {
  display: grid;
  gap: 0.9rem;
}

#control .timeline li {
  display: grid;
  grid-template-columns: minmax(7.5rem, 9rem) 1.6rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  min-height: 0;
}

#control .timeline li::before,
#control .timeline li::after {
  display: none;
}

#control .timeline-start,
#control .timeline-end,
#control .timeline-middle {
  margin: 0 !important;
}

#control .timeline-start {
  justify-self: end;
  min-width: 7.4rem;
  text-align: center;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.035) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}

#control .timeline-end {
  max-width: 24rem;
  line-height: 1.45;
}

.control-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.control-chart-kicker {
  margin: 0 0 0.25rem;
  color: var(--clr-teal-300);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.control-chart-title {
  margin: 0;
  color: white;
  font-size: 1.05rem;
  font-weight: 800;
}

.control-chart-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  padding: 0.45rem 0.75rem;
  border: 1px solid rgba(45, 212, 191, 0.28);
  border-radius: 9999px;
  background: rgba(90, 175, 135, 0.10);
  color: var(--clr-teal-300);
  font-size: 0.78rem;
  font-weight: 700;
}

.control-chart-body {
  padding: 1.25rem 1.35rem 1.5rem;
}

.comparison-showcase {
  display: grid;
  gap: 1rem;
}

.comparison-column,
.comparison-result {
  border: 1px solid var(--line-soft);
  background: var(--surface-soft);
  border-radius: 1.1rem;
}

.comparison-showcase {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
}

.comparison-column {
  padding: 1rem;
  min-height: 18rem;
}

.comparison-column.manual {
  background:
    linear-gradient(135deg, rgba(251, 113, 133, 0.11), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.05);
}

.comparison-column.autopilot {
  background:
    linear-gradient(135deg, rgba(45, 212, 191, 0.12), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.055);
}

.comparison-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.manual .comparison-label {
  color: hsl(0, 85%, 76%);
}

.autopilot .comparison-label {
  color: var(--clr-teal-300);
}

.comparison-column h4 {
  margin: 0;
  color: white;
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.25;
  min-height: 2.65rem;
}

.mini-workflow {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.mini-workflow div {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.82rem;
  font-weight: 800;
}

.mini-workflow span {
  display: inline-flex;
  width: 1.55rem;
  height: 1.55rem;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 9999px;
  color: white !important;
  font-size: 0.72rem;
  font-weight: 950;
}

.manual .mini-workflow span {
  background: rgba(251, 113, 133, 0.26);
  border: 1px solid rgba(251, 113, 133, 0.38);
}

.autopilot .mini-workflow span {
  background: rgba(90, 175, 135, 0.26);
  border: 1px solid rgba(45, 212, 191, 0.38);
}

.comparison-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.comparison-tags span {
  padding: 0.35rem 0.55rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.11);
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.68rem;
  font-weight: 850;
}

.comparison-divider {
  display: flex;
  align-items: center;
  color: var(--clr-teal-300);
}

.comparison-divider svg {
  filter: drop-shadow(0 0 10px rgba(45, 212, 191, 0.5));
}

.comparison-result {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background:
    linear-gradient(135deg, rgba(90, 175, 135, 0.14), rgba(249, 115, 22, 0.07)),
    rgba(255, 255, 255, 0.05);
}

.result-score {
  display: flex;
  min-height: 7rem;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 1rem;
  background: rgba(90, 175, 135, 0.13);
  border: 1px solid rgba(45, 212, 191, 0.24);
}

.result-score span {
  color: white !important;
  font-size: 1.75rem;
  font-weight: 950;
  line-height: 1;
}

.result-score small {
  margin-top: 0.35rem;
  color: var(--clr-teal-300);
  font-size: 0.7rem;
  font-weight: 850;
}

.comparison-result strong {
  display: block;
  color: white;
  font-size: 0.95rem;
  line-height: 1.35;
}

.comparison-result p {
  margin: 0.4rem 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.82rem;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .control-layout {
    gap: 3.25rem !important;
  }

  #control .timeline.timeline-vertical {
    gap: 0.75rem;
  }

  #control .timeline li {
    grid-template-columns: 1fr;
    gap: 0.6rem;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.035);
  }

  #control .timeline-start {
    justify-self: start;
    min-width: auto;
    padding: 0.45rem 0.85rem;
  }

  #control .timeline-middle {
    display: none;
  }

  #control .timeline-end {
    max-width: none;
  }

  .control-chart-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .control-chart-body {
    padding: 0.85rem;
  }

  .comparison-showcase {
    grid-template-columns: 1fr;
  }

  .comparison-divider {
    display: none;
  }

  .comparison-column {
    min-height: auto;
  }

  .comparison-column h4 {
    min-height: 0;
  }

  .comparison-result {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

/* --- 10. App Features Strip ---
   ----------------------------------------------------------- */
.app-feature-card {
  min-height: 12rem;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.034)),
    rgba(255, 255, 255, 0.035);
  /* was 0.03 - more visible */
  border: 1px solid var(--line-soft);
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: left;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.18);
  transition: background var(--transition-normal),
    border-color var(--transition-normal),
    transform var(--transition-normal);
}

.app-feature-card:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(45, 212, 191, 0.35);
  transform: translateY(-4px);
}

.app-feature-card .app-icon {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-teal-400);
  background: rgba(90, 175, 135, 0.11);
  border: 1px solid rgba(45, 212, 191, 0.16);
  border-radius: 0.9rem;
  margin-bottom: 1rem;
}

.app-feature-card .app-icon svg,
.safety-grid .card svg,
.feature-icon-wrap svg {
  display: block;
  color: currentColor;
  stroke: currentColor;
  filter: drop-shadow(0 0 10px rgba(45, 212, 191, 0.18));
}

.app-feature-card .app-icon svg {
  color: var(--clr-teal-300);
}

.platform-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid rgba(45, 212, 191, 0.24);
  border-radius: 9999px;
  background: rgba(90, 175, 135, 0.08);
  color: var(--clr-teal-300) !important;
  font-size: 0.8rem;
  font-weight: 800;
}

.hmi-showcase {
  margin: 0 auto 2rem;
  max-width: 72rem;
}

.hmi-device-frame {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 1.25rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.035)),
    rgba(0, 0, 0, 0.28);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(45, 212, 191, 0.08);
}

.hmi-window-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  font-weight: 800;
  text-align: right;
}

.hmi-window-dot {
  width: 0.58rem;
  height: 0.58rem;
  border-radius: 9999px;
  background: rgba(45, 212, 191, 0.72);
  box-shadow: 0 0 16px rgba(45, 212, 191, 0.35);
}

.hmi-device-frame picture,
.hmi-shot-card picture {
  display: block;
}

.hmi-device-frame img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center top;
}

/* ===== Multi-platform compatibility showcase (animated) ===== */
.app-compat-stage {
  position: relative;
  max-width: 980px;
  margin: 0 auto 2rem;
  padding: 1.5rem 1rem;
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at 50% 50%, rgba(90, 175, 135, 0.08), transparent 65%),
    rgba(15, 23, 42, 0.4);
  border: 1px solid rgba(90, 175, 135, 0.18);
  overflow: hidden;
}

.app-compat-row {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 0.7rem;
  align-items: stretch;
}
.app-compat-row-top    { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.app-compat-row-bottom { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 78%; margin: 0 auto; }

@media (max-width: 700px) {
  .app-compat-row-top    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-compat-row-bottom { grid-template-columns: repeat(1, minmax(0, 1fr)); max-width: 100%; }
}

.app-compat-chip {
  position: relative;
  padding: 0.85rem 0.7rem;
  border-radius: 0.75rem;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(90, 175, 135, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  overflow: hidden;
  animation: appChipBreath 4s ease-in-out infinite;
  animation-delay: var(--app-delay, 0s);
}
.app-compat-chip svg { color: var(--clr-teal-400); }
.app-compat-chip-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.94);
}
.app-compat-chip-os {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  color: rgba(90, 175, 135, 0.78);
  text-transform: uppercase;
}

/* Top-right status pulse on each chip */
.app-compat-chip::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--clr-teal-400);
  box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.7);
  animation: appChipDot 2s ease-out infinite;
  animation-delay: var(--app-delay, 0s);
}

.app-compat-chip-backend::after { background: #c084fc; box-shadow: 0 0 0 0 rgba(192, 132, 252, 0.7); }
.app-compat-chip-backend { border-color: rgba(192, 132, 252, 0.28); }
.app-compat-chip-backend svg { color: #c084fc; }
.app-compat-chip-backend .app-compat-chip-os { color: rgba(192, 132, 252, 0.82); }

@keyframes appChipBreath {
  0%, 100% { box-shadow: 0 0 0 0 rgba(90, 175, 135, 0); }
  50%      { box-shadow: 0 0 20px -4px rgba(90, 175, 135, 0.35); }
}
@keyframes appChipDot {
  0%   { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.7); opacity: 1; }
  70%  { box-shadow: 0 0 0 8px rgba(45, 212, 191, 0); opacity: 0.85; }
  100% { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0); opacity: 1; }
}

/* Bus area between rows */
.app-compat-bus {
  position: relative;
  z-index: 1;
  height: 110px;
  margin: 0.5rem 0;
}
.app-compat-bus-pkt {
  position: absolute;
  left: var(--pkt-x, 50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--clr-teal-400);
  box-shadow: 0 0 8px rgba(45, 212, 191, 0.75);
  transform: translate(-50%, -50%);
}
.app-compat-bus-pkt-down {
  background: var(--clr-teal-400);
  animation: appPktDown 2.4s linear infinite;
}
.app-compat-bus-pkt-up {
  background: #c084fc;
  box-shadow: 0 0 8px rgba(192, 132, 252, 0.75);
  animation: appPktUp 2.4s linear infinite;
}
.app-compat-bus-pkt-down:nth-of-type(2) { animation-delay: 0.6s; }
.app-compat-bus-pkt-down:nth-of-type(4) { animation-delay: 1.2s; }
.app-compat-bus-pkt-down:nth-of-type(6) { animation-delay: 1.8s; }
.app-compat-bus-pkt-up:nth-of-type(1)   { animation-delay: 0.3s; }
.app-compat-bus-pkt-up:nth-of-type(3)   { animation-delay: 0.9s; }
.app-compat-bus-pkt-up:nth-of-type(5)   { animation-delay: 1.5s; }

@keyframes appPktDown {
  0%   { top: 0;    opacity: 0; }
  10%  { opacity: 1; }
  45%  { top: 50%;  opacity: 1; }
  55%  { top: 50%;  opacity: 0; }
  100% { top: 50%;  opacity: 0; }
}
@keyframes appPktUp {
  0%   { top: 100%; opacity: 0; }
  10%  { opacity: 1; }
  45%  { top: 50%;  opacity: 1; }
  55%  { top: 50%;  opacity: 0; }
  100% { top: 50%;  opacity: 0; }
}

.app-compat-bus-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  padding: 0.65rem 1.1rem;
  border-radius: 0.9rem;
  background: linear-gradient(135deg, rgba(90, 175, 135, 0.22), rgba(124, 58, 237, 0.18));
  border: 1px solid rgba(90, 175, 135, 0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  box-shadow: 0 0 30px -6px rgba(90, 175, 135, 0.45);
}
.app-compat-bus-core strong {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  color: white;
}
.app-compat-bus-core-meta {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  color: var(--clr-teal-400);
}
.app-compat-bus-core-pulse {
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 1px solid rgba(90, 175, 135, 0.55);
  animation: appCorePulse 2.6s ease-out infinite;
  pointer-events: none;
}
@keyframes appCorePulse {
  0%   { transform: scale(1);    opacity: 0.7; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* Quick stats strip */
.app-compat-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin: 1.5rem auto 0;
  max-width: 1120px;
}
@media (max-width: 700px) {
  .app-compat-stats { grid-template-columns: 1fr; }
}
.app-compat-stat {
  padding: 1rem 0.9rem;
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.app-compat-stat-num {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 2.1rem;
  font-weight: 900;
  line-height: 1;
  color: var(--clr-teal-400);
  letter-spacing: 0.02em;
}
.app-compat-stat-label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.4;
}

.app-resource-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
  gap: 1rem;
  max-width: 1120px;
  margin: 0 auto 2.5rem;
  text-align: left;
}

.app-resource-grid-inline {
  margin-top: 1.25rem;
  margin-bottom: 0;
}

.app-resource-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 1rem;
  padding: 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 1.1rem;
  background:
    radial-gradient(circle at 84% 8%, rgba(90, 175, 135, 0.13), transparent 34%),
    rgba(255, 255, 255, 0.045);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.24);
}

.app-resource-card-wide {
  grid-column: 1 / -1;
}

.app-resource-card-hmi {
  grid-template-columns: minmax(16rem, 0.42fr) minmax(0, 0.58fr);
  align-items: stretch;
}

.app-resource-card-hmi .app-resource-copy {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto auto;
  min-height: 100%;
}

.app-resource-card-design {
  align-content: space-between;
}

.app-resource-eyebrow {
  margin: 0 0 0.55rem;
  color: var(--clr-teal-300);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.app-resource-title {
  margin: 0;
  color: white;
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1.25;
}

.app-resource-body {
  margin: 0.65rem 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.9rem;
  line-height: 1.6;
}

.app-hmi-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 1rem;
}

.app-hmi-proof-grid div {
  min-height: 4.1rem;
  padding: 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 0.78rem;
  background: rgba(255, 255, 255, 0.045);
}

.app-hmi-proof-grid span,
.app-hmi-proof-grid strong {
  display: block;
}

.app-hmi-proof-grid span {
  margin-bottom: 0.35rem;
  color: rgba(255, 255, 255, 0.54);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.app-hmi-proof-grid strong {
  color: white;
  font-size: 0.82rem;
  line-height: 1.3;
}

.app-hmi-theme-switch {
  display: inline-flex;
  align-items: center;
  width: fit-content;
}

.app-hmi-theme-switch {
  gap: 0.25rem;
  margin-top: 1rem;
  padding: 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.16);
}

.app-hmi-theme-switch button {
  min-width: 4.25rem;
  height: 1.9rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.72rem;
  font-weight: 850;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.app-hmi-theme-switch button.is-active {
  background: linear-gradient(135deg, rgba(90, 175, 135, 0.92), rgba(52, 211, 153, 0.82));
  color: hsl(164, 60%, 8%);
}

/* App Demo — hero card (left panel): Beautiful · Modern · Intuitive */
.app-hmi-hero-title {
  font-size: 1.7rem;
  line-height: 1.14;
  letter-spacing: -0.01em;
}
.app-hmi-vps {
  list-style: none;
  margin: 1.15rem 0 0;
  padding: 0;
  display: grid;
  align-content: center;
  gap: 0.75rem;
}
.app-hmi-vp {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
}
.app-hmi-vp-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  flex: none;
  border-radius: 0.7rem;
  background: rgba(90, 175, 135, 0.12);
  border: 1px solid rgba(90, 175, 135, 0.28);
  color: var(--clr-teal-300);
}
.app-hmi-vp b {
  display: block;
  color: white;
  font-size: 0.92rem;
  font-weight: 800;
  margin-bottom: 0.12rem;
}
.app-hmi-vp small {
  display: block;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.8rem;
  line-height: 1.5;
}
.app-hmi-proof-note {
  margin: 0.85rem 0 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.72rem;
}
html[data-theme="marosa-light"] .app-hmi-vp-ic {
  background: rgba(59, 128, 97, 0.10) !important;
  border-color: rgba(59, 128, 97, 0.30) !important;
}
html[data-theme="marosa-light"] .app-hmi-vp b { color: hsl(222, 47%, 14%) !important; }
html[data-theme="marosa-light"] .app-hmi-vp small { color: hsl(222, 19%, 32%) !important; }
html[data-theme="marosa-light"] .app-hmi-proof-note { color: hsl(222, 15%, 45%) !important; }

.app-hmi-demo-panel {
  display: grid;
  gap: 0.8rem;
}

.app-resource-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1rem;
}

.app-resource-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.4rem 0.65rem;
  border: 1px solid rgba(90, 175, 135, 0.28);
  border-radius: 999px;
  background: rgba(90, 175, 135, 0.10);
  color: var(--clr-teal-300);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.app-hmi-frame {
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(45, 212, 191, 0.08);
}

.app-hmi-frame img {
  aspect-ratio: 1100 / 620;
  object-position: left top;
}

.app-hmi-shot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.app-hmi-shot {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  min-height: 4.5rem;
  padding: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 0.82rem;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.82);
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast),
    transform var(--transition-fast);
}

.app-hmi-shot:hover,
.app-hmi-shot.is-active {
  border-color: rgba(90, 175, 135, 0.48);
  background: rgba(90, 175, 135, 0.10);
  transform: translateY(-1px);
}

.app-hmi-shot img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: left top;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 0.62rem;
}

.app-hmi-shot b,
.app-hmi-shot small {
  display: block;
}

.app-hmi-shot b {
  color: white;
  font-size: 0.78rem;
  line-height: 1.2;
}

.app-hmi-shot small {
  margin-top: 0.18rem;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.66rem;
  line-height: 1.25;
}

.app-design-preview {
  display: grid;
  gap: 0.8rem;
}

.app-design-showcase-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 0.75rem;
}

.app-design-component,
.app-design-hero-card {
  display: grid;
  align-content: start;
  gap: 0.7rem;
  padding: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 0.95rem;
  background: rgba(255, 255, 255, 0.045);
}

.app-design-hero-card {
  grid-column: span 5;
  grid-row: span 2;
  min-height: 100%;
}

.app-design-status-demo,
.app-design-library-demo {
  grid-column: span 7;
}

.app-design-story-demo,
.app-design-palette-demo,
.app-design-foundation-demo {
  grid-column: span 4;
}

/* Design Language — 3-chapter story (Modern · Cognitive · Aesthetic) */
.app-dl-chapters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  margin-top: 1rem;
}
.app-dl-chapter {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.7fr);
  gap: 1.5rem;
  align-content: start;
  align-items: start;
}
@media (max-width: 760px) {
  .app-dl-chapter { grid-template-columns: 1fr; gap: 1rem; }
}
.app-dl-chapter-demo {
  display: grid;
  gap: 0.85rem;
  align-content: start;
}
.app-dl-demo-label {
  margin: 0;
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
html[data-theme="marosa-light"] .app-dl-demo-label { color: hsl(222, 15%, 45%) !important; }
.app-dl-chapter-eyebrow {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  color: var(--clr-teal-300);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.app-dl-chapter-eyebrow b {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 1.05rem;
  line-height: 1;
  color: var(--clr-teal-300);
}
.app-dl-chapter h4 {
  margin: 0.1rem 0 0;
}
.app-dl-surfaces {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.15rem;
}
.app-dl-surfaces span {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.28rem 0.62rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.78);
}
html[data-theme="marosa-light"] .app-dl-surfaces span {
  background: rgba(15, 23, 42, 0.04) !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
  color: hsl(222, 19%, 32%) !important;
}

.app-design-component h4,
.app-design-hero-card h4 {
  margin: 0;
  color: white;
  font-size: 0.95rem;
  font-weight: 900;
}

.app-design-component p,
.app-design-hero-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.70);
  font-size: 0.84rem;
  line-height: 1.55;
}

.app-design-logo-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 0.95rem;
  background: rgba(0, 0, 0, 0.18);
}

.app-design-logo-row img {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  object-fit: cover;
}

.app-design-logo-row strong,
.app-design-logo-row span {
  display: block;
}

.app-design-logo-row strong {
  color: white;
  font-size: 1.35rem;
  font-weight: 950;
  letter-spacing: 0.04em;
}

.app-design-logo-row span {
  color: rgba(45, 212, 191, 0.82);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.app-design-hero-proof {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.app-design-hero-proof span,
.app-design-library-actions span {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.45rem 0.62rem;
  border: 1px solid rgba(90, 175, 135, 0.24);
  border-radius: 999px;
  background: rgba(90, 175, 135, 0.08);
  color: var(--clr-teal-300);
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1.2;
}

.app-design-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.app-dl-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  min-height: 2.05rem;
  padding: 0.42rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1;
}

.app-dl-pill i {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: currentColor;
}

.app-dl-pill-ready {
  background: rgba(61, 133, 101, 0.16);
  color: #8fd6b4;
}

.app-dl-pill-adjusting {
  background: rgba(245, 158, 11, 0.16);
  color: #fbbf24;
}

.app-dl-pill-fault {
  background: rgba(229, 57, 53, 0.14);
  color: #fb7185;
}

.app-dl-pill-insight {
  background: rgba(66, 165, 245, 0.16);
  color: #60a5fa;
}

.app-dl-pill-process {
  background: rgba(230, 81, 0, 0.16);
  color: #fb923c;
}

.app-dl-pill-washed {
  background: rgba(90, 160, 232, 0.18);
  color: #93c5fd;
}

.app-dl-pill-assist {
  background: rgba(96, 125, 139, 0.18);
  color: #b0bec5;
}

/* Design Language — "Ba giọng nói" type-voice specimens (scoped) */
.app-dl-type-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
  grid-column: 1 / -1;
}
@media (max-width: 900px) { .app-dl-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .app-dl-type-grid { grid-template-columns: 1fr; } }
.app-dl-type {
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.035);
  overflow: hidden;
}
.app-dl-type-role {
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--clr-teal-300);
}
.app-dl-type-name {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 0.15rem;
}
.app-dl-type-sample {
  margin-top: 0.6rem;
  line-height: 1.04;
  color: white;
  white-space: nowrap;
}
.app-dl-type-sub {
  margin: 0.45rem 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}
.app-dl-type-tele {
  margin-top: 0.4rem;
  font-family: "JetBrains Mono", var(--font-mono, monospace);
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.5);
  font-feature-settings: "tnum";
}
.app-dl-ff-display { font-family: "Stick No Bills", var(--font-display); font-weight: 800; font-size: 2rem; letter-spacing: 1px; }
.app-dl-ff-body    { font-family: "Inter", system-ui, sans-serif; font-weight: 600; font-size: 1.3rem; letter-spacing: -0.02em; }
.app-dl-ff-mono    { font-family: "JetBrains Mono", var(--font-mono, monospace); font-weight: 500; font-size: 1.7rem; letter-spacing: -1px; font-feature-settings: "tnum"; }
.app-dl-ff-serif   { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; font-size: 1.6rem; }

html[data-theme="marosa-light"] .app-dl-pill-assist { background: rgba(96, 125, 139, 0.14) !important; color: #546e7a !important; }
html[data-theme="marosa-light"] .app-dl-type { background: rgba(255, 255, 255, 0.82) !important; border-color: rgba(15, 23, 42, 0.08) !important; }
html[data-theme="marosa-light"] .app-dl-type-sample { color: hsl(222, 30%, 16%) !important; }
html[data-theme="marosa-light"] .app-dl-type-name,
html[data-theme="marosa-light"] .app-dl-type-sub,
html[data-theme="marosa-light"] .app-dl-type-tele { color: hsl(222, 19%, 35%) !important; }

/* Design Language — storyboard-led layout (scenes + evidence + buttons) */
.app-dl-block {
  display: grid;
  gap: 0.85rem;
  margin-top: 0.4rem;
}
.app-dl-block-label {
  margin: 0;
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-teal-300);
}
.app-dl-scenes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (max-width: 900px) { .app-dl-scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .app-dl-scenes { grid-template-columns: 1fr; } }
.app-dl-scene {
  display: grid;
  gap: 0.4rem;
  align-content: start;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.04);
}
.app-dl-scene-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 0.7rem;
  background: rgba(90, 175, 135, 0.12);
  border: 1px solid rgba(90, 175, 135, 0.28);
  color: var(--clr-teal-300);
}
.app-dl-scene-num {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.42);
  margin-top: 0.3rem;
}
.app-dl-scene h4 { margin: 0; color: white; font-size: 0.95rem; font-weight: 800; line-height: 1.2; }
.app-dl-scene p { margin: 0; color: rgba(255, 255, 255, 0.66); font-size: 0.8rem; line-height: 1.5; }

.app-dl-evidence {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
@media (max-width: 760px) { .app-dl-evidence { grid-template-columns: 1fr; } }
.app-dl-ev {
  display: grid;
  gap: 0.7rem;
  align-content: start;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.035);
}
.app-dl-ev-wide { grid-column: 1 / -1; }
.app-dl-ev-title { margin: 0; color: white; font-size: 0.85rem; font-weight: 800; }

.app-dl-btn-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.app-dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.3rem;
  padding: 0.5rem 1rem;
  border-radius: 0.7rem;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
}
.app-dl-btn-filled { background: linear-gradient(135deg, rgba(90, 175, 135, 0.95), rgba(52, 211, 153, 0.85)); color: hsl(164, 60%, 8%); }
.app-dl-btn-outlined { background: transparent; border-color: rgba(90, 175, 135, 0.42); color: var(--clr-teal-300); }
.app-dl-btn-danger { background: rgba(229, 57, 53, 0.16); border-color: rgba(229, 57, 53, 0.32); color: #fb7185; }
.app-dl-btn-safety { background: rgba(229, 57, 53, 0.92); color: #fff; border-radius: 999px; }

html[data-theme="marosa-light"] .app-dl-scene,
html[data-theme="marosa-light"] .app-dl-ev {
  background: rgba(255, 255, 255, 0.82) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
}
html[data-theme="marosa-light"] .app-dl-scene h4,
html[data-theme="marosa-light"] .app-dl-ev-title { color: hsl(222, 47%, 14%) !important; }
html[data-theme="marosa-light"] .app-dl-scene p { color: hsl(222, 19%, 35%) !important; }
html[data-theme="marosa-light"] .app-dl-btn-outlined { color: hsl(152, 80%, 26%) !important; border-color: rgba(59, 128, 97, 0.4) !important; }
html[data-theme="marosa-light"] .app-dl-btn-danger { color: #c62828 !important; }

.app-design-library-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 0.9rem;
  background: rgba(0, 0, 0, 0.14);
}

.app-design-library-icon {
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.92);
  color: hsl(152, 85%, 32%);
}

.app-design-library-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.app-design-library-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.app-design-library-head strong {
  color: white;
  font-size: 1rem;
  font-weight: 950;
}

.app-design-library-head span {
  min-width: 1.6rem;
  height: 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(90, 175, 135, 0.16);
  color: var(--clr-teal-300);
  font-size: 0.72rem;
  font-weight: 900;
}

.app-design-library-card p {
  margin-top: 0.2rem;
}

.app-design-library-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.app-design-story-steps,
.app-design-foundation-grid {
  display: grid;
  gap: 0.5rem;
}

.app-design-story-steps div,
.app-design-foundation-grid div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  padding: 0.58rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.72rem;
  background: rgba(0, 0, 0, 0.12);
}

.app-design-story-steps b,
.app-design-foundation-grid b {
  color: var(--clr-teal-300);
  font-size: 0.72rem;
  font-weight: 950;
}

.app-design-story-steps span,
.app-design-foundation-grid span {
  color: rgba(255, 255, 255, 0.70);
  font-size: 0.72rem;
  line-height: 1.35;
}

.app-design-foundation-grid div {
  grid-template-columns: 5.2rem minmax(0, 1fr);
}

.app-design-swatches {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
}

.app-design-swatches span {
  display: grid;
  align-content: end;
  min-height: 3.15rem;
  padding: 0.55rem;
  border-radius: 0.8rem;
  background: var(--swatch);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.app-design-swatches b,
.app-design-swatches small {
  display: block;
  color: white;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.32);
}

.app-design-swatches b {
  font-size: 0.75rem;
  font-weight: 900;
}

.app-design-swatches small {
  margin-top: 0.12rem;
  font-size: 0.62rem;
  line-height: 1.2;
  opacity: 0.82;
}

.app-design-type {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 0.95rem;
  background: rgba(255, 255, 255, 0.045);
}

.app-design-type span {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.app-design-type strong {
  color: white;
  font-size: 1.65rem;
  line-height: 1;
}

.app-design-type small {
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.76rem;
  line-height: 1.35;
}

.app-design-type-scale,
.app-design-rule-grid {
  display: grid;
  gap: 0.5rem;
}

.app-design-type-scale {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.app-design-type-scale span,
.app-design-rule-grid div {
  padding: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.72rem;
  background: rgba(0, 0, 0, 0.12);
}

.app-design-type-scale span {
  color: rgba(255, 255, 255, 0.70);
  font-size: 0.72rem;
  line-height: 1.35;
}

.app-design-rule-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.app-design-rule-grid b,
.app-design-rule-grid span {
  display: block;
}

.app-design-rule-grid b {
  margin-bottom: 0.28rem;
  color: white;
  font-size: 0.78rem;
  font-weight: 900;
}

.app-design-rule-grid span {
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.72rem;
  line-height: 1.42;
}

@media (max-width: 980px) {
  .app-resource-grid,
  .app-resource-card-hmi,
  .app-design-showcase-grid {
    grid-template-columns: 1fr;
  }

  .app-resource-card-hmi .app-resource-copy {
    display: block;
    min-height: 0;
  }

  .app-design-hero-card,
  .app-design-status-demo,
  .app-design-library-demo,
  .app-design-story-demo,
  .app-design-palette-demo,
  .app-design-foundation-demo {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 640px) {
  .app-resource-card {
    padding: 0.85rem;
  }

  .app-hmi-theme-switch,
  .app-resource-tags {
    width: 100%;
    justify-content: center;
  }

  .app-hmi-theme-switch button {
    flex: 1;
  }

  .app-hmi-proof-grid,
  .app-hmi-shot-grid,
  .app-design-hero-proof,
  .app-design-type-scale,
  .app-design-rule-grid {
    grid-template-columns: 1fr;
  }

  .app-hmi-shot {
    grid-template-columns: 5.25rem minmax(0, 1fr);
  }
}

/* Light theme overrides */
html[data-theme="marosa-light"] .app-compat-stage {
  background:
    radial-gradient(circle at 50% 50%, rgba(59, 128, 97, 0.08), transparent 65%),
    rgba(255, 255, 255, 0.75) !important;
  border-color: rgba(59, 128, 97, 0.2) !important;
}
html[data-theme="marosa-light"] .app-compat-chip {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(59, 128, 97, 0.26) !important;
  color: hsl(222, 47%, 18%) !important;
}
html[data-theme="marosa-light"] .app-compat-chip-name { color: hsl(222, 47%, 14%) !important; }
html[data-theme="marosa-light"] .app-compat-chip-os   { color: hsl(152, 80%, 24%) !important; }
html[data-theme="marosa-light"] .app-compat-chip-backend           { border-color: rgba(124, 58, 237, 0.3) !important; }
html[data-theme="marosa-light"] .app-compat-chip-backend .app-compat-chip-os { color: hsl(263, 62%, 42%) !important; }
html[data-theme="marosa-light"] .app-compat-bus-core strong { color: hsl(222, 47%, 12%) !important; }
html[data-theme="marosa-light"] .app-compat-bus-core { background: linear-gradient(135deg, rgba(59, 128, 97, 0.12), rgba(124, 58, 237, 0.08)) !important; }
html[data-theme="marosa-light"] .app-compat-bus-core-meta { color: hsl(152, 80%, 24%) !important; }
html[data-theme="marosa-light"] .app-compat-stat {
  background: rgba(255, 255, 255, 0.75) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
}
html[data-theme="marosa-light"] .app-compat-stat-num   { color: hsl(152, 80%, 24%) !important; }
html[data-theme="marosa-light"] .app-compat-stat-label { color: hsl(222, 19%, 28%) !important; }

html[data-theme="marosa-light"] .app-resource-card {
  background:
    radial-gradient(circle at 84% 8%, rgba(59, 128, 97, 0.10), transparent 34%),
    rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.10) !important;
}

html[data-theme="marosa-light"] .app-resource-title,
html[data-theme="marosa-light"] .app-design-logo-row strong,
html[data-theme="marosa-light"] .app-design-type strong,
html[data-theme="marosa-light"] .app-design-component h4,
html[data-theme="marosa-light"] .app-design-hero-card h4,
html[data-theme="marosa-light"] .app-design-library-head strong,
html[data-theme="marosa-light"] .app-hmi-proof-grid strong,
html[data-theme="marosa-light"] .app-hmi-shot b,
html[data-theme="marosa-light"] .app-design-rule-grid b {
  color: hsl(222, 47%, 14%) !important;
}

html[data-theme="marosa-light"] .app-resource-body,
html[data-theme="marosa-light"] .app-design-type small,
html[data-theme="marosa-light"] .app-design-component p,
html[data-theme="marosa-light"] .app-design-hero-card p,
html[data-theme="marosa-light"] .app-design-library-card p,
html[data-theme="marosa-light"] .app-design-story-steps span,
html[data-theme="marosa-light"] .app-design-foundation-grid span,
html[data-theme="marosa-light"] .app-hmi-shot small,
html[data-theme="marosa-light"] .app-design-type-scale span,
html[data-theme="marosa-light"] .app-design-rule-grid span {
  color: hsl(222, 19%, 32%) !important;
}

html[data-theme="marosa-light"] .app-hmi-theme-switch,
html[data-theme="marosa-light"] .app-design-logo-row,
html[data-theme="marosa-light"] .app-design-type,
html[data-theme="marosa-light"] .app-hmi-proof-grid div,
html[data-theme="marosa-light"] .app-hmi-shot,
html[data-theme="marosa-light"] .app-design-component,
html[data-theme="marosa-light"] .app-design-hero-card,
html[data-theme="marosa-light"] .app-design-library-card,
html[data-theme="marosa-light"] .app-design-story-steps div,
html[data-theme="marosa-light"] .app-design-foundation-grid div,
html[data-theme="marosa-light"] .app-design-type-scale span,
html[data-theme="marosa-light"] .app-design-rule-grid div {
  background: rgba(255, 255, 255, 0.82) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="marosa-light"] .app-design-hero-proof span,
html[data-theme="marosa-light"] .app-design-library-actions span {
  background: rgba(59, 128, 97, 0.10) !important;
  border-color: rgba(59, 128, 97, 0.22) !important;
  color: hsl(152, 80%, 24%) !important;
}

html[data-theme="marosa-light"] .app-design-library-icon {
  background: rgba(59, 128, 97, 0.10) !important;
  color: hsl(152, 80%, 24%) !important;
}

html[data-theme="marosa-light"] .app-hmi-shot:hover,
html[data-theme="marosa-light"] .app-hmi-shot.is-active {
  background: rgba(59, 128, 97, 0.10) !important;
  border-color: rgba(59, 128, 97, 0.32) !important;
}

html[data-theme="marosa-light"] .app-hmi-theme-switch button {
  color: hsl(222, 19%, 34%) !important;
}

html[data-theme="marosa-light"] .app-hmi-theme-switch button.is-active {
  color: hsl(164, 60%, 8%) !important;
}

html[data-theme="marosa-light"] .app-design-type span,
html[data-theme="marosa-light"] .app-hmi-proof-grid span {
  color: hsl(222, 16%, 48%) !important;
}

html[data-theme="marosa-light"] .app-resource-tags span {
  background: rgba(59, 128, 97, 0.10) !important;
  border-color: rgba(59, 128, 97, 0.24) !important;
  color: hsl(152, 80%, 24%) !important;
}

@media (prefers-reduced-motion: reduce) {
  .app-compat-chip,
  .app-compat-chip::after,
  .app-compat-bus-pkt,
  .app-compat-bus-core-pulse {
    animation: none !important;
  }
}

/* App architecture split (frontend ↔ backend) */
.app-arch-split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 1rem;
  margin: 0 auto 1.75rem;
  max-width: 1080px;
  text-align: left;
}

.app-arch-side {
  padding: 1.5rem 1.4rem;
  border-radius: 1.1rem;
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(90, 175, 135, 0.22);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.app-arch-head {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--clr-teal-400);
}

.app-arch-label {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--clr-teal-400);
}

.app-arch-title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.94);
}

.app-arch-body {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.74);
}

.app-arch-chips {
  margin-top: auto;
  padding-top: 0.55rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.app-arch-link {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 110px;
}

.app-arch-link::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(90, 175, 135, 0.15), rgba(90, 175, 135, 0.7), rgba(90, 175, 135, 0.15));
  transform: translateY(-50%);
}

.app-arch-link-label {
  position: relative;
  z-index: 1;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(90, 175, 135, 0.4);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--clr-teal-400);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .app-arch-split {
    grid-template-columns: 1fr;
  }
  .app-arch-link {
    min-height: 60px;
    min-width: 0;
  }
  .app-arch-link::before {
    inset: 0 50% 0 50%;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, rgba(90, 175, 135, 0.15), rgba(90, 175, 135, 0.7), rgba(90, 175, 135, 0.15));
    transform: translateX(-50%);
  }
}

html[data-theme="marosa-light"] .app-arch-side {
  background: rgba(255, 255, 255, 0.7) !important;
  border-color: rgba(59, 128, 97, 0.22) !important;
}

html[data-theme="marosa-light"] .app-arch-title {
  color: hsl(222, 47%, 14%) !important;
}

html[data-theme="marosa-light"] .app-arch-body {
  color: hsl(222, 24%, 30%) !important;
}

html[data-theme="marosa-light"] .app-arch-label,
html[data-theme="marosa-light"] .app-arch-link-label {
  color: hsl(152, 70%, 28%) !important;
}

html[data-theme="marosa-light"] .app-arch-link-label {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(59, 128, 97, 0.4) !important;
}

.hmi-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 0.85rem;
}

.hmi-proof-item {
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.052);
  text-align: left;
}

.hmi-proof-item span {
  display: block;
  margin-bottom: 0.3rem;
  color: rgba(255, 255, 255, 0.58) !important;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hmi-proof-item strong {
  color: white;
  font-size: 0.95rem;
}

.hmi-screenshot-grid {
  margin-top: 1.5rem;
}

.hmi-shot-card {
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.052);
  text-align: left;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.22);
}

.hmi-shot-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: left top;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.hmi-shot-card figcaption {
  padding: 1rem;
}

.hmi-shot-card h4 {
  margin: 0 0 0.45rem;
  color: white;
  font-size: 1rem;
  font-weight: 850;
}

.hmi-shot-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.74) !important;
  font-size: 0.86rem;
  line-height: 1.55;
}

.sticky-cta {
  display: none !important;
}

.sticky-cta.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 140%);
}

@media (max-width: 1023px) {
  .hmi-window-bar {
    align-items: flex-start;
    flex-direction: column;
    text-align: left;
  }

  .hmi-proof-grid {
    grid-template-columns: 1fr;
  }

  .sticky-cta {
    display: flex !important;
  }
}

.safety-layout {
  align-items: center;
}

.safety-grid .card {
  min-height: 11.25rem;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
    rgba(0, 0, 0, 0.18) !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.20);
}

/* --- 11. CTA Section ---
   ----------------------------------------------------------- */
.cta-section {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100vh - 5rem);
  min-height: calc(100svh - 5rem);
  overflow: hidden;
}

@media (max-width: 640px) {
  .cta-section {
    align-items: flex-start;
    min-height: 100vh;
    min-height: 100svh;
    padding-top: 5.5rem;
  }
}

.cta-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(90, 175, 135, 0.12), rgba(52, 211, 153, 0.08));
  pointer-events: none;
}

.cta-glow-orb {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 300px;
  background: linear-gradient(to right, rgba(90, 175, 135, 0.2), rgba(52, 211, 153, 0.15));
  filter: blur(80px);
  pointer-events: none;
}

/* --- 11b. "Coming soon" CTA hero (replaces 3-tier brochure/demo grid)
   ----------------------------------------------------------- */
.cta-coming-wrap {
  padding: 2rem 0;
}

.cta-coming-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 1rem;
  margin-bottom: 1.5rem;
  border-radius: 999px;
  background: rgba(90, 175, 135, 0.10);
  border: 1px solid rgba(90, 175, 135, 0.32);
  color: var(--accent-strong);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.cta-coming-pulse {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(90, 175, 135, 0.6);
  animation: cta-coming-pulse 2s ease-out infinite;
}

@keyframes cta-coming-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(90, 175, 135, 0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(90, 175, 135, 0); }
  100% { box-shadow: 0 0 0 0   rgba(90, 175, 135, 0); }
}

/* TikTok handle CTA card — single, prominent, the only action on this section */
.cta-tiktok-card {
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1rem 1.5rem 1rem 1.1rem;
  margin: 0 auto 2.5rem;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(90, 175, 135, 0.18), rgba(52, 211, 153, 0.10));
  border: 1px solid rgba(90, 175, 135, 0.4);
  color: var(--text-strong);
  text-decoration: none;
  box-shadow: 0 18px 48px rgba(90, 175, 135, 0.18);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.cta-tiktok-card:hover,
.cta-tiktok-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(90, 175, 135, 0.7);
  box-shadow: 0 24px 60px rgba(90, 175, 135, 0.30);
}

.cta-tiktok-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, #000, #1a1a1a);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.cta-tiktok-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}

.cta-tiktok-handle {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-strong);
  letter-spacing: 0.01em;
}

.cta-tiktok-action {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-strong);
  margin-top: 0.15rem;
}

.cta-tiktok-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(90, 175, 135, 0.18);
  color: var(--accent-strong);
  transition: transform 220ms ease, background 220ms ease;
}

.cta-tiktok-card:hover .cta-tiktok-arrow,
.cta-tiktok-card:focus-visible .cta-tiktok-arrow {
  transform: translateX(3px);
  background: var(--accent);
  color: var(--text-inverse);
}

/* "What to expect" mini-list — sets concrete content expectations */
.cta-coming-expect {
  max-width: 28rem;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.cta-coming-expect-label {
  margin: 0 0 0.75rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cta-coming-expect-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  text-align: left;
}

.cta-coming-expect-list li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--text-main);
  font-size: 0.92rem;
}

.cta-coming-expect-list li i {
  color: var(--accent-strong);
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .cta-tiktok-card {
    width: 100%;
    padding: 0.85rem 1rem;
    gap: 0.85rem;
  }
  .cta-tiktok-icon { width: 44px; height: 44px; }
  .cta-tiktok-handle { font-size: 0.95rem; }
  .cta-tiktok-action { font-size: 0.78rem; }
  .cta-coming-expect { padding: 1rem 1.1rem; }
  .cta-coming-expect-list li { font-size: 0.85rem; }
}

html[data-theme="marosa-light"] .cta-coming-badge {
  background: rgba(59, 128, 97, 0.10);
  border-color: rgba(59, 128, 97, 0.35);
  color: var(--accent-strong);
}

html[data-theme="marosa-light"] .cta-tiktok-card {
  background: linear-gradient(135deg, rgba(59, 128, 97, 0.10), rgba(52, 211, 153, 0.06));
  border-color: rgba(59, 128, 97, 0.3);
  box-shadow: 0 18px 42px rgba(59, 128, 97, 0.14);
}

html[data-theme="marosa-light"] .cta-coming-expect {
  background: rgba(15, 23, 42, 0.025);
  border-color: rgba(15, 23, 42, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .cta-coming-pulse { animation: none; }
  .cta-tiktok-card { transition: none; }
  .cta-tiktok-card:hover,
  .cta-tiktok-card:focus-visible { transform: none; }
}

/* --- 12. Footer ---
   ----------------------------------------------------------- */
#footer {
  background: var(--color-green-dark, #1A3A34); /* MAROSA brand frame — deep green */
  border-top: 1px solid var(--glass-border);
  position: relative;
}

/* Faded transition into the footer — soft top edge instead of hard line.
   ::before pseudo overlays the footer top with a gradient that fades the
   black down from transparent (top) to footer-black (bottom). */
#footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -80px;
  height: 80px;
  background: linear-gradient(to bottom, transparent 0%, #000 100%);
  pointer-events: none;
  z-index: 1;
}
html[data-theme="marosa-light"] #footer {
  background: var(--color-green-dark, #1A3A34);
}
html[data-theme="marosa-light"] #footer::before {
  background: linear-gradient(to bottom, transparent 0%, hsl(220, 18%, 12%) 100%);
}

/* Compact footer grid — 2 rows (brand+certs on top, meta bar below) */
.footer-compact {
  padding: 1.5rem 0 1.25rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  grid-template-areas:
    "brand"
    "certs"
    "meta";
}
.footer-brand {
  grid-area: brand;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  justify-content: center;
  text-align: center;
}
.footer-logo {
  height: 2.25rem;
  width: auto;
  filter: brightness(1.05) drop-shadow(0 0 4px rgba(90, 175, 135, 0.30));
  flex-shrink: 0;
}
.footer-brand-text { text-align: left; }
.footer-brand-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-strong);
  margin: 0;
  line-height: 1.3;
}
.footer-brand-desc {
  font-size: 0.74rem;
  color: var(--text-muted);
  margin: 0.1rem 0 0;
  line-height: 1.4;
}
.footer-certs {
  grid-area: certs;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  justify-content: center;
}
.footer-meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.25rem;
  justify-content: center;
  align-items: center;
  padding-top: 0.9rem;
  margin-top: 0.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
html[data-theme="marosa-light"] .footer-meta {
  border-top-color: rgba(15, 23, 42, 0.10);
}
.footer-copyright,
.footer-tagline {
  margin: 0;
  font-size: 0.72rem;
  color: var(--text-subtle);
}
.footer-social {
  display: flex;
  gap: 1rem;
}
.footer-social a {
  color: hsl(220, 10%, 50%);
  transition: color var(--transition-fast);
}
.footer-social a:hover {
  color: var(--clr-teal-400);
}

@media (min-width: 768px) {
  .footer-compact { padding: 1.75rem 0 1.25rem; }
  .footer-grid {
    grid-template-columns: 1.4fr 1fr;
    grid-template-areas:
      "brand certs"
      "meta meta";
    gap: 1.25rem 2rem;
    align-items: center;
  }
  .footer-brand { justify-content: flex-start; text-align: left; }
  .footer-certs { justify-content: flex-end; }
  .footer-meta { justify-content: space-between; }
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--clr-teal-300);
  outline-offset: 4px;
  box-shadow: 0 0 0 6px rgba(45, 212, 191, 0.18);
}

/* --- 13. Scrollbar Styling ---
   ----------------------------------------------------------- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: hsl(220, 14%, 6%);
}

::-webkit-scrollbar-thumb {
  background: hsl(220, 14%, 20%);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--clr-teal-500);
}

/* --- 14. Keyframe Animations ---
   ----------------------------------------------------------- */
@keyframes floatY {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-18px);
  }
}

@keyframes glowPulse {

  0%,
  100% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

@keyframes pingDot {
  0% {
    transform: scale(1);
    opacity: 0.75;
  }

  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

.dot-ping {
  display: inline-flex;
  position: relative;
  width: 0.625rem;
  height: 0.625rem;
}

.dot-ping-inner,
.dot-ping-outer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--clr-teal-400);
}

.dot-ping-outer {
  animation: pingDot 1.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   14.5. Light Mode
   Full light UI system for the marketing page.
   ============================================================ */
html[data-theme="marosa-light"] body {
  background-color: hsl(210, 22%, 97%);
  background-image:
    radial-gradient(at 0% 0%, rgba(59, 128, 97, 0.07) 0px, transparent 36%),
    radial-gradient(at 100% 12%, rgba(245, 158, 11, 0.06) 0px, transparent 34%),
    linear-gradient(180deg, hsl(210, 22%, 97%), hsl(210, 20%, 96%));
  color: hsl(222, 33%, 12%);
}

html[data-theme="marosa-light"] #navbar {
  background: rgba(255, 255, 255, 0.84);
  border-bottom-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.07);
}

html[data-theme="marosa-light"] #navbar.scrolled {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.10);
}

html[data-theme="marosa-light"] section {
  color: hsl(222, 33%, 12%);
}

html[data-theme="marosa-light"] .nav-link,
html[data-theme="marosa-light"] .theme-toggle,
html[data-theme="marosa-light"] #lang-toggle,
html[data-theme="marosa-light"] .menu a {
  color: hsl(222, 31%, 16%) !important;
}

html[data-theme="marosa-light"] .theme-toggle,
html[data-theme="marosa-light"] #lang-toggle {
  background: rgba(255, 255, 255, 0.86) !important;
  border-color: rgba(15, 23, 42, 0.18) !important;
}

html[data-theme="marosa-light"] .section-dark {
  background: rgba(248, 250, 252, 0.78);
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

html[data-theme="marosa-light"] .section-dark::before,
html[data-theme="marosa-light"] section::before {
  opacity: 0.35;
}

html[data-theme="marosa-light"] .glass-panel,
html[data-theme="marosa-light"] .feature-card,
html[data-theme="marosa-light"] .app-feature-card,
html[data-theme="marosa-light"] .card,
html[data-theme="marosa-light"] .stat,
html[data-theme="marosa-light"] .under-the-hood,
html[data-theme="marosa-light"] .hmi-device-frame,
html[data-theme="marosa-light"] .hmi-proof-item,
html[data-theme="marosa-light"] .hmi-shot-card,
html[data-theme="marosa-light"] .persona-card,
html[data-theme="marosa-light"] .comparison-column,
html[data-theme="marosa-light"] .comparison-result,
html[data-theme="marosa-light"] .connection-card,
html[data-theme="marosa-light"] .pricing-card,
html[data-theme="marosa-light"] .faq-item,
html[data-theme="marosa-light"] .cta-tier,
html[data-theme="marosa-light"] .problem-card,
html[data-theme="marosa-light"] .proof-pill,
html[data-theme="marosa-light"] .brand-chip,
html[data-theme="marosa-light"] .dual-control-highlight,
html[data-theme="marosa-light"] .compare-table,
html[data-theme="marosa-light"] .case-stat-card,
html[data-theme="marosa-light"] .case-quote-panel,
html[data-theme="marosa-light"] .roi-panel,
html[data-theme="marosa-light"] .roi-result-card {
  background: rgba(255, 255, 255, 0.86) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="marosa-light"] .text-strong,
html[data-theme="marosa-light"] .persona-title,
html[data-theme="marosa-light"] .pricing-tier-title,
html[data-theme="marosa-light"] .cta-tier-title,
html[data-theme="marosa-light"] .faq-item summary,
html[data-theme="marosa-light"] .compare-table tbody td:first-child,
html[data-theme="marosa-light"] .compare-table thead th:first-child,
html[data-theme="marosa-light"] .case-quote-author strong,
html[data-theme="marosa-light"] h1,
html[data-theme="marosa-light"] h2,
html[data-theme="marosa-light"] h3,
html[data-theme="marosa-light"] h4,
html[data-theme="marosa-light"] h5,
html[data-theme="marosa-light"] h6 {
  color: var(--text-strong) !important;
}

html[data-theme="marosa-light"] .text-gradient {
  background: linear-gradient(135deg, hsl(152, 78%, 24%), hsl(142, 55%, 26%)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
html[data-theme="marosa-light"] .text-gradient-warm {
  background: linear-gradient(135deg, hsl(28, 78%, 32%), hsl(0, 65%, 38%)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

html[data-theme="marosa-light"] p,
html[data-theme="marosa-light"] li,
html[data-theme="marosa-light"] small,
html[data-theme="marosa-light"] .text-main,
html[data-theme="marosa-light"] .stat-title,
html[data-theme="marosa-light"] .stat-desc,
html[data-theme="marosa-light"] .hmi-shot-card p,
html[data-theme="marosa-light"] .problem-pain,
html[data-theme="marosa-light"] .brand-chip,
html[data-theme="marosa-light"] .platform-badge,
html[data-theme="marosa-light"] .persona-pain-item,
html[data-theme="marosa-light"] .persona-solution p,
html[data-theme="marosa-light"] .compare-table tbody td,
html[data-theme="marosa-light"] .case-stat-delta,
html[data-theme="marosa-light"] .case-quote-text,
html[data-theme="marosa-light"] .case-quote-author,
html[data-theme="marosa-light"] .pricing-features li,
html[data-theme="marosa-light"] .faq-item p,
html[data-theme="marosa-light"] .cta-tier-desc {
  color: var(--text-main) !important;
}

html[data-theme="marosa-light"] .text-muted,
html[data-theme="marosa-light"] .persona-target,
html[data-theme="marosa-light"] .case-stat-label,
html[data-theme="marosa-light"] .case-quote-author span,
html[data-theme="marosa-light"] .pricing-tier-target,
html[data-theme="marosa-light"] .roi-input-group label,
html[data-theme="marosa-light"] .roi-result-label,
html[data-theme="marosa-light"] .hmi-proof-item span {
  color: var(--text-muted) !important;
}

html[data-theme="marosa-light"] .text-subtle {
  color: var(--text-subtle) !important;
}

html[data-theme="marosa-light"] .text-danger {
  color: var(--text-danger) !important;
}

html[data-theme="marosa-light"] strong,
html[data-theme="marosa-light"] .hmi-proof-item strong,
html[data-theme="marosa-light"] .roi-result-value {
  color: var(--text-strong) !important;
}

html[data-theme="marosa-light"] .hero-badge,
html[data-theme="marosa-light"] .platform-badge,
html[data-theme="marosa-light"] .cert-badge {
  background: rgba(59, 128, 97, 0.10) !important;
  border-color: rgba(59, 128, 97, 0.24) !important;
  color: var(--accent-strong) !important;
}

html[data-theme="marosa-light"] .proof-pill {
  color: hsl(222, 22%, 22%) !important;
  background: rgba(59, 128, 97, 0.08) !important;
  border-color: rgba(59, 128, 97, 0.20) !important;
}

html[data-theme="marosa-light"] .hmi-window-bar {
  color: hsl(215, 16%, 36%) !important;
  border-bottom-color: rgba(15, 23, 42, 0.10) !important;
}

html[data-theme="marosa-light"] .hmi-shot-card img,
html[data-theme="marosa-light"] .hmi-device-frame img {
  filter: saturate(1.03) contrast(1.02);
}

html[data-theme="marosa-light"] .sticky-cta {
  box-shadow: 0 16px 42px rgba(59, 128, 97, 0.22);
}

html[data-theme="marosa-light"] .btn-primary {
  background: hsl(152, 66%, 32%) !important;
  border-color: hsl(152, 66%, 28%) !important;
  color: #ffffff !important;
}

html[data-theme="marosa-light"] .btn-primary *,
html[data-theme="marosa-light"] .btn-primary svg,
html[data-theme="marosa-light"] .btn-primary i {
  color: #ffffff !important;
  stroke: currentColor !important;
}

html[data-theme="marosa-light"] .btn-outline,
html[data-theme="marosa-light"] .persona-cta {
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(59, 128, 97, 0.46) !important;
  color: hsl(152, 66%, 26%) !important;
}

html[data-theme="marosa-light"] .btn-outline:hover,
html[data-theme="marosa-light"] .persona-cta:hover {
  background: rgba(59, 128, 97, 0.10) !important;
  color: hsl(158, 58%, 22%) !important;
}

html[data-theme="marosa-light"] .badge,
html[data-theme="marosa-light"] .badge-ghost {
  color: hsl(222, 22%, 24%) !important;
  background: rgba(15, 23, 42, 0.06) !important;
  border-color: rgba(15, 23, 42, 0.14) !important;
}

html[data-theme="marosa-light"] .feature-icon-wrap,
html[data-theme="marosa-light"] .app-icon,
html[data-theme="marosa-light"] .dual-control-icon,
html[data-theme="marosa-light"] .cta-tier-icon,
html[data-theme="marosa-light"] .persona-icon {
  background: rgba(59, 128, 97, 0.10) !important;
}

html[data-theme="marosa-light"] .problem-card,
html[data-theme="marosa-light"] .persona-pain-item {
  background: rgba(239, 68, 68, 0.07) !important;
  border-color: rgba(239, 68, 68, 0.18) !important;
}

html[data-theme="marosa-light"] .problem-cost,
html[data-theme="marosa-light"] .case-stat-before {
  color: hsl(0, 72%, 45%) !important;
}

html[data-theme="marosa-light"] .persona-solution,
html[data-theme="marosa-light"] .pricing-card-featured,
html[data-theme="marosa-light"] .cta-tier-hot,
html[data-theme="marosa-light"] .roi-result-highlight,
html[data-theme="marosa-light"] .comparison-result,
html[data-theme="marosa-light"] .dual-control-highlight {
  background: linear-gradient(135deg, rgba(59, 128, 97, 0.12), rgba(16, 185, 129, 0.06)) !important;
  border-color: rgba(59, 128, 97, 0.26) !important;
}

html[data-theme="marosa-light"] .persona-solution strong,
html[data-theme="marosa-light"] .case-stat-after,
html[data-theme="marosa-light"] .roi-result-highlight .roi-result-value {
  color: hsl(158, 58%, 28%) !important;
}

html[data-theme="marosa-light"] .compare-table th,
html[data-theme="marosa-light"] .compare-table td {
  border-bottom-color: rgba(15, 23, 42, 0.10) !important;
}

html[data-theme="marosa-light"] .compare-table thead th {
  background: rgba(15, 23, 42, 0.05) !important;
  color: hsl(222, 24%, 22%) !important;
}

html[data-theme="marosa-light"] .compare-table .compare-highlight {
  background: rgba(59, 128, 97, 0.12) !important;
  color: hsl(158, 58%, 24%) !important;
}

html[data-theme="marosa-light"] .case-quote-mark {
  color: rgba(59, 128, 97, 0.26) !important;
}

html[data-theme="marosa-light"] .roi-input-group input {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(15, 23, 42, 0.18) !important;
  color: hsl(222, 33%, 11%) !important;
}

html[data-theme="marosa-light"] .roi-input-group input:focus {
  border-color: hsl(158, 46%, 38%) !important;
  box-shadow: 0 0 0 3px rgba(59, 128, 97, 0.16) !important;
}

html[data-theme="marosa-light"] .pricing-card {
  background: rgba(255, 255, 255, 0.90) !important;
}

html[data-theme="marosa-light"] .pricing-card-popular {
  background: hsl(158, 46%, 38%) !important;
  color: #ffffff !important;
}

html[data-theme="marosa-light"] .pricing-features li.muted {
  color: hsl(215, 13%, 56%) !important;
}

html[data-theme="marosa-light"] .faq-item[open] {
  background: rgba(255, 255, 255, 0.95) !important;
}

html[data-theme="marosa-light"] .alert,
html[data-theme="marosa-light"] .alert div:not([class*="font-semibold"]) {
  color: hsl(0, 72%, 35%) !important;
}

html[data-theme="marosa-light"] .footer-social a {
  color: hsl(215, 18%, 38%) !important;
}

html[data-theme="marosa-light"] #hero {
  background:
    radial-gradient(circle at 50% 24%, rgba(90, 175, 135, 0.11), transparent 22rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(246, 249, 249, 0.96) 70%, rgba(247, 249, 251, 1));
}

html[data-theme="marosa-light"] #hero h1 {
  max-width: 68rem;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(3.05rem, 5vw, 4.85rem) !important;
  line-height: 1.04 !important;
  letter-spacing: 0 !important;
}

html[data-theme="marosa-light"] #hero p {
  color: hsl(218, 22%, 26%) !important;
}

html[data-theme="marosa-light"] #hero .btn-ghost {
  background: rgba(255, 255, 255, 0.76) !important;
  border-color: rgba(15, 23, 42, 0.16) !important;
  color: hsl(222, 31%, 16%) !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

html[data-theme="marosa-light"] #hero .btn-ghost:hover {
  background: rgba(59, 128, 97, 0.10) !important;
  border-color: rgba(59, 128, 97, 0.28) !important;
  color: hsl(158, 58%, 24%) !important;
}

html[data-theme="marosa-light"] .hero-mockup {
  filter: drop-shadow(0 30px 55px rgba(15, 23, 42, 0.22));
}

html[data-theme="marosa-light"] .hero-mockup-fade {
  background: linear-gradient(to top, hsl(210, 24%, 98%) 0%, rgba(210, 232, 229, 0.55) 42%, transparent 72%);
  border-radius: 1.5rem;
}

html[data-theme="marosa-light"] .hero-mockup .glass-panel,
html[data-theme="marosa-light"] .hero-mockup .card {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.92)),
    hsl(210, 24%, 98%) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 36px 90px rgba(15, 23, 42, 0.18) !important;
}

html[data-theme="marosa-light"] .hero-mockup .bg-base-300 {
  background-color: hsl(210, 24%, 98%) !important;
}

html[data-theme="marosa-light"] .hero-mockup .bg-base-200 {
  background-color: hsl(220, 16%, 94%) !important;
}

html[data-theme="marosa-light"] .hero-mockup .card-teal-tint {
  background: linear-gradient(135deg, rgba(59, 128, 97, 0.08), rgba(59, 128, 97, 0.02)) !important;
  border-color: rgba(59, 128, 97, 0.22) !important;
}

html[data-theme="marosa-light"] .hero-mockup .text-strong,
html[data-theme="marosa-light"] .hero-mockup strong,
html[data-theme="marosa-light"] .hero-mockup h1,
html[data-theme="marosa-light"] .hero-mockup h2,
html[data-theme="marosa-light"] .hero-mockup h3,
html[data-theme="marosa-light"] .hero-mockup h4,
html[data-theme="marosa-light"] .hero-mockup h5,
html[data-theme="marosa-light"] .hero-mockup h6 {
  color: hsl(222, 47%, 12%) !important;
}

html[data-theme="marosa-light"] .hero-mockup p,
html[data-theme="marosa-light"] .hero-mockup span,
html[data-theme="marosa-light"] .hero-mockup .text-main,
html[data-theme="marosa-light"] .hero-mockup .text-muted,
html[data-theme="marosa-light"] .hero-mockup .text-subtle {
  color: hsl(222, 19%, 32%) !important;
}

html[data-theme="marosa-light"] .hero-mockup .badge-ghost {
  background: rgba(15, 23, 42, 0.05) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: hsl(222, 19%, 28%) !important;
}

html[data-theme="marosa-light"] .hero-mockup .progress {
  background-color: rgba(15, 23, 42, 0.08) !important;
}

/* Borders within mockup (white/5, white/10) → slate */
html[data-theme="marosa-light"] .hero-mockup .border-white\/5,
html[data-theme="marosa-light"] .hero-mockup .border-white\/10,
html[data-theme="marosa-light"] .hero-mockup .ring-white\/10 {
  border-color: rgba(15, 23, 42, 0.08) !important;
}

/* Inline SVG chart: override fill on text + stroke on gridlines */
html[data-theme="marosa-light"] .hero-mockup svg text {
  fill: hsl(222, 14%, 50%) !important;
}
html[data-theme="marosa-light"] .hero-mockup svg line[stroke^="rgba(255"] {
  stroke: rgba(15, 23, 42, 0.10) !important;
}

html[data-theme="marosa-light"] #app {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 247, 248, 0.98)),
    radial-gradient(circle at 15% 10%, rgba(59, 128, 97, 0.08), transparent 23rem);
}

html[data-theme="marosa-light"] .hmi-device-frame {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.025)),
    hsl(222, 24%, 7%) !important;
  border-color: rgba(15, 23, 42, 0.22) !important;
  box-shadow: 0 34px 86px rgba(15, 23, 42, 0.24) !important;
}

html[data-theme="marosa-light"] .hmi-window-bar {
  background: rgba(15, 23, 42, 0.94);
  border-bottom-color: rgba(255, 255, 255, 0.11) !important;
  color: rgba(255, 255, 255, 0.78) !important;
}

html[data-theme="marosa-light"] .hmi-proof-item,
html[data-theme="marosa-light"] .hmi-shot-card {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.07) !important;
}

html[data-theme="marosa-light"] .hmi-showcase {
  margin-top: 0.25rem;
  margin-bottom: 2.5rem;
}

html[data-theme="marosa-light"] .hmi-shot-card h4,
html[data-theme="marosa-light"] .app-feature-card h4 {
  color: hsl(222, 33%, 11%) !important;
}

html[data-theme="marosa-light"] .app-feature-card {
  min-height: 13rem;
  background:
    linear-gradient(180deg, #ffffff, hsl(210, 20%, 98%)) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07) !important;
}

html[data-theme="marosa-light"] .app-feature-card:hover {
  border-color: rgba(59, 128, 97, 0.30) !important;
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.10) !important;
}

html[data-theme="marosa-light"] .app-icon svg,
html[data-theme="marosa-light"] .feature-icon-wrap svg,
html[data-theme="marosa-light"] .dual-control-icon svg,
html[data-theme="marosa-light"] .cta-tier-icon svg,
html[data-theme="marosa-light"] .persona-icon svg {
  color: hsl(158, 58%, 29%) !important;
  stroke: currentColor !important;
  filter: none !important;
}

html[data-theme="marosa-light"] .app-feature-grid {
  margin-top: 2.25rem;
}

html[data-theme="marosa-light"] .hmi-proof-grid {
  margin-top: 1rem;
}

html[data-theme="marosa-light"] .hmi-screenshot-grid {
  margin-top: 1rem;
}

html[data-theme="marosa-light"] .feature-card,
html[data-theme="marosa-light"] .app-feature-card,
html[data-theme="marosa-light"] .persona-card,
html[data-theme="marosa-light"] .pricing-card,
html[data-theme="marosa-light"] .faq-item {
  border-radius: 1rem !important;
}

/* --- 15. Reveal-on-scroll (JS adds .revealed) ---
   ----------------------------------------------------------- */
.reveal {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 {
  transition-delay: 0.1s;
}

.reveal-delay-2 {
  transition-delay: 0.2s;
}

.reveal-delay-3 {
  transition-delay: 0.3s;
}

.reveal-delay-4 {
  transition-delay: 0.4s;
}

.reveal-delay-5 {
  transition-delay: 0.5s;
}

.reveal-delay-6 {
  transition-delay: 0.6s;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .hero-glow,
  .hero-mockup,
  .cta-glow,
  .cta-glow-orb,
  .dot-ping-outer,
  .dot-ping-inner,
  .hmi-window-dot {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================
   Migrated inline CSS from index.html (ThemePlan_2 R2)
   ============================================================ */
/* Reading progress bar */
#reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--clr-teal-400), var(--clr-emerald-400));
    z-index: 100;
    transition: width 0.1s ease-out;
    box-shadow: 0 0 10px rgba(90, 175, 135, 0.6);
}

/* Proof pill */
.proof-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    background: rgba(90, 175, 135, 0.06);
    border: 1px solid rgba(90, 175, 135, 0.18);
    color: hsl(220, 15%, 85%);
    font-weight: 500;
    justify-content: center;
}

/* Problem cards */
.problem-grid {
    position: relative;
    z-index: 1;
}

.problem-visual {
    position: relative;
    width: 100%;
    margin: -0.25rem auto 2.25rem;
    padding: 1rem;
    border: 1px solid rgba(90, 175, 135, 0.18);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(90, 175, 135, 0.10), transparent 32%),
        linear-gradient(315deg, rgba(251, 113, 133, 0.09), transparent 36%),
        rgba(255, 255, 255, 0.025);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
    overflow: hidden;
}

.problem-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent 78%);
}

.problem-visual-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.75rem;
    text-align: center;
}

.problem-visual-eyebrow {
    color: var(--text-danger);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.problem-visual-copy strong {
    color: var(--text-strong);
    font-size: 0.95rem;
    font-weight: 800;
}

/* ThemePlan 4 — Stacked drift curves visual
   Replaces previous 4-box-funnel-chart layout with a single readable
   chart showing 1 target profile + 4 actual BT curves drifting away.
   Aspect-ratio container keeps SVG text proportions correct. */
.problem-visual-stage {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 920 / 320;
    margin-top: 0.5rem;
}

.problem-visual-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.pv-grid {
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 1;
    stroke-dasharray: 4 6;
}

.pv-axis-y text {
    fill: rgba(255, 255, 255, 0.42);
    font-size: 11px;
    font-weight: 600;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.pv-phase-labels text {
    fill: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pv-profile,
.pv-drift {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pv-profile {
    stroke: var(--accent-strong);
    stroke-width: 3.5;
    filter: drop-shadow(0 0 6px rgba(90, 175, 135, 0.4));
}

.pv-drift {
    stroke-width: 1.8;
    opacity: 0.78;
}

/* 4 drift curves — each its own color + dash pattern for instant ID */
.pv-drift-1 { stroke: hsl(45, 90%, 65%);  stroke-dasharray: 8 4; }     /* Mẻ sáng — yellow */
.pv-drift-2 { stroke: hsl(25, 92%, 62%);  stroke-dasharray: 4 4; }     /* Mẻ chiều — orange */
.pv-drift-3 { stroke: hsl(0, 85%, 70%);   stroke-dasharray: 12 5 2 5; }/* Hạt mới — rose dash-dot */
.pv-drift-4 { stroke: hsl(265, 75%, 72%); stroke-dasharray: 2 5; }     /* Ngày ẩm — purple dotted */

/* Legend strip below chart */
.problem-visual-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem 1.4rem;
    margin-top: 1.2rem;
    padding: 0.6rem 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.78rem;
}

.pv-legend {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-main);
    white-space: nowrap;
}

.pv-legend-swatch {
    display: inline-block;
    width: 24px;
    height: 3px;
    border-radius: 1.5px;
}

.pv-legend-swatch-profile {
    background: var(--accent-strong);
    height: 4px;
    box-shadow: 0 0 6px rgba(90, 175, 135, 0.5);
}
.pv-legend-swatch-1 { background: hsl(45, 90%, 65%); }
.pv-legend-swatch-2 { background: hsl(25, 92%, 62%); }
.pv-legend-swatch-3 { background: hsl(0, 85%, 70%); }
.pv-legend-swatch-4 { background: hsl(265, 75%, 72%); }

.pv-legend-profile { color: var(--text-strong); font-weight: 700; }

.problem-visual-caption {
    margin: 0.85rem 0 0;
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-style: italic;
}

.problem-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 8px;
    background: rgba(251, 113, 133, 0.05);
    border: 1px solid rgba(251, 113, 133, 0.18);
    overflow: hidden;
}

.problem-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 92% 18%, rgba(251, 113, 133, 0.14), transparent 30%),
        linear-gradient(90deg, rgba(90, 175, 135, 0.055), transparent 44%);
    opacity: 0.8;
}

.problem-pain {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: hsl(220, 15%, 92%);
    font-weight: 500;
    min-height: 1.75rem;
}

.problem-cost {
    position: relative;
    z-index: 1;
    color: hsl(0, 85%, 78%);
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.45;
}

/* Solution preview chip — links pain to its remediation section */
.problem-solution {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: auto;
    padding-top: 0.65rem;
    border-top: 1px dashed rgba(90, 175, 135, 0.25);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent-strong);
    text-decoration: none;
    transition: color 200ms ease, border-color 200ms ease;
}
.problem-solution:hover,
.problem-solution:focus-visible {
    color: var(--accent);
    border-top-color: rgba(90, 175, 135, 0.55);
    text-decoration: underline;
}
html[data-theme="marosa-light"] .problem-solution {
    border-top-color: rgba(59, 128, 97, 0.32);
}
html[data-theme="marosa-light"] .problem-solution:hover {
    border-top-color: var(--accent);
}

html[data-theme="marosa-light"] .problem-visual {
    background:
        linear-gradient(135deg, rgba(59, 128, 97, 0.10), transparent 34%),
        linear-gradient(315deg, rgba(225, 29, 72, 0.08), transparent 38%),
        rgba(255, 255, 255, 0.82);
    border-color: rgba(59, 128, 97, 0.20);
    box-shadow: 0 24px 56px rgba(15, 23, 42, 0.10);
}

html[data-theme="marosa-light"] .problem-visual::before {
    background-image:
        linear-gradient(rgba(15, 23, 42, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.055) 1px, transparent 1px);
}

html[data-theme="marosa-light"] .pv-grid {
    stroke: rgba(15, 23, 42, 0.10);
}

html[data-theme="marosa-light"] .pv-axis-y text,
html[data-theme="marosa-light"] .pv-phase-labels text {
    fill: rgba(15, 23, 42, 0.55);
}

html[data-theme="marosa-light"] .problem-visual-legend {
    border-top-color: rgba(15, 23, 42, 0.08);
}

@media (max-width: 767px) {
    .problem-visual {
        margin-bottom: 1.5rem;
        padding: 0.85rem;
    }

    .problem-visual-copy strong {
        font-size: 0.9rem;
    }

    .problem-visual-stage {
        /* Allow chart to grow taller on narrow screens so labels stay legible */
        aspect-ratio: 5 / 4;
    }

    .pv-axis-y text,
    .pv-phase-labels text {
        font-size: 13px;
    }

    .problem-visual-legend {
        gap: 0.45rem 1rem;
        font-size: 0.72rem;
    }
}

/* Connection cards */
.connection-card {
    padding: 2rem;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
}

.connection-card:hover { transform: translateY(-4px); }
.connection-card-a:hover { border-color: rgba(90, 175, 135, 0.4); }
.connection-card-b:hover { border-color: rgba(167, 139, 250, 0.4); }

.connection-tag {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

/* Kit price block (inside Model B card) */
.kit-price-block {
    margin-top: auto;
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.12), rgba(167, 139, 250, 0.04));
    border: 1px solid rgba(167, 139, 250, 0.3);
}

.kit-price-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    color: hsl(270, 75%, 80%);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.4rem;
}

.kit-price-header i { width: 14px; height: 14px; }

.kit-price-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.kit-price-amount {
    color: white;
    font-weight: 900;
    font-size: 1.6rem;
    line-height: 1;
}

.kit-price-divider {
    color: hsl(220, 15%, 50%);
    font-weight: 400;
}

.kit-price-amount-vnd {
    color: hsl(270, 75%, 86%);
    font-weight: 700;
    font-size: 1rem;
}

.kit-price-detail {
    color: hsl(220, 15%, 75%);
    font-size: 0.78rem;
    line-height: 1.5;
    margin: 0;
}

/* Light theme overrides — Bridge Kit price block */
html[data-theme="marosa-light"] .kit-price-block {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.10), rgba(124, 58, 237, 0.03)) !important;
    border-color: rgba(124, 58, 237, 0.32) !important;
}
html[data-theme="marosa-light"] .kit-price-header     { color: hsl(263, 62%, 38%) !important; }
html[data-theme="marosa-light"] .kit-price-amount     { color: hsl(222, 47%, 12%) !important; }
html[data-theme="marosa-light"] .kit-price-divider    { color: hsl(222, 14%, 45%) !important; }
html[data-theme="marosa-light"] .kit-price-amount-vnd { color: hsl(263, 62%, 38%) !important; }
html[data-theme="marosa-light"] .kit-price-detail     { color: hsl(222, 19%, 28%) !important; }
html[data-theme="marosa-light"] .kit-price-detail strong { color: hsl(222, 47%, 12%) !important; }

/* ════════════════════════════════════════════════════════
   Story section — levels panel footer (balances height)
═══════════════════════════════════════════════════════════ */
.story-levels-footer {
    margin-top: 1.5rem;
    padding: 1rem 1.1rem;
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(90, 175, 135, 0.3);
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.story-levels-footer-icons {
    display: flex;
    gap: 0.4rem;
    color: var(--clr-teal-400);
    flex-shrink: 0;
}

.story-levels-footer-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.story-levels-footer-text strong {
    color: white;
    font-weight: 700;
    font-size: 0.88rem;
    line-height: 1.3;
}

.story-levels-footer-text span {
    color: hsl(220, 15%, 70%);
    font-size: 0.72rem;
    line-height: 1.4;
}

/* ════════════════════════════════════════════════════════
   Connection Diagrams — visual flow for Models A & B
═══════════════════════════════════════════════════════════ */
.connection-diagrams {
    margin: 2.5rem 0 3rem 0;
}

.diagram-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .diagram-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

.diagram-card {
    padding: 1.5rem 1.25rem 1.75rem;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
}

.diagram-card-a { border-color: rgba(90, 175, 135, 0.25); }
.diagram-card-b { border-color: rgba(167, 139, 250, 0.25); }

.diagram-tag {
    align-self: center;
    display: inline-block;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    margin-bottom: 1.25rem;
}

.diagram-tag-a {
    background: rgba(90, 175, 135, 0.15);
    color: var(--clr-teal-400);
}

.diagram-tag-b {
    background: rgba(167, 139, 250, 0.15);
    color: hsl(270, 75%, 76%);
}

.diagram-flow {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.diagram-block {
    padding: 0.85rem 1rem;
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.diagram-block strong {
    color: white;
    font-weight: 700;
    font-size: 0.95rem;
}

.diagram-block small {
    color: hsl(220, 15%, 70%);
    font-size: 0.72rem;
    line-height: 1.4;
}

.diagram-block em {
    color: hsl(220, 15%, 70%);
    font-style: italic;
    font-weight: 400;
    font-size: 0.78rem;
}

.diagram-block-icons {
    display: flex;
    gap: 0.6rem;
    color: hsl(220, 15%, 65%);
    margin-bottom: 0.15rem;
}

/* Hardware block */
.diagram-block-hw {
    background: rgba(251, 113, 133, 0.06);
    border-color: rgba(251, 113, 133, 0.25);
}

.diagram-block-hw .diagram-block-icons { color: hsl(0, 85%, 75%); }

/* IPC block (Model A) */
.diagram-block-ipc {
    background: linear-gradient(180deg, rgba(90, 175, 135, 0.08), rgba(90, 175, 135, 0.03));
    border-color: rgba(90, 175, 135, 0.35);
    padding: 1rem;
}

/* PLC block (Model B) */
.diagram-block-plc {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.15);
}

/* Bridge Kit block (Model B) */
.diagram-block-bridge {
    background: linear-gradient(180deg, rgba(167, 139, 250, 0.10), rgba(167, 139, 250, 0.04));
    border-color: rgba(167, 139, 250, 0.45);
    padding: 1rem;
    position: relative;
}

.diagram-block-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
    flex-wrap: wrap;
}

.diagram-kit-price {
    font-size: 0.7rem;
    font-weight: 800;
    color: hsl(270, 85%, 88%);
    background: rgba(167, 139, 250, 0.2);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    margin-left: 0.35rem;
}

/* MAROSA Service highlight box (nested inside IPC or Bridge) */
.diagram-inner-marosa {
    margin-top: 0.75rem;
    padding: 0.75rem 0.85rem;
    border-radius: 0.6rem;
    background: linear-gradient(135deg, rgba(90, 175, 135, 0.18), rgba(52, 211, 153, 0.10));
    border: 1px dashed rgba(90, 175, 135, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.diagram-inner-marosa i {
    color: var(--clr-teal-400);
    margin-bottom: 0.1rem;
}

.diagram-inner-marosa strong {
    color: var(--clr-teal-400);
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

.diagram-inner-marosa small {
    color: hsl(220, 15%, 78%);
    font-size: 0.7rem;
}

/* App block */
.diagram-block-app {
    background: rgba(167, 139, 250, 0.06);
    border-color: rgba(167, 139, 250, 0.25);
}

.diagram-block-app .diagram-block-icons { color: hsl(270, 75%, 80%); }

/* Arrow between blocks */
.diagram-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0;
    position: relative;
}

.diagram-arrow-line {
    width: 2px;
    height: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.05));
}

.diagram-arrow-label {
    font-size: 0.68rem;
    color: hsl(220, 15%, 60%);
    background: rgba(0, 0, 0, 0.3);
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin: 0.15rem 0;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.diagram-arrow-head {
    color: rgba(255, 255, 255, 0.3);
    line-height: 0;
}

/* Diagram caption */
.diagram-caption {
    margin-top: 1.25rem;
    padding: 0.6rem 0.85rem;
    border-radius: 0.6rem;
    font-size: 0.8rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    text-align: center;
}

.diagram-caption-a {
    background: rgba(90, 175, 135, 0.08);
    border: 1px solid rgba(90, 175, 135, 0.2);
    color: var(--clr-teal-400);
}

.diagram-caption-b {
    background: rgba(167, 139, 250, 0.08);
    border: 1px solid rgba(167, 139, 250, 0.2);
    color: hsl(270, 75%, 80%);
}

/* Decision hint below diagrams */
.diagram-decision {
    margin-top: 1.75rem;
    padding: 1rem 1.25rem;
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.diagram-decision-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
}

@media (min-width: 768px) {
    .diagram-decision-row {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

.diagram-decision-q {
    color: white;
    font-weight: 700;
    font-size: 0.95rem;
}

.diagram-decision-paths {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    color: hsl(220, 15%, 80%);
    font-size: 0.85rem;
    flex-wrap: wrap;
    justify-content: center;
}

.diagram-decision-yes { color: var(--clr-teal-400); }
.diagram-decision-no { color: hsl(270, 75%, 80%); }

.diagram-decision-divider {
    color: hsl(220, 15%, 40%);
    font-weight: 700;
}

/* Plain-language connection diagrams for non-technical buyers */
.simple-diagrams {
    padding: 1.25rem;
    border-radius: 1.5rem;
    background:
        radial-gradient(circle at 18% 14%, rgba(90, 175, 135, 0.11), transparent 24rem),
        radial-gradient(circle at 88% 22%, rgba(167, 139, 250, 0.10), transparent 24rem),
        rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.simple-kicker {
    display: inline-flex;
    margin-bottom: 0.75rem;
    padding: 0.35rem 0.8rem;
    border: 1px solid rgba(45, 212, 191, 0.25);
    border-radius: 999px;
    background: rgba(90, 175, 135, 0.09);
    color: var(--clr-teal-300);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.simple-model-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 1100px) {
    .simple-model-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.simple-model-card {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.15rem;
    border-radius: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.028)),
        rgba(0, 0, 0, 0.16);
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.24);
}

.simple-model-card-a { border-color: rgba(90, 175, 135, 0.28); }
.simple-model-card-b { border-color: rgba(167, 139, 250, 0.28); }

.simple-model-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.simple-model-tag {
    display: inline-flex;
    margin-bottom: 0.65rem;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.simple-model-tag-a {
    background: rgba(90, 175, 135, 0.14);
    color: var(--clr-teal-300);
}

.simple-model-tag-b {
    background: rgba(167, 139, 250, 0.16);
    color: hsl(270, 90%, 82%);
}

.simple-model-head h4 {
    margin: 0 0 0.35rem;
    color: white;
    font-size: 1.18rem;
    font-weight: 900;
    line-height: 1.25;
}

.simple-model-head p {
    max-width: 28rem;
    margin: 0;
    color: hsl(220, 15%, 78%);
    font-size: 0.88rem;
    line-height: 1.55;
}

.simple-answer {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
    padding: 0.55rem 0.75rem;
    border-radius: 0.8rem;
    font-size: 0.78rem;
    font-weight: 900;
    white-space: nowrap;
}

.simple-answer-a {
    background: rgba(90, 175, 135, 0.11);
    color: var(--clr-teal-300);
    border: 1px solid rgba(45, 212, 191, 0.22);
}

.simple-answer-b {
    background: rgba(167, 139, 250, 0.13);
    color: hsl(270, 90%, 84%);
    border: 1px solid rgba(167, 139, 250, 0.28);
}

.simple-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: 0.65rem;
}

.simple-flow-b {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr) auto minmax(0, 1fr);
}

.simple-node {
    display: flex;
    min-height: 9.25rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.45rem;
    padding: 1rem 0.75rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.11);
    background: rgba(255, 255, 255, 0.045);
    text-align: center;
}

.simple-node-core {
    background: linear-gradient(180deg, rgba(90, 175, 135, 0.14), rgba(90, 175, 135, 0.055));
    border-color: rgba(45, 212, 191, 0.34);
}

.simple-node-bridge {
    background: linear-gradient(180deg, rgba(167, 139, 250, 0.16), rgba(167, 139, 250, 0.06));
    border-color: rgba(167, 139, 250, 0.38);
}

.simple-node-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.45rem;
    height: 2.45rem;
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.08);
    color: var(--clr-teal-300);
}

.simple-model-card-b .simple-node-icon {
    color: hsl(270, 90%, 84%);
}

.simple-node strong {
    color: white;
    font-size: 0.95rem;
    font-weight: 900;
    line-height: 1.25;
}

.simple-node small {
    max-width: 11rem;
    color: hsl(220, 15%, 72%);
    font-size: 0.76rem;
    line-height: 1.45;
}

.simple-flow-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 3.25rem;
    color: hsl(220, 15%, 62%);
}

.simple-flow-arrow span {
    max-width: 4.5rem;
    padding: 0.24rem 0.45rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.26);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: hsl(220, 15%, 78%);
    font-size: 0.64rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
}

.simple-note-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
    margin-top: auto;
}

@media (min-width: 640px) {
    .simple-note-row {
        grid-template-columns: 1fr 1fr;
    }
}

.simple-note-row span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 3rem;
    padding: 0.7rem 0.85rem;
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: hsl(220, 15%, 82%);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.35;
}

.simple-model-card-a .simple-note-row span svg { color: var(--clr-teal-300); }
.simple-model-card-b .simple-note-row span svg { color: hsl(270, 90%, 84%); }

.simple-decision {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.8rem;
    margin-top: 1rem;
}

@media (min-width: 900px) {
    .simple-decision {
        grid-template-columns: repeat(3, 1fr);
    }
}

.simple-decision-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.2rem 0.75rem;
    align-items: center;
    padding: 0.85rem 1rem;
    border-radius: 0.95rem;
    border: 1px solid rgba(45, 212, 191, 0.15);
    background: rgba(90, 175, 135, 0.055);
    text-align: left;
}

.simple-decision-card span {
    grid-row: 1 / 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: rgba(45, 212, 191, 0.16);
    color: var(--clr-teal-300);
    font-size: 0.8rem;
    font-weight: 950;
}

.simple-decision-card strong {
    color: white;
    font-size: 0.86rem;
    font-weight: 900;
}

.simple-decision-card small {
    color: hsl(220, 15%, 72%);
    font-size: 0.76rem;
    line-height: 1.45;
}

@media (max-width: 900px) {
    .simple-model-head {
        flex-direction: column;
    }

    .simple-flow,
    .simple-flow-b {
        grid-template-columns: 1fr;
    }

    .simple-flow-arrow {
        min-height: 2.5rem;
        transform: none;
    }

    .simple-flow-arrow svg {
        transform: rotate(90deg);
    }

    .simple-node {
        min-height: auto;
    }
}

html[data-theme="marosa-light"] .simple-diagrams {
    background:
        radial-gradient(circle at 18% 14%, rgba(59, 128, 97, 0.08), transparent 22rem),
        radial-gradient(circle at 88% 22%, rgba(124, 58, 237, 0.07), transparent 22rem),
        rgba(255, 255, 255, 0.74);
    border-color: rgba(15, 23, 42, 0.10);
}

html[data-theme="marosa-light"] .simple-model-card,
html[data-theme="marosa-light"] .simple-node,
html[data-theme="marosa-light"] .simple-note-row span,
html[data-theme="marosa-light"] .simple-decision-card {
    background: rgba(255, 255, 255, 0.90);
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.07);
}

html[data-theme="marosa-light"] .simple-node-core {
    background: linear-gradient(180deg, rgba(59, 128, 97, 0.11), rgba(59, 128, 97, 0.045));
    border-color: rgba(59, 128, 97, 0.28);
}

html[data-theme="marosa-light"] .simple-node-bridge {
    background: linear-gradient(180deg, rgba(124, 58, 237, 0.10), rgba(124, 58, 237, 0.045));
    border-color: rgba(124, 58, 237, 0.25);
}

html[data-theme="marosa-light"] .simple-model-head h4,
html[data-theme="marosa-light"] .simple-node strong,
html[data-theme="marosa-light"] .simple-decision-card strong {
    color: hsl(222, 33%, 11%);
}

html[data-theme="marosa-light"] .simple-model-head p,
html[data-theme="marosa-light"] .simple-node small,
html[data-theme="marosa-light"] .simple-note-row span,
html[data-theme="marosa-light"] .simple-decision-card small {
    color: hsl(222, 19%, 30%);
}

html[data-theme="marosa-light"] .simple-flow-arrow span {
    background: rgba(15, 23, 42, 0.055);
    border-color: rgba(15, 23, 42, 0.10);
    color: hsl(222, 19%, 34%);
}

html[data-theme="marosa-light"] .simple-kicker,
html[data-theme="marosa-light"] .simple-model-tag-a,
html[data-theme="marosa-light"] .simple-answer-a {
    background: rgba(59, 128, 97, 0.12);
    border-color: rgba(59, 128, 97, 0.24);
    color: hsl(152, 66%, 27%);
}

html[data-theme="marosa-light"] .simple-model-tag-b,
html[data-theme="marosa-light"] .simple-answer-b {
    background: rgba(124, 58, 237, 0.10);
    border-color: rgba(124, 58, 237, 0.22);
    color: hsl(263, 62%, 42%);
}

html[data-theme="marosa-light"] .simple-node-icon {
    background: rgba(59, 128, 97, 0.09);
    color: hsl(152, 66%, 30%);
}

html[data-theme="marosa-light"] .simple-model-card-b .simple-node-icon {
    background: rgba(124, 58, 237, 0.09);
    color: hsl(263, 62%, 45%);
}

/* Brand chip */
.brand-chip {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: hsl(220, 15%, 80%);
    font-weight: 600;
    font-size: 0.85rem;
}

.brand-chip.brand-chip-highlight {
    background: linear-gradient(135deg, rgba(90, 175, 135, 0.15), rgba(52, 211, 153, 0.08));
    border-color: rgba(90, 175, 135, 0.45);
    color: white;
}

/* Dual control */
.dual-control-highlight {
    margin-top: 2rem;
    padding: 1.75rem;
    border-radius: 1.5rem;
    background: linear-gradient(135deg, rgba(90, 175, 135, 0.06), rgba(52, 211, 153, 0.04));
    border: 1px solid rgba(90, 175, 135, 0.25);
}

.dual-control-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(90, 175, 135, 0.12);
    color: var(--clr-teal-400);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Dual-control 4-scenario grid */
.dual-control-grid {
    margin-top: 1.5rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 768px) {
    .dual-control-grid {
        grid-template-columns: 1fr;
    }
}

.dual-control-scenario {
    padding: 1.1rem 1.15rem 1rem;
    border-radius: 1rem;
    background: rgba(15, 23, 42, 0.35);
    border: 1px solid rgba(90, 175, 135, 0.18);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.dc-scenario-head {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--clr-teal-400);
}

.dc-scenario-head svg {
    width: 16px;
    height: 16px;
}

.dc-scenario-label {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clr-teal-400);
}

.dc-scenario-title {
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.94);
}

.dc-scenario-body {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
}

.dc-scenario-spec {
    margin-top: auto;
    padding-top: 0.55rem;
    border-top: 1px dashed rgba(90, 175, 135, 0.22);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.72rem;
    color: rgba(90, 175, 135, 0.85);
    letter-spacing: 0.02em;
}

/* ===== Dual-control scenario animations ===== */
.dc-viz {
    position: relative;
    height: 40px;
    margin-top: 0.25rem;
    border-radius: 0.55rem;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(90, 175, 135, 0.14);
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0 0.7rem;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.68rem;
    letter-spacing: 0.05em;
}

/* --- Card 1: Hold-to-Override (slider + state labels) --- */
.dc-viz-hold .dc-viz-track {
    position: relative;
    width: 55%;
    height: 4px;
    background: rgba(90, 175, 135, 0.22);
    border-radius: 2px;
    margin-right: 0.6rem;
}
.dc-viz-hold .dc-viz-knob {
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--clr-teal-400);
    box-shadow: 0 0 8px rgba(45, 212, 191, 0.55);
    transform: translate(0, -50%);
    animation: dcKnobMove 5s ease-in-out infinite;
}
.dc-viz-hold .dc-viz-state {
    position: absolute;
    right: 0.7rem;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    font-weight: 700;
    opacity: 0;
}
.dc-viz-hold .dc-viz-state-hold {
    background: rgba(251, 191, 36, 0.18);
    border: 1px solid rgba(251, 191, 36, 0.55);
    color: #fbbf24;
    animation: dcHoldFlash 5s ease-in-out infinite;
}
.dc-viz-hold .dc-viz-state-resume {
    background: rgba(90, 175, 135, 0.18);
    border: 1px solid rgba(90, 175, 135, 0.55);
    color: var(--clr-teal-400);
    animation: dcResumeFlash 5s ease-in-out infinite;
}
@keyframes dcKnobMove {
    0%   { left: 0; }
    25%  { left: calc(100% - 14px); }
    60%  { left: calc(100% - 14px); }
    100% { left: 0; }
}
@keyframes dcHoldFlash {
    0%, 22%   { opacity: 0; }
    28%, 58%  { opacity: 1; }
    65%, 100% { opacity: 0; }
}
@keyframes dcResumeFlash {
    0%, 65%   { opacity: 0; }
    72%, 92%  { opacity: 1; }
    98%, 100% { opacity: 0; }
}

/* --- Card 2: Network failure (wifi waves dropping + setpoint persists) --- */
.dc-viz-net .dc-viz-wifi {
    position: relative;
    width: 22px;
    height: 22px;
    margin-right: 0.7rem;
    display: inline-block;
}
.dc-viz-net .dc-viz-wave {
    position: absolute;
    left: 50%;
    bottom: 2px;
    border: 2px solid var(--clr-teal-400);
    border-bottom: 0;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    transform: translateX(-50%);
    opacity: 1;
}
.dc-viz-net .dc-viz-wave-1 { width: 6px;  height: 4px;  animation: dcWifiOut 4s ease-in-out infinite; }
.dc-viz-net .dc-viz-wave-2 { width: 12px; height: 8px;  animation: dcWifiOut 4s ease-in-out 0.15s infinite; }
.dc-viz-net .dc-viz-wave-3 { width: 18px; height: 12px; animation: dcWifiOut 4s ease-in-out 0.3s infinite; }
.dc-viz-net .dc-viz-sp {
    color: var(--clr-teal-400);
    font-weight: 700;
    animation: dcSpHeld 4s ease-in-out infinite;
}
@keyframes dcWifiOut {
    0%, 20%   { opacity: 1; border-color: var(--clr-teal-400); }
    40%, 90%  { opacity: 0.15; border-color: #ef4444; }
    100%      { opacity: 1; border-color: var(--clr-teal-400); }
}
@keyframes dcSpHeld {
    0%, 25%   { opacity: 0.6; }
    45%, 90%  { opacity: 1; text-shadow: 0 0 8px rgba(45, 212, 191, 0.55); }
    100%      { opacity: 0.6; text-shadow: none; }
}

/* --- Card 3: Service crash (dot + status text cycling) --- */
.dc-viz-crash .dc-viz-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 0.7rem;
    background: var(--clr-teal-400);
    box-shadow: 0 0 8px rgba(45, 212, 191, 0.6);
    animation: dcCrashDot 4.5s ease-in-out infinite;
}
.dc-viz-crash .dc-viz-status {
    position: relative;
    flex: 1;
    height: 1em;
}
.dc-viz-crash .dc-viz-status > span {
    position: absolute;
    inset: 0;
    font-weight: 700;
    opacity: 0;
}
.dc-viz-crash .dc-viz-status-ok    { color: var(--clr-teal-400); animation: dcStatusOk    4.5s ease-in-out infinite; }
.dc-viz-crash .dc-viz-status-down  { color: #ef4444;             animation: dcStatusDown  4.5s ease-in-out infinite; }
.dc-viz-crash .dc-viz-status-boot  { color: #fbbf24;             animation: dcStatusBoot  4.5s ease-in-out infinite; }
@keyframes dcCrashDot {
    0%, 20%   { background: var(--clr-teal-400); box-shadow: 0 0 8px rgba(45, 212, 191, 0.6); }
    25%, 55%  { background: #ef4444; box-shadow: 0 0 10px rgba(239, 68, 68, 0.7); }
    60%, 85%  { background: #fbbf24; box-shadow: 0 0 10px rgba(251, 191, 36, 0.7); }
    90%, 100% { background: var(--clr-teal-400); box-shadow: 0 0 8px rgba(45, 212, 191, 0.6); }
}
@keyframes dcStatusOk   { 0%, 20%  { opacity: 1; } 25%, 90% { opacity: 0; } 95%, 100% { opacity: 1; } }
@keyframes dcStatusDown { 0%, 20%  { opacity: 0; } 25%, 55% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes dcStatusBoot { 0%, 55%  { opacity: 0; } 60%, 85% { opacity: 1; } 90%, 100% { opacity: 0; } }

/* --- Card 4: E-Stop (button press + rail bolt) --- */
.dc-viz-estop {
    gap: 0.6rem;
}
.dc-viz-estop .dc-viz-estop-btn {
    flex-shrink: 0;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    background: #ef4444;
    color: white;
    font-weight: 800;
    letter-spacing: 0.1em;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
    animation: dcEstopPress 3.5s ease-in-out infinite;
}
.dc-viz-estop .dc-viz-estop-rail {
    position: relative;
    flex: 1;
    height: 2px;
    background: rgba(239, 68, 68, 0.22);
    border-radius: 1px;
    display: flex;
    align-items: center;
}
.dc-viz-estop .dc-viz-estop-bolt {
    position: absolute;
    top: 50%;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.8);
    transform: translateY(-50%);
    animation: dcEstopBolt 3.5s ease-in-out infinite;
}
.dc-viz-estop .dc-viz-estop-label {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #ef4444;
    font-weight: 700;
    opacity: 0;
    animation: dcEstopLabel 3.5s ease-in-out infinite;
}
@keyframes dcEstopPress {
    0%, 30%  { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
    35%      { transform: scale(0.92); box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
    45%, 100%{ transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
@keyframes dcEstopBolt {
    0%, 30%  { left: 0; opacity: 0; }
    35%      { opacity: 1; }
    70%      { left: calc(100% - 8px); opacity: 1; }
    85%, 100%{ left: calc(100% - 8px); opacity: 0; }
}
@keyframes dcEstopLabel {
    0%, 60%   { opacity: 0; }
    70%, 90%  { opacity: 1; }
    95%, 100% { opacity: 0; }
}

/* --- Sovereignty bar: animated arrows --- */
.dual-control-sovereignty .dc-sov-arrow {
    animation: dcSovArrow 2.4s ease-in-out infinite;
}
.dual-control-sovereignty .dc-sov-arrow:nth-of-type(2) { animation-delay: 0.4s; }
.dual-control-sovereignty .dc-sov-item .dc-sov-num {
    animation: dcSovNum 2.4s ease-in-out infinite;
}
.dual-control-sovereignty .dc-sov-item:nth-of-type(2) .dc-sov-num { animation-delay: 0.6s; }
.dual-control-sovereignty .dc-sov-item:nth-of-type(3) .dc-sov-num { animation-delay: 1.2s; }
@keyframes dcSovArrow {
    0%, 100% { transform: translateX(0); opacity: 0.45; }
    50%      { transform: translateX(3px); opacity: 1; }
}
@keyframes dcSovNum {
    0%, 100% { box-shadow: 0 0 0 0 rgba(90, 175, 135, 0); }
    50%      { box-shadow: 0 0 0 4px rgba(90, 175, 135, 0.18); }
}

/* Light theme overrides for viz */
html[data-theme="marosa-light"] .dc-viz {
    background: rgba(15, 23, 42, 0.045) !important;
    border-color: rgba(59, 128, 97, 0.18) !important;
}
html[data-theme="marosa-light"] .dc-viz-hold .dc-viz-track {
    background: rgba(59, 128, 97, 0.2) !important;
}
html[data-theme="marosa-light"] .dc-viz-sp,
html[data-theme="marosa-light"] .dc-viz-status-ok {
    color: hsl(152, 80%, 24%) !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .dc-viz-knob,
    .dc-viz-state,
    .dc-viz-wave,
    .dc-viz-sp,
    .dc-viz-dot,
    .dc-viz-status > span,
    .dc-viz-estop-btn,
    .dc-viz-estop-bolt,
    .dc-viz-estop-label,
    .dual-control-sovereignty .dc-sov-arrow,
    .dual-control-sovereignty .dc-sov-num {
        animation: none !important;
    }
    .dc-viz-state-resume,
    .dc-viz-sp,
    .dc-viz-status-ok { opacity: 1 !important; }
    .dc-viz-state-hold,
    .dc-viz-status-down,
    .dc-viz-status-boot,
    .dc-viz-estop-label { opacity: 0 !important; }
}

/* Sovereignty hierarchy bar */
.dual-control-sovereignty {
    margin-top: 1.25rem;
    padding: 0.9rem 1.1rem;
    border-radius: 0.85rem;
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(90, 175, 135, 0.22);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.85rem;
}

.dc-sov-label {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--clr-teal-400);
    margin-right: 0.25rem;
}

.dc-sov-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.86);
}

.dc-sov-num {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(90, 175, 135, 0.18);
    border: 1px solid rgba(90, 175, 135, 0.45);
    color: var(--clr-teal-400);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dc-sov-arrow {
    color: rgba(90, 175, 135, 0.55);
    font-weight: 700;
}

@media (max-width: 640px) {
    .dual-control-sovereignty {
        flex-direction: column;
        align-items: flex-start;
    }
    .dc-sov-arrow {
        display: none;
    }
}

/* Light theme overrides */
html[data-theme="marosa-light"] .dual-control-scenario {
    background: rgba(255, 255, 255, 0.7) !important;
    border-color: rgba(59, 128, 97, 0.22) !important;
}

html[data-theme="marosa-light"] .dc-scenario-title {
    color: hsl(222, 47%, 14%) !important;
}

html[data-theme="marosa-light"] .dc-scenario-body {
    color: hsl(222, 24%, 30%) !important;
}

html[data-theme="marosa-light"] .dc-scenario-spec {
    color: hsl(152, 70%, 28%) !important;
    border-top-color: rgba(59, 128, 97, 0.3) !important;
}

html[data-theme="marosa-light"] .dual-control-sovereignty {
    background: rgba(255, 255, 255, 0.75) !important;
    border-color: rgba(59, 128, 97, 0.26) !important;
}

html[data-theme="marosa-light"] .dc-sov-item {
    color: hsl(222, 47%, 18%) !important;
}

html[data-theme="marosa-light"] .dc-sov-label,
html[data-theme="marosa-light"] .dc-scenario-label,
html[data-theme="marosa-light"] .dc-sov-num {
    color: hsl(152, 70%, 28%) !important;
}

html[data-theme="marosa-light"] .dc-sov-num {
    background: rgba(59, 128, 97, 0.12) !important;
    border-color: rgba(59, 128, 97, 0.4) !important;
}

/* Platform badges */
.platform-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: hsl(220, 15%, 85%);
    font-size: 0.85rem;
    font-weight: 500;
}

/* Cert badges */
.cert-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: hsl(220, 15%, 78%);
    font-size: 0.75rem;
    font-weight: 600;
}

.cert-badge-sm { font-size: 0.68rem; padding: 0.25rem 0.6rem; }

/* Persona cards */
.persona-card {
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.persona-card:hover {
    transform: translateY(-4px);
    border-color: rgba(90, 175, 135, 0.3);
}

.persona-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.persona-title {
    color: white;
    font-weight: 800;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.persona-target {
    color: hsl(220, 15%, 60%);
    font-size: 0.8rem;
    margin-bottom: 1rem;
}

.persona-pains {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1rem;
    flex: 1;
}

.persona-pain-item {
    font-size: 0.8rem;
    color: hsl(220, 15%, 75%);
    padding: 0.4rem 0.6rem;
    background: rgba(251, 113, 133, 0.05);
    border-left: 2px solid rgba(251, 113, 133, 0.4);
    border-radius: 4px;
}

.persona-solution {
    padding: 0.85rem;
    border-radius: 0.75rem;
    background: rgba(90, 175, 135, 0.08);
    border: 1px solid rgba(90, 175, 135, 0.2);
    margin-bottom: 1rem;
}

.persona-solution strong {
    display: block;
    color: var(--clr-teal-400);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.3rem;
}

.persona-solution p {
    color: hsl(220, 15%, 88%);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
}

.persona-cta {
    text-align: center;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(90, 175, 135, 0.4);
    color: var(--clr-teal-400);
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    text-decoration: none;
}

.persona-cta:hover {
    background: rgba(90, 175, 135, 0.1);
    color: white;
}

/* Comparison table */
.compare-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.compare-table th, .compare-table td {
    padding: 0.85rem 1rem;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.9rem;
}

.compare-table thead th {
    background: rgba(255, 255, 255, 0.03);
    color: hsl(220, 15%, 90%);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.compare-table tbody td { color: hsl(220, 15%, 80%); }

.compare-table tbody td:first-child,
.compare-table thead th:first-child {
    text-align: left;
    font-weight: 600;
    color: white;
}

.compare-table .compare-highlight {
    background: rgba(90, 175, 135, 0.08);
    color: white !important;
    font-weight: 700;
}

.compare-table tbody tr:last-child td { border-bottom: none; }

.compare-positioning-note {
    margin-top: 1.5rem;
    padding: 1.25rem 1.5rem;
    border-radius: 1rem;
    background:
        linear-gradient(90deg, rgba(90, 175, 135,0.04), rgba(167,139,250,0.04));
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.compare-positioning-note p {
    color: hsl(220, 15%, 82%);
    font-size: 0.92rem;
    line-height: 1.75;
    margin: 0;
}

html[data-theme="marosa-light"] .compare-positioning-note {
    background: linear-gradient(90deg, rgba(59, 128, 97,0.05), rgba(124,58,237,0.05));
    border-color: rgba(15, 23, 42, 0.10);
}

html[data-theme="marosa-light"] .compare-positioning-note p {
    color: hsl(222, 19%, 28%);
}

/* Case study */
.case-stat-card {
    padding: 1.5rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}

.case-stat-label {
    text-transform: uppercase;
    font-size: 0.75rem;
    color: hsl(220, 15%, 65%);
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
}

.case-stat-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin-bottom: 0.5rem;
}

.case-stat-before {
    font-size: 1.5rem;
    font-weight: 700;
    color: hsl(0, 85%, 75%);
    text-decoration: line-through;
    text-decoration-color: rgba(251, 113, 133, 0.5);
}

.case-stat-after {
    font-size: 2rem;
    font-weight: 900;
    color: var(--clr-teal-400);
}

.case-stat-delta {
    font-size: 0.85rem;
    color: hsl(220, 15%, 78%);
    font-weight: 500;
}

.case-quote-panel {
    margin-top: 2rem;
    padding: 2.5rem;
    border-radius: 1.5rem;
    background: linear-gradient(135deg, rgba(90, 175, 135, 0.06), rgba(52, 211, 153, 0.03));
    border: 1px solid rgba(90, 175, 135, 0.2);
    position: relative;
    text-align: center;
}

.case-quote-mark {
    font-size: 5rem;
    line-height: 0.5;
    color: rgba(90, 175, 135, 0.3);
    font-family: Georgia, serif;
    margin-bottom: 1rem;
}

.case-quote-text {
    color: hsl(220, 15%, 92%);
    font-size: 1.15rem;
    line-height: 1.7;
    font-style: italic;
    max-width: 800px;
    margin: 0 auto 1.5rem;
}

.case-quote-author {
    color: hsl(220, 15%, 75%);
    font-size: 0.9rem;
}

.case-quote-author strong {
    color: white;
    display: block;
    margin-bottom: 0.25rem;
}

.case-quote-author span {
    font-size: 0.8rem;
    color: hsl(220, 15%, 60%);
}

/* Pricing / Packages cards */
.pricing-card {
    padding: 2rem;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    position: relative;
}

.pricing-card-featured {
    background: linear-gradient(180deg, rgba(90, 175, 135, 0.08), rgba(255, 255, 255, 0.02));
    border-color: rgba(90, 175, 135, 0.4);
    box-shadow: 0 20px 60px -20px rgba(90, 175, 135, 0.3);
}

.pricing-badge-featured {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--clr-teal-400);
    color: hsl(222, 25%, 10%);
    font-weight: 800;
    font-size: 0.7rem;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    letter-spacing: 0.05em;
}

/* MAROSA — Standard (LBN/MAROSA bundled) tier: pine accent + corner motif */
.pricing-card-bundled {
    background: linear-gradient(180deg, rgba(1, 135, 99, 0.10), rgba(255, 255, 255, 0.02));
    border-color: var(--color-pine, #018763);
    border-radius: var(--radius-corner, 20px) 0.75rem 0.75rem 0.75rem;
    box-shadow: 0 20px 60px -22px rgba(1, 135, 99, 0.35);
}
.pricing-badge-bundled {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-pine, #018763);
    color: #fff;
    font-weight: 800;
    font-size: 0.7rem;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* FAQ accordion — open state border uses brand primary */
.faq-item[open] {
    border-color: var(--primary) !important;
}

.pricing-tier-name {
    color: white;
    font-weight: 800;
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.pricing-tier-target {
    color: hsl(220, 15%, 70%);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.pricing-price {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.lbn-bonus-strip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, rgba(90, 175, 135, 0.15), rgba(52, 211, 153, 0.08));
    border: 1px solid rgba(90, 175, 135, 0.4);
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
}

.lbn-bonus-strip i { color: var(--clr-teal-400); }

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem 0;
    flex: 1;
}

.pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.4rem 0;
    font-size: 0.9rem;
    color: hsl(220, 15%, 88%);
}

.pricing-feature-section {
    padding-top: 0.75rem !important;
    margin-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: hsl(220, 15%, 95%) !important;
    font-size: 0.85rem !important;
}

.pricing-feature-section.pricing-feature-pro {
    color: var(--clr-teal-400) !important;
}

/* Custom service strip */
.custom-service-strip {
    margin-top: 2rem;
    padding: 1.5rem;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.custom-service-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: hsl(220, 15%, 78%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* FAQ */
.faq-item {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
}

.faq-item summary {
    cursor: pointer;
    padding: 1.1rem 1.5rem;
    color: white;
    font-weight: 600;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
    content: '+';
    color: var(--clr-teal-400);
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1;
    transition: transform 0.2s ease;
}

.faq-item[open] summary::after { content: '−'; }

.faq-body {
    padding: 0 1.5rem 1.25rem 1.5rem;
    color: hsl(220, 15%, 80%);
    line-height: 1.7;
    font-size: 0.95rem;
}

/* Under the hood */
.under-the-hood {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.5rem;
    padding: 1.25rem 1.75rem;
    background: rgba(255, 255, 255, 0.02);
}

.under-the-hood-summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    font-weight: 600;
    list-style: none;
}

.under-the-hood-summary::-webkit-details-marker { display: none; }

/* CTA tier */
.cta-tier {
    position: relative;
    padding: 2rem 1.75rem;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    text-align: center;
}

.cta-tier-hot {
    background: linear-gradient(135deg, rgba(90, 175, 135, 0.12), rgba(52, 211, 153, 0.06));
    border-color: rgba(90, 175, 135, 0.4);
    box-shadow: 0 20px 60px -20px rgba(90, 175, 135, 0.4);
}

.cta-tier-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    color: hsl(222, 25%, 10%);
    font-weight: 800;
    font-size: 0.7rem;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    letter-spacing: 0.05em;
}

.cta-tier-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.cta-tier-title {
    color: white;
    font-weight: 800;
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cta-tier-desc {
    color: hsl(220, 15%, 80%);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex: 1;
}

/* ════════════════════════════════════════════════════════
   TECHNOLOGY SHOWCASE — 6 moat cards
═══════════════════════════════════════════════════════════ */

/* ThemePlan 4 — 6-item teaser grid: 1 / 2 / 3 columns, i.e. 3×2 on desktop.
   Column count is pinned rather than auto-fit so card 06 never orphans on its own row. */
.tech-teaser-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.95rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
    .tech-teaser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .tech-teaser-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.1rem;
    }
}

.tech-teaser-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem 1.1rem 1.1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-main);
    text-decoration: none;
    transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}

.tech-teaser-item:hover,
.tech-teaser-item:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(90, 175, 135, 0.45);
    background: rgba(90, 175, 135, 0.07);
}

@media (min-width: 1024px) {
    .tech-teaser-item { padding: 1.15rem 1.35rem 1.3rem; }
}

.tech-teaser-num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--accent-strong);
    letter-spacing: 0.1em;
}

.tech-teaser-eyebrow {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.tech-teaser-title {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--text-strong);
    line-height: 1.3;
}

.tech-teaser-out {
    font-size: 0.78rem;
    color: var(--text-main);
    line-height: 1.45;
}

html[data-theme="marosa-light"] .tech-teaser-item {
    background: rgba(15, 23, 42, 0.025);
    border-color: rgba(15, 23, 42, 0.10);
}
html[data-theme="marosa-light"] .tech-teaser-item:hover,
html[data-theme="marosa-light"] .tech-teaser-item:focus-visible {
    background: rgba(59, 128, 97, 0.07);
    border-color: rgba(59, 128, 97, 0.4);
}

/* Mini SVG visual at bottom of each teaser card.
   margin-top:auto pins it to the card floor so all six baselines line up regardless
   of how many lines the title/outcome wrap to (the 0.4rem flex gap keeps the min gap). */
.tech-teaser-viz {
    width: 100%;
    height: 52px;
    margin-top: auto;
    overflow: visible;
}

/* At 3 columns a card is ~1.6× wider than in the old 5-up row — let the viz scale
   with it (viewBox is 160×40) instead of floating small in the middle. */
@media (min-width: 1024px) {
    .tech-teaser-viz {
        height: auto;
        aspect-ratio: 160 / 40;
        max-height: 74px;
    }
}

.tech-teaser-viz text {
    fill: var(--text-muted);
    font-weight: 700;
    letter-spacing: 0.04em;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.tech-teaser-viz .tv-lbl       { fill: rgba(255, 255, 255, 0.6); font-size: 10px; font-weight: 800; }
.tech-teaser-viz .tv-val       { font-size: 10px; font-weight: 800; }
.tech-teaser-viz .tv-val-ff,
.tech-teaser-viz .tv-cal-result { fill: var(--accent-strong); }
.tech-teaser-viz .tv-val-pid   { fill: hsl(25, 92%, 65%); }
.tech-teaser-viz .tv-pipe-num  { fill: var(--text-strong); font-size: 9px; font-weight: 800; }
.tech-teaser-viz .tv-pipe-arrow { fill: var(--accent-strong); font-size: 14px; }
.tech-teaser-viz .tv-cal-result { font-size: 10px; }

/* Card 01 — Hybrid Control (FF + PID bars) */
.tv-bar-track { fill: rgba(255, 255, 255, 0.06); }
.tv-bar-ff   { fill: var(--accent-strong); filter: drop-shadow(0 0 3px rgba(90, 175, 135, 0.5)); }
.tv-bar-pid  { fill: hsl(25, 92%, 60%); }

/* Card 02 — Ghost Trace mini chart */
.tv-ghost .tv-grid { stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; stroke-dasharray: 2 3; }
.tv-ghost-past   { fill: none; stroke: var(--accent-strong); stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(90, 175, 135, 0.5)); }
.tv-ghost-future { fill: none; stroke: hsl(265, 75%, 72%); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 4 3; }
.tv-ghost-now-line { stroke: rgba(255, 255, 255, 0.25); stroke-width: 1; stroke-dasharray: 1 2; }
.tv-ghost-now    { fill: var(--accent-strong); }
.tv-ghost-end    { fill: hsl(265, 75%, 72%); }

/* Card 03 — Active Calibration pipeline */
.tv-pipe-rail { stroke: rgba(90, 175, 135, 0.28); stroke-width: 2; stroke-dasharray: 3 3; }
.tv-pipe-dot { fill: rgba(90, 175, 135, 0.18); stroke: rgba(90, 175, 135, 0.55); stroke-width: 1.2; }
.tv-pipe-dot-final { fill: var(--accent-strong); stroke: var(--accent-strong); filter: drop-shadow(0 0 4px rgba(90, 175, 135, 0.6)); }
.tv-pipe-num { fill: var(--text-strong); font-size: 7px; }
.tv-pipe-arrow { fill: var(--accent-strong); font-size: 10px; }

/* Card 04 — Anomaly 8 dots */
.tv-anom-dot { transition: none; }
.tv-anom-ok   { fill: rgba(90, 175, 135, 0.45); }
.tv-anom-warn { fill: hsl(25, 92%, 60%); filter: drop-shadow(0 0 4px rgba(249, 115, 22, 0.7)); animation: tv-anom-pulse 1.8s ease-in-out infinite; }
.tv-anom-pulse-lbl { fill: hsl(25, 92%, 65%); }

@keyframes tv-anom-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.3); opacity: 0.6; }
}

/* Card 05 — Defense 7 bars (rose outer → teal core) */
.tv-def-bar  { transition: none; }
.tv-def-1, .tv-def-7 { fill: hsl(355, 75%, 65%); opacity: 0.7; }
.tv-def-2, .tv-def-6 { fill: hsl(25, 92%, 60%); opacity: 0.78; }
.tv-def-3, .tv-def-5 { fill: hsl(45, 90%, 60%); opacity: 0.85; }
.tv-def-4            { fill: var(--accent-strong); filter: drop-shadow(0 0 4px rgba(90, 175, 135, 0.5)); }
.tv-def-core         { fill: var(--accent-strong); font-weight: 800; }

/* Light theme overrides for teaser viz */
html[data-theme="marosa-light"] .tv-bar-track { fill: rgba(15, 23, 42, 0.08); }
html[data-theme="marosa-light"] .tech-teaser-viz .tv-lbl { fill: rgba(15, 23, 42, 0.55); }
html[data-theme="marosa-light"] .tech-teaser-viz .tv-sub { fill: rgba(15, 23, 42, 0.55); }
html[data-theme="marosa-light"] .tv-ghost .tv-grid { stroke: rgba(15, 23, 42, 0.10); }
html[data-theme="marosa-light"] .tv-ghost-now-line { stroke: rgba(15, 23, 42, 0.3); }
html[data-theme="marosa-light"] .tv-anom-ok { fill: rgba(59, 128, 97, 0.55); }

@media (prefers-reduced-motion: reduce) {
    .tech-teaser-item { transition: none; }
    .tech-teaser-item:hover,
    .tech-teaser-item:focus-visible { transform: none; }
    .tv-anom-warn { animation: none; }
}

.tech-cards-stack {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

/* MAROSA corner motif — distinctive top-left radius (20px) on core cards */
.section .feature-card,
.section .tech-card {
    border-radius: var(--radius-corner, 20px) 0.75rem 0.75rem 0.75rem;
}

/* MAROSA accent voice — Instrument Serif italic for coffee names / brand quotes.
   WARNING: Instrument Serif has NO vietnamese subset (see assets/fonts/fonts.css —
   its unicode-range covers neither U+1EA0-1EF1 nor the combining marks
   U+0300/0301/0303/0309/0323). Vietnamese text renders with detached tone marks.
   Latin-only text (coffee origins, brand names) — never Vietnamese copy. */
.font-accent {
    font-family: var(--font-serif), Georgia, serif;
    font-style: italic;
}

.tech-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.75rem;
    border-radius: 1.75rem;
    background:
        radial-gradient(circle at 12% 8%, rgba(90, 175, 135,0.08), transparent 28rem),
        radial-gradient(circle at 92% 88%, rgba(167,139,250,0.07), transparent 28rem),
        rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.55);
    position: relative;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .tech-card {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        gap: 2.5rem;
        padding: 2.25rem 2.5rem;
    }
    .tech-card-reverse .tech-card-text { order: 2; }
    .tech-card-reverse .tech-card-visual { order: 1; }
}

.tech-card-side { display: flex; flex-direction: column; min-width: 0; }

.tech-card-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, rgba(90, 175, 135,0.18), rgba(52,211,153,0.10));
    border: 1px solid rgba(45,212,191,0.35);
    color: var(--clr-teal-300);
    font-weight: 900;
    font-size: 0.95rem;
    margin-bottom: 0.85rem;
    letter-spacing: 0.04em;
}

.tech-card-eyebrow {
    color: var(--clr-teal-400);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 0.75rem;
}

.tech-card-title {
    color: white;
    font-weight: 900;
    font-size: 1.55rem;
    line-height: 1.22;
    margin: 0 0 1rem 0;
}

@media (min-width: 768px) {
    .tech-card-title { font-size: 1.85rem; }
}

.tech-card-outcome {
    color: hsl(220, 15%, 85%);
    font-size: 0.98rem;
    line-height: 1.65;
    margin: 0 0 1.25rem 0;
}

.tech-card-outcome strong { color: white; font-weight: 800; }

/* Bullet list inside tech-card (used for 2-tier Ghost Trace explanation) */
.tech-card-bullets {
    list-style: none;
    margin: 0 0 1.25rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.tech-card-bullets li {
    position: relative;
    padding-left: 1.15rem;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-main);
}
.tech-card-bullets li::before {
    content: "▸";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--ap-teal, hsl(152, 62%, 48%));
    font-weight: 800;
    font-size: 0.95rem;
}
html[data-theme="marosa-light"] .tech-card-bullets li::before { color: var(--accent-strong); }
.tech-card-bullets em {
    color: var(--text-strong);
    font-style: italic;
}

.tech-card-moat {
    margin-bottom: 1.25rem;
    padding: 0.95rem 1.1rem;
    border-radius: 0.95rem;
    background: rgba(167, 139, 250, 0.06);
    border-left: 3px solid rgba(167, 139, 250, 0.55);
}

.tech-card-moat-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: hsl(270, 75%, 80%);
    margin-bottom: 0.4rem;
}

.tech-card-moat p {
    color: hsl(220, 15%, 82%);
    font-size: 0.88rem;
    line-height: 1.6;
    margin: 0;
}

.tech-card-moat strong { color: white; font-weight: 700; }

.tech-card-badges {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-top: auto;
}

.tech-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: hsl(220, 15%, 80%);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.tech-card-visual {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    padding: 0.5rem;
}

/* Card 1 — Equation block + flow diagram */
.tech-equation-block {
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.tech-equation-label {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: hsl(220, 15%, 65%);
    margin-bottom: 0.5rem;
}

.tech-equation {
    display: block;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--clr-teal-300);
    background: transparent;
    margin-bottom: 0.65rem;
    letter-spacing: 0.02em;
}

.tech-equation-detail {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.78rem;
    color: hsl(220, 15%, 78%);
}

.tech-flow-diagram {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 0.5rem;
    align-items: stretch;
}

.tech-flow-box {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.85rem 0.75rem;
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    text-align: center;
    min-width: 0;
}

.tech-flow-ff {
    background: linear-gradient(180deg, rgba(90, 175, 135,0.18), rgba(90, 175, 135,0.05));
    border-color: rgba(45,212,191,0.40);
}

.tech-flow-pid {
    background: linear-gradient(180deg, rgba(167,139,250,0.18), rgba(167,139,250,0.05));
    border-color: rgba(167,139,250,0.40);
}

.tech-flow-out {
    background: linear-gradient(180deg, rgba(249,115,22,0.18), rgba(249,115,22,0.05));
    border-color: rgba(249,115,22,0.45);
}

.tech-flow-pct {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    font-weight: 800;
    color: white;
    line-height: 1;
}

.tech-flow-box strong {
    color: white;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.15;
}

.tech-flow-box small {
    color: hsl(220, 15%, 70%);
    font-size: 0.66rem;
    line-height: 1.3;
}

.tech-flow-plus, .tech-flow-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: hsl(220, 15%, 60%);
    font-weight: 800;
    font-size: 1.2rem;
}

@media (max-width: 640px) {
    .tech-flow-diagram {
        grid-template-columns: 1fr;
    }
    .tech-flow-plus, .tech-flow-arrow { padding: 0.15rem 0; }
}

/* Card 2 — Ghost Trace SVG chart */
.tech-ghost-chart {
    padding: 0.85rem;
    border-radius: 1rem;
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.tech-ghost-chart svg {
    width: 100%;
    height: auto;
    display: block;
}

.tech-ghost-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: 0.75rem;
    font-size: 0.72rem;
    color: hsl(220, 15%, 78%);
}

.tech-legend-dot {
    display: inline-block;
    width: 12px;
    height: 6px;
    border-radius: 2px;
    margin-right: 0.3rem;
    vertical-align: middle;
}

.tech-ode-states {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.95rem;
    border-radius: 0.75rem;
    background: rgba(167, 139, 250, 0.06);
    border: 1px solid rgba(167, 139, 250, 0.22);
    font-size: 0.78rem;
    flex-wrap: wrap;
}

.tech-ode-label {
    color: hsl(270, 75%, 80%);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.65rem;
}

.tech-ode-states code {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    color: white;
    background: transparent;
    font-size: 0.78rem;
    font-weight: 600;
}

/* Card 3 — Pipeline */
.tech-pipeline {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    gap: 0.4rem;
    padding: 1rem;
    border-radius: 1rem;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.tech-pipeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem 0.6rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    text-align: center;
    min-width: 0;
}

.tech-pipeline-step-final {
    background: linear-gradient(180deg, rgba(90, 175, 135,0.18), rgba(90, 175, 135,0.06));
    border-color: rgba(45,212,191,0.45);
}

.tech-pipeline-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: white;
    font-weight: 900;
    font-size: 0.75rem;
}

.tech-pipeline-step-final .tech-pipeline-num {
    background: var(--clr-teal-400);
    color: hsl(222, 25%, 10%);
}

.tech-pipeline-step strong {
    color: white;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.2;
}

.tech-pipeline-step small {
    color: hsl(220, 15%, 70%);
    font-size: 0.66rem;
    line-height: 1.35;
}

.tech-pipeline-arrow {
    display: flex;
    align-items: center;
    color: hsl(220, 15%, 55%);
    font-weight: 800;
}

@media (max-width: 768px) {
    .tech-pipeline { grid-template-columns: 1fr; }
    .tech-pipeline-arrow { justify-content: center; padding: 0.1rem 0; }
}

.tech-pipeline-output {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-radius: 0.85rem;
    background: rgba(90, 175, 135, 0.07);
    border: 1px solid rgba(90, 175, 135, 0.25);
    color: hsl(220, 15%, 88%);
    font-size: 0.85rem;
    line-height: 1.5;
}

.tech-pipeline-output i { color: var(--clr-teal-400); flex-shrink: 0; margin-top: 0.15rem; }
.tech-pipeline-output strong { color: white; font-weight: 800; }

/* Card 4 — Anomaly grid */
.tech-anomaly-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.55rem;
    padding: 0.85rem;
    border-radius: 1rem;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

@media (min-width: 640px) {
    .tech-anomaly-grid { grid-template-columns: repeat(4, 1fr); }
}

.tech-anomaly-cell {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.65rem 0.55rem;
    border-radius: 0.7rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-align: left;
    min-height: 4.5rem;
    position: relative;
    overflow: hidden;
}

/* Live status pulse — green dot top-right of each anomaly cell.
   Staggered across 8 cells so the grid feels "alive 8 channels". */
.tech-anomaly-cell::before {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: hsl(150, 65%, 55%);
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.65);
    animation: tech-anom-pulse 2.4s ease-in-out infinite;
    z-index: 2;
}
.tech-anomaly-cell:nth-child(1)::before { animation-delay: 0s; }
.tech-anomaly-cell:nth-child(2)::before { animation-delay: 0.3s; }
.tech-anomaly-cell:nth-child(3)::before { animation-delay: 0.6s; }
.tech-anomaly-cell:nth-child(4)::before { animation-delay: 0.9s; }
.tech-anomaly-cell:nth-child(5)::before { animation-delay: 1.2s; }
.tech-anomaly-cell:nth-child(6)::before { animation-delay: 1.5s; }
.tech-anomaly-cell:nth-child(7)::before { animation-delay: 1.8s; }
.tech-anomaly-cell:nth-child(8)::before { animation-delay: 2.1s; }

@keyframes tech-anom-pulse {
    0%, 100% { opacity: 0.5; transform: scale(0.85); }
    50%      { opacity: 1;   transform: scale(1.2); }
}

/* Highlighted cells get an intense "alert" pulse — orange/purple flash
   every few seconds simulating an active detection */
.tech-anomaly-cell-hl::before {
    background: hsl(270, 75%, 65%);
    box-shadow: 0 0 8px rgba(167, 139, 250, 0.7);
    animation: tech-anom-alert 3s ease-in-out infinite;
}
@keyframes tech-anom-alert {
    0%, 70%, 100% { opacity: 0.6; transform: scale(0.85); }
    80%, 90%      { opacity: 1;   transform: scale(1.5); background: hsl(28, 85%, 60%); box-shadow: 0 0 12px rgba(249, 115, 22, 0.8); }
}

/* Scanner sweep — subtle horizontal teal line traversing each cell,
   gives "live scanning" feel without overwhelming. */
.tech-anomaly-cell::after {
    content: "";
    position: absolute;
    left: -100%;
    top: 0;
    bottom: 0;
    width: 50%;
    background: linear-gradient(90deg, transparent, rgba(90, 175, 135, 0.10), transparent);
    animation: tech-anom-scan 4s linear infinite;
    pointer-events: none;
    z-index: 1;
}
.tech-anomaly-cell:nth-child(1)::after { animation-delay: 0s; }
.tech-anomaly-cell:nth-child(2)::after { animation-delay: 0.4s; }
.tech-anomaly-cell:nth-child(3)::after { animation-delay: 0.8s; }
.tech-anomaly-cell:nth-child(4)::after { animation-delay: 1.2s; }
.tech-anomaly-cell:nth-child(5)::after { animation-delay: 1.6s; }
.tech-anomaly-cell:nth-child(6)::after { animation-delay: 2.0s; }
.tech-anomaly-cell:nth-child(7)::after { animation-delay: 2.4s; }
.tech-anomaly-cell:nth-child(8)::after { animation-delay: 2.8s; }

@keyframes tech-anom-scan {
    0%   { left: -100%; }
    100% { left: 200%; }
}

@media (prefers-reduced-motion: reduce) {
    .tech-anomaly-cell::before,
    .tech-anomaly-cell::after { animation: none; }
}

html[data-theme="marosa-light"] .tech-anomaly-cell::before {
    background: hsl(150, 55%, 38%);
    box-shadow: 0 0 4px rgba(34, 197, 94, 0.5);
}
html[data-theme="marosa-light"] .tech-anomaly-cell-hl::before {
    background: hsl(263, 55%, 42%);
    box-shadow: 0 0 6px rgba(127, 75, 198, 0.5);
}
html[data-theme="marosa-light"] .tech-anomaly-cell::after {
    background: linear-gradient(90deg, transparent, rgba(59, 128, 97, 0.08), transparent);
}

/* ============================================================
   Tech card 5 — 7-Layer Watchdog rings live animation.
   Each ring rotates dashed stroke pattern at different speed.
   Threat indicator travels from outer ring → core every 5s.
   ============================================================ */
.wd-ring {
    stroke-dasharray: 8 6;
    transform-origin: 160px 160px;
    transform-box: view-box;
}
.wd-ring-1 { animation: wd-spin 18s linear infinite; }
.wd-ring-2 { animation: wd-spin-reverse 16s linear infinite; }
.wd-ring-3 { animation: wd-spin 14s linear infinite; }
.wd-ring-4 { animation: wd-spin-reverse 12s linear infinite; }
.wd-ring-5 { animation: wd-spin 10s linear infinite; }
.wd-ring-6 { animation: wd-spin-reverse 8s linear infinite; }

@keyframes wd-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes wd-spin-reverse {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}

/* Core PLC/IPC pulse — single source of truth */
.wd-core {
    transform-origin: 160px 160px;
    transform-box: view-box;
    animation: wd-core-pulse 2.6s ease-in-out infinite;
}
@keyframes wd-core-pulse {
    0%, 100% {
        fill: rgba(167, 139, 250, 0.14);
        filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.35));
    }
    50% {
        fill: rgba(167, 139, 250, 0.28);
        filter: drop-shadow(0 0 14px rgba(167, 139, 250, 0.70));
    }
}

/* Threat indicator — travels from outer ring at top toward center,
   passing through each layer, fading out near core (auto-resolved).
   Repeats every 5s simulating live event handling. */
.wd-threat {
    fill: hsl(0, 80%, 65%);
    filter: drop-shadow(0 0 8px rgba(244, 63, 94, 0.8));
    transform-box: view-box;
    transform-origin: 160px 160px;
    animation: wd-threat-travel 5s ease-in infinite;
}
@keyframes wd-threat-travel {
    /* Start at outer ring (r=150), travel inward to core (r=30), fade out */
    0%   { transform: translateY(0) scale(1);     opacity: 0;        fill: hsl(45, 90%, 60%); }
    8%   { opacity: 1; fill: hsl(45, 90%, 60%); }                                /* Detection 🟡 */
    20%  { transform: translateY(20px) scale(1);  opacity: 0.95; fill: hsl(45, 90%, 60%); }
    40%  { transform: translateY(60px) scale(1.1); opacity: 1; fill: hsl(28, 85%, 60%); }  /* Escalation 🟠 */
    60%  { transform: translateY(100px) scale(1.2); opacity: 1; fill: hsl(0, 85%, 60%); }  /* Auto-Fix → 🔴 */
    80%  { transform: translateY(130px) scale(1.3); opacity: 0.6; fill: hsl(0, 85%, 60%); }
    92%  { transform: translateY(140px) scale(0.5); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 0; }
}

html[data-theme="marosa-light"] .wd-ring-1 { stroke: rgba(244, 63, 94, 0.45); }
html[data-theme="marosa-light"] .wd-ring-2 { stroke: rgba(234, 88, 12, 0.40); }
html[data-theme="marosa-light"] .wd-ring-3 { stroke: rgba(234, 179, 8, 0.45); }
html[data-theme="marosa-light"] .wd-ring-4 { stroke: rgba(59, 128, 97, 0.50); }
html[data-theme="marosa-light"] .wd-ring-5 { stroke: rgba(59, 128, 97, 0.55); }
html[data-theme="marosa-light"] .wd-ring-6 { stroke: rgba(127, 75, 198, 0.50); }
html[data-theme="marosa-light"] .wd-core   {
    fill: rgba(127, 75, 198, 0.18);
    stroke: rgba(127, 75, 198, 0.65);
}

@media (prefers-reduced-motion: reduce) {
    .wd-ring,
    .wd-core,
    .wd-threat { animation: none; }
}

/* ============================================================
   Tech card 2 — Ghost Trace Temporal Hybrid live animation.
   Past BT redraws every 5s. SP (0–60s) + ODE (60–600s) dashed flow.
   Seam + FC markers pulse. NOW cursor pulses (sense of real-time).
   ============================================================ */
.tg-grid {
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 1;
}
html[data-theme="marosa-light"] .tg-grid { stroke: rgba(15, 23, 42, 0.10); }

.tg-axis-label {
    fill: rgba(255, 255, 255, 0.4);
    font-size: 12px;
}
html[data-theme="marosa-light"] .tg-axis-label { fill: rgba(15, 23, 42, 0.45); }

/* Past BT solid teal — permanent solid line (the past, "đã xảy ra") */
.tg-bt-past {
    stroke: rgb(45, 212, 191);
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
    filter: drop-shadow(0 0 4px rgba(90, 175, 135, 0.5));
    opacity: 0.55;
}
html[data-theme="marosa-light"] .tg-bt-past { stroke: var(--accent-strong); filter: drop-shadow(0 0 3px rgba(59, 128, 97, 0.4)); }

/* Live data tracer — bright glow traveling along BT past curve toward NOW.
   Dasharray pattern: short visible segment + long gap, animate offset → -total.
   When tracer reaches end (NOW position), SP+ODE flow takes over visually.
   Total path length ≈ 180px; dasharray "14 200" creates one bright segment moving. */
.tg-bt-tracer {
    stroke: rgb(94, 234, 212);
    stroke-width: 3.5;
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 14 200;
    stroke-dashoffset: 0;
    animation: tg-bt-tracer-flow 3.2s linear infinite;
    filter: drop-shadow(0 0 8px rgba(45, 212, 191, 0.9));
}
html[data-theme="marosa-light"] .tg-bt-tracer {
    stroke: hsl(152, 78%, 32%);
    filter: drop-shadow(0 0 6px rgba(90, 175, 135, 0.7));
}

@keyframes tg-bt-tracer-flow {
    from { stroke-dashoffset: 0;    }
    to   { stroke-dashoffset: -214; }
}

/* Short-range SP (Poly-2 + FeedForward, 0-60s) — fast flowing dash */
.tg-sp {
    stroke: rgba(45, 212, 191, 0.9);
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 4 3;
    stroke-linecap: round;
    animation: tg-flow-fast 1.6s linear infinite;
    filter: drop-shadow(0 0 3px rgba(90, 175, 135, 0.45));
}
html[data-theme="marosa-light"] .tg-sp { stroke: var(--accent-strong); opacity: 0.85; filter: drop-shadow(0 0 2px rgba(59, 128, 97, 0.35)); }

@keyframes tg-flow-fast {
    to { stroke-dashoffset: -14; }
}

/* Long-range ODE (60-600s) — slower flowing dash */
.tg-ode {
    stroke: hsl(270, 75%, 72%);
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 7 4;
    stroke-linecap: round;
    animation: tg-flow-slow 2.4s linear infinite;
    filter: drop-shadow(0 0 4px rgba(167, 139, 250, 0.5));
}
html[data-theme="marosa-light"] .tg-ode { stroke: hsl(263, 55%, 42%); filter: drop-shadow(0 0 3px rgba(127, 75, 198, 0.4)); }

@keyframes tg-flow-slow {
    to { stroke-dashoffset: -22; }
}

/* Seam circle (handoff point Poly-2 → ODE) — pulsing */
.tg-seam {
    fill: rgba(255, 255, 255, 0.9);
    stroke: rgb(45, 212, 191);
    stroke-width: 1.5;
    transform-box: fill-box;
    transform-origin: center;
    animation: tg-pulse 1.6s ease-in-out infinite;
    filter: drop-shadow(0 0 5px rgba(90, 175, 135, 0.6));
}
html[data-theme="marosa-light"] .tg-seam { stroke: var(--accent-strong); fill: white; }

/* FC predicted marker — pulses at end of ODE tail */
.tg-fc-marker {
    fill: rgba(251, 113, 133, 0.85);
    stroke: white;
    stroke-width: 1.5;
    transform-box: fill-box;
    transform-origin: center;
    animation: tg-pulse 1.6s ease-in-out infinite 0.6s;
    filter: drop-shadow(0 0 6px rgba(251, 113, 133, 0.7));
}
html[data-theme="marosa-light"] .tg-fc-marker { fill: hsl(0, 70%, 45%); stroke: white; }

.tg-fc-label {
    fill: rgba(251, 113, 133, 0.95);
    font-size: 12px;
    font-weight: 700;
}
html[data-theme="marosa-light"] .tg-fc-label { fill: hsl(0, 70%, 40%); }

@keyframes tg-pulse {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(1.4); opacity: 0.7; }
}

/* NOW cursor vertical line — subtle pulsing */
.tg-now-line {
    stroke: rgba(255, 255, 255, 0.45);
    stroke-width: 1.5;
    stroke-dasharray: 2 2;
    animation: tg-now-pulse 2s ease-in-out infinite;
}
html[data-theme="marosa-light"] .tg-now-line { stroke: rgba(15, 23, 42, 0.40); }

.tg-now-dot {
    fill: rgb(45, 212, 191);
    transform-box: fill-box;
    transform-origin: center;
    animation: tg-pulse 1.4s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(90, 175, 135, 0.75));
}
html[data-theme="marosa-light"] .tg-now-dot { fill: var(--accent-strong); filter: drop-shadow(0 0 4px rgba(59, 128, 97, 0.5)); }

@keyframes tg-now-pulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 0.9; }
}

.tg-time-label {
    fill: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
}
html[data-theme="marosa-light"] .tg-time-label { fill: rgba(15, 23, 42, 0.6); }
.tg-time-label-sp  { fill: rgba(45, 212, 191, 0.9); }
.tg-time-label-ode { fill: hsl(270, 75%, 80%); }
html[data-theme="marosa-light"] .tg-time-label-sp  { fill: var(--accent-strong); }
html[data-theme="marosa-light"] .tg-time-label-ode { fill: hsl(263, 55%, 42%); }

.tg-seam-label {
    fill: rgba(255, 255, 255, 0.7);
    font-size: 10px;
    font-weight: 600;
}
html[data-theme="marosa-light"] .tg-seam-label { fill: rgba(15, 23, 42, 0.65); }

@media (prefers-reduced-motion: reduce) {
    .tg-bt-past,
    .tg-bt-tracer,
    .tg-sp, .tg-ode,
    .tg-seam, .tg-fc-marker,
    .tg-now-line, .tg-now-dot { animation: none; stroke-dashoffset: 0; opacity: 1; }
    .tg-bt-tracer { display: none; }
}

.tech-anomaly-cell i { color: var(--clr-teal-400); }
.tech-anomaly-cell strong { color: white; font-weight: 800; font-size: 0.74rem; line-height: 1.2; }
.tech-anomaly-cell small { color: hsl(220, 15%, 65%); font-size: 0.64rem; line-height: 1.3; }

.tech-anomaly-cell-hl {
    background: linear-gradient(180deg, rgba(167,139,250,0.16), rgba(167,139,250,0.04));
    border-color: rgba(167,139,250,0.40);
}

.tech-anomaly-cell-hl i { color: hsl(270, 75%, 80%); }

.tech-anomaly-pipeline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.7rem 0.85rem;
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.10);
    flex-wrap: wrap;
    font-size: 0.75rem;
}

.tech-pipe-tier {
    color: hsl(220, 15%, 88%);
    font-weight: 700;
}

.tech-pipe-tier-red { color: hsl(0, 85%, 80%); font-weight: 800; }

.tech-pipe-arrow { color: hsl(220, 15%, 50%); font-weight: 800; }

/* Card 5 — Watchdog rings + escalation */
.tech-watchdog-rings {
    display: flex;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 1rem;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.tech-watchdog-rings svg {
    width: 100%;
    max-width: 320px;
    height: auto;
    display: block;
}

.tech-watchdog-pipeline {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 0.4rem;
    align-items: center;
}

.tech-watch-stage {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    align-items: center;
    padding: 0.7rem 0.55rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    text-align: center;
}

.tech-watch-stage span { font-size: 1.1rem; line-height: 1; }
.tech-watch-stage strong { color: white; font-size: 0.8rem; font-weight: 800; }
.tech-watch-stage small { color: hsl(220, 15%, 70%); font-size: 0.65rem; line-height: 1.3; }

.tech-watch-yellow { border-color: rgba(234, 179, 8, 0.35); background: rgba(234, 179, 8, 0.05); }
.tech-watch-orange { border-color: rgba(249, 115, 22, 0.35); background: rgba(249, 115, 22, 0.05); }
.tech-watch-red    { border-color: rgba(251, 113, 133, 0.40); background: rgba(251, 113, 133, 0.06); }

.tech-watch-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: hsl(220, 15%, 55%);
    font-weight: 800;
}

@media (max-width: 640px) {
    .tech-watchdog-pipeline { grid-template-columns: 1fr; }
    .tech-watch-arrow { padding: 0.1rem 0; }
}

/* Capability mosaic strip */
.tech-mosaic {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 3rem;
    padding: 1.25rem 1.5rem;
    border-radius: 1.25rem;
    background:
        linear-gradient(90deg, rgba(90, 175, 135,0.05), rgba(167,139,250,0.05));
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.tech-mosaic-eyebrow {
    color: white;
    font-weight: 800;
    font-size: 0.78rem;
    margin-right: 0.4rem;
    letter-spacing: 0.02em;
}

.tech-mosaic-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: hsl(220, 15%, 82%);
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Light-theme overrides for tech showcase */
html[data-theme="marosa-light"] .tech-card {
    background:
        radial-gradient(circle at 12% 8%, rgba(59, 128, 97,0.07), transparent 28rem),
        radial-gradient(circle at 92% 88%, rgba(124,58,237,0.06), transparent 28rem),
        rgba(255, 255, 255, 0.92);
    border-color: rgba(15, 23, 42, 0.10);
    box-shadow: 0 24px 60px -28px rgba(15, 23, 42, 0.18);
}

html[data-theme="marosa-light"] .tech-card-title { color: hsl(222, 33%, 11%); }
html[data-theme="marosa-light"] .tech-card-outcome { color: hsl(222, 19%, 25%); }
html[data-theme="marosa-light"] .tech-card-outcome strong { color: hsl(222, 33%, 11%); }
html[data-theme="marosa-light"] .tech-card-num {
    background: linear-gradient(135deg, rgba(59, 128, 97,0.14), rgba(59, 128, 97,0.06));
    border-color: rgba(59, 128, 97,0.40);
    color: hsl(152, 80%, 24%);
}
html[data-theme="marosa-light"] .tech-card-eyebrow { color: hsl(152, 80%, 24%); }
html[data-theme="marosa-light"] .tech-card-moat { background: rgba(124,58,237,0.06); border-left-color: rgba(124,58,237,0.45); }
html[data-theme="marosa-light"] .tech-card-moat-label { color: hsl(263, 62%, 42%); }
html[data-theme="marosa-light"] .tech-card-moat p { color: hsl(222, 19%, 30%); }
html[data-theme="marosa-light"] .tech-card-moat strong { color: hsl(222, 33%, 11%); }
html[data-theme="marosa-light"] .tech-badge {
    background: rgba(15, 23, 42, 0.05);
    border-color: rgba(15, 23, 42, 0.12);
    color: hsl(222, 19%, 32%);
}
html[data-theme="marosa-light"] .tech-equation-block,
html[data-theme="marosa-light"] .tech-ghost-chart,
html[data-theme="marosa-light"] .tech-pipeline,
html[data-theme="marosa-light"] .tech-anomaly-grid,
html[data-theme="marosa-light"] .tech-watchdog-rings {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.10);
}
html[data-theme="marosa-light"] .tech-equation { color: hsl(152, 66%, 30%); }
html[data-theme="marosa-light"] .tech-equation-detail,
html[data-theme="marosa-light"] .tech-flow-box small,
html[data-theme="marosa-light"] .tech-pipeline-step small,
html[data-theme="marosa-light"] .tech-anomaly-cell small,
html[data-theme="marosa-light"] .tech-watch-stage small {
    color: hsl(222, 19%, 38%);
}
html[data-theme="marosa-light"] .tech-flow-box strong,
html[data-theme="marosa-light"] .tech-pipeline-step strong,
html[data-theme="marosa-light"] .tech-anomaly-cell strong,
html[data-theme="marosa-light"] .tech-watch-stage strong,
html[data-theme="marosa-light"] .tech-flow-pct {
    color: hsl(222, 33%, 11%);
}
html[data-theme="marosa-light"] .tech-mosaic {
    background: linear-gradient(90deg, rgba(59, 128, 97,0.05), rgba(124,58,237,0.05));
    border-color: rgba(15, 23, 42, 0.10);
}
html[data-theme="marosa-light"] .tech-mosaic-eyebrow { color: hsl(222, 33%, 11%); }
html[data-theme="marosa-light"] .tech-mosaic-chip {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.10);
    color: hsl(222, 19%, 30%);
}

/* Sticky mobile CTA */
.sticky-cta {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    right: auto;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: min(calc(100% - 2rem), 24rem);
    padding: 0.85rem 1.25rem;
    background: var(--clr-teal-400);
    color: hsl(222, 25%, 10%);
    font-weight: 700;
    border-radius: 999px;
    box-shadow: 0 8px 30px -5px rgba(90, 175, 135, 0.5);
    text-decoration: none;
    white-space: nowrap;
    opacity: 1;
    transform: translateX(-50%);
    transition: transform 220ms ease, opacity 220ms ease;
}

.sticky-cta.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 140%);
}

/* ============================================================
   Card foundation contract (ThemePlan_2 R6)
   ============================================================ */
.card-base {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    box-shadow: var(--card-shadow) !important;
    color: var(--text-main);
}

.card-base.problem-card {
    --card-bg: var(--card-danger-bg);
    --card-border: var(--card-danger-border);
}

.card-base.pricing-card-featured,
.card-base.persona-solution,
.card-base.roi-result-highlight,
.card-base.dual-control-highlight {
    --card-bg: var(--card-highlight-bg);
    --card-border: rgba(90, 175, 135, 0.24);
}

.card-base.cta-tier-hot {
    --card-bg: linear-gradient(135deg, hsl(152, 66%, 34%), hsl(142, 56%, 34%));
    --card-border: rgba(255, 255, 255, 0.18);
    --card-shadow: 0 24px 64px rgba(59, 128, 97, 0.24);
    --text-strong: #ffffff;
    --text-main: rgba(255, 255, 255, 0.88);
    --text-muted: rgba(255, 255, 255, 0.72);
}

.card-base.cta-tier-hot .cta-tier-title,
.card-base.cta-tier-hot .cta-tier-desc {
    color: inherit !important;
}

html[data-theme="marosa-light"] .card-base {
    background: var(--card-bg) !important;
    border-color: var(--card-border) !important;
    box-shadow: var(--card-shadow) !important;
}

html[data-theme="marosa-light"] .card-base.problem-card {
    --card-bg: var(--card-danger-bg);
    --card-border: var(--card-danger-border);
}

html[data-theme="marosa-light"] .card-base.pricing-card-featured {
    --card-bg: linear-gradient(145deg, rgba(59, 128, 97, 0.12), rgba(255, 255, 255, 0.94));
    --card-border: rgba(59, 128, 97, 0.28);
}

/* ============================================================
   ThemePlan_3 L2/L3/L4 — Semantic color utilities + component classes
   Replaces broken DaisyUI utilities (text-primary/secondary/accent)
   that resolve to indigo fallback because oklch(var(--p)) with
   HSL-format --p parses invalid → browser uses --fallback-p.
   ============================================================ */

/* --- L3a.1 Color utilities (theme-adaptive) --- */
.clr-teal { color: var(--accent-strong) !important; }
.clr-teal-soft { color: color-mix(in srgb, var(--accent-strong) 90%, transparent) !important; }
.clr-emerald { color: var(--clr-emerald-500); }
.clr-emerald-soft { color: color-mix(in srgb, var(--clr-emerald-500) 90%, transparent); }
.clr-orange { color: var(--clr-orange-400); }
.clr-orange-soft { color: color-mix(in srgb, var(--clr-orange-400) 90%, transparent); }
.clr-rose { color: var(--clr-rose-400); }
.clr-rose-soft { color: color-mix(in srgb, var(--clr-rose-400) 90%, transparent); }
.clr-purple { color: var(--clr-purple-400); }
.clr-blue { color: var(--clr-blue-400); }
.clr-on-accent { color: var(--text-inverse) !important; }

.text-meta { color: var(--text-meta) !important; }
.text-inverse { color: var(--text-inverse) !important; }

/* Light overrides for non-teal accents — primitives are too light on white */
html[data-theme="marosa-light"] .clr-emerald { color: hsl(142, 55%, 28%); }
html[data-theme="marosa-light"] .clr-emerald-soft { color: color-mix(in srgb, hsl(142, 55%, 28%) 90%, transparent); }
html[data-theme="marosa-light"] .clr-orange { color: hsl(28, 78%, 32%); }
html[data-theme="marosa-light"] .clr-orange-soft { color: color-mix(in srgb, hsl(28, 78%, 32%) 90%, transparent); }
html[data-theme="marosa-light"] .clr-rose { color: hsl(0, 65%, 38%); }
html[data-theme="marosa-light"] .clr-rose-soft { color: color-mix(in srgb, hsl(0, 65%, 38%) 90%, transparent); }
html[data-theme="marosa-light"] .clr-purple { color: hsl(263, 60%, 38%); }
html[data-theme="marosa-light"] .clr-blue { color: hsl(210, 75%, 36%); }

/* hmi-device-frame is always dark, keep bright variants there.
   hero-mockup: in dark theme keep bright; in light theme the per-theme overrides above apply darker accents. */
.hmi-device-frame .clr-teal { color: var(--clr-teal-300) !important; }
.hmi-device-frame .clr-emerald { color: var(--clr-emerald-400); }
.hmi-device-frame .clr-orange { color: var(--clr-orange-400); }
.hmi-device-frame .clr-rose { color: var(--clr-rose-400); }
.hmi-device-frame .clr-purple { color: var(--clr-purple-400); }

html:not([data-theme="marosa-light"]) .hero-mockup .clr-teal    { color: var(--clr-teal-300) !important; }
html:not([data-theme="marosa-light"]) .hero-mockup .clr-emerald { color: var(--clr-emerald-400); }
html:not([data-theme="marosa-light"]) .hero-mockup .clr-orange  { color: var(--clr-orange-400); }
html:not([data-theme="marosa-light"]) .hero-mockup .clr-rose    { color: var(--clr-rose-400); }
html:not([data-theme="marosa-light"]) .hero-mockup .clr-purple  { color: var(--clr-purple-400); }

html[data-theme="marosa-light"] .hero-mockup .clr-teal    { color: hsl(152, 80%, 24%) !important; }
html[data-theme="marosa-light"] .hero-mockup .clr-emerald { color: hsl(142, 55%, 28%) !important; }
html[data-theme="marosa-light"] .hero-mockup .clr-orange  { color: hsl(28, 78%, 32%) !important; }
html[data-theme="marosa-light"] .hero-mockup .clr-rose    { color: hsl(0, 65%, 38%) !important; }
html[data-theme="marosa-light"] .hero-mockup .clr-purple  { color: hsl(263, 60%, 38%) !important; }
html[data-theme="marosa-light"] .hero-mockup .text-danger { color: hsl(0, 65%, 38%) !important; }

/* --- L3a.2 Background + border utilities (small set) --- */
.bg-accent-teal { background: var(--accent) !important; color: var(--text-inverse) !important; }
.bg-accent-emerald { background: var(--clr-emerald-500) !important; color: #ffffff !important; }
.bg-accent-orange { background: var(--clr-orange-400) !important; color: var(--text-inverse) !important; }
html[data-theme="marosa-light"] .bg-accent-emerald { background: hsl(142, 55%, 28%) !important; }
html[data-theme="marosa-light"] .bg-accent-orange { background: hsl(28, 78%, 32%) !important; color: #ffffff !important; }
.border-accent-teal { border-color: var(--accent-line) !important; }

/* Compound tinted card (replaces "bg-primary/10 border border-primary/25" inside hero mockup) */
.card-teal-tint {
  background: rgba(90, 175, 135, 0.12);
  border: 1px solid rgba(90, 175, 135, 0.28);
}

/* Button on a light fill (replaces inline color:hsl(222,25%,10%) on cta-tier-hot button) */
.btn-on-light {
  background: #ffffff !important;
  color: hsl(222, 25%, 10%) !important;
}
.btn-on-light:hover {
  background: hsl(0, 0%, 96%) !important;
  color: hsl(222, 25%, 10%) !important;
}
.btn-on-light svg { stroke: hsl(222, 25%, 10%); }

/* Outline button colored variants (replaces inline border/color on whitepaper + custom CTAs) */
.btn-outline.btn-outline-purple {
  border-color: hsl(270, 75%, 76%);
  color: hsl(270, 75%, 82%);
}
.btn-outline.btn-outline-purple:hover {
  background: rgba(167, 139, 250, 0.10);
  color: hsl(270, 75%, 88%);
}
html[data-theme="marosa-light"] .btn-outline.btn-outline-purple {
  border-color: hsl(263, 60%, 42%);
  color: hsl(263, 60%, 30%);
}
html[data-theme="marosa-light"] .btn-outline.btn-outline-purple:hover {
  background: rgba(127, 75, 198, 0.08);
}

.btn-outline.btn-outline-neutral {
  border-color: hsl(220, 15%, 40%);
  color: hsl(220, 15%, 85%);
}
.btn-outline.btn-outline-neutral:hover {
  background: rgba(255, 255, 255, 0.08);
  color: hsl(220, 15%, 96%);
}
html[data-theme="marosa-light"] .btn-outline.btn-outline-neutral {
  border-color: hsl(220, 15%, 60%);
  color: var(--text-strong);
}
html[data-theme="marosa-light"] .btn-outline.btn-outline-neutral:hover {
  background: rgba(15, 23, 42, 0.06);
}

/* --- L3a.3 Section labels (replaces "text-primary font-semibold tracking-widest uppercase") --- */
.section-label {
  color: var(--accent-strong);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* --- L3a.4 Stack panel cards (replaces inline rgba/hsl in HTML lines 1997-2031) --- */
.stack-card-purple {
  background: rgba(167, 139, 250, 0.08);
  border: 1px solid rgba(167, 139, 250, 0.25);
}
html[data-theme="marosa-light"] .stack-card-purple {
  background: rgba(127, 75, 198, 0.07);
  border-color: rgba(127, 75, 198, 0.32);
}
.stack-card-teal {
  background: rgba(90, 175, 135, 0.06);
  border: 1px solid rgba(90, 175, 135, 0.25);
}
html[data-theme="marosa-light"] .stack-card-teal {
  background: rgba(59, 128, 97, 0.07);
  border-color: rgba(59, 128, 97, 0.32);
}
.stack-card-rose {
  background: rgba(251, 113, 133, 0.06);
  border: 1px solid rgba(251, 113, 133, 0.25);
}
html[data-theme="marosa-light"] .stack-card-rose {
  background: rgba(214, 56, 76, 0.07);
  border-color: rgba(214, 56, 76, 0.30);
}

/* Stack panel badges (line 2003, 2017, 2031) */
.stack-badge-purple {
  background: rgba(167, 139, 250, 0.15);
  color: hsl(270, 75%, 80%);
  border: 1px solid rgba(167, 139, 250, 0.3);
}
html[data-theme="marosa-light"] .stack-badge-purple {
  background: rgba(127, 75, 198, 0.12);
  color: hsl(263, 60%, 32%);
  border-color: rgba(127, 75, 198, 0.40);
}
.stack-badge-teal {
  background: rgba(90, 175, 135, 0.12);
  color: hsl(152, 85%, 72%);
  border: 1px solid rgba(90, 175, 135, 0.3);
}
html[data-theme="marosa-light"] .stack-badge-teal {
  background: rgba(59, 128, 97, 0.12);
  color: var(--accent-strong);
  border-color: rgba(59, 128, 97, 0.40);
}
.stack-badge-rose {
  background: rgba(251, 113, 133, 0.12);
  color: hsl(0, 85%, 80%);
  border: 1px solid rgba(251, 113, 133, 0.3);
}
html[data-theme="marosa-light"] .stack-badge-rose {
  background: rgba(214, 56, 76, 0.10);
  color: hsl(0, 65%, 35%);
  border-color: rgba(214, 56, 76, 0.40);
}

/* Stack panel titles (line 1999, 2013, 2027) */
.stack-title-purple { color: hsl(270, 75%, 76%); }
.stack-title-teal { color: hsl(152, 85%, 55%); }
.stack-title-rose { color: hsl(0, 85%, 70%); }
html[data-theme="marosa-light"] .stack-title-purple { color: hsl(263, 60%, 32%); }
html[data-theme="marosa-light"] .stack-title-teal { color: var(--accent-strong); }
html[data-theme="marosa-light"] .stack-title-rose { color: hsl(0, 65%, 35%); }

/* Expanded layer cards — technical-depth detail grid */
.stack-card-full { display: block; }
.stack-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
html[data-theme="marosa-light"] .stack-detail-grid {
  border-top-color: rgba(15, 23, 42, 0.10);
}
@media (min-width: 768px) {
  .stack-detail-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}
.stack-detail-item h4 {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-strong);
  margin: 0 0 0.35rem;
  line-height: 1.3;
}
.stack-detail-item p {
  font-size: 0.78rem;
  color: var(--text-main);
  line-height: 1.55;
  margin: 0 0 0.55rem;
}
.stack-metric {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  padding-top: 0.45rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.07);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
html[data-theme="marosa-light"] .stack-metric {
  border-top-color: rgba(15, 23, 42, 0.10);
}
.stack-code {
  display: inline-block;
  padding: 0.05rem 0.35rem;
  font-family: var(--font-mono, 'JetBrains Mono', 'Courier New', monospace);
  font-size: 0.85em;
  color: var(--accent-strong);
  background: rgba(90, 175, 135, 0.08);
  border-radius: 0.3rem;
  border: 1px solid rgba(90, 175, 135, 0.20);
}
html[data-theme="marosa-light"] .stack-code {
  background: rgba(59, 128, 97, 0.08);
  border-color: rgba(59, 128, 97, 0.22);
}

/* Closing summary + tech stack callout */
.stack-closing {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
html[data-theme="marosa-light"] .stack-closing {
  border-top-color: rgba(15, 23, 42, 0.10);
}
.stack-closing-summary { text-align: center; }
.stack-tech-callout {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem 1.25rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 1rem;
}
.stack-tech-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.stack-tech-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.stack-tech-chip {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(90, 175, 135, 0.08);
  border: 1px solid rgba(90, 175, 135, 0.22);
  color: var(--accent-strong);
  font-family: var(--font-mono, monospace);
}
html[data-theme="marosa-light"] .stack-tech-chip {
  background: rgba(59, 128, 97, 0.08);
  border-color: rgba(59, 128, 97, 0.30);
}

/* Tick anatomy live viz — embedded in Layer 2 card to visualize 500ms tick budget */
.tick-anatomy {
  margin: 1.25rem 0 0;
  padding: 0.85rem 1rem 0.65rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0.85rem;
}
html[data-theme="marosa-light"] .tick-anatomy {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.10);
}
.tick-anatomy-header {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.72rem;
  margin-bottom: 0.4rem;
}
.tick-anatomy-title {
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: 0.02em;
}
.tick-anatomy-sub {
  color: var(--text-muted);
  font-family: var(--font-mono, monospace);
  font-size: 0.66rem;
}
.tick-anatomy-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 150px;
  overflow: visible;
}

/* Segment fills — color-coded by stage */
.tick-seg-modbus { fill: hsl(210, 65%, 52%); }
.tick-seg-pid    { fill: hsl(152, 62%, 48%); }
.tick-seg-ode    { fill: hsl(270, 62%, 60%); }
.tick-seg-telem  { fill: hsl(28, 78%, 55%); }
.tick-seg-idle {
  fill: rgba(34, 197, 94, 0.18);
  stroke: rgba(34, 197, 94, 0.45);
  stroke-width: 1;
}
html[data-theme="marosa-light"] .tick-seg-modbus { fill: hsl(210, 65%, 38%); }
html[data-theme="marosa-light"] .tick-seg-pid    { fill: var(--accent-strong); }
html[data-theme="marosa-light"] .tick-seg-ode    { fill: hsl(263, 55%, 42%); }
html[data-theme="marosa-light"] .tick-seg-telem  { fill: hsl(28, 78%, 36%); }
html[data-theme="marosa-light"] .tick-seg-idle {
  fill: rgba(34, 197, 94, 0.10);
  stroke: rgba(34, 197, 94, 0.40);
}

/* Scale + labels */
.tick-scale line {
  stroke: var(--text-subtle);
  stroke-width: 1;
  opacity: 0.35;
}
.tick-scale text {
  fill: var(--text-muted);
  font-size: 12px;
  font-family: var(--font-mono, monospace);
}
.tick-labels text {
  fill: var(--text-strong);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Playhead — animated sweep across the tick timeline.
   500ms real → 2.5s animation (5x slower) for visibility. */
.tick-playhead {
  stroke: var(--ap-teal, hsl(152, 62%, 48%));
  stroke-width: 2;
  filter: drop-shadow(0 0 4px rgba(90, 175, 135, 0.55));
  animation: tick-sweep 2.5s linear infinite;
}
.tick-playhead-dot {
  fill: var(--ap-teal, hsl(152, 62%, 48%));
  filter: drop-shadow(0 0 6px rgba(90, 175, 135, 0.7));
  animation: tick-sweep 2.5s linear infinite;
}
html[data-theme="marosa-light"] .tick-playhead,
html[data-theme="marosa-light"] .tick-playhead-dot {
  stroke: var(--accent-strong);
  fill: var(--accent-strong);
}

@keyframes tick-sweep {
  0%   { transform: translateX(0); }
  100% { transform: translateX(720px); }
}

@media (prefers-reduced-motion: reduce) {
  .tick-playhead,
  .tick-playhead-dot { animation: none; }
}

/* Legend below the chart */
.tick-anatomy-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
  margin-top: 0.45rem;
  font-size: 0.66rem;
  color: var(--text-muted);
}
.tick-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.tick-legend-swatch {
  display: inline-block;
  width: 14px;
  height: 8px;
  border-radius: 2px;
}

/* ============================================================
   Ghost Trace live viz — embedded in Layer 3 card to visualize
   "Nhìn trước 10 phút tới" claim. Solid past curve + dashed
   purple prediction + animated NOW cursor + flowing dash.
   ============================================================ */
.ghost-trace-viz {
  margin: 1.25rem 0 0;
  padding: 0.85rem 1rem 0.65rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0.85rem;
}
html[data-theme="marosa-light"] .ghost-trace-viz {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.10);
}
.ghost-trace-header {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.72rem;
  margin-bottom: 0.4rem;
}
.ghost-trace-title {
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: 0.02em;
}
.ghost-trace-sub {
  color: var(--text-muted);
  font-family: var(--font-mono, monospace);
  font-size: 0.66rem;
}
.ghost-trace-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 200px;
  overflow: visible;
}

/* Phase background bands — subtle past/future divide */
.ghost-phase-past   { fill: rgba(255, 255, 255, 0.018); }
.ghost-phase-future { fill: rgba(167, 139, 250, 0.08); }
html[data-theme="marosa-light"] .ghost-phase-past   { fill: rgba(15, 23, 42, 0.018); }
html[data-theme="marosa-light"] .ghost-phase-future { fill: rgba(127, 75, 198, 0.06); }

/* Grid */
.ghost-grid line {
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
html[data-theme="marosa-light"] .ghost-grid line { stroke: rgba(15, 23, 42, 0.08); }

/* Axis labels */
.ghost-axis-y text,
.ghost-axis-x text {
  fill: var(--text-muted);
  font-size: 13px;
  font-family: var(--font-mono, monospace);
}
.ghost-axis-now {
  fill: var(--ap-teal, hsl(152, 62%, 48%)) !important;
  font-weight: 700;
  letter-spacing: 0.06em;
}
html[data-theme="marosa-light"] .ghost-axis-now { fill: var(--accent-strong) !important; }

/* Past curve — solid teal with glow */
.ghost-past {
  stroke: var(--ap-teal, hsl(152, 62%, 48%));
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(90, 175, 135, 0.40));
}
html[data-theme="marosa-light"] .ghost-past {
  stroke: var(--accent-strong);
  filter: drop-shadow(0 0 3px rgba(59, 128, 97, 0.30));
}

/* Future prediction — dashed purple with flowing-dash animation */
.ghost-future {
  stroke: hsl(263, 75%, 68%);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 7 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: ghost-flow 1.6s linear infinite;
}
html[data-theme="marosa-light"] .ghost-future {
  stroke: hsl(263, 55%, 42%);
}
@keyframes ghost-flow {
  to { stroke-dashoffset: -24; }
}

/* NOW cursor */
.ghost-now-line {
  stroke: var(--ap-teal, hsl(152, 62%, 48%));
  stroke-width: 1.5;
  stroke-dasharray: 2 3;
  opacity: 0.6;
}
html[data-theme="marosa-light"] .ghost-now-line {
  stroke: var(--accent-strong);
  opacity: 0.55;
}
.ghost-now-dot {
  fill: var(--ap-teal, hsl(152, 62%, 48%));
  filter: drop-shadow(0 0 8px rgba(90, 175, 135, 0.55));
  transform-box: fill-box;
  transform-origin: center;
  animation: ghost-pulse 1.4s ease-in-out infinite;
}
html[data-theme="marosa-light"] .ghost-now-dot {
  fill: var(--accent-strong);
  filter: drop-shadow(0 0 6px rgba(59, 128, 97, 0.40));
}
.ghost-now-pill {
  fill: var(--ap-teal, hsl(152, 62%, 48%));
}
html[data-theme="marosa-light"] .ghost-now-pill { fill: var(--accent-strong); }
.ghost-now-label {
  fill: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  font-family: var(--font-sans);
}

/* Future endpoint marker + label */
.ghost-future-end {
  fill: hsl(263, 75%, 68%);
  filter: drop-shadow(0 0 8px rgba(167, 139, 250, 0.50));
  transform-box: fill-box;
  transform-origin: center;
  animation: ghost-pulse 1.4s ease-in-out infinite 0.5s;
}
html[data-theme="marosa-light"] .ghost-future-end {
  fill: hsl(263, 55%, 42%);
  filter: drop-shadow(0 0 6px rgba(127, 75, 198, 0.40));
}
.ghost-future-end-label {
  fill: hsl(263, 75%, 78%);
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
}
html[data-theme="marosa-light"] .ghost-future-end-label { fill: hsl(263, 55%, 32%); }

@keyframes ghost-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.5); }
}

@media (prefers-reduced-motion: reduce) {
  .ghost-future,
  .ghost-now-dot,
  .ghost-future-end { animation: none; }
}

/* Legend */
.ghost-trace-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  margin-top: 0.5rem;
  font-size: 0.68rem;
  color: var(--text-muted);
}
.ghost-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.ghost-legend-swatch {
  display: inline-block;
  width: 18px;
  height: 3px;
  border-radius: 2px;
}
.ghost-swatch-past { background: var(--ap-teal, hsl(152, 62%, 48%)); box-shadow: 0 0 4px rgba(90, 175, 135, 0.5); }
.ghost-swatch-future {
  background:
    repeating-linear-gradient(90deg,
      hsl(263, 75%, 68%) 0 5px,
      transparent 5px 9px);
  height: 3px;
}
.ghost-swatch-now {
  background: var(--ap-teal, hsl(152, 62%, 48%));
  width: 6px;
  height: 6px;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(90, 175, 135, 0.6);
}
html[data-theme="marosa-light"] .ghost-swatch-past { background: var(--accent-strong); box-shadow: 0 0 3px rgba(59, 128, 97, 0.4); }
html[data-theme="marosa-light"] .ghost-swatch-future {
  background:
    repeating-linear-gradient(90deg,
      hsl(263, 55%, 42%) 0 5px,
      transparent 5px 9px);
}
html[data-theme="marosa-light"] .ghost-swatch-now { background: var(--accent-strong); box-shadow: 0 0 4px rgba(59, 128, 97, 0.4); }

/* ============================================================
   Heat Flow live viz — Layer 1 (Physical Foundation).
   Visualizes the energy balance ODE: GAS → DRUM → (beans + 3 losses).
   Animated dashed flow on each arrow conveys real-time bookkeeping.
   ============================================================ */
.heat-flow-viz {
  margin: 1.25rem 0 0;
  padding: 0.85rem 1rem 0.65rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0.85rem;
}
html[data-theme="marosa-light"] .heat-flow-viz {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.10);
}
.heat-flow-header {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.72rem;
  margin-bottom: 0.4rem;
}
.heat-flow-title {
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: 0.02em;
}
.heat-flow-sub {
  color: var(--text-muted);
  font-family: var(--font-mono, monospace);
  font-size: 0.66rem;
}
.heat-flow-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 240px;
  overflow: visible;
}

/* Boxes: source / drum / outputs */
.heat-box {
  fill: rgba(255, 255, 255, 0.03);
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 1;
}
.heat-box-source {
  fill: rgba(249, 115, 22, 0.16);
  stroke: hsl(28, 78%, 55%);
}
.heat-box-drum {
  fill: rgba(255, 255, 255, 0.04);
  stroke: rgba(255, 255, 255, 0.20);
}
.heat-box-bean {
  fill: rgba(90, 175, 135, 0.16);
  stroke: var(--ap-teal, hsl(152, 62%, 48%));
}
.heat-box-loss {
  fill: rgba(255, 255, 255, 0.025);
  stroke: rgba(255, 255, 255, 0.12);
}
html[data-theme="marosa-light"] .heat-box-source {
  fill: rgba(234, 88, 12, 0.10);
  stroke: hsl(28, 78%, 38%);
}
html[data-theme="marosa-light"] .heat-box-drum {
  fill: rgba(15, 23, 42, 0.03);
  stroke: rgba(15, 23, 42, 0.18);
}
html[data-theme="marosa-light"] .heat-box-bean {
  fill: rgba(59, 128, 97, 0.12);
  stroke: var(--accent-strong);
}
html[data-theme="marosa-light"] .heat-box-loss {
  fill: rgba(15, 23, 42, 0.025);
  stroke: rgba(15, 23, 42, 0.14);
}

/* Box text */
.heat-box-title {
  fill: var(--text-strong);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-family: var(--font-sans);
}
.heat-source-title { fill: hsl(28, 80%, 70%); }
html[data-theme="marosa-light"] .heat-source-title { fill: hsl(28, 78%, 32%); }
.heat-box-value {
  fill: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-mono, monospace);
}
.heat-box-sub {
  fill: var(--text-subtle);
  font-size: 11px;
  font-family: var(--font-mono, monospace);
}
.heat-out-title {
  fill: var(--text-strong);
  font-size: 13px;
  font-weight: 700;
}
.heat-out-value {
  fill: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
}
.heat-out-bean-title { fill: var(--ap-teal, hsl(152, 62%, 48%)); }
.heat-out-bean-value { fill: var(--ap-teal, hsl(152, 62%, 48%)); }
html[data-theme="marosa-light"] .heat-out-bean-title { fill: var(--accent-strong); }
html[data-theme="marosa-light"] .heat-out-bean-value { fill: var(--accent-strong); }

/* Bean particles inside drum — pulsing to suggest heating in progress */
.heat-bean {
  fill: hsl(28, 80%, 65%);
  filter: drop-shadow(0 0 4px rgba(249, 115, 22, 0.5));
  transform-box: fill-box;
  transform-origin: center;
  animation: heat-bean-pulse 1.8s ease-in-out infinite;
}
html[data-theme="marosa-light"] .heat-bean {
  fill: hsl(28, 78%, 45%);
  filter: drop-shadow(0 0 3px rgba(234, 88, 12, 0.40));
}
.heat-bean:nth-child(2) { animation-delay: 0.4s; }
.heat-bean:nth-child(3) { animation-delay: 0.8s; }
.heat-bean:nth-child(4) { animation-delay: 1.2s; }
@keyframes heat-bean-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.35); }
}

/* Flow arrows — dashed with animated offset */
.heat-flow {
  fill: none;
  stroke-width: 2;
  stroke-dasharray: 6 4;
  stroke-linecap: round;
  animation: heat-flow-anim 1.4s linear infinite;
}
.heat-flow-in {
  stroke: hsl(28, 80%, 60%);
  filter: drop-shadow(0 0 3px rgba(249, 115, 22, 0.45));
}
.heat-flow-bean {
  stroke: var(--ap-teal, hsl(152, 62%, 48%));
  stroke-width: 2.5;
  filter: drop-shadow(0 0 4px rgba(90, 175, 135, 0.5));
}
.heat-flow-loss {
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 1.5;
  opacity: 0.7;
  animation-duration: 1.8s;
}
html[data-theme="marosa-light"] .heat-flow-in {
  stroke: hsl(28, 78%, 40%);
  filter: drop-shadow(0 0 2px rgba(234, 88, 12, 0.35));
}
html[data-theme="marosa-light"] .heat-flow-bean {
  stroke: var(--accent-strong);
  filter: drop-shadow(0 0 3px rgba(59, 128, 97, 0.40));
}
html[data-theme="marosa-light"] .heat-flow-loss {
  stroke: rgba(15, 23, 42, 0.30);
}

@keyframes heat-flow-anim {
  to { stroke-dashoffset: -20; }
}

@media (prefers-reduced-motion: reduce) {
  .heat-flow,
  .heat-bean { animation: none; }
}

/* Legend */
.heat-flow-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
  margin-top: 0.5rem;
  font-size: 0.68rem;
  color: var(--text-muted);
}
.heat-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.heat-legend-swatch {
  display: inline-block;
  width: 18px;
  height: 3px;
  border-radius: 2px;
}
.heat-swatch-in   { background: hsl(28, 80%, 60%); box-shadow: 0 0 4px rgba(249, 115, 22, 0.5); }
.heat-swatch-bean { background: var(--ap-teal, hsl(152, 62%, 48%)); box-shadow: 0 0 4px rgba(90, 175, 135, 0.5); }
.heat-swatch-loss { background: rgba(255, 255, 255, 0.3); }
html[data-theme="marosa-light"] .heat-swatch-in   { background: hsl(28, 78%, 40%); box-shadow: 0 0 3px rgba(234, 88, 12, 0.4); }
html[data-theme="marosa-light"] .heat-swatch-bean { background: var(--accent-strong); box-shadow: 0 0 3px rgba(59, 128, 97, 0.4); }
html[data-theme="marosa-light"] .heat-swatch-loss { background: rgba(15, 23, 42, 0.32); }

/* ============================================================
   Secret section disclosure — wraps entire story + 3-layer
   architecture in a single <details> so click on the section
   header reveals both narrative + technical deep-dive.
   ============================================================ */
.secret-disclosure {
  /* container: keep position relative for absolute children if needed */
  position: relative;
}

/* Summary = section header. Remove native disclosure marker. */
.secret-disclosure > summary.secret-summary {
  display: block;
  list-style: none;
  cursor: pointer;
  padding: 2rem 1rem 1.5rem;
  position: relative;
  outline: none;
  transition: background 220ms ease, transform 220ms ease;
  -webkit-tap-highlight-color: transparent;
}
.secret-disclosure > summary.secret-summary::-webkit-details-marker {
  display: none;
}
.secret-disclosure > summary.secret-summary::marker {
  content: '';
}
.secret-disclosure > summary.secret-summary:hover .secret-summary-cta,
.secret-disclosure > summary.secret-summary:focus-visible .secret-summary-cta {
  background: var(--accent);
  color: var(--text-inverse);
  border-color: var(--accent);
}
html[data-theme="marosa-light"] .secret-disclosure > summary.secret-summary:hover .secret-summary-cta,
html[data-theme="marosa-light"] .secret-disclosure > summary.secret-summary:focus-visible .secret-summary-cta {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: #ffffff;
}
.secret-disclosure > summary.secret-summary:focus-visible {
  outline: 3px solid var(--accent-line);
  outline-offset: 8px;
  border-radius: 1.5rem;
}

/* CTA button hint inside summary */
.secret-summary-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  background: var(--accent-muted);
  border: 1px solid var(--accent-line);
  color: var(--accent-strong);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
}
.secret-summary-cta-close { display: none; }
.secret-disclosure[open] > summary .secret-summary-cta-open  { display: none; }
.secret-disclosure[open] > summary .secret-summary-cta-close { display: inline; }
.secret-summary-chev {
  transition: transform 280ms ease;
  flex-shrink: 0;
}
.secret-disclosure[open] > summary .secret-summary-chev {
  transform: rotate(180deg);
}

/* Collapsed: hide content with smooth max-height technique.
   When open, content reveals via attr+CSS state. We do NOT animate
   max-height on <details> (browser native), but we DO transition
   opacity on .secret-content for a soft reveal. */
.secret-content {
  opacity: 0;
  animation: secret-content-reveal 380ms ease-out 80ms both;
  padding-top: 1rem;
}
.secret-disclosure:not([open]) .secret-content {
  /* native: <details> closed hides children entirely. animation only runs on open. */
  display: none;
}
@keyframes secret-content-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Architecture subsection inside secret-content */
.secret-architecture {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--card-border);
}

@media (prefers-reduced-motion: reduce) {
  .secret-disclosure > summary.secret-summary,
  .secret-summary-cta,
  .secret-summary-chev,
  .secret-content { transition: none; animation: none; }
}

/* Print: force open so collapsed content prints */
@media print {
  .secret-disclosure[open] .secret-content,
  .secret-disclosure:not([open]) .secret-content { display: block !important; opacity: 1 !important; }
  .secret-summary-cta { display: none; }
}

/* ============================================================
   ThemePlan 4 — generic .card-disclosure
   Reusable progressive-disclosure pattern for hero-card + detail
   sections. Wraps secondary content (timelines, deep-dive grids,
   live dashboards) behind a "Xem chi tiết" toggle while keeping
   the section's killer headline + main visual always visible.
   Mirrors .secret-disclosure architecture but is section-scoped
   instead of wrapping the whole <section>.
   ============================================================ */
.card-disclosure {
  position: relative;
  margin-top: 2rem;
  border-top: 1px solid var(--card-border);
  padding-top: 1.25rem;
}

.card-disclosure > summary.card-disclosure-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  cursor: pointer;
  padding: 0.25rem 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.card-disclosure > summary.card-disclosure-summary::-webkit-details-marker { display: none; }
.card-disclosure > summary.card-disclosure-summary::marker { content: ''; }

.card-disclosure-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.65rem 1.5rem;
  border-radius: 999px;
  background: var(--accent-muted);
  border: 1px solid var(--accent-line);
  color: var(--accent-strong);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
}
.card-disclosure > summary:hover .card-disclosure-cta,
.card-disclosure > summary:focus-visible .card-disclosure-cta {
  background: var(--accent);
  color: var(--text-inverse);
  border-color: var(--accent);
}
html[data-theme="marosa-light"] .card-disclosure > summary:hover .card-disclosure-cta,
html[data-theme="marosa-light"] .card-disclosure > summary:focus-visible .card-disclosure-cta {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: #ffffff;
}
.card-disclosure > summary:focus-visible {
  outline: 3px solid var(--accent-line);
  outline-offset: 6px;
  border-radius: 999px;
}

.card-disclosure-cta-label-close { display: none; }
.card-disclosure[open] > summary .card-disclosure-cta-label-open  { display: none; }
.card-disclosure[open] > summary .card-disclosure-cta-label-close { display: inline; }

.card-disclosure-chev {
  transition: transform 280ms ease;
  flex-shrink: 0;
}
.card-disclosure[open] > summary .card-disclosure-chev {
  transform: rotate(180deg);
}

.card-disclosure-content {
  /* Resting state is VISIBLE. The fade-in is a pure enhancement — `both` keeps
     the delay flicker-free when it runs, and the opacity:1 base keeps content
     visible when it does NOT (reduced-motion, or engines that don't restart
     animations on display:none→block). Never let opacity depend on the animation. */
  opacity: 1;
  animation: card-disclosure-reveal 380ms ease-out 80ms both;
  padding-top: 1.5rem;
}
.card-disclosure:not([open]) .card-disclosure-content { display: none; }

@keyframes card-disclosure-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .card-disclosure-cta,
  .card-disclosure-chev,
  .card-disclosure-content { transition: none; animation: none; }
  .card-disclosure-content { opacity: 1; }
}

@media print {
  .card-disclosure[open] .card-disclosure-content,
  .card-disclosure:not([open]) .card-disclosure-content { display: block !important; opacity: 1 !important; }
  .card-disclosure-cta { display: none; }
}

/* ============================================================
   Safety Dashboard — replaces flat 2x2 grid with a "live monitoring
   console" feel: 4 enhanced cards (pulse + mini-stat) wrapped in a
   dashboard frame with a scrolling event log below.
   ============================================================ */
.safety-dashboard {
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid var(--card-border);
  border-radius: 1.25rem;
  padding: 1rem 1rem 1.1rem;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
}
html[data-theme="marosa-light"] .safety-dashboard {
  background: rgba(15, 23, 42, 0.025);
  border-color: rgba(15, 23, 42, 0.10);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
}

/* Dashboard header */
.safety-dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0.6rem 0.8rem;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
  margin-bottom: 0.85rem;
}
html[data-theme="marosa-light"] .safety-dashboard-header {
  border-bottom-color: rgba(15, 23, 42, 0.10);
}
.safety-dashboard-title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text-strong);
  font-family: var(--font-mono, monospace);
}
.safety-dashboard-title svg { color: var(--text-danger); }
.safety-dashboard-live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: hsl(150, 65%, 65%);
  font-family: var(--font-mono, monospace);
}
html[data-theme="marosa-light"] .safety-dashboard-live { color: hsl(150, 55%, 28%); }

/* Pulse dot — used in header + per-card status badge */
.safety-pulse {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: hsl(150, 65%, 55%);
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.65);
}
.safety-pulse::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: hsl(150, 65%, 55%);
  opacity: 0.5;
  animation: safety-pulse-ring 1.5s ease-out infinite;
}
.safety-pulse-blue    { background: hsl(210, 80%, 60%); box-shadow: 0 0 8px rgba(59, 130, 246, 0.6); }
.safety-pulse-blue::after    { background: hsl(210, 80%, 60%); }
.safety-pulse-orange  { background: hsl(28, 85%, 60%); box-shadow: 0 0 8px rgba(249, 115, 22, 0.6); }
.safety-pulse-orange::after  { background: hsl(28, 85%, 60%); }
.safety-pulse-rose    { background: hsl(0, 80%, 65%); box-shadow: 0 0 8px rgba(244, 63, 94, 0.7); }
.safety-pulse-rose::after    { background: hsl(0, 80%, 65%); }
.safety-pulse-emerald { background: hsl(150, 65%, 55%); box-shadow: 0 0 8px rgba(34, 197, 94, 0.6); }
.safety-pulse-emerald::after { background: hsl(150, 65%, 55%); }

@keyframes safety-pulse-ring {
  0%   { transform: scale(0.6); opacity: 0.6; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Enhanced safety cards */
.safety-card {
  position: relative;
  padding: 0.85rem 0.95rem;
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
html[data-theme="marosa-light"] .safety-card {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(15, 23, 42, 0.10);
}
.safety-card-validation { border-color: rgba(59, 130, 246, 0.20); }
.safety-card-sls        { border-color: rgba(249, 115, 22, 0.22); }
.safety-card-audit      { border-color: rgba(244, 63, 94, 0.22); }
.safety-card-watchdog   { border-color: rgba(34, 197, 94, 0.20); }
html[data-theme="marosa-light"] .safety-card-validation { border-color: rgba(59, 130, 246, 0.32); }
html[data-theme="marosa-light"] .safety-card-sls        { border-color: rgba(249, 115, 22, 0.30); }
html[data-theme="marosa-light"] .safety-card-audit      { border-color: rgba(244, 63, 94, 0.30); }
html[data-theme="marosa-light"] .safety-card-watchdog   { border-color: rgba(34, 197, 94, 0.28); }

.safety-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.55rem;
}
.safety-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-family: var(--font-mono, monospace);
}
html[data-theme="marosa-light"] .safety-card-badge {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.08);
}

.safety-card-meter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.55rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.07);
}
html[data-theme="marosa-light"] .safety-card-meter {
  border-top-color: rgba(15, 23, 42, 0.10);
}
.safety-meter-label {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.safety-meter-value {
  font-size: 0.7rem;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  color: var(--text-strong);
}
.safety-meter-value-blue    { color: hsl(210, 80%, 70%); }
.safety-meter-value-orange  { color: hsl(28, 85%, 65%); }
.safety-meter-value-rose    { color: hsl(0, 80%, 72%); }
.safety-meter-value-emerald { color: hsl(150, 65%, 60%); }
html[data-theme="marosa-light"] .safety-meter-value-blue    { color: hsl(210, 75%, 38%); }
html[data-theme="marosa-light"] .safety-meter-value-orange  { color: hsl(28, 78%, 36%); }
html[data-theme="marosa-light"] .safety-meter-value-rose    { color: hsl(0, 70%, 42%); }
html[data-theme="marosa-light"] .safety-meter-value-emerald { color: hsl(150, 55%, 30%); }

/* Live scrolling event log console */
.safety-console {
  margin-top: 0.9rem;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.85rem;
  overflow: hidden;
  font-family: var(--font-mono, monospace);
}
html[data-theme="marosa-light"] .safety-console {
  background: rgba(15, 23, 42, 0.06);
  border-color: rgba(15, 23, 42, 0.10);
}
.safety-console-header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.85rem;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.66rem;
}
html[data-theme="marosa-light"] .safety-console-header {
  background: rgba(15, 23, 42, 0.04);
  border-bottom-color: rgba(15, 23, 42, 0.08);
}
.safety-console-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: hsl(0, 80%, 60%);
  box-shadow: 0 0 6px rgba(244, 63, 94, 0.7);
  animation: safety-console-blink 1s ease-in-out infinite;
}
@keyframes safety-console-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
.safety-console-title {
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--text-strong);
}
.safety-console-tag {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 0.6rem;
}

/* Viewport with masked top/bottom fade + auto-scroll */
.safety-console-viewport {
  position: relative;
  height: 180px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
}
.safety-console-list {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0.85rem;
  animation: safety-log-scroll 24s linear infinite;
}
.safety-console-list li {
  padding: 0.18rem 0;
  font-size: 0.66rem;
  line-height: 1.5;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@keyframes safety-log-scroll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

/* Event tag chips */
.ev-time {
  color: var(--text-subtle);
  margin-right: 0.4rem;
}
.ev-tag {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 0.25rem;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin-right: 0.4rem;
}
.ev-cmd   { background: rgba(59, 130, 246, 0.18); color: hsl(210, 80%, 72%); }
.ev-sls   { background: rgba(249, 115, 22, 0.18); color: hsl(28, 85%, 70%); }
.ev-audit { background: rgba(244, 63, 94, 0.18); color: hsl(0, 80%, 76%); }
.ev-wd    { background: rgba(34, 197, 94, 0.18); color: hsl(150, 65%, 70%); }
.ev-warn  { background: rgba(234, 179, 8, 0.20); color: hsl(45, 90%, 70%); }
html[data-theme="marosa-light"] .ev-cmd   { background: rgba(59, 130, 246, 0.14); color: hsl(210, 75%, 36%); }
html[data-theme="marosa-light"] .ev-sls   { background: rgba(249, 115, 22, 0.14); color: hsl(28, 78%, 36%); }
html[data-theme="marosa-light"] .ev-audit { background: rgba(244, 63, 94, 0.14); color: hsl(0, 70%, 40%); }
html[data-theme="marosa-light"] .ev-wd    { background: rgba(34, 197, 94, 0.14); color: hsl(150, 55%, 28%); }
html[data-theme="marosa-light"] .ev-warn  { background: rgba(234, 179, 8, 0.18); color: hsl(35, 80%, 32%); }

.ev-ok       { float: right; color: hsl(150, 65%, 60%); font-weight: 700; }
.ev-block    { float: right; color: hsl(0, 80%, 70%); font-weight: 700; }
.ev-warn-pill{ float: right; color: hsl(45, 90%, 65%); font-weight: 700; }
html[data-theme="marosa-light"] .ev-ok        { color: hsl(150, 55%, 30%); }
html[data-theme="marosa-light"] .ev-block     { color: hsl(0, 70%, 40%); }
html[data-theme="marosa-light"] .ev-warn-pill { color: hsl(35, 85%, 35%); }

@media (prefers-reduced-motion: reduce) {
  .safety-pulse::after,
  .safety-console-dot,
  .safety-console-list { animation: none; }
}

/* ============================================================
   Dual-safety 3-tier stack (right panel of #safety section)
   Visualizes defense-in-depth: software → hardware → mechanical
   ============================================================ */
.safety-tier-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.safety-tier {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.85rem;
  position: relative;
}
html[data-theme="marosa-light"] .safety-tier {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(15, 23, 42, 0.10);
}

.safety-tier-software  { border-left: 3px solid var(--ap-teal, hsl(152, 62%, 48%)); }
.safety-tier-hardware  { border-left: 3px solid hsl(28, 78%, 55%); }
.safety-tier-physical  { border-left: 3px solid hsl(0, 78%, 60%); }
html[data-theme="marosa-light"] .safety-tier-software { border-left-color: var(--accent-strong); }
html[data-theme="marosa-light"] .safety-tier-hardware { border-left-color: hsl(28, 78%, 38%); }
html[data-theme="marosa-light"] .safety-tier-physical { border-left-color: hsl(0, 70%, 45%); }

.safety-tier-icon {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.safety-tier-software .safety-tier-icon {
  background: rgba(90, 175, 135, 0.12);
  border-color: rgba(90, 175, 135, 0.28);
  color: var(--ap-teal, hsl(152, 62%, 48%));
}
.safety-tier-hardware .safety-tier-icon {
  background: rgba(249, 115, 22, 0.12);
  border-color: rgba(249, 115, 22, 0.28);
  color: hsl(28, 78%, 60%);
}
.safety-tier-physical .safety-tier-icon {
  background: rgba(244, 63, 94, 0.12);
  border-color: rgba(244, 63, 94, 0.32);
  color: hsl(0, 78%, 65%);
  animation: safety-tier-pulse 1.8s ease-in-out infinite;
}
html[data-theme="marosa-light"] .safety-tier-software .safety-tier-icon { color: var(--accent-strong); }
html[data-theme="marosa-light"] .safety-tier-hardware .safety-tier-icon { color: hsl(28, 78%, 38%); }
html[data-theme="marosa-light"] .safety-tier-physical .safety-tier-icon { color: hsl(0, 70%, 45%); }

@keyframes safety-tier-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.35); }
  50%      { box-shadow: 0 0 0 6px rgba(244, 63, 94, 0); }
}

.safety-tier-body { flex: 1; min-width: 0; }
.safety-tier-label {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-family: var(--font-mono, monospace);
  margin-bottom: 0.2rem;
}
.safety-tier-software .safety-tier-label { color: var(--accent-strong); }
.safety-tier-hardware .safety-tier-label { color: hsl(28, 78%, 60%); }
.safety-tier-physical .safety-tier-label { color: hsl(0, 78%, 70%); }
html[data-theme="marosa-light"] .safety-tier-hardware .safety-tier-label { color: hsl(28, 78%, 36%); }
html[data-theme="marosa-light"] .safety-tier-physical .safety-tier-label { color: hsl(0, 70%, 42%); }

.safety-tier-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-strong);
  margin: 0 0 0.35rem;
  line-height: 1.3;
}
.safety-tier-desc {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-main);
  margin: 0;
}

/* Connector "độc lập với" / "và cuối cùng" between tiers */
.safety-tier-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 1rem;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-family: var(--font-mono, monospace);
  font-weight: 700;
}
.safety-tier-link-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.18), transparent);
}
html[data-theme="marosa-light"] .safety-tier-link-line {
  background: linear-gradient(to right, transparent, rgba(15, 23, 42, 0.18), transparent);
}
.safety-tier-link-text {
  flex-shrink: 0;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.12);
}
html[data-theme="marosa-light"] .safety-tier-link-text {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  .safety-tier-physical .safety-tier-icon { animation: none; }
}

/* ============================================================
   Feature viz — 6 mini SVG per feature card, all 300x60 viewBox
   ============================================================ */
.feature-viz {
  display: block;
  width: 100%;
  height: auto;
  max-height: 84px;
  margin-top: 0.85rem;
  padding: 0.55rem 0.6rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.6rem;
  overflow: visible;
}
html[data-theme="marosa-light"] .feature-viz {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.08);
}

/* Shared text styles inside feature viz */
.fv-axis-label {
  fill: var(--text-muted);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-family: var(--font-mono, monospace);
  text-transform: uppercase;
}
.fv-axis-value {
  fill: var(--text-subtle);
  font-size: 7px;
  font-weight: 600;
  font-family: var(--font-mono, monospace);
}

/* ---------- Viz 1: Phase-Adaptive PID ---------- */
.fv-phase-band      { fill: rgba(255, 255, 255, 0.04); }
.fv-phase-band-1    { fill: rgba(244, 63, 94, 0.10); }
.fv-phase-band-2    { fill: rgba(249, 115, 22, 0.10); }
.fv-phase-band-3    { fill: rgba(90, 175, 135, 0.14); }
html[data-theme="marosa-light"] .fv-phase-band-1 { fill: rgba(244, 63, 94, 0.08); }
html[data-theme="marosa-light"] .fv-phase-band-2 { fill: rgba(249, 115, 22, 0.08); }
html[data-theme="marosa-light"] .fv-phase-band-3 { fill: rgba(59, 128, 97, 0.12); }
.fv-phase-indicator {
  fill: var(--ap-teal, hsl(152, 62%, 48%));
  filter: drop-shadow(0 0 5px rgba(90, 175, 135, 0.6));
  animation: fv-phase-sweep 6s linear infinite;
}
html[data-theme="marosa-light"] .fv-phase-indicator { fill: var(--accent-strong); }
@keyframes fv-phase-sweep {
  0%   { transform: translateX(10px); }
  100% { transform: translateX(290px); }
}

/* ---------- Viz 2: Ghost Trace ---------- */
.fv-ghost-past {
  stroke: var(--ap-teal, hsl(152, 62%, 48%));
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(90, 175, 135, 0.4));
}
.fv-ghost-future {
  stroke: hsl(263, 75%, 68%);
  stroke-width: 1.8;
  fill: none;
  stroke-dasharray: 5 3;
  stroke-linecap: round;
  animation: fv-ghost-flow 1.6s linear infinite;
}
@keyframes fv-ghost-flow { to { stroke-dashoffset: -16; } }
.fv-ghost-now {
  stroke: var(--ap-teal);
  stroke-width: 1;
  stroke-dasharray: 1 2;
  opacity: 0.6;
}
.fv-ghost-now-dot {
  fill: var(--ap-teal);
  filter: drop-shadow(0 0 5px rgba(90, 175, 135, 0.7));
  transform-box: fill-box;
  transform-origin: center;
  animation: fv-pulse 1.4s ease-in-out infinite;
}
.fv-ghost-end-dot {
  fill: hsl(263, 75%, 68%);
  filter: drop-shadow(0 0 5px rgba(167, 139, 250, 0.6));
  transform-box: fill-box;
  transform-origin: center;
  animation: fv-pulse 1.4s ease-in-out infinite 0.5s;
}
html[data-theme="marosa-light"] .fv-ghost-past   { stroke: var(--accent-strong); }
html[data-theme="marosa-light"] .fv-ghost-future { stroke: hsl(263, 55%, 42%); }
html[data-theme="marosa-light"] .fv-ghost-now    { stroke: var(--accent-strong); }
html[data-theme="marosa-light"] .fv-ghost-now-dot { fill: var(--accent-strong); }
html[data-theme="marosa-light"] .fv-ghost-end-dot { fill: hsl(263, 55%, 42%); }

@keyframes fv-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.5); }
}

/* ---------- Viz 3: Predictive Coasting ---------- */
.fv-coast-target {
  stroke: var(--text-subtle);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: 0.5;
}
.fv-coast-bt {
  stroke: var(--ap-teal, hsl(152, 62%, 48%));
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(90, 175, 135, 0.4));
}
html[data-theme="marosa-light"] .fv-coast-bt { stroke: var(--accent-strong); }
.fv-coast-gas-track { fill: rgba(255, 255, 255, 0.06); }
.fv-coast-gas-fill {
  fill: hsl(28, 78%, 55%);
  filter: drop-shadow(0 0 4px rgba(249, 115, 22, 0.5));
  transform-origin: 14px center;
  animation: fv-coast-drop 4s ease-in-out infinite;
}
html[data-theme="marosa-light"] .fv-coast-gas-track { fill: rgba(15, 23, 42, 0.06); }
html[data-theme="marosa-light"] .fv-coast-gas-fill  { fill: hsl(28, 78%, 40%); }
@keyframes fv-coast-drop {
  0%, 30%  { transform: scaleX(1); }
  70%      { transform: scaleX(0.05); }
  85%      { transform: scaleX(0.05); }
  100%     { transform: scaleX(1); }
}
.fv-coast-countdown {
  fill: hsl(28, 78%, 60%);
  font-size: 7.5px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
}
html[data-theme="marosa-light"] .fv-coast-countdown { fill: hsl(28, 78%, 36%); }

/* ---------- Viz 4: Auto-Tuning Relay ---------- */
.fv-tune-setpoint {
  stroke: var(--text-subtle);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: 0.55;
}
.fv-tune-wave {
  stroke: hsl(210, 75%, 60%);
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: fv-tune-draw 4s ease-in-out infinite;
  filter: drop-shadow(0 0 3px rgba(59, 130, 246, 0.45));
}
html[data-theme="marosa-light"] .fv-tune-wave { stroke: hsl(210, 75%, 36%); }
@keyframes fv-tune-draw {
  0%       { stroke-dashoffset: 600; }
  60%, 100% { stroke-dashoffset: 0; }
}

/* ---------- Viz 5: Safety 3 gates ---------- */
.fv-safe-gate     { fill: rgba(255, 255, 255, 0.04); stroke: rgba(255, 255, 255, 0.10); stroke-width: 1; }
.fv-safe-gate-1   { stroke: rgba(244, 63, 94, 0.45); }
.fv-safe-gate-2   { stroke: rgba(249, 115, 22, 0.45); }
.fv-safe-gate-3   { stroke: rgba(90, 175, 135, 0.50); }
html[data-theme="marosa-light"] .fv-safe-gate { fill: rgba(15, 23, 42, 0.03); }
.fv-safe-gate-label {
  fill: var(--text-strong);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.08em;
  font-family: var(--font-mono, monospace);
}
.fv-safe-arrow {
  fill: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
}
.fv-safe-packet {
  fill: hsl(150, 65%, 55%);
  filter: drop-shadow(0 0 5px rgba(34, 197, 94, 0.65));
  animation: fv-safe-travel 5s linear infinite;
}
html[data-theme="marosa-light"] .fv-safe-packet { fill: hsl(150, 55%, 30%); }
@keyframes fv-safe-travel {
  0%   { transform: translateX(0); }
  100% { transform: translateX(290px); }
}

/* ---------- Viz 6: 4 mode pills cycling ---------- */
.fv-mode-pill {
  fill: rgba(255, 255, 255, 0.04);
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 1;
  transition: fill 200ms ease, stroke 200ms ease;
}
html[data-theme="marosa-light"] .fv-mode-pill {
  fill: rgba(15, 23, 42, 0.04);
  stroke: rgba(15, 23, 42, 0.14);
}
.fv-mode-1 { animation: fv-mode-active 8s steps(1, end) infinite -2s; }
.fv-mode-2 { animation: fv-mode-active 8s steps(1, end) infinite 0s; }
.fv-mode-3 { animation: fv-mode-active 8s steps(1, end) infinite 2s; }
.fv-mode-4 { animation: fv-mode-active 8s steps(1, end) infinite 4s; }
@keyframes fv-mode-active {
  0%, 25%   { fill: rgba(167, 139, 250, 0.30); stroke: hsl(263, 75%, 68%); }
  25.01%, 100% { fill: rgba(255, 255, 255, 0.04); stroke: rgba(255, 255, 255, 0.12); }
}
html[data-theme="marosa-light"] .fv-mode-1,
html[data-theme="marosa-light"] .fv-mode-2,
html[data-theme="marosa-light"] .fv-mode-3,
html[data-theme="marosa-light"] .fv-mode-4 {
  animation-name: fv-mode-active-light;
}
@keyframes fv-mode-active-light {
  0%, 25%   { fill: rgba(127, 75, 198, 0.25); stroke: hsl(263, 55%, 42%); }
  25.01%, 100% { fill: rgba(15, 23, 42, 0.04); stroke: rgba(15, 23, 42, 0.14); }
}
.fv-mode-label {
  fill: var(--text-strong);
  font-size: 8px;
  font-weight: 700;
  font-family: var(--font-sans);
}

@media (prefers-reduced-motion: reduce) {
  .fv-phase-indicator,
  .fv-ghost-future,
  .fv-ghost-now-dot,
  .fv-ghost-end-dot,
  .fv-coast-gas-fill,
  .fv-tune-wave,
  .fv-safe-packet,
  .fv-mode-1, .fv-mode-2, .fv-mode-3, .fv-mode-4 { animation: none; }
}

/* ============================================================
   Hybrid Control live viz — Tech card 1 (FeedForward + PID).
   Phase cursor sweeps through 5 phases. FF bar undulates slowly
   (80-90%). PID bar oscillates fast (5-18%). Burner = sum, smooth.
   ============================================================ */
.hybrid-viz {
  margin: 1.25rem 0 0;
  padding: 0.85rem 1rem 0.75rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0.85rem;
}
html[data-theme="marosa-light"] .hybrid-viz {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.10);
}
.hybrid-viz-header {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.72rem;
  margin-bottom: 0.4rem;
}
.hybrid-viz-title {
  font-weight: 700;
  color: var(--text-strong);
}
.hybrid-viz-sub {
  color: var(--text-muted);
  font-family: var(--font-mono, monospace);
  font-size: 0.66rem;
}
.hybrid-viz-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 240px;
  overflow: visible;
}

/* Phase track */
.hv-phase {
  fill: rgba(255, 255, 255, 0.04);
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 1;
}
.hv-phase-charge   { fill: rgba(167, 139, 250, 0.10); }
.hv-phase-drying   { fill: rgba(249, 115, 22, 0.10); }
.hv-phase-maillard { fill: rgba(244, 63, 94, 0.12); }
.hv-phase-dev      { fill: rgba(90, 175, 135, 0.14); }
.hv-phase-postfc   { fill: rgba(34, 197, 94, 0.10); }
html[data-theme="marosa-light"] .hv-phase-charge   { fill: rgba(127, 75, 198, 0.08); }
html[data-theme="marosa-light"] .hv-phase-drying   { fill: rgba(234, 88, 12, 0.08); }
html[data-theme="marosa-light"] .hv-phase-maillard { fill: rgba(244, 63, 94, 0.08); }
html[data-theme="marosa-light"] .hv-phase-dev      { fill: rgba(59, 128, 97, 0.10); }
html[data-theme="marosa-light"] .hv-phase-postfc   { fill: rgba(34, 197, 94, 0.08); }

.hv-phase-text {
  fill: var(--text-strong);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  font-family: var(--font-mono, monospace);
}
.hv-axis-label {
  fill: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-family: var(--font-mono, monospace);
  text-transform: uppercase;
}
.hv-axis-value {
  font-size: 13px;
  font-weight: 800;
  font-family: var(--font-mono, monospace);
}
.hv-pct-ff     { fill: var(--ap-teal, hsl(152, 62%, 48%)); }
.hv-pct-pid    { fill: hsl(263, 75%, 68%); }
.hv-pct-burner { fill: hsl(28, 78%, 60%); }
html[data-theme="marosa-light"] .hv-pct-ff     { fill: var(--accent-strong); }
html[data-theme="marosa-light"] .hv-pct-pid    { fill: hsl(263, 55%, 42%); }
html[data-theme="marosa-light"] .hv-pct-burner { fill: hsl(28, 78%, 36%); }

/* Phase cursor — vertical line sweeping across 5 phases */
.hv-phase-cursor {
  stroke: var(--ap-teal, hsl(152, 62%, 48%));
  stroke-width: 2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(90, 175, 135, 0.7));
  animation: hv-phase-sweep 9s linear infinite;
}
html[data-theme="marosa-light"] .hv-phase-cursor {
  stroke: var(--accent-strong);
  filter: drop-shadow(0 0 4px rgba(59, 128, 97, 0.45));
}
@keyframes hv-phase-sweep {
  0%   { transform: translateX(40px); }
  100% { transform: translateX(760px); }
}

/* Bars */
.hv-bar-track {
  fill: rgba(255, 255, 255, 0.05);
}
html[data-theme="marosa-light"] .hv-bar-track {
  fill: rgba(15, 23, 42, 0.05);
}
.hv-bar {
  transform-box: fill-box;
  transform-origin: left center;
}
.hv-bar-ff {
  fill: var(--ap-teal, hsl(152, 62%, 48%));
  filter: drop-shadow(0 0 4px rgba(90, 175, 135, 0.4));
  animation: hv-ff-undulate 9s ease-in-out infinite;
}
.hv-bar-pid {
  fill: hsl(263, 75%, 68%);
  filter: drop-shadow(0 0 4px rgba(167, 139, 250, 0.4));
  animation: hv-pid-oscillate 1.6s ease-in-out infinite;
}
.hv-bar-burner {
  fill: hsl(28, 78%, 60%);
  filter: drop-shadow(0 0 4px rgba(249, 115, 22, 0.4));
  animation: hv-burner-follow 9s ease-in-out infinite;
}
html[data-theme="marosa-light"] .hv-bar-ff {
  fill: var(--accent-strong);
  filter: drop-shadow(0 0 3px rgba(59, 128, 97, 0.3));
}
html[data-theme="marosa-light"] .hv-bar-pid {
  fill: hsl(263, 55%, 42%);
  filter: drop-shadow(0 0 3px rgba(127, 75, 198, 0.3));
}
html[data-theme="marosa-light"] .hv-bar-burner {
  fill: hsl(28, 78%, 36%);
  filter: drop-shadow(0 0 3px rgba(234, 88, 12, 0.3));
}

/* FeedForward undulates 80% → 90% slowly with phases */
@keyframes hv-ff-undulate {
  0%   { transform: scaleX(0.80); }
  20%  { transform: scaleX(0.86); }
  45%  { transform: scaleX(0.84); }
  70%  { transform: scaleX(0.90); }
  90%  { transform: scaleX(0.82); }
  100% { transform: scaleX(0.80); }
}
/* PID corrects fast — ±5-18% range */
@keyframes hv-pid-oscillate {
  0%, 100% { transform: scaleX(0.06); }
  30%      { transform: scaleX(0.16); }
  60%      { transform: scaleX(0.08); }
  80%      { transform: scaleX(0.18); }
}
/* Burner follows FF + PID sum — smooth ~85-100% */
@keyframes hv-burner-follow {
  0%   { transform: scaleX(0.86); }
  20%  { transform: scaleX(0.94); }
  45%  { transform: scaleX(0.92); }
  70%  { transform: scaleX(0.97); }
  90%  { transform: scaleX(0.88); }
  100% { transform: scaleX(0.86); }
}

/* Per-phase PID gain readout — animates between 5 phase value sets */
.hv-gain-label {
  fill: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-mono, monospace);
}
.hv-gain-kp, .hv-gain-ti, .hv-gain-td, .hv-gain-clamp {
  fill: var(--text-strong);
  font-weight: 800;
  animation: hv-gain-cycle 9s steps(5) infinite;
}
html[data-theme="marosa-light"] .hv-gain-kp,
html[data-theme="marosa-light"] .hv-gain-ti,
html[data-theme="marosa-light"] .hv-gain-td,
html[data-theme="marosa-light"] .hv-gain-clamp {
  fill: var(--accent-strong);
}

/* fade-pulse highlight when gain switches per phase */
@keyframes hv-gain-cycle {
  0%, 95% { opacity: 1; }
  97%     { opacity: 0.3; }
  100%    { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hv-phase-cursor,
  .hv-bar-ff,
  .hv-bar-pid,
  .hv-bar-burner,
  .hv-gain-kp, .hv-gain-ti, .hv-gain-td, .hv-gain-clamp { animation: none; }
}

/* Legend */
.hybrid-viz-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
  margin-top: 0.5rem;
  font-size: 0.68rem;
  color: var(--text-muted);
}
.hv-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.hv-legend-swatch {
  display: inline-block;
  width: 18px;
  height: 3px;
  border-radius: 2px;
}
.hv-swatch-ff     { background: var(--ap-teal, hsl(152, 62%, 48%)); box-shadow: 0 0 4px rgba(90, 175, 135, 0.5); }
.hv-swatch-pid    { background: hsl(263, 75%, 68%); box-shadow: 0 0 4px rgba(167, 139, 250, 0.5); }
.hv-swatch-burner { background: hsl(28, 78%, 60%); box-shadow: 0 0 4px rgba(249, 115, 22, 0.5); }
html[data-theme="marosa-light"] .hv-swatch-ff     { background: var(--accent-strong); box-shadow: 0 0 3px rgba(59, 128, 97, 0.4); }
html[data-theme="marosa-light"] .hv-swatch-pid    { background: hsl(263, 55%, 42%); box-shadow: 0 0 3px rgba(127, 75, 198, 0.4); }
html[data-theme="marosa-light"] .hv-swatch-burner { background: hsl(28, 78%, 36%); box-shadow: 0 0 3px rgba(234, 88, 12, 0.4); }

/* ============================================================
   Active Calibration live viz — Tech card 3 (4-stage relay feedback)
   Gas square wave + BT response across 4 phases, continuous flow.
   ============================================================ */
.active-cal-viz {
  margin: 1.25rem 0 0;
  padding: 0.85rem 1rem 0.75rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0.85rem;
}
html[data-theme="marosa-light"] .active-cal-viz {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.10);
}
.active-cal-header {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.72rem;
  margin-bottom: 0.4rem;
}
.active-cal-title {
  font-weight: 700;
  color: var(--text-strong);
}
.active-cal-sub {
  color: var(--text-muted);
  font-family: var(--font-mono, monospace);
  font-size: 0.66rem;
}
.active-cal-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 220px;
  overflow: visible;
}

/* Phase backgrounds — color-coded by stage */
.ac-phase {
  fill: rgba(255, 255, 255, 0.02);
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 1;
}
.ac-phase-1 { fill: rgba(96, 165, 250, 0.06); }   /* cold blue */
.ac-phase-2 { fill: rgba(249, 115, 22, 0.07); }   /* orange thermal */
.ac-phase-3 { fill: rgba(234, 179, 8, 0.06); }    /* amber min-heat */
.ac-phase-4 { fill: rgba(90, 175, 135, 0.10); }   /* teal FOPDT (highlight) */
html[data-theme="marosa-light"] .ac-phase-1 { fill: rgba(59, 130, 246, 0.05); }
html[data-theme="marosa-light"] .ac-phase-2 { fill: rgba(234, 88, 12, 0.05); }
html[data-theme="marosa-light"] .ac-phase-3 { fill: rgba(234, 179, 8, 0.06); }
html[data-theme="marosa-light"] .ac-phase-4 { fill: rgba(59, 128, 97, 0.08); }

.ac-divider {
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
html[data-theme="marosa-light"] .ac-divider { stroke: rgba(15, 23, 42, 0.10); }

.ac-phase-label {
  fill: var(--text-strong);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  font-family: var(--font-mono, monospace);
}
.ac-axis-label {
  fill: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
}

/* Gas signal — orange square wave with animated flow */
.ac-gas {
  stroke: hsl(28, 78%, 60%);
  stroke-width: 2;
  fill: none;
  stroke-linecap: square;
  stroke-linejoin: miter;
  filter: drop-shadow(0 0 4px rgba(249, 115, 22, 0.5));
  stroke-dasharray: 6 4;
  animation: ac-flow 2.5s linear infinite;
}
html[data-theme="marosa-light"] .ac-gas {
  stroke: hsl(28, 78%, 40%);
  filter: drop-shadow(0 0 3px rgba(234, 88, 12, 0.35));
}

/* BT response — teal smooth with flowing dash */
.ac-bt {
  stroke: var(--ap-teal, hsl(152, 62%, 48%));
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(90, 175, 135, 0.45));
  stroke-dasharray: 8 3;
  animation: ac-flow 3.5s linear infinite;
}
html[data-theme="marosa-light"] .ac-bt {
  stroke: var(--accent-strong);
  filter: drop-shadow(0 0 3px rgba(59, 128, 97, 0.35));
}

/* Setpoint reference (phase 4 only) */
.ac-setpoint {
  stroke: rgba(255, 255, 255, 0.4);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
html[data-theme="marosa-light"] .ac-setpoint { stroke: rgba(15, 23, 42, 0.30); }

@keyframes ac-flow {
  to { stroke-dashoffset: -40; }
}

/* FOPDT markers + result */
.ac-marker-label {
  fill: var(--text-muted);
  font-size: 11px;
  font-style: italic;
  font-family: var(--font-mono, monospace);
}

.ac-result {
  animation: ac-result-pulse 6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: left center;
}
.ac-result-bg {
  fill: rgba(90, 175, 135, 0.14);
  stroke: var(--ap-teal, hsl(152, 62%, 48%));
  stroke-width: 1;
  stroke-dasharray: 4 2;
}
html[data-theme="marosa-light"] .ac-result-bg {
  fill: rgba(59, 128, 97, 0.10);
  stroke: var(--accent-strong);
}
.ac-result-check {
  fill: hsl(150, 65%, 60%);
  font-size: 16px;
  font-weight: 900;
  filter: drop-shadow(0 0 5px rgba(34, 197, 94, 0.6));
}
html[data-theme="marosa-light"] .ac-result-check { fill: hsl(150, 55%, 30%); }
.ac-result-text {
  fill: var(--text-strong);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
}
.ac-result-val {
  fill: var(--ap-teal, hsl(152, 62%, 48%));
  font-weight: 800;
}
html[data-theme="marosa-light"] .ac-result-val { fill: var(--accent-strong); }

@keyframes ac-result-pulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ac-gas, .ac-bt, .ac-result { animation: none; }
}

/* Legend */
.active-cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
  margin-top: 0.5rem;
  font-size: 0.68rem;
  color: var(--text-muted);
}
.ac-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.ac-legend-swatch {
  display: inline-block;
  width: 18px;
  height: 3px;
  border-radius: 2px;
}
.ac-swatch-gas { background: hsl(28, 78%, 60%); box-shadow: 0 0 4px rgba(249, 115, 22, 0.5); }
.ac-swatch-bt  { background: var(--ap-teal, hsl(152, 62%, 48%)); box-shadow: 0 0 4px rgba(90, 175, 135, 0.5); }
.ac-swatch-sp {
  background:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.4) 0 3px,
      transparent 3px 6px);
  height: 2px;
}
html[data-theme="marosa-light"] .ac-swatch-gas { background: hsl(28, 78%, 40%); box-shadow: 0 0 3px rgba(234, 88, 12, 0.4); }
html[data-theme="marosa-light"] .ac-swatch-bt  { background: var(--accent-strong); box-shadow: 0 0 3px rgba(59, 128, 97, 0.4); }
html[data-theme="marosa-light"] .ac-swatch-sp {
  background:
    repeating-linear-gradient(90deg,
      rgba(15, 23, 42, 0.4) 0 3px,
      transparent 3px 6px);
}

/* --- L3a.5 Persona icons (replaces inline at lines 1633, 1651, 1669) --- */
.persona-icon-teal {
  background: rgba(90, 175, 135, 0.12);
  color: var(--clr-teal-400);
}
.persona-icon-purple {
  background: rgba(167, 139, 250, 0.12);
  color: hsl(270, 75%, 76%);
}
.persona-icon-orange {
  background: rgba(249, 115, 22, 0.12);
  color: var(--clr-orange-400);
}
html[data-theme="marosa-light"] .persona-icon-teal {
  background: rgba(59, 128, 97, 0.12);
  color: var(--accent);
}
html[data-theme="marosa-light"] .persona-icon-purple {
  background: rgba(127, 75, 198, 0.12);
  color: hsl(263, 60%, 38%);
}
html[data-theme="marosa-light"] .persona-icon-orange {
  background: rgba(234, 88, 12, 0.12);
  color: hsl(28, 78%, 32%);
}

/* --- L3a.6 Connection tags (replaces inline at lines 1302, 1326) --- */
.connection-tag-teal {
  background: rgba(90, 175, 135, 0.15);
  color: var(--clr-teal-400);
}
.connection-tag-purple {
  background: rgba(167, 139, 250, 0.15);
  color: hsl(270, 75%, 76%);
}
html[data-theme="marosa-light"] .connection-tag-teal {
  background: rgba(59, 128, 97, 0.14);
  color: var(--accent);
}
html[data-theme="marosa-light"] .connection-tag-purple {
  background: rgba(127, 75, 198, 0.14);
  color: hsl(263, 60%, 38%);
}

/* --- L3a.7 CTA-tier icons (replaces inline at lines 2188, 2202, 2217) --- */
.cta-tier-icon-teal {
  background: rgba(90, 175, 135, 0.12);
  color: var(--clr-teal-400);
}
.cta-tier-icon-purple {
  background: rgba(167, 139, 250, 0.12);
  color: hsl(270, 75%, 76%);
}
.cta-tier-icon-light {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}
html[data-theme="marosa-light"] .cta-tier-icon-teal {
  background: rgba(59, 128, 97, 0.12);
  color: var(--accent);
}
html[data-theme="marosa-light"] .cta-tier-icon-purple {
  background: rgba(127, 75, 198, 0.12);
  color: hsl(263, 60%, 38%);
}
/* .cta-tier-icon-light stays white-on-translucent because it sits inside
   .cta-tier-hot which is always the teal-emerald gradient (theme exception) */

/* --- L3a.8 Tech legend dots (replaces inline at lines 931-933) --- */
.tech-legend-dot-teal { background: rgb(45, 212, 191); }
.tech-legend-dot-teal-dashed { background: rgba(45, 212, 191, 0.7); border: 1px dashed rgb(45, 212, 191); }
.tech-legend-dot-purple-dashed { background: hsl(270, 75%, 76%); border: 1px dashed hsl(270, 75%, 76%); }
html[data-theme="marosa-light"] .tech-legend-dot-purple-dashed {
  background: hsl(263, 60%, 38%);
  border-color: hsl(263, 60%, 38%);
}

/* --- L3a.9 Story quote panel (replaces inline at line 2263) --- */
.story-quote-panel {
  background: linear-gradient(to right, rgba(90, 175, 135, 0.08), transparent);
  border-left: 4px solid var(--clr-teal-400);
}
html[data-theme="marosa-light"] .story-quote-panel {
  background: linear-gradient(to right, rgba(59, 128, 97, 0.10), transparent);
  border-left-color: var(--accent-strong);
}

/* Story Level 3 highlighted panel (line 2319-2321) */
.story-level3-panel {
  background: rgba(90, 175, 135, 0.08);
  border: 1px solid rgba(90, 175, 135, 0.2);
}
html[data-theme="marosa-light"] .story-level3-panel {
  background: rgba(59, 128, 97, 0.10);
  border-color: rgba(59, 128, 97, 0.32);
}
.story-level3-badge {
  background: linear-gradient(135deg, var(--clr-teal-400), var(--clr-emerald-400));
  box-shadow: 0 0 20px rgba(90, 175, 135, 0.4);
}

/* --- L3a.10 Safety stat figure color (replaces inline at line 527, 531, 535) --- */
.stat-figure-rose,
.stat-value-rose { color: var(--clr-rose-400); }
html[data-theme="marosa-light"] .stat-figure-rose,
html[data-theme="marosa-light"] .stat-value-rose { color: hsl(0, 65%, 38%); }

/* --- #stats: DaisyUI `stats` is an inline-grid with content-sized columns and
   white-space:nowrap on .stat-value/.stat-desc, so a long stat description forces
   the whole row past the viewport (horizontal scroll). Force a real full-width
   equal-column grid whose tracks can shrink, and let the text wrap. --- */
#stats .stats {
  display: grid;
  width: 100%;
  grid-auto-flow: row;
  grid-template-columns: minmax(0, 1fr);
  overflow: visible;
}
@media (min-width: 1024px) {
  #stats .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
#stats .stat { min-width: 0; }
#stats .stat-title,
#stats .stat-value,
#stats .stat-desc { white-space: normal; }

/* --- L3a.11 Cockpit / under-the-hood icons (replaces inline at lines 566-646) --- */
.cockpit-icon-teal { color: var(--clr-teal-400); }
.cockpit-icon-emerald { color: var(--clr-emerald-400); }
.cockpit-icon-orange { color: var(--clr-orange-400); }
.cockpit-icon-blue { color: var(--clr-blue-400); }
.cockpit-icon-rose { color: var(--clr-rose-400); }
.cockpit-icon-purple { color: var(--clr-purple-400); }
/* These icons live inside dark "cockpit-frame" backdrop — theme exception,
   keep bright on both themes for consistency with HUD aesthetic */

/* ============================================================
   ThemePlan_3 L4 — Component-specific light fixes
   Targets selectors that hardcoded color:white or color:teal-300/400
   without a light override sibling rule.
   ============================================================ */

/* CRITICAL — story-levels-footer-text strong was white-on-white in light */
html[data-theme="marosa-light"] .story-levels-footer-text strong {
  color: var(--text-strong);
}
html[data-theme="marosa-light"] .story-levels-footer-text span {
  color: var(--text-muted);
}
html[data-theme="marosa-light"] .story-levels-footer {
  background: rgba(59, 128, 97, 0.06);
  border-color: rgba(59, 128, 97, 0.30);
}
html[data-theme="marosa-light"] .story-levels-footer-icons {
  color: var(--accent-strong);
}

/* platform-badge border bump (current rgba 0.24 → 0.55 via --accent-line) */
html[data-theme="marosa-light"] .platform-badge {
  border-color: var(--accent-line) !important;
}

/* btn-outline / btn-ghost-bordered border opacity bump on light */
html[data-theme="marosa-light"] .btn-outline,
html[data-theme="marosa-light"] .btn-ghost-bordered {
  border-color: var(--accent-line);
}
html[data-theme="marosa-light"] .btn-outline:hover,
html[data-theme="marosa-light"] .btn-ghost-bordered:hover {
  border-color: var(--accent);
}

/* Hover-text-white on links/buttons must flip to dark on light theme */
html[data-theme="marosa-light"] a.hover\:text-white:hover,
html[data-theme="marosa-light"] .hover\:text-white:hover {
  color: var(--text-strong) !important;
}

/* app-feature-card meta (line 1170 in theme.css uses --clr-teal-400) */
html[data-theme="marosa-light"] .app-feature-card .feature-card-meta {
  color: var(--accent-strong);
}

/* bridge-kit-pill, tech-badge, cockpit-side strong — primitives swap to light-safe */
html[data-theme="marosa-light"] .bridge-kit-pill,
html[data-theme="marosa-light"] .tech-badge,
html[data-theme="marosa-light"] .under-the-hood h4,
html[data-theme="marosa-light"] .cockpit-side strong {
  color: var(--accent-strong);
}

/* hmi-proof-item label uppercase — bump from --text-muted to --text-meta */
html[data-theme="marosa-light"] .hmi-proof-item span {
  color: var(--text-meta);
}

/* Lang toggle hard-coded color via inline style — wrap with light override */
html[data-theme="marosa-light"] #lang-toggle {
  color: var(--text-strong) !important;
}
html[data-theme="marosa-light"] #lang-toggle,
html[data-theme="marosa-light"] [data-theme-toggle] {
  border-color: rgba(15, 23, 42, 0.20);
}
html[data-theme="marosa-light"] #lang-toggle:hover,
html[data-theme="marosa-light"] [data-theme-toggle]:hover {
  border-color: rgba(15, 23, 42, 0.40);
}

/* --- Additional light overrides for component CSS still referencing clr-teal-400 --- */
/* Tech section icons (.tech-pipeline-output i, .tech-anomaly-cell i, .lbn-bonus-strip i) */
html[data-theme="marosa-light"] .tech-pipeline-output i,
html[data-theme="marosa-light"] .tech-anomaly-cell i,
html[data-theme="marosa-light"] .lbn-bonus-strip i {
  color: var(--accent-strong);
}

/* Diagram decision-yes label */
html[data-theme="marosa-light"] .diagram-decision-yes { color: var(--accent-strong); }

/* simple-model-card teal note icon */
html[data-theme="marosa-light"] .simple-model-card-a .simple-note-row span svg {
  color: var(--accent-strong);
}

/* mobile menu button text was text-gray-300 → now text-main. Cover on light */
html[data-theme="marosa-light"] #mobile-menu-btn {
  color: var(--text-strong);
}
html[data-theme="marosa-light"] #mobile-menu-btn:hover {
  color: var(--accent);
}

/* --- Comparison showcase (Trước/Sau AutoPilot section) light overrides ---
   .mini-workflow div, .comparison-tags span, .result-score, .comparison-divider
   all hardcode white/teal-300 on dark assumption. Without these overrides the
   workflow steps + tags + 99.5% block become invisible on light. */
html[data-theme="marosa-light"] .mini-workflow div {
  color: var(--text-main);
}
html[data-theme="marosa-light"] .mini-workflow span {
  /* badge number stays white on the rose/teal tinted circle bg — readable on both themes */
  color: #ffffff !important;
}
html[data-theme="marosa-light"] .manual .mini-workflow span {
  background: hsl(0, 65%, 55%);
  border-color: hsl(0, 65%, 38%);
}
html[data-theme="marosa-light"] .autopilot .mini-workflow span {
  background: var(--accent);
  border-color: var(--accent-strong);
}
html[data-theme="marosa-light"] .comparison-tags span {
  background: rgba(15, 23, 42, 0.05) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: var(--text-main) !important;
}
html[data-theme="marosa-light"] .comparison-divider {
  color: var(--accent-strong);
}
html[data-theme="marosa-light"] .comparison-label {
  color: var(--text-strong);
}
html[data-theme="marosa-light"] .manual .comparison-label {
  color: hsl(0, 65%, 38%);
}
html[data-theme="marosa-light"] .autopilot .comparison-label {
  color: var(--accent-strong);
}
html[data-theme="marosa-light"] .comparison-column h4 {
  color: var(--text-strong);
}
html[data-theme="marosa-light"] .result-score {
  background: rgba(59, 128, 97, 0.12);
  border-color: rgba(59, 128, 97, 0.32);
}
html[data-theme="marosa-light"] .result-score span {
  color: var(--accent-strong) !important;
}
html[data-theme="marosa-light"] .result-score small {
  color: var(--accent-strong);
}
html[data-theme="marosa-light"] .comparison-result strong {
  color: var(--text-strong);
}
html[data-theme="marosa-light"] .comparison-result p {
  color: var(--text-main);
}

/* Control deep-dive — give the left timeline more vertical breathing room
   so its bottom aligns visually with the right autopilot-viz panel. */
.control-timeline li { padding-block: 0.45rem; }
.control-timeline { gap: 0.65rem; }
@media (min-width: 1024px) {
  .control-timeline li { padding-block: 0.95rem; }
  .control-timeline { gap: 1rem; }
}

/* ============================================================
   ThemePlan_3 L4 — AutoPilot overlay visualization (replaces 2-column
   comparison-showcase). SVG chart with profile reference + manual wobble
   + AutoPilot smooth curve + KPI annotation. Phase backgrounds, axes,
   draw-in animation triggered when scrolled into view.
   ============================================================ */
.autopilot-viz {
  /* Local teal tones — dimmed vs global --accent to reduce eye strain
     on the dark backdrop. Light theme reuses the global dark teal. */
  --ap-teal: hsl(174, 62%, 48%); /* telemetry teal — kept distinct from brand green */
  --ap-teal-glow: rgba(90, 175, 135, 0.22);
  --ap-teal-faint: rgba(90, 175, 135, 0.10);
  --ap-red: hsl(0, 72%, 60%);

  position: relative;
  width: 100%;
  margin: 0 auto;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: 1.1rem 1rem 0.85rem;
  box-shadow: var(--card-shadow);
}
html[data-theme="marosa-light"] .autopilot-viz {
  --ap-teal: hsl(174, 65%, 38%); /* telemetry teal (light) — not brand green */
  --ap-teal-glow: rgba(59, 128, 97, 0.20);
  --ap-teal-faint: rgba(59, 128, 97, 0.10);
  --ap-red: hsl(0, 70%, 45%);
}
.autopilot-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 340px;
  overflow: visible;
}

/* Phase backgrounds */
.ap-phase { fill: rgba(255, 255, 255, 0.025); }
.ap-phase-maillard { fill: rgba(255, 255, 255, 0.04); }
.ap-phase-dev { fill: var(--ap-teal-faint); }
html[data-theme="marosa-light"] .ap-phase { fill: rgba(15, 23, 42, 0.025); }
html[data-theme="marosa-light"] .ap-phase-maillard { fill: rgba(15, 23, 42, 0.045); }

/* Grid lines */
.ap-grid line {
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
html[data-theme="marosa-light"] .ap-grid line {
  stroke: rgba(15, 23, 42, 0.10);
}

/* Phase labels */
.ap-phase-labels text {
  fill: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
/* Axis labels */
.ap-axis-y text,
.ap-axis-x text {
  fill: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
}

/* Profile reference (dotted target curve) */
.ap-profile {
  stroke: var(--text-muted);
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 1 5;
  stroke-linecap: round;
  opacity: 0.55;
}

/* Manual curve (red wobble) */
.ap-manual {
  stroke: var(--ap-red);
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* AutoPilot curve (teal solid, soft glow) */
.ap-autopilot {
  stroke: var(--ap-teal);
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px var(--ap-teal-glow));
}

/* Endpoint dots */
.ap-endpoint-auto {
  fill: var(--ap-teal);
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 1.5;
}
html[data-theme="marosa-light"] .ap-endpoint-auto {
  stroke: #ffffff;
}
.ap-endpoint-manual {
  fill: var(--ap-red);
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 1.5;
}
html[data-theme="marosa-light"] .ap-endpoint-manual {
  stroke: #ffffff;
}

/* KPI annotation */
.ap-kpi-connector {
  stroke: var(--ap-teal);
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 3 3;
  opacity: 0.65;
}
.ap-kpi-bubble {
  fill: var(--ap-teal);
  stroke: rgba(255, 255, 255, 0.10);
  stroke-width: 1;
}
html[data-theme="marosa-light"] .ap-kpi-bubble {
  stroke: rgba(15, 23, 42, 0.08);
}
.ap-kpi-headline {
  fill: #ffffff;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 800;
}
.ap-kpi-sub {
  fill: rgba(255, 255, 255, 0.85);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
}

/* Legend below chart */
.autopilot-legend {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.6rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 600;
}
.ap-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.ap-legend-item::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 3px;
  border-radius: 2px;
}
.ap-legend-profile::before {
  background:
    repeating-linear-gradient(90deg,
      var(--text-muted) 0 2px,
      transparent 2px 6px);
  height: 2px;
  margin-bottom: 1px;
}
.ap-legend-manual::before { background: var(--ap-red); }
.ap-legend-auto::before {
  background: var(--ap-teal);
  box-shadow: 0 0 4px var(--ap-teal-glow);
}

/* Stats row */
.autopilot-stats {
  display: grid;
  grid-template-columns: 1fr auto 1fr 1.4fr;
  gap: 0.65rem;
  margin-top: 1rem;
  align-items: stretch;
}
.ap-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.75rem 0.9rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  text-align: center;
}
.ap-stat-value {
  font-size: clamp(1.25rem, 1.9vw, 1.65rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}
.ap-stat-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.ap-stat-manual .ap-stat-value { color: var(--ap-red); }
.ap-stat-auto .ap-stat-value   { color: var(--ap-teal); }
.ap-stat-result {
  background: linear-gradient(135deg, var(--ap-teal-faint), rgba(0, 0, 0, 0));
  border-color: var(--accent-line);
}
.ap-stat-result .ap-stat-value { color: var(--ap-teal); }
.ap-stat-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--text-muted);
}
.ap-stat-arrow svg { width: 1.5rem; height: 1.5rem; }

.autopilot-caveat {
  margin-top: 0.85rem;
  padding: 0 0.5rem;
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Draw-in animation triggered by .is-revealed class */
.autopilot-viz .ap-manual,
.autopilot-viz .ap-autopilot {
  stroke-dasharray: var(--ap-len, 2000);
  stroke-dashoffset: var(--ap-len, 2000);
  transition: none;
}
.autopilot-viz .ap-profile {
  opacity: 0;
  transition: opacity 0.5s ease-out 0.1s;
}
.autopilot-viz .ap-endpoint,
.autopilot-viz .ap-kpi {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}
.autopilot-viz.is-revealed .ap-profile { opacity: 0.55; }
.autopilot-viz.is-revealed .ap-manual {
  animation: ap-draw 1.6s ease-out 0.3s forwards;
}
.autopilot-viz.is-revealed .ap-autopilot {
  animation: ap-draw 1.4s cubic-bezier(0.34, 0.85, 0.42, 1) 1.0s forwards;
}
.autopilot-viz.is-revealed .ap-endpoint-manual { opacity: 1; transition-delay: 1.7s; }
.autopilot-viz.is-revealed .ap-endpoint-auto { opacity: 1; transition-delay: 2.2s; }
.autopilot-viz.is-revealed .ap-kpi { opacity: 1; transition-delay: 2.4s; }

@keyframes ap-draw {
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .autopilot-viz .ap-manual,
  .autopilot-viz .ap-autopilot {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
  .autopilot-viz .ap-profile,
  .autopilot-viz .ap-endpoint,
  .autopilot-viz .ap-kpi { opacity: 1; }
  .autopilot-viz .ap-profile { opacity: 0.55; }
  .autopilot-viz.is-revealed .ap-manual,
  .autopilot-viz.is-revealed .ap-autopilot { animation: none; }
}

/* Mobile responsive — stack stats vertically */
@media (max-width: 640px) {
  .autopilot-viz { padding: 1.25rem 0.75rem 0.75rem; }
  .autopilot-stats {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
  .ap-stat-arrow { display: none; }
  .ap-kpi-headline { font-size: 12px; }
  .ap-kpi-sub { font-size: 9px; }
  .autopilot-legend { gap: 0.85rem; font-size: 0.72rem; }
}

/* ============================================================
   ContendEnhancePlan_2 — Sale Gateway + collapsible Sale Panel
   Tech-first / sale-collapsible restructure. See plan section 4–6.
   ============================================================ */

/* Gateway divider — sits between Vùng A (tech) and #sale-panel (Vùng B) */
.sale-gateway {
  padding: 4.5rem 1rem;
  text-align: center;
  background: var(--page-bg-soft, transparent);
  border-top: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
  position: relative;
}
html[data-theme="marosa-light"] .sale-gateway {
  background: rgba(15, 23, 42, 0.02);
}

.sale-gateway::before,
.sale-gateway::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 1px;
  height: 2.25rem;
  background: var(--accent-line);
  transform: translateX(-50%);
}
.sale-gateway::before { top: 0; }
.sale-gateway::after  { bottom: 0; }

.sale-gateway-title {
  margin-bottom: 0.75rem;
}
.sale-gateway-sub {
  font-size: 0.95rem;
  margin-bottom: 1.75rem;
  color: var(--text-muted);
}
.sale-gateway-chev {
  transition: transform 280ms ease;
}
#sale-gateway-toggle[aria-expanded="true"] .sale-gateway-chev {
  transform: rotate(180deg);
}

/* Sale panel — collapsed by default. Uses max-height + opacity instead of
   display:none so content remains in the layout tree for SEO crawler. */
.sale-panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    max-height 520ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 320ms ease 80ms,
    visibility 0s linear 520ms;
}
.sale-panel.is-expanded {
  max-height: 30000px;
  opacity: 1;
  visibility: visible;
  transition:
    max-height 520ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 320ms ease 80ms,
    visibility 0s linear 0s;
}

/* Panel header strip — confirmation badge + "back to tech" link */
.sale-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: var(--card-bg);
  border-bottom: 1px solid var(--card-border);
}
.sale-panel-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: var(--accent-muted);
  border: 1px solid var(--accent-line);
  color: var(--accent-strong);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sale-panel-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 200ms ease;
}
.sale-panel-back:hover,
.sale-panel-back:focus-visible {
  color: var(--accent-strong);
}

/* Reduced motion — disable transition */
@media (prefers-reduced-motion: reduce) {
  .sale-panel,
  .sale-panel.is-expanded {
    transition: none;
  }
  .sale-gateway-chev { transition: none; }
}

/* Print — force expand and hide gateway button so commercial info is
   readable in printed copies of the page */
@media print {
  .sale-panel {
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    transition: none !important;
  }
  .sale-gateway { display: none !important; }
  .sale-panel-header { display: none !important; }
}

/* Mobile tightening */
@media (max-width: 640px) {
  .sale-gateway { padding: 3rem 1rem; }
  .sale-gateway-title { font-size: 1.6rem; line-height: 1.2; }
  .sale-gateway-sub { font-size: 0.85rem; }
  .sale-panel-header {
    padding: 0.75rem 1rem;
    font-size: 0.78rem;
  }
}

/* ============================================================
   Connection section — architecture diagram with animated data
   packets flowing between 3 components (Machine ↔ Core ↔ App).
   Replaces flat 3-icon-with-arrow row. Live + visually richer.
   ============================================================ */
.conn-arch {
    display: grid;
    grid-template-columns: 1fr 100px 1fr 100px 1fr;
    align-items: center;
    gap: 0.6rem;
    margin: 1.25rem 0 0.85rem;
}

.conn-device {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.1rem 0.85rem 0.95rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    min-height: 130px;
    overflow: hidden;
}
html[data-theme="marosa-light"] .conn-device {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(15, 23, 42, 0.10);
}
.conn-device-machine { border-color: rgba(45, 212, 191, 0.30); }
.conn-device-app     { border-color: rgba(96, 165, 250, 0.30); }
.conn-device-core {
    background: linear-gradient(180deg, rgba(90, 175, 135, 0.18), rgba(90, 175, 135, 0.04));
    border-color: rgba(45, 212, 191, 0.55);
    box-shadow: 0 0 24px rgba(90, 175, 135, 0.18) inset;
}
.conn-device-bridge {
    background: linear-gradient(180deg, rgba(167, 139, 250, 0.20), rgba(167, 139, 250, 0.04));
    border-color: rgba(167, 139, 250, 0.55);
    box-shadow: 0 0 24px rgba(167, 139, 250, 0.20) inset;
}
html[data-theme="marosa-light"] .conn-device-machine { border-color: rgba(59, 128, 97, 0.45); }
html[data-theme="marosa-light"] .conn-device-app     { border-color: rgba(59, 130, 246, 0.45); }
html[data-theme="marosa-light"] .conn-device-core {
    background: linear-gradient(180deg, rgba(59, 128, 97, 0.14), rgba(59, 128, 97, 0.03));
    border-color: rgba(59, 128, 97, 0.50);
}
html[data-theme="marosa-light"] .conn-device-bridge {
    background: linear-gradient(180deg, rgba(127, 75, 198, 0.14), rgba(127, 75, 198, 0.03));
    border-color: rgba(127, 75, 198, 0.50);
}

.conn-device-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--text-strong);
    margin-bottom: 0.55rem;
}
.conn-device-machine .conn-device-icon { color: var(--ap-teal, hsl(152, 62%, 48%)); border-color: rgba(45, 212, 191, 0.35); }
.conn-device-core    .conn-device-icon { color: var(--ap-teal, hsl(152, 62%, 48%)); background: rgba(90, 175, 135, 0.18); border-color: rgba(45, 212, 191, 0.55); }
.conn-device-bridge  .conn-device-icon { color: hsl(263, 75%, 78%); background: rgba(167, 139, 250, 0.20); border-color: rgba(167, 139, 250, 0.55); }
.conn-device-app     .conn-device-icon { color: hsl(210, 80%, 75%); border-color: rgba(96, 165, 250, 0.35); }
html[data-theme="marosa-light"] .conn-device-icon { background: rgba(15, 23, 42, 0.05); border-color: rgba(15, 23, 42, 0.10); }
html[data-theme="marosa-light"] .conn-device-machine .conn-device-icon { color: var(--accent-strong); }
html[data-theme="marosa-light"] .conn-device-core    .conn-device-icon { color: var(--accent-strong); background: rgba(59, 128, 97, 0.14); }
html[data-theme="marosa-light"] .conn-device-bridge  .conn-device-icon { color: hsl(263, 55%, 38%); background: rgba(127, 75, 198, 0.14); }
html[data-theme="marosa-light"] .conn-device-app     .conn-device-icon { color: hsl(210, 75%, 36%); }

.conn-device-name {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text-strong);
    line-height: 1.2;
    margin-bottom: 0.2rem;
}
.conn-device-meta {
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.35;
}

/* Live status pulse — top-right corner of every device */
.conn-device-pulse {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: hsl(150, 65%, 55%);
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.7);
    animation: conn-pulse-blink 1.8s ease-in-out infinite;
}
.conn-device-pulse-strong {
    width: 9px;
    height: 9px;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.85);
}
@keyframes conn-pulse-blink {
    0%, 100% { opacity: 0.5; transform: scale(0.85); }
    50%      { opacity: 1;   transform: scale(1.25); }
}
html[data-theme="marosa-light"] .conn-device-pulse {
    background: hsl(150, 55%, 35%);
    box-shadow: 0 0 5px rgba(34, 197, 94, 0.5);
}

/* "core" / "add-on" badge inside core component */
.conn-device-badge {
    position: absolute;
    top: 9px;
    left: 9px;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: rgba(90, 175, 135, 0.22);
    border: 1px solid rgba(45, 212, 191, 0.50);
    color: var(--ap-teal, hsl(152, 62%, 48%));
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: var(--font-mono, monospace);
}
.conn-device-badge-bridge {
    background: rgba(167, 139, 250, 0.22);
    border-color: rgba(167, 139, 250, 0.55);
    color: hsl(263, 75%, 80%);
}
html[data-theme="marosa-light"] .conn-device-badge        { background: rgba(59, 128, 97, 0.16); border-color: rgba(59, 128, 97, 0.45); color: var(--accent-strong); }
html[data-theme="marosa-light"] .conn-device-badge-bridge { background: rgba(127, 75, 198, 0.16); border-color: rgba(127, 75, 198, 0.45); color: hsl(263, 55%, 36%); }

/* Connection link SVG between devices */
.conn-link {
    width: 100%;
    height: 100px;
    overflow: visible;
}
.conn-link-rail {
    stroke: rgba(255, 255, 255, 0.10);
    stroke-width: 2;
    stroke-dasharray: 4 3;
}
html[data-theme="marosa-light"] .conn-link-rail {
    stroke: rgba(15, 23, 42, 0.18);
}
.conn-link-label {
    fill: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    font-family: var(--font-mono, monospace);
    text-transform: uppercase;
}

/* Animated data packets — forward (top rail) + reverse (bottom rail) */
.conn-link-packet {
    filter: drop-shadow(0 0 5px rgba(45, 212, 191, 0.7));
}
.conn-link-packet-fwd {
    fill: var(--ap-teal, hsl(152, 62%, 48%));
    animation: conn-packet-fwd 2s linear infinite;
}
.conn-link-packet-rev {
    fill: hsl(210, 80%, 70%);
    animation: conn-packet-rev 2.4s linear infinite 0.6s;
    filter: drop-shadow(0 0 5px rgba(96, 165, 250, 0.7));
}
html[data-theme="marosa-light"] .conn-link-packet-fwd { fill: var(--accent-strong); filter: drop-shadow(0 0 3px rgba(59, 128, 97, 0.5)); }
html[data-theme="marosa-light"] .conn-link-packet-rev { fill: hsl(210, 75%, 36%); filter: drop-shadow(0 0 3px rgba(59, 130, 246, 0.5)); }

@keyframes conn-packet-fwd {
    0%   { transform: translateX(0);    opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateX(120px); opacity: 0; }
}
@keyframes conn-packet-rev {
    0%   { transform: translateX(0);     opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateX(-120px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .conn-device-pulse,
    .conn-link-packet { animation: none; opacity: 0.7; }
}

/* Mobile/tablet: stack vertically when grid too tight */
@media (max-width: 900px) {
    .conn-arch {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
    .conn-link {
        height: 56px;
        transform: rotate(90deg);
        margin: -0.25rem auto;
        width: 100px;
    }
}

/* ════════════════════════════════════════════════
   Launch teaser popup
════════════════════════════════════════════════ */
.launch-popup {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.launch-popup.is-open {
    opacity: 1;
    pointer-events: auto;
}
.launch-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 12, 22, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.launch-popup-card {
    position: relative;
    width: min(540px, 100%);
    padding: 2rem 1.85rem 1.85rem;
    border-radius: 1.5rem;
    background:
        radial-gradient(circle at 12% 8%, rgba(90, 175, 135, 0.18), transparent 18rem),
        radial-gradient(circle at 90% 90%, rgba(124, 58, 237, 0.14), transparent 18rem),
        linear-gradient(160deg, hsl(222, 28%, 12%), hsl(222, 32%, 8%));
    border: 1px solid rgba(90, 175, 135, 0.32);
    box-shadow: 0 30px 80px -20px rgba(8, 12, 22, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    color: white;
    transform: translateY(12px) scale(0.97);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.launch-popup.is-open .launch-popup-card {
    transform: translateY(0) scale(1);
}
.launch-popup-close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.launch-popup-close:hover {
    background: rgba(255, 255, 255, 0.16);
    color: white;
}

.launch-popup-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background: rgba(90, 175, 135, 0.14);
    border: 1px solid rgba(90, 175, 135, 0.4);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--clr-teal-400);
    margin-bottom: 1rem;
}
.launch-popup-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--clr-teal-400);
    box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.7);
    animation: launchDotPulse 1.6s ease-out infinite;
}
@keyframes launchDotPulse {
    0%   { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.7); }
    70%  { box-shadow: 0 0 0 8px rgba(45, 212, 191, 0); }
    100% { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0); }
}

.launch-popup-title {
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1.22;
    color: white;
    margin: 0 0 0.6rem;
}
.launch-popup-title-accent {
    background: linear-gradient(120deg, var(--clr-teal-400), #c084fc);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.launch-popup-body {
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 1.25rem;
}

.launch-popup-clock {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: 1rem;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 1.5rem;
}
.launch-clock-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 56px;
}
.launch-clock-num {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
    color: white;
    text-shadow: 0 0 18px rgba(45, 212, 191, 0.3);
    font-variant-numeric: tabular-nums;
}
.launch-clock-label {
    margin-top: 0.35rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}
.launch-clock-sep {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 1.75rem;
    font-weight: 900;
    color: var(--clr-teal-400);
    line-height: 1;
    padding-bottom: 1.05rem;
    opacity: 0.6;
    animation: launchSepBlink 1s ease-in-out infinite;
}
@keyframes launchSepBlink {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 0.85; }
}

.launch-popup-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.launch-popup-btn {
    flex: 1;
    min-width: 160px;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    font-weight: 700;
    font-size: 0.92rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    border: 1px solid transparent;
}
.launch-popup-btn-primary {
    background: linear-gradient(135deg, var(--clr-teal-400), #35b171);
    color: hsl(222, 25%, 8%);
    box-shadow: 0 10px 30px -10px rgba(90, 175, 135, 0.55);
}
.launch-popup-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 36px -10px rgba(90, 175, 135, 0.7);
}
.launch-popup-btn-ghost {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.88);
}
.launch-popup-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Light theme */
html[data-theme="marosa-light"] .launch-popup-backdrop {
    background: rgba(15, 23, 42, 0.5);
}
html[data-theme="marosa-light"] .launch-popup-card {
    background:
        radial-gradient(circle at 12% 8%, rgba(59, 128, 97, 0.12), transparent 18rem),
        radial-gradient(circle at 90% 90%, rgba(124, 58, 237, 0.08), transparent 18rem),
        rgba(255, 255, 255, 0.98);
    border-color: rgba(59, 128, 97, 0.35);
    color: hsl(222, 47%, 14%);
    box-shadow: 0 30px 80px -20px rgba(15, 23, 42, 0.25);
}
html[data-theme="marosa-light"] .launch-popup-close {
    background: rgba(15, 23, 42, 0.06);
    border-color: rgba(15, 23, 42, 0.12);
    color: hsl(222, 19%, 32%);
}
html[data-theme="marosa-light"] .launch-popup-close:hover {
    background: rgba(15, 23, 42, 0.12);
    color: hsl(222, 47%, 14%);
}
html[data-theme="marosa-light"] .launch-popup-eyebrow {
    background: rgba(59, 128, 97, 0.1);
    border-color: rgba(59, 128, 97, 0.4);
    color: hsl(152, 80%, 24%);
}
html[data-theme="marosa-light"] .launch-popup-eyebrow-dot { background: hsl(152, 80%, 30%); }
html[data-theme="marosa-light"] .launch-popup-title { color: hsl(222, 47%, 12%); }
html[data-theme="marosa-light"] .launch-popup-title-accent {
    background: linear-gradient(120deg, hsl(152, 80%, 26%), hsl(263, 60%, 42%));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
html[data-theme="marosa-light"] .launch-popup-body { color: hsl(222, 19%, 30%); }
html[data-theme="marosa-light"] .launch-popup-clock {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.08);
}
html[data-theme="marosa-light"] .launch-clock-num {
    color: hsl(222, 47%, 12%);
    text-shadow: 0 0 18px rgba(59, 128, 97, 0.18);
}
html[data-theme="marosa-light"] .launch-clock-label { color: hsl(222, 19%, 35%); }
html[data-theme="marosa-light"] .launch-clock-sep { color: hsl(152, 80%, 26%); }
html[data-theme="marosa-light"] .launch-popup-btn-ghost {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.12);
    color: hsl(222, 47%, 18%);
}
html[data-theme="marosa-light"] .launch-popup-btn-ghost:hover { background: rgba(15, 23, 42, 0.08); }

@media (max-width: 480px) {
    .launch-popup-card { padding: 1.5rem 1.2rem; }
    .launch-popup-title { font-size: 1.3rem; }
    .launch-clock-num { font-size: 1.5rem; }
    .launch-clock-unit { min-width: 44px; }
    .launch-clock-sep { font-size: 1.3rem; padding-bottom: 0.95rem; }
    .launch-popup-clock { padding: 0.8rem 0.5rem; gap: 0.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .launch-popup,
    .launch-popup-card,
    .launch-popup-eyebrow-dot,
    .launch-clock-sep {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================
   26. Workflow, Fleet & Cloud Premium Showcase
   ============================================================ */

.workflow-showcase-card {
  position: relative;
  border-radius: 1.5rem;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015) 60%, rgba(45, 212, 191, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(45, 212, 191, 0.08);
  padding: 2.25rem;
  overflow: hidden;
  margin-bottom: 2.5rem;
  backdrop-filter: blur(16px);
}

@media (max-width: 768px) {
  .workflow-showcase-card {
    padding: 1.25rem;
  }
}

.workflow-showcase-card::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -80px;
  width: 320px;
  height: 320px;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(45, 212, 191, 0.1), transparent 70%);
  pointer-events: none;
  filter: blur(40px);
}

.workflow-grid-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .workflow-grid-split {
    grid-template-columns: 1.12fr 1fr;
    gap: 3rem;
  }
}

.workflow-steps-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.5rem 0;
}

.workflow-step-item {
  display: flex;
  align-items: flex-start;
  gap: 0.95rem;
  padding: 0.85rem 1rem;
  border-radius: 0.95rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.workflow-step-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(45, 212, 191, 0.3);
  transform: translateX(4px);
}

.workflow-step-item.is-highlight {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(255, 255, 255, 0.035));
  border-color: rgba(16, 185, 129, 0.38);
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.1);
}

.workflow-step-num {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  background: rgba(45, 212, 191, 0.15);
  color: #2dd4bf;
  border: 1px solid rgba(45, 212, 191, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.75rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.workflow-step-item.is-highlight .workflow-step-num {
  background: rgba(16, 185, 129, 0.25);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.5);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

.workflow-roi-box {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.1), rgba(16, 185, 129, 0.06));
  border: 1px solid rgba(45, 212, 191, 0.3);
  box-shadow: 0 8px 30px rgba(45, 212, 191, 0.06);
}

.workflow-roi-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.65rem;
  background: rgba(45, 212, 191, 0.2);
  color: #2dd4bf;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* HMI Cockpit Mockup Container */
.workflow-hmi-frame {
  background: #080d15;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(45, 212, 191, 0.15);
}

.workflow-hmi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.15rem;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.workflow-hmi-body {
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
}

/* Batch Queue Card in Mockup */
.shift-batch-card {
  padding: 0.85rem 1rem;
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  transition: all 0.2s ease;
}

.shift-batch-card.is-active {
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.12), rgba(15, 23, 42, 0.85));
  border-color: rgba(45, 212, 191, 0.45);
  box-shadow: 0 4px 20px rgba(45, 212, 191, 0.12);
}

.shift-batch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.shift-batch-progress {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  overflow: hidden;
}

.shift-batch-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #2dd4bf, #10b981);
  border-radius: 9999px;
}

/* Shared Aux Hardware Interlock Widget */
.aux-controller-box {
  background: linear-gradient(145deg, rgba(14, 165, 233, 0.07), rgba(15, 23, 42, 0.95));
  border: 1px solid rgba(14, 165, 233, 0.25);
  border-radius: 1rem;
  padding: 0.95rem 1.15rem;
}

.aux-routing-diagram {
  display: grid;
  grid-template-columns: 1.1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
  margin-top: 0.65rem;
}

@media (max-width: 480px) {
  .aux-routing-diagram {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .aux-routing-arrow {
    display: none;
  }
}

.aux-node {
  padding: 0.55rem 0.4rem;
  border-radius: 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.08);
  line-height: 1.3;
}

.aux-node.is-active {
  background: rgba(45, 212, 191, 0.15);
  border-color: rgba(45, 212, 191, 0.45);
  color: #2dd4bf;
  box-shadow: 0 0 12px rgba(45, 212, 191, 0.2);
}

.aux-node.is-standby {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}

.aux-node.is-locked {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}

/* Secondary 2-Col Grid for Fleet and Cloud Showcase */
.fleet-cloud-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

@media (min-width: 1024px) {
  .fleet-cloud-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.fleet-sub-card {
  border-radius: 1.5rem;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.32);
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}

@media (max-width: 768px) {
  .fleet-sub-card {
    padding: 1.25rem;
  }
}

.fleet-terminal-box {
  background: #080d15;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.fleet-terminal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0.85rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.8rem;
  transition: all 0.2s ease;
}

.fleet-terminal-row.is-active {
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.12), rgba(15, 23, 42, 0.8));
  border-color: rgba(45, 212, 191, 0.4);
}

.cloud-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
}

@media (max-width: 480px) {
  .cloud-stat-grid {
    grid-template-columns: 1fr;
  }
}

.cloud-stat-item {
  padding: 0.75rem 0.65rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  text-align: center;
}

/* ── #workflow-fleet — status chips + text-contrast pass (27/08 polish) ────────
   DaisyUI .badge-success / .badge-primary render near-invisible under the custom
   `marosa` theme (--suc: 0 0 0). Replaced in markup by .wf-chip-*. */
.wf-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.16rem 0.58rem;
  border-radius: 9999px;
  font-family: var(--font-mono, ui-monospace, "Consolas", monospace);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.5;
  white-space: nowrap;
  border: 1px solid transparent;
}
.wf-chip-ok {
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.42);
}
.wf-chip-info {
  color: #c7d2fe;
  background: rgba(99, 102, 241, 0.28);
  border-color: rgba(129, 140, 248, 0.55);
}
/* The only wf-chip that ever sits on a LIGHT surface: the step-4 highlight card. */
html[data-theme="marosa-light"] .workflow-step-item .wf-chip-ok {
  color: #047857;
  background: rgba(16, 185, 129, 0.16);
  border-color: rgba(16, 185, 129, 0.4);
}

/* Soften the "1-Tap Switch" DaisyUI outline button into a pill */
#workflow-fleet .fleet-terminal-row .btn.btn-xs {
  border-radius: 9999px;
  border-color: rgba(45, 212, 191, 0.5);
  color: #5eead4;
  font-weight: 700;
  padding-inline: 0.8rem;
}
#workflow-fleet .fleet-terminal-row .btn.btn-xs:hover {
  background: rgba(45, 212, 191, 0.16);
  border-color: rgba(45, 212, 191, 0.72);
  color: #ccfbf1;
}

/* The mock terminal panels stay DARK in both themes — their inner text must stay
   light-on-dark even when the page is in light mode (theme tokens otherwise flip
   to dark and vanish). */
#workflow-fleet :is(.workflow-hmi-frame, .fleet-terminal-box, .aux-controller-box) [class*="text-teal-200"] {
  color: #99f6e4 !important;
  opacity: 1 !important;
}
#workflow-fleet .aux-node .opacity-80 {
  opacity: 0.95 !important;
}
#workflow-fleet .workflow-hmi-header .text-muted,
#workflow-fleet .fleet-sub-card > .flex .text-muted,
#workflow-fleet :is(.workflow-hmi-frame, .fleet-terminal-box, .aux-controller-box) .text-muted,
#workflow-fleet .shift-batch-card .text-muted {
  color: hsl(220, 15%, 77%) !important;
}
html[data-theme="marosa-light"] .aux-controller-box {
  background: #0b1220;
  border-color: rgba(14, 165, 233, 0.3);
}
html[data-theme="marosa-light"] #workflow-fleet
  :is(.workflow-hmi-frame, .fleet-terminal-box, .aux-controller-box) :is(.text-strong, .text-white) {
  color: #f8fafc !important;
}
html[data-theme="marosa-light"] #workflow-fleet
  :is(.workflow-hmi-frame, .fleet-terminal-box, .aux-controller-box) .text-main {
  color: #cbd5e1 !important;
}
html[data-theme="marosa-light"] #workflow-fleet
  :is(.workflow-hmi-frame, .fleet-terminal-box, .aux-controller-box) .text-muted {
  color: hsl(220, 14%, 72%) !important;
}

/* Cloud "Profile sync" strip — neutral surface so the indigo chip actually reads */
#workflow-fleet .wf-sync-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
#workflow-fleet .wf-sync-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: #e2e8f0;
}
#workflow-fleet .wf-sync-label i {
  flex: none;
  color: #818cf8;
}

/* Fleet / Cloud feature mini-cards — the `border-white/5` containers read as edgeless */
#workflow-fleet .fleet-sub-card > .grid > div {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.85rem;
}
#workflow-fleet .fleet-sub-card > .grid > div .text-muted {
  color: hsl(220, 15%, 76%) !important;
}
/* .wf-sync-row lives INSIDE the always-dark .fleet-terminal-box — keep it dark
   in light mode too (do NOT flip to a light surface). */
html[data-theme="marosa-light"] #workflow-fleet .fleet-sub-card > .grid > div {
  background: #f8fafc;
  border-color: #e2e8f0;
}
html[data-theme="marosa-light"] #workflow-fleet .fleet-sub-card > .grid > div .text-muted {
  color: #475569 !important;
}

/* Observer callout inside the Fleet sub-card (training / QA oversight / remote) */
#workflow-fleet .fleet-observer-note {
  margin-top: 0.25rem;
  padding: 0.9rem 1rem;
  border-radius: 0.9rem;
  background: rgba(45, 212, 191, 0.06);
  border: 1px solid rgba(45, 212, 191, 0.22);
}
#workflow-fleet .fleet-observer-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #5eead4;
}
#workflow-fleet .fleet-observer-head i {
  flex: none;
}
#workflow-fleet .fleet-observer-desc {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--text-main);
}
#workflow-fleet .fleet-observer-uses {
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text-main);
}
#workflow-fleet .fleet-observer-uses li {
  position: relative;
  padding-left: 1rem;
}
#workflow-fleet .fleet-observer-uses li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #2dd4bf;
}
#workflow-fleet .fleet-observer-uses strong {
  color: var(--text-strong);
  font-weight: 700;
}
html[data-theme="marosa-light"] #workflow-fleet .fleet-observer-note {
  background: rgba(13, 148, 136, 0.06);
  border-color: rgba(13, 148, 136, 0.28);
}
html[data-theme="marosa-light"] #workflow-fleet .fleet-observer-head {
  color: #0f766e;
}

/* Light mode support */
html[data-theme="marosa-light"] .workflow-showcase-card,
html[data-theme="marosa-light"] .fleet-sub-card {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.1);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}

html[data-theme="marosa-light"] .workflow-step-item {
  background: #f8fafc;
  border-color: #e2e8f0;
}

html[data-theme="marosa-light"] .workflow-step-item:hover {
  background: #f1f5f9;
  border-color: rgba(45, 212, 191, 0.5);
}

html[data-theme="marosa-light"] .workflow-step-item.is-highlight {
  background: #ecfdf5;
  border-color: #a7f3d0;
}

html[data-theme="marosa-light"] .workflow-hmi-frame,
html[data-theme="marosa-light"] .fleet-terminal-box {
  background: #0f172a;
  color: #f8fafc;
}

/* ── MAROSA Sense Kit block (Website Content Update 27/08) ───────────────── */
.sensekit-block {
  padding: 1.75rem;
}
.sensekit-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
/* Self-contained grid — vendor.css does not ship `sm:grid-cols-3`. */
.sensekit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) {
  .sensekit-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.sensekit-card {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  padding: 1rem;
  background: rgba(148, 163, 184, 0.06);
}
html[data-theme="marosa-light"] .sensekit-card {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.1);
}

/* R&D roadmap row inside the Sense Kit block. Deliberately reads as "not shipping
   yet": dashed edge, no accent colour, a badge on every card. Do NOT restyle it to
   match the three live cards above — the visual gap is what keeps the claim honest. */
.sensekit-rnd {
  border-top: 1px dashed rgba(148, 163, 184, 0.28);
  padding-top: 1.25rem;
}
.sensekit-rnd-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}
.sensekit-rnd-label {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
}
.sensekit-rnd-note {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.sensekit-card-rnd {
  border-style: dashed;
  background: transparent;
}
.sensekit-rnd-icon {
  color: var(--text-muted);
}
.sensekit-rnd-badge {
  display: inline-block;
  margin-left: 0.4rem;
  vertical-align: middle;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 4px;
  padding: 0.05rem 0.3rem;
}
html[data-theme="marosa-light"] .sensekit-rnd {
  border-top-color: rgba(15, 23, 42, 0.16);
}
html[data-theme="marosa-light"] .sensekit-card-rnd {
  background: transparent;
  border-color: rgba(15, 23, 42, 0.18);
}
html[data-theme="marosa-light"] .sensekit-rnd-label,
html[data-theme="marosa-light"] .sensekit-rnd-badge {
  border-color: rgba(15, 23, 42, 0.2);
}

/* R&D roadmap row collapsed into the shared .card-disclosure pattern.
   Keeps the "Đang phát triển" label + note visible as the teaser; the three
   R&D concept cards live one click down so they never read as shipping. */
.card-disclosure.sensekit-rnd-disclosure {
  margin-top: 1.25rem;
}
.card-disclosure > summary.sensekit-rnd-summary {
  justify-content: space-between;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
  text-align: left;
}
.sensekit-rnd-disclosure .card-disclosure-content {
  padding-top: 0.5rem;
}

/* ── Sense Kit mini viz ──────────────────────────────────────────────────────
   Same idiom as .tech-teaser-viz: viewBox 160x40, every colour via a class so
   both themes resolve. Teal is reserved for the three SHIPPING sensors; the
   three R&D ones use slate + amber so the colour itself says "not yet". */
.sensekit-card {
  display: flex;
  flex-direction: column;
}
/* content-box on purpose: with the default border-box the 0.75rem padding is taken
   OUT of the aspect-ratio height, so the 160x40 artwork letterboxes and shrinks. */
.sensekit-viz {
  box-sizing: content-box;
  width: 100%;
  height: auto;
  aspect-ratio: 160 / 40;
  max-height: 68px;
  margin-top: auto;
  padding-top: 0.75rem;
  overflow: visible;
}
.sensekit-viz text {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.sk-tag { fill: var(--text-muted); }
.sk-grid { stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; stroke-dasharray: 2 3; }

/* 01 Ambient — temperature rises across the shift while humidity falls */
.sk-amb-t  { fill: none; stroke: var(--accent-strong); stroke-width: 2; stroke-linecap: round; }
.sk-amb-rh { fill: none; stroke: hsl(200, 80%, 62%); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 4 3; }
.sk-amb-t-dot  { fill: var(--accent-strong); }
.sk-amb-rh-dot { fill: hsl(200, 80%, 62%); }
.sk-tag-t  { fill: var(--accent-strong); }
.sk-tag-rh { fill: hsl(200, 80%, 62%); }

/* 02 Acoustic — quiet floor, then the First-Crack burst */
.sk-wave-axis { stroke: rgba(255, 255, 255, 0.10); stroke-width: 1; }
.sk-wave { fill: rgba(148, 163, 184, 0.45); rx: 1.5; }
.sk-wave-fc { fill: var(--accent-strong); filter: drop-shadow(0 0 3px rgba(90, 175, 135, 0.45)); }
.sk-tag-fc { fill: var(--accent-strong); }

/* 03 Gas leak — segmented LEL scale, needle parked in the safe band */
.sk-lel-ok    { fill: rgba(90, 175, 135, 0.55); }
.sk-lel-warn  { fill: hsl(25, 92%, 60%); opacity: 0.55; }
.sk-lel-alarm { fill: hsl(355, 75%, 65%); opacity: 0.55; }
.sk-lel-needle { fill: var(--text-strong); }
.sk-tag-ok { fill: var(--accent-strong); }

/* 04 Flame (R&D) — signal drops; direct read lands well before the inferred one */
.sk-flame-sig { fill: none; stroke: var(--text-muted); stroke-width: 1.8; stroke-linejoin: round; }
.sk-flame-gap { stroke: rgba(148, 163, 184, 0.55); stroke-width: 1; stroke-dasharray: 2 2; }
.sk-flame-direct { fill: hsl(38, 88%, 62%); }
.sk-flame-infer  { fill: none; stroke: rgba(148, 163, 184, 0.7); stroke-width: 1.4; }
.sk-tag-rnd { fill: var(--text-muted); }

/* 05 Bean moisture (R&D) — drying curve, marked where moisture runs out */
.sk-moist { fill: none; stroke: var(--text-muted); stroke-width: 1.8; stroke-linecap: round; }
.sk-moist-mark { stroke: rgba(148, 163, 184, 0.4); stroke-width: 1; stroke-dasharray: 2 2; }
.sk-moist-cliff { fill: hsl(38, 88%, 62%); }

/* 06 Bean colour (R&D) — bean colours are intrinsic, so no theme override below */
.sk-sw-1 { fill: hsl(38, 55%, 76%); }
.sk-sw-2 { fill: hsl(34, 52%, 66%); }
.sk-sw-3 { fill: hsl(30, 50%, 57%); }
.sk-sw-4 { fill: hsl(27, 48%, 48%); }
.sk-sw-5 { fill: hsl(24, 46%, 40%); }
.sk-sw-6 { fill: hsl(22, 44%, 32%); }
.sk-sw-7 { fill: hsl(20, 40%, 25%); }
.sk-sw-8 { fill: hsl(18, 34%, 19%); }
.sk-color-mark { fill: var(--text-strong); }
.sk-color-mark-line { stroke: var(--text-strong); stroke-width: 1.4; opacity: 0.55; }

/* Light theme — only the neutrals flip; accents already resolve via tokens. */
html[data-theme="marosa-light"] .sk-grid { stroke: rgba(15, 23, 42, 0.14); }
html[data-theme="marosa-light"] .sk-wave-axis { stroke: rgba(15, 23, 42, 0.16); }
html[data-theme="marosa-light"] .sk-wave { fill: rgba(15, 23, 42, 0.28); }
html[data-theme="marosa-light"] .sk-flame-gap,
html[data-theme="marosa-light"] .sk-moist-mark { stroke: rgba(15, 23, 42, 0.32); }
html[data-theme="marosa-light"] .sk-flame-infer { stroke: rgba(15, 23, 42, 0.45); }

@media (prefers-reduced-motion: reduce) {
  .sensekit-viz * { animation: none; }
}
.safety-card-gasleak {
  border-color: rgba(244, 63, 94, 0.35);
}


/* ── Form controls ───────────────────────────────────────────────────────────
   vendor.css is a purged DaisyUI build and does NOT ship .input / .input-bordered
   / .select / .select-bordered / .btn-md, yet the lead form in #contact-section
   uses all of them — so the fields rendered with no box at all (h=24px, border 0,
   background transparent). Defined here rather than by rebuilding vendor.css,
   which no toolchain in this folder can regenerate. theme.css loads after
   vendor.css, so these win ties against any utility that does survive the purge. */
.input,
.select {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.95rem;
  font-size: 0.95rem;
  font-family: inherit;
  line-height: 1.4;
  color: var(--text-strong);
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.75rem;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.25rem;
  cursor: pointer;
  /* caret drawn inline so the control needs no external asset under the CSP */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 1.05rem;
}
.input::placeholder { color: var(--text-muted); opacity: 1; }
.input:hover,
.select:hover { border-color: rgba(255, 255, 255, 0.2); }
.input:focus,
.select:focus {
  outline: none;
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 3px rgba(90, 175, 135, 0.18);
}
.input:user-invalid,
.select:user-invalid { border-color: hsl(355, 75%, 65%); }
.select option { background: #16201c; color: #e8eef0; }

/* .btn-md is referenced by the secondary CTA but absent from the purged build. */
.btn-md {
  height: auto;
  min-height: 2.75rem;
  padding-inline: 1.15rem;
  font-size: 0.9rem;
}

html[data-theme="marosa-light"] .input,
html[data-theme="marosa-light"] .select {
  background-color: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.16);
}
html[data-theme="marosa-light"] .input:hover,
html[data-theme="marosa-light"] .select:hover { border-color: rgba(15, 23, 42, 0.28); }
html[data-theme="marosa-light"] .select option { background: #ffffff; color: #0f172a; }

/* Same purge gap as the form controls above: index.html uses space-y-1/2/3/5/6 but
   vendor.css only shipped 1/2/3/5 — so the four blocks of the lead form sat flush
   against each other (measured child gaps 0,0,0). Tailwind's scale: 6 = 1.5rem. */
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 1.5rem;
}

/* ── #workflow-fleet visuals ─────────────────────────────────────────────────
   Three inline SVGs. Colour vocabulary is shared and load-bearing, so keep it:
   teal = roasting (the machine's own work), amber = the SHARED destoner,
   violet = silo, slate = waiting/handover. The Gantt only makes its point if the
   amber blocks read as one resource across all three lanes. */
.wf-viz {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.wf-viz text {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* 1 — Staggered Batch Scheduling Gantt */
.workflow-gantt-band {
  margin-top: 1.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.workflow-gantt-head {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.9rem;
}
.workflow-gantt-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text-strong);
}
.workflow-gantt-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.45;
}
.wf-gantt { min-height: 190px; }
.wf-g-grid { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; stroke-dasharray: 2 4; }
.wf-g-sep  { stroke: rgba(255, 255, 255, 0.12); stroke-width: 1; }
.wf-g-lane { fill: var(--text-main); font-size: 8.5px; }
.wf-g-lane-shared { fill: hsl(38, 88%, 66%); font-size: 8.5px; }
.wf-g-shared-note,
.wf-g-tick { fill: var(--text-muted); font-size: 7.5px; font-weight: 700; }
.wf-g-leg  { fill: var(--text-muted); font-size: 8px; }
.wf-g-util { fill: var(--text-muted); font-size: 8px; }
.wf-g-barlbl { fill: #06231a; font-size: 8px; font-weight: 800; }
.wf-g-roast    { fill: var(--accent-strong); }
.wf-g-destoner { fill: hsl(38, 88%, 62%); }
.wf-g-silo     { fill: hsl(265, 72%, 70%); }
.wf-g-bbp      { fill: rgba(148, 163, 184, 0.30); }
.wf-g-wait     { fill: rgba(148, 163, 184, 0.10); stroke: rgba(148, 163, 184, 0.5);
                 stroke-width: 1; stroke-dasharray: 3 2; }
.wf-g-sw       { stroke: none; }
.wf-g-sw.wf-g-wait { stroke: rgba(148, 163, 184, 0.5); }

/* 2 — Primary / Observer authority topology */
.wf-topo { min-height: 140px; margin-bottom: 0.85rem; }
.wf-t-node { fill: rgba(255, 255, 255, 0.04); stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; }
.wf-t-node-primary { fill: rgba(90, 175, 135, 0.14); stroke: var(--accent-strong); }
.wf-t-node-plc     { fill: rgba(255, 255, 255, 0.03); stroke: rgba(255, 255, 255, 0.22); }
.wf-t-lbl  { fill: var(--text-main); font-size: 8.5px; }
.wf-t-lbl-primary { fill: var(--accent-strong); font-size: 9px; font-weight: 800; letter-spacing: 0.1em; }
.wf-t-lbl-plc { fill: var(--text-strong); font-size: 9px; }
.wf-t-sub  { fill: var(--text-muted); font-size: 7.5px; }
.wf-t-edge { fill: var(--text-muted); font-size: 7.5px; letter-spacing: 0.1em; }
.wf-t-edge-write { fill: var(--accent-strong); font-weight: 800; }
.wf-t-link { fill: none; stroke-width: 1.6; }
.wf-t-link-write { stroke: var(--accent-strong); }
.wf-t-link-read  { stroke: rgba(148, 163, 184, 0.55); stroke-dasharray: 4 3; }

/* 3 — Roast trace vs profile */
.wf-trace { min-height: 88px; margin-top: 0.6rem; }
.wf-tr-grid   { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; stroke-dasharray: 2 4; }
.wf-tr-target { fill: none; stroke: hsl(265, 72%, 72%); stroke-width: 1.6; stroke-dasharray: 4 3; }
.wf-tr-actual { fill: none; stroke: var(--accent-strong); stroke-width: 2; stroke-linecap: round; }
.wf-tr-mark   { stroke: rgba(255, 255, 255, 0.22); stroke-width: 1; stroke-dasharray: 1 2; }
.wf-tr-end    { fill: var(--accent-strong); }
.wf-tr-lbl    { fill: rgba(248, 250, 252, 0.62); font-size: 8px; }
.wf-tr-lbl-actual { fill: var(--accent-strong); }
.wf-tr-lbl-target { fill: hsl(265, 72%, 74%); }

/* Light theme — neutrals only; the semantic colours already resolve via tokens. */
html[data-theme="marosa-light"] .wf-g-grid { stroke: rgba(15, 23, 42, 0.14); }
/* NOTE: no light override for .wf-tr-* — its panel (.fleet-terminal-box) stays dark
   in the light theme, so dark strokes there would be invisible. */
html[data-theme="marosa-light"] .wf-g-sep { stroke: rgba(15, 23, 42, 0.16); }
html[data-theme="marosa-light"] .wf-g-bbp { fill: rgba(15, 23, 42, 0.14); }
html[data-theme="marosa-light"] .wf-g-wait { fill: rgba(15, 23, 42, 0.05); stroke: rgba(15, 23, 42, 0.35); }
html[data-theme="marosa-light"] .wf-g-lane-shared { fill: hsl(32, 80%, 40%); }
html[data-theme="marosa-light"] .wf-g-destoner { fill: hsl(34, 85%, 52%); }
html[data-theme="marosa-light"] .wf-g-barlbl { fill: #ffffff; }
html[data-theme="marosa-light"] .wf-t-node { fill: rgba(15, 23, 42, 0.03); stroke: rgba(15, 23, 42, 0.18); }
/* The light .wf-t-node rule (0,2,1) outranks the .wf-t-node-primary variant (0,1,0), so
   PRIMARY lost the one thing the diagram exists to show. Restore it at equal weight. */
html[data-theme="marosa-light"] .wf-t-node-primary { fill: rgba(59, 128, 97, 0.10); stroke: hsl(152, 80%, 26%); }
html[data-theme="marosa-light"] .wf-t-node-plc { fill: rgba(15, 23, 42, 0.02); stroke: rgba(15, 23, 42, 0.26); }
html[data-theme="marosa-light"] .wf-t-link-read { stroke: rgba(15, 23, 42, 0.42); }
html[data-theme="marosa-light"] .workflow-gantt-band { border-top-color: rgba(15, 23, 42, 0.14); }

/* ── Contact card (Zalo OA) ──────────────────────────────────────────────────
   The QR is black-on-white artwork, so it needs a WHITE plate in BOTH themes —
   never let it inherit the dark card background or it stops scanning. */
.contact-zalo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  align-items: center;
}
@media (min-width: 768px) {
  .contact-zalo-grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 2.25rem;
  }
}
.contact-qr-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.contact-qr-plate {
  background: #ffffff;
  border-radius: 1.1rem;
  padding: 0.85rem;
  line-height: 0;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.65);
}
.contact-qr-plate img {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  border-radius: 0.5rem;
}
.contact-qr-cap {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
}
.contact-qr-cap strong { color: var(--text-strong); font-weight: 700; }

.contact-info-col {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
}
.contact-channel-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  align-self: flex-start;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(90, 175, 135, 0.4);
  background: rgba(90, 175, 135, 0.12);
  color: var(--accent-strong);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.contact-info-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--text-strong);
}
.contact-info-desc {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-main);
}
.contact-step-list {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.contact-step-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text-main);
}
.contact-step-list li i,
.contact-step-list li svg { flex-shrink: 0; margin-top: 0.15rem; }
.contact-step-list strong { color: var(--text-strong); font-weight: 700; }

.contact-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.5rem;
}

html[data-theme="marosa-light"] .contact-qr-plate {
  box-shadow: 0 14px 32px -20px rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(15, 23, 42, 0.1);
}
html[data-theme="marosa-light"] .contact-channel-badge {
  border-color: rgba(59, 128, 97, 0.45);
  background: rgba(59, 128, 97, 0.1);
}

/* Authority band — the Primary/Observer rule, lifted out of the Fleet card so the two
   cards above can end level (they were 1128 vs 660 px, a 501 px empty box). */
.fleet-authority-band { margin-top: 1.75rem; }
.fleet-authority-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .fleet-authority-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 2.25rem;
  }
}
.fleet-authority-viz { min-width: 0; }
.fleet-authority-band .wf-topo { margin-bottom: 0; }


/* ════════════════════════════════════════════════════════
   PRICING-0209 — 3-tier ladder (Cơ bản / Tiêu Chuẩn / Chuyên Nghiệp)
   Plan: EnhanceWebPlan/Pricing_LicenseModel_0209.md (rev 4, D-1…D-8)
   Reuses .pricing-card-featured (Tiêu Chuẩn) + .pricing-card-bundled
   (Chuyên Nghiệp). Only the free tier needs a new muted variant.
═══════════════════════════════════════════════════════════ */
.pricing-card-basic {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.14);
}

.pricing-badge-basic {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: hsl(220, 12%, 34%);
    color: #fff;
    font-weight: 800;
    font-size: 0.7rem;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Eligibility chip — sits directly under the tier name so a visitor learns
   which machines a tier is sold for BEFORE reading the price (W-4b). */
.pricing-eligibility {
    display: inline-block;
    /* .pricing-card is display:flex/column — without this the pill stretches
       to full card width instead of hugging its text. */
    align-self: flex-start;
    padding: 0.2rem 0.6rem;
    margin-bottom: 0.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: hsl(220, 15%, 82%);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.pricing-price-free {
    color: white;
    font-weight: 900;
    font-size: 2.2rem;
    line-height: 1;
}

.pricing-price-unit {
    color: hsl(220, 15%, 65%);
    font-size: 0.85rem;
    font-weight: 600;
}

/* Capacity → annual price ladder inside a paid tier card. */
.pricing-ladder {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-top: 0.15rem;
}

.pricing-ladder th {
    text-align: left;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: hsl(220, 15%, 60%);
    font-weight: 700;
    padding-bottom: 0.3rem;
}

.pricing-ladder th:last-child,
.pricing-ladder td:last-child { text-align: right; }

.pricing-ladder td {
    padding: 0.28rem 0;
    color: hsl(220, 15%, 88%);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.pricing-ladder td:last-child {
    font-weight: 800;
    color: white;
    white-space: nowrap;
}

/* AutoPilot monthly quota callout — free tier only. */
.pricing-quota {
    margin-top: 0.85rem;
    padding: 0.7rem 0.85rem;
    border-radius: 0.75rem;
    background: rgba(245, 158, 11, 0.10);
    border: 1px solid rgba(245, 158, 11, 0.30);
}

.pricing-quota-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: hsl(38, 92%, 62%);
    font-weight: 800;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.4rem;
}

.pricing-quota-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    color: hsl(220, 15%, 88%);
    padding: 0.12rem 0;
}

.pricing-quota-row strong { color: white; }

.pricing-quota-note {
    margin: 0.5rem 0 0 0;
    font-size: 0.72rem;
    line-height: 1.45;
    color: hsl(220, 15%, 70%);
}

/* Capability a tier does NOT include. */
.pricing-features li.muted {
    color: hsl(220, 10%, 55%);
}

.pricing-features li.muted i { color: hsl(220, 10%, 45%); }

/* One-off onboarding fee — applies to every tier, so it sits above the grid. */
.onboarding-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1.1rem;
    margin-bottom: 2rem;
    padding: 0.9rem 1.25rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(255, 255, 255, 0.18);
    text-align: center;
}

.onboarding-strip-amount {
    color: white;
    font-weight: 900;
    font-size: 1.15rem;
    white-space: nowrap;
}

.onboarding-strip-label {
    color: hsl(220, 15%, 78%);
    font-size: 0.85rem;
}

.onboarding-strip-note {
    color: hsl(220, 15%, 62%);
    font-size: 0.75rem;
    width: 100%;
}

/* 3 columns is tight at 2rem padding — trim on the md..lg band. */
@media (min-width: 768px) and (max-width: 1279px) {
    .pricing-card { padding: 1.5rem; }
    .pricing-tier-name { font-size: 1.3rem; }
    .pricing-features li { font-size: 0.85rem; }
}

/* ── Light theme ───────────────────────────────────────── */
html[data-theme="marosa-light"] .pricing-card-basic {
    background: rgba(255, 255, 255, 0.90) !important;
    border-color: rgba(15, 23, 42, 0.16) !important;
}

html[data-theme="marosa-light"] .pricing-badge-basic {
    background: hsl(222, 18%, 38%) !important;
}

html[data-theme="marosa-light"] .pricing-eligibility {
    background: rgba(15, 23, 42, 0.05) !important;
    border-color: rgba(15, 23, 42, 0.14) !important;
    color: hsl(222, 19%, 30%) !important;
}

html[data-theme="marosa-light"] .pricing-price-free { color: hsl(222, 47%, 12%) !important; }
html[data-theme="marosa-light"] .pricing-price-unit { color: hsl(222, 14%, 45%) !important; }
html[data-theme="marosa-light"] .pricing-ladder th  { color: hsl(222, 14%, 45%) !important; }
html[data-theme="marosa-light"] .pricing-ladder td  { color: hsl(222, 19%, 28%) !important; border-top-color: rgba(15, 23, 42, 0.10) !important; }
html[data-theme="marosa-light"] .pricing-ladder td:last-child { color: hsl(222, 47%, 12%) !important; }

html[data-theme="marosa-light"] .pricing-quota {
    background: rgba(180, 83, 9, 0.08) !important;
    border-color: rgba(180, 83, 9, 0.28) !important;
}
html[data-theme="marosa-light"] .pricing-quota-title { color: hsl(26, 90%, 34%) !important; }
html[data-theme="marosa-light"] .pricing-quota-row   { color: hsl(222, 19%, 28%) !important; }
html[data-theme="marosa-light"] .pricing-quota-row strong { color: hsl(222, 47%, 12%) !important; }
html[data-theme="marosa-light"] .pricing-quota-note  { color: hsl(222, 14%, 42%) !important; }

html[data-theme="marosa-light"] .pricing-features li.muted   { color: hsl(215, 13%, 56%) !important; }
html[data-theme="marosa-light"] .pricing-features li.muted i { color: hsl(215, 13%, 62%) !important; }

html[data-theme="marosa-light"] .onboarding-strip {
    background: rgba(255, 255, 255, 0.86) !important;
    border-color: rgba(15, 23, 42, 0.20) !important;
}
html[data-theme="marosa-light"] .onboarding-strip-amount { color: hsl(222, 47%, 12%) !important; }
html[data-theme="marosa-light"] .onboarding-strip-label  { color: hsl(222, 19%, 28%) !important; }
html[data-theme="marosa-light"] .onboarding-strip-note   { color: hsl(222, 14%, 42%) !important; }

/* Roadmap marker — capability described on the page but NOT in any paid tier
   (Pricing_LicenseModel_0209.md §2.1 / §5: cloud is not shipping). */
.roadmap-chip {
    display: inline-block;
    align-self: flex-start;   /* .feature-card > .mt-4 is a flex row */
    white-space: nowrap;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.14);
    border: 1px solid rgba(99, 102, 241, 0.38);
    color: hsl(234, 89%, 78%);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

html[data-theme="marosa-light"] .roadmap-chip {
    background: rgba(79, 70, 229, 0.10) !important;
    border-color: rgba(79, 70, 229, 0.32) !important;
    color: hsl(243, 60%, 42%) !important;
}

/* Cost of one spoiled batch — the price justification directly under the
   pricing grid (Pricing_LicenseModel_0209.md D-12 / §6.2). */
.spoil-cost-strip {
    margin-top: 2rem;
    padding: 1.5rem;
    border-radius: 1.25rem;
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.22);
}

.spoil-cost-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: hsl(0, 84%, 72%);
    font-weight: 800;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.spoil-cost-lead {
    color: hsl(220, 15%, 85%);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0 0 1rem;
}

.spoil-cost-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.spoil-cost-table th {
    text-align: right;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: hsl(220, 15%, 60%);
    font-weight: 700;
    padding-bottom: 0.4rem;
}

.spoil-cost-table th:first-child,
.spoil-cost-table td:first-child { text-align: left; }

.spoil-cost-table td {
    padding: 0.4rem 0;
    text-align: right;
    color: hsl(220, 15%, 88%);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    white-space: nowrap;
}

.spoil-cost-table td:nth-child(2),
.spoil-cost-table td:nth-child(3) { color: hsl(0, 84%, 76%); font-weight: 700; }
.spoil-cost-table td:last-child   { color: var(--clr-teal-400); font-weight: 700; }

.spoil-cost-note {
    margin: 1rem 0 0;
    font-size: 0.8rem;
    line-height: 1.6;
    color: hsl(220, 15%, 72%);
}

@media (max-width: 640px) {
    .spoil-cost-strip { overflow-x: auto; }
    .spoil-cost-table { min-width: 30rem; }
}

html[data-theme="marosa-light"] .spoil-cost-strip {
    background: rgba(220, 38, 38, 0.05) !important;
    border-color: rgba(220, 38, 38, 0.22) !important;
}
html[data-theme="marosa-light"] .spoil-cost-head  { color: hsl(0, 72%, 42%) !important; }
html[data-theme="marosa-light"] .spoil-cost-lead  { color: hsl(222, 19%, 26%) !important; }
html[data-theme="marosa-light"] .spoil-cost-table th { color: hsl(222, 14%, 45%) !important; }
html[data-theme="marosa-light"] .spoil-cost-table td { color: hsl(222, 19%, 26%) !important; border-top-color: rgba(15, 23, 42, 0.10) !important; }
html[data-theme="marosa-light"] .spoil-cost-table td:nth-child(2),
html[data-theme="marosa-light"] .spoil-cost-table td:nth-child(3) { color: hsl(0, 72%, 42%) !important; }
html[data-theme="marosa-light"] .spoil-cost-note  { color: hsl(222, 14%, 40%) !important; }

/* Capabilities shared by every tier — stated once above the grid so the three
   cards only carry their differences (cuts #packages height by ~40%). */
.tier-common {
    margin-bottom: 1.5rem;
    padding: 1.1rem 1.35rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.tier-common-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--clr-teal-400);
    font-weight: 800;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.75rem;
}

.tier-common-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0.3rem 1.5rem;
}

.tier-common-grid li {
    position: relative;
    padding-left: 1.1rem;
    font-size: 0.83rem;
    line-height: 1.5;
    color: hsl(220, 15%, 84%);
}

.tier-common-grid li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--clr-teal-400);
    font-weight: 700;
}

html[data-theme="marosa-light"] .tier-common {
    background: rgba(255, 255, 255, 0.86) !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
}
html[data-theme="marosa-light"] .tier-common-grid li { color: hsl(222, 19%, 26%) !important; }