/* What the landing and its legal pages share: the consent question, the footer's links, and the legal pages' prose. Read after tokens.css. */

/* hidden is hidden, whatever display a class gives the element */
[hidden] { display: none !important; }

/* the consent question stands at the foot, over the footer's row rather than on it, on the landing's glass; it never covers the page, and both answers are one press and look the same */
.consent { position: fixed; inset-block-end: var(--space-7); inset-inline: var(--space-4); margin-inline: auto; max-inline-size: 40rem; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5); border-radius: var(--radius-lg); background: color-mix(in oklab, var(--ground) 55%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--shadow-pop), 0 0 0 1px var(--hairline); font: var(--weight-body) var(--text-sm)/var(--leading) var(--font-sans); color: var(--ink-muted); }
.consent p { flex: 1 1 18rem; margin: 0; }
.consent a { color: var(--ink); }
.consent-do { display: flex; gap: var(--space-2); }
.consent button { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; block-size: 40px; padding-inline: var(--space-4); border-radius: var(--radius-pill); border: 1px solid var(--hairline-strong); color: var(--ink); font-weight: var(--weight-strong); cursor: pointer; white-space: nowrap; transition: background var(--dur) var(--ease); }
.consent button:hover { background: var(--sunken); }
.consent button:focus-visible { outline: var(--focus-w) solid var(--ring); outline-offset: var(--focus-offset); }

/* the footer's links: privacy, terms, cookies, and the question again */
.legal { display: flex; flex-wrap: wrap; gap: var(--space-4); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--track-mono); }
.legal a, .legal button { all: unset; cursor: pointer; color: var(--ink-faint); transition: color var(--dur) var(--ease); }
.legal a:hover, .legal button:hover { color: var(--ink); }
.legal a:focus-visible, .legal button:focus-visible { outline: var(--focus-w) solid var(--ring); outline-offset: var(--focus-offset); border-radius: var(--radius-sm); }

/* a legal page: the mark home, the words on one column, the footer */
.doc { background: var(--ground); color: var(--ink); font: var(--weight-body) var(--text-body)/var(--leading) var(--font-sans); margin: 0; -webkit-font-smoothing: antialiased; }
.doc > header, .doc > main, .doc > footer { max-inline-size: 44rem; margin-inline: auto; padding-inline: var(--space-5); }
.doc > header { display: flex; align-items: center; justify-content: space-between; block-size: 64px; }
.doc .home { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-family: "Outfit", var(--font-sans); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; }
.doc > main { padding-block: var(--space-6) var(--space-7); }
.doc .eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--track-mono); color: var(--ink-faint); margin: 0; }
.doc h1 { font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.1; letter-spacing: -0.02em; margin: var(--space-2) 0 var(--space-3); font-weight: var(--weight-strong); }
.doc .lede { color: var(--ink-muted); margin: 0; }
.doc .updated { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-faint); margin: var(--space-3) 0 var(--space-6); }
.doc h2 { font-size: var(--text-lg); margin: var(--space-6) 0 var(--space-2); font-weight: var(--weight-strong); }
.doc h3 { font-size: var(--text-body); margin: var(--space-5) 0 var(--space-2); font-weight: var(--weight-strong); }
.doc p, .doc li { color: var(--ink-muted); }
.doc strong { color: var(--ink); font-weight: var(--weight-strong); }
.doc main a { color: var(--ink); text-decoration-color: var(--hairline-strong); text-underline-offset: 3px; }
.doc main a:hover { text-decoration-color: var(--ink); }
.doc ul { padding-inline-start: var(--space-5); }
.doc .table { overflow-x: auto; margin-block: var(--space-4); }
.doc table { inline-size: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.doc th, .doc td { text-align: start; vertical-align: top; padding: var(--space-2) var(--space-3) var(--space-2) 0; border-block-end: 1px solid var(--hairline); }
.doc th { color: var(--ink); font-weight: var(--weight-strong); }
.doc td { color: var(--ink-muted); }
.doc main button { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; block-size: 40px; padding-inline: var(--space-4); border-radius: var(--radius-pill); border: 1px solid var(--hairline-strong); color: var(--ink); font-weight: var(--weight-strong); font-size: var(--text-sm); cursor: pointer; }
.doc main button:hover { background: var(--sunken); }
.doc main button:focus-visible { outline: var(--focus-w) solid var(--ring); outline-offset: var(--focus-offset); }
.doc > footer { padding-block: var(--space-5) var(--space-7); border-block-start: 1px solid var(--hairline); }