/* ============================================================
   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.4rem;
  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;
}
.gm-tip-portal { pointer-events: auto; max-width: 330px; }
.gm-tip-portal__p { display: block; margin: 0 0 0.6em; }
.gm-tip-portal__p:last-child { margin-bottom: 0; }
.gm-tip-portal__more { margin-top: 0.15em; }
.gm-tip-portal__link { color: var(--gg-blue, #002abf); font-weight: 700; text-decoration: underline; }
.gm-tip-portal__link:hover { text-decoration: none; }
/* 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: left;
  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: #b45309;
  padding-top: 0.3rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  margin-top: 0.1rem;
}

/* ── 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 ── */
/* 2026-06-12 (Loom 45 1:22-1:50): the banner sits left in the main column
   (it used to centre above the whole grid and push the sidebar down), and the
   metal frame plus cream fill come from .alert--metal and .gg-frame, the same
   chrome as the white-label discount banner, replacing the amber gradient. */
.welcome-back {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  margin: 0 0 1.5rem;
  max-width: 920px;
}
.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;
}

/* Loom 65: Client Type cards. Scale the Agencies wordmark to match Founders/Investors (its image has extra vertical padding, so it renders smaller at the same height). Add a hover info tooltip to the top-right of each card. */
.client-card__logo-img[src*="gogorilla-agencies"] { transform: scale(1.2); transform-origin: center; }
.client-grid--compact .client-card__info {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 5px;
  cursor: help;
}
.client-card__info-i { width: 14px; height: 14px; color: #9ca3af; }
.client-card__info:hover .client-card__info-i,
.client-card__info:focus-visible .client-card__info-i { color: #4b5563; }

/* 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: 48px;
  height: 48px;
  border-radius: 10px;
  /* 2026-06-24: lavender squircle copied from the .svc__icon service-card icon
     (linear-gradient #EBF0FA -> #C9D5EC). Logo art (client-*.webp) has
     transparent corners so the gradient shows cleanly behind it. Depth is
     rendered with INSET shadows only: the tile sits flush to the panel's left
     edge inside overflow:hidden containers (.summary__plan--inline /
     .summary__list / .summary__list-card), so an outer drop shadow (as on
     .svc__icon) would be clipped on the left. */
  background: linear-gradient(160deg, #EBF0FA 0%, #C9D5EC 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1.5px 2px rgba(11, 24, 56, 0.09);
}
/* When the plan shows a discount chip (e.g. agency white-label), the header is
   3 lines tall; grow the logo to span kicker-top to chip-bottom. 2-line plans
   keep 48px. :has() falls back gracefully to 48px on old browsers. */
.summary__plan--inline:has(.summary__plan-chip) .summary__plan-icon {
  width: 60px;
  height: 60px;
  flex-basis: 60px;
  min-width: 60px;
  border-radius: 12px;
}
.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; }
  /* 2026-06-04 (QA): on mobile the sidebar stacks under the main column, so let
     it flow naturally (the page scrolls) instead of an internal scroll. */
  .summary__scroll { display: block; overflow: visible; max-height: none; }
  .summary__list { max-height: none; overflow: visible; }
  .summary__scroll > .ms-stack { box-shadow: none; }
}

/* ============================================================
   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));
}
/* 2026-06-18 (Loom 48): when the ribbon carries a badgeTip, a positioned
   wrapper takes the ribbon's slot and becomes the hover target. */
.addon__ribbon-tip-wrap {
  position: absolute;
  top: 12px;
  left: -6px;
  z-index: 3;
  height: 28px;
  display: inline-flex;
  pointer-events: auto;
}
.addon__ribbon-tip-wrap .addon__ribbon-img {
  position: static;
  top: auto;
  left: auto;
  pointer-events: auto;
}

/* 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.4rem;
  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.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.45rem;
}
.addon__price-main {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--gg-blue, #002abf);
  line-height: 1;
  letter-spacing: -0.01em;
}
/* Batch 30: amber add-on prices only on the agency (white-label) path. The
   free / custom / included / neg variants keep their muted or green colours. */
.svc--wl .addon__price-main:not(.addon__price-main--free):not(.addon__price-main--custom):not(.addon__price-main--included):not(.addon__price-main--neg) {
  color: #B85E0A;
}
.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;
  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: #374151; }

/* 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: 6px;
  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: #374151; }
.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: calc(50% + var(--portal-tip-caret-shift, 0px));
  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: calc(50% + var(--portal-tip-caret-shift, 0px));
  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: linear-gradient(180deg, #FFFFFF 0%, #F7F8FB 100%);
  border: 1px solid rgba(15, 23, 42, 0.06);
  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.ms-stack__tip { color: #4b5563; }
.hover-portal-tip.channel-tile__tip {
  transform: translate(-50%, calc(-100% - 12px));
  background: #ffffff;
  color: #4b5563;
  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;
}
/* 2026-06-02: thin glass frame on the channels-panel onboarding indicator,
   matching the add-on capacity bars (full-width gradient, vertical frame gap). */
.capacity__track {
  padding: 6px 0;
  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%);
  box-shadow:
    0 0 0 1px rgba(220, 226, 235, 0.95),
    0 1px 2px rgba(15, 28, 53, 0.06),
    0 0 0 2px rgba(255, 255, 255, 0.85),
    inset 0 1px 1px rgba(15, 28, 53, 0.12),
    inset 0 -1px 1px rgba(255, 255, 255, 0.95);
  isolation: isolate;
}
.capacity__track .capacity-video {
  width: 100%;
  height: 100%;
  border-radius: 100px;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.capacity__track > .capacity__frame {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
}
@media (max-width: 720px) {
  .capacity__track { padding: 4px 0; }
}
.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__info-i { transition: background 0.15s ease, color 0.15s ease; }
.intent-card__info:hover .intent-card__info-i {
  background: rgba(0, 0, 0, 0.22);
  color: rgba(0, 0, 0, 0.85);
}

/* 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;
  text-align: left;
  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: calc(50% + var(--portal-tip-caret-shift, 0px));
  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: calc(50% + var(--portal-tip-caret-shift, 0px));
  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: calc(50% + var(--portal-tip-caret-shift, 0px));
  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: calc(50% + var(--portal-tip-caret-shift, 0px));
  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: #374151; }
.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: #4b5563; font-weight: 400; }
.summary__total-tip::before {
  content: '';
  position: absolute;
  top: 100%;
  left: calc(50% + var(--portal-tip-caret-shift, 0px));
  transform: translateX(-50%);
  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: calc(50% + var(--portal-tip-caret-shift, 0px));
  transform: translateX(-50%);
  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: #4b5563;
}

/* ============================================================
   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: 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;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.62rem;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.summary__line-waitlist-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #B85E0A;
  box-shadow: 0 0 0 2px rgba(184, 94, 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: calc(50% + var(--portal-tip-caret-shift, 0px));
  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: calc(50% + var(--portal-tip-caret-shift, 0px));
  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: calc(50% + var(--portal-tip-caret-shift, 0px));
  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: calc(50% + var(--portal-tip-caret-shift, 0px));
  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; }
  /* 2026-06-17: trim the final (YoureSet) page's bottom padding on mobile. The
     6rem padding-bottom clears the BuildPage's fixed mobile action bar; the
     YoureSet page has no such bar (static footer), so it was just dead space
     below the "Your quote is saved / Copy share link" footer. */
  .page:has(.youreset__grid) { padding-bottom: 1.75rem; }
  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;
    /* MOB-01 (2026-06-17): drop the grid's internal overflow on mobile. The
       desktop rule sets overflow-y:auto; with a classic (non-overlay) scrollbar
       its tall content spawned a 15px internal scrollbar, so the flex client
       width was 332 not 347 and .build-section/.summary sat 15px left of centre.
       overflow:visible restores symmetric gutters on every device; the flex
       `order` (build -> summary -> footer) is unaffected. */
    overflow: visible !important;
  }
  .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;
  }
  /* MOB-02 (2026-06-17): vertically centre summary rows so the £ value tracks
     the label box when the label wraps to two lines (channels / setup-fee /
     add-on sub-lines). Was align-items:baseline, which floated the price ~11px
     above a wrapped label's centre. Single-line rows are visually unchanged. */
  .summary__line { align-items: center; }
  .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; }
  /* 2026-06-17: reclaim the add-on card's right dead-space on mobile. .addon__main
     carried a 2rem right inset so every row cleared the top-right checkbox, but
     only the title sits beside it — the description and onboarding bar stopped
     ~32px short, reading as an empty right strip (esp. in the white-label view).
     Drop the inset, keep it on the title row only, and zero the margin-box's
     desktop counter-margin so nothing overflows. Verified: bar/desc full width,
     title still clears the checkbox, no horizontal scroll. */
  .addon__main { padding-right: 0 !important; }
  .addon__title-row { padding-right: 2rem; }
  .addon__main .addon__margin { margin-right: 0 !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. */
  /* 2026-06-17: only featured (ribbon) cards reserve the 2.5rem top space.
     On non-featured cards it was dead space above the title, so trim it to the
     normal card padding. */
  .svc__addons-disc .addon--featured {
    padding-top: 2.5rem !important;
  }
  .svc__addons-disc .addon:not(.addon--featured) {
    padding-top: 0.85rem !important;
  }
  /* 2026-06-17: centre the checkbox on the title's first line. Featured cards
     keep the ribbon reserve so their title sits ~40px down (checkbox 2.4rem);
     non-featured cards have the title near the top (checkbox 0.85rem). */
  .svc__addons-disc .addon--featured .addon__check { top: 2.4rem !important; }
  .svc__addons-disc .addon:not(.addon--featured) .addon__check { top: 0.85rem !important; }
  /* 2026-06-17: stop add-on cards getting clipped on the right. A non-wrapping
     price line (e.g. "£115 /video (one-off) (RRP £195, 12 mo)") set the card's
     min-content above the grid width, so the card overflowed its disc (overflow
     hidden) and the right edge was cut off. Let the card shrink, the price line
     wrap, and the capacity video scale down. */
  .svc__addons-disc .addon { min-width: 0 !important; }
  .svc__addons-disc .addon__price-row { flex-wrap: wrap !important; }
  .svc__addons-disc .addon__capacity-track .capacity-video { max-width: 100% !important; }
  /* 2026-06-17: recurring add-ons — the "Recurring / Save 10%" toggle pill was
     crammed into the title row on mobile, squashing the name to a sliver (4
     wrapped lines). Wrap it onto its own line below the full-width title:
     name/header at the top, toggle below. Scoped to cards that have the toggle. */
  .svc__addons-disc .addon__title-row:has(.addon__rec-toggle) { flex-wrap: wrap; }
  .svc__addons-disc .addon__title-row:has(.addon__rec-toggle) .addon__rec-toggle {
    order: 10;
    flex-basis: 100%;
    max-width: max-content;
    margin-top: 0.45rem;
  }
  /* 2026-06-17: same treatment for the "Available separately" standalone badge —
     drop it onto its own row just under the full-width title rather than crowding
     the name (it sits above the recurring toggle on cards that have both). */
  .svc__addons-disc .addon__title-row:has(.addon__standalone-badge) { flex-wrap: wrap; }
  .svc__addons-disc .addon__title-row .dis-tip-wrap:has(.addon__standalone-badge) {
    order: 9;
    flex-basis: 100%;
    max-width: max-content;
    margin-left: 0 !important;
    margin-top: 0.4rem;
  }
  .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 {
    /* 2026-06-05: was 8px (legacy slim bar) which made the gradient capsule
       invisible on phones. Keep the desktop 26px pill; full width of the
       stacked column. */
    height: 26px !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;
  position: relative;
  isolation: isolate;
  background: #fff;
  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);
  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 {
  /* 2026-06-10 (Nicole): reads "STEP N" rather than a bare faint digit so the
     counting is unmissable. */
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #6b7280;
  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;
  /* 2026-06-15 (Alexander): grey base so upcoming steps read as connected,
     the --complete rule paints the blue progress on top. */
  background: rgba(107, 114, 128, 0.30);
  border: none;
  box-shadow: none;
}
.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-06-03: un-stuck per Alexander — the nav now flows at the END of the
     page content so users scroll through the full service offering before
     reaching Back / Next. (Reverses the 2026-05-30 "re-stuck per Nicole"
     decision, Loom 4 #54.) Frosted background / border removed since the bar
     no longer floats over content. */
  position: static;
  margin-top: 2rem;
  padding: 0.6rem 0;
}
.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-orange-deep, #C77800);
  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: #B85E0A; }
.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(199, 120, 0, 0.30);
  background: rgba(199, 120, 0, 0.07);
}
.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: var(--gg-orange-deep, #C77800);
  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);
}
/* 2026-06-12 (review): compact waiting-list badge beside the plan name, the
   same amber pill at the service-header pill's scale. */
.tier__waitlist-pill--sm {
  font-size: 11px;
  padding: 2px 9px 2px 7px;
  gap: 5px;
  vertical-align: middle;
}
.tier__waitlist-pill--sm .tier__waitlist-dot { width: 6px; height: 6px; }
.tier__waitlist-pill-wrap--name { display: inline-flex; align-items: center; flex-shrink: 0; }

/* 2026-06-11 (Loom 38 item 5, reviewed): Bespoke Pricing as plain bold blue
   text, the same voice as the prices on the other plans. Pinned explicitly,
   .tier--ent .tier__price in legacy app.css would otherwise tint it orange at
   1.2rem (the Grow-tint lesson, never inherit tier price colours). */
.tier__bespoke-text {
  display: inline-block;
  color: var(--gg-blue, #002ABF);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.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 ───────────────────────────────────────────────── */
/* 2026-06-18: on featured (badged) add-ons, the Available separately badge renders at
   card level, top-right, on the popular ribbon's line (the title sits below the reserve). */
.addon__standalone-badge-top {
  position: absolute;
  top: 12px;
  /* 2026-06-29: align the badge with the inline 'Available separately' badge on
     non-featured cards (~58px from the card edge, to the left of the checkbox)
     instead of jamming it into the corner over the checkbox. */
  right: 58px;
  z-index: 3;
}
.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.4rem !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 {
  /* 2026-06-08 (Loom 29 16:15): prominent pill matching the Edit service selection button (was a faint grey text link). */
  background: #ffffff;
  border: 1px solid color-mix(in srgb, var(--gg-blue, #002ABF) 18%, transparent);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gg-blue, #002ABF);
  opacity: 1;
  padding: 0.35rem 0.75rem;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.start-fresh-link:hover,
.start-fresh-link:focus-visible {
  background: color-mix(in srgb, var(--gg-blue, #002ABF) 5%, white);
  border-color: var(--gg-blue, #002ABF);
  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 {
  /* 2026-06-08 (Loom 29): match the .qualifier-q boxes exactly - transparent
     surface + the glass-frame WebP bevel (provided by the .glass-frame class). */
  position: relative;
  background: rgba(255, 255, 255, 0.20);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 0;
  border-radius: 18px;
  padding: 1.25rem;
  margin-bottom: 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);
}
.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);
}
/* 2026-06-02: Industry <select> — match the glassy text-input style (was flat native). */
select.q0-field__input {
  font-family: inherit;
  color: #111827;
  padding: 0.7rem 2.25rem 0.7rem 1rem;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7388' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") right 0.85rem center / 12px no-repeat,
    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);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.18s ease, background 0.15s ease;
}
select.q0-field__input:hover { border-color: rgba(0, 0, 0, 0.20); }
select.q0-field__input:focus {
  border-color: var(--gg-blue, #002ABF);
  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);
}
@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: #4b5563;
  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;
}
/* 2026-06-04 (Loom 26 2:53): the white-label margin box is the headline figure,
   so give it the Grow-card treatment: amber surface + orange ring + glass frame. */
.svc-margin--gold {
  background: linear-gradient(180deg, #FFF4E4 0%, #FFFDFA 78%);
  box-shadow: 0 0 0 1.5px rgba(252, 157, 43, 0.55), 0 10px 26px -12px rgba(199, 120, 0, 0.35);
}
.svc-margin--gold .svc-margin__head-icon { color: var(--gg-orange-deep, #C77800); }
/* 2026-06-04 (Loom 26): VAT-registration toggle inside the margin box. */
.svc-margin__vat { margin: 0.15rem 0 0.7rem; display: flex; flex-direction: column; gap: 0.5rem; }
.svc-margin__vat-row { display: inline-flex; align-items: center; gap: 0.3rem; }
.svc-margin__vat-toggle { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; font-weight: 600; color: var(--gg-ink, #0F1C35); cursor: pointer; }
.svc-margin__vat-toggle { position: relative; }
/* 2026-06-04: native checkbox visually hidden; the styled box below matches the
   tier-card checkbox (.tier--recommended .tier__radio.is-on, orange neumorphic). */
.svc-margin__vat-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.svc-margin__vat-box {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid #E2E2E2;
  background: #fff;
  display: grid;
  place-items: 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;
}
.svc-margin__vat-toggle:hover .svc-margin__vat-box:not(.is-on) { border-color: var(--gg-orange, #FC9D2B); }
.svc-margin__vat-toggle input:focus-visible ~ .svc-margin__vat-box { outline: 2px solid var(--gg-orange-deep, #C77800); outline-offset: 2px; }
.svc-margin__vat-box.is-on {
  background: linear-gradient(109deg, var(--gg-orange, #B85E0A) 0%, var(--gg-orange-deep, #8C4400) 100%);
  border-color: transparent;
  color: #FFFFFF;
  transform: scale(1.05);
  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;
}
/* 2026-06-12 (Loom 45): .svc-margin__vat-note retired, the checkbox tooltips
   carry the VAT story and the amber box only added vertical space. */

/* Header row: icon + title + hint */
.svc-margin__head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.95rem;
}
/* 2026-06-05: "Price breakdown" pill in the calculator head (top right) -
   mirrors the sidebar's See-full-breakdown button; opens the bdwn-modal. */
.svc-margin__bd-btn {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.85rem;
  background: #ffffff;
  border: 1.5px solid rgba(0, 42, 191, 0.30);
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gg-blue, #002abf);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  letter-spacing: 0.005em;
}
.svc-margin__bd-btn:hover { background: rgba(0, 42, 191, 0.04); border-color: rgba(0, 42, 191, 0.50); }
.svc-margin__bd-btn-arrow { font-size: 1.05rem; line-height: 1; }
/* Keep the est-cost badge and the new pill from fighting for the right edge. */
.svc-margin__cpm-badge { margin-left: auto; }
.svc-margin__cpm-badge ~ .svc-margin__bd-btn { margin-left: 0; }
.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; flex: 1 1 auto; }
.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;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

/* 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 {
  /* 2026-06-08 (Loom 29 09:51): row-wrap so the number and its /month unit (and the
     result number and its margin pill) sit on the same line. Label and RRP notes are
     forced full-width so they stay above / below. */
  display: flex;
  flex-flow: row wrap;
  align-items: baseline;
  justify-content: flex-start;
  column-gap: 0.35rem;
  row-gap: 0.15rem;
  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;
}
.svc-margin__cell > .svc-margin__cell-lbl,
.svc-margin__cell > .svc-margin__cell-rrp { flex: 0 0 100%; }
/* Retail input cell: brand-blue outline so it reads as the interactive field */
.svc-margin__cell--retail,
.svc-margin__cell--meetings {
  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 .svc-margin__cell-input,
.svc-margin__cell--meetings .svc-margin__cell-input {
  /* 2026-06-08 (Loom 29): grow the entry box to fill the cell (flex-basis 0 so it shares the line with the unit instead of pushing it below). */
  flex: 1 1 0;
  min-width: 0;
}
.svc-margin__cell--retail .svc-margin__cell-unit { flex: 0 0 auto; }
.svc-margin__cell--retail:focus-within,
.svc-margin__cell--meetings: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);
}
/* 2026-06-23 (Loom 56 0:51): 2x is the popular markup (a clean 50% margin), so it
   wears the brand recommended orange to stand out from the neutral multipliers. */
.svc-margin__quick-btn--pop {
  color: #b45309;
  background: rgba(245, 158, 11, 0.13);
  border-color: rgba(245, 158, 11, 0.55);
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.18);
}
.svc-margin__quick-btn--pop:hover {
  color: #92400e;
  background: rgba(245, 158, 11, 0.22);
  border-color: rgba(245, 158, 11, 0.80);
}

.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 {
  /* 2026-06-04 (QA): the inner list scrolls while the accountability tracker and
     the monthly total stay pinned. .summary__scroll is now a flex column that
     fills the frame and does not scroll itself; .summary__list is the scroller. */
  max-height: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* 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. */
/* 2026-06-04 (QA): line items + Applied Savings scroll inside the frame; the
   accountability tracker and the totals stay pinned below and always visible. */
.summary__scroll > .summary__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.summary__scroll > .summary__applied-savings,
.summary__scroll > .ms-stack,
.summary__scroll > .summary__total {
  flex: 0 0 auto;
}
/* 2026-06-04 (QA): Applied Savings is a standalone pinned box (moved out of the
   scrolling list) so it is never hidden when many items are selected. Equal
   spacing above and below: neutralise the list's bottom margin and the tracker's
   top margin so the gap is purely Applied Savings' own equal top/bottom margins. */
.summary__scroll > .summary__list { margin-bottom: 0; }
.summary__scroll > .summary__applied-savings { margin: 0.85rem 0; }
.summary__scroll > .ms-stack {
  margin-top: 0;
  /* soft shadow so the pinned footer reads as sitting above a scrolling list */
  box-shadow: 0 -10px 12px -10px rgba(15, 23, 42, 0.12);
}

.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: var(--gg-orange-deep, #C77800);
}
.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 48px;
  min-width: 48px;
}
.summary__plan--inline .summary__plan-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 4px;
}

/* ──────────────────────────────────────────────────────────────────
   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; }
}

/* Batch 3 (Loom): post-call Step 0 leads with the qualifier directly under the
   client-type cards. The base .build-section--qualifier zeroes its top margin
   (it sits under a section-head on the final step), so restore breathing room
   when it is used on Step 0. */
.build-section--qualifier.qualifier-step0 { margin-top: 2.5rem; }
@media (max-width: 760px) {
  .build-section--qualifier.qualifier-step0 { margin-top: 1.75rem; }
}


/* 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 {
  /* 2026-06-24: tightened 13px -> 5px to reduce the gap under the MINIMUM
     COMMITMENT eyebrow. Verified the POPULAR badge still clears the label. */
  margin-top: 5px;
  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;
}
/* 2026-06-23 (Loom 56 0:51): Most popular badge half-out on the 6-month pill,
   the same glassy badge used on the dedicated-resources role cards. The corner
   bar keeps ~5px headroom above so the badge still clears the eyebrow. */
/* 2026-06-25: subtle orange tint on the popular (6-month) pill when unselected,
   echoing the .tier--recommended Grow card. The --popular modifier marks the
   6-month pill (the POPULAR badge has been removed); active (.is-on) stays blue. */
.svc__commit-bar--corner .svc__commit-bar-btn--popular:not(.is-on) {
  background: linear-gradient(180deg, #FFFCF7 0%, #FFF4E3 100%);
  border-color: rgba(252, 157, 43, 0.28);
}
/* 2026-06-25: POPULAR badge restored, half-out at the top-centre of the 6-month pill. */
.svc__commit-bar-btn .svc__commit-pop-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  height: 16px;
  width: auto;
  pointer-events: none;
  display: block;
  z-index: 4;
  filter: drop-shadow(0 1px 2px rgba(60, 40, 10, 0.18));
}
.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;
  }
}

/* 2026-06-30: make the per-service commitment toggle more vertically compact on
   mobile. The <=720px block above stacks each pill's label over its save chip
   (flex-direction:column), which made the bar ~55px per pill. Lay the label + chip
   back onto ONE row (as on desktop) and tighten the padding, cutting the block
   height ~25%. The 3-equal-column grid is kept so nothing wraps; at <=480px the
   pill padding / save-chip size are trimmed further so the -20%/-40% chips still
   fit without clipping down to a 320px viewport. Scoped to mobile only; desktop
   is already a single row and is untouched. */
@media (max-width: 720px) {
  .svc__commit-bar--corner .svc__commit-bar-btn {
    flex-direction: row !important;
    gap: 0.25rem !important;
    padding: 0.3rem 0.4rem !important;
  }
  .svc__commit-bar--corner { margin-top: 0.35rem !important; }
}
@media (max-width: 480px) {
  .svc__commit-bar--corner .svc__commit-bar-btn { padding: 0.3rem 0.28rem !important; gap: 0.18rem !important; }
  .svc__commit-bar--corner .svc__commit-bar-save { padding: 0.14rem 0.3rem !important; font-size: 0.56rem !important; }
  .svc__commit-bar--corner .svc__commit-bar-text { font-size: 0.7rem !important; }
}

/* ── 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. */
/* 2026-06-18 (Loom): base tier prices in amber too, so all pricing reads in one
   colour next to the amber RRP. NOTE: the real element is .tier__price (no
   sub-spans in this build) and the recommended-tier #C77800 override lives in
   the Sprint 5 token block further down, so the working rule is appended at the
   end of this file (Batch 29) to win source order. */
.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 {
  /* 2026-06-25: default (12-month) save chip is a LIGHT blue pill with blue text
     + soft blue border (mirrors the .agency-intent-card__discount badge). Orange
     is reserved for the popular 6-month pill via the --popular rule. */
  background: linear-gradient(135deg, rgba(0, 42, 191, 0.12) 0%, rgba(0, 42, 191, 0.07) 100%) !important;
  color: var(--gg-blue, #002ABF) !important;
  border: 1px solid rgba(0, 42, 191, 0.30) !important;
}
.svc__commit-bar--corner .svc__commit-bar-btn--popular:not(.is-on) .svc__commit-bar-save {
  background: var(--gg-orange, #FC9D2B) !important;
  color: #FFFFFF !important;
  border: 1px solid transparent !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;
  border: 1px solid transparent !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;
}


/* 2026-06-02: vertical gap to the glass frame only; gradient runs full width (no side gaps). */
.addon__capacity-track {
  padding: 6px 0 !important;
}
/* 2026-06-05: mobile keeps the same 6px vertical inset as desktop now that
   the track is back to the full 26px capsule (the 2px override belonged to
   the retired 8px slim bar). */
.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;
  }
  /* 2026-06-17: the .svc__commit-wrap (eyebrow + pills) was added between
     head-right and the bar; head-right is justify-content:flex-end, so the wrap
     sat at content width (~206px) crammed to the right, with its -0.85rem margin
     pulling it over the card top. Make the wrap fill the row, cancel the pull-up,
     and let the three pills share the width evenly. */
  .svc__head-right .svc__commit-wrap {
    width: 100% !important;
    margin-top: 0 !important;
    align-items: stretch !important;
  }
  .svc__head-right .svc__commit-wrap .svc__commit-bar--corner { width: 100%; }
  .svc__head-right .svc__commit-wrap .svc__commit-bar--corner .svc__commit-bar-btn { flex: 1 1 0; min-width: 0; }
  /* 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.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gg-blue, #002ABF);
  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__line-was { text-decoration: line-through; color: var(--gg-muted, #9ca3af); font-size: 0.8em; font-weight: 400; margin-right: 0.35rem; }
/* 2026-06-04 (QA#7): waiting-list section in the breakdown modal */
.bdwn-modal__line-val--waitlist { color: var(--gg-blue, #002ABF); font-weight: 700; }
.bdwn-modal__waitlist-note { margin-top: 0.4rem; font-size: 0.82rem; line-height: 1.45; color: #6b7388; }
.bdwn-modal__total-note { margin-top: 0.35rem; font-size: 0.8rem; line-height: 1.45; color: #6b7388; font-style: italic; }
.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; }
/* 2026-06-04 (Loom 23): VAT rows in the breakdown modal */
.bdwn-modal__vat-row { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.86rem; color: #6b7388; padding: 0.2rem 0; }
.bdwn-modal__vat-row--incl { font-weight: 700; color: #1a1f2e; border-top: 1px solid rgba(15, 28, 53, 0.06); margin-top: 0.1rem; padding-top: 0.3rem; }
/* 2026-06-04 (Loom 23): info icon inside the +X% margin pill */
.svc-margin__pct-tip-wrap { display: inline-flex; align-items: center; margin-left: 4px; vertical-align: middle; cursor: help; }
.svc-margin__pct-info { color: var(--gg-muted, #6b7280); }
/* 2026-06-04 (Loom 23): section heading inside the margin calculator */
.svc-margin__section-head { display: flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gg-heading, #0F1C35); margin: 0 0 0.55rem; }
/* 2026-06-04 (Loom 23 2:25): cost per meeting + revenue-share note in margin box */
.svc-margin__cpm { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px dashed rgba(120, 113, 108, 0.35); font-size: 0.82rem; }
.svc-margin__cpm-lbl { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--gg-body, #2C3142); }
.svc-margin__cpm-val { font-weight: 700; color: var(--gg-orange-deep, #C77800); white-space: nowrap; }
.svc-margin__cpm-badge { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 1px; flex: 0 0 auto; }
.svc-margin__cpm-badge-lbl { font-size: 0.56rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gg-muted, #6b7280); }
.svc-margin__cpm-badge-val { display: inline-flex; align-items: center; gap: 4px; font-size: 0.95rem; font-weight: 800; color: var(--gg-heading, #0F1C35); white-space: nowrap; }
.svc-margin__cpm-badge-tip { display: inline-flex; align-items: center; color: var(--gg-muted, #6b7280); cursor: help; }
.svc-margin__note { margin-top: 0.6rem; padding-top: 0.55rem; border-top: 1px solid var(--gg-hairline, rgba(15,28,53,0.08)); font-size: 0.74rem; line-height: 1.4; color: var(--gg-muted, #6b7280); }
/* 2026-06-04 (Loom 23 2:36): per-item wholesale vs our price rows in margin box */
.svc-margin__items { margin-top: 0.6rem; background: rgba(0, 42, 191, 0.035); border: 1px solid rgba(15, 28, 53, 0.10); border-radius: 8px; padding: 9px 11px; display: flex; flex-direction: column; gap: 4px; }
.svc-margin__items-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 0.78rem; }
.svc-margin__items-row--head { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gg-muted, #6b7280); }
.svc-margin__items-name { color: var(--gg-body, #2C3142); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-margin__items-vals { display: inline-flex; gap: 14px; flex: 0 0 auto; }
.svc-margin__items-vals > span { min-width: 60px; text-align: right; }
.svc-margin__items-whole { font-weight: 700; color: var(--gg-blue, #002ABF); }
.svc-margin__items-rrp { font-weight: 400; color: var(--gg-muted, #6b7280); }
.svc-margin__items-toggle { justify-content: space-between; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.svc-margin__items-toggle:hover .svc-margin__items-head-text { color: var(--gg-blue, #002ABF); }
.svc-margin__items-head-text { display: inline-flex; align-items: center; gap: 0.3rem; }
.svc-margin__items-chev { color: var(--gg-blue, #002ABF); font-size: 0.95rem; line-height: 1; }
.svc-margin__items-list { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.svc-margin__oneoff { margin-top: 0.7rem; padding-top: 0.6rem; padding-bottom: 0.5rem; border-top: 1px solid var(--gg-hairline, rgba(15,28,53,0.12)); }
.svc-margin__section-head--oneoff { margin-bottom: 0.4rem; }
.svc-margin__oneoff-summary { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.85rem; }
.svc-margin__oneoff-lbl { color: var(--gg-body, #2C3142); }
.svc-margin__oneoff-val { font-weight: 700; color: var(--gg-blue, #002ABF); }
.svc-margin__oneoff-keep { margin-top: 2px; font-size: 0.78rem; color: #1E9E5C; font-weight: 600; }
.svc-margin__oneoff-keep--loss { color: #dc2626; }
.svc-margin__oneoff-input { display: inline-flex; align-items: center; gap: 2px; }
.svc-margin__oneoff-input input { width: 92px; text-align: right; border: 1px solid rgba(15,28,53,0.2); border-radius: 6px; padding: 2px 6px; font-size: 0.85rem; font-weight: 700; color: var(--gg-heading, #0F1C35); background: #fff; }
.svc-margin__oneoff-summary { margin-top: 2px; }
.svc-margin__items-head { display: flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gg-heading, #0F1C35); margin: 0; }
.svc-margin__section-info-wrap { display: inline-flex; align-items: center; cursor: help; color: var(--gg-muted, #6b7280); }
.tier__rrp { font-size: 0.7rem; color: var(--gg-muted, #6b7280); margin-top: 6px; line-height: 1.2; }
.bdwn-modal__discount { color: #6b7388; font-weight: 600; }
/* 2026-06-02: Discounts block — grey labels, orange numbers (right value). */
.bdwn-modal__discount > span:last-child { color: var(--gg-orange-deep, #C77800); font-weight: 700; }
.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;
}
/* 2026-06-02: white-label margin block + baked-in savings in the breakdown modal */
.bdwn-modal__line-val--profit { color: #1E9E5C; }
.bdwn-modal__profit {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1E9E5C;
  padding: 0.4rem 0;
  margin-top: 0.25rem;
  border-top: 1px solid rgba(30, 158, 92, 0.28);
}
.bdwn-modal__profit--setup {
  font-size: 0.86rem;
  font-weight: 600;
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
.bdwn-modal__discount--baked { color: #6b7388; font-weight: 600; }
.bdwn-modal__summary-row--profit > span:last-child { color: #1E9E5C; }
.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). */
/* 2026-06-12 (review): the headline summary card takes the sidebar total
   box's warm cream and a glass bevel so it reads as the modal's anchor. */
.bdwn-modal__summary {
  margin-top: 0.65rem;
  background: linear-gradient(168deg, #F8FAFF 0%, #E8EEFF 100%);
  border: 1px solid rgba(0, 42, 191, 0.16);
  border-radius: 14px;
  padding: 1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  box-shadow:
    rgba(255, 255, 255, 0.9) 0 1px 0 0 inset,
    rgba(120, 90, 40, 0.20) 0 12px 28px -14px;
}
.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;
  /* 2026-06-08: one feature chip per line. Two short ticks sharing a row
     looked unbalanced on cards with only 2-3 features, so chips now stack
     vertically with each pill hugging its own content (align-items
     flex-start keeps them left-aligned and tight to the text, not
     stretched to the full column width). */
  flex-direction: column;
  align-items: flex-start;
  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.28rem;
  padding: 0.28rem 0.55rem;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.3;
  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: normal;
}
.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; }
/* 2026-06-02: thin glass frame overlay on the onboarding availability pill.
   Sits ABOVE the gradient video (z-index 3) so the bevel is visible; the
   track's overflow:hidden clips the frame to the pill curve. Size unchanged. */
.addon__capacity-track > .addon__capacity-frame {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
}

/* ── 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; }
}

/* 2026-06-02: White-label margin success accent = brand green (#1E9E5C).
   Applies to ALL margin calculators (tier + add-on). Loss/error stays red. */
.svc-margin__head-icon {
  background: rgba(30, 158, 92, 0.12) !important;
  color: #1E9E5C !important;
  border-color: rgba(30, 158, 92, 0.32) !important;
}
.svc-margin--loss .svc-margin__head-icon {
  background: rgba(220, 38, 38, 0.10) !important;
  color: #dc2626 !important;
  border-color: rgba(220, 38, 38, 0.25) !important;
}
.svc-margin--good .svc-margin__cell--result .svc-margin__cell-num {
  color: #1E9E5C !important;
}
.svc-margin__pct--good {
  background: rgba(30, 158, 92, 0.12) !important;
  color: #1E9E5C !important;
  border-color: rgba(30, 158, 92, 0.30) !important;
}
.svc-margin__pct--loss {
  background: rgba(220, 38, 38, 0.10) !important;
  color: #dc2626 !important;
  border-color: rgba(220, 38, 38, 0.22) !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: #374151; background: rgba(55, 65, 81, 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: rgba(15, 28, 53, 0.75);
  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;
}
/* 2026-06-18 (Loom 48): per-channel margin calculators span the full width below
   the channels + onboarding-availability row, mirroring .pa-spend, with a dashed
   divider. Boxes use the glassmorphism frame rather than the flat white svc-margin. */
.channels-panel > .channels-panel__chan-margins {
  grid-column: 1 / -1;
  margin-top: 0.4rem;
  padding-top: 0.95rem;
  border-top: 1px dashed rgba(184, 94, 10, 0.2);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.chan-margin-box {
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F8FB 100%);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 14px;
  padding: 0.85rem 1rem;
}
.chan-margin-box .svc-margin--flat {
  background: transparent;
  border: 0;
  box-shadow: none;
  margin: 0;
  padding: 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;
}

/* Bug fix: the checkout form is a .convert-card, so it inherited the card
   hover-lift (translateY -2px) and :active snap. Inside the plan-summary-card
   it is a form surface, not a clickable card, so that lift made the whole form
   shift up and down every time a field or button was clicked. Disable it. */
.plan-summary-card .convert-card,
.plan-summary-card .convert-card:hover,
.plan-summary-card .convert-card:active {
  transform: 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; }

/* 2026-06-18 (Nicole): custom/bespoke quotes can't be paid up-front. This is a
   SOFT nudge matching the buying-signal add-on's .ps-group__nudge-hint (small
   icon + deep-orange text, no wash/border/box) - NOT a waitlist-style badge. */
.call-pref__custom-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 0.7rem;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--gg-orange-deep, #C77800);
}
.call-pref__custom-note svg { flex: 0 0 auto; margin-top: 2px; }
.call-pref__custom-note strong { font-weight: 800; color: var(--gg-orange-deep, #C77800); }

/* 2026-06-18 (Nicole, Batch 4): waitlist-only quote -> single Reserve-my-spot
   card. Amber waiting-list treatment (reuses the tier-waitlist pulse/ring). */
.call-pref__reserve {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(184, 94, 10, 0.12), rgba(184, 94, 10, 0.05));
  border: 1px solid rgba(184, 94, 10, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.call-pref__reserve-dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  background: #B85E0A;
  position: relative;
  animation: tier-waitlist-pulse 1.6s ease-in-out infinite;
}
.call-pref__reserve-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;
}
.call-pref__reserve-title { font-weight: 800; font-size: 0.92rem; color: #8a4708; margin-bottom: 0.2rem; }
.call-pref__reserve-body { font-size: 0.83rem; line-height: 1.5; color: #6b3f0a; }
.call-pref__reserve-upfront { font-size: 0.83rem; line-height: 1.5; color: #6b3f0a; font-weight: 700; margin-top: 0.45rem; }

/* §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);
}

/* 2026-06-05: anchor variant of the compare pill ("See full pricing" in the
   tier-comparison modal) must not inherit default link underline. High
   specificity so it beats any generic .cmp-modal a rule. */
.cmp-modal a.svc__title-cmp-btn,
a.svc__title-cmp-btn { text-decoration: none; }
.cmp-modal a.svc__title-cmp-btn:hover,
.cmp-modal a.svc__title-cmp-btn:focus-visible,
a.svc__title-cmp-btn:hover,
a.svc__title-cmp-btn:focus-visible { text-decoration: none; }
@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);
}

/* 2026-06-30: thin glass frame on compare-dialog cards (mirrors .thin-glass-frame,
   14px slices). CSS-only so it covers every service's compare dialog. */
.cmp-card::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;
}
.cmp-card > * { position: relative; z-index: 2; }

.cmp-card--rec {
  /* 2026-06-29: recommended card uses the orange RECOMMENDED treatment (mirrors
     the .tier--recommended service-page cards) instead of the blue highlight. */
  border-color: rgba(252, 157, 43, 0.55);
  box-shadow: 0 0 0 1px rgba(252, 157, 43, 0.40), 0 1px 2px rgba(15, 28, 53, 0.04), 0 6px 18px -12px rgba(252, 157, 43, 0.28);
  background: linear-gradient(168deg, #FFFCF6 0%, #FFF7EA 100%);
}
.cmp-card--rec .cmp-card__tier-price { color: #B85E0A; }
.cmp-card--rec .cmp-card__tier-sub { color: rgba(184, 94, 10, 0.6); }
.cmp-card--rec .cmp-card__row--yes .cmp-card__mark { color: #B85E0A; }
.cmp-card__rec-pill {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.18rem 0.7rem;
  background: linear-gradient(180deg, #FFB020 0%, #E8852B 100%);
  color: #fff;
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(184, 94, 10, 0.35);
}
.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.4rem; /* 2026-06-10: standard icon gap (setup-fees reference) */
}
/* 2026-06-10: the tip wrap was an unstyled inline span, which let the icon
   sit on the text baseline, slightly below the heading's centre line. */
.lead-vol__title-info-wrap { display: inline-flex; align-items: center; }
/* 2026-06-10: the global info-tip-icon margin doubled the title flex gap (12.8px); zeroed here so the badge-to-icon gap is the 0.4rem standard. */
.lead-vol__src-title .info-tip-icon { margin-left: 0; }
.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; }
/* 2026-06-12 (review): the leads figure matches the add-on price weight. */
.lead-vol__count {
  font-size: 1.15rem; font-weight: 900;
  letter-spacing: -0.01em;
  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.4rem; /* 2026-06-10: standard icon/badge gap */
  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 {
  /* 2026-06-08 (Loom 29): match the agency 40% discount pill - rounded with an orange border. */
  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);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.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 { position: relative; margin: 2rem 0 0.85rem 0; }
/* 2026-06-02: value bubble that tracks the slider thumb so the exact lead count
   is visible while dragging (thumb is 20px, so correct the centre at the ends). */
.lead-vol__slider-bubble {
  position: absolute;
  top: -1.65rem;
  transform: translateX(-50%);
  background: var(--gg-blue, #002ABF);
  color: #fff;
  font-size: 0.74rem; font-weight: 700;
  padding: 2px 8px; border-radius: 6px;
  white-space: nowrap; pointer-events: none;
  box-shadow: 0 2px 6px rgba(15, 28, 53, 0.22);
  transition: none;
  z-index: 3;
}
.lead-vol__slider-bubble::after {
  content: ''; position: absolute; left: 50%; top: 100%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--gg-blue, #002ABF);
}
.lead-vol__slider {
  width: 100%;
  height: 6px;
  appearance: none; -webkit-appearance: none;
  /* 2026-06-02: thumb-width-aware fill. The 20px thumb is centred on the
     value, so its centre sits at 10px + (track - 20px) * --fill-frac. The
     blue fill ends exactly there, so it never overshoots the thumb at high
     values (the old "+10px on a full-width %" overshot by up to ~20px). */
  background: linear-gradient(to right,
    var(--gg-blue, #002ABF) 0%,
    var(--gg-blue, #002ABF) calc(10px + (100% - 20px) * var(--fill-frac, 0)),
    color-mix(in srgb, var(--gg-blue, #002ABF) 18%, transparent) calc(10px + (100% - 20px) * var(--fill-frac, 0)),
    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(10px + (100% - 20px) * var(--fill-frac, 0)),
    color-mix(in srgb, var(--gg-blue, #002ABF) 18%, transparent) calc(10px + (100% - 20px) * var(--fill-frac, 0)),
    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 {
  position: relative;
  margin: 0.55rem 0 0.45rem;
  padding: 1rem 1rem 1.1rem;
  border-radius: 14px;
  background: linear-gradient(180deg, #FBF8F4 0%, #F5EFE7 100%);
  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;
}
/* 2026-06-04 (QA): match the accountability box's glass-frame bevel so Applied
   Savings reads as the same glass panel (mirrors .ms-stack::before). */
.summary__applied-savings::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;
  filter: sepia(15%) hue-rotate(-6deg) saturate(0.9);
  z-index: 0;
}
.summary__applied-savings > * { position: relative; z-index: 1; }
.summary__applied-savings-head {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gg-blue, #002ABF);
  margin-bottom: 0.35rem;
  opacity: 0.85;
}
.summary__applied-savings-info-wrap { display: inline-flex; align-items: center; }
.summary__applied-savings-info {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  color: var(--gg-muted, #6b7280);
  opacity: 0.6;
  cursor: help;
}
.summary__applied-savings-info:hover { opacity: 1; }
.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);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
/* 2026-06-02: outlined brand-blue icons on Applied Savings rows */
.applied-saving-icon { color: var(--gg-orange-deep, #C77800); flex: 0 0 auto; }

/* 2026-06-02: discount code moved into the Applied Savings panel. */
.summary__promo--in-savings { margin: 0.55rem 0 0; padding: 0.55rem 0 0; border: 0; border-top: 1px solid rgba(15, 28, 53, 0.14); border-radius: 0; background: transparent; }
.summary__promo--in-savings.summary__promo--applied { border: 0; border-top: 1px solid rgba(15, 28, 53, 0.14); border-radius: 0; background: transparent; padding: 0.55rem 0 0; }
.summary__applied-saving--empty { font-size: 0.76rem; color: var(--gg-muted, #6b7280); padding: 0.1rem 0 0.2rem; line-height: 1.4; }
.bdwn-modal__baked-label { display: inline-flex; align-items: center; gap: 0.3rem; }
.summary__applied-saving-pct {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--gg-orange-deep, #C77800);
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
}
/* 2026-06-02: consolidated commitment discount line + hover tooltip */
.summary__applied-saving-label--tip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  cursor: help;
}
.summary__applied-saving-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.summary__applied-saving-info { font-size: 0.68rem; opacity: 0.55; flex: 0 0 auto; }
.bdwn-modal__baked-label--tip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  cursor: help;
}
.bdwn-modal__baked-info { font-size: 0.68rem; opacity: 0.55; }
.hover-portal-tip.applied-tip {
  transform: translate(-50%, calc(-100% - 10px));
  background: #ffffff;
  color: #4b5563;
  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: 240px;
  max-width: 90vw;
  text-align: left;
  white-space: normal;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.applied-tip__head { font-weight: 700; font-size: 0.72rem; opacity: 0.9; color: #6b7388; }
.applied-tip__row { font-size: 0.78rem; line-height: 1.4; color: #4b5563; }
.applied-tip__row strong { color: var(--gg-blue, #002ABF); font-weight: 700; }
/* 2026-06-04 (QA): the Applied Savings line tooltips (Commitment discount, Agency
   partner discount) were missing the downward caret every other tooltip has.
   Mirror the .dis-tip--above caret, pointing down to the i icon below the tip. */
.hover-portal-tip.applied-tip::before {
  content: '';
  position: absolute;
  top: 100%;
  left: calc(50% + var(--portal-tip-caret-shift, 0px));
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.08);
}
.hover-portal-tip.applied-tip::after {
  content: '';
  position: absolute;
  top: calc(100% - 1px);
  left: calc(50% + var(--portal-tip-caret-shift, 0px));
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #ffffff;
}

/* 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-orange-deep, #C77800);
  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;
}
/* 2026-06-23 (Loom 56): signal chips carry long names, so they get content-width
   columns (sized to the longest name, no 1fr stretch) with the name on one line. */
.ps-group__chips--wide {
  grid-template-columns: repeat(auto-fill, minmax(280px, max-content));
  justify-content: start;
}
.ps-group__chips--wide .ps-chip__name { white-space: nowrap; }
.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; }
  /* 2026-06-17: let grouped/nested add-on cards (VFX, Render Quality, Voice-Over,
     etc.) fill the width on phones. They sat ~254px inside the 347px section
     because three nested padded containers (svc + addons-disc + addons) each
     added side padding. Trim the framed add-ons container's horizontal padding
     so the cards and their option chips fill the space. Verified: +32px width,
     chips/bar fill, no horizontal scroll. */
  .svc__addons-disc { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
  .svc__addons-disc .svc__addons { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
}

/* 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 {
    display: flex;
    /* 2026-06-02: un-stick on mobile so the bar flows AFTER the summary card
       instead of a sticky bottom bar covering the pricing breakdown as it
       scrolls past. (Desktop keeps the sticky behaviour.) */
    position: static;
    margin-right: 0;
    border-top: none;
    margin-top: 1.5rem;
    padding-top: 0.25rem;
    gap: 0.6rem;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  /* 2026-06-02: the summary card must flow normally on mobile (not stick to the
     top) so the page is a clean top-to-bottom scroll and the static footer
     always sits cleanly below it. */
  .youreset__summary {
    position: static !important;
    max-height: none !important;
    top: auto !important;
  }
  .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. */
  /* 2026-06-02: match the BuildPage footer (.page__foot--steps) so the bar is a
     single row (Back / meta / spacer) instead of stacking into a tall block. */
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  position: sticky;
  bottom: 0;
  z-index: 60;
  margin-top: 2rem;
  /* 2026-06-02: confine the bar to the main content column (like the BuildPage
     footer in .calc__main) instead of spanning under the sidebar. Offset =
     youreset__grid sidebar (400px) + column gap (32px). Reset on mobile below. */
  margin-right: calc(400px + 32px);
  padding: 0.6rem 0;
  background: #FCFBFB; /* 2026-06-02: match warm page bg #EFEDE7 (was bluish) so the footer blends */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid rgba(15, 28, 53, 0.08);
}
.page__foot--sticky .page__foot-meta {
  text-align: center;
  font-size: 0.78rem;
  font-weight: 400;
  color: #9ca3af;
  letter-spacing: 0.01em;
}

/* 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 { color: var(--gg-muted, #6b7280); }

/* ── 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: #374151;
  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; }

/* 2026-06-02 (#15): Accountability discount header — "% off" centred, £ amount right.
   Reorders the header so the percentage sits between the label and the amount. */
.ms-stack__head-pct-num { flex: 0 0 auto; text-align: center; }
.ms-stack__head-amount { flex: 1 1 0; text-align: right; }

/* 2026-06-02: Accountability discount header — stacked layout.
   Row 1 = label (full width). Row 2 = "% off" left + amount right. Chevron right. */
.ms-stack__head-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.ms-stack__head-main .ms-stack__lbl { flex: 0 0 auto; }
.ms-stack__head-row2 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  margin-top: 0.1rem;
}
.ms-stack__head-row2 .ms-stack__head-pct-num { flex: 0 0 auto; text-align: left; }
.ms-stack__head-row2 .ms-stack__head-amount  { flex: 0 0 auto; text-align: right; }
/* 2026-06-02: Accountability discount header in brand blue (match other sidebar headers). */
.ms-stack__lbl { color: var(--gg-blue, #002ABF); }
.ms-stack__info { color: var(--gg-muted, #6b7280); opacity: 0.6; }
.ms-stack__info:hover { color: #374151; opacity: 1; }

/* 2026-06-02 (#13): Physical Mail — printed/handwritten selector + branded-paper toggle */
.addon__mail { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.addon__mail-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gg-muted, #6b7280); }
.addon__mail-opts { display: flex; gap: 8px; }
.addon__mail-opt { flex: 1 1 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; border: 1px solid rgba(0,0,0,0.12); border-radius: 8px; background: #fff; cursor: pointer; text-align: left; }
.addon__mail-opt--on { border-color: var(--gg-blue, #002ABF); box-shadow: inset 0 0 0 1px var(--gg-blue, #002ABF); }
.addon__mail-opt-name { font-size: 0.82rem; font-weight: 700; color: #111; }
.addon__mail-opt-price { font-size: 0.74rem; color: var(--gg-muted, #6b7280); }
.addon__mail-opt-info { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 0.4rem; color: var(--gg-muted, #6b7280); opacity: 0.55; cursor: help; }
.addon__mail-opt-info:hover { opacity: 1; }
.addon__mail-branded { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border: 0; background: transparent; cursor: default; font-size: 0.8rem; color: #111; text-align: left; }
.addon__mail-check { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.3); font-size: 11px; line-height: 1; color: #fff; padding: 0; background: #fff; cursor: pointer; flex: 0 0 auto; }
.addon__mail-branded--on .addon__mail-check { background: var(--gg-blue, #002ABF); border-color: var(--gg-blue, #002ABF); }

/* 2026-06-02 (#6 email tip): deliverability advisory under the lead-volume breakdown */
.lead-vol__recurring-note { font-size: 12px; line-height: 1.5; color: #6b7280; margin: 0.55rem 0 0; } /* retained: harmless if unused */
/* 2026-06-10 (Loom 33): line-item prices used the mono font (--gg-font-mono
   from the legacy app.css base) while the totals use Inter with tabular
   figures; unified on Inter + tabular-nums so the Services & Add-ons numbers
   match the rest of the sidebar. */
.summary__line-val { font-family: inherit; font-variant-numeric: tabular-nums; }
/* 2026-06-10 (Loom 33): interactive hover tips (clickable links inside). */
.hover-portal-tip.hover-portal-tip--interactive { pointer-events: auto !important; }
.hover-portal-tip.lead-vol__tip-wide { width: 340px; max-width: calc(100vw - 24px); }
/* 2026-06-10 (Loom 33 margin calc): tighter quick fill, inline you-keep units,
   smaller figures, unselectable included add-ons. */
.svc-margin__cell-unit--inline { display: inline; margin-left: 5px; font-weight: 600; } /* 2026-06-10: same size as the other cell units */
.svc-margin__quickcol-btns { display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px; }
.svc-margin__calc--hasquick .svc-margin__cell-num { font-size: 1.02rem; }
.svc-margin__cell--retail .svc-margin__cell-input input,
.svc-margin__cell--meetings .svc-margin__cell-input input { padding-top: 0.28rem; padding-bottom: 0.28rem; font-size: 0.95rem; color: #002ABF; }
/* Batch 22: wholesale cost in amber (not the CPM Our price), quick-fill selected rims, Meetings label one line */
.svc-margin__cell--cost .svc-margin__cell-num { color: #b45309; }
.svc-margin__cpm-section .svc-margin__cell--cost .svc-margin__cell-num { color: #002ABF; }
.svc-margin__quick-btn.is-selected { color: #002ABF; background: rgba(0, 42, 191, 0.08); border-color: #002ABF; box-shadow: 0 0 0 2px rgba(0, 42, 191, 0.30); }
.svc-margin__quick-btn--pop.is-selected { color: #92400e; background: rgba(245, 158, 11, 0.24); border-color: #b45309; box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.50); }
.svc-margin__cell--meetings .svc-margin__cell-lbl-text { white-space: nowrap; }
/* Batch 24: second hint sentence on its own line; recurring toggle info icon to the right */
.svc-margin__hint-extra { display: block; }
.df-billing-row { display: inline-flex; align-items: center; gap: 8px; }
.df-billing-row .df-loc-tip-wrap { order: 3; }
/* Loom 64: minimum-commitment line + Change button in the margin calculator head */
.svc-margin__title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* Loom 65: align the margin-calc title with the top of the head icon. The icon was vertically centred against the 2-line head, leaving the title above it; pin the icon to the top and drop the title row so the letter-tops meet the icon's highest point. Excludes the flat variant (24px icon). */
.svc-margin:not(.svc-margin--flat) .svc-margin__head-icon { align-self: flex-start; margin-top: 9px; }
.svc-margin:not(.svc-margin--flat) .svc-margin__title-row { margin-top: 7px; }
.svc-margin__commit { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; white-space: nowrap; }
.svc-margin__commit-label { display: inline-flex; align-items: center; gap: 4px; color: #6B6B6B; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.svc-margin__commit-info { width: 13px; height: 13px; color: #9ca3af; flex: 0 0 auto; }
/* Change button reuses the canonical .btn .btn--primary CTA (same as the blue "Next page" button); this only constrains size to the compact margin-calc head. */
.svc-margin__commit-change { padding: 5px 14px; font-size: 0.72rem; font-weight: 600; border-radius: 10px; letter-spacing: 0; text-transform: none; gap: 0; cursor: pointer; }
.svc-margin__cpm-section { margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px solid var(--gg-hairline, rgba(15,28,53,0.12)); }
/* 2026-06-12 (review): the count takes the add-on price weight, the suffix stays lighter. */
.lead-vol__count { font-weight: 900; }
.lead-vol__count-suffix { font-weight: 700; }
.addon--included { opacity: 0.6; cursor: default; }
.addon--included:hover { transform: none; box-shadow: none; }
.lead-vol__clb-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--gg-blue, #002abf); text-decoration: underline; cursor: pointer; }
.lead-vol__clb-link:hover { text-decoration: none; }
@keyframes ggAddonPulse { 0% { box-shadow: 0 0 0 0 rgba(0, 42, 191, 0.45); } 70% { box-shadow: 0 0 0 12px rgba(0, 42, 191, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 42, 191, 0); } }
.addon--locate-pulse { animation: ggAddonPulse 1.1s ease-out 2; border-radius: 14px; }
/* 2026-06-10 (Loom 32): sidebar section headings open the full breakdown. */
.summary__heading-link { cursor: pointer; transition: color 120ms ease, background-color 120ms ease; padding: 2px 6px; margin: -2px -6px; border-radius: 6px; }
.summary__heading-link:hover, .summary__heading-link:focus-visible { color: var(--gg-blue, #002abf); background: rgba(0, 42, 191, 0.06); }
/* Applied savings is already blue at 85% opacity, so a colour-only hover was
   invisible there. Hovering its link brightens the whole head to full
   strength, matching the page's muted-to-full hover convention. */
.summary__applied-savings-head:has(.summary__heading-link:hover),
.summary__applied-savings-head:has(.summary__heading-link:focus-visible) { opacity: 1; }
/* 2026-06-10 (Loom 32 5:04): commitment pill + dropdown in the full breakdown. */
.bd-commit-wrap { position: relative; display: inline-flex; align-items: center; margin-left: 0.4rem; }
.bd-commit-pill { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.08rem 0.5rem; border: 1px solid rgba(0, 42, 191, 0.35); border-radius: 999px; background: #fff; color: var(--gg-blue, #002abf); font: inherit; font-size: 0.72rem; font-weight: 700; line-height: 1.45; cursor: pointer; transition: background 120ms ease; }
.bd-commit-pill:hover { background: rgba(0, 42, 191, 0.06); }
.bd-commit-pill__chev { flex-shrink: 0; }
.bd-commit-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 138px; background: #fff; border: 1px solid rgba(15, 28, 53, 0.12); border-radius: 10px; box-shadow: 0 12px 28px -8px rgba(15, 28, 53, 0.28); padding: 4px; display: flex; flex-direction: column; }
.bd-commit-menu__opt { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.4rem 0.6rem; border: 0; background: none; font: inherit; font-size: 0.78rem; font-weight: 600; color: #1f2937; border-radius: 7px; cursor: pointer; text-align: left; }
.bd-commit-menu__opt:hover { background: rgba(0, 42, 191, 0.07); }
.bd-commit-menu__opt.is-on { background: rgba(0, 42, 191, 0.1); color: var(--gg-blue, #002abf); }
.bd-commit-menu__save { color: #1f8a55; font-weight: 700; font-size: 0.72rem; }
.lead-vol__recurring-note strong { font-weight: 700; color: #4b5563; }
.lead-vol__deliverability-note {
  margin: 10px 0 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);
}
/* 2026-06-02 (#26): full-width brand-notes field in the white-label Q0 grid */
.q0-field--full { grid-column: 1 / -1; }


/* 2026-06-02: minimum-order tooltip beside the per-unit hint (e.g. Premium Sourcing 63) */
.addon__qty-unit-hint { display: inline-flex; align-items: center; gap: 5px; }
.addon__qty-min-info-wrap { display: inline-flex; align-items: center; margin-left: 0.4rem; vertical-align: middle; }
.addon__qty-min-info {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; background: none; line-height: 0;
  color: var(--gg-muted, #6b7280); cursor: help; opacity: 0.6;
}
.addon__qty-min-info:hover, .addon__qty-min-info:focus-visible { opacity: 1; }

/* 2026-06-03: info tooltip at the end of the lead-volume hint (per-lead price includes cold calling) */
.lead-vol__hint-info-wrap { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 0.4rem; }
.lead-vol__hint-info { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; line-height: 0; color: var(--gg-muted, #6b7280); cursor: help; opacity: 0.6; }
.lead-vol__hint-info:hover, .lead-vol__hint-info:focus-visible { opacity: 1; }


/* ── 2026-06-05: White-label margin calculator - mobile head layout ──────
   Mirror the service-card header on small screens. The head was a single
   flex row, so the est-cost badge + Price-breakdown pill crushed the title
   into a one-word-per-line sliver. Now: row 1 = icon + title/hint (full
   width), row 2 = est-cost badge (left) + Price breakdown pill (right). */
@media (max-width: 640px) {
  .svc-margin__head { flex-wrap: wrap; align-items: center; row-gap: 0.7rem; }
  /* no-shrink 60% basis forces the badge/button to wrap to the next row */
  .svc-margin__head-text { flex: 1 0 60%; min-width: 0; }
  .svc-margin__cpm-badge { margin-left: 0; align-items: flex-start; text-align: left; }
  .svc-margin__bd-btn { margin-left: auto; }
  .svc-margin__cpm-badge ~ .svc-margin__bd-btn { margin-left: auto; }
}


/* ── 2026-06-05: Margin calculator pricing-model tabs ────────────────────
   Markup vs Revenue-share (60/40 partnership). v2: full-width OUTLINED
   segmented tabs - each tab takes an equal share of the row, the active one
   is a filled, outlined pill - so the tabbing is unmistakable. The strip
   stays semi-transparent so the calculator's gold tint shows through. */
.svc-margin__tabs {
  display: flex;
  gap: 6px;
  width: 100%;
  margin: 0 0 1rem;
  padding: 4px;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(184, 94, 10, 0.28);
  border-radius: 12px;
  box-sizing: border-box;
}
.svc-margin__tab {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  padding: 10px 12px;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 9px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gg-muted, #6b6b6b);
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: -0.005em;
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.svc-margin__tab::after { content: none; }
.svc-margin__tab:hover:not(.svc-margin__tab--on) {
  color: var(--gg-ink, #0F1C35);
  border-color: rgba(184, 94, 10, 0.25);
  background: rgba(255, 255, 255, 0.55);
}
.svc-margin__tab--on {
  background: #ffffff;
  border-color: var(--gg-orange-deep, #C77800);
  color: var(--gg-orange-deep, #C77800);
  font-weight: 700;
  box-shadow:
    0 1px 3px rgba(140, 90, 20, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.svc-margin__rs-note {
  margin-top: 0.8rem;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--gg-muted, #5a647d);
  background: rgba(252, 157, 43, 0.10);
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
}


/* ── 2026-06-05: metal-framed alert (white-label discount banner) ────────
   Original bronze metal finish (blue tint removed per Alexander). The
   border-radius matches the 18px frame corner slices (~13px curve, same
   10:14 radius-to-slice ratio the .addon frames use) so the banner's fill
   no longer pokes out past the painted corners. */
.alert--metal {
  position: relative;
  border-color: transparent;
  border-radius: 13px;
  overflow: hidden;
  /* Same warm-cream fill as the pricing sidebar (.summary), so the framed
     banner reads as part of the same metal-card family. */
  background: linear-gradient(168deg, #FEFCF7 0%, #F6EEDA 100%);
}


/* ── 2026-06-05: metal frame on the White-label margin calculators ───────
   Replicates the pricing sidebar's canonical frame (.summary::before/::after
   in app.css - 22px metal-frame slices + soft top shine) on every full
   margin calculator. Replaces the previous glass bevel; the compact
   per-add-on variant (.svc-margin--flat) is unchanged. */
.svc-margin--metal {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Replace the gold variant's orange ring/glow with the sidebar's neutral
     warm shadow so the framed card matches the metal family. */
  box-shadow:
    rgba(255, 255, 255, 0.9) 0 1px 0 0 inset,
    rgba(120, 90, 40, 0.08) 0 2px 6px 0,
    rgba(120, 90, 40, 0.32) 0 22px 50px -12px !important;
}
.svc-margin--metal::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    url('metal-frame/top-left.webp')     top left     / 22px 22px no-repeat,
    url('metal-frame/top-right.webp')    top right    / 22px 22px no-repeat,
    url('metal-frame/bottom-left.webp')  bottom left  / 22px 22px no-repeat,
    url('metal-frame/bottom-right.webp') bottom right / 22px 22px no-repeat,
    url('metal-frame/top.webp')    22px top    / calc(100% - 44px) 22px repeat-x,
    url('metal-frame/bottom.webp') 22px bottom / calc(100% - 44px) 22px repeat-x,
    url('metal-frame/left.webp')   left 22px   / 22px calc(100% - 44px) repeat-y,
    url('metal-frame/right.webp')  right 22px  / 22px calc(100% - 44px) repeat-y;
  z-index: 1;
}
.svc-margin--metal::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(110% 70% at 50% -15%, rgba(255,255,255,0.55), transparent 55%);
  z-index: 0;
}
.svc-margin--metal > * { position: relative; z-index: 2; }


/* ── 2026-06-06: breathing room on the service tier area ─────────────────
   (1) The floating RECOMMENDED ribbon sits 14px above the tier cards and was
   nearly touching the "Available tiers" label / wholesale note - give the
   grid headroom. (2) The price block's RRP line and the one-time setup-fee
   row were stacked too tight at the card bottom. */
.tiers { margin-top: 1.1rem; }
.tier__rrp { margin-top: 8px; }
.tier__setup-fee { margin-top: 0.55rem; }
.tier { padding-bottom: 1.2rem; }


/* ── 2026-06-06: compact per-add-on margin calculator ────────────────────
   The flat variant inside the add-ons list was ~280px tall; tighten the
   container padding, head, quick-fill row and cells to save vertical space.
   The full service-level calculator (non-flat) is untouched. */
.svc-margin--flat { padding: 12px 16px 10px !important; }
.svc-margin--flat .svc-margin__head { margin-bottom: 8px; }
.svc-margin--flat .svc-margin__head-icon { width: 24px; height: 24px; }
.svc-margin--flat .svc-margin__quick { margin-top: 5px; padding-top: 5px; }
.svc-margin--flat .svc-margin__section-head { margin-bottom: 5px; }
.svc-margin--flat .svc-margin__cell { padding: 8px 12px; }
.svc-margin--flat .svc-margin__cell-num { font-size: 1.05rem; }
.svc-margin--flat .svc-margin__cell-input input { padding-top: 7px; padding-bottom: 7px; }
.svc-margin--flat .svc-margin__cell-unit { margin-top: 1px; }


/* ── 2026-06-06: embedded add-on margin calculator spans full row width ──
   .addon__main keeps a 40px right inset so text clears the checkbox; the
   margin calculator block reclaims it so its right edge lines up with the
   row padding (equal spacing left and right). */
.addon__main .addon__margin { margin-right: -40px; }

/* ── 2026-06-06: flat (add-on) calculator - the quick-fill chips move into
   the cells row as a slim first column (per Alexander's layout sketch); the
   standalone QUICK FILL row above is removed in JSX for the flat variant so
   the top of the calculator frees up. Wholesale → retail → you-keep fill the
   remaining width. Full-size calculators keep the original row. */
.svc-margin--flat .svc-margin__calc {
  grid-template-columns: minmax(150px, 0.55fr) 1fr auto 1.15fr auto 1fr;
}
.svc-margin__calc--hasquick {
  grid-template-columns: minmax(150px, 0.55fr) 1fr auto 1.15fr auto 1fr;
}
@media (max-width: 880px) {
  .svc-margin__calc--hasquick { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 560px) {
  .svc-margin__calc--hasquick { grid-template-columns: 1fr; }
}
.svc-margin__cell--quickcol { justify-content: flex-start; }
.svc-margin__quickcol-btns { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; } /* 2026-06-17 (Nicole): wrap fallback so the chips never overflow */
.svc-margin__quickcol-btns .svc-margin__quick-btn { padding: 0.28rem 0.55rem; font-size: 0.7rem; }
@media (max-width: 880px) {
  .svc-margin--flat .svc-margin__calc { grid-template-columns: 1fr 1fr 1fr; }
  .svc-margin__cell--quickcol { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 8px; }
  .svc-margin__cell--quickcol .svc-margin__quickcol-btns { margin-top: 0; }
}

/* 2026-06-30: the flat (per-add-on) margin calculator was missing a <=560px rule, so the
   higher-specificity ".svc-margin--flat .svc-margin__calc" 3-column rule from the <=880px
   block stayed active on phones and crammed the three cells (label/icon overlap, RRP text
   overflow, /month unit truncation). Stack to a single column on mobile, matching the
   non-flat calculator's existing <=560px behaviour. */
@media (max-width: 560px) {
  .svc-margin--flat .svc-margin__calc { grid-template-columns: 1fr; }
}

/* ── 2026-06-06: white-label discount banner frame corner fix ────────────
   The banner used the newer 9-slice <Frame> asset set ("Metal frame-*.webp")
   scaled to 18px slices, which leaves visible seams between the corner and
   edge pieces and lets the cream fill poke past the painted corners. Swap it
   for the pricing sidebar's canonical recipe (22px metal-frame/ slices +
   18px radius, exactly like .summary and .svc-margin--metal) and hide the
   old overlay span - no JSX change needed. */
.alert--metal { border-radius: 18px; }
.alert--metal > .gg-frame { display: none !important; }
/* 2026-06-26: highlight the discount %% in the white-label banner - bold and
   the same orange as the tier prices (#B85E0A). */
.alert--metal .alert__hl { font-weight: 800; color: #B85E0A; }
/* 2026-06-25: white-label discount banner uses the check.webp icon (was the
   sparkle emoji). Size + center the image within the .alert__icon slot. */
.alert__icon img { height: 1.3rem; width: auto; display: block; }
.alert--metal .alert__icon { margin-top: 0; display: inline-flex; align-items: center; }
.alert--metal::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    url('metal-frame/top-left.webp')     top left     / 22px 22px no-repeat,
    url('metal-frame/top-right.webp')    top right    / 22px 22px no-repeat,
    url('metal-frame/bottom-left.webp')  bottom left  / 22px 22px no-repeat,
    url('metal-frame/bottom-right.webp') bottom right / 22px 22px no-repeat,
    url('metal-frame/top.webp')    22px top    / calc(100% - 44px) 22px repeat-x,
    url('metal-frame/bottom.webp') 22px bottom / calc(100% - 44px) 22px repeat-x,
    url('metal-frame/left.webp')   left 22px   / 22px calc(100% - 44px) repeat-y,
    url('metal-frame/right.webp')  right 22px  / 22px calc(100% - 44px) repeat-y;
  z-index: 2;
}
.alert--metal::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(110% 70% at 50% -15%, rgba(255,255,255,0.55), transparent 55%);
  z-index: 0;
}
.alert--metal > *:not(.gg-frame) { position: relative; z-index: 1; }

/* ── 2026-06-08: multi-option add-on "mis-click" nudge ────────────────────
   These sub-group add-on cards (Render Quality, Advanced VFX, etc.) can only
   be actioned via their option chips. When a user clicks the card but misses
   the chips, JS adds .is-nudging to the group for ~1.6s: the chips give a
   quick shake + orange ring, and a brief "Pick an option below" hint appears,
   making it obvious where to click. */
@keyframes ggChipNudge {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-4px); }
  30% { transform: translateX(4px); }
  45% { transform: translateX(-3px); }
  60% { transform: translateX(3px); }
  80% { transform: translateX(-1px); }
}
.addon.ps-group.is-nudging .ps-group__chips { animation: ggChipNudge 0.5s ease; }
.addon.ps-group.is-nudging .ps-chip {
  border-color: var(--gg-orange-deep, #C77800) !important;
  box-shadow: 0 0 0 2px rgba(252, 157, 43, 0.45), 0 2px 12px rgba(252, 157, 43, 0.28) !important;
}
.ps-chip { transition: box-shadow 220ms ease, border-color 220ms ease; }
.ps-group__nudge-hint {
  display: flex;
  align-items: center;
  gap: 5px;
  max-height: 0;
  margin: 0;
  opacity: 0;
  overflow: hidden;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gg-orange-deep, #C77800);
  pointer-events: none;
  transition: opacity 180ms ease, max-height 180ms ease, margin 180ms ease;
}
.addon.ps-group.is-nudging .ps-group__nudge-hint {
  max-height: 24px;
  opacity: 1;
  margin: 0 0 7px;
}
.ps-group__nudge-hint svg { flex: 0 0 auto; }

/* ── 2026-06-08: international ("located outside the UK") VAT toggle ───────
   Sits beside the VAT-registered toggle in the margin calc. UK VAT is only
   charged to UK businesses, so this removes it entirely. Add breathing room +
   a subtle divider; grey out the VAT-registered toggle when international is on
   (it no longer applies). */
.svc-margin__vat-row { flex-wrap: wrap; row-gap: 0.35rem; }
.svc-margin__vat-toggle--intl {
  margin-left: 0.4rem;
  padding-left: 0.9rem;
  border-left: 1px solid rgba(15, 28, 53, 0.12);
}
.svc-margin__vat-toggle.is-disabled { opacity: 0.5; cursor: not-allowed; }
.svc-margin__vat-toggle.is-disabled .svc-margin__vat-box { cursor: not-allowed; }
@media (max-width: 560px) {
  .svc-margin__vat-toggle--intl { margin-left: 0; padding-left: 0; border-left: 0; }
}


/* ── GorillaMatrix: tighter icon spacing (all services) + clickable icon ── */
.gm-item { gap: 0.4rem; }
.gm-item .info-tip-icon { margin-left: 0; }
.info-tip-icon:hover { color: #374151; opacity: 1; }
.info-tip-icon--clickable { cursor: pointer; }
.info-tip-icon--clickable:hover { color: var(--gg-blue, #002abf); opacity: 1; }
.gm-tip-portal__hint { color: #9aa1a9; font-size: 0.92em; margin-top: 0.45em; }
.gm-tip-portal__newtab { font-weight: 700; }
/* ── GorillaMatrix overlay (reuses .cmp-modal chrome) ── */
.gm-ov__intro { font-size: 0.95rem; line-height: 1.6; color: var(--gg-body, #2C3142); margin: 0 0 1.25rem; }
.gm-ov__cols-head { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 0.7rem; }
.gm-ov__cols-head-pro, .gm-ov__cols-head-con { font-weight: 800; font-size: 0.9rem; color: #1f2937; }
.gm-ov__row { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; row-gap: 0.5rem; align-items: start; margin-bottom: 1.1rem; }
.gm-ov__col { display: flex; flex-direction: column; gap: 0.5rem; }
.gm-ov__point { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.9rem; font-weight: 600; color: #1f2937; line-height: 1.4; }
.gm-ov__ic { flex-shrink: 0; margin-top: 1px; }
.gm-ov__ic--pro { color: var(--gg-blue, #002abf); }
.gm-ov__ic--con { color: #dc2626; }
.gm-ov__subbox { font-size: 0.82rem; line-height: 1.5; color: var(--gg-body, #2C3142); background: rgba(0, 42, 191, 0.05); border-radius: 10px; padding: 0.7rem 0.85rem; }
.gm-ov__subbox--con { background: rgba(220, 38, 38, 0.05); }
.gm-ov__subbox strong { display: block; margin-bottom: 0.2rem; color: #111827; }
.gm-ov__closing { font-size: 0.9rem; line-height: 1.6; color: var(--gg-body, #2C3142); margin: 1.25rem 0 0; }
.gm-ov__faqs { margin-top: 1.5rem; border-top: 1px solid var(--gg-hairline, rgba(15, 28, 53, 0.12)); padding-top: 1rem; }
.gm-ov__faqs-title { font-size: 1.1rem; font-weight: 800; color: #111827; margin: 0 0 0.4rem; }
.gm-ov__faq { border-bottom: 1px solid var(--gg-hairline, rgba(15, 28, 53, 0.1)); }
.gm-ov__faq-q { display: flex; align-items: center; gap: 0.6rem; width: 100%; background: none; border: 0; padding: 0.8rem 0; cursor: pointer; text-align: left; font: inherit; }
.gm-ov__faq-n { font-weight: 800; color: var(--gg-blue, #002abf); font-size: 0.85rem; }
.gm-ov__faq-qt { flex: 1; font-weight: 700; color: #1f2937; font-size: 0.92rem; }
.gm-ov__faq-toggle { color: var(--gg-blue, #002abf); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gm-ov__faq-a { font-size: 0.86rem; line-height: 1.6; color: var(--gg-body, #2C3142); padding: 0 0 0.9rem; }
@media (max-width: 640px) { .gm-ov__cols-head, .gm-ov__row { grid-template-columns: 1fr; } }

/* Batch 10: overlay title spacing + shorter panel (like Compare all tiers) */
.gm-ov .cmp-modal__title-row { margin-bottom: 1rem; }
.gm-ov .cmp-modal__panel { max-height: calc(100vh - 12rem); }

/* Batch 12: overlay steps, note box, FAQ paragraphs */
.gm-ov__step { margin-bottom: 1.1rem; }
.gm-ov__step-h { font-size: 0.98rem; font-weight: 800; color: #1f2937; margin: 0 0 0.3rem; }
.gm-ov__step-b { font-size: 0.9rem; line-height: 1.6; color: var(--gg-body, #2C3142); margin: 0; }
.gm-ov__note { font-size: 0.86rem; line-height: 1.6; color: var(--gg-body, #2C3142); background: rgba(0, 42, 191, 0.05); border-radius: 12px; padding: 1rem 1.1rem; margin-top: 1.25rem; }
.gm-ov__note strong { color: #111827; }
.gm-ov__faq-p { margin: 0 0 0.6em; }
.gm-ov__faq-p:last-child { margin-bottom: 0; }

/* Batch 15: overlay tabs + block types */
/* 2026-06-29: overlay tabs as a segmented control (grey track, raised solid-blue
   active, light inactive) - matches the marketing-site / commit-toggle pill style
   in place of the old folder tabs. */
.gm-ov__tabs { /* 2026-06-30: grey segmented tray around the button-tabs (per request, matches the For Founders/Investors/Agencies container) */ display: inline-flex; align-items: center; gap: 8px; padding: 6px; background: linear-gradient(180deg, #ECECEE 0%, #E2E3E8 100%); border: 1px solid rgba(120,130,160,0.30); border-radius: 16px; box-shadow: inset 0 1px 2px rgba(20,28,60,0.10), 0 1px 0 rgba(255,255,255,0.9); margin: 0.25rem 0 1.2rem; max-width: 100%; flex-wrap: wrap; }
.gm-ov__tab { /* 2026-06-30: styled to match the Back/Next page neumorphic buttons (per request) */ background: linear-gradient(109deg, #e6e6e6 13%, #e6e6e6 100%); border: 1px solid transparent; border-radius: 12px; padding: 0.6rem 1.2rem; font: inherit; font-weight: 600; font-size: 0.9rem; color: #111111; cursor: pointer; box-shadow: rgba(255,255,255,0.36) -2px -2px 2px -1px, rgba(255,255,255,0.6) 1px 1.5px 2px 0px inset, rgba(140,139,137,0.29) -2px -2px 2px 0px inset, rgba(224,223,222,0.5) -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; transition: transform .12s ease, box-shadow .15s ease, background .15s ease; }
.gm-ov__tab:hover:not(.is-active) { transform: translateY(-1px); }
.gm-ov__tab.is-active { background: linear-gradient(109deg, #2e5dff 0%, #002ABF 60%, #001B82 100%); border-color: transparent; color: #fff; 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; }
/* 2026-06-10 (Loom 32): wide variant for the sourcing overlay so all six tabs sit on one line on desktop. */
.gm-ov--wide .cmp-modal__panel { max-width: 1160px; }
.gm-ov--wide .gm-ov__tab { padding: 0.5rem 0.75rem; }
.gm-ov__tabpanel { margin-bottom: 0.5rem; }
.gm-ov__p { font-size: 0.9rem; line-height: 1.6; color: var(--gg-body, #2C3142); margin: 0 0 0.8rem; }
.gm-ov__subhead { font-size: 1rem; font-weight: 800; color: #1f2937; margin: 1.3rem 0 0.5rem; }
.gm-ov__model { margin: 0 0 1rem; }
.gm-ov__model-h { font-weight: 800; color: var(--gg-blue, #002abf); font-size: 0.92rem; margin-bottom: 0.25rem; }
.gm-ov__model-b { font-size: 0.88rem; line-height: 1.55; color: var(--gg-body, #2C3142); margin: 0 0 0.5rem; }
.gm-ov__ex { font-size: 0.85rem; line-height: 1.5; background: rgba(0, 42, 191, 0.05); border: 0; border-radius: 8px; padding: 0.6rem 0.8rem; color: var(--gg-body, #2C3142); }
.gm-ov__ex strong, .gm-ov__box-best strong { color: #111827; }
.gm-ov__box { background: rgba(0, 42, 191, 0.05); border: 0; border-radius: 10px; padding: 0.8rem 0.9rem; margin: 0 0 0.7rem; }
.gm-ov__box-h { font-weight: 800; color: #1f2937; font-size: 0.9rem; margin-bottom: 0.3rem; }
.gm-ov__box-b { font-size: 0.86rem; line-height: 1.55; color: var(--gg-body, #2C3142); margin: 0 0 0.4rem; }
.gm-ov__box-best { font-size: 0.82rem; color: var(--gg-body, #2C3142); }
.gm-ov__bullets { margin: 0.2rem 0 0.8rem; padding-left: 1.1rem; }
.gm-ov__bullets li { font-size: 0.88rem; line-height: 1.55; color: var(--gg-body, #2C3142); margin-bottom: 0.55rem; }
.gm-ov__bullets li strong { color: #1f2937; }
.gm-ov__checks { list-style: none; margin: 0.2rem 0 0.9rem; padding: 0; }
.gm-ov__checks li { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.88rem; line-height: 1.5; color: var(--gg-body, #2C3142); margin-bottom: 0.55rem; }
.gm-ov__checks li svg { color: var(--gg-blue, #002abf); flex-shrink: 0; margin-top: 1px; }

/* Batch 16: FAQ bullet lists */
.gm-ov__faq-ul { margin: 0 0 0.6rem; padding-left: 1.2rem; }
.gm-ov__faq-ul li { font-size: 0.86rem; line-height: 1.6; color: var(--gg-body, #2C3142); margin-bottom: 0.4rem; }
.gm-ov__faq-ul li strong { color: #111827; }

/* Batch 17: example inside outcome box (white-label) */
.gm-ov__box-ex { font-size: 0.82rem; line-height: 1.5; color: var(--gg-body, #2C3142); margin-top: 0.4rem; }
.gm-ov__box-ex strong { color: #111827; }
/* 2026-06-09 (Loom 31): breakdown-overlay VAT checkboxes — space below (before Recurring monthly) and between the two toggles. */
.bdwn-modal__vat-toggles { margin: 0.2rem 0 1.4rem; }
.bdwn-modal__vat-toggles .svc-margin__vat-row { gap: 0.3rem; flex-wrap: wrap; }
/* 2026-06-09 (Loom 31, item 10): chevron on the ACCOUNTABILITY DISCOUNT label line; price right-aligned to the full margin. */
.ms-stack__head { position: relative; }
.ms-stack__head-main { width: 100%; }
.ms-stack__lbl { padding-right: 1.5rem; }
.ms-stack__chevron { position: absolute; top: 0; right: 0; margin: 0; }


/* 2026-06-09 (Loom 39): standalone Portal login button, styled like the Edit service selection button (full blue, slightly larger) with the diagonal arrow kept. */
.gg-portal-row { display: flex; justify-content: flex-end; margin: 0 0 0.6rem; }
.gg-portal-row .gg-portal-btn { margin-left: 0; top: 0; padding: 0.35rem 0.8rem; font-size: 0.78rem; color: var(--gg-blue, #002ABF); background: #fff; border: 1px solid color-mix(in srgb, var(--gg-blue, #002ABF) 18%, transparent); }
.gg-portal-row .gg-portal-btn:hover { background: color-mix(in srgb, var(--gg-blue, #002ABF) 5%, white); border-color: var(--gg-blue, #002ABF); color: var(--gg-blue, #002ABF); }
.gg-portal-row .gg-portal-btn .svc__title-cmp-btn-arrow { color: var(--gg-blue, #002ABF); }


/* ── RWD-01/03 (2026-06-10): on phones the summary rail is full-width and the
   quote-review labels (service lines, "↳" channel/add-on sub-lines, applied-
   savings text) were single-line ellipsis-truncated, hiding the tier, commit
   term, channel list and discount target on the screen customers convert
   from. Let them WRAP instead. Overrides the nowrap+ellipsis that comes from
   the @imported app.css base (.summary__line-label > span). Prices
   (.summary__line-val) keep nowrap so amounts never split. */
@media (max-width: 480px) {
  .summary__line-label > span,
  .summary__applied-saving-text {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: break-word;
  }
}

/* ── RWD-02 (2026-06-10): info icons measure 12-13px — far below the 44px
   touch guideline. Invisible hit-box extension on coarse-pointer devices
   only; zero visual change. (.info-icon is the canonical button class.) */
@media (pointer: coarse) {
  .info-icon { position: relative; }
  .info-icon::after { content: ''; position: absolute; inset: -14px; }
}

/* ── Role overlay sub-tabs (Typical work, broad roles only) ──────────────────
   Pills, deliberately lighter than the folder-style .gm-ov__tab row, so the
   hierarchy reads main tab then sub-area. */
.gm-ov__subtabs-wrap { margin-top: 0.2rem; }
.gm-ov__subtabs { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0 0 0.9rem; }
.gm-ov__subtab { display: inline-flex; align-items: center; background: #fff; border: 1px solid color-mix(in srgb, var(--gg-blue, #002abf) 18%, transparent); border-radius: 999px; padding: 0.45rem 0.95rem; font: inherit; font-size: 0.8rem; font-weight: 700; color: var(--gg-blue, #002abf); cursor: pointer; line-height: 1; min-height: 34px; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; touch-action: manipulation; -webkit-tap-highlight-color: rgba(0, 42, 191, 0.15); }
.gm-ov__subtab.is-active { 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); }
.gm-ov__subtab:hover:not(.is-active) { background: color-mix(in srgb, var(--gg-blue, #002abf) 6%, white); border-color: color-mix(in srgb, var(--gg-blue, #002abf) 35%, transparent); }
.gm-ov__hr { border: 0; border-top: 1px solid rgba(0, 42, 191, 0.14); margin: 0.95rem 0; }

/* ── 2026-06-10 (Nicole): step number in the check's slot — 1/2/3 in a circle
   that becomes the blue check once the step is complete. Same 18px geometry
   as .step-indicator__check so the swap is seamless. ── */
.step-indicator__numbadge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  color: #6b7280;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(15, 28, 53, 0.16), 0 1px 3px rgba(15, 28, 53, 0.10);
}
.step-indicator__item--current .step-indicator__numbadge {
  background: var(--gg-blue, #002ABF);
  color: #fff;
  box-shadow: none;
}
.step-indicator--mini .step-indicator__numbadge { display: none; }

/* ── 2026-06-10 (Loom 42, laptop viewport): Start fresh joins the Portal
   login utility row, one right-aligned line instead of two full rows, so
   laptops lose none of the build view to button rows. ── */
.gg-portal-row { gap: 10px; align-items: center; }
.gg-portal-row .start-fresh-link { margin: 0; }

/* ── 2026-06-10 (Loom 43 1:17): Portal login + Start fresh as circular icon
   buttons beside the steps. The old utility row is gone entirely. ── */
.step-indicator { display: flex; align-items: center; gap: 14px; }
.step-indicator__list { flex: 1 1 auto; min-width: 0; }
.step-indicator__utils { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.step-utility-tipwrap { display: inline-flex; }
.step-utility-btn {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--gg-blue, #002ABF);
  border: 1px solid color-mix(in srgb, var(--gg-blue, #002ABF) 18%, transparent);
  cursor: pointer; font: inherit; font-size: 16px; line-height: 1;
  text-decoration: none; padding: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.step-utility-btn:hover { background: color-mix(in srgb, var(--gg-blue, #002ABF) 5%, white); border-color: var(--gg-blue, #002ABF); }
@media (max-width: 760px) { .step-indicator__utils { display: none; } }

/* Utility-button tooltips hug their text instead of the fixed 220px card. */
.dis-tip--compact { width: auto; max-width: 240px; white-space: nowrap; }
.dis-tip--compact.dis-tip { text-align: center; }
@media (max-width: 900px) { .dis-tip--compact { white-space: normal; max-width: 220px; } }

/* The portal-tip variant rule (.hover-portal-tip.dis-tip, 220px) outranked
   the compact class; matched at the same specificity so it really hugs. */
.hover-portal-tip.dis-tip--compact { width: auto; max-width: 240px; }

/* ── 2026-06-11 (Nicole): long service descriptions ran beneath the corner
   commitment pills (first spotted on Social Media Management). A floated
   spacer the size of the corner block reserves the top-right of the title
   wrap, so the first lines wrap clear of the pills and then flow full width
   below them. Scoped to cards that actually have the corner bar. ── */
.svc:has(.svc__head-right .svc__commit-bar--corner) .svc__title-wrap::before {
  content: '';
  float: right;
  width: 354px;
  height: 64px;
}
@media (max-width: 600px) {
  .svc:has(.svc__head-right .svc__commit-bar--corner) .svc__title-wrap::before { display: none; }
}

/* ── 2026-06-11 (Nicole): sidebar role and add-on lines could run their
   wrapped label beneath the right-aligned price when a long word met a
   narrow rail. Cramped lines now wrap, the price drops to its own
   right-aligned row instead of being overlapped, and long words break
   rather than overflow. ── */
.summary__line--addon { flex-wrap: wrap; }
.summary__line--addon .summary__line-val { margin-left: auto; }
.summary__role-toggle span { overflow-wrap: break-word; }

/* The label could still shrink below its text's minimum (the inner toggle
   span kept its width and bled under the price). The label now keeps a
   160px basis so a cramped line wraps the price below instead, and the
   toggle and span genuinely shrink and break. */
.summary__line--addon .summary__line-label { flex: 1 1 160px; }
.summary__line--addon .summary__role-toggle { flex: 1 1 0; min-width: 0; }
.summary__role-toggle span { overflow-wrap: anywhere; min-width: 0; }

/* ── 2026-06-11 (Nicole, round 2): sidebar lines stay on ONE line. Labels
   truncate with an ellipsis instead of wrapping (the full text shows as the
   browser's own tooltip via the title attribute, like the See-full-breakdown
   headings), and a long price wraps inside its own right-aligned box, for
   example From £10.50- over £17/hour. Round 1's wrap-to-second-row approach
   is reverted. ── */
.summary__line--addon { flex-wrap: nowrap; }
.summary__line--addon .summary__line-label { flex: 1 1 0; }
.summary__line--addon .summary__role-toggle { overflow: hidden; }
.summary__role-toggle span {
  overflow-wrap: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  flex: 1 1 auto;
}
.summary__line--role .summary__line-val { white-space: normal; text-align: right; max-width: 46%; }

/* ── 2026-06-11 (Nicole): the Start-fresh tooltip text overran its bubble at
   every resolution, nowrap forced the long line past the card's padding.
   Compact tips now size to their content and wrap inside the 240px cap, so
   short tips still hug one line and long ones break cleanly. ── */
.dis-tip--compact, .hover-portal-tip.dis-tip--compact {
  width: max-content;
  max-width: 240px;
  white-space: normal;
}

/* ── 2026-06-11 (Loom 36): waitlisted tiers keep their price visible. The
   pill sits on its own line above the price instead of replacing it. ── */
.tier--waitlist .tier__price .tier__waitlist-pill-wrap { display: block; margin-bottom: 6px; }

/* ── 2026-06-11 (Nicole): waitlisted Grow and Enterprise pricing matches the
   sibling tiers. The amber strip rules above predate pricing being visible
   on waitlisted cards, so Grow's restored price came out dark amber while
   Starter and Scale sat in the default ink. ── */
.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 {
  /* matches the base .tier__price colour set in app.css */
  color: var(--gg-blue, #002ABF) !important;
}
.tier--waitlist.tier--recommended .tier__price-sub,
.tier--waitlist.tier--recommended .tier__price-unit,
.tier--waitlist.tier--ent .tier__price-sub,
.tier--waitlist.tier--ent .tier__price-unit {
  /* matches the base .tier__price-sub colour set in app.css */
  color: var(--gg-muted, #6b7280) !important;
}
.tier--waitlist.tier--recommended .tier__setup-fee,
.tier--waitlist.tier--ent .tier__setup-fee {
  color: var(--gg-muted, #6b7280) !important;
}

/* ── 2026-06-11: add-on quantity preset packs (Custom List Building). Pills
   carry the count and the order value, the stepper stays for custom amounts. ── */
.addon__qty-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 10px;
}
.addon__qty-preset {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 16px;
  border-radius: 12px;
  border: 1px solid rgba(0, 42, 191, 0.18);
  background: #fff;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.addon__qty-preset:hover { border-color: rgba(0, 42, 191, 0.45); }
.addon__qty-preset.is-on {
  border-color: var(--gg-blue, #002ABF);
  background: rgba(0, 42, 191, 0.06);
  box-shadow: 0 0 0 3px rgba(0, 42, 191, 0.10);
}
.addon__qty-preset-count { font-weight: 800; font-size: 0.95rem; color: var(--gg-blue, #002ABF); }
.addon__qty-preset-price { font-size: 0.72rem; font-weight: 600; color: var(--gg-muted, #6b7280); }

/* ── 2026-06-11: the custom-amount label under preset packs reads as a
   sentence, the capitalised treatment stays on the short question labels. ── */
.addon__qty-label--sentence { text-transform: none; }

/* ── 2026-06-11: add-on ⓘ icons with a clickable overlay turn blue on hover,
   same affordance as the role cards. ── */
.addon__info--clickable { cursor: pointer; }
.addon__info--clickable:hover { color: var(--gg-blue, #002abf); opacity: 1; }

/* 2026-06-12 (Loom 40, reviewed): switch-to-recurring pill on one-off
   add-ons, the Pay-upfront toggle at add-on scale, head-row placement. */
.addon__rec-toggle { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto; padding: 0.22rem 0.45rem 0.22rem 0.28rem; 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.68rem; 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; }
.addon__rec-toggle:hover { border-color: rgba(120, 130, 160, 0.35); }
.addon__rec-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); }
.addon__rec-knob { position: relative; display: inline-block; width: 24px; height: 14px; background: linear-gradient(180deg, #DDE0E8 0%, #C9CDD7 100%); border-radius: 100px; flex: 0 0 24px; 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; }
.addon__rec-knob::after { content: ''; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; 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; }
.addon__rec-toggle.is-on .addon__rec-knob { background: linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.22)); }
.addon__rec-toggle.is-on .addon__rec-knob::after { transform: translateX(10px); }
.addon__rec-save { font-size: 0.62rem; font-weight: 800; color: #B85E0A; background: linear-gradient(180deg, rgba(184, 94, 10, 0.14), rgba(184, 94, 10, 0.06)); border: 1px solid rgba(184, 94, 10, 0.35); border-radius: 999px; padding: 1px 6px; white-space: nowrap; }
.addon__rec-toggle.is-on .addon__rec-save { color: #B85E0A; background: #ffffff; border-color: rgba(255, 255, 255, 0.9); }

/* 2026-06-12 (review): one-off setup fee line on add-on cards. */
.addon__setup-fee { font-size: 11px; font-weight: 600; color: var(--gg-muted, #5a647d); margin: 0.15rem 0 0.3rem; }

/* 2026-06-12 (review): billing-term badges in the breakdown modal. */
.bdwn-badge { display: inline-block; margin-left: 6px; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.02em; color: #4a5066; background: rgba(15, 28, 53, 0.07); border: 1px solid rgba(15, 28, 53, 0.10); border-radius: 999px; padding: 1px 7px; vertical-align: middle; white-space: nowrap; }

/* 2026-06-12 (Loom 44 0:12): the step number rides a circled prefix beside the
   step name, and the corner badge becomes a per-step selection counter, grey
   at zero and brand blue once the step holds selections. */
.step-indicator__numpre { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: rgba(0, 42, 191, 0.10); color: var(--gg-blue, #002ABF); font-size: 9px; font-weight: 800; margin-right: 5px; flex: 0 0 auto; vertical-align: middle; position: relative; top: -1px; }
.step-indicator__selcount { color: #6b7280; }
.step-indicator__selcount--filled { color: var(--gg-blue, #002ABF); }
.step-indicator--mini .step-indicator__numpre { display: none; }

/* 2026-06-12 (Loom 44, Nicole): the LinkedIn box info icon hugs the question
   text, the stepper takes the slack, and the grey under-£100-a-week justifier
   rides the price line. */
.ch-li-extras__label { flex: 0 1 auto; }
.ch-li-extras__stepper { margin-left: auto; }

/* 2026-06-12 (Nicole): overseas calling, per-region tooltips and the live
   selected-regions total under the pills. */
.ov-rp__tipwrap { display: inline-flex; }
.ov-rp__total { font-size: 12px; font-weight: 700; color: var(--gg-blue, #002ABF); margin-top: 8px; }

/* 2026-06-12 (Nicole): the CLB Switch-to-recurring button, brand blue with
   the amber saving badge. */
.addon__rec-jump { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; background: var(--gg-blue, #002ABF); color: #fff; border: 0; border-radius: 999px; padding: 5px 12px; font-size: 11px; font-weight: 800; font-family: inherit; cursor: pointer; flex: 0 0 auto; transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; }
.addon__rec-jump:hover { background: var(--gg-btn-primary-bg-hover, #0030d9); box-shadow: 0 3px 9px -5px rgba(0, 42, 191, 0.45); transform: translateY(-0.5px); }
.addon__rec-jump-save { background: #fff7e0; color: #b45309; border-radius: 999px; padding: 2px 7px; font-size: 9.5px; font-weight: 800; }

/* 2026-06-12 (Nicole): the role waiting-list pill shrinks to sit beside the
   cost on one line. */
.summary__line-val--role { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.summary__line--role .summary__line-waitlist-pill { font-size: 8.5px; padding: 1px 6px; line-height: 1.5; }

/* 2026-06-12 (Nicole): the breakdown modal takes the brand palette. Blue
   section titles with a blue-tinted divider above each section, the waiting
   list in amber, matching the badges. */
.bdwn-modal__section { border-top: 1px solid rgba(0, 42, 191, 0.14); padding-top: 14px; margin-top: 16px; }
.bdwn-modal__section:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.bdwn-modal__section-title { color: var(--gg-blue, #002ABF); }
.bdwn-modal__section--waitlist { border-top-color: rgba(180, 83, 9, 0.28); }
.bdwn-modal__section--waitlist .bdwn-modal__section-title { color: #b45309; }

/* 2026-06-12: the overlay comparison table (Landing Pages first), brand blue
   headers with blue-tinted dividers. */
.gm-ov__table-wrap { margin: 10px 0 4px; overflow-x: auto; }
.gm-ov__table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.gm-ov__table th, .gm-ov__table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid rgba(0, 42, 191, 0.12); vertical-align: top; }
.gm-ov__table thead th { color: var(--gg-blue, #002ABF); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 2px solid rgba(0, 42, 191, 0.2); }
.gm-ov__table tbody th { font-weight: 700; color: var(--gg-heading, #0f1c35); width: 18%; }

/* 2026-06-12 (review): the grey price justifier under an add-on's price. */
.addon__price-note { font-size: 0.72rem; font-weight: 500; color: #6b7280; margin-top: 2px; }

/* 2026-06-12 (review): the step box takes the service boxes' 3D glass frame,
   and the bespoke pill-wrap drops its extra bottom margin so the Bespoke
   Pricing row ends level with the priced tiers. */
.step-indicator::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;
  z-index: 1;
}
.step-indicator > * { position: relative; z-index: 2; }
.tier--waitlist .tier__price .tier__waitlist-pill-wrap:has(.tier__bespoke-text) { margin-bottom: 0; }


/* ── Batch 29 · 2026-06-18 (Loom) — all priced tiers share one amber ────────
   Removes the blue/amber split the client flagged on the pricing cards.
   .tier__price holds the whole "£995/month" string here (no sub-spans), so we
   colour the element (and any future children) directly. Higher specificity
   plus later source order than the Sprint 5 recommended-tier override (#C77800),
   so Starter, Grow and Scale all land on the same #B85E0A used by the add-on
   prices and the agency-path RRP. .tier--ent is excluded so the Enterprise
   "Bespoke Pricing" keeps its blue voice. */
.svc--wl .tier:not(.tier--ent) .tier__price,
.svc--wl .tier:not(.tier--ent) .tier__price *:not(.tier__price-rrp) {
  color: #B85E0A !important;
}
/* Batch 30: Enterprise Bespoke Pricing reads amber on the agency path too. */
.svc--wl .tier__bespoke-text {
  color: #B85E0A !important;
}
/* Batch 35: RRP sits inline on the same line as the FULL-SIZE price on screens
   wide enough to hold both (the price area is width-capped). The headline number
   keeps its original size everywhere - it is never shrunk. Where the line cannot
   fit, the RRP drops to its own row so nothing overflows or bounces. */
.svc--wl .tier:not(.tier--ent) .tier__price { white-space: nowrap; }
@media (max-width: 1849px) {
  .svc--wl .tier:not(.tier--ent) .tier__price { white-space: normal; }
  /* Batch 36: when the RRP drops to its own row, give it a little breathing
     room so it does not crowd or overlap the price line above. */
  .svc--wl .tier:not(.tier--ent) .tier__price-rrp,
  .svc--wl .tier:not(.tier--ent) .tier__setup-rrp { display: block; margin-left: 0; margin-top: 4px; line-height: 1.25; }
}


/* Batch 38: info icon on the step-1 white-label 40% discount badge. */
.agency-intent-card__discount-tip-wrap { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 5px; }
.agency-intent-card__discount-info { width: 13px; height: 13px; color: var(--gg-muted, #6b7280); opacity: 0.6; cursor: help; transition: color 0.15s ease, opacity 0.15s ease; }
.agency-intent-card__discount-info:hover { color: #374151; opacity: 1; }


/* Batch 39: full-time dedicated talent commission badge (white-label). Green
   reads as earnings, matching how net profit is shown elsewhere. */
.svc__talent-comm { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.svc__talent-comm-head { display: inline-flex; align-items: center; gap: 5px; }
/* Batch 2 (19 Jun): clickable how-to-white-label link on the dedicated cards. */
.svc__talent-wl-link { background: none; border: 0; padding: 0; font: inherit; font-size: 10.5px; font-weight: 600; color: var(--gg-blue, #002ABF); cursor: pointer; line-height: 1.3; white-space: nowrap; display: inline-block; }
.svc__talent-wl-link__text { text-underline-offset: 2px; }
.svc__talent-wl-link:hover .svc__talent-wl-link__text { text-decoration: underline; }
.svc__talent-wl-link__arrow { display: inline-block; transition: transform 0.15s ease; }
.svc__talent-wl-link:hover .svc__talent-wl-link__arrow { transform: translateX(3px); }
/* Batch 4 (19 Jun): reserve top-right space so the talent badge + link clear the card description, with extra margin so the description wraps earlier. */
.svc:has(.svc__talent-comm) .svc__title-wrap::before { content: ''; float: right; width: 300px; height: 76px; }
.svc__talent-comm-badge { display: inline-flex; align-items: center; background: rgba(13, 148, 92, 0.10); color: var(--gg-success, #0d945c); border: 1px solid rgba(13, 148, 92, 0.30); border-radius: 999px; padding: 3px 10px; font-size: 0.74rem; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
.svc__talent-comm-info { width: 14px; height: 14px; color: var(--gg-muted, #6b7280); opacity: 0.6; cursor: help; transition: color 0.15s ease, opacity 0.15s ease; }
.svc__talent-comm-info:hover { color: #374151; opacity: 1; }


/* Batch 40: optional info icon on a tier-feature pill (SDG Enterprise Google Ads warm-up). */
.tier__badge-chip-tip-wrap { display: inline-flex; align-items: center; margin-left: 3px; }
.tier__badge-chip-info { width: 11px; height: 11px; color: var(--gg-blue, #002abf); opacity: 0.85; cursor: help; }


/* ── 2026-06-19: White-label margin head icon swapped from the inline £ glyph to
   the economies-of-scale webp illustration. It's a full-colour graphic, so drop
   the green chip tint/border and let the image fill the reserved icon box. ── */
.svc-margin__head-icon.svc-margin__head-icon--img {
  background: transparent !important;
  border-color: transparent !important;
  padding: 0;
  overflow: visible;
}
.svc-margin__head-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}


/* ── 2026-06-19: metal-framed cards get the concrete texture fill ─────────
   Replaces the warm cream/gold gradient on every metal-framed section
   (.summary sidebar incl. the You're-set page, the White-label margin
   calculators, and the metal alert/welcome banners) with the seamless
   concrete card texture. The metal frame (::before slices) and the soft top
   shine (::after) are untouched and paint above this fill; content stays at
   z-index 2. Tiled at a fixed size so the grain scale is identical on every
   card regardless of its dimensions. ── */
.summary,
.youreset__summary .summary,
.svc-margin--gold.svc-margin--metal,
.alert--metal {
  /* 2026-06-19b: warm-white wash over the texture so it reads lighter
     (first pass was too dark/muddy). Raise/lower the 0.50 alpha to taste. */
  background:
    linear-gradient(rgba(255, 251, 244, 0.50), rgba(255, 251, 244, 0.50)),
    url('UI_Card_Concrete_02_Seamless.webp') 0 0 / 480px 480px repeat !important;
}


/* ── 2026-06-19: thin glass frame around the summary's plan + services list ──
   Wraps the "Your Plan" header + Services & Add-ons list in the same thin glass
   card the Applied Savings / Accountability panels use, so it reads as part of
   the same glass-panel family. The card is the non-scrolling frame host;
   .summary__list keeps its own overflow and scrolls INSIDE it, so the 14px
   bevel ::before never scrolls away with the content. ── */
.summary__list-card {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 1rem 1rem 1.1rem;
  border-radius: 14px;
  background: linear-gradient(180deg, #FBF8F4 0%, #F5EFE7 100%);
  /* 2026-06-19: inner stroke removed — the glass-frame ::before is the border now */
  border: 1px solid transparent;
  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;
}
.summary__list-card::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;
  filter: sepia(15%) hue-rotate(-6deg) saturate(0.9);
  z-index: 0;
}
.summary__list-card > * { position: relative; z-index: 1; }
.summary__list-card > .summary__list { flex: 1 1 auto; min-height: 0; border: 0; background: transparent; border-radius: 0; padding: 0; margin: 0; }
/* sticky list title now sits on the cream card, not a white band */
.summary__list-card .summary__list-title {
  background: linear-gradient(180deg, #FBF8F4 0%, #F8F2EA 100%);
}
@media (max-width: 1100px) {
  .summary__list-card { overflow: visible; max-height: none; flex: 0 0 auto; }
}


/* ── 2026-06-19: drop the 1px inner strokes on the warm side-panel cards ──
   The plan + services card now relies on the glass frame alone, so match it on
   Applied Savings and Accountability (Monthly Total already has no 1px border).
   All four sidebar cards now read with the glass frame as their only edge. ── */
.summary__applied-savings,
.ms-stack {
  border-color: transparent;
}


/* ── 2026-06-19: "Recommended" channel marker ───────────────────────────
   2026-06-18 update (Alexander): the on-tile amber star badge was removed; the
   "Recommended" cue now lives only in the tile's hover tooltip (tag below). ── */
.channel-tile__rec-tag {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #B45309;
  background: rgba(245, 158, 11, 0.15);
  border-radius: 5px;
  padding: 1px 6px;
  margin-bottom: 5px;
}

/* 2026-06-24 (Loom 57): welcome-back banner gains a grey "Back to website"
   button beside Resume. Its diagonal arrow nudges up-right on hover, the same
   motion as the "Compare all tiers" arrow. */
.welcome-back__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}
.btn__arrow--diag {
  display: inline-block;
  margin-left: 0.3rem;
  opacity: 0.85;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.btn:hover .btn__arrow--diag,
.btn:focus-visible .btn__arrow--diag {
  opacity: 1;
  transform: translate(2px, -2px);
}

/* 2026-06-25 (Nicole): included signal chips (Scale/Enterprise) — greyed + non-interactive, matching .addon--included. */
.ps-chip--included { opacity: 0.6; cursor: pointer; }
.ps-chip--included:hover { box-shadow: none; transform: none; border-color: color-mix(in srgb, var(--gg-blue, #002ABF) 14%, transparent); }
.ps-chip--included .ps-chip__check { visibility: hidden; }
/* Included signals group (Enterprise): non-interactive cursor + no hover lift. */
.ps-group.addon--included { cursor: pointer; }
.ps-group.addon--included:hover { transform: none; box-shadow: none; }

/* 2026-06-25 (Nicole): included add-ons live in .svc__addons-disc, whose ".svc__addons-disc .addon
   { cursor: pointer }" (0,2,0) was beating ".addon--included" (0,1,0). Higher-specificity rules
   restore the default cursor on included add-ons (Paid Advertising, Native CRM, etc.) and the signal chips. */
.addon.addon--included, .addon.addon--included:hover { cursor: pointer; }
.svc__addons-disc .ps-chip--included, .ps-chip--included:hover { cursor: pointer; }


/* 2026-06-26 (Loom 64): clickable "View available savings" link at the foot of
   the white-label banner tooltip. Divider above, brand-blue, underlined so it
   reads as clickable (mirrors the waitlist tooltip meta, but blue not amber). */
.tip-overlay-link {
  display: block;
  width: 100%;
  margin-top: 0.45rem;
  padding: 0.4rem 0 0;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  background: none;
  text-align: left;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gg-blue, #002abf);
  text-decoration: underline;
  cursor: pointer;
}
.tip-overlay-link:hover,
.tip-overlay-link:focus-visible { color: #001f8f; text-decoration: underline; outline: none; }


/* 2026-06-26 (Alexander): brand-asset drag-and-drop uploader in the agency Q0,
   alongside the paste-a-link field. Reuses the q0-field shell. */
.brand-upload {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem;
  text-align: center; padding: 1.1rem 1rem; cursor: pointer;
  border: 1.5px dashed #cbd5e0; border-radius: 10px; background: #fff;
  color: #475569; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.brand-upload:hover { border-color: #94a3b8; }
.brand-upload--over { border-color: var(--gg-blue, #002abf); background: rgba(0, 42, 191, 0.04); color: var(--gg-blue, #002abf); }
.brand-upload:focus-visible { outline: none; border-color: var(--gg-blue, #002abf); box-shadow: 0 0 0 3px rgba(0, 42, 191, 0.12); }
.brand-upload__icon { color: #94a3b8; }
.brand-upload--over .brand-upload__icon { color: var(--gg-blue, #002abf); }
.brand-upload__main { font-size: 0.85rem; font-weight: 600; color: #0f1c35; }
.brand-upload__hint { font-size: 0.72rem; color: #6b7280; }
.brand-upload__list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.brand-upload__item { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.6rem; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; }
.brand-upload__file { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.brand-upload__name { font-size: 0.8rem; font-weight: 600; color: #0f1c35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-upload__state { font-size: 0.7rem; color: #6b7280; }
.brand-upload__item--done .brand-upload__state { color: #1a7f37; }
.brand-upload__item--failed .brand-upload__state { color: #b42318; }
.brand-upload__item--failed { border-color: #fecaca; background: #fef2f2; }
.brand-upload__remove { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #94a3b8; cursor: pointer; }
.brand-upload__remove:hover { background: rgba(0, 0, 0, 0.05); color: #475569; }

/* 2026-06-26 (Loom 61): Cost Per Meeting meetings cell + sidebar set-prices prompt */
.svc-margin__hint-text { flex: 1 1 auto; }
.svc-margin__fit-link { white-space: nowrap; flex: 0 0 auto; margin-top: 8px; }
/* CPM calc: Meetings/month is the first box, then retail = our price + you keep, all inline */
.svc-margin__cpm-section .svc-margin__calc { grid-template-columns: minmax(150px, 0.55fr) 1fr auto 1.15fr auto 1fr; }
.svc-margin__cell-monthly { flex: 1 0 100%; margin-top: 3px; font-size: 0.72rem; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.svc-margin__cell--result .svc-margin__cell-monthly { color: #047857; }
.svc-margin__cell--cost .svc-margin__cell-monthly { color: #6b7280; }
@media (max-width: 880px) { .svc-margin__cpm-section .svc-margin__calc { grid-template-columns: 1fr 1fr 1fr 1fr; } }
@media (max-width: 560px) { .svc-margin__cpm-section .svc-margin__calc { grid-template-columns: 1fr; } .svc-margin__hint { flex-direction: column; gap: 4px; } }
.summary__set-prices { background: none; border: 0; padding: 0; font: inherit; font-size: 0.78rem; font-weight: 700; color: var(--gg-blue, #002ABF); cursor: pointer; white-space: nowrap; }
.summary__set-prices:hover { text-decoration: underline; }
.summary__set-prices--sm { font-size: 0.72rem; }


/* ── 2026-06-30: MOB-04 touch-target sizing ──────────────────────────────
   Mobile QA flagged several sub-44px tap targets. Enlarge their hit-areas on
   touch devices / narrow screens WITHOUT changing any visible glyph or shifting
   layout: an invisible, centred ::after supplies the bigger hit-area (absolute
   positioning means zero flow impact, so inline info icons keep their line box).
   Wide pills use width:100% so the area only ever grows, never shrinks. Gated to
   (hover:none) OR (max-width:768px) so desktop mouse stays untouched. The modal
   close buttons and .svc__title-cmp-btn are already positioned, so only the
   inline controls receive position:relative. */
@media (hover: none), (max-width: 768px) {
  .info-icon, .info-tip-icon, .svc__upfront-toggle { position: relative; }
  .info-icon::after, .info-tip-icon::after,
  .svc__title-cmp-btn::after, .svc__upfront-toggle::after,
  .cmp-modal__close::after, .bdwn-modal__close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
  }
  .info-icon::after, .info-tip-icon::after { width: 40px; height: 40px; }
  .svc__title-cmp-btn::after { width: 100%; height: 40px; }
  .svc__upfront-toggle::after { width: 100%; height: 44px; }
  /* Lead-volume slider: enlarge the draggable thumb for an easier touch drag. */
  .lead-vol__slider::-webkit-slider-thumb { width: 24px; height: 24px; }
  .lead-vol__slider::-moz-range-thumb { width: 24px; height: 24px; }
}


/* ── 2026-06-30: welcome-back banner — vertical stack on mobile ───────────
   The returning-user banner is a flex row (icon | message | two action
   buttons). On phones the buttons overflowed the card (the blue "Resume" CTA
   was clipped off the right edge). Below 600px, wrap the actions onto their own
   full-width row and stack the two buttons so everything fits and reads top to
   bottom. Desktop/tablet (>600px) keep the original horizontal row. */
@media (max-width: 600px) {
  .welcome-back { flex-wrap: wrap; align-items: center; gap: 0.85rem 1rem; }
  .welcome-back__body { flex: 1 1 0; min-width: 0; }
  .welcome-back__actions { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0.5rem; }
  .welcome-back__actions .btn { width: 100%; justify-content: center; }
}


/* ── 2026-06-30: buying-signals (GorillaSignals) nested cards — fix right-edge
   clipping on mobile. The .ps-group__chips--wide variant keeps the option names
   on one line (white-space:nowrap) and uses minmax(280px, max-content) columns.
   On a phone the chip's max-content (the long nowrap name) plus the grid item's
   default min-width:auto forced the column to ~330px inside a ~260px container,
   so every card overflowed and was clipped by the framed add-ons container. Below
   600px: collapse to a single full-width column (drops the 280px floor), let the
   card shrink to the column (min-width:0), and let the long names wrap. Desktop
   (>600px) keeps the original multi-column wide grid. */
@media (max-width: 600px) {
  .ps-group__chips--wide { grid-template-columns: 1fr; }
  .ps-group__chips--wide .ps-chip { min-width: 0; }
  .ps-group__chips--wide .ps-chip__name { white-space: normal; }
}


/* ── 2026-06-30: white-label margin calculator — hide the change-commitment
   control on mobile. The calc header shows "{N}-month minimum commitment" plus a
   "Change" button (.svc-margin__commit) next to the title; on phones it crammed
   the header and ran off the right edge. The commitment is already set and shown
   via the per-service commitment toggle at the top of the card, so the duplicate
   change affordance is removed below 600px. Desktop (>600px) keeps it. */
@media (max-width: 600px) {
  .svc-margin__commit { display: none; }
}


/* ── 2026-06-30: keep the mobile breakdown sheet's close (×) pinned on scroll ──
   The panel was the scroll container (overflow-y:auto), so the absolutely-
   positioned .mobile-sheet__close scrolled away with the content. Make the panel
   a non-scrolling flex column and let the inner .summary scroll instead, so the ×
   (and the grab handle) stay fixed at the top-right while the plan scrolls. */
.mobile-sheet__panel { display: flex; flex-direction: column; overflow: hidden; }
.mobile-sheet__panel > .summary { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.mobile-sheet__panel .summary__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; max-height: none; } /* 2026-06-30: scroll INSIDE the metal frame so it isn't cut off */


/* ── 2026-06-30: mobile item-count badges show only the number ────────────
   The selected-count badge .ps-group__pill renders "{n} selected" (uppercased
   to "N SELECTED"). On phones, hide the word so only the number shows, saving
   space; desktop keeps the full label. JSX wraps the count and label in
   .ps-group__pill-n / .ps-group__pill-t so the label can be hidden alone. */
@media (max-width: 600px) {
  .ps-group__pill-t { display: none; }
}


/* ── 2026-06-30: mobile — drop the inline pricing breakdown + trim bottom space ──
   The sidebar (.summary-wrap) reflows to the bottom of the page on phones, duplicating
   the expanding breakdown that already lives on the sticky bar's sheet. Hide it on
   mobile. Also remove the page-foot's redundant 5.5rem bottom margin — the .page's own
   96px padding-bottom already clears the sticky bar — so the Back / Next row sits snug
   above the bar instead of floating in empty space. */
@media (max-width: 720px) {
  .summary-wrap { display: none !important; }
  .calc__main > .page__foot { margin-bottom: 0 !important; }
}


/* 2026-06-30: hide the fixed blue wizard progress bar on mobile (per request);
   desktop keeps it. */
@media (max-width: 720px) {
  .gg-progress { display: none !important; }
}


/* ── 2026-06-30: tighten oversized vertical spacing on mobile (per request) ──
   The client-type step had ~40px gaps between the welcome-back banner, the
   intro heading, the client-type section and the cards. Trim the section grid
   gap, the welcome-back bottom margin, section-head bottom margins and the
   client-grid top margin on phones so the flow is more compact. Desktop keeps
   its original generous spacing. */
@media (max-width: 720px) {
  .calc__grid { gap: 0.6rem !important; }
  .welcome-back { margin-bottom: 0.5rem !important; }
  .section-head { margin-bottom: 0.65rem !important; }
  .client-grid { margin-top: 0.65rem !important; }
}

/* 2026-06-30 (Loom 68): no-tier margin calculator nudge. Before a plan is
   picked the calculator is visible but inert, prompting plan selection. */
.svc-margin__quick-btn:disabled,.svc-margin__quick-btn.is-disabled{opacity:.4;cursor:not-allowed;box-shadow:none;}
.svc-margin__cell--retail input:disabled{opacity:.5;cursor:not-allowed;}

/* 2026-06-30 (Freelancer): white-label cross-sell button in the referral
   success state. Layered over the canonical 3D .btn--primary so it keeps the
   same size, shape, lift, and transition, only recoloured to the brand amber
   used for white-label pricing. */
.fl-xsell-wl {
  background: linear-gradient(180deg, #F2960F 0%, #C77800 100%) !important;
  border-color: rgba(120, 70, 0, 0.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 2px 6px rgba(150, 90, 0, 0.35) !important;
}
.fl-xsell-wl:hover {
  background: linear-gradient(180deg, #FFA92E 0%, #D98200 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    0 6px 14px rgba(150, 90, 0, 0.45) !important;
}

/* ── 2026-07-02: animated diagonal arrow on the referral overlay WhatsApp CTA ──
   The "Message Alexander on WhatsApp" link's arrow nudges diagonally, matching
   the Compare-all-tiers arrow's translate(1px,-1px) direction, plus a gentle
   idle bob to draw the eye to the recommended action. Scoped via
   .gm-ov__link--anim so other overlay link blocks are unaffected. */
@keyframes gg-refer-arrow-bob { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(2px, -2px); } }
.gm-ov__link--anim .gm-tip-portal__newtab {
  display: inline-block;
  animation: gg-refer-arrow-bob 1.5s ease-in-out infinite;
}
.gm-ov__link--anim:hover .gm-tip-portal__newtab,
.gm-ov__link--anim:focus-visible .gm-tip-portal__newtab {
  animation: none;
  transform: translate(2px, -2px);
}
@media (prefers-reduced-motion: reduce) {
  .gm-ov__link--anim .gm-tip-portal__newtab { animation: none; }
}


/* 2026-07-02: "I've been referred" low-friction declaration on the client-type step */
.referred-declare{ margin:1rem 0 0; }
.referred-declare__btn{ display:flex; align-items:center; gap:0.75rem; width:100%; text-align:left; padding:0.9rem 1.1rem; border-radius:14px; border:1.5px solid #C6CFE4; background:rgba(255,255,255,0.6); cursor:pointer; transition:border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.referred-declare__btn:hover{ border-color:#8FA0CB; background:rgba(255,255,255,0.9); box-shadow:0 2px 10px rgba(20,28,60,0.06); }
.referred-declare__btn.is-on{ border-color:#002ABF; background:#EEF2FF; }
.referred-declare__check{ flex:0 0 auto; width:24px; height:24px; border-radius:50%; border:1.5px solid #B8C3DE; display:inline-flex; align-items:center; justify-content:center; color:#fff; background:#fff; transition:background .15s, border-color .15s; }
.referred-declare__btn.is-on .referred-declare__check{ background:#002ABF; border-color:#002ABF; }
.referred-declare__txt{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.referred-declare__label{ font-weight:700; color:#0F1C35; font-size:0.98rem; }
.referred-declare__sub{ font-size:0.82rem; color:#6B7894; }
.referred-declare__hint{ margin-left:auto; font-size:0.76rem; color:#3651c8; font-weight:700; letter-spacing:.02em; text-transform:uppercase; white-space:nowrap; }
.referred-declare__note{ margin:0.55rem 0 0; font-size:0.85rem; color:#1E7A46; font-weight:600; display:flex; align-items:center; gap:0.4rem; padding-left:0.15rem; }
@media (max-width:600px){ .referred-declare__btn{ flex-wrap:wrap; row-gap:0.2rem; } }


/* 2026-07-02: match referred-declare control surface to the client cards (glass-frame + square radio) */
.referred-declare__btn{ position:relative; isolation:isolate; overflow:hidden; border:0; border-radius:18px; background:rgba(255,255,255,0.35); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); box-shadow:0 1px 2px rgba(15,23,42,0.04), 0 18px 36px -20px rgba(44,51,102,0.18); padding:1rem 1.2rem; }
.referred-declare__btn:hover{ background:rgba(255,255,255,0.5); box-shadow:0 2px 4px rgba(15,23,42,0.05), 0 22px 40px -20px rgba(44,51,102,0.22); transform:translateY(-1px); }
.referred-declare__btn.is-on{ background:rgba(232,237,255,0.6); box-shadow:0 1px 2px rgba(15,23,42,0.05), 0 18px 36px -20px rgba(44,51,102,0.22); }
.referred-declare__btn > .glass-frame{ --glass-slice:25px; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0; }
.referred-declare__btn > .glass-frame::after{ content:""; position:absolute; inset:0; border-radius:inherit; image-rendering:pixelated; background-image:url('glass-frame/top-left.webp'),url('glass-frame/top-center.webp'),url('glass-frame/top-right.webp'),url('glass-frame/left.webp'),url('glass-frame/right.webp'),url('glass-frame/bottom-left.webp'),url('glass-frame/bottom.webp'),url('glass-frame/bottom-right.webp'); background-repeat:no-repeat; background-size:var(--glass-slice) var(--glass-slice),calc(100% - (2 * var(--glass-slice))) var(--glass-slice),var(--glass-slice) var(--glass-slice),var(--glass-slice) calc(100% - (2 * var(--glass-slice))),var(--glass-slice) calc(100% - (2 * var(--glass-slice))),var(--glass-slice) var(--glass-slice),calc(100% - (2 * var(--glass-slice))) var(--glass-slice),var(--glass-slice) var(--glass-slice); background-position:left top,center top,right top,left center,right center,left bottom,center bottom,right bottom; opacity:0.85; mix-blend-mode:multiply; }
.referred-declare__btn > *:not(.glass-frame){ position:relative; z-index:1; }
.referred-declare .client-card__radio{ position:relative; top:auto; left:auto; right:auto; width:22px; height:22px; flex:0 0 auto; }
.referred-declare__btn:hover .client-card__radio:not(.is-on){ border-color:#6B82D6; }


/* 2026-07-02: stack the stepper utility buttons (reset / website / login) as 2-up
   with the 3rd centred below, to save horizontal space in the header. */
.step-indicator__utils{ display:grid; grid-template-columns:repeat(2, auto); gap:7px; justify-items:center; align-items:center; width:auto; }
.step-indicator__utils > :nth-child(3){ grid-column:1 / -1; justify-self:center; }


/* 2026-07-02: on phones, stack the first-page referral banner toggle below the
   text as a full-width button so it is not cramped inline. */
@media (max-width: 600px){
  .refer-firstpage{ flex-wrap:wrap !important; }
  .refer-firstpage > div{ flex:1 1 auto; min-width:0; }
  .refer-firstpage .fl-refer-toggle{ flex:1 0 100% !important; margin:0.6rem 0 0 !important; justify-content:center; }
}


/* 2026-07-02: stack the services-step referral banners (agency / founder / investor)
   toggle below the text on phones, same as the first-page banner. The toggle sits
   in a wrapper div (with the "How do I refer?" link) here, so target that wrapper. */
@media (max-width: 600px){
  .alert--metal.gg-frame-card:not(.refer-firstpage){ flex-wrap:wrap; }
  .alert--metal.gg-frame-card:not(.refer-firstpage) > div:first-of-type{ flex:1 1 auto; min-width:0; }
  .alert--metal.gg-frame-card:not(.refer-firstpage) > div:has(> .fl-refer-toggle){ flex:1 0 100% !important; margin:0.6rem 0 0 !important; display:flex !important; flex-direction:column !important; align-items:center !important; gap:0.35rem; }
  .alert--metal.gg-frame-card:not(.refer-firstpage) > div:has(> .fl-refer-toggle) .fl-refer-toggle{ margin:0 !important; width:100%; justify-content:center; }
  .alert--metal.gg-frame-card:not(.refer-firstpage) > .fl-refer-toggle{ flex:1 0 100% !important; margin:0.6rem 0 0 !important; justify-content:center; }
}


/* 2026-07-02: on mobile the sticky "SERVICES & ADD-ONS" title stretched its cream
   background to the card edges (margin:-16px), painting over the thin-glass-frame
   bevel. Inset it to the content area so the frame edges show. (summary__list-title
   sticky bg over glass frame) */
@media (max-width: 720px){
  .summary__list-title{ margin-left:0 !important; margin-right:0 !important; padding-left:0 !important; padding-right:0 !important; }
}


/* 2026-07-02: on mobile the referral note's last line ("shown below") was covered
   by the sticky SERVICES & ADD-ONS title, which has margin-top:-13.6px. Give the
   note enough bottom margin to clear that pull-up. (refer-note last line covered by sticky title) */
@media (max-width: 720px){
  .summary__refer-note{ margin-bottom:16px !important; }
}

/* 2026-07-03: desktop-only breathing room between the corner commitment pills
   (absolute-positioned in .svc__head-right) and the pay-upfront toggle, on
   service cards WITHOUT the 4-step configurator stepper (e.g. Founders Portal /
   investor-portal). Stepper cards already get ample gap from the stepper height,
   so they're excluded via :not(:has()) to avoid over-spacing. Below 761px the
   pills reflow full-width in-flow with their own gap, so scope to desktop. */
@media (min-width: 761px) {
  .svc:not(:has(.sdg-stepper)) .svc__tier-label-row { margin-top: 1.6rem; }
}

/* 2026-07-03: clear the sticky SERVICES & ADD-ONS title off the referral note's
   last line on desktop too (the 16px clearance was mobile-only before). */
.summary__refer-note { margin-bottom: 16px !important; }

/* 2026-07-03: full-width freelancer landing hero (option 1). On the freelancer
   landing (step 0) the empty summary sidebar is hidden so the intro hero uses the
   full page width, letting the 16:9 video and the job-posting block sit side by side
   at a matched, shorter height. The sidebar returns as soon as a door is picked. */
.calc__grid--fl-landing { grid-template-columns: 1fr !important; }
.calc__grid--fl-landing > .summary-wrap { display: none !important; }