/* ============================================================
   Digiclove — site-wide stylesheet
   Direction: trustworthy enterprise. Brand red (#e63522) for
   identity/accents/interaction; ink-900 carries primary CTAs;
   teal kept for info/success/comparison states only.
   ============================================================ */

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

  /* Neutrals — cool tinted */
  --ink-900: #0a1820;
  --ink-800: #11242e;
  --ink-700: #1d3540;
  --ink-600: #344e59;
  --ink-500: #5a727c;
  --ink-400: #8a9aa2;
  --ink-300: #b8c3c8;
  --ink-200: #dde3e6;
  --ink-100: #eef2f4;
  --ink-50:  #f6f8f9;
  --bg:      #ffffff;
  --bg-soft: #f7fafa;

  /* 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(64px, 8vw, 112px);
}

/* 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%; }
/* 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: 600; letter-spacing: -0.02em; color: var(--ink-900); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

/* Type scale */
.h-display { font-size: clamp(30px, 6.4vw, 76px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 600; }
.h-1 { font-size: clamp(26px, 4.6vw, 54px); line-height: 1.08; letter-spacing: -0.03em; }
.h-2 { font-size: clamp(22px, 3.4vw, 40px); line-height: 1.12; letter-spacing: -0.025em; }
.h-3 { font-size: clamp(18px, 2.2vw, 26px); line-height: 1.25; letter-spacing: -0.015em; }
.h-4 { font-size: 17px; line-height: 1.35; letter-spacing: -0.01em; font-weight: 600; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--brand-700);
}
.lead { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; color: var(--ink-600); }
.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(48px, 6vw, 72px); }

/* 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: 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-primary:hover {
  background: #050d12;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.12) inset,
    0 10px 26px -8px rgba(10, 24, 32, 0.55),
    0 0 0 3px rgba(230, 53, 34, 0.18);
}

.btn-secondary {
  background: var(--brand-500);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 6px 16px -8px rgba(230, 53, 34, 0.45);
}
.btn-secondary:hover { background: var(--brand-600); box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 10px 24px -8px rgba(230, 53, 34, 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); }
.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: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  padding: 28px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.card:hover { border-color: var(--ink-200); 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 .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;
}
.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 {
  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; gap: 10px; padding: 16px 0 32px; }

/* 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;
}
.site-footer h5 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-400);
  margin-bottom: 16px;
}
.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: 10px; }
.site-footer a { color: var(--ink-300); font-size: 14px; }
.site-footer a:hover { color: #fff; }
.site-footer .brand-block p { font-size: 14px; line-height: 1.6; max-width: 32ch; }
.site-footer .brand-block img {
  height: 26px;
  filter: brightness(0) invert(1);
  margin-bottom: 16px;
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 48px;
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-400);
}

/* ========== Hero shared ========== */
.hero {
  padding-top: clamp(48px, 7vw, 96px);
  padding-bottom: clamp(48px, 7vw, 96px);
  background:
    radial-gradient(ellipse 80% 60% at 90% -10%, rgba(230, 53, 34, 0.10), transparent 60%),
    radial-gradient(ellipse 60% 50% at -10% 30%, rgba(230, 53, 34, 0.06), transparent 60%),
    linear-gradient(180deg, #fdfcfc 0%, #ffffff 70%);
}
.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 > * { min-width: 0; }
.hero h1 { margin-bottom: 20px; }
.hero p.lead { margin-bottom: 28px; max-width: 56ch; }
.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 .num { font-size: 32px; }
  .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: 12px;
  max-width: 60ch;
  margin-bottom: 48px;
}
.section-head .eyebrow { margin-bottom: 4px; }

/* ========== 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 grid — real <img> logos with hover scale */
.client-logos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px 36px;
  align-items: center;
  justify-items: center;
}
.client-logos img {
  max-height: 56px;
  max-width: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform .2s ease;
}
.client-logos img:hover { transform: scale(1.07); }
@media (max-width: 900px) {
  .client-logos { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .client-logos img { max-height: 48px; max-width: 110px; }
}
@media (max-width: 520px) {
  .client-logos { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .client-logos img, .client-logos img:hover { transition: none; transform: 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: start;
}
.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(32px, 3.6vw, 44px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #fff;
}
.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); }
/* 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 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 {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  line-height: 1.5;
}
.spotlight ul.bullets li::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--teal-100) 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='%230d6e72' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / 12px;
  margin-top: 2px;
}
/* The bold lead-in (e.g. "Step 2:") is a flex item — stop it shrinking
   and wrapping mid-label when the row spills onto a second line. */
.spotlight ul.bullets li strong {
  flex-shrink: 0;
  white-space: nowrap;
}

/* 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; }
.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: 1280px) {
  .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 {
  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; }