/* core: legal, platform-duty and explainer pages. Builds on static/base.css; token values only. */

/* page head: eyebrow, h1, lead and actions above the page body (brand VB-04) */
.page-head { padding-top: var(--s4); } /* the bottom space is base.css's shared margin */
.page-head h1 { max-width: 24ch; color: var(--navy); }
.page-head .lead { margin: 0; }
.page-head .mascot { margin: 0 0 var(--s4); }
.cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }

/* legal pages: table of contents beside the text from 1025 px */
.legal { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
@media (min-width: 1025px) {
  .legal.has-toc { grid-template-columns: 240px minmax(0, 1fr); align-items: start; }
  .legal .toc { position: sticky; top: var(--s4); }
}
.toc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4) var(--s5); font-size: 14px; }
.toc h2 { font-family: var(--f-text); font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 var(--s3); }
.toc ol, .toc ul { margin: 0; padding-left: var(--s5); }
.toc ul.toc-plain { list-style: none; padding-left: 0; margin-bottom: var(--s3); }
.toc p { margin: 0 0 var(--s1); font-weight: 600; }
.toc li { margin-bottom: var(--s1); }
.toc a { color: var(--text); text-decoration: none; }
.toc a:visited { color: var(--text); }
.toc a:hover { color: var(--accent-text); text-decoration: underline; }

.prose.legal-body { max-width: 72ch; }
.legal-body h2 { scroll-margin-top: var(--s4); }
.legal-body h3 { scroll-margin-top: var(--s4); }
.legal-body .construction { background: var(--paper-2); color: var(--text); border-left: 4px solid var(--navy); border-radius: var(--r-sm); padding: var(--s3) var(--s4); margin: var(--s4) 0; }
.legal-body .construction p:last-child { margin-bottom: 0; }
.legal-meta { margin-top: var(--s7); padding-top: var(--s4); border-top: 1px solid var(--line); font-size: 14px; color: var(--text-muted); }
.legal-meta dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--s1) var(--s4); margin: 0; }
.legal-meta dt { font-weight: 600; }
.legal-meta dd { margin: 0; }
.legal-body table td, .legal-body table th { white-space: normal; }
.legal-body .table td.num, .legal-body .table th.num { white-space: nowrap; }

/* explainer blocks */
.steps { list-style: none; padding: 0; margin: 0 0 var(--s6); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s4); counter-reset: step; }
.steps li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4) var(--s4) var(--s4) calc(var(--s6) + var(--s5)); position: relative; }
.steps li::before { counter-increment: step; content: counter(step); position: absolute; left: var(--s4); top: var(--s4); width: var(--s6); height: var(--s6); border-radius: var(--r-full); background: var(--navy); color: var(--paper); font-family: var(--f-display); font-weight: 700; display: grid; place-items: center; }
.steps h3 { font-size: 16px; margin-bottom: var(--s1); color: var(--navy); }
.steps p { margin: 0; color: var(--text-muted); }
.compare { margin-bottom: var(--s6); }
.compare .table td.num, .compare .table th.num { white-space: nowrap; }
.compare .table tr.total td { font-weight: 600; background: var(--paper-2); color: var(--text); }
.compare .table td.ours, .compare .table th.ours { background: var(--success-bg); color: var(--text); }
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s4); list-style: none; padding: 0; margin: 0 0 var(--s6); }
.pillars li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); }
.pillars h3 { font-size: 16px; margin-bottom: var(--s2); color: var(--navy); }
.pillars p { margin: 0; }
.faq dt { font-weight: 600; color: var(--navy); margin-top: var(--s4); }
.faq dd { margin: var(--s1) 0 0; }

/* contact and the notice flow */
.contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s4); margin-bottom: var(--s6); }
.contact-cards .panel { margin: 0; }
.contact-cards h2 { font-size: 20px; line-height: 1.25; }
.panel h2 { font-size: 20px; line-height: 1.25; }
.notice-form fieldset { background: var(--surface); }
.notice-ref { font-family: var(--f-mono); font-size: 20px; font-weight: 600; letter-spacing: 0.06em; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--s2) var(--s5); margin: 0; }
.facts dt { font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); padding-top: 3px; }
.facts dd { margin: 0; }
@media (max-width: 400px) {
  .facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .facts dd { margin-bottom: var(--s3); }
}