/* ===========================================================================
   BarberOne — Cinematic Funnel
   Apple-pro aesthetic. Black stage, rationed gold, native system type.
   The DOM funnel floats as a focused column inside the Three.js lit stage.
   =========================================================================== */
:root{
  --bg:#000; --bg2:#070708; --card:#0c0c0c; --card2:#101012; --fill:#1c1c1e;
  --text:#fff; --sec:#8e8e93; --sec2:#636366;
  --border:rgba(255,255,255,.08); --border2:rgba(255,255,255,.14);
  --gold:#d4af37; --gold-soft:rgba(212,175,55,.14);
  --green:#34c759; --blue:#0a84ff; --red:#ff453a;
  --glass:rgba(10,10,11,.55);
  --f:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.32,.72,0,1);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  background:radial-gradient(70% 55% at 70% 38%,#0d0c0a 0%,#040404 55%,#000 100%);
  color:var(--text);font-family:var(--f);-webkit-font-smoothing:antialiased;overflow:hidden;
}

/* ---- cinematic canvas (the film) ---- */
#bg{position:fixed;inset:0;z-index:0;display:block;}
.veil{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 42%,transparent 0%,rgba(0,0,0,.25) 70%,rgba(0,0,0,.7) 100%);}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");}

/* ---- top chrome: web nav vs demo POV strip ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  padding:20px 26px;max-width:1280px;margin:0 auto;transition:opacity .4s ease;}
.nav.hide{opacity:0;pointer-events:none;}
.nav .links{display:flex;align-items:center;gap:24px;font-size:14px;color:var(--sec);}
.nav .links a{color:var(--sec);text-decoration:none;transition:color .15s;}
.nav .links a:hover{color:#fff;}
.pricechip{border:1px solid rgba(212,175,55,.4);color:var(--gold);border-radius:100px;padding:7px 15px;font-size:13px;font-weight:600;}

.pov{position:fixed;top:0;left:0;right:0;height:36px;z-index:50;display:none;align-items:center;justify-content:space-between;
  padding:0 16px;background:rgba(8,8,8,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.05);font-size:11.5px;}
body.demo .pov{display:flex;} body.demo .nav{display:none;}
.pov .who{font-weight:600;letter-spacing:.02em;}
.pov .who.cust{color:var(--sec);} .pov .who.barb{color:var(--gold);} .pov .who.own{color:#fff;}
.pov .ctx{color:var(--sec2);}
.pov .rs{background:none;border:0;color:var(--sec2);font-size:12px;cursor:pointer;font-family:var(--f);padding:6px;}

/* progress ticks */
.prog{position:fixed;bottom:18px;left:0;right:0;z-index:40;display:flex;gap:6px;justify-content:center;pointer-events:none;}
.prog i{width:18px;height:3px;border-radius:3px;background:rgba(255,255,255,.14);transition:.3s var(--ease);}
.prog i.on{background:var(--gold);width:26px;}
.prog i.done{background:rgba(255,255,255,.4);}

/* ---- wordmark ---- */
.wordmark{font-size:20px;letter-spacing:-.01em;color:#fff;} .wordmark b{font-weight:800;}
.wordmark i{font-style:italic;font-weight:600;} .wordmark .arr{font-weight:700;margin-left:1px;color:var(--gold);}

/* ===========================================================================
   STAGE + SCREEN ENGINE
   =========================================================================== */
.stage{position:relative;z-index:2;width:100%;height:100vh;height:100dvh;overflow:hidden;}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  will-change:transform,opacity;padding:54px 0 46px;}
.screen.scroll{justify-content:flex-start;overflow-y:auto;}
.screen.scroll::-webkit-scrollbar{width:0;}

/* transitions */
.enter-push{animation:enterPush .42s var(--ease) both;z-index:2;}
.exit-push{animation:exitPush .42s var(--ease) both;z-index:1;}
@keyframes enterPush{from{transform:translateX(40px);opacity:0;}to{transform:none;opacity:1;}}
@keyframes exitPush{from{transform:none;opacity:1;}to{transform:translateX(-30px);opacity:0;}}
.enter-fade{animation:enterFade .5s ease both;z-index:2;}
.exit-fade{animation:exitFade .42s ease both;z-index:1;}
@keyframes enterFade{from{opacity:0;transform:scale(1.015);}to{opacity:1;transform:none;}}
@keyframes exitFade{from{opacity:1;}to{opacity:0;}}
.enter-rise{animation:enterRise .55s var(--ease) both;z-index:2;}
@keyframes enterRise{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:none;}}

/* the focused interaction column floating in the lit stage */
.col{width:100%;max-width:440px;margin:0 auto;padding:0 26px;display:flex;flex-direction:column;}
.col.wide{max-width:680px;}
.screen.scroll .col{margin:auto;padding-top:18px;padding-bottom:18px;}

/* shared bits */
.eyebrow{font-size:13px;letter-spacing:.08em;color:var(--sec);text-transform:none;margin-bottom:16px;text-align:center;}
.cap{font-size:13px;color:var(--sec);line-height:1.55;text-align:center;margin:16px 6px 0;}
.foot{text-align:center;font-size:9.5px;letter-spacing:.16em;color:var(--sec2);text-transform:uppercase;padding-top:20px;}
.btn{width:100%;padding:17px;border:0;border-radius:14px;font-family:var(--f);font-size:16px;font-weight:600;cursor:pointer;
  transition:transform .12s var(--ease),opacity .15s,box-shadow .25s;}
.btn:active{transform:scale(.98);}
.btn.gold{background:var(--gold);color:#0a0a0a;box-shadow:0 10px 36px rgba(212,175,55,.22);}
.btn.gold:hover{box-shadow:0 12px 46px rgba(212,175,55,.34);}
.btn.white{background:#fff;color:#000;}
.btn.ghost{background:rgba(255,255,255,.06);color:#fff;border:1px solid var(--border2);backdrop-filter:blur(8px);}
.btn:disabled{opacity:.4;cursor:default;}
.glass{background:var(--glass);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid var(--border);border-radius:22px;}

/* ===========================================================================
   CH0 — HERO / FIND YOUR SHOP
   =========================================================================== */
.hero h1{font-size:clamp(40px,7vw,72px);font-weight:800;letter-spacing:-.03em;line-height:1.03;text-align:center;}
.hero h1 .gold{color:var(--gold);}
.hero .sub{font-size:clamp(15px,2.1vw,18px);color:#c9c9c9;line-height:1.55;text-align:center;margin:22px auto 30px;max-width:520px;}
.hero .sub b{color:#fff;font-weight:600;}
.seek{position:relative;max-width:520px;margin:0 auto;width:100%;}
.seeklab{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sec);margin-bottom:10px;text-align:center;}
.ibox{position:relative;}
.ibox svg.mag{position:absolute;left:18px;top:50%;transform:translateY(-50%);}
.ibox input{width:100%;background:rgba(10,10,11,.7);border:1px solid #242426;border-radius:16px;padding:19px 18px 19px 50px;
  color:#fff;font-size:17px;font-family:var(--f);backdrop-filter:blur(10px);transition:border-color .18s,box-shadow .18s;}
.ibox input::placeholder{color:#5a5a5e;}
.ibox input:focus{outline:none;border-color:rgba(212,175,55,.6);box-shadow:0 0 0 4px rgba(212,175,55,.10);}
.drop{display:none;position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:20;background:#101012;
  border:1px solid #242426;border-radius:16px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.7);}
.drop.show{display:block;animation:enterRise .22s var(--ease);}
.sugg{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:15px 18px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.05);}
.sugg:last-child{border-bottom:0;} .sugg:hover{background:rgba(255,255,255,.04);}
.sugg .sn{font-size:16px;font-weight:600;} .sugg .sm{font-size:12.5px;color:var(--sec);margin-top:2px;}
.sugg .sr{font-size:13.5px;color:var(--gold);white-space:nowrap;} .sugg .sr span{color:var(--sec);}
.nomatch{padding:16px 18px;font-size:14px;color:var(--sec);}
.gpow{font-size:10px;color:#48484a;text-align:right;padding:9px 14px;}
.picked{display:none;background:rgba(10,10,11,.7);border:1px solid rgba(212,175,55,.4);border-radius:16px;padding:18px;backdrop-filter:blur(10px);}
.picked.show{display:block;animation:enterRise .26s var(--ease);}
.pickrow{display:flex;justify-content:space-between;align-items:center;gap:12px;}
.pickrow .sn{font-size:17px;font-weight:700;} .pickrow .sm{font-size:13px;color:var(--sec);margin-top:2px;}
.unpick{background:none;border:0;color:var(--sec2);font-size:13px;cursor:pointer;font-family:var(--f);white-space:nowrap;}
.trineg{display:flex;gap:22px;margin-top:18px;font-size:13.5px;color:var(--sec);justify-content:center;flex-wrap:wrap;}
.trineg span{display:flex;align-items:center;gap:7px;} .trineg em{font-style:normal;color:var(--gold);font-size:12px;}
.statline{display:flex;gap:34px;justify-content:center;margin-top:40px;flex-wrap:wrap;}
.statline .s b{display:block;font-size:30px;font-weight:800;letter-spacing:-.02em;text-align:center;}
.statline .s b.gold{color:var(--gold);}
.statline .s span{font-size:12px;color:var(--sec);display:block;margin-top:3px;text-align:center;max-width:150px;}

/* ===========================================================================
   CH1 — SITUATIONAL VIEWS
   =========================================================================== */
.shopline{padding-bottom:14px;border-bottom:1px solid var(--border);margin-bottom:18px;}
.shopname{font-size:24px;font-weight:700;letter-spacing:-.01em;}
.shopmeta{font-size:13.5px;color:var(--sec);margin-top:4px;} .shopmeta .gld{color:var(--gold);}
.bigstat{font-size:60px;font-weight:800;letter-spacing:-.03em;line-height:1;}
.bigstat small{font-size:22px;font-weight:600;color:var(--sec);}
.svline{font-size:15px;color:#d6d6d6;line-height:1.55;margin:13px 0;}
.svline b{color:#fff;font-weight:600;} .svline.dim{color:var(--sec);} .svline.ctr{text-align:center;}
.tl{display:flex;gap:4px;margin-top:18px;}
.tl i{flex:1;height:34px;border-radius:5px;background:#141416;}
.tl i.r{background:var(--gold);}
.tllab{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.1em;color:var(--sec2);margin:6px 0 4px;text-transform:uppercase;}
.vrow{margin:13px 0;}
.vlabel{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--sec);}
.vlabel.solo{margin-top:18px;} .vlabel span:last-child{color:#fff;font-weight:700;}
.vtrack{height:28px;background:#141416;border-radius:7px;margin-top:6px;overflow:hidden;}
.vfill{height:100%;border-radius:7px;background:#3a3a3c;transition:width 1s var(--ease);}
.vfill.lite{background:#8e8e93;} .vfill.gold{background:var(--gold);}
.driftrow{display:flex;align-items:center;gap:16px;margin:6px 0 4px;}
.driftrow .now{font-size:52px;font-weight:800;letter-spacing:-.03em;}
.driftrow .darr{font-size:26px;color:var(--sec2);}
.driftrow .slip{font-size:52px;font-weight:800;letter-spacing:-.03em;color:var(--red);}
.twocol{display:flex;gap:12px;margin:18px 0;}
.tcard{flex:1;background:#0e0e0e;border:1px solid var(--border);border-radius:14px;padding:16px 12px;text-align:center;}
.tcard .lab{display:block;font-size:9.5px;letter-spacing:.14em;color:var(--sec);}
.tcard b{display:block;font-size:25px;font-weight:800;margin:7px 0 3px;}
.tcard .tsub{font-size:12px;color:var(--sec);}
.tcard.gold{border-color:rgba(212,175,55,.45);} .tcard.gold b{color:var(--gold);}
.bigneg{font-size:18px;font-weight:600;line-height:1.8;margin:18px 0;}
.receipt{background:var(--gold-soft);border:1px solid rgba(212,175,55,.3);border-radius:13px;padding:14px 15px;font-size:13.5px;line-height:1.5;margin:18px 0;}
.receipt span{color:var(--sec);}

/* ===========================================================================
   CH2 — BRIDGE / CH4 REPORT / CH5 CLOSE / CH6 ABOARD
   =========================================================================== */
.countercard{width:160px;height:100px;border-radius:14px;background:linear-gradient(135deg,#2b2b2b,#111);border:1px solid #333;
  margin:0 auto 26px;display:flex;align-items:center;justify-content:center;box-shadow:0 24px 60px rgba(0,0,0,.6);}
.bridge h1,.close h1,.aboard h1{font-size:27px;font-weight:700;letter-spacing:-.02em;line-height:1.15;text-align:center;}
.bridge .sub,.close .sub{font-size:15px;color:var(--sec);margin-top:10px;text-align:center;}
.rpt{background:#0c0c0c;border:1px solid #232323;border-radius:16px;padding:20px 18px;box-shadow:0 24px 60px rgba(0,0,0,.55);}
.rhead{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--border);}
.rlogo{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#2b2b2b,#161616);border:1px solid #2a2a2a;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--gold);}
.rhn b{display:block;font-size:15px;font-weight:700;} .rhn span{font-size:10px;letter-spacing:.14em;color:var(--sec);}
.rhero{text-align:center;padding:20px 0 16px;border-bottom:1px solid var(--border);}
.rhero .rlab{display:block;font-size:10px;letter-spacing:.16em;color:var(--sec);}
.rhero b{display:block;font-size:46px;font-weight:800;letter-spacing:-.02em;margin:4px 0 2px;}
.rhero .rsub{font-size:12.5px;color:var(--sec);}
.rsec{font-size:10px;letter-spacing:.16em;color:var(--sec2);margin:15px 0 3px;}
.rrow{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:13.5px;color:#d0d0d0;}
.rrow b{font-weight:700;} .rrow.gold b{color:var(--gold);}
.rquote{margin-top:14px;font-size:13px;color:#d0d0d0;line-height:1.5;font-style:italic;}
.rquote .rq5{display:block;color:var(--gold);font-style:normal;letter-spacing:3px;margin-bottom:4px;}
.pricecard{text-align:center;margin:22px 0 4px;}
.pricecard b{font-size:56px;font-weight:800;letter-spacing:-.03em;}
.pricecard span{display:block;font-size:13px;color:var(--sec);margin-top:4px;}
.applepay{width:100%;padding:16px;border:0;border-radius:14px;background:#fff;color:#000;font-size:17px;font-weight:600;font-family:var(--f);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;margin-top:10px;}
.applepay:active{transform:scale(.98);}
.guarantee{display:flex;align-items:center;gap:10px;justify-content:center;margin:16px 0 4px;font-size:13.5px;color:var(--sec);}
.guarantee em{font-style:normal;color:var(--gold);}
.paysheet{position:absolute;left:0;right:0;bottom:0;background:#1c1c1e;border-radius:18px 18px 0 0;padding:14px 20px 34px;z-index:60;
  box-shadow:0 -16px 50px rgba(0,0,0,.6);animation:sheetup .42s var(--ease);max-width:460px;margin:0 auto;}
@keyframes sheetup{from{transform:translateY(100%);}to{transform:none;}}
.psbar{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--border);font-size:17px;font-weight:700;}
.psbar .psx{color:var(--sec);cursor:pointer;font-size:15px;background:#2c2c2e;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;}
.psrow{display:flex;justify-content:space-between;padding:13px 0;font-size:14.5px;border-bottom:1px solid rgba(255,255,255,.05);}
.psrow b{font-weight:600;} .psrow.dim span,.psrow.dim b{color:var(--sec);font-weight:400;}
.check{width:66px;height:66px;border-radius:50%;background:rgba(52,199,89,.16);border:1px solid rgba(52,199,89,.5);
  color:var(--green);display:flex;align-items:center;justify-content:center;font-size:30px;margin:6px auto 18px;}
.check.pop{animation:checkpop .55s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes checkpop{0%{transform:scale(0);opacity:0;}60%{transform:scale(1.18);opacity:1;}100%{transform:scale(1);}}

/* ===========================================================================
   LOYALTY LOOP (ch3) — pass, wallet, camera, pin, panel, confirm, notif, google
   (adapted from the signed-off loop mock)
   =========================================================================== */
.sx{display:flex;flex-direction:column;justify-content:center;text-align:center;}
.sx.top{justify-content:flex-start;text-align:left;}
.sx h1{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.15;}
.sx .sub{font-size:15px;color:var(--sec);margin-top:10px;line-height:1.45;}
.shoplogo{width:60px;height:60px;border-radius:15px;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#2b2b2b,#161616);border:1px solid #2a2a2a;font-size:13px;font-weight:800;color:var(--gold);letter-spacing:.04em;}
.perks{display:flex;flex-direction:column;gap:13px;margin:28px 0 32px;}
.perk{display:flex;align-items:center;gap:13px;font-size:15.5px;color:#e6e6e6;}
.perk em{color:var(--gold);font-style:normal;font-size:13px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--gold-soft);}
.field{text-align:left;margin-bottom:18px;}
.field label{display:block;font-size:13px;color:var(--sec);margin-bottom:9px;font-weight:500;}
.field label .o{color:var(--sec2);font-weight:400;font-size:12px;}
.iwrap{position:relative;}
.field input{width:100%;background:#0c0c0c;border:1px solid #1f1f1f;border-radius:14px;padding:16px;color:#fff;font-size:16px;font-family:var(--f);transition:border-color .15s;}
.field input::placeholder{color:#3a3a3c;} .field input:focus{outline:none;border-color:#3a3a3c;} .field input.ok{border-color:rgba(52,199,89,.4);}
.vchk{position:absolute;right:15px;top:50%;transform:translateY(-50%) scale(.6);opacity:0;transition:.18s;width:20px;height:20px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;}
.vchk svg{width:11px;height:11px;} .vchk.show{opacity:1;transform:translateY(-50%) scale(1);}
.hint{font-size:11.5px;color:var(--sec2);margin-top:8px;line-height:1.4;}
.err{color:var(--red);font-size:13px;margin-bottom:12px;display:none;}
.dots{display:flex;gap:7px;justify-content:center;margin-bottom:26px;}
.dots i{width:6px;height:6px;border-radius:50%;background:#2c2c2e;transition:.2s;}
.dots i.on{background:#fff;width:18px;border-radius:3px;} .dots i.done{background:var(--sec);}
.nfc{position:relative;width:140px;height:140px;margin:0 auto 30px;display:flex;align-items:center;justify-content:center;}
.nfc .ring{position:absolute;border:1.5px solid rgba(255,255,255,.18);border-radius:50%;width:100%;height:100%;animation:pr 2s ease-out infinite;}
.nfc .ring:nth-child(2){animation-delay:.66s;} .nfc .ring:nth-child(3){animation-delay:1.33s;}
@keyframes pr{0%{transform:scale(.4);opacity:.7;}100%{transform:scale(1.05);opacity:0;}}
.nfc .crd{width:62px;height:42px;border-radius:9px;background:linear-gradient(135deg,#2b2b2b,#111);border:1px solid #333;display:flex;align-items:center;justify-content:center;z-index:1;}
.nfc .crd b{width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px rgba(212,175,55,.6);}
.lbl{font-size:13px;color:var(--sec);letter-spacing:.04em;margin-top:14px;text-align:center;}
.overlay{position:absolute;inset:0;background:rgba(0,0,0,.92);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:30;animation:enterFade .2s;}
.orbit{width:48px;height:48px;position:relative;}
.orbit i{position:absolute;inset:0;border:2px solid transparent;border-top-color:rgba(255,255,255,.85);border-radius:50%;animation:sp .9s linear infinite;}
.orbit i:nth-child(2){inset:7px;border-top-color:rgba(255,255,255,.4);animation-duration:1.3s;}
.overlay p{margin-top:18px;font-size:14.5px;color:var(--sec);}
.ready{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.readyicon{width:78px;height:78px;border-radius:20px;background:linear-gradient(135deg,#2b2b2b,#161616);border:1px solid #2a2a2a;position:relative;margin-bottom:26px;display:flex;align-items:center;justify-content:center;}
.readyicon .mini{width:40px;height:26px;border-radius:5px;background:#0c0c0c;border:1px solid #333;}
.readyicon .badge{position:absolute;right:-6px;bottom:-6px;width:28px;height:28px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;}
.readyicon .badge svg{width:14px;height:14px;}
.redirect{display:flex;align-items:center;gap:11px;margin-top:24px;color:var(--sec);font-size:14px;}
.redirect .orbit{width:20px;height:20px;}
.pass{background:#0c0c0c;border:1px solid #232323;border-radius:14px;overflow:hidden;box-shadow:0 24px 50px rgba(0,0,0,.65);}
.pass-top{display:flex;align-items:flex-start;justify-content:space-between;padding:15px 16px 12px;}
.pass-top .tier{text-align:right;} .pass-top .tier span{display:block;font-size:9px;letter-spacing:.14em;color:#9a9a9a;} .pass-top .tier b{font-size:14px;font-weight:600;}
.strip{height:150px;position:relative;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#2a2622 0%,#0e0d0c 55%,#1a1714 100%);}
.strip::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 70% 20%,rgba(255,255,255,.08),transparent 60%);}
.strip span{font-size:30px;letter-spacing:.5em;font-weight:300;color:rgba(255,255,255,.92);text-indent:.5em;z-index:1;}
.pass-fields{display:flex;justify-content:space-between;padding:14px 16px 4px;}
.pass-fields span{display:block;font-size:9px;letter-spacing:.14em;color:#9a9a9a;} .pass-fields b{font-size:17px;font-weight:600;} .pass-fields .r{text-align:right;}
.pass-qr{padding:14px 16px 18px;display:flex;flex-direction:column;align-items:center;}
.qrbox{background:#fff;border-radius:10px;padding:11px;}
.pid{font-size:11px;color:#7a7a7a;margin-top:9px;letter-spacing:.02em;}
.stamp-num.pulse{animation:np .6s ease;}
@keyframes np{0%{color:var(--green);transform:scale(1.3);}100%{color:#fff;transform:none;}}
.qrbox.glow{position:relative;}
.qrbox.glow::after{content:"";position:absolute;inset:-9px;border:2px solid var(--gold);border-radius:16px;pointer-events:none;animation:breathe 1.8s ease-in-out infinite;}
@keyframes breathe{0%,100%{opacity:.4;transform:scale(.99);box-shadow:0 0 10px 1px rgba(212,175,55,.18);}50%{opacity:1;transform:scale(1.05);box-shadow:0 0 22px 6px rgba(212,175,55,.45);}}
.addsheet{position:absolute;left:0;right:0;bottom:0;top:48px;max-width:460px;margin:0 auto;background:#161618;border-radius:22px 22px 0 0;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 -20px 60px rgba(0,0,0,.6);animation:sheetup .46s var(--ease);}
.grabber{width:38px;height:5px;border-radius:3px;background:#48484a;margin:9px auto 0;}
.sheetbar{display:flex;align-items:center;justify-content:space-between;padding:14px 20px 12px;border-bottom:1px solid var(--border);}
.sheetbar .cancel{color:var(--blue);font-size:17px;cursor:pointer;} .sheetbar .stitle{font-size:16px;font-weight:600;} .sheetbar .addbtn{color:var(--blue);font-size:17px;font-weight:700;cursor:pointer;}
.sheetbody{flex:1;overflow-y:auto;padding:30px 22px;display:flex;flex-direction:column;justify-content:center;}
.camera{position:absolute;inset:0;background:#000;display:flex;flex-direction:column;overflow:hidden;max-width:460px;margin:0 auto;}
.cam-top{padding:46px 20px 0;display:flex;justify-content:center;}
.cam-pill{font-size:11px;letter-spacing:.16em;color:#fff;background:rgba(255,255,255,.14);border-radius:100px;padding:5px 14px;text-transform:uppercase;}
.cam-view{flex:1;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(120% 80% at 50% 38%,#26262a,#0c0c0d 78%);}
.cam-scene{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;}
.cam-phone{background:#0c0c0c;border:1px solid #2a2a2a;border-radius:18px;padding:16px;transform:rotate(-3deg);box-shadow:0 24px 60px rgba(0,0,0,.7);}
.qrdetect{position:relative;display:inline-block;}
.cnr{position:absolute;width:18px;height:18px;border:0 solid #ffd60a;z-index:2;}
.cnr.tl{top:-9px;left:-9px;border-top-width:3px;border-left-width:3px;border-top-left-radius:6px;}
.cnr.tr{top:-9px;right:-9px;border-top-width:3px;border-right-width:3px;border-top-right-radius:6px;}
.cnr.bl{bottom:-9px;left:-9px;border-bottom-width:3px;border-left-width:3px;border-bottom-left-radius:6px;}
.cnr.br{bottom:-9px;right:-9px;border-bottom-width:3px;border-right-width:3px;border-bottom-right-radius:6px;}
.qrdetect::after{content:"";position:absolute;inset:-7px;border-radius:12px;box-shadow:0 0 0 2px rgba(255,214,10,.9);animation:detectpulse 1.3s ease-in-out infinite;}
@keyframes detectpulse{0%,100%{box-shadow:0 0 0 2px rgba(255,214,10,.85),0 0 12px 2px rgba(255,214,10,.25);}50%{box-shadow:0 0 0 2.5px rgba(255,214,10,1),0 0 22px 6px rgba(255,214,10,.5);}}
.link-chip{display:flex;align-items:center;gap:8px;background:#ffd60a;color:#0a0a0a;font-size:14px;font-weight:600;border-radius:100px;padding:9px 15px;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.4);}
.link-chip .lb{font-size:11px;font-weight:800;background:#0a0a0a;color:#ffd60a;border-radius:5px;padding:2px 5px;} .link-chip .lb .o{font-style:italic;}
.cam-bottom{padding:18px 0 30px;display:flex;flex-direction:column;align-items:center;gap:14px;background:#000;}
.scan-callout{color:#ffd60a;font-size:15px;font-weight:600;}
.shutter{width:66px;height:66px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 0 0 4px #000,0 0 0 6px rgba(255,255,255,.85);transition:transform .1s;}
.shutter:active{transform:scale(.92);}
.cam-modes{display:flex;gap:20px;font-size:11px;letter-spacing:.12em;color:var(--sec2);} .cam-modes .on{color:#ffd60a;}
.accesscard{margin:auto 0;background:#0e0e0e;border:1px solid var(--border);border-radius:24px;padding:34px 26px 24px;text-align:center;}
.lock{width:30px;height:30px;margin:0 auto 18px;display:block;}
.accesscard h1{font-size:27px;font-weight:700;} .accesscard p{font-size:15px;color:var(--sec);margin-top:6px;}
.pinbox{margin:26px 0 16px;width:100%;background:#000;border:1px solid #1f1f1f;border-radius:14px;padding:18px;text-align:center;color:#fff;font-size:26px;letter-spacing:18px;text-indent:18px;font-family:var(--f);}
.pinbox:focus{outline:none;border-color:#2a2a2a;} .pinbox::placeholder{color:#3a3a3c;letter-spacing:14px;}
.access-foot{font-size:9.5px;letter-spacing:.18em;color:var(--sec2);text-transform:uppercase;margin-top:20px;}
.pinhint{font-size:10px;color:#48484a;margin-top:12px;}
.shake{animation:shk .35s;} @keyframes shk{0%,100%{transform:none;}25%{transform:translateX(-7px);}75%{transform:translateX(7px);}}
.ph{display:flex;align-items:center;gap:12px;padding-bottom:15px;border-bottom:1px solid var(--border);}
.ph .avatar{width:44px;height:44px;border-radius:11px;background:linear-gradient(135deg,#2b2b2b,#161616);border:1px solid #2a2a2a;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--gold);}
.ph .nm{font-size:17px;font-weight:600;} .ph .nm small{display:block;color:var(--sec);font-weight:400;font-size:13.5px;}
.custname{font-size:29px;font-weight:700;margin:18px 0 11px;}
.tierpill{display:inline-block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sec);border:1px solid #3a3a3c;border-radius:100px;padding:6px 13px;}
.meta{font-size:15px;color:var(--sec);margin-top:16px;line-height:1.8;}
.ins{font-size:14.5px;color:var(--sec);margin:18px 0 14px;line-height:1.5;}
.opt{width:100%;border:1px solid #2c2c2e;background:transparent;border-radius:14px;padding:18px;margin-bottom:11px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;color:#fff;font-family:var(--f);font-size:16px;transition:.15s;}
.opt.stamp{justify-content:center;font-weight:600;}
.opt .sel{font-size:12px;letter-spacing:.08em;color:var(--sec);text-transform:uppercase;}
.opt.on{border-color:rgba(52,199,89,.55);background:rgba(52,199,89,.10);color:var(--green);} .opt.on .sel{color:var(--green);}
.rlabel{font-size:13px;color:var(--sec);margin:4px 0 11px;}
.submit{width:100%;padding:18px;border:0;border-radius:14px;font-family:var(--f);font-size:16px;font-weight:600;cursor:pointer;margin-top:4px;}
.submit.off{background:var(--fill);color:#6a6a6e;cursor:default;} .submit.on{background:#fff;color:#000;}
.submit.proc{background:var(--fill);color:var(--sec);display:flex;align-items:center;justify-content:center;gap:10px;cursor:default;}
.spin{width:16px;height:16px;border:2px solid #48484a;border-top-color:#8e8e93;border-radius:50%;animation:sp .7s linear infinite;}
.spin.dark{border-color:rgba(0,0,0,.22);border-top-color:#000;}
@keyframes sp{to{transform:rotate(360deg);}}
.panelfoot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border);margin-top:18px;padding-top:13px;}
.pro{font-size:13px;color:#6a6a6e;} .pro b{font-weight:700;color:#8a8a8e;} .pro i{font-style:italic;} .pro .psuf{color:var(--gold);font-style:italic;}
.pby{font-size:9.5px;letter-spacing:.13em;color:var(--sec2);text-transform:uppercase;}
.confirm{text-align:center;} .confirm h1{font-size:26px;font-weight:700;} .confirm .sub{font-size:14.5px;color:var(--sec);margin-top:9px;} .confirm .sub b{color:#fff;font-weight:600;}
.statrow{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border);padding:18px 2px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--sec);}
.statrow b{font-size:26px;font-weight:700;color:#fff;letter-spacing:0;}
.notif{background:rgba(30,30,32,.86);backdrop-filter:blur(20px);border:.5px solid rgba(255,255,255,.12);border-radius:18px;padding:13px 14px;display:flex;gap:11px;align-items:flex-start;cursor:pointer;margin-bottom:16px;box-shadow:0 10px 30px rgba(0,0,0,.5);animation:drop .4s ease;}
@keyframes drop{from{transform:translateY(-16px);opacity:0;}to{transform:none;opacity:1;}}
.notif .ic{flex:0 0 34px;height:34px;border-radius:9px;background:#111;border:1px solid #2a2a2a;display:flex;align-items:center;justify-content:center;}
.notif .ic span{font-size:11px;font-weight:800;} .notif .ic .o{font-style:italic;}
.notif .bd{font-size:13px;line-height:1.36;flex:1;} .notif .bd .hd{display:flex;justify-content:space-between;}
.notif .bd b{font-weight:600;font-size:13px;} .notif .bd .tm{color:var(--sec);font-size:11px;} .notif .bd .tx{color:#d7d7d7;margin-top:1px;}
.notif.attn{animation:notifattn .65s ease;}
@keyframes notifattn{0%{transform:none;border-color:rgba(255,255,255,.12);}20%{transform:translateX(-5px);box-shadow:0 0 0 3px rgba(212,175,55,.4);border-color:rgba(212,175,55,.75);}50%{transform:translateX(5px);}75%{transform:translateX(-3px);}100%{transform:none;}}
.laterline{width:1px;height:48px;margin:0 auto 22px;background:linear-gradient(#48484a,transparent);}
.latermark{font-size:30px;font-weight:700;letter-spacing:-.02em;text-align:center;}
/* removed dead .g rule (loop) */
.gtop{display:flex;align-items:center;gap:11px;padding:58px 20px 6px;} .gtop .nm{font-size:18px;font-weight:500;}
.gsub{font-size:13px;color:#5f6368;padding:0 20px;}
.gcard{margin:20px;border:1px solid #dadce0;border-radius:14px;padding:22px;text-align:center;}
.gcard .av{width:48px;height:48px;border-radius:50%;background:#1a73e8;color:#fff;display:flex;align-items:center;justify-content:center;font-size:21px;margin:0 auto 14px;}
.gcard .q{font-size:15px;font-weight:500;margin-bottom:16px;color:#3c4043;}
.gstars{display:flex;gap:12px;justify-content:center;} .gstars span{font-size:36px;color:#dadce0;cursor:pointer;line-height:1;} .gstars span.on{color:#fbbc04;}
.gpost{margin:0 20px;background:#1a73e8;color:#fff;border:0;border-radius:24px;padding:13px;width:calc(100% - 40px);font-size:15px;font-weight:500;cursor:pointer;font-family:inherit;}
.gpost:disabled{background:#c6dafc;cursor:default;}
.gfoot{margin-top:auto;text-align:center;font-size:11px;color:#9aa0a6;padding:16px;letter-spacing:.04em;}

/* reduced motion / no-webgl: still gorgeous, just still */
body.nowebgl #bg{display:none;}
@media (prefers-reduced-motion: reduce){
  .nfc .ring,.qrbox.glow::after,.qrdetect::after{animation:none;}
}
@media (max-width:860px){
  .hero h1{font-size:clamp(30px,5vw,46px);}
  .hero .sub{font-size:15px;margin:18px auto 24px;}
  .statline{gap:20px 28px;margin-top:30px;}
  .statline .s b{font-size:26px;}
}
@media (max-width:480px){
  .screen{padding:40px 0 38px;}
  .hero h1{font-size:clamp(26px,7vw,34px);letter-spacing:-.02em;}
  .hero .sub{font-size:14px;line-height:1.5;margin:14px auto 18px;max-width:340px;}
  .eyebrow{font-size:12px;margin-bottom:12px;}
  .seeklab{margin-bottom:8px;}
  .ibox input{padding:16px 16px 16px 46px;font-size:16px;border-radius:14px;}
  .ibox svg.mag{left:16px;}
  .trineg{gap:12px 16px;font-size:12px;margin-top:14px;}
  .statline{gap:14px 22px;margin-top:22px;}
  .statline .s b{font-size:23px;}
  .statline .s span{font-size:11px;max-width:128px;}
}

/* ===========================================================================
   v2 — self-diagnosis website chapters
   =========================================================================== */
.sub{font-size:15px;color:var(--sec);line-height:1.5;}
.sub.ctr{text-align:center;}
.eyebrow.ctr{text-align:center;}
.ttl{font-size:clamp(26px,4.4vw,38px);font-weight:800;letter-spacing:-.02em;line-height:1.08;text-align:center;margin:6px 0 4px;}
.pinhint{font-size:11px;color:#48484a;margin-top:12px;}
.pinhint.ctr{text-align:center;}
.linkbtn{display:block;width:100%;background:none;border:0;color:var(--sec);font-family:var(--f);font-size:13.5px;margin-top:14px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.linkbtn:hover{color:#fff;}
.btn.gold.off{opacity:.4;box-shadow:none;cursor:default;}
.stars{color:var(--gold);letter-spacing:2px;font-size:16px;} .stars .dim{color:#3a3a3c;}

/* profile card (ch1) */
.gprofile{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:20px;box-shadow:0 24px 60px rgba(0,0,0,.5);}
.gp-top{display:flex;align-items:center;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--border);}
.gp-logo{width:52px;height:52px;border-radius:13px;background:linear-gradient(135deg,#2b2b2b,#161616);border:1px solid #2a2a2a;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:var(--gold);letter-spacing:.04em;}
.gp-name{font-size:20px;font-weight:700;letter-spacing:-.01em;} .gp-area{font-size:13px;color:var(--sec);margin-top:3px;}
.gp-rating{display:flex;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid var(--border);}
.gp-rating b{font-size:40px;font-weight:800;letter-spacing:-.02em;line-height:1;} .gp-count{font-size:13px;color:var(--sec);margin-left:auto;}
.gp-rows{padding-top:6px;}
.gp-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:14px;color:#cfcfcf;}
.gp-row:last-child{border-bottom:0;} .gp-row b{font-weight:700;color:#fff;}

/* compare rivals (ch2) */
.rivals{display:flex;flex-direction:column;gap:10px;margin:10px 0 18px;}
.rival{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:15px 16px;cursor:pointer;transition:border-color .15s,background .15s;}
.rival:hover{border-color:var(--border2);}
.rival.on{border-color:rgba(212,175,55,.55);background:rgba(212,175,55,.08);}
.rival .rk{flex:0 0 22px;height:22px;border-radius:50%;border:1.6px solid #3a3a3c;transition:.15s;position:relative;}
.rival.on .rk{border-color:var(--gold);background:var(--gold);}
.rival.on .rk::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#0a0a0a;font-size:12px;font-weight:800;}
.rinfo{flex:1;} .rn{font-size:15.5px;font-weight:600;} .rm{font-size:12.5px;color:var(--sec);margin-top:2px;}
.rr{font-size:13.5px;color:var(--gold);white-space:nowrap;} .rr span{color:var(--sec);margin-left:3px;}

/* cost (ch4) */
.costnum{font-size:clamp(56px,12vw,88px);font-weight:800;letter-spacing:-.04em;line-height:1;text-align:center;color:var(--red);}
.costnum small{font-size:24px;font-weight:600;color:var(--sec);letter-spacing:0;margin-left:6px;}

/* ===========================================================================
   Dive FX — planet to town (radial/zoom blur, not full motion blur)
   =========================================================================== */
#bg{transition:filter .5s ease, transform .5s ease;}
body.diving #bg{filter:blur(7px) brightness(1.12) saturate(1.08);transform:scale(1.12);}
.divefx{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .25s ease;
  background:repeating-conic-gradient(from 0deg at 50% 50%, rgba(212,175,55,0) 0deg, rgba(212,175,55,.20) 1deg, rgba(255,232,170,.28) 1.4deg, rgba(212,175,55,0) 2.6deg);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, transparent 6%, #000 58%);
          mask-image:radial-gradient(circle at 50% 50%, transparent 6%, #000 58%);}
.divefx.on{opacity:1;animation:warp 1.0s ease;}
@keyframes warp{0%{transform:scale(.55) rotate(0deg);opacity:0;}35%{opacity:1;}100%{transform:scale(1.9) rotate(6deg);opacity:0;}}
@media (prefers-reduced-motion: reduce){ body.diving #bg{filter:none;transform:none;} .divefx{display:none;} }

/* ===========================================================================
   v4 — real globe -> MapLibre town transition + Google-style pins
   =========================================================================== */
#map{position:fixed;inset:0;z-index:0;opacity:0;transform:scale(.96);
  transition:opacity .7s ease, transform 1.3s cubic-bezier(.32,.72,0,1);pointer-events:none;}
body.map #map{opacity:1;transform:scale(1);}
#bg{transition:opacity .6s ease, filter .6s ease;}
body.globe-out #bg{opacity:0;filter:blur(6px);}
body.map .veil{opacity:.4;}

/* fade-to-black bridge between planet and town */
.fade{position:fixed;inset:0;z-index:90;background:#000;opacity:0;pointer-events:none;transition:opacity .45s ease;}
.fade.on{opacity:1;}

/* soft scrim so white copy reads over the bright map (town scenes only) */
body.map .screen::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(62% 58% at 50% 44%, rgba(0,0,0,.62), rgba(0,0,0,.2) 68%, transparent);}

/* Google-style map pins: gold = you, grey = rivals */
.mk{will-change:transform;}
.mk svg{display:block;}
.mk .body{fill:#7c828c;} .mk .dot{fill:#0a0a0b;}
.mk-rival svg{filter:drop-shadow(0 3px 5px rgba(0,0,0,.6));transition:filter .2s ease;}
.mk-rival.sel .body{fill:#eef2f6;}
.mk-rival.sel svg{filter:drop-shadow(0 0 9px rgba(255,255,255,.45));}
.mk-you .body{fill:#d4af37;} .mk-you .dot{fill:#0a0a0b;}
.mk-you svg{filter:drop-shadow(0 0 12px rgba(212,175,55,.7)) drop-shadow(0 3px 5px rgba(0,0,0,.6));}

/* keep MapLibre attribution present but subtle */
.maplibregl-ctrl-attrib{font-size:9px !important;background:rgba(0,0,0,.4) !important;border-radius:6px 0 0 0;}
.maplibregl-ctrl-attrib a{color:#8a8a8e !important;}
.maplibregl-ctrl-bottom-right{z-index:2;}

/* v4.1 — brighter selected rival pins */
.mk-rival .body{fill:#6b7079;}
.mk-rival.sel .body{fill:#ffffff;}
.mk-rival.sel .dot{fill:#0a0a0b;}
.mk-rival.sel svg{filter:drop-shadow(0 0 13px rgba(255,255,255,.75)) drop-shadow(0 3px 5px rgba(0,0,0,.6));transform:scale(1.18);transition:transform .2s ease,filter .2s ease;}

/* ===========================================================================
   v5 — stat-bar system, 14-day heatmap, before/after comparison
   =========================================================================== */
.reveal-wrap{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s var(--ease);pointer-events:none;}
.reveal-wrap.in{opacity:1;transform:none;pointer-events:auto;}

.statgrid{margin-top:8px;}
.stat2{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;margin:13px 0 6px;}
.stat2 .lab{color:var(--sec);} .stat2 .val{font-weight:700;color:#fff;} .stat2 .val span{color:var(--sec);font-weight:400;font-size:11px;margin-left:1px;}
.statbar{position:relative;display:flex;height:10px;background:#16171b;border-radius:6px;overflow:hidden;}
.statbar .fill{height:100%;width:0;background:#5a5e66;transition:width .8s var(--ease);}
.statbar .ext{height:100%;width:0;background:var(--gold);transition:width .9s var(--ease) .5s;box-shadow:0 0 10px rgba(212,175,55,.55);}

.heatlab{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--sec2);margin:16px 0 7px;}
.heat{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;}
.heat .cell{aspect-ratio:1/1;border-radius:3px;background:#16171b;}
.heat .cell.on{background:#5a5e66;}
.heat .cell.hot{background:var(--gold);box-shadow:0 0 7px rgba(212,175,55,.55);}
.goldtx{color:var(--gold);}

.cmp2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:14px 0 8px;}
.cmpcol{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;}
.cmpcol.you{border-color:rgba(212,175,55,.45);box-shadow:0 0 28px rgba(212,175,55,.10);}
.cmphd{display:flex;flex-direction:column;gap:4px;padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid var(--border);}
.cmpname{font-size:15px;font-weight:700;}
.cmptag{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--sec);}
.cmpcol.you .cmptag{color:var(--gold);}
@media(max-width:560px){.cmp2{grid-template-columns:1fr;}}

/* v5.1 — reveal restructure, single-brightness bars, stronger map scrim */
.revhead{font-size:13.5px;color:var(--sec);padding-bottom:12px;border-bottom:1px solid var(--border);}
.revhead .gld{color:var(--gold);}
.vfill{background:#7c828c;}
.vfill.lite{background:#7c828c;}
body.map .screen::before{background:radial-gradient(80% 74% at 50% 46%, rgba(0,0,0,.76), rgba(0,0,0,.34) 76%, transparent);}

/* v5.2 — win punch line */
.punch{font-size:21px;font-weight:800;letter-spacing:-.01em;margin:20px 0 6px;color:#fff;}

/* v5.3 — Ken Burns shop interior (win + proof scenes) */
#shopbg{position:fixed;inset:0;z-index:1;opacity:0;pointer-events:none;overflow:hidden;
  background:radial-gradient(circle at 50% 30%, #16120d, #0a0a0b 70%);transition:opacity .8s ease;}
body.shop #shopbg{opacity:1;}
body.shop #map{opacity:0;} body.shop #bg{opacity:0;}
#shopbg .kb{position:absolute;inset:-9%;background-size:cover;background-position:center;
  filter:saturate(.92) brightness(.6) contrast(1.03);animation:kenburns 24s ease-in-out infinite alternate;}
@keyframes kenburns{0%{transform:scale(1.06) translate(0,0);}100%{transform:scale(1.2) translate(-2.5%,-2%);}}
#shopbg .vig{position:absolute;inset:0;background:radial-gradient(80% 72% at 50% 44%, transparent, rgba(0,0,0,.5) 66%, rgba(0,0,0,.9) 100%);}
@media (prefers-reduced-motion: reduce){ #shopbg .kb{animation:none;} }

/* v5.4 — zoom OUT from shop interior back to the map (proof -> close) */
#shopbg{transition:opacity .8s ease, transform .95s var(--ease);transform:scale(1);transform-origin:50% 45%;}
body.shop #shopbg{opacity:1;transform:scale(1);}
body.shopout #shopbg{opacity:0;transform:scale(.5);}

/* v5.5 — springy bar decompress */
.statbar .fill{transition:width 1s cubic-bezier(.34,1.32,.5,1);}
.statbar .ext{transition:width 1.05s cubic-bezier(.34,1.32,.5,1) .5s;}

/* v5.6 — profile: CRT shop photo, red drought callout, no monogram */
.gp-head{padding-bottom:14px;border-bottom:1px solid var(--border);}
.shopshot{height:0;margin:0;overflow:hidden;border-radius:12px;position:relative;transition:height .5s var(--ease), margin .5s var(--ease);}
.shopshot.lit{height:150px;margin:0 0 16px;}
.shopshot .ph{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.78);transform-origin:center;}
.shopshot.lit .ph{animation:crton .75s var(--ease) both;}
.shopshot .grad{position:absolute;inset:0;background:linear-gradient(to top, rgba(12,12,12,.92), rgba(12,12,12,.1) 55%, transparent);}
@keyframes crton{0%{transform:scaleY(.012);opacity:.2;filter:brightness(3.6) contrast(1.2);}9%{transform:scaleY(.012);opacity:1;}42%{transform:scaleY(1.04);filter:brightness(1.9);}70%{transform:scaleY(.99);}100%{transform:scaleY(1);filter:brightness(.78);}}
.alert{background:rgba(255,69,58,.14);border:1px solid rgba(255,69,58,.5);color:#ff6b61;border-radius:11px;padding:11px 13px;font-size:13.5px;font-weight:600;margin:14px 0 2px;}
.note{color:var(--sec);font-size:13px;margin:14px 0 2px;}
@media (prefers-reduced-motion: reduce){ .shopshot.lit .ph{animation:none;} }

/* v5.7 — "how it works" 3-step mechanic (tap -> text -> five stars) */
.mech{display:flex;flex-direction:column;gap:18px;margin:20px 0 8px;}
.mstep{display:flex;gap:14px;align-items:flex-start;opacity:0;transform:translateY(12px);animation:stepIn .5s var(--ease) forwards;}
.mstep[data-s="1"]{animation-delay:.15s;} .mstep[data-s="2"]{animation-delay:.5s;} .mstep[data-s="3"]{animation-delay:.85s;}
@keyframes stepIn{to{opacity:1;transform:none;}}
.mnum{flex:0 0 26px;height:26px;border-radius:50%;border:1px solid rgba(212,175,55,.5);color:var(--gold);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:2px;}
.mbody{flex:1;display:flex;flex-direction:column;gap:9px;min-width:0;}
.mcap b{font-size:14.5px;font-weight:600;display:block;} .mcap span{font-size:13px;color:var(--sec);line-height:1.45;display:block;margin-top:2px;}
/* mini NFC card */
.mcard{position:relative;align-self:flex-start;width:158px;height:96px;border-radius:11px;
  background:linear-gradient(135deg,#1b1916,#0c0c0d);border:1px solid #2a2620;overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.5), inset 0 0 0 1px rgba(212,175,55,.06);}
.mcard::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--gold);opacity:.85;}
.mcard-wm{position:absolute;top:12px;left:14px;font-size:15px;color:#fff;}
.mcard-wm b{font-weight:800;} .mcard-wm i{font-style:italic;font-weight:600;} .mcard-wm .arr{color:var(--gold);font-weight:700;margin-left:1px;}
.mnfc{position:absolute;top:13px;right:15px;width:13px;height:13px;border-radius:50%;border:2px solid var(--gold);opacity:.65;}
.ripple{position:absolute;top:9px;right:10px;width:22px;height:22px;border-radius:50%;border:2px solid var(--gold);animation:ripple 1.9s ease-out infinite;}
@keyframes ripple{0%{transform:scale(.35);opacity:.7;}100%{transform:scale(1.7);opacity:0;}}
/* mini notification */
.mnotif{display:flex;gap:11px;align-items:flex-start;background:rgba(28,28,30,.92);border:1px solid var(--border2);
  border-radius:14px;padding:11px 13px;backdrop-filter:blur(8px);box-shadow:0 10px 26px rgba(0,0,0,.45);align-self:flex-start;max-width:340px;}
.mic{flex:0 0 30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;}
.mic.sms{background:#34c759;} .mic.g{background:#fff;}
.mtx{font-size:12.5px;line-height:1.4;min-width:0;} .mtx b{display:block;font-size:12.5px;font-weight:600;} .mtx span{color:#cfcfcf;display:block;}
.mtx .mstars{color:var(--gold);letter-spacing:2px;margin:1px 0;}
@media (prefers-reduced-motion: reduce){ .mstep{opacity:1;transform:none;animation:none;} .ripple{animation:none;} }

/* ===========================================================================
   BREAKPOINTS — mobile-first.
   Base = phone: single centred column, vertical, scroll allowed.
   Desktop (>=860px): chapters aim to fit the viewport; parallel content goes
   multi-column (mechanic 3-up, comparison 2-up) to keep the guided feel,
   and long copy is width-capped for readability inside the wider stage.
   =========================================================================== */
@media (min-width: 860px){
  /* the "how it works" mechanic: 3 columns instead of a tall stack */
  .col.winwide{max-width:940px;}
  .mech{flex-direction:row;gap:16px;align-items:stretch;margin:24px 0 12px;}
  .mstep{flex:1 1 0;min-width:0;flex-direction:column;gap:12px;
    background:rgba(12,12,13,.5);border:1px solid var(--border);border-radius:16px;padding:18px 16px;}
  .mstep .mnum{margin:0;}
  .mstep .mbody{gap:12px;}
  .mstep .mcard{align-self:center;}
  .mstep .mnotif{align-self:stretch;max-width:none;}
  /* keep the supporting copy readable, not stretched across the wide column */
  .col.winwide .sub,.col.winwide .bigneg,.col.winwide .svline,
  .col.winwide .punch,.col.winwide .receipt,.col.winwide .btn,.col.winwide .foot{
    max-width:600px;margin-left:auto;margin-right:auto;}
}

/* v5.8 — desktop "how it works": balance the copy under the 3 cards */
.bigneg span{display:block;}
@media (min-width: 860px){
  .col.winwide{max-width:880px;}
  .col.winwide .sub{max-width:640px;}
  .col.winwide .bigneg{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;line-height:1.4;margin:24px auto 12px;max-width:800px;}
  .col.winwide .bigneg span{display:inline;}
  .col.winwide .svline,.col.winwide .punch,.col.winwide .receipt{text-align:center;max-width:640px;margin-left:auto;margin-right:auto;}
  .col.winwide .btn{max-width:440px;}
}

/* real brand logo in the nav (white-on-transparent AVIF) */
.brand{display:inline-flex;align-items:center;text-decoration:none;}
.brandlogo{height:22px;width:auto;display:block;}

/* live-data loading row (pulling shop off Google) */
.loadrow{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--sec);font-size:14px;padding:18px 6px;}

/* ---- client success story ---- */
.costnum.gold{color:var(--gold);}
.clientbadge{display:inline-flex;align-items:center;gap:7px;margin:6px 0 4px;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:.2px;color:var(--gold);background:rgba(212,175,55,.10);border:1px solid rgba(212,175,55,.34);}
.clientbadge em{font-style:normal;font-size:12px;line-height:1;}
.heat.heatwide{max-width:430px;margin:10px auto 0;}
.heatlab.ctr{text-align:center;}

/* ---- embedded Stripe checkout sheet ---- */
.paysheet.cko{padding:14px 16px 20px;}
.paysheet .ckobox{min-height:300px;max-height:74vh;overflow-y:auto;padding-top:10px;}
.paysheet .ckobox .loadrow{justify-content:center;padding:46px 0;color:var(--sec);}
.ckoerr{margin-top:10px;}