/* =====================================================================
   WE PRACHAR — LEGAL PAGES (privacy · terms · cookies)
   ===================================================================== */
.legal { display: grid; grid-template-columns: 240px minmax(0, 760px); justify-content: center; gap: clamp(28px, 5vw, 80px); padding-block: clamp(44px, 6vw, 80px); }
.legal__toc { position: sticky; top: 100px; align-self: start; }
.legal__toc p { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; }
.legal__toc ol { display: grid; gap: 2px; border-left: 1.5px solid var(--line); }
.legal__toc a { display: block; padding: 6px 0 6px 14px; font-size: 14px; color: var(--muted); transition: color .25s; }
.legal__toc a:hover { color: var(--accent-2); }
.legal__note { padding: 14px 18px; border-radius: var(--r-md); border: 1px dashed var(--line-2); background: var(--card); color: var(--muted); font-size: 14px; margin-bottom: 24px; }
.legal__body { color: #3a352d; line-height: 1.8; }
.legal__body section { padding: 24px 0; border-top: 1px solid var(--line); scroll-margin-top: 100px; }
.legal__body h2 { display: flex; gap: 12px; align-items: baseline; font-size: clamp(1.25rem, 1.9vw, 1.5rem); margin-bottom: 12px; color: var(--ink); }
.legal__body h2 span { display: none; }            /* section numbers hidden */
.legal__body p { margin: 0 0 12px; }
.legal__body ul { display: grid; gap: 8px; margin: 0 0 12px; }
.legal__body li { position: relative; padding-left: 20px; }
.legal__body li::before { content: ''; position: absolute; left: 0; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.legal__body a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }
.legal__more { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 26px; border-top: 1px solid var(--line); }
.legal__more a { padding: 9px 16px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); text-decoration: none; color: var(--ink); font-size: 14px; font-weight: 700; transition: background .3s, color .3s; }
.legal__more a:hover { background: var(--ink); color: #fff; }
@media (max-width: 900px) { .legal { grid-template-columns: minmax(0, 1fr); } .legal__toc { position: static; } }