/* calculator.css — Tax Drain Calculator
   Design tokens mirror MyExpense app + myexpense.co.za */

:root {
  --c-primary:      #6B6AD8;
  --c-primary-soft: #EEEEFA;
  --c-primary-deep: #4E4DB8;
  --c-noir:         #171629;
  --c-noir-2:       #1F1D34;
  --c-ink:          #0F0F1E;
  --c-ink-2:        #2A2840;
  --c-ink-3:        #6B6880;
  --c-ink-4:        #9A97B0;
  --c-on-noir:      #FFFFFF;
  --c-on-noir-2:    #A9A5BD;
  --c-bg:           #F2EDE3;
  --c-surface:      #FFFFFF;
  --c-border:       #E3DDCD;
  --c-border-2:     #D6CFBC;
  --c-success:      #1B6B3A;
  --c-success-bg:   #DDF0E4;
  --c-danger:       #C0392B;
  --c-danger-bg:    #FAE8E6;
  --c-warm:         #E8B16A;
  --c-warm-soft:    #FCEAD9;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-pill: 100px;
  --shadow-pop:  0 12px 32px -12px rgba(15,15,30,0.30);
  --shadow-lift: 0 8px 24px -8px rgba(15,15,30,0.18);
}

*, *::before, *::after { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
html, body { margin: 0; padding: 0; background: var(--c-bg); color: var(--c-ink); font-family: 'Inter', system-ui, -apple-system, sans-serif; font-feature-settings: 'ss01','cv11'; letter-spacing: -0.01em; min-height: 100vh; }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
button { cursor: pointer; font-family: inherit; }

/* Page wrapper */
#calculator-root { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding-bottom: 80px; }

/* Screen wrapper */
.calc-screen { width: 100%; max-width: 540px; padding: 0 20px; }
.calc-content { background: var(--c-surface); border-radius: var(--r-xl); padding: 28px 24px 24px; box-shadow: var(--shadow-lift); border: 1px solid var(--c-border); margin-top: 12px; }

/* Logo */
.calc-logo { padding: 24px 0 8px; display: flex; justify-content: center; }
.calc-logo-img { height: 32px; width: auto; }
.calc-logo-link { display: inline-flex; align-items: center; text-decoration: none; }
.calc-logo-text { font-size: 20px; font-weight: 800; letter-spacing: -0.04em; color: var(--c-noir); font-family: 'Inter', system-ui, sans-serif; }

/* Progress bar */
.calc-progress { padding: 20px 0 0; }
.calc-progress-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.calc-step-label { font-size: 12px; font-weight: 600; color: var(--c-ink-3); letter-spacing: 0.01em; }
.calc-step-pct { font-size: 11px; font-weight: 700; color: var(--c-primary); letter-spacing: 0.04em; }
.calc-progress-track { height: 4px; background: var(--c-border); border-radius: var(--r-pill); overflow: hidden; }
.calc-progress-fill { height: 100%; background: var(--c-primary); border-radius: var(--r-pill); transition: width 0.4s ease; }

/* Back button */
.calc-back-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; background: none; border: none; font-size: 13px; font-weight: 500; color: var(--c-ink-3); margin-top: 12px; transition: color 0.15s; }
.calc-back-btn:hover { color: var(--c-ink); }

/* Question text */
.calc-question { font-size: 19px; font-weight: 700; color: var(--c-ink); line-height: 1.3; letter-spacing: -0.025em; margin: 0 0 8px; }
.calc-question-sub { font-size: 13px; color: var(--c-ink-3); margin: 0 0 20px; line-height: 1.5; }

/* Option buttons */
.calc-option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.calc-option-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.calc-option-btn { padding: 13px 16px; background: var(--c-surface); border: 1.5px solid var(--c-border); border-radius: var(--r-md); font-size: 13.5px; font-weight: 500; color: var(--c-ink-2); text-align: left; line-height: 1.4; transition: border-color 0.15s, background 0.15s, color 0.15s; }
.calc-option-btn:hover { border-color: var(--c-primary); background: var(--c-primary-soft); }
.calc-option-btn.selected { border-color: var(--c-primary); background: var(--c-primary-soft); color: var(--c-primary-deep); font-weight: 600; }
.calc-option-full { width: 100%; text-align: left; }
.calc-option-sm { flex: 1; text-align: center; padding: 12px 10px; font-size: 13px; }

/* CTA button */
.calc-cta-btn { display: block; width: 100%; padding: 15px 20px; background: var(--c-noir); color: var(--c-on-noir); border: none; border-radius: var(--r-pill); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; transition: background 0.18s, transform 0.15s; margin-top: 4px; }
.calc-cta-btn:hover:not(:disabled) { background: var(--c-noir-2); transform: translateY(-1px); }
.calc-cta-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Entry screen */
.calc-entry { display: flex; flex-direction: column; align-items: center; text-align: center; }
.calc-hero { background: var(--c-noir); color: var(--c-on-noir); border-radius: var(--r-xl); padding: 48px 40px 40px; margin-top: 28px; width: 100%; position: relative; overflow: hidden; text-align: center; box-shadow: var(--shadow-pop); }
.calc-hero::before { content: ''; position: absolute; width: 340px; height: 340px; border-radius: 50%; background: var(--c-primary); opacity: .4; top: -150px; right: -90px; }
.calc-hero::after { content: ''; position: absolute; width: 220px; height: 220px; border-radius: 50%; background: var(--c-primary); opacity: .22; bottom: -120px; left: -60px; }
.calc-hero > * { position: relative; z-index: 1; }
.calc-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8A89E8; margin-bottom: 18px; }
.calc-hero-eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #8A89E8; }
.calc-hero-headline { font-size: clamp(28px, 6vw, 40px); font-weight: 800; line-height: 1.08; letter-spacing: -0.035em; color: #fff; margin: 0 0 14px; }
.calc-hero-headline em { font-style: normal; color: #8A89E8; }
.calc-hero-sub { font-size: 16px; font-weight: 500; color: var(--c-on-noir-2); margin: 0 0 28px; }
.calc-hero-stat { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-lg); padding: 22px 24px; margin: 0 auto 28px; max-width: 420px; }
.calc-hero-stat-amt { font-size: clamp(44px, 10vw, 60px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: #fff; font-feature-settings: 'ss01','cv11'; margin-bottom: 12px; }
.calc-hero-stat-lbl { font-size: 13.5px; font-weight: 500; color: var(--c-on-noir-2); line-height: 1.55; }
.calc-hero-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 28px; background: var(--c-primary); color: #fff; border: none; border-radius: var(--r-pill); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; transition: opacity .15s, transform .15s; }
.calc-hero-btn:hover { opacity: .92; transform: translateY(-1px); }
.calc-hero-btn .ch { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center; }
.calc-hero-btn .ch svg { width: 14px; height: 14px; }
.calc-hero-note { font-size: 11.5px; color: rgba(255,255,255,.4); margin: 18px 0 0; }
.calc-entry-headline { font-size: clamp(26px, 7vw, 36px); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; color: var(--c-ink); margin: 18px 0 12px; }
.calc-entry-sub { font-size: 15px; font-weight: 500; color: var(--c-ink-3); margin: 0 0 16px; }
.calc-entry-body { font-size: 14px; line-height: 1.65; color: var(--c-ink-3); margin: 0 0 28px; max-width: 340px; }
.calc-entry-body strong { color: var(--c-ink); }
.calc-entry .calc-cta-btn { max-width: 360px; }
.calc-disclaimer-inline { font-size: 11px; color: var(--c-ink-4); margin: 14px 0 0; }

/* Spending sliders */
.calc-slider-wrap { margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--c-border); }
.calc-slider-wrap:last-of-type { border-bottom: none; margin-bottom: 8px; padding-bottom: 0; }
.calc-slider-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.calc-slider-label { font-size: 13.5px; font-weight: 600; color: var(--c-ink-2); }
.calc-slider-value { font-size: 14px; font-weight: 700; color: var(--c-primary); min-width: 90px; text-align: right; }
.calc-slider-note { font-size: 11px; color: var(--c-ink-4); margin: 8px 0 0; line-height: 1.4; }
.calc-range { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; background: var(--c-border); border-radius: var(--r-pill); outline: none; cursor: pointer; }
.calc-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--c-primary); border: 3px solid white; box-shadow: 0 1px 8px rgba(107,106,216,0.4); cursor: pointer; transition: transform 0.1s; }
.calc-range::-webkit-slider-thumb:active { transform: scale(1.15); }
.calc-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--c-primary); border: 3px solid white; box-shadow: 0 1px 8px rgba(107,106,216,0.4); cursor: pointer; }

/* Mileage stepper */
.calc-stepper { display: flex; align-items: center; gap: 12px; }
.calc-stepper-btn { width: 34px; height: 34px; border-radius: 50%; background: var(--c-primary-soft); border: 1.5px solid var(--c-primary); color: var(--c-primary); font-size: 20px; font-weight: 400; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; line-height: 1; padding: 0; }
.calc-stepper-btn:hover { background: var(--c-primary); color: white; }
.calc-stepper-val { font-size: 15px; font-weight: 700; color: var(--c-primary); min-width: 80px; text-align: center; }

/* Home/vehicle sections */
.calc-section { margin-bottom: 28px; }
.calc-section:last-of-type { margin-bottom: 0; }
.calc-option-row { display: flex; gap: 10px; margin-top: 12px; margin-bottom: 16px; }

/* m² inputs */
.calc-m2-row { display: flex; gap: 16px; margin-top: 16px; }
.calc-m2-field { flex: 1; }
.calc-m2-label { display: block; font-size: 12px; font-weight: 600; color: var(--c-ink-3); margin-bottom: 6px; }
.calc-m2-input { width: 100%; padding: 12px 14px; border: 1.5px solid var(--c-border); border-radius: var(--r-md); font-family: inherit; font-size: 16px; font-weight: 600; color: var(--c-ink); background: var(--c-surface); outline: none; transition: border-color 0.15s; -moz-appearance: textfield; }
.calc-m2-input:focus { border-color: var(--c-primary); }
.calc-m2-input.error { border-color: var(--c-danger); }
.calc-m2-input::-webkit-inner-spin-button, .calc-m2-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.calc-m2-error { font-size: 11px; color: var(--c-danger); margin: 4px 0 0; }
.calc-m2-note { font-size: 11px; color: var(--c-ink-4); margin: 12px 0 0; line-height: 1.5; }

/* Result screen */
.calc-result { padding-bottom: 40px; }
.calc-result-header { padding: 24px 0 0; display: flex; justify-content: center; }
.calc-result-hero { text-align: center; padding: 36px 28px; background: var(--c-noir); border-radius: var(--r-xl); position: relative; overflow: hidden; margin-top: 28px; margin-bottom: 14px; box-shadow: var(--shadow-pop); }
.calc-result-hero::before { content: ''; position: absolute; width: 300px; height: 300px; border-radius: 50%; background: var(--c-primary); opacity: .38; top: -130px; right: -80px; }
.calc-result-hero > * { position: relative; z-index: 1; }
.calc-result-label { font-size: 11px; font-weight: 700; color: #8A89E8; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 10px; }
.calc-result-amount { font-size: clamp(48px, 14vw, 72px); font-weight: 800; color: #fff; letter-spacing: -0.04em; margin: 0 0 12px; line-height: 1; font-feature-settings: 'ss01','cv11'; }
.calc-result-hl { font-size: 15px; font-weight: 600; color: var(--c-on-noir-2); margin: 0; }
.calc-result-note { font-size: 13px; color: var(--c-on-noir-2); line-height: 1.6; margin: 8px 0 0; }
.calc-result-warning { background: var(--c-primary-soft); border: 1px solid var(--c-primary); border-left: 4px solid var(--c-primary); border-radius: var(--r-md); padding: 14px 18px; font-size: 13px; font-weight: 500; color: var(--c-primary-deep); margin-bottom: 16px; line-height: 1.5; }
.calc-result-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); margin-bottom: 14px; overflow: hidden; }

/* Breakdown toggle */
.calc-breakdown-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; font-size: 14px; font-weight: 600; color: var(--c-ink); cursor: pointer; user-select: none; transition: background 0.15s; }
.calc-breakdown-header:hover { background: var(--c-primary-soft); }
.calc-breakdown-arrow { font-size: 11px; color: var(--c-ink-3); }
.calc-breakdown-body { border-top: 1px solid var(--c-border); overflow-x: auto; }
.calc-breakdown-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.calc-breakdown-table th { text-align: left; padding: 10px 14px; background: #f9f7f3; color: var(--c-ink-3); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.calc-breakdown-table td { padding: 10px 14px; color: var(--c-ink-2); border-top: 1px solid var(--c-border); vertical-align: top; line-height: 1.4; }
.calc-breakdown-table td.amt { color: var(--c-primary); font-weight: 700; white-space: nowrap; }
.calc-breakdown-table td.rule { color: var(--c-ink-4); font-size: 11px; }
.calc-breakdown-table .total-row td { background: var(--c-primary-soft); padding: 12px 14px; }

/* Tax saving card */
.calc-tax-saving-card { padding: 22px 20px; text-align: center; background: var(--c-noir); color: var(--c-on-noir); border: none; }
.calc-tax-saving-label { font-size: 11px; font-weight: 600; color: var(--c-on-noir-2); letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 8px; }
.calc-tax-saving-amount { font-size: 38px; font-weight: 800; letter-spacing: -0.04em; margin: 0 0 10px; color: var(--c-on-noir); }
.calc-tax-saving-sub { font-size: 13px; color: var(--c-on-noir-2); line-height: 1.5; margin: 0; }
.calc-tax-saving-sub strong { color: var(--c-on-noir); }

/* Share buttons */
.calc-share-section { margin-bottom: 14px; }
.calc-share-title { font-size: 11px; font-weight: 700; color: var(--c-ink-3); letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 12px; }
.calc-share-buttons { display: flex; gap: 10px; }
.calc-share-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 10px; border-radius: var(--r-md); font-size: 13px; font-weight: 600; border: 1.5px solid var(--c-border); transition: transform 0.15s, box-shadow 0.15s; text-decoration: none; }
.calc-share-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.calc-share-wa  { background: #25D366; color: white; border-color: #25D366; }
.calc-share-li  { background: #0A66C2; color: white; border-color: #0A66C2; }
.calc-share-copy { background: var(--c-surface); color: var(--c-ink-2); }

/* Waitlist form */
.calc-waitlist-section { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: 24px 20px; margin-bottom: 14px; }
.calc-waitlist-pitch { margin-bottom: 18px; }
.calc-waitlist-headline { font-size: 16px; font-weight: 700; color: var(--c-ink); letter-spacing: -0.02em; margin: 0 0 4px; }
.calc-waitlist-sub { font-size: 13px; color: var(--c-ink-3); margin: 0; }
.calc-waitlist-row { display: flex; gap: 10px; margin-bottom: 10px; }
.calc-email-input { flex: 1; padding: 13px 16px; border: 1.5px solid var(--c-border); border-radius: var(--r-pill); font-family: inherit; font-size: 14px; color: var(--c-ink); background: var(--c-bg); outline: none; transition: border-color 0.15s; }
.calc-email-input:focus { border-color: var(--c-primary); }
.calc-waitlist-btn { flex-shrink: 0; width: auto; white-space: nowrap; padding: 13px 20px; font-size: 14px; }
.calc-waitlist-privacy { font-size: 11px; color: var(--c-ink-4); margin: 0; line-height: 1.5; }
.calc-waitlist-privacy a { color: var(--c-primary); text-decoration: underline; }
.calc-waitlist-success { background: var(--c-success-bg); color: var(--c-success); padding: 14px 16px; border-radius: var(--r-md); font-size: 14px; font-weight: 600; }

/* Legal disclaimer */
.calc-legal-disclaimer { font-size: 11px; color: var(--c-ink-4); line-height: 1.65; margin-bottom: 20px; padding: 14px 16px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); }

/* Restart link */
.calc-restart-btn { display: block; background: none; border: none; font-size: 13px; font-weight: 500; color: var(--c-ink-3); padding: 8px 0; text-align: center; width: 100%; transition: color 0.15s; }
.calc-restart-btn:hover { color: var(--c-ink); }

/* Responsive */
@media (max-width: 480px) {
  .calc-screen { padding: 0 16px; }
  .calc-option-grid { grid-template-columns: 1fr; }
  .calc-share-buttons { flex-direction: column; }
  .calc-waitlist-row { flex-direction: column; }
  .calc-waitlist-btn { width: 100%; }
  .calc-m2-row { flex-direction: column; gap: 12px; }
  .calc-breakdown-table th:nth-child(3),
  .calc-breakdown-table td:nth-child(3) { display: none; }
}

/* ── On-brand refinements (match site cards/components) ── */
.calc-content { border-radius: var(--r-lg); box-shadow: 0 1px 2px rgba(15,15,30,.04), 0 20px 44px -28px rgba(15,15,30,.22); padding: 30px 26px 26px; }
/* eyebrow accent bar above each question */
.calc-question { position: relative; padding-top: 14px; }
.calc-question::before { content: ''; position: absolute; top: 0; left: 0; width: 36px; height: 3px; border-radius: 3px; background: var(--c-primary); }
.calc-question-sub { margin-top: -2px; }
/* radio affordance on the choice cards (not the small yes/no buttons) */
.calc-option-grid .calc-option-btn,
.calc-option-list .calc-option-btn { position: relative; padding-right: 46px; display: flex; align-items: center; min-height: 52px; border-radius: var(--r-md); border-width: 1.5px; transition: border-color .15s, background .15s, color .15s, box-shadow .15s; }
.calc-option-grid .calc-option-btn::after,
.calc-option-list .calc-option-btn::after { content: ''; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--c-border-2); transition: border-color .15s, background .15s; }
.calc-option-grid .calc-option-btn.selected,
.calc-option-list .calc-option-btn.selected { box-shadow: 0 0 0 1px var(--c-primary) inset; }
.calc-option-grid .calc-option-btn.selected::after,
.calc-option-list .calc-option-btn.selected::after { border-color: var(--c-primary); background: var(--c-primary); box-shadow: inset 0 0 0 3px var(--c-surface); }
/* small yes/no & vehicle buttons: keep centred, lift on select */
.calc-option-sm { border-width: 1.5px; transition: border-color .15s, background .15s, color .15s; }
.calc-option-sm.selected { box-shadow: 0 0 0 1px var(--c-primary) inset; }
/* primary CTA: match site (accent arrow chip feel via fill) */
.calc-cta-btn { background: var(--c-noir); border-radius: var(--r-pill); }
.calc-cta-btn:disabled { background: var(--c-border-2); color: var(--c-ink-4); opacity: 1; }

/* ════════ FULL REDESIGN — sliders, options, result ════════ */

/* Spending inputs become individual cards */
#spending-inputs { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.calc-slider-wrap { margin: 0 !important; padding: 16px 16px 14px !important; border: 1px solid var(--c-border) !important; border-radius: var(--r-md); background: var(--c-bg); }
.calc-slider-header { margin-bottom: 14px; }
.calc-slider-label { font-size: 14px; font-weight: 700; color: var(--c-ink); letter-spacing: -0.01em; }
.calc-slider-value { font-size: 13px; font-weight: 700; color: var(--c-primary-deep); background: var(--c-primary-soft); padding: 5px 12px; border-radius: var(--r-pill); min-width: 0; }
.calc-slider-note { font-size: 11.5px; color: var(--c-ink-4); margin-top: 12px; }
/* Native filled track + themed thumb */
.calc-range { height: 8px; background: var(--c-border); border-radius: var(--r-pill); accent-color: var(--c-primary); }
.calc-range::-webkit-slider-thumb { width: 24px; height: 24px; border: 4px solid #fff; background: var(--c-primary); box-shadow: 0 2px 8px rgba(107,106,216,0.45); }
.calc-range::-moz-range-thumb { width: 24px; height: 24px; border: 4px solid #fff; background: var(--c-primary); box-shadow: 0 2px 8px rgba(107,106,216,0.45); }
/* Stepper as a pill group */
.calc-stepper { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-pill); padding: 4px; gap: 4px; }
.calc-stepper-btn { width: 30px; height: 30px; background: var(--c-primary-soft); border: none; color: var(--c-primary-deep); font-size: 18px; }
.calc-stepper-btn:hover { background: var(--c-primary); color: #fff; }
.calc-stepper-val { font-size: 14px; min-width: 72px; }

/* Choice cards: roomier, hover lift */
.calc-option-grid .calc-option-btn,
.calc-option-list .calc-option-btn { padding: 16px 46px 16px 18px; font-size: 14.5px; font-weight: 600; color: var(--c-ink); }
.calc-option-grid .calc-option-btn:hover,
.calc-option-list .calc-option-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.calc-option-sm { padding: 16px 12px; font-size: 14px; font-weight: 600; color: var(--c-ink); border-radius: var(--r-md); }
.calc-option-sm small { color: var(--c-ink-3); }

/* RESULT — breakdown toggle as a tidy card */
.calc-result-card { border-radius: var(--r-lg); }
.calc-breakdown-header { padding: 18px 20px; font-weight: 700; }
.calc-breakdown-arrow { width: 24px; height: 24px; border-radius: 50%; background: var(--c-primary-soft); color: var(--c-primary-deep); display: flex; align-items: center; justify-content: center; font-size: 9px; }

/* RESULT — tax-saving card with accent blob */
.calc-tax-saving-card { border-radius: var(--r-lg); position: relative; overflow: hidden; padding: 28px 22px; }
.calc-tax-saving-card::before { content: ''; position: absolute; width: 220px; height: 220px; border-radius: 50%; background: var(--c-primary); opacity: .3; bottom: -110px; left: -50px; }
.calc-tax-saving-card > * { position: relative; z-index: 1; }
.calc-tax-saving-amount { font-size: 46px; font-feature-settings: 'ss01','cv11'; }

/* RESULT — share buttons: brand-consistent, pill, neutral surface */
.calc-share-buttons { gap: 10px; }
.calc-share-btn { border-radius: var(--r-pill); padding: 13px 14px; border: 1.5px solid var(--c-border); background: var(--c-surface); color: var(--c-ink-2); font-weight: 700; }
.calc-share-btn:hover { border-color: var(--c-primary); color: var(--c-primary-deep); transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.calc-share-btn svg { color: var(--c-ink-3); }
.calc-share-btn:hover svg { color: var(--c-primary); }

/* RESULT — waitlist block as a noir card */
.calc-waitlist-section { background: var(--c-noir); border: none; border-radius: var(--r-xl); position: relative; overflow: hidden; padding: 28px 24px; }
.calc-waitlist-section::before { content: ''; position: absolute; width: 240px; height: 240px; border-radius: 50%; background: var(--c-primary); opacity: .32; top: -100px; right: -70px; }
.calc-waitlist-section > * { position: relative; z-index: 1; }
.calc-waitlist-headline { color: #fff; }
.calc-waitlist-sub { color: var(--c-on-noir-2); }
.calc-email-input { background: var(--c-surface); border-color: var(--c-border); }
.calc-waitlist-btn { background: var(--c-primary); }
.calc-waitlist-btn:hover:not(:disabled) { background: var(--c-primary-deep); }
.calc-waitlist-privacy { color: rgba(255,255,255,.5); }
.calc-waitlist-privacy a { color: #8A89E8; }