/* ═══════════════════════════════════════════════════════════════════
   DOCUMENT PAGES — privacy, terms, contact
   ───────────────────────────────────────────────────────────────────
   These pages exist because Google and Meta will not run ads to a site
   that collects a phone number without them, and because a reviewer who
   cannot find out who you are marks the account down for it.

   They are read, not scanned, so this is a reading column and nothing
   else. Every value comes from style.css — no new palette, no second
   personality. A privacy page that looks like a different site is the
   one thing worse than not having one.
   ═══════════════════════════════════════════════════════════════════ */

.doc{padding:34px 0 56px}

.doc-head{border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:28px}
.doc-head .eyebrow{display:block;margin-bottom:8px}
.doc-head h1{font-size:28px;line-height:1.2}
.doc-head .doc-when{margin-top:10px;font-size:13.5px;color:var(--ink-30)}

/* A reading measure. Full-width body text on a laptop is a wall nobody
   finishes, and these are pages people skim for one specific answer. */
.doc-body{max-width:680px}

.doc-body h2{
  font-size:19px;margin:34px 0 10px;
  padding-top:20px;border-top:1px solid var(--line-2);
}
.doc-body h2:first-child{margin-top:0;padding-top:0;border-top:none}
.doc-body h3{font-size:16px;margin:22px 0 6px}
.doc-body p{margin-bottom:13px}
.doc-body ul{margin:0 0 15px 20px}
.doc-body li{margin-bottom:7px}
.doc-body strong{color:var(--ink);font-weight:600}
.doc-body a{color:var(--blue);font-weight:500}
.doc-body a:hover{text-decoration:underline}

/* The one thing on the page a reader might actually need to act on:
   how to reach a human about their data. It should not read as a
   paragraph among paragraphs. */
.doc-callout{
  background:var(--blue-xl);border:1px solid var(--blue-l);
  border-radius:var(--r);padding:16px 18px;margin:22px 0;
}
.doc-callout p:last-child{margin-bottom:0}

.doc-table{width:100%;border-collapse:collapse;margin:6px 0 18px;font-size:14px}
.doc-table th,.doc-table td{
  text-align:left;padding:10px 12px;border-bottom:1px solid var(--line-2);
  vertical-align:top;
}
.doc-table th{color:var(--ink);font-weight:600;background:var(--bg-2);white-space:nowrap}

/* Do column, jinme se ek poore vaakya rakhta hai — 320px par har cell 130px ka
   ho jaata hai aur ek-ek shabd apni line par aa jaata hai. Stack kar dene par
   "What" / "Why" ka header bekaar ho jaata hai, isliye wo bhi chhup jaata. */
@media(max-width:560px){
  .doc-table,.doc-table tbody,.doc-table tr,.doc-table th,.doc-table td{
    display:block;width:100%;
  }
  .doc-table tr:first-child{display:none}
  .doc-table tr{padding:13px 0;border-bottom:1px solid var(--line-2)}
  .doc-table td{border:none;padding:0}
  .doc-table td:first-child{color:var(--ink);font-weight:600;margin-bottom:4px}
}

/* ── Contact page ── */
.ct-grid{display:grid;gap:14px;margin:24px 0 8px}
.ct-card{
  border:1px solid var(--line);border-radius:var(--r);padding:18px;
  display:flex;gap:13px;align-items:flex-start;
}
.ct-card svg{color:var(--blue);flex-shrink:0;margin-top:2px}
.ct-card h3{font-size:15px;margin-bottom:3px}
.ct-card p,.ct-card a{font-size:14.5px}
.ct-card a{color:var(--blue);font-weight:600}

.doc-back{
  display:inline-flex;align-items:center;gap:7px;margin-top:34px;
  font-size:14.5px;font-weight:600;color:var(--blue);
}
.doc-back:hover{text-decoration:underline}

@media(min-width:640px){
  .doc{padding:44px 0 68px}
  .doc-head h1{font-size:34px}
  .ct-grid{grid-template-columns:1fr 1fr}
}