/* ==========================================================================
   WEBBIZORA — DESIGN TOKENS
   Single source of truth for color, type and spacing.
   ========================================================================== */

:root {
  /* Color — Bold Confident (saturated cobalt + near-black ink) */
  --wb-primary-dark:   #12131A;
  --wb-deep-dark:       #0B0C11;
  --wb-cobalt:           #2A3EFF;
  --wb-cobalt-bright:    #4F5FFF;
  --wb-cobalt-accent:    #8E98FF;
  --wb-highlight:        #D4FF3F;
  --wb-cobalt-deep:      #1C2BB8;
  --wb-cobalt-soft:      #E8E9FF;
  --wb-paper:       #FFFFFF;
  --wb-cream:           #F4F4F8;
  --wb-white:           #FFFFFF;
  --wb-text:            #12131A;
  --wb-text-muted:      #5C5E6B;
  --wb-border:          #E4E4EC;

  /* On-dark variants */
  --wb-text-on-dark:        #FFFFFF;
  --wb-text-on-dark-muted:  #DADCF5;
  --wb-border-on-dark:      rgba(255, 255, 255, 0.14);

  /* Type — bold geometric display face for headings, clean sans body */
  --wb-font-display: 'Sora', 'Inter', -apple-system, sans-serif;
  --wb-font-body:    'Inter', -apple-system, sans-serif;
  --wb-font-mono:    'JetBrains Mono', 'Courier New', monospace;

  --wb-h1: clamp(2.5rem, 1.8rem + 3.2vw, 4.5rem);       /* 40px -> 72px */
  --wb-h2: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);        /* 32px -> 44px */
  --wb-h3: clamp(1.125rem, 1.02rem + 0.4vw, 1.5rem);    /* 18px -> 24px */
  --wb-body: clamp(1rem, 0.97rem + 0.1vw, 1.125rem);    /* 16px -> 18px */

  /* Spacing scale */
  --wb-s-4: 0.25rem;
  --wb-s-8: 0.5rem;
  --wb-s-12: 0.75rem;
  --wb-s-16: 1rem;
  --wb-s-20: 1.25rem;
  --wb-s-24: 1.5rem;
  --wb-s-32: 2rem;
  --wb-s-48: 3rem;
  --wb-s-64: 4rem;
  --wb-s-80: 5rem;
  --wb-s-96: 6rem;

  /* Layout — generous, confident rounding throughout (color-block hero,
     rounded cards) rather than the sharp/soft split of the previous system */
  --wb-max-width: 1240px;
  --wb-radius-sharp: 12px;
  --wb-radius-sm: 12px;
  --wb-radius-md: 20px;
  --wb-radius-lg: 28px;

  /* Motion */
  --wb-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --wb-fast: 150ms;
  --wb-base: 240ms;
  --wb-slow: 550ms;

  /* Shadow — used sparingly */
  --wb-shadow-sm: 0 1px 2px rgba(18, 19, 26, 0.06);
  --wb-shadow-md: 0 8px 24px rgba(18, 19, 26, 0.10);
  --wb-shadow-lg: 0 24px 64px rgba(18, 19, 26, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --wb-fast: 0ms;
    --wb-base: 0ms;
  }
}
/* ==========================================================================
   WEBBIZORA — BASE / RESET
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--wb-font-body);
  font-size: var(--wb-body);
  line-height: 1.6;
  color: var(--wb-text);
  background: var(--wb-paper);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, p { margin: 0; }

h1, h2, h3, h4 {
  font-family: var(--wb-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--wb-text);
}

h1 { font-size: var(--wb-h1); line-height: 1.02; letter-spacing: -0.03em; font-weight: 800; }
h2 { font-size: var(--wb-h2); line-height: 1.1; font-weight: 800; }
h3 { font-size: var(--wb-h3); line-height: 1.3; font-weight: 700; }

p { color: var(--wb-text-muted); }

input, textarea, select {
  font: inherit;
  color: inherit;
}

/* Accessible focus state — never remove without replacing */
:focus-visible {
  outline: 2px solid var(--wb-cobalt);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--wb-cobalt);
  color: var(--wb-white);
  padding: var(--wb-s-12) var(--wb-s-16);
  z-index: 200;
  font-weight: 600;
  border-radius: 0 0 var(--wb-radius-sm) 0;
}
.skip-link:focus {
  left: 0;
}

/* Layout utility */
.wb-container {
  width: 100%;
  max-width: var(--wb-max-width);
  margin-inline: auto;
  padding-inline: var(--wb-s-16);
}

@media (min-width: 400px) {
  .wb-container { padding-inline: var(--wb-s-24); }
}

@media (min-width: 768px) {
  .wb-container { padding-inline: var(--wb-s-32); }
}

.wb-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.wb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--wb-s-8);
  font-family: var(--wb-font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wb-cobalt-accent);
}

.wb-eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wb-cobalt-accent);
}

/* On light/white backgrounds the bright accent fails contrast —
   use the deeper cobalt instead. Applied via class, not inline style,
   so every section header stays in sync from one place. */
.wb-eyebrow--on-light { color: var(--wb-cobalt-deep); }
.wb-eyebrow--on-light::before { background: var(--wb-cobalt-deep); }

/* On the hero's saturated cobalt background, even the light accent
   variant fails contrast against itself (blue-on-blue) — needs plain
   white instead. */
.wb-eyebrow--on-color { color: var(--wb-white); }
.wb-eyebrow--on-color::before { background: var(--wb-white); }

/* Muted variant — for de-emphasized labels like "What's Not Included" */
.wb-eyebrow--muted { color: var(--wb-text-muted); }
.wb-eyebrow--muted::before { background: var(--wb-text-muted); }

section[data-theme="dark"] {
  background: var(--wb-primary-dark);
  color: var(--wb-text-on-dark);
}
section[data-theme="dark"] h1,
section[data-theme="dark"] h2,
section[data-theme="dark"] h3 { color: var(--wb-white); }
section[data-theme="dark"] p { color: var(--wb-text-on-dark-muted); }

section[data-theme="soft"] { background: var(--wb-cobalt-soft); }
section[data-theme="light"] { background: var(--wb-paper); }
/* ==========================================================================
   BUTTONS
   ========================================================================== */

.wb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wb-s-8);
  padding: 0.85rem 1.6rem;
  border-radius: var(--wb-radius-sm);
  font-weight: 600;
  font-size: 0.9375rem;
  white-space: nowrap;
  box-shadow: var(--wb-shadow-sm);
  transition: transform var(--wb-fast) var(--wb-ease), box-shadow var(--wb-fast) var(--wb-ease), background var(--wb-fast) var(--wb-ease);
}

.wb-btn--primary {
  /* Was near-black text (--wb-deep-dark) directly on the saturated
     cobalt background — dark-on-blue reads as muddy and low-contrast,
     not the crisp look a primary CTA needs. White text is the standard,
     legible pairing for a colored button (see Stripe, Linear, etc). */
  background: var(--wb-cobalt);
  color: var(--wb-white);
}
.wb-btn--primary:hover { background: var(--wb-cobalt-bright); transform: translateY(-2px); box-shadow: var(--wb-shadow-lg); }

/* On the cobalt hero/page-hero blocks specifically, a cobalt-background
   button would sit on a cobalt background and effectively disappear —
   invert to a solid white button instead so it reads as the primary
   action it is. */
.wb-hero .wb-btn--primary,
.wb-page-hero .wb-btn--primary {
  background: var(--wb-white);
  color: var(--wb-cobalt-deep);
}
.wb-hero .wb-btn--primary:hover,
.wb-page-hero .wb-btn--primary:hover {
  background: var(--wb-deep-dark);
  color: var(--wb-white);
  transform: translateY(-2px);
  box-shadow: var(--wb-shadow-lg);
}

.wb-btn--ghost-dark {
  background: transparent;
  color: var(--wb-white);
  border: 1.5px solid var(--wb-border-on-dark);
  box-shadow: none;
}
.wb-btn--ghost-dark:hover { background: var(--wb-white); color: var(--wb-cobalt-deep); border-color: var(--wb-white); transform: translateY(-2px); }

.wb-btn--ghost-light {
  background: transparent;
  color: var(--wb-text);
  border: 1.5px solid var(--wb-border);
  box-shadow: none;
}
.wb-btn--ghost-light:hover { border-color: var(--wb-cobalt); color: var(--wb-cobalt-deep); background: var(--wb-cobalt-soft, #E8E9FF); transform: translateY(-2px); }

.wb-btn--sm { padding: 0.6rem 1.1rem; font-size: 0.875rem; }
.wb-btn--block { width: 100%; }

/* ==========================================================================
   HEADER
   ========================================================================== */

.wb-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 72px;
  display: flex;
  align-items: center;
  background: rgba(11, 12, 17, 0.88);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--wb-border-on-dark);
}

.wb-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wb-s-16);
  width: 100%;
}

.wb-logo {
  display: flex;
  align-items: center;
  gap: var(--wb-s-8);
  font-family: var(--wb-font-display);
  font-weight: 800;
  font-size: clamp(1.0625rem, 1rem + 0.6vw, 1.25rem);
  color: var(--wb-white);
  flex-shrink: 0;
  white-space: nowrap;
}
.wb-logo__mark { width: 32px; height: 32px; flex-shrink: 0; }

.wb-nav {
  display: none;
}

@media (min-width: 1024px) {
  .wb-nav {
    display: flex;
    align-items: center;
    gap: var(--wb-s-8);
    margin-inline: auto;
  }
}

.wb-nav__item { position: relative; }

.wb-nav__link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--wb-text-on-dark);
  padding: 10px var(--wb-s-12);
  border-radius: var(--wb-radius-sm);
  position: relative;
  transition: color var(--wb-fast) var(--wb-ease), background var(--wb-fast) var(--wb-ease);
}
.wb-nav__link:hover { color: var(--wb-white); background: rgba(255, 255, 255, 0.08); }
.wb-nav__link svg { width: 14px; height: 14px; transition: transform var(--wb-fast) var(--wb-ease); }
.wb-nav__item:hover .wb-nav__link svg,
.wb-nav__item:focus-within .wb-nav__link svg { transform: rotate(180deg); }

/* Animated underline — grows from center on hover, a small but real
   piece of "modern nav" polish the plain text links didn't have before. */
.wb-nav__link::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 0;
  height: 2px;
  background: var(--wb-cobalt-accent);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width var(--wb-fast) var(--wb-ease);
}
.wb-nav__link:hover::after { width: calc(100% - var(--wb-s-24)); }

.wb-header__actions {
  display: flex;
  align-items: center;
  gap: var(--wb-s-12);
  flex-shrink: 0;
}

@media (min-width: 400px) {
  .wb-header__actions { gap: var(--wb-s-16); }
}

.wb-header__cta { display: none; }
@media (min-width: 1024px) {
  .wb-header__cta { display: inline-flex; }
}

/* Compact quote CTA stays visible on mobile/tablet next to the hamburger,
   per the requirement that the quote action never be hidden behind a menu. */
.wb-header__cta-compact {
  display: inline-flex;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .wb-header__cta-compact { display: none; }
}

.wb-menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.wb-menu-toggle span {
  width: 20px;
  height: 2px;
  background: var(--wb-white);
  border-radius: 2px;
}
@media (min-width: 1024px) {
  .wb-menu-toggle { display: none; }
}

/* Mega menu — two-panel layout: a dark featured panel on the left
   (context, framing, one clear CTA) and a scannable link grid on the
   right, icons included since every service/industry already has one
   defined. Replaces the old plain two-column text-link dropdown.

   Structure note: .wb-mega is an invisible HITBOX only — no background,
   positioned flush against the trigger (top:100%, no gap) with
   padding-top providing the visual breathing room instead of a real
   gap. .wb-mega__body carries all the visible styling (background,
   shadow, slide-in animation). This fixes the classic dropdown bug
   where a real gap between trigger and menu breaks the :hover chain
   the moment the mouse crosses it — since the padding is still part
   of .wb-mega's own box, the hover/pointer-events area stays
   continuous all the way from the button into the menu. */
.wb-mega {
  position: absolute;
  top: 100%;
  padding-top: var(--wb-s-16);
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, 92vw);
  max-width: calc(100vw - 48px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--wb-base) var(--wb-ease), visibility var(--wb-base);
}

/* The Locations item sits furthest right in the nav — a menu centered on
   it can run past the viewport edge on laptop widths (1024–1280px).
   Anchor it to the right of its trigger instead of centering. */
.wb-nav__item--right .wb-mega {
  left: auto;
  right: 0;
  transform: translateX(0);
}

.wb-mega__body {
  background: var(--wb-white);
  border-radius: var(--wb-radius-lg);
  box-shadow: var(--wb-shadow-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 240px 1fr;
  transform: translateY(6px);
  transition: transform var(--wb-base) var(--wb-ease);
}

.wb-nav__item:hover .wb-mega,
.wb-nav__item:focus-within .wb-mega,
.wb-nav__item.is-open-touch .wb-mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.wb-nav__item:hover .wb-mega .wb-mega__body,
.wb-nav__item:focus-within .wb-mega .wb-mega__body,
.wb-nav__item.is-open-touch .wb-mega .wb-mega__body {
  transform: translateY(0);
}

.wb-mega__panel {
  background: var(--wb-primary-dark);
  color: var(--wb-text-on-dark);
  padding: var(--wb-s-32) var(--wb-s-24);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.wb-mega__panel::before {
  content: '';
  position: absolute;
  top: -40%; right: -40%;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: rgba(42, 62, 255, 0.35);
  pointer-events: none;
}
.wb-mega__eyebrow {
  position: relative;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wb-cobalt-accent);
  margin-bottom: var(--wb-s-12);
}
.wb-mega__panel h3 {
  position: relative;
  font-size: 1.25rem;
  line-height: 1.2;
  margin-bottom: var(--wb-s-12);
  color: var(--wb-white);
}
.wb-mega__panel p {
  position: relative;
  font-size: 0.8125rem;
  color: var(--wb-text-on-dark-muted);
  line-height: 1.5;
  margin-bottom: var(--wb-s-24);
}
.wb-mega__panel-cta {
  position: relative;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--wb-white);
  background: var(--wb-cobalt);
  padding: 10px 16px;
  border-radius: var(--wb-radius-sm);
  width: fit-content;
  transition: background var(--wb-fast) var(--wb-ease), transform var(--wb-fast) var(--wb-ease);
}
.wb-mega__panel-cta svg { width: 13px; height: 13px; }
.wb-mega__panel-cta:hover { background: var(--wb-cobalt-bright); transform: translateX(2px); }

.wb-mega__links {
  padding: var(--wb-s-20, 1.25rem);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  align-content: start;
}

.wb-mega__link {
  display: flex;
  align-items: center;
  gap: var(--wb-s-12);
  padding: var(--wb-s-12);
  border-radius: var(--wb-radius-sm);
  color: var(--wb-text);
  transition: background var(--wb-fast) var(--wb-ease);
}
.wb-mega__link:hover { background: var(--wb-cream); }
.wb-mega__link-icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: var(--wb-radius-sm);
  background: var(--wb-cobalt-soft, #E8E9FF);
  display: flex; align-items: center; justify-content: center;
}
.wb-mega__link-icon svg { width: 17px; height: 17px; color: var(--wb-cobalt-deep); }
.wb-mega__link-text strong { display: block; font-size: 0.8438rem; font-weight: 600; line-height: 1.3; }

.wb-mega__viewall {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: var(--wb-s-8);
  padding: var(--wb-s-12);
  border-top: 1px solid var(--wb-border);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--wb-cobalt-deep);
}
.wb-mega__viewall svg { width: 13px; height: 13px; }

/* Compact link style — used for Industries categories and Locations
   countries, where a description-per-item would be too much detail */
.wb-mega__links--compact { grid-template-columns: repeat(2, 1fr); gap: 2px; }
.wb-mega__link--compact {
  justify-content: space-between;
  font-size: 0.875rem;
  font-weight: 500;
  padding: var(--wb-s-12) var(--wb-s-12);
}
.wb-mega__link-arrow {
  width: 12px; height: 12px;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--wb-fast) var(--wb-ease), transform var(--wb-fast) var(--wb-ease);
  color: var(--wb-cobalt-deep);
}
.wb-mega__link--compact:hover .wb-mega__link-arrow { opacity: 1; transform: translateX(0); }
.wb-mega__link-globe { width: 15px; height: 15px; flex-shrink: 0; color: var(--wb-text-muted); }

/* Mobile nav */
.wb-mobile-nav {
  position: fixed;
  inset: 72px 0 0 0;
  background: var(--wb-primary-dark);
  z-index: 90;
  overflow-y: auto;
  padding: var(--wb-s-24);
  transform: translateX(100%);
  transition: transform var(--wb-base) var(--wb-ease);
}
.wb-mobile-nav.is-open { transform: translateX(0); }

.wb-mobile-nav__item { border-bottom: 1px solid var(--wb-border-on-dark); }
.wb-mobile-nav__trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--wb-s-16) 0;
  color: var(--wb-white);
  font-size: 1.0625rem;
  font-weight: 600;
  transition: color var(--wb-fast) var(--wb-ease);
}
.wb-mobile-nav__trigger:hover { color: var(--wb-cobalt-accent); }
.wb-mobile-nav__trigger svg { width: 16px; height: 16px; transition: transform var(--wb-fast) var(--wb-ease); }
.wb-mobile-nav__item.is-open .wb-mobile-nav__trigger svg { transform: rotate(180deg); }

.wb-mobile-nav__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--wb-base) var(--wb-ease);
}
.wb-mobile-nav__item.is-open .wb-mobile-nav__panel { max-height: 600px; }

.wb-mobile-nav__panel a {
  display: flex;
  align-items: center;
  gap: var(--wb-s-12);
  padding: var(--wb-s-12) var(--wb-s-8) var(--wb-s-12) var(--wb-s-16);
  color: var(--wb-text-on-dark-muted);
  font-size: 0.9375rem;
  min-height: 44px;
  border-left: 2px solid transparent;
  transition: border-color var(--wb-fast) var(--wb-ease), color var(--wb-fast) var(--wb-ease), background var(--wb-fast) var(--wb-ease);
}
.wb-mobile-nav__panel a:hover,
.wb-mobile-nav__panel a:active {
  border-left-color: var(--wb-cobalt);
  color: var(--wb-white);
  background: rgba(255, 255, 255, 0.04);
}
.wb-mobile-nav__link-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: var(--wb-radius-sm);
  background: rgba(42, 62, 255, 0.18);
  display: flex; align-items: center; justify-content: center;
}
.wb-mobile-nav__link-icon svg { width: 14px; height: 14px; color: var(--wb-cobalt-accent); }
.wb-mobile-nav__link--viewall {
  font-weight: 700;
  color: var(--wb-cobalt-accent) !important;
  justify-content: space-between;
  border-left-color: transparent !important;
}
.wb-mobile-nav__link--viewall svg:last-child { width: 13px; height: 13px; }

.wb-mobile-nav__cta { margin-top: var(--wb-s-24); }
/* ==========================================================================
   HERO
   ========================================================================== */

.wb-hero {
  background: var(--wb-cobalt);
  color: var(--wb-white);
  margin: var(--wb-s-16) var(--wb-s-16) 0;
  border-radius: var(--wb-radius-lg);
  padding-top: var(--wb-s-64);
  padding-bottom: 140px; /* room for the discovery panel to overlap */
  position: relative;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .wb-hero { margin: var(--wb-s-24) var(--wb-s-24) 0; }
}

.wb-hero::before {
  content: '';
  position: absolute;
  top: -18%;
  right: -12%;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.wb-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 70%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 15%, black 70%, transparent);
  pointer-events: none;
}

.wb-hero__grid {
  display: grid;
  gap: var(--wb-s-48);
  align-items: center;
  position: relative;
}

@media (min-width: 1024px) {
  .wb-hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--wb-s-64);
  }
}

.wb-hero__eyebrow { margin-bottom: var(--wb-s-24); }

.wb-hero h1 {
  color: var(--wb-white);
  max-width: 15ch;
}
.wb-hero h1 .wb-accent { color: var(--wb-highlight); }

.wb-hero__lead {
  margin-top: var(--wb-s-24);
  max-width: 46ch;
  font-size: 1.125rem;
  color: var(--wb-text-on-dark-muted);
}

.wb-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wb-s-16);
  margin-top: var(--wb-s-32);
}

.wb-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wb-s-24);
  margin-top: var(--wb-s-48);
}
.wb-hero__trust-item {
  display: flex;
  align-items: center;
  gap: var(--wb-s-8);
  font-size: 0.875rem;
  color: var(--wb-text-on-dark-muted);
}
.wb-hero__trust-item svg { width: 16px; height: 16px; color: var(--wb-white); flex-shrink: 0; }

/* Hero visual — abstract interface composition, not a robot/brain */
.wb-hero__visual {
  position: relative;
  height: 420px;
  display: none;
}
@media (min-width: 768px) { .wb-hero__visual { display: block; } }

.wb-hero__panel {
  position: absolute;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--wb-border-on-dark);
  border-radius: var(--wb-radius-sharp);
  backdrop-filter: blur(6px);
}

.wb-hero__panel--main {
  top: 8%;
  left: 4%;
  width: 84%;
  height: 78%;
  background: var(--wb-deep-dark);
  box-shadow: var(--wb-shadow-lg);
  padding: 0;
  overflow: hidden;
  transform: rotate(-1.2deg);
}

/* Mini browser chrome */
.wb-hero__browser-bar {
  display: flex;
  align-items: center;
  gap: var(--wb-s-8);
  padding: var(--wb-s-12) var(--wb-s-16);
  border-bottom: 1px solid var(--wb-border-on-dark);
}
.wb-hero__browser-dots { display: flex; gap: 6px; }
.wb-hero__browser-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--wb-border-on-dark); }
.wb-hero__browser-url {
  flex: 1;
  height: 20px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.05);
  margin-left: var(--wb-s-8);
}

/* A live-looking mini website preview that cycles through different
   industries — this is the signature idea for the hero: instead of a
   generic SaaS dashboard mockup, it visually demonstrates the actual
   value proposition (one platform, built differently per trade) using
   real industries and icons from the site. Pure CSS, no JS. */
.wb-hero__preview { padding: var(--wb-s-24) var(--wb-s-20); position: relative; height: calc(100% - 45px); display: flex; flex-direction: column; }
.wb-hero__preview-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--wb-s-20);
  flex-shrink: 0;
}
.wb-hero__preview-logo { width: 22px; height: 22px; border-radius: 5px; background: var(--wb-cobalt); flex-shrink: 0; }
.wb-hero__preview-links { display: flex; gap: 8px; }
.wb-hero__preview-links span { width: 26px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); }

.wb-hero__cycle { position: relative; flex: 1; min-height: 0; }

.wb-hero__cycle-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: wb-cycle-fade 12s ease-in-out infinite;
  animation-delay: var(--wb-delay, 0s);
}

.wb-hero__cycle-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  margin-bottom: var(--wb-s-16);
}
.wb-hero__cycle-badge svg { width: 14px; height: 14px; }
.wb-hero__cycle-badge span {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--wb-white);
}

.wb-hero__cycle-headline { height: 12px; width: 68%; border-radius: 4px; background: rgba(255, 255, 255, 0.16); margin-bottom: 10px; }
.wb-hero__cycle-headline--sm { width: 44%; background: rgba(255, 255, 255, 0.08); margin-bottom: var(--wb-s-16); }
.wb-hero__cycle-cta { width: 88px; height: 26px; border-radius: 6px; }

@keyframes wb-cycle-fade {
  0%, 2%   { opacity: 0; transform: translateY(6px); }
  8%, 21%  { opacity: 1; transform: translateY(0); }
  27%, 100% { opacity: 0; transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .wb-hero__cycle-item { animation: none; opacity: 0; }
  .wb-hero__cycle-item:first-child { opacity: 1; }
}

/* Progress dots showing which industry is active — purely decorative,
   driven by the same animation timing as the content above. */
.wb-hero__cycle-dots { display: flex; gap: 6px; margin-top: var(--wb-s-16); position: relative; z-index: 1; flex-shrink: 0; }
.wb-hero__cycle-dots span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  animation: wb-dot-pulse 12s ease-in-out infinite;
  animation-delay: var(--wb-delay, 0s);
}
@keyframes wb-dot-pulse {
  0%, 2% { background: rgba(255, 255, 255, 0.15); }
  8%, 21% { background: var(--wb-cobalt-bright); }
  27%, 100% { background: rgba(255, 255, 255, 0.15); }
}
@media (prefers-reduced-motion: reduce) {
  .wb-hero__cycle-dots span { animation: none; }
  .wb-hero__cycle-dots span:first-child { background: var(--wb-cobalt-bright); }
}

/* Single floating metric card — restraint: one accent element, not three */
.wb-hero__panel--float-1 {
  bottom: 4%;
  right: -4%;
  width: 54%;
  height: 30%;
  background: var(--wb-white);
  border: none;
  box-shadow: var(--wb-shadow-lg);
  padding: var(--wb-s-16) var(--wb-s-20);
  display: flex;
  flex-direction: column;
  justify-content: center;
  animation: wb-float 7s var(--wb-ease) infinite;
}
.wb-hero__panel--float-1__top { display: flex; align-items: center; gap: var(--wb-s-8); margin-bottom: var(--wb-s-8); }
.wb-hero__panel--float-1__top svg { width: 16px; height: 16px; color: var(--wb-cobalt); }

@keyframes wb-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .wb-hero__panel--float-1 { animation: none; }
}

.wb-hero__metric-label { font-size: 0.6875rem; color: var(--wb-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.wb-hero__metric-value { font-family: var(--wb-font-display); font-size: 1.75rem; font-weight: 800; color: var(--wb-text); margin-top: 2px; }

/* ==========================================================================
   SMART DISCOVERY — signature component
   ========================================================================== */

.wb-discovery {
  position: relative;
  margin-top: -100px;
  z-index: 10;
}

/* Tab bar deliberately sits half on the dark hero, half overlapping the
   white panel below — like real browser tabs sitting above a page. The
   active tab visually fuses into the panel (same background, no seam);
   inactive tabs recede, exactly like unfocused browser tabs do. This is
   the signature idea: it reads as "choose which tab of WebBizora you
   want," echoing the browser-chrome motif already used in the hero. */
.wb-discovery__tabbar {
  display: flex;
  gap: 3px;
  padding-inline: var(--wb-s-8);
  position: relative;
  z-index: 2;
  overflow-x: auto;
}
@media (min-width: 768px) { .wb-discovery__tabbar { padding-inline: var(--wb-s-24); } }

.wb-discovery__tab {
  padding: 0.8rem 1.35rem 0.7rem;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--wb-text-on-dark-muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--wb-border-on-dark);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  transform: translateY(5px);
  transition: transform var(--wb-fast) var(--wb-ease), background var(--wb-fast) var(--wb-ease), color var(--wb-fast) var(--wb-ease);
}
.wb-discovery__tab[aria-selected="true"] {
  background: var(--wb-white);
  color: var(--wb-text);
  border-color: var(--wb-border);
  transform: translateY(0);
}

.wb-discovery__panel {
  background: var(--wb-white);
  border-radius: 0 var(--wb-radius-lg) var(--wb-radius-lg) var(--wb-radius-lg);
  box-shadow: var(--wb-shadow-lg);
  padding: var(--wb-s-24);
  position: relative;
}

@media (min-width: 768px) {
  .wb-discovery__panel { padding: var(--wb-s-32); }
}

.wb-discovery__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wb-s-8) var(--wb-s-24);
  margin-top: var(--wb-s-24);
  padding-top: var(--wb-s-20, 1.25rem);
  border-top: 1px solid var(--wb-border);
}
.wb-discovery__stat {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--wb-text-muted);
}
.wb-discovery__stat strong {
  font-family: var(--wb-font-display);
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--wb-cobalt-deep);
}

.wb-discovery__form {
  display: flex;
  flex-direction: column;
  gap: var(--wb-s-16);
}
@media (min-width: 640px) {
  .wb-discovery__form { flex-direction: row; }
}

.wb-discovery__input-wrap {
  flex: 1;
  position: relative;
}
.wb-discovery__input-wrap svg {
  position: absolute;
  left: var(--wb-s-16);
  top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--wb-text-muted);
}
.wb-discovery__input {
  width: 100%;
  padding: 0.95rem var(--wb-s-16) 0.95rem 2.75rem;
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-sm);
  font-size: 1rem;
  background: var(--wb-paper);
}
.wb-discovery__input:focus {
  outline: none;
  border-color: var(--wb-cobalt);
  background: var(--wb-white);
}

.wb-discovery__results {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 8px);
  background: var(--wb-white);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-sm);
  box-shadow: var(--wb-shadow-md);
  max-height: 280px;
  overflow-y: auto;
  z-index: 20;
  display: none;
}
.wb-discovery__results.is-open { display: block; }
.wb-discovery__result {
  display: block;
  padding: var(--wb-s-12) var(--wb-s-16);
  font-size: 0.9375rem;
}
.wb-discovery__result:hover,
.wb-discovery__result.is-active { background: var(--wb-cobalt-soft); }
.wb-discovery__result-empty {
  padding: var(--wb-s-16);
  font-size: 0.875rem;
  color: var(--wb-text-muted);
}

.wb-discovery__examples {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wb-s-8);
  margin-top: var(--wb-s-24);
}
.wb-discovery__example {
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--wb-border);
  border-radius: 999px;
  font-size: 0.8125rem;
  color: var(--wb-text-muted);
  box-shadow: var(--wb-shadow-sm);
  transition: border-color var(--wb-fast) var(--wb-ease), color var(--wb-fast) var(--wb-ease), box-shadow var(--wb-fast) var(--wb-ease), transform var(--wb-fast) var(--wb-ease);
}
.wb-discovery__example:hover { border-color: var(--wb-cobalt); color: var(--wb-cobalt-deep); box-shadow: var(--wb-shadow-md); transform: translateY(-1px); }

.wb-discovery__examples-label {
  font-size: 0.75rem;
  color: var(--wb-text-muted);
  width: 100%;
  margin-bottom: 2px;
}
/* ==========================================================================
   SECTION SPACING RHYTHM
   ========================================================================== */

.wb-section { padding-block: var(--wb-s-80); }
.wb-section--tight { padding-block: var(--wb-s-48); }
@media (max-width: 640px) {
  .wb-section { padding-block: var(--wb-s-64); }
}

.wb-section__head { max-width: 640px; margin-bottom: var(--wb-s-48); }
.wb-section__head h2 { margin-top: var(--wb-s-16); }
.wb-section__head p { margin-top: var(--wb-s-16); font-size: 1.0625rem; }
.wb-section__head--center { margin-inline: auto; text-align: center; }

/* Sub-heading used inline within prose/two-col blocks on interior pages
   (service/industry/about detail sections) — replaces repeated inline
   styles so spacing and size stay identical everywhere it's used. */
.wb-subheading {
  margin-top: var(--wb-s-16);
  font-size: var(--wb-h3);
}

/* ==========================================================================
   INDUSTRY RAIL — horizontal scroll, large ghost numerals + serif names.
   Deliberately structured differently from the card grid and the
   numbered service list elsewhere on the page.
   ========================================================================== */

.wb-industry-rail-section { padding-inline: 0; }
.wb-industry-rail-section .wb-container { padding-inline: var(--wb-s-24); }
@media (min-width: 768px) { .wb-industry-rail-section .wb-container { padding-inline: var(--wb-s-32); } }

.wb-industry-rail {
  display: flex;
  gap: var(--wb-s-24);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: var(--wb-s-8) var(--wb-s-24) var(--wb-s-32);
  scrollbar-width: thin;
}
@media (min-width: 768px) { .wb-industry-rail { padding-inline: var(--wb-s-32); } }

.wb-industry-tile {
  flex: 0 0 auto;
  width: 260px;
  scroll-snap-align: start;
  position: relative;
  background: var(--wb-white);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-sharp);
  padding: var(--wb-s-32) var(--wb-s-24) var(--wb-s-24);
  overflow: hidden;
  box-shadow: var(--wb-shadow-sm);
  transition: border-color var(--wb-fast) var(--wb-ease), transform var(--wb-fast) var(--wb-ease), box-shadow var(--wb-fast) var(--wb-ease);
}
.wb-industry-tile:hover { border-color: var(--wb-cobalt); transform: translateY(-4px); box-shadow: var(--wb-shadow-lg); }

.wb-industry-tile__num {
  position: absolute;
  top: -0.15em; right: var(--wb-s-16);
  font-family: var(--wb-font-mono);
  font-weight: 700;
  font-size: 4.5rem;
  color: var(--wb-cobalt-soft, #E8E9FF);
  line-height: 1;
  pointer-events: none;
  z-index: 0;
}
.wb-industry-tile__icon {
  position: relative; z-index: 1;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--wb-radius-sm);
  background: var(--wb-cobalt-soft, #E8E9FF);
  margin-bottom: var(--wb-s-24);
}
.wb-industry-tile__icon svg { width: 22px; height: 22px; color: var(--wb-cobalt-deep); }
.wb-industry-tile__name { position: relative; z-index: 1; font-size: 1.25rem; margin-bottom: var(--wb-s-8); }
.wb-industry-tile__blurb { position: relative; z-index: 1; font-size: 0.875rem; color: var(--wb-text-muted); margin-bottom: var(--wb-s-24); min-height: 60px; }
.wb-industry-tile__link {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.8125rem; font-weight: 600; color: var(--wb-cobalt-deep);
}
.wb-industry-tile__link svg { width: 13px; height: 13px; transition: transform var(--wb-fast) var(--wb-ease); }
.wb-industry-tile:hover .wb-industry-tile__link svg { transform: translateX(3px); }



/* ==========================================================================
   TRUST STRIP
   ========================================================================== */

.wb-trust-strip {
  border-top: 1px solid var(--wb-border);
  border-bottom: 1px solid var(--wb-border);
}

.wb-trust-strip__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wb-s-24);
}
@media (min-width: 480px) {
  .wb-trust-strip__grid { grid-template-columns: repeat(2, 1fr); }
  .wb-trust-strip__item:last-child { grid-column: 1 / -1; }
}
@media (min-width: 768px) {
  .wb-trust-strip__grid { grid-template-columns: repeat(5, 1fr); }
  .wb-trust-strip__item:last-child { grid-column: auto; }
}

.wb-trust-strip__item {
  display: flex;
  align-items: center;
  gap: var(--wb-s-12);
  padding-inline-start: var(--wb-s-16);
  border-left: 1px solid transparent;
}
@media (min-width: 768px) {
  .wb-trust-strip__item:not(:first-child) { border-left: 1px solid var(--wb-border); }
}
.wb-trust-strip__item svg {
  flex-shrink: 0;
  width: 40px; height: 40px;
  padding: 9px;
  border-radius: var(--wb-radius-sm);
  background: var(--wb-cobalt-soft, #E8E9FF);
  color: var(--wb-cobalt-deep);
}
.wb-trust-strip__item span { font-size: 0.9375rem; font-weight: 600; color: var(--wb-text); }

/* ==========================================================================
   CARD GRIDS (industry / service / portfolio share a base)
   ========================================================================== */

.wb-grid { display: grid; gap: var(--wb-s-24); }
.wb-grid--3 { grid-template-columns: repeat(1, 1fr); }
.wb-grid--4 { grid-template-columns: repeat(1, 1fr); }
@media (min-width: 640px) {
  .wb-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .wb-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .wb-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .wb-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* At the 2-column tablet width, an odd total item count leaves the last
   card alone on its own row (e.g. 7 or 9 items). :last-child:nth-child(odd)
   matches exactly that case — the last item sitting at an odd position —
   regardless of how many items a given page has, so this stays correct
   even as content changes. Centers it instead of stretching it full width. */
@media (min-width: 640px) and (max-width: 1023px) {
  .wb-grid--3 > *:last-child:nth-child(odd),
  .wb-grid--4 > *:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - var(--wb-s-24) / 2);
    margin-inline: auto;
  }
}

.wb-card {
  background: var(--wb-white);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-md);
  padding: var(--wb-s-24);
  transition: border-color var(--wb-fast) var(--wb-ease), transform var(--wb-fast) var(--wb-ease), box-shadow var(--wb-fast) var(--wb-ease);
}
.wb-card:hover {
  border-color: var(--wb-cobalt);
  transform: translateY(-2px);
  box-shadow: var(--wb-shadow-md);
}

/* Static variant — for card-shaped content that isn't a link (e.g. a
   simple "included" feature tile). No lift/glow, since that affordance
   implies the whole card is clickable. */
.wb-card--static { cursor: default; }
.wb-card--static:hover {
  border-color: var(--wb-border);
  transform: none;
  box-shadow: none;
}

.wb-card__icon {
  width: 44px; height: 44px;
  border-radius: var(--wb-radius-sm);
  background: var(--wb-cobalt-soft);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--wb-s-16);
}
.wb-card__icon svg { width: 22px; height: 22px; color: var(--wb-cobalt-deep); }

.wb-card h3 { margin-bottom: var(--wb-s-8); }
.wb-card p { font-size: 0.9375rem; }
.wb-card__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--wb-s-16);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wb-cobalt-deep);
}
.wb-card__link svg { width: 14px; height: 14px; transition: transform var(--wb-fast) var(--wb-ease); }
.wb-card:hover .wb-card__link svg { transform: translateX(3px); }

.wb-section__footer { text-align: center; margin-top: var(--wb-s-48); }

/* ==========================================================================
   SERVICES — editorial list layout (deliberately distinct from the
   industry icon-grid so the two sections don't read as the same template)
   ========================================================================== */

.wb-service-list {
  border-top: 1px solid var(--wb-border);
}

.wb-service-row {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--wb-s-8) var(--wb-s-24);
  padding-block: var(--wb-s-32);
  border-bottom: 1px solid var(--wb-border);
  align-items: start;
  transition: background var(--wb-fast) var(--wb-ease);
}
/* Force title/description/link into column 2 below tablet so the
   4-item grid never auto-wraps the description into the 3rem index
   column (which caused severely squeezed text on mobile). */
.wb-service-row__title,
.wb-service-row__desc,
.wb-service-row__link {
  grid-column: 2;
}
@media (min-width: 768px) {
  .wb-service-row { grid-template-columns: 4.5rem 2fr 1.6fr auto; align-items: center; }
  .wb-service-row__title,
  .wb-service-row__desc,
  .wb-service-row__link {
    grid-column: auto;
  }
}

.wb-service-row:hover { background: var(--wb-paper); }

.wb-service-row__index {
  font-family: var(--wb-font-display);
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--wb-cobalt-deep);
  background: var(--wb-cobalt-soft, #E8E9FF);
  width: 40px; height: 40px;
  border-radius: var(--wb-radius-sm);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--wb-fast) var(--wb-ease), color var(--wb-fast) var(--wb-ease);
}
.wb-service-row:hover .wb-service-row__index { background: var(--wb-cobalt); color: var(--wb-white); }

.wb-service-row__title {
  display: flex;
  align-items: center;
  gap: var(--wb-s-12);
}
.wb-service-row__title svg {
  width: 20px; height: 20px;
  color: var(--wb-cobalt-deep);
  flex-shrink: 0;
}
.wb-service-row__title h3 { font-size: 1.125rem; }

.wb-service-row__desc { font-size: 0.9375rem; margin-top: var(--wb-s-8); }
@media (min-width: 768px) {
  .wb-service-row__desc { margin-top: 0; }
}

.wb-service-row__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--wb-s-16);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wb-cobalt-deep);
  white-space: nowrap;
}
.wb-service-row__link svg { width: 14px; height: 14px; transition: transform var(--wb-fast) var(--wb-ease); }
.wb-service-row:hover .wb-service-row__link svg { transform: translateX(3px); }
@media (min-width: 768px) {
  .wb-service-row__link { margin-top: 0; }
}

/* ==========================================================================
   SMALL BUSINESS DISCOVERY — pill cloud
   ========================================================================== */

.wb-pill-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wb-s-12);
}
.wb-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--wb-s-8);
  padding: 0.65rem 1.1rem;
  border-radius: 999px;
  background: var(--wb-white);
  border: 1px solid var(--wb-border);
  font-size: 0.9375rem;
  color: var(--wb-text);
  box-shadow: var(--wb-shadow-sm);
  transition: border-color var(--wb-fast) var(--wb-ease), background var(--wb-fast) var(--wb-ease), color var(--wb-fast) var(--wb-ease), box-shadow var(--wb-fast) var(--wb-ease), transform var(--wb-fast) var(--wb-ease);
}
.wb-pill::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--wb-cobalt);
  flex-shrink: 0;
  opacity: 0.45;
  transition: opacity var(--wb-fast) var(--wb-ease);
}
.wb-pill:hover { border-color: var(--wb-cobalt); background: var(--wb-cobalt-soft); color: var(--wb-cobalt-deep); box-shadow: var(--wb-shadow-md); transform: translateY(-2px); }
.wb-pill:hover::before { opacity: 1; }

/* Static badge — same shape as the clickable pill, but for informational
   labels that aren't links. No hover feedback, since a hover state on a
   non-interactive element falsely signals it can be clicked. */
.wb-pill--static {
  background: var(--wb-paper);
  color: var(--wb-text-muted);
  cursor: default;
}
.wb-pill--static:hover { border-color: var(--wb-border); background: var(--wb-paper); color: var(--wb-text-muted); }

/* Two-row auto-scrolling marquee — replaces a large flex-wrapped pill
   cloud (29+ items) that produced a ragged, sparse-looking final row
   and read as one flat, monotonous wall of tags. Rows scroll in
   opposite directions at slightly different speeds so they don't
   visually sync, edges fade via mask-image instead of cutting off
   abruptly, and each row's content is duplicated once so the loop is
   seamless. Pauses on hover/focus so a visitor can actually read or
   click a pill, and disables entirely for reduced-motion preference. */
.wb-marquee {
  display: flex;
  flex-direction: column;
  gap: var(--wb-s-16);
  margin-top: var(--wb-s-32);
  mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
}
.wb-marquee__row { overflow: hidden; width: 100%; }
.wb-marquee__track {
  display: flex;
  gap: var(--wb-s-12);
  width: max-content;
  animation: wb-marquee-scroll 50s linear infinite;
}
.wb-marquee__row--reverse .wb-marquee__track { animation-direction: reverse; animation-duration: 58s; }
.wb-marquee:hover .wb-marquee__track,
.wb-marquee:focus-within .wb-marquee__track { animation-play-state: paused; }

@keyframes wb-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .wb-marquee__track { animation: none; }
  .wb-marquee__row { overflow-x: auto; }
}

/* ==========================================================================
   WHY WEBBIZORA — dark authority section
   ========================================================================== */

.wb-why__grid {
  display: grid;
  gap: var(--wb-s-48);
}
@media (min-width: 1024px) {
  .wb-why__grid { grid-template-columns: 1fr 1fr; align-items: center; }
}

/* Flowing statement — replaces a benefit card grid with a single large
   editorial paragraph, inline emphasis carrying the "six benefits"
   instead of six identical boxes. */
.wb-why__statement {
  margin-top: var(--wb-s-24);
  font-family: var(--wb-font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.625rem);
  line-height: 1.45;
  color: var(--wb-text-on-dark);
  font-weight: 400;
}
.wb-why__statement em {
  font-style: normal;
  color: var(--wb-cobalt-accent);
  font-weight: 600;
}
.wb-why__statement--muted {
  margin-top: var(--wb-s-24);
  font-size: 1rem;
  font-family: var(--wb-font-body);
  color: var(--wb-text-on-dark-muted);
  line-height: 1.6;
}
.wb-why__statement--muted em { font-style: normal; color: var(--wb-text-on-dark); font-weight: 600; }

/* .wb-why__visual* removed (v155): the five percentage bars it styled
   were percentages of nothing. Replaced by .wb-spec. Do not restore. */

/* ==========================================================================
   PORTFOLIO — asymmetric bento grid (one large tile + five regular),
   not a uniform 3-column grid. See design brief v2, section 5.
   ========================================================================== */

.wb-portfolio-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wb-s-24);
}
@media (min-width: 640px) {
  .wb-portfolio-bento { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .wb-portfolio-bento { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; }
  .wb-portfolio-bento__item--large { grid-column: span 2; grid-row: span 2; }
  .wb-portfolio-bento__item--large .wb-portfolio-card { height: 100%; display: flex; flex-direction: column; }
  .wb-portfolio-bento__item--large .wb-portfolio-card__preview { aspect-ratio: auto; flex: 1; }
}

.wb-portfolio-card { overflow: hidden; padding: 0; }
.wb-portfolio-card__preview {
  aspect-ratio: 4 / 3;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--wb-s-24);
}
.wb-portfolio-card__frame {
  width: 100%; height: 100%;
  background: var(--wb-white);
  border-radius: var(--wb-radius-sm);
  border: 1px solid var(--wb-border);
  box-shadow: var(--wb-shadow-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.wb-portfolio-card__frame-top { height: 22%; flex-shrink: 0; }
.wb-portfolio-card__frame-body { flex: 1; padding: var(--wb-s-12); display: flex; flex-direction: column; gap: 6px; }
.wb-portfolio-card__frame-body span { display: block; height: 6px; border-radius: 3px; background: var(--wb-border); }
.wb-portfolio-card__frame-body span:first-child { width: 55%; height: 9px; margin-bottom: 2px; }
.wb-portfolio-card__frame-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 4px; flex: 1; }
.wb-portfolio-card__frame-cols span { height: 100%; border-radius: 4px; }

.wb-portfolio-card__tag {
  position: absolute;
  top: var(--wb-s-16);
  left: var(--wb-s-16);
  background: var(--wb-deep-dark);
  color: var(--wb-white);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  z-index: 1;
}
.wb-portfolio-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--wb-radius-sm);
  border: 1px solid var(--wb-border);
  box-shadow: var(--wb-shadow-md);
}
.wb-portfolio-card__body { padding: var(--wb-s-20, 1.25rem) var(--wb-s-24); }
.wb-portfolio-card__meta { font-size: 0.8125rem; color: var(--wb-text-muted); margin-top: 4px; }

/* ==========================================================================
   PROCESS TIMELINE
   ========================================================================== */

.wb-process__list {
  display: grid;
  gap: var(--wb-s-24);
}
@media (min-width: 1024px) {
  .wb-process__list {
    grid-template-columns: repeat(6, 1fr);
    gap: var(--wb-s-16);
    position: relative;
  }
  .wb-process__list::before {
    content: '';
    position: absolute;
    top: 22px;
    left: 0; right: 0;
    height: 1px;
    background: var(--wb-border);
  }
}

.wb-process__step { position: relative; }
.wb-process__number {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--wb-white);
  border: 2px solid var(--wb-cobalt);
  color: var(--wb-cobalt-deep);
  font-family: var(--wb-font-display);
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--wb-s-16);
  position: relative;
  z-index: 1;
}
.wb-process__step h3 { font-size: 1.0625rem; margin-bottom: 4px; }
.wb-process__step p { font-size: 0.875rem; }

/* ==========================================================================
   PRICING
   ========================================================================== */

.wb-pricing-grid {
  display: grid;
  gap: var(--wb-s-24);
}
@media (min-width: 640px) {
  .wb-pricing-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .wb-pricing-grid { grid-template-columns: repeat(4, 1fr); }
}

.wb-pricing-card {
  background: var(--wb-white);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-md);
  padding: var(--wb-s-24);
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: var(--wb-shadow-sm);
  transition: box-shadow var(--wb-fast) var(--wb-ease), transform var(--wb-fast) var(--wb-ease), border-color var(--wb-fast) var(--wb-ease);
}
.wb-pricing-card:not(.wb-pricing-card--featured):hover {
  border-color: var(--wb-cobalt);
  box-shadow: var(--wb-shadow-md);
  transform: translateY(-4px);
}
.wb-pricing-card--featured {
  background: var(--wb-primary-dark);
  border-color: var(--wb-primary-dark);
  border-radius: var(--wb-radius-lg);
  box-shadow: var(--wb-shadow-lg);
  transform: translateY(-8px);
  padding: var(--wb-s-32) var(--wb-s-24);
}
.wb-pricing-card--featured .wb-pricing-card__name,
.wb-pricing-card--featured .wb-pricing-card__price,
.wb-pricing-card--featured .wb-pricing-card__summary,
.wb-pricing-card--featured .wb-pricing-card__features li { color: var(--wb-text-on-dark); }
.wb-pricing-card--featured .wb-pricing-card__price span,
.wb-pricing-card--featured .wb-pricing-card__summary { color: var(--wb-text-on-dark-muted); }
.wb-pricing-card--featured .wb-pricing-card__features svg { color: var(--wb-cobalt-bright); }
.wb-pricing-card__badge {
  position: absolute;
  top: -13px; left: var(--wb-s-24);
  background: var(--wb-cobalt);
  color: var(--wb-white);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: var(--wb-shadow-sm);
}
.wb-pricing-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wb-s-8);
}
.wb-pricing-card__name { font-size: 1rem; font-weight: 600; color: var(--wb-text-muted); }
.wb-pricing-card__savings {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--wb-cobalt-deep);
  background: var(--wb-cobalt-soft, #E8E9FF);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.wb-pricing-card--featured .wb-pricing-card__savings { color: var(--wb-white); background: rgba(255, 255, 255, 0.15); }
.wb-pricing-card__market {
  font-size: 0.8125rem;
  color: var(--wb-text-muted);
  text-decoration: line-through;
  margin-top: var(--wb-s-8);
}
.wb-pricing-card__market span { font-weight: 600; }
.wb-pricing-card--featured .wb-pricing-card__market { color: var(--wb-text-on-dark-muted); }
.wb-pricing-card__price {
  font-family: var(--wb-font-display);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--wb-text);
  margin-top: var(--wb-s-8);
}
.wb-pricing-card__price span { font-size: 0.9375rem; font-weight: 500; color: var(--wb-text-muted); }
.wb-pricing-card__summary { font-size: 0.875rem; margin-top: var(--wb-s-8); min-height: 40px; }
.wb-pricing-card__features { margin-top: var(--wb-s-24); display: flex; flex-direction: column; gap: var(--wb-s-12); flex-grow: 1; }
.wb-pricing-card__features li { display: flex; align-items: flex-start; gap: var(--wb-s-8); font-size: 0.875rem; color: var(--wb-text); }
.wb-pricing-card__features svg { width: 16px; height: 16px; color: var(--wb-cobalt); flex-shrink: 0; margin-top: 2px; }
.wb-pricing-card .wb-btn { margin-top: var(--wb-s-24); }

/* ==========================================================================
   GLOBAL COVERAGE
   ========================================================================== */

.wb-global__grid {
  display: grid;
  gap: var(--wb-s-48);
}
@media (min-width: 1024px) {
  .wb-global__grid { grid-template-columns: 1fr 1fr; align-items: center; }
}
.wb-global__countries {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--wb-s-12);
  margin-top: var(--wb-s-24);
}
@media (min-width: 480px) {
  .wb-global__countries { grid-template-columns: repeat(4, 1fr); }
}
.wb-global__country {
  display: flex;
  align-items: center;
  gap: var(--wb-s-8);
  padding: var(--wb-s-12) var(--wb-s-16);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-sm);
  background: var(--wb-white);
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: var(--wb-shadow-sm);
  transition: border-color var(--wb-fast) var(--wb-ease), background var(--wb-fast) var(--wb-ease), box-shadow var(--wb-fast) var(--wb-ease), transform var(--wb-fast) var(--wb-ease);
}
.wb-global__country::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--wb-cobalt);
  flex-shrink: 0;
  opacity: 0.45;
  transition: opacity var(--wb-fast) var(--wb-ease);
}
.wb-global__country:hover { border-color: var(--wb-cobalt); background: var(--wb-cobalt-soft); box-shadow: var(--wb-shadow-md); transform: translateY(-2px); }
.wb-global__country:hover::before { opacity: 1; }

.wb-global__map {
  max-width: 400px;
  margin-inline: auto;
}
.wb-global__map svg { width: 100%; height: auto; }
.wb-global__pin {
  animation: wb-pulse 2.6s var(--wb-ease) infinite;
  transform-origin: center;
}
.wb-global__pin:nth-child(2) { animation-delay: 0.5s; }
.wb-global__pin:nth-child(3) { animation-delay: 1s; }
.wb-global__pin:nth-child(4) { animation-delay: 1.5s; }
@keyframes wb-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .wb-global__pin { animation: none; }
}

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */

/* Modern card-style FAQ — replaces the old flat border-bottom list with
   spaced, rounded cards that get a subtle border/shadow lift on hover
   and open state, matching the rest of the site's card language instead
   of reading as a plain, dated accordion. */
.wb-faq { max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--wb-s-12); }
.wb-faq__item {
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-md);
  background: var(--wb-white);
  transition: border-color var(--wb-fast) var(--wb-ease), box-shadow var(--wb-fast) var(--wb-ease);
}
.wb-faq__item:hover { border-color: var(--wb-cobalt-soft, #E8E9FF); }
.wb-faq__item.is-open { border-color: var(--wb-cobalt); box-shadow: var(--wb-shadow-sm); }
.wb-faq__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wb-s-16);
  padding: var(--wb-s-20, 1.25rem) var(--wb-s-24);
  text-align: left;
  font-family: var(--wb-font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--wb-text);
}
.wb-faq__trigger svg {
  flex-shrink: 0;
  width: 18px; height: 18px;
  color: var(--wb-cobalt);
  transition: transform var(--wb-fast) var(--wb-ease), color var(--wb-fast) var(--wb-ease);
}
.wb-faq__item.is-open .wb-faq__trigger svg { transform: rotate(45deg); }
.wb-faq__panel { max-height: 0; overflow: hidden; transition: max-height var(--wb-base) var(--wb-ease); }
.wb-faq__item.is-open .wb-faq__panel { max-height: 300px; }
.wb-faq__panel p { padding: 0 var(--wb-s-24) var(--wb-s-20, 1.25rem); font-size: 0.9375rem; color: var(--wb-text-muted); line-height: 1.65; max-width: 62ch; }

/* ==========================================================================
   CTA BAND
   ========================================================================== */

/* CTA band — previously a flat solid-cobalt box with THREE separate
   contrast bugs: the eyebrow used --on-light (deep-blue text on a
   cobalt background — blue-on-blue, nearly invisible), the h2 used
   near-black text on cobalt (muddy), and the paragraph used deep-blue
   on cobalt (the specific "very faint" text reported). Rebuilt on the
   dark-ink + glow-orb treatment already established for the hero and
   mega-menu panels, so it reads as a deliberate, premium moment
   consistent with the rest of the site rather than a flat colored box. */
.wb-cta-band {
  position: relative;
  overflow: hidden;
  background: var(--wb-deep-dark);
  border-radius: var(--wb-radius-lg);
  padding: var(--wb-s-48) var(--wb-s-24);
  text-align: center;
}
@media (min-width: 768px) { .wb-cta-band { padding: var(--wb-s-64); } }
.wb-cta-band::before {
  content: '';
  position: absolute;
  top: -30%; left: 50%;
  transform: translateX(-50%);
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(42, 62, 255, 0.35) 0%, rgba(42, 62, 255, 0) 70%);
  pointer-events: none;
}
.wb-cta-band > * { position: relative; z-index: 1; }
.wb-cta-band h2 { color: var(--wb-white); }
.wb-cta-band p { color: var(--wb-text-on-dark-muted); margin-top: var(--wb-s-12); max-width: 46ch; margin-inline: auto; }
.wb-cta-band__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--wb-s-16); margin-top: var(--wb-s-32); }
.wb-cta-band .wb-btn--primary { background: var(--wb-cobalt); color: var(--wb-white); }
.wb-cta-band .wb-btn--primary:hover { background: var(--wb-cobalt-bright); }
.wb-cta-band .wb-btn--ghost-dark { border-color: var(--wb-border-on-dark); color: var(--wb-white); }
.wb-cta-band .wb-btn--ghost-dark:hover { color: var(--wb-cobalt-deep); border-color: var(--wb-white); background: var(--wb-white); }

/* ==========================================================================
   COMPARISON TABLE (WebBizora vs Traditional Agencies)
   ========================================================================== */

.wb-compare {
  border-radius: var(--wb-radius-lg);
  overflow: hidden;
  box-shadow: var(--wb-shadow-lg);
  border: 1px solid var(--wb-border);
}
.wb-compare__head {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  background: var(--wb-deep-dark);
}
.wb-compare__head-cell {
  padding: var(--wb-s-20, 1.25rem) var(--wb-s-16);
  font-family: var(--wb-font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--wb-white);
}
@media (min-width: 640px) { .wb-compare__head-cell { padding: var(--wb-s-24); font-size: 1rem; } }
.wb-compare__head-cell--us {
  color: var(--wb-cobalt-accent, #8E98FF);
  display: flex;
  align-items: center;
  gap: 6px;
}
.wb-compare__head-cell--us svg { width: 16px; height: 16px; }

.wb-compare__row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  border-top: 1px solid var(--wb-border);
}
.wb-compare__row:nth-child(even) { background: var(--wb-paper); }
.wb-compare__row:nth-child(odd) { background: var(--wb-white); }

.wb-compare__cell {
  padding: var(--wb-s-16);
  font-size: 0.8438rem;
  display: flex;
  align-items: center;
}
@media (min-width: 640px) { .wb-compare__cell { padding: var(--wb-s-20, 1.25rem) var(--wb-s-24); font-size: 0.9375rem; } }

.wb-compare__cell--feature { font-weight: 600; color: var(--wb-text); }

.wb-compare__cell--us {
  color: var(--wb-cobalt-deep);
  font-weight: 600;
  gap: var(--wb-s-8);
}
.wb-compare__cell--us svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--wb-cobalt); }

.wb-compare__cell--them {
  color: var(--wb-text-muted);
  gap: var(--wb-s-8);
}
.wb-compare__cell--them svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.5; }

/* Feature label barely fits at mobile widths alongside two more columns —
   drop the icons and shrink text further under 480px rather than letting
   the grid overflow or wrap awkwardly. */
@media (max-width: 479px) {
  .wb-compare__cell { font-size: 0.75rem; padding: var(--wb-s-12); }
  .wb-compare__cell--us svg, .wb-compare__cell--them svg { display: none; }
}

/* ==========================================================================
   BLOG
   ========================================================================== */

.wb-blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wb-s-24);
}
@media (min-width: 768px) { .wb-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .wb-blog-grid { grid-template-columns: repeat(3, 1fr); } }
/* Inside the hub's sidebar layout, the main content column is narrower
   than a full-width section — 3 columns there made cards uncomfortably
   tight, so it stays at 2 even on wide screens. The featured card's
   span (below) matches this narrower context. */
@media (min-width: 1024px) {
  .wb-blog-layout__main .wb-blog-grid { grid-template-columns: repeat(2, 1fr); }
}

.wb-blog-card {
  display: flex;
  flex-direction: column;
  background: var(--wb-white);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-md);
  padding: var(--wb-s-24);
  box-shadow: var(--wb-shadow-sm);
  transition: border-color var(--wb-fast) var(--wb-ease), transform var(--wb-fast) var(--wb-ease), box-shadow var(--wb-fast) var(--wb-ease);
}
.wb-blog-card:hover { border-color: var(--wb-cobalt); transform: translateY(-4px); box-shadow: var(--wb-shadow-lg); }

/* The first post in the hub grid spans all columns on desktop, so a
   fresh blog isn't just a flat, undifferentiated 3x1 grid — one clear
   entry point stands out, the rest read as a list. */
@media (min-width: 1024px) {
  .wb-blog-card--featured { grid-column: span 3; flex-direction: row; align-items: center; gap: var(--wb-s-32); padding: var(--wb-s-32); }
  .wb-blog-card--featured .wb-blog-card__title { font-size: 1.5rem; }
  .wb-blog-card--featured .wb-blog-card__excerpt { font-size: 1rem; }
  /* Inside the narrower sidebar-layout main column, span 2 (not 3) to
     match that context's 2-column grid. */
  .wb-blog-layout__main .wb-blog-card--featured { grid-column: span 2; }
}

/* Card image — optional; cards render fine without one (existing
   .wb-blog-card__body padding still applies), so adding images later
   doesn't require touching any card that doesn't have one yet. */
.wb-blog-card__image-wrap {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  margin: calc(var(--wb-s-24) * -1) calc(var(--wb-s-24) * -1) var(--wb-s-20, 1.25rem);
  border-radius: var(--wb-radius-md) var(--wb-radius-md) 0 0;
}
.wb-blog-card--featured .wb-blog-card__image-wrap {
  margin: 0;
  border-radius: var(--wb-radius-md);
  flex: 0 0 42%;
  aspect-ratio: 4 / 3;
}
.wb-blog-card__image { width: 100%; height: 100%; object-fit: cover; display: block; }
.wb-blog-card__body { display: flex; flex-direction: column; flex-grow: 1; }

/* Single-post hero image — sits between the dark page-hero and the
   intro paragraph, matching the reference layout. Optional: posts
   without an 'image' set simply skip straight to the intro. */
.wb-blog-post__hero-image {
  max-width: 900px;
  margin: calc(var(--wb-s-32) * -1) auto var(--wb-s-48);
  padding-inline: var(--wb-s-16);
  position: relative;
  z-index: 2;
}
.wb-blog-post__hero-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--wb-radius-lg);
  box-shadow: var(--wb-shadow-lg);
  display: block;
}

.wb-blog-card__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wb-s-12); margin-bottom: var(--wb-s-16); }
.wb-blog-card__category {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wb-cobalt-deep);
  background: var(--wb-cobalt-soft, #E8E9FF);
  padding: 4px 10px;
  border-radius: 999px;
}
.wb-blog-card__meta { font-size: 0.75rem; color: var(--wb-text-muted); }
.wb-blog-card__title { font-size: 1.1875rem; line-height: 1.3; margin-bottom: var(--wb-s-8); }
.wb-blog-card__excerpt { font-size: 0.9375rem; color: var(--wb-text-muted); flex-grow: 1; }
.wb-blog-card__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--wb-s-16);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wb-cobalt-deep);
}
.wb-blog-card__link svg { width: 13px; height: 13px; transition: transform var(--wb-fast) var(--wb-ease); }
.wb-blog-card:hover .wb-blog-card__link svg { transform: translateX(3px); }

.wb-blog-post__meta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--wb-s-8);
  font-size: 0.8438rem;
  color: var(--wb-text-muted);
  margin-bottom: var(--wb-s-24);
}

/* Topic filter pills — client-side filtering, real categories only. */
.wb-blog-filters { display: flex; flex-wrap: wrap; gap: var(--wb-s-8); }
.wb-blog-filter {
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--wb-border);
  background: var(--wb-white);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wb-text-muted);
  box-shadow: var(--wb-shadow-sm);
  transition: border-color var(--wb-fast) var(--wb-ease), background var(--wb-fast) var(--wb-ease), color var(--wb-fast) var(--wb-ease);
}
.wb-blog-filter:hover { border-color: var(--wb-cobalt); color: var(--wb-cobalt-deep); }
.wb-blog-filter.is-active { background: var(--wb-cobalt); border-color: var(--wb-cobalt); color: var(--wb-white); }

/* Hub layout — main grid + a sidebar, rather than a single flat column
   of cards, giving the topic breakdown and CTA somewhere to live
   without competing with the article grid itself. */
.wb-blog-layout { display: grid; gap: var(--wb-s-32); align-items: start; }
@media (min-width: 1024px) {
  .wb-blog-layout { grid-template-columns: 1fr 300px; }
}
.wb-blog-layout__sidebar { display: flex; flex-direction: column; gap: var(--wb-s-24); }
@media (min-width: 1024px) {
  .wb-blog-layout__sidebar { position: sticky; top: var(--wb-s-32); }
}

.wb-blog-sidebar-card {
  background: var(--wb-white);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-md);
  padding: var(--wb-s-24);
  box-shadow: var(--wb-shadow-sm);
}
.wb-blog-sidebar-card--dark { background: var(--wb-deep-dark); border-color: var(--wb-deep-dark); }
.wb-blog-sidebar-card__heading { font-family: var(--wb-font-display); font-weight: 700; font-size: 1rem; margin-bottom: var(--wb-s-16); }
.wb-blog-sidebar-card--dark .wb-blog-sidebar-card__heading { color: var(--wb-white); }
.wb-blog-sidebar-card__text { font-size: 0.875rem; color: var(--wb-text-on-dark-muted); margin-bottom: var(--wb-s-16); }

.wb-blog-topic-list { display: flex; flex-direction: column; gap: var(--wb-s-8); }
.wb-blog-topic-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--wb-s-8) 0;
  font-size: 0.9375rem;
  border-bottom: 1px solid var(--wb-border);
}
.wb-blog-topic-list__item:last-child { border-bottom: none; }
.wb-blog-topic-list__count {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--wb-cobalt-deep);
  background: var(--wb-cobalt-soft, #E8E9FF);
  padding: 2px 8px;
  border-radius: 999px;
}

/* Share buttons — real functional links, no backend needed. */
.wb-blog-share {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wb-s-12);
  margin-top: var(--wb-s-24);
}
.wb-blog-share__label { font-size: 0.8125rem; font-weight: 600; color: var(--wb-text-muted); }
.wb-blog-share a,
.wb-blog-share__copy {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--wb-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--wb-text-muted);
  transition: border-color var(--wb-fast) var(--wb-ease), background var(--wb-fast) var(--wb-ease), color var(--wb-fast) var(--wb-ease);
}
.wb-blog-share a svg, .wb-blog-share__copy svg { width: 15px; height: 15px; }
.wb-blog-share a:hover, .wb-blog-share__copy:hover { border-color: var(--wb-cobalt); background: var(--wb-cobalt); color: var(--wb-white); }
.wb-blog-share__copy.is-copied { border-color: var(--wb-cobalt); background: var(--wb-cobalt); color: var(--wb-white); }

/* Post layout — sticky table of contents + article, generated from the
   post's real section headings so it can never list a section that
   doesn't exist or miss one that does. */
.wb-blog-post-layout { display: grid; gap: var(--wb-s-48); align-items: start; }
@media (min-width: 1024px) {
  .wb-blog-post-layout { grid-template-columns: 220px 1fr; }
}
.wb-blog-toc { display: none; }
@media (min-width: 1024px) {
  .wb-blog-toc { display: block; position: sticky; top: var(--wb-s-32); }
}
.wb-blog-toc__heading { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--wb-text-muted); margin-bottom: var(--wb-s-16); }
.wb-blog-toc nav { display: flex; flex-direction: column; gap: var(--wb-s-12); border-left: 2px solid var(--wb-border); }
.wb-blog-toc nav a { padding-left: var(--wb-s-16); font-size: 0.875rem; color: var(--wb-text-muted); line-height: 1.3; }
.wb-blog-toc nav a:hover { color: var(--wb-cobalt-deep); }

/* Numbered section badges — small, muted circle next to each heading,
   echoing the article's own step-by-step structure without needing a
   full redesign of the underlying .wb-article pattern. */
.wb-article__heading-row { display: flex; align-items: center; gap: var(--wb-s-12); margin-bottom: var(--wb-s-12); }
.wb-article__num {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--wb-cobalt-soft, #E8E9FF);
  color: var(--wb-cobalt-deep);
  font-family: var(--wb-font-mono);
  font-weight: 700;
  font-size: 0.8125rem;
  display: flex; align-items: center; justify-content: center;
}
.wb-article__heading-row .wb-article__heading { margin-bottom: 0; }

/* Pull-quote — an exact excerpt of already-written content, never a
   fabricated external quote or attribution. */
.wb-blog-pullquote {
  max-width: 720px;
  margin: var(--wb-s-16) auto var(--wb-s-16) calc(var(--wb-s-24) + 2px);
  padding: var(--wb-s-8) 0 var(--wb-s-8) var(--wb-s-24);
  border-left: 3px solid var(--wb-cobalt);
  font-family: var(--wb-font-display);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--wb-text);
}

/* Key takeaways box — summarizes real content already written above,
   not new claims. */
.wb-blog-takeaways {
  max-width: 720px;
  margin-inline: auto;
  background: var(--wb-cobalt-soft, #E8E9FF);
  border-radius: var(--wb-radius-md);
  padding: var(--wb-s-24);
}
.wb-blog-takeaways__heading {
  display: flex;
  align-items: center;
  gap: var(--wb-s-8);
  font-family: var(--wb-font-display);
  font-weight: 700;
  color: var(--wb-cobalt-deep);
  margin-bottom: var(--wb-s-16);
}
.wb-blog-takeaways__heading svg { width: 18px; height: 18px; }
.wb-blog-takeaways ul { display: flex; flex-direction: column; gap: var(--wb-s-12); padding-left: var(--wb-s-24); }
.wb-blog-takeaways li { font-size: 0.9375rem; color: var(--wb-text); }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.wb-footer {
  background: var(--wb-deep-dark);
  color: var(--wb-text-on-dark-muted);
  padding-block: var(--wb-s-64) var(--wb-s-32);
}
.wb-footer__grid {
  display: grid;
  gap: var(--wb-s-32);
  padding-bottom: var(--wb-s-48);
}
/* Brand column plus four link columns. Two-up on tablet so the link
   columns do not squeeze to unreadable widths before there is room for
   all five. The Locations column is capped at 10 + an "All locations"
   link precisely so no column runs far taller than its neighbours —
   that imbalance is what the old pill-grid existed to avoid. */
@media (min-width: 640px) {
  .wb-footer__grid { grid-template-columns: repeat(2, 1fr); }
  .wb-footer__brand { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .wb-footer__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1100px) {
  .wb-footer__grid { grid-template-columns: 1.5fr repeat(4, 1fr); gap: var(--wb-s-40, 2.5rem); }
  .wb-footer__brand { grid-column: auto; }
}
.wb-footer__brand p { margin-top: var(--wb-s-16); max-width: 34ch; font-size: 0.9375rem; }
.wb-footer__email {
  display: inline-flex;
  align-items: center;
  gap: var(--wb-s-8);
  margin-top: var(--wb-s-16);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--wb-white);
}
.wb-footer__email svg { width: 16px; height: 16px; color: var(--wb-cobalt-accent, #8E98FF); }
.wb-footer__email:hover { color: var(--wb-cobalt-accent, #8E98FF); }
.wb-footer__heading { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wb-text-on-dark); margin-bottom: var(--wb-s-16); }
.wb-footer__links { display: flex; flex-direction: column; gap: var(--wb-s-10, 0.625rem); }
.wb-footer__links a { font-size: 0.9375rem; }
.wb-footer__links a:hover { color: #8B96FF; }   /* see note above — 4.11:1 vs 7.35:1 */

/* Locations now live in a normal footer column (capped at 10 + a link),
   so the full-width pill grid, its divider and the social row are gone.
   Kept out deliberately — do not reintroduce without re-checking column
   balance. */
/* #8B96FF, not --wb-cobalt-bright: that measures 4.11:1 on the footer's
   --wb-deep-dark and this is 600-weight body text. This tint is 7.35:1. */
.wb-footer__more { color: #8B96FF; font-weight: 600; }

.wb-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--wb-s-16);
  padding-top: var(--wb-s-32);
  font-size: 0.8125rem;
}
@media (min-width: 768px) {
  .wb-footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}
.wb-footer__count { color: var(--wb-text-on-dark-muted); }

/* The floating WhatsApp button and its styles were removed: the contact
   route is now the enquiry form and email. WhatsApp remains a FEATURE we
   build into client sites (see the Dubai combo and city pages) — that is
   a different thing and must not be stripped. */

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */

.wb-breadcrumbs { margin-bottom: var(--wb-s-24); }
.wb-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wb-s-8);
}
.wb-breadcrumbs li { display: flex; align-items: center; gap: var(--wb-s-8); }
.wb-breadcrumbs a {
  font-size: 0.8125rem;
  color: var(--wb-text-on-dark-muted);
}
.wb-breadcrumbs a:hover { color: var(--wb-white); }
.wb-breadcrumbs span[aria-current] {
  font-size: 0.8125rem;
  color: var(--wb-text-on-dark);
  font-weight: 600;
}
.wb-breadcrumbs svg { width: 10px; height: 10px; transform: rotate(-90deg); color: var(--wb-text-on-dark-muted); flex-shrink: 0; }

/* Light-background variant (used inside white sections, not just the dark hero) */
.wb-breadcrumbs--light a { color: var(--wb-text-muted); }
.wb-breadcrumbs--light a:hover { color: var(--wb-cobalt-deep); }
.wb-breadcrumbs--light span[aria-current] { color: var(--wb-text); }
.wb-breadcrumbs--light svg { color: var(--wb-text-muted); }

/* ==========================================================================
   INTERIOR PAGE HERO — compact dark hero for non-homepage pages
   ========================================================================== */

.wb-page-hero {
  background: var(--wb-cobalt);
  color: var(--wb-white);
  margin: var(--wb-s-16) var(--wb-s-16) 0;
  border-radius: var(--wb-radius-lg);
  padding-block: var(--wb-s-48) var(--wb-s-64);
  position: relative;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .wb-page-hero { margin: var(--wb-s-24) var(--wb-s-24) 0; }
}
@media (min-width: 768px) {
  .wb-page-hero { padding-block: var(--wb-s-64) var(--wb-s-80); }
}

.wb-page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
  mask-image: linear-gradient(to bottom, black, transparent);
  pointer-events: none;
}

.wb-page-hero::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -12%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.wb-page-hero .wb-container { position: relative; }

.wb-page-hero h1 {
  color: var(--wb-white);
  max-width: 26ch;
  font-size: clamp(1.875rem, 1.5rem + 2vw, 3rem);
}

.wb-page-hero__lead {
  margin-top: var(--wb-s-16);
  max-width: 60ch;
  font-size: 1.0625rem;
  color: var(--wb-text-on-dark-muted);
}

.wb-page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wb-s-16);
  margin-top: var(--wb-s-24);
}

/* ==========================================================================
   PROSE CONTENT (About, service/industry definitions)
   ========================================================================== */

.wb-prose { max-width: 72ch; }
.wb-prose p + p,
.wb-prose ul { margin-top: var(--wb-s-16); }
.wb-prose ul { padding-left: var(--wb-s-24); list-style: disc; }
.wb-prose li { color: var(--wb-text-muted); font-size: 0.9375rem; margin-bottom: var(--wb-s-8); }

/* Flowing content sections (industry deep-dive paragraphs, combo-page
   research sections) — properly centered and gapped, unlike a stack of
   full page <section class="wb-section"> blocks which each carry their
   own 80px top/bottom padding and compound into huge gaps when several
   sit back to back. This is the correct pattern for "several headings
   and paragraphs read as one continuous piece," used once inside a
   single normal section wrapper. */
/* Flowing content sections (industry deep-dive paragraphs, combo-page
   research sections). Aligned to the same rail language as .wb-rail:
   left-aligned rather than centred, a wider measure, and a short
   cobalt tick marking the start of each block instead of a
   full-height border, which read as a quote bar. */
.wb-article {
  max-width: 780px;
  margin-inline: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wb-s-48);
}
/* Long-form reading (a blog post body) is the one place a centred
   measure is genuinely the right call — there is no label column to
   fill, and the eye wants an even margin either side. */
.wb-article--reading {
  max-width: 720px;
  margin-inline: auto;
}
.wb-article__block {
  position: relative;
  padding-left: var(--wb-s-24);
}
.wb-article__block::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  width: 3px;
  height: 28px;
  border-radius: 2px;
  background: var(--wb-cobalt);
}
.wb-article__heading {
  font-size: var(--wb-h3);
  line-height: 1.3;
  margin-bottom: var(--wb-s-12);
}
.wb-article__block .wb-prose {
  max-width: 62ch;
  color: var(--wb-text-muted);
  font-size: 1rem;
  line-height: 1.75;
}
.wb-article__block .wb-prose a { color: var(--wb-cobalt-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   PROSE RAIL — site-wide long-form pattern
   Replaces the centred, gutter-heavy prose blocks. Asymmetric by
   design: a narrow label rail left, the text measure at roughly
   two-thirds, and the right third left open as a chosen margin
   rather than dead space around a floating centred column.
   The design brief's "never do this again" list bans centring
   everything; this is the replacement pattern.
   ============================================================ */
/* ============================================================
   SPLIT — prose with a content-derived companion panel
   The earlier .wb-rail moved text left but capped the measure
   inside a full-width column, which just relocated the dead space
   to the right of the text instead of removing it. This fills it:
   prose takes a readable measure, the panel takes the rest, and
   the panel's content is pulled out of the paragraph rather than
   invented as decoration.
   ============================================================ */
.wb-split { display: grid; gap: var(--wb-s-32); }
@media (min-width: 1000px) {
  .wb-split {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--wb-s-64);
    align-items: start;
  }
  .wb-split__panel { position: sticky; top: 104px; }
}
.wb-split__prose { max-width: 60ch; }
.wb-split__prose > p {
  font-size: var(--wb-body);
  line-height: 1.75;
  color: var(--wb-text);
}
.wb-split__prose > p + p { margin-top: var(--wb-s-20); }
.wb-split__prose h2 {
  font-size: var(--wb-h2);
  line-height: 1.15;
  margin-bottom: var(--wb-s-20);
}
.wb-split--lede .wb-split__prose > p:first-of-type {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.65;
}

/* ==========================================================================
   LEDE SECTION HEADLINE
   This section previously ran eyebrow -> paragraph with no h2 at all, the
   only large prose block on the homepage without one. A 13px uppercase
   label cannot carry a headline's weight, which is why the section read as
   undesigned text. The rule hangs to the optical left of the text column
   rather than sitting inside the box — it reads as typeset rather than
   boxed, and it is the only ornament here on purpose.
   ========================================================================== */
.wb-lede__title {
  position: relative;
  margin: var(--wb-s-12) 0 var(--wb-s-24);
  font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.021em;   /* optical correction — display sizes need it */
  text-wrap: balance;
}
.wb-lede__title::before {
  content: "";
  position: absolute;
  left: calc(var(--wb-s-24) * -1);   /* -var(...) is invalid CSS */
  top: 0.62em;
  width: 0;                          /* hidden until there is room to hang */
  height: 2px;
  background: var(--wb-cobalt);
}
@media (min-width: 1180px) {
  .wb-lede__title::before { left: -2.25rem; width: 1.5rem; }
}
/* A real step, not a nudge. The lead paragraph sets the reading size and
   the following paragraphs step down, so the eye knows where to start. */
.wb-split--lede .wb-split__prose > p.wb-lede__first {
  font-size: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
  line-height: 1.6;
  letter-spacing: -0.006em;
  color: var(--wb-deep-dark);
}
.wb-split--lede .wb-split__prose > p.wb-lede__first + p { margin-top: var(--wb-s-24); }

/* ==========================================================================
   SPEC SHEET  (replaced five fabricated percentage bars)
   Mono labels, tabular alignment, hairline rows. Reads as documentation
   rather than marketing, which is the point — every row is checkable.
   ========================================================================== */
.wb-spec { margin: 0; }
.wb-spec__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: var(--wb-s-12) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
}
.wb-spec__row:first-child { border-top: 1px solid rgba(255, 255, 255, 0.11); }
.wb-spec dt {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* NOT --wb-cobalt-bright (#4F5FFF): it measures 4.11:1 on
     --wb-deep-dark, under the 4.5 needed for text this small. This tint
     is 7.35:1. Same failure mode as bug 1 in the handoff — check any
     cobalt-on-dark pairing before shipping it. */
  color: #8B96FF;
}
.wb-spec dd {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--wb-text-on-dark);
}
@media (min-width: 560px) {
  .wb-spec__row {
    grid-template-columns: 8.5rem 1fr;
    gap: var(--wb-s-16);
    align-items: baseline;
  }
}


/* Facet panel. Deliberately not the same shape as the service and
   industry cards elsewhere on the page — one grouped list with
   hairline dividers rather than a set of separate rounded cards,
   so two content types don't share a component. */
.wb-facets {
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-sm);
  background: var(--wb-white);
  overflow: hidden;
}
.wb-facets__cap {
  display: flex;
  align-items: center;
  gap: var(--wb-s-8);
  padding: var(--wb-s-12) var(--wb-s-20);
  background: var(--wb-cream);
  border-bottom: 1px solid var(--wb-border);
  font-family: var(--wb-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wb-cobalt-deep);
}
.wb-facets__cap::before {
  content: "";
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: var(--wb-cobalt);
  flex-shrink: 0;
}
.wb-facets__item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--wb-s-16);
  padding: var(--wb-s-20);
  align-items: start;
}
.wb-facets__item + .wb-facets__item { border-top: 1px solid var(--wb-border); }
.wb-facets__icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--wb-cobalt-soft);
  color: var(--wb-cobalt-deep);
}
.wb-facets__icon svg { width: 20px; height: 20px; }
.wb-facets__term {
  font-family: var(--wb-font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--wb-text);
}
.wb-facets__desc {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--wb-text-muted);
  margin-top: 3px;
}
.wb-facets__num {
  font-family: var(--wb-font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--wb-cobalt-deep);
  white-space: nowrap;
}

.wb-rail {
  display: grid;
  gap: var(--wb-s-20);
}
@media (min-width: 900px) {
  .wb-rail {
    /* Second column capped to the article's own measure rather than 1fr,
       so the grid ends where the content ends. A 1fr column left a wide
       gap between the end of the text and the edge of the column, which
       just relocated the dead space instead of removing it. */
    grid-template-columns: minmax(150px, 200px) minmax(0, 780px);
    gap: var(--wb-s-48);
    align-items: start;
    justify-content: start;
  }
}

/* The mark and the label. A short tick marks where a thought starts;
   a full-height border reads as a pull-quote bar instead. */
.wb-rail__label {
  position: relative;
  padding-top: var(--wb-s-16);
  font-family: var(--wb-font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--wb-cobalt-deep);
}
.wb-rail__label::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 3px;
  border-radius: 2px;
  background: var(--wb-cobalt);
}
@media (min-width: 900px) {
  /* Stays with the text it labels on a long block. */
  .wb-rail__label { position: sticky; top: 112px; }
}
[data-theme="dark"] .wb-rail__label { color: var(--wb-cobalt-accent); }
[data-theme="dark"] .wb-rail__label::before { background: var(--wb-cobalt-accent); }

.wb-rail__body { max-width: 62ch; }
.wb-rail__body > p {
  font-size: var(--wb-body);
  line-height: 1.75;
  color: var(--wb-text);
}
.wb-rail__body > p + p { margin-top: var(--wb-s-20); }
[data-theme="dark"] .wb-rail__body > p { color: var(--wb-text-on-dark-muted); }

/* One intentional scale break: the opening paragraph of a lede block
   runs larger than the ones after it. */
.wb-rail--lede .wb-rail__body > p:first-child {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.65;
}

/* ---- Links in prose ----------------------------------------
   Previously only styled inside .wb-article__block, which meant
   every in-content link on the homepage rendered in body colour
   and was effectively invisible. Distinguished by a rule as well
   as colour, so it does not rely on colour alone. Hover moves two
   properties together, eased, per the motion rule in the brief.
   ------------------------------------------------------------ */
.wb-prose a,
.wb-rail__body a {
  color: var(--wb-cobalt-deep);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--wb-cobalt-soft);
  transition: color var(--wb-fast) var(--wb-ease),
              border-color var(--wb-fast) var(--wb-ease);
}
.wb-prose a:hover,
.wb-rail__body a:hover {
  color: var(--wb-cobalt);
  border-bottom-color: var(--wb-cobalt);
}
.wb-prose a:focus-visible,
.wb-rail__body a:focus-visible {
  outline: 2px solid var(--wb-cobalt);
  outline-offset: 3px;
  border-radius: 2px;
}
[data-theme="dark"] .wb-prose a,
[data-theme="dark"] .wb-rail__body a {
  color: var(--wb-cobalt-accent);
  border-bottom-color: var(--wb-border-on-dark);
}
[data-theme="dark"] .wb-prose a:hover,
[data-theme="dark"] .wb-rail__body a:hover {
  color: var(--wb-text-on-dark);
  border-bottom-color: var(--wb-cobalt-accent);
}

/* Blog post opening paragraph — carries the same cobalt tick as the
   rail so the two patterns read as one system. */
.wb-blog-lede {
  position: relative;
  max-width: 62ch;
  padding-top: var(--wb-s-20);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.65;
  color: var(--wb-text);
}
.wb-blog-lede::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 3px;
  border-radius: 2px;
  background: var(--wb-cobalt);
}

.wb-two-col {
  display: grid;
  gap: var(--wb-s-32);
}
@media (min-width: 768px) {
  .wb-two-col { grid-template-columns: 1fr 1fr; gap: var(--wb-s-48); }
}

.wb-check-list { display: flex; flex-direction: column; gap: var(--wb-s-12); }
.wb-check-list li { display: flex; align-items: flex-start; gap: var(--wb-s-12); font-size: 0.9375rem; color: var(--wb-text); }
.wb-check-list svg { width: 18px; height: 18px; color: var(--wb-cobalt); flex-shrink: 0; margin-top: 2px; }
.wb-check-list--muted svg { color: var(--wb-text-muted); }
.wb-check-list--muted li { color: var(--wb-text-muted); }

.wb-numbered-list { display: flex; flex-direction: column; gap: var(--wb-s-16); counter-reset: wb-count; }
.wb-numbered-list li {
  display: flex;
  gap: var(--wb-s-16);
  font-size: 0.9375rem;
  color: var(--wb-text);
  padding-bottom: var(--wb-s-16);
  border-bottom: 1px solid var(--wb-border);
}
.wb-numbered-list li:last-child { border-bottom: none; }
.wb-numbered-list li::before {
  counter-increment: wb-count;
  content: counter(wb-count);
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--wb-cobalt-soft);
  color: var(--wb-cobalt-deep);
  font-weight: 700;
  font-size: 0.75rem;
  display: flex; align-items: center; justify-content: center;
}

/* ==========================================================================
   RELATED LINKS ROW
   ========================================================================== */

/* Modern link chips — used for "Locations We Serve" and "Related
   Industries" sections. Adds a subtle icon, soft elevation, and a real
   hover lift instead of the old flat bordered-box look. */
.wb-related__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wb-s-12);
}
.wb-related__list a {
  display: inline-flex;
  align-items: center;
  gap: var(--wb-s-8);
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--wb-border);
  border-radius: 999px;
  background: var(--wb-white);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wb-text);
  box-shadow: var(--wb-shadow-sm);
  transition: border-color var(--wb-fast) var(--wb-ease), background var(--wb-fast) var(--wb-ease), color var(--wb-fast) var(--wb-ease), box-shadow var(--wb-fast) var(--wb-ease), transform var(--wb-fast) var(--wb-ease);
}
.wb-related__list a::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--wb-cobalt);
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity var(--wb-fast) var(--wb-ease);
}
.wb-related__list a:hover {
  border-color: var(--wb-cobalt);
  background: var(--wb-cobalt-soft, #E8E9FF);
  color: var(--wb-cobalt-deep);
  box-shadow: var(--wb-shadow-md);
  transform: translateY(-2px);
}
.wb-related__list a:hover::before { opacity: 1; }

/* ==========================================================================
   REGIONS / CITIES LIST (country + location hub pages)
   ========================================================================== */

.wb-place-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wb-s-12);
}
@media (min-width: 640px) {
  .wb-place-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .wb-place-list { grid-template-columns: repeat(3, 1fr); }
}
.wb-place-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--wb-s-16);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-sm);
  font-size: 0.9375rem;
  font-weight: 500;
}
.wb-place-list a svg { width: 16px; height: 16px; color: var(--wb-text-muted); transition: transform var(--wb-fast) var(--wb-ease); }
.wb-place-list a:hover { border-color: var(--wb-cobalt); background: var(--wb-paper); }
.wb-place-list a:hover svg { transform: translateX(3px); color: var(--wb-cobalt-deep); }

/* Cities without a page yet: same cell shape as the linked ones, but
   visibly not interactive — no arrow, muted text, no hover. Prevents
   the list reading as a set of links where most of them are dead. */
.wb-place-list__static {
  display: flex;
  align-items: center;
  padding: var(--wb-s-16);
  border: 1px dashed var(--wb-border);
  border-radius: var(--wb-radius-sm);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--wb-text-muted);
  cursor: default;
}

/* Same orphan-guard as wb-grid, extended to the 3-column desktop
   breakpoint since this list's item count grows as location data expands. */
@media (min-width: 640px) and (max-width: 1023px) {
  .wb-place-list > *:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - var(--wb-s-12) / 2);
    margin-inline: auto;
  }
}
@media (min-width: 1024px) {
  /* A single item left alone in the final row (total count ≡ 1 mod 3)
     gets centered into the middle column instead of hugging the left edge. */
  .wb-place-list > *:last-child:nth-child(3n+1) {
    grid-column: 2 / span 1;
  }
}

/* ==========================================================================
   COMPARISON TABLE (Pricing page)
   ========================================================================== */

.wb-compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wb-compare {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.wb-compare th, .wb-compare td {
  padding: var(--wb-s-16);
  text-align: left;
  border-bottom: 1px solid var(--wb-border);
}
.wb-compare thead th {
  font-family: var(--wb-font-display);
  font-weight: 700;
  color: var(--wb-text);
  background: var(--wb-paper);
}
.wb-compare tbody th {
  font-weight: 500;
  color: var(--wb-text-muted);
  white-space: nowrap;
}
.wb-compare td { text-align: center; color: var(--wb-text); }
.wb-compare td:first-child, .wb-compare th:first-child { text-align: left; }
.wb-compare svg.wb-yes { width: 18px; height: 18px; color: var(--wb-cobalt); }
.wb-compare .wb-no { color: var(--wb-border); }
.wb-compare thead th.is-featured { color: var(--wb-cobalt-deep); }

/* ==========================================================================
   TOGGLE (Pricing page — local businesses / agencies)
   ========================================================================== */

.wb-toggle {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
  background: var(--wb-paper);
  border-radius: var(--wb-radius-sm);
  padding: 4px;
  gap: 4px;
}
.wb-toggle button {
  width: 100%;
  white-space: nowrap;
}
@media (min-width: 460px) {
  .wb-toggle {
    display: inline-flex;
    flex-direction: row;
    width: auto;
    max-width: none;
    border-radius: 999px;
  }
  .wb-toggle button { width: auto; }
}
.wb-toggle button {
  padding: 0.6rem 1.2rem;
  border-radius: var(--wb-radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wb-text-muted);
}
@media (min-width: 460px) {
  .wb-toggle button { border-radius: 999px; }
}
.wb-toggle button[aria-pressed="true"] {
  background: var(--wb-primary-dark);
  color: var(--wb-white);
}

/* ==========================================================================
   FORM (Contact page)
   ========================================================================== */

.wb-form { display: grid; gap: var(--wb-s-20, 1.25rem); }
.wb-form__row { display: grid; gap: var(--wb-s-20, 1.25rem); grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .wb-form__row--2 { grid-template-columns: 1fr 1fr; }
}
.wb-field { display: flex; flex-direction: column; gap: var(--wb-s-8); }
.wb-field label { font-size: 0.875rem; font-weight: 600; color: var(--wb-text); }
.wb-field input,
.wb-field select,
.wb-field textarea {
  width: 100%;
  padding: 0.85rem var(--wb-s-16);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-sm);
  font-size: 0.9375rem;
  background: var(--wb-white);
  min-height: 48px;
}
.wb-field textarea { min-height: 140px; resize: vertical; }
.wb-field input:focus, .wb-field select:focus, .wb-field textarea:focus {
  outline: none;
  border-color: var(--wb-cobalt);
  box-shadow: 0 0 0 3px rgba(42, 62, 255, 0.15);
}
.wb-field--optional label span { color: var(--wb-text-muted); font-weight: 400; }

/* Honeypot — visually and semantically hidden, never shown to real users */
.wb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.wb-form__note { font-size: 0.8125rem; color: var(--wb-text-muted); }
.wb-form__status {
  display: none;
  padding: var(--wb-s-16);
  border-radius: var(--wb-radius-sm);
  font-size: 0.9375rem;
}
.wb-form__status.is-success { display: block; background: var(--wb-cobalt-soft); color: var(--wb-cobalt-deep); }
.wb-form__status.is-error { display: block; background: #FDEDEC; color: #8A2A22; }

/* ==========================================================================
   404
   ========================================================================== */

.wb-404 {
  padding-block: var(--wb-s-96) var(--wb-s-64);
  text-align: center;
}
.wb-404__code {
  font-family: var(--wb-font-display);
  font-size: clamp(3rem, 2.5rem + 3vw, 6rem);
  font-weight: 800;
  color: var(--wb-cobalt);
  line-height: 1;
}
.wb-404 h1 { margin-top: var(--wb-s-16); }
.wb-404 p { margin-top: var(--wb-s-16); max-width: 52ch; margin-inline: auto; }
.wb-404__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--wb-s-12);
  margin-top: var(--wb-s-32);
}


/* ==========================================================================
   PACKAGE DETAIL PAGES  (/pricing/{slug}/)
   Order on the page is deliberate: price first, then scannable
   included/excluded, then the comparison, then prose. The brief was not to
   front-load reading — so nothing above the number, and nothing that has to
   be read before the page is useful.
   ========================================================================== */
.wb-pkg-hero { background: var(--wb-deep-dark); color: var(--wb-text-on-dark); padding-block: var(--wb-s-40, 2.5rem) var(--wb-s-64); }
.wb-pkg-hero__grid { display: grid; gap: var(--wb-s-32); margin-top: var(--wb-s-24); }
@media (min-width: 940px) {
  .wb-pkg-hero__grid { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--wb-s-64); align-items: start; }
}
/* color MUST be set explicitly. The global `h1,h2,h3,h4 { color:
   var(--wb-text) }` rule sets a dark colour directly, so inheriting from
   .wb-pkg-hero does not reach it — the heading shipped dark-on-dark and
   was effectively invisible. Same trap applies to any h2 placed on a dark
   section without an explicit colour. */
.wb-pkg-hero h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 3.1rem); line-height: 1.08; letter-spacing: -0.022em; color: var(--wb-text-on-dark); }
.wb-pkg-hero__tagline { margin-top: var(--wb-s-12); font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); color: var(--wb-text-on-dark); }
/* The liftable sentence. Set quieter than the tagline on purpose — it is
   there for the reader who wants the whole definition, and for answer
   engines, without competing with the headline. */
.wb-pkg-hero__answer { margin-top: var(--wb-s-20); font-size: 0.9375rem; line-height: 1.7; color: var(--wb-text-on-dark-muted); max-width: 62ch; }

.wb-pkg-price { background: var(--wb-white); color: var(--wb-text); border-radius: var(--wb-radius-lg); padding: var(--wb-s-24); box-shadow: var(--wb-shadow-lg); }
.wb-pkg-price__amount { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: clamp(2.25rem, 1.8rem + 1.8vw, 2.75rem); line-height: 1; letter-spacing: -0.03em; color: var(--wb-deep-dark); }
.wb-pkg-price__terms { margin-top: var(--wb-s-4); font-size: 0.8125rem; color: var(--wb-text-muted); }
.wb-pkg-price__compare { margin-top: var(--wb-s-16); padding-top: var(--wb-s-16); border-top: 1px solid var(--wb-border); font-size: 0.8125rem; color: var(--wb-text-muted); }
.wb-pkg-price__compare span { text-decoration: line-through; }
.wb-pkg-price__compare em { display: block; margin-top: 2px; font-style: normal; font-weight: 700; color: var(--wb-cobalt); }
.wb-pkg-price .wb-btn { margin-top: var(--wb-s-20); }
.wb-pkg-price__note { margin-top: var(--wb-s-12); font-size: 0.75rem; color: var(--wb-text-muted); text-align: center; }

/* Included / not included, side by side and scannable. */
.wb-incl { display: grid; gap: var(--wb-s-24); }
@media (min-width: 860px) { .wb-incl { grid-template-columns: 1fr 1fr; gap: var(--wb-s-32); } }
.wb-incl__col { border: 1px solid var(--wb-border); border-radius: var(--wb-radius-lg); padding: var(--wb-s-24); }
.wb-incl__col--yes { border-color: rgba(42, 62, 255, 0.28); background: var(--wb-cobalt-soft); }
.wb-incl__cap { display: flex; align-items: center; gap: var(--wb-s-8); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wb-cobalt-deep); }
.wb-incl__col--no .wb-incl__cap { color: var(--wb-text-muted); }
.wb-incl__cap svg { width: 16px; height: 16px; }
.wb-incl ul { list-style: none; margin: var(--wb-s-16) 0 0; padding: 0; }
.wb-incl li { position: relative; padding: var(--wb-s-8) 0 var(--wb-s-8) var(--wb-s-20); font-size: 0.9375rem; line-height: 1.5; border-bottom: 1px solid var(--wb-border); }
.wb-incl li:last-child { border-bottom: none; }
.wb-incl__col--yes li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 8px; height: 8px; border-radius: 50%; background: var(--wb-cobalt); }
.wb-incl__col--no li { color: var(--wb-text-muted); }
.wb-incl__col--no li::before { content: ""; position: absolute; left: 0; top: 1.35em; width: 9px; height: 1px; background: var(--wb-text-muted); }
.wb-incl__foot { margin-top: var(--wb-s-20); font-size: 0.875rem; color: var(--wb-text-muted); max-width: 74ch; }

/* Before / after comparison. Icon-led so it reads at a glance.
   NOTE: no ratings, review counts or testimonials here, ever — the
   reference this was modelled on carried invented ones. */
.wb-vs { display: grid; gap: var(--wb-s-24); position: relative; }
@media (min-width: 900px) {
  .wb-vs { grid-template-columns: 1fr auto 1fr; gap: var(--wb-s-32); align-items: start; }
}
.wb-vs__side { border: 1px solid var(--wb-border-on-dark); border-radius: var(--wb-radius-lg); padding: var(--wb-s-24); }
.wb-vs__side--after { border-color: rgba(139, 150, 255, 0.4); background: rgba(79, 95, 255, 0.07); }
.wb-vs__cap { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wb-text-on-dark-muted); margin-bottom: var(--wb-s-16); }
.wb-vs__side--after .wb-vs__cap { color: #8B96FF; }   /* 7.35:1 — see contrast note */
.wb-vs__row { display: flex; gap: var(--wb-s-12); padding: var(--wb-s-12) 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.wb-vs__row:last-child { border-bottom: none; }
.wb-vs__icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--wb-radius-sm); display: grid; place-items: center; background: rgba(255,255,255,0.06); }
.wb-vs__icon svg { width: 17px; height: 17px; color: var(--wb-text-on-dark-muted); }
.wb-vs__side--after .wb-vs__icon { background: rgba(79,95,255,0.18); }
.wb-vs__side--after .wb-vs__icon svg { color: #8B96FF; }
.wb-vs__term { font-weight: 700; font-size: 0.9375rem; color: var(--wb-text-on-dark); }
.wb-vs__desc { margin-top: 2px; font-size: 0.8125rem; line-height: 1.5; color: var(--wb-text-on-dark-muted); }
.wb-vs__divider { display: none; }
@media (min-width: 900px) {
  .wb-vs__divider { display: grid; place-items: center; align-self: center; }
  .wb-vs__divider span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--wb-cobalt); color: var(--wb-white); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
}
.wb-vs__foot { margin-top: var(--wb-s-24); font-size: 0.875rem; line-height: 1.65; color: var(--wb-text-on-dark-muted); max-width: 76ch; }
.wb-pkg-other { margin-top: var(--wb-s-32); text-align: center; font-size: 0.9375rem; color: var(--wb-text-muted); }

.wb-pricing-card__more {
  display: flex; align-items: center; justify-content: center; gap: var(--wb-s-8);
  margin-top: var(--wb-s-12); font-size: 0.8125rem; font-weight: 600;
  color: var(--wb-cobalt);
}
.wb-pricing-card__more svg { width: 14px; height: 14px; transition: transform var(--wb-fast) var(--wb-ease); }
.wb-pricing-card__more:hover svg { transform: translateX(3px); }
/* On the featured (dark) card the cobalt would fail contrast — see the
   handoff's contrast rule. */
.wb-pricing-card--featured .wb-pricing-card__more { color: #8B96FF; }
.wb-compare th a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.wb-pkg-pay { margin-top: var(--wb-s-16); padding-top: var(--wb-s-16); border-top: 1px solid var(--wb-border); }
.wb-pkg-pay > div { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--wb-s-8); padding: var(--wb-s-8) 0; }
.wb-pkg-pay dt { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.625rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--wb-text-muted); }
.wb-pkg-pay dd { margin: 0; font-size: 0.8125rem; line-height: 1.4; color: var(--wb-text); }

/* Optional project-detail block on the contact form. Collapsed by default:
   the four required fields stay the whole form for anyone who just wants
   to send a line, and this opens only for someone ready to be quoted. It
   auto-opens when arriving from a package page (?package=). */
.wb-optional { margin: var(--wb-s-20) 0; border: 1px solid var(--wb-border); border-radius: var(--wb-radius-md); background: var(--wb-cobalt-soft); }   /* --wb-soft does not exist */
.wb-optional > summary {
  cursor: pointer; padding: var(--wb-s-16); font-size: 0.875rem; font-weight: 600;
  color: var(--wb-cobalt-deep); list-style: none; display: flex; align-items: center; gap: var(--wb-s-8);
}
.wb-optional > summary::-webkit-details-marker { display: none; }
.wb-optional > summary::before { content: "+"; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 1rem; line-height: 1; }
.wb-optional[open] > summary::before { content: "\2212"; }
.wb-optional > summary:focus-visible { outline: 3px solid var(--wb-cobalt); outline-offset: -3px; }
.wb-optional__grid { display: grid; gap: var(--wb-s-16); padding: 0 var(--wb-s-16) var(--wb-s-16); }
@media (min-width: 640px) { .wb-optional__grid { grid-template-columns: 1fr 1fr; } }
.wb-optional__grid .wb-field--wide { grid-column: 1 / -1; }
.wb-optional__note { padding: 0 var(--wb-s-16) var(--wb-s-16); margin: 0; font-size: 0.75rem; line-height: 1.55; color: var(--wb-text-muted); }

/* ==========================================================================
   MAINTENANCE PLANS  (/services/maintenance-support/#plans)
   Recurring plans, visually distinct from the one-time build packages on
   purpose — a monthly plan sitting in an identical card to a $4,499 build
   invites exactly the confusion the market already has about what
   "maintenance" costs.
   ========================================================================== */
.wb-plans { display: grid; gap: var(--wb-s-24); }
@media (min-width: 900px) { .wb-plans { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.wb-plan { border: 1px solid var(--wb-border); border-radius: var(--wb-radius-lg); padding: var(--wb-s-24); background: var(--wb-white); display: flex; flex-direction: column; }
.wb-plan--featured { border-color: var(--wb-cobalt); box-shadow: var(--wb-shadow-md); }
.wb-plan__name { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wb-cobalt-deep); }
.wb-plan__price { margin-top: var(--wb-s-8); font-size: 2.25rem; line-height: 1; font-weight: 800; letter-spacing: -0.03em; color: var(--wb-deep-dark); }
.wb-plan__price span { font-size: 0.9375rem; font-weight: 500; letter-spacing: 0; color: var(--wb-text-muted); }
.wb-plan__compare { margin-top: var(--wb-s-8); font-size: 0.75rem; color: var(--wb-text-muted); }
.wb-plan__compare span { text-decoration: line-through; }
.wb-plan__compare em { font-style: normal; font-weight: 700; color: var(--wb-cobalt); }
.wb-plan__summary { margin-top: var(--wb-s-12); font-size: 0.875rem; line-height: 1.55; color: var(--wb-text-muted); }
.wb-plan__features { list-style: none; margin: var(--wb-s-16) 0 var(--wb-s-24); padding: 0; flex: 1; }
.wb-plan__features li { position: relative; padding: var(--wb-s-8) 0 var(--wb-s-8) var(--wb-s-20); font-size: 0.875rem; line-height: 1.45; border-bottom: 1px solid var(--wb-border); }
.wb-plan__features li:last-child { border-bottom: none; }
.wb-plan__features li::before { content: ""; position: absolute; left: 0; top: 1.0em; width: 7px; height: 7px; border-radius: 50%; background: var(--wb-cobalt); }
.wb-plans__foot { margin-top: var(--wb-s-24); max-width: 74ch; margin-inline: auto; text-align: center; font-size: 0.875rem; line-height: 1.65; color: var(--wb-text-muted); }

/* Single liftable answer sentence — written for AI answer engines, which
   extract a sentence rather than a page. Set apart so a human skims past
   it easily, since it restates what the page says at length. */
.wb-answer { max-width: 78ch; margin-inline: auto; padding-left: var(--wb-s-20); border-left: 3px solid var(--wb-cobalt); font-size: 1.0625rem; line-height: 1.7; color: var(--wb-text); }