/* medicare.gov look-alike, rebuilt against the real page.
   Palette and layout taken from a screenshot of medicare.gov/coverage plus the page's own
   fetched assets (logo, hero photo, doctor photo) in /assets/mgov/. Everything is namespaced
   under .mgov-* or .ss-overlay* so it cannot bleed into storefront.css or be bled into. */
.mgov-page {
  --mg-green: #146a5d;
  --mg-green-dark: #0f544a;
  --mg-ink: #3d4551;
  --mg-ink-soft: #5b616b;
  --mg-band: #e9f1fa;
  --mg-sage: #e8efec;
  --mg-rule: #dfe1e2;
  --mg-crumb: #8b1a1a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
               sans-serif;
  color: var(--mg-ink);
  background: #fff;
  font-size: 17px;
  line-height: 1.55;
}
.mgov-page *, .mgov-page *::before, .mgov-page *::after { box-sizing: border-box; }
.mgov-page a { color: var(--mg-green); text-decoration: none; }
.mgov-page a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------- header */
.mgov-top {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px 32px;
  border-bottom: 1px solid var(--mg-rule);
}
.mgov-logo img { height: 30px; display: block; }
.mgov-nav { margin-left: auto; display: flex; gap: 30px; font-size: 16px; }
.mgov-nav a { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.mgov-chev {
  width: 8px; height: 8px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px);
}
.mgov-account {
  display: flex; gap: 26px; padding-left: 26px; border-left: 1px solid var(--mg-rule);
  font-size: 15px;
}
.mgov-account a { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; }
.mgov-ico { width: 18px; height: 18px; display: block; opacity: 0.9; }
.mgov-ico-chat { background: currentColor; clip-path: polygon(0 0,100% 0,100% 70%,30% 70%,12% 100%,12% 70%,0 70%); }
.mgov-ico-login { background: currentColor; clip-path: polygon(0 20%,55% 20%,55% 0,100% 50%,55% 100%,55% 80%,0 80%); }
.mgov-ico-search {
  border: 2px solid currentColor; border-radius: 50%; width: 13px; height: 13px;
  position: relative; margin: 2px auto 4px;
}
.mgov-ico-search::after {
  content: ""; position: absolute; right: -5px; bottom: -4px; width: 2px; height: 7px;
  background: currentColor; transform: rotate(-45deg);
}
/* Built from two boxes rather than one polygon: the polygon's winding read as a cross on
   screen, which is not a printer. */
.mgov-ico-print { position: relative; }
.mgov-ico-print::before {
  content: ""; position: absolute; left: 2px; right: 2px; top: 0; height: 6px;
  border: 2px solid currentColor; border-bottom: 0;
}
.mgov-ico-print::after {
  content: ""; position: absolute; left: 0; right: 0; top: 6px; bottom: 3px;
  background: currentColor; border-radius: 1px;
}

/* ------------------------------------------------------------------------ breadcrumb */
.mgov-crumbrow {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 32px 10px;
}
.mgov-breadcrumb { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.mgov-breadcrumb a { color: var(--mg-crumb); text-decoration: underline; }
.mgov-breadcrumb > span[aria-current] { color: var(--mg-ink); }
.mgov-crumbsep {
  width: 7px; height: 7px; border-right: 2px solid #71767a;
  border-bottom: 2px solid #71767a; transform: rotate(-45deg);
}
.mgov-pageacts { display: flex; gap: 26px; font-size: 15px; }
.mgov-pageacts a { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }

.mgov-mock {
  background: #fdf6e3; border-top: 1px solid #e6d9a8; border-bottom: 1px solid #e6d9a8;
  padding: 9px 32px; font-size: 14px; color: #4a3f1e;
}

/* ------------------------------------------------------------------------------ hero */
/* THE WAVE MUST NOT REACH THE TEXT.
   A clip-path ellipse on an absolutely positioned strip cut "service you need." in half,
   because the strip's height and the paragraph's position were set independently and nothing
   related them. The hero now reserves exactly the wave's height as padding, so the copy can
   never run into it however the text reflows. */
.mgov-hero { position: relative; padding-top: 40px; padding-bottom: 96px; overflow: hidden; }
.mgov-hero-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: end;
}
.mgov-hero-copy { padding-bottom: 8px; }
.mgov-hero h1 {
  font-size: 62px; line-height: 1.05; font-weight: 700; margin: 0 0 26px;
  letter-spacing: -0.02em; color: var(--mg-ink);
}
.mgov-hero p { margin: 0; max-width: 46em; font-size: 17px; }
/* she sits ON the wave, which is why the hero clips its overflow rather than letting her
   push the section taller */
.mgov-hero-img {
  width: 100%; display: block; position: relative; z-index: 2;
  margin-bottom: -96px;
}
/* An SVG path rather than a clip-path: the real curve is asymmetric - shallow on the left,
   rising to the right - and an ellipse cannot be asked for that. */
.mgov-wave {
  position: absolute; left: 0; right: 0; bottom: 0; height: 96px; z-index: 1;
  background: var(--mg-band);
  -webkit-mask-image: var(--wave); mask-image: var(--wave);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.mgov-page {
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' \
preserveAspectRatio='none' viewBox='0 0 1440 96'%3E%3Cpath fill='%23000' \
d='M0,52 C240,14 460,2 720,26 C980,50 1200,74 1440,58 L1440,96 L0,96 Z'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------------- blue band */
.mgov-band { background: var(--mg-band); padding: 18px 0 70px; }
.mgov-band-inner { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.mgov-band h2 {
  font-size: 40px; line-height: 1.12; font-weight: 700; margin: 0 0 18px;
  letter-spacing: -0.015em; color: var(--mg-ink);
}
.mgov-band p { margin: 0 0 30px; max-width: 62em; }
.mgov-estimate-btn {
  font: inherit; font-size: 18px; font-weight: 700; cursor: pointer;
  background: var(--mg-green); color: #fff; border: 0; border-radius: 999px;
  padding: 15px 40px;
}
.mgov-estimate-btn:hover { background: var(--mg-green-dark); }

/* ----------------------------------------------------------------------- two columns */
.mgov-cols {
  max-width: 1180px; margin: 60px auto 0; padding: 0 32px 70px;
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 30px;
  align-items: start;
}
.mgov-askcard {
  border: 1px solid var(--mg-rule); border-radius: 14px; padding: 26px 30px;
  display: flex; gap: 26px; align-items: flex-start;
}
.mgov-askimg { width: 92px; height: 92px; border-radius: 50%; flex: 0 0 auto; display: block; }
.mgov-askcard h3 {
  font-size: 23px; line-height: 1.3; font-weight: 700; margin: 0 0 12px;
  color: var(--mg-ink);
}
.mgov-askcard p { margin: 0; font-size: 16px; }
.mgov-depends { background: var(--mg-sage); padding: 26px 30px; }
.mgov-depends-h { font-weight: 700; margin: 0 0 14px; font-size: 16px; }
.mgov-depends ul { margin: 0; padding-left: 22px; }
.mgov-depends li { margin-bottom: 9px; font-size: 16px; }

.mgov-feedback {
  position: fixed; right: 0; top: 42%; z-index: 5;
  background: var(--mg-green); color: #fff; font-size: 14px; font-weight: 600;
  padding: 18px 9px; border-radius: 6px 0 0 6px;
  writing-mode: vertical-rl; letter-spacing: 0.02em;
}

.mgov-footer {
  border-top: 1px solid var(--mg-rule); background: #f7f9fa;
  padding: 26px 32px 34px; font-size: 14px; color: var(--mg-ink-soft);
}
.mgov-footer p { margin: 0 0 8px; max-width: 78em; }
.mgov-footer-note { font-style: italic; }

@media (max-width: 980px) {
  .mgov-nav, .mgov-account { display: none; }
  .mgov-hero-inner { grid-template-columns: minmax(0, 1fr); }
  .mgov-hero-img { display: none; }
  .mgov-hero h1 { font-size: 40px; }
  .mgov-band h2 { font-size: 30px; }
  .mgov-cols { grid-template-columns: minmax(0, 1fr); }
  .mgov-askcard { flex-direction: column; }
  .mgov-feedback { display: none; }
}

/* ------------------------------------------------------------------ the estimator panel
   A PANEL OVER THE PAGE, NOT A PAGE.
   The demo's whole claim is that the estimate happens inside medicare.gov, so the coverage
   page stays visible behind and around it. A full-screen takeover would show a second product
   loading, which is what an integration is supposed to not look like. */
.ss-scrim {
  position: fixed;
  inset: 0;
  background: rgba(19, 26, 32, 0.44);
  z-index: 900;
}
.ss-overlay {
  position: fixed;
  /* CENTRED. It was pinned to the right edge, which read as a support widget rather than as
     the page's own tool. A dialog belongs in the middle of what it interrupts. */
  /* ONE SIZE, CENTRED ON BOTH AXES.
     It hugged its content, which meant the panel resized every time the estimator moved to a
     screen of a different length - the frame jumping around the content is more distracting
     than empty space inside a steady one. A dialog that changes shape as you use it does not
     read as part of the page it is sitting in.
     Fixed box, content scrolls inside it, and 15% larger than the box it replaces. */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(1081px, 94vw);
  height: min(880px, 90vh);
  z-index: 901;
  background: #fff;
  border: 1px solid #dfe1e2;
  /* medicare.gov's radius, not ours: inside their page the panel should look like their
     furniture, and their cards are generously rounded where ours are hard-edged. */
  border-radius: 14px;
  box-shadow: 0 30px 70px rgba(19, 26, 32, 0.26);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* The panel is now a fixed-height flex column: the bar holds its place at the top and
   everything after it shares one scrolling area. Scrolling the PANEL instead would move the
   header out of view, and with a fixed height there is always something to scroll. */
.ss-overlay { overflow: hidden; scrollbar-width: thin; }
.ss-overlay > .ss-overlay-bar { flex: 0 0 auto; }
.ss-overlay > .gridbg { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
/* The panel's own header, in medicare.gov's palette. This was a dark Superscript bar, which
   announced a second product the moment it opened. */
.ss-overlay-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 22px;
  background: #146a5d;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
               sans-serif;
  font-size: 15px;
}
/* The wordmark, not the word. Set as an image so the brand is the brand rather than whatever
   the medicare.gov system font renders - the bar is deliberately in CMS green, so this is the
   white lockup. Baseline-aligned against the sentence beside it rather than sitting on it. */
.ss-overlay-bar .ss-overlay-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 400;
  letter-spacing: 0.01em;
}
/* The wordmark ships with fill="currentColor", which is right for an inlined SVG and wrong
   for an <img>: there is no inherited colour inside the image document, so it resolves to
   black and vanishes against the green. Kept as an <img> for the alt text, and forced to
   white here. brightness(0) flattens whatever the source colour is to black, invert(1) takes
   it to white - so this holds even if the asset is later swapped for the black lockup. */
.ss-overlay-bar .ss-overlay-logo {
  height: 14px;
  width: auto;
  display: block;
  flex: 0 0 auto;
  filter: brightness(0) invert(1);
}
/* the separator that used to be a colon typed after the word */
.ss-overlay-bar .ss-overlay-tag-full { font-weight: 400; opacity: 0.9; }
.ss-overlay-bar .ss-overlay-tag-full::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 11px;
  margin-right: 9px;
  vertical-align: -1px;
  background: rgba(255, 255, 255, 0.45);
}
.ss-overlay-close {
  margin-left: auto;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  border-radius: 999px;
  width: 30px;
  height: 30px;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.ss-overlay-close:hover { background: rgba(255, 255, 255, 0.16); }

/* The estimator's own blueprint marginalia and grid are Superscript's site furniture, not a
   panel's. Inside medicare.gov they read as a second page's background bleeding through. */
.ss-overlay .shell { padding: 26px 30px 34px; max-width: none; }
/* `gridbg` and `chyron` are the estimator's own site furniture - an engineering-drawing grid
   and a footer strip reading "MEDICARE PART B / ORIGINAL MEDICARE / 2026". Inside a panel on
   medicare.gov they read as a second page's background bleeding through, and the chyron reads
   as a second site's footer. Hidden in this context only; the standalone site keeps both. */
/* `gridbg` WRAPS THE STAGES. Hiding it hid the entire estimator, leaving an empty white
   panel - it is a content wrapper whose BACKGROUND draws the engineering-drawing grid, not a
   background layer. So the grid image goes and the element stays. The `min-height: 100vh` goes
   too: inside a panel it forces a viewport's worth of empty space below the content. */
.ss-overlay .gridbg {
  background-image: none;
  background-color: #fff;
  min-height: 0;
}
.ss-overlay .chyron,
.ss-overlay .marginalia { display: none; }

/* The panel's primary action in medicare.gov's green. Superscript navy inside their page is
   the same tell as the dark header bar was. */
.ss-overlay .cta,
.ss-overlay .ss-btn { background: #146a5d; border-color: #146a5d; color: #fff; }
.ss-overlay .cta:hover,
.ss-overlay .ss-btn:hover { background: #0f544a; border-color: #0f544a; }
/* the page behind does not scroll while the panel is open */
body.ss-overlay-open { overflow: hidden; }

/* Narrow screens get the full width, because 62vw of a phone is not a panel. It still sits
   over the page rather than replacing it, so closing returns to where they were. */
@media (max-width: 900px) {
  .ss-overlay {
    /* the whole screen on a phone: an inset panel there is just a smaller phone */
    top: 0; left: 0; right: 0; bottom: 0; width: auto; height: auto;
    transform: none; border-radius: 0; border: 0;
  }
}


/* `hidden` has to win. `.ss-overlay{display:flex}` beat the attribute's own display:none on
   specificity, so the panel was open on page load - the one state it must never be in. */
.ss-overlay[hidden], .ss-scrim[hidden] { display: none !important; }

/* THE PANEL DOES NOT BRING ITS OWN WEBSITE WITH IT.
   Inside medicare.gov the estimator is a panel, so its standalone site chrome - the federal
   banner and its own Medicare.gov masthead - is a second copy of the page it is sitting on.
   Hidden here rather than deleted from the markup: the estimator is still a real site of its
   own, the fixtures load these stages directly, and this is the only context where the chrome
   is wrong. */
.ss-overlay .govband,
.ss-overlay .brand,
.ss-overlay .marginalia { display: none; }
.ss-overlay .shell { padding-top: 8px; }

/* ---------------------------------------------------- the /coverage page's own furniture
   Written for the markup of medicare.gov/coverage: a single measured column, a search field,
   the cost section with its five bullets, and the two browse lists. Colours and weights come
   from the fetched page, not from taste. */
.mgov-main h1 { font-size: 40px; line-height: 1.15; margin: 0 0 14px; letter-spacing: -0.01em; }
.mgov-main h2 { font-size: 24px; line-height: 1.25; margin: 34px 0 10px; }
.mgov-main h3 { font-size: 19px; line-height: 1.3; margin: 0 0 6px; }
.mgov-main p  { margin: 0 0 12px; line-height: 1.6; }

.mgov-mock {
  background: #fdf6e3;
  border-bottom: 1px solid #e6d9a8;
  padding: 10px 24px;
  font-size: 14px;
  color: #4a3f1e;
}

.mgov-search { margin: 18px 0 6px; }
.mgov-search label { display: block; font-weight: 700; margin-bottom: 6px; font-size: 15px; }
.mgov-search-row { display: flex; gap: 0; max-width: 560px; }
.mgov-search-row input {
  flex: 1 1 auto;
  font: inherit;
  font-size: 16px;
  padding: 11px 12px;
  border: 1px solid #5b616b;
  border-right: 0;
  border-radius: 4px 0 0 4px;
  min-width: 0;
}
.mgov-search-btn {
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
  padding: 11px 22px; border: 1px solid #146a5d; border-radius: 0 4px 4px 0;
  background: #146a5d; color: #fff;
}
.mgov-search-btn:hover { background: #0f544a; }

.mgov-cost { margin-top: 34px; }
.mgov-dependson { margin-bottom: 6px; }
.mgov-deplist { margin: 0 0 8px; padding-left: 22px; line-height: 1.9; }

/* The integration, sitting inside the cost section because that is the question it answers.
   Bordered rather than tinted: on medicare.gov a coloured block reads as a warning. */
.mgov-estimate {
  border: 1px solid #d6d7d9;
  border-left: 4px solid #146a5d;
  border-radius: 4px;
  padding: 20px 22px;
  margin: 22px 0 8px;
  background: #fff;
}
.mgov-estimate-row {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 14px 0 10px;
}
.mgov-estimate-row label {
  display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px;
}
.mgov-estimate-row input {
  font: inherit; font-size: 16px; padding: 10px 12px;
  border: 1px solid #5b616b; border-radius: 4px; width: 120px;
}
.mgov-estimate-note { font-size: 14px; color: #5b616b; margin: 0; }

.mgov-ways { margin-top: 34px; }
.mgov-linklist, .mgov-topics { margin: 0; padding-left: 22px; line-height: 2; }
.mgov-topics a, .mgov-linklist a { color: #146a5d; }

@media (max-width: 700px) {
  .mgov-main h1 { font-size: 30px; }
  .mgov-main h2 { font-size: 20px; }
  .mgov-search-row { max-width: none; }
}

/* ---------------------------------------------------------------- first-run notice
   SUPERSCRIPT'S SHAPE, MEDICARE'S COLOUR. The scrim is CMS green at low alpha because the
   notice is about this page's relationship to medicare.gov, so tinting the page it is
   disclaiming is the point - a neutral grey wash would read as any modal on any site.
   The card itself follows the Superscript laws: a rectangle with radius 0, a bracketed mono
   label, a load-bearing border, and a pill only on the CTA. */
.firstrun-scrim {
  position: fixed;
  inset: 0;
  /* the CMS green of the overlay bar, at an alpha that still lets the page read through */
  background: rgba(20, 106, 93, 0.55);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.firstrun-scrim[hidden] { display: none !important; }
.firstrun {
  position: relative;
  background: #fff;
  /* radius 0: cards are rectangles. The pill is reserved for the CTA. */
  border-radius: 0;
  border: 1px solid #0f544a;
  /* the borders are load-bearing, so the lift is a hard offset rather than a soft glow */
  box-shadow: 10px 10px 0 rgba(15, 84, 74, 0.16);
  /* the design system's card padding, top / right / bottom / left */
  padding: 26px 28px 28px 28px;
  max-width: 520px;
  width: 100%;
}
.firstrun-tag {
  display: block;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #146a5d;
}
.firstrun-h {
  margin: 10px 0 0;
  font-size: 21px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #12212b;
}
.firstrun-p {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: #46555f;
}
/* CMS GREEN, NOT SUPERSCRIPT BLACK. `.ss-btn` is a black pill, which is correct on
   Superscript's own paper and reads as a foreign object dropped onto a green government page -
   it was the only black thing on screen. The SHAPE stays Superscript (pill, and pills are for
   CTAs only); the colour follows the page being disclaimed, matching "Create an estimate"
   directly beneath it. Same override the overlay already applies to `.ss-btn` inside itself. */
.firstrun-go {
  margin-top: 20px;
  background: #146a5d;
  border-color: #146a5d;
  color: #fff;
}
.firstrun-go:hover { background: #0f544a; border-color: #0f544a; }
/* THE RING FOLLOWS THE CARD, WHICH IS NOW BLUE.
   This was CMS green, with a comment saying blue "is the one colour this page does not use".
   That stopped being true: `ss-overlay.css` made the notice a Superscript-branded card with a
   blue CTA, blue mono lines and a blue accent in the headline. The button is focused on open
   (`go.focus()` in mgov.js), so the ring is visible immediately - a dark green ring around a
   blue pill was the first thing on screen. `--ss-blue` comes from ss-overlay.css's `:root`;
   the literal is the fallback for if that layer is ever absent. */
.firstrun-go:focus-visible,
.firstrun-x:focus-visible {
  outline: 2px solid var(--ss-blue, #00A3FF);
  outline-offset: 3px;
}

/* REDUCED MOTION. The ship note says the card "honours reduced motion", and nothing in the
   bundle does - there is no `prefers-reduced-motion` rule in ss-overlay.css, and the flag is a
   static SVG rather than the described draw-in, so the only motion is the two entrances. Made
   true here rather than left as a claim: someone who has asked their OS for less movement
   should not get a card that slides and scales on top of a page that just changed. */
@media (prefers-reduced-motion: reduce) {
  .firstrun,
  .ss-overlay {
    animation: none !important;
  }
}
.firstrun-x {
  position: absolute;
  top: 8px;
  right: 10px;
  border: 0;
  background: none;
  color: #7b8a93;
  font-size: 15px;
  line-height: 1;
  padding: 6px;
  cursor: pointer;
}
.firstrun-x:hover { color: #0f544a; }
@media (max-width: 520px) {
  /* full width on a phone; an inset card there is just a smaller phone */
  .firstrun-scrim { padding: 0; align-items: flex-end; }
  .firstrun { max-width: none; border-left: 0; border-right: 0; border-bottom: 0;
              box-shadow: none; padding: 22px 20px 24px; }
}