
#cost-calc { margin-top: 40px; }


.cc-out .cost-col { padding: 0; background: transparent; color: inherit; border-radius: 0; container-type: normal; }
.cc-out .cost-val { white-space: nowrap; }


@media (min-width: 900px) { .cc-out { top: calc(var(--nav-height) + var(--strip-height) + 24px); } }


.cc-lines li:last-child { color: var(--secondary); font-weight: 400; border-top: 0; margin-top: 0; padding-top: 8px; }


.cc-split { display: grid; gap: 10px; }
.cc-split-row { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: 0.875rem; color: var(--secondary); }
.cc-split-bar { height: 12px; border-radius: 6px; background: var(--surface-elevated); overflow: hidden; }
.cc-split-bar i { display: block; height: 100%; border-radius: 6px; transition: width 0.4s ease; }
.cc-split-row.stay i { background: var(--amber); }
.cc-split-row.own i { background: var(--accent); }
.cc-split-row b { color: var(--ink); font-weight: 600; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .cc-split-bar i { transition: none; } }


@media (max-width: 899px) {
  .cc-out { position: static; margin: 0; border-radius: 16px; box-shadow: none; border-top: 0; padding: 24px; gap: 24px; }
  .cc-out .cc-lines, .cc-out .with-us, .cc-out .cc-verdict, .cc-out .cc-assume { display: block; }
  .cc-out .cc-lines { display: block; }
  .cc-out .right-now { display: block; }
  .cc-out .right-now .cost-val { font-size: clamp(44px, 14vw, 64px); }
}
.cc-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 3px solid var(--amber);
  box-shadow: 0 -8px 24px color-mix(in srgb, var(--ink) 8%, transparent); font-weight: 600; color: var(--ink); }
.cc-sticky b { font-family: 'Oswald', sans-serif; font-size: 1.75rem; color: var(--amber); }
@media (max-width: 899px) { .cc-sticky.is-on { display: flex; } }


.cc-out .cost-col.with-us .cost-val { color: var(--accent); }


.cc-out .cost-col.with-us .cost-val { white-space: normal; }
