/* Microsoft 365 license cost calculator (/microsoft-365-license-cost-calculator).
 * Same white tool card on the dark hero band as the email checkers. */
body.ap.dns-preview { --ap-ink-2: #303d50; }
body.ap.dns-preview main .hero:not(.rh) { padding-top: 38px; padding-bottom: 48px; }
body.ap.dns-preview main .hero:not(.rh) h1 { max-width: 900px; margin: 14px auto 20px; font-size: clamp(2rem, 4.2vw, 3.65rem); line-height: 1.12; letter-spacing: -.035em; }
body.ap.dns-preview main .hero:not(.rh) .hero-copy > .lead { color: #f0f4fa; max-width: 680px; margin: 0 auto; line-height: 1.55; }
body.ap.dns-preview .prose p, body.ap.dns-preview .prose li, body.ap.dns-preview .cta-band p { color: #263449; line-height: 1.65; }

body.ap.mcc-page .mcc-tool { max-width: 1040px; margin: 28px auto 0; padding: 28px; text-align: left; color: #142238; background: #fff; border: 1px solid #cbd5e3; border-top: 4px solid #d4a84f; border-radius: 12px; box-shadow: 0 16px 40px #0004; }
body.ap.mcc-page main .hero:not(.rh) .hero-copy .mcc-tool p { color: #263449; opacity: 1; margin: 0; }
body.ap.mcc-page .mcc-tool fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
body.ap.mcc-page .mcc-tool legend { padding: 0; font-size: 1.15rem; font-weight: 700; color: #142238; }
body.ap.mcc-page .mcc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
body.ap.mcc-page main .hero:not(.rh) .hero-copy .mcc-tool .mcc-hint { margin: 6px 0 14px; font-size: .95rem; color: #3a4a62; }

/* One row per plan: name and price on the left, the people stepper on the right. */
body.ap.mcc-page .mcc-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid #e1e7f0; }
body.ap.mcc-page .mcc-plan { min-width: 0; }
body.ap.mcc-page .mcc-name { display: block; font-size: 1.08rem; font-weight: 700; color: #142238; }
body.ap.mcc-page main .hero:not(.rh) .hero-copy .mcc-tool .mcc-short { font-size: .95rem; color: #3a4a62; line-height: 1.45; }
body.ap.mcc-page main .hero:not(.rh) .hero-copy .mcc-tool .mcc-price { margin-top: 2px; font-size: .95rem; color: #3a4a62; }
body.ap.mcc-page .mcc-price strong { color: #142238; }
body.ap.mcc-page .mcc-stepper { flex: none; display: flex; align-items: center; border: 1px solid #718199; border-radius: 8px; overflow: hidden; background: #f5f8fc; }
body.ap.mcc-page .mcc-step { width: 48px; height: 48px; border: 0; background: transparent; color: #124f9e; font-family: inherit; font-size: 1.5rem; font-weight: 700; line-height: 1; cursor: pointer; }
body.ap.mcc-page .mcc-step:hover { background: #e4ecf7; }
body.ap.mcc-page .mcc-stepper input { width: 64px; height: 48px; border: 0; border-left: 1px solid #c3cddb; border-right: 1px solid #c3cddb; border-radius: 0; box-shadow: none; background: #fff; color: #142238; font-family: inherit; font-size: 1.15rem; font-weight: 650; text-align: center; padding: 0; -moz-appearance: textfield; appearance: textfield; }
body.ap.mcc-page .mcc-stepper input::-webkit-outer-spin-button, body.ap.mcc-page .mcc-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body.ap.mcc-page .mcc-tool :focus-visible { outline: 3px solid #175ed2; outline-offset: 2px; }
body.ap.mcc-page .mcc-stepper :focus-visible { outline-offset: -3px; }

/* Right column: how you pay, then the totals. */
body.ap.mcc-page .mcc-side { display: flex; flex-direction: column; gap: 16px; }
body.ap.mcc-page .mcc-billing { display: flex; flex-direction: column; gap: 4px; }
body.ap.mcc-page .mcc-billing legend { margin-bottom: 6px; font-size: 1rem; }
body.ap.mcc-page .mcc-billing label { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 1rem; color: #142238; cursor: pointer; }
body.ap.mcc-page .mcc-billing input { width: 20px; height: 20px; accent-color: #124f9e; flex: none; }
body.ap.mcc-page .mcc-sum { padding: 20px 22px; border-radius: 12px; background: #0b1324; color: #fff; }
body.ap.mcc-page main .hero:not(.rh) .hero-copy .mcc-tool .mcc-sum p { color: #d3dceb; }
body.ap.mcc-page main .hero:not(.rh) .hero-copy .mcc-tool .mcc-sum-label { font-size: .85rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #e2bb68; }
body.ap.mcc-page .mcc-sum-row { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
body.ap.mcc-page .mcc-sum-row strong { font-size: clamp(2rem, 4vw, 2.6rem); line-height: 1.1; color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
body.ap.mcc-page .mcc-sum-year strong { font-size: 1.5rem; }
body.ap.mcc-page main .hero:not(.rh) .hero-copy .mcc-tool .mcc-person { margin-top: 10px; font-size: .95rem; }
body.ap.mcc-page main .hero:not(.rh) .hero-copy .mcc-tool .mcc-fine { font-size: .88rem; color: #3a4a62; }
body.ap.mcc-page .mcc-tool a:not(.btn) { color: #124f9e; font-weight: 600; }

/* Results under the inputs. Hidden until the script runs, so no-JS visitors
 * see the inputs, the example total and the note, not an empty table. */
body.ap.mcc-page .mcc-results { display: none; margin-top: 24px; padding-top: 22px; border-top: 1px solid #e1e7f0; }
body.ap.mcc-page .mcc-tool.mcc-ready .mcc-results { display: block; }
body.ap.mcc-page .mcc-breakdown table { width: 100%; border-collapse: collapse; font-size: .98rem; }
body.ap.mcc-page .mcc-breakdown caption { text-align: left; font-weight: 700; font-size: 1.05rem; color: #142238; padding-bottom: 8px; }
body.ap.mcc-page .mcc-breakdown th, body.ap.mcc-page .mcc-breakdown td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #e1e7f0; color: #142238; }
body.ap.mcc-page .mcc-breakdown thead th { background: #eaf0f8; font-weight: 650; }
body.ap.mcc-page .mcc-breakdown td { font-variant-numeric: tabular-nums; }
body.ap.mcc-page .mcc-breakdown tbody th { font-weight: 600; }
body.ap.mcc-page .mcc-notes { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
body.ap.mcc-page .mcc-note { padding: 14px 16px; border: 1px solid #d8e1ee; border-left: 4px solid #145bb9; border-radius: 8px; background: #f7f9fc; color: #263449; font-size: .98rem; line-height: 1.55; }
body.ap.mcc-page .mcc-note.mcc-warn { border-left-color: #b07a12; background: #fff7e8; }
body.ap.mcc-page .mcc-cta { margin-top: 18px; min-height: 52px; display: inline-flex; align-items: center; background: #124f9e; color: #fff; border-radius: 8px; font-weight: 650; }
body.ap.mcc-page .mcc-cta:hover { background: #0d3d7d; color: #fff; }
body.ap.mcc-page main .hero:not(.rh) .hero-copy .mcc-tool #mcc-note { margin-top: 18px; font-size: .95rem; color: #3a4a62; }

/* Static price tables in the body. */
body.ap.mcc-page .mcc-prose { max-width: 960px; }
body.ap.mcc-page .mcc-table-wrap { overflow-x: auto; border: 1px solid #cbd5e3; border-radius: 8px; margin: 18px 0 0; }
body.ap.mcc-page .mcc-table { width: 100%; border-collapse: collapse; background: #fff; font-size: .98rem; margin: 0; }
body.ap.mcc-page .mcc-table th, body.ap.mcc-page .mcc-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid #e1e7f0; color: #142238; }
body.ap.mcc-page .mcc-table thead th { background: #eaf0f8; font-weight: 650; white-space: nowrap; }
body.ap.mcc-page .mcc-table tbody th { font-weight: 650; white-space: nowrap; }
body.ap.mcc-page .mcc-table td { font-variant-numeric: tabular-nums; }
body.ap.mcc-page .mcc-sizes td span { color: #4a5a72; font-size: .9rem; }
body.ap.mcc-page #prices, body.ap.mcc-page #cost-by-size, body.ap.mcc-page #premium-check, body.ap.mcc-page #price-source { scroll-margin-top: 110px; }

@media (max-width: 860px) {
  body.ap.mcc-page .mcc-grid { grid-template-columns: 1fr; }
  /* On phones the totals ride along the bottom, above the call and quote bar,
   * while the plan rows scroll. display: contents lifts the total out of the
   * side column so its sticky box is the whole calculator grid. */
  body.ap.mcc-page .mcc-side { display: contents; }
  body.ap.mcc-page .mcc-sum { position: sticky; bottom: calc(var(--bar-h, 0px) + env(safe-area-inset-bottom, 0px) + 8px); z-index: 2; padding: 14px 18px; box-shadow: 0 8px 24px #0006; }
  body.ap.mcc-page .mcc-grid { gap: 20px; }
}
@media (max-width: 600px) {
  body.ap.mcc-page .mcc-tool { padding: 20px 16px; }
  body.ap.mcc-page .mcc-row { flex-wrap: wrap; }
  body.ap.mcc-page .mcc-step { width: 44px; height: 44px; }
  body.ap.mcc-page .mcc-stepper input { width: 56px; height: 44px; }
  body.ap.mcc-page .mcc-cta { width: 100%; justify-content: center; }
  body.ap.mcc-page .mcc-sum-row strong { font-size: 1.7rem; }
  body.ap.mcc-page .mcc-sum-year strong { font-size: 1.2rem; }
  body.ap.mcc-page .mcc-sum-row { margin-top: 2px; }
  body.ap.mcc-page main .hero:not(.rh) .hero-copy .mcc-tool .mcc-person { margin-top: 4px; font-size: .88rem; }
  /* Static tables restack into one block per plan, labels from data-label. */
  body.ap.mcc-page .mcc-table-wrap { overflow: visible; }
  body.ap.mcc-page .mcc-table thead { display: none; }
  body.ap.mcc-page .mcc-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; padding: 14px; border-bottom: 1px solid #e1e7f0; }
  body.ap.mcc-page .mcc-table th, body.ap.mcc-page .mcc-table td { padding: 0; border: 0; white-space: normal; }
  body.ap.mcc-page .mcc-table tbody th { grid-column: 1 / -1; font-size: 1.05rem; }
  body.ap.mcc-page .mcc-table td::before { content: attr(data-label); display: block; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #4a5a72; }
  body.ap.mcc-page .mcc-table td[data-label="Includes"] { grid-column: 1 / -1; }
  body.ap.mcc-page .mcc-breakdown thead { display: none; }
  body.ap.mcc-page .mcc-breakdown tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid #e1e7f0; }
  body.ap.mcc-page .mcc-breakdown th, body.ap.mcc-page .mcc-breakdown td { border: 0; padding: 0; }
  body.ap.mcc-page .mcc-breakdown td:nth-child(2)::before { content: "People: "; }
  body.ap.mcc-page .mcc-breakdown td:nth-child(3)::before { content: "Each: "; }
  body.ap.mcc-page .mcc-breakdown td:nth-child(4) { grid-column: 2; grid-row: 1; font-weight: 700; }
  body.ap.mcc-page .mcc-breakdown td:nth-child(4)::after { content: " a month"; font-weight: 400; }
}