/* Shared styles for Claims.Coach explainer / service pages (extends legal.css) */

.page-hero {
  background: var(--surface-inverse);
  color: #fff;
  padding: clamp(3rem, 1.5rem + 5vw, 5.5rem) 0 clamp(2.5rem, 1rem + 4vw, 4.5rem);
}
.page-hero .inner { max-width: 820px; margin: 0 auto; padding: 0 var(--gutter); }
.page-hero .eyebrow {
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cc-orange-400); margin: 0 0 14px;
}
.page-hero h1 {
  font-family: var(--font-headline); font-weight: 800; letter-spacing: -0.025em;
  font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.25rem); line-height: 1.08;
  margin: 0 0 16px; color: #fff;
}
.page-hero .lead {
  font-family: var(--font-body); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
  line-height: 1.65; color: rgba(255,255,255,0.8); margin: 0 0 28px; max-width: 640px;
}
.page-hero strong { color: #fff; }
.page-hero .actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.btn-primary, .btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 50px; padding: 13px 26px; border-radius: 999px;
  font-family: var(--font-headline); font-weight: 700; font-size: 16px;
  text-decoration: none; cursor: pointer; border: 2px solid transparent;
  transition: opacity 120ms ease;
}
.btn-primary { background: var(--accent-secondary); color: #fff; }
.btn-primary:hover { opacity: 0.92; color: #fff; }
.btn-ghost { border-color: rgba(255,255,255,0.4); color: #fff; background: transparent; }
.btn-ghost:hover { border-color: #fff; color: #fff; }
.page-article .btn-ghost { border-color: var(--accent-primary); color: var(--accent-primary); }

/* article body reuses .legal-article type scale via .page-article */
.page-article {
  max-width: 820px; margin: 0 auto;
  padding: clamp(2.5rem, 1rem + 4vw, 4rem) var(--gutter) clamp(3rem, 1rem + 5vw, 5rem);
  font-family: var(--font-body); color: var(--text-body);
  font-size: 16.5px; line-height: 1.7;
}
.page-article h2 {
  font-family: var(--font-headline); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); color: var(--text-strong);
  margin: 52px 0 14px;
}
.page-article h2:first-child { margin-top: 0; }
.page-article h3 {
  font-family: var(--font-headline); font-weight: 700; font-size: 19px;
  color: var(--text-strong); margin: 30px 0 10px;
}
.page-article p { margin: 0 0 16px; }
.page-article ul { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 9px; }
.page-article strong { color: var(--text-strong); }

.formula {
  background: var(--cc-blue-50); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 18px 22px; margin: 0 0 16px;
  font-family: var(--font-headline); font-weight: 700; font-size: 17px;
  color: var(--text-strong); text-align: center;
}
.note-callout {
  position: relative;
  background: var(--cc-orange-50); border-radius: var(--radius-lg);
  padding: 16px 20px 16px 52px; margin: 0 0 16px; font-size: 15.5px;
}
.note-callout::before { content: "!"; position: absolute; left: 18px; top: 17px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent-secondary); color: #fff; font-weight: 800; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center; }

.fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 0 0 16px; padding: 0; list-style: none; }
.fact-grid li {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 18px 20px; font-size: 15px; line-height: 1.55;
}
.fact-grid li strong { display: block; font-family: var(--font-headline); font-size: 16px; margin-bottom: 6px; }

.case-card {
  background: var(--surface-inverse); color: rgba(255,255,255,0.85);
  border-radius: var(--radius-xl); padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); margin: 0 0 16px;
}
.case-card h3 { color: #fff; margin-top: 0; }
.case-card .vs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0; }
.case-card .vs > div { background: rgba(255,255,255,0.07); border-radius: var(--radius-lg); padding: 16px 18px; }
.case-card .vs .label { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.6); margin-bottom: 6px; }
.case-card .vs .amount { font-family: var(--font-headline); font-weight: 800; font-size: 28px; color: #fff; }
.case-card .vs .up { color: var(--cc-orange-400); }

.cta-band {
  background: var(--surface-muted); border-top: 1px solid var(--border-subtle);
}
.cta-band .inner {
  max-width: 820px; margin: 0 auto; padding: clamp(2.5rem, 1rem + 3vw, 3.5rem) var(--gutter);
  text-align: center;
}
.cta-band h2 {
  font-family: var(--font-headline); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); color: var(--text-strong); margin: 0 0 10px;
}
.cta-band p { font-family: var(--font-body); font-size: 16px; color: var(--text-body); margin: 0 0 24px; }
.cta-band .actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-band .btn-ghost { border-color: var(--accent-primary); color: var(--accent-primary); }
.cta-band .fine { font-size: 13.5px; color: var(--text-muted); margin: 16px 0 0; }

.related-nav { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.related-nav a {
  font-family: var(--font-body); font-weight: 600; font-size: 14px;
  padding: 9px 16px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--border-subtle); background: var(--surface-card); color: var(--text-body);
}
.related-nav a:hover { border-color: var(--accent-primary); color: var(--accent-primary); }

@media (max-width: 640px) { .case-card .vs { grid-template-columns: 1fr; } }