/* ---- pages: legal (privacy.html, hipaa-notice.html, good-faith-estimate.html) ----
   One stylesheet shared by all three legal pages so they stay identical to each
   other. Narrow prose column, no imagery, sentence-case headings per the house
   rule. Everything here reuses main.css tokens; nothing is redefined.
   ----------------------------------------------------------------------------- */

/* ---- hero -------------------------------------------------------------- */
.legal-hero { text-align: center; }
/* deliberately below the DESIGN.md h1 ceiling: a legal page is not a hero page */
.legal-hero h1 { font-size: clamp(2.1rem, 4.2vw, 3.1rem); max-width: 22ch; margin-inline: auto; }
.legal-hero .rule { margin-top: 24px; }
.legal-effective {
  margin-top: 20px;
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sage-deep);
}

/* ---- prose column ------------------------------------------------------ */
.legal-body { max-width: 68ch; }
.legal-body > * + * { margin-top: 1.1em; }
.legal-body h2 {
  font-size: clamp(1.45rem, 2.4vw, 1.85rem);
  margin-top: 2.4em;
  padding-top: 1.5em;
  border-top: 1px solid var(--line);
}
.legal-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-body h3 { font-size: clamp(1.1rem, 1.7vw, 1.3rem); margin-top: 1.8em; }
.legal-body p + p { margin-top: 1.1em; }
.legal-body strong { color: var(--ink); }

/* the lead paragraph under the hero, before the first h2 */
.legal-body .legal-lead {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2.1vw, 1.3rem);
  line-height: 1.55;
  color: var(--body);
}

/* restore list markers (main.css resets ul/ol to none globally) */
.legal-body ul,
.legal-body ol { padding-left: 1.35em; margin-top: 1.1em; }
.legal-body ul { list-style: disc; }
.legal-body ol { list-style: decimal; }
.legal-body li { margin-top: .55em; }
.legal-body li::marker { color: var(--sage); }

/* ---- required-notice card (HIPAA 45 CFR 164.520 header) ---------------- */
/* full hairline on all four sides: no single accented edge */
.legal-callout {
  background: var(--sage-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(22px, 3.4vw, 32px);
  text-align: center;
}
.legal-callout p {
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}

/* ---- contact block at the foot of each document ------------------------ */
.legal-contact {
  font-style: normal;
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(22px, 3.4vw, 30px);
  line-height: 1.85;
}
.legal-contact .legal-contact-name { color: var(--ink); font-weight: 600; }

/* ---- cross-links between the three legal pages ------------------------- */
.legal-links { text-align: center; }
.legal-links h2 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
.legal-links-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 22px);
  margin-top: 32px;
}
.legal-links-row a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 100%;
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 20px;
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 500;
  color: var(--sage-deep);
  transition: border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.legal-links-row a:hover { border-color: var(--sage); color: var(--ink); transform: translateY(-2px); }
.legal-links-row a[aria-current="page"] {
  background: var(--sage-tint);
  border-color: var(--sage);
  color: var(--ink);
}
.legal-links .btn { margin-top: 32px; }
@media (max-width: 720px) {
  .legal-links-row { grid-template-columns: 1fr; }
}