.cost-calculator-page { background: var(--surface); }

.cost-calculator-hero {
  padding: clamp(40px, 6vw, 78px) 0 clamp(32px, 5vw, 58px);
  background: var(--harbor-700);
  color: var(--white);
}

.cost-calculator-hero .guide-breadcrumbs { margin-bottom: clamp(32px, 5vw, 56px); }
.cost-calculator-hero .guide-breadcrumbs a { color: var(--white); }
.cost-calculator-hero .guide-breadcrumbs span { color: var(--calibration); }

.cost-calculator-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.7fr);
  gap: clamp(30px, 6vw, 82px);
  align-items: end;
}

.cost-calculator-intro h1 {
  max-width: 13ch;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3rem, 7vw, 5.7rem);
  font-weight: 870;
  letter-spacing: -0.035em;
  line-height: 0.94;
  text-wrap: balance;
}

.cost-calculator-intro > div > p {
  max-width: 66ch;
  margin: 28px 0 0;
  color: oklch(0.93 0.025 220);
  font-size: clamp(1.05rem, 1.5vw, 1.24rem);
  line-height: 1.6;
}

.cost-calculator-intro aside {
  padding: 24px 0 4px;
  border-block: 1px solid oklch(0.68 0.06 220 / 0.58);
}

.cost-calculator-intro aside strong { display: block; margin-bottom: 8px; color: var(--calibration); }
.cost-calculator-intro aside p { margin: 0; color: oklch(0.88 0.02 230); line-height: 1.55; }
.cost-calculator-hero .guide-meta { margin-top: clamp(34px, 5vw, 58px); color: oklch(0.83 0.025 230); }

.cost-calculator-layout { padding-block: clamp(42px, 7vw, 84px); }

.cost-calculator-form,
.cost-calculator-result {
  overflow: hidden;
  border: 2px solid var(--harbor-700);
  border-radius: var(--radius-md);
  background: var(--white);
}

.cost-calculator-form-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.7fr);
  gap: 28px;
  align-items: end;
  padding: clamp(24px, 4vw, 40px);
  background: var(--harbor-700);
  color: var(--white);
}

.cost-calculator-form-head span { color: var(--calibration); font-size: var(--type-compact); font-weight: 850; }
.cost-calculator-form-head h2 { margin: 7px 0 0; font-family: var(--display); font-size: clamp(1.8rem, 3.5vw, 2.8rem); letter-spacing: -0.03em; line-height: 1; }
.cost-calculator-form-head p { margin: 0; color: oklch(0.88 0.02 230); font-size: var(--type-support); line-height: 1.55; }

.cost-calculator-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}

.cost-calculator-fields > label { min-width: 0; padding: clamp(24px, 4vw, 38px); background: var(--white); }
.cost-calculator-fields label > span:first-child { display: block; margin-bottom: 10px; color: var(--harbor-900); font-size: var(--type-label); font-weight: 800; }

.cost-calculator-fields input {
  width: 100%;
  min-height: 52px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}

.cost-calculator-fields input::placeholder { color: oklch(0.48 0.025 230); opacity: 1; }
.cost-calculator-fields input:focus { border-color: var(--harbor-600); outline: 3px solid var(--calibration); outline-offset: 2px; }
.cost-calculator-fields small { display: block; margin-top: 10px; color: var(--muted); font-size: var(--type-meta); line-height: 1.5; }

.cost-calculator-money,
.cost-calculator-percent { position: relative; display: block; }

.cost-calculator-money i,
.cost-calculator-percent i {
  position: absolute;
  top: 50%;
  color: var(--muted);
  font-style: normal;
  font-weight: 750;
  transform: translateY(-50%);
  pointer-events: none;
}

.cost-calculator-money i { left: 13px; }
.cost-calculator-money input { padding-left: 30px; }
.cost-calculator-percent i { right: 13px; }
.cost-calculator-percent input { padding-right: 34px; }

.cost-calculator-boundary { border-top: 1px solid var(--line); }
.cost-calculator-boundary summary { padding: 18px clamp(24px, 4vw, 40px); color: var(--harbor-700); font-weight: 800; cursor: pointer; }
.cost-calculator-boundary summary:hover { background: var(--surface); }
.cost-calculator-boundary summary:focus-visible { outline-offset: -4px; }
.cost-calculator-boundary > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; padding: 4px clamp(24px, 4vw, 40px) 8px; }
.cost-calculator-boundary ul { margin: 0; padding-left: 20px; }
.cost-calculator-boundary li { margin-bottom: 8px; color: var(--muted); font-size: var(--type-compact); }
.cost-calculator-boundary li::marker { color: var(--harbor-600); }
.cost-calculator-boundary > p { margin: 0; padding: 10px clamp(24px, 4vw, 40px) 24px; color: var(--muted); font-size: var(--type-compact); }
.cost-calculator-boundary a { color: var(--harbor-700); font-weight: 750; text-underline-offset: 3px; }

.cost-calculator-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 24px clamp(20px, 4vw, 38px);
  background: oklch(0.95 0.018 220);
}

.cost-calculator-actions .button { min-height: 48px; }
.cost-calculator-actions .button-quiet,
.cost-calculator-result-actions .button-quiet { border-color: var(--line); background: var(--white); color: var(--harbor-700); }
.cost-calculator-actions .button-quiet:hover,
.cost-calculator-result-actions .button-quiet:hover { background: var(--surface-deep); }
.cost-calculator-actions p { flex: 1 1 260px; margin: 0 0 0 8px; color: var(--muted); font-size: var(--type-compact); }

.cost-calculator-result { margin-top: clamp(32px, 6vw, 64px); }
.cost-calculator-result > header { padding: clamp(26px, 4vw, 42px); background: var(--harbor-700); color: var(--white); }
.cost-calculator-result > header > span { color: var(--calibration); font-size: var(--type-compact); font-weight: 850; }
.cost-calculator-result h2 { margin: 8px 0 12px; font-family: var(--display); font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -0.03em; line-height: 1; }
.cost-calculator-result > header p { max-width: 67ch; margin: 0; color: oklch(0.88 0.02 230); line-height: 1.58; }

.cost-calculator-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-bottom: 1px solid var(--line);
}

.cost-calculator-metrics div { min-width: 0; padding: 24px clamp(16px, 3vw, 30px); border-right: 1px solid var(--line); }
.cost-calculator-metrics div:last-child { border-right: 0; }
.cost-calculator-metrics dt { color: var(--muted); font-size: var(--type-meta); font-weight: 760; }
.cost-calculator-metrics dd { margin: 6px 0 0; overflow-wrap: anywhere; color: var(--harbor-700); font-family: var(--display); font-size: var(--type-price); font-weight: 850; line-height: 1.1; }
.cost-calculator-metrics div[data-change="cost"] dd { color: var(--signal-red); }
.cost-calculator-metrics div[data-change="save"] dd { color: var(--harbor-600); }

.cost-calculator-breakdown { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr); gap: clamp(34px, 6vw, 84px); padding: clamp(28px, 5vw, 48px); }
.cost-calculator-breakdown h3 { margin: 0 0 18px; font-size: var(--type-body); }
.cost-calculator-breakdown dl { margin: 0; border-block: 1px solid var(--line); }
.cost-calculator-breakdown dl div { display: flex; justify-content: space-between; gap: 20px; padding: 11px 0; border-top: 1px solid var(--line); }
.cost-calculator-breakdown dl div:first-child { border-top: 0; }
.cost-calculator-breakdown dt { color: var(--muted); font-size: var(--type-compact); }
.cost-calculator-breakdown dd { margin: 0; color: var(--harbor-900); font-weight: 780; font-variant-numeric: tabular-nums; }

.cost-calculator-capacity > div { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font-size: var(--type-compact); }
.cost-calculator-capacity progress { width: 100%; height: 14px; margin: 12px 0 16px; overflow: hidden; border: 0; border-radius: var(--radius-lg); background: var(--surface-deep); color: var(--harbor-600); }
.cost-calculator-capacity progress::-webkit-progress-bar { background: var(--surface-deep); }
.cost-calculator-capacity progress::-webkit-progress-value { background: var(--harbor-600); }
.cost-calculator-capacity progress::-moz-progress-bar { background: var(--harbor-600); }
.cost-calculator-capacity p { margin: 0; color: var(--muted); font-size: var(--type-compact); line-height: 1.55; }

.cost-calculator-result-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 0 clamp(28px, 5vw, 48px) clamp(28px, 5vw, 48px); }
.cost-calculator-pilot-link { display: inline-flex; min-height: 44px; align-items: center; margin-left: auto; color: var(--harbor-700); font-size: var(--type-compact); font-weight: 800; text-underline-offset: 4px; }
.cost-calculator-disclaimer { margin: 0; padding: 22px clamp(28px, 5vw, 48px); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--type-compact); line-height: 1.55; }

.cost-calculator-next-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  margin-top: clamp(34px, 6vw, 68px);
  padding: clamp(26px, 4vw, 40px) 0;
  border-block: 1px solid var(--line);
}

.cost-calculator-next-step h2 { max-width: 22ch; margin: 0 0 10px; font-family: var(--display); font-size: clamp(1.7rem, 3vw, 2.5rem); letter-spacing: -0.03em; line-height: 1; }
.cost-calculator-next-step p { max-width: 70ch; margin: 0; color: var(--muted); }
.cost-calculator-next-step > a { display: inline-flex; min-height: 44px; align-items: center; color: var(--harbor-700); font-weight: 800; text-underline-offset: 4px; white-space: nowrap; }

@media (max-width: 820px) {
  .cost-calculator-intro,
  .cost-calculator-form-head,
  .cost-calculator-breakdown { grid-template-columns: 1fr; }
  .cost-calculator-intro aside { max-width: 66ch; }
  .cost-calculator-fields { grid-template-columns: 1fr; }
  .cost-calculator-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cost-calculator-metrics div:nth-child(2) { border-right: 0; }
  .cost-calculator-metrics div:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .cost-calculator-boundary > div { grid-template-columns: 1fr; gap: 0; }
  .cost-calculator-next-step { grid-template-columns: 1fr; }
  .cost-calculator-next-step > a { white-space: normal; }
}

@media (max-width: 560px) {
  .cost-calculator-intro h1 { font-size: clamp(2.65rem, 13vw, 4.2rem); }
  .cost-calculator-metrics { grid-template-columns: 1fr; }
  .cost-calculator-metrics div { border-right: 0; border-bottom: 1px solid var(--line); }
  .cost-calculator-metrics div:last-child { border-bottom: 0; }
  .cost-calculator-result-actions { align-items: stretch; }
  .cost-calculator-result-actions .button { width: 100%; }
  .cost-calculator-pilot-link { margin: 6px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cost-calculator-page * { scroll-behavior: auto; transition-duration: 0.01ms !important; }
}