/* ============================================================
 * /browser-extension — the Chrome and Edge extension.
 *
 * The .bx-* panel drawings copy the extension's panel.css and the
 * words of panel.html and panel.js (RebateRight.BrowserExtension/panel/),
 * drawn smaller to sit in the hero. The differences: a 3px verdict edge
 * (panel 4px), a 20px glyph (24), a 32px avatar (40), an 11px pill (12),
 * 13px text (the panel's .mono size), a card tinted with the verdict's
 * -50 colour, and no outcome strip or fee lines, so no MBS fee is copied.
 * Page chrome (.product-hero, .section-heading, .cap-grid, .faq-list,
 * .proof-bar) comes from brand.css.
 * ============================================================ */

.page-browser-extension section[id] { scroll-margin-top: var(--space-96); }

.page-browser-extension kbd {
  display: inline-block;
  padding: 0 6px;
  border: 1px solid var(--color-stone-20);
  border-radius: var(--radius-xs);
  background: var(--color-paper);
  color: var(--color-midnight);
  font-family: var(--font-mono);
  font-size: 0.8125em;
  line-height: 1.6;
}

.bx-handoff {
  margin-block-start: var(--space-48);
  max-inline-size: 64ch;
}


/* ============================================================ */
/* §1  HERO                                                       */
/* ============================================================ */
/* The eyebrow carries the coming-soon badge beside the label until the
   stores publish the extension. */
.bx-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-12);
  margin-block-end: var(--space-16);
}
.product-hero .hero-text .bx-eyebrow .label-s { display: inline; margin-block-end: 0; }
.bx-eyebrow .badge { font-weight: 600; }
.bx-eyebrow .badge::before {
  content: "";
  inline-size: 6px; block-size: 6px;
  border-radius: 50%;
  background: var(--color-royal);
}

.page-browser-extension .hero-note {
  margin-block-start: var(--space-24);
  max-inline-size: 48ch;
  font-size: var(--type-body-s);
}

/* The window: a quiet toolbar, the practice page as blank form rows, and
   the panel. Nothing in it is a control. */
.bx-window {
  background: var(--color-paper);
  border: 1px solid var(--color-stone-20);
  border-radius: var(--radius-soft);
  box-shadow: var(--shadow-card-hero);
  overflow: hidden;
}

.bx-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: 10px var(--space-16);
  background: var(--color-stone-05);
  border-block-end: 1px solid var(--color-stone-20);
}
.bx-address {
  flex: 1;
  min-inline-size: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px var(--space-12);
  background: var(--color-paper);
  border-radius: var(--radius-pill);
  font-size: var(--type-label-m);
  color: var(--color-stone-60);
  white-space: nowrap;
  overflow: hidden;
}
.bx-address svg { inline-size: 12px; block-size: 12px; flex: none; color: var(--color-stone-60); }
.bx-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 30px; block-size: 30px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--color-mist);
  color: var(--color-navy);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-royal) 35%, transparent);
}
.bx-action .bx-mark { inline-size: 20px; block-size: auto; }
.bx-key { display: inline-flex; gap: 3px; flex: none; }
.bx-key kbd { font-size: var(--type-label-s); }

.bx-split {
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) minmax(0, 22rem);
}

/* The practice page: blank rows, so no invented patient sits in it. */
.bx-page {
  display: grid;
  align-content: start;
  gap: var(--space-12);
  padding: var(--space-20) var(--space-16);
  background: var(--color-stone-05);
}
.bx-sk-head { display: flex; align-items: center; gap: var(--space-12); margin-block-end: var(--space-4); }
.bx-sk-avatar { inline-size: 28px; block-size: 28px; flex: none; border-radius: 50%; background: var(--color-stone-20); }
.bx-sk-card {
  display: grid;
  gap: var(--space-12);
  padding: var(--space-16) var(--space-12);
  background: var(--color-paper);
  border: 1px solid var(--color-stone-20);
  border-radius: var(--radius-sm);
}
.bx-sk-row { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--space-8); align-items: center; }
.bx-sk-line { display: block; block-size: 6px; border-radius: var(--radius-pill); background: var(--color-stone-20); }
.bx-sk-strong { block-size: 9px; background: color-mix(in srgb, var(--color-stone-40) 55%, var(--color-stone-20)); }
.bx-sk-field { display: block; block-size: 18px; border: 1px solid var(--color-stone-20); border-radius: var(--radius-xs); }
.bx-w-30 { inline-size: 30%; }
.bx-w-40 { inline-size: 40%; }
.bx-w-50 { inline-size: 50%; }
.bx-sk-row .bx-w-30, .bx-sk-row .bx-w-40, .bx-sk-row .bx-w-50 { inline-size: 70%; }
.bx-sk-row .bx-sk-line + .bx-sk-line { inline-size: 85%; }

/* The panel. */
.bx-panel {
  display: grid;
  align-content: start;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16) var(--space-20);
  background: var(--color-paper);
  border-inline-start: 1px solid var(--color-stone-20);
  font-size: 0.8125rem;
  line-height: 1.45;
}
.bx-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-navy);
  padding-block: 2px;
}
.bx-bar .bx-mark { inline-size: 26px; block-size: auto; }
.bx-settings {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-royal);
  font-size: var(--type-label-m);
  font-weight: 500;
}
.bx-settings svg { inline-size: 13px; block-size: 13px; }

.bx-patient {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  background: var(--color-mist);
  border-radius: var(--radius-default);
}
.bx-avatar {
  display: grid;
  place-items: center;
  inline-size: 32px; block-size: 32px;
  border-radius: 50%;
  background: var(--color-navy);
  color: var(--color-paper);
  font-size: var(--type-label-s);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.bx-patient-main { display: grid; gap: 1px; min-inline-size: 0; }
.bx-name { font-weight: 600; color: var(--color-midnight); font-size: var(--type-body-s); }
.bx-meta { font-size: var(--type-label-m); color: var(--color-stone-60); }
.bx-meta.mono { font-size: var(--type-label-s); }

.bx-result {
  --tone: var(--verdict-cannot-determine);
  --tint: var(--color-info-50);
  display: grid;
  gap: 6px;
  padding: var(--space-12);
  border: 1px solid color-mix(in srgb, var(--tone) 30%, transparent);
  border-inline-start: 3px solid var(--tone);
  border-radius: var(--radius-default);
  background: color-mix(in srgb, var(--tint) 70%, var(--color-paper));
}
.bx-result.is-ok { --tone: var(--verdict-eligible); --tint: var(--color-success-50); }
.bx-result.is-no { --tone: var(--verdict-not-eligible); --tint: var(--color-error-50); }
.bx-result-head { display: flex; align-items: center; gap: var(--space-8); }
.bx-glyph {
  display: grid;
  place-items: center;
  inline-size: 20px; block-size: 20px;
  flex: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tone) 14%, transparent);
  color: var(--tone);
}
.bx-glyph svg { inline-size: 11px; block-size: 11px; }
.bx-result-title { flex: 1; min-inline-size: 0; font-weight: 600; color: var(--color-midnight); }
.bx-pill {
  flex: none;
  padding: 0 8px;
  border: 1px solid var(--tone);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  color: var(--tone);
  font-size: var(--type-label-s);
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}
.bx-result-text { color: var(--color-stone-90); }

/* The correction row under a mismatch: the value Medicare holds, and Copy. */
.bx-fix {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-start: 4px;
  padding: var(--space-8) var(--space-12);
  background: var(--color-paper);
  border-radius: var(--radius-sm);
  color: var(--color-stone-90);
}
.bx-fix strong { color: var(--color-midnight); }
.bx-copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 10px;
  border: 1px solid var(--color-royal);
  border-radius: var(--radius-pill);
  color: var(--color-royal);
  font-size: var(--type-label-m);
  font-weight: 500;
}
.bx-copy svg { inline-size: 12px; block-size: 12px; }

/* On a phone the three proof items stack, without the dots between them. */
@media (max-width: 639.98px) {
  .page-browser-extension .micro-proof { flex-direction: column; align-items: flex-start; gap: var(--space-8); }
  .page-browser-extension .micro-proof .sep { display: none; }
}

/* Narrow screens show the panel alone, at its own width. */
@media (max-width: 559.98px) {
  .bx-split { grid-template-columns: minmax(0, 1fr); }
  .bx-page { display: none; }
  .bx-panel { border-inline-start: none; }
  .bx-key { display: none; }
}
@media (max-width: 1023.98px) {
  .page-browser-extension .product-hero .hero-visual { max-inline-size: 36rem; }
}


/* ============================================================ */
/* §2  HOW IT WORKS                                               */
/* ============================================================ */
.bx-steps {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
}
@media (min-width: 768px) {
  .bx-steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-48); }
}
.bx-step {
  display: grid;
  align-content: start;
  gap: var(--space-12);
  padding-block-start: var(--space-24);
  border-block-start: 1px solid var(--color-stone-20);
}
.bx-step-num {
  display: grid;
  place-items: center;
  inline-size: 32px; block-size: 32px;
  border-radius: 50%;
  background: var(--color-navy);
  color: var(--color-paper);
  font-size: var(--type-body-s);
  font-weight: 600;
}
.bx-step p { color: var(--color-stone-90); line-height: var(--lh-body-relaxed); }
.bx-step strong { font-weight: 600; color: var(--color-midnight); }


/* ============================================================ */
/* §3  WHERE IT READS FROM                                        */
/* ============================================================ */
@media (min-width: 1024px) {
  .bx-source-grid { grid-template-columns: repeat(3, 1fr); }
}
.bx-source-grid strong { font-weight: 600; color: var(--color-midnight); }


/* ============================================================ */
/* §4  WHAT IT CHECKS                                             */
/* ============================================================ */
.bx-checks .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-64);
  align-items: center;
}
@media (min-width: 1024px) {
  .bx-checks .container { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-96); }
}
.bx-checks .section-heading { margin-block-end: var(--space-32); }
.bx-check-list { list-style: none; display: grid; gap: var(--space-20); }
.bx-check-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-12); }
.bx-check-list svg { inline-size: 18px; block-size: 18px; margin-block-start: 3px; color: var(--color-royal); }
.bx-check-list p { color: var(--color-stone-90); line-height: var(--lh-body-relaxed); }
.bx-check-list strong { font-weight: 600; color: var(--color-midnight); }
.bx-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12) var(--space-32);
  margin-block-start: var(--space-32);
}

.bx-checks-visual { min-inline-size: 0; max-inline-size: 26rem; inline-size: 100%; justify-self: center; }
.bx-panel-solo {
  padding: var(--space-16);
  border: 1px solid var(--color-stone-20);
  border-radius: var(--radius-soft);
  box-shadow: var(--shadow-card-elevated);
}
.bx-checks-visual .card-caption {
  margin-block-start: var(--space-16);
  font-size: var(--type-body-s);
  font-style: italic;
  text-align: center;
}


/* ============================================================ */
/* §5  PATIENT DATA                                               */
/* ============================================================ */
.bx-data-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32) var(--space-48);
}
@media (min-width: 768px) {
  .bx-data-grid { grid-template-columns: repeat(2, 1fr); }
}
.bx-data-point h3 { color: var(--color-navy); margin-block-end: var(--space-8); }
.bx-data-point p { color: var(--color-stone-90); line-height: var(--lh-body-relaxed); }


/* ============================================================ */
/* §6  PERMISSIONS                                                */
/* ============================================================ */
.bx-permissions .section-heading,
.bx-table-wrap { max-inline-size: var(--container-content); }
.bx-table-wrap { overflow-x: auto; }
.bx-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--type-body-s);
}
.bx-table caption { text-align: start; padding-block-end: var(--space-12); color: var(--color-stone-60); }
.bx-table th, .bx-table td {
  padding: var(--space-16) var(--space-16) var(--space-16) 0;
  border-block-end: 1px solid var(--color-stone-20);
  text-align: start;
  vertical-align: top;
}
.bx-table thead th {
  padding-block-start: 0;
  font-size: var(--type-label-m);
  font-weight: 600;
  color: var(--color-stone-60);
  border-block-end-color: var(--color-stone-40);
}
.bx-table tbody th { inline-size: 36%; font-weight: 500; }
.bx-table td { color: var(--color-stone-90); line-height: var(--lh-body-relaxed); }
.bx-table td strong { font-weight: 600; color: var(--color-midnight); }
.bx-table code {
  font-family: var(--font-mono);
  font-size: var(--type-label-m);
  background: var(--color-paper);
  color: var(--color-navy);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  overflow-wrap: anywhere;
}
.bx-permissions q { color: var(--color-midnight); font-weight: 500; }


/* ============================================================ */
/* §7  SET UP                                                     */
/* ============================================================ */
.bx-setup-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-48);
}
@media (min-width: 1024px) {
  .bx-setup-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-96); }
}
.bx-needs {
  align-self: start;
  padding: var(--space-32);
  background: var(--color-mist);
  border-radius: var(--radius-default);
}
.bx-needs h3 { margin-block-end: var(--space-20); }
.bx-needs dl { display: grid; gap: var(--space-20); }
.bx-needs dt { font-weight: 600; color: var(--color-midnight); }
.bx-needs dd { margin-block-start: var(--space-4); color: var(--color-stone-90); font-size: var(--type-body-s); line-height: var(--lh-body-relaxed); }

.bx-setup-steps {
  list-style: none;
  counter-reset: bx-setup;
  display: grid;
  gap: var(--space-24);
}
.bx-setup-steps li {
  counter-increment: bx-setup;
  position: relative;
  padding-inline-start: var(--space-48);
  color: var(--color-stone-90);
  line-height: var(--lh-body-relaxed);
}
.bx-setup-steps li::before {
  content: counter(bx-setup);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  display: grid;
  place-items: center;
  inline-size: 28px; block-size: 28px;
  border: 1px solid var(--color-stone-20);
  border-radius: 50%;
  color: var(--color-navy);
  font-size: var(--type-body-s);
  font-weight: 600;
}
.bx-setup-steps strong { font-weight: 600; color: var(--color-midnight); }


/* ============================================================ */
/* §8  FAQ                                                        */
/* ============================================================ */
.bx-faq .section-heading { margin-inline: auto; max-inline-size: 720px; }
.bx-faq .answer strong { font-weight: 600; color: var(--color-midnight); }


/* ============================================================ */
/* §9  SUPPORT  ·  §10  CTA                                       */
/* ============================================================ */
.bx-support, .bx-cta { text-align: center; }
.bx-support-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 48px; block-size: 48px;
  margin-block-end: var(--space-16);
  border-radius: 50%;
  background: var(--color-mist);
  color: var(--color-royal);
}
.bx-support-icon svg { inline-size: 24px; block-size: 24px; }
.bx-support-lede {
  margin-block-start: var(--space-16);
  margin-inline: auto;
  max-inline-size: 52ch;
  line-height: var(--lh-body-relaxed);
}
.bx-cta h2 { margin-block-end: var(--space-16); }