@font-face{font-family:"PF";src:url(../fonts/pf-900.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"PF";src:url(../fonts/pf-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"PF";src:url(../fonts/pf-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-500.woff2) format("woff2");font-weight:500 600;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-700.woff2) format("woff2");font-weight:700 800;font-display:swap}
:root{--n1:#F3E9DF;--n2:#E8D6C4;--n3:#D9BFA6;--b1:#8B5E3C;--b2:#6E4129;--b3:#4A2C1D;--k1:#120C0A;--k2:#1E1512;--acc:#C9A27E;
--sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--serif:"PF","Playfair Display",Georgia,serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:#FBF7F2}
body{margin:0;min-height:100vh;color:var(--k1);font:400 16px/1.5 var(--sans);overflow-x:hidden;-webkit-tap-highlight-color:transparent}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* ---------- living background (light) ---------- */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(180deg,#FBF7F2 0%,#F7EFE7 45%,#F3E9DF 100%)}
.bg i{position:absolute;display:block}
.rays{left:50%;top:-30vh;width:220vmax;height:220vmax;margin-left:-110vmax;margin-top:-110vmax;
background:repeating-conic-gradient(from 0deg,rgba(217,191,166,.16) 0deg 5deg,rgba(217,191,166,0) 5deg 15deg);
-webkit-mask:radial-gradient(circle at 50% 50%,#000 0,rgba(0,0,0,.5) 22%,transparent 46%);mask:radial-gradient(circle at 50% 50%,#000 0,rgba(0,0,0,.5) 22%,transparent 46%);
animation:spin 90s linear infinite}
.blob{border-radius:50%;filter:blur(60px);will-change:transform}
.b1{width:70vw;height:70vw;max-width:520px;max-height:520px;left:-18vw;top:8vh;background:#D9BFA6;opacity:.75;animation:drift1 18s ease-in-out infinite alternate}
.b2{width:80vw;height:80vw;max-width:620px;max-height:620px;right:-26vw;top:46vh;background:#C9A27E;opacity:.45;animation:drift2 22s ease-in-out infinite alternate}
.b3{width:60vw;height:60vw;max-width:440px;max-height:440px;left:24vw;top:-12vh;background:conic-gradient(from 200deg,#fd5949,#d6249f,#285AEB,#fdf497,#fd5949);opacity:.22;animation:drift3 16s ease-in-out infinite alternate}
.b4{width:55vw;height:55vw;max-width:420px;max-height:420px;left:-10vw;top:110vh;background:#E8D6C4;opacity:.9;animation:drift2 20s ease-in-out infinite alternate}
.dots{inset:-44px 0 0 0;background:radial-gradient(rgba(139,94,60,.10) 1.2px,transparent 1.6px) 0 0/22px 22px;
-webkit-mask:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);animation:dots 6s linear infinite}
.grain{inset:-50%;opacity:.06;mix-blend-mode:multiply;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
animation:grain .9s steps(4) infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes drift1{to{transform:translate(22vw,10vh) scale(1.15)}}
@keyframes drift2{to{transform:translate(-20vw,-12vh) scale(.9)}}
@keyframes drift3{to{transform:translate(-14vw,8vh) scale(1.2)}}
@keyframes dots{to{transform:translateY(22px)}}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}50%{transform:translate(3%,-5%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(0,0)}}
/* glass */
.glass,.stats li,.guide,.how li,.find input,.sticky,.meta>span{background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border:1px solid rgba(255,255,255,.7);box-shadow:0 10px 30px -14px rgba(74,44,29,.28),inset 0 1px 0 rgba(255,255,255,.9)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.stats li,.guide,.how li,.find input,.sticky,.meta>span{background:rgba(255,255,255,.9)}}
/* ---------- hero ---------- */
.top,main,.foot{width:100%;max-width:460px;margin:0 auto;padding:0 18px;text-align:center}
.top{padding-top:44px}
.pfp{position:relative;width:148px;height:148px;margin:0 auto 16px;display:grid;place-items:center}
.pfp img{position:relative;z-index:2;width:132px;height:132px;border-radius:50%;object-fit:cover;border:4px solid #fff;display:block}
.ring{position:absolute;inset:0;border-radius:50%;z-index:1;background:conic-gradient(from 0deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5,#962fbf,#d62976,#fa7e1e,#feda75);animation:spin 6s linear infinite}
.halo{position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(circle,rgba(214,41,118,.18),rgba(201,162,126,.18) 45%,rgba(201,162,126,0) 70%);animation:breathe 3.2s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(.92);opacity:.7}50%{transform:scale(1.08);opacity:1}}
.handle{margin:0;font:700 17px/1.2 var(--sans);letter-spacing:.01em;color:var(--k1);display:inline-flex;align-items:center;gap:6px}
.tick{width:19px;height:19px}.tick path{fill:#0095F6}.tick .ck{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
h1{font:900 40px/1.04 var(--serif);font-variant-numeric:lining-nums;margin:12px 0 10px;letter-spacing:-.01em;color:var(--k1)}
.shine{background:linear-gradient(100deg,var(--k1) 0%,var(--b1) 30%,var(--k1) 50%,var(--b2) 75%,var(--k1) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 5s linear infinite}
@keyframes sheen{to{background-position:-250% 0}}
.lead{margin:0 auto 18px;max-width:330px;color:#4A2C1D;font-size:15.5px}
.lead b{color:var(--b1)}
.stats{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.stats li{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:99px;border-color:rgba(201,162,126,.55);font:600 13.5px/1 var(--sans);color:var(--b2)}
.stats li[hidden]{display:none}
.stats b{font:800 15px/1 var(--sans);font-variant-numeric:lining-nums tabular-nums;color:var(--k1)}
.eye{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
/* ---------- buttons ---------- */
.btn{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:14px 20px;border-radius:18px;text-decoration:none;font:700 16.5px/1.15 var(--sans);transition:transform .18s cubic-bezier(.3,1.6,.5,1),box-shadow .25s,filter .2s;overflow:hidden;isolation:isolate;user-select:none}
.btn svg{width:22px;height:22px;flex:none}
.btn:active{transform:scale(.96)}
@media (hover:hover){.btn:hover{transform:translateY(-2px)}}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(232,214,196,.7) 50%,transparent 70%);transform:translateX(-120%)}
.cta{display:grid;gap:12px}
.follow{background:#fff;color:var(--k1);border:1px solid #E8D6C4;box-shadow:0 10px 26px -14px rgba(74,44,29,.35)}
.follow::after{animation:swipe 4.5s ease-in-out infinite}
.tabbtn{color:#fff;background:var(--k1);border:1px solid var(--k1);box-shadow:0 14px 30px -14px rgba(18,12,10,.65),inset 0 1px 0 rgba(255,255,255,.12)}
.tabbtn svg{fill:none;stroke:#fff;stroke-width:1.9;stroke-linejoin:round}.tabbtn .dot{fill:var(--acc);stroke:none}
.tabbtn::after{background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);animation:swipe 4.5s ease-in-out 2.2s infinite}
@keyframes swipe{0%,60%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
/* ---------- how / search ---------- */
main{padding-top:30px}
.how{list-style:none;margin:0 0 16px;padding:0;display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.how li{display:inline-flex;align-items:center;gap:7px;font:600 13px/1 var(--sans);color:#4A2C1D;padding:6px 10px 6px 6px;border-radius:99px}
.how b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--k1);color:#fff;font:800 12px/1 var(--sans);font-variant-numeric:lining-nums}
.find{position:relative;margin:0 0 22px}
.find svg{position:absolute;left:18px;top:50%;width:20px;height:20px;margin-top:-10px;fill:none;stroke:var(--b1);stroke-width:2.2;stroke-linecap:round;pointer-events:none;z-index:2}
.find input{width:100%;height:56px;padding:0 18px 0 48px;border-radius:18px;color:var(--k1);font:600 16px var(--sans);letter-spacing:.04em;outline:none;-webkit-appearance:none;appearance:none;transition:border-color .2s,box-shadow .2s}
.find input::placeholder{color:rgba(110,65,41,.6);letter-spacing:.02em}
.find input:focus{border-color:var(--b1);box-shadow:0 0 0 4px rgba(139,94,60,.15)}
.empty{color:var(--b2);margin:0 0 16px}
/* ---------- guide cards (glass) ---------- */
.list{display:grid;gap:18px}
.guide{position:relative;padding:22px 18px 18px;border-radius:26px;text-align:center;
box-shadow:0 22px 44px -26px rgba(74,44,29,.45),inset 0 1px 0 rgba(255,255,255,.95);overflow:hidden;transition:transform .25s cubic-bezier(.3,1.4,.5,1),border-color .25s,box-shadow .25s}
.guide[hidden]{display:none}
.guide::before{content:"";position:absolute;inset:0 0 auto;height:55%;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));pointer-events:none}
@media (hover:hover){.guide:hover{transform:translateY(-4px);border-color:rgba(201,162,126,.7);box-shadow:0 30px 56px -26px rgba(74,44,29,.5)}}
.guide:active{transform:scale(.985)}
.new{position:absolute;top:14px;right:14px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 8px;border-radius:99px;background:var(--b1);color:#fff;font:800 11.5px/1 var(--sans);letter-spacing:.12em}
.new[hidden]{display:none}
.new i{width:8px;height:8px;border-radius:50%;background:#fff;animation:ping 1.6s ease-out infinite}
.new::before{content:"";position:absolute;inset:-3px;border-radius:99px;border:2px solid var(--b1);opacity:0;animation:pulse 2s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,255,255,.8)}100%{box-shadow:0 0 0 9px rgba(255,255,255,0)}}
@keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.35,1.7);opacity:0}}
.guide:has(.new:not([hidden])){border-color:rgba(139,94,60,.45)}
.ghd{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:12px}
.app{position:relative;display:grid;place-items:center;width:68px;height:68px;border-radius:20px;background:#fff;border:1px solid #E8D6C4;box-shadow:0 10px 22px -12px rgba(74,44,29,.45)}
.app svg{width:40px;height:40px}
.app em{position:absolute;right:-12px;bottom:-8px;font-style:normal;font-size:24px;line-height:1;filter:drop-shadow(0 3px 4px rgba(74,44,29,.25));animation:bob 2.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-4px) rotate(6deg)}}
.chip{display:inline-block;font:700 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--b2);margin-bottom:4px}
.kw{margin:0;font:900 46px/1 var(--serif);font-variant-numeric:lining-nums;letter-spacing:.02em;color:var(--b1)}
.kw.k6{font-size:42px}.kw.k8{font-size:36px}
.guide h3{margin:0 0 8px;font:800 21px/1.22 var(--serif);font-variant-numeric:lining-nums;color:var(--k1)}
.guide p{position:relative;margin:0 auto 10px;max-width:340px;color:#3A2A22;font-size:15px;line-height:1.5}
.hl{background:none;color:var(--k1);font-weight:700;box-shadow:inset 0 -.38em 0 rgba(217,191,166,.75);padding:0 .1em;border-radius:3px}
.credit{font-size:12.5px!important;color:var(--b2)!important}
.meta{position:relative;display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:2px 0 14px;font:600 12.5px/1 var(--sans);color:var(--b2)}
.meta>span{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:99px;border-color:rgba(201,162,126,.55);box-shadow:none}
.meta .views[hidden]{display:none}
.meta b{color:var(--k1);font-weight:800}
.actions{position:relative;display:grid;gap:10px}
.go{background:var(--k1);color:#fff;border-radius:99px;box-shadow:0 12px 26px -14px rgba(18,12,10,.7)}
.go::after{background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%)}
.go small{font:600 12px var(--sans);opacity:.7}
.go .arr{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
@media (hover:hover){.go:hover .arr{transform:translateX(4px)}.go:hover::after{animation:swipe .9s ease-out}}
.ghost{background:rgba(255,255,255,.6);color:var(--k1);border:1.5px solid #D9BFA6;border-radius:99px;min-height:50px;font-size:15px}
.tip{color:var(--b2);font-size:13.5px;margin:22px auto 0;max-width:330px}
.tip b{color:var(--k1)}
/* ---------- footer / sticky ---------- */
.foot{padding:40px 18px 120px}
.foot img{width:72px;height:72px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2.5px #d62976;display:block;margin:0 auto 10px}
.foot p{font:900 26px/1.1 var(--serif);margin:0 0 16px;color:var(--k1)}
.sticky{position:fixed;left:50%;bottom:max(12px,env(safe-area-inset-bottom));z-index:9;display:flex;align-items:center;gap:10px;width:calc(100% - 24px);max-width:436px;padding:8px 8px 8px 10px;border-radius:20px;background:rgba(255,255,255,.7);box-shadow:0 18px 40px -16px rgba(74,44,29,.45);transform:translateX(-50%);transition:transform .35s cubic-bezier(.3,1.3,.5,1),opacity .3s}
.sticky.off{transform:translate(-50%,140%);opacity:0;pointer-events:none}
.sticky img{width:40px;height:40px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 2px #d62976}
.st-t{flex:1;text-align:left;line-height:1.15;color:var(--k1)}.st-t b{display:block;font-size:14.5px}.st-t small{color:var(--b2);font-size:12px}
.sticky .btn{min-height:44px;padding:10px 18px;border-radius:14px;background:var(--k1);color:#fff;font-size:15px}
/* ---------- reveal ---------- */
.js .reveal{opacity:0;transform:translate3d(0,24px,0);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.9,.25,1)}
.js .reveal.in{opacity:1;transform:none}
.top>*{animation:rise .8s cubic-bezier(.2,.9,.25,1) both}
.top>:nth-child(2){animation-delay:.08s}.top>:nth-child(3){animation-delay:.16s}.top>:nth-child(4){animation-delay:.24s}.top>:nth-child(5){animation-delay:.32s}.top>:nth-child(6){animation-delay:.4s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (min-width:900px){.top{padding-top:64px}h1{font-size:48px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.js .reveal{opacity:1;transform:none;filter:none}}
/* v3: keywords + small text near-black for readability (Ankit 5:28 PM) */
.kw{color:#120C0A;font-size:50px;font-weight:900}
.kw.k6{font-size:45px}
.kw.k8{font-size:38px}
.chip{color:#2B2523}
.lead{color:#2B2523}
.lead b{color:#120C0A}
.stats li{color:#1E1512}
.how li{color:#1E1512}
.empty,.meta,.tip{color:#3A3330}
.credit{color:#3A3330!important}
.st-t small{color:#3A3330}
.find svg{stroke:#120C0A}
.new{background:#120C0A;color:#fff}
.new::before{border-color:#120C0A}

/* v4: Apple-style app-icon squircles in real brand colours (Ankit 5:39 PM) */
.app{width:72px;height:72px;border-radius:22.5%;border:0;background:linear-gradient(180deg,#FFFFFF,#F4F4F6);box-shadow:0 8px 20px -8px rgba(18,12,10,.28),0 0 0 .5px rgba(0,0,0,.08),inset 0 1px 0 #fff;overflow:visible}
.app::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 48%);pointer-events:none}
.app svg{width:42px;height:42px;position:relative;z-index:1}
.app em{z-index:2}
.app.b-claude{background:linear-gradient(180deg,#E08A6C,#D97757 55%,#C9694B)}
.app.b-claude svg path{fill:#FFFFFF}
.app.b-whatsapp{background:linear-gradient(180deg,#5FFC7B,#28D146)}
.app.b-whatsapp svg{width:44px;height:44px}.app.b-whatsapp svg path{fill:#FFFFFF}
.app.b-youtube svg{width:46px;height:46px}
.app.b-meta svg{width:46px;height:46px}
/* Instagram app tile inside Follow buttons */
.igt{display:inline-grid;place-items:center;width:30px;height:30px;flex:none;border-radius:22.5%;background:radial-gradient(circle at 30% 107%,#fdf497 0,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%);box-shadow:0 3px 8px -3px rgba(214,36,159,.55),inset 0 1px 0 rgba(255,255,255,.35)}
.igt svg{width:19px!important;height:19px!important;margin:0!important}.igt svg path{fill:#FFFFFF}
/* device tag on each guide */
.meta .dev{font-weight:700;color:#120C0A}
/* search right under the buttons, above the cards (Floto) */
main{padding-top:22px}.find{margin:0 0 12px}.how{margin:0 0 20px}

/* v5: "Reel dekho" next to "Guide kholo" (one row when both fit, stacked otherwise) */
.pair{display:flex;flex-wrap:wrap;gap:10px}
.pair>.btn{flex:1 1 140px;min-width:0;min-height:56px;padding:10px 14px;gap:8px}
.pair>.go{flex-grow:1.25}
.go .lbl{display:grid;justify-items:start;gap:2px;text-align:left;line-height:1.1}
.reel{background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);color:var(--k1);border:1px solid rgba(255,255,255,.85);border-radius:99px;font-size:15.5px;white-space:nowrap;box-shadow:0 10px 24px -14px rgba(74,44,29,.4),inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(217,191,166,.45)}
.reel .igt{width:26px;height:26px}
.reel .igt svg{width:16px!important;height:16px!important}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.reel{background:rgba(255,255,255,.92)}}

/* v6: one clean button system (Ankit 5:47 PM "buttons proper nahi h") —
   every button: same width (max 320px, centred), 52px tall, pill radius, label+icon centred on one line */
.cta,.pair{display:flex;flex-direction:column;align-items:stretch;gap:10px;width:100%;max-width:320px;margin-left:auto;margin-right:auto;flex-wrap:nowrap}
.cta>.btn,.pair>.btn{flex:none;width:100%;min-width:0;height:52px;min-height:52px;padding:0 20px;border-radius:999px;gap:10px;display:flex;align-items:center;justify-content:center;font:700 16px/1 var(--sans);white-space:nowrap;box-sizing:border-box;margin:0}
.cta>.btn>span,.pair>.btn>span{display:block;line-height:1;overflow:hidden;text-overflow:ellipsis}
.cta>.btn svg{width:22px;height:22px}
.cta .igt,.pair .igt{width:28px;height:28px}
.cta .igt svg,.pair .igt svg{width:17px!important;height:17px!important}
.pair>.go{color:#fff;background:var(--k1);border:1px solid var(--k1)}
.pair>.go .arr{width:20px;height:20px}
.pair>.reel{color:var(--k1);font-size:16px}
.actions{display:block}
.kt{display:inline-grid;place-items:center;width:28px;height:28px;flex:none;border-radius:22.5%;background:linear-gradient(180deg,#E08A6C,#C9694B);box-shadow:0 3px 8px -3px rgba(201,105,75,.6),inset 0 1px 0 rgba(255,255,255,.35)}
.kt svg{width:17px!important;height:17px!important;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.fsz{margin:8px 0 0!important;font:600 12px/1.2 var(--sans)!important;color:#6E6560!important;max-width:none!important}
@media (min-width:900px){.cta,.pair{max-width:340px}}
.cta{max-width:min(320px,calc(100% - 38px))}
@media (min-width:900px){.cta{max-width:min(340px,calc(100% - 38px))}}
.igt.rl svg rect,.igt.rl svg path:not(:last-child){fill:none!important}.igt.rl svg path:last-child{fill:#fff!important}

/* v8: banner restored (from original build) */
.top{padding-top:14px}
.cover{position:relative;width:100%;aspect-ratio:8/3;border-radius:22px;overflow:hidden;background:#EFE6DA;border:1px solid rgba(255,255,255,.75);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 14px 34px rgba(60,40,25,.14),0 2px 6px rgba(60,40,25,.06)}
.cover img{display:block;width:100%;height:100%;object-fit:cover}
.cover::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 35%);pointer-events:none}
.top>.pfp{margin-top:-44px;z-index:3}
@media (min-width:700px){.top{padding-top:22px}}

/* ---------- per-card deep links (#keyword) ---------- */
.guide{scroll-margin:24px 0 96px}
.cpl{position:absolute;top:14px;left:14px;z-index:2;display:inline-flex;align-items:center;gap:6px;height:32px;min-width:32px;padding:0 8px;border-radius:99px;border:1px solid rgba(201,162,126,.55);background:rgba(255,255,255,.75);color:var(--b2);font:800 11px/1 var(--sans);letter-spacing:.08em;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .2s,color .2s,transform .2s}
.cpl svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cpl span{display:none}
.cpl.ok{background:var(--b1);border-color:var(--b1);color:#fff}.cpl.ok span{display:inline}
@media (hover:hover){.cpl:hover{background:#fff;transform:scale(1.06)}}
.cpl:active{transform:scale(.94)}
.guide.hl{border-color:var(--acc)!important;animation:hlglow 2.6s ease-out both}
@keyframes hlglow{0%{box-shadow:0 0 0 0 rgba(201,162,126,0),0 22px 44px -26px rgba(74,44,29,.45)}12%{box-shadow:0 0 0 4px rgba(201,162,126,.95),0 0 36px 8px rgba(201,162,126,.6)}70%{box-shadow:0 0 0 3px rgba(201,162,126,.8),0 0 26px 4px rgba(201,162,126,.4)}100%{box-shadow:0 0 0 0 rgba(201,162,126,0),0 22px 44px -26px rgba(74,44,29,.45)}}
@media (prefers-reduced-motion:reduce){.guide.hl{animation:none!important;box-shadow:0 0 0 3px #C9A27E!important}}

/* ---------- deep-link paper plane ---------- */
.dlsky{position:fixed;inset:0;z-index:30;pointer-events:none;overflow:hidden;contain:strict}
.dlp{position:absolute;left:0;top:0;width:64px;height:44px;opacity:0;will-change:transform,opacity;transform-origin:50% 50%}
.dlp svg{display:block;width:100%;height:100%;filter:drop-shadow(0 9px 8px rgba(74,44,29,.28)) drop-shadow(0 2px 2px rgba(18,12,10,.12))}
.dlg svg{filter:none}
.dld{position:absolute;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:#8B5E3C;opacity:0;animation:dldot 1.5s cubic-bezier(.3,.6,.4,1) forwards}
@keyframes dldot{0%{opacity:0;transform:scale(.4)}8%{opacity:.55;transform:scale(1)}45%{opacity:.45;transform:scale(1)}100%{opacity:0;transform:scale(.5)}}
.dlfly .reveal{filter:none!important}
.dlhost{position:relative}
.guide.dlpop{animation:dlpop .78s both;border-color:rgba(201,162,126,.9)!important}
@keyframes dlpop{0%{transform:scale(1);animation-timing-function:cubic-bezier(.25,.6,.4,1)}30%{transform:scale(1.04);animation-timing-function:cubic-bezier(.5,0,.5,1)}58%{transform:scale(.992);animation-timing-function:cubic-bezier(.5,0,.5,1)}80%{transform:scale(1.005);animation-timing-function:ease-in-out}100%{transform:scale(1)}}
.dlglow,.dlring{position:absolute;box-sizing:border-box;z-index:3;border-radius:26px;pointer-events:none;font-style:normal}
.dlglow{box-shadow:0 0 0 3px #C9A27E,0 0 0 7px rgba(201,162,126,.18),0 0 46px 10px rgba(201,162,126,.55);opacity:0;animation:dlglow 1.75s ease both,dlpop .78s both}
@keyframes dlglow{0%{opacity:0}10%{opacity:1}75%{opacity:.9}100%{opacity:0}}
.dlring{border:2.5px solid #C9A27E;opacity:0;animation:dlring 1s cubic-bezier(.2,.75,.25,1) .08s both}
@keyframes dlring{0%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:scale(var(--sx,1.06),var(--sy,1.04))}}
@media (prefers-reduced-motion:reduce){.dlglow{animation:none!important;opacity:1}.dlring{display:none}.guide.dlpop{animation:none!important}}

/* deep-link flight v2 (Oct 30 night): while a deep link opens, glass skips the live backdrop blur (the background behind it is already soft),
   and decorative loops pause during the flight, so the page scrolls on the compositor instead of re-blurring every frame */
.dl .glass,.dl .stats li,.dl .guide,.dl .how li,.dl .find input,.dl .sticky,.dl .meta>span,.dl .reel{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.dlfly .bg *,.dlfly .shine,.dlfly .halo,.dlfly .ring,.dlfly .new i,.dlfly .new::before,.dlfly .btn::after,.dlfly .app em{animation-play-state:paused!important}
.dld{animation:none;opacity:0;left:0;top:0;will-change:transform,opacity}
html{background:#F7EFE7 linear-gradient(180deg,#FBF7F2 0%,#F7EFE7 45%,#F3E9DF 100%) fixed}
.bg{transition:opacity .35s ease}.dlfly .bg{opacity:0}   /* the soft blobs step back for the 1.5 s flight (the costliest layer to scroll over on phones), then return */

/* ---------- phone performance (Oct 31): Android lag fix ----------
   On touch screens the page used to re-blur the moving background behind every glass card on every frame
   (live backdrop-filter over 4 animated blur(60px) blobs + a full-screen grain/dots loop). On phones the glass is now
   a static, slightly more opaque frosted white, the blobs are soft radial gradients that don't move, and the background
   loops are still, so scrolling is just the compositor sliding pre-painted tiles. Desktop keeps the live version. */
@media (hover:none),(pointer:coarse),(max-width:700px){
  .glass,.stats li,.guide,.how li,.find input,.sticky,.meta>span,.reel{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .stats li,.how li,.find input,.meta>span{background:rgba(255,255,255,.74)}
  .guide{background:linear-gradient(180deg,rgba(255,255,255,.84),rgba(255,255,255,.7))}
  .sticky{background:#FFFDFA}
  .reel{background:rgba(255,255,255,.86)}
  .bg *{animation:none!important;will-change:auto!important}
  .blob{filter:none;border-radius:0}
  .b1{background:radial-gradient(closest-side,#D9BFA6 0,rgba(217,191,166,.85) 38%,rgba(217,191,166,0) 100%);transform:translate(11vw,5vh) scale(1.35)}
  .b2{background:radial-gradient(closest-side,#C9A27E 0,rgba(201,162,126,.8) 35%,rgba(201,162,126,0) 100%);transform:translate(-10vw,-6vh) scale(1.3)}
  .b3{-webkit-mask:radial-gradient(closest-side,#000 0,rgba(0,0,0,.75) 40%,transparent 100%);mask:radial-gradient(closest-side,#000 0,rgba(0,0,0,.75) 40%,transparent 100%);transform:translate(-7vw,4vh) scale(1.35)}
  .b4{display:none}
  .rays{width:200vmax;height:200vmax;margin-left:-100vmax;margin-top:-100vmax}
  .grain{inset:0;mix-blend-mode:normal;opacity:.035}
  .dots{inset:0}
  /* text sheen repaints every frame (not compositor-friendly): two passes, then rests */
  .shine{animation-iteration-count:2}
  .new i{animation-iteration-count:5}
  .guide{transition:none}
}

/* reel views pill (Instagram plays, baked at build from reel_views.json) */
.meta .rviews .rp{fill:currentColor;stroke:none;width:13px;height:13px}