.vb-casevalue {
  --vb-accent: var(--brass-700, #B08D5F);
  --vb-bg: var(--cream-50, #F5F0E6);
  --vb-text: var(--ink-700, #2E2A26);
  --vb-dark: var(--ink-900, #1A1816);
  --vb-muted: rgba(46, 42, 38, 0.6);
  --vb-radius: 8px;
  --vb-radius-lg: 14px;
  font-family: var(--font-serif-display, 'Fraunces', Georgia, serif);
  color: var(--vb-text);
  background: var(--vb-bg);
  width: 75%;
  max-width: 1100px;
  min-width: 320px;
  margin: 48px auto;
  padding: 72px 88px;
  box-sizing: border-box;
  border-radius: var(--vb-radius-lg);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 30px 80px -28px rgba(0, 0, 0, 0.55),
    0 12px 32px -12px rgba(0, 0, 0, 0.25),
    0 2px 6px rgba(0, 0, 0, 0.08);
  position: relative;
  /* Long unbroken strings (URL-shaped firm names, mega-domain emails the user pastes into
     description, etc.) would otherwise overflow the widget container at narrow viewports.
     Setting overflow-wrap on the root cascades to all text children. */
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.vb-casevalue::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid rgba(176, 141, 95, 0.18);
}
.vb-casevalue * { box-sizing: border-box; }

.vb-casevalue h1, .vb-casevalue h2 {
  font-family: var(--font-serif-display, 'Fraunces', Georgia, serif);
  font-weight: 400;
  line-height: 1.08;
  margin: 0 0 20px;
  text-shadow: none !important;
  color: var(--vb-dark);
}
.vb-casevalue h1 { font-size: 3rem; letter-spacing: -0.02em; max-width: 18ch; }
.vb-casevalue h2 { font-size: 2rem; letter-spacing: -0.015em; max-width: 22ch; }
.vb-casevalue p, .vb-casevalue label, .vb-casevalue input, .vb-casevalue button, .vb-casevalue textarea, .vb-casevalue select {
  font-family: var(--font-sans, 'Manrope', system-ui, sans-serif);
}
.vb-casevalue p { line-height: 1.6; margin: 0 0 18px; color: var(--vb-text); max-width: 60ch; font-size: 1.02rem; }

.vb-casevalue .vb-italic { font-style: italic; color: var(--vb-accent); font-weight: 400; }

.vb-casevalue .vb-progress { display: flex; gap: 8px; margin-bottom: 32px; }
.vb-casevalue .vb-progress span { flex: 1; height: 2px; background: rgba(46, 42, 38, 0.12); border-radius: 1px; transition: background 0.3s; }
.vb-casevalue .vb-progress span.is-done { background: var(--vb-accent); }

.vb-casevalue .vb-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 20px 0 32px; }
.vb-casevalue .vb-card {
  padding: 22px 20px;
  border: 1px solid rgba(46, 42, 38, 0.12);
  border-radius: var(--vb-radius);
  cursor: pointer;
  transition: all 0.2s ease;
  background: #fff;
  user-select: none;
  font-size: 0.98rem;
  line-height: 1.4;
  position: relative;
}
.vb-casevalue .vb-card:hover {
  border-color: var(--vb-accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.08);
}
.vb-casevalue .vb-card.is-selected {
  background: var(--vb-dark);
  color: #fff;
  border-color: var(--vb-dark);
  box-shadow: 0 4px 16px -4px rgba(26, 24, 22, 0.4);
}

.vb-casevalue .vb-button {
  display: inline-block;
  padding: 16px 36px;
  background: var(--vb-dark);
  color: #fff;
  border: none;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--vb-radius);
  transition: all 0.2s ease;
}
.vb-casevalue .vb-button:hover:not(:disabled) {
  background: var(--vb-accent);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -4px rgba(176, 141, 95, 0.5);
}
/* Active state: confirms the click registered on slow networks (Submit → Sending… latency window). */
.vb-casevalue .vb-button:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px -4px rgba(176, 141, 95, 0.4);
}
.vb-casevalue .vb-button:disabled { opacity: 0.35; cursor: not-allowed; }

.vb-casevalue input[type="text"], .vb-casevalue input[type="email"], .vb-casevalue input[type="tel"], .vb-casevalue input[type="month"], .vb-casevalue textarea, .vb-casevalue select {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(46, 42, 38, 0.15);
  border-radius: var(--vb-radius);
  font-size: 1rem;
  background: #fff;
  color: var(--vb-text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.vb-casevalue input:focus, .vb-casevalue textarea:focus, .vb-casevalue select:focus {
  outline: none;
  border-color: var(--vb-accent);
  box-shadow: 0 0 0 3px rgba(176, 141, 95, 0.15);
}
.vb-casevalue label {
  display: block;
  margin: 18px 0 8px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vb-muted);
}

.vb-casevalue .vb-disclaimer {
  background: rgba(46, 42, 38, 0.04);
  border-left: 2px solid var(--vb-accent);
  padding: 20px 24px;
  margin: 24px 0;
  font-size: 0.9rem;
  line-height: 1.6;
  border-radius: 0 var(--vb-radius) var(--vb-radius) 0;
  color: var(--vb-muted);
}
.vb-casevalue .vb-state-overlay {
  background: rgba(176, 141, 95, 0.06);
  border: 1px solid rgba(176, 141, 95, 0.25);
  padding: 18px 22px;
  margin: 12px 0 24px;
  font-size: 0.88rem;
  line-height: 1.6;
  border-radius: var(--vb-radius);
  color: var(--vb-text);
}
.vb-casevalue .vb-state-overlay strong { color: var(--vb-dark); display: block; margin-bottom: 6px; font-family: var(--font-serif-display, 'Fraunces', Georgia, serif); font-weight: 500; font-size: 1rem; }

.vb-casevalue .vb-engagement-wall {
  background: var(--vb-dark);
  color: rgba(255, 255, 255, 0.92);
  padding: 32px 36px;
  margin: 40px 0 24px;
  border-radius: var(--vb-radius);
  font-size: 0.95rem;
  line-height: 1.65;
}

.vb-casevalue .vb-range {
  font-family: var(--font-serif-display, 'Fraunces', Georgia, serif);
  font-size: 4rem;
  font-weight: 300;
  text-align: center;
  margin: 24px 0 32px;
  letter-spacing: -0.03em;
  color: var(--vb-dark);
  line-height: 1;
}

.vb-casevalue .vb-line-items { width: 100%; border-collapse: collapse; margin: 20px 0; }
.vb-casevalue .vb-line-items th, .vb-casevalue .vb-line-items td {
  text-align: left;
  padding: 16px 8px;
  border-bottom: 1px solid rgba(46, 42, 38, 0.08);
  font-size: 0.98rem;
}
.vb-casevalue .vb-line-items td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.vb-casevalue .vb-line-items tr.is-total td {
  font-weight: 600;
  font-size: 1.1rem;
  border-top: 2px solid var(--vb-dark);
  border-bottom: none;
  padding-top: 20px;
  color: var(--vb-dark);
}

.vb-casevalue .vb-checklist { list-style: none; padding: 0; margin: 20px 0 32px; }
.vb-casevalue .vb-checklist li {
  padding: 18px 0;
  border-bottom: 1px solid rgba(46, 42, 38, 0.06);
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.vb-casevalue .vb-checklist li:last-child { border-bottom: none; }
.vb-casevalue .vb-check-icon { font-size: 1.3rem; flex-shrink: 0; line-height: 1.4; width: 28px; text-align: center; }

.vb-casevalue .vb-blur { filter: blur(8px); pointer-events: none; user-select: none; opacity: 0.6; }

.vb-casevalue .vb-ack {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 24px 0;
  font-size: 0.88rem;
  line-height: 1.5;
  padding: 16px 18px;
  background: rgba(46, 42, 38, 0.03);
  border-radius: var(--vb-radius);
  text-transform: none;
  letter-spacing: normal;
  color: var(--vb-text);
  font-weight: 400;
}
.vb-casevalue .vb-ack input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--vb-accent);
}

.vb-casevalue .vb-spinner {
  width: 44px;
  height: 44px;
  border: 2px solid rgba(176, 141, 95, 0.18);
  border-top-color: var(--vb-accent);
  border-radius: 50%;
  animation: vb-spin 0.9s cubic-bezier(0.5, 0.15, 0.5, 0.85) infinite;
  margin: 32px auto;
}
@keyframes vb-spin { to { transform: rotate(360deg); } }

/* Respect users who have set prefers-reduced-motion: don't spin, fade, or hover-lift. */
@media (prefers-reduced-motion: reduce) {
  .vb-casevalue .vb-spinner { animation: none; border-top-color: var(--vb-accent); }
  .vb-casevalue .vb-card,
  .vb-casevalue .vb-button { transition: none !important; }
  .vb-casevalue .vb-card:hover,
  .vb-casevalue .vb-button:hover:not(:disabled),
  .vb-casevalue .vb-button:active:not(:disabled) { transform: none !important; }
}

/* Windows High Contrast / forced-colors: the OS overrides our colors with a tiny palette.
   `.vb-button` has `border: none`, which in forced-colors makes the button blend into the
   surrounding background. Explicit `border` + system color keywords keep buttons, cards,
   selected state, and progress segments distinguishable. `forced-color-adjust: auto` (default)
   lets the system substitute the palette; we just add the missing structural borders. */
@media (forced-colors: active) {
  .vb-casevalue .vb-button {
    border: 1px solid ButtonText;
  }
  .vb-casevalue .vb-button:disabled {
    /* GrayText is the system color for disabled UI text; respecting it here makes the
       disabled state legible without us guessing a forced-colors-safe opacity. */
    color: GrayText;
    border-color: GrayText;
  }
  .vb-casevalue .vb-card.is-selected {
    /* In forced-colors mode background colors are overridden, so the selected-vs-not
       distinction is invisible. Switch the indicator to an outline (which forced-colors
       preserves) so keyboard users can still see which card is selected. */
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
  .vb-casevalue .vb-progress span.is-done {
    background: Highlight;
  }
}

/* Visible focus rings — WCAG 2.4.7. Buttons and cards previously had no focus indicator. */
.vb-casevalue .vb-button:focus-visible,
.vb-casevalue .vb-back-button:focus-visible {
  outline: 3px solid var(--vb-accent);
  outline-offset: 3px;
}
.vb-casevalue .vb-card:focus-visible {
  outline: 2px solid var(--vb-accent);
  outline-offset: 2px;
  border-color: var(--vb-accent);
}
.vb-casevalue h1[tabindex="-1"]:focus,
.vb-casevalue h2[tabindex="-1"]:focus { outline: none; }

/* Required-field indicator — paint it in the accent color so the asterisk is visible
   without relying on color alone (the aria-hidden marker pairs with aria-required on the input). */
.vb-casevalue .vb-required-ind {
  color: var(--vb-accent);
  font-weight: 700;
  margin-left: 2px;
}

.vb-casevalue .vb-back-button {
  background: transparent !important;
  color: var(--vb-dark) !important;
  border: 1px solid rgba(26, 24, 22, 0.25) !important;
}
.vb-casevalue .vb-back-button:hover:not(:disabled) {
  background: rgba(26, 24, 22, 0.04) !important;
  border-color: var(--vb-dark) !important;
  color: var(--vb-dark) !important;
  box-shadow: none !important;
}
.vb-casevalue .vb-back-button:active:not(:disabled) {
  background: rgba(26, 24, 22, 0.08) !important;
}

.vb-casevalue .vb-actions { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }

.vb-casevalue .vb-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 460px;
  padding: 32px 0;
  gap: 0;
}
.vb-casevalue .vb-welcome-headline {
  font-size: 4.4rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 36px;
  max-width: 22ch;
}
.vb-casevalue .vb-welcome-headline .vb-italic {
  font-weight: 400;
}
.vb-casevalue .vb-welcome-lead {
  font-family: var(--font-sans, 'Manrope', system-ui, sans-serif);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--vb-dark);
  margin: 0 0 24px;
  max-width: 36ch;
}
.vb-casevalue .vb-welcome-sub {
  font-family: var(--font-sans, 'Manrope', system-ui, sans-serif);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--vb-muted);
  margin: 0 0 44px;
  max-width: 52ch;
}
.vb-casevalue .vb-welcome-cta {
  margin-top: auto;
}

@media (max-width: 1024px) {
  .vb-casevalue .vb-welcome { min-height: 380px; }
  .vb-casevalue .vb-welcome-headline { font-size: 3.4rem; margin-bottom: 28px; }
  .vb-casevalue .vb-welcome-lead { font-size: 1.3rem; margin-bottom: 20px; }
  .vb-casevalue .vb-welcome-sub { font-size: 1.02rem; margin-bottom: 36px; }
}
@media (max-width: 640px) {
  .vb-casevalue .vb-welcome { min-height: 0; padding: 16px 0; }
  .vb-casevalue .vb-welcome-headline { font-size: 2.4rem; margin-bottom: 24px; }
  .vb-casevalue .vb-welcome-lead { font-size: 1.15rem; margin-bottom: 16px; }
  .vb-casevalue .vb-welcome-sub { font-size: 0.98rem; margin-bottom: 28px; }
}

@media (max-width: 1024px) {
  .vb-casevalue { width: 90%; padding: 56px 56px; }
  .vb-casevalue .vb-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .vb-casevalue { width: 92%; padding: 40px 24px; margin: 24px auto; border-radius: var(--vb-radius); }
  .vb-casevalue h1 { font-size: 2rem; }
  .vb-casevalue h2 { font-size: 1.5rem; }
  .vb-casevalue .vb-card-grid { grid-template-columns: 1fr; }
  .vb-casevalue .vb-range { font-size: 2.6rem; }
  .vb-casevalue .vb-engagement-wall { padding: 24px; }
}