/*
 * Ameriplan site styles.
 *
 * Tokens are lifted from the approved template so the demo matches it: navy #01275c carries the
 * brand, red #e6092c is reserved for primary action and focus, and everything else is a neutral
 * derived from those two. Hand-written rather than Tailwind because the site has no Node build;
 * the .NET app serves this file directly.
 *
 * Mobile-first: every layout rule below starts single-column and widens at a breakpoint.
 *
 * Descendant paragraph rules are written as "X p:not([class])". A bare "X p" is one class plus
 * an element, which outranks a single-class rule like .eyebrow and silently greys it out - that
 * bug has bitten this stylesheet several times.
 */

:root {
  --background: #fff;
  --foreground: #01275c;
  --card: #fff;
  --secondary: #f3f6f9;
  --muted: #f7f8fa;
  --muted-foreground: #667085;
  --accent: #eef3f8;
  --primary: #01275c;
  --primary-foreground: #fff;
  --action: #e6092c;
  --action-hover: #c40724;
  --border: #e2e7ed;
  --input: #d9e0e8;
  --ring: #e6092c;
  --radius: 0.875rem;
  --radius-sm: 0.5rem;

  --shadow-sm: 0 1px 2px rgb(1 39 92 / 0.06), 0 1px 3px rgb(1 39 92 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(1 39 92 / 0.08), 0 2px 4px -2px rgb(1 39 92 / 0.06);
  --shadow-lg: 0 10px 25px -5px rgb(1 39 92 / 0.12), 0 8px 10px -6px rgb(1 39 92 / 0.08);

  --container: 1180px;
  /* Tall enough for the 82px brand mark without cropping it. */
  --header-height: 5.75rem;

  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor targets clear the sticky header instead of hiding behind it. */
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--foreground);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); }

p { margin: 0 0 1rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

img { max-width: 100%; height: auto; display: block; }

/* Visible keyboard focus everywhere, since the brand red is the focus colour. */
:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--primary);
  color: var(--primary-foreground);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Layout ---------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (min-width: 640px) {
  .container { padding-inline: 1.5rem; }
}

.section { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.section--muted { background: var(--muted); }
.section--accent { background: var(--accent); }
.section--navy { background: var(--primary); color: var(--primary-foreground); }

/* A card keeps its own pale background inside a navy section, so it has to keep its own text
   colour too. Without this it inherits the section's white and anything that does not set a
   colour explicitly renders white on white - which is exactly how the tenure figures on
   /opportunity disappeared. */
.section--navy .card { color: var(--foreground); }

.section__head { max-width: 42rem; margin-bottom: 2rem; }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head p:not([class]) { color: var(--muted-foreground); font-size: 1.05rem; }
.section--navy .section__head p:not([class]) { color: rgb(255 255 255 / 0.8); }

/* Metrics copied from the template's .eyebrow: 12px, weight 850, .115em tracking, 18px below. */
.eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.115em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--action);
  margin-bottom: 18px;
}
.section--navy .eyebrow { color: #ffb3c0; }

.grid { display: grid; gap: 1.25rem; }

/* Plan cards size themselves and sit centred, rather than filling a fixed column count. With a
   three-column grid and two memberships the pair hugged the left with a hole on the right; this
   centres whatever number of plans there are, and keeps a card readable rather than stretching
   two of them across the full container. */
.plan-grid {
  display: grid;
  gap: 1.25rem;
  justify-content: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
  .plan-grid { grid-template-columns: repeat(auto-fit, minmax(0, 23rem)); }
}
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 880px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 640px) and (max-width: 879px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Buttons ---------- */

/* The template uses 9px rounded rectangles at 48px tall, not pills. 48px also clears the
   44px minimum touch target. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.6875rem 1.375rem;
  border: 1px solid transparent;
  border-radius: 9px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--action); color: #fff; }
.btn--primary:hover { background: var(--action-hover); }

.btn--navy { background: var(--primary); color: var(--primary-foreground); }
.btn--navy:hover { background: #02356f; }

.btn--outline { background: transparent; color: var(--primary); border-color: var(--input); }
.btn--outline:hover { background: var(--secondary); border-color: var(--primary); }

.section--navy .btn--outline { color: #fff; border-color: rgb(255 255 255 / 0.4); }
.section--navy .btn--outline:hover { background: rgb(255 255 255 / 0.12); }

.btn--block { width: 100%; }

/* A disabled action reads as unavailable rather than merely faded. */
.btn:disabled {
  background: var(--input);
  color: var(--muted-foreground);
  border-color: transparent;
  cursor: not-allowed;
}
.btn:disabled:active { transform: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---------- Header & navigation ---------- */

.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgb(255 255 255 / 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.header__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--header-height);
}

.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  margin-right: auto;
  flex: none;
}
/* Matches the template exactly: 206x82 on desktop, 173px wide below that. object-fit keeps the
   mark's proportions inside that box regardless of the PNG's own padding. */
.logo img {
  width: 173px;
  min-width: 173px;
  height: 74px;
  object-fit: contain;
}

@media (min-width: 900px) {
  .logo img { width: 206px; min-width: 206px; height: 82px; }
}

/* ---------- Utility bar ---------- */

.utility {
  background: var(--primary);
  color: rgb(255 255 255 / 0.85);
  font-size: 0.8125rem;
  line-height: 1.4;
}
.utility__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: 0.5rem;
}
.utility p { margin: 0; }
.utility ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.utility a { color: rgb(255 255 255 / 0.85); text-decoration: none; }
.utility a:hover { color: #fff; text-decoration: underline; }

/* The disclaimer alone on very small screens; the login links need the room. */
@media (max-width: 520px) {
  .utility__inner { justify-content: center; text-align: center; }
}

.nav { display: none; }

.nav__list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--foreground);
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}
.nav__link:hover { background: var(--secondary); }

/* "You are here": red label plus an underline bar, so the active section is obvious at a glance
   and not just a slightly different colour. */
.nav__link[aria-current="page"] {
  color: var(--action);
  font-weight: 700;
}
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: -0.15rem;
  height: 3px;
  border-radius: 3px;
  background: var(--action);
}
.nav__link { position: relative; }

.nav__item { position: relative; }

/* Link and chevron sit together but are separate controls. */
.nav__group { display: inline-flex; align-items: center; }
.nav__group .nav__link { padding-right: 0.25rem; }

.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--foreground);
  cursor: pointer;
}
.nav__toggle:hover { background: var(--secondary); color: var(--action); }

.nav__chevron { width: 0.8125rem; height: 0.8125rem; transition: transform 0.15s ease; }
.nav__toggle[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }

/* Desktop dropdown. Opens on hover and on keyboard focus, closes on Escape. */
.nav__panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 17rem;
  padding: 0.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  list-style: none;
  margin: 0;
  display: none;
}
.nav__panel[data-open="true"] { display: block; }

.nav__panel a {
  display: block;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
}
.nav__panel a:hover { background: var(--secondary); }
.nav__panel small {
  display: block;
  font-weight: 400;
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.header__actions { display: none; gap: 0.5rem; align-items: center; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  cursor: pointer;
  color: var(--primary);
}

@media (min-width: 1024px) {
  .nav { display: block; }
  .header__actions { display: flex; }
  .nav-toggle { display: none; }
}

/* Mobile drawer */
.mobile-nav {
  position: fixed;
  inset: var(--header-height) 0 0;
  z-index: 55;
  background: var(--background);
  overflow-y: auto;
  padding: 1rem 1rem 3rem;
  /* Hidden by default; [hidden] alone is overridden by the display below. */
  display: none;
}
.mobile-nav[data-open="true"] { display: block; }

@media (min-width: 1024px) {
  .mobile-nav[data-open="true"] { display: none; }
}

.mobile-nav__group { border-bottom: 1px solid var(--border); }
.mobile-nav__group:last-of-type { border-bottom: 0; }

.mobile-nav__link,
.mobile-nav__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.5rem;
  padding: 0.9375rem 0.25rem;
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--foreground);
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}

.mobile-nav__sub {
  list-style: none;
  margin: 0;
  padding: 0 0 0.75rem 0.25rem;
  display: none;
}
.mobile-nav__sub[data-open="true"] { display: block; }
.mobile-nav__sub a {
  display: block;
  padding: 0.625rem 0.5rem;
  border-left: 2px solid var(--border);
  text-decoration: none;
  font-size: 0.9375rem;
  color: var(--muted-foreground);
}
.mobile-nav__sub a:hover { color: var(--foreground); border-left-color: var(--action); }

.mobile-nav__actions {
  display: grid;
  gap: 0.75rem;
  padding-top: 1.25rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--border);
}

/* ---------- Disclaimer banner ---------- */

.disclaimer-bar {
  background: var(--primary);
  color: rgb(255 255 255 / 0.92);
  font-size: 0.8125rem;
  text-align: center;
  padding: 0.5rem 1rem;
  line-height: 1.4;
}

.disclaimer-note {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  line-height: 1.5;
}

/* ---------- Hero ---------- */

/*
 * Full-bleed photograph with the copy reversed out over it, matching the approved template.
 * The gradient is horizontal rather than a flat scrim so the left-hand text stays legible while
 * the family on the right of the photo remains visible.
 */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
  background-color: #011a3c;
  background-position: 62% 38%;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 620px;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #001430f0 0%, #001c41d4 44%, #001b3d47 74%, #00143021 100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
  width: 100%;
  padding-block: 3.5rem;
}

.hero__copy { max-width: 45rem; }

.hero .eyebrow { color: #ffb3c0; }

.hero__headline {
  color: #fff;
  margin: 0;
  font-size: clamp(2.6rem, 6.4vw, 5.5rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.055em;
  max-width: 44rem;
}
.hero__headline em { font-style: normal; color: #ff3152; }

.hero__subhead {
  color: #ffffffdb;
  max-width: 40rem;
  margin: 1.75rem 0 1.9rem;
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.62;
}

.hero__note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  font-size: 0.8125rem;
  color: #ffffffb8;
}
.hero__note svg { width: 1.0625rem; height: 1.0625rem; color: #ff3152; flex: none; }

/* The "30+ years" badge. Hidden on small screens, where it would crowd the headline. */
.hero__proof {
  display: none;
  flex-direction: column;
  align-self: flex-end;
  width: 12rem;
  margin-bottom: 1rem;
  padding: 1.3rem 1.45rem;
  background: #00193a9e;
  backdrop-filter: blur(10px);
  border: 1px solid #ffffff52;
  border-radius: 14px;
  box-shadow: 0 20px 50px #0003;
  flex: none;
}
.hero__proof strong { color: #fff; font-size: 3rem; line-height: 1; letter-spacing: -0.05em; }
.hero__proof span { color: #ffffffb8; margin-top: 0.45rem; font-size: 0.75rem; font-weight: 700; line-height: 1.45; }

@media (min-width: 900px) {
  .hero { min-height: 700px; }
  .hero__inner { padding-block: 4.7rem; }
  .hero__proof { display: flex; }
}

.hero .btn--outline {
  color: #fff;
  border-color: #ffffff5c;
  background: #ffffff14;
}
.hero .btn--outline:hover { background: #ffffff26; border-color: #fff; }

/* ---------- Hero stats strip ---------- */

.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-bottom: 1px solid var(--border);
}
@media (min-width: 900px) { .hero-stats { grid-template-columns: repeat(4, 1fr); } }

.hero-stats div {
  padding: 1.35rem 1.25rem;
  border-right: 1px solid var(--border);
}
.hero-stats div:last-child { border-right: 0; }
.hero-stats strong { display: block; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.hero-stats span { font-size: 0.8125rem; color: var(--muted-foreground); }

/* ---------- Cards ---------- */

.card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
a.card { text-decoration: none; }
a.card:hover,
.card--interactive:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: #c8d4e2;
}

.card__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: var(--accent);
  color: var(--primary);
  margin-bottom: 1rem;
}
.card__icon svg { width: 1.375rem; height: 1.375rem; }

.card h3 { margin-bottom: 0.375rem; }
.card p { font-size: 0.9375rem; }
/* Only plain paragraphs are muted. A classed paragraph — .eyebrow, .quote__amount — carries its
   own colour, and ".card p" would otherwise outrank it on specificity and grey it out. */
.card p:not([class]) { color: var(--muted-foreground); }

.card__link {
  margin-top: auto;
  padding-top: 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--action);
}

/* ---------- Plan cards ---------- */

.plan-card { position: relative; }
.plan-card--featured {
  border-color: var(--primary);
  border-width: 2px;
  box-shadow: var(--shadow-lg);
}

.plan-card__badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: var(--action);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  white-space: nowrap;
}

.plan-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
  margin: 0.75rem 0 0.25rem;
}
.plan-card__price sup {
  font-size: 1.1rem;
  font-weight: 700;
  top: -0.9em;
  position: relative;
}
.plan-card__price strong { font-size: 2.85rem; font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.plan-card__price span {
  color: var(--muted-foreground);
  font-size: 0.75rem;
  line-height: 1.25;
  align-self: flex-end;
  padding-bottom: 0.2rem;
}

.plan-card__tagline { font-weight: 700; margin: 0.9rem 0 0.4rem; }
.plan-card__subhead { color: var(--muted-foreground); font-size: 0.875rem; margin-bottom: 1.1rem; }

.plan-card__signup { font-size: 0.875rem; color: var(--muted-foreground); margin-bottom: 1.25rem; }

.plan-card__list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.625rem;
  font-size: 0.9375rem;
}
.plan-card__list li {
  display: grid;
  grid-template-columns: 1.125rem 1fr;
  gap: 0.625rem;
  align-items: start;
}
/* Brand red, matching the template. Green is reserved for the comparison table, where it
   contrasts against the "not included" dash. */
.plan-card__list svg { width: 1.125rem; height: 1.125rem; color: var(--action); margin-top: 0.1875rem; }
.plan-card__actions {
  display: grid;
  gap: 0.875rem;
  margin-top: auto;
  justify-items: center;
}
.plan-card__actions .btn { width: 100%; }

.plan-card__explore {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  /* Keeps the tap target comfortable without adding a second button. */
  padding: 0.25rem 0.5rem;
}
.plan-card__explore:hover { color: var(--action); text-decoration: underline; }

.plan-card__list li[data-excluded] { color: var(--muted-foreground); }
.plan-card__list li[data-excluded] svg { color: var(--muted-foreground); }

/* ---------- Plan detail hero ---------- */

/* Light, unlike the other inner pages, because the navy price card beside it carries the weight. */
.plan-hero { background: var(--muted); padding-block: clamp(2rem, 1.25rem + 3vw, 3.5rem); }

.plan-hero__inner { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .plan-hero__inner { grid-template-columns: 1.15fr 0.85fr; gap: 3rem; } }

.plan-hero h1 { margin-bottom: 0.5rem; }
.plan-hero__tagline { font-size: 1.125rem; font-weight: 700; margin-bottom: 0.5rem; }
.plan-hero__subhead { color: var(--muted-foreground); max-width: 34rem; margin-bottom: 1.75rem; }

.price-card {
  padding: 1.75rem;
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.price-card .eyebrow { color: #ffb3c0; }

.price-card__price { display: flex; align-items: baseline; gap: 0.2rem; margin: 0 0 1.25rem; }
.price-card__price sup { font-size: 1.1rem; font-weight: 700; top: -0.9em; position: relative; }
.price-card__price strong { font-size: 3rem; font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.price-card__price span { font-size: 0.875rem; color: #ffffffb3; align-self: flex-end; padding-bottom: 0.3rem; }

.price-card__list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.625rem; font-size: 0.9375rem; }
.price-card__list li { display: grid; grid-template-columns: 1.125rem 1fr; gap: 0.625rem; align-items: start; }
.price-card__list svg { width: 1.125rem; height: 1.125rem; color: #ffb3c0; margin-top: 0.1875rem; }

.price-card__note { font-size: 0.8125rem; color: #ffffffb3; line-height: 1.5; margin-bottom: 1.25rem; }
.price-card__note strong { color: #fff; display: block; margin-top: 0.25rem; }

.price-card__ask {
  width: 100%;
  justify-content: center;
  background: #ffffff14;
  border-color: #ffffff3d;
  color: #fff;
}
.price-card__ask:hover { background: #ffffff26; border-color: #fff; }
.price-card__ask svg { color: #ffb3c0; }

/* ---------- Comparison table ---------- */

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.compare {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
  background: var(--card);
}
.compare th,
.compare td { padding: 0.875rem 1rem; text-align: left; border-bottom: 1px solid var(--border); }
/* Navy header row with white type, as in the template. */
.compare thead th {
  background: var(--primary);
  color: #fff;
  font-size: 0.8125rem;
  border-bottom: 0;
}
.compare thead th span { font-weight: 400; opacity: 0.75; }

.compare td:not(:first-child),
.compare th:not(:first-child) { text-align: center; }
.compare tbody tr:last-child td { border-bottom: 0; }
.compare tbody tr:nth-child(even) { background: var(--muted); }
.compare .yes { color: var(--action); font-size: 1.05rem; }
.compare .no { color: var(--input); }

/* Marks the plan whose page you are on, so the table answers "where am I" at a glance. */
.compare thead th.is-current { background: #012457; }
.compare td.is-current { background: var(--accent); }
.compare tbody tr:nth-child(even) td.is-current { background: #e4ecf4; }

.household-note {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  justify-content: center;
  margin-top: 1.75rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  text-align: left;
}
.household-note svg { width: 1.25rem; height: 1.25rem; color: var(--action); flex: none; margin-top: 0.1rem; }
.household-note strong { color: var(--foreground); }

/* ---------- Stats ---------- */

.stat { text-align: center; padding: 1.25rem 0.5rem; }
.stat strong {
  display: block;
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.stat span { font-size: 0.875rem; color: var(--muted-foreground); }
.section--navy .stat span { color: rgb(255 255 255 / 0.75); }

/* ---------- Everyday benefit cards ---------- */

/* a.card already carries the hover lift and text-decoration reset from the shared .card rules.
   Three classes so this reliably outranks the generic "a.card:hover" grey border above. */
a.card.benefit-card:hover,
a.card.benefit-card:focus-visible {
  border-color: var(--action);
}

.benefit-card .eyebrow { font-size: 0.6875rem; margin-bottom: 0.5rem; }
.benefit-card h3 { margin-bottom: 0.25rem; }
.benefit-card__tagline { font-weight: 700; color: var(--foreground); margin-bottom: 0.5rem; }
/* The bullets close the card now that the link line is gone. */
.benefit-card__list { margin-bottom: 0; }

.benefit-card__list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.benefit-card__list li {
  display: grid;
  grid-template-columns: 1.0625rem 1fr;
  gap: 0.5rem;
  align-items: start;
}
.benefit-card__list svg { width: 1.0625rem; height: 1.0625rem; color: var(--action); margin-top: 0.15rem; }

/* ---------- Savings figures ---------- */

/* The figure carries the brand red, matching the other accent elements on the page. (The template
   sets it in navy; red was chosen deliberately here.) */
.saving { text-decoration: none; }

/* Red outline on hover marks the tile as clickable. */
a.card.saving:hover,
a.card.saving:focus-visible {
  border-color: var(--action);
}
.saving .eyebrow { margin-bottom: 0.375rem; }
.saving__value {
  display: block;
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--action);
  margin-bottom: 0.5rem;
}

/* ---------- Network card ---------- */

.network-card {
  display: grid;
  gap: 2rem;
  margin-top: 1.5rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius);
}
@media (min-width: 900px) { .network-card { grid-template-columns: 0.85fr 1.15fr; gap: 3rem; align-items: center; } }

.network-card h3 { color: #fff; font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem); }
.network-card > div > p:not([class]) { color: #ffffffb3; margin-bottom: 0; }
.network-card .eyebrow { color: #ffb3c0; }

.network-card__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid #ffffff24;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
@media (min-width: 640px) { .network-card__stats { grid-template-columns: repeat(3, 1fr); } }

.network-card__stats div {
  padding: 1.1rem 1.25rem;
  border-right: 1px solid #ffffff24;
  border-bottom: 1px solid #ffffff24;
}
.network-card__stats strong { display: block; font-size: 1.375rem; font-weight: 800; letter-spacing: -0.03em; }
.network-card__stats span { font-size: 0.75rem; color: #ffffffa8; }

/* ---------- Savings estimator ---------- */

.estimator-band { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .estimator-band { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }

.estimator-band h2 { color: #fff; }
.estimator-band > div > p:not([class]) { color: #ffffffb3; }

.estimator__note {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  margin: 1.5rem 0 0;
  padding: 0.875rem 1rem;
  background: #ffffff0f;
  border: 1px solid #ffffff2e;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #ffffffb3;
}
.estimator__note svg { width: 1.125rem; height: 1.125rem; color: var(--action); flex: none; margin-top: 0.1rem; }

.estimator {
  position: relative;
  background: var(--card);
  color: var(--foreground);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-lg);
}

.estimator__icon {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  color: var(--action);
}
.estimator__icon svg { width: 1.375rem; height: 1.375rem; }

.estimator label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
}

.estimator select,
.estimator input {
  width: 100%;
  min-height: 3rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--input);
  border-radius: 9px;
  font: inherit;
  /* 16px stops iOS zooming the page on focus. */
  font-size: 16px;
  background: var(--background);
  color: var(--foreground);
}

.estimator__money { position: relative; }
.estimator__money span {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-foreground);
  font-weight: 600;
  pointer-events: none;
}
.estimator__money input { padding-left: 1.75rem; }

.estimator label:not(:first-of-type) { margin-top: 1rem; }

.estimator__row { display: grid; gap: 1rem; }
@media (min-width: 420px) { .estimator__row { grid-template-columns: 1.2fr 1fr; } }
/* Both fields in the row start level, regardless of the stacked-label spacing above. */
.estimator__row > div > label { margin-top: 1rem; }

.estimator__hint {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--muted-foreground);
}

.estimator__result {
  margin: 1.25rem 0;
  padding: 1.125rem 1.25rem;
  background: var(--accent);
  border-radius: var(--radius-sm);
}
.estimator__label {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.estimator__amount {
  margin: 0.25rem 0 0;
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--primary);
}
.estimator__cost { margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--muted-foreground); }


/* ---------- Testimonials ---------- */

.quote { display: flex; flex-direction: column; padding: 1.75rem; }

/* Navy, so the red savings figure below it is the thing that draws the eye. */
.quote__mark { color: var(--primary); margin-bottom: 1rem; }
.quote__mark svg { width: 1.875rem; height: 1.875rem; }

.quote .eyebrow { margin-bottom: 0.5rem; font-size: 0.6875rem; }

/* Brand red, matching the savings figures. (The template sets this in navy.) */
.quote__amount {
  font-size: 1.3125rem;
  font-weight: 800;
  color: var(--action);
  letter-spacing: -0.025em;
  line-height: 1.25;
  margin-bottom: 0.875rem;
}
.quote blockquote {
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--muted-foreground);
}
.quote figcaption { font-size: 0.875rem; font-weight: 700; color: var(--foreground); margin-top: auto; }

/* ---------- Steps ---------- */

.step { padding: 1.75rem 1.5rem; }
.step__number {
  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--action);
  margin-bottom: 2.25rem;
}
.step h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.625rem; }
.step p:not([class]) { color: var(--muted-foreground); font-size: 0.875rem; margin-bottom: 0; }

/* A centred text link closing a section, rather than a competing button. */
.section__link { text-align: center; margin: 2rem 0 0; }
.section__link a {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
}
.section__link a:hover { color: var(--action); text-decoration: underline; }

/* ---------- Provider search band ---------- */

.section--tight { padding-block: clamp(2rem, 1.25rem + 2.5vw, 3rem); }

.search-band { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .search-band { grid-template-columns: 1fr 1.1fr; gap: 3rem; } }

.search-band h2 { color: #fff; }
.search-band > div > p:not([class]) { color: rgb(255 255 255 / 0.8); }

/* The same band on a light section, where the copy must not be white. */
.search-band--light h2 { color: var(--foreground); }
.search-band--light > div > p:not([class]) { color: var(--muted-foreground); }
.search-band--light .search-card { border: 1px solid var(--border); }

/* ---------- Everyday moments ---------- */

.moment {
  padding: 1.5rem 1.25rem;
  background: #ffffff0f;
  border: 1px solid #ffffff2e;
  border-radius: var(--radius-sm);
}
.moment__when {
  margin: 0 0 0.75rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffb3c0;
}
.moment h3 { color: #fff; font-size: 1.0625rem; margin-bottom: 0.375rem; }
.moment p:not([class]) { color: #ffffffa8; font-size: 0.875rem; margin-bottom: 0; }

.search-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow-lg);
}

.search-card__fields { display: grid; gap: 1rem; }
@media (min-width: 640px) {
  .search-card__fields { grid-template-columns: 1fr 1fr auto; align-items: end; }
}

.search-card label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
  color: var(--foreground);
}

.search-card__note {
  margin: 1rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  line-height: 1.5;
}
.search-card__note a { color: var(--action); font-weight: 600; }

.search-card select,
.search-card input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--input);
  border-radius: var(--radius-sm);
  font: inherit;
  /* 16px stops iOS zooming the page on focus. */
  font-size: 16px;
  background: var(--background);
  color: var(--foreground);
}

/* ---------- Plan finder ---------- */

.finder__options {
  display: grid;
  gap: 0.75rem;
  border: 0;
  margin: 0;
  padding: 0;
}
@media (min-width: 640px) { .finder__options { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .finder__options { grid-template-columns: repeat(4, 1fr); } }

.finder__option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background: #ffffff0f;
  border: 1px solid #ffffff38;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.finder__option:hover { background: #ffffff1c; border-color: #ffffff6b; }

/* The native box is hidden but still focusable, so keyboard and screen readers work normally. */
.finder__option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.finder__check {
  display: grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  flex: none;
  margin-top: 0.1rem;
  border: 1.5px solid #ffffff7a;
  border-radius: 5px;
  color: transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.finder__check svg { width: 0.875rem; height: 0.875rem; }

.finder__option input:checked + .finder__check {
  background: var(--action);
  border-color: var(--action);
  color: #fff;
}
.finder__option input:focus-visible + .finder__check {
  outline: 3px solid #fff;
  outline-offset: 2px;
}
.finder__option:has(input:checked) { background: #ffffff21; border-color: #ffffff9c; }

.finder__label strong { display: block; font-size: 0.9375rem; line-height: 1.3; }
.finder__label small {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: #ffffffa3;
}

.finder__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 1.75rem;
}
.finder__hint { margin: 0; font-size: 0.8125rem; color: #ffffffa3; }
.finder__actions .btn:disabled { background: #ffffff2e; color: #ffffff85; cursor: not-allowed; }

/* ---------- Value proposition & benefit tiles ---------- */

.value-prop { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .value-prop { grid-template-columns: 1fr 1.05fr; gap: 3.5rem; } }

.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.875rem;
}
@media (min-width: 600px) { .tile-grid { grid-template-columns: repeat(3, 1fr); } }

.tile {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.125rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.tile:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.tile__icon { color: var(--action); }
.tile__icon svg { width: 1.375rem; height: 1.375rem; }

/* ---------- Logos ---------- */

.logo-wall__title {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 1.25rem;
}

/* A single horizontal strip. Fifteen brands in a wrapping grid would dominate the page; scrolling
   keeps it to one band on every screen size. */
.logo-strip__viewport { position: relative; }

.logo-strip__list {
  display: flex;
  gap: 0.875rem;
  list-style: none;
  margin: 0;
  padding: 0.25rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  /* Fades the cut-off edges so it reads as continuing rather than ending. */
  mask-image: linear-gradient(90deg, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%);
  scrollbar-width: thin;
  scrollbar-color: var(--input) transparent;
}
.logo-strip__list::-webkit-scrollbar { height: 6px; }
.logo-strip__list::-webkit-scrollbar-thumb { background: var(--input); border-radius: 999px; }
.logo-strip__list::-webkit-scrollbar-track { background: transparent; }

.logo-strip__list li { flex: 0 0 auto; scroll-snap-align: start; }

/* Drag to scroll: the cursor advertises the gesture, and text selection is suppressed mid-drag so
   the page does not highlight while panning. Snapping is released during the drag so it tracks the
   pointer exactly, then restored on release. */
.logo-strip__list { cursor: grab; }
/* The tiles are buttons, so they would otherwise show a pointer cursor and hide the grab
   affordance exactly where people try to grab. */
.logo-strip__list .logo-strip__item { cursor: inherit; }

.logo-strip__list.is-dragging,
.logo-strip__list.is-dragging .logo-strip__item {
  cursor: grabbing;
}
.logo-strip__list.is-dragging {
  scroll-snap-type: none;
  user-select: none;
}
.logo-strip__list.is-dragging .logo-strip__item {
  /* No hover lift while dragging past tiles. */
  transform: none;
  border-color: var(--border);
  box-shadow: none;
}

/* Tile and image dimensions follow the template: 74px minimum tile, 12px padding, 10px radius,
   and a 128x38 image box. */
.logo-strip__item {
  display: grid;
  gap: 0.5rem;
  justify-items: center;
  align-content: center;
  width: 9.5rem;
  min-height: 74px;
  padding: 12px;
  background: var(--card);
  border: 1px solid #e7ebef;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.logo-strip__item:hover {
  border-color: var(--action);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.logo-strip__img { display: grid; place-items: center; width: 100%; }
.logo-strip__img img {
  width: 100%;
  max-width: 128px;
  height: 38px;
  object-fit: contain;
  /* Greyed back so the wall reads as one band rather than fifteen competing brand palettes;
     full colour on hover, as in the template. */
  filter: grayscale(1);
  opacity: 0.72;
  transition: filter 0.2s ease, opacity 0.2s ease;
  /* The browser's native image drag would hijack the gesture the moment someone grabs a logo,
     which is exactly where they try to grab. Making the image transparent to pointer events sends
     mousedown to the button instead, so no image drag can start. */
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}
.logo-strip__item:hover .logo-strip__img img,
.logo-strip__item:focus-visible .logo-strip__img img {
  filter: none;
  opacity: 1;
}

/* Labels are decoration, not content to select; a stray selection mid-drag looks broken. */
.logo-strip__list { user-select: none; }

.logo-strip__category {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

/* Arrow controls, revealed by JS only when the strip actually overflows. */
.logo-strip__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--primary);
  box-shadow: var(--shadow-md);
  cursor: pointer;
}
.logo-strip__arrow:hover { border-color: var(--action); color: var(--action); }
.logo-strip__arrow[hidden] { display: none; }
.logo-strip__arrow svg { width: 1.125rem; height: 1.125rem; }
.logo-strip__arrow--prev { left: -0.5rem; }
.logo-strip__arrow--next { right: -0.5rem; }

.logo-wall__hint {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  margin: 1rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}
.logo-wall__hint svg { width: 1rem; height: 1rem; color: var(--action); flex: none; }

/* ---------- FAQ ---------- */

.faq__hint {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  justify-content: center;
  margin: 0 0 1.25rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  text-align: left;
}
.faq__hint svg { width: 1.0625rem; height: 1.0625rem; color: var(--action); flex: none; margin-top: 0.1rem; }

.faq { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.125rem 0.25rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  min-height: 2.75rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border-right: 2px solid var(--muted-foreground);
  border-bottom: 2px solid var(--muted-foreground);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
/* The chevron becomes a send arrow: the click asks the consultant, it does not expand. */
.faq summary::after { transform: rotate(-45deg); }
.faq summary:hover { color: var(--action); }
.faq summary:hover::after { border-color: var(--action); }
.faq details > div { padding: 0 0.25rem 1.25rem; color: var(--muted-foreground); }

/* ---------- Prose (legal & long-form pages) ---------- */

.prose { max-width: 46rem; }
.prose h2 { margin-top: 2.5rem; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.25rem; color: var(--muted-foreground); }
.prose li { margin-bottom: 0.5rem; }
.prose p { color: var(--muted-foreground); }

/* ---------- Why Ameriplan ---------- */

.why-card {
  align-items: center;
  text-align: center;
  background: var(--muted);
  border-color: transparent;
  box-shadow: none;
  padding: 2rem 1.75rem;
}
.why-card__icon { color: var(--action); margin-bottom: 1.5rem; }
.why-card__icon svg { width: 1.5rem; height: 1.5rem; }
.why-card h3 { font-size: 1.0625rem; font-weight: 600; margin-bottom: 0.5rem; }
.why-card p { margin-bottom: 0; }

/* ---------- Member card in your pocket ---------- */

.pocket { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .pocket { grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; } }
.pocket h2 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); }

.pocket h2 { color: #fff; }
.pocket > div > p:not([class]) { color: #ffffffb3; }

.pocket__list { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1.125rem; }
.pocket__list li { display: grid; grid-template-columns: 1.75rem 1fr; gap: 0.875rem; align-items: start; }
.pocket__list strong { display: block; font-size: 0.9375rem; }
.pocket__list small { display: block; margin-top: 0.15rem; font-size: 0.8125rem; color: #ffffffa8; }

.pocket__icon { color: var(--action); }
.pocket__icon svg { width: 1.375rem; height: 1.375rem; }

/*
 * A CSS phone mock holding the membership card. Drawn rather than shipped as an image so it stays
 * sharp at any size. It deliberately bleeds past the bottom of the navy band, as in the template,
 * which is why the section clips its overflow.
 */
.phone-stage {
  position: relative;
  justify-self: center;
  display: flex;
  justify-content: center;
}

/* Sits wholly inside the band. The template lets its phone bleed off the bottom edge; here it is
   shown complete instead, which is clearer at this size.
   The aspect ratio is fixed so it keeps a handset's proportions — sized by its contents alone it
   came out short and square, and stopped reading as a phone. */
.phone {
  position: relative;
  width: min(18.5rem, 100%);
  aspect-ratio: 9 / 19;
  padding: 0.75rem;
  background: #0b1524;
  border-radius: 2.75rem;
  box-shadow: 0 40px 80px #0000005c, 0 0 0 1px #ffffff1f;
}

/* The dynamic island. Without it the mock reads as a plain rounded box rather than a phone. */
.phone__notch {
  position: absolute;
  top: 1.35rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 5.25rem;
  height: 1.1rem;
  border-radius: 999px;
  background: #0b1524;
}

.phone__screen {
  height: 100%;
  background: #fff;
  border-radius: 2.1rem;
  padding: 2.75rem 1.125rem 1.5rem;
  display: grid;
  gap: 0.875rem;
  /* Content sits at the top of the screen, as it would in a real app. */
  align-content: start;
  overflow: hidden;
}

/* Hints at further content down the screen, so the lower half isn't blank. */
.phone__row {
  height: 0.65rem;
  border-radius: 999px;
  background: var(--secondary);
}
.phone__row--short { width: 55%; }

.phone__brand { display: flex; justify-content: center; }
.phone__brand img { height: 2.5rem; width: auto; object-fit: contain; }

.phone__label {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--action);
}

.phone__card {
  display: grid;
  gap: 0.5rem;
  padding: 1.125rem;
  border-radius: 0.875rem;
  background: linear-gradient(145deg, #01275c 0%, #023a86 100%);
  color: #fff;
  box-shadow: 0 10px 24px #01275c3d;
}
.phone__card-label {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffffa8;
}
.phone__card strong { font-size: 1.0625rem; line-height: 1.3; letter-spacing: -0.02em; }
.phone__card-number { font-size: 0.75rem; letter-spacing: 0.18em; color: #ffffffc4; }

.phone__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.phone__actions span {
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-align: center;
  color: var(--primary);
}

/* Floating labels straddling the phone's edges, as in the template. Positioned against the phone
   itself and shifted mostly outside it, so neither one covers the screen. */
.phone__chip {
  position: absolute;
  z-index: 3;
  padding: 0.5rem 0.875rem;
  border-radius: 0.625rem;
  background: #16263d;
  border: 1px solid #ffffff24;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 12px 28px #00000047;
}

.phone__chip--left {
  top: 32%;
  left: 0;
  transform: translateX(-72%);
}
.phone__chip--right {
  bottom: 14%;
  right: 0;
  transform: translateX(72%);
}

/* Below the two-column breakpoint the phone is centred with little room either side, so the chips
   would hang off the viewport. */
@media (max-width: 899px) {
  .phone__chip--left { transform: translateX(-35%); }
  .phone__chip--right { transform: translateX(35%); }
}

/* ---------- Story band (homepage) ---------- */

.story-band { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .story-band { grid-template-columns: 0.95fr 1.05fr; gap: 3.5rem; } }

.story-band__image {
  background: url("/img/ameriplan-family.webp") 50% / cover no-repeat;
  border-radius: 24px 74px 24px 24px;
  min-height: 20rem;
  box-shadow: 0 26px 60px #01275c1f;
}
@media (min-width: 900px) { .story-band__image { min-height: 26rem; } }

.milestones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  font-weight: 700;
  color: var(--primary);
}
/* Arrow between milestones, drawn with a pseudo-element so the markup stays a plain list. */
.milestones li:not(:last-child)::after {
  content: "→";
  margin-left: 0.75rem;
  color: var(--action);
  font-weight: 400;
}

/* ---------- Story block (about) ---------- */

.story { display: grid; gap: 2.5rem; align-items: center; margin-bottom: 1rem; }
@media (min-width: 900px) { .story { grid-template-columns: 0.9fr 1.1fr; gap: 3.5rem; } }

.story-image {
  background: url("/img/ameriplan-family.webp") 50% / cover no-repeat;
  /* The asymmetric corner is the template's signature on this block. */
  border-radius: 24px 74px 24px 24px;
  min-height: 22rem;
  box-shadow: 0 26px 60px #01275c1f;
}
@media (min-width: 900px) { .story-image { min-height: 31rem; } }

.pull-quote {
  margin: 1.5rem 0 0;
  padding-left: 1.125rem;
  border-left: 3px solid var(--action);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--foreground);
}

.pull-quote--large { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5625rem); font-weight: 800; padding-left: 1.5rem; border-left-width: 4px; }

/* ---------- About: timeline, vision, principles (metrics from the template) ---------- */

.timeline {
  display: grid;
  gap: 2.5rem;
  list-style: none;
  margin: 1.875rem 0 0;
  padding: 0;
}
.timeline > li { position: relative; border-top: 2px solid #dfe5eb; }
.timeline i {
  position: absolute;
  top: -8px;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--action);
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--action);
}
.timeline span {
  display: block;
  margin-top: 27px;
  color: var(--action);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.timeline h3 { margin: 0.5rem 0 0.375rem; }
.timeline p { color: var(--muted-foreground); font-size: 0.8125rem; margin: 0; }
@media (min-width: 640px) {
  .timeline { grid-template-columns: 1fr 1fr; row-gap: 3rem; column-gap: 0; }
  .timeline > li { padding-right: 25px; }
  .timeline > li:nth-child(even) { padding-left: 25px; }
  .timeline > li:nth-child(even) i { left: 25px; }
}
@media (min-width: 900px) {
  .timeline { grid-template-columns: repeat(4, 1fr); }
  .timeline > li { padding-inline: 25px; }
  .timeline > li i { left: 25px; }
  .timeline > li:first-child { padding-left: 0; }
  .timeline > li:first-child i { left: 0; }
}

.vision-grid { display: grid; gap: 1rem; }
.vision-grid > div { border: 1px solid #e0e6ec; border-radius: 15px; padding: 30px 25px; }
.vision-grid svg { width: 24px; height: 24px; color: var(--action); }
.vision-grid h3 { margin: 30px 0 7px; }
.vision-grid p { color: var(--muted-foreground); font-size: 0.8125rem; margin: 0; }

.principles { background: #071d3e; color: #fff; }
.principles h2 { color: #fff; }
.principles .eyebrow { color: #ffb3c0; }
.principle-grid { display: grid; gap: 1rem; }
.principle-grid article {
  background: #ffffff09;
  border: 1px solid #ffffff24;
  border-radius: 15px;
  padding: 34px;
}
.principle-grid span {
  color: #ff8ea1;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.principle-grid h3 { color: #fff; font-size: 1.5rem; margin: 60px 0 10px; }
.principle-grid p { color: #ffffff9e; font-size: 0.875rem; margin: 0; }

@media (min-width: 640px) { .vision-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .vision-grid { grid-template-columns: repeat(4, 1fr); }
  .principle-grid { grid-template-columns: repeat(3, 1fr); }
  .principle-grid article { min-height: 285px; }
}

/* ---------- Replicated consultant site ---------- */

.bc-bar { background: var(--accent); border-bottom: 1px solid #d3e0ec; }
.bc-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem 1.5rem;
  padding-block: 0.625rem;
}
.bc-bar__who { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.bc-bar__who small { display: block; color: var(--muted-foreground); font-size: 0.75rem; line-height: 1.2; }
.bc-bar__who strong { display: block; color: var(--primary); font-size: 0.9375rem; line-height: 1.3; }
.bc-bar__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
}
.bc-bar__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.bc-bar__actions a,
.bc-bar__actions button {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.25rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid #d3e0ec;
  border-radius: 999px;
  background: #fff;
  color: var(--primary);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.bc-bar__actions a:hover,
.bc-bar__actions button:hover { border-color: var(--primary); }
.bc-bar__actions svg { width: 1rem; height: 1rem; flex: none; }

.bc-contact-card { background: var(--accent); border-color: #d3e0ec; }
.bc-enroll-note {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  background: var(--accent);
  font-size: 0.875rem;
}

/* The consultant's lead form (Pages/Shared/_LeadCapture). A native <dialog>, so focus is trapped,
   Escape closes it and it sits above the assistant's panel without z-index juggling. A sheet from
   the bottom on phones, a centred card from 640px up. */
.lead {
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: auto 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--foreground);
}
.lead::backdrop { background: rgb(1 39 92 / 0.5); }
.lead__card {
  position: relative;
  max-height: 92vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.25rem 1rem;
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  background: var(--card);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: var(--shadow-lg);
}
@media (min-width: 640px) {
  .lead { width: min(34rem, calc(100vw - 2rem)); margin: auto; }
  .lead__card { padding: 1.75rem; border-radius: var(--radius); max-height: calc(100vh - 2rem); }
}
.lead__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
}
.lead__close:hover { background: var(--secondary); color: var(--foreground); }
.lead__close svg { width: 1.125rem; height: 1.125rem; }
.lead__who { display: flex; align-items: center; gap: 0.75rem; margin: 0 3rem 1rem 0; }
.lead__who small { display: block; color: var(--muted-foreground); font-size: 0.75rem; line-height: 1.2; }
.lead__who strong { display: block; color: var(--primary); font-size: 0.9375rem; line-height: 1.3; }
.lead h2 { margin: 0 0 0.375rem; font-size: 1.375rem; line-height: 1.25; }
.lead__lede { margin: 0 0 1.125rem; color: var(--muted-foreground); font-size: 0.9375rem; }
.lead__interests { margin: 0 0 1.125rem; padding: 0; border: 0; min-width: 0; }
.lead__interests legend { margin-bottom: 0.5rem; padding: 0; font-size: 0.8125rem; font-weight: 600; }
.lead__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lead__chip { position: relative; cursor: pointer; }
/* The checkbox stays in the accessibility tree and keyboard order; only its box is hidden. */
.lead__chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lead__chip span {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.4375rem 0.875rem;
  border: 1px solid var(--input);
  border-radius: 999px;
  background: var(--card);
  color: var(--primary);
  font-size: 0.8125rem;
  font-weight: 500;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.lead__chip:hover span { border-color: var(--primary); }
.lead__chip input:checked + span { background: var(--primary); border-color: var(--primary); color: #fff; }
.lead__chip input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 2px; }
.lead__hint { margin: 0.5rem 0 0.75rem; color: var(--muted-foreground); font-size: 0.8125rem; }
.lead__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.lead .field__error { margin: 0 0 0.75rem; }
.lead__consent { margin: 0.875rem 0 0; color: var(--muted-foreground); font-size: 0.6875rem; line-height: 1.5; }
.lead__later {
  display: block;
  min-height: 2.75rem;
  margin: 0.5rem auto 0;
  padding: 0 1rem;
  border: 0;
  background: none;
  color: var(--muted-foreground);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.lead__later:hover { color: var(--foreground); text-decoration: underline; }
.lead__done { text-align: center; padding: 0.5rem 0; }
.lead__done p { margin: 0 0 1rem; color: var(--muted-foreground); }
.lead__done .btn-row { justify-content: center; }

/* ---------- Checkout (enroll/member/{plan}, enroll/welcome) ---------- */

.checkout { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 900px) { .checkout { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 2rem; } }
@media (min-width: 900px) { .checkout__summary { position: sticky; top: 1.5rem; } }

.checkout__form { display: grid; gap: 1.25rem; }

.checkout__step {
  margin: 0;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}
.checkout__step legend {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  float: left;
  width: 100%;
  margin-bottom: 1rem;
  padding: 0;
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--primary);
}
.checkout__step legend + * { clear: both; }
.checkout__num {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 0.875rem;
}
.checkout__hint { margin: 0 0 1rem; color: var(--muted-foreground); font-size: 0.9375rem; }

.field-grid { display: grid; gap: 1rem; }
@media (min-width: 560px) {
  .field-grid { grid-template-columns: 1fr 1fr; }
  .field--full { grid-column: 1 / -1; }
}
.field label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--foreground);
}
.field input,
.field select {
  width: 100%;
  min-height: 2.875rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--input);
  border-radius: var(--radius-sm);
  background: var(--background);
  color: var(--foreground);
  font: inherit;
  font-size: 16px; /* 16px stops iOS zooming the page on focus. */
}
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27 fill=%27none%27 stroke=%27%23667%27 stroke-width=%271.75%27 stroke-linecap=%27round%27%3E%3Cpath d=%27M5.5 7.5 10 12l4.5-4.5%27/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.625rem center; background-size: 1.125rem; padding-right: 2.25rem; }
.field input:focus-visible,
.field select:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.field input.input-validation-error,
.field select.input-validation-error { border-color: var(--action); background-color: #fff5f6; }  /* background-color, not the shorthand: the shorthand would wipe the chevron */
.field__optional { font-weight: 500; color: var(--muted-foreground); font-size: 0.75rem; }
.field__error { display: block; margin-top: 0.3125rem; color: #b8001f; font-size: 0.8125rem; font-weight: 500; }
.field__error:empty { display: none; }

.checkout__alert {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 1rem 1.125rem;
  border: 1px solid #f5b8c3;
  border-radius: var(--radius);
  background: #fff1f3;
  color: #8a0019;
}
.checkout__alert svg { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.125rem; }
.checkout__alert p { margin: 0; font-weight: 500; }

.checkout__secure {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin: 1rem 0 0;
  color: var(--muted-foreground);
  font-size: 0.8125rem;
}
.checkout__secure svg { flex: none; width: 1rem; height: 1rem; margin-top: 0.125rem; color: var(--primary); }

.checkout__agree {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 1rem;
  border-radius: var(--radius-sm);
  background: var(--secondary);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--foreground);
  cursor: pointer;
}
.checkout__agree input { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.1875rem; accent-color: var(--primary); }
.checkout__agree a { color: var(--primary); font-weight: 600; }
.checkout__submit { margin-top: 1.25rem; min-height: 3.25rem; font-size: 1.0625rem; }
.checkout__submit:disabled { opacity: 0.7; cursor: progress; }

.checkout__totals { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.9375rem; }
.checkout__totals td { padding: 0.5rem 0; vertical-align: top; }
.checkout__totals td:last-child { text-align: right; white-space: nowrap; padding-left: 1rem; }
.checkout__total td { border-top: 1px solid var(--border); padding-top: 0.75rem; font-weight: 700; font-size: 1.0625rem; }
.checkout__next td { color: var(--muted-foreground); font-size: 0.8125rem; }
.checkout__ref { font-size: 0.75rem; word-break: break-all; white-space: normal !important; }

.welcome-steps { display: grid; gap: 1.25rem; margin: 1rem 0 0; padding-left: 1.25rem; }
.welcome-steps li strong { display: block; color: var(--primary); }
.welcome-steps li span { display: block; color: var(--muted-foreground); }

/* ---------- Breadcrumbs ---------- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  font-size: 0.875rem;
}
.crumbs li { display: flex; align-items: center; gap: 0.375rem; }
.crumbs li::after { content: "/"; opacity: 0.45; }
.crumbs li:last-child::after { content: ""; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
/* The current page is stated but not linked. */
.crumbs [aria-current="page"] { font-weight: 700; }

/* ---------- Recently viewed ---------- */

.recent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: -0.5rem 0 1.25rem;
  font-size: 0.8125rem;
}
.recent[hidden] { display: none; }

.recent__label { color: #ffffff8c; font-weight: 600; }

.recent__list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.recent__list a {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border: 1px solid #ffffff38;
  border-radius: 999px;
  color: #ffffffc4;
  text-decoration: none;
  /* Long page names would otherwise push the row wide on a phone. */
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recent__list a:hover { background: #ffffff1f; color: #fff; border-color: #ffffff7a; }

/* ---------- Page header ---------- */

/*
 * Inner-page hero. Navy with the template's faint concentric rings bleeding off the top-right
 * corner, so /plans, /benefits/* and the prose pages all open the same way the homepage does.
 */
.page-head {
  position: relative;
  overflow: hidden;
  background: var(--primary);
  color: #fff;
  padding-block: clamp(3rem, 2rem + 4vw, 6.5rem);
}

.page-head::after {
  content: "";
  position: absolute;
  top: -400px;
  right: -180px;
  width: 720px;
  height: 720px;
  border: 1px solid #ffffff17;
  border-radius: 50%;
  box-shadow: 0 0 0 100px #ffffff06, 0 0 0 205px #ffffff04;
  pointer-events: none;
}

.page-head > .container { position: relative; z-index: 1; }

.page-head h1 { color: #fff; max-width: 56rem; }

.page-head p:not([class]) {
  color: #ffffffb3;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
  max-width: 44rem;
  margin: 1.375rem 0 0;
}

.page-head .eyebrow { color: #ffb3c0; }

.page-head .crumbs { color: #ffffff8c; }
.page-head .crumbs a { color: #ffffffc4; }

.page-head .btn-row { margin-top: 1.75rem; }
.page-head .btn--outline { color: #fff; border-color: #ffffff5c; background: #ffffff14; }
.page-head .btn--outline:hover { background: #ffffff26; border-color: #fff; }

.page-head__note {
  display: block;
  color: #ffffff8c;
  font-size: 0.8125rem;
  margin-top: 1.375rem;
}

/* ---------- Benefit detail ---------- */

.benefit-hero { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .benefit-hero { grid-template-columns: 1.3fr 0.7fr; } }

.benefit-emblem {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  aspect-ratio: 1;
  width: min(17rem, 100%);
  margin-inline: auto;
  padding: 2rem;
  text-align: center;
  border-radius: 50%;
  background: #012457;
  border: 1px solid #ffffff2e;
  box-shadow: 0 0 0 18px #ffffff08;
}
@media (min-width: 900px) { .benefit-emblem { display: flex; } }

.benefit-emblem__icon svg { width: 3.25rem; height: 3.25rem; color: #ffb3c0; }
.benefit-emblem__plans {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffffb3;
  line-height: 1.5;
}

.savings-area {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  margin: 0;
  padding: 0.9rem 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
}
.savings-area svg { width: 1.125rem; height: 1.125rem; color: var(--action); flex: none; margin-top: 0.15rem; }

.caveat-card {
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius);
}
.caveat-card h3 { color: #fff; }
.caveat-card p:not([class]) { color: #ffffffc4; margin-bottom: 0; }
.caveat-card .eyebrow { color: #ffb3c0; }

.media-figure {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  overflow: hidden;
}
.media-figure img { width: 100%; height: auto; border-radius: var(--radius-sm); }
.media-figure figcaption {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  text-align: center;
}

.media-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.media-legend li { display: flex; align-items: center; gap: 0.5rem; }
.media-legend li::before {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 3px;
  background: currentColor;
}
/* Swatches follow the fee-schedule colours named in the legend. */
.media-legend li:nth-child(1)::before { background: #7ac943; }
.media-legend li:nth-child(2)::before { background: #23a2a6; }
.media-legend li:nth-child(3)::before { background: var(--action); }
.media-legend li:nth-child(4)::before { background: var(--input); }

/* ---------- CTA band ---------- */

.cta-band { text-align: center; }
.cta-band .btn-row { justify-content: center; }

/* ---------- Footer ---------- */

.footer {
  background: var(--primary);
  color: rgb(255 255 255 / 0.75);
  padding-block: 3rem 2rem;
  font-size: 0.9375rem;
}
.footer a { color: rgb(255 255 255 / 0.75); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }

.footer__grid { display: grid; gap: 2rem; }
@media (min-width: 640px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .footer__grid { grid-template-columns: 1.4fr repeat(4, 1fr); } }

.footer__brand .logo { margin-bottom: 1rem; }
/* 180x90 in the footer, per the template — not the header's 206x82, which it would inherit. */
.footer__brand .logo img { width: 180px; min-width: 180px; height: 90px; }

/* :not([class]) so this doesn't outrank .footer__tagline on specificity and turn it white — the
   same trap that greyed out the member-story figures. */
.footer__brand > p:not([class]) { color: #fff; max-width: 280px; font-size: 0.9375rem; }

.footer__tagline {
  color: #ff92a5;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* The brand mark is navy and red, which disappears against the navy footer, so it is knocked
   out to solid white here. */
.footer__brand .logo img { filter: brightness(0) invert(1); }

.footer h4 {
  color: #fff;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.875rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }

.footer__legal {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.15);
  font-size: 0.8125rem;
  line-height: 1.6;
  display: grid;
  gap: 0.75rem;
}
@media (min-width: 768px) {
  .footer__legal { grid-template-columns: 1fr auto; align-items: end; }
}

/* App-store badges. Apple and Google supply fixed artwork with required clear space, so these are
   images at their own aspect ratio rather than buttons. Google's asset has ~12% padding baked in,
   hence the taller box for the same visual height as Apple's. */
.store-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.75rem; }
.store-badges a { display: inline-flex; border-radius: var(--radius-sm); }
.store-badges a:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.store-badges img { display: block; height: auto; max-width: 100%; }
.store-badges__legal { display: block; margin-top: 0.5rem; color: var(--muted-foreground); font-size: 0.6875rem; line-height: 1.5; }

/* ---------- Benefit Consultant hero (template /opportunity) ----------
   Copy on the left, three labelled circles on faint concentric rings on the right. The rings are
   decorative, so they are pseudo-elements and the nodes stay real text. */

.bc-hero { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .bc-hero { grid-template-columns: 1fr 1fr; gap: 3rem; } }

.bc-hero h1 { margin-bottom: 1rem; }
.bc-hero h1 .accent { color: var(--action); display: block; }

/* A plain text link beside the filled button, as the template has it. */
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.9375rem;
  color: #fff;
  text-decoration: none;
  padding: 0 0.5rem;
}
.btn-link:hover { text-decoration: underline; }

.orbit {
  position: relative;
  width: min(100%, 27rem);
  aspect-ratio: 1;
  margin-inline: auto;
  display: none;
}
@media (min-width: 900px) { .orbit { display: block; } }

.orbit::before,
.orbit::after {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px solid #ffffff1f;
  border-radius: 50%;
}
.orbit::after { inset: 27%; }

.orbit__node {
  position: absolute;
  width: 38%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  color: var(--primary);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.15rem;
  text-align: center;
  padding: 0.5rem;
  box-shadow: 0 10px 30px #0a1f3d40;
}
.orbit__node--top   { top: 0;    left: 50%; transform: translateX(-50%); }
.orbit__node--left  { bottom: 4%; left: 0; }
.orbit__node--right { bottom: 0;  right: 0; }

.orbit__node svg { width: 1.25rem; height: 1.25rem; color: var(--action); }
.orbit__node strong { font-size: 0.9375rem; font-weight: 800; }
.orbit__node span { font-size: 0.6875rem; color: var(--muted-foreground); line-height: 1.3; }

/* The residual-income graphic on /opportunity: one enrollment on the left, then a payment mark
   for every month after it, fading out to the right instead of stopping.

   The fade is the point, and it is deliberately unquantified. This section used to carry a
   membership-tenure statistic; three were published and all three were withdrawn as unsound (the
   long comment in site.json has the reason). So the graphic shows that the payments recur without
   claiming how many there are - something a number could not do honestly here.

   Sits on .section--navy, so every colour is set for a dark ground rather than inherited. */
.payment-stream {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  max-width: 34rem;
  margin: 2.5rem auto 0;
}
.payment-stream__start {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--action);
  color: #fff;
  box-shadow: 0 8px 22px #0a1f3d59;
}
.payment-stream__start svg { width: 1.25rem; height: 1.25rem; }

/* Each tick is one monthly payment. Opacity is set inline per tick so the fade survives even
   where mask-image does not. */
.payment-stream__tick {
  flex: 1 1 0;
  min-width: 0.25rem;
  height: 1.75rem;
  border-radius: 999px;
  background: #7fb0ea;
}
.payment-stream__caption {
  max-width: 34rem;
  margin: 1rem auto 0;
  font-size: 0.9375rem;
  color: #c7d6ea;
}
@media (max-width: 36rem) {
  .payment-stream { gap: 0.3rem; margin-top: 2rem; }
  .payment-stream__start { width: 2.25rem; height: 2.25rem; }
  .payment-stream__tick { height: 1.35rem; }
}

/* Thin strip of figures under the hero: value over label, vertical rules between. */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-bottom: 1px solid var(--border);
}
@media (min-width: 760px) { .stat-strip { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); } }
.stat-strip > div { padding: 1.5rem 1.25rem; }
@media (min-width: 760px) { .stat-strip > div + div { border-left: 1px solid var(--border); } }
.stat-strip strong { display: block; font-size: 1.0625rem; font-weight: 800; color: var(--primary); }
.stat-strip span { font-size: 0.8125rem; color: var(--muted-foreground); }

/* Compact plan cards: name, price, one line, arrow. The full cards live on /plans. */
.mini-plans { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 760px) { .mini-plans { grid-template-columns: repeat(3, 1fr); } }
.mini-plan {
  display: block;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mini-plan:hover { border-color: var(--action); box-shadow: var(--shadow-lg); }
.mini-plan__name { font-size: 0.875rem; font-weight: 700; color: var(--muted-foreground); }
.mini-plan__price { margin: 0.5rem 0 0.75rem; font-size: 1.875rem; font-weight: 800; color: var(--primary); letter-spacing: -0.03em; }
.mini-plan__price span { font-size: 0.8125rem; font-weight: 700; color: var(--muted-foreground); }
.mini-plan__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.mini-plan__foot p { margin: 0; font-size: 0.9375rem; color: var(--muted-foreground); }
.mini-plan__foot svg { width: 1.1rem; height: 1.1rem; color: var(--action); flex: none; }

/* ---------- Household rows on the checkout forms ---------- */

.household-row {
  position: relative;
  padding: 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--accent);
}
.household-row__remove {
  margin-top: 0.75rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--action);
  text-decoration: underline;
  cursor: pointer;
}
.household-row__remove:hover { color: var(--primary); }