/* legal.css: long-form prose for /terms and /privacy, in both languages.
   Loaded AFTER /features/features.css, which supplies the tokens, the nav and
   the footer. Only what a legal document needs is here: a measure narrow
   enough to read, numbered sections that can be cited, and a table that
   survives a phone. Nothing in this file is used anywhere else on the site. */

.legal-head{padding:150px 0 46px;background:var(--mist);border-bottom:1px solid var(--line)}
.legal-head h1{font-size:clamp(32px,4.6vw,50px)}
.legal-head .sub{margin-top:16px;color:var(--ink-2);font-size:17px;max-width:44em}
.legal-meta{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px 28px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.legal-meta b{color:var(--ink-2);font-weight:700}
/* Addresses and other literals keep their own case: Turkish uppercasing
   renders a lowercase i as İ, so privacy@ became PRİVACY@ on /tr/. */
.legal-meta .lit{text-transform:none}

/* The unfinished-business banner. Deliberately loud, and deliberately the
   thing you have to delete by hand before these pages are true. */
.legal-draft{margin:28px 0 0;border:2px solid var(--gold);border-radius:12px;background:#FFF9E8;padding:18px 20px}
.legal-draft h2{font-size:15px;letter-spacing:0;margin-bottom:8px}
.legal-draft p,.legal-draft li{font-size:14px;color:var(--ink-2);line-height:1.6}
.legal-draft ul{margin:8px 0 0 18px}
mark.todo{background:var(--gold);color:var(--ink);padding:1px 6px;border-radius:4px;font-family:var(--mono);font-size:.86em;font-weight:700;white-space:nowrap}

.legal-body{padding:56px 0 90px}
.legal-grid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:56px;align-items:start}
@media(max-width:900px){.legal-grid{grid-template-columns:1fr;gap:34px}}

.legal-toc{position:sticky;top:96px}
@media(max-width:900px){.legal-toc{position:static;border:1px solid var(--line);border-radius:12px;padding:18px 20px;background:var(--mist)}}
.legal-toc h5{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);margin-bottom:12px;font-weight:700}
.legal-toc a{display:block;font-size:13.5px;color:var(--ink-2);padding:4px 0;line-height:1.4}
.legal-toc a:hover{color:var(--blue)}

.legal-prose{max-width:38em}
.legal-prose h2{font-size:22px;margin:46px 0 14px;scroll-margin-top:110px;letter-spacing:-.02em}
.legal-prose h2:first-child{margin-top:0}
.legal-prose h2 .n{font-family:var(--mono);font-size:14px;color:var(--ink-3);margin-right:10px;font-weight:700}
.legal-prose h3{font-size:16px;margin:26px 0 8px;font-weight:700}
.legal-prose p{margin:0 0 14px;font-size:15.5px;line-height:1.72;color:var(--ink-2)}
.legal-prose li{margin:0 0 9px;font-size:15.5px;line-height:1.7;color:var(--ink-2)}
.legal-prose ul,.legal-prose ol{margin:0 0 16px 22px}
.legal-prose strong{color:var(--ink);font-weight:600}
.legal-prose a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.legal-prose dl{margin:0 0 16px}
.legal-prose dt{font-weight:600;color:var(--ink);font-size:15.5px;margin-top:12px}
.legal-prose dd{margin:2px 0 0;font-size:15.5px;line-height:1.7;color:var(--ink-2)}

/* A clause the reader should not skim past: capped liability, data deletion,
   the early-access disclaimer. Ruled, not tinted, so it prints. */
.legal-note{border-left:3px solid var(--blue);padding:2px 0 2px 18px;margin:0 0 16px}
.legal-note p:last-child{margin-bottom:0}

.legal-table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14px}
.legal-table th{text-align:left;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);padding:0 14px 8px 0;border-bottom:1px solid var(--line);font-weight:700;vertical-align:bottom}
.legal-table td{padding:11px 14px 11px 0;border-bottom:1px solid var(--line);color:var(--ink-2);line-height:1.55;vertical-align:top}
.legal-table td:first-child{color:var(--ink);font-weight:600;white-space:nowrap}
.legal-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

.legal-foot{margin-top:52px;padding-top:22px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-3)}
