/* legal.css — the shared look of the pages a payment provider, an app store and a
   customer all need to be able to read: privacy, terms, refunds, contact, pricing.
   ═══════════════════════════════════════════════════════════════════════════════
   These live on the PUBLIC site (site/, project `bodhyaedge`), not on the study app.
   That is deliberate and it matters:

     · Razorpay will not issue live keys until it can see them on bodhyaedge.com, and
       Google Play's two listings already link to bodhyaedge.com/privacy;
     · the study app is password-walled and noindex on every response, so a policy page
       served from there is unreadable to exactly the people who must read it.

   Lifted from the privacy page's own stylesheet so the five pages match each other and
   the marketing page they sit behind. */

:root{
  --paper:#FAF6EF; --card:#FFFDF9; --ink:#1C2521; --soft:#3E4B44; --dim:#65726A;
  --line:#E4DCCD; --sage:#636E4B;
  --serif:Fraunces,'Iowan Old Style',Georgia,serif;
  --sans:Inter,-apple-system,'Segoe UI',system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{ --paper:#0F1614; --card:#18221E; --ink:#ECF2EC; --soft:#C3CEC6; --dim:#93A399;
    --line:#26332D; --sage:#A3B47C; }
}
*{ box-sizing:border-box; margin:0; }
body{ background:var(--paper); color:var(--ink); font:16px/1.65 var(--sans); -webkit-font-smoothing:antialiased; }
.wrap{ max-width:760px; margin:0 auto; padding:48px 22px 64px; }
.brand{ display:flex; align-items:center; gap:10px; margin-bottom:28px; text-decoration:none; color:inherit; }
.brand img{ width:38px; height:38px; }
.brand b{ font-family:var(--serif); font-size:18px; font-weight:600; }
.eyebrow{ font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--sage); }
h1{ font-family:var(--serif); font-size:clamp(28px,5vw,38px); line-height:1.2; letter-spacing:-.015em; margin:8px 0 6px; font-weight:600; }
.date{ color:var(--dim); font-size:14px; }
h2{ font-family:var(--serif); font-size:21px; font-weight:600; margin:34px 0 8px; letter-spacing:-.01em; }
p{ margin:10px 0; color:var(--soft); }
ul{ margin:10px 0; padding-left:1.2em; color:var(--soft); }
li{ margin:6px 0; }
b{ color:var(--ink); font-weight:600; }
table{ width:100%; border-collapse:collapse; margin:14px 0; font-size:14.5px; }
th, td{ text-align:left; vertical-align:top; padding:9px 10px; border-bottom:1px solid var(--line); color:var(--soft); }
th{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); font-weight:600; }
.box{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin:16px 0; }
a{ color:var(--sage); }
.scrollx{ overflow-x:auto; }
.foot{ margin-top:42px; padding-top:18px; border-top:1px solid var(--line); font-size:13px; color:var(--dim); }
.foot a{ color:var(--dim); }
.cta{ display:inline-block; margin-top:6px; padding:12px 20px; border-radius:10px; background:var(--sage);
  color:var(--paper); text-decoration:none; font-weight:600; }
.price{ font-family:var(--serif); font-size:34px; font-weight:600; color:var(--ink); }
.rowline{ display:flex; gap:16px; align-items:baseline; justify-content:space-between; flex-wrap:wrap; }