/* LocalCare – clickable demo. Visual language copied from the motion explainer (video/project/index.html). */
@font-face{font-family:'Bricolage';src:url(fonts/bricolage-800.woff2) format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Bricolage';src:url(fonts/bricolage-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Bricolage';src:url(fonts/bricolage-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'DM Sans';src:url(fonts/dmsans-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'DM Sans';src:url(fonts/dmsans-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'DM Sans';src:url(fonts/dmsans-700.woff2) format('woff2');font-weight:700;font-display:swap}
:root{--cream:#FFF4E6;--cream2:#FBE6CC;--navy:#0D004B;--orange:#EA590C;--yellow:#FDB913;--teal:#00B39C;--pink:#E2066E;--sky:#3FB8E2;--purple:#7861A8;--ink:#2B2456;--muted:#6c6590;
  --e-out5:cubic-bezier(.22,1,.36,1);--e-back:cubic-bezier(.34,1.56,.64,1);--e-backS:cubic-bezier(.3,1.9,.55,1);--e-in:cubic-bezier(.55,0,1,.45);--e-io:cubic-bezier(.65,0,.35,1)}
*{-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;background:var(--cream);color:var(--navy);font-family:'DM Sans',sans-serif}
body{overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer}
.ic{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block;flex:none}
[data-act]{cursor:pointer}

/* ---------- desktop stage ---------- */
#bg{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(2px);animation:blob 14s ease-in-out infinite alternate}
@keyframes blob{from{transform:translate(0,0) scale(1)}to{transform:translate(40px,30px) scale(1.04)}}
.wrap{position:relative;z-index:1;height:100%;display:flex;align-items:center;justify-content:center;gap:88px;padding:0 40px;box-sizing:border-box}
.intro{width:380px;flex:none}
@media (max-width:980px){.intro{display:none}}
.lockup{display:flex;align-items:center;gap:14px}
.wordmark{position:relative;font-family:'Bricolage';font-weight:800;letter-spacing:-0.035em;color:var(--navy);line-height:1;white-space:nowrap}
.wordmark .c{color:var(--orange)}
.intro h1{margin:40px 0 0;font:800 48px/1.04 'Bricolage';letter-spacing:-.025em}
.intro h1 .acc{color:var(--orange)}
.intro p{margin:18px 0 0;font:500 19px/1.45 'DM Sans';color:var(--ink)}
.intro .how{margin:26px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.intro .how li{display:flex;align-items:center;gap:14px;font:500 17px 'DM Sans';color:var(--ink)}
.intro .how .icirc{width:40px;height:40px}
.intro .row{margin-top:30px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pill-btn{display:inline-flex;align-items:center;gap:10px;background:var(--navy);color:#fff;border-radius:999px;padding:12px 22px 12px 16px;font:700 16px 'DM Sans';box-shadow:0 10px 24px rgba(13,0,75,.18);transition:transform .15s}
.pill-btn:active{transform:scale(.96)}
.intro small{display:block;margin-top:18px;font:500 14px 'DM Sans';color:var(--muted)}
.chip-city{display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:8px 16px 8px 10px;font:700 15px 'DM Sans';box-shadow:0 8px 18px rgba(13,0,75,.10)}

.holder{flex:none;position:relative;width:400px;height:820px}
.phone{position:absolute;left:0;top:0;width:400px;height:820px;border-radius:64px;background:var(--navy);padding:14px;box-sizing:border-box;box-shadow:0 50px 90px rgba(13,0,75,.28),0 10px 24px rgba(13,0,75,.18);transform-origin:0 0}
.screen{position:relative;width:372px;height:792px;border-radius:50px;overflow:hidden;background:#FFFDF9;isolation:isolate;container-type:size;--tbh:calc(70px + env(safe-area-inset-bottom))}
.topfade{position:absolute;left:0;right:0;top:0;height:52px;background:linear-gradient(#FFFDF9 55%,rgba(255,253,249,0));z-index:5;pointer-events:none}
.notch{position:absolute;top:26px;left:50%;width:110px;height:30px;margin-left:-55px;border-radius:20px;background:var(--navy);z-index:90;pointer-events:none}
.sbar{position:absolute;top:24px;left:34px;font:700 17px 'DM Sans';color:var(--navy);z-index:89;pointer-events:none}

/* ---------- mobile: full-screen app ---------- */
@media (max-width:560px), (max-height:520px) and (pointer:coarse){
  body{overflow:hidden}
  #bg,.intro{display:none}
  .wrap{display:block;padding:0}
  .holder{position:fixed;inset:0;width:auto;height:auto}
  .phone{position:absolute;inset:0;width:auto;height:auto;border-radius:0;padding:0;box-shadow:none;transform:none!important}
  .screen{width:100%;height:100%;border-radius:0}
  .notch,.sbar{display:none}
  #notifs{top:calc(env(safe-area-inset-top) + 10px)}
  #toast{top:calc(env(safe-area-inset-top) + 14px)}
}

/* ---------- screens ---------- */
#view{position:absolute;inset:0}
.scr{position:absolute;inset:0;overflow:hidden;background:#FFFDF9}
.scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior:contain}
.scroll::-webkit-scrollbar{display:none}
.scr.in-tab{animation:scrIn .5s var(--e-out5) both}
.scr.in-push{animation:scrPush .55s var(--e-out5) both;box-shadow:-20px 0 40px rgba(13,0,75,.12)}
.scr.out{animation:scrOut .28s var(--e-in) both;pointer-events:none}
.scr.out-back{animation:scrBack .4s var(--e-in) both;pointer-events:none;z-index:2}
@keyframes scrIn{from{opacity:0;transform:translateY(26px) scale(.985)}to{opacity:1;transform:none}}
@keyframes scrPush{from{transform:translateX(100%)}to{transform:none}}
@keyframes scrOut{to{opacity:0;transform:scale(.97)}}
@keyframes scrBack{to{transform:translateX(100%)}}

/* pop-in (video: scale with overshoot + rise + fade) */
.pp{animation:ppT var(--pd,.55s) var(--pe,var(--e-back)) both,ppO .16s linear both;animation-delay:var(--d,0s),var(--d,0s)}
@keyframes ppT{from{transform:translateY(var(--dy,30px)) scale(var(--s0,.5))}to{transform:none}}
@keyframes ppO{from{opacity:0}to{opacity:1}}
.noanim .pp,.noanim .pa{animation:none}
.ph-search,.ph-deal{width:calc(100% - 48px)}
.pp.soft{--s0:.9;--dy:20px;--pe:var(--e-out5)}

/* ---------- splash ---------- */
.splash{background:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}
.splash .sb1,.splash .sb2{position:absolute;border-radius:50%}
.splash .lockup{gap:12px;position:relative}
.splash .mk{animation:pinDrop .55s cubic-bezier(.55,0,1,.45) .15s both}
.splash .mk .mk-pin{transform-box:fill-box;transform-origin:50% 100%;animation:squash .5s var(--e-backS) .7s both}
.splash .mk .mk-heart{transform-box:fill-box;transform-origin:50% 50%;animation:heartPop .6s var(--e-backS) .85s both}
@keyframes pinDrop{from{transform:translateY(-560px)}to{transform:none}}
@keyframes squash{from{transform:scale(1.28,.72)}to{transform:none}}
@keyframes heartPop{from{transform:scale(0)}to{transform:none}}
.splash .ring{position:absolute;left:50%;top:50%;border-radius:50%;border:6px solid var(--yellow);width:20px;height:20px;margin:-10px;opacity:0;animation:ring .8s var(--e-out5) .72s both}
.splash .ring.r2{border-color:var(--teal);border-width:3px;animation-delay:.8s;--R:9}
@keyframes ring{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(var(--R,7));border-width:1px}}
.splash .wordmark span{display:inline-block;animation:letter .6s var(--e-back) both,ppO .2s linear both}
@keyframes letter{from{transform:translateY(40px) rotate(-8deg)}to{transform:none}}
.splash .sw{position:absolute;right:-4px;bottom:-16px}
.splash .sw path{animation:draw .6s var(--e-io) 1.25s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.splash .tag{margin-top:40px;width:290px;text-align:center;font:500 19px/1.3 'DM Sans';color:var(--ink)}
.splash .tag .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.14em .05em .12em;margin:-.14em -.05em -.12em}
.splash .tag .wi{display:inline-block;animation:wordUp .7s cubic-bezier(.23,1,.32,1) both}
@keyframes wordUp{from{transform:translateY(135%) rotate(6deg)}to{transform:none}}
.splash .city{margin-top:26px;display:inline-flex;align-items:center;gap:8px;background:var(--navy);color:#fff;border-radius:999px;padding:9px 18px 9px 13px;font:700 17px 'DM Sans'}
.splash .hint{position:absolute;bottom:46px;left:0;right:0;text-align:center;font:700 13px 'DM Sans';letter-spacing:.14em;text-transform:uppercase;color:#9a93b5;animation:ppO .4s linear 2.6s both,blink 1.6s ease-in-out 3s infinite}
@keyframes blink{50%{opacity:.4}}

/* ---------- home (video: S2 phone) ---------- */
.home-c{position:relative;--sq:max(0px,772px - (100cqh - var(--tbh)));padding:calc(794px - var(--sq)) 0 120px}
.ph-logo{position:absolute;left:24px;top:74px;display:flex;align-items:center;gap:8px;font:800 24px 'Bricolage';letter-spacing:-.02em}
.ph-logo .c{color:var(--orange)}
.ph-hello{position:absolute;left:24px;top:118px;font:800 27px 'Bricolage';letter-spacing:-.02em;line-height:1.1;width:320px}
.ph-search{position:absolute;left:24px;right:24px;top:196px;height:52px;border-radius:26px;background:#F3ECE1;display:flex;align-items:center;gap:10px;padding:0 18px;font:500 17px 'DM Sans';color:#7b7396;box-sizing:border-box}
.tiles{position:absolute;left:24px;right:24px;top:268px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tile{height:calc(118px - var(--sq,0px) / 3);border-radius:24px;color:#fff;position:relative;box-sizing:border-box;padding:16px;font:700 20px 'DM Sans';text-align:left;transition:transform .15s}
.tile:active{transform:scale(.95)!important}
.tile .ic{width:40px;height:40px;stroke-width:2.2}
.tile span{position:absolute;left:16px;bottom:14px}
.ph-deal{position:absolute;left:24px;right:24px;top:calc(672px - var(--sq,0px));height:92px;border-radius:24px;background:var(--navy);color:#fff;display:flex;align-items:center;gap:14px;padding:0 16px;box-sizing:border-box;text-align:left}
.badge{font:800 22px 'Bricolage';background:var(--yellow);color:var(--navy);border-radius:14px;padding:8px 12px;white-space:nowrap}
.bell{position:absolute;right:24px;top:68px;width:40px;height:40px;border-radius:20px;background:#F3ECE1;display:flex;align-items:center;justify-content:center}
.bell .dot{position:absolute;right:7px;top:7px;width:10px;height:10px;border-radius:5px;background:var(--pink);border:2px solid #F3ECE1;display:none}
.bell.has .dot{display:block;animation:ppT .5s var(--e-backS) both}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;margin:0 24px 12px;font:800 22px 'Bricolage';letter-spacing:-.02em}
.sec-h button{font:700 14px 'DM Sans';color:var(--orange)}
.deal-list{display:flex;flex-direction:column;gap:12px;margin:0 24px}
.drow{position:relative;height:68px;border-radius:20px;background:#fff;box-shadow:0 10px 22px rgba(13,0,75,.10);overflow:hidden;display:flex;align-items:center;justify-content:space-between;padding:0 14px 0 26px;box-sizing:border-box;text-align:left;width:100%;transition:transform .15s}
.drow:active{transform:scale(.97)}
.drow .st{position:absolute;left:0;top:0;bottom:0;width:10px}
.drow .nm{font:700 18px 'DM Sans';color:var(--navy);line-height:1.15}
.drow .by{font:500 13px 'DM Sans';color:var(--muted);margin-top:2px}
.drow .bd{font:800 21px 'Bricolage';color:#fff;border-radius:12px;padding:3px 11px;letter-spacing:-.01em;white-space:nowrap}
.new-tag{display:inline-block;vertical-align:2px;margin-left:6px;font:800 10px 'DM Sans';letter-spacing:.12em;background:var(--yellow);color:var(--navy);border-radius:6px;padding:2px 6px}
.event-card{margin:22px 24px 0;border-radius:24px;background:var(--purple);color:#fff;padding:18px;display:flex;gap:14px;align-items:center;text-align:left;width:calc(100% - 48px);box-sizing:border-box}
.event-card b{display:block;font:800 21px 'Bricolage';letter-spacing:-.01em}
.event-card small{display:block;font:500 15px 'DM Sans';opacity:.8;margin-top:2px}

/* ---------- map (video: S4 phone) ---------- */
.mapsvg{position:absolute;inset:0;width:100%;height:100%}
.m-search{position:absolute;left:20px;right:20px;top:70px;height:54px;border-radius:27px;background:#fff;box-shadow:0 6px 18px rgba(13,0,75,.12);display:flex;align-items:center;gap:10px;padding:0 18px;font:700 18px 'DM Sans';z-index:3;box-sizing:border-box}
.m-chips{position:absolute;left:0;right:0;top:134px;display:flex;gap:8px;z-index:3;overflow-x:auto;padding:4px 20px 14px;scrollbar-width:none}
.m-chips::-webkit-scrollbar{display:none}
.m-chip{flex:none;font:700 15px 'DM Sans';padding:8px 14px;border-radius:999px;background:#fff;box-shadow:0 4px 10px rgba(13,0,75,.10);transition:background .2s,color .2s,transform .15s}
.m-chip:active{transform:scale(.94)}
.m-chip.on{background:var(--navy);color:#fff}
.pf{transition:transform .38s var(--e-back),opacity .25s}
.pinwrap.off .pf{transform:scale(0);opacity:0;transition:transform .3s var(--e-in),opacity .3s}
.pa{animation:pinIn .5s var(--e-backS) both,ppO .1s linear both;animation-delay:var(--d,0s),var(--d,0s)}
@keyframes pinIn{from{transform:translateY(-40px) scale(0)}to{transform:none}}
.ps{transition:transform .35s var(--e-backS)}
.pinwrap.sel .ps{transform:scale(1.35)}
.pinwrap{cursor:pointer}
.newring{animation:newring 1.6s ease-out infinite;transform-box:fill-box;transform-origin:50% 50%}
@keyframes newring{0%{transform:scale(.6);opacity:.8}100%{transform:scale(2.1);opacity:0}}
.you-pulse{animation:youp 1.2s linear infinite;transform-box:fill-box;transform-origin:50% 50%}
@keyframes youp{0%{transform:scale(1);opacity:.45}100%{transform:scale(3.6);opacity:0}}
.route{stroke-dasharray:6 10;animation:routeIn .9s var(--e-io) both}
@keyframes routeIn{from{stroke-dashoffset:300;opacity:0}to{stroke-dashoffset:0;opacity:1}}
.tapfx{animation:tapfx .55s var(--e-out5) forwards;transform-box:fill-box;transform-origin:50% 50%}
@keyframes tapfx{from{transform:scale(.6);opacity:.6}to{transform:scale(2.4);opacity:0}}

/* ---------- overlays / sheets ---------- */
#overlay{position:absolute;inset:0;z-index:40;pointer-events:none}
#overlay > *{pointer-events:auto}
.dim{position:absolute;inset:0;background:rgba(13,0,75,.42);animation:ppO .25s linear both}
.dim.out{animation:fadeOut .25s linear both}
@keyframes fadeOut{to{opacity:0}}
.sheet{position:absolute;left:0;right:0;bottom:0;min-height:290px;background:#fff;border-radius:34px 34px 0 0;box-shadow:0 -10px 30px rgba(13,0,75,.15);z-index:4;padding:16px 22px calc(20px + env(safe-area-inset-bottom));box-sizing:border-box;animation:sheetIn .7s var(--e-out5) both}
.sheet.tall{height:auto;padding-bottom:calc(26px + env(safe-area-inset-bottom))}
.sheet.out{animation:sheetOut .32s var(--e-in) both}
@keyframes sheetIn{from{transform:translateY(105%)}to{transform:none}}
@keyframes sheetOut{to{transform:translateY(105%)}}
.sheet .handle{width:60px;height:6px;border-radius:3px;background:#ddd6e8;margin:0 auto 16px}
.offerbox{margin-top:18px;border-radius:20px;background:#FFF0E4;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;text-align:left;width:100%;box-sizing:border-box}
.offerbox .lb{font:700 13px 'DM Sans';letter-spacing:.12em;color:var(--orange)}
.offerbox .tt{font:800 23px 'Bricolage';margin-top:2px;letter-spacing:-.01em}
.offerbox .tm{font:700 15px 'DM Sans';color:var(--muted);text-align:left;flex:none;margin-left:10px}
.navbtn{flex:1;height:48px;border-radius:24px;background:var(--navy);color:#fff;font:700 18px 'DM Sans';display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .15s}
.navbtn:active,.round:active,.btn:active{transform:scale(.96)}
.round{width:48px;height:48px;border-radius:24px;background:#F3ECE1;display:flex;align-items:center;justify-content:center;flex:none;transition:transform .15s}
.round.on .ic{fill:var(--pink)}
.heartpop{animation:heartPop .45s var(--e-backS)}

/* ---------- business detail ---------- */
.hero{position:relative;height:260px;overflow:hidden}
.hero .st{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%) scale(.62);transform-origin:50% 100%}
.hero .ground{position:absolute;left:0;right:0;bottom:0;height:16px;background:#EAD9C2}
.topbtn{position:absolute;top:62px;width:44px;height:44px;border-radius:22px;background:#fff;box-shadow:0 6px 16px rgba(13,0,75,.14);display:flex;align-items:center;justify-content:center;z-index:3;transition:transform .15s}
.topbtn:active{transform:scale(.92)}
.body{position:relative;margin-top:-26px;background:#FFFDF9;border-radius:30px 30px 0 0;padding:24px 22px 130px}
.b-name{font:800 30px 'Bricolage';letter-spacing:-.02em;line-height:1.05}
.b-meta{font:500 16px 'DM Sans';color:var(--muted);margin-top:6px}
.b-chips{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.b-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 8px;border-radius:999px;font:700 14px 'DM Sans';color:#fff}
.b-chip.light{background:#F3ECE1;color:var(--navy);padding-left:12px}
.b-about{margin-top:16px;font:500 16px/1.45 'DM Sans';color:var(--ink)}
.b-h{margin-top:24px;font:800 21px 'Bricolage';letter-spacing:-.02em}
.b-offer{margin-top:12px;border-radius:20px;padding:14px 14px 14px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.b-offer .tm2{font:700 14px 'DM Sans';color:var(--muted);margin-top:3px}
.use-s{flex:none;height:40px;padding:0 16px;border-radius:20px;background:var(--orange);color:#fff;font:800 17px 'Bricolage';transition:transform .15s}
.use-s:active{transform:scale(.94)}
.btn{position:absolute;left:22px;right:22px;height:66px;border-radius:33px;background:var(--orange);color:#fff;font:800 24px 'Bricolage';display:flex;align-items:center;justify-content:center;gap:10px;transition:transform .12s,background .25s}
.btn.rel{position:relative;left:auto;right:auto;width:100%}
.b-actions{margin-top:22px;display:flex;flex-direction:column;gap:12px}

/* use-offer flow */
.code{margin-top:16px;border-radius:24px;background:var(--navy);color:#fff;padding:18px 20px;position:relative;overflow:hidden}
.code .k{font:700 12px 'DM Sans';letter-spacing:.2em;opacity:.7}
.code .v{font:800 38px 'Bricolage';color:var(--yellow);letter-spacing:.02em;margin-top:2px}
.code .shine{position:absolute;top:-60px;left:-120px;width:70px;height:260px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.3),rgba(255,255,255,0));transform:rotate(20deg);animation:shine 2.4s var(--e-io) .4s infinite}
.timer{margin-top:14px;display:flex;align-items:center;justify-content:space-between;font:700 15px 'DM Sans';color:var(--muted)}
.bar{margin-top:8px;height:8px;border-radius:4px;background:#F3ECE1;overflow:hidden}
.bar i{display:block;height:100%;background:var(--orange);border-radius:4px;transition:width 1s linear}
.done-ic{width:84px;height:84px;border-radius:42px;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;margin:6px auto 0}
.ptspill{display:inline-block;background:var(--teal);color:#fff;border-radius:999px;padding:8px 18px;font:800 24px 'Bricolage'}
.center{text-align:center}
.linkbtn{display:block;margin:14px auto 0;font:700 16px 'DM Sans';color:var(--muted)}

/* ---------- edut (video: S6) ---------- */
.page-h{position:relative;padding:70px 22px 0;display:flex;align-items:center;justify-content:space-between}
.page-h h2{margin:0;font:800 32px 'Bricolage';letter-spacing:-.02em}
.ptsbadge{display:inline-flex;align-items:center;gap:6px;background:var(--yellow);color:var(--navy);border-radius:999px;padding:7px 14px 7px 10px;font:800 17px 'Bricolage'}
.ecard{position:relative;margin:18px 22px 0;background:#fff;border-radius:30px;box-shadow:0 24px 48px rgba(13,0,75,.10),0 5px 14px rgba(13,0,75,.05);overflow:hidden}
.ecard .ill{position:relative;overflow:hidden}
.ecard .txt{padding:18px 22px 22px}
.ecard .txt b{display:block;font:800 25px 'Bricolage';letter-spacing:-.02em;line-height:1.05}
.ecard .txt p{margin:8px 0 0;font:500 16px/1.35 'DM Sans';color:var(--ink)}
.ill.deals{background:#FFE3CC;padding:20px 18px 22px;display:flex;flex-direction:column;gap:10px}
.ill.deals .drow{height:58px;border-radius:18px;box-shadow:0 10px 22px rgba(13,0,75,.12)}
.ill.deals .drow:nth-child(odd){transform:rotate(-1.2deg)}
.ill.deals .drow:nth-child(even){transform:rotate(1.2deg)}
.ill.deals .drow .nm{font-size:18px}
.ill.gift{background:#D3F1EA;height:236px;perspective:700px}
.gcard{position:absolute;left:50%;top:26px;width:280px;height:184px;margin-left:-140px;border-radius:23px;background:linear-gradient(135deg,#1B0D6B,var(--navy));box-shadow:0 20px 40px rgba(13,0,75,.3);overflow:hidden;color:#fff;transform:rotate(-5deg);transition:transform .25s var(--e-out5);animation:float 3.6s ease-in-out infinite}
@keyframes float{50%{translate:0 -6px}}
.gcard .lg{position:absolute;left:21px;top:19px;display:flex;align-items:center;gap:7px;font:800 21px 'Bricolage'}
.gcard .lb{position:absolute;left:21px;top:61px;font:700 13px 'DM Sans';letter-spacing:.2em;opacity:.7}
.gcard .am{position:absolute;left:19px;top:77px;font:800 47px 'Bricolage';color:var(--yellow)}
.gcard .ics{position:absolute;left:21px;bottom:14px;display:flex;gap:7px}
.gcard .ics div{width:32px;height:32px;border-radius:16px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center}
.gcard .shn{position:absolute;top:-60px;left:-120px;width:70px;height:300px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.35),rgba(255,255,255,0));transform:rotate(20deg)}
.gcard.shining .shn{animation:shine .9s var(--e-io) both}
@keyframes shine{from{left:-120px}to{left:380px}}
.gplaces{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.gplaces span{font:700 13px 'DM Sans';background:#F3ECE1;border-radius:999px;padding:5px 10px}
.ill.stamps{background:#FFF0C2;height:250px}
.scard{position:absolute;left:50%;top:62px;width:296px;margin-left:-148px;height:172px;border-radius:23px;background:#fff;box-shadow:0 14px 30px rgba(13,0,75,.14)}
.scard .t1{position:absolute;left:20px;top:15px;font:800 21px 'Bricolage'}
.scard .t2{position:absolute;right:20px;top:19px;font:700 14px 'DM Sans';color:var(--muted)}
.slot{position:absolute;width:49px;height:49px;border-radius:25px;border:3px dashed #d8cfe6;box-sizing:border-box}
.stamp{position:absolute;width:49px;height:49px;border-radius:25px;display:flex;align-items:center;justify-content:center}
.stamp.new{animation:stampIn .35s var(--e-backS) both}
@keyframes stampIn{from{transform:scale(1.8) rotate(-30deg);opacity:0}1%{opacity:1}to{transform:none;opacity:1}}
.pts{position:absolute;right:20px;top:22px;background:var(--teal);color:#fff;border-radius:999px;padding:8px 17px;font:800 24px 'Bricolage';opacity:0;pointer-events:none}
.pts.go{animation:ptsPop .5s var(--e-backS) both,ptsRise 2.5s var(--e-out5) both,ptsFade .5s linear 2.3s forwards}
@keyframes ptsPop{from{scale:0}to{scale:1}}
@keyframes ptsRise{from{opacity:1;translate:0 0}to{opacity:1;translate:0 -20px}}
@keyframes ptsFade{to{opacity:0}}
.pts.stay{opacity:1}
.stamp-row{display:flex;gap:10px;margin-top:14px}
.small-btn{flex:1;height:48px;border-radius:24px;background:var(--orange);color:#fff;font:800 19px 'Bricolage';display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .15s}
.small-btn.navy{background:var(--navy)}
.small-btn.teal{background:var(--teal)}
.small-btn:active{transform:scale(.96)}
.ptsline{display:flex;align-items:center;justify-content:space-between;margin-top:14px;font:700 15px 'DM Sans';color:var(--muted)}
.ptsline b{display:inline;font:800 22px 'Bricolage';color:var(--navy)}
.reset-row{margin:28px 22px 0;display:flex;justify-content:center}
.reset{display:inline-flex;align-items:center;gap:8px;font:700 15px 'DM Sans';color:var(--muted);padding:10px 16px;border-radius:999px;background:#F3ECE1}

/* ---------- yrittäjälle (video: S5 phone) ---------- */
.yr-c{position:relative;--sq:max(0px,750px - (100cqh - var(--tbh)));padding:calc(770px - var(--sq)) 0 130px}
.yr-c .f1{top:calc(312px - var(--sq))}.yr-c .f2{top:calc(396px - var(--sq))}.yr-c .f3{top:calc(480px - var(--sq))}.yr-c .f4{top:calc(564px - var(--sq))}.yr-c .f5{top:calc(676px - var(--sq))}
.yr-title{position:absolute;left:22px;top:70px;font:800 32px 'Bricolage';letter-spacing:-.02em}
.yr-biz{position:absolute;right:22px;top:76px;display:inline-flex;align-items:center;gap:6px;background:var(--orange);color:#fff;border-radius:999px;padding:6px 12px 6px 8px;font:700 12px 'DM Sans';letter-spacing:.12em;text-transform:uppercase}
.yr-photo{position:absolute;left:22px;right:22px;top:124px;height:calc(170px - var(--sq,0px));border-radius:24px;background:var(--orange);overflow:hidden}
.yr-photo svg.bgc{position:absolute;inset:0}
.yr-photo .cup{position:absolute;left:50%;top:26px;margin-left:-68px}
.yr-photo .pr{position:absolute;right:14px;top:14px;font:800 18px 'Bricolage';background:#fff;color:var(--orange);border-radius:12px;padding:6px 10px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.field{position:absolute;left:22px;right:22px;height:70px;border-radius:18px;background:#F6F1EA;box-sizing:border-box;padding:10px 16px;display:block;transition:box-shadow .2s}
.field:focus-within{box-shadow:0 0 0 2px var(--orange)}
.field.err{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}
.field label,.field .lbl{display:block;font:700 13px 'DM Sans';letter-spacing:.1em;text-transform:uppercase;color:#8d86a8}
.field input{display:block;width:100%;border:0;outline:0;background:transparent;padding:0;margin-top:3px;font:700 22px 'DM Sans';color:var(--navy);caret-color:var(--orange)}
.field input::placeholder{color:#c3bcd3}
.field.tog{display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.field.tog .tl{font:700 19px 'DM Sans'}
.toggle{width:56px;height:32px;border-radius:16px;background:#d7d0e4;position:relative;transition:background .25s;flex:none}
.toggle i{position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:12px;background:#fff;transition:left .25s var(--e-out5)}
.toggle.on{background:var(--teal)}
.toggle.on i{left:28px}
.btn.done{background:var(--teal)}
.btn .lbl2{display:inline-flex;align-items:center;gap:10px;animation:ppT .4s var(--e-backS) both}
.tapring{position:absolute;width:56px;height:56px;margin:-28px;border-radius:50%;background:rgba(13,0,75,.3);pointer-events:none;animation:tapring .45s var(--e-out5) forwards;z-index:5}
@keyframes tapring{from{transform:scale(1);opacity:1}to{transform:scale(2.4);opacity:0}}
.flycard{position:absolute;left:50%;top:600px;width:220px;height:84px;margin-left:-110px;border-radius:22px;background:#fff;box-shadow:0 20px 40px rgba(13,0,75,.2);display:flex;align-items:center;gap:12px;padding:0 14px;box-sizing:border-box;z-index:6;pointer-events:none;animation:fly .9s var(--e-io) forwards}
.flycard b{font:800 19px/1.1 'Bricolage'}
@keyframes fly{0%{transform:scale(.6);opacity:0}15%{opacity:1;transform:scale(1)}100%{transform:translate(120px,-560px) rotate(14deg) scale(.5);opacity:0}}
.fill-ex{position:absolute;left:22px;top:300px;font:700 13px 'DM Sans';color:var(--orange);display:none}
.mine{margin:0 22px}
.mine .row{display:flex;align-items:center;gap:12px;background:#fff;border-radius:20px;box-shadow:0 10px 22px rgba(13,0,75,.08);padding:12px 14px;margin-top:10px}
.mine .row b{display:block;font:800 18px 'Bricolage'}
.mine .row small{display:block;font:500 13px 'DM Sans';color:var(--muted);margin-top:2px}
.mine .empty{font:500 15px 'DM Sans';color:var(--muted);margin-top:8px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 22px 0}
.stat{border-radius:20px;padding:14px;color:#fff}
.stat b{display:block;font:800 26px 'Bricolage'}
.stat small{display:flex;align-items:center;gap:6px;font:700 13px 'DM Sans';opacity:.9}
.icirc{flex:none;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#fff}

/* ---------- notifications (video: .notif) ---------- */
#notifs{position:absolute;left:12px;right:12px;top:58px;z-index:60;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.notif{pointer-events:auto;height:78px;background:#fff;border-radius:22px;box-shadow:0 20px 44px rgba(13,0,75,.18);display:flex;align-items:center;gap:12px;padding:0 16px;box-sizing:border-box;text-align:left;width:100%;--dy:40px;--s0:.6;animation:ppT .55s var(--e-back) both,ppO .16s linear both}
.notif.out{animation:notifOut .35s var(--e-in) both}
@keyframes notifOut{to{opacity:0;transform:translateY(-20px) scale(.7)}}
.notif b{display:block;font:800 18px 'Bricolage';letter-spacing:-.01em}
.notif small{display:block;font:500 14px 'DM Sans';color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notif > div:last-child{min-width:0}

#toast{position:absolute;left:50%;top:60px;pointer-events:none;transform:translateX(-50%);z-index:70;background:var(--navy);color:#fff;border-radius:999px;padding:11px 18px;font:700 15px 'DM Sans';white-space:nowrap;display:none;align-items:center;gap:8px;box-shadow:0 12px 26px rgba(13,0,75,.25)}
#toast.on{display:flex;animation:toastIn .45s var(--e-back) both}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,-20px) scale(.8)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------- tab bar ---------- */
.tabbar{position:absolute;left:0;right:0;bottom:0;z-index:20;background:#fff;border-radius:28px 28px 0 0;box-shadow:0 -10px 30px rgba(13,0,75,.10);display:flex;justify-content:space-around;height:var(--tbh);box-sizing:border-box;padding:8px 8px calc(10px + env(safe-area-inset-bottom));transition:transform .45s var(--e-out5)}
.tabbar.hidden{transform:translateY(110%)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font:700 12px/16px 'DM Sans';color:#8d86a8;padding:0}
.tab .tic{width:46px;height:30px;border-radius:15px;display:flex;align-items:center;justify-content:center;transition:background .25s,color .25s}
.tab.on{color:var(--navy)}
.tab.on .tic{background:#FFE3CC;color:var(--orange)}
.tab.on .tic .ic{animation:heartPop .4s var(--e-backS)}
.tab .tdot{position:absolute;margin:-2px 0 0 26px;width:9px;height:9px;border-radius:5px;background:var(--pink);display:none}
.tab.dot .tdot{display:block}
.tab .tw{position:relative;display:flex;flex-direction:column;align-items:center}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}}