.growth-calculator-page {
  --calc-line: rgba(148, 163, 184, .2);
  --calc-surface: rgba(15, 20, 35, .82);
  --calc-surface-strong: rgba(10, 14, 26, .96);
  --calc-violet: #8b5cf6;
  --calc-cyan: #22d3ee;
  --calc-green: #34d399;
  background: #080b14;
}

.calc-hero-points { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 26px; color: #dce5f2; }
.calc-hero-points > span { display: inline-flex; align-items: center; gap: 9px; }
.calc-hero-points i { color: var(--calc-cyan); }

.calc-workspace {
  position: relative;
  padding: 72px 0 90px;
  background:
    radial-gradient(circle at 50% 0, rgba(139, 92, 246, .1), transparent 34%),
    #090d18;
}
.calc-layout { display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(360px, .86fr); gap: 28px; align-items: start; }
.calc-inputs,
.calc-results-sticky {
  border: 1px solid var(--calc-line);
  border-radius: 8px;
  background: linear-gradient(150deg, rgba(22, 27, 47, .9), rgba(8, 12, 23, .94));
  box-shadow: 0 24px 60px rgba(0, 0, 0, .22);
}
.calc-inputs { padding: 28px; }
.calc-results { position: sticky; top: calc(var(--nav-h, 72px) + 18px); align-self: start; }
.calc-results-sticky { padding: 26px; }
.calc-panel-heading { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 24px; }
.calc-panel-heading > div { display: flex; align-items: center; gap: 12px; min-width: 0; }
.calc-panel-heading h2 { margin: 0; font-family: 'Space Grotesk', sans-serif; font-size: 1.35rem; letter-spacing: 0; }
.calc-step { color: var(--calc-cyan); font: 700 .72rem/1 'Space Grotesk', sans-serif; }
.calc-reset { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: #aab5c8; cursor: pointer; }
.calc-reset:hover { color: #fff; }

.calc-fieldset,
.calc-lever { min-width: 0; margin: 0; border: 0; }
.calc-fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 24px 0 30px; border-top: 1px solid var(--calc-line); }
.calc-fieldset legend { padding: 0 12px 0 0; color: #dfe7f4; font-weight: 700; }
.calc-field-wide { grid-column: 1 / -1; }
.calc-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; color: #c4cede; font-size: .86rem; font-weight: 600; }
.calc-field > span,
.calc-field label > span { display: inline-flex; align-items: center; gap: 7px; }
.calc-field input[type='number'],
.calc-field input[type='email'],
.calc-field input[type='text'],
.calc-field select,
.calc-report-form input {
  width: 100%; min-height: 46px; padding: 0 13px;
  border: 1px solid rgba(148, 163, 184, .25); border-radius: 6px;
  background: rgba(4, 8, 17, .68); color: #f8fafc; font: inherit;
}
.calc-field input:focus,
.calc-field select:focus,
.calc-report-form input:focus { outline: 2px solid rgba(34, 211, 238, .5); outline-offset: 1px; border-color: var(--calc-cyan); }
.calc-field select { color-scheme: dark; }
.calc-help { padding: 2px; border: 0; background: transparent; color: #8793a7; cursor: help; }
.calc-help:hover { color: var(--calc-cyan); }

.calc-segments { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.calc-segments label { cursor: pointer; }
.calc-segments input { position: absolute; opacity: 0; pointer-events: none; }
.calc-segments label > span {
  min-height: 62px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px;
  border: 1px solid var(--calc-line); border-radius: 6px; color: #aeb9cc; text-align: center;
  background: rgba(4, 8, 17, .45); transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.calc-segments input:checked + span { border-color: #8b5cf6; color: #fff; background: rgba(124, 58, 237, .2); box-shadow: inset 0 0 0 1px rgba(139, 92, 246, .22); }
.calc-segments input:focus-visible + span { outline: 2px solid var(--calc-cyan); outline-offset: 2px; }

.calc-percent > div { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; }
.calc-percent > div span { color: #8290a5; }
.calc-percent input[type='range'] { width: 100%; height: 4px; accent-color: var(--calc-violet); cursor: pointer; }

.calc-lever-heading { align-items: flex-start; margin: 10px 0 18px; }
.calc-lever-heading p { max-width: 290px; margin: 0; color: #8793a7; font-size: .84rem; line-height: 1.5; text-align: right; }
.calc-levers { display: grid; gap: 12px; }
.calc-lever { padding: 18px; border: 1px solid var(--calc-line); border-radius: 7px; background: rgba(5, 9, 18, .4); }
.calc-lever legend { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; width: 100%; padding: 0; }
.calc-lever legend > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.calc-lever legend strong { color: #f5f7fb; }
.calc-lever legend small { color: #8793a7; font-size: .77rem; line-height: 1.35; }
.calc-lever-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 6px; background: rgba(34, 211, 238, .1); color: var(--calc-cyan); }
.calc-lever:nth-child(2n) .calc-lever-icon { background: rgba(139, 92, 246, .14); color: #b79cff; }
.calc-lever-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(148, 163, 184, .13); }
.calc-lever.is-disabled { opacity: .62; }
.calc-lever.is-disabled .calc-lever-fields { display: none; }

.calc-switch { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.calc-switch input { position: absolute; opacity: 0; }
.calc-switch > span { position: relative; width: 38px; height: 22px; border-radius: 999px; background: #273146; transition: background .2s ease; }
.calc-switch > span::after { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; border-radius: 50%; background: #cbd5e1; transition: transform .2s ease; }
.calc-switch input:checked + span { background: linear-gradient(90deg, #7c3aed, #0891b2); }
.calc-switch input:checked + span::after { transform: translateX(16px); background: #fff; }
.calc-switch input:focus-visible + span { outline: 2px solid var(--calc-cyan); outline-offset: 2px; }
.calc-switch b { color: #9eabc0; font-size: .72rem; font-weight: 600; }

.calc-costs { margin-top: 26px; padding-bottom: 0; }
.calc-costs legend { display: flex; align-items: center; gap: 7px; }
.calc-costs > p { grid-column: 1 / -1; margin: -8px 0 0; color: #8793a7; font-size: .82rem; }

.calc-estimate-label { flex: none; padding: 6px 9px; border: 1px solid rgba(52, 211, 153, .32); border-radius: 999px; color: #6ee7b7; font-size: .67rem; text-transform: uppercase; font-weight: 800; }
.calc-primary-result { padding: 22px; border: 1px solid rgba(139, 92, 246, .42); border-radius: 7px; background: linear-gradient(135deg, rgba(124, 58, 237, .2), rgba(6, 182, 212, .11)); }
.calc-primary-result > span { color: #c7d1e1; font-size: .82rem; }
.calc-primary-result strong { display: block; margin: 6px 0; color: #fff; font-family: 'Space Grotesk', sans-serif; font-size: clamp(2rem, 4vw, 3.15rem); line-height: 1; overflow-wrap: anywhere; }
.calc-primary-result small { color: #8e9aaf; line-height: 1.4; }
.calc-primary-result strong.is-negative,
.calc-kpis strong.is-negative { color: #fca5a5; }
.calc-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 18px; background: var(--calc-line); border: 1px solid var(--calc-line); border-radius: 7px; overflow: hidden; }
.calc-kpis > div { min-height: 78px; padding: 14px; background: #0c1120; }
.calc-kpis span { display: block; min-height: 30px; color: #8592a7; font-size: .72rem; line-height: 1.35; }
.calc-kpis strong { display: block; color: #edf2f8; font-size: 1.05rem; overflow-wrap: anywhere; }
.calc-cost-note { margin: 12px 0 0; color: #8390a4; font-size: .74rem; line-height: 1.45; }
.calc-error { padding: 10px 12px; color: #fecaca; background: rgba(239, 68, 68, .12); border: 1px solid rgba(239, 68, 68, .3); border-radius: 6px; }

.calc-lever-results,
.calc-outcomes,
.calc-scenarios { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--calc-line); }
.calc-lever-results h3,
.calc-outcomes h3,
.calc-scenarios h3 { margin: 0 0 12px; font-size: .86rem; color: #dce4f0; }
.calc-lever-results > div { display: flex; justify-content: space-between; gap: 15px; padding: 7px 0; color: #9aa7bb; font-size: .8rem; }
.calc-lever-results strong { color: #e7edf6; }
.calc-lever-results > div[hidden] { display: none; }
.calc-outcomes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.calc-outcomes h3 { grid-column: 1 / -1; }
.calc-outcomes > div { min-width: 0; padding: 10px 5px; text-align: center; border: 1px solid rgba(148, 163, 184, .14); border-radius: 6px; background: rgba(4, 8, 17, .5); }
.calc-outcomes strong { display: block; color: var(--calc-cyan); font-size: 1.08rem; }
.calc-outcomes span { display: block; margin-top: 4px; color: #8491a5; font-size: .61rem; line-height: 1.25; }
.calc-scenarios > p { margin: -5px 0 12px; color: #8491a5; font-size: .72rem; }
.calc-scenarios > div { display: grid; grid-template-columns: 1fr auto 36px; gap: 10px; align-items: center; padding: 9px 10px; color: #9ba8bb; border-radius: 5px; font-size: .78rem; }
.calc-scenarios > div.is-planned { background: rgba(139, 92, 246, .13); color: #e9e4ff; }
.calc-scenarios strong { color: #f4f7fb; }
.calc-scenarios small { text-align: right; color: #718097; }

.calc-report-section { background: radial-gradient(circle at 75% 50%, rgba(34, 211, 238, .09), transparent 30%), #080b14; }
.calc-report-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: start; }
.calc-report-layout .section-title,
.calc-report-layout .section-subtitle { text-align: left; margin-left: 0; }
.calc-report-form { padding: 28px; border: 1px solid var(--calc-line); border-radius: 8px; background: var(--calc-surface); }
.calc-report-form .form-group label { color: #c4cede; }
.calc-review { display: flex; gap: 12px; align-items: flex-start; margin: 18px 0; color: #d9e1ed; cursor: pointer; }
.calc-review input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--calc-violet); }
.calc-review span { display: grid; gap: 4px; }
.calc-review small { color: #8d9aaf; line-height: 1.45; }
.calc-report-form .form-privacy { margin: 10px 0 16px; }

.calc-explain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.calc-explain-grid article { padding: 26px; border: 1px solid var(--calc-line); border-radius: 7px; background: linear-gradient(145deg, rgba(17, 24, 39, .8), rgba(9, 13, 24, .65)); }
.calc-explain-grid i { color: var(--calc-cyan); font-size: 1.35rem; }
.calc-explain-grid article:nth-child(2) i { color: #a78bfa; }
.calc-explain-grid article:nth-child(3) i { color: var(--calc-green); }
.calc-explain-grid h3 { margin: 16px 0 8px; font-size: 1rem; }
.calc-explain-grid p { margin: 0; color: #99a5b8; line-height: 1.65; }
.calc-methodology { margin-top: 22px; border: 1px solid var(--calc-line); border-radius: 7px; background: rgba(9, 13, 24, .72); }
.calc-methodology summary { display: flex; justify-content: space-between; align-items: center; padding: 20px 22px; cursor: pointer; color: #eef2f7; font-weight: 700; list-style: none; }
.calc-methodology summary::-webkit-details-marker { display: none; }
.calc-methodology[open] summary i { transform: rotate(180deg); }
.calc-method-body { padding: 0 22px 22px; color: #a2aec0; line-height: 1.65; }
.calc-method-body dl { display: grid; grid-template-columns: 170px 1fr; gap: 12px 22px; margin-bottom: 0; }
.calc-method-body dt { color: #dce5f1; font-weight: 700; }
.calc-method-body dd { margin: 0; }

.calc-ready { background: #080b14; }
.calc-ready-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: center; }
.calc-ready-layout .section-title { text-align: left; }
.calc-ready-layout ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.calc-ready-layout li { display: flex; gap: 13px; color: #b6c1d2; }
.calc-ready-layout li i { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: rgba(52, 211, 153, .13); color: var(--calc-green); font-size: .7rem; }
.calc-final-cta { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin-top: 52px; padding-top: 32px; border-top: 1px solid var(--calc-line); }
.calc-final-cta h2 { max-width: 680px; margin: 0; font-size: clamp(1.35rem, 3vw, 2.2rem); letter-spacing: 0; }
.calc-final-cta .btn { flex: none; }

@media (max-width: 1100px) {
  .calc-layout { grid-template-columns: 1fr; }
  .calc-results { position: static; }
}

@media (max-width: 768px) {
  .calc-hero-points {
    display: grid;
    justify-items: center;
    gap: 12px;
    width: 100%;
    padding-inline: 12px;
  }

  .calc-hero-points > span {
    justify-content: center;
    text-align: center;
    line-height: 1.35;
  }

  .calc-hero-points { gap: 12px 18px; font-size: .8rem; }
  .calc-workspace { padding: 42px 0 60px; }
  .calc-layout { width: min(100% - 24px, var(--container-max)); }
  .calc-inputs,
  .calc-results-sticky { padding: 18px; }
  .calc-panel-heading { align-items: flex-start; }
  .calc-panel-heading h2 { font-size: 1.12rem; }
  .calc-fieldset,
  .calc-lever-fields { grid-template-columns: 1fr; }
  .calc-segments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc-lever { padding: 15px; }
  .calc-lever legend { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 9px; }
  .calc-lever legend small { display: none; }
  .calc-switch b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .calc-lever-heading { display: block; }
  .calc-lever-heading p { max-width: none; margin-top: 10px; text-align: left; }
  .calc-kpis { grid-template-columns: 1fr 1fr; }
  .calc-outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc-outcomes h3 { grid-column: 1 / -1; }
  .calc-outcomes > div:last-child { grid-column: 1 / -1; }
  .calc-report-layout,
  .calc-ready-layout { grid-template-columns: 1fr; gap: 28px; }
  .calc-report-form { padding: 20px; }
  .calc-explain-grid { grid-template-columns: 1fr; }
  .calc-method-body dl { grid-template-columns: 1fr; gap: 5px; }
  .calc-method-body dd { margin-bottom: 10px; }
  .calc-final-cta { display: grid; }
  .calc-final-cta .btn { width: 100%; justify-content: center; text-align: center; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .calc-switch > span,
  .calc-switch > span::after,
  .calc-segments label > span { transition: none; }
}