/* Legal pages (/privacy, /terms, /delete-account): a long-form reading layout on top of the tokens,
   header and #language button in styles.css. Each page carries a VI and an EN block; without JS both
   stack (VI first), with JS legal.js sets html[data-lang] and the other block is hidden. */
.legal-page{--gutter:clamp(16px,5.2vw,100px);min-height:100svh;display:flex;flex-direction:column;overflow-x:hidden}
html[data-lang=vi] .legal-lang[lang=en],html[data-lang=en] .legal-lang[lang=vi]{display:none}
.legal-lang+.legal-lang{border-top:1px solid var(--line)}

/* styles.css pins the header over a full-screen 3D scene; here it sits on top of scrolling text. */
.legal-page .header{position:sticky;inset:auto;top:0;padding:16px var(--gutter);background:color-mix(in srgb,var(--ink) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}

.legal-hero{padding:56px var(--gutter) 40px;border-bottom:1px solid var(--line);background:radial-gradient(ellipse 60% 90% at 88% 0%,color-mix(in srgb,var(--rose) 24%,transparent),transparent 70%)}
.legal-hero-inner,.legal-wrap,.legal-footer-inner{max-width:1120px;margin:0 auto}
.legal-hero .eyebrow{margin-bottom:20px}
.legal-page h1.legal-title{font:400 clamp(34px,5vw,56px)/1.1 var(--font-display);letter-spacing:-.04em;margin:0 0 16px}
.legal-sub{font-size:15px;font-weight:300;line-height:1.75;max-width:640px;margin:0;text-wrap:pretty}
.legal-meta{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0;padding:0;list-style:none}
.legal-meta li{padding:7px 14px;border:1px solid var(--line);border-radius:100px;font-size:12px;color:var(--muted)}
.legal-meta b{color:var(--paper);font-weight:500}

.legal-wrap{display:grid;gap:32px;padding:40px var(--gutter) 72px}
.legal-toc{padding-bottom:24px;border-bottom:1px solid var(--line)}
.legal-toc-title{font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.legal-toc ol{list-style:none;margin:0;padding:0}
.legal-toc a{display:block;padding:7px 12px;border-left:1px solid var(--line);font-size:13px;line-height:1.45;color:var(--muted);transition:color .2s,border-color .2s}
.legal-toc a:hover{color:var(--paper);border-left-color:var(--pink)}

.legal-body{min-width:0;font-size:15px;font-weight:300;line-height:1.8}
.legal-page .legal-body h2{font:400 clamp(22px,2.2vw,28px)/1.3 var(--font-display);letter-spacing:-.02em;margin:48px 0 14px;scroll-margin-top:120px;text-wrap:balance}
.legal-page .legal-body h2:first-child{margin-top:0}
.legal-page .legal-body h2 span{display:inline}
.legal-body h2 .num{color:var(--pink-light);margin-right:10px}
.legal-body h3{font-size:15px;font-weight:600;margin:26px 0 8px}
.legal-body p{margin:0 0 14px}
.legal-body ul,.legal-body ol{margin:0 0 16px;padding-left:22px}
.legal-body li{margin-bottom:8px}
.legal-body strong{font-weight:600;color:var(--white)}
.legal-body a{color:var(--pink-light);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.legal-body a:hover{color:var(--white)}

.legal-callout{margin:20px 0;padding:18px 20px;border:1px solid var(--line);border-left:3px solid var(--rose);border-radius:12px;background:color-mix(in srgb,var(--paper) 4%,transparent)}
.legal-callout p:last-child,.legal-callout ul:last-child,.legal-callout ol:last-child{margin-bottom:0}
.legal-callout-title{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--pink-light);margin:0 0 8px}

.legal-table-wrap{overflow-x:auto;margin:18px 0}
.legal-table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.6}
.legal-table th{text-align:left;padding:10px 14px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
.legal-table td{padding:12px 14px;vertical-align:top;border-bottom:1px solid color-mix(in srgb,var(--paper) 10%,transparent)}
.legal-table tr:last-child td{border-bottom:0}

.legal-footer{margin-top:auto;padding:28px var(--gutter);border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.legal-footer-inner{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;align-items:center}
.legal-footer nav{display:flex;flex-wrap:wrap;gap:4px 24px}
.legal-footer a{display:inline-block;padding:10px 0;color:var(--paper)}
.legal-footer a:hover,.legal-footer a[aria-current=page]{color:var(--pink-light)}
.legal-footer p{margin:0}

@media(min-width:921px){
.legal-hero{padding:80px var(--gutter) 56px}
.legal-wrap{grid-template-columns:236px minmax(0,1fr);gap:56px;align-items:start;padding-top:56px;padding-bottom:100px}
.legal-toc{position:sticky;top:120px;padding:0;border-bottom:0}
}
@media(max-width:600px){.legal-page .header{padding:12px var(--gutter)}.legal-page .legal-body h2{scroll-margin-top:96px}}