/* ==========================================================================
   TraceZoo 2.0 — THANK YOU PAGES ka shared base CSS
   Saare 7 thank-you page (free, fe, oto1..oto5) isi file ko use karte hain.
   Har page apna rang sirf :root ke 3-4 variable badal kar set karta hai.

   IMAGE SLOTS: jahan asli image aani hai wahan .ph wala box laga hai.
   Baad me usko seedha <img src="..."> se replace kar dena — koi CSS
   badalne ki zarurat nahi, .ph ka size aur jagah wahi rahegi.
   ========================================================================== */

/* ---------- 1. page ke rang (har page apne HTML me override karta hai) ---- */
:root{
  --acc   :#6B2FD6;   /* page ka main rang (heading, pill, button)  */
  --acc-d :#4A1C9E;   /* uska gehra shade                            */
  --acc-l :#F1E9FF;   /* uska halka background shade                 */
  --hot   :#E8215B;   /* download button / highlight ka rang         */
  --hot-d :#B8123F;
  --gold  :#FFC42E;
  --green :#22A94B;
  --ink   :#1E1B33;   /* heading text                                */
  --ink2  :#4A4762;   /* body text                                   */
  --ink3  :#7C7994;   /* halka text                                  */
  --line  :#E2DCF2;   /* border                                      */
  --bg    :#FFFFFF;   /* page background                             */
  --card  :#FFFFFF;   /* card background                             */
  --radius:18px;
}

/* ---------- 2. reset ------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink2);
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;border:0}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.wrap{width:min(1180px,94vw);margin:0 auto}
.ty{padding:0 0 0}

/* ---------- 3. IMAGE PLACEHOLDER ----------------------------------------- */
/* Asli image aane tak yahi dikhta hai. data-ph me likha hai kaunsi image
   aani hai + suggested file name. Baad me poore .ph ko <img> se badal do. */
.ph{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;aspect-ratio:var(--ar,1/1);
  border:2px dashed var(--acc);border-radius:12px;
  background:
    repeating-linear-gradient(45deg,rgba(0,0,0,.02) 0 8px,transparent 8px 16px),
    var(--acc-l);
  color:var(--acc);text-align:center;padding:10px;overflow:hidden;
}
.ph::before{
  content:attr(data-ph);
  font-size:clamp(10px,1.1vw,12.5px);font-weight:700;line-height:1.35;
  letter-spacing:.2px;word-break:break-word;
}
.ph--free{aspect-ratio:auto;min-height:90px}          /* jiska ratio pata nahi */
.ph--round{border-radius:50%}
.ph--plain{border-style:dashed;background:var(--acc-l)}

/* ---------- 4. HERO — "THANK YOU! / FOR YOUR PURCHASE" -------------------- */
.ty-hero{position:relative;padding:26px 0 10px;text-align:center}
.ty-hero__grid{
  display:grid;grid-template-columns:120px 1fr 150px;gap:14px;align-items:center;
}
.ty-hero__side{align-self:start}
.ty-title{
  font-family:"Baloo 2","Poppins",sans-serif;font-weight:800;
  font-size:clamp(38px,7.4vw,86px);line-height:.95;letter-spacing:-1px;
  color:var(--acc);text-transform:uppercase;
  text-shadow:0 4px 0 #fff,0 6px 0 rgba(0,0,0,.10);
}
/* orange/blue ribbon jisme "FOR YOUR PURCHASE" likha hai */
.ty-ribbon{
  display:inline-block;margin:10px auto 0;padding:9px 46px;
  font-family:"Baloo 2","Poppins",sans-serif;font-weight:800;color:#fff;
  font-size:clamp(18px,3.2vw,40px);line-height:1.1;letter-spacing:.5px;
  text-transform:uppercase;
  background:linear-gradient(180deg,var(--hot),var(--hot-d));
  clip-path:polygon(0 0,100% 0,calc(100% - 26px) 50%,100% 100%,0 100%,26px 50%);
  box-shadow:0 6px 14px rgba(0,0,0,.16);
}
.ty-lead{
  margin:14px auto 0;font-size:clamp(14px,1.6vw,20px);font-weight:500;color:var(--ink);
}
.ty-lead b{color:var(--hot);font-weight:800}

/* ---------- 5. DOWNLOAD BOX ---------------------------------------------- */
.dl{
  position:relative;border:2px dashed var(--acc);border-radius:20px;
  background:var(--card);padding:24px 22px 20px;text-align:center;
}
.dl__h{
  display:flex;align-items:center;justify-content:center;gap:12px;
  font-family:"Baloo 2","Poppins",sans-serif;font-weight:800;color:var(--acc);
  font-size:clamp(19px,2.6vw,31px);text-transform:uppercase;letter-spacing:.3px;
}
.dl__h .ico{
  flex:none;width:clamp(34px,3.6vw,46px);height:clamp(34px,3.6vw,46px);
  border-radius:50%;background:var(--acc);display:grid;place-items:center;color:#fff;
}
.dl__h .ico svg{width:56%;height:56%}
.dl__p{margin:10px auto 0;font-size:clamp(13.5px,1.5vw,18px);color:var(--ink);max-width:640px}
.dl__p b{color:var(--hot)}
.dl__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:16px;
  margin:18px auto 0;padding:15px 44px;border-radius:60px;
  background:linear-gradient(180deg,var(--hot),var(--hot-d));color:#fff;
  font-family:"Baloo 2","Poppins",sans-serif;font-weight:800;
  font-size:clamp(17px,2.4vw,30px);letter-spacing:.4px;text-transform:uppercase;
  box-shadow:0 8px 20px rgba(0,0,0,.22);
  transition:transform .16s ease,box-shadow .16s ease;
}
.dl__btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.28)}
.dl__btn .ico{
  flex:none;width:clamp(30px,3.2vw,42px);height:clamp(30px,3.2vw,42px);
  border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--hot);
}
.dl__btn .ico svg{width:58%;height:58%}
/* 3 badge — 100% SAFE / INSTANT ACCESS / HIGH QUALITY */
.dl__badges{
  display:grid;grid-template-columns:repeat(3,1fr);margin-top:22px;
}
.dl__badges li{padding:4px 12px;text-align:center}
.dl__badges li + li{border-left:1px solid var(--line)}
.dl__bico{height:44px;display:grid;place-items:center;margin-bottom:8px}
.dl__bico svg{width:38px;height:38px}
.dl__badges b{display:block;font-size:clamp(11.5px,1.25vw,15px);font-weight:800;letter-spacing:.2px}
.dl__badges span{display:block;font-size:clamp(11px,1.15vw,14px);color:var(--ink2);line-height:1.4;margin-top:3px}
/* kone par lagne wala starburst badge (oto5 jaisa) */
.dl__burst{
  position:absolute;top:-14px;right:-10px;width:clamp(84px,10vw,126px);aspect-ratio:1;
  display:grid;place-items:center;text-align:center;color:#fff;
  background:var(--acc);
  clip-path:polygon(50% 0,61% 12%,76% 6%,80% 22%,96% 24%,92% 40%,100% 50%,92% 60%,96% 76%,80% 78%,76% 94%,61% 88%,50% 100%,39% 88%,24% 94%,20% 78%,4% 76%,8% 60%,0 50%,8% 40%,4% 24%,20% 22%,24% 6%,39% 12%);
  font-family:"Baloo 2","Poppins",sans-serif;font-weight:800;line-height:1.1;
  font-size:clamp(10px,1.15vw,14px);padding:12px;
}
.dl__burst b{display:block;font-size:clamp(14px,1.8vw,23px);color:var(--gold)}

/* ---------- 6. SECTION CARD + PILL TITLE --------------------------------- */
.card{
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);
  padding:22px 20px 20px;position:relative;
}
.card--pad{padding-top:30px}
/* upar chipka hua rounded label — "WHAT'S INCLUDED?" jaisa */
.pill{
  display:inline-block;padding:7px 26px;border-radius:30px;
  background:var(--acc);color:#fff;
  font-family:"Baloo 2","Poppins",sans-serif;font-weight:800;
  font-size:clamp(12.5px,1.4vw,17px);letter-spacing:.6px;text-transform:uppercase;
  box-shadow:0 4px 10px rgba(0,0,0,.14);
}
.pill--gold{background:linear-gradient(180deg,var(--gold),#E0A400);color:#4A3400}
.pill--wide{padding:9px 40px;font-size:clamp(14px,1.8vw,22px)}
/* card ke upar beech me lagne wali pill */
.card__pill{position:absolute;top:-16px;left:50%;transform:translateX(-50%);white-space:nowrap}
.card__pill--left{left:26px;transform:none}

/* ---------- 7. TICK LIST ------------------------------------------------- */
.checks{display:grid;gap:11px}
.checks--2{grid-template-columns:1fr 1fr;gap:11px 26px}
.checks li{
  display:flex;align-items:flex-start;gap:11px;
  font-size:clamp(12.5px,1.35vw,16px);color:var(--ink);line-height:1.45;
}
.checks li::before{
  content:"";flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;
  background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
}
.checks--acc li::before{background-color:var(--acc)}

/* ---------- 8. NUMBERED STEPS -------------------------------------------- */
.steps{display:grid;gap:10px}
.steps li{
  display:flex;align-items:flex-start;gap:11px;
  font-size:clamp(12.5px,1.3vw,15.5px);color:var(--ink);line-height:1.45;
}
.steps li::before{
  counter-increment:st;content:counter(st);
  flex:none;width:23px;height:23px;border-radius:50%;
  background:var(--acc);color:#fff;display:grid;place-items:center;
  font-size:12px;font-weight:800;margin-top:1px;
}
.steps{counter-reset:st}
/* chaudi wali 5-step row (oto5 ka "HOW IT WORKS") */
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;align-items:start;text-align:center}
.flow__s{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:clamp(10px,1.05vw,13px);line-height:1.4}
.flow__n{
  width:34px;height:34px;border-radius:50%;background:var(--acc);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:15px;flex:none;
}
.flow__arw{align-self:center;color:var(--ink3)}
.flow__arw svg{width:16px;height:16px}

/* ---------- 9. PRODUCT VAULT --------------------------------------------- */
.vault{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.vault__c{
  background:var(--card);border:1.5px solid var(--line);border-radius:14px;
  padding:12px 9px 13px;text-align:center;display:flex;flex-direction:column;gap:8px;
  transition:transform .16s ease,box-shadow .16s ease;
}
.vault__c:hover{transform:translateY(-4px);box-shadow:0 10px 22px rgba(0,0,0,.12)}
.vault__tag{
  align-self:center;padding:3px 15px;border-radius:20px;color:#fff;
  font-size:clamp(9.5px,1vw,12px);font-weight:800;letter-spacing:.5px;
}
.vault__n{
  font-family:"Baloo 2","Poppins",sans-serif;font-weight:800;line-height:1.15;
  font-size:clamp(11px,1.15vw,14.5px);text-transform:uppercase;
}
.vault__n span{display:block;font-size:.82em;color:var(--ink2)}
.vault__img{margin-top:auto}
.vault__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:7px 12px;border-radius:20px;color:#fff;
  font-size:clamp(9.5px,1vw,12px);font-weight:800;letter-spacing:.3px;
  text-transform:uppercase;width:100%;
}
.vault__btn svg{width:13px;height:13px;flex:none}
.vault__btn--own{background:#2F80ED}

/* ---------- 10. HELP / APPRECIATE BOX ------------------------------------ */
.help{text-align:center;font-size:clamp(11.5px,1.2vw,14.5px);line-height:1.55}
.help__mail{
  display:inline-flex;align-items:center;gap:8px;margin-top:8px;
  font-weight:700;color:var(--ink);font-size:clamp(11.5px,1.25vw,15px);
}
.help__mail svg{width:17px;height:17px;color:var(--hot);flex:none}

/* ---------- 11. BOTTOM STRIP --------------------------------------------- */
.ty-foot{
  margin-top:20px;padding:14px 0;text-align:center;color:#fff;
  background:linear-gradient(180deg,var(--acc),var(--acc-d));
}
.ty-foot b{
  display:block;font-family:"Baloo 2","Poppins",sans-serif;font-weight:800;
  font-size:clamp(16px,2.2vw,26px);letter-spacing:.4px;text-transform:uppercase;
}
.ty-foot span{display:block;font-size:clamp(11px,1.2vw,14px);opacity:.92;margin-top:2px}

/* ---------- 12. layout helpers ------------------------------------------- */
.grid{display:grid;gap:16px}
.grid--2{grid-template-columns:1fr 1fr}
.grid--hero{grid-template-columns:minmax(0,0.9fr) minmax(0,1.6fr);align-items:center}
.grid--54{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
.grid--45{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.mt{margin-top:20px}
.mt-s{margin-top:12px}
.center{text-align:center}

/* ---------- 13. RESPONSIVE ----------------------------------------------- */
@media(max-width:1000px){
  .vault{grid-template-columns:repeat(3,1fr)}
  .flow{grid-template-columns:1fr;gap:14px;text-align:left}
  .flow__s{flex-direction:row;align-items:flex-start;text-align:left}
  .flow__arw{display:none}
}
@media(max-width:820px){
  .grid--2,.grid--hero,.grid--54,.grid--45{grid-template-columns:1fr}
  .ty-hero__grid{grid-template-columns:1fr}
  .ty-hero__side{display:none}
  .checks--2{grid-template-columns:1fr}
  .dl__badges{grid-template-columns:1fr}
  .dl__badges li + li{border-left:0;border-top:1px solid var(--line);margin-top:10px;padding-top:12px}
  .dl__burst{position:static;margin:14px auto 0}
}
@media(max-width:560px){
  .vault{grid-template-columns:repeat(2,1fr)}
  .ty-ribbon{padding:8px 30px;clip-path:none;border-radius:8px}
}

/* ==========================================================================
   MOBILE POLISH (10-Aug-2026)
   Phone par vault ke tag/button ka text 9.5px par aa jata tha (bahut chhota)
   aur support-email wala link sirf 18px uncha tha - ungli se dabana mushkil.
   Yahan un teeno ka mobile minimum bada kar diya hai. Layout waisa hi hai.
   ========================================================================== */
@media(max-width:560px){
  .vault__tag{font-size:11px;padding:4px 14px}
  .vault__n{font-size:12.5px}
  .vault__btn{font-size:11px;padding:9px 10px}
  .help__mail{padding:7px 0;font-size:13px}
  .checks li{font-size:13px}
}
/* DHYAN (10-Aug-2026): .steps li par display:flex hai. Iska matlab li ke andar
   ka har inline element (jaise <b> ya <a>) ALAG flex item ban jata hai aur apni
   line me chala jata hai. Isliye step ka text hamesha ek <span> ke andar rakhna
   hai - tabhi wo normal text ki tarah wrap hota hai.
   (oto1 aur oto3 par yahi bug tha: "Click on the / DOWNLOAD YOUR FILES / button
   above." teen tukdon me tut kar dikh raha tha.) */
.steps li > span{min-width:0}