/* What missed calls cost: /missed-call-cost and the homepage cost calculator section.
   Colours only from the --gradient-* tokens (home-gradient.css). */
.mcc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.mcc-card{border:1px solid var(--gradient-line);border-radius:16px;padding:28px;background:var(--gradient-white)}
:root[data-theme="dark"] .mcc-card{background:var(--gradient-soft)}
.mcc-card h2,.mcc-card h3,.gradient-home .home-story .mcc-card h2{font-size:22px;line-height:1.25;letter-spacing:-.02em;margin:0 0 6px;font-weight:500;max-width:none}
.mcc-card>p{color:var(--gradient-muted);margin:0 0 18px;line-height:1.55}
.mcc-step{font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--gradient-muted);display:block;margin-bottom:8px}
.mcc-field{margin-bottom:16px}
.mcc-field label{display:block;font-size:15px;font-weight:500;color:var(--gradient-ink);margin-bottom:6px}
.mcc-input{display:flex;align-items:center;border:1px solid var(--gradient-line);border-radius:8px;background:var(--gradient-canvas);min-height:52px;overflow:hidden}
.mcc-input:focus-within{outline:3px solid var(--gradient-focus);outline-offset:1px}
.mcc-input span{padding:0 0 0 14px;color:var(--gradient-muted);font-size:17px}
.mcc-input span.suf{padding:0 14px 0 0}
.mcc-input input,.mcc-input select{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:18px;color:var(--gradient-ink);padding:12px 14px;outline:none;appearance:none;-webkit-appearance:none}
.mcc-input select{cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:36px}
.mcc-input select option{color:#1e1b17;background:#f8f7f4}
.mcc-hint{font-size:13.5px;color:var(--gradient-muted);margin:6px 0 0;line-height:1.5}
.mcc-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mcc-row .mcc-field{margin-bottom:0}
.mcc-btn{min-height:52px;padding:0 22px;border-radius:8px;font:inherit;font-size:16px;font-weight:500;cursor:pointer;background:var(--gradient-action);color:var(--gradient-action-ink);border:1px solid var(--gradient-action)}
.mcc-btn:disabled{opacity:.6;cursor:progress}
.mcc-btn:focus-visible,.mcc-cta:focus-visible,.mcc-link:focus-visible{outline:3px solid var(--gradient-focus);outline-offset:2px}
.mcc-status{min-height:1.4em;margin:12px 0 0;font-size:15px;color:var(--gradient-muted)}
.mcc-status.err{color:var(--gradient-accent)}
.mcc-status.ok{color:var(--gradient-ink)}
.mcc-found{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:16px 0 0;padding:16px;border-radius:10px;background:var(--gradient-soft);font-size:14.5px;line-height:1.45}
:root[data-theme="dark"] .mcc-found{background:var(--gradient-canvas)}
.mcc-found dt{color:var(--gradient-muted)}
.mcc-found dd{margin:0;color:var(--gradient-ink);overflow-wrap:anywhere}
.mcc-skip{font-size:14px;color:var(--gradient-muted);margin:14px 0 0}

/* Result: a paper panel with oxblood in light mode, a night panel with wine in dark mode. */
.mcc-result{--r-bg:#f8f7f4;--r-ink:#1e1b17;--r-muted:#57524b;--r-accent:#6b4a2c;--r-line:rgba(30,27,23,.22);--r-cta:#2a2520;--r-cta-ink:#f1ece3;
  position:sticky;top:calc(96px + env(safe-area-inset-top,0px));border-radius:16px;padding:30px 28px;background:var(--r-bg);color:var(--r-ink);border-top:4px solid var(--r-accent)}
:root[data-theme="dark"] .mcc-result{--r-bg:#171513;--r-ink:#ece7de;--r-muted:#aaa398;--r-accent:#d0a77a;--r-line:rgba(236,231,222,.14);--r-cta:#d0a77a;--r-cta-ink:#171513;border:1px solid rgba(236,231,222,.14);border-top:4px solid #d0a77a}
.mcc-result .mcc-step{color:var(--r-muted)}
.mcc-stats{list-style:none;margin:6px 0 0;padding:0}
.mcc-stats li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid var(--r-line)}
.mcc-stats li:last-child{border-bottom:0}
.mcc-stats span{font-size:16px;color:var(--r-muted)}
.mcc-stats b{font-size:clamp(28px,3.4vw,40px);font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--r-ink);white-space:nowrap}
.mcc-stats li.mcc-big b{font-size:clamp(36px,4.6vw,56px);color:var(--r-accent)}
.mcc-how{margin-top:14px;font-size:14px;line-height:1.55;color:var(--r-muted)}
.mcc-how summary{cursor:pointer;color:var(--r-ink);font-weight:500;min-height:40px;display:flex;align-items:center}
.mcc-how p{margin:6px 0 10px}
.mcc-assume{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.mcc-assume label{display:block;font-size:13.5px;color:var(--r-muted);margin-bottom:4px}
.mcc-assume input{width:100%;min-height:44px;border-radius:8px;border:1px solid var(--r-line);background:transparent;color:var(--r-ink);font:inherit;font-size:16px;padding:8px 10px}
.mcc-assume input:focus-visible{outline:3px solid var(--r-accent);outline-offset:1px}
.mcc-disclaim{font-size:13px;color:var(--r-muted);margin:14px 0 0;line-height:1.5}
.mcc-cta{display:flex;justify-content:center;align-items:center;min-height:54px;margin-top:20px;border-radius:8px;background:var(--r-cta);color:var(--r-cta-ink);font-weight:600;font-size:17px;text-decoration:none}
.mcc-cta:hover{filter:brightness(1.08)}
.mcc-cta-note{font-size:13px;color:var(--r-muted);margin:10px 0 0;text-align:center;line-height:1.5}
.mcc-link{color:var(--r-ink);text-underline-offset:3px}
.mcc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:900px){.mcc{grid-template-columns:1fr;gap:24px}.mcc-result{position:static}}
@media (max-width:560px){
  .mcc-card{padding:20px 18px}
  .mcc-result{padding:24px 18px}
  .mcc-row{grid-template-columns:1fr}
  .mcc-row .mcc-field{margin-bottom:14px}
  .mcc-assume{grid-template-columns:1fr}
  .mcc-stats li{flex-wrap:wrap}
}
/* Homepage "How to get started": the plan builder link (lives here because the homepage loads this file). */
.gradient-home .home-paths-plan{margin:24px 0 0;font-size:18px;color:var(--gradient-muted)}
.gradient-home .home-paths-plan a{color:var(--gradient-accent);font-weight:500;text-underline-offset:3px}
.he-calc .mcc{margin-top:28px}
/* The homepage sets large paragraph type; keep the calculator's small print small. */
.gradient-home .home-story .mcc p.mcc-hint,.gradient-home .mcc p.mcc-hint{font-size:13.5px;line-height:1.5;max-width:none}
.gradient-home .home-story .mcc p.mcc-disclaim,.gradient-home .mcc p.mcc-disclaim,.gradient-home .home-story .mcc p.mcc-cta-note,.gradient-home .mcc p.mcc-cta-note{font-size:13px;line-height:1.5;max-width:none}
.gradient-home .home-story .mcc .mcc-how p,.gradient-home .mcc .mcc-how p{font-size:14px;line-height:1.55;max-width:none}
.gradient-home .home-story .mcc p.mcc-skip,.gradient-home .mcc p.mcc-skip{font-size:15px;max-width:none}
/* "How we calculate this" (27 Oct 2026): method and sources under the estimate. */
.mcc-method{max-width:860px}
.mcc-method h3{font-size:17px;margin:22px 0 8px}
.mcc-method ol,.mcc-method ul{margin:0 0 14px;padding-left:1.25em;line-height:1.6;color:var(--gradient-muted)}
.mcc-method li{margin:0 0 8px}
.mcc-method p{color:var(--gradient-muted);line-height:1.55;margin:0 0 12px}
.mcc-hint a{overflow-wrap:anywhere}
.mcc-found[hidden]{display:none}