/* The content pages' column (about, blog, careers, culture, help, press,
   support, tutorials and the legal pages): what .legal needs for markup the
   landing never uses — sub-headings, numbered lists, a timeline, questions,
   a definition list, the press marks, inline code — plus visible links.
   Every value is a token of css/style.css, so the column follows the
   landing's palette in both appearances. Every rule is scoped to .legal
   except the keyboard focus ring at the end, which every page takes. */

.legal a:not(.btn):not(.store-badge):not(.app-badge){text-decoration-line:underline;text-underline-offset:3px;color:var(--ink)}
.legal h3{font-size:17px;line-height:1.3;font-weight:600;letter-spacing:-0.008em;margin:24px 0 8px;color:var(--ink)}
.legal ol{list-style:decimal;padding-left:22px;margin:0 0 14px}
.legal .btn{margin:8px 0 14px}
.legal code{font-family:var(--font-mono);font-size:.9em;background:var(--paper-2);padding:2px 6px;border-radius:6px}
.legal strong{color:var(--ink);font-weight:600}

.legal .timeline{list-style:none;padding:0}
.legal .timeline li{border-top:1px solid var(--line);padding-top:18px;margin:0 0 18px}
.legal .timeline time{font-size:11px;line-height:14px;letter-spacing:0.14em;text-transform:uppercase;font-weight:600;color:var(--ink-3)}
.legal .timeline h2{margin:6px 0 8px}

.legal details{border-top:1px solid var(--line);padding:14px 0}
.legal details:last-of-type{border-bottom:1px solid var(--line)}
.legal summary{cursor:pointer;font-weight:600;font-size:16px;line-height:24px;color:var(--ink)}
.legal details p{margin:10px 0 0}

.legal dl{margin:0 0 14px}
.legal dt{font-weight:600;color:var(--ink)}
.legal dd{margin:0 0 14px;font-size:16px;line-height:1.65;color:var(--ink-2)}

.legal .press-marks{display:flex;flex-wrap:wrap;gap:16px;margin:0 0 14px}
.legal .press-marks figure{margin:0;display:grid;gap:8px}
.legal .press-mark{width:140px;height:140px;border-radius:var(--radius-card);display:grid;place-items:center;border:1px solid var(--line)}
.legal .press-mark svg{width:48px;height:62px}
.legal .press-mark-light{background:#fff;color:#1d1d1f}
.legal .press-mark-dark{background:#1d1d1f;color:#fff}
.legal .press-marks figcaption{font-size:13px;color:var(--ink-3)}

/* The keyboard focus ring (F-139). The design's own ring — 2px in the
   accent, set 2px off the element — which reads on paper and on the dark
   bands alike (4.6:1 on white, 4.3:1 on #09090c). Over a photograph the
   accent cannot be relied on, so the ring turns white there, as it did
   before. :focus-visible, never :focus, so a mouse click on a link or a
   button draws nothing; a browser also matches it when a text field is
   clicked, so the waitlist's fields are the one place a mouse sees it. */
:root :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
:root .banner :focus-visible,
:root .nf :focus-visible,
:root:has(.nf) .nav.on-dark :focus-visible{outline-color:#fff}