.sm-medicare-guide {
  max-width: var(--sm-max-width);
  margin: 0 auto;
  padding: var(--sm-section-v) var(--sm-section-h);
  background: var(--sm-white);
  color: var(--sm-body);
  font-family: var(--sm-font-body);
}

.sm-medicare-guide *,
.sm-medicare-guide *::before,
.sm-medicare-guide *::after {
  box-sizing: border-box;
}

.sm-medicare-guide .screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.sm-medicare-guide__hero {
  max-width: 920px;
  margin: 0 auto var(--sm-space-12);
  text-align: center;
}

.sm-medicare-guide__eyebrow,
.sm-medicare-guide__phase-number {
  margin: 0 0 var(--sm-space-3);
  color: var(--sm-orange);
  font-family: var(--sm-font-head);
  font-size: var(--sm-text-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sm-medicare-guide__title {
  margin: 0;
  color: var(--sm-purple);
  font-family: var(--sm-font-head);
  font-size: clamp(34px, 5vw, 54px);
  font-weight: 800;
  line-height: 1.08;
}

.sm-medicare-guide__lede {
  max-width: 780px;
  margin: var(--sm-space-5) auto 0;
  color: var(--sm-body);
  font-size: var(--sm-text-md);
  line-height: 1.65;
}

.sm-medicare-guide__hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sm-space-3);
  margin-top: var(--sm-space-6);
}

.sm-medicare-guide__medicare-link,
.sm-medicare-guide__next,
.sm-medicare-guide__print,
.sm-medicare-guide__previous {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: var(--sm-radius);
  font-family: var(--sm-font-head);
  font-size: var(--sm-text-sm);
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition: background var(--sm-transition), box-shadow var(--sm-transition), transform var(--sm-transition);
}

.sm-medicare-guide__medicare-link,
.sm-medicare-guide__next {
  border: 2px solid var(--sm-orange);
  background: var(--sm-orange);
  box-shadow: var(--sm-shadow-cta);
  color: var(--sm-white);
}

.sm-medicare-guide__medicare-link:hover,
.sm-medicare-guide__next:hover {
  border-color: var(--sm-orange-hover);
  background: var(--sm-orange-hover);
  box-shadow: var(--sm-shadow-cta-hov);
  transform: translateY(-1px);
}

.sm-medicare-guide__print,
.sm-medicare-guide__previous {
  border: 2px solid var(--sm-purple);
  background: var(--sm-white);
  color: var(--sm-purple);
  cursor: pointer;
}

.sm-medicare-guide__print:hover,
.sm-medicare-guide__previous:hover {
  background: var(--sm-purple-lter);
}

.sm-medicare-guide__medicare-link:focus-visible,
.sm-medicare-guide__next:focus-visible,
.sm-medicare-guide__print:focus-visible,
.sm-medicare-guide__previous:focus-visible,
.sm-medicare-guide__outline button:focus-visible,
.sm-medicare-guide figure a:focus-visible,
.sm-medicare-guide__side-link:focus-visible {
  outline: 3px solid rgba(69, 41, 92, 0.32);
  outline-offset: 3px;
}

.sm-medicare-guide__privacy {
  max-width: 760px;
  margin: var(--sm-space-6) auto 0;
  padding: var(--sm-space-4) var(--sm-space-5);
  border: 1px solid #f5c0ad;
  border-radius: var(--sm-radius);
  background: var(--sm-orange-lt);
  color: var(--sm-body);
  font-size: var(--sm-text-sm);
  line-height: 1.55;
  text-align: left;
}

.sm-medicare-guide__layout {
  display: grid;
  align-items: start;
  gap: var(--sm-space-10);
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
}

.sm-medicare-guide__outline {
  position: sticky;
  top: var(--sm-space-6);
  padding: var(--sm-space-5);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-lg);
  background: var(--sm-purple-lter);
}

.sm-medicare-guide__outline-title {
  margin: 0 0 var(--sm-space-3);
  color: var(--sm-purple);
  font-family: var(--sm-font-head);
  font-size: var(--sm-text-sm);
  font-weight: 800;
}

.sm-medicare-guide__outline ol {
  display: grid;
  gap: var(--sm-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sm-medicare-guide__outline button {
  display: grid;
  width: 100%;
  min-height: 48px;
  align-items: center;
  padding: var(--sm-space-2);
  border: 0;
  border-radius: var(--sm-radius);
  background: transparent;
  color: var(--sm-purple);
  cursor: pointer;
  font-family: var(--sm-font-body);
  font-size: var(--sm-text-xs);
  font-weight: 700;
  gap: var(--sm-space-3);
  grid-template-columns: 32px 1fr;
  line-height: 1.35;
  text-align: left;
}

.sm-medicare-guide__outline button span {
  display: inline-grid;
  width: 32px;
  height: 32px;
  border: 1px solid var(--sm-border);
  border-radius: 50%;
  background: var(--sm-white);
  place-items: center;
}

.sm-medicare-guide__outline button:hover {
  background: var(--sm-purple-lt);
}

.sm-medicare-guide__outline button[aria-current="step"] {
  background: var(--sm-purple);
  color: var(--sm-white);
}

.sm-medicare-guide__outline button[aria-current="step"] span {
  border-color: var(--sm-white);
  color: var(--sm-purple);
}

.sm-medicare-guide__side-link {
  display: inline-block;
  margin-top: var(--sm-space-5);
  color: var(--sm-purple);
  font-size: var(--sm-text-sm);
  font-weight: 800;
  text-underline-offset: 3px;
}

.sm-medicare-guide__progress {
  margin-bottom: var(--sm-space-8);
}

.sm-medicare-guide__progress p {
  margin: 0 0 var(--sm-space-2);
  color: var(--sm-muted);
  font-size: var(--sm-text-xs);
  font-weight: 800;
}

.sm-medicare-guide__progress progress {
  width: 100%;
  height: 10px;
  overflow: hidden;
  border: 0;
  border-radius: var(--sm-radius-full);
  accent-color: var(--sm-orange);
}

.sm-medicare-guide__progress progress::-webkit-progress-bar {
  background: var(--sm-purple-lt);
}

.sm-medicare-guide__progress progress::-webkit-progress-value {
  background: var(--sm-orange);
}

.sm-medicare-guide__progress progress::-moz-progress-bar {
  background: var(--sm-orange);
}

.sm-medicare-guide__phase + .sm-medicare-guide__phase {
  margin-top: var(--sm-space-16);
  padding-top: var(--sm-space-16);
  border-top: 2px solid var(--sm-border-lt);
}

.sm-medicare-guide.is-enhanced .sm-medicare-guide__phase[hidden] {
  display: none;
}

.sm-medicare-guide__phase-heading {
  margin-bottom: var(--sm-space-8);
}

.sm-medicare-guide__phase-heading h2 {
  margin: 0;
  color: var(--sm-purple);
  font-family: var(--sm-font-head);
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 800;
  line-height: 1.15;
}

.sm-medicare-guide__phase-heading > p:last-child {
  margin: var(--sm-space-3) 0 0;
  color: var(--sm-body);
  font-size: var(--sm-text-base);
  line-height: 1.6;
}

.sm-medicare-guide__steps {
  display: grid;
  gap: var(--sm-space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sm-medicare-guide__step {
  overflow: hidden;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-lg);
  background: var(--sm-white);
  box-shadow: var(--sm-shadow-sm);
}

.sm-medicare-guide__step-copy {
  display: grid;
  align-items: start;
  gap: var(--sm-space-4);
  grid-template-columns: 42px minmax(0, 1fr);
  padding: var(--sm-space-6);
}

.sm-medicare-guide__step-number {
  display: inline-grid;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--sm-purple-lt);
  color: var(--sm-purple);
  font-family: var(--sm-font-head);
  font-size: var(--sm-text-sm);
  font-weight: 800;
  place-items: center;
}

.sm-medicare-guide__step h3 {
  margin: 2px 0 0;
  color: var(--sm-purple);
  font-family: var(--sm-font-head);
  font-size: var(--sm-text-lg);
  font-weight: 800;
  line-height: 1.25;
}

.sm-medicare-guide__step-copy p {
  margin: var(--sm-space-3) 0 0;
  color: var(--sm-body);
  font-size: var(--sm-text-base);
  line-height: 1.6;
}

.sm-medicare-guide__step-copy p.sm-medicare-guide__tip {
  padding: var(--sm-space-3) var(--sm-space-4);
  border-left: 4px solid var(--sm-orange);
  background: var(--sm-orange-lt);
  font-size: var(--sm-text-sm);
}

.sm-medicare-guide figure {
  margin: 0;
  padding: var(--sm-space-5);
  border-top: 1px solid var(--sm-border-lt);
  background: var(--sm-purple-lter);
}

.sm-medicare-guide figure a {
  display: block;
  overflow: hidden;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius);
  background: var(--sm-white);
}

.sm-medicare-guide figure img {
  display: block;
  width: 100%;
  height: auto;
}

.sm-medicare-guide figcaption {
  margin-top: var(--sm-space-2);
  color: var(--sm-muted);
  font-size: var(--sm-text-xs);
  text-align: center;
}

.sm-medicare-guide__phase-actions {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--sm-space-3);
  margin-top: var(--sm-space-8);
}

.sm-medicare-guide__phase-actions > :only-child {
  margin-left: auto;
}

.sm-medicare-guide__disclosure {
  margin-top: var(--sm-space-12);
  padding-top: var(--sm-space-6);
  border-top: 1px solid var(--sm-border);
}

.sm-medicare-guide__disclosure p {
  margin: 0;
  color: var(--sm-muted);
  font-size: var(--sm-text-xs);
  line-height: 1.55;
}

.sm-medicare-guide__disclosure p + p {
  margin-top: var(--sm-space-2);
}

/* Print-only duplicate of the theme footer's legal block. On screen the real
   footer is still there, so showing it here would repeat itself. */
.sm-medicare-guide__legal {
  display: none;
}

@media (max-width: 900px) {
  .sm-medicare-guide__layout {
    grid-template-columns: 1fr;
  }

  .sm-medicare-guide__outline {
    position: static;
  }

  .sm-medicare-guide__outline ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .sm-medicare-guide {
    padding-top: var(--sm-space-12);
    padding-bottom: var(--sm-space-12);
  }

  .sm-medicare-guide__outline ol {
    grid-template-columns: 1fr;
  }

  .sm-medicare-guide__hero-actions,
  .sm-medicare-guide__phase-actions {
    flex-direction: column;
  }

  .sm-medicare-guide__hero-actions > *,
  .sm-medicare-guide__phase-actions > * {
    width: 100%;
  }

  .sm-medicare-guide__phase-actions > :only-child {
    margin-left: 0;
  }

  .sm-medicare-guide__step-copy {
    grid-template-columns: 36px minmax(0, 1fr);
    padding: var(--sm-space-5);
  }

  .sm-medicare-guide__step-number {
    width: 36px;
    height: 36px;
  }

  .sm-medicare-guide figure {
    padding: var(--sm-space-3);
  }
}

@media print {
  /* The handout is the guide, not the website around it. Hide every element
     that is neither the guide, inside it, nor an ancestor of it, which drops
     the header, nav, and footer without needing theme-specific selectors.
     Browsers without :has() simply print the chrome as before. */
  body:has(.sm-medicare-guide)
    *:not(:has(.sm-medicare-guide)):not(.sm-medicare-guide):not(.sm-medicare-guide *) {
    display: none !important;
  }

  .sm-medicare-guide {
    max-width: none;
    padding: 0;
  }

  .sm-medicare-guide__hero-actions,
  .sm-medicare-guide__outline,
  .sm-medicare-guide__progress,
  .sm-medicare-guide__phase-actions,
  .sm-medicare-guide figcaption {
    display: none !important;
  }

  /* Suppressing the site footer would take the CMS/TPMO copy with it, so the
     guide carries its own copy of that legal block on paper only. */
  .sm-medicare-guide__legal {
    display: block !important;
    margin-top: var(--sm-space-3);
  }

  .sm-medicare-guide__legal p {
    margin: 0 0 var(--sm-space-2);
    font-size: 8pt;
    line-height: 1.4;
  }

  .sm-medicare-guide__hero {
    margin-bottom: var(--sm-space-6);
  }

  .sm-medicare-guide__privacy {
    margin-top: var(--sm-space-4);
  }

  .sm-medicare-guide__layout {
    display: block;
  }

  .sm-medicare-guide.is-enhanced .sm-medicare-guide__phase[hidden] {
    display: block !important;
  }

  .sm-medicare-guide__phase {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    break-before: page;
  }

  /* Section 1 shares the opening page instead of leaving the hero alone. */
  .sm-medicare-guide__phase:first-of-type {
    break-before: auto;
  }

  /* A section title stranded at the foot of a page cost four sheets, so keep
     it with the first instruction it introduces. */
  .sm-medicare-guide__phase-heading {
    margin-bottom: var(--sm-space-5);
    break-after: avoid;
    break-inside: avoid;
  }

  .sm-medicare-guide__steps {
    gap: var(--sm-space-5);
  }

  /* With the screenshot capped at 4in an instruction and its image always fit
     one sheet, so keeping the step whole no longer risks the blank pages that
     an unbounded image used to cause. */
  .sm-medicare-guide__step {
    border-radius: 0;
    box-shadow: none;
    break-inside: avoid;
  }

  .sm-medicare-guide__step-copy {
    padding: var(--sm-space-3) 0;
    break-inside: avoid;
    break-after: avoid;
  }

  .sm-medicare-guide__step-copy p {
    margin-top: var(--sm-space-2);
    font-size: 11pt;
    line-height: 1.45;
  }

  .sm-medicare-guide figure {
    padding: 0;
    border-top: 0;
    background: none;
    break-before: avoid;
    break-inside: avoid;
  }

  .sm-medicare-guide figure img {
    width: auto;
    max-width: 100%;
    /* Bounded so a section title, an instruction, and its screenshot all
       share one sheet. */
    max-height: 4in;
    margin: 0 auto;
    object-fit: contain;
  }
}