/* ==========================================================================
   legal.css — TraceZoo ke 4 common pages ki shared styling
   ==========================================================================
   Kaunse page use karte hain:
     privacy-policy.html · terms-and-conditions.html
     earnings-disclaimer.html · contact-us.html

   Ye pages LIGHT hain (safed background) — sales pages ki dark theme yahan
   NAHI aati, isliye ye theme.css load hi nahi karte. Sirf ye ek file.
   Upar ka header aur neeche ka footer dono kaale hain, beech ka body safed.
   ========================================================================== */

:root{
  --lg-ink:#0E1320;        /* headings — gehra navy-black          */
  --lg-body:#3D4457;       /* normal text                          */
  --lg-mut:#6B7280;        /* halka grey — subtitle, notes         */
  --lg-acc:#7B3FE4;        /* purple accent (logo wala family)     */
  --lg-acc-d:#5B21B6;      /* gehra purple                         */
  --lg-line:#ECECF3;       /* card border                          */
  --lg-dark:#0B0B12;       /* header/footer ka kaala               */
  --lg-card:#131A2C;       /* dark card ka rang                    */
  --lg-w:900px;            /* content ki chaudai                   */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:#fff;color:var(--lg-body);
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.lg-wrap{max-width:var(--lg-w);margin:0 auto;padding:0 20px}

/* ===================== 1. HEADER ===================== */
.lg-top{background:var(--lg-dark);padding:22px 0}
.lg-top__in{display:flex;align-items:center;justify-content:space-between;gap:20px}
.lg-logo img{height:38px;width:auto}
.lg-back{
  display:inline-flex;align-items:center;gap:10px;
  background:#15151F;border:1px solid #24243A;border-radius:12px;
  padding:15px 26px;color:#fff;text-decoration:none;
  font-size:14px;font-weight:700;letter-spacing:.6px;
  transition:background .18s,border-color .18s,transform .18s;
}
.lg-back:hover{background:#1E1E2E;border-color:var(--lg-acc);transform:translateY(-1px)}
.lg-back svg{width:17px;height:17px;flex:none}

/* ===================== 2. HERO ===================== */
.lg-hero{background:#F7F7FB;border-bottom:1px solid #EDEDF4;padding:62px 0 56px;text-align:center}
.lg-hero--cream{background:#FFFDF2;border-bottom-color:#F2EBD6}
.lg-hero h1{
  margin:0 0 14px;color:var(--lg-ink);
  font-size:clamp(34px,5.2vw,64px);font-weight:800;line-height:1.12;letter-spacing:-.5px;
}
.lg-hero h1 span{color:var(--lg-acc)}
.lg-hero p{margin:0 auto;max-width:660px;color:var(--lg-mut);font-size:clamp(15px,1.6vw,17px)}

/* ===================== 3. BODY / SECTIONS ===================== */
.lg-main{padding:56px 0 70px}
.lg-sec + .lg-sec{margin-top:52px}

/* section heading with a small icon on the left */
.lg-h2{
  display:flex;align-items:center;gap:14px;margin:0 0 22px;
  color:var(--lg-ink);font-size:clamp(23px,2.6vw,29px);font-weight:800;letter-spacing:-.3px;
}
.lg-h2 svg{width:27px;height:27px;flex:none}

/* purple left-border intro quote */
.lg-quote{
  border-left:3px solid var(--lg-acc);padding:4px 0 4px 30px;margin:0 0 46px;
  color:#2B3242;font-size:clamp(16px,1.9vw,20px);font-style:italic;line-height:1.62;
}
.lg-quote b{font-style:normal;font-weight:700;color:var(--lg-ink)}

/* ===================== 4. CARDS ===================== */
.lg-grid{display:grid;gap:38px}
.lg-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.lg-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}

.lg-card{
  background:#fff;border:1px solid var(--lg-line);border-radius:18px;padding:34px 32px;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.lg-card h3{margin:0 0 18px;color:var(--lg-ink);font-size:clamp(19px,2.1vw,24px);font-weight:800}
.lg-card p{margin:0;font-size:15.5px}

/* tinted icon tile */
.lg-ico{
  width:46px;height:46px;border-radius:13px;margin-bottom:22px;
  display:grid;place-items:center;
}
.lg-ico svg{width:23px;height:23px}
.lg-ico--blue{background:#EEF3FF;color:#3B6FE0}
.lg-ico--purple{background:#F4EEFF;color:var(--lg-acc)}
.lg-ico--amber{background:#FFF6E6;color:#D98A00}
.lg-ico--red{background:#FEF0F0;color:#E5484D}
.lg-ico--green{background:#EDFBF1;color:#2FA35B}

/* bullet list inside cards */
.lg-list{list-style:none;margin:0;padding:0}
.lg-list li{position:relative;padding-left:16px;margin-bottom:15px;font-size:15.5px;color:var(--lg-body)}
.lg-list li:last-child{margin-bottom:0}
.lg-list li::before{content:"•";position:absolute;left:0;color:var(--lg-body)}

/* green tick list */
.lg-checks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px}
.lg-checks li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;font-weight:600;color:var(--lg-ink)}
.lg-checks svg{width:19px;height:19px;flex:none;margin-top:3px;color:#2FA35B}

/* ===================== 5. TINTED PANELS ===================== */
.lg-panel{border-radius:16px;padding:28px 30px;font-size:15.5px}
.lg-panel p{margin:0}
.lg-panel--green{background:#F3FBF5;border:1px solid #DEF1E4}
.lg-panel--green b{color:var(--lg-ink)}
.lg-panel--purple{
  background:#F8F4FF;border:1px solid #EADFFB;text-align:center;
  color:var(--lg-acc-d);font-weight:700;font-size:clamp(15px,1.7vw,18px);
}
.lg-panel--red{
  background:#FEF4F3;border-left:3px solid #E5484D;border-radius:0 12px 12px 0;
  color:#C0272C;font-weight:700;font-size:14.5px;padding:20px 24px;
}

/* dark card (Updates & Changes / Professional Disclosure) */
.lg-dark-card{
  background:linear-gradient(135deg,#141B2D,#191430);
  border:1px solid #262040;border-radius:20px;padding:36px 38px;color:#C7CCDA;
}
.lg-dark-card h3{
  display:flex;align-items:center;gap:13px;margin:0 0 18px;
  color:#fff;font-size:clamp(20px,2.2vw,26px);font-weight:800;
}
.lg-dark-card h3 svg{width:24px;height:24px;flex:none;color:#A78BFA}
.lg-dark-card p{margin:0 0 14px;font-size:15.5px;line-height:1.75}
.lg-dark-card p:last-child{margin-bottom:0}
.lg-dark-card b{color:#fff}
.lg-dark-card u{color:#fff;text-underline-offset:3px}

/* effective-date badge inside the dark card */
.lg-dcard__row{display:flex;align-items:center;justify-content:space-between;gap:30px}
.lg-dcard__row > div:first-child{flex:1}
.lg-date{
  background:#20263B;border:1px solid #2E3550;border-radius:14px;
  padding:16px 26px;text-align:center;flex:none;
}
.lg-date span{display:block;color:#A78BFA;font-size:10.5px;font-weight:700;letter-spacing:1.2px}
.lg-date b{display:block;color:#fff;font-size:19px;font-weight:800;margin-top:4px}

/* ===================== 6. NUMBERED SECTION ===================== */
.lg-num{display:flex;align-items:baseline;gap:14px;margin:0 0 18px}
.lg-num span{color:var(--lg-acc);font-size:clamp(21px,2.4vw,27px);font-weight:800}
.lg-num h2{margin:0;color:var(--lg-ink);font-size:clamp(21px,2.4vw,27px);font-weight:800}

/* ===================== 7. CONTACT PAGE ===================== */
.lg-contact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:38px;margin-bottom:44px}
.lg-cbox{
  border-radius:18px;padding:40px 32px;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.lg-cbox--light{background:#fff;border:1px solid var(--lg-line);box-shadow:0 1px 2px rgba(16,24,40,.04)}
.lg-cbox--dark{background:linear-gradient(135deg,#111827,#161033);border:1px solid #252041}
.lg-cbox h3{margin:0 0 8px;font-size:clamp(20px,2.2vw,25px);font-weight:800;color:var(--lg-ink)}
.lg-cbox--dark h3{color:#fff}
.lg-cbox .lg-ico{margin-bottom:20px}
.lg-cbox__sub{margin:0 0 22px;font-size:14.5px;font-style:italic;color:var(--lg-mut)}
.lg-cbox--dark .lg-cbox__sub{color:#9AA2B8}
.lg-cbox__big{margin:0 0 4px;font-size:19px;font-weight:700;color:#A78BFA}
.lg-cbox__small{margin:0;font-size:15px;color:#C7CCDA}
.lg-cbox__rule{width:100%;max-width:390px;height:1px;background:#2A3048;margin:26px 0 20px}
.lg-cbox__note{margin:0;font-size:12.5px;font-style:italic;color:#8790A8}
.lg-mailbtn{
  display:inline-flex;align-items:center;gap:11px;
  background:var(--lg-acc);color:#fff;text-decoration:none;
  border-radius:11px;padding:16px 34px;font-size:16px;font-weight:700;
  box-shadow:0 8px 20px rgba(123,63,228,.28);
  transition:background .18s,transform .18s,box-shadow .18s;
}
.lg-mailbtn:hover{background:var(--lg-acc-d);transform:translateY(-2px);box-shadow:0 12px 26px rgba(123,63,228,.34)}
.lg-mailbtn svg{width:18px;height:18px;flex:none}
.lg-ico--big{width:56px;height:56px;border-radius:16px}
.lg-ico--big svg{width:27px;height:27px}

/* ===================== 8. FOOTER ===================== */
.lg-foot{background:var(--lg-dark);padding:28px 0;color:#B8BCC8;font-size:15px}
.lg-foot__in{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.lg-foot nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.lg-foot nav a{color:#E7E9F0;text-decoration:none;transition:color .18s}
.lg-foot nav a:hover{color:var(--lg-acc)}
.lg-foot nav i{color:#3A3A50;font-style:normal}

/* ===================== 9. MOBILE ===================== */
@media (max-width:820px){
  .lg-grid--2,.lg-grid--3,.lg-contact{grid-template-columns:1fr}
  .lg-grid{gap:24px}
  .lg-contact{gap:24px}
  .lg-checks{grid-template-columns:1fr;gap:16px}
  .lg-dcard__row{flex-direction:column;align-items:stretch;gap:22px}
  .lg-date{align-self:flex-start}
}
@media (max-width:620px){
  .lg-hero{padding:44px 0 38px}
  .lg-main{padding:40px 0 52px}
  .lg-sec + .lg-sec{margin-top:38px}
  .lg-quote{padding-left:20px;margin-bottom:34px}
  .lg-card,.lg-dark-card{padding:26px 22px}
  .lg-cbox{padding:32px 22px}
  .lg-panel{padding:22px 20px}
  /* header par button chhota, taaki logo ke saath ek line me rahe */
  .lg-top{padding:16px 0}
  .lg-logo img{height:30px}
  .lg-back{padding:12px 16px;font-size:12px;gap:7px}
  .lg-back svg{width:14px;height:14px}
  .lg-foot__in{flex-direction:column;text-align:center;gap:14px}
  .lg-foot nav{justify-content:center;gap:10px;font-size:14px}
}