/* ============================================================
   DOC — privacy.html · terms.html · delete-account.html

   Teenon page ka CSS pehle HU-BA-HU teen baar likha tha (7499 char x 3,
   sha256 tak ek). Ab ek jagah.
   Tokens / nav / footer `base.css` me hain.
   ============================================================ */

body{line-height:1.66}

/* ── dark page header ── */
.doc-head{background:var(--stage);color:var(--stage-ink);position:relative;overflow:hidden;
  padding:clamp(40px,6vw,74px) 0 clamp(34px,5vw,62px)}
.doc-head::before{content:"";position:absolute;width:620px;height:620px;left:-220px;top:-300px;
  border-radius:50%;background:rgba(88,214,194,.15);filter:blur(90px);pointer-events:none}
.doc-head .in{position:relative}
.doc-head h1{margin:0;font-family:var(--serif);font-weight:400;letter-spacing:-.02em;
  /* Floor 36px -> 30px. 360px ke phone par 6vw = 21.6px hai, yani clamp ka
     FLOOR hi jeetta hai -- aur 36px serif wahan "Delete your account" ko
     teen line me tod deta tha. */
  font-size:clamp(30px,6vw,64px);line-height:1.04;text-wrap:balance}
.doc-head .upd{margin:18px 0 0;font-family:var(--mono);font-size:12.5px;color:var(--stage-dim);
  letter-spacing:.03em}
.doc-head .back{display:inline-flex;align-items:center;gap:8px;margin-top:26px;font-size:14px;
  color:var(--stage-dim);text-decoration:none;min-height:40px}
.doc-head .back:hover{color:var(--stage-ink)}

/* ── layout ── */
.doc-grid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(28px,5vw,64px);
  padding:clamp(32px,5vw,66px) 0 clamp(48px,7vw,88px);align-items:start}
/* Yahan `1fr` likhna bug tha: grid item ka default `min-width:auto` use
   apne content ke min-content se chhota nahi hone deta, aur `.doc table`
   par `min-width:480px` hai -- to poora page 390px phone par 433px chaura
   ho jaata tha (horizontal scroll). `minmax(0,1fr)` column ko simatne
   deta hai, jisse table apne `.tbl` wrapper ke andar scroll karti hai --
   jaisa design tha. Isko wapas kabhi `1fr` mat karna. */
@media(max-width:960px){.doc-grid{grid-template-columns:minmax(0,1fr)}.toc{display:none}}
.toc{position:sticky;top:96px}
.toc .lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate);margin:0 0 14px}
.toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;
  border-left:1px solid var(--hairline)}
.toc a{display:block;padding:6px 0 6px 15px;margin-left:-1px;border-left:2px solid transparent;
  font-size:13.5px;line-height:1.4;color:var(--slate);text-decoration:none;transition:.15s}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--jade);border-left-color:var(--jade);font-weight:600}

/* ── the document itself ── */
.doc{max-width:70ch}
.doc>p:first-child{font-size:19px;line-height:1.6;color:var(--ink)}
.doc h2{font-family:var(--serif);font-weight:400;font-size:clamp(23px,3vw,33px);line-height:1.16;
  letter-spacing:-.012em;margin:48px 0 14px;padding-top:26px;border-top:1px solid var(--hairline);
  scroll-margin-top:84px;text-wrap:balance}
.doc h2:first-child{margin-top:0;padding-top:0;border-top:0}
.doc h3{font-size:17.5px;font-weight:600;letter-spacing:-.005em;margin:32px 0 10px}
.doc p{margin:0 0 16px;color:var(--slate)}
.doc p strong,.doc li strong{color:var(--ink);font-weight:600}
.doc a{color:var(--jade);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--jade) 34%,transparent);padding-bottom:1px}
.doc a:hover{border-bottom-color:var(--jade)}
.doc ul,.doc ol{margin:0 0 18px;padding-left:0;list-style:none;counter-reset:n}
.doc li{position:relative;padding-left:26px;margin-bottom:10px;color:var(--slate)}
.doc ul>li::before{content:"";position:absolute;left:5px;top:11px;width:6px;height:6px;
  border-radius:50%;background:var(--fresh)}
.doc ol>li{counter-increment:n}
.doc ol>li::before{content:counter(n);position:absolute;left:0;top:2px;width:19px;height:19px;
  border-radius:50%;background:var(--mint);color:var(--jade);font-family:var(--mono);
  font-size:10.5px;display:grid;place-items:center;font-weight:500}
/* Lamba URL ya code chhote phone par page ko chaudai me nahi todega. */
.doc code{font-family:var(--mono);font-size:.88em;background:var(--surface-2);
  border:1px solid var(--hairline);border-radius:6px;padding:1.5px 6px;
  overflow-wrap:anywhere}
.doc a,.doc p,.doc li{overflow-wrap:break-word}
.doc em{font-style:italic}

/* ── tables — apni container me scroll karti hain ── */
.tbl{overflow-x:auto;margin:0 0 22px;border:1px solid var(--hairline);border-radius:14px;
  background:var(--surface);-webkit-overflow-scrolling:touch}
.doc table{border-collapse:collapse;width:100%;min-width:480px;font-size:15px}
.doc th{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--jade);background:var(--surface-2);font-weight:500;
  padding:12px 16px;border-bottom:1px solid var(--hairline);white-space:nowrap}
.doc td{padding:13px 16px;border-bottom:1px solid var(--hairline);color:var(--slate);
  vertical-align:top;line-height:1.55}
.doc tr:last-child td{border-bottom:0}
.doc td:first-child{color:var(--ink);font-weight:500}

/* ── callouts ── */
.doc .box{background:var(--mint);border:1px solid color-mix(in srgb,var(--jade) 22%,transparent);
  border-radius:14px;padding:18px 20px;margin:0 0 22px}
.doc .box>p:last-child{margin-bottom:0}
.doc .box.warn{background:var(--cream);border-color:color-mix(in srgb,var(--amber-deep) 30%,transparent)}

/* ── chhota phone ──────────────────────────────────────────────
   Pehle sabse chhoti query 640px thi. 360-430px ke phone (hamara
   zyadatar traffic) ko 640px wala layout hi milta tha. */
@media(max-width:560px){
  body{font-size:16.5px}
  .doc>p:first-child{font-size:17.5px}
  .doc h2{margin:38px 0 12px;padding-top:22px}
  .doc h3{margin:26px 0 9px;font-size:17px}
  .doc li{padding-left:24px}
  .doc .box{padding:15px 16px;border-radius:12px}
  .doc table{font-size:14.5px;min-width:420px}
  .doc th,.doc td{padding:11px 13px}
  /* Scroll ho sakne wali table ko ek nishaan chahiye, warna aadhi table
     dikhi hi nahi -- aadmi ko pata hi nahi chalta ki aur bhi hai. */
  .tbl{position:relative}
  .tbl::after{content:"→";position:absolute;right:8px;top:8px;font-family:var(--mono);
    font-size:11px;color:var(--jade);opacity:.6;pointer-events:none}
}