/* Website and app cost calculator. Scoped to .cc-* so wpx.css stays untouched. */
.cc{--cc-gap:26px; margin:30px 0 10px;}
.cc-grid{display:grid; grid-template-columns:1fr 340px; gap:var(--cc-gap); align-items:start;}
@media(max-width:900px){ .cc-grid{grid-template-columns:1fr;} }

.cc-panel{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px;}
.cc fieldset{border:0; margin:0 0 22px; padding:0;}
.cc fieldset:last-of-type{margin-bottom:6px;}
.cc legend{font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:0 0 10px;}

.cc-opts{display:flex; flex-wrap:wrap; gap:8px;}
.cc-opt{position:relative;}
.cc-opt input{position:absolute; opacity:0; width:0; height:0;}
.cc-opt span{display:inline-block; cursor:pointer; background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:9px 14px; font-size:14.5px; font-weight:600; color:var(--body); transition:border-color .15s, color .15s, box-shadow .15s;}
.cc-opt span:hover{border-color:var(--brand-2); color:var(--ink);}
.cc-opt input:checked + span{border-color:var(--brand); color:var(--brand-ink); box-shadow:inset 0 0 0 1px var(--brand); background:#eaf1ff;}
.cc-opt input:focus-visible + span{outline:2px solid var(--brand); outline-offset:2px;}

.cc-range{display:flex; align-items:center; gap:14px;}
.cc-range input[type=range]{flex:1; accent-color:var(--brand);}
.cc-num{min-width:74px; text-align:center; font-weight:800; color:var(--ink); background:#fff;
  border:1px solid var(--line); border-radius:9px; padding:7px 4px; font-size:16px;}

.cc-checks{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
@media(max-width:560px){ .cc-checks{grid-template-columns:1fr;} }

.cc-out{position:sticky; top:88px; background:var(--ink); color:#fff; border-radius:14px; padding:24px; }
.cc-out h3{color:#fff; font-size:14px; letter-spacing:.06em; text-transform:uppercase; font-weight:800; opacity:.66;}
.cc-total{font-size:clamp(26px,3.4vw,34px); font-weight:850; letter-spacing:-.02em; margin:10px 0 2px; color:#fff;}
.cc-sub{font-size:14px; opacity:.72;}
.cc-out dl{display:grid; grid-template-columns:auto auto; gap:8px 12px; margin:20px 0 0; font-size:14px;}
.cc-out dt{opacity:.7;} .cc-out dd{margin:0; text-align:right; font-weight:700;}
.cc-note{margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.14); font-size:12.5px; opacity:.62; line-height:1.5;}

.cc-break{margin-top:26px;}
.cc-break table{width:100%; border-collapse:collapse; font-size:15px;}
.cc-break th,.cc-break td{text-align:left; padding:11px 10px; border-bottom:1px solid var(--line);}
.cc-break th{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:800;}
.cc-break td:last-child,.cc-break th:last-child{text-align:right; white-space:nowrap;}
.cc-break tfoot td{font-weight:800; color:var(--ink); border-bottom:0;}

/* On wide screens the tool breaks out of the 760px reading column.
   Negative margin, not transform, so the sticky result card keeps working. */
@media(min-width:1120px){
  .cc{width:1000px; margin-left:-142px;}
}