.qbm-veil { position: fixed; inset: 0; background: rgba(12,22,36,.55);
  display: none; align-items: flex-start; justify-content: center;
  z-index: 9000; padding: 24px 14px; overflow-y: auto;
  -webkit-overflow-scrolling: touch; }
.qbm-veil.open { display: flex; }

.qbm { background: #fff; border-radius: 16px; width: 100%; max-width: 660px;
  box-shadow: 0 24px 70px rgba(12,22,36,.34); overflow: hidden;
  font-family: 'Plus Jakarta Sans', sans-serif; margin: auto; }

.qbm-head { padding: 20px 24px 16px; border-bottom: 1px solid #e6ebf2;
  display: flex; gap: 14px; align-items: flex-start; }
.qbm-head h2 { margin: 0 0 3px; font-size: 19px; font-weight: 800; color: #0f2540; }
.qbm-head p { margin: 0; font-size: 13px; color: #5b6b80; line-height: 1.5; }
.qbm-x { margin-left: auto; background: none; border: 0; font-size: 22px;
  line-height: 1; color: #8a9ab5; cursor: pointer; padding: 0 2px; }
.qbm-x:hover { color: #0f2540; }

.qbm-body { padding: 4px 24px 20px; }

.qbm-sec { padding: 18px 0 4px; border-top: 1px solid #eef1f6; }
.qbm-sec:first-child { border-top: 0; }
.qbm-sec > h3 { margin: 0 0 2px; font-size: 11px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; color: #8a9ab5; }
.qbm-sec > .qbm-why { margin: 0 0 12px; font-size: 12.5px; color: #5b6b80;
  line-height: 1.5; }

.qbm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }

/*
 * `hidden` loses to any author `display`, because the attribute is only a
 * UA rule. .qbm-grid sets display:grid, so #qbm-owner-fields rendered with
 * hidden set and the owner's name fields showed even on "I own it" -- the
 * default, and the answer almost everyone gives. Nothing in the markup or
 * the handler was wrong; both said hidden, and the stylesheet outvoted them.
 *
 * Written for every element inside the modal rather than for that one id,
 * because the next element given a display will have the same problem and
 * it fails silently: a hidden section that is simply there.
 */
.qbm-veil [hidden] { display: none !important; }
.qbm-grid .wide { grid-column: 1 / -1; }
@media (max-width: 560px) { .qbm-grid { grid-template-columns: 1fr; } }

.qbm-f > label { display: block; font-size: 11px; font-weight: 700;
  color: #5b6b80; margin-bottom: 4px; }
.qbm-f input, .qbm-f select { width: 100%; box-sizing: border-box;
  padding: 9px 10px; border: 1.5px solid #d8e2f0; border-radius: 9px;
  font-family: inherit; font-size: 13.5px; color: #0f2540; background: #fff; }
.qbm-f input:focus, .qbm-f select:focus { outline: none; border-color: #2f6fed; }
.qbm-f input.bad, .qbm-f select.bad { border-color: #b91c1c; background: #fef4f4; }

/* The contract, restated. Read-only on purpose: it is what they chose on the
   page behind this, and an editable copy would be a second place to change
   it that the calculator would then disagree with. */
.qbm-chosen { background: #f2fbf5; border: 1px solid #bfe6cd; border-radius: 12px;
  padding: 13px 15px; }
.qbm-chosen .qbm-row { display: flex; justify-content: space-between; gap: 12px;
  font-size: 13px; padding: 3px 0; }
.qbm-chosen .k { color: #3f5a49; }
.qbm-chosen .v { font-weight: 800; color: #14532d; text-align: right; }

.qbm-choice { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.qbm-choice label { display: inline-flex; gap: 7px; align-items: center;
  font-size: 13.5px; color: #0f2540; cursor: pointer; }

.qbm-ben { border: 1px solid #e6ebf2; border-radius: 11px; padding: 11px 12px;
  margin-bottom: 9px; }
.qbm-ben .qbm-bh { display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px; }
.qbm-ben .qbm-bh .n { font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: #8a9ab5; }
.qbm-ben .qbm-bh .sp { flex: 1 1 auto; }

button.qbm-mini { background: #fff; border: 1px solid #d8e2f0; border-radius: 999px;
  padding: 4px 11px; font-family: inherit; font-size: 11.5px; font-weight: 700;
  color: #2f6fed; cursor: pointer; }
button.qbm-mini:hover { border-color: #2f6fed; }
button.qbm-mini.danger { color: #b91c1c; }

.qbm-total { font-size: 12.5px; color: #5b6b80; margin: 2px 0 0;
  font-variant-numeric: tabular-nums; }
.qbm-total b { color: #0f2540; }
.qbm-total.over b, .qbm-total.under b { color: #b45309; }

.qbm-err { margin: 14px 0 0; padding: 11px 13px; border-radius: 10px;
  background: #fef4f4; border-left: 3px solid #b91c1c; color: #7f1d1d;
  font-size: 13px; line-height: 1.5; }

.qbm-foot { padding: 16px 24px 22px; border-top: 1px solid #e6ebf2;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.qbm-foot .note { font-size: 11.5px; color: #8a9ab5; line-height: 1.45;
  flex: 1 1 200px; }
button.qbm-go { background: #16a34a; color: #fff; border: 0; border-radius: 10px;
  padding: 12px 22px; font-family: inherit; font-size: 14px; font-weight: 800;
  cursor: pointer; box-shadow: 0 6px 20px rgba(22,163,74,.3); }
button.qbm-go:disabled { opacity: .5; cursor: default; box-shadow: none; }
button.qbm-back { background: none; border: 0; color: #5b6b80;
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }

/* A BUTTON WEARING A LINK'S CLOTHES.
   Ten of these were anchors to another site, and their styling lives in each
   page's own classes -- .select-btn, .cta-primary, .btn-hero-white and the
   rest. Converting them to buttons keeps those classes and inherits the
   browser's own button chrome on top, which is a grey border nobody asked
   for. This strips what the UA adds and leaves the page's class in charge.

   :where() AND THAT IS THE WHOLE POINT. Written as a bare attribute selector
   this has the same specificity as .select-btn -- and this file is linked
   after each page's inline <style>, so it won it on source order and wiped
   the green background, the white text, the radius and the padding off every
   Select button on the quote tool.

   :where() scores zero. It still beats the browser's own defaults, because
   any author rule does, and it loses to every page class, which is the only
   behaviour that was ever wanted here: supply a button's missing clothes,
   never take off the ones it came in. */
:where([data-qb-apply], [data-qb-advisor]) {
  background: none; border: 0; font: inherit; color: inherit;
  cursor: pointer; text-align: center; text-decoration: none;
  -webkit-appearance: none; appearance: none;
}

/* The confirmation card, which is this file's own and has no MYGA original. */
.qbm-done .qbm-body p { margin: 0 0 10px; font-size: 14px; line-height: 1.55;
  color: #1c2a3a; }
.qbm-note { font-size: 12.5px; color: #5b6b80; }