/*
 * Signal Blue — Base Component Stylesheet
 * Shared across all Signal Blue pages. Requires signal-blue-tokens.css loaded first.
 *
 * Load order in base template:
 *   1. signal-blue-tokens.css
 *   2. signal-blue-base.css   ← this file
 *   3. [page-specific].css    (optional, per page)
 *
 * Asset paths use real HubSpot /hubfs/ URLs from portal 23491073.
 * Logos: /hubfs/Webgility_Jan2023/images/{filename}
 */

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes ambientFloat {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.22; }
  50% { transform: translate3d(8px, -12px, 0); opacity: 0.40; }
}
@keyframes ambientFloat1 {
  /* High-visibility — strong fade, visible travel */
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.28; }
  30%  { transform: translate3d(14px, -13px, 0); opacity: 0.54; }
  70%  { transform: translate3d(-9px, -7px, 0); opacity: 0.18; }
}
@keyframes ambientFloat2 {
  /* Mid-visibility */
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.20; }
  35%  { transform: translate3d(-14px, -12px, 0); opacity: 0.44; }
  65%  { transform: translate3d(10px, -6px, 0); opacity: 0.10; }
}
@keyframes ambientFloat3 {
  /* Subtle */
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.13; }
  40%  { transform: translate3d(15px, -11px, 0); opacity: 0.34; }
  80%  { transform: translate3d(-7px, -15px, 0); opacity: 0.06; }
}
@keyframes ambientFloat4 {
  /* Faint / inner */
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.07; }
  25%  { transform: translate3d(-12px, -9px, 0); opacity: 0.26; }
  75%  { transform: translate3d(9px, -14px, 0); opacity: 0.04; }
}
@keyframes entropyDrift1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(12px, -10px) rotate(1deg); }
}
@keyframes entropyDrift2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-12px, 10px) rotate(-1deg); }
}
@keyframes signalPulse {
  0%, 100% { opacity: 0.22; transform: scale(1); }
  50% { opacity: 0.64; transform: scale(1.14); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes megaIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: 72px;
  display: flex;
  align-items: center;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(255,255,255,0.92);
  border-bottom: 1px solid rgba(221,228,242,0.70);
}
.nav-inner {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
}
.nav-logo {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--ink);
  text-decoration: none;
  flex-shrink: 0;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 32px;
  list-style: none;
}
.nav-trigger, .nav-plain {
  font-size: 14px;
  font-weight: 650;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background 0.14s, color 0.14s;
  white-space: nowrap;
  font-family: inherit;
}
.nav-trigger:hover, .nav-plain:hover,
.nav-trigger.active {
  background: var(--signal-blue-pale);
  color: var(--signal-blue);
}
.nav-chevron {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.18s;
}
.nav-trigger.active .nav-chevron {
  transform: rotate(225deg) translateY(-2px);
}
.nav-spacer { flex: 1; }
.nav-cta {
  background: var(--ink);
  color: white;
  border-radius: 999px;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.16s, transform 0.12s;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-cta:hover {
  background: var(--ink-soft);
  transform: translateY(-1px);
}
.nav-login {
  position: relative;
  margin-right: 4px;
}
.nav-login-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 650;
  color: var(--ink-soft);
  background: transparent;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
}
.nav-login-trigger:hover,
.nav-login-trigger.active {
  background: var(--signal-blue-pale);
  color: var(--signal-blue);
}
.nav-login-trigger.active .nav-chevron {
  transform: rotate(225deg) translateY(-2px);
}
.nav-login-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 18px 40px rgba(15,23,42,0.10), 0 2px 8px rgba(15,23,42,0.04);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
  z-index: 200;
}
.nav-login:hover .nav-login-panel,
.nav-login-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-login-item {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.nav-login-item:hover {
  background: var(--signal-blue-pale);
  color: var(--signal-blue);
}
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: all 0.22s;
}
.nav-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ============================================================
   MEGA PANELS
   ============================================================ */
.mega-overlay {
  position: fixed;
  inset: 0;
  top: 72px;
  background: rgba(14,17,23,0.22);
  z-index: 998;
  display: none;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.mega-overlay.visible { display: block; }

.mega-panel {
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  background: white;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 28px 80px rgba(47,75,255,0.09), 0 8px 24px rgba(14,17,23,0.06);
  z-index: 999;
  display: none;
}
.mega-panel.open {
  display: block;
  max-height: calc(100svh - 72px);
  overflow-y: auto;
  animation: megaIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.mega-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 40px 48px;
  display: grid;
  align-items: start;
}
.mega-col { padding: 0 20px; }
.mega-col:first-child { padding-left: 0; }
.mega-col-label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 8px;
  padding: 0 12px;
  height: 32px;
  display: flex;
  align-items: flex-end;
}
.mega-item {
  display: block;
  padding: 11px 12px 12px;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.13s;
  margin-bottom: 2px;
}
.mega-item:hover { background: var(--signal-blue-pale); }
.mega-item-title {
  font-size: 14px;
  font-weight: 750;
  color: var(--ink-soft);
  line-height: 1.3;
  transition: color 0.13s;
}
.mega-item:hover .mega-item-title { color: var(--signal-blue); }
.mega-item-sub {
  font-size: 12px;
  font-weight: 450;
  color: var(--text-soft);
  margin-top: 3px;
  line-height: 1.5;
}
.mega-col-divider {
  width: 1px;
  background: var(--border);
  align-self: stretch;
  margin: 40px 0;
}
.mega-featured {
  background: var(--signal-blue-pale);
  border: 1px solid rgba(47,75,255,0.16);
  border-radius: 20px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 200px;
  text-decoration: none;
  transition: border-color 0.14s, box-shadow 0.14s;
  margin-top: 40px;
}
.mega-featured:hover {
  border-color: rgba(47,75,255,0.32);
  box-shadow: 0 8px 28px rgba(47,75,255,0.10);
}
.mega-featured-eyebrow {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal-blue);
  margin-bottom: 12px;
}
.mega-featured-title {
  font-size: 18px;
  font-weight: 850;
  color: var(--ink-soft);
  line-height: 1.15;
  letter-spacing: -0.03em;
}
.mega-featured-sub {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 10px;
  line-height: 1.55;
  font-weight: 450;
}
.mega-featured-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  font-size: 13px;
  font-weight: 750;
  color: var(--signal-blue);
  transition: gap 0.16s;
}
.mega-featured:hover .mega-featured-cta { gap: 10px; }

/* ============================================================
   MOBILE MENU
   ============================================================ */
.mobile-menu {
  display: none;
  position: fixed;
  top: 72px;
  left: 0; right: 0;
  height: calc(100svh - 72px);
  max-height: calc(100svh - 72px);
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(20px);
  z-index: 998;
  padding: 24px 24px max(64px, env(safe-area-inset-bottom, 64px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu.open { display: block; }
.mobile-section-label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-soft);
  padding: 20px 0 8px;
}
.mobile-sub-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  opacity: 0.6;
  padding: 14px 0 4px;
  padding-left: 4px;
}
.mobile-menu a {
  display: flex;
  flex-direction: column;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  gap: 2px;
}
.mobile-item-sub {
  font-size: 12px;
  font-weight: 450;
  color: var(--text-soft);
}
.mobile-menu .mobile-cta {
  display: inline-flex;
  align-items: center;
  margin-top: 28px;
  background: var(--ink);
  color: white;
  border-radius: 999px;
  padding: 16px 28px;
  font-size: 15px;
  font-weight: 850;
  text-decoration: none;
}

/* ============================================================
   SHARED SECTION TYPOGRAPHY
   ============================================================ */
.section-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal-blue);
}
.section-h2 {
  font-size: clamp(48px, 5vw, 76px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  font-weight: 900;
  color: var(--text-main);
  max-width: 680px;
  margin-top: 16px;
}
.section-body {
  font-size: 18px;
  line-height: 1.8;
  color: var(--text-muted);
  max-width: 580px;
  margin-top: 24px;
}
.section-text-link {
  font-size: 15px;
  font-weight: 700;
  color: var(--signal-blue);
  text-decoration: none;
  letter-spacing: -0.01em;
  border-bottom: 1px solid rgba(47,75,255,0.25);
  padding-bottom: 1px;
  transition: border-color 0.15s, opacity 0.15s;
}
.section-text-link:hover { border-color: var(--signal-blue); opacity: 0.78; }

/* ============================================================
   SHARED BUTTONS
   ============================================================ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  height: 56px;
  padding: 0 30px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2F4BFF 0%, #1932C7 100%);
  color: white;
  font-size: 15px;
  font-weight: 850;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 16px 36px rgba(47,75,255,0.26), inset 0 1px 0 rgba(255,255,255,0.26);
  transition: transform 0.14s, box-shadow 0.14s;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 44px rgba(47,75,255,0.34), inset 0 1px 0 rgba(255,255,255,0.26);
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  height: 56px;
  padding: 0 30px;
  border-radius: 999px;
  background: rgba(255,255,255,0.68);
  border: 1px solid rgba(47,75,255,0.22);
  color: var(--text-main);
  font-size: 15px;
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: background 0.14s, transform 0.14s;
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.88);
  transform: translateY(-2px);
}

/* ============================================================
   STATUS PILLS (shared — used in hero bubbles, cards, etc.)
   ============================================================ */
.status-pill {
  font-size: 9px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  margin-top: 6px;
  display: inline-block;
}
.pill-green { background: var(--certified-green-soft); color: var(--certified-green-dark); }
.pill-red   { background: var(--error-soft); color: var(--error-red); }
.pill-amber { background: var(--warning-soft); color: #92580A; }

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: 120px;
  padding-bottom: 96px;
  background:
    radial-gradient(ellipse 60% 50% at 22% 22%, rgba(47,75,255,0.055) 0%, transparent 62%),
    radial-gradient(ellipse 45% 35% at 84% 24%, rgba(24,166,106,0.035) 0%, transparent 54%),
    #F7F8FC;
}
.hero-grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(47, 75, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 75, 255, 0.04) 1px, transparent 1px);
  background-size: 72px 72px;
}
.hero-content {
  position: relative;
  z-index: 10;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}
.hero-content::before {
  content: '';
  position: absolute;
  inset: -80px -120px;
  background: radial-gradient(ellipse 75% 85% at center, rgba(247,248,252,0.98) 50%, rgba(247,248,252,0.6) 70%, transparent 100%);
  z-index: -1;
  pointer-events: none;
}
.hero-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal-blue);
  background: rgba(232,236,255,0.72);
  border: 1px solid rgba(47,75,255,0.28);
  border-radius: 999px;
  padding: 10px 18px;
}
/* Hero lede — emotional pre-headline, sits above the H1 */
.hero-lede {
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 12px;
}
.hero-headline {
  font-size: clamp(44px, 5.6vw, 80px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  font-weight: 900;
  color: var(--text-main);
  text-align: center;
  margin-top: 32px;
}
.hero-headline .blue { color: var(--signal-blue); }

/* ALMOST RIGHT — individual letter fade + pulse */
@keyframes letterPulse {
  0%, 100% { opacity: 0.28; }
  50%       { opacity: 0.80; }
}
.distorted .fade-letter {
  opacity: 0.28;
  animation: letterPulse var(--dur, 3.2s) ease-in-out var(--del, 0s) infinite;
}

/* ALMOST RIGHT distortion effect */
.distorted {
  position: relative;
  display: inline-block;
  filter: blur(0.8px);
}
.distorted::before,
.distorted::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.distorted::before {
  transform: translate(-2px, 1px);
  opacity: 0.28;
  clip-path: inset(0 0 52% 0);
}
.distorted::after {
  transform: translate(2px, -1px);
  opacity: 0.22;
  clip-path: inset(48% 0 0 0);
}
.hero-body {
  max-width: 680px;
  margin: 28px auto 0;
  font-size: 19px;
  line-height: 1.75;
  font-weight: 450;
  color: var(--text-muted);
  text-align: center;
}
/* Hero three-pillar layout — replaces single body paragraph */
.hero-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 48px;
  max-width: 780px;
  margin: 36px auto 0;
}
.hero-pillar {
  text-align: center;
}
.hero-pillar-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--text-main);
  margin-bottom: 10px;
}
.hero-pillar-body {
  font-size: 14px;
  line-height: 1.65;
  font-weight: 450;
  color: var(--text-muted);
  margin: 0;
}
@media (max-width: 600px) {
  .hero-pillars {
    grid-template-columns: 1fr;
    gap: 24px 0;
    max-width: 360px;
  }
}
.hero-proof {
  margin-top: 18px;
  font-size: 20px;
  font-weight: 850;
  color: var(--text-main);
  text-align: center;
}
.hero-ctas {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 40px;
  flex-wrap: wrap;
}
.hero-integrations { margin-top: 56px; }
.hero-integrations-label {
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 16px;
}
.hero-logos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
}
.hero-logos img {
  height: 50px;
  width: auto;
  object-fit: contain;
}
.logo-chip {
  background: transparent;
  border: none;
  border-right: 1px solid rgba(0,0,0,0.10);
  border-radius: 0;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  opacity: 0.45;
  white-space: nowrap;
}
.logo-chip:last-child { border-right: none; }
.logo-chip-img {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.logo-chip-img img {
  display: block;
  height: 50px;
  width: auto;
  opacity: 1;
  filter: grayscale(1);
  transition: filter 0.2s;
}
.logo-chip-img:hover img {
  filter: grayscale(0);
}
/* ============================================================
   HERO — GRAFFITI BACKGROUND IMAGE
   Desktop: landscape blueprint image at 15% opacity.
   Mobile:  portrait blueprint image at 8% opacity (more subtle
            so it doesn't compete with centered hero copy).
   mix-blend-mode: screen dissolves the pure-black areas of the
   image, leaving only the chalk/graffiti elements visible.
   ============================================================ */
.hero-graffiti {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  user-select: none;
  opacity: 0.12;
  mix-blend-mode: screen;
}
.hero-graffiti picture,
.hero-graffiti img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ============================================================
   HERO — DARK VARIANT
   ============================================================ */
.hero.hero-dark {
  background:
    radial-gradient(ellipse 60% 50% at 22% 22%, rgba(47,75,255,0.18) 0%, transparent 62%),
    radial-gradient(ellipse 45% 35% at 84% 24%, rgba(24,166,106,0.10) 0%, transparent 54%),
    var(--dark-panel);
}
.hero.hero-dark .hero-grid-overlay {
  background-image:
    linear-gradient(rgba(47,75,255,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,75,255,0.08) 1px, transparent 1px);
}
.hero.hero-dark .hero-content::before {
  background: radial-gradient(ellipse 75% 85% at center, rgba(12,18,32,0.60) 40%, rgba(12,18,32,0.18) 68%, transparent 100%);
}
.hero.hero-dark .hero-lede {
  color: rgba(255,255,255,0.45);
}
.hero.hero-dark .hero-headline {
  color: #FFFFFF;
}
.hero.hero-dark .hero-body {
  color: rgba(255,255,255,0.58);
}
.hero.hero-dark .hero-integrations-label {
  color: rgba(255,255,255,0.35);
}
.hero.hero-dark .logo-chip-img img {
  filter: none;
  opacity: 0.80;
  transition: opacity 0.2s;
}
.hero.hero-dark .logo-chip-img:hover img {
  opacity: 1;
}

.metrics-strip {
  max-width: 820px;
  margin: 56px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(255,255,255,0.68);
  border: 1px solid rgba(47,75,255,0.14);
  border-radius: 20px;
  box-shadow: 0 18px 54px rgba(47,75,255,0.06);
  backdrop-filter: blur(12px);
  overflow: hidden;
}
/* Full-width variant — below testimonials, 3 stats */
.metrics-strip.metrics-strip-full {
  max-width: 100%;
  margin: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
  grid-template-columns: repeat(3, 1fr);
  box-shadow: none;
  border-top: 1px solid rgba(47,75,255,0.10);
  border-bottom: 1px solid rgba(47,75,255,0.10);
}
.metric-item {
  padding: 24px 20px;
  text-align: center;
  border-right: 1px solid rgba(47,75,255,0.10);
}
.metric-item:last-child { border-right: none; }
.metric-number {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--signal-blue);
}
.metric-label {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ============================================================
   FLOATING BUBBLES (hero decoration)
   ============================================================ */
.bubble {
  position: absolute;
  min-width: 136px;
  max-width: 190px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.54);
  border: 1px solid rgba(47,75,255,0.14);
  box-shadow: 0 18px 48px rgba(47,75,255,0.06), inset 0 1px 0 rgba(255,255,255,0.72);
  backdrop-filter: blur(12px);
  pointer-events: none;
  animation: ambientFloat linear infinite;
}
.bubble-label {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.bubble-title {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 850;
  color: var(--ink-soft);
}
.bubble-meta {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 650;
  color: #6F7A8A;
}

/* ============================================================
   PROBLEM SECTION
   ============================================================ */
.section-problem {
  background: linear-gradient(180deg, #F7F8FC 0%, #FBFCFF 100%);
  padding: 112px 0;
}
.problem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.dark-panel {
  background:
    radial-gradient(circle at 28% 22%, rgba(47,75,255,0.18), transparent 34%),
    radial-gradient(circle at 75% 70%, rgba(24,166,106,0.10), transparent 30%),
    #0C1220;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 42px;
  box-shadow: 0 34px 90px rgba(16,32,72,0.26), inset 0 1px 0 rgba(255,255,255,0.08);
  padding: 32px;
  min-height: 480px;
  position: relative;
  overflow: hidden;
}
.dark-artifact-card {
  background: rgba(255,255,255,0.075);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 16px;
  color: rgba(255,255,255,0.74);
  backdrop-filter: blur(14px);
  position: absolute;
  min-width: 160px;
  max-width: 220px;
}
.dark-artifact-card.hot {
  border-color: rgba(245,158,11,0.36);
  background: rgba(245,158,11,0.10);
  color: #FFF4D8;
}
.dac-title {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.44);
  margin-bottom: 8px;
}
.dark-artifact-card.hot .dac-title { color: rgba(245,158,11,0.72); }
.dac-main {
  font-size: 13px;
  font-weight: 750;
  line-height: 1.4;
  color: rgba(255,255,255,0.82);
}
.dark-artifact-card.hot .dac-main { color: #FFF4D8; }
.dac-sub {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 650;
  color: rgba(255,255,255,0.44);
}
.dark-artifact-card.hot .dac-sub { color: rgba(245,158,11,0.72); }

/* ============================================================
   DECISION TABS SECTION
   ============================================================ */
.section-tabs {
  background: var(--surface);
  padding: 152px 0;
}
.section-tabs .section-h2 {
  font-size: clamp(42px, 4.8vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  max-width: 700px;
}
.tab-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
}
.tab-btn {
  border-radius: 12px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface-soft);
  color: var(--text-muted);
  transition: all 0.18s;
  font-family: inherit;
}
.tab-btn.active {
  background: var(--signal-blue);
  color: white;
  border-color: var(--signal-blue);
  box-shadow: 0 14px 30px rgba(47,75,255,0.22);
}
.tab-btn:hover:not(.active) {
  background: var(--signal-blue-pale);
  color: var(--signal-blue);
  border-color: rgba(47,75,255,0.20);
}
.decision-panel {
  background: rgba(255,255,255,0.86);
  border: 1px solid var(--border);
  border-radius: 36px;
  box-shadow: 0 28px 80px rgba(47,75,255,0.08);
  overflow: hidden;
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.decision-left { padding: 56px 48px; }
.before-label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 16px;
}
.before-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-muted);
  font-style: italic;
}
.divider-with-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
}
.divider-with-chip::before,
.divider-with-chip::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.divider-chip {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal-blue);
  background: var(--signal-blue-soft);
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.after-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.after-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  font-weight: 650;
  color: var(--ink-soft);
  line-height: 1.5;
}
.after-bullets li::before {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal-blue);
  margin-top: 5px;
  flex-shrink: 0;
}
.decision-right {
  background:
    radial-gradient(circle at 80% 20%, rgba(47,75,255,0.16), transparent 28%),
    #0C1220;
  color: white;
  padding: 56px 48px;
}
.sku-table-label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  margin-bottom: 16px;
}
.sku-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.sku-table th {
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  padding: 0 0 10px 0;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sku-table th:not(:first-child) { text-align: right; }
.sku-table td {
  padding: 10px 0;
  color: rgba(255,255,255,0.78);
  font-weight: 650;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.sku-table td:not(:first-child) { text-align: right; }
.sku-table td:first-child { font-weight: 750; color: rgba(255,255,255,0.90); }
.margin-high { color: #18A66A !important; font-weight: 800 !important; }
.margin-mid  { color: #F59E0B !important; font-weight: 800 !important; }
.margin-low  { color: #E5484D !important; font-weight: 800 !important; }

/* ── Decision panel: tab-switch fade-in ───────────────────── */
@keyframes decisionVisualEnter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.decision-visual-enter {
  animation: decisionVisualEnter 420ms ease-out forwards;
}
/* Key row highlight — draws the eye to the most important data point */
[data-tab-visual] tr.glow-row td {
  background: rgba(47,75,255,0.10);
  transition: background 0.3s;
}
[data-tab-visual] .terminal-row.glow-row .terminal-val-ok,
[data-tab-visual] .terminal-row.glow-row .terminal-val-warn {
  text-shadow: 0 0 14px currentColor;
}

/* ── Decision panel: ambient glow pulse on key values ──────── */
@keyframes glowPulseHigh {
  0%, 100% { text-shadow: none; }
  50%       { text-shadow: 0 0 10px rgba(24,166,106,0.65); }
}
@keyframes glowPulseMid {
  0%, 100% { text-shadow: none; }
  50%       { text-shadow: 0 0 10px rgba(245,158,11,0.60); }
}
@keyframes glowPulseLow {
  0%, 100% { text-shadow: none; }
  50%       { text-shadow: 0 0 10px rgba(229,72,77,0.55); }
}
@keyframes glowPulseOk {
  0%, 100% { text-shadow: none; }
  50%       { text-shadow: 0 0 10px rgba(40,200,64,0.60); }
}

/* Scoped to decision visuals only — won't bleed to other tables */
[data-tab-visual] .margin-high {
  animation: glowPulseHigh 3.5s ease-in-out infinite;
}
[data-tab-visual] .margin-mid {
  animation: glowPulseMid 4.0s ease-in-out 1.2s infinite;
}
[data-tab-visual] .margin-low {
  animation: glowPulseLow 3.8s ease-in-out 0.6s infinite;
}
[data-tab-visual] .terminal-val-ok {
  animation: glowPulseOk 3.5s ease-in-out 0.4s infinite;
}

/* ============================================================
   CAPABILITY CARDS
   ============================================================ */
.section-capabilities {
  background: var(--surface-soft);
  padding: 88px 0;
}
.section-capabilities .section-h2 {
  font-size: clamp(36px, 4vw, 58px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  max-width: 580px;
}
.capability-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 48px;
}
.capability-card {
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(221,228,242,0.95);
  border-radius: 34px;
  box-shadow: 0 24px 70px rgba(47,75,255,0.06);
  backdrop-filter: blur(12px);
  padding: 32px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.capability-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 34px 90px rgba(47,75,255,0.10);
}
.cap-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--signal-blue-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.cap-icon svg { width: 22px; height: 22px; }
.cap-title {
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.04em;
  font-weight: 900;
  color: var(--text-main);
}
.cap-body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
  margin-top: 12px;
}
.cap-learn-link {
  display: inline-block;
  margin-top: 18px;
  font-size: 13px;
  font-weight: 750;
  color: var(--signal-blue);
  text-decoration: none;
  letter-spacing: -0.01em;
  border-bottom: 1px solid rgba(47,75,255,0.22);
  padding-bottom: 1px;
  transition: border-color 0.15s, opacity 0.15s;
}
.cap-learn-link:hover { border-color: var(--signal-blue); opacity: 0.72; }
.cap-section-footer {
  text-align: center;
  margin-top: 40px;
}
.cap-mockup {
  background: #0B1020;
  border: 1px solid rgba(47,75,255,0.22);
  border-radius: 22px;
  padding: 20px;
  margin-top: 20px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.22);
}
/* Dark mockup — scoped child overrides */
.cap-mockup .feed-item {
  color: rgba(255,255,255,0.62);
  border-bottom-color: rgba(255,255,255,0.07);
}
.cap-mockup .recon-item { border-bottom-color: rgba(255,255,255,0.07); }
.cap-mockup .recon-name { color: rgba(255,255,255,0.58); }
.cap-mockup .int-chip {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.68);
}
.cap-mockup .sku-mini-table th {
  color: rgba(255,255,255,0.36);
  border-bottom-color: rgba(255,255,255,0.08);
}
.cap-mockup .sku-mini-table td {
  color: rgba(255,255,255,0.60);
  border-bottom-color: rgba(255,255,255,0.07);
}
.cap-mockup .sku-mini-table td:first-child { color: rgba(255,255,255,0.75); }
.feed-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 12px;
  font-weight: 650;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--border);
}
.feed-item:last-child { border-bottom: none; }
.feed-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.feed-dot.green { background: var(--certified-green); }
.feed-dot.blue  { background: var(--signal-blue); }
.recon-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.recon-item:last-child { border-bottom: none; }
.recon-name   { font-weight: 750; color: var(--ink-soft); }
.recon-amount { font-weight: 850; color: var(--signal-blue); }
.recon-status { font-weight: 750; color: var(--certified-green); font-size: 11px; }
.integration-grid-mini {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  font-size: 11px;
}
.int-col { display: flex; flex-direction: column; gap: 6px; }
.int-chip {
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft);
  text-align: center;
  display: flex;
  align-items: center;
  gap: 5px;
}
.int-dot { width: 6px; height: 6px; border-radius: 50%; }
.int-arrow { font-size: 18px; font-weight: 900; color: var(--signal-blue); text-align: center; }
.int-center-chip {
  background: var(--signal-blue);
  color: white;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 850;
  text-align: center;
}
.sku-mini-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.sku-mini-table th {
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-soft);
  padding: 0 0 8px 0;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.sku-mini-table th:not(:first-child) { text-align: right; }
.sku-mini-table td {
  padding: 8px 0;
  color: var(--ink-soft);
  font-weight: 650;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}
.sku-mini-table td:not(:first-child) { text-align: right; }
.sku-mini-table td:first-child { font-weight: 750; }
.mini-pos { color: var(--certified-green); font-weight: 800 !important; }
.mini-neg { color: var(--error-red); font-weight: 800 !important; }

/* ============================================================
   AUDIT / BOOKS CLOSED CTA SECTION
   ============================================================ */
.section-audit-wrapper { padding: 0 40px; }
.audit-section {
  background:
    radial-gradient(circle at 18% 20%, rgba(47,75,255,0.20), transparent 30%),
    radial-gradient(circle at 88% 80%, rgba(24,166,106,0.12), transparent 32%),
    #0C1220;
  border-radius: 42px;
  padding: 80px 64px;
  margin: 112px auto;
  max-width: 1240px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.audit-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.36);
}
.audit-h2 {
  font-size: clamp(38px, 4vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 900;
  color: white;
  margin-top: 16px;
  max-width: 500px;
}
.audit-body {
  font-size: 17px;
  line-height: 1.75;
  color: rgba(255,255,255,0.62);
  margin-top: 20px;
}
.audit-sub {
  margin-top: 16px;
  font-size: 15px;
  font-weight: 750;
  color: rgba(255,255,255,0.50);
}
.btn-audit {
  display: inline-flex;
  align-items: center;
  height: 56px;
  padding: 0 30px;
  border-radius: 999px;
  background: var(--signal-blue);
  color: white;
  font-size: 15px;
  font-weight: 850;
  text-decoration: none;
  border: none;
  cursor: pointer;
  margin-top: 32px;
  transition: background 0.16s, transform 0.12s;
  box-shadow: 0 16px 36px rgba(47,75,255,0.36);
}
.btn-audit:hover {
  background: var(--signal-blue-dark);
  transform: translateY(-2px);
}
.audit-console {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 28px;
  backdrop-filter: blur(16px);
  padding: 28px;
}
.console-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.console-title { font-size: 14px; font-weight: 850; color: rgba(255,255,255,0.82); }
.console-chip {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.44);
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 4px 10px;
}
.console-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.console-stat {
  background: rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 14px;
  text-align: center;
}
.console-stat-num {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--signal-blue);
}
.console-stat-label {
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  margin-top: 4px;
}
.readiness-section {
  background: rgba(255,255,255,0.05);
  border-radius: 18px;
  padding: 20px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.readiness-donut { position: relative; width: 70px; height: 70px; flex-shrink: 0; }
.readiness-donut svg { transform: rotate(-90deg); }
.readiness-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.readiness-pct {
  font-size: 18px;
  font-weight: 900;
  color: var(--signal-blue);
  letter-spacing: -0.04em;
  line-height: 1;
}
.readiness-label-small {
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
}
.readiness-copy { flex: 1; }
.readiness-title { font-size: 14px; font-weight: 850; color: rgba(255,255,255,0.78); }
.readiness-sub { font-size: 11px; font-weight: 650; color: rgba(255,255,255,0.38); margin-top: 4px; }
.revenue-gap {
  background: rgba(229,72,77,0.12);
  border: 1px solid rgba(229,72,77,0.24);
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.gap-amount { font-size: 22px; font-weight: 900; color: #E5484D; letter-spacing: -0.04em; }
.gap-label {
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(229,72,77,0.72);
  margin-top: 4px;
}
.gap-badge {
  font-size: 10px;
  font-weight: 800;
  color: #E5484D;
  background: rgba(229,72,77,0.16);
  border-radius: 999px;
  padding: 5px 12px;
}

/* ============================================================
   CUSTOMER LOGOS STRIP
   ============================================================ */
.section-logos {
  border-top: 1px solid var(--border);
  padding: 48px 0;
  text-align: center;
}
.logos-label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 32px;
}
.customer-logos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 56px;
  max-width: 840px;
  margin: 0 auto;
  align-items: center;
  justify-items: center;
}
.customer-logos img {
  height: 36px;
  max-width: 160px;
  width: auto;
  object-fit: contain;
  object-position: center;
  filter: grayscale(1);
  opacity: 0.62;
  transition: opacity 0.2s;
  display: block;
}
.customer-logos img:hover { opacity: 0.9; }
.logos-more { margin-top: 20px; font-size: 12px; font-weight: 650; color: var(--text-soft); }

/* Trust strip — slim ambient logo bar above hero */
.section-logos.trust-strip {
  padding: 12px 0;
  border-top: none;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.5);
}
.section-logos.trust-strip .customer-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 36px;
  max-width: 100%;
  padding: 0 40px;
}
.section-logos.trust-strip .customer-logos img {
  height: 20px;
  max-width: 120px;
  opacity: 0.35;
  filter: grayscale(1);
}
.section-logos.trust-strip .customer-logos img:hover { opacity: 0.55; }

/* ============================================================
   RIGHT, REAL, NOW SECTION
   ============================================================ */
.section-rrn { background: var(--bg-main); padding: 120px 0; }
/* Left-right grid: copy | terminal */
.rrn-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 80px;
  align-items: center;
}
.rrn-grid .rrn-terminal { margin-top: 0; max-width: none; }
@media (max-width: 900px) {
  .rrn-grid { grid-template-columns: 1fr; gap: 48px; }
}
.rrn-terminal {
  margin-top: 56px;
  max-width: 720px;
  background: #0C1220;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 40px 100px rgba(12,18,32,0.28), inset 0 1px 0 rgba(255,255,255,0.07);
  overflow: hidden;
}
.rrn-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.rrn-label {
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
}
.rrn-live { font-size: 10px; font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase; color: #18A66A; }
.rrn-rows { padding: 8px 28px; }
.rrn-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 13px;
}
.rrn-row:last-child { border-bottom: none; }
.rrn-row span:first-child { color: rgba(255,255,255,0.60); font-weight: 500; }
.rrn-row span:last-child { color: rgba(255,255,255,0.85); font-weight: 700; font-variant-numeric: tabular-nums; }
.rrn-row.negative span:last-child { color: #E5484D; }
.rrn-row.total { border-top: 1px solid rgba(255,255,255,0.10); margin-top: 4px; padding-top: 14px; }
.rrn-row.total span:first-child { font-weight: 800; color: rgba(255,255,255,0.82); }
.rrn-row.total span:last-child { font-size: 15px; color: #18A66A; }
.rrn-footer {
  padding: 16px 28px 20px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.28);
  letter-spacing: 0.02em;
  border-top: 1px solid rgba(255,255,255,0.05);
}

/* ============================================================
   INTEGRATIONS SECTION
   ============================================================ */
.section-integrations { background: var(--surface); padding: 88px 0; text-align: center; }
.section-integrations .section-h2  { margin-left: auto; margin-right: auto; }
.section-integrations .section-body { margin-left: auto; margin-right: auto; }
/* ── Integrations hub-spoke radial layout ─────────────────── */
.integrations-hub {
  position: relative;
  max-width: 960px;
  height: 560px;
  margin: 56px auto 0;
  zoom: 0.92;
}

/* SVG decorative spokes */
.int-spoke-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
/* Grid traces — orthogonal paths following the page grid */
.int-spoke-svg path {
  fill: none;
  stroke: rgba(47, 75, 255, 1);
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-opacity: 0.22; /* always-on at low opacity */
}
/* JS adds this class to trigger a glow on one path at a time per group */
.int-spoke-svg path.int-trace-active {
  animation: trace-glow 1.8s ease-in-out forwards;
}
@keyframes trace-glow {
  0%   { stroke-opacity: 0.22; }
  35%  { stroke-opacity: 0.80; }
  65%  { stroke-opacity: 0.80; }
  100% { stroke-opacity: 0.22; }
}

/* Clusters (absolutely centred in the hub container) */
.int-cluster {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 260px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.int-cluster-left  { left: 0; }
.int-cluster-right { right: 0; }
.int-cluster-top {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
  text-align: center;
  width: 300px;
}
.int-cluster-bottom {
  top: auto;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 300px;
}
/* Two pills side by side in top/bottom clusters */
.int-cluster-pills-row {
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  width: 100%;
}
.int-cluster-pills-row .int-logo-pill {
  flex: 1;
  padding: 0 12px;
}
.int-cluster-pills-row .int-pill-img {
  max-width: 90px;
}

.int-cluster-title {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.36);
  margin-bottom: 4px;
}

/* Logo pills */
.int-logo-pill {
  height: 52px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  gap: 10px;
}
.int-logo-pill-named { justify-content: flex-start; }
.int-pill-img       { height: 30px; max-width: 130px; width: auto; object-fit: contain; display: block; }
.int-pill-img-sm    { height: 22px; max-width: 26px; }
.int-pill-name      { font-size: 13px; font-weight: 700; color: #1a1a2e; white-space: nowrap; }

/* Hub */
.int-hub-node-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.int-hub-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47,75,255,0.16) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.int-hub-ring {
  position: relative;
  z-index: 1;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 2px solid rgba(47, 75, 255, 0.55);
  box-shadow:
    0 0 0 8px rgba(47, 75, 255, 0.07),
    0 8px 40px rgba(0, 0, 0, 0.40);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  animation: hub-ring-pulse 3.5s ease-in-out infinite;
}
@keyframes hub-ring-pulse {
  0%, 100% {
    border-color: rgba(47, 75, 255, 0.35);
    box-shadow: 0 0 0 6px rgba(47, 75, 255, 0.05), 0 8px 40px rgba(0, 0, 0, 0.40);
  }
  50% {
    border-color: rgba(47, 75, 255, 0.80);
    box-shadow: 0 0 0 10px rgba(47, 75, 255, 0.12), 0 0 24px rgba(47, 75, 255, 0.35), 0 8px 40px rgba(0, 0, 0, 0.40);
  }
}
.int-hub-mark {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.int-hub-label {
  position: relative;
  z-index: 1;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(47, 75, 255, 0.65);
}

/* ============================================================
   TESTIMONIALS SECTION
   ============================================================ */
.section-testimonials {
  background:
    radial-gradient(circle at 20% 30%, rgba(47,75,255,0.06), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(24,166,106,0.04), transparent 36%),
    #111A2C;
  padding: 120px 0;
}
.section-testimonials .section-label { color: rgba(255,255,255,0.38); }
.section-testimonials .section-h2 { color: rgba(255,255,255,0.90); margin-left: auto; margin-right: auto; }
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.testimonial-quote {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,0.78);
  font-weight: 450;
  font-style: italic;
}
.testimonial-quote::before { content: '\201C'; }
.testimonial-quote::after  { content: '\201D'; }
/* Quote card — new structure */
.testimonial-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.tc-logo-wrap {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.92);
  border-radius: 10px;
  padding: 9px 16px;
  margin-bottom: 24px;
  width: fit-content;
}
.tc-logo-img {
  height: 30px;
  max-width: 150px;
  width: auto;
  object-fit: contain;
  display: block;
}
.tc-person {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,0.14);
}
.testimonial-meta-name { font-size: 13px; font-weight: 800; color: rgba(255,255,255,0.62); }
.testimonial-tag { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.30); margin-top: 4px; }
/* Video cards inside the unified testimonials grid — stretch to row height */
.testimonials-grid .video-thumb-card {
  aspect-ratio: unset;
  min-height: 220px;
}
.testimonials-grid .video-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   VIDEO TESTIMONIALS
   ============================================================ */
.video-testimonials {
  margin-top: 56px;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 48px;
}
.video-thumbs-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.30);
  margin-bottom: 20px;
}
.video-thumbs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.video-thumb-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 16/9;
  background: #0B1020;
  border: 1px solid rgba(255,255,255,0.07);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.video-thumb-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}
.video-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.2s;
}
.video-thumb-card:hover .video-thumb-img { opacity: 0.80; }
.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease, background 0.18s;
  box-shadow: 0 4px 20px rgba(0,0,0,0.45);
  pointer-events: none;
}
.video-thumb-card:hover .video-play-btn {
  transform: translate(-50%, -50%) scale(1.10);
  background: white;
}
.video-play-btn svg { width: 18px; height: 18px; margin-left: 3px; }
.video-thumb-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.82));
  padding: 28px 12px 11px;
  line-height: 1.3;
}
.video-caption-company {
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,255,255,0.92);
  letter-spacing: -0.01em;
}
.video-caption-person {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255,255,255,0.52);
  margin-top: 2px;
}

/* ── Lightbox ── */
.sb-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.sb-lightbox.is-open {
  opacity: 1;
  pointer-events: all;
}
.sb-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4,7,18,0.90);
  backdrop-filter: blur(10px);
}
.sb-lightbox-frame {
  position: relative;
  z-index: 1;
  width: 90vw;
  max-width: 920px;
}
.sb-lightbox-close {
  position: absolute;
  top: -42px;
  right: 0;
  background: none;
  border: none;
  color: rgba(255,255,255,0.60);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.15s;
}
.sb-lightbox-close:hover { color: white; }
.sb-lightbox-embed {
  aspect-ratio: 16/9;
  background: black;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 48px 120px rgba(0,0,0,0.75);
}
.sb-lightbox-embed iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: none;
}

/* ============================================================
   FINAL CTA SECTION
   ============================================================ */
.section-final-cta { background: var(--bg-main); padding: 120px 0; text-align: center; }
.final-cta-h2 {
  font-size: clamp(42px, 5vw, 72px);
  line-height: 0.96;
  letter-spacing: -0.02em;
  font-weight: 900;
  color: var(--text-main);
  max-width: 640px;
  margin: 16px auto 0;
}
.final-cta-body {
  font-size: 17px;
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 520px;
  margin: 24px auto 0;
}
.final-cta-line { font-size: 14px; font-weight: 650; color: var(--text-soft); font-style: italic; margin-top: 32px; }
.final-cta-btns { display: flex; gap: 16px; justify-content: center; margin-top: 40px; flex-wrap: wrap; }

/* ============================================================
   DEMO CTA SECTION
   ============================================================ */
.section-demo-wrapper { max-width: 1280px; margin: 112px auto;   background: rgba(255,255,255,0.6);
 }
.demo-section {
  background:
    radial-gradient(circle at 18% 20%, rgba(47,75,255,0.20), transparent 30%),
    radial-gradient(circle at 88% 80%, rgba(24,166,106,0.12), transparent 32%),
    #0C1220;
  border-radius: 42px;
  overflow: hidden;
  padding: 80px 72px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.demo-eyebrow {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  margin-bottom: 20px;
}
.demo-h2 {
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 900;
  color: #FFFFFF;
}
.demo-body { margin-top: 20px; font-size: 17px; line-height: 1.75; color: rgba(255,255,255,0.58); max-width: 460px; }
.demo-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 36px; }
.btn-demo-primary {
  display: inline-flex;
  align-items: center;
  height: 56px;
  padding: 0 30px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2F4BFF 0%, #1932C7 100%);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 850;
  text-decoration: none;
  box-shadow: 0 16px 36px rgba(47,75,255,0.32), inset 0 1px 0 rgba(255,255,255,0.26);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.btn-demo-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 20px 46px rgba(47,75,255,0.38), inset 0 1px 0 rgba(255,255,255,0.28);
}
.btn-demo-secondary {
  display: inline-flex;
  align-items: center;
  height: 56px;
  padding: 0 30px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.80);
  font-size: 15px;
  font-weight: 750;
  text-decoration: none;
  transition: background 160ms ease;
}
.btn-demo-secondary:hover { background: rgba(255,255,255,0.16); }
.demo-visual { display: flex; justify-content: center; }
.demo-card {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 28px;
  backdrop-filter: blur(16px);
  padding: 28px;
  width: 100%;
  max-width: 380px;
}
.demo-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.demo-card-label { font-size: 11px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.42); }
.demo-live-chip {
  font-size: 10px;
  font-weight: 800;
  color: #18A66A;
  background: rgba(24,166,106,0.15);
  border: 1px solid rgba(24,166,106,0.28);
  border-radius: 999px;
  padding: 4px 10px;
}
.demo-rows { display: flex; flex-direction: column; gap: 0; }
.demo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  font-size: 13px;
}
.demo-row:last-child { border-bottom: none; }
.demo-row-label { color: rgba(255,255,255,0.54); font-weight: 500; }
.demo-row-val { font-weight: 800; font-size: 13px; }
.demo-val-green { color: #18A66A; }
.demo-card-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.demo-certified-badge {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #18A66A;
  background: rgba(24,166,106,0.14);
  border: 1px solid rgba(24,166,106,0.26);
  border-radius: 999px;
  padding: 6px 12px;
}
.demo-specialist { font-size: 11px; color: rgba(255,255,255,0.30); font-family: monospace; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--dark-panel); padding: 72px 0 0; }

/* 5-column link grid: [Platform+Compare] [Company+Partners] [Resources] [Support] [Newsletter 280px] */
.footer-cols {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 280px;
  gap: 40px 48px;
  align-items: start;
}

/* Stacked sub-groups within a column (e.g. Platform + Compare) */
.footer-col-group {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Column header label */
.footer-col-title {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  margin-bottom: 16px;
}

/* Link list */
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-links a {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.54);
  text-decoration: none;
  transition: color 0.14s;
}
.footer-links a:hover { color: rgba(255,255,255,0.86); }

/* Newsletter column */
.footer-newsletter {
  padding-left: 32px;
  border-left: 1px solid rgba(255,255,255,0.08);
}
.footer-nl-title {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.72);
  margin-bottom: 16px;
}

/* HubSpot form overrides for dark background */
.footer-newsletter .hs-form { width: 100%; }
.footer-newsletter .hs-form-field { margin-bottom: 10px; }
.footer-newsletter .hs-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  color: rgba(255,255,255,0.82);
  font-size: 14px;
  padding: 10px 14px;
  outline: none;
  transition: border-color 0.14s;
}
.footer-newsletter .hs-input::placeholder { color: rgba(255,255,255,0.28); }
.footer-newsletter .hs-input:focus { border-color: var(--signal-blue); }
.footer-newsletter .hs-button {
  width: 100%;
  background: var(--signal-blue);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  padding: 11px 20px;
  cursor: pointer;
  transition: opacity 0.14s;
}
.footer-newsletter .hs-button:hover { opacity: 0.88; }
.footer-newsletter .hs-error-msgs { list-style: none; font-size: 12px; color: #f87171; margin-top: 4px; }

/* Bottom bar */
.footer-bottom {
  max-width: 1280px;
  margin: 48px auto 0;
  padding: 24px 40px 40px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-bottom-left {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-logo-link { display: flex; align-items: center; flex-shrink: 0; }
.footer-legal-block { display: flex; flex-direction: column; gap: 6px; }
.footer-legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.footer-legal a {
  font-size: 13px;
  color: rgba(255,255,255,0.34);
  text-decoration: none;
  transition: color 0.14s;
}
.footer-legal a:hover { color: rgba(255,255,255,0.64); }
.footer-legal-sep { color: rgba(255,255,255,0.18); font-size: 13px; }
.footer-ai-link { font-style: italic; }
.footer-copy { font-size: 13px; color: rgba(255,255,255,0.28); margin: 0; }

/* Social icon row */
.footer-social {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.footer-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: rgba(255,255,255,0.38);
  transition: color 0.14s, background 0.14s;
  text-decoration: none;
}
.footer-social-icon:hover {
  color: rgba(255,255,255,0.82);
  background: rgba(255,255,255,0.08);
}
.footer-social-icon svg { width: 18px; height: 18px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .problem-grid         { grid-template-columns: 1fr; gap: 40px; }
  .decision-panel       { grid-template-columns: 1fr; }
  .decision-right       { border-radius: 0 0 30px 30px; }
  /* Footer: collapse to 3 columns at 1024px (group1 | group2 | resources; support+newsletter below) */
  .footer-cols          { grid-template-columns: 1fr 1fr 1fr; }
  .footer-newsletter    { grid-column: 1 / -1; border-left: none; border-top: 1px solid rgba(255,255,255,0.08); padding-left: 0; padding-top: 32px; max-width: 400px; }
  .testimonials-grid    { grid-template-columns: 1fr; }
  .integrations-hub     { height: auto; display: flex; flex-direction: column; align-items: center; gap: 28px; }
  .int-cluster, .int-hub-node-wrap { position: static; transform: none; }
  .int-cluster          { width: 100%; max-width: 360px; }
  .int-cluster-bottom   { flex-direction: column; } /* restore normal order on mobile */
  .int-spoke-svg        { display: none; }
  .int-hub-glow         { display: none; }
  .demo-section         { grid-template-columns: 1fr; gap: 48px; padding: 60px 48px; }
  .demo-body            { max-width: 100%; }
}
@media (max-width: 768px) {
  .nav-links, .nav-cta, .nav-login  { display: none; }
  .nav-hamburger        { display: flex; }
  .nav-inner            { padding: 0 24px; }
  .hero                 { padding-top: 164px; padding-bottom: 72px; }
  .hero-graffiti        { opacity: 0.08; }
  .metrics-strip-full   { grid-template-columns: repeat(3, 1fr); }
  .metric-item:nth-child(3) { border-right: none; }
  .capability-grid      { grid-template-columns: 1fr; }
  .section-problem, .section-tabs, .section-capabilities { padding: 72px 0; }
  .section-rrn, .section-integrations, .section-testimonials, .section-final-cta { padding: 80px 0; }
  .container            { padding: 0 24px; }
  /* Footer: 2-column at 768px */
  .footer-cols          { grid-template-columns: 1fr 1fr; }
  .footer-newsletter    { grid-column: 1 / -1; max-width: 100%; }
  .footer-bottom        { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-social        { flex-wrap: wrap; }
  .tab-buttons          { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .tab-btn              { white-space: nowrap; flex-shrink: 0; }
  .decision-left        { padding: 32px 20px; }
  .decision-right       { padding: 32px 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* overflow:hidden (not clip) — establishes BFC so child table overflow
     is properly contained and does not bleed into page horizontal scroll */
  .decision-panel       { overflow: hidden; }
  .sku-table            { min-width: 380px; }
  /* Integrations hub: replace hub-and-spoke with 2-column category grid */
  .integrations-hub {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 0;
  }
  .int-hub-node-wrap  { display: none; }
  .int-spoke-svg      { display: none; }
  /* Top and bottom clusters span full width */
  .int-cluster-top,
  .int-cluster-bottom {
    grid-column: 1 / -1;
    width: auto;
    max-width: none;
    position: static;
    transform: none;
    text-align: left;
    align-items: flex-start;
  }
  .int-cluster-bottom { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; }
  /* Left + right clusters sit side by side */
  .int-cluster-left,
  .int-cluster-right {
    width: auto;
    max-width: none;
    position: static;
    transform: none;
  }
  /* Left cluster (6 logos): 2-per-row internally */
  .int-cluster-left {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-content: start;
  }
  .int-cluster-left .int-cluster-title { grid-column: 1 / -1; }
  /* Right cluster (3 named): stacked, full width */
  .int-cluster-right { display: flex; flex-direction: column; gap: 8px; }
  /* Tighten pill sizing on mobile */
  .int-logo-pill { height: 44px; padding: 0 12px; border-radius: 10px; min-width: 0; }
  .int-pill-img  { height: 22px; flex-shrink: 0; }
  .int-pill-name { font-size: 12px; white-space: normal; overflow-wrap: break-word; min-width: 0; }
  .int-cluster-left, .int-cluster-right { min-width: 0; overflow: hidden; }
  .integrations-hub { overflow: hidden; }
  .testimonials-grid    { grid-template-columns: 1fr; gap: 16px; }
  .rrn-terminal         { margin-top: 40px; }
  .section-demo-wrapper { padding: 0 16px; margin: 64px auto; }
  .demo-section {
    padding: 48px 28px;
    border-radius: 28px;
    overflow: clip;        /* preserves border-radius, doesn't clip children */
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .demo-h2              { font-size: clamp(26px, 7vw, 36px); word-wrap: break-word; overflow-wrap: break-word; }
  .demo-body            { font-size: 15px; max-width: 100%; }
  .demo-visual          { width: 100%; }
  .demo-card            { width: 100%; max-width: 100%; box-sizing: border-box; }
}
@media (max-width: 640px) {
  .bubble { opacity: 0.12 !important; transform: scale(0.6) !important; scale: 1 !important; animation-name: none !important; }
  .bubble.b1 { left: -30px !important; top: 60px !important; transform-origin: top left; }
  .bubble.b2 { right: -30px !important; top: 50px !important; transform-origin: top right; }
  /* Hide all non-edge bubbles — includes b9–b12 which were missing from this rule */
  .bubble.b3, .bubble.b4, .bubble.b5, .bubble.b6, .bubble.b7, .bubble.b8,
  .bubble.b9, .bubble.b10, .bubble.b11, .bubble.b12 { display: none; }
  .hero-content::before { background: radial-gradient(ellipse 80% 90% at center, rgba(247,248,252,0.97) 55%, transparent 100%); }
  .hero-headline { font-size: clamp(36px, 9vw, 60px); }
  /* Logos: drop to 2 columns on mobile */
  .customer-logos { grid-template-columns: repeat(2, 1fr); gap: 24px 32px; padding: 0 24px; }
  /* Demo CTA: hide the visual card, text+button only */
  .demo-visual  { display: none; }
  .demo-section { padding: 40px 28px; gap: 0; }
  /* Footer: single column at 640px */
  .footer-cols          { grid-template-columns: 1fr; padding: 0 24px; gap: 32px; }
  .footer-newsletter    { grid-column: auto; }
  .footer-bottom        { padding: 24px 24px 36px; }
  .footer-bottom-left   { flex-direction: column; gap: 16px; }
}
@media (max-width: 480px) {
  .hero-logos      { gap: 16px; }
  .customer-logos  { gap: 20px 24px; }
  /* Tabs section — tighten up on very small screens */
  .section-tabs .section-h2 { font-size: clamp(30px, 8vw, 42px); }
  .decision-panel   { border-radius: 20px; }
  .decision-left, .decision-right { padding: 24px 16px; }
}


/* ============================================================
   CERTIFIED BOOKS — Hero variants
   (artifact visual, breadcrumb, pill, stamp, works-with row)
============================================================ */
.hero-breadcrumb {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--signal-blue-soft);
  color: var(--signal-blue);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: 24px;
}

.hero-heading {
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.hero-artifact-wrap {
  position: relative;
}

.detail-artifact {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 8px 48px rgba(47, 75, 255, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
}

.artifact-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-soft);
}

.artifact-header-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.artifact-header-date {
  font-size: 12px;
  color: var(--text-soft);
}

.artifact-check-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
  color: var(--text-main);
}

.artifact-check-item:last-of-type { border-bottom: none; }

.check-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--certified-green-soft);
  color: var(--certified-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
  margin-top: 1px;
}

.check-label { line-height: 1.4; }

.artifact-divider {
  height: 1px;
  background: var(--border-soft);
  margin: 16px 0;
}

.artifact-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.artifact-specialist {
  font-size: 12px;
  color: var(--text-muted);
}

.certified-stamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--certified-green-soft);
  color: var(--certified-green);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 100px;
  border: 1px solid rgba(24, 166, 106, 0.2);
}

.works-with-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.works-with-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.platform-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-main);
}

.highlight { color: var(--signal-blue); }

@media (max-width: 768px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-artifact-wrap { order: -1; }
}

/* ============================================================
   CERTIFIED BOOKS — Section: The Service
============================================================ */
.section-service {
  background: linear-gradient(180deg, #FBFCFF 0%, #F7F8FC 100%);
  padding: 96px 0;
}

.service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.service-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--signal-blue);
  margin-bottom: 16px;
}

.service-h2 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 20px;
}

.service-body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.service-distinction {
  background: var(--surface-blue);
  border-left: 3px solid var(--signal-blue);
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
}

.service-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.service-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
}

.service-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--signal-blue-soft);
  color: var(--signal-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin-bottom: 12px;
}

.service-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}

.service-card-body {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .service-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* ============================================================
   CERTIFIED BOOKS — Section: Scope
============================================================ */
.section-scope {
  background: var(--surface);
  padding: 96px 0;
}

.scope-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}

.scope-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--signal-blue);
  margin-bottom: 12px;
}

.scope-h2 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 16px;
}

.scope-body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-muted);
}

.scope-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.scope-card {
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px;
}

.scope-card-icon {
  font-size: 24px;
  margin-bottom: 16px;
}

.scope-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}

.scope-card-body {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .scope-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CERTIFIED BOOKS — Section: The Value
============================================================ */
.section-value {
  background: var(--bg-main);
  padding: 96px 0;
}

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

.value-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--signal-blue);
  margin-bottom: 16px;
}

.value-h2 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 20px;
}

.value-body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-muted);
}

.value-stats {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.value-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.value-stat-number {
  font-size: 36px;
  font-weight: 900;
  color: var(--signal-blue);
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.value-stat-label {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
}

@media (max-width: 768px) {
  .value-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* ============================================================
   CERTIFIED BOOKS — Section: The Distinction
============================================================ */
.section-distinction {
  background: var(--surface);
  padding: 96px 0;
}

.distinction-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}

.distinction-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--signal-blue);
  margin-bottom: 12px;
}

.distinction-h2 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.distinction-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.distinction-table th {
  background: var(--bg-main);
  padding: 14px 20px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.distinction-table td {
  padding: 16px 20px;
  font-size: 14px;
  color: var(--text-main);
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
  line-height: 1.5;
}

.distinction-table tr:last-child td { border-bottom: none; }

.distinction-table td:first-child {
  font-weight: 600;
  color: var(--ink);
  width: 22%;
}

.distinction-table td.col-closing { color: var(--text-muted); }

.distinction-table td.col-certified { color: var(--certified-green); font-weight: 500; }

@media (max-width: 768px) {
  .distinction-table th,
  .distinction-table td { padding: 12px 14px; font-size: 13px; }
}

/* ============================================================
   CERTIFIED BOOKS — Section: The Process
============================================================ */
.section-process {
  background: var(--bg-main);
  padding: 96px 0;
}

.process-header {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 56px;
}

.process-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--signal-blue);
  margin-bottom: 12px;
}

.process-h2 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.process-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 720px;
  margin: 0 auto;
}

.process-step {
  display: flex;
  gap: 28px;
  padding: 32px 0;
  border-bottom: 1px solid var(--border-soft);
}

.process-step:last-child { border-bottom: none; }

.process-step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--signal-blue);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.process-step-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}

.process-step-body {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .process-step { gap: 16px; padding: 24px 0; }
}

/* ============================================================
   CERTIFIED BOOKS — Audit CTA Section
============================================================ */
.section-audit-cta { padding: 0 0 80px; }

.audit-cta-panel {
  background: var(--dark-panel);
  border-radius: 20px;
  overflow: hidden;
  padding: 0 40px;
}

.audit-cta-inner {
  position: relative;
  display: flex;
  gap: 64px;
  align-items: center;
  padding: 72px 0;
}

.audit-cta-inner::before {
  content: '';
  position: absolute;
  top: -60px;
  left: -80px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47,75,255,0.18) 0%, transparent 70%);
  pointer-events: none;
}

.audit-cta-inner::after {
  content: '';
  position: absolute;
  bottom: -80px;
  right: 0;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(24,166,106,0.12) 0%, transparent 70%);
  pointer-events: none;
}

.audit-cta-content { position: relative; z-index: 1; }

.audit-cta-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 16px;
}

.audit-cta-h2 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 16px;
}

.audit-cta-body {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,0.65);
  max-width: 520px;
  margin-bottom: 32px;
}

.audit-cta-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-cta-blue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--signal-blue);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.18s ease, transform 0.18s ease;
}

.btn-cta-blue:hover {
  background: var(--signal-blue-dark);
  transform: translateY(-1px);
}

.btn-cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.2);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.btn-cta-ghost:hover {
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}

@media (max-width: 768px) {
  .audit-cta-inner {
    flex-direction: column;
    gap: 32px;
    padding: 48px 0;
  }
  .audit-cta-panel { padding: 0 16px; }
}

/* ============================================================
   SCROLL REVEAL (all pages)
   Progressive enhancement: elements are visible by default.
   JS adds .reveal-hidden before observing so no-JS / Design
   Manager preview always shows content immediately.
============================================================ */
.reveal {
  transition: opacity 0.55s ease, transform 0.55s ease;
}

/* Applied by JS only on real pages, before IntersectionObserver */
.reveal-hidden {
  opacity: 0;
  transform: translateY(20px);
}

.reveal.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}


/* ============================================================
   SHARED SECTION LAYOUT UTILITIES
   (used across multiple inner pages)
============================================================ */

.section-pad { padding: 46px 0; }

/* All section backgrounds carry the subtle grid — same 72px rhythm as the hero */
.section-light {
  background: rgba(255,255,255,0.6);
  background-size: 72px 72px;
}
.section-white {
  background-image:
    linear-gradient(rgba(47,75,255,0.010) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,75,255,0.009) 1px, transparent 1px);
  background-size: 72px 72px;
}
.section-dark {
  background-color: var(--dark-panel);
  background-image:
    linear-gradient(rgba(255,255,255,0.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.034) 1px, transparent 1px);
  background-size: 72px 72px;
}

.section-header { max-width: 720px; margin-bottom: 56px; }
.section-header-center { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.section-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--signal-blue);
  margin-bottom: 12px;
}
.section-eyebrow-light { color: rgba(255,255,255,0.5); }
.section-h2 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 16px;
}
.section-h2-light { color: #fff; }
.section-body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-muted);
}
.section-body-light { color: rgba(255,255,255,0.65); }
.section-body + .section-body { margin-top: 16px; }

.hero-content-wide { max-width: 800px; }
.hero-dark {
  background:
    radial-gradient(ellipse 55% 45% at 20% 30%, rgba(47,75,255,0.15) 0%, transparent 60%),
    radial-gradient(ellipse 40% 35% at 82% 20%, rgba(24,166,106,0.08) 0%, transparent 55%),
    var(--dark-panel);
}
.hero-dark .hero-grid-overlay {
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
}
/* Kill the light radial bloom on dark backgrounds */
.hero-dark .hero-content::before,
.section-dark .hero-content::before {
  background: radial-gradient(ellipse 65% 70% at center, rgba(47,75,255,0.10) 0%, transparent 100%);
}
/* Bubble overrides for dark hero — glassmorphic dark treatment */
.hero-dark .bubble {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.11);
  box-shadow: 0 12px 32px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.08);
}
.hero-dark .bubble-label { color: rgba(255,255,255,0.42); }
.hero-dark .bubble-title { color: rgba(255,255,255,0.82); }
.hero-dark .bubble-meta  { color: rgba(255,255,255,0.40); }
.hero-dark .hero-eyebrow { color: rgba(255,255,255,0.55); }
.hero-dark .hero-headline { color: #fff; }
.hero-dark .hero-body { color: rgba(255,255,255,0.7); }
.hero-dark .cta-row .btn-ghost-light { color: rgba(255,255,255,0.8); border-color: rgba(255,255,255,0.25); }
.hero-dark .cta-row .btn-ghost-light:hover { background: rgba(255,255,255,0.08); }

.two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}
.two-col-grid-center { align-items: center; }

.cta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.hero-content .cta-row { justify-content: center; }

/* ============================================================
   BUTTONS
============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--signal-blue);
  color: #fff;
  border: 1.5px solid var(--signal-blue);
}
.btn-primary:hover { background: var(--signal-blue-dark); border-color: var(--signal-blue-dark); transform: translateY(-1px); }
.btn-secondary {
  background: transparent;
  color: var(--signal-blue);
  border: 1.5px solid var(--signal-blue);
}
.btn-secondary:hover { background: var(--signal-blue-soft); transform: translateY(-1px); }
.btn-ghost-light {
  background: transparent;
  color: rgba(255,255,255,0.8);
  border: 1.5px solid rgba(255,255,255,0.25);
}
.btn-ghost-light:hover { border-color: rgba(255,255,255,0.6); color: #fff; }

/* ============================================================
   WHY-BOOKS-BREAK — Breakpoints grid
============================================================ */
.breakpoints-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.breakpoint-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
}
.bp-num {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--signal-blue);
  margin-bottom: 12px;
}
.bp-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
}
.bp-body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 20px;
}
.bp-status {
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 100px;
  margin-top: 8px;
  display: inline-block;
}
.bp-works {
  background: var(--certified-green-soft);
  color: var(--certified-green);
}
.bp-breaks {
  background: rgba(239,68,68,0.08);
  color: #DC2626;
}

/* ============================================================
   WHY-BOOKS-BREAK — Failure modes list
============================================================ */
.failure-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
.failure-item {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  padding: 32px;
  border-bottom: 1px solid var(--border-soft);
  align-items: start;
}
.failure-item-last { border-bottom: none; }
.failure-meta { display: flex; flex-direction: column; gap: 8px; }
.failure-num {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.failure-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.impact-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 100px;
}
.impact-high { background: rgba(239,68,68,0.08); color: #DC2626; }
.impact-medium { background: rgba(245,158,11,0.1); color: #D97706; }
.impact-orange { background: rgba(249,115,22,0.08); color: #EA580C; }
.failure-detail p { font-size: 14px; line-height: 1.7; color: var(--text-muted); }

/* Ledger block (payout reconciliation visual) */
.ledger-block {
  background: var(--dark-panel);
  border-radius: 8px;
  padding: 16px 20px;
  margin-top: 16px;
  font-family: 'SF Mono', 'Fira Code', monospace;
}
.ledger-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 12px;
}
.ledger-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  padding: 4px 0;
}
.ledger-neg { color: rgba(239,68,68,0.85); }
.ledger-total {
  color: var(--certified-green);
  font-weight: 700;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* ============================================================
   WHY-BOOKS-BREAK — Compare table (sync vs reconciliation)
============================================================ */
.compare-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 40px;
}
.compare-col { padding: 32px; }
.compare-col-basic { background: var(--bg-main); }
.compare-col-webgility {
  background: var(--surface);
  border-left: 1px solid var(--border);
}
.compare-col-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 8px;
}
.compare-col-webgility .compare-col-label { color: var(--signal-blue); }
.compare-col-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}
.compare-list { list-style: none; }
.compare-list li {
  font-size: 14px;
  line-height: 1.5;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.compare-list li:last-child { border-bottom: none; }
.compare-list li::before { flex-shrink: 0; font-size: 13px; font-weight: 700; }
.compare-no::before { content: '✗'; color: var(--text-soft); }
.compare-no { color: var(--text-muted); }
.compare-yes::before { content: '✓'; color: var(--certified-green); }
.compare-yes { color: var(--ink); }

/* ============================================================
   WHY-BOOKS-BREAK — Decision cards
============================================================ */
.decisions-list { display: flex; flex-direction: column; gap: 16px; }
.decision-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 20px 24px;
}
.decision-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(239,68,68,0.8);
  margin-bottom: 4px;
}
.decision-action {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}
.decision-consequence {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
}

/* ============================================================
   AUDIT CARD (shared — pricing, talk-to-experts, etc.)
============================================================ */
.audit-card {
  background: var(--signal-blue-soft);
  border: 1px solid rgba(47,75,255,0.15);
  border-radius: 16px;
  padding: 32px;
}
.audit-card-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--signal-blue);
  margin-bottom: 20px;
}
.audit-card-list {
  list-style: none;
  margin-bottom: 24px;
}
.audit-card-list li {
  font-size: 14px;
  color: var(--ink-soft);
  padding: 8px 0;
  border-bottom: 1px solid rgba(47,75,255,0.1);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}
.audit-card-list li::before { content: '✓'; color: var(--signal-blue); font-weight: 700; flex-shrink: 0; }
.audit-card-list li:last-child { border-bottom: none; }
.audit-card-price { margin-top: 4px; }
.audit-price-strike {
  font-size: 13px;
  color: var(--text-soft);
  text-decoration: line-through;
  margin-right: 8px;
}
.audit-price-free {
  font-size: 14px;
  font-weight: 700;
  color: var(--certified-green);
}

@media (max-width: 768px) {
  .breakpoints-grid { grid-template-columns: 1fr; }
  .failure-item { grid-template-columns: 1fr; gap: 12px; }
  .compare-table { grid-template-columns: 1fr; }
  .compare-col-webgility { border-left: none; border-top: 1px solid var(--border); }
  .two-col-grid { grid-template-columns: 1fr; gap: 48px; }
}


/* ============================================================
   TALK-TO-EXPERTS — Hero layout
============================================================ */
.tte-hero-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 64px;
  align-items: start;
  padding: 80px 0;
}
.tte-outcome-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 16px;
}
.tte-outcome-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal-blue);
  margin-bottom: 20px;
}
.tte-outcome-step {
  display: flex;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.tte-outcome-step:last-child { border-bottom: none; }
.tte-outcome-step strong { display: block; font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.tte-outcome-step p { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.5; margin: 0; }
.tte-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--signal-blue);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tte-free-banner {
  background: rgba(24,166,106,0.08);
  border: 1px solid rgba(24,166,106,0.2);
  border-radius: 12px;
  padding: 16px 20px;
}
.tte-free-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--certified-green);
  margin-bottom: 4px;
}
.tte-free-price {
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.02em;
}
.tte-free-price s { color: rgba(255,255,255,0.35); font-size: 13px; font-weight: 400; margin-right: 6px; }

/* TALK-TO-EXPERTS — Four areas */
.four-areas-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.area-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
}
.area-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signal-blue);
  margin-bottom: 10px;
}
.area-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
}
.area-body { font-size: 14px; line-height: 1.7; color: var(--text-muted); }

/* TALK-TO-EXPERTS — Journey steps */
.journey-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 680px;
}
.journey-step {
  padding: 32px 0;
  border-bottom: 1px solid var(--border-soft);
  padding-left: 24px;
  border-left: 2px solid var(--border);
}
.journey-step-active { border-left-color: var(--certified-green); }
.journey-step:last-child { border-bottom: none; }
.journey-step-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.journey-step-num-active { color: var(--certified-green); }
.journey-step-title { font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.journey-step-body { font-size: 14px; line-height: 1.7; color: var(--text-muted); }

/* Status pills */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--signal-blue-soft);
  color: var(--signal-blue);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 100px;
  margin-top: 16px;
}
.status-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.status-pill-green { background: var(--certified-green-soft); color: var(--certified-green); }

/* TALK-TO-EXPERTS — Qual list */
.qual-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.qual-list li {
  font-size: 15px;
  color: var(--ink-soft);
  padding: 12px 0;
  border-bottom: 1px solid var(--border-soft);
  line-height: 1.5;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.qual-list li:last-child { border-bottom: none; }
.qual-list li::before { content: '→'; color: var(--signal-blue); font-weight: 700; flex-shrink: 0; }

/* TALK-TO-EXPERTS — Testimonials */
.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.testimonial-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 32px;
}
.testimonial-channels {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(47,75,255,0.12);
  color: rgba(255,255,255,0.7);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: 20px;
}
.testimonial-channels-green { background: rgba(24,166,106,0.12); color: var(--certified-green); }
.testimonial-quote {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,0.8);
  font-style: italic;
  margin-bottom: 16px;
  border: none;
  padding: 0;
}
.testimonial-attr { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.5); }
.testimonial-stats {
  display: flex;
  gap: 32px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.testimonial-stat { display: flex; flex-direction: column; gap: 4px; }
.stat-val { font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.stat-lbl { font-size: 12px; color: rgba(255,255,255,0.4); }
.testimonial-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(24,166,106,0.1);
  color: var(--certified-green);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 100px;
  margin-top: 20px;
}

/* TALK-TO-EXPERTS — Booking section */
.booking-details { display: flex; flex-direction: column; gap: 0; margin-top: 32px; }
.booking-detail {
  padding: 20px 0;
  border-bottom: 1px solid var(--border-soft);
}
.booking-detail:last-child { border-bottom: none; }
.booking-detail-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 4px;
}
.booking-detail-title { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.booking-detail-title-promo { color: var(--certified-green); }
.booking-detail-body { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.booking-detail-promo { background: var(--certified-green-soft); border-radius: 8px; padding: 16px 20px; margin-top: 8px; }
.booking-cta-panel {
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: start;
}
.booking-cta-title { font-size: 20px; font-weight: 700; color: var(--ink); }
.booking-cta-body { font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.booking-phone { font-size: 13px; color: var(--text-muted); text-align: center; }
.booking-phone strong { color: var(--ink); }
.booking-badges { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }

@media (max-width: 768px) {
  .tte-hero-grid { grid-template-columns: 1fr; gap: 40px; padding: 60px 0 40px; }
  .four-areas-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   PRICING PAGE
============================================================ */
.pricing-hero { padding: 80px 0 48px; text-align: center; }
.pricing-hero-h1 {
  font-size: clamp(36px, 6vw, 60px);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--ink);
  max-width: 640px;
/*   margin: 0 auto 16px; */
}
.pricing-hero-body {
  font-size: 18px;
  color: var(--text-muted);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Books package / audit promo banner */
.audit-promo-banner {
  background: rgba(24,166,106,0.05);
  border: 1px solid rgba(24,166,106,0.20);
  border-radius: 20px;
  padding: 36px 48px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
  margin-bottom: 0;
}
.audit-promo-left { flex: 1; min-width: 0; }
.audit-promo-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--certified-green-dark);
  margin-bottom: 8px;
}
.audit-promo-headline {
  font-size: 24px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.025em;
  margin-bottom: 10px;
  line-height: 1.2;
}
.audit-promo-price { margin-bottom: 12px; }
.audit-strike { text-decoration: line-through; color: var(--text-soft); font-size: 15px; margin-right: 8px; }
.audit-free { color: var(--certified-green-dark); font-weight: 800; font-size: 18px; }
.audit-promo-desc {
  font-size: 14px;
  font-weight: 450;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 16px;
  max-width: 560px;
}
.audit-promo-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 40px;
  margin-top: 4px;
}
.audit-promo-items { display: flex; flex-direction: column; gap: 6px; }
.audit-promo-item {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  display: flex;
  align-items: flex-start;
  gap: 7px;
  line-height: 1.45;
}
.audit-promo-item::before {
  content: '✓';
  color: var(--certified-green);
  font-weight: 800;
  font-size: 11px;
  flex-shrink: 0;
  margin-top: 2px;
}
.audit-promo-cta { flex-shrink: 0; padding-top: 8px; }

/* Toggles */
.pricing-toggles {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
/* Primary toggle — platform choice */
.toggle-group {
  display: flex;
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 100px;
  overflow: hidden;
}
.toggle-btn {
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  background: transparent;
  border: none;
  font-family: inherit;
  transition: all 0.15s;
}
.toggle-btn.active { background: var(--surface); color: var(--ink); }
/* Secondary row — billing cadence */
.pricing-billing-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pricing-billing-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.toggle-group-billing .toggle-btn {
  padding: 5px 14px;
  font-size: 11.5px;
  font-weight: 500;
}
.toggle-group-billing .toggle-btn.active {
  background: var(--surface);
  color: var(--ink);
}

/* Plan cards */
.plans-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
.plan-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.plan-card-popular { border-color: var(--signal-blue); }
.plan-popular-badge {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--signal-blue);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  padding: 5px 14px;
  border-radius: 0 0 10px 10px;
  white-space: nowrap;
}
.plan-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.plan-price {
  font-size: 52px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 4px;
}
.plan-price-custom { font-size: 36px; padding-top: 8px; }
.plan-currency {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-muted);
  vertical-align: top;
  padding-top: 10px;
  display: inline-block;
}
.plan-billing {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.plan-billing-alt { color: var(--text-soft); }
.plan-tagline {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.plan-section-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #2F4BFF;
  margin: 20px 0 10px;
}
.plan-features { list-style: none; flex: 1; }
.plan-features li {
  font-size: 13px;
  color: var(--text-muted);
  padding: 7px 0;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.4;
}
.plan-features li::before { content: '✓'; color: var(--certified-green); font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.plan-features li.plan-feature-plus { color: var(--certified-green); }
.plan-features li.plan-feature-plus::before { color: var(--certified-green); }
.plan-close-item::before { content: '⊕'; color: var(--signal-blue); }
.plan-cta { margin-top: auto; padding-top: 20px; }

/* Plan selector */
.plan-selector-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
  max-width: 900px;
}
.selector-q {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 20px 0 12px;
}
.selector-options { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.sel-btn {
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 100px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.sel-btn:hover { border-color: var(--signal-blue); color: var(--signal-blue); }
.sel-btn.selected { border-color: var(--signal-blue); background: var(--signal-blue-soft); color: var(--signal-blue); }
.sel-result {
  background: var(--signal-blue-soft);
  border: 1px solid rgba(47,75,255,0.15);
  border-radius: 16px;
  padding: 28px;
}
.sel-result-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal-blue);
  margin-bottom: 8px;
}
.sel-result-plan {
  font-size: 24px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.sel-result-reason { font-size: 14px; color: var(--ink-soft); line-height: 1.6; }
.sel-placeholder {
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px;
  text-align: center;
}
.sel-placeholder-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.3; }
.sel-placeholder p { font-size: 14px; color: var(--text-soft); }

/* Add-ons */
.addons-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 640px;
  margin-top: 32px;
}
.addon-card {
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
}
.addon-price {
  font-size: 28px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.03em;
  margin: 8px 0;
}
.addon-price-period { font-size: 14px; font-weight: 500; color: var(--text-muted); }
.addon-card p { font-size: 13px; color: var(--text-muted); line-height: 1.6; }

/* FAQ */
.faq-list { max-width: 780px; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
  width: 100%;
  padding: 20px 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  text-align: left;
  font-family: inherit;
  gap: 16px;
}
.faq-q::after { content: '+'; color: var(--signal-blue); font-size: 20px; font-weight: 400; flex-shrink: 0; }
details.faq-item[open] .faq-q::after { content: '−'; }
/* Suppress browser default summary triangle */
summary.faq-q { list-style: none; }
summary.faq-q::-webkit-details-marker { display: none; }
.faq-a {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
  padding-bottom: 20px;
  max-width: 680px;
}

@media (max-width: 768px) {
  .plans-grid { grid-template-columns: 1fr; }
  .plan-selector-grid { grid-template-columns: 1fr; }
  .addons-grid { grid-template-columns: 1fr; }
  .audit-promo-banner { flex-direction: column; padding: 28px 24px; gap: 24px; }
  .audit-promo-cols { grid-template-columns: 1fr; }
}

/* ============================================================
   HOW WEBGILITY WORKS — Process flow
   ============================================================ */

.process-flow {
  max-width: 860px;
  margin: 0 auto;
}

.process-step-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 0 32px;
  position: relative;
}

.process-step-item + .process-step-item {
  margin-top: 0;
}

.process-step-left {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.process-step-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--signal-blue);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 1;
}

.process-step-line {
  width: 2px;
  flex: 1;
  background: var(--border);
  margin: 8px 0;
}

.process-step-item:last-child .process-step-line { display: none; }

.process-step-content {
  padding: 0 0 48px 0;
}

.process-step-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signal-blue);
  margin-bottom: 6px;
  margin-top: 12px;
}

.process-step-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.process-step-body {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.7;
}

.process-step-item:last-child .process-step-content { padding-bottom: 0; }

/* Terminal / monospace validation display */
.terminal-block {
  background: #0e1117;
  border-radius: 12px;
  padding: 28px 32px;
  font-family: 'Menlo', 'Monaco', 'Consolas', monospace;
  font-size: 13px;
  line-height: 1.8;
  color: #a8d8b0;
  overflow: hidden;
}

.terminal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.terminal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.terminal-dot-red   { background: #ff5f57; }
.terminal-dot-amber { background: #febc2e; }
.terminal-dot-green { background: #28c840; }

.terminal-title {
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  font-family: 'Menlo', monospace;
  margin-left: 8px;
}

.terminal-row { display: flex; justify-content: space-between; }
.terminal-key { color: rgba(255,255,255,0.45); }
.terminal-val { color: #a8d8b0; }
.terminal-val-warn { color: #febc2e; }
.terminal-val-ok   { color: #28c840; }
.terminal-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.07);
  margin: 12px 0;
}

/* Certified close flow */
.certified-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0;
  align-items: start;
  margin-top: 48px;
}

.cf-step {
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 24px;
}

.cf-step-num {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signal-blue);
  margin-bottom: 10px;
}

.cf-step-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.cf-step-body {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.65;
}

.cf-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  padding-top: 52px;
  color: var(--border);
  font-size: 20px;
}

/* Outcome tiles */
.outcome-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.outcome-tile {
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 32px 28px;
}

.outcome-tile-icon {
  font-size: 28px;
  margin-bottom: 16px;
}

.outcome-tile-title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.outcome-tile-body {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  line-height: 1.65;
}

/* Outcome tiles on light/white backgrounds — override the dark-context defaults */
.section-light .outcome-tile,
.section-white .outcome-tile {
  border-color: var(--border);
}
.section-light .outcome-tile-title,
.section-white .outcome-tile-title {
  color: var(--ink);
}
.section-light .outcome-tile-body,
.section-white .outcome-tile-body {
  color: var(--text-muted);
}

/* How-works hero variation (wide content) */
.hero-content-center {
  max-width: 860px;
  text-align: center;
  margin: 0 auto;
}

.hero-content-center .hero-eyebrow,
.hero-content-center .hero-headline,
.hero-content-center .hero-body { text-align: center; }

.hero-content-center .cta-row { justify-content: center; }

/* Stats strip */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  margin-top: 56px;
}

.stats-strip-item {
  background: var(--bg-main);
  padding: 28px 24px;
  text-align: center;
}

.stats-strip-val {
  font-size: 32px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}

.stats-strip-lbl {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
}

@media (max-width: 768px) {
  .process-step-item { grid-template-columns: 44px 1fr; gap: 0 16px; }
  .certified-flow { grid-template-columns: 1fr; }
  .cf-arrow { padding-top: 0; padding: 8px 0; transform: rotate(90deg); justify-content: center; }
  .outcome-grid { grid-template-columns: 1fr; }
  .stats-strip { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   FEATURE PAGES — shared components
   ============================================================ */

/* 3-column feature grid */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}

.feature-card {
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 24px;
}

.feature-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--signal-blue-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 16px;
}

.feature-card-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.feature-card-body {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.65;
}

/* 2-column feature grid (wide cards) */
.feature-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 48px;
}

.feature-card-lg {
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 36px 32px;
}

.feature-card-lg-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signal-blue);
  margin-bottom: 10px;
}

.feature-card-lg-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}

.feature-card-lg-body {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
}

/* Spec / data row table */
.spec-table {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 32px;
}

.spec-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  border-bottom: 1px solid var(--border);
}

.spec-row:last-child { border-bottom: none; }

.spec-label {
  padding: 16px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-main);
  border-right: 1px solid var(--border);
}

.spec-value {
  padding: 16px 20px;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
}

/* Highlight callout (single-stat emphasis) */
.callout-block {
  background: var(--signal-blue-soft);
  border: 1px solid rgba(47,75,255,0.15);
  border-radius: 16px;
  padding: 36px 40px;
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

.callout-stat {
  flex-shrink: 0;
  text-align: center;
}

.callout-stat-val {
  font-size: 52px;
  font-weight: 900;
  color: var(--signal-blue);
  letter-spacing: -0.04em;
  line-height: 1;
}

.callout-stat-lbl {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 6px;
}

.callout-body h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.callout-body p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
}

/* Dark feature tiles (for dark section backgrounds) */
.dark-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}

.dark-feature-tile {
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 32px 24px;
}

.dark-feature-num {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(47,75,255,0.7);
  margin-bottom: 12px;
}

.dark-feature-title {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.dark-feature-body {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  line-height: 1.65;
}

/* Vs competitor — side-by-side row comparison */
.vs-table {
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  margin-top: 40px;
}

.vs-table-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  background: var(--bg-main);
  border-bottom: 1px solid var(--border);
  padding: 14px 20px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.vs-table-header .vs-col-wg { color: var(--signal-blue); }

.vs-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  border-bottom: 1px solid var(--border);
  padding: 16px 20px;
  align-items: center;
}

.vs-row:last-child { border-bottom: none; }
.vs-row:nth-child(even) { background: rgba(0,0,0,0.015); }

.vs-feature-name {
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}

.vs-check-yes { color: #16a34a; font-weight: 700; font-size: 15px; }
.vs-check-no  { color: var(--text-muted); font-size: 15px; }
.vs-check-partial { color: #d97706; font-size: 13px; font-weight: 600; }

/* Page header with inline breadcrumb-style nav */
.page-intro-strip {
  background: var(--bg-main);
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
}

.page-intro-strip-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
}

.page-intro-strip-inner a { color: var(--signal-blue); text-decoration: none; }
.page-intro-strip-inner span { opacity: 0.4; }

@media (max-width: 768px) {
  .feature-grid { grid-template-columns: 1fr; }
  .feature-grid-2 { grid-template-columns: 1fr; }
  .dark-feature-grid { grid-template-columns: 1fr; }
  .callout-block { flex-direction: column; padding: 28px 24px; }
  .vs-table-header { grid-template-columns: 1fr 1fr 1fr; }
  .vs-row { grid-template-columns: 1fr 1fr 1fr; }
  .spec-row { grid-template-columns: 1fr; }
  .spec-label { border-right: none; border-bottom: 1px solid var(--border); }
}


/* ============================================================
   HOW WEBGILITY WORKS — Scroll narrative (interactive)
   GSAP ScrollTrigger pinned stage + morphing transaction card.
   All selectors prefixed hww- to avoid collision with Signal Blue.
   Dark-card palette intentionally overrides the light SB theme
   for this immersive section.
   ============================================================ */

/* ── Keyframe animations ─────────────────────────────────── */
@keyframes hww-flowPulse {
  from { left: -40px; }
  to   { left: 100%; }
}
@keyframes hww-connSlide {
  from { left: -5px; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  to   { left: calc(100% + 5px); opacity: 0; }
}
@keyframes hww-moveAlongLine {
  from { top: 0; background: #FF5500; }
  to   { top: calc(100% - 7px); background: #22C55E; }
}

/* ── Narrative scroll container (natural height) ─────────── */
.hww-narrative { position: relative; height: auto; }

/* ── Two-column stage: left scrolls naturally, right is sticky */
.hww-pin-stage {
  position: relative;
  overflow: visible;
  display: grid;
  grid-template-columns: 1fr minmax(340px, 480px);
  gap: 60px;
  align-items: start;
  padding: 80px 60px 120px 80px;
  background: #0A0A0B;
}

/* ── Caption layer (left column — natural scroll) ─────────── */
.hww-caption-layer {
  position: relative;
  height: auto;
  z-index: 20;
}
.hww-beat-cap {
  position: relative;
  opacity: 0;
  transform: translateY(30px);
  pointer-events: auto;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center;
  min-height: 70vh;
  padding: 60px 0;
}
.hww-beat-cap-step {
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  color: #FF5500; margin-bottom: 12px;
}
.hww-beat-cap-step.service { color: #60A5FA; }
.hww-beat-cap h2 {
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 900; letter-spacing: -0.035em;
  color: #F5F5F7; line-height: 1.12;
  margin-bottom: 14px; max-width: 520px;
}
.hww-beat-cap p {
  font-size: clamp(13px, 1.2vw, 15px);
  color: #A1A1AA; max-width: 420px;
  line-height: 1.6; font-weight: 300;
}

/* ── Visual stage (right column — sticky) ─────────────────── */
.hww-visual-stage {
  position: sticky;
  top: 15vh;
  z-index: 10;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  height: auto;
  overflow: visible;
}

/* ── Transaction card shell ───────────────────────────────── */
.hww-tx-card {
  position: relative;
  width: 100%; max-width: 480px;
  background: #111113;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  overflow: visible;
  will-change: transform, opacity;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.05),
    0 24px 64px rgba(0,0,0,0.5),
    0 0 80px rgba(255,85,0,0);
  transition: box-shadow 0.6s ease, border-color 0.6s ease;
  opacity: 0;
  transform: translateY(20px) scale(0.97);
}
.hww-tx-card.glow-orange {
  border-color: rgba(255,85,0,0.22);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05),
              0 24px 64px rgba(0,0,0,0.5),
              0 0 80px rgba(255,85,0,0.14);
}
.hww-tx-card.glow-green {
  border-color: rgba(34,197,94,0.3);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05),
              0 24px 64px rgba(0,0,0,0.5),
              0 0 80px rgba(34,197,94,0.12);
}

.hww-tx-header {
  padding: 13px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: #18181B;
  display: flex; justify-content: space-between; align-items: center;
  border-radius: 12px 12px 0 0;
}
.hww-tx-thread {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 10px; letter-spacing: 0.08em; color: #52525B;
}
.hww-tx-thread strong { color: #F5F5F7; font-weight: 500; }
.hww-tx-status {
  font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  padding: 3px 9px; border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.12);
  color: #52525B; background: transparent;
  transition: all 0.5s ease;
}

.hww-tx-body {
  position: relative;
  min-height: 280px;
  overflow: hidden;
}

.hww-tx-state {
  position: absolute; top: 0; left: 0; right: 0;
  padding: 20px;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
}
.hww-tx-state.visible {
  opacity: 1; transform: translateY(0);
  pointer-events: auto;
}
.hww-tx-state.gone {
  opacity: 0; transform: translateY(-10px);
}

.hww-tx-footer {
  padding: 10px 18px;
  border-top: 1px solid rgba(255,255,255,0.07);
  background: #18181B;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 9px; color: #52525B; letter-spacing: 0.06em;
  border-radius: 0 0 12px 12px;
  min-height: 36px; display: flex; align-items: center;
  transition: color 0.4s ease;
}

/* ── Shared card internals ────────────────────────────────── */
.hww-s-label {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  color: #52525B; margin-bottom: 12px;
}
.hww-d-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.07);
  gap: 8px;
}
.hww-d-row:last-child { border-bottom: none; }
.hww-d-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: #A1A1AA; line-height: 1.3;
}
.hww-d-label.bold { font-weight: 600; color: #F5F5F7; }
.hww-d-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.hww-d-val {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 12px; color: #F5F5F7; white-space: nowrap;
}
.hww-d-val.pos  { color: #22C55E; }
.hww-d-val.neg  { color: #EF4444; }
.hww-d-val.bold { font-weight: 600; }

/* ── State 0: Translate — channel packets ────────────────── */
.hww-ch-packets { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.hww-ch-pkt {
  background: #18181B;
  border: 1px solid rgba(255,255,255,0.07); border-radius: 8px;
  padding: 10px 14px;
  display: flex; align-items: baseline; gap: 10px;
}
.hww-ch-pkt-name {
  font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  color: #52525B; width: 56px; flex-shrink: 0;
}
.hww-ch-pkt-raw  { font-size: 12px; color: #A1A1AA; font-style: italic; flex: 1; line-height: 1.3; }
.hww-ch-pkt-arrow {
  color: #FF5500; font-size: 14px; flex-shrink: 0;
  opacity: 0; transition: opacity 0.3s ease;
}
.hww-ch-pkt-result {
  font-size: 11px; font-family: 'JetBrains Mono', 'Fira Code', monospace;
  color: #F5F5F7; font-style: normal; flex-shrink: 0;
  opacity: 0; transition: opacity 0.3s ease;
}

.hww-flow-pulse {
  height: 1px; position: relative; overflow: hidden;
  background: rgba(255,85,0,0.15); margin: 10px 0;
}
.hww-flow-pulse::after {
  content: '';
  position: absolute; top: -1px; left: -40px;
  width: 40px; height: 3px;
  background: linear-gradient(to right, transparent, #FF5500, transparent);
  animation: hww-flowPulse 1.4s ease-in-out infinite;
}

/* Pause looping micro-animations when their parent state is off-screen —
   prevents invisible elements from burning GPU cycles during scroll. */
.hww-tx-state:not(.visible) .hww-flow-pulse::after,
.hww-tx-state:not(.visible) .hww-coa-conn-dot {
  animation-play-state: paused;
}

/* ── State 2: Contextualize — COA mapping ────────────────── */
.hww-coa-map { display: flex; flex-direction: column; gap: 0; }
.hww-coa-row {
  display: flex; align-items: center;
  padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.07);
}
.hww-coa-row:last-child { border-bottom: none; }
.hww-coa-from { font-size: 12px; color: #A1A1AA; flex: 1; font-style: italic; }
.hww-coa-connector {
  display: flex; align-items: center; gap: 4px;
  padding: 0 10px; flex-shrink: 0;
}
.hww-coa-conn-line {
  width: 28px; height: 1px; background: #FF5500; opacity: 0.5;
  position: relative; overflow: hidden;
}
.hww-coa-conn-dot {
  position: absolute; width: 5px; height: 5px;
  background: #FF5500; border-radius: 50%;
  top: -2px; left: -5px;
  animation: hww-connSlide 1.2s ease-in-out infinite;
}
.hww-coa-arrow { color: #FF5500; font-size: 10px; }
.hww-coa-to {
  font-size: 11px; font-family: 'JetBrains Mono', 'Fira Code', monospace;
  color: #F5F5F7; font-weight: 500; flex: 1; text-align: right;
}

/* ── State 3: Post — journal entry ───────────────────────── */
.hww-journal-head {
  display: grid; grid-template-columns: 1fr 58px 58px;
  padding: 0 0 8px; border-bottom: 1px solid rgba(255,255,255,0.07); margin-bottom: 4px;
}
.hww-jh-col {
  font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase;
  font-family: 'JetBrains Mono', 'Fira Code', monospace; color: #52525B;
}
.hww-jh-col:not(:first-child) { text-align: right; }
.hww-j-row {
  display: grid; grid-template-columns: 1fr 58px 58px;
  padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.07); align-items: start;
}
.hww-j-row:last-child { border-bottom: none; }
.hww-j-acc { font-size: 11.5px; color: #A1A1AA; line-height: 1.3; }
.hww-j-acc small {
  display: block; font-size: 9px; color: #52525B;
  font-family: 'JetBrains Mono', 'Fira Code', monospace; margin-top: 1px;
}
.hww-j-dr, .hww-j-cr {
  font-size: 11px; font-family: 'JetBrains Mono', 'Fira Code', monospace; text-align: right;
}
.hww-j-dr { color: #F5F5F7; }
.hww-j-cr { color: #A1A1AA; }
.hww-j-empty { color: #52525B; }

.hww-post-stamp {
  position: absolute; top: 18px; right: 18px;
  font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  padding: 4px 10px;
  border: 1.5px solid #22C55E; border-radius: 4px; color: #22C55E;
  opacity: 0; transform: rotate(-8deg) scale(0.85);
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none; z-index: 5;
}
.hww-post-stamp.stamped { opacity: 1; transform: rotate(-2deg) scale(1); }

/* ── State 4: Handle exceptions ──────────────────────────── */
.hww-ex-rows { display: flex; flex-direction: column; gap: 0; }
.hww-ex-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.07);
}
.hww-ex-row:last-child { border-bottom: none; }
.hww-ex-badge {
  font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  padding: 2px 7px; border-radius: 100px;
  flex-shrink: 0; margin-top: 1px; white-space: nowrap;
  transition: all 0.4s ease;
}
.hww-ex-badge.ok   { color: #22C55E; background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.2); }
.hww-ex-badge.res  { color: #22C55E; background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.2); }
.hww-ex-badge.flag { color: #F59E0B; background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.2); }
.hww-ex-desc { font-size: 11.5px; color: #A1A1AA; line-height: 1.45; }
.hww-ex-zero {
  margin-top: 10px; padding: 8px 12px;
  background: rgba(34,197,94,0.12); border-radius: 6px;
  font-size: 10px; color: #22C55E;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

/* ── State 5: Certify — rubber stamp ─────────────────────── */
.hww-cert-rows { display: flex; flex-direction: column; gap: 0; margin-bottom: 14px; }
.hww-cert-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.07);
  font-size: 12px; color: #A1A1AA;
}
.hww-cert-row:last-child { border-bottom: none; }
.hww-cert-icon {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: #22C55E;
}
.hww-cert-footer-row {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.07); margin-top: 2px;
}
.hww-cert-by { font-size: 11px; color: #52525B; }
.hww-cert-by strong { display: block; color: #F5F5F7; font-weight: 500; margin-bottom: 2px; }

.hww-rubber-stamp {
  display: flex; flex-direction: column; align-items: center;
  padding: 7px 14px;
  border: 2px double rgba(34,197,94,0.5); border-radius: 4px;
  opacity: 0; transform: rotate(-10deg) scale(0.7);
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.hww-rubber-stamp.stamped { opacity: 1; transform: rotate(-3deg) scale(1); }
.hww-rs-top {
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  font-family: 'JetBrains Mono', 'Fira Code', monospace; color: #22C55E;
}
.hww-rs-date {
  font-size: 10px; font-family: 'JetBrains Mono', 'Fira Code', monospace;
  color: #22C55E; margin-top: 2px;
}

/* ── State 6: Audit trail ────────────────────────────────── */
.hww-audit-trail { display: flex; flex-direction: column; gap: 0; }
.hww-at-row { padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.07); }
.hww-at-row:last-child { border-bottom: none; }
.hww-at-key {
  font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase;
  font-family: 'JetBrains Mono', 'Fira Code', monospace; color: #52525B; margin-bottom: 3px;
}
.hww-at-val { font-size: 11.5px; color: #A1A1AA; line-height: 1.4; }
.hww-at-val strong { color: #F5F5F7; font-weight: 500; }

/* ── State 7: Close package / Report ─────────────────────── */
.hww-report-pkg { display: flex; flex-direction: column; gap: 0; margin-bottom: 12px; }
.hww-rp-row {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.07);
}
.hww-rp-row:last-child { border-bottom: none; }
.hww-rp-key {
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  font-family: 'JetBrains Mono', 'Fira Code', monospace; color: #52525B;
  width: 80px; flex-shrink: 0; padding-top: 1px;
}
.hww-rp-val { font-size: 11.5px; color: #A1A1AA; line-height: 1.4; }
.hww-rp-val strong { color: #F5F5F7; font-weight: 500; }
.hww-insight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hww-ig {
  background: #18181B; border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px; padding: 10px 12px;
}
.hww-ig-label {
  font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase;
  font-family: 'JetBrains Mono', 'Fira Code', monospace; color: #52525B; margin-bottom: 4px;
}
.hww-ig-val { font-size: 15px; font-weight: 700; color: #F5F5F7; letter-spacing: -0.02em; }
.hww-ig-sub { font-size: 10px; font-family: 'JetBrains Mono', 'Fira Code', monospace; margin-top: 2px; }
.hww-ig-sub.up   { color: #22C55E; }
.hww-ig-sub.down { color: #EF4444; }
.hww-ig-sub.dim  { color: #52525B; }

/* ── Satellite elements ───────────────────────────────────── */
.hww-sat-channel {
  position: absolute;
  background: #18181B; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; padding: 10px 14px;
  font-size: 11px; color: #A1A1AA;
  white-space: nowrap; opacity: 0; pointer-events: none;
  z-index: 15;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.hww-sat-channel .hww-sat-ch-name {
  font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase;
  font-family: 'JetBrains Mono', 'Fira Code', monospace; color: #52525B; margin-bottom: 4px;
}
.hww-sat-qb {
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-left: -40px;
  width: 80px;
  opacity: 0;
  pointer-events: none;
  z-index: 20;
}
.hww-sat-qb-icon {
  width: 48px; height: 48px; border-radius: 10px;
  background: linear-gradient(135deg, #2CA01C, #1D7A14);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 900; color: white;
  margin: 0 auto 6px;
}
.hww-sat-qb-label {
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  font-family: 'JetBrains Mono', 'Fira Code', monospace; color: #52525B; text-align: center;
}
.hww-sat-connect-line {
  position: absolute;
  bottom: 86px;
  left: 50%;
  margin-left: -1px;
  width: 2px;
  height: 36px;
  background: linear-gradient(to bottom, rgba(255,85,0,0.8), rgba(34,197,94,0.5));
  opacity: 0;
  transform-origin: top;
  transform: scaleY(0);
  z-index: 20;
}
.hww-sat-connect-dot {
  position: absolute; top: 0; left: -3px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #FF5500; box-shadow: 0 0 8px #FF5500;
  animation: hww-moveAlongLine 0.8s ease-in-out infinite;
}

/* ── Step progress dots (inside .hww-visual-stage) ───────── */
.hww-step-dots {
  display: flex; gap: 8px; z-index: 20;
  margin-top: 20px;
}
.hww-step-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.12); transition: all 0.4s ease;
}
.hww-step-dot.active { background: #FF5500; transform: scale(1.3); }

/* ── Responsive: tablet + mobile — static stacked steps ─────
   Mobile layout: card is sticky at top (position: sticky), captions stack below.
   IntersectionObserver in JS advances beats as captions scroll into view.
   No GSAP pin — the pin would block scroll. Card animation still runs.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Collapse scroll container */
  .hww-narrative { height: auto; }

  /* Flex column: visual stage floats to top (order 1), dots (order 2), captions (order 3) */
  .hww-pin-stage {
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 0;
    overflow: visible;
  }

  /* Visual stage: show it and make it sticky — the card stays in view while captions scroll */
  .hww-visual-stage {
    display: flex;
    order: 1;
    position: sticky;
    top: 80px;
    height: auto;
    z-index: 20;
    padding: 32px 0 16px;
    background: linear-gradient(to bottom, #09090B 85%, transparent);
  }

  /* Step dots: centered below the sticky card, in normal flow */
  .hww-step-dots {
    display: flex;
    order: 2;
    position: static;
    justify-content: center;
    margin-top: 0;
    padding: 0 0 24px;
  }

  /* Caption layer: stacks after visual stage + dots */
  .hww-caption-layer {
    order: 3;
    position: relative;
    height: auto;
    min-height: 0;
    padding: 0 40px;
  }

  /* Card visible immediately on mobile — no GSAP entrance animation */
  .hww-tx-card { opacity: 1; transform: none; }

  /* All 8 beats visible, stacked with dividers.
     No !important — GSAP skips caption crossfade on mobile, so CSS opacity wins. */
  .hww-beat-cap {
    position: relative;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    min-height: 0;
    padding: 56px 0 52px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .hww-beat-cap:last-child { border-bottom: none; padding-bottom: 64px; }

  /* Override: show all subsequent beat caps */
  .hww-beat-cap + .hww-beat-cap { display: flex; }
}

@media (max-width: 640px) {
  .hww-caption-layer { padding: 0 20px; }
  .hww-beat-cap      { padding: 44px 0 40px; }
  .hww-beat-cap h2   { font-size: clamp(22px, 7vw, 32px); }
  /* Fix 3: give the sticky card breathing room on narrow screens */
  .hww-visual-stage  { padding: 24px 16px 16px; }
}

/* ============================================================
   HOW-WEBGILITY-WORKS — Pinned Scroll Narrative
   All selectors prefixed bp- to avoid collisions.
   One pinned stage, one GSAP timeline scrubbed by ScrollTrigger.
   880vh scroll · 8 beats · elements move through space.
   ============================================================ */

/* ── Scroll container ───────────────────────────────────────── */
.bp-narrative {
  position: relative;
  height: 880vh;
  background: #06080E;
}

/* ── Pinned stage — full viewport, locked while scrolling ───── */
/* position:relative here; GSAP ScrollTrigger upgrades to fixed during pin.
   Do NOT use sticky — it conflicts with GSAP's pin mechanism. */
.bp-stage {
  position: relative;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #06080E; /* Opaque so hero doesn't bleed through when GSAP pins to fixed */
}

/* Blueprint grid — fixed behind everything */
.bp-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(59,130,246,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,0.045) 1px, transparent 1px),
    linear-gradient(rgba(59,130,246,0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,0.09) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 200px 200px, 200px 200px;
  background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
}

/* ── Step sidebar nav — left side ──────────────────────────── */
.bp-sidenav {
  position: absolute;
  left: 64px;
  top: 50%;
  transform: translateY(-50%);
  width: 220px;
  z-index: 30;
  pointer-events: none;
}

.bp-nav-item {
  padding: 9px 0 9px 14px;
  border-left: 2px solid rgba(59,130,246,0.12);
  margin-bottom: 3px;
  pointer-events: auto;
  cursor: pointer;
}

/* ── Active class fallback (before JS / data-dist is set) ───── */
.bp-nav-item.active { border-left-color: #3B82F6; }
.bp-nav-item.active .bp-nav-num   { color: #3B82F6; }
.bp-nav-item.active .bp-nav-title { color: #F5F5F7; font-size: 15px; font-weight: 700; line-height: 1.3; }
.bp-nav-item.active .bp-nav-desc  { display: block; color: #71717A; }

.bp-nav-num {
  display: block;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(59,130,246,0.3);
  margin-bottom: 3px;
}

.bp-nav-title {
  display: block;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(245,245,247,0.18);
  transition: font-size 0.25s ease, color 0.25s ease, font-weight 0.25s ease;
}

.bp-nav-desc {
  display: none;
  font-size: 11px;
  line-height: 1.55;
  color: #71717A;
  margin-top: 5px;
  max-width: 200px;
}

/* ── Wheel effect: data-dist drives size + brightness ────────── */
/* dist 0 = active (biggest, brightest), dist 7 = faintest/smallest */
.bp-nav-item[data-dist="0"] {
  border-left-color: #3B82F6;
}
.bp-nav-item[data-dist="0"] .bp-nav-num   { color: #3B82F6; }
.bp-nav-item[data-dist="0"] .bp-nav-title {
  color: #F5F5F7;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
.bp-nav-item[data-dist="0"] .bp-nav-desc  { display: block; }

.bp-nav-item[data-dist="1"] {
  border-left-color: rgba(59,130,246,0.40);
}
.bp-nav-item[data-dist="1"] .bp-nav-num   { color: rgba(59,130,246,0.60); }
.bp-nav-item[data-dist="1"] .bp-nav-title {
  color: rgba(245,245,247,0.55);
  font-size: 12px;
  font-weight: 600;
}

.bp-nav-item[data-dist="2"] {
  border-left-color: rgba(59,130,246,0.20);
}
.bp-nav-item[data-dist="2"] .bp-nav-num   { color: rgba(59,130,246,0.35); }
.bp-nav-item[data-dist="2"] .bp-nav-title {
  color: rgba(245,245,247,0.32);
  font-size: 10.5px;
  font-weight: 500;
}

.bp-nav-item[data-dist="3"] .bp-nav-num   { color: rgba(59,130,246,0.22); }
.bp-nav-item[data-dist="3"] .bp-nav-title {
  color: rgba(245,245,247,0.20);
  font-size: 9.5px;
}

.bp-nav-item[data-dist="4"] .bp-nav-title,
.bp-nav-item[data-dist="5"] .bp-nav-title,
.bp-nav-item[data-dist="6"] .bp-nav-title,
.bp-nav-item[data-dist="7"] .bp-nav-title {
  color: rgba(245,245,247,0.10);
  font-size: 9px;
}

.bp-nav-item[data-dist="4"] .bp-nav-num,
.bp-nav-item[data-dist="5"] .bp-nav-num,
.bp-nav-item[data-dist="6"] .bp-nav-num,
.bp-nav-item[data-dist="7"] .bp-nav-num   { color: rgba(59,130,246,0.12); }

/* ── Progress dots — right side ─────────────────────────────── */
.bp-progress {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 30;
}

.bp-pdot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  transition: background 0.3s ease, transform 0.3s ease;
}

.bp-pdot.active {
  background: #3B82F6;
  transform: scale(1.6);
}

/* ── Central product canvas ─────────────────────────────────── */
.bp-canvas {
  position: relative;
  z-index: 10;
  width: min(640px, 88vw);
  height: min(480px, 72vh);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Every beat element is absolutely positioned in the canvas */
.bp-beat-el {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}

/* Beat visibility: driven by .beat-active class toggled in onUpdate.
   CSS transition provides the crossfade; GSAP never sets container opacity.
   beat-active is also placed in HTML on #bp-el0 so beat 0 shows before JS. */
.bp-beat-el.beat-active {
  opacity: 1;
  transition: opacity 0.35s ease;
}

/* ── BEAT 0: Channel ingest ─────────────────────────────────── */
.bp-ingest {
  width: 100%;
  position: relative;
}

.bp-channels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 20px;
}

.bp-ch-node {
  flex: 1;
  background: #0D1B2E;
  border: 1px solid rgba(59,130,246,0.3);
  border-radius: 8px;
  padding: 18px 16px;
  text-align: center;
}

.bp-ch-node-name {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: #3B82F6;
  margin-bottom: 8px;
}

.bp-ch-node-meta {
  font-size: 12px;
  color: #A1A1AA;
  line-height: 1.4;
}

.bp-ch-arrow {
  font-size: 20px;
  color: rgba(59,130,246,0.5);
  flex-shrink: 0;
}

.bp-order-hub {
  background: #060F1E;
  border: 1.5px solid #3B82F6;
  border-radius: 10px;
  padding: 22px 30px;
  text-align: center;
  flex-shrink: 0;
  min-width: 180px;
  box-shadow: 0 0 40px rgba(59,130,246,0.15);
}

.bp-hub-eyebrow {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: #22C55E;
  margin-bottom: 6px;
}

.bp-hub-amount {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #F5F5F7;
  line-height: 1;
  margin-bottom: 6px;
}

.bp-hub-sub {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 10px;
  color: #52525B;
  letter-spacing: 0.05em;
}

/* ── BEAT 1: Line items ─────────────────────────────────────── */
.bp-receipt {
  width: 100%;
}

.bp-receipt-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(59,130,246,0.2);
}

.bp-receipt-title {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: #3B82F6;
}

.bp-receipt-total {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #F5F5F7;
}

.bp-li {
  display: grid;
  grid-template-columns: 14px 1fr 1fr 80px;
  align-items: center;
  gap: 10px 14px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  opacity: 0;
}

.bp-li-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.bp-li-label {
  font-size: 13px;
  color: #F5F5F7;
  font-weight: 500;
}

.bp-li-account {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 10px;
  color: #52525B;
}

.bp-li-amount {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 13px;
  font-weight: 600;
  text-align: right;
}

.bp-li-amount.pos { color: #22C55E; }
.bp-li-amount.neg { color: #EF4444; }

.bp-receipt-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  margin-top: 4px;
  opacity: 0;
}

.bp-receipt-footer-label {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 9px;
  letter-spacing: 0.15em;
  color: #3B82F6;
}

.bp-receipt-footer-badge {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 9px;
  color: #22C55E;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border: 1px solid rgba(34,197,94,0.3);
  border-radius: 3px;
}

/* ── BEAT 2: Inventory sync ─────────────────────────────────── */
.bp-inventory {
  width: 100%;
}

.bp-inv-hero {
  text-align: center;
  margin-bottom: 28px;
}

.bp-inv-sku {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: #3B82F6;
  margin-bottom: 12px;
}

.bp-inv-counter {
  font-size: clamp(52px, 8vw, 72px);
  font-weight: 800;
  letter-spacing: -0.05em;
  color: #F5F5F7;
  line-height: 1;
}

.bp-inv-counter .from { color: #71717A; }
.bp-inv-counter .arrow { color: rgba(59,130,246,0.5); font-size: 0.5em; margin: 0 10px; }
.bp-inv-counter .to { color: #22C55E; }

.bp-inv-sync-badge {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: #22C55E;
  margin-top: 8px;
}

.bp-inv-table { width: 100%; }

.bp-inv-row {
  display: grid;
  grid-template-columns: 1fr 80px 60px 80px 80px;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 13px;
  opacity: 0;
}

.bp-inv-row-head {
  /* Must use the same grid as .bp-inv-row so columns align */
  display: grid;
  grid-template-columns: 1fr 80px 60px 80px 80px;
  align-items: center;
  gap: 12px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 8px;
  letter-spacing: 0.14em;
  color: #3B82F6;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(59,130,246,0.2);
  opacity: 0;
}

.bp-inv-ch { color: #A1A1AA; }
.bp-inv-num { color: #52525B; text-align: right; font-family: 'JetBrains Mono','Fira Code',monospace; font-size: 12px; }
.bp-inv-delta { text-align: right; font-family: 'JetBrains Mono','Fira Code',monospace; font-size: 12px; color: #EF4444; }
.bp-inv-delta.zero { color: #3D3D42; }
.bp-inv-after { text-align: right; font-family: 'JetBrains Mono','Fira Code',monospace; font-size: 12px; color: #22C55E; }
.bp-inv-status { text-align: right; font-family: 'JetBrains Mono','Fira Code',monospace; font-size: 9px; letter-spacing: 0.1em; }
.bp-inv-status.synced { color: #22C55E; }
.bp-inv-status.nc { color: #3D3D42; }

/* ── BEAT 3: Journal entry ──────────────────────────────────── */
.bp-journal {
  width: 100%;
}

.bp-j-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(59,130,246,0.2);
  opacity: 0;
}

.bp-j-title {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: #3B82F6;
}

.bp-j-subtitle {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 9px;
  color: #52525B;
}

.bp-j-cols {
  display: grid;
  grid-template-columns: 1fr 90px 90px;
  gap: 6px;
  padding: 0 0 6px;
  border-bottom: 1px solid rgba(59,130,246,0.12);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 8px;
  letter-spacing: 0.12em;
  color: #3B82F6;
  opacity: 0;
}

.bp-j-cols span:not(:first-child) { text-align: right; }

.bp-j-row {
  display: grid;
  grid-template-columns: 1fr 90px 90px;
  gap: 6px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 13px;
  opacity: 0;
}

.bp-j-acc { color: #A1A1AA; }
.bp-j-acc small { display: block; font-size: 10px; color: #52525B; margin-top: 1px; }
.bp-j-dr { font-family: 'JetBrains Mono','Fira Code',monospace; font-size: 12px; color: #F5F5F7; text-align: right; }
.bp-j-cr { font-family: 'JetBrains Mono','Fira Code',monospace; font-size: 12px; color: #F5F5F7; text-align: right; }
.bp-j-dim { color: #2A2A30; }

.bp-j-balance {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  padding: 10px 20px;
  background: rgba(34,197,94,0.08);
  border: 1px solid rgba(34,197,94,0.3);
  border-radius: 4px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #22C55E;
  opacity: 0;
}

/* ── BEAT 4: Exception pipeline ─────────────────────────────── */
.bp-exceptions {
  width: 100%;
}

.bp-ex-pipeline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 32px;
}

.bp-ex-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #0D1B2E;
  border: 1px solid rgba(59,130,246,0.25);
  border-radius: 8px;
  padding: 16px 18px;
  min-width: 100px;
  opacity: 0;
}

.bp-ex-node-num {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 4px;
}

.bp-ex-node.records .bp-ex-node-num { color: #F5F5F7; }
.bp-ex-node.flagged .bp-ex-node-num { color: #F97316; }
.bp-ex-node.resolved .bp-ex-node-num { color: #22C55E; }
.bp-ex-node.suspense { border-color: rgba(34,197,94,0.4); }
.bp-ex-node.suspense .bp-ex-node-num { color: #22C55E; }

.bp-ex-node-label {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #52525B;
  text-align: center;
  line-height: 1.3;
}

.bp-ex-arrow {
  font-size: 18px;
  color: rgba(59,130,246,0.35);
  margin: 0 8px;
  flex-shrink: 0;
  opacity: 0;
}

.bp-ex-log {
  width: 100%;
}

.bp-ex-item {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  opacity: 0;
}

.bp-ex-badge {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 8px;
  letter-spacing: 0.12em;
  padding: 4px 8px;
  border-radius: 3px;
  text-align: center;
  transition: all 0.3s ease;
}

.bp-ex-badge.flag { background: rgba(249,115,22,0.12); color: #F97316; border: 1px solid rgba(249,115,22,0.3); }
.bp-ex-badge.res  { background: rgba(34,197,94,0.10); color: #22C55E; border: 1px solid rgba(34,197,94,0.3); }

.bp-ex-desc { font-size: 12px; color: #A1A1AA; }

.bp-ex-zero {
  margin-top: 16px;
  padding: 8px 16px;
  background: rgba(34,197,94,0.06);
  border: 1px solid rgba(34,197,94,0.2);
  border-radius: 4px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #22C55E;
  text-align: center;
  opacity: 0;
}

/* ── BEAT 5: Settlement ─────────────────────────────────────── */
.bp-settlement {
  width: 100%;
  text-align: center;
}

.bp-sett-eyebrow {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: #3B82F6;
  margin-bottom: 10px;
  opacity: 0;
}

.bp-sett-amount {
  font-size: clamp(52px, 8vw, 80px);
  font-weight: 800;
  letter-spacing: -0.05em;
  color: #F5F5F7;
  line-height: 1;
  margin-bottom: 6px;
  opacity: 0;
}

.bp-sett-sub {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: #52525B;
  margin-bottom: 28px;
  opacity: 0;
}

.bp-sett-math {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.bp-sett-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 13px;
  opacity: 0;
}

.bp-sett-row-label { color: #A1A1AA; }
.bp-sett-row-val { font-family: 'JetBrains Mono','Fira Code',monospace; font-size: 13px; }
.bp-sett-row-val.pos { color: #22C55E; }
.bp-sett-row-val.neg { color: #EF4444; }

.bp-sett-row.total .bp-sett-row-label { color: #3B82F6; font-family: 'JetBrains Mono','Fira Code',monospace; font-size: 9px; letter-spacing: 0.15em; }
.bp-sett-row.total .bp-sett-row-val { color: #F5F5F7; font-size: 16px; font-weight: 600; }

.bp-sett-badge {
  margin-top: 16px;
  padding: 10px 24px;
  background: rgba(34,197,94,0.08);
  border: 1px solid rgba(34,197,94,0.35);
  border-radius: 4px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: #22C55E;
  display: inline-block;
  opacity: 0;
}

/* ── BEAT 6: Books certified ─────────────────────────────────── */
.bp-cert {
  width: min(440px, 90%);
  background: #060F1E;
  border: 1.5px solid rgba(34,197,94,0.4);
  border-radius: 10px;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.96);
}

.bp-cert-header {
  background: rgba(34,197,94,0.08);
  padding: 16px 24px;
  border-bottom: 1px solid rgba(34,197,94,0.15);
  text-align: center;
}

.bp-cert-title {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 12px;
  letter-spacing: 0.28em;
  color: #22C55E;
}

.bp-cert-body { padding: 20px 24px; }

.bp-cert-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 13px;
  opacity: 0;
}

.bp-cert-row:last-child { border-bottom: none; }

.bp-cert-check { color: #22C55E; flex-shrink: 0; font-size: 14px; }
.bp-cert-text { color: #A1A1AA; }

.bp-cert-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 16px 24px;
  border-top: 1px solid rgba(34,197,94,0.1);
  margin-top: 4px;
  opacity: 0;
}

.bp-cert-by { }
.bp-cert-by-label { font-family: 'JetBrains Mono','Fira Code',monospace; font-size: 8px; letter-spacing: 0.14em; color: #52525B; margin-bottom: 3px; }
.bp-cert-by-name { font-size: 16px; font-weight: 700; color: #F5F5F7; }
.bp-cert-by-role { font-size: 11px; color: #52525B; margin-top: 2px; }

.bp-cert-date { text-align: right; }
.bp-cert-date-label { font-family: 'JetBrains Mono','Fira Code',monospace; font-size: 8px; letter-spacing: 0.14em; color: #52525B; margin-bottom: 3px; }
.bp-cert-date-val { font-size: 15px; font-weight: 600; color: #F5F5F7; }

/* ── BEAT 7: Insights ───────────────────────────────────────── */
.bp-insights {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.bp-ins-section-title {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: #3B82F6;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(59,130,246,0.2);
  opacity: 0;
}

.bp-ins-ch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  opacity: 0;
}

.bp-ins-ch-name {
  font-size: 13px;
  color: #A1A1AA;
  width: 65px;
  flex-shrink: 0;
}

.bp-ins-bar-track {
  flex: 1;
  height: 6px;
  background: rgba(59,130,246,0.1);
  border-radius: 3px;
  overflow: hidden;
}

.bp-ins-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: #3B82F6;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.bp-ins-ch-pct {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 12px;
  font-weight: 600;
  color: #F5F5F7;
  width: 44px;
  text-align: right;
}

.bp-ins-sku-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  opacity: 0;
}

.bp-ins-sku-name {
  font-size: 12px;
  color: #A1A1AA;
}

.bp-ins-sku-delta {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 12px;
  font-weight: 600;
}

.bp-ins-sku-delta.up { color: #22C55E; }
.bp-ins-sku-delta.watch {
  color: #EF4444;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.25);
  padding: 2px 8px;
  border-radius: 3px;
}

.bp-ins-close-row {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: rgba(34,197,94,0.06);
  border: 1px solid rgba(34,197,94,0.2);
  border-radius: 4px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: #52525B;
  opacity: 0;
}

.bp-ins-close-row strong { color: #22C55E; }

/* ── Mobile: collapse scroll, show static ───────────────────── */
@media (max-width: 1024px) {
  .bp-narrative { height: auto; }
  .bp-stage {
    position: relative;
    height: auto;
    overflow: visible;
    display: block;
    padding: 0;
  }
  .bp-stage::before { display: none; }
  .bp-sidenav { display: none; }
  .bp-progress { display: none; }
  .bp-canvas {
    width: 100%;
    height: auto;
    display: block;
  }
  .bp-beat-el {
    position: relative;
    inset: auto;
    opacity: 1;
    pointer-events: auto;
    padding: 64px 32px;
    border-bottom: 1px solid rgba(59,130,246,0.08);
    background: #06080E;
  }
  /* re-add grid on each chapter */
  .bp-beat-el::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
      linear-gradient(rgba(59,130,246,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(59,130,246,0.04) 1px, transparent 1px);
    background-size: 40px 40px, 40px 40px;
  }
  /* Mobile headings before each beat */
  .bp-beat-el::after {
    content: attr(data-mobile-label);
    position: absolute;
    top: 24px;
    left: 32px;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #3B82F6;
  }
}

@media (max-width: 640px) {
  .bp-beat-el { padding: 56px 20px; }
  .bp-beat-el::after { left: 20px; }
  .bp-hub-amount { font-size: 28px; }
  .bp-inv-counter { font-size: 42px; }
  .bp-sett-amount { font-size: 40px; }
  .bp-insights { grid-template-columns: 1fr; }
  .bp-channels { flex-direction: column; gap: 8px; }
  .bp-ch-arrow { transform: rotate(90deg); }
}

/* ============================================================
   HOW WEBGILITY WORKS v3 — Natural Scroll 8-Step Blueprint
   All selectors prefixed hw- to avoid collisions.
   ============================================================ */

/* Pipeline wrapper — dark canvas with blueprint grid */
.hw-pipeline {
  background: #06080E;
  position: relative;
}

.hw-pipeline::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(59,130,246,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,0.028) 1px, transparent 1px),
    linear-gradient(rgba(59,130,246,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,0.055) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 200px 200px, 200px 200px;
  background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
}

/* ── Pipeline intro heading ──────────────────────────────── */
.hw-pipeline-intro {
  position: relative;
  z-index: 1;
  padding: 96px 0 72px;
  text-align: center;
}

.hw-pipeline-intro .section-h2 {
  color: #F5F5F7;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.hw-pipeline-intro .section-body {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  color: rgba(245,245,247,0.5);
}

/* ── Step overview chips ─────────────────────────────────── */
.hw-overview {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
}

.hw-ov-chip {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(59,130,246,0.7);
  background: rgba(59,130,246,0.07);
  border: 1px solid rgba(59,130,246,0.18);
  border-radius: 4px;
  padding: 5px 11px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.hw-ov-chip:hover {
  background: rgba(59,130,246,0.14);
  color: #60A5FA;
  border-color: rgba(59,130,246,0.35);
}

/* ── Individual step ─────────────────────────────────────── */
.hw-step {
  position: relative;
  z-index: 1;
  padding-bottom: 100px;
  border-top: 1px solid rgba(59,130,246,0.08);
}

.hw-step:last-of-type {
  border-bottom: 1px solid rgba(59,130,246,0.08);
  padding-bottom: 120px;
}

/* Step header: pill badge + label + extending rule line */
.hw-step-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 44px 0 52px;
}

.hw-step-num {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #3B82F6;
  background: rgba(59,130,246,0.08);
  border: 1px solid rgba(59,130,246,0.22);
  border-radius: 4px;
  padding: 6px 13px;
  text-shadow: 0 0 18px rgba(59,130,246,0.55);
}

.hw-step-name {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245,245,247,0.32);
}

.hw-step-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(59,130,246,0.18), transparent 80%);
}

/* Step body: two columns — copy (left) + visual (right) */
.hw-step-body {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 80px;
  align-items: center;
}

/* Copy column */
.hw-copy-headline {
  font-size: clamp(21px, 2.4vw, 28px);
  font-weight: 700;
  color: #F5F5F7;
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}

.hw-copy-body {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(245,245,247,0.52);
  margin: 0 0 24px;
}

.hw-copy-link {
  font-size: 14px;
  font-weight: 600;
  color: #3B82F6;
  text-decoration: none;
  letter-spacing: 0.01em;
}

.hw-copy-link:hover {
  color: #60A5FA;
  text-decoration: underline;
}

/* Visual column */
.hw-step-visual {
  position: relative;
}

/* Radial glow bloom behind the screen */
.hw-step-visual::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110%;
  height: 110%;
  background: radial-gradient(ellipse at center,
    rgba(59,130,246,0.09) 0%,
    rgba(59,130,246,0.03) 45%,
    transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Screen / app-window frame */
.hw-screen {
  position: relative;
  z-index: 1;
  background: #0D1117;
  border: 1px solid rgba(59,130,246,0.13);
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(59,130,246,0.04),
    0 28px 80px rgba(0,0,0,0.6),
    0 4px 20px rgba(0,0,0,0.35);
}

/* Chrome bar at top of screen */
.hw-screen-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  background: rgba(255,255,255,0.022);
  border-bottom: 1px solid rgba(59,130,246,0.09);
}

.hw-screen-dots {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.hw-screen-dots span {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.hw-screen-dots span:nth-child(1) { background: rgba(239,68,68,0.5); }
.hw-screen-dots span:nth-child(2) { background: rgba(245,158,11,0.5); }
.hw-screen-dots span:nth-child(3) { background: rgba(34,197,94,0.5); }

.hw-screen-title {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: rgba(245,245,247,0.25);
  text-transform: uppercase;
  flex: 1;
}

.hw-screen-step {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: rgba(59,130,246,0.4);
}

.hw-screen-body {
  padding: 28px 24px;
}

/* Keep all bp-* mockups full-width inside the screen */
.hw-screen-body > * {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* ── Pipeline close card ─────────────────────────────────── */
.hw-pipeline-close {
  position: relative;
  z-index: 1;
  padding: 72px 0 96px;
  text-align: center;
}

.hw-close-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 36px 52px;
  background: rgba(34,197,94,0.06);
  border: 1px solid rgba(34,197,94,0.22);
  border-radius: 12px;
  box-shadow: 0 0 40px rgba(34,197,94,0.06);
}

.hw-close-check {
  font-size: 32px;
  color: #22C55E;
  text-shadow: 0 0 20px rgba(34,197,94,0.5);
}

.hw-close-label {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #22C55E;
}

.hw-close-stats {
  display: flex;
  gap: 40px;
}

.hw-close-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.hw-close-stat-val {
  font-size: 22px;
  font-weight: 700;
  color: #F5F5F7;
  letter-spacing: -0.03em;
}

.hw-close-stat-lbl {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245,245,247,0.3);
}

.hw-close-certified {
  font-size: 13px;
  color: rgba(245,245,247,0.45);
}

.hw-close-certified strong {
  color: rgba(245,245,247,0.75);
  font-weight: 600;
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hw-step-body {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .hw-pipeline-intro {
    padding: 68px 0 56px;
    text-align: left;
  }

  .hw-pipeline-intro .section-h2,
  .hw-pipeline-intro .section-body {
    margin-left: 0;
    margin-right: 0;
  }

  .hw-overview {
    justify-content: flex-start;
  }

  .hw-step-header {
    padding: 36px 0 40px;
  }

  .hw-copy-headline {
    font-size: clamp(20px, 5vw, 26px);
  }

  .hw-close-stats {
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .hw-step-header {
    padding: 28px 0 32px;
  }

  .hw-step-body {
    gap: 32px;
  }

  .hw-screen-body {
    padding: 20px 16px;
  }

  .hw-close-card {
    padding: 28px 24px;
    width: 100%;
  }

  /* Inventory sync table: collapse to 4 columns on narrow screens.
     STATUS is least critical — hide it so the remaining columns fit
     within the screen widget without causing page-level overflow.
     1fr + 52 + 40 + 52 + 3×6 gap = ~162px fixed; 1fr ≈ 100px+ for channel. */
  .bp-inv-row,
  .bp-inv-row-head {
    grid-template-columns: 1fr 52px 40px 52px;
    gap: 6px;
  }
  .bp-inv-status,
  .bp-inv-row-head span:last-child {
    display: none;
  }
}

/* ── bp- visibility override ────────────────────────────────
   The bp-* sub-elements were built for the GSAP scrub system:
   opacity:0 by default, revealed via .beat-active or tweens.
   In the natural-scroll layout they are static mockups — we
   override all GSAP-era opacity:0 defaults here. 2-class
   specificity (.hw-screen-body .bp-X) beats the 1-class rules.
   transform:none also resets .bp-cert's scale(0.96) default. ── */
.hw-screen-body .bp-li,
.hw-screen-body .bp-receipt-footer,
.hw-screen-body .bp-inv-row,
.hw-screen-body .bp-inv-row-head,
.hw-screen-body .bp-j-header,
.hw-screen-body .bp-j-cols,
.hw-screen-body .bp-j-row,
.hw-screen-body .bp-j-balance,
.hw-screen-body .bp-ex-node,
.hw-screen-body .bp-ex-arrow,
.hw-screen-body .bp-ex-item,
.hw-screen-body .bp-ex-zero,
.hw-screen-body .bp-sett-eyebrow,
.hw-screen-body .bp-sett-amount,
.hw-screen-body .bp-sett-sub,
.hw-screen-body .bp-sett-row,
.hw-screen-body .bp-sett-badge,
.hw-screen-body .bp-cert,
.hw-screen-body .bp-cert-row,
.hw-screen-body .bp-cert-footer,
.hw-screen-body .bp-ins-section-title,
.hw-screen-body .bp-ins-ch-row,
.hw-screen-body .bp-ins-sku-row,
.hw-screen-body .bp-ins-close-row,
.hw-screen-body .bp-beat-el {
  opacity: 1;
  transform: none;
}

/* ── Screen entrance animations ─────────────────────────────
   Keyframes + triggers via .hw-step-visual.visible           */
@keyframes hw-scan {
  0%   { top: 38px; opacity: 0.8; }
  100% { top: 100%; opacity: 0;   }
}

@keyframes hw-row-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* Scan line sweeps downward when the screen enters view */
.hw-step-visual.visible .hw-screen::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 0; height: 2px;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(59,130,246,0.7) 25%,
    rgba(59,130,246,0.7) 75%,
    transparent 100%);
  pointer-events: none;
  z-index: 20;
  animation: hw-scan 0.75s 0.3s ease-in both;
}

/* Whole screen body slides up when visual reveals (offset behind column fade) */
.hw-step-visual.visible .hw-screen-body > * {
  animation: hw-row-in 0.5s 0.35s ease both;
}

/* ── Sticky progress bar ─────────────────────────────────── */
#hw-progress-bar {
  position: sticky;
  top: 72px; /* sits flush below the fixed .nav (72px tall) */
  z-index: 90;
  background: rgba(6,8,14,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(59,130,246,0.1);
}

.hw-prog-inner {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.hw-prog-eyebrow {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 8.5px;
  letter-spacing: 0.22em;
  color: rgba(245,245,247,0.18);
  text-transform: uppercase;
  flex-shrink: 0;
  white-space: nowrap;
}

.hw-prog-track {
  flex: 1;
  position: relative;
  padding: 10px 0; /* hit-target height */
}

.hw-prog-line {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 1px;
  background: rgba(59,130,246,0.13);
  transform: translateY(-50%);
}

.hw-prog-fill {
  height: 100%;
  background: rgba(59,130,246,0.45);
  transition: width 0.4s ease;
  width: 0%;
}

.hw-prog-nodes {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

.hw-prog-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  cursor: pointer;
}

.hw-prog-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #06080E;
  border: 1px solid rgba(59,130,246,0.25);
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.hw-prog-num {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 8px;
  letter-spacing: 0.08em;
  color: rgba(245,245,247,0.2);
  transition: color 0.25s;
  line-height: 1;
}

.hw-prog-node.hw-passed .hw-prog-dot {
  background: rgba(59,130,246,0.25);
  border-color: rgba(59,130,246,0.4);
}

.hw-prog-node.hw-active .hw-prog-dot {
  background: #3B82F6;
  border-color: #3B82F6;
  box-shadow: 0 0 8px rgba(59,130,246,0.65);
}

.hw-prog-node.hw-active .hw-prog-num {
  color: #60A5FA;
}

.hw-prog-title {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: rgba(245,245,247,0.28);
  text-transform: uppercase;
  flex-shrink: 0;
  white-space: nowrap;
  min-width: 176px;
  transition: color 0.2s;
}

@media (max-width: 1024px) {
  .hw-prog-eyebrow { display: none; }
  .hw-prog-title   { display: none; }
}

@media (max-width: 640px) {
  #hw-progress-bar { display: none; }
}

/* ============================================================
   WHY-WEBGILITY — Complete Commerce Visibility
   All selectors prefixed ww- to avoid collisions.
   ============================================================ */

/* ── Keyframes ─────────────────────────────────────────────── */
@keyframes ww-labelFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes ww-flowPulse {
  0%   { left: -60px; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
@keyframes ww-checkIn {
  0%   { transform: scale(0) rotate(-12deg); opacity: 0; }
  70%  { transform: scale(1.15) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes ww-rowSlide {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Hero two-column layout ─────────────────────────────────── */
.ww-hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 20px 0 60px;
}
.ww-hero-copy { position: relative; z-index: 2; }

/* ── Triangle diagram wrapper ───────────────────────────────── */
.ww-triangle-wrap {
  position: relative;
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
  user-select: none;
  overflow: visible;
}
.ww-triangle-svg { width: 100%; height: auto; display: block; }


/* ============================================================
   PAGE VISUAL COMPONENTS
   Split layouts + data cards for all inner pages.
   All prefixed sb-pv- (page visual) to avoid collisions.
   Animation hooks: children animate when parent gets .visible
   (set by the existing IntersectionObserver / reveal system).
   ============================================================ */

/* ── Keyframes ────────────────────────────────────────────── */
@keyframes pv-rowSlide {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes pv-barFill {
  from { width: 0; }
}
@keyframes pv-countUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pv-flowDot {
  0%   { left: -6px; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: calc(100% + 6px); opacity: 0; }
}
@keyframes pv-checkPop {
  0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
  65%  { transform: scale(1.2) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes pv-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47,75,255,0.18); }
  50%       { box-shadow: 0 0 0 8px rgba(47,75,255,0); }
}
@keyframes pv-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ── Split layout ─────────────────────────────────────────── */
.sb-section-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.sb-section-split.visual-first .sb-pv-visual { order: -1; }
.sb-section-text { max-width: 520px; }
.sb-section-text .section-h2 { max-width: 100%; }
.sb-section-text .section-body { max-width: 100%; }
@media (max-width: 960px) {
  .sb-section-split {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .sb-section-split.visual-first .sb-pv-visual { order: 0; }
}

/* ── Visual panel (card shell) ────────────────────────────── */
.sb-pv-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(47,75,255,0.06);
  overflow: hidden;
}
.sb-pv-panel-dark {
  background: #0e1117;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.28);
  overflow: hidden;
}

/* ── Card header (shared across all card types) ───────────── */
.sb-pv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.sb-pv-header-dark {
  border-bottom-color: rgba(255,255,255,0.08);
  margin-bottom: 18px;
  padding-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sb-pv-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sb-pv-title-dark { color: rgba(255,255,255,0.32); }
.sb-pv-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sb-pv-badge-live  { background: rgba(24,166,106,0.12); color: var(--certified-green); }
.sb-pv-badge-auto  { background: var(--signal-blue-soft); color: var(--signal-blue); }
.sb-pv-badge-amber { background: rgba(245,158,11,0.12); color: #D97706; }

/* ── Field mapping card ───────────────────────────────────── */
.sb-fm-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 12.5px;
}
.sb-fm-row:last-child { border-bottom: none; }
.sb-fm-src  { flex: 1; color: var(--text-muted); font-weight: 500; font-style: italic; }
.sb-fm-arr  { color: var(--signal-blue); font-size: 13px; flex-shrink: 0; opacity: 0.7; }
.sb-fm-tgt  { flex: 1.2; color: var(--ink); font-weight: 700; font-size: 12px; }
.sb-fm-ok   { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: rgba(24,166,106,0.12); color: var(--certified-green); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; }
.sb-fm-flag { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: rgba(245,158,11,0.12); color: #D97706; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; }

/* staggered row animation */
.sb-fm-row {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.reveal.visible .sb-fm-row { opacity: 1; transform: translateX(0); }
.reveal.visible .sb-fm-row:nth-child(1) { transition-delay: 0.04s; }
.reveal.visible .sb-fm-row:nth-child(2) { transition-delay: 0.10s; }
.reveal.visible .sb-fm-row:nth-child(3) { transition-delay: 0.16s; }
.reveal.visible .sb-fm-row:nth-child(4) { transition-delay: 0.22s; }
.reveal.visible .sb-fm-row:nth-child(5) { transition-delay: 0.28s; }
.reveal.visible .sb-fm-row:nth-child(6) { transition-delay: 0.34s; }
.reveal.visible .sb-fm-ok {
  animation: pv-checkPop 0.35s cubic-bezier(0.22,1,0.36,1) forwards;
  animation-delay: inherit;
}

/* ── Cost waterfall ───────────────────────────────────────── */
.sb-wf-order-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.sb-wf-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-soft);
}
.sb-wf-row:last-child { border-bottom: none; }
.sb-wf-label { font-size: 12px; color: var(--text-muted); width: 110px; flex-shrink: 0; }
.sb-wf-bar-wrap { flex: 1; height: 8px; background: var(--bg-main); border-radius: 4px; overflow: hidden; }
.sb-wf-bar {
  height: 100%;
  border-radius: 4px;
  width: 0;
  transition: width 0.9s cubic-bezier(0.4,0,0.2,1);
}
.sb-wf-bar-rev    { background: var(--signal-blue); }
.sb-wf-bar-cost   { background: rgba(245,158,11,0.6); }
.sb-wf-bar-margin { background: var(--certified-green); }
.sb-wf-amount { font-size: 12px; font-weight: 700; color: var(--ink); width: 54px; text-align: right; flex-shrink: 0; }
.sb-wf-amount-neg { color: #D97706; }
.sb-wf-amount-final { color: var(--certified-green); font-size: 14px; }

.reveal.visible .sb-wf-bar-rev    { width: 100%; }
.reveal.visible .sb-wf-bar[data-w="82"] { width: 82%; }
.reveal.visible .sb-wf-bar[data-w="31"] { width: 31%; }
.reveal.visible .sb-wf-bar[data-w="3"]  { width: 3%; }
.reveal.visible .sb-wf-bar[data-w="7"]  { width: 7%; }
.reveal.visible .sb-wf-bar[data-w="4"]  { width: 4%; }
.reveal.visible .sb-wf-bar[data-w="12"] { width: 12%; }
.reveal.visible .sb-wf-bar[data-w="40"] { width: 40%; }
.reveal.visible .sb-wf-bar[data-w="60"] { width: 60%; }
.reveal.visible .sb-wf-bar[data-w="55"] { width: 55%; }
.reveal.visible .sb-wf-bar[data-w="70"] { width: 70%; }
.reveal.visible .sb-wf-bar[data-w="20"] { width: 20%; }
.reveal.visible .sb-wf-bar[data-w="45"] { width: 45%; }

/* ── Exception queue ──────────────────────────────────────── */
.sb-ex-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-soft);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.sb-ex-item:last-child { border-bottom: none; }
.reveal.visible .sb-ex-item:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.05s; }
.reveal.visible .sb-ex-item:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.14s; }
.reveal.visible .sb-ex-item:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.23s; }

.sb-ex-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px;
}
.sb-ex-dot-flag   { background: #F59E0B; animation: pv-pulse 2s ease-in-out infinite; }
.sb-ex-dot-review { background: var(--signal-blue); }
.sb-ex-dot-ok     { background: var(--certified-green); }
.sb-ex-body { flex: 1; }
.sb-ex-id {
  font-size: 10px; font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 3px;
}
.sb-ex-desc { font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; }
.sb-ex-note { font-size: 11px; color: var(--text-muted); margin-top: 3px; font-style: italic; }
.sb-ex-badge {
  font-size: 9px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap;
  letter-spacing: 0.06em; flex-shrink: 0; margin-top: 3px;
}
.sb-ex-badge-flag   { background: rgba(245,158,11,0.12); color: #D97706; }
.sb-ex-badge-review { background: var(--signal-blue-soft); color: var(--signal-blue); }
.sb-ex-badge-ok     { background: rgba(24,166,106,0.12); color: var(--certified-green); }

/* ── Before / After split ─────────────────────────────────── */
.sb-ba-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.sb-ba-col { padding: 20px; }
.sb-ba-col-before { background: var(--bg-main); }
.sb-ba-col-after  { background: var(--surface); }
.sb-ba-label {
  font-size: 9px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: 14px;
}
.sb-ba-label-before { color: var(--text-soft); }
.sb-ba-label-after  { color: var(--signal-blue); }
.sb-ba-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 12.5px;
}
.sb-ba-row:last-child { border-bottom: none; }
.sb-ba-icon { font-size: 12px; flex-shrink: 0; }
.sb-ba-text { color: var(--ink-soft); }
.sb-ba-text-dim { color: var(--text-muted); }
.sb-ba-stat { font-size: 22px; font-weight: 900; letter-spacing: -0.03em; margin: 10px 0 4px; }
.sb-ba-stat-before { color: var(--text-muted); }
.sb-ba-stat-after  { color: var(--signal-blue); }
.sb-ba-stat-lbl { font-size: 11px; color: var(--text-muted); }

.sb-ba-col-after .sb-ba-row {
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.reveal.visible .sb-ba-col-after .sb-ba-row:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.1s; }
.reveal.visible .sb-ba-col-after .sb-ba-row:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.18s; }
.reveal.visible .sb-ba-col-after .sb-ba-row:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.26s; }
.reveal.visible .sb-ba-col-after .sb-ba-row:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.34s; }

/* ── Stat row ─────────────────────────────────────────────── */
.sb-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
.sb-stat-item {
  background: var(--surface);
  padding: 24px 20px;
  text-align: center;
}
.sb-stat-num {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--signal-blue);
  line-height: 1;
  margin-bottom: 6px;
}
.sb-stat-lbl {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
.sb-stat-item {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.reveal.visible .sb-stat-item:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.05s; }
.reveal.visible .sb-stat-item:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.14s; }
.reveal.visible .sb-stat-item:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.23s; }

/* ── Connection / flow diagram ────────────────────────────── */
.sb-conn-diagram {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: center;
}
.sb-conn-col { display: flex; flex-direction: column; gap: 8px; }
.sb-conn-col-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 4px;
}
.sb-conn-chip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 7px;
  /* visible by default — JS animates in as enhancement */
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.sb-conn-chip-right {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 7px;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
/* JS-driven entrance animation when reveal fires */
.reveal-hidden ~ * .sb-conn-chip,
.reveal-hidden .sb-conn-chip     { opacity: 0; transform: translateX(-10px); }
.reveal-hidden ~ * .sb-conn-chip-right,
.reveal-hidden .sb-conn-chip-right { opacity: 0; transform: translateX(10px); }
.reveal.visible .sb-conn-chip { opacity: 1; transform: none; }
.reveal.visible .sb-conn-chip:nth-child(2) { transition-delay: 0.07s; }
.reveal.visible .sb-conn-chip:nth-child(3) { transition-delay: 0.14s; }
.reveal.visible .sb-conn-chip:nth-child(4) { transition-delay: 0.21s; }
.reveal.visible .sb-conn-chip-right { opacity: 1; transform: none; }
.reveal.visible .sb-conn-chip-right:nth-child(2) { transition-delay: 0.28s; }
.reveal.visible .sb-conn-chip-right:nth-child(3) { transition-delay: 0.35s; }
.reveal.visible .sb-conn-chip-right:nth-child(4) { transition-delay: 0.42s; }
.sb-conn-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sb-conn-center { display: flex; flex-direction: column; align-items: center; gap: 0; }
.sb-conn-hub {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, #2F4BFF 0%, #1932C7 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 28px rgba(47,75,255,0.35);
  animation: pv-pulse 3s ease-in-out infinite;
  flex-shrink: 0;
}
.sb-conn-hub-logo {
  width: 44px;
  height: auto;
  display: block;
}
.sb-conn-flow-line {
  height: 2px;
  background: var(--border);
  position: relative;
  overflow: hidden;
  width: 40px;
}
.sb-conn-flow-line::after {
  content: '';
  position: absolute;
  top: -1px; left: -6px;
  width: 10px; height: 4px;
  border-radius: 2px;
  background: var(--signal-blue);
  animation: pv-flowDot 1.6s ease-in-out infinite;
}
.sb-conn-flow-line.flow-right::after { animation-delay: 0.2s; }

/* ── Channel-rule consistency panel ─────────────────────────
   Used in sections where the story is "same rules, all channels"
   ─────────────────────────────────────────────────────────── */
.sb-cr-channel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border-soft);
}
.sb-cr-channel-row:last-of-type { border-bottom: none; }
.sb-cr-channel-info {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}
.sb-cr-channel-name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 750;
  color: var(--ink);
}
.sb-cr-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.sb-cr-tag {
  font-size: 10px;
  font-weight: 600;
  color: var(--signal-blue);
  background: rgba(47,75,255,0.06);
  border: 1px solid rgba(47,75,255,0.12);
  border-radius: 5px;
  padding: 2px 7px;
  white-space: nowrap;
}
.sb-cr-active {
  font-size: 9px;
  font-weight: 750;
  color: var(--certified-green);
  background: rgba(24,166,106,0.10);
  border-radius: 999px;
  padding: 3px 9px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.sb-cr-footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
}

/* ── Accounting output card (what lands in QB) ────────────── */
.sb-output-panel {
  background: #0e1117;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 20px;
  font-family: 'Menlo','Monaco','Consolas',monospace;
  color: rgba(255,255,255,0.82); /* prevent inheriting page dark color on light sections */
}
/* ── Before/After panel: color-coded border signal ── */
/* "Before" panel: no -ok badge → amber warning tint  */
.sb-output-panel:has(.sb-output-hd-status:not(.sb-output-hd-status-ok)) {
  border-color: rgba(245,158,11,0.30);
  border-top: 2px solid rgba(245,158,11,0.55);
}
.sb-output-panel:has(.sb-output-hd-status:not(.sb-output-hd-status-ok)) .sb-output-hd {
  border-bottom-color: rgba(245,158,11,0.15);
}
/* "After" panel: has -ok badge → green success tint */
.sb-output-panel:has(.sb-output-hd-status-ok) {
  border-color: rgba(34,197,94,0.28);
  border-top: 2px solid rgba(34,197,94,0.55);
}
.sb-output-panel:has(.sb-output-hd-status-ok) .sb-output-hd {
  border-bottom-color: rgba(34,197,94,0.15);
}
.sb-output-hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.sb-output-hd-label {
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.28);
}
.sb-output-hd-status {
  /* Default = "before" / manual / warning state — amber */
  font-size: 9px; font-weight: 700; color: #F59E0B;
  background: rgba(245,158,11,0.12); padding: 3px 8px; border-radius: 999px;
}
.sb-output-hd-status-ok {
  /* "After" / automated / success state — green */
  color: #22C55E;
  background: rgba(34,197,94,0.1);
}
.sb-output-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 12px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.sb-output-row:last-child { border-bottom: none; }
.reveal.visible .sb-output-row:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.08s; }
.reveal.visible .sb-output-row:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.15s; }
.reveal.visible .sb-output-row:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.22s; }
.reveal.visible .sb-output-row:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.29s; }
.reveal.visible .sb-output-row:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.36s; }
.reveal.visible .sb-output-row:nth-child(6) { opacity: 1; transform: none; transition-delay: 0.43s; }
.sb-output-key  { color: rgba(255,255,255,0.45); }
.sb-output-val  { color: rgba(255,255,255,0.82); font-weight: 600; }
.sb-output-val-pos { color: #22C55E; font-weight: 700; }
.sb-output-val-neg { color: #EF4444; }
/* Semantic label/val classes for .sb-output-row in light panels (.sb-pv-panel) */
.sb-output-row-label { font-weight: 700; color: var(--ink); }
.sb-output-row-val   { color: var(--certified-green); font-weight: 700; }
/* Light-panel context: override dark defaults when inside .sb-pv-panel */
.sb-pv-panel .sb-output-row {
  border-bottom-color: var(--border);
  font-size: 13px;
  color: var(--ink);
}
.sb-output-total {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  color: #F5F5F7;
}
.sb-output-total-val { color: #22C55E; font-size: 15px; }

/* ── Channel inventory table ──────────────────────────────── */
.sb-ch-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.sb-ch-table th {
  font-size: 9px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted); padding: 0 0 10px; text-align: right; border-bottom: 1px solid var(--border);
}
.sb-ch-table th:first-child { text-align: left; }
.sb-ch-table td {
  padding: 9px 0; text-align: right; color: var(--ink-soft); font-weight: 600;
  border-bottom: 1px solid var(--border-soft);
}
.sb-ch-table td:first-child { text-align: left; color: var(--ink); font-weight: 700; }
.sb-ch-table tr:last-child td { border-bottom: none; }
.sb-ch-ok   { color: var(--certified-green) !important; }
.sb-ch-warn { color: #D97706 !important; }
.sb-ch-label-tag {
  font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px;
  background: rgba(24,166,106,0.10); color: var(--certified-green); margin-left: 6px;
}
.sb-ch-table tr {
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.reveal.visible .sb-ch-table tr:nth-child(1) { opacity: 1; transform: none; }
.reveal.visible .sb-ch-table tr:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.08s; }
.reveal.visible .sb-ch-table tr:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.16s; }
.reveal.visible .sb-ch-table tr:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.24s; }
.reveal.visible .sb-ch-table tr:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.32s; }

/* ── Cash timeline bars ───────────────────────────────────── */
.sb-cash-tl { display: flex; flex-direction: column; gap: 0; }
.sb-cash-tl-row {
  display: grid;
  grid-template-columns: 80px 1fr 54px;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
}
.sb-cash-tl-row:last-child { border-bottom: none; }
.sb-cash-tl-label { font-size: 11px; color: var(--text-muted); }
.sb-cash-tl-track { height: 10px; background: var(--bg-main); border-radius: 5px; overflow: hidden; }
.sb-cash-tl-bar {
  height: 100%; border-radius: 5px; width: 0;
  transition: width 1s cubic-bezier(0.4,0,0.2,1);
}
.sb-cash-bar-settled  { background: var(--signal-blue); }
.sb-cash-bar-pending  { background: #F59E0B; }
.sb-cash-bar-reserved { background: var(--border); }
.sb-cash-tl-val { font-size: 12px; font-weight: 700; color: var(--ink); text-align: right; }
.reveal.visible .sb-cash-tl-bar[data-w="88"] { width: 88%; transition-delay: 0.1s; }
.reveal.visible .sb-cash-tl-bar[data-w="64"] { width: 64%; transition-delay: 0.2s; }
.reveal.visible .sb-cash-tl-bar[data-w="42"] { width: 42%; transition-delay: 0.3s; }
.reveal.visible .sb-cash-tl-bar[data-w="78"] { width: 78%; transition-delay: 0.1s; }
.reveal.visible .sb-cash-tl-bar[data-w="50"] { width: 50%; transition-delay: 0.2s; }
.reveal.visible .sb-cash-tl-bar[data-w="30"] { width: 30%; transition-delay: 0.3s; }
.reveal.visible .sb-cash-tl-bar[data-w="22"] { width: 22%; transition-delay: 0.4s; }
.reveal.visible .sb-cash-tl-bar[data-w="15"] { width: 15%; transition-delay: 0.5s; }

/* ── Before/after timeline (product pages) ────────────────── */
.sb-tl-split {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sb-tl-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sb-tl-phase {
  font-size: 9px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  width: 52px; flex-shrink: 0; color: var(--text-muted);
}
.sb-tl-track { flex: 1; height: 28px; background: var(--bg-main); border-radius: 8px; overflow: hidden; position: relative; }
.sb-tl-fill {
  position: absolute; top: 0; left: 0; height: 100%; border-radius: 8px;
  width: 0; transition: width 1.1s cubic-bezier(0.4,0,0.2,1);
  display: flex; align-items: center; padding-left: 12px;
}
.sb-tl-fill-before { background: rgba(239,68,68,0.12); width: 0; }
.sb-tl-fill-after  { background: rgba(47,75,255,0.12); width: 0; }
.sb-tl-fill-label { font-size: 11px; font-weight: 700; white-space: nowrap; }
.sb-tl-fill-before .sb-tl-fill-label { color: #DC2626; }
.sb-tl-fill-after  .sb-tl-fill-label { color: var(--signal-blue); }
.sb-tl-dur { font-size: 13px; font-weight: 800; color: var(--ink); width: 60px; text-align: right; flex-shrink: 0; }
.sb-tl-dur-green { color: var(--certified-green); }

.reveal.visible .sb-tl-fill-before[data-w="90"] { width: 90%; transition-delay: 0.1s; }
.reveal.visible .sb-tl-fill-after[data-w="22"]  { width: 22%; transition-delay: 0.4s; }
.reveal.visible .sb-tl-fill-before[data-w="75"] { width: 75%; transition-delay: 0.1s; }
.reveal.visible .sb-tl-fill-after[data-w="18"]  { width: 18%; transition-delay: 0.4s; }

/* ── Quote visual card (CTA sections) ────────────────────── */
.sb-quote-card {
  background: var(--signal-blue-soft);
  border: 1px solid rgba(47,75,255,0.15);
  border-radius: 16px;
  padding: 28px;
}
.sb-quote-card-text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  font-style: italic;
  margin-bottom: 16px;
}
.sb-quote-card-attr {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
}
.sb-quote-card-stat {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(47,75,255,0.12);
  display: flex;
  gap: 24px;
}
.sb-qcs-val { font-size: 28px; font-weight: 900; color: var(--signal-blue); letter-spacing: -0.03em; line-height: 1; }
.sb-qcs-lbl { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* ── Section quote (existing pages, light bg) ─────────────── */
.section-quote {
  font-size: 15px; font-style: italic; color: var(--text-muted);
  border-left: 3px solid var(--signal-blue); padding-left: 16px; margin-top: 24px;
}
.section-quote-light {
  color: rgba(255,255,255,0.55); border-left-color: rgba(255,255,255,0.25);
}
.section-list {
  list-style: none; display: flex; flex-direction: column; gap: 0; margin-top: 20px;
}
.section-list li {
  font-size: 15px; color: var(--ink-soft); padding: 10px 0;
  border-bottom: 1px solid var(--border-soft); display: flex; gap: 10px; align-items: flex-start;
  line-height: 1.5;
}
.section-list li:last-child { border-bottom: none; }
.section-list li::before { content: '→'; color: var(--signal-blue); font-weight: 700; flex-shrink: 0; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .sb-stat-row { grid-template-columns: 1fr 1fr; }
  .sb-ba-split { grid-template-columns: 1fr; }
  .sb-conn-diagram { grid-template-columns: 1fr; }
  .sb-conn-center { flex-direction: row; justify-content: center; }
  .sb-conn-flow-line { transform: rotate(90deg); }
}

/* ── Sticky pricing toggle bar ────────────────────────────── */
.pricing-sticky-bar {
  position: sticky;
  top: 72px;
  z-index: 990;
/*   background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 12px rgba(14,17,23,0.07); */
  padding: 14px 0;
}

/* ── Pricing toggles ──────────────────────────────────────── */
.pricing-toggles { display:flex; flex-direction:column; align-items:center; gap:12px; }
.toggle-group { display:flex; background:var(--bg-main); border:1px solid var(--border); border-radius:100px; overflow:hidden; }
.toggle-btn { padding:10px 22px; font-size:13px; font-weight:600; color:var(--text-muted); cursor:pointer; background:transparent; border:none; font-family:inherit; transition:all 0.15s; }
.toggle-btn.active { background:var(--surface); color:var(--ink); }
.pricing-billing-row { display:flex; align-items:center; gap:8px; }
.pricing-billing-label { font-size:11px; font-weight:500; letter-spacing:0.07em; text-transform:uppercase; color:var(--text-soft); }
.toggle-group-billing .toggle-btn { padding:5px 14px; font-size:11.5px; font-weight:500; }
.toggle-group-billing .toggle-btn.active { background:var(--surface); color:var(--ink); }


/* ── "Every Problem Enters the Triangle" ────────────────────── */
.ww-problems-section {
  background: var(--bg-main);
  padding: 100px 0;
}
.ww-problem-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-top: 48px;
}
.ww-problem-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 20px 16px 18px;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
  cursor: default;
  position: relative;
  overflow: hidden;
  /* equal height + push tags to bottom */
  display: flex;
  flex-direction: column;
}
.ww-problem-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(47,75,255,0.04) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.22s;
}
.ww-problem-card:hover { border-color: rgba(47,75,255,0.28); box-shadow: 0 12px 32px rgba(47,75,255,0.10); transform: translateY(-2px); }
.ww-problem-card:hover::before { opacity: 1; }

.ww-mini-tri {
  display: block;
  width: 64px;
  height: 56px;
  margin: 0 auto 14px;
}
.ww-card-title {
  font-size: 13px;
  font-weight: 850;
  color: var(--ink-soft);
  line-height: 1.25;
  text-align: center;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ww-card-body {
  font-size: 11px;
  font-weight: 450;
  color: var(--text-soft);
  line-height: 1.6;
  text-align: center;
  margin-top: 10px;
  flex: 1; /* grow to fill space so tags always land at the bottom */
}
.ww-card-tags {
  display: flex;
  flex-direction: column; /* one tag per row */
  align-items: center;
  gap: 5px;
  margin-top: 14px;
}
.ww-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
}
.ww-tag-inv { background: rgba(47,75,255,0.10);  color: var(--signal-blue); }
.ww-tag-mgn { background: rgba(245,112,0,0.10);  color: #D95F00; }
.ww-tag-csh { background: rgba(24,166,106,0.12); color: var(--certified-green); }

/* ── Reconciliation Engine flow strip ───────────────────────── */
.ww-flow-section {
  background: var(--dark-panel);
  padding: 80px 0;
  overflow: hidden;
}
.ww-flow-label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.30);
  text-align: center;
  margin-bottom: 40px;
}
.ww-flow-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
}
.ww-flow-inputs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
.ww-flow-chip {
  font-size: 11px;
  font-weight: 750;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  padding: 7px 14px;
  white-space: nowrap;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.ww-flow-chip-out {
  font-size: 11px;
  font-weight: 800;
  padding: 9px 16px;
  border-radius: 10px;
  white-space: nowrap;
}
.ww-flow-chip-out.inv { color: rgba(100,160,255,0.90); background: rgba(47,75,255,0.14); border: 1px solid rgba(47,75,255,0.22); }
.ww-flow-chip-out.mgn { color: rgba(255,140,60,0.90);  background: rgba(245,112,0,0.12);  border: 1px solid rgba(245,112,0,0.20); }
.ww-flow-chip-out.csh { color: rgba(50,210,130,0.90);  background: rgba(24,166,106,0.14); border: 1px solid rgba(24,166,106,0.22); }

.ww-flow-connector {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, rgba(47,75,255,0.15), rgba(47,75,255,0.30), rgba(47,75,255,0.15));
  position: relative;
  overflow: hidden;
  margin: 0 8px;
}
.ww-flow-connector::after {
  content: '';
  position: absolute;
  top: -2px;
  width: 60px;
  height: 6px;
  background: linear-gradient(90deg, transparent, rgba(47,75,255,0.9), transparent);
  border-radius: 999px;
  animation: ww-flowPulse 2.8s ease-in-out infinite;
}

/* ── Triangle output diagram ─────────────────────────────────── */
.ww-tri-diagram {
  position: relative;
  width: 440px;
  height: 380px;
  flex-shrink: 0;
}
.ww-tri-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ww-tri-center {
  position: absolute;
  left: 50%;
  top: 55.3%;
  transform: translate(-50%, -50%);
  background: rgba(47,75,255,0.10);
  border: 1px solid rgba(47,75,255,0.28);
  border-radius: 16px;
  padding: 16px 20px;
  backdrop-filter: blur(12px);
  box-shadow: 0 0 60px rgba(47,75,255,0.15);
}
.ww-engine-logo {
  display: block;
  width: 96px;
  height: auto;
  margin: 0 auto;
  opacity: 0.92;
}
.ww-tri-vertex {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.ww-tri-vertex.top { left: 50%;   top: 14.2%; }
.ww-tri-vertex.bl  { left: 11.8%; top: 87.4%; }
.ww-tri-vertex.br  { left: 88.2%; top: 87.4%; }
.ww-tri-vertex .ww-flow-chip-out.inv { background: #111a40; }
.ww-tri-vertex .ww-flow-chip-out.mgn { background: #2a1205; }
.ww-tri-vertex .ww-flow-chip-out.csh { background: #071e12; }

/* ── Three Numbers section ──────────────────────────────────── */
.ww-three-section {
  background: var(--surface);
  padding: 110px 0;
}
.ww-three-intro {
  max-width: 760px;
  margin: 0 auto 64px;
  text-align: center;
}
.ww-three-intro .section-h2 {
  max-width: 100%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.ww-three-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.ww-num-card {
  border-radius: 24px;
  padding: 36px 32px 40px;
  position: relative;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: box-shadow 0.22s, transform 0.18s;
  overflow: hidden;
}
.ww-num-card:hover { box-shadow: 0 16px 48px rgba(0,0,0,0.06); transform: translateY(-3px); }
.ww-num-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 0 0 24px 24px;
}
.ww-num-card.inv::after { background: linear-gradient(90deg, var(--signal-blue), transparent); }
.ww-num-card.mgn::after { background: linear-gradient(90deg, #FF6400, transparent); }
.ww-num-card.csh::after { background: linear-gradient(90deg, var(--certified-green), transparent); }

.ww-num-badge {
  font-size: 72px;
  font-weight: 900;
  letter-spacing: -0.08em;
  line-height: 1;
  margin-bottom: 8px;
}
.ww-num-badge.inv { color: rgba(47,75,255,0.08); }
.ww-num-badge.mgn { color: rgba(255,100,0,0.08); }
.ww-num-badge.csh { color: rgba(24,166,106,0.08); }

.ww-num-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}
.ww-num-icon.inv { background: rgba(47,75,255,0.10);  color: var(--signal-blue); }
.ww-num-icon.mgn { background: rgba(255,100,0,0.10);  color: #FF6400; }
.ww-num-icon.csh { background: rgba(24,166,106,0.10); color: var(--certified-green); }

.ww-num-title {
  font-size: 20px;
  font-weight: 850;
  color: var(--ink-soft);
  letter-spacing: -0.03em;
  line-height: 1.2;
  position: relative;
  z-index: 2;
}
.ww-num-body {
  font-size: 15px;
  font-weight: 450;
  color: var(--text-muted);
  line-height: 1.75;
  margin-top: 16px;
  position: relative;
  z-index: 2;
}
.ww-num-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 24px;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  position: relative;
  z-index: 2;
}
.ww-num-badge-pill.first { background: var(--error-soft); color: var(--error-red); }
.ww-num-badge-pill.next  { background: var(--warning-soft); color: #B36A00; }
.ww-num-badge-pill.last  { background: var(--certified-green-soft); color: var(--certified-green-dark); }

/* ── Comparison: All three from one source ──────────────────── */
.ww-compare-section {
  background: var(--bg-main);
  padding: 110px 0;
}
.ww-compare-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 40px;
  align-items: start;
  margin-top: 64px;
}
.ww-compare-copy .section-h2 { font-size: clamp(32px, 3.5vw, 52px); }
.ww-compare-copy .section-body { font-size: 16px; }

.ww-compare-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  overflow: hidden;
}
.ww-compare-header {
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border);
}
.ww-compare-label {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.20em;
  text-transform: uppercase;
}
.ww-compare-label.bad  { color: var(--error-red); }
.ww-compare-label.mid  { color: var(--warning-amber); }
.ww-compare-label.good { color: var(--certified-green); }
.ww-compare-sub {
  font-size: 11px;
  font-weight: 650;
  color: var(--text-soft);
  margin-top: 2px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ww-sys-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
}
.ww-sys-row:last-child { border-bottom: none; }
.ww-sys-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--bg-main);
  border: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  color: var(--text-soft);
}
.ww-sys-text { flex: 1; }
.ww-sys-name { font-size: 12px; font-weight: 750; color: var(--ink-soft); }
.ww-sys-note { font-size: 11px; font-weight: 450; color: var(--text-soft); margin-top: 1px; line-height: 1.4; }

.ww-gap-list { padding: 18px 22px; display: flex; flex-direction: column; gap: 10px; }
.ww-gap-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 550;
  color: var(--text-muted);
  line-height: 1.45;
}
.ww-gap-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warning-amber);
  flex-shrink: 0;
  margin-top: 5px;
}

.ww-truth-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.ww-truth-row:last-child { border-bottom: none; }
.ww-truth-row:hover { background: var(--certified-green-soft); }
.ww-truth-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.ww-truth-icon.inv { background: rgba(47,75,255,0.10);  color: var(--signal-blue); }
.ww-truth-icon.mgn { background: rgba(255,100,0,0.10);  color: #FF6400; }
.ww-truth-icon.csh { background: rgba(24,166,106,0.10); color: var(--certified-green); }
.ww-truth-text { flex: 1; }
.ww-truth-val  { font-size: 14px; font-weight: 800; color: var(--ink-soft); }
.ww-truth-sub  { font-size: 11px; font-weight: 500; color: var(--text-soft); margin-top: 1px; }
.ww-truth-check { font-size: 14px; color: var(--certified-green); font-weight: 900; }

/* ── Decision matrix ────────────────────────────────────────── */
.ww-decision-section {
  background: var(--surface);
  padding: 110px 0;
}
.ww-decision-layout {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 80px;
  align-items: start;
  margin-top: 0;
}
.ww-decision-copy .section-h2 { font-size: clamp(32px, 3.5vw, 52px); }

.ww-decision-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 4px 24px rgba(0,0,0,0.05);
}
.ww-decision-table th {
  padding: 14px 18px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--bg-main);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.ww-decision-table th:first-child { text-align: left; }
.ww-th-inv { color: var(--signal-blue); }
.ww-th-mgn { color: #D95F00; }
.ww-th-csh { color: var(--certified-green-dark); }
.ww-th-icon { font-size: 14px; display: block; margin-bottom: 3px; }

.ww-decision-table td {
  padding: 15px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  text-align: center;
  vertical-align: middle;
}
.ww-decision-table td:first-child {
  text-align: left;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-soft);
  padding-left: 22px;
}
.ww-decision-table tr:last-child td { border-bottom: none; }
.ww-decision-table tr:hover td { background: var(--signal-blue-pale); }

.ww-check {
  display: inline-flex;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  /* visible by default — scroll animation enhances, not gates */
}
.ww-check.animated { animation: ww-checkIn 0.38s cubic-bezier(0.34,1.56,0.64,1) both; }
.ww-check.inv { background: rgba(47,75,255,0.10);  color: var(--signal-blue); }
.ww-check.mgn { background: rgba(255,100,0,0.10);  color: #D95F00; }
.ww-check.csh { background: rgba(24,166,106,0.10); color: var(--certified-green); }
.ww-dash { color: var(--text-soft); font-size: 16px; font-weight: 300; }

/* ── Decision table: inline answer rows ─────────────────────── */
.ww-q-row { cursor: default; }
.ww-q-row:hover td { background: var(--signal-blue-pale) !important; }
.ww-a-row td {
  padding: 0 !important;
  background: transparent !important;
  border-bottom: none !important;
}
.ww-a-cell {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.28s ease, padding 0.28s ease;
  padding: 0 20px !important;
}
.ww-a-cell.open {
  max-height: 80px;
  padding: 10px 20px 14px !important;
}
.ww-a-inner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--signal-blue-pale);
  border-left: 3px solid var(--signal-blue);
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
}
.ww-a-logo {
  display: block;
  width: 80px;
  height: auto;
  flex-shrink: 0;
  margin-top: 2px;
  opacity: 0.80;
}
.ww-a-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  min-height: 1.55em;
}
@keyframes ww-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.ww-cursor {
  display: inline-block;
  width: 1px;
  height: 1em;
  background: var(--signal-blue);
  vertical-align: text-bottom;
  margin-left: 2px;
  animation: ww-blink 0.75s step-end infinite;
}

/* ── Outcomes grid ──────────────────────────────────────────── */
.ww-outcomes-section {
  background: var(--bg-main);
  padding: 110px 0;
}
.ww-outcomes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.ww-outcome-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 30px 28px 28px;
  text-decoration: none;
  display: block;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
  position: relative;
  overflow: hidden;
}
.ww-outcome-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 22px;
  opacity: 0;
  transition: opacity 0.22s;
}
.ww-outcome-card.inv::before { background: linear-gradient(135deg, rgba(47,75,255,0.05), transparent); }
.ww-outcome-card.mgn::before { background: linear-gradient(135deg, rgba(255,100,0,0.05), transparent); }
.ww-outcome-card.csh::before { background: linear-gradient(135deg, rgba(24,166,106,0.05), transparent); }
.ww-outcome-card.fin::before { background: linear-gradient(135deg, rgba(245,158,11,0.05), transparent); }
.ww-outcome-card.bks::before { background: linear-gradient(135deg, rgba(24,166,106,0.06), transparent); }
.ww-outcome-card.ops::before { background: linear-gradient(135deg, rgba(47,75,255,0.04), transparent); }
.ww-outcome-card:hover { border-color: rgba(47,75,255,0.24); box-shadow: 0 12px 36px rgba(47,75,255,0.10); transform: translateY(-3px); }
.ww-outcome-card:hover::before { opacity: 1; }

.ww-outcome-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 18px;
}
.ww-outcome-icon.inv { background: rgba(47,75,255,0.10);  color: var(--signal-blue); }
.ww-outcome-icon.mgn { background: rgba(255,100,0,0.10);  color: #FF6400; }
.ww-outcome-icon.csh { background: rgba(24,166,106,0.10); color: var(--certified-green); }
.ww-outcome-icon.fin { background: var(--warning-soft);   color: #B36A00; }
.ww-outcome-icon.bks { background: var(--certified-green-soft); color: var(--certified-green-dark); }
.ww-outcome-icon.ops { background: var(--signal-blue-pale); color: var(--signal-blue); }

.ww-outcome-eyebrow {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 8px;
  position: relative;
  z-index: 2;
}
.ww-outcome-title {
  font-size: 18px;
  font-weight: 850;
  color: var(--ink-soft);
  letter-spacing: -0.03em;
  line-height: 1.2;
  position: relative;
  z-index: 2;
}
.ww-outcome-body {
  font-size: 13px;
  font-weight: 450;
  color: var(--text-muted);
  line-height: 1.65;
  margin-top: 10px;
  position: relative;
  z-index: 2;
}
.ww-outcome-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 20px;
  font-size: 12.5px;
  font-weight: 750;
  color: var(--signal-blue);
  transition: gap 0.16s;
  position: relative;
  z-index: 2;
}
.ww-outcome-card:hover .ww-outcome-cta { gap: 9px; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ww-problem-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .ww-compare-layout { grid-template-columns: 1fr; }
  .ww-compare-copy { display: none; }
  .ww-decision-layout { grid-template-columns: 1fr; }
  .ww-decision-copy .section-h2 { max-width: 100%; }
}
@media (max-width: 900px) {
  .ww-hero-split { grid-template-columns: 1fr; padding: 90px 0 60px; }
  .ww-triangle-wrap { max-width: 380px; }
  .ww-three-grid { grid-template-columns: 1fr; gap: 20px; }
  .ww-outcomes-grid { grid-template-columns: repeat(2, 1fr); }
  .ww-flow-row { flex-direction: column; gap: 24px; }
  .ww-flow-connector { width: 2px; height: 40px; background: linear-gradient(180deg, rgba(47,75,255,0.15), rgba(47,75,255,0.30), rgba(47,75,255,0.15)); }
  .ww-flow-connector::after { display: none; }
  .ww-flow-inputs { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .ww-tri-diagram { width: 340px; height: 294px; }
}
@media (max-width: 640px) {
  .ww-problem-grid { grid-template-columns: repeat(2, 1fr); }
  .ww-outcomes-grid { grid-template-columns: 1fr; }
  .ww-compare-layout { grid-template-columns: 1fr; }
  .ww-decision-layout { grid-template-columns: 1fr; }
  .ww-three-grid { grid-template-columns: 1fr; }
  .ww-hero-split { padding: 80px 0 48px; }
  .ww-decision-table { font-size: 12px; }
  /* Fix 1: decision table scroll wrapper */
  /* min-width:0 overrides the grid item's default min-width:auto so the 1fr
     column is actually constrained to the container width; without it the
     grid child expands to the table's natural width and overflow-x:auto never
     fires.  The !important on min-width beats the inline style="min-width:180px"
     on the <th> (inline > class specificity). */
  .ww-decision-table-wrap          { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; }
  .ww-decision-table th:first-child,
  .ww-decision-table td:first-child { min-width: 140px !important; }
  /* Fix 2: flow diagram — fluid instead of fixed 340px */
  .ww-flow-row    { padding: 0 16px; }
  .ww-tri-diagram { width: 100%; max-width: 340px; height: auto; aspect-ratio: 440 / 380; flex-shrink: 1; }
}

/* ============================================================
   PRICING PAGE — EXTENDED (May 2026 plan update)
============================================================ */

/* 4-plan grid */
.plans-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* Top Pick badge — green variant of plan-popular-badge */
.plan-top-pick-badge {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--certified-green);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  padding: 5px 14px;
  border-radius: 0 0 10px 10px;
  white-space: nowrap;
}
.plan-card-top-pick { border-color: var(--certified-green); }

/* Plan save badge inline */
.plan-save-badge {
  display: inline-block;
  background: var(--certified-green-soft);
  color: var(--certified-green-dark);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 100px;
  margin-left: 8px;
  vertical-align: middle;
}

/* Price strikethrough (original monthly shown next to annual) */
.plan-price-was {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-soft);
  text-decoration: line-through;
  display: block;
  margin-bottom: 2px;
  letter-spacing: 0;
}

/* Comparison table */
.pricing-comparison-section { padding: 80px 0; }
.pricing-comparison-toggle {
  display: flex;
  gap: 12px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.pct-btn {
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.pct-btn.active {
  background: var(--signal-blue);
  border-color: var(--signal-blue);
  color: #fff;
}
.pricing-comparison-wrapper { overflow-x: auto; border-radius: 16px; border: 1px solid var(--border); }
.pricing-comparison-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
  font-size: 13px;
  background: var(--surface);
}
.pricing-comparison-table thead th {
  padding: 20px 16px 16px;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 2px solid var(--border);
  background: var(--surface-soft);
  white-space: nowrap;
}
.pricing-comparison-table thead th:first-child {
  text-align: left;
  color: var(--text-muted);
  font-size: 10px;
  width: 36%;
}
.pct-plan-price {
  display: block;
  font-size: 22px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.03em;
  margin-top: 4px;
}
.pct-plan-price sub { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.pricing-comparison-table .section-row td {
  padding: 10px 16px 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  background: var(--bg-main);
  border-top: 1px solid var(--border);
}
.pricing-comparison-table tbody tr:not(.section-row) td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  vertical-align: middle;
  line-height: 1.4;
}
.pricing-comparison-table tbody tr:not(.section-row) td:first-child {
  color: var(--ink-soft);
  font-weight: 500;
}
.pricing-comparison-table tbody tr:not(.section-row) td:not(:first-child) {
  text-align: center;
}
.pct-check { color: var(--certified-green); font-size: 16px; font-weight: 700; }
.pct-dash { color: var(--text-soft); font-size: 18px; }
.pct-addon { font-size: 11px; color: var(--signal-blue); font-weight: 600; }
.pct-default { font-size: 11px; color: var(--certified-green); font-weight: 600; }
.pct-text { font-size: 11px; color: var(--text-muted); }

/* Plan card stat block — orders/channels prominent display */
.plan-card-stats {
  display: flex;
  gap: 8px;
  margin: 14px 0 16px;
  padding: 12px 10px;
  background: rgba(47, 75, 255, 0.05);
  border-radius: 8px;
}
.plan-card-stats .stat {
  flex: 1;
  text-align: center;
}
.plan-card-stats .stat-val {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--signal-blue);
  line-height: 1.1;
}
.plan-card-stats .stat-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 3px;
}
/* "Everything in X, plus:" delta label */
.plan-includes-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 0 0 8px;
}
/* 3-column add-ons grid */
.addons-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}

/* 3+1 grid: three cards top row, one full-width bottom */
.plans-grid-3plus1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.plan-card-span-full {
  grid-column: 1 / -1;
}

/* Wide card — horizontal layout for full-width bottom card */
.plan-card-wide {
  display: flex;
  flex-direction: row;
  gap: 48px;
  align-items: flex-start;
}
.plan-card-wide-left {
  flex: 0 0 280px;
  max-width: 280px;
}
.plan-card-wide-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.plan-card-wide .plan-cta {
  margin-top: auto;
  padding-top: 20px;
}
.plan-card-wide .plan-features {
  margin-bottom: 0;
}

/* Struck-through monthly price shown alongside annual price */
.plan-price-strike {
  font-size: 12px;
  color: var(--text-muted);
  margin: 2px 0 10px;
}
.plan-price-strike s {
  text-decoration: line-through;
  color: var(--text-muted);
}

/* Annual-only note shown on monthly grid cards */
.plan-price-annual-note {
  font-size: 12px;
  color: var(--certified-green);
  font-weight: 600;
  margin: 2px 0 10px;
}

/* Orders | Channels inline limits row */
.plan-limits {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 16px;
  padding: 8px 12px;
  background: rgba(47, 75, 255, 0.05);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.plan-limits-sep {
  color: var(--border);
  font-weight: 300;
}

/* Responsive */
@media (max-width: 1200px) {
  .plans-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .plans-grid-3plus1 { grid-template-columns: repeat(2, 1fr); }
  .plan-card-span-full { grid-column: 1 / -1; }
  .plan-card-wide { flex-direction: column; gap: 24px; }
  .plan-card-wide-left { flex: unset; max-width: none; }
}
@media (max-width: 600px) {
  .plans-grid-3plus1 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .addons-grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .plans-grid-4 { grid-template-columns: 1fr; }
  .pricing-comparison-wrapper { border-radius: 8px; }
}

/* ── Guaranteed outcome block (inside plan cards) ─────────────── */
.plan-outcome {
  margin: 14px 0 4px;
  padding: 11px 13px 12px;
  background: rgba(24, 166, 106, 0.06);
  border: 1px solid rgba(24, 166, 106, 0.18);
  border-radius: 10px;
}
.plan-outcome-label {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--certified-green-dark);
  margin-bottom: 7px;
}
.plan-outcome-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.plan-outcome-list li {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.5;
  padding: 2px 0 2px 18px;
  position: relative;
}
.plan-outcome-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--certified-green);
  font-weight: 700;
  font-size: 11px;
  top: 3px;
}

/* ── Compare plans link (inside plan cards) ───────────────────── */
.plan-compare-link {
  display: block;
  font-size: 12px;
  color: var(--signal-blue);
  text-decoration: none;
  margin: 10px 0 14px;
  opacity: 0.75;
  transition: opacity 0.15s;
}
.plan-compare-link:hover {
  opacity: 1;
  text-decoration: underline;
}

/* ── Collapsible feature list toggle ─────────────────────────── */
.plan-features-toggle {
  display: block;
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  padding: 10px 0 0;
  margin-top: 12px;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--signal-blue);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: color 0.15s;
  letter-spacing: 0;
}
.plan-features-toggle:hover { color: var(--signal-blue); opacity: 0.75; }
.plan-features-toggle::after {
  content: ' ↓';
  font-size: 10px;
}
.plan-features-toggle.open::after {
  content: ' ↑';
}

/* ============================================================
   DEMO MODAL
   ============================================================ */
.sb-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 20, 0.70);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}
.sb-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.sb-modal {
  background: #fff;
  border-radius: 14px;
  width: 92%;
  max-width: 740px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.28);
  transform: translateY(16px) scale(0.98);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.sb-modal-overlay.is-open .sb-modal {
  transform: translateY(0) scale(1);
}
.sb-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 15px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sb-modal-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-main);
}
.sb-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.sb-modal-close:hover {
  background: var(--surface-alt);
  color: var(--text-main);
}
.sb-modal-body {
  flex: 1;
  overflow-y: auto;
  min-height: 520px;
}
.meetings-iframe-container {
  width: 100%;
  min-height: 520px;
}
.meetings-iframe-container iframe {
  width: 100% !important;
  min-height: 520px !important;
  border: none !important;
  display: block;
}

/* Loading spinner — shown while HubSpot's embed script creates the iframe.
   Hidden automatically via CSS :has() once the iframe exists, and by JS
   (.sb-hidden class) as a fallback for browsers that don't support :has(). */
.sb-embed-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 520px;
  color: var(--text-muted);
  font-size: 13px;
  letter-spacing: 0.02em;
}
.sb-embed-spinner {
  width: 32px;
  height: 32px;
  border: 2.5px solid rgba(99, 102, 241, 0.15);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: sb-spin 0.75s linear infinite;
}
@keyframes sb-spin {
  to { transform: rotate(360deg); }
}
.meetings-iframe-container:has(iframe) ~ .sb-embed-loading,
.sb-embed-loading.sb-hidden {
  display: none;
}

@media (max-width: 640px) {
  .sb-modal {
    max-height: 92vh;
    max-height: 92dvh; /* dvh = dynamic viewport height: excludes iOS Safari browser chrome */
    border-radius: 12px 12px 0 0;
    align-self: flex-end;
  }
  /* On mobile the iframe IS the scroll container — not .sb-modal-body.
     We cap the iframe height so HubSpot's content overflows it, then the
     iframe's own scroll context handles touch (iOS natively scrolls iframes
     that have content taller than their element height). The !important
     overrides HubSpot's embed JS which sets inline style="height:Npx". */
  .sb-modal-body {
    min-height: 0;
    overflow-y: visible; /* iframe handles its own scroll */
  }
  .meetings-iframe-container {
    min-height: 0;
  }
  .meetings-iframe-container iframe {
    min-height: 0 !important;
    /* Cap height so content overflows the frame → frame becomes scrollable */
    height: calc(92dvh - 58px) !important;
    max-height: calc(92dvh - 58px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .sb-embed-loading {
    min-height: 200px;
  }
}

/* ============================================================
   LP VARIANT — Paid-traffic landing pages (no-nav)
   Used by templates/signal-blue-base-lp.html.
   Body carries .sb-lp; nav is replaced with a thin logo strip.
============================================================ */
.sb-lp-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.sb-lp-header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 40px;
  display: flex;
  align-items: center;
}
.sb-lp-logo {
  display: inline-flex;
  align-items: center;
  pointer-events: none; /* logo is intentionally non-clickable on LP variants */
}
.sb-lp-logo img {
  height: 28px;
  width: auto;
}
@media (max-width: 768px) {
  .sb-lp-header-inner { padding: 12px 24px; }
}

/* LP form modal — HubSpot form embed target inside the shared .sb-modal.
   These rules override HubSpot's default form HTML so the embedded form
   matches the Signal Blue visual system (Inter, signal-blue accents,
   rounded inputs, no list bullets on radios, pill submit button). */
.lp-form-target {
  padding: 24px 28px 32px;
  min-height: 520px;
}
.lp-form-target,
.lp-form-target form,
.lp-form-target .hs-form {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  color: var(--ink);
}

/* Field wrapper + spacing */
.lp-form-target .hs-form-field,
.lp-form-target .field {
  margin-bottom: 16px;
}

/* Field labels (the question text above each input) */
.lp-form-target .hs-form-field > label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 6px;
  line-height: 1.4;
}
.lp-form-target .hs-form-required {
  color: var(--signal-blue);
  margin-left: 2px;
}

/* Text-like inputs + textarea + select */
.lp-form-target input[type="text"],
.lp-form-target input[type="email"],
.lp-form-target input[type="tel"],
.lp-form-target input[type="url"],
.lp-form-target input[type="number"],
.lp-form-target input[type="password"],
.lp-form-target textarea,
.lp-form-target select {
  width: 100%;
  height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  box-sizing: border-box;
  transition: border-color 0.14s, box-shadow 0.14s;
  -webkit-appearance: none;
  appearance: none;
}
.lp-form-target select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%2364748b' stroke-width='1.6' d='M1 1.5l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.lp-form-target textarea {
  height: auto;
  min-height: 88px;
  padding: 12px 14px;
  resize: vertical;
}
.lp-form-target input:focus,
.lp-form-target textarea:focus,
.lp-form-target select:focus {
  outline: none;
  border-color: var(--signal-blue);
  box-shadow: 0 0 0 3px rgba(47,75,255,0.12);
}
.lp-form-target input::placeholder,
.lp-form-target textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}

/* Two-column rows (HubSpot's .form-columns-2 wrapper) */
.lp-form-target .form-columns-2 {
  display: flex;
  gap: 12px;
}
.lp-form-target .form-columns-2 > .hs-form-field,
.lp-form-target .form-columns-2 > div {
  flex: 1;
  width: auto !important;
  margin-right: 0 !important;
  float: none !important;
}
.lp-form-target .form-columns-1 .hs-form-field,
.lp-form-target .form-columns-1 > div {
  width: 100% !important;
  float: none !important;
}
.lp-form-target .input { margin-right: 0 !important; }

/* Radio / checkbox lists — kill default browser list styling */
.lp-form-target ul.inputs-list,
.lp-form-target ul.hs-error-msgs {
  list-style: none;
  padding: 0;
  margin: 0;
}
.lp-form-target ul.inputs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.lp-form-target ul.inputs-list > li { list-style: none; margin: 0; }

.lp-form-target .hs-form-radio label,
.lp-form-target .hs-form-checkbox label,
.lp-form-target .hs-form-booleancheckbox label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0;
}
.lp-form-target .hs-form-radio input[type="radio"],
.lp-form-target .hs-form-checkbox input[type="checkbox"],
.lp-form-target .hs-form-booleancheckbox input[type="checkbox"] {
  accent-color: var(--signal-blue);
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
}

/* Submit button — match .btn-primary visual */
.lp-form-target .hs-button,
.lp-form-target input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  margin-top: 12px;
  padding: 0 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2F4BFF 0%, #1932C7 100%);
  color: #fff !important;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
  border: none;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(47,75,255,0.22),
              inset 0 1px 0 rgba(255,255,255,0.22);
  transition: transform 0.14s, box-shadow 0.14s;
  -webkit-appearance: none;
  appearance: none;
}
.lp-form-target .hs-button:hover,
.lp-form-target input[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(47,75,255,0.30),
              inset 0 1px 0 rgba(255,255,255,0.26);
}
.lp-form-target .hs-button:active,
.lp-form-target input[type="submit"]:active {
  transform: translateY(0);
}

/* Inline error messages */
.lp-form-target .hs-error-msgs {
  margin-top: 6px;
}
.lp-form-target .hs-error-msgs li,
.lp-form-target .hs-error-msg {
  font-size: 12px;
  color: #d92d20;
  line-height: 1.4;
}
.lp-form-target input.invalid,
.lp-form-target select.invalid,
.lp-form-target textarea.invalid {
  border-color: #d92d20;
}

/* Legal consent / GDPR copy */
.lp-form-target .legal-consent-container {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 12px;
  line-height: 1.5;
}
.lp-form-target .legal-consent-container a {
  color: var(--signal-blue);
  text-decoration: underline;
}

/* Success state (after submission) */
.lp-form-target .submitted-message,
.lp-form-target .hs-main-font-element {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  padding: 24px 0;
}

/* reCAPTCHA spacing */
.lp-form-target .grecaptcha-badge { margin: 12px 0; }
.lp-form-target .hs_recaptcha { margin-top: 4px; }

/* Mobile */
@media (max-width: 640px) {
  .lp-form-target { padding: 20px 18px 24px; min-height: 460px; }
  .lp-form-target .form-columns-2 { flex-direction: column; gap: 0; }
}

/* ============================================================
   SANDBOX CTA COMPONENT
   Live product preview — inserted after 3rd section on inner pages
   ============================================================ */
.section-sandbox {
  background: #060d1c;
  padding: 52px 0 44px;
}

/* ── Header ──────────────────────────────────────────────── */
.sbx-header {
  text-align: center;
  margin-bottom: 24px;
}
.sbx-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(47, 75, 255, 0.14);
  border: 1px solid rgba(47, 75, 255, 0.30);
  border-radius: 100px;
  padding: 5px 16px 5px 10px;
  margin-bottom: 14px;
}
.sbx-chip-dot {
  width: 7px;
  height: 7px;
  background: #4D7FFF;
  border-radius: 50%;
  flex-shrink: 0;
  animation: sbx-pulse 2.2s ease-in-out infinite;
}
@keyframes sbx-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(77, 127, 255, 0.5); }
  50%       { opacity: 0.55; box-shadow: 0 0 0 4px rgba(77, 127, 255, 0); }
}
.sbx-chip-lbl {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #4D7FFF;
}
.sbx-headline {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 850;
  color: #ffffff;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 10px;
}
.sbx-sub {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.50);
  line-height: 1.65;
  max-width: 520px;
  margin: 0 auto;
}

/* ── Browser shell ───────────────────────────────────────── */
.sbx-browser {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
.sbx-chrome {
  background: #1a2540;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sbx-chrome-dots {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.sbx-chrome-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.sbx-urlbar {
  flex: 1;
  background: #0f172a;
  border-radius: 5px;
  padding: 5px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-family: var(--mono, ui-monospace, monospace);
  color: rgba(255, 255, 255, 0.38);
}
.sbx-url-lock {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.22);
}

/* ── Clickable overlay area ──────────────────────────────── */
.sbx-screen {
  position: relative;
  cursor: pointer;
  display: block;
}
.sbx-screen:hover .sbx-overlay { background: rgba(6, 13, 28, 0.30); }
.sbx-screen:hover .sbx-play-btn { transform: scale(1.07); background: #2F4BFF; }

/* ── App UI ──────────────────────────────────────────────── */
.sbx-ui {
  display: flex;
  min-height: 340px;
  background: #f4f6f9;
}

/* Sidebar */
.sbx-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: #12181f;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.sbx-topbar {
  background: #0d1117;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  gap: 10px;
}
.sbx-topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sbx-logo {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.sbx-logo-mark {
  color: #FF6B2B;
}
.sbx-online-badge {
  font-size: 8px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  padding: 1px 5px;
  letter-spacing: 0.04em;
}
.sbx-contact-btn {
  font-size: 8px;
  font-weight: 800;
  background: #2F4BFF;
  color: #ffffff;
  padding: 4px 9px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.sbx-appbar {
  background: #0d1117;
  padding: 7px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  gap: 8px;
}
.sbx-preview-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 700;
  color: #4D7FFF;
  border: 1px solid rgba(77, 127, 255, 0.35);
  border-radius: 100px;
  padding: 2px 9px;
  white-space: nowrap;
}
.sbx-preview-dot {
  width: 5px;
  height: 5px;
  background: #4D7FFF;
  border-radius: 50%;
}
.sbx-store-sel {
  font-size: 9px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.50);
  background: rgba(255, 255, 255, 0.06);
  padding: 3px 9px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.sbx-store-icon {
  width: 14px;
  height: 14px;
  background: #18A66A;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 800;
  color: white;
}
.sbx-nav {
  padding: 12px 8px;
  flex: 1;
}
.sbx-nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 1px;
  white-space: nowrap;
}
.sbx-nav-item.active {
  background: rgba(47, 75, 255, 0.20);
  color: #7B93FF;
}
.sbx-nav-item svg {
  width: 15px;
  height: 15px;
  opacity: 0.7;
  flex-shrink: 0;
}
.sbx-nav-item.active svg { opacity: 1; }
.sbx-nav-chevron {
  margin-left: auto;
  font-size: 9px;
  opacity: 0.35;
}
.sbx-nav-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  margin: 8px 0;
}

/* Main content area */
.sbx-main {
  flex: 1;
  background: #f4f6f9;
  padding: 18px 20px;
  overflow: hidden;
  min-width: 0;
}

/* Metric cards row */
.sbx-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.sbx-mc {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px 14px;
}
.sbx-mc-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #eef0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.sbx-mc-icon svg {
  width: 15px;
  height: 15px;
  color: #4D7FFF;
}
.sbx-mc-title {
  font-size: 10px;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 4px;
  line-height: 1.3;
}
.sbx-mc-val {
  font-size: 22px;
  font-weight: 900;
  color: #111827;
  line-height: 1;
  letter-spacing: -0.02em;
}
.sbx-mc-sub {
  font-size: 9px;
  color: #9ca3af;
  margin-top: 4px;
  line-height: 1.4;
}
.sbx-mc-sub.warn { color: #d97706; font-weight: 600; }
.sbx-mc-sub.ok   { color: #059669; font-weight: 600; }

/* Lower two-column layout */
.sbx-lower {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 10px;
}

/* Attention panel */
.sbx-attention {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 14px;
  border-left: 3px solid #f59e0b;
}
.sbx-attn-title {
  font-size: 11px;
  font-weight: 800;
  color: #92400e;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sbx-attn-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid #f3f4f6;
}
.sbx-attn-row:last-child { border-bottom: none; padding-bottom: 0; }
.sbx-attn-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.sbx-attn-icon.red   { background: rgba(229, 72, 61, 0.10); color: #E5483D; }
.sbx-attn-icon.amber { background: rgba(245, 158, 11, 0.10); color: #d97706; }
.sbx-attn-icon svg   { width: 11px; height: 11px; }
.sbx-attn-body { flex: 1; min-width: 0; }
.sbx-attn-body-title {
  font-size: 10px;
  font-weight: 700;
  color: #374151;
  line-height: 1.35;
  margin-bottom: 2px;
}
.sbx-attn-body-sub {
  font-size: 9px;
  color: #9ca3af;
  line-height: 1.45;
}
.sbx-attn-btn {
  font-size: 8px;
  font-weight: 800;
  background: #2F4BFF;
  color: #ffffff;
  padding: 4px 9px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.04em;
  align-self: center;
}

/* Activity feed */
.sbx-feed {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 14px;
}
.sbx-feed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.sbx-feed-title {
  font-size: 11px;
  font-weight: 800;
  color: #374151;
}
.sbx-feed-filter {
  width: 16px;
  height: 16px;
  color: #9ca3af;
}
.sbx-feed-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #f3f4f6;
}
.sbx-feed-row:last-child { border-bottom: none; padding-bottom: 0; }
.sbx-feed-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.sbx-feed-icon.green { background: rgba(5, 150, 105, 0.10); color: #059669; }
.sbx-feed-icon.gray  { background: rgba(107, 114, 128, 0.10); color: #6b7280; }
.sbx-feed-icon svg   { width: 10px; height: 10px; }
.sbx-feed-body { flex: 1; min-width: 0; }
.sbx-feed-name {
  font-size: 10px;
  font-weight: 700;
  color: #374151;
}
.sbx-feed-time {
  font-size: 9px;
  color: #9ca3af;
  margin-left: 4px;
}
.sbx-feed-desc {
  font-size: 9px;
  color: #6b7280;
  margin-top: 1px;
  line-height: 1.4;
}
.sbx-feed-badge {
  display: inline-block;
  background: #f3f4f6;
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 8px;
  font-weight: 600;
  color: #6b7280;
  margin-top: 3px;
}

/* App footer bar */
.sbx-ui-footer {
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
  padding: 7px 20px;
  font-size: 9px;
  color: #9ca3af;
  text-align: center;
  letter-spacing: 0.01em;
}

/* ── Play button overlay ─────────────────────────────────── */
.sbx-overlay {
  position: absolute;
  inset: 0;
  background: rgba(6, 13, 28, 0.42);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  transition: background 0.20s ease;
  text-decoration: none;
}
.sbx-play-btn {
  width: 72px;
  height: 72px;
  background: rgba(47, 75, 255, 0.90);
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease, background 0.18s ease;
}
.sbx-play-btn svg {
  width: 26px;
  height: 26px;
  fill: #ffffff;
  margin-left: 4px;
}
.sbx-play-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

/* ── Disclaimer ──────────────────────────────────────────── */
.sbx-disclaimer {
  text-align: center;
  margin-top: 20px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.22);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .sbx-metrics { grid-template-columns: repeat(2, 1fr); }
  .sbx-mc-val  { font-size: 18px; }
}
@media (max-width: 768px) {
  .section-sandbox { padding: 60px 0; }
  .sbx-sidebar      { width: 160px; }
  .sbx-topbar       { padding: 8px 10px; }
  .sbx-contact-btn  { display: none; }
  .sbx-appbar       { padding: 6px 10px; }
  .sbx-main         { padding: 12px 14px; }
  .sbx-metrics      { grid-template-columns: repeat(2, 1fr); gap: 7px; margin-bottom: 10px; }
  .sbx-mc           { padding: 9px 10px; }
  .sbx-mc-val       { font-size: 16px; }
  .sbx-lower        { grid-template-columns: 1fr; }
  .sbx-feed         { display: none; }
  .sbx-play-btn     { width: 56px; height: 56px; }
  .sbx-play-btn svg { width: 20px; height: 20px; }
}
@media (max-width: 540px) {
  .sbx-sidebar { display: none; }
  .sbx-metrics { grid-template-columns: repeat(2, 1fr); }
  .sbx-ui      { min-height: 300px; }
}


/* ================================================================
   CERTIFIED BOOKS CLOSED — Page Components
   All styles for the /certified-books-closed page.
   ================================================================ */

/* ── Hero: dark overrides for .hero-heading / .hero-pill ──────── */
.hero-dark .hero-heading { color: #fff; }
.hero-dark .hero-pill {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.65);
}

/* ── Hero stats band ──────────────────────────────────────────── */
.cb-stats-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.cb-stat-item {
  padding: 0 28px 40px;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.cb-stat-item:first-child { padding-left: 0; }
.cb-stat-item:last-child  { border-right: none; }
.cb-stat-val {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #fff;
  line-height: 1;
}
.cb-stat-lbl {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,0.45);
}
@media (max-width: 900px) {
  .cb-stats-inner { grid-template-columns: 1fr 1fr; }
  .cb-stat-item:nth-child(2) { border-right: none; }
}

/* ── Section: The Service ─────────────────────────────────────── */
.section-service {
  background: linear-gradient(180deg, #FBFCFF 0%, #F7F8FC 100%);
  padding: 112px 0;
}
.service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
  margin-top: 48px;
}
.service-body p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-muted);
  margin-top: 16px;
}
.service-body p:first-child { margin-top: 0; }
.service-body p.closing-line { font-weight: 700; color: var(--ink); }
.stat-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.stat-card {
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(221,228,242,0.95);
  border-radius: 20px;
  box-shadow: 0 16px 48px rgba(47,75,255,0.05);
  padding: 24px 28px;
}
.stat-number {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--signal-blue);
}
.stat-label {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}
@media (max-width: 900px) {
  .service-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* ── Section: Scope ───────────────────────────────────────────── */
.section-scope {
  background: var(--surface);
  padding: 112px 0;
}
.scope-intro { max-width: 680px; }
.scope-intro p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-muted);
  margin-top: 20px;
}
.scope-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 48px;
}
.scope-card {
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(221,228,242,0.95);
  border-radius: 24px;
  box-shadow: 0 16px 48px rgba(47,75,255,0.05);
  padding: 28px;
}
.scope-card-title {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal-blue);
  margin-bottom: 16px;
}
.scope-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.scope-list li {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  padding-left: 16px;
  position: relative;
}
.scope-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--signal-blue);
  font-weight: 700;
}
.scope-callout {
  background: var(--surface-soft);
  border: 1px solid rgba(47,75,255,0.14);
  border-radius: 20px;
  padding: 28px 32px;
  max-width: 680px;
  margin-top: 32px;
}
.scope-callout p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  font-weight: 500;
}
@media (max-width: 768px) {
  .scope-grid { grid-template-columns: 1fr; }
}

/* ── Section: The Value ───────────────────────────────────────── */
.section-value {
  background: var(--bg-main);
  padding: 112px 0;
}
.value-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
  margin-top: 48px;
}
.value-body p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-muted);
  margin-bottom: 20px;
}
.value-body p:last-child { margin-bottom: 0; }
.value-panels { display: flex; flex-direction: column; gap: 16px; }
.value-panel-label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.value-panel-error {
  background: var(--error-soft);
  border: 1px solid rgba(229,72,77,0.22);
  border-radius: 20px;
  padding: 24px;
}
.value-panel-error .value-panel-label { color: var(--error-red); }
.value-panel-success {
  background: var(--certified-green-soft);
  border: 1px solid rgba(24,166,106,0.22);
  border-radius: 20px;
  padding: 24px;
}
.value-panel-success .value-panel-label { color: var(--certified-green); }
.value-panel-items { display: flex; flex-direction: column; gap: 0; }
.value-panel-item {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.value-panel-item:last-child { border-bottom: none; padding-bottom: 0; }
@media (max-width: 900px) {
  .value-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* ── Section: The Guarantee (Distinction) ────────────────────── */
.section-distinction {
  background: var(--surface);
  padding: 112px 0;
}
.distinction-intro { max-width: 640px; }
.distinction-intro p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-muted);
  margin-top: 20px;
}
.distinction-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border);
  border-radius: 24px;
  overflow: hidden;
  margin-top: 40px;
  box-shadow: 0 24px 70px rgba(47,75,255,0.06);
}
.distinction-col { padding: 36px; }
.distinction-col-left { background: var(--surface-soft); }
.distinction-col-right {
  background: var(--surface-blue);
  border-left: 1px solid var(--border);
}
.distinction-col-label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.distinction-col-left .distinction-col-label  { color: var(--text-soft); }
.distinction-col-right .distinction-col-label { color: var(--signal-blue); }
.distinction-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.6;
}
.distinction-item:last-child { border-bottom: none; padding-bottom: 0; }
.distinction-col-left  .distinction-item { color: var(--text-muted); }
.distinction-col-right .distinction-item { color: var(--ink-soft); font-weight: 500; }
.distinction-item.strong { font-weight: 800; color: var(--ink); }
@media (max-width: 768px) {
  .distinction-grid { grid-template-columns: 1fr; }
  .distinction-col-right { border-left: none; border-top: 1px solid var(--border); }
}

/* ── Division-of-labor items (titled, with marker gutter) ─────────
   Lives inside a .distinction-grid / .distinction-col shell.
   Adds the only thing the distinction primitives lack: a list item
   with a leading number/check marker plus a title and a body line. */
.role-item {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.role-item:last-child { border-bottom: none; padding-bottom: 0; }
.role-marker {
  flex-shrink: 0;
  min-width: 20px;
  padding-top: 2px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1.5;
}
.distinction-col-left  .role-marker { color: var(--text-soft); }
.distinction-col-right .role-marker { color: var(--signal-blue); font-size: 15px; }
.role-item-text { min-width: 0; }
.role-item-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 5px;
}
.role-item-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

/* ── Section: The Process ─────────────────────────────────────── */
.cb-section-process {
  background: var(--bg-main);
  padding: 112px 0;
}
.cb-process-intro { max-width: 600px; margin-bottom: 56px; }
.cb-process-flow { display: flex; align-items: stretch; gap: 0; }
.cb-process-step {
  background: rgba(255,255,255,0.88);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 16px 48px rgba(47,75,255,0.05);
  padding: 24px;
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cb-process-step-num {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal-blue);
}
.cb-process-step-num.certified { color: var(--certified-green); }
.cb-process-step-title {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin-top: 12px;
}
.cb-process-step-body {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-top: 8px;
}
.cb-process-step-source {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-top: 8px;
}
.cb-process-certified-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--certified-green-soft);
  border: 1px solid rgba(24,166,106,0.3);
  color: var(--certified-green);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 12px;
}
.cb-process-arrow {
  font-size: 24px;
  color: var(--signal-blue);
  display: flex;
  align-items: center;
  padding: 0 12px;
  flex-shrink: 0;
  align-self: center;
}
@media (max-width: 900px) {
  .cb-process-flow { flex-direction: column; gap: 0; }
  .cb-process-arrow { padding: 8px 0; transform: rotate(90deg); align-self: center; }
  .cb-process-step { text-align: left; align-items: flex-start; }
  .cb-process-certified-badge { align-self: flex-start; }
}

/* ── Section: Audit CTA ───────────────────────────────────────── */
.section-audit-cta { padding: 0 0 80px; }
.audit-cta-panel {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}
.audit-cta-inner {
  background: var(--dark-panel);
  border-radius: 42px;
  padding: 64px;
  position: relative;
  overflow: hidden;
}
.audit-cta-inner::before {
  content: '';
  position: absolute;
  top: -60px; left: -60px;
  width: 400px; height: 400px;
  background: radial-gradient(ellipse at center, rgba(47,75,255,0.18), transparent 70%);
  pointer-events: none;
}
.audit-cta-inner::after {
  content: '';
  position: absolute;
  bottom: -40px; right: 80px;
  width: 280px; height: 280px;
  background: radial-gradient(ellipse at center, rgba(24,166,106,0.1), transparent 70%);
  pointer-events: none;
}
.audit-cta-content { position: relative; z-index: 1; max-width: 640px; }
.audit-cta-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 20px;
}
.audit-cta-h2 {
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  font-weight: 900;
  color: white;
  margin-bottom: 20px;
}
.audit-cta-body {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(255,255,255,0.6);
  margin-bottom: 36px;
  max-width: 520px;
}
.audit-cta-btns { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.btn-cta-blue {
  height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2F4BFF 0%, #1932C7 100%);
  color: white;
  font-size: 15px;
  font-weight: 850;
  display: inline-flex;
  align-items: center;
  border: none;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
}
.btn-cta-blue:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(47,75,255,0.5);
}
.btn-cta-ghost {
  font-size: 15px;
  font-weight: 750;
  color: rgba(255,255,255,0.6);
  transition: color 0.18s;
}
.btn-cta-ghost:hover { color: white; }
@media (max-width: 768px) {
  .audit-cta-inner { padding: 40px 28px; border-radius: 28px; }
  .audit-cta-panel { padding: 0 16px; }
}

/* ── Section: Proof / Close Package panel ────────────────────── */
.section-proof {
  background: var(--surface);
  padding: 112px 0;
}
.proof-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  margin-top: 48px;
}
.proof-grid-solo {
  grid-template-columns: minmax(0, 600px);
  justify-content: center;
}
.pv-panel {
  background: rgba(255,255,255,0.88);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(47,75,255,0.08);
  padding: 28px;
}
.pv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.pv-title {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.pv-badge {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--certified-green-soft);
  color: var(--certified-green);
  border: 1px solid rgba(24,166,106,0.25);
}
.pv-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.pv-row:last-of-type { border-bottom: none; }
.pv-src { color: var(--text-muted); flex: 1; }
.pv-arr { color: var(--text-soft); font-size: 11px; }
.pv-tgt { color: var(--ink-soft); font-weight: 600; flex: 1.5; text-align: right; }
.pv-ok  { color: var(--certified-green); font-weight: 800; margin-left: 4px; }
.pv-certified-line {
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--certified-green-soft);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--certified-green);
  font-family: 'Courier New', 'Courier', monospace;
}
@media (max-width: 900px) {
  .proof-grid { grid-template-columns: 1fr; }
}

/* ── Section: The Old Process + Terminal block ───────────────── */
.section-old-process {
  background: var(--bg-main);
  padding: 112px 0;
}
.old-process-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
  margin-top: 48px;
}
.old-process-body p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-muted);
  margin-top: 16px;
}
.old-process-body p:first-child { margin-top: 0; }

.terminal-block {
  background: var(--dark-panel);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  overflow: hidden;
  font-family: 'Courier New', 'Courier', monospace;
}
.terminal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: var(--dark-panel-2);
}
.terminal-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.terminal-dot-red   { background: #ff5f57; }
.terminal-dot-amber { background: #febc2e; }
.terminal-dot-green { background: #28c840; }
.terminal-title {
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.08em;
  margin-left: 8px;
}
.terminal-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.terminal-row:last-child { border-bottom: none; }
.terminal-key {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  min-width: 48px;
  flex-shrink: 0;
}
.terminal-val-warn   { font-size: 12px; color: var(--warning-amber); }
.terminal-val-result { font-size: 12px; color: var(--error-red); font-weight: 700; }
.terminal-divider    { border: none; border-top: 1px solid rgba(255,255,255,0.07); margin: 0; }

@media (max-width: 900px) {
  .old-process-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ============================================================
   ARTIFACT ROW LAYOUT — NO-WRAP PRIMITIVES
   ──────────────────────────────────────────────────────────
   Rule: In any label→value or label→badge row, the right-side
   element (value, badge, status, chip) must NEVER wrap to a
   second line. The left label absorbs all overflow instead.

   Pattern applied to every affected row type:
     container   → min-width: 0  (allows children to shrink below intrinsic width)
     left child  → flex: 1 1 0; min-width: 0  (absorbs overflow)
     right child → white-space: nowrap; flex-shrink: 0  (immovable)

   This block is the canonical, single-source fix. Do not add
   white-space/flex-shrink overrides to individual rules above —
   keep all no-wrap enforcement here.
   ============================================================ */

/* ── recon-inner-row: the 3-col inner row inside a recon-item ── */
/* amount (left) · count (middle, muted) · status (right, protected) */
.recon-inner-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  min-width: 0;
  gap: 6px;
}
.recon-count {
  font-size: 11px;
  color: rgba(255,255,255,0.38);
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}

/* ── Step 1: Containers — enable children to shrink below content-size ── */
.rrn-row,
.demo-row,
.ledger-row,
.terminal-row,
.hww-d-row,
.hww-cert-footer-row,
.sb-output-row,
.sb-output-total,
.artifact-header,
.artifact-bottom,
.demo-card-header,
.demo-card-footer {
  min-width: 0;
}

/* ── Step 2: Left labels — flex-shrink to absorb overflow ── */
.rrn-row > span:first-child,
.demo-row-label,
.ledger-row > *:first-child,
.hww-d-label,
.sb-output-row > *:first-child,
.sb-output-row-label,
.sb-output-total > *:first-child {
  flex: 1 1 0;
  min-width: 0;
}

/* terminal-row: key is fixed-width left anchor, val is flex remainder */
.terminal-row .terminal-key {
  flex-shrink: 0;
}
.terminal-row .terminal-val,
.terminal-row .terminal-val-warn,
.terminal-row .terminal-val-result {
  flex: 1 1 0;
  min-width: 0;
  text-align: right;
}

/* ── Step 3: Right values/badges/chips — NEVER shrink, NEVER wrap ── */
.rrn-row > span:last-child,
.demo-row-val,
.demo-val-green,
.demo-val-red,
.ledger-row > *:last-child,
.ledger-neg,
.hww-d-val,
.hww-cert-footer-row > *:last-child,
.sb-output-row > *:last-child,
.sb-output-row-val,
.sb-output-total-val,
/* badges and status chips — universal */
.status-pill,
.certified-stamp,
.demo-certified-badge,
.demo-specialist,
.demo-live-chip,
.rrn-live,
.artifact-header-date,
.artifact-specialist,
.recon-status,
.recon-amount {
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── artifact-bottom: certified stamp + specialist, neither wraps ── */
.artifact-bottom {
  flex-wrap: nowrap;
}

/* ── demo-card-footer: badge stays fixed, specialist truncates if needed ── */
.demo-card-footer {
  flex-wrap: nowrap;
}
.demo-card-footer .demo-specialist {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── demo-card-header / rrn-header: live chip never wraps ── */
.demo-card-header,
.rrn-header {
  flex-wrap: nowrap;
}

/* ── certified-books-closed: hero silhouettes ── */
.cb-hero-glow {
  position: absolute;
  bottom: -60px;
  right: -80px;
  width: 600px;
  height: 600px;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    ellipse 60% 50% at 55% 50%,
    rgba(228,146,28,.14) 0%,
    rgba(195,115,15,.06) 50%,
    transparent 75%
  );
}
.cb-sil-wrap {
  position: absolute;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}
.cb-sil-wrap--left  { left: -30px; }
.cb-sil-wrap--mid   { right: 200px; }
.cb-sil-wrap--right { right: -20px; }
.cb-sil-img {
  display: block;
  height: 380px;
  width: auto;
  opacity: 0.10;
}
.cb-sil-wrap--left  .cb-sil-img { height: 320px; opacity: 0.07; }
.cb-sil-wrap--mid   .cb-sil-img { height: 340px; opacity: 0.08; }
.cb-sil-wrap--right .cb-sil-img { height: 400px; opacity: 0.11; }
@media (max-width: 1023px) {
  .cb-sil-wrap--left, .cb-sil-wrap--mid { display: none; }
}
@media (max-width: 767px) {
  .cb-sil-wrap, .cb-hero-glow { display: none; }
}

/* ============================================================
   WHY BOOKS BREAK — CONFLICT PANEL
   Visual for "Systems That Don't Talk" section.
   Shows divergent inventory counts across systems — the problem
   state, not the solution. Uses error-red tokens for mismatch.
   ============================================================ */
.sb-conflict-panel {
  background: var(--dark-panel);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 24px 28px;
  max-width: 400px;
  width: 100%;
}
.sb-conflict-panel-header {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  margin-bottom: 4px;
}
.sb-conflict-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.sb-conflict-source {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  flex: 1 1 0;
  min-width: 0;
}
.sb-conflict-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sb-conflict-count {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  white-space: nowrap;
  flex-shrink: 0;
}
.sb-conflict-mismatch {
  margin-top: 16px;
  padding: 12px 14px;
  background: rgba(229,72,77,0.10);
  border: 1px solid rgba(229,72,77,0.28);
  border-radius: 8px;
}
.sb-conflict-mismatch-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--error-red);
  margin-bottom: 5px;
  font-weight: 600;
}
@media (max-width: 767px) {
  .sb-conflict-panel { max-width: 100%; }
}


/* ============================================================
   FREE DEMO SCHEDULED — Confirmation Page Components
   Prefix: ds- (demo-scheduled)
   All tokens from signal-blue-tokens.css. No hard-coded values.
   Scroll reveal handled by signal-blue-main.js .reveal pattern.
   ============================================================ */

/* ── Keyframes ─────────────────────────────────────────────── */
@keyframes dsRingPulse {
  0%   { transform: scale(1);    opacity: 0.50; }
  60%  { transform: scale(1.38); opacity: 0; }
  100% { transform: scale(1.38); opacity: 0; }
}
@keyframes dsCheckPop {
  0%   { transform: scale(0.40); opacity: 0; }
  60%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
@keyframes dsNavDotPulse {
  0%, 100% { opacity: 0.50; transform: scale(1); }
  50%       { opacity: 1;    transform: scale(1.20); }
}

/* ── Hero layout — left-aligned variant ───────────────────── */
.hero-content-left {
  text-align: left;
  margin: 0;
  max-width: none;
}
.hero-content-left::before { display: none; }
.hero-content-left .hero-headline { text-align: left; }
.hero-content-left .hero-body     { text-align: left; margin-left: 0; }
.hero-content-left .hero-ctas     { justify-content: flex-start; }

/* ── Confirm badge ────────────────────────────────────────── */
.ds-confirm-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(24,166,106,0.12);
  border: 1px solid rgba(24,166,106,0.28);
  border-radius: 999px;
  padding: 8px 18px 8px 8px;
  margin-bottom: 40px;
}
.ds-confirm-icon-wrap {
  position: relative;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}
.ds-confirm-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(24,166,106,0.50);
  animation: dsRingPulse 2.4s ease-out infinite 0.6s;
}
.ds-confirm-check {
  width: 30px;
  height: 30px;
  background: var(--certified-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: dsCheckPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s both;
}
.ds-confirm-check svg { width: 14px; height: 14px; }
.ds-confirm-label {
  font-size: 13px;
  font-weight: 750;
  color: #4DD49A;
  letter-spacing: -0.01em;
}

/* ── Meeting card (glass on dark hero) ───────────────────── */
.ds-meeting-card {
  display: inline-flex;
  flex-direction: column;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 28px 32px;
  margin-top: 44px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  min-width: 340px;
  max-width: 480px;
}
.ds-meeting-card-label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.32);
  margin-bottom: 16px;
}
.ds-meeting-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  min-width: 0;
}
.ds-meeting-row:first-of-type { padding-top: 0; }
.ds-meeting-row:last-child    { border-bottom: none; padding-bottom: 0; }
.ds-meeting-icon {
  width: 36px;
  height: 36px;
  background: rgba(47,75,255,0.18);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #7B93FF;
}
.ds-meeting-icon svg { width: 16px; height: 16px; }
.ds-meeting-info-label {
  font-size: 10px;
  font-weight: 650;
  color: rgba(255,255,255,0.36);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ds-meeting-info-val {
  font-size: 15px;
  font-weight: 750;
  color: white;
  letter-spacing: -0.02em;
  margin-top: 2px;
}

/* ── Trust strip ─────────────────────────────────────────── */
.ds-trust-strip {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 24px 0;
  overflow: hidden;
}
.ds-trust-strip-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.ds-trust-label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-soft);
  white-space: nowrap;
  flex-shrink: 0;
}
.ds-trust-divider {
  width: 1px;
  height: 20px;
  background: var(--border);
  flex-shrink: 0;
}
.ds-trust-logos {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.ds-trust-logo-item {
  display: flex;
  align-items: center;
  gap: 7px;
}
.ds-trust-stars {
  display: flex;
  gap: 2px;
}
.ds-trust-star {
  width: 11px;
  height: 11px;
  fill: var(--warning-amber);
}
.ds-trust-platform {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: -0.01em;
}

/* ── "What happens next" step cards ─────────────────────── */
.ds-steps-section {
  padding: 120px 0 80px;
  background: var(--bg-main);
}
.ds-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 60px;
}
.ds-step-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 36px 32px;
  position: relative;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.ds-step-card:hover {
  border-color: rgba(47,75,255,0.26);
  box-shadow: 0 16px 48px rgba(47,75,255,0.08);
  transform: translateY(-3px);
}
.ds-step-number {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 20px;
}
.ds-step-icon {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.ds-step-icon.blue  { background: var(--signal-blue-soft);     color: var(--signal-blue); }
.ds-step-icon.green { background: var(--certified-green-soft);  color: var(--certified-green); }
.ds-step-icon.amber { background: var(--warning-soft);          color: var(--warning-amber); }
.ds-step-icon svg { width: 22px; height: 22px; }
.ds-step-title {
  font-size: 19px;
  font-weight: 850;
  color: var(--ink-soft);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.ds-step-body {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-muted);
  margin-top: 12px;
  font-weight: 400;
}
/* Arrow connector between step cards — hidden on mobile */
.ds-step-connector {
  position: absolute;
  top: 54px;
  right: -14px;
  width: 28px;
  height: 28px;
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  color: var(--text-soft);
}
.ds-step-connector svg { width: 12px; height: 12px; }

/* ── Stats dark band ─────────────────────────────────────── */
.ds-stats-band {
  background: var(--dark-panel-2);
  border-top: 1px solid rgba(47,75,255,0.14);
  border-bottom: 1px solid rgba(47,75,255,0.14);
  padding: 64px 0;
  position: relative;
  overflow: hidden;
}
.ds-stats-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 100% at 50% 50%, rgba(47,75,255,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.ds-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  z-index: 1;
}
.ds-stat-item {
  text-align: center;
  padding: 0 32px;
  border-right: 1px solid rgba(255,255,255,0.07);
}
.ds-stat-item:last-child { border-right: none; }
.ds-stat-number {
  font-size: clamp(40px, 4vw, 58px);
  font-weight: 900;
  color: white;
  letter-spacing: -0.04em;
  line-height: 1;
}
.ds-stat-number .ds-stat-accent {
  background: linear-gradient(135deg, #7B93FF, #2F4BFF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ds-stat-label {
  font-size: 14px;
  color: rgba(255,255,255,0.44);
  margin-top: 10px;
  font-weight: 400;
}

/* ── Prep checklist panel ────────────────────────────────── */
.ds-prep-section {
  padding: 80px 0 120px;
  background: var(--bg-main);
}
.ds-prep-panel {
  background: var(--dark-panel);
  border: 1px solid rgba(47,75,255,0.18);
  border-radius: 32px;
  overflow: hidden;
  position: relative;
}
.ds-prep-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 100% 0%,   rgba(47,75,255,0.16)  0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 0%   100%,  rgba(24,166,106,0.10) 0%, transparent 60%);
  pointer-events: none;
}
.ds-prep-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.ds-prep-copy {
  padding: 72px 64px;
}
.ds-prep-eyebrow {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(47,75,255,0.80);
  margin-bottom: 20px;
}
.ds-prep-h2 {
  font-size: clamp(34px, 3.5vw, 52px);
  font-weight: 900;
  color: white;
  letter-spacing: -0.03em;
  line-height: 0.97;
}
.ds-prep-sub {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(255,255,255,0.50);
  margin-top: 20px;
  font-weight: 400;
}
.ds-terminal-wrap {
  padding: 48px 48px 48px 0;
}
.ds-terminal-window {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  overflow: hidden;
}
.ds-terminal-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03);
}
.ds-terminal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.ds-terminal-dot.red   { background: var(--error-red); }
.ds-terminal-dot.amber { background: var(--warning-amber); }
.ds-terminal-dot.green { background: var(--certified-green); }
.ds-terminal-title {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.28);
  letter-spacing: -0.01em;
  font-family: 'Inter', monospace;
}
.ds-terminal-body {
  padding: 20px 22px 24px;
}
.ds-checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  min-width: 0;
}
.ds-checklist-item:first-child { padding-top: 0; }
.ds-checklist-item:last-child  { border-bottom: none; padding-bottom: 0; }
.ds-checklist-check {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(24,166,106,0.18);
  border: 1px solid rgba(24,166,106,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  color: #4DD49A;
}
.ds-checklist-check svg { width: 11px; height: 11px; }
.ds-checklist-text {
  font-size: 14px;
  font-weight: 650;
  color: rgba(255,255,255,0.80);
  line-height: 1.5;
  letter-spacing: -0.01em;
  flex: 1 1 0;
  min-width: 0;
}
.ds-checklist-sub {
  display: block;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  color: rgba(255,255,255,0.38);
  margin-top: 3px;
}

/* ── Testimonials grid ───────────────────────────────────── */
.ds-testimonials-section {
  padding: 0 0 120px;
  background: var(--bg-main);
}
.ds-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.ds-testimonial-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.ds-testimonial-card:hover {
  border-color: rgba(47,75,255,0.22);
  box-shadow: 0 12px 40px rgba(47,75,255,0.07);
}
.ds-testimonial-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 20px;
}
.ds-t-star {
  width: 14px;
  height: 14px;
  fill: var(--warning-amber);
}
.ds-testimonial-quote {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  font-weight: 450;
  flex: 1;
  letter-spacing: -0.01em;
}
.ds-testimonial-quote strong {
  font-weight: 850;
  color: var(--ink);
}
.ds-testimonial-byline {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
}
.ds-byline-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--signal-blue-soft), var(--signal-blue-pale));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 900;
  color: var(--signal-blue);
  flex-shrink: 0;
}
.ds-byline-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.ds-byline-role {
  font-size: 12px;
  color: var(--text-soft);
  margin-top: 2px;
}

/* ── Responsive overrides ────────────────────────────────── */
@media (max-width: 1024px) {
  .ds-steps-grid         { grid-template-columns: 1fr; gap: 16px; }
  .ds-step-connector     { display: none; }
  .ds-prep-inner         { grid-template-columns: 1fr; }
  .ds-prep-copy          { padding: 48px 32px 0; }
  .ds-terminal-wrap      { padding: 32px 32px 48px; }
  .ds-testimonials-grid  { grid-template-columns: 1fr; }
  .ds-stats-grid         { grid-template-columns: repeat(2, 1fr); gap: 32px 0; }
  .ds-stat-item:nth-child(2) { border-right: none; }
  .ds-stat-item          { padding: 0 24px; }
  .ds-meeting-card       { min-width: unset; width: 100%; max-width: 100%; }
  .ds-trust-strip-inner  { gap: 16px; }
}
@media (max-width: 640px) {
  .ds-steps-section      { padding: 80px 0 60px; }
  .ds-prep-section       { padding: 60px 0 80px; }
  .ds-testimonials-section { padding: 0 0 80px; }
  .ds-stats-band         { padding: 48px 0; }
  .ds-trust-strip-inner  { padding: 0 24px; }
  .ds-stats-grid         { grid-template-columns: 1fr 1fr; }
}


/* ============================================================
   MOBILE FIXES — 2026-05-23
   Five targeted repairs from mobile readiness review.
   All rules appended here to keep changes traceable.
   ============================================================ */

/* ── Fix 1: .metrics-strip — 4-col hero stats bar → 2×2 on mobile
   The base .metrics-strip (repeat(4, 1fr)) had no mobile breakpoint.
   .metrics-strip-full was already handled above; this targets the standard variant.
   nth-child(2n): remove right border on column-2 items (items 2 and 4).
   nth-child(n+3): add top border on the second row (items 3 and 4).         ── */
@media (max-width: 768px) {
  .metrics-strip                             { grid-template-columns: repeat(2, 1fr); }
  .metrics-strip .metric-item:nth-child(2n)  { border-right: none; }
  .metrics-strip .metric-item:nth-child(n+3) { border-top: 1px solid rgba(47,75,255,0.10); }
}

/* ── Fix 2: .audit-section — excess horizontal padding on mobile
   .section-audit-wrapper adds 40px, .audit-section adds 64px — combined 104px
   per side on a 375px phone, leaving ~167px content width. Reset both.
   Also collapses the 2-col grid and reduces border-radius to match mobile scale. ── */
@media (max-width: 768px) {
  .section-audit-wrapper { padding: 0; }
  .audit-section {
    grid-template-columns: 1fr;
    padding: 48px 24px;
    border-radius: 20px;
    margin: 72px 0;
  }
}

/* ── Fix 3: .video-thumbs-grid — 4-col, no mobile breakpoint
   4 × ~75px thumbnails on a 375px phone. Collapse to 2-col at 768px,
   single column at 480px. aspect-ratio: 16/9 on .video-thumb-card
   handles height automatically at any column width.                          ── */
@media (max-width: 768px) {
  .video-thumbs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .video-thumbs-grid { grid-template-columns: 1fr; }
}

/* ── Fix 4: .dark-panel — reflow floating cards on mobile
   Cards use position:absolute in inline styles (percent-based coords).
   Overriding with !important converts them to a stacked flex list.
   The panel drops below the copy column naturally since .problem-grid
   already collapses to 1fr at 768px — no overlap risk.
   Animations stripped on mobile for performance.                ── */
@media (max-width: 768px) {
  .dark-panel {
    min-height: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .dark-artifact-card {
    position: static !important;
    animation: none !important;
    min-width: 0;
    max-width: none;
    width: 100%;
  }
}

/* ── Fix 5: .hww-insight-grid — 2-col, no mobile breakpoint
   The HWW scroll narrative has thorough 1024px treatment but this
   specific insight grid (1fr 1fr) was missed. Collapse at 640px
   to match the existing hww-beat-cap padding reduction threshold.           ── */
@media (max-width: 640px) {
  .hww-insight-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   COMPONENT CONTEXT OVERRIDE — 2026-05-23
   .section-testimonials is a full-section component with a
   hardcoded dark background (#111A2C) and 120px vertical padding.
   When incorrectly used as a <div> wrapper inside a light/white
   section, it paints the dark background over the parent and
   doubles the vertical padding.
   This override strips those values when nested, so the parent
   section's background and padding apply correctly.
   All 22 case-study pages use this pattern.
   ============================================================ */
.section-light .section-testimonials,
.section-white .section-testimonials {
  background: none;
  padding: 0;
}


/* ============================================================
   INTEGRATIONS DIRECTORY — integ-grid, integ-category, etc.
   Used on the /integrations page to display the platform grid.
   Moved from integrations.html head_extra block 2026-05-23.
   ============================================================ */

.integ-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 48px;
}

.integ-category {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.integ-category-header {
  background: #0f172a;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.integ-category-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.88);
  margin: 0;
  flex: 1;
}

.integ-category-count {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0;
}

.integ-category-body {
  padding: 16px 20px 18px;
  flex: 1;
}

.integ-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.integ-list li {
  font-size: 14px;
  color: var(--text);
  line-height: 1.4;
}

.integ-item-plain {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 7px;
  color: var(--text-muted);
}

.integ-item-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 7px;
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  transition: background 0.14s, color 0.14s;
  position: relative;
}

.integ-item-link:hover {
  background: #f0f6ff;
  color: var(--signal-blue);
}

.integ-item-link .integ-arrow {
  margin-left: auto;
  font-size: 12px;
  color: var(--signal-blue);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.14s, transform 0.14s;
  flex-shrink: 0;
}

.integ-item-link:hover .integ-arrow {
  opacity: 1;
  transform: translateX(0);
}

.integ-badge-new {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  background: #dcfce7;
  color: #15803d;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.integ-list-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 0;
}

@media (max-width: 768px) {
  .integ-grid { grid-template-columns: 1fr; }
}

/* ── Integration tile grid (complete-list page) ─────────────── */
.integration-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-top: 32px;
}
@media (max-width: 640px) {
  .integration-category-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 380px) {
  .integration-category-grid { grid-template-columns: 1fr; }
}
.integration-tile {
  display: block;
  padding: 18px 20px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  text-decoration: none;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.integration-tile:hover {
  border-color: var(--signal-blue);
  box-shadow: 0 4px 18px rgba(51,76,235,0.09);
  transform: translateY(-2px);
}
.integration-tile-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 5px;
  line-height: 1.3;
}
.integration-tile-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}


/* ============================================================
   SITEMAP PAGE — sitemap-list, sitemap-col, page overrides
   Used on the /sitemap page directory listing.
   Moved from sitemap.html inline style block 2026-05-23.
   ============================================================ */

.sitemap-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px 0;
}

.sitemap-list li {
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}

.sitemap-list li:last-child {
  border-bottom: none;
}

.sitemap-list a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.2s;
}

.sitemap-list a:hover {
  color: var(--signal-blue);
}

/* Sitemap page layout — align columns top, tighten gap, stack groups */
.sb-page-sitemap .hero {
  padding: 80px 0 60px;
}

.sb-page-sitemap .sb-section-split {
  align-items: start;
  gap: 48px;
}

.sb-page-sitemap .sb-section-split + .sb-section-split {
  margin-top: 64px;
}

.sitemap-col .section-eyebrow {
  margin-bottom: 8px;
}

.sitemap-col .section-h2 {
  margin-bottom: 24px;
}

.sitemap-col .sitemap-list + .section-eyebrow {
  margin-top: 32px;
}


/* ============================================================
   OUTCOME TILE VARIANTS — link / compact / flex
   Extracted from solutions and webinars inline styles 2026-05-23
   ============================================================ */

/* Tile used as a navigation link — resets anchor styling */
a.outcome-tile {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Flex-column tile (CTA aligned to bottom) */
.outcome-tile--flex {
  display: flex;
  flex-direction: column;
}

.outcome-tile--flex .outcome-tile-icon {
  height: 36px;
  display: flex;
  align-items: center;
  line-height: 1;
  font-size: 18px;
}

/* CTA link text inside a nav tile */
.outcome-tile-cta {
  font-size: 13px;
  font-weight: 700;
  color: var(--signal-blue);
  display: block;
  margin-top: 14px;
}

/* CTA pushed to bottom via flex */
.outcome-tile-cta--push {
  margin-top: auto;
  padding-top: 14px;
}

/* Compact tile grid — denser spacing for supporting sections */
.outcome-grid--compact {
  gap: 12px;
}

.outcome-tile--compact {
  padding: 18px 20px;
}

.outcome-tile--compact .outcome-tile-icon {
  font-size: 18px;
}

.outcome-tile--compact .outcome-tile-title {
  font-size: 14px;
  margin-top: 8px;
}

.outcome-tile--compact .outcome-tile-body {
  font-size: 13px;
  margin-top: 4px;
}

/* Constrained section headline width */
.section-h2--narrow {
  max-width: 640px;
  margin-top: 16px;
}

/* Centered nav tile header container */
.nav-grid-header {
  text-align: center;
  margin-top: 40px;
}

/* Green certified micro-badge */
.certified-badge {
  margin-top: 12px;
  padding: 8px 10px;
  background: rgba(24, 166, 106, 0.08);
  border-radius: 6px;
  font-size: 11px;
  color: var(--certified-green);
}

/* Webinars page — flex tiles with bottom-aligned watch button */
.sb-page-webinars .outcome-grid {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
  margin-top: 2.5rem;
}

.sb-page-webinars .outcome-tile {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sb-page-webinars .outcome-tile .btn {
  margin-top: auto;
}


/* ============================================================
   PRESS PAGE FOOTER — separator + back link
   Extracted from press page inline styles 2026-05-23
   ============================================================ */

.press-footer {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.press-footer a {
  color: var(--signal-blue);
  font-size: 14px;
  text-decoration: none;
}

.press-footer a:hover {
  text-decoration: underline;
}


/* ============================================================
   INLINE STYLE SWEEP — 2026-05-23
   All patterns extracted from page files into named classes.
   ============================================================ */

/* ── Partner directory — demo card narrow ── */
.demo-card--partner { max-width: 340px; }

/* ── Outcome tile spacious (careers, company overview) ── */
.outcome-tile--spacious { padding: 28px; }
.outcome-tile--spacious .outcome-tile-icon { font-size: 24px; }
.outcome-tile--spacious .outcome-tile-icon--lg { font-size: 32px; }
.outcome-tile--spacious .outcome-tile-title { font-size: 16px; margin-top: 8px; }
.outcome-tile--spacious .outcome-tile-body { font-size: 13px; margin-top: 4px; }

/* ── Outcome tile nav (inline arrow link tile) ── */
a.outcome-tile--nav { display: flex; align-items: center; gap: 0.5rem; }

/* ── Outcome tile grid (case studies, wide listing) ── */
.outcome-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

/* ── Outcome grid links (280px min-column variant) ── */
.outcome-grid--links { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* ── Arrow/brand icon span ── */
.arrow-icon { color: var(--signal-blue); }

/* ── Inline brand-colored link ── */
.link-brand { color: var(--signal-blue); text-decoration: none; }
.link-brand:hover { text-decoration: underline; }

/* ── CTA row / hero-ctas centered ── */
.cta-row--center { justify-content: center; }

/* ── Hero centered variant ── */
.hero--center { text-align: center; }
.hero-content--center { max-width: 780px; margin: 0 auto; }
.hero-body--center { max-width: 620px; margin: 0 auto; }

/* ── Section header narrow ── */
.section-header--narrow { max-width: 700px; }

/* ── Section body constrained ── */
.section-body--center { max-width: 680px; margin: 0 auto; }
.section-body--narrow { max-width: 580px; margin: 0 auto; }

/* ── Press release wrappers and typography ── */
.press-body { max-width: 760px; margin: 0 auto; }
.press-section-h2 { font-size: 22px; margin-top: 40px; margin-bottom: 16px; }
.press-body-list { margin: 16px 0 16px 24px; line-height: 1.8; }

/* ── Warning badge (amber — partner/integration pages) ── */
.warning-badge {
  margin-top: 12px;
  padding: 8px 10px;
  background: rgba(245, 158, 11, 0.08);
  border-radius: 6px;
  font-size: 11px;
  color: #D97706;
}

/* ── Financial reporting detail rows ── */
.detail-row {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: 0.75rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--border);
}
.detail-row--last { border-bottom: 1px solid var(--border); }
.detail-label { font-size: 0.9rem; font-weight: 750; color: var(--ink); margin-bottom: 0.3rem; }
.detail-body { font-size: 0.85rem; line-height: 1.6; margin: 0; color: var(--text-muted); }

/* ── Subheading within prose sections (tax-accounting, etc.) ── */
.sb-h3 { margin-top: 1.5rem; font-size: 1.125rem; }
.sb-h3 + p { margin-top: 0.5rem; }


/* ── Inline link inside outcome-tile-title ── */
.outcome-tile-title a { color: inherit; text-decoration: none; }
.outcome-tile-title a:hover { text-decoration: underline; }

/* ── section-eyebrow inside outcome-tile ── */
.outcome-tile .section-eyebrow { margin-bottom: 8px; }

/* ── Outcome tile XL (contact page) ── */
.outcome-tile--xl { padding: 32px; }
.outcome-tile--xl .outcome-tile-icon { font-size: 32px; }

/* ── Centered section CTA block ── */
.section-cta-center { text-align: center; margin-top: 32px; }

/* ── Detail row number label ── */
.detail-num {
  font-size: 0.7rem;
  font-weight: 750;
  color: var(--warning-amber);
  padding-top: 0.2rem;
  letter-spacing: 0.04em;
}

/* ── Registration / form card ── */
.form-card {
  background: var(--surface);
  border-radius: 12px;
  padding: 32px;
  border: 1px solid var(--border);
}

/* ── Partner directory card CTA button ── */
.partner-card-cta { margin-top: 16px; }


/* ── Webinar embed wrapper (constrain player width) ── */
.webinar-embed-wrap { max-width: 800px; margin: 0 auto; }

/* ── Pricing plan CTA buttons (full-width within card) ── */
.plan-cta .btn { width: 100%; justify-content: center; }

/* ── Plan section label flush (no top margin) ── */
.plan-section-label--flush { margin-top: 0; }

/* ── Outcome tile button wrapper ── */
.outcome-tile-btn { margin-top: 16px; }

/* ── Full-width centered section-h2 ── */
.section-h2--centered {
  max-width: 100%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}


/* ── Pass-4 sweep: utility classes extracted from page-level inline styles ── */

/* text-right: table header spans in how-webgility-works */
.text-right { text-align: right; }

/* text-muted-zn: zinc #A1A1AA used in bp-component amounts/after values */
.text-muted-zn { color: #A1A1AA; }

/* bp-ch-node--wide: TikTok channel node needs min-width (center already in .bp-ch-node) */
.bp-ch-node--wide { min-width: 160px; }

/* cta-row--mt: margin-top spacer when .cta-row is not in a section-pad context */
.cta-row--mt { margin-top: 32px; }

/* section-eyebrow--center: centred eyebrow on pricing and section-dark blocks */
.section-eyebrow--center { justify-content: center; text-align: center; }

/* reveal--centered: centered CTA block at bottom of contact / careers pages */
.reveal--centered { text-align: center; max-width: 640px; margin: 0 auto; }

/* contact-detail-p: small address / office lines on contact page */
.contact-detail-p { font-size: 14px; color: var(--text-muted); }
.contact-detail-p--label { margin-bottom: 8px; }

/* flex-gap-sm: tight wrapping flex row used in pricing addon rows */
.flex-gap-sm { gap: 8px; flex-wrap: wrap; }

/* ── Pass-5 sweep: final repeating inline patterns → named classes ── */

/* Spacing utilities (used 2-6x across pages, no good modifier exists) */
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }

/* cta-row spaced + centered (press, contact, careers bottom blocks) */
.cta-row--mt-center { margin-top: 32px; justify-content: center; }

/* reveal centered with bottom margin (press, careers intro blocks) */
.reveal--center-mb { text-align: center; margin-bottom: 48px; }

/* Form registration disclaimer line */
.form-disclaimer {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 16px;
  text-align: center;
}

/* sb-pv-header with bottom spacing (registration pages) */
.sb-pv-header--mb { margin-bottom: 24px; }

/* ── Pass-6 sweep: last repeating inline patterns ── */

/* Centered blockquote with top spacing (solutions/high-volume, 3x) */
.section-quote--mt-center { margin-top: 40px; text-align: center; }

/* Contact page email-or hint lines (3x) */
.contact-email-hint { margin-top: 16px; font-size: 13px; color: var(--text-muted); }

/* ============================================================
   CASE STUDIES HUB  (.sb-page-case-studies-hub)
   ============================================================ */

/* Filter bar */
.cs-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 40px 0 36px;
  align-items: center;
}
.cs-filter-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 4px;
  white-space: nowrap;
}
.cs-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
  user-select: none;
}
.cs-filter-chip:hover  { border-color: var(--accent); color: var(--accent); }
.cs-filter-chip.active { background: var(--signal-blue); border-color: var(--signal-blue); color: #fff; }
.cs-filter-count {
  display: inline-block;
  background: rgba(255,255,255,0.25);
  border-radius: 999px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  min-width: 18px;
  text-align: center;
}
.cs-filter-chip:not(.active) .cs-filter-count { background: var(--border); color: var(--text-muted); }
.cs-filter-divider { width: 1px; height: 24px; background: var(--border); margin: 0 4px; flex-shrink: 0; }

/* Grid */
.cs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.cs-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, transform 0.2s;
}
.cs-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.09); transform: translateY(-2px); }
.cs-card.cs-hidden { display: none !important; }

/* Featured card — spans 2 columns, side-by-side layout */
.cs-card.cs-featured { grid-column: span 2; flex-direction: row; }
.cs-card.cs-featured .cs-card-media { width: 48%; flex-shrink: 0; min-height: 280px; }
.cs-card.cs-featured .cs-card-body  { flex: 1; padding: 36px 32px; }

/* Media block */
.cs-card-media {
  position: relative;
  background: #0d1117;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.cs-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.cs-card:hover .cs-card-media img { transform: scale(1.03); }
.cs-play-btn {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.3);
  cursor: pointer; transition: background 0.2s;
}
.cs-play-btn:hover { background: rgba(0,0,0,0.52); }
.cs-play-icon {
  width: 52px; height: 52px;
  background: rgba(255,255,255,0.93);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.cs-play-icon svg { width: 20px; height: 20px; fill: #1a1a2e; margin-left: 3px; }

/* Card body */
.cs-card-body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cs-card-company { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.cs-card-headline { font-size: 17px; font-weight: 700; color: var(--text-primary); line-height: 1.4; }
.cs-card.cs-featured .cs-card-headline { font-size: 22px; }
.cs-card-quote {
  font-size: 14px; color: var(--text-secondary); line-height: 1.6; font-style: italic;
  border-left: 3px solid var(--accent); padding-left: 12px; margin: 4px 0;
}
.cs-card-meta { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.cs-card-channels { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-channel-tag {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  background: #f0f2f5; border-radius: 6px; padding: 3px 8px;
}
.cs-card-author { font-size: 13px; color: var(--text-muted); }
.cs-card-author strong { color: var(--text-secondary); font-weight: 600; }
.cs-card-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--accent);
  text-decoration: none; margin-top: 4px;
  background: none; border: none; cursor: pointer; padding: 0;
}
.cs-card-cta:hover { text-decoration: underline; }
.cs-no-results {
  grid-column: 1 / -1; text-align: center; padding: 64px 0;
  color: var(--text-muted); font-size: 16px; display: none;
}

/* Video lightbox */
.cs-video-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.88); z-index: 9999;
  align-items: center; justify-content: center;
}
.cs-video-overlay.open { display: flex; }
.cs-video-wrap {
  position: relative; width: min(860px, 92vw);
  aspect-ratio: 16/9; background: #000; border-radius: 12px; overflow: hidden;
}
.cs-video-wrap iframe { width: 100%; height: 100%; border: none; }
.cs-video-close {
  position: absolute; top: -44px; right: 0;
  background: none; border: none; color: #fff; font-size: 32px; cursor: pointer; line-height: 1;
}

/* Responsive */
@media (max-width: 1024px) {
  .cs-grid { grid-template-columns: repeat(2, 1fr); }
  .cs-card.cs-featured { grid-column: span 2; }
}
@media (max-width: 768px) {
  .cs-grid { grid-template-columns: 1fr; }
  .cs-card.cs-featured { flex-direction: column; }
  .cs-card.cs-featured .cs-card-media { width: 100%; min-height: unset; }
  .cs-card.cs-featured .cs-card-body { padding: 24px; }
  .cs-filter-divider { display: none; }
  .cs-filter-label { display: none; }
}

/* ============================================================
   HOMEPAGE — TWO-COLUMN HERO LAYOUT
   Hero content sits left-aligned in the left ~45% of the hero.
   Graffiti image fades in from the right via mask-image so it
   doesn't sit behind the headline copy.
   ============================================================ */
.sb-page-homepage .hero-content {
  /* Align left edge with .container — same centering offset + 40px padding */
  margin-left: max(calc((100% - 1280px) / 2 + 40px), 40px) !important;
  margin-right: auto !important;
  max-width: 540px !important;
  padding: 0;
  text-align: left;
}
.sb-page-homepage .hero-content::before {
  background: none;
}
.hero-cta-secondary {
  font-size: 13px;
  color: rgba(255,255,255,0.52);
  border-bottom: 1px solid rgba(255,255,255,0.18);
  padding-bottom: 3px;
  white-space: nowrap;
  text-decoration: none;
  align-self: flex-end;
  margin-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.hero-cta-secondary:hover {
  color: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.45);
}
.sb-page-homepage .hero-graffiti {
  /* Override inset:0 — only occupy the right 58% of the hero */
  left: 42%;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0.12;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%);
          mask-image: linear-gradient(to right, transparent 0%, black 20%);
}
.sb-page-homepage .hero-integrations {
  justify-content: flex-start;
}
.sb-page-homepage .hero-ctas {
  align-items: flex-end;
}

/* Mobile: revert to centered single-column */
@media (max-width: 768px) {
  .sb-page-homepage .hero-content {
    margin-left: auto;
    max-width: 100%;
    text-align: center;
  }
  .sb-page-homepage .hero-graffiti {
    left: 0;
    -webkit-mask-image: none;
            mask-image: none;
    opacity: 0.08;
  }
  .sb-page-homepage .hero-ctas {
    flex-direction: column;
    align-items: center;
  }
  /* In flex-column, align-self:flex-end means "right" not "bottom" — override to center */
  .sb-page-homepage .hero-cta-secondary {
    align-self: center;
  }
  .sb-page-homepage .hero-integrations {
    justify-content: center;
  }
}

/* ── Careers page: empty state ───────────────────────────────────────────── */
.careers-no-jobs {
  padding: 32px 0 8px;
  font-size: 15px;
  color: var(--text-muted, #6b7280);
  line-height: 1.6;
  text-align: center;
}

.careers-no-jobs a {
  color: var(--brand-blue, #334ceb);
  text-decoration: none;
}

.careers-no-jobs a:hover {
  text-decoration: underline;
}

/* ── Careers page: Zoho Recruit embed overrides ─────────────────────────── */

/* Spacing above the job list */
.careers-job-list {
  margin-top: 48px;
}

/* Force full-width block layout — Zoho style_1 uses a two-column flex/table
   that puts the category heading on the left and jobs on the right. Override. */
#rec_job_listing_div,
#rec_job_listing_div .rec_job_listing_div_jobs,
#rec_job_listing_div ul.rec-group {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  float: none !important;
}

/* Hide Zoho filter bar (dropdown + department checkboxes + their wrappers) */
#rec_job_listing_div .rec_filter_cls,
#rec_job_listing_div .rec-job-filter,
#rec_job_listing_div .rec_facet_group {
  display: none !important;
}

/* Hide the "FULL TIME · 2 JOBS" group heading — redundant when all
   open roles are the same type and the count is obvious from the list */
#rec_job_listing_div .rec-grp-heading {
  display: none !important;
}

/* Remove list chrome from the group container */
#rec_job_listing_div ul.rec-group {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Each job row */
#rec_job_listing_div ul.rec-job-info {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  list-style: none !important;
  
  /* CHANGED: Completely flushes outer margins to zero out the gap layout */
  margin: 0 0 0 0 !important; 
  
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  cursor: pointer !important;
  padding: 24px 24px !important; 
  
  /* CHANGED: Removed the card roundness so the stacked rows meet flawlessly */
  border-radius: 0 !important; 
  
  background-color: #ffffff !important;
  transition: background-color 0.15s ease, box-shadow 0.15s ease !important;
}

#rec_job_listing_div ul.rec-job-info:hover {
  background-color: #f8fafc !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04) !important;
}

#rec_job_listing_div ul.rec-group > ul.rec-job-info:first-of-type {
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Hide the redundant job-type li (already shown in group heading) */
#rec_job_listing_div li.zrsite_Job_Type {
  display: none !important;
}

/* Job title */
#rec_job_listing_div li.rec-job-title {
  flex: 1 !important;
  min-width: 0 !important;
}

#rec_job_listing_div li.rec-job-title a {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--text-dark, #0d1b2a) !important;
  text-decoration: none !important;
  font-family: inherit !important;
  line-height: 1.3 !important;
  display: block !important;
  transition: color 0.15s !important;
}

#rec_job_listing_div ul.rec-job-info:hover li.rec-job-title a {
  color: var(--brand-blue, #334ceb) !important;
}

/* Location tag */
#rec_job_listing_div li.zrsite_Location {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text-muted, #6b7280) !important;
  background: rgba(0, 0, 0, 0.05) !important;
  padding: 4px 12px !important;
  border-radius: 100px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  
  /* FIXED: Uses auto-left margin to neatly push the tag and button to the far right */
  margin: 0 0 0 auto !important; 
}

/* "View role" layout converted to simple button */
#rec_job_listing_div ul.rec-job-info::after {
  content: "Apply Now" !important; /* Text without the arrow icon */
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  font-family: inherit !important;
  
  /* Layout Sizing & Typography */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  padding: 0 24px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  margin-left: 24px !important; /* Insets button cleanly away from location pill */
  
  /* Signal Blue Corporate Button Theme */
  background: linear-gradient(135deg, #2F4BFF 0%, #1932C7 100%) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(47, 75, 255, 0.15) !important;
  
  /* State Conversions */
  opacity: 1 !important;
  transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease !important;
}

/* Hover State Interactions */
#rec_job_listing_div ul.rec-job-info:hover::after {
  text-decoration: none !important;
  transform: translateY(-1px) !important;
  filter: brightness(1.06) !important;
  box-shadow: 0 6px 16px rgba(47, 75, 255, 0.25) !important;
}

@media (max-width: 640px) {
  .careers-job-list {
    margin-top: 32px;
  }
  #rec_job_listing_div ul.rec-job-info {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 16px 16px !important; /* Keeps responsive margins safe inside viewport boundaries */
  }
  #rec_job_listing_div li.zrsite_Location {
    margin: 0 !important;
  }
  #rec_job_listing_div ul.rec-job-info::after {
    display: none !important;
  }
}

/* ── Testimonial cards in light/white sections: override white-on-white ── */
/* Default .testimonial-quote/.testimonial-card use white text for dark bg  */
/* contexts. When nested inside section-light or section-white, swap to     */
/* dark legible colors.                                                      */
.section-light .testimonial-card,
.section-white .testimonial-card {
  background: #fff;
  border-color: var(--border);
}
.section-light .testimonial-quote,
.section-white .testimonial-quote {
  color: var(--ink-soft);
}
.section-light .testimonial-meta-name,
.section-white .testimonial-meta-name {
  color: var(--ink);
}
.section-light .testimonial-tag,
.section-white .testimonial-tag {
  color: var(--text-muted);
}
.section-light .testimonial-attr,
.section-white .testimonial-attr {
  color: var(--text-muted);
}
.section-light .tc-person,
.section-white .tc-person {
  color: var(--ink-soft);
}
.section-light .testimonial-channels,
.section-white .testimonial-channels {
  color: var(--ink-soft);
  background: rgba(47,75,255,0.07);
}
.section-light .stat-val,
.section-white .stat-val {
  color: var(--ink);
}
.section-light .stat-lbl,
.section-white .stat-lbl {
  color: var(--text-muted);
}
.section-light .testimonial-stats,
.section-white .testimonial-stats {
  border-top-color: var(--border);
}

/* ── Accounting firms location pages — apply section-body treatment to bare <p> tags ── */
/* These pages use unstyled <p> tags inside .sb-section-text and .section-header,        */
/* which inherit raw browser paragraph styles. Remap to match .section-body rendering.   */
.sb-page-accounting-firms-location .sb-section-text p,
.sb-page-accounting-firms-location .section-header > p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-muted);
}
.sb-page-accounting-firms-location .sb-section-text p + p {
  margin-top: 16px;
}
.sb-page-accounting-firms-location .section-header > p {
  margin-top: 12px;
}

/* ── Individual case study pages — testimonials-grid layout fix ── */
/* Each page puts 1 testimonial-card + 2 outcome-tiles in the grid.  */
/* The base .testimonials-grid is 2-col (designed for the main dark   */
/* testimonials section), leaving the 3rd tile orphaned on a new row. */
/* Override to 3 equal columns in the case-study context.             */
.sb-page-case-study .testimonials-grid {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 0;
}
@media (max-width: 900px) {
  .sb-page-case-study .testimonials-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .sb-page-case-study .testimonials-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   ROI CALCULATOR (/roi-calculator)
   Ported from Webgility_Jan2023/css/roi-calculator.css (~150
   ROI-specific lines extracted from 919-line legacy file).
   Adapted to signal-blue tokens; depends on .lp-form-target
   form overrides for the HubSpot form styling.
============================================================ */

/* ── Intro narrative block ────────────────────────────────────────── */
.sb-page-roi-calculator .roi-intro {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.sb-page-roi-calculator .roi-intro .section-body {
  text-align: left;
  margin-top: 16px;
}

/* ── Testimonials (3 cards) ──────────────────────────────────────── */
.sb-page-roi-calculator .roi-testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.sb-page-roi-calculator .roi-testimonial-card {
  background: var(--surface, #f7f8fa);
  border: 1px solid var(--border, #e6e8ee);
  border-radius: 16px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sb-page-roi-calculator .roi-testimonial-quote {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  font-style: italic;
}
.sb-page-roi-calculator .roi-testimonial-meta {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.sb-page-roi-calculator .roi-testimonial-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.sb-page-roi-calculator .roi-testimonial-role {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.sb-page-roi-calculator .roi-testimonial-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.sb-page-roi-calculator .roi-testimonial-stat-num {
  font-size: 26px;
  font-weight: 800;
  color: var(--signal-blue);
  line-height: 1.1;
}
.sb-page-roi-calculator .roi-testimonial-stat-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.3;
}
@media (max-width: 960px) {
  .sb-page-roi-calculator .roi-testimonials { grid-template-columns: 1fr; gap: 16px; }
}

/* ── Calculator: two-column grid ─────────────────────────────────── */
.sb-page-roi-calculator .roi-calc-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px;
  align-items: start;
}
@media (max-width: 1024px) {
  .sb-page-roi-calculator .roi-calc-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

.sb-page-roi-calculator .roi-calc-form-side,
.sb-page-roi-calculator .roi-calc-results-side {
  position: relative;
}
.sb-page-roi-calculator .roi-calc-form-intro,
.sb-page-roi-calculator .roi-results-intro {
  margin-bottom: 24px;
}
.sb-page-roi-calculator .roi-calc-h2 {
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 10px 0 8px;
  line-height: 1.15;
}
.sb-page-roi-calculator .roi-calc-sub {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}

/* Sticky right column on desktop so results stay in view while filling form */
@media (min-width: 1025px) {
  .sb-page-roi-calculator .roi-calc-results-side {
    position: sticky;
    top: 100px;
  }
}

/* ── Form card (wraps HubSpot form embed) ────────────────────────── */
.sb-page-roi-calculator .roi-form-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(15,23,42,0.06);
  padding: 24px 24px 28px;
  min-height: auto;
}

/* ── Result cards ─────────────────────────────────────────────────── */
.sb-page-roi-calculator .roi-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 6px 24px rgba(15,23,42,0.06);
}
.sb-page-roi-calculator .roi-card-heading {
  background: var(--signal-blue);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 20px;
  text-align: center;
  letter-spacing: -0.005em;
}
.sb-page-roi-calculator .roi-card-body {
  padding: 20px 22px 22px;
}
.sb-page-roi-calculator .roi-card-intro {
  font-size: 13px;
  font-style: italic;
  color: var(--text-muted);
  text-align: center;
  margin: 0 0 18px;
}
.sb-page-roi-calculator .roi-card-footer {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-align: right;
  margin-top: 4px;
  margin-bottom: 18px;
}
.sb-page-roi-calculator .roi-card-footer:last-child { margin-bottom: 0; }

/* ── Row: label on left, amount on right ─────────────────────────── */
.sb-page-roi-calculator .roi-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 12px 0;
}
.sb-page-roi-calculator .roi-row-spread {
  align-items: flex-end;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.sb-page-roi-calculator .roi-row-label {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.sb-page-roi-calculator .roi-row-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: -2px;
}
.sb-page-roi-calculator .roi-row-amount {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.sb-page-roi-calculator .roi-row-total {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-top: 6px;
}
.sb-page-roi-calculator .roi-amount-loss { color: #d92d20; }
.sb-page-roi-calculator .roi-amount-save { color: #15803d; }

/* ── Profile tile grid (3 across in card 2) ──────────────────────── */
.sb-page-roi-calculator .roi-profile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 8px 0 20px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.sb-page-roi-calculator .roi-profile-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  position: relative;
  min-height: 100px;
  justify-content: center;
}
.sb-page-roi-calculator .roi-profile-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--signal-blue);
  color: #fff;
  font-weight: 800;
  font-size: 20px;
}
.sb-page-roi-calculator .roi-profile-caption {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.35;
  max-width: 160px;
}
.sb-page-roi-calculator .accounting-platform-img {
  max-width: 130px;
  max-height: 48px;
  object-fit: contain;
}
@media (max-width: 600px) {
  .sb-page-roi-calculator .roi-profile-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* No-data state (before user submits the form) */
.sb-page-roi-calculator .roi-profile-tile.nodata-box .roi-profile-circle,
.sb-page-roi-calculator .roi-profile-tile.nodata-box .roi-profile-range,
.sb-page-roi-calculator .roi-profile-tile.nodata-box .accounting-platform-img,
.sb-page-roi-calculator .roi-profile-tile.nodata-box .roi-profile-caption {
  visibility: hidden;
}
.sb-page-roi-calculator .roi-profile-tile .no-data-animation {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 24px;
  color: var(--text-muted);
  background: rgba(255,255,255,0.6);
}
.sb-page-roi-calculator .roi-profile-tile.nodata-box .no-data-animation { display: flex; }

/* ── Order-volume range visualisation ─────────────────────────────── */
.sb-page-roi-calculator .roi-profile-range {
  width: 100%;
  position: relative;
  padding-top: 24px;
}
.sb-page-roi-calculator .roi-profile-range .transact-text {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-50%);
  background: var(--signal-blue);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  transition: left 0.4s ease;
}
.sb-page-roi-calculator .roi-range-track {
  height: 4px;
  background: rgba(123,135,148,0.25);
  border-radius: 2px;
  position: relative;
}
.sb-page-roi-calculator .roi-range-fill {
  position: absolute;
  height: 100%;
  width: 20%;
  background: var(--signal-blue);
  border-radius: 2px;
  transition: left 0.4s ease, width 0.4s ease;
}

/* ── Bottom footer text under the result cards ───────────────────── */
.sb-page-roi-calculator .roi-results-footer {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.55;
  margin-top: 24px;
  text-align: center;
}
.sb-page-roi-calculator .roi-results-footer a {
  color: var(--signal-blue);
  font-weight: 600;
  text-decoration: underline;
}

/* ── Warning popup (when user picks a non-supported answer) ──────── */
.roi-popup-wrapper {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  padding: 20px;
}
.roi-popup-wrapper.is-open {
  opacity: 1;
  visibility: visible;
}
.roi-popup-container {
  background: #fff;
  border-radius: 16px;
  padding: 28px 24px 32px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  position: relative;
  box-shadow: 0 24px 64px rgba(15,23,42,0.24);
}
.roi-popup-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  font-size: 20px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
}
.roi-popup-close:hover { background: var(--surface-alt, #f1f3f6); color: var(--ink); }
.roi-popup-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 22px;
}
.roi-popup-container p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  margin: 8px 0 0;
}

/* ============================================================
   VIDEO LIBRARY (/resources/video-library)
   HubDB-backed grid (table 5736971) with topic chips, type/product
   dropdowns, server-side pagination, in-page video lightbox.
============================================================ */

/* ── Hero search bar ─────────────────────────────────────────────── */
.sb-page-video-library .vl-search-bar {
  display: flex;
  gap: 8px;
  max-width: 560px;
  margin-top: 28px;
}
.sb-page-video-library .vl-search-input {
  flex: 1;
  height: 52px;
  padding: 0 18px;
  border-radius: 999px 0 0 999px;
  border: none;
  font-size: 15px;
  font-family: inherit;
  background: rgba(255,255,255,0.95);
  color: var(--ink);
  outline: none;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
}
.sb-page-video-library .vl-search-input:focus {
  background: #fff;
  box-shadow: 0 0 0 3px rgba(47,75,255,0.30);
}
.sb-page-video-library .vl-search-btn {
  border-radius: 0 999px 999px 0;
  padding: 0 28px;
  height: 52px;
}
.sb-page-video-library .vl-active-filters {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  margin-top: 16px;
}
.sb-page-video-library .vl-active-filters a {
  color: #fff;
  text-decoration: underline;
}
@media (max-width: 600px) {
  .sb-page-video-library .vl-search-bar { flex-direction: column; }
  .sb-page-video-library .vl-search-input,
  .sb-page-video-library .vl-search-btn { border-radius: 999px; width: 100%; }
}

/* ── Featured grid (3 across, latest videos) ─────────────────────── */
.sb-page-video-library .vl-featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
@media (max-width: 900px) { .sb-page-video-library .vl-featured-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .sb-page-video-library .vl-featured-grid { grid-template-columns: 1fr; } }

.sb-page-video-library .vl-featured-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.sb-page-video-library .vl-featured-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(15,23,42,0.10);
}

/* ── Filter bar (topic chips) ────────────────────────────────────── */
.sb-page-video-library .vl-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 20px;
}
.sb-page-video-library .vl-filter-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-right: 6px;
}
.sb-page-video-library .vl-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface, #f7f8fa);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
}
.sb-page-video-library .vl-chip:hover {
  background: #fff;
  border-color: var(--signal-blue);
  color: var(--signal-blue);
}
.sb-page-video-library .vl-chip.active {
  background: var(--signal-blue);
  border-color: var(--signal-blue);
  color: #fff;
}

/* ── Secondary filters (Type, Product) ───────────────────────────── */
.sb-page-video-library .vl-filter-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-bottom: 32px;
}
.sb-page-video-library .vl-select-label {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.sb-page-video-library .vl-select-label select {
  height: 40px;
  padding: 0 36px 0 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%2364748b' stroke-width='1.6' d='M1 1.5l5 5 5-5'/></svg>")
    no-repeat right 14px center;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  min-width: 180px;
}
.sb-page-video-library .vl-select-label select:focus {
  outline: none;
  border-color: var(--signal-blue);
  box-shadow: 0 0 0 3px rgba(47,75,255,0.12);
}

/* ── Main video grid ─────────────────────────────────────────────── */
.sb-page-video-library .vl-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 1100px) { .sb-page-video-library .vl-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px)  { .sb-page-video-library .vl-grid { grid-template-columns: 1fr 1fr; gap: 16px; } }
@media (max-width: 500px)  { .sb-page-video-library .vl-grid { grid-template-columns: 1fr; } }

.sb-page-video-library .vl-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.sb-page-video-library .vl-card:hover,
.sb-page-video-library .vl-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(15,23,42,0.10);
  border-color: var(--signal-blue);
  outline: none;
}

/* Thumbnail + play overlay */
.sb-page-video-library .vl-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface-alt, #f1f3f6);
  overflow: hidden;
}
.sb-page-video-library .vl-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sb-page-video-library .vl-thumb-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: var(--text-muted);
}
.sb-page-video-library .vl-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.35);
  opacity: 0;
  transition: opacity 0.18s ease;
  color: #fff;
}
.sb-page-video-library .vl-play-overlay::before {
  content: '';
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--signal-blue);
  position: absolute;
  box-shadow: 0 8px 24px rgba(0,0,0,0.32);
}
.sb-page-video-library .vl-play-overlay svg {
  position: relative;
  margin-left: 4px;
}
.sb-page-video-library .vl-card:hover .vl-play-overlay,
.sb-page-video-library .vl-card:focus-visible .vl-play-overlay,
.sb-page-video-library .vl-featured-card:hover .vl-play-overlay {
  opacity: 1;
}

/* Card body */
.sb-page-video-library .vl-card-body {
  padding: 14px 16px 18px;
}
.sb-page-video-library .vl-category {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--signal-blue);
  margin-bottom: 8px;
}
.sb-page-video-library .vl-card-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}
.sb-page-video-library .vl-featured-card .vl-card-title {
  font-size: 17px;
}

/* ── Pagination ──────────────────────────────────────────────────── */
.sb-page-video-library .vl-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 48px;
  font-size: 14px;
}
.sb-page-video-library .vl-page-link {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
}
.sb-page-video-library .vl-page-link:hover {
  background: var(--surface, #f7f8fa);
  border-color: var(--signal-blue);
  color: var(--signal-blue);
}
.sb-page-video-library .vl-page-link.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.sb-page-video-library .vl-page-current {
  color: var(--text-muted);
  font-weight: 600;
}

/* ── Empty state ─────────────────────────────────────────────────── */
.sb-page-video-library .vl-empty {
  text-align: center;
  padding: 64px 20px;
  background: var(--surface, #f7f8fa);
  border-radius: 16px;
  border: 1px dashed var(--border);
}
.sb-page-video-library .vl-empty-icon {
  font-size: 40px;
  margin-bottom: 12px;
}
.sb-page-video-library .vl-empty-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 8px;
}
.sb-page-video-library .vl-empty-body {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
}
.sb-page-video-library .vl-empty-body a {
  color: var(--signal-blue);
  font-weight: 600;
}

/* ── Video lightbox (modal) ──────────────────────────────────────── */
.vl-video-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.86);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s, visibility 0.18s;
  z-index: 9500;
}
.vl-video-overlay.open {
  opacity: 1;
  visibility: visible;
}
.vl-video-wrap {
  position: relative;
  width: 100%;
  max-width: 1080px;
  aspect-ratio: 16 / 9;
}
.vl-video-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 12px;
}
.vl-video-close {
  position: absolute;
  top: -44px;
  right: -8px;
  background: none;
  border: none;
  color: #fff;
  font-size: 32px;
  cursor: pointer;
  line-height: 1;
  padding: 4px 10px;
  border-radius: 6px;
}
.vl-video-close:hover {
  background: rgba(255,255,255,0.12);
}
@media (max-width: 600px) {
  .vl-video-close { top: -40px; right: 0; }
}

/* =============================================================
   DATA REPORT — Confidence Cliff (and future research pages)
   All classes prefixed dr- (data report) to avoid collisions.
   ============================================================= */

/* Page wrapper */
.dr-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Hero */
.dr-hero {
  background: linear-gradient(160deg, var(--dark-panel) 0%, var(--dark-panel-2) 100%);
  color: #eaf1fb;
  padding: 80px 0 64px;
}
.dr-hero h1 {
  color: #fff;
  font-size: clamp(32px, 5vw, 50px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 18px;
}
.dr-hero h1 .hl { color: #ff7a62; }
.dr-hero .kicker {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #86b5ff;
  font-weight: 700;
  margin-bottom: 18px;
}
.dr-hero .lede {
  font-size: 18px;
  color: #c3d3ea;
  max-width: 700px;
  margin: 0;
  line-height: 1.65;
}
.dr-metastrip {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.13);
}
.dr-metastrip div { min-width: 120px; }
.dr-metastrip b {
  display: block;
  font-size: 30px;
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.dr-metastrip span { font-size: 13px; color: #9fb3d1; }

/* Cliff SVG decoration in hero */
.dr-cliff-svg {
  display: block;
  width: 100%;
  max-width: 640px;
  margin: 40px auto 0;
  opacity: 0.7;
}

/* Section layout */
.dr-section {
  padding: 60px 0;
}
.dr-section-alt {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Eyebrow */
.dr-eyebrow {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--signal-blue);
  font-weight: 700;
  margin: 0 0 10px;
}

/* Section headings */
.dr-section h2 {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.dr-section h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  margin: 32px 0 10px;
}

/* Act marker (numbered section header) */
.dr-act {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 16px;
}
.dr-act .num {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--signal-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 20px;
}
.dr-act h2 { margin: 0; }

/* Claim line */
.dr-claim {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-soft);
  font-style: italic;
  margin: 0 0 20px;
  padding-left: 16px;
  border-left: 3px solid var(--signal-blue-soft);
}

/* Lead paragraph */
.dr-lead {
  font-size: 18px;
  color: var(--ink-soft);
  line-height: 1.7;
  margin: 0 0 20px;
}
.dr-section p {
  font-size: 16.5px;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0 0 18px;
}

/* Stat band */
.dr-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 20px 0;
}
.dr-stat {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 18px;
}
.dr-stat b {
  display: block;
  font-size: 36px;
  font-weight: 800;
  color: var(--signal-blue-dark);
  letter-spacing: -0.03em;
  line-height: 1;
}
.dr-stat span {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 8px;
  line-height: 1.4;
}

/* Key numbers (exec summary) */
.dr-keynums {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0;
}
.dr-keynum {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 20px;
}
.dr-keynum b {
  display: block;
  font-size: 30px;
  font-weight: 800;
  color: var(--signal-blue-dark);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 8px;
}
.dr-keynum span {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Callout frame */
.dr-frame {
  background: var(--signal-blue-pale);
  border: 1px solid var(--signal-blue-soft);
  border-radius: 12px;
  padding: 20px 24px;
  font-size: 16px;
  color: var(--signal-blue-dark);
  line-height: 1.6;
  margin: 24px 0;
}

/* Source band */
.dr-srcband {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 24px 0;
}
.dr-src {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.55;
}
.dr-src b { color: var(--ink); }

/* Methodology note */
.dr-method {
  font-size: 13.5px;
  color: var(--text-muted);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 22px;
  margin-top: 10px;
  line-height: 1.6;
}
.dr-method b { color: var(--ink); }

/* Dark macro card */
.dr-macro {
  background: linear-gradient(160deg, var(--dark-panel) 0%, #10325f 100%);
  color: #dce8fb;
  border-radius: 16px;
  padding: 28px 30px;
  margin: 28px 0;
}
.dr-macro h4 {
  color: #fff;
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
}
.dr-macro p {
  color: #c3d3ea;
  font-size: 15.5px;
  margin: 0 0 10px;
  line-height: 1.65;
}
.dr-macro .figs {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 16px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.dr-macro .figs div { min-width: 110px; }
.dr-macro .figs b {
  display: block;
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.dr-macro .figs span {
  color: #9fb3d1;
  font-size: 12px;
}

/* Chart cards */
.dr-chartcard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 24px 12px;
  margin: 24px 0;
}
.dr-chartcard h4 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.dr-chartcard .sub {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 0 0 14px;
}
.dr-chartcard img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* Exhibit label */
.dr-exhibit {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 28px 0 8px;
}

/* Data tables */
.dr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  margin: 8px 0 24px;
}
.dr-table caption {
  text-align: left;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
  caption-side: top;
}
.dr-table thead th {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  padding: 9px 14px;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-align: left;
}
.dr-table thead th:not(:first-child) { text-align: right; }
.dr-table tbody td {
  border: 1px solid var(--border);
  padding: 9px 14px;
  color: var(--ink-soft);
}
.dr-table tbody td.n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.dr-table tbody tr.hl { background: var(--signal-blue-pale); }
.dr-table tbody tr.hl td { color: var(--signal-blue-dark); font-weight: 600; }
.dr-table tbody tr:hover { background: var(--bg-soft); }

/* Quote cards */
.dr-quote {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--signal-blue);
  border-radius: 12px;
  padding: 22px 26px;
  margin: 18px 0;
}
.dr-quote.accent { border-left-color: var(--error-red); }
.dr-quote p.q {
  font-size: 17px;
  color: var(--ink);
  font-weight: 500;
  margin: 0 0 14px;
  line-height: 1.6;
}
.dr-quote .attrib {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.dr-quote .label { color: var(--ink-soft); font-weight: 600; }
.dr-quote .seg {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 10px;
  color: var(--text-muted);
  font-size: 11.5px;
}

/* Ticket block */
.dr-ticket {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  margin: 12px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
}
.dr-ticket .tt {
  font-size: 14.5px;
  color: var(--ink);
  font-style: italic;
  flex: 1 1 0;
  min-width: 0;
  line-height: 1.55;
}
.dr-ticket .meta {
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 11.5px;
  color: var(--text-muted);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 10px;
}

/* Takeaway callout */
.dr-takeaway {
  background: var(--signal-blue-pale);
  border: 1px solid var(--signal-blue-soft);
  border-radius: 14px;
  padding: 18px 24px;
  margin: 24px 0;
  font-size: 15.5px;
  color: var(--signal-blue-dark);
  line-height: 1.65;
}
.dr-takeaway .tk2 {
  font-weight: 800;
  margin-right: 4px;
}

/* Decision matrix (2x2 grid) */
.dr-matrix {
  display: grid;
  grid-template-columns: 48px 1fr 1fr;
  grid-template-rows: 36px auto auto;
  gap: 8px;
  margin: 28px 0;
  font-size: 14px;
}
.dr-matrix .hd {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dr-matrix .axis {
  display: flex;
  align-items: center;
  justify-content: center;
}
.dr-matrix .vlab {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.dr-matrix .cell {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  line-height: 1.5;
}
.dr-matrix .cell b {
  display: block;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 4px;
}
.dr-matrix .cell span { font-size: 13px; color: var(--text-muted); }
.dr-matrix .q4 {
  background: var(--error-soft);
  border-color: var(--error-red);
}
.dr-matrix .q4 b { color: var(--error-red); }
.dr-matrix .q2 {
  background: var(--certified-green-soft);
  border-color: var(--certified-green);
}
.dr-matrix .q2 b { color: var(--certified-green-dark); }

/* Conclusion ribbon */
.dr-ribbon {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 30px;
  margin: 28px 0;
}
.dr-step {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px 16px;
  align-items: start;
  margin-bottom: 20px;
}
.dr-step:last-of-type { margin-bottom: 0; }
.dr-step .n {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--signal-blue-soft);
  color: var(--signal-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  flex-shrink: 0;
}
.dr-step .lab {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  grid-column: 2;
  margin-bottom: 2px;
}
.dr-step .txt {
  font-size: 14px;
  color: var(--text-muted);
  grid-column: 2;
  line-height: 1.55;
}
.dr-ribbon-arrow {
  text-align: center;
  font-size: 24px;
  color: var(--signal-blue);
  margin: 8px 0;
}
.dr-ribbon-cap {
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  color: var(--signal-blue-dark);
  margin-top: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* Footer */
.dr-footer {
  background: var(--dark-panel);
  color: #9fb3d1;
  padding: 48px 0;
  font-size: 13.5px;
  line-height: 1.7;
}
.dr-footer b { color: #fff; }
.dr-footer .refs {
  color: #9fb3d1;
  margin: 14px 0 0;
  padding-left: 18px;
}
.dr-footer .refs li { margin-bottom: 6px; }

/* Sup reference */
sup.dr-ref {
  color: var(--signal-blue);
  font-weight: 700;
  font-size: 11px;
}

/* Stagger reveal utility for stat grids */
.dr-stats .dr-stat,
.dr-keynums .dr-keynum {
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.dr-stats.stagger-ready .dr-stat:nth-child(1),
.dr-keynums.stagger-ready .dr-keynum:nth-child(1) { transition-delay: 0ms; }
.dr-stats.stagger-ready .dr-stat:nth-child(2),
.dr-keynums.stagger-ready .dr-keynum:nth-child(2) { transition-delay: 60ms; }
.dr-stats.stagger-ready .dr-stat:nth-child(3),
.dr-keynums.stagger-ready .dr-keynum:nth-child(3) { transition-delay: 120ms; }
.dr-stats.stagger-ready .dr-stat:nth-child(4) { transition-delay: 180ms; }

/* Hero lede — light text for dark hero background */
.dr-hero-lede {
  font-size: 18px;
  color: #c3d3ea;
  max-width: 700px;
  margin: 16px 0 0;
  line-height: 1.65;
}

/* Force metastrip to always 4 columns */
.dr-metastrip {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  flex-wrap: unset !important;
}

/* Chart canvas wrapper */
.dr-chart-wrap {
  position: relative;
  width: 100%;
  margin-top: 8px;
}
.dr-chart-wrap canvas {
  display: block;
  width: 100% !important;
}

/* Responsive */
@media (max-width: 720px) {
  .dr-stats { grid-template-columns: repeat(2, 1fr); }
  .dr-keynums { grid-template-columns: 1fr; }
  .dr-srcband { grid-template-columns: 1fr; }
  .dr-hero h1 { font-size: 30px; }
  .dr-matrix { grid-template-columns: 36px 1fr 1fr; font-size: 13px; }
}

/* ===== PAGE: ecommerce-bookkeeping-master-narrative (scoped) ===== */
/* ════════════════════════════════════════════════════════════════
     PAGE-SCOPED STYLES: ecommerce-bookkeeping master narrative
     (kept inline during build; reconcile into signal-blue-base.css later)
     ════════════════════════════════════════════════════════════════ */

  /* ---------- HERO (atmospheric ledger background) ---------- */
  .sb-page-ecommerce-bookkeeping .hero.hero-dark{position:relative;overflow:hidden;min-height:auto;display:flex;align-items:center;padding-top:140px;padding-bottom:80px}
  .sb-page-ecommerce-bookkeeping .hero-ledger{position:absolute;inset:-8% -6% auto -6%;height:150%;z-index:0;pointer-events:none;
    transform:perspective(1250px) rotateX(26deg) rotateZ(-5deg) scale(1.14);transform-origin:50% 0;
    -webkit-mask-image:radial-gradient(ellipse 56% 50% at 50% 40%, transparent 0%, transparent 26%, #000 68%);
    mask-image:radial-gradient(ellipse 56% 50% at 50% 40%, transparent 0%, transparent 26%, #000 68%)}
  .sb-page-ecommerce-bookkeeping .hl-tbl{font-family:'SF Mono',ui-monospace,Menlo,Consolas,monospace;color:rgba(255,255,255,.26);max-width:1500px;margin:0 auto}
  .sb-page-ecommerce-bookkeeping .hl-row{display:grid;grid-template-columns:.6fr 1.5fr .8fr .8fr .9fr 1fr;gap:18px;padding:9px 40px;font-size:15px;white-space:nowrap}
  .sb-page-ecommerce-bookkeeping .hl-head{color:rgba(255,255,255,.34);letter-spacing:.12em;font-size:11px;padding-bottom:14px}
  .sb-page-ecommerce-bookkeeping .hl-r{text-align:right}
  .sb-page-ecommerce-bookkeeping .hl-st{color:rgba(110,140,255,.52)}
  .sb-page-ecommerce-bookkeeping .hl-head .hl-st{color:rgba(255,255,255,.22)}
  .sb-page-ecommerce-bookkeeping .hero-atmos-net{position:absolute;right:7%;top:30%;z-index:1;background:radial-gradient(ellipse at center, rgba(8,14,26,.62) 0%, rgba(8,14,26,0) 72%);display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 26px;border:1.5px solid rgba(255,255,255,.2);border-radius:50%;color:rgba(255,255,255,.22);font-family:'SF Mono',ui-monospace,monospace;transform:perspective(1250px) rotateX(26deg) rotateZ(-5deg)}
  .sb-page-ecommerce-bookkeeping .han-lbl{font-size:10px;letter-spacing:.14em;white-space:nowrap}
  .sb-page-ecommerce-bookkeeping .han-val{font-size:17px;font-weight:700;color:rgba(255,255,255,.26)}
  .sb-page-ecommerce-bookkeeping .hero-atmos-sign{position:absolute;right:6%;bottom:9%;z-index:1;text-align:right;color:rgba(255,255,255,.3);padding:14px 18px;background:radial-gradient(ellipse at 70% 55%, rgba(8,14,26,.6) 0%, rgba(8,14,26,0) 72%);transform:perspective(1250px) rotateX(26deg) rotateZ(-5deg);transform-origin:bottom right}
  .sb-page-ecommerce-bookkeeping .has-by{font-size:11px;font-family:'SF Mono',ui-monospace,monospace;line-height:1.4;display:inline-block}
  .sb-page-ecommerce-bookkeeping .has-sig{display:block;width:215px;height:62px;margin-left:auto;margin-top:2px}
  .sb-page-ecommerce-bookkeeping .has-name{display:block;margin-top:1px;font-family:'SF Mono',ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.04em;color:rgba(255,255,255,.3)}
  .sb-page-ecommerce-bookkeeping .has-sig .sig-bg-path{fill:none;stroke:#8fa1ff;stroke-opacity:.62;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
  .sb-page-ecommerce-bookkeeping .has-sig.draw .sig-bg-path{animation:sigWrite 2.4s ease .5s forwards}
  @keyframes sigWrite{to{stroke-dashoffset:0}}
  @media(max-width:980px){.sb-page-ecommerce-bookkeeping .hero-ledger{opacity:.6}.sb-page-ecommerce-bookkeeping .hero-atmos-net, .sb-page-ecommerce-bookkeeping .hero-atmos-sign{display:none}}

  .sb-page-ecommerce-bookkeeping .hero-fg{position:relative;z-index:2;text-align:center;max-width:880px}
  .sb-page-ecommerce-bookkeeping .hero.hero-dark .hero-headline{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin:0;
}

.sb-page-ecommerce-bookkeeping .hh-line1{
  display:block;
  font-size:clamp(24px,3.6vw,36px);
  font-weight:900;
  letter-spacing:.04em;
  margin-bottom:8px;
  color:#eee2e9;
}

.sb-page-ecommerce-bookkeeping .hh-line2{
  display:block;
  white-space:nowrap;
  font-size:clamp(24px,3.6vw,46px);
  font-weight:900;
  letter-spacing:.04em;
  line-height:1.04;
  color:#fff;
  margin-bottom:8px;
}
@media(max-width:640px){
  .sb-page-ecommerce-bookkeeping .hh-line2{
    white-space:normal;
    font-size:clamp(20px,6.5vw,32px);
    line-height:1.15;
  }
  .sb-page-ecommerce-bookkeeping .hh-line1{
    font-size:clamp(12px,4vw,16px);
    margin-bottom:6px;
  }
}

.sb-page-ecommerce-bookkeeping .hero-sub{
  font-size:clamp(28px,4vw,36px);
  font-weight:900;
  line-height:1.05;
  letter-spacing:-.02em;
  color:#fa7346;
  margin:0;
}
/* ============================================================
   ENHANCED SHINY BUTTON EFFECT (Continuous Loop / Minimal Pause)
   ============================================================ */

/* Ensure button containers isolate the brighter reflection */
.hero-btn-primary,
.btn-demo-primary {
  position: relative !important;
  overflow: hidden !important;
}

/* Brighter, wider reflective light ray */
.hero-btn-primary::after,
.btn-demo-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%; 
  width: 65%; /* Slightly wider beam for a more noticeable sweep */
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.65) 50%, /* High opacity for maximum shine */
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg); 
  pointer-events: none;
  /* Reduced overall loop time to 2.8s to make it come back faster, change back to 4.5s if you want the sweep itself to stay very slow */
  animation: buttonShineContinuous 2.8s infinite ease-in-out; 
}
/* ============================================================
   MOBILE-ONLY 2x2 GRID FOR HERO PILLARS (Max-width: 640px)
   ============================================================ */

@media (max-width: 640px) {
  /* 1. Hide the inline divider marks so they don't break the grid matrix */
  .sb-page-ecommerce-bookkeeping .hpr-div {
    display: none !important;
  }

  /* 2. Reshape the layout container into a tight 2x2 column profile */
  .sb-page-ecommerce-bookkeeping .hero-pillars-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* Exactly 2 cards per row */
    gap: 20px 12px !important; /* Clean horizontal and vertical cell spacing */
    max-width: 320px !important; /* Restricts width for optimal alignment on small phones */
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 3. Standardize column alignment */
  .sb-page-ecommerce-bookkeeping .hpr-item {
    width: 100% !important;
    justify-content: flex-start !important;
  }
}

/* Extended travel window to eliminate the dead space at the end */
@keyframes buttonShineContinuous {
  0% {
    left: -150%;
  }
  85% {
    /* Pushed to 85% so the shine takes almost the whole timeline to cross the button */
    left: 150%; 
  }
  100% {
    left: 150%; /* Remaining 15% is a very small, natural pause before repeating */
  }
}
  .sb-page-ecommerce-bookkeeping .hero-ctas{display:flex;gap:14px;justify-content:center;margin-top:36px}
  .sb-page-ecommerce-bookkeeping .hero-btn-primary{display:inline-flex;align-items:center;height:52px;padding:0 28px;border-radius:10px;background:linear-gradient(135deg,#2F4BFF 0%,#1932C7 100%);color:#fff;font-size:15px;font-weight:800;text-decoration:none;box-shadow:0 14px 30px rgba(47,75,255,.32);transition:transform .14s,box-shadow .14s}
  .sb-page-ecommerce-bookkeeping .hero-btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 40px rgba(47,75,255,.4)}

  .sb-page-ecommerce-bookkeeping .hero-pillars-row{display:flex;align-items:center;justify-content:center;gap:26px;margin-top:44px;flex-wrap:wrap}
  .sb-page-ecommerce-bookkeeping .hpr-item{display:flex;align-items:center;gap:12px;text-align:left}
  .sb-page-ecommerce-bookkeeping .hpr-icon{width:40px;height:40px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1.5px solid}
  .sb-page-ecommerce-bookkeeping .hpr-icon svg{width:20px;height:20px}
  .sb-page-ecommerce-bookkeeping .hpr-icon.blue{color:#5A78FF;border-color:rgba(90,120,255,.5);background:rgba(90,120,255,.10)}
  .sb-page-ecommerce-bookkeeping .hpr-icon.orange{color:#FF8A4D;border-color:rgba(255,138,77,.5);background:rgba(255,138,77,.10)}
  .sb-page-ecommerce-bookkeeping .hpr-txt{font-size:14px;font-weight:700;color:rgba(255,255,255,.92);line-height:1.2}
  .sb-page-ecommerce-bookkeeping .hpr-div{width:1px;height:34px;background:rgba(255,255,255,.14)}
  @media(max-width:620px){
    .sb-page-ecommerce-bookkeeping .hpr-div{display:none}
    .sb-page-ecommerce-bookkeeping .hero-pillars-row{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:16px;width:max-content;margin-left:auto;margin-right:auto}
    .sb-page-ecommerce-bookkeeping .hpr-item{width:100%}
  }
/* ============================================================
   MOBILE HERO BASE CLEANUP (Shrink Bottom Empty Space)
   ============================================================ */

@media (max-width: 640px) {
  /* 1. Flush out any remaining vertical stretching */
  .sb-page-ecommerce-bookkeeping .hero.hero-dark {
    min-height: auto !important;
    height: auto !important;
    padding-bottom: 24px !important; /* Reduces the bottom empty buffer space */
  }

  /* 2. Contain the massive background table so it doesn't inflate the container */
  .sb-page-ecommerce-bookkeeping .hero-ledger {
    height: 100% !important; /* Cap height to match your contents */
    bottom: 0 !important;
    transform: perspective(1250px) rotateX(20deg) scale(0.95) !important; /* Tighter tilt */
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, transparent 20%, #000 80%) !important;
            mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, transparent 20%, #000 80%) !important;
  }

  /* 3. Drop layout spacers inside the grid to wrap it snugly */
  .sb-page-ecommerce-bookkeeping .hero-pillars-row {
    margin-bottom: 12px !important; /* Eliminates the bottom overflow push */
  }
}
  /* ---------- WE GET ECOMMERCE COMPLEXITIES ---------- */
  .sb-page-ecommerce-bookkeeping .cx-center{text-align:center}
  .sb-page-ecommerce-bookkeeping .cx-h2{max-width:880px;margin-left:auto;margin-right:auto;font-size:clamp(32px,3.6vw,48px);line-height:1.06}
  .sb-page-ecommerce-bookkeeping .cx-body{max-width:680px;margin-left:auto;margin-right:auto}
  @media(max-width:980px){.sb-page-ecommerce-bookkeeping .cx-grid{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto}}

  /* ---------- COMPLEXITIES: operator tiles ---------- */
  .sb-page-ecommerce-bookkeeping .cx3-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
  @media(max-width:900px){.sb-page-ecommerce-bookkeeping .cx3-grid{grid-template-columns:1fr;max-width:560px;margin:48px auto 0}}
  .sb-page-ecommerce-bookkeeping .cx3-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:30px 26px 26px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s,border-color .2s}
  .sb-page-ecommerce-bookkeeping .cx3-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--cx3-accent)}
  .sb-page-ecommerce-bookkeeping .cx3-card::after{content:"";position:absolute;top:-46px;right:-46px;width:150px;height:150px;border-radius:50%;background:var(--cx3-accent);opacity:.055;pointer-events:none}
  .sb-page-ecommerce-bookkeeping .cx3-card:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(15,23,42,.10);border-color:var(--cx3-accent)}
  .sb-page-ecommerce-bookkeeping .cx3-ic{width:54px;height:54px;border-radius:14px;background:var(--cx3-soft);color:var(--cx3-accent);display:flex;align-items:center;justify-content:center;margin-bottom:18px;position:relative;z-index:1}
  .sb-page-ecommerce-bookkeeping .cx3-ic svg{width:27px;height:27px}
  .sb-page-ecommerce-bookkeeping .cx3-desc{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--cx3-accent);margin:0 0 8px}
  .sb-page-ecommerce-bookkeeping .cx3-name{font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.01em;margin:0 0 10px}
  .sb-page-ecommerce-bookkeeping .cx3-cx{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.5;margin:0 0 20px}
  .sb-page-ecommerce-bookkeeping .cx3-mini{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-soft);margin:0 0 14px;display:flex;align-items:center;gap:10px}
  .sb-page-ecommerce-bookkeeping .cx3-mini::after{content:"";flex:1;height:1px;background:var(--border)}
  .sb-page-ecommerce-bookkeeping .cx3-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;flex:1}
  .sb-page-ecommerce-bookkeeping .cx3-list li{position:relative;padding-left:28px;font-size:14px;color:var(--text-muted);line-height:1.45}
  .sb-page-ecommerce-bookkeeping .cx3-list li svg{position:absolute;left:0;top:1px;width:18px;height:18px;padding:4px;border-radius:50%;background:var(--cx3-soft);color:var(--cx3-accent)}
  .sb-page-ecommerce-bookkeeping .cx3-link{margin-top:22px;font-size:13px;font-weight:800;color:var(--cx3-accent);text-decoration:none;align-self:flex-start}

  /* ---------- CUSTOMER STORY separators (dark) ---------- */
  .sb-page-ecommerce-bookkeeping .cs-break{background:#0B1020;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
  .sb-page-ecommerce-bookkeeping .cs-break .container{display:flex;align-items:center;gap:42px;max-width:1040px;padding-top:46px;padding-bottom:46px}
  @media(max-width:760px){.sb-page-ecommerce-bookkeeping .cs-break .container{flex-direction:column;text-align:center;gap:24px;padding-top:38px;padding-bottom:38px}}
  .sb-page-ecommerce-bookkeeping .cs-media{flex:0 0 auto;display:flex;align-items:center;justify-content:center}
  .sb-page-ecommerce-bookkeeping .cs-logo-tile{flex:0 0 auto;background:#fff;border-radius:14px;padding:18px 26px;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 12px 28px rgba(0,0,0,.4)}
  .sb-page-ecommerce-bookkeeping .cs-logo-tile img{height:58px;width:auto;max-width:210px;object-fit:contain;display:block}
  .sb-page-ecommerce-bookkeeping .cs-break .cs-vid{width:262px;flex:0 0 auto;margin:0}
  .sb-page-ecommerce-bookkeeping .cs-quote-mark{font-family:Georgia,'Times New Roman',serif;font-size:120px;line-height:.5;color:var(--signal-blue);opacity:.55;font-weight:700}
  .sb-page-ecommerce-bookkeeping .cs-body{flex:1;min-width:0}
  .sb-page-ecommerce-bookkeeping .cs-quote{font-size:clamp(18px,2vw,23px);font-weight:500;line-height:1.5;color:rgba(255,255,255,.92);margin:0 0 16px}
  .sb-page-ecommerce-bookkeeping .cs-attr{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .sb-page-ecommerce-bookkeeping .cs-name{font-size:14px;font-weight:800;color:#fff}
  .sb-page-ecommerce-bookkeeping .cs-name span{color:rgba(255,255,255,.55);font-weight:600}
  .sb-page-ecommerce-bookkeeping .cs-stars{color:#FFC53D;font-size:14px;letter-spacing:2px}
  .sb-page-ecommerce-bookkeeping .cs-stack{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
  .sb-page-ecommerce-bookkeeping .cs-chip{font-size:11px;font-weight:700;color:rgba(255,255,255,.72);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:5px 11px}
  .sb-page-ecommerce-bookkeeping .cs-watch{display:inline-block;margin-top:12px;font-size:13px;font-weight:800;color:#8AA0FF;text-decoration:none}
  @media(max-width:760px){.sb-page-ecommerce-bookkeeping .cs-attr, .sb-page-ecommerce-bookkeeping .cs-stack{justify-content:center}}
  @media(max-width:880px){.sb-page-ecommerce-bookkeeping .rp-grid{grid-template-columns:1fr}}
  .sb-page-ecommerce-bookkeeping .rp-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:30px 26px}
  .sb-page-ecommerce-bookkeeping .rp-icon{width:50px;height:50px;border-radius:13px;background:var(--signal-blue-soft);color:var(--signal-blue);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
  .sb-page-ecommerce-bookkeeping .rp-icon svg{width:25px;height:25px}
  .sb-page-ecommerce-bookkeeping .rp-title{font-size:19px;font-weight:900;color:var(--ink);letter-spacing:-.01em;margin:0 0 6px}
  .sb-page-ecommerce-bookkeeping .rp-lead{font-size:14px;font-weight:700;color:var(--ink);margin:0 0 16px}
  .sb-page-ecommerce-bookkeeping .rp-card .cx-list li{font-size:13px}

  /* ---------- MONTHLY CERTIFIED CLOSE ---------- */
  .sb-page-ecommerce-bookkeeping .mc-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:52px}
  @media(max-width:820px){.sb-page-ecommerce-bookkeeping .mc-grid{grid-template-columns:1fr}}
  .sb-page-ecommerce-bookkeeping .mc-col{background:var(--dark-panel-2);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:32px 30px}
  .sb-page-ecommerce-bookkeeping .mc-col-get{background:rgba(24,166,106,.12);border-color:rgba(24,166,106,.4)}
  .sb-page-ecommerce-bookkeeping .mc-col-title{font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:20px}
  .sb-page-ecommerce-bookkeeping .mc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
  .sb-page-ecommerce-bookkeeping .mc-list li{position:relative;padding-left:26px;font-size:14.5px;color:rgba(255,255,255,.8);line-height:1.5}
  .sb-page-ecommerce-bookkeeping .mc-list li strong{color:#fff;font-weight:800}
  .sb-page-ecommerce-bookkeeping .mc-list-review li::before{content:"";position:absolute;left:0;top:6px;width:9px;height:9px;border-radius:50%;border:2px solid #6B8AFF}
  .sb-page-ecommerce-bookkeeping .mc-list-check li::before{content:"\2713";position:absolute;left:0;top:0;color:#35D7A0;font-weight:900}

  /* ---------- DEMO SECONDARY (sandbox link) ---------- */
  .sb-page-ecommerce-bookkeeping .demo-ctas{display:flex;align-items:center;gap:18px;flex-wrap:wrap}

  

  

  /* ---------- THE WEBGILITY DIFFERENCE (order-to-close workflow) ---------- */
  .sb-page-ecommerce-bookkeeping .wd-h2{text-align:center;max-width:none;margin:14px auto 0}
  .sb-page-ecommerce-bookkeeping .wd-sub{text-align:center;max-width:780px;margin:18px auto 0;font-size:clamp(15px,1.8vw,18px);line-height:1.6;color:var(--text-muted)}
  .sb-page-ecommerce-bookkeeping .wd-wrap{max-width:1340px;margin:56px auto 0;padding:0 44px}
  .sb-page-ecommerce-bookkeeping .wd-flow{display:flex;align-items:stretch;justify-content:center;gap:6px}
  .sb-page-ecommerce-bookkeeping .wd-conn{flex:0 0 30px;align-self:center;position:relative;height:2px}
  .sb-page-ecommerce-bookkeeping .wd-conn::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,var(--border-strong) 0 5px,transparent 5px 10px);opacity:.7}
  .sb-page-ecommerce-bookkeeping .wd-conn-node{position:absolute;right:-3px;top:50%;transform:translateY(-50%);width:9px;height:9px;border-radius:50%;border:2px solid var(--border-strong);background:var(--surface)}
  .sb-page-ecommerce-bookkeeping .wd-lines .wd-line, .sb-page-ecommerce-bookkeeping .wd-recon-chk, .sb-page-ecommerce-bookkeeping .wd-close-check, .sb-page-ecommerce-bookkeeping .wd-close-badge{transition:opacity .5s ease}
  .sb-page-ecommerce-bookkeeping .wd-seq .wd-lines .wd-line:not(:first-child){opacity:0}
  .sb-page-ecommerce-bookkeeping .wd-seq .wd-recon-chk, .sb-page-ecommerce-bookkeeping .wd-seq .wd-close-check, .sb-page-ecommerce-bookkeeping .wd-seq .wd-close-badge{opacity:0}
  .sb-page-ecommerce-bookkeeping .wd-seq .wd-lines .wd-line.in, .sb-page-ecommerce-bookkeeping .wd-seq .wd-recon-chk.in, .sb-page-ecommerce-bookkeeping .wd-seq .wd-close-check.in, .sb-page-ecommerce-bookkeeping .wd-seq .wd-close-badge.in{opacity:1}
  /* side cards (faded) */
  .sb-page-ecommerce-bookkeeping .wd-side{flex:0 0 150px;align-self:center;background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(247,249,253,.35));border:1px solid rgba(221,228,242,.55);border-radius:18px;padding:18px 16px;display:flex;flex-direction:column;opacity:.6;transition:opacity .3s ease}
  .sb-page-ecommerce-bookkeeping .wd-side-cap{font-size:10px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:var(--text-soft);margin-bottom:16px}
  .sb-page-ecommerce-bookkeeping .wd-side-cap2{margin-top:22px}
  .sb-page-ecommerce-bookkeeping .wd-chan-list, .sb-page-ecommerce-bookkeeping .wd-fc-list{display:flex;flex-direction:column;gap:17px}
  .sb-page-ecommerce-bookkeeping .wd-chan, .sb-page-ecommerce-bookkeeping .wd-fc{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;color:var(--ink)}
  .sb-page-ecommerce-bookkeeping .wd-chan img{height:23px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.85;transition:filter .25s ease,opacity .25s ease}
  .sb-page-ecommerce-bookkeeping .wd-chan img:hover{filter:grayscale(0);opacity:1}
  .sb-page-ecommerce-bookkeeping .wd-chan-txt{font-size:13.5px;font-weight:600;color:var(--ink)}
  .sb-page-ecommerce-bookkeeping .wd-fc-ic{display:inline-flex;color:var(--text-soft);transition:color .25s ease}.sb-page-ecommerce-bookkeeping .wd-fc-ic svg{width:18px;height:18px}
  .sb-page-ecommerce-bookkeeping .wd-fc:hover .wd-fc-ic{color:var(--signal-blue)}
  .sb-page-ecommerce-bookkeeping .wd-side-more{margin-top:auto;padding-top:16px;font-size:12px;font-weight:700;color:var(--text-soft)}
  /* big cards */
  .sb-page-ecommerce-bookkeeping .wd-big{flex:1 1 300px;background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:22px;display:flex;flex-direction:column;box-shadow:0 28px 64px rgba(14,17,23,.10);transition:box-shadow .4s ease}
  .sb-page-ecommerce-bookkeeping .wd-big-blue{border-color:rgba(47,75,255,.3)}
  .sb-page-ecommerce-bookkeeping .wd-big-orange{border-color:rgba(255,112,32,.32)}
  .sb-page-ecommerce-bookkeeping .wd-big-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}
  .sb-page-ecommerce-bookkeeping .wd-big-icon.blue{background:var(--signal-blue-soft);color:var(--signal-blue)}
  .sb-page-ecommerce-bookkeeping .wd-big-icon.orange{background:rgba(255,112,32,.12);color:#E65A0F}
  .sb-page-ecommerce-bookkeeping .wd-big-title{font-size:19px;font-weight:900;color:var(--ink);letter-spacing:-.02em}
  .sb-page-ecommerce-bookkeeping .wd-big-sub{font-size:13px;color:var(--text-muted);line-height:1.45;margin-top:4px;max-width:330px}
  .sb-page-ecommerce-bookkeeping .wd-big-foot.blue{color:var(--signal-blue)}
  .sb-page-ecommerce-bookkeeping .wd-big-foot.orange{color:#E65A0F}
  .sb-page-ecommerce-bookkeeping .wd-lines{display:flex;flex-direction:column;gap:9px;margin-top:4px}
  .sb-page-ecommerce-bookkeeping .wd-recon{display:flex;flex-direction:column;margin-top:4px}
  .sb-page-ecommerce-bookkeeping .wd-recon-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--border);font-size:12.5px}
  .sb-page-ecommerce-bookkeeping .wd-recon-lbl{flex:1;color:var(--text-muted)}
  .sb-page-ecommerce-bookkeeping .wd-recon-amt{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
  .sb-page-ecommerce-bookkeeping .wd-recon-chk{color:var(--certified-green);display:flex}.sb-page-ecommerce-bookkeeping .wd-recon-chk svg{width:16px;height:16px}
  .sb-page-ecommerce-bookkeeping .wd-recon-total{border-bottom:none;border-top:1.5px solid var(--border-strong);margin-top:2px;padding-top:10px}
  .sb-page-ecommerce-bookkeeping .wd-recon-total .wd-recon-lbl, .sb-page-ecommerce-bookkeeping .wd-recon-total .wd-recon-amt{font-weight:800;color:var(--ink)}
  .sb-page-ecommerce-bookkeeping .wd-line{display:flex;align-items:center;gap:8px;font-size:11.5px}
  .sb-page-ecommerce-bookkeeping .wd-line-ic{width:18px;height:18px;color:var(--text-soft);flex-shrink:0;display:flex;align-items:center;justify-content:center}
  .sb-page-ecommerce-bookkeeping .wd-line-ic svg{width:15px;height:15px}
  .sb-page-ecommerce-bookkeeping .wd-line-lbl{color:var(--text-muted);flex:1;white-space:nowrap}
  .sb-page-ecommerce-bookkeeping .wd-line-amt{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
  /* certified close card */
  .sb-page-ecommerce-bookkeeping .wd-close-card{background:var(--surface-soft);border:1px solid var(--border);border-radius:12px;padding:18px;flex:1}
  .sb-page-ecommerce-bookkeeping .wd-close-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
  .sb-page-ecommerce-bookkeeping .wd-close-title{font-size:14px;font-weight:800;color:var(--ink)}
  .sb-page-ecommerce-bookkeeping .wd-close-badge{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#E65A0F;background:rgba(255,112,32,.14);border-radius:999px;padding:4px 10px}
  .sb-page-ecommerce-bookkeeping .wd-close-badge.blue{color:var(--signal-blue);background:var(--signal-blue-soft)}
  .sb-page-ecommerce-bookkeeping .wd-close-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--border);font-size:13px;font-weight:600;color:var(--ink)}
  .sb-page-ecommerce-bookkeeping .wd-close-ic{color:#E65A0F;flex-shrink:0;display:flex}.sb-page-ecommerce-bookkeeping .wd-close-ic svg{width:18px;height:18px}
  .sb-page-ecommerce-bookkeeping .wd-close-lbl{flex:1}
  .sb-page-ecommerce-bookkeeping .wd-close-check{color:var(--certified-green);flex-shrink:0;display:flex}.sb-page-ecommerce-bookkeeping .wd-close-check svg{width:18px;height:18px}
  @media(max-width:1180px){
    .sb-page-ecommerce-bookkeeping .wd-flow{flex-direction:column;align-items:stretch;gap:4px;perspective:none}
    .sb-page-ecommerce-bookkeeping .wd-side-left, .sb-page-ecommerce-bookkeeping .wd-side-right{transform:none;box-shadow:none;opacity:1}
    .sb-page-ecommerce-bookkeeping .wd-conn{flex:0 0 26px;align-self:center;width:2px;height:26px}
    .sb-page-ecommerce-bookkeeping .wd-conn::before{background:repeating-linear-gradient(180deg,var(--border-strong) 0 5px,transparent 5px 10px)}
    .sb-page-ecommerce-bookkeeping .wd-conn-node{right:50%;transform:translateX(50%);top:auto;bottom:-3px}
    .sb-page-ecommerce-bookkeeping .wd-conn-dot{animation:none;display:none}
    .sb-page-ecommerce-bookkeeping .wd-side, .sb-page-ecommerce-bookkeeping .wd-big{flex:1 1 auto;width:100%;max-width:680px;margin-left:auto;margin-right:auto}
    .sb-page-ecommerce-bookkeeping .wd-side{flex-direction:row;align-items:center;flex-wrap:wrap;gap:14px}
    .sb-page-ecommerce-bookkeeping .wd-side-cap{width:100%;margin-bottom:0}
    .sb-page-ecommerce-bookkeeping .wd-chan-list, .sb-page-ecommerce-bookkeeping .wd-fc-list{flex-direction:row;flex-wrap:wrap;gap:14px}
    .sb-page-ecommerce-bookkeeping .wd-side-more{margin-top:0;padding-top:0}
  }
  @media(max-width:640px){.sb-page-ecommerce-bookkeeping .wd-auto-grid{grid-template-columns:1fr}}

  /* ---------- REAL PEOPLE (merged) ---------- */
  /* Real People: meet-the-team monograms */
  .sb-page-ecommerce-bookkeeping .rp-team{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:30px}
  .sb-page-ecommerce-bookkeeping .rp-avatars{display:flex;align-items:center}
  .sb-page-ecommerce-bookkeeping .rp-av{width:46px;height:46px;border-radius:50%;object-fit:cover;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;letter-spacing:.02em;color:#fff;border:3px solid var(--surface);margin-left:-12px;box-shadow:0 3px 10px rgba(15,23,42,.14)}
  .sb-page-ecommerce-bookkeeping .rp-av:first-child{margin-left:0}
  .sb-page-ecommerce-bookkeeping .rp-av-more{background:var(--surface-soft);color:var(--text-muted);font-size:12px;font-weight:800}
  .sb-page-ecommerce-bookkeeping .rp-row{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:48px}
  @media(max-width:760px){.sb-page-ecommerce-bookkeeping .rp-row{grid-template-columns:1fr}}
  .sb-page-ecommerce-bookkeeping .rp-quote{margin:18px 0 0;padding:14px 16px;background:var(--surface-soft);border-left:3px solid var(--signal-blue);border-radius:8px;font-size:13px;font-style:italic;color:var(--ink);line-height:1.5}
  .sb-page-ecommerce-bookkeeping .rp-quote cite{display:block;margin-top:8px;font-size:11px;font-style:normal;color:var(--text-soft)}
  .sb-page-ecommerce-bookkeeping .rp-full{margin-top:32px;background:var(--dark-panel);border:1px solid rgba(255,255,255,.08);border-top:3px solid var(--certified-green);border-radius:22px;padding:44px 40px}
  .sb-page-ecommerce-bookkeeping .rp-full-head{text-align:center;max-width:720px;margin:0 auto 28px}
  .sb-page-ecommerce-bookkeeping .rp-full .section-label{color:#35D7A0}
  .sb-page-ecommerce-bookkeeping .rp-full-h3{font-size:clamp(24px,2.6vw,32px);font-weight:900;letter-spacing:-.02em;color:#fff;margin:10px 0}
  .sb-page-ecommerce-bookkeeping .rp-full-sub{font-size:15px;color:rgba(255,255,255,.68);line-height:1.6;margin:0}
  .sb-page-ecommerce-bookkeeping .mc-col-get .mc-col-title{color:#35D7A0}

  /* ---------- INTEGRATIONS slim ---------- */
  .sb-page-ecommerce-bookkeeping .int-slim{padding:64px 0}
  .sb-page-ecommerce-bookkeeping .int-slim-h2{font-size:clamp(26px,3vw,40px);font-weight:900;letter-spacing:-.02em;color:var(--ink);margin:14px 0}
  .sb-page-ecommerce-bookkeeping .int-slim-sub{max-width:780px;margin:0 auto 28px;font-size:15px;color:var(--text-muted);line-height:1.6}
  .sb-page-ecommerce-bookkeeping .int-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:22px 40px;margin-bottom:24px}
  .sb-page-ecommerce-bookkeeping .int-band img{height:28px;max-width:120px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.62;transition:opacity .2s}
  .sb-page-ecommerce-bookkeeping .int-band img:hover{filter:none;opacity:1}

  /* ---------- DEMO COPY (flex child safety) ---------- */
  .sb-page-ecommerce-bookkeeping .demo-copy{flex:1}

  /* Normalize the ported decision-tabs H2 to match the rest of the page */
  .sb-page-ecommerce-bookkeeping .sb-page-ecommerce-bookkeeping .section-tabs .section-h2{font-size:clamp(28px,4vw,42px);font-weight:800;line-height:1.12;max-width:680px}
  /* Soft glow that gently swells (0 to max to 0) behind one card, then the next */
  .sb-page-ecommerce-bookkeeping .wd-close-card{position:relative}
  .sb-page-ecommerce-bookkeeping .wd-close-card.glow-on{animation:wdGlowPulse 3.4s ease-in-out}
  .sb-page-ecommerce-bookkeeping .wd-big-orange .wd-close-card.glow-on{animation:wdGlowPulseOrange 3.4s ease-in-out}
  @keyframes wdGlowPulse{
    0%{box-shadow:0 0 0 0 rgba(47,75,255,0)}
    50%{box-shadow:0 12px 40px 2px rgba(47,75,255,.20)}
    100%{box-shadow:0 0 0 0 rgba(47,75,255,0)}
  }
  @keyframes wdGlowPulseOrange{
    0%{box-shadow:0 0 0 0 rgba(255,112,32,0)}
    50%{box-shadow:0 12px 40px 2px rgba(255,112,32,.20)}
    100%{box-shadow:0 0 0 0 rgba(255,112,32,0)}
  }
  @media(prefers-reduced-motion:reduce){.sb-page-ecommerce-bookkeeping .wd-close-card.glow-on{animation:none}}
/* ===== END ecommerce-bookkeeping ===== */

/* ===== CASE STUDY DETAIL (csd-) — shared template for /case-studies/* inner pages ===== */
.csd-hero{position:relative;overflow:hidden;padding:120px 0 84px;background:radial-gradient(ellipse 60% 50% at 22% 22%,rgba(47,75,255,0.06) 0%,transparent 62%),radial-gradient(ellipse 45% 35% at 84% 24%,rgba(24,166,106,0.04) 0%,transparent 54%),#F7F8FC}
  .csd-hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background-image:linear-gradient(rgba(47,75,255,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(47,75,255,0.04) 1px,transparent 1px);background-size:72px 72px}
  .csd-hero .container{position:relative;z-index:1}
  .csd-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
  @media(max-width:880px){.csd-hero-grid{grid-template-columns:1fr;gap:32px}}
  .csd-hero-title{font-size:clamp(30px,4vw,46px);font-weight:900;letter-spacing:-.02em;line-height:1.1;color:var(--ink);margin:14px 0 18px}
  .csd-hero-body{font-size:17px;line-height:1.65;color:var(--text-muted);margin:0;max-width:620px}
  .csd-video{position:relative;border-radius:16px;overflow:hidden;box-shadow:0 24px 60px rgba(15,23,42,.2);cursor:pointer;aspect-ratio:16/9;background:#0B1020}
  .csd-video img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92;transition:opacity .2s}
  .csd-video:hover img{opacity:1}
  .csd-video .video-play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:66px;height:66px;border-radius:50%;background:rgba(255,255,255,.96);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 26px rgba(0,0,0,.32)}
  .csd-video .video-play-btn svg{width:24px;height:24px;color:var(--signal-blue);margin-left:3px}
  .csd-center{text-align:center}
  .csd-results-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:44px}
  @media(max-width:880px){.csd-results-grid{grid-template-columns:1fr 1fr;gap:24px}}
  @media(max-width:520px){.csd-results-grid{grid-template-columns:1fr}}
  .csd-result{text-align:center}
  .csd-result-ic{width:58px;height:58px;border-radius:50%;border:2px solid var(--signal-blue);display:inline-flex;align-items:center;justify-content:center;color:var(--signal-blue);margin-bottom:16px}
  .csd-result-ic svg{width:26px;height:26px}
  .csd-result h3{font-size:16px;font-weight:800;color:var(--ink);margin:0 0 8px;letter-spacing:-.01em}
  .csd-result p{font-size:14px;line-height:1.55;color:var(--text-muted);margin:0}
  .csd-about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:start}
  @media(max-width:880px){.csd-about-grid{grid-template-columns:1fr;gap:30px}}
  .csd-about-logo{height:50px;width:auto;margin-bottom:22px;display:block}
  .csd-about-desc{font-size:16px;line-height:1.65;color:var(--text-muted);margin:0 0 28px}
  .csd-about-facts{display:grid;grid-template-columns:1fr 1fr;gap:22px 32px}
  @media(max-width:520px){.csd-about-facts{grid-template-columns:1fr}}
  .csd-fact dt{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--signal-blue);margin:0 0 4px}
  .csd-fact dd{font-size:14.5px;color:var(--ink);margin:0;line-height:1.5}
  .csd-about-media img{width:100%;border-radius:16px;box-shadow:0 18px 44px rgba(15,23,42,.14);display:block}
  .csd-cs-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px}
  @media(max-width:880px){.csd-cs-grid{grid-template-columns:1fr;gap:38px}}
  .csd-numlist{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:20px}
  .csd-numlist li{display:flex;gap:15px;align-items:flex-start}
  .csd-num{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;background:var(--surface-soft);color:var(--text-soft)}
  .csd-col-solution .csd-num{background:#E65A0F;color:#fff}
  .csd-numlist li div{font-size:15px;line-height:1.6;color:var(--text-muted)}
  .csd-numlist li strong{color:var(--ink);font-weight:800}
  .csd-quote-wrap{max-width:920px;margin:0 auto}
  .csd-quote-row{display:flex;gap:40px;align-items:center;margin-top:22px}
  @media(max-width:720px){.csd-quote-row{flex-direction:column;text-align:center;gap:22px}}
  .csd-quote-photo{width:148px;height:148px;border-radius:50%;object-fit:cover;flex:0 0 auto;box-shadow:0 14px 34px rgba(15,23,42,.2)}
  .csd-quote-text{font-size:clamp(19px,2.1vw,26px);font-weight:600;line-height:1.5;letter-spacing:-.01em;color:var(--ink);margin:0 0 16px}
  .csd-quote-attr{font-size:15px;color:var(--text-muted)}
  .csd-quote-attr strong{color:var(--ink);font-weight:800}


/* ===== CASE STUDY LONGFORM (csl-) — text-only case studies ===== */
  .csl-hero{position:relative;background-size:cover;background-position:center;padding:150px 0 96px;text-align:center;overflow:hidden}
  .csl-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,16,32,.72),rgba(11,16,32,.84));z-index:0}
  .csl-hero-inner{position:relative;z-index:1;max-width:860px}
  .csl-hero-logo{max-width:280px;height:auto;margin:0 auto 22px;display:block}
  .csl-hero-title{font-size:clamp(30px,4vw,46px);font-weight:900;letter-spacing:-.02em;line-height:1.12;color:#fff;margin:0 0 16px}
  .csl-hero-intro{font-size:18px;line-height:1.6;color:rgba(255,255,255,.82);margin:0 auto;max-width:720px}
  .csl-stats{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:46px;max-width:900px;margin-left:auto;margin-right:auto}
  @media(max-width:760px){.csl-stats{grid-template-columns:1fr;gap:34px}}
  .csl-stat{text-align:center}
  .csl-stat-label{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--text-soft);margin-bottom:10px}
  .csl-stat-num{font-size:clamp(44px,7vw,68px);font-weight:900;letter-spacing:-.03em;color:var(--signal-blue);line-height:1;display:flex;align-items:center;justify-content:center;gap:10px}
  .csl-stat-num .csl-arrow{color:#E65A0F;font-size:.42em;line-height:1}
  .csl-stat p{font-size:14.5px;line-height:1.55;color:var(--text-muted);margin:16px auto 0;max-width:440px}
  .csl-body-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start}
  @media(max-width:900px){.csl-body-grid{grid-template-columns:1fr;gap:36px}}
  .csl-eyebrow{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--signal-blue);margin:0 0 10px}
  .csl-main .csl-eyebrow.mt{margin-top:50px}
  .csl-h3{font-size:clamp(22px,2.4vw,28px);font-weight:800;letter-spacing:-.01em;color:var(--ink);line-height:1.28;margin:0 0 20px}
  .csl-main p{font-size:16px;line-height:1.7;color:var(--text-muted);margin:0 0 18px}
  .csl-main a{color:var(--signal-blue);text-decoration:underline}
  .csl-quote{margin:36px 0;padding:28px 32px;background:var(--surface-soft);border-left:4px solid var(--signal-blue);border-radius:12px}
  .csl-quote-text{font-size:19px;line-height:1.5;font-style:italic;color:var(--ink);margin:0 0 18px}
  .csl-quote-by{display:flex;align-items:center;gap:14px}
  .csl-quote-by img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:0 0 auto}
  .csl-quote-by strong{display:block;font-size:13px;font-weight:800;color:var(--ink);text-transform:uppercase;letter-spacing:.03em}
  .csl-quote-by span{font-size:13px;color:var(--text-muted)}
  .csl-bullets{list-style:none;margin:22px 0;padding:0;display:flex;flex-direction:column;gap:12px}
  .csl-bullets li{position:relative;padding-left:30px;font-size:16px;line-height:1.6;color:var(--text-muted)}
  .csl-bullets li::before{content:"\2713";position:absolute;left:0;top:2px;width:19px;height:19px;border-radius:50%;background:var(--signal-blue-soft,rgba(47,75,255,.12));color:var(--signal-blue);font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center}
  .csl-results-img{display:block;max-width:100%;height:auto;margin:28px auto}
  .csl-side{position:sticky;top:100px}
  @media(max-width:900px){.csl-side{position:static}}
  .csl-about{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:28px 26px}
  .csl-about h5{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--signal-blue);margin:22px 0 6px}
  .csl-about h5:first-child{margin-top:0}
  .csl-about p{font-size:14px;line-height:1.55;color:var(--text-muted);margin:0}
  .csl-about a{color:var(--signal-blue)}
  .csl-figure{margin:30px 0}
  .csl-figure img{display:block;max-width:100%;height:auto;margin:0 auto;border-radius:12px}
  .csl-figure figcaption{text-align:center;font-size:13px;font-style:italic;color:var(--text-soft);margin-top:12px;line-height:1.5}
  .csl-numlist-ol{margin:22px 0;padding-left:22px;display:flex;flex-direction:column;gap:10px}
  .csl-numlist-ol li{font-size:16px;line-height:1.6;color:var(--text-muted);padding-left:6px}
  .csl-numlist-ol li::marker{color:var(--signal-blue);font-weight:800}
/* Try for Free — secondary hero CTA, sits parallel to Schedule a Demo */
  .sb-page-ecommerce-bookkeeping .hero-btn-secondary{display:inline-flex;align-items:center;height:52px;padding:0 28px;border-radius:10px;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.28);color:#fff;font-size:15px;font-weight:800;text-decoration:none;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .14s,border-color .14s,transform .14s}
  .sb-page-ecommerce-bookkeeping .hero-btn-secondary:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5);transform:translateY(-2px)}
/* ============================================================
   APPEND TO signal-blue-base.css
   Moved out of the ecommerce-bookkeeping page's inline <style>.
   Site-wide overflow-x fix + the otr-*/aor-* component styles
   used by "From every order to guaranteed reconciliation" and
   "Always On / Always Reconciled".
   ============================================================ */

/* Site-wide horizontal-scroll fix — was previously only applied
   while this one page happened to load (it lived in a page-scoped
   <style> block as a bare html/body selector). Now genuinely global. */
html, body { overflow-x: hidden; max-width: 100vw; }

.sb-page-ecommerce-bookkeeping .hero.hero-dark { contain: paint; }

.sb-page-ecommerce-bookkeeping .hero-ledger-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  contain: paint;
  z-index: 0;
  pointer-events: none;
}
.sb-page-ecommerce-bookkeeping .hero-ledger-clip .hero-ledger {
  position: absolute;
}
/* ============================================================
   ORDER-TO-RECONCILIATION DIAGRAM (otr-*)
   ============================================================ */
.sb-page-ecommerce-bookkeeping .otr-sub {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 720px;
  margin: 16px auto 0;
  text-align: center;
}
.sb-page-ecommerce-bookkeeping .otr-trust-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 56px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}
.sb-page-ecommerce-bookkeeping .otr-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 28px 32px;
  border-right: 1px solid var(--border);
}
.sb-page-ecommerce-bookkeeping .otr-trust-item:last-child { border-right: none; }
.sb-page-ecommerce-bookkeeping .otr-trust-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--signal-blue-soft);
  color: var(--signal-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sb-page-ecommerce-bookkeeping .otr-trust-icon svg { width: 20px; height: 20px; }
.sb-page-ecommerce-bookkeeping .otr-trust-title {
  font-size: 15px;
  font-weight: 850;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.sb-page-ecommerce-bookkeeping .otr-trust-body {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.55;
}
@media (max-width: 1024px) {
  .sb-page-ecommerce-bookkeeping .otr-trust-strip { grid-template-columns: 1fr; }
  .sb-page-ecommerce-bookkeeping .otr-trust-item { border-right: none; border-bottom: 1px solid var(--border); }
  .sb-page-ecommerce-bookkeeping .otr-trust-item:last-child { border-bottom: none; }
}

/* ============================================================
   ALWAYS ON / ALWAYS RECONCILED (aor-*)
   ============================================================ */
.sb-page-ecommerce-bookkeeping .aor {
  position: relative;
  overflow: hidden;
  padding: 104px 0 96px;
  background: rgba(255,255,255,0.6);
}
.sb-page-ecommerce-bookkeeping .aor-grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 0%, transparent 80%);
}
.sb-page-ecommerce-bookkeeping .aor-container {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 40px;
}
.sb-page-ecommerce-bookkeeping .aor-head { text-align: center; max-width: 900px; margin: 0 auto 64px; }
.sb-page-ecommerce-bookkeeping .aor-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #7C93FF;
  margin-bottom: 22px;
}
.sb-page-ecommerce-bookkeeping .aor-h2 {
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 900;
  color: #fff;
}
.sb-page-ecommerce-bookkeeping .aor-h2 .accent { color: #5E78FF; display: block; }
.sb-page-ecommerce-bookkeeping .aor-rule {
  width: 56px;
  height: 4px;
  border-radius: 4px;
  background: var(--signal-blue);
  margin: 28px auto 0;
}
.sb-page-ecommerce-bookkeeping .aor-columns {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0 48px;
  align-items: start;
}
.sb-page-ecommerce-bookkeeping .aor-divider {
  align-self: stretch;
  width: 1px;
  margin-top: 8px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.14) 18%, rgba(255,255,255,0.14) 82%, transparent);
}
.sb-page-ecommerce-bookkeeping .col-on  { --aor-accent: var(--signal-blue); --aor-accent-light: #6E86FF; }
.sb-page-ecommerce-bookkeeping .col-rec { --aor-accent: var(--certified-green); --aor-accent-light: #3DDA95; }
.sb-page-ecommerce-bookkeeping .col-header { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.sb-page-ecommerce-bookkeeping .col-badge {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--aor-accent);
  box-shadow: 0 8px 24px -6px var(--aor-accent);
}
.sb-page-ecommerce-bookkeeping .col-badge svg { width: 19px; height: 19px; stroke: #fff; }
.sb-page-ecommerce-bookkeeping .col-label {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--aor-accent-light);
  white-space: nowrap;
}
.sb-page-ecommerce-bookkeeping .col-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--aor-accent), transparent); opacity: 0.55; }
.sb-page-ecommerce-bookkeeping .card-stack { display: flex; flex-direction: column; gap: 12px; }
.sb-page-ecommerce-bookkeeping .aor-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: rgba(255,255,255,0.032);
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 16px;
  padding: 20px 22px;
  transition: border-color .18s, background .18s, transform .18s;
}
.sb-page-ecommerce-bookkeeping .aor-card:hover {
  border-color: color-mix(in srgb, var(--aor-accent) 55%, transparent);
  background: rgba(255,255,255,0.05);
  transform: translateY(-2px);
}
.sb-page-ecommerce-bookkeeping .aor .card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--aor-accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--aor-accent) 30%, transparent);
  color: var(--aor-accent-light);
}
.sb-page-ecommerce-bookkeeping .aor .card-icon svg { width: 20px; height: 20px; stroke: currentColor; }
.sb-page-ecommerce-bookkeeping .aor .card-title { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; color: rgba(255,255,255,0.96); margin-bottom: 5px; }
.sb-page-ecommerce-bookkeeping .aor .card-body { font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,0.56); }
.sb-page-ecommerce-bookkeeping .aor-foot { text-align: center; max-width: 720px; margin: 64px auto 0; }
.sb-page-ecommerce-bookkeeping .aor-foot-lead {
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.5;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 16px;
}
.sb-page-ecommerce-bookkeeping .aor-foot-lead .g { color: #3DDA95; }
.sb-page-ecommerce-bookkeeping .aor-foot-body { font-size: 15px; line-height: 1.75; color: rgba(255,255,255,0.55); font-weight: 450; }
.sb-page-ecommerce-bookkeeping .aor-foot-body b { color: rgba(255,255,255,0.85); font-weight: 650; }
@media (max-width: 860px) {
  .sb-page-ecommerce-bookkeeping .aor-columns { grid-template-columns: 1fr; gap: 44px; }
  .sb-page-ecommerce-bookkeeping .aor-divider { display: none; }
}
@media (max-width: 768px) {
  .sb-page-ecommerce-bookkeeping .aor-container { padding: 0 24px; }
  .sb-page-ecommerce-bookkeeping .aor { padding: 72px 0; }
}
/* Expert Judgement section — force 4-across instead of the shared 3-col default */
.sb-page-ecommerce-bookkeeping #expert-judgement .dark-feature-grid {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1024px) {
  .sb-page-ecommerce-bookkeeping #expert-judgement .dark-feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .sb-page-ecommerce-bookkeeping #expert-judgement .dark-feature-grid {
    grid-template-columns: 1fr;
  }
}
/* Software + Specialists section — pale blue background, coordinated accents */
.sb-page-ecommerce-bookkeeping .aor {
  background: rgba(255,255,255,0.6);
  padding: 96px 0;
}
.sb-page-ecommerce-bookkeeping .aor-grid-overlay {
  display: none;
}
.sb-page-ecommerce-bookkeeping .aor-eyebrow {
  color: var(--signal-blue);
}
.sb-page-ecommerce-bookkeeping .aor-h2 {
  color: var(--ink);
}
.sb-page-ecommerce-bookkeeping .aor-h2 .accent {
  color: var(--signal-blue);
  display: block;
}
.sb-page-ecommerce-bookkeeping .aor-rule {
  background: var(--signal-blue);
}
.sb-page-ecommerce-bookkeeping .aor-divider {
  background: linear-gradient(180deg, transparent, rgba(47,75,255,0.20) 18%, rgba(47,75,255,0.20) 82%, transparent);
}
.sb-page-ecommerce-bookkeeping .aor-card {
  background: #fff;
  border: 1px solid rgba(47,75,255,0.10);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(47,75,255,0.05);
}
.sb-page-ecommerce-bookkeeping .aor-card:hover {
  border-color: rgba(47,75,255,0.24);
  box-shadow: 0 14px 32px rgba(47,75,255,0.09);
  background: #fff;
  transform: translateY(-2px);
}
.sb-page-ecommerce-bookkeeping .col-on,
.sb-page-ecommerce-bookkeeping .col-rec {
  --aor-accent: var(--signal-blue);
  --aor-accent-light: var(--signal-blue);
}
.sb-page-ecommerce-bookkeeping .col-badge {
  background: var(--signal-blue);
  box-shadow: 0 8px 20px rgba(47,75,255,0.28);
}
.sb-page-ecommerce-bookkeeping .col-badge svg {
  stroke: #fff;
}
.sb-page-ecommerce-bookkeeping .col-label {
  color: var(--ink);
}
.sb-page-ecommerce-bookkeeping .col-line {
  background: linear-gradient(90deg, rgba(47,75,255,0.4), transparent);
  opacity: 1;
}
.sb-page-ecommerce-bookkeeping .aor .card-icon {
  background: rgba(47,75,255,0.08);
  border: 1px solid rgba(47,75,255,0.16);
  color: var(--signal-blue);
}
.sb-page-ecommerce-bookkeeping .aor .card-title {
  color: var(--ink);
}
.sb-page-ecommerce-bookkeeping .aor .card-body {
  color: var(--text-muted);
}
.sb-page-ecommerce-bookkeeping .aor-foot-lead {
  color: var(--ink);
}
.sb-page-ecommerce-bookkeeping .aor-foot-lead .g {
  color: var(--signal-blue);
}
.sb-page-ecommerce-bookkeeping .aor-foot-body {
  color: var(--text-muted);
}
.sb-page-ecommerce-bookkeeping .aor-foot-body b {
  color: var(--ink);
}
/* Hero trust row — replaces the 4-pillar row */
.sb-page-ecommerce-bookkeeping .hero-trust-row {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 44px;
  padding: 22px 28px;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}
.sb-page-ecommerce-bookkeeping .htr-dots {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.sb-page-ecommerce-bookkeeping .htr-dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sb-page-ecommerce-bookkeeping .htr-dot-blue {
  background: rgba(90,120,255,0.14);
  position: relative;
}
.sb-page-ecommerce-bookkeeping .htr-dot-blue::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #5A78FF;
  animation: htrBreathe 2.6s ease-in-out infinite;
}
.sb-page-ecommerce-bookkeeping .htr-dot-line {
  width: 40px;
  height: 1px;
  background: rgba(53,215,160,0.4);
  flex-shrink: 0;
}
.sb-page-ecommerce-bookkeeping .htr-dot-check {
  border: 1.5px solid rgba(53,215,160,0.5);
  color: #35D7A0;
}
.sb-page-ecommerce-bookkeeping .htr-dot-check svg {
  width: 16px;
  height: 16px;
}
.sb-page-ecommerce-bookkeeping .htr-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.sb-page-ecommerce-bookkeeping .htr-line1 {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}
.sb-page-ecommerce-bookkeeping .htr-line2 {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
}
.sb-page-ecommerce-bookkeeping .htr-green {
  color: #35D7A0;
  font-weight: 800;
}

@keyframes htrBreathe {
  0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(90,120,255,0.5); }
  50%       { transform: scale(1.25); opacity: 0.85; box-shadow: 0 0 0 8px rgba(90,120,255,0); }
}

@media (max-width: 620px) {
  .sb-page-ecommerce-bookkeeping .hero-trust-row {
    flex-direction: column;
    gap: 16px;
    text-align: center;
    padding: 20px 20px;
  }
  .sb-page-ecommerce-bookkeeping .htr-text {
    text-align: center;
  }
}
/* ============================================================
   FONT SIZE NORMALIZATION — ecommerce-bookkeeping page
   Unifies all section headings to one scale and all body/intro
   paragraphs to one scale, regardless of which component class
   they came from (section-h2, cx-h2, aor-h2, wd-sub, otr-sub, etc).
   ============================================================ */

/* ── All H2-level section headings: same size, weight, tracking ── */
.sb-page-ecommerce-bookkeeping .section-h2,
.sb-page-ecommerce-bookkeeping .cx-h2,
.sb-page-ecommerce-bookkeeping .wd-h2,
.sb-page-ecommerce-bookkeeping .aor-h2 {
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* ── All intro/body paragraphs directly under a heading: same size ── */
.sb-page-ecommerce-bookkeeping .section-body,
.sb-page-ecommerce-bookkeeping .otr-sub,
.sb-page-ecommerce-bookkeeping .wd-sub,
.sb-page-ecommerce-bookkeeping .cx-body {
  font-size: 17px;
  line-height: 1.7;
  font-weight: 450;
}

/* ── Section eyebrows/labels: same size + tracking everywhere ── */
.sb-page-ecommerce-bookkeeping .section-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.22em;
}
/* ============================================================
   REBUILT 4-STEP CARDS — matches reference layout exactly
   ============================================================ */
.sb-page-ecommerce-bookkeeping .otr-steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 0 8px;
  margin-top: 48px;
}
.sb-page-ecommerce-bookkeeping .otr-step {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 20px 22px;
  box-shadow: 0 4px 16px rgba(15,23,42,0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}
.sb-page-ecommerce-bookkeeping .otr-badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--signal-blue);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  box-shadow: 0 3px 8px rgba(47,75,255,0.28);
}
.sb-page-ecommerce-bookkeeping .otr-card-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0;
}
.sb-page-ecommerce-bookkeeping .otr-card-sub {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 2px 0 16px;
}
.sb-page-ecommerce-bookkeeping .otr-card-desc {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-muted);
  margin-top: 16px;
  padding-top: 0;
  text-align: center;
}
.sb-page-ecommerce-bookkeeping .otr-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--signal-blue);
  font-size: 18px;
  font-weight: 700;
  padding: 0 2px;
}

/* Step 1: logo grid */
.sb-page-ecommerce-bookkeeping .otr-logo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}
.sb-page-ecommerce-bookkeeping .otr-logo-chip {
  height: 40px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
}
.sb-page-ecommerce-bookkeeping .otr-logo-chip img { max-height: 16px; max-width: 100%; object-fit: contain; }
.sb-page-ecommerce-bookkeeping .otr-logo-text { font-size: 13px; font-weight: 700; color: #E8623C; }
.sb-page-ecommerce-bookkeeping .otr-logo-more { font-size: 10.5px; font-weight: 700; color: var(--signal-blue); }

/* Step 2: mini order + checklist */
.sb-page-ecommerce-bookkeeping .otr-mini-order {
  width: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 14px;
  margin-bottom: 12px;
}
.sb-page-ecommerce-bookkeeping .otr-mini-icons { display: flex; justify-content: center; gap: 14px; color: var(--signal-blue); }
.sb-page-ecommerce-bookkeeping .otr-mini-ic svg { width: 18px; height: 18px; }
.sb-page-ecommerce-bookkeeping .otr-mini-pct { font-size: 15px; font-weight: 800; }
.sb-page-ecommerce-bookkeeping .otr-mini-amount { margin-top: 8px; font-size: 15px; font-weight: 800; color: var(--ink); }
.sb-page-ecommerce-bookkeeping .otr-check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  width: 100%;
}
.sb-page-ecommerce-bookkeeping .otr-check-pill {
  font-size: 10px;
  font-weight: 650;
  color: var(--signal-blue);
  background: var(--signal-blue-soft);
  border: none;
  border-radius: 999px;
  padding: 4px 6px;
  white-space: nowrap;
}

/* Step 3: rules box */
.sb-page-ecommerce-bookkeeping .otr-rules-box {
  width: 100%;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.sb-page-ecommerce-bookkeeping .otr-rules-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signal-blue);
  margin-bottom: 8px;
  text-align: left;
}
.sb-page-ecommerce-bookkeeping .otr-rule-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--border);
  text-align: left;
}
.sb-page-ecommerce-bookkeeping .otr-rule-row:first-of-type { border-top: none; }
.sb-page-ecommerce-bookkeeping .otr-rule-ic { color: var(--signal-blue); flex-shrink: 0; }
.sb-page-ecommerce-bookkeeping .otr-rule-ic svg { width: 15px; height: 15px; }
.sb-page-ecommerce-bookkeeping .otr-rule-name { font-size: 11px; font-weight: 700; color: var(--ink); }
.sb-page-ecommerce-bookkeeping .otr-rule-val { font-size: 10.5px; color: var(--text-muted); }

/* Step 4: reconcile quad */
.sb-page-ecommerce-bookkeeping .otr-recon-quad {
  position: relative;
  width: 100%;
  max-width: 200px;
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.sb-page-ecommerce-bookkeeping .otr-recon-tag {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 10px;
  font-weight: 650;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px;
}
.sb-page-ecommerce-bookkeeping .otr-recon-tag svg { width: 16px; height: 16px; color: var(--signal-blue); }

.sb-page-ecommerce-bookkeeping .otr-recon-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--signal-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(47,75,255,0.32);
}
.sb-page-ecommerce-bookkeeping .otr-recon-circle svg { width: 18px; height: 18px; }
.sb-page-ecommerce-bookkeeping .otr-recon-note {
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  text-align: left;
}
.sb-page-ecommerce-bookkeeping .otr-recon-note-ic { color: var(--signal-blue); flex-shrink: 0; }
.sb-page-ecommerce-bookkeeping .otr-recon-note-ic svg { width: 18px; height: 18px; }
.sb-page-ecommerce-bookkeeping .otr-recon-note p { font-size: 10.5px; line-height: 1.4; color: var(--text-muted); margin: 0; }

@media (max-width: 1024px) {
  .sb-page-ecommerce-bookkeeping .otr-steps { grid-template-columns: 1fr; gap: 16px; }
  .sb-page-ecommerce-bookkeeping .otr-arrow { transform: rotate(90deg); padding: 4px 0; }
}
.otr-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #6D8CFF;              /* brighter blue so it pops on dark bg */
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: none;
  background: none;
  padding: 0;
  transition: color 0.2s ease, gap 0.2s ease;
}
.otr-cta-link:hover {
  color: #93A9FF;
  gap: 11px;                   /* arrow nudges forward on hover */
}
.otr-cta-link svg,
.otr-cta-link .arrow {
  transition: transform 0.2s ease;
}
.otr-cta-link:hover .arrow {
  transform: translateX(3px);
}