/*
 * Privacy statement (static/privacy.html).
 *
 * A reading page, not a landing page: one measure, one type scale, nothing
 * that moves. It borrows the palette and the base type from
 * static/css/product-alt/base.css so it is recognisably the same site, and
 * defines its own header and footer rather than pulling in that page's
 * sections.css, which is 300 lines of hero, marquee and device frames this
 * page has no use for.
 *
 * The decision control in section 5 reuses the banner's buttons from
 * static/css/shared-consent.css - one definition of what "accept" and
 * "decline" look like, wherever the question is asked.
 */

/* ── Header ─────────────────────────────────────────────────────────────── */
.head{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line)}
.head .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:16px;height:64px}
.brand{display:flex;align-items:center;gap:12px;font:700 16px/1 var(--sans);
  letter-spacing:-.01em}
.brand img{width:26px;height:26px}
.head-right{display:flex;align-items:center;gap:18px}
.backlink{font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-60)}
.backlink:hover{color:var(--ink)}

/* The DE/EN switch itself is styled in product-alt/base.css, which this page
 * links too - the landing page carries the same pill. */

/* ── The text ───────────────────────────────────────────────────────────── */
.legal{padding:clamp(40px,6vw,80px) 0 clamp(56px,8vw,110px)}
.legal .wrap{max-width:760px}

.legal h1{font-weight:700;letter-spacing:-.03em;line-height:1.08;
  font-size:clamp(30px,5vw,52px);margin:0 0 10px}
.legal .updated{font:500 11px/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-40);margin:0 0 28px}
.legal .lead{font-size:18px;color:var(--ink-60);margin:0 0 12px}

.legal section{padding-top:34px;margin-top:34px;border-top:1px solid var(--line)}
.legal h2{font-size:20px;letter-spacing:-.015em;margin:0 0 14px}
.legal p{margin:0 0 12px}
.legal p:last-child{margin-bottom:0}
.legal a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}

/* ── The cookie table ───────────────────────────────────────────────────── */
/* Its own scroller: four columns do not fit a phone, and a page that scrolls
 * sideways as a whole because of one table is the worse failure. */
.table-scroll{overflow-x:auto;margin-top:18px}
.legal table{border-collapse:collapse;width:100%;min-width:560px;font-size:14px}
.legal th,.legal td{text-align:left;vertical-align:top;padding:12px 14px;
  border-bottom:1px solid var(--line)}
.legal th{font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-40);border-bottom-color:var(--ink-40)}
.legal td{color:var(--ink-60)}
.legal td.mono{font-family:var(--mono);font-size:13px;color:var(--ink);
  word-break:break-all}

/* ── The decision ───────────────────────────────────────────────────────── */
.choice-state{background:var(--tint);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;color:var(--ink);font-weight:500}
.choice-actions{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 14px}
.choice-note{font-size:14px;color:var(--ink-60)}
/* The stored decision, marked on the button that carries it. */
.choice-actions .consent-btn[aria-pressed="true"]{box-shadow:0 0 0 2px var(--accent-3)}

/* ── Footer ─────────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:28px 0}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px;align-items:center;
  justify-content:space-between}
footer span{font:700 13px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
footer nav{display:flex;gap:22px}
footer nav a{font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-60)}
footer nav a:hover{color:var(--ink)}