/* ANFA CAD 2026 — Static UI (HTML/CSS/JS) */
:root {
  --primary: #006edc;
  --primary-dark: #0056b3;
  --primary-soft: #edf5ff;
  --slate-900: var(--primary);
  --slate-800: #1e293b;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --bg: #ffffff;
  --navy: #243347;
  --navy-deep: #2c3b52;
  --radius: 4px;
  --max: 80rem;
  /* IBM Plex: enterprise/CAD — Vietnamese diacritics ổn định hơn Space Grotesk */
  --font: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --display: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "Cascadia Code", "Consolas", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: 15px;
  color: var(--slate-900);
  background: #fff;
  line-height: 1.6;
  letter-spacing: 0.01em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
.hidden { display: none !important; }

.font-display {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.font-mono {
  font-family: var(--mono);
  font-feature-settings: "liga" 0;
  letter-spacing: 0;
}

/* Heading rhythm — một họ chữ, tracking gọn, tránh faux-bold */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: balance;
}
p { text-wrap: pretty; }

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
@media (min-width: 640px) {
  .container { padding-left: 2rem; padding-right: 2rem; }
}

/* Top bar */
.topbar {
  background: var(--primary);
  color: #fff;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  overflow: hidden;
}
@media (min-width: 768px) {
  .topbar {
    font-size: 11px;
    letter-spacing: 0.04em;
  }
}
.topbar-inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3rem 0;
  min-width: 0;
}
@media (min-width: 768px) {
  .topbar-inner {
    flex-wrap: wrap;
    padding: 0.4rem 0;
  }
}
.topbar-left {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  opacity: 0.95;
  min-width: 0;
  overflow: hidden;
}
.topbar-brand {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .topbar-left { flex-wrap: wrap; gap: 0.75rem 1.25rem; overflow: visible; }
  .topbar-right { gap: 1rem; }
}
.topbar-hide-sm { display: none; }
.topbar-hide-md { display: none; }
@media (min-width: 640px) {
  .topbar-hide-sm { display: inline; }
}
@media (min-width: 900px) {
  .topbar-hide-md { display: inline; }
}
.topbar button {
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.topbar button svg,
.topbar button i {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .topbar button {
    gap: 0.35rem;
    font-size: 11px;
    letter-spacing: 0.04em;
  }
  .topbar button svg,
  .topbar button i {
    width: 12px;
    height: 12px;
  }
}

/* Navbar */
.navbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #fff;
  border-bottom: 1px solid var(--slate-200);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}
.navbar > .container {
  max-width: none;
  width: 100%;
  padding-left: 250px;
  padding-right: 250px;
}
@media (max-width: 1400px) {
  .navbar > .container {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
@media (max-width: 640px) {
  .navbar > .container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}
.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 64px;
  width: 100%;
}
.logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
}
.logo-mark,
.event-badge-logo,
.footer-brand img,
.login-modal-logo {
  display: block;
  object-fit: contain;
  flex-shrink: 0;
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.logo-mark {
  width: 42px;
  height: 42px;
  border-radius: 8px;
}
.logo-text strong {
  display: block;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  color: var(--slate-900);
  line-height: 1.1;
}
.logo-text span {
  font-size: 11px;
  color: var(--slate-500);
}

.navbar-inner > nav {
  display: none;
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
}
@media (min-width: 1100px) {
  .navbar-inner > nav { display: flex; }
}
.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a,
.nav-links button.nav-link {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0.55rem 0.7rem;
  font-size: 13px;
  font-weight: 600;
  color: var(--slate-700);
  border-radius: var(--radius);
  white-space: nowrap;
}
.nav-links a:hover,
.nav-links button.nav-link:hover,
.nav-links a.active,
.nav-links button.nav-link.active {
  color: var(--primary);
  background: var(--primary-soft);
}

.nav-actions {
  margin-left: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}
@media (max-width: 1099px) {
  .nav-actions .btn { display: none; }
  .logo-text span { display: none; }
}
@media (max-width: 380px) {
  .logo-mark { width: 36px; height: 36px; }
  .logo-text strong { font-size: 13px; }
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  padding: 0.55rem 0.95rem;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: 0.15s ease;
  white-space: nowrap;
}
.btn-red {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 8px 20px rgba(38,129,220, 0.28);
}
.btn-red:hover { background: var(--primary-dark); }
.btn-outline {
  background: #fff;
  color: var(--slate-800);
  border-color: #cbddea;
}
.btn-outline:hover {
  background: var(--primary-soft);
  color: var(--primary-dark);
}
.btn-ghost {
  background: transparent;
  color: var(--slate-700);
  border-color: var(--slate-200);
}
.btn-lg { height: 38px; padding: 0 1rem; font-size: 11px; }
@media (min-width: 640px) {
  .btn-lg { height: 40px; padding: 0 2rem; font-size: 13px; }
}
.btn-block { width: 100%; }

.menu-toggle {
  display: inline-flex;
  border: 1px solid var(--slate-200);
  background: #fff;
  border-radius: var(--radius);
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
@media (min-width: 1100px) {
  .menu-toggle { display: none; }
}

.mobile-nav {
  display: none;
  border-top: 1px solid var(--slate-200);
  background: #fff;
  padding: 0.75rem 1.25rem 1rem;
}
.mobile-nav.open { display: block; }
.mobile-nav > button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0.7rem 0.4rem;
  font-weight: 600;
  color: var(--slate-700);
  cursor: pointer;
  border-bottom: 1px solid var(--slate-100);
}
.mobile-nav > button.active { color: var(--primary); }
.mobile-nav-ctas {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.85rem;
  padding-top: 0.35rem;
}

/* Breadcrumb */
.breadcrumb {
  background: #fff;
  border-bottom: 1px solid var(--slate-200);
  padding: 0.65rem 0;
  font-size: 13px;
}
.breadcrumb-inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  color: var(--slate-500);
}
.breadcrumb button {
  border: 0;
  background: transparent;
  color: var(--slate-600);
  cursor: pointer;
  font-weight: 600;
  padding: 0;
}
.breadcrumb button:hover { color: var(--primary); }
.breadcrumb .current { color: var(--slate-900); font-weight: 700; }

/* Views */
.view { display: none; background: var(--surface-white); }
.view.active { display: block; }

/* Hero */
.hero {
  position: relative;
  padding: 1.5rem 0 1.75rem;
  overflow: hidden;
  border-bottom: 1px solid var(--slate-200);
  background: var(--surface-white);
}
@media (min-width: 768px) {
  .hero { padding: 2.5rem 0 3rem; }
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background: var(--primary-soft);
  border: 1px solid #cbddea;
  color: var(--primary);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.hero h1 {
  margin: 0.75rem 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.65rem, 8vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.hero h1 .accent { color: var(--primary); }
.hero-copy {
  display: inline-grid;
  max-width: 100%;
  margin-top: 0.75rem;
}
.hero-lead {
  margin: 0;
  color: var(--slate-600);
  font-size: 13.5px;
  line-height: 1.5;
  width: 100%;
}
@media (min-width: 640px) {
  .hero-copy { margin-top: 1rem; }
  .hero-lead { font-size: 17px; line-height: 1.55; }
}
.hero-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 0.65rem;
  margin: 1.35rem 0 0;
  width: 100%;
}
@media (min-width: 640px) {
  .hero-points { gap: 0.85rem 1.25rem; }
}
.hero-point {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}
@media (min-width: 640px) {
  .hero-point { gap: 0.65rem; }
}
.icon-circle {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 6px 14px rgba(38,129,220, 0.22);
}
.icon-circle svg,
.icon-circle i { width: 14px !important; height: 14px !important; }
@media (min-width: 640px) {
  .icon-circle { width: 38px; height: 38px; }
  .icon-circle svg,
  .icon-circle i { width: 18px !important; height: 18px !important; }
}
.hero-point-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.05rem;
  min-height: 30px;
}
@media (min-width: 640px) {
  .hero-point-copy { gap: 0.1rem; min-height: 38px; }
}
.hero-point strong {
  display: block;
  font-size: 11px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.hero-point span {
  display: block;
  font-size: 10px;
  line-height: 1.25;
  color: var(--slate-500);
}
@media (min-width: 640px) {
  .hero-point strong {
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hero-point span {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.15rem;
  width: 100%;
}
@media (min-width: 640px) {
  .hero-cta { gap: 0.75rem; margin-top: 1.5rem; }
}
.hero-cta .btn { flex: 1 1 auto; min-width: min(100%, 11rem); }
.hero-visual {
  display: flex;
  justify-content: center;
}
.hero-visual img {
  width: 100%;
  max-width: 640px;
  height: auto;
  filter: drop-shadow(0 25px 35px rgba(15, 23, 42, 0.25));
}

/* Metrics */
.metrics {
  background: #fff;
  border-block: 1px solid var(--slate-200);
  padding: 0.65rem 0;
}
@media (min-width: 768px) {
  .metrics { padding: 0.85rem 0; }
}
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 0.65rem;
}
@media (min-width: 480px) {
  .metrics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .metrics-grid {
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    gap: 0.85rem 1rem;
  }
}
.metric {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}
@media (min-width: 768px) {
  .metric { gap: 0.5rem; }
}
.metric i, .metric svg {
  color: var(--primary);
  flex-shrink: 0;
  width: 15px !important;
  height: 15px !important;
}
@media (min-width: 768px) {
  .metric i, .metric svg {
    width: 18px !important;
    height: 18px !important;
  }
}
.metric strong {
  display: block;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}
.metric span {
  display: block;
  font-size: 10px;
  color: var(--slate-500);
  line-height: 1.25;
}
@media (min-width: 768px) {
  .metric strong { font-size: 14px; }
  .metric span { font-size: 11px; }
}
.metric-spec {
  border-top: 1px solid var(--slate-200);
  padding-top: 0.5rem;
  grid-column: 1 / -1;
}
@media (min-width: 480px) {
  .metric-spec {
    grid-column: span 1;
    border-top: 0;
    padding-top: 0;
  }
}
@media (min-width: 768px) {
  .metric-spec {
    border-top: 0;
    border-left: 1px solid var(--slate-200);
    padding-top: 0;
    padding-left: 1rem;
    grid-column: auto;
  }
}
.metric-spec strong { color: var(--primary); }
.metric-spec span { font-family: var(--mono); font-size: 9.5px; }
@media (min-width: 768px) {
  .metric-spec span { font-size: 10px; }
}

/* Sections */
.section { padding: 3rem 0; }
.section-alt { background: #fff; }
.section-head { max-width: 40rem; margin-bottom: 1.75rem; }
.section-head h2 {
  margin: 0.65rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.section-head p { margin: 0.75rem 0 0; color: var(--slate-500); font-size: 14px; }
.accent { color: var(--primary); }

.grid-2 { display: grid; gap: 1rem; }
.grid-3 { display: grid; gap: 1rem; }
.grid-4 { display: grid; gap: 1rem; }
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  padding: 1.15rem;
}
.card h3 {
  margin: 0.5rem 0 0;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
}
.card p { margin: 0.45rem 0 0; color: var(--slate-600); font-size: 13px; }
.card-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  background: var(--primary-soft);
  color: var(--primary);
  display: grid;
  place-items: center;
}

/* Features + Install package — match React AnfaHeroShowcase */
.feat-install {
  padding: 3rem 0;
  background: #fff;
  overflow-x: hidden;
}
.feat-install-row {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: stretch;
}
@media (min-width: 1024px) {
  .feat-install-row {
    flex-direction: row;
    gap: 1.75rem;
  }
}
.feat-install-left {
  width: 100%;
  min-width: 0;
  padding: 0 1.25rem;
}
@media (min-width: 640px) {
  .feat-install-left { padding: 0 2rem; }
}
@media (min-width: 1024px) {
  .feat-install-left {
    width: auto;
    flex-shrink: 0;
    padding-left: max(1.25rem, calc((100vw - 80rem) / 2 + 1.25rem));
    padding-right: 0;
  }
}
@media (min-width: 1280px) {
  .feat-install-left {
    padding-left: max(2rem, calc((100vw - 80rem) / 2 + 2rem));
  }
}
.feat-left-grid {
  display: grid;
  gap: 1.25rem;
  align-items: start;
}
@media (min-width: 900px) {
  .feat-left-grid {
    grid-template-columns: 3fr 4fr;
    gap: 1.35rem;
  }
}
@media (min-width: 1024px) {
  .feat-left-grid {
    width: min(780px, 56vw);
  }
}
.feat-intro {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.feat-intro .pill {
  align-self: flex-start;
  gap: 0.5rem;
}
.pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--primary);
  display: inline-block;
}
.feat-intro h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--slate-900);
}
.feat-intro h2 .line {
  display: block;
  white-space: normal;
}
@media (min-width: 1280px) {
  .feat-intro h2 .line { white-space: nowrap; }
}
.feat-intro > p {
  margin: 0;
  color: var(--slate-500);
  font-size: 14px;
  line-height: 1.6;
}
.btn-explore {
  margin-top: auto;
  align-self: flex-start;
  height: 40px;
  padding: 0 1rem;
  border-radius: 999px;
  background: #fff;
  color: var(--primary);
  border: 1px solid var(--primary);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: 0.15s ease;
}
.btn-explore:hover { background: var(--primary-soft); }

.feat-compact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
  min-width: 0;
  width: 100%;
}
@media (min-width: 900px) {
  .feat-compact-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}
.feat-compact {
  height: auto;
  min-height: 48px;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--slate-200);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: 0.15s ease;
}
@media (min-width: 900px) {
  .feat-compact {
    height: 54px;
    min-height: 0;
    padding: 0 0.85rem;
    gap: 0.65rem;
  }
}
.feat-compact:hover {
  border-color: #cbddea;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
}
.feat-compact > svg,
.feat-compact > i,
.feat-compact [data-lucide] {
  color: var(--primary);
  flex-shrink: 0;
  width: 14px !important;
  height: 14px !important;
}
@media (min-width: 900px) {
  .feat-compact > svg,
  .feat-compact > i,
  .feat-compact [data-lucide] {
    width: 16px !important;
    height: 16px !important;
  }
}
.feat-compact h3 {
  margin: 0;
  padding: 0 0 1px 0;
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--slate-900);
  line-height: 1.25;
}
.feat-compact p {
  margin: 0;
  font-size: 10px;
  color: var(--slate-500);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 900px) {
  .feat-compact h3 {
    padding: 0 0 2px 0;
    font-size: 14px;
  }
  .feat-compact p {
    font-size: 12px;
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }
}
.feat-compact > div { min-width: 0; line-height: 1.2; }

.feat-install-right {
  width: 100%;
  min-width: 0;
  flex: 1;
  padding: 0 1.25rem;
}
@media (min-width: 640px) {
  .feat-install-right { padding: 0 2rem; }
}
@media (min-width: 1024px) {
  .feat-install-right { padding: 0; }
}

.install-panel {
  position: relative;
  height: 100%;
  min-height: 300px;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid var(--slate-200);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}
@media (min-width: 640px) {
  .install-panel { min-height: 360px; }
}
@media (min-width: 1024px) {
  .install-panel {
    border-radius: 0;
    border-right: 0;
  }
}
.install-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.install-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.88) 55%, rgba(255,255,255,0.55) 100%);
}
@media (min-width: 1024px) {
  .install-fade {
    background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,0.92) 45%, transparent 100%);
  }
}
.install-body {
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: 300px;
  padding: 1.25rem 1.15rem;
  display: flex;
  flex-direction: column;
  max-width: 36rem;
}
@media (min-width: 640px) {
  .install-body {
    min-height: 360px;
    padding: 1.35rem 1.5rem;
  }
}
@media (min-width: 1024px) {
  .install-body { padding-right: 2.5rem; }
}
.install-badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
}
.install-body > h3 {
  margin: 0 0 1.25rem;
  font-family: var(--display);
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  font-weight: 700;
  color: var(--slate-900);
  line-height: 1.25;
}
.install-specs {
  list-style: none;
  margin: 0 0 1.15rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem 0.55rem;
}
@media (min-width: 640px) {
  .install-specs {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0 0 1.5rem;
  }
}
.install-specs li {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: 11px;
  line-height: 1.35;
  color: var(--slate-600);
  min-width: 0;
}
@media (min-width: 640px) {
  .install-specs li {
    align-items: center;
    gap: 0.65rem;
    font-size: 14px;
  }
}
.install-specs li svg,
.install-specs li i {
  color: var(--primary);
  flex-shrink: 0;
  width: 13px !important;
  height: 13px !important;
  margin-top: 1px;
}
@media (min-width: 640px) {
  .install-specs li svg,
  .install-specs li i {
    width: 16px !important;
    height: 16px !important;
    margin-top: 0;
  }
}
.install-specs strong { color: var(--slate-900); font-weight: 700; }
.install-specs strong.accent { color: var(--primary); }

.btn-install {
  align-self: flex-start;
  height: 48px;
  padding: 0 1.5rem;
  border-radius: 999px;
  border: 0;
  background: var(--primary);
  color: #fff;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(38,129,220, 0.3);
  transition: 0.15s ease;
}
.btn-install:hover { background: var(--primary-dark); }
.install-foot {
  margin-top: auto;
  padding-top: 1.25rem;
  font-size: 12px;
  color: var(--slate-500);
}
.install-foot strong {
  color: var(--slate-800);
  font-weight: 700;
}

.partners {
  background: #fff;
  border-bottom: 1px solid var(--slate-200);
  padding: 3rem 0 2.75rem;
}
.partners-head {
  max-width: 42rem;
  margin: 0 auto 2rem;
  text-align: center;
}
.partners-head h2 {
  margin: 0.55rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.4vw, 1.65rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--slate-900);
  line-height: 1.25;
}
.partners-head p {
  margin: 0.55rem 0 0;
  font-size: 13px;
  color: var(--slate-600);
  line-height: 1.6;
}
.partners-wide {
  width: 100%;
  max-width: none;
  padding: 0 0.75rem;
}
@media (min-width: 768px) {
  .partners-wide { padding: 0 1rem; }
}
@media (min-width: 1200px) {
  .partners-wide { padding: 0 1.25rem; }
}
.partners-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
  width: 100%;
}
@media (min-width: 520px) {
  .partners-track { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.55rem; }
}
@media (min-width: 768px) {
  .partners-track { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.65rem; }
}
@media (min-width: 1100px) {
  .partners-track { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 0.7rem; }
}
.partners-track:hover .partners-item:not(:hover) {
  opacity: 0.45;
  filter: grayscale(0.35);
  transform: scale(0.985);
}
.partners-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.45rem 0.3rem;
  overflow: hidden;
  isolation: isolate;
  cursor: default;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition:
    border-color 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.35s ease,
    opacity 0.35s ease,
    filter 0.35s ease;
}
@media (min-width: 768px) {
  .partners-item {
    min-height: 3.35rem;
    padding: 0.75rem 0.5rem;
  }
}
.partners-shine {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.65) 48%,
    rgba(226,240,254, 0.35) 52%,
    transparent 65%
  );
  transform: translateX(-130%) skewX(-16deg);
  opacity: 0;
}
.partners-accent {
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 2px;
  z-index: 2;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  transform: translateX(-50%);
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.partners-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(
    120% 120% at 50% 120%,
    rgba(38,129,220, 0.12) 0%,
    transparent 55%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
}
.partners-item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  pointer-events: none;
}
.partners-name {
  position: relative;
  z-index: 1;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--slate-700);
  text-align: center;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition:
    color 0.3s ease,
    letter-spacing 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    text-shadow 0.35s ease;
}
@media (min-width: 768px) {
  .partners-name {
    font-size: 11px;
    letter-spacing: 0.06em;
    line-height: 1.3;
  }
}
.partners-item:hover {
  z-index: 3;
  border-color: #70b5ff;
  background:
    linear-gradient(180deg, #ffffff 0%, #ffffff 42%, #ffffff 100%);
  box-shadow:
    0 0 0 1px rgba(38,129,220, 0.12),
    0 14px 28px -10px rgba(38,129,220, 0.35),
    0 8px 16px -8px rgba(15, 23, 42, 0.18);
  transform: translateY(-6px) scale(1.045);
  opacity: 1;
  filter: none;
}
.partners-item:hover::before { opacity: 1; }
.partners-item:hover .partners-accent { width: 72%; }
.partners-item:hover .partners-shine {
  opacity: 1;
  animation: partners-shine-sweep 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.partners-item:hover .partners-name {
  color: var(--primary);
  letter-spacing: 0.1em;
  transform: translateY(-1px);
  text-shadow: 0 0 24px rgba(38,129,220, 0.25);
}
.partners-item:active {
  transform: translateY(-2px) scale(1.02);
  transition-duration: 0.12s;
}
@keyframes partners-shine-sweep {
  0% { transform: translateX(-130%) skewX(-16deg); }
  100% { transform: translateX(130%) skewX(-16deg); }
}
@media (prefers-reduced-motion: reduce) {
  .partners-track:hover .partners-item:not(:hover) {
    opacity: 1;
    filter: none;
    transform: none;
  }
  .partners-item,
  .partners-name,
  .partners-accent,
  .partners-item::before {
    transition: none !important;
  }
  .partners-item:hover {
    transform: none;
    box-shadow: 0 0 0 1px rgba(38,129,220, 0.2);
  }
  .partners-item:hover .partners-shine { animation: none; opacity: 0; }
}
.partners-foot {
  margin: 1.35rem 0 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--slate-500);
  letter-spacing: 0.02em;
}

/* ===== Home: Why Choose (spec board) ===== */
.home-why {
  position: relative;
  padding: 2.75rem 0;
  background:
    linear-gradient(180deg, #ffffff 0%, #fff 55%, #fff 100%);
  border-bottom: 1px solid var(--slate-200);
  overflow: hidden;
}
@media (min-width: 768px) {
  .home-why { padding: 4rem 0; }
}
.home-why::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.12) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.45), transparent 72%);
  pointer-events: none;
}
.home-why > .container { position: relative; z-index: 1; }

.home-sec-head { margin-bottom: 2rem; max-width: 40rem; }
.home-sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.home-sec-head h2 {
  margin: 0.65rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.8vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--slate-900);
  line-height: 1.25;
}
.home-sec-head p { margin: 0.65rem 0 0; font-size: 14px; color: var(--slate-500); line-height: 1.6; }

.home-why-head {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
  text-align: center;
}
@media (min-width: 768px) {
  .home-why-head {
    gap: 1rem;
    margin-bottom: 2rem;
  }
}
.home-why-head-copy {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0.15rem;
}
.home-why-head-copy h2 {
  margin: 0.65rem 0 0;
  font-size: clamp(1.3rem, 4.5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--slate-900);
  line-height: 1.2;
}
.home-why-head-copy p {
  margin: 0.7rem 0 0;
  font-size: clamp(13px, 3.4vw, 14.5px);
  color: var(--slate-500);
  line-height: 1.6;
}
.home-why-head-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
}
.home-why-head-meta span {
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--slate-200);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--slate-600);
}

.home-why-board {
  display: grid;
  gap: 0.85rem;
}
@media (min-width: 768px) {
  .home-why-board { gap: 1rem; }
}

.home-why-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 36px rgba(15, 23, 42, 0.05);
  min-width: 0;
}
@media (min-width: 768px) {
  .home-why-feature { border-radius: 14px; }
}
@media (min-width: 960px) {
  .home-why-feature { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}

.home-why-feature-copy {
  display: flex;
  flex-direction: column;
  padding: 1.15rem 1rem 1.05rem;
  border-left: 3px solid var(--primary);
  min-width: 0;
}
@media (min-width: 640px) {
  .home-why-feature-copy { padding: 1.75rem 1.75rem 1.4rem; }
}
.home-why-feature-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.75rem;
  margin-bottom: 0.85rem;
}
.home-why-num {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--primary);
}
.home-why-feature-copy h3 {
  margin: 0;
  font-size: clamp(1.05rem, 3.5vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.3;
  color: var(--slate-900);
}
.home-why-lead {
  margin: 0.75rem 0 1.1rem;
  font-size: 13.5px;
  color: var(--slate-500);
  line-height: 1.6;
  max-width: 36rem;
}
@media (min-width: 640px) {
  .home-why-lead { font-size: 14px; }
}

.home-bento-kicker {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--slate-500);
}
.home-bento-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
}
@media (min-width: 640px) {
  .home-bento-checks {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }
}
.home-bento-checks li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  padding: 0.4rem 0.35rem;
  border-radius: 6px;
  background: var(--surface-white);
  border: 1px solid var(--slate-100);
  font-size: 9.5px;
  line-height: 1.35;
  color: var(--slate-700);
  min-width: 0;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
@media (min-width: 640px) {
  .home-bento-checks li {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.45;
  }
}
.home-why-feature:hover .home-bento-checks li {
  border-color: #cbddea;
}
.home-bento-checks li svg {
  width: 12px;
  height: 12px;
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 0;
}
@media (min-width: 640px) {
  .home-bento-checks li svg {
    width: 14px;
    height: 14px;
    margin-top: 0.15rem;
  }
}
.home-bento-checks li span {
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 640px) {
  .home-bento-checks li span {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }
}

.home-bento-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary);
  margin-bottom: 0.85rem;
  flex-shrink: 0;
}
.home-bento-icon svg { width: 18px; height: 18px; }

.home-bento-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--slate-100);
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  background: transparent;
  width: 100%;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  text-align: left;
  transition: gap 0.2s ease;
}
.home-bento-link:hover { gap: 0.55rem; }
.home-bento-link svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.home-bento-link:hover svg { transform: translateX(3px); }

.home-why-feature-media {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--slate-200);
  border-radius: 0;
  background: var(--slate-900);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
}
@media (min-width: 960px) {
  .home-why-feature-media {
    border-top: 0;
    border-left: 1px solid rgba(255,255,255,0.08);
    height: 100%;
  }
}
.home-why-media-frame {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  aspect-ratio: 16 / 10;
  max-height: 13rem;
  overflow: hidden;
  background: var(--primary);
}
@media (min-width: 640px) {
  .home-why-media-frame { max-height: 16rem; }
}
@media (min-width: 960px) {
  .home-why-media-frame {
    max-height: none;
    min-height: 0;
    aspect-ratio: auto;
  }
}
.home-why-media-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-why-feature-media:hover .home-why-media-frame img,
.home-why-feature-media:focus-visible .home-why-media-frame img {
  transform: scale(1.06);
}
.home-why-media-tag {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  padding: 0.25rem 0.55rem;
  border-radius: 4px;
  background: rgba(15, 23, 42, 0.78);
  color: #fff;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.home-why-media-scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 28%;
  top: -30%;
  background: linear-gradient(180deg, transparent, rgba(38,129,220, 0.18), transparent);
  opacity: 0;
  pointer-events: none;
}
.home-why-feature-media:hover .home-why-media-scan {
  opacity: 1;
  animation: home-why-scan 1.1s ease-out;
}
@keyframes home-why-scan {
  from { top: -30%; }
  to { top: 110%; }
}
.home-why-media-caption {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 1rem;
  background: #fff;
  border-top: 1px solid var(--slate-200);
  min-width: 0;
}
@media (min-width: 640px) {
  .home-why-media-caption {
    gap: 0.85rem;
    padding: 1rem 1.15rem;
  }
}
.home-why-media-caption .home-bento-icon { margin: 0; }
.home-why-media-copy {
  flex: 1;
  min-width: 0;
}
.home-why-media-caption h3 {
  margin: 0 0 0.2rem;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--slate-900);
  transition: color 0.2s ease;
}
.home-why-media-caption p {
  margin: 0;
  font-size: 11.5px;
  color: var(--slate-500);
  line-height: 1.4;
}
@media (min-width: 640px) {
  .home-why-media-caption h3 { font-size: 0.95rem; }
  .home-why-media-caption p { font-size: 12px; }
}
.home-why-feature-media:hover .home-why-media-caption h3,
.home-why-feature-media:focus-visible .home-why-media-caption h3 { color: var(--primary); }
.home-why-media-go {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}
.home-why-media-go svg { width: 14px; height: 14px; }
.home-why-feature-media:hover .home-why-media-go,
.home-why-feature-media:focus-visible .home-why-media-go {
  background: var(--primary);
  color: #fff;
  transform: translateX(2px);
}

.home-why-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--slate-200);
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  overflow: hidden;
}
@media (min-width: 640px) and (max-width: 959px) {
  .home-why-pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: 14px;
  }
  .home-why-pillar:last-child { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .home-why-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-why-pillar:last-child { grid-column: auto; }
}
.home-why-pillar {
  display: flex;
  flex-direction: column;
  padding: 0.65rem 0.5rem 0.6rem;
  background: #fff;
  position: relative;
  min-width: 0;
  transition: background 0.25s ease;
}
@media (min-width: 640px) {
  .home-why-pillar { padding: 1.35rem 1.3rem 1.15rem; }
}
.home-why-pillar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-why-pillar:hover,
.home-why-pillar:focus-within {
  background: #ffffff;
}
.home-why-pillar:hover::before,
.home-why-pillar:focus-within::before { transform: scaleX(1); }
.home-why-pillar .home-why-num {
  margin-bottom: 0.35rem;
  font-size: 9px;
}
@media (min-width: 640px) {
  .home-why-pillar .home-why-num {
    margin-bottom: 0.85rem;
    font-size: 11px;
  }
}
.home-why-pillar .home-bento-icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: 0.4rem;
  border-radius: 5px;
  transition: transform 0.25s ease;
}
.home-why-pillar .home-bento-icon svg { width: 12px; height: 12px; }
@media (min-width: 640px) {
  .home-why-pillar .home-bento-icon {
    width: 2.35rem;
    height: 2.35rem;
    margin-bottom: 0.9rem;
    border-radius: 8px;
  }
  .home-why-pillar .home-bento-icon svg { width: 18px; height: 18px; }
}
.home-why-pillar:hover .home-bento-icon { transform: translateY(-2px); }
.home-why-pillar h3 {
  margin: 0 0 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--slate-900);
}
@media (min-width: 640px) {
  .home-why-pillar h3 {
    margin: 0 0 0.45rem;
    font-size: 0.98rem;
    line-height: 1.35;
  }
}
.home-why-pillar > p {
  margin: 0;
  font-size: 9.5px;
  color: var(--slate-500);
  line-height: 1.35;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 640px) {
  .home-why-pillar > p {
    font-size: 13px;
    line-height: 1.55;
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }
}
.home-why-pillar .home-bento-link {
  margin-top: auto;
  padding-top: 0.4rem;
  font-size: 9.5px;
  gap: 0.2rem;
}
.home-why-pillar .home-bento-link svg {
  width: 11px;
  height: 11px;
}
@media (min-width: 640px) {
  .home-why-pillar .home-bento-link {
    padding-top: 0.85rem;
    font-size: 12px;
  }
  .home-why-pillar .home-bento-link svg {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 380px) {
  .home-why-media-caption .home-bento-icon { display: none; }
  .pill { font-size: 11px; padding: 0.28rem 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .home-why-media-frame img,
  .home-why-media-go,
  .home-why-pillar::before,
  .home-why-pillar .home-bento-icon,
  .home-bento-link svg {
    transition: none !important;
  }
  .home-why-feature-media:hover .home-why-media-frame img,
  .home-why-feature-media:focus-visible .home-why-media-frame img { transform: none; }
  .home-why-feature-media:hover .home-why-media-scan { animation: none; opacity: 0; }
}

/* ===== Home: Solutions ===== */
.home-sol { padding: 3.5rem 0; background: #fff; border-bottom: 1px solid var(--slate-200); }
.home-sol-head {
  max-width: 40rem;
  margin-bottom: 1.25rem;
}
.home-sol-kicker {
  margin: 0 0 0.5rem;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
}
.home-sol-head h2 {
  margin: 0;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--slate-900);
  line-height: 1.2;
}
.home-sol-head p {
  margin: 0.45rem 0 0;
  font-size: 14px;
  color: var(--slate-600);
  line-height: 1.55;
}
.home-sol-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--slate-200);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 1px;
  mask-image: linear-gradient(90deg, #000 85%, transparent);
}
@media (min-width: 720px) {
  .home-sol-tabs { mask-image: none; }
}
.home-sol-tabs .tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: 0;
  background: transparent;
  color: var(--slate-600);
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font);
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  padding: 0.75rem 0.9rem;
  white-space: nowrap;
  box-shadow: none;
}
.home-sol-tabs .tab-btn span {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
}
.home-sol-tabs .tab-btn:hover {
  color: var(--slate-900);
  background: transparent;
}
.home-sol-tabs .tab-btn.active {
  color: var(--slate-900);
  background: transparent;
  border-bottom-color: var(--primary);
  box-shadow: none;
}
.home-sol-panel {
  display: none;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  align-items: start;
  padding: 0;
  border: 0;
  background: transparent;
}
.tab-panel.home-sol-panel.active { display: grid; }
@media (min-width: 1024px) {
  .tab-panel.home-sol-panel.active {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 2.25rem;
    align-items: center;
  }
}
.home-sol-badge {
  display: inline-block;
  margin-bottom: 0.55rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--primary);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.home-sol-copy h3 {
  margin: 0 0 0.55rem;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--slate-900);
}
.home-sol-copy > p {
  margin: 0 0 0.85rem;
  font-size: 14px;
  color: var(--slate-600);
  line-height: 1.6;
  max-width: 36rem;
}
.home-sol-compare {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  margin: 0 0 1rem;
  padding: 0.55rem 0.75rem;
  border-left: 3px solid var(--primary);
  background: var(--surface-white);
  font-size: 13px;
  color: var(--slate-600);
}
.home-sol-compare svg {
  width: 14px;
  height: 14px;
  color: var(--primary);
  flex-shrink: 0;
}
.home-sol-compare strong {
  color: var(--primary);
  font-weight: 700;
}
.home-sol-checks {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem 0.45rem;
}
@media (min-width: 640px) {
  .home-sol-checks {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0 0 1.25rem;
  }
}
.home-sol-checks li {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  font-size: 11px;
  color: var(--slate-700);
  line-height: 1.35;
  margin: 0;
  min-width: 0;
}
@media (min-width: 640px) {
  .home-sol-checks li {
    gap: 0.5rem;
    font-size: 13px;
    line-height: 1.45;
  }
}
.home-sol-checks svg {
  color: var(--primary);
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  margin-top: 1px;
}
@media (min-width: 640px) {
  .home-sol-checks svg {
    width: 15px;
    height: 15px;
    margin-top: 2px;
  }
}
.home-sol-cta { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.home-sol-cta .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.home-sol-cta .btn svg { width: 15px; height: 15px; }
.home-sol-preview {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--slate-200);
  background: var(--primary);
}
.home-sol-preview img {
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 360px;
  object-fit: cover;
  display: block;
}
.home-sol-preview .file,
.home-sol-preview .scale {
  position: absolute;
  padding: 0.3rem 0.55rem;
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(51, 65, 85, 0.9);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  color: #e2e8f0;
}
.home-sol-preview .file { top: 0.75rem; left: 0.75rem; }
.home-sol-preview .scale {
  bottom: 0.75rem;
  right: 0.75rem;
  color: #cbddea;
}

/* ===== Home: Projects ===== */
.home-proj { padding: 2.5rem 0; background: var(--surface-white); border-bottom: 1px solid var(--slate-200); }
@media (min-width: 768px) {
  .home-proj { padding: 4rem 0; }
}
.home-proj-head {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.15rem;
}
@media (min-width: 768px) {
  .home-proj-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
  }
}
.home-proj-head h2 {
  margin: 0.5rem 0 0;
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.home-proj-head p { margin: 0.4rem 0 0; font-size: 13px; color: var(--slate-600); max-width: 36rem; }
.home-proj-head .home-bento-link {
  width: auto;
  border: 0;
  padding: 0;
  margin: 0;
  justify-content: flex-start;
  gap: 0.5rem;
}
.home-proj-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}
@media (min-width: 640px) {
  .home-proj-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}
@media (min-width: 1024px) {
  .home-proj-grid { grid-template-columns: repeat(3, 1fr); }
}
.home-proj-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--slate-200);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  min-width: 0;
}
.home-proj-card:hover {
  border-color: var(--primary);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
}
.home-proj-card:hover h3 { color: var(--primary); }
.home-proj-media {
  position: relative;
  height: 7.5rem;
  background: var(--primary);
  overflow: hidden;
}
@media (min-width: 640px) {
  .home-proj-media { height: 14rem; }
}
.home-proj-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s;
}
.home-proj-card:hover .home-proj-media img { transform: scale(1.05); }
.home-proj-badges {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.home-proj-badges .cat {
  padding: 0.25rem 0.55rem;
  border-radius: var(--radius);
  background: rgba(38,129,220, 0.92);
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
.home-proj-badges .badge {
  padding: 0.2rem 0.45rem;
  border-radius: var(--radius);
  background: rgba(15, 23, 42, 0.85);
  color: #fcd34d;
  font-family: var(--mono);
  font-size: 10px;
  border: 1px solid #334155;
}
.home-proj-zoom {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.35rem;
  border-radius: var(--radius);
  background: rgba(15, 23, 42, 0.85);
  color: #fbbf24;
  opacity: 0;
  transition: opacity 0.2s;
}
.home-proj-card:hover .home-proj-zoom { opacity: 1; }
.home-proj-zoom svg { width: 16px; height: 16px; display: block; }
.home-proj-scale {
  position: absolute;
  bottom: 0.65rem;
  left: 0.75rem;
  right: 0.75rem;
  font-family: var(--mono);
  font-size: 11px;
  color: #e2e8f0;
}
.home-proj-body { padding: 0.65rem 0.7rem 0.75rem; flex: 1; display: flex; flex-direction: column; }
@media (min-width: 640px) {
  .home-proj-body { padding: 1rem; }
}
.home-proj-body h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 640px) {
  .home-proj-body h3 {
    font-size: 14px;
    line-height: 1.35;
  }
}
.home-proj-body p {
  margin: 0.5rem 0 0;
  font-size: 12px;
  color: var(--slate-600);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-proj-foot {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--slate-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
}
.home-proj-foot svg { width: 14px; height: 14px; }

/* ===== Home: FAQ split ===== */
.home-faq { padding: 4rem 0; background: var(--surface-white); border-bottom: 1px solid var(--slate-200); }
.home-faq-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .home-faq-split { grid-template-columns: 1.4fr 1fr; }
}
.home-faq-list { display: flex; flex-direction: column; gap: 0.65rem; }
.home-faq-item {
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--slate-200);
  overflow: hidden;
}
.home-faq-item.open { border-color: var(--primary); background: #ffffff; }
.home-faq-item .faq-q {
  width: 100%;
  text-align: left;
  padding: 1rem;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  color: var(--slate-900);
  cursor: pointer;
  line-height: 1.4;
}
.home-faq-item.open .faq-q { color: var(--primary); }
.home-faq-item .faq-q span { display: flex; color: var(--slate-400); }
.home-faq-item .faq-q svg { width: 16px; height: 16px; transition: transform 0.2s; }
.home-faq-item.open .faq-q svg { transform: rotate(180deg); color: var(--primary); }
.home-faq-item .faq-a {
  display: none;
  padding: 0 1rem 1rem;
  font-size: 12px;
  color: var(--slate-600);
  line-height: 1.6;
  border-top: 1px solid var(--slate-100);
}
.home-faq-item.open .faq-a { display: block; padding-top: 0.75rem; }
.home-faq-aside { display: flex; flex-direction: column; gap: 1rem; }
.home-trial-card {
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--primary);
  border: 1px solid #1e293b;
  color: #e2e8f0;
}
.home-trial-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: #fbbf24;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.65rem;
}
.home-trial-label svg { width: 16px; height: 16px; }
.home-trial-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
}
.home-trial-card > p { margin: 0 0 1rem; font-size: 12px; color: #cbd5e1; line-height: 1.55; }
.home-trial-card ul {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0.85rem 0;
  border-top: 1px solid #1e293b;
  border-bottom: 1px solid #1e293b;
}
.home-trial-card li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-family: var(--mono);
  font-size: 11px;
  color: #cbd5e1;
  margin-bottom: 0.55rem;
}
.home-trial-card li:last-child { margin-bottom: 0; }
.home-trial-card li strong { color: #fff; font-weight: 700; }
.home-trial-card li strong.amber { color: #fcd34d; }
.home-trial-btns { display: flex; flex-direction: column; gap: 0.5rem; }
@media (min-width: 480px) { .home-trial-btns { flex-direction: row; } }
.home-trial-btns .btn { flex: 1; font-size: 11px; }
.btn.light {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}
.btn.light:hover { background: #334155; color: #fff; }
.home-hotline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--slate-200);
}
.home-hotline > div:first-child {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.home-hotline .home-bento-icon { margin: 0; flex-shrink: 0; }
.home-hotline em {
  display: block;
  font-style: normal;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--slate-500);
  text-transform: uppercase;
}
.home-hotline a {
  display: block;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  color: var(--slate-900);
  margin-top: 2px;
}
.home-hotline a:hover { color: var(--primary); }
.home-zalo {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.65rem;
  border-radius: var(--radius);
  border: 1px solid var(--slate-200);
  background: #fff;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--slate-700);
  flex-shrink: 0;
}
.home-zalo svg { width: 14px; height: 14px; color: var(--primary); }

/* ===== Home: Bottom CTA ===== */
.home-cta {
  position: relative;
  overflow: hidden;
  padding: 3.25rem 0;
  background:
    radial-gradient(ellipse 50% 90% at 100% 0%, rgba(38,129,220, 0.28), transparent 55%),
    linear-gradient(135deg, var(--primary) 0%, #1e293b 55%, #243347 100%);
  color: #e2e8f0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.home-cta::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--primary);
}
.home-cta-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  align-items: center;
}
@media (min-width: 900px) {
  .home-cta-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(16rem, 0.85fr);
    gap: 2.5rem;
  }
}
.home-cta-kicker {
  margin: 0 0 0.65rem;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #cbddea;
}
.home-cta-copy h2 {
  margin: 0;
  max-width: none;
  font-size: clamp(1.45rem, 3vw, 2.1rem);
  font-weight: 700;
  color: #fff;
  text-transform: none;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.home-cta-copy h2 span { color: #cbddea; }
.home-cta-copy > p {
  margin: 0.85rem 0 0;
  max-width: 36rem;
  font-size: 14px;
  color: #94a3b8;
  line-height: 1.6;
}
.home-cta-aside {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem 1.35rem;
  border: 1px solid rgba(113,180,248, 0.28);
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(6px);
}
.home-cta-btns {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  justify-content: stretch;
}
.home-cta-btns .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
}
.home-cta-btns .btn svg { width: 16px; height: 16px; }
.home-cta-outline {
  background: transparent;
  border-color: rgba(226, 232, 240, 0.35);
  color: #f1f5f9;
}
.home-cta-outline:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: #cbddea;
  color: #fff;
}
.home-cta-points {
  list-style: none;
  margin: 0;
  padding: 0.85rem 0 0;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem 0.5rem;
}
@media (min-width: 640px) {
  .home-cta-points {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
  }
}
.home-cta-points li {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  font-size: 11px;
  color: #cbd5e1;
  line-height: 1.35;
  min-width: 0;
}
@media (min-width: 640px) {
  .home-cta-points li {
    gap: 0.45rem;
    font-size: 12px;
    line-height: 1.4;
  }
}
.home-cta-points svg {
  width: 12px;
  height: 12px;
  color: #70b5ff;
  flex-shrink: 0;
  margin-top: 1px;
}
@media (min-width: 640px) {
  .home-cta-points svg {
    width: 14px;
    height: 14px;
  }
}

.badge-launch {
  display: inline-flex;
  padding: 0.2rem 0.55rem;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: var(--primary);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--radius);
  text-transform: uppercase;
}

.project-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--slate-200);
  background: #fff;
  cursor: pointer;
}
.project-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.project-card .meta { padding: 0.85rem 1rem 1rem; }
.project-card .meta .tag {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
}
.project-card h3 {
  margin: 0.35rem 0 0;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--display);
}
.project-card p {
  margin: 0.35rem 0 0;
  font-size: 12px;
  color: var(--slate-500);
}

.tabs-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.tab-btn {
  border: 1px solid var(--slate-200);
  background: #fff;
  color: var(--slate-700);
  border-radius: var(--radius);
  padding: 0.45rem 0.8rem;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--mono);
  text-transform: uppercase;
}
.tab-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.faq-item {
  border: 1px solid var(--slate-200);
  background: #fff;
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
  overflow: hidden;
}
.faq-q {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0.95rem 1rem;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--slate-900);
}
.faq-a {
  display: none;
  padding: 0 1rem 1rem;
  color: var(--slate-600);
  font-size: 13px;
}
.faq-item.open .faq-a { display: block; }

.pricing-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.pricing-card.recommended {
  border-color: var(--primary);
  box-shadow: 0 12px 30px rgba(38,129,220, 0.12);
}
.pricing-card .badge {
  position: absolute;
  top: -10px;
  left: 1rem;
  background: var(--primary);
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  padding: 0.25rem 0.55rem;
  border-radius: var(--radius);
  text-transform: uppercase;
}
.price {
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0.75rem 0 0.25rem;
  color: var(--primary);
}
.pricing-card ul {
  margin: 1rem 0;
  padding: 0;
  list-style: none;
  flex: 1;
}
.pricing-card li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: 0.45rem;
  font-size: 13px;
  color: var(--slate-700);
}
.pricing-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 700;
}

.page-hero {
  padding: 2rem 0 1rem;
  background: #fff;
  border-bottom: 1px solid var(--slate-200);
}
.page-hero h1 {
  margin: 0.5rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700;
}
.page-hero p {
  margin: 0.65rem 0 0;
  color: var(--slate-600);
  max-width: 42rem;
  font-size: 14px;
}

.table-wrap { overflow-x: auto; }
table.compare {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 13px;
}
table.compare th, table.compare td {
  border: 1px solid var(--slate-200);
  padding: 0.7rem 0.85rem;
  text-align: left;
}
table.compare th {
  background: var(--surface-white);
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
}

.resource-item, .support-card {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  padding: 1rem;
}
.resource-item .tag, .support-card .tag {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
}

.cta-band {
  background: linear-gradient(135deg, var(--slate-900), var(--primary));
  color: #fff;
  padding: 2.5rem 0;
  text-align: center;
}
.cta-band h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 700;
}
.cta-band p { margin: 0.65rem auto 1.25rem; max-width: 32rem; opacity: 0.9; font-size: 14px; }
.cta-band .btn-outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.35);
}
.cta-band .btn-outline:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* Footer */
/* Footer — black background with readable neutral typography */
.site-footer{background:#000;color:#bdbdbd;font-size:14px;padding:48px 0 24px;border-top:3px solid var(--primary)}
.footer-inner{display:grid;gap:36px}
.footer-main{display:grid;gap:32px}
.footer-brand{display:flex;align-items:flex-start;gap:16px}
.footer-brand img{width:44px;height:44px;border-radius:5px;flex-shrink:0}
.footer-brand strong{display:block;color:#fff;font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.3}
.footer-brand>div>span{display:block;margin-top:7px;font-size:13px;color:#bdbdbd;line-height:1.6}
.footer-brand p{margin:16px 0 0;font-size:14px;line-height:1.7;color:#bdbdbd;max-width:300px}
.footer-col h3{margin:0 0 20px;color:#fff;font-family:var(--font);font-size:15px;font-weight:600;letter-spacing:0;text-transform:none}
.footer-contact,.footer-links{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.footer-contact li{display:grid;grid-template-columns:80px minmax(0,1fr);gap:12px;align-items:baseline;line-height:1.65}
.footer-contact li>span:first-child{color:#aaa;font-size:13px}
.footer-contact li>span:last-child,.footer-contact a{color:#e5e5e5;font-size:14px;overflow-wrap:anywhere}
.footer-contact a{text-decoration:none;transition:color .15s ease}
.site-footer .hotline{color:#fff;font-weight:600}
.footer-links li{line-height:1.6}
.footer-links button{background:transparent;border:0;color:#e5e5e5;cursor:pointer;padding:0;font:inherit;font-size:14px;text-align:left;transition:color .15s ease}
.footer-links button:hover,.footer-contact a:hover{color:#70b5ff}
.footer-links button:focus-visible,.footer-contact a:focus-visible{outline:2px solid #70b5ff;outline-offset:5px}
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;padding-top:22px;border-top:1px solid #333;font-size:12px;line-height:1.6;color:#aaa}
.footer-badge{font-family:var(--font);font-size:12px;font-weight:400;letter-spacing:0;color:#aaa}
@media(min-width:900px){.footer-main{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(150px,.5fr);gap:64px;align-items:start}}
@media(min-width:600px) and (max-width:899px){.footer-main{grid-template-columns:1fr 1fr;gap:32px}.footer-brand{grid-column:1/-1}}
@media(max-width:599px){.site-footer{padding:36px 0 24px}.footer-inner{gap:28px}.footer-contact li{grid-template-columns:72px minmax(0,1fr);gap:10px}.footer-links{grid-template-columns:1fr 1fr}.footer-bottom{display:block}.footer-badge{display:block;margin-top:12px}}

/* Floating UI */
.event-badge {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: #fff;
  color: var(--slate-900);
  border: 1px solid var(--slate-200);
  border-radius: 999px;
  padding: 0.55rem 0.85rem 0.55rem 0.7rem;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
  text-align: left;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.event-badge:hover {
  border-color: #cbddea;
  box-shadow: 0 12px 32px rgba(38,129,220, 0.14);
  transform: translateY(-1px);
}
.event-badge-logo {
  width: 30px;
  height: 30px;
  border-radius: 7px;
}
.event-badge-copy {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}
.event-badge .label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.event-badge .title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--slate-900);
  line-height: 1.2;
}
/* Modals */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(15, 23, 42, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
}
.modal-backdrop.open { display: flex; }
.modal {
  position: relative;
  width: 100%;
  max-width: 48rem;
  background: #fff;
  border: 2px solid var(--primary);
  border-radius: var(--radius);
  overflow: hidden;
  margin: auto;
  box-shadow: 0 25px 60px rgba(0,0,0,0.3);
}
.modal.sm { max-width: 26rem; border-color: #94a3b8; }
.modal-head {
  background: linear-gradient(90deg, var(--primary), var(--primary));
  color: #fff;
  padding: 0.7rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal-close {
  border: 0;
  background: rgba(0,0,0,0.2);
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  cursor: pointer;
}
.modal-form { padding: 1.25rem 1.5rem; }

/* Event popup — góc dưới phải, không overlay */
.event-popup {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 46;
  width: min(480px, calc(100vw - 2rem));
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
  display: none;
  pointer-events: auto;
  animation: event-popup-in 0.28s ease-out;
}
.event-popup.open {
  display: block;
}
@keyframes event-popup-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.event-popup-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.45);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.2s ease;
}
.event-popup-close:hover {
  background: rgba(15, 23, 42, 0.7);
}
.event-popup-media {
  position: relative;
  background: var(--primary);
  line-height: 0;
  overflow: hidden;
}
.event-popup-media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}
.event-popup-status {
  position: absolute;
  left: 1rem;
  top: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #cbddea;
  backdrop-filter: blur(6px);
}
.event-popup-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #70b5ff;
  flex-shrink: 0;
}
.event-popup-body {
  padding: 0.85rem 1.1rem 1.1rem;
  display: grid;
  gap: 0.85rem;
  background: #fff;
}
.event-popup-meta {
  display: grid;
  gap: 0.5rem;
}
.event-popup-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: flex-start;
}
.event-popup-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-white);
  color: var(--slate-700);
  flex-shrink: 0;
}
.event-popup-icon svg {
  width: 1.05rem;
  height: 1.05rem;
}
.event-popup-label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--slate-400);
  margin-bottom: 0.15rem;
}
.event-popup-value {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--slate-800);
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.event-popup-cta {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 0;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.event-popup-cta:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}
.event-popup-cta:active {
  transform: translateY(0);
}
@media (max-width: 520px) {
  .event-badge {
    right: 0.75rem;
    bottom: 0.75rem;
    padding: 0.5rem 0.75rem 0.5rem 0.6rem;
  }
  .event-popup {
    right: 0.75rem;
    bottom: 0.75rem;
    width: calc(100vw - 1.5rem);
  }
  .event-popup-body { padding: 1rem 1.05rem 1.1rem; }
  .event-popup-value { font-size: 13px; }
}
.field { margin-bottom: 0.75rem; }
.field label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 0.35rem;
  color: var(--slate-700);
}
.field input, .field select, .field textarea {
  width: 100%;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  padding: 0.6rem 0.75rem;
  background: #ffffff;
  outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(38,129,220, 0.12);
}
.login-modal-inner {
  background: var(--navy-deep);
  color: #fff;
  padding: 2rem 1.5rem;
  text-align: center;
}
.login-modal-logo {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  margin: 0 auto 1rem;
}
.login-modal-inner input {
  width: 100%;
  background: #243347;
  border: 1px solid #94a3b8;
  color: #fff;
  border-radius: var(--radius);
  padding: 0.65rem 0.75rem;
  margin-top: 0.35rem;
}
.login-modal-inner .field { text-align: left; }
.login-modal-inner label {
  color: #e2e8f0;
  font-size: 11px;
  font-family: var(--mono);
  font-weight: 700;
  text-transform: uppercase;
}

.toast-top {
  position: fixed;
  top: 5rem;
  right: 1.25rem;
  z-index: 60;
  background: var(--primary);
  color: #fff;
  border: 1px solid #22c55e;
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font-family: var(--mono);
  font-size: 12px;
  display: none;
  max-width: min(360px, calc(100vw - 2rem));
  box-shadow: 0 12px 30px rgba(0,0,0,0.3);
}
.toast-top.show { display: flex; align-items: center; gap: 0.5rem; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(0,0,0,0.85);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: min(960px, 100%);
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--radius);
}
.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  border: 0;
  background: rgba(255,255,255,0.15);
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 20px;
}

.list-check {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}
.list-check li {
  position: relative;
  padding-left: 1.15rem;
  margin-bottom: 0.4rem;
  font-size: 13px;
  color: var(--slate-700);
}
.list-check li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 700;
}

/* ========== Overview page (match AnfaOverviewView) ========== */
.ov-header {
  padding: 2.5rem 0 0;
  border-bottom: 1px solid var(--slate-200);
  background-color: #ffffff;
  background-image: url("../assets/images/background_tongquan.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.ov-header-text { max-width: 48rem; position: relative; z-index: 1; }
.ov-badge {
  display: inline-flex;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius);
  background: var(--primary-soft);
  border: 1px solid #cbddea;
  color: var(--primary);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.ov-header h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 3rem);
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--slate-900);
}
.ov-header-text > p {
  margin: 0.75rem 0 0;
  color: var(--slate-800);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.65;
}
.ov-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2rem;
  padding: 1rem 0 1.25rem;
  border-top: 1px solid rgba(226, 232, 240, 0.85);
  font-family: var(--mono);
  font-size: 12px;
  position: relative;
  z-index: 1;
}
.ov-sub {
  border: 1px solid var(--slate-200);
  background: #fff;
  color: var(--slate-700);
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.15s ease;
}
.ov-sub:hover { background: var(--surface-white); }
.ov-sub.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 1px 4px rgba(38,129,220, 0.25);
}

.ov-block {
  padding: 3.5rem 0;
  background: #fff;
  border-bottom: 1px solid var(--slate-200);
}
.ov-block-alt { background: var(--surface-white); }
.ov-split {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .ov-split { grid-template-columns: 1fr 1fr; gap: 3rem; }
}
.ov-step {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius);
  background: var(--primary-soft);
  color: var(--primary);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}
.ov-step span {
  color: var(--primary);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.ov-col h2 {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--slate-900);
}
.ov-lead {
  margin: 0 0 1.25rem;
  color: var(--slate-600);
  font-size: 15px;
  line-height: 1.65;
}
.ov-problem {
  padding: 1rem;
  border-radius: var(--radius);
  background: var(--surface-white);
  border: 1px solid var(--slate-200);
  margin-bottom: 1.25rem;
}
.ov-problem strong {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  color: var(--slate-800);
  margin-bottom: 0.5rem;
}
.ov-problem ul {
  margin: 0;
  padding-left: 1.15rem;
  font-size: 12px;
  color: var(--slate-600);
  line-height: 1.55;
}
.ov-problem li { margin-bottom: 0.35rem; }
.ov-audience-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.75rem;
}
.ov-audience-grid {
  display: grid;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .ov-audience-grid { grid-template-columns: 1fr 1fr; }
}
.ov-audience {
  padding: 0.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--slate-200);
  background: #fff;
}
.ov-audience-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 12px;
  font-weight: 700;
  color: var(--slate-900);
  margin-bottom: 0.25rem;
}
.ov-audience-title svg { color: var(--primary); flex-shrink: 0; }
.ov-audience p {
  margin: 0;
  font-size: 11px;
  color: var(--slate-500);
  line-height: 1.35;
}

.ov-arch {
  border-radius: var(--radius);
  background: var(--primary);
  border: 1px solid #1e293b;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.25);
}
.ov-arch-media {
  position: relative;
  height: 176px;
  background: var(--primary);
  overflow: hidden;
}
.ov-arch-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
}
.ov-arch-tags {
  position: absolute;
  left: 1rem;
  bottom: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
}
.ov-arch-tags .tag-red {
  background: var(--primary);
  color: var(--primary);
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
}
.ov-arch-body {
  padding: 1.15rem;
  font-family: var(--mono);
  font-size: 12px;
  color: #f1f5f9;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.ov-layer {
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius);
  background: #1e293b;
  border: 1px solid #334155;
}
.ov-layer-accent {
  background: rgba(29,78,127, 0.35);
  border-color: rgba(68,153,239, 0.55);
}
.ov-layer-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #fbbf24;
  margin-bottom: 0.2rem;
  text-transform: uppercase;
}
.ov-layer p {
  margin: 0;
  font-family: var(--font);
  font-size: 12px;
  color: #cbd5e1;
}
.ov-layer-accent p { color: #fff; }
.ov-arch-foot {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-top: 0.65rem;
  border-top: 1px solid #1e293b;
  font-size: 11px;
  color: #94a3b8;
}
.accent-amber { color: #fbbf24; font-weight: 700; }

.ov-sec-head { max-width: 40rem; margin-bottom: 2.5rem; }
.ov-sec-head h2 {
  margin: 0.5rem 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.ov-sec-head > p {
  margin: 0.5rem 0 0;
  color: var(--slate-600);
  font-size: 13px;
}

.ov-foundation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--slate-300);
  border-bottom: 1px solid var(--slate-300);
}
.ov-foundation-point { min-width: 0; padding: 1.25rem 1.5rem 1.5rem 0; }
.ov-foundation-point + .ov-foundation-point {
  padding-left: 1.5rem;
  border-left: 1px solid var(--slate-300);
}
.ov-foundation-point > span {
  color: var(--primary);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ov-foundation-point > span i {
  color: var(--slate-500);
  font-style: normal;
  font-weight: 500;
}
.ov-foundation-point h3 {
  margin: 2rem 0 0;
  color: var(--slate-900);
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.04em;
}
.ov-foundation-point p {
  max-width: 24rem;
  margin: 0.55rem 0 0;
  color: var(--slate-600);
  font-size: 13px;
  line-height: 1.65;
}

.ov-journey-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.ov-journey-item {
  min-width: 0;
  padding-top: 1.35rem;
  border-top: 1px solid var(--slate-300);
}
.ov-journey-heading {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: 1rem;
  min-height: 6.25rem;
  align-items: start;
}
.ov-journey-index {
  color: var(--primary);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding-top: 0.2rem;
}
.ov-journey-index i { color: var(--slate-400); font-style: normal; }
.ov-journey-heading h3 {
  margin: 0;
  color: var(--slate-900);
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.ov-journey-heading p {
  max-width: 28rem;
  margin: 0.45rem 0 0;
  color: var(--slate-600);
  font-size: 13px;
  line-height: 1.6;
}
.ov-journey-figure { margin: 0; }
.ov-journey-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 1.9 / 1;
  object-fit: cover;
  background: var(--slate-200);
}
.ov-journey-figure figcaption {
  padding: 0.65rem 0 0.9rem;
  border-bottom: 1px solid var(--slate-300);
  color: var(--slate-500);
  font-size: 11px;
  line-height: 1.4;
}
.ov-deploy-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ov-journey-notes {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--slate-300);
}
.ov-journey-notes li {
  display: grid;
  grid-template-columns: minmax(8rem, 0.75fr) 1.25fr;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--slate-200);
}
.ov-journey-notes strong {
  color: var(--slate-800);
  font-size: 11px;
  font-weight: 700;
}
.ov-journey-notes span {
  color: var(--slate-500);
  font-size: 11px;
  line-height: 1.45;
}
.ov-deploy-list li > span {
  color: var(--slate-400);
  font-family: var(--mono);
  font-size: 10px;
  padding-top: 0.15rem;
}
#advantages .ov-sec-head h2,
#why-choose .ov-sec-head h2,
#latest-version .ov-sec-head h2 {
  text-transform: none;
  letter-spacing: -0.035em;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
}
#advantages .ov-step,
#why-choose .ov-step,
#latest-version .ov-step {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--slate-500);
  font-size: 10px;
  letter-spacing: 0.08em;
}
#advantages .ov-step span,
#why-choose .ov-step span,
#latest-version .ov-step span { color: var(--primary); }
#latest-version .ov-sec-head { max-width: 44rem; }
.ov-deploy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: stretch;
}
.ov-product-summary {
  display: flex;
  flex-direction: column;
  padding-top: 1.25rem;
  border-top: 1px solid var(--slate-300);
}
.ov-product-kicker,
.ov-deploy-head > span {
  color: var(--primary);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.ov-product-title h3 {
  margin: 1.6rem 0 0;
  color: var(--slate-900);
  font-family: var(--display);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.04em;
}
.ov-product-title p {
  max-width: 27rem;
  margin: 0.55rem 0 1.5rem;
  color: var(--slate-600);
  font-size: 13px;
  line-height: 1.65;
}
.ov-product-facts { margin: 0; }
.ov-product-facts > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--slate-200);
}
.ov-product-facts > div:last-child { border-bottom: 1px solid var(--slate-200); }
.ov-product-facts dt { color: var(--slate-500); font-size: 11px; }
.ov-product-facts dd { margin: 0; color: var(--slate-800); font-size: 12px; font-weight: 700; }
.ov-deploy-check {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 1.25rem;
  border-top: 1px solid var(--slate-300);
}
.ov-deploy-head { margin-bottom: 1.15rem; }
.ov-deploy-head h3 {
  margin: 0.4rem 0 0;
  color: var(--slate-900);
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.ov-deploy-list li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0.5rem;
  align-items: start;
  padding: 0.85rem 0;
  border-top: 1px solid var(--slate-300);
}
.ov-deploy-list li:last-child { border-bottom: 1px solid var(--slate-300); }
.ov-deploy-list p { margin: 0; color: var(--slate-700); font-size: 13px; line-height: 1.5; }
.ov-deploy-actions { display: flex; gap: 0.8rem; margin-top: 1.5rem; }
.ov-deploy-actions .btn { min-width: 10rem; }

@media (max-width: 640px) {
  .ov-foundation-grid,
  .ov-journey-grid,
  .ov-deploy-grid { grid-template-columns: 1fr; }
  .ov-foundation-point,
  .ov-foundation-point + .ov-foundation-point {
    padding: 1rem 0 1.1rem;
    border-left: 0;
  }
  .ov-foundation-point + .ov-foundation-point { border-top: 1px solid var(--slate-300); }
  .ov-foundation-point h3 { margin-top: 0.8rem; }
  .ov-journey-heading { min-height: 0; padding-bottom: 1rem; }
  .ov-journey-notes li { grid-template-columns: 1fr; gap: 0.2rem; }
  .ov-deploy-actions { flex-wrap: wrap; }
  .ov-deploy-actions .btn { flex: 1 1 10rem; }
}

/* ===== Features page ===== */
.fp-header {
  padding: 2.5rem 0 3rem;
  background: var(--surface-white);
  border-bottom: 1px solid var(--slate-200);
}
.fp-header-text { max-width: 48rem; }
.fp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius);
  background: var(--primary-50);
  border: 1px solid #cbddea;
  color: var(--primary);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.fp-header h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--slate-900);
  line-height: 1.1;
}
.fp-header-text > p {
  margin: 0.75rem 0 0;
  color: var(--slate-600);
  font-size: 14px;
  line-height: 1.65;
  max-width: 42rem;
}
.fp-body { padding: 3rem 0; background: #fff; }
.fp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .fp-grid { grid-template-columns: 1fr 2fr; gap: 2rem; }
  .fp-sidebar { position: sticky; top: 6rem; }
}
.fp-cat-box {
  padding: 1rem;
  border-radius: var(--radius);
  background: var(--surface-white);
  border: 1px solid var(--slate-200);
}
.fp-cat-label {
  display: block;
  padding: 0 0.5rem;
  margin-bottom: 0.5rem;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--slate-500);
}
.fp-cat-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem;
  margin-bottom: 0.35rem;
  border-radius: var(--radius);
  border: 1px solid var(--slate-200);
  background: #fff;
  color: var(--slate-700);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.fp-cat-btn:last-of-type { margin-bottom: 0; }
.fp-cat-btn:hover { background: rgba(241, 245, 249, 0.8); }
.fp-cat-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(38,129,220, 0.2);
}
.fp-cat-btn-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.fp-cat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius);
  background: var(--primary-50);
  color: var(--primary);
  flex-shrink: 0;
}
.fp-cat-btn.active .fp-cat-icon {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.fp-cat-btn-title {
  font-size: 12px;
  line-height: 1.3;
}
.fp-cat-btn-code {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--slate-400);
  margin-top: 1px;
}
.fp-cat-btn.active .fp-cat-btn-code { color: #fde68a; }
.fp-cat-pill {
  font-family: var(--mono);
  font-size: 10px;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius);
  background: var(--surface-white);
  color: var(--slate-600);
  white-space: nowrap;
  flex-shrink: 0;
}
.fp-cat-btn.active .fp-cat-pill {
  background: var(--primary);
  color: #fff;
}
.fp-trial-box {
  margin-top: 1rem;
  padding: 1.25rem;
  border-radius: var(--radius);
  background: rgba(242,248,254, 0.7);
  border: 1px solid #cbddea;
}
.fp-trial-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--primary);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.fp-trial-box p {
  margin: 0 0 0.75rem;
  font-size: 11px;
  line-height: 1.55;
  color: var(--slate-600);
}
.fp-main { display: flex; flex-direction: column; gap: 2rem; }
.fp-detail-card {
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--slate-200);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}
.fp-banner {
  position: relative;
  height: 12rem;
  background: var(--primary);
  overflow: hidden;
}
@media (min-width: 640px) { .fp-banner { height: 14rem; } }
.fp-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: transform 0.5s;
}
.fp-detail-card:hover .fp-banner img { transform: scale(1.03); }
.fp-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(2, 6, 23, 0.9) 0%, rgba(2, 6, 23, 0.3) 50%, transparent 100%);
}
.fp-banner-meta {
  position: absolute;
  bottom: 1rem;
  left: 1.25rem;
  right: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: #fff;
}
.fp-banner-meta-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.fp-banner-code {
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius);
  background: var(--primary);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
.fp-banner-engine {
  font-family: var(--mono);
  font-size: 11px;
  color: #e2e8f0;
}
.fp-banner-tag {
  display: none;
  font-family: var(--mono);
  font-size: 11px;
  color: #fbbf24;
  font-weight: 600;
}
@media (min-width: 640px) { .fp-banner-tag { display: inline; } }
.fp-detail-body { padding: 1.5rem 2rem; }
.fp-detail-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.fp-detail-badge {
  display: inline-flex;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius);
  background: var(--primary-50);
  color: var(--primary);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
}
.fp-detail-compat {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--slate-400);
}
.fp-detail-body h2 {
  margin: 0 0 0.75rem;
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 700;
  color: var(--slate-900);
  line-height: 1.2;
}
.fp-detail-summary {
  margin: 0;
  color: var(--slate-600);
  font-size: 14px;
  line-height: 1.65;
}
.fp-feat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--slate-100);
}
@media (min-width: 768px) { .fp-feat-grid { grid-template-columns: 1fr 1fr; } }
.fp-feat-item {
  padding: 1rem;
  border-radius: var(--radius);
  background: var(--surface-white);
  border: 1px solid var(--slate-200);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.fp-feat-head {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.fp-feat-head svg { color: var(--primary); flex-shrink: 0; margin-top: 1px; }
.fp-feat-head h4 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--slate-900);
  line-height: 1.35;
}
.fp-feat-item > p {
  margin: 0;
  font-size: 12px;
  color: var(--slate-600);
  line-height: 1.45;
}
.fp-feat-tip {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--slate-200);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--slate-500);
  line-height: 1.45;
}
.fp-gallery-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
}
.fp-gallery-badge {
  display: inline-flex;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius);
  background: var(--primary-50);
  color: var(--primary);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.fp-gallery-head h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 700;
  color: var(--slate-900);
}
.fp-gallery-note {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--slate-500);
}
.fp-gallery {
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--slate-200);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}
.fp-gallery-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--surface-white);
  border-bottom: 1px solid var(--slate-200);
  font-family: var(--mono);
  font-size: 11px;
}
.fp-gallery-bar-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.fp-dots { display: flex; gap: 0.35rem; }
.fp-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.fp-dots span:nth-child(1) { background: #70b5ff; }
.fp-dots span:nth-child(2) { background: #f59e0b; }
.fp-dots span:nth-child(3) { background: #70b5ff; }
.fp-file-tab {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--slate-300);
  color: var(--primary);
  font-weight: 700;
  max-width: 220px;
}
.fp-file-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-gallery-bar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.fp-engine-tag {
  display: none;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--slate-300);
  color: var(--slate-700);
}
@media (min-width: 768px) { .fp-engine-tag { display: inline-block; } }
.fp-badge-tag {
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius);
  background: var(--primary-50);
  border: 1px solid #cbddea;
  color: var(--primary);
  font-weight: 700;
}
.fp-zoom-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius);
  border: 1px solid var(--slate-300);
  background: #fff;
  color: var(--slate-700);
  cursor: pointer;
}
.fp-zoom-btn:hover { background: var(--slate-200); }
.fp-showcase {
  position: relative;
  background: var(--primary);
  overflow: hidden;
}
.fp-showcase-inner {
  position: relative;
  aspect-ratio: 16 / 9;
  max-height: 480px;
  overflow: hidden;
}
.fp-showcase-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.fp-showcase-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(2, 6, 23, 0.95) 0%, rgba(2, 6, 23, 0.3) 45%, transparent 100%);
  pointer-events: none;
}
.fp-showcase-zoom {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--slate-300);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--slate-800);
  cursor: pointer;
  z-index: 2;
}
.fp-showcase-zoom:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.fp-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--slate-300);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.fp-nav-btn:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.fp-nav-btn.prev { left: 0.75rem; }
.fp-nav-btn.next { right: 0.75rem; }
.fp-showcase-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.25rem 1.5rem;
  color: #fff;
  pointer-events: none;
  z-index: 2;
}
.fp-showcase-caption-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.fp-showcase-caption-tags .tag {
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius);
  background: var(--primary);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
.fp-showcase-caption-tags .fname {
  font-family: var(--mono);
  font-size: 11px;
  color: #fcd34d;
  font-weight: 700;
}
.fp-showcase-caption-tags .fmt {
  font-family: var(--mono);
  font-size: 11px;
  color: #cbd5e1;
}
.fp-showcase-caption h4 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 700;
  line-height: 1.2;
}
.fp-showcase-caption p {
  margin: 0.35rem 0 0;
  font-size: 12px;
  color: #e2e8f0;
  line-height: 1.5;
  max-width: 48rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fp-highlights {
  padding: 1rem 1.25rem;
  background: #fff;
  border-top: 1px solid var(--slate-200);
}
.fp-highlights > span {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--slate-600);
  margin-bottom: 0.65rem;
}
.fp-highlights-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 768px) { .fp-highlights-grid { grid-template-columns: repeat(3, 1fr); } }
.fp-highlight-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.75rem;
  border-radius: var(--radius);
  background: var(--surface-white);
  border: 1px solid var(--slate-200);
  font-size: 12px;
  color: var(--slate-700);
  line-height: 1.45;
}
.fp-highlight-item svg { color: var(--primary); flex-shrink: 0; margin-top: 1px; }
.fp-thumbs {
  padding: 1rem;
  background: var(--surface-white);
  border-top: 1px solid var(--slate-200);
}
.fp-thumbs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-family: var(--mono);
  font-size: 11px;
}
.fp-thumbs-head strong {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--slate-700);
}
.fp-thumbs-head span { color: var(--primary); font-weight: 700; }
.fp-thumbs-head span.fp-thumbs-hint { display: none; color: var(--primary); }
@media (min-width: 640px) { .fp-thumbs-head span.fp-thumbs-hint { display: inline; } }
.fp-thumbs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem;
}
@media (min-width: 640px) { .fp-thumbs-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .fp-thumbs-grid { grid-template-columns: repeat(6, 1fr); } }
.fp-thumb {
  position: relative;
  padding: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--slate-300);
  background: #fff;
  text-align: left;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.fp-thumb:hover { opacity: 1; border-color: var(--slate-400); }
.fp-thumb.active {
  opacity: 1;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(38,129,220, 0.25);
}
.fp-thumb-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--primary);
  position: relative;
}
.fp-thumb-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s;
}
.fp-thumb:hover .fp-thumb-media img { transform: scale(1.05); }
.fp-thumb-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid #fff;
}
.fp-thumb-meta {
  padding: 0.5rem;
  border-top: 1px solid var(--slate-200);
}
.fp-thumb-meta .fn {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--slate-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fp-thumb-meta .fb {
  display: block;
  font-size: 11px;
  font-weight: 700;
  margin-top: 2px;
  color: var(--slate-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fp-thumb.active .fp-thumb-meta .fb { color: var(--primary); }
/* Command registry — clean technical reference */
.fp-cmd-ref {
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}
.fp-cmd-ref-head {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--slate-200);
  background: #ffffff;
}
.fp-cmd-ref-id {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-500);
  margin-bottom: 0.35rem;
}
.fp-cmd-ref-head h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--slate-900);
  letter-spacing: -0.01em;
}
.fp-cmd-ref-head p {
  margin: 0.35rem 0 0;
  font-size: 12px;
  color: var(--slate-600);
  line-height: 1.5;
}
.fp-cmd-ref-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--slate-200);
  background: #fff;
}
.fp-cmd-ref-search {
  position: relative;
  flex: 1 1 220px;
  min-width: 0;
}
.fp-cmd-ref-search svg {
  position: absolute;
  left: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--slate-400);
  pointer-events: none;
}
.fp-cmd-ref-search input {
  width: 100%;
  padding: 0.5rem 0.65rem 0.5rem 2rem;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  background: #fff;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--slate-900);
  outline: none;
}
.fp-cmd-ref-search input:focus {
  border-color: var(--slate-400);
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.2);
}
.fp-cmd-ref-select {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--slate-600);
  flex-shrink: 0;
}
.fp-cmd-ref-select select {
  padding: 0.45rem 1.75rem 0.45rem 0.55rem;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  background: #fff;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--slate-800);
  cursor: pointer;
  outline: none;
}
.fp-cmd-ref-select select:focus { border-color: var(--slate-400); }
.fp-cmd-ref-count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--slate-500);
  white-space: nowrap;
}
.fp-cmd-ref-table-wrap {
  max-height: 400px;
  overflow: auto;
  border-bottom: 1px solid var(--slate-200);
}
.fp-cmd-ref-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.fp-cmd-ref-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
}
.fp-cmd-ref-table th {
  padding: 0.55rem 0.85rem;
  text-align: left;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-600);
  background: #ffffff;
  border-bottom: 2px solid var(--slate-300);
  white-space: nowrap;
}
.fp-cmd-ref-table th:nth-child(1) { width: 5.5rem; }
.fp-cmd-ref-table th:nth-child(2) { width: 11rem; }
.fp-cmd-ref-table th:nth-child(3) { width: 7rem; }
.fp-cmd-ref-table td {
  padding: 0.5rem 0.85rem;
  border-bottom: 1px solid var(--slate-200);
  vertical-align: top;
  line-height: 1.45;
}
.fp-cmd-ref-table tbody tr:nth-child(even) td { background: #ffffff; }
.fp-cmd-ref-table tbody tr:hover td { background: #ffffff; }
.fp-cmd-alias-btn {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--slate-900);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
  transition: color 0.12s, text-decoration-color 0.12s;
}
.fp-cmd-alias-btn:hover {
  color: var(--primary);
  text-decoration-color: var(--primary);
}
.fp-cmd-alias-btn.copied {
  color: var(--primary);
  text-decoration-color: var(--primary);
}
.fp-cmd-cell-cmd {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--slate-800);
  word-break: break-all;
}
.fp-cmd-cell-grp {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--slate-500);
  white-space: nowrap;
}
.fp-cmd-cell-desc {
  font-size: 12px;
  color: var(--slate-600);
}
.fp-cmd-empty {
  padding: 2rem 1rem !important;
  text-align: center;
  color: var(--slate-500);
  font-size: 12px;
  font-family: var(--font);
}
.fp-cmd-ref-foot {
  padding: 0.55rem 1rem;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--slate-400);
  background: #ffffff;
  letter-spacing: 0.02em;
}
@media (max-width: 640px) {
  .fp-cmd-ref-table th:nth-child(3),
  .fp-cmd-ref-table td:nth-child(3) { display: none; }
  .fp-cmd-ref-count { width: 100%; margin-left: 0; }
}

/* ===== Shared tab pages (ecosystem, comparison, pricing, resources, support) ===== */
.tp-header {
  padding: 2.5rem 0 3rem;
  background: var(--surface-white);
  border-bottom: 1px solid var(--slate-200);
}
.tp-header-grid { background: #fff; position: relative; overflow: hidden; }
.tp-header-text { max-width: 48rem; position: relative; z-index: 1; }
.tp-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.25rem 0.75rem; border-radius: var(--radius);
  background: var(--primary-soft); border: 1px solid #cbddea;
  color: var(--primary); font-family: var(--mono); font-size: 11px;
  font-weight: 700; text-transform: uppercase; margin-bottom: 0.75rem;
}
.tp-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); display: inline-block; }
.tp-header h1 {
  margin: 0; font-family: var(--display); font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.1;
}
.tp-header h1 .accent { color: var(--primary); }
.tp-header-text > p { margin: 0.75rem 0 0; color: var(--slate-600); font-size: 14px; line-height: 1.65; max-width: 42rem; }
.tp-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.65rem; margin-top: 1.5rem; font-family: var(--mono); font-size: 11px; }
@media (min-width: 640px) { .tp-metrics { grid-template-columns: repeat(4, 1fr); } }
.tp-metrics > div { padding: 0.75rem; border-radius: var(--radius); background: var(--surface-white); border: 1px solid var(--slate-200); }
.tp-metrics span { display: block; color: var(--slate-500); font-size: 10px; margin-bottom: 0.15rem; }
.tp-metrics strong { font-size: 12px; color: var(--slate-900); }
.tp-metrics > div:nth-child(1) strong,
.tp-metrics > div:nth-child(3) strong { color: var(--primary); }
.tp-metrics > div:nth-child(4) strong { color: #b45309; }
.tp-header-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1.25rem; }
.tp-subnav-wrap { position: sticky; top: 4.5rem; z-index: 20; background: rgba(255,255,255,0.95); border-bottom: 1px solid var(--slate-200); backdrop-filter: blur(8px); }
.tp-subnav { display: flex; gap: 0.35rem; overflow-x: auto; padding: 0.65rem 0; font-family: var(--mono); font-size: 11px; }
.tp-sub {
  padding: 0.5rem 0.85rem; border-radius: var(--radius); border: 1px solid var(--slate-200);
  background: #fff; color: var(--slate-700); font-weight: 700; white-space: nowrap; cursor: pointer;
}
.tp-sub:hover { background: var(--surface-white); }
.tp-sub.active { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 2px 8px rgba(38,129,220,0.2); }
.tp-section { padding: 3rem 0; background: #fff; }
.tp-section-alt { background: var(--surface-white); }
.tp-block-head { max-width: 40rem; margin-bottom: 1.5rem; }
.tp-block-head h2 { margin: 0; font-family: var(--display); font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 700; text-transform: uppercase; }
.tp-block-head p { margin: 0.35rem 0 0; font-size: 13px; color: var(--slate-600); line-height: 1.55; }
.tp-table-wrap { overflow-x: auto; border: 1px solid var(--slate-200); border-radius: var(--radius); }
.tp-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.tp-table th, .tp-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--slate-200); vertical-align: top; }
.tp-table thead th { background: var(--surface-white); font-family: var(--mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate-600); }
.tp-table tr.alt td { background: rgba(248,250,252,0.8); }
.tp-table .col-anfa { background: rgba(242,248,254,0.6); border-left: 1px solid #cbddea; border-right: 1px solid #cbddea; color: var(--primary); font-weight: 600; }
.tp-table thead .col-anfa { background: var(--primary-soft); color: var(--primary); }
.tp-check { color: var(--primary); font-weight: 700; margin-right: 0.25rem; }
.tp-yes { color: var(--primary); font-weight: 700; }
.tp-no { color: var(--slate-400); }
.tp-callout { margin-top: 1.25rem; padding: 1rem 1.25rem; border-radius: var(--radius); background: var(--surface-white); border: 1px solid var(--slate-200); font-size: 13px; color: var(--slate-700); }
.tp-pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: stretch;
  padding-top: 0.75rem;
}
@media (min-width: 1024px) {
  .tp-pricing-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}
.tp-price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  border: 1px solid var(--slate-200);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.tp-price-card.recommended {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary), 0 10px 28px rgba(38,129,220, 0.12);
  z-index: 1;
}
.tp-price-pop,
.tp-price-pop-spacer {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1.75rem;
  margin: -0.55rem auto 0;
  padding: 0 0.85rem;
  width: fit-content;
  max-width: calc(100% - 1.5rem);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  line-height: 1;
  position: relative;
  z-index: 2;
}
.tp-price-pop {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 4px 10px rgba(38,129,220, 0.25);
}
.tp-price-pop-spacer {
  visibility: hidden;
  pointer-events: none;
}
.tp-price-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 0.85rem 1.35rem 1.35rem;
}
.tp-price-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.65rem;
  min-height: 2.75rem;
  margin-bottom: 0.45rem;
}
.tp-price-title {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
}
.tp-price-title svg {
  color: var(--primary);
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}
.tp-price-title h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--slate-900);
}
.tp-price-badge {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  background: var(--surface-white);
  color: var(--slate-600);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.tp-price-card.recommended .tp-price-badge {
  background: var(--primary-soft);
  color: var(--primary);
}
.tp-price-sub {
  margin: 0;
  min-height: 2.6em;
  font-size: 12px;
  color: var(--slate-500);
  line-height: 1.45;
}
.tp-price-amount {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  margin: 1rem 0 0.65rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--slate-100);
}
.tp-price-amount strong {
  font-family: var(--display);
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--slate-900);
  letter-spacing: -0.02em;
  line-height: 1;
}
.tp-price-amount span {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--slate-500);
}
.tp-price-note {
  min-height: 2.6em;
  margin: 0 0 1rem;
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  line-height: 1.45;
}
.tp-price-feats-label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--slate-400);
  margin-bottom: 0.55rem;
}
.tp-price-feats {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  flex: 1 1 auto;
}
.tp-price-feats li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
  font-size: 12px;
  color: var(--slate-700);
  line-height: 1.4;
}
.tp-price-feats li:last-child { margin-bottom: 0; }
.tp-price-feats svg {
  color: var(--primary);
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 1px;
}
.tp-price-cta {
  margin-top: auto;
  height: 42px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.tp-faq-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 768px) { .tp-faq-grid { grid-template-columns: 1fr 1fr; } }
.tp-faq-item { padding: 1rem; border-radius: var(--radius); background: var(--surface-white); border: 1px solid var(--slate-200); }
.tp-faq-item strong { display: block; font-size: 13px; color: var(--slate-900); margin-bottom: 0.35rem; }
.tp-faq-item p { margin: 0; font-size: 12px; color: var(--slate-600); line-height: 1.5; }
.tp-dl-grid, .tp-lib-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .tp-dl-grid, .tp-lib-grid { grid-template-columns: 1fr 1fr; } }
.tp-dl-card, .tp-lib-card { padding: 1.25rem; border-radius: var(--radius); background: #fff; border: 1px solid var(--slate-200); }
.tp-dl-ver { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--primary); text-transform: uppercase; }
.tp-dl-card h3, .tp-lib-card h3 { margin: 0.35rem 0 0.5rem; font-family: var(--display); font-size: 1rem; font-weight: 700; }
.tp-dl-card p, .tp-lib-card p { margin: 0 0 0.75rem; font-size: 12px; color: var(--slate-600); line-height: 1.45; }
.tp-dl-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; font-family: var(--mono); font-size: 10px; color: var(--slate-500); margin-bottom: 0.85rem; }
.tp-lib-size { display: inline-block; font-family: var(--mono); font-size: 10px; color: var(--slate-500); margin-bottom: 0.5rem; }
.tp-lib-card ul { margin: 0 0 0.85rem; padding-left: 1.1rem; font-size: 12px; color: var(--slate-600); }
.tp-vid-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .tp-vid-grid { grid-template-columns: 1fr 1fr; } }
.tp-vid-card { padding: 1rem; border-radius: var(--radius); background: #fff; border: 1px solid var(--slate-200); }
.tp-vid-thumb { aspect-ratio: 16/9; background: var(--primary); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; position: relative; margin-bottom: 0.65rem; color: #fff; }
.tp-vid-thumb span { position: absolute; bottom: 0.5rem; right: 0.5rem; font-family: var(--mono); font-size: 10px; background: rgba(0,0,0,0.6); padding: 0.15rem 0.4rem; border-radius: var(--radius); }
.tp-vid-cat { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--primary); text-transform: uppercase; }
.tp-vid-card h3 { margin: 0.25rem 0; font-size: 13px; font-weight: 700; line-height: 1.35; }
.tp-vid-card p { margin: 0; font-size: 11px; color: var(--slate-500); }
.tp-guide-search { position: relative; max-width: 28rem; margin-bottom: 1rem; }
.tp-guide-search svg { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); width: 16px; color: var(--slate-400); }
.tp-guide-search input { width: 100%; padding: 0.6rem 0.75rem 0.6rem 2.25rem; border: 1px solid var(--slate-200); border-radius: var(--radius); font-size: 13px; }
.tp-guide-list { display: flex; flex-direction: column; gap: 0.65rem; }
.tp-guide-item { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem; border-radius: var(--radius); background: #fff; border: 1px solid var(--slate-200); }
.tp-guide-cat { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--primary); text-transform: uppercase; }
.tp-guide-item h3 { margin: 0.25rem 0; font-size: 14px; font-weight: 700; }
.tp-guide-item p { margin: 0; font-size: 12px; color: var(--slate-600); line-height: 1.45; }
.tp-guide-time { font-family: var(--mono); font-size: 11px; color: var(--slate-500); white-space: nowrap; flex-shrink: 0; }

/* ===== Resources page ===== */
.res-page { background: #fff; }
.res-hero {
  padding: 2.75rem 0 2.25rem;
  background:
    linear-gradient(90deg, rgba(38,129,220, 0.06), transparent 42%),
    #ffffff;
  border-bottom: 1px solid var(--slate-200);
}
.res-hero-inner {
  max-width: 48rem;
  text-align: left;
}
.res-kicker {
  margin: 0 0 0.65rem;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
}
.res-hero h1 {
  margin: 0;
  font-size: clamp(1.75rem, 4vw, 2.65rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--slate-900);
  text-transform: none;
}
.res-hero h1 span { color: var(--primary); }
.res-lead {
  margin: 0.85rem 0 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--slate-700);
  line-height: 1.65;
}
.res-shell { padding: 2rem 0 3.25rem; }
.res-shell-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (min-width: 960px) {
  .res-shell-grid {
    grid-template-columns: 15.5rem minmax(0, 1fr);
    gap: 2.25rem;
  }
}
.res-nav {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding-bottom: 0.15rem;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 960px) {
  .res-nav {
    flex-direction: column;
    position: sticky;
    top: 5.5rem;
    overflow: visible;
  }
}
.res-nav-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  min-width: max-content;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--slate-200);
  border-radius: 4px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
@media (min-width: 960px) {
  .res-nav-item { min-width: 0; width: 100%; }
}
.res-nav-item:hover { border-color: #cbddea; }
.res-nav-item.active {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.res-nav-num {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.4;
}
.res-nav-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.res-nav-text strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--slate-900);
  line-height: 1.3;
}
.res-nav-text em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--slate-500);
}
.res-body-head { margin-bottom: 1.15rem; max-width: 40rem; }
.res-body-head h2 {
  margin: 0;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 700;
  color: var(--slate-900);
}
.res-body-head p {
  margin: 0.35rem 0 0;
  font-size: 14px;
  color: var(--slate-600);
  line-height: 1.5;
}
.res-playlist-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.75rem;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
}
.res-playlist-link svg { width: 14px; height: 14px; }
.res-playlist-link:hover { text-decoration: underline; }
.res-body {
  background: #fff;
  min-width: 0;
}
.res-tag {
  display: inline-flex;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary);
}
.res-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--slate-500);
}
.res-feature {
  padding: 1.35rem 1.4rem 1.45rem;
  border: 1px solid #cbddea;
  border-left: 3px solid var(--primary);
  background: linear-gradient(135deg, #fff 0%, var(--primary-soft) 100%);
  margin-bottom: 0.85rem;
}
.res-feature-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}
.res-feature h3 {
  margin: 0 0 0.4rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--slate-900);
  line-height: 1.3;
}
.res-feature > p {
  margin: 0 0 1rem;
  max-width: 44rem;
  font-size: 14px;
  color: var(--slate-700);
  line-height: 1.55;
}
.res-feature .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.res-feature .btn svg { width: 16px; height: 16px; }
.res-rows {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--slate-200);
}
.res-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--slate-200);
  align-items: start;
}
@media (min-width: 720px) {
  .res-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.25rem;
  }
}
.res-row-main h3 {
  margin: 0.3rem 0 0.35rem;
  font-size: 15px;
  font-weight: 700;
  color: var(--slate-900);
  line-height: 1.35;
}
.res-row-main > p {
  margin: 0 0 0.45rem;
  font-size: 13px;
  color: var(--slate-600);
  line-height: 1.5;
}
.res-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
}
.res-chips span {
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--slate-200);
  background: var(--surface-white);
  font-size: 11px;
  font-weight: 600;
  color: var(--slate-700);
}
.res-search {
  position: relative;
  max-width: 28rem;
  margin-bottom: 1rem;
}
.res-search svg {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--slate-400);
}
.res-search input {
  width: 100%;
  padding: 0.7rem 0.85rem 0.7rem 2.4rem;
  border: 1px solid var(--slate-200);
  border-radius: 4px;
  font-size: 14px;
  background: #fff;
}
.res-vid-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--slate-200);
  background: #fff;
}
.res-vid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--slate-200);
  transition: background 0.15s ease;
}
.res-vid:hover { background: #ffffff; }
.res-vid-thumb {
  position: relative;
  width: 7.5rem;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  background: var(--primary);
  flex-shrink: 0;
}
.res-vid-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.res-vid-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: auto;
  height: auto;
  background: rgba(15, 23, 42, 0.35);
  color: #fff;
  flex-shrink: 0;
}
.res-vid:hover .res-vid-play { background: rgba(38,129,220, 0.55); }
.res-vid-play svg { width: 18px; height: 18px; }
@media (max-width: 520px) {
  .res-vid {
    grid-template-columns: 5.25rem 1fr;
    gap: 0.55rem;
  }
  .res-vid-thumb { width: 5.25rem; }
  .res-vid-dur { display: none; }
  .res-vid-body h3 { font-size: 12.5px; }
  .res-vid-body p { font-size: 11px; }
}
.res-vid-body h3 {
  margin: 0.25rem 0 0.2rem;
  font-size: 14px;
  font-weight: 700;
  color: var(--slate-900);
  line-height: 1.35;
}
.res-vid-body p {
  margin: 0;
  font-size: 12px;
  color: var(--slate-500);
}
.res-vid-dur {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--slate-500);
  white-space: nowrap;
}
.res-empty {
  margin: 1rem 0 0;
  font-size: 14px;
  color: var(--slate-500);
}

/* ===== Ecosystem page ===== */
.eco-page { background: #fff; color: var(--slate-800); }
.eco-page [id] { scroll-margin-top: 5.5rem; }
.eco-hero {
  position: relative;
  min-height: 31rem;
  overflow: hidden;
  isolation: isolate;
  background: #101418;
  color: #fff;
}
.eco-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
  min-height: 31rem;
  gap: 3rem;
  align-items: center;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.eco-hero-copy { max-width: 43rem; }
.eco-kicker {
  margin: 0 0 1rem;
  color: #70b5ff;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.eco-kicker span { padding: 0 0.35rem; color: #94a3b8; }
.eco-hero-copy h1 {
  margin: 0;
  color: #fff;
  font-family: var(--display);
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 1.03;
}
.eco-hero-copy h1 span { color: #e2e8f0; }
.eco-lead {
  max-width: 39rem;
  margin: 1.15rem 0 0;
  color: #e2e8f0;
  font-size: 15px;
  line-height: 1.7;
}
.eco-hero-note {
  max-width: 38rem;
  margin: 1rem 0 0;
  padding-left: 0.8rem;
  border-left: 2px solid var(--primary);
  color: #aeb9c7;
  font-size: 12px;
  line-height: 1.55;
}
.eco-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 1.6rem;
}
.eco-hero-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.eco-hero-link:hover { color: #70b5ff; }
.eco-hero-link svg,
.eco-catalog-link svg { width: 15px; height: 15px; }
.eco-hero-visual {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 22rem;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem 0.75rem 0.5rem 1.5rem;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 28px 28px;
}
.eco-visual-meta,
.eco-visual-footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: #94a3b8;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.07em;
}
.eco-hero-visual svg { display: block; width: 100%; max-height: 17rem; }
.eco-drawing-grid { stroke: #64748b; stroke-width: 0.6; opacity: 0.22; }
.eco-drawing-lines { stroke: #d1d8e0; stroke-width: 1.15; opacity: 0.83; }
.eco-drawing-accent { stroke: #70b5ff; stroke-width: 1.5; opacity: 0.95; }
.eco-drawing-accent circle { fill: #101418; stroke-width: 1.5; }
.eco-visual-footer span:first-child { color: #70b5ff; font-weight: 700; }
.eco-anchor-nav {
  position: relative;
  z-index: 2;
  background: #fff;
  border-bottom: 1px solid var(--slate-200);
}
.eco-anchor-nav > .container {
  display: flex;
  align-items: stretch;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  min-height: 3.5rem;
  overflow-x: auto;
}
.eco-anchor-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
  border-bottom: 2px solid transparent;
  color: var(--slate-700);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.eco-anchor-nav a:hover { border-bottom-color: var(--primary); color: var(--slate-900); }
.eco-anchor-nav a span {
  color: var(--primary);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
}
.eco-content { padding-top: 4rem; padding-bottom: 4.5rem; }
.eco-block { margin-bottom: 4.5rem; }
.eco-block:last-child { margin-bottom: 0; }
.eco-block-head { max-width: 47rem; margin-bottom: 2rem; }
.eco-section-index {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--primary);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.eco-block-head h2 {
  margin: 0;
  color: var(--slate-900);
  font-family: var(--display);
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.15;
  text-transform: none;
}
.eco-block-head p {
  max-width: 43rem;
  margin: 0.7rem 0 0;
  color: var(--slate-600);
  font-size: 14px;
  line-height: 1.65;
}
.eco-toolset-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(1.25rem, 3.5vw, 3rem);
  row-gap: 2rem;
}
.eco-toolset-item {
  min-width: 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--slate-300);
}
.eco-toolset-top { display: flex; align-items: center; gap: 0.8rem; }
.eco-toolset-index {
  color: var(--primary);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
}
.eco-toolset-icon { display: inline-flex; color: var(--slate-700); }
.eco-toolset-icon svg { width: 20px; height: 20px; stroke-width: 1.5; }
.eco-toolset-item h3 {
  margin: 1rem 0 0;
  color: var(--slate-900);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
}
.eco-toolset-item p { margin: 0.3rem 0 0; color: var(--slate-600); font-size: 12px; line-height: 1.5; }
.eco-products-block {
  padding-top: 3.5rem;
  border-top: 1px solid var(--slate-200);
}
.eco-product-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
}
.eco-product-group {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.7rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--slate-300);
}
.eco-product-index {
  padding-top: 0.1rem;
  color: var(--primary);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
}
.eco-product-group h3 {
  margin: 0;
  color: var(--slate-900);
  font-size: 13px;
  font-weight: 700;
}
.eco-product-group p {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.45rem;
  margin: 0.5rem 0 0;
  color: var(--slate-600);
  font-size: 12px;
  line-height: 1.6;
}
.eco-product-group p i { color: var(--primary); font-style: normal; }
.eco-catalog-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 1.5rem 0 0 3.2rem;
  color: var(--slate-900);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.eco-catalog-link:hover { color: var(--primary); }
.eco-cta {
  padding: 2.5rem 0;
  background: #101418;
  color: #fff;
}
.eco-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.eco-cta-inner > div:first-child { max-width: 44rem; }
.eco-cta-inner > div:first-child > span {
  color: #70b5ff;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.eco-cta h2 {
  margin: 0.45rem 0;
  color: #fff;
  font-family: var(--display);
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.eco-cta p { margin: 0; color: #aeb9c7; font-size: 13px; line-height: 1.55; }
.eco-cta-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; flex-shrink: 0; }
.eco-cta-outline {
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #fff !important;
  background: transparent !important;
}
.eco-cta-outline:hover { border-color: #fff !important; background: rgba(255, 255, 255, 0.06) !important; }
@media (max-width: 760px) {
  .eco-hero,
  .eco-hero-inner { min-height: 29rem; }
  .eco-hero-inner { grid-template-columns: 1fr; gap: 1.5rem; padding-top: 3rem; padding-bottom: 2rem; }
  .eco-hero-visual { min-height: 15rem; padding-left: 0.75rem; border-left: 0; }
  .eco-hero-visual svg { max-height: 10rem; }
  .eco-toolset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eco-cta-inner { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 520px) {
  .eco-hero,
  .eco-hero-inner { min-height: 0; }
  .eco-hero-inner { padding-top: 3.25rem; padding-bottom: 3rem; }
  .eco-hero-copy h1 { font-size: clamp(2.25rem, 11vw, 3rem); }
  .eco-hero-visual { min-height: 12rem; }
  .eco-visual-meta, .eco-visual-footer { font-size: 8px; }
  .eco-anchor-nav > .container { gap: 1.5rem; }
  .eco-content { padding-top: 3rem; padding-bottom: 3rem; }
  .eco-block { margin-bottom: 3.5rem; }
  .eco-toolset-grid,
  .eco-product-groups { grid-template-columns: 1fr; }
  .eco-product-group { grid-template-columns: 2rem minmax(0, 1fr); }
  .eco-catalog-link { margin-left: 2.7rem; }
}
/* ===== Support page (distinct layout) ===== */
.sup-page { background: #fff; }
.sup-hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, #ffffff 0%, #fff 70%);
  color: var(--slate-700);
  padding: 3rem 0 3.25rem;
  border-bottom: 1px solid var(--slate-200);
}
.sup-hero::after {
  content: "";
  position: absolute;
  inset: auto -8% -40% auto;
  width: min(42vw, 28rem);
  height: min(42vw, 28rem);
  border: 1px solid rgba(38,129,220, 0.08);
  border-radius: 50%;
  pointer-events: none;
}
.sup-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: stretch;
}
@media (min-width: 960px) {
  .sup-hero-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.85fr);
    gap: 2.75rem;
    align-items: center;
  }
}
.sup-kicker {
  margin: 0 0 0.85rem;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
}
.sup-hero-main h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.85rem, 4.2vw, 2.85rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--slate-900);
  text-transform: none;
}
.sup-hero-main h1 span {
  display: inline;
  color: var(--primary);
}
.sup-lead {
  margin: 1rem 0 0;
  max-width: 36rem;
  font-size: 15px;
  line-height: 1.65;
  color: var(--slate-600);
}
.sup-lead strong { color: var(--slate-900); font-weight: 700; }
.sup-primary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.35rem;
  margin-top: 1.75rem;
  padding: 1rem 0 0;
  border-top: 1px solid var(--slate-200);
}
.sup-primary-meta span {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-500);
  margin-bottom: 0.2rem;
}
.sup-phone {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--slate-900);
  line-height: 1;
}
.sup-phone:hover { color: var(--primary); }
.sup-primary .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.sup-primary .btn svg { width: 16px; height: 16px; }
.sup-steps {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
  max-width: 32rem;
}
@media (min-width: 640px) {
  .sup-steps { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
}
.sup-steps li {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-top: 0.65rem;
  border-top: 2px solid rgba(38,129,220, 0.65);
}
.sup-steps em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
}
.sup-steps span {
  font-size: 12px;
  color: var(--slate-600);
  line-height: 1.4;
}
.sup-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.35rem 1.4rem 1.5rem;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 10px;
  box-shadow: 0 10px 36px rgba(15, 23, 42, 0.06);
}
.sup-panel-top {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--slate-700);
}
.sup-panel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15);
  animation: sup-pulse 1.8s ease-in-out infinite;
}
@keyframes sup-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
.sup-panel-live {
  margin-left: auto;
  color: #16a34a;
}
.sup-panel h2 {
  margin: 0.25rem 0 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--slate-900);
  line-height: 1.3;
}
.sup-panel > p {
  margin: 0;
  font-size: 13px;
  color: var(--slate-500);
  line-height: 1.55;
}
.sup-panel-list {
  list-style: none;
  margin: 0.25rem 0 0.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.sup-panel-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 13px;
  color: var(--slate-700);
  line-height: 1.4;
}
.sup-panel-list svg {
  width: 15px;
  height: 15px;
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 1px;
}
.sup-panel-btn {
  margin-top: auto;
  width: 100%;
  justify-content: center;
  background: #fff;
  border-color: #cbddea;
  color: var(--primary);
  text-decoration: none;
}
.sup-panel-btn:hover {
  background: var(--primary-soft);
  color: var(--primary-dark);
  border-color: #70b5ff;
}
.sup-panel-btn svg { width: 15px; height: 15px; }

.sup-contacts {
  padding: 2.75rem 0 3.25rem;
  background: #fff;
  border-top: 1px solid var(--slate-200);
}
.sup-contacts-head {
  max-width: 36rem;
  margin-bottom: 1.25rem;
}
.sup-contacts-head h2 {
  margin: 0;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 700;
  color: var(--slate-900);
}
.sup-contacts-head p {
  margin: 0.35rem 0 0;
  font-size: 14px;
  color: var(--slate-600);
  line-height: 1.5;
}
.sup-contact-rows {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--slate-200);
}
@media (min-width: 900px) {
  .sup-contact-rows { grid-template-columns: repeat(4, 1fr); }
}
.sup-contact-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 0.75rem;
  row-gap: 0.2rem;
  padding: 1.1rem 0.15rem;
  border-bottom: 1px solid var(--slate-200);
  color: inherit;
  text-decoration: none;
  transition: background 0.15s ease;
}
@media (min-width: 900px) {
  .sup-contact-row {
    padding: 1.15rem 1rem 1.15rem 0;
    border-bottom: 0;
    border-right: 1px solid var(--slate-200);
  }
  .sup-contact-row:last-child { border-right: 0; padding-right: 0; }
  .sup-contact-row:not(:first-child) { padding-left: 1rem; }
}
.sup-contact-row:hover:not(.is-static) { background: var(--primary-soft); }
.sup-contact-label {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--slate-500);
}
.sup-contact-row strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--slate-900);
  line-height: 1.35;
}
.sup-contact-row em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  align-self: end;
}
.sup-office-line {
  margin-top: 1.75rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--slate-200);
}
.sup-office-line span {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--slate-500);
  margin-bottom: 0.25rem;
}
.sup-office-line p {
  margin: 0;
  font-size: 13px;
  color: var(--slate-700);
  line-height: 1.5;
}

/* Subtle scroll reveal for page sections and content cards */
.has-scroll-reveal [data-reveal-ready] {
  opacity: 0;
  transform: translate3d(var(--reveal-x, 0), var(--reveal-y, 18px), 0) scale(var(--reveal-scale, 1));
  transition:
    opacity 620ms cubic-bezier(0.2, 0.7, 0.25, 1),
    transform 620ms cubic-bezier(0.2, 0.7, 0.25, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.has-scroll-reveal [data-reveal-ready].is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .has-scroll-reveal [data-reveal-ready],
  .has-scroll-reveal [data-reveal-ready].is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
}



/* ==========================================================================
   Extended page styles
   Rules remain in cascade order: page layouts, refinements, responsive styles.
   ========================================================================== */

/* Comparison — product evaluation */

.cmp-hero {
  background:#181818;
  color:#fff;
  padding:74px 0 64px
}

.cmp-hero-inner {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:48px
}

.cmp-eyebrow {
  display:block;
  font-size:11px;
  font-weight:600;
  letter-spacing:.09em;
  color:#777;
  margin-bottom:20px
}

.cmp-hero .cmp-eyebrow {
  color:#aaa
}

.cmp-hero h1 {
  font-size:clamp(36px,4vw,54px);
  line-height:1.12;
  letter-spacing:-.04em;
  margin:0 0 24px
}

.cmp-hero p {
  max-width:570px;
  font-size:17px;
  color:#bbb;
  line-height:1.7;
  margin:0
}

.cmp-jump {
  display:flex;
  align-items:center;
  gap:20px;
  border-bottom:1px solid #666;
  padding:14px 0;
  white-space:nowrap;
  font-size:14px
}

.cmp-jump:hover {
  color:#70b5ff
}

.cmp-jump svg {
  width:18px;
  height:18px
}

.cmp-main {
  padding:64px 0
}

.cmp-intro {
  display:flex;
  justify-content:space-between;
  gap:40px;
  margin-bottom:32px;
  align-items:start
}

.cmp-intro h2 {
  font-size:28px;
  margin:0;
  letter-spacing:-.025em
}

.cmp-intro p {
  font-size:14px;
  color:#666;
  line-height:1.7;
  margin:0
}

.cmp-table-shell {
  scroll-margin-top:100px
}

.cmp-table {
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  text-align:left;
  font-size:15px;
  line-height:1.65
}

.cmp-criteria-col {
  width:24%
}

.cmp-table th,.cmp-table td {
  padding:22px 26px;
  vertical-align:top;
  border-bottom:1px solid #e2e2e2
}

.cmp-table thead th {
  background:#ffffff;
  font-size:19px;
  font-weight:600;
  border-top:1px solid #ddd;
  padding-top:28px;
  padding-bottom:28px
}

.cmp-table thead th:first-child {
  font-size:13px;
  color:#777;
  vertical-align:middle;
  font-weight:500
}

.cmp-table thead th>div {
  display:inline-block;
  vertical-align:middle
}

.cmp-table thead small {
  display:block;
  font-size:12px;
  font-weight:400;
  color:#777;
  margin-top:5px
}

.cmp-table thead .cmp-anfa-head {
  border-top:3px solid var(--primary);
  background:#ffffff
}

.cmp-product-mark,.cmp-other-mark {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:38px;
  margin-right:12px;
  vertical-align:middle;
  background:var(--primary);
  color:#fff;
  font-size:24px;
  font-weight:700
}

.cmp-other-mark {
  background:#e8e8e8;
  color:#333
}

.cmp-other-mark svg {
  width:23px;
  height:23px;
  stroke-width:1.5
}

.cmp-table .cmp-row>th {
  font-size:14px;
  font-weight:600;
  color:#222
}

.cmp-table td {
  color:#555
}

.cmp-table .cmp-anfa-cell {
  background:#ffffff;
  color:#333
}

.cmp-group th {
  background:#ffffff;
  padding:16px 26px;
  font-size:14px;
  font-weight:600
}

.cmp-group th>span {
  font:11px var(--mono);
  color:var(--primary);
  margin-right:15px
}

.cmp-group small {
  float:right;
  color:#777;
  font-weight:400;
  font-size:12px
}

.cmp-row:hover td,.cmp-row:hover th {
  background:#ffffff
}

.cmp-row:hover .cmp-anfa-cell {
  background:#ffffff
}

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

.cmp-sources {
  display:flex;
  gap:35px;
  margin-top:28px;
  color:#777;
  font-size:12px
}

.cmp-sources>span {
  white-space:nowrap
}

.cmp-sources a {
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:#444;
  margin-right:22px;
  text-decoration:underline;
  text-underline-offset:3px
}

.cmp-sources svg {
  width:13px;
  height:13px
}

.cmp-sources p {
  margin:10px 0 0;
  line-height:1.65
}

.cmp-evaluate {
  background:#ffffff;
  padding:64px 0
}

.cmp-evaluate-grid {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:100px
}

.cmp-evaluate h2 {
  font-size:36px;
  letter-spacing:-.035em;
  margin:0 0 22px
}

.cmp-evaluate p {
  color:#666;
  line-height:1.7;
  max-width:370px
}

.cmp-evaluate ol {
  list-style:none;
  padding:0;
  margin:0
}

.cmp-evaluate li {
  display:flex;
  gap:24px;
  border-bottom:1px solid #ddd;
  padding:22px 0
}

.cmp-evaluate li:first-child {
  padding-top:0
}

.cmp-evaluate li>span {
  font:12px var(--mono);
  color:var(--primary);
  padding-top:5px
}

.cmp-evaluate h3 {
  font-size:18px;
  margin:0 0 7px
}

.cmp-evaluate li p {
  font-size:14px;
  margin:0;
  max-width:none
}

.cmp-cta {
  padding:54px 0;
  background:#fff
}

.cmp-cta>.container {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px
}

.cmp-cta h2 {
  font-size:26px;
  margin:0 0 12px
}

.cmp-cta p {
  font-size:14px;
  color:#666;
  margin:0
}

.cmp-cta-actions {
  display:flex;
  gap:12px;
  flex-shrink:0
}

.cmp-cta svg {
  width:18px;
  height:18px
}

@media(max-width:1000px) {
  .cmp-table th,.cmp-table td {
    padding:20px 16px
  }

  .cmp-table thead th {
    font-size:17px
  }

  .cmp-product-mark,.cmp-other-mark {
    margin-right:7px;
    width:27px;
    height:32px
  }

  .cmp-evaluate-grid {
    gap:48px
  }

  .cmp-cta>.container {
    align-items:start;
    flex-direction:column
  }

}

@media(max-width:700px) {
  .cmp-hero {
    padding:48px 0
  }

  .cmp-hero-inner,.cmp-intro {
    display:block
  }

  .cmp-jump {
    width:max-content;
    margin-top:26px
  }

  .cmp-hero p {
    font-size:15px
  }

  .cmp-main {
    padding:40px 0
  }

  .cmp-intro h2 {
    font-size:25px;
    margin-bottom:16px
  }

  .cmp-table,.cmp-table tbody,.cmp-table tr,.cmp-table th,.cmp-table td {
    display:block;
    width:100%
  }

  .cmp-table colgroup,.cmp-table thead {
    display:none
  }

  .cmp-group th {
    padding:18px 0;
    background:#fff;
    border-bottom:2px solid #222
  }

  .cmp-group small {
    float:none;
    display:block;
    padding-left:30px;
    margin-top:4px
  }

  .cmp-row {
    padding:20px 0;
    border-bottom:1px solid #ddd
  }

  .cmp-table .cmp-row>th {
    padding:0 0 16px;
    border:0;
    font-size:16px
  }

  .cmp-table .cmp-row>td {
    padding:12px 16px;
    border:0;
    font-size:14px;
    background:#ffffff
  }

  .cmp-table .cmp-row>.cmp-anfa-cell {
    background:#ffffff;
    margin-bottom:8px
  }

  .cmp-row td:before {
    content:attr(data-product);
    display:block;
    font-size:12px;
    font-weight:600;
    color:#222;
    margin-bottom:5px
  }

  .cmp-row .cmp-anfa-cell:before {
    color:var(--primary)
  }

  .cmp-sources {
    display:block
  }

  .cmp-sources>span {
    display:block;
    margin-bottom:10px
  }

  .cmp-evaluate {
    padding:44px 0
  }

  .cmp-evaluate-grid {
    grid-template-columns:1fr;
    gap:30px
  }

  .cmp-evaluate h2 {
    font-size:30px
  }

  .cmp-cta {
    padding:40px 0
  }

  .cmp-cta-actions {
    flex-wrap:wrap;
    width:100%
  }

  .cmp-cta-actions .btn {
    flex:1;
    justify-content:center
  }

}

/* Pricing — quote-based, restrained enterprise layout */

.price-hero {
  background:#181818;
  color:white;
  padding:72px 0
}

.price-hero .cmp-eyebrow {
  color:#aaa
}

.price-hero h1 {
  font-size:clamp(36px,4vw,54px);
  letter-spacing:-.04em;
  line-height:1.12;
  margin:0 0 24px
}

.price-hero p {
  max-width:580px;
  color:#bbb;
  font-size:17px;
  line-height:1.7;
  margin:0 0 28px
}

.price-hero svg,.price-option button svg {
  width:18px;
  height:18px
}

.price-options {
  padding:64px 0
}

.price-heading {
  display:flex;
  justify-content:space-between;
  gap:40px;
  margin-bottom:36px
}

.price-heading h2 {
  font-size:29px;
  margin:0
}

.price-heading p {
  color:#666;
  margin:0;
  max-width:400px;
  font-size:14px
}

.price-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid #ddd
}

.price-option {
  padding:32px;
  display:flex;
  flex-direction:column;
  border-right:1px solid #ddd
}

.price-option:last-child {
  border:0
}

.price-option>svg {
  width:30px;
  height:30px;
  stroke-width:1.4;
  margin-bottom:22px;
  color:var(--primary)
}

.price-label {
  color:#777;
  font-size:12px
}

.price-option h3 {
  font-size:25px;
  margin:10px 0 14px;
  letter-spacing:-.03em
}

.price-option>p {
  color:#666;
  font-size:14px;
  line-height:1.7;
  min-height:70px;
  margin:0
}

.price-value {
  font-size:24px;
  font-weight:600;
  border-top:1px solid #ddd;
  border-bottom:1px solid #ddd;
  padding:24px 0;
  margin:20px 0
}

.price-value small {
  display:block;
  font-size:12px;
  color:#777;
  font-weight:400;
  line-height:1.7;
  margin-top:10px;
  min-height:40px
}

.price-list-label {
  font-size:12px;
  color:#777
}

.price-option ul {
  padding:0;
  list-style:none;
  margin:14px 0 28px;
  flex:1
}

.price-option li {
  font-size:14px;
  color:#444;
  line-height:1.6;
  padding:7px 0 7px 16px;
  position:relative
}

.price-option li:before {
  content:'';
  position:absolute;
  left:0;
  top:17px;
  width:4px;
  height:4px;
  background:#777
}

.price-note {
  color:#777;
  font-size:12px;
  line-height:1.7;
  margin:20px 0 0
}

.price-details {
  padding:64px 0;
  background:#ffffff
}

.price-details>.container,.price-faq>.container {
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:90px
}

.price-details h2,.price-faq h2 {
  font-size:34px;
  letter-spacing:-.03em;
  margin:0 0 22px
}

.price-details p {
  max-width:370px;
  color:#666
}

.price-details dl {
  margin:0
}

.price-details dl>div {
  display:grid;
  grid-template-columns:140px 1fr;
  gap:25px;
  padding:24px 0;
  border-bottom:1px solid #ddd
}

.price-details dl>div:first-child {
  padding-top:0
}

.price-details dt {
  font-weight:600;
  font-size:15px
}

.price-details dd {
  margin:0;
  color:#666;
  font-size:14px;
  line-height:1.75
}

.price-faq {
  padding:72px 0
}

.price-faq details {
  border-bottom:1px solid #ddd;
  padding:22px 0
}

.price-faq details:first-child {
  padding-top:0
}

.price-faq summary {
  cursor:pointer;
  font-size:16px;
  font-weight:500;
  line-height:1.6
}

.price-faq details p {
  font-size:14px;
  line-height:1.8;
  color:#666;
  margin:16px 0 0
}

.price-faq summary:hover {
  color:var(--primary)
}

@media(max-width:1000px) {
  .price-option {
    padding:24px
  }

  .price-details>.container,.price-faq>.container {
    gap:40px
  }

  .price-value {
    font-size:21px
  }

}

@media(max-width:700px) {
  .price-hero {
    padding:48px 0
  }

  .price-hero p {
    font-size:15px
  }

  .price-options,.price-details,.price-faq {
    padding:44px 0
  }

  .price-heading {
    display:block
  }

  .price-heading p {
    margin-top:18px
  }

  .price-grid,.price-details>.container,.price-faq>.container {
    grid-template-columns:1fr
  }

  .price-option {
    border-right:0;
    border-bottom:1px solid #ddd;
    padding:28px
  }

  .price-option>p,.price-value small {
    min-height:0
  }

  .price-details h2,.price-faq h2 {
    font-size:29px
  }

  .price-details dl>div {
    grid-template-columns:1fr;
    gap:8px
  }

}

.price-hardware {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:28px 0;
  margin-top:28px;
  border-top:1px solid #ddd;
  border-bottom:1px solid #ddd
}

.price-hardware>div {
  display:flex;
  align-items:center;
  gap:22px
}

.price-hardware>div>svg {
  width:30px;
  height:30px;
  stroke-width:1.4;
  flex-shrink:0
}

.price-hardware h3 {
  font-size:20px;
  margin:0 0 8px
}

.price-hardware p {
  font-size:14px;
  color:#666;
  margin:0
}

.price-hardware button {
  flex-shrink:0
}

.price-hardware button svg {
  width:16px;
  height:16px
}

@media(max-width:700px) {
  .price-hardware {
    align-items:start;
    flex-direction:column
  }

  .price-hardware>div {
    align-items:start
  }

}

/* Resource workspace — sticky navigation, scrolling content */

.res-page .res-hero {
  background:#181818;
  color:#fff;
  padding:64px 0;
  border:0
}

.res-page .res-hero-inner {
  max-width:700px
}

.res-page .res-kicker {
  font:600 11px var(--font);
  letter-spacing:.09em;
  color:#aaa;
  margin:0 0 22px
}

.res-page .res-hero h1 {
  color:white;
  font-size:clamp(36px,4vw,52px);
  line-height:1.12;
  letter-spacing:-.04em;
  text-transform:none;
  margin:0 0 24px
}

.res-page .res-lead {
  color:#bbb;
  font-size:17px;
  line-height:1.7;
  max-width:570px;
  margin:0
}

.res-page .res-shell {
  padding:56px 0 80px
}

.res-page .res-shell-grid {
  gap:60px
}

.res-page .res-nav {
  gap:0
}

.res-page .res-nav-item {
  border:0;
  border-left:2px solid transparent;
  border-radius:0;
  padding:18px 16px;
  background:transparent;
  align-items:center;
  gap:14px
}

.res-page .res-nav-item.active {
  background:#ffffff;
  border-left-color:var(--primary)
}

.res-page .res-nav-item:hover {
  background:#ffffff
}

.res-page .res-nav-item>svg {
  width:20px;
  height:20px;
  stroke-width:1.5;
  flex-shrink:0;
  color:#666
}

.res-page .res-nav-item.active>svg {
  color:var(--primary)
}

.res-page .res-nav-item .res-nav-arrow {
  width:14px;
  height:14px;
  margin-left:auto
}

.res-page .res-nav-text strong {
  font-size:14px;
  font-weight:500;
  line-height:1.5
}

.res-page .res-nav-text em {
  font:12px var(--font);
  color:#888;
  margin-top:4px
}

.res-nav-help {
  border-top:1px solid #ddd;
  margin-top:30px;
  padding:24px 16px;
  font-size:13px
}

.res-nav-help>span {
  color:#777;
  display:block
}

.res-nav-help button {
  font-size:13px
}

.res-page .res-body-head {
  margin-bottom:32px
}

.res-section-label {
  display:block;
  font-size:11px;
  letter-spacing:.07em;
  color:#888;
  margin-bottom:14px;
  font-weight:500
}

.res-page .res-body-head h2 {
  font-size:30px;
  letter-spacing:-.03em;
  line-height:1.25;
  margin:0 0 14px;
  text-transform:none
}

.res-page .res-body-head p {
  font-size:15px;
  line-height:1.75;
  color:#666;
  margin:0;
  max-width:600px
}

.res-download {
  display:flex;
  gap:24px;
  padding:30px 0;
  border-top:1px solid #ddd
}

.res-file-icon {
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ffffff;
  flex-shrink:0
}

.res-file-icon svg {
  width:25px;
  height:25px;
  stroke-width:1.4;
  color:var(--primary)
}

.res-download h3,.res-resource h3 {
  font-size:21px;
  letter-spacing:-.02em;
  margin:0 0 12px
}

.res-download p,.res-resource p {
  font-size:15px;
  color:#666;
  line-height:1.75;
  margin:0 0 12px
}

.res-download .eh-text-link {
  font-size:14px
}

.res-checklist {
  background:#ffffff;
  padding:28px 32px;
  margin-top:24px;
  border-left:2px solid #ccc
}

.res-checklist h3 {
  font-size:19px;
  margin:0 0 20px
}

.res-checklist ol,.res-guide ol {
  padding-left:20px;
  margin:0;
  color:#555;
  font-size:14px;
  line-height:1.8
}

.res-checklist li,.res-guide li {
  padding:5px 0 5px 8px
}

.res-resource {
  display:flex;
  gap:26px;
  padding:28px 0;
  border-top:1px solid #ddd
}

.res-resource-index {
  font:12px var(--mono);
  color:var(--primary);
  padding-top:5px
}

.res-resource ul {
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
  list-style:none;
  margin:20px 0 0;
  padding:0;
  font-size:12px;
  color:#777
}

.res-resource li {
  border-bottom:1px solid #ddd;
  padding-bottom:5px
}

.res-bottom-help {
  padding:24px 0;
  border-top:1px solid #ddd;
  margin-top:12px
}

.res-bottom-help p {
  font-size:14px;
  color:#666;
  margin:0
}

.res-bottom-help button {
  font-size:14px
}

.res-learning-feature {
  display:block;
  background:#202020;
  color:#fff;
  padding:40px;
  position:relative;
  border-left:3px solid var(--primary)
}

.res-learning-icon {
  position:absolute;
  top:35px;
  right:35px;
  color:#999
}

.res-learning-icon svg {
  width:36px;
  height:36px;
  stroke-width:1.2
}

.res-learning-feature .res-section-label {
  color:#aaa
}

.res-learning-feature h3 {
  font-size:30px;
  letter-spacing:-.03em;
  line-height:1.2;
  margin:28px 0 18px
}

.res-learning-feature p {
  font-size:15px;
  line-height:1.75;
  max-width:500px;
  color:#bbb
}

.res-learning-feature .eh-text-link {
  font-size:14px;
  margin-top:18px
}

.res-learning-note {
  font-size:12px;
  color:#777;
  line-height:1.75;
  margin-top:24px
}

.res-page .res-search {
  padding:12px 16px;
  border-radius:0;
  background:#fff;
  border:1px solid #ccc;
  margin-bottom:24px
}

.res-page .res-search input {
  font:14px var(--font)
}

.res-guide {
  border-bottom:1px solid #ddd;
  padding:24px 0
}

.res-guide summary {
  display:block;
  position:relative;
  padding-right:30px;
  cursor:pointer
}

.res-guide summary::-webkit-details-marker {
  display:none
}

.res-guide summary strong {
  font-size:19px;
  font-weight:500;
  line-height:1.4;
  display:block
}

.res-guide summary .res-section-label {
  margin-bottom:8px
}

.res-guide summary>svg {
  position:absolute;
  right:0;
  top:22px;
  width:18px;
  height:18px;
  color:#777
}

.res-guide[open] summary>svg {
  transform:rotate(45deg)
}

.res-guide>div {
  padding-top:20px
}

.res-guide p {
  font-size:14px;
  color:#666;
  line-height:1.75;
  margin:0 0 14px
}

.res-guide summary:hover strong {
  color:var(--primary)
}

@media(min-width:960px) {
  .res-page .res-shell-grid {
    grid-template-columns:250px minmax(0,1fr)
  }

  .res-page .res-nav {
    position:sticky;
    top:110px;
    max-height:calc(100dvh - 130px);
    overflow-y:auto
  }

  .res-page .res-body {
    min-height:540px
  }

}

@media(max-width:959px) {
  .res-page .res-shell-grid {
    gap:30px
  }

  .res-page .res-nav {
    border-bottom:1px solid #ddd
  }

  .res-page .res-nav-item {
    border-left:0;
    border-bottom:2px solid transparent;
    padding:14px;
    min-width:210px
  }

  .res-page .res-nav-item.active {
    border-bottom-color:var(--primary)
  }

  .res-nav-help {
    display:none
  }

}

@media(max-width:600px) {
  .res-page .res-hero {
    padding:44px 0
  }

  .res-page .res-lead {
    font-size:15px
  }

  .res-page .res-shell {
    padding:28px 0 48px
  }

  .res-page .res-body-head h2 {
    font-size:26px
  }

  .res-page .res-nav-text em {
    display:none
  }

  .res-page .res-nav-item {
    min-width:max-content;
    padding:12px
  }

  .res-page .res-nav-item .res-nav-arrow {
    display:none
  }

  .res-download {
    gap:16px
  }

  .res-file-icon {
    width:36px;
    height:40px
  }

  .res-checklist {
    padding:24px 20px
  }

  .res-learning-feature {
    padding:28px 24px
  }

  .res-learning-feature h3 {
    font-size:26px
  }

  .res-learning-icon {
    top:24px;
    right:24px
  }

  .res-learning-icon svg {
    width:26px;
    height:26px
  }

  .res-resource {
    gap:18px
  }

  .res-resource h3,.res-download h3 {
    font-size:19px
  }

}

/* Support — purposeful contact channels */

.support-hero {
  background:#181818;
  color:#fff;
  padding:72px 0
}

.support-hero-grid {
  display:grid;
  grid-template-columns:1fr 280px;
  gap:80px;
  align-items:center
}

.support-hero .cmp-eyebrow {
  color:#aaa
}

.support-hero h1 {
  font-size:clamp(36px,4vw,54px);
  line-height:1.12;
  letter-spacing:-.04em;
  margin:0 0 24px
}

.support-hero p {
  max-width:570px;
  color:#bbb;
  font-size:17px;
  line-height:1.7;
  margin:0
}

.support-hero-aside {
  border-left:1px solid #444;
  padding:20px 0 20px 40px;
  display:flex;
  flex-direction:column;
  align-items:start;
  gap:20px
}

.support-hero-aside>svg {
  width:52px;
  height:52px;
  stroke-width:1.2;
  color:var(--primary)
}

.support-hero-aside>span {
  font-size:11px;
  letter-spacing:.07em;
  color:#999
}

.support-hero-aside a {
  font-size:14px;
  display:flex;
  align-items:center;
  gap:24px
}

.support-hero-aside a:hover {
  color:#70b5ff
}

.support-hero-aside a svg {
  width:18px;
  height:18px
}

.support-channels {
  padding:64px 0;
  scroll-margin-top:100px
}

.support-heading {
  display:flex;
  justify-content:space-between;
  gap:40px;
  align-items:start;
  margin-bottom:40px
}

.support-heading h2 {
  font-size:29px;
  letter-spacing:-.03em;
  margin:0
}

.support-heading p {
  font-size:14px;
  line-height:1.7;
  color:#666;
  margin:0
}

.support-channel-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px
}

.support-channel {
  border-top:1px solid #ccc;
  padding-top:24px;
  display:flex;
  flex-direction:column;
  align-items:start
}

.support-index {
  font-size:11px;
  color:#777;
  letter-spacing:.07em
}

.support-channel>svg {
  width:30px;
  height:30px;
  stroke-width:1.4;
  color:var(--primary);
  margin:28px 0 20px
}

.support-channel h3 {
  font-size:25px;
  letter-spacing:-.025em;
  margin:0 0 16px
}

.support-channel>p {
  font-size:15px;
  color:#666;
  line-height:1.75;
  max-width:480px;
  margin:0
}

.support-channel ul {
  list-style:none;
  padding:0;
  margin:22px 0 30px;
  flex:1
}

.support-channel li {
  font-size:14px;
  line-height:1.65;
  padding:6px 0 6px 16px;
  color:#555;
  position:relative
}

.support-channel li:before {
  content:'';
  width:4px;
  height:4px;
  background:#888;
  position:absolute;
  left:0;
  top:16px
}

.support-channel .btn svg {
  width:16px;
  height:16px
}

.support-prepare {
  background:#ffffff;
  padding:64px 0
}

.support-prepare-grid {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:90px
}

.support-prepare h2 {
  font-size:35px;
  letter-spacing:-.03em;
  margin:0 0 22px
}

.support-prepare p {
  color:#666;
  line-height:1.75;
  max-width:380px
}

.support-prepare ol {
  list-style:none;
  padding:0;
  margin:0
}

.support-prepare li {
  display:flex;
  gap:24px;
  padding:24px 0;
  border-bottom:1px solid #ddd
}

.support-prepare li:first-child {
  padding-top:0
}

.support-prepare li>span {
  font:12px var(--mono);
  color:var(--primary);
  padding-top:5px
}

.support-prepare h3 {
  font-size:18px;
  margin:0 0 8px
}

.support-prepare li p {
  font-size:14px;
  margin:0;
  max-width:none
}

.support-contact {
  padding:64px 0
}

.support-contact-list {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:35px
}

.support-contact-list>a {
  border-top:1px solid #ddd;
  border-bottom:1px solid #ddd;
  padding:24px 30px 24px 0;
  position:relative
}

.support-contact-list span {
  display:block;
  color:#777;
  font-size:12px;
  margin-bottom:12px
}

.support-contact-list strong {
  font-size:19px;
  font-weight:500
}

.support-contact-list svg {
  position:absolute;
  right:0;
  bottom:30px;
  width:17px;
  height:17px
}

.support-contact-list>a:hover strong {
  color:var(--primary)
}

.support-office {
  margin-top:30px
}

.support-office>span {
  font-size:12px;
  color:#777
}

.support-office p {
  font-size:14px;
  color:#555;
  margin:10px 0
}

.support-remote-note {
  font-size:12px;
  color:#777;
  line-height:1.7;
  margin-top:22px
}

.support-self {
  background:#ffffff;
  padding:40px 0
}

.support-self>.container {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}

.support-self h2 {
  font-size:24px;
  margin:0 0 10px
}

.support-self p {
  color:#666;
  font-size:14px;
  margin:0
}

.support-self svg {
  width:16px;
  height:16px
}

@media(max-width:1000px) {
  .support-hero-grid {
    gap:40px;
    grid-template-columns:1fr 230px
  }

  .support-channel-grid {
    gap:40px
  }

  .support-prepare-grid {
    gap:40px
  }

  .support-contact-list {
    gap:24px
  }

  .support-contact-list strong {
    font-size:17px
  }

}

@media(max-width:700px) {
  .support-hero {
    padding:48px 0
  }

  .support-hero-grid,.support-channel-grid,.support-prepare-grid,.support-contact-list {
    grid-template-columns:1fr
  }

  .support-hero-aside {
    display:none
  }

  .support-hero p {
    font-size:15px
  }

  .support-channels,.support-prepare,.support-contact {
    padding:44px 0
  }

  .support-heading {
    display:block;
    margin-bottom:30px
  }

  .support-heading h2 {
    font-size:26px
  }

  .support-heading p {
    margin-top:15px
  }

  .support-prepare h2 {
    font-size:30px
  }

  .support-channel-grid {
    gap:34px
  }

  .support-contact-list {
    gap:0
  }

  .support-contact-list>a+a {
    border-top:0
  }

  .support-self>.container {
    flex-direction:column;
    align-items:start
  }

  .support-self h2 {
    font-size:22px
  }

}

/* Features workspace — stationary menu and editorial detail */

#features-root .fp-header {
  background:#181818;
  padding:64px 0;
  border:0;
  color:#fff
}

#features-root .fp-header-text {
  max-width:720px
}

#features-root .fp-badge {
  background:none;
  border:0;
  padding:0;
  color:#aaa;
  font:600 11px var(--font);
  letter-spacing:.09em;
  margin-bottom:22px;
  border-radius:0
}

#features-root .fp-header h1 {
  font-size:clamp(36px,4vw,52px);
  line-height:1.12;
  letter-spacing:-.04em;
  color:#fff;
  text-transform:none;
  margin:0 0 24px
}

#features-root .fp-header-text>p {
  color:#bbb;
  font-size:17px;
  line-height:1.75;
  max-width:610px
}

#features-root .fp-body {
  padding:56px 0 72px
}

#features-root .fp-grid {
  gap:56px
}

#features-root .fp-cat-box {
  background:none;
  padding:0;
  border:0
}

#features-root .fp-cat-label {
  font:500 11px var(--font);
  letter-spacing:.07em;
  color:#888;
  padding:0 16px;
  margin-bottom:20px
}

#features-root .fp-cat-btn {
  background:none;
  border:0;
  border-left:2px solid transparent;
  border-radius:0;
  box-shadow:none;
  padding:18px 14px;
  margin:0;
  gap:12px;
  min-height:70px
}

#features-root .fp-cat-btn:hover {
  background:#ffffff
}

#features-root .fp-cat-btn.active {
  background:#ffffff;
  border-left-color:var(--primary);
  color:#222;
  box-shadow:none
}

#features-root .fp-cat-icon {
  background:none;
  color:#666;
  width:24px;
  height:24px;
  padding:0;
  border:0
}

#features-root .fp-cat-icon svg {
  width:22px;
  height:22px;
  stroke-width:1.5
}

#features-root .fp-cat-btn.active .fp-cat-icon {
  background:none;
  color:var(--primary)
}

#features-root .fp-cat-btn-title {
  font-size:14px;
  font-weight:500;
  color:#222
}

#features-root .fp-cat-btn-code {
  font:11px var(--font);
  color:#888;
  margin-top:5px
}

#features-root .fp-cat-btn.active .fp-cat-btn-code {
  color:#777
}

.fp-nav-arrow {
  width:14px;
  height:14px;
  flex-shrink:0;
  color:#999
}

#features-root .fp-trial-box {
  border:0;
  border-top:1px solid #ddd;
  background:none;
  padding:24px 16px;
  margin-top:26px
}

#features-root .fp-trial-head {
  font:600 13px var(--font);
  color:#333
}

#features-root .fp-trial-box p {
  font-size:13px;
  color:#666;
  line-height:1.75;
  margin:16px 0 20px
}

#features-root .fp-main {
  gap:48px;
  min-width:0
}

#features-root .fp-detail-card {
  border:0;
  box-shadow:none;
  border-radius:0;
  overflow:visible
}

#features-root .fp-banner {
  height:240px;
  border-radius:0;
  overflow:hidden
}

#features-root .fp-banner img {
  object-fit:cover;
  width:100%;
  height:100%;
  transform:none
}

#features-root .fp-detail-card:hover .fp-banner img {
  transform:none
}

#features-root .fp-banner-meta {
  padding:14px 20px
}

#features-root .fp-banner-engine {
  display:none
}

#features-root .fp-banner-code {
  background:none;
  padding:0;
  font:12px var(--font)
}

#features-root .fp-banner-tag {
  color:#ddd;
  font:11px var(--font)
}

#features-root .fp-detail-body {
  padding:34px 0 0
}

#features-root .fp-detail-top {
  margin-bottom:18px
}

#features-root .fp-detail-badge {
  background:none;
  border:0;
  padding:0;
  color:#777;
  font:11px var(--font);
  letter-spacing:.05em
}

#features-root .fp-detail-body h2 {
  font-size:clamp(26px,2.6vw,36px);
  line-height:1.2;
  letter-spacing:-.03em;
  text-transform:none;
  max-width:720px;
  margin:0 0 20px
}

#features-root .fp-detail-summary {
  font-size:16px;
  line-height:1.8;
  color:#666;
  margin-bottom:32px
}

#features-root .fp-feat-grid {
  display:block;
  border-top:1px solid #ddd;
  padding-top:0
}

#features-root .fp-feat-item {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:36px;
  border:0;
  border-bottom:1px solid #ddd;
  background:none;
  border-radius:0;
  padding:26px 0;
  box-shadow:none
}

#features-root .fp-feat-head {
  margin-bottom:12px
}

#features-root .fp-feat-head h4 {
  font-size:18px;
  font-weight:500;
  line-height:1.4;
  margin:0
}

#features-root .fp-feat-item p {
  font:14px var(--font);
  color:#666;
  line-height:1.75;
  margin:0
}

#features-root .fp-feat-tip {
  font:13px var(--font);
  color:#777;
  line-height:1.8;
  background:none;
  border:0;
  padding:0;
  margin:0
}

#features-root .fp-cmd-ref {
  border:1px solid #ddd;
  border-radius:0;
  box-shadow:none
}

#features-root .fp-cmd-ref-head {
  background:#ffffff;
  padding:26px;
  border-bottom:1px solid #ddd
}

#features-root .fp-cmd-ref-head h3 {
  font-size:23px;
  text-transform:none;
  color:#222
}

#features-root .fp-cmd-ref-head p {
  font:14px var(--font);
  color:#666;
  line-height:1.7
}

#features-root .fp-cmd-ref-id {
  font:11px var(--font);
  color:#888
}

#features-root .fp-cmd-ref-bar {
  padding:20px;
  background:#fff
}

#features-root .fp-cmd-ref-table {
  font-size:13px
}

#features-root .fp-cmd-ref-table th {
  font-family:var(--font);
  letter-spacing:0;
  font-size:12px
}

#features-root .fp-cmd-ref-foot {
  background:#ffffff;
  color:#777;
  font:12px var(--font);
  padding:16px 20px
}

@media(min-width:1024px) {
  #features-root .fp-grid {
    grid-template-columns:280px minmax(0,1fr)
  }

  #features-root .fp-sidebar {
    position:sticky;
    top:110px;
    max-height:calc(100dvh - 130px);
    overflow-y:auto
  }

}

@media(max-width:1023px) {
  #features-root .fp-grid {
    gap:30px
  }

  #features-root .fp-cat-box {
    display:flex;
    overflow-x:auto
  }

  #features-root .fp-cat-label {
    display:none
  }

  #features-root .fp-cat-btn {
    min-width:220px;
    border-left:0;
    border-bottom:2px solid transparent
  }

  #features-root .fp-cat-btn.active {
    border-bottom-color:var(--primary)
  }

  #features-root .fp-trial-box {
    display:none
  }

}

@media(max-width:600px) {
  #features-root .fp-header {
    padding:44px 0
  }

  #features-root .fp-header-text>p {
    font-size:15px
  }

  #features-root .fp-body {
    padding:28px 0 48px
  }

  #features-root .fp-banner {
    height:190px
  }

  #features-root .fp-feat-item {
    grid-template-columns:1fr;
    gap:14px
  }

  #features-root .fp-detail-body {
    padding-top:26px
  }

  #features-root .fp-detail-summary {
    font-size:15px
  }

  #features-root .fp-cmd-ref-head {
    padding:20px
  }

  #features-root .fp-cat-btn {
    min-width:190px;
    padding:14px 10px
  }

}

#features-root .fp-scope-note {
  border-left:2px solid #ccc;
  padding:10px 16px;
  margin:0 0 28px;
  background:#ffffff;
  color:#777;
  font:13px var(--font);
  line-height:1.8
}

/* Homepage — product value and specialist workflows */

.home-value {
  padding:88px 0;
  background:#fff
}

.home-value-layout {
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:90px
}

.home-value-eyebrow {
  display:block;
  color:#777;
  font-size:11px;
  font-weight:500;
  letter-spacing:.08em;
  margin-bottom:20px
}

.home-value h2,.home-tools h2 {
  font-size:clamp(30px,3.1vw,43px);
  line-height:1.17;
  letter-spacing:-.035em;
  margin:0 0 24px;
  text-transform:none
}

.home-value-intro>p {
  max-width:390px;
  color:#666;
  font-size:17px;
  line-height:1.75;
  margin:0 0 30px
}

.home-value svg,.home-tools svg {
  width:18px;
  height:18px
}

.home-value-row {
  display:grid;
  grid-template-columns:24px 28px 1fr;
  gap:20px;
  padding:26px 0;
  border-bottom:1px solid #ddd
}

.home-value-row:first-child {
  padding-top:0
}

.home-value-number {
  font:11px var(--mono);
  color:#999;
  padding-top:4px
}

.home-value-row>svg {
  width:26px;
  height:26px;
  color:var(--primary);
  stroke-width:1.4
}

.home-value-row h3 {
  font-size:21px;
  letter-spacing:-.02em;
  margin:0 0 12px
}

.home-value-row p {
  font-size:14px;
  color:#666;
  line-height:1.8;
  margin:0 0 10px
}

.home-value-link {
  display:inline-flex;
  align-items:center;
  gap:12px;
  background:none;
  border:0;
  padding:8px 0;
  font:500 14px var(--font);
  color:#222;
  cursor:pointer;
  text-align:left
}

.home-value-link:hover {
  color:var(--primary)
}

.home-tools {
  padding:80px 0;
  background:#ffffff
}

.home-tools-head {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:48px;
  margin-bottom:36px
}

.home-tools-head>p {
  max-width:350px;
  font-size:16px;
  color:#666;
  line-height:1.75;
  margin:0 0 28px
}

.home-tools-tabs {
  display:flex;
  gap:34px;
  overflow-x:auto;
  border-bottom:1px solid #ccc;
  margin-bottom:40px
}

.home-tools-tabs .tab-btn {
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:10px;
  border:0;
  border-bottom:2px solid transparent;
  border-radius:0;
  background:none;
  padding:16px 0;
  font:500 14px var(--font);
  color:#666;
  box-shadow:none
}

.home-tools-tabs .tab-btn span {
  font:11px var(--mono);
  color:#999
}

.home-tools-tabs .tab-btn.active {
  border-bottom-color:var(--primary);
  color:#222;
  background:none
}

.home-tools-panel {
  grid-template-columns:1.15fr 1fr;
  gap:80px;
  align-items:center
}

.home-tools-panel.active {
  display:grid
}

.home-tools-copy h3 {
  font-size:29px;
  line-height:1.25;
  letter-spacing:-.03em;
  margin:0 0 20px;
  max-width:450px
}

.home-tools-copy>p {
  font-size:15px;
  color:#666;
  line-height:1.8;
  margin:0 0 20px
}

.home-tools-copy ul {
  list-style:none;
  margin:0 0 22px;
  padding:0
}

.home-tools-copy li {
  padding:7px 0 7px 16px;
  position:relative;
  font-size:14px;
  color:#555
}

.home-tools-copy li:before {
  content:'';
  position:absolute;
  width:4px;
  height:4px;
  left:0;
  top:17px;
  background:var(--primary)
}

.home-tools-diagram {
  padding:32px 36px;
  background:#202020;
  color:#fff;
  border-left:3px solid var(--primary)
}

.home-tools-diagram-top {
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:26px;
  color:#bbb;
  font-size:12px
}

.home-tools-diagram-top svg {
  width:26px;
  height:26px;
  stroke-width:1.4
}

.home-tools-stage {
  display:flex;
  align-items:center;
  gap:22px;
  padding:21px 0;
  border-top:1px solid #444
}

.home-tools-stage>span {
  font:11px var(--mono);
  color:#70b5ff
}

.home-tools-stage strong {
  font-size:18px;
  font-weight:500
}

.home-tools-diagram small {
  display:block;
  color:#999;
  font-size:11px;
  margin-top:20px
}

.home-tools-note {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  border-top:1px solid #ccc;
  padding-top:24px;
  margin-top:44px
}

.home-tools-note p {
  font-size:12px;
  line-height:1.75;
  color:#777;
  max-width:740px;
  margin:0
}

.home-tools-note button {
  flex-shrink:0
}

@media(max-width:1000px) {
  .home-value-layout {
    gap:45px
  }

  .home-tools-panel {
    gap:40px
  }

  .home-tools-diagram {
    padding:28px
  }

  .home-value-row {
    gap:14px
  }

}

@media(max-width:700px) {
  .home-value,.home-tools {
    padding:48px 0
  }

  .home-value-layout,.home-tools-panel {
    grid-template-columns:1fr;
    gap:36px
  }

  .home-value-intro>p {
    font-size:15px
  }

  .home-tools-head {
    display:block;
    margin-bottom:20px
  }

  .home-tools-head>p {
    font-size:15px;
    margin:20px 0
  }

  .home-tools-tabs {
    gap:24px;
    margin-bottom:30px
  }

  .home-tools-copy h3 {
    font-size:26px
  }

  .home-tools-note {
    display:block
  }

  .home-tools-note button {
    margin-top:12px
  }

  .home-value-row {
    grid-template-columns:20px 1fr
  }

  .home-value-row>svg {
    display:none
  }

  .home-value-row h3 {
    font-size:20px
  }

}

/* Homepage — illustrative workflow, answers and conversion */

.home-examples {
  padding:80px 0;
  background:#fff
}

.home-examples-head {
  display:flex;
  justify-content:space-between;
  gap:50px;
  align-items:end;
  margin-bottom:38px
}

.home-examples h2,.home-answers h2,.home-start h2 {
  font-size:clamp(30px,3vw,42px);
  letter-spacing:-.035em;
  line-height:1.17;
  margin:0 0 22px;
  text-transform:none
}

.home-examples-head>div:last-child {
  max-width:360px
}

.home-examples-head p {
  color:#666;
  font-size:15px;
  line-height:1.75;
  margin:0 0 12px
}

.home-example-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px
}

.home-example figure {
  margin:0 0 23px;
  overflow:hidden;
  aspect-ratio:16/10;
  background:#eee
}

.home-example img {
  width:100%;
  height:100%;
  object-fit:cover
}

.home-example-category {
  display:block;
  font-size:11px;
  letter-spacing:.05em;
  color:#777;
  margin-bottom:12px
}

.home-example h3 {
  font-size:22px;
  margin:0 0 12px;
  letter-spacing:-.025em
}

.home-example p {
  font-size:14px;
  line-height:1.75;
  color:#666;
  margin:0
}

.home-example-note {
  border-top:1px solid #ddd;
  padding-top:20px;
  margin-top:32px;
  font-size:12px;
  line-height:1.7;
  color:#888
}

.home-answers {
  background:#ffffff;
  padding:80px 0
}

.home-answers-layout {
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:90px
}

.home-answers-intro>p {
  font-size:16px;
  color:#666;
  line-height:1.75;
  max-width:330px
}

.home-answers-contact {
  margin-top:32px;
  border-top:1px solid #ccc;
  padding-top:24px;
  display:flex;
  flex-direction:column;
  align-items:start;
  gap:10px
}

.home-answers-contact>span {
  font-size:12px;
  color:#777
}

.home-answers-contact>a {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:14px;
  font-weight:500;
  padding:8px 0
}

.home-answers-contact svg {
  width:16px;
  height:16px
}

.home-answers-contact>a:hover {
  color:var(--primary)
}

.home-answer-list .faq-item {
  background:none;
  border:0;
  border-bottom:1px solid #ccc;
  box-shadow:none;
  border-radius:0;
  margin:0
}

.home-answer-list .faq-q {
  font:500 16px var(--font);
  line-height:1.65;
  text-transform:none;
  letter-spacing:0;
  padding:22px 0;
  color:#222;
  background:none;
  text-align:left;
  gap:24px
}

.home-answer-list .faq-q>span {
  flex-shrink:0;
  background:none;
  border:0;
  color:#777
}

.home-answer-list .faq-q svg {
  width:17px;
  height:17px
}

.home-answer-list .faq-item.open .faq-q {
  color:#222
}

.home-answer-list .faq-a {
  font:14px var(--font);
  color:#666;
  line-height:1.8;
  background:none
}

.home-answer-list .faq-item.open .faq-a {
  padding:0 30px 24px 0
}

.home-start {
  background:#181818;
  color:#fff;
  padding:64px 0
}

.home-start>.container {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:60px
}

.home-start .home-value-eyebrow {
  color:#aaa
}

.home-start p {
  font-size:16px;
  color:#bbb;
  line-height:1.75;
  max-width:550px;
  margin:0
}

.home-start-actions {
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:280px;
  align-items:stretch
}

.home-start-actions .btn {
  justify-content:center
}

.home-start-actions .btn-outline {
  border-color:#777;
  color:#eee;
  background:none
}

.home-start-actions .btn-outline:hover {
  background:#282828;
  border-color:#aaa
}

.home-start-actions small {
  font-size:11px;
  color:#aaa;
  line-height:1.8;
  margin-top:5px
}

.home-start svg {
  width:18px;
  height:18px
}

@media(max-width:1000px) {
  .home-answers-layout {
    gap:40px
  }

  .home-example-grid {
    gap:22px
  }

  .home-start>.container {
    gap:35px
  }

}

@media(max-width:700px) {
  .home-examples,.home-answers {
    padding:48px 0
  }

  .home-examples-head,.home-start>.container {
    display:block
  }

  .home-examples-head>div:last-child {
    max-width:none
  }

  .home-example-grid,.home-answers-layout {
    grid-template-columns:1fr;
    gap:32px
  }

  .home-example figure {
    aspect-ratio:16/9;
    margin-bottom:18px
  }

  .home-example h3 {
    font-size:21px
  }

  .home-start {
    padding:48px 0
  }

  .home-start-actions {
    margin-top:30px;
    min-width:0
  }

  .home-answer-list .faq-q {
    font-size:15px
  }

}

/* Partner network — typography and quiet grid */

.home-network {
  padding:72px 0;
  background:#ffffff;
  border-top:1px solid #e5e5e5;
  border-bottom:1px solid #e5e5e5
}

.home-network-head {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:60px;
  margin-bottom:40px
}

.home-network h2 {
  font-size:clamp(28px,3vw,40px);
  line-height:1.17;
  letter-spacing:-.035em;
  margin:0;
  text-transform:none
}

.home-network-head>p {
  font-size:15px;
  color:#666;
  line-height:1.8;
  max-width:370px;
  margin:0
}

.home-network-list {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  border-top:1px solid #d8d8d8
}

.home-network-name {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:25px 12px;
  min-height:78px;
  border-bottom:1px solid #d8d8d8;
  font:600 17px var(--font);
  letter-spacing:-.015em;
  color:#484848;
  text-align:center;
  overflow-wrap:anywhere
}

.home-network-note {
  font-size:12px;
  color:#888;
  line-height:1.7;
  margin:20px 0 0
}

.home-network-name:nth-child(5n+1) {
  justify-content:flex-start;
  padding-left:0
}

.home-network-name:nth-child(5n) {
  justify-content:flex-end;
  padding-right:0
}

@media(max-width:900px) {
  .home-network-head {
    gap:35px
  }

  .home-network-list {
    grid-template-columns:repeat(4,minmax(0,1fr))
  }

  .home-network-name:nth-child(n) {
    justify-content:center;
    padding:24px 10px;
    font-size:15px
  }

}

@media(max-width:600px) {
  .home-network {
    padding:44px 0
  }

  .home-network-head {
    display:block;
    margin-bottom:28px
  }

  .home-network-head>p {
    margin-top:20px;
    max-width:none;
    font-size:14px
  }

  .home-network-list {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }

  .home-network-name:nth-child(n) {
    font-size:13px;
    padding:20px 6px;
    min-height:65px
  }

  .home-network .home-value-eyebrow {
    font-size:10px
  }

}

/* Highlight section — left side only; install visual keeps its layout */

.highlight-left {
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:38px;
  align-items:start;
  width:100%
}

.highlight-intro .home-value-eyebrow {
  font-size:11px;
  margin-bottom:20px
}

.highlight-intro h2 {
  font-size:clamp(26px,2.1vw,34px);
  line-height:1.2;
  letter-spacing:-.035em;
  margin:0 0 22px
}

.highlight-intro>p {
  font-size:15px;
  color:#666;
  line-height:1.8;
  margin:0 0 22px
}

.highlight-intro .home-value-link {
  font-size:14px
}

.highlight-list article {
  display:flex;
  gap:18px;
  padding:23px 0;
  border-bottom:1px solid #ddd
}

.highlight-list article:first-child {
  padding-top:0
}

.highlight-list article>svg {
  width:25px;
  height:25px;
  stroke-width:1.4;
  color:var(--primary);
  flex-shrink:0
}

.highlight-list h3 {
  font-size:17px;
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.4;
  margin:0 0 10px
}

.highlight-list p {
  font-size:13px;
  line-height:1.8;
  color:#777;
  margin:0
}

@media(min-width:1024px) and (max-width:1400px) {
  .highlight-left {
    grid-template-columns:1fr;
    gap:28px
  }

  .highlight-list article {
    padding:16px 0
  }

  .highlight-intro>p {
    max-width:480px
  }

}

@media(max-width:1023px) {
  .highlight-left {
    gap:32px
  }

}

@media(max-width:600px) {
  .highlight-left {
    grid-template-columns:1fr;
    gap:28px
  }

  .highlight-intro h2 {
    font-size:30px
  }

  .highlight-list article {
    padding:20px 0
  }

}

/* Product hero — retain background asset and right-hand laptop */

.hero.hero-product {
  padding:64px 0 60px
}

.hero-product .hero-grid {
  gap:42px
}

.hero-product-copy {
  max-width:600px
}

.hero-product-label {
  display:block;
  font:600 15px var(--font);
  letter-spacing:-.01em;
  color:#222;
  margin-bottom:26px
}

.hero-product-label>span {
  font-weight:400;
  color:#777;
  margin-left:12px;
  font-size:13px
}

.hero-product h1 {
  font-size:clamp(38px,3.9vw,58px);
  line-height:1.08;
  letter-spacing:-.045em;
  margin:0 0 26px;
  text-transform:none
}

.hero-product-lead {
  font-size:17px;
  line-height:1.75;
  max-width:520px;
  color:#555;
  margin:0 0 30px
}

.hero-product-actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap
}

.hero-product-actions .btn {
  padding:14px 20px;
  box-shadow:none;
  border-radius:3px;
  font-size:14px;
  letter-spacing:0;
  text-transform:none
}

.hero-product-actions .btn-outline {
  background:rgba(255,255,255,.85);
  border-color:#aaa;
  color:#222
}

.hero-product-actions .btn-outline:hover {
  border-color:var(--primary);
  color:var(--primary)
}

.hero-product-actions svg {
  width:18px;
  height:18px
}

.hero-product-license {
  font-size:12px;
  line-height:1.7;
  color:#666;
  margin:22px 0 0
}

.hero-product-license span {
  margin-left:14px;
  color:#333
}

.hero-product-strip {
  background:#fff;
  border-bottom:1px solid #ddd;
  padding:24px 0
}

.hero-product-strip>.container {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:32px
}

.hero-product-strip>.container>div {
  display:flex;
  align-items:center;
  gap:14px
}

.hero-product-strip svg {
  width:24px;
  height:24px;
  stroke-width:1.4;
  color:var(--primary);
  flex-shrink:0
}

.hero-product-strip strong {
  font-size:14px;
  font-weight:500;
  display:block;
  color:#222
}

.hero-product-strip small {
  font-size:12px;
  color:#777;
  display:block;
  margin-top:4px;
  line-height:1.5
}

@media(min-width:1024px) {
  .hero-product .hero-grid {
    grid-template-columns:1fr 1fr
  }

  .hero-product .hero-visual img {
    max-width:680px
  }

}

@media(max-width:1023px) {
  .hero.hero-product {
    padding:48px 0
  }

  .hero-product .hero-visual {
    justify-content:center
  }

  .hero-product .hero-visual img {
    max-width:560px
  }

  .hero-product-strip>.container {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px
  }

  .hero-product h1 {
    font-size:46px
  }

}

@media(max-width:600px) {
  .hero.hero-product {
    padding:36px 0
  }

  .hero-product h1 {
    font-size:38px
  }

  .hero-product-lead {
    font-size:15px
  }

  .hero-product-label {
    margin-bottom:22px
  }

  .hero-product-actions {
    flex-direction:column;
    align-items:stretch
  }

  .hero-product-actions .btn {
    justify-content:center
  }

  .hero-product-license span {
    display:block;
    margin:4px 0 0
  }

  .hero-product .hero-grid {
    gap:30px
  }

  .hero-product-strip {
    padding:20px 0
  }

  .hero-product-strip>.container {
    gap:20px 16px
  }

  .hero-product-strip>.container>div {
    align-items:start;
    gap:10px
  }

  .hero-product-strip strong {
    font-size:13px
  }

  .hero-product-strip small {
    font-size:11px
  }

  .hero-product-strip svg {
    width:20px;
    height:20px
  }

}

/* Bound the new highlight grid so it cannot push the install panel off-screen. */

.highlight-left {
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  min-width:0
}

.highlight-intro,.highlight-list,.highlight-list article>div {
  min-width:0
}

@media(min-width:1024px) {
  .feat-install-left {
    flex:0 0 auto
  }

  .feat-install-left .highlight-left {
    width:min(780px,56vw)
  }

  .feat-install-right {
    width:auto;
    flex:1 1 0;
    min-width:0
  }

}

@media(min-width:1024px) and (max-width:1400px) {
  .feat-install-left .highlight-left {
    width:min(560px,47vw);
    grid-template-columns:minmax(0,1fr)
  }

}

@media(max-width:600px) {
  .highlight-left {
    grid-template-columns:minmax(0,1fr)
  }

}

/* Hero hierarchy — product name is the primary headline. */

.hero-product .hero-product-label {
  font:500 11px var(--font);
  letter-spacing:.09em;
  color:#666;
  margin-bottom:22px
}

.hero-product h1 {
  font-size:clamp(38px,4.3vw,64px);
  line-height:1.08;
  letter-spacing:-.045em;
  margin:0 0 24px;
  white-space:nowrap
}

.hero-product .hero-product-tagline {
  font-size:clamp(20px,1.8vw,26px);
  font-weight:500;
  letter-spacing:-.025em;
  line-height:1.4;
  margin:0 0 18px;
  max-width:530px;
  color:#333
}

.hero-product .hero-product-lead {
  font-size:16px;
  line-height:1.8;
  max-width:490px;
  margin:0 0 30px;
  color:#666
}

.hero-product .hero-product-copy {
  padding:14px 0
}

.hero-product .hero-product-actions .btn {
  font-family:var(--font);
  font-weight:500;
  font-size:14px
}

.hero-product .hero-product-license {
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid rgba(90,90,90,.18);
  max-width:490px;
  font-size:12px
}

@media(max-width:1023px) {
  .hero-product h1 {
    font-size:clamp(38px,6vw,60px)
  }

}

@media(max-width:600px) {
  .hero-product h1 {
    font-size:clamp(30px,8vw,44px);
    margin-bottom:20px
  }

  .hero-product .hero-product-tagline {
    font-size:21px
  }

  .hero-product .hero-product-lead {
    font-size:15px
  }

  .hero-product .hero-product-copy {
    padding:0
  }

  .hero-product .hero-product-label {
    font-size:10px
  }

}

/* Installer typography matches the surrounding highlight section. */

.install-body,.install-badge,.install-body>h3,.install-specs li,.btn-install,.install-foot {
  font-family:var(--font)
}

.install-badge {
  font-size:11px;
  font-weight:500;
  text-transform:none;
  letter-spacing:0;
  line-height:1.5
}

.install-body>h3 {
  font-size:22px;
  font-weight:600;
  letter-spacing:-.025em;
  line-height:1.35
}

.install-specs li {
  font-size:14px;
  line-height:1.7;
  letter-spacing:0
}

.install-specs strong,.install-foot strong {
  font-weight:600
}

.btn-install {
  font-size:14px;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  line-height:1.5
}

.install-foot {
  font-size:12px;
  line-height:1.7;
  letter-spacing:0
}

@media(max-width:600px) {
  .install-body>h3 {
    font-size:21px
  }

  .install-specs li {
    font-size:13px
  }

  .btn-install {
    font-size:13px
  }

}

/* Header — clear product identity and compact navigation */

.topbar {
  background:#181818;
  color:#bdbdbd;
  font:12px var(--font);
  letter-spacing:0;
  text-transform:none
}

.topbar .topbar-inner {
  max-width:1440px;
  padding:8px 32px;
  min-height:35px;
  flex-wrap:nowrap;
  gap:20px
}

.topbar-left {
  gap:18px
}

.topbar-brand {
  color:#eee;
  font-weight:500
}

.topbar-right {
  gap:20px
}

.topbar-contact {
  font-size:12px;
  color:#bbb
}

.topbar-contact:hover {
  color:#fff
}

.topbar button {
  font:400 12px var(--font);
  text-transform:none;
  letter-spacing:0;
  gap:7px;
  padding:2px 0
}

.topbar button svg {
  width:13px;
  height:13px
}

.navbar {
  background:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
  border-bottom:1px solid #ddd
}

.navbar>.container {
  max-width:1440px;
  padding:0 32px;
  margin:0 auto
}

.navbar-inner {
  min-height:80px;
  gap:28px
}

.navbar .logo {
  gap:12px
}

.navbar .logo-mark {
  width:40px;
  height:40px;
  border-radius:4px
}

.navbar .logo-text strong {
  font:600 18px var(--font);
  line-height:1.25;
  letter-spacing:-.03em;
  color:#222
}

.navbar .logo-text span {
  display:block;
  font:12px var(--font);
  color:#777;
  letter-spacing:0;
  margin-top:4px
}

.navbar-inner>nav {
  display:none
}

.navbar .nav-links {
  flex-wrap:nowrap;
  gap:3px;
  justify-content:center
}

.navbar .nav-link {
  position:relative;
  background:none;
  border:0;
  border-radius:0;
  padding:28px 10px;
  font:500 14px var(--font);
  letter-spacing:0;
  text-transform:none;
  white-space:nowrap;
  color:#555;
  line-height:24px
}

.navbar .nav-link:hover {
  color:#222;
  background:none
}

.navbar .nav-link.active {
  color:#222;
  background:none
}

.navbar .nav-link.active:after {
  content:'';
  position:absolute;
  height:2px;
  bottom:0;
  left:10px;
  right:10px;
  background:var(--primary)
}

.navbar .nav-actions {
  gap:10px;
  margin-left:auto;
  flex-shrink:0
}

.navbar .nav-actions>.btn {
  font:500 13px var(--font);
  text-transform:none;
  letter-spacing:0;
  padding:11px 16px;
  min-height:42px;
  box-shadow:none;
  border-radius:3px;
  white-space:nowrap
}

.navbar .nav-actions>.btn-outline {
  display:inline-flex;
  color:#444;
  border-color:#ccc;
  background:#fff
}

.navbar .nav-actions>.btn-outline:hover {
  border-color:#777
}

.navbar .menu-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border:1px solid #ddd;
  border-radius:3px;
  background:#fff;
  color:#222
}

.navbar button:focus-visible,.topbar a:focus-visible,.topbar button:focus-visible {
  outline:2px solid var(--primary);
  outline-offset:3px
}

.navbar .mobile-nav {
  padding:12px 32px 24px;
  max-height:calc(100dvh - 115px);
  overflow-y:auto;
  background:#fff;
  border-top:1px solid #eee
}

.navbar .mobile-nav>button {
  font:500 15px var(--font);
  text-transform:none;
  letter-spacing:0;
  padding:14px 0;
  border-bottom:1px solid #eee;
  color:#444
}

.navbar .mobile-nav>button.active {
  color:var(--primary)
}

.navbar .mobile-nav-ctas {
  display:flex;
  gap:12px;
  padding-top:20px
}

.navbar .mobile-nav-ctas>.btn {
  font:500 14px var(--font);
  letter-spacing:0;
  text-transform:none;
  box-shadow:none;
  flex:1
}

@media(min-width:1280px) {
  .navbar-inner>nav {
    display:flex
  }

  .navbar .menu-toggle {
    display:none
  }

  .navbar .mobile-nav.open {
    display:none
  }

}

@media(max-width:1279px) {
  .navbar-inner {
    min-height:72px
  }

  .navbar .logo-text strong {
    font-size:17px
  }

}

@media(max-width:600px) {
  .topbar .topbar-inner {
    padding:7px 20px;
    min-height:32px
  }

  .topbar-contact {
    display:none
  }

  .navbar>.container {
    padding:0 20px
  }

  .navbar-inner {
    gap:12px;
    min-height:68px
  }

  .navbar .logo-mark {
    width:34px;
    height:34px
  }

  .navbar .logo {
    gap:9px
  }

  .navbar .logo-text strong {
    font-size:15px
  }

  .navbar .logo-text span {
    font-size:10px
  }

  .navbar .nav-actions {
    gap:8px
  }

  .navbar .nav-actions>.btn-outline {
    display:none
  }

  .navbar .nav-actions>.btn-red {
    padding:10px 12px;
    font-size:12px;
    min-height:38px
  }

  .navbar .menu-toggle {
    height:38px;
    width:38px
  }

  .navbar .mobile-nav {
    padding:8px 20px 20px
  }

}

@media(max-width:380px) {
  .navbar .logo-text span {
    display:none
  }

  .navbar .logo-text strong {
    font-size:14px
  }

  .navbar>.container {
    padding:0 14px
  }

  .navbar .nav-actions>.btn-red {
    padding:10px
  }

}

/* KetcauSoft — an attributed statement and track record */

.home-kcs-story {
  padding:80px 0 64px;
  background:#fff;
  border-bottom:1px solid #e5e5e5
}

.kcs-story-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:60px;
  margin-bottom:44px
}

.kcs-story-heading h2 {
  font-size:clamp(30px,3.1vw,43px);
  line-height:1.17;
  letter-spacing:-.035em;
  margin:0;
  text-transform:none
}

.kcs-story-heading>p {
  max-width:340px;
  margin:0;
  color:#666;
  font-size:15px;
  line-height:1.8
}

.kcs-story-layout {
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  gap:64px;
  align-items:center
}

.kcs-story-person {
  margin:0
}

.kcs-story-person img {
  width:100%;
  height:auto;
  aspect-ratio:1;
  object-fit:contain;
  border-radius:3px
}

.kcs-story-person figcaption {
  padding-top:18px
}

.kcs-story-person figcaption strong {
  display:block;
  font-size:17px;
  font-weight:600;
  color:#222;
  letter-spacing:-.02em
}

.kcs-story-person figcaption span {
  display:block;
  font-size:12px;
  color:#777;
  margin-top:5px
}

.kcs-story-message {
  position:relative;
  padding:28px 0 0 32px;
  border-left:2px solid var(--primary)
}

.kcs-story-quote {
  display:block;
  font:64px Georgia,serif;
  line-height:.65;
  color:var(--primary);
  margin:0 0 12px
}

.kcs-story-message blockquote {
  margin:0
}

.kcs-story-message blockquote p {
  font-size:clamp(17px,1.5vw,21px);
  line-height:1.8;
  letter-spacing:-.01em;
  color:#333;
  margin:0;
  text-wrap:pretty
}

.kcs-story-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-top:26px;
  padding-top:20px;
  border-top:1px solid #ddd
}

.kcs-story-footer>span {
  font-size:12px;
  color:#777;
  line-height:1.7
}

.kcs-story-footer button {
  flex-shrink:0
}

.kcs-story-stats {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:0;
  margin:48px 0 0;
  padding:30px 0 0;
  border-top:1px solid #ccc
}

.kcs-story-stats>div {
  display:flex;
  flex-direction:column-reverse;
  align-items:start;
  padding:0 24px;
  border-left:1px solid #ddd;
  gap:10px
}

.kcs-story-stats>div:first-child {
  padding-left:0;
  border-left:0
}

.kcs-story-stats dt {
  font-size:13px;
  color:#777;
  line-height:1.6
}

.kcs-story-stats dd {
  font-size:clamp(28px,2.8vw,40px);
  font-weight:600;
  letter-spacing:-.045em;
  line-height:1.1;
  color:#222;
  margin:0;
  white-space:nowrap
}

.kcs-story-stats dd>span {
  color:var(--primary);
  font-size:.7em;
  margin-left:3px;
  font-weight:400
}

@media(max-width:1000px) {
  .kcs-story-layout {
    grid-template-columns:200px minmax(0,1fr);
    gap:36px
  }

  .kcs-story-heading {
    gap:35px
  }

  .kcs-story-stats>div {
    padding:0 14px
  }

  .kcs-story-stats dt {
    font-size:12px
  }

  .kcs-story-footer {
    flex-wrap:wrap;
    gap:8px
  }

}

@media(max-width:700px) {
  .home-kcs-story {
    padding:48px 0
  }

  .kcs-story-heading {
    display:block;
    margin-bottom:32px
  }

  .kcs-story-heading>p {
    max-width:none;
    margin-top:22px;
    font-size:14px
  }

  .kcs-story-layout {
    grid-template-columns:1fr;
    gap:28px
  }

  .kcs-story-person {
    display:flex;
    align-items:center;
    gap:18px
  }

  .kcs-story-person img {
    width:112px;
    flex-shrink:0
  }

  .kcs-story-person figcaption {
    padding:0
  }

  .kcs-story-message {
    padding:20px 0 0 22px
  }

  .kcs-story-message blockquote p {
    font-size:17px
  }

  .kcs-story-stats {
    grid-template-columns:repeat(3,minmax(0,1fr));
    row-gap:26px;
    margin-top:32px;
    padding-top:26px
  }

  .kcs-story-stats>div {
    padding:0 12px
  }

  .kcs-story-stats>div:nth-child(3n+1) {
    border-left:0;
    padding-left:0
  }

  .kcs-story-stats dd {
    font-size:32px
  }

  .kcs-story-stats dt {
    font-size:12px
  }

}

@media(max-width:380px) {
  .kcs-story-stats dd {
    font-size:28px
  }

  .kcs-story-stats>div {
    padding:0 8px
  }

  .kcs-story-person img {
    width:96px
  }

}

/* Actual company identities replace the textual directory. */

.home-network {
  background:#ffffff;
  padding:64px 0
}

.home-network-head {
  align-items:center;
  margin-bottom:36px
}

.home-network-head .home-value-eyebrow {
  color:var(--primary)
}

.home-network h2 {
  font-size:clamp(28px,3vw,38px)
}

.home-network-list {
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:14px;
  border:0
}

.home-network-logo {
  background:#fff;
  border:1px solid #e7e7e7;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:14px;
  padding:22px 16px;
  min-height:142px;
  border-radius:3px
}

.home-network-logo img {
  width:100%;
  height:78px;
  object-fit:contain;
  max-width:150px;
  mix-blend-mode:multiply
}

.home-network-logo>span {
  font:400 11px var(--font);
  color:#888;
  line-height:1.5;
  text-align:center
}

.home-network-source {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:#555;
  margin-top:24px;
  padding:8px 0
}

.home-network-source svg {
  width:15px;
  height:15px
}

.home-network-source:hover {
  color:var(--primary)
}

@media(max-width:1000px) {
  .home-network-list {
    grid-template-columns:repeat(4,minmax(0,1fr))
  }

}

@media(max-width:600px) {
  .home-network {
    padding:44px 0
  }

  .home-network-list {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px
  }

  .home-network-logo {
    min-height:115px;
    padding:16px 10px;
    gap:10px
  }

  .home-network-logo img {
    height:60px
  }

  .home-network-logo>span {
    font-size:10px
  }

}

@media(max-width:380px) {
  .home-network-list {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

}

.home-network {
  scroll-margin-top:100px
}

.home-network-logo[hidden] {
  display:none
}

.home-network-logo {
  min-height:126px;
  padding:22px 18px
}

.home-network-logo img {
  height:82px;
  max-width:160px
}

.home-network-actions {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:26px;
  flex-wrap:wrap;
  margin-top:30px
}

.home-network-actions .home-network-source {
  margin:0
}

.home-network-actions button {
  font:500 14px var(--font);
  box-shadow:none;
  letter-spacing:0;
  text-transform:none;
  gap:10px
}

.home-network-actions button svg {
  width:16px;
  height:16px
}

@media(max-width:600px) {
  .home-network-logo {
    min-height:100px;
    padding:16px 12px
  }

  .home-network-logo img {
    height:68px
  }

  .home-network-actions {
    gap:12px;
    margin-top:24px
  }

}

/* Partner logos span the page with a 5px edge inset. */

.home-network>.container {
  max-width:none;
  padding-left:5px;
  padding-right:5px
}

.home-network-head {
  max-width:calc(var(--max) - 4rem);
  margin-left:auto;
  margin-right:auto;
  padding-left:20px;
  padding-right:20px
}

.home-network-list {
  grid-template-columns:repeat(10,minmax(0,1fr));
  gap:10px
}

@media(max-width:1400px) {
  .home-network-list {
    grid-template-columns:repeat(8,minmax(0,1fr))
  }

}

@media(max-width:1000px) {
  .home-network-list {
    grid-template-columns:repeat(6,minmax(0,1fr))
  }

}

@media(max-width:700px) {
  .home-network-list {
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px
  }

}

@media(max-width:450px) {
  .home-network-list {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px
  }

}

/* Reading rhythm: natural wrapping, consistent section alignment. */

body {
  word-break:normal;
  overflow-wrap:normal;
  hyphens:none
}

h1,h2,h3,h4,p,li,dt,dd,blockquote {
  word-break:normal;
  overflow-wrap:normal;
  hyphens:none
}

h1,h2,h3,h4 {
  text-wrap:balance
}

p {
  white-space:normal;
  text-wrap:pretty;
  letter-spacing:0
}

.home-network-head {
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  align-items:start;
  gap:64px;
  width:100%;
  max-width:var(--max);
  padding:0 32px;
  margin:0 auto 36px
}

.home-network-head>div,.home-network-head>p {
  min-width:0
}

.home-network-head h2 {
  max-width:620px;
  line-height:1.25;
  margin:0
}

.home-network-head>p {
  max-width:430px;
  padding-top:36px;
  margin:0;
  font-size:15px;
  line-height:1.8;
  text-wrap:pretty
}

.home-value-intro h2,.home-answers-intro h2,.home-start h2,.kcs-story-heading h2,.home-tools-head h2,.home-examples-head h2 {
  max-width:540px
}

.home-value-intro h2,.home-answers-intro h2 {
  max-width:420px
}

.cmp-intro>p {
  max-width:440px
}

.price-heading>p,.support-heading>p {
  max-width:430px
}

.fp-feat-head h4,.res-guide summary strong {
  line-height:1.5
}

.fp-cmd-cell-cmd {
  word-break:normal;
  overflow-wrap:anywhere
}

.footer-contact a {
  overflow-wrap:anywhere
}

@media(max-width:900px) {
  .home-network-head {
    gap:32px;
    grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)
  }

  .home-network-head>p {
    padding-top:32px
  }

}

@media(max-width:700px) {
  .home-network-head {
    display:block;
    padding:0 20px
  }

  .home-network-head>p {
    padding:0;
    margin:18px 0 0;
    max-width:540px
  }

  .home-network-head h2 {
    font-size:30px;
    max-width:520px
  }

}

@media(max-width:600px) {
  .home-value-intro h2,.home-answers-intro h2,.home-start h2,.kcs-story-heading h2,.home-tools-head h2,.home-examples-head h2 {
    max-width:none
  }

}

/* Hero refinement — clear identity, grouped copy and decisive CTA. */

.hero.hero-product {
  padding:70px 0 66px
}

.hero-product .hero-grid {
  gap:54px;
  align-items:center
}

.hero-product .hero-product-copy {
  max-width:620px;
  padding:0
}

.hero-product .hero-product-label {
  display:flex;
  align-items:center;
  gap:12px;
  font:500 13px var(--font);
  letter-spacing:0;
  color:#444;
  margin:0 0 24px
}

.hero-product .hero-brand-line {
  display:block;
  width:28px;
  height:2px;
  background:var(--primary);
  margin:0;
  flex-shrink:0
}

.hero-product h1 {
  font-size:clamp(44px,4.5vw,70px);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.05em;
  margin:0 0 24px;
  white-space:nowrap
}

.hero-product .hero-product-tagline {
  font-size:23px;
  font-weight:500;
  line-height:1.45;
  letter-spacing:-.025em;
  max-width:none;
  margin:0 0 16px;
  color:#292929;
  text-wrap:pretty
}

.hero-product .hero-product-lead {
  max-width:480px;
  font-size:16px;
  color:#555;
  line-height:1.85;
  margin:0 0 28px
}

.hero-product .hero-product-actions {
  align-items:center;
  gap:26px
}

.hero-product .hero-product-actions>.btn-red {
  min-height:50px;
  padding:14px 24px;
  font-size:15px;
  font-weight:600;
  border-radius:3px
}

.hero-secondary-link {
  display:inline-flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
  border:0;
  border-bottom:1px solid #777;
  background:none;
  padding:12px 0;
  font:500 14px var(--font);
  color:#333;
  text-align:left
}

.hero-secondary-link:hover {
  color:var(--primary);
  border-color:var(--primary)
}

.hero-product-facts {
  display:flex;
  flex-wrap:wrap;
  gap:0;
  margin-top:30px;
  color:#666;
  font-size:12px;
  line-height:1.6
}

.hero-product-facts>span {
  padding:0 16px;
  border-left:1px solid #bbb
}

.hero-product-facts>span:first-child {
  padding-left:0;
  border:0
}

.hero-product .hero-visual img {
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.15));
  width:100%;
  max-width:680px
}

@media(min-width:1024px) {
  .hero-product .hero-grid {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)
  }

}

@media(max-width:1100px) and (min-width:1024px) {
  .hero-product h1 {
    font-size:48px
  }

  .hero-product .hero-product-tagline {
    font-size:21px
  }

  .hero-product .hero-product-actions {
    gap:18px
  }

}

@media(max-width:1023px) {
  .hero.hero-product {
    padding:48px 0
  }

  .hero-product .hero-product-copy {
    max-width:640px
  }

  .hero-product h1 {
    font-size:clamp(42px,6vw,64px)
  }

  .hero-product .hero-grid {
    gap:38px
  }

}

@media(max-width:600px) {
  .hero.hero-product {
    padding:36px 0
  }

  .hero-product h1 {
    font-size:clamp(30px,8.5vw,44px);
    margin-bottom:20px
  }

  .hero-product .hero-product-label {
    font-size:12px;
    margin-bottom:20px
  }

  .hero-product .hero-product-tagline {
    font-size:20px
  }

  .hero-product .hero-product-lead {
    font-size:15px;
    line-height:1.8
  }

  .hero-product .hero-product-actions {
    flex-direction:row;
    align-items:center;
    gap:18px
  }

  .hero-product .hero-product-actions>.btn-red {
    width:100%;
    justify-content:center;
    min-height:48px
  }

  .hero-secondary-link {
    margin:0 auto
  }

  .hero-product-facts {
    justify-content:center;
    gap:10px 0;
    margin-top:24px;
    font-size:11px
  }

  .hero-product-facts>span {
    padding:0 10px
  }

}

/* Features: product overview and persistent workflow navigation */

#features-root .fp-header {
  background:#171717;
  padding:66px 0 48px;
  overflow:hidden
}

.fp-hero-layout {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:center;
  gap:48px
}

#features-root .fp-badge {
  color:#70b5ff;
  font-size:12px;
  letter-spacing:.08em;
  margin-bottom:22px
}

#features-root .fp-header h1 {
  font-size:clamp(34px,3.8vw,54px);
  line-height:1.16;
  font-weight:600;
  letter-spacing:-.035em;
  margin-bottom:22px
}

#features-root .fp-header-text>p {
  font-size:16px;
  line-height:1.8;
  color:#c2c2c2;
  margin-bottom:28px
}

.fp-hero-visual {
  min-width:0;
  position:relative;
  text-align:center
}

.fp-hero-visual img {
  display:block;
  width:100%;
  height:auto;
  max-height:310px;
  object-fit:contain;
  filter:drop-shadow(0 20px 25px #0008)
}

.fp-hero-visual>span {
  display:block;
  color:#aaa;
  font-size:12px;
  margin-top:20px;
  letter-spacing:.02em
}

#features-root .fp-body {
  background:#fff;
  padding:56px 0 80px
}

#features-root .fp-grid {
  grid-template-columns:254px minmax(0,1fr);
  gap:64px;
  align-items:start
}

#features-root .fp-cat-label {
  display:block;
  padding:0 0 18px;
  margin:0;
  color:#777;
  font-size:12px;
  border-bottom:1px solid #ddd
}

#features-root .fp-cat-btn {
  padding:19px 14px;
  border-bottom:1px solid #eee;
  border-left:3px solid transparent;
  min-height:78px;
  width:100%;
  text-align:left
}

#features-root .fp-cat-btn.active {
  border-left-color:var(--primary);
  background:#ffffff
}

#features-root .fp-cat-btn-title {
  font-size:15px;
  font-weight:600
}

#features-root .fp-cat-btn-code {
  display:block;
  font-size:12px;
  color:#888;
  margin-top:4px
}

#features-root .fp-cat-btn.active .fp-nav-arrow {
  color:var(--primary)
}

#features-root .fp-trial-box {
  padding:26px 0;
  border-top:0;
  margin:0
}

#features-root .fp-detail-top {
  margin-bottom:14px
}

#features-root .fp-detail-badge {
  color:var(--primary);
  font-size:12px;
  font-weight:600;
  letter-spacing:.025em
}

#features-root .fp-detail-body {
  padding:0
}

#features-root .fp-detail-body h2 {
  font-size:clamp(28px,3vw,40px);
  line-height:1.2;
  color:#1f1f1f;
  margin-bottom:18px;
  max-width:750px
}

#features-root .fp-detail-summary {
  max-width:720px;
  font-size:16px;
  color:#666;
  line-height:1.8;
  margin-bottom:28px
}

#features-root .fp-banner {
  height:auto;
  aspect-ratio:2.6;
  margin:0 0 36px;
  background:#222;
  position:relative;
  border-radius: 0
}

#features-root .fp-banner img {
  position:absolute;
  inset:0;
  object-fit:cover
}

#features-root .fp-banner-meta {
  padding:16px 20px;
  font-size:12px
}

#features-root .fp-banner-code {
  display:none
}

.fp-work-heading {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  padding-bottom:18px
}

.fp-work-heading h3 {
  font-size:21px;
  font-weight:600;
  color:#222;
  margin:0
}

.fp-work-heading>span {
  font-size:12px;
  color:#888
}

#features-root .fp-feat-item {
  grid-template-columns:1.15fr 1fr;
  gap:32px;
  padding:25px 0
}

#features-root .fp-feat-head h4 {
  font-size:18px;
  font-weight:600;
  color:#222
}

#features-root .fp-feat-item p {
  font-size:15px;
  line-height:1.75
}

#features-root .fp-feat-tip {
  border-left:1px solid #e6e6e6;
  padding-left:24px;
  font-size:13px;
  line-height:1.8;
  color:#666
}

.fp-feat-tip>span {
  display:block;
  color:#999;
  font-size:11px;
  margin-bottom:7px
}

#features-root .fp-scope-note {
  display:flex;
  align-items:flex-start;
  gap:14px;
  border:0;
  background:#ffffff;
  padding:20px 22px;
  margin:28px 0;
  color:#666;
  font-size:13px
}

.fp-scope-note>svg {
  flex-shrink:0;
  width:19px;
  height:19px;
  color:#777;
  margin-top:2px
}

.fp-scope-note strong {
  display:block;
  font-weight:600;
  color:#333;
  margin-bottom:6px
}

.fp-scope-note p {
  margin:0;
  line-height:1.8
}

.fp-detail-cta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:28px 0;
  border-top:1px solid #ddd
}

.fp-detail-cta h3 {
  font-size:20px;
  margin:0 0 8px;
  color:#222
}

.fp-detail-cta p {
  font-size:14px;
  color:#777;
  margin:0;
  line-height:1.7
}

.fp-detail-cta .btn {
  flex-shrink:0
}

.fp-command-disclosure {
  border-top:1px solid #ddd
}

.fp-command-disclosure>summary {
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  padding:24px 0;
  cursor:pointer;
  color:#333;
  font-size:17px;
  font-weight:600
}

.fp-command-disclosure>summary::-webkit-details-marker {
  display:none
}

.fp-command-disclosure>summary>span {
  display:flex;
  align-items:center;
  gap:12px
}

.fp-command-disclosure>summary svg {
  width:20px;
  height:20px;
  color:#777
}

.fp-command-disclosure[open]>summary>svg {
  transform:rotate(180deg)
}

#features-root .fp-main {
  gap:12px
}

#features-root button:focus-visible,.fp-command-disclosure>summary:focus-visible {
  outline:2px solid var(--primary);
  outline-offset:4px
}

@media(min-width:1024px) {
  #features-root .fp-sidebar {
    top:110px;
    max-height:calc(100dvh - 132px);
    scrollbar-width:thin
  }

}

@media(max-width:1023px) {
  .fp-hero-layout {
    gap:24px;
    grid-template-columns:1.2fr 1fr
  }

  #features-root .fp-grid {
    grid-template-columns:1fr;
    gap:28px
  }

  #features-root .fp-cat-box {
    display:flex;
    overflow-x:auto;
    border-bottom:1px solid #ddd;
    gap:4px
  }

  #features-root .fp-cat-label {
    display:none
  }

  #features-root .fp-cat-btn {
    min-width:205px;
    width:auto;
    border-left:0;
    border-bottom:3px solid transparent;
    padding:16px 12px
  }

  #features-root .fp-cat-btn.active {
    border-bottom-color:var(--primary)
  }

  #features-root .fp-trial-box {
    display:none
  }

}

@media(max-width:640px) {
  #features-root .fp-header {
    padding:38px 0 30px
  }

  .fp-hero-layout {
    grid-template-columns:1fr;
    gap:28px
  }

  .fp-hero-visual img {
    max-height:210px
  }

  .fp-hero-visual>span {
    font-size:11px;
    margin-top:10px
  }

  #features-root .fp-header h1 {
    font-size:34px
  }

  #features-root .fp-body {
    padding:24px 0 48px
  }

  #features-root .fp-banner {
    aspect-ratio:1.8;
    margin-bottom:28px
  }

  #features-root .fp-feat-item {
    grid-template-columns:1fr;
    gap:15px;
    padding:22px 0
  }

  #features-root .fp-feat-tip {
    padding-left:14px
  }

  .fp-detail-cta {
    flex-direction:column;
    align-items:flex-start
  }

  .fp-work-heading h3 {
    font-size:19px
  }

  .fp-work-heading>span {
    display:none
  }

  #features-root .fp-cat-btn {
    min-width:190px
  }

  .fp-command-disclosure>summary {
    font-size:15px
  }

}

/* Overview product page */

.overview-page {
  color:#1f1f1f;
  background:#fff
}

.overview-page h1,.overview-page h2,.overview-page h3 {
  font-family:var(--font);
  text-transform:none;
  word-break:normal;
  overflow-wrap:normal;
  text-wrap:balance
}

.overview-page p {
  line-height:1.8;
  word-break:normal;
  overflow-wrap:normal;
  text-wrap:pretty;
  color:#666
}

.overview-eyebrow {
  display:block;
  font-size:11px;
  font-weight:600;
  letter-spacing:.09em;
  color:var(--primary);
  margin-bottom:22px
}

.overview-hero {
  background:#ffffff;
  padding:66px 0 60px
}

.overview-hero-grid {
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:64px;
  align-items:center
}

.overview-hero h1 {
  font-size:clamp(36px,4.2vw,60px);
  line-height:1.1;
  letter-spacing:-.045em;
  margin:0 0 22px;
  font-weight:700;
  color:#191919
}

.overview-hero h2 {
  font-size:clamp(23px,2.4vw,32px);
  font-weight:500;
  line-height:1.3;
  letter-spacing:-.025em;
  margin:0 0 22px
}

.overview-hero p {
  font-size:16px;
  max-width:540px;
  margin:0 0 30px
}

.overview-actions {
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap
}

.overview-link {
  display:inline-flex;
  gap:10px;
  align-items:center;
  background:none;
  border:0;
  border-bottom:1px solid currentColor;
  padding:6px 0;
  font:600 13px var(--font);
  color:inherit;
  cursor:pointer;
  text-align:left
}

.overview-link svg {
  width:17px;
  height:17px;
  flex-shrink:0
}

.overview-link:hover {
  color:var(--primary)
}

.overview-hero-media {
  margin:0;
  min-width:0;
  position:relative;
  border-radius: 0;
  overflow:hidden;
  background:#202020
}

.overview-hero-media img {
  width:100%;
  display:block;
  aspect-ratio:1.2;
  object-fit:cover
}

.overview-hero-media figcaption {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:38px 24px 20px;
  background:linear-gradient(transparent,#000b);
  font-size:11px;
  color:#ddd
}

.overview-hero-media figcaption span {
  display:block;
  color:#fff;
  font-size:12px;
  font-weight:600;
  margin-bottom:6px
}

.overview-nav {
  background:#fff;
  border-bottom:1px solid #ddd
}

.overview-nav>.container {
  display:flex;
  gap:34px;
  overflow-x:auto
}

.overview-page .ov-sub {
  background:none;
  border:0;
  border-bottom:3px solid transparent;
  border-radius:0;
  margin:0;
  padding:19px 0;
  color:#666;
  font:500 14px var(--font);
  white-space:nowrap;
  box-shadow:none
}

.overview-page .ov-sub.active {
  background:none;
  border-bottom-color:var(--primary);
  color:#222;
  font-weight:600
}

.overview-section {
  padding:80px 0;
  scroll-margin-top:120px
}

.overview-page h2 {
  font-size:clamp(28px,3vw,40px);
  line-height:1.22;
  letter-spacing:-.035em;
  font-weight:600;
  margin:0 0 24px
}

.overview-page .overview-hero h2 {
  font-size:clamp(23px,2.4vw,32px);
  font-weight:500
}

.overview-intro {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:start
}

.overview-intro p {
  font-size:15px;
  margin:0 0 18px
}

.overview-intro .overview-lead {
  font-size:19px;
  line-height:1.65;
  color:#333
}

.overview-audiences {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:40px;
  margin-top:44px;
  border-top:1px solid #ddd;
  padding-top:34px
}

.overview-audiences article {
  padding-right:20px
}

.overview-audiences svg {
  width:28px;
  height:28px;
  stroke-width:1.4;
  color:var(--primary);
  margin-bottom:20px
}

.overview-audiences h3 {
  font-size:19px;
  font-weight:600;
  margin:0 0 12px
}

.overview-audiences p {
  font-size:14px;
  margin:0
}

.overview-foundation {
  background:#191919;
  color:#fff
}

.overview-foundation-layout {
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:80px
}

.overview-foundation p {
  color:#aaa;
  font-size:15px
}

.overview-foundation-layout>div>p {
  max-width:360px;
  margin-bottom:30px
}

.overview-foundation .overview-eyebrow {
  color:#70b5ff
}

.overview-foundation-list article {
  display:grid;
  grid-template-columns:28px minmax(0,1fr) 28px;
  gap:22px;
  padding:26px 0;
  border-top:1px solid #444
}

.overview-foundation-list article:first-child {
  padding-top:0;
  border:0
}

.overview-foundation-list article>span {
  font-size:12px;
  color:#888;
  padding-top:6px
}

.overview-foundation-list h3 {
  font-size:27px;
  letter-spacing:-.025em;
  font-weight:500;
  margin:0 0 12px
}

.overview-foundation-list p {
  margin:0;
  max-width:480px
}

.overview-foundation-list svg {
  color:#70b5ff;
  width:25px;
  height:25px;
  stroke-width:1.4;
  margin-top:4px
}

.overview-section-head {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:60px;
  margin-bottom:38px
}

.overview-section-head h2 {
  margin:0
}

.overview-section-head>p {
  max-width:340px;
  font-size:14px;
  margin:0
}

.overview-workflow {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:64px;
  align-items:center
}

.overview-workflow figure {
  margin:0;
  background:#222
}

.overview-workflow img {
  display:block;
  width:100%;
  aspect-ratio:1.35;
  object-fit:cover
}

.overview-workflow figcaption {
  font-size:11px;
  color:#ccc;
  padding:14px 18px
}

.overview-workflow ol {
  list-style:none;
  margin:0;
  padding:0
}

.overview-workflow li {
  display:grid;
  grid-template-columns:36px 1fr;
  gap:18px;
  padding:26px 0;
  border-bottom:1px solid #ddd
}

.overview-workflow li:first-child {
  padding-top:0
}

.overview-workflow li>span {
  color:var(--primary);
  font-size:12px;
  padding-top:5px
}

.overview-workflow h3 {
  font-size:21px;
  font-weight:600;
  margin:0 0 10px
}

.overview-workflow p {
  font-size:14px;
  margin:0
}

.overview-start {
  padding:64px 0;
  background:#ffffff;
  scroll-margin-top:120px;
  border-top:1px solid #e5e5e5
}

.overview-start-grid {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:100px;
  align-items:start
}

.overview-start-grid>div>p {
  max-width:520px;
  font-size:15px;
  margin-bottom:28px
}

.overview-start-info {
  border-left:1px solid #d5d5d5;
  padding-left:42px
}

.overview-start-info>div+div {
  border-top:1px solid #d5d5d5;
  margin-top:28px;
  padding-top:25px
}

.overview-start-info span {
  font-size:12px;
  color:#888;
  display:block;
  margin-bottom:12px
}

.overview-start-info h3 {
  font-size:26px;
  font-weight:600;
  margin:0 0 10px
}

.overview-start-info p {
  font-size:14px;
  margin:0 0 12px
}

.overview-page button:focus-visible {
  outline:2px solid var(--primary);
  outline-offset:4px
}

@media(max-width:1023px) {
  .overview-hero-grid {
    gap:32px
  }

  .overview-intro {
    gap:40px
  }

  .overview-foundation-layout {
    gap:40px
  }

  .overview-workflow {
    gap:32px
  }

  .overview-start-grid {
    gap:48px
  }

  .overview-section {
    padding:56px 0
  }

  .overview-section-head {
    gap:30px
  }

}

@media(max-width:700px) {
  .overview-hero {
    padding:38px 0
  }

  .overview-hero-grid,.overview-intro,.overview-foundation-layout,.overview-workflow,.overview-start-grid {
    grid-template-columns:1fr;
    gap:30px
  }

  .overview-hero-media img {
    aspect-ratio:1.65
  }

  .overview-nav>.container {
    gap:24px
  }

  .overview-page .ov-sub {
    font-size:13px;
    padding:16px 0
  }

  .overview-section {
    padding:42px 0
  }

  .overview-audiences {
    grid-template-columns:1fr;
    gap:24px;
    margin-top:20px;
    padding-top:28px
  }

  .overview-audiences article {
    display:grid;
    grid-template-columns:32px 1fr;
    column-gap:16px;
    padding:0
  }

  .overview-audiences svg {
    grid-row:1/3;
    margin:0
  }

  .overview-audiences h3 {
    margin-bottom:8px
  }

  .overview-section-head {
    display:block;
    margin-bottom:26px
  }

  .overview-section-head>p {
    margin-top:16px;
    max-width:none
  }

  .overview-foundation-layout>div>p {
    max-width:none
  }

  .overview-workflow img {
    aspect-ratio:1.65
  }

  .overview-start {
    padding:42px 0
  }

  .overview-start-info {
    border-left:0;
    border-top:1px solid #ddd;
    padding:26px 0 0
  }

  .overview-actions {
    gap:20px
  }

  .overview-intro .overview-lead {
    font-size:17px
  }

  .overview-eyebrow {
    margin-bottom:18px
  }

}

/* Overview opening: product dossier */

.overview-dossier {
  padding:48px 0 30px;
  background:#ffffff;
  border-bottom:1px solid #e6e6e6
}

.overview-dossier-heading {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:end;
  margin-bottom:38px
}

.overview-dossier-heading .overview-eyebrow {
  margin-bottom:16px
}

.overview-dossier-heading h1 {
  font-size:clamp(32px,3.6vw,46px);
  line-height:1.15;
  letter-spacing:-.035em;
  font-weight:600;
  margin:0;
  color:#222
}

.overview-dossier-heading>p {
  font-size:15px;
  line-height:1.8;
  max-width:490px;
  margin:0;
  color:#777
}

.overview-system {
  display:grid;
  grid-template-columns:.85fr 1.25fr 1fr;
  border:1px solid #ddd;
  background:#fff;
  position:relative
}

.overview-system>div {
  padding:30px 32px;
  position:relative;
  min-width:0
}

.overview-system>div>span {
  display:block;
  font-size:10px;
  font-weight:600;
  letter-spacing:.08em;
  color:#888;
  margin-bottom:24px
}

.overview-system>div>strong {
  display:block;
  font-size:30px;
  line-height:1.2;
  letter-spacing:-.025em;
  font-weight:600
}

.overview-system>div>p {
  font-size:14px;
  line-height:1.75;
  margin:15px 0 0;
  max-width:300px
}

.overview-system .overview-system-product {
  background:#202020;
  color:#fff;
  border-top:3px solid var(--primary);
  margin-top:-1px;
  padding-top:28px
}

.overview-system-product>strong em {
  font-style:normal;
  font-weight:400;
  color:#aaa
}

.overview-system .overview-system-product>span {
  color:#bbb
}

.overview-system .overview-system-product>p {
  color:#bdbdbd
}

.overview-system-product>div {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:12px;
  color:#ddd;
  margin-top:24px
}

.overview-system-product svg {
  width:18px;
  height:18px;
  color:#70b5ff
}

.overview-system-foundation:after,.overview-system-product:after {
  content:'→';
  position:absolute;
  right:-15px;
  top:50%;
  transform:translateY(-50%);
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:1px solid #ddd;
  background:#fff;
  color:#555;
  font-size:18px;
  z-index:1
}

.overview-system-tools .overview-link {
  margin-top:20px;
  font-size:12px
}

.overview-system-caption {
  font-size:11px;
  margin:15px 0 0;
  color:#888!important;
  line-height:1.7
}

@media(max-width:900px) {
  .overview-system>div {
    padding:24px
  }

  .overview-system>div>strong {
    font-size:25px
  }

  .overview-system .overview-system-product {
    padding-top:22px
  }

  .overview-dossier-heading {
    gap:32px
  }

}

@media(max-width:640px) {
  .overview-dossier {
    padding:32px 0 24px
  }

  .overview-dossier-heading {
    grid-template-columns:1fr;
    gap:18px;
    margin-bottom:26px
  }

  .overview-system {
    grid-template-columns:1fr
  }

  .overview-system>div {
    padding:24px
  }

  .overview-system>div>span {
    margin-bottom:14px
  }

  .overview-system>div>p {
    max-width:none
  }

  .overview-system-foundation:after,.overview-system-product:after {
    content:'↓';
    right:24px;
    top:auto;
    bottom:-15px;
    transform:none
  }

  .overview-system .overview-system-product {
    margin:0;
    padding-top:24px;
    border-top:0;
    border-left:3px solid var(--primary)
  }

}

/* Ecosystem: workflow product catalog */

.ecosystem-catalog {
  background:#fff;
  color:#222
}

.ecosystem-catalog h1,.ecosystem-catalog h2,.ecosystem-catalog h3,.ecosystem-catalog h4 {
  font-family:var(--font);
  text-transform:none;
  word-break:normal;
  text-wrap:balance
}

.ecosystem-catalog p {
  color:#666;
  font-size:15px;
  line-height:1.8;
  text-wrap:pretty
}

.ecosystem-kicker {
  display:block;
  color:var(--primary);
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  margin-bottom:20px
}

.ecosystem-heading {
  padding:52px 0 0;
  background:#fff
}

.ecosystem-heading-row {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:80px;
  align-items:end;
  padding-bottom:38px
}

.ecosystem-heading h1 {
  font-size:clamp(34px,4vw,52px);
  font-weight:600;
  letter-spacing:-.04em;
  line-height:1.15;
  margin:0
}

.ecosystem-heading-row p {
  margin:0 0 18px;
  max-width:500px
}

.ecosystem-text-link {
  display:inline-flex;
  gap:10px;
  align-items:center;
  color:inherit;
  background:none;
  border:0;
  border-bottom:1px solid currentColor;
  padding:5px 0;
  font:600 13px var(--font);
  cursor:pointer;
  text-decoration:none;
  text-align:left
}

.ecosystem-text-link svg {
  width:17px;
  height:17px;
  flex-shrink:0
}

.ecosystem-text-link:hover {
  color:var(--primary)
}

.ecosystem-route {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid #ddd
}

.ecosystem-route a {
  display:flex;
  align-items:center;
  gap:16px;
  padding:23px 24px;
  color:#333;
  text-decoration:none;
  font-size:14px;
  border-right:1px solid #ddd
}

.ecosystem-route a:first-child {
  padding-left:0
}

.ecosystem-route a:last-child {
  border-right:0
}

.ecosystem-route a>svg {
  width:23px;
  height:23px;
  color:var(--primary);
  stroke-width:1.5;
  flex-shrink:0
}

.ecosystem-route a>svg:last-child {
  width:16px;
  height:16px;
  color:#999;
  margin-left:auto
}

.ecosystem-route a:hover {
  color:var(--primary)
}

.ecosystem-platform {
  background:#202020;
  color:#fff;
  padding:38px 0
}

.ecosystem-platform-grid {
  display:grid;
  grid-template-columns:1fr 1.65fr;
  gap:72px;
  align-items:center
}

.ecosystem-platform-name {
  border-right:1px solid #4a4a4a;
  padding-right:40px
}

.ecosystem-platform-name>span {
  font-size:10px;
  letter-spacing:.08em;
  color:#aaa;
  display:block;
  margin-bottom:14px
}

.ecosystem-platform-name>strong {
  display:block;
  font-size:32px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.025em
}

.ecosystem-platform-name em {
  font-style:normal;
  font-weight:400;
  color:#aaa
}

.ecosystem-platform-name>div {
  display:flex;
  gap:10px;
  margin-top:18px
}

.ecosystem-platform-name>div>span {
  font-size:11px;
  padding:4px 9px;
  border:1px solid #555;
  color:#ccc
}

.ecosystem-platform h2 {
  font-size:23px;
  font-weight:500;
  margin:0 0 12px;
  line-height:1.3
}

.ecosystem-platform p {
  font-size:14px;
  color:#bbb;
  margin:0 0 14px;
  max-width:640px
}

.ecosystem-platform .ecosystem-text-link {
  color:#eee;
  font-size:12px
}

.ecosystem-workflows {
  padding:64px 0 72px;
  scroll-margin-top:120px
}

.ecosystem-section-heading {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:80px;
  align-items:end;
  margin-bottom:38px
}

.ecosystem-catalog h2 {
  font-size:clamp(26px,2.8vw,36px);
  font-weight:600;
  line-height:1.25;
  letter-spacing:-.03em;
  margin:0 0 20px
}

.ecosystem-section-heading h2 {
  margin:0
}

.ecosystem-section-heading>p {
  font-size:14px;
  margin:0;
  max-width:490px
}

.ecosystem-work-row {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:64px;
  border-top:1px solid #ddd;
  padding:32px 0;
  scroll-margin-top:120px
}

.ecosystem-work-row:last-child {
  padding-bottom:0
}

.ecosystem-work-label {
  position:relative;
  padding-left:44px
}

.ecosystem-work-label>svg {
  position:absolute;
  left:0;
  top:3px;
  width:26px;
  height:26px;
  color:var(--primary);
  stroke-width:1.5
}

.ecosystem-work-label>span {
  display:block;
  font-size:11px;
  color:#888;
  margin-bottom:10px
}

.ecosystem-work-label h3 {
  font-size:23px;
  font-weight:600;
  letter-spacing:-.02em;
  margin:0 0 12px
}

.ecosystem-work-label p {
  font-size:14px;
  margin:0;
  max-width:240px
}

.ecosystem-tool-list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px
}

.ecosystem-tool-list article {
  display:grid;
  grid-template-columns:34px 1fr;
  gap:12px 14px;
  align-content:start;
  padding:22px;
  border:1px solid #e4e4e4;
  background:#ffffff;
  min-width:0;
  transition:border-color .2s,background .2s
}

.ecosystem-tool-list article:hover {
  border-color:#a0bad4;
  background:#fff
}

.ecosystem-tool-icon {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  background:#fff;
  border:1px solid #eee
}

.ecosystem-tool-icon svg {
  width:19px;
  height:19px;
  color:var(--primary);
  stroke-width:1.5
}

.ecosystem-tool-list h4 {
  font-size:17px;
  font-weight:600;
  margin:0 0 8px;
  line-height:1.4;
  letter-spacing:-.015em
}

.ecosystem-tool-list p {
  font-size:13px;
  margin:0;
  line-height:1.7
}

.ecosystem-tool-type {
  grid-column:2;
  color:#999;
  font-size:10px;
  margin-top:2px
}

.ecosystem-specialist {
  background:#ffffff;
  padding:64px 0;
  scroll-margin-top:120px
}

.ecosystem-specialist-grid {
  display:grid;
  grid-template-columns:1fr 1.65fr;
  gap:80px;
  align-items:start
}

.ecosystem-specialist-intro p {
  font-size:14px;
  margin:0 0 22px;
  max-width:320px
}

.ecosystem-group-list details {
  border-top:1px solid #d5d5d5
}

.ecosystem-group-list summary {
  list-style:none;
  cursor:pointer;
  display:grid;
  grid-template-columns:26px 1fr 20px;
  gap:18px;
  align-items:center;
  padding:22px 0
}

.ecosystem-group-list summary::-webkit-details-marker {
  display:none
}

.ecosystem-group-list summary>span {
  font-size:11px;
  color:#888
}

.ecosystem-group-list summary h3 {
  font-size:18px;
  font-weight:500;
  margin:0;
  line-height:1.5
}

.ecosystem-group-list summary svg {
  width:19px;
  height:19px;
  color:#777;
  transition:transform .2s
}

.ecosystem-group-list details[open] summary svg {
  transform:rotate(45deg);
  color:var(--primary)
}

.ecosystem-product-tags {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding:0 0 24px 44px
}

.ecosystem-product-tags>span {
  font-size:13px;
  background:#fff;
  border:1px solid #ddd;
  padding:8px 12px;
  color:#444;
  line-height:1.5
}

.ecosystem-group-note {
  font-size:12px!important;
  border-top:1px solid #d5d5d5;
  padding-top:20px;
  margin:0;
  color:#888!important
}

.ecosystem-advice {
  padding:64px 0
}

.ecosystem-advice-grid {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:100px;
  align-items:center
}

.ecosystem-advice p {
  font-size:14px;
  max-width:500px;
  margin:0 0 26px
}

.ecosystem-advice ol {
  list-style:none;
  padding:0;
  margin:0;
  border-left:1px solid #ddd;
  padding-left:34px
}

.ecosystem-advice li {
  display:grid;
  grid-template-columns:26px 1fr;
  gap:16px;
  padding:20px 0;
  border-bottom:1px solid #eee
}

.ecosystem-advice li:last-child {
  border:0
}

.ecosystem-advice li>span {
  font-size:11px;
  color:var(--primary);
  padding-top:5px
}

.ecosystem-advice h3 {
  font-size:18px;
  margin:0 0 8px;
  font-weight:600
}

.ecosystem-advice li p {
  font-size:13px;
  margin:0
}

.ecosystem-catalog button:focus-visible,.ecosystem-catalog a:focus-visible,.ecosystem-catalog summary:focus-visible {
  outline:2px solid var(--primary);
  outline-offset:4px
}

@media(max-width:1023px) {
  .ecosystem-heading-row,.ecosystem-section-heading {
    gap:36px
  }

  .ecosystem-platform-grid {
    gap:36px
  }

  .ecosystem-work-row {
    gap:30px;
    grid-template-columns:1fr 2.5fr
  }

  .ecosystem-tool-list article {
    padding:18px
  }

  .ecosystem-specialist-grid {
    gap:36px
  }

  .ecosystem-advice-grid {
    gap:44px
  }

}

@media(max-width:700px) {
  .ecosystem-heading {
    padding:34px 0 0
  }

  .ecosystem-heading-row,.ecosystem-section-heading,.ecosystem-platform-grid,.ecosystem-work-row,.ecosystem-specialist-grid,.ecosystem-advice-grid {
    grid-template-columns:1fr;
    gap:26px
  }

  .ecosystem-heading-row {
    padding-bottom:28px
  }

  .ecosystem-route {
    grid-template-columns:1fr
  }

  .ecosystem-route a,.ecosystem-route a:first-child {
    padding:16px 0;
    border-right:0;
    border-bottom:1px solid #eee
  }

  .ecosystem-platform {
    padding:30px 0
  }

  .ecosystem-platform-name {
    border-right:0;
    border-bottom:1px solid #444;
    padding:0 0 24px
  }

  .ecosystem-workflows,.ecosystem-specialist,.ecosystem-advice {
    padding:42px 0
  }

  .ecosystem-section-heading {
    margin-bottom:28px
  }

  .ecosystem-work-label p {
    max-width:none
  }

  .ecosystem-tool-list {
    gap:10px
  }

  .ecosystem-tool-list article {
    grid-template-columns:1fr;
    padding:18px
  }

  .ecosystem-tool-type {
    grid-column:1
  }

  .ecosystem-tool-list h4 {
    font-size:16px
  }

  .ecosystem-specialist-intro p {
    max-width:none
  }

  .ecosystem-advice ol {
    border-left:0;
    border-top:1px solid #ddd;
    padding:6px 0 0
  }

  .ecosystem-product-tags {
    padding-left:0
  }

  .ecosystem-group-list summary {
    gap:12px
  }

  .ecosystem-group-list summary h3 {
    font-size:17px
  }

}

@media(prefers-reduced-motion:reduce) {
  .ecosystem-catalog * {
    transition:none!important
  }

}

/* Comparison: criteria workspace */

.compare-page {
  background:#fff;
  color:#222
}

.compare-page h1,.compare-page h2,.compare-page h3 {
  font-family:var(--font);
  text-transform:none;
  text-wrap:balance;
  word-break:normal
}

.compare-page p {
  line-height:1.8;
  color:#777;
  text-wrap:pretty
}

.compare-kicker {
  display:block;
  font-size:11px;
  letter-spacing:.08em;
  font-weight:600;
  color:var(--primary);
  margin-bottom:18px
}

.compare-heading {
  padding:44px 0 38px;
  background:#ffffff;
  border-bottom:1px solid #ddd
}

.compare-heading-grid {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:60px;
  align-items:center
}

.compare-heading h1 {
  font-size:clamp(32px,3.7vw,48px);
  line-height:1.15;
  letter-spacing:-.035em;
  font-weight:600;
  margin:0
}

.compare-heading p {
  font-size:15px;
  margin:0;
  max-width:480px
}

.compare-content {
  padding:44px 0 56px
}

.compare-layout {
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:48px;
  align-items:start
}

.compare-sidebar {
  position:sticky;
  top:110px
}

.compare-sidebar>span {
  font-size:10px;
  color:#999;
  letter-spacing:.06em;
  display:block;
  margin-bottom:20px
}

.compare-sidebar nav a {
  display:flex;
  align-items:center;
  gap:12px;
  border-bottom:1px solid #e5e5e5;
  padding:19px 0;
  font-size:13px;
  font-weight:500;
  text-decoration:none;
  color:#444
}

.compare-sidebar nav a>span {
  color:var(--primary);
  font-size:10px
}

.compare-sidebar nav svg {
  width:14px;
  height:14px;
  margin-left:auto;
  color:#888
}

.compare-sidebar nav a:hover {
  color:var(--primary)
}

.compare-sidebar-note {
  display:flex;
  gap:10px;
  padding:24px 0
}

.compare-sidebar-note svg {
  width:17px;
  height:17px;
  flex-shrink:0;
  color:#999;
  margin-top:3px
}

.compare-sidebar-note p {
  font-size:12px;
  margin:0
}

.compare-main {
  min-width:0
}

.compare-product-head {
  display:grid;
  grid-template-columns:1fr 1fr;
  margin-left:23%;
  border:1px solid #ddd;
  border-bottom:0
}

.compare-product-head>div {
  padding:24px;
  background:#ffffff
}

.compare-product-head .compare-anfa-product {
  background:#222;
  color:#fff;
  border-top:3px solid var(--primary);
  padding-top:21px
}

.compare-product-head span {
  display:block;
  font-size:10px;
  letter-spacing:.07em;
  color:#888;
  margin-bottom:14px
}

.compare-anfa-product>span {
  color:#bbb
}

.compare-product-head h2 {
  font-size:25px;
  font-weight:600;
  letter-spacing:-.025em;
  margin:0 0 8px;
  line-height:1.2
}

.compare-product-head h2 em {
  font-style:normal;
  font-weight:400;
  color:#aaa
}

.compare-product-head p {
  font-size:12px;
  line-height:1.6;
  margin:0
}

.compare-anfa-product p {
  color:#bbb
}

.compare-group {
  scroll-margin-top:120px;
  border:1px solid #ddd;
  border-bottom:0
}

.compare-group:last-of-type {
  border-bottom:1px solid #ddd
}

.compare-group>header {
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 22px;
  background:#ffffff;
  border-bottom:1px solid #ddd
}

.compare-group>header>span {
  font-size:11px;
  color:var(--primary)
}

.compare-group h3 {
  font-size:17px;
  font-weight:600;
  margin:0 0 3px
}

.compare-group header p {
  font-size:12px;
  margin:0
}

.compare-group table {
  width:100%;
  border-collapse:collapse;
  table-layout:fixed
}

.compare-group th {
  width:23%;
  font-size:13px;
  font-weight:600;
  text-align:left;
  vertical-align:top;
  padding:20px;
  color:#333;
  background:#fff
}

.compare-group td {
  width:38.5%;
  vertical-align:top;
  padding:20px 22px;
  font-size:13px;
  line-height:1.8;
  color:#555;
  border-left:1px solid #e8e8e8;
  word-break:normal;
  overflow-wrap:normal
}

.compare-group .compare-anfa-cell {
  background:#ffffff;
  color:#333
}

.compare-group tr+tr>* {
  border-top:1px solid #e8e8e8
}

.compare-source {
  margin-top:22px;
  border-bottom:1px solid #ddd
}

.compare-source summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px 0;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  list-style:none;
  color:#666
}

.compare-source summary::-webkit-details-marker {
  display:none
}

.compare-source svg {
  width:16px;
  height:16px
}

.compare-source[open] summary>svg {
  transform:rotate(45deg)
}

.compare-source>div {
  padding:0 0 18px
}

.compare-source p {
  font-size:12px;
  margin:0 0 14px
}

.compare-source a {
  display:inline-flex;
  gap:7px;
  align-items:center;
  font-size:12px;
  color:#666;
  margin:0 20px 10px 0;
  text-underline-offset:4px
}

.compare-evaluation {
  padding:48px 0;
  background:#ffffff
}

.compare-evaluation h2 {
  font-size:30px;
  letter-spacing:-.025em;
  font-weight:600;
  margin:0 0 30px
}

.compare-evaluation ol {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:40px;
  list-style:none;
  padding:0;
  margin:0
}

.compare-evaluation li {
  border-top:1px solid #ccc;
  padding-top:20px
}

.compare-evaluation li>span {
  font-size:11px;
  color:var(--primary);
  display:block;
  margin-bottom:16px
}

.compare-evaluation h3 {
  font-size:19px;
  font-weight:600;
  margin:0 0 12px
}

.compare-evaluation li p {
  font-size:14px;
  margin:0
}

.compare-footer {
  padding:40px 0;
  background:#202020;
  color:#fff
}

.compare-footer>.container {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:36px
}

.compare-footer h2 {
  font-size:25px;
  font-weight:500;
  margin:0 0 10px;
  letter-spacing:-.02em
}

.compare-footer p {
  font-size:14px;
  color:#aaa;
  margin:0
}

.compare-footer>.container>div:last-child {
  display:flex;
  gap:12px;
  flex-shrink:0
}

.compare-footer .btn-outline {
  color:#fff;
  border-color:#777;
  background:transparent
}

.compare-page a:focus-visible,.compare-page button:focus-visible,.compare-page summary:focus-visible {
  outline:2px solid var(--primary);
  outline-offset:4px
}

@media(max-width:1100px) {
  .compare-layout {
    grid-template-columns:180px minmax(0,1fr);
    gap:28px
  }

  .compare-product-head>div {
    padding:20px
  }

  .compare-group th,.compare-group td {
    padding:17px 14px
  }

  .compare-product-head h2 {
    font-size:22px
  }

  .compare-footer>.container {
    align-items:flex-start;
    flex-direction:column
  }

}

@media(max-width:850px) {
  .compare-layout {
    grid-template-columns:1fr;
    gap:24px
  }

  .compare-sidebar {
    position:static
  }

  .compare-sidebar>span,.compare-sidebar-note,.compare-sidebar>.btn {
    display:none
  }

  .compare-sidebar nav {
    display:flex;
    gap:24px;
    overflow-x:auto
  }

  .compare-sidebar nav a {
    white-space:nowrap;
    padding:12px 0
  }

  .compare-heading-grid {
    gap:28px
  }

  .compare-content {
    padding-top:24px
  }

}

@media(max-width:600px) {
  .compare-heading {
    padding:30px 0
  }

  .compare-heading-grid {
    grid-template-columns:1fr;
    gap:18px
  }

  .compare-heading p {
    font-size:14px
  }

  .compare-product-head {
    margin-left:0
  }

  .compare-product-head>div {
    padding:18px 14px
  }

  .compare-product-head .compare-anfa-product {
    padding-top:15px
  }

  .compare-product-head h2 {
    font-size:20px
  }

  .compare-product-head p {
    font-size:11px
  }

  .compare-group table,.compare-group tbody {
    display:block
  }

  .compare-group tr {
    display:grid;
    grid-template-columns:1fr 1fr
  }

  .compare-group th {
    display:block;
    grid-column:1/-1;
    width:auto;
    background:#ffffff;
    padding:14px 16px;
    border-bottom:1px solid #eee
  }

  .compare-group td {
    display:block;
    width:auto;
    padding:16px;
    font-size:12px;
    border-top:0!important;
    line-height:1.75
  }

  .compare-group td:before {
    content:attr(data-product);
    display:block;
    font-size:10px;
    font-weight:600;
    color:#999;
    margin-bottom:9px
  }

  .compare-group .compare-anfa-cell:before {
    color:var(--primary)
  }

  .compare-group>header {
    padding:17px 16px
  }

  .compare-evaluation {
    padding:36px 0
  }

  .compare-evaluation ol {
    grid-template-columns:1fr;
    gap:24px
  }

  .compare-evaluation h2 {
    font-size:27px
  }

  .compare-footer {
    padding:32px 0
  }

  .compare-footer>.container>div:last-child {
    flex-wrap:wrap
  }

  .compare-sidebar nav {
    gap:20px
  }

  .compare-sidebar nav svg {
    display:none
  }

}

/* Pricing: online license options */

.license-page {
  background:#fff;
  color:#222
}

.license-page h1,.license-page h2,.license-page h3 {
  font-family:var(--font);
  text-transform:none;
  text-wrap:balance;
  word-break:normal
}

.license-page p {
  color:#777;
  line-height:1.8;
  text-wrap:pretty
}

.license-kicker {
  display:block;
  color:var(--primary);
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  margin-bottom:20px
}

.license-heading {
  padding:48px 0 42px;
  background:#ffffff;
  border-bottom:1px solid #e5e5e5
}

.license-heading-grid {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:64px
}

.license-heading h1 {
  font-size:clamp(32px,3.6vw,46px);
  font-weight:600;
  line-height:1.18;
  letter-spacing:-.035em;
  margin:0 0 20px
}

.license-heading p {
  font-size:15px;
  margin:0;
  max-width:650px
}

.license-account {
  display:flex;
  align-items:center;
  gap:16px;
  padding:22px 26px;
  border:1px solid #ddd;
  background:#fff;
  flex-shrink:0
}

.license-account>svg {
  width:30px;
  height:30px;
  color:var(--primary);
  stroke-width:1.5
}

.license-account strong {
  display:block;
  font-size:15px;
  font-weight:600
}

.license-account span {
  display:block;
  font-size:12px;
  color:#999;
  margin-top:6px
}

.license-plans {
  padding:46px 0 56px
}

.license-plans-heading {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:30px;
  margin-bottom:26px
}

.license-plans-heading h2 {
  font-size:23px;
  font-weight:600;
  letter-spacing:-.025em;
  margin:0
}

.license-plans-heading p {
  font-size:13px;
  margin:0
}

.license-plan-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px
}

.license-plan {
  padding:30px;
  border:1px solid #ddd;
  background:#fff;
  display:flex;
  flex-direction:column;
  min-width:0
}

.license-plan-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:28px
}

.license-plan-top>span {
  font-size:10px;
  letter-spacing:.05em;
  color:#999
}

.license-plan-top svg {
  width:24px;
  height:24px;
  color:#777;
  stroke-width:1.5
}

.license-plan h3 {
  font-size:40px;
  font-weight:600;
  letter-spacing:-.04em;
  line-height:1.2;
  margin:0 0 14px
}

.license-plan-description {
  font-size:14px;
  min-height:52px;
  margin:0 0 26px
}

.license-plan-price {
  padding:24px 0;
  border-top:1px solid #e5e5e5
}

.license-plan-price strong {
  display:block;
  font-size:23px;
  font-weight:500;
  letter-spacing:-.02em
}

.license-plan-price>span {
  display:block;
  font-size:12px;
  color:#999;
  margin-top:8px
}

.license-plan ul {
  list-style:none;
  padding:24px 0 0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:15px
}

.license-plan li {
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:13px;
  color:#666;
  line-height:1.7
}

.license-plan li svg {
  width:15px;
  height:15px;
  flex-shrink:0;
  color:var(--primary);
  margin-top:4px
}

.license-plan .btn {
  font-size:13px;
  justify-content:space-between;
  border-radius:3px
}

.license-plan-featured {
  background:#202020;
  color:#fff;
  border-color:#202020;
  border-top:3px solid var(--primary);
  padding-top:28px
}

.license-plan-featured .license-plan-top>span,.license-plan-featured .license-plan-top svg {
  color:#aaa
}

.license-plan-featured .license-plan-description,.license-plan-featured li {
  color:#bbb
}

.license-plan-featured .license-plan-price {
  border-color:#444
}

.license-price-note {
  font-size:12px;
  margin:18px 0 30px;
  color:#999!important
}

.license-hardware {
  display:flex;
  align-items:center;
  gap:22px;
  padding:26px 30px;
  background:#ffffff;
  border:1px solid #e5e5e5
}

.license-hardware-icon {
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  background:#fff;
  border:1px solid #ddd;
  flex-shrink:0
}

.license-hardware-icon svg {
  width:25px;
  height:25px;
  stroke-width:1.5;
  color:#555
}

.license-hardware>div>span {
  font-size:10px;
  letter-spacing:.05em;
  color:#999;
  display:block;
  margin-bottom:8px
}

.license-hardware h3 {
  font-size:20px;
  font-weight:600;
  margin:0 0 8px
}

.license-hardware p {
  font-size:13px;
  margin:0
}

.license-link {
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:none;
  border:0;
  border-bottom:1px solid currentColor;
  padding:5px 0;
  color:inherit;
  font:600 13px var(--font);
  cursor:pointer;
  text-decoration:none
}

.license-link svg {
  width:17px;
  height:17px;
  flex-shrink:0
}

.license-link:hover {
  color:var(--primary)
}

.license-hardware>.license-link {
  margin-left:auto;
  white-space:nowrap
}

.license-faq {
  padding:56px 0;
  background:#ffffff;
  border-top:1px solid #eee
}

.license-faq-grid {
  display:grid;
  grid-template-columns:1fr 1.6fr;
  gap:80px
}

.license-faq h2 {
  font-size:32px;
  font-weight:600;
  line-height:1.25;
  letter-spacing:-.03em;
  margin:0 0 24px
}

.license-faq-grid>div>p {
  font-size:14px;
  margin:0 0 12px
}

.license-faq details {
  border-top:1px solid #ddd
}

.license-faq details:last-child {
  border-bottom:1px solid #ddd
}

.license-faq summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:20px 0;
  list-style:none;
  cursor:pointer;
  font-size:15px;
  font-weight:500;
  line-height:1.6
}

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

.license-faq summary svg {
  width:18px;
  height:18px;
  color:#888;
  flex-shrink:0
}

.license-faq details[open] summary svg {
  transform:rotate(45deg);
  color:var(--primary)
}

.license-faq details p {
  font-size:14px;
  margin:0;
  padding:0 30px 22px 0
}

.license-trial {
  padding:36px 0;
  background:#fff;
  border-top:1px solid #eee
}

.license-trial>.container {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}

.license-trial h2 {
  font-size:25px;
  font-weight:600;
  letter-spacing:-.025em;
  margin:0 0 10px
}

.license-trial p {
  font-size:14px;
  margin:0
}

.license-page button:focus-visible,.license-page summary:focus-visible,.license-page a:focus-visible {
  outline:2px solid var(--primary);
  outline-offset:4px
}

@media(max-width:1000px) {
  .license-heading-grid {
    gap:30px
  }

  .license-account {
    padding:18px
  }

  .license-plan {
    padding:24px
  }

  .license-plan-featured {
    padding-top:22px
  }

  .license-plan-grid {
    gap:14px
  }

  .license-faq-grid {
    gap:36px
  }

  .license-plans-heading {
    align-items:flex-start;
    flex-direction:column;
    gap:12px
  }

}

@media(max-width:700px) {
  .license-heading {
    padding:32px 0
  }

  .license-heading-grid {
    flex-direction:column;
    align-items:flex-start;
    gap:24px
  }

  .license-account {
    padding:14px 20px;
    width:100%
  }

  .license-plan-grid {
    grid-template-columns:1fr;
    gap:20px
  }

  .license-plan-description {
    min-height:0;
    margin-bottom:20px
  }

  .license-plan-top {
    margin-bottom:20px
  }

  .license-plan h3 {
    font-size:34px
  }

  .license-plans {
    padding:32px 0 40px
  }

  .license-hardware {
    flex-wrap:wrap;
    padding:22px;
    gap:18px
  }

  .license-hardware>div:nth-child(2) {
    flex:1;
    min-width:180px
  }

  .license-hardware>.license-link {
    margin-left:0
  }

  .license-faq {
    padding:38px 0
  }

  .license-faq-grid {
    grid-template-columns:1fr;
    gap:30px
  }

  .license-faq h2 {
    font-size:28px
  }

  .license-trial>.container {
    flex-direction:column;
    align-items:flex-start
  }

  .license-trial h2 {
    font-size:23px
  }

}

/* Resources: typography and controls alignment */

.res-page .res-hero {
  padding:46px 0;
  background:#202020
}

.res-page .res-hero-inner {
  max-width:850px
}

.res-page .res-kicker {
  color:#70b5ff;
  margin-bottom:18px
}

.res-page .res-hero h1 {
  font-size:clamp(32px,3.5vw,46px);
  line-height:1.2;
  font-weight:600;
  max-width:820px;
  margin-bottom:20px;
  letter-spacing:-.035em;
  text-wrap:balance
}

.res-page .res-lead {
  font-size:16px;
  max-width:680px;
  line-height:1.8
}

.res-page .res-shell {
  padding:44px 0 64px
}

.res-page .res-shell-grid {
  gap:48px
}

.res-page .res-body {
  min-width:0
}

.res-page .res-nav-item {
  padding:18px 14px;
  border-bottom:1px solid #eee
}

.res-page .res-nav-text strong {
  font-size:14px;
  font-weight:600
}

.res-page .res-nav-text em {
  line-height:1.6
}

.res-page .res-body-head h2 {
  font-weight:600;
  font-size:29px
}

.res-page .res-section-label {
  color:var(--primary);
  font-family:var(--font);
  letter-spacing:.04em
}

.res-page .res-download h3,.res-page .res-resource h3 {
  font-weight:600;
  font-size:20px;
  line-height:1.4
}

.res-page .eh-text-link {
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:6px 0;
  background:none;
  border:0;
  border-bottom:1px solid currentColor;
  border-radius:0;
  box-shadow:none;
  color:#333;
  font:600 13px var(--font);
  line-height:1.5;
  text-decoration:none;
  cursor:pointer;
  text-transform:none
}

.res-page .eh-text-link svg {
  width:17px;
  height:17px;
  flex-shrink:0
}

.res-page .eh-text-link:hover {
  color:var(--primary)
}

.res-page .res-nav-help {
  padding:22px 14px
}

.res-page .res-nav-help>span {
  margin-bottom:10px;
  font-size:12px
}

.res-page .res-download {
  padding:26px 0;
  gap:20px
}

.res-page .res-file-icon {
  width:44px;
  height:44px;
  border:1px solid #e5e5e5;
  background:#ffffff
}

.res-page .res-checklist {
  padding:26px 28px;
  border-left:3px solid #d7d7d7;
  background:#ffffff
}

.res-page .res-checklist h3 {
  font-weight:600
}

.res-page .res-resource-index {
  font-family:var(--font)
}

.res-page .res-learning-feature .eh-text-link {
  color:#fff
}

.res-page h1,.res-page h2,.res-page h3,.res-page p {
  word-break:normal;
  overflow-wrap:normal
}

.res-page p {
  text-wrap:pretty
}

.res-page button:focus-visible,.res-page a:focus-visible,.res-page summary:focus-visible {
  outline:2px solid var(--primary);
  outline-offset:4px
}

@media(min-width:960px) {
  .res-page .res-shell-grid {
    grid-template-columns:250px minmax(0,1fr)
  }

}

@media(max-width:959px) {
  .res-page .res-shell-grid {
    gap:28px
  }

  .res-page .res-nav-item {
    border-bottom:2px solid transparent
  }

  .res-page .res-nav-item.active {
    border-bottom-color:var(--primary)
  }

}

@media(max-width:600px) {
  .res-page .res-hero {
    padding:32px 0
  }

  .res-page .res-lead {
    font-size:15px
  }

  .res-page .res-shell {
    padding:26px 0 42px
  }

  .res-page .res-body-head h2 {
    font-size:26px
  }

  .res-page .res-checklist {
    padding:22px 20px
  }

  .res-page .res-download {
    gap:14px
  }

  .res-page .res-file-icon {
    width:36px;
    height:38px
  }

  .res-page .res-nav-item {
    padding:12px
  }

}

/* Support: contact and request workspace */

.help-page {
  background:#fff;
  color:#222
}

.help-page h1,.help-page h2,.help-page h3 {
  font-family:var(--font);
  text-transform:none;
  word-break:normal;
  text-wrap:balance
}

.help-page p {
  line-height:1.8;
  color:#777;
  text-wrap:pretty
}

.help-kicker {
  display:block;
  font-size:11px;
  letter-spacing:.08em;
  font-weight:600;
  color:var(--primary);
  margin-bottom:18px
}

.help-heading {
  padding:44px 0 30px;
  background:#ffffff
}

.help-heading h1 {
  font-size:clamp(32px,3.5vw,46px);
  font-weight:600;
  letter-spacing:-.035em;
  line-height:1.2;
  margin:0 0 18px
}

.help-heading p {
  font-size:15px;
  margin:0;
  max-width:680px
}

.help-main {
  background:linear-gradient(#ffffff 100px,#fff 100px);
  padding:0 0 56px
}

.help-main-grid {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:24px;
  align-items:stretch
}

.help-technical,.help-sales {
  padding:34px 36px;
  display:flex;
  flex-direction:column;
  min-width:0
}

.help-technical {
  background:#202020;
  color:#fff;
  border-top:3px solid var(--primary)
}

.help-sales {
  background:#fff;
  border:1px solid #ddd;
  padding-top:36px
}

.help-card-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:22px
}

.help-card-top span {
  font-size:10px;
  letter-spacing:.07em;
  color:#999
}

.help-card-top svg {
  width:30px;
  height:30px;
  stroke-width:1.4;
  color:var(--primary)
}

.help-technical .help-card-top span {
  color:#bbb
}

.help-page .help-main h2 {
  font-size:28px;
  font-weight:600;
  letter-spacing:-.025em;
  line-height:1.3;
  margin:0 0 16px
}

.help-main article>p {
  font-size:14px;
  margin:0 0 24px;
  max-width:510px
}

.help-technical>p {
  color:#bbb!important
}

.help-technical-topics {
  display:flex;
  flex-direction:column;
  gap:15px;
  margin:0 0 30px
}

.help-technical-topics>span {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:13px;
  color:#ddd
}

.help-technical-topics svg {
  width:18px;
  height:18px;
  stroke-width:1.5;
  color:#888
}

.help-main .btn {
  align-self:flex-start;
  margin-top:auto;
  border-radius:3px;
  font-size:13px
}

.help-sales ul {
  padding:0 0 0 16px;
  margin:0 0 30px;
  font-size:13px;
  color:#666;
  line-height:1.7;
  display:flex;
  flex-direction:column;
  gap:12px
}

.help-sales li::marker {
  color:var(--primary)
}

.help-technical-bottom,.help-sales-bottom {
  border-top:1px solid #444;
  margin-top:28px;
  padding-top:20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}

.help-technical-bottom>span,.help-sales-bottom>span {
  font-size:12px;
  color:#999
}

.help-technical-bottom a {
  display:flex;
  align-items:center;
  gap:14px;
  color:#fff;
  font-size:21px;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap
}

.help-technical-bottom svg {
  width:17px;
  height:17px;
  stroke-width:1.5
}

.help-sales-bottom {
  border-color:#ddd
}

.help-sales-bottom strong {
  font-size:21px;
  font-weight:600
}

.help-prepare {
  padding:52px 0;
  background:#ffffff;
  border-top:1px solid #eee
}

.help-prepare-grid {
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:80px;
  align-items:start
}

.help-page .help-prepare h2 {
  font-size:32px;
  line-height:1.25;
  font-weight:600;
  letter-spacing:-.03em;
  margin:0 0 22px
}

.help-prepare-grid>div>p {
  font-size:14px;
  max-width:360px;
  margin:0
}

.help-remote {
  display:flex;
  gap:12px;
  padding:20px 0;
  border-top:1px solid #ddd;
  margin-top:26px;
  max-width:370px
}

.help-remote svg {
  width:19px;
  height:19px;
  flex-shrink:0;
  color:#888;
  margin-top:4px
}

.help-remote p {
  font-size:12px;
  margin:0;
  color:#888
}

.help-prepare ol {
  list-style:none;
  padding:0;
  margin:0
}

.help-prepare li {
  display:grid;
  grid-template-columns:30px 1fr;
  gap:20px;
  border-top:1px solid #ddd;
  padding:22px 0
}

.help-prepare li>span {
  font-size:11px;
  color:var(--primary);
  padding-top:5px
}

.help-prepare h3 {
  font-size:19px;
  font-weight:600;
  margin:0 0 10px
}

.help-prepare li p {
  font-size:14px;
  margin:0
}

.help-links {
  padding:48px 0
}

.help-links-heading h2 {
  font-size:27px;
  font-weight:600;
  letter-spacing:-.025em;
  margin:0 0 28px
}

.help-shortcuts {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px
}

.help-shortcuts button {
  display:flex;
  align-items:center;
  gap:18px;
  padding:24px;
  border:1px solid #ddd;
  background:#fff;
  text-align:left;
  font-family:var(--font);
  color:#333;
  cursor:pointer
}

.help-shortcuts button:hover {
  background:#ffffff;
  border-color:#bbb
}

.help-shortcuts button>svg {
  width:25px;
  height:25px;
  color:var(--primary);
  stroke-width:1.5;
  flex-shrink:0
}

.help-shortcuts button>svg:last-child {
  width:19px;
  height:19px;
  margin-left:auto;
  color:#888
}

.help-shortcuts strong {
  display:block;
  font-size:17px;
  font-weight:600;
  line-height:1.5
}

.help-shortcuts small {
  display:block;
  font-size:12px;
  color:#888;
  margin-top:6px;
  line-height:1.7
}

.help-contact {
  padding:38px 0 48px;
  background:#ffffff
}

.help-contact-heading {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:24px;
  margin-bottom:24px
}

.help-contact-heading h2 {
  font-size:24px;
  font-weight:600;
  letter-spacing:-.025em;
  margin:0
}

.help-contact-heading p {
  font-size:13px;
  margin:0
}

.help-contact-grid {
  display:grid;
  grid-template-columns:1fr 1fr 1.2fr;
  border-top:1px solid #ddd;
  padding-top:25px;
  gap:32px
}

.help-contact-grid>a,.help-contact-grid>div {
  display:grid;
  grid-template-columns:20px 1fr;
  column-gap:12px;
  align-content:start;
  color:#333;
  text-decoration:none;
  min-width:0
}

.help-contact-grid svg {
  width:18px;
  height:18px;
  grid-row:1/3;
  color:#999;
  margin-top:2px;
  stroke-width:1.5
}

.help-contact-grid span {
  font-size:11px;
  color:#999;
  margin-bottom:10px
}

.help-contact-grid strong {
  font-size:15px;
  font-weight:500;
  overflow-wrap:anywhere
}

.help-contact-grid p {
  font-size:13px;
  margin:0;
  color:#555
}

.help-page button:focus-visible,.help-page a:focus-visible {
  outline:2px solid var(--primary);
  outline-offset:4px
}

@media(max-width:1000px) {
  .help-main-grid {
    grid-template-columns:1.1fr 1fr;
    gap:18px
  }

  .help-technical,.help-sales {
    padding:28px
  }

  .help-technical-bottom {
    flex-direction:column;
    align-items:flex-start;
    gap:10px
  }

  .help-prepare-grid {
    gap:40px
  }

  .help-main .help-sales {
    padding-top:30px
  }

}

@media(max-width:700px) {
  .help-heading {
    padding:32px 0 26px
  }

  .help-main-grid,.help-prepare-grid,.help-shortcuts,.help-contact-grid {
    grid-template-columns:1fr;
    gap:24px
  }

  .help-main {
    padding-bottom:36px
  }

  .help-technical,.help-sales {
    padding:26px
  }

  .help-page .help-main h2 {
    font-size:25px
  }

  .help-technical-bottom {
    flex-direction:row;
    align-items:center;
    flex-wrap:wrap
  }

  .help-technical-bottom a,.help-sales-bottom strong {
    font-size:20px
  }

  .help-prepare {
    padding:36px 0
  }

  .help-page .help-prepare h2 {
    font-size:28px
  }

  .help-prepare-grid>div>p,.help-remote {
    max-width:none
  }

  .help-links {
    padding:36px 0
  }

  .help-links-heading h2 {
    font-size:25px
  }

  .help-shortcuts button {
    padding:20px
  }

  .help-contact-heading {
    flex-direction:column;
    gap:10px
  }

  .help-contact-grid {
    gap:26px
  }

  .help-main .help-sales {
    padding-top:26px
  }

}

/* Resource search: one input border, aligned icon */

.res-page .res-search {
  padding:0;
  border:0;
  background:none;
  max-width:none;
  width:100%;
  margin-bottom:24px
}

.res-page .res-search input {
  display:block;
  box-sizing:border-box;
  width:100%;
  height:48px;
  padding:12px 16px 12px 44px;
  border:1px solid #d5d5d5;
  border-radius:3px;
  background:#fff;
  color:#333;
  font:14px var(--font);
  box-shadow:none;
  outline:none
}

.res-page .res-search input:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 2px rgba(26,126,226,.08)
}

.res-page .res-search input::placeholder {
  color:#999;
  opacity:1
}

.res-page .res-search svg {
  left:16px;
  top:24px;
  width:17px;
  height:17px;
  color:#888;
  pointer-events:none
}

.res-page .res-search:focus-within svg {
  color:var(--primary)
}

/* Ecosystem headings without numbered labels */

.ecosystem-work-label>svg {
  top:2px
}

.ecosystem-group-list summary {
  grid-template-columns:minmax(0,1fr) 20px
}

.ecosystem-product-tags {
  padding-left:0
}

.ecosystem-advice li {
  grid-template-columns:minmax(0,1fr)
}

/* Overview without numbered labels */

.overview-foundation-list article {
  grid-template-columns:minmax(0,1fr) 28px
}

.overview-workflow li {
  grid-template-columns:minmax(0,1fr)
}

/* Compact ecosystem tool directory */

.ecosystem-workflows {
  padding:46px 0 50px
}

.ecosystem-section-heading {
  gap:40px;
  margin-bottom:26px
}

.ecosystem-work-row {
  grid-template-columns:260px minmax(0,1fr);
  gap:32px;
  padding:24px 0
}

.ecosystem-work-label {
  padding-left:34px
}

.ecosystem-work-label>svg {
  width:22px;
  height:22px
}

.ecosystem-work-label h3 {
  font-size:20px;
  margin-bottom:9px
}

.ecosystem-work-label p {
  font-size:13px;
  line-height:1.7;
  max-width:220px
}

.ecosystem-tool-list {
  gap:10px
}

.ecosystem-tool-list article {
  padding:17px 18px;
  grid-template-columns:28px minmax(0,1fr);
  gap:12px;
  align-items:start
}

.ecosystem-tool-icon {
  width:28px;
  height:28px
}

.ecosystem-tool-icon svg {
  width:17px;
  height:17px
}

.ecosystem-tool-list h4 {
  font-size:15px;
  line-height:1.4;
  margin-bottom:5px
}

.ecosystem-tool-list p {
  font-size:12px;
  line-height:1.65
}

@media(max-width:1000px) {
  .ecosystem-work-row {
    grid-template-columns:210px minmax(0,1fr);
    gap:24px
  }

  .ecosystem-tool-list article {
    padding:15px
  }

}

@media(max-width:700px) {
  .ecosystem-workflows {
    padding:34px 0 38px
  }

  .ecosystem-work-row {
    grid-template-columns:1fr;
    gap:18px;
    padding:22px 0
  }

  .ecosystem-work-label p {
    max-width:none
  }

  .ecosystem-tool-list article {
    grid-template-columns:24px minmax(0,1fr);
    padding:14px 12px;
    gap:9px
  }

  .ecosystem-tool-icon {
    width:24px;
    height:24px
  }

  .ecosystem-tool-list h4 {
    font-size:14px
  }

  .ecosystem-section-heading {
    gap:18px
  }

}

@media(max-width:420px) {
  .ecosystem-tool-list {
    grid-template-columns:1fr
  }

}

/* Quote and account dialogs */

#modal-quote,#modal-login {
  padding:24px;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(4px);
  overflow-y:auto
}

.modal.account-dialog {
  position:relative;
  width:100%;
  max-width:560px;
  background:#fff;
  border:1px solid #ddd;
  border-top:3px solid var(--primary);
  border-radius:10px;
  box-shadow:0 24px 80px #0004;
  color:#222;
  max-height:calc(100dvh - 48px);
  overflow-y:auto
}

.modal.login-dialog {
  max-width:430px
}

.account-dialog .modal-close {
  position:absolute;
  right:16px;
  top:14px;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:4px;
  background:#ffffff;
  color:#666;
  font:24px var(--font);
  cursor:pointer;
  z-index:2
}

.account-dialog .modal-close:hover {
  background:#eee;
  color:#222
}

.account-dialog-heading {
  padding:32px 32px 24px;
  border-bottom:1px solid #eee
}

.account-dialog-heading>span {
  display:block;
  font:600 10px var(--font);
  letter-spacing:.07em;
  color:var(--primary);
  margin-bottom:18px;
  padding-right:30px
}

.account-dialog-heading h2 {
  font:600 28px/1.25 var(--font);
  letter-spacing:-.025em;
  margin:0 0 12px;
  color:#222;
  text-transform:none
}

.account-dialog-heading p {
  font:14px/1.7 var(--font);
  color:#888;
  margin:0
}

.account-dialog-form {
  padding:26px 32px 28px
}

.account-dialog .field {
  margin-bottom:20px;
  min-width:0
}

.account-dialog .field label {
  display:block;
  font:500 13px var(--font);
  color:#444;
  margin-bottom:9px;
  text-transform:none;
  letter-spacing:0
}

.account-dialog label span {
  color:var(--primary)
}

.account-dialog .field input,.account-dialog .field select {
  box-sizing:border-box;
  width:100%;
  height:46px;
  padding:11px 13px;
  background:#fff;
  border:1px solid #d5d5d5;
  border-radius:4px;
  color:#222;
  font:14px var(--font);
  outline:none;
  box-shadow:none
}

.account-dialog .field input::placeholder {
  color:#aaa
}

.account-dialog .field input:focus,.account-dialog .field select:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 2px var(--primary)12
}

.account-field-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px
}

.account-dialog-form>.btn {
  font:600 14px var(--font);
  text-transform:none;
  letter-spacing:0;
  border-radius:4px;
  height:46px;
  box-shadow:none;
  display:flex;
  justify-content:center;
  gap:14px
}

.account-dialog-foot {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 12px;
  padding-top:22px;
  margin-top:22px;
  border-top:1px solid #eee;
  font:12px var(--font);
  color:#999
}

.account-dialog-foot a {
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:#333;
  font-weight:600;
  text-decoration:none
}

.account-dialog-foot svg {
  width:14px;
  height:14px
}

.account-dialog-brand {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:24px;
  padding-right:30px
}

.account-dialog-brand img {
  width:32px;
  height:32px;
  object-fit:contain
}

.account-dialog-brand span {
  font:600 12px var(--font);
  color:#555
}

.account-password {
  position:relative
}

.account-dialog .account-password input {
  padding-right:48px
}

.account-password button {
  position:absolute;
  right:5px;
  top:5px;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  background:none;
  border:0;
  color:#888;
  cursor:pointer
}

.account-password svg {
  width:19px;
  height:19px;
  stroke-width:1.5
}

.account-form-status {
  font:13px/1.7 var(--font);
  color:#666;
  background:#ffffff;
  padding:12px 14px;
  margin:16px 0 0;
  border-left:2px solid var(--primary)
}

.account-dialog button:focus-visible,.account-dialog a:focus-visible {
  outline:2px solid var(--primary);
  outline-offset:3px
}

@media(max-width:600px) {
  #modal-quote,#modal-login {
    padding:14px
  }

  .modal.account-dialog {
    max-height:calc(100dvh - 28px)
  }

  .account-dialog-heading {
    padding:28px 24px 20px
  }

  .account-dialog-form {
    padding:22px 24px
  }

  .account-dialog-heading h2 {
    font-size:25px
  }

  .account-field-row {
    grid-template-columns:1fr;
    gap:0
  }

}

/* Shared entrances and interactive feedback */

.has-scroll-reveal [data-reveal-ready] {
  transition:opacity 520ms ease,transform 620ms cubic-bezier(.2,.7,.25,1);
  transition-delay:var(--reveal-delay,0ms)
}

@media(hover:hover) and (pointer:fine) {
  .btn {
    transition:background-color .2s,border-color .2s,box-shadow .2s,translate .2s
  }

  .btn:hover {
    translate:0 -2px;
    box-shadow:0 6px 16px #00000012
  }

  .btn:active {
    translate:0 0
  }

  .btn svg,.home-value-link svg,.overview-link svg,.ecosystem-text-link svg,.license-link svg,.eh-text-link svg {
    transition:translate .2s
  }

  .btn:hover svg,.home-value-link:hover svg,.overview-link:hover svg,.ecosystem-text-link:hover svg,.license-link:hover svg,.eh-text-link:hover svg {
    translate:3px 0
  }

  .home-example,.license-plan,.ecosystem-tool-list article,.help-shortcuts button {
    transition:translate .25s,box-shadow .25s,border-color .25s
  }

  .home-example:hover,.license-plan:hover,.ecosystem-tool-list article:hover,.help-shortcuts button:hover {
    translate:0 -3px;
    box-shadow:0 8px 22px #0000000a
  }

  .home-example figure,.overview-hero-media,.overview-workflow figure {
    overflow:hidden
  }

  .home-example img,.overview-workflow img {
    transition:scale .6s cubic-bezier(.2,.7,.25,1)
  }

  .home-example:hover img,.overview-workflow figure:hover img {
    scale:1.025
  }

  .home-network-logo {
    transition:background .2s,box-shadow .2s
  }

  .home-network-logo:hover {
    background:#fff;
    box-shadow:0 3px 12px #0000000a
  }

  .home-network-logo img {
    transition:scale .25s,opacity .25s
  }

  .home-network-logo:hover img {
    scale:1.05;
    opacity:1
  }

  .compare-group tr {
    transition:background .2s
  }

  .compare-group tr:hover th {
    background:#ffffff
  }

  .compare-group tr:hover td {
    background:#ffffff
  }

  .compare-group tr:hover .compare-anfa-cell {
    background:#ffffff
  }

  .fp-cat-btn,.res-nav-item,.home-tools-tabs .tab-btn {
    transition:background .2s,color .2s,border-color .2s
  }

  .fp-cat-btn:hover .fp-nav-arrow,.res-nav-item:hover .res-nav-arrow {
    translate:2px 0
  }

  .help-contact-grid a:hover strong,.account-dialog-foot a:hover {
    color:var(--primary)
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto!important
  }

  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }

  .has-scroll-reveal [data-reveal-ready] {
    opacity:1!important;
    transform:none!important
  }

  .btn:hover,.home-example:hover,.license-plan:hover,.ecosystem-tool-list article:hover,.help-shortcuts button:hover {
    translate:none
  }

}

/* Home workflow images with lower-left captions */

.home-example figure {
  position:relative;
  aspect-ratio:auto;
  min-height:370px;
  margin:0;
  background:#222
}

.home-example figure>img {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover
}

.home-example-overlay {
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:370px;
  box-sizing:border-box;
  padding:125px 24px 26px;
  background:linear-gradient(180deg,transparent 15%,rgba(0,0,0,.2) 40%,rgba(0,0,0,.86) 100%);
  color:#fff
}

.home-example-overlay .home-example-category {
  color:#ddd;
  font-size:11px;
  margin-bottom:10px
}

.home-example-overlay h3 {
  color:#fff;
  font-size:23px;
  line-height:1.3;
  margin:0 0 12px;
  font-weight:600
}

.home-example-overlay p {
  color:#e0e0e0;
  font-size:13px;
  line-height:1.75;
  margin:0;
  max-width:340px;
  text-wrap:pretty
}

@media(max-width:1000px) {
  .home-example-overlay {
    padding:110px 20px 22px;
    min-height:350px
  }

  .home-example figure {
    min-height:350px
  }

  .home-example-overlay h3 {
    font-size:21px
  }

}

@media(max-width:700px) {
  .home-example figure,.home-example-overlay {
    min-height:320px
  }

  .home-example-overlay {
    padding:110px 24px 24px
  }

  .home-example-overlay p {
    max-width:460px
  }

}

/* Trial callout: animated technical background */

.home-start {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#191919
}

.home-start>.container {
  position:relative;
  z-index:2
}

.home-start::before {
  content:"";
  position:absolute;
  inset:-48px;
  z-index:0;
  pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(90deg,transparent 15%,#000 100%);
  animation:trial-grid-drift 24s linear infinite
}

.home-start::after {
  content:"";
  position:absolute;
  width:510px;
  height:510px;
  right:-100px;
  top:50%;
  z-index:1;
  pointer-events:none;
  border:1px solid rgba(26,126,226,.24);
  background:repeating-linear-gradient(135deg,transparent 0 65px,rgba(26,126,226,.09) 65px 66px,transparent 66px 130px);
  box-shadow:0 0 0 65px rgba(26,126,226,.025),0 0 0 130px rgba(26,126,226,.018);
  transform:translateY(-50%) rotate(-18deg);
  animation:trial-lines-breathe 10s ease-in-out infinite alternate
}

@keyframes trial-grid-drift {
  from {
    translate:0 0
  }

  to {
    translate:48px 48px
  }

}

@keyframes trial-lines-breathe {
  from {
    transform:translateY(-50%) rotate(-18deg);
    opacity:.45
  }

  to {
    transform:translateY(-50%) rotate(-12deg);
    opacity:.85
  }

}

@media(max-width:700px) {
  .home-start::after {
    right:-260px;
    opacity:.4
  }

  .home-start::before {
    mask-image:linear-gradient(90deg,transparent,#000);
    background-size:48px 48px
  }

}

@media(prefers-reduced-motion:reduce) {
  .home-start::before,.home-start::after {
    animation:none!important
  }

}

/* Unified homepage tool categories */

.home-tool-overview .home-example-overlay {
  min-height:400px;
  padding-top:140px
}

.home-tool-overview .home-example figure {
  min-height:400px
}

.home-tool-overview .home-example-category {
  line-height:1.6;
  font-size:11px;
  color:#eee;
  letter-spacing:0
}

.home-tool-image-link {
  display:inline-flex;
  align-items:center;
  gap:10px;
  align-self:flex-start;
  background:none;
  border:0;
  border-bottom:1px solid #ffffff66;
  padding:6px 0;
  color:#fff;
  font:600 12px var(--font);
  margin-top:16px;
  cursor:pointer
}

.home-tool-image-link svg {
  width:16px;
  height:16px;
  transition:translate .2s
}

.home-tool-image-link:hover svg {
  translate:3px -2px
}

.home-tool-image-link:focus-visible {
  outline:2px solid #fff;
  outline-offset:4px
}

@media(max-width:700px) {
  .home-tool-overview .home-example-overlay,.home-tool-overview .home-example figure {
    min-height:340px
  }

}

/* Header navigation: red text and underline only */

.navbar .nav-links button.nav-link:hover, .navbar .nav-links button.nav-link.active, .navbar .nav-links a.nav-link:hover, .navbar .nav-links a.nav-link.active {
  color:var(--primary);
  background:transparent;
  box-shadow:none
}

.navbar .nav-links .nav-link::after {
  content:'';
  position:absolute;
  left:10px;
  right:10px;
  bottom:0;
  height:2px;
  background:var(--primary);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .2s
}

.navbar .nav-links .nav-link:hover::after, .navbar .nav-links .nav-link.active::after {
  transform:scaleX(1)
}

/* Home opening: typography over the original architectural background */

.hero.hero-editorial {
  padding:82px 0 66px;
  min-height:560px;
  display:flex;
  align-items:center;
  position:relative
}

.hero-editorial .hero-grid {
  display:block;
  width:100%
}

.hero-editorial .hero-product-copy {
  max-width:760px;
  position:relative;
  z-index:1
}

.hero-editorial .hero-product-label {
  font-size:12px;
  font-weight:500;
  letter-spacing:.025em;
  margin-bottom:30px
}

.hero-editorial h1 {
  font-size:clamp(52px,5.6vw,82px);
  letter-spacing:-.055em;
  line-height:1.05;
  margin-bottom:28px
}

.hero-editorial .hero-product-tagline {
  font-size:clamp(23px,2.2vw,30px);
  font-weight:500;
  max-width:560px;
  line-height:1.35;
  margin-bottom:22px;
  text-wrap:balance
}

.hero-editorial .hero-product-lead {
  max-width:510px;
  font-size:16px;
  line-height:1.85;
  color:#555;
  margin-bottom:32px
}

.hero-editorial .hero-product-actions {
  gap:28px
}

.hero-editorial-note {
  margin-top:40px;
  padding-top:20px;
  border-top:1px solid #22222220;
  max-width:510px
}

.hero-editorial-note>span {
  display:block;
  font-size:9px;
  font-weight:600;
  letter-spacing:.1em;
  color:#888;
  margin-bottom:8px
}

.hero-editorial-note p {
  font-size:12px;
  color:#666;
  margin:0;
  line-height:1.6
}

.hero-editorial-note p span {
  padding:0 10px;
  color:#aaa
}

@media(max-width:1023px) {
  .hero.hero-editorial {
    padding:58px 0;
    min-height:500px
  }

  .hero-editorial h1 {
    font-size:clamp(48px,7vw,72px)
  }

  .hero-editorial .hero-product-copy {
    max-width:660px
  }

}

@media(max-width:600px) {
  .hero.hero-editorial {
    padding:40px 0;
    min-height:0
  }

  .hero-editorial h1 {
    font-size:clamp(32px,8.4vw,48px);
    margin-bottom:22px
  }

  .hero-editorial .hero-product-label {
    margin-bottom:24px
  }

  .hero-editorial .hero-product-tagline {
    font-size:23px;
    max-width:360px
  }

  .hero-editorial .hero-product-lead {
    font-size:15px;
    max-width:360px
  }

  .hero-editorial-note {
    margin-top:28px
  }

  .hero-editorial .hero-product-actions {
    gap:20px
  }

}

/* Compact header spacing */

.navbar-inner {
  min-height:68px
}

.navbar .nav-link {
  padding-top:18px;
  padding-bottom:18px
}

@media(max-width:1279px) {
  .navbar-inner {
    min-height:64px
  }

}

@media(max-width:600px) {
  .navbar-inner {
    min-height:60px
  }

}

/* Trial banner: architectural depth and slow ambient light */

.home-start {
  background:#171717;
  border-bottom:2px solid var(--primary)
}

.home-start::before {
  inset:-90px -50px -150px 35%;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(90deg,transparent,#000 45%,#000);
  transform:perspective(650px) rotateX(28deg) rotateZ(-9deg);
  transform-origin:center;
  opacity:.6;
  animation:trial-depth-flow 30s linear infinite;
  translate:none
}

.home-start::after {
  inset:-60% -15% -60% 40%;
  width:auto;
  height:auto;
  border:0;
  box-shadow:none;
  background:radial-gradient(ellipse at 62% 50%,rgba(26,126,226,.16),transparent 48%),radial-gradient(ellipse at 80% 65%,rgba(255,255,255,.045),transparent 38%);
  transform:none;
  opacity:1;
  animation:trial-ambient-flow 16s ease-in-out infinite alternate
}

.home-start-actions .btn-red {
  position:relative;
  overflow:hidden
}

.home-start-actions .btn-red::after {
  content:'';
  position:absolute;
  inset:-50% auto -50% -80%;
  width:45%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);
  transform:skewX(-20deg);
  pointer-events:none;
  animation:trial-button-light 9s ease-in-out infinite
}

@keyframes trial-depth-flow {
  from {
    background-position:0 0
  }

  to {
    background-position:56px 56px
  }

}

@keyframes trial-ambient-flow {
  from {
    translate:-20px -8px;
    opacity:.65
  }

  to {
    translate:35px 15px;
    opacity:1
  }

}

@keyframes trial-button-light {
  0%,65% {
    left:-80%
  }

  85%,100% {
    left:150%
  }

}

@media(max-width:700px) {
  .home-start::before {
    inset:-60px -100px -80px 10%;
    opacity:.3
  }

  .home-start::after {
    inset:-20% -50% -20% 0;
    opacity:.6
  }

}

@media(prefers-reduced-motion:reduce) {
  .home-start::before,.home-start::after,.home-start-actions .btn-red::after {
    animation:none!important
  }

  .home-start-actions .btn-red::after {
    display:none
  }

}

/* Full-width background for featured tools and installer */

.feat-install {
  background-image:url('../assets/images/backgroud_down.png');
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat
}

/* FAQ: smoothly expand actual content height */

.faq-item .faq-a,.faq-item.open .faq-a,.home-answer-list .faq-item.open .faq-a {
  display:grid;
  grid-template-rows:0fr;
  padding:0;
  opacity:0;
  visibility:hidden;
  transition:grid-template-rows .38s cubic-bezier(.22,.7,.25,1),opacity .25s ease,visibility .38s
}

.faq-item.open .faq-a {
  grid-template-rows:1fr;
  opacity:1;
  visibility:visible
}

.faq-answer-inner {
  min-height:0;
  overflow:hidden
}

.faq-answer-copy {
  padding:0 20px 20px
}

.home-answer-list .faq-answer-copy {
  padding:0 30px 24px 0
}

.home-answer-list .faq-q svg {
  transition:transform .35s cubic-bezier(.22,.7,.25,1),color .2s
}

@media(prefers-reduced-motion:reduce) {
  .faq-item .faq-a,.home-answer-list .faq-q svg {
    transition:none
  }

}

/* Hero subtitle: clear Vietnamese diacritics */

.hero.hero-product .hero-product-tagline {
  font-family:"Segoe UI",Arial,sans-serif;
  font-weight:500;
  letter-spacing:0;
  line-height:1.5;
  padding-top:2px;
  overflow:visible
}

/* Keep the open FAQ state above homepage-specific styles. */

.home-answer-list .faq-item.open .faq-a, .home-faq-item.open .faq-a {
  display:grid;
  grid-template-rows:1fr;
  padding:0;
  opacity:1;
  visibility:visible
}

.home-answer-list .faq-item:not(.open) .faq-a, .home-faq-item:not(.open) .faq-a {
  display:grid;
  grid-template-rows:0fr;
  padding:0;
  opacity:0;
  visibility:hidden
}

/* Keep the hero tagline on one line. */

.hero.hero-product .hero-product-tagline {
  max-width:none;
  white-space:nowrap;
  text-wrap:nowrap;
  font-size:clamp(20px,2.2vw,30px)
}

@media(max-width:700px) {
  .hero.hero-product .hero-product-tagline {
    font-size:clamp(11px,3.25vw,22px);
    letter-spacing:-.015em)}} .hero.hero-editorial .hero-product-lead{max-width:600px;text-wrap:wrap} @media(max-width:700px){.hero-lead-break{display:none}}
    /* Event announcement: compact editorial panel */

    .event-badge{border-radius:7px;border-left:3px solid var(--primary);padding:12px 15px;gap:12px;box-shadow:0 6px 24px #00000012} .event-badge .label{font:500 10px var(--font);letter-spacing:.03em;color:#888} .event-badge .title{font:600 13px var(--font);color:#333;margin-top:4px} .event-popup{width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow-y:auto;border-radius:8px;border:1px solid #ddd;box-shadow:0 18px 60px #0003;background:#fff} .event-popup-media{position:relative;background:#181818} .event-popup-media img{display:block;width:100%;height:auto;object-fit:contain} .event-popup-close{z-index:3;background:#fff!important;color:#333!important;border:1px solid #ddd!important;border-radius:4px!important;width:30px;height:30px;top:12px;right:12px} .event-popup-status{background:#fff!important;color:#555!important;font:500 10px var(--font);border:1px solid #ddd;box-shadow:none} .event-popup-status-dot{background:#999!important;animation:none!important} .event-popup-body{padding:24px} .event-editorial-kicker{display:block;color:var(--primary);font:600 10px var(--font);letter-spacing:.07em;margin-bottom:12px} .event-popup-body h2{font:600 22px/1.35 var(--font);letter-spacing:-.025em;color:#222;margin:0 0 20px;text-wrap:balance} .event-popup-meta{border-top:1px solid #eee;padding-top:18px;gap:16px} .event-popup-row{gap:12px} .event-popup-icon{background:none!important;border:0;color:#888!important;width:20px;flex-shrink:0} .event-popup-icon svg{width:18px;height:18px;stroke-width:1.5} .event-popup-label{font:400 11px var(--font);color:#999;text-transform:none;letter-spacing:0;margin-bottom:5px} .event-popup-value{font:500 13px/1.65 var(--font);color:#444} .event-popup-cta{display:flex;align-items:center;justify-content:space-between;margin-top:22px;padding:13px 16px;background:var(--primary);color:#fff;border:0;border-radius:3px;box-shadow:none;font:600 13px var(--font);letter-spacing:0;text-transform:none} .event-popup-cta:hover{background:var(--primary-dark)} @media(max-width:600px){.event-popup{right:16px;bottom:16px;max-height:calc(100dvh - 32px)}.event-popup-body{padding:20px}.event-popup-body h2{font-size:20px}.event-badge{right:16px;bottom:16px}}
    /* Compact event preview: let the banner carry the headline */

    .event-popup{width:min(360px,calc(100vw - 32px));border-radius:6px;box-shadow:0 12px 40px #0003} .event-popup-body{padding:18px 20px 16px} .event-popup-body .event-compact-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} .event-popup-meta{border:0;padding:0;display:flex;flex-direction:column;gap:12px} .event-popup-row{display:flex;align-items:flex-start;gap:10px;margin:0;padding:0} .event-popup-icon{margin-top:2px;width:17px;height:20px} .event-popup-icon svg{width:16px;height:16px} .event-popup-label{display:none} .event-popup-value{display:block;font:400 12px/1.65 var(--font);color:#555} .event-popup-cta{margin-top:16px;padding:13px 0 0;border-top:1px solid #eee;border-radius:0;background:transparent;color:#333;font:600 12px var(--font)} .event-popup-cta:hover{background:transparent;color:var(--primary)} .event-popup-cta svg{color:var(--primary)} .event-popup-status{padding:5px 9px;border:0;font-size:9px;left:12px;top:12px} .event-popup-close{width:27px;height:27px;top:10px;right:10px} @media(max-width:600px){.event-popup-body{padding:16px 18px}.event-popup{width:min(360px,calc(100vw - 32px))}}
    /* Icons beside KetcauSoft figures */

    .kcs-story-stats dt{display:flex;align-items:center;gap:8px} .kcs-story-stats dt svg{width:18px;height:18px;stroke-width:1.5;color:var(--primary);flex-shrink:0} @media(max-width:700px){.kcs-story-stats dt{align-items:flex-start;gap:6px}.kcs-story-stats dt svg{width:16px;height:16px;margin-top:2px}} .keep-phrase{white-space:nowrap} .kcs-story-heading>div{min-width:0;width:100%} .kcs-story-heading #kcs-story-title{max-width:760px;text-wrap:balance} @media(max-width:420px){.kcs-story-heading #kcs-story-title{font-size:28px}}
    /* KetcauSoft services between company story and partners */

    .home-services{padding:60px 0;background:#ffffff;border-top:1px solid #eee} .home-services-heading{display:grid;grid-template-columns:1.2fr 1fr;gap:70px;align-items:end;margin-bottom:36px} .home-services-heading h2{font:600 clamp(28px,3vw,38px)/1.25 var(--font);letter-spacing:-.03em;text-wrap:balance;margin:0;color:#222} .home-services-heading>p{font-size:15px;line-height:1.8;color:#777;margin:0;max-width:420px;text-wrap:pretty} .home-services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px} .home-services-grid article{border-top:1px solid #d5d5d5;padding:28px 0 0;display:flex;flex-direction:column;align-items:flex-start} .home-services-grid article>svg{width:30px;height:30px;stroke-width:1.4;color:var(--primary);margin-bottom:22px} .home-services-grid h3{font:600 21px/1.4 var(--font);letter-spacing:-.02em;color:#222;margin:0 0 14px} .home-services-grid p{font-size:14px;line-height:1.85;color:#666;margin:0 0 22px;text-wrap:pretty} .home-services-grid .home-value-link{margin-top:auto;font-size:13px;display:inline-flex;align-items:center;gap:10px} @media(max-width:700px){.home-services{padding:42px 0}.home-services-heading{grid-template-columns:1fr;gap:20px;margin-bottom:28px}.home-services-heading>p{max-width:none}.home-services-grid{grid-template-columns:1fr;gap:28px}.home-services-grid article{padding-top:22px}.home-services-grid article>svg{margin-bottom:16px}}
    /* Contrast for the dark Background1 hero image */

    .hero-editorial .hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,15,24,.75),rgba(7,15,24,.35) 48%,transparent 78%)} .hero.hero-editorial h1,.hero.hero-editorial .hero-product-tagline{color:#fff} .hero.hero-editorial .hero-product-label,.hero.hero-editorial .hero-product-lead{color:#e1e5e9} .hero-editorial .hero-secondary-link{color:#fff;border-color:#ffffff80} .hero-editorial-note{border-color:#ffffff30} .hero-editorial-note>span,.hero-editorial-note p{color:#c7ced5} @media(max-width:600px){.hero-editorial .hero-bg::after{background:rgba(7,15,24,.65)}}
    /* Distinct product wordmark in the header */

    .navbar .logo{gap:4px;text-align:left} .navbar .logo-mark{width:38px;height:38px;object-fit:contain;border-radius:6px} .navbar .logo-text .header-wordmark{display:flex;align-items:center;gap:5px;font:700 20px/1.1 var(--font);letter-spacing:-.04em;color:#222;white-space:nowrap} .header-wordmark em{font-style:normal;color:var(--primary)} .header-wordmark small{font:600 10px/1 var(--font);letter-spacing:.025em;margin-left:4px;padding:4px 6px;border:1px solid #ddd;border-radius:3px;color:#666} .navbar .logo-text .header-brand-caption{font:500 10px/1.2 var(--font);letter-spacing:.035em;color:#888;margin-top:6px} @media(max-width:600px){.navbar .logo{gap:9px}.navbar .logo-mark{width:32px;height:32px}.navbar .logo-text .header-wordmark{font-size:17px;gap:4px}.header-wordmark small{font-size:8px;padding:3px 4px;margin-left:2px}.navbar .logo-text .header-brand-caption{font-size:9px}} @media(max-width:380px){.navbar .logo-text .header-wordmark{font-size:15px}.navbar .logo-text .header-brand-caption{display:none}}

/* Hero feature link hover */
.hero-editorial .hero-secondary-link{transition:color .22s ease,border-color .22s ease}
.hero-editorial .hero-secondary-link svg{transition:transform .22s ease}
@media(hover:hover){
  .hero-editorial .hero-secondary-link:hover{color:#70b5ff;border-color:#70b5ff}
  .hero-editorial .hero-secondary-link:hover svg{transform:translate(3px,-3px)}
}
.hero-editorial .hero-secondary-link:focus-visible{color:#70b5ff;border-color:#70b5ff;outline:2px solid #70b5ff;outline-offset:5px}
@media(prefers-reduced-motion:reduce){.hero-editorial .hero-secondary-link,.hero-editorial .hero-secondary-link svg{transition:none}}

/* Shared support introduction background */
.help-intro-background{background-image:url('../assets/images/Background_support.png');background-size:cover;background-position:center;background-repeat:no-repeat}
.help-intro-background .help-heading,.help-intro-background .help-main{background:transparent}

/* Footer channel icons */
.footer-social{display:flex;align-items:center;gap:10px;margin-top:22px}
.footer-social a{display:grid;place-items:center;width:36px;height:36px;border:1px solid #444;border-radius:4px;color:#ccc;background:transparent;transition:color .2s,border-color .2s,translate .2s}
.footer-social svg{width:18px;height:18px;stroke-width:1.5}
.footer-social a:hover{color:#fff;border-color:var(--primary);translate:0 -2px}
.footer-social a:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.footer-social a{transition:none}.footer-social a:hover{translate:none}}

/* Resources header background */
.res-page .res-hero{background-image:linear-gradient(90deg,rgba(0,0,0,.4),rgba(0,0,0,.08)),url('../assets/images/Background_tainguyen.png');background-size:cover;background-position:center;background-repeat:no-repeat}

/* Compact resource banner and feature header background. */
.res-page .res-hero {
  aspect-ratio: auto;
  min-height: 0;
  padding: 46px 0;
  display: block;
  background-size: cover;
}

.res-page .res-hero > .container {
  width: 100%;
}

#features-root .fp-header {
  background-image: linear-gradient(90deg, rgba(0, 0, 0, .4), rgba(0, 0, 0, .15)), url('../assets/images/Background_tainguyen.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (max-width: 600px) {
  .res-page .res-hero {
    padding: 32px 0;
  }
}

/* Feature header without the separate laptop visual. */
#features-root .fp-hero-layout {
  display: block;
}
#features-root .fp-header-text {
  max-width: 720px;
}

/* Pricing introduction background. */
.license-heading {
  background-image: url('../assets/images/Background_banggia.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Soft gray background for overview section navigation. */
.overview-nav {
  background: #ffffff;
  border-top: 1px solid #e8e8e8;
  border-bottom: 1px solid #ddd;
}

/* Marine blue theme: decorative imagery and interactive highlights. */
.hero-editorial .hero-bg img,
.install-bg {
  filter: grayscale(1);
}
.feat-install {
  position: relative;
  isolation: isolate;
  background-image: none;
}
.feat-install::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url('../assets/images/backgroud_down.png') center / cover no-repeat;
  filter: grayscale(1);
}

/* Restrained marine palette: deep blue actions, quiet surfaces. */
.btn-red {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: none;
}
.btn-red:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}
.hero-editorial .hero-bg::after {
  background: linear-gradient(90deg, rgba(13, 29, 43, .83), rgba(13, 29, 43, .4) 50%, rgba(13, 29, 43, .08));
}
.license-plan-featured {
  background: #172c3e;
  border-color: #172c3e;
  border-top-color: #70b5ff;
}
.fp-cat-btn.active,
.res-page .res-nav-item.active {
  background: #ffffff;
}
.hero-editorial .hero-secondary-link:hover,
.hero-editorial .hero-secondary-link:focus-visible {
  color: #a2c5df;
  border-color: #a2c5df;
}
.hero.hero-editorial h1 .accent {
  color: #80b1d5;
}
.install-bg {
  opacity: .9;
}

/* Deep marine accents for a technical product identity. */
.header-wordmark em,
.navbar .nav-links button.nav-link.active,
.navbar .nav-links button.nav-link:hover {
  color: var(--primary);
}
.hero.hero-editorial h1 .accent {
  color: #438bc3;
}
.license-plan-featured {
  background: #10263b;
  border-color: #10263b;
  border-top-color: #226ba3;
}

/* Fresh blue accents with strong contrast. */
.hero.hero-editorial h1 .accent {
  color: #3295ff;
}
.hero-editorial .hero-secondary-link:hover,
.hero-editorial .hero-secondary-link:focus-visible {
  color: #70b5ff;
  border-color: #70b5ff;
}
.license-plan-featured {
  border-top-color: var(--primary);
}

/* Neutral text hierarchy; reserve blue for actions and icons. */
.feat-install .highlight-intro h2,
.feat-install .highlight-list h3,
.feat-install .install-body h3,
.home-value .home-value-intro h2,
.home-value .home-value-row h3 {
  color: #202936;
}
.feat-install .install-specs strong,
.feat-install .install-specs strong.accent {
  color: #344050;
}

/* Original homepage background colors, without image filters or tint. */
.hero-editorial .hero-bg img {
  filter: none;
}
.hero-editorial .hero-bg::after {
  background: none;
}

/* Fade a neutral dark overlay from the hero copy toward the image center. */
.hero-editorial .hero-bg::after {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, .78) 0%,
    rgba(0, 0, 0, .64) 25%,
    rgba(0, 0, 0, .32) 46%,
    rgba(0, 0, 0, .06) 60%,
    transparent 72%
  );
}

/* Preserve original installer background colors. */
.install-panel .install-bg {
  filter: none;
  opacity: 1;
}

/* Preserve original featured section background colors. */
.feat-install::before {
  filter: none;
}

/* Product demos on the homepage. */
.home-videos { padding: 64px 0; background: #fff; }
.home-videos-heading { display: grid; grid-template-columns: 1.3fr 1fr; align-items: end; gap: 60px; margin-bottom: 32px; }
.home-videos-heading h2 { font: 600 clamp(28px,3vw,38px)/1.25 var(--font); letter-spacing: -.03em; color: #202936; margin: 0; }
.home-videos-heading p { font-size: 15px; line-height: 1.8; color: #777; margin: 0; max-width: 440px; }
.home-video-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 26px; }
.home-video-preview { display: block; position: relative; width: 100%; aspect-ratio: 16/9; background: #152335; border: 1px solid #ddd; padding: 0; overflow: hidden; cursor: pointer; }
.home-video-preview video { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.home-video-preview::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.18); transition: background .2s; }
.home-video-play { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.95); color: var(--primary); box-shadow: 0 4px 18px #0003; transition: scale .2s,background .2s; }
.home-video-play svg { width: 21px; height: 21px; fill: currentColor; margin-left: 3px; }
.home-video-view { position: absolute; z-index: 1; bottom: 12px; left: 14px; color: #fff; font: 500 11px var(--font); background: #0008; padding: 5px 8px; }
.home-video-preview:hover .home-video-play { scale: 1.07; background: #fff; }
.home-video-preview:hover::after { background: rgba(0,0,0,.06); }
.home-video-preview:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
.home-video-card h3 { font: 600 21px/1.4 var(--font); color: #202936; margin: 20px 0 10px; }
.home-video-card p { color: #777; font-size: 14px; line-height: 1.8; margin: 0; }
.modal.video-dialog { max-width: 1050px; width: 100%; border: 1px solid #444; border-radius: 6px; background: #121820; padding: 0; overflow: hidden; }
.video-dialog header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; gap: 20px; }
.video-dialog h2 { color: #fff; font: 500 17px var(--font); margin: 0; }
.video-dialog .modal-close { position: static; background: #ffffff15; color: #fff; border: 0; width: 32px; height: 32px; }
.video-dialog video { display: block; width: 100%; max-height: calc(100dvh - 140px); background: #000; }
@media(max-width:700px) { .home-videos { padding: 42px 0; } .home-videos-heading { grid-template-columns: 1fr; gap: 18px; } .home-video-grid { grid-template-columns: 1fr; gap: 30px; } .home-video-card h3 { margin-top: 16px; } }

/* Feature demonstrations: one story per capability. */
.product-demo { padding: 68px 0; background: #fff; }
.product-demo-layout { display: grid; grid-template-columns: .9fr 1.4fr; gap: 64px; align-items: center; }
.product-demo-copy { min-width: 0; }
.product-demo-kicker { display: block; font: 600 11px var(--font); letter-spacing: .07em; color: var(--primary); margin-bottom: 22px; }
.product-demo h2 { font: 600 clamp(30px,3.2vw,43px)/1.2 var(--font); letter-spacing: -.035em; text-wrap: balance; color: #202936; margin: 0 0 22px; }
.product-demo-copy>p { font-size: 15px; line-height: 1.85; color: #6b7480; margin: 0 0 24px; text-wrap: pretty; }
.product-demo-note { display: flex; align-items: center; gap: 10px; font: 500 12px var(--font); color: #667585; margin-bottom: 28px; }
.product-demo-note svg { width: 19px; height: 19px; color: var(--primary); stroke-width: 1.5; }
.product-demo-action { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; border-bottom: 1px solid #b7c5d2; padding: 10px 0; color: var(--primary); font: 600 14px var(--font); text-align: left; cursor: pointer; }
.product-demo-action svg { width: 19px; height: 19px; }
.product-demo-action svg:last-child { width: 16px; height: 16px; margin-left: 8px; transition: translate .2s; }
.product-demo-action:hover svg:last-child { translate: 3px -3px; }
.product-demo-media { border-radius: 0; border-color: #dce3eb; box-shadow: 0 14px 34px #10243b12; }
.product-demo-caption { display: flex; position: absolute; z-index: 1; bottom: 0; left: 0; right: 0; align-items: center; justify-content: space-between; padding: 32px 18px 14px; background: linear-gradient(transparent,#000b); color: #fff; font: 500 12px var(--font); }
.product-demo-caption svg { width: 16px; height: 16px; }
.product-demo-ipc { background: #ffffff; border-top: 1px solid #e2e8ef; }
.product-demo-ipc .product-demo-layout { grid-template-columns: 1.4fr .9fr; }
.product-demo-ipc .product-demo-media { grid-column: 1; grid-row: 1; }
.product-demo-ipc .product-demo-copy { grid-column: 2; grid-row: 1; }
.product-demo-ai { position: relative; overflow: hidden; isolation: isolate; background: #102337; }
.product-demo-ai::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 85% 30%,rgba(0,110,220,.18),transparent 60%); }
.product-demo-ai h2 { color: #fff; }
.product-demo-ai .product-demo-copy>p { color: #b4c2d0; }
.product-demo-ai .product-demo-kicker,.product-demo-ai .product-demo-action { color: #78b9ff; }
.product-demo-ai .product-demo-note { color: #a6bcd0; }
.product-demo-ai .product-demo-note svg { color: #78b9ff; }
.product-demo-ai .product-demo-media { border-color: #385169; box-shadow: 0 18px 40px #0003; }
.product-demo-action:focus-visible { outline: 2px solid var(--primary); outline-offset: 5px; }
@media(max-width:1000px) { .product-demo-layout { gap: 36px; grid-template-columns: 1fr 1.2fr; } .product-demo-ipc .product-demo-layout { grid-template-columns: 1.2fr 1fr; } .product-demo { padding: 50px 0; } }
@media(max-width:700px) { .product-demo { padding: 40px 0; } .product-demo-layout,.product-demo-ipc .product-demo-layout { grid-template-columns: 1fr; gap: 28px; } .product-demo-ipc .product-demo-copy,.product-demo-ipc .product-demo-media { grid-column: auto; grid-row: auto; } .product-demo-kicker { margin-bottom: 18px; } .product-demo h2 { font-size: 32px; } .product-demo-note { margin-bottom: 16px; } }

/* Smooth media dialogs: animate opacity and transform, retain layout while closing. */
.modal-backdrop,
.modal-backdrop.open,
.lightbox,
.lightbox.open {
  display: flex;
}
.modal-backdrop,
.lightbox {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s ease, visibility 0s linear .32s;
}
.modal-backdrop.open,
.lightbox.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .28s ease, visibility 0s;
}
.modal-backdrop > .modal,
.lightbox > img {
  transform: translateY(12px) scale(.98);
  transition: transform .32s cubic-bezier(.22,.7,.25,1);
}
.modal-backdrop.open > .modal,
.lightbox.open > img {
  transform: translateY(0) scale(1);
}
.video-dialog video {
  aspect-ratio: 16 / 9;
  object-fit: contain;
}
@media (prefers-reduced-motion: reduce) {
  .modal-backdrop,.lightbox,.modal-backdrop > .modal,.lightbox > img {
    transition: none;
    transform: none;
  }
}

/* Render the featured background directly without stacking or color filters. */
.feat-install {
  background-image: url('../assets/images/backgroud_down.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.feat-install::before {
  content: none;
}

/* Reveal video play controls only on hover or keyboard focus. */
.product-demo-media .home-video-play {
  opacity: 0;
  scale: .92;
  pointer-events: none;
  transition: opacity .22s ease, scale .22s ease;
}
.product-demo-media:hover .home-video-play,
.product-demo-media:focus-visible .home-video-play {
  opacity: 1;
  scale: 1;
}

/* Resources: neutral reading hierarchy with focused blue accents. */
.res-page .res-body h2,
.res-page .res-body h3,
.res-page .res-guide summary strong,
.res-page .res-nav-text strong {
  color: #202936;
}
.res-page .res-nav-item.active .res-nav-text strong {
  color: var(--primary);
}
.res-page .res-body .res-section-label {
  color: #78828e;
}
.res-page .res-resource {
  gap: 0;
}
.res-page .res-resource p {
  max-width: 720px;
}
.res-page .res-nav-item:not(.active) > svg {
  color: #78828e;
}

/* Extension page: independent layout, clear product capabilities. */
.extension-page{color:#202936;background:#fff}
.extension-page h1,.extension-page h2,.extension-page h3{font-family:var(--font);letter-spacing:-.025em;text-wrap:balance;word-break:normal}
.extension-page p{font-size:15px;line-height:1.85;color:#6b7480;text-wrap:pretty}
.extension-kicker{display:block;font-size:11px;font-weight:600;letter-spacing:.07em;color:var(--primary);margin-bottom:20px}
.extension-hero{padding:52px 0;background:#ffffff;border-bottom:1px solid #e0e7ee}
.extension-hero h1{font-size:clamp(34px,3.8vw,50px);line-height:1.17;font-weight:600;margin:0 0 24px}
.extension-hero p{max-width:680px;margin:0 0 24px}
.extension-link{display:inline-flex;align-items:center;gap:12px;background:none;border:0;border-bottom:1px solid #bdc8d4;color:#273747;font:600 13px var(--font);padding:7px 0;cursor:pointer;text-decoration:none}
.extension-link svg{width:17px;height:17px;flex-shrink:0}
.extension-link:hover{color:var(--primary)}
.extension-options{padding:56px 0;scroll-margin-top:100px}
.extension-heading{display:flex;justify-content:space-between;align-items:baseline;gap:40px;margin-bottom:30px}
.extension-heading h2{font-size:28px;margin:0;font-weight:600}
.extension-heading p{font-size:14px;max-width:430px;margin:0}
.extension-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.extension-grid article{display:flex;flex-direction:column;align-items:flex-start;padding:28px;border:1px solid #dfe5eb;background:#fff;min-width:0}
.extension-grid article>svg{width:28px;height:28px;color:var(--primary);stroke-width:1.5;margin-bottom:24px}
.extension-grid article>span{color:#8391a0;font-size:11px;margin-bottom:12px}
.extension-grid h3{font-size:23px;line-height:1.3;margin:0 0 16px;font-weight:600}
.extension-grid p{font-size:14px;margin:0 0 24px}
.extension-use{border-top:1px solid #e7ebef;padding-top:18px;margin-top:auto;font-size:12px;color:#7b8794;line-height:1.7;width:100%}
.extension-demo{padding:54px 0;background:#12283e;color:#fff}
.extension-demo-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:64px;align-items:center}
.extension-demo h2{font-size:34px;line-height:1.2;margin:0 0 22px;font-weight:600}
.extension-demo p{color:#b8c6d4;margin-bottom:26px}
.extension-demo .extension-kicker{color:#75b5f5}
.extension-demo .extension-link{color:#fff;border-color:#657a8e}
.extension-more{padding:44px 0;scroll-margin-top:100px}
.extension-more article{display:flex;align-items:center;gap:24px;padding:26px;background:#ffffff;border:1px solid #e0e6ed}
.extension-more article>svg{width:30px;height:30px;color:var(--primary);flex-shrink:0}
.extension-more h2{font-size:23px;font-weight:600;margin:0 0 10px}
.extension-more p{font-size:14px;margin:0}
.extension-more article>.extension-link{margin-left:auto;white-space:nowrap}
.extension-help{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:28px}
.extension-page button:focus-visible,.extension-page a:focus-visible{outline:2px solid var(--primary);outline-offset:4px}
@media(max-width:900px){.extension-grid{gap:16px}.extension-grid article{padding:22px}.extension-demo-grid{gap:32px}}
@media(max-width:700px){.extension-hero{padding:36px 0}.extension-options,.extension-demo{padding:40px 0}.extension-heading{display:block}.extension-heading p{margin-top:14px;max-width:none}.extension-grid,.extension-demo-grid{grid-template-columns:1fr;gap:24px}.extension-more article{flex-wrap:wrap;padding:22px}.extension-more article>div{flex:1;min-width:200px}.extension-more article>.extension-link{margin-left:0}.extension-help{align-items:flex-start;flex-direction:column}.extension-demo h2{font-size:30px}}

/* Local language selector and English text rhythm. */
.language-switch { display: inline-flex; align-items: center; gap: 7px; margin-right: 12px; }
.language-switch>span { color: #64748b; font-size: 10px; }
.topbar .language-switch button { padding: 3px 2px; color: #9da9b6; font: 600 11px var(--font); background: none; border: 0; cursor: pointer; }
.topbar .language-switch button.active { color: #fff; }
.topbar .language-switch button:hover { color: #7ab8ff; }
.topbar .language-switch button:focus-visible { outline: 2px solid #7ab8ff; outline-offset: 3px; }
html[lang="en"] .hero.hero-product .hero-product-tagline { white-space: normal; text-wrap: balance; max-width: 700px; }
html[lang="en"] .navbar .nav-link { padding-left: 8px; padding-right: 8px; font-size: 13px; }
html[lang="en"] .keep-phrase { white-space: normal; }
@media(max-width:600px) { .language-switch { margin-right: 2px; } html[lang="en"] .hero.hero-product .hero-product-tagline { font-size: 22px; } }

/* Featured section uses a clean white background. */
.feat-install {
  background-image: none;
  background-color: #fff;
}
.feat-install::before {
  content: none;
}

/* ========================================================================== 
   Shared typography: pages, sections, cards and readable color hierarchy.
   Product wordmarks, prices and numeric statistics retain their own scale.
   ========================================================================== */
:root {
  --type-page: clamp(34px, 3.4vw, 44px);
  --type-section: clamp(28px, 2.8vw, 36px);
  --type-card: 20px;
  --type-compact: 22px;
  --text-heading: #202936;
  --text-body: #5f6b78;
  --text-label: #708090;
}
.view {
  --heading-color: var(--text-heading);
  --body-color: var(--text-body);
  --label-color: var(--text-label);
}
.view[data-tab] :is(h1, h2, h3, h4) {
  font-family: var(--font);
  font-weight: 600;
  color: var(--heading-color);
  text-transform: none;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  text-wrap: balance;
}
.view[data-tab] h1 {
  font-size: var(--type-page);
  line-height: 1.2;
  letter-spacing: -.03em;
}
.view[data-tab] h2 {
  font-size: var(--type-section);
  line-height: 1.25;
  letter-spacing: -.025em;
}
.view[data-tab] h3 {
  font-size: var(--type-card);
  line-height: 1.4;
  letter-spacing: -.015em;
}
.view[data-tab] h4 {
  font-size: 17px;
  line-height: 1.45;
  letter-spacing: -.01em;
}
.view[data-tab] p {
  color: var(--body-color);
  line-height: 1.8;
  text-wrap: pretty;
}
.view[data-tab] :is(
  .home-value-eyebrow, .product-demo-kicker, .overview-eyebrow,
  .extension-kicker, .compare-kicker, .license-kicker, .help-kicker,
  .res-section-label, .res-kicker, .fp-badge
) {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .07em;
  color: var(--label-color);
}
/* Dark surfaces use the same scale with a light color hierarchy. */
.view :is(
  .hero-editorial, .product-demo-ai, .overview-foundation, .home-start,
  .extension-demo, .compare-footer, .compare-anfa-product,
  .license-plan-featured, .help-technical, .res-hero, .res-learning-feature
) {
  --heading-color: #f7fafc;
  --body-color: #bac7d4;
  --label-color: #88accd;
}
#features-root .fp-header {
  --heading-color: #f7fafc;
  --body-color: #bac7d4;
  --label-color: #88accd;
}
#features-root .fp-header h1 {
  font-size: var(--type-page);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--heading-color);
}
#features-root .fp-detail-body h2 {
  font-size: var(--type-section);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -.025em;
  color: var(--text-heading);
}
#features-root .fp-header-text > p {
  color: var(--body-color);
}
#features-root .fp-detail-summary,
#features-root .fp-feat-item p,
#features-root .fp-feat-tip {
  color: var(--text-body);
}
#features-root .fp-badge,
#features-root .fp-detail-badge {
  font: 600 11px/1.6 var(--font);
  letter-spacing: .07em;
  color: var(--label-color);
}
/* Compact component headings are intentionally subordinate to sections. */
.view[data-tab] :is(
  .install-body h3, .help-main h2, .compare-product-head h2,
  .license-plans-heading h2, .extension-more h2, .fp-cmd-ref h3,
  .help-contact-heading h2, .license-hardware h3,
  .overview-start-info h3, .fp-detail-cta h3
) {
  font-size: var(--type-compact);
  line-height: 1.35;
  letter-spacing: -.02em;
}
.view[data-tab] .license-plan h3 {
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: -.035em;
}
/* Homepage product identity remains the primary visual anchor. */
.view[data-tab] .hero.hero-editorial h1 {
  font-size: clamp(48px, 5.6vw, 87px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -.045em;
}
.view[data-tab] .hero.hero-product .hero-product-tagline {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0;
}
.view[data-tab] .home-example-overlay {
  --heading-color: #fff;
  --body-color: #e0e7ef;
}
.view[data-tab] .home-example-overlay h3 {
  font-size: var(--type-compact);
}
@media (max-width: 700px) {
  :root {
    --type-page: 32px;
    --type-section: 28px;
    --type-card: 19px;
    --type-compact: 21px;
  }
  .view[data-tab] .hero.hero-editorial h1 {
    font-size: clamp(32px, 8.4vw, 48px);
  }
  .view[data-tab] .hero.hero-product .hero-product-tagline {
    font-size: clamp(11px, 3.25vw, 22px);
  }
  html[lang="en"] .view[data-tab] .hero.hero-product .hero-product-tagline {
    font-size: 22px;
  }
  .view[data-tab] .license-plan h3 {
    font-size: 34px;
  }
}

#features-root .fp-feat-head h4 {
  font: 600 17px/1.45 var(--font);
  color: var(--text-heading);
  letter-spacing: -.01em;
}

/* One white surface across light sections and content panels. */
:root {
  --surface-white: #ffffff;
}

/* Actual ANFA CAD screenshots in the overview introduction. */
.overview-product-intro { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: start; }
.overview-product-copy>p { font-size: 15px; margin: 0 0 24px; }
.overview-product-copy ul { padding: 0; margin: 0 0 28px; list-style: none; }
.overview-product-copy li { position: relative; padding-left: 16px; margin-bottom: 17px; font-size: 14px; line-height: 1.8; color: var(--text-body); }
.overview-product-copy li::before { content: ''; position: absolute; left: 0; top: 10px; width: 4px; height: 4px; border-radius: 50%; background: var(--primary); }
.overview-product-copy li strong { color: var(--text-heading); font-weight: 600; display: block; margin-bottom: 3px; }
.overview-product-links { border-top: 1px solid #e1e6eb; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 12px 24px; }
.overview-gallery { min-width: 0; }
.overview-gallery-main { display: block; width: 100%; aspect-ratio: 16/9; position: relative; padding: 0; border: 1px solid #dce3eb; background: #152335; overflow: hidden; cursor: zoom-in; }
.overview-gallery-main>img { display: block; width: 100%; height: 100%; object-fit: contain; }
.overview-gallery-zoom { position: absolute; right: 12px; bottom: 12px; width: 34px; height: 34px; display: grid; place-items: center; color: #fff; background: #0008; border-radius: 3px; opacity: 0; transition: opacity .2s; }
.overview-gallery-zoom svg { width: 17px; height: 17px; }
.overview-gallery-main:hover .overview-gallery-zoom,.overview-gallery-main:focus-visible .overview-gallery-zoom { opacity: 1; }
.overview-gallery-thumbs { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 9px; margin-top: 12px; }
.overview-gallery-thumb { padding: 2px; border: 2px solid transparent; background: #fff; cursor: pointer; min-width: 0; }
.overview-gallery-thumb img { width: 100%; aspect-ratio: 16/10; object-fit: contain; background: #152335; display: block; opacity: .7; transition: opacity .2s; }
.overview-gallery-thumb:hover img,.overview-gallery-thumb.active img { opacity: 1; }
.overview-gallery-thumb.active { border-color: var(--primary); }
.overview-page .overview-gallery-caption { display: flex; justify-content: space-between; gap: 16px; font-size: 12px; margin: 12px 0 0; color: var(--text-label); }
.overview-gallery-main:focus-visible,.overview-gallery-thumb:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
@media(max-width:1000px) { .overview-product-intro { gap: 30px; grid-template-columns: 1fr 1fr; } }
@media(max-width:700px) { .overview-product-intro { grid-template-columns: 1fr; gap: 30px; } .overview-gallery-thumbs { gap: 5px; } .overview-product-copy li { margin-bottom: 14px; } }

/* Borderless IPC TCP demonstration video. */
.extension-demo .product-demo-media {
  border: 0;
}

/* Header product wordmark in black. */
.navbar .logo-text .header-wordmark,
.navbar .logo-text .header-wordmark em,
.navbar .logo-text .header-wordmark small {
  color: #000000;
}

/* Footer: readable brand block and aligned contact columns. */
.site-footer { background: #000; padding: 48px 0 24px; border-top: 2px solid var(--primary); }
.site-footer .footer-main { display: grid; grid-template-columns: 1.15fr 1.4fr .65fr; gap: 56px; align-items: start; margin-bottom: 36px; }
.site-footer .footer-brand { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 12px 16px; min-width: 0; }
.site-footer .footer-brand>img { width: 38px; height: 38px; object-fit: contain; }
.site-footer .footer-brand>div { min-width: 0; }
.site-footer .footer-brand strong { display: block; font: 600 20px/1.3 var(--font); letter-spacing: -.025em; color: #fff; }
.site-footer .footer-brand>div>span { display: block; font: 12px/1.75 var(--font); color: #969fa9; margin-top: 8px; }
.site-footer .footer-brand p { font: 14px/1.8 var(--font); color: #c0c6ce; margin: 14px 0 0; }
.site-footer .footer-social { grid-column: 2; margin: 8px 0 0; gap: 10px; }
.site-footer .footer-social a { width: 34px; height: 34px; border-color: #333; color: #aeb7c1; border-radius: 3px; }
.site-footer .footer-social a:hover { color: #fff; border-color: #66adf5; }
.site-footer .footer-col h3 { font: 600 14px/1.5 var(--font); color: #fff; margin: 0 0 22px; letter-spacing: 0; }
.site-footer .footer-contact { display: flex; flex-direction: column; gap: 13px; margin: 0; padding: 0; list-style: none; }
.site-footer .footer-contact li { display: grid; grid-template-columns: 80px minmax(0,1fr); gap: 14px; font-size: 13px; line-height: 1.75; }
.site-footer .footer-contact li>span:first-child { color: #8e99a6; }
.site-footer .footer-contact li>span:last-child,.site-footer .footer-contact a { color: #d4dbe3; }
.site-footer .footer-contact a { text-decoration: none; }
.site-footer .footer-contact a:hover { color: #70b5ff; }
.site-footer .footer-links { display: flex; flex-direction: column; gap: 14px; list-style: none; margin: 0; padding: 0; }
.site-footer .footer-links button { font: 13px/1.75 var(--font); color: #d4dbe3; }
.site-footer .footer-links button:hover { color: #70b5ff; }
.site-footer .footer-bottom { border-top: 1px solid #272b30; padding-top: 20px; color: #8993a0; font-size: 11px; }
.site-footer .footer-badge { color: #8993a0; font: 11px var(--font); }
@media(max-width:1000px) { .site-footer .footer-main { gap: 32px; grid-template-columns: 1fr 1.3fr .6fr; } }
@media(max-width:800px) { .site-footer .footer-main { grid-template-columns: 1.4fr 1fr; gap: 32px; } .site-footer .footer-brand { grid-column: 1/-1; max-width: 450px; } }
@media(max-width:500px) { .site-footer { padding: 36px 0 24px; } .site-footer .footer-main { grid-template-columns: 1fr; gap: 32px; } .site-footer .footer-brand { grid-column: auto; } .site-footer .footer-links { display: grid; grid-template-columns: 1fr 1fr; } .site-footer .footer-contact li { grid-template-columns: 76px minmax(0,1fr); gap: 10px; } }

/* Footer policy links and readable policy dialog. */
.footer-policies { display: flex; flex-wrap: wrap; gap: 12px 26px; padding: 0 0 22px; }
.footer-policies button { background: none; border: 0; padding: 0; color: #aeb7c1; font: 12px/1.7 var(--font); cursor: pointer; }
.footer-policies button:hover { color: #70b5ff; }
.footer-policies button:focus-visible { outline: 2px solid #70b5ff; outline-offset: 4px; }
.modal.policy-dialog { display: flex; flex-direction: column; max-width: 720px; max-height: calc(100dvh - 48px); border: 1px solid #d5dce3; border-radius: 6px; background: #fff; }
.policy-dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 26px 30px 22px; border-bottom: 1px solid #e3e8ee; }
.policy-dialog-head span { display: block; font: 600 10px var(--font); color: #718193; letter-spacing: .06em; margin-bottom: 12px; }
.policy-dialog-head h2 { margin: 0; color: #202936; font: 600 27px/1.3 var(--font); letter-spacing: -.025em; }
.policy-dialog .modal-close { position: static; background: #fff; color: #657382; border: 1px solid #dfe5eb; width: 32px; height: 32px; flex-shrink: 0; }
.policy-dialog-body { overflow-y: auto; overscroll-behavior: contain; padding: 26px 30px; min-height: 0; }
.policy-dialog-body h3 { font: 600 17px/1.5 var(--font); color: #202936; margin: 24px 0 10px; }
.policy-dialog-body h3:first-child { margin-top: 0; }
.policy-dialog-body p { font: 14px/1.85 var(--font); color: #5f6b78; margin: 0; }
.policy-dialog-foot { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 18px 30px; border-top: 1px solid #e3e8ee; font: 12px var(--font); color: #7b8896; }
.policy-dialog-foot a { color: var(--primary); text-decoration: none; }
@media(max-width:600px) { .policy-dialog-head,.policy-dialog-body { padding: 22px; } .policy-dialog-head h2 { font-size: 24px; } .policy-dialog-foot { padding: 18px 22px; } }

/* External KetcauSoft links in the footer. */
.site-footer .footer-links a { display: inline-flex; align-items: flex-start; gap: 7px; color: #d4dbe3; font: 13px/1.75 var(--font); text-decoration: none; }
.site-footer .footer-links a svg { width: 14px; height: 14px; margin-top: 4px; flex-shrink: 0; }
.site-footer .footer-links a:hover { color: #70b5ff; }
.site-footer .footer-links a:focus-visible { outline: 2px solid #70b5ff; outline-offset: 4px; }

/* Extension introduction background. */
.extension-hero {
  background-image: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Explicit background layer for the extension banner. */
#eco-root .extension-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image: none;
}
.extension-hero-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  filter: none;
}
#eco-root .extension-hero > .container {
  position: relative;
  z-index: 1;
}

/* Show the entire extension background without changing banner height. */
#eco-root .extension-hero-background {
  object-fit: contain;
  object-position: right center;
}

/* Feature banner: full original image, right aligned at the current height. */
#features-root .fp-header {
  background-color: #111111;
  background-size: 100% 100%, contain;
  background-position: center, right center;
  background-repeat: no-repeat;
}

/* Home banner: full background image at its original proportions. */
.hero.hero-editorial {
  background-color: #06121d;
}
.hero-editorial .hero-bg img {
  object-fit: cover;
  object-position: center;
}

/* KetcauSoft brand logo in the company statement. */
.kcs-story-person img {
  object-fit: contain;
  background: transparent;
}

/* Homepage: alternate white and deep navy sections. */
.view[data-tab="home"] {
  --home-navy: #10283f;
}
.view[data-tab="home"] :is(.feat-install,.product-demo-ipc,.home-kcs-story,.home-network,.home-start) {
  background-color: #ffffff;
  --heading-color: #202936;
  --body-color: #5f6b78;
  --label-color: #708090;
}
.view[data-tab="home"] :is(.product-demo-basic,.product-demo-ai,.home-services,.home-answers) {
  background: var(--home-navy);
  --heading-color: #f7fafc;
  --body-color: #bdcad8;
  --label-color: #8cb7db;
  color: #f7fafc;
}
.view[data-tab="home"] :is(.product-demo-basic,.product-demo-ai) .product-demo-note {
  color: #b4c7d9;
}
.view[data-tab="home"] :is(.product-demo-basic,.product-demo-ai) :is(.product-demo-action,.product-demo-note svg) {
  color: #85c0ff;
}
.view[data-tab="home"] :is(.product-demo-basic,.product-demo-ai) .product-demo-action {
  border-color: #496580;
}
.view[data-tab="home"] .home-services {
  border-top-color: #28435b;
}
.view[data-tab="home"] .home-services-grid article {
  border-top-color: #3b536a;
}
.view[data-tab="home"] .home-services-grid :is(.home-value-link,article>svg) {
  color: #85c0ff;
}
.view[data-tab="home"] .home-answers :is(.faq-q,.faq-item.open .faq-q) {
  color: #f7fafc;
}
.view[data-tab="home"] .home-answers :is(.faq-a,.faq-answer-copy) {
  color: #bdcad8;
}
.view[data-tab="home"] .home-answers :is(.faq-item,.home-answers-contact) {
  border-color: #3b536a;
}
.view[data-tab="home"] .home-answers :is(.faq-q>span,.home-answers-contact>span) {
  color: #92adc5;
}
.view[data-tab="home"] .home-answers :is(.home-answers-contact>a,.home-value-link) {
  color: #85c0ff;
}
.view[data-tab="home"] .home-start::before,
.view[data-tab="home"] .home-start::after {
  content: none;
}
.view[data-tab="home"] .home-start .btn-outline {
  color: #273747;
  border-color: #b7c4d0;
  background: transparent;
}
.view[data-tab="home"] .home-start-actions small {
  color: #708090;
}

/* Consistent white/navy rhythm across secondary pages. */
:root { --section-navy: #10283f; }
.view[data-tab]:not([data-tab="home"]) :is(
  .overview-section#why-choose, .compare-evaluation, .license-faq,
  .help-prepare, .help-contact, .extension-demo, .fp-detail-cta
) {
  background: var(--section-navy);
  --heading-color: #f7fafc;
  --body-color: #bdcad8;
  --label-color: #8cb7db;
  color: #f7fafc;
  border-color: #3b536a;
}
.view[data-tab]:not([data-tab="home"]) :is(
  .overview-start, .compare-content, .compare-footer, .license-plans,
  .license-trial, .help-links, .extension-options, .extension-more,
  .res-shell, .fp-body
) {
  background-color: #fff;
  --heading-color: #202936;
  --body-color: #5f6b78;
  --label-color: #708090;
  color: #202936;
}
.view[data-tab] .license-plan-featured {
  --heading-color: #f7fafc;
  --body-color: #bdcad8;
  --label-color: #8cb7db;
}
.view[data-tab] .compare-anfa-product {
  --heading-color: #f7fafc;
  --body-color: #bdcad8;
}
.overview-page #why-choose .overview-workflow li,
.view[data-tab] .license-faq details,
.view[data-tab] .help-prepare li,
.view[data-tab] .help-remote,
.view[data-tab] .help-contact-grid {
  border-color: #3b536a;
}
.view[data-tab] .license-faq summary,
.view[data-tab] .help-contact-grid strong,
.view[data-tab] .help-contact-grid p {
  color: #f7fafc;
}
.view[data-tab] .license-faq :is(.license-link, summary svg),
.view[data-tab] .help-contact-grid svg {
  color: #85c0ff;
}
.view[data-tab] .help-contact-grid span {
  color: #a4b9cc;
}
.view[data-tab] .compare-footer .btn-outline {
  color: #273747;
  border-color: #b7c4d0;
}
.view[data-tab] .compare-footer p {
  color: var(--body-color);
}
.view[data-tab] .help-remote :is(p,svg) {
  color: #a4b9cc;
}
.res-page .res-checklist {
  border-left-color: #85c0ff;
}
.res-page .res-checklist :is(h3,ol,li) {
  color: #d9e4ee;
}
.res-page .res-checklist h3 {
  color: #f7fafc;
}
#features-root .fp-detail-cta {
  padding: 26px;
  border: 0;
}
#features-root .fp-detail-cta h3 {
  color: #f7fafc;
}
#features-root .fp-detail-cta p {
  color: #bdcad8;
}
.view[data-tab] .extension-more article {
  background: #fff;
}

/* Pricing cards: clear hierarchy and aligned actions. */
#price-root .license-plan-grid {
  gap: 24px;
  align-items: stretch;
  padding-top: 8px;
}
#price-root .license-plan {
  position: relative;
  background: #fff;
  color: #202936;
  border: 1px solid #dce3eb;
  border-radius: 8px;
  padding: 30px;
  min-height: 480px;
  box-shadow: 0 4px 16px rgba(16,40,63,.035);
  --heading-color: #202936;
  --body-color: #5f6b78;
  --label-color: #708090;
}
#price-root .license-plan-featured {
  background: #fff;
  border: 2px solid var(--primary);
  padding: 29px;
  box-shadow: 0 10px 30px rgba(0,110,220,.1);
}
#price-root .license-plan-top {
  min-height: 24px;
  margin-bottom: 20px;
  gap: 14px;
}
#price-root .license-plan-top>span {
  color: #7b8794;
  font-size: 10px;
}
#price-root .license-plan-top svg {
  color: #7b8794;
}
#price-root .license-plan-top .license-recommended {
  color: var(--primary);
  background: #edf5ff;
  border-radius: 4px;
  padding: 6px 8px;
  font: 600 10px var(--font);
  white-space: nowrap;
}
#price-root .license-plan h3 {
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -.02em;
  margin: 0 0 18px;
}
#price-root .license-plan-price {
  border: 0;
  padding: 0;
  margin-bottom: 20px;
}
#price-root .license-plan-price strong {
  font: 600 clamp(26px,2.5vw,34px)/1.25 var(--font);
  letter-spacing: -.035em;
  color: #202936;
  white-space: nowrap;
}
#price-root .license-plan-price>span {
  color: #7b8794;
  font-size: 12px;
  margin-top: 8px;
}
#price-root .license-plan-description {
  color: #5f6b78;
  min-height: 52px;
  font-size: 14px;
  margin: 0 0 22px;
}
#price-root .license-plan ul {
  border-top: 1px solid #e8edf2;
  padding: 22px 0 0;
  margin: 0 0 32px;
  gap: 16px;
}
#price-root .license-plan li {
  color: #5f6b78;
  font-size: 13px;
}
#price-root .license-plan li svg {
  background: #edf5ff;
  border-radius: 50%;
  padding: 3px;
  width: 20px;
  height: 20px;
  color: var(--primary);
  margin-top: 1px;
}
.license-plan-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: auto;
}
#price-root .license-plan .btn {
  min-height: 46px;
  border-radius: 4px;
  justify-content: center;
  gap: 12px;
}
.license-plan-trial {
  align-self: center;
  background: none;
  border: 0;
  padding: 3px 0;
  color: var(--primary);
  font: 600 13px/1.6 var(--font);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
@media(max-width:1000px) {
  #price-root .license-plan { padding: 24px; }
  #price-root .license-plan-featured { padding: 23px; }
  #price-root .license-plan-grid { gap: 16px; }
  #price-root .license-plan-price strong { font-size: 26px; }
}
@media(max-width:700px) {
  #price-root .license-plan { min-height: 0; }
  #price-root .license-plan-description { min-height: 0; }
  #price-root .license-plan-grid { gap: 22px; }
}

/* Subtle blue backdrop behind the white pricing cards. */
#price-root .license-plans {
  background-color: #e3effc;
}

/* Minimal corner radius for pricing cards. */
#price-root .license-plan {
  border-radius: 3px;
}

/* Switch between online account and hardware key licensing. */
.license-type-tabs { display: flex; width: fit-content; max-width: 100%; margin: 0 auto 38px; gap: 4px; padding: 5px; border: 1px solid #dce5f0; border-radius: 999px; background: #fff; }
.license-type-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 180px; padding: 12px 22px; border: 0; border-radius: 999px; background: transparent; color: #556575; font: 600 14px var(--font); cursor: pointer; transition: background .2s,color .2s; }
.license-type-tabs button.active { background: var(--primary); color: #fff; }
.license-type-tabs button:not(.active):hover { background: #edf5ff; }
.license-type-tabs svg { width: 16px; height: 16px; stroke-width: 1.5; }
#license-panel-online[hidden],#license-panel-hardware[hidden] { display: none; }
#license-panel-hardware { padding: 28px 0; }
#license-panel-hardware .license-hardware { margin: 0 auto; max-width: 880px; background: #fff; border-radius: 3px; padding: 38px; }
@media(max-width:500px) { .license-type-tabs { width: 100%; margin-bottom: 28px; } .license-type-tabs button { min-width: 0; flex: 1; padding: 12px; font-size: 13px; } #license-panel-hardware .license-hardware { padding: 24px; } }

/* Pricing banner with the resource background. */
.view[data-tab] .license-heading {
  background: linear-gradient(90deg, rgba(5, 15, 24, .88) 0%, rgba(5, 15, 24, .66) 48%, rgba(5, 15, 24, .18) 100%), url('../assets/images/Background_tainguyen.png') right center / cover no-repeat;
  border-bottom-color: #10283f;
  --heading-color: #f7fafc;
  --body-color: #c4d3e2;
  --label-color: #91bce5;
}
.view[data-tab] .license-heading h1 { color: #f7fafc; }
.view[data-tab] .license-heading p { color: #c4d3e2; }
.view[data-tab] .license-heading .license-kicker { color: #91bce5; }
.license-heading .license-account { background: #fff; color: #202936; border-color: #fff; }

/* Shared image treatment for the extension banner. */
#eco-root .extension-hero {
  background: linear-gradient(90deg, rgba(5, 15, 24, .88) 0%, rgba(5, 15, 24, .66) 48%, rgba(5, 15, 24, .18) 100%), url('../assets/images/Background_tainguyen.png') right center / cover no-repeat;
  --heading-color: #f7fafc;
  --body-color: #c4d3e2;
  --label-color: #91bce5;
}
#eco-root .extension-hero h1 { color: #f7fafc; }
#eco-root .extension-hero p { color: #c4d3e2; }
#eco-root .extension-hero .extension-kicker { color: #91bce5; }
#eco-root .extension-hero .extension-link { color: #f7fafc; border-color: #7591aa; }

/* Remove the previous extension image layer, including cached markup. */
#eco-root .extension-hero-background { display: none; }

/* Preserve the entire extension banner image at its original ratio. */
#eco-root .extension-hero {
  background-color: #050f18;
  background-size: 100% 100%, contain;
  background-position: center, right center;
  background-repeat: no-repeat;
}

/* Emphasize the four product advantages below the hero. */
.hero-product-strip {
  padding: 30px 0;
  background: #edf5ff;
  border-bottom: 1px solid #cbdff4;
}
.hero-product-strip > .container { gap: 24px; }
.hero-product-strip > .container > div { align-items: center; gap: 16px; }
.hero-product-strip > .container > div + div { border-left: 1px solid #cbdff4; padding-left: 24px; }
.hero-product-strip svg {
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  padding: 12px;
  border-radius: 3px;
  background: var(--primary);
  color: #fff;
  stroke-width: 1.7;
}
.hero-product-strip strong { font-size: 16px; font-weight: 600; color: #163550; line-height: 1.4; }
.hero-product-strip small { font-size: 13px; color: #536b82; margin-top: 6px; }
@media (max-width: 1023px) {
  .hero-product-strip > .container > div + div { border-left: 0; padding-left: 0; }
}
@media (max-width: 600px) {
  .hero-product-strip { padding: 24px 0; }
  .hero-product-strip > .container { gap: 22px 16px; }
  .hero-product-strip > .container > div { gap: 10px; align-items: flex-start; }
  .hero-product-strip svg { width: 38px; height: 38px; padding: 9px; }
  .hero-product-strip strong { font-size: 14px; }
  .hero-product-strip small { font-size: 12px; }
}

/* Preserve the official brand capitalization. */
.header-wordmark, .hero-product-copy h1, .install-badge, .license-plan-top > span, .license-kicker, .extension-kicker, .fp-eyebrow, .res-kicker { text-transform: none; }

/* Blue gradient for the product advantage strip. */
.hero-product-strip {
  background: linear-gradient(110deg, #b5daff 0%, #edf6ff 48%, #83bef5 100%);
  border-bottom-color: #b9d7f5;
}

/* Compact comparison rows and subtle support indicators. */
.compare-group table { border-collapse: collapse; width: 100%; }
.compare-group tbody tr:nth-child(odd) { background: #f7f9fc; }
.compare-group tbody th, .compare-group tbody td { padding: 16px 20px; border-bottom: 1px solid #e9edf2; font-size: 14px; line-height: 1.6; }
.compare-group tbody td { text-align: center; }
.compare-group tbody .compare-anfa-cell { background: transparent; }
.compare-check { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #e0f8ed; color: #28a572; vertical-align: middle; }
.compare-check svg { width: 14px; height: 14px; stroke-width: 2; }

.compare-check.compare-cross { background: #ffe7e7; color: #d65a5a; }
.compare-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 20px; font-size: 13px; }
.compare-legend small { margin-left: 12px; font-size: 12px; }

/* Align product headings with the centers of their comparison columns. */
.compare-product-head { margin-left: 23%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.compare-product-head > div { text-align: center; }
.compare-group tbody th { width: 23%; }
.compare-group tbody td { width: 38.5%; text-align: center; }
@media (max-width: 600px) {
  .compare-product-head { margin-left: 0; }
  .compare-group tbody th, .compare-group tbody td { width: auto; }
}

/* Use the same column boundaries for table cells and product headings. */
@media (min-width: 601px) {
  .compare-product-head { width: 77%; margin-left: 23%; box-sizing: border-box; }
  .compare-group table { table-layout: fixed; }
  .compare-group th, .compare-group td,
  .compare-group tbody th, .compare-group tbody td { width: auto; box-sizing: border-box; }
}
@media (max-width: 600px) { .compare-group colgroup { display: none; } }

/* Give comparison criteria more room than the support indicators. */
@media (min-width: 601px) {
  .compare-product-head { width: 50%; margin-left: 50%; }
  .compare-product-head > div { padding-left: 12px; padding-right: 12px; }
}

.compare-product-logo { display: block; width: 40px; height: 40px; object-fit: contain; margin: 0 auto 12px; }

/* Distinguish comparison category headings from detail rows. */
.compare-group > header {
  background: #eaf3ff;
  border-left: 3px solid var(--primary);
  border-bottom: 1px solid #b9d5f2;
}
.compare-group > header h3 { color: #163550; }
.compare-group > header p { color: #58718b; }

/* Place the page title in the criteria column above the comparison table. */
.compare-table-top { display: grid; grid-template-columns: 50% 50%; align-items: stretch; }
.compare-table-title { display: flex; flex-direction: column; justify-content: center; padding: 24px 28px 24px 0; }
.compare-table-title .compare-kicker { margin-bottom: 12px; }
.view[data-tab] .compare-table-title h1 { font-size: clamp(26px, 2.4vw, 36px); line-height: 1.25; margin: 0; }
.compare-table-top .compare-product-head { width: 100%; margin-left: 0; }
@media (max-width: 600px) {
  .compare-table-top { grid-template-columns: 1fr; }
  .compare-table-title { padding: 0 0 24px; }
}

/* Mark the selected comparison navigation item. */
.compare-sidebar nav a.active { color: var(--primary); border-bottom: 2px solid var(--primary); }
.compare-sidebar nav a.active > svg { color: var(--primary); }

/* Consistent blue selection line across content navigation menus. */
.res-page .res-nav-item.active,
#features-root .fp-cat-btn.active {
  border-bottom: 2px solid var(--primary);
}

/* A shared soft background for resource content across all four categories. */
.res-page .res-content-panel {
  background: #edf5ff;
  border: 1px solid #d8e7f7;
  border-radius: 3px;
  padding: 28px;
}
.res-content-panel .res-resource-list,
.res-content-panel .res-download-list { border-top: 0; }
.res-content-panel .res-resource,
.res-content-panel .res-download { background: transparent; border-color: #cfdeee; }
.res-content-panel .res-bottom-help { border-color: #cfdeee; }
.res-content-panel .res-guide { background: #fff; border-color: #cfdeee; }
@media (max-width: 600px) { .res-page .res-content-panel { padding: 20px; } }

/* Match pricing typography to adjacent sections with a lighter blue surface. */
#price-root .license-plans { background-color: #edf5ff; }
#price-root.view[data-tab] .license-plans-heading h2 {
  font-size: var(--type-section);
  font-weight: 600;
  line-height: 1.25;
  color: #202936;
}
#price-root .license-plans-heading { margin-bottom: 28px; }
#price-root .license-plan-description,
#price-root .license-plan li {
  font-size: 15px;
  line-height: 1.8;
  color: #5f6b78;
}

/* Resource accordion items share the surrounding panel background. */
.res-page .res-content-panel .res-guide,
.res-page .res-content-panel .res-guide > summary,
.res-page .res-content-panel .res-guide > div {
  background: transparent;
}

#price-root .license-plans-heading { flex-direction: column; align-items: flex-start; gap: 18px; }
#price-root .license-plans-heading p { font-size: 15px; line-height: 1.8; color: #5f6b78; max-width: 650px; }

/* Unified resource column with a colored heading and clearly divided rows. */
.res-page .res-body {
  background: #edf5ff;
  border: 1px solid #ccdef1;
  border-radius: 3px;
  overflow: hidden;
  align-self: start;
}
.res-page .res-body-head {
  background: var(--primary);
  padding: 24px 28px;
  margin: 0;
  border-bottom: 1px solid #0056b3;
}
.res-page .res-body-head h2 { color: #fff; margin: 0 0 10px; }
.res-page .res-body-head .res-section-label { color: #d6eaff; }
.res-page .res-body-head p { color: #edf5ff; margin: 0; }
.res-page .res-content-panel {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0 28px;
}
.res-page .res-content-panel .res-resource:first-child,
.res-page .res-content-panel .res-download:first-child { border-top: 0; }
.res-page .res-content-panel .res-bottom-help { padding: 24px 0; margin: 0; }
.res-page .res-content-panel .res-search { margin-top: 24px; }
@media (max-width: 600px) {
  .res-page .res-body-head { padding: 20px; }
  .res-page .res-content-panel { padding: 0 20px; }
}

/* Refine resource panels into one consistent visual hierarchy. */
.res-page .res-body-head { width: 100%; max-width: none; box-sizing: border-box; padding: 26px 30px; }
.res-page .res-content-panel { padding: 0 30px 28px; }
.res-page .res-content-panel .res-checklist {
  background: transparent;
  border-left: 0;
  border-top: 1px solid #cfdeee;
  padding: 26px 0 0;
  margin-top: 0;
  --heading-color: #202936;
  --body-color: #5f6b78;
  --label-color: #708090;
}
.res-page .res-content-panel .res-checklist h3 { color: #202936; font-size: 20px; margin-bottom: 14px; }
.res-page .res-content-panel .res-checklist ol,
.res-page .res-content-panel .res-checklist li { color: #5f6b78; }
.res-page .res-content-panel .res-download { padding: 28px 0; gap: 18px; }
.res-page .res-file-icon { background: transparent; border: 0; }
@media (max-width: 600px) {
  .res-page .res-body-head { padding: 22px 20px; }
  .res-page .res-content-panel { padding: 0 20px 22px; }
}

/* Compact resource titles and readable checklist contrast. */
#res-root .res-body-head h2,
.view[data-tab="resources"] .res-body-head h2 { font-size: 24px; line-height: 1.3; }
.view[data-tab="resources"] .res-body-head { padding: 22px 28px; }
.view[data-tab="resources"] .res-content-panel .res-checklist {
  background: #edf5ff;
  --heading-color: #202936;
  --body-color: #46596c;
}
.view[data-tab="resources"] .res-content-panel .res-checklist h3 { color: #202936; font-size: 18px; }
.view[data-tab="resources"] .res-content-panel .res-checklist :is(ol,li),
.view[data-tab="resources"] .res-content-panel p { color: #46596c; }
@media (max-width: 600px) {
  .view[data-tab="resources"] .res-body-head h2 { font-size: 22px; }
  .view[data-tab="resources"] .res-body-head { padding: 20px; }
}

/* Explicit resource checklist colors, independent of dark section styles. */
#res-root .res-page .res-content-panel .res-checklist { background: #edf5ff; color: #34485c; border-color: #cfdeee; }
#res-root .res-page .res-content-panel .res-checklist h3 { color: #202936; }
#res-root .res-page .res-content-panel .res-checklist ol,
#res-root .res-page .res-content-panel .res-checklist li { color: #34485c; }

/* Black heading bars across resource categories. */
#res-root .res-page .res-body-head {
  background: #30343a;
  border-bottom-color: #30343a;
}
#res-root .res-page .res-body-head h2 { color: #ffffff; }
#res-root .res-page .res-body-head .res-section-label { color: #c4cbd3; }
#res-root .res-page .res-body-head p { color: #e1e6eb; }

/* Neutral gray resource content beneath charcoal headings. */
#res-root .res-page .res-body { background: #f4f5f6; border-color: #dce0e4; }
#res-root .res-page .res-content-panel,
#res-root .res-page .res-content-panel .res-checklist { background: #f4f5f6; }
#res-root .res-page .res-content-panel :is(.res-resource, .res-download, .res-checklist, .res-bottom-help, .res-guide) { border-color: #dce0e4; }

/* Align resource content icons with the title line and use black strokes. */
#res-root .res-content-panel .res-download { align-items: flex-start; }
#res-root .res-content-panel .res-file-icon {
  width: 28px;
  height: 28px;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
}
#res-root .res-content-panel .res-file-icon svg { width: 22px; height: 22px; color: #111; }
#res-root .res-content-panel .eh-text-link svg,
#res-root .res-content-panel .res-search > svg,
#res-root .res-content-panel .res-guide summary > svg { color: #111; }

#features-root .fp-basic-video { display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 0; overflow: hidden; }
#features-root .fp-basic-video video { display: block; width: 100%; height: 100%; object-fit: contain; background: #10202e; }

#features-root .fp-basic-video { margin-bottom: 30px; }

/* Feature video play button appears only while hovering or using keyboard focus. */
#features-root .fp-basic-video .home-video-play { opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
#features-root .fp-basic-video:hover .home-video-play,
#features-root .fp-basic-video:focus-visible .home-video-play { opacity: 1; visibility: visible; }

/* Align the AI callout icon to its heading line. */
.extension-more article { align-items: flex-start; }
.extension-more article > svg { width: 26px; height: 26px; margin-top: 2px; }
.extension-more article > .extension-link { align-self: center; }

/* Highlight plan prices in the brand blue. */
#price-root .license-plan-price strong { color: var(--primary); }

/* Center plan names, prices and license terms. */
#price-root .license-plan > h3,
#price-root .license-plan-price { text-align: center; }