/* Founder rule: larger fixed boxes, glyphs smaller than a box. The grid alone
   provides the page structure; ornamental rules do not sit over it. */
:root { color-scheme: light; --paper-cell: 48px; --paper-ink: #303632; }
body {
  background-color: #fffefa;
  background-image:
    linear-gradient(rgb(157 181 199 / .23) 1px, transparent 1px),
    linear-gradient(90deg, rgb(157 181 199 / .23) 1px, transparent 1px);
  background-size: var(--paper-cell) var(--paper-cell);
}
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid #a73530;
  outline-offset: 5px;
}
::selection { background: #f0d4cc; color: #303632; }
/* Headings, prose and controls keep their glyphs within the 48px cell height.
   Words retain normal spacing; the paired-T artwork is an illustration. */
body:not(:has(.hero)) { color: var(--paper-ink); }
body:not(:has(.hero)) main { padding-inline: 24px; }
body:not(:has(.hero)) h1 { font-size: 36px; line-height: var(--paper-cell); margin-block: var(--paper-cell); }
body:not(:has(.hero)) h2 { font-size: 24px; line-height: var(--paper-cell); margin-block: var(--paper-cell) 0; }
body:not(:has(.hero)) h3 { font-size: 20px; line-height: var(--paper-cell); }
body:not(:has(.hero)) p, body:not(:has(.hero)) li { line-height: var(--paper-cell); }
body:not(:has(.hero)) .lead { font-size: 24px; line-height: var(--paper-cell); }
body:not(:has(.hero)) .notice { border: 0; background: none; padding: 0; }
body:not(:has(.hero)) th, body:not(:has(.hero)) td, body:not(:has(.hero)) tr,
body:not(:has(.hero)) footer { border: 0; }
body:not(:has(.hero)) .cta, body:not(:has(.hero)) button:not(:disabled) {
  background: #a73530; color: #fffefa;
}
body:not(:has(.hero)) nav a, body:not(:has(.hero)) footer a {
  display: inline-flex; align-items: center; min-height: var(--paper-cell);
}

/* Build 71 — the Terms follow the conventional legal-page pattern (left title, muted
   "Last updated" under it, plain prose, 16px system type, ~700px column). terms.html is
   fingerprinted, so it is styled from here, never edited; the date line is moved under
   the title with flex order only. Only the Terms page opens with its title followed by
   the beta notice, which scopes every rule below to it; other pages keep the paper grid. */
body:has(#content > h1 + .notice) {
  background-color: #ffffff; background-image: none; color: #1f2328;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body:has(#content > h1 + .notice) main { max-width: 764px; padding: 0 32px 64px; }
body:has(#content > h1 + .notice) nav[aria-label="Main"] {
  justify-content: flex-start; gap: 28px; flex-wrap: nowrap;
  padding: 0; border-bottom: 1px solid #e5e7ea; font-size: 15px;
}
body:has(#content > h1 + .notice) nav[aria-label="Main"] a { text-decoration: none; color: #1f2328; min-height: 56px; }
body:has(#content > h1 + .notice) nav[aria-label="Main"] a:first-child { margin-right: auto; font-weight: 600; }
body:has(#content > h1 + .notice) nav[aria-label="Main"] a:last-child { position: relative; }
body:has(#content > h1 + .notice) nav[aria-label="Main"] a:last-child::before { content: "·"; position: absolute; left: -17px; color: #8c959f; }
body:has(#content > h1 + .notice) nav[aria-label="Main"] a:hover { text-decoration: underline; }
body:has(#content > h1 + .notice) .body { display: flex; flex-direction: column; max-width: 700px; }
body:has(#content > h1 + .notice) h1 {
  order: -2; font-size: 36px; line-height: 44px; font-weight: 700; letter-spacing: -.02em;
  margin: 48px 0 8px; color: #1f2328;
}
body:has(#content > h1 + .notice) .notice + p {
  order: -1; font-size: 14px; line-height: 20px; color: #656d76; margin: 0 0 32px;
}
body:has(#content > h1 + .notice) .body p, body:has(#content > h1 + .notice) .body li { font-size: 16px; line-height: 1.6; margin: 0 0 16px; }
body:has(#content > h1 + .notice) .notice { border: 0; background: none; padding: 0; }
body:has(#content > h1 + .notice) .body h2 {
  font-size: 19px; line-height: 26px; font-weight: 600; letter-spacing: -.005em;
  margin: 32px 0 12px; color: #1f2328;
}
body:has(#content > h1 + .notice) .body a { color: #0b5cad; text-decoration: underline; text-underline-offset: 2px; }
body:has(#content > h1 + .notice) footer {
  margin-top: 56px; padding-top: 16px; border-top: 1px solid #e5e7ea;
  color: #656d76; font-size: 14px; justify-content: flex-start; gap: 24px;
}
body:has(#content > h1 + .notice) footer span { margin-right: auto; display: inline-flex; align-items: center; }
body:has(#content > h1 + .notice) footer a { min-height: 40px; }
body:has(#content > h1 + .notice) a:focus-visible { outline: 2px solid #0b5cad; outline-offset: 3px; }
/* terms.html shows its "On this page" list at >=1180px, 236px left of the column.
   Keep the column far enough right that the whole list stays on screen at 1180-1235px. */
@media (min-width: 1180px) {
  body:has(#content > h1 + .notice) main { margin-left: max(256px, calc((100% - 764px) / 2)); margin-right: auto; }
}
@media (max-width: 560px) {
  body:has(#content > h1 + .notice) main { padding: 0 20px 40px; }
  body:has(#content > h1 + .notice) h1 { font-size: 30px; line-height: 38px; margin-top: 36px; }
  body:has(#content > h1 + .notice) .body h2 { font-size: 18px; line-height: 25px; margin-top: 28px; }
}