/* Shared styling for the calculators (automation ROI, VoIP savings) and the
   Cyber Essentials quiz. Builds on php-check.css for the hero. */
.calc { max-width: 640px; margin-top: 10px; }
.calc-field { margin: 0 0 22px; }
.calc-field > label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.calc-help { font-weight: 400; color: var(--body-copy); font-size: 13px; display: block; margin-top: 3px; }
.calc-input-row { display: flex; align-items: center; gap: 14px; }
.calc-input-row input[type="number"] { width: 150px; font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--hairline); border-radius: 6px; background: #fff; color: var(--ink); }
.calc-input-row input[type="number"]:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px rgba(248,124,24,0.18); }
.calc-input-row input[type="range"] { flex: 1; accent-color: var(--orange); }
.calc-range-val { font-weight: 600; min-width: 52px; text-align: right; color: var(--ink); }
.calc-prefix { color: var(--body-copy); font-size: 15px; }

.calc-result { margin-top: 10px; background: var(--hero); color: #fff; border-radius: 12px; padding: 28px 30px; max-width: 640px; }
.calc-result h2 { color: #fff; font-size: 15px; margin: 0 0 18px; font-weight: 600; letter-spacing: 0.01em; }
.calc-tiles { display: flex; flex-wrap: wrap; gap: 30px 44px; }
.calc-num { font-size: clamp(30px, 5vw, 42px); font-weight: 700; letter-spacing: -0.02em; color: var(--orange); line-height: 1; }
.calc-lbl { font-size: 13px; color: var(--on-dark-copy); margin-top: 8px; max-width: 22ch; }
.calc-line { font-size: 15px; line-height: 1.7; color: #fff; margin: 20px 0 0; }
.calc-note { font-size: 12px; color: var(--on-dark-copy); margin: 16px 0 0; line-height: 1.6; }
.calc-result .btn { margin-top: 22px; background: var(--orange); border-color: var(--orange); color: var(--hero); font-weight: 600; }
.calc-result .btn:hover { background: var(--orange-hover); border-color: var(--orange-hover); }

/* Cyber Essentials quiz */
.quiz { max-width: 680px; margin-top: 8px; }
.quiz-q { padding: 18px 0; border-bottom: 1px solid var(--hairline); }
.quiz-q > p { font-weight: 600; margin: 0 0 12px; font-size: 15px; }
.quiz-opts { display: flex; gap: 10px; flex-wrap: wrap; }
.quiz-opt { position: relative; }
.quiz-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.quiz-opt span { display: inline-block; font-size: 14px; font-weight: 600; color: var(--ink); background: #fff; border: 1px solid var(--hairline); border-radius: 100px; padding: 8px 18px; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.quiz-opt input:checked + span { background: var(--hero); border-color: var(--hero); color: #fff; }
.quiz-opt input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }
.quiz-submit { margin-top: 24px; }
.quiz-controls { margin-top: 24px; display: grid; gap: 10px; }
.quiz-control { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.quiz-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.quiz-dot.good { background: #2C6E3B; }
.quiz-dot.warn { background: #C77A1E; }
.quiz-dot.bad { background: #B3263E; }
.quiz-gaps { margin: 18px 0 0; padding-left: 20px; }
.quiz-gaps li { font-size: 14px; line-height: 1.7; color: #fff; margin-bottom: 8px; }

@media (max-width: 560px) {
  .calc-input-row input[type="number"] { width: 120px; }
  .calc-tiles { gap: 24px; }
}