/* ── Two ways to buy. Quick buy by card (#buy-b) is the primary option: it comes first (left on
        desktop, top on phones), carries the highlight and the filled button. The file-service
        account (#buy-a) is the calmer second card with the top-up bonus. ── */
  .buy-choice, .bopt { scroll-margin-top: 140px; }   /* clear the sticky header */
  .buy-choice.three { grid-template-columns: 1fr 1fr 1fr; }
  @media (max-width: 1100px) { .buy-choice.three { grid-template-columns: 1fr; }
    .buy-choice.three > #buy-b { order: 1; } .buy-choice.three > #buy-m { order: 2; }
    .buy-choice.three > #mp-panel { order: 3; } .buy-choice.three > #buy-a { order: 4; } }
  /* the map-pack option has to stand out: it is the one thing on the page nobody else sells this way */
  .bopt.mp { position: relative; border: 2.5px solid #10b981; background: linear-gradient(180deg, #ecfdf5 0, #fff 46%);
    box-shadow: 0 0 0 5px rgba(16,185,129,.14), 0 18px 40px -12px rgba(4,120,87,.40); }
  .bopt.mp h3 { color: #065f46; font-size: 20px; }
  .bopt.mp .bprice { color: #047857; }
  .badge-mp { position: absolute; top: -13px; left: 22px; padding: 6px 12px; border-radius: 999px;
    background: linear-gradient(90deg, #047857, #10b981); color: #fff; box-shadow: 0 4px 12px rgba(4,120,87,.35);
    font: 800 11px/1 system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
  .mp-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px 14px;
    border-radius: 12px; border: 1.5px solid #10b981; background: #fff; color: #065f46; font: 800 14.5px/1.2 system-ui, sans-serif;
    cursor: pointer; }
  .mp-toggle:hover { background: #ecfdf5; }
  .mp-toggle svg { transition: transform .2s; }
  .mp-toggle .t-close, .mp-toggle[aria-expanded="true"] .t-open { display: none; }
  .mp-toggle[aria-expanded="true"] .t-close { display: inline; }
  .mp-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .mp-panel { grid-column: 1 / -1; padding: 20px 22px; border-radius: 18px; border: 2px solid #10b981; background: #fff;
    box-shadow: 0 14px 34px -14px rgba(4,120,87,.35); animation: mpIn .2s ease-out; }
  @keyframes mpIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  .mp-panel-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
  .mp-panel-head h3 { margin: 0; font-size: 18px; color: var(--text); }
  .mp-panel-foot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 14px;
    color: var(--muted); font-size: 13px; }
  .mp-panel .bc-btn.bc-mp { width: auto; display: inline-flex; padding: 13px 20px; border: 0; border-radius: 12px; cursor: pointer;
    background: linear-gradient(180deg, #10b981, #047857); color: #fff; font: 800 15px/1.1 system-ui, sans-serif; }
  .bopt.mp .bc-btn.bc-mp { display: flex; align-items: center; justify-content: center; width: 100%; padding: 15px 18px; border: 0;
    border-radius: 14px; background: linear-gradient(180deg, #10b981, #047857); color: #fff; font: 800 16px/1.1 system-ui, sans-serif;
    cursor: pointer; box-shadow: 0 8px 22px rgba(4,120,87,.28); }
  .mp-link { font-weight: 700; color: #047857; text-decoration: none; }
  .mp-link:hover { text-decoration: underline; }
  .mp-card { margin: 22px 0 0; padding: 24px; background: #fff; border: 1.5px solid #a7f3d0; border-radius: 20px; scroll-margin-top: 140px; }
  .mp-card h2 { margin: 0 0 6px; font-size: 21px; } .mp-card h2 small { color: var(--muted); font-size: 14px; font-weight: 600; margin-left: 6px; }
  .mp-sub { margin: 0 0 14px; color: #4b5563; }
  .mp-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
  .mp-facts span { padding: 6px 12px; border-radius: 999px; background: #ecfdf5; color: #065f46; font: 700 12.5px/1.2 system-ui, sans-serif; }
  .mp-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
  .mp-group { padding: 12px 14px; border-radius: 14px; background: #f8fafc; border: 1px solid #e5e7eb; }
  .mp-group h3 { display: flex; justify-content: space-between; margin: 0 0 6px; font-size: 14px; }
  .mp-group h3 span { color: #047857; }
  .mp-group ul { margin: 0; padding: 0; list-style: none; }
  .mp-group li { padding: 3px 0; border-top: 1px dashed #e5e7eb; font: 500 13px/1.35 ui-monospace, Consolas, monospace; color: #111827; }
  .mp-group li:first-child { border-top: 0; }
  .mp-group li small { color: #047857; font-weight: 700; white-space: nowrap; }
  .buy-choice { display: grid; grid-template-columns: 1.08fr 1fr; gap: 18px; }
  .buy-choice > h2 { grid-column: 1 / -1; margin: 0 0 2px; font-size: 23px; font-weight: 800; letter-spacing: -.01em; color: var(--text); }
  .buy-choice > h2:focus { outline: none; }   /* focused only programmatically by the phone bar */
  .bopt {
    position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0;
    background: #fff; border: 1.5px solid var(--line); border-radius: 20px; padding: 26px 26px 24px;
    box-shadow: 0 4px 14px rgba(11,30,52,.05);
  }
  .bopt.best {
    border-color: #38bdf8;
    background: radial-gradient(ellipse 500px 260px at 100% 0%, rgba(14,165,233,.14) 0, transparent 70%), linear-gradient(135deg, #f0f9ff 0%, #fff 100%);
    box-shadow: 0 0 0 4px rgba(14,165,233,.10), 0 18px 44px -18px rgba(14,165,233,.5);
  }
  .badge-best, .badge-soft {
    position: absolute; top: -13px; left: 22px; max-width: calc(100% - 44px);
    font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    padding: 6px 12px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .badge-best { background: linear-gradient(135deg, #f59e0b, #f97316); color: #fff; box-shadow: 0 6px 16px rgba(249,115,22,.35); }
  .badge-soft { padding: 5px 11px; background: #fff7ed; color: #b45309; border: 1px solid #fdba74; }
  .bopt h3 { margin: 4px 0 0; font-size: 18px; font-weight: 800; color: var(--text); }
  .bopt .sub { margin: -8px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
  .bprice { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 40px; font-weight: 800; letter-spacing: -.02em; color: var(--text); line-height: 1; }
  .bprice small { font-size: 14px; line-height: 1.35; color: var(--muted); font-weight: 600; letter-spacing: 0; }
  .steps3 { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: st; }
  .steps3 li {
    counter-increment: st; position: relative; padding: 10px 12px 10px 44px; border-radius: 12px;
    background: #fff; border: 1px solid #dbeafe; font-size: 14px; line-height: 1.45;
  }
  .steps3 li::before {
    content: counter(st); position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--red), var(--red-deep)); color: #fff; font-size: 12px; font-weight: 800;
  }
  .steps3 .hl { color: #b45309; font-weight: 800; white-space: nowrap; }
  .bopt:not(.best) .steps3 li { background: #f8fafc; border-color: var(--line); }
  .bopt:not(.best) .steps3 li::before { background: #e2e8f0; color: #334155; }
  .ticks { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
  .ticks li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.5; color: var(--text); }
  .ticks li::before { content: "✓"; position: absolute; left: 2px; top: 0; color: #10b981; font-weight: 900; }
  .ticks li.no { color: var(--muted); }
  .ticks li.no::before { content: "–"; color: #94a3b8; }
  .bactions { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
  .bnotes { margin: 2px 0 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
  .bnotes li { position: relative; padding-left: 14px; }
  .bnotes li::before { content: "·"; position: absolute; left: 3px; top: 0; font-weight: 900; color: #94a3b8; }