/* ============================================================
   app.gogorilla.com, v2 additions
   Always-visible tiers, addon disclosure, persistence UI
   ============================================================ */
@import './app.css?v=84';



/* ── Service "View pricing page" badge ────────────────────────────────
   Subtle inline pill link next to the service title. Opens the public
   pricing page in a new tab. Replaces the older bare (i) info icon. */
.svc__pricing-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
  margin-left: 0.55em;
  padding: 0.2rem 0.55rem;
  vertical-align: middle;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.2;
  color: var(--gg-blue-muted, #4a5dad);
  background: rgba(0, 42, 191, 0.06);
  border: 1px solid rgba(0, 42, 191, 0.14);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  top: -1px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.svc__pricing-link:hover,
.svc__pricing-link:focus-visible {
  background: rgba(0, 42, 191, 0.11);
  border-color: rgba(0, 42, 191, 0.28);
  color: var(--gg-blue, #002ABF);
  outline: none;
  transform: translateY(-1px);
}
.svc__pricing-link-text { display: inline; }
.svc__pricing-link-arrow {
  display: inline-block;
  flex-shrink: 0;
  opacity: 0.75;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.svc__pricing-link:hover .svc__pricing-link-arrow,
.svc__pricing-link:focus-visible .svc__pricing-link-arrow {
  opacity: 1;
  transform: translate(1px, -1px);
}
/* Mobile: keep the badge but shrink slightly so it never crowds the title */
@media (max-width: 600px) {
  .svc__pricing-link {
    margin-left: 0.4em;
    padding: 0.18rem 0.45rem;
    font-size: 0.66rem;
  }
}

/* Legacy class kept as no-op for back-compat with any cached HTML */
.svc__pricing-info { display: none; }
/* Portal tooltip, rendered into document.body, position:fixed so it
   escapes any backdrop-filter / isolation stacking context.
   White-card style matches .summary__total-tip / .addon__capacity-tip /
   .dis-tip / .wl-tip for visual consistency across the app. */
.pricing-tip-portal {
  position: fixed;
  transform: translate(-50%, calc(-100% - 10px));
  background: #ffffff;
  color: #4b5563;
  font-size: 0.73rem;
  font-weight: 500;
  letter-spacing: 0;
  padding: 0.5rem 0.7rem;
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.13);
  white-space: nowrap;
  pointer-events: none;
  z-index: 2147483647;
  line-height: 1.45;
  text-align: left;
  text-transform: none;
}
/* Caret pointing down (toward the anchor below the tooltip) */
.pricing-tip-portal::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.09);
  border-bottom-width: 0;
}
.pricing-tip-portal::after {
  content: '';
  position: absolute;
  top: calc(100% - 1px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #ffffff;
  border-bottom-width: 0;
}


/* ── Generic (i) info icon + portal tooltip ─────────────────────────────
   Used wherever a small explanatory tooltip is needed (commit-bar label,
   bundle tracker, etc.). Renders into document.body, max-int z-index so
   it never gets covered. White-card style matches the rest of the system. */
.info-tip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-left: 0.35em;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--gg-muted, #6b7280);
  opacity: 0.55;
  cursor: help;
  line-height: 1;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.info-tip-icon:hover,
.info-tip-icon:focus-visible {
  opacity: 1;
  color: var(--gg-blue, #002ABF);
  outline: none;
}
.info-tip-portal {
  position: fixed;
  background: #ffffff;
  color: #4b5563;
  font-size: 0.73rem;
  font-weight: 500;
  letter-spacing: 0;
  padding: 0.65rem 0.8rem;
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.13);
  max-width: 260px;
  pointer-events: none;
  z-index: 2147483647;
  line-height: 1.45;
  text-align: left;
  text-transform: none;
  white-space: normal;
}
.info-tip-portal--above { transform: translate(-50%, calc(-100% - 10px)); }
.info-tip-portal--below { transform: translate(-50%, 10px); }
.info-tip-portal__head {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  color: #111827;
  margin-bottom: 0.3rem;
  letter-spacing: -0.01em;
}
.info-tip-portal__body {
  display: block;
  color: #4b5563;
}
/* Caret, above-placement (tooltip above icon, caret pointing down) */
/* `--info-tip-caret-shift` is set in JS when the tooltip is clamped against
   a viewport edge, so the caret slides over to keep pointing at the icon. */
.info-tip-portal--above::before {
  content: '';
  position: absolute;
  top: 100%;
  left: calc(50% + var(--info-tip-caret-shift, 0px));
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.09);
  border-bottom-width: 0;
}
.info-tip-portal--above::after {
  content: '';
  position: absolute;
  top: calc(100% - 1px);
  left: calc(50% + var(--info-tip-caret-shift, 0px));
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #ffffff;
  border-bottom-width: 0;
}
/* Caret, below-placement (tooltip below icon, caret pointing up) */
.info-tip-portal--below::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: calc(50% + var(--info-tip-caret-shift, 0px));
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.09);
  border-top-width: 0;
}
.info-tip-portal--below::after {
  content: '';
  position: absolute;
  bottom: calc(100% - 1px);
  left: calc(50% + var(--info-tip-caret-shift, 0px));
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: #ffffff;
  border-top-width: 0;
}


/* ── Tier card: one-time setup fee row ──
   Rendered below the monthly price (.tier__price). Subtle secondary line,
   small, muted text so the monthly retainer remains the headline number. */
.tier__setup-fee {
  margin-top: 0.35rem;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--gg-muted, #6b7280);
  letter-spacing: 0;
  line-height: 1.3;
  text-align: left;
}
.tier__setup-fee--custom {
  font-style: italic;
}
.tier--ent .tier__setup-fee {
  color: var(--gg-orange-deep, #b8860b);
}
@media (max-width: 880px) {
  .tier__setup-fee { font-size: 0.72rem; margin-top: 0.25rem; }
}


/* ── Step indicator portal tooltip ──
   Rendered into document.body as position:fixed so it escapes
   .step-indicator's backdrop-filter stacking context. White-card style
   matches the rest of the tooltip system. */
.step-lock-wrap {
  /* inline-flex so the wrapper has a real bounding box (needed for
     getBoundingClientRect to return non-zero) but still respects the
     parent .step-indicator__item flex column layout. */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
/* Disabled buttons swallow pointer events, let the wrapper catch them
   so hover/focus on a locked step can fire the tooltip handler. */
.step-lock-wrap .step-indicator__btn {
  pointer-events: none;
}
.step-lock-tip {
  position: fixed;
  transform: translate(-50%, 10px);
  background: #ffffff;
  color: #4b5563;
  font-size: 0.73rem;
  font-weight: 500;
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
  white-space: normal;
  max-width: 240px;
  pointer-events: none;
  z-index: 2147483647;
  line-height: 1.45;
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
}
/* Caret pointing up toward the locked step bubble */
.step-lock-tip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.09);
  border-top-width: 0;
}
.step-lock-tip::after {
  content: '';
  position: absolute;
  bottom: calc(100% - 1px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: #ffffff;
  border-top-width: 0;
}


/* ── Summary waitlist portal tooltip ── */
/* Rendered into document.body as position:fixed, escapes summary's
   overflow-y:auto scroll container and isolation:isolate stacking context */
.waitlist-tip-portal {
  position: fixed;
  transform: translate(calc(-100% - 10px), -50%);
  background: #fff;
  border: 1px solid rgba(229, 161, 0, 0.25);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  max-width: 240px;
  pointer-events: none;
  z-index: 2147483647;
  box-shadow: 0 4px 20px rgba(120, 90, 40, 0.15);
  line-height: 1.45;
}
/* Caret pointing right (toward the pill) */
.waitlist-tip-portal::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-width: 0;
  border-left-color: #fff;
  filter: drop-shadow(1px 0 0 rgba(229,161,0,0.2));
}
.waitlist-tip-portal__head {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--gg-heading);
  margin-bottom: 0.3rem;
}
.waitlist-tip-portal__body {
  display: block;
  font-size: 0.75rem;
  color: var(--gg-body);
  margin-bottom: 0.3rem;
}
.waitlist-tip-portal__meta {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gg-warning-dark, #B8860B);
}

/* ── Combined build page: client section + divider + services section ── */
.build-section { padding-top: 2.25rem; }
.build-section + .build-section { padding-top: 0; }

.build-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 3rem auto 2rem;
  max-width: 920px;
  scroll-margin-top: 100px;
}
.build-divider__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.18), transparent);
}
.build-divider__label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gg-muted);
  white-space: nowrap;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}

/* When build page renders, add some breathing room since there is no tabs strip */
.page { padding-top: 1.5rem; }

/* ── Welcome-back banner ── */
.welcome-back {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  margin: 0 auto 1.75rem;
  max-width: 920px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 244, 230, 0.92), rgba(255, 232, 211, 0.78));
  border: 1px solid rgba(184, 94, 10, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 6px 18px -10px rgba(184, 94, 10, 0.35);
}
.welcome-back__icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gg-orange), var(--gg-orange-deep));
  color: #fff;
  display: grid; place-items: center;
  font-size: 1.2rem;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 4px 10px -4px rgba(184, 94, 10, 0.45);
}
.welcome-back__body {
  flex: 1;
  font-size: 0.92rem;
  color: var(--gg-heading);
  line-height: 1.45;
}
.welcome-back__body strong { font-weight: 800; }

/* ── Service header, "from £X" hint when not added ── */
.svc__starting {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-top: 0.55rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: rgba(0, 42, 191, 0.06);
  border: 1px solid rgba(0, 42, 191, 0.12);
}
.svc__starting-from {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gg-muted);
}
.svc__starting-price {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--gg-blue);
  letter-spacing: -0.01em;
}
.svc__starting-unit {
  font-size: 0.75rem;
  color: var(--gg-muted);
  font-weight: 600;
}

/* When service isn't yet active, dim the tier price slightly so the page reads as "browsing" */
.svc--always:not(.svc--active) .tier { opacity: 0.96; }
.svc--always:not(.svc--active) .tier__radio { opacity: 0.6; }

/* ── Add-ons disclosure ── */
/* ── Add-ons disclosure (glass-frame surface) ─────────────────────
   Replaces the earlier neumorphic look with the same 8-slice glass-frame
   treatment used on tier cards / role tiles / qualifier surfaces. White
   frosted background + soft outer shadow + WebP bevel slices overlaid
   via mix-blend-mode: multiply on a ::before pseudo-element. */
.svc__addons-disc {
  position: relative;
  margin-top: 1.25rem;
  border: 1px solid rgba(180, 195, 220, 0.32);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(244,248,255,0.78) 100%);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 1px 2px rgba(15,23,42,0.04),
    0 8px 20px -12px rgba(44, 51, 102, 0.18);
  transition: box-shadow 0.18s ease;
}
.svc__addons-disc > * { position: relative; z-index: 2; }
.svc__addons-disc--open {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 1px 2px rgba(15,23,42,0.05),
    0 14px 28px -12px rgba(44, 51, 102, 0.25);
}
.svc__addons-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1.15rem;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
}
.svc__addons-toggle-main { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.svc__addons-toggle-title {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--gg-heading, #0f1c35);
}
/* Plus icon: simple glass-style circle, blue glyph */
.svc__addons-toggle-plus {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(240,245,255,0.85));
  border: 1px solid rgba(0, 42, 191, 0.18);
  color: var(--gg-blue, #002ABF);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 1px 2px rgba(15,23,42,0.06);
  transition: box-shadow 0.18s ease, background 0.18s ease;
}
/* When open, press the plus into the surface */
.svc__addons-disc--open .svc__addons-toggle-plus {
  background: linear-gradient(180deg, rgba(232,240,255,0.95), rgba(220,230,250,0.85));
  box-shadow:
    inset 0 1px 2px rgba(15,23,42,0.10),
    0 1px 0 rgba(255,255,255,0.6);
}
/* Selected-count pill: inset neumorphic chip — compact circle for single digit */
.svc__addons-selected-pill {
  font-size: 0.78rem;
  font-weight: 700;
  min-width: 22px;
  height: 22px;
  padding: 0 0.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--gg-neu-gradient);
  color: #b85e0a;
  font-variant-numeric: tabular-nums;
  box-shadow:
    rgba(214, 211, 208, 0.65) 2px 2px 4px 0px inset,
    rgb(255, 255, 255) -2px -2px 4px 0px inset;
}
.svc__addons-toggle-meta {
  font-size: 0.78rem;
  color: var(--gg-muted, #6b7280);
  font-weight: 500;
}
/* Chevron: glass-style button, brand-blue glyph */
.svc__addons-chev {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(240,245,255,0.85));
  border: 1px solid rgba(0, 42, 191, 0.18);
  color: var(--gg-blue, #002ABF);
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 1px 2px rgba(15,23,42,0.06);
  transition: transform 0.2s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.svc__addons-disc--open .svc__addons-chev {
  background: linear-gradient(180deg, rgba(232,240,255,0.95), rgba(220,230,250,0.85));
  box-shadow:
    inset 0 1px 2px rgba(15,23,42,0.10),
    0 1px 0 rgba(255,255,255,0.6);
}

/* Inner addons panel: floats on the parent neumorphic surface */
.svc__addons-disc .svc__addons {
  margin-top: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  padding: 0.75rem 1.15rem 1.15rem;
}
/* Subtle separator between toggle and inner content (sunken hairline) */
.svc__addons-disc .svc__addons::before {
  content: '';
  display: block;
  height: 1px;
  margin: 0 0 0.85rem;
  background: linear-gradient(90deg, transparent, rgba(166, 180, 200, 0.5), transparent);
}

/* ── Home page cart preview strip ── */
.home-cart-preview {
  position: relative;
  z-index: 5;
  padding: 0.75rem 0 0;
}
.home-cart-preview__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.1rem;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(245, 240, 230, 0.85));
  border: 1px solid rgba(184, 94, 10, 0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 4px 14px -8px rgba(0,0,0,0.18);
}
.home-cart-preview__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.88rem;
  color: var(--gg-heading);
  font-weight: 600;
  flex-wrap: wrap;
}
.home-cart-preview__pill strong { font-weight: 800; }
.home-cart-preview__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gg-orange);
  box-shadow: 0 0 0 3px rgba(232, 138, 43, 0.2);
  animation: gg-pulse 2s ease-in-out infinite;
}
@keyframes gg-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(232, 138, 43, 0.2); }
  50% { box-shadow: 0 0 0 6px rgba(232, 138, 43, 0.05); }
}
.home-cart-preview__cta {
  margin-left: 0.4rem;
  color: var(--gg-blue);
  font-weight: 800;
  text-decoration: none;
  font-size: 0.86rem;
  letter-spacing: -0.005em;
}
.home-cart-preview__cta:hover { text-decoration: underline; }
.home-cart-preview__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.74rem;
  color: var(--gg-muted);
}

@media (max-width: 720px) {
  .home-cart-preview__inner { flex-direction: column; align-items: flex-start; }
  .svc__addons-toggle { padding: 0.75rem 0.9rem; }
  .svc__addons-toggle-meta { display: none; }
}

/* ── Combined Build Page: Client grid sized for sidebar layout ── */
.client-grid.client-grid--compact {
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 0;
}
.client-grid--compact .client-card {
  padding: 1.1rem 1.1rem 1.25rem;
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.client-grid--compact .client-card__icon {
  max-width: 120px;
  height: 95px;
  margin: 0 auto 0.85rem;
}
.client-grid--compact .client-card__logo {
  height: 22px;
  margin-bottom: 0.55rem;
}
.client-grid--compact .client-card__heading {
  font-size: 0.85rem;
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
}
.client-grid--compact .client-card__desc {
  font-size: 0.78rem;
  line-height: 1.4;
  -webkit-line-clamp: 2;
  padding: 0 0.25rem;
}
.client-grid--compact .client-card__radio {
  position: absolute;
  top: 1.5rem;
  left: 1.1rem;
  right: auto;
  z-index: 3;
  width: 22px;
  height: 22px;
}

/* On narrower viewports, stack client cards 1 column when sidebar still showing */
@media (max-width: 1280px) and (min-width: 1101px) {
  .client-grid--compact { grid-template-columns: 1fr; }
  .client-grid--compact .client-card { display: grid; grid-template-columns: 110px 1fr; gap: 1rem; align-items: center; padding: 1rem 1.1rem; text-align: left; }
  .client-grid--compact .client-card__icon { grid-row: span 4; max-width: 100%; height: 90px; margin: 0; }
  .client-grid--compact .client-card__logo { height: 22px; justify-content: flex-start; margin: 0; }
  .client-grid--compact .client-card__logo-img { width: auto; }
  .client-grid--compact .client-card__heading { text-align: left; margin: 0; font-size: 0.9rem; }
  .client-grid--compact .client-card__desc { text-align: left; -webkit-line-clamp: 2; }
  .client-grid--compact .client-card__radio { top: 1rem; left: 1.1rem; right: auto; z-index: 3; }
}
@media (max-width: 1100px) {
  .client-grid--compact { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
  .client-grid--compact { grid-template-columns: 1fr; }
}

/* ── Summary plan card, enhanced for live client-type reflection ── */
.summary__plan {
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.summary__plan--empty {
  background: linear-gradient(168deg, #FAF6EE 0%, #F2EDE0 100%);
  border-style: dashed !important;
  opacity: 0.92;
}
.summary__plan--empty .summary__plan-icon {
  background: linear-gradient(135deg, #E5DDC9, #D6CDB6) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
.summary__plan-icon-empty {
  font-size: 1.4rem;
  font-weight: 700;
  color: rgba(0,0,0,0.32);
  font-family: serif;
}
.summary__plan-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}
.summary__plan--set {
  animation: summaryPlanFlash 0.6s ease-out;
}
@keyframes summaryPlanFlash {
  0% {
    background: linear-gradient(168deg, #FFF8E1 0%, #FFE9B0 100%);
    box-shadow: 0 0 0 3px rgba(232, 138, 43, 0.35), inset 0 1px 0 rgba(255,255,255,0.6);
    transform: scale(1.015);
  }
  100% {
    transform: scale(1);
  }
}
.summary__plan-name em {
  font-style: italic;
  font-weight: 800;
  color: var(--gg-blue, #002ABF);
}
.summary__plan-name sup {
  font-size: 0.55em;
  vertical-align: super;
  color: var(--gg-muted);
  margin-left: 1px;
}
.summary__plan-name-empty {
  color: var(--gg-muted);
  font-weight: 600;
  font-style: italic;
}
.summary__plan-chip {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 1px 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, #FFE9B0, #F5C963);
  border: 1px solid rgba(184, 94, 10, 0.3);
  color: #6B3D00;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ── Plan header inlined inside the services list card (saves vertical space) ── */
.summary__kicker--inline {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  margin-bottom: 0.15rem;
  color: #8C6A1F;
  line-height: 1;
}
.summary__plan--inline {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 0 0.7rem 0 !important;
  margin: 0 0 0.7rem 0 !important;
  border-bottom: 1px solid rgba(180, 160, 120, 0.28) !important;
  animation: none !important;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.summary__plan--inline.summary__plan--empty {
  opacity: 0.85;
}
.summary__plan--inline .summary__plan-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}
.summary__plan--inline .summary__plan-name {
  font-size: 0.92rem;
}
.summary__plan--inline .summary__plan-meta {
  margin-top: 0.15rem;
}

/* ── Client section head: compact for combined build page ── */
.section-head--compact { margin-bottom: 1.25rem; }
.section-head--compact .section-head__title { font-size: 1.85rem; }
.section-head--compact .section-head__sub { font-size: 0.92rem; }

/* ── Tighten page top, nav removed, calculator now sits flush with viewport top ── */
.page { padding-top: 1rem !important; }
.calc { padding-top: 0 !important; }
.build-section { padding-top: 0 !important; }
@media (max-width: 1100px) {
  .page { padding-top: 0.75rem !important; }
}

/* ── Summary sidebar: fit within viewport, scroll services list internally ── */
.summary-wrap {
  position: sticky;
  top: 1rem !important;
  max-height: calc(100vh - 2rem);
  display: flex;
  flex-direction: column;
}
.summary-wrap > .summary {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  min-height: 0;
}
.summary__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Custom scrollbar, subtle, brand-tinted */
  scrollbar-width: thin;
  scrollbar-color: rgba(184, 94, 10, 0.35) transparent;
}
.summary__list::-webkit-scrollbar { width: 6px; }
.summary__list::-webkit-scrollbar-thumb {
  background: rgba(184, 94, 10, 0.32);
  border-radius: 3px;
}
.summary__list::-webkit-scrollbar-thumb:hover { background: rgba(184, 94, 10, 0.5); }
.summary__list::-webkit-scrollbar-track { background: transparent; }
/* Pin the list title at the top of its scroll container */
.summary__list-title {
  position: sticky;
  top: 0;
  z-index: 1;
  background: linear-gradient(168deg, #FFFFFF 0%, #FAF6EE 100%);
  padding-top: 0.25rem;
  padding-bottom: 0.5rem;
}
/* Disable the sticky behavior on narrow viewports where summary is below */
@media (max-width: 1100px) {
  .summary-wrap { position: static !important; max-height: none; }
  .summary-wrap > .summary { max-height: none; }
  .summary__list { max-height: 360px; }
}

/* ============================================================
   ADDON CARDS v3, wide layout with capacity bar (override)
   ============================================================ */

/* Single column: cards are wide and roomy now */
.svc__addons-disc .svc__addons-grid {
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
.svc__addons-disc .addon-group .svc__addons-grid {
  grid-template-columns: 1fr;
}

/* Override base .addon, drop flex-row, use grid for header layout */
.svc__addons-disc .addon {
  display: block;
  padding: 1rem 1.1rem;
  cursor: pointer;
  position: relative;
  text-align: left;
  background: rgba(255,255,255,0.6);
  border-radius: 16px;
  transition: box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.svc__addons-disc .addon:hover {
  background: rgba(255,255,255,0.85);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 12px 26px -14px rgba(0, 42, 191, 0.22);
}
.svc__addons-disc .addon--on {
  background: linear-gradient(180deg, rgba(244,247,255,0.96), rgba(232,238,255,0.85));
  box-shadow:
    0 0 0 2px rgba(0, 42, 191, 0.32) inset,
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 14px 26px -14px rgba(0, 42, 191, 0.28);
}
.svc__addons-disc .addon--featured {
  /* Ribbon clearance: push card body below the ribbon (height ~28px at top:12px ≈ 40px) */
  padding-top: 2.8rem;
  /* Highlighted border for recommended */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 0 0 1.5px rgba(123, 145, 227, 0.55),
    0 12px 26px -16px rgba(44, 51, 102, 0.18);
}
.svc__addons-disc .addon--featured.addon--on {
  box-shadow:
    0 0 0 2px rgba(0, 42, 191, 0.4) inset,
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 14px 26px -14px rgba(0, 42, 191, 0.32);
}

/* Ribbon (top-left), image-based. Both Popular + Recommended share the same height for uniform sizing. */
.addon__ribbon-img {
  position: absolute;
  top: 12px;
  left: -6px;
  z-index: 3;
  width: auto;
  height: 28px;
  pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(184, 89, 10, 0.35));
}

/* Legacy text ribbon, kept for any v1 surfaces still using it */
.addon__ribbon {
  position: absolute;
  top: 9px;
  left: -7px;
  z-index: 3;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 60%, #b8590a 100%);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 0.35rem 0.7rem 0.35rem 0.6rem;
  border-radius: 4px 6px 6px 0;
  box-shadow: 0 4px 8px -2px rgba(184, 89, 10, 0.4);
}
.addon__ribbon::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  border-style: solid;
  border-width: 6px 7px 0 0;
  border-color: #7a3a05 transparent transparent transparent;
}

/* Checkbox in top-right, neumorphic 3D to match tier radios + nav radios */
.svc__addons-disc .addon__check {
  position: absolute;
  top: 1.05rem;
  right: 1.05rem;
  width: 26px; height: 26px;
  border-radius: 7px;
  border: 2px solid #E2E2E2;
  background: #fff;
  display: grid; place-items: center;
  color: #fff;
  z-index: 2;
  box-shadow:
    inset 1px 1px 3px rgba(0, 0, 0, 0.06),
    1px 1px 3px rgba(0, 0, 0, 0.06),
    -1px -1px 2px rgba(255, 255, 255, 0.7);
  transition: background 0.2s ease-out, border-color 0.2s ease-out,
              box-shadow 0.2s ease-out, transform 0.2s ease-out;
}
.svc__addons-disc .addon:hover:not(.addon--on) .addon__check {
  border-color: #6B82D6;
  box-shadow:
    inset 1px 1px 3px rgba(0, 0, 0, 0.06),
    2px 2px 6px rgba(0, 0, 0, 0.08),
    -1px -1px 3px rgba(255, 255, 255, 0.8);
}
.svc__addons-disc .addon__check--on,
.svc__addons-disc .addon--on .addon__check {
  background: var(--gg-premium-check-bg);
  border-color: transparent;
  color: #fff;
  transform: scale(1.05);
  box-shadow: var(--gg-premium-check-shadow);
}
.svc__addons-disc .addon__check svg { stroke-width: 3; }

/* Body */
.addon__main { display: block; padding-right: 2.5rem; }

.addon__title-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.1rem;
  margin-bottom: 0.5rem;
  /* Push title down past the ribbon when featured */
}
.addon--featured .addon__title-row { margin-top: 0; }

.addon__icon {
  width: 22px; height: 22px;
  flex-shrink: 0;
  object-fit: contain;
}
.svc__addons-disc .addon__title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--gg-heading);
  line-height: 1.2;
  display: block;
}

/* Price row */
.addon__price-row {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-bottom: 0.45rem;
}
.addon__price-main {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--gg-blue);
  line-height: 1;
  letter-spacing: -0.01em;
}
.addon__price-main--free { color: var(--gg-muted); font-style: italic; }
.addon__price-main--custom { color: var(--gg-muted); font-style: italic; }
.addon__price-main--included { color: var(--gg-muted); font-style: italic; }
.addon__price-main--neg { color: var(--gg-success); }
.addon__price-was { font-size: 0.78rem; color: var(--gg-muted); text-decoration: line-through; margin-left: 0.45em; font-weight: 500; }
.addon__price-suffix {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gg-blue-muted, #6B82D6);
}
.addon__info {
  background: transparent;
  border: 0;
  padding: 0;
  margin-left: 0.15rem;
  cursor: help;
  color: var(--gg-muted);
  display: inline-flex;
  align-items: center;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.addon__info:hover { opacity: 1; color: var(--gg-blue); }

/* Description */
.svc__addons-disc .addon__desc {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--gg-muted);
  margin: 0 0 0.85rem 0;
  /* 2026-05-29: removed max-width: 60ch — was forcing 2-line wraps
     while half the card sat empty on the right. Description now uses
     the full card width and only wraps when the content actually
     overflows the line. */
}

/* Quantity stepper, appears below description when add-on is selected
   and has a per-unit unit (e.g. /lead, /video, /profile). */
.addon__qty {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 0.85rem;
  margin: 0.1rem 0 0.95rem 0;
  padding: 0.65rem 0.85rem;
  background: rgba(46, 93, 255, 0.05);
  border: 1px solid rgba(46, 93, 255, 0.18);
  border-radius: 10px;
  cursor: default;
}
.addon__qty-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gg-heading);
  letter-spacing: -0.005em;
  text-transform: capitalize;
}
.addon__qty-input-wrap {
  display: inline-flex;
  align-items: stretch;
  background: #fff;
  border: 1.5px solid #e2e6ef;
  border-radius: 8px;
  overflow: hidden;
  height: 34px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.addon__qty-input-wrap:focus-within {
  border-color: var(--gg-blue);
  box-shadow: 0 0 0 3px rgba(46,93,255,0.15);
}
.addon__qty-step {
  appearance: none;
  background: linear-gradient(180deg, #f8f9fc, #eef0f6);
  border: 0;
  border-right: 1px solid #e2e6ef;
  width: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--gg-blue);
  transition: background 0.12s, color 0.12s;
}
.addon__qty-step--up { border-right: 0; border-left: 1px solid #e2e6ef; }
.addon__qty-step:hover:not(:disabled) {
  background: linear-gradient(180deg, #eaeefb, #dde4f6);
  color: var(--gg-blue-dark, #002ABF);
}
.addon__qty-step:active:not(:disabled) {
  background: #dde4f6;
}
.addon__qty-step:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.addon__qty-input {
  appearance: textfield;
  -moz-appearance: textfield;
  width: 56px;
  border: 0;
  outline: 0;
  text-align: center;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gg-heading);
  background: transparent;
  padding: 0 0.25rem;
}
.addon__qty-input::-webkit-outer-spin-button,
.addon__qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.addon__qty-unit-hint {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gg-muted);
}

/* Capacity row inside addon */
.addon__capacity {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 0.85rem;
  padding-top: 0.35rem;
}
.addon__capacity-label {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.72rem;
  min-width: 8.5rem;
}
.addon__capacity-title {
  font-weight: 600;
  color: var(--gg-muted);
  font-size: 0.7rem;
}
.addon__capacity-status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 800;
  font-size: 0.78rem;
}
.addon__capacity.capacity--open .addon__capacity-status { color: var(--gg-blue); }
.addon__capacity.capacity--limited .addon__capacity-status { color: #7c3aed; }
.addon__capacity.capacity--nearly-full .addon__capacity-status { color: #c026d3; }
.addon__capacity.capacity--full .addon__capacity-status { color: #b85e0a; }

.addon__capacity-track {
  /* The .webm video already includes the gradient fill animation; the
     wrapper provides a glass-card-style frame that surrounds it.
     Multi-layer shadow + highlight creates a frosted-glass embossed look,
     matches the .svc / .client-section-card glass aesthetic at small scale. */
  height: 26px;
  width: 260px;
  flex-shrink: 0;
  border-radius: 100px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 4px;
  background:
    /* Glossy highlight on the top half */
    linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(245, 248, 252, 0.85) 100%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    /* Outer subtle lift */
    0 1px 3px rgba(15, 28, 53, 0.06),
    0 4px 12px -6px rgba(15, 28, 53, 0.12),
    /* Inner well (so the video sits "inside" a recessed frame) */
    inset 0 1px 2px rgba(15, 28, 53, 0.18),
    inset 0 -1px 1px rgba(255, 255, 255, 0.9),
    /* Side bevels */
    inset 1px 0 1px rgba(255, 255, 255, 0.7),
    inset -1px 0 1px rgba(255, 255, 255, 0.7);
}
/* Top-edge specular shine: thin glossy strip on the upper half. */
.addon__capacity-track::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 8%;
  right: 8%;
  height: 35%;
  border-radius: 100px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: 2;
}
/* Faint outer glow that mimics the white halo in the reference image. */
.addon__capacity-track::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 100px;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
  z-index: -1;
}
.addon__capacity-track .capacity-video {
  border-radius: 100px;
  position: relative;
  z-index: 1;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.capacity-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.addon__capacity-copy {
  font-size: 0.72rem;
  color: var(--gg-muted);
  line-height: 1.4;
  max-width: none;
  text-align: left;
}

/* Tooltip popover for the (i) icon next to "Onboarding Availability:" */
.addon__capacity-title-row {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.addon__capacity-info-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.addon__capacity-info {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: help;
  color: var(--gg-muted);
  display: inline-flex;
  align-items: center;
  opacity: 0.65;
  transition: opacity 0.15s, color 0.15s;
}
.addon__capacity-info:hover { opacity: 1; color: var(--gg-blue); }
.addon__capacity-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 320px;
  max-width: 90vw;
  padding: 0.85rem 1rem;
  background: #ffffff;
  color: #374151;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  font-size: 0.78rem;
  line-height: 1.45;
  z-index: 2147483647;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  text-align: left;
  font-weight: 500;
}
.addon__capacity-tip::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.08);
}
.addon__capacity-tip::after {
  content: '';
  position: absolute;
  top: calc(100% - 1px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #ffffff;
}
.addon__capacity-info-wrap:hover .addon__capacity-tip,
.addon__capacity-info:focus-visible + .addon__capacity-tip {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.addon__capacity-tip-head {
  display: block;
  font-size: 0.85rem;
  font-weight: 800;
  color: #111827;
  margin-bottom: 0.4rem;
  letter-spacing: -0.01em;
}
.addon__capacity-tip-body {
  display: block;
  margin: 0 0 0.6rem 0;
  color: #6b7280;
}
.addon__capacity-tip-body:last-child { margin-bottom: 0; }
.addon__capacity-tip-pill {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  padding: 0.3rem 0.55rem;
  border-radius: 4px;
  margin-bottom: 0.45rem;
}
.addon__capacity-tip-pill--open {
  background: linear-gradient(135deg, #2e5dff 0%, #002ABF 100%);
  color: #fff;
}
.addon__capacity-tip-pill--full {
  background: linear-gradient(135deg, #f59e0b 0%, #b85e0a 100%);
  color: #fff;
}

/* 2026-05-28: status pill shown only when capacity is full. Mirrors the
   `.tier__waitlist-pill` look so the same state reads identically across
   tier cards and addon cards. Pulsing dot + soft amber background, no CTA
   affordance — users add the addon via the addon card's normal checkbox,
   the pill is informational. Reuses the tier-waitlist-pulse and
   tier-waitlist-ring keyframes (no duplicate animations). */
.addon__waitlist-pill {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(184, 94, 10, 0.14), rgba(184, 94, 10, 0.06));
  border: 1px solid rgba(184, 94, 10, 0.4);
  color: #B85E0A;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: none;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.addon__waitlist-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #B85E0A;
  flex-shrink: 0;
  position: relative;
  animation: tier-waitlist-pulse 1.6s ease-in-out infinite;
}
.addon__waitlist-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid rgba(184, 94, 10, 0.4);
  animation: tier-waitlist-ring 1.6s ease-out infinite;
}

/* 2026-05-28: full-capacity addon wash. Mirrors `.tier--waitlist` so the
   state reads identically on tier cards and addon cards. Soft amber
   linear-gradient background + dashed amber border. Hover strengthens
   slightly to invite interaction (addon can still be added to the quote;
   the pill just signals it'll join the waitlist).

   v2: explicit border-width: 1.5px because the base `.addon` rule has
   border-width: 0, which left the dashed outline invisible. */
.addon.addon--full {
  background: linear-gradient(180deg, rgba(184, 94, 10, 0.06), rgba(184, 94, 10, 0.02));
  border-width: 1.5px;
  border-style: dashed;
  border-color: rgba(184, 94, 10, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.addon.addon--full:hover {
  border-color: rgba(184, 94, 10, 0.7);
  background: linear-gradient(180deg, rgba(184, 94, 10, 0.10), rgba(184, 94, 10, 0.04));
}
.addon.addon--full.addon--on {
  /* Selected + waitlisted: strengthen the border + flip to solid so the
     "selected" state reads clearly against the amber wash. Matches
     `.tier--waitlist.tier--active` exactly. */
  border-color: rgba(184, 94, 10, 0.85);
  border-style: solid;
}
/* Selected check on a waitlisted addon swaps the canonical blue premium
   tokens for the orange variant. Same scale + soft glow, amber palette. */
.addon.addon--full .addon__check.addon__check--on {
  background: var(--gg-premium-check-bg-orange);
  box-shadow: var(--gg-premium-check-shadow-orange);
}

/* Responsive: stack capacity below bar on narrow */
@media (max-width: 760px) {
  .addon__capacity {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .addon__capacity-copy { max-width: 100%; }
  .addon__main { padding-right: 2rem; }
  .addon__price-main { font-size: 1.3rem; }
}

/* ============================================================
   SERVICE "Added" remove pill (replaces the old +Add to plan toggle)
   ============================================================ */
.svc__remove {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border: 1.5px solid rgba(0, 42, 191, 0.25);
  border-radius: 999px;
  background: linear-gradient(180deg, #f4f7ff 0%, #e8eeff 100%);
  color: var(--gg-blue);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 4px 10px -4px rgba(0, 42, 191, 0.18);
  transition: all 0.15s ease;
}
.svc__remove svg { stroke-width: 3; }
.svc__remove:hover {
  background: linear-gradient(180deg, #fff5f0 0%, #ffe8e0 100%);
  border-color: rgba(184, 89, 10, 0.4);
  color: #b85e0a;
}
.svc__remove-x {
  font-size: 1.05rem;
  line-height: 1;
  font-weight: 800;
  margin-left: 0.15rem;
  opacity: 0.55;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.svc__remove:hover .svc__remove-x {
  opacity: 1;
  transform: scale(1.15);
}

/* Compact icon-only variant, sits inside .svc__head-right alongside the
   recommendation badge. .svc__head-right handles the absolute positioning
   so the badge + × button stay flex-aligned. */
.svc__remove--icon {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  background: transparent;
  border: 1.5px solid rgba(0,0,0,0.08);
  color: var(--gg-muted);
  box-shadow: none;
}
.svc__remove--icon:hover {
  background: linear-gradient(180deg, #fff5f0 0%, #ffe8e0 100%);
  border-color: rgba(184, 89, 10, 0.4);
  color: #b85e0a;
}
.svc__remove--icon .svc__remove-x {
  font-size: 1.25rem;
  margin: 0;
  opacity: 1;
  transform: none;
}
.svc__remove--icon:hover .svc__remove-x { transform: none; }

/* ── Summary list: addon remove button, slightly inset & lighter ── */
.summary__line-remove--addon {
  font-size: 0.85rem;
  margin-left: 0.85rem; /* indent to align under the parent service's × hover position */
  opacity: 0;
}
.summary__line:hover .summary__line-remove--addon { opacity: 1; }
/* Always-visible on touch devices since hover is unreliable */
@media (hover: none) {
  .summary__line-remove,
  .summary__line-remove--addon { opacity: 0.55; }
}

/* ── Per-service commitment label (badge under service description) ── */
.svc__commit-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.55rem;
  padding: 0.2rem 0.6rem 0.2rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #6b5f3a;
  background: rgba(202, 165, 73, 0.10);
  border: 1px solid rgba(202, 165, 73, 0.32);
  border-radius: 100px;
}
.svc__commit-meta svg { color: rgba(140, 110, 38, 0.9); }

/* ── Per-service commit picker ──
   Pill segmented control matching the brand's neumorphic family: soft grey
   recessed track holds raised glassy white pills (inactive) and one deep
   electric-blue pill (active). Inline "SAVE x%" chip, green on inactive,
   white-on-translucent inside the active pill. */
.svc__commit-bar {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.75rem;
  padding: 0.32rem;
  background: linear-gradient(180deg, #E1E3EB 0%, #ECEEF4 100%);
  border: 1px solid rgba(120, 130, 160, 0.22);
  border-radius: 100px;
  box-shadow:
    inset 0 1px 2px rgba(20, 28, 60, 0.10),
    0 1px 0 rgba(255, 255, 255, 0.85);
  flex-wrap: wrap;
}
/* Hide the inline "Minimum commitment" label, the reference design is just the pills. */
.svc__commit-bar-label { display: none; }
.svc__commit-bar-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.05rem;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: linear-gradient(180deg, #ffffff 0%, #f5f6fa 100%);
  border-radius: 100px;
  cursor: pointer;
  color: #2c3140;
  font: inherit;
  line-height: 1;
  white-space: nowrap;
  font-weight: 700;
  font-size: 0.85rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 1px rgba(20, 28, 60, 0.06),
    0 1px 1px rgba(20, 28, 60, 0.06);
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
.svc__commit-bar-btn:hover {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 1px rgba(20, 28, 60, 0.06),
    0 2px 4px rgba(20, 28, 60, 0.10);
}
.svc__commit-bar-btn.is-on {
  background: linear-gradient(180deg, #1f3df0 0%, #002ABF 100%);
  border-color: rgba(0, 14, 80, 0.5);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 1px rgba(0, 0, 0, 0.18),
    0 2px 6px rgba(0, 32, 160, 0.45),
    0 0 0 1px rgba(0, 24, 120, 0.15);
}
.svc__commit-bar-text {
  font-weight: 700;
  letter-spacing: -0.005em;
}
.svc__commit-bar-save {
  padding: 0.28rem 0.5rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #B85E0A;
  background: transparent;
  border-radius: 100px;
  line-height: 1;
}
.svc__commit-bar-btn.is-on .svc__commit-bar-save {
  color: #B85E0A;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* §20 — Recommended commit length indicator. Small brand-orange dot at the
   top-right of the commit button, surfaces only when qualifier-driven
   getRecommendedCommitLength() picks this option AND the option isn't already
   active. Hidden when 'is-on' (no need to highlight the user's own choice). */
.svc__commit-bar-btn { position: relative; }
.svc__commit-bar-btn .svc__commit-bar-rec {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gg-orange, #FC9D2B);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.85);
  pointer-events: none;
}

/* ── CHANNELS PANEL ── shown beneath tiers in each service card ── */
.channels-panel {
  margin-top: 1rem;
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F8FB 100%);
  /* When .glass-frame is also applied, its 22px ::before overlay paints
     the bevel. Keep a 1px hairline border for fallback contrast but stay
     subtle so the bevel reads through cleanly. */
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  display: grid;
  grid-template-columns: 1fr minmax(220px, 280px);
  gap: 1.25rem;
  align-items: stretch;
}
.channels-panel__main { min-width: 0; }
.channels-panel__head { margin-bottom: 0.75rem; }
.channels-panel__title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--gg-heading);
  letter-spacing: -0.01em;
}
.channels-panel__limit {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gg-muted);
  letter-spacing: 0;
}
.channels-panel__help {
  font-size: 0.82rem;
  color: var(--gg-muted);
  margin-top: 0.2rem;
}
.channels-panel__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.channel-tile {
  /* Unified blue accent for all channel tiles, matches GG brand blue.
     Override per-channel brand color is intentionally ignored here so every
     tile reads as part of the same set (consistent stroke, consistent check). */
  --ch-color: var(--gg-blue, #002ABF);
  --ch-stroke: #BFC9F0; /* soft blue stroke at rest */
  width: 60px; height: 60px;
  border-radius: 14px;
  border: 1.5px solid var(--ch-stroke);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.15s, box-shadow 0.15s, background 0.15s;
  padding: 0;
  position: relative;
}
.channel-tile__icon {
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.channel-tile__icon svg { width: 100%; height: 100%; }
.channel-tile__webp {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.channel-tile__brand {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.channel-tile:hover:not(.channel-tile--readonly) {
  border-color: var(--ch-color);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -8px rgba(0, 42, 191, 0.25);
}
.channel-tile--on {
  border-color: var(--ch-color);
  box-shadow: 0 0 0 1.5px var(--ch-color), 0 8px 20px -10px rgba(0, 42, 191, 0.35);
  background: #fff;
}
.channel-tile__check {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--gg-blue, #002ABF);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0, 42, 191, 0.4);
  z-index: 2;
}
.channel-tile__check svg { width: 10px; height: 10px; stroke-width: 3; }
.channel-tile--readonly { cursor: default; opacity: 0.95; }
.channel-tile--more {
  width: auto;
  padding: 0 0.85rem;
  flex-direction: column;
  gap: 0.15rem;
}
.channel-tile--more .channel-tile__icon { width: 16px; height: 16px; }
/* When the channel uses a webp icon (3D rendered), give it a bit more room */
.channel-tile__icon:has(.channel-tile__webp) { width: 36px; height: 36px; }
.channel-tile--more .channel-tile__icon:has(.channel-tile__webp) { width: 22px; height: 22px; }
/* When the channel uses a full-color brand mark image, scale similarly */
.channel-tile__icon:has(.channel-tile__brand) { width: 32px; height: 32px; }
.channel-tile__label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--gg-heading);
  line-height: 1.05;
  text-align: center;
}

/* Paid-ads "Daily Ad Spend" extra */
.channels-panel__extras {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px dashed rgba(184, 94, 10, 0.2);
}

/* 2026-05-22: LinkedIn profile-count stepper extras on Sales channels panel. */
.ch-li-extras {
  margin-top: 0.85rem;
  padding: 0.75rem 1rem;
  background: rgba(10, 102, 194, 0.05);
  border: 1px solid rgba(10, 102, 194, 0.18);
  border-radius: 12px;
}
.ch-li-extras__row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}
.ch-li-extras__icon {
  display: inline-flex;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  background: #fff;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.ch-li-extras__icon img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.ch-li-extras__label {
  flex: 1 1 220px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #111827;
  line-height: 1.3;
}
.ch-li-extras__info {
  display: inline-flex;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(10, 102, 194, 0.4);
  color: rgba(10, 102, 194, 0.7);
  background: transparent;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-style: italic;
  font-weight: 600;
  cursor: help;
  flex-shrink: 0;
}
.ch-li-extras__stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem;
  background: #fff;
  border: 1px solid rgba(10, 102, 194, 0.22);
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}
.ch-li-extras__btn {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 600;
  color: #0A66C2;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.ch-li-extras__btn:hover:not(:disabled) { background: rgba(10, 102, 194, 0.10); }
.ch-li-extras__btn:disabled { color: #9CA3AF; cursor: not-allowed; }
.ch-li-extras__count {
  min-width: 64px;
  text-align: center;
  font-size: 0.88rem;
  color: #111827;
}
.ch-li-extras__price {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  background: rgba(10, 102, 194, 0.07);
  border: 1px solid rgba(10, 102, 194, 0.22);
  border-radius: 999px;
  font-size: 0.82rem;
  color: #1f2a44;
}
.ch-li-extras__price strong {
  color: #0A66C2;
  margin-left: 0.25rem;
}

/* 2026-05-22: WhatsApp channel-tile tooltip wrapper. */
.channel-tile__tip-wrap {
  display: inline-flex;
}

/* 2026-05-22: WhatsApp channel tooltip. White card identical to the
   step-indicator tooltip, but transformed so the BOTTOM of the tooltip
   sits 12px above the tile's top edge (HoverPortalTip with
   placement='above' anchors at the element's TOP). Prevents the tooltip
   from overlapping the channel icons. */
.hover-portal-tip.channel-tile__tip {
  transform: translate(-50%, calc(-100% - 12px));
  background: #ffffff;
  color: #374151;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.45;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  width: 280px;
  max-width: 90vw;
  text-align: left;
  white-space: normal;
}
.channels-panel__extra-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gg-heading);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.channels-panel__extra-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(11, 24, 56, 0.1);
  color: var(--gg-muted);
  font-size: 0.65rem;
  font-style: italic;
  cursor: help;
  font-weight: 700;
}
.channels-panel__spend {
  margin-top: 0.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #fff;
  border: 1.5px solid rgba(11, 24, 56, 0.18);
  border-radius: 10px;
  padding: 0.4rem 0.65rem;
  max-width: 280px;
}
.channels-panel__spend:focus-within { border-color: var(--gg-blue); }
.channels-panel__spend-prefix {
  font-weight: 700;
  color: var(--gg-heading);
}
.channels-panel__spend input {
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-weight: 700;
  color: var(--gg-heading);
  width: 80px;
  padding: 0;
}
.channels-panel__spend input::placeholder { color: rgba(11, 24, 56, 0.35); font-weight: 500; }
.channels-panel__spend-suffix {
  font-size: 0.78rem;
  color: var(--gg-muted);
  font-weight: 500;
}

/* ── CAPACITY BAR (right side of channels panel) ── */
.channels-panel__cap {
  border-left: 1px dashed rgba(184, 94, 10, 0.2);
  padding-left: 1.25rem;
  display: flex;
  align-items: flex-start;
}
.capacity { width: 100%; }
.capacity__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}
.capacity__label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gg-heading);
}
.capacity__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--gg-blue);
}
.capacity__pill-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--gg-blue);
  position: relative;
  display: inline-block;
}
.capacity__pill-dot::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: #fff;
  border-radius: 50%;
}
.capacity__pill-dot::before {
  content: '✓';
  position: absolute;
  inset: 0;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gg-blue);
  z-index: 1;
  font-weight: 900;
}
.capacity--full .capacity__pill { color: #B85E0A; }
.capacity--full .capacity__pill-dot { background: #B85E0A; }
.capacity--full .capacity__pill-dot::before { color: #B85E0A; }
.capacity--limited .capacity__pill { color: var(--gg-blue); }
.capacity--limited .capacity__pill-dot { background: var(--gg-blue); }
.capacity--limited .capacity__pill-dot::before { color: var(--gg-blue); }

.capacity__track {
  /* Video element inside (.capacity-video) renders the full glassy track + fill.
     Wrapper just sizes the box. */
  height: 30px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.capacity__copy {
  margin-top: 0.5rem;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--gg-muted);
}

/* Responsive: stack channels and capacity on narrow screens */
@media (max-width: 880px) {
  .channels-panel {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }
  .channels-panel__cap {
    border-left: 0;
    border-top: 1px dashed rgba(184, 94, 10, 0.2);
    padding-left: 0;
    padding-top: 0.9rem;
  }
}

/* ── Client section glass card, mirrors .svc styling ── */
.client-section-card {
  position: relative;
  isolation: isolate;
  padding: 1.75rem 1.5rem 1.5rem;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 0;
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 1px 2px rgba(15,23,42,0.05),
    0 18px 36px -18px rgba(44, 51, 102, 0.2);
}
.client-section-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    url('glass-frame/top-left.webp')     top left     / 22px 22px no-repeat,
    url('glass-frame/top-right.webp')    top right    / 22px 22px no-repeat,
    url('glass-frame/bottom-left.webp')  bottom left  / 22px 22px no-repeat,
    url('glass-frame/bottom-right.webp') bottom right / 22px 22px no-repeat,
    url('glass-frame/top.webp')    22px top    / calc(100% - 44px) 22px repeat-x,
    url('glass-frame/bottom.webp') 22px bottom / calc(100% - 44px) 22px repeat-x,
    url('glass-frame/left.webp')   left 22px   / 22px calc(100% - 44px) repeat-y,
    url('glass-frame/right.webp')  right 22px  / 22px calc(100% - 44px) repeat-y;
  mix-blend-mode: multiply;
  z-index: 1;
}
.client-section-card::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(130% 90% at 50% -15%, rgba(255,255,255,0.5), transparent 55%);
  z-index: 0;
}
.client-section-card > * { position: relative; z-index: 2; }
@media (max-width: 720px) {
  .client-section-card { padding: 1.25rem 1rem 1rem; }
}

/* ── Intent reveal, appears below client cards once a type is picked ── */
.intent-reveal {
  margin-top: 1.25rem;
  padding: 1.5rem 1.5rem 1.25rem;
  border-radius: 18px;
  background: linear-gradient(168deg, rgb(237,236,235) -3%, rgb(247,247,247) 48.5856%, rgb(237,236,235) 117%);
  border: 0;
  box-shadow:
    inset 1px 1px 3px rgba(255, 255, 255, 0.7),
    inset -1px -1px 3px rgba(0, 0, 0, 0.06),
    rgba(214, 211, 208, 0.7) 10px 10px 26px 0,
    rgb(255, 255, 255) -10px -10px 26px 0,
    rgba(214, 211, 208, 0.5) -3px -3px 4px 0 inset,
    rgb(255, 255, 255) 2px 2px 8px 0 inset;
  animation: intentRevealIn 0.45s cubic-bezier(0.22, 0.9, 0.32, 1.18);
  transform-origin: top center;
}
@keyframes intentRevealIn {
  0% { opacity: 0; transform: translateY(-6px) scaleY(0.92); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scaleY(1); }
}
.intent-reveal__header { margin-bottom: 1rem; }
.intent-reveal__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gg-orange, #B85E0A);
  margin-bottom: 0.4rem;
}
.intent-reveal__eyebrow-arrow { font-size: 0.95rem; line-height: 1; opacity: 0.7; }
.intent-reveal__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gg-heading);
  letter-spacing: -0.015em;
  text-wrap: pretty;
}
.intent-reveal__title strong { font-weight: 800; font-style: italic; }
.intent-reveal__title sup { font-size: 0.55em; vertical-align: super; color: var(--gg-muted); }
.intent-reveal__hint {
  margin-top: 0.85rem;
  text-align: right;
  font-size: 0.78rem;
  color: var(--gg-muted);
}
.intent-reveal__hint a {
  color: var(--gg-blue);
  font-weight: 700;
  text-decoration: none;
}
.intent-reveal__hint a:hover { text-decoration: underline; }

.intent-grid {
  display: grid;
  gap: 0.85rem;
}
.intent-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.intent-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.intent-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1280px) {
  .intent-grid--cols-3,
  .intent-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .intent-grid--cols-2,
  .intent-grid--cols-3,
  .intent-grid--cols-4 { grid-template-columns: 1fr; }
}

.intent-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.1rem 0.9rem 0.95rem;
  border-radius: 14px;
  background: #FFFFFF;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  min-height: 100%;
  font-family: inherit;
}
.intent-card:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 42, 191, 0.35);
  box-shadow: 0 14px 28px -18px rgba(44, 51, 102, 0.28);
}
.intent-card--active {
  background: linear-gradient(168deg, #E8EFFF 0%, #DDE6FF 100%);
  border-color: var(--gg-blue, #002ABF);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 12px 26px -18px rgba(0, 42, 191, 0.45);
}
.intent-card__radio {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: #fff;
  border: 2px solid #E2E2E2;
  display: grid;
  place-items: center;
  color: #fff;
  z-index: 3;
  box-shadow:
    inset 1px 1px 3px rgba(0, 0, 0, 0.06),
    1px 1px 3px rgba(0, 0, 0, 0.06),
    -1px -1px 2px rgba(255, 255, 255, 0.7);
  transition: background 0.2s ease-out, border-color 0.2s ease-out,
              box-shadow 0.2s ease-out, transform 0.2s ease-out;
}
.intent-card:hover .intent-card__radio:not(.is-on) {
  border-color: #6B82D6;
  box-shadow:
    inset 1px 1px 3px rgba(0, 0, 0, 0.06),
    2px 2px 6px rgba(0, 0, 0, 0.08),
    -1px -1px 3px rgba(255, 255, 255, 0.8);
}
.intent-card__radio.is-on {
  background: linear-gradient(109deg, var(--gg-blue, #002ABF) 0%, var(--gg-blue, #002ABF) 100%);
  border-color: transparent;
  color: #fff;
  transform: scale(1.05);
  box-shadow: var(--gg-premium-check-shadow);
}
.intent-card__radio svg { stroke-width: 3; }

.intent-card__icon {
  width: 56px;
  height: 56px;
  margin: 0.25rem 0 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.intent-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.intent-card__title {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--gg-heading);
  letter-spacing: -0.01em;
  margin-bottom: 0.55rem;
  text-wrap: balance;
  line-height: 1.25;
}
.intent-card__badge {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem 0.3rem;
  margin-bottom: 0.55rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #FFE9B0, #F5C963);
  border: 1px solid rgba(184, 94, 10, 0.32);
  color: #6B3D00;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}
.intent-card__badge strong {
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: var(--gg-heading, #1A1F2E);
  text-transform: none;
}
.intent-card--active .intent-card__badge {
  background: linear-gradient(180deg, #FFD978, #F0B441);
  border-color: rgba(184, 94, 10, 0.45);
}
.intent-card__desc {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--gg-muted);
  text-wrap: pretty;
}
.intent-card__info {
  display: inline-flex;
  align-items: center;
  margin-left: 0.25rem;
  vertical-align: middle;
}
.intent-card__info-i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.62rem;
  font-weight: 800;
  font-style: italic;
  font-family: Georgia, serif;
  cursor: help;
}
.intent-card:hover .intent-card__info-i {
  background: rgba(0, 42, 191, 0.18);
  color: var(--gg-blue, #002ABF);
}

/* Summary, sub-intent line under plan meta */
.summary__plan-intent {
  margin-top: 0.45rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--gg-blue, #002ABF);
  background: rgba(0, 42, 191, 0.08);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 42, 191, 0.18);
  max-width: 100%;
}
.summary__plan-intent-arrow { opacity: 0.7; font-weight: 700; }

/* ── Summary monthly total: responsive sizing so large amounts
   (e.g. £10,822 / month) don't overflow the narrow aside.
   Uses fluid clamp() and a min-width:0 row so flex items can
   shrink, plus tabular-nums + ellipsis as a final guard. ── */
.summary__total-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 0.75rem;
  min-width: 0;
}
/* ── Setup fees row, shown inside .summary__total when oneTimeSubtotal > 0
   and there are also recurring monthly lines. Separated visually from the
   monthly total by a hairline, smaller font, amber-tinted label. ── */
.summary__total-row--setup {
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}
.summary__total-row--setup > div {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}
.summary__total-label--setup {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.summary__total-setup-eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #b45309;
}
.summary__total-setup-period {
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--gg-muted);
  letter-spacing: 0;
}
.summary__total-val--setup {
  font-size: clamp(0.88rem, 0.75rem + 0.5vw, 1.05rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #92400e;
  white-space: nowrap;
  line-height: 1.1;
}

.summary__total-row .summary__total-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
}
.summary__total-val {
  /* 2026-05-29: was clamp(1.35rem...) + overflow:hidden + text-overflow:
     ellipsis. The ellipsis was meant as a "final guard" against very wide
     totals overflowing the sidebar, but once totals started showing
     decimals (e.g. £3,991.84) the extra characters tipped past the
     trigger and the value got truncated to "£3,991..." even though there
     was visual room. Now: no ellipsis, lower font-clamp floor so even
     long totals (£999,999.99) shrink to fit, tabular-nums for a clean
     column of digits. */
  font-size: clamp(1.05rem, 0.85rem + 1.4vw, 2rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.summary__total-period {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: clamp(0.72rem, 0.65rem + 0.3vw, 0.85rem);
}
@media (max-width: 1100px) {
  .summary__total-val { font-size: clamp(1.3rem, 4.5vw, 1.7rem); }
}
@media (max-width: 760px) {
  .summary__total-val { font-size: clamp(1.6rem, 6vw, 2rem); }
}

.svc__head { align-items: flex-start !important; overflow: visible; }
/* ── Waitlist tooltip stacking-context fix ─────────────────────────────────
   .svc uses backdrop-filter which always creates a stacking context, trapping
   z-index:9999 inside the card. .tier:hover also creates a stacking context
   (via transform:translateY) and since .tiers is later in the DOM than
   .svc__head, it paints on top. Two-part fix:
   1. Give .svc__head an explicit z-index so it outranks .tier stacking contexts.
   2. When a waitlist tooltip is hovered, suppress the tier hover transform so
      no competing stacking contexts are created. ── */
.svc__head {
  overflow: visible;
  position: relative;
  z-index: 2;
}

.svc:has(.wl-tip-wrap:hover),
.svc:has(.wl-tip-wrap:focus-within) {
  isolation: auto;
  z-index: 50;
  position: relative;
}

/* Suppress tier hover-transform when tooltip is active so no competing
   stacking context can paint over the tooltip */
.svc:has(.wl-tip-wrap:hover) .tier,
.svc:has(.wl-tip-wrap:focus-within) .tier {
  transform: none !important;
}

/* Tiny optical bump so the icon's center matches the eyebrow's cap-height */
.svc__icon { margin-top: 0; }

/* ── Disabled-state explanation tooltips ──────────────────────────────────
   .dis-tip-wrap catches hover even over disabled buttons (disabled elements
   suppress pointer-events, but the wrapper span does not). A .dis-tip child
   fades in on wrapper hover/focus to explain why the item can't be clicked.
   ─────────────────────────────────────────────────────────────────────────── */
.dis-tip-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Step indicator wrapper needs full width to not break pill layout */
.dis-tip-wrap--step {
  display: contents;
}
.dis-tip-wrap--step .step-indicator__btn {
  pointer-events: none; /* let wrapper catch events */
}

.dis-tip {
  /* White card style, matches .wl-tip for visual consistency */
  position: absolute;
  left: 50%;
  z-index: 2147483647;
  width: 220px;
  padding: 0.65rem 0.8rem;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.13);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.16s ease, transform 0.16s ease;
  text-align: left;
  font-size: 0.73rem;
  line-height: 1.45;
  font-weight: 400;
  color: #4b5563;
  white-space: normal;
  letter-spacing: 0;
  text-transform: none;
}

/* Above variant, tooltip appears above the element */
.dis-tip--above {
  bottom: calc(100% + 9px);
  top: auto;
  transform: translateX(-50%) translateY(-4px);
}
.dis-tip--above::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.09);
}
.dis-tip--above::after {
  content: '';
  position: absolute;
  top: calc(100% - 1px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #ffffff;
}

/* Below variant, tooltip appears below the element */
.dis-tip--below {
  top: calc(100% + 9px);
  bottom: auto;
  transform: translateX(-50%) translateY(4px);
}
.dis-tip--below::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.09);
}
.dis-tip--below::after {
  content: '';
  position: absolute;
  bottom: calc(100% - 1px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: #ffffff;
}

/* Show on hover/focus of the wrapper */
.dis-tip-wrap:hover .dis-tip,
.dis-tip-wrap:focus-within .dis-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Step variant, hover on the li ancestor since btn is pointer-events:none */
.step-indicator__item--locked:hover .dis-tip,
.step-indicator__item--locked:focus-within .dis-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Page 3 (Ready to launch) summary: sticky + viewport-capped ─────────────
   The right-column summary on Step 6 stays in view as the user scrolls the
   form. Capped to viewport height so it never stretches past the visible
   area. The inner .summary__list scrolls when its content overflows. */
.youreset__grid { align-items: start; }
.youreset__summary {
  align-self: start;
  min-height: 0;
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
}
.youreset__summary .summary {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 2rem);
}
.youreset__summary .summary__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* subtle inset shadow when scrollable so users see there's more below */
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.18) transparent;
}
.youreset__summary .summary__list::-webkit-scrollbar { width: 6px; }
.youreset__summary .summary__list::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.18);
  border-radius: 3px;
}
.youreset__summary .summary__list::-webkit-scrollbar-track { background: transparent; }
.youreset__summary .summary__list-title {
  position: sticky; top: 0; z-index: 1;
  background: linear-gradient(168deg, #FFFFFF 0%, #FAF6EE 100%);
  margin: -0.85rem -1rem 0.5rem;
  padding: 0.85rem 1rem 0.5rem;
}
@media (max-width: 1100px) {
  /* Stacked layout, let summary grow naturally */
  .youreset__summary .summary { height: auto; max-height: none; }
  .youreset__summary .summary__list { overflow: visible; max-height: none; }
  /* 2026-05-29: .summary__scroll (Sprint 5 inner wrapper) was the missing
     piece in this mobile-disable rule. On mobile it kept `overflow-y: auto`
     + `overscroll-behavior: contain`, which trapped touch swipes even when
     there was no actual content to scroll. Result: the user had to retry
     swiping to scroll past the sidebar. Now disabled on mobile to match
     siblings — page scrolls naturally end-to-end. */
  .youreset__summary .summary__scroll {
    overflow: visible !important;
    max-height: none !important;
    overscroll-behavior: auto !important;
  }
}

/* "Excludes VAT" caption beneath the monthly total. */
.summary__total-vat {
  margin-top: 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gg-muted);
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.summary__total-vat::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
}

/* Info-icon + hover tooltip on the "Monthly total" label.
   Anchored to the LEFT of the summary card so the 280px popover
   never clips off the right edge of the narrow summary column.
   The tooltip needs to escape .summary__total's overflow:hidden
   (used to mask the 9-slice frame), so we override it on the
   ancestor chain whenever the info-wrap is hovered. */
.summary__total-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
/* Allow tooltip to escape both the total card and the val ellipsis box. */
.summary__total { overflow: visible; }
.summary__total-row > div:first-child { overflow: visible; }
.summary__total-info-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.summary__total-info {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: help;
  color: var(--gg-muted);
  display: inline-flex;
  align-items: center;
  opacity: 0.6;
  transition: opacity 0.15s, color 0.15s;
}
.summary__total-info:hover { opacity: 1; color: var(--gg-blue); }
.summary__total-tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: -8px;
  width: 280px;
  max-width: 90vw;
  padding: 0.85rem 1rem;
  background: #ffffff;
  color: #374151;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  font-size: 0.78rem;
  line-height: 1.5;
  z-index: 2147483647;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  text-align: left;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.summary__total-tip strong { color: #111827; font-weight: 700; }
.summary__total-tip::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 15px;
  border: 7px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.08);
}
.summary__total-tip::after {
  content: '';
  position: absolute;
  top: calc(100% - 1px);
  left: 16px;
  border: 6px solid transparent;
  border-top-color: #ffffff;
}
.summary__total-info-wrap:hover .summary__total-tip,
.summary__total-info:focus-visible + .summary__total-tip {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.summary__total-tip-head {
  display: block;
  font-size: 0.85rem;
  font-weight: 800;
  color: #111827;
  margin-bottom: 0.4rem;
  letter-spacing: -0.01em;
}
.summary__total-tip-body {
  display: block;
  margin: 0;
  color: #6b7280;
}

/* ============================================================
   ENTERPRISE NOTICE, shown in place of channels + addons when
   user picks the Enterprise tier on a service. Custom scope is
   negotiated 1:1, so we don't surface the tweakable controls.
   ============================================================ */
.svc__ent-notice {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 14px;
  background: linear-gradient(168deg, rgba(255, 217, 179, 0.55) 0%, rgba(255, 240, 224, 0.85) 100%);
  border: 1px dashed rgba(184, 94, 10, 0.3);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.svc__ent-notice-eyebrow {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gg-orange-deep, #b8590a);
}
.svc__ent-notice-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--gg-heading);
  margin-top: 0.2rem;
}
.svc__ent-notice-desc {
  font-size: 0.85rem;
  color: var(--gg-body);
  margin-top: 0.25rem;
  max-width: 560px;
  line-height: 1.4;
}

/* ============================================================
   WAITLIST SUMMARY LINE, services at full capacity show a
   "Waiting list" pill instead of a price. They contribute £0
   to the calculator total.
   ============================================================ */
.summary__line--waitlist .summary__line-val {
  font-size: 0.7rem;
  font-weight: 800;
}
.summary__line-waitlist-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.55rem 0.22rem 0.5rem;
  border-radius: 999px;
  background: rgba(255, 217, 179, 0.7);
  border: 1px solid rgba(184, 94, 10, 0.35);
  color: #b8590a;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.62rem;
  font-weight: 800;
  white-space: nowrap;
}
.summary__line-waitlist-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b8590a;
  box-shadow: 0 0 0 2px rgba(184, 89, 10, 0.18);
  animation: waitlist-pulse 1.6s ease-in-out infinite;
}
@keyframes waitlist-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}


/* ══════════════════════════════════════════════════════════════════════════
   WAITING LIST TOOLTIPS, shared across three contexts:
     .wl-tip--above   tier card pill  (caret pointing down)
     .wl-tip--below   service header  (caret pointing up)
     .wl-tip--left    summary line    (caret pointing right, opens leftward)
   Triggered by hover/focus on the .wl-tip-wrap parent.
   White bg, subtle border, soft shadow, same language as all other tooltips.
   ══════════════════════════════════════════════════════════════════════════ */
.wl-tip-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: default;
}
.wl-tip {
  position: absolute;
  z-index: 2147483647;
  width: 240px;
  padding: 0.75rem 0.85rem;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.13);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.16s ease, transform 0.16s ease;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.73rem;
  line-height: 1.45;
  font-weight: 400;
  color: #374151;
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
}
.wl-tip-wrap:hover .wl-tip,
.wl-tip-wrap:focus-within .wl-tip {
  opacity: 1;
  pointer-events: auto;
}
.wl-tip__head {
  font-size: 0.78rem;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.01em;
}
.wl-tip__body {
  color: #4b5563;
}
.wl-tip__meta {
  font-size: 0.67rem;
  font-weight: 600;
  color: #b45309;
  padding-top: 0.15rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  margin-top: 0.1rem;
}

/* ── Above variant (tier card): opens upward, caret points down ── */
.wl-tip--above {
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
}
.wl-tip-wrap:hover .wl-tip--above,
.wl-tip-wrap:focus-within .wl-tip--above {
  transform: translateX(-50%) translateY(0);
}
.wl-tip--above::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.09);
}
.wl-tip--above::after {
  content: '';
  position: absolute;
  top: calc(100% - 1px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #ffffff;
}

/* ── Below variant (service header pill): opens downward, caret points up ── */
.wl-tip--below {
  top: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
}
.wl-tip-wrap:hover .wl-tip--below,
.wl-tip-wrap:focus-within .wl-tip--below {
  transform: translateX(-50%) translateY(0);
}
.wl-tip--below::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.09);
}
.wl-tip--below::after {
  content: '';
  position: absolute;
  bottom: calc(100% - 1px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: #ffffff;
}

/* ── Left variant (summary line): opens to the left, caret points right ── */
.wl-tip--left {
  top: 50%;
  right: calc(100% + 9px);
  left: auto;
  transform: translateY(-50%) translateX(4px);
}
.wl-tip-wrap:hover .wl-tip--left,
.wl-tip-wrap:focus-within .wl-tip--left {
  transform: translateY(-50%) translateX(0);
}
.wl-tip--left::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  border: 7px solid transparent;
  border-left-color: rgba(0, 0, 0, 0.09);
}
.wl-tip--left::after {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(100% - 1px);
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-left-color: #ffffff;
}

/* ── Context tweaks ── */
/* Summary line: pill wraps in a flex val cell, ensure overflow visible */
.summary__line-waitlist-pill-wrap { overflow: visible; }
/* Tier card: ensure the wrap doesn't break tier price layout */
.tier__waitlist-pill-wrap { overflow: visible; }
/* Service header: ensure overflow visible for tooltip escape */
.svc__waitlist-pill-wrap { overflow: visible; }
/* ============================================================
   WAITLIST TOAST, bottom-right notification shown when user
   selects a service that's at full capacity. Self-dismisses
   after 8s; can also be dismissed by the user.
   ============================================================ */
.waitlist-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  width: min(420px, calc(100vw - 3rem));
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 1rem 1rem 1rem 1.1rem;
  border-radius: 16px;
  background: linear-gradient(160deg, #fff 0%, #fff8f1 100%);
  border: 1px solid rgba(184, 94, 10, 0.25);
  box-shadow:
    0 10px 30px -8px rgba(20, 20, 30, 0.18),
    0 4px 10px -4px rgba(184, 94, 10, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  animation: waitlist-toast-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes waitlist-toast-in {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.waitlist-toast__icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, #ffd9b3 0%, #ffb074 100%);
  color: #7a3c08;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.waitlist-toast__body {
  flex: 1 1 auto;
  min-width: 0;
}
.waitlist-toast__title {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--gg-heading);
  letter-spacing: -0.005em;
}
.waitlist-toast__copy {
  font-size: 0.8rem;
  color: var(--gg-body);
  line-height: 1.45;
  margin-top: 0.3rem;
}
.waitlist-toast__meta {
  font-size: 0.72rem;
  color: var(--gg-muted);
  margin-top: 0.45rem;
  font-style: italic;
}
.waitlist-toast__close {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--gg-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.waitlist-toast__close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--gg-heading);
}

/* ── Qualifier validation variant, same chrome, list of missing Qs ── */
.waitlist-toast__list {
  margin: 0.4rem 0 0.5rem;
  padding-left: 1.1rem;
  font-size: 0.78rem;
  color: var(--gg-body);
  line-height: 1.5;
}
.waitlist-toast__list li { margin-bottom: 0.15rem; }
.waitlist-toast__jump {
  margin-top: 0.2rem;
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gg-orange-deep, #b85e0a);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.waitlist-toast__jump:hover {
  color: var(--gg-orange, #f59e0b);
}

/* ── ROLES PANEL, Dedicated Resources per-tier role catalogue ──
   Reuses .channels-panel chrome for the outer container so spacing/heading
   matches; the tile grid is its own thing because role tiles are text-led
   instead of icon-led. */
.roles-panel { grid-template-columns: 1fr; }
.roles-panel .channels-panel__main { width: 100%; }
.roles-panel__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 0.55rem;
}
@media (max-width: 980px) {
  .roles-panel__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .roles-panel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.role-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.35rem;
  width: 100%;
  padding: 0.95rem 1rem;
  border-radius: 14px;
  border: 0;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--gg-heading, #0B1838);
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 1px 2px rgba(15,23,42,0.04),
    0 8px 18px -10px rgba(44, 51, 102, 0.15);
}
/* Frosted glass-frame bevel overlay, same trick as .addon and .tier:
   eight WebP slices composited with mix-blend-mode: multiply give the
   tile a subtle inner border halo that reads as soft pressed glass. */
.role-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    url('glass-frame/top-left.webp')     top left     / 22px 22px no-repeat,
    url('glass-frame/top-right.webp')    top right    / 22px 22px no-repeat,
    url('glass-frame/bottom-left.webp')  bottom left  / 22px 22px no-repeat,
    url('glass-frame/bottom-right.webp') bottom right / 22px 22px no-repeat,
    url('glass-frame/top.webp')    22px top    / calc(100% - 44px) 22px repeat-x,
    url('glass-frame/bottom.webp') 22px bottom / calc(100% - 44px) 22px repeat-x,
    url('glass-frame/left.webp')   left 22px   / 22px calc(100% - 44px) repeat-y,
    url('glass-frame/right.webp')  right 22px  / 22px calc(100% - 44px) repeat-y;
  mix-blend-mode: multiply;
  z-index: 1;
}
.role-tile > * { position: relative; z-index: 2; }
.role-tile:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 1px 2px rgba(15,23,42,0.04),
    0 12px 24px -10px rgba(44, 51, 102, 0.22);
}
.role-tile--on {
  background: linear-gradient(180deg, rgba(244,247,255,0.95), rgba(232,238,255,0.8));
  box-shadow:
    0 0 0 2px rgba(0, 42, 191, 0.3) inset,
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 12px 24px -10px rgba(0, 42, 191, 0.22);
}
.role-tile__name {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  /* Allow up to two lines for long names like "Marketing & Ops Coordinator". */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-right: 38px; /* leave space for the check badge */
}
.role-tile__price {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gg-muted, #5B6478);
  letter-spacing: 0;
}
.role-tile--on .role-tile__price {
  color: var(--gg-blue, #002ABF);
}
.role-tile__check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px; height: 22px; border-radius: 6px;
  border: 2px solid #E2E2E2;
  background: #fff;
  display: grid; place-items: center;
  color: #fff;
  flex-shrink: 0;
  z-index: 3;
  box-shadow:
    inset 1px 1px 3px rgba(0, 0, 0, 0.06),
    1px 1px 3px rgba(0, 0, 0, 0.06),
    -1px -1px 2px rgba(255, 255, 255, 0.7);
  transition: background 0.2s ease-out, border-color 0.2s ease-out,
              box-shadow 0.2s ease-out, transform 0.2s ease-out;
}
.role-tile:hover:not(.role-tile--on) .role-tile__check {
  border-color: #6B82D6;
  box-shadow:
    inset 1px 1px 3px rgba(0, 0, 0, 0.06),
    2px 2px 6px rgba(0, 0, 0, 0.08),
    -1px -1px 3px rgba(255, 255, 255, 0.8);
}
.role-tile--on .role-tile__check {
  background: linear-gradient(109deg, var(--gg-blue, #002ABF) 0%, var(--gg-blue, #002ABF) 100%);
  border-color: transparent;
  color: #fff;
  transform: scale(1.05);
  box-shadow: var(--gg-premium-check-shadow);
}
.role-tile__check svg { stroke-width: 3; }


/* ============================================================
   MOBILE RESPONSIVE PASS, applied across the calculator
   ------------------------------------------------------------
   Breakpoints used:
     ≤1100px : 2-col app shell already stacks (existing rule)
     ≤880px  : channels-panel stacks (existing); we treat this as "tablet portrait"
     ≤720px  : phones, main mobile breakpoint
     ≤480px  : small phones, tighten further
   This file is the LAST stylesheet loaded, so rules here win.
   ============================================================ */

/* ── Tablet & below: tier grid keeps 2 cols max so cards aren't squashed ── */
@media (max-width: 880px) {
  /* Override the inline style="grid-template-columns: repeat(N, 1fr)" set in JSX */
  .tiers[style] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ── Phones: full mobile layout pass ── */
@media (max-width: 720px) {
  /* Page chrome ─────────────────────────────────────── */
  .container { padding: 0 0.85rem; }
  .page { padding-top: 0.5rem !important; padding-bottom: 6rem; }
  body { padding-bottom: 0; }

  /* App shell stacks (the parent rule kicks in at 1100px already, this is reinforcement) */
  .calc__grid { grid-template-columns: 1fr !important; gap: 1.25rem; }

  /* Mobile: stack the summary BELOW the main content instead of hiding it.
     Users need to see the price breakdown and reach the Next button on every
     build step. The mobile bar still shows total + a chevron-to-sheet, but
     the inline summary is required for the Next button to be visible.

     Flatten `.calc__main` with `display: contents` so its children become
     layout siblings of `.summary-wrap`. That lets us reorder via flex `order`
     to put `.page__foot` (Back + Step counter) at the VERY bottom, below the
     summary card + Next button, which is the expected mobile order. */
  .calc__grid {
    display: flex !important;
    flex-direction: column;
    min-width: 0;
  }
  .calc__main {
    display: contents !important;
  }
  /* Flex items default to `min-width: auto` which lets them expand to
     their content's intrinsic minimum size, that was causing .build-section
     (and its .svc cards) to overflow the viewport. Force min-width:0 + 100%
     so each child shrinks to the column width. */
  .calc__main > .build-section,
  .calc__main > section.build-section,
  .calc__main > * {
    order: 1;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .summary-wrap {
    order: 2;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .calc__main > .page__foot {
    order: 3;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  /* .svc cards inside .build-section need the same shrink permission so
     they don't push their parent beyond the viewport. */
  .build-section .svc,
  .svc-list .svc {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  /* Role grid: switch to single column on narrow phones so 2-up tiles can't
     individually exceed the parent and clip role names ("SEO Specialist"
     becoming "SEO Spec..."). The existing 720px rule sets 2 cols which is
     too tight at ≤400px. */
  .roles-panel__grid {
    grid-template-columns: 1fr !important;
  }
  .role-tile { min-width: 0 !important; }
  .role-tile__name { word-break: break-word; }

  .summary-wrap {
    display: block !important;
    position: static !important;
    max-height: none !important;
    width: 100% !important;
    margin-top: 1.25rem !important;
  }
  .summary-wrap > .summary {
    max-height: none !important;
    width: 100% !important;
  }
  /* Next button: full-width on mobile, sits below the cart breakdown. */
  .summary-next-wrap,
  .summary-next-btn { width: 100% !important; }
  .summary-next-btn {
    justify-content: center !important;
    margin-top: 0.85rem !important;
  }
  /* Page-foot (Back + step counter) sits last in the column with some breathing
     room above + extra bottom padding so the sticky mobile-bar doesn't cover it. */
  .calc__main > .page__foot {
    margin-top: 1.5rem !important;
    margin-bottom: 5.5rem !important;
  }

  /* Service cards ───────────────────────────────────── */
  .svc { padding: 1rem !important; border-radius: 16px !important; }
  .svc__head { gap: 0.75rem; }
  .svc__icon { width: 44px !important; height: 44px !important; border-radius: 11px !important; }
  .svc__icon img { width: 26px !important; height: 26px !important; }
  .svc__cat { font-size: 0.62rem !important; letter-spacing: 0.1em !important; }
  .svc__title { font-size: 0.98rem !important; gap: 0.4rem !important; }
  .svc__desc { font-size: 0.8rem !important; }
  /* Move the × close button slightly so it doesn't crowd the title */
  .svc__remove--icon { top: 0.6rem !important; right: 0.6rem !important; width: 28px !important; height: 28px !important; }

  /* Commit-bar pills wrap & become smaller, use CSS grid (3 equal columns)
     instead of flex-basis 33%, so all three months always sit on a single row
     no matter the rounding/gap math. Previous flex layout caused the 12-month
     button to wrap onto its own row at 390px viewport because basis × 3 + gaps
     just barely exceeded the container's content box.
     Each button stacks "12 months" on top + "SAVE 40%" chip below, so the
     SAVE chip can't clip past the column edge on narrow phones. */
  .svc__commit-bar {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.25rem;
    width: 100%;
    margin-top: 0.85rem;
    /* Container itself is pill-shaped; rounded corners require enough vertical
       breathing room for the stacked button content. */
    border-radius: 18px;
  }
  .svc__commit-bar-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    justify-content: center;
    gap: 0.25rem !important;
    padding: 0.55rem 0.3rem !important;
    font-size: 0.78rem !important;
    min-width: 0;
    /* Buttons fit the grid cell exactly. */
    border-radius: 14px !important;
  }
  .svc__commit-bar-text {
    line-height: 1.15;
  }
  .svc__commit-bar-save {
    font-size: 0.58rem !important;
    padding: 0.16rem 0.4rem !important;
    line-height: 1;
  }

  /* Tier label */
  .svc__tier-label { font-size: 0.72rem !important; margin-top: 1.1rem !important; }

  /* Tiers grid, 1 column on phone (cards stack vertically, full-width) */
  .tiers,
  .tiers[style] {
    grid-template-columns: 1fr !important;
    gap: 0.6rem !important;
  }
  .tier { padding: 1rem 1.1rem !important; min-height: auto !important; border-radius: 14px !important; }
  .tier__name { font-size: 1rem !important; }
  .tier__blurb { font-size: 0.78rem !important; }
  .tier__price { font-size: 1.55rem !important; }
  .tier--ent .tier__price { font-size: 1.05rem !important; }
  /* Hide tier features list to keep cards compact on mobile, they're already in the desktop view */
  .tier__features { display: none !important; }

  /* Channels panel, stacks (existing rule does this at 880); just tune internals */
  .channels-panel { padding: 0.9rem !important; gap: 0.75rem !important; }
  .channels-panel__head h3,
  .channels-panel__title { font-size: 0.95rem !important; }
  .channels-panel__sub,
  .channels-panel__hint { font-size: 0.78rem !important; }

  /* Roles grid, already 2 cols at 720px (existing rule), tighten padding */
  .roles-panel__grid { gap: 0.5rem !important; }
  .role-tile { padding: 0.7rem 0.6rem !important; }
  .role-tile__name { font-size: 0.82rem !important; }

  /* Capacity bar (.capacity & .addon__capacity) ─ already stacks at 760 */
  .capacity__head { flex-wrap: wrap; gap: 0.4rem; }
  .capacity__copy { font-size: 0.78rem !important; }

  /* Addons disclosure ───────────────────────────────── */
  .svc__addons-toggle { padding: 0.75rem 0.85rem !important; font-size: 0.88rem !important; }
  .svc__addons-disc { padding: 0.85rem !important; }
  .svc__addons-grid { grid-template-columns: 1fr !important; gap: 0.6rem !important; }
  .addon { padding: 0.85rem !important; border-radius: 14px !important; }
  .addon__title { font-size: 0.92rem !important; }
  .addon__desc { font-size: 0.8rem !important; }
  .addon__price-main { font-size: 1.1rem !important; }
  .addon-group__title { font-size: 0.78rem !important; }
  /* Reduce check-mark size */
  .addon__check { width: 22px !important; height: 22px !important; }

  /* Recommended / Popular ribbon: keep the desktop floating style on mobile
     (absolute, top-left, with the orange fold extending past the card edge).
     Apply the same top padding to ALL addon cards (featured or not) so the
     title baseline lines up across the column, featured cards reserve the
     space for the ribbon, non-featured cards just leave it empty. This keeps
     card structure visually consistent on mobile. */
  .svc__addons-disc .addon,
  .svc__addons-disc .addon--featured {
    padding-top: 2.5rem !important;
  }
  .svc__addons-disc .addon__ribbon-img {
    /* Slightly smaller than desktop's 28px so it fits the tighter mobile cards
       while still floating past the left edge like the reference. */
    height: 24px !important;
  }

  /* Addon capacity sub-block (per-card capacity)
     Mobile fix: the desktop grid (auto auto 1fr) + .addon__capacity-track's
     fixed 240/280px width were forcing each addon card to be ~360-380px wide,
     overflowing the 320px parent on narrow phones. Stack the three cells in
     one column and let the track shrink to fit. */
  .addon__capacity {
    padding: 0.7rem !important;
    gap: 0.55rem !important;
    grid-template-columns: 1fr !important;
  }
  .addon__capacity-label {
    min-width: 0 !important;
  }
  .addon__capacity-track {
    height: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .addon__capacity-copy { font-size: 0.75rem !important; }
  /* Capacity tooltip, hardcoded 320px width forced parent cards to overflow.
     Cap it at the viewport so it never extends past the screen edge. */
  .addon__capacity-tip {
    width: min(280px, calc(100vw - 2rem)) !important;
    max-width: calc(100vw - 2rem) !important;
  }

  /* Intent picker ──────────────────────────────────── */
  .intent-grid { gap: 0.6rem !important; }
  .intent-card { padding: 1rem !important; }
  .intent-card__title { font-size: 0.95rem !important; }
  .intent-card__desc { font-size: 0.8rem !important; }
  .client-section-card { padding: 1rem 0.85rem 0.85rem !important; border-radius: 18px !important; }

  /* Section headings */
  .section-head { margin-bottom: 1.25rem !important; }
  .section-head h2,
  .section-head__title { font-size: 1.4rem !important; line-height: 1.15 !important; }
  .section-head p,
  .section-head__sub { font-size: 0.92rem !important; }

  /* Welcome-back banner */
  .home-cart-preview__inner { gap: 0.75rem !important; padding: 0.85rem !important; }

  /* Tweaks panel, keep at edge but smaller on phones */
  .tweaks-panel,
  [class*="tweaks-panel"] {
    width: calc(100vw - 1.5rem) !important;
    max-width: 320px !important;
    right: 0.75rem !important;
    bottom: 5rem !important;  /* clear of the mobile sticky bar */
    max-height: 70vh !important;
    overflow-y: auto !important;
  }
}

/* ── Small phones (≤480) ── */
@media (max-width: 480px) {
  .container { padding: 0 0.65rem; }
  .svc { padding: 0.85rem !important; }
  .svc__head { gap: 0.6rem; }
  .svc__icon { width: 38px !important; height: 38px !important; }
  .svc__icon img { width: 22px !important; height: 22px !important; }
  .svc__title { font-size: 0.92rem !important; }
  .svc__desc { font-size: 0.76rem !important; }

  /* Commit bar at full width 1 row of 3 */
  .svc__commit-bar-btn { padding: 0.45rem 0.55rem !important; font-size: 0.72rem !important; }

  .tier { padding: 0.85rem 0.95rem !important; }
  .tier__price { font-size: 1.35rem !important; }

  /* Compact section heads */
  .section-head h2,
  .section-head__title { font-size: 1.2rem !important; }
}

/* ── Mobile sticky bar visibility ──
   The base rule (assets/app.css) shows the bar at ≤880px. Summary stacks
   inline (see fix above at line 2685) rather than being hidden, so the
   Next button + price breakdown remain reachable.
   Add bottom padding to the page so the sticky mobile-bar doesn't cover
   the Next button at the bottom of the summary. */
@media (max-width: 880px) {
  .mobile-bar { z-index: 60 !important; }
  /* Page bottom padding now sits on .page__foot (the reordered last child).
     `.calc__main` uses `display: contents` so its own padding is ignored. */
}

/* ───────────────────────────────────────────────────────────────────
   STEP INDICATOR, top-of-page progress strip
   References the airline booking pattern: rounded "pill" with 3D icon,
   numbered, label below; connector lines between steps; current step is
   filled accent, completed steps show a checkmark, future steps muted.
   ─────────────────────────────────────────────────────────────────── */
/* Glassmorphism step indicator, frosted translucent tray with
   backdrop blur, subtle white border, soft shadow. */
.step-indicator {
  margin: 0 0 1.5rem 0;
  padding: 0.9rem 1.1rem 0.75rem;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 16px;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow:
    0 8px 24px rgba(17, 24, 39, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: padding 220ms cubic-bezier(.4,.0,.2,1),
              border-radius 220ms cubic-bezier(.4,.0,.2,1),
              box-shadow 220ms ease,
              background-color 220ms ease;
}
.step-indicator__list {
  display: flex;
  align-items: flex-start;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}
.step-indicator__item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  /* Required so .dis-tip-wrap--step (display:contents) tooltips
     anchor correctly to the step bubble, not body. Without this
     the locked-step tooltips silently render at the wrong place. */
  position: relative;
}
.step-indicator__btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  font: inherit;
  color: inherit;
  min-width: 92px;
  transition: opacity 160ms ease;
}
.step-indicator__btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
/* Glass bubble, base (upcoming) state */
.step-indicator__bubble {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 2px 6px rgba(17, 24, 39, 0.06);
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.step-indicator__btn:hover:not(:disabled) .step-indicator__bubble {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.85);
}
.step-indicator__icon-wrap {
  position: relative;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-indicator__icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(0.85) brightness(0.85);
  opacity: 0.55;
  transition: filter 220ms ease, opacity 220ms ease;
}
.step-indicator__num {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #9ca3af;
  text-transform: uppercase;
  transition: color 200ms ease;
}
.step-indicator__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #6b7280;
  text-align: center;
  line-height: 1.15;
  max-width: 110px;
  transition: color 200ms ease;
}
.step-indicator__check {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gg-blue, #002ABF);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: none;
}


/* ── Locked step: muted + lock badge on bubble ── */
.step-indicator__item--locked .step-indicator__btn {
  opacity: 0.45;
  cursor: not-allowed;
}
.step-indicator__item--locked .step-indicator__bubble {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: none;
}
.step-indicator__item--locked .step-indicator__icon {
  filter: grayscale(1);
  opacity: 0.5;
}
.step-indicator__lock {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #6b7280;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
/* ── Current step: tinted glass with accent border ── */
.step-indicator__item--current .step-indicator__bubble {
  background: rgba(214, 224, 255, 0.55);
  border-color: rgba(0, 42, 191, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 4px 12px rgba(0, 42, 191, 0.18);
  transform: scale(1.04);
}
.step-indicator__item--current .step-indicator__icon {
  filter: none;
  opacity: 1;
}
.step-indicator__item--current .step-indicator__num {
  color: var(--gg-blue, #002ABF);
}
.step-indicator__item--current .step-indicator__label {
  color: #111;
  font-weight: 700;
}

/* ── Complete step: brighter glass, vivid icon, blue check ── */
.step-indicator__item--complete .step-indicator__bubble {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 2px 6px rgba(17, 24, 39, 0.06);
}
.step-indicator__item--complete .step-indicator__icon {
  filter: none;
  opacity: 1;
}
.step-indicator__item--complete .step-indicator__num {
  color: var(--gg-blue, #002ABF);
}
.step-indicator__item--complete .step-indicator__label {
  color: #111;
  font-weight: 600;
}

/* ── Upcoming: dimmed, no decoration ── */
.step-indicator__item--upcoming .step-indicator__btn {
  opacity: 0.7;
}

/* ── Connectors between steps: translucent glass line ── */
.step-indicator__connector {
  flex: 1;
  height: 3px;
  margin: 26px 0.35rem 0;  /* aligns vertically with bubble center */
  border-radius: 999px;
  min-width: 14px;
  position: relative;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.step-indicator__connector--complete {
  background: linear-gradient(90deg, rgba(0, 42, 191, 0.85) 0%, rgba(0, 42, 191, 0.55) 100%);
  border-color: rgba(0, 42, 191, 0.35);
  box-shadow: 0 1px 4px rgba(0, 42, 191, 0.25);
}

/* ── Mobile: tighter, hide labels for non-current steps, scrollable ── */
@media (max-width: 760px) {
  .step-indicator {
    padding: 0.75rem 0.5rem 0.6rem;
    margin-bottom: 1rem;
  }
  .step-indicator__list { overflow-x: auto; gap: 0; padding: 0 0.25rem; }
  .step-indicator__btn { min-width: 56px; gap: 0.3rem; }
  .step-indicator__bubble { width: 40px; height: 40px; }
  .step-indicator__icon-wrap { width: 24px; height: 24px; }
  .step-indicator__label {
    font-size: 0.65rem;
    max-width: 70px;
  }
  .step-indicator__item--upcoming .step-indicator__label,
  .step-indicator__item--complete .step-indicator__label {
    display: none;
  }
  .step-indicator__connector { margin-top: 20px; min-width: 6px; }
}

/* ── Mini state: triggered when user scrolls past the top.
   Compact a tight strip with shrunken bubbles, hidden numbers/labels,
   thin connectors. Animates smoothly. ── */
.step-indicator__btn,
.step-indicator__bubble,
.step-indicator__num,
.step-indicator__label,
.step-indicator__connector {
  transition-property: width, height, padding, margin, gap, opacity, transform,
                       max-height, font-size, background, border-color, box-shadow;
  transition-duration: 220ms;
  transition-timing-function: cubic-bezier(.4,.0,.2,1);
}
.step-indicator--mini {
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow:
    0 4px 14px rgba(17, 24, 39, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.step-indicator--mini .step-indicator__btn {
  gap: 0.25rem;
  min-width: 0;
}
.step-indicator--mini .step-indicator__bubble {
  width: 28px;
  height: 28px;
}
.step-indicator--mini .step-indicator__icon-wrap {
  width: 18px;
  height: 18px;
}
.step-indicator--mini .step-indicator__check {
  width: 12px;
  height: 12px;
  top: -1px;
  right: -1px;
  border-width: 1.5px;
}
.step-indicator--mini .step-indicator__check svg {
  width: 8px;
  height: 8px;
}
.step-indicator--mini .step-indicator__num {
  max-height: 0;
  font-size: 0;
  opacity: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}
.step-indicator--mini .step-indicator__label {
  font-size: 0.68rem;
  line-height: 1.1;
  max-width: 80px;
  font-weight: 600;
}
.step-indicator--mini .step-indicator__item--upcoming .step-indicator__label {
  color: #9ca3af;
}
.step-indicator--mini .step-indicator__connector {
  height: 2px;
  margin-top: 14px;
  min-width: 10px;
}
.step-indicator--mini .step-indicator__item--current .step-indicator__bubble {
  transform: scale(1.08);
}
@media (max-width: 760px) {
  .step-indicator--mini {
    padding: 0.35rem 0.5rem;
  }
  .step-indicator--mini .step-indicator__bubble { width: 26px; height: 26px; }
  .step-indicator--mini .step-indicator__icon-wrap { width: 16px; height: 16px; }
  .step-indicator--mini .step-indicator__connector { margin-top: 13px; }
  /* Mobile mini: hide non-current labels to keep the row from wrapping */
  .step-indicator--mini .step-indicator__item--upcoming .step-indicator__label,
  .step-indicator--mini .step-indicator__item--complete .step-indicator__label {
    display: none;
  }
}

/* ── Page footer with multi-step nav (back / counter / next) ── */
.page__foot--steps {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  /* 2026-05-30: re-stuck per Nicole. Loom 4 #54 wants a sticky Next so users
     do not get stuck on long service steps. Restores Batch 26 behaviour. */
  position: sticky;
  bottom: 0;
  z-index: 60;
  margin-top: 2rem;
  padding: 0.6rem 0;
  background: rgba(245, 246, 250, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid rgba(15, 28, 53, 0.08);
}
.page__foot-next-wrap {
  display: inline-block;
  position: relative;
  /* 2026-05-22: .page__foot--steps uses `grid-template-columns: auto 1fr auto`
     but only ships two children, so the Next-page button used to sit in the
     middle (1fr) column right next to Back. Pin it to column 3 so it lands
     on the right edge with the 1fr column as breathing space between. */
  grid-column: 3;
}
.page__foot-next-btn {
  min-width: 180px;
  justify-content: center;
}
/* ── Next button anchored below the summary sidebar ── */
.summary-next-wrap {
  display: block;
  margin-top: 0.75rem;
  position: relative;
}
.summary-next-btn {
  width: 100%;
  justify-content: center;
}

.page__foot--steps .page__foot-meta {
  text-align: center;
  font-size: 0.78rem;
  font-weight: 400;
  color: #9ca3af;
  letter-spacing: 0.01em;
}
.page__foot-meta-step {
  color: #9ca3af;
}
.page__foot-meta-count {
  color: #b8bcc4;
}
.btn__arrow--back {
  display: inline-block;
  margin-right: 0.25rem;
}
@media (max-width: 600px) {
  /* 2026-05-23: Back + Next on the SAME row on mobile, with Next given
     more horizontal weight since it's the primary CTA. Back stays
     compact (auto width); Next expands to fill the remaining space. */
  .page__foot--steps {
    grid-template-columns: auto 1fr;
    gap: 0.6rem;
    align-items: center;
    justify-items: stretch;
    width: 100%;
    margin-top: 1rem;
  }
  .page__foot--steps .btn--ghost {
    /* Back button: compact, only as wide as its label.
       Explicit grid-column: 1 + order: 0 prevents the auto-flow algorithm
       from pushing Back to row 2: app.css elsewhere sets order: 2 on
       .page__foot .btn--ghost (for an old flexbox layout), which makes
       Grid auto-place Back AFTER the explicitly-placed Next-wrap, causing
       the cursor to wrap into row 2. */
    width: auto;
    min-width: 92px;
    max-width: none;
    padding-left: 0.9rem;
    padding-right: 0.9rem;
    justify-self: start;
    grid-column: 1;
    grid-row: 1;
    order: 0;
  }
  .page__foot-next-wrap {
    grid-row: 1;
  }
  .page__foot-next-wrap {
    /* Pin to the right column and let it stretch */
    grid-column: 2;
    width: 100%;
    max-width: none;
    display: block;
  }
  .page__foot-next-btn {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  /* Step counter (if rendered) spans full width above the buttons */
  .page__foot--steps .page__foot-meta {
    grid-column: 1 / -1;
    text-align: center;
    order: -1;
  }
}

/* ── Promo code (Summary) ─────────────────────────────────────
   Collapsed: a small text-link "+ Have a discount code?".
   Expanded: input + Apply, with a tiny inline error.
   Applied: rendered as a discount line with a × remove button. ── */
.summary__promo {
  margin: 0.5rem 0 0;
  padding: 0.55rem 0.6rem;
  border: 1px dashed rgba(11, 24, 56, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.5);
  transition: border-color 0.18s ease, background 0.18s ease;
}
.summary__promo--open {
  border-style: solid;
  border-color: rgba(11, 24, 56, 0.18);
  background: #fff;
}
.summary__promo-toggle {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0.15rem 0.25rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gg-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  letter-spacing: 0.01em;
  transition: color 0.15s ease;
}
.summary__promo-toggle:hover { color: var(--gg-blue, #002ABF); }
.summary__promo-toggle > span[aria-hidden] {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
}

.summary__promo-form {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.4rem;
  align-items: stretch;
}
.summary__promo-input {
  appearance: none;
  border: 1px solid rgba(11, 24, 56, 0.18);
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: #FAF7EF;
  color: #0B1838;
  min-width: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.summary__promo-input::placeholder {
  color: var(--gg-muted);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
}
.summary__promo-input:focus {
  outline: none;
  border-color: var(--gg-blue, #002ABF);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 42, 191, 0.12);
}
.summary__promo-input--err {
  border-color: #C44A2E;
  background: #FFF5F1;
}
.summary__promo-input--err:focus {
  border-color: #C44A2E;
  box-shadow: 0 0 0 3px rgba(196, 74, 46, 0.15);
}
.summary__promo-apply {
  /* 2026-05-22: matched to the primary button style (Next page / Submit)
     so the APPLY button reads as the same call-to-action class instead
     of a flat blue swatch. Vertical gradient + inset top highlight +
     soft outer drop shadow + thin dark border. */
  appearance: none;
  border: 1px solid rgba(0, 14, 80, 0.5);
  border-radius: 10px;
  padding: 0.55rem 1.1rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #1f3df0 0%, #002ABF 100%);
  color: #fff;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 2px 6px rgba(0, 32, 160, 0.35);
  transition: filter 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
}
.summary__promo-apply:hover {
  /* 2026-05-22: matched to the primary CTA hover treatment — brighter
     gradient, deeper drop shadow, +1px lift, brightness pop. Mirrors
     what 'Next page' / 'Submit' do on hover so the APPLY button reads
     as the same interactive class. */
  filter: brightness(1.08);
  background: linear-gradient(180deg, #2a4cf5 0%, #0535d4 100%);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    0 6px 14px rgba(0, 32, 160, 0.50);
}
.summary__promo-apply:active {
  transform: translateY(1px);
  filter: brightness(0.98);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.15),
    0 1px 3px rgba(0, 32, 160, 0.30);
}
.summary__promo-cancel {
  appearance: none;
  border: 1px solid rgba(11, 24, 56, 0.12);
  background: #fff;
  width: 32px;
  border-radius: 8px;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--gg-muted);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.summary__promo-cancel:hover { color: #0B1838; border-color: rgba(11, 24, 56, 0.28); }
.summary__promo-error {
  grid-column: 1 / -1;
  font-size: 0.72rem;
  font-weight: 600;
  color: #C44A2E;
  margin-top: 0.1rem;
}

/* Applied promo line, keeps the small monospace code chip readable. */
/* ── Summary role-detail rows (PT + FT expanded breakdown lines) ─────────
   .summary__role-detail     — one key/value row (flex, space-between)
   .summary__role-detail-k   — the label (Days/month, Day rate, etc.)
   .summary__role-detail-v   — the value
   .summary__role-detail--multi — tasks row where value may wrap          */
.summary__role-details {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  margin-top: 0.35rem;
  padding: 0.45rem 0.6rem;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 6px;
}
.summary__role-detail {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
}
.summary__role-detail--multi {
  align-items: flex-start;
}
.summary__role-detail-k {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gg-muted, #6b7280);
  font-family: 'Inter', system-ui, sans-serif;
}
.summary__role-detail-v {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gg-heading, #111111);
  text-align: right;
  font-family: 'Inter', system-ui, sans-serif;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.summary__role-flag {
  display: inline-block;
  width: 16px;
  height: 11px;
  border-radius: 1.5px;
  object-fit: cover;
  margin-right: 4px;
  vertical-align: -1px;
}

.summary__line--promo .summary__promo-tag,
.summary__promo-applied .summary__promo-tag {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  background: rgba(11, 24, 56, 0.08);
  color: #0B1838;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Applied promo: rendered inside the same .summary__promo slot the input lives in.
   Solid border + subtle green tint signals "applied" state. */
.summary__promo--applied {
  border-style: solid;
  border-color: rgba(10, 94, 62, 0.28);
  background: rgba(10, 94, 62, 0.06);
}
.summary__promo-applied {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: #0B1838;
}
.summary__promo-applied-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}
.summary__promo-applied-val {
  font-weight: 700;
  color: #0a5e3e;
  white-space: nowrap;
}
.summary__promo-applied-remove {
  appearance: none;
  border: 1px solid rgba(11, 24, 56, 0.12);
  background: #fff;
  color: var(--gg-muted, #6b6b6b);
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.summary__promo-applied-remove:hover {
  color: #0B1838;
  border-color: rgba(11, 24, 56, 0.28);
}

/* ── TIER WAITLIST ─────────────────────────────────────────────────────────
   Distinct visual treatment for tiers that are at capacity. Reuses the amber
   palette from the existing service-level `.capacity--full` styling so the
   meaning carries over: amber = "you can request this but it's full".
   Top two White Label plans (`grow`, `scale`) use this state.

   Hierarchy of cues, strongest first:
   1. Amber pill replacing the price (".tier__waitlist-pill")
   2. Dashed amber border on the card
   3. Amber-tinted background wash
   4. The standard "popular" badge is suppressed in JSX so it can't fight the
      waiting-list message.
   ───────────────────────────────────────────────────────────────────────── */
.tier--waitlist {
  background: linear-gradient(180deg, rgba(184, 94, 10, 0.06), rgba(184, 94, 10, 0.02));
  border: 1.5px dashed rgba(184, 94, 10, 0.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.tier--waitlist:hover {
  border-color: rgba(184, 94, 10, 0.7);
  background: linear-gradient(180deg, rgba(184, 94, 10, 0.10), rgba(184, 94, 10, 0.04));
}
.tier--waitlist.tier--active {
  /* Selected-but-waitlisted: keep the amber but strengthen the border so the
     "selected" state is still readable against the waitlist treatment. */
  border-color: rgba(184, 94, 10, 0.85);
  border-style: solid;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 0 0 3px rgba(184, 94, 10, 0.12);
}
.tier--waitlist .tier__name {
  color: #6b3f0a;
}
.tier--waitlist .tier__blurb {
  color: rgba(107, 63, 10, 0.75);
}

.tier__waitlist-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(184, 94, 10, 0.14), rgba(184, 94, 10, 0.06));
  border: 1px solid rgba(184, 94, 10, 0.4);
  color: #B85E0A;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: none;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.tier__waitlist-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #B85E0A;
  flex-shrink: 0;
  position: relative;
  animation: tier-waitlist-pulse 1.6s ease-in-out infinite;
}
.tier__waitlist-dot::after {
  /* Soft outer ring that pulses with the dot, visual cue this isn't a static
     decoration but a live "queue" indicator. */
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid rgba(184, 94, 10, 0.4);
  animation: tier-waitlist-ring 1.6s ease-out infinite;
}
@keyframes tier-waitlist-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
@keyframes tier-waitlist-ring {
  0%   { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* Selected radio dot stays brand-blue but on a waitlist tier we tint it amber
   so the "selected & waitlisted" combo reads as a single coherent state. */
.tier--waitlist.tier--active .tier__radio.is-on {
  background: #B85E0A;
  border-color: #B85E0A;
}

/* 2026-05-29: when `.tier--waitlist` co-occurs with `.tier--recommended`
   (Grow) or `.tier--ent` (Enterprise), the recommended/ent rules below
   use `!important` on background/border/box-shadow and win the cascade,
   leaving those two cards looking different from Starter/Scale. These
   overrides re-assert the canonical amber waitlist treatment so all four
   waitlisted tiers read as one cohesive state. */
.tier--waitlist.tier--recommended,
.tier--waitlist.tier--ent {
  background: linear-gradient(180deg, rgba(184, 94, 10, 0.06), rgba(184, 94, 10, 0.02)) !important;
  border: 1.5px dashed rgba(184, 94, 10, 0.45) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7) !important;
}
.tier--waitlist.tier--recommended:hover,
.tier--waitlist.tier--ent:hover {
  border-color: rgba(184, 94, 10, 0.7) !important;
  background: linear-gradient(180deg, rgba(184, 94, 10, 0.10), rgba(184, 94, 10, 0.04)) !important;
}
.tier--waitlist.tier--recommended.tier--active,
.tier--waitlist.tier--ent.tier--active {
  background: linear-gradient(180deg, rgba(184, 94, 10, 0.10), rgba(184, 94, 10, 0.04)) !important;
  border-color: rgba(184, 94, 10, 0.85) !important;
  border-style: solid !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 0 0 3px rgba(184, 94, 10, 0.12) !important;
}
/* Cancel the corner highlight that .tier--recommended::after adds — on a
   waitlisted Grow it reads as a stray sheen against the amber. */
.tier--waitlist.tier--recommended::after {
  background: none !important;
}
/* Strip the price/name/setup-fee tints that .tier--recommended and
   .tier--ent inject; on a waitlisted tier the amber text from
   `.tier--waitlist .tier__name` / `.tier--waitlist .tier__blurb` should
   carry the message instead. */
.tier--waitlist.tier--recommended .tier__price,
.tier--waitlist.tier--recommended .tier__price-amount,
.tier--waitlist.tier--recommended .tier__price-main,
.tier--waitlist.tier--recommended .tier__price-currency,
.tier--waitlist.tier--ent .tier__price,
.tier--waitlist.tier--ent .tier__price-amount,
.tier--waitlist.tier--ent .tier__price-main,
.tier--waitlist.tier--ent .tier__price-currency {
  color: #6b3f0a !important;
}
.tier--waitlist.tier--recommended .tier__price-sub,
.tier--waitlist.tier--recommended .tier__price-unit,
.tier--waitlist.tier--recommended .tier__setup-fee,
.tier--waitlist.tier--ent .tier__price-sub,
.tier--waitlist.tier--ent .tier__price-unit,
.tier--waitlist.tier--ent .tier__setup-fee {
  color: rgba(107, 63, 10, 0.75) !important;
}
/* Radio: match Starter/Scale waitlist treatment exactly. Empty state is
   the base white radio; selected state flips to the amber fill (mirrors
   `.tier--waitlist.tier--active .tier__radio.is-on` for Starter/Scale). */
.tier--waitlist.tier--recommended .tier__radio,
.tier--waitlist.tier--ent .tier__radio {
  border-color: #E2E2E2 !important;
  background: #FFFFFF !important;
}
.tier--waitlist.tier--recommended:hover .tier__radio:not(.is-on),
.tier--waitlist.tier--ent:hover .tier__radio:not(.is-on) {
  border-color: rgba(184, 94, 10, 0.7) !important;
}
/* 2026-05-29: was a flat-orange override; restored to the canonical
   premium-check style (gradient + warm neumorphic glow) so the selected
   Grow / Enterprise tier on a waitlist service matches Starter / Scale's
   polished look. Same selector specificity preserves precedence over
   .tier--recommended .tier__radio.is-on and .tier--ent .tier__radio.is-on
   while keeping the orange waitlist theme. */
.tier--waitlist.tier--recommended.tier--active .tier__radio.is-on,
.tier--waitlist.tier--ent.tier--active .tier__radio.is-on {
  background: linear-gradient(109deg, var(--gg-orange, #B85E0A) 0%, var(--gg-orange-deep, #8C4400) 100%) !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
  box-shadow:
    rgba(255, 255, 255, 0.5) -2px -2px 2px -1px,
    rgba(255, 232, 211, 0.69) 1px 1.5px 2px 0px inset,
    rgba(227, 168, 123, 0.63) -2.5px -2px 2px 0px inset,
    rgba(84, 84, 84, 0.35) 2px 2px 8px 0px,
    rgba(145, 72, 0, 0.8) -1px -4px 20px 0px inset !important;
}

/* ───────────────────────────────────────────────────────────────────
   Service-header "Waiting list" pill
   Appears next to a service name when one or more tiers in that service
   are on a waiting list (driven by service.waitlistTiers in data.jsx).
   Mirrors the .tier__waitlist-pill palette / animation so the
   service-level and tier-level waitlist states read as one system.
   ─────────────────────────────────────────────────────────────────── */
.svc__waitlist-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  padding: 3px 10px 3px 9px;
  background: rgba(255, 184, 87, 0.18);
  color: #B85E0A;
  border: 1px solid rgba(184, 94, 10, 0.45);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
}
.svc__waitlist-dot {
  position: relative;
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #B85E0A;
  animation: tier-waitlist-pulse 1.6s ease-in-out infinite;
}
.svc__waitlist-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(184, 94, 10, 0.4);
  animation: tier-waitlist-ring 1.6s ease-out infinite;
}

/* ── STANDALONE ADDON BADGE ───────────────────────────────────────────────── */
.addon__standalone-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--clr-accent, #3a65ff);
  background: rgba(58, 101, 255, 0.09);
  border: 1px solid rgba(58, 101, 255, 0.2);
  border-radius: 20px;
  padding: 0.1rem 0.45rem;
  white-space: nowrap;
  cursor: default;
}

/* ── GORILLA MATRIX STRIP ──────────────────────────────────────────────────── */
.gm-strip {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.75rem 1rem;
  margin: 0.5rem 0;
  background: rgba(15, 28, 53, 0.03);
  border: 1px solid rgba(15, 28, 53, 0.07);
  border-radius: 10px;
}

.gm-strip__label {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gg-muted, #6b7a99);
}
.gm-strip__label sup {
  font-size: 0.6em;
  vertical-align: super;
}

.gm-strip__items {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.gm-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.gm-item__label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gg-heading, #0f1c35);
  line-height: 1.3;
}

.gm-item__badge-img {
  display: block;
  height: 18px;
  width: auto;
  border-radius: 3px;
  object-fit: contain;
}


/* ── Lead email capture (Step 3 "You're all set") ────────────────────────── */
.lead-capture {
  background: linear-gradient(135deg, #f0f4ff 0%, #f8f0ff 100%);
  border: 1.5px solid #d0d0f0;
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
}
.lead-capture__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.lead-capture__text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.lead-capture__text strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gg-heading, #0f1c35);
}
.lead-capture__text span {
  font-size: 0.8rem;
  color: var(--gg-muted, #5f6b7a);
  line-height: 1.5;
}
.lead-capture__form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.lead-capture__form .convert__email-input {
  flex: 1;
  min-width: 0;
}
.lead-capture__error {
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: #c33;
  line-height: 1.4;
}
.lead-capture--saved {
  background: linear-gradient(135deg, #f0faf4 0%, #f0f9ff 100%);
  border-color: #a7e3bb;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: #1a6b35;
}
.lead-capture--saved strong { color: inherit; }


/* ── COMBINED ACTION CARD (cac) ── */
.convert-card--action {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cac__header {
  display: flex;
  /* 2026-05-29: was flex-start which top-aligned the 48px icon against the
     single-line title, leaving the icon dangling below the text. center
     vertically centres the icon against the intro block — works for both
     the single-line "Answer a few questions" case and the 2-line success
     state ("Thanks {name}." + body). */
  align-items: center;
  gap: 14px;
}
.cac__icon {
  /* 2026-05-22: was object-fit: cover which CROPPED the source webp to fill
     the 48x48 box and clipped the bottom-right of the icon. Switched to
     contain so the whole icon stays visible inside the box. Same overall
     size, just no longer cropped. */
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 10px;
  object-fit: contain;
}
.cac__intro {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cac__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--txt-primary);
  line-height: 1.2;
}
.cac__desc {
  font-size: 0.85rem;
  color: var(--txt-secondary);
  line-height: 1.45;
}
.cac__email-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cac__email-row {
  display: flex;
  gap: 8px;
}
.cac__email-input {
  flex: 1;
  padding: 10px 14px;
  border: 2px solid #aab0bc;
  border-radius: 8px;
  font-size: 0.88rem;
  background: #ffffff;
  color: var(--txt-primary);
  transition: border-color .18s, box-shadow .18s;
  outline: none;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
}
.cac__email-input::placeholder {
  color: #9ba3af;
}
.cac__email-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent), inset 0 1px 3px rgba(0,0,0,0.06);
}
.cac__email-err {
  font-size: 0.78rem;
  color: #e53e3e;
  margin-top: 2px;
}
.cac__email-saved {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--accent) 30%, transparent);
  font-size: 0.88rem;
  color: var(--txt-primary);
}
.cac__divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--txt-muted, var(--txt-secondary));
  font-size: 0.78rem;
}
.cac__divider::before,
.cac__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.cac__ctas {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cac__stripe-btn {
  font-size: 0.88rem;
}
.cac__meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  color: var(--txt-muted, var(--txt-secondary));
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE REFINEMENTS, appended 2026-05
   Targets: client-type cards horizontal layout, youreset summary hide,
   email capture row stacking, and tap-target improvements.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Client-type cards: horizontal layout at ≤820px ──
   The existing 820px rule sets grid-template-columns:1fr so cards
   become single-column, but each card stays in its default vertical
   flex layout (icon on top, text below), making them tall and cramped
   on phones.  We switch each card to a 2-column CSS grid that mirrors
   the 1280–1100px rule: icon on the left, all text on the right. */
@media (max-width: 820px) {
  .client-grid--compact .client-card {
    display: grid !important;
    grid-template-columns: 84px 1fr !important;
    grid-template-rows: auto auto auto auto !important;
    column-gap: 0.85rem !important;
    row-gap: 0 !important;
    align-items: center !important;
    text-align: left !important;
    padding: 0.85rem 1rem 0.85rem 0.85rem !important;
    /* override any flex-direction that base style may set */
    flex-direction: unset !important;
  }
  .client-grid--compact .client-card__icon {
    grid-column: 1 !important;
    grid-row: 1 / span 4 !important;
    width: 100% !important;
    max-width: 84px !important;
    height: 76px !important;
    margin: 0 !important;
    object-fit: cover !important;
    align-self: center !important;
  }
  .client-grid--compact .client-card__logo {
    grid-column: 2 !important;
    height: 20px !important;
    justify-content: flex-start !important;
    margin: 0 0 0.15rem !important;
  }
  .client-grid--compact .client-card__logo-img { width: auto !important; }
  .client-grid--compact .client-card__heading {
    grid-column: 2 !important;
    text-align: left !important;
    margin: 0 0 0.15rem !important;
    font-size: 0.9rem !important;
  }
  .client-grid--compact .client-card__desc {
    grid-column: 2 !important;
    text-align: left !important;
    -webkit-line-clamp: 2 !important;
    margin: 0 !important;
  }
  .client-grid--compact .client-card__radio {
    position: absolute !important;
    top: 0.85rem !important;
    left: 0.85rem !important;
    right: auto !important;
    z-index: 3 !important;
  }
}

/* ── You're Set page: hide right-column summary on mobile ──
   .youreset__summary is the summary column on the conversion/CTA page.
   On ≤880px the mobile bar already surfaces the quote; the extra column
   just wastes vertical space and pushes the CTAs below the fold. */
@media (max-width: 880px) {
  .youreset__summary { display: none !important; }
  .youreset__grid { grid-template-columns: 1fr !important; }
}

/* ── Email-capture card: stack input + button on narrow phones ── */
@media (max-width: 520px) {
  .cac__email-row {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .cac__email-row .cac__email-input {
    width: 100% !important;
  }
  .cac__email-row .btn,
  .cac__email-row [class*="btn"] {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ── Touch targets: minimum 44 px tap height on mobile ── */
@media (max-width: 880px) {
  .btn,
  button.btn { min-height: 44px; }
  .svc__commit-bar-btn { min-height: 40px; }
}

/* ── Mobile sheet: force display:flex when present ──
   The base rule in assets/app.css sets `.mobile-sheet { display: none }` and
   only flips to `display: flex` via the `.mobile-sheet--open` class. React
   conditionally mounts the sheet (only when mobileOpen=true), so the class
   flip never fires and the sheet stays hidden. Force display:flex whenever
   the element is in the DOM. */
.mobile-sheet {
  display: flex !important;
  /* Override the base assets/app.css rule which sets a heavy
     `rgba(10,10,10,0.55)` background directly on .mobile-sheet (in addition
     to the dedicated .__backdrop element). Force the parent transparent so
     only our softer .__backdrop tints the screen. */
  background: transparent !important;
  backdrop-filter: none !important;
}
.mobile-sheet__panel,
.mobile-sheet__inner {
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  background: linear-gradient(168deg, #FEFCF7 0%, #F6EEDA 100%);
  border-radius: 24px 24px 0 0;
  padding: 1.25rem 1.25rem 2rem;
  box-shadow: 0 -20px 50px rgba(0,0,0,0.3);
  animation: slideUp 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.mobile-sheet__grab {
  width: 40px;
  height: 4px;
  background: rgba(0,0,0,0.2);
  border-radius: 100px;
  margin: 0 auto 1rem;
}
.mobile-sheet__backdrop {
  position: absolute;
  inset: 0;
  /* Softer than the original 0.55, keep the page partially visible behind
     the sheet rather than blacking it out. */
  background: rgba(15, 28, 53, 0.22);
  backdrop-filter: blur(2px);
  z-index: -1;
}
.mobile-sheet__close {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: rgba(0,0,0,0.06);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

/* ── Mobile overflow safety net (Sprint 4 polish, mobile fix Sprint 5) ──
   Several YoureSetPage cards (.grants-card, .cac, .convert-card, .cal-bridge,
   .lead-capture) sometimes render wider than the viewport on narrow phones
   when a child flex/grid sets an intrinsic min-width that the card can't
   shrink past. Clamp everything to the viewport width and force flex children
   to be shrinkable so text wraps inside the visible area instead of getting
   clipped at the device edge. */
@media (max-width: 880px) {
  .youreset,
  .youreset__convert,
  .youreset__grid,
  .convert__grid,
  .grants-card,
  .cac,
  .convert-card,
  .cal-bridge,
  .lead-capture,
  .ae-banner {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  /* Grid/flex items default to `min-width: auto` which lets them expand to
     fit content intrinsic min-width and push past the parent. Force every
     child of the youreset grid/convert grid to shrink. */
  .youreset__grid > *,
  .convert__grid > * {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  /* Allow flex children to shrink below their intrinsic content width so
     long descriptions wrap instead of pushing the card off-screen. */
  .grants-card__body,
  .cac__intro,
  .cac__header,
  .cal-bridge__body,
  .lead-capture__body,
  .lead-capture__text,
  .convert-card > *,
  .cac__email-form,
  .cac__email-row,
  .cac__email-input,
  .cac__ctas {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  /* Email row + CTA buttons must not exceed the card. */
  .cac__email-row { flex-wrap: wrap !important; }
  .cac__email-input { flex: 1 1 auto !important; }
  .cac__ctas .btn { width: 100% !important; }
  /* Slightly tighter card padding so the content has more room to breathe. */
  .grants-card { padding: 1.1rem 1.2rem !important; gap: 0.75rem !important; }
  .convert-card { padding: 1rem 1.1rem !important; }
  .cac { padding: 1rem 1.1rem !important; }
  /* Last-line-of-defence: prevent any element from forcing the document to
     scroll horizontally. The base layout never intends to scroll sideways. */
  html, body { overflow-x: hidden; }
}

/* ── Included add-ons, non-interactive, visually distinct ──
   These are add-ons bundled into the plan at no extra cost (e.g.
   Google Call Tracking for Enterprise Paid Ads). They show as
   permanently checked, can't be toggled, and display "Included". */
.addon--included {
  opacity: 0.9;
  /* background / border-color intentionally unset — "Included" italic label is the visual cue */
}
.addon--included .addon__check {
  /* Muted check for unselected included addons */
  background: color-mix(in srgb, var(--accent) 15%, transparent) !important;
  border-color: color-mix(in srgb, var(--accent) 40%, transparent) !important;
}
/* When an included addon is actively selected, restore full blue selected state */
.svc__addons-disc .addon--included.addon--on .addon__check {
  background: var(--gg-premium-check-bg) !important;
  border-color: transparent !important;
}
.addon--included .addon__price-main--free {
  color: color-mix(in srgb, var(--accent) 80%, var(--txt-primary)) !important;
}



/* ── Swap youreset layout: summary on right, action card on left ── */
.youreset__grid {
  grid-template-columns: 1fr 400px;
}
.youreset__summary {
  order: 2;
}
.youreset__grid > .convert__grid {
  order: 1;
}


/* ── Wide-screen: expand page container, thin side margins only ── */
@media (min-width: 1400px) {
  .page > .container {
    max-width: 1550px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (min-width: 1800px) {
  .page > .container {
    max-width: 1700px !important;
  }
}


/* ── GorillaMatrix incentives: grid layout so items fill the row ── */
/* 2026-05-29 v2: horizontal row of equal-width incentive cards.
   auto-fit keeps the layout sensible if incentive count varies (1 item
   stretches, 4+ items just keep narrowing to the 160px floor). */
.gm-strip__items {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: 0.5rem !important;
  flex-direction: unset !important;
}

/* 2026-05-29 v3: each incentive sits in its own container. Card now
   uses a much softer white wash so it sits in the same tonal family
   as the surrounding GorillaMatrix strip backdrop instead of popping
   bright white. Border + shadow lightened to match. */
.gm-item {
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.6rem !important;
  padding: 0.45rem 0.65rem;
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(15, 28, 53, 0.05);
  border-radius: 8px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.015);
}


/* ── Client-switch confirmation modal (spec §6.5.1) ─────────────────────── */
/* Modal that appears when a user with selections clicks a different client
   type card on step 0. Cancel = no change; Confirm = clear + switch. */
.cs-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.cs-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 28, 53, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}
.cs-modal__panel {
  position: relative;
  z-index: 1;
  max-width: 460px;
  width: 100%;
  background: var(--bg-card, #fff);
  border: 1px solid color-mix(in srgb, var(--accent, #1d4ed8) 12%, transparent);
  border-radius: 16px;
  box-shadow: 0 20px 50px -12px rgba(15, 28, 53, 0.35), 0 8px 16px -8px rgba(15, 28, 53, 0.18);
  padding: 1.5rem;
  animation: csModalIn 160ms ease-out;
}
@keyframes csModalIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cs-modal__title {
  margin: 0 0 0.75rem 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--txt-primary, #0f1c35);
}
.cs-modal__body {
  margin: 0 0 1.25rem 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--txt-primary, #0f1c35);
  opacity: 0.85;
}
.cs-modal__body strong { font-weight: 600; opacity: 1; }
.cs-modal__actions {
  display: flex;
  gap: 0.625rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.cs-modal__actions .btn { white-space: nowrap; }
.cs-modal__panel--wide { max-width: 560px; }
.cs-modal__body--hint {
  margin-top: -0.5rem;
  margin-bottom: 1rem;
  font-size: 0.82rem;
  opacity: 0.6;
}

/* §17 — "We picked services" list inside the rec-picked modal. Lightweight
   stacked rows with service name on the left + tier badge on the right. */
.rec-picked__list {
  list-style: none;
  margin: 0 0 1.25rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 280px;
  overflow-y: auto;
}
.rec-picked__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  /* Surface for the 22px glass-frame overlay to sit on. The glass-frame
     bevel mixes via multiply, so a soft white/blue tint reads through it. */
  background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(245,247,252,0.92) 100%);
  border-radius: 14px;
  /* The .glass-frame ::before overlay needs ~22px of headroom on each side
     to render the corner slices cleanly — padding above handles vertical,
     and the modal panel gives horizontal room. */
}
.rec-picked__name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--txt-primary, #0f1c35);
}
.rec-picked__tier {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gg-blue, #002ABF);
  background: white;
  padding: 0.25rem 0.5rem;
  border-radius: 100px;
  border: 1px solid color-mix(in srgb, var(--gg-blue, #002ABF) 15%, transparent);
  white-space: nowrap;
}
@media (max-width: 480px) {
  .cs-modal__panel { padding: 1.25rem; border-radius: 14px; }
  .cs-modal__actions { flex-direction: column-reverse; }
  .cs-modal__actions .btn { width: 100%; justify-content: center; }
}


/* ── Start fresh link (spec §3.3 + Open Q5) ─────────────────────────────── */
/* Subtle right-aligned text button shown only when the user has selections.
   Click nukes localStorage and hard-reloads, guaranteed clean boot. */
.start-fresh-row {
  display: flex;
  justify-content: flex-end;
  margin-top: -0.25rem;
  margin-bottom: 0.5rem;
}
.start-fresh-link {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  color: var(--txt-primary, #0f1c35);
  opacity: 0.55;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: opacity 120ms ease, background-color 120ms ease, transform 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.start-fresh-link:hover,
.start-fresh-link:focus-visible {
  opacity: 1;
  background-color: color-mix(in srgb, var(--accent, #1d4ed8) 8%, transparent);
  outline: none;
}
.start-fresh-link:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #1d4ed8) 35%, transparent);
}
.start-fresh-link:active { transform: translateY(1px); }
@media (max-width: 480px) {
  .start-fresh-row { margin-top: 0.25rem; }
  .start-fresh-link { font-size: 0.8rem; padding: 0.4rem 0.7rem; }
}


/* ── Stale-data prompt (spec §3.1 + W5) ─────────────────────────────────── */
/* Banner shown above the calculator when saved localStorage state is older
   than 14 days. Amber accent (warning, not error). Dismissable via either
   the primary "Got it" CTA or the × in the corner. */
.stale-prompt {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.75rem 0;
  padding: 0.85rem 1rem;
  background: color-mix(in srgb, #f59e0b 12%, var(--bg-card, #fff));
  border: 1px solid color-mix(in srgb, #f59e0b 35%, transparent);
  border-radius: 12px;
  position: relative;
}
.stale-prompt__icon {
  flex: 0 0 auto;
  font-size: 1.15rem;
  line-height: 1;
}
.stale-prompt__body {
  flex: 1 1 auto;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--txt-primary, #0f1c35);
}
.stale-prompt__body strong { font-weight: 600; }
.stale-prompt__cta { flex: 0 0 auto; white-space: nowrap; }
.stale-prompt__close {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--txt-primary, #0f1c35);
  opacity: 0.5;
  padding: 0.25rem 0.4rem;
  border-radius: 4px;
  transition: opacity 120ms;
}
.stale-prompt__close:hover, .stale-prompt__close:focus-visible {
  opacity: 1;
  outline: none;
  background: rgba(0, 0, 0, 0.06);
}
@media (max-width: 520px) {
  .stale-prompt {
    flex-wrap: wrap;
    padding: 0.85rem 1rem 0.85rem 0.85rem;
  }
  .stale-prompt__body { flex: 1 1 100%; padding-right: 1.5rem; }
  .stale-prompt__cta { width: 100%; justify-content: center; }
}


/* ── Value strip (Sprint 1) ─────────────────────────────────────────── */
/* Renders below the client-type cards, above the intent reveal. Four-up
   grid on desktop, 2x2 on tablets, 1-col on mobile. */
.value-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1.25rem 0 1rem;
  padding: 1rem;
  background: linear-gradient(135deg, rgba(63, 102, 251, 0.04) 0%, rgba(63, 102, 251, 0.08) 100%);
  border: 1px solid rgba(63, 102, 251, 0.12);
  border-radius: 14px;
}
.value-strip__item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.value-strip__icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #3f66fb, #6a8bff);
  color: #fff;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
}
.value-strip__body { min-width: 0; }
.value-strip__title {
  font-weight: 600;
  font-size: 0.84rem;
  color: #0f1c35;
  line-height: 1.25;
  margin-bottom: 0.15rem;
}
.value-strip__desc {
  font-size: 0.76rem;
  color: #4a5568;
  line-height: 1.35;
}
@media (max-width: 900px) {
  .value-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .value-strip { grid-template-columns: 1fr; padding: 0.75rem; }
}


/* ── SPRINT 1: Qualifier, Q0, Cohort D bypass ───────────────────────── */

.q0-section {
  /* Now wears .glass-frame (22px WebP slices). Soften native border so the
     WebP bevel reads cleanly; radius 16px matches the 22px corner curve. */
  background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(244,248,255,0.78) 100%);
  border: 1px solid rgba(180, 195, 220, 0.32);
  border-radius: 16px;
  padding: 1.25rem 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 1px 2px rgba(15,23,42,0.04),
    0 8px 20px -12px rgba(44, 51, 102, 0.18);
}
.q0-section__head { margin-bottom: 0.875rem; }
.q0-section__eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #3f66fb;
  margin-bottom: 0.25rem;
}
.q0-section__title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #0f1c35;
  margin: 0 0 0.25rem;
}
.q0-section__sub {
  font-size: 0.8rem;
  color: #4a5568;
  margin: 0;
}
.q0-section__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem;
}
.q0-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.q0-field__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #2d3748;
}
.q0-field__hint {
  font-weight: 400;
  color: #718096;
}
.q0-field__input {
  font-size: 0.92rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid #cbd5e0;
  border-radius: 8px;
  background: #fff;
  color: #0f1c35;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.q0-field__input:focus {
  outline: none;
  border-color: #3f66fb;
  box-shadow: 0 0 0 3px rgba(63, 102, 251, 0.15);
}
@media (max-width: 600px) { .q0-section__grid { grid-template-columns: 1fr; } }

.qualifier-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.qualifier-q {
  position: relative;
  /* White/transparent surface to match the service card panels (.svc uses
     rgba(255,255,255,0.20)). Replaces the previous blue-tinted gradient. */
  background: rgba(255, 255, 255, 0.20);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 0;
  border-radius: 18px;
  padding: 1.25rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 12px 24px -14px rgba(44, 51, 102, 0.18);
}
/* Frosted glass-frame bevel, same WebP slice trick as .role-tile / .svc. */
.qualifier-q::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    url('glass-frame/top-left.webp')     top left     / 22px 22px no-repeat,
    url('glass-frame/top-right.webp')    top right    / 22px 22px no-repeat,
    url('glass-frame/bottom-left.webp')  bottom left  / 22px 22px no-repeat,
    url('glass-frame/bottom-right.webp') bottom right / 22px 22px no-repeat,
    url('glass-frame/top.webp')    22px top    / calc(100% - 44px) 22px repeat-x,
    url('glass-frame/bottom.webp') 22px bottom / calc(100% - 44px) 22px repeat-x,
    url('glass-frame/left.webp')   left 22px   / 22px calc(100% - 44px) repeat-y,
    url('glass-frame/right.webp')  right 22px  / 22px calc(100% - 44px) repeat-y;
  mix-blend-mode: multiply;
  z-index: 1;
}
.qualifier-q > * { position: relative; z-index: 2; }
.qualifier-q__head { margin-bottom: 0.75rem; }
.qualifier-q__label {
  font-size: 1rem;
  font-weight: 600;
  color: #0f1c35;
  margin: 0 0 0.25rem;
}
.qualifier-q__sub {
  font-size: 0.78rem;
  color: #4a5568;
  margin: 0;
}
.qualifier-q__opts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
}
.qualifier-opt {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.95rem 1rem 0.95rem 1rem;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
  text-align: left;
  color: var(--gg-heading, #0B1838);
  font-family: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 1px 2px rgba(15,23,42,0.04),
    0 8px 18px -10px rgba(44, 51, 102, 0.15);
}
/* Frosted glass-frame bevel, same WebP slice trick as .role-tile / .addon. */
.qualifier-opt::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    url('glass-frame/top-left.webp')     top left     / 22px 22px no-repeat,
    url('glass-frame/top-right.webp')    top right    / 22px 22px no-repeat,
    url('glass-frame/bottom-left.webp')  bottom left  / 22px 22px no-repeat,
    url('glass-frame/bottom-right.webp') bottom right / 22px 22px no-repeat,
    url('glass-frame/top.webp')    22px top    / calc(100% - 44px) 22px repeat-x,
    url('glass-frame/bottom.webp') 22px bottom / calc(100% - 44px) 22px repeat-x,
    url('glass-frame/left.webp')   left 22px   / 22px calc(100% - 44px) repeat-y,
    url('glass-frame/right.webp')  right 22px  / 22px calc(100% - 44px) repeat-y;
  mix-blend-mode: multiply;
  z-index: 1;
}
.qualifier-opt > * { position: relative; z-index: 2; }
.qualifier-opt:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 1px 2px rgba(15,23,42,0.04),
    0 12px 24px -10px rgba(44, 51, 102, 0.22);
}
.qualifier-opt--on {
  background: linear-gradient(180deg, rgba(244,247,255,0.95), rgba(232,238,255,0.85));
  box-shadow:
    0 0 0 2px rgba(0, 42, 191, 0.30) inset,
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 12px 24px -10px rgba(0, 42, 191, 0.22);
}
.qualifier-opt__radio {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid #E2E2E2;
  background: #fff;
  display: grid;
  place-items: center;
  margin-top: 1px;
  color: #fff;
  z-index: 3;
  box-shadow:
    inset 1px 1px 3px rgba(0, 0, 0, 0.06),
    1px 1px 3px rgba(0, 0, 0, 0.06),
    -1px -1px 2px rgba(255, 255, 255, 0.7);
  transition: background 0.2s ease-out, border-color 0.2s ease-out,
              box-shadow 0.2s ease-out, transform 0.2s ease-out;
}
.qualifier-opt:hover .qualifier-opt__radio:not(.is-on) {
  border-color: #6B82D6;
  box-shadow:
    inset 1px 1px 3px rgba(0, 0, 0, 0.06),
    2px 2px 6px rgba(0, 0, 0, 0.08),
    -1px -1px 3px rgba(255, 255, 255, 0.8);
}
.qualifier-opt__radio.is-on {
  background: linear-gradient(109deg, var(--gg-blue, #002ABF) 0%, var(--gg-blue, #002ABF) 100%);
  border-color: transparent;
  color: #fff;
  transform: scale(1.05);
  box-shadow: var(--gg-premium-check-shadow);
}
.qualifier-opt__radio svg { stroke-width: 3; }
.qualifier-opt__body { min-width: 0; }
.qualifier-opt__title {
  font-weight: 600;
  font-size: 0.86rem;
  color: #0f1c35;
  line-height: 1.25;
}
.qualifier-opt__desc {
  font-size: 0.74rem;
  color: #4a5568;
  line-height: 1.35;
  margin-top: 0.15rem;
}
@media (max-width: 700px) { .qualifier-q__opts { grid-template-columns: 1fr; } }

.qualifier-result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: linear-gradient(135deg, rgba(63, 102, 251, 0.06) 0%, rgba(63, 102, 251, 0.12) 100%);
  border: 1px solid rgba(63, 102, 251, 0.20);
  border-radius: 12px;
  margin-top: 0.5rem;
}
.qualifier-result__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  background: #3f66fb;
  color: #fff;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.qualifier-result__warmth {
  font-size: 0.84rem;
  color: #2d3748;
}
.qualifier-result__warmth strong {
  color: #0f1c35;
  font-weight: 700;
}
.qualifier-result__msg {
  flex: 1 1 100%;
  font-size: 0.82rem;
  color: #2d3748;
  line-height: 1.4;
}

.cohort-bypass {
  background: #fff;
  border: 1px solid #e3e8ef;
  border-radius: 14px;
  padding: 2rem 1.75rem;
  text-align: center;
  box-shadow: 0 2px 6px rgba(15, 28, 53, 0.04);
}
.cohort-bypass__icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: #3f66fb;
}
.cohort-bypass__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f1c35;
  margin: 0 0 0.75rem;
}
.cohort-bypass__body {
  font-size: 0.95rem;
  color: #4a5568;
  line-height: 1.55;
  max-width: 520px;
  margin: 0 auto 1.25rem;
}
.cohort-bypass__actions {
  display: flex;
  gap: 0.625rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.cohort-bypass__small {
  font-size: 0.78rem;
  color: #718096;
  margin: 0;
}


/* ── SPRINT 2: Recommendation badges, multi-service tracker, margin calc ─ */

/* Recommendation callout (Sprint 2 v3), always-visible inline banner under
   the service description. Reason is shown directly so users don't need to
   hover. Two variants:
     subtle  → soft grey-blue background, neutral text
     strong  → soft brand-blue background, brand-blue accent
   Layout: icon column on left, label + reason text on right. */
.rec-callout {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  margin-top: 0.625rem;
  margin-bottom: 0.125rem;
  border-radius: 8px;
  font-size: 0.78rem;
  line-height: 1.4;
  cursor: default;
}
.rec-callout--subtle {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(184, 94, 10, 0.07) 100%);
  border: 1px solid rgba(184, 94, 10, 0.18);
  color: #2d3748;
}
.rec-callout--strong {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(184, 94, 10, 0.12) 100%);
  border: 1px solid rgba(184, 94, 10, 0.30);
  color: #1e293b;
}
.rec-callout__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 0.82rem;
  line-height: 1;
  color: #fff;
}
.rec-callout--subtle .rec-callout__icon {
  background: linear-gradient(135deg, var(--gg-orange, #f59e0b) 0%, var(--gg-orange-deep, #b85e0a) 100%);
  opacity: 0.85;
}
.rec-callout--strong .rec-callout__icon {
  background: linear-gradient(135deg, var(--gg-orange, #f59e0b) 0%, var(--gg-orange-deep, #b85e0a) 100%);
  box-shadow: 0 1px 3px rgba(184, 94, 10, 0.30);
}
.rec-callout__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.rec-callout__label {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.2;
}
.rec-callout--subtle .rec-callout__label { color: var(--gg-orange-deep, #b85e0a); opacity: 0.85; }
.rec-callout--strong .rec-callout__label { color: var(--gg-orange-deep, #b85e0a); }
.rec-callout__reason {
  font-size: 0.82rem;
  font-weight: 400;
  color: inherit;
  line-height: 1.45;
}

/* Legacy v1 + v2, hide so old DOM doesn't render the prior variants if
   any cached HTML references them. Safe to remove later. */
.rec-badge, .rec-tag { display: none !important; }

/* Multi-service tracker (Sprint 2 v2), clearer "Bundle discount" card with
   header row, progress bar, and hint. Appears above the bundle line in the
   summary. Maxed state mutes the call-to-action styling. */
.ms-tracker {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 0.875rem;
  background: linear-gradient(135deg, rgba(63, 102, 251, 0.05) 0%, rgba(63, 102, 251, 0.08) 100%);
  border: 1px solid rgba(63, 102, 251, 0.20);
  border-radius: 10px;
  margin-top: 0.625rem;
  margin-bottom: 0.625rem;
  font-size: 0.78rem;
  color: #2d3748;
}
.ms-tracker--maxed {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(184, 94, 10, 0.10) 100%);
  border-color: rgba(184, 94, 10, 0.30);
}
.ms-tracker__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ms-tracker__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #3f66fb;
  color: #fff;
}
.ms-tracker--maxed .ms-tracker__icon {
  background: linear-gradient(135deg, var(--gg-orange, #f59e0b) 0%, var(--gg-orange-deep, #b85e0a) 100%);
}
.ms-tracker__lbl {
  flex: 1;
  font-weight: 600;
  font-size: 0.82rem;
  color: #0f1c35;
  letter-spacing: 0.01em;
}
.ms-tracker__pct {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.55rem;
  background: #3f66fb;
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
}
.ms-tracker--maxed .ms-tracker__pct {
  background: linear-gradient(135deg, var(--gg-orange, #f59e0b) 0%, var(--gg-orange-deep, #b85e0a) 100%);
}
.ms-tracker__progress {
  position: relative;
  height: 6px;
  background: rgba(63, 102, 251, 0.12);
  border-radius: 999px;
  overflow: visible;
  margin: 0.125rem 0;
}
.ms-tracker__progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, #3f66fb 0%, #6a8bff 100%);
  border-radius: 999px;
  transition: width 0.35s ease;
}
.ms-tracker--maxed .ms-tracker__progress-fill {
  background: linear-gradient(90deg, var(--gg-orange-deep, #b85e0a) 0%, var(--gg-orange, #f59e0b) 100%);
}
.ms-tracker__tick {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  margin-top: -4px;
  background: #fff;
  border: 2px solid rgba(63, 102, 251, 0.35);
  border-radius: 50%;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.ms-tracker__tick--passed {
  background: #3f66fb;
  border-color: #3f66fb;
}
.ms-tracker--maxed .ms-tracker__tick--passed {
  background: var(--gg-orange-deep, #b85e0a);
  border-color: var(--gg-orange-deep, #b85e0a);
}
.ms-tracker__hint {
  font-size: 0.78rem;
  color: #4a5568;
  line-height: 1.4;
}
.ms-tracker__hint strong {
  color: #0f1c35;
  font-weight: 600;
}
.ms-tracker--maxed .ms-tracker__hint strong { color: var(--gg-orange-deep, #b85e0a); }
.ms-tracker__note {
  font-size: 0.72rem;
  color: #4a5568;
  padding: 0.4rem 0.55rem;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 6px;
  border-left: 3px solid rgba(63, 102, 251, 0.4);
  line-height: 1.4;
}
.ms-tracker__note strong { color: #0f1c35; font-weight: 600; }

/* White-label margin calculator */
.margin-calc {
  background: #fff;
  border: 1px solid #e3e8ef;
  border-radius: 14px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 2px 6px rgba(15, 28, 53, 0.04);
}
.margin-calc--empty {
  background: linear-gradient(135deg, rgba(63, 102, 251, 0.04) 0%, rgba(63, 102, 251, 0.08) 100%);
  border-style: dashed;
}
.margin-calc__head {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.875rem;
}
.margin-calc__head strong {
  font-size: 1rem;
  color: #0f1c35;
}
.margin-calc__sub {
  font-size: 0.78rem;
  color: #4a5568;
}
.margin-calc__grid {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.margin-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 2fr;
  gap: 0.75rem;
  padding: 0.75rem;
  background: #f7fafc;
  border: 1px solid #e3e8ef;
  border-radius: 10px;
  align-items: center;
}
.margin-row--loss {
  background: rgba(255, 235, 235, 0.6);
  border-color: #fca5a5;
}
.margin-row__svc { min-width: 0; }
.margin-row__name {
  font-weight: 600;
  font-size: 0.86rem;
  color: #0f1c35;
}
.margin-row__tier {
  font-size: 0.72rem;
  color: #718096;
  margin-top: 0.15rem;
}
.margin-row__nums {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
.margin-row__num { min-width: 0; }
.margin-row__num-lbl {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #718096;
}
.margin-row__num-val {
  font-size: 0.86rem;
  font-weight: 600;
  color: #0f1c35;
  margin-top: 0.15rem;
}
.margin-row__num-val--good { color: #16a34a; }
.margin-row__num-val--loss { color: #dc2626; }
.margin-row__num-val--mute { color: #9ca3af; }
.margin-row__num-input {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin-top: 0.15rem;
}
.margin-row__num-input span {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--gg-muted, #6b7280);
}

/* Sprint 2 v3, Qualifier validation: red tint on missed questions + popup list */
.qualifier-q--missing {
  background: linear-gradient(180deg, rgba(254, 226, 226, 0.85) 0%, rgba(254, 215, 215, 0.55) 100%);
  box-shadow:
    0 0 0 2px rgba(220, 38, 38, 0.35) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 12px 24px -14px rgba(220, 38, 38, 0.20);
  animation: qualifier-q-shake 0.4s ease-in-out;
}
@keyframes qualifier-q-shake {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-4px); }
  50%  { transform: translateX(4px); }
  75%  { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}
.qm-modal__list {
  margin: 0.5rem 0 0.875rem;
  padding-left: 1.25rem;
  font-size: 0.85rem;
  color: #2d3748;
  line-height: 1.5;
}
.qm-modal__list li { margin-bottom: 0.2rem; }


/* Sprint 3, All-in cost-per-meeting card (Sales only) */
/* ── Typography pass (Sprint 5): Almarai for headings, Inter for body ── */
/* Body remains Inter via tokens.css var(--gg-font-family). Heading-flavoured
   classes that don't use <h1>-<h6> are forced to Almarai here. */
.section-head__title,
.section-head__eyebrow,
.svc__title,
.svc__cat,
.tier__name,
.summary__plan-name,
.summary__plan-name-empty,
.cac__title,
.cs-modal__title,
.qm-modal__title,
.cohort-bypass__title,
.value-strip__title,
.grants-card__title,
.intent-card__title,
.client-card__heading,
.q0-section__title,
.qualifier-q__label,
.rec-callout__label,
/* Pure body / caption text stays on Inter explicitly to avoid inheritance
   drift from any third-party styles. */
body,
.section-head__sub,
.svc__desc,
.tier__desc,
.tier__features,
.addon__title,
.addon__desc,
.cac__desc,
.qualifier-q__sub,
.qualifier-opt__title,
.qualifier-opt__desc,
.intent-card__desc,
.client-card__desc,
.value-strip__desc,
.grants-card__desc {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Almarai for the headings + display-style labels listed above this body
   block. We split it as one rule per family to keep the selectors clear. */
.section-head__title,
.section-head__eyebrow,
.svc__title,
.svc__cat,
.tier__name,
.summary__plan-name,
.summary__plan-name-empty,
.cac__title,
.cs-modal__title,
.qm-modal__title,
.cohort-bypass__title,
.value-strip__title,
.grants-card__title,
.intent-card__title,
.client-card__heading,
.q0-section__title,
.qualifier-q__label,
.rec-callout__label {
  font-family: 'Almarai', 'Inter', system-ui, -apple-system, sans-serif;
  letter-spacing: -0.01em;
}

/* ── Portal-rendered tooltips: bulletproof on-top behaviour ──
   When a tooltip is rendered via React portal directly into document.body
   (added by HoverPortalTip), it has the .hover-portal-tip class. We override
   any opacity/visibility/transform-based hover state because the tooltip is
   only mounted while hovered, no need for CSS opacity toggle. Max-int
   z-index plus position:fixed guarantee it sits above every stacking
   context in the app. */
.hover-portal-tip {
  position: fixed !important;
  z-index: 2147483647 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

/* 2026-05-22: step indicator tooltips. White card style matching the
   .summary__total-tip / .addon__capacity-tip / sidebar 'i' tooltips. */
.hover-portal-tip.step-indicator__tip {
  transform: translate(-50%, 10px);
  background: #ffffff;
  color: #374151;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.45;
  padding: 0.6rem 0.85rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  width: 260px;
  max-width: 90vw;
  text-align: left;
  white-space: normal;
}
.step-indicator__tip-wrap {
  /* 2026-05-22: was display:contents which made the wrap's bounding rect
     collapse to 0,0,0,0, causing HoverPortalTip to render the tooltip in
     the viewport's top-left. inline-flex preserves the step button's
     dimensions for getBoundingClientRect without disturbing the flex
     layout of the surrounding .step-indicator__item. */
  display: inline-flex;
  align-items: stretch;
}
/* Portal versions need a translate baseline since the inline rules used
   getBoundingClientRect from a wrapper. The JS sets top/left to the anchor's
   edge; CSS shifts the box up/down with translate to sit beside it. */
/* Portal tooltips: position is set INLINE via style={{left, top}} from
   React, and `position: fixed` comes from .hover-portal-tip above. Only
   apply transform (to shift the box relative to the anchor point) and
   leave top/left/bottom alone so the inline values can win. */
.hover-portal-tip.summary__total-tip,
.hover-portal-tip.addon__capacity-tip,
.hover-portal-tip.wl-tip,
.hover-portal-tip.wl-tip--above,
.hover-portal-tip.dis-tip,
.hover-portal-tip.dis-tip--above {
  transform: translate(-50%, calc(-100% - 10px));
}
.hover-portal-tip.dis-tip--below,
.hover-portal-tip.wl-tip--below {
  transform: translate(-50%, 10px);
}
.hover-portal-tip.wl-tip--left {
  transform: translate(calc(-100% - 10px), -50%);
}
.hover-portal-tip.wl-tip { display: flex; flex-direction: column; gap: 0.3rem; }
.hover-portal-tip.addon__capacity-tip { display: block; }
.hover-portal-tip.dis-tip { display: block; }

/* ── Per-service white-label margin calculator ────────────────────
   Uses the canonical neumorphic tokens from tokens.css (--gg-neu-*).
   The card stays the same surface regardless of margin state, polarity
   is communicated via the green/red text colour on the "You keep" cell. */
.svc-margin {
  margin: 1.25rem 0 0;
  padding: 1.15rem 1.25rem 0.95rem;
  background: var(--gg-neu-gradient);
  border: 0;
  border-radius: var(--gg-neu-radius, 16px);
  box-shadow: var(--gg-neu-shadow);
  transition: box-shadow 0.18s ease;
}

/* #120: flat / outline variant of the margin calculator. Used on the add-on
   margin (e.g. Overseas Cold Calling); the neumorphic treatment is reserved
   for the tier-level calculator. */
.svc-margin--flat {
  background: #fff;
  box-shadow: none;
  border: 1px solid var(--gg-hairline, rgba(15, 28, 53, 0.12));
  border-radius: 12px;
}

/* Header row: icon + title + hint */
.svc-margin__head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.95rem;
}
.svc-margin__head-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(5, 150, 105, 0.10);
  color: #059669;
  border: 1px solid rgba(5, 150, 105, 0.25);
  flex-shrink: 0;
}
.svc-margin--loss .svc-margin__head-icon {
  background: rgba(220, 38, 38, 0.10);
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.25);
}
.svc-margin__head-text { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
.svc-margin__title {
  font-family: 'Almarai', 'Inter', sans-serif;
  font-size: 0.92rem;
  font-weight: 800;
  color: #1f2937;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.svc-margin__hint {
  font-size: 0.74rem;
  font-weight: 400;
  color: #6b7280;
  line-height: 1.35;
}

/* Calculator: 3 cells with operator separators. */
.svc-margin__calc {
  display: grid;
  grid-template-columns: 1fr auto 1.15fr auto 1fr;
  align-items: stretch;
  gap: 0.7rem;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.svc-margin__cell {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.25rem;
  padding: 0.75rem 0.9rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  min-width: 0;
  box-shadow: none;
}
/* Retail input cell: brand-blue outline so it reads as the interactive field */
.svc-margin__cell--retail {
  background: #ffffff;
  border-color: rgba(0, 42, 191, 0.30);
  box-shadow: 0 0 0 3px rgba(0, 42, 191, 0.06);
}
.svc-margin__cell--retail:focus-within {
  border-color: var(--gg-blue, #002ABF);
  box-shadow: 0 0 0 3px rgba(0, 42, 191, 0.14);
}
.svc-margin__cell-lbl {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  line-height: 1.2;
}
.svc-margin__cell-num {
  font-family: 'Almarai', 'Inter', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #002ABF;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.svc-margin__cell-num--mute { color: #b8c0cc; font-weight: 700; }
.svc-margin--good .svc-margin__cell--result .svc-margin__cell-num { color: #059669; }
.svc-margin--loss .svc-margin__cell--result .svc-margin__cell-num { color: #dc2626; }
.svc-margin__cell-unit {
  font-size: 0.66rem;
  font-weight: 600;
  color: #9ca3af;
  letter-spacing: 0.01em;
}
.svc-margin__pct {
  display: inline-block;
  margin-top: 0.2rem;
  padding: 0.16rem 0.6rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 999px;
  background: rgba(5, 150, 105, 0.10);
  color: #059669;
  width: max-content;
  border: 1px solid rgba(5, 150, 105, 0.22);
  box-shadow: none;
}
.svc-margin__pct--loss {
  background: rgba(220, 38, 38, 0.10);
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.22);
}

/* Retail input field */
.svc-margin__cell-input {
  display: inline-flex;
  align-items: baseline;
  gap: 0.18rem;
  padding: 0;
  margin: 0;
}
.svc-margin__currency {
  font-family: 'Almarai', 'Inter', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #002ABF;
  line-height: 1.1;
}
.svc-margin__cell-input input {
  flex: 1;
  min-width: 0;
  width: 100%;
  font-family: 'Almarai', 'Inter', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #002ABF;
  background: transparent;
  border: 0;
  padding: 0;
  outline: none;
  caret-color: #002ABF;
}
.svc-margin__cell-input input::placeholder { color: #b8c0cc; font-weight: 700; }
.svc-margin__cell-input input::-webkit-outer-spin-button,
.svc-margin__cell-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.svc-margin__cell-input input[type=number] { -moz-appearance: textfield; }

.svc-margin__op {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  width: 22px;
  flex-shrink: 0;
}

.svc-margin__quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}
.svc-margin__quick-lbl {
  font-size: 0.7rem;
  font-weight: 700;
  color: #6b7280;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.svc-margin__quick-btn {
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  color: #374151;
  padding: 0.34rem 0.75rem;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.svc-margin__quick-btn:hover {
  background: #ffffff;
  border-color: rgba(0, 42, 191, 0.25);
  color: #002ABF;
}
.svc-margin__quick-btn:active {
  background: rgba(0, 42, 191, 0.06);
  border-color: rgba(0, 42, 191, 0.35);
}

.svc-margin__warn {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.85rem;
  padding: 0.65rem 0.85rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: #991b1b;
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.22);
  border-radius: 12px;
  line-height: 1.4;
}
.svc-margin__warn-icon { font-size: 0.95rem; line-height: 1; flex-shrink: 0; }

@media (max-width: 880px) {
  .svc-margin__calc { grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; }
  .svc-margin__op { display: none; }
}
@media (max-width: 560px) {
  .svc-margin { padding: 0.95rem 1rem 0.8rem; }
  .svc-margin__title { font-size: 0.85rem; }
  .svc-margin__hint { font-size: 0.7rem; }
  .svc-margin__calc { grid-template-columns: 1fr; gap: 0.5rem; }
  .svc-margin__cell-num { font-size: 1.1rem; }
  .svc-margin__cell-input input { font-size: 1.1rem; }
  .svc-margin__quick-btn { font-size: 0.68rem; padding: 0.3rem 0.6rem; }
}


/* Q1 ideal customer: 3-column layout on wide viewports to prevent it
   dominating the page vertically. Original was 2-cols which made Q1
   (6 options) take 3 rows. */
@media (min-width: 700px) {
  .qualifier-q[data-q-id="q1"] .qualifier-q__opts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* margin redesign deploy: Tue May 12 19:21:40 UTC 2026 */

/* ── Recommendation badge IMAGE (assets/badges/recommended.webp) ─────
   Sits in .svc__head-right next to the × remove button. Uses the brand
   badge image, hover/focus reveals the recommendation reason via portal
   tooltip. No hover transform/effects, the badge stays static. */
.svc__rec-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  line-height: 0;
}
.svc__rec-badge-img {
  display: block;
  height: 24px;
  width: auto;
  user-select: none;
  -webkit-user-drag: none;
}
/* Strongly recommended same size, the badge image itself conveys emphasis */
.svc__rec-badge--strong .svc__rec-badge-img {
  height: 26px;
}
@media (max-width: 600px) {
  .svc__rec-badge-img { height: 20px; }
  .svc__rec-badge--strong .svc__rec-badge-img { height: 22px; }
}

/* Hide the legacy .rec-callout banner CSS (no longer rendered) */
.rec-callout { display: none; }

/* ── .svc__head-right: absolute-positioned cluster that holds the
   recommendation badge + × remove button. Flex-aligned so they sit
   side-by-side with a gap instead of overlapping each other. ── */
.svc__head-right {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
}
@media (max-width: 600px) {
  .svc__head-right {
    top: 0.6rem;
    right: 0.6rem;
    gap: 0.35rem;
  }
  .svc__head-right .svc__rec-badge-label {
    /* Hide the long label on tight mobile cards, leave just the icon */
    display: none;
  }
  .svc__head-right .svc__rec-badge {
    padding: 0.3rem 0.4rem;
  }
}

/* ── REUSABLE 9-SLICE FRAME COMPONENT (from design guide) ────────────
   Mirrors the GlassFrame / MetalFrame React components in the GoGorilla
   design system. Drop a <span class="gg-frame gg-frame--glass" /> (or
   --metal) as the first child of ANY positioned container and it
   overlays an auto-scaling 9-slice border using 8 WebP corner+edge
   assets. Frame is purely decorative: pointer-events:none + aria-hidden.

   Usage (React):  <Frame variant="glass" />
   Usage (HTML):   <div class="gg-frame gg-frame--glass" aria-hidden="true"></div>

   Host card setup:
     - position: relative
     - overflow: hidden
     - inner children: position: relative; z-index: 1
*/
.gg-frame {
  --gg-frame-slice: 25px;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}
.gg-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  image-rendering: pixelated;
  background-repeat: no-repeat;
  background-size:
    var(--gg-frame-slice) var(--gg-frame-slice),
    calc(100% - (2 * var(--gg-frame-slice))) var(--gg-frame-slice),
    var(--gg-frame-slice) var(--gg-frame-slice),
    var(--gg-frame-slice) calc(100% - (2 * var(--gg-frame-slice))),
    var(--gg-frame-slice) calc(100% - (2 * var(--gg-frame-slice))),
    var(--gg-frame-slice) var(--gg-frame-slice),
    calc(100% - (2 * var(--gg-frame-slice))) var(--gg-frame-slice),
    var(--gg-frame-slice) var(--gg-frame-slice);
  background-position:
    left top, center top, right top,
    left center, right center,
    left bottom, center bottom, right bottom;
  opacity: 0.85;
}

/* Glass variant: pull from /assets/glass-frame/ */
.gg-frame--glass::after {
  background-image:
    url('glass-frame/Glass%20frame-top%20left.webp'),
    url('glass-frame/Glass%20frame-top%20center.webp'),
    url('glass-frame/Glass%20frame-top%20right.webp'),
    url('glass-frame/Glass%20frame-left.webp'),
    url('glass-frame/Glass%20frame-right.webp'),
    url('glass-frame/Glass%20frame-bottom%20left.webp'),
    url('glass-frame/Glass%20frame-bottom.webp'),
    url('glass-frame/Glass%20frame-bottom%20right.webp');
}

/* Metal variant: pull from /assets/metal-frame/ */
.gg-frame--metal::after {
  background-image:
    url('metal-frame/Metal%20frame-top%20left.webp'),
    url('metal-frame/Metal%20frame-top%20center.webp'),
    url('metal-frame/Metal%20frame-top%20right.webp'),
    url('metal-frame/Metal%20frame-left.webp'),
    url('metal-frame/Metal%20frame-right.webp'),
    url('metal-frame/Metal%20frame-bottom%20left.webp'),
    url('metal-frame/Metal%20frame-bottom%20center.webp'),
    url('metal-frame/Metal%20frame-bottom%20right.webp');
}

/* Convenience card wrappers that bundle position/overflow + child stacking.
   Wrap any block in .gg-frame-card and the contained children automatically
   lift above the 9-slice overlay. */
.gg-frame-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.gg-frame-card > *:not(.gg-frame) {
  position: relative;
  z-index: 1;
}

/* Summary panel metal frame.
   IMPORTANT: the legacy `.summary::before` + `.summary::after` in app.css
   render the canonical 22px-slice metal frame + soft inner shine that is the
   intended design. The new reusable <Frame variant="metal" /> component uses a
   different 25px-slice asset set ("Metal frame-top left.webp" etc.) — when
   both render simultaneously the corners and bottom edge don't line up,
   producing a "broken bottom edge" at narrow viewports. Solution: keep the
   legacy ::before/::after (the design we want) and HIDE the new <Frame> when
   it appears inside the summary. The <Frame> stays available for other host
   elements that want to opt-in to the new 9-slice system. */
.summary > .gg-frame--metal { display: none !important; }

.summary {
  position: relative;
  /* Sprint 5: scroll moved to .summary__scroll (inner wrapper) so the
     scrollbar renders INSIDE the metal frame's visual bounds. The outer
     .summary just hosts the metal frame + serves as positioning ancestor. */
  overflow: hidden;
  isolation: isolate;
}
/* Inner scrollable wrapper — sits inside the metal frame. Scrollbar lives
   inside the frame's right edge with the summary's padding as breathing
   room. max-height fills the summary, allowing long expanded breakdown
   panels to scroll within the frame. */
.summary__scroll {
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* The scrollbar styling matches the existing summary__list one so the look
     is consistent. */
  scrollbar-width: thin;
  scrollbar-color: rgba(184, 94, 10, 0.35) transparent;
}
.summary__scroll::-webkit-scrollbar { width: 8px; }
.summary__scroll::-webkit-scrollbar-thumb {
  background: rgba(184, 94, 10, 0.32);
  border-radius: 4px;
}
.summary__scroll::-webkit-scrollbar-thumb:hover { background: rgba(184, 94, 10, 0.5); }
.summary__scroll::-webkit-scrollbar-track { background: transparent; }
/* Sprint 5: disable nested scrolling on .summary__list / .summary__total etc.
   The outer .summary__scroll handles ALL vertical overflow now. Inner scroll
   containers + overscroll-behavior: contain were trapping wheel events when
   the cursor was over the services list, blocking the outer scroll. */
.summary__scroll .summary__list,
.summary__scroll .summary__total {
  overflow: visible !important;
  max-height: none !important;
  overscroll-behavior: auto !important;
}

.summary > *:not(.gg-frame) {
  position: relative;
  z-index: 1;
}

/* ── Service card background: more transparent per user request ─────
   Override of app.css §1651 (which sets .svc background to rgba(...,0.55)).
   The 9-slice glass-frame overlay (.glass-frame ::before) is unaffected —
   only the underlying surface tint becomes more see-through. */
.svc { background: rgba(255, 255, 255, 0.20) !important; }

/* Portal tooltips: the wrapper is rendered as a <div> by HoverPortalTip.
   Force min-height: max-content so the box grows to fit its block-level
   children (some interaction between position:fixed + transform:translate
   was collapsing the auto-height calculation to just the padding). */
.hover-portal-tip {
  display: block;
  min-height: max-content;
  box-sizing: border-box;
  height: auto;
}
.hover-portal-tip.addon__capacity-tip { width: 320px; max-width: min(320px, calc(100vw - 24px)); }
.hover-portal-tip.summary__total-tip { width: 280px; max-width: min(280px, calc(100vw - 24px)); }
.hover-portal-tip.wl-tip { width: 240px; max-width: min(240px, calc(100vw - 24px)); }
.hover-portal-tip.dis-tip { width: 220px; max-width: min(220px, calc(100vw - 24px)); }

/* ── Checkout form (You're All Set page) ────────────────────────────────
   Replaces the older CombinedActionCard email-only flow. Standard contact
   fields + Google reCAPTCHA. Uses the inner-line aesthetic (1px border,
   white bg) since it lives inside the convert-card neumorphic shell. */
.checkout-form .cac__header {
  margin-bottom: 0.5rem;
}
.checkout-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem 0.8rem;
}
.checkout-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.checkout-form__field--full { grid-column: 1 / -1; }
.checkout-form__label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #374151;
  letter-spacing: 0.01em;
}
.checkout-form__optional {
  font-size: 0.66rem;
  font-weight: 500;
  color: #9ca3af;
  letter-spacing: 0;
  text-transform: none;
}
/* ── 2026-05-22, GLASS TEXT INPUT (universal) ──────────────────────────
   Three states, replicates the reference screenshots:
   - default: silvery glass surface, soft hairline border, inset highlight
   - hover:   border darkens slightly, surface brightens
   - focus:   strong brand-blue border + soft outer halo
   The same recipe is applied to every text-like input below via the
   global selector, and explicitly to .checkout-form__input here so
   anywhere using that class continues to look identical. */
.checkout-form__input {
  font-family: inherit;
  font-size: 0.88rem;
  color: #111827;
  padding: 0.7rem 1rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(214, 218, 226, 0.45) 100%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 14px;
  outline: none;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.04),
    inset 0 0 0 1px rgba(255, 255, 255, 0.45),
    0 1px 2px rgba(0, 0, 0, 0.03);
  transition: border-color 0.15s ease, box-shadow 0.18s ease, background 0.15s ease;
}
.checkout-form__input:hover {
  border-color: rgba(0, 0, 0, 0.20);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(205, 210, 220, 0.50) 100%);
}
.checkout-form__input:focus {
  border-color: var(--gg-blue, #002ABF);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.70) 0%, rgba(220, 224, 232, 0.55) 100%);
  box-shadow:
    inset 0 0 0 1px var(--gg-blue, #002ABF),
    inset 0 1px 2px rgba(0, 0, 0, 0.02),
    0 0 0 4px rgba(0, 42, 191, 0.12),
    0 4px 14px rgba(0, 42, 191, 0.10);
}
.checkout-form__input--err {
  border-color: #dc2626;
  box-shadow:
    inset 0 0 0 1px #dc2626,
    inset 0 1px 2px rgba(0, 0, 0, 0.02),
    0 0 0 4px rgba(220, 38, 38, 0.12);
}

/* ── Universal glass input applied across every text-like input + textarea
   in the app. Selectors are scoped to inside .container so the global app
   shell catches all in-app forms but external mounts (Cal.com iframe,
   reCAPTCHA, etc.) are left alone. */
.container input[type="text"],
.container input[type="email"],
.container input[type="url"],
.container input[type="tel"],
.container input[type="search"],
.container input[type="password"],
.container input:not([type]),
.container textarea {
  font-family: inherit;
  color: #111827;
  padding: 0.7rem 1rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(214, 218, 226, 0.45) 100%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 14px;
  outline: none;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.04),
    inset 0 0 0 1px rgba(255, 255, 255, 0.45),
    0 1px 2px rgba(0, 0, 0, 0.03);
  transition: border-color 0.15s ease, box-shadow 0.18s ease, background 0.15s ease;
}
.container input[type="text"]:hover,
.container input[type="email"]:hover,
.container input[type="url"]:hover,
.container input[type="tel"]:hover,
.container input[type="search"]:hover,
.container input[type="password"]:hover,
.container input:not([type]):hover,
.container textarea:hover {
  border-color: rgba(0, 0, 0, 0.20);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(205, 210, 220, 0.50) 100%);
}
.container input[type="text"]:focus,
.container input[type="email"]:focus,
.container input[type="url"]:focus,
.container input[type="tel"]:focus,
.container input[type="search"]:focus,
.container input[type="password"]:focus,
.container input:not([type]):focus,
.container textarea:focus {
  border-color: var(--gg-blue, #002ABF);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.70) 0%, rgba(220, 224, 232, 0.55) 100%);
  box-shadow:
    inset 0 0 0 1px var(--gg-blue, #002ABF),
    inset 0 1px 2px rgba(0, 0, 0, 0.02),
    0 0 0 4px rgba(0, 42, 191, 0.12),
    0 4px 14px rgba(0, 42, 191, 0.10);
}

/* Smaller compact inputs (qty steppers, day-rate custom, margin calc cells)
   keep the same glass look but tighter padding + smaller corner radius so
   they don't dominate their container. */
.addon__qty-input,
.pa-spend__custom-input,
.margin-row__num-input,
.svc-margin__cell-input {
  padding: 0.35rem 0.55rem !important;
  border-radius: 10px !important;
  font-size: 0.85rem;
}
.checkout-form__input::placeholder { color: #b8c0cc; }
.checkout-form__err {
  font-size: 0.7rem;
  font-weight: 500;
  color: #b91c1c;
}
.checkout-form__captcha {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.25rem;
}
.checkout-form__captcha .g-recaptcha {
  transform-origin: top left;
}
.checkout-form__submit {
  grid-column: 1 / -1;
  margin-top: 0.4rem;
}

/* Success state */
.checkout-form__success {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  background: rgba(5, 150, 105, 0.08);
  border: 1px solid rgba(5, 150, 105, 0.25);
  border-radius: 12px;
  color: #065f46;
}
.checkout-form__success-title {
  font-weight: 800;
  font-size: 0.92rem;
  margin-bottom: 0.2rem;
  color: #065f46;
}
.checkout-form__success-body {
  font-size: 0.82rem;
  line-height: 1.45;
  color: #374151;
}

/* Mobile: stack all fields into one column */
@media (max-width: 560px) {
  .checkout-form__grid {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }
  .checkout-form__captcha { overflow-x: auto; }
  .checkout-form__captcha .g-recaptcha { transform: scale(0.88); }
}

/* Hide the legacy .cal-bridge details (removed from YoureSetPage) and the
   .grants-card (removed too). Both kept harmless in case anything else
   references the classes via cached HTML. */
.cal-bridge { display: none; }
.grants-card { display: none; }



/* ── MULTI-SERVICE DISCOUNT TRACKER ─────────────────────────────────
   Matches the design reference: white rounded card with an orange
   eyebrow heading, "X service selected" subtitle, then a vertical
   list of count→%-off rows. The currently active count gets a soft
   blue highlight + filled radio dot; others are muted with hollow
   dots. */
.ms-stack {
  /* 2026-05-22: subtle warm-white thin-glass-frame so the MSD panel reads
     as a different surface from the cool-blue MONTHLY TOTAL panel below,
     without going full amber. Background is near-white with a faint
     champagne tint; border and bevel filter are dialled back so the panel
     stays neutral with just a whisper of warmth. */
  position: relative;
  background: linear-gradient(180deg, #FBF8F4 0%, #F5EFE7 100%);
  border-radius: 14px;
  padding: 1rem 1rem 1.1rem;
  margin-top: 0.85rem;
  border: 1px solid rgba(184, 94, 10, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 6px rgba(120, 90, 40, 0.06);
  overflow: hidden;
  isolation: isolate;
}
.ms-stack::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    url('glass-frame/top-left.webp')     top left     / 14px 14px no-repeat,
    url('glass-frame/top-right.webp')    top right    / 14px 14px no-repeat,
    url('glass-frame/bottom-left.webp')  bottom left  / 14px 14px no-repeat,
    url('glass-frame/bottom-right.webp') bottom right / 14px 14px no-repeat,
    url('glass-frame/top.webp')    14px top    / calc(100% - 28px) 14px repeat-x,
    url('glass-frame/bottom.webp') 14px bottom / calc(100% - 28px) 14px repeat-x,
    url('glass-frame/left.webp')   left 14px   / 14px calc(100% - 28px) repeat-y,
    url('glass-frame/right.webp')  right 14px  / 14px calc(100% - 28px) repeat-y;
  mix-blend-mode: multiply;
  /* Very subtle warm tint on the bevel slices, was sepia(45%) + saturate(1.3). */
  filter: sepia(15%) hue-rotate(-6deg) saturate(0.9);
  z-index: 0;
}
.ms-stack > * { position: relative; z-index: 1; }
.ms-stack__head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #B85E0A;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ms-stack__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #B85E0A;
  font-size: 0.95rem;
  line-height: 1;
}
.ms-stack__lbl { flex: 1; }
.ms-stack__info-wrap {
  display: inline-flex;
  align-items: center;
}
.ms-stack__info-wrap .summary__total-info {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: help;
  color: #B85E0A;
  opacity: 0.7;
}
.ms-stack__subtitle {
  margin-top: 0.55rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: #1F2937;
}
.ms-stack__list {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.ms-stack__row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.9rem;
  color: #6B7280;  /* muted by default */
  background: transparent;
  border: 1px solid transparent;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.ms-stack__row--current {
  background: rgba(37, 99, 235, 0.06);  /* soft brand-blue fill */
  border-color: rgba(37, 99, 235, 0.18);
  color: #1F2937;
  font-weight: 600;
}
.ms-stack__dot {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border-radius: 50%;
  border: 2px solid #CBD5E1;
  background: transparent;
  display: inline-block;
  position: relative;
}
.ms-stack__dot--on {
  border-color: #2563EB;
  background: #FFFFFF;
}
.ms-stack__dot--on::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: #2563EB;
}
.ms-stack__row-label {
  flex: 1;
  text-align: left;
}
.ms-stack__row-pct {
  font-weight: 600;
  color: #4B5563;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ms-stack__row--current .ms-stack__row-pct {
  color: #2563EB;
}
.ms-stack__foot {
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px dashed rgba(184, 94, 10, 0.18);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #6B7280;
}
.ms-stack__foot strong {
  color: #047857;  /* brand green used elsewhere for max-discount accent */
  font-weight: 700;
}


/* ── MS-STACK: collapsible header + responsive YOUR PLAN ───────────────── */
/* Header is now a button (clickable). Override default button styles. */
.ms-stack__head {
  width: 100%;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.ms-stack__head:hover .ms-stack__chevron { transform: rotate(0deg); opacity: 1; }
.ms-stack__head:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.45);
  outline-offset: 2px;
  border-radius: 6px;
}
.ms-stack__head-pct {
  margin-left: auto;
  margin-right: 0.4rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: #2563EB;  /* brand blue accent showing the current % */
  letter-spacing: 0;
  text-transform: none;
}
.ms-stack__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: #B85E0A;
  transition: transform 180ms ease;
  transform: rotate(-90deg);  /* points right when closed */
}
.ms-stack--open .ms-stack__chevron { transform: rotate(0deg); }
.ms-stack__body {
  /* Slight top-spacing so the body content visually separates from the header. */
  margin-top: 0.15rem;
}
.ms-stack--closed { padding-bottom: 0.85rem; }

/* ── YOUR PLAN header: bulletproof responsive guards ─────────────────── */
/* The summary__plan flex row uses an unclassed inner wrapper for the text
   block. Make sure the flex children behave at narrow widths so neither the
   icon nor the text block can overflow / get clipped / wrap badly. */
.summary__plan--inline {
  flex-wrap: nowrap;
  overflow: hidden;
}
.summary__plan--inline .summary__plan-icon {
  flex: 0 0 32px;
  min-width: 32px;
}
.summary__plan--inline .summary__plan-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ──────────────────────────────────────────────────────────────────
   Sprint 5: Summary totals layout fix — match mockup hierarchy.
   The base .summary__total-val applies overflow:hidden + text-overflow:
   ellipsis (anti-spillover guard for the Monthly Total). For the
   secondary rows (Setup, CPM) we want visible nowrap so the £ values
   render in full at their own sizes.

   Class names used in markup:
     .summary__total-subtext           — "ex. VAT · ?" line under Monthly
     .summary__total-info--xs          — smaller info icon variant
     .summary__total-row--setup-fees   — Setup & one-off fees row
     .summary__total-label--setup-fees — its label (uppercase orange)
     .summary__total-val--setup-fees   — its £ value (orange, large)
     .summary__total-row--minor        — Estimated cost per meeting row
     .summary__total-label--minor      — its label
     .summary__total-val--minor        — its £ value (blue)
     .summary__breakdown-btn           — "See full breakdown" full-width btn
     .summary__breakdown-btn-arrow     — chevron inside the btn
   ────────────────────────────────────────────────────────────────── */

/* ex. VAT subtext — small grey caption right-aligned under the £ value. */
.summary__total .summary__total-subtext {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
  margin-top: 0.15rem;
  margin-bottom: 0.1rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gg-muted, #9ca3af);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.summary__total-info--xs svg { width: 11px; height: 11px; }

/* Setup & one-off fees row — secondary line, smaller + grey vs the primary
   Monthly Total. Dashed grey divider keeps the visual rhythm. */
.summary__total .summary__total-row--setup-fees {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 0.5rem;
  margin-top: 0.45rem;
  padding-top: 0.55rem;
  padding-bottom: 0.15rem;
  border-top: 1px dashed rgba(120, 113, 108, 0.25);
  min-width: 0;
}
.summary__total .summary__total-label--setup-fees {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gg-muted, #6b7280);
  line-height: 1.15;
  flex: 1 1 auto;
  min-width: 0;
}
.summary__total .summary__total-val--setup-fees {
  flex: 0 0 auto;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--gg-muted, #6b7280);
  white-space: nowrap;
  letter-spacing: -0.01em;
  line-height: 1.05;
  overflow: visible;
  text-overflow: clip;
}

/* CPM row — peer of Setup but with brand-blue value (informational). */
.summary__total .summary__total-row--minor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 0.5rem;
  margin-top: 0;
  padding-top: 0.7rem;
  padding-bottom: 0.2rem;
  border-top: 1px dashed rgba(232, 138, 43, 0.45);
  min-width: 0;
}
.summary__total .summary__total-label--minor {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gg-heading, #1a1a1a);
  line-height: 1.15;
  flex: 1 1 auto;
  min-width: 0;
}
.summary__total .summary__total-val--minor {
  flex: 0 0 auto;
  font-size: clamp(1.1rem, 0.9rem + 0.7vw, 1.45rem);
  font-weight: 800;
  color: var(--gg-blue, #002abf);
  white-space: nowrap;
  letter-spacing: -0.02em;
  line-height: 1.05;
  overflow: visible;
  text-overflow: clip;
}

/* "See full breakdown" full-width toggle button. */
.summary__total .summary__breakdown-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 0.85rem;
  padding: 0.7rem 0.95rem;
  background: #ffffff;
  border: 1.5px solid rgba(0, 42, 191, 0.30);
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gg-blue, #002abf);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  letter-spacing: 0.005em;
}
.summary__total .summary__breakdown-btn:hover {
  background: rgba(0, 42, 191, 0.04);
  border-color: rgba(0, 42, 191, 0.50);
}
.summary__total .summary__breakdown-btn-arrow {
  font-size: 1.2rem;
  line-height: 1;
  transition: transform 0.18s ease;
}
.summary__total .summary__breakdown-btn--open .summary__breakdown-btn-arrow {
  transform: rotate(90deg);
}

/* ──────────────────────────────────────────────────────────────────
   Sprint 5: Inline "Full breakdown" panel — opens beneath the
   See-full-breakdown button. Three sections: Recurring monthly,
   One-off fees, Cost per meeting. Reuses orange/blue tokens.
   ────────────────────────────────────────────────────────────────── */

.summary__total .summary__breakdown-btn--open .summary__breakdown-btn-arrow {
  transform: rotate(90deg);
}

.summary__total .summary__breakdown-panel {
  margin-top: 0.55rem;
  padding: 0.85rem 0.95rem;
  background: rgba(0, 42, 191, 0.025);
  border: 1px solid rgba(0, 42, 191, 0.18);
  border-radius: 12px;
  font-size: 0.8rem;
  color: var(--gg-heading, #1a1a1a);
  line-height: 1.5;
  animation: gg-breakdown-fade-in 0.18s ease-out;
}
@keyframes gg-breakdown-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.summary__total .summary__breakdown-section + .summary__breakdown-section {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px dashed rgba(0, 0, 0, 0.10);
}

.summary__total .summary__breakdown-title {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gg-muted, #6b7280);
  margin-bottom: 0.45rem;
}

.summary__total .summary__breakdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.summary__total .summary__breakdown-line {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.summary__total .summary__breakdown-line-label {
  flex: 1 1 auto;
  font-size: 0.8rem;
  color: var(--gg-heading, #1a1a1a);
}
.summary__total .summary__breakdown-line-val {
  flex: 0 0 auto;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gg-heading, #1a1a1a);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.summary__total .summary__breakdown-line--addon {
  padding-left: 0.85rem;
}
.summary__total .summary__breakdown-line--addon .summary__breakdown-line-label {
  color: var(--gg-muted, #6b7280);
  font-size: 0.75rem;
}
.summary__total .summary__breakdown-line--addon .summary__breakdown-line-val {
  color: var(--gg-muted, #6b7280);
  font-size: 0.75rem;
  font-weight: 600;
}

.summary__total .summary__breakdown-empty {
  font-size: 0.78rem;
  color: var(--gg-muted, #6b7280);
  font-style: italic;
}

.summary__total .summary__breakdown-subtotal,
.summary__total .summary__breakdown-discount {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.55rem;
  padding-top: 0.45rem;
  border-top: 1px dotted rgba(0, 0, 0, 0.12);
  font-size: 0.78rem;
}
.summary__total .summary__breakdown-subtotal { font-weight: 600; }
.summary__total .summary__breakdown-discount {
  color: var(--gg-orange, #b85e0a);
  border-top: none;
  margin-top: 0.2rem;
  padding-top: 0;
  font-weight: 600;
}
.summary__total .summary__breakdown-discount > span:last-child {
  white-space: nowrap;
}
.summary__total .summary__breakdown-code {
  font-family: Menlo, Consolas, monospace;
  background: rgba(232, 138, 43, 0.12);
  padding: 0 0.25rem;
  border-radius: 3px;
  font-size: 0.72rem;
}

.summary__total .summary__breakdown-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1.5px solid rgba(0, 42, 191, 0.35);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--gg-blue, #002abf);
  letter-spacing: -0.01em;
}
.summary__total .summary__breakdown-vat {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--gg-muted, #9ca3af);
  letter-spacing: 0.02em;
}

.summary__total .summary__breakdown-subtotal--setup {
  color: var(--gg-orange, #b85e0a);
  font-weight: 700;
  border-top-color: rgba(232, 138, 43, 0.45);
}

.summary__total .summary__breakdown-formula {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.76rem;
  color: var(--gg-muted, #6b7280);
  font-family: Menlo, Consolas, monospace;
  line-height: 1.5;
}
.summary__total .summary__breakdown-formula-result {
  color: var(--gg-blue, #002abf);
  font-family: inherit;
}
.summary__total .summary__breakdown-formula-result strong {
  font-weight: 800;
  font-size: 0.85rem;
}

.build-section--qualifier {
  /* 2026-05-22: was 3.25rem, created a large empty band above the qualifier
     under the section-head on Step 6 (Ready to launch). The section-head's
     own margin-bottom already provides enough breathing room. */
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* 2026-05-22: section-head now sits inside .youreset__grid's right column
   (Step 6 / Ready to launch). Zero out its margin-bottom so only the flex
   parent's gap contributes spacing, avoiding a stacked 48px+ empty band. */
.youreset__grid .section-head {
  margin-bottom: 0;
}
@media (max-width: 760px) {
  .build-section--qualifier { margin-top: 0; }
}

/* Sprint 5: compact commitment toggle in the service-card top-right corner.
   Overrides the base .svc__commit-bar layout: no fat background, no big
   pills, no inline label — just three small chips. */
.svc__commit-bar--corner {
  margin-top: 0;
  padding: 0.32rem;
  gap: 0.25rem;
  flex-wrap: nowrap;
  align-self: flex-start;
  /* Stretch all child buttons to match the tallest one. Without this, the
     "3 mo" pill (no save chip) renders shorter than the 6/12 mo pills which
     have a taller -20%/-40% chip inside. */
  align-items: stretch;
}
.svc__commit-bar--corner .svc__commit-bar-btn {
  padding: 0.45rem 0.85rem;
  font-size: 0.82rem;
  gap: 0.4rem;
  font-weight: 700;
  /* Ensure all three pills share an identical visual height regardless of
     whether they contain a save chip. */
  min-height: 34px;
  align-items: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 1px rgba(20, 28, 60, 0.04);
}
.svc__commit-bar--corner .svc__commit-bar-text {
  font-size: 0.82rem;
  letter-spacing: 0;
}
.svc__commit-bar--corner .svc__commit-bar-save {
  padding: 0.2rem 0.5rem;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: #B85E0A;
  color: #ffffff;
  border-radius: 999px;
}
.svc__commit-bar--corner .svc__commit-bar-btn.is-on .svc__commit-bar-save {
  background: #ffffff;
  color: #B85E0A;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
@media (max-width: 720px) {
  .svc__commit-bar--corner {
    align-self: stretch;
    margin-top: 0.5rem;
  }
}

/* ── Sprint 5: RECOMMENDED FOR YOU banner on tier cards ── */

/* The tier <button> needs position:relative + overflow:visible so the banner
   (positioned absolutely above the card top edge) can stick out. */
.tier {
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

/* 2026-05-22: pin the price block + setup fee to the bottom of each tier
   card so they line up across cards regardless of how many feature badges
   or description lines sit above. .tier is already a column flex, so a
   margin-top: auto on .tier__price pushes itself and any following
   siblings (setup fee, custom-setup-fee) down. */
.tier__price {
  margin-top: auto;
  padding-top: 0.85rem;
}

/* The banner image (assets/badges/recommended.webp) — sits centred above the
   tier card, sticking up slightly. Sized to roughly match the tier card's
   width-proportional band in the reference image. */
.tier__rec-banner {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  height: 28px;
  width: auto;
  z-index: 3;
  pointer-events: none;
  /* Neutral warm-grey drop shadow to match the orange Recommended theme. */
  filter: drop-shadow(0 2px 4px rgba(60, 40, 10, 0.18));
}

/* Blue ring around the recommended tier card (mirrors the reference where the
   Grow card has a blue border to call it out). */
.tier--recommended {
  border-color: rgba(0, 42, 191, 0.55) !important;
  box-shadow:
    0 0 0 1.5px rgba(0, 42, 191, 0.35),
    0 6px 20px -10px rgba(0, 42, 191, 0.30);
}
.tier--recommended.tier--active {
  /* When user has the recommended tier also selected, deepen the blue ring */
  box-shadow:
    0 0 0 2px rgba(0, 42, 191, 0.65),
    0 8px 24px -10px rgba(0, 42, 191, 0.40);
}

/* Push the .tier__head down a hair so the banner doesn't crowd the title row */
.tier--recommended .tier__head {
  margin-top: 0.35rem;
}

/* Mobile: a touch smaller / closer to the card */
@media (max-width: 760px) {
  .tier__rec-banner {
    top: -10px;
    height: 22px;
  }
  .tier--recommended .tier__head {
    margin-top: 0.25rem;
  }
}


/* ── CLIENT VALUE STRIP (placeholder under client type cards) ───────────
   Static row of 4 quick-win bullets that replaces the qualifier sub-section.
   Will be made dynamic per client type later. */
.client-value-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin: 1.5rem 0 0;
  padding: 1.1rem 1.5rem;
  background: linear-gradient(168deg, rgba(255,255,255,0.55) 0%, rgba(232, 222, 200, 0.45) 100%);
  border: 1px solid rgba(184, 94, 10, 0.10);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
}
.client-value-strip__item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.86rem;
  line-height: 1.35;
  color: #1F2937;
}
.client-value-strip__icon {
  font-size: 1rem;
  line-height: 1;
  flex: 0 0 auto;
}
.client-value-strip__lbl {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 500;
}
@media (max-width: 880px) {
  .client-value-strip {
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
  }
}
@media (max-width: 480px) {
  .client-value-strip {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }
}


/* ── SDG FORECAST — Cost per Qualified Meeting section ──────────────────
   Sits on the Sales & Demand Generation card between the tier grid and
   the channels picker. Renders only when a tier is picked AND tier is
   not Enterprise. Numbers derive from the data.jsx pricing matrix at
   runtime. */
.sdg-forecast {
  margin: 1.25rem 0 0;
  padding: 1.1rem 1.25rem 1rem;
  background: linear-gradient(168deg, rgba(244, 247, 255, 0.85) 0%, rgba(232, 222, 200, 0.40) 100%);
  border: 1px solid rgba(0, 42, 191, 0.14);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 1px 0 rgba(120, 90, 40, 0.05);
  font-family: 'Inter', system-ui, sans-serif;
  color: #1F2937;
}
.sdg-forecast__head {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  margin-bottom: 0.85rem;
}
.sdg-forecast__icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: #002ABF;
  color: #FFFFFF;
}
.sdg-forecast__head-text { flex: 1 1 auto; min-width: 0; }
.sdg-forecast__title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Almarai', system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: #1F2937;
  letter-spacing: -0.01em;
}
.sdg-forecast__info {
  background: transparent;
  border: 0;
  padding: 0;
  color: #6B7280;
  cursor: help;
  display: inline-flex;
  align-items: center;
}
.sdg-forecast__subtitle {
  margin-top: 0.25rem;
  font-size: 0.82rem;
  color: #002ABF;
  line-height: 1.45;
}
.sdg-forecast__subtitle strong { font-weight: 700; }
.sdg-forecast__elasticity {
  display: inline-block;
  margin-top: 0.45rem;
  padding: 0.3rem 0.65rem;
  background: rgba(4, 120, 87, 0.10);
  border: 1px solid rgba(4, 120, 87, 0.22);
  border-radius: 999px;
  font-size: 0.74rem;
  color: #047857;
  font-weight: 500;
}

/* Metrics block: cost / meetings / total / effective + a wider compare panel */
.sdg-forecast__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 1.4fr;
  gap: 0.65rem;
  padding: 0.85rem 0;
  border-top: 1px dashed rgba(0, 42, 191, 0.16);
  border-bottom: 1px dashed rgba(0, 42, 191, 0.16);
  align-items: flex-start;
}
.sdg-forecast__metric {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.sdg-forecast__metric-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6B7280;
}
.sdg-forecast__metric-val {
  font-family: 'Almarai', system-ui, sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: #002ABF;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.sdg-forecast__metric-val--row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.sdg-forecast__metric-qualifier {
  font-size: 0.78rem;
  font-weight: 500;
  color: #4B5563;
  letter-spacing: normal;
}
.sdg-forecast__save-chip {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  background: rgba(4, 120, 87, 0.12);
  border: 1px solid rgba(4, 120, 87, 0.30);
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #047857;
  white-space: nowrap;
}
.sdg-forecast__metric--effective .sdg-forecast__metric-val { color: #047857; }
.sdg-forecast__compare {
  padding-left: 0.85rem;
  border-left: 1px dashed rgba(0, 42, 191, 0.20);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.sdg-forecast__compare-stat {
  font-size: 0.85rem;
  color: #047857;
  font-weight: 600;
  line-height: 1.4;
}
.sdg-forecast__compare-stat strong { font-weight: 800; }
.sdg-forecast__compare-hint {
  font-size: 0.72rem;
  color: #4B5563;
}
.sdg-forecast__compare-expected {
  font-size: 0.7rem;
  font-weight: 600;
  color: #6B7280;
  font-style: italic;
}

/* Footer notes — 3 inline statements with help icons */
.sdg-forecast__notes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  margin-top: 0.85rem;
  font-size: 0.74rem;
  color: #4B5563;
  align-items: center;
}
.sdg-forecast__notes > span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.sdg-forecast__notes strong { color: #002ABF; font-weight: 700; }
.sdg-forecast__notes svg { color: #9CA3AF; }

/* Expand details */
.sdg-forecast__expand {
  margin-top: 0.7rem;
  border-top: 1px solid rgba(0, 42, 191, 0.12);
  padding-top: 0.8rem;
}
.sdg-forecast__expand-summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.85rem;
  color: #002ABF;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(0, 42, 191, 0.25);
  background: rgba(244, 247, 255, 0.6);
  border-radius: 999px;
  transition: background 140ms ease, border-color 140ms ease;
}
.sdg-forecast__expand-summary::-webkit-details-marker { display: none; }
.sdg-forecast__expand-summary:hover {
  background: rgba(244, 247, 255, 0.95);
  border-color: rgba(0, 42, 191, 0.45);
}
.sdg-forecast__expand-arrow {
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  transition: transform 160ms ease;
}
.sdg-forecast__expand[open] .sdg-forecast__expand-arrow { transform: rotate(90deg); }
.sdg-forecast__panel {
  margin-top: 0.8rem;
  padding: 0.95rem 1rem;
  background: #FFFFFF;
  border: 1px solid rgba(0, 42, 191, 0.12);
  border-radius: 10px;
}
.sdg-forecast__panel-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6B7280;
  margin-bottom: 0.55rem;
}
.sdg-forecast__panel-grid {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.sdg-forecast__panel-row {
  display: grid;
  grid-template-columns: 0.8fr 1fr 1fr;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: #1F2937;
  padding: 0.35rem 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
}
.sdg-forecast__panel-row--head {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6B7280;
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}
.sdg-forecast__panel-hint {
  margin-top: 0.7rem;
  font-size: 0.78rem;
  color: #4B5563;
  line-height: 1.5;
}

/* Mobile / narrow viewport — collapse columns */
@media (max-width: 880px) {
  .sdg-forecast__metrics {
    grid-template-columns: 1fr 1fr;
  }
  .sdg-forecast__compare {
    grid-column: 1 / -1;
    padding-left: 0;
    padding-top: 0.75rem;
    border-left: 0;
    border-top: 1px dashed rgba(0, 42, 191, 0.20);
  }
  .sdg-forecast__notes { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .sdg-forecast__panel-row { grid-template-columns: 1fr 1fr; }
  .sdg-forecast__panel-row > :nth-child(3) { grid-column: 1 / -1; padding-left: 0.5rem; color: #4B5563; }
}


/* ── TIER TINT SWAP ─────────────────────────────────────────────────────
   User direction: orange tint on the RECOMMENDED tier (the Grow card with
   the corner banner), and a plain white treatment on the Enterprise tier
   so it matches Starter / Scale visually. */

/* Recommended (Grow) — fully orange-themed (warm gradient + orange accents,
   no blue). Border + ring + price + radio all use the brand orange so the
   card reads as a single cohesive recommendation cue. */
.tier--recommended {
  /* Sprint 5 (refined): subtle warm-white background, just a hint of orange.
     Border + corner banner carry the recommendation cue. */
  background: linear-gradient(168deg, #FFFCF6 0%, #FFF7EA 100%) !important;
  border-color: rgba(252, 157, 43, 0.40) !important;
  box-shadow:
    0 0 0 1px rgba(252, 157, 43, 0.22),
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 6px 18px -12px rgba(252, 157, 43, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}
.tier--recommended.tier--active {
  /* Slightly warmer tint when picked, but still subtle. */
  background: linear-gradient(168deg, #FFF7EA 0%, #FFEFD6 100%) !important;
  border-color: rgba(252, 157, 43, 0.75) !important;
  box-shadow:
    0 0 0 1.5px rgba(252, 157, 43, 0.50),
    0 6px 22px -10px rgba(252, 157, 43, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}
.tier--recommended::after {
  background: radial-gradient(130% 80% at 50% -10%, rgba(255,255,255,0.55), transparent 55%) !important;
}
/* Price + setup-fee subtext: switch from brand-blue to brand-orange. */
.tier--recommended .tier__price,
.tier--recommended .tier__price-amount,
.tier--recommended .tier__price-main,
.tier--recommended .tier__price-currency {
  color: #B85E0A !important;
}
.tier--recommended .tier__price-sub,
.tier--recommended .tier__price-unit,
.tier--recommended .tier__setup-fee {
  color: #C56A1A !important;
}
/* Radio checkbox: mirror the Enterprise variant exactly — orange gradient
   when ticked, soft orange shadow stack, matching size/shape/treatment. */
.tier--recommended .tier__radio {
  border-color: rgba(184, 94, 10, 0.35) !important;
  background: rgba(255, 255, 255, 0.85) !important;
}
.tier--recommended:hover .tier__radio:not(.is-on) {
  border-color: var(--gg-orange, #B85E0A) !important;
}
.tier--recommended .tier__radio.is-on {
  background: linear-gradient(109deg, var(--gg-orange, #B85E0A) 0%, var(--gg-orange-deep, #8C4400) 100%) !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
  box-shadow:
    rgba(255, 255, 255, 0.5) -2px -2px 2px -1px,
    rgba(255, 232, 211, 0.69) 1px 1.5px 2px 0px inset,
    rgba(227, 168, 123, 0.63) -2.5px -2px 2px 0px inset,
    rgba(84, 84, 84, 0.35) 2px 2px 8px 0px,
    rgba(145, 72, 0, 0.8) -1px -4px 20px 0px inset !important;
}

/* Enterprise — strip the orange so it reads as a plain card like the others. */
.tier--ent {
  background: #FFFFFF !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 6px 18px -12px rgba(120, 90, 40, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}
.tier--ent.tier--active {
  background: linear-gradient(168deg, #FFFFFF 0%, #F5F8FF 100%) !important;
  box-shadow:
    0 0 0 1.5px rgba(0, 42, 191, 0.45),
    0 6px 20px -10px rgba(0, 42, 191, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}
.tier--ent::after {
  background: none !important;
}
/* Match the rest-of-tiers text scheme: blue price text, muted grey setup fee.
   Overrides app.css §1918 (orange) + the .tier--ent .tier__setup-fee rule
   earlier in this file. */
.tier--ent .tier__price,
.tier--ent .tier__price-amount,
.tier--ent .tier__price-main,
.tier--ent .tier__price-currency {
  color: var(--gg-blue, #002ABF) !important;
}
.tier--ent .tier__price-sub,
.tier--ent .tier__price-unit {
  color: var(--gg-muted, #6B7280) !important;
}
.tier--ent .tier__setup-fee {
  color: var(--gg-muted, #6B7280) !important;
  font-style: normal !important;
}
/* Enterprise checkbox: match the base blue radio used by Starter / Scale.
   Overrides the orange variant in app.css §1897-1912. */
.tier--ent .tier__radio {
  border-color: #E2E2E2 !important;
  background: #FFFFFF !important;
}
.tier--ent:hover .tier__radio:not(.is-on) {
  border-color: #6B82D6 !important;
}
.tier--ent .tier__radio.is-on {
  background: linear-gradient(109deg, var(--gg-blue, #002ABF) 0%, var(--gg-blue, #002ABF) 100%) !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
  box-shadow:
    rgba(255, 255, 255, 0.5) -2px -2px 2px -1px,
    rgba(219, 227, 255, 0.69) 1px 1.5px 2px 0px inset,
    rgba(123, 145, 227, 0.63) -2.5px -2px 2px 0px inset,
    rgba(84, 84, 84, 0.35) 2px 2px 8px 0px,
    rgba(0, 31, 145, 0.8) -1px -4px 20px 0px inset !important;
}
/* Enterprise 'Speak to us' CTA — compact, inherits tier__price sizing so it
   reads at the same visual weight as prices on the other tier cards. */
.tier__speak-btn {
  display: inline-block;
  font-size: inherit;
  font-weight: 700;
  color: var(--gg-blue, #002ABF);
  text-decoration: none;
  cursor: pointer;
  padding: 0;
  background: none;
  border: none;
  line-height: 1;
}
.tier__speak-btn:hover {
  text-decoration: underline;
  opacity: 0.85;
}


/* ── BRAND ORANGE TOKEN OVERRIDE (Sprint 5) ────────────────────────────
   Replaces the legacy --gg-orange (#E88A2B) / --gg-orange-deep (#B85E0A)
   in app.css with the new accent #FC9D2B. Applied at :root so every var()
   reference picks it up automatically. */
:root {
  --gg-orange: #FC9D2B !important;
  --gg-orange-hover: #E68900 !important;
  --gg-orange-deep: #C77800 !important;
  --gg-orange-light: #FFE8D3 !important;
  --gg-orange-glow: rgba(252, 157, 43, 0.35) !important;

  /* 2026-05-28: canonical premium-check design tokens.
     Used by every "selected" check on the app — role tiles, day-rate tiles,
     tier radios, lead-vol radios, qualifier-opt radios, intent cards,
     pa-spend tiles, addons disc, ps-chip, etc. Single source of truth so
     palette tweaks land in one place. */
  --gg-premium-check-bg: linear-gradient(109deg, var(--gg-blue) 0%, var(--gg-blue) 100%);
  --gg-premium-check-shadow:
    rgba(255, 255, 255, 0.5) -2px -2px 2px -1px,
    rgba(219, 227, 255, 0.69) 1px 1.5px 2px 0px inset,
    rgba(123, 145, 227, 0.63) -2.5px -2px 2px 0px inset,
    rgba(84, 84, 84, 0.35) 2px 2px 8px 0px,
    rgba(0, 31, 145, 0.8) -1px -4px 20px 0px inset;

  /* 2026-05-28: orange variant of the premium check, used for "selected
     but waitlisted" states (e.g. .addon.addon--full .addon__check--on).
     Mirrors the blue tokens but amber-tinted. */
  --gg-premium-check-bg-orange: linear-gradient(109deg, #B85E0A 0%, #B85E0A 100%);
  --gg-premium-check-shadow-orange:
    rgba(255, 255, 255, 0.5) -2px -2px 2px -1px,
    rgba(255, 232, 211, 0.69) 1px 1.5px 2px 0px inset,
    rgba(227, 168, 123, 0.63) -2.5px -2px 2px 0px inset,
    rgba(84, 84, 84, 0.35) 2px 2px 8px 0px,
    rgba(184, 94, 10, 0.8) -1px -4px 20px 0px inset;
}

/* Refresh hardcoded references I added in earlier Sprint 5 overrides so
   they track the new accent (instead of staying on the deprecated #B85E0A).
   Order: recommended-tier price + setup, recommended-tier radio, commit
   chips on the commitment toggle. */
.tier--recommended .tier__price,
.tier--recommended .tier__price-amount,
.tier--recommended .tier__price-main,
.tier--recommended .tier__price-currency {
  color: var(--gg-orange-deep, #C77800) !important;
}
.tier--recommended .tier__price-sub,
.tier--recommended .tier__price-unit,
.tier--recommended .tier__setup-fee {
  color: var(--gg-orange, #FC9D2B) !important;
}
.tier--recommended {
  /* Subtle background + light orange border-glow only. Recommended cue lives
     in the corner banner + thin border, not in a heavy fill. */
  background: linear-gradient(168deg, #FFFCF6 0%, #FFF7EA 100%) !important;
  border-color: rgba(252, 157, 43, 0.40) !important;
  box-shadow:
    0 0 0 1px rgba(252, 157, 43, 0.22),
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 6px 18px -12px rgba(252, 157, 43, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}
.tier--recommended.tier--active {
  background: linear-gradient(168deg, #FFF7EA 0%, #FFEFD6 100%) !important;
  border-color: rgba(252, 157, 43, 0.75) !important;
  box-shadow:
    0 0 0 1.5px rgba(252, 157, 43, 0.50),
    0 6px 22px -10px rgba(252, 157, 43, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}
.tier--recommended .tier__radio {
  border-color: rgba(252, 157, 43, 0.40) !important;
}
.tier--recommended:hover .tier__radio:not(.is-on) {
  border-color: var(--gg-orange, #FC9D2B) !important;
}

/* Commitment chips (-20% / -40%) — use the new accent for both states. */
.svc__commit-bar--corner .svc__commit-bar-save {
  background: var(--gg-orange, #FC9D2B) !important;
  color: #FFFFFF !important;
}
.svc__commit-bar--corner .svc__commit-bar-btn.is-on .svc__commit-bar-save {
  background: #FFFFFF !important;
  color: var(--gg-orange-deep, #C77800) !important;
}
.svc__commit-bar-save { color: var(--gg-orange-deep, #C77800) !important; }
.svc__commit-bar-btn.is-on .svc__commit-bar-save { color: var(--gg-orange-deep, #C77800) !important; }

/* SDG forecast — accent the icon, info button, eyebrow + save chip with
   the new orange where appropriate (kept tonal). */
.sdg-forecast__notes strong { color: var(--gg-orange-deep, #C77800) !important; }


/* ── Glass frame on the onboarding availability indicator ──────────
   Replaces the hand-rolled glass shadows on .addon__capacity-track with
   the canonical 9-slice Frame component (slice=12 to fit the small pill).
   The hand-rolled ::before / ::after / inset shadows in app.v2.css §1190+
   are now redundant — they're disabled here so the WebP frame is the only
   border treatment. */
.addon__capacity-track {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  isolation: isolate;
}
.addon__capacity-track::before,
.addon__capacity-track::after {
  display: none !important;
}
.addon__capacity-track > *:not(.gg-frame) {
  position: relative;
  z-index: 1;
}
/* Tighten the glass frame so its inner shadow doesn't crowd the pill. */
.addon__capacity-track .gg-frame {
  border-radius: 100px;
}


/* ── Glass capsule on the onboarding availability indicator ──────────
   The 9-slice <Frame variant="glass" /> doesn't blend on a 26px fully-
   rounded pill (the WebP corners are square and the shape needs perfectly
   smooth curved edges). Use a CSS-only "glass pill" treatment that
   mimics the same silver-glass aesthetic at small scale: thin pearlescent
   border + inner highlight + soft outer glow. */
.addon__capacity-track {
  /* Single clean glass pill — border replaced with an outer box-shadow ring
     so the video child fills 100% of the track edge-to-edge. */
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(248, 250, 253, 0.85) 50%,
      rgba(238, 242, 248, 0.95) 100%) !important;
  border: 0 !important;
  box-shadow:
    /* The 1px pearlescent border, as an outer ring */
    0 0 0 1px rgba(220, 226, 235, 0.95),
    /* Outer subtle drop for lift */
    0 1px 2px rgba(15, 28, 53, 0.06),
    /* Pearlescent outer halo */
    0 0 0 2px rgba(255, 255, 255, 0.85),
    /* Inner well */
    inset 0 1px 1px rgba(15, 28, 53, 0.12),
    inset 0 -1px 1px rgba(255, 255, 255, 0.95),
    inset 1px 0 1px rgba(255, 255, 255, 0.6),
    inset -1px 0 1px rgba(255, 255, 255, 0.6) !important;
  isolation: isolate;
}
/* Top-edge specular shine — thin curved highlight along the upper half. */
.addon__capacity-track::before {
  display: block !important;
  content: '' !important;
  position: absolute !important;
  top: 1px !important;
  left: 6% !important;
  right: 6% !important;
  height: 38% !important;
  border-radius: 100px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 100%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
.addon__capacity-track::after { display: none !important; }
.addon__capacity-track > *:not(.gg-frame) {
  position: relative;
  z-index: 1;
}


/* Edge-to-edge: video fills the glass pill, no gap at the ends. */
.addon__capacity-track {
  padding: 0 !important;
}
.addon__capacity-track .capacity-video {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border-radius: 100px !important;
  object-fit: cover;
  position: relative;
  z-index: 1;
}


/* ── MOBILE: stack the service-card top-right cluster ABOVE content ──
   Default behaviour (desktop): .svc__head is a horizontal flex row with
   icon + title-wrap + head-right; .svc__head-right is absolute-positioned
   in the top-right corner. On mobile we want the commit toggle pinned at
   the VERY TOP of the card (not floating over content below).

   Strategy: keep .svc__head as flex but enable wrap, give .svc__head-right
   width:100% + order:-1 so it sits on its own row above the icon/title row.
   Icon + title-wrap stay side-by-side on the following row. */
@media (max-width: 760px) {
  .svc__head {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    row-gap: 0.75rem !important;
    margin-top: 0 !important;
  }
  /* Lift head-right onto its own row at the top. */
  .svc__head-right {
    position: static !important;
    top: auto !important;
    right: auto !important;
    order: -1 !important;
    width: 100% !important;
    margin: 0 !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
  }
  /* Commit toggle takes full width within head-right so all three pills
     sit on one centred row. */
  .svc__head-right .svc__commit-bar--corner {
    flex: 1 1 100%;
    order: 1;
    justify-content: center;
  }
  /* Recommendation badge + remove button (if present) sit above the toggle. */
  .svc__head-right > *:not(.svc__commit-bar--corner) {
    order: 0;
  }
}

/* ── BREAKDOWN MODAL ─────────────────────────────────────────────────────
   Centred modal dialog launched by the "See full breakdown" CTA in the
   sidebar. Portal-rendered to document.body so it escapes the sidebar's
   metal frame + clipping context. Mirrors the reference design: header,
   subtitle, body (empty-state OR detailed line items), summary mini-card
   with three top-line numbers, and a footer action row. */
.bdwn-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.bdwn-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 28, 53, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}
.bdwn-modal__panel {
  position: relative;
  z-index: 1;
  max-width: 640px;
  width: 100%;
  max-height: calc(100vh - 3rem);
  background: #ffffff;
  border: 1px solid rgba(15, 28, 53, 0.08);
  border-radius: 18px;
  box-shadow:
    0 30px 60px -16px rgba(15, 28, 53, 0.4),
    0 12px 24px -10px rgba(15, 28, 53, 0.18);
  padding: 1.75rem 1.75rem 1.25rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: bdwnModalIn 180ms ease-out;
}
@keyframes bdwnModalIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.bdwn-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(15, 28, 53, 0.08);
  background: #F6F7FB;
  color: #4a5066;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.bdwn-modal__close:hover {
  background: #EBEDF4;
  color: #1a1f2e;
}
.bdwn-modal__title {
  margin: 0 0 0.4rem;
  font-size: 1.35rem;
  font-weight: 700;
  color: #0f1c35;
  font-family: 'Almarai', 'Inter', system-ui, sans-serif;
  letter-spacing: -0.01em;
  padding-right: 2.5rem;
}
.bdwn-modal__subtitle {
  margin: 0 0 1.25rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #5a6173;
}
.bdwn-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 -0.25rem 1rem;
  padding: 0 0.25rem;
}
/* Empty-state card shown when no services have been selected. */
.bdwn-modal__empty {
  background: #F7F8FB;
  border: 1px solid rgba(15, 28, 53, 0.06);
  border-radius: 14px;
  padding: 1.5rem 1.25rem;
  text-align: center;
  margin-bottom: 1rem;
}
.bdwn-modal__empty-title {
  font-weight: 700;
  font-size: 1rem;
  color: #0f1c35;
  margin-bottom: 0.5rem;
}
.bdwn-modal__empty-desc {
  font-size: 0.9rem;
  line-height: 1.55;
  color: #5a6173;
  max-width: 50ch;
  margin: 0 auto;
}
/* Detailed sections (recurring monthly / one-off / cost per meeting). */
.bdwn-modal__section {
  margin-bottom: 1rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid rgba(15, 28, 53, 0.06);
}
.bdwn-modal__section:last-of-type {
  border-bottom: 0;
  margin-bottom: 0.5rem;
}
.bdwn-modal__section-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7388;
  margin-bottom: 0.625rem;
}
.bdwn-modal__list {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
}
.bdwn-modal__line {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
  font-size: 0.92rem;
  color: #1a1f2e;
  border-bottom: 1px dashed rgba(15, 28, 53, 0.05);
}
.bdwn-modal__line:last-child { border-bottom: 0; }
.bdwn-modal__line--addon .bdwn-modal__line-label { color: #4a5066; padding-left: 0.5rem; }
.bdwn-modal__line-label { flex: 1 1 auto; }
.bdwn-modal__line-val { font-weight: 600; white-space: nowrap; }
.bdwn-modal__subtotal,
.bdwn-modal__discount,
.bdwn-modal__total {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.92rem;
  padding: 0.35rem 0;
}
.bdwn-modal__subtotal { color: #4a5066; font-weight: 600; border-top: 1px solid rgba(15, 28, 53, 0.06); margin-top: 0.25rem; }
.bdwn-modal__subtotal--setup { font-weight: 700; color: #1a1f2e; }
.bdwn-modal__discount { color: #C77800; font-weight: 600; }
.bdwn-modal__total {
  margin-top: 0.25rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(15, 28, 53, 0.12);
  font-weight: 700;
  color: #0f1c35;
  font-size: 1rem;
}
.bdwn-modal__vat { font-weight: 500; font-size: 0.75rem; color: #6b7388; }
.bdwn-modal__code {
  background: #F0F2F8;
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
  font-size: 0.78rem;
  font-family: 'SF Mono', Consolas, monospace;
  color: #0f1c35;
}
.bdwn-modal__formula {
  background: #F7F8FB;
  border-radius: 10px;
  padding: 0.75rem 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.86rem;
  color: #4a5066;
}
.bdwn-modal__formula-result { color: #0f1c35; font-size: 0.95rem; padding-top: 0.3rem; border-top: 1px solid rgba(15, 28, 53, 0.06); }
/* Headline summary mini-card — always visible at the bottom of the modal
   body, with the three top-line numbers (setup + monthly + cost-per-meeting). */
.bdwn-modal__summary {
  margin-top: 0.5rem;
  background: #EEF2FB;
  border: 1px solid rgba(0, 42, 191, 0.08);
  border-radius: 12px;
  padding: 0.875rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.bdwn-modal__summary-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.92rem;
  color: #1a1f2e;
}
.bdwn-modal__summary-row > span:first-child { color: #4a5066; }
.bdwn-modal__summary-row > span:last-child { font-weight: 700; color: #0f1c35; white-space: nowrap; }
/* Footer action row. */
.bdwn-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.625rem;
  flex-shrink: 0;
  padding-top: 0.875rem;
  border-top: 1px solid rgba(15, 28, 53, 0.06);
  flex-wrap: wrap;
}
.bdwn-modal__btn {
  padding: 0.625rem 1.125rem;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  font-family: inherit;
  white-space: nowrap;
}
.bdwn-modal__btn--ghost {
  background: #ffffff;
  border-color: rgba(15, 28, 53, 0.14);
  color: #1a1f2e;
}
.bdwn-modal__btn--ghost:hover {
  background: #F6F7FB;
  border-color: rgba(15, 28, 53, 0.22);
}
.bdwn-modal__btn--primary {
  background: linear-gradient(180deg, #1f3df0 0%, #002ABF 100%);
  border-color: rgba(0, 14, 80, 0.5);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 2px 6px rgba(0, 32, 160, 0.35);
}
.bdwn-modal__btn--primary:hover {
  filter: brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 4px 10px rgba(0, 32, 160, 0.45);
}
@media (max-width: 560px) {
  .bdwn-modal { padding: 0.75rem; }
  .bdwn-modal__panel {
    padding: 1.25rem 1.25rem 1rem;
    max-height: calc(100vh - 1.5rem);
    border-radius: 14px;
  }
  .bdwn-modal__title { font-size: 1.15rem; }
  .bdwn-modal__subtitle { font-size: 0.86rem; margin-bottom: 1rem; }
  .bdwn-modal__actions { flex-direction: column-reverse; align-items: stretch; }
  .bdwn-modal__btn { width: 100%; justify-content: center; text-align: center; }
}

/* ── TIER FEATURE BADGES (pill chips) ─────────────────────────────────────
   Rendered below .tier__head on each tier card. Short feature labels with a
   leading checkmark, laid out as wrap-friendly pill chips. Pulled from
   window.TIER_BADGES[serviceId][tierId] in data.jsx. */
.tier__badges {
  list-style: none;
  margin: 0.4rem 0 0.6rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.tier__badge-chip {
  display: inline-flex;
  /* 2026-05-29 (v2): start cross-axis alignment so the check icon stays
     top-aligned with the first line of wrapped text — not vertically
     centred across both lines. Reads cleaner for multi-line chips. */
  align-items: flex-start;
  gap: 0.35rem;
  padding: 0.32rem 0.65rem;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.25;
  color: #1a2a4a;
  background: #EEF3FB;
  border: 1px solid rgba(0, 42, 191, 0.10);
  border-radius: 12px;
  /* Wrapping rules: 2-line content allowed, chip width hugs its actual
     wrap width (fit-content) so multi-line chips look like the sibling
     single-line ones — left-aligned, tight to text, not stretched to
     the column. max-width: 100% caps overflow on very long single
     words. */
  white-space: normal;
  text-align: left;
  width: fit-content;
  max-width: 100%;
  overflow-wrap: break-word;
  /* 2026-05-29 (v3): balance the wrap so both lines are roughly equal
     width. Without this, browsers greedily fill line 1 then dump the
     remainder onto line 2, leaving empty space to the right of the
     shorter line. text-wrap: balance produces a much tighter visual
     hug — chip background sits flush around the text on both sides. */
  text-wrap: balance;
}
.tier__badge-check {
  flex-shrink: 0;
  /* Default checkmark is brand blue. The .tier--recommended override below
     swaps it to orange for the Grow tier only. */
  color: var(--gg-blue, #002ABF);
}
/* Active tier (selected, NON-recommended) deepens the chip tint slightly. */
.tier--active .tier__badge-chip {
  background: #E1EBFA;
  border-color: rgba(0, 42, 191, 0.20);
}
/* Recommended tier replaces the blue chips with warm near-white + orange
   accent, regardless of whether it is also the active/selected tier. The
   compound .tier--active.tier--recommended selector beats .tier--active so
   the active state cannot reintroduce the blue tint. */
.tier--recommended .tier__badge-chip,
.tier--active.tier--recommended .tier__badge-chip {
  background: #FFFFFF !important;
  border-color: rgba(252, 157, 43, 0.30) !important;
  color: #5a4220 !important;
}
.tier--recommended .tier__badge-check,
.tier--active.tier--recommended .tier__badge-check {
  color: var(--gg-orange, #FC9D2B) !important;
}
/* Enterprise keeps the default blue tint. */
@media (max-width: 760px) {
  .tier__badges { gap: 0.3rem; }
  .tier__badge-chip { font-size: 0.70rem; padding: 0.28rem 0.55rem; }
}

/* ── CHECKOUT FORM: PHONE INPUT WITH COUNTRY SELECTOR ────────────────────
   Composite control split into 3 horizontal segments:
     [ trigger (flag + caret + invisible select) | dial code | number input ]
   The trigger holds the visible flag emoji + caret AND an invisible native
   <select> overlaid on top so clicking anywhere in that region opens the
   dropdown. A vertical divider separates the trigger from the dial code,
   and another from the dial code to the input. Predictable padding throughout
   so spacing stays clean even when the OS lacks emoji flag glyphs (e.g.
   Windows renders "GB" text — we add explicit min-width to keep the layout
   stable). */
.checkout-form__phone {
  /* 2026-05-22: matched to the universal glass input style so the country
     selector + dial code + number field read as one continuous surface
     instead of the only-the-input-is-glass look. */
  position: relative;
  display: flex;
  align-items: stretch;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(214, 218, 226, 0.45) 100%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.04),
    inset 0 0 0 1px rgba(255, 255, 255, 0.45),
    0 1px 2px rgba(0, 0, 0, 0.03);
  transition: border-color 0.15s ease, box-shadow 0.18s ease, background 0.15s ease;
  overflow: hidden;
}
.checkout-form__phone:hover {
  border-color: rgba(0, 0, 0, 0.20);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(205, 210, 220, 0.50) 100%);
}
.checkout-form__phone:focus-within {
  border-color: var(--gg-blue, #002ABF);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.70) 0%, rgba(220, 224, 232, 0.55) 100%);
  box-shadow:
    inset 0 0 0 1px var(--gg-blue, #002ABF),
    inset 0 1px 2px rgba(0, 0, 0, 0.02),
    0 0 0 4px rgba(0, 42, 191, 0.12),
    0 4px 14px rgba(0, 42, 191, 0.10);
}
.checkout-form__phone--err {
  border-color: rgba(220, 38, 38, 0.7);
}
.checkout-form__phone--err:focus-within {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
}
/* Trigger region — flag + caret + invisible <select> overlay. */
.checkout-form__phone-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  min-width: 4.5rem;
  border-right: 1px solid rgba(15, 28, 53, 0.10);
  cursor: pointer;
}
.checkout-form__phone-flag {
  display: inline-flex;
  align-items: center;
  font-size: 1.15rem;
  line-height: 1;
  /* Reserve space for the OS to render either the emoji flag or a 2-char
     fallback ("GB"/"US"). 1.5em min-width keeps both renderings stable. */
  min-width: 1.4em;
  justify-content: center;
  pointer-events: none;
  user-select: none;
  /* Slight font-weight bump so the "GB" text fallback (Windows) reads
     comfortably alongside the body text. */
  font-weight: 600;
  color: #1a2a4a;
}
.checkout-form__phone-caret {
  flex-shrink: 0;
  color: rgba(15, 28, 53, 0.55);
  pointer-events: none;
}
.checkout-form__phone-country {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  color: transparent;
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  opacity: 0;
  z-index: 2;
}
.checkout-form__phone-country:focus { outline: none; }
.checkout-form__phone-country option {
  color: #1a2a4a;
  background: #FFFFFF;
}
/* Dial code (+44, +1) — its own segment with a right divider. */
.checkout-form__phone-dial {
  display: inline-flex;
  align-items: center;
  padding: 0 0.75rem;
  color: #4a5066;
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  border-right: 1px solid rgba(15, 28, 53, 0.10);
}
/* The number input — fills the remaining row. */
.checkout-form__phone-input {
  /* 2026-05-22: explicit overrides so this nested input doesn't get the
     universal glass-input gradient + border + shadow (those now live on
     the parent .checkout-form__phone wrapper). */
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.7rem 0.85rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  font: inherit;
  font-size: 0.95rem;
  color: #1a2a4a;
  outline: none;
}
.checkout-form__phone-input:hover,
.checkout-form__phone-input:focus {
  background: transparent !important;
  box-shadow: none !important;
}
.checkout-form__phone-input::placeholder {
  color: rgba(15, 28, 53, 0.35);
}
@media (max-width: 560px) {
  .checkout-form__phone-trigger { padding: 0 0.6rem; min-width: 4.2rem; gap: 0.4rem; }
  .checkout-form__phone-dial { font-size: 0.9rem; padding: 0 0.6rem; }
  .checkout-form__phone-input { font-size: 0.92rem; padding: 0.65rem 0.7rem; }
}

/* ── SECONDARY BUTTON: neumorphic raised pill ────────────────────────────
   Applies the design-guide "Secondary Button" look to .btn--ghost (the
   default white/secondary button used for Back, Cancel, dismissive CTAs).
   Soft white pill with a layered drop shadow and a subtle top highlight
   so the button reads as a raised surface against the page background.
   Hover deepens the shadow; active flattens it slightly so the press
   feedback is physical. Also covers .bdwn-modal__btn--ghost (Done button
   on the breakdown modal) and any explicit .btn--secondary alias. */
/* 2026-05-22: refactored to match the design-guide SECONDARY_BUTTON_GUIDE.md
   exactly. Six-layer neumorphic shadow stack on a light-grey gradient base.
   Pill shape (999px) retained for the Back-button usage; if a 12px rounded
   variant is needed, add .btn--ghost--square. */
.btn--ghost,
.btn--secondary,
.bdwn-modal__btn--ghost {
  background: linear-gradient(109deg, rgb(230, 230, 230) 13%, rgb(230, 230, 230) 100%) !important;
  color: #111111 !important;
  border: 1px solid transparent !important;
  /* 2026-05-22: matched primary button radius (12px) instead of pill. */
  border-radius: 12px !important;
  font-weight: 600;
  box-shadow:
    rgba(255, 255, 255, 0.36) -2px -2px 2px -1px,
    rgba(255, 255, 255, 0.60)  1px 1.5px 2px 0px inset,
    rgba(140, 139, 137, 0.29) -2px -2px 2px 0px inset,
    rgba(224, 223, 222, 0.50) -2px -2px 8px 0px,
    rgba( 84,  84,  84, 0.14)  2px 2px 8px 0px,
    rgba(179, 179, 179, 0.36) -1px -4px 20px 0px inset !important;
  transition:
    background 150ms ease-out,
    box-shadow 150ms ease-out,
    border-color 150ms ease-out;
}
.btn--ghost:hover,
.btn--secondary:hover,
.bdwn-modal__btn--ghost:hover {
  background: linear-gradient(109deg, rgb(242, 242, 242) 0%, rgb(230, 230, 230) 121%) !important;
  color: #111111 !important;
  box-shadow:
    rgba(222, 222, 222, 0.36) -2px -2px 2px -1px,
    rgba(255, 255, 255, 0.84)  2px 2.5px 2px 0px inset,
    rgba(140, 139, 137, 0.40) -3px -3px 3px 0px inset,
    rgba( 59,  59,  59, 0.24)  2px 10px 8px 0px,
    rgba(179, 179, 179, 0.40)  1px -4px 20px 0px inset !important;
  transform: none;
}
.btn--ghost:active,
.btn--secondary:active,
.bdwn-modal__btn--ghost:active {
  transform: translateY(1px);
  box-shadow:
    rgba(255, 255, 255, 0.20) -1px -1px 1px 0px,
    rgba(255, 255, 255, 0.40)  1px 1px 1px 0px inset,
    rgba(140, 139, 137, 0.40) -2px -2px 3px 0px inset,
    rgba( 84,  84,  84, 0.08)  1px 1px 3px 0px !important;
}
.btn--ghost:focus-visible,
.btn--secondary:focus-visible,
.bdwn-modal__btn--ghost:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(0, 42, 191, 0.35),
    rgba(255, 255, 255, 0.36) -2px -2px 2px -1px,
    rgba(255, 255, 255, 0.60)  1px 1.5px 2px 0px inset,
    rgba(140, 139, 137, 0.29) -2px -2px 2px 0px inset,
    rgba(224, 223, 222, 0.50) -2px -2px 8px 0px,
    rgba( 84,  84,  84, 0.14)  2px 2px 8px 0px,
    rgba(179, 179, 179, 0.36) -1px -4px 20px 0px inset !important;
}
.btn--ghost:disabled,
.btn--secondary:disabled,
.bdwn-modal__btn--ghost:disabled {
  opacity: 0.5;
  transform: none !important;
  cursor: not-allowed;
}
.btn--ghost:disabled:hover,
.btn--secondary:disabled:hover,
.bdwn-modal__btn--ghost:disabled:hover {
  background: linear-gradient(109deg, rgb(230, 230, 230) 13%, rgb(230, 230, 230) 100%) !important;
  box-shadow:
    rgba(255, 255, 255, 0.36) -2px -2px 2px -1px,
    rgba(255, 255, 255, 0.60)  1px 1.5px 2px 0px inset,
    rgba(140, 139, 137, 0.29) -2px -2px 2px 0px inset,
    rgba(224, 223, 222, 0.50) -2px -2px 8px 0px,
    rgba( 84,  84,  84, 0.14)  2px 2px 8px 0px,
    rgba(179, 179, 179, 0.36) -1px -4px 20px 0px inset !important;
}
/* Tighten the back-arrow glyph so it sits flush with "Back" label. */
.btn--ghost .btn__arrow--back {
  font-size: 1.1em;
  line-height: 1;
  margin-right: 0.15rem;
  color: #4a5066;
}

/* ── THIN GLASS FRAME (reusable component) ───────────────────────────────
   Same 8-slice WebP bevel as the base glass-frame look, but rendered at
   14 px (~35 % smaller than the standard 22 px slices). Use this on
   secondary / nested surfaces where the standard frame would feel too
   heavy — e.g. the add-ons disclosure that nests inside an already
   framed service card.

   Usage: add the .thin-glass-frame class to any element. Position-
   relative is forced so the absolute-positioned ::before lines up. */
.thin-glass-frame {
  position: relative;
}
.thin-glass-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    url('glass-frame/top-left.webp')     top left     / 14px 14px no-repeat,
    url('glass-frame/top-right.webp')    top right    / 14px 14px no-repeat,
    url('glass-frame/bottom-left.webp')  bottom left  / 14px 14px no-repeat,
    url('glass-frame/bottom-right.webp') bottom right / 14px 14px no-repeat,
    url('glass-frame/top.webp')    14px top    / calc(100% - 28px) 14px repeat-x,
    url('glass-frame/bottom.webp') 14px bottom / calc(100% - 28px) 14px repeat-x,
    url('glass-frame/left.webp')   left 14px   / 14px calc(100% - 28px) repeat-y,
    url('glass-frame/right.webp')  right 14px  / 14px calc(100% - 28px) repeat-y;
  mix-blend-mode: multiply;
  z-index: 1;
}
.thin-glass-frame > * { position: relative; z-index: 2; }

/* ── GLASS FRAME (reusable component, 22px slices) ───────────────────────
   Standard glass-frame bevel: same 8-slice WebP overlay used inline on
   tier cards, role tiles, qualifier cards, but exposed as a reusable
   class. Pair this with .thin-glass-frame (14px slices) when you want a
   parent / child hierarchy of bevels (e.g. an outer container in regular
   glass with thin-framed children nested inside). */
.glass-frame {
  position: relative;
}
.glass-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    url('glass-frame/top-left.webp')     top left     / 22px 22px no-repeat,
    url('glass-frame/top-right.webp')    top right    / 22px 22px no-repeat,
    url('glass-frame/bottom-left.webp')  bottom left  / 22px 22px no-repeat,
    url('glass-frame/bottom-right.webp') bottom right / 22px 22px no-repeat,
    url('glass-frame/top.webp')    22px top    / calc(100% - 44px) 22px repeat-x,
    url('glass-frame/bottom.webp') 22px bottom / calc(100% - 44px) 22px repeat-x,
    url('glass-frame/left.webp')   left 22px   / 22px calc(100% - 44px) repeat-y,
    url('glass-frame/right.webp')  right 22px  / 22px calc(100% - 44px) repeat-y;
  mix-blend-mode: multiply;
  z-index: 1;
}
.glass-frame > * { position: relative; z-index: 2; }

/* ── Individual add-on items get the THIN glass frame ────────────────────
   .addon inherits a 22px glass overlay from app.css. Override to 14px so
   the add-on items read as nested cards inside the (22px) disclosure.
   The 14px corner slices in the WebPs match a ~10px border-radius, so we
   pull .addon down from its base 14px radius to keep the corner curve
   flush with the painted bevel. */
.addon {
  border-radius: 10px !important;
}
.addon::before {
  background:
    url('glass-frame/top-left.webp')     top left     / 14px 14px no-repeat,
    url('glass-frame/top-right.webp')    top right    / 14px 14px no-repeat,
    url('glass-frame/bottom-left.webp')  bottom left  / 14px 14px no-repeat,
    url('glass-frame/bottom-right.webp') bottom right / 14px 14px no-repeat,
    url('glass-frame/top.webp')    14px top    / calc(100% - 28px) 14px repeat-x,
    url('glass-frame/bottom.webp') 14px bottom / calc(100% - 28px) 14px repeat-x,
    url('glass-frame/left.webp')   left 14px   / 14px calc(100% - 28px) repeat-y,
    url('glass-frame/right.webp')  right 14px  / 14px calc(100% - 28px) repeat-y !important;
}

/* ── ANSWERS RECAP BAR ───────────────────────────────────────────────────
   Rendered above the first service-step content. Light translucent strip
   showing the user's client-type + qualifier answers as pill chips, with
   an Edit link on the right that jumps them back to step 0 to change them.
   Designed to disappear into the page when scanning; surfaces context
   without competing with the service cards below it. */
.answers-recap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.55rem 0.9rem;
  margin: 0 0 1rem;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(15, 28, 53, 0.08);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 1px 2px rgba(15, 28, 53, 0.04);
  font-size: 0.85rem;
}
.answers-recap__label {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(15, 28, 53, 0.55);
  padding: 0 0.25rem;
}
.answers-recap__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  flex: 1 1 auto;
  min-width: 0;
}
.answers-recap__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  background: #FFFFFF;
  border: 1px solid rgba(15, 28, 53, 0.10);
  border-radius: 999px;
  color: #1a2a4a;
  font-weight: 500;
  font-size: 0.82rem;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 1px 1px rgba(15, 28, 53, 0.04);
}
.answers-recap__edit {
  flex-shrink: 0;
  background: transparent;
  border: 0;
  color: var(--gg-blue, #002ABF);
  font: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
}
.answers-recap__edit:hover {
  color: #001b82;
  background: rgba(0, 42, 191, 0.06);
}
.answers-recap__edit span {
  margin-left: 0.15rem;
  font-weight: 700;
}
@media (max-width: 720px) {
  .answers-recap { padding: 0.5rem 0.7rem; gap: 0.55rem; }
  .answers-recap__label { font-size: 0.62rem; letter-spacing: 0.06em; }
  .answers-recap__chip { font-size: 0.76rem; padding: 0.3rem 0.6rem; }
  .answers-recap__edit { font-size: 0.8rem; }
}

/* ── COMPARE ALL TIERS — TRIGGER + MODAL ────────────────────────────────
   Trigger sits next to the "Choose a tier" eyebrow inside each service
   card; modal is centred via createPortal at document.body. Mirrors the
   reference design loosely — clean rows, blue highlight on the
   recommended column, Got it primary CTA. */

/* Eyebrow row that holds the existing label + the new Compare link */
.svc__tier-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.5rem;
  flex-wrap: wrap;
}
.svc__tier-label-row .svc__tier-label { margin: 0; }
.svc__tier-compare-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: transparent;
  border: 0;
  padding: 0.25rem 0.5rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gg-blue, #002ABF);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
}
.svc__tier-compare-btn:hover {
  color: #001b82;
  background: rgba(0, 42, 191, 0.06);
}

/* Modal shell */
.cmp-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.cmp-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 28, 53, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}
.cmp-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  max-height: calc(100vh - 3rem);
  background: #FFFFFF;
  border: 1px solid rgba(15, 28, 53, 0.08);
  border-radius: 18px;
  box-shadow:
    0 30px 60px -16px rgba(15, 28, 53, 0.4),
    0 12px 24px -10px rgba(15, 28, 53, 0.18);
  padding: 1.75rem 1.75rem 1.25rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: cmpModalIn 180ms ease-out;
}
@keyframes cmpModalIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cmp-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(15, 28, 53, 0.08);
  background: #F6F7FB;
  color: #4a5066;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.cmp-modal__close:hover { background: #EBEDF4; color: #1a1f2e; }
.cmp-modal__title {
  margin: 0 0 0.4rem;
  font-size: 1.35rem;
  font-weight: 700;
  color: #0f1c35;
  font-family: 'Almarai', 'Inter', system-ui, sans-serif;
  padding-right: 2.5rem;
}
.cmp-modal__subtitle {
  margin: 0 0 1.25rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #5a6173;
  padding-right: 2.5rem;
}
.cmp-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 -0.25rem 1rem;
  padding: 0 0.25rem 0.5rem;
}

/* Grid layout — first column is row labels, then one column per tier. */
.cmp-grid {
  display: grid;
  gap: 0;
  align-items: stretch;
}
.cmp-grid__row {
  display: contents;
}
.cmp-grid__row--head .cmp-grid__col-head,
.cmp-grid__row > * {
  padding: 0.35rem 0.75rem;
}
/* Section header — spans the whole row */
.cmp-grid__row--header { display: block; margin-top: 0.5rem; }
.cmp-grid__section-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(15, 28, 53, 0.55);
  padding: 0.3rem 0 0.2rem;
  border-bottom: 1px solid rgba(15, 28, 53, 0.08);
}
/* Row label column */
.cmp-grid__rowlabel {
  font-size: 0.88rem;
  font-weight: 600;
  color: #1a2a4a;
}
/* Tier header columns */
.cmp-grid__col-head {
  position: relative;
  text-align: left;
  border-bottom: 1px solid rgba(15, 28, 53, 0.10);
  padding-top: 1.3rem !important;
}
.cmp-grid__col-head--rec {
  background: rgba(232, 240, 255, 0.55);
  border-radius: 12px 12px 0 0;
  border: 1px solid rgba(0, 42, 191, 0.25);
  border-bottom: 0;
}
.cmp-grid__rec-pill {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #1f3df0 0%, #002ABF 100%);
  color: #FFFFFF;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 32, 160, 0.35);
}
.cmp-grid__tier-name {
  font-weight: 700;
  font-size: 1rem;
  color: #0f1c35;
}
.cmp-grid__tier-price {
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--gg-blue, #002ABF);
  margin-top: 0.15rem;
}
.cmp-grid__tier-sub {
  font-size: 0.72rem;
  font-weight: 500;
  color: #6b7388;
  margin-left: 0.15rem;
}
/* Body cells */
.cmp-grid__col {
  text-align: center;
  font-size: 0.88rem;
  color: #1a2a4a;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cmp-grid__col--text {
  text-align: left;
  white-space: pre-line;
  line-height: 1.4;
  align-items: flex-start;
  justify-content: flex-start;
}
.cmp-grid__col--rec {
  background: rgba(232, 240, 255, 0.40);
  border-left: 1px solid rgba(0, 42, 191, 0.15);
  border-right: 1px solid rgba(0, 42, 191, 0.15);
}
.cmp-grid__row--best .cmp-grid__col {
  font-style: italic;
  color: #4a5066;
  font-size: 0.85rem;
}
/* Check / dash cells */
.cmp-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  font-size: 0.78rem;
  font-weight: 600;
}
.cmp-cell--yes {
  color: #2E8B57;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(46, 139, 87, 0.10);
}
.cmp-cell--no {
  color: rgba(15, 28, 53, 0.35);
  font-size: 1.1rem;
  font-weight: 700;
}
.cmp-cell--addon {
  color: rgba(15, 28, 53, 0.55);
  background: #F6F7FB;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(15, 28, 53, 0.08);
}

/* Footer actions */
.cmp-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.625rem;
  flex-shrink: 0;
  padding-top: 0.875rem;
  border-top: 1px solid rgba(15, 28, 53, 0.06);
}
.cmp-modal__actions .btn { padding: 0.625rem 1.5rem; }

@media (max-width: 760px) {
  .cmp-modal { padding: 0.75rem; }
  .cmp-modal__panel { padding: 1.25rem 1.25rem 1rem; max-height: calc(100vh - 1.5rem); border-radius: 14px; }
  .cmp-modal__title { font-size: 1.15rem; }
  .cmp-modal__subtitle { font-size: 0.86rem; }
  .cmp-grid { font-size: 0.8rem; }
  .cmp-grid__col-head { padding-top: 1.5rem !important; }
  .cmp-grid__tier-price { font-size: 1.05rem; }
}

/* ── TOP-OF-PAGE PROGRESS BAR ────────────────────────────────────────────
   Thin blue line pinned to the very top of the viewport. Width animates as
   the user moves through the wizard. Pure visual feedback — no interaction.
   z-index sits above the sticky top nav (which uses z-index <= 100) but
   below any modals / toasts (which use 9999+). */
.gg-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(0, 42, 191, 0.08);
  z-index: 200;
  pointer-events: none;
}
.gg-progress__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #1f3df0 0%, #002ABF 100%);
  box-shadow: 0 0 8px rgba(0, 42, 191, 0.45);
  transition: width 360ms cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 0 2px 2px 0;
}

/* Section eyebrow colour: brand blue (replaces the orange-deep default
   from app.css). Applies to every page header eyebrow — client type,
   GorillaMatch, qualifier, service step labels, Step N of N, FAQ. */
.section-head__eyebrow,
.section-head__eyebrow--accent {
  color: var(--gg-blue, #002ABF) !important;
}

/* Hide cohort/warmth banner — the AnswersRecap on step 1 surfaces the
   user's picks more usefully. Keep the underlying cohort/warmth state
   intact so it still ships to the Airtable submission. */
.qualifier-result { display: none !important; }

/* ── AGENCY INTENT PICKER ────────────────────────────────────────────────
   Surfaces below the client cards on the agency client type. Two large
   cards: "Using services for my own agency" (15% discount) and "Using
   services for white-label clients" (40% discount). Picking white-label
   unlocks the per-service MarginRow on every service card. */
.agency-intent-section {
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(15, 28, 53, 0.08);
}
.agency-intent-section__head { margin-bottom: 0.9rem; }
.agency-intent-section__eyebrow {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gg-blue, #002ABF);
  margin-bottom: 0.35rem;
}
.agency-intent-section__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gg-heading, #0f1c35);
  margin-bottom: 0.2rem;
}
.agency-intent-section__sub {
  font-size: 0.88rem;
  color: var(--gg-body, #4a5066);
}
.agency-intent-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
}
.agency-intent-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(244,248,255,0.78) 100%);
  border: 1px solid rgba(15, 28, 53, 0.10);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--gg-heading, #0f1c35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 1px 2px rgba(15,23,42,0.04),
    0 8px 18px -12px rgba(44, 51, 102, 0.15);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.agency-intent-card:hover {
  border-color: rgba(0, 42, 191, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 2px 4px rgba(15,23,42,0.06),
    0 10px 22px -12px rgba(44, 51, 102, 0.22);
  transform: translateY(-1px);
}
.agency-intent-card--on {
  border-color: rgba(0, 42, 191, 0.45);
  background: linear-gradient(180deg, rgba(244,248,255,0.95), rgba(232,240,255,0.85));
  box-shadow:
    inset 0 0 0 1px rgba(0, 42, 191, 0.25),
    0 4px 12px rgba(0, 42, 191, 0.18);
}
/* Checkbox matches the canonical .client-card__radio / .tier__radio style:
   white-on-grey resting → blue-gradient when active, slight scale lift. */
.agency-intent-card__radio {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: #FFFFFF;
  border: 2px solid #E2E2E2;
  display: grid;
  place-items: center;
  color: #FFFFFF;
  margin-top: 0.05rem;
  box-shadow:
    inset 1px 1px 3px rgba(0, 0, 0, 0.06),
    1px 1px 3px rgba(0, 0, 0, 0.06),
    -1px -1px 2px rgba(255, 255, 255, 0.7);
  transition: background 0.2s ease-out, border-color 0.2s ease-out,
              box-shadow 0.2s ease-out, transform 0.2s ease-out;
}
.agency-intent-card:hover .agency-intent-card__radio:not(.is-on) {
  border-color: #6B82D6;
  box-shadow:
    inset 1px 1px 3px rgba(0, 0, 0, 0.06),
    2px 2px 6px rgba(0, 0, 0, 0.08),
    -1px -1px 3px rgba(255, 255, 255, 0.8);
}
.agency-intent-card__radio.is-on {
  background: linear-gradient(109deg, var(--gg-blue, #002ABF) 0%, var(--gg-blue, #002ABF) 100%);
  border-color: transparent;
  transform: scale(1.05);
  box-shadow: var(--gg-premium-check-shadow);
}
.agency-intent-card__radio svg { stroke-width: 3; }
.agency-intent-card__body { flex: 1 1 auto; min-width: 0; }
.agency-intent-card__title {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}

/* 2026-05-22: COMING SOON glass badge replaces the plain text caption that
   used to sit next to the title. Sized to roughly match the title height so
   it reads as inline metadata without dominating the card. */
.agency-intent-card__coming-soon {
  display: inline-block;
  height: 18px;
  width: auto;
  margin-left: 8px;
  vertical-align: middle;
  pointer-events: none;
}
.agency-intent-card__desc {
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--gg-body, #4a5066);
  margin-bottom: 0.45rem;
}
.agency-intent-card__discount {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  background: linear-gradient(135deg, rgba(255, 185, 0, 0.14) 0%, rgba(220, 130, 0, 0.09) 100%);
  color: var(--gg-orange-deep, #C77800);
  border: 1px solid rgba(199, 120, 0, 0.28);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: 999px;
  margin-top: 0.3rem;
  margin-bottom: 0.45rem;
}
.agency-intent-card--on .agency-intent-card__discount {
  background: linear-gradient(135deg, rgba(255, 185, 0, 0.22) 0%, rgba(220, 130, 0, 0.15) 100%);
  border-color: rgba(199, 120, 0, 0.45);
}
@media (max-width: 720px) {
  .agency-intent-grid { grid-template-columns: 1fr; gap: 0.65rem; }
  .agency-intent-card { padding: 0.85rem 0.9rem; }
}

/* ── #92 Agency white-label "client ready?" question ────────────────── */
.agency-client-ready-section {
  margin-top: 1.25rem;
  padding: 1.1rem 1.2rem;
  background: rgba(244, 248, 255, 0.55);
  border: 1px solid rgba(0, 42, 191, 0.1);
  border-radius: 12px;
}
.agency-client-ready-section__q {
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--gg-heading, #0f1c35);
  margin-bottom: 0.8rem;
}
.agency-client-ready-section__btns {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
}
.agency-client-ready-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.25rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(244,248,255,0.80) 100%);
  border: 1.5px solid rgba(15, 28, 53, 0.12);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gg-heading, #0f1c35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 1px 3px rgba(15,23,42,0.05);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.agency-client-ready-btn:hover {
  border-color: rgba(0, 42, 191, 0.30);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 2px 6px rgba(15,23,42,0.08);
}
.agency-client-ready-btn.is-on {
  border-color: rgba(0, 42, 191, 0.50);
  background: linear-gradient(180deg, rgba(232,240,255,0.95), rgba(218,232,255,0.90));
  color: var(--gg-blue, #002ABF);
  box-shadow:
    inset 0 0 0 1px rgba(0, 42, 191, 0.20),
    0 4px 12px rgba(0, 42, 191, 0.15);
}
.agency-client-ready-btn.btn--primary {
  color: #ffffff;
  background: linear-gradient(180deg, #1a40d1 0%, #002ABF 100%);
  border-color: rgba(0, 42, 191, 0.70);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 2px 8px rgba(0, 42, 191, 0.30);
}
.agency-client-ready-btn.btn--primary:hover {
  background: var(--gg-btn-primary-bg-hover);
  border-color: transparent;
  box-shadow: var(--gg-btn-primary-shadow-hover);
  transform: translateY(-1px);
}
.agency-client-ready-no-cta {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 42, 191, 0.10);
  border-radius: 10px;
}
.agency-client-ready-no-cta p {
  font-size: 0.88rem;
  color: var(--gg-body, #4a5066);
  margin: 0 0 0.7rem;
}
@media (max-width: 600px) {
  .agency-client-ready-section__btns { flex-direction: column; }
  .agency-client-ready-btn { width: 100%; justify-content: center; }
}

/* White-label margin: switch green success accents to brand orange.
   Loss/error state stays red. */
.svc-margin__head-icon {
  background: rgba(252, 157, 43, 0.12) !important;
  color: var(--gg-orange-deep, #C77800) !important;
  border-color: rgba(252, 157, 43, 0.32) !important;
}
.svc-margin--good .svc-margin__cell--result .svc-margin__cell-num {
  color: var(--gg-orange-deep, #C77800) !important;
}
.svc-margin__pct {
  background: rgba(252, 157, 43, 0.12) !important;
  color: var(--gg-orange-deep, #C77800) !important;
  border-color: rgba(252, 157, 43, 0.30) !important;
}

/* Multi-service-discount footer copy: tighten to caption-size for less
   visual weight underneath the discount-tier list. */
.ms-stack__footer {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--gg-body, #4a5066);
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(15, 28, 53, 0.06);
}
.ms-stack__footer strong { font-weight: 700; color: var(--gg-heading, #0f1c35); }

/* Qualifier options: switch to thin-glass-frame (14px slices) to match the
   addon-card hierarchy. Tighter border-radius so the corner curve aligns
   with the smaller WebP corner slices. */
.qualifier-opt { border-radius: 10px !important; }
.qualifier-opt::before {
  background:
    url('glass-frame/top-left.webp')     top left     / 14px 14px no-repeat,
    url('glass-frame/top-right.webp')    top right    / 14px 14px no-repeat,
    url('glass-frame/bottom-left.webp')  bottom left  / 14px 14px no-repeat,
    url('glass-frame/bottom-right.webp') bottom right / 14px 14px no-repeat,
    url('glass-frame/top.webp')    14px top    / calc(100% - 28px) 14px repeat-x,
    url('glass-frame/bottom.webp') 14px bottom / calc(100% - 28px) 14px repeat-x,
    url('glass-frame/left.webp')   left 14px   / 14px calc(100% - 28px) repeat-y,
    url('glass-frame/right.webp')  right 14px  / 14px calc(100% - 28px) repeat-y !important;
}

/* ── CLIENT TYPE: quick value bullets ────────────────────────────────────
   4-up checkmark bullets under the client type cards. Surfaces the most
   important benefit of the picked client type so the user has confirmation
   they're on the right path before answering the qualifier. Glass-frame
   surface matches the rest of the design system. */
.client-quick-bullets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  padding: 0.9rem 1.1rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(244,248,255,0.78) 100%);
  border: 1px solid rgba(180, 195, 220, 0.32);
  border-radius: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 1px 2px rgba(15,23,42,0.04),
    0 8px 20px -12px rgba(44, 51, 102, 0.18);
}
.client-quick-bullets__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.client-quick-bullets__check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  /* 2026-05-25: recoloured green → brand blue to match the rest of the app. */
  background: color-mix(in srgb, var(--gg-blue, #002ABF) 10%, transparent);
  color: var(--gg-blue, #002ABF);
}
.client-quick-bullets__lbl {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--gg-heading, #0f1c35);
  line-height: 1.3;
}
@media (min-width: 901px) and (max-width: 1400px) {
  .client-quick-bullets__lbl { font-size: 0.78rem; }
}
@media (max-width: 900px) {
  .client-quick-bullets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; padding: 0.85rem; }
}
@media (max-width: 540px) {
  .client-quick-bullets { grid-template-columns: 1fr; }
  .client-quick-bullets__lbl { font-size: 0.82rem; }
}

/* ── INTENT DISAMBIGUATOR ───────────────────────────────────────────────
   Sits below the client cards + quick-bullets row. 3-up grid of cards
   (single-select) inside a glass-framed group. Default selection is the
   first card. Keyboard nav handled in JSX (arrow keys to move focus,
   space/enter to select). */
.intent-disambig {
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(15, 28, 53, 0.06);
}
.intent-disambig__head { margin-bottom: 1.1rem; }
.intent-disambig__eyebrow {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gg-blue, #002ABF);
  margin-bottom: 0.5rem;
}
.intent-disambig__title {
  margin: 0 0 0.4rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gg-heading, #0f1c35);
  font-family: 'Almarai', 'Inter', sans-serif;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.intent-disambig__title-accent { color: var(--gg-blue, #002ABF); font-style: normal; }
.intent-disambig__sub {
  margin: 0;
  font-size: 0.92rem;
  color: var(--gg-body, #4a5066);
}
.intent-disambig__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.intent-disambig__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1.1rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(244,248,255,0.78) 100%);
  border: 1px solid rgba(15, 28, 53, 0.10);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--gg-heading, #0f1c35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 1px 2px rgba(15,23,42,0.04),
    0 8px 18px -12px rgba(44, 51, 102, 0.15);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.intent-disambig__card:hover {
  border-color: rgba(0, 42, 191, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 2px 4px rgba(15,23,42,0.06),
    0 10px 22px -12px rgba(44, 51, 102, 0.22);
  transform: translateY(-1px);
}
.intent-disambig__card:focus-visible {
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 1px 2px rgba(15,23,42,0.06),
    0 8px 18px -12px rgba(44, 51, 102, 0.18),
    0 0 0 3px rgba(0, 42, 191, 0.25);
}
.intent-disambig__card--on {
  border: 2px solid var(--gg-blue, #002ABF);
  padding: calc(1rem - 1px) calc(1.1rem - 1px);
  background: linear-gradient(180deg, rgba(244,248,255,0.95), rgba(232,240,255,0.85));
  box-shadow:
    inset 0 0 0 1px rgba(0, 42, 191, 0.10),
    0 4px 12px rgba(0, 42, 191, 0.18);
}
.intent-disambig__row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.intent-disambig__check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #FFFFFF;
  border: 2px solid #E2E2E2;
  display: grid;
  place-items: center;
  color: #FFFFFF;
  box-shadow:
    inset 1px 1px 3px rgba(0, 0, 0, 0.06),
    1px 1px 3px rgba(0, 0, 0, 0.06),
    -1px -1px 2px rgba(255, 255, 255, 0.7);
  transition: background 0.2s ease-out, border-color 0.2s ease-out,
              box-shadow 0.2s ease-out;
}
.intent-disambig__card:hover .intent-disambig__check:not(.is-on) {
  border-color: #6B82D6;
}
.intent-disambig__check.is-on {
  background: linear-gradient(109deg, var(--gg-blue, #002ABF) 0%, var(--gg-blue, #002ABF) 100%);
  border-color: transparent;
  box-shadow: var(--gg-premium-check-shadow);
}
.intent-disambig__check svg { stroke-width: 3; }
.intent-disambig__card-title {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--gg-heading, #0f1c35);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1 1 auto;
}
.intent-disambig__info {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  background: transparent;
  border: 0;
  color: rgba(15, 28, 53, 0.45);
  cursor: pointer;
  padding: 0;
  border-radius: 999px;
  transition: color 0.15s ease, background 0.15s ease;
}
.intent-disambig__info:hover { color: var(--gg-blue, #002ABF); background: rgba(0, 42, 191, 0.08); }
.intent-disambig__card-desc {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--gg-body, #4a5066);
}
@media (max-width: 760px) {
  .intent-disambig__grid { grid-template-columns: 1fr; gap: 0.75rem; }
  .intent-disambig__title { font-size: 1.3rem; }
}

/* ── A FEW QUICK QUESTIONS — panel layout overrides ──────────────────────
   The new 3-question spec uses larger card panels (warm-grey fill) wrapping
   the option grid. Each question can declare a column count via cols=2 or
   cols=3 in data; options without descriptions render label-only. Info
   tooltips on Q2/Q3 anchor to the title. Panel-level invalid state shows
   a soft red border that clears as soon as the user answers. */

/* Question panel wrapper. The existing .qualifier-q is a fieldset now; we
   reset native fieldset styles, then drop the new card frame on top. Cool
   pale-blue tint (no warm grey) so the panel reads as a sibling to the
   surrounding glass cards rather than a separate warm region. */
.qualifier-q {
  border: 1px solid rgba(15, 28, 53, 0.06);
  /* White/transparent surface to match service cards (.svc uses rgba(255,255,255,0.20))
     instead of the previous blue tint. */
  background: rgba(255, 255, 255, 0.20);
  border-radius: 16px;
  padding: 1.4rem 1.5rem;
  margin: 0 0 1rem;
  min-width: 0;
}
.qualifier-q__head {
  position: relative;
  display: block;
  padding: 0;
  margin-bottom: 0.85rem;
}
.qualifier-q__label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.3rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gg-heading, #0f1c35);
}
.qualifier-q__sub {
  margin: 0;
  font-size: 0.86rem;
  color: var(--gg-body, #4a5066);
  line-height: 1.45;
}

/* Info icon button + popover */
.qualifier-q__info-btn {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 999px;
  color: rgba(15, 28, 53, 0.45);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.qualifier-q__info-btn:hover,
.qualifier-q__info-btn:focus-visible {
  color: var(--gg-blue, #002ABF);
  background: rgba(0, 42, 191, 0.08);
  outline: none;
}
.qualifier-q__tip {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  max-width: 320px;
  z-index: 10;
  background: #FFFFFF;
  color: #1F2937;
  border: 1px solid rgba(15, 28, 53, 0.10);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  font-size: 0.82rem;
  line-height: 1.5;
  box-shadow: 0 8px 22px -12px rgba(15, 28, 53, 0.25);
}
.qualifier-q__tip::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 1rem;
  width: 10px;
  height: 10px;
  background: #FFFFFF;
  border-top: 1px solid rgba(15, 28, 53, 0.10);
  border-left: 1px solid rgba(15, 28, 53, 0.10);
  transform: rotate(45deg);
}

/* Option grid column counts */
.qualifier-q__opts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
}
.qualifier-q--cols-3 .qualifier-q__opts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Label-only option cards (Q2): no description, tighter vertical padding */
.qualifier-opt--label-only {
  padding: 0.8rem 0.95rem !important;
}
.qualifier-opt--label-only .qualifier-opt__title {
  margin: 0;
}

/* Panel-level invalid state — soft red border that clears on first answer */
.qualifier-q--missing,
.qualifier-q[aria-invalid="true"] {
  border-color: rgba(239, 68, 68, 0.55) !important;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.18);
}

/* Responsive */
@media (max-width: 760px) {
  .qualifier-q { padding: 1rem; }
  .qualifier-q__opts,
  .qualifier-q--cols-3 .qualifier-q__opts { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .qualifier-q { padding: 0.85rem; }
}

/* Visually-hidden helper for ARIA live regions */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* IntentDisambiguator: info tooltip popover (anchored inside each card). */
.intent-disambig__tip {
  display: block;
  margin-top: 0.5rem;
  padding: 0.55rem 0.7rem;
  background: #FFFFFF;
  color: #1F2937;
  border: 1px solid rgba(15, 28, 53, 0.10);
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.5;
  box-shadow: 0 8px 22px -12px rgba(15, 28, 53, 0.25);
  /* Make the tip non-clickable for selection purposes — its container is the
     card button, so let click events bubble up to the card normally. The
     tooltip text isn't a selection target. */
  pointer-events: auto;
}

/* ── QUALIFIER SKIP FLOATER ──────────────────────────────────────────────
   Sticky banner pinned to the BOTTOM of the viewport whenever the qualifier
   section is in view. White surface with a brand-blue gradient stripe at
   the top edge, single horizontal row: copy on the left, primary blue
   "Skip questions" CTA on the right. */
.qq-skip-floater {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%) translateY(140%);
  z-index: 220;
  width: min(900px, calc(100% - 1.5rem));
  pointer-events: none;
  opacity: 0;
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.qq-skip-floater--visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.qq-skip-floater__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1rem 0.9rem 1.15rem;
  background: #FFFFFF;
  border: 1px solid rgba(15, 28, 53, 0.08);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 1px 2px rgba(15, 28, 53, 0.04),
    0 14px 32px -16px rgba(15, 28, 53, 0.35),
    0 6px 14px -8px rgba(15, 28, 53, 0.18);
}
/* Brand-blue gradient stripe at the top edge of the banner. */
.qq-skip-floater__inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #1f3df0 0%, #002ABF 100%);
  box-shadow: 0 0 8px rgba(0, 42, 191, 0.4);
}
.qq-skip-floater__body {
  flex: 1 1 auto;
  min-width: 0;
}
.qq-skip-floater__title {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--gg-blue, #002ABF);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.qq-skip-floater__desc {
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--gg-body, #4a5066);
  margin-top: 0.15rem;
}
.qq-skip-floater__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.65rem 1.2rem;
  background: linear-gradient(180deg, #1f3df0 0%, #002ABF 100%);
  border: 1px solid rgba(0, 14, 80, 0.5);
  border-radius: 10px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: #FFFFFF;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 2px 6px rgba(0, 32, 160, 0.35);
  transition: filter 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
.qq-skip-floater__cta:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 4px 12px rgba(0, 32, 160, 0.45);
}
.qq-skip-floater__close {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: rgba(15, 28, 53, 0.45);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.qq-skip-floater__close:hover { background: rgba(15, 28, 53, 0.06); color: #0f1c35; }

@media (max-width: 720px) {
  .qq-skip-floater { bottom: 0.65rem; }
  .qq-skip-floater__inner { padding: 0.7rem 0.7rem 0.7rem 0.9rem; gap: 0.65rem; }
  .qq-skip-floater__title { font-size: 0.88rem; }
  .qq-skip-floater__desc { display: none; }
  .qq-skip-floater__cta { padding: 0.55rem 0.95rem; font-size: 0.85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .qq-skip-floater { transition: opacity 120ms linear; transform: translateX(-50%) translateY(0); }
  .qq-skip-floater:not(.qq-skip-floater--visible) { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .qq-skip-floater { transition: opacity 120ms linear; transform: translateX(-50%) translateY(0); }
  .qq-skip-floater:not(.qq-skip-floater--visible) { opacity: 0; visibility: hidden; }
}

/* Glass-frame bevel on the qualifier panel itself. 22px WebP slices on a
   ::before overlay matches the .glass-frame component recipe used elsewhere
   (client cards, addons disclosure outer, etc.). The fieldset's existing
   position is relative (legend + tooltip rely on it), so the overlay anchors
   correctly. */
.qualifier-q {
  position: relative;
}
.qualifier-q::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    url('glass-frame/top-left.webp')     top left     / 22px 22px no-repeat,
    url('glass-frame/top-right.webp')    top right    / 22px 22px no-repeat,
    url('glass-frame/bottom-left.webp')  bottom left  / 22px 22px no-repeat,
    url('glass-frame/bottom-right.webp') bottom right / 22px 22px no-repeat,
    url('glass-frame/top.webp')    22px top    / calc(100% - 44px) 22px repeat-x,
    url('glass-frame/bottom.webp') 22px bottom / calc(100% - 44px) 22px repeat-x,
    url('glass-frame/left.webp')   left 22px   / 22px calc(100% - 44px) repeat-y,
    url('glass-frame/right.webp')  right 22px  / 22px calc(100% - 44px) repeat-y;
  mix-blend-mode: multiply;
  z-index: 0;
}
.qualifier-q > * { position: relative; z-index: 1; }

/* Step-1 question counter — shows "Question N of M" above the first
   visible question panel so the user has a sense of progress through
   the 28-panel founders tree. */
.qualifier-section__counter {
  font-size: 0.82rem;
  color: var(--gg-body, #4a5066);
  margin: 0 0 0.55rem 0.1rem;
  letter-spacing: 0.005em;
}

/* When a chip is from a multi-select question (.qualifier-opt has
   role="button" / aria-pressed), keep the same visual but use the
   selected state of aria-pressed for the radio square. The existing
   .qualifier-opt--on class is set by the JSX. */

/* ── Paid Ads — Estimated daily budget preset tiles (§19 polish) ───────
   Six tiles + Custom. Active tile gets blue ring + tick (mirrors
   client-card style). Recommended tile gets a subtle orange ring when
   not active. Warning row is red for over-budget, navy for under. */
.pa-spend {
  /* Reset the inherited .channels-panel__extras inline form layout —
     the new layout is a vertical stack. */
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.6rem;
}
/* 2026-05-29: when pa-spend is a direct child of the channels-panel
   grid (Paid Advertising), make it span both columns so the tile row
   fills the empty space to the right of the Onboarding Availability
   cap. The grid `gap` handles vertical spacing, so neutralise the
   inherited margin-top. */
.channels-panel > .pa-spend {
  grid-column: 1 / -1;
  margin-top: 0;
}
.pa-spend__head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.pa-spend__eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--txt-secondary, #5a647d);
}
.pa-spend__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.5rem;
}
@media (max-width: 900px) {
  .pa-spend__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .pa-spend__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pa-spend__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.18rem;
  padding: 0.8rem 0.8rem 0.85rem;
  text-align: left;
  /* Surface under the .thin-glass-frame ::before overlay. */
  background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(247,248,251,0.92) 100%);
  border-radius: 10px;
  /* The glass-frame handles the edge; drop the regular border. */
  border: 0;
  cursor: pointer;
  font: inherit;
  color: var(--txt-primary, #0f1c35);
  transition: background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.pa-spend__tile:hover {
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(247,248,251,1) 100%);
}
.pa-spend__tile--on {
  background: #F0F2FB;
  /* Inset blue ring on the active tile — sits inside the 14px glass slices
     so they don't visually collide. */
  box-shadow: 0 0 0 1.5px var(--gg-blue, #002ABF) inset;
}
/* (Removed) — orange recommended-tile ring. The recommendation cue lives
   elsewhere now; the tiles render uniformly until the user picks one. */
.pa-spend__tile-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gg-blue, #002ABF);
  /* 2026-05-29: reserve room for the top-right checkbox so long labels
     (e.g. "JUST TESTING", "FOUNDATIONS") don't get clipped under it. */
  padding-right: 1.7rem;
}
.pa-spend__tile-range {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--txt-primary, #0f1c35);
  margin-top: 0.05rem;
}
.pa-spend__tile-range--cta {
  color: var(--gg-blue, #002ABF);
}
.pa-spend__tile-monthly {
  font-size: 0.72rem;
  color: var(--txt-secondary, #5a647d);
}
.pa-spend__tile-blurb {
  font-size: 0.72rem;
  color: var(--txt-secondary, #5a647d);
  line-height: 1.3;
  margin-top: 0.15rem;
}
.pa-spend__tile-tick {
  /* 2026-05-29: dual-state premium check.
     Default = empty/idle box (white + soft grey border + neumorphic
     shadow) so the affordance is visible on every tile. Matches the
     canonical idle pattern used on .ps-chip__check, .df-role-card__check.
     The .is-on variant below restores the previous filled blue look. */
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 2px solid #E2E2E2;
  background: rgba(255, 255, 255, 0.95);
  color: #fff;
  box-shadow:
    inset 1px 1px 3px rgba(0, 0, 0, 0.06),
    1px 1px 3px rgba(0, 0, 0, 0.06),
    -1px -1px 2px rgba(255, 255, 255, 0.7);
  transition: background 0.2s ease-out, border-color 0.2s ease-out,
              box-shadow 0.2s ease-out, transform 0.2s ease-out;
}
.pa-spend__tile:hover .pa-spend__tile-tick:not(.is-on) {
  border-color: #6B82D6;
}
.pa-spend__tile-tick.is-on {
  background: linear-gradient(109deg, var(--gg-blue, #002ABF) 0%, var(--gg-blue, #002ABF) 100%);
  border-color: transparent;
  color: #fff;
  transform: scale(1.05);
  box-shadow: var(--gg-premium-check-shadow);
}
.pa-spend__tile-tick svg { stroke-width: 3; }
.pa-spend__custom-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.8rem;
  background: white;
  border: 1px solid color-mix(in srgb, var(--gg-blue, #002ABF) 15%, transparent);
  border-radius: 10px;
  max-width: 280px;
}
.pa-spend__custom-prefix,
.pa-spend__custom-suffix {
  font-size: 0.9rem;
  color: var(--txt-secondary, #5a647d);
}
.pa-spend__custom-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  color: var(--txt-primary, #0f1c35);
}
.pa-spend__current {
  padding: 0.5rem 0.8rem;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid color-mix(in srgb, var(--gg-blue, #002ABF) 10%, transparent);
  border-radius: 10px;
  font-size: 0.85rem;
  color: var(--txt-primary, #0f1c35);
}
.pa-spend__current strong {
  color: var(--gg-blue, #002ABF);
  font-weight: 700;
}
.pa-spend__warning {
  padding: 0.6rem 0.85rem;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.4;
}
.pa-spend__warning--over {
  background: rgba(199, 30, 30, 0.06);
  border: 1px solid rgba(199, 30, 30, 0.25);
  color: #a01a1a;
}
.pa-spend__warning--over strong { color: #7a0e0e; }
.pa-spend__warning--under {
  background: color-mix(in srgb, var(--gg-blue, #002ABF) 4%, white);
  border: 1px solid color-mix(in srgb, var(--gg-blue, #002ABF) 18%, transparent);
  color: var(--gg-blue, #002ABF);
}

/* ── Essentials gate on checkout when user skipped the qualifier ───────
   Renders above the CheckoutForm with 4 essential questions (q1 / q3 /
   q4 / urgency). Surfaces a progress counter and blocks the submit
   button until all 4 are answered. */
.essentials-gate {
  margin-bottom: 1.25rem;
  padding: 1.25rem 1.25rem 1rem;
  background: color-mix(in srgb, var(--gg-orange, #FC9D2B) 3%, white);
  border: 1px solid color-mix(in srgb, var(--gg-orange, #FC9D2B) 30%, transparent);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15,28,53,0.05);
}
.essentials-gate__head { margin-bottom: 1rem; }
.essentials-gate__eyebrow {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gg-orange-deep, #C77800);
}
.essentials-gate__title {
  margin: 0.25rem 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--gg-heading, #0f1c35);
}
.essentials-gate__sub {
  margin: 0 0 0.8rem;
  font-size: 0.85rem;
  color: var(--gg-muted, #5a647d);
  line-height: 1.5;
}
.essentials-gate__progress {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.essentials-gate__progress-label {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--gg-blue, #002ABF);
  white-space: nowrap;
}
.essentials-gate__progress-bar {
  flex: 1;
  height: 4px;
  background: color-mix(in srgb, var(--gg-blue, #002ABF) 12%, white);
  border-radius: 100px;
  overflow: hidden;
}
.essentials-gate__progress-fill {
  height: 100%;
  background: var(--gg-blue, #002ABF);
  transition: width 240ms ease-out;
}
.essentials-gate__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* Inside the essentials gate, the .qualifier-q panels carry their own
   glass-frame overlay + padding from the Step 1 styling, so we don't need
   to add extra padding here. Just make sure each panel breathes. */
.essentials-gate__list .qualifier-q { margin: 0; }
.essentials-gate__q {
  padding: 0.85rem 1rem;
  background: white;
  border: 1px solid rgba(15,28,53,0.10);
  border-radius: 10px;
  transition: border-color 160ms ease;
}
.essentials-gate__q--unanswered {
  border-color: color-mix(in srgb, var(--gg-orange, #FC9D2B) 45%, transparent);
}
.essentials-gate__q-label {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--gg-heading, #0f1c35);
  margin-bottom: 0.15rem;
}
.essentials-gate__q-sub {
  font-size: 0.78rem;
  color: var(--gg-muted, #5a647d);
  margin-bottom: 0.55rem;
  line-height: 1.4;
}
.essentials-gate__q-opts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}
@media (max-width: 480px) {
  .essentials-gate__q-opts { grid-template-columns: 1fr; }
}
.essentials-gate__opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.75rem;
  text-align: left;
  background: white;
  border: 1px solid color-mix(in srgb, var(--gg-blue, #002ABF) 12%, transparent);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  color: var(--gg-heading, #0f1c35);
  transition: background 120ms ease, border-color 120ms ease;
}
.essentials-gate__opt:hover {
  background: color-mix(in srgb, var(--gg-blue, #002ABF) 4%, white);
  border-color: color-mix(in srgb, var(--gg-blue, #002ABF) 25%, transparent);
}
.essentials-gate__opt--on {
  background: color-mix(in srgb, var(--gg-blue, #002ABF) 7%, white);
  border-color: var(--gg-blue, #002ABF);
  box-shadow: 0 0 0 1px var(--gg-blue, #002ABF) inset;
  font-weight: 600;
}
.essentials-gate__opt-label { flex: 1; }
.essentials-gate__opt-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: var(--gg-blue, #002ABF);
  color: white;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Block-style error message for the essentials gate validation. */
.checkout-form__err--block {
  display: block;
  margin: 0.4rem 0 0.6rem;
  padding: 0.6rem 0.85rem;
  background: rgba(199, 30, 30, 0.06);
  border: 1px solid rgba(199, 30, 30, 0.25);
  border-radius: 8px;
  color: #a01a1a;
  font-size: 0.82rem;
  line-height: 1.4;
}

/* ── Step 6: plan-summary-card + call-preference cards (founders-step-6 §4-§5) ── */

/* Outer plan-summary-card wraps the checkout form with the §4.1 eyebrow +
   plan title + edit-plan link. The glass-frame class supplies the 22px
   bevel overlay; we just need surface + padding. */
.plan-summary-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(247,248,251,0.94) 100%);
  border-radius: 16px;
  /* 2.5rem (40px) padding sits ~18px inside the 22px glass-frame bevel so the
     inner content reads as cleanly contained, not hugging the corners. */
  padding: 2.5rem;
  margin-top: 0;
  /* 2026-05-22: kill any hover/transition on the outer container. Inner
     inputs + components keep their own hover states; the card itself must
     never animate or shift. */
  transition: none !important;
  transform: none !important;
}
.plan-summary-card:hover {
  transform: none !important;
  box-shadow: inherit;
}
@media (max-width: 768px) {
  .plan-summary-card { padding: 1.75rem; }
}
@media (max-width: 600px) {
  .plan-summary-card { padding: 1.25rem; }
}
.plan-summary-card .convert-card--action,
.plan-summary-card .convert-card {
  /* Drop the convert-card's outer frame — the plan-summary-card is the only
     surface. The base .convert-card from app.css adds its own background,
     box-shadow, padding, AND a 22px glass-frame ::before overlay (line 969).
     Reset all of them so the form sits flush on the plan-summary-card. */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.plan-summary-card .convert-card::before {
  /* Kill the inner 22px glass-frame overlay rendered by .convert-card::before
     from app.css. Only the outer plan-summary-card glass-frame should remain. */
  display: none !important;
  background: none !important;
}
.plan-summary-card .cac__header {
  /* The header sits inside the plan-summary-card surface; no extra inset
     needed since the parent padding handles the gap to the glass bevel. */
  margin-bottom: 0.75rem;
}
.plan-summary-card .cac__icon {
  /* The cac icon was floating against the left bevel; pull it inward. */
  margin-left: 0;
}
.plan-summary-card__head {
  margin-bottom: 1.4rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--gg-blue, #002ABF) 8%, transparent);
}
.plan-summary-card__eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gg-blue, #002ABF);
  margin-bottom: 0.5rem;
}
.plan-summary-card__eyebrow strong {
  font-weight: 800;
  color: var(--gg-blue, #002ABF);
}
.plan-summary-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.plan-summary-card__title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--gg-heading, #0f1c35);
}
.plan-summary-card__edit {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.4rem 0.8rem;
  background: white;
  border: 1px solid color-mix(in srgb, var(--gg-blue, #002ABF) 18%, transparent);
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gg-blue, #002ABF);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.plan-summary-card__edit:hover {
  background: color-mix(in srgb, var(--gg-blue, #002ABF) 5%, white);
  border-color: var(--gg-blue, #002ABF);
}

/* §5.2 Call-preference radio cards */
.call-pref { margin-bottom: 0.75rem; }
.call-pref__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gg-heading, #0f1c35);
  margin-bottom: 0.55rem;
}
.call-pref__grid {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
/* Call-preference radio rows — uses .thin-glass-frame for the 14px slice
   overlay, matching the Step 1 qualifier-opt design. Active state =
   blue inset ring + soft tint. */
.call-pref__card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  width: 100%;
  text-align: left;
  padding: 1rem 1.15rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(247,248,251,0.92) 100%);
  /* thin-glass-frame ::before handles the bevel; no border needed */
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  color: var(--gg-heading, #0f1c35);
  transition: background 120ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.call-pref__card:hover {
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(247,248,251,1) 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(15, 28, 53, 0.10);
}
.call-pref__card--on {
  background: color-mix(in srgb, var(--gg-blue, #002ABF) 6%, white);
  box-shadow: 0 0 0 1.5px var(--gg-blue, #002ABF) inset;
}
.call-pref__card-body {
  flex: 1 1 auto;
  min-width: 0;
}
.call-pref__card-title {
  font-size: 0.92rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}
.call-pref__card-desc {
  font-size: 0.78rem;
  color: var(--gg-muted, #5a647d);
  line-height: 1.45;
}
/* Square neomorphic checkbox — matches .client-card__radio /
   .agency-intent-card__radio. 28x28, white resting, blue gradient when on. */
.call-pref__card-check {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: 0.05rem;
  border-radius: 7px;
  background: #FFFFFF;
  border: 2px solid #E2E2E2;
  color: #FFFFFF;
  box-shadow:
    inset 1px 1px 3px rgba(0, 0, 0, 0.06),
    1px 1px 3px rgba(0, 0, 0, 0.06),
    -1px -1px 2px rgba(255, 255, 255, 0.7);
  transition: background 0.2s ease-out, border-color 0.2s ease-out,
              box-shadow 0.2s ease-out, transform 0.2s ease-out;
}
.call-pref__card:hover .call-pref__card-check:not(.is-on) {
  border-color: #6B82D6;
  box-shadow:
    inset 1px 1px 3px rgba(0, 0, 0, 0.06),
    2px 2px 6px rgba(0, 0, 0, 0.08),
    -1px -1px 3px rgba(255, 255, 255, 0.8);
}
.call-pref__card-check.is-on {
  background: linear-gradient(109deg, var(--gg-blue, #002ABF) 0%, var(--gg-blue, #002ABF) 100%);
  border-color: transparent;
  box-shadow: var(--gg-premium-check-shadow);
}
.call-pref__card-check svg { stroke-width: 3; }

/* §5.5 Next-step hint — small numbered chip above the submit button */
.checkout-form__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem 0.45rem 0.45rem;
  margin: 0.4rem 0 0.6rem;
  background: color-mix(in srgb, var(--gg-blue, #002ABF) 5%, white);
  border: 1px solid color-mix(in srgb, var(--gg-blue, #002ABF) 18%, transparent);
  border-radius: 100px;
  font-size: 0.78rem;
  color: var(--gg-blue, #002ABF);
}
.checkout-form__hint-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 0.4rem;
  background: var(--gg-blue, #002ABF);
  color: white;
  border-radius: 100px;
  font-weight: 700;
  font-size: 0.72rem;
}
.checkout-form__hint-text { font-weight: 600; }

/* §5.4 Early-exit caption (already-had-a-call branch) */
.checkout-form__early-exit {
  /* 2026-05-29: span full grid width — was wrapping to 2 lines with
     empty space to the right because it inherited the default single-
     column placement in the 2-col form grid. */
  grid-column: 1 / -1;
  padding: 0.6rem 0.85rem;
  margin: 0.4rem 0 0.6rem;
  background: color-mix(in srgb, var(--gg-blue, #002ABF) 4%, white);
  border: 1px solid color-mix(in srgb, var(--gg-blue, #002ABF) 18%, transparent);
  border-radius: 10px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--gg-heading, #0f1c35);
}

/* ── Q6 PRIOR-ACTIVITIES CASCADE ─────────────────────────────────────────────
   Sub-question panels that mount inside the priorActivities chip block on
   Step 6 (Ready to launch). Each panel is a thin-glass-frame container with
   a chip group, lined up below the primary 10-chip grid.
*/
.q6-cascade {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.q6-sub-panel {
  position: relative;
  padding: 1.1rem 1rem 1rem;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 14px;
}
.q6-sub-panel > * { position: relative; z-index: 2; }
.q6-sub-panel__head { margin-bottom: 0.65rem; }
.q6-sub-panel__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--gg-heading, #0f1c35);
}
.q6-sub-panel__sub {
  margin: 0.3rem 0 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--gg-body, #4b5d7a);
}
.q6-portal-banner {
  position: relative;
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 14px;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--gg-heading, #0f1c35);
}
.q6-portal-banner > * { position: relative; z-index: 2; }
.q6-portal-banner__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  background: var(--gg-blue, #002ABF);
  color: #fff;
}

/* ── PAY-UPFRONT TOGGLE on service cards ──────────────────────────────────────
   Pill-shaped switch in the svc__tier-label-row. Off-state is grey/white with
   the knob on the left. On-state turns the pill brand-blue and slides the
   knob to the right. The "save 10%" badge stays green throughout to advertise
   the discount.
*/
.svc__tier-label-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.svc__tier-label { flex: 0 0 auto; }
.svc__tier-compare-btn { flex: 0 0 auto; margin-left: auto; order: 1; }
/* Pay-upfront switch — neumorphic toggle component.
   Container: recessed light grey track holding a raised white knob (OFF) or
   a blue gradient track with the knob slid right (ON). Mirrors the visual
   family of .svc__commit-bar (recessed parent + raised pill children).
   Label "Pay upfront" + orange "save 10%" chip sit alongside the slider. */
.svc__upfront-toggle {
  order: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.65rem 0.35rem 0.4rem;
  background: linear-gradient(180deg, #ECEEF4 0%, #E1E3EB 100%);
  border: 1px solid rgba(120, 130, 160, 0.22);
  border-radius: 100px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: #2c3140;
  box-shadow:
    inset 0 1px 2px rgba(20, 28, 60, 0.10),
    0 1px 0 rgba(255, 255, 255, 0.85);
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  flex: 0 0 auto;
  line-height: 1;
}
.svc__upfront-toggle:hover {
  border-color: rgba(120, 130, 160, 0.35);
}
.svc__upfront-toggle.is-on {
  background: linear-gradient(180deg, #1f3df0 0%, #002ABF 100%);
  border-color: rgba(0, 14, 80, 0.5);
  color: #fff;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.22),
    0 1px 0 rgba(255, 255, 255, 0.4);
}
/* Knob — the raised slider element. White pill with subtle drop shadow,
   sits on the left in OFF, slides right in ON. Width/translate match the
   30px track. */
.svc__upfront-knob {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
  background: linear-gradient(180deg, #DDE0E8 0%, #C9CDD7 100%);
  border-radius: 100px;
  flex: 0 0 34px;
  box-shadow:
    inset 0 1px 2px rgba(20, 28, 60, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.4);
  transition: background 0.18s ease, box-shadow 0.18s ease;
}
.svc__upfront-knob::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f6fa 100%);
  border-radius: 50%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 1px rgba(20, 28, 60, 0.10),
    0 1px 2px rgba(20, 28, 60, 0.22);
  transition: transform 0.2s ease, background 0.18s ease;
}
.svc__upfront-toggle.is-on .svc__upfront-knob {
  background: linear-gradient(180deg, #0a1ea3 0%, #001e8e 100%);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.32),
    inset 0 -1px 0 rgba(255, 255, 255, 0.18);
}
.svc__upfront-toggle.is-on .svc__upfront-knob::after { transform: translateX(14px); }
.svc__upfront-text {
  white-space: nowrap;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.svc__upfront-save {
  padding: 0.28rem 0.5rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #B85E0A;
  background: transparent;
  border-radius: 100px;
  line-height: 1;
}
.svc__upfront-toggle.is-on .svc__upfront-save {
  color: #B85E0A;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
@media (max-width: 480px) {
  .svc__upfront-toggle { padding: 0.3rem 0.55rem 0.3rem 0.35rem; font-size: 0.78rem; gap: 0.4rem; }
  .svc__upfront-knob { width: 30px; height: 18px; flex-basis: 30px; }
  .svc__upfront-knob::after { width: 14px; height: 14px; }
  .svc__upfront-toggle.is-on .svc__upfront-knob::after { transform: translateX(12px); }
  .svc__upfront-save { font-size: 0.58rem; padding: 0.22rem 0.4rem; }
}

/* ── Compare-all-tiers pill, lives in .svc__title ────────────────────────────
   Replaces the old "View pricing page" PricingTip with a button that opens the
   tier-comparison modal. Same blue pill styling for visual continuity.
*/
.svc__title-cmp-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
  margin-left: 0.55em;
  padding: 0.2rem 0.55rem;
  vertical-align: middle;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.2;
  color: var(--gg-blue-muted, #4a5dad);
  background: rgba(0, 42, 191, 0.06);
  border: 1px solid rgba(0, 42, 191, 0.14);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  position: relative;
  top: -1px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.svc__title-cmp-btn:hover,
.svc__title-cmp-btn:focus-visible {
  background: rgba(0, 42, 191, 0.11);
  border-color: rgba(0, 42, 191, 0.28);
  color: var(--gg-blue, #002ABF);
  outline: none;
  transform: translateY(-1px);
}
.svc__title-cmp-btn-arrow {
  display: inline-block;
  flex-shrink: 0;
  opacity: 0.75;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.svc__title-cmp-btn:hover .svc__title-cmp-btn-arrow,
.svc__title-cmp-btn:focus-visible .svc__title-cmp-btn-arrow {
  opacity: 1;
  transform: translate(1px, -1px);
}
@media (max-width: 600px) {
  .svc__title-cmp-btn {
    margin-left: 0.4em;
    padding: 0.18rem 0.45rem;
    font-size: 0.66rem;
  }
}

/* ── COMPARE-TIERS MODAL — CARD COLUMN LAYOUT ────────────────────────────────
   Replaces the legacy row-grid layout. Each tier is its own self-contained
   card. Sections (CHANNELS / VOLUME / SIGNALS / CADENCE & TEAM / BEST FOR)
   stack inside each card. "Most popular" ribbon sits on top of the Grow card.
*/
.cmp-cards {
  display: grid;
  gap: 1rem;
  align-items: stretch;
  /* Padding-top gives the absolutely-positioned "Most popular" ribbon
     (top: -10px) breathing room so it isn't clipped by the modal body's
     overflow-y boundary. */
  padding-top: 14px;
}
.cmp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.05rem 1rem 1.1rem;
  background: #fff;
  border: 1px solid rgba(15, 28, 53, 0.10);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 28, 53, 0.04);
}
.cmp-card--rec {
  border-color: var(--gg-blue, #002ABF);
  box-shadow: 0 0 0 1px var(--gg-blue, #002ABF), 0 1px 2px rgba(15, 28, 53, 0.04);
  background: color-mix(in srgb, var(--gg-blue, #002ABF) 3%, white);
}
.cmp-card__rec-pill {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.18rem 0.7rem;
  background: var(--gg-blue, #002ABF);
  color: #fff;
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 42, 191, 0.18);
}
.cmp-card__head {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-bottom: 0.4rem;
}
.cmp-card__tier-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gg-heading, #0f1c35);
  line-height: 1.2;
}
.cmp-card__tier-price {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--gg-blue, #002ABF);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.cmp-card__tier-sub {
  font-size: 0.75rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--gg-blue, #002ABF) 60%, transparent);
  margin-left: 0.2rem;
}
.cmp-card--ent .cmp-card__tier-price { color: var(--gg-blue, #002ABF); }
.cmp-card__sections {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.cmp-card__sect {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.cmp-card__sect-eyebrow {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--gg-body, #4b5d7a) 70%, transparent);
}
.cmp-card__sect-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.cmp-card__row {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--gg-heading, #0f1c35);
}
.cmp-card__mark {
  flex: 0 0 12px;
  width: 12px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.4;
}
.cmp-card__row--yes .cmp-card__mark { color: var(--gg-blue, #002ABF); }
.cmp-card__row--addon .cmp-card__mark,
.cmp-card__row--no .cmp-card__mark {
  color: color-mix(in srgb, var(--gg-body, #4b5d7a) 45%, transparent);
}
.cmp-card__row--addon .cmp-card__text,
.cmp-card__row--no .cmp-card__text {
  color: color-mix(in srgb, var(--gg-body, #4b5d7a) 85%, transparent);
}
.cmp-card__row--text .cmp-card__text,
.cmp-card__row--best .cmp-card__text {
  font-size: 0.85rem;
  line-height: 1.45;
}
.cmp-card__row--best .cmp-card__text {
  font-style: italic;
  color: color-mix(in srgb, var(--gg-body, #4b5d7a) 90%, transparent);
}
/* Tablet — keep 4 columns but tighten spacing */
@media (max-width: 1024px) {
  .cmp-cards { gap: 0.75rem; }
  .cmp-card { padding: 0.9rem 0.8rem 1rem; gap: 0.75rem; }
  .cmp-card__tier-price { font-size: 1.35rem; }
  .cmp-card__row { font-size: 0.78rem; }
}
/* Mobile — stack into a single column */
@media (max-width: 720px) {
  .cmp-cards { grid-template-columns: 1fr !important; }
}

/* ── Monthly lead volume widget (SDG only) ───────────────────────────────── */
.lead-vol {
  margin-top: 1rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 14px;
  /* glass-frame ::before uses border-radius: inherit, so the bevel + corners
     follow this 14px curve. */
}
.lead-vol > * { position: relative; z-index: 2; }
.lead-vol__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.lead-vol__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gg-heading, #0f1c35);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.lead-vol__info {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--gg-body, #4b5d7a);
  opacity: 0.6; transition: opacity 120ms;
  display: inline-flex; align-items: center;
}
.lead-vol__info:hover, .lead-vol__info:focus-visible { opacity: 1; outline: none; }
.lead-vol__count {
  font-size: 1.15rem; font-weight: 700;
  color: var(--gg-blue, #002ABF);
}
.lead-vol__count-suffix {
  font-size: 0.85rem; font-weight: 500; opacity: 0.8;
}
.lead-vol__sources {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.lead-vol__src {
  position: relative;
  display: flex; gap: 0.7rem; align-items: flex-start;
  padding: 0.95rem 1rem;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer; text-align: left;
  font: inherit;
  border-radius: 10px;
  /* thin-glass-frame ::before uses border-radius: inherit. */
}
.lead-vol__src > * { position: relative; z-index: 2; }
.lead-vol__src.is-on {
  background: color-mix(in srgb, var(--gg-blue, #002ABF) 6%, white);
}
.lead-vol__src-radio {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid #E2E2E2;
  background: #fff;
  display: grid;
  place-items: center;
  margin-top: 1px;
  color: #fff;
  z-index: 3;
  box-shadow:
    inset 1px 1px 3px rgba(0, 0, 0, 0.06),
    1px 1px 3px rgba(0, 0, 0, 0.06),
    -1px -1px 2px rgba(255, 255, 255, 0.7);
  transition: background 0.2s ease-out, border-color 0.2s ease-out,
              box-shadow 0.2s ease-out, transform 0.2s ease-out;
}
.lead-vol__src:hover .lead-vol__src-radio:not(.is-on) {
  border-color: #6B82D6;
  box-shadow:
    inset 1px 1px 3px rgba(0, 0, 0, 0.06),
    2px 2px 6px rgba(0, 0, 0, 0.08),
    -1px -1px 3px rgba(255, 255, 255, 0.8);
}
.lead-vol__src-radio.is-on {
  background: linear-gradient(109deg, var(--gg-blue, #002ABF) 0%, var(--gg-blue, #002ABF) 100%);
  border-color: transparent;
  color: #fff;
  transform: scale(1.05);
  box-shadow: var(--gg-premium-check-shadow);
}
.lead-vol__src-radio svg { stroke-width: 3; }
.lead-vol__src-body { flex: 1 1 auto; min-width: 0; }
.lead-vol__src-title {
  font-size: 0.92rem; font-weight: 700;
  color: var(--gg-heading, #0f1c35);
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.2rem;
  flex-wrap: wrap;
}
.lead-vol__src-badge {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  text-transform: uppercase;
}
.lead-vol__src-badge--default {
  background: color-mix(in srgb, var(--gg-heading, #0f1c35) 10%, transparent);
  color: var(--gg-heading, #0f1c35);
}
.lead-vol__src-badge--off {
  background: color-mix(in srgb, var(--gg-orange, #FC9D2B) 20%, transparent);
  color: var(--gg-orange-deep, #C77800);
}
.lead-vol__src-desc {
  font-size: 0.83rem; line-height: 1.4;
  color: var(--gg-body, #4b5d7a);
}
.lead-vol__hint {
  margin: 0 0 1rem 0;
  font-size: 0.83rem; line-height: 1.45;
  color: var(--gg-body, #4b5d7a);
}
.lead-vol__hint strong { font-weight: 700; color: var(--gg-heading, #0f1c35); }
.lead-vol__slider-wrap { margin: 0 0 0.85rem 0; }
.lead-vol__slider {
  width: 100%;
  height: 6px;
  appearance: none; -webkit-appearance: none;
  /* 2026-05-22: extend the gradient stop 10px past --fill-pct so the blue
     fill runs UNDER the thumb's left edge instead of stopping before it
     (the native range thumb is centered on the value, so the value's
     visual position is ~10px past the gradient cutoff without this). */
  background: linear-gradient(to right,
    var(--gg-blue, #002ABF) 0%,
    var(--gg-blue, #002ABF) calc(var(--fill-pct, 0%) + 10px),
    color-mix(in srgb, var(--gg-blue, #002ABF) 18%, transparent) calc(var(--fill-pct, 0%) + 10px),
    color-mix(in srgb, var(--gg-blue, #002ABF) 18%, transparent) 100%);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}
.lead-vol__slider::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px;
  background: var(--gg-blue, #002ABF);
  border: 3px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(15, 28, 53, 0.25);
}
.lead-vol__slider::-moz-range-thumb {
  width: 20px; height: 20px;
  background: var(--gg-blue, #002ABF);
  border: 3px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(15, 28, 53, 0.25);
}
.lead-vol__slider-ticks {
  display: flex; justify-content: space-between;
  font-size: 0.72rem;
  color: var(--gg-body, #4b5d7a);
  margin-top: 0.4rem;
}
.lead-vol__breakdown {
  border-top: 1px dashed color-mix(in srgb, var(--gg-blue, #002ABF) 18%, transparent);
  padding-top: 0.75rem;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.lead-vol__row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.85rem;
}
.lead-vol__row-label {
  color: var(--gg-body, #4b5d7a);
}
.lead-vol__row-val {
  font-weight: 700;
  color: var(--gg-heading, #0f1c35);
}
.lead-vol__row-val--free {
  color: var(--gg-orange-deep, #C77800);
}
.lead-vol__byol-note {
  margin: 0;
  padding: 0.85rem 1rem;
  background: color-mix(in srgb, var(--gg-orange, #FC9D2B) 10%, transparent);
  border: 1px dashed color-mix(in srgb, var(--gg-orange, #FC9D2B) 38%, transparent);
  border-radius: 10px;
  font-size: 0.85rem; line-height: 1.5;
  color: var(--gg-heading, #0f1c35);
}
@media (max-width: 520px) {
  .lead-vol__sources { grid-template-columns: 1fr; }
  .lead-vol__head { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  .lead-vol__count { font-size: 1.05rem; }
}

/* ── Addon quantity slider (used by SDG "Additional leads" – minQty=63, max=2000) */
.addon__qty--slider {
  margin: 0.75rem 0 0.25rem;
  padding: 0.85rem 1rem;
  background: color-mix(in srgb, var(--gg-blue, #002ABF) 4%, #fff);
  border: 1px solid color-mix(in srgb, var(--gg-blue, #002ABF) 16%, transparent);
  border-radius: 10px;
}
.addon__qty-slider-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 0.55rem;
}
.addon__qty-slider-head .addon__qty-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gg-heading, #0f1c35);
}
.addon__qty-slider-value {
  display: flex; flex-direction: column; align-items: flex-end;
  line-height: 1.2;
}
.addon__qty-slider-count {
  font-size: 1.1rem; font-weight: 700;
  color: var(--gg-blue, #002ABF);
}
.addon__qty-slider-total {
  font-size: 0.78rem;
  color: var(--gg-body, #4b5d7a);
}
.addon__qty-slider {
  width: 100%;
  height: 6px;
  appearance: none; -webkit-appearance: none;
  background: linear-gradient(to right,
    var(--gg-blue, #002ABF) 0%,
    var(--gg-blue, #002ABF) calc(var(--fill-pct, 0%) + 10px),
    color-mix(in srgb, var(--gg-blue, #002ABF) 18%, transparent) calc(var(--fill-pct, 0%) + 10px),
    color-mix(in srgb, var(--gg-blue, #002ABF) 18%, transparent) 100%);
  border-radius: 999px;
  outline: none; cursor: pointer;
  margin: 0;
}
.addon__qty-slider::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px;
  background: var(--gg-blue, #002ABF);
  border: 3px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(15, 28, 53, 0.25);
}
.addon__qty-slider::-moz-range-thumb {
  width: 20px; height: 20px;
  background: var(--gg-blue, #002ABF);
  border: 3px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(15, 28, 53, 0.25);
}
.addon__qty-slider-foot {
  display: flex; justify-content: space-between;
  margin-top: 0.4rem;
  font-size: 0.72rem;
  color: var(--gg-body, #4b5d7a);
}

/* ── BYOL list-quality selector (SDG, inside MonthlyLeadVolume) ─────────── */
.lead-vol__byol-qhead {
  margin: 1rem 0 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gg-heading, #0f1c35);
}
.lead-vol__byol-quality {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.lead-vol__byol-quality-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.85rem 0.95rem;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--gg-heading, #0f1c35);
  /* thin-glass-frame ::before paints the bevel via border-radius: inherit. */
}
.lead-vol__byol-quality-card > * { position: relative; z-index: 2; }
.lead-vol__byol-quality-card.is-on {
  background: color-mix(in srgb, var(--gg-blue, #002ABF) 6%, white);
  box-shadow: 0 0 0 2px var(--gg-blue, #002ABF) inset;
}
.lead-vol__byol-quality-title {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.25;
}
.lead-vol__byol-quality-desc {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--gg-body, #4b5d7a);
}
.lead-vol__byol-quality-pct {
  margin-top: 0.25rem;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--gg-orange-deep, #C77800);
  letter-spacing: -0.005em;
}
.lead-vol__byol-foot {
  margin: 0;
  padding: 0.75rem 0.95rem;
  background: color-mix(in srgb, var(--gg-orange, #FC9D2B) 10%, transparent);
  border: 1px dashed color-mix(in srgb, var(--gg-orange, #FC9D2B) 35%, transparent);
  border-radius: 10px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--gg-heading, #0f1c35);
}
@media (max-width: 600px) {
  .lead-vol__byol-quality { grid-template-columns: 1fr; }
}

/* ── Q6 priorActivities + cascade compact pill chips ──────────────────────
   Replaces the large 2-col card layout on Q6 ("Which of these are you
   already doing today?") and all its cascade sub-questions with compact
   rounded pill chips that flow in rows. Selected = brand-blue filled with
   white text; unselected = white pill with brand-blue text. Skip option
   gets a dashed border to signal it as a soft decline.
*/
.qualifier-q__opts--pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  grid-template-columns: none !important;
  touch-action: manipulation;
}
.qual-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gg-blue, #002ABF);
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--gg-blue, #002ABF) 18%, transparent);
  border-radius: 100px;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
  /* Mobile reliability: skip 300ms tap delay + visible tap feedback. Also
     ensures iOS Safari synthesises clicks even when the pill sits inside a
     scrollable container (Step 6's convert grid). */
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0, 42, 191, 0.15);
  user-select: none;
  -webkit-user-select: none;
  /* Bump the touch target to at least 36px tall so it clears Apple's reliable
     hit area on iOS (was 30.79px which is fragile on slim chips). */
  min-height: 36px;
}
.qual-pill:hover {
  background: color-mix(in srgb, var(--gg-blue, #002ABF) 6%, white);
  border-color: color-mix(in srgb, var(--gg-blue, #002ABF) 35%, transparent);
}
.qual-pill:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--gg-blue, #002ABF) 35%, transparent);
  outline-offset: 2px;
}
.qual-pill--on {
  background: linear-gradient(180deg, #1f3df0 0%, var(--gg-blue, #002ABF) 100%);
  border-color: var(--gg-blue, #002ABF);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 2px 6px rgba(0, 32, 160, 0.30);
}
.qual-pill--on:hover {
  background: linear-gradient(180deg, #1f3df0 0%, var(--gg-blue, #002ABF) 100%);
  border-color: var(--gg-blue, #002ABF);
  color: #fff;
}
.qual-pill--skip {
  border-style: dashed;
  color: color-mix(in srgb, var(--gg-blue, #002ABF) 70%, transparent);
}
@media (max-width: 480px) {
  .qual-pill { font-size: 0.8rem; padding: 0.5rem 0.85rem; }
}

/* ── VERTICAL PROCESS STEPPER (gg-stepper) ──────────────────────────────────
   Explicit rail-segment + dot architecture: each step renders
     <rail--top> <dot> <rail--bot>
   stacked vertically inside the indicator column. Rails connect adjacent
   dots; first step hides its top rail, last step hides its bottom rail.
   Active steps (1..currentN) paint both rails AND the dot's inner disc blue.
   The CURRENT step's bottom rail stays grey to mark the transition point.
*/
.gg-stepper {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0.4rem 0;
}
.gg-stepper__step {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  position: relative;
}
.gg-stepper__indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* 2026-05-22: shrunk from 26px to 20px so the column is tighter. */
  width: 20px;
  position: relative;
}
/* Rail segments: 14px wide, ~18px tall recessed grey groove */
.gg-stepper__rail {
  /* 2026-05-22: shrunk from 14px to 9px wide; inset shadows scaled
     proportionally so the metallic rail still reads correctly at the new
     thickness. */
  display: block;
  width: 9px;
  height: 22px;
  background: linear-gradient(180deg, #DAD4CE 0%, #E8E2DC 100%);
  border-left: 1px solid #BFB8B2;
  border-right: 1px solid #BFB8B2;
  box-shadow:
    inset 1.5px 0 2.5px rgba(120, 110, 100, 0.5),
    inset -1.25px 0 2px rgba(255, 255, 255, 0.9),
    inset 0 1px 1.5px rgba(120, 110, 100, 0.15);
  margin: -8px 0;  /* large overlap so flat rail ends tuck behind dot circles */
  position: relative;
  z-index: 0;
}
/* Round the top of the first rail and bottom of the last rail */
.gg-stepper__step:first-child .gg-stepper__rail--top {
  visibility: hidden;
}
.gg-stepper__step:last-child .gg-stepper__rail--bot {
  visibility: hidden;
}
/* Active rail segments — vivid blue gradient */
.gg-stepper__step--active .gg-stepper__rail--top {
  background: linear-gradient(180deg, var(--gg-blue, #002ABF) 0%, #1E41BD 50%, #2E55D9 100%);
  border-left: 1px solid #001973;
  border-right: 1px solid #001973;
  box-shadow:
    inset 1.5px 0 2.5px rgba(0, 15, 80, 0.55),
    inset -1.25px 0 2px rgba(120, 150, 230, 0.65),
    inset 0 1px 1.5px rgba(0, 15, 80, 0.25);
}
.gg-stepper__step--active .gg-stepper__rail--bot {
  background: linear-gradient(180deg, #2E55D9 0%, #1E41BD 50%, var(--gg-blue, #002ABF) 100%);
  border-left: 1px solid #001973;
  border-right: 1px solid #001973;
  box-shadow:
    inset 1.5px 0 2.5px rgba(0, 15, 80, 0.55),
    inset -1.25px 0 2px rgba(120, 150, 230, 0.65),
    inset 0 1px 1.5px rgba(0, 15, 80, 0.25);
}
/* On the CURRENT step (last active one), bottom rail stays grey to mark the transition */
.gg-stepper__step--active.ms-stack__row--current:not(:last-child) .gg-stepper__rail--bot {
  background: linear-gradient(180deg, #DAD4CE 0%, #E8E2DC 100%);
  border-left: 1px solid #BFB8B2;
  border-right: 1px solid #BFB8B2;
  box-shadow:
    inset 1.5px 0 2.5px rgba(120, 110, 100, 0.5),
    inset -1.25px 0 2px rgba(255, 255, 255, 0.9),
    inset 0 1px 1.5px rgba(120, 110, 100, 0.15);
}
/* Top rounded end on first rail */
.gg-stepper__step:nth-child(2) .gg-stepper__rail--top,
.gg-stepper__step:first-child .gg-stepper__rail--bot {
  /* keep default; rounding handled on the FIRST visible rail */
}
/* First/last rails are hidden anyway, but make sure their ends tuck behind the dot */
/* Dot (outer neumorphic ring) — sits on top of the rails */
.gg-stepper__dot {
  /* 2026-05-22: shrunk from 24px to 18px; outer + inner shadow radii
     proportionally tighter so the metallic dot stays sharp at the
     smaller size. */
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(134deg, #C2BCB7 0%, #FFFFFF 100%);
  box-shadow:
    inset 1px 1px 1.5px 0 #FFFFFF,
    inset -1px -1px 2px 0 rgba(176, 168, 160, 0.6),
    -1px -1px 3px 0 rgba(255, 255, 255, 0.8),
    1px 1px 3px 0 rgba(155, 148, 140, 0.55);
}
/* Inner disc (inactive) — soft off-white recessed dimple */
.gg-stepper__dot::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: block;
  border: 1px solid rgba(180, 170, 160, 0.8);
  background: linear-gradient(125deg,
    rgba(200, 192, 186, 0.85) 0%,
    rgba(255, 255, 255, 0.7) 35%,
    rgba(190, 180, 172, 0.75) 75%);
  box-shadow:
    inset -1px -1px 2px 0 rgba(170, 158, 148, 0.6),
    inset 1px 1px 1px 0 rgba(255, 255, 255, 0.6);
}
/* Active inner disc — bright brand blue */
.gg-stepper__step--active .gg-stepper__dot::before {
  border: 1px solid rgb(76, 169, 254);
  background: linear-gradient(142deg, #599BD9 13%, #1E41BD 52%, var(--gg-blue, #002ABF) 88%);
  box-shadow:
    inset 1px -1px 1.5px rgba(0, 0, 0, 0.18),
    0 0 4px rgba(30, 65, 189, 0.4);
}

/* Remove the blue current-row highlight inside the gg-stepper (new stepper
   already communicates "current" via the rail/dot, no need for row tint). */
.ms-stack__list.gg-stepper .ms-stack__row--current {
  background: transparent;
  border-color: transparent;
}

/* Inside .ms-stack__list, label/pct sit on the right above any rails */
.ms-stack__list.gg-stepper {
  padding: 0.3rem 0;
}
.ms-stack__list.gg-stepper .gg-stepper__step {
  padding: 0;
}
.ms-stack__list.gg-stepper .ms-stack__row-label,
.ms-stack__list.gg-stepper .ms-stack__row-pct {
  position: relative;
  z-index: 2;
}

/* Force section-head subtitle to fill full container width, defensive pin so
   it can't escape to top-right via rogue positioning. */
.section-head__sub,
.section-head .section-head__sub,
.build-section .section-head__sub,
.build-section--intro .section-head__sub,
.calc__main .section-head .section-head__sub {
  position: static !important;
  display: block !important;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* DISCOUNT TOAST NOTIFICATIONS
   Bottom-right stack matching the existing waitlist toast chrome but with
   brand blue accent. Stacks newest at the bottom (closest to corner) via
   flex-direction: column-reverse. Auto-dismisses after 5s. */
.discount-toast-stack {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.65rem;
  z-index: 9999;
  pointer-events: none;
  width: min(420px, calc(100vw - 3rem));
}
.discount-toast {
  pointer-events: auto;
  width: 100%;
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 1rem 1rem 1rem 1.1rem;
  border-radius: 16px;
  background: linear-gradient(160deg, #fff 0%, #f1f4ff 100%);
  border: 1px solid rgba(0, 42, 191, 0.22);
  box-shadow:
    0 10px 30px -8px rgba(20, 20, 30, 0.18),
    0 4px 10px -4px rgba(0, 42, 191, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  animation: discount-toast-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes discount-toast-in {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.discount-toast__icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, #cdd9ff 0%, #6b87ff 100%);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.discount-toast__body {
  flex: 1 1 auto;
  min-width: 0;
}
.discount-toast__title {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--gg-heading, #0b1f4d);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.discount-toast__copy {
  font-size: 0.8rem;
  color: var(--gg-body, #2c3142);
  line-height: 1.45;
  margin-top: 0.3rem;
}
.discount-toast__meta {
  font-size: 0.72rem;
  color: var(--gg-muted, #6b7280);
  margin-top: 0.45rem;
  font-style: italic;
}
.discount-toast__close {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--gg-muted, #6b7280);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
  padding: 0;
}
.discount-toast__close:hover {
  background: rgba(0, 42, 191, 0.08);
  color: var(--gg-blue, #002ABF);
}
@media (max-width: 480px) {
  .discount-toast-stack {
    bottom: 5.5rem;
    right: 0.75rem;
    left: 0.75rem;
    width: auto;
  }
  .discount-toast { padding: 0.85rem 0.9rem; }
}

/* Applied savings section in the summary sidebar — shows each per-service
   discount (commit, pay-upfront, BYOL list quality, agency) baked into the
   displayed line prices, so the user can see at a glance what deals are
   stacked. Informational only, doesn't affect the running total. */
.summary__applied-savings {
  margin: 0.55rem 0 0.45rem;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(0, 42, 191, 0.04) 0%, rgba(0, 42, 191, 0.08) 100%);
  border: 1px solid rgba(0, 42, 191, 0.10);
}
.summary__applied-savings-head {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gg-blue, #002ABF);
  margin-bottom: 0.35rem;
  opacity: 0.85;
}
.summary__applied-saving {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.18rem 0;
  font-size: 0.78rem;
  line-height: 1.3;
}
.summary__applied-saving-label {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--gg-body, #2c3142);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.summary__applied-saving-pct {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--gg-blue, #002ABF);
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
}

/* MSD tracker header now shows the £ amount of the discount next to the
   percentage (icon was removed for breathing room). Amount is the prominent
   blue number, % off sits next to it as a softer suffix. */
.ms-stack__head-pct {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.ms-stack__head-amount {
  font-weight: 800;
  color: var(--gg-blue, #002ABF);
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}
.ms-stack__head-pct-num {
  font-weight: 600;
  color: var(--gg-orange-deep, #C77800);
  font-size: 0.78rem;
}

/* Separator dot between £ amount and % off in the MSD tracker header */
.ms-stack__head-sep {
  display: inline-block;
  color: var(--gg-muted, #6b7280);
  font-weight: 600;
  font-size: 0.85rem;
  opacity: 0.55;
  margin: 0 0.15rem;
  user-select: none;
}
.ms-stack__head-pct {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: nowrap;
  justify-content: flex-end;
  white-space: nowrap;
}


/* 2026-05-22: Q6 cascade group label. Sits above each cluster of
   follow-up questions on Step 6 so the founder knows which top-level
   channel (Paid advertising / Email / Social / Hiring / Fundraising /
   Sales) the questions below belong to. */
.q6-cascade-label {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 1.5rem 0 0.65rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--gg-blue, #002ABF);
}
.q6-cascade-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--gg-blue, #002ABF) 22%, transparent);
}
.q6-cascade-label:first-child { margin-top: 0.25rem; }
.q6-cascade-group {
  display: contents;
}


/* 2026-05-22: OverseasCountryPicker — multi-select country picker that
   reveals under the "Overseas Cold Calling" addon when the user ticks
   the addon on. Designed to match the calculator's other inline panels:
   white surface, soft hairline border, brand-blue accent on selected
   pills, comfortable hit targets. */
.addon__overseas {
  margin-top: 0.55rem;
  padding: 0.65rem 0.75rem;
  background: rgba(0, 42, 191, 0.025);
  border: 1px solid rgba(0, 42, 191, 0.14);
  border-radius: 10px;
}
.ov-cp {
  position: relative;
  display: block;
}
.ov-cp__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #1a2a4a;
  margin-bottom: 0.45rem;
}
.ov-cp__trigger {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  min-height: 44px;
  padding: 0.45rem 0.55rem 0.45rem 0.75rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(214, 218, 226, 0.45) 100%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: #1a2a4a;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.04),
    inset 0 0 0 1px rgba(255, 255, 255, 0.45),
    0 1px 2px rgba(0, 0, 0, 0.03);
  transition: border-color 0.15s ease, box-shadow 0.18s ease, background 0.15s ease;
}
.ov-cp__trigger:hover {
  border-color: rgba(0, 0, 0, 0.20);
}
.ov-cp__trigger--open {
  border-color: var(--gg-blue, #002ABF);
  box-shadow:
    inset 0 0 0 1px var(--gg-blue, #002ABF),
    0 0 0 4px rgba(0, 42, 191, 0.12);
}
.ov-cp__placeholder {
  color: rgba(15, 28, 53, 0.45);
  flex: 1;
  font-size: 0.88rem;
}
.ov-cp__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  flex: 1;
}
.ov-cp__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.4rem 0.25rem 0.55rem;
  background: rgba(0, 42, 191, 0.08);
  border: 1px solid rgba(0, 42, 191, 0.22);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--gg-blue, #002ABF);
  font-weight: 500;
}
.ov-cp__chip-flag { font-size: 0.9rem; }
.ov-cp__chip-name { white-space: nowrap; }
.ov-cp__chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border: 0;
  background: rgba(0, 42, 191, 0.08);
  color: var(--gg-blue, #002ABF);
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
}
.ov-cp__chip-x:hover {
  background: rgba(0, 42, 191, 0.20);
}
.ov-cp__caret {
  color: rgba(15, 28, 53, 0.55);
  font-size: 0.7rem;
  flex-shrink: 0;
  margin-left: auto;
  transition: transform 0.15s ease;
}
.ov-cp__trigger--open .ov-cp__caret { transform: rotate(180deg); }

.ov-cp__panel {
  /* 2026-05-22: was position:absolute, but the parent .svc__addons-disc
     has overflow:hidden so the panel would get clipped below the addon
     card edge. Switched to inline-flow so the panel pushes content below
     it down naturally and can't be clipped. */
  position: relative;
  margin-top: 0.5rem;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 28, 53, 0.10);
  padding: 0.65rem;
  max-height: 320px;
  display: flex;
  flex-direction: column;
}
.ov-cp__search {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  font: inherit;
  font-size: 0.85rem;
  margin-bottom: 0.45rem;
  outline: none;
}
.ov-cp__search:focus {
  border-color: var(--gg-blue, #002ABF);
  box-shadow: 0 0 0 3px rgba(0, 42, 191, 0.10);
}
.ov-cp__list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0 -0.15rem;
  padding: 0 0.15rem;
}
.ov-cp__opt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 0.88rem;
  color: #1a2a4a;
  text-align: left;
  width: 100%;
}
.ov-cp__opt:hover {
  background: rgba(0, 42, 191, 0.05);
}
.ov-cp__opt--on {
  background: rgba(0, 42, 191, 0.06);
  color: var(--gg-blue, #002ABF);
  font-weight: 500;
}
.ov-cp__opt-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 1.5px solid #E2E2E2;
  background: #fff;
  color: #fff;
  flex-shrink: 0;
}
.ov-cp__opt-check.is-on {
  background: var(--gg-blue, #002ABF);
  border-color: var(--gg-blue, #002ABF);
}
.ov-cp__opt-flag { font-size: 1.05rem; line-height: 1; }
.ov-cp__opt-name { flex: 1; }
.ov-cp__empty {
  padding: 1rem;
  text-align: center;
  color: rgba(15, 28, 53, 0.45);
  font-size: 0.85rem;
}
.ov-cp__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.5rem;
  margin-top: 0.4rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.ov-cp__clear {
  background: transparent;
  border: 0;
  color: var(--gg-blue, #002ABF);
  font-weight: 600;
  font-size: 0.78rem;
  cursor: pointer;
  padding: 0;
}
.ov-cp__clear:hover { text-decoration: underline; }
.ov-cp__count {
  font-size: 0.78rem;
  color: rgba(15, 28, 53, 0.55);
}


/* 2026-05-22: MSD label info icon. Sits inline next to the
   MULTI-SERVICE DISCOUNT label with a small "i" SVG. Hover triggers a
   white tooltip explaining the discount only applies to service
   retainers (not add-ons). */
.ms-stack__info-wrap {
  display: inline-flex;
  align-items: center;
  margin-left: 0.35rem;
}
.ms-stack__info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: rgba(184, 94, 10, 0.75);
  background: transparent;
  border: 0;
  cursor: help;
  padding: 0;
  transition: color 0.15s ease;
  vertical-align: middle;
}
.ms-stack__info:hover { color: #B85E0A; }


/* 2026-05-22: breakdown modal line enhancements. Two-column row layout:
   left column stacks the label + an italic breakdown sub-line that
   shows the math behind each charge (e.g. "1 × £399/profile/mo").
   Right column keeps the value. */
.bdwn-modal__line-main {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1 1 auto;
}
.bdwn-modal__line-breakdown {
  font-size: 0.72rem;
  color: rgba(15, 28, 53, 0.55);
  font-style: italic;
  line-height: 1.3;
  padding-left: 1rem;
}
.bdwn-modal__line {
  align-items: flex-start;
  gap: 0.75rem;
}

/* 2026-05-23: Inline Cal.com booking widget on Step 6 success state.
   Replaces the old "Book a strategy call" button so users pick a slot
   directly without opening a modal.

   Spacing fix (2026-05-23 v2): Cal.com's iframe auto-resizes to its
   content via postMessage; we just set a SMALL min-height (to avoid a
   layout flash on first load) and let the iframe's own height drive the
   block. Negative horizontal margin pulls the embed flush to the
   plan-summary-card's bevel so the calendar gets the full available
   width and the side margins shrink. */
.cal-inline-success {
  margin: 0.5rem -0.75rem 0;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  min-height: 580px;
}
.cal-inline-success iframe {
  display: block;
  width: 100% !important;
  height: auto !important;
  min-height: 580px;
  border: 0 !important;
}
@media (max-width: 600px) {
  .cal-inline-success {
    margin: 0.5rem -0.6rem 0;
    min-height: 720px;
  }
  .cal-inline-success iframe { min-height: 720px; }
}


/* 2026-05-25: Premium Sourcing group card — consolidates the six
   "Premium Sourcing: …" Airtable add-ons into a single card with chip-pill
   multi-select for the source types. */
.addon.ps-group {
  grid-column: 1 / -1;
  /* 2026-05-26: PS group sits ABOVE the addon grid (not inside it), so the
     grid's gap doesn't separate it from the first addon below — add an
     explicit bottom margin that visually matches the inter-addon spacing. */
  margin-bottom: 0.75rem;
}
.ps-group__pill {
  margin-left: auto;
  padding: 0.15rem 0.55rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gg-blue, #002ABF);
  background: color-mix(in srgb, var(--gg-blue, #002ABF) 12%, transparent);
  border-radius: 999px;
}
.ps-group__chips {
  margin-top: 0.85rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.55rem;
}
.ps-chip {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.65rem 0.8rem;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--gg-blue, #002ABF) 14%, transparent);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.ps-chip:focus-visible {
  outline: 2px solid var(--gg-blue, #002ABF);
  outline-offset: 2px;
}
.ps-chip__head {
  display: flex;
  /* 2026-05-29: top-align the checkbox with the label so 1-line and
     2-line labels both keep their checkbox flush at the top of the card.
     Previous align-items: center made the checkbox drift down on 2-line
     chips and broke visual rhythm across the grid. */
  align-items: flex-start;
  gap: 0.55rem;
}
.ps-chip:hover {
  border-color: color-mix(in srgb, var(--gg-blue, #002ABF) 35%, transparent);
  background: color-mix(in srgb, var(--gg-blue, #002ABF) 4%, #fff);
}
.ps-chip--on {
  background: color-mix(in srgb, var(--gg-blue, #002ABF) 8%, #fff);
  border-color: var(--gg-blue, #002ABF);
  box-shadow: 0 1px 2px rgba(0, 42, 191, 0.10);
}
.ps-chip__check {
  /* 2026-05-25: matched to the canonical premium check style used on
     .df-role-card__check / .lead-vol__src-radio. Soft light-blue inset
     highlight + warm outer glow when active, neumorphic box when idle. */
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid #E2E2E2;
  background: rgba(255, 255, 255, 0.95);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow:
    inset 1px 1px 3px rgba(0,0,0,0.06),
    1px 1px 3px rgba(0,0,0,0.06),
    -1px -1px 2px rgba(255,255,255,0.7);
  transition: background 0.2s ease-out, border-color 0.2s ease-out,
              box-shadow 0.2s ease-out, transform 0.2s ease-out;
}
.ps-chip:hover .ps-chip__check {
  border-color: #6B82D6;
}
.ps-chip--on .ps-chip__check {
  background: linear-gradient(109deg, var(--gg-blue, #002ABF) 0%, var(--gg-blue, #002ABF) 100%);
  border-color: transparent;
  color: #fff;
  transform: scale(1.05);
  box-shadow: var(--gg-premium-check-shadow);
}
.ps-chip__check svg { stroke-width: 3; }
.ps-chip__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.ps-chip__name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gg-heading, #0f1c35);
}
.ps-chip__price {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gg-blue, #002ABF);
  margin-top: 0.15rem;
}
@media (max-width: 600px) {
  .ps-group__chips { grid-template-columns: 1fr; }
}

/* Inline quantity stepper inside selected Premium Sourcing chips. */
.ps-chip__qty {
  border-top: 1px dashed color-mix(in srgb, var(--gg-blue, #002ABF) 22%, transparent);
  padding-top: 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ps-chip__qty-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gg-body, #4b5d7a);
  letter-spacing: 0.01em;
}
.ps-chip__qty-input-wrap {
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--gg-blue, #002ABF) 22%, transparent);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  width: fit-content;
}
.ps-chip__qty-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  background: color-mix(in srgb, var(--gg-blue, #002ABF) 5%, #fff);
  color: var(--gg-blue, #002ABF);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.ps-chip__qty-step:hover:not(:disabled) {
  background: color-mix(in srgb, var(--gg-blue, #002ABF) 14%, #fff);
}
.ps-chip__qty-step:disabled {
  color: #cbd5e0;
  cursor: not-allowed;
}
.ps-chip__qty-input {
  width: 48px;
  height: 28px;
  border: 0;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gg-heading, #0f1c35);
  background: transparent;
  -moz-appearance: textfield;
}
.ps-chip__qty-input::-webkit-outer-spin-button,
.ps-chip__qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ps-chip__qty-input:focus {
  outline: none;
  background: color-mix(in srgb, var(--gg-blue, #002ABF) 6%, #fff);
}

/* ── Loom 3: Convert-card hover/click polish ───────────────────────────────
   Base app.css sets .convert-card:hover { transform:translateY(-4px);
   transition:all 0.25s } which causes a very visible 4px upward jump and
   animates every CSS property (can flicker on click). Override here to:
   1. Scope the transition to only transform + box-shadow (no layout ripple).
   2. Reduce the lift from 4px to 2px so the card feels slick, not jumpy.
   3. Add an :active snap-back so clicking doesn't look sticky. */
.convert-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}
.convert-card:hover {
  transform: translateY(-2px) !important;
}
.convert-card:active {
  transform: translateY(0) !important;
  transition-duration: 0.08s !important;
}
/* plan-summary-card already has transform:none !important from its own rules;
   this rule is belt-and-braces for any other convert-card in the checkout flow
   that should not animate (e.g. the form card once the quote is submitted). */
.convert-card--no-lift:hover {
  transform: none !important;
}

/* ── Loom 3: Youreset edit-service shortcut bar ────────────────────────────
   Pinned to the very top of the right column on the final step so the user
   can always see "Edit service selection" without scrolling, even when the
   founder/agency qualifier is long. Hidden once the quote is submitted. */
.youreset__edit-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: -0.5rem; /* tuck tight under the bar, section-head has its own spacing */
}
.youreset__edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.35rem 0.75rem;
  background: white;
  border: 1px solid color-mix(in srgb, var(--gg-blue, #002ABF) 18%, transparent);
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gg-blue, #002ABF);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.youreset__edit-btn:hover {
  background: color-mix(in srgb, var(--gg-blue, #002ABF) 5%, white);
  border-color: var(--gg-blue, #002ABF);
}

/* ── Loom 3: Cut-off / clipping fixes ─────────────────────────────────────
   1. plan-summary-card__title: ensure it wraps on narrow viewports rather
      than overflowing its flex row (the title + edit button are in a
      space-between flex row which can squeeze the title).
   2. convert__grid items: guarantee min-width:0 so flex children never
      force horizontal overflow on small laptop widths.
   3. cac__intro: flex column already correct, but add min-width:0 so long
      title/desc strings wrap rather than extending outside the card. */
.plan-summary-card__title {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.convert__grid > * {
  min-width: 0;
}
.cac__intro {
  min-width: 0;
}
.cac__title,
.cac__desc {
  overflow-wrap: break-word;
  word-break: break-word;
}
@media (max-width: 600px) {
  .youreset__edit-bar { margin-bottom: 0; }
  .plan-summary-card__row { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}

/* ── Loom 3 #61: Setup fee on recommended tier ─────────────────────────────
   The recommended (orange featured) tier inherits .tier--recommended's
   orange colour overrides for .tier__setup-fee, making the setup fee line
   prominent orange. Alexander asked for it subtle. Override to muted grey
   while leaving the monthly price itself orange (user-facing headline). */
.tier--recommended .tier__setup-fee {
  color: var(--gg-muted, #6b7280) !important;
}

/* 2026-05-26: HoverPortalTip wrap around .svc__title-cmp-btn — keep the
   inline layout intact so the pill still sits beside the service title. */
.svc__title-cmp-tip-wrap {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

/* ── ServicesInquiryModal (2026-05-29) ─────────────────────────────────
   Soft-prompt modal on the final wizard step when no services are
   selected. Quick-pick chips + optional free-text. Skippable; never
   blocks submit. Re-openable via .si-reopen-chip below the page title.
   Styling intentionally mirrors the CompareTiersModal scaffold so the
   two modals feel like siblings.
   ─────────────────────────────────────────────────────────────────── */
.si-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 32, 0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
  animation: si-modal-fade-in 180ms ease-out;
}
@keyframes si-modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.si-modal {
  position: relative;
  background: #FFFFFF;
  border-radius: 18px;
  width: min(560px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px 28px 24px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 24px 48px -16px rgba(8, 12, 32, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  animation: si-modal-pop-in 220ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes si-modal-pop-in {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.si-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(8, 12, 32, 0.04);
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--txt-secondary, #4b5563);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease;
}
.si-modal__close:hover {
  background: rgba(8, 12, 32, 0.08);
  color: var(--txt-primary, #111);
}
.si-modal__head {
  margin-bottom: 18px;
}
.si-modal__eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gg-blue, #002ABF);
  margin-bottom: 6px;
}
.si-modal__title {
  font-family: 'Almarai', system-ui, sans-serif;
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--txt-primary, #111);
  margin: 0 0 8px 0;
  line-height: 1.2;
}
.si-modal__sub {
  font-size: 0.9rem;
  color: var(--txt-secondary, #4b5563);
  line-height: 1.5;
  margin: 0;
}
.si-modal__section {
  margin-bottom: 18px;
}
.si-modal__section:last-of-type {
  margin-bottom: 0;
}
.si-modal__label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--txt-primary, #111);
  margin-bottom: 10px;
}
.si-modal__opt {
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--txt-secondary, #6b7280);
  text-transform: none;
  letter-spacing: 0;
}
.si-modal__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.si-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  border: none;
  background: transparent;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--txt-primary, #111);
  cursor: pointer;
  transition: transform 100ms ease, color 120ms ease;
  position: relative;
}
.si-chip:hover {
  color: var(--gg-blue, #002ABF);
}
.si-chip--on {
  color: var(--gg-blue, #002ABF);
}
.si-chip__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid #E2E2E2;
  background: #FFFFFF;
  flex-shrink: 0;
  transition: background 120ms ease, border-color 120ms ease;
}
.si-chip__check.is-on {
  background: linear-gradient(109deg, var(--gg-blue, #002ABF) 0%, var(--gg-blue, #002ABF) 100%);
  border-color: transparent;
  color: #FFFFFF;
  box-shadow:
    rgba(255, 255, 255, 0.5) -2px -2px 2px -1px,
    rgba(219, 227, 255, 0.69) 1px 1.5px 2px 0px inset,
    rgba(123, 145, 227, 0.63) -2.5px -2px 2px 0px inset,
    rgba(84, 84, 84, 0.35) 2px 2px 8px 0px,
    rgba(0, 31, 145, 0.8) -1px -4px 20px 0px inset;
}
.si-modal__textarea {
  width: 100%;
  min-height: 80px;
  padding: 12px 14px;
  border-radius: 10px;
  font: inherit;
  font-size: 0.9rem;
  color: var(--txt-primary, #111);
  resize: vertical;
  box-sizing: border-box;
}
.si-modal__char-counter {
  text-align: right;
  font-size: 0.72rem;
  color: var(--txt-muted, #9ca3af);
  margin-top: 4px;
}
.si-modal__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  padding-top: 14px;
  margin-top: 6px;
  border-top: 1px solid rgba(8, 12, 32, 0.06);
}
.si-modal__actions .btn--ghost {
  /* compact secondary on this modal — fits the compact action row */
  padding: 10px 16px;
}
.si-modal__actions .btn--primary[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Re-open chip below the page title — only visible when no services
   are selected. Subtle dotted-amber treatment so it reads as a soft
   reminder, not a CTA fighting the page hierarchy. */
.si-reopen-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  margin-top: 14px;
  border: 1.5px dashed rgba(0, 42, 191, 0.30);
  border-radius: 999px;
  background: rgba(229, 235, 255, 0.35);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--gg-blue, #002ABF);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.si-reopen-chip:hover {
  background: rgba(229, 235, 255, 0.7);
  border-color: rgba(0, 42, 191, 0.55);
}
.si-reopen-chip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gg-blue, #002ABF);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}
.si-reopen-chip__label {
  white-space: nowrap;
}

/* Mobile: tighten modal padding + actions wrap. */
@media (max-width: 600px) {
  .si-modal-overlay { padding: 12px; }
  .si-modal { padding: 22px 18px 18px; border-radius: 14px; }
  .si-modal__title { font-size: 1.3rem; }
  .si-modal__actions { flex-direction: column-reverse; align-items: stretch; }
  .si-modal__actions .btn { width: 100%; }
  .si-reopen-chip__label { white-space: normal; }
}

/* 2026-05-29: mobile YoureSetPage — stop .page__foot from looking like a
   trapped/covered container below the sticky metal sidebar. Strips the
   border-top divider (the sidebar's own frame edge is enough visual
   separation) and centres the back-button + meta text cleanly. The
   step-counter variant (.page__foot--steps used on BuildPage) is
   intentionally not targeted — that one has its own layout. */
@media (max-width: 600px) {
  .page > .container > .page__foot {
    border-top: none;
    margin-top: 1.5rem;
    padding-top: 0.25rem;
    gap: 0.6rem;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .page > .container > .page__foot .btn--ghost {
    width: 100%;
    justify-content: center;
  }
  .page > .container > .page__foot .page__foot-meta {
    justify-content: center;
    margin-top: 0.25rem;
    font-size: 0.78rem;
    color: var(--gg-muted, #6b7280);
    opacity: 0.85;
  }
  /* Hide the desktop-only right-edge spacer div (style={{width:120}}) that
     adds vertical noise on mobile column layout. */
  .page > .container > .page__foot > div[style*="120"] {
    display: none;
  }
}

/* 2026-05-29 Batch 29: stabilise checkout dynamic heading height (no reflow when
   switching proposal options) + pin Back to services bar. */
.checkout-form .cac__title { min-height: 2.5em; }
.page__foot--sticky {
  /* 2026-05-30: re-stuck per Nicole. Keeps Back to services reachable on the
     checkout step without scrolling to the bottom. */
  position: sticky;
  bottom: 0;
  z-index: 60;
  margin-top: 1rem;
  padding: 0.6rem 0;
  background: rgba(245, 246, 250, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid rgba(15, 28, 53, 0.08);
}

/* 2026-05-29: force all 4 tier columns to be truly equal width by
   overriding the default min-content sizing. Without minmax(0, 1fr),
   a long chip in one tier (e.g. Scale's "Email and call outreach with
   advanced signals") could expand its column past the other three. */
.tiers {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.tier {
  min-width: 0;
}

/* ── Whitelabel card inline client-ready expansion (2026-05-29) ─────────
   The "Do you have a client ready?" question is now embedded INSIDE the
   selected white-label agency intent card. Compact + responsive. Sibling
   cards in the same row stretch to match height via the grid's default
   align-items: stretch. */
.agency-intent-grid {
  align-items: stretch;
}
.agency-intent-card__client-ready {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(0, 42, 191, 0.18);
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.agency-intent-card__client-ready-q {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--txt-primary, #1a2a4a);
  line-height: 1.3;
}
.agency-intent-card__client-ready-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
/* 2026-05-29: bespoke chip styles dropped — Yes/Not yet now use the
   canonical btn--primary / btn--ghost design-system components. Only
   the flex-sizing override remains so the two buttons share the row
   width inside the compact card. */
.agency-intent-card__client-ready-btn {
  flex: 1 1 0;
  min-width: 0;
}
.agency-intent-card__client-ready-cta {
  align-self: flex-start;
  padding: 7px 12px !important;
  font-size: 0.78rem !important;
  border-radius: 10px !important;
  margin-top: 2px;
}
/* Mobile + narrow viewports: stack the Yes/Not yet buttons full-width
   so the touch targets stay generous. */
@media (max-width: 480px) {
  .agency-intent-card__client-ready-btns { flex-direction: column; }
  .agency-intent-card__client-ready-btn { flex: 1 1 auto; }
  .agency-intent-card__client-ready-cta { align-self: stretch; text-align: center; }
}

/* 2026-05-29: subtle grey explainer beside the Speak-to-us CTA on the
   white-label "Not yet" path. Flex row so the text sits to the right
   of the button on wide viewports + wraps below on narrow. */
.agency-intent-card__client-ready-cta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.agency-intent-card__client-ready-info {
  flex: 1 1 0;
  min-width: 0;
  font-size: 0.74rem;
  line-height: 1.4;
  color: var(--gg-muted, #6b7280);
  font-weight: 500;
}
@media (max-width: 600px) {
  .agency-intent-card__client-ready-cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .agency-intent-card__client-ready-info {
    text-align: center;
    flex: 0 0 auto;
  }
}

/* 2026-05-29: tiny grey (i) icon inline with the short "15-min scoping
   call" label. Carries the longer detail copy on hover via HoverPortalTip. */
.agency-intent-card__client-ready-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  vertical-align: middle;
  color: var(--gg-muted, #6b7280);
  opacity: 0.7;
  cursor: help;
  transition: opacity 120ms ease, color 120ms ease;
}
.agency-intent-card__client-ready-info-icon:hover,
.agency-intent-card__client-ready-info-icon:focus-visible {
  opacity: 1;
  color: var(--gg-blue, #002ABF);
  outline: none;
}
.agency-intent-card__client-ready-info-tip-wrap {
  display: inline-flex;
  vertical-align: middle;
}

/* ── ScrollProgressDot (2026-05-29) ─────────────────────────────────────
   Subtle floating circular indicator anchored to the bottom-right of the
   viewport. Fills its ring as the user scrolls. Hides itself when the
   page isn't tall enough to scroll. Subtle by default; brightens on
   hover so the user can find it but it never dominates the page. */
.scroll-progress-dot {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(8px) saturate(1.05);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
  border: 1px solid rgba(0, 42, 191, 0.10);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 90;
  opacity: 0.58;
  color: var(--gg-blue, #002ABF);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 6px 18px -10px rgba(0, 42, 191, 0.20);
  transition: opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.scroll-progress-dot:hover {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 10px 24px -10px rgba(0, 42, 191, 0.30);
}
.scroll-progress-dot:focus-visible {
  opacity: 1;
  outline: 2px solid var(--gg-blue, #002ABF);
  outline-offset: 2px;
}
.scroll-progress-dot svg {
  display: block;
  pointer-events: none;
}
/* Mobile: shrink + tighten the offset. */
@media (max-width: 600px) {
  .scroll-progress-dot {
    width: 40px;
    height: 40px;
    bottom: 16px;
    right: 16px;
  }
}
/* Reduced motion: drop the dash transition. */
@media (prefers-reduced-motion: reduce) {
  .scroll-progress-dot svg circle {
    transition: none !important;
  }
  .scroll-progress-dot {
    transition: opacity 60ms ease;
  }
}

/* 2026-05-29: position dot in the gutter just OUTSIDE the content's
   right edge — not inside. Inside-the-content placement was covering
   the sidebar pricing breakdown. Formula = gutter - dot_width - 8px
   buffer, so the dot's LEFT edge sits 8px to the right of the content
   (sidebar) right edge. On viewports too narrow for the gutter, max()
   keeps it at 8px from the viewport edge. */
@media (min-width: 1400px) {
  .scroll-progress-dot {
    right: max(8px, calc((100vw - 1550px) / 2 - 52px));
  }
}
@media (min-width: 1800px) {
  .scroll-progress-dot {
    right: max(8px, calc((100vw - 1700px) / 2 - 52px));
  }
}

/* 2026-05-29: White-label retail-price label tooltip (HoverPortalTip
   wrapper + (i) icon). Mirrors the .svc__title-cmp-tip-wrap pattern. */
.svc-margin__cell-lbl-tip-wrap {
  display: inline-block;
  cursor: help;
}
.svc-margin__cell-lbl-text {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
/* 2026-05-29: visual moved to canonical .info-icon class; this rule
   stays only to preserve any positional / spacing intent at the call
   site (no extra styling needed because .info-icon brings the look). */
.svc-margin__cell-lbl-info { /* canonical .info-icon supplies the look */ }

/* ── Canonical info icon (2026-05-29) ───────────────────────────────────
   Use <window.InfoIcon /> in JSX to render this. Visual matches the
   sidebar's .summary__total-info (the icon next to Monthly Total). All
   other places that previously used a literal "i" character inside
   styled spans now route through this single class for consistency. */
.info-icon {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: help;
  color: var(--gg-muted, #6b7280);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  opacity: 0.6;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.info-icon:hover,
.info-icon:focus-visible {
  opacity: 1;
  color: var(--gg-blue, #002ABF);
  outline: none;
}
.info-icon svg { display: block; }

/* ── Toast exit animation (2026-05-29) ─────────────────────────────
   Two-step dismiss: when `leaving=true`, the toast plays a smooth
   fade + slide-right + slight scale-down. After ~320ms the React
   removeTimer kicks in and pulls it out of the DOM. */
@keyframes discount-toast-out {
  0%   { opacity: 1; transform: translateX(0) scale(1); }
  100% { opacity: 0; transform: translateX(24px) scale(0.96); }
}
.discount-toast--leaving {
  animation: discount-toast-out 320ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .discount-toast--leaving {
    animation: none;
    opacity: 0;
    transition: opacity 200ms ease;
  }
}

/* ── PA Custom inline input (2026-05-29) ──────────────────────────
   When the Custom tile is selected, the £/day input lives INSIDE the
   tile instead of in a separate row below. Visual: compact pill with
   £ prefix, mini number input, /day suffix. */
.pa-spend__tile-custom-input-wrap {
  display: inline-flex;
  align-items: baseline;
  gap: 0.18rem;
  padding: 0.15rem 0.4rem;
  background: rgba(0, 42, 191, 0.05);
  border: 1px solid color-mix(in srgb, var(--gg-blue, #002ABF) 22%, transparent);
  border-radius: 8px;
  width: fit-content;
  max-width: 100%;
  margin-top: 0.1rem;
}
.pa-spend__tile-custom-input-wrap .pa-spend__custom-prefix {
  color: var(--gg-blue, #002ABF);
  font-weight: 700;
  font-size: 0.95rem;
}
.pa-spend__tile-custom-input-wrap .pa-spend__custom-input {
  width: 60px;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--gg-blue, #002ABF);
  padding: 0;
  -moz-appearance: textfield;
}
.pa-spend__tile-custom-input-wrap .pa-spend__custom-input::-webkit-outer-spin-button,
.pa-spend__tile-custom-input-wrap .pa-spend__custom-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.pa-spend__tile-custom-input-wrap .pa-spend__custom-input:focus {
  outline: none;
}
.pa-spend__tile-custom-input-wrap .pa-spend__custom-suffix {
  color: var(--gg-muted, #6b7280);
  font-size: 0.78rem;
  font-weight: 500;
}

/* 2026-05-30: on chip add-on cards (Premium Sourcing, Content/3D sub-groups),
   render the Onboarding Availability block BELOW the chips so it matches the
   other add-ons. addon__main becomes a flex column and the capacity block is
   pushed to the end via order. */
.ps-group .addon__main { display: flex; flex-direction: column; }
.ps-group .addon__main > .addon__capacity { order: 3; }