/* ============================================================
 * product-page.css — the parts every product page shares, under the
 * convention in the new-page skill ("A product page teaches"): the
 * question card, the plain explanation, the comparisons and journeys,
 * the check table, the visible questions and the byline.
 * ============================================================ */
/* ============================================================ */
/* EDUCATION PAGE — the page opens on the one question it answers, */
/* as the App's PageHeader and the docs' cards do, then explains:  */
/* what it is, why it matters, how it works, the answer, what it   */
/* covers, how to run it, who it is for, and the questions.        */
/* ============================================================ */
.product-hero .hero-text.q-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-16) var(--space-24);
  padding: var(--space-32) var(--space-48);
  border: 1px solid var(--color-stone-20);
  border-radius: var(--radius-default);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--color-sky) 14%, transparent), transparent 26rem),
    var(--color-paper);
  box-shadow: var(--shadow-card);
}
.q-card-icon {
  display: inline-flex; flex: none; align-items: center; justify-content: center;
  inline-size: 3.25rem; block-size: 3.25rem;
  border-radius: var(--radius-default);
  background: var(--color-mist); color: var(--color-royal);
}
.q-card-icon svg { inline-size: 1.6rem; block-size: 1.6rem; }
.q-card-text { flex: 1 1 20rem; min-inline-size: 0; display: grid; justify-items: start; }
.q-card-text .label-s { color: var(--color-royal); }
.product-hero .q-card h1 { max-width: 20ch; text-wrap: balance; }
.product-hero .q-card .descriptor { max-width: 60ch; }
.product-hero .q-card .cta-row { margin-block-start: var(--space-24); }
@media (max-width: 575.98px) {
  .q-card { padding: var(--space-24); }
  .q-card-icon { display: none; }
}

.pp-section { padding-block: var(--space-section-standard); }
.pp-section .section-heading { margin-block-end: var(--space-48); }
.what-grid { display: grid; gap: var(--space-48); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: start; }
.what-answer { display: grid; gap: var(--space-16); max-inline-size: 62ch; }
.what-answer .body-l { color: var(--color-midnight); font-weight: 500; }
.what-terms {
  margin: 0; display: grid; gap: var(--space-20);
  padding: var(--space-24); border: 1px solid var(--color-stone-20); border-radius: var(--radius-default); background: var(--color-paper);
}
.what-terms dt { font-weight: 600; color: var(--color-midnight); }
.what-terms dd { margin: var(--space-4) 0 0; font-size: var(--type-body-s); color: var(--color-stone-60); line-height: var(--lh-body); }

.check-table-wrap { overflow-x: auto; }
.check-table { inline-size: 100%; max-inline-size: 60rem; border-collapse: collapse; background: var(--color-paper); border: 1px solid var(--color-stone-20); border-radius: var(--radius-default); }
.check-table caption { text-align: start; color: var(--color-stone-60); margin-block-end: var(--space-12); }
.check-table th, .check-table td { text-align: start; vertical-align: top; padding: var(--space-12) var(--space-16); border-block-end: 1px solid var(--color-stone-20); font-size: var(--type-body-s); line-height: var(--lh-body); }
.check-table thead th { font-size: var(--type-label-s); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--color-stone-60); font-weight: 600; }
.check-table tbody th { font-weight: 600; color: var(--color-midnight); inline-size: 14rem; }
.check-table tbody tr:last-child > * { border-block-end: 0; }
.limits { margin-block-start: var(--space-48); max-inline-size: 62ch; display: grid; gap: var(--space-12); }
.limits ul { display: grid; gap: var(--space-12); padding-inline-start: 1.1em; }
.limits li { font-size: var(--type-body-m); line-height: var(--lh-body-relaxed); }

.qa-list { display: grid; max-inline-size: 62rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: var(--space-32) var(--space-48); }
.qa { display: grid; gap: var(--space-8); align-content: start; scroll-margin-top: 6rem; }
.qa h3 { color: var(--color-midnight); }
.qa p { color: var(--color-stone-60); }

.pp-related h2 { margin-block-end: var(--space-16); }
.related-list { display: grid; gap: var(--space-8); padding-inline-start: 1.1em; }
.byline { margin-block-start: var(--space-32); color: var(--color-stone-60); }

/* A heading for the reader of a screen reader, where the section is a strip with no visible one. */
.pp-sr { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }


/* Why it matters: what the form shows, beside what it cannot. */
.seen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-16); margin-block-start: var(--space-24); max-inline-size: 40rem; }
.seen-col { padding: var(--space-16) var(--space-20); border: 1px solid var(--color-stone-20); border-radius: var(--radius-default); background: var(--color-paper); }
.seen-col .label-s { display: block; color: var(--color-stone-60); margin-block-end: var(--space-8); }
.seen-col ul { margin: 0; padding-inline-start: 1.1em; display: grid; gap: var(--space-4); font-size: var(--type-body-s); line-height: var(--lh-body); }
.seen-col.is-hidden-history { border-color: color-mix(in srgb, var(--color-royal) 35%, transparent); background: color-mix(in srgb, var(--color-royal) 5%, var(--color-paper)); }
.seen-col.is-hidden-history .label-s { color: var(--color-royal); }
.seen-close { margin-block-start: var(--space-16); max-inline-size: 40rem; }


/* What is it: the rules Medicare looks at, as tiles. */
.rule-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); max-inline-size: 34rem; }
.rule-tiles li {
  display: flex; align-items: center; gap: var(--space-8);
  padding: var(--space-8) var(--space-12) var(--space-8) var(--space-8);
  border: 1px solid var(--color-stone-20); border-radius: var(--radius-default);
  background: var(--color-paper);
  font-size: var(--type-body-s); font-weight: 500; line-height: 1.25; color: var(--color-midnight);
}
.rule-icon {
  display: inline-grid; place-items: center; flex: none;
  inline-size: 2rem; block-size: 2rem; border-radius: 0.6rem;
  background: var(--color-mist); color: var(--color-royal);
}
.rule-icon svg { inline-size: 1.05rem; block-size: 1.05rem; }

/* The claim without and with a check: two journeys, each a row of steps
   joined by a line, ending in the verdict's colour. */
.journeys { display: grid; gap: var(--space-16); margin-block-start: var(--space-48); grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); }
.journey {
  --tone: var(--color-stone-40);
  position: relative; display: grid; gap: var(--space-20);
  padding: var(--space-24); border-radius: var(--radius-soft);
  background: var(--color-paper); border: 1px solid var(--color-stone-20);
  box-shadow: var(--shadow-card);
}
.journey.is-without { --tone: var(--verdict-not-eligible); }
.journey.is-with { --tone: var(--verdict-eligible); }
.j-tag {
  justify-self: start; display: inline-flex; align-items: center; gap: 0.45em;
  padding: 0.25rem 0.7rem; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--tone) 10%, var(--color-paper)); color: var(--tone);
  font-size: var(--type-label-s); font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase;
}
.j-tag::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: currentColor; }
.j-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.j-step { position: relative; display: grid; justify-items: center; gap: var(--space-8); text-align: center; padding-inline: var(--space-4); }
.j-step:not(:last-child)::after {   /* the line to the next step */
  content: ""; position: absolute; inset-block-start: 1.25rem; inset-inline-start: calc(50% + 1.6rem); inline-size: calc(100% - 3.2rem);
  block-size: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--color-stone-20), color-mix(in srgb, var(--tone) 45%, var(--color-stone-20)));
}
.j-node {
  display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%;
  background: var(--color-mist); color: var(--color-navy);
}
.j-node svg { inline-size: 1.15rem; block-size: 1.15rem; }
.j-text { font-size: var(--type-body-s); line-height: 1.35; color: var(--color-midnight); max-inline-size: 12rem; }
.j-step.is-end .j-node { background: var(--tone); color: var(--color-paper); box-shadow: 0 0 0 6px color-mix(in srgb, var(--tone) 14%, transparent); }
.j-step.is-end .j-text { font-weight: 600; color: var(--tone); }
@media (max-width: 479.98px) {
  .journey { padding: var(--space-20) var(--space-16); }
  .j-text { font-size: var(--type-label-m); }
}

/* The eighth tile: the rest of the rules, linked to the table. */
.rule-tiles li.is-more { padding: 0; border-style: dashed; border-color: color-mix(in srgb, var(--color-royal) 45%, transparent); background: color-mix(in srgb, var(--color-royal) 5%, var(--color-paper)); }
.rule-tiles li.is-more a {
  display: flex; align-items: center; gap: var(--space-8); inline-size: 100%;
  padding: var(--space-8) var(--space-12) var(--space-8) var(--space-8);
  color: var(--color-royal); font-weight: 600; text-decoration: none;
}
.rule-tiles li.is-more a:hover { color: var(--color-navy); }
.rule-tiles li.is-more .rule-icon { background: var(--color-royal); color: var(--color-paper); }