/* Vortex: Terms and privacy pages. Privacy rules first, then .tos-summary (terms only).
   Restyled in step 12 with CSS only: the legal markup and wording are frozen. */
/* Live-only states: the live site renders these, no page in the static copy does.
   Keep them, and check them on _states.html (dev only) after any shared restyle:
   .tos-draft */

.tos-wrap { max-width: 74ch; margin: 0 auto; padding: 56px 24px 112px; }
.tos-wrap h1 {
  margin: 28px 0 8px !important;
  font-family: var(--font-display);
  font-size: calc(clamp(2.5rem, 5vw, 3.5rem) * var(--display-scale));
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: var(--display-tracking);
  color: var(--text);
  text-wrap: balance;
}
.tos-wrap h2 { margin: 56px 0 12px; padding-top: 20px; border-top: 1px solid var(--line); font-family: var(--font-body); font-size: 1.25rem; font-weight: 600; color: var(--text); }
.tos-wrap h3 { margin: 28px 0 8px; font-family: var(--font-body); font-size: 1.0625rem; font-weight: 600; color: var(--text); }
.tos-wrap p, .tos-wrap li { font-size: 1rem; line-height: 1.75; color: #C5CAD3; }
.tos-wrap li + li { margin-top: 6px; }
.tos-wrap strong { font-weight: 600; color: var(--text); }
.tos-meta { font-size: 0.875rem; color: var(--text-2) !important; }
.tos-draft {
  margin: 24px 0 8px; padding: 14px 18px;
  background: var(--gold-soft); border: 1px solid var(--gold-line); border-radius: var(--radius-panel);
  font-size: 0.875rem; color: var(--gold);
}
.callout, .tos-summary {
  margin: 28px 0; padding: 20px 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel);
}
.callout p { margin: 0; }
.tos-summary ul { margin: 10px 0 0; padding-left: 20px; }
.tbl { width: 100%; margin: 16px 0; border-collapse: collapse; font-size: 0.9375rem; }
.tbl th, .tbl td { padding: 12px 16px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); color: #C5CAD3; }
.tbl th { font-weight: 600; color: var(--text); }
.tbl-wrap { overflow-x: auto; }

/* The back link's colour is set inline in the frozen legal markup; match the site's link hover. */
.tos-wrap > a[href="index.html"][style] { color: var(--text-2) !important; }
@media (hover: hover) and (pointer: fine) {
  .tos-wrap > a[href="index.html"][style]:hover { color: var(--cyan) !important; }
}