/* Cost Check — a form and a number. Nothing decorative. */
.cc { max-width: 40rem; padding-block: 2.5rem 4rem; }
.cc h1 { font: 700 var(--step-3)/1.1 var(--font-warm); margin: 0 0 1rem; }
.cc .lede { font-size: var(--step-0); line-height: 1.55; margin: 0 0 1rem; }
.cc h2 { font: 600 var(--step-1) var(--font-body); margin: 2rem 0 .6rem; }
.cc p { margin: 0 0 .9rem; }

.cc-form { display: grid; gap: 1.5rem; margin: 2rem 0; }
.cc-form fieldset { border: 1px solid var(--rule); border-radius: .5rem;
  padding: 1.1rem 1.25rem 1.25rem; background: #fff; margin: 0; }
.cc-form legend { padding: 0 .4rem; font-weight: 700; font-size: .95rem; }
.cc-form label { display: block; margin: .85rem 0 .3rem; font-size: .9rem; font-weight: 600; }
.cc-form fieldset > label:first-of-type { margin-top: 0; }
.cc-opt { font-weight: 400; color: #6b625a; }
.cc-form input, .cc-form select { width: 100%; padding: .75rem; border: 1px solid var(--rule);
  border-radius: .4rem; font: inherit; background: #fff; color: var(--ink); }
.cc-form input:focus-visible, .cc-form select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; }
.cc-when { margin-top: .25rem; padding-left: .9rem; border-left: 2px solid var(--rule); }

.cc-result { background: #fff; border: 1px solid var(--rule); border-radius: .6rem;
  padding: 1.5rem; margin: 2rem 0; }
.cc-result h2 { margin: 0 0 .25rem; font: 600 1rem var(--font-body); color: #5c5550; }
.cc-result h3 { margin: 1.5rem 0 .5rem; font: 600 1rem var(--font-body); }
.cc-total { font: 700 var(--step-3)/1 var(--font-warm); margin: 0 0 .2rem; }
.cc-permonth { font-size: .88rem; color: #5c5550; margin: 0 0 1.25rem; }
.cc-breakdown { display: grid; grid-template-columns: 1fr auto; gap: .3rem 1rem;
  margin: 0; padding-top: 1rem; border-top: 1px solid var(--rule); font-size: .92rem; }
.cc-breakdown dt { color: #453f3a; }
.cc-breakdown dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.cc-partial { margin-top: 1.1rem; padding: .8rem 1rem; border-left: 3px solid var(--accent);
  background: #FAF7F2; font-size: .9rem; line-height: 1.5; }
.cc-questions { margin: 0 0 1.25rem; padding-left: 1.2rem; }
.cc-questions li { margin: 0 0 .5rem; line-height: 1.5; }

@media (max-width: 480px) {
  .cc-result .btn-quiet { width: 100%; }
}