/* ==========================================================================
   Awditify Municipal — pricing and plan builder (/municipal/pricing).
   Extends the mg-* system in municipal.css rather than restating it, so this
   page inherits the same navy palette, type scale, buttons and reveal motion
   as the rest of the municipal section.

   Locked decisions for this page:
     Accent      one — anchor navy #003366 / #0055A4. Emerald appears only as
                 the "included / confirmed" affordance, the same role it plays
                 on /pricing and /municipal. No third accent anywhere.
     Radius      cards 16px · controls 12px · pills 9999px. Same rule as
                 municipal.css; nothing on this page deviates.
     Motion      scroll reveal, hover lift, and a 220ms price tween. Nothing
                 loops. Everything is disabled under prefers-reduced-motion.
   ========================================================================== */

/* ---------- Shared shell ---------- */
.mp-sec { padding: 4.5rem 0; }
@media (min-width: 1024px) { .mp-sec { padding: 6rem 0; } }
.mp-sec--tight { padding: 3.5rem 0; }

.mp-lede { color: #46586c; line-height: 1.7; font-size: 1.0625rem; max-width: 62ch; }
.mp-eyebrow-note { font-size: .8rem; color: #7c8b9b; }

/* ---------- Hero ---------- */
.mp-hero {
  background: #F6F9FD;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #E4EAF3;
}
.mp-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(#C9D8EC 1px, transparent 1px);
  background-size: 30px 30px; opacity: .5; pointer-events: none;
}
.mp-hero > * { position: relative; z-index: 1; }

/* The live figure that sits opposite the hero copy. Not decoration: it is the
   first rung of the plan builder, seeded at the entry tier. */
.mp-quote {
  background: #fff; border: 1px solid #E4EAF3; border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.02), 0 18px 40px -18px rgba(0,51,102,.28);
  overflow: hidden;
}
.mp-quote__head {
  padding: 1.15rem 1.5rem; border-bottom: 1px solid #EDF2F8; background: #FBFDFF;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.mp-quote__body { padding: 1.5rem; }
.mp-quote__fig {
  font-weight: 800; letter-spacing: -.035em; color: #0a1628;
  font-size: clamp(2.75rem, 6vw, 3.5rem); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.mp-quote__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .55rem 0; font-size: .875rem; border-top: 1px dashed #E4EAF3;
}
.mp-quote__row:first-of-type { border-top: 0; }
.mp-quote__row dt { color: #5a6b7e; }
.mp-quote__row dd { color: #0a1628; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Segmented control (billing route) ---------- */
.mp-seg {
  display: inline-flex; padding: 4px; background: #EDF3FA;
  border: 1px solid #DCE6F2; border-radius: 9999px;
}
.mp-seg button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: .5rem 1.1rem; border-radius: 9999px;
  font-size: .8125rem; font-weight: 700; color: #46586c;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.mp-seg button:hover { color: #003366; }
.mp-seg button[aria-pressed="true"] {
  background: #fff; color: #003366; box-shadow: 0 1px 2px rgba(10,22,40,.12);
}
.mp-seg button:focus-visible { outline: 2px solid #0055A4; outline-offset: 2px; }

/* ---------- Tier cards ---------- */
.mp-tier {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid #E4EAF3; border-radius: 16px; padding: 1.75rem;
  transition: transform .3s cubic-bezier(.25,.8,.25,1), box-shadow .3s ease, border-color .3s ease;
}
.mp-tier:hover { transform: translateY(-5px); box-shadow: 0 22px 50px rgba(10,22,40,.10); border-color: #B8D9F2; }
.mp-tier--featured {
  border-color: #003366; box-shadow: 0 0 0 1px #003366, 0 20px 44px -20px rgba(0,51,102,.4);
}
.mp-tier__flag {
  position: absolute; top: -.75rem; left: 50%; transform: translateX(-50%);
  background: #003366; color: #fff; font-size: .68rem; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  padding: .3rem .85rem; border-radius: 9999px; white-space: nowrap;
}
.mp-tier__price {
  font-weight: 800; font-size: 2.75rem; line-height: 1; letter-spacing: -.035em;
  color: #0a1628; font-variant-numeric: tabular-nums;
}
.mp-tier__was { font-size: .8125rem; color: #8397ab; text-decoration: line-through; }
.mp-tier__meta {
  display: flex; flex-wrap: wrap; gap: .4rem;
}
.mp-tier__chip {
  font-size: .7rem; font-weight: 600; color: #003366;
  background: #E8F4FD; border: 1px solid #CFE4F6; border-radius: 9999px; padding: .2rem .6rem;
}
.mp-tier__list { display: grid; gap: .55rem; }
.mp-tier__list li { display: flex; gap: .55rem; font-size: .875rem; color: #46586c; line-height: 1.5; }
.mp-tier__list svg { width: .95rem; height: .95rem; flex: none; margin-top: .22rem; color: #059669; }

/* ---------- Plan builder ---------- */
.mp-builder { background: #fff; border: 1px solid #E4EAF3; border-radius: 16px; overflow: hidden; }
.mp-builder__head { padding: 1.5rem; border-bottom: 1px solid #EDF2F8; background: #FBFDFF; }
.mp-builder__grid { display: grid; }
@media (min-width: 1024px) { .mp-builder__grid { grid-template-columns: 1fr 22.5rem; } }
.mp-builder__panel { padding: 1.5rem; }
@media (min-width: 1024px) { .mp-builder__panel { padding: 2rem; } }
.mp-builder__side {
  background: #F6F9FD; border-top: 1px solid #E4EAF3; padding: 1.5rem;
}
@media (min-width: 1024px) {
  .mp-builder__side { border-top: 0; border-left: 1px solid #E4EAF3; padding: 2rem; }
  .mp-builder__sticky { position: sticky; top: 6rem; }
}

.mp-group + .mp-group { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #EDF2F8; }
.mp-group__title {
  font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: #003366;
}

/* One selectable line item. The whole label is the hit target. */
.mp-opt {
  position: relative;
  display: grid; grid-template-columns: 1.15rem 1fr auto; gap: .8rem; align-items: start;
  padding: .85rem .95rem; border: 1px solid #E4EAF3; border-radius: 12px; background: #fff;
  cursor: pointer; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.mp-opt:hover { border-color: #B8D9F2; background: #FBFDFF; }
.mp-opt:has(input:checked) { border-color: #0055A4; background: #F4F9FE; box-shadow: inset 0 0 0 1px #CFE4F6; }
.mp-opt:has(input:focus-visible) { outline: 2px solid #0055A4; outline-offset: 2px; }
.mp-opt input { position: absolute; opacity: 0; width: 0; height: 0; }

.mp-box {
  width: 1.15rem; height: 1.15rem; border-radius: 6px; border: 1.5px solid #C5D4E8;
  background: #fff; display: grid; place-items: center; margin-top: .1rem;
  transition: background .18s ease, border-color .18s ease;
}
.mp-box svg { width: .75rem; height: .75rem; color: #fff; opacity: 0; transition: opacity .18s ease; }
.mp-opt input:checked ~ .mp-box { background: #003366; border-color: #003366; }
.mp-opt input:checked ~ .mp-box svg { opacity: 1; }

.mp-opt__name { font-weight: 600; font-size: .9375rem; color: #0a1628; line-height: 1.35; }
.mp-opt__sub { font-size: .8rem; color: #6b7f95; line-height: 1.5; margin-top: .15rem; }
.mp-opt__price {
  font-size: .875rem; font-weight: 700; color: #0a1628; white-space: nowrap;
  font-variant-numeric: tabular-nums; text-align: right;
}
.mp-opt__price small { display: block; font-size: .68rem; font-weight: 600; color: #059669; text-transform: uppercase; letter-spacing: .05em; }

/* ---------- Builder summary ---------- */
.mp-sum__fig {
  font-weight: 800; letter-spacing: -.035em; color: #0a1628;
  font-size: clamp(2.5rem, 5vw, 3.25rem); line-height: 1; font-variant-numeric: tabular-nums;
}
.mp-sum__lines { display: grid; gap: 0; margin: 1.25rem 0; }
.mp-sum__line {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  font-size: .8125rem; padding: .5rem 0; border-bottom: 1px dashed #DCE6F2;
}
.mp-sum__line span:first-child { color: #5a6b7e; }
.mp-sum__line span:last-child { color: #0a1628; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mp-sum__line--total { border-bottom: 0; border-top: 1.5px solid #C5D4E8; margin-top: .25rem; padding-top: .75rem; font-size: .9375rem; }

/* The verdict panel: which route the builder recommends and why. */
.mp-verdict { border-radius: 12px; padding: .95rem 1.05rem; font-size: .8125rem; line-height: 1.6; }
.mp-verdict--tier { background: #ECF7F1; border: 1px solid #CDECD8; color: #14532d; }
.mp-verdict--alacarte { background: #E8F4FD; border: 1px solid #B8D9F2; color: #003366; }
.mp-verdict strong { font-weight: 700; }

.mp-alt {
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
  font-size: .78rem; color: #6b7f95; padding-top: .7rem; margin-top: .7rem; border-top: 1px dashed #DCE6F2;
}
.mp-alt b { color: #46586c; font-variant-numeric: tabular-nums; }

/* ---------- Department + add-on cards ---------- */
.mp-card {
  background: #fff; border: 1px solid #E4EAF3; border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column; height: 100%;
  transition: transform .3s cubic-bezier(.25,.8,.25,1), box-shadow .3s ease, border-color .3s ease;
}
.mp-card:hover { transform: translateY(-5px); box-shadow: 0 22px 50px rgba(10,22,40,.10); border-color: #B8D9F2; }
.mp-card__tint { height: 4px; display: block; }
.mp-card__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.mp-card__icon {
  width: 2.5rem; height: 2.5rem; border-radius: 12px; display: grid; place-items: center; flex: none;
}
.mp-card__icon svg { width: 1.25rem; height: 1.25rem; }
.mp-card__price {
  font-size: 1.375rem; font-weight: 800; color: #0a1628; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.mp-card__price span { font-size: .8125rem; font-weight: 600; color: #7c8b9b; letter-spacing: 0; }
.mp-card__from {
  font-size: .72rem; font-weight: 700; color: #047857; background: #ECF7F1;
  border: 1px solid #CDECD8; border-radius: 9999px; padding: .2rem .6rem; white-space: nowrap;
}
.mp-card__points { display: grid; gap: .5rem; margin-top: 1rem; }
.mp-card__points li { display: flex; gap: .55rem; font-size: .8125rem; color: #5a6b7e; line-height: 1.55; }
.mp-card__points li::before {
  content: ""; width: 4px; height: 4px; border-radius: 9999px; background: #B8D9F2;
  flex: none; margin-top: .5rem;
}

/* ---------- Tables ---------- */
.mp-tablewrap {
  overflow-x: auto; border: 1px solid #E4EAF3; border-radius: 16px; background: #fff;
  -webkit-overflow-scrolling: touch;
}
.mp-table { width: 100%; border-collapse: collapse; font-size: .875rem; min-width: 46rem; }
.mp-table th, .mp-table td { padding: .85rem 1rem; text-align: left; vertical-align: top; }
.mp-table thead th {
  background: #F6F9FD; border-bottom: 1px solid #E4EAF3;
  font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #003366;
  position: sticky; top: 0; z-index: 2;
}
.mp-table tbody tr + tr td { border-top: 1px solid #EDF2F8; }
.mp-table tbody tr:hover td { background: #FBFDFF; }
.mp-table td.mp-num, .mp-table th.mp-num { text-align: right; font-variant-numeric: tabular-nums; }
.mp-table .mp-rowlab { font-weight: 600; color: #0a1628; }
.mp-table .mp-rownote { display: block; font-size: .75rem; font-weight: 400; color: #8397ab; margin-top: .15rem; }
.mp-table col.mp-col--featured, .mp-table .mp-cell--featured { background: #F4F9FE; }
.mp-table tbody tr:hover td.mp-cell--featured { background: #EDF5FD; }

.mp-tag {
  display: inline-block; font-size: .7rem; font-weight: 700; border-radius: 9999px;
  padding: .18rem .55rem; white-space: nowrap;
}
.mp-tag--alacarte { background: #E8F4FD; color: #003366; border: 1px solid #CFE4F6; }
.mp-tag--tier { background: #ECF7F1; color: #14532d; border: 1px solid #CDECD8; }
.mp-tag--close { background: #FEF6E7; color: #8a5a08; border: 1px solid #F5E2BC; }
.mp-tag--same { background: #F1F4F8; color: #46586c; border: 1px solid #E0E7F0; }

/* ---------- Module disclosure ---------- */
.mp-disc { border: 1px solid #E4EAF3; border-radius: 16px; background: #fff; overflow: hidden; }
.mp-disc + .mp-disc { margin-top: .75rem; }
.mp-disc > summary {
  cursor: pointer; list-style: none; padding: 1.15rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-weight: 700; color: #0a1628;
}
.mp-disc > summary::-webkit-details-marker { display: none; }
.mp-disc > summary:hover { background: #FBFDFF; }
.mp-disc > summary:focus-visible { outline: 2px solid #0055A4; outline-offset: -2px; }
.mp-disc__ic { transition: transform .25s ease; color: #6b7f95; flex: none; }
.mp-disc[open] > summary { border-bottom: 1px solid #EDF2F8; }
.mp-disc[open] .mp-disc__ic { transform: rotate(45deg); }
.mp-disc__body { padding: 1.25rem 1.5rem 1.5rem; }

/* ---------- Spend controls ----------
   Payment Approvals gets a lead panel rather than a row in a disclosure. It is
   an included platform feature, so this component carries NO price affordance:
   no figure, no "add" button, and an explicit no-extra-fee tag instead. */
.mp-control {
  border: 1px solid #E4EAF3; border-radius: 16px; background: #fff; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.02), 0 18px 40px -22px rgba(0,51,102,.22);
}
.mp-control__grid { display: grid; }
@media (min-width: 1024px) { .mp-control__grid { grid-template-columns: 1.4fr .85fr; } }
.mp-control__grid > div { padding: 1.75rem; }
@media (min-width: 1024px) { .mp-control__grid > div { padding: 2.25rem; } }

.mp-control__badge {
  font-size: .72rem; font-weight: 700; color: #003366;
  background: #E8F4FD; border: 1px solid #B8D9F2; border-radius: 9999px; padding: .22rem .7rem;
}
.mp-control__free {
  font-size: .72rem; font-weight: 700; color: #047857;
  background: #ECF7F1; border: 1px solid #CDECD8; border-radius: 9999px; padding: .22rem .7rem;
}

.mp-control__points { display: grid; gap: .7rem; }
.mp-control__points li { display: flex; gap: .65rem; font-size: .875rem; color: #46586c; line-height: 1.6; }
.mp-control__points svg { width: 1rem; height: 1rem; flex: none; margin-top: .28rem; color: #059669; }

.mp-control__pull {
  background: linear-gradient(160deg, #0a1628 0%, #003366 100%);
  padding: 1.75rem; display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
}
@media (min-width: 1024px) { .mp-control__pull { padding: 2.25rem; } }
.mp-control__pull::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 30px 30px; pointer-events: none;
}
.mp-control__pull > * { position: relative; z-index: 1; }
.mp-control__mark { width: 2rem; height: 2rem; color: #8CC6F5; margin-bottom: 1rem; }
.mp-control__quote {
  font-weight: 800; font-size: 1.375rem; line-height: 1.25; letter-spacing: -.02em;
  color: #fff; margin-bottom: .85rem;
}
.mp-control__note { font-size: .8125rem; color: #B7CFE6; line-height: 1.6; }

/* ---------- Firm-billed band ---------- */
.mp-firm {
  background: linear-gradient(160deg, #0a1628 0%, #003366 100%);
  position: relative; overflow: hidden;
}
.mp-firm::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 32px 32px; pointer-events: none;
}
.mp-firm > * { position: relative; z-index: 1; }
.mp-firm__card {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px; padding: 1.25rem;
}
.mp-firm__now { font-size: 1.75rem; font-weight: 800; color: #fff; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mp-firm__was { font-size: .875rem; color: #90aecb; text-decoration: line-through; }

/* ---------- Motion ---------- */
.mp-tween { transition: opacity .18s ease; }
.mp-tween.is-updating { opacity: .45; }

@media (prefers-reduced-motion: reduce) {
  .mp-tier, .mp-card, .mp-opt, .mp-tween, .mp-disc__ic, .mp-seg button { transition: none !important; }
  .mp-tier:hover, .mp-card:hover { transform: none; }
}

/* ---------- Print: give a clerk a clean quote to take to council ---------- */
@media print {
  .mp-hero::before, .mp-firm::before { display: none; }
  .mp-builder__side { break-inside: avoid; }
  .mp-tablewrap { overflow: visible; border: 0; }
  .mp-table { min-width: 0; font-size: .75rem; }
}