/* Course voice cost calculator. Phone first; the article frame is 700 px wide on a computer, so two
   columns start at 600 px — a 900 px breakpoint would never be reached inside the article. */

.more-toggle::after { content: ' ▾'; text-decoration: none; display: inline-block; margin-left: 2px; }
.more-toggle[aria-expanded='true']::after { content: ' ▴'; }
.more { margin-top: 14px; padding: 14px 14px 0; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }

.recommendation { margin-top: 24px; padding: 16px; border-radius: var(--radius); background: var(--accent-soft); }
.rec-label { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }
.rec-name { margin: 4px 0 8px; font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.rec-reason { margin: 0 0 14px; }
.rec-text { margin: 0; font-weight: 600; }

.summary { margin: 16px 0 0; }

.cards { display: grid; gap: 16px; margin-top: 24px; }
.card { display: flex; flex-direction: column; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.card-best { padding: 15px; border: 2px solid var(--accent); }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.card h3 { margin: 0; font-size: 1.125rem; }
.tag { flex: none; padding: 3px 9px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.card h4 { margin: 16px 0 4px; font-size: 0.8125rem; font-weight: 600; color: var(--muted); }

.rows { margin: 0; }
.row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; column-gap: 12px; padding: 3px 0; }
.row dt { color: var(--muted); font-size: 0.9375rem; }
.row dd { margin: 0 0 0 auto; font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.row-total dd { font-size: 1.375rem; font-weight: 700; }

.line { margin: 10px 0 0; font-size: 0.9375rem; }
.card-link { margin-top: 14px; font-weight: 600; }

.note { margin: 12px 0 0; font-size: 0.875rem; color: var(--muted); }

.reminder { margin-top: 24px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.reminder p { margin: 0 0 8px; }
.small-link { font-size: 0.875rem; }

.sources { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.sources-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sources h2 { margin: 0; font-size: 1.125rem; }
.sources-list { margin: 12px 0 0; padding-left: 18px; font-size: 0.8125rem; color: var(--muted); }
.sources-list li { margin: 0 0 8px; }
.sources-list a { overflow-wrap: anywhere; }

@media (min-width: 600px) {
  h1 { font-size: 1.75rem; }
  .cards { grid-template-columns: 1fr 1fr; }
}