/* Mailora — legal pages (privacy, terms)
 *
 * টোকেনগুলো index.html-এর সাথে হুবহু এক। সাইটের ডিজাইন সিস্টেম আগে থেকেই
 * আছে, তাই নতুন কিছু আবিষ্কার না করে সেটাই মানা হয়েছে — একই ব্র্যান্ড রঙ,
 * একই neutrals, একই তিন থিম-অবস্থা (system / light / dark)।
 *
 * আইনি পেজ পড়া হয় না, খোঁজা হয় — তাই লেআউট নথির মতো নয়, রেফারেন্সের মতো:
 * পাশে ধারার তালিকা, ধারা নম্বর লিংক করা, আর প্রতিটি অংশের পাশে সাদা
 * ভাষায় সারসংক্ষেপ। নম্বরগুলো সাজসজ্জা নয় — চুক্তিতে ধারা নম্বর দিয়েই
 * উল্লেখ করা হয়, তাই সেগুলো সত্যিকারের তথ্য বহন করে।
 */

:root{
  --bg:#f2f6f3; --surface:#ffffff; --surface-2:#f6faf7;
  /* --ink-dim ও --amber-ink সাইটের মূল প্যালেটের চেয়ে সামান্য গাঢ়
   * (#7d918a → #5c7068, #a5611a → #874d0c)। কারণ এখানে ছোট আকারের লেখা
   * বেশি — তারিখ, টেবিল হেডার, নোট — আর মূল মানগুলো মেপে দেখা গেছে
   * WCAG AA (৪.৫:১)-এর নিচে পড়ে: ৩.০৬ ও ৪.০৪। আইনি নথি পড়া না গেলে
   * সেটা থাকা আর না-থাকা সমান। বদলটা শুধু এই দুই পেজে। */
  --ink:#0f201a; --ink-mut:#4c6058; --ink-dim:#5c7068;
  --line:#dde7e1; --line-2:#e8efea;
  --brand:#0b7b6b; --brand-deep:#075247; --brand-soft:#dcece8; --brand-ring:#0b7b6b33;
  --amber:#d9822b; --amber-ink:#874d0c; --amber-soft:#f7e8d6;
  --shadow:0 1px 2px rgba(12,40,32,.05), 0 10px 30px rgba(12,40,32,.06);
  /* লিংক ও অ্যাকসেন্টের রঙ থিম-ভেদে এখানেই বদলায়। কম্পোনেন্টে কখনো
   * থিম-নির্দিষ্ট নিয়ম লেখা হয়নি — নইলে `:root:not(...) a` (0,2,1) হয়ে
   * `.toc a` (0,1,1)-কে হারিয়ে দিত, আর ডার্ক মোডে গোটা nav সবুজ হয়ে যেত। */
  --link:#075247; --accent:#075247;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code","JetBrains Mono",Menlo,monospace;
  --r:16px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0a1512; --surface:#0f1d18; --surface-2:#0c1814;
    --ink:#e9f2ee; --ink-mut:#9db3aa; --ink-dim:#7a9389;
    --line:#20332b; --line-2:#182620;
    --brand:#2fcaa6; --brand-deep:#1c8f76; --brand-soft:#10281f; --brand-ring:#2fcaa63a;
    --amber:#f0a94a; --amber-ink:#f3ba6c; --amber-soft:#2a2012;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 34px rgba(0,0,0,.34);
    --link:#2fcaa6; --accent:#2fcaa6;
  }
}
:root[data-theme="dark"]{
  --bg:#0a1512; --surface:#0f1d18; --surface-2:#0c1814;
  --ink:#e9f2ee; --ink-mut:#9db3aa; --ink-dim:#7a9389;
  --line:#20332b; --line-2:#182620;
  --brand:#2fcaa6; --brand-deep:#1c8f76; --brand-soft:#10281f; --brand-ring:#2fcaa63a;
  --amber:#f0a94a; --amber-ink:#f3ba6c; --amber-soft:#2a2012;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 34px rgba(0,0,0,.34);
  --link:#2fcaa6; --accent:#2fcaa6;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16.5px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
a{color:var(--link);text-decoration-color:var(--brand-ring);text-underline-offset:3px}
a:focus-visible,.toc a:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;height:66px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:680;font-size:19px;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.nav-links{display:flex;gap:22px;font-size:14.5px}
.nav-links a{color:var(--ink-mut);text-decoration:none}
.nav-links a:hover{color:var(--ink)}
@media (max-width:760px){ .nav-links{display:none} }
.btn{
  display:inline-flex;align-items:center;gap:8px;border-radius:10px;
  padding:9px 15px;font-size:14px;font-weight:600;text-decoration:none;
  border:1px solid var(--line);color:var(--ink);background:var(--surface);
}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}

/* ---------- document head ---------- */
.doc-head{padding:52px 0 30px;border-bottom:1px solid var(--line)}
.eyebrow{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin:0 0 12px
}
.doc-head h1{
  font-family:var(--serif);font-weight:400;font-size:clamp(34px,5.2vw,52px);
  line-height:1.08;letter-spacing:-.015em;margin:0 0 16px;text-wrap:balance
}
.doc-head .lede{font-size:18px;color:var(--ink-mut);max-width:62ch;margin:0 0 22px}
.doc-meta{
  display:flex;flex-wrap:wrap;gap:10px 26px;font-family:var(--mono);
  font-size:12.5px;color:var(--ink-mut)
}
.doc-meta b{color:var(--ink);font-weight:500}

/* ---------- layout: TOC rail + column ---------- */
.doc{display:grid;grid-template-columns:236px minmax(0,1fr);gap:56px;padding:40px 0 72px;align-items:start}
@media (max-width:940px){ .doc{grid-template-columns:1fr;gap:28px} }

.toc{position:sticky;top:92px;font-size:14px}
@media (max-width:940px){
  .toc{position:static;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
}
.toc h2{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-dim);margin:0 0 12px;font-weight:500
}
.toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;counter-reset:toc}
.toc li{counter-increment:toc}
.toc a{
  display:flex;gap:10px;padding:5px 8px;border-radius:7px;
  color:var(--ink-mut);text-decoration:none;line-height:1.35
}
.toc a::before{content:counter(toc);font-family:var(--mono);font-size:11.5px;color:var(--ink-dim);padding-top:2px;min-width:14px}
.toc a:hover{background:var(--surface-2);color:var(--ink)}

.body{max-width:70ch;min-width:0}

/* ---------- sections ---------- */
section.cl{padding:28px 0;border-top:1px solid var(--line-2)}
section.cl:first-child{border-top:0;padding-top:0}
section.cl h2{
  font-size:21px;font-weight:660;letter-spacing:-.01em;margin:0 0 14px;
  display:flex;gap:12px;align-items:baseline;scroll-margin-top:92px
}
section.cl h2 .num{
  font-family:var(--mono);font-size:13px;font-weight:500;color:var(--accent);
  flex:none;padding-top:1px
}
section.cl h3{font-size:16px;font-weight:640;margin:22px 0 8px}
section.cl p{margin:0 0 14px}
section.cl ul{margin:0 0 14px;padding-left:20px}
section.cl li{margin:0 0 7px}
section.cl li::marker{color:var(--ink-dim)}
strong{font-weight:640}

/* সাদা ভাষার সারসংক্ষেপ — আইনি ভাষার পাশে, প্রতিস্থাপন নয়। */
.plain{
  border-left:2px solid var(--brand);background:var(--brand-soft);
  border-radius:0 10px 10px 0;padding:13px 16px;margin:0 0 18px
}
.plain p{margin:0;font-size:15px;color:var(--ink-mut)}
.plain p::before{
  content:"In plain terms — ";font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:600
}

/* ---------- data table ---------- */
.tbl-wrap{overflow-x:auto;margin:0 0 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:520px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line-2);vertical-align:top}
thead th{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-dim);font-weight:500;background:var(--surface-2);white-space:nowrap
}
tbody tr:last-child td{border-bottom:0}
td.no{color:var(--ink-dim)}

/* ---------- callouts ---------- */
.note{
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;margin:0 0 16px;box-shadow:var(--shadow)
}
.note h4{margin:0 0 7px;font-size:14.5px;font-weight:640}
.note p{margin:0;font-size:14.5px;color:var(--ink-mut)}
.note.warn{background:var(--amber-soft);border-color:transparent}
.note.warn h4{color:var(--amber-ink)}
:root[data-theme="dark"] .note.warn p{color:var(--ink)}

code{font-family:var(--mono);font-size:.9em;background:var(--surface-2);border:1px solid var(--line-2);border-radius:5px;padding:1px 5px}

/* এখনো নিশ্চিত না হওয়া তথ্য — লাইভে যাওয়ার আগে অবশ্যই ভরতে হবে। */
mark.todo{
  background:var(--amber-soft);color:var(--amber-ink);font-weight:640;
  border-bottom:2px dotted var(--amber);border-radius:3px;padding:0 4px
}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:40px 0 44px;margin-top:12px}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;margin:0 0 20px}
.foot-links a{color:var(--ink-mut);text-decoration:none}
.foot-links a:hover{color:var(--ink)}
.foot-bot{
  display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;
  font-size:13px;color:var(--ink-dim);border-top:1px solid var(--line-2);padding-top:18px
}
.foot-bot a{color:var(--ink-mut)}