/* ==========================================================================
   TraceZoo 2.0 — DARK PURPLE THEME + BIG LAYOUT
   Logo se liye gaye colors:  #926ED4 (main) · #5E44A0 (deep) · #E3CBFF (light)

   Ye file SABSE AAKHIR me load hoti hai (oto.css / oto4.css / free.css /
   live.css ke baad) taki purane light colors ko override kar sake.
   Kisi purani file ko chhua nahi gaya — sirf ye layer upar lagti hai.
   ========================================================================== */

:root{
  /* ---- logo palette ---- */
  --tz-p        :#926ED4;   /* logo purple            */
  --tz-p-l      :#AC8DE4;   /* halka purple           */
  --tz-p-lt     :#E3CBFF;   /* lavender highlight     */
  --tz-p-d      :#5E44A0;   /* deep purple            */
  --tz-p-dd     :#3E2C6E;

  /* ---- dark surfaces ---- */
  --tz-bg       :#120C24;   /* page background        */
  --tz-bg2      :#180F30;   /* alternate section      */
  --tz-bg3      :#1E1440;   /* raised band            */
  --tz-card     :#241943;
  --tz-card2    :#2C1F55;
  --tz-line     :#3B2B73;
  --tz-line2    :#4A3690;

  /* ---- text ---- */
  --tz-text     :#F1EBFC;
  --tz-text2    :#D6C9F2;
  --tz-mut      :#B4A6DE;

  /* ---- accents ---- */
  --tz-y        :#FFC93C;
  --tz-y-d      :#E0A400;
  --tz-g        :#3FCB63;
  --tz-g-d      :#2A9E48;
  --tz-r        :#FF6470;
  --tz-glow     :0 0 0 1px #ffffff0d, 0 18px 44px #00000059;
  --tz-glow-p   :0 10px 34px rgba(146,110,212,.34);

  /* ---- purane stylesheets ke variables ko re-point kar diya ---- */
  --navy      :#1B1038;
  --navy-d    :#120C24;
  --navy-2    :#1E1440;
  --navy-box  :#241943;
  --purple    :#926ED4;
  --purple-d  :#5E44A0;
  --purple-l  :#AC8DE4;
  --lav       :#2C1F55;
  --lav-2     :#241943;
  --ink       :#F1EBFC;
  --muted     :#B4A6DE;
  --line      :#3B2B73;
  --cream     :#241943;
  --sky       :#180F30;
  --yellow    :#FFC93C;
  --yellow-d  :#E0A400;
  --green     :#3FCB63;
  --green-d   :#2A9E48;
  --red       :#FF6470;
  --blue      :#7C9DF5;
  --pink      :#E879B8;
  --orange    :#FF9A46;
  --accent    :#926ED4;
  --shadow    :0 16px 40px rgba(0,0,0,.42);
  --hero-bg   :radial-gradient(1100px 520px at 15% 0%, #2E1F60 0%, transparent 62%),
               radial-gradient(900px 480px at 92% 30%, #3A2472 0%, transparent 60%),
               linear-gradient(180deg,#180F30 0%,#120C24 100%);
}

/* ==========================================================================
   1. GLOBAL
   ========================================================================== */
html{scroll-behavior:smooth}
body{
  background:var(--tz-bg);
  color:var(--tz-text);
  font-size:17px;                 /* base thoda bada */
}

/* container har page par chauda — kam khaali side space */
.wrap{width:min(1480px,93vw)!important}

::selection{background:var(--tz-p);color:#fff}

/* dark scrollbar */
html{scrollbar-color:var(--tz-p-d) var(--tz-bg)}
::-webkit-scrollbar{width:13px;height:13px}
::-webkit-scrollbar-track{background:var(--tz-bg)}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--tz-p),var(--tz-p-d));
  border-radius:20px;border:3px solid var(--tz-bg);
}
::-webkit-scrollbar-thumb:hover{background:var(--tz-p-l)}

/* ---- headings ---- */
.sec-title,.h2{
  color:var(--tz-text)!important;
  font-size:clamp(30px,3.9vw,54px)!important;
  margin-bottom:14px!important;
  letter-spacing:-.5px;
}
.sec-title .acc,.sec-title .purple,.acc,.purple{color:var(--tz-p-l)!important}
.sec-sub,.sub{color:var(--tz-mut)!important;font-size:18px!important;margin-bottom:44px!important}

/* har section title ke neeche chhoti purple underline */
.sec-title::after,.h2::after{
  content:"";display:block;width:96px;height:5px;border-radius:20px;
  margin:18px auto 0;
  background:linear-gradient(90deg,transparent,var(--tz-p),var(--tz-p-lt),var(--tz-p),transparent);
}

/* ==========================================================================
   2. AURORA BACKDROP — poore page par halki chalti purple roshni
   ========================================================================== */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(620px 620px at 12% 8%,  rgba(146,110,212,.20), transparent 65%),
    radial-gradient(560px 560px at 88% 34%, rgba(94, 68,160,.24), transparent 62%),
    radial-gradient(700px 700px at 42% 88%, rgba(172,141,228,.14), transparent 66%);
  animation:tz-aurora 18s ease-in-out infinite alternate;
}
@keyframes tz-aurora{
  0%  {transform:translate3d(0,0,0)      scale(1)}
  100%{transform:translate3d(0,-26px,0)  scale(1.06)}
}
body > *{position:relative;z-index:1}

/* ==========================================================================
   3. TOP BAR   (.tb = oto.css   |   .topbar = oto4.css + free.css)
   ========================================================================== */
.tb,.topbar{
  background:linear-gradient(180deg,#1B1038,#120C24)!important;
  border-bottom:1px solid var(--tz-line);
  box-shadow:0 10px 30px #00000055;
  padding:16px 0!important;
  position:relative;
}
.tb::after,.topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--tz-p),var(--tz-p-lt),var(--tz-p),transparent);
  opacity:.75;
}
.tb__brand img,.brand img{height:46px!important;transition:transform .25s ease}
.tb__brand:hover img,.brand:hover img{transform:scale(1.06)}
.logo img{height:76px!important}
.tb__brand span,.brand__tag,.logo span{color:var(--tz-p-lt)!important;font-size:11.5px!important}

.tb__trust li,.trust li{
  padding:9px 15px;border-radius:12px;
  background:#ffffff08;border:1px solid #ffffff12;
  transition:background .2s ease,transform .2s ease,border-color .2s ease;
}
.tb__trust li:hover,.trust li:hover{
  background:rgba(146,110,212,.20);border-color:var(--tz-p);transform:translateY(-3px);
}
.tb__ico,.trust__ico{width:26px!important;height:26px!important;color:var(--tz-y)!important}
.tb__txt,.trust__txt{font-size:12.5px!important;color:var(--tz-p-lt)!important}
.tb__txt b,.trust__txt b{font-size:13px!important;color:#fff!important}

/* free page ka wave topbar se niche — usko dark kar do */
.topbar__wave path,.topbar__wave polygon{fill:var(--tz-bg)!important}

/* ==========================================================================
   4. HERO
   ========================================================================== */
/* NOTE: literal gradient use kiya hai (var nahi), kyunki har page ke apne
   <style> block me --hero-bg light color par set hai aur wo baad me load hota
   hai. Literal likhne se har page par dark hero pakka lagta hai. */
.hero{
  background:
    radial-gradient(1100px 520px at 15% 0%, #2E1F60 0%, transparent 62%),
    radial-gradient(900px 480px at 92% 30%, #3A2472 0%, transparent 60%),
    linear-gradient(180deg,#180F30 0%,#120C24 100%)!important;
  padding:64px 0 78px!important;
  border-bottom:1px solid var(--tz-line);
  color:var(--tz-text)!important;
}
/* oto1 ke hero me peeche "ABC abc" ka faint pattern */
.hero::before{color:#ffffff0a!important}
.hero::before,.hero::after{background:rgba(146,110,212,.10)!important;filter:blur(30px)}
.hero .cloud{background:rgba(146,110,212,.13)!important}

.hero h1,.hero__left h1,.hero__h1{color:var(--tz-text)}
.h1-a,.kids{color:#fff!important;text-shadow:0 6px 30px rgba(146,110,212,.45)}
.h1-b,.pages{color:var(--tz-p-l)!important}
.h1-c{color:var(--tz-p-lt)!important}
.hero h1 .l1{color:#fff}
.hero h1 .l2{color:var(--tz-p-l)}

.hero__lead,.hero__lead b{color:var(--tz-text2)!important}
.hero__lead b,.eyebrow{color:var(--tz-p-lt)!important}
.hero__sub{color:#fff!important;border-bottom-color:var(--tz-y)!important}

/* hero size bump — page lamba aur bhara hua lage */
.hero h1 .l1{font-size:clamp(48px,7.4vw,104px)!important}
.hero h1 .l2{font-size:clamp(34px,5.5vw,74px)!important}
.h1-a{font-size:clamp(48px,7.6vw,106px)!important}
.h1-b{font-size:clamp(28px,4.4vw,56px)!important}
.h1-c{font-size:clamp(22px,3.1vw,40px)!important}
.hero__lead{font-size:clamp(16px,1.75vw,22px)!important;max-width:720px}
/* oto4 ka naya eyebrow — dark bg par light purple chahiye */
.hero__eyebrow{font-size:clamp(16px,1.5vw,21px)!important;color:var(--tz-p-lt)!important}
.hero__right{min-height:440px!important}
.hero__art{max-width:900px!important}
.ticks li{font-size:23px!important;color:var(--tz-text2)!important}
.ticks li::before{width:36px!important;height:36px!important;background-size:16px!important}

/* free page ka bada rainbow heading + hero ko side se saans lene ki jagah */
.fifty {font-size:clamp(64px,10vw,150px)!important}
.kids  {font-size:clamp(48px,7.6vw,112px)!important}
.rainbow,.pages{font-size:clamp(44px,7.2vw,106px)!important}
.hero__sub{font-size:clamp(21px,3vw,40px)!important}
.free-hero .hero__grid,
body .hero__grid{padding-inline:8px}

/* ---- ribbons / badges ---- */
.ribbon--purple{background:linear-gradient(180deg,var(--tz-p-l),var(--tz-p-d))!important}
.ribbon,.hero__badge,.hero__ribbon,.tagline{
  font-size:clamp(13px,1.6vw,18px)!important;padding-block:12px!important;
  box-shadow:0 6px 0 #00000040,0 10px 26px #00000055;
}
.hero__badge{font-size:16px!important}

/* ---- price circle / tag ---- */
.oneonly{
  width:172px!important;height:172px!important;font-size:16px!important;
  background:radial-gradient(circle at 34% 26%,var(--tz-p-l),var(--tz-p) 58%,var(--tz-p-d))!important;
  box-shadow:0 14px 34px rgba(146,110,212,.5),0 0 0 6px rgba(146,110,212,.14)!important;
  /* .oneonly grid hai. Agar andar koi element (jaise <span>) ho to har
     tukda alag grid item ban jata hai, aur align-content ki default value
     (stretch) unhe poore circle me faila deti hai. center karne se lines
     pass-pass, circle ke theek beech me rehti hain. */
  align-content:center!important;
  line-height:1.32!important;
}
.price-circle{
  width:172px!important;height:172px!important;padding:14px!important;
  border-color:#ffffff26!important;
  box-shadow:0 14px 34px rgba(255,140,0,.35),0 0 0 6px rgba(255,154,70,.15)!important;
}
.price-circle__now{font-size:30px!important}
.price-circle__top{font-size:10.5px!important}
.price-circle__just{font-size:11px!important}
.price-circle__was{font-size:13px!important}

/* oneonly circle ab bada hai, isliye price tag ko neeche khiska diya
   warna dono ek dusre ke upar chadh jate the */
.pricetag{
  top:172px!important;right:0!important;
  background:linear-gradient(180deg,var(--tz-card2),var(--tz-card))!important;
  border:1px solid var(--tz-line2);box-shadow:var(--tz-glow)!important;
  padding:14px 26px!important;
}
.pricetag b{color:var(--tz-p-lt)!important;font-size:15px!important}
.pricetag .now{font-size:44px!important;color:var(--tz-y)!important}
.pricetag .was{color:var(--tz-mut)!important;font-size:18px!important}

/* ---- USP icon row ---- */
.usp{gap:26px!important;margin-top:38px!important}
.usp li{
  padding:16px 12px;border-radius:18px;
  background:#ffffff08;border:1px solid #ffffff12;
  transition:transform .22s ease,background .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.usp li:hover{
  transform:translateY(-8px);background:rgba(146,110,212,.16);
  border-color:var(--tz-p);box-shadow:var(--tz-glow-p);
}
/* inline USP (fe / oto1 / oto2) hero column me aadhi jagah paata hai, isliye
   4 item ek line me nahi aate the aur 3+1 tut jaate the -> saaf 2x2 grid */
.usp--inline{display:grid!important;grid-template-columns:repeat(2,1fr)!important}
.usp--inline li{flex:none!important;min-width:0!important}
.usp__ico{width:82px!important;height:82px!important;box-shadow:0 8px 22px #00000055!important}
.usp--inline .usp__ico{width:74px!important;height:74px!important}
.usp__ico--img{width:94px!important;height:94px!important}
.usp--inline .usp__ico--img{width:84px!important;height:84px!important}
.usp__t,.usp__txt b{color:#fff!important;font-size:16px!important}
.usp__d,.usp__txt{color:var(--tz-mut)!important;font-size:14px!important}

/* ==========================================================================
   5. PRODUCT BOX MOCK
   ========================================================================== */
.pbox{--bx1:#5E44A0;--bx2:#2C1F55;width:min(320px,70%)!important;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.6))}
.pbox__t{font-size:24px!important}

/* ==========================================================================
   6. "WHAT'S INSIDE" / PANELS
   ========================================================================== */
.inside{
  background:linear-gradient(180deg,var(--tz-bg),var(--tz-bg2))!important;
  padding:78px 0!important;
}
.inside--plain{background:var(--tz-bg)!important}
.inside__grid{gap:52px!important}

.panel{
  background:linear-gradient(160deg,var(--tz-card),var(--tz-bg3))!important;
  border:1px solid var(--tz-line)!important;
  box-shadow:var(--tz-glow)!important;
  padding:52px 48px 46px!important;border-radius:28px!important;
}
.panel::before{
  content:"";position:absolute;inset:0;border-radius:28px;pointer-events:none;
  background:radial-gradient(600px 260px at 20% 0%,rgba(146,110,212,.16),transparent 70%);
}

.checks li{
  color:var(--tz-text2)!important;font-size:17px!important;
  padding:11px 0!important;
  transition:transform .18s ease,color .18s ease;
}
.checks li:hover{transform:translateX(8px);color:#fff!important}
.checks li::before{width:24px!important;height:24px!important;background-size:15px!important;
  box-shadow:0 0 0 4px rgba(63,203,99,.16)}

/* worksheet preview cards — andar SAFED rehte hain taki drawing dikhe */
.sheetcard{
  background:#fff!important;border:1px solid #ffffff26!important;
  border-radius:10px!important;padding:8px!important;
  box-shadow:0 14px 30px #00000059!important;
}
.sheetcard__cap{color:#3a4260!important;font-size:11px!important}
.sheetstack .sheetcard{max-width:180px!important}

/* oto4 category tiles */
.cat{
  background:linear-gradient(170deg,var(--tz-card2),var(--tz-card))!important;
  border:1px solid var(--tz-line)!important;padding:12px!important;border-radius:16px!important;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.cat:hover{transform:translateY(-8px) scale(1.03);border-color:var(--tz-p);box-shadow:var(--tz-glow-p)}
.cat__name{color:var(--tz-p-lt)!important;font-size:14px!important;margin-bottom:9px!important}
.cat__thumb{background:#fff!important;border-radius:10px!important;padding:8px!important}
.cats{gap:16px!important}
.more-cats{color:var(--tz-mut)!important;font-size:16px!important;margin:32px 0 8px!important}
.more-cats b{color:var(--tz-p-lt)!important}

.pages-badge{
  width:132px!important;height:132px!important;border-color:#ffffff26!important;
  background:radial-gradient(circle at 34% 26%,var(--tz-p-l),var(--tz-p) 55%,var(--tz-p-d))!important;
  box-shadow:0 14px 34px rgba(146,110,212,.5)!important;
}
.pages-badge b{font-size:26px!important}

/* ==========================================================================
   7. SNEAK PEEK
   ========================================================================== */
.peek{padding:78px 0!important}
.peek__box{
  background:linear-gradient(160deg,var(--tz-card),var(--tz-bg3))!important;
  border:2px solid var(--tz-line2)!important;
  box-shadow:var(--tz-glow)!important;
  padding:52px 54px 8px!important;border-radius:26px!important;
}
.peek__title{
  background:linear-gradient(180deg,var(--tz-p-l),var(--tz-p-d))!important;
  font-size:17px!important;padding:10px 34px!important;
  box-shadow:0 8px 22px rgba(146,110,212,.5)!important;
}
.peek__thumb{background:#fff!important;border-color:#ffffff26!important}
.peek__label{
  background:linear-gradient(180deg,var(--tz-p),var(--tz-p-d))!important;
  font-size:10.5px!important;padding:9px 4px!important;
}
.peek__nav{
  width:52px!important;height:52px!important;padding:13px!important;
  background:linear-gradient(180deg,var(--tz-p-l),var(--tz-p-d))!important;
  box-shadow:0 8px 22px rgba(146,110,212,.5)!important;
}
/* free page ke sneak peek cards */
.peek__grid{gap:30px!important}
.peek__card{cursor:pointer}
.peek .peek__card{
  background:#fff!important;
  box-shadow:0 14px 32px #00000059!important;
}
.peek__foot{color:var(--tz-text2)!important;font-size:18px!important}

/* feature strip */
.strip{
  background:linear-gradient(170deg,var(--tz-card),var(--tz-bg3))!important;
  border:1px solid var(--tz-line)!important;border-radius:18px!important;
  padding:22px 16px!important;gap:14px!important;margin-top:34px!important;
}
.strip li{color:var(--tz-text2)!important;font-size:15px!important;
  padding:10px;border-radius:12px;transition:background .2s ease}
.strip li:hover{background:rgba(146,110,212,.16)}
.strip__ico{width:52px!important;height:52px!important}
.strip__ico--img{width:64px!important;height:64px!important}

/* ==========================================================================
   8. WHY GRID
   ========================================================================== */
.why{padding:78px 0!important;background:linear-gradient(180deg,var(--tz-bg2),var(--tz-bg))!important}
.why__grid{gap:24px!important;margin-top:44px!important}
.why__grid li{
  background:linear-gradient(170deg,var(--tz-card),var(--tz-bg3))!important;
  border:1px solid var(--tz-line)!important;border-radius:22px!important;
  padding:34px 20px!important;text-align:center;
  box-shadow:0 10px 28px #00000040!important;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.why__grid li:hover{
  transform:translateY(-10px);border-color:var(--tz-p)!important;
  box-shadow:var(--tz-glow-p)!important;
}
.why__grid li + li::before{display:none!important}   /* purani divider line hata di */
.why__ico{width:88px!important;height:88px!important;margin-bottom:20px!important}
.why__ico--img{width:104px!important;height:104px!important}
.why__ico--ring{background:#ffffff0f!important}
.why__ring{background:#ffffff0f!important}
.why h3,.why__grid h3{color:#fff!important;font-size:17px!important;margin-bottom:10px!important}
.why p,.why__grid p{color:var(--tz-mut)!important;font-size:14.5px!important}
.brandword .c1{color:var(--tz-p-l)!important}
.brandword .c2{color:var(--tz-y)!important}
.brandword .c3{color:#fff!important}

/* free page ke why icons free.css me 112px hain */
.why__ico{width:132px!important}
.why__grid li:hover .why__ring{box-shadow:0 0 0 6px rgba(146,110,212,.16)}

/* ==========================================================================
   9. CLASSROOM SHOT / HOW IT WORKS / BAND   (free page)
   ========================================================================== */
.shot{background:var(--tz-bg)!important;padding:20px 0 70px!important}
.shot__frame{
  border:6px solid var(--tz-line2)!important;max-width:1120px!important;
  box-shadow:0 26px 60px #00000073!important;
}
.shot__cap{background:linear-gradient(180deg,transparent,rgba(18,12,36,.9))!important}
.shot__cap b{color:var(--tz-y)!important}

.how{padding:78px 0!important;background:linear-gradient(180deg,var(--tz-bg),var(--tz-bg2))!important}
.how__step{
  background:linear-gradient(170deg,var(--tz-card),var(--tz-bg3));
  border:1px solid var(--tz-line);border-radius:22px;padding:32px 22px;
  box-shadow:0 10px 28px #00000040;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.how__step:hover{transform:translateY(-10px);border-color:var(--tz-p);box-shadow:var(--tz-glow-p)}
.how__ring{background:#ffffff0f!important}
.how__ico{width:124px!important}
.how__step h3{color:#fff!important;font-size:19px!important}
.how__step p{color:var(--tz-mut)!important;font-size:15px!important}
.how__arrow{color:var(--tz-p-l)!important}
.how__arrow svg{width:56px!important;height:28px!important}

/* yellow trust band -> dark purple band with gold accents */
.band{
  background:linear-gradient(140deg,var(--tz-p-dd),var(--tz-bg3) 55%,var(--tz-p-dd))!important;
  padding:52px 0!important;border-block:1px solid var(--tz-line2);
}
.band__inner{gap:52px!important}
.band__item{
  padding:24px;border-radius:20px;background:#ffffff0a;border:1px solid #ffffff14;
  transition:background .22s ease,transform .22s ease;
}
.band__item:hover{background:rgba(146,110,212,.16);transform:translateY(-5px)}
.band__ico{width:86px!important;height:86px!important}
.band__item h3{color:var(--tz-y)!important;font-size:20px!important}
.band__item p{color:var(--tz-text2)!important;font-size:15.5px!important}

/* ==========================================================================
   10. LEAD FORM  (free page)
   ========================================================================== */
.lead{padding-bottom:70px!important}
.lead__box{
  background:linear-gradient(160deg,var(--tz-card2),var(--tz-bg3))!important;
  border:1px solid var(--tz-line2);
  box-shadow:0 26px 60px #00000080,0 0 0 8px rgba(146,110,212,.07)!important;
  padding:56px 44px 48px!important;border-radius:32px!important;
}
.lead__h{font-size:clamp(28px,3.4vw,48px)!important}
.hl{color:var(--tz-y)!important}
.lead__p{color:var(--tz-text2)!important;font-size:19px!important}
.field input{
  background:#ffffff!important;border:2px solid var(--tz-line2)!important;
  font-size:18px!important;padding:22px 22px 22px 58px!important;border-radius:14px!important;
  /* free.css me `color:var(--ink)` laga hai. Wahan --ink dark (#1f2b45) hai,
     par YE file --ink ko #F1EBFC (lagbhag safed) kar deti hai - aur input ka
     background safed hai. Nateeja: user jo type karta tha wo dikhta hi nahi
     tha. Isliye yahan text ka rang alag se dark set kiya hai. */
  color:#1E1B33!important;
}
.field input::placeholder{color:#8A93A8!important}
.field input:focus{outline-color:var(--tz-p)!important;border-color:var(--tz-p)!important}
.submit{
  padding:24px 26px!important;font-size:clamp(16px,2.1vw,24px)!important;border-radius:14px!important;
}
.lead__note{color:var(--tz-mut)!important;font-size:14.5px!important}
.pet{width:290px!important}

/* ==========================================================================
   11. OFFER BOX + CTA
   ========================================================================== */
.offer{padding:20px 0 70px!important}
.offer__box{
  background:
    radial-gradient(700px 320px at 50% 0%,rgba(146,110,212,.24),transparent 70%),
    linear-gradient(160deg,var(--tz-card2),var(--tz-bg3))!important;
  border:2px dashed var(--tz-p)!important;
  border-radius:28px!important;
  padding:58px 240px!important;
  box-shadow:0 26px 60px #00000080,0 0 0 8px rgba(146,110,212,.07)!important;
}
.offer__h,.offer__box--dark .offer__h{color:#fff!important;font-size:clamp(19px,2.5vw,30px)!important}
.offer__h .yes,.offer__yes{color:var(--tz-g)!important}
.offer__now{color:var(--tz-y)!important;font-size:clamp(46px,6.4vw,84px)!important;
  text-shadow:0 6px 30px rgba(255,201,60,.35)}
.offer__was{color:var(--tz-mut)!important;text-decoration:line-through;
  font-size:clamp(20px,2.6vw,34px)!important}
.offer__note,.offer__micro,.micro{color:var(--tz-mut)!important;font-size:13px!important}
.offer__pet,.offer__stack{width:238px!important}

.badge-circle--l,.offer__badge-left{
  width:140px!important;height:140px!important;font-size:15px!important;
  border-color:#ffffff26!important;
}
.badge-star,.offer__badge-right{width:142px!important;height:142px!important;font-size:14.5px!important}
.badge-star b,.offer__badge-right b{font-size:30px!important}
/* badges box ke andar hi rahein — bahar nikal kar page se kat rahe the */
.badge-circle--l,.offer__badge-left{left:2px!important}
.badge-star,.offer__badge-right{right:2px!important}

/* CTA button — bada, chamakdar, dark theme par pop kare */
.cta{
  max-width:600px!important;padding:20px 34px!important;border-radius:14px!important;
  background:linear-gradient(180deg,#4FDC72,var(--tz-g) 55%,var(--tz-g-d))!important;
  box-shadow:0 7px 0 #1E7A38,0 18px 36px rgba(63,203,99,.34)!important;
}
.cta:hover{box-shadow:0 4px 0 #1E7A38,0 12px 26px rgba(63,203,99,.4)!important}
.cta__t b,.cta__txt b{font-size:clamp(17px,2.1vw,25px)!important}
.cta__t i,.cta__txt i{font-size:11px!important}
.cta svg,.cta__cart{width:36px!important;height:36px!important}

.youget{background:#ffffff0f!important;border-color:var(--tz-line2)!important;padding:22px 24px!important}
.youget h4{font-size:17px!important}
.youget li{font-size:14px!important;color:var(--tz-text2)!important}

/* ==========================================================================
   12. GUARANTEES / ONE-TIME / FOOTER
   ========================================================================== */
.gt,.guarantee{gap:26px!important;margin:40px 0 34px!important}
.gt li,.guarantee li{
  background:#ffffff08;border:1px solid #ffffff12;border-radius:20px;padding:24px 22px;
  transition:background .22s ease,transform .22s ease,border-color .22s ease;
}
.gt li:hover,.guarantee li:hover{
  background:rgba(146,110,212,.14);border-color:var(--tz-p);transform:translateY(-5px);
}
.gt__ico,.guarantee__ico{width:78px!important;height:78px!important}
.gt h4,.guarantee h4{color:#fff!important;font-size:16.5px!important}
.gt p,.guarantee p{color:var(--tz-mut)!important;font-size:14px!important}

.onetime{
  background:linear-gradient(90deg,var(--tz-bg3),var(--tz-card2),var(--tz-bg3))!important;
  border:1px dashed var(--tz-p)!important;border-radius:14px!important;
  color:var(--tz-p-lt)!important;font-size:16px!important;padding:18px!important;
  margin-bottom:44px!important;
}
.onetime .st,.onetime span{color:var(--tz-p-l)!important}
.onetime .rd{color:var(--tz-y)!important}

.ft,.footer{
  background:linear-gradient(180deg,#180F30,#0C0818)!important;
  color:var(--tz-mut)!important;padding:44px 0!important;
  border-top:1px solid var(--tz-line);position:relative;
}
.ft::before,.footer::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--tz-p),var(--tz-p-lt),var(--tz-p),transparent);
  opacity:.7;
}
.ft__brand img,.footer__brand img{height:40px!important}
.ft__brand span,.footer__brand span{font-size:11px!important;color:var(--tz-p-lt)!important}
.ft__brand small,.footer__brand small{font-size:11.5px!important;color:var(--tz-mut)!important}
.ft__badges li,.footer__badges li{font-size:12px!important;transition:transform .2s ease,color .2s ease}
.ft__badges li:hover,.footer__badges li:hover{transform:translateY(-4px);color:var(--tz-p-lt)}
.ft__badges svg,.footer__badges svg{width:30px!important;height:30px!important}
.ft__help b,.footer__help b{font-size:14px!important;color:#fff!important}
.ft__help span,.footer__help span{font-size:12px!important}
.ft__help a,.footer__help a{color:var(--tz-y)!important;font-size:13px!important}
.footer__nav a{color:var(--tz-mut)}
.footer__nav a:hover{color:var(--tz-p-lt)}

/* ---- footer ke legal links — saare 8 pages par bilkul ek jaise ----
   Har page ka footer alag class use karta hai (.footer / .ft / .ftfe / .ft3),
   isliye links ke liye ek common class .ft-links banayi hai. */
.ft-links{
  display:flex;align-items:center;justify-content:center;
  gap:8px 15px;flex-wrap:wrap;font-size:14px!important;font-weight:500;
}
.ft-links a{color:var(--tz-mut);text-decoration:none;white-space:nowrap;transition:color .2s ease}
.ft-links a:hover{color:var(--tz-p-lt);text-decoration:underline}
.ft-links i{color:var(--tz-line2);font-style:normal}
/* .ft / .footer wale footers me brand + badges + help pehle se hain,
   isliye links ko apni poori-chaudai wali line par rakha hai. */
.ft__inner .ft-links,
.footer__inner .ft-links{
  flex:1 0 100%;margin-top:16px;padding-top:14px;border-top:1px solid var(--tz-line);
}

/* ==========================================================================
   12z. "What's Inside" ke neeche wala GET button + trust row
        (sections.js lagata hai; button ka naam page ke product ka)
   ========================================================================== */
/* .inside__left flex row hai (box + sheets side by side). Button ko poori
   line milni chahiye taaki wo image ke NEECHE aaye, uske bagal me nahi. */
.inside__left{flex-wrap:wrap!important;align-content:center!important}
.tzget{flex:1 0 100%;grid-column:1/-1;margin:28px auto 0;width:100%;max-width:620px;text-align:center}
.tzget__btn{
  display:block;width:100%;border:0;cursor:pointer;font:inherit;
  background:linear-gradient(96deg,#7b3fe4 0%,#9a5bf0 45%,#6d33d8 100%);
  color:#fff;border-radius:60px;padding:19px 28px;
  font-size:clamp(16px,1.9vw,23px);font-weight:800;letter-spacing:-.3px;line-height:1.3;
  box-shadow:0 9px 0 #4b1fa5,0 18px 36px rgba(110,50,220,.45);
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
.tzget__btn b{font-weight:900;color:var(--tz-y)}
.tzget__btn:hover{transform:translateY(-3px);filter:brightness(1.05);
  box-shadow:0 12px 0 #4b1fa5,0 24px 44px rgba(110,50,220,.5)}
.tzget__btn:active{transform:translateY(5px);box-shadow:0 4px 0 #4b1fa5}

@media (max-width:620px){
  .tzget{margin-top:22px}
  .tzget__btn{padding:16px 18px;border-radius:40px}
}

/* ==========================================================================
   12a. PRICING BLOCK — "Everything Above, One Small Payment"
        (sections.js ise har paid page par footer se pehle lagata hai;
         price har page ka apna hota hai)
   ========================================================================== */
.tzbuy{padding:60px 0 64px;background:var(--tz-bg2);text-align:center}
.tzbuy__eyebrow{
  margin:0 0 12px;color:var(--tz-y);font-size:13px;font-weight:800;letter-spacing:2.6px;
}
.tzbuy__h{
  margin:0 0 12px;color:#fff;font-weight:900;letter-spacing:-.8px;line-height:1.15;
  font-size:clamp(26px,3.6vw,42px);
}
.tzbuy__h span{color:var(--tz-p-lt)}
.tzbuy__sub{margin:0 auto 30px;max-width:640px;color:var(--tz-mut);font-size:16px}

/* --- teen stat boxes --- */
.tzbuy__stats{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.tzbuy__stat{
  min-width:170px;padding:16px 24px;border-radius:14px;
  background:var(--tz-card);border:1px solid var(--tz-line);
}
.tzbuy__stat s,.tzbuy__stat b{display:block;font-size:27px;font-weight:900;letter-spacing:-.5px}
.tzbuy__stat s{color:var(--tz-mut)}
.tzbuy__stat span{display:block;margin-top:4px;font-size:10.5px;font-weight:700;letter-spacing:1.6px;color:var(--tz-mut)}
.tzbuy__stat--pay{border-color:#e0409a;box-shadow:0 0 0 3px #e0409a26}
.tzbuy__stat--pay b{color:#fff}
.tzbuy__stat--zero{border-color:#2fa98a}
.tzbuy__stat--zero b{color:#3fd3ad}
.tzbuy__save{margin:0 0 30px;font-size:14px;color:var(--tz-mut)}
.tzbuy__save b{color:var(--tz-y)}

/* --- safed card --- */
.tzbuy__card{
  max-width:560px;margin:0 auto;background:#fff;color:#26224a;
  border:2px solid var(--tz-y);border-radius:18px;padding:30px 28px 26px;
  box-shadow:0 26px 60px rgba(0,0,0,.5);
}
.tzbuy__name{margin:0 0 4px;font-size:20px;font-weight:800;color:#1c1a3d}
.tzbuy__nsub{margin:0;font-size:14px;color:#6f6a9c}
.tzbuy__rule{border:0;border-top:1px solid #e6e3f5;margin:18px 0}
.tzbuy__price{margin:0;display:flex;align-items:baseline;justify-content:center;gap:14px}
.tzbuy__price s{font-size:22px;color:#9a95bd}
.tzbuy__price b{font-size:clamp(40px,6vw,58px);font-weight:900;color:#4b25cf;letter-spacing:-2px}
.tzbuy__once{margin:6px 0 0;font-size:14px;font-weight:700;color:#d1342f}

.tzbuy__feats{
  list-style:none;margin:20px 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:9px;text-align:left;
}
.tzbuy__feats li{
  position:relative;padding:9px 10px 9px 30px;border-radius:8px;
  background:#f2f7f4;border:1px solid #dcece4;font-size:12.5px;line-height:1.35;color:#33305c;
}
.tzbuy__feats li::before{
  content:"✓";position:absolute;left:11px;top:8px;color:#2e9e6b;font-weight:900;font-size:12px;
}

.tzbuy__cmp{
  margin:22px 0 12px;display:flex;justify-content:center;gap:26px;flex-wrap:wrap;
  font-size:14px;font-weight:700;color:#4a4670;
}
.tzbuy__cmp s{color:#9a95bd}
.tzbuy__today{color:#d1342f}

.tzbuy__btn{
  display:flex;align-items:center;justify-content:center;gap:12px;width:100%;
  border:0;border-radius:10px;cursor:pointer;font:inherit;
  background:linear-gradient(180deg,#ffd94f,#f5b800);color:#2a2000;
  font-size:clamp(19px,3vw,26px);font-weight:900;letter-spacing:.5px;padding:15px 20px;
  box-shadow:0 6px 0 #c99700,0 14px 26px rgba(0,0,0,.28);
  transition:transform .16s ease,box-shadow .16s ease;
}
.tzbuy__btn svg{width:26px;height:26px;flex:none}
.tzbuy__btn:hover{transform:translateY(-2px);box-shadow:0 8px 0 #c99700,0 18px 30px rgba(0,0,0,.32)}
.tzbuy__btn:active{transform:translateY(3px);box-shadow:0 3px 0 #c99700}

/* WarriorPlus ka apna ADD TO CART button image (12-Aug) — hamara gold
   button sirf un pages par bachta hai jinka W+ link abhi nahi mila. */
/* Image me hi price line, "powered by" aur card icons chhape hain, isliye
   uske around koi border/shadow nahi — safed card par flat baithti hai. */
.tzbuy__wp{
  display:block;margin:6px auto 0;line-height:0;text-align:center;
  transition:transform .16s ease,filter .16s ease;
}
.tzbuy__wp img{
  display:inline-block;border:0;width:100%;max-width:430px;height:auto;
}
.tzbuy__wp:hover{transform:translateY(-2px);filter:brightness(1.03)}
.tzbuy__wp:active{transform:translateY(2px)}

.tzbuy__pow{margin:10px 0 0;font-size:12px;font-style:italic;color:#8b86ad}
.tzbuy__cards{
  list-style:none;margin:12px 0 0;padding:0;
  display:flex;justify-content:center;gap:7px;flex-wrap:wrap;
}
.tzbuy__cards li{
  border:1px solid #ded9f0;border-radius:5px;padding:4px 9px;
  font-size:9.5px;font-weight:800;letter-spacing:.4px;color:#5d5891;background:#fafaff;
}
.tzbuy__disc{margin:16px 0 0;font-size:10px;line-height:1.55;color:#8b86ad;text-align:center}
.tzbuy__disc b,.tzbuy__disc strong{color:#5d5891}
.tzbuy__disc em{font-style:normal}
.tzbuy__disc:empty{margin:0}   /* W+ script aane tak koi khaali gap na dikhe */

@media (max-width:620px){
  .tzbuy{padding:44px 0 48px}
  .tzbuy__stat{min-width:0;flex:1 1 45%;padding:13px 12px}
  .tzbuy__stat s,.tzbuy__stat b{font-size:22px}
  .tzbuy__card{padding:24px 18px 22px}
  .tzbuy__feats{grid-template-columns:1fr}
  .tzbuy__cmp{gap:14px}
}

/* ==========================================================================
   12b. "WE'LL SEE YOU INSIDE" — footer se pehle wala section
        (interact.js ise har page par footer ke upar laga deta hai)
   ========================================================================== */
.seeyou{padding:56px 0 60px;background:linear-gradient(180deg,var(--tz-bg),var(--tz-bg2))}
.seeyou__grid{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:56px;align-items:center;
}

/* --- baayein: photo + peeche do sajawati shapes --- */
.seeyou__shot{position:relative;justify-self:center;width:min(420px,100%)}
.seeyou__shot img{
  position:relative;z-index:2;width:100%;height:auto;display:block;
  border-radius:20px;border:9px solid var(--tz-card2);
  box-shadow:0 26px 50px rgba(0,0,0,.5);
}
.seeyou__blob{position:absolute;z-index:1;display:block;width:118px;height:128px}
.seeyou__blob--a{
  top:-34px;right:-34px;border-radius:34px 8px 34px 8px;
  background:linear-gradient(150deg,var(--tz-p-l),var(--tz-p-d));
}
.seeyou__blob--b{
  bottom:-34px;left:-34px;border-radius:8px 34px 8px 34px;
  /* reference me ye shape kaala hai, par hamara background bhi dark hai —
     isliye halka purple rakha taaki shape dikhe */
  background:linear-gradient(150deg,var(--tz-line2),var(--tz-bg3));
}

/* --- daayein: text --- */
.seeyou__eyebrow{
  display:flex;align-items:center;gap:14px;margin:0 0 22px;
  color:var(--tz-p-lt);font-size:14px;font-weight:800;letter-spacing:2.4px;
}
.seeyou__eyebrow i{display:block;width:56px;height:3px;border-radius:3px;background:var(--tz-p);flex:none}
.seeyou__lead{margin:0 0 22px;font-size:19px;line-height:1.65;color:var(--tz-text2)}
.seeyou__lead b{color:var(--tz-text);font-weight:700}
.seeyou__list{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:11px}
.seeyou__list li{
  position:relative;padding-left:24px;font-size:17px;font-weight:600;color:var(--tz-text);
}
.seeyou__list li::before{
  content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;
  border-radius:50%;background:var(--tz-p-l);
}
.seeyou__note{margin:0 0 26px;font-size:17px;color:var(--tz-text2)}
.seeyou__ps{
  background:var(--tz-card);border:1px solid var(--tz-line);
  border-radius:16px;padding:22px 26px;
}
.seeyou__ps p{margin:0 0 12px;font-size:16px;line-height:1.6;color:var(--tz-text2)}
.seeyou__ps p:last-child{margin-bottom:0}
.seeyou__ps b{color:var(--tz-text)}
.seeyou__ps .sm{font-size:14.5px;color:var(--tz-mut)}
.seeyou__brand{color:var(--tz-p-lt)!important}

@media (max-width:900px){
  .seeyou{padding:40px 0 44px}
  .seeyou__grid{grid-template-columns:1fr;gap:44px}
  .seeyou__shot{width:min(340px,86%)}
  .seeyou__lead,.seeyou__note{font-size:17px}
  .seeyou__list li{font-size:16px}
}

/* ==========================================================================
   13. NAYE INTERACTIVE COMPONENTS  (interact.js inhe banata hai)
   ========================================================================== */

/* ---- 13a. upar scroll progress bar ---- */
.tz-prog{
  position:fixed;left:0;top:0;height:4px;width:0;z-index:120;pointer-events:none;
  background:linear-gradient(90deg,var(--tz-p-d),var(--tz-p),var(--tz-p-lt),var(--tz-y));
  box-shadow:0 0 14px rgba(146,110,212,.8);
  transition:width .1s linear;
}

/* ---- 13b. sticky bottom CTA bar ---- */
.tz-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:110;
  transform:translateY(120%);transition:transform .35s cubic-bezier(.2,.9,.3,1);
  background:linear-gradient(180deg,rgba(36,25,67,.97),rgba(18,12,36,.99));
  backdrop-filter:blur(10px);
  border-top:1px solid var(--tz-line2);
  box-shadow:0 -14px 40px #00000073;
  padding:14px 0;
}
.tz-bar.on{transform:none}
.tz-bar__in{
  width:min(1480px,93vw);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
}
.tz-bar__txt{display:flex;flex-direction:column;line-height:1.3}
.tz-bar__txt b{color:#fff;font-size:17px;font-weight:700}
.tz-bar__txt span{color:var(--tz-mut);font-size:12.5px}
.tz-bar__price{display:flex;align-items:baseline;gap:12px}
.tz-bar__price b{color:var(--tz-y);font-size:30px;font-weight:900;line-height:1}
.tz-bar__price s{color:var(--tz-mut);font-size:16px}
.tz-bar__btn{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  background:linear-gradient(180deg,#4FDC72,var(--tz-g) 55%,var(--tz-g-d));
  color:#fff;font-weight:800;font-size:16px;letter-spacing:.2px;
  padding:15px 32px;border-radius:12px;border:0;
  box-shadow:0 5px 0 #1E7A38,0 12px 26px rgba(63,203,99,.35);
  transition:transform .12s,box-shadow .12s;
}
.tz-bar__btn:hover{transform:translateY(2px);box-shadow:0 3px 0 #1E7A38,0 8px 18px rgba(63,203,99,.4)}
@media (max-width:720px){
  .tz-bar__in{justify-content:center;text-align:center}
  .tz-bar__txt{display:none}
}

/* ---- 13c. back to top ---- */
.tz-top{
  position:fixed;right:26px;bottom:104px;z-index:109;
  width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;
  background:linear-gradient(180deg,var(--tz-p-l),var(--tz-p-d));
  color:#fff;font-size:26px;line-height:1;
  box-shadow:0 10px 26px rgba(146,110,212,.5);
  opacity:0;pointer-events:none;transform:translateY(16px) scale(.85);
  transition:opacity .3s,transform .3s;
}
.tz-top.on{opacity:1;pointer-events:auto;transform:none}
.tz-top:hover{transform:translateY(-4px) scale(1.07)}

/* ---- 13d. mouse ke peeche chalta halka spotlight ---- */
.tz-spot{
  position:fixed;left:0;top:0;width:520px;height:520px;z-index:0;pointer-events:none;
  margin:-260px 0 0 -260px;border-radius:50%;
  background:radial-gradient(circle,rgba(146,110,212,.16),transparent 66%);
  transition:transform .18s ease-out,opacity .3s;opacity:0;
}
body:hover .tz-spot{opacity:1}

/* ---- 13e. click par ripple ---- */
.tz-ripple{
  position:absolute;border-radius:50%;pointer-events:none;
  background:#ffffff5c;transform:scale(0);animation:tz-rip .6s ease-out forwards;
}
@keyframes tz-rip{to{transform:scale(2.6);opacity:0}}

/* ---- 13f. counter number ---- */
.tz-count{display:inline-block;font-variant-numeric:tabular-nums}

/* ---- 13g. card tilt ---- */
.tz-tilt{
  transform-style:preserve-3d;
  transition:transform .18s ease-out,box-shadow .25s ease,border-color .25s ease;
  will-change:transform;
}

/* ---- 13h. countdown timer offer box ke andar ---- */
.tz-timer{
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  margin:0 auto 22px;
}
.tz-timer__lbl{color:var(--tz-p-lt);font-size:14px;font-weight:600;letter-spacing:.4px}
.tz-timer__box{
  min-width:70px;padding:10px 8px;border-radius:12px;text-align:center;
  background:linear-gradient(180deg,var(--tz-card2),var(--tz-bg3));
  border:1px solid var(--tz-line2);box-shadow:0 8px 20px #00000059;
}
.tz-timer__box b{display:block;font-size:28px;font-weight:900;color:var(--tz-y);line-height:1}
.tz-timer__box span{display:block;font-size:9.5px;color:var(--tz-mut);letter-spacing:1px;margin-top:3px}

/* ---- 13i. section ke beech purple divider ---- */
.tz-div{
  height:1px;border:0;margin:0;
  background:linear-gradient(90deg,transparent,var(--tz-line2),transparent);
}

/* ---- 13j. sneak-peek dots ---- */
.tz-dots{display:flex;justify-content:center;gap:10px;margin-top:26px}
.tz-dots button{
  width:11px;height:11px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--tz-line2);transition:transform .2s,background .2s,width .2s;
}
.tz-dots button.on{width:32px;border-radius:20px;background:linear-gradient(90deg,var(--tz-p),var(--tz-p-lt))}
.tz-dots button:hover{transform:scale(1.25)}

/* ---- 13k. zoom overlay dark theme ---- */
.zoom{background:rgba(9,6,20,.9)!important}
.zoom img{border-color:var(--tz-line2)!important}
.zoom__x{background:var(--tz-p)!important;color:#fff!important}

/* ==========================================================================
   14. INDEX (funnel menu) page
   ========================================================================== */
body .bar{background:linear-gradient(180deg,#1B1038,#120C24)!important;padding:26px 0!important}
body .bar img{height:52px!important}
body .bar span{color:var(--tz-p-lt)!important;font-size:12px!important}
body a.card{
  background:linear-gradient(170deg,var(--tz-card),var(--tz-bg3))!important;
  border:1px solid var(--tz-line)!important;border-radius:20px!important;padding:26px!important;
  box-shadow:0 10px 28px #00000040;
}
body a.card:hover{
  transform:translateY(-8px)!important;
  border-color:var(--tz-p)!important;box-shadow:var(--tz-glow-p)!important;
}
body a.card h2{color:#fff!important;font-size:19px!important}
body a.card p{color:var(--tz-mut)!important;font-size:13.5px!important}
body a.card .price{color:var(--tz-y)!important;font-size:20px!important}
body a.card .tag{background:rgba(146,110,212,.2)!important;color:var(--tz-p-lt)!important;font-size:11px!important}
body > .wrap > h1{color:#fff!important;font-size:34px!important}
body > .wrap > .sub{color:var(--tz-mut)!important}

/* ==========================================================================
   15. RESPONSIVE — bada layout chhoti screen par bhi na tute
   ========================================================================== */
@media (max-width:1200px){
  .offer__box{padding:56px 110px!important}
  .hero{padding:48px 0 58px!important}
}
@media (max-width:900px){
  .offer__box{padding:86px 24px 34px!important}
  .peek__box{padding:44px 26px 8px!important}
  .panel{padding:34px 22px 30px!important}
  .hero__right{min-height:auto!important}
  .oneonly{width:120px!important;height:120px!important;font-size:12px!important}
  .price-circle{width:130px!important;height:130px!important}
  .lead__box{padding:34px 20px!important}
  .band__inner{gap:24px!important}
  .tz-top{right:16px;bottom:96px;width:48px;height:48px}
}
@media (max-width:620px){
  .sec-title,.h2{font-size:clamp(24px,7vw,34px)!important}
  .ticks li{font-size:18px!important}
  .why__ico{width:104px!important}
  .how__ico{width:104px!important}
}

/* ==========================================================================
   16. PER-PAGE OVERRIDES
   Har HTML file ke apne <style> block me kuch light colors hard-coded hain.
   Wo block theme.css ke BAAD load hota hai, isliye yahan !important se
   dobara dark kiya gaya hai.
   ========================================================================== */

/* ---------- fe page ---------- */
.fe-brand .w{color:#fff!important}
.fe-brand .y{color:var(--tz-y)!important}
.fe-brand .v{background:var(--tz-p)!important;color:#fff!important}
.fe-h2{color:var(--tz-y)!important}
.fe-h3{color:#fff!important}
.launch{width:160px!important;height:160px!important}
.launch b{font-size:32px!important;color:#B0201F!important}

.lovewrap{
  background:linear-gradient(180deg,var(--tz-bg2),var(--tz-bg))!important;
  padding:78px 0!important;
}
.lovewrap .sec-title{color:#fff!important}
.lovewrap h3{color:#fff!important}
.lovewrap p{color:var(--tz-mut)!important}
.lovewrap .why__grid li + li::before{display:none!important}

/* FAQ accordion */
.faq{padding:20px 0 70px!important}
.faq__grid{gap:18px 26px!important}
.faq__item{
  background:linear-gradient(170deg,var(--tz-card),var(--tz-bg3))!important;
  border:1px solid var(--tz-line)!important;border-radius:16px!important;
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease;
}
.faq__item:hover,.faq__item.open{border-color:var(--tz-p)!important;box-shadow:var(--tz-glow-p)!important}
.faq__q{color:#fff!important;font-size:15.5px!important;padding:20px 22px!important;font-weight:600}
.faq__q i{color:var(--tz-p-l)!important;font-size:22px!important;transition:transform .25s ease}
.faq__item.open .faq__q i{transform:rotate(45deg)}
.faq__a{color:var(--tz-mut)!important;font-size:14.5px!important;padding:0 22px 20px!important}

/* fe / oto3 ke chhote footers */
.ftfe,.ft3{
  background:linear-gradient(180deg,#180F30,#0C0818)!important;
  color:var(--tz-mut)!important;padding:34px 0!important;
  border-top:1px solid var(--tz-line);
}
.ftfe nav i,.ft3 nav i{color:var(--tz-line2)!important}
.ftfe nav,.ft3 nav{font-size:14px!important}
.ftfe__trust b,.ft3__trust b{color:#fff!important;font-size:13px!important}
.stars{color:var(--tz-y)!important;font-size:15px!important}

/* ---------- oto3 page ---------- */
.hero h1 .l2,.hero h1 .l1{color:#fff!important}
.hero h1 .l2{color:var(--tz-p-l)!important}
.pagesbadge{
  width:132px!important;height:132px!important;
  background:radial-gradient(circle at 34% 26%,var(--tz-p-l),var(--tz-p) 55%,var(--tz-p-d))!important;
  border-color:#ffffff33!important;box-shadow:0 14px 34px rgba(146,110,212,.5)!important;
}
.pagesbadge b{color:var(--tz-y)!important;font-size:28px!important}
.peekpanel{
  border:1px solid var(--tz-line2)!important;border-radius:22px!important;
  background:linear-gradient(160deg,var(--tz-card),var(--tz-bg3))!important;
  padding:38px 24px 24px!important;box-shadow:var(--tz-glow)!important;
}
.peekpill{
  background:linear-gradient(180deg,var(--tz-p-l),var(--tz-p-d))!important;
  font-size:16px!important;padding:9px 30px!important;
}
.cardgrid{gap:16px!important}

/* ---------- oto5 page ---------- */
.pill,.morepill{background:linear-gradient(180deg,var(--tz-p-l),var(--tz-p-d))!important}
.pill{font-size:clamp(13px,1.6vw,17px)!important;padding:10px 26px!important}
.morepill{font-size:14.5px!important;padding:8px 26px!important}
.steps{
  background:linear-gradient(160deg,var(--tz-card2),var(--tz-bg3))!important;
  border:1px solid var(--tz-line2);border-radius:24px!important;
  padding:38px 32px!important;box-shadow:var(--tz-glow)!important;margin:14px 0 44px!important;
}
.steps h2{font-size:clamp(19px,2.5vw,28px)!important}
.step__ico{width:100px!important;height:100px!important;color:var(--tz-p-d)!important}
/* asli icon images ke peeche halka circle — warna dark bg par dikhte nahi the.
   Padding itni honi chahiye ki square icon circle ke ANDAR rahe:
   120px circle ke andar zyada se zyada ~84px ka square aata hai
   (120 / root2), isliye 18px padding -> 84px icon. Pehle 9px thi,
   icon 94px ho jata tha aur uske kone circle se bahar nikalte the. */
.step__ico--img{
  width:120px!important;height:120px!important;padding:18px!important;border-radius:50%!important;
  background:radial-gradient(circle at 50% 40%,#ffffff2b,#ffffff0d 70%)!important;
  border:1px solid var(--tz-line2)!important;
  box-shadow:inset 0 0 22px #ffffff14, 0 8px 18px rgba(0,0,0,.35)!important;
}
.step__ico--img img{width:100%!important;height:100%!important;object-fit:contain!important}
.step{align-items:center!important}
.step h3{font-size:16px!important}
.step p{color:var(--tz-mut)!important;font-size:14px!important}
.step__arrow{color:var(--tz-p-l)!important}
.step__n{background:var(--tz-g)!important;width:22px!important;height:22px!important}
.lovepanel{
  background:linear-gradient(160deg,var(--tz-card),var(--tz-bg3))!important;
  border:1px solid var(--tz-line)!important;border-radius:22px!important;
  padding:30px 22px!important;box-shadow:var(--tz-glow)!important;
}
.create{gap:34px!important}
.create__cards{gap:14px!important}

/* ---------- oto1 / oto2 ---------- */
.heroblocks,.heroprop{filter:drop-shadow(0 16px 26px rgba(0,0,0,.5))}

/* ==========================================================================
   17. Jinko animation se pareshani ho
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  body::before,.tz-spot{animation:none!important;transition:none!important}
  .tz-spot{display:none}
}

/* ==========================================================================
   18. LAYOUT FIXES  (07-Aug-2026)
   Chrome me screenshot dekh kar 5 dikkat theek ki gayi hain.
   ========================================================================== */

/* ---- 18a. free page ka hero heading: 3 line ki jagah 2 line ----
   Dikkat : "50 Kids / Coloring / Pages" — 3 line ho rahi thi.
            "Coloring Pages" 106px par ~706px chaudi thi, par hero ka left
            column sirf 690px ka hai -> isliye "Pages" neeche gir raha tha.
   Ilaaj  : font 106 -> 94px (aur vw factor 7.2 -> 6.0 taki har screen width
            par fit rahe), plus nowrap. HTML ka <br> apni jagah hai, isliye
            ab hamesha THEEK 2 line banti hain: "50 Kids" / "Coloring Pages".
   Note   : 820px se neeche hero single-column ho jata hai, wahan nowrap
            hata dete hain warna text bahar nikal jayega.               */
.rainbow,.pages{font-size:clamp(38px,6vw,94px)!important}
@media (min-width:821px){
  .hero__h1{white-space:nowrap}
}

/* ---- 18b. topbar ka tagline chhup raha tha ----
   Dikkat : "Create. Print. Learn. Have Fun!" aadha kata hua dikh raha tha.
            Wajah -> free page ka purana wave (52px, absolute, bottom par).
            Light theme me wo safed lehar thi; dark me usme bg color bhar
            diya tha, to wo opaque parda ban kar tagline ke upar aa gaya.
   Ilaaj  : wave hata diya (dark theme me uska koi kaam nahi bacha) aur
            topbar ko neeche thodi saans lene ki jagah de di.            */
.topbar__wave{display:none!important}
.tb,.topbar{padding:18px 0 22px!important}
.logo{gap:9px!important}

/* ---- 18c. lead form section upar se chipka hua tha ----
   Dikkat : hero khatam hote hi form ka box turant shuru ho jata tha.
   Ilaaj  : upar 48px ki jagah de di, ab saaf alag section lagta hai.    */
.lead{padding-top:48px!important;padding-bottom:70px!important}

/* ---- 18d. step waale arrow beech me nahi the ----
   Dikkat : "How It Works?" (free page) aur "3 steps" (oto5) ke beech ke
            teer cards ke UPAR ki taraf lage the, center me nahi.
            Wajah -> row par align-items:start tha + arrow par padding-top.
   Ilaaj  : row ab stretch (saare card barabar height ke), arrow apne aap
            beech me. oto5 ka <style> theme ke BAAD load hota hai isliye
            wahan !important zaroori hai.                                */
.how__row,.steps__row{align-items:stretch!important}
.how__arrow,.step__arrow{
  align-self:center!important;padding-top:0!important;
  display:grid!important;place-items:center!important;
}
/* Mobile par steps ek ke neeche ek aate hain, to daayein wala teer galat
   lagta hai. Page ki apni CSS me display:none tha par upar wala
   display:grid!important use dabaa raha tha — isliye yahan bhi !important. */
@media(max-width:980px){ .how__arrow,.step__arrow{display:none!important} }

/* ---- 18e. footer sticky CTA bar ke peeche chhup raha tha ----
   Dikkat : page ke sabse neeche footer ke links (Privacy / Terms / Support)
            aur brand line par green "GET MY FREE PAGES" wali fixed bar
            chadh jati thi. Fixed element apne liye jagah nahi chhodta.
   Ilaaj  : footer ko neeche 120px extra padding — utni hi jagah jitni bar
            leti hai. Ab bar footer ke upar nahi, uske khaali hisse me
            baithti hai aur poora footer padhne layak rehta hai.
   Note   : saare pages par footer ka class ek jaisa NAHI hai —
            .footer = free + oto4  |  .ft   = oto1 / oto2 / oto5
            .ftfe   = fe page      |  .ft3  = oto3
            Chaaron likhna zaroori hai, warna koi page chhut jata hai
            (pehli baar fe aur oto3 chhut gaye the).                    */
.ft,.footer,.ftfe,.ft3{padding:44px 0 120px!important}
@media (max-width:720px){
  .ft,.footer,.ftfe,.ft3{padding-bottom:150px!important}
}

/* ---- 18f. "Why Kids & Parents Love" cards: icon aur title chipke hue the ----
   Dikkat : icon ka circle title ke upar chadh raha tha.
            Wajah -> upar section 8 me icon ka dabba 132px CHAUDA hai par
            uski height purani 88px hi reh gayi thi. Andar ka icon square
            (132x132) hai, to wo dabbe se 44px BAHAR nikal kar title par
            aa baithta tha.
   Ilaaj  : height ab apne aap content jitni (auto), aur neeche 24px ki
            saaf jagah. Ab icon aur title ke beech proper gap hai.
   Scope  : sirf free page. Baaki saare pages ka icon ".why__ico--img"
            hai, use :not() se bahar rakha hai -> wahan kuch nahi badla.  */
.why__ico:not(.why__ico--img){
  height:auto!important;
  margin-bottom:24px!important;
}

/* ==========================================================================
   TEMPORARY — REVIEWS / RATING SECTION BAND
   ==========================================================================
   "Real Feedback — What Parents & Teachers Actually Say" wala section
   filhaal chhupa diya gaya hai (08-Aug-2026, aapke kehne par).

   Ye sirf ek CSS rule hai — section ka code kahin se hataya NAHI gaya.
   WAPAS DIKHANA HO TO: neeche wali 1 rule delete kar dein, bas.
   (Section sections.js ke secLove() se banta hai, id = tzs-reviews.)
   ========================================================================== */
#tzs-reviews{display:none!important}

/* 11-Aug-2026 — footer ka "Trusted by / Parents & Teachers ★★★★★" badge bhi
   isi tarah chhupa diya. Ye ★★★★★ ek rating hai jiske peeche koi asli review
   nahi hai, isliye upar wale section ke saath ise bhi hata diya.
   Sirf fe aur oto3 par tha (baaki pages ke footer me ye badge hai hi nahi).
   Code HTML me waisa ka waisa hai — wapas chahiye to ye 1 rule delete kar dein. */
.ftfe__trust,.ft3__trust{display:none!important}


/* ==========================================================================
   19. MOBILE FIX PASS  (10-Aug-2026)

   Phone par kuch pages daayein se kat rahe the (horizontal scroll). Jaanch
   me wajah har jagah ek hi nikli: grid ke column apne content se chhote nahi
   ho pate the. CSS me "1fr" ka matlab minmax(auto,1fr) hota hai, aur "auto"
   kabhi bhi content ke min-width se neeche nahi jata - isliye 360px ki screen
   par bhi column 180px+ ke ban jate the aur page bahar nikal jata tha.
   Ilaaj: har aisi jagah minmax(0,1fr) + min-width:0.

   Do jagah inline style bhi hata di gayi thi (inline style har CSS ko harata
   hai, isliye mobile rule kabhi lagti hi nahi thi):
     - fe   (/animal-coloring-bundle/) -> ul.strip ab class "strip--4" use karti hai
     - oto5 (/tracezoo-ai-generator/)  -> offer box ka grid ab class "offer-split" use karta hai
   ========================================================================== */

/* ---- feature strip (fe / oto1 / oto2 / oto3 / oto5) ---- */
.strip--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.strip li{min-width:0}
.strip li b{overflow-wrap:anywhere}

/* ---- oto5 ka offer box: text + "You Get" list ---- */
.offer-split{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:26px;align-items:center}
.offer-split > *{min-width:0}
.youget{min-width:0}

/* ---- "What's Inside" grid (oto3 par kat raha tha) ---- */
.inside__grid > *{min-width:0}
.inside__txt{max-width:100%}
/* DHYAN: yahan pehle ".sheetshot{max-width:100%}" likha tha - wo GALAT tha.
   live.css me .sheetshot ka cap 460px aur .sheetshot--wide ka 720px hai, aur
   ye file baad me load hoti hai, isliye wo cap mit gaya tha aur worksheet wali
   image poori chaudai (1100px+) le kar bahut badi dikhne lagi thi.
   Ab min() se dono cheezein hoti hain: cap bhi bacha rehta hai aur chhoti
   screen par image container se bahar bhi nahi jaati. */
.sheetshot{max-width:min(420px,100%)}
.sheetshot--wide{max-width:min(660px,100%)}
.sheetshot img,.sheetshot .slot,.sheetshot svg{max-width:100%;height:auto}

@media (max-width:900px){
  .strip,.strip--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inside__grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .offer-split{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .strip,.strip--4{grid-template-columns:minmax(0,1fr)}
}

/* ---- tap target: footer ke legal link phone par sirf 21px unche the ---- */
@media (max-width:820px){
  .ft-links a,.footer__nav a{display:inline-block;padding:7px 2px}
}
/* ---- carousel ke prev/next button phone par 3px bahar nikal rahe the ---- */
@media (max-width:560px){
  .peek__nav--prev{left:0}
  .peek__nav--next{right:0}
}

/* ---- "We'll see you inside" ke decorative blob bahar nikal rahe the ---- */
.seeyou{overflow:hidden}
/* ---- oto3 ka 6-column "why" grid 1100px jaisi width par fit nahi ho raha tha.
        oto.css usko sirf 1080px se neeche 3 column karti hai, isliye 1081-1250
        ke beech 6 patle column bane rehte the aur page bahar nikal jata tha.

        DHYAN: min-width:1081px zaroori hai. Bina uske ye rule chhoti screen par
        bhi lag jati hai aur oto.css ki 2-column (620px) / 1-column (430px) wali
        rules ko haraa deti hai - phir 375px par 3 patle column ban jate hain
        aur icon card se bahar nikal jata hai. ---- */
@media (min-width:1081px) and (max-width:1250px){
  .why__grid.c5,.why__grid.c6{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* ---- oto3 ka "300+ PAGES" badge jaan-boojh kar panel se bahar nikla hua hai
        (right:-46px). Par 1100-1280px ke beech side me itni jagah nahi bachti,
        isliye wo 3-7px page se hi bahar chala jata tha. In widths par use
        thoda andar kar diya - design ka look wahi rehta hai. ---- */
@media (max-width:1280px){
  .pagesbadge{right:-8px!important}
}