/* ═══════════════════════════════════════════════════════════════
   Outfonts Theme — single-product.css  v3
   ═══════════════════════════════════════════════════════════════ */

/* ─── Base ───────────────────────────────────────────────────── */
.sp-page { font-family: var(--ac-font); background: #fff; color: var(--ac-text); margin: 0; }
.sp-page * { box-sizing: border-box; }

/* ─── Visually hidden (screen-reader only) ───────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ─── Skip link ──────────────────────────────────────────────── */
.sp-skip-link {
  position: absolute; top: -100%; left: 16px;
  background: var(--ac-accent); color: #fff;
  padding: 10px 20px; font-size: 13px; font-weight: 700;
  text-decoration: none; z-index: 10000;
  transition: top .15s;
}
.sp-skip-link:focus { top: 8px; }

/* ─── Focus states (keyboard nav) ───────────────────────────── */
.sp-page *:focus-visible {
  outline: 2px solid var(--ac-accent);
  outline-offset: 2px;
}

/* ─── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sp-page *, .sp-page *::before, .sp-page *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}
.sp-wrap { max-width: 1380px; margin: 0 auto; padding: 0 48px; }

/* ─── NAV ────────────────────────────────────────────────────── */
.sp-nav {
  position: sticky; top: 0; z-index: 999;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s;
}
.sp-nav--shadow { border-bottom-color: #ebebeb; box-shadow: 0 1px 20px rgba(0,0,0,.05); }
.sp-nav-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; height: 72px; gap: 24px; }
.sp-nav-left { display: flex; align-items: center; gap: 32px; justify-content: center; }
.sp-nav-left a { font-size: 13.5px; font-weight: 600; color: var(--ac-text-2) !important; text-decoration: none !important; transition: color .2s; cursor: pointer; position: relative; }
.sp-nav-left a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--ac-accent); transform: scaleX(0); transform-origin: center; transition: transform .25s cubic-bezier(.22,.61,.36,1); }
.sp-nav-left a:hover { color: var(--ac-text) !important; }
.sp-nav-left a:hover::after { transform: scaleX(1); }
.sp-nav-logo { display: flex; align-items: center; gap: 10px; color: var(--ac-text) !important; text-decoration: none !important; cursor: pointer; justify-self: start; }
.sp-nav-logo-mark { width: 32px; height: 32px; flex-shrink: 0; background: var(--ac-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 900; border-radius: 8px; font-family: Georgia, serif; line-height: 1; }
.sp-nav-logo-text { font-size: 15px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.sp-nav-right { display: flex; align-items: center; gap: 20px; justify-content: flex-end; }
.sp-nav-search { display: flex; align-items: center; gap: 8px; background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: 0; padding: 8px 14px; cursor: text; transition: border-color .2s, box-shadow .2s; }
.sp-nav-search:hover { border-color: #cccccc; }
.sp-nav-search:focus-within { border-color: var(--ac-accent); box-shadow: 0 0 0 3px rgba(15,15,26,.08); }
.sp-nav-search input { background: transparent; border: none; outline: none; font-size: 13px; color: var(--ac-text); font-family: var(--ac-font); width: 140px; }
.sp-nav-search input::placeholder { color: var(--ac-text-3); }
.sp-nav-icon { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; color: var(--ac-text-2) !important; text-decoration: none !important; transition: color .2s; cursor: pointer; }
.sp-nav-icon:hover { color: var(--ac-text) !important; }
.sp-nav-cart-count { background: var(--ac-accent); color: #fff; font-size: 9px; font-weight: 700; width: 16px; height: 16px; border-radius: 0; display: flex; align-items: center; justify-content: center; }

/* ─── Breadcrumb ─────────────────────────────────────────────── */
.sp-breadcrumb { padding: 18px 0; }
.sp-breadcrumb ul { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.sp-breadcrumb a { font-size: 12px; color: var(--ac-text-3) !important; text-decoration: none !important; transition: color .2s; }
.sp-breadcrumb a:hover { color: var(--ac-text) !important; }
.sp-breadcrumb li:last-child span { font-size: 12px; color: var(--ac-text-2); }
.sp-breadcrumb-sep { color: #ddd; font-size: 11px; }

/* ─── HERO ───────────────────────────────────────────────────── */
.sp-hero { padding: 80px 0 88px; border-bottom: 1px solid var(--ac-border); }
.sp-hero-inner { display: grid; grid-template-columns: 1fr auto; align-items: flex-end; gap: 80px; }
.sp-title { font-size: clamp(44px, 6vw, 80px); font-weight: 900; color: var(--ac-text); line-height: .98; letter-spacing: -.05em; margin: 0 0 12px; }
.sp-subtitle { font-size: 14px; color: var(--ac-text-3); font-weight: 400; margin: 0 0 18px; }
.sp-tags { display: flex; align-items: center; gap: 0; font-size: 12.5px; color: var(--ac-text-3); }
.sp-tags span { display: flex; align-items: center; gap: 7px; }
.sp-tags span + span::before { content: '•'; margin-right: 7px; color: #ddd; }
.sp-hero-right { display: flex; flex-direction: column; gap: 12px; align-items: stretch; flex-shrink: 0; min-width: 200px; padding-bottom: 2px; }
.sp-btn-buy { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--ac-accent); color: #fff !important; font-size: 16px; font-weight: 700; font-family: var(--ac-font); padding: 19px 40px; border-radius: 0; text-decoration: none !important; border: none; cursor: pointer; transition: background .2s, transform .18s, box-shadow .2s; box-shadow: 0 6px 22px rgba(15,15,26,.28); letter-spacing: -.01em; }
.sp-btn-buy svg { width: 19px; height: 19px; }
.sp-btn-buy:hover { background: var(--ac-accent-dark); transform: translateY(-2px); box-shadow: 0 10px 32px rgba(15,15,26,.38); }
.sp-btn-buy:active { transform: translateY(0); box-shadow: 0 2px 10px rgba(15,15,26,.2); }

/* ═══════════════════════════════════════════════════════════════
   IMAGE SLIDER — full focus, autoplay, big
   ═══════════════════════════════════════════════════════════════ */
/* ── Slider — white bg, no shadow, full width, 2-3 cards visible */
.sp-slider-section {
  background: #fff;
  position: relative;
  border-top: 1px solid var(--ac-border);
  border-bottom: 1px solid var(--ac-border);
  overflow: hidden;
  padding: 32px 0 24px;
}

/* Viewport */
.sp-slider-viewport { overflow: hidden; width: 100%; }

/* Track — left-padded so card 0 starts at 48px */
.sp-slider-track {
  display: flex; gap: 16px;
  transition: transform .55s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
  padding-left: 48px;
}

/* Cards — height is fixed, width follows the image's own ratio.
   Product art ships in two shapes (1160×772 and 1440×720). Locking the
   height keeps the row level, and --sp-ar (set per card in PHP from the
   real file dimensions) gives each image its full width instead of
   cropping the 2:1 art down to 3:2 — that was cutting ~25% off it.

   At the 386px ceiling: 3:2 → 580px wide, 2:1 → 772px wide. */
.sp-slide-card {
  flex: 0 0 auto;
  height: clamp(200px, 26vw, 386px);
  aspect-ratio: var(--sp-ar, 1160 / 772);
  width: auto;
  border-radius: 0;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  /* NO box-shadow, NO card shadow */
  transition: opacity .4s ease, transform .4s ease;
}
.sp-slide-card img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block; transition: transform .5s ease;
}
.sp-slide-card:hover img { transform: scale(1.025); }
/* Keep every piece of product artwork fully visible. The active class still
   drives slider navigation, but it no longer dims the neighbouring slides. */
.sp-slide-card.active,
.sp-slide-card:not(.active),
.sp-slide-card:not(.active):hover { opacity: 1; transform: none; }

/* Placeholder */
.sp-slide-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg,#1a1a2e,#0d0d1f);
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px;
}
.sp-slide-placeholder-text { font-size: clamp(48px,8vw,120px); font-weight: 900; color: rgba(255,255,255,.07); letter-spacing: -.05em; }
.sp-slide-placeholder-label { font-size: 10px; font-weight: 700; letter-spacing: .16em; color: rgba(255,255,255,.22); text-transform: uppercase; }

/* Arrows — indigo filled, prominent */
.sp-slider-arrow {
  position: absolute; top: calc(50% - 14px); transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 0; z-index: 10;
  background: var(--ac-accent); border: none;
  box-shadow: 0 4px 16px rgba(15,15,26,.4);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #fff; font-size: 17px;
  transition: background .2s, transform .2s, box-shadow .2s;
}
.sp-slider-arrow:hover { background: var(--ac-accent-dark); transform: translateY(-50%) scale(1.1); box-shadow: 0 6px 24px rgba(15,15,26,.5); }
.sp-slider-arrow--prev { left: 16px; }
.sp-slider-arrow--next { right: 16px; }

/* Dots */
.sp-slider-nav { display: flex; justify-content: center; gap: 6px; margin-top: 20px; }
.sp-slider-dot {
  width: 24px; height: 24px; border-radius: 0;
  background: transparent; border: none; padding: 0; cursor: pointer;
  transition: all .25s; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.sp-slider-dot::after {
  content: ''; display: block; width: 6px; height: 6px;
  background: #ccc; border-radius: 0; transition: all .25s;
}
.sp-slider-dot.active::after { background: var(--ac-accent); width: 22px; }

/* ═══════════════════════════════════════════════════════════════
   TYPE TESTER — modern toolbar
   ═══════════════════════════════════════════════════════════════ */
.sp-body { display: grid; grid-template-columns: 1fr 400px; gap: 0; padding: 64px 0; align-items: start; border-bottom: 1px solid var(--ac-border); }
.sp-tester { padding-right: 56px; border-right: 1px solid var(--ac-border); }
.sp-section-label { font-size: 10.5px; font-weight: 700; color: var(--ac-accent); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 20px; display: flex; align-items: center; gap: 8px; }
.sp-section-label::before { content: ''; display: inline-block; width: 18px; height: 2px; background: var(--ac-accent); flex-shrink: 0; }

/* Toolbar — pill floating style */
.sp-toolbar {
  display: flex; align-items: center; gap: 0;
  background: var(--ac-surface); border: 1px solid var(--ac-border);
  border-radius: 0; overflow: hidden;
  margin-bottom: 40px;
}
.sp-toolbar-input-wrap { flex: 1; padding: 0 18px; }
.sp-toolbar-input {
  width: 100%; background: transparent; border: none; outline: none;
  font-size: 13.5px; color: var(--ac-text); font-family: var(--ac-font);
  padding: 14px 0; min-width: 0;
}
.sp-toolbar-input::placeholder { color: var(--ac-text-3); }
.sp-toolbar-sep { width: 1px; height: 32px; background: var(--ac-border); flex-shrink: 0; }

.sp-toolbar-group { display: flex; align-items: center; gap: 0; flex-shrink: 0; padding: 0 16px; height: 52px; }
.sp-toolbar-group + .sp-toolbar-sep { }

.sp-size-label { font-size: 11px; font-weight: 800; color: var(--ac-text-2); margin-right: 10px; }
.sp-size-slider {
  -webkit-appearance: none; appearance: none; width: 88px; height: 2px;
  background: var(--ac-border); border-radius: 0; outline: none; margin-right: 10px;
  cursor: pointer;
}
.sp-size-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 0;
  background: var(--ac-accent); cursor: pointer;
  border: 2.5px solid #fff; box-shadow: 0 0 0 1px var(--ac-accent), 0 2px 6px rgba(15,15,26,.35);
  transition: transform .15s;
}
.sp-size-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.sp-size-val { font-size: 11px; color: var(--ac-text-3); min-width: 30px; text-align: right; font-variant-numeric: tabular-nums; }

.sp-color-btn {
  width: 22px; height: 22px; border-radius: 0; border: 2px solid #e0e0e0;
  cursor: pointer; padding: 0; overflow: hidden; flex-shrink: 0; margin-left: 2px;
  position: relative; transition: border-color .2s;
}
.sp-color-btn:hover { border-color: var(--ac-text-2); }
.sp-color-btn input[type="color"] { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); border: none; cursor: pointer; opacity: 0; }
.sp-color-swatch { position: absolute; inset: 0; border-radius: 0; pointer-events: none; }

.sp-reset-btn { background: none; border: none; cursor: pointer; padding: 6px; color: var(--ac-text-3); display: flex; align-items: center; transition: color .2s, transform .3s; margin-left: 4px; }
.sp-reset-btn:hover { color: var(--ac-text); transform: rotate(-180deg); }

/* Weight test rows */
.sp-wt-rows { display: flex; flex-direction: column; }
.sp-wt-row {
  display: flex; flex-direction: column; gap: 6px; padding: 16px 0;
  border-bottom: 1px solid #f3f3f5;
  transition: background .15s;
}
.sp-wt-row:hover { background: var(--ac-surface); margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
.sp-wt-row:last-child { border-bottom: none; }
.sp-wt-row.sp-wt-hidden { display: none; }
.sp-wt-name { font-size: 10px; color: var(--ac-text-3); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; order: -1; }
.sp-wt-preview { font-size: 13px; color: var(--ac-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: font-size .15s, color .15s; line-height: 1.5; }

/* ─── Tester tabs ───────────────────────────────────────────── */
.sp-tabs { display: flex; gap: 4px; margin-bottom: 24px; border-bottom: 1.5px solid var(--ac-border); }
.sp-tab {
  appearance: none; background: none; border: none; cursor: pointer;
  font-family: var(--ac-font); font-size: 13px; font-weight: 700; color: var(--ac-text-3);
  padding: 10px 16px; position: relative; transition: color .18s; letter-spacing: .01em;
}
.sp-tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1.5px; height: 2px; background: var(--ac-accent); transform: scaleX(0); transition: transform .2s; }
.sp-tab:hover { color: var(--ac-text-2); }
.sp-tab.is-active { color: var(--ac-text); }
.sp-tab.is-active::after { transform: scaleX(1); }
.sp-tabpanel { animation: sp-fadein .25s ease; }
.sp-tabpanel[hidden] { display: none; }
@keyframes sp-fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Shared font picker for glyph + showcase */
.sp-fontpick-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.sp-fontpick-wrap label { font-size: 11px; font-weight: 700; color: var(--ac-text-3); text-transform: uppercase; letter-spacing: .06em; }
.sp-select { position: relative; display: inline-flex; align-items: center; }
.sp-select select { appearance: none; font-family: var(--ac-font); font-size: 13px; font-weight: 600; color: var(--ac-text); background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: 8px; padding: 8px 34px 8px 12px; cursor: pointer; }
.sp-select svg { position: absolute; right: 11px; pointer-events: none; color: var(--ac-text-3); }

/* ─── Glyph grid ────────────────────────────────────────────── */
.sp-glyph-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 16px; flex-wrap: wrap; }
.sp-glyph-count { font-size: 11.5px; font-weight: 600; color: var(--ac-text-3); }
.sp-glyph-size { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; color: var(--ac-text-3); text-transform: uppercase; letter-spacing: .05em; }
.sp-glyph-size input[type=range] { width: 140px; accent-color: var(--ac-accent); }
.sp-glyph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.sp-glyph-cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--ac-border); border-radius: 10px; background: #fff;
  color: var(--ac-text); transition: background .15s, border-color .15s, transform .15s; cursor: default; overflow: hidden;
}
.sp-glyph-cell:hover { background: var(--ac-accent); border-color: var(--ac-accent); transform: translateY(-2px); }
.sp-glyph-cell:hover .sp-glyph-char { color: #fff; }
.sp-glyph-char { font-size: 44px; line-height: 1; }

/* View more toggle */
.sp-wt-more {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 20px; padding: 12px;
  border: 1.5px solid var(--ac-border); border-radius: 0;
  background: none; cursor: pointer; width: 100%;
  font-size: 11.5px; font-weight: 700; color: var(--ac-text-2);
  font-family: var(--ac-font); transition: border-color .2s, color .2s, background .2s;
  letter-spacing: .02em;
}
.sp-wt-more:hover { border-color: var(--ac-accent); color: var(--ac-accent); background: var(--ac-accent-lite); }

/* ─── Tester skeleton loader ─────────────────────────────────── */
@keyframes sp-skel-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.sp-tester-skeleton {
  display: flex; flex-direction: column;
}
.sp-skel-row {
  display: flex; align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--ac-border, rgba(20,20,20,.07));
  gap: 16px;
  animation: sp-skel-fade 0.4s ease both;
}
@keyframes sp-skel-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sp-skel-name,
.sp-skel-preview {
  display: block; border-radius: 6px; height: 14px;
  background: linear-gradient(90deg, #ebebeb 25%, #f5f5f5 50%, #ebebeb 75%);
  background-size: 800px 100%;
  animation: sp-skel-shimmer 1.6s ease-in-out infinite;
}
.sp-skel-name  { width: 68px; flex-shrink: 0; height: 10px; border-radius: 4px; }
.sp-skel-preview { flex: 1; height: 22px; }
.sp-skel-row:nth-child(1) .sp-skel-preview { animation-delay: 0s; }
.sp-skel-row:nth-child(2) .sp-skel-preview { animation-delay: .08s; }
.sp-skel-row:nth-child(3) .sp-skel-preview { animation-delay: .16s; }
.sp-skel-row:nth-child(4) .sp-skel-preview { animation-delay: .24s; }
.sp-skel-row:nth-child(5) .sp-skel-preview { animation-delay: .32s; }

/* ─── Sidebar ────────────────────────────────────────────────── */
.sp-sidebar { padding-left: 44px; position: sticky; top: 88px; }

/* Sidebar card wrapper — premium elevated */
.sp-sidebar-card {
  background: #fff;
  border: 1.5px solid var(--ac-border);
  border-radius: 0;
  padding: 28px 26px;
  margin-bottom: 0;
  box-shadow: 0 2px 24px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.04);
  position: relative;
  overflow: hidden;
}
.sp-sidebar-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--ac-accent);
}

.sp-sidebar-head { font-size: 18px; font-weight: 900; color: var(--ac-text); line-height: 1.2; letter-spacing: -.04em; margin: 0 0 22px; }
.sp-sidebar-head em { color: var(--ac-accent); font-style: normal; }

.sp-benefits { list-style: none; margin: 0 0 26px; padding: 0; }
.sp-benefit { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--ac-border); font-size: 13px; color: var(--ac-text-2); font-weight: 500; line-height: 1.5; transition: color .2s; }
.sp-benefit:hover { color: var(--ac-text); }
.sp-benefit:last-child { border-bottom: none; }
.sp-benefit-icon { width: 32px; height: 32px; border-radius: 0; background: var(--ac-accent-lite); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--ac-accent); }

/* CTA — large, prominent */
.sp-sidebar-price {
  display: flex; align-items: baseline; gap: 6px;
  margin-bottom: 16px;
}
.sp-sidebar-price strong { font-size: 34px; font-weight: 900; color: var(--ac-text); letter-spacing: -.05em; }
.sp-sidebar-price span { font-size: 13px; color: var(--ac-text-3); }
.sp-sidebar-price-note { font-size: 11.5px; color: var(--ac-text-3); margin-bottom: 16px; margin-top: -10px; }

.sp-sidebar-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--ac-accent);
  color: #fff !important;
  font-size: 16px; font-weight: 800; font-family: var(--ac-font);
  padding: 19px 24px; border-radius: 0; width: 100%;
  text-decoration: none !important; text-align: center;
  transition: background .2s, transform .15s, box-shadow .2s;
  border: none; cursor: pointer;
  box-shadow: 0 6px 24px rgba(15,15,26,.3);
  margin-bottom: 12px; letter-spacing: -.01em;
}
.sp-sidebar-cta:hover { background: var(--ac-accent-dark); transform: translateY(-2px); box-shadow: 0 10px 32px rgba(15,15,26,.4); }
.sp-sidebar-cta:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(15,15,26,.25); }
.sp-sidebar-cta svg { flex-shrink: 0; }

.sp-trusted { text-align: center; font-size: 11px; color: var(--ac-text-3); margin-bottom: 14px; letter-spacing: .02em; }

/* Payment icons — bigger, clean */
.sp-payment-row { display: flex; align-items: center; justify-content: center; gap: 8px; }
.sp-pay {
  height: 32px; padding: 0 14px; border-radius: 0;
  border: 1.5px solid var(--ac-border); background: #fff;
  display: flex; align-items: center; justify-content: center;
  gap: 4px; flex-shrink: 0;
  font-family: var(--ac-font); font-weight: 900; font-size: 11px;
  letter-spacing: .02em;
}
.sp-pay--visa   { color: #1a1f71; font-style: italic; font-size: 14px; font-weight: 900; min-width: 52px; }
.sp-pay--mc     { min-width: 48px; padding: 0 10px; }
.sp-pay--paypal { color: #003087; font-size: 11px; }
.sp-pay--paypal span { color: #009cde; }

/* ═══════════════════════════════════════════════════════════════
   ABOUT
   ═══════════════════════════════════════════════════════════════ */
.sp-about { padding: 64px 0; border-bottom: 1px solid var(--ac-border); }
.sp-about-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.sp-about-left h3 { font-size: 15px; font-weight: 800; color: var(--ac-text); margin: 0 0 12px; letter-spacing: -.01em; }
.sp-about-left p { font-size: 13.5px; color: var(--ac-text-2); line-height: 1.8; margin: 0 0 20px; }
.sp-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sp-checklist li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ac-text-2); }
.sp-checklist li::before { content: ''; width: 16px; height: 16px; flex-shrink: 0; border-radius: 0; background: var(--ac-accent-lite); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 24 24' fill='none' stroke='%230f0f1a' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 9px; }

.sp-meta-table { display: flex; flex-direction: column; }
.sp-meta-row { display: grid; grid-template-columns: 140px 1fr; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--ac-border); gap: 16px; transition: background .15s; }
.sp-meta-row:hover { background: var(--ac-surface); margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
.sp-meta-row:first-child { border-top: 1px solid var(--ac-border); }
.sp-meta-label { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ac-text-3); font-weight: 500; }
.sp-meta-val { font-size: 13px; color: var(--ac-text); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   LICENSE SUMMARY — informative
   ═══════════════════════════════════════════════════════════════ */
.sp-lic-summary { padding: 64px 0; border-bottom: 1px solid var(--ac-border); }

.sp-lic-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; }
.sp-lic-header-left {}
.sp-lic-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--ac-accent); text-transform: uppercase; margin-bottom: 6px; }
.sp-lic-header h2 { font-size: clamp(22px,2.5vw,32px); font-weight: 900; color: var(--ac-text); margin: 0; letter-spacing: -.03em; }
.sp-lic-header-sub { font-size: 13px; color: var(--ac-text-3); margin-top: 6px; }
.sp-lic-more { font-size: 13px; color: var(--ac-accent) !important; font-weight: 600; text-decoration: none !important; flex-shrink: 0; transition: opacity .2s; }
.sp-lic-more:hover { opacity: .7; }

/* License cards grid */
.sp-lic-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; margin-bottom: 40px; border: 1px solid var(--ac-border); }
.sp-lic-card {
  border-right: 1px solid var(--ac-border); border-radius: 0;
  padding: 32px 24px 28px; cursor: pointer;
  background: #fff; position: relative;
  display: flex; flex-direction: column;
  transition: background .2s, box-shadow .2s;
}
.sp-lic-card:hover { background: var(--ac-surface); }
.sp-lic-card:last-child { border-right: none; }
.sp-lic-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--ac-accent); opacity: .4; transition: opacity .2s;
}
.sp-lic-card:hover::before { opacity: 1; }

.sp-lic-card-icon {
  width: 40px; height: 40px; border-radius: 0;
  background: var(--ac-accent-lite);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px; color: var(--ac-accent);
}
.sp-lic-card-badge {
  display: inline-flex; align-items: center; align-self: flex-start;
  font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ac-accent); background: var(--ac-accent-lite);
  border: 1px solid rgba(15,15,26,.2);
  padding: 3px 9px; border-radius: 0; margin-bottom: 14px;
}
.sp-lic-card-name { font-size: 15px; font-weight: 800; color: var(--ac-text); margin-bottom: 8px; letter-spacing: -.02em; }
.sp-lic-card-desc { font-size: 12px; color: var(--ac-text-3); line-height: 1.7; margin-bottom: 24px; flex-grow: 1; }
.sp-lic-card-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--ac-border); padding-top: 18px; margin-top: auto; }
.sp-lic-card-item {
  display: flex; align-items: center; gap: 9px;
  font-size: 12px; color: var(--ac-text-2); line-height: 1.4;
}
.sp-lic-card-item-check {
  width: 16px; height: 16px; flex-shrink: 0;
  color: var(--ac-accent);
}

/* Comparison table */
.sp-lic-compare { border: 1px solid var(--ac-border); overflow-x: auto; margin-top: 8px; }
.sp-lic-compare-inner { min-width: 640px; }
.sp-lic-compare-head {
  display: grid; grid-template-columns: 1fr repeat(4,130px);
  background: var(--ac-accent-lite); border-bottom: 2px solid rgba(15,15,26,.15); gap: 0;
}
.sp-lic-compare-head > * {
  font-size: 10px; font-weight: 800; color: var(--ac-text-2);
  text-align: center; text-transform: uppercase; letter-spacing: .12em;
  padding: 18px 12px;
}
.sp-lic-compare-feat { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ac-text); padding-left: 28px; text-align: left; }
.sp-lic-compare-feat svg { color: var(--ac-accent); }
.sp-lic-compare-head-col { display: flex; flex-direction: column; align-items: center; gap: 6px; border-left: 1px solid rgba(15,15,26,.1); }
.sp-lic-compare-head-col svg { color: var(--ac-accent); }
.sp-lic-compare-head-col span { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ac-accent); }
.sp-lic-row {
  display: grid; grid-template-columns: 1fr repeat(4,130px);
  border-bottom: 1px solid var(--ac-border); gap: 0; align-items: stretch;
}
.sp-lic-row:last-child { border-bottom: none; }
.sp-lic-row:nth-child(even) { background: var(--ac-surface); }
.sp-lic-row:hover { background: var(--ac-accent-lite); }
.sp-lic-row-label { font-size: 13px; color: var(--ac-text); font-weight: 500; padding: 18px 20px 18px 28px; }
.sp-lic-row-title { display: block; }
.sp-lic-row-sub { display: block; font-size: 11px; color: var(--ac-text-3); margin-top: 2px; }
.sp-lic-cell { display: flex; align-items: center; justify-content: center; padding: 18px 10px; border-left: 1px solid var(--ac-border); }
.sp-check { color: var(--ac-accent); display: flex; align-items: center; justify-content: center; }
.sp-dash { color: #d4d4d4; font-size: 18px; line-height: 1; font-weight: 300; }

/* ─── SIMILAR ────────────────────────────────────────────────── */
.sp-similar { padding: 56px 0; border-bottom: 1px solid var(--ac-border); }
.sp-similar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.sp-similar-head h2 { font-size: 17px; font-weight: 800; color: var(--ac-text); margin: 0; letter-spacing: -.02em; }
.sp-similar-view { font-size: 12px; color: var(--ac-accent) !important; font-weight: 600; text-decoration: none !important; transition: opacity .2s; }
.sp-similar-view:hover { opacity: .7; }
.sp-similar-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 18px; }
.sp-sim-card { background: #fff; border: 1px solid var(--ac-border); border-radius: 14px; overflow: hidden; text-decoration: none !important; color: inherit !important; transition: transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s, border-color .22s; display: flex; flex-direction: column; cursor: pointer; }
.sp-sim-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(15,15,26,.10); border-color: rgba(15,15,26,.18); }
.sp-sim-card:hover .sp-sim-name { color: var(--ac-accent); }
.sp-sim-thumb { aspect-ratio: 4 / 3; background: var(--ac-surface); overflow: hidden; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--ac-border); }
.sp-sim-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.sp-sim-card:hover .sp-sim-thumb img { transform: scale(1.04); }
.sp-sim-thumb-ph { font-size: 30px; font-weight: 900; color: var(--ac-text-3); letter-spacing: .04em; }
.sp-sim-body { padding: 16px 16px 18px; display: flex; flex-direction: column; flex: 1; }
.sp-sim-name { font-size: 15px; font-weight: 800; color: var(--ac-text); letter-spacing: -.02em; margin-bottom: 3px; transition: color .2s; }
.sp-sim-styles { font-size: 11px; color: var(--ac-text-3); margin-bottom: 10px; }
.sp-sim-price { font-size: 12px; color: var(--ac-text-2); font-weight: 500; margin-top: auto; }

/* ─── FOOTER ─────────────────────────────────────────────────── */
.sp-footer { background: #0a0a0a; padding: 60px 0 0; }
.sp-footer-top { display: grid; grid-template-columns: 200px 1fr; gap: 80px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.07); }
.sp-footer-brand-name { font-size: 13px; font-weight: 900; letter-spacing: .12em; color: #fff; text-transform: uppercase; display: block; margin-bottom: 6px; }
.sp-footer-brand-sub { font-size: 11.5px; color: rgba(255,255,255,.55); line-height: 1.6; display: block; margin-bottom: 18px; }
.sp-footer-social { display: flex; gap: 8px; }
.sp-footer-social a { width: 30px; height: 30px; border-radius: 0; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.65) !important; text-decoration: none !important; transition: all .2s; }
.sp-footer-social a:hover { background: var(--ac-accent); border-color: var(--ac-accent); color: #fff !important; }
.sp-footer-cols { display: grid; grid-template-columns: repeat(5,1fr); gap: 20px; }
.sp-footer-cols-legacy { display:none !important; }
.sp-footer-cols .ac-footer-menu { min-width:0; }
.sp-footer-cols .ac-footer-menu-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.sp-footer-cols .ac-footer-menu-list a { font-size:12px; color:rgba(255,255,255,.6) !important; text-decoration:none !important; }
.sp-footer-cols .ac-footer-menu-list a:hover { color:#fff !important; }
.sp-footer-cols .ac-footer-menu h5 { font-size:10px; font-weight:700; letter-spacing:.12em; color:rgba(255,255,255,.5); margin:0 0 14px; text-transform:uppercase; }
.sp-footer-bottom .sp-footer-legal { display:none; }
.sp-footer-cols h5 { font-size: 10px; font-weight: 700; letter-spacing: .12em; color: rgba(255,255,255,.5); margin: 0 0 14px; text-transform: uppercase; }
.sp-footer-cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sp-footer-cols a { font-size: 12px; color: rgba(255,255,255,.6) !important; text-decoration: none !important; transition: color .2s; }
.sp-footer-cols a:hover { color: #fff !important; }
.sp-footer-bottom { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; }
.sp-footer-copy { font-size: 11px; color: rgba(255,255,255,.45); }
.sp-footer-legal { display: flex; gap: 20px; }
.sp-footer-legal a { font-size: 11px; color: rgba(255,255,255,.5) !important; text-decoration: none !important; transition: color .2s; }
.sp-footer-legal a:hover { color: rgba(255,255,255,.85) !important; }

/* ─── License Card Top ───────────────────────────────────────── */
.sp-lic-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.sp-lic-card-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--ac-accent-lite); color: var(--ac-accent); border-radius: 0; }
.sp-lic-card-badge { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; background: var(--ac-accent); color: #fff; border-radius: 0; }

/* ─── License Row Title + Sub ────────────────────────────────── */
.sp-lic-row-title { font-size: 13px; font-weight: 600; color: var(--ac-text); line-height: 1.3; }
.sp-lic-row-sub { font-size: 11px; color: var(--ac-text-3); margin-top: 2px; line-height: 1.4; }

/* ─── License Compare Text Cell ─────────────────────────────── */
.sp-text { font-size: 12px; font-weight: 600; color: var(--ac-text); text-align: center; }

/* ─── Trust Bar ──────────────────────────────────────────────── */
.sp-lic-trust { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; margin-top: 40px; border: 1px solid var(--ac-border); }
.sp-lic-trust-badge { display: flex; align-items: flex-start; gap: 14px; padding: 28px 28px; border-right: 1px solid var(--ac-border); }
.sp-lic-trust-badge:last-child { border-right: none; }
.sp-lic-trust-badge-icon { width: 40px; height: 40px; flex-shrink: 0; background: var(--ac-accent-lite); display: flex; align-items: center; justify-content: center; color: var(--ac-accent); }
.sp-lic-trust-badge-text strong { display: block; font-size: 13.5px; font-weight: 800; color: var(--ac-text); letter-spacing: -.01em; margin-bottom: 4px; }
.sp-lic-trust-badge-text p { margin: 0; font-size: 12px; color: var(--ac-text-3); line-height: 1.6; }

/* ─── Popup ──────────────────────────────────────────────────── */
.sp-popup-overlay { position: fixed; inset: 0; background: rgba(10,10,20,.55); backdrop-filter: blur(4px); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity .22s; }
.sp-popup-overlay.sp-popup-open { opacity: 1; pointer-events: all; }
.sp-popup { background: #fff; width: 100%; max-width: 920px; max-height: 92vh; position: relative; transform: translateY(20px); transition: transform .22s; display: flex; flex-direction: column; overflow: hidden; }
.sp-popup-overlay.sp-popup-open .sp-popup { transform: translateY(0); }

/* Head */
.sp-popup-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 28px 36px 24px; border-bottom: 1px solid var(--ac-border); flex-shrink: 0; }
.sp-popup-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ac-accent); margin-bottom: 6px; }
.sp-popup-head h2 { margin: 0 0 5px; font-size: 22px; font-weight: 900; color: var(--ac-text); letter-spacing: -.03em; line-height: 1.1; }
.sp-popup-head p { margin: 0; font-size: 13px; color: var(--ac-text-2); line-height: 1.5; }
.sp-popup-close { flex-shrink: 0; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: var(--ac-surface); border: 1px solid var(--ac-border); cursor: pointer; color: var(--ac-text-2); transition: all .15s; }
.sp-popup-close:hover { background: var(--ac-surface-2); color: var(--ac-text); }

/* Scrollable body */
.sp-popup-body { overflow-y: auto; flex: 1; }

/* Tiles */
.sp-popup-tiles { display: grid; gap: 10px; padding: 24px 36px 0; }
.sp-popup-tile { border: 2px solid var(--ac-border); padding: 16px 18px; cursor: pointer; user-select: none; transition: border-color .15s, background .15s; }
.sp-popup-tile:hover { border-color: rgba(15,15,26,.4); background: var(--ac-accent-lite); }
.sp-popup-tile.selected { border-color: var(--ac-accent); background: var(--ac-accent-lite); }
.sp-popup-tile-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sp-popup-tile-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--ac-accent); background: rgba(15,15,26,.08); }
.sp-popup-tile.selected .sp-popup-tile-icon { background: rgba(15,15,26,.15); }
.sp-popup-tile-cb { width: 20px; height: 20px; border: 2px solid var(--ac-border); background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .15s; }
.sp-popup-tile.selected .sp-popup-tile-cb { border-color: var(--ac-accent); background: var(--ac-accent); }
.sp-popup-tile-ck { display: none; color: #fff; }
.sp-popup-tile.selected .sp-popup-tile-ck { display: block; }
.sp-popup-tile-name { font-size: 14px; font-weight: 800; color: var(--ac-text); letter-spacing: -.01em; margin-bottom: 3px; }
.sp-popup-tile-desc { font-size: 11.5px; color: var(--ac-text-2); line-height: 1.5; margin-bottom: 10px; }
.sp-popup-tile-price { font-size: 15px; font-weight: 800; color: var(--ac-accent); letter-spacing: -.02em; }
.sp-popup-tile-contact { color: var(--ac-text-3) !important; font-size: 13px !important; font-weight: 600 !important; }

/* Comparison table */
.sp-popup-compare { padding: 28px 36px 0; }
.sp-popup-compare-title { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ac-text-3); margin-bottom: 14px; }
.sp-popup-compare-title svg { color: var(--ac-accent); }
.sp-popup-compare-wrap { border: 1px solid var(--ac-border); overflow: hidden; }
.sp-ptable { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sp-ptable thead tr { background: var(--ac-surface); }
.sp-ptable .sp-ptable-label-head { width: auto; padding: 14px 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ac-text-3); text-align: left; border-right: 1px solid var(--ac-border); }
.sp-ptable .sp-ptable-col-head { width: 120px; padding: 14px 10px; text-align: center; border-right: 1px solid var(--ac-border); vertical-align: middle; transition: background .15s; }
.sp-ptable .sp-ptable-col-head:last-child { border-right: none; }
.sp-ptable .sp-ptable-col-head.sp-ptable-col--active { background: var(--ac-accent-lite); }
.sp-ptable-col-icon { display: flex; justify-content: center; margin-bottom: 5px; color: var(--ac-text-2); }
.sp-ptable-col-head.sp-ptable-col--active .sp-ptable-col-icon { color: var(--ac-accent); }
.sp-ptable-col-name { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--ac-text-2); margin-bottom: 3px; }
.sp-ptable-col-head.sp-ptable-col--active .sp-ptable-col-name { color: var(--ac-accent); }
.sp-ptable-col-price { font-size: 12px; font-weight: 700; color: var(--ac-text-3); }
.sp-ptable-col-head.sp-ptable-col--active .sp-ptable-col-price { color: var(--ac-accent); font-weight: 800; }
.sp-ptable-row { border-top: 1px solid var(--ac-border); }
.sp-ptable-row:nth-child(even) { background: var(--ac-surface); }
.sp-ptable .sp-ptable-label { padding: 14px 20px; border-right: 1px solid var(--ac-border); vertical-align: middle; }
.sp-ptable-label-name { display: block; font-size: 12.5px; font-weight: 600; color: var(--ac-text); line-height: 1.3; }
.sp-ptable-label-sub { display: block; font-size: 11px; color: var(--ac-text-3); margin-top: 2px; line-height: 1.4; }
.sp-ptable-cell { text-align: center; padding: 14px 10px; vertical-align: middle; border-right: 1px solid var(--ac-border); transition: background .15s; }
.sp-ptable-cell:last-child { border-right: none; }
.sp-ptable-cell.sp-ptable-col--active { background: rgba(15,15,26,.04); }
.sp-ptable-ck { color: var(--ac-accent); }
.sp-ptable-dx .sp-ptable-dash-char { color: #cccccc; font-size: 16px; font-weight: 300; }
.sp-ptable-tx { font-size: 12px; font-weight: 600; color: var(--ac-text); }
.sp-ptable-row--text .sp-ptable-cell { background: var(--ac-surface) !important; }
.sp-ptable-row--text .sp-ptable-cell.sp-ptable-col--active { background: rgba(15,15,26,.06) !important; }

/* Trust bar */
.sp-popup-trust { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; margin: 28px 36px 0; border: 1px solid var(--ac-border); }
.sp-popup-trust-item { display: flex; align-items: flex-start; gap: 10px; padding: 16px; border-right: 1px solid var(--ac-border); }
.sp-popup-trust-item:last-child { border-right: none; }
.sp-popup-trust-item svg { flex-shrink: 0; margin-top: 1px; color: var(--ac-accent); }
.sp-popup-trust-item strong { display: block; font-size: 12px; font-weight: 700; color: var(--ac-text); margin-bottom: 2px; }
.sp-popup-trust-item span { display: block; font-size: 10.5px; color: var(--ac-text-3); line-height: 1.5; }

/* Footer CTA */
.sp-popup-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 36px; border-top: 1px solid var(--ac-border); flex-shrink: 0; background: #fff; margin-top: 24px; }
.sp-popup-footer-summary { flex: 1; }
.sp-popup-footer-selected { display: block; font-size: 12px; font-weight: 600; color: var(--ac-text-2); margin-bottom: 6px; }
.sp-popup-footer-pay { display: flex; align-items: center; gap: 6px; }
.sp-pay { display: inline-flex; align-items: center; padding: 2px 7px; border: 1px solid var(--ac-border); font-size: 10px; font-weight: 800; background: #fff; }
.sp-popup-footer-right { display: flex; align-items: center; gap: 20px; }
.sp-popup-total-wrap { text-align: right; }
.sp-popup-total-label { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--ac-text-3); font-weight: 600; }
.sp-popup-total-price { font-size: 24px; font-weight: 900; color: var(--ac-text); letter-spacing: -.04em; line-height: 1; margin-top: 2px; }
.sp-popup-cta { display: flex; align-items: center; gap: 9px; background: var(--ac-accent); color: #fff; border: none; padding: 15px 28px; font-size: 14px; font-weight: 700; cursor: pointer; letter-spacing: -.01em; transition: background .2s; white-space: nowrap; }
.sp-popup-cta:hover { background: var(--ac-accent-dark); }
.sp-popup-cta:disabled { background: #cccccc; color: #fff; cursor: not-allowed; }

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width:1024px) {
  .sp-wrap { padding: 0 28px; }
  .sp-body { grid-template-columns: 1fr; }
  .sp-tester { padding-right: 0; border-right: none; border-bottom: 1px solid var(--ac-border); padding-bottom: 48px; margin-bottom: 48px; }
  .sp-sidebar { padding-left: 0; position: static; max-width: 400px; }
  .sp-lic-cards { grid-template-columns: repeat(2,1fr); }
  .sp-similar-grid { grid-template-columns: repeat(3,1fr); }
  .sp-footer-top { grid-template-columns: 1fr; gap: 40px; }
  .sp-footer-cols { grid-template-columns: repeat(3,1fr); }
  .sp-slider-overlay { padding: 24px 32px 28px; }
  .sp-lic-compare-head, .sp-lic-row { grid-template-columns: 1fr repeat(4,90px); }
}
@media (max-width:768px) {
  .sp-hero-inner { grid-template-columns: 1fr; gap: 24px; }
  .sp-hero-right { flex-direction: row; }
  .sp-about-inner { grid-template-columns: 1fr; gap: 40px; }
  .sp-lic-cards { grid-template-columns: 1fr 1fr; }
  .sp-similar-grid { grid-template-columns: repeat(2,1fr); }
  .sp-footer-cols { grid-template-columns: repeat(2,1fr); }
  .sp-slideshow { aspect-ratio: 4/3; }
}
@media (max-width:480px) {
  .sp-wrap { padding: 0 16px; }
  .sp-title { font-size: clamp(38px,9vw,56px); }
  .sp-nav-left a:nth-child(n+3) { display: none; }
  .sp-nav-search { display: none; }
  .sp-slideshow { aspect-ratio: 1/1; }
  .sp-slider-overlay { padding: 16px 20px 20px; }
  .sp-lic-cards { grid-template-columns: 1fr; }
  .sp-similar-grid { grid-template-columns: 1fr; }
  .sp-footer-cols { grid-template-columns: 1fr 1fr; }
  .sp-footer-bottom { flex-direction: column; gap: 10px; }
  .sp-toolbar { flex-wrap: wrap; border-radius: 0; }
  .sp-glyph-grid { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }
  .sp-glyph-char { font-size: 34px; }
}

/* ═══════════════════════════════════════════════════════════════
   NAV SEARCH ICON (replaced search form)
   ═══════════════════════════════════════════════════════════════ */
.sp-nav-iconbtn {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 8px;
  color: var(--ac-text-2) !important; text-decoration: none !important;
  transition: background .2s, color .2s;
}
.sp-nav-iconbtn:hover { background: var(--ac-surface); color: var(--ac-text) !important; }

/* ═══════════════════════════════════════════════════════════════
   STAR RATING
   ═══════════════════════════════════════════════════════════════ */
.sp-stars { display: inline-flex; align-items: center; gap: 2px; line-height: 0; }
.sp-star { display: block; }
.sp-star--full  { fill: #f5a623; }
.sp-star--empty { fill: #e2e2e2; }

/* ── Hero proof row ── */
.sp-hero-proof {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  margin: 0 0 16px;
}
.sp-rating-inline {
  display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none !important; color: var(--ac-text) !important;
  font-size: 13px;
}
.sp-rating-inline strong { font-weight: 800; }
.sp-rating-inline span { color: var(--ac-text-3); text-decoration: underline; text-underline-offset: 2px; }
.sp-rating-inline:hover span { color: var(--ac-text-2); }
.sp-proof-sep { color: var(--ac-border); }
.sp-proof-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--ac-text-2);
  background: var(--ac-surface); border: 1px solid var(--ac-border);
  padding: 5px 12px; border-radius: 20px;
}
.sp-proof-pill strong { color: var(--ac-text); font-weight: 800; }
.sp-proof-pill svg { color: var(--ac-text-3); }

/* ── Sidebar rating + proof ── */
.sp-sidebar-rating {
  display: flex; align-items: center; gap: 7px;
  text-decoration: none !important; color: var(--ac-text) !important;
  font-size: 12.5px; margin-bottom: 16px;
}
.sp-sidebar-rating strong { font-weight: 800; }
.sp-sidebar-rating span { color: var(--ac-text-3); }
.sp-sidebar-proof {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--ac-text-2);
  margin: -6px 0 16px; line-height: 1.4;
}
.sp-sidebar-proof strong { color: var(--ac-text); font-weight: 700; }
.sp-sidebar-proof svg { color: var(--ac-text-3); flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════
   REVIEWS
   ═══════════════════════════════════════════════════════════════ */
/* ── Trusted By Logo Slider ──────────────────────────────────── */
.sp-clients-strip {
  padding: 48px 0;
  border-top: 1px solid var(--ac-border);
  border-bottom: 1px solid var(--ac-border);
  background: var(--ac-surface);
  overflow: hidden;
}
.sp-clients-label {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--ac-text-2);
  text-transform: uppercase;
  margin-bottom: 28px;
  padding: 0 24px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}
.sp-logo-slider {
  overflow: hidden;
  position: relative;
}
.sp-logo-slider::before,
.sp-logo-slider::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
}
.sp-logo-slider::before { left: 0;  background: linear-gradient(90deg,  var(--ac-surface), transparent); }
.sp-logo-slider::after  { right: 0; background: linear-gradient(-90deg, var(--ac-surface), transparent); }
.sp-logo-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: sp-logo-scroll 30s linear infinite;
}
.sp-logo-track:hover { animation-play-state: paused; }
@keyframes sp-logo-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.sp-logo-item {
  padding: 0 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 68px;
  font-size: 22px;
  font-weight: 800;
  color: var(--ac-text-2);
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: color .25s;
}
.sp-logo-item:hover { color: var(--ac-text); }
.sp-logo-item img {
  max-height: 56px;
  max-width: 180px;
  object-fit: contain;
  display: block;
  filter: grayscale(1);
  opacity: .5;
  transition: filter .25s, opacity .25s;
}
.sp-logo-item:hover img { filter: grayscale(0); opacity: 1; }

/* ── Reviews ─────────────────────────────────────────────────── */
.sp-reviews { padding: 64px 0; border-bottom: 1px solid var(--ac-border); }
.sp-reviews-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 36px; flex-wrap: wrap;
}
.sp-reviews-title {
  font-size: clamp(22px,2.5vw,32px); font-weight: 900;
  color: var(--ac-text); letter-spacing: -.03em; margin: 0;
}
.sp-reviews-score { display: flex; align-items: center; gap: 14px; }
.sp-reviews-score-num {
  font-size: 46px; font-weight: 900; color: var(--ac-text);
  letter-spacing: -.04em; line-height: 1;
}
.sp-reviews-score-meta { display: flex; flex-direction: column; gap: 4px; }
.sp-reviews-score-meta span { font-size: 12px; color: var(--ac-text-3); }

.sp-reviews-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 20px;
}
.sp-review {
  margin: 0; padding: 26px 26px 24px;
  border: 1px solid var(--ac-border); border-radius: 14px;
  background: #fff; display: flex; flex-direction: column;
  transition: box-shadow .25s, transform .25s, border-color .25s;
}
.sp-review:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(15,15,26,.07);
  border-color: rgba(15,15,26,.16);
}
.sp-review-text {
  margin: 14px 0 20px; font-size: 14px; line-height: 1.65;
  color: var(--ac-text); font-weight: 500;
}
.sp-review-cite { display: flex; align-items: center; gap: 11px; }
.sp-review-avatar {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%;
  background: var(--ac-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800;
}
.sp-review-who { display: flex; flex-direction: column; line-height: 1.3; }
.sp-review-who strong { font-size: 13px; font-weight: 800; color: var(--ac-text); }
.sp-review-who span { font-size: 11.5px; color: var(--ac-text-3); }
.sp-review-verified { margin-left: auto; color: #2ca15d; display: flex; }

/* ═══════════════════════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════════════════════ */
.sp-faq { padding: 80px 0; border-bottom: 1px solid var(--ac-border); }
.sp-faq-head { margin-bottom: 48px; text-align: center; }
.sp-faq-sub { font-size: 15px; color: var(--ac-text-2); margin-top: 10px; max-width: 520px; margin-left: auto; margin-right: auto; line-height: 1.6; }
.sp-faq-grid { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; }
.sp-faq-title {
  font-size: clamp(22px,2.5vw,32px); font-weight: 900;
  color: var(--ac-text); letter-spacing: -.03em; margin: 0;
}
.sp-faq-list {
  border: 1px solid var(--ac-border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--ac-bg, #fff);
}
.sp-faq-item { border-top: 1px solid var(--ac-border); }
.sp-faq-item:first-child { border-top: none; }
.sp-faq-item[open] { background: var(--ac-surface); }
.sp-faq-q {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 24px; cursor: pointer; list-style: none;
  font-size: 14.5px; font-weight: 700; color: var(--ac-text);
  letter-spacing: -.01em; transition: background .2s;
}
.sp-faq-q::-webkit-details-marker { display: none; }
.sp-faq-q:hover { background: var(--ac-surface); }
.sp-faq-q-icon {
  width: 36px; height: 36px; flex-shrink: 0;
  background: var(--ac-surface-2, #f4f4f5);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ac-accent);
  transition: background .2s;
}
.sp-faq-item[open] .sp-faq-q-icon { background: var(--ac-accent); color: #fff; }
.sp-faq-q > span { flex: 1; }
.sp-faq-chevron { flex-shrink: 0; color: var(--ac-text-3); transition: transform .25s ease; margin-left: auto; }
.sp-faq-item[open] .sp-faq-chevron { transform: rotate(180deg); }
.sp-faq-a {
  padding: 4px 24px 24px 74px;
  font-size: 13.5px; color: var(--ac-text-2); line-height: 1.75;
}
.sp-faq-a p { margin: 0; }

/* FAQ sidebar CTA */
.sp-faq-cta {
  background: var(--ac-accent);
  border-radius: 20px;
  padding: 40px 32px;
  text-align: center;
  color: #fff;
  position: sticky;
  top: 100px;
}
.sp-faq-cta-icon {
  width: 56px; height: 56px;
  background: rgba(255,255,255,.15);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
}
.sp-faq-cta h3 {
  font-size: 20px; font-weight: 800;
  letter-spacing: -.03em; margin: 0 0 10px;
  color: #fff;
}
.sp-faq-cta p {
  font-size: 13.5px; color: rgba(255,255,255,.75);
  line-height: 1.6; margin: 0 0 24px;
}
.sp-faq-cta-btn {
  display: inline-block;
  background: #fff;
  color: var(--ac-accent) !important;
  font-size: 13px; font-weight: 700;
  padding: 12px 24px;
  border-radius: 50px;
  text-decoration: none !important;
  transition: opacity .2s;
}
.sp-faq-cta-btn:hover { opacity: .9; }

@media (max-width: 960px) {
  .sp-faq-grid { grid-template-columns: 1fr; }
  .sp-faq-cta { position: static; }
}
@media (max-width: 768px) {
  .sp-reviews-grid { grid-template-columns: 1fr; }
  .sp-faq-a { padding-left: 24px; }
}

/* ═══════════════════════════════════════════════════════════════
   LICENSE WIZARD POPUP — seamless inline checkout
   ═══════════════════════════════════════════════════════════════ */
.sp-wz-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(10,10,18,.55); backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.sp-wz-overlay.is-open { opacity: 1; pointer-events: auto; }
.sp-wz {
  background: #fff; width: 100%; max-width: 620px; max-height: 92vh;
  border-radius: 20px; display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(18px) scale(.98); transition: transform .3s cubic-bezier(.22,.61,.36,1);
  box-shadow: 0 40px 90px rgba(15,15,26,.3);
  position: relative;
}
.sp-wz-overlay.is-open .sp-wz { transform: translateY(0) scale(1); }

/* Header + stepper */
.sp-wz-head { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-bottom: 1px solid var(--ac-border); }
.sp-wz-steps { flex: 1; list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 8px; }
.sp-wz-step { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ac-text-3); }
.sp-wz-step.is-done { cursor: pointer; }
.sp-wz-dot { position: relative; width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--ac-surface-2); border: 1.5px solid var(--ac-border); font-size: 11px; font-weight: 800; color: var(--ac-text-3); transition: background .3s, color .3s, border-color .3s, transform .3s; }
.sp-wz-ck { position: absolute; opacity: 0; transform: scale(.5); color: #fff; }
.sp-wz-step.is-active .sp-wz-dot { background: var(--ac-accent); color: #fff; border-color: var(--ac-accent); transform: scale(1.06); }
.sp-wz-step.is-active .sp-wz-lab { color: var(--ac-text); }
.sp-wz-step.is-done .sp-wz-dot { background: var(--ac-accent); color: #fff; border-color: var(--ac-accent); }
.sp-wz-step.is-done .sp-wz-num { opacity: 0; }
.sp-wz-step.is-done .sp-wz-ck { opacity: 1; transform: scale(1); }
.sp-wz-step.is-done .sp-wz-lab { color: var(--ac-text); }
.sp-wz-lab { white-space: nowrap; }
.sp-wz-line { flex: 1; min-width: 14px; height: 2px; background: var(--ac-border); border-radius: 2px; overflow: hidden; }
.sp-wz-line i { display: block; height: 100%; background: var(--ac-accent); transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.22,.61,.36,1); }
.sp-wz-line.is-done i { transform: scaleX(1); }
.sp-wz-close {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ac-surface);
  border: 1.5px solid var(--ac-border);
  border-radius: 10px;
  color: var(--ac-text);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.sp-wz-close svg { display: block; width: 16px; height: 16px; stroke: currentColor; }
.sp-wz-close:hover { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }

/* Body + panels */
.sp-wz-body { overflow-y: auto; flex: 1; padding: 24px 26px; }
.sp-wz-panel[hidden] { display: none; }
.sp-wz-panel--in { animation: sp-wz-slide .38s cubic-bezier(.22,.61,.36,1); }
@keyframes sp-wz-slide { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }
.sp-wz-h { font-size: 22px; font-weight: 900; letter-spacing: -.03em; margin: 0 0 6px; }
.sp-wz-sub { font-size: 13px; color: var(--ac-text-2); line-height: 1.55; margin: 0 0 20px; }

/* License cards */
.sp-wz-licenses { display: flex; flex-direction: column; gap: 10px; }
.sp-wz-lic { border: 1.5px solid var(--ac-border); border-radius: 14px; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.sp-wz-lic:hover { border-color: var(--ac-text-3); }
.sp-wz-lic.is-on { border-color: var(--ac-accent); box-shadow: 0 0 0 3px rgba(15,15,26,.06); }
.sp-wz-lic-main { display: flex; align-items: center; gap: 13px; padding: 15px 16px; cursor: pointer; }
.sp-wz-lic-ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; background: var(--ac-accent-lite); color: var(--ac-accent); display: flex; align-items: center; justify-content: center; }
.sp-wz-lic-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sp-wz-lic-name { font-size: 14.5px; font-weight: 800; color: var(--ac-text); letter-spacing: -.01em; }
.sp-wz-lic-desc { font-size: 12px; color: var(--ac-text-3); }
.sp-wz-lic-price { font-size: 13.5px; font-weight: 800; color: var(--ac-text); white-space: nowrap; }
.sp-wz-lic-cb { width: 22px; height: 22px; flex-shrink: 0; border-radius: 7px; border: 1.5px solid var(--ac-border); background: #fff; display: flex; align-items: center; justify-content: center; color: #fff; transition: background .2s, border-color .2s; }
.sp-wz-lic.is-on .sp-wz-lic-cb { background: var(--ac-accent); border-color: var(--ac-accent); }
.sp-wz-lic-cb svg { opacity: 0; transform: scale(.5); transition: opacity .2s, transform .2s; }
.sp-wz-lic.is-on .sp-wz-lic-cb svg { opacity: 1; transform: scale(1); }
.sp-wz-lic-feats { list-style: none; margin: 0; padding: 0 16px 14px 67px; display: none; flex-wrap: wrap; gap: 4px 16px; }
.sp-wz-lic.is-on .sp-wz-lic-feats { display: flex; }
.sp-wz-lic-feats li { font-size: 11.5px; color: var(--ac-text-2); position: relative; padding-left: 14px; }
.sp-wz-lic-feats li::before { content: '✓'; position: absolute; left: 0; color: var(--ac-accent); font-weight: 700; }
/* Tiers */
.sp-wz-tiers { display: flex; flex-direction: column; gap: 7px; padding: 4px 16px 16px 67px; animation: sp-wz-fade .3s ease; }
@keyframes sp-wz-fade { from { opacity: 0; } to { opacity: 1; } }
.sp-wz-tier { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border: 1.5px solid var(--ac-border); border-radius: 10px; cursor: pointer; transition: border-color .15s, background .15s; }
.sp-wz-tier:hover { border-color: var(--ac-text-3); }
.sp-wz-tier input { accent-color: var(--ac-accent); width: 15px; height: 15px; flex-shrink: 0; }
.sp-wz-tier input:checked ~ .sp-wz-tier-lab { color: var(--ac-text); }
.sp-wz-tier:has(input:checked) { border-color: var(--ac-accent); background: var(--ac-accent-lite); }
.sp-wz-tier-lab { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--ac-text-2); }
.sp-wz-tier-lab em { font-style: normal; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #fff; background: var(--ac-accent); padding: 1px 6px; border-radius: 20px; margin-left: 5px; }
.sp-wz-tier-pr { font-size: 13px; font-weight: 800; color: var(--ac-text); }

/* Info fields */
.sp-wz-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sp-wz-field { display: flex; flex-direction: column; margin-bottom: 14px; }
.sp-wz-field label { font-size: 12px; font-weight: 700; color: var(--ac-text); margin-bottom: 7px; }
.sp-wz-field input { font-family: var(--ac-font); font-size: 14px; color: var(--ac-text); background: var(--ac-surface); border: 1.5px solid var(--ac-border); border-radius: 11px; padding: 13px 15px; transition: border-color .18s, box-shadow .18s, background .18s; }
.sp-wz-field input:focus { outline: none; border-color: var(--ac-accent); box-shadow: 0 0 0 4px rgba(15,15,26,.08); background: #fff; }
.sp-wz-field input.sp-wz-invalid { border-color: #d23b3b; box-shadow: 0 0 0 4px rgba(210,59,59,.1); }

/* Mini summary */
.sp-wz-mini-card { background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: 12px; padding: 14px 16px; margin-top: 8px; }
.sp-wz-mini-row { font-size: 13px; font-weight: 600; color: var(--ac-text); padding: 4px 0; }
.sp-wz-mini-total { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--ac-border); }
.sp-wz-mini-total span { font-size: 12px; color: var(--ac-text-2); }
.sp-wz-mini-total strong { font-size: 18px; font-weight: 900; letter-spacing: -.02em; }

/* Payment */
.sp-wz-paypal { margin: 16px 0 8px; min-height: 48px; }
.sp-wz-note { font-size: 12.5px; color: var(--ac-text-2); background: var(--ac-surface); border: 1px dashed var(--ac-border); border-radius: 10px; padding: 14px; line-height: 1.5; }
.sp-wz-contact { text-align: center; padding: 18px 0; }
.sp-wz-contact p { font-size: 13px; color: var(--ac-text-2); line-height: 1.6; margin: 0 0 14px; }
.sp-wz-contact-btn { display: inline-flex; background: var(--ac-accent); color: #fff !important; text-decoration: none !important; font-size: 14px; font-weight: 700; padding: 13px 26px; border-radius: 11px; transition: background .2s, transform .15s; }
.sp-wz-contact-btn:hover { background: var(--ac-accent-dark); transform: translateY(-1px); }
.sp-wz-trust { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; }
.sp-wz-trust span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--ac-text-2); }
.sp-wz-trust svg { color: var(--ac-text-3); }
.sp-wz-err { font-size: 13px; color: #8a1f1f; background: #fbeaea; border: 1px solid #f0cccc; border-radius: 10px; padding: 11px 14px; margin-top: 12px; }

/* Complete */
.sp-wz-done { text-align: center; }
.sp-wz-done-check { width: 70px; height: 70px; margin: 6px auto 16px; border-radius: 50%; background: var(--ac-accent); color: #fff; display: flex; align-items: center; justify-content: center; animation: sp-wz-pop .5s cubic-bezier(.18,.89,.32,1.28); }
@keyframes sp-wz-pop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
.sp-wz-dl { text-align: left; margin: 18px 0; }
.sp-wz-dl-h { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ac-text-2); margin-bottom: 10px; }
.sp-wz-dl-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border: 1px solid var(--ac-border); border-radius: 10px; margin-bottom: 8px; }
.sp-wz-dl-row span { font-size: 13px; font-weight: 600; color: var(--ac-text); }
.sp-wz-dl-btn { flex-shrink: 0; background: var(--ac-accent); color: #fff !important; text-decoration: none !important; font-size: 12px; font-weight: 700; padding: 8px 16px; border-radius: 8px; }
.sp-wz-dl-btn:hover { background: var(--ac-accent-dark); }
.sp-wz-done-actions { display: flex; gap: 10px; margin-top: 20px; }
.sp-wz-btn { flex: 1; text-align: center; font-size: 13.5px; font-weight: 700; border: 1.5px solid var(--ac-border); border-radius: 11px; padding: 13px 18px; color: var(--ac-text) !important; text-decoration: none !important; transition: border-color .2s, background .2s; }
.sp-wz-btn:hover { border-color: var(--ac-text-3); background: var(--ac-surface); }
.sp-wz-btn--primary { background: var(--ac-accent); color: #fff !important; border-color: var(--ac-accent); }
.sp-wz-btn--primary:hover { background: var(--ac-accent-dark); }

/* Footer */
.sp-wz-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; border-top: 1px solid var(--ac-border); flex-shrink: 0; background: #fff; }
.sp-wz-footer[hidden] { display: none; }
.sp-wz-foot-sel { display: block; font-size: 12px; font-weight: 600; color: var(--ac-text-2); margin-bottom: 3px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-wz-foot-total { display: flex; align-items: baseline; gap: 8px; }
.sp-wz-foot-total span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ac-text-3); font-weight: 700; }
.sp-wz-foot-total strong { font-size: 22px; font-weight: 900; letter-spacing: -.03em; color: var(--ac-text); }
.sp-wz-foot-act { display: flex; align-items: center; gap: 10px; }
.sp-wz-back { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; font-family: var(--ac-font); font-size: 13px; font-weight: 700; color: var(--ac-text-2); padding: 8px; transition: color .2s, gap .2s; }
.sp-wz-back[hidden] { display: none; }
.sp-wz-back:hover { color: var(--ac-text); gap: 9px; }
.sp-wz-next { display: inline-flex; align-items: center; gap: 8px; background: var(--ac-accent); color: #fff; border: none; border-radius: 11px; font-family: var(--ac-font); font-size: 14.5px; font-weight: 700; padding: 14px 24px; cursor: pointer; letter-spacing: -.01em; box-shadow: 0 8px 22px rgba(15,15,26,.22); transition: background .2s, transform .15s, box-shadow .2s; }
.sp-wz-next:hover:not(:disabled) { background: var(--ac-accent-dark); transform: translateY(-1px); box-shadow: 0 12px 30px rgba(15,15,26,.3); }
.sp-wz-next:disabled { background: #c8c8cc; cursor: not-allowed; box-shadow: none; }
.sp-wz-next[hidden] { display: none; }

@media (max-width: 560px) {
  .sp-wz-overlay { padding: 0; }
  .sp-wz { max-width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; }
  .sp-wz-lab { display: none; }
  .sp-wz-row2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-wz, .sp-wz-panel--in, .sp-wz-done-check, .sp-wz-line i { animation: none !important; transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   WIZARD v2 — accordion, bigger popup, sublabels, richer summary
   ═══════════════════════════════════════════════════════════════ */
.sp-wz { max-width: 720px; }

/* Stepper sublabels */
.sp-wz-lab { display: flex; flex-direction: column; line-height: 1.25; }
.sp-wz-lab strong { font-size: 13px; font-weight: 800; color: inherit; letter-spacing: -.01em; }
.sp-wz-lab span { font-size: 11px; color: var(--ac-text-3); font-weight: 500; }
.sp-wz-step.is-active .sp-wz-lab strong,
.sp-wz-step.is-done .sp-wz-lab strong { color: var(--ac-text); }

/* Accordion license card */
.sp-wz-lic { border: 1.5px solid var(--ac-border); border-radius: 16px; overflow: hidden; background: #fff; transition: border-color .2s, box-shadow .2s; }
.sp-wz-lic:hover { border-color: var(--ac-text-3); }
.sp-wz-lic.is-sel { border-color: var(--ac-accent); box-shadow: 0 0 0 3px rgba(15,15,26,.06); }
.sp-wz-lic-main {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 18px 20px; background: none; border: none; cursor: pointer;
  font-family: var(--ac-font); text-align: left;
}
.sp-wz-lic-ic { width: 42px; height: 42px; flex-shrink: 0; border-radius: 11px; background: var(--ac-accent-lite); color: var(--ac-accent); display: flex; align-items: center; justify-content: center; }
.sp-wz-lic-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sp-wz-lic-name { font-size: 16px; font-weight: 800; color: var(--ac-text); letter-spacing: -.02em; }
.sp-wz-lic-desc { font-size: 12.5px; color: var(--ac-text-3); }
.sp-wz-lic-price { font-size: 14px; font-weight: 800; color: var(--ac-text); white-space: nowrap; }
.sp-wz-lic-chev { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; background: var(--ac-surface); display: flex; align-items: center; justify-content: center; color: var(--ac-text-2); }
.sp-wz-chev { transition: transform .25s ease; }
.sp-wz-lic.is-open .sp-wz-chev { transform: rotate(180deg); }

.sp-wz-lic-body { padding: 0 20px 18px; animation: sp-wz-acc .3s ease; }
.sp-wz-lic-body[hidden] { display: none; }
@keyframes sp-wz-acc { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.sp-wz-lic-intro {
  font-size: 13px; color: var(--ac-text-2); line-height: 1.6;
  margin: 0 0 14px; padding: 14px 16px;
  background: var(--ac-surface); border-radius: 11px;
}

/* Tiers with description */
.sp-wz-tiers { display: flex; flex-direction: column; gap: 9px; }
.sp-wz-tier { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px solid var(--ac-border); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.sp-wz-tier:hover { border-color: var(--ac-text-3); }
.sp-wz-tier:has(input:checked) { border-color: var(--ac-accent); background: var(--ac-accent-lite); }
.sp-wz-tier input { accent-color: var(--ac-accent); width: 17px; height: 17px; flex-shrink: 0; margin: 0; }
.sp-wz-tier-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sp-wz-tier-lab { font-size: 13.5px; font-weight: 700; color: var(--ac-text); }
.sp-wz-tier-lab em { font-style: normal; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ac-accent); background: #fff; border: 1px solid rgba(15,15,26,.18); padding: 1px 7px; border-radius: 20px; margin-left: 7px; vertical-align: 1px; }
.sp-wz-tier-desc { font-size: 11.5px; color: var(--ac-text-3); }
.sp-wz-tier-pr { font-size: 15px; font-weight: 900; color: var(--ac-text); white-space: nowrap; letter-spacing: -.02em; }

/* Feature strip */
.sp-wz-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ac-border); }
.sp-wz-strip span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ac-text-2); }
.sp-wz-strip svg { color: #1f8a4c; }

/* Enterprise sales button */
.sp-wz-sales { display: inline-flex; align-items: center; gap: 8px; width: 100%; justify-content: center; background: var(--ac-accent); color: #fff !important; text-decoration: none !important; font-size: 14px; font-weight: 700; padding: 14px 24px; border-radius: 12px; transition: background .2s, transform .15s; }
.sp-wz-sales:hover { background: var(--ac-accent-dark); transform: translateY(-1px); }

/* Richer checkout detail */
.sp-wz-mini-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--ac-border); }
.sp-wz-mini-l { display: flex; flex-direction: column; gap: 1px; }
.sp-wz-mini-l strong { font-size: 13.5px; font-weight: 800; color: var(--ac-text); }
.sp-wz-mini-l em { font-style: normal; font-size: 11.5px; color: var(--ac-text-3); }
.sp-wz-mini-p { font-size: 14px; font-weight: 800; color: var(--ac-text); white-space: nowrap; }
.sp-wz-mini-total strong { font-size: 19px; }

@media (max-width: 560px) {
  .sp-wz-lab span { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   WIZARD v3 — 3-column master/detail layout
   ═══════════════════════════════════════════════════════════════ */
.sp-wz { max-width: 1160px; }
.sp-wz-body { padding: 0; }
/* center narrow steps 2/3/4 */
.sp-wz-panel:not(.sp-wz-step1) { max-width: 480px; margin: 0 auto; padding: 28px 30px; }
.sp-wz-step1 { padding: 0; }

.sp-wz-cols { display: grid; grid-template-columns: 300px 1fr 330px; align-items: stretch; min-height: 540px; }
.sp-wz-col-left  { padding: 26px 22px; border-right: 1px solid var(--ac-border); overflow-y: auto; }
.sp-wz-col-mid   { padding: 26px 28px; overflow-y: auto; }
.sp-wz-col-right { padding: 22px; background: var(--ac-surface); border-left: 1px solid var(--ac-border); }
.sp-wz-col-left .sp-wz-h { font-size: 20px; margin-bottom: 6px; }
.sp-wz-col-left .sp-wz-sub { font-size: 12.5px; margin-bottom: 18px; }

/* LEFT list */
.sp-wz-list { display: flex; flex-direction: column; gap: 10px; }
.sp-wz-litem { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px 14px; background: #fff; border: 1.5px solid var(--ac-border); border-radius: 13px; cursor: pointer; font-family: var(--ac-font); transition: border-color .18s, box-shadow .18s, background .18s; }
.sp-wz-litem:hover { border-color: var(--ac-text-3); }
.sp-wz-litem.is-active { border-color: var(--ac-accent); background: var(--ac-accent-lite); box-shadow: 0 0 0 3px rgba(15,15,26,.05); }
.sp-wz-litem-ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; background: var(--ac-accent-lite); color: var(--ac-accent); display: flex; align-items: center; justify-content: center; }
.sp-wz-litem.is-active .sp-wz-litem-ic { background: #fff; }
.sp-wz-litem-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sp-wz-litem-name { font-size: 14px; font-weight: 800; color: var(--ac-text); letter-spacing: -.01em; display: flex; align-items: center; gap: 7px; }
.sp-wz-litem-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ac-accent); display: inline-block; }
.sp-wz-litem-desc { font-size: 11.5px; color: var(--ac-text-3); line-height: 1.4; }
.sp-wz-litem-price { font-size: 12.5px; font-weight: 800; color: var(--ac-text); white-space: nowrap; }
.sp-wz-litem-arr { color: var(--ac-text-3); flex-shrink: 0; }
.sp-wz-litem.is-sel .sp-wz-litem-arr { color: var(--ac-accent); }

/* MIDDLE detail */
.sp-wz-col-mid { border-radius: 0; }
.sp-wz-det-head { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--ac-border); margin-bottom: 18px; }
.sp-wz-det-ic { width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; background: var(--ac-accent-lite); color: var(--ac-accent); display: flex; align-items: center; justify-content: center; }
.sp-wz-det-name { font-size: 21px; font-weight: 900; letter-spacing: -.03em; margin: 0 0 2px; }
.sp-wz-det-desc { font-size: 13px; color: var(--ac-text-3); margin: 0; }
.sp-wz-det-intro { font-size: 14px; color: var(--ac-text-2); line-height: 1.6; margin: 0 0 22px; }
.sp-wz-det-optlabel, .sp-wz-det-getlabel { font-size: 13px; font-weight: 800; color: var(--ac-text); margin: 22px 0 12px; letter-spacing: -.01em; }
.sp-wz-det-optlabel:first-child { margin-top: 0; }

/* Options (check toggles) */
.sp-wz-opts { display: flex; flex-direction: column; gap: 10px; }
.sp-wz-opt { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 15px 18px; background: #fff; border: 1.5px solid var(--ac-border); border-radius: 13px; cursor: pointer; font-family: var(--ac-font); transition: border-color .18s, background .18s, box-shadow .18s; }
.sp-wz-opt:hover { border-color: var(--ac-text-3); }
.sp-wz-opt.is-on { border-color: var(--ac-accent); background: var(--ac-accent-lite); box-shadow: 0 0 0 3px rgba(15,15,26,.05); }
.sp-wz-opt-ck { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--ac-border); background: #fff; display: flex; align-items: center; justify-content: center; color: #fff; transition: background .18s, border-color .18s; }
.sp-wz-opt.is-on .sp-wz-opt-ck { background: var(--ac-accent); border-color: var(--ac-accent); }
.sp-wz-opt-ck svg { opacity: 0; transform: scale(.5); transition: opacity .18s, transform .18s; }
.sp-wz-opt.is-on .sp-wz-opt-ck svg { opacity: 1; transform: scale(1); }
.sp-wz-opt-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sp-wz-opt-lab { font-size: 14px; font-weight: 700; color: var(--ac-text); }
.sp-wz-opt-lab em { font-style: normal; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ac-accent); background: #fff; border: 1px solid rgba(15,15,26,.18); padding: 1px 7px; border-radius: 20px; margin-left: 7px; vertical-align: 1px; }
.sp-wz-opt-desc { font-size: 12px; color: var(--ac-text-3); }
.sp-wz-opt-pr { font-size: 15px; font-weight: 900; color: var(--ac-text); white-space: nowrap; letter-spacing: -.02em; }

/* What you get strip */
.sp-wz-strip { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.sp-wz-strip span { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--ac-text-2); }
.sp-wz-strip svg { color: #1f8a4c; }

/* DO / DON'T table */
.sp-wz-guide { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ac-border); border-radius: 12px; overflow: hidden; }
.sp-wz-guide-col { padding: 0; }
.sp-wz-guide-do { border-right: 1px solid var(--ac-border); }
.sp-wz-guide-h { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 11px 16px; }
.sp-wz-guide-do .sp-wz-guide-h { background: #effaf2; color: #1f8a4c; }
.sp-wz-guide-dont .sp-wz-guide-h { background: #fdeeee; color: #c0392b; }
.sp-wz-guide-col ul { list-style: none; margin: 0; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.sp-wz-guide-col li { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; color: var(--ac-text-2); line-height: 1.45; }
.sp-wz-guide-do svg { color: #1f8a4c; flex-shrink: 0; margin-top: 1px; }
.sp-wz-guide-dont svg { color: #c0392b; flex-shrink: 0; margin-top: 1px; }

.sp-wz-sales { display: inline-flex; align-items: center; gap: 8px; width: 100%; justify-content: center; background: var(--ac-accent); color: #fff !important; text-decoration: none !important; font-size: 14px; font-weight: 700; padding: 14px 24px; border-radius: 12px; margin-bottom: 22px; transition: background .2s, transform .15s; }
.sp-wz-sales:hover { background: var(--ac-accent-dark); transform: translateY(-1px); }

/* RIGHT summary */
.sp-wz-sum-card { position: sticky; top: 0; }
.sp-wz-sum-h { font-size: 17px; font-weight: 900; letter-spacing: -.02em; margin: 0 0 3px; }
.sp-wz-sum-sub { font-size: 12px; color: var(--ac-text-3); margin: 0 0 18px; }
.sp-wz-sum-items { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.sp-wz-sum-empty { font-size: 12.5px; color: var(--ac-text-3); padding: 16px; text-align: center; background: #fff; border: 1px dashed var(--ac-border); border-radius: 10px; }
.sp-wz-sum-item { display: flex; align-items: center; gap: 10px; }
.sp-wz-sum-ic { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; background: var(--ac-accent-lite); color: var(--ac-accent); display: flex; align-items: center; justify-content: center; }
.sp-wz-sum-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sp-wz-sum-txt strong { font-size: 13px; font-weight: 800; color: var(--ac-text); }
.sp-wz-sum-txt em { font-style: normal; font-size: 11px; color: var(--ac-text-3); }
.sp-wz-sum-pr { font-size: 13.5px; font-weight: 800; color: var(--ac-text); white-space: nowrap; }
.sp-wz-sum-x { background: none; border: none; cursor: pointer; color: var(--ac-text-3); font-size: 18px; line-height: 1; padding: 2px 4px; transition: color .2s; }
.sp-wz-sum-x:hover { color: #c0392b; }
.sp-wz-sum-rows { border-top: 1px solid var(--ac-border); padding-top: 14px; }
.sp-wz-sum-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--ac-text-2); margin-bottom: 10px; }
.sp-wz-sum-row strong { color: var(--ac-text); font-weight: 700; }
.sp-wz-sum-disc strong { color: #1f8a4c; }
.sp-wz-addcode { background: none; border: none; cursor: pointer; font-family: var(--ac-font); font-size: 13px; font-weight: 700; color: var(--ac-accent); padding: 0; }
.sp-wz-addcode:hover { text-decoration: underline; }
.sp-wz-coupon-box { display: flex; gap: 6px; margin: 4px 0 12px; }
.sp-wz-coupon-box[hidden] { display: none; }
.sp-wz-coupon-box input { flex: 1; font-family: var(--ac-font); font-size: 12.5px; padding: 9px 11px; border: 1.5px solid var(--ac-border); border-radius: 9px; background: #fff; }
.sp-wz-coupon-box input:focus { outline: none; border-color: var(--ac-accent); }
.sp-wz-coupon-box input.sp-wz-invalid { border-color: #d23b3b; }
.sp-wz-coupon-box button { background: var(--ac-text); color: #fff; border: none; border-radius: 9px; font-size: 12.5px; font-weight: 700; padding: 0 14px; cursor: pointer; }
.sp-wz-sum-total { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--ac-border); margin-top: 4px; }
.sp-wz-sum-total span { font-size: 14px; font-weight: 800; color: var(--ac-text); }
.sp-wz-sum-total strong { font-size: 26px; font-weight: 900; letter-spacing: -.03em; color: var(--ac-text); }
.sp-wz-continue { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; background: var(--ac-accent); color: #fff; border: none; border-radius: 12px; font-family: var(--ac-font); font-size: 15px; font-weight: 700; padding: 16px 24px; cursor: pointer; letter-spacing: -.01em; box-shadow: 0 8px 22px rgba(15,15,26,.22); transition: background .2s, transform .15s, box-shadow .2s; }
.sp-wz-continue:hover:not(:disabled) { background: var(--ac-accent-dark); transform: translateY(-1px); box-shadow: 0 12px 30px rgba(15,15,26,.3); }
.sp-wz-continue:disabled { background: #c8c8cc; cursor: not-allowed; box-shadow: none; }
.sp-wz-sum-secure { text-align: center; margin-top: 14px; }
.sp-wz-sum-secure > span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ac-text-3); margin-bottom: 10px; }
.sp-wz-sum-pay { display: flex; align-items: center; justify-content: center; gap: 7px; }

@media (max-width: 980px) {
  .sp-wz { max-width: 560px; }
  .sp-wz-cols { grid-template-columns: 1fr; min-height: 0; }
  .sp-wz-col-left { border-right: none; border-bottom: 1px solid var(--ac-border); }
  .sp-wz-col-right { border-left: none; border-top: 1px solid var(--ac-border); }
  .sp-wz-sum-card { position: static; }
}
@media (max-width: 560px) {
  .sp-wz-guide { grid-template-columns: 1fr; }
  .sp-wz-guide-do { border-right: none; border-bottom: 1px solid var(--ac-border); }
}

/* ═══════════════════════════════════════════════════════════════
   WIZARD v4 — 2-column (wider list) + option reveal info
   ═══════════════════════════════════════════════════════════════ */
.sp-wz { max-width: 1000px; }
.sp-wz-cols { grid-template-columns: 1fr 1.12fr; min-height: 520px; }
.sp-wz-col-left { padding: 28px 26px; }
.sp-wz-col-main { padding: 26px 28px; overflow-y: auto; border-left: 1px solid var(--ac-border); }
.sp-wz-col-left .sp-wz-h { font-size: 22px; }
.sp-wz-list { gap: 12px; }
.sp-wz-litem { padding: 16px 16px; border-radius: 14px; }
.sp-wz-litem-ic { width: 42px; height: 42px; }
.sp-wz-litem-name { font-size: 15px; }
.sp-wz-litem-desc { font-size: 12px; }

/* Detail wrapper */
.sp-wz-detail { margin-bottom: 8px; }

/* Option wrapper with reveal */
.sp-wz-opts { gap: 12px; }
.sp-wz-optw { border: 1.5px solid var(--ac-border); border-radius: 14px; overflow: hidden; background: #fff; transition: border-color .18s, box-shadow .18s, background .18s; }
.sp-wz-optw:hover { border-color: var(--ac-text-3); }
.sp-wz-optw.is-on { border-color: var(--ac-accent); background: var(--ac-accent-lite); box-shadow: 0 0 0 3px rgba(15,15,26,.05); }
.sp-wz-opt-row { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 15px 18px; background: none; border: none; cursor: pointer; font-family: var(--ac-font); }
.sp-wz-opt-info { padding: 0 18px 16px 50px; animation: sp-wz-acc .28s ease; }
.sp-wz-opt-info[hidden] { display: none; }
.sp-wz-optinfo-h { font-size: 12px; font-weight: 800; color: var(--ac-text); margin-bottom: 8px; letter-spacing: -.01em; }
.sp-wz-optinfo-p { font-size: 12.5px; color: var(--ac-text-2); line-height: 1.55; margin: 0 0 10px; }
.sp-wz-optinfo-feats { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 7px 14px; }
.sp-wz-optinfo-feats li { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--ac-text-2); line-height: 1.4; }
.sp-wz-optinfo-feats svg { color: var(--ac-accent); stroke: var(--ac-accent); flex-shrink: 0; margin-top: 1px; }
.sp-wz-optinfo-note { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: var(--ac-text-3); padding-top: 10px; border-top: 1px dashed var(--ac-border); }
.sp-wz-optinfo-note svg { color: var(--ac-text-3); flex-shrink: 0; }

/* Selection card now stacked under detail in main column */
.sp-wz-col-main .sp-wz-sum-card { position: static; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--ac-border); }
.sp-wz-col-main .sp-wz-sum-h { margin-top: 4px; }

@media (max-width: 920px) {
  .sp-wz { max-width: 560px; }
  .sp-wz-cols { grid-template-columns: 1fr; }
  .sp-wz-col-main { border-left: none; border-top: 1px solid var(--ac-border); }
  .sp-wz-optinfo-feats { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   WIZARD v5 — blue selected outline, animated check, light info,
   merged Shopify-style checkout (2-col with product photo)
   ═══════════════════════════════════════════════════════════════ */
:root { --ck-blue: #2563eb; --ck-blue-tint: #eff4ff; }

/* ── Blue selected state + animated check ── */
.sp-wz-optw.is-on { border-color: var(--ck-blue); background: var(--ck-blue-tint); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.sp-wz-optw.is-on .sp-wz-opt-ck { background: var(--ck-blue); border-color: var(--ck-blue); }
.sp-wz-optw.is-on .sp-wz-opt-ck svg { animation: ck-pop .35s cubic-bezier(.18,.89,.32,1.28); }
.sp-wz-optw.is-on .sp-wz-opt-ck polyline { stroke-dasharray: 26; stroke-dashoffset: 26; animation: ck-draw .4s .05s forwards ease; }
@keyframes ck-pop { 0% { opacity: 0; transform: scale(.2); } 60% { transform: scale(1.25); } 100% { opacity: 1; transform: scale(1); } }
@keyframes ck-draw { to { stroke-dashoffset: 0; } }
.sp-wz-opt-lab em { color: var(--ck-blue); border-color: rgba(37,99,235,.35); }

/* left list active/selected → blue */
.sp-wz-litem.is-active { border-color: var(--ck-blue); background: var(--ck-blue-tint); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.sp-wz-litem.is-active .sp-wz-litem-ic { background: #fff; color: var(--ck-blue); }
.sp-wz-litem-dot { background: var(--ck-blue); }
.sp-wz-litem.is-sel .sp-wz-litem-arr { color: var(--ck-blue); }

/* ── Lighter gray for option info ── */
.sp-wz-opt-info { background: #f7f9fc; padding-top: 14px; }
.sp-wz-optinfo-h { color: var(--ac-text-2); }
.sp-wz-optinfo-feats svg { color: var(--ck-blue); }
.sp-wz-optinfo-note { color: #9aa0ab; border-top-color: #e9edf3; }
.sp-wz-det-intro { background: #f7f8fa; color: var(--ac-text-2); }

/* ── Checkout (Shopify-style 2 column) ── */
.sp-wz-checkout { max-width: none !important; margin: 0 !important; padding: 0 !important; }
.sp-wz-co-cols { display: grid; grid-template-columns: 1.08fr .92fr; min-height: 500px; }
.sp-wz-co-left { padding: 28px 34px; overflow-y: auto; }
.sp-wz-co-right { padding: 28px 28px; background: var(--ac-surface); border-left: 1px solid var(--ac-border); }
.sp-wz-backlink { display: inline-flex; align-items: center; gap: 7px; background: none; border: none; cursor: pointer; font-family: var(--ac-font); font-size: 13px; font-weight: 700; color: var(--ac-text-2); padding: 0; margin-bottom: 16px; transition: color .2s, gap .2s; }
.sp-wz-backlink:hover { color: var(--ac-text); gap: 10px; }
.sp-wz-checkout .sp-wz-h { font-size: 24px; margin-bottom: 22px; }
.sp-wz-co-sec { font-size: 14px; font-weight: 800; color: var(--ac-text); letter-spacing: -.01em; margin: 22px 0 4px; }
.sp-wz-co-left .sp-wz-co-sec:first-of-type { margin-top: 0; }
.sp-wz-co-note { font-size: 12.5px; color: var(--ac-text-3); margin: 0 0 14px; }
.sp-wz-checkout .sp-wz-row2 { margin-bottom: 6px; }
.sp-wz-checkout .sp-wz-paypal { margin: 6px 0 4px; }
.sp-wz-checkout .sp-wz-trust { margin-top: 18px; }

/* Right: product + summary */
.sp-wz-co-right .sp-wz-co-prod { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--ac-border); margin-bottom: 16px; }
.sp-wz-co-thumb { width: 60px; height: 60px; flex-shrink: 0; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid var(--ac-border); display: flex; align-items: center; justify-content: center; }
.sp-wz-co-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-wz-co-ph { font-family: Georgia, serif; font-size: 24px; font-weight: 900; color: var(--ac-text-3); }
.sp-wz-co-prodtxt strong { display: block; font-size: 15px; font-weight: 800; color: var(--ac-text); letter-spacing: -.01em; }
.sp-wz-co-prodtxt span { font-size: 12px; color: var(--ac-text-3); }
.sp-wz-co-items { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.sp-wz-co-item { display: flex; align-items: center; gap: 11px; }
.sp-wz-co-iic { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; background: #fff; border: 1px solid var(--ac-border); color: var(--ac-text-2); display: flex; align-items: center; justify-content: center; }
.sp-wz-co-itxt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sp-wz-co-itxt strong { font-size: 13px; font-weight: 800; color: var(--ac-text); }
.sp-wz-co-itxt em { font-style: normal; font-size: 11px; color: var(--ac-text-3); }
.sp-wz-co-ip { font-size: 13.5px; font-weight: 800; color: var(--ac-text); white-space: nowrap; }
.sp-wz-co-rows { border-top: 1px solid var(--ac-border); padding-top: 14px; }
.sp-wz-co-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--ac-text-2); margin-bottom: 10px; }
.sp-wz-co-row strong { color: var(--ac-text); font-weight: 700; }
.sp-wz-co-disc strong { color: #1f8a4c; }
.sp-wz-co-total { display: flex; align-items: baseline; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--ac-border); }
.sp-wz-co-total span { font-size: 14px; font-weight: 800; color: var(--ac-text); }
.sp-wz-co-total strong { font-size: 24px; font-weight: 900; letter-spacing: -.03em; color: var(--ac-text); }

@media (max-width: 820px) {
  .sp-wz-co-cols { grid-template-columns: 1fr; }
  .sp-wz-co-right { border-left: none; border-top: 1px solid var(--ac-border); order: -1; }
}

/* ═══════════════════════════════════════════════════════════════
   WIZARD v6 — visible hover/selected, account+buyer, country, modern summary
   ═══════════════════════════════════════════════════════════════ */
/* Hover → clear blue */
.sp-wz-litem:hover { border-color: var(--ck-blue); }
.sp-wz-litem:hover .sp-wz-litem-name { color: var(--ck-blue); }
.sp-wz-litem:hover .sp-wz-litem-arr { color: var(--ck-blue); }

/* Selected list item — strong */
.sp-wz-litem.is-sel { border-color: var(--ck-blue); background: var(--ck-blue-tint); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.sp-wz-litem.is-sel .sp-wz-litem-ic { background: #fff; color: var(--ck-blue); }
.sp-wz-litem.is-sel .sp-wz-litem-name { color: var(--ck-blue); }
.sp-wz-litem-sel { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; color: var(--ck-blue); }
.sp-wz-litem-sel svg { color: var(--ck-blue); }
.sp-wz-litem-badge { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; background: var(--ck-blue); color: #fff; display: flex; align-items: center; justify-content: center; animation: ck-pop .3s cubic-bezier(.18,.89,.32,1.28); }

/* Segmented control */
.sp-wz-seg { display: inline-flex; background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: 12px; padding: 3px; gap: 3px; margin-bottom: 14px; }
.sp-wz-seg-btn { border: none; background: none; font-family: var(--ac-font); font-size: 13px; font-weight: 700; color: var(--ac-text-2); padding: 9px 18px; border-radius: 9px; cursor: pointer; transition: background .18s, color .18s, box-shadow .18s; }
.sp-wz-seg-btn.is-on { background: #fff; color: var(--ac-text); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* Account reveal */
.sp-wz-acct-reveal { margin-bottom: 8px; }
.sp-wz-acct-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 2px; }
.sp-wz-acct-btn { background: var(--ac-text); color: #fff; border: none; border-radius: 9px; font-family: var(--ac-font); font-size: 12.5px; font-weight: 700; padding: 10px 16px; cursor: pointer; transition: background .2s; }
.sp-wz-acct-btn:hover { background: #000; }
.sp-wz-acct-btn:disabled { opacity: .6; cursor: default; }
.sp-wz-acct-hint { font-size: 11.5px; color: var(--ac-text-3); }
.sp-wz-acct-status { font-size: 12.5px; line-height: 1.5; padding: 11px 13px; border-radius: 9px; margin-top: 12px; }
.sp-wz-acct-status.is-ok { background: #effaf2; color: #1f8a4c; }
.sp-wz-acct-status.is-err { background: #fdeeee; color: #c0392b; }

/* Country select */
.sp-wz-select { position: relative; }
.sp-wz-select select { width: 100%; appearance: none; -webkit-appearance: none; font-family: var(--ac-font); font-size: 14px; color: var(--ac-text); background: var(--ac-surface); border: 1.5px solid var(--ac-border); border-radius: 11px; padding: 13px 40px 13px 15px; cursor: pointer; transition: border-color .18s, box-shadow .18s, background .18s; }
.sp-wz-select select:focus { outline: none; border-color: var(--ck-blue); box-shadow: 0 0 0 4px rgba(37,99,235,.1); background: #fff; }
.sp-wz-select select.sp-wz-invalid { border-color: #d23b3b; box-shadow: 0 0 0 4px rgba(210,59,59,.1); }
.sp-wz-select svg { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--ac-text-3); pointer-events: none; }

/* ── Modern checkout summary (right) ── */
.sp-wz-co-right { background: #fff; border-left: 1px solid var(--ac-border); }
.sp-wz-co-right .sp-wz-co-prod { background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: 14px; padding: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--ac-border); }
.sp-wz-co-thumb { width: 64px; height: 64px; border-radius: 14px; box-shadow: 0 4px 14px rgba(15,15,26,.1); }
.sp-wz-co-prodtxt strong { font-size: 16px; }
.sp-wz-co-item { padding: 12px 14px; background: var(--ac-surface); border-radius: 12px; flex-direction: column; align-items: stretch; }
.sp-wz-co-item-top { display: flex; align-items: center; gap: 11px; }
.sp-wz-co-feats { list-style: none; margin: 8px 0 0 0; padding: 8px 0 0 0; border-top: 1px solid var(--ac-border); display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; }
.sp-wz-co-feats li { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ac-text-2); }
.sp-wz-co-feats li svg { flex-shrink: 0; color: #22c55e; stroke: #22c55e; }
.sp-wz-co-iic { background: #fff; }
.sp-wz-co-total strong { font-size: 28px; }
.sp-wz-co-total span { display: flex; flex-direction: column; }
.sp-wz-co-secure { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 11.5px; color: var(--ac-text-3); margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ac-border); }
.sp-wz-co-secure .sp-pay { transform: scale(.9); }
.sp-wz-co-total span small { font-size: 11px; font-weight: 500; color: var(--ac-text-3); margin-top: 2px; }

/* ── FIX: hover/selected readability (no blue bg washout, dark text) ── */
.sp-wz-litem:hover { border-color: var(--ck-blue); background: #fff; }
.sp-wz-litem:hover .sp-wz-litem-name { color: var(--ac-text); }
.sp-wz-litem:hover .sp-wz-litem-arr { color: var(--ck-blue); }
.sp-wz-litem.is-active { background: #fff; border-color: var(--ck-blue); box-shadow: 0 0 0 3px rgba(37,99,235,.10); }
.sp-wz-litem.is-active .sp-wz-litem-name { color: var(--ac-text); }
.sp-wz-litem.is-active .sp-wz-litem-ic { background: var(--ck-blue-tint); color: var(--ck-blue); }
.sp-wz-litem.is-sel { background: #fff; }
.sp-wz-litem.is-sel .sp-wz-litem-name { color: var(--ac-text); }
.sp-wz-litem.is-sel .sp-wz-litem-ic { background: var(--ck-blue-tint); color: var(--ck-blue); }
/* keep the option (middle) selected tint subtle, dark text */
.sp-wz-optw.is-on .sp-wz-opt-lab { color: var(--ac-text); }
.sp-wz-optw.is-on .sp-wz-opt-pr { color: var(--ac-text); }

/* ═══════════════════════════════════════════════════════════════
   WIZARD v7 — accordion license list (sub-options below each license)
   ═══════════════════════════════════════════════════════════════ */
.sp-wz-cols--acc { grid-template-columns: 1.3fr .7fr; }
.sp-wz-cols--acc .sp-wz-col-left { padding: 28px 28px; overflow-y: auto; }
.sp-wz-cols--acc .sp-wz-col-right { padding: 24px; background: var(--ac-surface); border-left: 1px solid var(--ac-border); }
.sp-wz-cols--acc .sp-wz-sum-card { position: sticky; top: 0; }

.sp-wz-list { display: flex; flex-direction: column; gap: 12px; }
.sp-wz-acc { border: 1.5px solid var(--ac-border); border-radius: 16px; overflow: hidden; background: #fff; transition: border-color .2s, box-shadow .2s; }
.sp-wz-acc:hover { border-color: var(--ck-blue); }
.sp-wz-acc.is-open { border-color: var(--ck-blue); box-shadow: 0 0 0 3px rgba(37,99,235,.08); }
.sp-wz-acc.is-sel:not(.is-open) { border-color: var(--ck-blue); }
.sp-wz-acc-head { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; background: none; border: none; cursor: pointer; font-family: var(--ac-font); text-align: left; }
.sp-wz-acc-head .sp-wz-litem-name { color: var(--ac-text); }
.sp-wz-acc.is-open .sp-wz-litem-ic,
.sp-wz-acc.is-sel .sp-wz-litem-ic { background: var(--ck-blue-tint); color: var(--ck-blue); }
.sp-wz-acc .sp-wz-chev { color: var(--ac-text-3); transition: transform .25s ease; }
.sp-wz-acc.is-open .sp-wz-chev { transform: rotate(180deg); color: var(--ck-blue); }
.sp-wz-acc-body { padding: 2px 18px 18px; animation: sp-wz-acc .3s ease; }
.sp-wz-acc-body[hidden] { display: none; }
.sp-wz-acc-body .sp-wz-det-intro { margin-top: 0; }
.sp-wz-acc-body .sp-wz-det-optlabel { margin-top: 16px; }

@media (max-width: 900px) {
  .sp-wz-cols--acc { grid-template-columns: 1fr; }
  .sp-wz-cols--acc .sp-wz-col-right { border-left: none; border-top: 1px solid var(--ac-border); }
  .sp-wz-cols--acc .sp-wz-sum-card { position: static; }
}

/* ═══════════════════════════════════════════════════════════════
   WIZARD v8 — brand active color (ink) instead of blue, bold visible
   ═══════════════════════════════════════════════════════════════ */
:root { --ck-blue: #141414; --ck-blue-tint: #f1f1f3; }

/* Accordion: subtle hover, BOLD dark header when open/selected */
.sp-wz-acc:hover { border-color: #c9c9cf; }
.sp-wz-acc:hover .sp-wz-acc-head { background: var(--ac-surface); }
.sp-wz-acc.is-open, .sp-wz-acc.is-sel { border-color: var(--ac-accent); box-shadow: 0 6px 22px rgba(15,15,26,.10); }
.sp-wz-acc.is-open .sp-wz-acc-head,
.sp-wz-acc.is-sel  .sp-wz-acc-head { background: var(--ac-accent); }
.sp-wz-acc.is-open .sp-wz-acc-head:hover,
.sp-wz-acc.is-sel  .sp-wz-acc-head:hover { background: #000; }
.sp-wz-acc.is-open .sp-wz-litem-name,
.sp-wz-acc.is-sel  .sp-wz-litem-name { color: #fff; }
.sp-wz-acc.is-open .sp-wz-litem-desc,
.sp-wz-acc.is-sel  .sp-wz-litem-desc { color: rgba(255,255,255,.6); }
.sp-wz-acc.is-open .sp-wz-litem-price,
.sp-wz-acc.is-sel  .sp-wz-litem-price { color: #fff; }
.sp-wz-acc.is-open .sp-wz-litem-ic,
.sp-wz-acc.is-sel  .sp-wz-litem-ic { background: #fff; color: var(--ac-accent); }
.sp-wz-acc.is-open .sp-wz-chev,
.sp-wz-acc.is-sel  .sp-wz-chev { color: #fff; }
.sp-wz-acc.is-sel .sp-wz-litem-sel { color: #fff; }
.sp-wz-acc.is-sel .sp-wz-litem-sel svg { color: #fff; }
.sp-wz-acc.is-sel .sp-wz-litem-badge { background: #fff; color: var(--ac-accent); }

/* Options selected → ink (brand), light neutral tint */
.sp-wz-optw.is-on { border-color: var(--ac-accent); background: var(--ck-blue-tint); box-shadow: 0 0 0 3px rgba(15,15,26,.06); }
.sp-wz-optw.is-on .sp-wz-opt-ck { background: var(--ac-accent); border-color: var(--ac-accent); }
.sp-wz-opt-lab em { color: var(--ac-accent); border-color: rgba(15,15,26,.25); }
.sp-wz-optinfo-feats svg { color: var(--ac-accent); }

/* Navbar logo image */
.ac-nav-logo-img, .sp-nav-logo-img { height: 32px; width: auto; max-width: 180px; display: block !important; object-fit: contain; visibility: visible !important; opacity: 1 !important; }
.ac-nav--dark .ac-nav-logo-img { filter: brightness(0) invert(1); }

/* ═══════════════════════════════════════════════════════════════
   WIZARD v9 — option selected = solid INK row (not blue) + help card
   ═══════════════════════════════════════════════════════════════ */
:root { --ck-blue: #141414; --ck-blue-tint: #f1f1f3; }

/* Selected sub-option: bold dark row, white text (brand, very visible) */
.sp-wz-optw.is-on { border-color: var(--ac-accent) !important; background: #fff !important; box-shadow: 0 6px 18px rgba(15,15,26,.14) !important; }
.sp-wz-optw.is-on .sp-wz-opt-row { background: var(--ac-accent); }
.sp-wz-optw.is-on .sp-wz-opt-lab,
.sp-wz-optw.is-on .sp-wz-opt-pr { color: #fff !important; }
.sp-wz-optw.is-on .sp-wz-opt-desc { color: rgba(255,255,255,.62) !important; }
.sp-wz-optw.is-on .sp-wz-opt-ck { background: #fff !important; border-color: #fff !important; color: var(--ac-accent) !important; }
.sp-wz-optw.is-on .sp-wz-opt-ck svg { color: var(--ac-accent); }
.sp-wz-optw.is-on .sp-wz-opt-lab em { background: #fff; color: var(--ac-accent); border-color: #fff; }

.sp-wz-opt-row:hover { background-color: #F5F5F5; }
.sp-wz-optw.is-on .sp-wz-opt-ck { background-color: black; }

/* ── Help chip — below payment icons inside selection card ── */
.sp-wz-help-chip {
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  margin-top: 16px; padding: 12px 16px;
  background: var(--ac-surface-2);
  border: 1px dashed var(--ac-border);
  border-radius: 12px;
  text-align: center;
}
.sp-wz-help-chip-label {
  font-size: 12px; color: var(--ac-text-2); white-space: nowrap;
}
.sp-wz-help-chip-link {
  font-size: 12px; font-weight: 600; color: var(--ac-accent) !important;
  text-decoration: underline !important; white-space: nowrap;
  transition: color .15s;
}
.sp-wz-help-chip-link:hover { color: var(--ac-accent-dark) !important; }

/* ── Enterprise license card CTA ── */
.sp-lic-card--enterprise { border: 1.5px solid var(--ac-accent); }
.sp-lic-card-enterprise-cta {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 16px; padding: 11px 18px;
  background: var(--ac-accent); color: #fff;
  border-radius: 10px; font-size: 13px; font-weight: 700;
  text-decoration: none; transition: background .2s, transform .15s;
}
.sp-lic-card-enterprise-cta:hover { background: var(--ac-accent-dark); transform: translateY(-1px); color: #fff; }

/* ── Enterprise/contact CTA in popup step 1 (replaces Continue button) ── */
.sp-wz-enterprise-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 15px 20px; margin-top: 0;
  background: var(--ac-accent); color: #fff;
  border-radius: 14px; font-size: 15px; font-weight: 700;
  text-decoration: none; transition: background .2s, transform .15s;
  box-shadow: 0 8px 22px rgba(15,15,26,.22);
}
.sp-wz-enterprise-cta:hover { background: var(--ac-accent-dark); transform: translateY(-1px); color: #fff; }

/* ── Enterprise contact card (popup step 1 right panel) ── */
.sp-wz-ent-card {
  background: var(--ac-surface);
  border: 1.5px solid var(--ac-accent);
  border-radius: 18px;
  padding: 28px 24px 24px;
  text-align: center;
}
.sp-wz-ent-badge {
  width: 60px; height: 60px; margin: 0 auto 16px;
  background: var(--ac-accent);
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.sp-wz-ent-h {
  font-size: 20px; font-weight: 900; letter-spacing: -.03em;
  color: var(--ac-text); margin: 0 0 8px;
}
.sp-wz-ent-sub {
  font-size: 13px; color: var(--ac-text-2); line-height: 1.6;
  margin: 0 0 20px;
}
.sp-wz-ent-feats {
  list-style: none; padding: 0; margin: 0 0 22px;
  text-align: left;
  display: flex; flex-direction: column; gap: 9px;
}
.sp-wz-ent-feats li {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 600; color: var(--ac-text);
}
.sp-wz-ent-feats li svg { color: var(--ac-accent); flex-shrink: 0; }
.sp-wz-ent-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 15px 20px;
  background: var(--ac-accent); color: #fff;
  border-radius: 12px; font-size: 15px; font-weight: 700;
  text-decoration: none; transition: background .2s, transform .15s;
  box-shadow: 0 8px 22px rgba(15,15,26,.2);
}
.sp-wz-ent-cta:hover { background: var(--ac-accent-dark); transform: translateY(-1px); color: #fff; }
.sp-wz-ent-note {
  font-size: 11px; color: var(--ac-text-3); margin: 12px 0 0; line-height: 1.5;
}
.sp-wz-ent-note a { color: var(--ac-accent); text-decoration: none; }
.sp-wz-ent-note a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════
   FIX — tier checkmark
   Base rule hides the tick with opacity:0, and the rule meant to
   reveal it targets `.sp-wz-opt.is-on` while the markup renders
   `.sp-wz-optw.is-on`. The ck-pop animation has no fill-mode, so
   the tick flashed once and snapped back to invisible.
   ══════════════════════════════════════════════════════════════ */
.sp-wz-optw.is-on .sp-wz-opt-ck svg {
  opacity: 1;
  transform: scale(1);
  animation-fill-mode: forwards;
}
.sp-wz-optw.is-on .sp-wz-opt-ck {
  background: #fff !important;
  border-color: #fff !important;
  color: #141414 !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06);
}
.sp-wz-optw.is-on .sp-wz-opt-ck svg { color: #141414 !important; }

/* ══════════════════════════════════════════════════════════════
   FIX — close button
   Astra styles bare <button> with its own padding, min-width and
   colour, which stretched the box and washed out the icon. Pinned
   here with the overlay in the selector so the parent theme loses.
   ══════════════════════════════════════════════════════════════ */
.sp-wz-overlay .sp-wz-close {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 38px;
  align-self: center;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: var(--ac-surface) !important;
  border: 1.5px solid var(--ac-border) !important;
  border-radius: 10px !important;
  color: var(--ac-text) !important;
  font-size: 0;
  line-height: 1 !important;
  text-decoration: none;
  box-shadow: none !important;
  cursor: pointer;
}
.sp-wz-overlay .sp-wz-close svg {
  display: block;
  width: 17px !important;
  height: 17px !important;
  fill: none !important;
  stroke: currentColor;
  opacity: 1 !important;
}
.sp-wz-overlay .sp-wz-close svg line { stroke: currentColor; }
.sp-wz-overlay .sp-wz-close:hover {
  background: #141414 !important;
  border-color: #141414 !important;
  color: #fff !important;
}
.sp-wz-overlay .sp-wz-close:focus-visible {
  outline: 2px solid var(--ac-text);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════
   CHECKOUT — visual redesign (structure & fields unchanged)
   ══════════════════════════════════════════════════════════════ */

/* ── Layout — summary left, form right (markup order unchanged) ── */
.sp-wz-checkout .sp-wz-co-cols {
  grid-template-columns: .82fr 1.18fr;
  min-height: 560px;
}
.sp-wz-checkout .sp-wz-co-left {
  order: 2;
  padding: 30px 38px 34px;
  background: #fff;
  counter-reset: ckstep;
}
.sp-wz-checkout .sp-wz-co-right {
  order: 1;
  padding: 30px 28px 34px;
  background: #fafafa;
  border-left: none;
  border-right: 1px solid var(--ac-border);
}

/* Summary stays in view while the form is filled in */
@media (min-width: 861px) {
  .sp-wz-checkout .sp-wz-co-right {
    position: sticky;
    top: 0;
    align-self: start;
    max-height: 100%;
    overflow-y: auto;
  }
}

/* ── Heading ── */
.sp-wz-checkout .sp-wz-backlink {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ac-text-2);
  padding: 7px 12px 7px 8px;
  margin: 0 0 16px -8px;
  border-radius: 9px;
  transition: background .16s, color .16s;
}
.sp-wz-checkout .sp-wz-backlink:hover {
  background: var(--ac-surface);
  color: var(--ac-text);
}
.sp-wz-checkout .sp-wz-h {
  font-size: 27px;
  letter-spacing: -.035em;
  margin: 0 0 22px;
}

/* ── Numbered sections — orientation without extra markup ── */
.sp-wz-checkout .sp-wz-co-sec {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 800;
  margin: 26px 0 10px;
  padding-top: 22px;
  border-top: 1px solid var(--ac-border);
}
.sp-wz-checkout .sp-wz-co-sec::before {
  counter-increment: ckstep;
  content: counter(ckstep);
  flex: 0 0 auto;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: var(--ac-text);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
}
.sp-wz-checkout .sp-wz-co-left .sp-wz-co-sec:first-of-type,
.sp-wz-checkout #sp-wz-acct-block .sp-wz-co-sec {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.sp-wz-checkout .sp-wz-co-note {
  font-size: 12.5px;
  color: var(--ac-text-2);
  margin: -4px 0 14px 33px;
  line-height: 1.55;
}

/* ── Fields — bigger targets, calmer surface ── */
.sp-wz-checkout .sp-wz-field { margin-bottom: 13px; }
.sp-wz-checkout .sp-wz-field label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ac-text-2);
  margin-bottom: 6px;
  letter-spacing: .005em;
}
.sp-wz-checkout .sp-wz-field input,
.sp-wz-checkout .sp-wz-select select {
  font-size: 14.5px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1.5px solid var(--ac-border);
  background: #fff;
  transition: border-color .16s, box-shadow .16s;
}
/* keep room for the chevron */
.sp-wz-checkout .sp-wz-select select { padding-right: 42px; }

/* Astra gives bare inputs and selects a fixed height. Combined with the
   padding above, the text was being clipped at the baseline — most
   visibly on the country select. Height has to come from the content. */
.sp-wz-checkout .sp-wz-field input,
.sp-wz-checkout .sp-wz-field textarea,
.sp-wz-checkout .sp-wz-select select {
  height: auto !important;
  min-height: 0;
  line-height: 1.45 !important;
  box-sizing: border-box;
  vertical-align: middle;
}
.sp-wz-checkout .sp-wz-select select {
  /* a select still needs a floor, or Safari collapses it */
  min-height: 52px;
  text-overflow: ellipsis;
}
.sp-wz-checkout .sp-wz-select { display: block; width: 100%; }
.sp-wz-checkout .sp-wz-field input::placeholder { color: #b4b4b4; }
.sp-wz-checkout .sp-wz-field input:hover,
.sp-wz-checkout .sp-wz-select select:hover { border-color: #cfcfcf; }
.sp-wz-checkout .sp-wz-field input:focus,
.sp-wz-checkout .sp-wz-select select:focus {
  border-color: var(--ac-text);
  box-shadow: 0 0 0 4px rgba(20,20,20,.09);
  background: #fff;
}
/* City + Postcode were stacking — never had a layout rule of their own */
.sp-wz-checkout .sp-wz-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.sp-wz-checkout .sp-wz-field-half { margin-bottom: 13px; }

/* ── Segmented controls — read as real choices ── */
.sp-wz-checkout .sp-wz-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  background: var(--ac-surface);
  border: 1px solid var(--ac-border);
  border-radius: 13px;
  padding: 4px;
  gap: 4px;
  margin-bottom: 14px;
}
.sp-wz-checkout .sp-wz-seg-btn {
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ac-text-2);
}
.sp-wz-checkout .sp-wz-seg-btn:hover { color: var(--ac-text); }
.sp-wz-checkout .sp-wz-seg-btn.is-on {
  background: #fff;
  color: var(--ac-text);
  box-shadow: 0 1px 2px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.05);
}

/* ── Payment block — now the only element that looks clickable ── */
.sp-wz-checkout .sp-wz-paypal {
  margin-top: 4px;
  padding: 16px;
  background: var(--ac-surface);
  border: 1px solid var(--ac-border);
  border-radius: 14px;
  min-height: 52px;
}
.sp-wz-checkout .sp-wz-contact-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 15px 20px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
}
.sp-wz-checkout .sp-wz-trust {
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--ac-border);
  border-radius: 12px;
  justify-content: space-between;
}
.sp-wz-checkout .sp-wz-trust span {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ac-text-2);
}
.sp-wz-checkout .sp-wz-trust svg { color: var(--ac-text); }
.sp-wz-checkout .sp-wz-err {
  margin-top: 12px;
  padding: 11px 14px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 600;
}

/* ── Order summary ── */
.sp-wz-checkout .sp-wz-co-right .sp-wz-co-prod {
  background: #fff;
  border: 1px solid var(--ac-border);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
/* Column label — the summary needs a name now that it leads the page */
.sp-wz-checkout .sp-wz-co-right::before {
  content: "Order summary";
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ac-text-3);
  margin-bottom: 14px;
}

/* Line items — one card per license, no nested box */
.sp-wz-checkout .sp-wz-co-items {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sp-wz-checkout .sp-wz-co-item {
  background: #fff;
  border: 1px solid var(--ac-border);
  border-radius: 14px;
  padding: 14px 15px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.sp-wz-checkout .sp-wz-co-item-top { gap: 12px; align-items: flex-start; }
.sp-wz-checkout .sp-wz-co-iic {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 9px;
  background: var(--ac-surface);
  color: var(--ac-text);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sp-wz-checkout .sp-wz-co-itxt { gap: 2px; padding-top: 1px; }
.sp-wz-checkout .sp-wz-co-itxt strong { font-size: 14px; letter-spacing: -.01em; }
.sp-wz-checkout .sp-wz-co-itxt em { font-size: 12px; color: var(--ac-text-2); }
.sp-wz-checkout .sp-wz-co-ip {
  font-size: 15px;
  font-weight: 800;
  padding-top: 1px;
  font-variant-numeric: tabular-nums;
}

/* Features are supporting detail — quieter, monochrome */
.sp-wz-checkout .sp-wz-co-feats {
  margin-top: 12px;
  padding-top: 11px;
  gap: 6px 12px;
}
.sp-wz-checkout .sp-wz-co-feats li {
  font-size: 11.5px;
  color: var(--ac-text-3);
  gap: 6px;
}
.sp-wz-checkout .sp-wz-co-feats li svg {
  color: var(--ac-text-3);
  stroke: var(--ac-text-3);
  opacity: .8;
}

/* Money rows — digits line up, labels recede, values lead */
.sp-wz-checkout .sp-wz-co-rows {
  padding: 0;
  border-top: none;
  margin-bottom: 2px;
}
.sp-wz-checkout .sp-wz-co-row {
  font-size: 13.5px;
  color: var(--ac-text-2);
  margin-bottom: 0;
  padding: 11px 4px;
  border-bottom: 1px solid var(--ac-border);
}
.sp-wz-checkout .sp-wz-co-row strong {
  font-size: 14.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
/* `hidden` lost to display:flex — the empty Discount row stayed visible */
.sp-wz-checkout .sp-wz-co-row[hidden] { display: none; }
.sp-wz-checkout .sp-wz-co-disc,
.sp-wz-checkout .sp-wz-co-disc strong { color: #1a7f45; }

/* Total — a receipt line, not a filled block.
   A solid dark rounded rect sits inches from the PayPal button and
   reads as clickable; weight comes from typography and a rule instead. */
.sp-wz-checkout .sp-wz-co-total {
  margin-top: 4px;
  padding: 16px 4px 0;
  background: none;
  border: none;
  border-top: 2px solid var(--ac-text);
  border-radius: 0;
  align-items: baseline;
  gap: 14px;
}
.sp-wz-checkout .sp-wz-co-total span {
  color: var(--ac-text);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  gap: 3px;
}
.sp-wz-checkout .sp-wz-co-total span small {
  color: var(--ac-text-3);
  font-size: 11.5px;
  font-weight: 500;
  margin-top: 0;
}
.sp-wz-checkout .sp-wz-co-total strong {
  color: var(--ac-text);
  font-size: 34px;
  line-height: 1;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}
.sp-wz-checkout .sp-wz-co-secure {
  margin-top: 16px;
  padding-top: 16px;
  font-size: 11px;
}

/* ══════════════════════════════════════════════════════════════
   CHECKOUT — form column polish
   ══════════════════════════════════════════════════════════════ */

/* Cap the measure. Full-width inputs in a wide column are slower to
   scan and read as a wall of boxes. */
.sp-wz-checkout .sp-wz-co-left > * { max-width: 520px; }
.sp-wz-checkout .sp-wz-backlink { max-width: none; }

/* Tie fields to the numbered heading above them */
.sp-wz-checkout .sp-wz-field,
.sp-wz-checkout .sp-wz-field-row,
.sp-wz-checkout .sp-wz-seg,
.sp-wz-checkout .sp-wz-paypal,
.sp-wz-checkout .sp-wz-contact,
.sp-wz-checkout #sp-wz-acct-reveal { margin-left: 33px; }
.sp-wz-checkout .sp-wz-field-row .sp-wz-field { margin-left: 0; }

/* Optional steps should not read as loud as required ones */
.sp-wz-checkout #sp-wz-acct-block .sp-wz-seg { margin-bottom: 4px; }
.sp-wz-checkout .sp-wz-acct-hint {
  display: block;
  font-size: 11.5px;
  color: var(--ac-text-3);
  margin-top: 6px;
}
.sp-wz-checkout .sp-wz-acct-actions { margin-top: 10px; }

/* Payment is the finish line — give it air, then close the form */
.sp-wz-checkout .sp-wz-co-left .sp-wz-co-sec:last-of-type { margin-top: 30px; }
.sp-wz-checkout .sp-wz-paypal { margin-top: 6px; }

/* Errors sit with the fields, not the gutter */
.sp-wz-checkout .sp-wz-err { margin-left: 33px; max-width: 520px; }

/* ══════════════════════════════════════════════════════════════
   PROMO — struck-through price + countdown
   ══════════════════════════════════════════════════════════════ */

/* Price is the deciding number in the license list — at 12.5px it was
   the smallest thing in the row. */
/* Price block in the license row — two rows, right aligned:
     $85  -31%      ← small, muted context
     from $59       ← the number that matters              */
.sp-wz-list .sp-wz-litem-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.sp-wz-lp-top {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}
.sp-wz-list .sp-wz-litem-price .sp-wz-was {
  font-size: 12px;
  font-weight: 600;
  margin: 0;
}
.sp-wz-list .sp-wz-litem-price .sp-wz-off {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 4px;
  margin: 0;
}
.sp-wz-lp-now {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.sp-wz-lp-now b {
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1;
  color: inherit;
}
.sp-wz-lp-now i {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: lowercase;
  color: var(--ac-text-3);
}
.sp-wz-acc.is-open .sp-wz-lp-now i,
.sp-wz-acc.is-sel .sp-wz-lp-now i { color: rgba(255,255,255,.55); }
/* Tier rows carry the same weight one step down */
.sp-wz-opt-pr { font-size: 16px !important; font-weight: 800; font-variant-numeric: tabular-nums; }

/* The old price. Muted and smaller so the eye lands on what they pay. */
.sp-wz-was {
  color: var(--ac-text-3);
  font-weight: 600;
  text-decoration-thickness: 1.5px;
  margin-right: 5px;
  font-size: .82em;
  font-variant-numeric: tabular-nums;
}
.sp-wz-optw.is-on .sp-wz-was { color: rgba(255,255,255,.6) !important; }

/* Saving badge — the one red thing on screen, so it gets found */
.sp-wz-off {
  display: inline-block;
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #fff;
  background: #d94b4b;
  border-radius: 5px;
  padding: 3px 6px;
  vertical-align: middle;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sp-wz-optw.is-on .sp-wz-off { background: #fff; color: #d94b4b; }
.sp-wz-acc.is-open .sp-wz-off,
.sp-wz-acc.is-sel  .sp-wz-off { background: #fff; color: #d94b4b; }

/* Countdown — one calm line, not a row of black blocks */
.sp-wz-promo {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  margin-bottom: 16px;
  background: #fff;
  border: 1px solid #f1d4d4;
  border-left: 3px solid #d94b4b;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.sp-wz-promo[hidden] { display: none; }

/* Live indicator — motion is what says "running" */
.sp-wz-promo-dot {
  flex: 0 0 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #d94b4b;
  box-shadow: 0 0 0 0 rgba(217,75,75,.5);
  animation: sp-promo-pulse 1.8s ease-out infinite;
}
@keyframes sp-promo-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(217,75,75,.5); }
  70%  { box-shadow: 0 0 0 7px rgba(217,75,75,0); }
  100% { box-shadow: 0 0 0 0 rgba(217,75,75,0); }
}

.sp-wz-promo-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-wz-promo-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #d94b4b;
}
.sp-wz-promo-txt {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ac-text-3);
  line-height: 1.35;
}

/* The clock itself carries the weight */
.sp-wz-promo-clock {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ac-text);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  line-height: 1;
}
.sp-wz-promo-clock i {
  font-style: normal;
  color: var(--ac-text-3);
  margin: 0 1px;
  animation: sp-promo-blink 1s steps(1) infinite;
}
@keyframes sp-promo-blink { 50% { opacity: .3; } }
.sp-wz-promo-clock.is-urgent { color: #d94b4b; }

/* In the summary column it sits above the "Order summary" label */
.sp-wz-checkout .sp-wz-co-right .sp-wz-promo { margin-bottom: 16px; }
.sp-wz-checkout .sp-wz-co-right .sp-wz-promo-clock { margin-left: 0; }

/* ── Responsive ── */
@media (max-width: 860px) {
  .sp-wz-checkout .sp-wz-co-cols { grid-template-columns: 1fr; }
  .sp-wz-checkout .sp-wz-co-left { padding: 22px 20px 26px; order: 2; }
  .sp-wz-checkout .sp-wz-co-right {
    order: 1;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid var(--ac-border);
    padding: 20px;
  }
  .sp-wz-checkout .sp-wz-h { font-size: 23px; }
  .sp-wz-checkout .sp-wz-co-total strong { font-size: 28px; }
  /* drop the desktop indent — every pixel counts on a phone */
  .sp-wz-checkout .sp-wz-co-left > * { max-width: none; }
  .sp-wz-checkout .sp-wz-field,
  .sp-wz-checkout .sp-wz-field-row,
  .sp-wz-checkout .sp-wz-seg,
  .sp-wz-checkout .sp-wz-paypal,
  .sp-wz-checkout .sp-wz-contact,
  .sp-wz-checkout .sp-wz-err,
  .sp-wz-checkout .sp-wz-co-note,
  .sp-wz-checkout #sp-wz-acct-reveal { margin-left: 0; }
  .sp-wz-checkout .sp-wz-field input,
  .sp-wz-checkout .sp-wz-select select { font-size: 16px; } /* stops iOS zoom-on-focus */
}
@media (max-width: 520px) {
  .sp-wz-checkout .sp-wz-seg { grid-template-columns: 1fr; }
  .sp-wz-checkout .sp-wz-field-row { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   BUNDLES — shown under the license list

   The card is a <button>, and Astra paints bare buttons on :focus —
   that was the blue block after clicking. Every state is pinned here
   so the parent theme cannot colour them.
   ══════════════════════════════════════════════════════════════ */
.sp-wz-bundles { margin: 30px 0 4px; }
.sp-wz-bundles[hidden] { display: none; }

.sp-wz-bundles-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 16px;
  border-bottom: 1px solid var(--ac-border);
}
.sp-wz-bundles-head strong {
  font-size: 15px; font-weight: 800; letter-spacing: -.015em; color: var(--ac-text);
}
.sp-wz-bundles-head span { font-size: 12.5px; color: var(--ac-text-3); }

.sp-wz-bundle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  align-items: stretch;
}

/* ── Card ── */
.sp-wz-overlay .sp-wz-bundle {
  position: relative;
  display: flex; flex-direction: column;
  gap: 0;
  width: 100%;
  text-align: left;
  padding: 22px 20px 20px;
  background: #fff;
  border: 1px solid var(--ac-border);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(15,15,26,.04);
  cursor: pointer;
  font-family: var(--ac-font);
  color: var(--ac-text);
  -webkit-appearance: none; appearance: none;
  transition: border-color .2s, box-shadow .2s, transform .16s, background .2s;
}
.sp-wz-overlay .sp-wz-bundle:hover {
  background: #fff;
  border-color: rgba(15,15,26,.28);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(15,15,26,.10);
  color: var(--ac-text);
}
.sp-wz-overlay .sp-wz-bundle:focus,
.sp-wz-overlay .sp-wz-bundle:active {
  background: #fff; color: var(--ac-text); outline: none; box-shadow: 0 1px 2px rgba(15,15,26,.04);
}
.sp-wz-overlay .sp-wz-bundle:focus-visible {
  outline: 2px solid var(--ac-text); outline-offset: 3px;
}
.sp-wz-overlay .sp-wz-bundle.is-pop { border-color: #e3c48d; }

/* ── Selected — solid black, like the Total card ── */
.sp-wz-overlay .sp-wz-bundle.is-on,
.sp-wz-overlay .sp-wz-bundle.is-on:hover,
.sp-wz-overlay .sp-wz-bundle.is-on:focus,
.sp-wz-overlay .sp-wz-bundle.is-on:active {
  background: var(--ac-text);
  border-color: var(--ac-text);
  color: #fff;
  box-shadow: 0 14px 32px rgba(15,15,26,.26);
  transform: translateY(-2px);
}

/* ── Ribbon ── */
.sp-wz-bundle-star {
  position: absolute; top: 14px; right: 14px;
  display: inline-flex; align-items: center;
  background: #f2e3c4; color: #6b5015;
  font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 20px;
  white-space: nowrap;
}
.sp-wz-bundle.is-on .sp-wz-bundle-star { background: rgba(255,255,255,.16); color: #fff; }

/* ── Head ── */
.sp-wz-bundle-name {
  font-size: 18px; font-weight: 800; letter-spacing: -.03em;
  line-height: 1.15; color: inherit; padding-right: 76px;
}
.sp-wz-bundle-desc {
  font-size: 12.5px; line-height: 1.5; margin-top: 6px;
  color: var(--ac-text-2);
}
.sp-wz-bundle.is-on .sp-wz-bundle-desc { color: rgba(255,255,255,.6); }

/* ── Price, straight after the name — the reason to look ── */
.sp-wz-bundle-foot {
  margin-top: 14px;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.sp-wz-bundle-foot b {
  font-size: 30px; font-weight: 900; letter-spacing: -.045em; line-height: 1;
  color: inherit; font-variant-numeric: tabular-nums;
}
.sp-wz-bundle-foot .sp-wz-was { font-size: 13.5px; margin: 0; }
.sp-wz-bundle.is-on .sp-wz-was { color: rgba(255,255,255,.5) !important; }
.sp-wz-bundle .sp-wz-off { font-size: 10.5px; padding: 3px 6px; }
.sp-wz-bundle.is-on .sp-wz-off { background: #fff; color: var(--ac-text); }

/* ── Contents ── */
.sp-wz-bundle-list {
  list-style: none; margin: 16px 0 0; padding: 14px 0 0;
  border-top: 1px solid var(--ac-border);
  display: flex; flex-direction: column; gap: 8px;
  flex: 1;
}
.sp-wz-bundle.is-on .sp-wz-bundle-list { border-top-color: rgba(255,255,255,.16); }
.sp-wz-bundle-list li {
  font-size: 12.5px; line-height: 1.4;
  color: var(--ac-text-2);
  padding-left: 22px; position: relative;
}
.sp-wz-bundle.is-on .sp-wz-bundle-list li { color: rgba(255,255,255,.82); }
.sp-wz-bundle-list li::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--ac-surface-2);
}
.sp-wz-bundle.is-on .sp-wz-bundle-list li::before { background: rgba(255,255,255,.16); }
.sp-wz-bundle-list li::after {
  content: ""; position: absolute; left: 4px; top: 5px;
  width: 7px; height: 3.5px;
  border-left: 1.7px solid currentColor;
  border-bottom: 1.7px solid currentColor;
  transform: rotate(-45deg);
  opacity: .85;
}

/* ── Action — reads as a real button ── */
.sp-wz-bundle-pick {
  margin-top: 18px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 42px;
  border-radius: 10px;
  background: var(--ac-text);
  color: #fff;
  font-size: 13px; font-weight: 800; letter-spacing: -.005em;
  transition: background .2s, color .2s;
}
.sp-wz-bundle:hover .sp-wz-bundle-pick { background: #000; }
.sp-wz-bundle.is-on .sp-wz-bundle-pick {
  background: #fff;
  color: var(--ac-text);
}
.sp-wz-bundle.is-on .sp-wz-bundle-pick::before {
  content: ""; width: 15px; height: 15px; flex: 0 0 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none'%3E%3Cpolyline points='5 12 10 17 19 7' stroke='%23141414' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px 15px no-repeat;
}

@media (max-width: 560px) {
  .sp-wz-bundle-grid { grid-template-columns: 1fr; }
  .sp-wz-bundle-foot b { font-size: 26px; }
  .sp-wz-bundle-name { padding-right: 0; }
  .sp-wz-bundle-star { position: static; align-self: flex-start; margin-bottom: 10px; }
}

/* ══════════════════════════════════════════════════════════════
   POPUP SIZE
   max-width is set five times further up this file; this is the
   one that wins, so change the size here.
   ══════════════════════════════════════════════════════════════ */
.sp-wz-overlay .sp-wz {
  max-width: 1280px;
  max-height: 94vh;
}
/* Give the panels the extra room rather than padding the shell */
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-left  { padding: 34px 44px 38px; }
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-right { padding: 34px 32px 38px; }
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-cols  { min-height: 620px; }
/* The form column keeps its comfortable measure — a wider popup should
   give the buyer more breathing room, not longer input boxes. */
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-left > * { max-width: 560px; }

@media (max-width: 1340px) {
  .sp-wz-overlay .sp-wz { max-width: calc(100vw - 48px); }
}
@media (max-width: 860px) {
  .sp-wz-overlay .sp-wz-checkout .sp-wz-co-left  { padding: 22px 20px 26px; }
  .sp-wz-overlay .sp-wz-checkout .sp-wz-co-right { padding: 20px; }
  .sp-wz-overlay .sp-wz-checkout .sp-wz-co-cols  { min-height: 0; }
}

/* ══════════════════════════════════════════════════════════════
   ENTERPRISE / QUOTE-ONLY PANEL
   Was an intro line and a button floating in white space. Now it
   carries what the buyer needs to judge the license before asking
   for a quote.
   ══════════════════════════════════════════════════════════════ */
.sp-wz-ent { padding: 4px 2px 2px; }

.sp-wz-ent-intro {
  font-size: 14px; line-height: 1.6; color: var(--ac-text-2);
  margin: 0 0 20px;
}

.sp-wz-ent-block { margin-bottom: 20px; }
.sp-wz-ent-label {
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ac-text-3);
  margin-bottom: 10px;
}

/* What it covers */
.sp-wz-ent-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px;
}
.sp-wz-ent-grid li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; line-height: 1.45; color: var(--ac-text);
}
.sp-wz-ent-grid li svg { flex: 0 0 13px; margin-top: 3px; color: var(--ac-text); opacity: .5; }

/* How it works */
.sp-wz-ent-steps {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.sp-wz-ent-steps li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 13px; line-height: 1.5; color: var(--ac-text-2);
}
.sp-wz-ent-steps b {
  flex: 0 0 21px; width: 21px; height: 21px;
  border-radius: 50%;
  background: var(--ac-surface-2); color: var(--ac-text);
  font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}

/* Actions */
.sp-wz-ent-actions {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 22px;
}
.sp-wz-ent-actions .sp-wz-sales { width: auto; flex: 1 1 260px; margin-bottom: 0; }
.sp-wz-ent-second {
  flex: 0 0 auto;
  font-size: 13px; font-weight: 700;
  color: var(--ac-text-2) !important;
  text-decoration: none !important;
  padding: 13px 16px; border-radius: 12px;
  border: 1.5px solid var(--ac-border);
  transition: border-color .18s, color .18s;
}
.sp-wz-ent-second:hover { border-color: var(--ac-text); color: var(--ac-text) !important; }

.sp-wz-ent-note {
  font-size: 11.5px; line-height: 1.55; color: var(--ac-text-3);
  margin: 14px 0 0;
}

@media (max-width: 640px) {
  .sp-wz-ent-grid { grid-template-columns: 1fr; }
  .sp-wz-ent-actions .sp-wz-sales,
  .sp-wz-ent-second { flex: 1 1 100%; text-align: center; }
}

/* ══════════════════════════════════════════════════════════════
   TYPE TESTER — containment + description

   The preview line is `white-space: nowrap`, and the grid column was
   `1fr` (which floors at min-content). A long specimen at 32px+ made
   that min-content enormous, so the column grew and shoved the CTA
   card off the right edge. minmax(0,…) lets the column shrink and the
   ellipsis do its job.
   ══════════════════════════════════════════════════════════════ */
.sp-body { grid-template-columns: minmax(0, 1fr) 400px; }
.sp-tester { min-width: 0; }
.sp-wt-rows,
.sp-wt-row { min-width: 0; max-width: 100%; }
.sp-wt-preview {
  min-width: 0;
  max-width: 100%;
  display: block;
}
.sp-toolbar, .sp-toolbar-input-wrap { min-width: 0; }

/* Style name above each line — hidden, the specimen speaks for itself */
.sp-wt-name { display: none !important; }

/* ── Description under the specimen ── */
.sp-tester-about {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--ac-border);
}
.sp-tester-about h3 {
  font-size: 17px; font-weight: 800; letter-spacing: -.02em;
  color: var(--ac-text); margin: 0 0 12px;
}
.sp-tester-about p {
  font-size: 14.5px; line-height: 1.7; color: var(--ac-text-2);
  margin: 0 0 12px;
}
.sp-tester-about p:last-child { margin-bottom: 0; }

/* The 1024px stack is already handled in the Responsive block above —
   only the minmax floor needs restating there. */
@media (max-width: 1024px) {
  .sp-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .sp-tester-about { margin-top: 26px; padding-top: 20px; }
  .sp-tester-about h3 { font-size: 16px; }
  .sp-tester-about p { font-size: 14px; }
}

/* Checklist now sits inside the tester description */
.sp-tester-about .sp-checklist {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--ac-border);
  gap: 10px;
}

/* ══════════════════════════════════════════════════════════════
   SINGLE-TIER LICENSE PANEL
   The license structure has one tier per license, so the panel
   states the terms and offers one decision — no option list.
   ══════════════════════════════════════════════════════════════ */
.sp-wz-sl { padding: 2px 0 0; }
.sp-wz-sl-intro {
  font-size: 14px; line-height: 1.65; color: var(--ac-text-2);
  margin: 0 0 20px;
}

.sp-wz-sl-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 26px;
  margin-bottom: 22px;
}
.sp-wz-sl-label {
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ac-text-3);
  margin-bottom: 11px;
}
.sp-wz-sl-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sp-wz-sl-col li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13px; line-height: 1.45;
}
.sp-wz-sl-col li svg { flex: 0 0 12px; margin-top: 3px; }
.sp-wz-sl-col--yes li { color: var(--ac-text); }
.sp-wz-sl-col--yes li svg { color: #1a7f45; }
.sp-wz-sl-col--no  li { color: var(--ac-text-3); }
.sp-wz-sl-col--no  li svg { color: #c05252; opacity: .8; }

/* Buy row — price and the single action, side by side */
.sp-wz-sl-buy {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid var(--ac-border);
}
.sp-wz-sl-price {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}
.sp-wz-sl-price b {
  font-size: 30px; font-weight: 900; letter-spacing: -.045em;
  line-height: 1; color: var(--ac-text);
}
.sp-wz-sl-price .sp-wz-was { font-size: 14px; margin: 0; }
.sp-wz-sl-price span {
  flex-basis: 100%;
  font-size: 11.5px; font-weight: 500; color: var(--ac-text-3);
  margin-top: 4px;
}

.sp-wz-overlay .sp-wz-sl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 210px; height: 50px; padding: 0 26px;
  background: var(--ac-text); color: #fff;
  border: 1.5px solid var(--ac-text); border-radius: 12px;
  font-family: var(--ac-font); font-size: 14.5px; font-weight: 800;
  letter-spacing: -.01em; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  box-shadow: 0 4px 14px rgba(15,15,26,.16);
  transition: background .18s, color .18s, transform .12s, box-shadow .18s;
}
.sp-wz-overlay .sp-wz-sl-btn:hover {
  background: #000; color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(15,15,26,.24);
}
.sp-wz-overlay .sp-wz-sl-btn:focus { outline: none; }
.sp-wz-overlay .sp-wz-sl-btn:focus-visible { outline: 2px solid var(--ac-text); outline-offset: 3px; }
/* Selected — quiet, so attention moves on to the next license */
.sp-wz-overlay .sp-wz-sl-btn.is-on,
.sp-wz-overlay .sp-wz-sl-btn.is-on:hover {
  background: #fff; color: var(--ac-text);
  border-color: var(--ac-text);
  box-shadow: none; transform: none;
}

@media (max-width: 640px) {
  .sp-wz-sl-cols { grid-template-columns: 1fr; gap: 20px; }
  .sp-wz-sl-buy { flex-direction: column; align-items: stretch; }
  .sp-wz-overlay .sp-wz-sl-btn { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   ENTERPRISE — premium treatment
   ══════════════════════════════════════════════════════════════ */
.sp-wz-ent-hero {
  background: var(--ac-text);
  color: #fff;
  border-radius: 16px;
  padding: 26px 26px 24px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
/* soft sheen so the black panel does not read as a flat block */
.sp-wz-ent-hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.14), transparent 60%);
  pointer-events: none;
}
.sp-wz-ent-eyebrow {
  display: inline-block;
  font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: #e3c48d;
  border: 1px solid rgba(227,196,141,.4);
  border-radius: 20px; padding: 4px 11px;
  margin-bottom: 14px;
}
.sp-wz-ent-hero h4 {
  font-size: 24px; font-weight: 800; letter-spacing: -.035em;
  color: #fff; margin: 0 0 8px; line-height: 1.15;
}
.sp-wz-ent-hero p {
  font-size: 13.5px; line-height: 1.65;
  color: rgba(255,255,255,.68); margin: 0; max-width: 52ch;
}

.sp-wz-ent-trust {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 18px;
}
.sp-wz-ent-trust span {
  font-size: 11.5px; font-weight: 600; color: var(--ac-text-2);
  background: var(--ac-surface);
  border: 1px solid var(--ac-border);
  border-radius: 20px; padding: 6px 12px;
}

/* ══════════════════════════════════════════════════════════════
   LICENSE LIST — collapsed rows and expanded panel
   One price per license now, so the row is a headline + price and
   the panel is the full statement of terms. Padding is set on both
   sides of the fold so the black head and white body line up.
   ══════════════════════════════════════════════════════════════ */
.sp-wz-list {
  display: flex; flex-direction: column; gap: 12px;
}

.sp-wz-overlay .sp-wz-acc {
  border: 1px solid var(--ac-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15,15,26,.04);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .14s;
}
.sp-wz-overlay .sp-wz-acc:hover {
  border-color: rgba(15,15,26,.24);
  box-shadow: 0 8px 22px rgba(15,15,26,.08);
  transform: translateY(-1px);
}
.sp-wz-overlay .sp-wz-acc.is-open {
  border-color: var(--ac-text);
  box-shadow: 0 12px 30px rgba(15,15,26,.13);
  transform: none;
}
.sp-wz-overlay .sp-wz-acc.is-sel:not(.is-open) { border-color: var(--ac-text); }

/* ── Row ── */
.sp-wz-overlay .sp-wz-acc-head {
  gap: 16px;
  padding: 20px 22px;
  align-items: center;
}
.sp-wz-overlay .sp-wz-litem-ic {
  width: 46px; height: 46px; flex: 0 0 46px;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ac-surface);
  color: var(--ac-text);
  transition: background .2s, color .2s;
}
.sp-wz-overlay .sp-wz-litem-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sp-wz-overlay .sp-wz-litem-name {
  font-size: 16px; font-weight: 800; letter-spacing: -.025em; line-height: 1.2;
}
.sp-wz-overlay .sp-wz-litem-desc {
  font-size: 12.5px; line-height: 1.45; color: var(--ac-text-2);
}
.sp-wz-overlay .sp-wz-litem-sel {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700;
}
.sp-wz-overlay .sp-wz-chev { flex: 0 0 18px; margin-left: 4px; }

/* The panel repeats the price right above the button, so the head
   drops it once open — two prices two inches apart reads as a bug. */
.sp-wz-overlay .sp-wz-acc.is-open .sp-wz-litem-price { display: none; }

/* ── Panel ── */
.sp-wz-overlay .sp-wz-acc-body { padding: 24px 22px 22px; }
.sp-wz-sl { padding: 0; }
.sp-wz-sl-intro {
  font-size: 13.5px; line-height: 1.65; color: var(--ac-text-2);
  margin: 0 0 22px; max-width: 68ch;
}

.sp-wz-sl-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 34px;
  margin-bottom: 24px;
}
.sp-wz-sl-label {
  font-size: 10px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ac-text-3);
  padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 1px solid var(--ac-border);
}
.sp-wz-sl-col ul { gap: 11px; }
.sp-wz-sl-col li {
  gap: 10px;
  font-size: 13.5px; line-height: 1.5;
}
.sp-wz-sl-col li svg { margin-top: 4px; }
.sp-wz-sl-col li span { min-width: 0; }

/* ── Buy row ── */
.sp-wz-sl-buy {
  gap: 20px;
  padding: 20px 0 0;
  border-top: 1px solid var(--ac-border);
}
.sp-wz-sl-price { row-gap: 0; }
.sp-wz-sl-price b { font-size: 34px; }
.sp-wz-sl-price .sp-wz-was { font-size: 15px; }
.sp-wz-sl-price span { margin-top: 6px; }
.sp-wz-overlay .sp-wz-sl-btn { min-width: 220px; height: 52px; font-size: 15px; border-radius: 13px; }

@media (max-width: 700px) {
  .sp-wz-overlay .sp-wz-acc-head { padding: 16px; gap: 13px; }
  .sp-wz-overlay .sp-wz-litem-ic { width: 40px; height: 40px; flex-basis: 40px; border-radius: 11px; }
  .sp-wz-overlay .sp-wz-acc-body { padding: 20px 16px 18px; }
  .sp-wz-sl-cols { grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; }
  .sp-wz-sl-price b { font-size: 30px; }
}

/* Reassurance strip under the buy row — the questions people ask
   right before paying, answered without another click. */
.sp-wz-sl-trust {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin-top: 18px;
}
.sp-wz-sl-trust span {
  font-size: 11.5px; font-weight: 600; color: var(--ac-text-2);
  background: var(--ac-surface);
  border: 1px solid var(--ac-border);
  border-radius: 20px; padding: 6px 12px;
}

/* ══════════════════════════════════════════════════════════════
   DISCOUNT + LESS READING
   The saving is the strongest reason to act, so it gets its own
   banner line above the figures rather than a small red chip
   competing with the price.
   ══════════════════════════════════════════════════════════════ */

/* Collapsed row: keep the description to one line */
.sp-wz-overlay .sp-wz-litem-desc {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Buy row ── */
.sp-wz-sl-buy.has-off {
  background: linear-gradient(180deg, #fff7f5 0%, #fff 100%);
  border: 1px solid #f2d5cf;
  border-radius: 14px;
  padding: 18px 20px;
  margin-top: 4px;
}
.sp-wz-sl-price { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }

/* Saving banner */
.sp-wz-sl-save {
  display: inline-flex; align-items: center;
  background: #d94b4b; color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: -.005em;
  padding: 5px 11px; border-radius: 7px;
  margin-bottom: 9px;
  font-variant-numeric: tabular-nums;
}

.sp-wz-sl-figs { display: flex; align-items: baseline; gap: 10px; }
.sp-wz-sl-figs b {
  font-size: 38px; font-weight: 900; letter-spacing: -.05em; line-height: 1;
  color: var(--ac-text); font-variant-numeric: tabular-nums;
}
.sp-wz-sl-figs .sp-wz-was {
  font-size: 17px; font-weight: 600; margin: 0;
  color: var(--ac-text-3);
  text-decoration-thickness: 2px;
}
.sp-wz-sl-note {
  font-size: 11.5px; font-weight: 500; color: var(--ac-text-3);
  margin-top: 7px;
}

/* ── "+N more" ── */
.sp-wz-overlay .sp-wz-sl-more {
  margin-top: 11px; padding: 0;
  background: none; border: none;
  font-family: var(--ac-font);
  font-size: 12px; font-weight: 700;
  color: var(--ac-text-2);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.sp-wz-overlay .sp-wz-sl-more:hover { color: var(--ac-text); }

/* ── Trust chips: quieter, they are reassurance not content ── */
.sp-wz-sl-trust { margin-top: 16px; gap: 6px; }
.sp-wz-sl-trust span {
  font-size: 11px; padding: 5px 10px;
  background: none; color: var(--ac-text-3);
}

/* Collapsed row saving chip — carries the offer before the panel opens */
.sp-wz-list .sp-wz-litem-price .sp-wz-off {
  font-size: 10.5px; font-weight: 800;
  padding: 3px 6px; border-radius: 5px;
}

@media (max-width: 700px) {
  .sp-wz-sl-figs b { font-size: 32px; }
  .sp-wz-sl-buy.has-off { padding: 16px; }
}

/* Two earlier `.sp-wz-sl-price span` rules were written when the note was
   the only span in this block. They now also catch the saving banner and
   the figure wrapper, so both are pinned back here. */
.sp-wz-sl-price .sp-wz-sl-save {
  flex-basis: auto;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  margin-top: 0;
}
.sp-wz-sl-price .sp-wz-sl-figs {
  flex-basis: auto;
  font-size: inherit;
  margin-top: 0;
}
.sp-wz-sl-price .sp-wz-sl-note {
  flex-basis: auto;
  font-size: 11.5px;
  color: var(--ac-text-3);
  margin-top: 7px;
}

/* ══════════════════════════════════════════════════════════════
   CHECKOUT SUMMARY — modern pass
   ══════════════════════════════════════════════════════════════ */
.sp-wz-checkout .sp-wz-co-right::before {
  font-size: 10.5px; letter-spacing: .13em; margin-bottom: 16px;
}

/* ── Countdown: one compact strip, not a tall card ── */
.sp-wz-checkout .sp-wz-co-right .sp-wz-promo {
  padding: 11px 14px;
  border-radius: 12px;
  border-left-width: 3px;
  margin-bottom: 14px;
  gap: 10px;
}
.sp-wz-checkout .sp-wz-promo-tag { font-size: 10px; letter-spacing: .08em; }
.sp-wz-checkout .sp-wz-promo-txt { font-size: 11px; line-height: 1.35; }
.sp-wz-checkout .sp-wz-promo-clock { font-size: 21px; }

/* ── Product card ── */
.sp-wz-checkout .sp-wz-co-right .sp-wz-co-prod {
  padding: 12px; gap: 12px; margin-bottom: 12px; border-radius: 14px;
}
.sp-wz-checkout .sp-wz-co-thumb { width: 52px; height: 52px; border-radius: 10px; flex: 0 0 52px; }
.sp-wz-checkout .sp-wz-co-prodtxt strong { font-size: 15px; letter-spacing: -.02em; }
.sp-wz-checkout .sp-wz-co-prodtxt span { font-size: 11.5px; color: var(--ac-text-3); }

/* ── Line items ── */
.sp-wz-checkout .sp-wz-co-item { padding: 13px 14px; border-radius: 14px; }
.sp-wz-checkout .sp-wz-co-item-top { gap: 11px; align-items: center; }
.sp-wz-checkout .sp-wz-co-iic { width: 30px; height: 30px; flex-basis: 30px; border-radius: 9px; }
.sp-wz-checkout .sp-wz-co-itxt strong { font-size: 13.5px; line-height: 1.3; }
.sp-wz-checkout .sp-wz-co-ip {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  justify-content: flex-end; font-size: 14.5px;
}
.sp-wz-checkout .sp-wz-co-ip .sp-wz-was { font-size: 12px; margin: 0; }
.sp-wz-checkout .sp-wz-co-ip .sp-wz-off { font-size: 10px; padding: 2px 5px; }

/* ── Money rows ── */
.sp-wz-checkout .sp-wz-co-rows { margin-top: 16px; }
.sp-wz-checkout .sp-wz-co-row { padding: 12px 2px; font-size: 13.5px; }
.sp-wz-checkout .sp-wz-co-row:last-child { border-bottom: none; }
.sp-wz-checkout .sp-wz-co-disc,
.sp-wz-checkout .sp-wz-co-disc strong { color: #1a7f45; font-weight: 700; }

/* ── Total ── */
.sp-wz-checkout .sp-wz-co-total {
  margin-top: 6px; padding: 18px 2px 0;
  border-top: 2px solid var(--ac-text);
}
.sp-wz-checkout .sp-wz-co-total strong { font-size: 36px; }
.sp-wz-checkout .sp-wz-co-total span { font-size: 14.5px; }
.sp-wz-checkout .sp-wz-co-total span small { font-size: 11px; }

/* ── Payment marks ── */
.sp-wz-checkout .sp-wz-co-secure {
  margin-top: 18px; padding-top: 16px;
  gap: 8px; flex-wrap: wrap;
}
.sp-wz-checkout .sp-wz-co-secure .sp-pay {
  transform: none;
  border: 1px solid var(--ac-border);
  border-radius: 7px;
  padding: 5px 9px;
  background: #fff;
  display: inline-flex; align-items: center;
}

/* ══════════════════════════════════════════════════════════════
   LICENSE ROW PRICE — final pass
   Two right-aligned lines: the old price and the saving sit small
   above, the price they pay carries the weight below.
   ══════════════════════════════════════════════════════════════ */
.sp-wz-list .sp-wz-litem-price {
  gap: 4px;
  padding-left: 10px;
  min-width: 96px;
  align-items: flex-end;
}
.sp-wz-list .sp-wz-lp-top {
  gap: 7px;
  opacity: .95;
}
.sp-wz-list .sp-wz-litem-price .sp-wz-was {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ac-text-3);
  text-decoration-thickness: 1.5px;
}
.sp-wz-list .sp-wz-litem-price .sp-wz-off {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .01em;
  padding: 2px 5px;
  border-radius: 4px;
  background: #d94b4b;
}
.sp-wz-list .sp-wz-lp-now b {
  font-size: 25px;
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: 1;
}

/* Open/selected row is black — keep the same hierarchy on it */
.sp-wz-acc.is-open .sp-wz-litem-price .sp-wz-was,
.sp-wz-acc.is-sel  .sp-wz-litem-price .sp-wz-was { color: rgba(255,255,255,.5); }
.sp-wz-acc.is-open .sp-wz-lp-now b,
.sp-wz-acc.is-sel  .sp-wz-lp-now b { color: #fff; }

@media (max-width: 700px) {
  .sp-wz-list .sp-wz-litem-price { min-width: 0; padding-left: 6px; }
  .sp-wz-list .sp-wz-lp-now b { font-size: 21px; }
}

/* ══════════════════════════════════════════════════════════════
   STEP 1 LAYOUTS — cards, guided, slider, table
   Chosen in Settings → Outfonts Licenses → How licenses are shown.
   The accordion keeps its own styles further up this file.
   ══════════════════════════════════════════════════════════════ */
.sp-wz-list--cards,
.sp-wz-list--guided,
.sp-wz-list--slider,
.sp-wz-list--table { display: block; }

/* ── Shared card ── */
.sp-wz-lc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 14px;
  align-items: stretch;
}
.sp-wz-lc-grid--one { grid-template-columns: minmax(0, 420px); }

.sp-wz-lc {
  position: relative;
  display: flex; flex-direction: column;
  padding: 22px 20px 20px;
  background: #fff;
  border: 1.5px solid var(--ac-border);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(15,15,26,.04);
  transition: border-color .2s, box-shadow .2s, transform .14s;
}
.sp-wz-lc:hover { border-color: rgba(15,15,26,.26); box-shadow: 0 10px 26px rgba(15,15,26,.09); transform: translateY(-2px); }
.sp-wz-lc.is-pop { border-color: #e3c48d; }
.sp-wz-lc.is-rec { border-color: var(--ac-text); box-shadow: 0 12px 30px rgba(15,15,26,.15); }
.sp-wz-lc.is-on  { border-color: var(--ac-text); background: #fcfcfc; }

.sp-wz-lc-flag {
  position: absolute; top: -10px; left: 18px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: var(--ac-text); color: #fff;
  padding: 4px 10px; border-radius: 20px; white-space: nowrap;
}
.sp-wz-lc-flag.is-pop { background: #e3c48d; color: #3d2c0a; }

.sp-wz-lc-ic {
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--ac-surface); color: var(--ac-text);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.sp-wz-lc h5 {
  font-size: 17px; font-weight: 800; letter-spacing: -.03em;
  margin: 0 0 4px; color: var(--ac-text); line-height: 1.2;
}
.sp-wz-lc-desc { font-size: 12px; line-height: 1.5; color: var(--ac-text-2); margin: 0 0 16px; }

/* Price */
.sp-wz-lc-price { display: flex; flex-direction: column; margin-bottom: 16px; }
.sp-wz-lc-save {
  align-self: flex-start;
  background: #d94b4b; color: #fff;
  font-size: 10.5px; font-weight: 800;
  padding: 4px 9px; border-radius: 6px; margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.sp-wz-lc-figs { display: flex; align-items: baseline; gap: 8px; }
.sp-wz-lc-figs b {
  font-size: 30px; font-weight: 900; letter-spacing: -.045em; line-height: 1;
  color: var(--ac-text); font-variant-numeric: tabular-nums;
}
.sp-wz-lc-figs .sp-wz-was { font-size: 14px; margin: 0; }
.sp-wz-lc-price b.is-quote { font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.sp-wz-lc-price > span:last-child { font-size: 11px; color: var(--ac-text-3); margin-top: 6px; }

/* Feature list */
.sp-wz-lc-feats {
  list-style: none; margin: 0 0 18px; padding: 16px 0 0;
  border-top: 1px solid var(--ac-border);
  display: flex; flex-direction: column; gap: 8px; flex: 1;
}
.sp-wz-lc-feats li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px; line-height: 1.45; color: var(--ac-text-2);
}
.sp-wz-lc-feats li svg { flex: 0 0 12px; margin-top: 3px; color: #1a7f45; }

/* Action */
.sp-wz-overlay .sp-wz-lc-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 46px; padding: 0 18px;
  background: var(--ac-text); color: #fff !important;
  border: 1.5px solid var(--ac-text); border-radius: 11px;
  font-family: var(--ac-font); font-size: 13.5px; font-weight: 800;
  text-decoration: none !important; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  transition: background .18s, color .18s;
}
.sp-wz-overlay .sp-wz-lc-btn:hover { background: #000; color: #fff !important; }
.sp-wz-overlay .sp-wz-lc-btn.is-on,
.sp-wz-overlay .sp-wz-lc-btn.is-on:hover { background: #fff; color: var(--ac-text) !important; }
.sp-wz-overlay .sp-wz-lc-btn.is-quote {
  background: #fff; color: var(--ac-text) !important; border-color: var(--ac-border);
}
.sp-wz-overlay .sp-wz-lc-btn.is-quote:hover { border-color: var(--ac-text); background: #fff; color: var(--ac-text) !important; }

/* ── Guided question ── */
.sp-wz-ask {
  background: var(--ac-surface);
  border: 1px solid var(--ac-border);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 20px;
}
.sp-wz-ask-q { font-size: 15px; font-weight: 800; letter-spacing: -.02em; color: var(--ac-text); margin-bottom: 12px; }
.sp-wz-ask-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-wz-overlay .sp-wz-ask-btn {
  background: #fff; color: var(--ac-text);
  border: 1.5px solid var(--ac-border); border-radius: 10px;
  padding: 10px 14px;
  font-family: var(--ac-font); font-size: 12.5px; font-weight: 700;
  cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: border-color .16s, background .16s, color .16s;
}
.sp-wz-overlay .sp-wz-ask-btn:hover { border-color: var(--ac-text-3); background: #fff; color: var(--ac-text); }
.sp-wz-overlay .sp-wz-ask-btn.is-on { background: var(--ac-text); border-color: var(--ac-text); color: #fff; }
.sp-wz-ask-note { font-size: 11.5px; color: var(--ac-text-3); margin-top: 11px; }

/* ── Slider ── */
.sp-wz-slider {
  background: var(--ac-surface);
  border: 1px solid var(--ac-border);
  border-radius: 16px;
  padding: 18px 20px 14px;
  margin-bottom: 20px;
}
.sp-wz-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 6px;
  background: var(--ac-surface-2);
  margin: 14px 0 10px; cursor: pointer;
}
.sp-wz-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ac-text); border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(15,15,26,.28); cursor: grab;
}
.sp-wz-range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ac-text); border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(15,15,26,.28); cursor: grab;
}
.sp-wz-range-marks { display: flex; justify-content: space-between; gap: 6px; }
.sp-wz-range-marks span {
  font-size: 11px; font-weight: 600; color: var(--ac-text-3);
  text-align: center; flex: 1;
}
.sp-wz-range-marks span.is-on { color: var(--ac-text); font-weight: 800; }

/* ── Comparison table ── */
.sp-wz-tb-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sp-wz-tb { width: 100%; border-collapse: collapse; min-width: 620px; }
.sp-wz-tb th, .sp-wz-tb td { padding: 12px 10px; text-align: center; vertical-align: middle; }
.sp-wz-tb thead th {
  border-bottom: 2px solid var(--ac-text);
  vertical-align: bottom;
}
.sp-wz-tb thead th.is-pop { background: #fdf8ee; border-radius: 12px 12px 0 0; }
.sp-wz-tb-h { width: 34%; }
.sp-wz-tb-name { display: block; font-size: 14.5px; font-weight: 800; letter-spacing: -.02em; color: var(--ac-text); }
.sp-wz-tb-price { display: block; font-size: 22px; font-weight: 900; letter-spacing: -.04em; margin: 5px 0 3px; color: var(--ac-text); font-variant-numeric: tabular-nums; }
.sp-wz-tb-desc { display: block; font-size: 10.5px; line-height: 1.4; color: var(--ac-text-3); }
.sp-wz-tb tbody tr { border-bottom: 1px solid var(--ac-border); }
.sp-wz-tb tbody tr:last-child { border-bottom: none; }
.sp-wz-tb-f { text-align: left; font-size: 12.5px; line-height: 1.45; color: var(--ac-text-2); }
.sp-wz-tb svg.yes { color: #1a7f45; }
.sp-wz-tb .no { color: var(--ac-border-2, #d4d4d4); }
.sp-wz-tb tbody tr:last-child td { padding-top: 18px; }

@media (max-width: 700px) {
  .sp-wz-lc-grid { grid-template-columns: 1fr; }
  .sp-wz-lc-grid--one { grid-template-columns: 1fr; }
  .sp-wz-ask-opts { flex-direction: column; }
  .sp-wz-overlay .sp-wz-ask-btn { width: 100%; text-align: left; }
  .sp-wz-range-marks span { font-size: 10px; }
}

/* ══════════════════════════════════════════════════════════════
   SIDE DRAWER
   Same markup as the modal — the overlay just carries .is-drawer.
   The page stays visible behind it, so it reads as a cart rather
   than as an interruption.
   ══════════════════════════════════════════════════════════════ */
.sp-wz-overlay.is-drawer {
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
}
.sp-wz-overlay.is-drawer .sp-wz {
  max-width: 720px;
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  border-radius: 0;
  transform: translateX(40px);
  box-shadow: -24px 0 60px rgba(15,15,26,.22);
  transition: transform .34s cubic-bezier(.22,.61,.36,1);
}
.sp-wz-overlay.is-drawer.is-open .sp-wz { transform: translateX(0); }

/* The two-column step 1 has no room in a drawer — stack it */
.sp-wz-overlay.is-drawer .sp-wz-cols--acc,
.sp-wz-overlay.is-drawer .sp-wz-co-cols {
  grid-template-columns: minmax(0, 1fr);
}
.sp-wz-overlay.is-drawer .sp-wz-col-right { position: static; }
/* Checkout is a single ordered column in both popup styles now — the
   drawer no longer needs to re-order it, only to drop the border. */
.sp-wz-overlay.is-drawer .sp-wz-checkout .sp-wz-co-right {
  border-right: none;
  border-bottom: none;
}
.sp-wz-overlay.is-drawer .sp-wz-checkout .sp-wz-co-left > * { max-width: none; }
.sp-wz-overlay.is-drawer .sp-wz-lc-grid { grid-template-columns: 1fr; }

@media (max-width: 760px) {
  .sp-wz-overlay.is-drawer .sp-wz { max-width: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   STEP 1 FOOTER — closes the column instead of leaving white space
   ══════════════════════════════════════════════════════════════ */
.sp-wz-foot { margin-top: 30px; }

.sp-wz-foot-help {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--ac-text);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.sp-wz-foot-ic {
  flex: 0 0 38px; width: 38px; height: 38px;
  border-radius: 11px;
  background: rgba(255,255,255,.12); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.sp-wz-foot-txt { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sp-wz-foot-txt strong { font-size: 14.5px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.sp-wz-foot-txt span { font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.62); }
.sp-wz-overlay .sp-wz-foot-btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  height: 42px; padding: 0 22px;
  background: #fff; color: var(--ac-text) !important;
  border-radius: 10px;
  font-size: 13px; font-weight: 800;
  text-decoration: none !important;
  transition: transform .14s;
}
.sp-wz-overlay .sp-wz-foot-btn:hover { transform: translateY(-1px); color: var(--ac-text) !important; }

.sp-wz-foot-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--ac-border);
  border: 1px solid var(--ac-border);
  border-radius: 14px;
  overflow: hidden;
}
.sp-wz-foot-facts > div {
  background: #fff; padding: 15px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.sp-wz-foot-facts strong { font-size: 12.5px; font-weight: 800; color: var(--ac-text); letter-spacing: -.01em; }
.sp-wz-foot-facts span { font-size: 11.5px; line-height: 1.5; color: var(--ac-text-3); }

/* ══════════════════════════════════════════════════════════════
   ACCORDION BODY — softer open, clearer reading
   ══════════════════════════════════════════════════════════════ */
@keyframes sp-wz-accin {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.sp-wz-acc-body { animation: sp-wz-accin .26s cubic-bezier(.22,.61,.36,1); }

/* Rows respond to the pointer so the panel feels alive, not printed */
.sp-wz-sl-col li {
  padding: 3px 6px; margin: 0 -6px;
  border-radius: 7px;
  transition: background .14s;
}
.sp-wz-sl-col li:hover { background: var(--ac-surface); }

/* Column headings carry a count — tells the buyer how much is left */
.sp-wz-sl-label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }

@media (max-width: 700px) {
  .sp-wz-foot-help { padding: 16px; }
  .sp-wz-overlay .sp-wz-foot-btn { width: 100%; }
}

.sp-wz-sl-label b {
  font-size: 10px; font-weight: 800;
  color: var(--ac-text-3);
  background: var(--ac-surface);
  border-radius: 20px; padding: 2px 7px;
  letter-spacing: 0;
}

/* ══════════════════════════════════════════════════════════════
   DRAWER FIXES + RADIO ROWS + INTEGRATED SUMMARY
   ══════════════════════════════════════════════════════════════ */

/* The WordPress admin bar sits above everything and was clipping the
   drawer's stepper. Only logged-in admins ever see this. */
body.admin-bar .sp-wz-overlay.is-drawer { padding-top: 32px; }
body.admin-bar .sp-wz-overlay.is-drawer .sp-wz { height: calc(100vh - 32px); max-height: calc(100vh - 32px); }
@media screen and (max-width: 782px) {
  body.admin-bar .sp-wz-overlay.is-drawer { padding-top: 46px; }
  body.admin-bar .sp-wz-overlay.is-drawer .sp-wz { height: calc(100vh - 46px); max-height: calc(100vh - 46px); }
}
/* Header must never scroll away or be covered */
.sp-wz-overlay.is-drawer .sp-wz-head { flex: 0 0 auto; }
.sp-wz-overlay.is-drawer .sp-wz-body { flex: 1 1 auto; min-height: 0; }

/* ── Radio indicator on each license row ── */
.sp-wz-radio {
  flex: 0 0 20px; width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--ac-border);
  background: #fff;
  position: relative;
  transition: border-color .16s, background .16s;
}
.sp-wz-radio.is-on { border-color: var(--ac-text); }
.sp-wz-radio.is-on::after {
  content: ""; position: absolute; inset: 3px;
  border-radius: 50%; background: var(--ac-text);
}
.sp-wz-acc:hover .sp-wz-radio { border-color: var(--ac-text-3); }
.sp-wz-acc.is-open .sp-wz-radio,
.sp-wz-acc.is-sel  .sp-wz-radio { border-color: #fff; background: transparent; }
.sp-wz-acc.is-open .sp-wz-radio.is-on::after,
.sp-wz-acc.is-sel  .sp-wz-radio.is-on::after { background: #fff; }
/* Quote-only rows are not selectable, so no radio */
.sp-wz-acc[data-slug="enterprise"] .sp-wz-radio { visibility: hidden; }

/* Short point labels read better a little tighter */
.sp-wz-sl-col li { font-size: 13px; line-height: 1.4; }

/* ══════════════════════════════════════════════════════════════
   ORDER SUMMARY — sits under the list, not in a floating card
   ══════════════════════════════════════════════════════════════ */
.sp-wz-overlay.is-drawer .sp-wz-cols--acc { display: flex; flex-direction: column; }
.sp-wz-overlay.is-drawer .sp-wz-col-right { padding: 0; margin-top: 26px; }
.sp-wz-overlay.is-drawer .sp-wz-sum-card {
  background: var(--ac-surface);
  border: 1px solid var(--ac-border);
  border-radius: 16px;
  padding: 20px;
  box-shadow: none;
}
.sp-wz-overlay.is-drawer .sp-wz-sum-h {
  font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ac-text-3); margin-bottom: 14px;
}
.sp-wz-overlay.is-drawer .sp-wz-sum-items { background: #fff; border-radius: 12px; }
.sp-wz-overlay.is-drawer .sp-wz-sum-empty { padding: 18px; text-align: center; }

/* Continue button is the last thing in the column — make it unmissable */
.sp-wz-overlay.is-drawer .sp-wz-continue,
.sp-wz-overlay.is-drawer #sp-wz-continue {
  height: 54px; font-size: 15px; border-radius: 13px;
}

/* ══════════════════════════════════════════════════════════════
   CHECKOUT — one column: form → summary → pay
   Two columns put the total beside the button; stacking puts it
   immediately above, which is the order people actually check in.
   ══════════════════════════════════════════════════════════════ */
.sp-wz-checkout .sp-wz-co-cols {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 660px;
  margin: 0 auto;
  min-height: 0;
}
.sp-wz-checkout .sp-wz-co-left  { order: 1; padding: 30px 30px 8px; background: #fff; }
.sp-wz-checkout .sp-wz-co-right { order: 2; }
.sp-wz-checkout .sp-wz-co-pay   { order: 3; padding: 4px 30px 34px; }

.sp-wz-checkout .sp-wz-co-left > * { max-width: none; }

/* Summary becomes a block in the flow, not a sidebar */
.sp-wz-checkout .sp-wz-co-right {
  position: static !important;
  background: none;
  border: none;
  padding: 8px 30px 8px;
  max-height: none;
  overflow: visible;
}
.sp-wz-checkout .sp-wz-co-right::before { margin-bottom: 12px; }

/* Payment section heading continues the numbering */
.sp-wz-checkout .sp-wz-co-pay .sp-wz-co-sec {
  margin-top: 4px; padding-top: 22px;
  border-top: 1px solid var(--ac-border);
}
.sp-wz-checkout .sp-wz-co-pay .sp-wz-co-note,
.sp-wz-checkout .sp-wz-co-pay .sp-wz-paypal,
.sp-wz-checkout .sp-wz-co-pay .sp-wz-err,
.sp-wz-checkout .sp-wz-co-pay .sp-wz-contact { margin-left: 33px; }

@media (max-width: 700px) {
  .sp-wz-checkout .sp-wz-co-left { padding: 22px 18px 6px; }
  .sp-wz-checkout .sp-wz-co-right { padding: 6px 18px; }
  .sp-wz-checkout .sp-wz-co-pay { padding: 4px 18px 26px; }
  .sp-wz-checkout .sp-wz-co-pay .sp-wz-co-note,
  .sp-wz-checkout .sp-wz-co-pay .sp-wz-paypal,
  .sp-wz-checkout .sp-wz-co-pay .sp-wz-err,
  .sp-wz-checkout .sp-wz-co-pay .sp-wz-contact { margin-left: 0; }
}

/* ══════════════════════════════════════════════════════════════
   YOUR SELECTION (step 1) — tidy up
   ══════════════════════════════════════════════════════════════ */
/* `hidden` lost to display:flex, so an empty Discount row was showing
   above the "Add code" row — two rows with the same label. */
.sp-wz-sum-row[hidden] { display: none !important; }

.sp-wz-sum-card {
  border-radius: 18px;
  padding: 20px;
  background: var(--ac-surface);
  border: 1px solid var(--ac-border);
}
.sp-wz-sum-h {
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ac-text-3);
  margin: 0 0 14px;
}
.sp-wz-sum-items { background: #fff; border: 1px solid var(--ac-border); border-radius: 13px; overflow: hidden; }
.sp-wz-sum-item { padding: 13px 14px; gap: 11px; align-items: center; }
.sp-wz-sum-item + .sp-wz-sum-item { border-top: 1px solid var(--ac-border); }
.sp-wz-sum-ic { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; background: var(--ac-surface); display: flex; align-items: center; justify-content: center; }
.sp-wz-sum-txt strong { font-size: 13.5px; font-weight: 800; letter-spacing: -.015em; }
.sp-wz-sum-txt em { font-size: 11.5px; color: var(--ac-text-3); }
.sp-wz-sum-pr { font-size: 14.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sp-wz-sum-empty { padding: 22px; text-align: center; font-size: 13px; color: var(--ac-text-3); }

.sp-wz-sum-rows { margin-top: 14px; }
.sp-wz-sum-row { padding: 10px 2px; font-size: 13px; border-bottom: 1px solid var(--ac-border); }
.sp-wz-sum-row:last-child { border-bottom: none; }
.sp-wz-sum-coupon span { color: var(--ac-text-3); }
.sp-wz-overlay .sp-wz-addcode {
  background: none; border: none; padding: 0;
  font-family: var(--ac-font); font-size: 12.5px; font-weight: 700;
  color: var(--ac-text); text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.sp-wz-sum-total {
  margin-top: 14px; padding-top: 16px;
  border-top: 2px solid var(--ac-text);
  display: flex; align-items: baseline; justify-content: space-between;
}
.sp-wz-sum-total span { font-size: 14.5px; font-weight: 800; }
.sp-wz-sum-total strong { font-size: 30px; font-weight: 900; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════════
   ENTERPRISE PANEL — premium
   ══════════════════════════════════════════════════════════════ */
.sp-wz-ent-hero {
  padding: 30px 28px 28px;
  border-radius: 20px;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(227,196,141,.20), transparent 58%),
    linear-gradient(160deg, #1c1c1c 0%, #0c0c0c 100%);
  border: 1px solid rgba(227,196,141,.22);
  margin-bottom: 26px;
}
.sp-wz-ent-hero::after { display: none; }
.sp-wz-ent-eyebrow {
  background: rgba(227,196,141,.12);
  border-color: rgba(227,196,141,.45);
  color: #e3c48d;
  letter-spacing: .16em;
  padding: 5px 13px;
}
.sp-wz-ent-hero h4 {
  font-size: 28px; letter-spacing: -.04em; margin: 16px 0 10px;
}
.sp-wz-ent-hero p { font-size: 14px; color: rgba(255,255,255,.62); }

/* Gold hairline separating the covered list */
.sp-wz-ent-label {
  display: flex; align-items: center; gap: 10px;
}
.sp-wz-ent-label::after {
  content: ""; flex: 1; height: 1px; background: var(--ac-border);
}
.sp-wz-ent-grid li { font-size: 13px; }
.sp-wz-ent-grid li svg { color: #b8862b; opacity: .9; }

.sp-wz-ent-steps b {
  background: var(--ac-text); color: #fff;
}
.sp-wz-overlay .sp-wz-ent-actions .sp-wz-sales {
  height: 52px; border-radius: 13px; font-size: 14.5px;
}
.sp-wz-ent-trust span {
  background: #fff;
  border-color: var(--ac-border);
}

/* ══════════════════════════════════════════════════════════════
   CHECKOUT — summary reads as a form section
   Same numbered heading, same indent, same rhythm as Account and
   Your details. It stops being a card pasted into a form.
   ══════════════════════════════════════════════════════════════ */
.sp-wz-checkout .sp-wz-promo { order: 0; margin: 0 30px 4px; }
.sp-wz-checkout .sp-wz-co-left  { order: 1; }
.sp-wz-checkout .sp-wz-co-right { order: 2; padding: 0 30px; }
.sp-wz-checkout .sp-wz-co-pay   { order: 3; }

/* No column label — the numbered heading does that job now */
.sp-wz-checkout .sp-wz-co-right::before { content: none; }

/* Product line: one quiet row, not a bordered card */
.sp-wz-checkout .sp-wz-co-right .sp-wz-co-prod {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0 0 14px 33px;
  margin: 0 0 14px;
  border-bottom: 1px solid var(--ac-border);
}

/* Items: plain rows sharing the form's left indent */
.sp-wz-checkout .sp-wz-co-items {
  margin: 0 0 4px;
  padding-left: 33px;
  gap: 0;
}
.sp-wz-checkout .sp-wz-co-item {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 11px 0;
}
.sp-wz-checkout .sp-wz-co-item + .sp-wz-co-item { border-top: 1px solid var(--ac-border); }
.sp-wz-checkout .sp-wz-co-iic { background: var(--ac-surface); }

/* Money rows and total line up with the fields above them */
.sp-wz-checkout .sp-wz-co-rows { margin: 0 0 0 33px; padding-top: 4px; }
.sp-wz-checkout .sp-wz-co-row { border-top: 1px solid var(--ac-border); border-bottom: none; padding: 12px 0; }
.sp-wz-checkout .sp-wz-co-total {
  margin: 0 0 0 33px;
  padding: 16px 0 0;
  border-top: 2px solid var(--ac-text);
}

/* ── Countdown at the top of the step ── */
.sp-wz-checkout .sp-wz-promo:not([hidden]) { display: flex; }

/* ── Card marks under the PayPal button ── */
.sp-wz-checkout .sp-wz-co-pay .sp-wz-co-secure {
  justify-content: flex-start;
  margin: 14px 0 0 33px;
  padding-top: 14px;
  border-top: 1px solid var(--ac-border);
}

@media (max-width: 700px) {
  .sp-wz-checkout .sp-wz-promo { margin: 0 18px 4px; }
  .sp-wz-checkout .sp-wz-co-right { padding: 0 18px; }
  .sp-wz-checkout .sp-wz-co-right .sp-wz-co-prod,
  .sp-wz-checkout .sp-wz-co-items { padding-left: 0; }
  .sp-wz-checkout .sp-wz-co-rows,
  .sp-wz-checkout .sp-wz-co-total { margin-left: 0; }
  .sp-wz-checkout .sp-wz-co-pay .sp-wz-co-secure { margin-left: 0; }
}

/* ══════════════════════════════════════════════════════════════
   CHECKOUT — layout corrections
   ══════════════════════════════════════════════════════════════ */

/* `align-self: start` was written for the old two-column layout. In a
   column flex container the cross axis is horizontal, so it shrank the
   summary to the width of its own text. */
.sp-wz-checkout .sp-wz-co-right {
  align-self: stretch;
  width: 100%;
  position: static;
  max-height: none;
  overflow: visible;
}

/* DOM order is now summary → payment, so the numbered headings count in
   the order they are read. No `order` shuffling left to go wrong. */
.sp-wz-checkout .sp-wz-co-left,
.sp-wz-checkout .sp-wz-co-right,
.sp-wz-checkout .sp-wz-co-pay { order: 0; }
.sp-wz-checkout .sp-wz-promo  { order: -1; }

/* Tighten the gap the form used to leave for a sidebar */
.sp-wz-checkout .sp-wz-co-left { padding-bottom: 4px; }
.sp-wz-checkout .sp-wz-co-right { padding-top: 4px; padding-bottom: 4px; }

/* ══════════════════════════════════════════════════════════════
   COUNTDOWN — stronger presence
   ══════════════════════════════════════════════════════════════ */
.sp-wz-checkout .sp-wz-promo,
.sp-wz-promo {
  background: linear-gradient(135deg, #d94b4b 0%, #b93636 100%);
  border: none;
  border-radius: 14px;
  padding: 14px 18px;
  gap: 14px;
  box-shadow: 0 6px 18px rgba(217,75,75,.28);
}
.sp-wz-promo-dot { background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.6); }
@keyframes sp-promo-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.6); }
  70%  { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.sp-wz-promo-tag {
  color: #fff;
  font-size: 11px;
  letter-spacing: .1em;
}
.sp-wz-promo-txt { color: rgba(255,255,255,.82); font-size: 12px; }

/* Digits in their own plate so they read as a clock */
.sp-wz-promo-clock {
  margin-left: auto;
  display: flex; align-items: center;
  background: rgba(0,0,0,.22);
  border-radius: 10px;
  padding: 7px 13px;
  font-size: 25px;
  font-weight: 900;
  letter-spacing: -.02em;
  color: #fff;
}
.sp-wz-promo-clock i { color: rgba(255,255,255,.55); }
.sp-wz-promo-clock.is-urgent { color: #fff; background: rgba(0,0,0,.38); }

@media (max-width: 560px) {
  .sp-wz-promo { padding: 12px 14px; gap: 10px; }
  .sp-wz-promo-clock { font-size: 21px; padding: 6px 10px; }
  .sp-wz-promo-txt { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   CHECKOUT — one spacing rhythm for the whole step

   The three blocks (form, summary, payment) each carried their own
   top and bottom padding, and every heading added its own margin on
   top of that. Between Country and Order summary those stacked into
   a gap wide enough to look like a mistake. Spacing now comes from
   the headings alone, so every section sits the same distance apart.
   ══════════════════════════════════════════════════════════════ */
.sp-wz-checkout .sp-wz-co-cols {
  padding: 30px 0 34px;
  gap: 0;
}
.sp-wz-checkout .sp-wz-co-left,
.sp-wz-checkout .sp-wz-co-right,
.sp-wz-checkout .sp-wz-co-pay {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 30px;
  padding-right: 30px;
}

/* Every numbered heading is its own divider, with identical spacing */
.sp-wz-checkout .sp-wz-co-sec {
  margin: 0 0 12px;
  padding-top: 26px;
  border-top: 1px solid var(--ac-border);
}
/* The first one follows the "Checkout" title, so no rule above it */
.sp-wz-checkout .sp-wz-co-left .sp-wz-co-sec:first-of-type {
  padding-top: 0;
  border-top: none;
}
/* Undo the older one-off that pushed the last heading down */
.sp-wz-checkout .sp-wz-co-left .sp-wz-co-sec:last-of-type { margin-top: 0; }

/* Sections need a little breathing room beneath their content */
.sp-wz-checkout .sp-wz-co-left  > .sp-wz-field:last-child,
.sp-wz-checkout .sp-wz-co-left  > .sp-wz-field-row:last-child { margin-bottom: 26px; }
.sp-wz-checkout .sp-wz-co-total { margin-bottom: 26px; }

/* Countdown keeps its own margin above the first heading */
.sp-wz-checkout .sp-wz-promo { margin: 0 30px 26px; }

@media (max-width: 700px) {
  .sp-wz-checkout .sp-wz-co-cols { padding: 22px 0 26px; }
  .sp-wz-checkout .sp-wz-co-left,
  .sp-wz-checkout .sp-wz-co-right,
  .sp-wz-checkout .sp-wz-co-pay { padding-left: 18px; padding-right: 18px; }
  .sp-wz-checkout .sp-wz-promo { margin: 0 18px 20px; }
}

/* min-height was for the old two-column layout, where the sidebar had to
   fill the panel. Stacked, it just pads the bottom of short checkouts. */
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-cols { min-height: 0; }

/* ══════════════════════════════════════════════════════════════
   CHECKOUT — final spacing + compact summary + wider popup

   Section spacing had accumulated across several passes, so older
   rules kept winning on specificity. Everything that controls the
   vertical rhythm of step 2 is consolidated here, scoped with the
   overlay so nothing earlier can override it.
   ══════════════════════════════════════════════════════════════ */

/* ── Wider shell ── */
.sp-wz-overlay .sp-wz { max-width: 1400px; }
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-cols { max-width: 720px; }
@media (max-width: 1460px) {
  .sp-wz-overlay .sp-wz { max-width: calc(100vw - 48px); }
}
.sp-wz-overlay.is-drawer .sp-wz { max-width: 780px; }

/* ── One rhythm, no stacking ── */
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-sec {
  margin: 0 0 14px !important;
  padding-top: 28px !important;
  border-top: 1px solid var(--ac-border) !important;
}
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-left .sp-wz-co-sec:first-of-type {
  padding-top: 0 !important;
  border-top: none !important;
}
/* Field blocks end their section; the heading below supplies the gap */
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-left > .sp-wz-field:last-child,
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-left > .sp-wz-field-row:last-child { margin-bottom: 0; }
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-total { margin-bottom: 0; }
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-left,
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-right,
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-pay { padding-top: 0; padding-bottom: 0; }

/* ── Order summary: compact ── */
/* Product line — one row, same height as a list item */
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-right .sp-wz-co-prod {
  padding: 0 0 12px 33px;
  margin-bottom: 0;
  gap: 11px;
  border-bottom: 1px solid var(--ac-border);
}
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-thumb {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 8px;
}
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-prodtxt strong { font-size: 13.5px; }
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-prodtxt span { font-size: 11px; }

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-item { padding: 10px 0; }
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-iic { width: 26px; height: 26px; flex-basis: 26px; border-radius: 7px; }
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-itxt strong { font-size: 13px; }
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-ip { font-size: 13.5px; }

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-rows { padding-top: 0; }
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-row { padding: 9px 0; font-size: 13px; }

/* Total: one line, aligned with everything above it */
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-total {
  padding: 13px 0 0;
  align-items: baseline;
}
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-total span { font-size: 13.5px; }
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-total span small { font-size: 10.5px; margin-top: 1px; }
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-total strong { font-size: 28px; }

/* ── Payment ── */
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-pay .sp-wz-paypal {
  margin-top: 10px;
  padding: 14px;
}
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-pay .sp-wz-co-secure {
  margin-top: 12px; padding-top: 12px;
}

@media (max-width: 700px) {
  .sp-wz-overlay .sp-wz-checkout .sp-wz-co-right .sp-wz-co-prod { padding-left: 0; }
  .sp-wz-overlay .sp-wz-checkout .sp-wz-co-total strong { font-size: 25px; }
}

/* ══════════════════════════════════════════════════════════════
   CHECKOUT — text-only summary, own pay button
   ══════════════════════════════════════════════════════════════ */

/* Summary is words and numbers only — no thumbnail, no license icons.
   At the point of paying, a picture of the thing they already chose is
   decoration that pushes the total further down the screen. */
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-thumb,
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-iic { display: none !important; }

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-right .sp-wz-co-prod {
  display: block;
  padding: 0 0 12px 33px;
}
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-prodtxt { display: flex; flex-direction: column; gap: 2px; }
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-item-top { gap: 0; }
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-itxt { flex: 1; }

/* ── Own PayPal button ── */
.sp-wz-overlay .sp-wz-paybtn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; height: 54px;
  background: var(--ac-text); color: #fff;
  border: none; border-radius: 12px;
  font-family: var(--ac-font); font-size: 15.5px; font-weight: 800;
  letter-spacing: -.01em; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  box-shadow: 0 6px 18px rgba(15,15,26,.18);
  transition: background .18s, transform .12s, box-shadow .18s;
}
.sp-wz-overlay .sp-wz-paybtn:hover {
  background: #000; transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(15,15,26,.26);
}
.sp-wz-overlay .sp-wz-paybtn:disabled,
.sp-wz-overlay .sp-wz-paybtn.is-busy {
  background: var(--ac-text-3); cursor: default;
  transform: none; box-shadow: none;
}
.sp-wz-paybtn-note {
  font-size: 11.5px; color: var(--ac-text-3);
  margin: 10px 0 0; text-align: center;
}

/* The container is just a wrapper in this mode — drop the frame */
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-pay .sp-wz-paypal:has(.sp-wz-paybtn) {
  background: none; border: none; padding: 0;
}

/* ══════════════════════════════════════════════════════════════
   HEADLINE FIGURE + CHECKLIST TABLE + PAYMENT EMPHASIS
   ══════════════════════════════════════════════════════════════ */

/* ── The number is the thing buyers scan for ── */
.sp-wz-litem-badge-n {
  flex: 0 0 auto;
  min-width: 74px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--ac-surface);
  color: var(--ac-text);
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1.1;
  text-align: center;
  font-variant-numeric: tabular-nums;
  transition: background .2s, color .2s;
}
.sp-wz-acc:hover .sp-wz-litem-badge-n { background: var(--ac-surface-2); }
.sp-wz-acc.is-open .sp-wz-litem-badge-n,
.sp-wz-acc.is-sel  .sp-wz-litem-badge-n { background: #fff; color: var(--ac-text); }

/* Description sits under the name, so the row reads: 1–10 · Small Business */
.sp-wz-overlay .sp-wz-litem-desc { font-size: 12px; }

@media (max-width: 700px) {
  .sp-wz-litem-badge-n { min-width: 58px; font-size: 16px; padding: 7px 9px; }
}

/* ── Checklist table detail ── */
.sp-wz-sl-table {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px;
  border-top: 1px solid var(--ac-border);
}
.sp-wz-sl-table li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 2px;
  font-size: 13px; line-height: 1.4;
  border-bottom: 1px solid var(--ac-border);
}
.sp-wz-sl-table li.is-yes { color: var(--ac-text); }
.sp-wz-sl-table li.is-no  { color: var(--ac-text-3); }
.sp-wz-tk {
  flex: 0 0 20px; width: 20px; height: 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.sp-wz-sl-table li.is-yes .sp-wz-tk { background: #e6f4ec; color: #1a7f45; }
.sp-wz-sl-table li.is-no  .sp-wz-tk { background: #f7eaea; color: #c05252; }

@media (max-width: 640px) {
  .sp-wz-sl-table { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   PAYMENT — make the button the loudest thing on the step
   ══════════════════════════════════════════════════════════════ */
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-pay .sp-wz-paypal {
  background: none;
  border: none;
  padding: 0;
  margin-top: 14px;
  min-height: 0;
}
/* A little breathing room so the PayPal iframe is not crowded */
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-pay .sp-wz-paypal > div { margin-bottom: 0; }

/* Amount restated right above the button — the last thing they see */
.sp-wz-paynow {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  padding: 14px 16px;
  background: var(--ac-text);
  border-radius: 12px;
}
.sp-wz-paynow span { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.72); }
.sp-wz-paynow strong {
  font-size: 24px; font-weight: 900; letter-spacing: -.04em; color: #fff;
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════════
   LICENSE ROW — the name leads, the headcount supports it
   The figure was set larger than the name, which made five rows of
   numbers with small words attached. The name is what the buyer is
   choosing; the band is the qualifier.
   ══════════════════════════════════════════════════════════════ */
.sp-wz-litem-badge-n {
  min-width: 0;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -.01em;
  align-self: center;
}
.sp-wz-overlay .sp-wz-litem-name { font-size: 17px; font-weight: 800; letter-spacing: -.03em; }
.sp-wz-overlay .sp-wz-litem-desc { font-size: 12px; }

/* ══════════════════════════════════════════════════════════════
   PAYMENT — back to the earlier, quieter size
   ══════════════════════════════════════════════════════════════ */
.sp-wz-paynow { display: none; }

.sp-wz-overlay .sp-wz-paybtn {
  height: 48px;
  font-size: 14.5px;
  border-radius: 11px;
  box-shadow: none;
}
.sp-wz-overlay .sp-wz-paybtn:hover {
  background: #000;
  transform: none;
  box-shadow: 0 4px 14px rgba(15,15,26,.18);
}

/* Failure message beside the button, where the click happened */
.sp-wz-payerr {
  margin-top: 10px;
  padding: 10px 13px;
  background: #fbeaea;
  border: 1px solid #f0cccc;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #8a1f1f;
}
.sp-wz-payerr[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════════
   LICENSE ROW — name left, headcount right, no price
   The price belongs with the button that acts on it, inside the
   open panel. On the row it competed with the two things the
   buyer is actually matching: the name and their own team size.
   ══════════════════════════════════════════════════════════════ */
.sp-wz-litem-badge-n { display: none; }

.sp-wz-litem-size {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 7px 13px;
  border-radius: 20px;
  background: var(--ac-surface);
  color: var(--ac-text-2);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: background .2s, color .2s;
}
.sp-wz-acc:hover .sp-wz-litem-size { background: var(--ac-surface-2); }
.sp-wz-acc.is-open .sp-wz-litem-size,
.sp-wz-acc.is-sel  .sp-wz-litem-size {
  background: rgba(255,255,255,.14);
  color: #fff;
}

/* Name and its one line, left */
.sp-wz-overlay .sp-wz-litem-txt { flex: 1 1 auto; gap: 2px; }
.sp-wz-overlay .sp-wz-litem-name { font-size: 16.5px; }
.sp-wz-overlay .sp-wz-litem-desc { font-size: 12.5px; }

.sp-wz-overlay .sp-wz-chev { margin-left: 12px; }

@media (max-width: 560px) {
  .sp-wz-litem-size { padding: 5px 10px; font-size: 11.5px; }
  .sp-wz-overlay .sp-wz-litem-name { font-size: 15px; }
}

/* ══════════════════════════════════════════════════════════════
   LICENSE ROW — name + description left, headcount + price right
   ══════════════════════════════════════════════════════════════ */
.sp-wz-litem-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

/* Popular sits with the name it belongs to, not floating over the row */
.sp-wz-litem-pop {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6b5015;
  background: #f2e3c4;
  border-radius: 20px;
  padding: 3px 9px;
  white-space: nowrap;
}
.sp-wz-acc.is-open .sp-wz-litem-pop,
.sp-wz-acc.is-sel  .sp-wz-litem-pop { background: rgba(255,255,255,.18); color: #fff; }

/* Right column: headcount above, price below, both right-aligned */
.sp-wz-litem-right {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  text-align: right;
}
.sp-wz-litem-size {
  margin-left: 0;
  padding: 4px 11px;
  font-size: 11.5px;
  font-weight: 700;
}
.sp-wz-list .sp-wz-litem-price { padding-left: 0; min-width: 0; gap: 3px; }
.sp-wz-list .sp-wz-lp-now b { font-size: 21px; }

@media (max-width: 560px) {
  .sp-wz-litem-size { padding: 3px 9px; font-size: 10.5px; }
  .sp-wz-list .sp-wz-lp-now b { font-size: 18px; }
  .sp-wz-litem-pop { font-size: 9px; padding: 2px 7px; }
}

/* ══════════════════════════════════════════════════════════════
   PRODUCT PAGE — license comparison table
   Rows now come from the licence data, so there can be twenty of
   them. Zebra striping and a sticky header keep a long table
   readable while scrolling.
   ══════════════════════════════════════════════════════════════ */
.sp-lic-compare-head {
  position: sticky; top: 0; z-index: 2;
  background: #fff;
  border-bottom: 2px solid var(--ac-text);
  padding-bottom: 10px;
}
.sp-lic-compare-head-col {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 800; letter-spacing: -.01em;
  color: var(--ac-text); text-align: center;
}
.sp-lic-row {
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--ac-border);
}
.sp-lic-row:nth-child(even) { background: var(--ac-surface); }
.sp-lic-row:last-child { border-bottom: none; }
.sp-lic-row-label { padding-left: 4px; }
.sp-lic-row-title { font-size: 13px; font-weight: 600; color: var(--ac-text); line-height: 1.4; }
.sp-lic-cell { display: flex; align-items: center; justify-content: center; }
.sp-lic-cell.sp-check { color: #1a7f45; }
.sp-lic-cell.sp-dash  { color: #cfcfcf; }

/* The headcount band, shown on each licence card */
.sp-lic-card-size {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--ac-surface);
  font-size: 11.5px; font-weight: 700; color: var(--ac-text-2);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 860px) {
  .sp-lic-compare-inner { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sp-lic-compare-head,
  .sp-lic-row { min-width: 620px; }
}

/* ══════════════════════════════════════════════════════════════
   CHECKOUT FINAL — clearer fields, stronger summary, native PayPal
   ══════════════════════════════════════════════════════════════ */
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-cols {
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .82fr);
  gap: 0;
  background: #fff;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-left {
  padding: 34px 40px 38px;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-right,
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-pay {
  background: #f7f8fb;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-h {
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -.035em;
  margin-bottom: 28px;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-sec {
  font-size: 17px;
  margin-bottom: 16px;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-sec::before {
  width: 30px;
  height: 30px;
  font-size: 13px;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-note {
  margin: -8px 0 18px 40px;
  color: #555965;
  font-size: 15px;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-field,
.sp-wz-overlay .sp-wz-checkout .sp-wz-field-row,
.sp-wz-overlay .sp-wz-checkout .sp-wz-seg,
.sp-wz-overlay .sp-wz-checkout .sp-wz-paypal,
.sp-wz-overlay .sp-wz-checkout .sp-wz-contact,
.sp-wz-overlay .sp-wz-checkout #sp-wz-acct-reveal,
.sp-wz-overlay .sp-wz-checkout .sp-wz-err {
  margin-left: 40px;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-field-row .sp-wz-field {
  margin-left: 0;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-field label {
  display: block;
  color: #343844;
  font-size: 13.5px;
  font-weight: 800;
  margin-bottom: 8px;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-field input {
  min-height: 58px;
  border: 1.5px solid #d7dae2;
  border-radius: 12px;
  background: #fff;
  color: #111318;
  font-size: 16px;
  padding: 16px 17px;
  box-shadow: inset 0 1px 0 rgba(17,19,24,.03);
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-field input::placeholder {
  color: #737885;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-field input:hover {
  border-color: #b8beca;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-field input:focus {
  border-color: #111318;
  box-shadow: 0 0 0 4px rgba(17,19,24,.10);
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-field input.sp-wz-invalid {
  border-color: #c93232;
  box-shadow: 0 0 0 4px rgba(201,50,50,.12);
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-seg {
  border-color: #d7dae2;
  background: #f0f2f6;
  border-radius: 12px;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-seg-btn {
  min-height: 42px;
  border-radius: 9px;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-seg-btn.is-on {
  background: #111318;
  color: #fff;
  box-shadow: none;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-right {
  padding: 34px 34px 18px;
  border-left: 1px solid #e3e5eb;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-pay {
  padding: 0 34px 34px;
  border-left: 1px solid #e3e5eb;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-right .sp-wz-co-sec,
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-pay .sp-wz-co-sec {
  margin-left: 0;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-right .sp-wz-co-prod {
  padding: 0 0 18px;
  margin-bottom: 4px;
  border-bottom: 1px solid #e2e5ec;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-prodtxt strong {
  font-size: 17px;
  line-height: 1.25;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-prodtxt span {
  color: #606674;
  font-size: 13px;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-items {
  gap: 0;
  margin-bottom: 8px;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-item {
  padding: 15px 0;
  background: transparent;
  border-radius: 0;
  border-bottom: 1px solid #e2e5ec;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-itxt strong {
  font-size: 14.5px;
  line-height: 1.3;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-ip {
  font-size: 15px;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-rows {
  padding-top: 6px;
  border-top: none;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-row {
  margin: 0;
  padding: 10px 0;
  color: #525866;
  font-size: 14px;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-row strong {
  font-size: 14px;
  font-weight: 800;
  color: #111318;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-disc strong {
  color: #147a42;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-save {
  margin: 8px 0 2px;
  padding: 12px 14px;
  border: 1px solid #bfe6cf;
  border-radius: 12px;
  background: #ecf9f1;
  color: #106737;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-save span,
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-save strong {
  color: #106737;
  font-size: 14.5px;
  font-weight: 900;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-total {
  margin-top: 14px;
  padding: 18px 0 0;
  border-top: 1.5px solid #111318;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-total span {
  color: #111318;
  font-size: 15px;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-total span small {
  color: #606674;
  font-size: 11.5px;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-total strong {
  color: #111318;
  font-size: 34px;
  letter-spacing: -.035em;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-paypal {
  margin-left: 0;
  margin-top: 16px;
}

.sp-wz-native-pay {
  display: grid;
  gap: 10px;
}

.sp-wz-native-pay-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 0 2px;
}

.sp-wz-native-pay-head strong {
  color: #111318;
  font-size: 15px;
  font-weight: 900;
}

.sp-wz-native-pay-head span {
  color: #5f6573;
  font-size: 12.5px;
  font-weight: 700;
  text-align: right;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-pay .sp-wz-co-note {
  margin-left: 40px;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-pay .sp-wz-paypal {
  padding: 0;
  background: transparent;
  border: none;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-err {
  margin-left: 0;
  margin-top: 12px;
}

@media (max-width: 900px) {
  .sp-wz-overlay .sp-wz-checkout .sp-wz-co-cols {
    grid-template-columns: 1fr;
  }
  .sp-wz-overlay .sp-wz-checkout .sp-wz-co-right {
    order: 2;
    border-left: none;
    border-top: 1px solid #e3e5eb;
    padding: 26px 24px 14px;
  }
  .sp-wz-overlay .sp-wz-checkout .sp-wz-co-pay {
    order: 3;
    border-left: none;
    padding: 0 24px 28px;
  }
}

@media (max-width: 640px) {
  .sp-wz-overlay .sp-wz-checkout .sp-wz-co-left {
    padding: 24px 18px 26px;
  }
  .sp-wz-overlay .sp-wz-checkout .sp-wz-h {
    font-size: 29px;
  }
  .sp-wz-overlay .sp-wz-checkout .sp-wz-field,
  .sp-wz-overlay .sp-wz-checkout .sp-wz-field-row,
  .sp-wz-overlay .sp-wz-checkout .sp-wz-seg,
  .sp-wz-overlay .sp-wz-checkout #sp-wz-acct-reveal,
  .sp-wz-overlay .sp-wz-checkout .sp-wz-co-note {
    margin-left: 0;
  }
  .sp-wz-overlay .sp-wz-checkout .sp-wz-field-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .sp-wz-native-pay-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
  .sp-wz-native-pay-head span {
    text-align: left;
  }
}

/* ══════════════════════════════════════════════════════════════
   CHECKOUT FINAL V2 — form first, premium conversion layout
   ══════════════════════════════════════════════════════════════ */
.sp-wz-overlay .sp-wz {
  max-width: 1180px;
}

.sp-wz-overlay .sp-wz-body {
  scroll-behavior: auto;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-cols {
  width: 100%;
  max-width: none !important;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr);
  grid-template-areas:
    "form summary"
    "form payment";
  align-items: start;
  background: #fff;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-left {
  grid-area: form;
  min-width: 0;
  padding: 36px 44px 42px;
  background:
    linear-gradient(180deg, #fff 0%, #fbfbfc 100%);
  border-right: 1px solid #e8eaf0;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-right {
  grid-area: summary;
  min-width: 0;
  padding: 36px 34px 18px;
  background: #f6f7fa;
  border-left: none;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-pay {
  grid-area: payment;
  min-width: 0;
  padding: 4px 34px 36px;
  background: #f6f7fa;
  border-left: none;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-backlink {
  margin-bottom: 18px;
  color: #555b68;
  border: 1px solid #e2e5ec;
  background: #fff;
  border-radius: 10px;
  padding: 9px 12px;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-backlink:hover {
  background: #f2f4f8;
  color: #111318;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-h {
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: -.035em;
  margin: 0 0 30px;
  color: #111318;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-left .sp-wz-co-sec,
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-right .sp-wz-co-sec,
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-pay .sp-wz-co-sec {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 14px !important;
  padding-top: 28px !important;
  border-top: 1px solid #e2e5ec !important;
  color: #111318;
  font-size: 17px;
  font-weight: 900;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-left .sp-wz-co-sec:first-of-type,
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-right .sp-wz-co-sec:first-child,
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-pay .sp-wz-co-sec:first-child {
  padding-top: 0 !important;
  border-top: none !important;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-sec::before {
  width: 30px;
  height: 30px;
  background: #111318;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-note {
  margin: -6px 0 18px 41px;
  max-width: 500px;
  color: #505766;
  font-size: 15px;
  line-height: 1.55;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-field,
.sp-wz-overlay .sp-wz-checkout .sp-wz-field-row,
.sp-wz-overlay .sp-wz-checkout .sp-wz-seg,
.sp-wz-overlay .sp-wz-checkout #sp-wz-acct-reveal {
  margin-left: 41px;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-field-row {
  gap: 14px;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-field label {
  color: #2f3440;
  font-size: 13px;
  font-weight: 850;
  margin-bottom: 8px;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-field input {
  min-height: 62px;
  border: 1.5px solid #ccd2dd;
  border-radius: 12px;
  background: #fff;
  color: #111318;
  font-size: 17px;
  font-weight: 500;
  padding: 17px 18px;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-field input::placeholder {
  color: #686f7e;
  font-weight: 450;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-field input:focus {
  border-color: #111318;
  outline: none;
  box-shadow: 0 0 0 4px rgba(17,19,24,.11);
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 5px;
  border-radius: 13px;
  background: #eef1f6;
  border-color: #d9dde6;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-seg-btn {
  width: 100%;
  min-height: 44px;
  border-radius: 9px;
  font-size: 13.5px;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-right .sp-wz-co-prod {
  padding: 0 0 16px;
  margin: 0;
  border-bottom: 1px solid #dde1ea;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-prodtxt strong {
  font-size: 18px;
  line-height: 1.22;
  color: #111318;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-prodtxt span {
  color: #555d6c;
  font-size: 13px;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-item {
  padding: 16px 0;
  border-bottom: 1px solid #dde1ea;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-item-top {
  align-items: baseline;
  gap: 14px;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-itxt strong {
  font-size: 15px;
  font-weight: 850;
  color: #111318;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-ip {
  color: #111318;
  font-size: 15.5px;
  font-weight: 900;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-was {
  color: #7c8493;
  font-weight: 700;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-off {
  display: inline-flex;
  margin-left: 4px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #eaf8ef;
  color: #13723e;
  font-size: 11px;
  font-weight: 900;
  font-style: normal;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-rows {
  padding-top: 8px;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-row {
  padding: 9px 0;
  color: #4f5665;
  font-size: 14.5px;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-row strong {
  color: #111318;
  font-size: 14.5px;
  font-weight: 850;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-save {
  margin: 10px 0 4px;
  padding: 13px 15px;
  background: #eaf8ef;
  border: 1px solid #b9e4ca;
  border-radius: 12px;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-save span,
.sp-wz-overlay .sp-wz-checkout .sp-wz-co-save strong {
  color: #116b3a;
  font-size: 15px;
  font-weight: 950;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-total {
  margin-top: 16px;
  padding-top: 18px;
  border-top: 2px solid #111318;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-total span {
  font-size: 15px;
  color: #111318;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-total span small {
  color: #555d6c;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-total strong {
  font-size: 36px;
  color: #111318;
}

.sp-wz-co-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.sp-wz-co-proof span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #dfe3eb;
  color: #475061;
  font-size: 12px;
  font-weight: 800;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-pay .sp-wz-co-note {
  margin-left: 41px;
  margin-bottom: 16px;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-co-pay .sp-wz-paypal {
  margin: 0 0 0 41px;
  padding: 16px;
  background: #fff;
  border: 1px solid #dfe3eb;
  border-radius: 14px;
}

.sp-wz-native-pay {
  gap: 12px;
}

.sp-wz-native-pay-head {
  padding-bottom: 4px;
}

.sp-wz-native-pay-head strong {
  font-size: 16px;
  color: #111318;
}

.sp-wz-native-pay-head span {
  color: #4e5665;
  font-size: 13px;
}

.sp-wz-overlay .sp-wz-checkout .sp-wz-err {
  margin-left: 41px;
  border-radius: 12px;
}

.sp-wz-overlay.is-drawer .sp-wz-checkout .sp-wz-co-cols {
  grid-template-columns: 1fr !important;
  grid-template-areas:
    "form"
    "summary"
    "payment";
}

.sp-wz-overlay.is-drawer .sp-wz-checkout .sp-wz-co-left {
  border-right: none;
}

.sp-wz-overlay.is-drawer .sp-wz-checkout .sp-wz-co-right,
.sp-wz-overlay.is-drawer .sp-wz-checkout .sp-wz-co-pay {
  border-top: 1px solid #e2e5ec;
}

@media (max-width: 900px) {
  .sp-wz-overlay .sp-wz {
    max-width: calc(100vw - 28px);
  }
  .sp-wz-overlay .sp-wz-checkout .sp-wz-co-cols {
    grid-template-columns: 1fr;
    grid-template-areas:
      "form"
      "summary"
      "payment";
  }
  .sp-wz-overlay .sp-wz-checkout .sp-wz-co-left {
    border-right: none;
    padding: 28px 24px 30px;
  }
  .sp-wz-overlay .sp-wz-checkout .sp-wz-co-right {
    padding: 26px 24px 14px;
    border-top: 1px solid #e2e5ec;
  }
  .sp-wz-overlay .sp-wz-checkout .sp-wz-co-pay {
    padding: 8px 24px 30px;
  }
}

@media (max-width: 640px) {
  .sp-wz-overlay .sp-wz {
    max-width: 100%;
  }
  .sp-wz-overlay .sp-wz-checkout .sp-wz-co-left {
    padding: 24px 18px 26px;
  }
  .sp-wz-overlay .sp-wz-checkout .sp-wz-h {
    font-size: 31px;
  }
  .sp-wz-overlay .sp-wz-checkout .sp-wz-field,
  .sp-wz-overlay .sp-wz-checkout .sp-wz-field-row,
  .sp-wz-overlay .sp-wz-checkout .sp-wz-seg,
  .sp-wz-overlay .sp-wz-checkout #sp-wz-acct-reveal,
  .sp-wz-overlay .sp-wz-checkout .sp-wz-co-note,
  .sp-wz-overlay .sp-wz-checkout .sp-wz-co-pay .sp-wz-co-note,
  .sp-wz-overlay .sp-wz-checkout .sp-wz-co-pay .sp-wz-paypal,
  .sp-wz-overlay .sp-wz-checkout .sp-wz-err {
    margin-left: 0;
  }
  .sp-wz-overlay .sp-wz-checkout .sp-wz-field-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .sp-wz-overlay .sp-wz-checkout .sp-wz-field input {
    min-height: 58px;
    font-size: 16px;
  }
  .sp-wz-overlay .sp-wz-checkout .sp-wz-co-total strong {
    font-size: 31px;
  }
}