/* ============================================================
   JaliHR Calculators — Full-width two-column layout
   ============================================================ */

/* ── HERO ─────────────────────────────────────────────────── */
.calc-hero {
  background: linear-gradient(140deg, var(--emerald-dark) 0%, var(--emerald) 60%, var(--emerald-mid) 100%);
  padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
  overflow: hidden;
  position: relative;
}
.calc-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 75% 50%, rgba(132,181,159,0.14) 0%, transparent 60%);
  pointer-events: none;
}
.calc-hero .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 768px) {
  .calc-hero .container { grid-template-columns: 1fr; }
  .calc-hero__graphic { display: none; }
}
.calc-hero__eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: var(--space-4);
}
.calc-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  font-weight: bold;
  color: white;
  line-height: 1.1;
  margin-bottom: var(--space-5);
}
.calc-hero__sub {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.75);
  line-height: 1.65;
}
.calc-hero__graphic {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Orb */
.hero-cost-orb {
  position: relative;
  width: 280px; height: 280px;
  display: flex; align-items: center; justify-content: center;
}
.hero-cost-orb__ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(132,181,159,0.25);
  animation: orbPulse 3s ease-in-out infinite;
}
.hero-cost-orb__ring--1 { width: 280px; height: 280px; animation-delay: 0s; }
.hero-cost-orb__ring--2 { width: 210px; height: 210px; animation-delay: 0.6s; border-color: rgba(132,181,159,0.38); }
.hero-cost-orb__ring--3 { width: 148px; height: 148px; animation-delay: 1.2s; border-color: rgba(132,181,159,0.55); }
@keyframes orbPulse {
  0%,100% { transform: scale(1); opacity: 0.6; }
  50%      { transform: scale(1.04); opacity: 1; }
}
.hero-cost-orb__core {
  position: relative; z-index: 1;
  background: rgba(8,55,42,0.72);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(132,181,159,0.3);
  border-radius: 50%;
  width: 132px; height: 132px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
}
.hero-cost-orb__label {
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sage);
}
.hero-cost-orb__value {
  font-family: var(--font-display);
  font-size: 1.3rem; font-weight: bold;
  color: white; line-height: 1;
}

/* ── CARDS SECTION ────────────────────────────────────────── */
.calc-cards-section {
  padding-top: clamp(3rem, 5vw, 5rem);
  padding-bottom: clamp(3rem, 5vw, 5rem);
}
.calc-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-bottom: var(--space-8);
}
@media (max-width: 900px) {
  .calc-cards-grid { grid-template-columns: 1fr; max-width: 520px; }
}
.calc-card {
  position: relative;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 20px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  text-align: left;
  cursor: pointer;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  overflow: hidden;
  display: flex; flex-direction: column; gap: var(--space-4);
}
.calc-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(14,74,56,0.12); border-color: var(--sage); }
.calc-card--featured { border-color: var(--emerald); background: var(--sage-very-light); }
[data-theme="dark"] .calc-card--featured { background: rgba(14,74,56,0.15); }
.calc-card__accent {
  position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 20px 20px 0 0;
}
.calc-card__accent--1 { background: linear-gradient(90deg, var(--sage) 0%, var(--emerald-mid) 100%); }
.calc-card__accent--2 { background: linear-gradient(90deg, var(--emerald) 0%, var(--emerald-mid) 100%); }
.calc-card__accent--3 { background: linear-gradient(90deg, var(--emerald-mid) 0%, var(--sage-mid) 100%); }
.calc-card__badge {
  position: absolute; top: var(--space-4); right: var(--space-4);
  background: var(--emerald); color: white;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 100px;
}
.calc-card__number { font-family: var(--font-display); font-size: var(--text-xs); font-weight: bold; color: var(--sage-mid); letter-spacing: 0.1em; }
.calc-card__icon {
  width: 52px; height: 52px; background: var(--sage-very-light);
  border-radius: 14px; display: flex; align-items: center; justify-content: center; color: var(--emerald);
}
.calc-card--featured .calc-card__icon { background: rgba(14,74,56,0.12); }
.calc-card__title { font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: bold; color: var(--color-text); line-height: 1.2; }
.calc-card__desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.65; flex: 1; }
.calc-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.calc-card__tag { font-size: 11px; font-weight: 600; color: var(--sage-mid); background: var(--sage-very-light); padding: 3px 10px; border-radius: 100px; }
.calc-card--featured .calc-card__tag { background: rgba(14,74,56,0.08); color: var(--emerald); }
.calc-card__cta {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: 700; color: var(--emerald);
  padding-top: var(--space-3); border-top: 1px solid var(--color-border);
}
.calc-card:hover .calc-card__cta svg { transform: translateX(3px); }
.calc-card__cta svg { transition: transform 0.2s ease; }
.calc-trust-strip {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: var(--space-3); font-size: var(--text-xs); color: var(--color-text-faint);
  padding: var(--space-5) 0;
}
.calc-trust-sep { opacity: 0.4; }

/* ── CALCULATOR VIEW SHELL ────────────────────────────────── */
.calc-view { min-height: 100vh; }

/* Top bar — full-width, sticky */
.calc-view__bar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-5) 0;
  position: sticky;
  top: 72px;
  z-index: 20;
}
.calc-view__bar .container {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}
@media (max-width: 900px) {
  .calc-view__bar .container { grid-template-columns: auto 1fr; }
  .cflow-steps { display: none; }
}
.calc-back-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: 600; color: var(--emerald);
  background: none; border: none; cursor: pointer; padding: 0;
  white-space: nowrap;
  transition: gap 0.2s;
}
.calc-back-btn:hover { gap: var(--space-3); }
.calc-view__bar-meta { display: flex; align-items: center; gap: var(--space-4); }
.calc-view__bar-num {
  font-family: var(--font-display); font-size: 2.2rem; font-weight: bold;
  color: var(--sage-very-light); line-height: 1; flex-shrink: 0;
}
[data-theme="dark"] .calc-view__bar-num { color: rgba(14,74,56,0.35); }
.calc-view__bar-title {
  font-family: var(--font-display); font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: bold; color: var(--color-text);
}
.calc-view__bar-sub { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 2px; }

/* Step indicator in bar */
.cflow-steps { display: flex; align-items: center; gap: 0; }
.cflow-step {
  display: flex; align-items: center; gap: var(--space-2);
  opacity: 0.4; transition: opacity 0.3s; white-space: nowrap;
}
.cflow-step--active { opacity: 1; }
.cflow-step--done   { opacity: 0.65; }
.cflow-step__dot {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--color-border); color: var(--color-text-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; font-family: var(--font-display);
  flex-shrink: 0; transition: background 0.3s, color 0.3s;
}
.cflow-step--active .cflow-step__dot { background: var(--emerald); color: white; }
.cflow-step--done   .cflow-step__dot { background: var(--sage); color: var(--emerald-dark); }
.cflow-step__label { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); }
.cflow-step--active .cflow-step__label { color: var(--color-text); }
.cflow-step-line { width: 32px; height: 1px; background: var(--color-border); margin: 0 var(--space-2); flex-shrink: 0; }

/* ── PANELS ───────────────────────────────────────────────── */
.cflow-panel { display: none; }
.cflow-panel--active { display: block; animation: cfadeIn 0.3s ease; }
@keyframes cfadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ══════════════════════════════════════════════════════════
   THE CORE LAYOUT — full-width two-column split
   Left: form (scrollable)   Right: sticky context panel
   ══════════════════════════════════════════════════════════ */
.calc-split {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 0;
  min-height: calc(100vh - 140px);
  align-items: start;
}
@media (max-width: 1100px) {
  .calc-split { grid-template-columns: 1fr 360px; }
}
@media (max-width: 900px) {
  .calc-split { grid-template-columns: 1fr; }
}

/* Confirmation layout — single column centred */
.calc-split--confirm {
  grid-template-columns: 1fr;
  min-height: unset;
}

/* Result layout — panel side stays but narrower */
.calc-split--result {
  align-items: start;
}

/* Left: form column */
.calc-split__form {
  padding: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 4rem) clamp(3rem, 6vw, 5rem);
  border-right: 1px solid var(--color-border);
  min-height: inherit;
}
@media (max-width: 900px) {
  .calc-split__form { border-right: none; padding-inline: clamp(1.25rem, 5vw, 2rem); }
}

/* Result form column — more breathing room */
.calc-split__form--result {
  padding-top: clamp(2rem, 4vw, 3rem);
}

/* Right: sticky panel column */
.calc-split__panel {
  position: sticky;
  top: 140px;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
  align-self: start;
}
@media (max-width: 900px) {
  .calc-split__panel { position: static; padding-top: 0; }
}

/* ── FORM HEAD ────────────────────────────────────────────── */
.cform-head {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: clamp(1.5rem, 3vw, 2rem);
  border-bottom: 1px solid var(--color-border);
}
.cform-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: bold; color: var(--color-text); margin-bottom: var(--space-3);
}
.cform-head p {
  font-size: var(--text-base); color: var(--color-text-muted);
  line-height: 1.65; max-width: 60ch;
}

/* ── FORM SECTIONS (calc 3) ───────────────────────────────── */
.cform-section { margin-bottom: clamp(1.25rem, 2vw, 1.75rem); }
.cform-section--divider {
  margin-top: clamp(2.5rem, 4vw, 4rem);
  padding-top: clamp(2rem, 3vw, 3rem);
  border-top: 1.5px solid var(--color-border);
}
.cform-section__badge {
  display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: white; background: var(--emerald); padding: 3px 10px; border-radius: 100px;
  margin-bottom: var(--space-3);
}
.cform-section__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: bold;
  color: var(--color-text); margin-bottom: var(--space-2);
}
.cform-section__sub { font-size: var(--text-base); color: var(--color-text-muted); max-width: 60ch; }

/* ── FIELDS GRID ──────────────────────────────────────────── */
.cform-fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 640px) { .cform-fields { grid-template-columns: 1fr; } }

.cform-field { display: flex; flex-direction: column; gap: var(--space-2); }
.cform-field--full { grid-column: 1 / -1; }

.cform-field label {
  font-size: var(--text-sm); font-weight: 600; color: var(--color-text); line-height: 1.4;
}
.clabel-range { font-weight: 400; color: var(--color-text-muted); }
.cform-hint { font-size: var(--text-xs); color: var(--color-text-faint); line-height: 1.5; }

/* Section C fields */
.cform-fields--c { grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 2.5vw, 2rem); }
@media (max-width: 640px) { .cform-fields--c { grid-template-columns: 1fr; } }
.cform-field-c { display: flex; flex-direction: column; gap: var(--space-1); }
.cform-field-c label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.cform-hint-c { font-size: var(--text-xs); color: var(--color-text-faint); line-height: 1.4; }

/* ── INPUTS ───────────────────────────────────────────────── */
.cfinput {
  position: relative; display: flex; align-items: center;
}
.cfinput input {
  width: 100%;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base); font-family: var(--font-body);
  background: var(--color-bg); color: var(--color-text);
  transition: border-color 0.2s, box-shadow 0.2s;
  -moz-appearance: textfield;
}
.cfinput input::-webkit-outer-spin-button,
.cfinput input::-webkit-inner-spin-button { -webkit-appearance: none; }
.cfinput input:focus { border-color: var(--emerald); outline: none; box-shadow: 0 0 0 3px rgba(14,74,56,0.1); }
.cfinput input.error { border-color: #dc2626; }
.cfinput--prefix span { position: absolute; left: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); pointer-events: none; font-weight: 500; }
.cfinput--prefix input { padding-left: var(--space-7); }
/* Currency prefix: hidden until user types a value */
.cfinput--currency::before { content: '$'; position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); font-size: var(--text-sm); color: var(--color-text-muted); pointer-events: none; font-weight: 500; opacity: 0; transition: opacity 0.15s ease; }
.cfinput--currency.has-value::before { opacity: 1; }
.cfinput--currency input { padding-left: var(--space-3) !important; transition: padding-left 0.15s ease; }
.cfinput--currency.has-value input { padding-left: var(--space-7) !important; }
.cfinput--suffix span { position: absolute; right: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); pointer-events: none; font-weight: 500; }
.cfinput--suffix input { padding-right: clamp(2.5rem, 5ch, 5.5rem); }

/* ── SLIDERS ──────────────────────────────────────────────── */
.cfscore-wrap {
  display: flex; align-items: center; gap: var(--space-5);
  background: var(--sage-very-light); border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}
[data-theme="dark"] .cfscore-wrap { background: rgba(14,74,56,0.1); }
.cfscore-track { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); }
.cfscore-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 3px;
  background: var(--color-border); cursor: pointer; outline: none;
}
.cfscore-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px; border-radius: 50%; background: var(--emerald); cursor: pointer;
  box-shadow: 0 2px 8px rgba(14,74,56,0.3); transition: transform 0.15s;
}
.cfscore-range::-webkit-slider-thumb:hover { transform: scale(1.15); }
.cfscore-range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: var(--emerald); border: none; cursor: pointer;
}
.cfscore-ticks {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--color-text-faint); font-weight: 500;
  padding: 0 2px;
}
.cfscore-badge {
  display: flex; align-items: baseline; gap: 1px;
  background: var(--emerald); border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4); flex-shrink: 0;
  min-width: 60px; justify-content: center;
}
.cfscore-badge span:first-child { font-family: var(--font-display); font-size: 1.6rem; font-weight: bold; color: white; line-height: 1; }
.cfscore-denom { font-size: var(--text-xs); color: rgba(255,255,255,0.65); margin-left: 1px; }

/* ── ACTIONS ──────────────────────────────────────────────── */
.cform-actions {
  display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap;
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--color-border);
  margin-top: clamp(1rem, 2vw, 1.5rem);
}
.cform-actions-note { font-size: var(--text-xs); color: var(--color-text-faint); }
.btn--lg { padding: var(--space-4) var(--space-8); font-size: var(--text-base); gap: var(--space-3); }

/* ── SIDE PANEL CARDS ─────────────────────────────────────── */
.cside-card {
  border-radius: 20px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.cside-card--dark {
  background: linear-gradient(145deg, var(--emerald-dark) 0%, var(--emerald) 100%);
  color: white;
}
.cside-card--hero {
  background: linear-gradient(145deg, var(--emerald-dark) 0%, var(--emerald) 100%);
  color: white;
}
.cside-card--sticky { position: sticky; top: 160px; }

.cside-card__label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sage);
}
.cside-card__divider {
  height: 1px; background: rgba(255,255,255,0.12); margin: var(--space-2) 0;
}
.cside-card__note {
  font-size: var(--text-xs); color: rgba(255,255,255,0.55); line-height: 1.55;
}

/* How-it-works steps */
.cside-steps-list { display: flex; flex-direction: column; gap: var(--space-5); }
.cside-step { display: flex; gap: var(--space-4); align-items: flex-start; }
.cside-step span {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,0.12); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.cside-step p { font-size: var(--text-sm); color: rgba(255,255,255,0.8); line-height: 1.55; }

/* Stat callout */
.cside-stat { display: flex; flex-direction: column; gap: var(--space-1); }
.cside-stat__num {
  font-family: var(--font-display); font-size: 2.2rem; font-weight: bold; color: white; line-height: 1;
}
.cside-stat__label { font-size: var(--text-xs); color: rgba(255,255,255,0.65); line-height: 1.5; }

/* Deal summary rows */
.cside-summary-hris {
  font-family: var(--font-display); font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: bold; color: white; line-height: 1.1;
}
.cside-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-3); font-size: var(--text-sm); color: rgba(255,255,255,0.65);
  padding: var(--space-2) 0; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.cside-row:last-child { border-bottom: none; }
.cside-row strong { font-weight: 700; color: white; font-family: var(--font-display); }
.cside-row--highlight strong {
  font-size: var(--text-lg); color: var(--sage);
}

/* Live total */
.cside-live-total {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: bold; color: white; line-height: 1;
  min-height: 3rem;
}
.cside-live-total__placeholder {
  font-family: var(--font-body); font-size: var(--text-sm);
  color: rgba(255,255,255,0.4); font-weight: 400;
}
.cside-result-total {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: bold; color: white; line-height: 1;
}

/* Formula block */
.cside-formula { padding: var(--space-4); background: rgba(0,0,0,0.18); border-radius: var(--radius-lg); }
.cside-formula__title { font-size: var(--text-xs); font-weight: 700; color: var(--sage); margin-bottom: var(--space-2); }
.cside-formula__body { font-size: 12px; color: rgba(255,255,255,0.6); line-height: 1.65; }

/* Blurred locked number */
.cside-blur-wrap { position: relative; margin: var(--space-2) 0; }
.cside-blur-num {
  font-family: var(--font-display); font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: bold; color: white; line-height: 1;
  filter: blur(14px); user-select: none; pointer-events: none;
}
.cside-blur-overlay {
  position: absolute; inset: -10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2); background: rgba(8,55,42,0.55);
  backdrop-filter: blur(2px); border-radius: var(--radius-lg);
  color: white; font-size: var(--text-sm); font-weight: 500; text-align: center; padding: var(--space-4);
}
.cside-blur-overlay svg { opacity: 0.75; }

/* Gate preview rows */
.cgate-preview-row {
  display: flex; justify-content: space-between;
  font-size: var(--text-xs); color: rgba(255,255,255,0.6); padding: var(--space-1) 0;
}
.cgate-preview-row strong { color: rgba(255,255,255,0.9); }

/* ── HUBSPOT FORM OVERRIDES ───────────────────────────────── */
.hs-form { display: flex !important; flex-direction: column !important; gap: var(--space-4) !important; }
.hs-form-field { display: flex !important; flex-direction: column !important; gap: var(--space-2) !important; }
.hs-form-field > label { font-size: var(--text-sm) !important; font-weight: 600 !important; color: var(--color-text) !important; font-family: var(--font-body) !important; }
.hs-input {
  width: 100% !important; border: 1.5px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important; padding: var(--space-3) var(--space-4) !important;
  font-size: var(--text-base) !important; font-family: var(--font-body) !important;
  background: var(--color-bg) !important; color: var(--color-text) !important;
  transition: border-color 0.2s !important; box-sizing: border-box !important;
}
.hs-input:focus { border-color: var(--emerald) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(14,74,56,0.1) !important; }
.hs-button {
  background: var(--emerald) !important; color: white !important; border: none !important;
  border-radius: 100px !important; padding: var(--space-3) var(--space-8) !important;
  font-size: var(--text-sm) !important; font-weight: 700 !important; font-family: var(--font-body) !important;
  cursor: pointer !important; transition: opacity 0.2s !important; width: 100% !important; margin-top: var(--space-2) !important;
}
.hs-button:hover { opacity: 0.88 !important; }
.hs-error-msgs { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.hs-error-msg { font-size: var(--text-xs) !important; color: #dc2626 !important; }
.hs-form-checkbox label { font-size: var(--text-xs) !important; color: var(--color-text-muted) !important; font-weight: 400 !important; font-family: var(--font-body) !important; }
.legal-consent-container { font-size: var(--text-xs) !important; color: var(--color-text-faint) !important; }
.submitted-message { display: none !important; }
.multi-container { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: var(--space-3) !important; }

/* ── CONFIRMATION ─────────────────────────────────────────── */
.cresult-confirm {
  max-width: 560px; margin-inline: auto; text-align: center;
  padding: clamp(4rem, 8vw, 7rem) var(--space-8);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-6);
}
.cresult-confirm__icon {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--sage-very-light); display: flex; align-items: center; justify-content: center;
  color: var(--emerald); animation: cfadeIn 0.5s ease;
}
.cresult-confirm h2 {
  font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: bold; color: var(--color-text);
}
.cresult-confirm p { font-size: var(--text-base); color: var(--color-text-muted); line-height: 1.65; max-width: 44ch; }

/* ── RESULT BREAKDOWN (calc 2) ────────────────────────────── */
.cresult-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem); margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 640px) { .cresult-grid { grid-template-columns: 1fr; } }
.cresult-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 16px; padding: clamp(1.25rem, 2.5vw, 1.75rem);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.cresult-card__icon {
  width: 42px; height: 42px; background: var(--sage-very-light);
  border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--emerald);
}
.cresult-card__label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage-mid); }
.cresult-card__amount { font-family: var(--font-display); font-size: clamp(1.4rem, 2.5vw, 1.75rem); font-weight: bold; color: var(--color-text); line-height: 1; }
.cresult-card__note { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; }

/* ── RESULT SECTIONS (calc 3) ─────────────────────────────── */
.cresult-sections { display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 1.5rem); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.cresult-section-block {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden;
}
.cresult-section-block__header {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-5) clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--sage-very-light); border-bottom: 1px solid var(--color-border);
}
[data-theme="dark"] .cresult-section-block__header { background: rgba(14,74,56,0.1); }
.cresult-section-block__badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: white; background: var(--emerald); padding: 3px 10px; border-radius: 100px; margin-bottom: var(--space-2);
}
.cresult-section-block__title { font-family: var(--font-display); font-size: var(--text-base); font-weight: bold; color: var(--color-text); }
.cresult-section-block__total { font-family: var(--font-display); font-size: clamp(1.4rem, 2.5vw, 1.75rem); font-weight: bold; color: var(--emerald); white-space: nowrap; }
.cresult-section-block__rows { padding: var(--space-4) clamp(1.25rem, 2.5vw, 1.75rem); display: flex; flex-direction: column; gap: var(--space-3); }
.cresult-row {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4);
  padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border);
}
.cresult-row:last-child { border-bottom: none; padding-bottom: 0; }
.cresult-row__label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.cresult-row__note { font-size: var(--text-xs); color: var(--color-text-faint); line-height: 1.45; margin-top: 2px; }
.cresult-row__amount { font-family: var(--font-display); font-size: var(--text-lg); font-weight: bold; color: var(--color-text); white-space: nowrap; }

/* ── INSIGHT BOX ──────────────────────────────────────────── */
.cresult-insight {
  background: var(--sage-very-light); border-radius: 16px;
  padding: clamp(1.25rem, 2.5vw, 1.75rem); margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
[data-theme="dark"] .cresult-insight { background: rgba(14,74,56,0.1); }
.cresult-insight__title { font-family: var(--font-display); font-size: var(--text-base); font-weight: bold; color: var(--color-text); margin-bottom: var(--space-3); }
.cresult-insight__body { font-size: var(--text-base); color: var(--color-text-muted); line-height: 1.7; }

/* ── CTA IN PANEL ─────────────────────────────────────────── */
.cresult-cta-card { display: flex; flex-direction: column; gap: var(--space-4); }
.cresult-cta-card h3 {
  font-family: var(--font-display); font-size: clamp(1rem, 1.8vw, 1.2rem);
  font-weight: bold; color: white; line-height: 1.3;
}
.cresult-cta-card p { font-size: var(--text-sm); color: rgba(255,255,255,0.7); line-height: 1.6; }
.btn--white {
  background: white; color: var(--emerald); border: none; border-radius: 100px;
  padding: var(--space-3) var(--space-6); font-size: var(--text-sm); font-weight: 700;
  font-family: var(--font-body); cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--space-2);
  transition: opacity 0.2s; white-space: nowrap; align-self: flex-start;
}
.btn--white:hover { opacity: 0.9; }
.btn--outline-white {
  background: transparent; color: white; border: 1.5px solid rgba(255,255,255,0.35);
  border-radius: 100px; padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm); font-weight: 600; font-family: var(--font-body);
  cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2);
  transition: background 0.2s, border-color 0.2s; width: 100%; justify-content: center;
}
.btn--outline-white:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.6); }