/* CALIBER legal pages (terms / privacy / legal)                 assets/caliber-legal.css

   The pages use the redesign's chrome: caliber-aura.css (tokens, wordmark) and caliber-pages.css
   (header, breadcrumb, hero, "On this page" layout, footer), exactly like About and Veterans. This file
   only styles the documents themselves, in the same identity: charcoal ground, champagne gold for
   accents and links, Rajdhani for headings, Inter for reading text. Loaded after caliber-pages.css as a
   same-origin stylesheet (style-src 'self'). */

/* hero: version / date chips under the lead */
.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 24px;
  color: var(--nx-muted);
  font: 600 12px/1.4 var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.legal-meta span::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--nx-gold);
  vertical-align: 2px;
}
html body section.cp-hero--legal:not(#_) { padding-bottom: clamp(44px, 5vw, 72px); }
.cp-hero--legal h1 { max-width: 20ch; }

/* contents: the pages' "On this page" rail, numbered to match the sections */
.legal-toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; counter-reset: toc; }
.legal-toc li { counter-increment: toc; display: flex; gap: 6px; font-size: 15px; line-height: 1.4; }
.legal-toc li::before { content: counter(toc) "."; flex: none; min-width: 1.6em; padding: 7px 0; color: var(--nx-gold); font-variant-numeric: tabular-nums; }
.legal-toc a { display: block; padding: 7px 0; color: var(--nx-muted); text-decoration: none; }
.legal-toc a:hover { color: var(--nx-gold-bright); text-decoration: underline; text-underline-offset: 3px; }
.legal-toc a:focus-visible { outline: 2px solid var(--cta-focus); outline-offset: 3px; border-radius: 4px; }
@media (min-width: 981px) {
  .legal-toc { max-height: calc(100vh - 120px); overflow-y: auto; }
}

/* document */
.legal-layout { padding-bottom: clamp(56px, 7vw, 96px); }
.legal-doc { max-width: 78ch; font-size: 17px; line-height: 1.75; color: var(--nx-muted); counter-reset: sec; overflow-wrap: anywhere; }
.legal-doc h2 {
  counter-increment: sec;
  position: relative;
  margin: 52px 0 16px;
  padding-bottom: 12px;
  font-family: var(--font-head);
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.05;
  color: var(--nx-text);
  scroll-margin-top: 96px;
}
.legal-doc h2::before { content: counter(sec) ". "; color: var(--nx-gold); }
.legal-doc h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 48px; height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--nx-gold-bright), var(--nx-gold-deep));
}
.legal-doc h2:first-of-type { margin-top: 0; }
.legal-doc h3 { margin: 28px 0 8px; font: 600 19px/1.35 var(--font-body); color: var(--nx-text); text-transform: none; letter-spacing: 0; }
.cp .legal-doc p { margin: 0 0 14px; color: var(--nx-muted); }
.legal-doc ul, .legal-doc ol { margin: 0 0 14px; padding-left: 22px; }
.legal-doc li { margin: 6px 0; }
.legal-doc li::marker { color: var(--nx-gold); }
.legal-doc strong { color: var(--nx-text); font-weight: 600; }
.cp .legal-doc a { color: var(--nx-gold); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cp .legal-doc a:hover { color: var(--nx-gold-bright); }
.legal-doc a:focus-visible { outline: 2px solid var(--cta-focus); outline-offset: 3px; border-radius: 4px; }

/* plain-English summary: the pages' gold-rail callout */
.legal-note {
  margin: 0 0 32px;
  padding: 18px 22px;
  border: 1px solid var(--nx-line);
  border-left: 3px solid var(--nx-gold);
  border-radius: var(--radius-panel);
  background: linear-gradient(90deg, rgba(230, 198, 129, .06), rgba(21, 23, 29, .6));
  line-height: 1.7;
}
.legal-note strong { color: var(--nx-gold-bright); }

/* the one unfilled value ([State]) stays visibly marked until it is filled in */
.legal-placeholder { padding: 0 6px; border: 1px dashed rgba(255, 179, 179, .6); border-radius: 4px; background: rgba(226, 106, 106, .16); color: #FFB3B3; font-weight: 700; }

.legal-related { margin-top: 48px; padding-top: 18px; border-top: 1px solid rgba(230, 198, 129, .12); font-size: 15px; color: #A39DAD; }

@media (max-width: 640px) {
  .legal-doc { font-size: 16px; }
  .legal-doc h2 { margin-top: 40px; }
}