/* Legal pages: terms, privacy, refunds. Set like a printed instrument —
   a measured text column, a quiet contents rail, ruled section breaks. */

.legal-head { padding: 190px 0 64px; border-bottom: 1px solid var(--rule); }
.legal-head .label { display: block; margin-bottom: 28px; }
.legal-head h1 {
  font-family: var(--serif); font-weight: 300; letter-spacing: -.024em; line-height: 1;
  font-size: clamp(2.8rem, 6vw, 5.6rem); margin: 0; font-variation-settings: "opsz" 72;
}
.legal-head .meta { margin-top: 32px; display: flex; gap: 28px; flex-wrap: wrap; font: 400 11.5px/1.6 var(--mono); letter-spacing: .06em; color: var(--stone); }

.legal { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 7vw; padding: 72px var(--gutter) 140px; align-items: start; }
.toc { position: sticky; top: 100px; }
.toc h4 { font: 500 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--stone); margin: 0 0 18px; }
.toc a { display: block; font-size: 13.5px; color: var(--stone); padding: 7px 0 7px 14px; border-left: 1px solid var(--rule); transition: color .3s, border-color .3s; }
.toc a:hover { color: var(--bone); border-left-color: var(--brass); }

.doc { max-width: 70ch; }
.doc h2 {
  font-family: var(--serif); font-weight: 400; font-size: 1.75rem; letter-spacing: -.012em; line-height: 1.2;
  margin: 64px 0 18px; padding-top: 30px; border-top: 1px solid var(--rule); scroll-margin-top: 96px;
}
.doc h2:first-of-type { margin-top: 0; }
.doc h3 { font: 500 1rem/1.4 var(--sans); margin: 30px 0 10px; color: var(--bone); }
.doc p, .doc li { color: var(--bone-2); font-size: 15.5px; line-height: 1.75; }
.doc ul, .doc ol { padding-left: 22px; margin: 0 0 1.2em; }
.doc li { margin-bottom: 8px; }
.doc li::marker { color: var(--brass-lo); }
.doc strong { color: var(--bone); font-weight: 500; }
.doc a { color: var(--brass-hi); border-bottom: 1px solid var(--brass-lo); }
.doc table { width: 100%; border-collapse: collapse; margin: 22px 0 30px; font-size: 14.5px; }
.doc th, .doc td { text-align: left; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: top; color: var(--bone-2); }
.doc th { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--stone); }
.doc table td:first-child { color: var(--bone); width: 34%; }
.doc code { font-family: var(--mono); font-size: .86em; color: var(--bone); }

/* Placeholders that must be filled before this goes anywhere near a customer. */
.ph {
  font-family: var(--mono); font-size: .82em; color: var(--brass-hi);
  background: rgba(184, 147, 92, .1); border: 1px dashed var(--brass-lo);
  padding: 1px 7px; white-space: nowrap;
}

.notice { border: 1px solid var(--rule-2); border-left: 2px solid var(--seal-hi); padding: 22px 26px; margin-bottom: 52px; background: var(--ink-1); }
.notice h3 { margin: 0 0 8px; color: var(--bone); font: 500 11px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.notice p { margin: 0; font-size: 14.5px; color: var(--stone); }

.callout { border-left: 2px solid var(--brass); padding: 4px 0 4px 26px; margin: 28px 0; }
.callout p { font-family: var(--serif); font-size: 1.22rem; line-height: 1.5; color: var(--bone); }
.callout p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .legal { grid-template-columns: 1fr; gap: 36px; padding-top: 48px; }
  .toc { position: static; }
  .toc a { display: inline-block; border-left: 0; padding: 4px 14px 4px 0; }
}

/* Contact: the form in the reading column, other ways to reach us in the rail. */
.ct { max-width: 640px; }
.ct-side p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--stone); }
.ct-side p b { color: var(--bone-2); font-weight: 500; }
.ct-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.ct-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; margin-top: 8px; }
.doc .ct-small { margin: 0; font-size: 13px; line-height: 1.6; color: var(--stone); }
.ct-err { margin: 0 0 26px; padding: 14px 18px; border: 1px solid var(--rule-2); border-left: 2px solid var(--seal-hi); background: var(--ink-1); font-size: 14.5px; line-height: 1.6; color: var(--bone-2); }
.ct-err[hidden] { display: none; }
.ct-done { padding: 8px 0 20px; }
.ct-done .label { display: block; }
.doc .ct-done h2 { margin: 20px 0 14px; padding-top: 0; border-top: 0; font-weight: 300; font-size: clamp(2rem, 3.4vw, 2.8rem); letter-spacing: -.02em; }
@media (max-width: 640px) { .ct .two { grid-template-columns: 1fr; } }