/* Rally — legal document pages. Layered on top of styles.css for the tokens. */

body { background: var(--cream); }

.doc {
  max-width: calc(860 * var(--px));
  margin-inline: auto;
  padding: calc(96 * var(--px)) calc(64 * var(--px)) calc(140 * var(--px));
}

.doc h1 {
  font-size: calc(76 * var(--px));
  line-height: 1.0;
  letter-spacing: -0.025em;
  font-weight: 400;
  color: var(--forest);
  margin: 0 0 calc(24 * var(--px));
}

.doc__meta {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--px)) calc(28 * var(--px));
  font-size: calc(15 * var(--px));
  color: var(--ink-faint);
  padding-bottom: calc(40 * var(--px));
  border-bottom: 1px solid var(--line);
  margin-bottom: calc(48 * var(--px));
}

.doc h2 {
  font-size: calc(30 * var(--px));
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--forest);
  margin: calc(64 * var(--px)) 0 calc(16 * var(--px));
}
.doc h2:first-of-type { margin-top: 0; }

.doc h3 {
  font-size: calc(21 * var(--px));
  line-height: 1.3;
  font-weight: 500;
  color: var(--ink);
  margin: calc(34 * var(--px)) 0 calc(10 * var(--px));
}

.doc p,
.doc li {
  font-size: calc(18 * var(--px));
  line-height: 1.62;
  color: var(--ink-soft);
  max-width: 68ch; /* the column itself runs ~95ch at 1440, too wide to track */
}
.doc p { margin: 0 0 calc(18 * var(--px)); }

.doc ul,
.doc ol { margin: 0 0 calc(22 * var(--px)); padding-left: calc(24 * var(--px)); }
.doc li { margin-bottom: calc(9 * var(--px)); }
.doc li::marker { color: var(--ink-faint); }

.doc a { color: var(--forest); text-decoration: underline; text-underline-offset: 0.18em; }
.doc strong { color: var(--ink); font-weight: 500; }

.callout {
  border: 1px solid var(--line);
  background: var(--wash);
  border-radius: calc(16 * var(--px));
  padding: calc(24 * var(--px)) calc(28 * var(--px));
  margin: calc(28 * var(--px)) 0;
}
.callout::before {
  content: "Note";
  display: block;
  font-size: calc(13 * var(--px));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--forest);
  margin-bottom: calc(10 * var(--px));
}
.callout p:last-child { margin-bottom: 0; }

.doc table {
  width: 100%;
  border-collapse: collapse;
  margin: calc(24 * var(--px)) 0 calc(30 * var(--px));
  font-size: calc(16 * var(--px));
}
.doc th,
.doc td {
  text-align: left;
  vertical-align: top;
  padding: calc(14 * var(--px)) calc(16 * var(--px));
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
}
.doc th { color: var(--forest); font-weight: 500; border-bottom-color: var(--forest); }

.doc__scroll { overflow-x: auto; }

/* People print policies. Make that produce something readable. */
@media print {
  .doc-head .btn,
  .skip-link { display: none; }
  body { background: #fff; }
  .doc { max-width: none; padding: 0; }
  .doc p, .doc li { max-width: none; font-size: 10.5pt; line-height: 1.5; color: #000; }
  .doc h1 { font-size: 24pt; }
  .doc h2 { font-size: 14pt; margin-top: 22pt; break-after: avoid; }
  .doc h3 { font-size: 11.5pt; break-after: avoid; }
  .callout { border: 1pt solid #666; background: none; break-inside: avoid; }
  .doc a { color: #000; }
  .doc a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  table, tr, .doc li { break-inside: avoid; }
  .doc-foot { display: none; }
}

@media (max-width: 720px) {
  .doc { padding: calc(56 * var(--px)) calc(24 * var(--px)) calc(90 * var(--px)); }
  .doc h1 { font-size: calc(46 * var(--px)); }
  .doc h2 { font-size: calc(26 * var(--px)); margin-top: calc(48 * var(--px)); }
  .doc p, .doc li { font-size: calc(17 * var(--px)); }
}