/* ═══ tinydabba v5 · storefront home (rev 2) · needs v5-core.css ═══ */
/* ── hero: centred copy + the marketing image (first admin banner, Admin → Shop → Banners) ── */
.hero2{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;padding-block:clamp(24px,4.5vw,56px) 0}
.hero2 .disp{max-width:18ch}
.hero2 .lead{max-width:62ch}
.hero2 .cta{justify-content:center}
.assist{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 10px;border-radius:18px;background:var(--md-tertiary-container);color:var(--md-on-tertiary-container);font-size:14px;font-weight:var(--w-label)}
.assist .ic{width:20px;height:20px}
.l1{display:block;color:var(--md-on-surface)}
.rot{display:grid;color:var(--md-primary);justify-items:center}
.rot>span{grid-area:1/1;display:inline-flex;align-items:center;gap:.16em;white-space:nowrap;opacity:0;animation:td-word 11.2s infinite both}
.rot>span:nth-child(2){animation-delay:2.8s}
.rot>span:nth-child(3){animation-delay:5.6s}
.rot>span:nth-child(4){animation-delay:8.4s}
.rot .wu{text-decoration:underline wavy var(--td-signal);text-decoration-thickness:.06em;text-underline-offset:.2em;text-decoration-skip-ink:none}
.rot .rs{width:.62em;height:.62em;flex:none;animation:td-wordshape 11.2s infinite both;animation-delay:inherit}
.rot>span:nth-child(1) .rs path{fill:var(--acc-sun)}.rot>span:nth-child(2) .rs path{fill:var(--acc-leaf)}.rot>span:nth-child(3) .rs path{fill:var(--acc-berry)}.rot>span:nth-child(4) .rs path{fill:var(--acc-lav)}
@keyframes td-word{0%{opacity:0;transform:translateY(.45em);animation-timing-function:var(--e-fast)}3.2%{opacity:1;transform:none}25%{opacity:1;transform:none;animation-timing-function:ease-in}28%{opacity:0;transform:translateY(-.45em)}100%{opacity:0;transform:translateY(-.45em)}}
@keyframes td-wordshape{0%{rotate:-120deg;scale:.4;animation-timing-function:var(--e-fast)}4%{rotate:0deg;scale:1}25%{rotate:0deg;scale:1}28%{rotate:90deg;scale:.6}100%{rotate:90deg;scale:.6}}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px}
.ticks li{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:var(--w-label);color:var(--md-on-surface-variant)}
.ticks .ic{width:20px;height:20px;fill:var(--md-tertiary)}
.split{display:inline-flex;gap:2px;position:relative}
.split>.btn{z-index:2}
.split>.btn:first-child{border-radius:28px 6px 6px 28px;padding:0 22px 0 28px}
.split>.btn:first-child:active{border-radius:14px 6px 6px 14px}
.split>.btn.trail{width:56px;padding:0;border-radius:6px 28px 28px 6px}
.split>.btn.trail .ic{width:26px;height:26px;transition:rotate var(--d-fast) var(--e-fast)}
.split[data-open="true"]>.btn.trail{border-radius:28px}
.split[data-open="true"]>.btn.trail .ic{rotate:180deg}
.cta{position:relative}.cta.open{z-index:20}.menu{position:absolute;left:0;top:100%;z-index:30;min-width:270px;max-width:calc(100vw - 32px);display:flex;flex-direction:column;gap:0;padding:6px;background:var(--md-surface-container-lowest);border-radius:22px;box-shadow:0 12px 32px rgba(0,30,40,.22),0 0 0 1px var(--md-outline-variant);transform-origin:top left;opacity:0;scale:.9;translate:0 -10px;visibility:hidden;transition:opacity var(--d-fx) var(--e-fx),scale var(--d-def) var(--e-fast),translate var(--d-def) var(--e-fast),visibility 0s linear var(--d-def)}
.cta.open .menu{opacity:1;scale:1;translate:0 0;visibility:visible;transition-delay:0s}
.menu .grp{display:flex;flex-direction:column;gap:2px;text-align:left}.menu .grp+.grp{margin-top:6px;padding-top:6px;border-top:1px solid var(--md-outline-variant)}
.menu a{display:flex;align-items:center;gap:14px;height:48px;padding:0 14px;border-radius:12px;text-decoration:none;color:var(--md-on-surface);font-weight:var(--w-label);font-size:15px;transition:background-color var(--d-fx) var(--e-fx),border-radius var(--d-fast) var(--e-fast)}
.menu a:hover{background:var(--md-secondary-container);color:var(--md-on-secondary-container);border-radius:24px}
.menu .ic{width:22px;height:22px;fill:var(--md-on-surface-variant)}
.scrim{position:fixed;inset:0;z-index:1;background:transparent;border:0;padding:0;cursor:default}
.hero2w{position:relative;isolation:isolate;overflow:visible;z-index:5}   /* 30 Oct: the split-button menu must escape the hero and sit above the carousel */
.hero2{padding-block:clamp(28px,5vw,72px) clamp(8px,2vw,24px);gap:20px}
.hero2 .disp{font-size:clamp(44px,6.2vw,92px);line-height:1.02;max-width:16ch}
.hero2 .lead{font-size:clamp(17px,1.4vw,22px);max-width:56ch}
.hero2 .cta{margin-top:6px}
.hero-deco{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero-deco .orb{position:absolute;filter:blur(60px);opacity:.55}
.hero-deco .o1{left:8%;top:-10%;width:360px;height:360px;background:radial-gradient(circle,var(--acc-lav-c) 0%,transparent 70%)}
.hero-deco .o2{right:6%;top:10%;width:320px;height:320px;background:radial-gradient(circle,var(--md-tertiary-container) 0%,transparent 70%)}
.hero-deco .shp{position:absolute;opacity:.9}
.hero-deco .d1{left:-60px;top:40px;width:260px;height:260px;animation:td-rot 70s linear infinite}
.hero-deco .d1 path{fill:var(--acc-lav-c);animation:heroMorph 24s var(--e-def) infinite}
.hero-deco .d2{right:-40px;top:20px;width:200px;height:200px;animation:td-rot 50s linear infinite reverse}
.hero-deco .d2 path{fill:var(--acc-sun-c)}
.hero-deco .d3{right:12%;bottom:-30px;width:120px;height:120px;animation:td-rot 40s linear infinite}
.hero-deco .d3 path{fill:var(--md-tertiary-container)}
@media (max-width:900px){.hero-deco .d1{width:160px;height:160px;left:-50px}.hero-deco .d2{width:120px;height:120px;right:-30px}.hero-deco .d3{display:none}.hero-deco .orb{filter:blur(40px)}}
:root[data-theme="dark"] .hero-deco .shp{opacity:.35}
/* full-width campaign carousel (the admin hero banners, native 8:3, never cropped) */
.hcar{position:relative;margin-top:clamp(16px,2.5vw,32px)}
.hcar-rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.hcar-rail::-webkit-scrollbar{display:none}
.hcar-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;display:block;aspect-ratio:8/3;background:var(--md-surface-container);text-decoration:none;color:inherit}
.hcar-slide picture,.hcar-slide img{display:block;width:100%;height:100%;object-fit:cover}
.hcar-nav{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px}
.hcar-nav .ibtn{width:40px;height:40px}
.hdots{display:flex;gap:6px;align-items:center}
.hdot{width:8px;height:8px;border-radius:4px;background:var(--md-outline-variant);border:0;padding:0;cursor:pointer;transition:width var(--d-fast) var(--e-fast),background-color var(--d-fx) var(--e-fx)}
.hdot[aria-current="true"]{width:28px;background:var(--md-primary)}
.hero-fallback{display:grid;place-items:center;gap:8px;padding:24px;background:linear-gradient(135deg,var(--acc-lav-c),var(--md-primary-container) 55%,var(--acc-sun-c));text-align:center}
.hero-fallback b{font-size:clamp(28px,4vw,56px);font-weight:400;letter-spacing:-.02em;font-variation-settings:"ROND" 100;color:var(--md-on-surface)}
.hero-fallback span{font-size:clamp(15px,1.4vw,20px);color:var(--md-on-surface-variant)}
.mq-clip{margin-top:clamp(12px,2vw,24px);overflow-x:clip}   /* 30 Oct: the tilted band overhangs the viewport by a few px — clip it here, never scroll sideways */
/* ── marquee (warm tonal band instead of Deep Sea) ── */
.mq{background:var(--acc-sun-c);color:var(--on-acc-sun-c);overflow:hidden;rotate:-1.2deg;width:104%;margin:0 0 0 -2%}
.mq-track{display:flex;width:max-content;animation:td-marquee 44s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
.mq-item{display:inline-flex;align-items:center;gap:18px;padding:20px 0 20px 24px;font-size:clamp(16px,1.3vw,19px);font-weight:var(--w-label);white-space:nowrap}
.mq-item .shp{width:22px;height:22px;flex:none}
.mq-item .shp path{fill:var(--acc-berry)}
@keyframes td-marquee{to{transform:translateX(-50%)}}

/* ── popular categories (Google-Store style tiles) ── */
.sec-head.center{justify-content:center;text-align:center}
.sec-head.center>div{align-items:center}
/* categories (30 Oct): compact tonal tiles — accent icon on a white shape that slowly morphs, arrow on hover; no photos, no counts */
.cats-sec{padding-block:clamp(28px,4vw,48px) 0}
.cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.cat{display:flex;align-items:center;gap:14px;padding:14px 18px 14px 14px;min-height:88px;border-radius:24px;background:var(--cc,var(--md-surface-container-low));color:var(--md-on-surface);text-decoration:none;position:relative;isolation:isolate;overflow:hidden;transition:border-radius var(--d-fast) var(--e-fast),translate var(--d-fast) var(--e-fast),scale var(--d-fast) var(--e-fast)}
.cat::before{content:"";position:absolute;inset:0;background:currentColor;opacity:0;z-index:-1;transition:opacity var(--d-fx) var(--e-fx)}
.cat:hover{translate:0 -3px}.cat:hover::before{opacity:.06}.cat:active{border-radius:16px;scale:.98}
.cat-ic{position:relative;width:60px;height:60px;flex:none;display:grid;place-items:center}
.cat-ic .shp{position:absolute;inset:0;width:100%;height:100%;fill:var(--cs,var(--md-surface-container-lowest));transition:rotate var(--d-slow) var(--e-fast),scale var(--d-slow) var(--e-fast)}
.cat-ic .shp path{fill:inherit;animation:var(--catm,none) 7s ease-in-out infinite alternate}
.cat:hover .cat-ic .shp{rotate:28deg;scale:1.08}
.cat-ic .ic{position:relative;width:28px;height:28px;color:var(--co,var(--md-primary));transition:scale var(--d-fast) var(--e-fast)}
.cat:hover .cat-ic .ic{scale:1.12}
.cat b{flex:1;min-width:0;font-size:16px;font-weight:var(--w-title);line-height:1.2}
.cat .go{width:20px;height:20px;flex:none;color:var(--md-on-surface-variant);opacity:0;translate:-6px 0;transition:opacity var(--d-fast) var(--e-fx),translate var(--d-fast) var(--e-fast)}
.cat:hover .go{opacity:1;translate:0 0}
.cat.c0{--cc:var(--md-primary-container);--co:var(--md-primary)}
.cat.c1{--cc:var(--acc-sun-c);--co:var(--acc-sun)}
.cat.c2{--cc:var(--acc-lav-c);--co:var(--acc-lav)}
.cat.c3{--cc:var(--md-tertiary-container);--co:var(--md-tertiary)}
@media (max-width:900px){.cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.cat{padding:12px;min-height:76px;gap:10px;border-radius:20px}.cat-ic{width:50px;height:50px}.cat-ic .ic{width:24px;height:24px}.cat b{font-size:14.5px}.cat .go{display:none}}
@media (prefers-reduced-motion:reduce){.cat-ic .shp path{animation:none}}

/* ── product grid: two rows per section, filters wrap, images full-bleed ── */
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:1000px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:680px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.pc{position:relative;display:flex;flex-direction:column;background:var(--md-surface-container-low);border-radius:24px;overflow:hidden;min-width:0;transition:translate var(--d-def) var(--e-fast),border-radius var(--d-def) var(--e-fast),background-color var(--d-fx) var(--e-fx),scale var(--d-fast) var(--e-fast)}
.pc:hover{translate:0 -4px;background:var(--md-surface-container);border-radius:32px}
.pc:active{scale:.985}
.pc-img{display:block;position:relative;aspect-ratio:1;background:var(--md-surface-container);overflow:hidden}
.pc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:scale var(--d-slow) var(--e-fast)}
.pc:hover .pc-img img{scale:1.05}
.off{position:absolute;left:12px;top:12px;height:28px;padding:0 10px;border-radius:14px;background:var(--acc-coral-c);color:var(--on-acc-coral-c);font-size:13px;font-weight:var(--w-label);display:inline-flex;align-items:center;z-index:2}
.fav{position:absolute;right:8px;top:8px;z-index:2;width:40px;height:40px;background:color-mix(in srgb,var(--md-surface-container-lowest) 82%,transparent)}
.fav .ic{width:20px;height:20px}
.fav .on{display:none}
.fav[aria-pressed="true"] .on{display:block;animation:td-pop var(--d-fast) var(--e-fast);fill:var(--acc-berry)}
.fav[aria-pressed="true"] .offi{display:none}
.pc-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px;flex:1}
.pc-body .lbl{font-size:11px}
.pc-t{margin:0;font-size:15px;font-weight:var(--w-title);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.pc-t a{text-decoration:none}
.pc-pr{display:flex;align-items:baseline;gap:8px;margin:2px 0 10px}
.pc-pr b{font-size:19px;font-weight:var(--w-title);font-variation-settings:"ROND" 100}
.pc-pr s{font-size:13px;color:var(--md-on-surface-variant)}
.pc-body .btn{align-self:flex-start;margin-top:auto}
@media (max-width:680px){.pc-body{padding:12px 12px 14px}.pc-body .btn{--h:40px;--r:20px;--rp:8px;padding:0 14px;font-size:14px}.pc-t{font-size:14px}.pc-pr b{font-size:17px}}
.pmore{display:flex;justify-content:center;gap:12px;margin-top:22px;flex-wrap:wrap}
.pnone{display:none;padding:24px 0;color:var(--md-on-surface-variant);text-align:center}

/* ── discover tiles: the other admin banners ── */
.disc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.disc a{display:block;border-radius:24px;overflow:hidden;aspect-ratio:8/3;background:var(--md-surface-container-low);transition:border-radius var(--d-def) var(--e-fast),translate var(--d-def) var(--e-fast)}
.disc a:hover{border-radius:36px;translate:0 -4px}
.disc img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:900px){.disc{grid-template-columns:minmax(0,1fr)}}
/* ── wavy progress + steps ── */
.wv{position:relative;height:24px;--p:66.6%;margin-bottom:20px}
.wv[data-step="0"]{--p:33.3%}
.wv[data-step="1"]{--p:66.6%}
.wv[data-step="2"]{--p:100%}
.wv-a{position:absolute;left:0;top:0;height:24px;width:var(--p);overflow:hidden;transition:width var(--d-slow) var(--e-fast)}
.wv-a svg{display:block;animation:td-wave 1.2s linear infinite}
.wv-a path{fill:none;stroke:var(--acc-indigo);stroke-width:3;stroke-linecap:round}
@keyframes td-wave{to{transform:translateX(-40px)}}
.wv-t{position:absolute;right:0;top:10px;height:3px;border-radius:2px;background:var(--acc-indigo-c);left:calc(var(--p) + 8px);transition:left var(--d-slow) var(--e-fast)}
.wv-s{position:absolute;right:0;top:10px;width:4px;height:4px;border-radius:2px;background:var(--acc-indigo)}
.steps{display:flex;flex-wrap:wrap;gap:12px}
.step{flex:1 1 280px;min-width:0;min-height:260px;border:0;text-align:left;font:inherit;color:var(--md-on-surface);background:var(--md-surface-container-low);border-radius:28px;padding:26px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;cursor:pointer;position:relative;isolation:isolate;overflow:hidden;-webkit-tap-highlight-color:transparent;transition:flex-grow var(--d-def) var(--e-def),background-color var(--d-fx-slow) var(--e-fx),color var(--d-fx-slow) var(--e-fx),border-radius var(--d-def) var(--e-fast)}
.step[aria-pressed="true"]{flex-grow:1.8;background:var(--acc-indigo-c);color:var(--on-acc-indigo-c);border-radius:44px}
.step .num{position:relative;width:72px;height:72px;display:grid;place-items:center;flex:none;margin-bottom:auto}
.step .num .shp{position:absolute;inset:0;width:100%;height:100%}
.step .num .shp path{fill:var(--md-surface-container-high)}
.step:nth-child(1) .num .shp path{fill:var(--acc-sun-c)}.step:nth-child(2) .num .shp path{fill:var(--acc-lav-c)}.step:nth-child(3) .num .shp path{fill:var(--acc-leaf-c)}
.step[aria-pressed="true"] .num .shp{rotate:60deg;scale:1.08}
.step[aria-pressed="true"] .num .shp path{fill:var(--acc-indigo)}
.step .num b{position:relative;font-size:28px;font-weight:500;font-variation-settings:"ROND" 100;transition:color var(--d-fx-slow) var(--e-fx)}
.step[aria-pressed="true"] .num b{color:#FFFFFF}
.step .st{font-size:21px;font-weight:var(--w-title);line-height:1.2;font-variation-settings:"ROND" 70}
.step .sd{font-size:15px;line-height:1.55;color:var(--md-on-surface-variant);max-width:520px}
.step[aria-pressed="true"] .sd{color:var(--on-acc-indigo-c);opacity:.85}

/* ── bento (tonal containers, no Deep Sea) ── */
.t1{grid-column:span 2;grid-row:span 2;background:var(--acc-sun-c);color:var(--on-acc-sun-c);min-height:460px}
.t1 .deco{position:absolute;right:-90px;top:-90px;width:380px;height:380px;z-index:-1;opacity:.55}
.t1 .deco path{fill:#FFFFFF}
.t1-stars{position:absolute;right:32px;top:28px;display:flex;gap:6px}
.t1-stars .ic{width:36px;height:36px;fill:#E0A100;animation:td-star2 3.6s infinite}
.t1-stars .ic:nth-child(2){animation-delay:.12s}
.t1-stars .ic:nth-child(3){animation-delay:.24s}
.t1-stars .ic:nth-child(4){animation-delay:.36s}
.t1-stars .ic:nth-child(5){animation-delay:.48s}
@keyframes td-star2{0%,100%{translate:0 0}10%{translate:0 -10px}20%{translate:0 0}}
.t1 .tlink{color:var(--on-acc-sun-c)}
.t2{background:var(--acc-leaf-c);color:var(--on-acc-leaf-c)}
.t3{background:var(--acc-berry-c);color:var(--on-acc-berry-c)}
.t4{grid-column:span 2;background:var(--md-surface-container-high)}
.t4 .minis{position:absolute;right:24px;top:24px;width:230px;height:150px;transition:rotate var(--d-slow) var(--e-fast)}
a.t4:hover .minis{rotate:-4deg}
.t4-txt{display:flex;flex-direction:column;gap:8px;max-width:calc(100% - 250px);margin-top:16px}
.t4-p{font-size:15px;line-height:1.5;opacity:.9}
.t5{background:var(--acc-indigo-c);color:var(--on-acc-indigo-c)}
.t6{background:var(--acc-lav-c);color:var(--on-acc-lav-c)}
.t7{grid-column:span 2;background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
:root[data-theme="dark"] .t1 .deco{opacity:.12}
@media (max-width:1000px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.t1{grid-row:span 1;min-height:360px}}
@media (max-width:640px){.bento{grid-template-columns:minmax(0,1fr)}.t1,.t4,.t7{grid-column:auto}.t1{min-height:360px}.t1-stars{top:24px;right:20px}.t1-stars .ic{width:28px;height:28px}.t4 .minis{display:none}.t4-txt{max-width:none}}

/* ── membership ── */
.memc{background:var(--md-surface-container-low);border-radius:36px;padding:clamp(20px,3.5vw,40px);display:flex;flex-direction:column;gap:18px}
.sl-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px 16px;font-weight:var(--w-label);color:var(--md-on-surface-variant)}
.sl-head b{font-size:clamp(26px,2.6vw,36px);font-weight:400;color:var(--md-on-surface);font-variation-settings:"ROND" 100}
.sl{position:relative;height:44px;touch-action:pan-y}
.sl-a{position:absolute;left:0;top:14px;height:16px;border-radius:8px 3px 3px 8px;background:var(--acc-sun)}
.sl-i{position:absolute;right:0;top:14px;height:16px;border-radius:3px 8px 8px 3px;background:var(--acc-sun-c)}
.sl-tick{position:absolute;top:20px;width:4px;height:4px;margin-left:-2px;border-radius:2px;background:color-mix(in srgb,var(--md-on-surface) 45%,transparent);pointer-events:none}
.sl-h{position:absolute;top:0;width:4px;height:44px;border-radius:2px;background:var(--md-on-surface);transition:width var(--d-fast) var(--e-fast),margin var(--d-fast) var(--e-fast)}
.sl:active .sl-h{width:2px;margin-left:1px}
.sl:focus-within .sl-h{box-shadow:0 0 0 5px color-mix(in srgb,var(--acc-sun) 25%,transparent)}
.sl input{position:absolute;inset:0;width:100%;height:44px;margin:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none;background:transparent}
.sl input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:4px;height:44px}
.sl input::-moz-range-thumb{width:4px;height:44px;border:0}
.sl-scale{position:relative;height:18px;font-size:12px;font-weight:var(--w-label);color:var(--md-on-surface-variant)}
.sl-scale span{position:absolute;top:0;translate:-50% 0}
.sl-scale span:first-child{left:0;translate:0 0}
.sl-scale span:last-child{right:0;translate:0 0}
.sl-msg{margin:0;font-size:17px;font-weight:400;line-height:1.5}
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:12px;margin-top:6px}
.tier{position:relative;border-radius:24px;padding:18px;background:var(--md-surface-container);display:flex;align-items:center;gap:16px;transition:background-color var(--d-fx-slow) var(--e-fx),color var(--d-fx-slow) var(--e-fx),scale var(--d-def) var(--e-fast),border-radius var(--d-def) var(--e-fast)}
.tier[data-on="true"]{background:var(--md-tertiary-container);color:var(--md-on-tertiary-container);scale:1.03;border-radius:36px}
.tb{position:relative;width:68px;height:68px;flex:none;display:grid;place-items:center;font-weight:500;font-size:18px;font-variation-settings:"ROND" 100}
.tb .shp{position:absolute;inset:0;width:100%;height:100%;transition:rotate var(--d-slow) var(--e-fast),scale var(--d-slow) var(--e-fast)}
.tier[data-on="true"] .tb .shp{rotate:45deg;scale:1.08}
.tb b{position:relative}
.tn{display:block;font-size:18px;font-weight:var(--w-title)}
.tnote{display:block;font-size:14px;color:var(--md-on-surface-variant)}
.tier[data-on="true"] .tnote{color:var(--md-on-tertiary-container);opacity:.85}

/* ── activation band form (on the lavender band) ── */
.band-form{flex:1 1 420px;min-width:0;max-width:600px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.band .tf{flex:1 1 240px;background:color-mix(in srgb,#FFFFFF 55%,transparent);box-shadow:inset 0 -1px 0 var(--acc-lav)}
.band .tf:focus-within{box-shadow:inset 0 -2px 0 var(--acc-lav)}
.band .tf>span{color:var(--on-acc-lav-c)}
.band .tf input{color:var(--on-acc-lav-c)}
.band .tf input::placeholder{color:var(--on-acc-lav-c);opacity:.6}
:root[data-theme="dark"] .band .tf{background:rgba(255,255,255,.1)}
.act-state{flex:1 1 100%;display:flex;align-items:center;gap:14px;min-height:56px;font-size:16px;color:var(--on-acc-lav-c)}
.act-state a{color:var(--on-acc-lav-c);font-weight:500}
.ld{width:52px;height:52px;border-radius:50%;background:#FFFFFF;display:grid;place-items:center;flex:none}
.ld svg{width:34px;height:34px}
.ld path{fill:var(--acc-lav)}
.done-ic{width:52px;height:52px;border-radius:16px;background:var(--md-tertiary-container);color:var(--md-on-tertiary-container);display:grid;place-items:center;flex:none;animation:td-pop var(--d-fast) var(--e-fast)}
.done-ic.warn{background:var(--acc-sun-c);color:var(--on-acc-sun-c)}

/* ── trust + FAQ + footer ── */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:12px}
.tr{display:flex;gap:16px;align-items:center;padding:18px;border-radius:24px;background:var(--md-surface-container-low)}
.ti{position:relative;width:56px;height:56px;flex:none;display:grid;place-items:center}
.ti .shp{position:absolute;inset:0;width:100%;height:100%}
.ti .ic{position:relative;width:26px;height:26px}
.tr:nth-child(1) .ti .shp path{fill:var(--acc-leaf-c)}.tr:nth-child(1) .ti .ic{fill:var(--on-acc-leaf-c)}
.tr:nth-child(2) .ti .shp path{fill:var(--acc-sun-c)}.tr:nth-child(2) .ti .ic{fill:var(--on-acc-sun-c)}
.tr:nth-child(3) .ti .shp path{fill:var(--md-tertiary-container)}.tr:nth-child(3) .ti .ic{fill:var(--md-on-tertiary-container)}
.tr:nth-child(4) .ti .shp path{fill:var(--acc-lav-c)}.tr:nth-child(4) .ti .ic{fill:var(--on-acc-lav-c)}
.tr b{display:block;font-size:16px;font-weight:var(--w-title)}
.tr span span{font-size:14px;color:var(--md-on-surface-variant)}
.faq-grid{display:flex;flex-wrap:wrap;gap:32px 64px;align-items:flex-start}
.faq-side{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.faq{flex:2 1 520px;min-width:0;display:flex;flex-direction:column;gap:4px}
.qa{background:var(--md-surface-container-low);border-radius:8px;transition:border-radius var(--d-def) var(--e-fast),background-color var(--d-fx-slow) var(--e-fx),color var(--d-fx-slow) var(--e-fx),margin var(--d-def) var(--e-def)}
.qa:first-child{border-radius:24px 24px 8px 8px}
.qa:last-child{border-radius:8px 8px 24px 24px}
.qa[open]{border-radius:24px;background:var(--md-secondary-container);color:var(--md-on-secondary-container);margin-block:8px}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:12px 14px 12px 24px;font-size:17px;font-weight:var(--w-title);border-radius:inherit}
.qa summary::-webkit-details-marker{display:none}
.qi{width:36px;height:36px;border-radius:18px;display:grid;place-items:center;background:var(--md-surface-container-highest);flex:none;transition:rotate var(--d-fast) var(--e-fast),background-color var(--d-fx) var(--e-fx),color var(--d-fx) var(--e-fx),border-radius var(--d-fast) var(--e-fast)}
.qi .ic{width:20px;height:20px}
.qa[open] .qi{rotate:180deg;background:var(--md-on-secondary-container);color:var(--md-secondary-container);border-radius:10px}
.ans{margin:0;padding:0 24px 22px;font-size:16px;line-height:1.6;max-width:720px}
.qa::details-content{block-size:0;overflow-y:clip;transition:block-size var(--d-def) var(--e-def),content-visibility var(--d-def) allow-discrete}
.qa[open]::details-content{block-size:auto}
.foot{background:var(--md-surface-container-high);color:var(--md-on-surface);border-radius:40px 40px 0 0}
.foot-in{padding-block:clamp(36px,5vw,64px) 24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:32px}
.foot-brand{grid-column:span 2;display:flex;flex-direction:column;gap:12px;max-width:360px}
.foot-brand .logo{padding:0}
.foot-brand p{margin:0;color:var(--md-on-surface-variant);font-size:15px;line-height:1.5}
.foot h4{margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--md-tertiary)}
.foot nav a{display:block;padding:6px 0;text-decoration:none;color:var(--md-on-surface-variant);font-size:15px}
.foot nav a:hover{color:var(--md-on-surface);text-decoration:underline}
.foot-bottom{border-top:1px solid var(--md-outline-variant);padding-block:18px 26px;display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center;font-size:13px;color:var(--md-on-surface-variant)}
.foot-bottom a{color:var(--md-on-surface)}
.made{display:inline-flex;align-items:center;gap:6px}
.made .shp{width:18px;height:18px}
.made .shp path{fill:var(--acc-berry)}
@media (max-width:640px){.foot-brand{grid-column:auto}.foot{border-radius:32px 32px 0 0}}
@media (prefers-reduced-motion:reduce){.rot>span{animation:none!important;opacity:0}.rot>span:first-child{opacity:1}.rot .rs{animation:none!important}.mq-track{animation:none}}
/* rev 3: on phones the filter chips scroll as one row instead of stacking seven rows */
@media (max-width:680px){#catChips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:4px 2px;margin:0 -2px 16px}#catChips::-webkit-scrollbar{display:none}}
/* owner (29 Oct night): pull the tilted marquee up over the bottom edge of the hero image so the tilt leaves no white wedge on the left */
.hcar + .mq-clip{position:relative;z-index:2;margin-top:-1.7vw}
.hcar:has(.hcar-nav) + .mq-clip{margin-top:4px}
#spend{font-size:16px}
/* 16) "No ID on your card?" explains first, then offers the blank-NFC link */
.linkb{background:none;border:0;padding:0;font:inherit;color:var(--md-primary);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.noid{margin-top:14px}
.noid-in{display:flex;gap:14px;align-items:flex-start;background:var(--md-surface-container-lowest);border-radius:20px;padding:16px 18px;color:var(--md-on-surface);text-align:left;animation:v5reveal var(--d-def) var(--e-def) both}
.noid-ic{width:44px;height:44px;border-radius:14px;background:var(--md-primary-container);color:var(--md-on-primary-container);display:grid;place-items:center;flex:none}
.noid-ic .ic{width:24px;height:24px}
.noid b{font-weight:var(--w-title)}
.noid p{margin:6px 0 12px;font-size:14px;line-height:1.5;color:var(--md-on-surface-variant)}
.noid .cta{gap:8px}
@media (max-width:599px){.noid-in{flex-direction:column;gap:10px}}

/* ── Bulk & corporate block (30 Oct 2026) ── */
.bulk{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,440px);gap:clamp(24px,4vw,56px);align-items:start}
@media (max-width:899px){.bulk{grid-template-columns:1fr}}
.bulk-copy{display:flex;flex-direction:column;gap:18px;align-items:flex-start;min-width:0}
/* ── Help-centre search in the FAQ ── */
.hs{position:relative;width:100%;max-width:440px}
.hs-field{display:flex;align-items:center;gap:8px;height:56px;padding:0 8px 0 18px;border-radius:28px;background:var(--md-surface-container-lowest);border:1.5px solid var(--md-outline-variant);transition:border-color var(--d-fx) var(--e-fx),box-shadow var(--d-fx) var(--e-fx)}
.hs-field:focus-within{border-color:var(--md-primary);box-shadow:0 0 0 3px var(--md-primary-container)}
.hs-field>.ic{width:22px;height:22px;color:var(--md-on-surface-variant);flex:0 0 auto}
.hs-field input{flex:1 1 0;width:0;min-width:0;border:0;background:transparent;font:inherit;font-size:16px;color:var(--md-on-surface);outline:0;height:100%;-webkit-appearance:none;appearance:none}
.hs-field input::-webkit-search-cancel-button,.hs-field input::-webkit-search-decoration{-webkit-appearance:none}
.hs-go{flex:0 0 40px;width:40px;height:40px;border-radius:50%;border:0;padding:0;background:var(--md-primary);color:var(--md-on-primary);display:grid;place-items:center;cursor:pointer}
.hs-go .ic{width:20px;height:20px}
.hs-drop{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:20;background:var(--md-surface-container-lowest);border-radius:20px;box-shadow:0 12px 32px rgba(0,0,0,.14);padding:8px;display:grid;gap:2px;max-height:380px;overflow:auto}
.hs-i{display:grid;gap:2px;padding:10px 12px;border-radius:14px;text-decoration:none;color:var(--md-on-surface)}
.hs-i b{font-size:15px;font-weight:var(--w-title)}
.hs-i small{font-size:13px;color:var(--md-on-surface-variant);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hs-i:hover,.hs-i.act{background:var(--md-surface-container-high)}
.hs-all{display:block;padding:10px 12px;border-radius:14px;font-size:14px;font-weight:var(--w-label);color:var(--md-primary);text-decoration:none}
.hs-all:hover,.hs-all.act{background:var(--md-surface-container-high)}
.faq-cta{display:flex;gap:10px;flex-wrap:wrap}
.qa-more{font-weight:var(--w-label);color:var(--md-primary);text-decoration:none;white-space:nowrap}
.qa-more:hover{text-decoration:underline}