/* =========================================================
   Docsliy — AI Contract Intelligence Homepage Design System
   High-End Modern SaaS Aesthetics, Premium Layouts & Micro-Interactions
   ========================================================= */

:root {
  /* Typography */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Fraunces', Georgia, serif;

  /* Color Palette - Modern AI SaaS Theme */
  --ink-950: #07060e;
  --ink-900: #0d0c1d;
  --ink-850: #14122b;
  --ink-800: #1d1a3a;
  --ink-700: #2d2952;
  --ink-600: #423d70;
  --ink-500: #5c568e;
  --ink-400: #7e78b2;
  --ink-300: #a7a2d4;
  --ink-200: #d6d3ef;
  --ink-100: #f2f1fa;

  /* Surface & Background Colors */
  --bg-main: #faf9fd;
  --surface: #ffffff;
  --surface-alt: #f3f2fa;
  --surface-tint: #eae8f7;

  /* Lines & Borders */
  --line-subtle: rgba(29, 26, 58, 0.07);
  --line-medium: rgba(29, 26, 58, 0.12);
  --line-strong: rgba(29, 26, 58, 0.18);
  --line-glass: rgba(255, 255, 255, 0.75);

  /* Primary Brand Colors */
  --indigo-500: #6366f1;
  --indigo-600: #4f46e5;
  --indigo-700: #4338ca;
  --violet-500: #8b5cf6;
  --purple-600: #9333ea;
  --pink-500: #ec4899;
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --rose-500: #f43f5e;
  --rose-600: #e11d48;

  /* Gradients */
  --grad-primary: linear-gradient(135deg, #4338ca 0%, #4f46e5 45%, #7c3aed 100%);
  --grad-primary-hover: linear-gradient(135deg, #3730a3 0%, #4338ca 45%, #6d28d9 100%);
  --grad-accent: linear-gradient(135deg, #4f46e5 0%, #9333ea 50%, #ec4899 100%);
  --grad-text: linear-gradient(135deg, #1e1b4b 0%, #4338ca 40%, #7c3aed 80%, #9333ea 100%);
  --grad-border: linear-gradient(135deg, rgba(79, 70, 229, 0.45), rgba(139, 92, 246, 0.35), rgba(236, 72, 153, 0.35));
  --grad-soft-indigo: rgba(79, 70, 229, 0.07);

  /* Warm accent from the repositioned homepage direction */
  --accent-warm: #f0552b;

  /* Border Radii */
  --radius-2xl: 32px;
  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;

  /* Spacing Tokens */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 36px;
  --space-xl: 52px;
  --space-2xl: 80px;

  /* Shadows & Ambient Lighting Effects */
  --shadow-xs: 0 1px 3px rgba(13, 12, 29, 0.04);
  --shadow-sm: 0 4px 12px rgba(13, 12, 29, 0.05);
  --shadow-md: 0 12px 32px -8px rgba(13, 12, 29, 0.08), 0 4px 12px -2px rgba(13, 12, 29, 0.03);
  --shadow-lg: 0 28px 64px -16px rgba(13, 12, 29, 0.12), 0 12px 28px -6px rgba(13, 12, 29, 0.05);
  --shadow-glow: 0 12px 36px -6px rgba(79, 70, 229, 0.38);
  --shadow-glow-purple: 0 12px 36px -6px rgba(147, 51, 234, 0.35);

  /* Transitions & Easing */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ================= BASE RESET & UTILITIES ================= */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  color: var(--ink-700);
  background: var(--bg-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
}

/* Background Noise Overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.018;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  color: var(--ink-900);
  font-weight: 560;
  letter-spacing: -0.02em;
  line-height: 1.26;
}

p {
  line-height: 1.7;
  margin-bottom: 0;
}

a {
  text-decoration: none;
  color: inherit;
  transition: all 0.25s var(--ease);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink-900);
  color: #fff;
  padding: 12px 24px;
  border-radius: 0 0 12px 0;
  font-weight: 700;
  z-index: 2000;
  box-shadow: var(--shadow-lg);
}
.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 2.5px solid var(--indigo-500);
  outline-offset: 3px;
  border-radius: 6px;
}

.container-xl-custom {
  max-width: 1240px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

.section {
  padding: 60px 0;
  position: relative;
}
.section-alt {
  background: var(--surface-alt);
  border-top: 1px solid var(--line-medium);
  border-bottom: 1px solid var(--line-medium);
  overflow: hidden;
}
.eSignature-guide-security-page {
  padding-bottom: 0px !important;
}
.three-regimes-legality-guide-page {
  padding-bottom: 0px !important;
  padding-top: 0px !important;
}
/* overflow:hidden breaks position:sticky inside — this section needs the
   illustration panel in .benefits-split to stick while its content scrolls */
.section-alt:has(.benefits-split) {
  overflow: visible;
}
.sales-technology-saaspage {
  padding-bottom: 0px !important;
}
.section-tight {
  padding: 60px 0;
}



.display-fluid {
  font-size: clamp(2.6rem, 4.6vw, 4.2rem);
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: -0.028em;
}
.h2-fluid {
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.27;
}
.h3-fluid {
  font-size: clamp(1.28rem, 1.7vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* Headings are short blocks, so balance their line lengths rather than letting
   the last line strand a lone word or leave an em-dash hanging at a line end.
   Unsupported browsers fall back to normal wrapping, which is what we had. */
h1, h2,
.h2-fluid, .display-fluid,
.why-title, .diy-title, .lgi-title, .lgc-title {
  text-wrap: balance;
}
.text-gradient {
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-style: italic;
  /* Deliberately left inline. As an inline-block the span was an atomic box:
     it could not wrap mid-clause, so a long gradient phrase jumped to its own
     line and text-wrap:balance could not even out the heading. An inline paints
     background-clip:text over the font's content area, which already covers the
     italic serif's descenders, so no padding workaround is needed. */
}

.lede {
  font-size: clamp(1.06rem, 1.3vw, 1.22rem);
  color: var(--ink-500);
  line-height: 1.7;
  font-weight: 450;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--indigo-700);
  background: rgba(79, 70, 229, 0.07);
  border: 1px solid rgba(79, 70, 229, 0.18);
  padding: 7px 16px 7px 13px;
  border-radius: 100px;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.05);
      width: fit-content;
}
.eyebrow .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--emerald-500);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22);
  animation: pulseDot 2.4s var(--ease) infinite;
}

@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25); transform: scale(1); }
  50% { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0.06); transform: scale(1.18); }
}

.section-head {
  max-width: 680px;
  margin-bottom: 60px;
}
.section-head.mx-auto {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-head h2 {
  margin: 18px 0 20px;
}

/* ================= BUTTON SYSTEM ================= */
.btn-grad {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 0.98rem;
  color: #ffffff !important;
  background: var(--grad-primary);
  border: none;
  box-shadow: var(--shadow-glow);
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s var(--ease);
  isolation: isolate;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-grad::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.btn-grad:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 38px -6px rgba(79, 70, 229, 0.44);
  color: #ffffff !important;
}
.btn-grad:hover::before {
  opacity: 1;
}
.btn-grad:active {
  transform: translateY(-1px) scale(0.99);
}

.btn-grad .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: scale(0);
  animation: rippleAnim 0.65s ease-out;
  pointer-events: none;
}
@keyframes rippleAnim {
  to { transform: scale(3.4); opacity: 0; }
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--ink-850) !important;
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  box-shadow: var(--shadow-xs);
  transition: all 0.35s var(--ease);
  cursor: pointer;
  white-space: nowrap;
}
.btn-ghost:hover {
  border-color: var(--indigo-500);
  color: var(--indigo-600) !important;
  transform: translateY(-3px);
  box-shadow: var(--shadow-md), 0 0 0 3px rgba(79, 70, 229, 0.08);
  background: #ffffff;
}

.btn-play-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(79, 70, 229, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--indigo-600);
  flex-shrink: 0;
  transition: transform 0.35s var(--ease-spring), background 0.35s var(--ease);
}
.btn-ghost:hover .btn-play-circle {
  transform: scale(1.12);
  background: var(--grad-primary);
  color: #fff;
}

.btn-sm-pill {
  padding: 10px 22px;
  font-size: 0.88rem;
}

/* ================= NAVBAR ================= */
.navbar-premium {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: transparent;
}
.navbar-premium .container-xl-custom {
  padding-top: 14px;
  padding-bottom: 22px;
  transition: padding 0.45s var(--ease);
}
.navbar-premium .nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1240px;
  margin: 0 auto;
  padding: 10px 24px;
  border-radius: 100px;
  border: 1px solid transparent;
  transition: all 0.45s var(--ease);
}
/* The bar carries seven top-level items plus the utility row, which the 1240px
   content column squeezes on wider screens. Give the header its own, wider
   track; page content below keeps the 1240px measure so long-form copy stays
   readable. Scoped to .navbar-premium so nothing else picks it up. */
.navbar-premium .container-xl-custom,
.navbar-premium .nav-inner {
  max-width: 1440px;
}

.navbar-premium.is-scrolled .container-xl-custom {
  padding-top: 10px;
  padding-bottom: 14px;
}
.navbar-premium.is-scrolled .nav-inner {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-color: rgba(255, 255, 255, 0.75);
  box-shadow: 0 12px 32px -8px rgba(13, 12, 29, 0.08), 0 0 0 1px rgba(29, 26, 58, 0.05);
}

/* ---- Utility bar ---- */
.util-bar {
  background: linear-gradient(90deg, var(--ink-950) 0%, #201b46 50%, var(--ink-950) 100%);
  max-height: 50px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.4s var(--ease), opacity 0.3s var(--ease);
}
.navbar-premium.is-scrolled .util-bar {
  max-height: 0;
  opacity: 0;
}
.util-bar-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 0.8rem;
}
.util-announce {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
}
.util-announce svg { color: var(--indigo-300, #a7a2d4); flex: none; }
.util-announce:hover { color: #fff; }
.util-tag {
  background: var(--grad-accent);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 100px;
  flex: none;
}
.util-links {
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}
.util-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.68);
  font-weight: 500;
}
.util-links a:hover { color: #fff; }
.util-login { font-weight: 700 !important; color: rgba(255, 255, 255, 0.92) !important; }
.util-divider {
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.18);
  flex: none;
}

/* ---- Location-mismatch suggestion modal ---- */
.geo-suggest-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 6, 14, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  padding: 20px;
  animation: geoSuggestFadeIn 0.35s var(--ease);
}
.geo-suggest-overlay[hidden] { display: none; }
@keyframes geoSuggestFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.geo-suggest-modal {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  max-width: 440px;
  width: 100%;
  padding: 40px 36px 34px;
}
.geo-suggest-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--surface-alt);
  color: var(--ink-500);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.geo-suggest-close:hover { background: var(--line-medium); color: var(--ink-900); }
.geo-suggest-modal h3 { font-size: 1.3rem; margin: 0 0 14px; padding-right: 24px; }
.geo-suggest-modal p { font-size: 0.95rem; color: var(--ink-500); line-height: 1.6; margin-bottom: 26px; }
.geo-suggest-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
.geo-suggest-confirm {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--grad-primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 11px 22px;
  border-radius: 100px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.geo-suggest-confirm:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); color: #fff; }
.geo-suggest-alt {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--indigo-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.geo-suggest-alt:hover { color: var(--indigo-700); }

/* ---- Country switcher (custom dropdown - a native <select> can't be
   styled consistently and renders emoji flags badly on Windows) ---- */
.ctry-switch { position: relative; }
/* .util-bar clips its children (overflow:hidden drives the collapse-on-scroll
   animation), which would cut the dropdown panel off. Lifted only while a
   panel is actually open, so the collapse animation still works. */
.util-bar.has-open-dropdown { overflow: visible; }
.ctry-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px 5px 11px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.88);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.ctry-trigger:hover,
.ctry-switch.is-open .ctry-trigger {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.ctry-chev { opacity: 0.7; transition: transform 0.25s var(--ease); }
.ctry-switch.is-open .ctry-chev { transform: rotate(180deg); }
.ctry-flag { font-size: 0.95rem; line-height: 1; }

.ctry-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 210px;
  background: var(--surface);
  border: 1px solid var(--line-medium);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
  z-index: 600;
}
.ctry-switch.is-open .ctry-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Two-class selectors throughout: this sits inside .util-links, whose
   `.util-links a` rule is more specific than a lone .ctry-option and would
   otherwise force these into a row in white-on-white text. */
.ctry-panel .ctry-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 9px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-700);
  white-space: nowrap;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.ctry-panel .ctry-option:hover { background: var(--surface-tint); color: var(--ink-900); }
.ctry-panel .ctry-option-label { flex: 1; }
.ctry-panel .ctry-check { color: var(--indigo-600); opacity: 0; flex-shrink: 0; }
.ctry-panel .ctry-option.is-active { background: var(--grad-soft-indigo); color: var(--indigo-700); }
.ctry-panel .ctry-option.is-active .ctry-check { opacity: 1; }

/* Mobile menu variant - a flat grid, no dropdown to fight with on touch */
.mobile-ctry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 4px 16px 10px;
}
.mobile-ctry-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-medium);
  background: var(--surface);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-700);
}
.mobile-ctry-option.is-active {
  border-color: rgba(79, 70, 229, 0.4);
  background: var(--grad-soft-indigo);
  color: var(--indigo-700);
}


.brand-mark {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
}
.brand-logo-img {
  height: 38px;
  width: auto;
  display: block;
  transition: transform 0.35s var(--ease-spring);
}
.brand-mark:hover .brand-logo-img {
  transform: scale(1.04);
}
/* footer-logo.png is currently the dark-navy wordmark, so it needs a white
   plate to stay legible on the dark footer. If you swap in a light-on-dark
   logo variant, delete the .footer-brand .brand-mark rule below. */
.footer-brand .brand-mark {
  background: #fff;
  padding: 8px 14px;
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
}
.footer-brand .brand-logo-img { height: 26px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav-links a {
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink-700);
  transition: all 0.25s var(--ease);
}
.nav-links a:hover {
  background: rgba(79, 70, 229, 0.08);
  color: var(--indigo-600);
}
/* Direct children only: seven top-level items, three with chevrons, so the
   longer labels would otherwise break onto a second line and make the
   navbar two rows tall. Dropdown links inside must still wrap. */
.nav-links > a { white-space: nowrap; }

/* ---- Mega menu ---- */
.nav-item { position: relative; }
.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 10px 12px;
  border: none;
  background: none;
  border-radius: 100px;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink-700);
  cursor: pointer;
  transition: all 0.25s var(--ease);
}
.nav-trigger:hover,
.nav-item.is-open .nav-trigger {
  background: rgba(79, 70, 229, 0.08);
  color: var(--indigo-600);
}
.nav-trigger .chev {
  transition: transform 0.3s var(--ease);
}
.nav-item:hover .nav-trigger .chev,
.nav-item.is-open .nav-trigger .chev {
  transform: rotate(180deg);
}

.mega-menu {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: min(1040px, calc(100vw - 48px));
  background: var(--surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--line-glass);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
  z-index: 500;
}
/* Invisible bridge over the 16px gap so moving the cursor from the
   trigger down to the menu doesn't drop out of hover and close it. */
.mega-menu::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}
.nav-item:hover .mega-menu,
.nav-item.is-open .mega-menu,
.nav-item:focus-within .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* ---- Compact nav dropdown (Resources) ----
   Shares .nav-item.has-mega with the Product mega menu so it inherits the
   hover, chevron and open-state behaviour, but is right-aligned to its
   trigger and sized to its content rather than spanning the navbar. */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 16px);
  right: 0;
  width: 296px;
  padding: 10px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-glass);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
  z-index: 500;
}
/* Bridge over the 16px gap so the cursor can travel from trigger to panel. */
.nav-dropdown::before {
  content: "";
  position: absolute;
  top: -16px; left: 0; right: 0;
  height: 16px;
}
.nav-item:hover .nav-dropdown,
.nav-item.is-open .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.nav-drop-link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--radius-md);
  transition: background-color 0.22s var(--ease);
}
/* Two-class selector: .nav-links a already sets padding and a pill radius. */
.nav-dropdown .nav-drop-link:hover { background: var(--surface-alt); }
.nav-drop-icon {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--grad-soft-indigo);
  color: var(--indigo-600);
  flex-shrink: 0;
}
.nav-drop-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav-drop-text strong {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1.3;
}
.nav-drop-text span {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--ink-400);
}
.nav-dropdown .nav-drop-link[aria-current="page"] .nav-drop-text strong { color: var(--indigo-600); }

/* Wide variant: two columns, for dropdowns with enough entries that a single
   column would run taller than the viewport (Industries). */
.nav-dropdown.is-wide { width: 520px; }
.nav-drop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
/* Compact rows have no description line, so they centre rather than top-align */
.nav-drop-link.is-compact { align-items: center; padding: 10px 12px; }
.nav-drop-link.is-compact .nav-drop-icon { width: 30px; height: 30px; }
.nav-drop-link.is-compact .nav-drop-text strong { font-size: 0.86rem; }
.nav-drop-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  padding: 11px 12px;
  border-top: 1px solid var(--line-subtle);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--indigo-600);
  transition: gap 0.25s var(--ease);
}
.nav-dropdown .nav-drop-more:hover { gap: 13px; color: var(--indigo-700); }

/* Marker for a nav item whose page isn't built yet — the link points at the
   homepage as a placeholder, so say so rather than letting it look live. */
.nav-drop-soon {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 7px;
  border-radius: 100px;
  background: var(--surface-alt);
  border: 1px solid var(--line-medium);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-400);
  vertical-align: 1px;
}

.mega-grid {
  display: grid;
  /* Explore now runs across the first two columns, so they get equal width. */
  grid-template-columns: 1.05fr 1.05fr 0.8fr 0.8fr;
  gap: 4px;
  padding: 18px 18px 0;
}
.mega-col-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: var(--ink-400);
  padding: 6px 12px 10px;
}
.mega-menu .mega-link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.mega-menu .mega-link:hover {
  background: rgba(29, 26, 58, 0.045);
  color: inherit;
  transform: translateX(2px);
}
.mega-menu .mega-link[aria-current="page"] {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.09), rgba(139, 92, 246, 0.05));
  border-color: rgba(79, 70, 229, 0.2);
  border-radius: 10px;
}
.mega-menu .mega-link[aria-current="page"]:hover { transform: none; }
.mega-menu .mega-link[aria-current="page"] .mega-link-icon { background: var(--grad-primary); color: #fff; }
.mega-menu .mega-link[aria-current="page"] .mega-link-text strong { color: var(--indigo-700); }
.nav-links a[aria-current="page"],
.mobile-menu a[aria-current="page"] { color: var(--indigo-600); }
.mega-link-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--grad-soft-indigo);
  color: var(--indigo-600);
  flex: none;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.mega-link-text strong {
  display: block;
  font-size: 0.87rem;
  font-weight: 700;
  color: var(--ink-900);
}
.mega-link-text span {
  display: block;
  font-size: 0.78rem;
  color: var(--ink-500);
  margin-top: 2px;
  line-height: 1.4;
}
.mega-link-compact .mega-link-icon { width: 30px; height: 30px; }
.mega-link-compact { padding: 7px 12px; }
.mega-col-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px 4px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--indigo-600);
}
.mega-foot {
  margin-top: 14px;
  border-radius: 0 0 calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px);
  background: var(--grad-primary);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.mega-foot-text {
  color: #fff;
  font-weight: 700;
  font-size: 0.86rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mega-foot .mega-foot-link {
  color: #fff;
  font-weight: 700;
  font-size: 0.84rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mega-foot-link:hover { opacity: 0.85; }

.mobile-menu-label {
  padding: 14px 16px 4px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: var(--ink-400);
}
.mobile-menu-label:first-child { padding-top: 4px; }

.nav-cta {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-login {
  font-weight: 700;
  font-size: 0.94rem;
  padding: 10px 16px;
  color: var(--ink-700);
  transition: color 0.25s var(--ease);
}
.nav-login:hover {
  color: var(--indigo-600);
}

.navbar-toggler-premium {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  align-items: center;
  justify-content: center;
  color: var(--ink-850);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: all 0.3s var(--ease);
}
.navbar-toggler-premium:hover {
  background: var(--surface-tint);
  color: var(--indigo-600);
}

.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.8);
}
.mobile-menu.show {
  display: flex;
  animation: mobileMenuEnter 0.35s var(--ease-spring);
}
@keyframes mobileMenuEnter {
  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.mobile-menu a {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-weight: 600;
  color: var(--ink-700);
}
.mobile-menu a:hover {
  background: rgba(79, 70, 229, 0.08);
  color: var(--indigo-600);
}



/* ================= REVEAL ANIMATIONS ================= */
.reveal {
  opacity: 0;
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease);
  will-change: transform, opacity;
}
.reveal-up { transform: translateY(38px); }
.reveal-scale { transform: scale(0.92); }
.reveal-blur { filter: blur(16px); transform: translateY(20px); }
.reveal-left { transform: translateX(-44px); }
.reveal-right { transform: translateX(44px); }
.reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}



/* ================= BACKGROUND BLOBS & LIGHTING ================= */
.blob-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.35;
  animation: blobFloat 20s ease-in-out infinite;
}
.blob-indigo { background: radial-gradient(circle at 30% 30%, #6366f1, transparent 70%); }
/* Ambient light tinted with the active market's accent */
.blob-country { background: radial-gradient(circle at 30% 30%, var(--ctry-a), transparent 70%); opacity: 0.2; }
.blob-cyan { background: radial-gradient(circle at 30% 30%, #38bdf8, transparent 70%); }
.blob-purple { background: radial-gradient(circle at 30% 30%, #a855f7, transparent 70%); }

@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(4%, -5%) scale(1.1); }
  66% { transform: translate(-4%, 4%) scale(0.95); }
}

.dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(29, 26, 58, 0.11) 1.2px, transparent 1.2px);
  background-size: 30px 30px;
  mask-image: radial-gradient(ellipse 65% 60% at 50% 40%, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 65% 60% at 50% 40%, black 40%, transparent 100%);
  opacity: 0.55;
}

.glass {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.78);
}

/* ================= HERO SECTION ================= */
.hero-section {
  padding: 192px 0 60px;
  position: relative;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 2;
}


.hero-copy h1 {
  margin: 22px 0 24px;
}
.hero-copy .lede {
  max-width: 520px;
  margin-bottom: 38px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 0px;
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  margin-top: 24px;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-500);
}
.trust-item svg {
  color: var(--indigo-600);
  flex-shrink: 0;
}

.hero-visual {
  position: relative;
  min-height: 540px;
}

/* Main Dashboard Panel */
.hero-panel {
  position: relative;
  z-index: 3;
  border-radius: var(--radius-xl);
  padding: 28px;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.85);
  max-width: 470px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.88);
}
.hero-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.hero-panel-title {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 700;
  color: var(--ink-850);
  font-size: 0.96rem;
}
.hero-panel-avatar {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--grad-primary);
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
}
.hero-panel-menu {
  display: flex;
  gap: 6px;
}
.hero-panel-menu span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-300);
}

.risk-ring-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 20px;
  background: var(--surface-alt);
  border-radius: var(--radius-md);
  margin-bottom: 18px;
  border: 1px solid var(--line-medium);
}
.risk-ring {
  flex-shrink: 0;
}
.risk-ring circle.bg {
  stroke: var(--line-strong);
}
.risk-ring circle.fg {
  stroke: url(#ringGradient);
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
  stroke-dasharray: 226;
  stroke-dashoffset: 226;
  transition: stroke-dashoffset 1.6s var(--ease) 0.3s;
}
.risk-ring-wrap.is-visible .risk-ring circle.fg {
  stroke-dashoffset: 18;
}
.risk-ring-label {
  font-size: 0.8rem;
  color: var(--ink-400);
  font-weight: 600;
}
.risk-ring-value {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--ink-900);
}

.clause-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.clause-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 6px;
  border-bottom: 1px solid var(--line-subtle);
  font-size: 0.88rem;
}
.clause-row:last-child {
  border-bottom: none;
}
.clause-row .name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--ink-700);
}
.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot.ok { background: var(--emerald-500); box-shadow: 0 0 8px rgba(16, 185, 129, 0.4); }
.status-dot.warn { background: var(--amber-500); box-shadow: 0 0 8px rgba(245, 158, 11, 0.4); }

.status-chip {
  font-size: 0.74rem;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 100px;
}
.status-chip.ok { background: rgba(16, 185, 129, 0.12); color: #047857; }
.status-chip.warn { background: rgba(245, 158, 11, 0.14); color: #b45309; }

.hero-panel-foot {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line-medium);
}
.mini-bar {
  height: 7px;
  border-radius: 100px;
  background: var(--surface-alt);
  overflow: hidden;
  margin-top: 8px;
}
.mini-bar span {
  display: block;
  height: 100%;
  border-radius: 100px;
  background: var(--grad-primary);
  width: 0%;
  transition: width 1.4s var(--ease) 0.5s;
}
.hero-panel-foot.is-visible .mini-bar span {
  width: var(--fill, 68%);
}
.mini-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--ink-400);
  font-weight: 600;
}

/* Floating Glass Cards */
.hero-float {
  position: absolute;
  z-index: 4;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  transition: transform 0.25s var(--ease);
}
.hero-float-bob {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-radius: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ink-850);
  animation: floatY 6s ease-in-out infinite;
}
.float-a { top: -8%; left: -14%; }
.float-a .hero-float-bob { animation-delay: 0s; }
.float-b { bottom: 5%; right: -10%; }
.float-b .hero-float-bob { animation-delay: 1.4s; }
.float-c { top: 7%; right: -14%; }
.float-c .hero-float-bob { animation-delay: 2.8s; }




@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.float-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.float-icon.grad-a { background: var(--ink-900); }
.float-icon.grad-b { background: var(--emerald-500); }
.float-icon.grad-c { background: var(--indigo-600); }

.float-sub {
  font-size: 0.72rem;
  color: var(--ink-400);
  font-weight: 600;
  display: block;
}

.avatar-stack {
  display: flex;
}
.avatar-stack span {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -8px;
  background: var(--grad-primary);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
}
.avatar-stack span:first-child { margin-left: 0; }

/* ================= LOGO MARQUEE ================= */
.logo-marquee-wrap {
  padding: 60px 0;
  border-top: 1px solid var(--line-medium);
  border-bottom: 1px solid var(--line-medium);
  background: var(--surface);
}
.marquee-eyebrow {
  text-align: center;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: 34px;
}
.marquee-mask {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 72px;
  width: max-content;
  animation: marqueeScroll 34s linear infinite;
}
.marquee-mask:hover .marquee-track {
  animation-play-state: paused;
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--ink-400);
  white-space: nowrap;
  letter-spacing: -0.01em;
  transition: color 0.3s ease;
}
.marquee-logo:hover {
  color: var(--indigo-600);
}
.marquee-logo svg { flex-shrink: 0; }

/* ================= PROOF BAND (LOGOS + METRICS, MERGED) =================
   One dark band directly under the hero instead of two separate light
   sections - social proof and results land together, and the page gets a
   deliberate light/dark rhythm rather than an unbroken run of white. */
.proof-band {
  padding: 60px 0;
  background: var(--ink-900);
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.proof-band .marquee-eyebrow { color: rgba(255, 255, 255, 0.45); margin-bottom: 26px; }
.proof-band .marquee-logo { color: rgba(255, 255, 255, 0.42); font-size: 1.05rem; }
.proof-band .marquee-logo:hover { color: #fff; }
.proof-band .marquee-mask { margin-bottom: 54px; }
/* Divider between the logo rail and the numbers */
.proof-band .impact-grid { position: relative; padding-top: 50px; }
.proof-band .impact-grid::before {
  content: "";
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: min(100%, 1180px);
  height: 1px;
  background: rgba(255, 255, 255, 0.09);
}

/* ================= IMPACT METRICS GRID ================= */
.impact-section {
  padding: 68px 0;
  background: var(--ink-900);
  color: #fff;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.impact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.impact-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-lg);
  padding: 30px 24px;
  text-align: center;
  transition: all 0.4s var(--ease);
}
.impact-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.impact-num {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 3.4vw, 3.2rem);
  font-weight: 600;
  background: linear-gradient(135deg, #ffffff 0%, #c7d2fe 50%, #8b5cf6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
  margin-bottom: 10px;
}
.impact-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}
.impact-desc {
  font-size: 0.82rem;
  color: #9397be;
}

/* ================= PROBLEM -> SOLUTION CARD GRID (#pain-points .pf-grid) ================= */
.pf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.pf-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-medium);
  border-radius: var(--radius-xl);
  padding: 30px 28px 32px;
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.pf-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-primary);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.pf-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(79, 70, 229, 0.25);
}
.pf-card:hover::before { opacity: 1; }

.pf-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.pf-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--grad-primary);
  box-shadow: 0 8px 18px -6px rgba(79, 70, 229, 0.4);
}
.pf-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.6rem;
  color: var(--ink-200);
}

.pf-card-problem { margin-bottom: 22px; }
.pf-card-problem p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.99rem;
  color: var(--ink-600);
  line-height: 1.56;
  margin: 0;
}

.pf-card-fix {
  padding-top: 22px;
  border-top: 1px dashed var(--line-medium);
}
.pf-card-fix h3 {
  font-size: 1.08rem;
  margin: 2px 0 9px;
}
.pf-card-fix p {
  font-size: 0.88rem;
  color: var(--ink-500);
  line-height: 1.62;
  margin: 0;
}

/* -- Shared tags (also used by other pages' problem/fix components) -- */
.ps-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rose-600);
  background: rgba(244, 63, 94, 0.08);
  border: 1px solid rgba(244, 63, 94, 0.16);
  padding: 5px 12px 5px 10px;
  border-radius: 100px;
  margin-bottom: 14px;
}
.ps-tag svg { flex-shrink: 0; }
.ps-tag.is-solution {
  color: var(--indigo-700);
  background: rgba(79, 70, 229, 0.08);
  border-color: rgba(79, 70, 229, 0.18);
}

/* per-card icon gradient progression */
.pf-card:nth-child(1) .pf-icon { background: linear-gradient(135deg, #4338ca, #4f46e5); }
.pf-card:nth-child(2) .pf-icon { background: linear-gradient(135deg, #4f46e5, #7c3aed); }
.pf-card:nth-child(3) .pf-icon { background: linear-gradient(135deg, #6d28d9, #9333ea); }
.pf-card:nth-child(4) .pf-icon { background: linear-gradient(135deg, #9333ea, #c026d3); }
.pf-card:nth-child(5) .pf-icon { background: linear-gradient(135deg, #be185d, #ec4899); }
.pf-card:nth-child(6) .pf-icon { background: linear-gradient(135deg, #e11d48, #f43f5e); }


/* ================= TRUST / RATINGS BAR ================= */
.trust-bar-section {
  padding: 44px 0;
  background: var(--surface-alt);
  border-top: 1px solid var(--line-medium);
  border-bottom: 1px solid var(--line-medium);
}
.trust-bar-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}
.trust-bar-item {
  text-align: center;
  padding: 0 12px;
  border-left: 1px solid var(--line-medium);
}
.trust-bar-item:first-child { border-left: none; }
.trust-bar-stars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--amber-500);
  margin-bottom: 8px;
}
.trust-bar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(79, 70, 229, 0.08);
  color: var(--indigo-600);
  margin-bottom: 8px;
}
.trust-bar-num {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--ink-900);
  line-height: 1.1;
}
.trust-bar-num span { font-size: 0.85rem; color: var(--ink-400); font-weight: 500; }
.trust-bar-lab {
  font-size: 0.78rem;
  color: var(--ink-500);
  margin-top: 4px;
}


/* ================= PAIN POINTS ================= */
.pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pain-card {
  background: var(--surface);
  border: 1px solid var(--line-medium);
  border-radius: var(--radius-lg);
  padding: 34px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
  position: relative;
  overflow: hidden;
}
.pain-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-primary);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.pain-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(79, 70, 229, 0.25);
}
.pain-card:hover::before {
  opacity: 1;
}
.pain-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.75rem;
  color: var(--indigo-600);
  display: block;
  margin-bottom: 16px;
}
.pain-card h3 {
  font-size: 1.12rem;
  margin-bottom: 12px;
}
.pain-card p {
  font-size: 0.92rem;
  color: var(--ink-500);
  margin-bottom: 0;
}




/* ================= PROBLEM -> SOLUTION FLIP CARDS ================= */
.flip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  counter-reset: flip-counter;
}
.flip-card {
  counter-increment: flip-counter;
  perspective: 1800px;
  height: 340px;
  cursor: pointer;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-style: preserve-3d;
}
.flip-card.is-flipped .flip-card-inner { transform: rotateY(180deg); }

.flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius-xl);
  padding: 30px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-medium);
  transition: box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.flip-card:hover .flip-face { box-shadow: var(--shadow-md); }

.flip-front {
  background: linear-gradient(160deg, rgba(244, 63, 94, 0.06), var(--surface) 62%);
}
.flip-front::after {
  content: counter(flip-counter, decimal-leading-zero);
  position: absolute;
  right: 22px;
  bottom: 18px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink-300);
}
.flip-back {
  background: var(--surface);
  transform: rotateY(180deg);
  box-shadow: var(--shadow-md);
}

.flip-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rose-600);
  margin-bottom: 16px;
}
.flip-tag svg { flex-shrink: 0; }
.flip-tag.is-solution { color: var(--indigo-600); }

.flip-front p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.06rem;
  color: var(--ink-700);
  line-height: 1.55;
  margin: 0;
}
.flip-hint {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--indigo-600);
}
.flip-hint svg { transition: transform 0.4s var(--ease); }
.flip-card:hover .flip-hint svg { transform: translateX(4px); }

.flip-back-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--grad-primary);
  color: #fff;
  box-shadow: var(--shadow-glow);
  flex-shrink: 0;
  margin-bottom: 16px;
}
.flip-back-icon svg { width: 20px; height: 20px; }
.flip-back h3 { font-size: 1.08rem; margin: 0 0 10px; }
.flip-back p { font-size: 0.92rem; color: var(--ink-500); line-height: 1.6; margin: 0; }
.flip-back-again {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--ink-400);
}




/* ================= BENEFITS SPLIT ================= */
.benefits-split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-2xl);
  align-items: stretch;
}
.benefits-illu-wrap {
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  box-sizing: border-box;
  border-radius: var(--radius-2xl);
  background: linear-gradient(160deg, rgba(79, 70, 229, 0.07) 0%, rgba(147, 51, 234, 0.05) 55%, rgba(236, 72, 153, 0.04) 100%);
  border: 1px solid var(--line-subtle);
  position: sticky;
  top: 110px;
}
.rounded-illustration {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
  border-radius: var(--radius-2xl);
  filter: drop-shadow(0 20px 44px rgba(67, 56, 202, 0.14));
}
.benefit-card-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.benefit-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: var(--surface);
  border: 1px solid var(--line-medium);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.benefit-card:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(79, 70, 229, 0.25);
}
.benefit-num {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--grad-primary);
  color: #fff;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 0.95rem;
  box-shadow: var(--shadow-glow);
}
.benefit-card h4 {
  font-size: 1.08rem;
  margin: 0 0 8px;
  color: var(--ink-900);
}
.benefit-card p {
  font-size: 0.92rem;
  color: var(--ink-500);
  margin: 0;
  line-height: 1.55;
}




/* ================= UNFAIR ADVANTAGES ================= */
.advantage-section {
  position: relative;
  overflow: hidden;
  padding: 60px 0;
}
.advantage-section .dot-grid { opacity: 0.4; }
.advantage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 52px;
}
.advantage-card {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line-medium);
  border-radius: var(--radius-lg);
  padding: 32px 30px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.advantage-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-primary);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.advantage-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(79, 70, 229, 0.25);
}
.advantage-card:hover::before { opacity: 1; }
.advantage-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 4px;
  border-radius: 50%;
  background: var(--grad-soft-indigo);
  color: var(--indigo-700);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1rem;
  margin-bottom: 18px;
}
.advantage-card h3 {
  font-size: 1.12rem;
  margin-bottom: 12px;
  color: var(--ink-900);
}
.advantage-card p {
  font-size: 0.92rem;
  color: var(--ink-500);
  line-height: 1.6;
  margin: 0;
}




/* ================= BENTO FEATURES GRID ================= */
/* ================= BENTO GRID (used by industry pages) ================= */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(148px, auto);
  gap: 16px;
}
.bento-card {
  position: relative;
  grid-column: span 2;
  border-radius: var(--radius-xl);
  background: var(--surface);
  border: 1px solid var(--line-medium);
  padding: 20px;
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
  display: flex;
  flex-direction: column;
}
.bento-card.span-lg { grid-column: span 2; grid-row: span 2; justify-content: center; }
.bento-card.span-sm { grid-column: span 2; }
.bento-card.span-full { grid-column: span 4; }

.bento-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--grad-border);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  pointer-events: none;
  z-index: 2;
}
.bento-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), rgba(79, 70, 229, 0.08), transparent 65%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
  z-index: 0;
}
.bento-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.bento-card:hover::before { opacity: 1; }
.bento-card:hover::after { opacity: 1; }
.bento-card > * { position: relative; z-index: 1; }

.bento-index {
  position: absolute;
  top: 22px; right: 24px;
  font-family: 'SFMono-Regular', Consolas, Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-300);
  z-index: 1;
}

.bento-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--indigo-600);
  background: rgba(79, 70, 229, 0.07);
  border: 1px solid rgba(79, 70, 229, 0.15);
  margin-bottom: 14px;
  transition: transform 0.4s var(--ease-spring), background 0.4s var(--ease), color 0.4s var(--ease);
}
.bento-icon svg { width: 19px; height: 19px; }
.bento-card:hover .bento-icon {
  transform: scale(1.08) rotate(-4deg);
  background: var(--grad-primary);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-glow);
}

.bento-problem {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--rose-600);
  margin-bottom: 8px;
}
.bento-card h3 {
  font-size: 1.04rem;
  margin-bottom: 6px;
  padding-right: 26px;
}
.bento-card p {
  font-size: 0.85rem;
  color: var(--ink-500);
  margin-bottom: 0;
  line-height: 1.55;
}
.bento-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--indigo-600);
  background: var(--surface-tint);
  padding: 5px 12px;
  border-radius: 100px;
  margin-top: 12px;
  align-self: flex-start;
  border: 1px solid var(--line-subtle);
}

.bento-foot { margin-top: 14px; }
.span-sm .bento-foot, .span-full .bento-foot { margin-top: auto; padding-top: 12px; }

/* ================= FEATURE SPOTLIGHT CARDS ================= */
.sp-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.sp-row {
  display: flex;
  flex-direction: column;
  padding: 28px 26px;
  border: 1px solid var(--line-medium);
  border-radius: var(--radius-xl);
  background: var(--surface);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.sp-row:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: rgba(79, 70, 229, 0.25);
}

.sp-text-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.sp-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--indigo-600);
  background: rgba(79, 70, 229, 0.08);
  border: 1px solid rgba(79, 70, 229, 0.15);
  flex-shrink: 0;
  transition: transform 0.4s var(--ease-spring), background 0.4s var(--ease), color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.sp-icon svg { width: 20px; height: 20px; }
.sp-row:hover .sp-icon {
  transform: scale(1.06) rotate(-4deg);
  background: var(--grad-primary);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-glow);
}
.sp-index {
  font-family: 'SFMono-Regular', Consolas, Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ink-300);
}

.sp-hook {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--rose-600);
  margin-bottom: 8px;
}
.sp-text h3 { font-size: 1.15rem; margin: 0 0 10px; }
.sp-text p { font-size: 0.88rem; color: var(--ink-500); line-height: 1.6; margin: 0 0 16px; }
.sp-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--indigo-600);
  background: var(--surface-tint);
  padding: 5px 12px;
  border-radius: 100px;
  border: 1px solid var(--line-subtle);
  align-self: flex-start;
  margin-bottom: 18px;
}

.sp-visual {
  position: relative;
  background: linear-gradient(160deg, var(--surface-alt), #fff 70%);
  border: 1px solid var(--line-medium);
  border-radius: var(--radius-lg);
  padding: 18px;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: auto;
}
.sp-visual::before {
  content: "";
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: var(--grad-primary);
  opacity: 0.08;
  filter: blur(50px);
  top: -40px;
  right: -40px;
  pointer-events: none;
}
.sp-visual-inner {
  position: relative;
  width: 100%;
  max-width: 300px;
  min-width: 0;
  transform: scale(0.86);
}
/* mv-gauge's content doesn't fill its row, so center it before enlarging -
   scaling left-aligned content from the row's center pushes it off-edge */
.sp-visual .mv-gauge { justify-content: center; }
.sp-visual-inner.mv-gauge { transform: scale(1.05); }
/* these mv-* widgets were built for narrow bento-card footers; as flex
   items they refuse to shrink below their content's intrinsic width
   (min-width:auto) unless told to, which overflowed the wider sp-visual
   panel - allow every flex child in this context to shrink instead */
.sp-visual .mv-sign,
.sp-visual .mv-chat,
.sp-visual .mv-files .frow,
.sp-visual .mv-prompt .row-in,
.sp-visual .mv-prompt .row-out {
  min-width: 0;
}
.sp-visual .mv-sign > *,
.sp-visual .mv-chat > *,
.sp-visual .mv-gauge > * {
  min-width: 0;
}
.sp-visual .mv-sign svg { max-width: 45%; height: auto; }
/* hard guarantee against horizontal overflow: wrap instead of clipping
   if a widget's content still can't fit the panel width */
.sp-visual .mv-sign { flex-wrap: wrap; row-gap: 10px; }
.sp-visual .mv-files .frow { flex-wrap: wrap; row-gap: 4px; }

.sp-more {
  margin-top: 22px;
  padding: 32px;
  border-radius: var(--radius-xl);
  background: var(--grad-soft-indigo);
  border: 1px solid rgba(79, 70, 229, 0.15);
}
.sp-more .sp-icon { margin-bottom: 14px; }
.sp-more h3 { font-size: 1.15rem; margin: 0 0 8px; }
.sp-more p { font-size: 0.92rem; color: var(--ink-500); line-height: 1.6; margin: 0; }

/* ================= CAPABILITY DECK (stacked, click-to-front cards) ================= */
.deck-wrap { max-width: 620px; margin: 0 auto; padding: 70px 40px 0 70px; }
.deck { position: relative; height: 500px; }

.deck-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-medium);
  border-radius: var(--radius-2xl);
  padding: 34px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transform-origin: 85% 15%;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}
.deck-card[data-stack="0"] { transform: translate(0, 0) rotate(0deg) scale(1); z-index: 5; box-shadow: var(--shadow-lg); cursor: grab; touch-action: none; }
/* click start point: snap here instantly, then transition (via the base rule) into
   whichever data-stack position gets applied next frame - reads as a deliberate slide */
.deck-card.is-entering {
  transition: none;
  transform: translate(-100px, -86px) rotate(-17deg) scale(0.9);
  z-index: 6;
}
/* grab-and-drag: transform is driven directly by pointer position via inline style,
   so the CSS transition must step aside until the pointer is released */
.deck-card.is-dragging {
  transition: none;
  cursor: grabbing;
  z-index: 6;
}
.deck-card[data-stack="1"] { transform: translate(-24px, -20px) rotate(-4deg) scale(0.98); z-index: 4; }
.deck-card[data-stack="2"] { transform: translate(-44px, -36px) rotate(-7deg) scale(0.96); z-index: 3; }
.deck-card[data-stack="3"] { transform: translate(-62px, -50px) rotate(-10deg) scale(0.94); z-index: 2; }
.deck-card[data-stack="4"] { transform: translate(-78px, -62px) rotate(-13deg) scale(0.92); z-index: 1; }
.deck-card:not([data-stack="0"]):hover { border-color: rgba(79, 70, 229, 0.3); box-shadow: var(--shadow-md); }

/* gradient-ring reveal on the front card, echoes cards elsewhere on the site */
.deck-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--grad-border);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  pointer-events: none;
}
.deck-card[data-stack="0"]::before { opacity: 1; }

.deck-card-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.deck-icon {
  width: 48px; height: 48px;
  border-radius: 13px;
  display: grid; place-items: center;
  flex-shrink: 0;
  background: rgba(79, 70, 229, 0.08);
  border: 1px solid rgba(79, 70, 229, 0.15);
  color: var(--indigo-600);
  transition: background 0.4s var(--ease), color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.deck-icon svg { width: 20px; height: 20px; }
.deck-card[data-stack="0"] .deck-icon { background: var(--grad-primary); color: #fff; border-color: transparent; box-shadow: var(--shadow-glow); }
.deck-index { font-family: 'SFMono-Regular', Consolas, Menlo, monospace; font-size: 0.7rem; font-weight: 700; color: var(--ink-300); letter-spacing: 0.05em; display: block; }
.deck-title { font-size: 1.12rem; margin: 2px 0 0; }

.deck-card-detail { display: none; position: relative; z-index: 1; margin-top: 26px; min-width: 0; }
.deck-card[data-stack="0"] .deck-card-detail { display: block; animation: deckFade 0.5s var(--ease); }
@keyframes deckFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.deck-hook { display: block; color: var(--rose-600); font-weight: 700; font-size: 0.84rem; margin-bottom: 10px; }
.deck-card-detail p { color: var(--ink-500); line-height: 1.7; margin: 0 0 18px; max-width: 460px; overflow-wrap: break-word; }
.deck-visual { margin-top: 20px; max-width: 380px; }

.deck-dots { display: flex; justify-content: center; gap: 10px; margin-top: 40px; }
.deck-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: none;
  background: var(--line-strong);
  cursor: pointer;
  padding: 0;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease-spring);
}
.deck-dot.is-active { background: var(--grad-primary); transform: scale(1.4); }

.mv-prompt .row-in {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-alt);
  border: 1px solid var(--line-medium);
  border-radius: 100px;
  padding: 6px 6px 6px 14px;
  font-size: 0.76rem;
  color: var(--ink-400);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mv-prompt .row-in .go {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--grad-primary);
  display: grid; place-items: center; color: #fff; flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(79,70,229,0.3);
}
.mv-prompt .connector { width: 2px; height: 18px; margin-left: 21px; background: var(--line-strong); }
.mv-prompt .row-mid {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 4px 3px 14px;
  font-size: 0.75rem; font-weight: 600; color: var(--ink-500);
}
.mv-prompt .row-mid .spin {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2.5px solid var(--line-strong); border-top-color: var(--indigo-500);
  animation: spin 0.85s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }
.mv-prompt .row-out {
  display: flex; align-items: center; gap: 12px;
  background: #fff;
  border: 1px solid var(--line-medium);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  box-shadow: var(--shadow-xs);
}
.mv-prompt .row-out .lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.mv-prompt .row-out .lines span { display: block; height: 5px; border-radius: 3px; background: var(--surface-alt); }
.mv-prompt .row-out .lines span:nth-child(1) { width: 78%; }
.mv-prompt .row-out .lines span:nth-child(2) { width: 60%; }
.mv-prompt .row-out .lines span:nth-child(3) { width: 42%; }
.mv-prompt .row-out .badge-ready {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.66rem; font-weight: 800; color: #047857;
  background: rgba(16, 185, 129, 0.12); padding: 4px 10px; border-radius: 100px;
  flex-shrink: 0; white-space: nowrap;
}

.mv-gauge { display: flex; align-items: center; gap: 12px; }
.mv-gauge svg { width: 38px; height: 38px; }
.mv-gauge svg circle.bg { stroke: var(--line-strong); }
.mv-gauge svg circle.fg { stroke: url(#ringGradient); stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; }
.mv-gauge .num { font-size: 1.15rem; font-weight: 800; color: var(--ink-900); line-height: 1.2; }
.mv-gauge .lab { font-size: 0.72rem; color: var(--ink-400); font-weight: 600; }

.mv-chat { display: flex; flex-direction: column; gap: 7px; }
.mv-chat .bubble { max-width: 88%; padding: 8px 12px; border-radius: 13px; font-size: 0.74rem; font-weight: 600; line-height: 1.35; }
.mv-chat .bubble.in { align-self: flex-start; background: var(--surface-alt); color: var(--ink-700); border-bottom-left-radius: 4px; border: 1px solid var(--line-medium); }
.mv-chat .bubble.out { align-self: flex-end; background: var(--grad-primary); color: #fff; border-bottom-right-radius: 4px; box-shadow: var(--shadow-xs); }

.mv-sign { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mv-sign svg { flex-shrink: 0; height: 26px; }
.mv-sign .badge-ready {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.66rem; font-weight: 800; color: #047857;
  background: rgba(16, 185, 129, 0.12); padding: 4px 10px; border-radius: 100px;
  flex-shrink: 0; white-space: nowrap;
}

.mv-files { display: flex; flex-direction: column; gap: 8px; }
.mv-files .frow { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 600; color: var(--ink-700); }
.mv-files .frow .fi { width: 24px; height: 24px; border-radius: 7px; background: var(--surface-tint); display: grid; place-items: center; color: var(--indigo-600); flex-shrink: 0; }
.mv-files .frow span.name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-files .frow span.dim { color: var(--ink-400); font-weight: 500; font-size: 0.7rem; flex-shrink: 0; }

.chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald-500); flex-shrink: 0; }
.badge-soft {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.72rem; font-weight: 700; padding: 5px 12px; border-radius: 100px;
  background: var(--surface-tint); color: var(--indigo-600); border: 1px solid var(--line-subtle);
}



/* ================= E-SIGN TIERS ================= */
.esign-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 38px;
}
.esign-tier-card {
  background: var(--surface);
  border: 1px solid var(--line-medium);
  border-radius: var(--radius-xl);
  padding: 38px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.esign-tier-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}
.tier-badge {
  display: inline-block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.7rem;
  color: var(--indigo-600);
  margin-bottom: 18px;
}
.esign-tier-card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.esign-tier-card .lede-sm { font-size: 0.9rem; color: var(--ink-500); margin-bottom: 24px; line-height: 1.6; }
.tier-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.tier-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 0.88rem; color: var(--ink-700); line-height: 1.45; }
.tier-list li svg { color: var(--emerald-500); flex-shrink: 0; margin-top: 2px; }

.extensible-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; }
.extensible-card {
  background: var(--surface-alt);
  border-radius: var(--radius-md);
  padding: 24px;
  border: 1px solid var(--line-medium);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
}
.extensible-card:hover {
  transform: translateY(-4px);
  border-color: rgba(79, 70, 229, 0.25);
}
.extensible-card .ic { color: var(--indigo-600); margin-bottom: 12px; display: block; }
.extensible-card h4 { font-size: 0.95rem; margin-bottom: 8px; }
.extensible-card p { font-size: 0.85rem; color: var(--ink-500); margin-bottom: 0; line-height: 1.55; }



/* ================= LOCALIZED COMPLIANCE (COUNTRY-AWARE, AUTO-SYNCED) ================= */
/* A single control decides the country for the whole page: detection in
   includes/geo.php, overridable via the sitewide switcher in the utility
   bar / mobile menu. Both this hero banner and the panel below just render
   $visitorProfile - there is no independent, page-local country picker to
   fall out of sync with the rest of the page. */
/* Country accent defaults - overridden per market by the inline custom
   properties on <body data-country="..."> (see includes/header.php). */
:root { --ctry-a: #4f46e5; --ctry-b: #8b5cf6; --ctry-soft: rgba(79, 70, 229, 0.2); }

.geo-hero-banner {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px 9px 22px;
  border-radius: 100px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--ctry-soft);
  box-shadow: var(--shadow-xs);
  color: var(--ink-700);
  font-size: 0.84rem;
  margin-bottom: 18px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
/* Country stripe - the clearest "this page is localized" signal, in the
   market's own colours rather than the brand indigo. */
.geo-hero-banner::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, var(--ctry-a), var(--ctry-b));
}
.geo-hero-banner:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); color: var(--ink-700); }
.geo-hero-banner strong { color: var(--ink-900); }
.geo-hero-flag {
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  padding: 4px 7px;
  border-radius: 6px;
  background: var(--ctry-soft);
  color: var(--ink-800);
}
.geo-hero-banner svg { color: var(--ctry-a); flex-shrink: 0; }
.geo-panel-switch-hint {
  text-align: center;
  font-size: 0.86rem;
  color: var(--ink-400);
  margin: 22px 0 0;
}
.geo-panel-wrap {
  max-width: 820px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
/* Country colour bar across the top of the localized card */
.geo-panel-wrap::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ctry-a), var(--ctry-b));
}
.geo-panel-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ink-800);
  background: var(--ctry-soft);
  border: 1px solid transparent;
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 18px;
}
.geo-panel-wrap h3 { font-size: 1.4rem; margin-bottom: 12px; }
.geo-panel-wrap .lede-sm { font-size: 0.94rem; color: var(--ink-500); margin-bottom: 28px; line-height: 1.6; }



/* E-sign tiers, now nested inside the localized compliance section */
.esign-tiers-wrap { margin-top: 64px; }
.esign-tiers-title {
  text-align: center;
  font-size: 1.25rem;
  margin-bottom: 32px;
  color: var(--ink-900);
}

/* Ratings row, now inline above the testimonial grid */
.trust-bar-inline {
  margin-bottom: 52px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--line-subtle);
}

/* Invisible in-page anchor target that clears the fixed navbar */
.anchor-offset {
  display: block;
  position: relative;
  top: -110px;
  visibility: hidden;
}


/* ================= IDENTITY VERIFICATION ================= */
.verify-section { position: relative; overflow: hidden; }
.verify-eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.verify-eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ctry-a);
  box-shadow: 0 0 0 3px var(--ctry-soft);
  flex-shrink: 0;
}
.verify-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 2;
  margin-top: 56px;
}

/* Left column - numbered steps */
.verify-steps { list-style: none; padding: 0; margin: 0 0 30px; display: flex; flex-direction: column; gap: 26px; }
.verify-step { display: flex; gap: 18px; align-items: flex-start; }
.verify-step-num {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 13px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--ctry-a), var(--ctry-b));
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 20px -8px var(--ctry-soft);
}
.verify-step-body h3 { font-size: 1.04rem; margin-bottom: 6px; }
.verify-step-body p { font-size: 0.9rem; color: var(--ink-500); line-height: 1.6; margin: 0; }
.verify-badges { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 22px; }
.verify-foot {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--ink-400);
  line-height: 1.55;
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--line-subtle);
}
.verify-foot svg { color: var(--indigo-600); flex-shrink: 0; margin-top: 2px; }

/* Right column - verification card */
.verify-visual { position: relative; }
.verify-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-medium);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 24px;
}
.verify-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-subtle);
  margin-bottom: 18px;
}
.verify-card-title {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.86rem; font-weight: 700; color: var(--ink-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.verify-card-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--emerald-500);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.16);
  flex-shrink: 0;
}
.verify-brand-pill {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em;
  padding: 5px 10px; border-radius: 100px;
  background: var(--ink-900); color: #fff; flex-shrink: 0;
}

/* ID document scan mock */
.verify-scan {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.07), rgba(139, 92, 246, 0.05));
  border: 1px solid rgba(79, 70, 229, 0.14);
  padding: 20px;
  margin-bottom: 18px;
}
.verify-id-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line-medium);
  border-radius: 10px;
  padding: 14px;
  box-shadow: var(--shadow-xs);
}
.verify-id-photo {
  width: 46px; height: 54px; border-radius: 7px; flex-shrink: 0;
  background: linear-gradient(160deg, var(--surface-tint), var(--ink-200));
  position: relative;
}
.verify-id-photo::after {
  content: "";
  position: absolute; left: 50%; top: 30%;
  width: 17px; height: 17px; margin-left: -8.5px;
  border-radius: 50%;
  background: var(--ink-300);
  box-shadow: 0 20px 0 -2px var(--ink-300);
}
.verify-id-lines { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.verify-id-lines span { display: block; height: 7px; border-radius: 4px; background: var(--surface-tint); }
.verify-scan-line {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 34%;
  background: linear-gradient(180deg, rgba(79, 70, 229, 0) 0%, rgba(79, 70, 229, 0.16) 70%, rgba(79, 70, 229, 0.32) 100%);
  border-bottom: 1.5px solid rgba(79, 70, 229, 0.55);
  animation: verifyScan 2.8s cubic-bezier(0.55, 0, 0.45, 1) infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes verifyScan {
  0%, 100% { transform: translateY(-20%); opacity: 0; }
  15% { opacity: 1; }
  50% { transform: translateY(190%); opacity: 1; }
  65% { opacity: 0; transform: translateY(190%); }
}
@media (prefers-reduced-motion: reduce) {
  .verify-scan-line { animation: none; opacity: 0; }
}
.verify-scan-tag {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px;
  font-size: 0.72rem; font-weight: 700;
  color: var(--emerald-600);
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.22);
  padding: 5px 11px; border-radius: 100px;
}

.verify-rows { display: flex; flex-direction: column; gap: 2px; margin-bottom: 18px; }
.verify-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-subtle);
}
.verify-row:last-child { border-bottom: none; }
.verify-row-label { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; font-weight: 600; color: var(--ink-700); }
.verify-row-tick {
  width: 19px; height: 19px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(16, 185, 129, 0.13);
  color: var(--emerald-600);
}
.verify-row-value { font-size: 0.82rem; font-weight: 700; color: var(--ink-500); flex-shrink: 0; }

.verify-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid var(--line-subtle);
}
.verify-stat-num { display: block; font-size: 1.5rem; font-weight: 800; color: var(--ink-900); line-height: 1.1; }
.verify-stat-lbl { display: block; font-size: 0.74rem; color: var(--ink-400); font-weight: 600; margin-top: 2px; }
.verify-status-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.78rem; font-weight: 700; color: #fff;
  background: var(--grad-primary);
  padding: 9px 15px; border-radius: 100px;
  box-shadow: 0 8px 20px -8px rgba(79, 70, 229, 0.5);
}

/* Floating proof chips */
.verify-float {
  position: absolute;
  display: flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: var(--shadow-md);
  border-radius: 14px;
  padding: 11px 14px;
  z-index: 3;
}
.verify-float strong { display: block; font-size: 0.8rem; color: var(--ink-900); }
.verify-float span { display: block; font-size: 0.7rem; color: var(--ink-400); margin-top: 1px; }
.verify-float-icon {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--grad-primary); color: #fff;
}
.verify-float-a { top: -22px; right: -18px; animation: floatBob 6s ease-in-out infinite; }
/* Sits clear of the card's footer - any less offset and it covers the stat label */
.verify-float-b { bottom: -40px; left: 14px; animation: floatBob 7s ease-in-out infinite 0.8s; }
@keyframes floatBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) {
  .verify-float-a, .verify-float-b { animation: none; }
}



/* ================= HOW IT WORKS ================= */
.timeline-wrap { position: relative; margin-top: 76px; }
.timeline-line {
  position: absolute;
  top: 36px; left: 0; right: 0;
  height: 3px;
  background: var(--line-strong);
  border-radius: 100px;
}
.timeline-line-fill {
  position: absolute; top: 0; left: 0; height: 100%;
  width: 0%;
  background: var(--grad-primary);
  border-radius: 100px;
  transition: width 1.6s var(--ease);
}
.timeline-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; position: relative; }
.timeline-step { text-align: left; }
.step-dot {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--line-strong);
  display: grid; place-items: center;
  font-weight: 800; font-size: 1.15rem; color: var(--ink-400);
  margin-bottom: 26px;
  position: relative; z-index: 2;
  transition: all 0.5s var(--ease-spring);
  box-shadow: var(--shadow-xs);
}
.timeline-step.is-active .step-dot {
  background: var(--grad-primary);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 0 10px rgba(79, 70, 229, 0.15), var(--shadow-glow);
  transform: scale(1.06);
}
.timeline-step h3 { font-size: 1.12rem; margin-bottom: 10px; }
.timeline-step p { font-size: 0.92rem; color: var(--ink-500); }



/* ================= MANIFESTO / SCROLL TEXT REVEAL ================= */
.manifesto-section {
  background: var(--ink-900);
  padding: 60px 0;
  position: relative;
  overflow: hidden;
}
.manifesto-section .glow-orb {
  position: absolute;
  width: 760px; height: 760px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 70, 229, 0.32), transparent 68%);
  filter: blur(20px);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.manifesto-section .glow-orb-2 {
  position: absolute;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(147, 51, 234, 0.25), transparent 70%);
  filter: blur(20px);
  bottom: -120px; right: 8%;
  pointer-events: none;
}
.manifesto-inner { max-width: 900px; margin: 0 auto; position: relative; z-index: 2; text-align: center; }
.manifesto-inner .eyebrow {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #c7d2fe;
  margin-bottom: 36px;
}
.text-reveal {
  font-family: var(--font-serif);
  font-size: clamp(1.65rem, 3.2vw, 2.55rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.005em;
}
.text-reveal .word {
  color: rgba(255, 255, 255, 0.2);
  transition: color 0.4s ease;
}
.text-reveal .word.is-lit { color: #ffffff; }
.text-reveal .word.accent {
  font-style: italic;
  color: rgba(168, 165, 224, 0.35);
  transition: color 0.4s ease;
}
.text-reveal .word.accent.is-lit {
  color: #a5b4fc;
  text-shadow: 0 0 20px rgba(165, 180, 252, 0.4);
}

/* ================= PRODUCT SCREENSHOTS / DASHBOARD ================= */
.section-glow { position: relative; overflow: hidden; }

.dash-feature-list {
  list-style: none;
  padding: 0;
  margin: 32px 0 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dash-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 0.96rem;
  color: var(--ink-700);
  font-weight: 500;
}
.dash-feature-list li .fi {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  flex-shrink: 0;
  margin-top: 1px;
  background: rgba(79, 70, 229, 0.1);
  color: var(--indigo-600);
  display: grid;
  place-items: center;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--indigo-600);
}
.link-arrow svg { transition: transform 0.3s var(--ease); }
.link-arrow:hover svg { transform: translateX(5px); }

.screens-stack {
  position: relative;
  min-height: 590px;
}
.browser-mock {
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(29, 26, 58, 0.08);
  border: 1px solid var(--line-medium);
  position: absolute;
}
.browser-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line-medium);
}
.browser-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}
.browser-dots span:nth-child(1) { background: #f87171; }
.browser-dots span:nth-child(2) { background: #fbbf24; }
.browser-dots span:nth-child(3) { background: #34d399; }
.browser-url {
  flex: 1;
  text-align: center;
  font-size: 0.74rem;
  color: var(--ink-400);
  background: var(--surface);
  border-radius: 100px;
  padding: 5px 14px;
  margin-right: 64px;
  border: 1px solid var(--line-subtle);
}
.browser-body { padding: 26px; }

.mock-main { width: 100%; max-width: 570px; top: 4%; left: 0; z-index: 2; }
.mock-side { width: 310px; bottom: 0%; right: -4%; z-index: 3; }



.mock-kpi-row { display: flex; gap: 14px; margin-bottom: 22px; }
.mock-kpi { flex: 1; background: var(--surface-alt); border-radius: 14px; padding: 14px 16px; border: 1px solid var(--line-medium); }
.mock-kpi .val { font-weight: 800; font-size: 1.25rem; color: var(--ink-900); }
.mock-kpi .lab { font-size: 0.72rem; color: var(--ink-400); font-weight: 700; text-transform: uppercase; margin-bottom: 6px; }
.mock-kpi .delta { font-size: 0.7rem; font-weight: 700; }
.mock-kpi .delta.up { color: #047857; }
.mock-kpi .delta.warn { color: #b45309; }
.mock-kpi .delta.neutral { color: var(--ink-400); }

.chart-wrap { position: relative; }
.chart-trend-badge {
  position: absolute; top: -14px; right: 0;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.7rem; font-weight: 800; color: #047857;
  background: rgba(16, 185, 129, 0.12); padding: 4px 10px; border-radius: 100px;
}
.mock-chart-bars { display: flex; align-items: flex-end; gap: 9px; height: 96px; position: relative; }
.mock-chart-bars span { flex: 1; border-radius: 7px 7px 0 0; background: var(--grad-primary); opacity: 0.88; }
.chart-trend { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.chart-axis { display: flex; justify-content: space-between; margin-top: 10px; }
.chart-axis span { font-size: 0.65rem; font-weight: 700; color: var(--ink-300); flex: 1; text-align: center; }

.mock-list-row { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--line-subtle); font-size: 0.84rem; }
.mock-list-row:last-child { border-bottom: none; }
.mock-avatar-sm {
  width: 28px; height: 28px; border-radius: 50%; background: var(--grad-primary); flex-shrink: 0;
  display: grid; place-items: center; color: #fff; font-size: 0.66rem; font-weight: 800;
}

.mock-badge {
  position: absolute;
  z-index: 4;
  border-radius: var(--radius-md);
  padding: 12px 18px;
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: 10px;
  font-size: 0.82rem; font-weight: 700; color: var(--ink-850);
  animation: floatY 6s ease-in-out infinite;
  white-space: nowrap;
}
.mock-badge-live { top: 0%; left: -5%; animation-delay: 0s; }
.mock-badge-trend { bottom: 26%; left: -7%; animation-delay: 1.8s; }
.mock-badge .dot-live {
  width: 8px; height: 8px; border-radius: 50%; background: var(--emerald-500);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); animation: pulseDot 2.2s var(--ease) infinite; flex-shrink: 0;
}
.mock-badge .trend-up { color: #047857; flex-shrink: 0; }




/* ================= BUILT FOR EVERY TEAM ================= */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.team-card {
  background: var(--surface);
  border: 1px solid var(--line-medium);
  border-radius: var(--radius-lg);
  padding: 24px 24px 28px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.team-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.team-illo-svg { width: 100%; height: auto; display: block; margin-bottom: 16px; }
.team-card h4 { font-size: 1.05rem; margin-bottom: 10px; }
.team-card p { font-size: 0.88rem; color: var(--ink-500); margin-bottom: 0; }




/* ================= SECURITY + REAL-TIME ================= */
.trust-split { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.trust-card {
  background: var(--surface);
  border: 1px solid var(--line-medium);
  border-radius: var(--radius-xl);
  padding: 44px;
}
.trust-card .ic-lg {
  width: 56px; height: 56px; border-radius: 16px;
  background: var(--ink-900); color: #fff;
  display: grid; place-items: center; margin-bottom: 26px;
  box-shadow: var(--shadow-md);
}
.trust-card h3 { font-size: 1.4rem; margin-bottom: 12px; }
.trust-card .lede-sm { font-size: 0.94rem; color: var(--ink-500); margin-bottom: 28px; line-height: 1.6; }
.trust-list { list-style: none; padding: 0; margin: 0 0 30px; display: flex; flex-direction: column; gap: 16px; }
.trust-list li { display: flex; align-items: flex-start; gap: 13px; font-size: 0.94rem; color: var(--ink-700); line-height: 1.5; }
.trust-list li svg { color: var(--indigo-600); flex-shrink: 0; margin-top: 3px; }

.stack-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; }
.stack-row { display: flex; align-items: center; gap: 14px; }
.stack-name { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 0.95rem; color: var(--ink-900); width: 94px; flex-shrink: 0; }
.stack-bar { flex: 1; height: 6px; border-radius: 100px; background: var(--surface-alt); overflow: hidden; }
.stack-bar span { display: block; height: 100%; background: var(--grad-primary); border-radius: 100px; }
.stack-use { font-size: 0.76rem; color: var(--ink-400); width: 110px; text-align: right; flex-shrink: 0; }

.trust-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.trust-badge-pill {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: 100px; color: var(--ink-500);
  background: var(--surface-alt);
}



/* ================= COMPARISON TABLE ================= */
.compare-table-scroll {
  position: relative;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line-medium);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.compare-table-scroll::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 36px;
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  background: linear-gradient(to right, transparent, var(--surface) 85%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.compare-table-scroll.is-scrollable::after { opacity: 1; }
.compare-table-scroll.is-scrolled-end::after { opacity: 0; }
.compare-scroll-hint {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ink-400);
  margin-top: 10px;
}
.compare-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-xl);
}
.compare-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.compare-table th, .compare-table td { padding: 20px 24px; text-align: center; border-bottom: 1px solid var(--line-subtle); font-size: 0.92rem; }
.compare-table thead th { padding-top: 28px; padding-bottom: 22px; border-bottom: 1px solid var(--line-medium); }
.compare-table th { font-weight: 700; color: var(--ink-700); }
.compare-table td:first-child, .compare-table th:first-child { text-align: left; color: var(--ink-900); font-weight: 600; }
.compare-table tr:last-child td { border-bottom: none; }
.compare-table .col-docsliy { background: var(--surface-tint); }
.compare-table th.col-docsliy { color: var(--indigo-600); font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 1.2rem; }
.compare-table .yes { color: var(--emerald-500); }
.compare-table .no { color: var(--ink-300); }
.compare-table .partial { color: var(--amber-600); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.compare-note { font-size: 0.8rem; color: var(--ink-400); margin-top: 20px; text-align: center; max-width: 660px; margin-left: auto; margin-right: auto; }



/* ================= TESTIMONIALS ================= */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.testi-card {
  background: var(--surface);
  border: 1px solid var(--line-medium);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: all 0.4s var(--ease);
}
.testi-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.stars { color: #f59e0b; display: flex; gap: 4px; margin-bottom: 18px; }
.testi-quote { font-family: var(--font-serif); font-size: 1.08rem; font-weight: 400; line-height: 1.55; color: var(--ink-700); margin-bottom: 24px; }
.testi-person { display: flex; align-items: center; gap: 14px; }
.testi-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--grad-primary);
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 0.88rem;
  flex-shrink: 0; box-shadow: var(--shadow-xs);
}
.testi-name { font-weight: 700; font-size: 0.9rem; color: var(--ink-900); }
.testi-role { font-size: 0.8rem; color: var(--ink-400); }

.testi-video-card {
  grid-column: span 3;
  border-radius: var(--radius-xl);
  background: var(--ink-900);
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.testi-video-thumb {
  position: relative;
  /* Placeholder still — swap assets/img/testimonial-video-placeholder.svg for
     the real poster frame. The gradient stays underneath as the fallback. */
  background-color: var(--ink-900);
  background-image: url("../img/testimonial-video-placeholder.svg"),
                    linear-gradient(135deg, var(--ink-900), var(--indigo-700));
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  min-height: 230px;
  display: grid; place-items: center;
}
.testi-video-play {
  width: 68px; height: 68px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(8px);
  display: grid; place-items: center; color: #fff;
  transition: transform 0.35s var(--ease-spring);
  cursor: pointer;
}
.testi-video-thumb:hover .testi-video-play { transform: scale(1.12); }
.testi-video-copy { padding: 44px; color: #fff; align-self: center; }
.testi-video-copy .stars { color: #fbbf24; }
.testi-video-copy p { font-family: var(--font-serif); color: #e2e4f6; font-size: 1.18rem; line-height: 1.55; }



/* ================= PRICING ================= */
.pricing-toggle-wrap { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 56px; }
.toggle-switch {
  position: relative;
  width: 58px;
  height: 32px;
  background: var(--surface-tint);
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  cursor: pointer;
  padding: 0;
}
.toggle-switch .knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--grad-primary);
  transition: transform 0.35s var(--ease-spring);
  box-shadow: var(--shadow-xs);
}
.toggle-switch.is-annual .knob { transform: translateX(26px); }
.save-chip { font-size: 0.74rem; font-weight: 800; color: #047857; background: rgba(16, 185, 129, 0.14); padding: 5px 12px; border-radius: 100px; }

.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; }
.price-card {
  background: var(--surface);
  border: 1px solid var(--line-medium);
  border-radius: var(--radius-xl);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  transition: all 0.4s var(--ease);
}
.price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.price-featured {
  position: relative;
  background: var(--ink-900);
  color: #fff;
  border: none;
  transform: scale(1.03);
  box-shadow: var(--shadow-lg), 0 0 40px rgba(79, 70, 229, 0.25);
}
.price-featured:hover { transform: scale(1.03) translateY(-6px); }
.price-featured::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background: var(--grad-border);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: borderSpin 5s linear infinite;
}
@keyframes borderSpin {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
.price-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--grad-primary); color: #fff; font-size: 0.74rem; font-weight: 800;
  padding: 6px 18px; border-radius: 100px; box-shadow: var(--shadow-glow);
  white-space: nowrap;
}
.price-plan-name { font-weight: 700; font-size: 1.1rem; margin-bottom: 6px; }
.price-featured .price-plan-name { color: #fff; }
.price-plan-desc { font-size: 0.88rem; color: var(--ink-400); margin-bottom: 24px; }
.price-featured .price-plan-desc { color: #a5b4fc; }
.price-amount { display: flex; align-items: baseline; gap: 6px; margin-bottom: 28px; }
.price-amount .num { font-family: var(--font-serif); font-size: 2.85rem; font-weight: 600; color: var(--ink-900); }
.price-featured .price-amount .num { color: #fff; }
.price-amount .per { font-size: 0.88rem; color: var(--ink-400); font-weight: 600; }
.price-featured .price-amount .per { color: #a5b4fc; }
.price-features { list-style: none; padding: 0; margin: 0 0 32px; flex: 1; }
.price-features li { display: flex; gap: 11px; padding: 10px 0; font-size: 0.9rem; }
.price-features svg { color: var(--emerald-500); flex-shrink: 0; margin-top: 2px; }
.price-featured .price-features svg { color: #34d399; }
.price-featured .btn-grad { background: #fff; color: var(--ink-900) !important; box-shadow: var(--shadow-md); }
.price-featured .btn-grad:hover { background: var(--indigo-600); color: #fff !important; }



/* ================= PLAN COMPARISON MATRIX ================= */
.plan-compare-scroll { overflow-x: auto; }
.plan-compare {
  min-width: 760px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line-medium);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.pc-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.7fr) repeat(3, 1fr);
  border-bottom: 1px solid var(--line-subtle);
  transition: background 0.3s var(--ease);
}
.pc-row:last-child { border-bottom: none; }
.pc-row:not(.pc-head):not(.pc-category):hover { background: rgba(79, 70, 229, 0.035); }
.pc-cell {
  padding: 16px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  color: var(--ink-600);
  text-align: center;
  position: relative;
}
.pc-cell.pc-feature { justify-content: flex-start; text-align: left; color: var(--ink-800); font-weight: 500; }
.pc-cell.pc-featured-col { background: var(--grad-soft-indigo); font-weight: 600; color: var(--ink-900); }

/* category divider rows */
.pc-category .pc-cell {
  background: var(--surface-alt);
  padding: 13px 22px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--indigo-700);
  justify-content: flex-start;
}
.pc-category { grid-template-columns: 1fr; }
.pc-category .pc-cell { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.pc-category .pc-cell svg { color: var(--indigo-500); }

/* header row */
.pc-head { grid-template-columns: minmax(220px, 1.7fr) repeat(3, 1fr); background: var(--surface-alt); border-bottom: 1px solid var(--line-medium); }
.pc-head .pc-cell { padding: 30px 22px 24px; flex-direction: column; gap: 6px; }
.pc-plan-name { font-weight: 700; font-size: 1.02rem; color: var(--ink-900); }
.pc-plan-price { font-family: var(--font-serif); font-size: 1.7rem; font-weight: 600; color: var(--ink-900); }
.pc-plan-price .pc-per { font-family: var(--font-sans); font-size: 0.76rem; font-weight: 600; color: var(--ink-400); }
.pc-head .pc-featured-col { position: relative; }
.pc-featured-badge {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--grad-primary);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 0 0 10px 10px;
  box-shadow: var(--shadow-glow);
  white-space: nowrap;
}
.pc-cta { margin-top: 10px; width: 100%; justify-content: center; }

/* value icons */
.pc-yes { color: var(--emerald-500); }
.pc-no { color: var(--ink-300); }
.pc-cell svg.pc-icon { transition: transform 0.3s var(--ease-spring); }
.pc-row:hover .pc-cell svg.pc-icon { transform: scale(1.18); }

/* subtle shimmer sweep across the featured header cell */
.pc-head .pc-featured-col::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: pcShimmer 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pcShimmer {
  0% { background-position: 140% 0; }
  55%, 100% { background-position: -60% 0; }
}



/* ================= FAQ ACCORDION ================= */
.faq-wrap { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq-item {
  border-radius: 20px;
  overflow: hidden;
  background: var(--surface-tint);
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}
.faq-item:not(.is-open):hover { background: rgba(79, 70, 229, 0.1); }
.faq-item.is-open {
  background: var(--grad-primary);
  box-shadow: var(--shadow-glow);
}
.faq-question {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px;
  padding: 22px 26px;
  background: none; border: none; text-align: left;
  font-weight: 700; font-size: 1.02rem; color: var(--ink-850);
  cursor: pointer;
  transition: color 0.3s var(--ease);
}
.faq-item.is-open .faq-question { color: #fff; }
.faq-question .chev { transition: transform 0.4s var(--ease-spring), color 0.3s var(--ease); color: var(--indigo-600); flex-shrink: 0; }
.faq-item.is-open .faq-question .chev { transform: rotate(180deg); color: #fff; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.45s var(--ease); }
.faq-answer-inner { padding: 0 26px 24px; color: var(--ink-500); font-size: 0.94rem; line-height: 1.65; }
.faq-item.is-open .faq-answer-inner { color: rgba(255, 255, 255, 0.85); }
/* Links inside an answer have to flip with the panel — an open item sits on the
   primary gradient, where the default indigo link colour is invisible. */
.faq-answer-inner a {
  color: var(--indigo-600);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.faq-item.is-open .faq-answer-inner a {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, 0.55);
}
.faq-item.is-open .faq-answer-inner a:hover { text-decoration-color: #fff; }

/* ================= FINAL CTA BANNER ================= */
.final-cta {
  border-radius: var(--radius-2xl);
  background: var(--grad-primary);
  padding: 44px 44px;
  text-align: center;
  position: relative;
  overflow: hidden;
  color: #fff;
  box-shadow: var(--shadow-lg), var(--shadow-glow);
}
.final-cta h2 { color: #fff; }
.final-cta .lede { color: rgba(255, 255, 255, 0.88); max-width: 580px; margin: 0 auto 38px; }
.final-cta .glow {
  position: absolute; width: 440px; height: 440px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.18); filter: blur(60px);
}
.final-cta .glow-1 { top: -120px; left: -80px; }
.final-cta .glow-2 { bottom: -140px; right: -60px; }
.final-cta .btn-ghost { background: #fff; border-color: transparent; }
/* Gradient text on this panel has to stay light the whole way across: the
   panel is itself indigo-to-purple, so any stop in that range (including
   .text-gradient-neon's orchid mid-point) drops to ~2:1 and disappears.
   Scoped to the container so it applies to any gradient text placed here. */
.final-cta .text-gradient {
  background: linear-gradient(135deg, #ffffff 0%, #ddd6fe 45%, #a5f3fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.final-cta .btn-grad { background: rgba(255,255,255,0.18); box-shadow: none; border: 1px solid rgba(255,255,255,0.4); }
.final-cta .btn-grad:hover { background: rgba(255,255,255,0.28); }

/* ================= AI WORKFLOW SHOWCASE ================= */
.workflow-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background: linear-gradient(160deg, var(--ink-950) 0%, var(--ink-850) 55%, var(--ink-800) 100%);
  padding: 52px 44px 44px;
  margin-top: 12px;
  box-shadow: var(--shadow-lg);
}
.workflow-flow {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 40px 0 36px;
}
.flow-node {
  flex: 1;
  min-width: 0;
  text-align: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: 28px 18px;
  transition: transform 0.4s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease);
}
.flow-node:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.22);
}
.flow-node-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--grad-primary);
  color: #fff;
  box-shadow: var(--shadow-glow);
}
.flow-node h4 {
  color: #fff;
  font-size: 1.05rem;
  margin: 0 0 6px;
}
.flow-node p {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.85rem;
  margin: 0;
  line-height: 1.4;
}
.flow-arrow-row {
  flex: 0 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flow-arrow {
  position: relative;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.16);
}
.flow-arrow span {
  position: absolute;
  right: 2px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(255, 255, 255, 0.45);
  border-top: 2px solid rgba(255, 255, 255, 0.45);
  transform: translateY(-50%) rotate(45deg);
}
.workflow-prompt-card {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 660px;
  margin: 0 auto;
  padding: 16px 22px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  color: #e5e3f7;
  font-size: 0.92rem;
}
.workflow-prompt-card svg { color: #a5b4fc; flex-shrink: 0; }
.workflow-prompt-card .caret {
  margin-left: auto;
  width: 2px;
  height: 18px;
  background: #a5b4fc;
  animation: caretBlink 1s steps(1) infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }



/* ================= COMPARISON & STATS ================= */
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 44px 0 28px;
}
.compare-card {
  border-radius: var(--radius-lg);
  padding: 34px;
  border: 1px solid var(--line-medium);
  background: var(--surface);
}
.compare-old { background: linear-gradient(165deg, #fdf4f4 0%, #ffffff 60%); border-color: rgba(220, 38, 38, 0.14); }
.compare-new { background: linear-gradient(165deg, rgba(79, 70, 229, 0.06) 0%, #ffffff 60%); border-color: rgba(79, 70, 229, 0.2); box-shadow: var(--shadow-md); }
.compare-label {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 7px 15px;
  border-radius: 100px;
  margin-bottom: 22px;
}
.compare-old .compare-label { background: rgba(220, 38, 38, 0.09); color: #b91c1c; }
.compare-new .compare-label { background: var(--grad-primary); color: #fff; }
.compare-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.compare-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 0.94rem; line-height: 1.55; }
.compare-old .compare-list li { color: var(--ink-500); }
.compare-old .compare-list li svg { color: #dc2626; flex-shrink: 0; margin-top: 3px; }
.compare-new .compare-list li { color: var(--ink-800); font-weight: 500; }
.compare-new .compare-list li svg { color: var(--emerald-500); flex-shrink: 0; margin-top: 3px; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.stat-card {
  text-align: center;
  padding: 32px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-medium);
  background: var(--surface);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.stat-num {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(2rem, 3vw, 2.6rem);
  line-height: 1;
}
.stat-num span {
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-caption { margin: 12px 0 0; font-size: 0.88rem; color: var(--ink-500); }



/* ================= FOOTER ================= */
.footer-premium {
  background: var(--ink-900);
  color: #b6bad6;
  padding: 84px 0 32px;
  position: relative;
  overflow: hidden;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 44px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand .brand-mark { color: #fff; }
.footer-brand p { color: #8a8eb0; font-size: 0.92rem; margin: 20px 0 24px; max-width: 290px; }
.footer-col h5 { color: #fff; font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 20px; font-weight: 700; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 13px; }
.footer-col a { font-size: 0.92rem; color: #a5a9c9; transition: color 0.25s ease; }
.footer-col a:hover { color: #ffffff; }

.newsletter-form { display: flex; gap: 8px; margin-top: 6px; max-width: 350px; }
.newsletter-form input {
  flex: 1; padding: 13px 18px; border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.07);
  color: #fff; font-size: 0.9rem;
}
.newsletter-form input::placeholder { color: #7c80a2; }
.newsletter-form input:focus { outline: none; border-color: var(--indigo-500); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25); }
.newsletter-form button {
  width: 46px; height: 46px; border-radius: 50%; border: none;
  background: var(--grad-primary); color: #fff; display: grid; place-items: center; flex-shrink: 0;
  transition: transform 0.3s var(--ease-spring); cursor: pointer;
}
.newsletter-form button:hover { transform: scale(1.1); }

.footer-bottom { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding-top: 28px; flex-wrap: wrap; gap: 18px; }
.footer-bottom p { font-size: 0.84rem; color: #7c80a2; margin: 0; }
.social-icons { display: flex; gap: 10px; }
.social-icons a {
  width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,0.06);
  display: grid; place-items: center; color: #b6bad6; transition: all 0.3s var(--ease);
  border: 1px solid rgba(255,255,255,0.08);
}
.social-icons a:hover { background: var(--grad-primary); color: #fff; transform: translateY(-3px); }




.footer-watermark {
  position: absolute;
  left: 0; right: 0; bottom: -0.08em;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(4.5rem, 14vw, 11.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.06);
  pointer-events: none;
  user-select: none;
  line-height: 1;
  z-index: 0;
}

::selection { background: var(--indigo-500); color: #fff; }

/* =========================================================
   Redesigned Full-Width Industries Dark Studio
   ========================================================= */

.industries-section {
  position: relative;
  width: 100%;
  background: linear-gradient(165deg, #090818 0%, #0d0b24 40%, #060512 100%);
  border-top: 1px solid rgba(129, 140, 248, 0.2);
  border-bottom: 1px solid rgba(129, 140, 248, 0.2);
  padding: 60px 0;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Ambient Pulsing Glow Spots (Edge-to-Edge) */
.ind-studio-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  opacity: 0.22;
}
.ind-glow-1 {
  width: 550px;
  height: 550px;
  background: #6366f1;
  top: -150px;
  left: -100px;
  animation: glowPulse 8s infinite alternate ease-in-out;
}
.ind-glow-2 {
  width: 500px;
  height: 500px;
  background: #a855f7;
  bottom: -120px;
  right: -100px;
  animation: glowPulse 10s infinite alternate ease-in-out 2s;
}
.ind-glow-3 {
  width: 400px;
  height: 400px;
  background: #06b6d4;
  top: 35%;
  left: 40%;
  animation: glowPulse 12s infinite alternate ease-in-out 4s;
}

@keyframes glowPulse {
  0% { transform: scale(1) translate(0, 0); opacity: 0.18; }
  50% { transform: scale(1.15) translate(30px, -20px); opacity: 0.3; }
  100% { transform: scale(0.95) translate(-20px, 30px); opacity: 0.15; }
}

/* Dark Header Typography */
.style-dark-head {
  position: relative;
  z-index: 2;
  margin-bottom: 2rem;
}

.eyebrow-neon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(129, 140, 248, 0.3);
  color: #a5b4fc;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
}

.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 10px #34d399;
  animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.5; }
}

/* Light-on-dark counterpart to .text-gradient, whose --grad-text runs from
   near-black indigo and vanishes on the dark CTA panels. Combine the two
   (class="text-gradient text-gradient-neon") to keep the italic
   handling while swapping only the gradient. */
.text-gradient-neon {
  background: linear-gradient(135deg, #a5b4fc 0%, #c084fc 50%, #38bdf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.lede-dark {
  font-size: 1rem;
  line-height: 1.7;
  color: #cbd5e1;
  max-width: 660px;
  margin: 0 auto;
}

/* Tab Navigation Strip */
.ind-tab-track-wrap {
  position: relative;
  z-index: 2;
}

.ind-tabs-neon {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 2.5rem;
}

.ind-tab-neon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  white-space: nowrap;
  backdrop-filter: blur(8px);
}

.ind-tab-neon:hover {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(129, 140, 248, 0.4);
  color: #f1f5f9;
  transform: translateY(-2px);
}

.ind-tab-neon.is-active {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
  font-weight: 700;
  transform: translateY(-2px);
}

.ind-tab-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: currentColor;
}

/* Studio Showcase Grid */
.ind-panels-container {
  position: relative;
  z-index: 2;
}

.ind-panel-studio {
  display: none;
}

.ind-panel-studio.is-active {
  display: block;
  animation: studioFadeUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes studioFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ind-studio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}

/* Left Copy Column */
.ind-badge-neon {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
}

.ib-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.ind-badge-tech    { background: rgba(99,102,241,0.18); border: 1px solid rgba(129,140,248,0.35); color: #a5b4fc; }
.ind-badge-finance { background: rgba(16,185,129,0.18); border: 1px solid rgba(52,211,153,0.35); color: #6ee7b7; }
.ind-badge-health  { background: rgba(244,63,94,0.18); border: 1px solid rgba(251,113,133,0.35); color: #fda4af; }
.ind-badge-realestate { background: rgba(245,158,11,0.18); border: 1px solid rgba(251,191,36,0.35); color: #fcd34d; }
.ind-badge-legal   { background: rgba(168,85,247,0.18); border: 1px solid rgba(192,132,252,0.35); color: #e9d5ff; }
.ind-badge-gov     { background: rgba(14,165,233,0.18); border: 1px solid rgba(56,189,248,0.35); color: #7dd3fc; }
.ind-badge-mfg     { background: rgba(249,115,22,0.18); border: 1px solid rgba(251,146,60,0.35); color: #fdba74; }
.ind-badge-edu     { background: rgba(236,72,153,0.18); border: 1px solid rgba(244,114,182,0.35); color: #f9a8d4; }

.ind-studio-title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.28;
  margin: 0 0 0.85rem;
  letter-spacing: -0.02em;
}

.text-glow-indigo { background: linear-gradient(135deg, #a5b4fc, #818cf8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.text-glow-emerald { background: linear-gradient(135deg, #6ee7b7, #34d399); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.text-glow-rose { background: linear-gradient(135deg, #fda4af, #f43f5e); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.text-glow-amber { background: linear-gradient(135deg, #fcd34d, #fbbf24); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.text-glow-purple { background: linear-gradient(135deg, #e9d5ff, #c084fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.text-glow-cyan { background: linear-gradient(135deg, #7dd3fc, #38bdf8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.text-glow-orange { background: linear-gradient(135deg, #fdba74, #fb923c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.text-glow-pink { background: linear-gradient(135deg, #f9a8d4, #f472b6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.ind-studio-desc {
  font-size: 0.95rem;
  line-height: 1.68;
  color: #cbd5e1;
  margin: 0 0 1.5rem;
}

/* Feature List Cards */
.ind-feature-grid {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.75rem;
}

.if-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.875rem;
  color: #e2e8f0;
  line-height: 1.48;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0.55rem 0.85rem;
  border-radius: 12px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.if-item:hover {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(129, 140, 248, 0.25);
}

.if-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 800;
  margin-top: 0.1rem;
  flex-shrink: 0;
}

/* Metric Boxes */
.ind-metrics-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  margin-bottom: 1.75rem;
}

.ind-metric-box {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 0.75rem 0.85rem;
  text-align: center;
}

.im-num {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  background: linear-gradient(135deg, #a5b4fc, #38bdf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.15rem;
}

.im-lbl {
  font-size: 0.68rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* CTA Row */
.ind-action-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.btn-studio {
  padding: 0.65rem 1.4rem;
  font-size: 0.85rem;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
}

.ind-standards-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.ist-tag {
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
}

/* Right Visual Column */
.ind-visual-col {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ind-visual-card-studio {
  width: 100%;
  max-width: 410px;
  background: rgba(15, 14, 35, 0.9);
  border: 1px solid rgba(129, 140, 248, 0.3);
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(99, 102, 241, 0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
  z-index: 2;
}

/* Laser Scanner Animation */
.ind-laser-scan {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #818cf8, #38bdf8, transparent);
  box-shadow: 0 0 15px #818cf8;
  animation: laserScan 3.5s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 10;
}

@keyframes laserScan {
  0% { top: 0%; opacity: 0.8; }
  50% { opacity: 1; }
  100% { top: 98%; opacity: 0.8; }
}

.ivs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ivs-h-left {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  overflow: hidden;
}

.ivs-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px #34d399;
  flex-shrink: 0;
}

.ivs-doc-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ivs-badge-ok {
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  background: rgba(52, 211, 153, 0.15);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.35);
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.2);
  white-space: nowrap;
}

.ivs-body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 1.1rem;
}

.ivs-clause-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.78rem;
}

.ivs-c-label {
  color: #cbd5e1;
  font-weight: 500;
}

.ivs-c-status.ok {
  color: #34d399;
  font-weight: 700;
  font-size: 0.72rem;
}

.ivs-c-status.warn {
  color: #fbbf24;
  font-weight: 700;
  font-size: 0.72rem;
}

.ivs-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ivs-score-badge {
  display: flex;
  flex-direction: column;
}

.ivs-score-val {
  font-size: 1.4rem;
  font-weight: 900;
  color: #34d399;
  text-shadow: 0 0 12px rgba(52, 211, 153, 0.4);
  line-height: 1;
}

.ivs-score-lbl {
  font-size: 0.65rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  margin-top: 0.15rem;
}

.ivs-status-pill {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  color: #a5b4fc;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(129, 140, 248, 0.25);
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
}

/* Floating Hologram Badges */
.ind-float-pill {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.85rem;
  border-radius: 14px;
  background: rgba(13, 12, 30, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  z-index: 5;
  animation: floatAnim 4s ease-in-out infinite alternate;
}

.float-top-right {
  top: -14px;
  right: -14px;
}

.float-bottom-left {
  bottom: -14px;
  left: -14px;
  animation-delay: 2s;
}

@keyframes floatAnim {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-8px); }
}

.ifp-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.ifp-text {
  display: flex;
  flex-direction: column;
}

.ifp-text strong {
  font-size: 0.75rem;
  color: #ffffff;
  line-height: 1.2;
}

.ifp-text span {
  font-size: 0.65rem;
  color: #94a3b8;
}

/* Responsive Rules for Full-Width Dark Studio */




/* ================= SHARED SUBPAGE HERO ================= */
.subpage-hero {
  padding: 192px 0 60px;
  position: relative;
  text-align: center;
}
.subpage-hero-inner {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.subpage-hero .eyebrow { margin-bottom: 20px; }
.subpage-hero h1 { margin-bottom: 20px; }
.subpage-hero .lede { max-width: 640px; margin: 0 auto 8px; }
.subpage-hero-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
  position: relative;
  z-index: 2;
}
.subpage-hero-stats {
  display: flex;
  gap: 40px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 44px;
  position: relative;
  z-index: 2;
}
.subpage-hero-stats .stat-mini { text-align: center; }
.subpage-hero-stats .stat-mini strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--ink-900);
}
.subpage-hero-stats .stat-mini span {
  font-size: 0.82rem;
  color: var(--ink-500);
  font-weight: 600;
}


/* ================= INDUSTRY PAGES ================= */
.usecase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.usecase-card {
  background: var(--surface);
  border: 1px solid var(--line-medium);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.usecase-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(79, 70, 229, 0.22);
}
.usecase-card h3 {
  font-size: 1.05rem;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-subtle);
}
.usecase-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.usecase-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--ink-600);
  line-height: 1.5;
}
.usecase-list li svg { color: var(--indigo-600); flex-shrink: 0; margin-top: 3px; }

.cta-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(139, 92, 246, 0.08));
  border: 1px solid rgba(79, 70, 229, 0.16);
  border-radius: var(--radius-xl);
  padding: 28px 36px;
}
.cta-strip p {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink-900);
  margin: 0;
}


.industry-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.industry-card {
  --ic: var(--indigo-600);
  --ic-soft: var(--grad-soft-indigo);
  --ic-border: rgba(79, 70, 229, 0.25);
  --ic-grad: var(--grad-primary);
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line-medium);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.industry-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--ic-grad);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.industry-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--ic-border);
}
.industry-card:hover::before { opacity: 1; }
.industry-card-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--ic-soft);
  color: var(--ic);
  margin-bottom: 18px;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.industry-card:hover .industry-card-icon { background: var(--ic-grad); color: #fff; }
.industry-card h3 { font-size: 1.02rem; margin-bottom: 8px; }
.industry-card p { font-size: 0.86rem; color: var(--ink-500); line-height: 1.55; margin-bottom: 16px; }
.industry-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.industry-card-tags span {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ic);
  background: var(--ic-soft);
  padding: 3px 9px;
  border-radius: 100px;
}
.industry-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ic);
}
.industry-card-link svg { transition: transform 0.3s var(--ease); }
.industry-card:hover .industry-card-link svg { transform: translateX(3px); }




/* ---- Standards / compliance chips ---- */
.standards-panel {
  max-width: 940px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.standard-chip {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line-medium);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.standard-chip:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: rgba(79, 70, 229, 0.22);
}
.standard-chip .standard-chip-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-primary);
  color: #fff;
  flex-shrink: 0;
  box-shadow: var(--shadow-glow);
}
.standard-chip strong { display: block; font-size: 0.94rem; color: var(--ink-900); }
.standard-chip span { display: block; font-size: 0.78rem; color: var(--ink-500); margin-top: 2px; }


/* ---- Explore-more industry nav cards ---- */
.nav-industry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 940px;
  margin: 0 auto;
}
.nav-industry-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line-medium);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.nav-industry-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: rgba(79, 70, 229, 0.25);
}
.nav-industry-card .nic-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--grad-soft-indigo);
  color: var(--indigo-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.nav-industry-card:hover .nic-icon { background: var(--grad-primary); color: #fff; }
.nav-industry-card .nic-label {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-400);
  font-weight: 700;
  margin-bottom: 2px;
}
.nav-industry-card .nic-name { display: block; font-size: 0.92rem; font-weight: 700; color: var(--ink-900); }
.nav-industry-card .nic-arrow { margin-left: auto; color: var(--indigo-500); flex-shrink: 0; transition: transform 0.3s var(--ease); }
.nav-industry-card:hover .nic-arrow { transform: translateX(4px); }
.nav-industry-card.is-hub {
  background: var(--grad-primary);
  border-color: transparent;
  box-shadow: var(--shadow-glow);
}
.nav-industry-card.is-hub .nic-icon { background: rgba(255, 255, 255, 0.18); color: #fff; }
.nav-industry-card.is-hub .nic-label { color: rgba(255, 255, 255, 0.75); }
.nav-industry-card.is-hub .nic-name { color: #fff; }
.nav-industry-card.is-hub .nic-arrow { color: #fff; }


/* ================= CONTACT PAGE ================= */
.contact-methods-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.contact-method-card {
  background: var(--surface);
  border: 1px solid var(--line-medium);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.contact-method-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(79, 70, 229, 0.22);
}
.contact-method-card .contact-method-icon {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-primary);
  color: #fff;
  margin-bottom: 20px;
  box-shadow: var(--shadow-glow);
}
.contact-method-card h3 { font-size: 1.05rem; margin-bottom: 10px; }
.contact-method-card p { font-size: 0.88rem; color: var(--ink-500); line-height: 1.55; margin-bottom: 18px; }
.contact-method-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--indigo-600);
}
.contact-method-link svg { transition: transform 0.3s var(--ease); }
.contact-method-card:hover .contact-method-link svg { transform: translateX(3px); }

.contact-split {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: 44px;
  align-items: start;
}
.contact-form-card {
  background: var(--surface);
  border: 1px solid var(--line-medium);
  border-radius: var(--radius-xl);
  padding: 44px;
  box-shadow: var(--shadow-sm);
}
.contact-form-card h3 { font-size: 1.4rem; margin-bottom: 8px; }
.contact-form-card > p { color: var(--ink-500); margin-bottom: 32px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.form-field label {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-600);
}
.form-field input,
.form-field select,
.form-field textarea {
  font-family: inherit;
  font-size: 0.94rem;
  padding: 13px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-medium);
  background: var(--surface-alt);
  color: var(--ink-900);
  width: 100%;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}
.form-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235c568e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--ink-400); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--indigo-500);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);
  background: var(--surface);
}
.form-field textarea { resize: vertical; min-height: 130px; }
.form-consent { font-size: 0.78rem; color: var(--ink-400); margin-top: -6px; margin-bottom: 24px; line-height: 1.5; }
.form-success {
  display: none;
  align-items: center;
  gap: 12px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #047857;
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 22px;
}
.form-success.is-visible { display: flex; }
.form-success svg { flex-shrink: 0; }

.contact-sidebar { display: flex; flex-direction: column; gap: 20px; }
.contact-info-card {
  background: var(--surface);
  border: 1px solid var(--line-medium);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
}
.contact-info-card h4 { font-size: 0.95rem; margin-bottom: 16px; }
.contact-info-row { display: flex; align-items: flex-start; gap: 12px; font-size: 0.88rem; color: var(--ink-600); margin-bottom: 15px; line-height: 1.5; }
.contact-info-row:last-child { margin-bottom: 0; }
.contact-info-row svg { color: var(--indigo-600); flex-shrink: 0; margin-top: 2px; }
.contact-info-row strong { display: block; color: var(--ink-900); }
.contact-info-card.dark {
  background: linear-gradient(160deg, var(--ink-950) 0%, var(--ink-850) 100%);
  border-color: transparent;
  color: #fff;
}
.contact-info-card.dark h4 { color: #fff; }
.contact-info-card.dark .contact-info-row { color: rgba(255, 255, 255, 0.72); }
.contact-info-card.dark .contact-info-row strong { color: #fff; }
.contact-info-card.dark .contact-info-row svg { color: #a5b4fc; }




/* ================= START FREE / SIGNUP PAGE ================= */
.start-page-header {
  padding: 22px 0;
  border-bottom: 1px solid var(--line-subtle);
}
.start-login-cue { display: flex; align-items: center; gap: 14px; }
.start-login-cue span { font-size: 0.88rem; color: var(--ink-500); }

.start-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - 78px);
}
.start-form-col {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 40px;
}
.start-form-wrap { width: 100%; max-width: 420px; }
.start-form-wrap .eyebrow { margin-bottom: 18px; }
.start-form-wrap h1 { font-size: clamp(1.7rem, 2.4vw, 2.1rem); margin-bottom: 10px; }
.start-form-wrap > p.lede-sm { color: var(--ink-500); margin-bottom: 30px; font-size: 0.96rem; }

.btn-outline-sso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 20px;
  border-radius: 100px;
  border: 1px solid var(--line-medium);
  background: var(--surface);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink-800);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn-outline-sso:hover { border-color: var(--indigo-400); background: var(--surface-alt); transform: translateY(-2px); }
.btn-outline-sso svg { color: var(--indigo-600); }

.start-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 26px 0;
  color: var(--ink-400);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.start-divider::before, .start-divider::after { content: ""; flex: 1; height: 1px; background: var(--line-medium); }

.start-terms { font-size: 0.78rem; color: var(--ink-400); margin-top: 18px; line-height: 1.55; }
.start-login-hint { text-align: center; margin-top: 30px; font-size: 0.9rem; color: var(--ink-500); }
.start-login-hint a { color: var(--indigo-600); font-weight: 700; }

.start-marketing-col {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--ink-950) 0%, var(--ink-850) 55%, var(--ink-800) 100%);
  color: #fff;
  padding: 64px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.start-marketing-col .dot-grid { opacity: 0.35; }
.start-marketing-inner { position: relative; z-index: 2; max-width: 440px; }
.start-marketing-col h2 { color: #fff; font-size: clamp(1.6rem, 2.3vw, 2.05rem); margin-bottom: 22px; line-height: 1.25; }
.start-checklist { list-style: none; padding: 0; margin: 0 0 36px; display: flex; flex-direction: column; gap: 15px; }
.start-checklist li { display: flex; align-items: flex-start; gap: 12px; font-size: 0.95rem; color: rgba(255, 255, 255, 0.85); }
.start-checklist li svg { color: #34d399; flex-shrink: 0; margin-top: 3px; }

.start-quote {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  margin-bottom: 30px;
}
.start-quote p { font-family: var(--font-serif); font-style: italic; font-size: 1.02rem; color: #e5e3f7; line-height: 1.6; margin-bottom: 16px; }
.start-quote-author { display: flex; align-items: center; gap: 12px; }
.start-quote-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--grad-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.85rem; flex-shrink: 0;
}
.start-quote-author strong { display: block; font-size: 0.88rem; color: #fff; }
.start-quote-author span { font-size: 0.78rem; color: rgba(255, 255, 255, 0.6); }

.start-trust-row { display: flex; flex-wrap: wrap; gap: 10px; }
.start-trust-row span {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 6px 12px; border-radius: 100px;
}



/* ================= DEVELOPER API PAGE ================= */
.api-hero-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background: linear-gradient(160deg, var(--ink-950) 0%, var(--ink-850) 55%, var(--ink-800) 100%);
  padding: 4px;
  box-shadow: var(--shadow-lg);
}
.api-hero-panel .dot-grid { opacity: 0.4; }

.code-card {
  background: var(--ink-950);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.code-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.code-card-dots { display: flex; gap: 6px; }
.code-card-dots span { width: 10px; height: 10px; border-radius: 50%; display: block; }
.code-card-dots span:nth-child(1) { background: #f87171; }
.code-card-dots span:nth-child(2) { background: #fbbf24; }
.code-card-dots span:nth-child(3) { background: #34d399; }
.code-card-label { font-size: 0.76rem; font-weight: 600; color: rgba(255, 255, 255, 0.55); font-family: var(--font-sans); }
.code-card pre {
  margin: 0;
  padding: 22px 24px;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.82rem;
  line-height: 1.75;
  color: #cbd5f5;
  overflow-x: auto;
  white-space: pre;
}
.code-card .tok-key { color: #7dd3fc; }
.code-card .tok-str { color: #86efac; }
.code-card .tok-num { color: #fca5a5; }
.code-card .tok-comment { color: #6b7280; font-style: italic; }
.code-card .tok-method { color: #c4b5fd; font-weight: 700; }
.code-card .tok-punct { color: #64748b; }

.endpoint-list {
  border: 1px solid var(--line-medium);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
.endpoint-row {
  display: grid;
  grid-template-columns: 78px 1.1fr 1.6fr;
  gap: 16px;
  align-items: center;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line-subtle);
  transition: background 0.25s var(--ease);
}
.endpoint-row:last-child { border-bottom: none; }
.endpoint-row:hover { background: rgba(79, 70, 229, 0.035); }
.method-badge {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 4px 0;
  border-radius: 6px;
  text-align: center;
}
.method-get { background: rgba(16, 185, 129, 0.12); color: #059669; }
.method-post { background: rgba(79, 70, 229, 0.12); color: #4338ca; }
.method-put { background: rgba(245, 158, 11, 0.12); color: #b45309; }
.method-delete { background: rgba(239, 68, 68, 0.12); color: #dc2626; }
.endpoint-path { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 0.84rem; color: var(--ink-900); font-weight: 600; }
.endpoint-desc { font-size: 0.85rem; color: var(--ink-500); }

.sdk-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.sdk-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 100px;
  border: 1px solid var(--line-medium);
  background: var(--surface);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--ink-800);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.sdk-chip:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(79, 70, 229, 0.25); }
.sdk-chip-icon { width: 26px; height: 26px; border-radius: 7px; background: var(--grad-soft-indigo); color: var(--indigo-600); display: flex; align-items: center; justify-content: center; }

.api-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.api-step-card {
  background: var(--surface);
  border: 1px solid var(--line-medium);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  position: relative;
}
.api-step-num {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--grad-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.9rem; margin-bottom: 18px;
  box-shadow: var(--shadow-glow);
}
.api-step-card h3 { font-size: 1.02rem; margin-bottom: 10px; }
.api-step-card p { font-size: 0.88rem; color: var(--ink-500); line-height: 1.55; margin: 0; }



.usecase-list code,
.faq-answer-inner code {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 0.82em;
  background: var(--grad-soft-indigo);
  color: var(--indigo-700);
  padding: 2px 6px;
  border-radius: 5px;
}

/* ================= HELP CENTER PAGE ================= */
.help-search-wrap { max-width: 640px; margin: 0 auto; position: relative; z-index: 2; }
.help-search {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line-medium);
  border-radius: 100px;
  padding: 7px 8px 7px 22px;
  box-shadow: var(--shadow-md);
  transition: box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.help-search:focus-within { border-color: var(--indigo-400); box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.14); }
.help-search svg { color: var(--ink-400); flex-shrink: 0; }
.help-search input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 0.98rem;
  font-family: inherit;
  color: var(--ink-900);
  outline: none;
  padding: 11px 0;
  min-width: 0;
}
.help-search input::placeholder { color: var(--ink-400); }

.help-quicklinks { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; margin-top: 24px; position: relative; z-index: 2; }
.help-quicklinks a { font-size: 0.86rem; font-weight: 600; color: var(--ink-500); display: inline-flex; align-items: center; gap: 6px; transition: color 0.25s var(--ease); }
.help-quicklinks a:hover { color: var(--indigo-600); }

.article-list {
  border: 1px solid var(--line-medium);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
.article-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line-subtle);
  transition: background 0.25s var(--ease);
}
.article-row:last-child { border-bottom: none; }
.article-row:hover { background: rgba(79, 70, 229, 0.035); }
.article-row-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.article-row-icon {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--grad-soft-indigo); color: var(--indigo-600);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.article-row-title { font-size: 0.92rem; font-weight: 600; color: var(--ink-900); }
.article-row-tag { font-size: 0.74rem; color: var(--ink-400); margin-top: 2px; }
.article-row svg.arrow { color: var(--indigo-500); flex-shrink: 0; transition: transform 0.3s var(--ease); }
.article-row:hover svg.arrow { transform: translateX(3px); }



/* ================= LEGALITY GUIDE PAGE ================= */
.lg-hero {
  padding: 192px 0 56px;
  position: relative;
  text-align: center;
}
.lg-hero .blob-field { z-index: 0; }
.lg-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
}
.lg-hero .eyebrow { margin-bottom: 20px; }
.lg-hero h1 { margin-bottom: 18px; }
.lg-hero .lede { max-width: 620px; margin: 0 auto 44px; }



/* ---- Country switcher ---- */
.lg-country-switch {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 2;
}

/* ---- Country dropdown (scales to many markets) ---- */
.lg-country-select { position: relative; display: inline-block; text-align: left; }
.lg-select-trigger {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 260px;
  padding: 14px 20px;
  border-radius: 100px;
  border: 1px solid var(--line-medium);
  background: var(--surface);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink-900);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s var(--ease);
}
.lg-select-trigger .flag { font-size: 1.2rem; line-height: 1; }
.lg-select-trigger .lbl { flex: 1; text-align: left; }
.lg-select-trigger .chev { color: var(--ink-400); flex-shrink: 0; transition: transform 0.3s var(--ease); }
.lg-country-select.is-open .lg-select-trigger {
  border-color: var(--indigo-500);
  box-shadow: var(--shadow-glow);
}
.lg-country-select.is-open .lg-select-trigger .chev { transform: rotate(180deg); }

.lg-select-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: 360px;
  max-width: calc(100vw - 48px);
  background: var(--surface);
  border: 1px solid var(--line-glass);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 300;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}
.lg-country-select.is-open .lg-select-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.lg-select-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-subtle);
}
.lg-select-search svg { color: var(--ink-400); flex-shrink: 0; }
.lg-select-search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--ink-900);
}
.lg-select-search input::placeholder { color: var(--ink-400); }
.lg-select-list { max-height: 320px; overflow-y: auto; padding: 8px; }
.lg-select-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: none;
  background: none;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--ink-700);
  cursor: pointer;
  text-align: left;
}
.lg-select-option .flag { font-size: 1.05rem; flex-shrink: 0; }
.lg-select-option .check { margin-left: auto; color: var(--indigo-600); opacity: 0; flex-shrink: 0; }
.lg-select-option:hover { background: var(--surface-tint); }
.lg-select-option.is-active { background: var(--surface-tint); color: var(--indigo-700); }
.lg-select-option.is-active .check { opacity: 1; }
.lg-select-divider {
  padding: 16px 12px 6px;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: var(--ink-400);
}
.lg-select-option-disabled {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--ink-400);
}
.lg-select-option-disabled .flag { font-size: 1.05rem; flex-shrink: 0; opacity: 0.5; }
.lg-select-option-disabled .soon-tag {
  margin-left: auto;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--surface-alt);
  color: var(--ink-400);
  padding: 3px 9px;
  border-radius: 100px;
  flex-shrink: 0;
}
.lg-select-empty {
  display: none;
  padding: 26px 16px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--ink-400);
}
.lg-select-empty.is-shown { display: block; }
.lg-select-hidden { display: none !important; }

/* ---- Layout ---- */
.lg-section { padding: 60px 0 0px; }
.lg-layout {
  display: grid;
  grid-template-columns: 1.85fr 1fr;
  gap: 48px;
  align-items: start;
}
.lg-panel[hidden] { display: none; }
.lg-panel:not([hidden]) {
  display: block;
  animation: lgPanelIn 0.5s var(--ease);
}
@keyframes lgPanelIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.lg-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 100px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: var(--emerald-600);
  font-weight: 700;
  font-size: 0.82rem;
  margin-bottom: 20px;
}
.lg-panel h2 {
  font-size: clamp(1.65rem, 2.6vw, 2.15rem);
  margin-bottom: 18px;
}
.lg-panel .lede { margin-bottom: 34px; max-width: 640px; }

.lg-law-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--line-medium);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  margin-bottom: 34px;
}
.lg-law-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--grad-soft-indigo);
  color: var(--indigo-600);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.lg-law-card h4 { font-size: 1.02rem; margin-bottom: 6px; color: var(--ink-900); }
.lg-law-card p { font-size: 0.9rem; color: var(--ink-500); margin-bottom: 12px; }
.lg-law-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--indigo-600);
}
.lg-law-link:hover { color: var(--indigo-700); }

.lg-block-title {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: var(--ink-400);
  margin-bottom: 16px;
}

.lg-simple-types {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 38px;
}
.lg-simple-types li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.92rem;
  color: var(--ink-700);
  line-height: 1.5;
}
.lg-simple-types li svg { color: var(--emerald-500); flex-shrink: 0; margin-top: 3px; }

/* ---- Contract-basics callout ---- */
.lg-basics {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--grad-soft-indigo);
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  margin-bottom: 30px;
}
.lg-basics-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--surface);
  color: var(--indigo-600);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-xs);
}
.lg-basics p { font-size: 0.9rem; color: var(--ink-700); line-height: 1.6; margin-bottom: 10px; }
.lg-basics ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.lg-basics li { display: flex; gap: 9px; align-items: flex-start; font-size: 0.86rem; color: var(--ink-600); line-height: 1.5; }
.lg-basics li svg { color: var(--indigo-500); flex-shrink: 0; margin-top: 3px; }
.lg-basics .lg-basics-foot { margin-top: 12px; margin-bottom: 0; font-size: 0.84rem; color: var(--ink-500); }

/* ---- "What these laws determine" question list ---- */
.lg-questions {
  list-style: none;
  counter-reset: lgq;
  margin: 0 0 34px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lg-questions li {
  counter-increment: lgq;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 0.92rem;
  color: var(--ink-700);
  line-height: 1.5;
}
.lg-questions li::before {
  content: counter(lgq);
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-tint);
  color: var(--indigo-600);
  font-size: 0.74rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  margin-top: 1px;
}

/* ---- Flexible signature-type rows (scales to any count / content length) ---- */
.lg-type-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 30px;
}
.lg-type-row {
  display: flex;
  gap: 22px;
  padding: 26px 28px;
  background: var(--surface);
  border: 1px solid var(--line-medium);
  border-radius: var(--radius-lg);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.lg-type-row:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.lg-type-badge {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--grad-primary);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
  line-height: 1.1;
}
.lg-type-body { flex: 1; min-width: 0; }
.lg-type-body h4 { font-size: 1.04rem; margin-bottom: 6px; color: var(--ink-900); }
.lg-type-desc { font-size: 0.88rem; color: var(--ink-500); margin-bottom: 14px; line-height: 1.6; }
.lg-type-criteria { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.lg-type-criteria li { display: flex; gap: 9px; align-items: flex-start; font-size: 0.86rem; color: var(--ink-700); line-height: 1.5; }
.lg-type-criteria li svg { color: var(--emerald-500); flex-shrink: 0; margin-top: 3px; }


/* ---- Statutory reliability-conditions block ---- */
.lg-reliability {
  background: var(--surface-alt);
  border: 1px solid var(--line-medium);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  margin-bottom: 34px;
}
.lg-reliability ol {
  counter-reset: lgr;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.lg-reliability li {
  counter-increment: lgr;
  display: flex;
  gap: 12px;
  font-size: 0.87rem;
  color: var(--ink-700);
  line-height: 1.55;
}
.lg-reliability li::before {
  content: counter(lgr);
  flex-shrink: 0;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line-medium);
  color: var(--ink-500);
  font-size: 0.7rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  margin-top: 1px;
}
.lg-reliability .lg-reliability-note {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line-subtle);
  font-size: 0.84rem;
  color: var(--ink-500);
  line-height: 1.6;
}

.esign-tier-grid.cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 640px; }

.lg-exclusions {
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  margin-bottom: 34px;
}
.lg-exclusions .lg-block-title { color: var(--amber-600); }
.lg-exclusions ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.lg-exclusions li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.88rem;
  color: var(--ink-700);
  line-height: 1.5;
}
.lg-exclusions li svg { color: var(--amber-600); flex-shrink: 0; margin-top: 3px; }
.lg-exclusions .lg-fineprint {
  margin-top: 14px;
  font-size: 0.78rem;
  color: var(--ink-500);
}

.lg-disclaimer {
  background: var(--surface-alt);
  border: 1px solid var(--line-medium);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  font-size: 0.83rem;
  color: var(--ink-500);
  line-height: 1.6;
}
.lg-disclaimer strong { color: var(--ink-700); }
.lg-updated { margin-top: 12px; font-size: 0.76rem; color: var(--ink-400); }

/* ---- Sidebar ---- */
.lg-aside { position: sticky; top: 128px; display: flex; flex-direction: column; gap: 20px; }
.lg-aside-card {
  background: var(--surface);
  border: 1px solid var(--line-medium);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-xs);
}
.lg-aside-card h5 {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 800;
  color: var(--ink-400);
  margin-bottom: 16px;
}
.lg-aside-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.lg-aside-card li a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-700);
}
.lg-aside-card li a:hover { color: var(--indigo-600); }
.lg-aside-card li a svg { color: var(--indigo-500); flex-shrink: 0; }

.lg-cta-card {
  background: var(--grad-primary);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  color: #fff;
  box-shadow: var(--shadow-glow);
}
.lg-cta-card h5 { color: #fff; font-family: var(--font-serif); font-size: 1.2rem; font-weight: 600; margin-bottom: 10px; letter-spacing: 0; text-transform: none; }
.lg-cta-card p { color: rgba(255,255,255,0.85); font-size: 0.87rem; margin-bottom: 20px; }
.lg-cta-card .btn-grad { background: #fff; color: var(--ink-900) !important; box-shadow: none; width: 100%; }
.lg-cta-card .btn-grad:hover { background: var(--ink-100); }

.lg-trust-mini {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lg-trust-mini .trust-item { font-size: 0.82rem; }




/* ================= LEGAL DOCUMENT PAGES (TERMS / PRIVACY) ================= */
.legal-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 56px;
  align-items: start;
}
.legal-toc {
  position: sticky;
  top: 110px;
  background: var(--surface);
  border: 1px solid var(--line-medium);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
}
.legal-toc h5 {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-400);
  margin-bottom: 16px;
}
.legal-toc ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.legal-toc a {
  font-size: 0.86rem;
  color: var(--ink-500);
  font-weight: 500;
  transition: color 0.2s var(--ease);
  display: block;
}
.legal-toc a:hover, .legal-toc a.is-active { color: var(--indigo-600); font-weight: 700; }

.legal-content { max-width: 740px; }
.legal-content section { scroll-margin-top: 110px; }
.legal-content section + section { margin-top: 44px; padding-top: 44px; border-top: 1px solid var(--line-subtle); }
.legal-content h2 { font-size: 1.4rem; margin-bottom: 16px; }
.legal-content h3 { font-size: 1.05rem; margin: 24px 0 10px; }
.legal-content p { color: var(--ink-600); line-height: 1.75; margin-bottom: 16px; }
.legal-content ul, .legal-content ol { color: var(--ink-600); line-height: 1.75; margin: 0 0 16px; padding-left: 22px; }
.legal-content li { margin-bottom: 8px; }
.legal-content strong { color: var(--ink-900); }
.legal-content a { color: var(--indigo-600); font-weight: 600; }

.legal-updated-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-500);
  background: var(--surface-alt);
  border: 1px solid var(--line-medium);
  padding: 7px 16px;
  border-radius: 100px;
}

#security {
    overflow: hidden;
    position: relative;
}
.two-person-homepage {
   padding-bottom: 0px !important;
}
.faq-home {
  padding-bottom: 0px !important;
}
.end-to-end-home {
  padding-bottom: 0px !important;
}
.zero-com-sec {
  position: relative;
  overflow: hidden;
}



/* =========================================================
   INDIA LANDING PAGE (home-india.php)
   A separate page, not the global homepage re-skinned - these
   components (signing rail, Aadhaar OTP card, e-Stamp receipt,
   state chips) exist only here.
   ========================================================= */

/* ---- Hero: centred, with a full-width flow rail underneath ---- */
.in-hero {
  position: relative;
  overflow: hidden;
  padding: 176px 0 60px;
}
.in-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto 60px;
  text-align: center;
}
.in-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px 7px 8px;
  border-radius: 100px;
  background: var(--surface);
  border: 1px solid var(--ctry-soft);
  box-shadow: var(--shadow-xs);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-700);
  margin-bottom: 22px;
}
.in-flag-chip {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  padding: 3px 7px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
  background: linear-gradient(135deg, var(--ctry-a), var(--ctry-b));
}
.in-hero-copy h1 { margin-bottom: 20px; }
.in-hero-copy .lede { max-width: 660px; margin: 0 auto 34px; }
.in-hero-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 26px;
  margin-top: 30px;
}

/* ---- Flow rail: draft -> stamp -> sign -> filed ---- */
.in-rail {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--line-medium);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 30px 24px;
}
.in-rail-step { padding: 4px 18px; text-align: left; }
.in-rail-num {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--ink-300);
  margin-bottom: 12px;
}
.in-rail-icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--ctry-soft);
  color: var(--ink-800);
  margin-bottom: 14px;
}
.in-rail-step h3 { font-size: 1.02rem; margin-bottom: 7px; }
.in-rail-step p { font-size: 0.84rem; color: var(--ink-500); line-height: 1.55; margin-bottom: 12px; }
.in-rail-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--surface-alt);
  color: var(--ink-500);
}
.in-rail-tag.is-ok { background: rgba(16, 185, 129, 0.12); color: var(--emerald-600); }
.in-rail-arrow {
  display: grid;
  place-items: center;
  color: var(--ink-200);
  padding: 0 4px;
}
.in-rail-step.is-done .in-rail-icon {
  background: linear-gradient(135deg, var(--ctry-a), var(--ctry-b));
  color: #fff;
}

/* ---- Pain strip ---- */
.in-pain { padding: 60px 0; background: var(--surface-alt); }
.in-pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 52px;
}
.in-pain-card {
  background: var(--surface);
  border: 1px solid var(--line-medium);
  border-radius: var(--radius-lg);
  padding: 30px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.in-pain-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.in-pain-icon {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 13px;
  background: var(--ink-900);
  color: #fff;
  margin-bottom: 18px;
}
.in-pain-card h3 { font-size: 1.08rem; margin-bottom: 10px; }
.in-pain-card p { font-size: 0.9rem; color: var(--ink-500); line-height: 1.6; margin-bottom: 18px; }
.in-pain-fix {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--emerald-600);
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
  padding: 7px 13px;
  border-radius: 100px;
}

/* ---- Two-column split (eSign section) ---- */
.in-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.in-split-copy h2 { margin: 16px 0 18px; }
.in-split-copy .trust-list { margin-bottom: 28px; }
.in-split-visual { position: relative; }

/* ---- Aadhaar OTP card ---- */
.in-otp-card {
  background: var(--surface);
  border: 1px solid var(--line-medium);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 28px;
  max-width: 400px;
  margin: 0 auto;
}
.in-otp-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.in-otp-title { font-size: 1.02rem; font-weight: 800; color: var(--ink-900); }
.in-otp-ca {
  font-size: 0.64rem; font-weight: 800; letter-spacing: 0.08em;
  padding: 4px 9px; border-radius: 100px;
  background: var(--ctry-soft); color: var(--ink-800);
}
.in-otp-doc { font-size: 0.84rem; color: var(--ink-400); margin-bottom: 24px; }
.in-otp-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--ink-500); margin-bottom: 12px; }
.in-otp-boxes { display: flex; gap: 9px; margin-bottom: 16px; }
.in-otp-box {
  flex: 1;
  aspect-ratio: 1 / 1.15;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1.5px solid var(--line-medium);
  background: var(--surface-alt);
  font-size: 1.15rem; font-weight: 800; color: var(--ink-900);
}
.in-otp-box.is-filled { background: var(--surface); border-color: var(--line-strong); }
.in-otp-box.is-active {
  border-color: var(--ctry-a);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--ctry-soft);
  position: relative;
}
.in-otp-box.is-active::after {
  content: "";
  width: 2px; height: 40%;
  background: var(--ctry-a);
  animation: inCaret 1.1s step-end infinite;
}
@keyframes inCaret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .in-otp-box.is-active::after { animation: none; } }
.in-otp-meta {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.76rem; color: var(--ink-400); margin-bottom: 22px;
}
.in-otp-meta span { display: inline-flex; align-items: center; gap: 6px; }
.in-otp-timer { font-weight: 700; }
.in-otp-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line-subtle);
}
.in-otp-stamp {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.76rem; font-weight: 700;
  color: var(--emerald-600);
}
.in-otp-btn {
  font-size: 0.82rem; font-weight: 700; color: #fff;
  background: var(--grad-primary);
  padding: 10px 20px; border-radius: 100px;
  box-shadow: 0 8px 20px -8px rgba(79, 70, 229, 0.5);
}
.in-float {
  position: absolute;
  display: flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: var(--shadow-md);
  border-radius: 14px;
  padding: 11px 14px;
}
.in-float strong { display: block; font-size: 0.8rem; color: var(--ink-900); }
.in-float span { display: block; font-size: 0.7rem; color: var(--ink-400); margin-top: 1px; }
.in-float-icon {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--ctry-a), var(--ctry-b));
  color: #fff;
}
/* Above the card - the bottom corners are occupied by the e-Stamp note and
   the Sign now button, and a float there covers them. */
.in-float-a { top: -28px; left: 4px; animation: floatBob 6.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .in-float-a { animation: none; } }

/* ---- e-Stamping ---- */
.in-stamp-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 32px;
  margin-top: 52px;
  align-items: start;
}
.in-stamp-states {
  background: var(--surface);
  border: 1px solid var(--line-medium);
  border-radius: var(--radius-xl);
  padding: 34px;
}
.in-stamp-sub { font-size: 1rem; margin-bottom: 20px; }
.in-state-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.in-state-chip {
  font-size: 0.84rem; font-weight: 700;
  padding: 9px 15px; border-radius: 100px;
  background: var(--surface-alt);
  border: 1px solid var(--line-medium);
  color: var(--ink-700);
}
.in-state-chip.is-more { background: transparent; border-style: dashed; color: var(--ink-400); }
.in-stamp-note {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.85rem; color: var(--ink-500); line-height: 1.6;
  margin: 0; padding-top: 20px;
  border-top: 1px solid var(--line-subtle);
}
.in-stamp-note svg { color: var(--ctry-a); flex-shrink: 0; margin-top: 2px; }

.in-stamp-receipt {
  background: var(--ink-900);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: 28px;
  box-shadow: var(--shadow-lg);
}
.in-receipt-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.9rem; font-weight: 800;
  padding-bottom: 16px; margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.in-receipt-badge {
  font-size: 0.62rem; letter-spacing: 0.1em;
  padding: 4px 10px; border-radius: 100px;
  background: rgba(16, 185, 129, 0.18); color: #34d399;
}
.in-receipt-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.86rem;
}
.in-receipt-row span { color: rgba(255, 255, 255, 0.5); }
.in-receipt-row strong { color: #fff; font-weight: 700; }
.in-receipt-foot {
  display: flex; align-items: center; gap: 9px;
  margin-top: 18px;
  font-size: 0.8rem; color: #34d399; font-weight: 600;
}

.in-excluded {
  margin-top: 32px;
  background: var(--surface);
  border: 1px solid var(--line-medium);
  border-left: 4px solid var(--amber-500);
  border-radius: var(--radius-md);
  padding: 24px 28px;
}
.in-excluded h4 {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.98rem; margin-bottom: 8px;
}
.in-excluded h4 svg { color: var(--amber-600); }
.in-excluded p { font-size: 0.89rem; color: var(--ink-500); line-height: 1.65; margin: 0; }

/* ---- Signature types ---- */
.in-types-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
  max-width: 900px;
  margin: 52px auto 0;
}
.in-type-card {
  background: var(--surface);
  border: 1px solid var(--line-medium);
  border-radius: var(--radius-xl);
  padding: 36px;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.in-type-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--ctry-a), var(--ctry-b));
}
.in-type-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.in-type-badge {
  display: inline-block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--ink-900);
  margin-bottom: 14px;
}
.in-type-card h3 { font-size: 1.12rem; margin-bottom: 10px; }
.in-type-card .lede-sm { font-size: 0.89rem; color: var(--ink-500); margin-bottom: 22px; line-height: 1.6; }

/* ---- Segments ---- */
.in-seg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 50px;
}
.in-seg-card {
  background: var(--surface);
  border: 1px solid var(--line-medium);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
}
.in-seg-card:hover { transform: translateY(-4px); border-color: var(--ctry-soft); }
.in-seg-icon {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--ctry-soft);
  color: var(--ink-800);
  margin-bottom: 16px;
}
.in-seg-card h3 { font-size: 1rem; margin-bottom: 8px; }
.in-seg-card p { font-size: 0.86rem; color: var(--ink-500); line-height: 1.6; margin: 0; }

/* ---- Notes ---- */
.in-price-note,
.in-legal-note {
  text-align: center;
  font-size: 0.84rem;
  color: var(--ink-400);
  margin: 30px auto 0;
  max-width: 680px;
  line-height: 1.6;
}


/* ---- India: platform modules ---- */
.in-mod-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 52px;
}
.in-mod-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-medium);
  border-radius: var(--radius-lg);
  padding: 28px;
  color: inherit;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.in-mod-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--ctry-soft);
  color: inherit;
}
/* The lead module gets the full width of the first row */
.in-mod-card.is-featured {
  grid-column: span 4;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 40px;
  padding: 34px 36px;
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-alt) 100%);
}
.in-mod-card.is-featured .in-mod-icon { margin-bottom: 18px; }
.in-mod-card.is-featured h3 { font-size: 1.35rem; flex-basis: 100%; }
.in-mod-card.is-featured p { max-width: 480px; flex: 1 1 340px; font-size: 0.94rem; }
.in-mod-icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 13px;
  background: var(--ctry-soft);
  color: var(--ink-800);
  margin-bottom: 16px;
  flex-shrink: 0;
}
.in-mod-tag {
  position: absolute;
  top: 22px; right: 24px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 100px;
  background: linear-gradient(135deg, var(--ctry-a), var(--ctry-b));
  color: #fff;
}
.in-mod-card h3 { font-size: 1.04rem; margin-bottom: 9px; }
.in-mod-card p { font-size: 0.87rem; color: var(--ink-500); line-height: 1.6; margin-bottom: 16px; }
.in-mod-points {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 300px;
}
.in-mod-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.87rem;
  color: var(--ink-700);
  line-height: 1.45;
}
.in-mod-points li svg { color: var(--emerald-500); flex-shrink: 0; margin-top: 2px; }
.in-mod-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--indigo-600);
}
.in-mod-card.is-featured .in-mod-link { flex-basis: 100%; margin-top: 8px; }
.in-mod-card:hover .in-mod-link svg { transform: translateX(4px); }
.in-mod-link svg { transition: transform 0.3s var(--ease); }

/* ---- India: product dashboard ---- */
.in-dash {
  background: var(--surface);
  border: 1px solid var(--line-medium);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.in-dash-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line-medium);
}
.in-dash-url {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ink-400);
}
.in-dash-body { padding: 22px; }
.in-dash-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.in-dash-kpi {
  background: var(--surface-alt);
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.in-dash-kpi .lab { display: block; font-size: 0.7rem; font-weight: 700; color: var(--ink-400); margin-bottom: 5px; }
.in-dash-kpi .val { display: block; font-size: 1.5rem; font-weight: 800; color: var(--ink-900); line-height: 1; }
.in-dash-rows { display: flex; flex-direction: column; }
.in-dash-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-subtle);
}
.in-dash-row:last-child { border-bottom: none; }
.in-dash-doc {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.in-dash-pill {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 100px;
  flex-shrink: 0;
}
.in-dash-pill.is-ok { background: rgba(16, 185, 129, 0.12); color: var(--emerald-600); }
.in-dash-pill.is-warn { background: rgba(245, 158, 11, 0.14); color: var(--amber-600); }
.in-dash-pill.is-info { background: rgba(79, 70, 229, 0.1); color: var(--indigo-600); }


/* =========================================================
   REPOSITIONED HOMEPAGE — "Sign it once. Correct everywhere."
   ========================================================= */

/* Monospaced eyebrow used by the new sections */
.eyebrow-mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: none;
  border: none;
  padding: 0;
  color: var(--accent-warm, #f0552b);
}

/* ---- Hero country picker (replaces the floating document mock) ---- */
.hero-picker {
  position: relative;
  background: var(--surface);
  border: 2px solid var(--ink-900);
  border-radius: var(--radius-xl);
  padding: 32px;
  max-width: 460px;
  margin-left: auto;
}
/* Offset shadow block, matching the reference layout */
.hero-picker::after {
  content: "";
  position: absolute;
  inset: 14px -14px -14px 14px;
  border-radius: var(--radius-xl);
  background: var(--grad-soft-indigo);
  z-index: -1;
}
.hero-picker-title { font-size: 1.05rem; font-weight: 800; margin-bottom: 18px; color: var(--ink-900); }
.hero-picker-form { margin-bottom: 16px; }
.hero-picker-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='6,9 12,15 18,9' fill='none' stroke='%235c568e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center;
  background-size: 15px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--ink-900);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  padding: 15px 44px 15px 16px;
  cursor: pointer;
}
.hero-picker-select:focus { outline: 2px solid var(--indigo-600); outline-offset: 2px; }
.hero-picker-note {
  font-size: 0.86rem;
  color: var(--ink-500);
  line-height: 1.6;
  padding-top: 16px;
  border-top: 1px dashed var(--line-medium);
  margin-bottom: 18px;
}
.hero-picker-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--ctry-soft);
}
.hero-picker-flag { font-size: 1.1rem; font-weight: 800; }
.hero-picker-result strong { display: block; font-size: 0.92rem; color: var(--ink-900); }
.hero-picker-result span { display: block; font-size: 0.78rem; color: var(--ink-500); margin-top: 1px; }
.hero-picker-link { margin-left: auto; color: var(--indigo-600); display: inline-flex; }

/* ---- Problem section (dark) ---- */
.problem-section {
  background: var(--ink-900);
  color: #fff;
  padding: 60px 0;
}
.problem-title {
  font-size: clamp(1.9rem, 3.1vw, 2.8rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: 780px;
  margin-bottom: 60px;
}
.problem-num {
  display: block;
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--accent-warm, #f0552b);
  margin-bottom: 14px;
}
.problem-item h3 { font-size: 1.02rem; color: #fff; margin-bottom: 12px; }
.problem-item p { font-size: 0.9rem; color: rgba(255, 255, 255, 0.62); line-height: 1.65; margin: 0; }

/* ---- How it works (4 steps with accent rules) ---- */
.how-head { max-width: 720px; margin-bottom: 52px; }
.how-head h2 { margin: 14px 0 16px; }
.how-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.how-step { border-left: 3px solid var(--step-accent, var(--indigo-600)); padding-left: 20px; }
.how-step-num {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--step-accent, var(--indigo-600));
  margin-bottom: 12px;
}
.how-step h3 { font-size: 1rem; margin-bottom: 9px; }
.how-step p { font-size: 0.87rem; color: var(--ink-500); line-height: 1.6; margin: 0; }

/* ---- Legality guide regime card ---- */
.btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--ink-900);
  color: #fff;
  font-weight: 700;
  font-size: 0.94rem;
  padding: 14px 26px;
  border-radius: 100px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn-dark:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: #fff; }
.regime-card {
  background: var(--surface);
  border: 1px solid var(--line-medium);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 28px;
}
.regime-pills { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 18px; }
.regime-pill {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 100px;
}
.regime-pill.is-open { background: rgba(16, 185, 129, 0.12); color: var(--emerald-600); }
.regime-pill.is-tiered { background: rgba(245, 158, 11, 0.14); color: var(--amber-600); }
.regime-pill.is-strict { background: rgba(244, 63, 94, 0.12); color: var(--rose-600); }
.regime-intro { font-size: 0.88rem; color: var(--ink-500); line-height: 1.6; margin-bottom: 20px; }
.regime-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--ink-900);
  transition: background 0.2s var(--ease);
}
.regime-row:hover { background: var(--surface-tint); color: var(--ink-900); }
.regime-row.is-highlight { background: var(--surface-alt); }
.regime-tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 100px;
  flex-shrink: 0;
}
.regime-tag.is-open { background: rgba(16, 185, 129, 0.12); color: var(--emerald-600); }
.regime-tag.is-tiered { background: rgba(245, 158, 11, 0.14); color: var(--amber-600); }
/* Prescriptive markets only surfaced once the legality index started tagging
   every card, so this variant had no styling until then. */
.regime-tag.is-strict { background: rgba(244, 63, 94, 0.12); color: var(--rose-600); }

/* ---- Three things nobody else does ---- */
/* ---- Three things nobody else does ----
   Each claim is a mechanism, so each card acts its own out on a small dark
   stage. Every stage is written in its FINISHED state and the keyframes run
   backwards from empty, which means "no animation" — off-screen, or reduced
   motion — still shows a correct, composed card rather than a blank one. */
.tri-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.tri-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 26px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-medium);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.tri-card:hover {
  transform: translateY(-6px);
  border-color: var(--indigo-500);
  box-shadow: var(--shadow-lg);
}
.tri-n {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--indigo-600);
  margin: 20px 0 9px;
}
.tri-card h3 {
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  margin-bottom: 10px;
}
.tri-card p {
  font-size: 0.88rem;
  line-height: 1.66;
  color: var(--ink-500);
  margin: 0;
  text-wrap: pretty;
}

/* ---- The stage ---- */
.tri-stage {
  position: relative;
  height: 168px;
  padding: 15px 16px;
  border-radius: var(--radius-md);
  background: linear-gradient(158deg, var(--ink-950) 0%, var(--ink-850) 60%, var(--ink-800) 100%);
  overflow: hidden;
}
.tri-lib {
  display: block;
  margin-bottom: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
/* The verdict chip every stage ends on. */
.tri-flag {
  position: absolute;
  left: 16px; bottom: 15px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 100px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tri-flag.is-ok {
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #6ee7b7;
}
.tri-flag.is-stop {
  background: rgba(244, 63, 94, 0.18);
  border: 1px solid rgba(244, 63, 94, 0.42);
  color: #fda4af;
}
.tri-flag svg { flex-shrink: 0; }

/* ---- 01: clauses assembling, each citing its source ---- */
.tri-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
}
.tri-row i {
  flex: 1;
  height: 7px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.55), rgba(99, 102, 241, 0.22));
}
.tri-row b {
  flex-shrink: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.55rem;
  font-weight: 700;
  color: #c4b5fd;
}

/* ---- 02: the run that stops at the wall ---- */
.tri-line {
  display: block;
  height: 6px;
  margin-bottom: 8px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
}
.tri-line.w1 { width: 88%; }
.tri-line.w2 { width: 64%; }
.tri-track {
  position: relative;
  display: block;
  height: 8px;
  margin-top: 18px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
}
.tri-track i {
  display: block;
  width: 62%;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--indigo-500), var(--rose-500));
}
.tri-wall {
  position: absolute;
  left: 62%;
  top: -13px;
  width: 3px; height: 34px;
  border-radius: 2px;
  background: var(--rose-500);
  box-shadow: 0 0 16px 2px rgba(244, 63, 94, 0.55);
}

/* ---- 03: the document stays, the hash travels ---- */
.tri-node {
  position: absolute;
  display: grid;
  place-items: center;
  width: 78px; height: 44px;
  border-radius: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1.25;
}
.tri-node.is-doc {
  left: 16px; top: 34px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.85);
}
.tri-node.is-ca {
  right: 16px; top: 34px;
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(16, 185, 129, 0.42);
  color: #6ee7b7;
}
.tri-wire {
  position: absolute;
  left: 100px; right: 100px; top: 56px;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0 4px, transparent 4px 9px);
}
.tri-token {
  position: absolute;
  left: 50%; top: 56px;
  transform: translate(-50%, -50%);
  padding: 3px 8px;
  border-radius: 100px;
  background: var(--grad-primary);
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: 0 6px 16px -6px rgba(79, 70, 229, 0.9);
}

/* ---- Playback ----
   Only runs while the grid is on screen. One shared 6.5s cycle, so the three
   stages stay in step with each other for the whole loop. */
.tri-grid.is-live .tri-row.r1 { animation: triRow 6.5s var(--ease) 0.15s infinite; }
.tri-grid.is-live .tri-row.r2 { animation: triRow 6.5s var(--ease) 0.45s infinite; }
.tri-grid.is-live .tri-row.r3 { animation: triRow 6.5s var(--ease) 0.75s infinite; }
@keyframes triRow {
  0%, 2%   { opacity: 0; transform: translateX(-14px); }
  14%, 88% { opacity: 1; transform: translateX(0); }
  96%,100% { opacity: 0; transform: translateX(-14px); }
}

.tri-grid.is-live .tri-track i { animation: triFill 6.5s var(--ease) infinite; }
@keyframes triFill {
  0%, 3%   { width: 0; }
  26%, 88% { width: 62%; }
  96%,100% { width: 0; }
}
.tri-grid.is-live .tri-wall { animation: triWall 6.5s var(--ease) infinite; }
@keyframes triWall {
  0%, 24%  { opacity: 0; transform: scaleY(0.3); }
  30%      { opacity: 1; transform: scaleY(1.25); }
  34%, 88% { opacity: 1; transform: scaleY(1); }
  96%,100% { opacity: 0; transform: scaleY(0.3); }
}

.tri-grid.is-live .tri-token { animation: triToken 6.5s var(--ease) infinite; }
@keyframes triToken {
  0%, 6%   { left: 100px; opacity: 0; }
  12%      { left: 100px; opacity: 1; }
  36%      { left: calc(100% - 118px); opacity: 1; }
  44%,100% { left: calc(100% - 118px); opacity: 0; }
}
.tri-grid.is-live .tri-node.is-ca { animation: triArrive 6.5s var(--ease) infinite; }
@keyframes triArrive {
  0%, 36%  { box-shadow: none; }
  44%      { box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.16); }
  52%, 88% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.tri-grid.is-live .tri-flag { animation: triFlag 6.5s var(--ease) infinite; }
@keyframes triFlag {
  0%, 44%  { opacity: 0; transform: translateY(7px); }
  54%, 88% { opacity: 1; transform: translateY(0); }
  96%,100% { opacity: 0; transform: translateY(7px); }
}

/* Motion suppressed: the stages keep their finished state, which is what the
   CSS above already describes, so nothing needs restating here. */
@media (prefers-reduced-motion: reduce) {
  .tri-grid.is-live .tri-row.r1,
  .tri-grid.is-live .tri-row.r2,
  .tri-grid.is-live .tri-row.r3,
  .tri-grid.is-live .tri-track i,
  .tri-grid.is-live .tri-wall,
  .tri-grid.is-live .tri-token,
  .tri-grid.is-live .tri-node.is-ca,
  .tri-grid.is-live .tri-flag { animation: none; }
}

/* Light outline button for use on the dark final CTA */
.btn-ghost-light {
  background: #fff;
  border-color: #fff;
  color: var(--ink-900);
}
.btn-ghost-light:hover { background: #fff; color: var(--ink-900); }


/* =========================================================
   REDESIGNED SECTIONS — problem / capabilities / pipeline
   ========================================================= */

/* ---- Problem section (dark, carded) ---- */
.problem-section { position: relative; overflow: hidden; }
.problem-glow {
  position: absolute;
  top: -220px; left: 50%;
  width: 900px; height: 520px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(240, 85, 43, 0.16), transparent 70%);
  pointer-events: none;
}
.problem-head { position: relative; z-index: 2; max-width: 820px; margin-bottom: 58px; }
.problem-eyebrow { display: block; margin-bottom: 16px; }
.problem-title-accent { color: rgba(255, 255, 255, 0.55); }
.problem-lede {
  /* Light, because this head sits on the dark ink-900 ground. */
  margin: -34px 0 0;
  max-width: 62ch;
  font-size: 1.02rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.66);
  text-wrap: pretty;
}
/* ---- The gap, and what closes it ----
   Three cards stating a problem, with the answer parked underneath, made the
   answer look bolted on. Each gap now sits directly across a seam from the
   thing that closes it: the left side stays part of the dark section, the
   right side is a lit surface, and the joint between them is the design. */
.seam-legend,
.seam-row {
  display: grid;
  grid-template-columns: 1fr 56px 1fr;
  align-items: stretch;
}
.seam-legend {
  position: relative;
  z-index: 2;
  margin-bottom: 6px;
  padding: 0 4px;
}
.seam-legend-cell {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-bottom: 16px;
}
.seam-legend-cell.is-gap { color: var(--accent-warm); }
.seam-legend-cell.is-close {
  grid-column: 3;
  color: rgba(167, 139, 250, 0.9);
}

.seam-rows {
  position: relative;
  z-index: 2;
  list-style: none;
  margin: 0;
  padding: 0;
}
.seam-row {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding: 26px 0;
}
.seam-row:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.09); }

/* ---- The gap side: stays part of the dark ground ---- */
.seam-side.is-gap { padding: 4px 4px 4px 0; }
.seam-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.seam-icon {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: rgba(240, 85, 43, 0.14);
  border: 1px solid rgba(240, 85, 43, 0.24);
  color: var(--accent-warm);
}
.seam-n {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.09);
}
.seam-side.is-gap h3 {
  font-size: 1.04rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #fff;
  margin-bottom: 10px;
}
.seam-side.is-gap p {
  font-size: 0.875rem;
  line-height: 1.66;
  color: rgba(255, 255, 255, 0.58);
  margin: 0 0 16px;
  text-wrap: pretty;
}
.seam-cost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.73rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
}
.seam-cost::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-warm);
  flex-shrink: 0;
}

/* ---- The joint ---- */
.seam-joint {
  position: relative;
  align-self: stretch;
  display: grid;
  place-items: center;
}
.seam-line {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.16) 22%, rgba(255, 255, 255, 0.16) 78%, transparent);
}
.seam-node {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--grad-primary);
  color: #fff;
  box-shadow: 0 0 0 6px var(--ink-900), 0 10px 24px -8px rgba(79, 70, 229, 0.85);
  transform: scale(0);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.32s;
}
.seam-row.is-visible .seam-node { transform: scale(1); }

/* ---- The close side: the lit surface ---- */
.seam-side.is-close {
  position: relative;
  align-self: center;
  display: flex;
  flex-direction: column;
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, rgba(99, 102, 241, 0.16) 0%, rgba(255, 255, 255, 0.05) 100%);
  border: 1px solid rgba(139, 92, 246, 0.26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  /* Slides in from the seam so the row reads left to right on reveal. */
  opacity: 0;
  transform: translateX(26px);
  transition: opacity 0.55s var(--ease) 0.18s, transform 0.55s var(--ease) 0.18s;
}
.seam-row.is-visible .seam-side.is-close { opacity: 1; transform: translateX(0); }
.seam-close-key {
  align-self: flex-start;
  margin-bottom: 11px;
  padding: 4px 11px;
  border-radius: 100px;
  background: rgba(167, 139, 250, 0.16);
  border: 1px solid rgba(167, 139, 250, 0.32);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ddd6fe;
}
.seam-side.is-close p {
  font-size: 0.875rem;
  line-height: 1.68;
  color: rgba(255, 255, 255, 0.76);
  margin: 0;
  text-wrap: pretty;
}

/* ---- Closing line ---- */
.seam-foot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.seam-foot p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  max-width: 62ch;
}
.seam-foot-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 22px;
  border-radius: 100px;
  background: var(--grad-primary);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 14px 30px -12px rgba(79, 70, 229, 0.9);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.seam-foot-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px -12px rgba(79, 70, 229, 1);
}
.seam-foot-link svg { transition: transform 0.3s var(--ease); }
.seam-foot-link:hover svg { transform: translateX(4px); }



/* ---- Capabilities (features) ---- */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.cap-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-medium);
  border-radius: var(--radius-xl);
  padding: 30px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.cap-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(79, 70, 229, 0.28);
}
.cap-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.cap-icon {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 13px;
  background: var(--grad-soft-indigo);
  color: var(--indigo-600);
}
.cap-step {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-300);
}
.cap-card h3 { font-size: 1.1rem; margin-bottom: 10px; }
.cap-card > p { font-size: 0.89rem; color: var(--ink-500); line-height: 1.65; margin-bottom: 22px; }
/* Fixed-height visual so all three cards align, whatever the copy length */
.cap-visual {
  margin-top: auto;
  min-height: 132px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
  background: var(--surface-alt);
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-md);
  padding: 18px;
}
.cap-prompt {
  font-size: 0.76rem;
  color: var(--ink-500);
  background: var(--surface);
  border: 1px solid var(--line-medium);
  border-radius: 8px;
  padding: 9px 12px;
}
.cap-progress { height: 4px; border-radius: 100px; background: var(--line-medium); overflow: hidden; }
.cap-progress span {
  display: block; height: 100%; width: 68%;
  border-radius: 100px;
  background: var(--grad-primary);
}
.cap-result { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cap-lines { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.cap-lines span { display: block; height: 6px; border-radius: 3px; background: var(--surface-tint); }
.cap-lines span:last-child { width: 62%; }
.cap-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.68rem; font-weight: 700;
  color: var(--emerald-600);
  background: rgba(16, 185, 129, 0.12);
  padding: 4px 9px; border-radius: 100px;
  flex-shrink: 0;
}
.cap-check { display: flex; align-items: center; gap: 9px; font-size: 0.78rem; color: var(--ink-700); }
.cap-check em { font-style: normal; color: var(--ink-400); margin-left: auto; font-size: 0.72rem; }
.cap-tick {
  width: 17px; height: 17px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.62rem; font-weight: 800;
  flex-shrink: 0;
}
.cap-tick.ok { background: rgba(16, 185, 129, 0.14); color: var(--emerald-600); }
.cap-tick.warn { background: rgba(245, 158, 11, 0.18); color: var(--amber-600); }
.cap-seal { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cap-foot {
  display: flex; align-items: baseline; gap: 7px;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--line-subtle);
  font-size: 0.8rem; color: var(--ink-400);
}
.cap-metric { font-size: 1.15rem; font-weight: 800; color: var(--ink-900); }

/* ---- How it works: connected pipeline ---- */
.how-head { max-width: 720px; margin-bottom: 56px; }
.how-head h2 { margin: 14px 0 16px; }
.pipe {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.pipe-step { position: relative; padding-top: 42px; }
/* Connector line between nodes */
.pipe-step::before {
  content: "";
  position: absolute;
  top: 13px; left: 28px; right: -24px;
  height: 2px;
  background: linear-gradient(90deg, var(--pipe-accent), var(--line-medium));
}
.pipe-step.is-final::before { display: none; }
.pipe-node {
  position: absolute;
  top: 0; left: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--pipe-accent);
  background: var(--surface);
  display: grid;
  place-items: center;
}
.pipe-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--pipe-accent);
}
.pipe-label {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pipe-accent);
  margin-bottom: 10px;
}
.pipe-body h3 { font-size: 1.02rem; margin-bottom: 9px; }
.pipe-body p { font-size: 0.87rem; color: var(--ink-500); line-height: 1.6; margin: 0; }
.pipe-flag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--amber-600);
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.22);
  padding: 5px 11px;
  border-radius: 100px;
}


/* =========================================================
   HERO 3D JURISDICTION STACK
   One contract, layered through the markets it must hold up
   in. Pure CSS 3D transforms — no image assets.
   ========================================================= */
.hero-3d {
  position: relative;
  perspective: 1500px;
  perspective-origin: 50% 45%;
  min-height: 540px;
  padding-top: 54px;
  display: grid;
  place-items: center;
}
/* Isometric: plates float one above the next along Z, so every layer's face
   stays visible. A near-flat Y-rotation just hid them behind the front sheet. */
.hero-3d-stage {
  position: relative;
  width: 300px;
  height: 370px;
  transform-style: preserve-3d;
  transform: rotateX(54deg) rotateZ(-38deg);
  animation: heroStageFloat 10s ease-in-out infinite;
}
@keyframes heroStageFloat {
  0%, 100% { transform: rotateX(54deg) rotateZ(-38deg) translateZ(0); }
  50%      { transform: rotateX(52deg) rotateZ(-41deg) translateZ(22px); }
}

/* Patterned plane sitting behind the stack, tilted into the same space */
.hero-3d-grid {
  position: absolute;
  inset: -70px -90px -90px -70px;
  transform: translateZ(-70px);
  background-image:
    linear-gradient(rgba(79, 70, 229, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 70, 229, 0.22) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(ellipse 60% 60% at 50% 45%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 45%, #000 30%, transparent 78%);
  border-radius: 24px;
}

/* Stacked sheets - each one a jurisdiction the same contract passes through */
.hero-3d-sheet {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 26px 60px -28px rgba(29, 26, 58, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-3d-sheet .sheet-tag {
  position: absolute;
  top: 16px; right: 18px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-400);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--line-medium);
  padding: 4px 9px;
  border-radius: 6px;
}
/* Depth: each layer sits further back and slightly offset */
/* Each jurisdiction floats on its own plane, offset slightly so the stack
   reads as depth rather than a single thick slab. */
.sheet-4 { transform: translate3d(-30px, -30px, 0px)   scale(0.94); opacity: 0.34; }
.sheet-3 { transform: translate3d(-20px, -20px, 42px)  scale(0.96); opacity: 0.5; }
.sheet-2 { transform: translate3d(-13px, -13px, 84px)  scale(0.975); opacity: 0.66; }
.sheet-1 { transform: translate3d(-6px, -6px, 126px)   scale(0.99); opacity: 0.82; }

/* Country tag sits on the exposed corner of each plate */
.sheet-1 .sheet-tag, .sheet-2 .sheet-tag,
.sheet-3 .sheet-tag, .sheet-4 .sheet-tag {
  top: 16px; right: auto;
  bottom: auto; left: 18px;
}
.sheet-edge {
  position: absolute;
  left: 18px; top: 48px;
  width: 44px; height: 3px;
  border-radius: 100px;
  background: var(--line-strong);
  opacity: 0.5;
}

/* Front-sheet formalities checklist (fills the dead space mid-sheet) */
.sheet-checks { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.sheet-checks span {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.76rem; font-weight: 600; color: var(--ink-500);
}
.sheet-ok {
  position: relative;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.16);
  border: 1.5px solid var(--emerald-500);
  flex-shrink: 0;
}

/* ---- Autoplay: the checks clear in order, then the sheet seals ----
   Only added once JS marks the stage as driven, so with JS off or reduced
   motion on, the sheet stays in its finished state rather than blank. */
.hero-3d-stage.is-driven .sheet-checks span {
  color: var(--ink-300);
  transition: color 0.4s var(--ease);
}
.hero-3d-stage.is-driven .sheet-ok {
  background: transparent;
  border-color: var(--ink-200);
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease);
}
/* Tick mark, drawn only when that row clears */
.hero-3d-stage.is-driven .sheet-ok::after {
  content: "";
  position: absolute;
  left: 3.5px; top: 1.5px;
  width: 4px; height: 7.5px;
  border: solid #fff;
  border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg) scale(0.4);
  opacity: 0;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.hero-3d-stage.is-driven .sheet-checks span.is-done { color: var(--ink-700); }
.hero-3d-stage.is-driven .sheet-checks span.is-done .sheet-ok {
  background: var(--emerald-500);
  border-color: var(--emerald-500);
}
.hero-3d-stage.is-driven .sheet-checks span.is-done .sheet-ok::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

/* Front sheet - the live document */
.sheet-front {
  transform: translateZ(172px);
  background: #fff;
  border-color: rgba(255, 255, 255, 1);
  box-shadow:
    0 40px 80px -30px rgba(29, 26, 58, 0.45),
    0 0 0 1px rgba(29, 26, 58, 0.05);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
}
.sheet-front .sheet-tag.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--ctry-a), var(--ctry-b));
  border-color: transparent;
}
.sheet-title {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--ink-900);
  margin-top: 26px;
}
.sheet-rule {
  display: block;
  width: 46px; height: 3px;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--ctry-a), var(--ctry-b));
  margin: 12px 0 20px;
}
.sheet-lines { display: flex; flex-direction: column; gap: 10px; }
.sheet-lines span {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--surface-tint), var(--surface-alt));
}
.sheet-seal {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px dashed var(--line-medium);
}
.sheet-stamp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--emerald-600);
  border: 1.5px solid var(--emerald-500);
  padding: 5px 9px;
  border-radius: 6px;
  transform: rotate(-6deg);
}
/* Stamp lands once every check has cleared */
.hero-3d-stage.is-driven .sheet-stamp {
  opacity: 0;
  transform: rotate(-16deg) scale(1.5);
  transition: opacity 0.3s var(--ease), transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hero-3d-stage.is-driven.is-sealed .sheet-stamp {
  opacity: 1;
  transform: rotate(-6deg) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .hero-3d-stage { animation: none; }
}

/* =========================================================
   LEGALITY GUIDE — index + country pages
   ========================================================= */

/* ---- Index hero ---- */
.lgi-hero {
  position: relative;
  padding: 172px 0 60px;
  overflow: hidden;
}
.lgi-hero > .container-xl-custom { position: relative; z-index: 2; }
.lgi-hero-grid {
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  align-items: center;
  gap: 48px;
}
.lgi-hero .eyebrow-mono { display: block; margin-bottom: 18px; }
.lgi-title {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: -0.028em;
  max-width: 900px;
  margin-bottom: 20px;
}
.lgi-hero .lede { max-width: 700px; margin-bottom: 32px; }

/* Search */
.lgi-search-wrap {
  position: relative;
  width: 100%;
  max-width: 460px;
}
.lgi-search-icon {
  position: absolute;
  left: 20px; top: 50%;
  transform: translateY(-50%);
  color: var(--ink-400);
  pointer-events: none;
}
.lgi-search {
  width: 100%;
  padding: 15px 22px 15px 50px;
  border-radius: 100px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  font-family: inherit;
  font-size: 0.98rem;
  color: var(--ink-900);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.lgi-search::placeholder { color: var(--ink-400); }
.lgi-search:focus {
  outline: none;
  border-color: var(--indigo-500);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.14);
}

/* Hero stat strip */
.lgi-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 44px;
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid var(--line-medium);
}
.lgi-stat { display: flex; flex-direction: column; gap: 3px; }
.lgi-stat strong {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink-900);
}
.lgi-stat span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-400);
}

/* ---- Hero 3D deck ----
   A cascade rather than a flat stack: each card sits lower and nearer than the
   one behind it, so every layer keeps a visible header strip. A fanned or
   tilted stack hides the back cards behind the front one. */
.lgi-hero-visual { position: relative; }
.lg3d {
  position: relative;
  perspective: 1400px;
  perspective-origin: 55% 45%;
  min-height: 470px;
  display: grid;
  place-items: center;
}
.lg3d-glow {
  position: absolute;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.17) 0%, rgba(147, 51, 234, 0.1) 45%, transparent 70%);
  filter: blur(22px);
  pointer-events: none;
}
/* No rotateZ: a Z-tilt lifts the right edge of every card by ~10px, which reads
   as a label and its value being misaligned rather than as depth. rotateY alone
   carries the perspective. */
.lg3d-stage {
  position: relative;
  width: 272px;
  height: 410px;
  transform-style: preserve-3d;
  transform: rotateX(7deg) rotateY(-14deg);
  animation: lg3dFloat 11s ease-in-out infinite;
}
@keyframes lg3dFloat {
  0%, 100% { transform: rotateX(7deg) rotateY(-14deg) translateY(0); }
  50%      { transform: rotateX(6deg) rotateY(-17deg) translateY(-14px); }
}

/* Patterned plane sitting behind the deck, in the same 3D space */
.lg3d-plane {
  position: absolute;
  inset: -56px -76px -66px -66px;
  transform: translateZ(-90px);
  background-image:
    linear-gradient(rgba(79, 70, 229, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 70, 229, 0.2) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse 62% 62% at 50% 46%, #000 28%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 46%, #000 28%, transparent 78%);
  border-radius: 24px;
}

/* Every card is the same size and carries the same content; the slot it holds
   decides where it sits and whether its body shows. Cards move between slots on
   a timer, so the deck cycles through markets. Depth sorting is handled by
   preserve-3d, so no z-index is needed. */
.lg3d-card {
  position: absolute;
  left: 0;
  width: 272px;
  height: 206px;
  padding: 13px 15px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 24px 54px -26px rgba(29, 26, 58, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    top 0.85s var(--ease),
    transform 0.85s var(--ease),
    opacity 0.5s ease,
    box-shadow 0.85s var(--ease),
    background-color 0.85s var(--ease);
}
.lg3d-card[data-slot="0"] { top: 0;     transform: translate3d(0, 0, 0);        opacity: 0.74; }
.lg3d-card[data-slot="1"] { top: 50px;  transform: translate3d(7px, 0, 34px);   opacity: 0.83; }
.lg3d-card[data-slot="2"] { top: 100px; transform: translate3d(14px, 0, 68px);  opacity: 0.9; }
.lg3d-card[data-slot="3"] { top: 150px; transform: translate3d(21px, 0, 102px); opacity: 0.96; }
.lg3d-card[data-slot="4"] { top: 200px; transform: translate3d(28px, 0, 136px); opacity: 1; }

/* Front card is flagged by class rather than slot number, so the deck can grow
   or shrink without the styling needing to know how many cards there are. */
.lg3d-card.is-front {
  background: #fff;
  box-shadow: 0 34px 70px -28px rgba(29, 26, 58, 0.55);
}
/* Only the front card shows its detail rows; the others are covered by the
   card in front of them anyway. */
.lg3d-body, .lg3d-seal { opacity: 0; transition: opacity 0.45s ease; }
.lg3d-card.is-front .lg3d-body,
.lg3d-card.is-front .lg3d-seal { opacity: 1; }

/* Cycle: the front card fades down and out, then snaps to the back untransitioned
   while invisible, so it never flies across the deck. Ordered after the slot
   rules so it wins on equal specificity. */
.lg3d-card.is-exiting {
  opacity: 0;
  transform: translate3d(28px, 30px, 136px);
}
.lg3d-card.is-wrapping {
  transition: none;
  opacity: 0;
}

.lg3d-row { display: flex; align-items: center; gap: 9px; }
.lg3d-flag {
  flex-shrink: 0;
  width: 26px; height: 18px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line-medium);
}
.lg3d-flag img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lg3d-name {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  white-space: nowrap;
}
.lg3d-tag {
  flex-shrink: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 3px 7px;
  border-radius: 5px;
}
.lg3d-tag.is-open { background: rgba(16, 185, 129, 0.13); color: var(--emerald-600); }
.lg3d-tag.is-tiered { background: rgba(245, 158, 11, 0.15); color: var(--amber-600); }
.lg3d-tag.is-strict { background: rgba(244, 63, 94, 0.13); color: var(--rose-600); }

.lg3d-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 14px 0 13px;
  padding-top: 13px;
  border-top: 1px solid var(--line-subtle);
}
.lg3d-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lg3d-line i {
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: var(--ink-400);
}
.lg3d-line b { font-size: 0.7rem; font-weight: 700; color: var(--ink-700); white-space: nowrap; }
.lg3d-seal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 100px;
  background: rgba(16, 185, 129, 0.1);
  color: var(--emerald-600);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ---- Regime legend ----
   Three numbered cards, each carrying its regime's colour through a top rail,
   the step number, the icon and the market count. The rail widens on hover. */
.lgi-legend-band { padding: 60px 0; }
.lgi-legend-head { max-width: 620px; margin-bottom: 30px; }
.lgi-legend-head h2 {
  font-size: clamp(1.4rem, 2.3vw, 1.95rem);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.2;
  margin-bottom: 10px;
}
.lgi-legend-head p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink-500);
  margin: 0;
}

.lgi-legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.lgi-legend-card {
  --regime: var(--ink-300);
  --regime-soft: rgba(126, 120, 178, 0.1);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 26px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-medium);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.lgi-legend-card.is-open   { --regime: var(--emerald-500); --regime-soft: rgba(16, 185, 129, 0.1); }
.lgi-legend-card.is-tiered { --regime: var(--amber-500);   --regime-soft: rgba(245, 158, 11, 0.12); }
.lgi-legend-card.is-strict { --regime: var(--rose-500);    --regime-soft: rgba(244, 63, 94, 0.1); }

/* Colour rail along the top edge, growing from a stub to the full width */
.lgi-legend-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 4px;
  width: 64px;
  background: var(--regime);
  border-radius: 0 4px 4px 0;
  transition: width 0.45s var(--ease);
}
.lgi-legend-card:hover {
  transform: translateY(-4px);
  border-color: var(--regime);
  box-shadow: var(--shadow-md);
}
.lgi-legend-card:hover::before { width: 100%; }

/* Oversized step number, sitting behind the content as a watermark */
.lgi-legend-num {
  position: absolute;
  top: 14px; right: 20px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 2.9rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--regime);
  opacity: 0.13;
  pointer-events: none;
}
.lgi-legend-icon {
  display: inline-grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--regime-soft);
  color: var(--regime);
  margin-bottom: 16px;
}
.lgi-legend-title {
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 9px;
}
.lgi-legend-text {
  font-size: 0.89rem;
  line-height: 1.65;
  color: var(--ink-500);
  margin: 0 0 20px;
}
.lgi-legend-foot {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line-subtle);
}
.lgi-legend-count {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-400);
  white-space: nowrap;
}
.lgi-legend-count strong {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--regime);
  margin-right: 3px;
}
.lgi-legend-note {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-700);
}

/* ---- Region groups ---- */
.lgi-grid-section { padding-top: 60px; }
.lgi-region { margin-bottom: 54px; }
.lgi-region[hidden] { display: none; }
.lgi-region-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding-bottom: 14px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line-medium);
}
.lgi-region-title { font-size: 1.15rem; margin: 0; letter-spacing: -0.01em; }
.lgi-region-meta {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--ink-400);
}
.lgi-region-note {
  flex: 0 0 100%;
  margin: 4px 0 0;
  font-size: 0.87rem;
  line-height: 1.65;
  color: var(--ink-500);
  text-wrap: pretty;
}
.lgi-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

/* Each card is a miniature guide cover. The regime sets --card-accent, which
   colours the dot, the hover border and the bar that wipes in along the bottom
   — so the three buckets are readable at a glance across the whole grid. */
.lgi-card {
  --card-accent: var(--ink-300);
  --card-tint: rgba(126, 120, 178, 0.07);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 17px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-medium);
  background: var(--surface);
  color: var(--ink-900);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.lgi-card.is-open   { --card-accent: var(--emerald-500); --card-tint: rgba(16, 185, 129, 0.1); }
.lgi-card.is-tiered { --card-accent: var(--amber-500);   --card-tint: rgba(245, 158, 11, 0.11); }
.lgi-card.is-strict { --card-accent: var(--rose-500);    --card-tint: rgba(244, 63, 94, 0.09); }

/* Background is two layers reading on a diagonal: the regime's own tint
   sweeping down from the top-right, and the country's flag as a soft watermark
   behind its badge at the top-left. Both sit on a negative z-index, which
   paints them over the card background but under the text. */
.lgi-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(115% 85% at 100% 0%, var(--card-tint) 0%, transparent 62%);
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
  z-index: -1;
}
.lgi-card-wash {
  position: absolute;
  top: -30px; left: -28px;
  width: 116px; height: 116px;
  background-size: cover;
  background-position: center;
  /* Light blur only — heavy blur smears a striped flag into a band, no blur at
     all reads as a printing error. The radial mask fades it into the card. */
  filter: blur(7px) saturate(125%);
  mask-image: radial-gradient(circle at 50% 50%, #000 34%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 34%, transparent 72%);
  opacity: 0.16;
  transform: scale(1);
  transition: opacity 0.4s var(--ease), transform 0.55s var(--ease);
  pointer-events: none;
  z-index: -1;
}
/* Accent bar wiping in along the bottom edge on hover */
.lgi-card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--card-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s var(--ease);
}
.lgi-card:hover {
  transform: translateY(-4px);
  border-color: var(--card-accent);
  box-shadow: var(--shadow-md);
  color: var(--ink-900);
}
.lgi-card:hover::after { transform: scaleX(1); }
.lgi-card:hover .lgi-card-wash { opacity: 0.3; transform: scale(1.18); }
.lgi-card[hidden] { display: none; }

.lgi-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}
/* Round flag badge — reads as an identity mark rather than a list bullet. */
.lgi-flag {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-alt);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--line-medium), var(--shadow-sm);
}
.lgi-flag img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lgi-flag-fallback {
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--ink-500);
}
.lgi-card-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink-300);
}

.lgi-card-name {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-bottom: 11px;
}
.lgi-card-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 11px;
  border-top: 1px solid var(--line-subtle);
}
.regime-dot {
  flex-shrink: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--card-accent);
}
.regime-dot.is-pending { background: transparent; border: 1.5px solid var(--ink-300); }
.lgi-card-regime {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-400);
  white-space: nowrap;
}
.lgi-card-arrow {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--card-accent);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.lgi-card:hover .lgi-card-arrow { opacity: 1; transform: translateX(0); }

.lgi-card.is-soon {
  background: transparent;
  border-style: dashed;
  cursor: default;
}
.lgi-card.is-soon:hover { transform: none; border-color: var(--line-medium); box-shadow: none; }
.lgi-card.is-soon:hover::after { transform: scaleX(0); }
.lgi-card.is-soon .lgi-card-name { color: var(--ink-400); font-weight: 600; }
.lgi-card.is-soon .lgi-flag { opacity: 0.5; filter: grayscale(1); box-shadow: 0 0 0 2px var(--bg-main), 0 0 0 3px var(--line-medium); }

.lgi-empty { text-align: center; color: var(--ink-400); padding: 30px 0; }
.lgi-disclaimer { max-width: 820px; margin-top: 8px; }

/* ---- Index closing CTA ---- */
.lgc-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 30px;
  transition: color 0.25s var(--ease), gap 0.25s var(--ease);
}
.lgc-back svg { transform: rotate(180deg); }
.lgc-back:hover { color: #fff; gap: 12px; }

.lgc-hero-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 48px;
}
.lgc-hero-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.lgc-code {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
}
.lgc-title {
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 18px;
}
.lgc-hero-sub { font-size: 1rem; color: rgba(255, 255, 255, 0.62); line-height: 1.65; max-width: 640px; margin: 0; }

/* Hero flag — the country's own identity, sized to read as a crest. */
.lgc-hero-flag {
  flex-shrink: 0;
  width: 168px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 24px 48px -18px rgba(0, 0, 0, 0.7);
  transform: rotate(-2deg);
}
.lgc-hero-flag img { display: block; width: 100%; height: auto; }

/* ---- Country page body ---- */
.lgc-body { padding-top: 66px; }
.lgc-answer-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 44px;
  align-items: start;
  margin-bottom: 60px;
}
.lgc-q {
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.3;
  margin-bottom: 16px;
}
.lgc-a { font-size: 1.06rem; font-weight: 700; color: var(--accent-warm); line-height: 1.5; margin: 0; }
.lgc-law {
  padding: 28px 30px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-medium);
  background: linear-gradient(150deg, var(--surface-alt), var(--surface));
  box-shadow: var(--shadow-xs);
}
.lgc-law-icon {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--grad-primary);
  color: #fff;
  margin-bottom: 14px;
}
.lgc-law h3 { font-size: 0.98rem; margin-bottom: 10px; }
.lgc-law p { font-size: 0.92rem; color: var(--ink-500); line-height: 1.65; margin: 0; }

.lgc-h2 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 24px; }
.lgc-h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 1rem;
  margin-bottom: 18px;
}
.lgc-h3 svg { flex-shrink: 0; }
.lgc-panel.is-yes .lgc-h3 svg { color: var(--emerald-500); }
.lgc-panel.is-no .lgc-h3 svg { color: var(--ink-300); }
.lgc-ident .lgc-h3 svg { color: var(--indigo-500); }
.lgc-p { font-size: 0.92rem; color: var(--ink-500); line-height: 1.7; margin: 0; }

.lgc-table-wrap {
  overflow-x: auto;
  margin-bottom: 52px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-medium);
  box-shadow: var(--shadow-sm);
}
.lgc-table { width: 100%; border-collapse: collapse; min-width: 520px; }
.lgc-table thead th {
  background: var(--ink-900);
  color: #fff;
  text-align: left;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 15px 22px;
}
.lgc-table td {
  padding: 17px 22px;
  font-size: 0.92rem;
  color: var(--ink-500);
  border-bottom: 1px solid var(--line-subtle);
}
.lgc-table tbody tr:last-child td { border-bottom: none; }
.lgc-table td:first-child { font-weight: 700; color: var(--ink-900); white-space: nowrap; }
.lgc-table tbody tr:nth-child(odd) { background: var(--surface-alt); }

.lgc-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 52px;
}
.lgc-split-lower { align-items: start; gap: 44px; }
.lgc-panel {
  padding: 28px 30px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-medium);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.lgc-panel.is-yes { border-top: 3px solid var(--emerald-500); }
.lgc-panel.is-no { border-top: 3px solid var(--line-strong); }

.lgc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.lgc-list li {
  position: relative;
  padding-left: 22px;
  font-size: 0.92rem;
  color: var(--ink-700);
  line-height: 1.5;
}
.lgc-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 8px; height: 8px;
  border-radius: 50%;
}
.lgc-list.is-yes li::before { background: var(--emerald-500); }
.lgc-list.is-no li::before { background: transparent; border: 1.5px solid var(--ink-300); }
.lgc-note { font-size: 0.82rem; color: var(--ink-400); line-height: 1.6; margin: 18px 0 0; }

.lgc-callout {
  border-radius: var(--radius-md);
  padding: 22px 26px;
  border-left: 4px solid;
}
.lgc-callout h3 { font-size: 0.98rem; margin-bottom: 9px; }
.lgc-callout p { font-size: 0.9rem; line-height: 1.65; margin: 0; }
.lgc-callout p + p { margin-top: 9px; }
.lgc-callout.is-amber { background: rgba(245, 158, 11, 0.09); border-left-color: var(--amber-500); color: var(--ink-700); }
.lgc-callout.is-rose { background: rgba(244, 63, 94, 0.07); border-left-color: var(--rose-500); color: var(--ink-700); margin-bottom: 36px; }

.lgc-supports {
  position: relative;
  border: 1.5px solid var(--ink-900);
  border-radius: var(--radius-lg);
  padding: 30px 32px;
  margin-bottom: 34px;
  background: var(--surface);
  overflow: hidden;
}
/* Warm edge marking this as the "what we do here" block rather than law. */
.lgc-supports::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--accent-warm);
}
.lgc-supports h3 { font-size: 1.05rem; margin-bottom: 16px; }
.lgc-supports ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.lgc-supports li {
  position: relative;
  padding-left: 22px;
  font-size: 0.92rem;
  color: var(--ink-700);
}
.lgc-supports li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-warm);
}
.lgc-cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* Pages whose hero is dark need the navbar opaque from the top, or the dark
   wordmark disappears into it (the navbar is transparent until scrolled). */
.has-dark-hero .nav-inner {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-color: rgba(255, 255, 255, 0.75);
  box-shadow: 0 12px 32px -8px rgba(13, 12, 29, 0.1), 0 0 0 1px rgba(29, 26, 58, 0.05);
}

/* "We don't operate here" variant of the supports card — a refusal should be
   as prominent as a capability list, not a quiet omission. */
.lgc-supports.is-unavailable {
  border-color: var(--rose-500);
  background: rgba(244, 63, 94, 0.06);
}
.lgc-supports.is-unavailable::before { background: var(--rose-500); }
.lgc-supports.is-unavailable li::before { background: var(--rose-500); }

/* =========================================================
   WHY DOCSLIY
   ========================================================= */

/* ---- Hero ---- */
.why-hero {
  position: relative;
  padding: 172px 0 60px;
  overflow: hidden;
}
.why-hero > .container-xl-custom { position: relative; z-index: 2; }
.why-hero .eyebrow-mono { display: block; margin-bottom: 18px; }
.why-title {
  font-size: clamp(2.2rem, 4.2vw, 3.5rem);
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: -0.03em;
  max-width: 940px;
  margin-bottom: 22px;
}
.why-hero .lede { max-width: 720px; margin-bottom: 34px; }
.why-hero .hero-actions { margin-bottom: 48px; }

.why-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  padding-top: 32px;
  border-top: 1px solid var(--line-medium);
}
/* Narrow enough that all three stay on one row inside the hero's copy column. */
.why-hero-stat { display: flex; flex-direction: column; gap: 5px; flex: 1 1 0; min-width: 150px; }
.why-hero-stat strong {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink-900);
}
.why-hero-stat span {
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--ink-400);
}

/* ---- Three differentiators ---- */
.why-diff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.why-diff-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 30px 28px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-medium);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.why-diff-card:hover {
  transform: translateY(-4px);
  border-color: var(--indigo-500);
  box-shadow: var(--shadow-md);
}
.why-diff-num {
  position: absolute;
  top: 18px; right: 22px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--indigo-600);
  opacity: 0.11;
  pointer-events: none;
}
.why-diff-icon {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 13px;
  background: var(--grad-primary);
  color: #fff;
  margin-bottom: 18px;
}
.why-diff-card h3 {
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  margin-bottom: 11px;
}
.why-diff-card > p {
  font-size: 0.92rem;
  line-height: 1.68;
  color: var(--ink-500);
  margin: 0 0 22px;
}
.why-diff-proof {
  display: block;
  margin-top: auto;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--surface-alt);
  font-size: 0.83rem;
  line-height: 1.6;
  color: var(--ink-500);
}
.why-diff-proof strong { color: var(--ink-900); }

/* ---- Order of operations ---- */
.why-order-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 62px;
  align-items: center;
}
.why-order-copy .lede-sm + .lede-sm { margin-top: 16px; }
.why-order-copy .btn-dark { margin-top: 26px; }

.why-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
/* Spine connecting the four stages */
.why-steps::before {
  content: "";
  position: absolute;
  left: 21px; top: 14px; bottom: 14px;
  width: 2px;
  background: linear-gradient(180deg, var(--indigo-600), rgba(79, 70, 229, 0.12));
}
.why-step {
  position: relative;
  display: flex;
  gap: 20px;
  padding-bottom: 26px;
}
.why-step:last-child { padding-bottom: 0; }
.why-step-n {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--indigo-600);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--indigo-600);
}
.why-step h3 {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 10px 0 7px;
}
.why-step p {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--ink-500);
  margin: 0;
}

/* ---- Versus ---- */
.why-vs-note {
  max-width: 780px;
  margin: 26px auto 0;
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--ink-400);
}

/* ---- Proof ---- */
.why-proof-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.why-proof-card {
  display: flex;
  flex-direction: column;
  padding: 30px 32px 26px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-medium);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  color: var(--ink-900);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.why-proof-card:hover {
  transform: translateY(-4px);
  border-color: var(--indigo-500);
  box-shadow: var(--shadow-md);
  color: var(--ink-900);
}
.why-proof-icon {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--grad-soft-indigo);
  color: var(--indigo-600);
  margin-bottom: 17px;
}
.why-proof-card h3 {
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.017em;
  margin-bottom: 10px;
}
.why-proof-card p {
  font-size: 0.9rem;
  line-height: 1.68;
  color: var(--ink-500);
  margin: 0 0 20px;
}
.why-proof-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: 0.87rem;
  font-weight: 700;
  color: var(--indigo-600);
  transition: gap 0.25s var(--ease);
}
.why-proof-card:hover .why-proof-link { gap: 13px; }

/* ---- Honest limits ---- */
.why-limits-inner {
  display: flex;
  flex-direction: column;
  gap: 44px;
}
.why-limits-inner .section-head {
  margin-bottom: 0;
  text-align: left;
  max-width: 62ch;
}
.why-limits-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px 28px;
}
.why-limit {
  padding-left: 18px;
  border-left: 2px solid var(--line-strong);
}
/* The rules separate the columns, so the leftmost card doesn't need one:
   sitting on the content's left edge it reads as a stray line rather than a
   divider. Drop its indent too, so that card lines up with the heading
   above it. responsive.css repeats this for whichever card starts a row
   once the grid drops to two columns. */
.why-limit:first-child {
  padding-left: 0;
  border-left: 0;
}
.why-limit h3 {
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  margin-bottom: 9px;
}
.why-limit p {
  font-size: 0.88rem;
  line-height: 1.68;
  color: var(--ink-500);
  margin: 0;
}

/* ---- Risk / fix cards ----
   Four cards, so two columns reads as two pairs rather than one long scroll.
   Rows stretch by default, which is what keeps the dark-to-light seam on the
   same line across a row (the fix zone reserves three lines lower down for
   the same reason). */
.why-sol-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.why-sol-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-medium);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.why-sol-card:hover {
  transform: translateY(-5px);
  border-color: var(--indigo-500);
  box-shadow: var(--shadow-lg);
}

/* ---- Upper zone: the problem, on the dark ground ---- */
.why-sol-top {
  position: relative;
  flex: 1;
  padding: 28px 30px 34px;
  background: var(--ink-900);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
/* Indigo bloom in the corner, matching the dark hero panels */
.why-sol-top::before {
  content: "";
  position: absolute;
  top: -110px; right: -80px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.38) 0%, rgba(147, 51, 234, 0.18) 45%, transparent 70%);
  filter: blur(24px);
  z-index: -1;
  pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
}
.why-sol-card:hover .why-sol-top::before { opacity: 1; transform: scale(1.14); }
/* Fine grid texture, the same one the 3D stages sit on */
.why-sol-top::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(ellipse 80% 70% at 20% 0%, #000 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 20% 0%, #000 10%, transparent 75%);
  z-index: -1;
  pointer-events: none;
}
.why-sol-num {
  position: absolute;
  top: 20px; right: 26px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #fff;
  opacity: 0.14;
  pointer-events: none;
}
.why-sol-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  margin-bottom: 15px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.72);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.why-sol-tag svg { flex-shrink: 0; }
.why-sol-card h3 {
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: #fff;
  margin-bottom: 10px;
  max-width: 84%;
}
.why-sol-risk {
  font-size: 0.91rem;
  line-height: 1.68;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

/* ---- Lower zone: the fix, back in the light ---- */
.why-sol-fix {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: auto;
  padding: 32px 30px 28px;
  background: var(--surface);
}
.why-sol-pivot {
  position: absolute;
  top: -16px; left: 30px;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--grad-primary);
  color: #fff;
  box-shadow: 0 0 0 5px var(--surface), 0 8px 18px -6px rgba(79, 70, 229, 0.75);
  transform: rotate(90deg);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.why-sol-card:hover .why-sol-pivot {
  transform: rotate(90deg) translateX(4px);
  box-shadow: 0 0 0 5px var(--surface), 0 12px 26px -6px rgba(79, 70, 229, 0.85);
}
.why-sol-fix-label {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 7px;
  padding: 5px 12px 5px 10px;
  margin-bottom: 13px;
  border-radius: 100px;
  background: rgba(79, 70, 229, 0.09);
  border: 1px solid rgba(79, 70, 229, 0.22);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--indigo-600);
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.why-sol-card:hover .why-sol-fix-label {
  background: rgba(79, 70, 229, 0.14);
  border-color: rgba(79, 70, 229, 0.38);
}
.why-sol-fix-label svg { flex-shrink: 0; }
.why-sol-fix p {
  font-size: 0.89rem;
  line-height: 1.65;
  color: var(--ink-700);
  margin: 0;
  /* Reserve three lines so every fix zone is the same height and the seams
     line up across a row — otherwise a shorter fix leaves its card's light
     zone starting lower than its neighbour's. Derived from the type above
     rather than a fixed px, so it follows if the sizes change. */
  min-height: calc(0.89rem * 1.65 * 3);
}

/* ---- Why Docsliy: the two questions, above the named table ---- */
.why-vs-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-bottom: 34px;
}
.why-vs-col {
  padding: 28px 30px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-medium);
  background: var(--surface);
}
.why-vs-tag {
  display: inline-block;
  padding: 5px 13px;
  margin-bottom: 16px;
  border-radius: 100px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.why-vs-q {
  font-family: var(--font-serif);
  font-size: 1.24rem;
  line-height: 1.35;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
}
.why-vs-sub {
  font-size: 0.87rem;
  line-height: 1.6;
  color: var(--ink-400);
  margin: 0;
}
.why-vs-col.is-them { background: var(--surface-alt); }
.why-vs-col.is-them .why-vs-tag { background: rgba(29, 26, 58, 0.08); color: var(--ink-500); }
.why-vs-col.is-them .why-vs-q { color: var(--ink-500); }
.why-vs-col.is-us {
  border-color: var(--ink-900);
  border-width: 1.5px;
  box-shadow: var(--shadow-md);
}
.why-vs-col.is-us .why-vs-tag { background: var(--ink-900); color: #fff; }
.why-vs-col.is-us .why-vs-q { color: var(--ink-900); }

.why-vs-cta { display: flex; justify-content: center; margin-top: 26px; }

/* ---- Why Docsliy hero: exploded isometric layer stack ----
   Reads as an exploded assembly diagram: the contract at the base, and each
   correctness layer Docsliy adds floating above it. Isometric so every layer's
   face stays visible — a tilted or fanned stack hides the ones behind. */
.why-hero-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  align-items: center;
  gap: 48px;
}
.why-hero-visual { position: relative; }

.why3d {
  position: relative;
  perspective: 1500px;
  perspective-origin: 50% 42%;
  min-height: 520px;
  display: grid;
  place-items: center;
}
.why3d-glow {
  position: absolute;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.16) 0%, rgba(147, 51, 234, 0.1) 45%, transparent 70%);
  filter: blur(24px);
  pointer-events: none;
}
.why3d-stage {
  position: relative;
  width: 268px;
  height: 320px;
  transform-style: preserve-3d;
  transform: rotateX(56deg) rotateZ(-42deg);
  animation: why3dFloat 12s ease-in-out infinite;
}
@keyframes why3dFloat {
  0%, 100% { transform: rotateX(56deg) rotateZ(-42deg) translateZ(0); }
  50%      { transform: rotateX(54deg) rotateZ(-45deg) translateZ(20px); }
}

/* Patterned plane behind the stack, in the same 3D space */
.why3d-grid {
  position: absolute;
  inset: -66px -84px -84px -66px;
  transform: translateZ(-64px);
  background-image:
    linear-gradient(rgba(79, 70, 229, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 70, 229, 0.2) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse 60% 60% at 50% 46%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 46%, #000 30%, transparent 78%);
  border-radius: 22px;
}

.why3d-layer {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 24px 54px -28px rgba(29, 26, 58, 0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* The document sits on top, fully visible; the four correctness layers fan out
   beneath it. Each is stepped down in Y as well as Z — Z separation alone
   stacks them dead in line, so every label ends up hidden by the plate above. */
.why3d-layer.l1 { transform: translate3d(0, 152px, 0); }
.why3d-layer.l2 { transform: translate3d(0, 114px, 46px); }
.why3d-layer.l3 { transform: translate3d(0, 76px, 92px); }
.why3d-layer.l4 { transform: translate3d(0, 38px, 138px); }
.why3d-layer.is-doc { transform: translate3d(0, 0, 184px); }

.why3d-chip {
  position: absolute;
  bottom: 9px; left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--line-medium);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ink-500);
  white-space: nowrap;
}
/* Each layer carries its own accent, used by the dot, the ring and the chip's
   lit state — one variable rather than a rule per layer per state. */
.why3d-layer.l1 { --why3d-accent: var(--indigo-500); }
.why3d-layer.l2 { --why3d-accent: var(--amber-500); }
.why3d-layer.l3 { --why3d-accent: var(--violet-500); }
.why3d-layer.l4 { --why3d-accent: var(--emerald-500); }
.why3d-layer.is-doc { --why3d-accent: var(--accent-warm); }
.why3d-chip::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--why3d-accent);
}

/* ---- Autoplay: the pipeline running in the order the law requires ----
   Position transforms live on .l1-.l4, so the running state changes ring,
   chip and shadow only — nothing that would fight the layer's own transform. */
.why3d-layer { transition: box-shadow 0.45s var(--ease); }
.why3d-chip { transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease); }
.why3d-tick {
  width: 11px;
  flex-shrink: 0;
  color: var(--why3d-accent);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.why3d-layer.is-active {
  box-shadow: 0 26px 56px -24px rgba(29, 26, 58, 0.5), 0 0 0 2px var(--why3d-accent);
}
.why3d-layer.is-active .why3d-chip {
  background: var(--why3d-accent);
  border-color: var(--why3d-accent);
  color: #fff;
}
.why3d-layer.is-active .why3d-chip::before { background: rgba(255, 255, 255, 0.92); }
.why3d-layer.is-done .why3d-chip { border-color: var(--why3d-accent); }
.why3d-layer.is-done .why3d-tick { opacity: 1; transform: scale(1); }

/* The document is the last step: its signature block closes and stamps. */
.why3d-layer.is-doc.is-active .why3d-sign,
.why3d-layer.is-doc.is-done .why3d-sign {
  border-style: solid;
  border-color: var(--emerald-500);
  background: rgba(16, 185, 129, 0.12);
}
.why3d-stamp {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--emerald-600);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.why3d-layer.is-doc.is-active .why3d-stamp,
.why3d-layer.is-doc.is-done .why3d-stamp { opacity: 1; transform: scale(1); }

/* Base plate: the contract itself, opaque so the stack has a floor */
.why3d-layer.is-doc {
  background: #fff;
  border-color: #fff;
  box-shadow: 0 34px 64px -26px rgba(29, 26, 58, 0.55);
  padding: 20px 22px;
}
.why3d-doc-title {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}
.why3d-rule {
  display: block;
  width: 46px; height: 2px;
  border-radius: 2px;
  background: var(--accent-warm);
  margin: 10px 0 14px;
}
.why3d-lines { display: flex; flex-direction: column; gap: 8px; }
.why3d-lines i {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--surface-tint);
}
.why3d-lines i:nth-child(1) { width: 100%; }
.why3d-lines i:nth-child(2) { width: 88%; }
.why3d-lines i:nth-child(3) { width: 94%; }
.why3d-lines i:nth-child(4) { width: 62%; }
.why3d-sign {
  position: absolute;
  left: 22px; bottom: 22px;
  width: 84px; height: 28px;
  border-radius: 6px;
  background: linear-gradient(120deg, rgba(240, 85, 43, 0.16), rgba(79, 70, 229, 0.14));
  border: 1px dashed rgba(240, 85, 43, 0.45);
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease);
}

/* =========================================================
   DIY SIGNATURE
   ========================================================= */

/* ---- Hero ---- */
.diy-hero {
  position: relative;
  padding: 168px 0 60px;
  overflow: hidden;
}
.diy-hero > .container-xl-custom { position: relative; z-index: 2; }
.diy-hero-grid {
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  align-items: center;
  gap: 48px;
}
.diy-hero .eyebrow-mono { display: block; margin-bottom: 18px; }
.diy-title {
  font-size: clamp(2.1rem, 4vw, 3.3rem);
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}
.diy-hero .lede { margin-bottom: 14px; }
.diy-hero-sub {
  font-size: 0.94rem;
  line-height: 1.72;
  color: var(--ink-500);
  max-width: 560px;
  margin: 0 0 32px;
}
.diy-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--line-medium);
}
.diy-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 100px;
  background: var(--surface);
  border: 1px solid var(--line-medium);
  box-shadow: var(--shadow-xs);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-700);
}
.diy-chip svg { color: var(--emerald-500); flex-shrink: 0; }

/* ---- Hero 3D signing animation ---- */
.diy-hero-visual { position: relative; }
.diy3d {
  position: relative;
  perspective: 1400px;
  perspective-origin: 52% 44%;
  min-height: 500px;
  display: grid;
  place-items: center;
}
.diy3d-glow {
  position: absolute;
  width: 450px; height: 450px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.17) 0%, rgba(147, 51, 234, 0.1) 45%, transparent 70%);
  filter: blur(24px);
  pointer-events: none;
}
.diy3d-stage {
  position: relative;
  width: 316px;
  height: 400px;
  transform-style: preserve-3d;
  transform: rotateX(9deg) rotateY(-14deg);
  animation: diy3dFloat 11s ease-in-out infinite;
}
@keyframes diy3dFloat {
  0%, 100% { transform: rotateX(9deg) rotateY(-14deg) translateY(0); }
  50%      { transform: rotateX(7deg) rotateY(-17deg) translateY(-14px); }
}
.diy3d-grid {
  position: absolute;
  inset: -58px -74px -70px -66px;
  transform: translateZ(-80px);
  background-image:
    linear-gradient(rgba(79, 70, 229, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 70, 229, 0.18) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse 62% 62% at 50% 46%, #000 28%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 46%, #000 28%, transparent 78%);
  border-radius: 22px;
}

.diy3d-doc {
  position: absolute;
  inset: 0;
  padding: 22px 24px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 34px 70px -26px rgba(29, 26, 58, 0.5);
  transform: translateZ(0);
}
.diy3d-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.diy3d-badge {
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(79, 70, 229, 0.1);
  color: var(--indigo-600);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.diy3d-title { font-size: 0.86rem; font-weight: 700; letter-spacing: -0.012em; color: var(--ink-900); }
.diy3d-rule { display: block; width: 44px; height: 2px; border-radius: 2px; background: var(--accent-warm); margin-bottom: 14px; }
.diy3d-lines { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.diy3d-lines i { display: block; height: 6px; border-radius: 3px; background: var(--surface-tint); }
.diy3d-lines i:nth-child(1) { width: 100%; }
.diy3d-lines i:nth-child(2) { width: 86%; }
.diy3d-lines i:nth-child(3) { width: 94%; }

/* Signer rows tick off one at a time as the animation runs */
.diy3d-signrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  margin-bottom: 8px;
  border-radius: 10px;
  border: 1px solid var(--line-subtle);
  background: var(--surface-alt);
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.diy3d-avatar {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--grad-primary);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  flex-shrink: 0;
}
.diy3d-avatar.is-alt { background: linear-gradient(135deg, #f0552b, #f59e0b); }
.diy3d-signer { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.diy3d-signer b { font-size: 0.76rem; font-weight: 700; color: var(--ink-900); }
.diy3d-signer em {
  font-style: normal;
  font-size: 0.64rem;
  color: var(--ink-400);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.diy3d-tick {
  flex-shrink: 0;
  color: var(--emerald-500);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.diy3d-signrow.is-done {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.32);
}
.diy3d-signrow.is-done .diy3d-tick { opacity: 1; transform: scale(1); }
.diy3d-signrow.is-done .diy3d-signer em { opacity: 1; }

/* Signature pad — the stroke draws itself */
.diy3d-sign {
  position: relative;
  height: 58px;
  margin-top: 12px;
  border-radius: 10px;
  border: 1.5px dashed var(--line-strong);
  background: var(--surface);
  display: grid;
  place-items: center;
  transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease);
}
.diy3d-scribble {
  width: 132px;
  height: 40px;
  color: var(--ink-900);
  /* Path length is ~230; the dash pair hides it until the animation runs. */
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
}
.diy3d-sign.is-signing .diy3d-scribble { transition: stroke-dashoffset 1.15s ease-out; stroke-dashoffset: 0; }
.diy3d-sign.is-done .diy3d-scribble { stroke-dashoffset: 0; }
.diy3d-signhint {
  position: absolute;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-300);
  transition: opacity 0.3s var(--ease);
}
.diy3d-sign.is-signing .diy3d-signhint,
.diy3d-sign.is-done .diy3d-signhint { opacity: 0; }
.diy3d-sign.is-done {
  border-style: solid;
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.05);
}

.diy3d-stamp {
  position: absolute;
  right: 22px; bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 100px;
  background: var(--emerald-500);
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  box-shadow: 0 8px 20px -6px rgba(16, 185, 129, 0.6);
  opacity: 0;
  transform: scale(0.7) translateY(6px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.diy3d-stage.is-complete .diy3d-stamp { opacity: 1; transform: scale(1) translateY(0); }

/* Floating context chips, parked in front of the document plane */
.diy3d-float {
  position: absolute;
  padding: 7px 13px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line-medium);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ink-600);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.diy3d-float.f1 { top: 62px; right: -54px; transform: translate3d(0, 10px, 70px); }
.diy3d-float.f2 { bottom: 96px; left: -48px; transform: translate3d(0, 10px, 92px); }
.diy3d-stage.is-complete .diy3d-float.f1 { opacity: 1; transform: translate3d(0, 0, 70px); }
.diy3d-stage.is-complete .diy3d-float.f2 { opacity: 1; transform: translate3d(0, 0, 92px); }

/* ---- Country search ---- */
.diy-search-wrap {
  position: relative;
  max-width: 480px;
  margin: 0 auto 34px;
}
.diy-search-icon {
  position: absolute;
  left: 20px; top: 50%;
  transform: translateY(-50%);
  color: var(--ink-400);
  pointer-events: none;
}
.diy-search {
  width: 100%;
  padding: 15px 108px 15px 50px;
  border-radius: 100px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  font-family: inherit;
  font-size: 0.96rem;
  color: var(--ink-900);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.diy-search::placeholder { color: var(--ink-400); }
.diy-search:focus {
  outline: none;
  border-color: var(--indigo-500);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.14);
}
.diy-search-count {
  position: absolute;
  right: 18px; top: 50%;
  transform: translateY(-50%);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--ink-400);
  pointer-events: none;
}

/* ---- Country cards ---- */
.diy-country-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.diy-country-card {
  display: flex;
  flex-direction: column;
  padding: 26px 26px 22px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-medium);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.diy-country-card:hover {
  transform: translateY(-4px);
  border-color: var(--indigo-500);
  box-shadow: var(--shadow-md);
}
.diy-country-card[hidden] { display: none; }
.diy-country-top { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.diy-flag {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-alt);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--line-medium), var(--shadow-sm);
}
.diy-flag img { width: 100%; height: 100%; object-fit: cover; display: block; }
.diy-flag-fallback {
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--ink-500);
}
.diy-country-name { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 3px; }
.diy-country-law {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.03em;
  color: var(--ink-400);
}
.diy-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 6px 13px;
  margin-bottom: 14px;
  border-radius: 100px;
  background: rgba(16, 185, 129, 0.1);
  color: var(--emerald-600);
  font-size: 0.76rem;
  font-weight: 700;
}
.diy-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--emerald-500);
  flex-shrink: 0;
}
.diy-country-note {
  font-size: 0.88rem;
  line-height: 1.68;
  color: var(--ink-500);
  margin: 0 0 20px;
}
.diy-country-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line-subtle);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--indigo-600);
  transition: gap 0.25s var(--ease);
}
.diy-country-link:hover { gap: 13px; color: var(--indigo-700); }
.diy-empty { text-align: center; color: var(--ink-400); padding: 28px 0; }
.diy-note-line {
  max-width: 720px;
  margin: 30px auto 0;
  text-align: center;
  font-size: 0.84rem;
  line-height: 1.65;
  color: var(--ink-400);
}
.diy-note-line a { color: var(--indigo-600); font-weight: 600; }

/* ---- Document categories ---- */
.diy-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.diy-cat-card {
  display: flex;
  flex-direction: column;
  padding: 28px 28px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-medium);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.diy-cat-card:hover {
  transform: translateY(-4px);
  border-color: var(--indigo-500);
  box-shadow: var(--shadow-md);
}
.diy-cat-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line-subtle);
}
/* Tinted rather than gradient-filled: these cards are dense with document
   lists, so the icon marks the category without competing with them. */
.diy-cat-icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 13px;
  background: rgba(79, 70, 229, 0.1);
  color: var(--indigo-600);
  flex-shrink: 0;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.diy-cat-card:hover .diy-cat-icon {
  background: var(--indigo-600);
  color: #fff;
  transform: translateY(-2px);
}
.diy-cat-head h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.015em; margin: 2px 0 5px; }
.diy-cat-blurb { font-size: 0.84rem; line-height: 1.6; color: var(--ink-400); margin: 0; }
.diy-cat-count {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--ink-900);
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 700;
}
.diy-doc-list { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 9px; }
.diy-doc-list li {
  position: relative;
  padding-left: 20px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-700);
}
.diy-doc-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--indigo-500);
}
.diy-cat-notice {
  display: flex;
  gap: 9px;
  padding: 13px 15px;
  margin: 0 0 18px;
  border-radius: var(--radius-md);
  background: rgba(245, 158, 11, 0.09);
  border-left: 3px solid var(--amber-500);
  font-size: 0.81rem;
  line-height: 1.6;
  color: var(--ink-700);
}
.diy-cat-notice svg { flex-shrink: 0; color: var(--amber-600); margin-top: 2px; }
.diy-cat-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: auto;
  padding: 12px 20px;
  border-radius: 100px;
  background: var(--ink-900);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  transition: background-color 0.25s var(--ease), gap 0.25s var(--ease);
}
.diy-cat-cta:hover { background: var(--indigo-600); color: #fff; gap: 14px; }

/* ---- Steps ---- */
.diy-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  position: relative;
}
.diy-step {
  position: relative;
  padding: 28px 26px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-medium);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.diy-step.is-active {
  transform: translateY(-5px);
  border-color: var(--indigo-500);
  box-shadow: var(--shadow-md), 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.diy-step-n {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--surface-alt);
  color: var(--ink-400);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.76rem;
  font-weight: 700;
  margin-bottom: 16px;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.diy-step.is-active .diy-step-n { background: var(--grad-primary); color: #fff; }
.diy-step h3 { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 8px; }
.diy-step p { font-size: 0.88rem; line-height: 1.65; color: var(--ink-500); margin: 0; }

/* ---- Benefits ----
   Each card carries its own accent through --bn: the icon tile's gradient, the
   corner wash, the oversized icon watermark and the bar that wipes in on hover.
   Six distinct hues so the grid reads as six things, not one thing six times. */
.diy-benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.diy-benefit {
  --bn: var(--indigo-500);
  --bn-deep: var(--indigo-700);
  --bn-soft: rgba(99, 102, 241, 0.13);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 218px;
  padding: 30px 30px 28px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-medium);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.diy-benefit:nth-child(1) { --bn: var(--indigo-500);  --bn-deep: var(--indigo-700);  --bn-soft: rgba(99, 102, 241, 0.13); }
.diy-benefit:nth-child(2) { --bn: var(--violet-500);  --bn-deep: var(--purple-600);  --bn-soft: rgba(139, 92, 246, 0.13); }
.diy-benefit:nth-child(3) { --bn: var(--emerald-500); --bn-deep: var(--emerald-600); --bn-soft: rgba(16, 185, 129, 0.13); }
.diy-benefit:nth-child(4) { --bn: var(--amber-500);   --bn-deep: var(--amber-600);   --bn-soft: rgba(245, 158, 11, 0.15); }
.diy-benefit:nth-child(5) { --bn: var(--accent-warm); --bn-deep: #c8391a;            --bn-soft: rgba(240, 85, 43, 0.13); }
.diy-benefit:nth-child(6) { --bn: var(--rose-500);    --bn-deep: var(--rose-600);    --bn-soft: rgba(244, 63, 94, 0.13); }

/* Soft corner wash in the card's own colour */
.diy-benefit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 100% 0%, var(--bn-soft) 0%, transparent 60%);
  z-index: -1;
  pointer-events: none;
  transition: opacity 0.35s var(--ease);
}
/* Oversized icon bleeding off the bottom-right corner */
.diy-benefit-wm {
  position: absolute;
  right: -34px; bottom: -38px;
  color: var(--bn);
  opacity: 0.07;
  transform: rotate(-10deg);
  transform-origin: bottom right;
  z-index: -1;
  pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
}
.diy-benefit-icon {
  display: inline-grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--bn), var(--bn-deep));
  color: #fff;
  margin-bottom: 18px;
  box-shadow: 0 8px 20px -8px var(--bn);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.diy-benefit h3 {
  font-size: 1.04rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 9px;
}
.diy-benefit p {
  font-size: 0.89rem;
  line-height: 1.68;
  color: var(--ink-500);
  margin: 0;
}
/* Accent bar wiping along the bottom edge */
.diy-benefit-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--bn), var(--bn-deep));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.42s var(--ease);
}
.diy-benefit:hover {
  transform: translateY(-5px);
  border-color: var(--bn);
  box-shadow: var(--shadow-lg);
}
.diy-benefit:hover .diy-benefit-bar { transform: scaleX(1); }
.diy-benefit:hover .diy-benefit-wm { opacity: 0.13; transform: rotate(-4deg) scale(1.06); }
.diy-benefit:hover .diy-benefit-icon {
  transform: translateY(-2px) rotate(-4deg);
  box-shadow: 0 12px 26px -8px var(--bn);
}

/* ---- Rental use cases ---- */
.diy-usecase-section { position: relative; overflow: hidden; }
.diy-usecase-section > .container-xl-custom { position: relative; z-index: 2; }
.diy-usecase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.diy-usecase {
  position: relative;
  padding: 30px 28px 28px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-medium);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
/* Wash, border and arrow all track the indigo icon tile — a warm accent here
   read as unintentional against it. */
.diy-usecase::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(110% 80% at 100% 0%, rgba(99, 102, 241, 0.08) 0%, transparent 58%);
  pointer-events: none;
}
.diy-usecase:hover {
  transform: translateY(-5px);
  border-color: var(--indigo-500);
  box-shadow: var(--shadow-lg);
}
/* Brand-gradient tile, kept uniform across the six so this grid stays distinct
   from the multi-accent benefit cards further up the page. */
.diy-usecase-icon {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--grad-primary);
  color: #fff;
  margin-bottom: 17px;
  box-shadow: 0 8px 20px -8px rgba(79, 70, 229, 0.65);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.diy-usecase:hover .diy-usecase-icon {
  transform: translateY(-2px) rotate(-4deg);
  box-shadow: 0 12px 26px -8px rgba(79, 70, 229, 0.7);
}
.diy-usecase h3 { font-size: 1.06rem; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 9px; }
.diy-usecase p { font-size: 0.89rem; line-height: 1.68; color: var(--ink-500); margin: 0; }
.diy-usecase-arrow {
  position: absolute;
  top: 28px; right: 26px;
  color: var(--indigo-500);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.diy-usecase:hover .diy-usecase-arrow { opacity: 1; transform: translateX(0); }

/* ---- Explorer ---- */
.diy-explorer {
  max-width: 900px;
  margin: 0 auto;
  padding: 34px 36px 36px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line-medium);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.diy-explorer-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 26px;
}
.diy-field label {
  display: block;
  margin-bottom: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.diy-select-wrap { position: relative; }
.diy-select-wrap svg {
  position: absolute;
  right: 16px; top: 50%;
  transform: translateY(-50%);
  color: var(--ink-400);
  pointer-events: none;
}
.diy-select {
  width: 100%;
  padding: 14px 44px 14px 17px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-family: inherit;
  font-size: 0.94rem;
  color: var(--ink-900);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.diy-select:focus {
  outline: none;
  border-color: var(--indigo-500);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.14);
}

.diy-result {
  padding: 26px 28px;
  border-radius: var(--radius-lg);
  background: var(--surface-alt);
  border: 1px solid var(--line-subtle);
}
.diy-result[hidden] { display: none; }
.diy-result.is-empty {
  display: flex;
  align-items: center;
  gap: 15px;
  border-style: dashed;
  border-color: var(--line-medium);
  background: transparent;
}
.diy-result.is-empty p { font-size: 0.9rem; line-height: 1.6; color: var(--ink-400); margin: 0; }
.diy-result-icon {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--surface-alt);
  color: var(--ink-300);
  flex-shrink: 0;
}
.diy-result-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 26px;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line-medium);
}
.diy-result-field.is-wide { grid-column: 1 / -1; }
.diy-result-label {
  display: block;
  margin-bottom: 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.diy-result-value { display: flex; align-items: center; gap: 10px; }
.diy-result-value img { border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--line-medium); }
.diy-result-value strong { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.015em; color: var(--ink-900); }
.diy-result-status { font-size: 0.92rem; line-height: 1.65; color: var(--ink-700); margin: 0; }
.diy-result-pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: 100px;
  background: var(--grad-primary);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 700;
}
.diy-result-includes { margin-bottom: 20px; }
.diy-includes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}
.diy-includes-list li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-700);
}
.diy-includes-list svg { color: var(--emerald-500); flex-shrink: 0; }
.diy-result-extra {
  display: flex;
  gap: 9px;
  padding: 13px 16px;
  margin: 0 0 16px;
  border-radius: var(--radius-md);
  background: rgba(245, 158, 11, 0.09);
  border-left: 3px solid var(--amber-500);
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--ink-700);
}
.diy-result-extra[hidden] { display: none; }
.diy-result-extra svg { flex-shrink: 0; color: var(--amber-600); margin-top: 2px; }
.diy-result-disclaimer {
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--ink-400);
  margin: 0 0 20px;
}
.diy-result-cta { display: inline-flex; }

/* ---- Legal notice ----
   Needs real top padding: the explorer above is a tinted section-alt band, so
   zero puts this card flush against the tint. Bottom is 0 because the CTA
   section below supplies the gap between the two cards. */
.diy-notice-section { padding: 60px 0; }
.diy-notice {
  display: flex;
  gap: 22px;
  max-width: 900px;
  margin: 0 auto;
  padding: 34px 38px;
  border-radius: var(--radius-xl);
  background: var(--surface);
  border: 1px solid var(--line-medium);
  border-left: 4px solid var(--indigo-500);
  box-shadow: var(--shadow-sm);
}
.diy-notice-icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 13px;
  background: var(--grad-soft-indigo);
  color: var(--indigo-600);
  flex-shrink: 0;
}
.diy-notice h2 {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.diy-notice p {
  font-size: 0.92rem;
  line-height: 1.72;
  color: var(--ink-500);
  margin: 0 0 12px;
}
.diy-notice-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--indigo-600);
  transition: gap 0.25s var(--ease);
}
.diy-notice-link:hover { gap: 13px; color: var(--indigo-700); }

/* ---- Country band, above the footer ---- */
.ctry-band {
  position: relative;   /* ::before below is absolute against this */
  overflow: hidden;     /* keeps the texture inside the band */
  padding: 60px 0;
  background: linear-gradient(180deg, var(--surface-alt) 0%, var(--bg-main) 100%);
  border-top: 1px solid var(--line-subtle);
}
/* Dot texture, the same one the heroes use, faded out toward the footer. */
.ctry-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(79, 70, 229, 0.16) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
  pointer-events: none;
}
.ctry-band > .container-xl-custom { position: relative; z-index: 1; }
.ctry-band-inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: center;
  gap: 56px;
}
.ctry-band-copy .eyebrow-mono { display: block; margin-bottom: 14px; }
.ctry-band-copy h2 {
  font-size: clamp(1.3rem, 2.1vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.3;
  margin-bottom: 11px;
}
.ctry-band-copy p {
  font-size: 0.91rem;
  line-height: 1.68;
  color: var(--ink-500);
  margin: 0 0 18px;
}
.ctry-band-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.87rem;
  font-weight: 700;
  color: var(--indigo-600);
  transition: gap 0.25s var(--ease);
}
.ctry-band-link:hover { gap: 13px; color: var(--indigo-700); }

.ctry-band-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
/* Regime drives the accent, same three buckets the guide itself uses. */
.ctry-band-card {
  --band-accent: var(--ink-300);
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 32px 13px 15px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-medium);
  background: var(--surface);
  color: var(--ink-900);
  box-shadow: var(--shadow-xs);
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.ctry-band-card.is-open   { --band-accent: var(--emerald-500); }
.ctry-band-card.is-tiered { --band-accent: var(--amber-500); }
.ctry-band-card.is-strict { --band-accent: var(--rose-500); }
.ctry-band-card.is-all    { --band-accent: var(--indigo-500); border-style: dashed; }
.ctry-band-card:hover {
  transform: translateY(-3px);
  border-color: var(--band-accent);
  box-shadow: var(--shadow-md);
  color: var(--ink-900);
}
.ctry-band-flag {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-alt);
  color: var(--ink-400);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--line-medium);
}
.ctry-band-flag img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ctry-band-card.is-all .ctry-band-flag { color: var(--indigo-600); background: var(--grad-soft-indigo); }
.ctry-band-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.ctry-band-text strong {
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Small dot in the regime colour, so the three buckets read at a glance */
.ctry-band-regime {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-400);
  white-space: nowrap;
}
.ctry-band-regime::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--band-accent);
  flex-shrink: 0;
}
.ctry-band-regime.is-pending::before { background: transparent; border: 1.5px solid var(--ink-300); }
.ctry-band-arrow {
  position: absolute;
  right: 13px;
  top: 50%;
  margin-top: -7px;
  color: var(--band-accent);
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.ctry-band-card:hover .ctry-band-arrow { opacity: 1; transform: translateX(0); }
/* =========================================================
   AADHAAR eSIGN
   ========================================================= */

/* ---- Hero ---- */
.aad-hero { position: relative; overflow: hidden; }
.aad-hero-grid {
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  align-items: center;
  gap: 48px;
  text-align: left;
}
.aad-hero .subpage-hero-stats { justify-content: flex-start; }
.aad-hero-copy .eyebrow-mono { display: block; margin-bottom: 18px; }
.aad-hero-copy .lede { margin-bottom: 30px; }
.aad-hero-copy .hero-actions { margin-bottom: 34px; }

/* ---- Hero visual: the OTP card ---- */
.aad-hero-visual { position: relative; }
.aad3d {
  position: relative;
  perspective: 1400px;
  perspective-origin: 52% 44%;
  min-height: 500px;
  display: grid;
  place-items: center;
}
.aad3d-glow {
  position: absolute;
  width: 450px; height: 450px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.17) 0%, rgba(147, 51, 234, 0.1) 45%, transparent 70%);
  filter: blur(24px);
  pointer-events: none;
}
.aad3d-stage {
  position: relative;
  width: 320px;
  height: 400px;
  transform-style: preserve-3d;
  transform: rotateX(8deg) rotateY(-13deg);
  animation: aad3dFloat 11s ease-in-out infinite;
}
@keyframes aad3dFloat {
  0%, 100% { transform: rotateX(8deg) rotateY(-13deg) translateY(0); }
  50%      { transform: rotateX(6deg) rotateY(-16deg) translateY(-14px); }
}
.aad3d-grid {
  position: absolute;
  inset: -56px -74px -68px -64px;
  transform: translateZ(-80px);
  background-image:
    linear-gradient(rgba(79, 70, 229, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 70, 229, 0.18) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse 62% 62% at 50% 46%, #000 28%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 46%, #000 28%, transparent 78%);
  border-radius: 22px;
}
.aad3d-card {
  position: absolute;
  inset: 0;
  padding: 22px 24px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 34px 70px -26px rgba(29, 26, 58, 0.5);
}
.aad3d-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.aad3d-badge {
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--grad-primary);
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.aad3d-ca {
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.12);
  color: var(--emerald-600);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.aad3d-doc { display: block; font-size: 0.76rem; font-weight: 700; color: var(--ink-900); }
.aad3d-rule { display: block; width: 40px; height: 2px; border-radius: 2px; background: var(--indigo-500); margin: 9px 0 16px; }
.aad3d-prompt {
  display: block;
  font-size: 0.68rem;
  line-height: 1.5;
  color: var(--ink-400);
  margin-bottom: 12px;
}

/* OTP boxes — each fills in turn while the animation runs */
.aad3d-otp { display: flex; gap: 7px; margin-bottom: 10px; }
.aad3d-digit {
  flex: 1;
  height: 38px;
  border-radius: 8px;
  border: 1.5px solid var(--line-medium);
  background: var(--surface-alt);
  display: grid;
  place-items: center;
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--ink-900);
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.aad3d-digit.is-filled {
  border-color: var(--indigo-500);
  background: var(--surface);
}
.aad3d-digit.is-filled::after { content: attr(data-d); }
.aad3d-masked {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--ink-300);
  margin-bottom: 18px;
}
.aad3d-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px dashed var(--line-medium);
}
.aad3d-stamp {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 100px;
  background: rgba(16, 185, 129, 0.1);
  color: var(--emerald-600);
  font-size: 0.6rem;
  font-weight: 700;
}
.aad3d-cta {
  padding: 7px 15px;
  border-radius: 100px;
  background: var(--grad-primary);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  transition: opacity 0.3s var(--ease);
}
/* Completion badge, revealed once the OTP is in */
.aad3d-done {
  position: absolute;
  left: 24px; right: 24px; bottom: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 12px;
  border-radius: 100px;
  background: var(--emerald-500);
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 10px 24px -8px rgba(16, 185, 129, 0.7);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.aad3d-stage.is-signed .aad3d-done { opacity: 1; transform: translateY(0); }
.aad3d-stage.is-signed .aad3d-foot { opacity: 0; transition: opacity 0.3s var(--ease); }

.aad3d-float {
  position: absolute;
  padding: 7px 13px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line-medium);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ink-600);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.aad3d-float.f1 { top: 58px; right: -46px; transform: translate3d(0, 10px, 70px); }
.aad3d-float.f2 { bottom: 104px; left: -40px; transform: translate3d(0, 10px, 92px); }
.aad3d-stage.is-signed .aad3d-float.f1 { opacity: 1; transform: translate3d(0, 0, 70px); }
.aad3d-stage.is-signed .aad3d-float.f2 { opacity: 1; transform: translate3d(0, 0, 92px); }

/* ---- Signature types ---- */
.aad-type-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.aad-type-card {
  position: relative;
  padding: 32px 32px 30px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-medium);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.aad-type-card:hover {
  transform: translateY(-4px);
  border-color: var(--indigo-500);
  box-shadow: var(--shadow-md);
}
/* The Aadhaar route is the one this page is about, so it leads visually */
.aad-type-card.is-primary { border-color: var(--indigo-500); box-shadow: 0 0 0 1px var(--indigo-500), var(--shadow-md); }
.aad-type-tag {
  display: inline-block;
  padding: 5px 12px;
  margin-bottom: 15px;
  border-radius: 100px;
  background: var(--surface-alt);
  border: 1px solid var(--line-medium);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.aad-type-card.is-primary .aad-type-tag { background: var(--grad-primary); border-color: transparent; color: #fff; }
.aad-type-card h3 { font-size: 1.14rem; font-weight: 700; letter-spacing: -0.018em; margin-bottom: 10px; }
.aad-type-card > p { font-size: 0.91rem; line-height: 1.68; color: var(--ink-500); margin: 0 0 20px; }
.aad-type-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.aad-type-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.89rem;
  line-height: 1.55;
  color: var(--ink-700);
}
.aad-type-list svg { flex-shrink: 0; margin-top: 3px; color: var(--emerald-500); }
.aad-note {
  max-width: 760px;
  margin: 26px auto 0;
  text-align: center;
  font-size: 0.87rem;
  line-height: 1.65;
  color: var(--ink-400);
}

/* ---- Exclusions ---- */
.aad-excl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
  padding: 40px 44px;
  border-radius: var(--radius-xl);
  background: var(--ink-900);
  color: #fff;
}
.aad-excl-copy .eyebrow-mono { display: block; margin-bottom: 14px; color: var(--accent-warm); }
.aad-excl-copy h2 {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.28;
  color: #fff;
  margin-bottom: 12px;
}
.aad-excl-copy p {
  font-size: 0.91rem;
  line-height: 1.68;
  color: rgba(255, 255, 255, 0.62);
  margin: 0 0 18px;
}
.aad-excl-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.87rem;
  font-weight: 700;
  color: #fff;
  transition: gap 0.25s var(--ease);
}
.aad-excl-link:hover { gap: 13px; color: #fff; }
.aad-excl-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.aad-excl-list li {
  position: relative;
  padding-left: 26px;
  font-size: 0.91rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}
/* Struck-through dash rather than a tick — these are the ones we refuse */
.aad-excl-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 13px; height: 1.5px;
  border-radius: 2px;
  background: var(--accent-warm);
}

/* =========================================================
   PROPOSALS & SALES ROOMS
   ========================================================= */
.prop-hero { position: relative; overflow: hidden; }
.prop-hero-grid {
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  align-items: center;
  gap: 48px;
  text-align: left;
}
.prop-hero .subpage-hero-stats {
  justify-content: flex-start;
  gap: 26px;
}
.prop-hero .stat-mini { flex: 1 1 0; min-width: 132px; }
.prop-hero-copy .eyebrow-mono { display: block; margin-bottom: 18px; }
.prop-hero-copy .lede { margin-bottom: 30px; }
.prop-hero-copy .hero-actions { margin-bottom: 34px; }

/* ---- Hero visual: the sales room ---- */
.prop-hero-visual { position: relative; }
.prop3d {
  position: relative;
  perspective: 1400px;
  perspective-origin: 52% 44%;
  min-height: 500px;
  display: grid;
  place-items: center;
}
.prop3d-glow {
  position: absolute;
  width: 450px; height: 450px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.17) 0%, rgba(147, 51, 234, 0.1) 45%, transparent 70%);
  filter: blur(24px);
  pointer-events: none;
}
.prop3d-stage {
  position: relative;
  width: 324px;
  height: 396px;
  transform-style: preserve-3d;
  transform: rotateX(8deg) rotateY(-13deg);
  animation: prop3dFloat 11s ease-in-out infinite;
}
@keyframes prop3dFloat {
  0%, 100% { transform: rotateX(8deg) rotateY(-13deg) translateY(0); }
  50%      { transform: rotateX(6deg) rotateY(-16deg) translateY(-14px); }
}
.prop3d-grid {
  position: absolute;
  inset: -56px -74px -68px -64px;
  transform: translateZ(-80px);
  background-image:
    linear-gradient(rgba(79, 70, 229, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 70, 229, 0.18) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse 62% 62% at 50% 46%, #000 28%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 46%, #000 28%, transparent 78%);
  border-radius: 22px;
}
.prop3d-card {
  position: absolute;
  inset: 0;
  padding: 22px 24px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 34px 70px -26px rgba(29, 26, 58, 0.5);
}
.prop3d-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 11px; }
.prop3d-badge {
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--grad-primary);
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.prop3d-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--emerald-600);
}
.prop3d-live i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--emerald-500);
  animation: prop3dPulse 2s ease-in-out infinite;
}
@keyframes prop3dPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.prop3d-title { display: block; font-size: 0.79rem; font-weight: 700; color: var(--ink-900); }
.prop3d-rule { display: block; width: 40px; height: 2px; border-radius: 2px; background: var(--indigo-500); margin: 9px 0 16px; }
.prop3d-label {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: 11px;
}

/* Activity rows land one at a time while the animation runs */
.prop3d-feed { display: flex; flex-direction: column; gap: 9px; }
.prop3d-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line-subtle);
  background: var(--surface-alt);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), background-color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.prop3d-row.is-in { opacity: 1; transform: translateY(0); }
.prop3d-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--indigo-500);
  flex-shrink: 0;
  margin-top: 5px;
}
.prop3d-row-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.prop3d-row-text b { font-size: 0.72rem; font-weight: 700; color: var(--ink-900); }
.prop3d-row-text em { font-style: normal; font-size: 0.62rem; color: var(--ink-400); }

.prop3d-accepted {
  position: absolute;
  left: 24px; right: 24px; bottom: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 12px;
  border-radius: 100px;
  background: var(--emerald-500);
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 10px 24px -8px rgba(16, 185, 129, 0.7);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.prop3d-stage.is-accepted .prop3d-accepted { opacity: 1; transform: translateY(0); }

.prop3d-float {
  position: absolute;
  padding: 7px 13px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line-medium);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ink-600);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.prop3d-float.f1 { top: 56px; right: -46px; transform: translate3d(0, 10px, 70px); }
.prop3d-float.f2 { bottom: 108px; left: -40px; transform: translate3d(0, 10px, 92px); }
.prop3d-stage.is-accepted .prop3d-float.f1 { opacity: 1; transform: translate3d(0, 0, 70px); }
.prop3d-stage.is-accepted .prop3d-float.f2 { opacity: 1; transform: translate3d(0, 0, 92px); }

/* ---- Client-side feature list ---- */
.prop-feature-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.prop-feature {
  display: flex;
  gap: 16px;
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-medium);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  transition: transform 0.28s var(--ease), border-color 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
.prop-feature:hover {
  transform: translateY(-3px);
  border-color: var(--indigo-500);
  box-shadow: var(--shadow-md);
}
.prop-feature-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--grad-soft-indigo);
  color: var(--indigo-600);
}
.prop-feature h3 { font-size: 1rem; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 7px; }
.prop-feature p { font-size: 0.88rem; line-height: 1.65; color: var(--ink-500); margin: 0; }

/* =========================================================
   DSA — DIGITAL SIGNATURE ALGORITHM
   ========================================================= */

/* First use on the site, so it lives with the page that introduced it. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Symbols set in running prose (g^x mod p) need to read as notation rather
   than emphasis, so they get the mono face the equations use. */
.dsa-inline,
.why-diff-card p em,
.dsa-phase em,
.dsa-warn em,
.dsa-keyrow-meta em,
.dsa-seal p em,
.faq-answer-inner em {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-style: normal;
  font-size: 0.94em;
  color: var(--indigo-700);
}
.dsa-inline {
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--grad-soft-indigo);
}

/* ---- Hero ---- */
.dsa-hero { position: relative; overflow: hidden; }
.dsa-hero-grid {
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  align-items: center;
  gap: 48px;
  text-align: left;
}
.dsa-hero .subpage-hero-stats { justify-content: flex-start; }
.dsa-hero-copy .eyebrow-mono { display: block; margin-bottom: 18px; }
.dsa-hero-copy .lede { margin-bottom: 30px; }
.dsa-hero-copy .lede em { font-style: italic; color: var(--ink-700); }
.dsa-hero-copy .hero-actions { margin-bottom: 34px; }
.dsa-hero .stat-mini strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: -0.03em;
}

/* ---- Hero visual ----
   The key material as one solid object rather than a stack of cards: a cube
   whose four upright faces carry the numbers a signature is built from, turning
   over a receding floor so the volume is unmistakable. The readout in front
   is the output — digest, then r and s — and it fails visibly when the
   document is edited. */
.dsa-hero-visual { position: relative; }
.dsa3d {
  position: relative;
  perspective: 1250px;
  perspective-origin: 50% 40%;
  min-height: 540px;
  display: grid;
  place-items: center;
}
.dsa3d-glow {
  position: absolute;
  width: 470px; height: 470px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, rgba(147, 51, 234, 0.11) 45%, transparent 70%);
  filter: blur(26px);
  pointer-events: none;
}
.dsa3d-scene {
  position: relative;
  width: 320px;
  height: 440px;
  transform-style: preserve-3d;
  /* Tips the top toward the viewer, which is what puts us above the floor
     plane and lets the cube's cap read. */
  transform: rotateX(-10deg);
}

/* The ground. rotateX(90deg) lays it flat; the scene tilt above is what makes
   it visible rather than edge-on. */
.dsa3d-floor {
  position: absolute;
  left: 50%; top: 250px;
  width: 620px; height: 620px;
  margin-left: -310px; margin-top: -310px;
  transform: rotateX(90deg);
  background-image:
    linear-gradient(rgba(79, 70, 229, 0.24) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 70, 229, 0.24) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at 50% 50%, #000 4%, transparent 58%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 4%, transparent 58%);
  pointer-events: none;
}
.dsa3d-shadow {
  position: absolute;
  left: 50%; top: 252px;
  width: 260px; height: 260px;
  margin-left: -130px; margin-top: -130px;
  transform: rotateX(90deg);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(29, 26, 58, 0.4) 0%, transparent 62%);
  filter: blur(10px);
  pointer-events: none;
}

/* A slow orbit line, purely to describe the space the cube sits in. */
.dsa3d-ring {
  position: absolute;
  left: 50%; top: 148px;
  width: 314px; height: 314px;
  margin-left: -157px; margin-top: -157px;
  border-radius: 50%;
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-top-color: rgba(147, 51, 234, 0.55);
  transform: rotateX(76deg);
  animation: dsa3dRing 22s linear infinite;
  pointer-events: none;
}
@keyframes dsa3dRing {
  from { transform: rotateX(76deg) rotateZ(0deg); }
  to   { transform: rotateX(76deg) rotateZ(360deg); }
}

/* ---- The cube ---- */
.dsa3d-cube {
  position: absolute;
  left: 50%; top: 148px;
  width: 190px; height: 190px;
  margin-left: -95px; margin-top: -95px;
  transform-style: preserve-3d;
  animation: dsa3dSpin 26s linear infinite;
}
@keyframes dsa3dSpin {
  from { transform: rotateX(-14deg) rotateY(0deg); }
  to   { transform: rotateX(-14deg) rotateY(360deg); }
}
.dsa3d-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 17px 18px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(ellipse 80% 60% at 22% 12%, rgba(99, 102, 241, 0.24) 0%, transparent 62%),
    linear-gradient(152deg, var(--ink-900) 0%, var(--ink-850) 58%, var(--ink-800) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: border-color 0.4s var(--ease);
}
.f-front  { transform: translateZ(95px); }
.f-back   { transform: rotateY(180deg) translateZ(95px); }
.f-right  { transform: rotateY(90deg) translateZ(95px); }
.f-left   { transform: rotateY(-90deg) translateZ(95px); }
.f-top    { transform: rotateX(90deg) translateZ(95px); }
.f-bottom { transform: rotateX(-90deg) translateZ(95px); }

.dsa3d-fsym {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 3.1rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  color: #c4b5fd;
  text-shadow: 0 0 26px rgba(139, 92, 246, 0.6);
}
.dsa3d-fmeta { display: flex; flex-direction: column; gap: 3px; }
.dsa3d-fmeta b {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.9);
}
.dsa3d-fmeta i {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-style: normal;
  font-size: 0.58rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
/* The one face that is not publishable, marked the way the tiles below are. */
.dsa3d-face.is-secret {
  border-color: rgba(244, 63, 94, 0.42);
  background:
    radial-gradient(ellipse 80% 60% at 22% 12%, rgba(244, 63, 94, 0.26) 0%, transparent 62%),
    linear-gradient(152deg, var(--ink-900) 0%, var(--ink-850) 58%, var(--ink-800) 100%);
}
.dsa3d-face.is-secret .dsa3d-fsym {
  color: #fda4af;
  text-shadow: 0 0 26px rgba(244, 63, 94, 0.6);
}
.f-top {
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(152deg, var(--ink-850) 0%, var(--ink-800) 100%);
}
.f-bottom { background: linear-gradient(152deg, var(--ink-950) 0%, var(--ink-900) 100%); }
.dsa3d-emblem {
  width: 96px; height: 96px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.5) 0 2px, transparent 2px),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 11px, rgba(255, 255, 255, 0.11) 11px 12px);
}

/* A ring of light leaving the cube at the moment it signs. */
.dsa3d-pulse {
  position: absolute;
  left: 50%; top: 148px;
  width: 200px; height: 200px;
  margin-left: -100px; margin-top: -100px;
  border-radius: 50%;
  border: 2px solid rgba(139, 92, 246, 0.75);
  transform: rotateX(76deg) scale(0.4);
  opacity: 0;
  pointer-events: none;
}
.dsa3d-scene.is-signed .dsa3d-pulse { animation: dsa3dPulse 1.1s var(--ease) forwards; }
@keyframes dsa3dPulse {
  0%   { opacity: 0.9; transform: rotateX(76deg) scale(0.4); }
  100% { opacity: 0;   transform: rotateX(76deg) scale(1.75); }
}

/* ---- The output, held in front of the scene ---- */
.dsa3d-readout {
  position: absolute;
  left: 50%; top: 292px;
  width: 286px;
  margin-left: -143px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 14px 16px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(155deg, rgba(13, 12, 29, 0.96) 0%, rgba(29, 26, 58, 0.93) 100%);
  box-shadow: 0 26px 54px -24px rgba(13, 12, 29, 0.7);
  transform: translateZ(130px);
}
.dsa3d-rline {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.62rem;
  line-height: 1.5;
}
.dsa3d-rline i {
  flex-shrink: 0;
  width: 34px;
  font-style: italic;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.42);
}
.dsa3d-rline b {
  min-width: 0;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  word-break: break-all;
}
/* The digest is the value that moves when the document does, so it carries
   the colour change rather than the whole panel. */
.dsa3d-rline:first-child b { color: #a5b4fc; }
.dsa3d-scene.is-edited .dsa3d-rline:first-child b { color: #fda4af; }
.dsa3d-scene.is-edited .dsa3d-face { border-color: rgba(244, 63, 94, 0.4); }

.dsa3d-verdict {
  position: absolute;
  left: 50%; bottom: 4px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border-radius: 100px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.55);
  background: var(--ink-800);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transform: translate3d(-50%, 0, 160px);
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.dsa3d-verdict svg { flex-shrink: 0; }
.dsa3d-ok, .dsa3d-no { display: none; }
.dsa3d-scene.is-valid .dsa3d-verdict {
  color: #fff;
  background: var(--emerald-600);
  border-color: transparent;
  box-shadow: 0 12px 26px -10px rgba(5, 150, 105, 0.8);
}
.dsa3d-scene.is-valid .dsa3d-ok { display: block; }
.dsa3d-scene.is-invalid .dsa3d-verdict {
  color: #fff;
  background: var(--rose-600);
  border-color: transparent;
  box-shadow: 0 12px 26px -10px rgba(225, 29, 72, 0.8);
}
.dsa3d-scene.is-invalid .dsa3d-no { display: block; }

/* ---- Phase cards ---- */
.dsa-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.dsa-phase {
  display: flex;
  flex-direction: column;
  padding: 26px 26px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-medium);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.dsa-phase:hover {
  transform: translateY(-5px);
  border-color: var(--indigo-500);
  box-shadow: var(--shadow-lg);
}
.dsa-phase-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.dsa-phase-n {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--indigo-600);
}
.dsa-phase-who {
  padding: 3px 9px;
  border-radius: 100px;
  background: var(--surface-alt);
  border: 1px solid var(--line-subtle);
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--ink-500);
  white-space: nowrap;
}
.dsa-phase h3 {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  margin-bottom: 9px;
}
.dsa-phase > p {
  font-size: 0.89rem;
  line-height: 1.68;
  color: var(--ink-500);
  margin: 0 0 16px;
}
/* The equations sit on the dark ground so they read as machine output rather
   than more prose. */
.dsa-eq {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding: 16px 16px 15px;
  border-radius: var(--radius-md);
  background: linear-gradient(150deg, var(--ink-900) 0%, var(--ink-850) 100%);
  overflow-x: auto;
}
.dsa-eq-row {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.74rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
}
.dsa-eq-row em {
  font-style: italic;
  color: #c4b5fd;
  font-family: inherit;
  font-size: inherit;
}
.dsa-eq-row.is-result {
  margin-top: 2px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #6ee7b7;
}
.dsa-eq-row.is-result em { color: #6ee7b7; }
.dsa-phase-note {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--ink-400);
  margin: 13px 0 0;
}
.dsa-phase.is-accent { border-color: rgba(79, 70, 229, 0.35); }
.dsa-phase.is-accent .dsa-phase-who {
  background: var(--grad-soft-indigo);
  border-color: rgba(79, 70, 229, 0.2);
  color: var(--indigo-700);
}

/* ---- The six numbers ----
   Six identical tiles said nothing about which are public and which are not,
   which is the whole point of the section above them. So the composition
   carries it instead: the published four on an open light panel, the two that
   never leave on a sealed dark one beside it. */
.dsa-keys {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 22px;
  align-items: start;
}

.dsa-keys-head { margin-bottom: 18px; }
.dsa-keys-tag {
  display: inline-block;
  margin-bottom: 11px;
  padding: 4px 12px;
  border-radius: 100px;
  background: var(--grad-soft-indigo);
  border: 1px solid rgba(79, 70, 229, 0.22);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--indigo-600);
}
.dsa-keys-tag.is-dark {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.72);
}
.dsa-keys-head p {
  font-size: 0.87rem;
  line-height: 1.68;
  color: var(--ink-500);
  margin: 0;
  max-width: 60ch;
}

/* ---- The published four ---- */
.dsa-keys-open {
  padding: 28px 30px 22px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-medium);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.dsa-keyrows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dsa-keyrow {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: start;
  gap: 18px;
  padding: 18px 14px 18px 0;
  border-top: 1px solid var(--line-subtle);
  border-radius: 10px;
  transition: background-color 0.28s var(--ease);
}
.dsa-keyrow:hover { background: rgba(79, 70, 229, 0.038); }
/* A hairline rail behind the glyphs: the four are one chain, not four
   unrelated facts — g is built from p and q, y from g and x. */
.dsa-keyrows::before {
  content: "";
  position: absolute;
  left: 26px;
  width: 1px;
  margin-top: 40px;
  height: calc(100% - 80px);
  background: linear-gradient(180deg, rgba(79, 70, 229, 0.32), rgba(79, 70, 229, 0.08));
}
.dsa-keyrows { position: relative; }
.dsa-keyrow-sym {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  background: var(--surface);
  border: 1px solid rgba(79, 70, 229, 0.24);
  color: var(--indigo-600);
  box-shadow: 0 0 0 4px var(--surface);
  transition: background 0.28s var(--ease), color 0.28s var(--ease), border-color 0.28s var(--ease);
}
.dsa-keyrow:hover .dsa-keyrow-sym {
  background: var(--grad-primary);
  border-color: transparent;
  color: #fff;
}
.dsa-keyrow-body { min-width: 0; }
.dsa-keyrow h3 {
  font-size: 0.99rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 3px 0 6px;
}
.dsa-keyrow p {
  font-size: 0.865rem;
  line-height: 1.66;
  color: var(--ink-500);
  margin: 0;
  /* Short paragraphs in a narrow column strand their last word easily; pretty
     costs nothing where it is unsupported, which is the same bargain the
     heading balance rule makes. */
  text-wrap: pretty;
}
.dsa-keyrow-meta {
  align-self: center;
  padding: 5px 11px;
  border-radius: 8px;
  background: var(--surface-alt);
  border: 1px solid var(--line-subtle);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  white-space: nowrap;
  color: var(--ink-500);
}
.dsa-keyrow-meta em {
  font-style: italic;
  font-family: inherit;
  font-size: inherit;
  color: var(--indigo-700);
}

/* ---- The two that never leave ---- */
.dsa-keys-sealed {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 26px 26px;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--ink-950) 0%, var(--ink-850) 60%, var(--ink-800) 100%);
  box-shadow: var(--shadow-lg);
}
.dsa-keys-tex {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 80% 62% at 82% 4%, #000 8%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 80% 62% at 82% 4%, #000 8%, transparent 72%);
  pointer-events: none;
}
.dsa-keys-sealed > * { position: relative; z-index: 1; }
.dsa-keys-sealed .dsa-keys-head p { color: rgba(255, 255, 255, 0.6); }

.dsa-seal {
  padding: 18px 18px 17px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.035);
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.dsa-seal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.dsa-seal-sym {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.4rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
}
.dsa-seal-life {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: right;
  color: rgba(255, 255, 255, 0.45);
}
.dsa-seal h3 {
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #fff;
  margin-bottom: 7px;
}
.dsa-seal p {
  font-size: 0.845rem;
  line-height: 1.66;
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
  text-wrap: pretty;
}
.dsa-seal p em { color: #fff; }
/* Rose for the key that must never move, amber for the one that must never
   repeat — the same coding the FAQ and the nonce section below rely on. */
.dsa-seal.is-secret { border-color: rgba(244, 63, 94, 0.34); }
.dsa-seal.is-secret .dsa-seal-sym {
  background: rgba(244, 63, 94, 0.14);
  color: #fda4af;
  box-shadow: inset 0 0 0 1px rgba(244, 63, 94, 0.3);
}
.dsa-seal.is-secret:hover { border-color: rgba(244, 63, 94, 0.6); background: rgba(244, 63, 94, 0.07); }
.dsa-seal.is-burn { border-color: rgba(245, 158, 11, 0.34); }
.dsa-seal.is-burn .dsa-seal-sym {
  background: rgba(245, 158, 11, 0.14);
  color: #fcd34d;
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.3);
}
.dsa-seal.is-burn:hover { border-color: rgba(245, 158, 11, 0.6); background: rgba(245, 158, 11, 0.07); }

/* ---- Comparison table ---- */
.dsa-table-wrap {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-medium);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}
.dsa-table {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
  text-align: left;
}
.dsa-table th, .dsa-table td {
  padding: 15px 20px;
  vertical-align: middle;
}
.dsa-table thead th {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line-medium);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
  white-space: nowrap;
}
.dsa-table tbody tr { border-bottom: 1px solid var(--line-subtle); }
.dsa-table tbody tr:last-child { border-bottom: 0; }
.dsa-table tbody td {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-500);
}
.dsa-table tbody th { font-weight: 700; }
.dsa-algo {
  display: block;
  font-size: 0.95rem;
  letter-spacing: -0.015em;
  color: var(--ink-900);
}
.dsa-algo-sub {
  display: block;
  margin-top: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.66rem;
  font-weight: 500;
  color: var(--ink-400);
}
/* The row the page is about, marked so it is findable at a glance. */
.dsa-table tbody tr.is-subject { background: var(--grad-soft-indigo); }
.dsa-status {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 100px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dsa-status.is-ok {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: var(--emerald-600);
}
.dsa-status.is-warn {
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.32);
  color: var(--amber-600);
}
.dsa-table-note {
  max-width: 680px;
  margin: 18px auto 0;
  text-align: center;
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--ink-400);
}

/* ---- Status panel ---- */
.dsa-status-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background: linear-gradient(160deg, var(--ink-950) 0%, var(--ink-850) 58%, var(--ink-800) 100%);
  padding: 46px 46px 40px;
  box-shadow: var(--shadow-lg);
  margin-bottom: 22px;
}
.dsa-status-inner { position: relative; z-index: 2; max-width: 780px; }

/* ---- Status panel visual ----
   The section is about one standard replacing another, which is a two-sided
   fact, so the decoration is a two-sided object: a card turning in space with
   the withdrawn revision on one face and the one in force on the other. It
   only appears where there is genuinely room beside the 780px text column. */
.dsa-status-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
}
.dsa-status-3d {
  position: relative;
  justify-self: end;
  width: 252px;
  height: 250px;
  perspective: 900px;
  perspective-origin: 50% 44%;
  display: grid;
  place-items: center;
}
.dsa-status-halo {
  position: absolute;
  width: 250px; height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, rgba(147, 51, 234, 0.14) 45%, transparent 70%);
  filter: blur(22px);
  pointer-events: none;
}
.dsa-flip-shadow {
  position: absolute;
  left: 50%; bottom: 40px;
  width: 182px; height: 24px;
  margin-left: -91px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.6) 0%, transparent 70%);
  filter: blur(9px);
  pointer-events: none;
}

.dsa-flip {
  position: relative;
  width: 210px;
  height: 134px;
  transform-style: preserve-3d;
  animation: dsaFlip 14s cubic-bezier(0.65, 0, 0.3, 1) infinite;
}
/* Holds on each face, then turns. The base -14deg yaw is kept through the
   whole cycle so the card never sits perfectly flat to the viewer. */
@keyframes dsaFlip {
  0%, 40%  { transform: rotateX(8deg) rotateY(-14deg) translateY(0); }
  50%, 90% { transform: rotateX(8deg) rotateY(166deg) translateY(-7px); }
  100%     { transform: rotateX(8deg) rotateY(346deg) translateY(0); }
}
.dsa-flip-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 15px 17px 14px;
  border-radius: 16px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 30px 58px -24px rgba(0, 0, 0, 0.75);
}
.dsa-flip-face.is-new { transform: rotateY(180deg); }

.dsa-flip-badge {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 100px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dsa-flip-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.42rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.dsa-flip-foot {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Retired: struck through, and deliberately the duller of the two. */
.dsa-flip-face.is-old {
  border: 1px solid rgba(245, 158, 11, 0.32);
  background: linear-gradient(150deg, #171531 0%, #1b1836 60%, #221d3f 100%);
}
.dsa-flip-face.is-old .dsa-flip-badge {
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.34);
  color: #fcd34d;
}
.dsa-flip-face.is-old .dsa-flip-name {
  color: rgba(255, 255, 255, 0.44);
  text-decoration: line-through;
  text-decoration-color: rgba(245, 158, 11, 0.75);
  text-decoration-thickness: 2px;
}
.dsa-flip-face.is-old .dsa-flip-foot { color: rgba(255, 255, 255, 0.36); }

/* In force: brighter, and the only one of the two that glows. */
.dsa-flip-face.is-new {
  border: 1px solid rgba(99, 102, 241, 0.5);
  background: linear-gradient(150deg, #221f4d 0%, #2b2560 58%, #35297a 100%);
}
.dsa-flip-face.is-new .dsa-flip-badge {
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #6ee7b7;
}
.dsa-flip-face.is-new .dsa-flip-name {
  color: #fff;
  text-shadow: 0 0 22px rgba(139, 92, 246, 0.7);
}
.dsa-flip-face.is-new .dsa-flip-foot { color: rgba(255, 255, 255, 0.55); }
.dsa-status-inner .eyebrow-mono { display: block; margin-bottom: 16px; color: rgba(255, 255, 255, 0.5); }
.dsa-status-inner h2 {
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.28;
  color: #fff;
  margin-bottom: 16px;
}
.dsa-status-inner p {
  font-size: 0.94rem;
  line-height: 1.75;
  color: #cbd5e1;
  margin: 0 0 14px;
}
.dsa-status-inner p em {
  font-style: italic;
  color: #fff;
}
.dsa-status-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.dsa-fact { display: flex; flex-direction: column; gap: 4px; }
.dsa-fact strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
}
.dsa-fact span {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
}

/* ---- What replaced it ---- */
.dsa-next-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.dsa-next {
  display: flex;
  flex-direction: column;
  padding: 28px 30px 26px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-medium);
  background: var(--surface);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.dsa-next:hover {
  transform: translateY(-4px);
  border-color: var(--indigo-500);
  box-shadow: var(--shadow-md);
}
.dsa-next-badge {
  align-self: flex-start;
  padding: 4px 11px;
  margin-bottom: 13px;
  border-radius: 100px;
  background: var(--grad-soft-indigo);
  border: 1px solid rgba(79, 70, 229, 0.2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--indigo-600);
}
.dsa-next h3 {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.dsa-next p {
  font-size: 0.89rem;
  line-height: 1.68;
  color: var(--ink-500);
  margin: 0 0 14px;
}
.dsa-next-note {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--line-medium);
  font-size: 0.82rem;
  line-height: 1.62;
  color: var(--ink-400);
}

/* ---- The nonce warning ---- */
.dsa-warn {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 26px;
  padding: 38px 40px 34px;
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(79, 70, 229, 0.26);
  background: linear-gradient(140deg, rgba(79, 70, 229, 0.06) 0%, var(--surface) 55%);
  box-shadow: var(--shadow-sm);
}
.dsa-warn-mark {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--grad-soft-indigo);
  border: 1px solid rgba(79, 70, 229, 0.24);
  color: var(--indigo-600);
}
.dsa-warn-copy { min-width: 0; }
.dsa-warn-copy .eyebrow-mono { display: block; margin-bottom: 14px; color: var(--indigo-600); }
.dsa-warn-copy h2 {
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.32;
  margin-bottom: 15px;
}
.dsa-warn-copy p {
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--ink-500);
  margin: 0 0 13px;
  max-width: 760px;
}
.dsa-warn-copy strong { color: var(--ink-900); font-weight: 700; }
.dsa-warn-take {
  display: block;
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  border-left: 3px solid var(--indigo-500);
  background: rgba(79, 70, 229, 0.06);
  font-size: 0.89rem;
  line-height: 1.6;
  font-weight: 600;
  color: var(--ink-700);
}

/* ---- Where it sits in the product ---- */
.dsa-link-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.dsa-link,
.est-link {
  display: flex;
  flex-direction: column;
  padding: 26px 28px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-medium);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.dsa-link:hover,
.est-link:hover {
  transform: translateY(-5px);
  border-color: var(--indigo-500);
  box-shadow: var(--shadow-lg);
}
.dsa-link-icon,
.est-link-icon {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  margin-bottom: 15px;
  border-radius: 12px;
  background: var(--grad-soft-indigo);
  color: var(--indigo-600);
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.dsa-link:hover .dsa-link-icon,
.est-link:hover .est-link-icon { background: var(--grad-primary); color: #fff; }
.dsa-link h3,
.est-link h3 {
  font-size: 1.03rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  margin-bottom: 9px;
}
.dsa-link p,
.est-link p {
  font-size: 0.88rem;
  line-height: 1.68;
  color: var(--ink-500);
  margin: 0 0 16px;
}
.dsa-link-go,
.est-link-go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--indigo-600);
}
.dsa-link-go svg,
.est-link-go svg { transition: transform 0.3s var(--ease); }
.dsa-link:hover .dsa-link-go svg,
.est-link:hover .est-link-go svg { transform: translateX(4px); }
/* The stat figures are set in mono here (they are notation, not prose), which
   runs much wider than the serif this row was sized for — so the three would
   wrap onto two lines at the hero's column width. Smaller, left-aligned and
   tighter keeps them on one. */
.dsa-hero .subpage-hero-stats { gap: 30px; }
.dsa-hero .subpage-hero-stats .stat-mini { text-align: left; }
.dsa-hero .subpage-hero-stats .stat-mini strong { font-size: 1.36rem; }
.dsa-hero .subpage-hero-stats .stat-mini span { font-size: 0.79rem; }

/* =========================================================
   e-STAMPING
   ========================================================= */

/* ---- Hero ---- */
.est-hero { position: relative; overflow: hidden; }
.est-hero-grid {
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  align-items: center;
  gap: 48px;
  text-align: left;
}
.est-hero .subpage-hero-stats { justify-content: flex-start; gap: 30px; }
.est-hero .subpage-hero-stats .stat-mini { text-align: left; }
.est-hero .subpage-hero-stats .stat-mini strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.36rem;
  letter-spacing: -0.03em;
}
.est-hero .subpage-hero-stats .stat-mini span { font-size: 0.79rem; }
.est-hero-copy .eyebrow-mono { display: block; margin-bottom: 18px; }
.est-hero-copy .lede { margin-bottom: 30px; }
.est-hero-copy .hero-actions { margin-bottom: 34px; }

/* ---- Hero visual ----
   The page argues that the stamp comes first, so the visual is the act of
   stamping: a press descending onto the agreement lying on the desk, leaving
   an impression with the certificate number. Each pass stamps for a different
   state, because the schedule that applies is the state's, not ours. */
.est-hero-visual { position: relative; }
.est3d {
  position: relative;
  perspective: 1150px;
  perspective-origin: 50% 38%;
  min-height: 520px;
  display: grid;
  place-items: center;
}
.est3d-glow {
  position: absolute;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, rgba(147, 51, 234, 0.11) 45%, transparent 70%);
  filter: blur(26px);
  pointer-events: none;
}
/* Tipped back so we look down at the desk; the press then travels along the
   document's own normal, which reads as coming straight down onto it. */
.est3d-scene {
  position: relative;
  width: 250px;
  height: 300px;
  transform-style: preserve-3d;
  transform: rotateX(54deg) rotateZ(-18deg);
  animation: est3dSettle 14s ease-in-out infinite;
}
@keyframes est3dSettle {
  0%, 100% { transform: rotateX(54deg) rotateZ(-18deg); }
  50%      { transform: rotateX(51deg) rotateZ(-21deg); }
}
.est3d-desk {
  position: absolute;
  inset: -80px -110px -90px -100px;
  transform: translateZ(-14px);
  border-radius: 22px;
  background-image:
    linear-gradient(rgba(79, 70, 229, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 70, 229, 0.2) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(ellipse 62% 62% at 50% 48%, #000 22%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 48%, #000 22%, transparent 78%);
  pointer-events: none;
}

/* ---- The document on the desk ---- */
.est-doc {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  padding: 22px 24px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(158deg, var(--ink-900) 0%, var(--ink-850) 58%, var(--ink-800) 100%);
  box-shadow: 0 34px 60px -26px rgba(13, 12, 29, 0.75);
}
.est-doc-tag {
  display: block;
  margin-bottom: 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}
.est-doc-line {
  display: block;
  height: 5px;
  margin-bottom: 9px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.14);
}
.est-doc-line.w1 { width: 92%; }
.est-doc-line.w2 { width: 76%; }
.est-doc-line.w3 { width: 86%; }
.est-doc-line.w4 { width: 58%; }

/* Where the press lands: a faint target until it is filled. */
.est-doc-target,
.est-doc-shock,
.est-doc-seal {
  position: absolute;
  left: 50%; bottom: 52px;
  width: 108px; height: 108px;
  margin-left: -54px;
  border-radius: 50%;
}
.est-doc-target {
  border: 1px dashed rgba(255, 255, 255, 0.2);
  transition: opacity 0.4s var(--ease);
}
/* The ring that leaves the point of contact. */
.est-doc-shock {
  border: 2px solid rgba(139, 92, 246, 0.7);
  opacity: 0;
  pointer-events: none;
}
.est3d-scene.is-stamped .est-doc-shock { animation: estShock 0.85s var(--ease) forwards; }
@keyframes estShock {
  0%   { opacity: 0.95; transform: scale(0.5); }
  100% { opacity: 0;    transform: scale(2.1); }
}

/* The impression itself. */
.est-doc-seal {
  display: grid;
  place-content: center;
  gap: 3px;
  text-align: center;
  border: 2px solid rgba(167, 139, 250, 0.85);
  background: radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.3) 0%, rgba(79, 70, 229, 0.1) 70%);
  box-shadow: 0 0 26px rgba(124, 58, 237, 0.5), inset 0 0 18px rgba(139, 92, 246, 0.35);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
.est3d-scene.is-stamped .est-doc-target { opacity: 0; }
.est3d-scene.is-stamped .est-doc-seal { opacity: 1; transform: scale(1); }
.est-seal-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
}
.est-seal-word {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.5rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

/* ---- The press ----
   Stacked discs rather than a modelled cylinder: at this camera they read as
   one turned object, and they cost four elements instead of twenty. */
.est-press {
  position: absolute;
  left: 50%; bottom: 52px;
  width: 108px; height: 108px;
  margin-left: -54px;
  transform-style: preserve-3d;
  transform: translateZ(126px);
  transition: transform 0.42s cubic-bezier(0.5, 0, 0.35, 1);
}
.est3d-scene.is-down .est-press { transform: translateZ(8px); }
.est-press-face,
.est-press-body,
.est-press-shaft,
.est-press-handle {
  position: absolute;
  left: 50%; top: 50%;
  border-radius: 50%;
  transform-style: preserve-3d;
}
.est-press-face {
  width: 104px; height: 104px;
  margin: -52px 0 0 -52px;
  transform: translateZ(0);
  background: radial-gradient(circle at 38% 32%, #6d28d9 0%, #4c1d95 55%, #2e1065 100%);
  border: 1px solid rgba(167, 139, 250, 0.5);
  box-shadow: 0 0 22px rgba(124, 58, 237, 0.45);
}
.est-press-body {
  width: 116px; height: 116px;
  margin: -58px 0 0 -58px;
  transform: translateZ(20px);
  background: linear-gradient(150deg, var(--ink-700) 0%, var(--ink-850) 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 22px 40px -20px rgba(13, 12, 29, 0.8);
}
.est-press-shaft {
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  transform: translateZ(52px);
  background: linear-gradient(150deg, var(--ink-600) 0%, var(--ink-800) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.est-press-handle {
  width: 88px; height: 34px;
  margin: -17px 0 0 -44px;
  border-radius: 18px;
  transform: translateZ(78px);
  background: linear-gradient(150deg, var(--ink-700) 0%, var(--ink-900) 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 16px 30px -14px rgba(13, 12, 29, 0.8);
}

/* ---- Flat overlays, outside the tilt so they stay legible ---- */
.est3d-chip {
  position: absolute;
  left: 50%; top: 24px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 9px 18px;
  border-radius: 14px;
  background: linear-gradient(155deg, rgba(13, 12, 29, 0.96), rgba(29, 26, 58, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 22px 44px -20px rgba(13, 12, 29, 0.75);
  text-align: center;
  white-space: nowrap;
}
.est3d-chip-name {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #fff;
}
.est3d-chip-sub {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.est3d-cert {
  position: absolute;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 100px;
  background: var(--emerald-600);
  color: #fff;
  box-shadow: 0 14px 30px -12px rgba(5, 150, 105, 0.75);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.est3d.is-issued .est3d-cert { opacity: 1; }
.est3d-cert-ico { display: grid; place-items: center; }
.est3d-cert-txt {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- State table ---- */
.est-table-wrap {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-medium);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}
.est-table {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  text-align: left;
}
.est-table th, .est-table td { padding: 15px 22px; vertical-align: middle; }
.est-table thead th {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line-medium);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
  white-space: nowrap;
}
.est-table tbody tr { border-bottom: 1px solid var(--line-subtle); }
.est-table tbody tr:last-child { border-bottom: 0; }
.est-table tbody tr:hover { background: rgba(79, 70, 229, 0.032); }
.est-table tbody td { font-size: 0.875rem; line-height: 1.6; color: var(--ink-500); }
.est-state {
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink-900);
}
.est-table tbody tr.is-more { background: var(--grad-soft-indigo); }
.est-table tbody tr.is-more .est-state { color: var(--indigo-700); }
.est-status {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 100px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.est-status.is-ok {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: var(--emerald-600);
}
.est-status.is-soon {
  background: rgba(79, 70, 229, 0.1);
  border: 1px solid rgba(79, 70, 229, 0.26);
  color: var(--indigo-600);
}
.est-table-note {
  max-width: 760px;
  margin: 18px auto 0;
  text-align: center;
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--ink-400);
}

/* ---- Certificate anatomy ---- */
.est-cert-split {
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  gap: 52px;
  align-items: center;
}
.est-cert-copy .eyebrow-mono { display: block; margin-bottom: 16px; }
.est-cert-copy h2 { margin-bottom: 16px; }
.est-cert-copy .lede-sm { margin-bottom: 14px; }
.est-cert-list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.est-cert-list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 0.89rem;
  line-height: 1.6;
  color: var(--ink-700);
}
.est-cert-list svg { flex-shrink: 0; margin-top: 2px; color: var(--indigo-600); }

.est-cert-visual { position: relative; }
.est-cert {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(158deg, var(--ink-950) 0%, var(--ink-850) 58%, var(--ink-800) 100%);
  box-shadow: var(--shadow-lg);
  padding: 22px 24px 20px;
  overflow: hidden;
}
.est-cert-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.est-cert-title {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}
.est-cert-paid {
  padding: 4px 11px;
  border-radius: 100px;
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(16, 185, 129, 0.4);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #6ee7b7;
}
.est-cert-rows { margin: 0; }
.est-cert-row {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.09);
}
.est-cert-row:last-child { border-bottom: 0; }
.est-cert-row dt {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
}
.est-cert-row dd {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  text-align: right;
}
/* The three rows worth explaining get a callout under the value. */
.est-cert-row.is-key { padding-bottom: 26px; }
.est-cert-call {
  position: absolute;
  right: 0; bottom: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a5b4fc;
}
.est-cert-call::before {
  content: "";
  display: inline-block;
  width: 14px; height: 1px;
  margin-right: 7px;
  vertical-align: middle;
  background: rgba(165, 180, 252, 0.55);
}
.est-cert-foot {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.62);
}
.est-cert-foot svg { flex-shrink: 0; color: var(--emerald-500); }

/* ---- Stamping vs registration ---- */
.est-vs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 22px;
}
.est-vs-col {
  display: flex;
  flex-direction: column;
  padding: 30px 30px 26px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-medium);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.est-vs-col:hover {
  transform: translateY(-4px);
  border-color: var(--indigo-500);
  box-shadow: var(--shadow-md);
}
.est-vs-tag {
  align-self: flex-start;
  padding: 4px 12px;
  margin-bottom: 14px;
  border-radius: 100px;
  background: var(--grad-soft-indigo);
  border: 1px solid rgba(79, 70, 229, 0.22);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--indigo-600);
}
.est-vs-tag.is-alt {
  background: var(--surface-alt);
  border-color: var(--line-medium);
  color: var(--ink-500);
}
.est-vs-col h3 {
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  margin-bottom: 10px;
}
.est-vs-col > p {
  font-size: 0.89rem;
  line-height: 1.68;
  color: var(--ink-500);
  margin: 0 0 18px;
}
.est-vs-list {
  list-style: none;
  margin: auto 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.est-vs-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid var(--line-subtle);
}
.est-vs-list strong {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-900);
}
.est-vs-list span {
  text-align: right;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-500);
}
/* The divider is the comparison, so it stays visible rather than decorative. */
.est-vs-div {
  align-self: center;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line-medium);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-400);
  box-shadow: var(--shadow-sm);
}
.est-vs-note {
  max-width: 760px;
  margin: 22px auto 0;
  text-align: center;
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--ink-400);
}

/* ---- Related links ---- */
.est-link-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* ---- Testimonial slider ----
   Three quotes, one at a time, on a centred track. The viewport is capped well
   below the container width because a full-width serif quote is a ribbon, not
   a testimonial. */
.testi-slider { position: relative; margin-bottom: 26px; }
.testi-viewport {
  max-width: 780px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.testi-track {
  display: flex;
  transition: transform 0.62s var(--ease);
  will-change: transform;
}
/* The card is the slide, so nothing extra wraps it. align-items:stretch on the
   flex parent keeps all three the same height as the tallest quote. */
.testi-track > .testi-card {
  flex: 0 0 100%;
  min-width: 0;
}
/* Lifting a slide inside a clipped viewport just crops it. */
.testi-track > .testi-card:hover { transform: none; box-shadow: none; }

.testi-dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 22px;
}
.testi-dot {
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line-strong);
  cursor: pointer;
  transition: width 0.35s var(--ease), background-color 0.35s var(--ease);
}
.testi-dot:hover { background: var(--ink-400); }
.testi-dot.is-active {
  width: 26px;
  border-radius: 100px;
  background: var(--grad-primary);
}
.testi-dot:focus-visible {
  outline: 2px solid var(--indigo-500);
  outline-offset: 3px;
}

/* The dark video card's quote had no bottom margin, so the name sat flush
   against the last line. Match the 24px the light cards use. */
.testi-video-copy p { margin-bottom: 24px; }

/* ---- e-Stamping: the four steps ----
   Four loose cards said nothing about sequence, which is the one thing this
   section is arguing. The steps now sit on a rail that fills left to right and
   seals at the end. Everything is written in its COMPLETED state, so with the
   animation off — reduced motion, or off-screen — the rail reads as finished
   rather than empty. */
.est-flow {
  --flow-gap: 22px;
  --flow-node: 46px;
  position: relative;
}
.est-flow-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--flow-gap);
}
/* The rail runs between the first and last node centres. A column is
   (100% - 3 gaps) / 4, so half a column is (100% - 3 gaps) / 8 — which is the
   inset needed at each end. */
.est-flow-rail {
  position: absolute;
  top: calc(var(--flow-node) / 2 - 1px);
  left: calc((100% - var(--flow-gap) * 3) / 8);
  right: calc((100% - var(--flow-gap) * 3) / 8);
  height: 2px;
  border-radius: 2px;
  background: var(--line-medium);
  overflow: hidden;
}
.est-flow-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--indigo-600) 0%, var(--violet-500) 62%, var(--emerald-500) 100%);
  transform-origin: left center;
}

.est-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.est-flow-node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--flow-node);
  height: var(--flow-node);
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--grad-primary);
  color: #fff;
  /* The ring hides the rail passing behind the node. */
  box-shadow: 0 0 0 6px var(--bg-main), 0 10px 22px -8px rgba(79, 70, 229, 0.75);
}
.est-flow-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.est-flow-tick { position: absolute; opacity: 0; }
/* The last step is the seal, so it ends green and trades its numeral for a tick. */
.est-flow-step.is-seal .est-flow-node {
  background: var(--emerald-600);
  box-shadow: 0 0 0 6px var(--bg-main), 0 10px 22px -8px rgba(5, 150, 105, 0.8);
}
.est-flow-step.is-seal .est-flow-num { opacity: 0; }
.est-flow-step.is-seal .est-flow-tick { opacity: 1; }

.est-flow-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  padding: 24px 22px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-medium);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.est-flow-card:hover {
  transform: translateY(-5px);
  border-color: var(--indigo-500);
  box-shadow: var(--shadow-md);
}
.est-flow-step.is-seal .est-flow-card:hover { border-color: var(--emerald-500); }
.est-flow-card h3 {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 9px;
}
.est-flow-card p {
  font-size: 0.87rem;
  line-height: 1.66;
  color: var(--ink-500);
  margin: 0 0 16px;
  text-wrap: pretty;
}
.est-flow-meta {
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px dashed var(--line-medium);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  color: var(--ink-400);
}
.est-flow-step.is-seal .est-flow-meta { color: var(--emerald-600); }

/* ---- Playback ----
   One 6s cycle. The fill travels, and each node lights as it is reached, so
   the sequence is legible rather than four things appearing at once. */
.est-flow.is-live .est-flow-fill { animation: estFlowFill 6s var(--ease) infinite; }
@keyframes estFlowFill {
  0%, 6%    { transform: scaleX(0); }
  62%, 90%  { transform: scaleX(1); }
  95%, 100% { transform: scaleX(0); }
}
.est-flow.is-live .est-flow-node { animation-duration: 6s; animation-iteration-count: infinite; animation-timing-function: var(--ease); }
.est-flow.is-live .s1 .est-flow-node { animation-name: estNode1; }
.est-flow.is-live .s2 .est-flow-node { animation-name: estNode2; }
.est-flow.is-live .s3 .est-flow-node { animation-name: estNode3; }
.est-flow.is-live .s4 .est-flow-node { animation-name: estNode4; }

/* Each node sits dim until the fill reaches it. Written out per step rather
   than shared with animation-delay, because a delayed infinite loop drifts out
   of step with the fill on every repeat. */
@keyframes estNode1 {
  0%, 4%    { background: var(--surface-alt); color: var(--ink-400); box-shadow: 0 0 0 6px var(--bg-main); }
  9%, 90%   { background: var(--grad-primary); color: #fff; box-shadow: 0 0 0 6px var(--bg-main), 0 10px 22px -8px rgba(79, 70, 229, 0.75); }
  95%, 100% { background: var(--surface-alt); color: var(--ink-400); box-shadow: 0 0 0 6px var(--bg-main); }
}
@keyframes estNode2 {
  0%, 23%   { background: var(--surface-alt); color: var(--ink-400); box-shadow: 0 0 0 6px var(--bg-main); }
  28%, 90%  { background: var(--grad-primary); color: #fff; box-shadow: 0 0 0 6px var(--bg-main), 0 10px 22px -8px rgba(79, 70, 229, 0.75); }
  95%, 100% { background: var(--surface-alt); color: var(--ink-400); box-shadow: 0 0 0 6px var(--bg-main); }
}
@keyframes estNode3 {
  0%, 42%   { background: var(--surface-alt); color: var(--ink-400); box-shadow: 0 0 0 6px var(--bg-main); }
  47%, 90%  { background: var(--grad-primary); color: #fff; box-shadow: 0 0 0 6px var(--bg-main), 0 10px 22px -8px rgba(79, 70, 229, 0.75); }
  95%, 100% { background: var(--surface-alt); color: var(--ink-400); box-shadow: 0 0 0 6px var(--bg-main); }
}
@keyframes estNode4 {
  0%, 58%   { background: var(--surface-alt); color: var(--ink-400); box-shadow: 0 0 0 6px var(--bg-main); }
  64%, 90%  { background: var(--emerald-600); color: #fff; box-shadow: 0 0 0 6px var(--bg-main), 0 10px 22px -8px rgba(5, 150, 105, 0.8); }
  95%, 100% { background: var(--surface-alt); color: var(--ink-400); box-shadow: 0 0 0 6px var(--bg-main); }
}

@media (prefers-reduced-motion: reduce) {
  .est-flow.is-live .est-flow-fill,
  .est-flow.is-live .s1 .est-flow-node,
  .est-flow.is-live .s2 .est-flow-node,
  .est-flow.is-live .s3 .est-flow-node,
  .est-flow.is-live .s4 .est-flow-node { animation: none; }
}