/* —— Mode IO optimized pass: marketing + layout refinements —— */
:root {
  --section-pad: clamp(52px, 6.5vw, 84px);
  --section-pad-compact: clamp(40px, 5vw, 64px);
  --section-gap: clamp(24px, 3.5vw, 40px);
  --block-gap: clamp(20px, 2.8vw, 28px);
}
main {
  overflow-x: clip;
}
main > section {
  scroll-margin-top: 88px;
}
section.page-hero,
.about-hero-section,
.resources-hero,
.products-hero-band {
  padding-top: clamp(40px, 5.5vw, 64px);
  padding-bottom: clamp(28px, 4vw, 48px);
}
section.page-hero.hero-focus--immersive {
  padding-bottom: 0;
  margin-bottom: clamp(4px, 0.8vw, 8px);
}
section.section-compact {
  padding: var(--section-pad-compact) 0;
}
.about-page,
.resources-page {
  padding-bottom: clamp(56px, 7vw, 88px);
}
.about-page > .container + .container,
.resources-page > .container + .container {
  margin-top: var(--section-gap);
}
.reveal-panel + .reveal-panel {
  margin-top: 0;
}

/* —— Site navigation dropdowns —— */
.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition:
    color var(--dur-fast) ease,
    background var(--dur-fast) ease;
}
.nav-dropdown-trigger:hover,
.nav-dropdown.is-open .nav-dropdown-trigger {
  color: var(--text);
  background: color-mix(in srgb, var(--signal) 8%, transparent);
}
.nav-dropdown-trigger.is-active {
  color: var(--signal);
  background: color-mix(in srgb, var(--signal) 10%, transparent);
}
html[data-theme="dark"] .nav-dropdown-trigger.is-active {
  color: var(--signal-light);
}
.nav-chevron {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 0.2s ease;
}
.nav-dropdown.is-open .nav-chevron {
  transform: rotate(225deg) translateY(1px);
}
.nav-dropdown-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 196px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--panel2) 94%, #fff);
  box-shadow: var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s ease;
  z-index: 30;
}
html[data-theme="dark"] .nav-dropdown-panel {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
}
.nav-dropdown.is-open .nav-dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.nav-dropdown-panel a {
  display: block;
  padding: 10px 12px;
  border-radius: calc(var(--radius-card) - 4px);
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  transition:
    color 0.15s ease,
    background 0.15s ease;
}
.nav-dropdown-panel a:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--signal) 8%, transparent);
}
.nav-dropdown-panel a.active {
  color: var(--signal-deep);
  background: color-mix(in srgb, var(--signal) 12%, transparent);
}
html[data-theme="dark"] .nav-dropdown-panel a.active {
  color: var(--signal-light);
}

.footer-dir {
  display: block;
  width: 100%;
}
.footer-dir-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  width: 100%;
  max-width: 100%;
  align-items: start;
  box-sizing: border-box;
}
.footer-dir-grid--4 {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr) minmax(0, 0.85fr) minmax(0, 0.85fr);
}
@media (max-width: 900px) {
  .footer-dir-grid,
  .footer-dir-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .footer-dir-grid,
  .footer-dir-grid--4 {
    grid-template-columns: 1fr;
  }
}
.footer-dir-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}
.footer-dir-col--portfolio {
  min-width: 0;
}
.footer-portfolio-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(8px, 1.2vw, 14px);
  align-items: start;
}
.footer-portfolio-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.footer-dir-col--portfolio .footer-dir-subheading {
  margin-top: 0;
}
.footer-portfolio-col .footer-dir-subheading {
  margin-top: 0;
}
.footer-dir-subheading--cta {
  margin-top: 8px;
}
.footer-dir-col .footer-signin-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transform: none;
}
.footer-dir-col .footer-signin-link:hover {
  color: var(--text);
  transform: none;
  box-shadow: none !important;
  border-color: transparent;
}
.footer-dir-heading {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--soft);
  margin: 0 0 6px;
}
.footer-dir a,
.footer-dir-col .footer-signin-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.footer-dir a:hover,
.footer-dir-col .footer-signin-link:hover {
  color: var(--text);
}
.footer-subnav {
  display: block;
  align-items: stretch;
  padding: clamp(24px, 3vw, 32px) 0;
  overflow-x: clip;
  box-sizing: border-box;
}
.footer-subnav .footer-dir {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.site-footer {
  overflow-x: clip;
}
.site-footer > .container {
  width: var(--container);
  max-width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
}
.footer-sub-label {
  margin-bottom: 4px;
}
@media (max-width: 900px) {
  .footer-dir-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2.5vw, 28px);
  }
  .footer-dir-col--portfolio {
    grid-column: 1 / -1;
  }
  .footer-dir-col--company {
    grid-column: 1 / -1;
  }
}
@media (max-width: 980px) {
  .footer-dir-grid {
    grid-template-columns: 1fr;
  }
}

section.section-compact--tight {
  padding: clamp(28px, 4vw, 44px) 0;
}
.hero-mission-band--below-hero {
  padding: clamp(10px, 1.6vw, 18px) 0 clamp(20px, 2.8vw, 32px);
  margin-top: clamp(10px, 1.8vw, 16px);
  background: transparent;
}
section.page-hero.hero-focus--immersive + .hero-mission-band.hero-mission-band--below-hero {
  margin-top: clamp(10px, 1.8vw, 16px);
}
.hero-mission-statement--lead {
  margin: 0 auto;
  max-width: min(680px, 94%);
  text-align: center;
}
.trust-bar--tight {
  padding-bottom: clamp(8px, 1.5vw, 14px);
  border-top: 1px solid var(--line);
}
.trust-bar--minimal {
  padding: clamp(12px, 2vw, 18px) 0;
}
.trust-bar--rich {
  padding: clamp(14px, 2.2vw, 22px) 0;
}
.trust-capability-band {
  padding: clamp(18px, 2.8vw, 28px) clamp(20px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius-band);
  background:
    radial-gradient(
      480px 200px at 0% 0%,
      color-mix(in srgb, var(--signal-faint) 65%, transparent),
      transparent 72%
    ),
    radial-gradient(
      420px 180px at 100% 100%,
      color-mix(in srgb, var(--cap-security-bg) 55%, transparent),
      transparent 70%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--panel2) 94%, #fff),
      var(--panel)
    );
  box-shadow: var(--shadow-card);
}
.trust-capability-band--open {
  border: 0;
  border-radius: 0;
  padding: clamp(8px, 1.5vw, 16px) 0;
  background: transparent;
  box-shadow: none;
}
.trust-bar--open {
  padding-top: clamp(8px, 1.2vw, 14px);
}
.trust-capability-kicker {
  margin: 0 0 clamp(14px, 2.2vw, 20px);
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soft);
}
.trust-capability-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.8vw, 16px);
}
.trust-capability-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: clamp(12px, 2vw, 16px) clamp(8px, 1.2vw, 12px);
}
.trust-capability-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--signal-deep);
  background: color-mix(in srgb, var(--signal-faint) 70%, var(--panel2));
  border: 1px solid color-mix(in srgb, var(--signal) 18%, var(--line));
}
html[data-theme="dark"] .trust-capability-icon {
  color: var(--signal-light);
  background: color-mix(in srgb, var(--signal) 12%, var(--panel3));
}
.trust-capability-icon svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.trust-capability-text {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--muted);
  max-width: 16ch;
}
html[data-theme="dark"] .trust-capability-band {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
}
html[data-theme="dark"] .trust-capability-band--open {
  background: transparent;
}
@media (max-width: 900px) {
  .trust-capability-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .trust-capability-grid {
    grid-template-columns: 1fr;
  }
}
.section-title--plain .eyebrow {
  display: none;
}
.section-title--plain h2 {
  margin-top: 0;
}

.trust-bar {
  padding: clamp(14px, 2vw, 20px) 0;
  border-top: 0;
}
.trust-bar-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(16px, 2.5vw, 22px) clamp(18px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius-band);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.82),
    rgba(248, 244, 239, 0.95)
  );
  box-shadow: var(--shadow-card);
}
.trust-bar-head {
  text-align: center;
}
.trust-bar-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soft);
}
.trust-bar-label:before,
.trust-bar-label:after {
  content: "";
  width: clamp(20px, 4vw, 48px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.trust-bar-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.trust-bar-pill {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--panel2) 88%, #fff);
  min-height: 100%;
}
.trust-bar-pill--accent {
  border-color: color-mix(in srgb, var(--signal) 28%, var(--line));
  background: color-mix(in srgb, var(--signal-faint) 55%, var(--panel2));
}
.trust-bar-pill-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--soft) 18%, transparent);
}
.trust-bar-pill--accent .trust-bar-pill-dot {
  background: var(--signal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 20%, transparent);
}
.trust-bar-pill-text {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.trust-bar-pill--accent .trust-bar-pill-text {
  color: var(--signal-deep);
}
html[data-theme="dark"] .trust-bar-pill--accent .trust-bar-pill-text {
  color: var(--signal-light);
}
html[data-theme="dark"] .trust-bar-inner {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
}

.problem-strip-section {
  padding-top: 0;
}
.problem-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.problem-strip--embedded {
  margin: 0;
}
.problem-card {
  position: relative;
  padding: 14px 16px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--panel2) 92%, #fff);
  box-shadow: none;
}
.problem-card-pillar {
  display: inline-flex;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 8px;
}
.problem-card-icon {
  display: inline-flex;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  background: rgba(42, 101, 97, 0.1);
  color: var(--signal);
  margin-bottom: 8px;
}
.problem-card-icon svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}
.problem-card h3 {
  font-size: 0.92rem;
  margin: 0 0 4px;
  color: var(--text);
  line-height: 1.35;
}
.problem-card p {
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 0;
  max-width: none;
  color: var(--muted);
}

.governance-intro-head {
  margin-bottom: 14px;
  max-width: 62ch;
}
.governance-intro-title {
  margin: 8px 0 0;
  font-size: clamp(1.2rem, 2.2vw, 1.65rem);
  line-height: 1.25;
  color: var(--text);
  font-family: "Space Grotesk", Inter, sans-serif;
}
.governance-intro-lead {
  margin: 8px 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 58ch;
}

.problem-loop-bridge {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 14px;
  color: var(--soft);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.problem-loop-bridge:before,
.problem-loop-bridge:after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.problem-loop-bridge span {
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--signal-faint) 45%, var(--panel2));
  color: var(--signal-deep);
}
html[data-theme="dark"] .problem-loop-bridge span {
  color: var(--signal-light);
}

.platform-loop-head {
  margin-bottom: clamp(14px, 2.2vw, 20px);
  max-width: none;
}
.platform-loop-lead {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.58;
  color: var(--muted);
  max-width: 62ch;
}
.platform-loop-arch-link {
  margin: clamp(12px, 1.8vw, 16px) 0 0;
  text-align: right;
}
.platform-loop-arch-link .text-link {
  font-size: 0.88rem;
}

.platform-framework-section {
  padding-top: 0;
}
.platform-framework-band {
  border: 1px solid var(--line);
  border-radius: var(--radius-band);
  padding: clamp(18px, 2.8vw, 26px);
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow: var(--shadow-card);
}
.platform-framework-band .governance-loop-grid {
  margin-top: 14px;
}
.platform-framework-band .loop-step {
  padding: 12px 11px;
  min-height: 0;
}
.platform-framework-slogan {
  display: inline-flex;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--signal) 70%, var(--soft));
}

.regulation-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 10px 0 0 !important;
  padding: 0 !important;
}
.regulation-chip {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--soft);
  background: var(--panel2);
}
.labs-cap-compliance .regulation-chip {
  border-color: color-mix(in srgb, var(--cap-compliance) 28%, var(--line));
  color: color-mix(in srgb, var(--cap-compliance) 80%, var(--muted));
}

.labs-experiment-card {
  min-height: 0;
}
.home-research-section {
  padding-bottom: clamp(12px, 2.5vw, 24px);
}
.labs-experiments-section {
  position: relative;
  padding: clamp(80px, 11vw, 128px) 0 clamp(48px, 5vw, 64px);
  margin-top: clamp(20px, 3.5vw, 40px);
}
.labs-experiments-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(92%, 1120px);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--line) 88%, transparent),
    transparent
  );
}
.labs-experiments-head {
  margin-bottom: 24px;
}
.labs-experiments-title {
  font-size: clamp(1.65rem, 3.2vw, 2.5rem) !important;
  line-height: 1.22 !important;
  margin-top: 10px !important;
}
.labs-experiment-card p {
  font-size: 0.88rem;
  line-height: 1.5;
}
.labs-experiment-card {
  gap: 8px;
  padding: 16px 16px 18px;
}

.labs-cap-card p {
  font-size: 0.9rem;
  line-height: 1.52;
}
.labs-cap-card h3 {
  font-size: 1.02rem;
  line-height: 1.35;
}

.research-proof-band .section-title {
  margin-bottom: 0;
}
.research-proof-head {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto;
}
.research-proof-head h2 {
  margin-bottom: 10px;
}
.research-proof-head p {
  margin: 0 auto;
  font-size: 0.92rem;
  line-height: 1.55;
  max-width: 40ch;
  color: var(--muted);
}
.research-proof-papers-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 2px;
  text-decoration: none;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition:
    color 0.25s ease,
    gap 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.research-proof-papers-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: linear-gradient(90deg, var(--brand-teal-deep), var(--periwinkle));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.research-proof-papers-link:hover,
.research-proof-papers-link:focus-visible {
  color: var(--brand-teal-deep);
  gap: 11px;
}
.research-proof-papers-link:hover::after,
.research-proof-papers-link:focus-visible::after {
  transform: scaleX(1);
}
.research-proof-papers-link:focus-visible {
  outline: 2px solid rgba(42, 101, 97, 0.35);
  outline-offset: 4px;
  border-radius: 4px;
}
.research-proof-papers-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  fill: currentColor;
  color: var(--brand-teal-deep);
  opacity: 0.85;
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s ease;
}
.research-proof-papers-link:hover .research-proof-papers-icon {
  transform: translateY(-1px);
  opacity: 1;
}
.research-proof-cards-wrap {
  position: relative;
  margin-top: clamp(16px, 2.4vw, 22px);
}
.research-proof-papers-row {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(12px, 1.8vw, 16px);
}
.research-proof-papers-label {
  line-height: 1.35;
}
.research-proof-papers-label strong {
  font-weight: 700;
  color: var(--brand-teal-deep);
  transition: color 0.25s ease;
}
.research-proof-papers-link:hover .research-proof-papers-label strong {
  color: var(--brand-teal);
}
.research-proof-papers-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--brand-teal-deep);
  opacity: 0.7;
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s ease;
}
.research-proof-papers-link:hover .research-proof-papers-arrow {
  transform: translateX(3px);
  opacity: 1;
}
.research-proof-band.reveal-panel,
.container > .research-proof-band {
  padding: clamp(22px, 3.2vw, 36px) clamp(20px, 3vw, 32px);
}

.arch-flow-section {
  padding-top: 0;
  padding-bottom: clamp(20px, 3vw, 32px);
}
.product-entry-section {
  padding: clamp(28px, 4vw, 44px) 0;
}
.product-entry-band {
  border: 1px solid var(--line);
  border-radius: var(--radius-band);
  padding: clamp(22px, 3.2vw, 32px) clamp(20px, 3vw, 28px);
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow: var(--shadow-card);
}
.product-entry-head {
  margin-bottom: clamp(20px, 3vw, 28px);
  max-width: 58ch;
}
.product-entry-head h2 {
  margin: 8px 0 0;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.product-entry-head p {
  margin: 10px 0 0;
  font-size: 0.92rem;
  line-height: 1.58;
  color: var(--muted);
}
.product-entry-band .product-entry-strip {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  gap: clamp(12px, 2vw, 16px);
}
.product-entry-sub {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--signal-deep);
  margin-top: 2px;
  line-height: 1.35;
}
html[data-theme="dark"] .product-entry-sub {
  color: var(--signal-light);
}
.product-entry-scene {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--soft);
  margin-top: 8px;
  line-height: 1.35;
}
.product-entry-effect {
  display: block;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  margin-top: 10px;
  line-height: 1.46;
  flex: 1;
  letter-spacing: -0.015em;
}
.product-entry-effect strong {
  font-weight: 700;
}
.product-entry-name {
  font-size: 1.02rem;
  line-height: 1.25;
}
.product-entry-link {
  margin-top: 12px;
}
.product-entry-icon {
  margin-bottom: 2px;
}
.product-entry-value {
  display: block;
  font-size: 0.86rem;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.5;
}
.product-entry-card.is-current {
  border-color: color-mix(in srgb, var(--signal) 28%, var(--line));
  background: color-mix(in srgb, var(--signal-faint) 42%, var(--panel2));
  pointer-events: none;
}
.product-entry-card.is-current .product-entry-link {
  color: var(--signal-deep);
  font-weight: 800;
}

.policy-engine-logic-section {
  padding: clamp(12px, 2vw, 20px) 0 clamp(24px, 3.5vw, 36px);
}
.policy-engine-logic {
  padding: clamp(18px, 2.5vw, 24px) clamp(20px, 2.8vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--radius-band);
  background: var(--panel2);
  box-shadow: var(--shadow-card);
}
.policy-engine-logic-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 300px);
  gap: clamp(18px, 2.8vw, 28px);
  align-items: center;
}
.policy-engine-logic-copy h2 {
  margin: 8px 0 0;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(1.2rem, 2.1vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.policy-engine-logic-copy p {
  margin: 12px 0 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 52ch;
}
.policy-engine-logic-standalone {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-card);
  border: 1px solid rgba(42, 101, 97, 0.2);
  background: rgba(42, 101, 97, 0.05);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 52ch;
}
.policy-engine-logic-standalone strong {
  color: var(--text);
}
.policy-engine-powers-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.policy-engine-power-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--panel2);
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}
.policy-engine-power-card:hover {
  border-color: color-mix(in srgb, var(--signal) 28%, var(--line));
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(16, 20, 23, 0.05);
}
.policy-engine-power-card strong {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 0.98rem;
  letter-spacing: -0.015em;
}
.policy-engine-power-desc {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--soft);
}
.policy-engine-power-arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  font-weight: 700;
  color: var(--signal-deep);
  transition: transform 0.18s ease;
}
.policy-engine-power-card:hover .policy-engine-power-arrow {
  transform: translate(3px, -50%);
}
html[data-theme="dark"] .policy-engine-power-arrow {
  color: var(--signal-light);
}
html[data-theme="dark"] .policy-engine-power-card:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}
@media (max-width: 760px) {
  .policy-engine-logic-main {
    grid-template-columns: 1fr;
  }
  .policy-engine-powers-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .policy-engine-logic-copy p {
    max-width: none;
  }
}
@media (max-width: 480px) {
  .policy-engine-powers-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .platform-modules-grid {
    grid-template-columns: 1fr;
  }
}

.monitor-stage-panel p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted);
}
.monitor-benefit--lead {
  padding: 12px 14px !important;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text);
}
.monitor-stage {
  min-height: 190px;
  padding: 18px 20px;
}
.monitor-nav-item {
  padding: 10px 14px;
}
.monitor-nav-num {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.monitor-showcase-stack .monitor-split {
  margin-top: 14px;
}

.container > .section-title--plain {
  margin-bottom: 14px;
}
.container > .section-title--plain p {
  font-size: 0.92rem;
  line-height: 1.52;
  max-width: 58ch;
  margin-inline: auto;
}
.before-after-card {
  padding: 14px 16px;
}
.before-after-card p {
  font-size: 0.88rem;
  line-height: 1.48;
}

.logic-band {
  padding: clamp(36px, 4.5vw, 52px) 0;
}
.logic-band .section-title.logic-title {
  margin-bottom: 16px;
}
.logic-band .section-title.logic-title p {
  font-size: 0.92rem;
  max-width: 58ch;
}

.hero-mission-quote {
  position: relative;
}
.hero-mission-ceo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.hero-mission-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(42, 101, 97, 0.2);
  box-shadow: 0 4px 14px rgba(17, 24, 39, 0.08);
}
.hero-mission-role {
  display: block;
  font-size: 11px;
  color: var(--soft);
  margin-top: 2px;
  font-weight: 500;
}

.hero-category-def strong {
  color: var(--signal);
}
html[data-theme="light"] .hero-category-def strong {
  color: var(--brand-teal-deep);
}
.hero-mission-statement strong.mission-em--lavender {
  color: #5b4bc4;
}
.hero-mission-statement strong.mission-em--teal {
  color: #1e4a47;
}
.hero-mission-statement strong.mission-em--amber {
  color: #a35a0f;
}
html[data-theme="dark"] .hero-mission-statement strong.mission-em--lavender {
  color: #c4b8ff;
}
html[data-theme="dark"] .hero-mission-statement strong.mission-em--teal {
  color: var(--signal-light);
}
html[data-theme="dark"] .hero-mission-statement strong.mission-em--amber {
  color: #ffc98a;
}

.stats-footnote {
  margin-top: 12px;
  text-align: center;
  font-size: 11px;
  color: var(--soft);
  line-height: 1.5;
  max-width: 52ch;
  margin-inline: auto;
}
.promo-grid.labs-capability-grid,
.labs-capability-grid {
  gap: clamp(18px, 2.5vw, 24px);
}
.platform-modules-band {
  padding: clamp(32px, 4.5vw, 52px) 0;
}
.platform-modules-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 24px);
  align-items: stretch;
}
.platform-module-card {
  padding: clamp(22px, 3vw, 28px);
  min-height: 100%;
}
.platform-module-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--signal-deep);
  text-decoration: none;
}
html[data-theme="dark"] .platform-module-link {
  color: var(--signal-light);
}
.platform-module-link:hover {
  text-decoration: underline;
}
.platform-link-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 32px);
}
.platform-link-inner > div:first-child {
  flex: 1 1 280px;
  min-width: 0;
}
.platform-link-inner .btn {
  margin: 0;
}
.platform-link-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  flex: 0 0 auto;
}
.trust-related {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: clamp(24px, 3.5vw, 36px);
}
.trust-inline-link {
  align-self: center;
  padding-top: 0;
}
.compliance-demo-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}
.compliance-demo-head-row h1 {
  flex: 1 1 auto;
}
.compliance-demo-main .module-sim-tag {
  background: rgba(126, 184, 178, 0.12);
  color: var(--signal-light);
  border-color: rgba(126, 184, 178, 0.28);
}
.cross-promo-section {
  padding: clamp(12px, 2vw, 20px) 0;
}
.cross-promo-section .section-title {
  margin-bottom: clamp(18px, 2.8vw, 28px);
}
.flow-strip {
  gap: clamp(12px, 2vw, 16px);
}
.flow-step {
  padding: clamp(18px, 2.5vw, 22px);
}
.section-title {
  margin-bottom: clamp(16px, 2.5vw, 24px);
}
.section-title p {
  margin-top: clamp(8px, 1.2vw, 12px);
}
.trust-section {
  padding-top: clamp(8px, 1.5vw, 16px);
}
.platform-link-band--resources {
  padding-top: clamp(16px, 2.5vw, 28px);
  padding-bottom: clamp(8px, 1.5vw, 16px);
}
.resources-hero {
  padding-bottom: clamp(20px, 3vw, 32px);
}
.resources-hub {
  margin-top: clamp(8px, 1.5vw, 16px);
}
.trust-related .btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--soft);
  padding-inline: 12px;
}
.trust-related .btn-ghost:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--signal) 6%, transparent);
}
.split-hero,
.hero.split-hero {
  gap: clamp(24px, 4vw, 40px);
}
.monitor-showcase-stack {
  gap: clamp(20px, 3vw, 32px);
}
.governance-loop-grid,
.labs-experiment-grid {
  gap: clamp(14px, 2vw, 20px);
}
.zd-hero-actions,
.cta,
.labs-connect-actions,
.about-hero-actions {
  gap: 12px;
}
section {
  padding: var(--section-pad) 0;
}
.platform-module-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease;
}
.platform-module-card:hover {
  border-color: var(--strong);
  transform: translateY(-2px);
}
.platform-module-card h3 {
  font-size: 1.05rem;
  margin: 4px 0 0;
}
.platform-module-card p {
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
  flex: 1;
}
.platform-module-card .btn {
  align-self: flex-start;
  margin-top: 8px;
  height: 36px;
  font-size: 12px;
}

.product-deploy-sub {
  font-size: 0.88rem;
  color: var(--soft);
  line-height: 1.45;
  margin: -4px 0 10px;
  font-weight: 500;
}
.product-entry-card {
  gap: 0;
  padding: 20px 16px 16px;
  min-height: 0;
}

.monitor-showcase-stack {
  display: grid;
  gap: 10px;
  width: 100%;
}
.monitor-showcase-stack .monitor-split {
  margin-top: 14px;
  margin-bottom: 0;
}
.monitor-showcase-stack .showcase-visual--monitor {
  margin-top: 0;
  width: 100%;
  border-radius: var(--radius-card);
}
.monitor-showcase-stack .showcase-visual--monitor img {
  width: 100%;
  max-width: none;
  min-height: 160px;
  max-height: none;
  height: auto;
  object-fit: contain;
  object-position: center;
  padding: 14px 16px;
  box-sizing: border-box;
}
.monitor-demo-cta {
  margin: 4px 0 0;
  text-align: right;
  font-size: 15px;
  font-weight: 700;
}
.monitor-benefit--lead {
  margin-top: 10px !important;
  padding: 12px 14px;
  border-radius: var(--radius-card);
  border: 1px solid rgba(42, 101, 97, 0.22);
  background: rgba(42, 101, 97, 0.06);
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
.monitor-stage-panel.is-active {
  display: flex;
  flex-direction: column;
}
.monitor-stage-panel p:not(.monitor-benefit) {
  max-width: none;
}
.monitor-benefit-kicker {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 4px;
}

/* Card radius: 18px standard · 24px band/section */
.mini-row,
.contrast-band .mini-row {
  border-radius: var(--radius-card);
}
.spotlight,
.contrast-band,
.footer-cta {
  border-radius: var(--radius-band);
}

@media (max-width: 560px) {
  .trust-bar-grid {
    grid-template-columns: 1fr;
  }
}

/* —— Mobile navigation —— */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel2);
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--text);
  border-radius: 2px;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}
.nav-open .nav-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}
.nav-open .nav-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* —— Responsive refinements —— */
:root {
  --container: min(1180px, min(92vw, calc(100vw - 32px)));
}

@media (max-width: 1100px) {
  .governance-loop-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .governance-loop-grid:before {
    display: none;
  }
}

@media (max-width: 980px) {
  .nav-toggle {
    display: inline-flex;
  }
  .navin {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-areas: "brand toggle actions";
    align-items: center;
    gap: 8px 10px;
    height: auto;
    min-height: 72px;
    padding: 12px 0;
  }

  .nav-toggle {
    width: 40px;
    height: 40px;
    padding: 0 10px !important;
  }

  .brand {
    grid-area: brand;
    min-width: 0;
  }
  .nav-toggle {
    grid-area: toggle;
    margin-left: 0;
  }
  .actions {
    grid-area: actions;
    width: auto;
    padding-top: 0;
    gap: 6px;
  }
  .links {
    display: flex;
    grid-column: 1/-1;
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 0 0 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
    max-height: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
      max-height 0.28s ease,
      padding 0.28s ease;
  }
  .nav-open .links {
    max-height: 420px;
    padding: 8px 0 12px;
    border-top: 1px solid var(--line);
    margin-top: 4px;
  }
  .links a,
  .nav-dropdown-trigger,
  .nav-dropdown-panel a {
    width: 100%;
    justify-content: flex-start;
    padding: 12px 14px;
    font-size: 14px;
    border-radius: var(--radius-card);
  }
  .nav-dropdown {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .nav-dropdown-panel {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    box-shadow: none;
    border: 0;
    background: transparent;
    padding: 0 0 0 10px;
    margin-top: 2px;
  }
  .nav-dropdown:not(.is-open) .nav-dropdown-panel {
    display: none;
  }
  .nav-dropdown.is-open .nav-dropdown-panel {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .actions [data-theme-toggle],
  .actions [data-lang-toggle] {
    height: 36px;
    padding: 0 12px;
    font-size: 12px;
  }
  .actions .btn.primary {
    height: 36px;
    padding: 0 12px;
    font-size: 12px;
  }

  .hero-focus .zd-hero-copy {
    padding: clamp(28px, 5vw, 40px) clamp(18px, 4vw, 24px)
      clamp(32px, 5vw, 44px);
  }
  .hero-focus .zd-hero-copy h1 {
    font-size: clamp(2.1rem, 8vw, 3.2rem);
  }
  .hero-category-def {
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }
  .zd-hero-actions .btn {
    flex: 1 1 auto;
    min-width: min(100%, 140px);
    justify-content: center;
  }

  .hero-mission-band--below-hero {
    padding: clamp(8px, 1.2vw, 14px) 0 clamp(20px, 2.8vw, 32px);
  }
  .hero-mission-quote {
    max-width: min(560px, 92%);
    padding: clamp(8px, 1.4vw, 14px) 0;
  }
  .hero-mission-statement {
    font-size: clamp(0.88rem, 3.5vw, 1.05rem);
  }
  .hero-mission-ceo {
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
  }
  .hero-mission-ceo cite {
    text-align: center;
  }

  .platform-framework-band {
    padding: 16px;
  }
  .governance-loop-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .loop-step {
    padding: 11px 10px;
  }
  .arch-flow-band {
    padding: clamp(18px, 4vw, 28px);
  }
  .arch-flow-node {
    min-height: 0;
    padding: 14px;
  }
  .compare-cell {
    padding: 12px 14px;
    font-size: 0.88rem;
  }
  .compare-row:first-child {
    display: none;
  }
  .compare-row .compare-cell-modeio {
    order: -1;
    border-bottom: 1px solid color-mix(in srgb, var(--signal) 20%, var(--line));
    background: color-mix(in srgb, var(--signal-faint) 35%, transparent);
  }
  .labs-experiments-title {
    flex-direction: column;
    align-items: flex-start;
  }
  .labs-experiments-lead {
    white-space: normal;
  }
  .labs-connect-actions {
    flex-direction: column;
    width: 100%;
  }
  .labs-connect-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .governance-intro-head {
    max-width: none;
  }
}

@media (max-width: 640px) {
  :root {
    --container: min(1180px, calc(100vw - 24px));
  }
  section.section-compact {
    padding: clamp(28px, 6vw, 40px) 0;
  }
  .trust-bar-inner {
    padding: 14px;
  }
  .trust-bar-pill {
    padding: 10px 12px;
  }
  .problem-card {
    padding: 12px 14px;
  }
  .tech-stats {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .governance-loop-grid {
    grid-template-columns: 1fr;
  }
  .product-entry-strip {
    padding: 10px;
    border-radius: var(--radius-card);
  }
  .product-entry-card {
    padding: 14px 16px;
  }
  .zd-hero-actions {
    flex-direction: column;
    width: 100%;
  }
  .zd-hero-actions .btn {
    width: 100%;
  }
  .navin .actions .btn.primary {
    font-size: 12px;
    padding: 0 14px;
  }
}

@media (max-width: 400px) {
  .hero-focus .zd-video-slot {
    margin: 16px;
    width: calc(100% - 32px);
  }
  .labs-float-chip {
    font-size: 10px;
    padding: 5px 9px;
  }
  .labs-card-visual {
    height: 120px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle span {
    transition: none;
  }
  .links {
    transition: none;
  }
}

/* —— Dark theme: contrast & surface pass —— */
html[data-theme="dark"] {
  --shadow-card: 0 14px 40px rgba(0, 0, 0, 0.42);
  --cap-security-bg: rgba(110, 91, 216, 0.14);
  --cap-privacy-bg: rgba(42, 101, 97, 0.14);
  --cap-compliance-bg: rgba(199, 110, 18, 0.12);
  --signal-faint: rgba(42, 101, 97, 0.16);
}

html[data-theme="dark"] body:after {
  opacity: 0.02;
}
html[data-theme="dark"] .nav {
  background: rgba(12, 18, 17, 0.88);
  border-bottom-color: var(--line);
}
html[data-theme="dark"] .links a {
  color: var(--muted);
}
html[data-theme="dark"] .links a:hover {
  color: var(--text);
  background: rgba(126, 184, 178, 0.08);
}
html[data-theme="dark"] .brand span {
  color: var(--soft);
}

/* Hero & mission */
html[data-theme="dark"] .zd-hero-copy p {
  color: rgba(238, 248, 246, 0.82);
}
html[data-theme="dark"] .hero-category-def {
  color: rgba(238, 248, 246, 0.9) !important;
}
html[data-theme="dark"] .hero-mission-statement {
  color: var(--text);
}
html[data-theme="dark"] .hero-mission-attribution {
  color: var(--soft);
}
html[data-theme="dark"] .hero-mission-attribution cite {
  color: var(--muted);
}
html[data-theme="dark"] .hero-mission-mark {
  color: rgba(126, 184, 178, 0.28);
}
html[data-theme="dark"] .mission-em--lavender {
  color: #c4b8ff;
}
html[data-theme="dark"] .mission-em--teal {
  color: var(--signal-light);
}
html[data-theme="dark"] .mission-em--amber {
  color: #ffc98a;
}
html[data-theme="dark"] .mission-em--ai {
  color: #5eead4;
}

/* Trust bar */
html[data-theme="dark"] .trust-bar-inner {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border-color: var(--line);
}
html[data-theme="dark"] .trust-bar-pill {
  background: color-mix(in srgb, var(--panel3) 88%, #000);
  border-color: var(--line);
}
html[data-theme="dark"] .trust-bar-pill-text {
  color: var(--muted);
}
html[data-theme="dark"] .trust-bar-pill--accent {
  background: color-mix(in srgb, var(--signal) 14%, var(--panel3));
  border-color: color-mix(in srgb, var(--signal-light) 32%, var(--line));
}
html[data-theme="dark"] .trust-bar-pill--accent .trust-bar-pill-dot {
  background: var(--signal-light);
}
html[data-theme="dark"] .trust-bar-label {
  color: var(--soft);
}

/* Framework & problem strip */
html[data-theme="dark"] .platform-framework-band {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border-color: var(--line);
}
html[data-theme="dark"] .problem-card {
  background: color-mix(in srgb, var(--panel3) 92%, #000);
  border-color: var(--line);
}
html[data-theme="dark"] .problem-card-pillar {
  color: var(--signal-light);
}
html[data-theme="dark"] .problem-card-icon {
  background: rgba(126, 184, 178, 0.12);
  color: var(--signal-light);
}
html[data-theme="dark"] .problem-loop-bridge span {
  background: color-mix(in srgb, var(--signal) 14%, var(--panel3));
  border-color: var(--line);
  color: var(--signal-light);
}
html[data-theme="dark"] .platform-framework-slogan {
  color: var(--signal-light);
}

/* Compare matrix */
html[data-theme="dark"] .compare-matrix {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border-color: var(--line);
}
html[data-theme="dark"] .compare-row:first-child {
  background: color-mix(in srgb, var(--panel3) 80%, #000);
}
html[data-theme="dark"] .compare-cell-modeio {
  background: linear-gradient(
    135deg,
    rgba(42, 101, 97, 0.2),
    rgba(126, 184, 178, 0.07)
  );
  color: var(--text);
}
html[data-theme="dark"] .compare-row:first-child .compare-cell-modeio {
  background: linear-gradient(135deg, #1a3d36, #122824);
  color: var(--text);
}
html[data-theme="dark"] .compare-cell-modeio strong {
  color: var(--signal-light);
}
html[data-theme="dark"] .compare-row:not(:first-child) .compare-cell-modeio {
  box-shadow: inset 4px 0 0 var(--signal-light);
}
html[data-theme="dark"]
  .compare-row:not(:first-child):hover
  .compare-cell-modeio {
  background: linear-gradient(
    135deg,
    rgba(42, 101, 97, 0.28),
    rgba(126, 184, 178, 0.12)
  );
}

/* Architecture & product entry */
html[data-theme="dark"] .arch-flow-band {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border-color: var(--line);
}
html[data-theme="dark"] .arch-flow-node {
  background: color-mix(in srgb, var(--panel3) 90%, #000);
  border-color: var(--line);
}
html[data-theme="dark"]
  .arch-flow-node:not(.arch-flow-gateway)
  .arch-flow-meta {
  color: var(--muted);
}
html[data-theme="dark"] .product-entry-strip {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border-color: var(--line);
}
html[data-theme="dark"] .product-entry-icon {
  background: rgba(126, 184, 178, 0.08);
  border-color: rgba(126, 184, 178, 0.22);
}
html[data-theme="dark"] .product-entry-card:hover {
  background: color-mix(in srgb, var(--signal) 10%, var(--panel3));
  border-color: color-mix(in srgb, var(--signal-light) 30%, var(--line));
}
html[data-theme="dark"] .product-entry-link {
  color: var(--signal-light);
}
html[data-theme="dark"] .product-entry-card:hover .product-entry-link {
  color: #c5ddd9;
}

/* Capability & regulation chips */
html[data-theme="dark"] .regulation-chip {
  background: var(--panel3);
  border-color: var(--line);
  color: var(--muted);
}
html[data-theme="dark"] .labs-cap-compliance .regulation-chip {
  color: #ffc98a;
  border-color: rgba(255, 201, 138, 0.28);
}

/* Experiments section titles */
html[data-theme="dark"] .labs-experiments-head h2,
html[data-theme="dark"] .labs-experiments-title {
  color: var(--text);
}
html[data-theme="dark"] .labs-float-chip {
  background: var(--panel3);
  color: var(--muted);
  border-color: var(--line);
}
html[data-theme="dark"] .chip-pain {
  color: #ff9a8a;
  border-color: rgba(255, 154, 138, 0.24);
}
html[data-theme="dark"] .chip-solve {
  color: var(--signal-light);
  border-color: rgba(126, 184, 178, 0.24);
}
html[data-theme="dark"] .labs-card-link {
  color: var(--text);
}
html[data-theme="dark"] .labs-card-link:hover {
  color: var(--signal-light);
}

/* Logic band (products) */
html[data-theme="dark"] .logic-band {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border-color: var(--line);
}
html[data-theme="dark"] .labs-logic-card {
  color: var(--text);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
html[data-theme="dark"] .labs-logic-card h3 {
  color: var(--text);
}
html[data-theme="dark"] .labs-logic-card p {
  color: var(--muted);
}
html[data-theme="dark"] .labs-tone-security {
  background: linear-gradient(
    165deg,
    rgba(110, 91, 216, 0.2),
    rgba(110, 91, 216, 0.08)
  );
}
html[data-theme="dark"] .labs-tone-privacy {
  background: linear-gradient(
    165deg,
    rgba(42, 101, 97, 0.2),
    rgba(42, 101, 97, 0.08)
  );
}
html[data-theme="dark"] .labs-tone-compliance {
  background: linear-gradient(
    165deg,
    rgba(199, 110, 18, 0.18),
    rgba(199, 110, 18, 0.08)
  );
}
html[data-theme="dark"] .labs-tone-security .labs-logic-kicker {
  color: #c4b8ff;
}
html[data-theme="dark"] .labs-tone-privacy .labs-logic-kicker {
  color: var(--signal-light);
}
html[data-theme="dark"] .labs-tone-compliance .labs-logic-kicker {
  color: #ffc98a;
}

/* Monitor, stats, panels */
html[data-theme="dark"] .tech-stat,
html[data-theme="dark"] .metric,
html[data-theme="dark"] .promo-card:not(.labs-cap-card) {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border-color: var(--line);
}
html[data-theme="dark"] .tech-stat b,
html[data-theme="dark"] .stat-word {
  color: var(--signal-light);
}
html[data-theme="dark"] .monitor-stage {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border-color: var(--line);
}
html[data-theme="dark"] .monitor-nav {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
}
html[data-theme="dark"] .monitor-nav-item {
  color: var(--muted);
}
html[data-theme="dark"] .monitor-nav-item.is-active {
  color: var(--text);
  background: rgba(126, 184, 178, 0.1);
}
html[data-theme="dark"] .monitor-benefit--lead {
  background: rgba(42, 101, 97, 0.14);
  border-color: rgba(126, 184, 178, 0.24);
  color: var(--muted);
}
html[data-theme="dark"] .architecture-showcase {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border-color: var(--line);
}

/* Live audit ticker (products) */
html[data-theme="dark"] .labs-live-strip-title {
  color: var(--text);
}
html[data-theme="dark"] .labs-live-audit--compact .labs-live-task {
  background: var(--panel3);
  border-color: var(--line);
  color: var(--muted);
}
html[data-theme="dark"] .posture-asi-insight {
  background: linear-gradient(
    135deg,
    rgba(42, 101, 97, 0.14),
    rgba(110, 91, 216, 0.08)
  );
  border-color: rgba(126, 184, 178, 0.2);
}
html[data-theme="dark"] .posture-asi-insight-kicker {
  color: var(--signal-light);
}
html[data-theme="dark"] .posture-asi-insight-copy {
  color: var(--muted);
}
html[data-theme="dark"] .posture-asi-insight-copy strong {
  color: var(--signal-light);
}

/* Tabs, badges, misc */
html[data-theme="dark"] .tab-trigger {
  color: var(--muted);
}
html[data-theme="dark"] .tab-trigger[aria-selected="true"] {
  background: linear-gradient(135deg, var(--brand-mint), var(--brand-teal));
  color: var(--accent-ink);
}
html[data-theme="dark"] .badge:not(.hot) {
  background: rgba(126, 184, 178, 0.06);
  color: var(--muted);
  border-color: var(--line);
}
html[data-theme="dark"] .shadcn-card {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border-color: var(--line);
}
html[data-theme="dark"] .stats-footnote {
  color: var(--soft);
}

/* Connect CTA band */
html[data-theme="dark"] .labs-connect-section {
  background: var(--panel);
}
html[data-theme="dark"] .labs-connect-inner h2 {
  color: var(--text);
}
html[data-theme="dark"] .labs-btn-soft {
  background: var(--panel3);
  border-color: var(--line);
  color: var(--text);
}
html[data-theme="dark"] .paper-eyebrow {
  color: var(--signal-light);
  background: color-mix(in srgb, var(--signal) 12%, var(--panel3));
  border-color: color-mix(in srgb, var(--signal-light) 24%, var(--line));
}
html[data-theme="dark"] .labs-word-bubble {
  color: #e8b8e8;
}
html[data-theme="dark"] .labs-word-bubble:before {
  background: rgba(184, 245, 168, 0.22);
}
html[data-theme="dark"] .labs-icon-btn {
  border-color: var(--line);
  color: var(--muted);
  background: var(--panel3);
}
html[data-theme="dark"] .labs-icon-btn:hover {
  background: color-mix(in srgb, var(--signal) 12%, var(--panel3));
  color: var(--text);
}
html[data-theme="dark"] .before-after-card {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border-color: var(--line);
}
html[data-theme="dark"] .ba-label {
  color: var(--soft);
}
html[data-theme="dark"] .eyebrow {
  color: var(--signal-light);
}
html[data-theme="dark"] .chip {
  color: var(--muted);
  background: var(--panel3);
  border-color: var(--line);
}
html[data-theme="dark"] .product-entry-card:nth-child(1) .product-entry-icon {
  background: rgba(110, 91, 216, 0.18);
  color: #c4b8ff;
  border-color: rgba(196, 184, 255, 0.3);
}
html[data-theme="dark"] .product-entry-card:nth-child(2) .product-entry-icon {
  background: rgba(42, 101, 97, 0.18);
  color: var(--signal-light);
  border-color: rgba(126, 184, 178, 0.28);
}
html[data-theme="dark"] .product-entry-card:nth-child(3) .product-entry-icon {
  background: rgba(199, 110, 18, 0.16);
  color: #ffc98a;
  border-color: rgba(255, 201, 138, 0.28);
}

/* —— Dark theme v2: Labs restore overrides, panels, imagery —— */
html[data-theme="dark"] body {
  background-color: var(--bg) !important;
  background-image:
    radial-gradient(
      720px 420px at 78% 6%,
      rgba(110, 91, 216, 0.09),
      transparent 65%
    ),
    radial-gradient(
      560px 380px at 6% 10%,
      rgba(42, 101, 97, 0.11),
      transparent 62%
    ),
    radial-gradient(
      480px 320px at 50% 100%,
      rgba(126, 184, 178, 0.05),
      transparent 70%
    ),
    linear-gradient(180deg, #0c1211 0%, #0a0e0d 100%) !important;
}
html[data-theme="dark"] body:before {
  background:
    radial-gradient(
      900px 520px at 50% -5%,
      rgba(126, 184, 178, 0.08),
      transparent 70%
    ),
    radial-gradient(
      700px 460px at 8% 10%,
      rgba(42, 101, 97, 0.06),
      transparent 72%
    ),
    radial-gradient(
      680px 420px at 92% 12%,
      rgba(110, 91, 216, 0.05),
      transparent 70%
    ) !important;
}

/* Beat styles-google-labs-restore.css light-only !important rules */
html[data-theme="dark"] .labs-cap-security {
  background: linear-gradient(
    165deg,
    rgba(110, 91, 216, 0.24),
    rgba(110, 91, 216, 0.09)
  ) !important;
  border-color: rgba(196, 184, 255, 0.22) !important;
}
html[data-theme="dark"] .labs-cap-privacy {
  background: linear-gradient(
    165deg,
    rgba(42, 101, 97, 0.22),
    rgba(42, 101, 97, 0.08)
  ) !important;
  border-color: rgba(126, 184, 178, 0.22) !important;
}
html[data-theme="dark"] .labs-cap-compliance {
  background: linear-gradient(
    165deg,
    rgba(199, 110, 18, 0.2),
    rgba(199, 110, 18, 0.08)
  ) !important;
  border-color: rgba(255, 201, 138, 0.22) !important;
}
html[data-theme="dark"] .labs-cap-security .promo-point {
  color: #c4b8ff !important;
}
html[data-theme="dark"] .labs-cap-security .promo-point:before {
  background: #a99af0 !important;
}
html[data-theme="dark"] .labs-cap-privacy .promo-point {
  color: var(--signal-light) !important;
}
html[data-theme="dark"] .labs-cap-privacy .promo-point:before {
  background: var(--signal-light) !important;
}
html[data-theme="dark"] .labs-cap-compliance .promo-point {
  color: #ffc98a !important;
}
html[data-theme="dark"] .labs-cap-compliance .promo-point:before {
  background: #ffc98a !important;
}
html[data-theme="dark"] .labs-cap-emphasis.labs-cap-security.is-visible:hover {
  box-shadow: 0 18px 48px rgba(110, 91, 216, 0.22) !important;
  border-color: rgba(196, 184, 255, 0.32) !important;
}
html[data-theme="dark"] .labs-cap-emphasis.labs-cap-privacy.is-visible:hover {
  box-shadow: 0 18px 48px rgba(42, 101, 97, 0.22) !important;
  border-color: rgba(126, 184, 178, 0.3) !important;
}
html[data-theme="dark"]
  .labs-cap-emphasis.labs-cap-compliance.is-visible:hover {
  box-shadow: 0 18px 48px rgba(199, 110, 18, 0.18) !important;
  border-color: rgba(255, 201, 138, 0.28) !important;
}

html[data-theme="dark"] .labs-experiment-card {
  background: linear-gradient(180deg, var(--panel2), var(--panel)) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.32) !important;
}
html[data-theme="dark"] .labs-experiment-card:hover {
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.38) !important;
}
html[data-theme="dark"] .labs-visual-lavender {
  background: linear-gradient(
    145deg,
    rgba(110, 91, 216, 0.28),
    rgba(110, 91, 216, 0.1)
  ) !important;
}
html[data-theme="dark"] .labs-visual-mint {
  background: linear-gradient(
    145deg,
    rgba(42, 101, 97, 0.26),
    rgba(42, 101, 97, 0.1)
  ) !important;
}
html[data-theme="dark"] .labs-visual-amber {
  background: linear-gradient(
    145deg,
    rgba(199, 110, 18, 0.24),
    rgba(199, 110, 18, 0.1)
  ) !important;
}
html[data-theme="dark"] .labs-visual-sky {
  background: linear-gradient(
    145deg,
    rgba(99, 216, 255, 0.18),
    rgba(66, 199, 181, 0.1)
  ) !important;
}
html[data-theme="dark"] .labs-experiments-section,
html[data-theme="dark"] .site-footer {
  background: var(--bg) !important;
}
html[data-theme="dark"] .labs-connect-section {
  background: linear-gradient(180deg, var(--panel), var(--bg)) !important;
}
html[data-theme="dark"] .labs-playground {
  background: radial-gradient(
    ellipse 80% 60% at 50% 100%,
    rgba(42, 101, 97, 0.08),
    transparent 70%
  );
}

/* Research proof & loop */
html[data-theme="dark"] .research-proof-band {
  background:
    radial-gradient(
      520px 260px at 8% 0%,
      rgba(110, 91, 216, 0.12),
      transparent 72%
    ),
    radial-gradient(
      480px 240px at 92% 8%,
      rgba(42, 101, 97, 0.12),
      transparent 70%
    ),
    linear-gradient(180deg, var(--panel2), var(--panel)) !important;
  border-color: var(--line);
}
html[data-theme="dark"] .research-proof-papers-link {
  color: var(--text);
}
html[data-theme="dark"] .research-proof-papers-link:hover,
html[data-theme="dark"] .research-proof-papers-link:focus-visible {
  color: var(--signal-light);
}
html[data-theme="dark"] .research-proof-papers-label strong,
html[data-theme="dark"] .research-proof-papers-icon,
html[data-theme="dark"] .research-proof-papers-arrow {
  color: var(--signal-light);
}
html[data-theme="dark"]
  .research-proof-papers-link:hover
  .research-proof-papers-label
  strong {
  color: var(--signal-light);
}
html[data-theme="dark"] .tech-stat-icon {
  background: rgba(126, 184, 178, 0.1);
  border-color: rgba(126, 184, 178, 0.2);
  color: var(--signal-light);
}
html[data-theme="dark"] .loop-step {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border-color: var(--line);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
html[data-theme="dark"] .governance-loop-grid:before {
  opacity: 0.22;
}

/* Architecture flow icons & tags */
html[data-theme="dark"] .arch-flow-icon {
  background: rgba(126, 184, 178, 0.1) !important;
  border-color: rgba(126, 184, 178, 0.22) !important;
  color: var(--signal-light) !important;
}
html[data-theme="dark"] .arch-flow-tags span {
  background: rgba(126, 184, 178, 0.06);
  border-color: var(--line);
  color: var(--muted);
}
html[data-theme="dark"] .arch-flow-external {
  background:
    radial-gradient(
      240px 120px at 50% 0%,
      rgba(255, 184, 77, 0.12),
      transparent 72%
    ),
    linear-gradient(180deg, var(--panel2), var(--panel)) !important;
}

/* Showcase / monitor imagery */
html[data-theme="dark"] .showcase-visual {
  background: linear-gradient(180deg, var(--panel2), var(--panel)) !important;
  border-color: var(--line) !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.32) !important;
}
html[data-theme="dark"] .showcase-visual--monitor {
  background: linear-gradient(
    180deg,
    var(--panel2),
    rgba(42, 101, 97, 0.1)
  ) !important;
  border-color: rgba(126, 184, 178, 0.2) !important;
}
html[data-theme="dark"] .showcase-visual img {
  opacity: 0.9;
  filter: brightness(0.9) contrast(1.04) saturate(0.88);
}
html[data-theme="dark"] .monitor-showcase-stack .showcase-visual--monitor img {
  mix-blend-mode: normal;
  background: transparent;
}

/* Policy SOTA panel (policy.html hero) */
html[data-theme="dark"] .policy-sota-panel {
  background: linear-gradient(180deg, var(--panel2), var(--panel)) !important;
  border-color: var(--line) !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.32) !important;
}
html[data-theme="dark"] .policy-sota-panel:before {
  background: radial-gradient(
    360px 180px at 90% 0%,
    rgba(126, 184, 178, 0.12),
    transparent 68%
  ) !important;
}
html[data-theme="dark"] .policy-sota-card--tile {
  background: var(--panel3) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .policy-sota-icon {
  background: rgba(126, 184, 178, 0.1);
  border-color: rgba(126, 184, 178, 0.2);
}
html[data-theme="dark"] .policy-sota-card--compliance h3 {
  color: #7dcea0 !important;
}
html[data-theme="dark"] .policy-sota-card--privacy h3 {
  color: var(--signal-light) !important;
}
html[data-theme="dark"] .policy-sota-card--safety h3 {
  color: #ffc98a !important;
}
html[data-theme="dark"] .policy-sota-metrics--stack .policy-sota-metric {
  background: rgba(126, 184, 178, 0.06);
}
html[data-theme="dark"] .policy-sota-status {
  background: rgba(74, 222, 128, 0.12);
  color: #7dcea0;
  border-color: rgba(74, 222, 128, 0.22);
}
html[data-theme="dark"] .policy-priority-block {
  background: var(--panel3) !important;
  border-color: var(--line) !important;
  box-shadow: inset 0 1px 0 rgba(126, 184, 178, 0.06) !important;
}
html[data-theme="dark"] .policy-priority-row {
  background: rgba(126, 184, 178, 0.04);
  border-color: var(--line);
}
html[data-theme="dark"] .policy-act--block {
  color: #ff9a8a;
  border-color: rgba(255, 154, 138, 0.24);
  background: rgba(255, 113, 130, 0.12);
}
html[data-theme="dark"] .policy-act--rewrite {
  color: var(--signal-light);
  border-color: rgba(126, 184, 178, 0.24);
  background: rgba(42, 101, 97, 0.12);
}
html[data-theme="dark"] .policy-act--alert {
  color: #ffc98a;
  border-color: rgba(255, 201, 138, 0.24);
  background: rgba(255, 201, 61, 0.12);
}
html[data-theme="dark"] .policy-act--review {
  color: #c4b8ff;
  border-color: rgba(196, 184, 255, 0.24);
  background: rgba(110, 91, 216, 0.12);
}
html[data-theme="dark"] .policy-pill--p0 {
  color: #ff9a8a;
}
html[data-theme="dark"] .policy-pill--p1,
html[data-theme="dark"] .policy-pill--p2 {
  color: #ffc98a;
}
html[data-theme="dark"] .policy-pill--p3 {
  color: var(--signal-light);
}

/* Security posture panel (products.html hero) */
html[data-theme="dark"] .security-posture-panel {
  background: linear-gradient(180deg, var(--panel2), var(--panel)) !important;
  border-color: var(--line) !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.32) !important;
}
html[data-theme="dark"] .posture-live {
  background: rgba(42, 101, 97, 0.14);
  border-color: rgba(126, 184, 178, 0.22);
  color: var(--signal-light);
}
html[data-theme="dark"] .posture-card {
  background: var(--panel3) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .posture-card-value {
  color: var(--signal-light) !important;
}
html[data-theme="dark"] .posture-card-value--green {
  color: #7dcea0 !important;
}
html[data-theme="dark"] .posture-asi {
  background: var(--panel3) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] .posture-asi-badge {
  background: rgba(42, 101, 97, 0.14);
  color: var(--signal-light);
}
html[data-theme="dark"] .posture-asi-cell {
  background: rgba(126, 184, 178, 0.04);
  border-color: var(--line);
}
html[data-theme="dark"] .posture-asi-cell.is-active {
  background: color-mix(in srgb, var(--asi-color) 10%, var(--panel3));
  border-color: color-mix(in srgb, var(--asi-color) 40%, var(--line));
}

/* Deploy topology */
html[data-theme="dark"] .deploy-topology {
  background: linear-gradient(180deg, var(--panel2), var(--panel)) !important;
  border-color: var(--line);
}
html[data-theme="dark"] .deploy-topo-col {
  background: var(--panel3) !important;
  border-color: var(--line);
}
html[data-theme="dark"] .deploy-topo-box {
  background: rgba(126, 184, 178, 0.04) !important;
  border-color: var(--line);
}
html[data-theme="dark"] .deploy-topo-traffic {
  background: rgba(123, 140, 255, 0.1) !important;
  border-color: rgba(123, 140, 255, 0.28) !important;
}
html[data-theme="dark"] .deploy-topo-firewall .deploy-topo-gateway {
  background: rgba(255, 107, 90, 0.1) !important;
  border-color: rgba(255, 107, 90, 0.26) !important;
}
html[data-theme="dark"] .deploy-topo-guard-core {
  background: rgba(123, 140, 255, 0.12) !important;
  border-color: rgba(123, 140, 255, 0.3) !important;
}
html[data-theme="dark"] .deploy-topo-enforce {
  background: rgba(42, 101, 97, 0.12) !important;
  border-color: rgba(126, 184, 178, 0.24) !important;
  color: var(--signal-light);
}
html[data-theme="dark"] .deploy-topo-protocols span {
  background: rgba(255, 184, 77, 0.1);
  border-color: rgba(255, 184, 77, 0.24);
  color: var(--muted);
}

/* Footer & mission */
html[data-theme="dark"] .footer-shapes {
  background: var(--panel) !important;
  border-bottom-color: var(--line);
}
html[data-theme="dark"] .footer-shapes i {
  opacity: 0.55 !important;
  filter: saturate(0.85) brightness(0.88);
}
html[data-theme="dark"] .footer-subnav,
html[data-theme="dark"] .footer-brand-lockup {
  border-color: var(--line);
}
html[data-theme="dark"] .hero-mission-avatar {
  border-color: rgba(126, 184, 178, 0.24);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
}

/* Compare matrix non-modeio cells */
html[data-theme="dark"] .compare-cell:not(.compare-cell-modeio) {
  color: var(--muted);
}
html[data-theme="dark"]
  .compare-row:first-child
  .compare-cell:not(.compare-cell-modeio) {
  color: var(--text);
}

/* Headline accent on dark hero */
html[data-theme="dark"] .headline-accent {
  background: linear-gradient(
    135deg,
    #7eb8b2 0%,
    #457a75 45%,
    #c5ddd9 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* —— Resources hub —— */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.resources-page {
  padding-bottom: clamp(48px, 6vw, 80px);
}
.resources-hero {
  padding: clamp(28px, 4vw, 48px) 0 clamp(20px, 3vw, 32px);
}
.resources-crumb {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--soft);
  margin: 0 0 14px;
}
.resources-hero-copy {
  max-width: 760px;
}
.resources-hero-copy h1 {
  font-size: clamp(1.85rem, 3.6vw, 2.75rem);
  line-height: 1.12;
  margin-top: 10px;
}
.resources-hero-copy .lead {
  max-width: 62ch;
  margin-top: 14px;
  font-size: 1rem;
  line-height: 1.6;
}
.resources-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 28px;
}
.resources-stat {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow: var(--shadow-card);
}
.resources-stat b {
  display: block;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  line-height: 1.15;
  color: var(--text);
  letter-spacing: -0.02em;
}
.resources-stat span {
  display: block;
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--muted);
}
.resources-hub {
  margin-top: 8px;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius-band);
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow: var(--shadow);
}
.resources-tab {
  min-width: 108px;
}
.resources-toolbar {
  display: grid;
  gap: 14px;
  margin-bottom: 22px;
}
.resources-search input {
  width: 100%;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel3);
  color: var(--text);
  padding: 0 18px;
  font: inherit;
  font-size: 0.92rem;
}
.resources-search input:focus {
  outline: 2px solid color-mix(in srgb, var(--signal-light) 45%, transparent);
  outline-offset: 2px;
}
.resources-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.resources-filter {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel3);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}
.resources-filter:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--signal-light) 30%, var(--line));
}
html[data-theme="light"] .resources-filter.is-active {
  background: linear-gradient(
    135deg,
    var(--signal-deep),
    var(--signal),
    var(--signal-mid)
  );
  color: #fff;
  border-color: transparent;
}
.resources-section-head h2 {
  margin: 0;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
}
.resources-section-head--spaced {
  margin-top: 28px;
}
.resources-featured {
  margin-bottom: 24px;
}
.resources-featured-card {
  padding: clamp(18px, 2.5vw, 26px);
  border-radius: var(--radius-band);
  border: 1px solid color-mix(in srgb, var(--signal) 24%, var(--line));
  background:
    radial-gradient(
      520px 220px at 0% 0%,
      rgba(42, 101, 97, 0.12),
      transparent 72%
    ),
    linear-gradient(180deg, var(--panel3), var(--panel2));
  box-shadow: var(--shadow-card);
}
.resources-featured-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.resources-kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signal-deep);
}
html[data-theme="dark"] .resources-kicker {
  color: var(--signal-light);
}
.resources-venue {
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(42, 101, 97, 0.1);
  color: var(--brand-teal-deep);
  border: 1px solid rgba(42, 101, 97, 0.16);
}
html[data-theme="dark"] .resources-venue {
  color: var(--signal-light);
  background: rgba(42, 101, 97, 0.14);
  border-color: rgba(126, 184, 178, 0.2);
}
.resources-award {
  font-size: 10px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 201, 61, 0.16);
  color: #a35a0f;
  border: 1px solid rgba(255, 201, 61, 0.24);
}
.resources-award--soft {
  background: rgba(110, 91, 216, 0.12);
  color: #5b4bc4;
  border-color: rgba(110, 91, 216, 0.2);
}
.resources-featured-card h2 {
  margin: 0 0 8px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(1.2rem, 2.2vw, 1.65rem);
  line-height: 1.25;
}
.resources-paper-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.resources-paper-grid--top {
  margin-bottom: 8px;
}
.resources-paper-list {
  display: grid;
  gap: 10px;
}
.resources-paper-card,
.resources-blog-card {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, var(--panel3), var(--panel2));
  box-shadow: var(--shadow-card);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}
.resources-paper-card:hover,
.resources-blog-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--signal-light) 28%, var(--line));
  box-shadow: 0 16px 40px rgba(17, 24, 39, 0.08);
}
.resources-paper-card h3,
.resources-blog-card h3 {
  margin: 10px 0 6px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(1rem, 1.4vw, 1.08rem);
  line-height: 1.35;
  color: var(--text);
  width: 100%;
}
.resources-paper-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.resources-authors {
  font-size: 0.82rem;
  color: var(--soft);
  margin: 0 0 8px;
  line-height: 1.45;
}
.resources-desc {
  font-size: 0.88rem;
  color: var(--muted);
  margin: 0 0 10px;
  line-height: 1.55;
}
.resources-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.resources-tag {
  font-size: 10px;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(42, 101, 97, 0.1);
  color: var(--brand-teal-deep);
  border: 1px solid rgba(42, 101, 97, 0.14);
}
html[data-theme="dark"] .resources-tag {
  color: var(--signal-light);
  background: rgba(42, 101, 97, 0.14);
  border-color: rgba(126, 184, 178, 0.2);
}
.resources-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--signal-deep);
  text-decoration: none;
}
html[data-theme="dark"] .resources-link {
  color: var(--signal-light);
}
.resources-link:hover {
  text-decoration: underline;
}
.resources-blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.resources-blog-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  text-decoration: none;
  color: inherit;
  min-height: 100%;
}
.resources-blog-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.resources-blog-status {
  font-size: 10px;
  font-weight: 700;
  color: var(--soft);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.resources-blog-card p {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 12px;
  flex: 1;
}
.resources-blog-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.resources-blog-date {
  font-size: 11px;
  color: var(--soft);
  white-space: nowrap;
}
.resources-empty {
  margin: 18px 0 0;
  text-align: center;
  color: var(--soft);
  font-size: 0.9rem;
}
.resources-paper-card[hidden],
.resources-blog-card[hidden] {
  display: none !important;
}

@media (max-width: 900px) {
  .resources-stats,
  .resources-paper-grid,
  .resources-blog-grid {
    grid-template-columns: 1fr;
  }
  .resources-tabs {
    flex-wrap: wrap;
  }
}
@media (max-width: 560px) {
  .resources-filter {
    font-size: 11px;
    padding: 0 10px;
  }
  .resources-blog-foot {
    flex-direction: column;
    align-items: flex-start;
  }
}

html[data-theme="dark"] .resources-stat,
html[data-theme="dark"] .resources-hub,
html[data-theme="dark"] .resources-paper-card,
html[data-theme="dark"] .resources-blog-card {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border-color: var(--line);
}
html[data-theme="dark"] .resources-featured-card {
  background:
    radial-gradient(
      520px 220px at 0% 0%,
      rgba(42, 101, 97, 0.14),
      transparent 72%
    ),
    linear-gradient(180deg, var(--panel2), var(--panel));
  border-color: color-mix(in srgb, var(--signal-light) 24%, var(--line));
}
html[data-theme="dark"] .resources-search input {
  background: var(--panel3);
  border-color: var(--line);
  color: var(--text);
}
html[data-theme="dark"] .resources-filter {
  background: var(--panel3);
  border-color: var(--line);
  color: var(--muted);
}
html[data-theme="dark"] .resources-filter.is-active {
  background: linear-gradient(
    135deg,
    var(--signal-deep),
    var(--signal),
    var(--signal-mid)
  );
  color: #fff;
}

/* —— Compliance Demo (privacy detector app layout) —— */
.compliance-demo-page {
  padding-bottom: 0;
  min-height: calc(100dvh - 72px);
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.compliance-demo-workspace--immersive {
  --compliance-demo-space-y: clamp(24px, 3vw, 40px);
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: var(--compliance-demo-space-y) 0;
}
.compliance-demo-app-shell {
  --demo-fg: #e8edf5;
  --demo-muted: rgba(255, 255, 255, 0.52);
  --demo-faint: rgba(255, 255, 255, 0.42);
  --demo-line: rgba(255, 255, 255, 0.08);
  --demo-line-strong: rgba(255, 255, 255, 0.12);
  --demo-surface: rgba(0, 0, 0, 0.28);
  --demo-surface-2: rgba(0, 0, 0, 0.22);
  --demo-sidebar: rgba(0, 0, 0, 0.22);
  --demo-canvas-footer: linear-gradient(
    180deg,
    transparent,
    rgba(0, 0, 0, 0.55)
  );
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: 0;
  align-items: stretch;
  flex: 1;
  min-height: calc(100dvh - 72px - clamp(48px, 6vw, 80px));
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #0d1418, #0a1014);
  box-shadow: none;
  color: var(--demo-fg);
}
.compliance-demo-app-shell--two-col .compliance-demo-main,
.compliance-demo-app-shell--two-col .compliance-demo-config {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
.compliance-demo-app-shell--two-col .compliance-demo-canvas {
  flex: 1;
  min-height: clamp(420px, 56vh, 720px);
}
.compliance-demo-app-shell--symmetric {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  grid-template-rows: auto minmax(clamp(460px, 58vh, 680px), 1fr) auto;
  align-items: stretch;
}
.compliance-demo-shell-head {
  grid-column: 1 / -1;
  padding: clamp(20px, 3vw, 32px) clamp(20px, 3.5vw, 40px)
    clamp(12px, 1.8vw, 18px);
  border-bottom: 1px solid var(--demo-line);
}
.compliance-demo-shell-head .compliance-demo-subtitle {
  margin-bottom: 0;
}
.compliance-demo-app-shell--symmetric .compliance-demo-canvas {
  grid-column: 1;
  grid-row: 2;
  min-height: 0;
  height: 100%;
  margin: 0 clamp(0px, 0vw, 0) clamp(16px, 2vw, 24px) clamp(20px, 3.5vw, 40px);
  border-radius: 18px;
}
.compliance-demo-app-shell--symmetric .compliance-demo-config {
  grid-column: 2;
  grid-row: 2;
  min-height: 0;
  height: 100%;
  margin: 0 clamp(20px, 3.5vw, 40px) clamp(16px, 2vw, 24px) 0;
  padding: clamp(20px, 2.5vw, 24px);
  border-left: 1px solid var(--demo-line);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
}
.compliance-demo-config-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 0;
  height: 100%;
}
.compliance-demo-config-inner .compliance-strategy-list {
  flex: 1;
}
.compliance-demo-app-shell--symmetric .compliance-demo-results {
  grid-column: 1 / -1;
  grid-row: 3;
  margin: 0 clamp(20px, 3.5vw, 40px) clamp(20px, 3vw, 28px);
  padding-top: 18px;
  border-top: 1px solid var(--demo-line);
  margin-top: 0;
}
html[data-theme="light"]
  .compliance-demo-app-shell--symmetric
  .compliance-demo-config {
  background: linear-gradient(180deg, var(--panel3), var(--panel2));
  border: 1px solid color-mix(in srgb, var(--signal) 12%, var(--line));
  border-left: 1px solid color-mix(in srgb, var(--signal) 12%, var(--line));
  box-shadow: 0 12px 36px rgba(17, 24, 39, 0.05);
}
html[data-theme="light"]
  .compliance-demo-app-shell--symmetric
  .compliance-demo-canvas {
  margin-left: clamp(20px, 3.5vw, 40px);
  box-shadow: 0 12px 36px rgba(17, 24, 39, 0.05);
}
.compliance-demo-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 8px;
  border-right: 1px solid var(--demo-line);
  background: var(--demo-sidebar);
}
.compliance-demo-side-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid transparent;
  display: grid;
  place-items: center;
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease;
}
.compliance-demo-side-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.compliance-demo-side-btn:hover {
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.04);
}
.compliance-demo-side-btn.is-active {
  color: var(--signal-light);
  border-color: color-mix(in srgb, var(--signal-light) 35%, transparent);
  background: color-mix(in srgb, var(--signal) 14%, transparent);
}
.compliance-demo-side-btn--user {
  margin-top: auto;
}
.compliance-demo-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: clamp(20px, 3vw, 32px) clamp(20px, 3.5vw, 40px);
  border-right: 1px solid var(--demo-line);
}
.compliance-demo-main-head {
  margin-bottom: clamp(14px, 2vw, 20px);
  flex-shrink: 0;
}
.compliance-demo-main-head h1 {
  margin: 0;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.12;
  color: var(--demo-fg);
}
.compliance-demo-subtitle {
  margin: 10px 0 0;
  font-size: clamp(14px, 1.5vw, 15px);
  line-height: 1.55;
  color: var(--demo-muted);
  max-width: 58ch;
}
.compliance-demo-canvas {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: clamp(380px, 52vh, 640px);
  border: 1px solid var(--demo-line);
  border-radius: 18px;
  background: var(--demo-surface);
  overflow: hidden;
}
.compliance-demo-canvas-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(28px, 4vw, 48px);
  text-align: center;
  pointer-events: none;
}
.compliance-demo-canvas-empty p {
  margin: 0;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.65;
  color: var(--demo-faint);
  max-width: 42ch;
}
.compliance-demo-canvas.has-input .compliance-demo-canvas-empty {
  opacity: 0;
}
.compliance-demo-input {
  flex: 1;
  width: 100%;
  min-height: 0;
  resize: none;
  border: 0;
  border-radius: 0;
  padding: clamp(24px, 3vw, 32px) clamp(24px, 3.2vw, 36px) 88px;
  background: transparent;
  color: var(--demo-fg);
  font: inherit;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.65;
}
.compliance-demo-input::placeholder {
  color: color-mix(in srgb, var(--demo-faint) 85%, transparent);
}
.compliance-demo-input:focus {
  outline: none;
}
.compliance-demo-canvas-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 22px;
  background: var(--demo-canvas-footer);
}
.compliance-demo-upload {
  position: absolute;
  left: 22px;
  bottom: 16px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--demo-line-strong);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.65);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.compliance-demo-upload svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.compliance-demo-upload:hover {
  border-color: color-mix(in srgb, var(--signal-light) 35%, transparent);
  color: #fff;
}
.compliance-demo-detect {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 26px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  background: linear-gradient(
    135deg,
    var(--signal-deep),
    var(--signal),
    var(--signal-mid)
  );
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--signal) 22%, transparent);
}
.compliance-demo-detect svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.compliance-demo-detect:hover {
  background: linear-gradient(
    135deg,
    var(--signal-deep),
    var(--signal-mid),
    var(--signal-light)
  );
}
.compliance-demo-detect.is-loading {
  opacity: 0.7;
  pointer-events: none;
}
.compliance-demo-config {
  padding: clamp(20px, 2.8vw, 28px);
  overflow: auto;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.02),
    rgba(0, 0, 0, 0.12)
  );
}
.compliance-demo-section-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--demo-fg);
}
.compliance-strategy-list {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}
.compliance-strategy-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--demo-line-strong);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}
.compliance-strategy-card input {
  accent-color: var(--signal-light);
  margin-top: 4px;
}
.compliance-strategy-card.is-active {
  border-color: color-mix(in srgb, var(--signal-light) 45%, transparent);
  background: color-mix(in srgb, var(--signal) 12%, transparent);
}
.compliance-strategy-copy {
  display: grid;
  gap: 5px;
}
.compliance-strategy-copy strong {
  font-size: 14px;
  color: var(--demo-fg);
}
.compliance-strategy-copy span {
  font-size: 13px;
  line-height: 1.5;
  color: var(--demo-muted);
}
.compliance-strategy-icon {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.35);
}
.compliance-strategy-card.is-active .compliance-strategy-icon {
  color: var(--signal-light);
}
.compliance-cross-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.compliance-toggle {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}
.compliance-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.compliance-toggle-ui {
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid var(--demo-line-strong);
  position: relative;
  transition: background 0.2s ease;
}
.compliance-toggle-ui::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s ease;
}
.compliance-toggle input:checked + .compliance-toggle-ui {
  background: color-mix(in srgb, var(--signal) 55%, transparent);
}
.compliance-toggle input:checked + .compliance-toggle-ui::after {
  transform: translateX(20px);
}
.compliance-cross-panel {
  border: 1px solid var(--demo-line);
  border-radius: 14px;
  padding: 16px;
  background: var(--demo-surface-2);
  display: grid;
  gap: 10px;
}
.compliance-cross-col {
  display: grid;
  gap: 6px;
}
.compliance-cross-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--demo-faint);
}
.compliance-cross-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-size: 11px;
  color: var(--demo-muted);
}
.compliance-cross-globe {
  color: var(--signal-light);
}
.compliance-cross-col select {
  width: 100%;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--demo-line-strong);
  background: rgba(255, 255, 255, 0.92);
  color: #111827;
  padding: 0 12px;
  font: inherit;
  font-size: 13px;
}
.compliance-cross-region {
  font-size: 11px;
  color: var(--demo-faint);
}
.compliance-cross-line {
  display: flex;
  justify-content: center;
  padding: 2px 0;
}
.compliance-cross-line span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--signal) 20%, transparent);
  color: var(--signal-light);
  font-size: 12px;
  box-shadow: 0 0 16px color-mix(in srgb, var(--signal-light) 20%, transparent);
}
.compliance-cross-route {
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  text-align: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--demo-line);
  font-size: 13px;
  font-weight: 700;
  color: var(--demo-fg);
}
.compliance-demo-results {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--demo-line);
}
@media (max-width: 900px) {
  .compliance-results-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .compliance-output-grid {
    grid-template-columns: 1fr;
  }
}
.compliance-demo-empty {
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}
.compliance-results-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.compliance-result-card {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}
.compliance-result-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 4px;
}
.compliance-result-card strong {
  font-size: 13px;
  color: #fff;
  line-height: 1.3;
}
.compliance-risk.risk-critical {
  color: #ff7182;
}
.compliance-risk.risk-high {
  color: #ffb020;
}
.compliance-risk.risk-medium {
  color: var(--signal-light);
}
.compliance-risk.risk-low {
  color: #4ade80;
}
.compliance-cross-result {
  padding: 12px 14px;
  border-radius: 12px;
  margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.compliance-cross-result--block {
  background: rgba(255, 113, 130, 0.1);
  border-color: rgba(255, 113, 130, 0.25);
}
.compliance-cross-result--review {
  background: rgba(255, 176, 32, 0.08);
  border-color: rgba(255, 176, 32, 0.22);
}
.compliance-cross-result--pass {
  background: rgba(74, 222, 128, 0.08);
  border-color: rgba(74, 222, 128, 0.2);
}
.compliance-cross-result-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.compliance-cross-result p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.68);
}
.compliance-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.compliance-tag {
  font-size: 10px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(126, 184, 178, 0.12);
  color: var(--signal-light);
  border: 1px solid rgba(126, 184, 178, 0.2);
}
.compliance-output-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.compliance-output-block h4 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
}
.compliance-finding-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.compliance-finding-list li {
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12px;
}
.compliance-finding-type {
  font-weight: 700;
  color: var(--signal-light);
}
.compliance-finding-list code {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.72);
  word-break: break-all;
}
.compliance-output-text {
  margin: 0;
  min-height: 120px;
  max-height: 220px;
  overflow: auto;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  white-space: pre-wrap;
}
@media (max-width: 900px) {
  .compliance-demo-app-shell {
    grid-template-columns: 1fr;
  }
  .compliance-demo-app-shell--symmetric {
    grid-template-rows: auto auto auto;
  }
  .compliance-demo-app-shell--symmetric .compliance-demo-canvas,
  .compliance-demo-app-shell--symmetric .compliance-demo-config {
    grid-column: 1;
    margin: 0 clamp(16px, 4vw, 24px) 12px;
    min-height: clamp(320px, 48vh, 520px);
  }
  .compliance-demo-app-shell--symmetric .compliance-demo-config {
    border-left: 0;
    border-top: 1px solid var(--demo-line);
  }
  .compliance-demo-config {
    grid-column: 1;
    border-top: 1px solid var(--demo-line);
    border-left: 0;
  }
  .compliance-demo-main {
    border-right: 0;
  }
}

/* Compliance Demo — light theme (paper palette, matches footer) */
html[data-theme="light"] .compliance-demo-page {
  background: var(--paper);
}
html[data-theme="light"] .compliance-demo-app-shell {
  --demo-fg: var(--text);
  --demo-muted: var(--muted);
  --demo-faint: var(--soft);
  --demo-line: var(--line);
  --demo-line-strong: color-mix(in srgb, var(--line) 80%, var(--text));
  --demo-surface: var(--panel3);
  --demo-surface-2: color-mix(in srgb, var(--panel2) 70%, var(--paper));
  --demo-sidebar: color-mix(in srgb, var(--panel2) 88%, var(--paper));
  --demo-canvas-footer: linear-gradient(
    180deg,
    transparent,
    color-mix(in srgb, var(--panel2) 92%, var(--paper))
  );
  background: linear-gradient(180deg, var(--panel2), var(--paper));
}
html[data-theme="light"] .compliance-demo-side-btn {
  color: var(--soft);
}
html[data-theme="light"] .compliance-demo-side-btn:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--signal) 8%, transparent);
}
html[data-theme="light"] .compliance-demo-side-btn.is-active {
  color: var(--signal-deep);
  border-color: color-mix(in srgb, var(--signal) 28%, transparent);
  background: color-mix(in srgb, var(--signal-faint) 75%, #fff);
}
html[data-theme="light"] .compliance-demo-config {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--panel2) 55%, var(--paper)),
    var(--paper)
  );
  border-left: 1px solid var(--line);
}
html[data-theme="light"] .compliance-demo-canvas {
  border-color: color-mix(in srgb, var(--signal) 14%, var(--line));
  box-shadow: 0 12px 36px rgba(17, 24, 39, 0.05);
}
html[data-theme="light"] .compliance-demo-upload {
  background: var(--panel2);
  color: var(--signal-deep);
  border-color: var(--line);
}
html[data-theme="light"] .compliance-demo-upload:hover {
  border-color: color-mix(in srgb, var(--signal) 35%, transparent);
  color: var(--signal-deep);
}
html[data-theme="light"] .compliance-strategy-card {
  background: linear-gradient(180deg, var(--panel3), var(--panel2));
  border-color: var(--line);
}
html[data-theme="light"] .compliance-strategy-card.is-active {
  border-color: color-mix(in srgb, var(--signal) 32%, var(--line));
  background: color-mix(in srgb, var(--signal-faint) 65%, var(--panel3));
}
html[data-theme="light"] .compliance-strategy-icon {
  color: var(--soft);
}
html[data-theme="light"]
  .compliance-strategy-card.is-active
  .compliance-strategy-icon {
  color: var(--signal-deep);
}
html[data-theme="light"] .compliance-toggle-ui {
  background: var(--labs-taupe-light);
  border-color: var(--line);
}
html[data-theme="light"]
  .compliance-toggle
  input:checked
  + .compliance-toggle-ui {
  background: color-mix(in srgb, var(--signal) 70%, #fff);
}
html[data-theme="light"] .compliance-cross-panel {
  background: var(--panel3);
  border-color: var(--line);
}
html[data-theme="light"] .compliance-cross-route {
  background: var(--panel2);
  border-color: var(--line);
  color: var(--text);
}
html[data-theme="light"] .compliance-cross-globe,
html[data-theme="light"] .compliance-cross-line span {
  color: var(--signal-deep);
}
html[data-theme="light"] .compliance-cross-line span {
  background: color-mix(in srgb, var(--signal-faint) 80%, #fff);
}
html[data-theme="light"] .compliance-demo-main .module-sim-tag {
  background: rgba(42, 101, 97, 0.12);
  color: var(--signal-deep);
  border-color: rgba(42, 101, 97, 0.28);
}
html[data-theme="light"] .compliance-result-card {
  background: var(--panel3);
  border-color: var(--line);
}
html[data-theme="light"] .compliance-result-label {
  color: var(--soft);
}
html[data-theme="light"] .compliance-result-card strong {
  color: var(--text);
}
html[data-theme="light"] .compliance-cross-result p {
  color: var(--muted);
}
html[data-theme="light"] .compliance-finding-list li {
  background: var(--panel2);
  border-color: var(--line);
}
html[data-theme="light"] .compliance-finding-type {
  color: var(--signal-deep);
}
html[data-theme="light"] .compliance-finding-list code {
  color: var(--muted);
}
html[data-theme="light"] .compliance-output-block h4 {
  color: var(--text);
}
html[data-theme="light"] .compliance-output-text {
  background: var(--panel2);
  border-color: var(--line);
  color: var(--text);
}
html[data-theme="light"] .compliance-demo-empty {
  color: var(--muted);
}
html[data-theme="light"] .compliance-tag {
  background: color-mix(in srgb, var(--signal-faint) 80%, #fff);
  color: var(--signal-deep);
  border-color: color-mix(in srgb, var(--signal) 18%, transparent);
}
html[data-theme="light"] .site-footer {
  margin-top: 0;
  border-top: 1px solid var(--line);
}

/* —— Demo: AI Governance board console —— */
.demo-gov-page {
  --demo-sticky-top: var(--site-nav-h, 72px);
  position: relative;
  z-index: 0;
  padding-bottom: 0;
  background: var(--bg);
  min-height: calc(100dvh - 72px);
  display: flex;
  flex-direction: column;
}
html[data-theme="light"] .demo-gov-page {
  background: var(--paper);
}
body.demo-gov-site > header.nav,
body:has(.demo-gov-page) > header.nav {
  position: sticky;
  top: 0;
  z-index: 99999 !important;
  isolation: auto;
  background: #f5f0e8 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--line) 100%, transparent);
  overflow: visible !important;
}
html[data-theme="dark"] body.demo-gov-site > header.nav,
html[data-theme="dark"] body:has(.demo-gov-page) > header.nav {
  background: rgba(12, 18, 17, 0.96) !important;
}
body.demo-gov-site > header.nav .navin,
body.demo-gov-site > header.nav .links,
body.demo-gov-site > header.nav .actions,
body:has(.demo-gov-page) > header.nav .navin,
body:has(.demo-gov-page) > header.nav .links,
body:has(.demo-gov-page) > header.nav .actions {
  overflow: visible !important;
}
body.demo-gov-site .nav-dropdown.is-open .nav-dropdown-panel,
body:has(.demo-gov-page) .nav-dropdown.is-open .nav-dropdown-panel {
  z-index: 100002 !important;
}
.demo-gov-console {
  flex: 1;
  position: relative;
  z-index: 0;
  min-height: 0;
  overflow: visible;
}
.demo-gov-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}
.demo-gov-title-row h2 {
  margin: 0;
}
.demo-gov-console .demo-gov-mode-tag {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cap-compliance-bg) 85%, #fff);
  color: var(--cap-compliance);
  border: 1px solid color-mix(in srgb, var(--cap-compliance) 28%, transparent);
}
html[data-theme="light"] .demo-gov-page .site-footer {
  margin-top: 0;
}

/* —— Platforms nav (parallel Product | Demo) —— */
.nav-dropdown-panel--portfolio {
  min-width: 420px;
  padding: 10px;
}
.nav-portfolio-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 8px;
}
.nav-portfolio-col {
  min-width: 0;
}
.nav-dropdown-section {
  display: block;
  padding: 8px 14px 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav-portfolio-col .nav-dropdown-section {
  padding-top: 4px;
}
.nav-portfolio-col .nav-dropdown-section:first-child {
  padding-top: 8px;
}
.nav-dropdown-panel--portfolio .nav-dropdown-section {
  border-top: 0;
  margin-top: 0;
}
.footer-dir-subheading {
  display: block;
  margin: 8px 0 2px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.footer-dir-subheading:first-of-type {
  margin-top: 0;
}
@media (max-width: 900px) {
  .nav-dropdown-panel--portfolio {
    min-width: min(92vw, 420px);
  }
}
@media (max-width: 560px) {
  .nav-portfolio-cols {
    grid-template-columns: 1fr;
  }
  .nav-dropdown-panel--portfolio {
    min-width: min(92vw, 320px);
  }
}

/* —— About page —— */
.about-page {
  padding-bottom: clamp(48px, 6vw, 80px);
}
.about-hero-section {
  padding: clamp(36px, 5vw, 56px) 0 clamp(28px, 4vw, 40px);
}
.about-crumb {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--soft);
  margin: 0 0 clamp(18px, 2.8vw, 26px);
}
.about-hero-band {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-band);
  padding: clamp(44px, 5.5vw, 68px) clamp(40px, 4.8vw, 56px);
  background:
    radial-gradient(
      520px 240px at 0% 0%,
      color-mix(in srgb, var(--signal-faint) 55%, transparent),
      transparent 72%
    ),
    linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow: var(--shadow-card);
}
.about-hero-band:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.45;
  background:
    linear-gradient(rgba(23, 29, 34, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 29, 34, 0.03) 1px, transparent 1px);
  background-size:
    140px 140px,
    140px 140px;
}
.about-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.88fr);
  gap: clamp(48px, 6.5vw, 80px);
  align-items: center;
}
.about-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 50ch;
}
.about-hero-copy .eyebrow {
  margin: 0 0 clamp(16px, 2.4vw, 22px);
}
.about-hero-copy h1 {
  font-size: clamp(2rem, 3.4vw, 2.95rem);
  line-height: 1.08;
  margin: 0;
  letter-spacing: -0.03em;
}
.about-hero-copy .lead {
  max-width: 46ch;
  margin: clamp(22px, 3.2vw, 32px) 0 0;
  line-height: 1.62;
  font-size: clamp(0.94rem, 1.25vw, 1.02rem);
}
.about-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(32px, 4.5vw, 44px);
}
.about-hero-visual {
  border: 1px solid var(--line);
  border-radius: var(--radius-band);
  overflow: hidden;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow: var(--shadow-card);
  max-width: none;
  margin-inline: 0;
  aspect-ratio: 4/3;
}
.about-hero-visual img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}
.about-page > .container.about-stats-band {
  margin-top: clamp(24px, 4vw, 40px);
}
.about-stats-band {
  padding: clamp(18px, 2.5vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius-band);
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow: var(--shadow);
  margin-bottom: clamp(24px, 3vw, 36px);
}
.about-section-kicker {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signal-deep);
  margin-bottom: 14px;
}
html[data-theme="dark"] .about-section-kicker {
  color: var(--signal-light);
}
.about-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.about-stat {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--panel3) 88%, transparent);
}
.about-stat b {
  display: block;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(1.2rem, 2.2vw, 1.65rem);
  line-height: 1.15;
  color: var(--text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.about-stat span {
  display: block;
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.45;
}
.about-story {
  margin-bottom: clamp(28px, 4vw, 44px);
}
.about-story-head {
  max-width: 760px;
  margin-bottom: 18px;
}
.about-module-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.about-module-chip {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--panel3);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}
.about-module-chip:not(.is-active) {
  color: #9ca3af;
}
.about-module-chip.is-active {
  background: color-mix(in srgb, var(--signal) 12%, var(--panel3));
  border-color: color-mix(in srgb, var(--signal-light) 30%, var(--line));
  color: #111827;
  font-weight: 800;
}
.about-module-chip:hover:not(.is-active) {
  border-color: color-mix(in srgb, var(--signal-light) 28%, var(--line));
  color: #6b7280;
}
html[data-theme="light"] .about-module-chip:not(.is-active) {
  color: #9ca3af !important;
}
html[data-theme="light"] .about-module-chip.is-active {
  color: #111827 !important;
}
html[data-theme="light"] .about-module-chip:hover:not(.is-active) {
  color: #6b7280 !important;
}
html[data-theme="dark"] .about-module-chip:not(.is-active) {
  color: var(--muted);
}
html[data-theme="dark"] .about-module-chip.is-active {
  color: var(--text);
}
.about-timeline-card {
  padding: clamp(18px, 2.5vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--radius-band);
  background: linear-gradient(180deg, var(--panel3), var(--panel2));
  box-shadow: var(--shadow-card);
}
.about-timeline-label {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--signal-deep);
  margin-bottom: 8px;
}
html[data-theme="dark"] .about-timeline-label {
  color: var(--signal-light);
}
.about-timeline-card h3 {
  margin: 0 0 10px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.3;
}
.about-timeline-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.58;
  font-size: 0.92rem;
}
.about-timeline-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}
.about-timeline-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel3);
  color: var(--text);
  font-size: 1rem;
  cursor: pointer;
}
.about-timeline-dots {
  display: flex;
  gap: 8px;
}
.about-timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  background: var(--line);
  cursor: pointer;
  padding: 0;
}
.about-timeline-dot.is-active {
  background: var(--signal);
}
.about-why {
  margin-bottom: clamp(28px, 4vw, 44px);
}
.about-why-band {
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius-band);
  background:
    radial-gradient(
      480px 220px at 100% 0%,
      rgba(110, 91, 216, 0.1),
      transparent 72%
    ),
    linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow: var(--shadow);
}
.about-why-list {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.about-why-list li {
  padding: 14px 16px;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel3) 90%, transparent);
  color: var(--muted);
  line-height: 1.55;
  font-size: 0.92rem;
}
.about-why-close {
  margin: 16px 0 0;
  font-weight: 700;
  color: var(--text);
}
.about-team-section {
  margin-bottom: clamp(28px, 4vw, 40px);
}
.about-team-shell {
  border: 1px solid var(--line);
  border-radius: var(--radius-band);
  padding: clamp(16px, 2.5vw, 22px);
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow: var(--shadow);
}
.about-team-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.about-team-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel3);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.about-team-btn img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}
.about-team-btn.is-active {
  background: color-mix(in srgb, var(--signal) 12%, var(--panel3));
  border-color: color-mix(in srgb, var(--signal-light) 30%, var(--line));
  color: var(--text);
}
.about-team-card-grid {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}
.about-team-photo-wrap {
  aspect-ratio: 3/4;
  border-radius: var(--radius-band);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel3);
  max-width: 360px;
  width: 100%;
}
.about-team-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.about-team-copy {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vw, 20px);
  min-width: 0;
  text-align: left;
}
.about-team-header {
  text-align: left;
}
.about-team-kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--soft);
}
.about-team-copy h3 {
  margin: 8px 0 4px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
}
.about-team-role {
  margin: 0 0 12px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--signal-deep);
}
html[data-theme="dark"] .about-team-role {
  color: var(--signal-light);
}
.about-team-details {
  text-align: left;
}
.about-team-bio {
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.6;
  font-size: 0.94rem;
}
.about-team-bullets {
  margin: 0;
  padding-left: 1.15em;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}
.about-team-bullets li + li {
  margin-top: 8px;
}
.about-team-controls {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}
.about-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.about-value-card {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow: var(--shadow-card);
}
.about-value-card h3 {
  margin: 0 0 8px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 1.02rem;
}
.about-value-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 0.9rem;
}

@media (max-width: 980px) {
  .about-hero-grid,
  .about-team-card-grid {
    grid-template-columns: 1fr;
  }
  .about-hero-band {
    padding: clamp(32px, 5vw, 44px) clamp(28px, 4vw, 36px);
  }
  .about-hero-copy {
    max-width: none;
  }
  .about-hero-visual {
    max-width: min(520px, 100%);
    margin-inline: auto;
    aspect-ratio: 16/10;
  }
  .about-hero-visual img {
    min-height: 0;
  }
  .about-team-photo-wrap {
    max-width: min(360px, 100%);
    margin: 0;
  }
  .about-team-copy {
    align-items: stretch;
  }
  .about-module-chips {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 760px) {
  .about-stats,
  .about-values-grid {
    grid-template-columns: 1fr;
  }
  .about-module-chips {
    grid-template-columns: 1fr;
  }
}

html[data-theme="dark"] .about-stats-band,
html[data-theme="dark"] .about-stat,
html[data-theme="dark"] .about-timeline-card,
html[data-theme="dark"] .shadcn-timeline-card,
html[data-theme="dark"] .about-team-shell,
html[data-theme="dark"] .about-value-card,
html[data-theme="dark"] .about-why-band {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border-color: var(--line);
}
html[data-theme="dark"] .about-module-chip,
html[data-theme="dark"] .about-team-btn,
html[data-theme="dark"] .about-timeline-btn {
  background: var(--panel3);
  border-color: var(--line);
}
html[data-theme="dark"] .about-why-list li {
  background: rgba(126, 184, 178, 0.04);
}
html[data-theme="dark"] .about-hero-band {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border-color: var(--line);
}
html[data-theme="dark"] .about-hero-visual {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
}

/* —— Sign In + Feedback chrome —— */
.btn-signin {
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font-weight: 700;
  font-size: 13px;
}
html[data-theme="light"] .btn-signin {
  background: rgba(255, 255, 255, 0.7);
}
.btn-signin:hover {
  border-color: color-mix(in srgb, var(--signal-light) 35%, var(--line));
  background: color-mix(in srgb, var(--signal) 8%, transparent);
}
body.auth-open {
  overflow: hidden;
}

.feedback-widget {
  position: fixed;
  right: clamp(12px, 2vw, 24px);
  bottom: clamp(12px, 2vw, 24px);
  z-index: 45;
}
.feedback-widget.is-collapsed .feedback-panel {
  display: none;
}
.feedback-widget:not(.is-collapsed) .feedback-fab {
  display: none;
}
.feedback-fab {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.18);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
html[data-theme="dark"] .feedback-fab {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--line);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
}
.feedback-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.22);
}
.feedback-fab-mark {
  font-size: 11px;
  font-weight: 900;
  color: var(--signal-deep);
  letter-spacing: -0.04em;
  line-height: 1;
}
html[data-theme="dark"] .feedback-fab-mark {
  color: var(--signal-light);
}
.feedback-fab-icon {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 14px;
  height: 14px;
  fill: var(--signal-deep);
}
html[data-theme="dark"] .feedback-fab-icon {
  fill: var(--signal-light);
}
.feedback-panel {
  width: min(340px, calc(100vw - 24px));
  border: 1px solid rgba(16, 20, 23, 0.08);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 44px rgba(17, 24, 39, 0.16);
  overflow: hidden;
}
html[data-theme="dark"] .feedback-panel {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border-color: var(--line);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.45);
}
.feedback-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(16, 20, 23, 0.08);
  background: linear-gradient(135deg, #f8fafc 0%, #fff 100%);
}
html[data-theme="dark"] .feedback-panel-head {
  border-color: var(--line);
  background: linear-gradient(135deg, var(--panel3), var(--panel2));
}
.feedback-panel-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.feedback-panel-logo {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 900;
  color: var(--signal-deep);
  letter-spacing: -0.04em;
  border: 2px solid color-mix(in srgb, var(--signal) 55%, transparent);
  background:
    radial-gradient(
      circle at 30% 30%,
      rgba(126, 184, 178, 0.35),
      transparent 70%
    ),
    #fff;
}
html[data-theme="dark"] .feedback-panel-logo {
  background: var(--panel3);
  color: var(--signal-light);
}
.feedback-panel-brand strong {
  font-size: 14px;
  line-height: 1.25;
  color: #111827;
}
html[data-theme="dark"] .feedback-panel-brand strong {
  color: var(--text);
}
.feedback-panel-close {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--soft);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.feedback-panel-close:hover {
  background: rgba(15, 23, 42, 0.06);
  color: var(--text);
}
html[data-theme="dark"] .feedback-panel-close:hover {
  background: rgba(255, 255, 255, 0.06);
}
.feedback-panel-body {
  padding: 12px 14px 14px;
}
.feedback-panel-intro {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.45;
  color: #6b7280;
}
html[data-theme="dark"] .feedback-panel-intro {
  color: var(--muted);
}
.feedback-panel-form {
  display: grid;
  gap: 8px;
}
.feedback-field {
  display: grid;
  gap: 4px;
}
.feedback-field span {
  font-size: 11px;
  font-weight: 700;
  color: #374151;
}
html[data-theme="dark"] .feedback-field span {
  color: var(--muted);
}
.feedback-field input,
.feedback-field textarea {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 9px;
  padding: 9px 11px;
  font: inherit;
  font-size: 13px;
  background: #fff;
  color: var(--text);
  resize: vertical;
}
html[data-theme="dark"] .feedback-field input,
html[data-theme="dark"] .feedback-field textarea {
  background: var(--panel3);
  border-color: var(--line);
}
.feedback-field textarea {
  min-height: 72px;
}
.feedback-consent {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0;
  font-size: 10px;
  line-height: 1.4;
  color: #6b7280;
}
html[data-theme="dark"] .feedback-consent {
  color: var(--soft);
}
.feedback-consent input {
  margin-top: 1px;
  accent-color: var(--signal);
}
.feedback-send-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 2px;
  border: 0;
  border-radius: 9px;
  padding: 10px 14px;
  background: var(--signal-deep);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
html[data-theme="dark"] .feedback-send-btn {
  background: linear-gradient(135deg, var(--brand-mint), var(--brand-teal));
  color: var(--accent-ink);
}
.feedback-send-btn svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}
.feedback-send-btn:hover {
  filter: brightness(1.05);
}
.feedback-sent {
  margin: 0;
  padding: 16px 0;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  color: var(--signal-deep);
}
html[data-theme="dark"] .feedback-sent {
  color: var(--signal-light);
}

.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 24px);
}
.auth-overlay[hidden] {
  display: none !important;
}
.auth-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--brand-ink) 78%, transparent);
  backdrop-filter: blur(12px);
}
.auth-modal {
  position: relative;
  width: min(420px, 100%);
  max-height: min(92vh, 720px);
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--signal-light) 18%, var(--line));
  border-radius: 20px;
  padding: 24px 24px 20px;
  background:
    radial-gradient(
      520px 240px at 0% 0%,
      color-mix(in srgb, var(--signal) 22%, transparent),
      transparent 72%
    ),
    radial-gradient(
      420px 200px at 100% 0%,
      color-mix(in srgb, var(--brand-mint) 10%, transparent),
      transparent 70%
    ),
    linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 color-mix(in srgb, var(--signal-light) 8%, transparent);
  color: var(--text);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--signal) 35%, transparent)
    transparent;
}
.auth-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel3) 70%, transparent);
  color: var(--soft);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}
.auth-close:hover {
  border-color: color-mix(in srgb, var(--signal-light) 30%, var(--line));
  color: var(--text);
  background: var(--panel3);
}
.auth-brand-row {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
}
.auth-mark {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--signal-light);
  border: 1.5px solid color-mix(in srgb, var(--signal-light) 42%, var(--line));
  background:
    radial-gradient(
      circle at 30% 30%,
      color-mix(in srgb, var(--signal-light) 18%, transparent),
      transparent 72%
    ),
    var(--panel3);
  box-shadow: 0 0 18px color-mix(in srgb, var(--signal-light) 12%, transparent);
}
.auth-brand-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.auth-kicker {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal-light);
  line-height: 1.2;
}
html[data-theme="light"] .auth-kicker {
  color: var(--signal-deep);
}
.auth-access {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.3;
}
.auth-panel {
  display: grid;
}
.auth-head {
  margin: 0 0 14px;
}
.auth-panel h2 {
  margin: 0;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(1.35rem, 3.6vw, 1.65rem);
  line-height: 1.18;
  color: var(--text);
  letter-spacing: -0.02em;
}
.auth-lead {
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}
.auth-lead--tagline {
  margin-top: 4px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--signal-light);
  letter-spacing: 0.01em;
}
html[data-theme="light"] .auth-lead--tagline {
  color: var(--signal-deep);
}
.auth-form {
  display: grid;
  gap: 11px;
  margin: 0 0 14px;
}
.auth-form--signup {
  gap: 10px;
}
.auth-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.auth-field {
  display: grid;
  gap: 5px;
}
.auth-field > span,
.auth-field-row {
  font-size: 12px;
  font-weight: 700;
  color: color-mix(in srgb, var(--text) 88%, var(--muted));
  letter-spacing: 0.01em;
}
.auth-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.auth-field--optional > span {
  color: var(--soft);
  font-weight: 600;
}
.auth-optional-hint {
  font-style: normal;
  font-weight: 500;
  color: var(--soft);
}
.auth-field input {
  width: 100%;
  height: 44px;
  border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--panel3) 88%, transparent);
  color: var(--text);
  padding: 0 13px;
  font: inherit;
  font-size: 14px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}
.auth-field input::placeholder {
  color: var(--soft);
}
.auth-field input:hover {
  border-color: color-mix(in srgb, var(--signal-light) 22%, var(--line));
}
.auth-field input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--signal-light) 45%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 14%, transparent);
  background: var(--panel3);
}
.auth-password-wrap {
  position: relative;
  display: block;
}
.auth-password-wrap input {
  padding-right: 42px;
}
.auth-eye {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--soft);
  cursor: pointer;
  transition: color 0.2s ease;
}
.auth-eye:hover {
  color: var(--signal-light);
}
.auth-eye::before {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  margin: 0 auto;
  border: 2px solid currentColor;
  border-radius: 50%;
  box-shadow: inset 0 -5px 0 -2px currentColor;
}
.auth-eye.is-visible::after {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  top: 13px;
  height: 2px;
  background: currentColor;
  transform: rotate(-35deg);
}
.auth-primary-btn {
  width: 100%;
  height: 46px;
  margin-top: 2px;
  border: 0;
  border-radius: 11px;
  cursor: pointer;
  background: linear-gradient(
    135deg,
    var(--brand-mint),
    color-mix(in srgb, var(--brand-teal) 35%, var(--brand-mint))
  );
  color: var(--accent-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  box-shadow:
    0 10px 28px color-mix(in srgb, var(--signal-light) 24%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition:
    filter 0.2s ease,
    transform 0.2s ease;
}
.auth-primary-btn:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  color: var(--soft);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--signal-light) 12%, var(--line));
}
.auth-social {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.auth-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--panel3) 75%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}
.auth-social-btn:hover {
  border-color: color-mix(in srgb, var(--signal-light) 28%, var(--line));
  background: color-mix(in srgb, var(--signal) 8%, var(--panel3));
}
.auth-social-icon {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 900;
}
.auth-social-icon--google {
  background: #fff;
  color: #4285f4;
}
.auth-social-icon--github {
  background: #fff;
  color: var(--brand-ink);
}
.auth-switch {
  margin: 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}
.auth-text-btn {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--signal-light);
  font: inherit;
  font-size: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(
    in srgb,
    var(--signal-light) 45%,
    transparent
  );
}
.auth-text-btn:hover {
  color: var(--brand-mint);
  text-decoration-color: currentColor;
}
.auth-text-btn--subtle {
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  color: var(--soft);
}
.auth-text-btn--subtle:hover {
  color: var(--signal-light);
  text-decoration: underline;
}
.auth-switch .auth-text-btn {
  font-size: 12px;
  text-decoration: none;
}
.auth-switch .auth-text-btn:hover {
  text-decoration: underline;
}

@media (max-width: 760px) {
  .feedback-widget {
    right: 12px;
    bottom: 12px;
  }
  .feedback-panel {
    width: calc(100vw - 24px);
  }
  .actions .btn-signin {
    padding: 0 12px;
    font-size: 12px;
  }
}
@media (max-width: 980px) {
  .auth-modal {
    padding: 20px 18px 18px;
  }
  .auth-field-grid {
    grid-template-columns: 1fr;
  }
}

/* —— Brand polish: editorial rhythm (Apple / Google Labs) —— */
::selection {
  background: color-mix(in srgb, var(--signal-light) 38%, transparent);
  color: var(--text);
}
html[data-theme="light"] ::selection {
  background: color-mix(in srgb, var(--brand-teal) 22%, #fff);
  color: var(--brand-ink);
}

.hero-mission-band--unified {
  padding: clamp(8px, 1.4vw, 16px) 0 clamp(22px, 3.2vw, 36px);
}
.hero-mission-unified {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: min(720px, 100%);
  margin-inline: auto;
}
.hero-mission-unified .hero-mission-quote {
  width: 100%;
  margin: 0;
}
.trust-capability-grid--merged {
  width: 100%;
  margin: clamp(18px, 2.6vw, 26px) 0 0;
  padding: clamp(16px, 2.4vw, 22px) 0 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
}
.trust-capability-grid--merged .trust-capability-text {
  font-size: 12px;
  line-height: 1.4;
}
.trust-capability-grid--merged .trust-capability-text strong {
  font-weight: 700;
  color: var(--text);
}
.trust-capability-grid--merged .trust-capability-icon {
  width: 32px;
  height: 32px;
}
.hero-mission-band--below-hero {
  padding: clamp(10px, 1.6vw, 18px) 0 clamp(18px, 2.6vw, 28px);
  margin-top: clamp(10px, 1.8vw, 16px);
  background: transparent;
}
.hero-mission-band--below-hero .hero-mission-statement--lead {
  font-size: clamp(0.92rem, 1.65vw, 1.06rem);
  line-height: 1.62;
  font-weight: 500;
  color: var(--muted);
}
.hero-mission-band--below-hero .hero-mission-mark {
  opacity: 0.28;
  margin-bottom: clamp(4px, 0.8vw, 8px);
}
.hero-mission-band--below-hero .hero-mission-ceo {
  margin-top: clamp(10px, 1.6vw, 14px);
}
.hero-mission-band--below-hero .hero-mission-ceo cite {
  font-size: 0.88rem;
}
.hero-mission-band--below-hero .hero-mission-role {
  font-size: 10px;
}
.hero-mission-quote {
  max-width: min(560px, 90%);
  margin: 0 auto;
  text-align: center;
  padding: clamp(8px, 1.4vw, 14px) clamp(12px, 2vw, 20px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.hero-mission-statement {
  font-size: clamp(1rem, 1.95vw, 1.2rem);
  line-height: 1.55;
  font-weight: 500;
  color: var(--text);
}
.hero-mission-statement--lead {
  max-width: 48ch;
  margin-inline: auto;
}
.hero-mission-statement strong.mission-em {
  font-weight: 700;
}
.hero-mission-mark {
  opacity: 0.35;
  margin-bottom: clamp(6px, 1vw, 10px);
}
.hero-mission-ceo {
  margin-top: clamp(14px, 2vw, 18px);
}
.mission-em {
  font-style: normal;
  font-weight: 700;
}
.hero-category-def {
  font-size: clamp(0.98rem, 1.75vw, 1.05rem);
  line-height: 1.64;
  max-width: 54ch;
  margin-top: 14px;
  color: var(--muted);
}

.trust-bar-inner {
  border-radius: var(--radius-band);
}
.trust-bar-pill {
  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.trust-bar-pill:hover {
  border-color: color-mix(in srgb, var(--signal) 22%, var(--line));
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(17, 24, 39, 0.05);
}

.platform-framework-band {
  border-radius: var(--radius-band);
}
.problem-card {
  transition:
    transform 0.22s var(--ease-out),
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.problem-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--signal) 18%, var(--line));
  box-shadow: 0 10px 28px rgba(17, 24, 39, 0.06);
}
.loop-step {
  transition:
    transform 0.22s var(--ease-out),
    border-color 0.2s ease;
}
.loop-step:hover {
  transform: translateY(-2px);
}

.compare-matrix {
  border-radius: var(--radius-band);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.compare-cell-modeio strong {
  font-weight: 700;
  line-height: 1.45;
}

.resources-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 22px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel2) 88%, transparent);
}
.resources-tab {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 10px 18px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition:
    color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}
.resources-tab:hover {
  color: var(--text);
}
.resources-tab[aria-selected="true"] {
  color: var(--text);
  background: var(--panel3);
  box-shadow:
    0 1px 4px rgba(17, 24, 39, 0.08),
    inset 0 0 0 1px color-mix(in srgb, var(--line) 80%, transparent);
}
html[data-theme="dark"] .resources-tab[aria-selected="true"] {
  background: var(--panel2);
}

.product-entry-card,
.labs-experiment-card {
  transition:
    transform 0.24s var(--ease-out),
    border-color 0.2s ease,
    box-shadow 0.24s ease;
}
.product-entry-card:hover,
.labs-experiment-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(17, 24, 39, 0.08);
}

html[data-theme="light"] .brand span {
  color: color-mix(in srgb, var(--brand-teal-deep) 55%, var(--soft));
}
html[data-theme="light"] .eyebrow.paper-eyebrow {
  background: color-mix(in srgb, var(--signal-faint) 80%, #fff);
  border-color: color-mix(in srgb, var(--signal) 14%, var(--line));
  color: var(--signal-deep);
}

/* —— Trust / Legal pages —— */
.trust-page {
  padding-bottom: clamp(48px, 6vw, 80px);
}
.trust-hero {
  padding: clamp(32px, 4.5vw, 52px) 0 clamp(24px, 3.5vw, 36px);
}
.trust-hero h1 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.08;
  margin-top: 10px;
}
.trust-hero .hero-category-def {
  max-width: 62ch;
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 20px);
  margin-top: clamp(20px, 3vw, 28px);
}
.trust-card {
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow: var(--shadow-card);
}
.trust-card h2 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}
.trust-card p {
  margin: 0 0 12px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
}
.trust-card a {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--signal-deep);
  text-decoration: none;
}
html[data-theme="dark"] .trust-card a {
  color: var(--signal-light);
}
.trust-section {
  margin-top: clamp(28px, 4vw, 40px);
}
.trust-section h2 {
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  margin-bottom: 12px;
}
.trust-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.trust-list li {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--panel2) 90%, transparent);
}
.trust-list li strong {
  display: block;
  margin-bottom: 4px;
}
.trust-list li span {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
}
.trust-related {
  align-items: center;
}
.trust-section-lead {
  max-width: 68ch;
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.62;
  font-size: 0.95rem;
}
.trust-pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 2vw, 18px);
  margin-top: 16px;
}
.trust-pillar-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 100%;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.22s ease,
    transform 0.22s var(--ease-out),
    box-shadow 0.22s ease;
}
.trust-pillar-card:hover {
  border-color: color-mix(in srgb, var(--signal) 28%, var(--line));
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover, var(--shadow-card));
}
.trust-pillar-card h3 {
  margin: 0;
  font-size: 1rem;
}
.trust-pillar-card p {
  margin: 0;
  flex: 1;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--muted);
}
.trust-pillar-card span.trust-pillar-link {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--signal-deep);
}
html[data-theme="dark"] .trust-pillar-card span.trust-pillar-link {
  color: var(--signal-light);
}
.trust-data-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 2vw, 18px);
  margin-top: 14px;
}
.trust-data-card {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--panel2) 92%, transparent);
}
.trust-data-card h3 {
  margin: 0 0 8px;
  font-size: 0.98rem;
}
.trust-data-card p {
  margin: 0 0 10px;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--muted);
}
.trust-data-card a {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--signal-deep);
  text-decoration: none;
}
.trust-framework-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.trust-framework-tags span {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--signal-deep);
  background: color-mix(in srgb, var(--signal-faint) 80%, var(--panel3));
  border: 1px solid color-mix(in srgb, var(--signal) 16%, var(--line));
}
.trust-framework-tags--muted span {
  color: var(--muted);
  background: var(--panel2);
  border-color: var(--line);
  font-weight: 600;
}
.trust-doc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.trust-doc-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--panel2);
}
.trust-doc-card strong {
  font-size: 0.92rem;
}
.trust-doc-card span {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--muted);
}
.trust-doc-card a,
.trust-contact-box a {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--signal-deep);
}
.trust-contact-box {
  margin-top: 16px;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--signal) 18%, var(--line));
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--signal-faint) 45%, var(--panel2));
}
.trust-contact-box p {
  margin: 0 0 8px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
}
.trust-contact-box p:last-child {
  margin-bottom: 0;
}
.legal-prose h3 {
  margin: 1.2em 0 0.5em;
  font-size: 1rem;
}
.legal-prose ul {
  margin: 0 0 1em;
  padding-left: 1.2em;
  color: var(--muted);
  line-height: 1.62;
}
.legal-prose ul li {
  margin-bottom: 0.35em;
}
@media (max-width: 900px) {
  .trust-grid,
  .trust-data-grid {
    grid-template-columns: 1fr;
  }
  .trust-pillar-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .trust-doc-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .trust-pillar-grid {
    grid-template-columns: 1fr;
  }
}
.trust-resource-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.trust-resource-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--panel2) 92%, transparent);
}
.trust-resource-row > span:first-child {
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text);
}
.trust-resource-row a {
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--signal-deep);
  text-decoration: none;
}
.trust-resource-row a:hover {
  text-decoration: underline;
}
html[data-theme="dark"] .trust-resource-row a {
  color: var(--signal-light);
}
.trust-resource-note {
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--soft);
  line-height: 1.5;
}

:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--signal) 55%, transparent);
  outline-offset: 3px;
}
.btn:focus-visible,
.resources-tab:focus-visible {
  outline-offset: 2px;
}

/* Cookie consent banner */
.cookie-consent {
  position: fixed;
  inset: auto 20px 20px 20px;
  z-index: 12000;
  max-width: 520px;
  margin-left: auto;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.28s ease,
    transform 0.28s var(--ease-out);
  pointer-events: none;
}
.cookie-consent.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.cookie-consent-panel {
  padding: clamp(20px, 3vw, 28px);
  border-radius: 16px;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  color: #fff;
}
.cookie-consent-title {
  margin: 0 0 10px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
}
.cookie-consent-text {
  margin: 0 0 18px;
  font-size: 0.84rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}
.cookie-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cookie-btn {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 14px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.15s ease;
}
.cookie-btn:hover {
  transform: translateY(-1px);
}
.cookie-btn--ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #fff;
}
.cookie-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.06);
}
.cookie-btn--solid {
  background: #fff;
  border: 1px solid #fff;
  color: #111;
}
.cookie-btn--solid:hover {
  background: #f3f4f6;
}
.cookie-pref-list {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}
.cookie-pref {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
}
.cookie-pref strong {
  display: block;
  font-size: 0.84rem;
  color: #fff;
}
.cookie-pref small {
  display: block;
  margin-top: 4px;
  font-size: 0.76rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.68);
}
.cookie-pref input {
  margin-top: 3px;
  accent-color: #fff;
}
@media (max-width: 560px) {
  .cookie-consent {
    inset: auto 12px 12px 12px;
  }
  .cookie-consent-actions {
    flex-direction: column;
  }
  .cookie-btn {
    width: 100%;
  }
}

/* Book a demo form */
.demo-book-page {
  padding: clamp(28px, 4vw, 48px) 0 clamp(56px, 7vw, 88px);
}
.demo-book-shell {
  max-width: none;
  padding: clamp(28px, 4vw, 56px);
  box-sizing: border-box;
}
.demo-book-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 22px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.18s ease;
}
.demo-book-back:hover {
  color: var(--text);
}
.demo-book-form-wrap h1 {
  font-size: clamp(1.75rem, 3.2vw, 2.35rem);
  line-height: 1.12;
  margin-top: 8px;
}
.demo-book-lead {
  max-width: 58ch;
  margin-top: 12px;
  color: var(--muted);
  line-height: 1.58;
  font-size: 0.95rem;
}
.demo-book-form {
  margin-top: 28px;
  display: grid;
  gap: 20px;
}
.demo-fieldset {
  margin: 0;
  padding: 0 0 20px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.demo-fieldset:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}
.demo-fieldset--contact {
  padding-bottom: 22px;
}
.demo-fieldset legend {
  display: block;
  margin-bottom: 14px;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
}
.demo-fieldset-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.demo-fieldset-row .demo-fieldset {
  padding-bottom: 0;
  border-bottom: 0;
}
.demo-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
}
.demo-field-grid--contact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.demo-field--span2 {
  grid-column: 1 / -1;
}
.demo-field {
  display: grid;
  gap: 7px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}
.demo-field--other {
  margin-top: 12px;
}
.demo-field--other[hidden] {
  display: none;
}
.demo-field input,
.demo-field textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--panel3);
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.45;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}
.demo-field input:focus,
.demo-field textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--signal) 40%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 12%, transparent);
}
.demo-field textarea {
  resize: vertical;
  min-height: 108px;
}
.demo-radio-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.demo-radio-group--quad {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.demo-radio-group--stack {
  grid-template-columns: 1fr;
}
.demo-radio {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--panel3);
  cursor: pointer;
  font-size: 0.86rem;
  line-height: 1.4;
  transition:
    border-color 0.18s ease,
    background 0.18s ease;
}
.demo-radio:hover {
  border-color: color-mix(in srgb, var(--signal) 22%, var(--line));
}
.demo-radio:has(input:checked) {
  border-color: color-mix(in srgb, var(--signal) 35%, var(--line));
  background: color-mix(in srgb, var(--signal) 8%, var(--panel3));
}
.demo-radio input {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--signal);
}
.demo-book-actions {
  margin-top: 8px;
  padding-top: 4px;
}
.demo-book-submit {
  width: 100%;
  justify-content: center;
  padding: 14px 20px;
}
.demo-book-success {
  text-align: center;
  padding: clamp(36px, 5vw, 56px) clamp(20px, 4vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius-band);
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow: var(--shadow-card);
}
.demo-book-success-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  font-weight: 800;
  background: color-mix(in srgb, var(--signal) 14%, var(--panel3));
  color: var(--signal-deep);
  border: 1px solid color-mix(in srgb, var(--signal) 28%, var(--line));
}
.demo-book-success h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.65rem);
  margin: 0 0 10px;
}
.demo-book-success p {
  max-width: 46ch;
  margin: 0 auto 22px;
  color: var(--muted);
  line-height: 1.58;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 760px) {
  .demo-fieldset-row {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-bottom: 20px;
  }
}
@media (max-width: 640px) {
  .demo-book-shell {
    padding: 24px 20px;
  }
  .demo-field-grid,
  .demo-field-grid--contact,
  .demo-radio-group,
  .demo-radio-group--quad {
    grid-template-columns: 1fr;
  }
  .demo-field--span2 {
    grid-column: auto;
  }
}

/* About — contact & polish */
.about-tagline {
  margin: clamp(12px, 1.8vw, 16px) 0 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signal-deep);
}
html[data-theme="dark"] .about-tagline {
  color: var(--signal-light);
}
.about-intro {
  margin-bottom: clamp(24px, 3vw, 36px);
}
.about-intro-band {
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius-band);
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow: var(--shadow-card);
}
.about-intro-band h2 {
  margin: 0 0 10px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  line-height: 1.25;
}
.about-intro-band > p {
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.58;
  font-size: 0.92rem;
  max-width: 72ch;
}
.about-credential-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.about-credential-list li {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel3) 92%, transparent);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--muted);
}
.about-section-head {
  margin-bottom: clamp(18px, 2.8vw, 28px);
}
.about-advantages {
  margin-bottom: clamp(28px, 4vw, 44px);
}
.about-advantages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.about-advantage-card {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow: var(--shadow-card);
}
.about-advantage-kicker {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--signal-deep);
  margin-bottom: 8px;
}
html[data-theme="dark"] .about-advantage-kicker {
  color: var(--signal-light);
}
.about-advantage-card h3 {
  margin: 0 0 8px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 1rem;
  line-height: 1.3;
}
.about-advantage-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 0.88rem;
}
.about-milestones {
  margin-bottom: clamp(32px, 4.5vw, 52px);
}
.about-milestone-track.shadcn-timeline {
  position: relative;
  display: block;
  max-width: min(780px, 100%);
  margin-inline: auto;
  padding: 8px 0 4px;
}
.shadcn-timeline-phase {
  list-style: none;
  margin: clamp(18px, 2.8vw, 26px) 0 clamp(10px, 1.6vw, 14px);
  padding: 0 0 0 40px;
}
.shadcn-timeline-phase:first-child {
  margin-top: 0;
}
.shadcn-timeline-phase span {
  display: inline-flex;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--signal-deep);
  background: color-mix(in srgb, var(--signal-faint) 65%, var(--panel2));
  border: 1px solid color-mix(in srgb, var(--signal) 20%, var(--line));
}
html[data-theme="dark"] .shadcn-timeline-phase span {
  color: var(--signal-light);
}
.shadcn-timeline-year {
  font-variant-numeric: tabular-nums;
}
.shadcn-timeline-rail {
  position: absolute;
  left: 15px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 85%, transparent);
  overflow: hidden;
}
.shadcn-timeline-rail-fill {
  width: 100%;
  height: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    var(--signal-deep),
    var(--signal),
    var(--signal-light)
  );
  transition: height 0.55s var(--ease-out);
}
.shadcn-timeline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(16px, 2.5vw, 22px);
}
.shadcn-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: clamp(14px, 2vw, 20px);
  align-items: start;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.5s var(--ease-out) var(--tl-delay, 0.08s),
    transform 0.5s var(--ease-out) var(--tl-delay, 0.08s);
}
.shadcn-timeline-item.is-visible {
  opacity: 1;
  transform: none;
}
.shadcn-timeline-marker {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  height: 32px;
}
.shadcn-timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--panel2);
  background: var(--line);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal) 0%, transparent);
  transition:
    background 0.35s ease,
    box-shadow 0.45s var(--ease-out),
    transform 0.45s var(--ease-out);
  transform: scale(0.72);
}
.shadcn-timeline-item.is-visible .shadcn-timeline-dot {
  background: var(--signal);
  border-color: color-mix(in srgb, var(--signal-light) 40%, var(--panel2));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal-faint) 75%, transparent);
  transform: scale(1);
}
.shadcn-timeline-item.is-visible:last-child .shadcn-timeline-dot {
  box-shadow:
    0 0 0 5px color-mix(in srgb, var(--signal) 18%, transparent),
    0 0 0 10px color-mix(in srgb, var(--signal-faint) 55%, transparent);
}
.shadcn-timeline-card {
  padding: clamp(16px, 2.2vw, 20px) clamp(18px, 2.5vw, 22px);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--panel3) 92%, #fff),
    var(--panel2)
  );
  box-shadow: var(--shadow-card);
  transition:
    border-color 0.35s ease,
    transform 0.35s var(--ease-out);
}
.shadcn-timeline-item.is-visible .shadcn-timeline-card {
  border-color: color-mix(in srgb, var(--signal) 22%, var(--line));
}
.shadcn-timeline-year {
  display: inline-block;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: var(--signal-deep);
  margin-bottom: 6px;
}
html[data-theme="dark"] .shadcn-timeline-year {
  color: var(--signal-light);
}
.shadcn-timeline-card h3 {
  margin: 0 0 6px;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
}
.shadcn-timeline-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
}
@media (min-width: 900px) {
  .shadcn-timeline-rail {
    left: 19px;
  }
  .shadcn-timeline-item {
    grid-template-columns: 40px minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .shadcn-timeline-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .shadcn-timeline-rail-fill {
    transition: none;
  }
  .shadcn-timeline-dot {
    transform: none;
  }
}
.about-contact-section {
  margin-top: clamp(12px, 2.5vw, 24px);
  margin-bottom: clamp(8px, 2vw, 16px);
}
.about-contact-band {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid color-mix(in srgb, var(--line) 88%, var(--signal-faint));
  border-radius: var(--radius-band);
  background:
    radial-gradient(
      480px 220px at 100% 0%,
      color-mix(in srgb, var(--signal-faint) 70%, transparent),
      transparent 72%
    ),
    radial-gradient(
      360px 180px at 0% 100%,
      color-mix(in srgb, var(--cap-security-bg) 45%, transparent),
      transparent 68%
    ),
    linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow: var(--shadow-card);
}
.about-contact-band:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background:
    linear-gradient(rgba(23, 29, 34, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 29, 34, 0.025) 1px, transparent 1px);
  background-size: 120px 120px;
}
.about-contact-head {
  position: relative;
  z-index: 1;
  max-width: 52ch;
  margin-bottom: clamp(22px, 3vw, 32px);
}
.about-contact-head .eyebrow {
  margin-bottom: 12px;
}
.about-contact-head h2 {
  margin: 0 0 10px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
}
.about-contact-lead {
  margin: 0;
  font-size: clamp(0.92rem, 1.4vw, 1rem);
  line-height: 1.62;
  color: var(--muted);
  max-width: 46ch;
}
.about-contact-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 16px);
}
.about-contact-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: clamp(16px, 2.2vw, 20px) clamp(16px, 2.4vw, 22px);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--panel3) 94%, #fff);
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 80%, transparent);
  transition:
    border-color 0.22s var(--ease-out),
    transform 0.22s var(--ease-out),
    box-shadow 0.22s var(--ease-out),
    background 0.22s ease;
}
.about-contact-card:hover {
  border-color: color-mix(in srgb, var(--signal) 28%, var(--line));
  background: color-mix(in srgb, var(--signal-faint) 38%, var(--panel3));
  transform: translateY(-2px);
  box-shadow:
    0 12px 32px color-mix(in srgb, var(--signal) 8%, transparent),
    0 1px 0 color-mix(in srgb, #fff 80%, transparent);
}
.about-contact-card:active {
  transform: translateY(0);
}
.about-contact-card:focus-visible {
  outline: 2px solid var(--signal-light);
  outline-offset: 3px;
}
.about-contact-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--signal-deep);
  background: color-mix(in srgb, var(--signal-faint) 85%, #fff);
  border: 1px solid color-mix(in srgb, var(--signal-soft) 55%, var(--line));
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease;
}
.about-contact-card:hover .about-contact-avatar {
  background: color-mix(in srgb, var(--signal) 12%, var(--signal-faint));
  border-color: color-mix(in srgb, var(--signal) 25%, var(--line));
}
.about-contact-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.about-contact-name {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}
.about-contact-email {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--signal-deep);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-theme="dark"] .about-contact-email {
  color: var(--signal-light);
}
.about-contact-arrow {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  color: var(--soft);
  background: transparent;
  transition:
    color 0.22s ease,
    background 0.22s ease,
    transform 0.22s var(--ease-out);
}
.about-contact-card:hover .about-contact-arrow {
  color: var(--signal-deep);
  background: color-mix(in srgb, var(--signal-faint) 70%, transparent);
  transform: translateX(2px);
}
html[data-theme="dark"] .about-contact-band {
  background:
    radial-gradient(
      480px 220px at 100% 0%,
      color-mix(in srgb, var(--signal) 12%, transparent),
      transparent 72%
    ),
    linear-gradient(180deg, var(--panel2), var(--panel));
}
html[data-theme="dark"] .about-contact-card {
  background: color-mix(in srgb, var(--panel3) 92%, transparent);
}
html[data-theme="dark"] .about-contact-card:hover {
  background: color-mix(in srgb, var(--signal) 8%, var(--panel3));
}
@media (max-width: 900px) {
  .about-advantages-grid,
  .shadcn-timeline-list {
    grid-template-columns: 1fr;
  }
  .about-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .about-contact-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .about-stats {
    grid-template-columns: 1fr;
  }
  .about-contact-card {
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    padding: 14px 16px;
  }
  .about-contact-email {
    font-size: 0.78rem;
  }
}

/* Cookie consent */
.cookie-consent {
  position: fixed;
  inset: auto 16px 16px 16px;
  z-index: 9999;
  display: flex;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.32s ease,
    transform 0.32s ease;
}
.cookie-consent.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.cookie-consent-panel {
  width: min(640px, 100%);
  padding: clamp(20px, 3vw, 28px);
  border-radius: 16px;
  background: #111827;
  color: #f9fafb;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}
.cookie-consent-title {
  margin: 0 0 10px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
}
.cookie-consent-text {
  margin: 0 0 18px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #d1d5db;
}
.cookie-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cookie-btn {
  flex: 1 1 auto;
  min-width: 100px;
  padding: 11px 16px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}
.cookie-btn--ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #fff;
}
.cookie-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
}
.cookie-btn--solid {
  background: #fff;
  border: 1px solid #fff;
  color: #111827;
}
.cookie-btn--solid:hover {
  background: #f3f4f6;
}
.cookie-pref {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 4px;
}
.cookie-pref strong {
  display: block;
  font-size: 0.9rem;
  color: #fff;
}
.cookie-pref small {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  color: #9ca3af;
  line-height: 1.45;
}
.cookie-pref input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #fff;
}
@media (max-width: 520px) {
  .cookie-consent {
    inset: auto 10px 10px 10px;
  }
  .cookie-consent-actions {
    flex-direction: column;
  }
  .cookie-btn {
    width: 100%;
  }
}

.about-principles {
  margin-bottom: clamp(24px, 3.5vw, 36px);
}
.about-principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 18px;
}
.about-principle-card {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, var(--panel3), var(--panel2));
}
.about-principle-card strong {
  display: block;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 0.95rem;
  margin-bottom: 6px;
}
.about-principle-card span {
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.5;
}
@media (max-width: 768px) {
  .about-contact-grid,
  .about-principles-grid {
    grid-template-columns: 1fr;
  }
}

/* Premium enterprise polish: Apple restraint + Google Labs clarity */
html[data-theme="light"] {
  --bg: #f7f3ed;
  --panel: #fffdf9;
  --panel2: #fbf6ef;
  --text: #171d22;
  --muted: #46515a;
  --soft: #6b7780;
  --line: rgba(23, 29, 34, 0.09);
  --shadow-card: 0 18px 48px rgba(23, 29, 34, 0.08);
}

html[data-theme="light"] body {
  background-image:
    radial-gradient(
      900px 520px at 72% 0%,
      color-mix(in srgb, var(--signal-faint) 58%, transparent),
      transparent 72%
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent 420px);
}

.nav {
  backdrop-filter: blur(24px) saturate(1.25);
}

.brand span,
.trust-bar-label,
.platform-framework-slogan,
.resources-stat span,
.footer-dir-heading {
  letter-spacing: 0.13em;
}

.btn.primary,
html[data-theme="light"] .btn.primary {
  background: linear-gradient(
    135deg,
    var(--signal-deep),
    var(--signal),
    var(--signal-mid)
  );
  color: #fff;
  border: 0;
  box-shadow:
    0 10px 28px color-mix(in srgb, var(--signal) 22%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Rebuild-only mobile header guard: keep the brand, menu, sign-in, and demo CTA
   readable without squeezing the logo off-screen. */
@media (max-width: 640px) {
  .navin {
    grid-template-columns: minmax(0, 1fr) 40px auto;
    gap: 6px;
  }

  .brand span {
    display: none;
  }

  .hero-float-chips {
    display: none;
  }

  .brand-mark {
    width: 32px;
    height: 32px;
  }

  .brand b {
    font-size: 15px;
  }

  .actions [data-theme-toggle] {
    display: none;
  }

  .actions {
    gap: 4px;
  }

  .actions .btn,
  .actions button,
  .actions .btn-signin,
  .navin .actions .btn.primary {
    min-width: 0;
    padding-inline: 10px;
  }
}

@media (max-width: 400px) {
  .actions [data-lang-toggle] {
    display: none;
  }

  .actions .btn,
  .actions button,
  .actions .btn-signin,
  .navin .actions .btn.primary {
    padding-inline: 8px;
  }
}

.btn.primary:hover,
html[data-theme="light"] .btn.primary:hover {
  background: linear-gradient(
    135deg,
    var(--signal-deep),
    var(--signal-mid),
    var(--signal-light)
  );
  box-shadow: 0 14px 32px color-mix(in srgb, var(--signal) 28%, transparent);
}

/* —— Button interaction system (marketing site) —— */
.btn,
a.btn,
button.btn {
  transition:
    background 0.28s var(--ease-out),
    border-color 0.22s ease,
    box-shadow 0.28s ease,
    transform 0.22s var(--ease-out),
    color 0.2s ease;
}

html[data-theme="light"] .btn.primary:hover,
.btn.primary:hover {
  transform: translateY(-1px);
}

.btn.primary:active,
html[data-theme="light"] .btn.primary:active {
  transform: translateY(0);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--signal) 18%, transparent);
}

html[data-theme="light"] .btn:not(.primary):not(.labs-btn-soft):not(.cookie-btn):active,
html[data-theme="light"] .zd-hero--immersive .btn:not(.primary):active {
  transform: translateY(0);
}

html[data-theme="light"] .zd-hero--immersive .zd-hero-actions .btn:not(.primary) {
  background: var(--labs-taupe-light);
  color: var(--brand-ink);
  border: 0;
  box-shadow: none;
}

html[data-theme="light"] .zd-hero--immersive .zd-hero-actions .btn:not(.primary):hover {
  background: var(--labs-taupe);
  color: var(--brand-ink);
  transform: none;
  box-shadow: none;
}

/* CTA rows inside parallax pass-through parents (pointer-events: none) */
.is-interaction-pass-through > .zd-hero-actions,
.is-interaction-pass-through > .cta,
.zd-hero-copy--center .zd-hero-actions {
  position: relative;
  z-index: 11;
  pointer-events: auto;
}

.is-interaction-pass-through > .zd-hero-actions .btn,
.is-interaction-pass-through > .cta .btn,
.zd-hero-copy--center .zd-hero-actions .btn {
  pointer-events: auto;
  cursor: pointer;
}

html[data-theme="light"] .labs-icon-btn {
  border: 0;
  background: var(--labs-taupe-light);
  color: var(--brand-ink);
}

html[data-theme="light"] .labs-icon-btn:hover {
  background: var(--labs-taupe);
  transform: translateY(-2px);
}

html[data-theme="light"] .labs-icon-btn:active {
  transform: translateY(0);
}

.cookie-btn:active {
  transform: translateY(0);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

.zd-hero,
.platform-framework-band,
.arch-flow-band,
.research-proof-band,
.about-hero-band,
.resources-hero,
.demo-book-shell {
  box-shadow: 0 24px 70px rgba(23, 29, 34, 0.08);
}

.zd-hero:before,
.research-proof-band:before,
.about-hero-band:before,
.resources-hero:before {
  opacity: 0.58;
}

.hero-category-def,
.lead,
.demo-book-lead {
  color: color-mix(in srgb, var(--muted) 88%, var(--text));
}

.headline-accent {
  background: linear-gradient(
    135deg,
    var(--signal-deep),
    var(--signal),
    color-mix(in srgb, var(--cap-security) 42%, var(--signal-light))
  );
  -webkit-background-clip: text;
  background-clip: text;
}

.promo-card,
.problem-card,
.product-entry-card,
.resources-paper-card,
.about-advantage-card,
.about-team-card {
  transition:
    transform 0.22s var(--ease-out),
    box-shadow 0.22s var(--ease-out),
    border-color 0.22s ease;
}

.promo-card:hover,
.problem-card:hover,
.product-entry-card:hover,
.resources-paper-card:hover,
.about-advantage-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 52px rgba(23, 29, 34, 0.1);
}

.resources-stat b,
.about-stat b,
.tech-stat b,
.stat-word,
[data-flip],
[data-flip-text],
.metric b,
.posture-card-value,
.demo-guide-metric strong {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.045em;
}

/* ── Demo guide card (hero → Governance Overview) ── */
.demo-guide-card {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(165deg, #fffdf9 0%, #eef8f6 48%, #f5f0ff 100%);
  border: 1px solid rgba(42, 101, 97, 0.16);
  box-shadow:
    0 4px 24px rgba(17, 24, 39, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
  transition:
    border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  will-change: transform;
}
.demo-guide-card:hover,
.demo-guide-card:focus-visible {
  border-color: rgba(42, 101, 97, 0.32);
  box-shadow:
    0 20px 48px rgba(42, 101, 97, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
}
.demo-guide-card:focus-visible {
  outline: 2px solid rgba(42, 101, 97, 0.45);
  outline-offset: 3px;
}
.demo-guide-spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: radial-gradient(
    420px circle at var(--dg-x, 50%) var(--dg-y, 50%),
    rgba(126, 184, 178, 0.18),
    transparent 42%
  );
  z-index: 0;
}
.demo-guide-border {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(126, 184, 178, 0.5),
    rgba(110, 91, 216, 0.35),
    rgba(255, 113, 130, 0.25),
    rgba(126, 184, 178, 0.5)
  );
  background-size: 300% 300%;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.55;
  animation: demoGuideBorderShift 6s ease infinite;
  z-index: 1;
}
.demo-guide-card:hover .demo-guide-border {
  opacity: 0.85;
}
@keyframes demoGuideBorderShift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
.demo-guide-inner {
  position: relative;
  z-index: 2;
  padding: clamp(16px, 2.2vw, 22px);
}
.demo-guide-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.demo-guide-head .eyebrow {
  margin-bottom: 6px;
}
.demo-guide-title {
  margin: 0;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}
.demo-guide-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1e4a47;
  background: rgba(42, 101, 97, 0.1);
  border: 1px solid rgba(42, 101, 97, 0.18);
}
.demo-guide-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.55);
  animation: demoGuidePulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes demoGuidePulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.65;
    transform: scale(0.88);
  }
}
.demo-guide-desc {
  margin: 0 0 14px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--muted);
}
.demo-guide-preview {
  position: relative;
  padding: 12px;
  padding-top: 34px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(31, 41, 55, 0.07);
  backdrop-filter: blur(8px);
}
.module-sim-tag--preview {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  font-size: 9px;
  padding: 3px 8px;
  letter-spacing: 0.07em;
}
.demo-guide-cross-map-stage .module-sim-tag--preview {
  top: 10px;
  right: 10px;
}
.demo-guide-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
  margin-bottom: 10px;
}
.demo-guide-metric {
  position: relative;
  padding: 9px 10px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(31, 41, 55, 0.07);
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
}
.demo-guide-card.is-demo-guide-visible .demo-guide-metric--stagger {
  animation: demoGuideStaggerIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(0.08s + var(--dg-i, 0) * 0.07s);
}
@keyframes demoGuideStaggerIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.demo-guide-metric-label {
  display: block;
  font-size: 9px;
  font-weight: 600;
  color: var(--soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}
.demo-guide-metric strong {
  display: block;
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  font-weight: 700;
  color: var(--brand-teal-deep);
  line-height: 1.1;
}
.demo-guide-spark {
  display: block;
  margin-top: 7px;
  height: 12px;
  border-radius: 2px;
}
.demo-guide-spark--rose {
  background: repeating-linear-gradient(
    90deg,
    #ffc9c9 0 14%,
    #ff7182 14% 28%,
    #ffc9c9 28% 42%,
    #ff9aaa 42% 58%,
    #ff7182 58% 72%,
    #ffc9c9 72% 86%,
    #ff9aaa 86% 100%
  );
  background-size: 200% 100%;
  animation: demoGuideSpark 2.4s linear infinite;
  border-radius: 2px;
}
.demo-guide-spark--teal {
  background: repeating-linear-gradient(
    90deg,
    #b8e0dc 0 16%,
    #2a6561 16% 32%,
    #7eb8b2 32% 50%,
    #2a6561 50% 66%,
    #b8e0dc 66% 82%,
    #7eb8b2 82% 100%
  );
  background-size: 200% 100%;
  animation: demoGuideSpark 2.8s linear infinite reverse;
  border-radius: 2px;
}
@keyframes demoGuideSpark {
  to {
    background-position: 200% 0;
  }
}
.demo-guide-ring {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid rgba(42, 101, 97, 0.14);
  border-top-color: #2a6561;
  animation: demoGuideSpin 3s linear infinite;
}
@keyframes demoGuideSpin {
  to {
    transform: rotate(360deg);
  }
}
.demo-guide-asi-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(31, 41, 55, 0.03);
  border: 1px solid rgba(31, 41, 55, 0.05);
  opacity: 0;
  transform: translateY(8px);
}
.demo-guide-card.is-demo-guide-visible
  .demo-guide-asi-row.demo-guide-metric--stagger {
  animation: demoGuideStaggerIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.4s;
}
.demo-guide-asi-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c, #2a6561);
  box-shadow: 0 0 6px color-mix(in srgb, var(--c) 45%, transparent);
  flex-shrink: 0;
}
.demo-guide-asi-dot.is-pulse {
  animation: demoGuideDotPulse 1.8s ease-in-out infinite;
}
@keyframes demoGuideDotPulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 6px color-mix(in srgb, var(--c) 45%, transparent);
  }
  50% {
    transform: scale(1.25);
    box-shadow: 0 0 12px color-mix(in srgb, var(--c) 65%, transparent);
  }
}
.demo-guide-asi-label {
  margin-left: auto;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--soft);
}
.demo-guide-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(
    135deg,
    var(--brand-teal-deep, #1e4a47),
    var(--brand-teal, #2a6561)
  );
  box-shadow: 0 4px 14px rgba(42, 101, 97, 0.28);
  transition:
    gap 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s ease,
    transform 0.3s ease;
}
.demo-guide-card:hover .demo-guide-cta {
  gap: 12px;
  box-shadow: 0 8px 22px rgba(42, 101, 97, 0.35);
}
.demo-guide-arrow {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.demo-guide-card:hover .demo-guide-arrow {
  transform: translateX(3px);
}
.products-hero-band .demo-guide-card {
  align-self: start;
}
html[data-theme="dark"] .demo-guide-card {
  background: linear-gradient(
    165deg,
    var(--panel2),
    color-mix(in srgb, var(--brand-teal) 8%, var(--panel))
  );
  border-color: var(--line);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}
html[data-theme="dark"] .demo-guide-preview {
  background: rgba(0, 0, 0, 0.2);
  border-color: var(--line);
}
html[data-theme="dark"] .demo-guide-metric {
  background: var(--panel3);
  border-color: var(--line);
}
html[data-theme="dark"] .demo-guide-metric strong {
  color: var(--signal-light);
}
html[data-theme="dark"] .demo-guide-desc {
  color: var(--muted);
}
html[data-theme="dark"] .demo-guide-live {
  color: var(--signal-light);
  background: rgba(126, 184, 178, 0.12);
  border-color: rgba(126, 184, 178, 0.22);
}

/* Policy demo guide variant */
.demo-guide-card--policy {
  background: linear-gradient(165deg, #fffdf9 0%, #f3f0ff 52%, #eef8f6 100%);
}
.demo-guide-policy-models {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}
.demo-guide-policy-model {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 9px;
  border-radius: 10px;
  border: 1px solid rgba(31, 41, 55, 0.07);
  background: #fff;
  opacity: 0;
  transform: translateY(8px);
}
.demo-guide-card.is-demo-guide-visible
  .demo-guide-policy-model.demo-guide-metric--stagger {
  animation: demoGuideStaggerIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(0.06s + var(--dg-i, 0) * 0.07s);
}
.demo-guide-policy-model--compliance {
  border-color: rgba(42, 101, 97, 0.18);
  background: linear-gradient(180deg, #fff, #f0faf8);
}
.demo-guide-policy-model--privacy {
  border-color: rgba(110, 91, 216, 0.16);
  background: linear-gradient(180deg, #fff, #f6f3ff);
}
.demo-guide-policy-model--safety {
  border-color: rgba(199, 110, 18, 0.16);
  background: linear-gradient(180deg, #fff, #fff8f0);
}
.demo-guide-policy-model-icon {
  font-size: 11px;
  line-height: 1;
  color: var(--brand-teal-deep);
  opacity: 0.75;
}
.demo-guide-policy-model-name {
  font-size: 10px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}
.demo-guide-policy-model-ver {
  font-size: 9px;
  font-weight: 700;
  color: var(--soft);
  font-variant-numeric: tabular-nums;
}
.demo-guide-policy-priority {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  opacity: 0;
  transform: translateY(8px);
}
.demo-guide-card.is-demo-guide-visible
  .demo-guide-policy-priority.demo-guide-metric--stagger {
  animation: demoGuideStaggerIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.32s;
}
.demo-guide-priority-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  border: 1px solid transparent;
}
.demo-guide-priority-chip > span:first-child {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 999px;
}
.demo-guide-priority-chip--p0 {
  background: rgba(255, 113, 130, 0.08);
  border-color: rgba(255, 113, 130, 0.2);
  color: #b4234a;
}
.demo-guide-priority-chip--p0 > span:first-child {
  background: #ff7182;
  color: #fff;
}
.demo-guide-priority-chip--p1 {
  background: rgba(110, 91, 216, 0.08);
  border-color: rgba(110, 91, 216, 0.18);
  color: #4c3d9e;
}
.demo-guide-priority-chip--p1 > span:first-child {
  background: #6e5bd8;
  color: #fff;
}
.demo-guide-priority-chip--p2 {
  background: rgba(199, 110, 18, 0.08);
  border-color: rgba(199, 110, 18, 0.18);
  color: #9a5412;
}
.demo-guide-priority-chip--p2 > span:first-child {
  background: #c76e12;
  color: #fff;
}
.demo-guide-priority-chip--p3 {
  background: rgba(42, 101, 97, 0.08);
  border-color: rgba(42, 101, 97, 0.16);
  color: #1e4a47;
}
.demo-guide-priority-chip--p3 > span:first-child {
  background: #2a6561;
  color: #fff;
}

/* Cross-border demo guide — top copy + map stage + CTA */
.demo-guide-card--cross {
  display: flex;
  flex-direction: column;
  min-height: clamp(420px, 48vw, 480px);
  background: linear-gradient(180deg, #fffdf9, #f8f4ef);
  overflow: hidden;
  padding: 0;
}
.demo-guide-cross-top {
  position: relative;
  z-index: 2;
  padding: clamp(14px, 2vw, 18px) clamp(14px, 2vw, 18px) 10px;
}
.demo-guide-card--cross .demo-guide-head {
  margin-bottom: 4px;
}
.demo-guide-desc--compact {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.45;
  max-width: 38ch;
}
.demo-guide-cross-map-stage {
  position: relative;
  flex: 1;
  min-height: clamp(230px, 30vw, 270px);
  margin: 0 clamp(12px, 1.6vw, 16px);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(42, 101, 97, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 12px 32px rgba(42, 101, 97, 0.12);
  background: linear-gradient(165deg, #f0ebe3, #e5ddd0);
}
.demo-guide-card--cross .demo-guide-map-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  height: 100% !important;
  min-height: 0;
  border: none !important;
  border-radius: 0;
  background: linear-gradient(165deg, #f0ebe3 0%, #e5ddd0 100%) !important;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}
.demo-guide-card--cross:hover .demo-guide-map-bg {
  transform: scale(1.04);
}
.demo-guide-card--cross .demo-guide-map-bg .cross-map-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.demo-guide-card--cross .cross-map-land {
  fill: #bfb5a6;
  opacity: 0.94;
}
.demo-guide-card--cross .cross-map-graticule {
  stroke: rgba(31, 41, 55, 0.1);
  stroke-width: 0.75;
}
.demo-guide-card--cross .cross-map-flow {
  stroke-width: 2.85;
  opacity: 0.95;
  filter: drop-shadow(0 1px 3px rgba(30, 74, 71, 0.2));
}
.demo-guide-card--cross .cross-map-flow--teal {
  stroke: #1a5c57;
}
.demo-guide-card--cross .cross-map-flow--lavender {
  stroke: #5a48c8;
}
.demo-guide-card--cross .cross-map-flow--amber {
  stroke: #b85f0a;
}
.demo-guide-card--cross .cross-map-node {
  fill: #1e4a47;
  opacity: 0.96;
}
.demo-guide-card--cross .cross-map-node--hub {
  fill: #5b4bc4;
}
.demo-guide-card--cross .cross-map-pulse {
  opacity: 0.5;
}
.demo-guide-map-caption {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1e4a47;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(42, 101, 97, 0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.demo-guide-map-veil {
  display: none;
}
.demo-guide-inner--float {
  display: none;
}
.demo-guide-cross-stats {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 0;
  opacity: 0;
  transform: translateY(6px);
}
.demo-guide-card.is-demo-guide-visible
  .demo-guide-cross-stats.demo-guide-metric--stagger {
  animation: demoGuideStaggerIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.2s;
}
.demo-guide-cross-stat {
  padding: 7px 8px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(42, 101, 97, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: center;
  box-shadow: 0 4px 16px rgba(17, 24, 39, 0.08);
}
.demo-guide-cross-stat strong {
  display: block;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(0.9rem, 1.5vw, 1.05rem);
  font-weight: 700;
  color: var(--brand-teal-deep);
  line-height: 1.1;
  margin-bottom: 2px;
}
.demo-guide-cross-stat span {
  display: block;
  font-size: 8px;
  color: var(--soft);
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.demo-guide-cross-foot {
  position: relative;
  z-index: 2;
  padding: 12px clamp(14px, 2vw, 18px) clamp(14px, 2vw, 18px);
}
.demo-guide-card--cross .demo-guide-cta {
  margin: 0;
  width: 100%;
  justify-content: center;
}
.split-hero .demo-guide-card {
  align-self: start;
}
html[data-theme="dark"] .demo-guide-card--policy {
  background: linear-gradient(
    165deg,
    var(--panel2),
    color-mix(in srgb, #6e5bd8 10%, var(--panel))
  );
}
html[data-theme="dark"] .demo-guide-policy-model {
  background: var(--panel3);
  border-color: var(--line);
}
html[data-theme="dark"] .demo-guide-card--cross {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
}
html[data-theme="dark"] .demo-guide-cross-map-stage {
  background: linear-gradient(
    165deg,
    var(--panel3),
    color-mix(in srgb, var(--brand-teal) 6%, var(--panel))
  );
  border-color: var(--line);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 32px rgba(0, 0, 0, 0.22);
}
html[data-theme="dark"] .demo-guide-card--cross .demo-guide-map-bg {
  background: linear-gradient(165deg, var(--panel3), var(--panel)) !important;
}
html[data-theme="dark"] .demo-guide-map-caption {
  background: rgba(0, 0, 0, 0.45);
  border-color: var(--line);
  color: var(--signal-light);
}
html[data-theme="dark"] .demo-guide-cross-stat {
  background: rgba(0, 0, 0, 0.48);
  border-color: var(--line);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}
html[data-theme="dark"] .demo-guide-cross-stat strong {
  color: var(--signal-light);
}

@media (prefers-reduced-motion: reduce) {
  .demo-guide-border,
  .demo-guide-live i,
  .demo-guide-spark--rose,
  .demo-guide-spark--teal,
  .demo-guide-ring,
  .demo-guide-asi-dot.is-pulse {
    animation: none;
  }
  .demo-guide-metric,
  .demo-guide-asi-row,
  .demo-guide-policy-model,
  .demo-guide-policy-priority,
  .demo-guide-cross-stats {
    opacity: 1;
    transform: none;
  }
  .demo-guide-card:hover .demo-guide-arrow,
  .demo-guide-card--cross:hover .demo-guide-map-bg,
  .research-proof-papers-link:hover,
  .research-proof-papers-link:hover .research-proof-papers-icon,
  .research-proof-papers-link:hover .research-proof-papers-arrow {
    transform: none;
  }
  .research-proof-papers-link::after {
    transform: scaleX(1);
    opacity: 0.55;
  }
}
@media (max-width: 980px) {
  .demo-guide-metrics {
    grid-template-columns: 1fr 1fr;
  }
  .demo-guide-policy-models {
    grid-template-columns: 1fr;
  }
  .demo-guide-policy-priority {
    grid-template-columns: repeat(2, 1fr);
  }
  .demo-guide-cross-map-stage {
    min-height: 210px;
  }
}

/* Cross-border — dynamic regulatory mapping panel */
.cross-reg-mapping-section {
  padding-block: var(--space-9, 60px);
}
.reg-mapping-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-band);
  overflow: hidden;
  background:
    radial-gradient(
      520px 240px at 0% 0%,
      color-mix(in srgb, var(--signal) 10%, transparent),
      transparent 70%
    ),
    radial-gradient(
      480px 220px at 100% 0%,
      color-mix(in srgb, var(--cap-compliance) 12%, transparent),
      transparent 72%
    ),
    linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow: var(--shadow-card);
}
.reg-mapping-panel__stats {
  padding: clamp(20px, 3vw, 28px) clamp(18px, 2.5vw, 26px)
    clamp(16px, 2.2vw, 22px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  background: color-mix(in srgb, var(--panel3, var(--panel2)) 55%, transparent);
}
.reg-mapping-stats {
  margin-top: 0 !important;
  gap: clamp(10px, 1.5vw, 14px);
}
.reg-mapping-stats .tech-stat {
  border-color: color-mix(in srgb, var(--signal) 14%, var(--line));
  background: color-mix(in srgb, var(--panel) 88%, transparent);
}
.reg-mapping-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: clamp(14px, 2vw, 18px) 0 0;
}
.reg-mapping-panel__body {
  padding: clamp(18px, 2.5vw, 26px);
}
.reg-mapping-panel__matrix-title {
  margin: 0 0 14px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signal-light);
}
html[data-theme="light"] .reg-mapping-panel__matrix-title {
  color: var(--signal);
}
.reg-mapping-matrix {
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  border-radius: calc(var(--radius-band) - 6px);
  overflow: hidden;
  overflow-x: auto;
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  -webkit-overflow-scrolling: touch;
}
.reg-map-row {
  display: grid;
  grid-template-columns: minmax(112px, 1.12fr) repeat(4, minmax(108px, 1fr));
  min-width: min(100%, 640px);
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}
.reg-map-row:first-child {
  border-top: 0;
}
.reg-map-cell {
  padding: 15px 13px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--muted);
  border-left: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
}
.reg-map-cell:first-child {
  border-left: 0;
}
.reg-map-row--head .reg-map-cell {
  color: var(--text);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--signal-faint) 42%, var(--panel2));
}
.reg-map-cell--corner {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.8rem;
}
.reg-map-cell--label {
  color: var(--text);
  font-weight: 700;
  font-size: 0.86rem;
  background: color-mix(in srgb, var(--panel2) 92%, transparent);
}
.reg-map-cell--emphasis {
  color: var(--signal-light);
  font-weight: 700;
}
.reg-map-cell--span {
  grid-column: 2 / -1;
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.58;
  background: color-mix(in srgb, var(--signal-faint) 32%, transparent);
}
.reg-map-cell--span strong {
  color: var(--signal-light);
  font-weight: 700;
}
.reg-mapping-footnote {
  margin: 12px 2px 0;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 72ch;
}
html[data-theme="light"] .reg-mapping-panel {
  background:
    radial-gradient(
      520px 240px at 0% 0%,
      rgba(42, 101, 97, 0.07),
      transparent 70%
    ),
    radial-gradient(
      480px 220px at 100% 0%,
      rgba(110, 91, 216, 0.06),
      transparent 72%
    ),
    linear-gradient(180deg, #fffdf8, #f6f3ee);
  border-color: rgba(31, 41, 55, 0.08);
  box-shadow: 0 20px 56px rgba(17, 24, 39, 0.07);
}
html[data-theme="light"] .reg-mapping-panel__stats {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.72),
    rgba(248, 244, 238, 0.5)
  );
}
html[data-theme="light"] .reg-mapping-stats .tech-stat {
  background: linear-gradient(180deg, #fff, rgba(255, 253, 248, 0.92));
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.05);
}
html[data-theme="light"] .reg-mapping-matrix {
  background: #fff;
  border-color: rgba(31, 41, 55, 0.07);
}
html[data-theme="light"] .reg-map-row--head .reg-map-cell {
  background: linear-gradient(
    135deg,
    rgba(42, 101, 97, 0.09),
    rgba(126, 184, 178, 0.05)
  );
}
html[data-theme="light"] .reg-map-cell--emphasis {
  color: var(--signal);
}
html[data-theme="light"] .reg-map-cell--span strong {
  color: var(--signal);
}
html[data-theme="light"] .reg-map-cell--span {
  background: color-mix(in srgb, var(--signal-faint) 50%, #fff);
}
html[data-theme="dark"] .reg-map-cell--span strong {
  color: var(--signal-light);
}
@media (max-width: 980px) {
  .reg-map-row {
    grid-template-columns: minmax(96px, 0.95fr) repeat(4, minmax(92px, 1fr));
  }
  .reg-map-cell {
    padding: 12px 10px;
    font-size: 0.82rem;
  }
  .reg-mapping-panel__stats,
  .reg-mapping-panel__body {
    padding: 16px;
  }
}

/* Homepage hero — immersive (Google Labs × Brand Token atmosphere) */
.hero-focus--immersive {
  position: relative;
  overflow: clip;
  padding-bottom: 0;
  background: transparent;
}
html[data-theme="light"] .hero-focus--immersive {
  background: transparent;
}
html[data-theme="dark"] .hero-focus--immersive {
  background: linear-gradient(180deg, #101416 0%, #0b0c0d 100%);
}
html[data-theme="light"] .hero-focus--immersive.is-hero-atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: calc(0.28 + (var(--section-breath, 0.5) - 0.5) * 0.18);
  background:
    radial-gradient(
      ellipse 72% 56% at 18% 22%,
      color-mix(in srgb, var(--cap-security) 10%, transparent),
      transparent 68%
    ),
    radial-gradient(
      ellipse 68% 52% at 84% 18%,
      color-mix(in srgb, var(--signal-light) 12%, transparent),
      transparent 70%
    ),
    radial-gradient(
      ellipse 64% 48% at 50% 88%,
      color-mix(in srgb, var(--cap-compliance) 8%, transparent),
      transparent 72%
    );
}
.hero-focus--immersive.is-hero-atmosphere .page-ambient {
  opacity: calc(0.62 + (var(--section-breath, 0.5) - 0.5) * 0.2);
  transition: opacity 0.5s ease;
}
.hero-focus--immersive .page-ambient {
  opacity: 0.68;
  transition: transform 0.4s var(--ease-out), opacity 0.5s ease;
  filter: blur(1px);
}
.hero-focus--immersive .page-ambient-a {
  width: min(40vw, 380px);
  height: min(36vw, 340px);
  left: -6%;
  top: 14%;
}
.hero-focus--immersive .page-ambient-b {
  width: min(32vw, 300px);
  height: min(28vw, 260px);
  right: -4%;
  top: 6%;
}
.hero-focus--immersive .page-ambient-c {
  width: min(36vw, 320px);
  height: min(30vw, 280px);
  left: 38%;
  bottom: -8%;
  top: auto;
}
html[data-theme="light"] .hero-focus--immersive .page-ambient-a {
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--cap-security) 22%, transparent),
    color-mix(in srgb, var(--cap-security-bg) 12%, transparent) 38%,
    transparent 68%
  );
}
html[data-theme="light"] .hero-focus--immersive .page-ambient-b {
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--signal-light) 26%, transparent),
    color-mix(in srgb, var(--cap-privacy-bg) 14%, transparent) 40%,
    transparent 70%
  );
}
html[data-theme="light"] .hero-focus--immersive .page-ambient-c {
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--cap-compliance) 18%, transparent),
    color-mix(in srgb, var(--cap-compliance-bg) 16%, transparent) 42%,
    transparent 68%
  );
}
.zd-hero--immersive {
  --hero-breath: 0.5;
  --hero-breath-alt: 0.5;
  --hero-interact: 0;
  --labs-glow-mint: var(--signal-light);
  --labs-glow-lavender: var(--cap-security);
  --labs-glow-amber: var(--cap-compliance);
  --labs-glow-privacy: var(--signal);
  --labs-glow-highlight: var(--cap-highlight);
  --labs-glow-pink: var(--labs-pink-blob);
  --hero-risk-accent: #e85d4a;
  --hero-risk-text: #8f3428;
  --hero-mx: 50%;
  --hero-my: 50%;
  --mesh-x: 50%;
  --mesh-y: 50%;
  --aurora-x: 50%;
  --aurora-y: 50%;
  --aurora-bx: 72%;
  --aurora-by: 38%;
  --aurora-cx: 22%;
  --aurora-cy: 70%;
  display: block !important;
  grid-template-columns: 1fr !important;
  min-height: clamp(500px, 78vh, 700px) !important;
  margin-top: 0 !important;
  overflow: hidden;
  border: 1px solid var(--line) !important;
  transition:
    box-shadow 0.55s ease,
    border-color 0.55s ease;
}
.zd-hero--immersive:before {
  content: none !important;
  display: none !important;
}
.hero-mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: calc(0.58 + (var(--hero-breath) - 0.5) * 0.12);
  background:
    radial-gradient(
      580px 420px at var(--mesh-x) var(--mesh-y),
      color-mix(
        in srgb,
        var(--signal-light) calc(22% + var(--hero-interact) * 14%),
        transparent
      ),
      transparent 64%
    ),
    radial-gradient(
      500px 360px at calc(100% - var(--mesh-x)) calc(var(--mesh-y) + 4%),
      color-mix(
        in srgb,
        var(--cap-security) calc(14% + var(--hero-breath-alt) * 10%),
        transparent
      ),
      transparent 68%
    ),
    radial-gradient(
      440px 320px at var(--mesh-x) calc(100% - var(--mesh-y)),
      color-mix(in srgb, var(--signal) 12%, transparent),
      transparent 70%
    ),
    radial-gradient(
      380px 280px at calc(var(--mesh-x) * 0.45 + 26%)
        calc(var(--mesh-y) * 0.35 + 16%),
      color-mix(
        in srgb,
        var(--cap-compliance) calc(8% + var(--hero-breath) * 8%),
        transparent
      ),
      transparent 72%
    ),
    radial-gradient(
      320px 240px at calc(100% - var(--mesh-x) * 0.6) 18%,
      color-mix(in srgb, var(--labs-pink-blob) 7%, transparent),
      transparent 74%
    );
  transition: opacity 0.45s ease;
}
.hero-breath-core {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(76%, 560px);
  height: min(62%, 440px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(
      ellipse 68% 58% at 50% 48%,
      color-mix(
        in srgb,
        var(--signal-faint) calc(28% + var(--hero-breath) * 32%),
        transparent
      ),
      transparent 72%
    ),
    radial-gradient(
      ellipse 52% 46% at 58% 42%,
      color-mix(
        in srgb,
        var(--cap-security-bg) calc(18% + var(--hero-interact) * 22%),
        transparent
      ),
      transparent 70%
    ),
    radial-gradient(
      ellipse 44% 40% at 38% 58%,
      color-mix(
        in srgb,
        var(--cap-compliance-bg) calc(12% + var(--hero-breath-alt) * 14%),
        transparent
      ),
      transparent 68%
    );
  filter: blur(30px);
  opacity: calc(0.3 + (var(--hero-breath) - 0.5) * 0.2);
  will-change: transform, opacity;
}
.hero-color-wash {
  position: absolute;
  inset: -14%;
  z-index: 0;
  pointer-events: none;
  opacity: calc(0.07 + var(--hero-breath) * 0.06 + var(--hero-interact) * 0.08);
  background: conic-gradient(
    from 0deg at 50% 48%,
    color-mix(in srgb, var(--signal-light) 24%, transparent),
    color-mix(in srgb, var(--cap-security) 22%, transparent),
    color-mix(in srgb, var(--cap-compliance) 16%, transparent),
    color-mix(in srgb, var(--labs-pink-blob) 14%, transparent),
    color-mix(in srgb, var(--cap-highlight) 12%, transparent),
    color-mix(in srgb, var(--signal-light) 24%, transparent)
  );
  filter: blur(36px);
  transform-origin: 50% 48%;
  transition: opacity 0.5s ease;
  contain: strict;
  animation: heroWashRotate 88s linear infinite;
}
.zd-hero--immersive.is-hero-active .hero-color-wash {
  animation-duration: 64s;
}
.zd-hero--immersive.is-hero-neutralize .hero-breath-core {
  opacity: 0.72;
  background:
    radial-gradient(
      ellipse 70% 60% at 50% 48%,
      color-mix(in srgb, var(--signal-light) 42%, transparent),
      transparent 72%
    ),
    radial-gradient(
      ellipse 50% 44% at 50% 50%,
      color-mix(in srgb, var(--cap-privacy-bg) 28%, transparent),
      transparent 68%
    );
  transition: opacity 0.28s ease, background 0.35s ease;
}
.zd-hero--immersive.is-hero-neutralize {
  border-color: color-mix(in srgb, var(--signal) 28%, var(--line)) !important;
  box-shadow:
    var(--shadow-md),
    0 0 48px color-mix(in srgb, var(--signal-light) 22%, transparent) !important;
}
@keyframes heroWashRotate {
  to {
    transform: rotate(360deg);
  }
}
.hero-aurora {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(30px);
  contain: strict;
  will-change: opacity, transform;
}
.hero-aurora-a {
  width: min(58vw, 640px);
  height: min(50vw, 520px);
  left: var(--aurora-x, 50%);
  top: var(--aurora-y, 50%);
  translate: -50% -50%;
  opacity: calc(0.38 + var(--hero-breath) * 0.24);
  scale: calc(1 + (var(--hero-breath) - 0.5) * 0.07);
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--signal-light) 46%, transparent) 0%,
    color-mix(in srgb, var(--cap-privacy-bg) 22%, transparent) 36%,
    color-mix(in srgb, var(--signal) 12%, transparent) 52%,
    transparent 72%
  );
}
.hero-aurora-b {
  width: min(52vw, 560px);
  height: min(44vw, 460px);
  left: var(--aurora-bx, 72%);
  top: var(--aurora-by, 38%);
  translate: -50% -50%;
  opacity: calc(0.34 + var(--hero-breath-alt) * 0.26);
  scale: calc(1 + (var(--hero-breath-alt) - 0.5) * 0.06);
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--cap-security) 38%, transparent) 0%,
    color-mix(in srgb, var(--cap-security-bg) 20%, transparent) 38%,
    transparent 72%
  );
}
.hero-aurora-c {
  width: min(42vw, 400px);
  height: min(36vw, 340px);
  left: var(--aurora-cx, 22%);
  top: var(--aurora-cy, 70%);
  translate: -50% -50%;
  opacity: calc(0.34 + var(--hero-breath-alt) * 0.26);
  scale: calc(1 + (var(--hero-breath) - 0.5) * 0.05);
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--cap-compliance) 30%, transparent) 0%,
    color-mix(in srgb, var(--cap-compliance-bg) 18%, transparent) 40%,
    color-mix(in srgb, var(--amber) 8%, transparent) 55%,
    transparent 74%
  );
}
.zd-hero--immersive.is-hero-active .hero-aurora-a {
  opacity: calc(0.52 + var(--hero-breath) * 0.34 + var(--hero-interact) * 0.12);
}
.zd-hero--immersive.is-hero-active .hero-aurora-b {
  opacity: calc(0.48 + var(--hero-breath-alt) * 0.36 + var(--hero-interact) * 0.1);
}
.zd-hero--immersive.is-hero-active .hero-aurora-c {
  opacity: calc(0.42 + var(--hero-breath) * 0.28 + var(--hero-interact) * 0.08);
}
.zd-hero--immersive .hero-blob {
  opacity: calc(0.4 + var(--hero-breath-alt) * 0.18);
  filter: blur(2px);
  transition: opacity 0.45s ease;
}
.zd-hero--immersive.is-hero-settling .hero-blob,
.zd-hero--immersive.is-hero-settling .page-ambient {
  transition: transform 0.52s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-focus--immersive.is-hero-settling .page-ambient {
  transition: transform 0.52s cubic-bezier(0.22, 1, 0.36, 1);
}
.zd-hero--immersive.is-hero-active .hero-blob {
  opacity: calc(0.5 + var(--hero-breath) * 0.2 + var(--hero-interact) * 0.14);
}
.zd-hero--immersive .hero-blob-green {
  width: min(34vw, 300px);
  height: min(30vw, 260px);
  right: 5%;
  top: 8%;
  background: radial-gradient(
    circle at 40% 40%,
    color-mix(in srgb, var(--cap-highlight) 28%, transparent),
    color-mix(in srgb, var(--cap-highlight) 12%, transparent) 48%,
    color-mix(in srgb, var(--signal) 5%, transparent) 72%
  ) !important;
  animation: blobDrift 16s ease-in-out infinite;
}
.zd-hero--immersive .hero-blob-mint {
  width: min(28vw, 240px);
  height: min(24vw, 200px);
  left: 7%;
  bottom: 12%;
  background: radial-gradient(
    circle at 50% 50%,
    color-mix(in srgb, var(--signal-light) 42%, transparent),
    color-mix(in srgb, var(--cap-privacy-bg) 16%, transparent) 55%,
    transparent 74%
  ) !important;
  animation: blobDrift 20s ease-in-out infinite 0.6s;
}
.zd-hero--immersive .hero-blob-lavender {
  width: min(30vw, 260px);
  height: min(26vw, 220px);
  right: 20%;
  bottom: 18%;
  background: radial-gradient(
    circle at 50% 50%,
    color-mix(in srgb, var(--cap-security) 32%, transparent),
    color-mix(in srgb, var(--cap-security-bg) 14%, transparent) 52%,
    transparent 74%
  ) !important;
  animation: blobDrift 24s ease-in-out infinite reverse;
}
.zd-hero--immersive .hero-blob-amber {
  display: block !important;
  width: min(20vw, 180px);
  height: min(18vw, 160px);
  left: 42%;
  top: 6%;
  background: radial-gradient(
    circle at 50% 50%,
    color-mix(in srgb, var(--amber) 36%, transparent),
    color-mix(in srgb, var(--cap-compliance-bg) 14%, transparent) 52%,
    transparent 72%
  ) !important;
  animation: blobDrift 22s ease-in-out infinite 1s;
}
.hero-blob-sky {
  display: none !important;
}
.zd-hero--immersive:not(.is-hero-active) .hero-color-wash,
.zd-hero--immersive:not(.is-hero-active) .hero-blob {
  animation-play-state: running;
}
.zd-hero--immersive:not(.is-hero-active) .hero-aurora {
  animation-play-state: running;
}
@media (prefers-reduced-motion: reduce) {
  .zd-hero--immersive .hero-color-wash,
  .zd-hero--immersive .hero-blob,
  .zd-hero--immersive .hero-aurora {
    animation-play-state: paused !important;
  }
}
.hero-reg-node,
.hero-risk-node__body {
  contain: layout style paint;
}
.hero-float-chips {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
  --hero-chip-mask: radial-gradient(
    ellipse 58% 50% at 50% 48%,
    transparent 0%,
    transparent 56%,
    #000 90%
  );
  mask-image: var(--hero-chip-mask);
  -webkit-mask-image: var(--hero-chip-mask);
}
.hero-float-chips--risk {
  mask-image: none;
  -webkit-mask-image: none;
  z-index: 5;
  pointer-events: none;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.hero-float-chips--reg {
  mask-image: none;
  -webkit-mask-image: none;
  z-index: 4;
  pointer-events: none;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.hero-float-chips--micro {
  mask-image: none;
  -webkit-mask-image: none;
  z-index: 3;
  pointer-events: none;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.hero-float-chips--reg.is-neutralize-pulse .hero-reg-node__body {
  border-left-color: var(--signal-light);
  box-shadow:
    var(--shadow-card),
    0 0 18px color-mix(in srgb, var(--signal-light) 42%, transparent);
  transition:
    border-color 0.22s ease,
    box-shadow 0.28s ease;
}
.hero-float-chips--reg.is-neutralize-pulse .hero-reg-node__dot {
  background: var(--signal-light);
  box-shadow: 0 0 10px color-mix(in srgb, var(--signal-light) 65%, transparent);
}
.hero-reg-node {
  position: absolute;
  left: var(--hf-x);
  top: var(--hf-y);
  --hf-shift-x: -50%;
  --hf-nudge-x: 0px;
  --hf-nudge-y: 0px;
  transform: translate3d(
      calc(var(--hf-shift-x) + var(--hf-nudge-x)),
      calc(-50% + var(--hf-nudge-y)),
      0
    )
    rotate(var(--hf-rot, 0deg));
  opacity: 0;
  z-index: 4;
  will-change: transform, opacity;
}
.hero-reg-node[data-side="left"] {
  --hf-shift-x: 0%;
}
.hero-reg-node[data-side="right"] {
  --hf-shift-x: -100%;
}
.hero-reg-node.is-active {
  opacity: 1;
  transition: opacity 0.5s ease;
}
.hero-reg-node.is-aligned[data-align="1"] {
  --reg-bob-dur: 6.2s;
  --reg-bob-delay: 0s;
  --reg-sway-dur: 7.4s;
  animation: heroRegSway var(--reg-sway-dur) ease-in-out infinite;
}
.hero-reg-node.is-aligned[data-align="2"] {
  --reg-bob-dur: 6.8s;
  --reg-bob-delay: 0.45s;
  --reg-sway-dur: 8.1s;
  animation: heroRegSway var(--reg-sway-dur) ease-in-out infinite 0.5s;
}
.hero-reg-node.is-aligned[data-align="3"] {
  --reg-bob-dur: 5.9s;
  --reg-bob-delay: 0.9s;
  --reg-sway-dur: 7.8s;
  animation: heroRegSway var(--reg-sway-dur) ease-in-out infinite 1.1s;
}
.hero-reg-node.is-aligned[data-align="4"] {
  --reg-bob-dur: 6.5s;
  --reg-bob-delay: 0.25s;
  --reg-sway-dur: 8.4s;
  animation: heroRegSway var(--reg-sway-dur) ease-in-out infinite 0.3s;
}
.hero-reg-node.is-aligned[data-align="5"] {
  --reg-bob-dur: 6.1s;
  --reg-bob-delay: 0.65s;
  --reg-sway-dur: 7.2s;
  animation: heroRegSway var(--reg-sway-dur) ease-in-out infinite 0.85s;
}
.hero-reg-node.is-aligned[data-align="6"] {
  --reg-bob-dur: 6.6s;
  --reg-bob-delay: 1.1s;
  --reg-sway-dur: 8.6s;
  animation: heroRegSway var(--reg-sway-dur) ease-in-out infinite 1.4s;
}
.hero-reg-node.is-aligned[data-align="7"] {
  --reg-bob-dur: 6.3s;
  --reg-bob-delay: 0.55s;
  --reg-sway-dur: 7.9s;
  animation: heroRegSway var(--reg-sway-dur) ease-in-out infinite 0.65s;
}
.hero-reg-node__body [data-lang="en"],
.hero-reg-node__body [data-lang="zh"] {
  display: inline;
}
.hero-reg-node__body {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px 4px 7px;
  border-radius: 3px;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--signal-deep);
  background: color-mix(in srgb, var(--panel3) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--signal) 32%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--signal) 78%, transparent);
  box-shadow: none;
  transform-origin: center center;
  will-change: transform, opacity;
  -webkit-font-smoothing: antialiased;
}
.hero-reg-node.is-aligned .hero-reg-node__body {
  opacity: 0.92;
  animation: heroRegBob var(--reg-bob-dur, 6s) ease-in-out infinite;
  animation-delay: var(--reg-bob-delay, 0s);
}
@keyframes heroRegSway {
  0%,
  100% {
    transform: translate3d(
        calc(var(--hf-shift-x) + var(--hf-nudge-x)),
        calc(-50% + var(--hf-nudge-y)),
        0
      )
      rotate(var(--hf-rot, 0deg));
  }
  33% {
    transform: translate3d(
        calc(var(--hf-shift-x) + var(--hf-nudge-x) + 3px),
        calc(-50% + var(--hf-nudge-y) - 5px),
        0
      )
      rotate(calc(var(--hf-rot, 0deg) + 0.25deg));
  }
  66% {
    transform: translate3d(
        calc(var(--hf-shift-x) + var(--hf-nudge-x) - 2px),
        calc(-50% + var(--hf-nudge-y) - 3px),
        0
      )
      rotate(calc(var(--hf-rot, 0deg) - 0.2deg));
  }
}
.hero-reg-node__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--signal);
  opacity: 0.92;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.hero-reg-node.is-aligned .hero-reg-node__dot {
  animation: heroRegDotPulse var(--reg-bob-dur, 6s) ease-in-out infinite;
  animation-delay: var(--reg-bob-delay, 0s);
}
@keyframes heroRegDrift1 {
  0%,
  100% {
    transform: translate3d(-50%, -50%, 0);
  }
  33% {
    transform: translate3d(calc(-50% + 10px), calc(-50% - 12px), 0);
  }
  66% {
    transform: translate3d(calc(-50% - 6px), calc(-50% - 5px), 0);
  }
}
@keyframes heroRegDrift2 {
  0%,
  100% {
    transform: translate3d(-50%, -50%, 0);
  }
  33% {
    transform: translate3d(calc(-50% - 11px), calc(-50% - 10px), 0);
  }
  66% {
    transform: translate3d(calc(-50% + 7px), calc(-50% - 14px), 0);
  }
}
@keyframes heroRegDrift3 {
  0%,
  100% {
    transform: translate3d(-50%, -50%, 0);
  }
  33% {
    transform: translate3d(calc(-50% + 8px), calc(-50% - 14px), 0);
  }
  66% {
    transform: translate3d(calc(-50% - 5px), calc(-50% - 6px), 0);
  }
}
@keyframes heroRegDrift4 {
  0%,
  100% {
    transform: translate3d(-50%, -50%, 0);
  }
  33% {
    transform: translate3d(calc(-50% - 9px), calc(-50% - 11px), 0);
  }
  66% {
    transform: translate3d(calc(-50% + 8px), calc(-50% - 8px), 0);
  }
}
@keyframes heroRegDrift5 {
  0%,
  100% {
    transform: translate3d(-50%, -50%, 0);
  }
  33% {
    transform: translate3d(calc(-50% + 12px), calc(-50% - 7px), 0);
  }
  66% {
    transform: translate3d(calc(-50% - 5px), calc(-50% - 13px), 0);
  }
}
@keyframes heroRegDrift6 {
  0%,
  100% {
    transform: translate3d(-50%, -50%, 0);
  }
  33% {
    transform: translate3d(calc(-50% - 8px), calc(-50% - 12px), 0);
  }
  66% {
    transform: translate3d(calc(-50% + 9px), calc(-50% - 4px), 0);
  }
}
@keyframes heroRegBob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}
@keyframes heroRegDotPulse {
  0%,
  100% {
    opacity: 0.88;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.12);
  }
}
html[data-theme="dark"] .hero-reg-node__body {
  color: color-mix(in srgb, var(--signal-light) 90%, #fff);
  background: color-mix(in srgb, var(--panel2) 18%, transparent);
  border-color: color-mix(in srgb, var(--signal-light) 30%, transparent);
  border-left-color: color-mix(in srgb, var(--signal-light) 75%, transparent);
}
html[data-theme="dark"] .hero-reg-node__dot {
  background: var(--signal-light);
}
.hero-risk-node {
  position: absolute;
  display: block;
  left: var(--hf-x);
  top: var(--hf-y);
  --hf-shift-x: -50%;
  --hf-nudge-x: 0px;
  --hf-nudge-y: 0px;
  transform: translate3d(
      calc(var(--hf-shift-x) + var(--hf-nudge-x)),
      calc(-50% + var(--hf-nudge-y)),
      0
    )
    rotate(var(--hf-rot, 0deg));
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: default;
  font-family: inherit;
  pointer-events: none;
  z-index: 10;
  will-change: transform;
  color: inherit;
  text-align: inherit;
}
.hero-float-chips--risk.is-risk-motion .hero-risk-slot {
  pointer-events: none;
}
.hero-risk-slot.is-empty {
  pointer-events: none;
}
.hero-risk-slot.is-empty .hero-risk-node__body {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.94) translateY(6px);
}
.hero-risk-slot.is-emerging .hero-risk-node__body {
  animation: heroRiskEmerge var(--risk-emerge-dur, 0.58s) cubic-bezier(0.22, 1, 0.36, 1)
    forwards !important;
}
.hero-risk-slot.is-emerging {
  z-index: 14;
  overflow: visible;
  pointer-events: none;
  animation-play-state: paused !important;
}
.hero-risk-slot.is-emerging::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(120px, calc(100% + 36px));
  height: max(48px, calc(100% + 24px));
  transform: translate(-50%, -50%) scale(0.75);
  border-radius: 10px;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(
      ellipse 100% 90% at 50% 45%,
      color-mix(in srgb, var(--signal-light) 55%, transparent),
      color-mix(in srgb, var(--hero-risk-accent) 22%, transparent) 50%,
      transparent 74%
    );
  filter: blur(5px);
  animation: heroRiskEmergeBloom var(--risk-emerge-dur, 0.58s) ease-out forwards;
}
.hero-risk-slot.is-emerging .hero-risk-node__dot {
  animation: heroRiskDotEmerge var(--risk-emerge-dur, 0.58s) ease-out forwards !important;
}
@keyframes heroRiskEmergeBloom {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.55);
  }
  28% {
    opacity: 0.88;
    transform: translate(-50%, -52%) scale(1.2);
  }
  55% {
    opacity: 0.62;
    transform: translate(-50%, -50%) scale(1.42);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -48%) scale(1.72);
  }
}
@keyframes heroRiskDotEmerge {
  0% {
    opacity: 0;
    transform: scale(0.2);
    background: var(--signal-light);
    box-shadow: 0 0 12px color-mix(in srgb, var(--signal-light) 70%, transparent);
  }
  45% {
    opacity: 1;
    transform: scale(1.35);
    background: var(--signal);
  }
  100% {
    opacity: 0.92;
    transform: scale(1);
    background: var(--hero-risk-accent);
    box-shadow: none;
  }
}
.hero-risk-node__body [data-lang="en"],
.hero-risk-node__body [data-lang="zh"] {
  display: inline;
}
.hero-risk-slot[data-slot="1"] {
  --risk-bob-dur: 4.2s;
  --risk-bob-delay: 0s;
}
.hero-risk-slot[data-slot="2"] {
  --risk-bob-dur: 4.6s;
  --risk-bob-delay: 0.35s;
}
.hero-risk-slot[data-slot="3"] {
  --risk-bob-dur: 4s;
  --risk-bob-delay: 0.7s;
}
.hero-risk-slot[data-slot="4"] {
  --risk-bob-dur: 4.4s;
  --risk-bob-delay: 0.2s;
}
.hero-risk-slot[data-slot="5"] {
  --risk-bob-dur: 4.8s;
  --risk-bob-delay: 0.55s;
}
.hero-risk-slot[data-slot="6"] {
  --risk-bob-dur: 4.1s;
  --risk-bob-delay: 0.9s;
}
.hero-risk-slot[data-slot="7"] {
  --risk-bob-dur: 4.5s;
  --risk-bob-delay: 0.45s;
}
.hero-risk-slot[data-slot="8"] {
  --risk-bob-dur: 3.9s;
  --risk-bob-delay: 1.05s;
}
.hero-risk-slot.is-live:not(.is-vanishing):not(.is-emerging) {
  animation: heroRiskSway var(--risk-sway-dur, 8.6s) ease-in-out infinite;
  animation-delay: var(--risk-sway-delay, 0s);
}
.hero-risk-slot.is-emerging.is-live {
  pointer-events: none;
}
.hero-risk-slot.is-live:not(.is-vanishing):not(.is-emerging) .hero-risk-node__body {
  animation: heroRiskBob var(--risk-bob-dur, 4.2s) ease-in-out infinite;
  animation-delay: var(--risk-bob-delay, 0s);
}
@keyframes heroRiskSway {
  0%,
  100% {
    transform: translate3d(
        calc(var(--hf-shift-x) + var(--hf-nudge-x)),
        calc(-50% + var(--hf-nudge-y)),
        0
      )
      rotate(var(--hf-rot, 0deg));
  }
  32% {
    transform: translate3d(
        calc(var(--hf-shift-x) + var(--hf-nudge-x) - var(--risk-sway-amp, 4px)),
        calc(-50% + var(--hf-nudge-y) - calc(var(--risk-sway-amp, 4px) * 1.4)),
        0
      )
      rotate(calc(var(--hf-rot, 0deg) - 0.28deg));
  }
  68% {
    transform: translate3d(
        calc(var(--hf-shift-x) + var(--hf-nudge-x) + calc(var(--risk-sway-amp, 4px) * 0.75)),
        calc(-50% + var(--hf-nudge-y) - calc(var(--risk-sway-amp, 4px) * 0.45)),
        0
      )
      rotate(calc(var(--hf-rot, 0deg) + 0.18deg));
  }
}
@keyframes heroRiskFlowOut {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: none;
  }
  100% {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
    filter: blur(2px);
  }
}
@keyframes heroRiskFlowIn {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.94);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: none;
  }
}
@keyframes heroRiskSlotIn {
  0% {
    opacity: 0;
    visibility: visible;
    transform: translateY(10px) scale(0.92);
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: none;
  }
}
.hero-risk-node[data-side="left"] {
  --hf-shift-x: 0%;
}
.hero-risk-node[data-side="right"] {
  --hf-shift-x: -100%;
}
.hero-risk-node.is-live {
  pointer-events: auto;
  cursor: pointer;
}
.hero-risk-node.is-emerging {
  pointer-events: auto;
  cursor: pointer;
}
.hero-risk-node.is-live::before,
.hero-risk-node.is-emerging::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 120px);
  height: max(100%, 36px);
  transform: translate(-50%, -50%);
  z-index: -1;
}
.hero-risk-node.is-gone,
.hero-risk-slot.is-empty {
  pointer-events: none;
}
.hero-risk-node:focus-visible {
  outline: none;
}
.hero-risk-node.is-live:focus-visible .hero-risk-node__body {
  outline: 2px solid color-mix(in srgb, var(--signal-light) 55%, transparent);
  outline-offset: 3px;
}
.hero-risk-node__body {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px 5px 8px;
  border-radius: 4px;
  font-size: 0.59rem;
  font-weight: 650;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: none;
  color: var(--hero-risk-text);
  background: color-mix(in srgb, #fff 86%, var(--panel3));
  border: 1px solid color-mix(in srgb, var(--hero-risk-accent) 24%, var(--line));
  border-left: 2px solid var(--hero-risk-accent);
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 50%, transparent) inset,
    0 2px 8px color-mix(in srgb, var(--hero-risk-accent) 10%, transparent),
    var(--shadow-card);
  transform-origin: center center;
  will-change: transform, opacity, filter;
  -webkit-font-smoothing: antialiased;
}
.hero-risk-node.is-live .hero-risk-node__body {
  /* bob applied via .hero-risk-slot.is-live selector above */
}
.hero-risk-node.is-live:hover .hero-risk-node__body {
  border-left-color: var(--signal);
  background: color-mix(in srgb, #fff 92%, var(--panel3));
  box-shadow:
    0 2px 10px color-mix(in srgb, var(--signal) 14%, transparent),
    var(--shadow-card);
}
html[data-theme="dark"] .hero-risk-node__body {
  color: #f0b5ab;
  background: color-mix(in srgb, var(--panel2) 84%, #1a1210);
  border-color: color-mix(in srgb, var(--hero-risk-accent) 32%, var(--line));
  border-left-color: var(--hero-risk-accent);
}
html[data-theme="dark"] .hero-risk-node.is-live:hover .hero-risk-node__body {
  background: color-mix(in srgb, var(--panel2) 90%, #241816);
}
.hero-risk-node.is-hint-pulse .hero-risk-node__body {
  animation: heroRiskHintPulse 0.88s ease-in-out 1 !important;
}
.hero-risk-node.is-hint-pulse .hero-risk-node__dot {
  background: var(--signal);
  box-shadow: 0 0 6px color-mix(in srgb, var(--signal-light) 50%, transparent);
}
.hero-risk-node.is-breath-pulse .hero-risk-node__body {
  animation: heroRiskBreathPulse var(--breath-pulse-dur, 1.2s) ease-in-out 1 !important;
}
.hero-risk-node.is-breath-pulse .hero-risk-node__dot {
  animation: heroRiskBreathDot var(--breath-pulse-dur, 1.2s) ease-in-out 1 !important;
}
@keyframes heroRiskBreathPulse {
  0%,
  100% {
    transform: translateY(0) scale(1);
    border-left-color: var(--hero-risk-accent);
    box-shadow: var(--shadow-card);
  }
  48% {
    transform: translateY(-2px) scale(1.025);
    border-left-color: color-mix(in srgb, var(--signal-light) 55%, var(--hero-risk-accent));
    box-shadow:
      var(--shadow-card),
      0 0 0 2px color-mix(in srgb, var(--signal-light) 14%, transparent);
  }
}
@keyframes heroRiskBreathDot {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.92;
  }
  48% {
    transform: scale(1.2);
    opacity: 1;
    background: color-mix(in srgb, var(--signal-light) 70%, var(--hero-risk-accent));
  }
}
@keyframes heroRiskHintPulse {
  0%,
  100% {
    transform: translateY(0) scale(1);
    border-left-color: var(--hero-risk-accent);
    box-shadow: var(--shadow-card);
  }
  45% {
    transform: translateY(-4px) scale(1.05);
    border-left-color: var(--signal);
    border-color: color-mix(in srgb, var(--signal-light) 35%, var(--line));
    box-shadow:
      var(--shadow-card),
      0 0 0 3px color-mix(in srgb, var(--signal-light) 24%, transparent);
  }
}
.hero-risk-node.is-vanishing {
  z-index: 14;
  overflow: visible;
  animation-play-state: paused !important;
}
.hero-risk-node.is-vanishing::after,
.hero-risk-slot.is-vanishing::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(120px, calc(100% + 36px));
  height: max(48px, calc(100% + 24px));
  transform: translate(-50%, -50%) scale(0.75);
  border-radius: 10px;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(
      ellipse 100% 90% at 50% 45%,
      color-mix(in srgb, var(--signal-light) 62%, transparent),
      color-mix(in srgb, var(--signal) 28%, transparent) 48%,
      transparent 72%
    );
  filter: blur(6px);
  animation: heroRiskVanishBloom var(--risk-vanish-dur, 0.62s) ease-out forwards;
}
.hero-risk-node.is-vanishing .hero-risk-node__body,
.hero-risk-slot.is-vanishing .hero-risk-node__body {
  position: relative;
  animation: heroRiskVanish var(--risk-vanish-dur, 0.62s) cubic-bezier(0.32, 0.72, 0.22, 1)
    forwards !important;
  z-index: 1;
}
.hero-risk-node.is-vanishing .hero-risk-node__dot,
.hero-risk-slot.is-vanishing .hero-risk-node__dot {
  animation: heroRiskDotNeutralize var(--risk-vanish-dur, 0.62s) ease-out forwards !important;
}
@keyframes heroRiskVanishBloom {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.65);
  }
  18% {
    opacity: 0.92;
    transform: translate(-50%, -54%) scale(1.15);
  }
  38% {
    opacity: 0.78;
    transform: translate(-50%, -50%) scale(1.38);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -38%) scale(1.75);
  }
}
@keyframes heroRiskDotNeutralize {
  0% {
    background: var(--hero-risk-accent);
    transform: scale(1);
    box-shadow: none;
  }
  20% {
    background: var(--signal-light);
    transform: scale(2.2);
    box-shadow:
      0 0 10px color-mix(in srgb, var(--signal-light) 80%, transparent),
      0 0 20px color-mix(in srgb, var(--signal) 40%, transparent);
  }
  100% {
    opacity: 0;
    transform: scale(0.2);
    box-shadow: none;
  }
}
.hero-risk-node.is-gone .hero-risk-node__body {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.5) translateY(10px);
  animation: none;
}
.hero-risk-node__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--hero-risk-accent);
  opacity: 0.92;
}
.hero-risk-node.is-live:not(.is-vanishing):not(.is-emerging) .hero-risk-node__dot {
  animation: heroRiskDotPulse var(--risk-dot-pulse-dur, 2.8s) ease-in-out infinite;
  animation-delay: var(--risk-bob-delay, 0s);
}
.hero-risk-node.is-active[data-drift="1"] {
  --risk-bob-dur: 3.6s;
  --risk-bob-delay: 0s;
  animation: none;
}
.hero-risk-node.is-active[data-drift="2"] {
  --risk-bob-dur: 4.1s;
  --risk-bob-delay: 0.4s;
  animation: none;
}
.hero-risk-node.is-active[data-drift="3"] {
  --risk-bob-dur: 3.9s;
  --risk-bob-delay: 0.8s;
  animation: none;
}
.hero-risk-node.is-active[data-drift="4"] {
  --risk-bob-dur: 4.4s;
  --risk-bob-delay: 0.2s;
  animation: none;
}
.hero-risk-node.is-active[data-drift="5"] {
  --risk-bob-dur: 3.7s;
  --risk-bob-delay: 1s;
  animation: none;
}
.hero-risk-node.is-active[data-drift="6"] {
  --risk-bob-dur: 4.3s;
  --risk-bob-delay: 0.6s;
  animation: none;
}
.hero-risk-node.is-active[data-drift="7"] {
  --risk-bob-dur: 4s;
  --risk-bob-delay: 1.2s;
  animation: none;
}
.hero-risk-node.is-active[data-drift="8"] {
  --risk-bob-dur: 4.2s;
  --risk-bob-delay: 0.55s;
  animation: none;
}
.hero-risk-node.is-gone,
.hero-risk-node.is-vanishing,
.hero-risk-node.is-emerging {
  animation-play-state: paused;
}
.hero-micro-node {
  position: absolute;
  left: var(--hf-x);
  top: var(--hf-y);
  --hf-shift-x: -50%;
  transform: translate3d(var(--hf-shift-x), -50%, 0)
    rotate(var(--hf-rot, 0deg));
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  will-change: transform, opacity;
}
.hero-micro-node[data-side="left"] {
  --hf-shift-x: 0%;
}
.hero-micro-node[data-side="right"] {
  --hf-shift-x: -100%;
}
.hero-micro-node.is-active {
  transition: opacity 0.38s ease;
}
.hero-micro-node.is-emerging,
.hero-micro-node.is-live {
  opacity: 1;
}
.hero-micro-node.is-gone {
  opacity: 0;
}
.hero-micro-node[data-micro="1"] {
  --micro-bob-dur: 5.8s;
  --micro-bob-delay: 0s;
}
.hero-micro-node[data-micro="2"] {
  --micro-bob-dur: 6.4s;
  --micro-bob-delay: 0.35s;
}
.hero-micro-node[data-micro="3"] {
  --micro-bob-dur: 5.5s;
  --micro-bob-delay: 0.7s;
}
.hero-micro-node[data-micro="4"] {
  --micro-bob-dur: 6.1s;
  --micro-bob-delay: 1.05s;
}
.hero-micro-node__body {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 4px 7px;
  border-radius: 3px;
  font-size: 0.54rem;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--signal-deep);
  background: color-mix(in srgb, var(--panel3) 84%, #fff);
  border: 1px solid color-mix(in srgb, var(--signal) 18%, var(--line));
  border-left: 1.5px solid color-mix(in srgb, var(--signal) 55%, transparent);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--signal) 6%, transparent);
  transform-origin: center center;
  will-change: transform, opacity;
  -webkit-font-smoothing: antialiased;
}
.hero-micro-node.is-live:not(.is-emerging) .hero-micro-node__body {
  opacity: 0.94;
  animation: heroMicroBob var(--micro-bob-dur, 5.8s) ease-in-out infinite;
  animation-delay: var(--micro-bob-delay, 0s);
}
.hero-micro-node.is-emerging .hero-micro-node__body {
  animation: heroMicroEmerge 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-micro-node.is-fading .hero-micro-node__body {
  opacity: 0;
  transform: translateY(3px) scale(0.95);
  transition:
    opacity 0.42s ease,
    transform 0.42s ease;
  animation: none;
}
.hero-micro-node__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--signal) 55%, var(--muted));
  opacity: 0.75;
}
html[data-theme="dark"] .hero-micro-node__body {
  color: color-mix(in srgb, var(--signal-light) 80%, #fff);
  background: color-mix(in srgb, var(--panel2) 78%, #0d1514);
  border-color: color-mix(in srgb, var(--signal-light) 22%, var(--line));
  border-left-color: color-mix(in srgb, var(--signal-light) 48%, transparent);
}
html[data-theme="dark"] .hero-micro-node__dot {
  background: color-mix(in srgb, var(--signal-light) 50%, var(--muted));
}
@keyframes heroMicroBob {
  0%,
  100% {
    transform: translateY(0) scale(1);
    opacity: 0.94;
  }
  50% {
    transform: translateY(-3px) scale(1.008);
    opacity: 1;
  }
}
@keyframes heroMicroEmerge {
  0% {
    opacity: 0;
    transform: translateY(6px) scale(0.92);
  }
  100% {
    opacity: 0.94;
    transform: translateY(0) scale(1);
  }
}
@keyframes heroRiskDrift1 {
  0%,
  100% {
    transform: translate3d(-50%, -50%, 0);
  }
  33% {
    transform: translate3d(calc(-50% + 14px), calc(-50% - 18px), 0);
  }
  66% {
    transform: translate3d(calc(-50% - 10px), calc(-50% - 8px), 0);
  }
}
@keyframes heroRiskDrift2 {
  0%,
  100% {
    transform: translate3d(-50%, -50%, 0);
  }
  33% {
    transform: translate3d(calc(-50% - 16px), calc(-50% - 14px), 0);
  }
  66% {
    transform: translate3d(calc(-50% + 8px), calc(-50% - 20px), 0);
  }
}
@keyframes heroRiskDrift3 {
  0%,
  100% {
    transform: translate3d(-50%, -50%, 0);
  }
  33% {
    transform: translate3d(calc(-50% + 12px), calc(-50% - 22px), 0);
  }
  66% {
    transform: translate3d(calc(-50% - 6px), calc(-50% - 10px), 0);
  }
}
@keyframes heroRiskDrift4 {
  0%,
  100% {
    transform: translate3d(-50%, -50%, 0);
  }
  33% {
    transform: translate3d(calc(-50% - 14px), calc(-50% - 16px), 0);
  }
  66% {
    transform: translate3d(calc(-50% + 10px), calc(-50% - 12px), 0);
  }
}
@keyframes heroRiskDrift5 {
  0%,
  100% {
    transform: translate3d(-50%, -50%, 0);
  }
  33% {
    transform: translate3d(calc(-50% + 18px), calc(-50% - 10px), 0);
  }
  66% {
    transform: translate3d(calc(-50% - 8px), calc(-50% - 18px), 0);
  }
}
@keyframes heroRiskDrift6 {
  0%,
  100% {
    transform: translate3d(-50%, -50%, 0);
  }
  33% {
    transform: translate3d(calc(-50% - 12px), calc(-50% - 20px), 0);
  }
  66% {
    transform: translate3d(calc(-50% + 14px), calc(-50% - 6px), 0);
  }
}
@keyframes heroRiskDrift7 {
  0%,
  100% {
    transform: translate3d(-50%, -50%, 0);
  }
  33% {
    transform: translate3d(calc(-50% + 10px), calc(-50% - 16px), 0);
  }
  66% {
    transform: translate3d(calc(-50% - 14px), calc(-50% - 12px), 0);
  }
}
@keyframes heroRiskDrift8 {
  0%,
  100% {
    transform: translate3d(-50%, -50%, 0);
  }
  40% {
    transform: translate3d(calc(-50% - 12px), calc(-50% + 10px), 0);
  }
  70% {
    transform: translate3d(calc(-50% + 8px), calc(-50% + 14px), 0);
  }
}
@keyframes heroRiskBob {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-5px) scale(1.014);
  }
}
@keyframes heroRiskVanish {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: none;
    color: var(--hero-risk-text);
    background: linear-gradient(
      180deg,
      var(--panel3) 0%,
      color-mix(in srgb, var(--panel2) 55%, var(--panel3)) 100%
    );
    border-left-width: 2px;
    border-left-color: var(--hero-risk-accent);
    border-color: color-mix(in srgb, var(--hero-risk-accent) 18%, var(--line));
    box-shadow: var(--shadow-card);
  }
  16% {
    opacity: 1;
    transform: translateY(-5px) scale(1.1);
    color: var(--signal-deep);
    background: color-mix(in srgb, var(--signal-faint) 82%, var(--panel3));
    border-left-width: 3px;
    border-left-color: var(--signal);
    border-color: color-mix(in srgb, var(--signal-light) 58%, var(--line));
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--signal-light) 40%, transparent),
      0 0 14px 5px color-mix(in srgb, var(--signal-light) 44%, transparent),
      0 0 28px 12px color-mix(in srgb, var(--signal) 20%, transparent),
      0 0 40px 18px color-mix(in srgb, var(--cap-privacy-bg) 28%, transparent);
    filter: brightness(1.1) saturate(1.04);
  }
  32% {
    opacity: 0.92;
    transform: translateY(-3px) scale(1.06);
    border-left-color: var(--signal-light);
    border-color: color-mix(in srgb, var(--signal-light) 45%, var(--line));
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--signal-light) 36%, transparent),
      0 0 22px 10px color-mix(in srgb, var(--signal-light) 38%, transparent),
      0 0 40px 16px color-mix(in srgb, var(--signal) 16%, transparent);
  }
  58% {
    opacity: 0.55;
    transform: translateY(5px) scale(0.78);
    color: var(--signal);
    border-left-width: 2px;
    border-left-color: var(--signal-light);
    border-color: color-mix(in srgb, var(--signal-light) 30%, var(--line));
    box-shadow:
      0 0 12px 4px color-mix(in srgb, var(--signal-light) 22%, transparent);
    filter: blur(0.5px);
  }
  100% {
    opacity: 0;
    transform: translateY(14px) scale(0.4);
    filter: blur(2px);
    border-left-color: var(--signal-light);
    box-shadow: none;
  }
}
@keyframes heroRiskEmerge {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.42);
    filter: blur(2px);
  }
  55% {
    opacity: 1;
    transform: translateY(-5px) scale(1.06);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: none;
  }
}
@keyframes heroRiskDotPulse {
  0%,
  100% {
    opacity: 0.92;
    transform: scale(1);
  }
  50% {
    opacity: 0.55;
    transform: scale(0.88);
  }
}
.zd-hero-copy--center {
  position: relative;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0 auto;
  max-width: min(680px, 86%);
  padding: clamp(60px, 11vw, 112px) clamp(36px, 6vw, 64px)
    clamp(52px, 9vw, 96px) !important;
  gap: clamp(22px, 3.6vw, 36px);
  pointer-events: none;
  transform: translateY(calc((var(--hero-breath) - 0.5) * -5px));
  transition: transform 0.2s ease-out;
}
.zd-hero-copy--center .headline-accent {
  background-size: 200% 200%;
  background-position: calc(50% + (var(--hero-breath-alt) - 0.5) * 18%)
    calc(50% + (var(--hero-breath) - 0.5) * 12%);
  transition: background-position 0.35s ease-out;
}
.zd-hero-copy--center .eyebrow {
  margin-inline: auto;
  margin-bottom: 0;
  box-shadow: 0 0 calc(8px + var(--hero-breath) * 14px)
    color-mix(in srgb, var(--signal) calc(6% + var(--hero-breath) * 8%), transparent);
}
.zd-hero-copy--center h1 {
  max-width: min(100%, 12.5em);
  margin-top: 0 !important;
  margin-bottom: 0;
  margin-inline: auto;
  line-height: 1.08;
  letter-spacing: -0.034em;
  font-size: clamp(2.75rem, 5.8vw, 5.25rem);
}
.zd-hero-copy--center .hero-category-def {
  max-width: 46ch;
  margin-top: 0 !important;
  margin-bottom: 0;
  margin-inline: auto;
  line-height: 1.72;
  font-size: clamp(1.02rem, 1.9vw, 1.14rem);
  font-weight: 500;
  color: var(--muted);
}
.zd-hero-copy--center .zd-hero-actions {
  justify-content: center;
  margin-top: 0;
  gap: 14px;
}
html[data-theme="light"] .zd-hero.zd-hero--immersive {
  background:
    radial-gradient(
      540px 400px at var(--hero-mx) var(--hero-my),
      color-mix(
        in srgb,
        var(--signal-light) calc(12% + var(--hero-breath) * 8%),
        transparent
      ),
      transparent 70%
    ),
    radial-gradient(
      460px 320px at 92% 10%,
      color-mix(
        in srgb,
        var(--cap-security) calc(12% + var(--hero-breath-alt) * 8%),
        transparent
      ),
      transparent 72%
    ),
    radial-gradient(
      420px 300px at 4% 86%,
      color-mix(in srgb, var(--signal) 12%, transparent),
      transparent 70%
    ),
    radial-gradient(
      360px 280px at 80% 90%,
      color-mix(
        in srgb,
        var(--cap-compliance) calc(8% + var(--hero-breath) * 6%),
        transparent
      ),
      transparent 68%
    ),
    radial-gradient(
      320px 240px at 12% 8%,
      color-mix(in srgb, var(--cap-security-bg) 58%, transparent),
      transparent 66%
    ),
    radial-gradient(
      280px 200px at 50% 100%,
      color-mix(in srgb, var(--labs-pink-blob) 6%, transparent),
      transparent 70%
    ),
    linear-gradient(
      148deg,
      var(--panel3) 0%,
      color-mix(in srgb, var(--panel) 94%, var(--labs-cream)) 42%,
      color-mix(in srgb, var(--signal-faint) 38%, var(--panel)) 100%
    ) !important;
  border-color: color-mix(in srgb, var(--line) 88%, var(--signal-faint)) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 75%, transparent),
    var(--shadow-md),
    0 0 calc(18px + var(--hero-breath) * 30px)
      color-mix(
        in srgb,
        var(--signal-light) calc(5% + var(--hero-breath) * 7%),
        transparent
      ),
    0 0 calc(14px + var(--hero-breath-alt) * 28px)
      color-mix(
        in srgb,
        var(--cap-security) calc(4% + var(--hero-breath-alt) * 6%),
        transparent
      ),
    0 0 calc(10px + var(--hero-breath) * 18px)
      color-mix(
        in srgb,
        var(--cap-compliance) calc(2% + var(--hero-breath) * 4%),
        transparent
      ) !important;
}
html[data-theme="light"] .zd-hero--immersive.is-hero-active {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 75%, transparent),
    var(--shadow-md),
    0 0 calc(22px + var(--hero-interact) * 32px)
      color-mix(
        in srgb,
        var(--signal-light) calc(5% + var(--hero-interact) * 8%),
        transparent
      ) !important;
}
html[data-theme="dark"] .zd-hero--immersive {
  background:
    radial-gradient(
      520px 380px at var(--hero-mx) var(--hero-my),
      rgba(42, 101, 97, 0.2),
      transparent 68%
    ),
    radial-gradient(
      460px 320px at 88% 12%,
      rgba(110, 91, 216, 0.12),
      transparent 70%
    ),
    radial-gradient(
      400px 300px at 8% 86%,
      color-mix(in srgb, var(--signal-light) 8%, transparent),
      transparent 72%
    ),
    linear-gradient(145deg, #161616, #0b0c0d) !important;
}
html[data-theme="dark"] .hero-aurora-a {
  background: radial-gradient(circle, rgba(42, 101, 97, 0.28), transparent 72%);
}
html[data-theme="dark"] .hero-aurora-b {
  background: radial-gradient(circle, rgba(110, 91, 216, 0.2), transparent 74%);
}
html[data-theme="dark"] .hero-mesh {
  background:
    radial-gradient(
      560px 400px at var(--mesh-x) var(--mesh-y),
      rgba(42, 101, 97, 0.18),
      transparent 66%
    ),
    radial-gradient(
      480px 340px at calc(100% - var(--mesh-x)) calc(var(--mesh-y) + 4%),
      rgba(110, 91, 216, 0.1),
      transparent 70%
    );
}
.hero-focus--immersive .hero-cursor-glow {
  width: min(38vw, 420px);
  height: min(38vw, 420px);
  left: 0;
  top: 0;
  opacity: 0;
  filter: blur(22px);
  transform: translate3d(var(--glow-x, 0px), var(--glow-y, 0px), 0)
    translate(-50%, -50%);
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--signal-light) 36%, transparent) 0%,
    color-mix(in srgb, var(--signal-soft) 14%, transparent) 34%,
    color-mix(in srgb, var(--cap-security) 8%, transparent) 50%,
    transparent 72%
  ) !important;
  transition: opacity 0.55s ease;
  mix-blend-mode: normal;
  z-index: 1;
}
.hero-cursor-glow--trail {
  width: min(34vw, 380px) !important;
  height: min(34vw, 380px) !important;
  left: 0;
  top: 0;
  filter: blur(36px) !important;
  opacity: 0 !important;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--signal-soft) 22%, transparent) 0%,
    color-mix(in srgb, var(--cap-security) 12%, transparent) 40%,
    transparent 72%
  ) !important;
}
.zd-hero--immersive.is-hero-active .hero-cursor-glow {
  opacity: calc(0.28 + var(--hero-interact) * 0.26);
}
.zd-hero--immersive.is-hero-active .hero-cursor-glow--trail {
  opacity: calc(0.08 + var(--hero-interact) * 0.1) !important;
}
.zd-hero--immersive:not(.is-hero-active) .hero-cursor-glow {
  opacity: 0;
  filter: blur(22px);
}
.zd-hero--immersive:not(.is-hero-active) .hero-cursor-glow--trail {
  opacity: 0 !important;
  filter: blur(36px) !important;
}
html[data-theme="dark"] .hero-focus--immersive .hero-cursor-glow {
  mix-blend-mode: screen;
  background: radial-gradient(
    circle,
    rgba(126, 184, 178, 0.42) 0%,
    rgba(110, 91, 216, 0.2) 38%,
    transparent 68%
  ) !important;
}
html[data-theme="dark"] .hero-cursor-glow--trail {
  background: radial-gradient(
    circle,
    rgba(110, 91, 216, 0.28) 0%,
    rgba(42, 101, 97, 0.12) 42%,
    transparent 72%
  ) !important;
}
@media (max-width: 980px) {
  .zd-hero--immersive {
    min-height: clamp(460px, 70vh, 600px) !important;
  }
  .zd-hero-copy--center {
    max-width: min(92%, 560px);
    gap: clamp(18px, 4vw, 28px);
    padding: clamp(44px, 10vw, 80px) clamp(28px, 6vw, 44px)
      clamp(40px, 8vw, 68px) !important;
  }
  .zd-hero-copy--center h1 {
    max-width: none;
    font-size: clamp(2.2rem, 8vw, 3.4rem);
    line-height: 1.1;
  }
  .hero-reg-node.is-aligned .hero-reg-node__body {
    animation-duration: 7.5s !important;
  }
  .hero-reg-node__body {
    font-size: 0.54rem;
    padding: 5px 9px 5px 7px;
  }
  .hero-risk-node__body {
    font-size: 0.52rem;
    padding: 4px 8px 4px 6px;
  }
  .hero-color-wash {
    opacity: 0.1;
  }
  .hero-aurora {
    opacity: 0.42;
    filter: blur(20px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-float-chip,
  .hero-breath-core,
  .hero-mesh,
  .hero-color-wash,
  .hero-aurora,
  .hero-blob,
  .hero-cursor-glow,
  .hero-reg-node,
  .hero-reg-node__body,
  .hero-reg-node__mark,
  .hero-float-chips--reg::before,
  .hero-risk-node.is-hint-pulse .hero-risk-node__body,
  .hero-risk-node.is-breath-pulse .hero-risk-node__body,
  .hero-risk-node.is-vanishing::after,
  .hero-risk-node__body,
  .hero-risk-node__dot,
  .hero-micro-node__body {
    animation: none !important;
  }
  .hero-reg-node,
  .hero-risk-node,
  .hero-risk-slot {
    opacity: 1;
    transform: translate3d(
        calc(var(--hf-shift-x, -50%) + var(--hf-nudge-x, 0px)),
        calc(-50% + var(--hf-nudge-y, 0px)),
        0
      )
      rotate(var(--hf-rot, 0deg));
  }
  .hero-risk-slot.is-live,
  .hero-risk-node.is-live {
    pointer-events: auto;
  }
  .hero-focus--immersive .page-ambient {
    transition: none;
  }
}

/* Legacy hero visual — unused on homepage; kept for reference */
a.zd-hero-visual {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.2s ease;
}
a.zd-hero-visual:after {
  display: none;
}
a.zd-hero-visual:hover {
  transform: translateY(-2px);
  border-color: color-mix(
    in srgb,
    var(--signal) 28%,
    rgba(255, 255, 255, 0.14)
  );
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.22);
}
a.zd-hero-visual:focus-visible {
  outline: 2px solid var(--signal-light);
  outline-offset: 3px;
}
.zd-hero-visual-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
}
.hero-arch-mini {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 0;
  padding: clamp(36px, 5vw, 48px) clamp(10px, 1.5vw, 14px) clamp(6px, 1vw, 10px);
}
.arch-flow-diagram--hero {
  grid-template-columns: 1fr auto 1.12fr auto 1fr;
  gap: clamp(4px, 1vw, 8px);
  width: 100%;
  margin: 0;
  align-items: stretch;
}
.hero-arch-mini__node {
  min-height: 0;
  padding: clamp(10px, 1.6vw, 14px) clamp(8px, 1.2vw, 12px);
  border-radius: 16px;
  gap: 5px;
}
.hero-arch-mini__node--core {
  min-height: 0;
  padding: clamp(12px, 1.8vw, 16px) clamp(10px, 1.4vw, 14px);
  box-shadow: 0 12px 32px rgba(42, 101, 97, 0.14);
}
.arch-flow-diagram--hero .arch-flow-icon {
  width: 30px;
  height: 30px;
}
.arch-flow-diagram--hero .arch-flow-icon svg {
  width: 14px;
  height: 14px;
}
.arch-flow-diagram--hero .arch-flow-kicker {
  font-size: 9px;
  letter-spacing: 0.1em;
}
.arch-flow-diagram--hero .arch-flow-node strong {
  font-size: clamp(0.72rem, 1.35vw, 0.88rem);
  line-height: 1.3;
}
.arch-flow-diagram--hero .arch-flow-meta {
  font-size: clamp(0.62rem, 1.1vw, 0.72rem);
  line-height: 1.4;
}
.arch-flow-diagram--hero .arch-flow-tags {
  gap: 4px;
  margin-top: 2px;
}
.arch-flow-diagram--hero .arch-flow-tags span,
.arch-flow-diagram--hero .arch-flow-tag {
  font-size: 8px;
  padding: 3px 6px;
}
.arch-flow-diagram--hero .arch-flow-arrow i {
  width: 18px;
}
.arch-flow-diagram--hero .arch-flow-arrow i:after {
  width: 6px;
  height: 6px;
}
.zd-hero-visual-caption {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 12px 12px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--text);
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(10px);
}
.zd-hero-visual-caption strong {
  font-weight: 700;
}
.zd-hero-visual-caption svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--signal-light);
  transition: transform 0.2s ease;
}
a.zd-hero-visual:hover .zd-hero-visual-caption svg {
  transform: translateX(3px);
}
html[data-theme="light"] a.zd-hero-visual:hover {
  box-shadow: 0 28px 64px rgba(17, 24, 39, 0.14);
  border-color: rgba(42, 101, 97, 0.22);
}
html[data-theme="light"] .hero-arch-mini__node:not(.arch-flow-gateway) {
  background: rgba(255, 255, 255, 0.9);
}
html[data-theme="light"] .hero-arch-mini__node--core {
  box-shadow:
    0 14px 36px rgba(42, 101, 97, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
html[data-theme="light"] .zd-hero-visual-tag,
html[data-theme="light"] .zd-hero-visual-caption {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(31, 41, 55, 0.08);
  color: #1f2937;
}
html[data-theme="light"] .zd-hero-visual-caption svg {
  color: var(--signal);
}
html[data-theme="dark"] .zd-hero-visual-tag,
html[data-theme="dark"] .zd-hero-visual-caption {
  background: rgba(18, 24, 28, 0.82);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text);
}
@media (max-width: 980px) {
  .arch-flow-diagram--hero {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .arch-flow-diagram--hero .arch-flow-arrow {
    transform: rotate(90deg);
    padding: 2px 0;
  }
  .hero-arch-mini {
    padding: 40px 12px 8px;
  }
}
@media (max-width: 520px) {
  .arch-flow-diagram--hero .arch-flow-meta {
    display: none;
  }
  .arch-flow-diagram--hero .arch-flow-tags span:nth-child(3) {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  a.zd-hero-visual,
  a.zd-hero-visual:hover .zd-hero-visual-caption svg {
    transition: none;
    transform: none;
  }
}

/* Homepage hero — chip-only overrides; page chrome uses brand tokens from styles.css */
html[data-theme="light"] .zd-hero.zd-hero--immersive button.hero-risk-node,
html[data-theme="light"] .zd-hero.zd-hero--immersive button.hero-risk-node:hover,
html[data-theme="light"] .zd-hero.zd-hero--immersive button.hero-risk-node:focus,
html[data-theme="light"] .zd-hero.zd-hero--immersive button.hero-risk-node:active {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
  padding: 0 !important;
  min-height: 0;
}

/* —— Compliance & forms (2026-06-26) —— */
.about-contact-role {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--signal-deep);
}
html[data-theme="dark"] .about-contact-role {
  color: var(--signal-light);
}
.demo-form-consent,
.feedback-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 12px 0 8px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
}
.demo-form-consent input,
.feedback-consent input {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--signal);
}
.demo-form-consent a,
.feedback-consent a,
.form-legal-note a,
.demo-form-legal-note a {
  color: var(--signal-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.demo-form-legal-note,
.form-legal-note {
  margin: 0 0 12px;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--soft);
}
.demo-book-error,
.feedback-error {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.84rem;
  line-height: 1.45;
  color: #9b1c1c;
  background: color-mix(in srgb, #dc2626 10%, var(--panel3));
  border: 1px solid color-mix(in srgb, #dc2626 28%, var(--line));
}
.demo-book-error a {
  color: inherit;
  font-weight: 600;
}
.auth-marketing-note {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--muted);
  background: color-mix(in srgb, var(--signal) 6%, var(--panel3));
  border: 1px solid color-mix(in srgb, var(--signal) 14%, var(--line));
}
.auth-marketing-note a {
  color: var(--signal-deep);
  font-weight: 600;
}
.auth-notice {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--signal-deep);
  background: color-mix(in srgb, var(--signal) 10%, var(--panel3));
  border: 1px solid color-mix(in srgb, var(--signal) 22%, var(--line));
}
.auth-social-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.footer-legal-btn {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #4a5359;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.footer-legal-btn:hover,
.footer-legal-btn:focus-visible {
  color: var(--signal-deep);
}
.footer-legal-btn--pill {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel2);
  text-decoration: none;
}
.footer-legal-btn--pill:hover,
.footer-legal-btn--pill:focus-visible {
  color: var(--text);
  background: var(--panel3);
  border-color: color-mix(in srgb, var(--signal) 22%, var(--line));
  text-decoration: none;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--signal) 8%, transparent);
}
.site-footer .container.footer-bar.footer-bar--enhanced {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  width: var(--container);
  max-width: 100%;
  gap: 16px;
  padding: clamp(16px, 2.2vw, 22px) 0;
  border-top: 1px solid var(--line);
  box-sizing: border-box;
}
.site-footer .footer-bar--enhanced .footer-bar-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  flex: 0 1 auto;
}
.site-footer .footer-bar--enhanced .footer-logo {
  flex-shrink: 0;
}
.footer-bar-copy {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--soft);
  letter-spacing: 0.02em;
}
.footer-bar-end {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
  margin-left: auto;
  padding-right: 60px;
  min-height: 36px;
}
.footer-bar-end__trust {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 12px 0 0;
  margin: 0;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  color: #4a5359;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  transition: color 0.18s ease;
}
.footer-bar-end__trust:hover,
.footer-bar-end__trust:focus-visible {
  color: var(--text);
}
.footer-bar-end__trust.is-active {
  color: var(--signal-deep);
}
html[lang-mode="zh"] .footer-bar-end__trust,
html[lang-mode="zh"] .footer-legal-btn--pill,
html[lang-mode="zh"] .footer-cta-btn {
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 600;
}
.footer-legal-btn--pill,
.footer-cta-btn {
  height: 36px;
  min-height: 36px;
  box-sizing: border-box;
}
.footer-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: var(--signal);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.footer-cta-btn:hover,
.footer-cta-btn:focus-visible {
  background: var(--signal-deep);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--signal) 35%, transparent);
}
@media (max-width: 960px) {
  .site-footer .container.footer-bar.footer-bar--enhanced {
    flex-direction: column;
    align-items: stretch;
  }
  .footer-bar-end {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-left: 0;
    padding-right: 0;
    row-gap: 10px;
  }
  .footer-bar-end__trust {
    width: 100%;
    height: auto;
    padding: 0 0 10px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    justify-content: flex-end;
  }
}
html[data-theme="dark"] .footer-bar-end__trust,
html[data-theme="dark"] .footer-legal-btn {
  color: var(--soft);
}
html[data-theme="dark"] .footer-bar-end__trust:hover,
html[data-theme="dark"] .footer-bar-end__trust:focus-visible,
html[data-theme="dark"] .footer-bar-end__trust.is-active {
  color: var(--text);
}
html[data-theme="dark"] .footer-legal-btn--pill {
  background: var(--panel3);
  border-color: var(--line);
}
.legal-page .legal-prose h2 {
  margin-top: 1.6em;
  font-size: 1.1rem;
}
.legal-page .legal-prose p,
.legal-page .legal-effective {
  color: var(--muted);
  line-height: 1.62;
}
.cookie-consent-text a {
  color: var(--signal-deep);
  font-weight: 600;
}
.feedback-send-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}
.demo-book-submit:disabled {
  opacity: 0.7;
  cursor: wait;
}

/* Chinese typography — tighter tracking, no faux-uppercase on labels */
html[lang-mode="zh"] .eyebrow,
html[lang-mode="zh"] .paper-eyebrow {
  letter-spacing: 0.04em;
  text-transform: none;
}
html[lang-mode="zh"] h1,
html[lang-mode="zh"] .governance-intro-title {
  letter-spacing: -0.02em;
  line-height: 1.12;
}
html[lang-mode="zh"] h2,
html[lang-mode="zh"] .monitor-section-title {
  letter-spacing: -0.015em;
  line-height: 1.18;
}
html[lang-mode="zh"] .hero-category-def,
html[lang-mode="zh"] .section-lead,
html[lang-mode="zh"] .monitor-section-lead {
  letter-spacing: 0.01em;
  line-height: 1.75;
}
html[lang-mode="zh"] .monitor-nav-label,
html[lang-mode="zh"] .demo-guide-kicker {
  letter-spacing: 0.03em;
  text-transform: none;
}

/* AI Governance — CI dynamic privacy case study */
.privacy-ci-section {
  padding-block: var(--space-9, 60px);
}
.privacy-ci-head {
  margin-bottom: clamp(18px, 2.5vw, 24px) !important;
  text-align: center;
}
.privacy-ci-eyebrow {
  display: block;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
}
.privacy-ci-eyebrow [data-lang="en"],
.privacy-ci-eyebrow [data-lang="zh"] {
  display: block;
}
.privacy-ci-title {
  margin: 0;
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.privacy-ci-title-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
html:not([lang-mode="zh"]) .privacy-ci-title-stack[data-lang="zh"] {
  display: none !important;
}
html[lang-mode="zh"] .privacy-ci-title-stack[data-lang="en"] {
  display: none !important;
}
.privacy-ci-title-line {
  display: block;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(1.7rem, 3.6vw, 2.55rem);
  font-weight: 700;
  color: var(--text);
}
.privacy-ci-title-line--sub {
  font-size: clamp(1.5rem, 3.2vw, 2.25rem);
  color: color-mix(in srgb, var(--text) 76%, var(--muted));
}
.privacy-ci-title .headline-accent--violet {
  background: linear-gradient(
    135deg,
    var(--cap-security, #6e5bd8),
    var(--periwinkle, #7b8cff)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.privacy-ci-head p {
  margin-top: 14px;
  max-width: 52ch;
}
.privacy-ci-panel {
  border: 1px solid color-mix(in srgb, var(--signal) 18%, var(--line));
  border-radius: var(--radius-band, 24px);
  overflow: hidden;
  padding: clamp(18px, 2.5vw, 24px) clamp(18px, 2.5vw, 26px);
  background:
    radial-gradient(
      520px 240px at 0% 0%,
      color-mix(in srgb, var(--signal) 12%, transparent),
      transparent 70%
    ),
    radial-gradient(
      420px 200px at 100% 100%,
      color-mix(in srgb, var(--periwinkle) 10%, transparent),
      transparent 72%
    ),
    linear-gradient(180deg, var(--signal-faint, #e8f2f0), var(--panel));
  box-shadow: var(--shadow-card, var(--shadow));
}
.privacy-ci-panel > .privacy-ci-theory-lead {
  margin: 0 0 14px;
  max-width: 58ch;
  margin-inline: auto;
  text-align: center;
  font-size: 0.94rem;
  line-height: 1.58;
  color: var(--muted);
}
.privacy-ci-panel > .privacy-ci-theory-lead strong {
  color: var(--signal-deep, var(--signal));
}
.privacy-ci-dimensions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 clamp(16px, 2.2vw, 22px);
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 72%, #fff);
  border: 1px dashed color-mix(in srgb, var(--signal) 22%, var(--line));
}
.privacy-ci-dim {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--signal-deep, var(--signal));
  background: color-mix(in srgb, var(--signal) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--signal) 16%, var(--line));
  white-space: nowrap;
}
.privacy-ci-sep {
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  color: color-mix(in srgb, var(--signal) 55%, var(--muted));
}
.privacy-prompt-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 2vw, 16px);
  padding: 0;
}
.privacy-prompt-scenario {
  grid-column: 1 / -1;
  margin: 0 0 2px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signal);
}
.privacy-prompt-box {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  padding: clamp(14px, 2vw, 18px);
  min-height: 0;
}
.privacy-prompt-box--raw {
  background: color-mix(in srgb, var(--hero-risk-accent, #e85d4a) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--hero-risk-accent, #e85d4a) 24%, var(--line));
}
.privacy-prompt-box--governed {
  background: color-mix(in srgb, var(--signal) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--signal) 24%, var(--line));
}
.privacy-prompt-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.privacy-prompt-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  flex-shrink: 0;
}
.privacy-prompt-icon--bad {
  color: var(--hero-risk-text, #a84838);
  background: color-mix(in srgb, var(--hero-risk-accent, #e85d4a) 14%, #fff);
  border: 1px solid color-mix(in srgb, var(--hero-risk-accent, #e85d4a) 30%, transparent);
}
.privacy-prompt-icon--good {
  color: var(--signal-deep, var(--signal));
  background: color-mix(in srgb, var(--signal) 14%, #fff);
  border: 1px solid color-mix(in srgb, var(--signal) 30%, transparent);
}
.privacy-prompt-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}
.privacy-prompt-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text);
}
.privacy-leak,
.privacy-token {
  padding: 1px 5px;
  border-radius: 5px;
  font-weight: 700;
  font-style: normal;
  background: transparent;
}
.privacy-leak {
  color: var(--hero-risk-text, #a84838);
  background: color-mix(in srgb, var(--hero-risk-accent, #e85d4a) 12%, transparent);
}
.privacy-token {
  color: var(--signal-deep, var(--signal));
  background: color-mix(in srgb, var(--signal) 12%, transparent);
  font-family: "Space Grotesk", ui-monospace, monospace;
  font-size: 0.88em;
  letter-spacing: 0.02em;
}
.privacy-ci-conclusion {
  margin: clamp(14px, 2vw, 18px) 0 0;
  padding: clamp(14px, 2vw, 18px) 0 0;
  border-top: 1px solid color-mix(in srgb, var(--signal) 14%, var(--line));
  font-size: 0.92rem;
  line-height: 1.58;
  text-align: center;
  color: var(--muted);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
}
.privacy-ci-conclusion strong {
  color: var(--signal-deep, var(--signal));
}
html[data-theme="light"] .privacy-ci-panel {
  background:
    radial-gradient(
      520px 240px at 0% 0%,
      rgba(42, 101, 97, 0.08),
      transparent 70%
    ),
    linear-gradient(180deg, #e8f2f0, #fffdf8);
}
html[data-theme="light"] .privacy-prompt-box--raw {
  background: linear-gradient(180deg, #fff5f3, #fffdf8);
}
html[data-theme="light"] .privacy-prompt-box--governed {
  background: linear-gradient(180deg, #eef8f4, #fffdf8);
}
@media (max-width: 820px) {
  .privacy-prompt-compare {
    grid-template-columns: 1fr;
  }
}
html[lang-mode="zh"] .privacy-ci-title-line {
  letter-spacing: -0.02em;
}
html[lang-mode="zh"] .module-sim-tag {
  letter-spacing: 0.06em;
  text-transform: none;
}