/* Scoped to .pf-plan-group throughout — same reason as templates/results.css
   and questionnaire/plan-finder.css: this component is embedded in WP pages
   alongside the theme's Elementor Kit CSS, which sets things like
   ".elementor-kit-52 h2 { color: ...; font-size: 40px; }" and
   ".elementor-kit-52 button { background-color: ...; }". Those are class+tag
   selectors that outrank a single-class selector regardless of load order, so
   every rule below is written as ".pf-plan-group .whatever" (two classes) to
   stay ahead of them. No :root, no bare element selectors. */

.pf-plan-group {
  /* Sampled from the Plan Landing Page comp rather than guessed, so the page
     sits next to the rest of the site's artwork without drifting. The mint is
     the hero wash AND the counties panel; the sky blue is every primary
     action AND the sidebar card's heading. */
  --pf-mint: #a4f9c8;
  --pf-mint-deep: #6fb1a4;
  --pf-mint-pale: #edfef4;
  --pf-sky: #77c8ff;
  --pf-sky-deep: #4fb0f2;
  /* Same value as --pf-green in questionnaire/plan-finder.css and
     results.css. The card headings in the "other ways to enroll" band are the
     only place this page reaches for it, and it stays the site's one green. */
  --pf-green: #34d679;
  --pf-navy: #0a293e;
  --pf-white: #ffffff;
  --pf-rule: #dfe6eb;
  --pf-card-bg: #edf8ff;
  --pf-page-bg: #ffffff;

  /* One radius for every card-shaped thing on the page — plan cards, counties
     panel, tables, sidebar card and the highlights bar all share it. */
  --pf-radius: 1rem;

  box-sizing: border-box;
  background-color: var(--pf-page-bg);
  /* The theme's nav is fixed and semi-transparent, so it floats over whatever
     is beneath it instead of pushing it down like a normal header — without
     this the hero headline loads out from under it. */
  padding-top: 107px;
  font-family: "niveau-grotesk", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--pf-navy);
}

.pf-plan-group *,
.pf-plan-group *::before,
.pf-plan-group *::after {
  box-sizing: inherit;
  font-family: inherit !important;
}

/* hero */

/* Flat mint with the corner darkening toward teal, which is what the comp
   shows: the shift only happens in the bottom-right quadrant, so a radial
   anchored off-canvas past that corner reproduces it far more closely than a
   linear gradient across the whole band would. */
.pf-plan-group .pf-group-hero {
  background-color: var(--pf-mint);
  background-image: radial-gradient(120% 95% at 108% 118%, var(--pf-mint-deep) 0%, rgba(111, 177, 164, 0) 62%);
  padding: 7.25rem 1.5rem 8.5rem;
}

/* center: the photo runs at its own height and the copy sits centred against
   it. */
.pf-plan-group .pf-group-hero__shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3.5rem;
  max-width: 1072px;
  margin: 0 auto;
}

.pf-plan-group .pf-group-hero__copy {
  flex: 1 1 min(30rem, 100%);
}

/* Navy pill, not the uppercase micro-label this used to be. */
.pf-plan-group .pf-group-hero__eyebrow {
  display: inline-block;
  margin: 0 0 1.5rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: var(--pf-navy);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
  color: var(--pf-white);
}

.pf-plan-group .pf-group-hero__headline {
  margin: 0 0 1.75rem;
  font-size: clamp(2.25rem, 3.8vw, 3.25rem);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--pf-navy);
}

.pf-plan-group .pf-group-hero__body {
  max-width: 36rem;
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--pf-navy);
}

.pf-plan-group .pf-group-hero__body p {
  margin: 0 0 1rem;
}

.pf-plan-group .pf-group-hero__body p:last-child {
  margin-bottom: 0;
}

/* Hours block between the body copy and the buttons. Set tighter than the
   body's 1.75 line-height on purpose: these are two label-and-value lines that
   read as one stanza, not prose, and at the body's rhythm they drift apart.
   Each line is its own <p> rather than one <p> full of <br>, so the sheet can
   stay plain text — see the split in templates/template-plan-group.php. */
.pf-plan-group .pf-group-hero__hours {
  max-width: 36rem;
  margin-top: 1.75rem;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--pf-navy);
}

.pf-plan-group .pf-group-hero__hours-heading {
  margin: 0 0 0.25rem;
  font-weight: 700;
}

.pf-plan-group .pf-group-hero__hours-line {
  margin: 0;
}

.pf-plan-group .pf-group-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}

.pf-plan-group .pf-group-hero__media {
  flex: 0 1 27rem;
}

.pf-plan-group .pf-group-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 0.5rem;
}

/* buttons */

.pf-plan-group .pf-group-btn {
  display: inline-block;
  padding: 1.05rem 2rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pf-plan-group .pf-group-btn--ghost {
  border-color: var(--pf-navy);
  background: transparent;
  color: var(--pf-navy);
}

.pf-plan-group .pf-group-btn--ghost:hover,
.pf-plan-group .pf-group-btn--ghost:focus {
  background: var(--pf-navy);
  color: var(--pf-white);
}

.pf-plan-group .pf-group-btn--solid {
  border-color: var(--pf-sky);
  background: var(--pf-sky);
  color: var(--pf-navy);
}

.pf-plan-group .pf-group-btn--solid:hover,
.pf-plan-group .pf-group-btn--solid:focus {
  border-color: var(--pf-sky-deep);
  background: var(--pf-sky-deep);
  color: var(--pf-navy);
}

.pf-plan-group .pf-group-btn--block {
  display: block;
  width: 100%;
}

/* navy highlight bar — a rounded card pulled up so it straddles the hero's
   bottom edge, not a full-bleed band */

.pf-plan-group .pf-group-highlights {
  padding: 0 1.5rem;
}

.pf-plan-group .pf-group-highlights__shell {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1.5rem;
  max-width: 1072px;
  margin: -4.375rem auto 0;
  padding: 2.25rem 1.5rem;
  border-radius: var(--pf-radius);
  background: var(--pf-navy);
}

.pf-plan-group .pf-group-highlight {
  padding: 0 1.5rem;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  text-align: center;
}

.pf-plan-group .pf-group-highlight:first-child {
  border-left: 0;
}

.pf-plan-group .pf-group-highlight__value {
  margin: 0 0 0.35rem;
  font-size: clamp(1.75rem, 2.9vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--pf-white);
}

.pf-plan-group .pf-group-highlight__label {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--pf-white);
}

.pf-plan-group .pf-group-highlight__note {
  margin: 0.2rem 0 0;
  font-size: 0.9rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
  color: var(--pf-white);
}

/* layout */

/* 1120 = the 1072 shell the hero and highlights cards use, plus this grid's
   own 1.5rem gutters — so the sidebar's left edge lands on the highlights
   card's left edge rather than 24px inside it. */
.pf-plan-group .pf-group-layout {
  display: grid;
  grid-template-columns: 15.5rem minmax(0, 1fr);
  gap: 7.5rem;
  max-width: 1120px;
  margin: 0 auto;
  padding: 5.5rem 1.5rem 4rem;
}

/* A sticky element travels inside its PARENT box, so .pf-group-sidebar has to
   keep grid's default stretch to the full row height. Collapsing it to its own
   content (align-self: start) leaves zero travel room and sticky silently does
   nothing — it still computes as position: sticky, it just never moves, which
   makes it look like the property was never applied.

   The offset is the theme's fixed header plus breathing room, not a bare
   1.5rem — at 1.5rem the Enroll card pins behind the header instead of
   below it. --pf-sticky-top is that header measured at runtime by
   plan-group.js, because it is a different height on narrow than wide;
   same calc the anchor targets use for scroll-margin-top further down. */
.pf-plan-group .pf-group-sidebar__inner {
  position: sticky;
  top: calc(var(--pf-sticky-top, 5.25rem) + 1.5rem);
}

.pf-plan-group .pf-group-sidebar__card {
  padding: 1.35rem;
  border: 0;
  border-radius: var(--pf-radius);
  background: var(--pf-navy);
}

.pf-plan-group .pf-group-sidebar__title {
  margin: 0 0 1.35rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.55;
  color: var(--pf-sky);
}

/* sidebar nav */

.pf-plan-group .pf-group-nav {
  margin-top: 2rem;
}

/* The dropdown trigger only exists on the narrow layout — see the media query
   at the foot of this file. It ships with the hidden attribute, so this rule
   has to beat the display it is given there. */
.pf-plan-group .pf-group-nav__toggle {
  display: none;
}

.pf-plan-group .pf-group-nav__toggle[hidden] {
  display: none;
}

.pf-plan-group .pf-group-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* No rule above the actions group in the comp — the gap does the separating. */
.pf-plan-group .pf-group-nav__list--actions {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.pf-plan-group .pf-group-nav__link {
  display: block;
  width: 100%;
  padding: 0.85rem 0;
  border: 0;
  background: transparent;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 0.22em;
  color: var(--pf-navy);
  cursor: pointer;
}

.pf-plan-group .pf-group-nav__link--icon {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
}

/* The icon sits outside the underline, so it's the text span that carries it. */
.pf-plan-group .pf-group-nav__link--icon .pf-group-nav__text {
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.pf-plan-group .pf-group-nav__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  color: var(--pf-navy);
}

/* "Back to Top" is the one nav item the comp leaves un-underlined, and it's
   set apart from the list above it. */
.pf-plan-group .pf-group-nav__link--plain .pf-group-nav__text {
  text-decoration: none;
}

.pf-plan-group .pf-group-nav__item--top {
  margin-top: 1.5rem;
}

.pf-plan-group .pf-group-nav__link:hover,
.pf-plan-group .pf-group-nav__link:focus {
  color: var(--pf-navy);
  opacity: 0.7;
}

/* Print is the only nav item that's a <button>, so the theme's global button
   styling reaches it. The base rule above clears that at rest but not in the
   other states, which left hover painting a filled pill over what should read
   as a plain link — same guard the dropdown toggle needs further down. */
.pf-plan-group .pf-group-nav__link--button,
.pf-plan-group .pf-group-nav__link--button:hover,
.pf-plan-group .pf-group-nav__link--button:focus,
.pf-plan-group .pf-group-nav__link--button:active {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--pf-navy);
}

/* The comp draws every nav link the same, so scrollspy marks the current
   section on the underline rather than by restyling the link — mint, and
   thicker, which reads as "you are here" without breaking the row. */
.pf-plan-group .pf-group-nav__link--active {
  color: var(--pf-navy);
  text-decoration-color: var(--pf-mint-deep);
  text-decoration-thickness: 3px;
}

/* main column */

.pf-plan-group .pf-group-pill {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  margin: 0 0 2rem;
  padding: 1.45rem 2.3rem;
  border-radius: 999px;
  background: var(--pf-navy);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--pf-white);
}

/* currentColor is the disc; the tick inside the SVG is its own blue. */
.pf-plan-group .pf-group-pill__check {
  display: inline-flex;
  flex: none;
  color: var(--pf-white);
}

.pf-plan-group .pf-group-heading {
  margin: 0 0 1.5rem;
  font-size: clamp(1.75rem, 2.9vw, 2.25rem);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--pf-navy);
}

.pf-plan-group .pf-group-body {
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--pf-navy);
}

.pf-plan-group .pf-group-body p {
  margin: 0 0 1.5rem;
}

.pf-plan-group .pf-group-body p:last-child {
  margin-bottom: 0;
}

/* editor-only diagnostic — deliberately unlike the rest of the page, so it
   can't be mistaken for content if it ever renders to the wrong audience */

.pf-plan-group .pf-group-admin-notice {
  margin: 2rem 0;
  padding: 1rem 1.25rem;
  border: 1px solid #f0c36d;
  border-left: 4px solid #dba617;
  border-radius: 0.4rem;
  background: #fcf6e5;
  font-size: 0.85rem;
  line-height: 1.55;
  color: #4a3a12;
}

.pf-plan-group .pf-group-admin-notice p {
  margin: 0 0 0.6rem;
}

.pf-plan-group .pf-group-admin-notice p:last-child {
  margin-bottom: 0;
}

/* plan cards */

/* Two per row, not as many as fit: with three plans the comp puts the third on
   its own row underneath rather than squeezing all three across. */
.pf-plan-group .pf-group-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 2.5rem 0;
  scroll-margin-top: calc(var(--pf-sticky-top, 5.25rem) + 1.5rem);
}

.pf-plan-group .pf-group-card {
  display: flex;
  flex-direction: column;
  padding: 1.35rem;
  border: 0;
  border-radius: var(--pf-radius);
  background: var(--pf-card-bg);
}

.pf-plan-group .pf-group-card__tag {
  display: block;
  margin: 0 0 1.15rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: var(--pf-navy);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: var(--pf-white);
}

.pf-plan-group .pf-group-card__type {
  margin: 0 0 0.15rem;
  font-size: 1rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pf-navy);
}

.pf-plan-group .pf-group-card__name {
  margin: 0 0 0.75rem;
  font-size: 1.75rem;
  line-height: 1.15;
  font-weight: 400;
  color: var(--pf-navy);
}

.pf-plan-group .pf-group-card__best {
  margin: 0 0 1.75rem;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--pf-navy);
}

.pf-plan-group .pf-group-card__enroll {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: auto;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--pf-navy);
}

.pf-plan-group .pf-group-card__enroll-arrow {
  font-size: 1.15rem;
  letter-spacing: 0;
  line-height: 1;
}

/* The label carries the hover underline, not the link: text-decoration set on
   a flex container is drawn per flex item, which put a second stub of underline
   under the arrow. */
.pf-plan-group .pf-group-card__enroll:hover .pf-group-card__enroll-text,
.pf-plan-group .pf-group-card__enroll:focus .pf-group-card__enroll-text {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* counties */

.pf-plan-group .pf-group-counties {
  margin: 2.5rem 0;
}

.pf-plan-group .pf-group-counties__box {
  padding: 1.75rem;
  border-radius: var(--pf-radius);
  background: var(--pf-mint);
}

.pf-plan-group .pf-group-counties__heading {
  margin: 0 0 1.25rem;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--pf-navy);
}

/* Three balanced columns from one flat list — the browser splits it, so the
   list stays correct at any length and collapses cleanly on narrow screens. */
.pf-plan-group .pf-group-counties__list {
  columns: 3;
  column-gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pf-plan-group .pf-group-counties__list li {
  break-inside: avoid;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--pf-navy);
}

/* Under the panel and right-aligned, outside the green. */
.pf-plan-group .pf-group-counties__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 1.25rem;
  margin-top: 0.9rem;
}

.pf-plan-group .pf-group-counties__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--pf-navy);
  text-decoration: none;
}

.pf-plan-group .pf-group-counties__link span:first-child {
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.pf-plan-group .pf-group-counties__arrow {
  line-height: 1;
}

/* comparison tables */

/* The toggle bar and the table's own header row are one continuous navy block
   in the comp, so the panel contributes no border or background of its own and
   thead carries the same navy as the button above it. */
.pf-plan-group .pf-table-section {
  margin: 1.5rem 0;
  border-radius: var(--pf-radius);
  overflow: hidden;
  scroll-margin-top: calc(var(--pf-sticky-top, 5.25rem) + 1.5rem);
}

.pf-plan-group .pf-table-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1.15rem 3.5rem;
  border: 0;
  border-radius: 0;
  background: var(--pf-navy);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pf-white);
  cursor: pointer;
}

/* Inset hairline between the title and the column headings. It belongs to the
   open state only — collapsed, the bar is a plain pill of navy. */
.pf-plan-group .pf-table-toggle::after {
  content: "";
  position: absolute;
  right: 1.5rem;
  bottom: 0;
  left: 1.5rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.28);
}

.pf-plan-group .pf-table-toggle[aria-expanded="false"]::after {
  display: none;
}

/* The theme paints button:hover, :focus AND :active dark green. Restating navy
   for the two that aren't rollovers has to come first — same specificity as the
   rollover rules below, so source order is what decides between them. Without
   it a click leaves the bar stuck on the theme's green once the pointer moves
   away, because the button keeps focus. */
.pf-plan-group .pf-table-toggle:focus,
.pf-plan-group .pf-table-toggle:active {
  background: var(--pf-navy);
  color: var(--pf-white);
}

/* Mint is the counties panel's fill, so the page rolls over to one colour.
   Hover only — tying the fill to :focus-visible as well made the bar stay mint
   after a click in some browsers, since whether a click counts as "visible"
   focus is a per-browser heuristic. Keyboard focus gets a ring instead. */
.pf-plan-group .pf-table-toggle:hover {
  background: var(--pf-mint);
  color: var(--pf-navy);
}

.pf-plan-group .pf-table-toggle:hover::after {
  background: rgba(10, 41, 62, 0.25);
}

.pf-plan-group .pf-table-toggle:focus-visible {
  outline: 3px solid var(--pf-mint);
  outline-offset: -3px;
}

.pf-plan-group .pf-table-toggle__icon {
  position: absolute;
  top: 50%;
  right: 1.5rem;
  display: inline-flex;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
}

.pf-plan-group .pf-table-toggle[aria-expanded="false"] .pf-table-toggle__icon {
  transform: translateY(-50%) rotate(-90deg);
}

.pf-plan-group .pf-table-panel {
  border: 0;
  background: var(--pf-white);
}

/* Wide tables scroll here rather than pushing the page sideways. */
.pf-plan-group .pf-table-scroll {
  overflow-x: auto;
}

.pf-plan-group .pf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}

.pf-plan-group .pf-table th,
.pf-plan-group .pf-table td {
  padding: 1rem 1.1rem;
  text-align: center;
  vertical-align: middle;
  color: var(--pf-navy);
}

/* Column headings continue the navy block above them. */
.pf-plan-group .pf-table thead th {
  padding: 1.5rem 1.1rem;
  background: var(--pf-navy);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--pf-white);
}

.pf-plan-group .pf-table .pf-table__corner {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
  text-align: left;
  color: var(--pf-white);
}

/* The label column is a tinted band running the height of the table; the value
   columns are white and divided from each other by hairlines. */
.pf-plan-group .pf-table tbody th[scope="row"] {
  min-width: 10rem;
  width: 22%;
  background: var(--pf-mint-pale);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
}

/* Explicit white, because the theme zebra-stripes td at rgba(128,128,128,.07)
   and the comp's value cells are all one colour. */
.pf-plan-group .pf-table tbody td {
  border-left: 1px solid var(--pf-rule);
  background: var(--pf-white);
  line-height: 1.4;
}

.pf-plan-group .pf-table tbody td:first-of-type {
  border-left: 0;
}

.pf-plan-group .pf-table tbody tr + tr th[scope="row"],
.pf-plan-group .pf-table tbody tr + tr td {
  border-top: 1px solid var(--pf-rule);
}

.pf-plan-group .pf-table__download {
  font-weight: 400;
  color: var(--pf-navy);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* disclaimer */

.pf-plan-group .pf-group-disclaimer {
  margin-top: 2.5rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--pf-navy);
}

.pf-plan-group .pf-group-disclaimer p {
  margin: 0 0 1rem;
}

/* other ways to enroll */

/* A full-bleed band below the layout grid rather than a block inside the main
   column: the three routes are the page's, not the plan column's, which is
   also why the sidebar nav doesn't list it. The band's own radius is larger
   than --pf-radius — in the comp its top corners are noticeably softer than
   the cards sitting on it, and that difference is what makes the two read as
   a surface and the things standing on it. */
.pf-plan-group .pf-group-enroll-other {
  padding: 4rem 1.5rem 5rem;
  border-radius: 2rem 2rem 0 0;
  background: var(--pf-sky);
}

/* Same 1072 shell as the hero and the highlights bar, so the outer cards line
   up with the plan cards above them. */
.pf-plan-group .pf-group-enroll-other__shell {
  max-width: 1072px;
  margin: 0 auto;
}

.pf-plan-group .pf-group-enroll-other__heading {
  margin: 0 0 2.5rem;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--pf-navy);
}

/* auto-fit rather than a fixed 3: at 1072 the three sit in a row, and they
   drop to two and then one on their own as the band narrows, without this
   section needing a breakpoint of its own. */
.pf-plan-group .pf-group-enroll-other__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem;
}

/* The photo is the card's top edge with no padding between the two, so the
   card clips it to the shared radius rather than the images each carrying
   their own rounded corners. */
.pf-plan-group .pf-group-enroll-other__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--pf-radius);
  background: var(--pf-navy);
}

/* 344x181 is medicare-gov.jpg at its native size, so the logo lands in the
   frame uncropped and the two photographs are cut to match it. */
.pf-plan-group .pf-group-enroll-other__media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 344 / 181;
  object-fit: cover;
}

/* byphone.png was exported with the comp's sky band under the photograph —
   the picture stops at y=278 of 421 — so its frame is taken off the top. A
   centred crop would pull a strip of that blue in along the bottom edge. */
.pf-plan-group .pf-group-enroll-other__media--top {
  object-position: center top;
}

.pf-plan-group .pf-group-enroll-other__media--center {
  object-position: center;
}

.pf-plan-group .pf-group-enroll-other__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.35rem;
}

.pf-plan-group .pf-group-enroll-other__title {
  margin: 0 0 0.75rem;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--pf-green);
}

.pf-plan-group .pf-group-enroll-other__text {
  margin: 0 0 1.75rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--pf-white);
}

/* margin-top: auto pins the link to the foot of its card, so all three sit on
   one line however many lines of address or body copy stand above them — the
   mail card runs to five and the other two to two. */
.pf-plan-group .pf-group-enroll-other__link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  color: var(--pf-white);
}

.pf-plan-group .pf-group-enroll-other__link:hover,
.pf-plan-group .pf-group-enroll-other__link:focus {
  color: var(--pf-white);
}

/* The label carries the underline rather than the link, same reason as the
   plan card's Enroll Now: on a flex container the decoration is drawn per flex
   item, which leaves a second detached stub under the arrow. */
.pf-plan-group .pf-group-enroll-other__link-text {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.pf-plan-group .pf-group-enroll-other__link:hover .pf-group-enroll-other__link-text,
.pf-plan-group .pf-group-enroll-other__link:focus .pf-group-enroll-other__link-text {
  text-decoration: none;
}

.pf-plan-group .pf-group-enroll-other__arrow {
  font-size: 1.05rem;
  line-height: 1;
}

/* responsive */

@media (max-width: 1100px) {
  .pf-plan-group .pf-group-layout {
    gap: 3.5rem;
  }
}

@media (max-width: 900px) {
  .pf-plan-group .pf-group-hero {
    padding: 3.5rem 1.25rem 7rem;
  }


  .pf-plan-group .pf-group-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    padding: 3.5rem 1.25rem 3rem;
  }

  /* Un-stick above the main column: pinned to the top of a full-width block
     it would cover the content it links to. */
  .pf-plan-group .pf-group-sidebar__inner {
    position: static;
  }

  /* --- section nav as a dropdown -------------------------------------------
     Full width the link list is a tall wall between the intro and the plans,
     so it collapses behind a trigger. Once scrolled past, the trigger pins
     below the theme's fixed header and stays there — plan-group.js adds
     is-pinned and measures --pf-sticky-top. */

  .pf-plan-group .pf-group-nav {
    margin-top: 1.5rem;
  }

  .pf-plan-group .pf-group-nav__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem 1.5rem;
    border: 0;
    border-radius: 999px;
    background: var(--pf-navy);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    color: var(--pf-white);
    cursor: pointer;
  }

  .pf-plan-group .pf-group-nav__toggle[hidden] {
    display: none;
  }

  .pf-plan-group .pf-group-nav__toggle:hover,
  .pf-plan-group .pf-group-nav__toggle:focus,
  .pf-plan-group .pf-group-nav__toggle:active {
    background: var(--pf-navy);
    color: var(--pf-white);
  }

  .pf-plan-group .pf-group-nav__toggle-icon {
    display: inline-flex;
    flex: none;
    transition: transform 0.2s ease;
  }

  .pf-plan-group .pf-group-nav__toggle[aria-expanded="false"] .pf-group-nav__toggle-icon {
    transform: rotate(-90deg);
  }

  /* Only indented while it hangs off a trigger; with no JS the toggle never
     appears and the list sits flush, exactly as it does on desktop. */
  .pf-plan-group .pf-group-nav__toggle:not([hidden]) ~ .pf-group-nav__panel {
    padding: 0.5rem 1.5rem 0.25rem;
  }

  .pf-plan-group .pf-group-nav.is-pinned {
    position: fixed;
    top: var(--pf-sticky-top, 5.25rem);
    right: 0;
    left: 0;
    z-index: 90;
    margin: 0;
    padding: 0.75rem 1.25rem;
    background: var(--pf-white);
    box-shadow: 0 8px 22px rgba(10, 41, 62, 0.16);
  }

  .pf-plan-group .pf-group-nav.is-pinned .pf-group-nav__panel {
    max-height: calc(100vh - var(--pf-sticky-top, 5.25rem) - 7rem);
    overflow-y: auto;
  }


  .pf-plan-group .pf-group-highlights {
    padding: 0 1.25rem;
  }

  .pf-plan-group .pf-group-counties__list {
    columns: 2;
  }

  /* Stacked, so the rules between buckets run across rather than down. */
  .pf-plan-group .pf-group-highlights__shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .pf-plan-group .pf-group-highlight {
    padding: 1.25rem 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
  }

  .pf-plan-group .pf-group-highlight:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .pf-plan-group .pf-group-highlight:last-child {
    padding-bottom: 0;
  }

  /* The cards reflow on their own — the band just stops eating the width the
     rest of the page has already given up at this breakpoint. */
  .pf-plan-group .pf-group-enroll-other {
    padding: 3rem 1.25rem 3.5rem;
  }
}

@media (max-width: 640px) {
  .pf-plan-group .pf-group-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .pf-plan-group .pf-group-hero__actions .pf-group-btn {
    width: 100%;
  }

  .pf-plan-group .pf-group-counties__list {
    columns: 1;
  }

  .pf-plan-group .pf-group-pill {
    padding: 1rem 1.35rem;
    font-size: 1.1rem;
  }

  .pf-plan-group .pf-table thead th {
    font-size: 1.1rem;
  }
}

/* print — the sidebar is navigation, the hero photo is decoration, and every
   table has to be open regardless of what the visitor collapsed on screen. */

@media print {
  .pf-plan-group .pf-group-sidebar,
  .pf-plan-group .pf-group-hero__media,
  .pf-plan-group .pf-group-enroll-other__media,
  .pf-plan-group .pf-group-hero__actions,
  .pf-plan-group .pf-table-toggle__icon {
    display: none;
  }

  .pf-plan-group .pf-group-layout {
    display: block;
    padding: 0;
  }

  .pf-plan-group .pf-table-panel[hidden] {
    display: block;
  }

  .pf-plan-group .pf-table-section,
  .pf-plan-group .pf-group-cards,
  .pf-plan-group .pf-group-counties,
  .pf-plan-group .pf-group-enroll-other__card {
    break-inside: avoid;
  }

  /* The enroll band is white type on navy, so without the fill it prints as
     white on white — the phone number and the mailing address are the two
     things on this page most likely to be wanted on paper. */
  .pf-plan-group .pf-group-hero,
  .pf-plan-group .pf-group-highlights__shell,
  .pf-plan-group .pf-group-sidebar__card,
  .pf-plan-group .pf-table-toggle,
  .pf-plan-group .pf-table thead th,
  .pf-plan-group .pf-group-enroll-other,
  .pf-plan-group .pf-group-enroll-other__card {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}