@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ============================================================
   Digiclove — site-wide stylesheet
   Direction: bold edtech brand. Deep navy (#1a2044) for
   structure; brand red (#e63520) for energy/CTAs;
   warm cream (#f5ede0) as primary background.
   ============================================================ */

:root {
  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* Neutrals — deep navy */
  --ink-900: #12203a;
  --ink-800: #1a2d4a;
  --ink-700: #253c5e;
  --ink-600: #3d5272;
  --ink-500: #607088;
  --ink-400: #8c9aac;
  --ink-300: #b6c2ce;
  --ink-200: #dce3ea;
  --ink-100: #edf1f5;
  --ink-50:  #f4f6f8;
  --bg:      #ffffff;
  --bg-soft: #f4f6f8;

  /* Brand — Digiclove red, derived from logo #e63522 */
  --brand-50:  #fef3f1;
  --brand-100: #fde0db;
  --brand-200: #fac0b6;
  --brand-300: #f59384;
  --brand-400: #ef6651;
  --brand-500: #e63522;
  --brand-600: #cb2417;
  --brand-700: #a31b10;
  --brand-800: #771a14;
  --brand-900: #4d1610;
  --brand-red: var(--brand-500);  /* legacy alias */

  /* Info / success accent — used sparingly for positive states,
     comparison highlights, and "did you know" callouts. */
  --teal-900: #053b3f;
  --teal-800: #0a5054;
  --teal-700: #0d6e72;
  --teal-600: #0f8a8e;
  --teal-500: #14a6aa;
  --teal-400: #3dc1c4;
  --teal-300: #84d8da;
  --teal-200: #c2ecec;
  --teal-100: #e6f7f7;
  --teal-50:  #f1fafa;

  /* Status */
  --green: #0fa968;
  --amber: #d97706;
  --rose:  #e0395a;
  --blue:  #2563eb;

  /* Radii / shadows */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(10, 24, 32, 0.04);
  --shadow-sm: 0 2px 6px rgba(10, 24, 32, 0.06), 0 1px 2px rgba(10, 24, 32, 0.04);
  --shadow-md: 0 8px 24px -8px rgba(10, 24, 32, 0.12), 0 2px 4px rgba(10, 24, 32, 0.04);
  --shadow-lg: 0 24px 48px -16px rgba(10, 24, 32, 0.18), 0 4px 8px rgba(10, 24, 32, 0.06);

  /* Layout */
  --max-w: 1240px;
  --gutter: clamp(20px, 4vw, 40px);
  --section-y: clamp(40px, 5vw, 64px);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-800);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
/* <img> tags carry width/height attributes so the browser reserves space before the file loads.
   Zero specificity: any page or component rule still decides the rendered size. */
:where(img[width][height]) { width: auto; height: auto; }
/* Headings get the strongest break rule (so min-content = 0 and they never blow out a column).
   Body copy gets the gentler break-word so it only breaks when it has to. */
h1, h2, h3, h4, h5 { overflow-wrap: anywhere; }
p, li, td, th, dd, dt { overflow-wrap: break-word; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, h5 { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em; color: var(--ink-900); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

/* Type scale */
.h-display { font-size: clamp(34px, 6.5vw, 76px); line-height: 1.08; letter-spacing: -0.025em; font-weight: 700; }
.h-1 { font-size: clamp(28px, 4.6vw, 54px); line-height: 1.12; letter-spacing: -0.02em; font-weight: 700; }
.h-2 { font-size: clamp(22px, 3.2vw, 38px); line-height: 1.16; letter-spacing: -0.015em; font-weight: 700; }
.h-3 { font-size: clamp(18px, 2.2vw, 28px); line-height: 1.25; letter-spacing: -0.01em; font-weight: 700; }
.h-4 { font-size: 17px; line-height: 1.35; letter-spacing: -0.01em; font-weight: 700; }
.eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--brand-600);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.lead { font-size: clamp(17px, 1.7vw, 20px); line-height: 1.68; color: #5a6070; font-weight: 400; }
.lead strong { color: var(--ink-900); font-weight: 700; }
.text-accent { color: var(--brand-500); }
.muted { color: var(--ink-500); }

/* Layout */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }
.section-tight { padding-block: clamp(28px, 4vw, 48px); }

/* Grid helpers */
.grid { display: grid; gap: 24px; }
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* Flex helpers */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }

/* ========== Buttons ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
  transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: linear-gradient(135deg, var(--brand-400) 0%, var(--brand-600) 100%);
  color: #fff;
  border-radius: 999px;
  border: none;
  box-shadow: 0 4px 18px -4px rgba(230, 53, 34, 0.45);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 100%);
  box-shadow: 0 6px 22px -4px rgba(230, 53, 34, 0.6);
}

.btn-secondary {
  background: var(--ink-900);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 6px 16px -8px rgba(10, 24, 32, 0.45);
}
.btn-secondary:hover { background: var(--ink-800); box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 10px 24px -8px rgba(10, 24, 32, 0.55); }

.btn-ghost {
  background: transparent;
  color: var(--ink-800);
  border: 1px solid var(--ink-200);
}
.btn-ghost:hover { background: var(--ink-50); border-color: var(--ink-300); }

/* Ghost buttons on dark sections (inline color:#fff). The default :hover
   fills them near-white, hiding the white label. Use a translucent fill
   instead so the text stays readable. */
.btn-ghost[style*="color:#fff"]:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.5) !important;
}

.btn-link {
  padding: 0;
  background: none;
  color: var(--brand-700);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-link:hover { color: var(--brand-800); }
.btn-link::after { content: "→"; transition: transform .2s ease; }
.btn-link:hover::after { transform: translateX(3px); }

.btn-sm { padding: 8px 16px; font-size: 14px; }
.btn-lg { padding: 16px 28px; font-size: 16px; }

/* ========== Pills / badges ========== */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
}
/* `.pill-teal` is now an info / success pill. New brand pills use `.pill-brand`.
   Hero / eyebrow chips that were `.pill-teal` are aliased to brand below so we
   don't have to rewrite every page. */
.pill-teal,
.pill-brand { background: var(--brand-50); color: var(--brand-700); }
/* Hero eyebrow pills — orange accent to match brand accent on hero sections */
.hero .pill-teal,
.hero .pill-brand { background: rgba(212, 84, 28, 0.10); color: #d4541c; font-weight: 600; }
.pill-info { background: var(--teal-100); color: var(--teal-800); }
.pill-ink { background: var(--ink-100); color: var(--ink-700); }
.pill-soft { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.9); border: 1px solid rgba(255,255,255,0.18); }
.pill-dot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ========== Cards ========== */
.card {
  background: #ffffff;
  border: 1px solid rgba(26, 32, 68, 0.1);
  border-radius: var(--r-lg);
  padding: 28px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.card:hover { border-color: rgba(26, 32, 68, 0.18); box-shadow: var(--shadow-sm); }

.card-feature {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.card-feature > .pill { align-self: flex-start; }
.card-feature .ico {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--brand-50);
  color: var(--brand-700);
  display: grid; place-items: center;
  margin-bottom: 4px;
}

/* Feature-card hover — interactive (anchor) cards only */
a.card-feature {
  transition: transform .3s cubic-bezier(.22, .8, .22, 1), box-shadow .3s ease, border-color .3s ease;
}
a.card-feature .ico {
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
a.card-feature:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px -18px rgba(230, 53, 34, 0.28), 0 8px 16px -8px rgba(10, 24, 32, 0.08);
  border-color: var(--brand-200);
}
a.card-feature:hover .ico {
  transform: scale(1.12) rotate(-4deg);
}
@media (prefers-reduced-motion: reduce) {
  a.card-feature, a.card-feature .ico { transition: none; }
  a.card-feature:hover, a.card-feature:hover .ico { transform: none; }
}

/* ========== Header ========== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(10, 24, 32, 0.06);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  /* Positioning context for the mega dropdown (see .dropdown.mega rule).
     Non-mega dropdowns continue to anchor to their .has-dropdown parent. */
  position: relative;
}

/* Take the Products link out of the positioning chain so its mega child
   anchors to .nav instead. Modern browsers only — non-:has() browsers
   fall back to the old (occasionally clipping) link-anchored behavior. */
.has-dropdown:has(.dropdown.mega) { position: static; }
.brand {
  display: flex; align-items: center; gap: 10px;
}
.brand img { height: 26px; width: auto; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-links a {
  position: relative;
  padding: 8px 14px;
  font-size: 14.5px;
  color: var(--ink-700);
  border-radius: var(--r-sm);
  font-weight: 500;
  transition: color .15s ease, background .15s ease;
}
.nav-links a:hover { color: var(--ink-900); background: var(--ink-50); }
.nav-links a.active { color: var(--brand-700); }
.nav-links .has-dropdown { position: relative; }
.nav-links .has-dropdown > a::after {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  margin-left: 6px;
  opacity: 0.55;
}
.dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  padding: 8px;
  min-width: 280px;
  display: none;
  flex-direction: column;
  gap: 2px;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown { display: flex; }

/* Hover bridge — an invisible strip below the dropdown trigger that spans
   the gap to the panel, so the menu stays open while the cursor crosses
   over (no click needed). Only rendered while the menu is open. */
.nav-links .has-dropdown > a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 28px;
  display: none;
}
.nav-links .has-dropdown:hover > a::before { display: block; }

.dropdown a {
  padding: 10px 12px;
  border-radius: var(--r-sm);
  display: flex; flex-direction: column; gap: 2px;
  font-size: 14px;
  color: var(--ink-800);
}
.dropdown a:hover { background: var(--ink-50); color: var(--ink-900); }
.dropdown a small { color: var(--ink-500); font-size: 12px; font-weight: 400; }

/* Mega menu — 4-column products dropdown.
   Positioned against `.nav` (the whole header content row) instead of
   the small "Products" link, so its left:50% / translateX(-50%) centers
   it under the header and never clips on narrower desktop widths. The
   `.has-dropdown:has(.dropdown.mega) { position: static }` rule above
   removes the link-level positioning context for the mega case only. */
.dropdown.mega {
  flex-direction: row;
  gap: 0;
  padding: 0;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  min-width: min(980px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  align-items: stretch;
}
.dropdown.mega .mega-col {
  flex: 1;
  padding: 18px 14px;
  border-right: 1px solid var(--ink-100);
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.dropdown.mega .mega-col:last-child { border-right: 0; }
.dropdown.mega .mega-head,
.dropdown.mega .mega-col a.mega-head {
  padding: 6px 10px 14px;
  border-radius: 0;
  border-bottom: 1px solid var(--ink-100);
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  transition: background .15s ease;
  cursor: pointer;
}
.dropdown.mega .mega-col a.mega-head:hover { background: var(--ink-50); }
.dropdown.mega .mega-col a.mega-head:hover strong { color: var(--brand-700); }
.dropdown.mega .mega-head strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-900);
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}
.dropdown.mega .mega-head small {
  font-size: 11px;
  color: var(--ink-500);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dropdown.mega .mega-col a {
  padding: 7px 10px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  color: var(--ink-700);
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-weight: 400;
}
.dropdown.mega .mega-col a:hover {
  background: var(--ink-50);
  color: var(--ink-900);
}
.dropdown.mega .mega-col a.overview {
  color: var(--brand-700);
  font-weight: 500;
}
.dropdown.mega .mega-col a.overview::after {
  content: "→";
  margin-left: auto;
  opacity: .6;
  font-size: 13px;
}

.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  align-items: center; justify-content: center;
}
.nav-toggle svg { width: 22px; height: 22px; color: var(--ink-800); }
/* Swap hamburger ↔ close icon based on `.is-open` set by site.js. */
.nav-toggle .icon-close { display: none; }
.nav-toggle.is-open .icon-open { display: none; }
.nav-toggle.is-open .icon-close { display: block; }

@media (max-width: 1024px) {
  .nav-links, .nav-cta .btn-ghost { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* Mobile drawer */
.mobile-drawer {
  position: fixed;
  inset: 68px 0 0 0;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(14px);
  z-index: 49;
  padding: 24px;
  display: none;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}
.mobile-drawer.open { display: flex; }
.mobile-drawer a:not(.btn) {
  padding: 14px 12px;
  border-bottom: 1px solid var(--ink-100);
  font-size: 16px;
  color: var(--ink-800);
}
.mobile-drawer .group-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-500);
  padding: 18px 12px 6px;
}
.mobile-drawer .actions { display: flex; flex-direction: column; gap: 10px; padding: 16px 0 32px; }
.mobile-drawer .actions .btn { text-align: center; justify-content: center; }

/* Mobile drawer — Products accordion (native <details>).
   Top-level shows ~7 items, Products is a collapsible row that
   reveals 4 product family cards on tap. Cards link to each
   overview page, where the sticky sub-product nav handles deeper
   sub-page navigation. Replaces the previous flat 30+ item list. */
.mobile-drawer .drawer-products {
  border-bottom: 1px solid var(--ink-100);
}
.mobile-drawer .drawer-products summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 12px;
  font-size: 16px;
  color: var(--ink-800);
  display: flex;
  align-items: center;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.mobile-drawer .drawer-products summary::-webkit-details-marker { display: none; }
.mobile-drawer .drawer-products summary::after {
  content: "";
  margin-left: auto;
  margin-right: 6px;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--ink-500);
  border-bottom: 1.5px solid var(--ink-500);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
}
.mobile-drawer .drawer-products[open] summary::after {
  transform: rotate(-135deg) translateY(-2px);
}
.mobile-drawer .drawer-product-card {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
  padding: 12px 12px 12px 24px;
  border-bottom: 1px solid var(--ink-100);
}
.mobile-drawer .drawer-product-card:last-child {
  border-bottom: none;
}
.mobile-drawer .drawer-product-card .dpc-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--brand-50);
  display: grid;
  place-items: center;
  font-size: 18px;
  flex-shrink: 0;
}
.mobile-drawer .drawer-product-card strong {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -0.005em;
}
.mobile-drawer .drawer-product-card small {
  display: block;
  font-size: 12.5px;
  color: var(--ink-500);
  margin-top: 2px;
}

/* ========== Footer ========== */
.site-footer {
  background: var(--ink-900);
  color: var(--ink-300);
  padding-block: 64px 32px;
  margin-top: 80px;
  border-top: 3px solid var(--brand-500);
}
.site-footer h5 {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #6b7a94;
  margin-bottom: 18px;
}
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 48px;
}
@media (max-width: 900px) {
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 520px) {
  .site-footer .footer-grid { grid-template-columns: 1fr; }
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.site-footer a { color: #c8d0dc; font-size: 14px; transition: color .15s ease; }
.site-footer a:hover { color: #fff; }
.site-footer .brand-block p { font-size: 14px; line-height: 1.65; max-width: 32ch; color: #8e9aac; }
.site-footer .brand-block img {
  height: 28px;
  filter: brightness(0) invert(1);
  margin-bottom: 20px;
  opacity: 0.95;
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.10);
  margin-top: 52px;
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: #6b7a94;
}

/* ========== Hero shared ========== */
.hero {
  padding-top: clamp(48px, 7vw, 96px);
  padding-bottom: clamp(48px, 7vw, 96px);
  background: var(--bg);
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-inner.about-ai-grid { grid-template-columns: 1fr !important; }
}
.hero-inner > * { min-width: 0; }
.hero h1 { margin-bottom: 24px; }
.hero p.lead { margin-bottom: 32px; max-width: 58ch; }
.hero .eyebrow { margin-bottom: 20px; }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Browser mockup inner layout — sidebar + content, collapses to single column on mobile */
.hero-mockup-grid {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  min-height: 380px;
}
@media (max-width: 720px) {
  .hero-mockup-grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-mockup-grid > aside { display: none !important; }
}

/* Narrow-viewport polish */
@media (max-width: 480px) {
  .hero { padding-top: 32px; padding-bottom: 32px; }
  .hero p.lead { font-size: 15.5px; }
  .hero .cta-row .btn-lg { padding: 14px 22px; font-size: 15px; flex: 1; }
  .stats-strip { padding: 24px 18px; gap: 16px; }
  .stat .lbl { font-size: 12.5px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ========== Section header ========== */
.section-head {
  display: flex; flex-direction: column; gap: 14px;
  max-width: 60ch;
  margin-bottom: 52px;
}
.section-head .eyebrow { margin-bottom: 0; }

/* ========== Logo cloud ========== */
.logo-cloud {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 32px;
  align-items: center;
}
@media (max-width: 900px) { .logo-cloud { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.logo-cloud .logo-mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink-400);
  text-align: center;
  letter-spacing: -0.02em;
  filter: grayscale(1);
  opacity: 0.85;
  transition: opacity .15s ease, filter .15s ease;
}
.logo-cloud .logo-mark:hover { opacity: 1; filter: grayscale(0); color: var(--ink-700); }

/* Client logo marquee — infinite horizontal scroll */
.logos-marquee {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
}
.logos-track {
  display: flex;
  gap: 20px;
  width: max-content;
  align-items: center;
  animation: logos-scroll 32s linear infinite;
}
.logos-track:hover { animation-play-state: paused; }
.logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 160px;
  height: 80px;
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.logo-card:hover {
  border-color: var(--brand-300);
  box-shadow: 0 4px 14px -4px rgba(0,0,0,0.08);
}
.logo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@keyframes logos-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logos-track { animation: none; }
}

/* Parallel-run CTA (reusable partial: _ParallelRunCta) */
.prun-cta {
  background: var(--ink-900);
  color: #fff;
  border-radius: var(--r-xl);
  padding: clamp(36px, 5vw, 60px);
  background-image: radial-gradient(ellipse 60% 80% at 50% 120%, rgba(20,166,170,0.4), transparent 60%);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(36px, 5vw, 60px);
  align-items: end;
}
.prun-copy { display: flex; flex-direction: column; gap: 14px; }
.prun-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-300);
  font-weight: 600;
}
.prun-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.4vw, 36px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0;
}
.prun-sub {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-300);
  margin: 0;
  max-width: 52ch;
}
.prun-bullets {
  margin: 12px 0 0;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-300);
}
.prun-bullets li { margin-bottom: 4px; }
.prun-bullets li::marker { color: var(--teal-400); }

.prun-form {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-lg);
  padding: 24px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.prun-field { display: flex; flex-direction: column; gap: 4px; }
.prun-field span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-300);
  font-weight: 600;
}
.prun-field input {
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-md);
  font-size: 14px;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  font-family: inherit;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.prun-field input::placeholder { color: rgba(255, 255, 255, 0.4); }
.prun-field input:focus {
  border-color: var(--teal-400);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 0 0 3px rgba(20, 166, 170, 0.25);
}
.prun-submit {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}
.prun-fine {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  text-align: center;
  line-height: 1.5;
}

@media (max-width: 880px) {
  .prun-cta { grid-template-columns: 1fr; padding: 28px; }
  .prun-sub, .prun-bullets { max-width: none; }
}

/* ========== Stats strip ========== */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 32px;
  background: var(--ink-900);
  color: #fff;
  border-radius: var(--r-xl);
}
@media (max-width: 720px) { .stats-strip { grid-template-columns: repeat(2, 1fr); } }
.stat .num {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 44px); /* min 26px so lakh-style figures (15,00,000+) fit two-across on phones */
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #fff;
  white-space: nowrap;
}
.stat .num em { font-style: normal; color: var(--brand-300); }
.stat .lbl { font-size: 13px; color: var(--ink-300); margin-top: 4px; }

/* ========== Product browser mock ========== */
.browser {
  border: 1px solid var(--ink-200);
  border-radius: var(--r-lg);
  background: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.browser-bar {
  height: 36px;
  background: var(--ink-50);
  border-bottom: 1px solid var(--ink-100);
  display: flex; align-items: center;
  padding: 0 14px;
  gap: 6px;
}
.browser-bar i {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ink-200);
  display: inline-block;
}
.browser-bar i:nth-child(1) { background: #ff5f57; }
.browser-bar i:nth-child(2) { background: #febc2e; }
.browser-bar i:nth-child(3) { background: #28c840; }
.browser-bar .url {
  margin-left: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-500);
  background: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  flex: 1;
  text-align: center;
}
.browser-body { padding: 0; }

/* ========== Forms ========== */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-700);
}
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-sm);
  background: #fff;
  /* 16px prevents iOS Safari from auto-zooming on focus.
     Anything <16px triggers the zoom-to-input behaviour on touch devices. */
  font-size: 16px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-100);
}
.field textarea { resize: vertical; min-height: 110px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }

/* ========== Image placeholder (striped) ========== */
.img-ph {
  position: relative;
  border-radius: var(--r-md);
  background:
    repeating-linear-gradient(135deg, #f0f4f5 0 12px, #e6ecee 12px 24px);
  border: 1px solid var(--ink-100);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-500);
  text-align: center;
  padding: 24px;
  letter-spacing: 0.04em;
}

/* ========== Link util ========== */
.kbd {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 6px;
  border: 1px solid var(--ink-200);
  border-radius: 4px;
  background: var(--ink-50);
  color: var(--ink-700);
}

/* Anchor with smooth feel */
.anchor-target { scroll-margin-top: 96px; }

/* Misc */
.divider { height: 1px; background: var(--ink-100); border: 0; margin: 0; }
.spacer-sm { height: 16px; } .spacer-md { height: 32px; } .spacer-lg { height: 64px; }
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mb-sm { margin-bottom: 12px; }
.mb-md { margin-bottom: 24px; }
.mb-lg { margin-bottom: 48px; }

/* ============================================================
   Product page patterns (used across all 4 product pages)
   ============================================================ */

/* Centered section heading */
.section-head.center {
  text-align: center;
  margin-inline: auto;
  align-items: center;
}

/* Module spotlight — alternating split-screen feature blocks */
.spotlight {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding-block: clamp(48px, 6vw, 88px);
}
.spotlight + .spotlight { border-top: 1px dashed var(--ink-100); }
.spotlight > * { min-width: 0; }
/* A spotlight that opens/closes its section shouldn't stack its own
   padding on top of the section padding — that triples the whitespace. */
.spotlight:first-child { padding-top: 0; }
.spotlight:last-child { padding-bottom: 0; }
.spotlight.reverse .sl-content { order: 2; }
.spotlight.reverse .sl-visual  { order: 1; }
@media (max-width: 880px) {
  .spotlight { grid-template-columns: 1fr; gap: 32px; padding-block: 48px; }
  .spotlight.reverse .sl-content,
  .spotlight.reverse .sl-visual { order: 0; }
}
.spotlight .sl-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--brand-700);
  text-transform: uppercase;
  padding: 4px 10px;
  background: var(--brand-50);
  border-radius: var(--r-pill);
  margin-bottom: 16px;
}
.spotlight h2,
.spotlight h3 { margin-bottom: 14px; }
.spotlight p.sl-lead {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-600);
  max-width: 50ch;
}
.spotlight ul.bullets {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14.5px;
  color: var(--ink-700);
}
.spotlight ul.bullets li {
  position: relative;
  padding-left: 32px;
  line-height: 1.5;
}
/* Check mark positioned, not a flex item, so a bold lead-in ("Step 2:") and the
   text after it flow as one paragraph instead of splitting into two columns. */
.spotlight ul.bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand-500) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 6.5l3 3 5-6' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / 12px;
  margin-top: 2px;
}

/* Comparison table */
.compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14.5px;
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.compare th, .compare td {
  padding: 18px 22px;
  border-bottom: 1px solid var(--ink-100);
  text-align: left;
  vertical-align: middle;
}
.compare thead th {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-500);
  background: var(--bg-soft);
}
.compare thead th.us {
  color: var(--teal-800);
  background: var(--teal-50);
  border-bottom-color: var(--teal-200);
}
.compare tbody td.us {
  background: var(--teal-50);
  color: var(--ink-900);
  font-weight: 500;
}
.compare tbody tr:last-child td { border-bottom: 0; }
.compare td.row-label {
  font-weight: 500;
  color: var(--ink-800);
  background: var(--bg-soft);
}
.compare td .yes { color: var(--green); font-weight: 600; }
.compare td .no  { color: var(--ink-400); }
.compare td .partial { color: var(--amber); }
@media (max-width: 720px) {
  .compare { font-size: 13px; }
  .compare th, .compare td { padding: 12px 14px; }
}

/* FAQ accordion */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-list details {
  border-bottom: 1px solid var(--ink-100);
}
.faq-list details:first-child { border-top: 1px solid var(--ink-100); }
.faq-list details summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 4px;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-900);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  transition: color .15s ease;
}
.faq-list details summary:hover { color: var(--brand-700); }
.faq-list details summary::-webkit-details-marker { display: none; }
.faq-list details summary::after {
  content: "";
  flex-shrink: 0;
  width: 10px; height: 10px;
  border-right: 1.5px solid var(--ink-500);
  border-bottom: 1.5px solid var(--ink-500);
  transform: rotate(45deg);
  transition: transform .2s ease;
  margin-right: 6px;
}
.faq-list details[open] summary::after {
  transform: rotate(-135deg);
  border-color: var(--brand-700);
}
.faq-list details > div.faq-body {
  padding: 0 4px 24px;
  color: var(--ink-600);
  font-size: 15px;
  line-height: 1.65;
  max-width: 70ch;
}

/* Integration tiles */
.integration-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
@media (max-width: 880px) { .integration-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .integration-grid { grid-template-columns: repeat(2, 1fr); } }
.integration-tile {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  padding: 22px 14px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  min-height: 110px;
  justify-content: center;
}
.integration-tile:hover {
  border-color: var(--brand-300);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.integration-tile .name {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-800);
  letter-spacing: -0.01em;
}
.integration-tile .kind {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
}

/* Timeline (day-in-the-life / lifecycle) */
.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 28px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: var(--ink-200);
}
.timeline .tl-item {
  position: relative;
  padding: 16px 0 16px 14px;
  border-bottom: 1px dashed var(--ink-100);
}
.timeline .tl-item:last-child { border-bottom: 0; }
.timeline .tl-item::before {
  content: "";
  position: absolute;
  left: -27px;
  top: 24px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--brand-500);
  box-shadow: 0 0 0 3px rgba(230, 53, 34, 0.10);
}
.timeline .tl-time {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-700);
  margin-bottom: 4px;
}
.timeline .tl-title {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 4px;
}
.timeline .tl-desc {
  font-size: 13.5px;
  color: var(--ink-600);
  line-height: 1.55;
}

/* Outcome stat blocks */
.outcome-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 720px) { .outcome-row { grid-template-columns: 1fr; } }
.outcome {
  padding: 28px;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  background: #fff;
  transition: border-color .15s ease, transform .15s ease;
}
.outcome:hover { border-color: var(--brand-200); transform: translateY(-2px); }
.outcome .num {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.2vw, 50px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink-900);
  line-height: 1;
}
.outcome .num em { font-style: normal; color: var(--brand-600); font-weight: 600; }
.outcome .lbl {
  font-size: 13.5px;
  color: var(--ink-600);
  margin-top: 14px;
  line-height: 1.55;
}

/* Inline testimonial */
.mini-quote {
  background: var(--bg-soft);
  border-left: 3px solid var(--brand-500);
  padding: 24px 28px;
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.mini-quote .q {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: -0.012em;
  color: var(--ink-900);
  line-height: 1.5;
  margin-bottom: 14px;
}
.mini-quote .who {
  font-size: 13px;
  color: var(--ink-500);
  display: flex;
  align-items: center;
  gap: 12px;
}
.mini-quote .who strong { color: var(--ink-800); font-weight: 600; }
.mini-quote .who .av {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ink-200);
  flex-shrink: 0;
}

/* Coverage matrix (board × subject etc.) */
.matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.matrix th, .matrix td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--ink-100);
  border-right: 1px solid var(--ink-100);
  text-align: center;
}
.matrix th:last-child, .matrix td:last-child { border-right: 0; }
.matrix tbody tr:last-child td { border-bottom: 0; }
.matrix thead th {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-500);
  background: var(--bg-soft);
}
.matrix tbody th {
  text-align: left;
  font-weight: 500;
  color: var(--ink-800);
  background: var(--bg-soft);
  font-size: 13.5px;
}
.matrix td.tick {
  color: var(--teal-700);
  font-weight: 600;
}
.matrix td.dot {
  color: var(--ink-300);
}

/* Chip strip (for board names, subjects, etc.) */
.chip-strip {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.chip {
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1px solid var(--ink-200);
  font-size: 13px;
  color: var(--ink-700);
  font-weight: 500;
  transition: all .15s ease;
}
.chip:hover { border-color: var(--brand-400); color: var(--brand-700); background: var(--brand-50); }
.chip.is-active { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }

/* Sub-product navigation — sticky horizontal bar shown on every product + sub-page */
.subproduct-nav {
  position: sticky;
  top: 68px;
  z-index: 40;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--ink-100);
}
.subproduct-nav .spn-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 56px;
  overflow: hidden;
}
/* Right-edge fade indicates the link row is horizontally scrollable when items overflow.
   Toggled on by JS when overflow is detected, so it doesn't show needlessly. */
.subproduct-nav .spn-inner.is-overflowing::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 48px; height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.96) 70%);
  pointer-events: none;
  z-index: 1;
}
.subproduct-nav .spn-inner.is-overflowing.scrolled-end::after { opacity: 0; }
/* Left-edge fade once the row is scrolled, so a half-visible link reads as "more this way", not as clipped text. */
.subproduct-nav .spn-inner.scrolled-mid .spn-links {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 36px);
  mask-image: linear-gradient(to right, transparent 0, #000 36px);
}
.subproduct-nav .spn-product {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 24px;
  border-right: 1px solid var(--ink-100);
  flex-shrink: 0;
}
.subproduct-nav .spn-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--brand-50);
  color: var(--brand-700);
  display: grid; place-items: center;
  font-size: 14px;
}
.subproduct-nav .spn-product strong {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
.subproduct-nav .spn-product small {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-top: 1px;
}
.subproduct-nav .spn-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  align-self: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.subproduct-nav .spn-links::-webkit-scrollbar { width: 0; height: 0; }
.subproduct-nav .spn-links a {
  padding: 8px 14px;
  font-size: 13.5px;
  color: var(--ink-600);
  border-radius: var(--r-sm);
  white-space: nowrap;
  font-weight: 500;
  transition: all .15s ease;
  text-decoration: none;
}
.subproduct-nav .spn-links a:hover {
  background: var(--ink-50);
  color: var(--ink-900);
}
.subproduct-nav .spn-links a.active {
  background: var(--brand-50);
  color: var(--brand-800);
  position: relative;
}
.subproduct-nav .spn-links a.active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -10px;
  height: 2px;
  background: var(--brand-600);
  border-radius: 2px;
}
@media (max-width: 1440px) {
  .subproduct-nav .spn-product small { display: none; }
  .subproduct-nav .spn-inner { gap: 16px; }
  .subproduct-nav .spn-product { padding-right: 16px; }
  .subproduct-nav .spn-links a { padding: 8px 10px; }
}
/* Note: keep top:68px on every breakpoint. The .site-header is also
   sticky at top:0 and stays 68px tall on mobile, so a `top:0` here
   would make the two sticky bars overlap at the top of the viewport. */
@media (max-width: 720px) {
  .subproduct-nav .spn-product { padding-right: 12px; }
  .subproduct-nav .spn-product strong { font-size: 13px; }
  .subproduct-nav .spn-inner { height: 48px; gap: 12px; }
}
/* Phone — drop the product title text from the sub-product nav, leave just
   the icon as a visual anchor. The user got here by explicitly tapping into
   a product (drawer / hero / mega-menu), so the title is redundant context;
   reclaiming the ~120–140px gives the scrollable link strip room to show
   3–4 links instead of 1.5 + a clipped half-link. */
@media (max-width: 600px) {
  .subproduct-nav .spn-product strong,
  .subproduct-nav .spn-product small { display: none; }
  .subproduct-nav .spn-product {
    padding-right: 12px;
    border-right: none;
    gap: 0;
  }
}

/* Sub-page index — overview page uses to link to each sub-feature page */
.subpage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 880px) { .subpage-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .subpage-grid { grid-template-columns: 1fr; } }
.subpage-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: all .15s ease;
  position: relative;
  min-height: 168px;
}
.subpage-card:hover {
  border-color: var(--brand-300);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.subpage-card .num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--brand-700);
  text-transform: uppercase;
}
.subpage-card h4 {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
.subpage-card p {
  font-size: 13.5px;
  color: var(--ink-600);
  line-height: 1.55;
  margin-top: auto;
}
.subpage-card .arr {
  position: absolute;
  bottom: 22px;
  right: 22px;
  color: var(--brand-700);
  opacity: 0;
  transition: all .15s ease;
}
.subpage-card:hover .arr { opacity: 1; transform: translateX(3px); }

/* Breadcrumb back-link on sub-pages */
.subpage-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-700);
  margin-bottom: 16px;
  transition: color .15s ease;
}
.subpage-back:hover { color: var(--brand-800); }
.subpage-back::before { content: "←"; font-family: var(--font-sans); font-size: 14px; }

/* Phone mockup (for mobile app sub-pages) */
.phone {
  width: 280px;
  margin: 0 auto;
  border: 8px solid var(--ink-900);
  border-radius: 36px;
  background: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: relative;
  aspect-ratio: 9/19;
}
.phone::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px; height: 18px;
  background: var(--ink-900);
  border-radius: 0 0 14px 14px;
  z-index: 2;
}
.phone .screen {
  width: 100%; height: 100%;
  background: var(--bg-soft);
  padding: 38px 14px 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 12px;
}
.phone .status-bar {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-700);
  margin-bottom: 4px;
  font-weight: 600;
}
.phone-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Pain-vs-gain side-by-side */
.pain-gain {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 720px) { .pain-gain { grid-template-columns: 1fr; } }
.pain, .gain {
  padding: 32px;
  border-radius: var(--r-lg);
  border: 1px solid var(--ink-100);
}
.pain { background: var(--bg-soft); }
.gain { background: linear-gradient(180deg, #fff, var(--teal-50)); border-color: var(--teal-200); }
.pain h4, .gain h4 { font-size: 16px; margin-bottom: 16px; }
.pain ul, .gain ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14.5px;
}
.pain li { color: var(--ink-600); padding-left: 22px; position: relative; }
.pain li::before { content: "✕"; position: absolute; left: 0; color: var(--rose); font-weight: 600; }
.gain li { color: var(--ink-800); padding-left: 22px; position: relative; }
.gain li::before { content: "✓"; position: absolute; left: 0; color: var(--teal-600); font-weight: 700; }

/* ============================================================
   Cookie consent banner — appears bottom-fixed until the user
   makes a choice; rendered server-side only when GA4 is enabled.
   ============================================================ */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: var(--ink-900);
  color: #fff;
  border-top: 1px solid var(--ink-800);
  box-shadow: var(--shadow-lg);
}
.cookie-banner-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 0;
  flex-wrap: wrap;
}
.cookie-banner p {
  margin: 0;
  flex: 1 1 320px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-200);
}
.cookie-banner p a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-banner-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.cookie-banner .btn-ghost {
  border-color: var(--ink-600);
  color: #fff;
}
.cookie-banner .btn-ghost:hover {
  background: var(--ink-800);
  border-color: var(--ink-500);
}

/* ============================================================
   Legal / long-form pages — Terms, Privacy, Refund.
   Comfortable reading width with strong heading hierarchy.
   ============================================================ */
.legal {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-700);
}
.legal h2 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
  color: var(--ink-900);
  margin: 48px 0 12px;
  letter-spacing: -0.015em;
  scroll-margin-top: 80px;
}
.legal h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-900);
  margin: 28px 0 8px;
}
.legal p { margin: 0 0 16px; }
.legal ul, .legal ol {
  margin: 0 0 16px;
  padding-left: 22px;
}
.legal li { margin-bottom: 8px; }
.legal a {
  color: var(--brand-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal a:hover { color: var(--brand-700); }
.legal strong { color: var(--ink-900); font-weight: 600; }
.legal hr {
  border: 0;
  border-top: 1px solid var(--ink-100);
  margin: 48px 0;
}
.legal .last-updated,
.last-updated {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--ink-50);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-pill);
  font-size: 13px;
  color: var(--ink-600);
  margin: 12px 0 24px;
}
.legal-toc {
  background: var(--bg-soft);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  padding: 20px 24px;
  margin: 32px 0;
}
.legal-toc-title {
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-500);
  margin: 0 0 12px;
}
.legal-toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 6px 24px;
}
.legal-toc li { margin: 0; }
.legal-toc a {
  font-size: 14px;
  color: var(--ink-700);
  text-decoration: none;
  display: block;
  padding: 4px 0;
}
.legal-toc a:hover {
  color: var(--brand-600);
  text-decoration: underline;
}
.legal-related {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--ink-100);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.legal-related a {
  display: block;
  padding: 16px 20px;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  color: var(--ink-800);
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.legal-related a:hover {
  border-color: var(--brand-300);
  transform: translateY(-2px);
}
.legal-related strong { display: block; color: var(--ink-900); font-size: 15px; }
.legal-related small { color: var(--ink-500); font-size: 13px; }

/* Product icons (ProductIcons.cs). Red stays the brand colour (logo, primary buttons, links); each product has
   its own accent so the four read apart at a glance and the pages are not red throughout. */
:root {
  --p-skoraai: #6d4ae0;    --p-skoraai-bg: #f1edfd;
  --p-teachsmart: #0f8a8e; --p-teachsmart-bg: #e6f7f7;
  --p-education: #2563eb;  --p-education-bg: #eaf1fe;
  --p-hrms: #0f9d63;       --p-hrms-bg: #e7f6ef;
}
.pi { display: inline-grid; place-items: center; flex-shrink: 0; border-radius: 10px; }
.pi svg { width: 55%; height: 55%; }
.pi-sm { width: 28px; height: 28px; border-radius: 8px; }
.pi-md { width: 40px; height: 40px; }
.pi-lg { width: 48px; height: 48px; border-radius: 12px; }
.pi-skoraai    { color: var(--p-skoraai);    background: var(--p-skoraai-bg); }
.pi-teachsmart { color: var(--p-teachsmart); background: var(--p-teachsmart-bg); }
.pi-education  { color: var(--p-education);  background: var(--p-education-bg); }
.pi-hrms       { color: var(--p-hrms);       background: var(--p-hrms-bg); }
/* mega menu: icon beside the product name and its line */
.dropdown.mega .mega-col a.mega-head.has-pi { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 2px; align-items: center; }
.dropdown.mega .mega-col a.mega-head.has-pi .pi { grid-row: span 2; align-self: start; }
.dropdown.mega .mega-head.has-pi small { white-space: normal; line-height: 1.4; min-height: 2.8em; } /* two lines reserved so the four columns line up */

/* "Coming soon" tag for features that are built but not yet available to customers */
.soon { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: var(--r-pill); background: var(--ink-100); color: var(--ink-700); font-size: 11px; font-weight: 600; line-height: 1.6; letter-spacing: .02em; text-transform: none; vertical-align: middle; white-space: nowrap; }

/* reCAPTCHA v2 is a fixed 304px widget; on narrow phones it is wider than the form card. Scale it to fit. */
@media (max-width: 400px) {
  .g-recaptcha { transform: scale(0.9); transform-origin: 0 0; }
}

/* Blog explainer diagrams (bd-*)
   One inline diagram per blog post: real text in HTML lists, styled as steps, comparisons or a hub.
   Topic colour comes from the modifier on the figure (.bd-skora / .bd-teach / .bd-erp / .bd-hrms);
   brand red is kept for the single key step (.is-key). Steps stack vertically at 640px and below. */
.bd-figure {
  --bd-c: #6d4ae0; --bd-c-soft: #f1edfd; --bd-key: #e63522; --bd-ink: #1f2430;
  --bd-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M1 6h16M12 1.5 17 6l-5 4.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --bd-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --bd-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  margin: 40px 0;
  padding: 24px 24px 18px;
  background: #faf7f2;
  color: var(--bd-ink);
  border: 1px solid var(--ink-200);
  border-radius: 16px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.45;
  max-width: 100%;
  overflow-wrap: break-word;
}
.bd-figure.bd-skora { --bd-c: #6d4ae0; --bd-c-soft: #f1edfd; }
.bd-figure.bd-teach { --bd-c: #0f8a8e; --bd-c-soft: #e6f7f7; }
.bd-figure.bd-erp   { --bd-c: #2563eb; --bd-c-soft: #eaf1fe; }
.bd-figure.bd-hrms  { --bd-c: #0f9d63; --bd-c-soft: #e7f6ef; }

.bd-figure .bd-title {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 18px;
  font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em;
  color: var(--bd-ink);
}
.bd-figure .bd-title::before { content: ""; flex: 0 0 18px; height: 3px; margin-top: .6em; border-radius: 2px; background: var(--bd-c); }
.bd-figure figcaption {
  margin: 18px 0 0; padding: 12px 0 0;
  border-top: 1px solid var(--ink-200);
  font-size: 13.5px; line-height: 1.55; color: var(--ink-500); font-style: normal; text-align: left;
}
.bd-figure .bd-label {
  display: block;
  font-family: var(--font-display); font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--bd-ink);
}
.bd-figure .bd-note { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--ink-500); }
.bd-figure .bd-step .soon, .bd-figure .bd-node .soon { margin: 6px 0 0; justify-self: start; }

/* Steps: a numbered flow, horizontal on desktop */
.bd-figure .bd-steps {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 24px; margin: 0; padding: 0; list-style: none; counter-reset: bd-step;
}
.bd-figure .bd-step {
  position: relative; margin: 0; padding: 12px 11px 13px;
  background: #fff; border: 1px solid var(--ink-200); border-radius: 12px;
  counter-increment: bd-step;
}
.bd-figure .bd-step::before {
  content: counter(bd-step);
  display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 9px;
  border-radius: 50%; background: var(--bd-c); color: #fff;
  font-family: var(--font-display); font-size: 12.5px; font-weight: 600; line-height: 1;
}
.bd-figure .bd-step:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; right: -22px; width: 20px; height: 12px; margin-top: -6px;
  background: var(--bd-c); -webkit-mask: var(--bd-arrow) center / contain no-repeat; mask: var(--bd-arrow) center / contain no-repeat;
}
.bd-figure .bd-step.is-key { border-color: rgba(230, 53, 34, .5); box-shadow: 0 0 0 3px rgba(230, 53, 34, .08); }
.bd-figure .bd-step.is-key::before { background: var(--bd-key); }
.bd-figure .bd-step.is-soon { background: transparent; border-style: dashed; border-color: var(--ink-300); }
.bd-figure .bd-step.is-soon::before { background: var(--ink-400); }
/* parts of a whole (no order): square markers, no arrows */
.bd-figure .bd-steps.is-parts { gap: 12px; }
.bd-figure .bd-steps.is-parts .bd-step::before { content: ""; width: 12px; height: 12px; border-radius: 3px; margin-bottom: 10px; }
.bd-figure .bd-steps.is-parts .bd-step::after { content: none; }
/* muted flow, for the "old way" lane */
.bd-figure .bd-steps.is-muted .bd-step { background: transparent; border-style: dashed; border-color: var(--ink-300); }
.bd-figure .bd-steps.is-muted .bd-step::before { background: var(--ink-400); }
.bd-figure .bd-steps.is-muted .bd-step:not(:last-child)::after { background: var(--ink-300); }

/* Lanes: two flows, one above the other */
.bd-figure .bd-lanes { display: grid; gap: 18px; }
.bd-figure .bd-lane-hd {
  display: block; margin: 0 0 8px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500);
}
.bd-figure .bd-lane.is-new .bd-lane-hd { color: var(--bd-c); }

/* Fork: a final step that splits into two outcomes */
.bd-figure .bd-steps.has-fork { align-items: start; grid-auto-flow: row; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.9fr); }
.bd-figure .bd-outs { display: grid; gap: 8px; margin-top: 8px; }
.bd-figure .bd-out { padding: 8px 10px; border-radius: 9px; background: var(--bd-c-soft); }
.bd-figure .bd-out.is-key { background: #fdeeec; box-shadow: inset 3px 0 0 var(--bd-key); }
.bd-figure .bd-out .bd-label { font-size: 13.5px; }

/* Compare: two panels side by side */
.bd-figure .bd-compare { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); gap: 10px; align-items: stretch; }
.bd-figure .bd-side { padding: 14px 14px 12px; border: 1px solid var(--ink-200); border-radius: 12px; background: #fff; }
.bd-figure .bd-side.is-before { background: transparent; border-style: dashed; border-color: var(--ink-300); }
.bd-figure .bd-side-hd { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); }
.bd-figure .bd-side.is-after .bd-side-hd { color: var(--bd-c); }
.bd-figure .bd-side > .bd-label { margin: 4px 0 10px; font-size: 16px; }
.bd-figure .bd-vs { align-self: center; justify-self: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bd-c); position: relative; }
.bd-figure .bd-vs::after { content: ""; position: absolute; inset: 8px 6px; background: #fff; -webkit-mask: var(--bd-arrow) center / contain no-repeat; mask: var(--bd-arrow) center / contain no-repeat; }
.bd-figure .bd-list { margin: 0; padding: 0; list-style: none; }
.bd-figure .bd-list li { position: relative; margin: 0 0 7px; padding-left: 22px; font-size: 13.5px; line-height: 1.45; color: var(--ink-700); }
.bd-figure .bd-list li:last-child { margin-bottom: 0; }
.bd-figure .bd-list li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 15px; height: 15px;
  background: var(--bd-c); -webkit-mask: var(--bd-check) center / contain no-repeat; mask: var(--bd-check) center / contain no-repeat;
}
.bd-figure .is-before .bd-list li::before { background: var(--ink-400); -webkit-mask-image: var(--bd-cross); mask-image: var(--bd-cross); }
.bd-figure .bd-list li.is-key { color: var(--bd-ink); font-weight: 600; }
.bd-figure .bd-list li.is-key::before { background: var(--bd-key); }

.bd-figure .bd-list li strong { display: block; color: var(--bd-ink); font-weight: 600; }
.bd-figure .bd-compare.is-hub { grid-template-columns: minmax(0, .75fr) 28px minmax(0, 1.4fr); }
.bd-figure .bd-compare.is-hub .bd-chips { grid-template-columns: minmax(0, 1fr); }
.bd-figure .bd-compare.is-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

/* Columns: one panel per group of people */
.bd-figure .bd-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bd-figure .bd-col { padding: 14px 13px 13px; background: #fff; border: 1px solid var(--ink-200); border-radius: 12px; }
.bd-figure .bd-col-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.bd-figure .bd-col-hd .bd-label { font-size: 15.5px; }
.bd-figure .bd-dot { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--bd-c-soft); color: var(--bd-c); }
.bd-figure .bd-dot svg { width: 15px; height: 15px; }

/* Fan: one source, several outputs, one result */
.bd-figure .bd-fan { display: grid; grid-template-columns: minmax(0, .9fr) 20px minmax(0, 2fr) 20px minmax(0, .9fr); gap: 10px; align-items: center; }
.bd-figure .bd-node { padding: 12px 11px; background: #fff; border: 1px solid var(--ink-200); border-radius: 12px; }
.bd-figure .bd-node.is-key { border-color: rgba(230, 53, 34, .5); box-shadow: 0 0 0 3px rgba(230, 53, 34, .08); }
.bd-figure .bd-node.is-source { background: var(--bd-c); border-color: var(--bd-c); }
.bd-figure .bd-node.is-source .bd-label, .bd-figure .bd-node.is-source .bd-note { color: #fff; }
.bd-figure .bd-node.is-source .bd-note { opacity: .88; }
.bd-figure .bd-outputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.bd-figure .bd-outputs li { margin: 0; padding: 9px 10px; border-radius: 10px; background: var(--bd-c-soft); }
.bd-figure .bd-outputs .bd-label { font-size: 13.5px; }
.bd-figure .bd-arrow { display: block; width: 20px; height: 12px; background: var(--bd-c); -webkit-mask: var(--bd-arrow) center / contain no-repeat; mask: var(--bd-arrow) center / contain no-repeat; }

/* Hub: one record in the middle, the rest of the school around it */
.bd-figure .bd-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.bd-figure .bd-chips li { margin: 0; padding: 8px 9px; border: 1px dashed var(--ink-300); border-radius: 9px; font-size: 12.5px; line-height: 1.35; color: var(--ink-700); }
.bd-figure .bd-chips li small { display: block; color: var(--ink-500); font-size: 11.5px; }
.bd-figure .bd-hub-wrap { position: relative; }
.bd-figure .bd-hub-wrap svg.bd-spokes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; }
.bd-figure .bd-hub-wrap svg.bd-spokes line { stroke: var(--bd-c); stroke-width: 1.5; stroke-dasharray: 3 3; opacity: .6; }
.bd-figure .bd-hub { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(64px, auto)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.bd-figure .bd-hub li { margin: 0; align-self: center; padding: 8px 6px; border: 1px solid var(--ink-200); border-radius: 9px; background: #fff; text-align: center; font-size: 12.5px; line-height: 1.3; color: var(--ink-700); }
.bd-figure .bd-hub li.bd-hub-core {
  grid-column: 2; grid-row: 2; justify-self: center;
  display: grid; place-items: center; width: 88px; height: 88px; padding: 8px; border: 0; border-radius: 50%;
  background: var(--bd-key); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 13px; line-height: 1.25;
  box-shadow: 0 0 0 6px rgba(230, 53, 34, .12);
}
.bd-figure .bd-hub .bd-h1 { grid-column: 1; grid-row: 1; } .bd-figure .bd-hub .bd-h2 { grid-column: 3; grid-row: 1; }
.bd-figure .bd-hub .bd-h3 { grid-column: 1; grid-row: 2; } .bd-figure .bd-hub .bd-h4 { grid-column: 3; grid-row: 2; }
.bd-figure .bd-hub .bd-h5 { grid-column: 1; grid-row: 3; } .bd-figure .bd-hub .bd-h6 { grid-column: 3; grid-row: 3; }

/* Stages: numbered steps grouped into rows */
.bd-figure .bd-stages { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.bd-figure .bd-stage { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 14px; align-items: start; margin: 0; padding: 12px 14px; background: #fff; border: 1px solid var(--ink-200); border-radius: 12px; }
.bd-figure .bd-stage-hd .bd-label { color: var(--bd-c); }
.bd-figure .bd-stage-hd .bd-note { margin-top: 2px; }
.bd-figure .bd-substeps { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0; padding: 0; list-style: none; }
.bd-figure .bd-substeps li { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 7px; margin: 0; padding: 4px 11px 4px 4px; border-radius: 999px; background: var(--bd-c-soft); font-size: 13px; line-height: 1.3; color: var(--bd-ink); }
.bd-figure .bd-substeps .bd-n { flex: 0 0 auto; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: var(--bd-c); color: #fff; font-size: 11px; font-weight: 600; }
.bd-figure .bd-substeps li.is-key { background: #fdeeec; }
.bd-figure .bd-substeps li.is-key .bd-n { background: var(--bd-key); }
.bd-figure .bd-substeps .soon { margin: 0; background: #fff; }

@media (max-width: 640px) {
  .bd-figure { margin: 32px 0; padding: 18px 16px 14px; }
  .bd-figure .bd-title { font-size: 16.5px; }
  .bd-figure .bd-steps, .bd-figure .bd-steps.has-fork { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .bd-figure .bd-steps.is-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bd-figure .bd-steps.is-parts .bd-step:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .bd-figure .bd-step { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; align-items: start; align-content: start; padding: 11px 12px; }
  .bd-figure .bd-step::before { grid-column: 1; grid-row: 1 / span 4; margin: 0; }
  .bd-figure .bd-step > * { grid-column: 2; }
  .bd-figure .bd-step:not(:last-child)::after { top: auto; right: auto; left: 17px; bottom: -17px; margin: 0; transform: rotate(90deg); width: 16px; height: 10px; }
  .bd-figure .bd-steps.is-parts .bd-step { grid-template-columns: 12px minmax(0, 1fr); column-gap: 9px; }
  .bd-figure .bd-steps.is-parts .bd-step::before { margin-top: 3px; }
  .bd-figure .bd-compare, .bd-figure .bd-compare.is-hub, .bd-figure .bd-compare.is-pair { grid-template-columns: minmax(0, 1fr); }
  .bd-figure .bd-compare.is-hub .bd-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bd-figure .bd-vs { transform: rotate(90deg); }
  .bd-figure .bd-cols { grid-template-columns: minmax(0, 1fr); }
  .bd-figure .bd-fan { grid-template-columns: minmax(0, 1fr); }
  .bd-figure .bd-fan .bd-arrow { justify-self: center; transform: rotate(90deg); }
  .bd-figure .bd-stage { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}