/* Customer-facing legal pages (Terms & Conditions). Sunwave Bento-Box Soft
   Minimalism. Palette comes from tokens.css (loaded first). Used by the
   standalone /terms page AND embedded at the bottom of the estimate-approval
   page, so keep the .legal-* content classes self-contained. */

.legal-shell { max-width: 760px; margin: 0 auto; padding: 40px clamp(18px, 4vw, 32px) 96px; }

/* Standalone-page header (not rendered when embedded in the estimate page) */
.legal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 14px; }
.legal-brand { display: flex; align-items: center; gap: 12px; }
.legal-logo { height: 40px; width: auto; display: block; }
.legal-brand-name { font-weight: 600; font-size: 17px; line-height: 1.2; }
.legal-brand-sub { font-size: 13.5px; color: var(--sw-muted, #7B8190); }

.legal-card {
  background: var(--sw-card, #FCFAF6);
  border: 1px solid var(--sw-border, #E5DED3);
  border-radius: var(--sw-radius-card, 24px);
  box-shadow: 0 20px 48px var(--sw-shadow, rgba(55, 59, 77, 0.08));
  padding: clamp(24px, 4vw, 40px);
}
.legal-title { font-size: 28px; font-weight: 700; margin: 0 0 4px; line-height: 1.2; color: var(--sw-ink-deep, #373B4D); }

/* Document body (shared by the standalone page and the embedded version) */
.legal-doc { color: var(--sw-ink, #373B4D); }
.legal-meta { font-size: 13.5px; color: var(--sw-muted, #7B8190); margin: 6px 0 22px; }
.legal-intro { font-size: 16px; line-height: 1.7; margin: 0 0 8px; }
.legal-h { font-size: 17px; font-weight: 700; margin: 26px 0 8px; line-height: 1.35; color: var(--sw-ink-deep, #373B4D); }
.legal-h--caps { letter-spacing: .3px; }
.legal-p { font-size: 15.5px; line-height: 1.7; margin: 0 0 10px; color: var(--sw-ink, #373B4D); }
.legal-p--lead { font-size: 16px; }
.legal-doc a { color: var(--sw-orange-dark, #C66518); }

/* Conspicuous blocks, disclaimers, liability cap, and arbitration. Courts
   often expect these to stand out, so they get a tinted, bordered card. */
.legal-callout {
  background: var(--sw-card-lift, #FFFDF9);
  border: 1px solid var(--sw-border, #E5DED3);
  border-radius: 16px;
  padding: 16px 20px 6px;
  margin: 22px 0;
}
.legal-callout .legal-h { margin-top: 6px; }
.legal-callout--strong {
  background: var(--sw-orange-soft, #FFEEDC);
  border: 1.5px solid var(--sw-orange, #F39A63);
}
.legal-callout--strong .legal-h { color: var(--sw-orange-dark, #C66518); }