/* ===========================================================================
   legal.css — shared styling for the legal pages (terms, privacy, cookie).
   brand.css tokens only. Sticky clause index + hanging clause numbers.
   .wrap elements use longhand padding only (V4 gutter trap).
   =========================================================================== */

.legal h1,.legal h2{letter-spacing:-.01em;line-height:1.15}

/* ---- hero ---------------------------------------------------------------- */
.lg-hero{padding-top:48px;padding-bottom:30px;border-bottom:1px solid var(--line)}
.lg-title{font-size:clamp(28px,4vw,46px);font-weight:800;margin:12px 0 0}
.lg-meta{font-size:12.5px;color:var(--ink-3);margin-top:14px}
.lg-intro{font-size:15.5px;line-height:1.6;color:var(--ink-2);max-width:64ch;margin-top:16px}

/* ---- layout: sticky index + body ---------------------------------------- */
.lg-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:48px;padding-top:36px;padding-bottom:24px}
.lg-toc{position:sticky;top:66px;align-self:start}
.lg-toc__h{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.lg-toc ol{list-style:none;margin:0;padding:0}
.lg-toc a{display:block;font-size:13px;line-height:1.4;color:var(--ink-2);padding:6px 0 6px 14px;border-left:2px solid var(--line)}
.lg-toc a:hover{color:var(--green-text);border-left-color:var(--green)}
.lg-toc a .tn{color:var(--ink-3);font-variant-numeric:tabular-nums;margin-right:6px}

.lg-body{min-width:0}

/* ---- clauses ------------------------------------------------------------- */
.lg-clause{padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid var(--line);scroll-margin-top:66px}
.lg-clause:last-of-type{border-bottom:0}
.lg-clause h2{font-size:16px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.lg-clause h2 .n{color:var(--green-text);margin-right:8px}

.cl{display:grid;grid-template-columns:58px minmax(0,1fr);gap:10px;margin:9px 0}
.cl-n{font-size:13px;font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums}
.cl p,.cl > div{font-size:14px;line-height:1.65;color:var(--ink-2);margin:0}
.cl.lvl2{margin-left:26px}
.cl.lvl3{margin-left:52px}
.cl.lvl4{margin-left:78px}
.cl-lead{font-size:14px;line-height:1.65;color:var(--ink-2);margin:10px 0 4px}

/* definitions (clause 1.1) */
.lg-defs{margin:8px 0}
.lg-defs div{margin:10px 0;font-size:14px;line-height:1.6;color:var(--ink-2)}
.lg-defs b{color:var(--ink)}

/* prose-only clauses (e.g. force majeure) */
.lg-prose{font-size:14px;line-height:1.7;color:var(--ink-2);max-width:74ch}
.lg-prose + .lg-prose{margin-top:12px}

/* bullet lists inside clauses */
.lg-list{list-style:none;margin:12px 0;padding:0;max-width:74ch}
.lg-list li{position:relative;padding:6px 0 6px 18px;font-size:14px;line-height:1.6;color:var(--ink-2)}
.lg-list li::before{content:"";position:absolute;left:0;top:13px;width:6px;height:6px;background:var(--green)}

/* simple table (e.g. cookie list) */
.lg-table{width:100%;border-collapse:collapse;margin:16px 0;font-size:13px}
.lg-table th,.lg-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.lg-table thead th{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--ink-4)}
.lg-table td{color:var(--ink-2);line-height:1.5}
.lg-table td:first-child{font-weight:600;color:var(--ink);white-space:nowrap}
.lg-table .lg-tag{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
@media(max-width:560px){
  .lg-table td:first-child{white-space:normal}
  .lg-table th,.lg-table td{padding:8px 8px}
}

/* ---- foot ---------------------------------------------------------------- */
.lg-foot{padding-top:8px;padding-bottom:56px}
.lg-foot p{font-size:13px;color:var(--ink-3);line-height:1.6}
.lg-foot a{color:var(--green-text);text-decoration:underline;text-underline-offset:2px}

/* ---- responsive ---------------------------------------------------------- */
@media(max-width:900px){
  .lg-layout{grid-template-columns:1fr;gap:22px}
  .lg-toc{position:static}
  .lg-toc ol{columns:2;column-gap:24px}
  .cl.lvl2{margin-left:16px}
  .cl.lvl3{margin-left:32px}
  .cl.lvl4{margin-left:48px}
}
@media(max-width:560px){
  .lg-toc ol{columns:1}
  .cl{grid-template-columns:50px minmax(0,1fr);gap:8px}
}