/* play77z.com — Zip & trims. Greige card stock, petrol + tangerine zipper tapes, nickel teeth, brass eyelets. */
:root{
  --card:#EFECE5;--card2:#E4E0D6;--sheet:#FBFAF6;--ink:#1A1B20;--muted:#51535B;--line:#D2CDC1;
  --pet:#0F4C57;--pet-d:#0A333B;--pet-dd:#072025;--pet-l:#D5E5E4;
  --tan:#EE5A2A;--tan-d:#B8421B;--lil:#B9AEE6;--but:#F2D65C;
  --ni:#B4B8BF;--ni-d:#7A7F88;--ni-l:#E6E8EB;--br:#C29A45;--br-l:#E8CB7C;--br-d:#8C6922;--ox:#8E2433;--win:#17694A;
  --f-disp:"DM Serif Display","Noto Serif Bengali",Georgia,serif;
  --f-body:"Encode Sans","Noto Sans Bengali",system-ui,sans-serif;
  --font-head:var(--f-disp);--font-body:var(--f-body);
  --surface:var(--sheet);--surface-2:var(--card);--border:var(--line);--heading:var(--ink);--text:var(--ink);
  --primary:var(--pet);--primary-contrast:#fff;--accent:var(--tan);
  --wrap:1260px;--gut:16px;--lh:1.62;--hlh:1.04;
  --teeth-h:repeating-linear-gradient(90deg,var(--ni-l) 0 5px,var(--ni-d) 5px 6px,transparent 6px 10px);
  --teeth-h2:repeating-linear-gradient(90deg,transparent 0 5px,var(--ni) 5px 9px,var(--ni-d) 9px 10px);
}
html:lang(bn){--lh:1.8;--hlh:1.42}
@media (min-width:768px){:root{--gut:32px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:24px}
body{margin:0;background:var(--card);color:var(--ink);font:400 1.0625rem/var(--lh) var(--f-body);overflow-x:clip;text-rendering:optimizeLegibility}
svg{display:block;max-width:100%}
a{color:var(--pet);text-underline-offset:.2em;text-decoration-thickness:.07em}
a:hover{color:var(--tan-d)}
:focus-visible{outline:3px solid var(--tan);outline-offset:2px}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:12px;top:-80px;z-index:100;background:var(--tan);color:var(--ink);font-weight:700;padding:12px 16px;text-decoration:none}
.skip:focus{top:12px}
h1,h2,h3{font-family:var(--f-disp);font-weight:400;color:var(--ink);margin:0;font-synthesis:none}
html:lang(bn) h1,html:lang(bn) h2,html:lang(bn) h3{font-weight:700;font-stretch:92%}
/* zipper teeth band (horizontal) */
.teeth,.tape::after,.ft::before,.cta::before{background:var(--teeth-h) 0 0/100% 5px repeat-x,var(--teeth-h2) 0 5px/100% 5px repeat-x}

/* ---------- header ---------- */
.hd{position:relative;z-index:40}
.tape{position:relative;background:var(--pet);color:var(--pet-l);padding-bottom:10px}
.tape::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background-color:var(--pet-d)}
.tape-in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.tape-t{margin:0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.8125rem;line-height:1.5}
:lang(en) .tape-t{font-stretch:78%;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.lsw{display:flex;flex:none;gap:4px}
.lsw a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 12px;color:#fff;text-decoration:none;font-size:.875rem;line-height:1.2;border:1px dashed rgba(213,229,228,.45);border-radius:4px}
.lsw a[aria-current]{background:var(--but);color:var(--ink);border:1px solid var(--but)}
.lsw a:hover:not([aria-current]){background:rgba(255,255,255,.1);color:#fff}
.bar{background:var(--sheet);border-bottom:1px solid var(--line);box-shadow:0 1px 0 #fff inset}
.bar-in{display:flex;align-items:center;gap:14px;min-height:72px}
/* woven label wordmark */
.lbl{display:inline-flex;align-items:stretch;flex:none;text-decoration:none;min-height:46px;position:relative}
.lbl-a{display:flex;align-items:center;padding:0 14px 0 16px;background:var(--pet);color:#fff;font:400 1.75rem/1 var(--f-disp);letter-spacing:.01em;clip-path:polygon(8px 0,100% 0,100% 100%,8px 100%,0 50%);outline:1px dashed rgba(255,255,255,.55);outline-offset:-5px}
.lbl-b{display:flex;align-items:center;padding:0 14px 0 12px;background:var(--tan);color:var(--ink);font:700 .8125rem/1.2 var(--f-body);clip-path:polygon(0 0,100% 0,calc(100% - 8px) 50%,100% 100%,0 100%)}
:lang(en) .lbl-b{font-stretch:75%;text-transform:uppercase;letter-spacing:.14em;font-size:.875rem}
.lbl:hover .lbl-a{background:var(--pet-d)}
/* zipper-pull menu toggle */
.pull-btn{margin-left:auto;display:inline-flex;align-items:center;gap:10px;min-height:48px;min-width:48px;padding:0 16px 0 12px;border:1px solid var(--line);border-radius:24px;background:var(--card);color:var(--ink);font:700 .9375rem/1 var(--f-body);cursor:pointer}
:lang(en) .pull-btn{font-stretch:80%;text-transform:uppercase;letter-spacing:.1em}
.pb-i{position:relative;width:14px;height:26px;border-radius:7px;background:linear-gradient(160deg,var(--ni-l),var(--ni-d));box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);transition:transform .25s}
.pb-i i{position:absolute;left:4px;top:5px;width:6px;height:9px;border-radius:3px;background:var(--sheet)}
.hd.open .pull-btn{background:var(--pet);border-color:var(--pet);color:#fff}
.hd.open .pb-i{transform:rotate(180deg)}
.nav-l{list-style:none;margin:0;padding:0;counter-reset:nv}
.nav-l li{counter-increment:nv}
.nav-l a{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:600 1rem/1.3 var(--f-body)}
.nav-l a::before{content:counter(nv,decimal-leading-zero);font:700 .75rem/1 var(--f-body);font-stretch:75%;color:var(--muted);letter-spacing:.04em}
html:lang(bn) .nav-l a::before{content:counter(nv,bengali)}
.nav-l a[aria-current]{color:var(--pet)}
.nav-l a[aria-current]::before{color:var(--tan-d)}
.nav-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 20px 0 16px;background:var(--tan);color:var(--ink);text-decoration:none;font:700 1rem/1.2 var(--f-body);clip-path:polygon(12px 0,100% 0,100% 100%,12px 100%,0 50%)}
:lang(en) .nav-cta{font-stretch:85%;text-transform:uppercase;letter-spacing:.06em}
.nav-cta:hover{background:var(--ink);color:#fff}
.eye{flex:none;width:12px;height:12px;border-radius:50%;background:var(--sheet);box-shadow:0 0 0 3px var(--br),inset 0 1px 2px rgba(0,0,0,.3)}
@media (max-width:1179px){
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--pet-d);color:#fff;padding:22px var(--gut) 24px;max-height:calc(100dvh - 130px);overflow:auto;box-shadow:0 24px 40px rgba(7,32,37,.35)}
  .nav::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:var(--teeth-h) 0 0/100% 5px repeat-x,var(--teeth-h2) 0 5px/100% 5px repeat-x}
  .hd.open .nav{display:block}
  .nav-l{display:grid;gap:0}
  .nav-l a{min-height:54px;color:#fff;font-size:1.125rem;border-bottom:1px dashed rgba(213,229,228,.28)}
  .nav-l a::before{color:var(--lil);min-width:28px}
  .nav-l a[aria-current]{color:var(--but)}
  .nav-l a[aria-current]::before{color:var(--but)}
  .nav-cta{margin-top:20px;width:100%;min-height:54px}
  .nav-cta:hover{background:var(--but);color:var(--ink)}
}
@media (max-width:359px){.pb-t{display:none}.pull-btn{padding:0 16px}}
@media (min-width:1180px){
  .pull-btn{display:none}
  .nav{flex:1;display:flex;align-items:center;gap:18px;min-width:0}
  .nav-l{display:flex;flex-wrap:wrap;gap:2px 20px;margin-left:auto;justify-content:flex-end}
  .nav-l a{min-height:44px;font-size:.9375rem;position:relative}
  .nav-l a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:repeating-linear-gradient(90deg,var(--tan) 0 6px,transparent 6px 9px)}
  .nav-l a:hover{color:var(--pet)}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;text-decoration:none;text-align:center;font:700 1.0625rem/1.25 var(--f-body);border:2px solid transparent;border-radius:4px;transition:transform .15s,box-shadow .15s,background .15s,color .15s}
:lang(en) .btn{font-stretch:85%;letter-spacing:.05em;text-transform:uppercase}
.btn-t{background:var(--tan);color:var(--ink);box-shadow:0 4px 0 var(--tan-d)}
.btn-t:hover{color:var(--ink);transform:translateY(-2px);box-shadow:0 6px 0 var(--tan-d)}
.btn-t:active{transform:translateY(3px);box-shadow:0 1px 0 var(--tan-d)}
.btn-o{border-color:var(--pet);color:var(--pet);background:transparent}
.btn-o:hover{background:var(--pet);color:#fff}

/* ---------- home hero ---------- */
.hero{position:relative;padding:32px 0 48px;background:
  repeating-linear-gradient(0deg,rgba(26,27,32,.018) 0 1px,transparent 1px 3px),
  repeating-linear-gradient(90deg,rgba(26,27,32,.018) 0 1px,transparent 1px 3px),var(--card)}
.hero-g{display:grid;gap:34px;align-items:start}
.kick{margin:0 0 18px;display:flex}
.kick span{display:inline-flex;align-items:center;gap:10px;padding:6px 14px;background:var(--sheet);border:1px solid var(--line);font:700 .875rem/1.5 var(--f-body);color:var(--pet)}
.kick span::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--card);box-shadow:0 0 0 3px var(--br)}
:lang(en) .kick span{font-stretch:78%;text-transform:uppercase;letter-spacing:.14em}
.hero h1{font-size:clamp(2.3rem,1.3rem + 4.2vw,4.4rem);line-height:var(--hlh);letter-spacing:-.012em;text-wrap:balance;margin-bottom:22px}
html:lang(bn) .hero h1{font-size:clamp(1.8rem,1.15rem + 2.9vw,3.2rem);letter-spacing:0}
.lead{font-size:1.125rem;max-width:62ch;color:#2c2d33}
.lead p{margin:0}
.lead p+p{margin-top:.6em}
.acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
/* tape swatches */
.sws{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:8px;max-width:560px}
.sw{position:relative;padding:10px 16px 20px 18px;font:600 .9375rem/1.45 var(--f-body);color:var(--ink);background:var(--c,var(--lil))}
.sw::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:var(--teeth-h) 0 0/100% 5px repeat-x,var(--teeth-h2) 0 5px/100% 5px repeat-x;background-color:rgba(0,0,0,.12)}
.sw-1{--c:var(--but)}.sw-2{--c:var(--lil)}.sw-3{--c:#9CCFC4}
@media (min-width:600px){.sw:nth-child(2){margin-left:24px}.sw:nth-child(3){margin-left:48px}}
/* trim card holding the game */
.trim{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);background:var(--sheet);box-shadow:0 1px 0 var(--line),0 22px 40px -18px rgba(10,51,59,.35);border:1px solid var(--line);container-type:inline-size;scroll-margin-top:12px}
.trim-sp{position:relative;background:var(--pet);border-right:1px solid var(--pet-d)}
.trim-sp::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:12px;translate:-50% 0;background:repeating-linear-gradient(180deg,var(--ni-l) 0 4px,var(--ni-d) 4px 5px,transparent 5px 9px) 0 0/6px 100% no-repeat,repeating-linear-gradient(180deg,transparent 0 4px,var(--ni) 4px 8px,var(--ni-d) 8px 9px) 6px 0/6px 100% no-repeat}
.zp-trim{position:absolute;left:50%;top:14px;width:26px;translate:-50% 0}
.trim-in{min-width:0}
.trim-h{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px dashed var(--line);min-height:48px}
.hole{flex:none;width:16px;height:16px;border-radius:50%;background:var(--card);box-shadow:0 0 0 4px var(--br),0 0 0 5px var(--br-d),inset 0 2px 3px rgba(0,0,0,.25)}
.trim-l{font:700 .875rem/1.35 var(--f-body);color:var(--pet)}
:lang(en) .trim-l{font-stretch:78%;text-transform:uppercase;letter-spacing:.12em}
.trim-d{margin-left:auto;font-size:.8125rem;color:var(--muted);white-space:nowrap}
@container (max-width:360px){.trim-d{display:none}}
#game-root:empty{min-height:700px}
@media (min-width:980px){
  .hero{padding:52px 0 72px}
  .hero-g{grid-template-columns:minmax(0,1fr) minmax(380px,470px);gap:52px}
  .hero-c{padding-top:10px}
}
@media (min-width:1280px){.hero-g{grid-template-columns:minmax(0,1fr) 500px;gap:72px}}
@media (max-width:479px){.trim{grid-template-columns:18px minmax(0,1fr)}.trim-sp::before{width:8px;background-size:4px 100%;background-position:0 0,4px 0}.zp-trim{width:16px}}

/* zipper pull svg */
.zp .zp-body{fill:var(--ni)}
.zp .zp-shine{fill:var(--ni-l);opacity:.8}
.zp .zp-ring{fill:none;stroke:var(--ni-d);stroke-width:6}
.zp .zp-tab{fill:var(--ni-d)}
.zp .zp-z{fill:none;stroke:var(--ni-l);stroke-width:7;stroke-linejoin:round;stroke-linecap:round}

/* ---------- inner page head ---------- */
.ph{position:relative;padding:22px 0 40px;background:var(--card);border-bottom:1px solid var(--line)}
.ph-g{display:grid;gap:24px}
.crumbs ol{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;align-items:center;font-size:.875rem}
.crumbs li{display:flex;align-items:center}
.crumbs li+li::before{content:"";width:16px;height:2px;margin:0 10px;background:repeating-linear-gradient(90deg,var(--muted) 0 3px,transparent 3px 5px)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px}
.crumbs span{color:var(--muted)}
.ph h1{font-size:clamp(2.1rem,1.3rem + 3.3vw,3.8rem);line-height:var(--hlh);letter-spacing:-.01em;max-width:22ch;text-wrap:balance;margin-bottom:20px}
html:lang(bn) .ph h1{font-size:clamp(1.7rem,1.15rem + 2.3vw,2.8rem);max-width:28ch;letter-spacing:0}
.ph-z{display:none}
@media (min-width:1000px){
  .ph{padding:28px 0 56px}
  .ph-g{grid-template-columns:minmax(0,1fr) 150px;align-items:stretch}
  .ph-z{display:block;position:relative;min-height:240px}
  .ph-teeth{position:absolute;left:50%;top:-28px;bottom:108px;width:16px;translate:-50% 0;background:repeating-linear-gradient(180deg,var(--ni-l) 0 5px,var(--ni-d) 5px 6px,transparent 6px 10px) 0 0/8px 100% no-repeat,repeating-linear-gradient(180deg,transparent 0 5px,var(--ni) 5px 10px,var(--ni-d) 10px 11px) 8px 0/8px 100% no-repeat;box-shadow:-14px 0 0 var(--pet),14px 0 0 var(--pet)}
  .zp-ph{position:absolute;left:50%;bottom:0;width:64px;translate:-50% 0;filter:drop-shadow(0 8px 10px rgba(10,51,59,.25))}
}

/* ---------- body: zipper rail + content + side ---------- */
.body{display:grid;gap:28px;padding-top:32px;padding-bottom:64px}
.content{min-width:0;max-width:72ch;counter-reset:sec}
.rail{min-width:0}
.toc{background:var(--sheet);border:1px solid var(--line);padding:14px 16px 8px}
.toc-h{margin:0 0 6px;font:700 .8125rem/1.4 var(--f-body);color:var(--muted)}
:lang(en) .toc-h{font-stretch:78%;text-transform:uppercase;letter-spacing:.14em}
.toc-l{list-style:none;margin:0;padding:0;counter-reset:tc}
.toc-l li{counter-increment:tc}
.toc-l a{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;min-height:44px;padding:4px 0;text-decoration:none;color:var(--ink);font-size:.9375rem;line-height:1.4;border-top:1px dashed var(--line)}
html:lang(bn) .toc-l a{line-height:1.6}
.toc-l li:first-child a{border-top:0}
.toc-l a::before{content:counter(tc,decimal-leading-zero);font:700 .8125rem/1 var(--f-body);font-stretch:75%;color:var(--tan-d)}
html:lang(bn) .toc-l a::before{content:counter(tc,bengali)}
.toc-l a:hover{color:var(--pet)}
.toc-l a[aria-current]{color:var(--pet);font-weight:600}
.rail-z{display:none}
.side{display:none}
@media (min-width:1100px){
  .body{grid-template-columns:260px minmax(0,1fr);gap:48px;padding-top:48px}
  .rail{position:relative;padding-right:30px}
  .toc{position:sticky;top:24px;background:transparent;border:0;padding:4px 0 0}
  .toc-l a{border-top:0;grid-template-columns:34px minmax(0,1fr);position:relative}
  .toc-l a::after{content:"";position:absolute;right:-30px;top:50%;width:22px;height:2px;background:var(--line)}
  .toc-l a[aria-current]::after{background:var(--tan);height:3px}
  .rail-z{display:block;position:absolute;right:0;top:0;bottom:0;width:14px;background:repeating-linear-gradient(180deg,var(--ni-l) 0 4px,var(--ni-d) 4px 5px,transparent 5px 9px) 0 0/7px 100% no-repeat,repeating-linear-gradient(180deg,transparent 0 4px,var(--ni) 4px 8px,var(--ni-d) 8px 9px) 7px 0/7px 100% no-repeat;box-shadow:-6px 0 0 var(--pet),6px 0 0 var(--pet)}
  .rail-p{position:sticky;top:30vh;display:block;width:22px;height:46px;margin-left:-4px;border-radius:6px 6px 11px 11px;background:linear-gradient(160deg,var(--ni-l),var(--ni-d));box-shadow:0 4px 8px rgba(0,0,0,.25),inset 0 0 0 1px rgba(0,0,0,.15)}
  .rail-p::after{content:"";position:absolute;left:7px;top:22px;width:8px;height:14px;border-radius:4px;background:var(--card)}
}
@media (min-width:1360px){
  .page-inner .body{grid-template-columns:240px minmax(0,1fr) 250px;gap:44px}
  .side{display:block}
}
.content>*:first-child{margin-top:0}
.content p,.content ul,.content ol{margin:0 0 1.1em}
.content ul,.content ol{padding-left:1.3em}
.content li{margin-bottom:.45em}
.content li::marker{color:var(--tan-d);font-weight:700}
.content strong{font-weight:700;color:#101116}
.content h3{font-size:1.4rem;line-height:1.2;margin:1.6em 0 .55em;color:var(--pet)}
html:lang(bn) .content h3{font-size:1.25rem;line-height:1.5}
.intro{font-size:1.0625rem}
.sec{margin-top:56px;padding-top:30px;position:relative}
.sec::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:repeating-linear-gradient(90deg,var(--ni-d) 0 8px,transparent 8px 13px);opacity:.55}
.sec-p{margin-top:22px;padding-top:0}
.sec-p::before{display:none}
.sec>h2{counter-increment:sec;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;font-size:clamp(1.6rem,1.15rem + 1.5vw,2.3rem);line-height:1.1;margin:0 0 22px;scroll-margin-top:24px}
html:lang(bn) .sec>h2{font-size:clamp(1.35rem,1.1rem + 1vw,1.8rem);line-height:1.45}
.sec>h2::before{content:counter(sec,decimal-leading-zero);display:flex;align-items:center;justify-content:center;min-width:48px;height:40px;margin-top:2px;padding:0 10px;background:var(--pet);color:#fff;font:700 1rem/1 var(--f-body);font-stretch:80%;letter-spacing:.06em;outline:1px dashed rgba(255,255,255,.5);outline-offset:-4px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,6px 50%)}
html:lang(bn) .sec>h2::before{content:counter(sec,bengali);margin-top:4px}
.content table{display:block;overflow-x:auto;border-collapse:collapse;margin:0 0 1.4em;font-size:.95rem;max-width:100%;background:var(--sheet);border:1px solid var(--line)}
.content th,.content td{padding:10px 14px;text-align:left;vertical-align:top;border-bottom:1px dashed var(--line);min-width:120px}
.content th{background:var(--pet);color:#fff;font-weight:700}
.content blockquote{margin:0 0 1.2em;padding:14px 18px;border-left:4px solid var(--tan);background:var(--sheet)}

/* FAQ hang tags */
.faq{margin-top:64px}
.faq-h{font-size:clamp(1.6rem,1.15rem + 1.5vw,2.3rem);line-height:1.1;margin:0 0 22px;scroll-margin-top:24px}
html:lang(bn) .faq-h{font-size:clamp(1.35rem,1.1rem + 1vw,1.8rem);line-height:1.45}
.tags{display:grid;gap:12px}
.tag{position:relative;background:var(--sheet);border:1px solid var(--line);border-left:0;margin-left:14px}
.tag::before{content:"";position:absolute;left:-14px;top:0;bottom:0;width:14px;background:var(--sheet);border:1px solid var(--line);border-right:0;clip-path:polygon(100% 0,100% 100%,0 calc(100% - 14px),0 14px)}
.tag summary{list-style:none;display:grid;grid-template-columns:28px minmax(0,1fr) 36px;gap:10px;align-items:center;min-height:60px;padding:10px 12px 10px 4px;cursor:pointer;font:600 1.0625rem/1.45 var(--f-body)}
html:lang(bn) .tag summary{line-height:1.7}
.tag summary::-webkit-details-marker{display:none}
.tag-eye{width:16px;height:16px;border-radius:50%;background:var(--card);box-shadow:0 0 0 3px var(--br),inset 0 1px 2px rgba(0,0,0,.3)}
.tag-i{position:relative;width:36px;height:36px;border-radius:50%;background:var(--card)}
.tag-i::before,.tag-i::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2.5px;background:var(--pet);translate:-50% -50%;transition:transform .2s}
.tag-i::after{transform:rotate(90deg)}
.tag[open]{border-color:var(--pet)}
.tag[open]::before{border-color:var(--pet)}
.tag[open] .tag-i{background:var(--pet)}
.tag[open] .tag-i::before,.tag[open] .tag-i::after{background:#fff}
.tag[open] .tag-i::after{transform:rotate(0)}
.tag summary:hover .tag-q{color:var(--pet)}
.tag-a{padding:2px 18px 6px 42px;border-top:1px dashed var(--line)}
.tag-a p{margin:.8em 0}
@media (max-width:479px){.tag-a{padding-left:16px}}

/* CTA tape */
.cta{position:relative;margin-top:56px;background:var(--pet);color:#fff;padding:30px 22px 24px;display:grid;gap:18px}
.cta::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background-color:var(--pet-d)}
.cta p{margin:0;font-size:1.0625rem}
.cta .btn{justify-self:start}
@media (min-width:700px){.cta{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:34px 28px 28px}}

/* side swatch card */
.swc{position:sticky;top:24px;background:var(--sheet);border:1px solid var(--line);padding:30px 18px 18px;text-align:left}
.swc::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:var(--tan)}
.swc-hole{position:absolute;right:16px;top:22px;width:14px;height:14px;border-radius:50%;background:var(--card);box-shadow:0 0 0 3px var(--br)}
.swc-t{margin:0 0 8px;font:400 1.5rem/1.15 var(--f-disp);padding-right:26px}
html:lang(bn) .swc-t{font-weight:700;font-size:1.2rem;line-height:1.5}
.swc-p{margin:0 0 16px;font-size:.9375rem;color:var(--muted)}
.swc .btn{width:100%;padding:0 12px;font-size:.9375rem}

/* related: tape swatches */
.rel{background:var(--card2);padding:48px 0 60px;border-top:1px solid var(--line)}
.rel h2{font-size:clamp(1.6rem,1.15rem + 1.5vw,2.3rem);line-height:1.15;margin-bottom:22px}
html:lang(bn) .rel h2{font-size:clamp(1.35rem,1.1rem + 1vw,1.8rem);line-height:1.45}
.rel-l{list-style:none;margin:0;padding:0;display:grid;gap:12px}
@media (min-width:720px){.rel-l{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.rel-l{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rel-l li{display:flex}
.rc{flex:1;display:grid;grid-template-columns:34px minmax(0,1fr);background:var(--sheet);color:var(--ink);text-decoration:none;border:1px solid var(--line);transition:transform .15s,box-shadow .15s}
.rc:hover{color:var(--ink);transform:translateY(-3px);box-shadow:0 10px 20px -10px rgba(10,51,59,.4)}
.rc-tape{position:relative;background:var(--c,var(--pet))}
.rc-tape::after{content:"";position:absolute;top:0;bottom:0;right:0;width:10px;background:repeating-linear-gradient(180deg,var(--ni-l) 0 4px,var(--ni-d) 4px 5px,transparent 5px 9px) 0 0/5px 100% no-repeat,repeating-linear-gradient(180deg,transparent 0 4px,var(--ni) 4px 8px,var(--ni-d) 8px 9px) 5px 0/5px 100% no-repeat}
.rel-l li:nth-child(4n+2) .rc-tape{--c:var(--tan)}
.rel-l li:nth-child(4n+3) .rc-tape{--c:var(--lil)}
.rel-l li:nth-child(4n+4) .rc-tape{--c:var(--but)}
.rc-b{padding:16px 18px 18px;display:grid;gap:6px;align-content:start}
.rc-b strong{font:400 1.375rem/1.15 var(--f-disp);color:var(--pet)}
html:lang(bn) .rc-b strong{font-weight:700;font-size:1.125rem;line-height:1.5}
.rc-b span{font-size:.9375rem;line-height:1.55;color:var(--muted)}
html:lang(bn) .rc-b span{line-height:1.75}

/* ---------- footer ---------- */
.ft{position:relative;background:var(--pet-dd);color:#D9E4E3;padding-top:10px}
.ft::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background-color:var(--pet)}
.ft-g{display:grid;gap:36px;padding-top:44px;padding-bottom:40px}
@media (min-width:860px){.ft-g{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:48px}}
.care{margin-top:24px;max-width:46ch;background:var(--sheet);color:var(--ink);padding:16px 18px 18px;border-radius:0 0 14px 14px;position:relative}
.care::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:repeating-linear-gradient(90deg,var(--ni-d) 0 6px,transparent 6px 10px)}
.care-t{display:flex;align-items:center;gap:12px;margin:4px 0 10px;font:700 .875rem/1.4 var(--f-body);color:var(--pet)}
:lang(en) .care-t{font-stretch:78%;text-transform:uppercase;letter-spacing:.12em}
.care-18{flex:none;display:inline-grid;place-items:center;width:40px;height:40px;border:2px solid var(--ink);border-radius:50%;font:800 .875rem/1 var(--f-body);color:var(--ink);letter-spacing:0;text-transform:none}
.care-p{margin:0;font-size:.9375rem;line-height:var(--lh)}
.ft h2{font:700 .875rem/1.4 var(--f-body);color:var(--lil);margin:0 0 8px;padding-bottom:10px;border-bottom:1px dashed rgba(213,229,228,.3)}
:lang(en) .ft h2{font-stretch:78%;text-transform:uppercase;letter-spacing:.14em}
.ft ul{list-style:none;margin:0;padding:0}
.ft li a{display:flex;align-items:center;gap:12px;min-height:44px;color:#fff;text-decoration:none;font-size:.9375rem;line-height:1.4}
.ft li a::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 2px var(--br)}
.ft li a:hover{color:var(--but)}
.ft .lbl-a{outline-color:rgba(255,255,255,.4)}
.ft-bar{background:#04161A}
.ft-bar-in{display:flex;flex-wrap:wrap;align-items:center;gap:14px;min-height:68px;padding-block:12px;font-size:.875rem}
.age{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--tan);color:var(--ink);font:800 .9375rem/1 var(--f-body)}
.copy{color:#B5C6C4}
.ft-bar .lsw{margin-left:auto}

/* 404 */
.nf{min-height:62vh;padding:56px 0}
.nf h1{font-size:clamp(2.2rem,1.6rem + 3vw,4rem);line-height:var(--hlh);margin-bottom:20px}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .hd.open .nav{animation:unzip .32s cubic-bezier(.2,.8,.2,1)}
  @keyframes unzip{from{clip-path:inset(0 50% 100% 50%)}to{clip-path:inset(0 0 0 0)}}
  .sw{animation:slide .6s cubic-bezier(.2,.8,.2,1) both}
  .sw-2{animation-delay:.08s}.sw-3{animation-delay:.16s}
  @keyframes slide{from{transform:translateX(-22px)}}
  .trim{animation:lift .6s .1s cubic-bezier(.2,.8,.2,1) both}
  @keyframes lift{from{transform:translateY(14px)}}
  @supports (animation-timeline:view()){
    .sec>h2::before{animation:tagin linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
    @keyframes tagin{from{transform:translateX(-10px) rotate(-4deg)}}
    .rel-l li{animation:up linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
    @keyframes up{from{transform:translateY(16px)}}
  }
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}