/* Aste — legal pages.
   Composed from the app's design tokens (architecture.md §12, DS v0.24 "App Store flat"):
   flat #000 ground, #1C1C1E surfaces, #FFFFFF29 hairlines, the four text alphas,
   accent #3D9665, SF Pro. Two web-only values are documented at their declarations. */

:root {
  --bg: #000000;
  --surface: #1C1C1E;
  --hairline: #FFFFFF29;
  --text-primary: #FFFFFF;
  --text-secondary: rgba(235, 235, 245, 0.65);
  --text-tertiary: rgba(235, 235, 245, 0.55);
  --text-muted: rgba(235, 235, 245, 0.40);
  --accent: #3D9665;

  /* Every type size here is on §12's scale: 34 / 24 / 22 / 17 / 13 / 10.
     Tracking is computed rather than picked — headings at size x -0.022
     (OrkaTracking.heading), the table header at 0.06em (OrkaTracking.label).
     The one media query left changes padding only; no size is overridden,
     because §12's scale is already a phone scale.

     Exactly two values are web-only, and they are the whole declared deviation:

       1. The body is 17/28. The size is on the scale (OrkaFont.headline, 17/22);
          the LEADING is not. 22 is a phone leading for a line read in a glance,
          and these are documents read end to end. Body leading does NOT cascade
          to smaller text: everything below 17 sets its own token leading.
       2. The measure is capped at 68ch. The app has no measure token because a
          phone column is its own cap; a laptop is not.

     Nothing else departs. Spacing is OrkaSpacing (4/8/12/16/20/24/32/40), radii
     are OrkaRadius, and tracking is computed as size x -0.022 per §12 rather than
     hand-picked per site. */
  --body-size: 17px;
  --body-leading: 1.65;
  --measure: 68ch;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--body-size);
  line-height: var(--body-leading);
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--measure); margin: 0 auto; padding: 40px 24px 40px; }

/* Masthead ------------------------------------------------------------- */
.masthead { padding-bottom: 24px; border-bottom: 1px solid var(--hairline); margin-bottom: 40px; }
.wordmark { display: inline-block; text-decoration: none; }
/* White-on-transparent, which is what the flat #000 ground wants. web/wordmark.svg has
   its viewBox cropped to the letters, so height IS the letter height and the left edge of
   the box is the left edge of the A — no negative margin, and the mark aligns with the
   text beneath it. `display:block` kills the inline baseline gap. */
.wordmark img { display: block; height: 22px; width: auto; }
.masthead nav { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 20px; }
.masthead nav a { font-size: 13px; line-height: 1.231; color: var(--text-secondary); text-decoration: none; }
.masthead nav a:hover { color: var(--text-primary); }
.masthead nav a[aria-current="page"] { color: var(--text-primary); }

/* Type ----------------------------------------------------------------- */
h1 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  font-size: 34px; line-height: 1.206; font-weight: 700; letter-spacing: -0.748px;
  margin: 0 0 12px;
}
h2 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  font-size: 24px; line-height: 1.167; font-weight: 700; letter-spacing: -0.528px;
  margin: 40px 0 12px;
}
h3 { font-size: 17px; line-height: 1.294; font-weight: 600; margin: 32px 0 8px; }
p, ul, ol { margin: 0 0 20px; }
ul, ol { padding-left: 20px; }
li { margin-bottom: 8px; }
a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
strong { font-weight: 600; }

.standfirst { font-size: 17px; color: var(--text-secondary); margin-bottom: 8px; }
.updated { font-size: 13px; line-height: 1.462; color: var(--text-muted); margin: 0 0 8px; }

/* Surfaces ------------------------------------------------------------- */
.card {
  background: var(--surface);
  border-radius: 20px;
  padding: 20px 24px;
  margin: 24px 0;
}
.card :first-child { margin-top: 0; }
.card :last-child { margin-bottom: 0; }

/* Tables --------------------------------------------------------------- */
.table-scroll { overflow-x: auto; margin: 24px 0; }
table { width: 100%; border-collapse: collapse; font-size: 17px; }
th, td { text-align: left; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--hairline); vertical-align: top; }
th { font-size: 10px; line-height: 1.2; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; }
td { color: var(--text-secondary); }
td:first-child { color: var(--text-primary); }

/* Footer --------------------------------------------------------------- */
footer {
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--hairline);
  font-size: 13px; line-height: 1.462; color: var(--text-muted);
}
footer a { color: var(--text-secondary); }

@media (max-width: 600px) {
  .wrap { padding: 32px 20px 40px; }
}