/* celebboost · Onyx design system · see Design.md */
:root{
  --bg:#000;--card:#141414;--card-2:#1c1c1c;--border:#2a2a2a;--text:#fff;--muted:#a3a3a3;--faint:#737373;
  --cta-bg:#fff;--cta-text:#000;--chip-on-bg:#fff;--chip-on-text:#000;
  --blob-1:rgba(124,92,255,.30);--blob-2:rgba(225,48,108,.22);--blob-3:rgba(37,244,238,.18);
  --glass-bg:rgba(22,22,24,.62);--glass-bg-2:rgba(34,34,38,.55);--glass-border:rgba(255,255,255,.08);--glass-hi:rgba(255,255,255,.10);
  --clay:0 12px 32px rgba(0,0,0,.38),inset 0 1px 0 var(--glass-hi),inset 0 -8px 16px rgba(0,0,0,.28);
  --clay-sm:0 6px 16px rgba(0,0,0,.30),inset 0 1px 0 var(--glass-hi),inset 0 -4px 8px rgba(0,0,0,.22);
  --clay-cta:0 10px 24px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -6px 12px rgba(0,0,0,.10);
  --r-card:22px;--r-input:16px;--r-tile:18px;--gutter:20px;--container:1120px;
  --font:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f5f5f7;--card:#fff;--card-2:#f0f0f2;--border:#e4e4e8;--text:#0a0a0a;--muted:#6b6b70;--faint:#9a9aa0;
  --cta-bg:#0a0a0a;--cta-text:#fff;--chip-on-bg:#0a0a0a;--chip-on-text:#fff;
  --blob-1:rgba(124,92,255,.16);--blob-2:rgba(225,48,108,.14);--blob-3:rgba(37,244,238,.18);
  --glass-bg:rgba(255,255,255,.62);--glass-bg-2:rgba(255,255,255,.5);--glass-border:rgba(20,20,40,.07);--glass-hi:rgba(255,255,255,.95);
  --clay:0 12px 28px rgba(20,20,40,.09),inset 0 1px 0 var(--glass-hi),inset 0 -8px 16px rgba(20,20,40,.05);
  --clay-sm:0 6px 14px rgba(20,20,40,.08),inset 0 1px 0 var(--glass-hi),inset 0 -4px 8px rgba(20,20,40,.04);
  --clay-cta:0 10px 24px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -6px 12px rgba(0,0,0,.35);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.5;min-height:100vh;padding-bottom:calc(118px + env(safe-area-inset-bottom,0px));transition:background-color .35s ease,color .35s ease}
a{color:inherit}
button{font-family:inherit}
.container{width:100%;max-width:var(--container);margin:0 auto;padding-inline:var(--gutter)}

/* ambient background */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bg__blob{position:absolute;width:60vmax;height:60vmax;border-radius:999px;filter:blur(60px);opacity:1;will-change:transform;transform:translate3d(0,0,0)}
.bg__blob--1{left:-20vmax;top:-25vmax;background:radial-gradient(circle at center,var(--blob-1),transparent 60%);animation:drift1 30s ease-in-out infinite alternate}
.bg__blob--2{right:-25vmax;top:10vh;background:radial-gradient(circle at center,var(--blob-2),transparent 60%);animation:drift2 38s ease-in-out infinite alternate}
.bg__blob--3{left:10vw;bottom:-30vmax;background:radial-gradient(circle at center,var(--blob-3),transparent 60%);animation:drift3 26s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate3d(18vw,12vh,0) scale(1.15)}}
@keyframes drift2{to{transform:translate3d(-16vw,18vh,0) scale(.9)}}
@keyframes drift3{to{transform:translate3d(14vw,-14vh,0) scale(1.1)}}
@media (min-width:900px){.bg__blob{filter:blur(90px)}}
@media (prefers-reduced-motion:reduce){.bg__blob{animation:none}}
.topbar,.page,.footer,.bottomnav{position:relative;z-index:1}
.page{z-index:auto}   /* no stacking context: the fixed pay bar inside <main> must sit above the footer */
.footer{z-index:0}

/* top bar */
.topbar{padding:18px 0 8px}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{font-weight:800;font-size:18px;letter-spacing:-.02em;text-decoration:none}
.topnav{display:none;gap:28px;font-weight:600;font-size:14px;color:var(--muted)}
.topnav a{text-decoration:none;color:inherit}
.topnav a:hover{color:var(--text)}
.topbar__actions{display:flex;gap:8px}
.iconbtn{width:44px;height:44px;border-radius:999px;border:1px solid var(--glass-border);background:var(--glass-bg);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);box-shadow:var(--clay-sm);color:var(--text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;transition:transform .15s ease,background-color .35s ease}
.iconbtn:active{transform:scale(.94)}
:root[data-theme="dark"] .ico--sun{display:none}
:root[data-theme="light"] .ico--moon{display:none}

/* stories */
.stories{margin:4px calc(var(--gutter) * -1) 0}
.stories__row{display:flex;gap:14px;overflow-x:auto;padding:8px var(--gutter) 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.stories__row::-webkit-scrollbar{display:none}
.story{flex:0 0 auto;width:72px;display:flex;flex-direction:column;align-items:center;gap:7px;border:0;background:transparent;padding:0;color:var(--text);text-decoration:none;font-family:inherit;cursor:pointer;scroll-snap-align:start;transition:transform .15s ease}
.story:active{transform:scale(.94)}
.story__ring{width:68px;height:68px;border-radius:999px;padding:3px;background:var(--glass-border);display:flex;position:relative;transition:background .3s ease}
.story__ring--live{background:conic-gradient(from 200deg,var(--ring),#ff7ac6 35%,#ffd36e 60%,var(--ring))}
.story--platform .story__ring{background:linear-gradient(135deg,rgba(255,255,255,.35),rgba(255,255,255,.08))}
.story__in{width:100%;height:100%;border-radius:999px;background:var(--bg);border:2.5px solid var(--bg);display:flex;align-items:center;justify-content:center;overflow:hidden}
.story__in img,.story__dot{width:100%;height:100%;border-radius:999px;object-fit:cover;background:var(--card-2);display:block}
.story__dot{background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.35),transparent 60%),var(--ring)}
.story--live.is-seen .story__ring{background:var(--glass-border)}
.story--live:not(.is-seen)::after{content:"";position:absolute;top:2px;right:6px;width:10px;height:10px;border-radius:999px;background:#22c55e;border:2px solid var(--bg)}
.story{position:relative}
.story:focus{outline:none}
.story:focus-visible .story__ring{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--text)}
.story__label{font-size:11px;font-weight:600;max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.story--live:not(.is-seen) .story__label{color:var(--text)}
.stories__empty{display:none}
.picon{width:var(--picon-size,44px);height:var(--picon-size,44px);border-radius:30%;background:var(--picon-bg);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;position:relative;overflow:hidden;isolation:isolate;
  /* premium 3D tile: bright top edge, darker bottom lip, hairline rim, deep drop shadow and a brand-coloured glow */
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.55),inset 0 -2.5px 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1),0 6px 14px -4px rgba(0,0,0,.45),0 12px 26px -10px color-mix(in srgb,var(--picon-glow,#000) 70%,transparent)}
.picon::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 62% at 50% -12%,rgba(255,255,255,.5),rgba(255,255,255,.14) 52%,rgba(255,255,255,0) 60%);pointer-events:none}
.picon::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0) 60%,rgba(0,0,0,.14));pointer-events:none}
.picon svg{width:58%;height:58%;position:relative;z-index:1;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.35))}
[data-theme="light"] .picon{box-shadow:inset 0 1.5px 0 rgba(255,255,255,.6),inset 0 -2.5px 4px rgba(0,0,0,.22),inset 0 0 0 1px rgba(255,255,255,.15),0 5px 12px -4px rgba(0,0,0,.28),0 12px 26px -10px color-mix(in srgb,var(--picon-glow,#000) 55%,transparent)}
.picon--snapchat svg{filter:none}

/* hero */
.hero{padding:18px 0 6px}
.hero__title{margin:0;font-weight:800;font-size:28px;line-height:1.08;letter-spacing:-.025em}
.hero__sub{margin:10px 0 0;color:var(--muted);font-size:15px;max-width:560px}

/* chips */
.chips{display:flex;gap:8px;overflow-x:auto;padding:16px 0 10px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--glass-border);color:var(--muted);font-size:13px;font-weight:600;display:inline-flex;align-items:center;text-decoration:none;background:var(--glass-bg-2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background-color .2s ease,color .2s ease}
.chip.is-on{background:var(--chip-on-bg);color:var(--chip-on-text);border-color:transparent;font-weight:700;box-shadow:var(--clay-cta)}

/* cards + grid */
.card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--r-card);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:var(--clay);transition:background-color .35s ease,box-shadow .35s ease}
@supports not (backdrop-filter:blur(1px)){.card,.story,.iconbtn,.chip{background:var(--card)}}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pkg{padding:18px;min-height:178px;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none;color:var(--text);transition:transform .15s ease,background-color .35s ease}
.pkg:active{transform:scale(.97)}
.pkg__top{display:flex;justify-content:space-between;align-items:center}
.badge{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:5px 8px;border-radius:999px;background:var(--glass-bg-2);border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 var(--glass-hi)}
.pkg__mid{display:flex;flex-direction:column;gap:4px}
.pkg__qty{font-weight:800;font-size:28px;letter-spacing:-.02em;line-height:1}
.pkg__name{font-size:13px;color:var(--muted)}
.pkg__price{font-weight:700;font-size:16px}
.empty{padding:28px 20px;display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center}
.empty__title{font-weight:700}
.empty__sub{font-size:13px;color:var(--muted)}

/* steps */
.howto{display:grid;grid-template-columns:1fr;gap:10px;margin-top:22px}
.step{padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.step__t{font-weight:700;font-size:14px}
.step__s{font-size:13px;color:var(--muted)}

/* footer + bottom nav */
.footer{position:relative;display:block;padding:30px var(--gutter) calc(22px + env(safe-area-inset-bottom,0px));font-size:13px;color:var(--muted);margin-top:32px}
.footer::before{content:"";position:absolute;left:var(--gutter);right:var(--gutter);top:0;height:1px;background:linear-gradient(90deg,transparent,var(--glass-border) 20%,var(--glass-border) 80%,transparent)}
.bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,transparent,var(--bg) 40%)}
/* segmented control: one rounded track, a highlight that slides under the active tab, the + kept as the raised centre button */
.bottomnav__seg{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;height:64px;box-sizing:border-box;padding:6px;border-radius:22px;background:var(--glass-bg);border:1px solid var(--glass-border);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 12px 30px -14px rgba(0,0,0,.5)}
.bottomnav__slider{position:absolute;top:6px;bottom:6px;width:calc(20% - 2.4px);left:6px;border-radius:16px;background:var(--chip-on-bg);opacity:0;transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .2s ease;pointer-events:none}
.bottomnav[data-i="0"] .bottomnav__slider{opacity:1;transform:translateX(0)}
.bottomnav[data-i="1"] .bottomnav__slider{opacity:1;transform:translateX(100%)}
.bottomnav[data-i="3"] .bottomnav__slider{opacity:1;transform:translateX(300%)}
.bottomnav[data-i="4"] .bottomnav__slider{opacity:1;transform:translateX(400%)}
.bottomnav__item{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:52px;color:var(--faint);text-decoration:none;font-size:11px;font-weight:600;border-radius:16px;transition:color .2s ease}
.bottomnav__item.is-active{color:var(--chip-on-text)}
.bottomnav__fab + .bottomnav__item{grid-column:4}.bottomnav__fab + .bottomnav__item + .bottomnav__item{grid-column:5}
.bottomnav__fab{position:absolute;z-index:2;left:50%;top:-14px;transform:translateX(-50%);width:56px;height:56px;border-radius:999px;background:var(--cta-bg);color:var(--cta-text);display:flex;align-items:center;justify-content:center;box-shadow:var(--clay-cta),0 0 0 6px var(--bg);transition:transform .15s ease}
.bottomnav__fab:active{transform:translateX(-50%) scale(.94)}

/* CTA */
.cta{display:flex;align-items:center;justify-content:center;height:56px;border-radius:999px;background:var(--cta-bg);color:var(--cta-text);font-weight:800;font-size:15px;letter-spacing:.02em;text-decoration:none;border:0;cursor:pointer;box-shadow:var(--clay-cta);transition:transform .15s ease}
.cta:active{transform:translateY(1px) scale(.99)}

/* tablet / desktop */
@media (min-width:640px){:root{--gutter:32px}.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.howto{grid-template-columns:repeat(3,1fr)}}
@media (min-width:900px){
  :root{--gutter:48px}
  body{padding-bottom:0}
  .topbar{padding:26px 0 10px}.topnav{display:flex}
  .hero{padding:40px 0 10px}.hero__title{font-size:44px}.hero__sub{font-size:17px}
  .grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .story{width:84px;height:98px}
  .footer{padding:40px var(--gutter) 28px;margin-top:40px}
  .bottomnav{display:none}
}

/* ---------- sub-pages: platform picker + checkout ---------- */
.subhead{display:flex;align-items:center;justify-content:space-between;padding:8px 0 4px}
.backlink{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:15px;text-decoration:none;min-width:72px}
.subhead__title{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:16px}
.subhead__spacer{min-width:72px}
.picker{display:flex;flex-direction:column;gap:22px;padding-top:10px}
.picker__main{display:flex;flex-direction:column;gap:22px}
.pick{display:flex;flex-direction:column;gap:10px}
.pick__label,.label{display:block;font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;-webkit-user-select:none;user-select:none}
.label{margin-bottom:6px}.label .field-hint{text-transform:none;letter-spacing:0}
.chips--wrap{flex-wrap:wrap;overflow:visible;padding:0}
.chips--tight{gap:6px}
.chip--lg{height:40px;padding:0 16px;font-size:14px}
.chip--static{height:32px;padding:0 12px;font-size:12px;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.tier-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tier-grid[data-count="1"]{grid-template-columns:minmax(0,1fr)}
.tier-grid[data-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.tier-grid[data-count="3"] .tier{padding:10px 8px}

.tier-grid[data-count="4"],.tier-grid[data-count="5"],.tier-grid[data-count="6"]{display:flex;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;margin:0 calc(var(--gutter) * -1);padding:2px var(--gutter) 6px}
.tier-grid[data-count="4"]::-webkit-scrollbar,.tier-grid[data-count="5"]::-webkit-scrollbar,.tier-grid[data-count="6"]::-webkit-scrollbar{display:none}
.tier-grid[data-count="4"] .tier,.tier-grid[data-count="5"] .tier,.tier-grid[data-count="6"] .tier{flex:0 0 auto;min-width:150px;scroll-snap-align:start}
.tier{container-type:inline-size}
.tier__t,.tier__s{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (min-width:640px){.tier-grid[data-count="4"]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;overflow:visible}.tier-grid[data-count="4"] .tier{min-width:0}}
@media (min-width:900px){.tier-grid[data-count="5"],.tier-grid[data-count="6"]{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:0;padding:0;overflow:visible}.tier-grid[data-count="5"] .tier,.tier-grid[data-count="6"] .tier{min-width:0}}
.tier{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:58px;padding:10px 14px;border-radius:var(--r-input);background:var(--glass-bg);border:2px solid var(--glass-border);box-shadow:var(--clay-sm);text-decoration:none;color:var(--text);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:border-color .15s ease}
.tier.is-on{border-color:var(--text)}
.tier__t{font-weight:700;font-size:14px}
.tier__s{font-size:11px;color:var(--muted)}
.amount-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.amt{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:64px;border-radius:var(--r-input);background:var(--glass-bg);border:2px solid var(--glass-border);box-shadow:var(--clay-sm);text-decoration:none;color:var(--text);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:border-color .15s ease,transform .15s ease}
.amt:active{transform:scale(.96)}
.amt.is-on{border-color:var(--text)}
.amt__q{font-weight:800;font-size:17px;letter-spacing:-.01em}
.amt__p{font-size:12px;color:var(--muted)}
.amt.is-on .amt__p{color:var(--text)}
.amt__star{position:absolute;top:-8px;right:-4px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--card);box-shadow:var(--clay-sm);border:1px solid var(--glass-border)}
.info{padding:14px 16px;display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--muted)}
.info__row{display:flex;align-items:center;gap:10px}
.info__row svg{color:var(--text);flex:0 0 auto}
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:5;border-radius:var(--r-card) var(--r-card) 0 0;padding:14px var(--gutter) calc(20px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:10px}
.sticky__row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sticky__desc{font-size:13px;color:var(--muted)}
.sticky__price{font-weight:800;font-size:22px}
.cta.is-disabled{opacity:.45;pointer-events:none}
body.has-sticky{padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))}
body.has-sticky .bottomnav{display:none}
.summary{display:flex;gap:14px;padding:16px;align-items:flex-start}
.summary__thumb{width:96px;height:96px;border-radius:var(--r-tile);background:var(--glass-bg-2);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.summary__body{display:flex;flex-direction:column;gap:8px;flex-grow:1}
.summary__title{font-weight:700;font-size:15px}
.summary__price{font-weight:800;font-size:20px}
@media (min-width:900px){
  .picker{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:32px;align-items:start}
  .sticky{position:sticky;top:24px;left:auto;right:auto;bottom:auto;border-radius:var(--r-card);padding:20px}
  body.has-sticky{padding-bottom:0}
  .amount-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---------- forms ---------- */
.input{width:100%;height:54px;border-radius:var(--r-input);border:1px solid var(--glass-border);background:var(--glass-bg);color:var(--text);padding:0 16px;font-size:16px;font-family:inherit;box-shadow:var(--clay-sm);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);outline:none;transition:border-color .15s ease}
.input:focus{border-color:var(--text)}
.input.is-error{border-color:#f43f5e}
.input::placeholder{color:var(--faint)}
.field-hint{font-size:12px;color:var(--faint)}
.field-error{font-size:12px;color:#f43f5e;font-weight:600}
.field-error[hidden],.field-hint[hidden]{display:none!important}
.paywith{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pay{position:relative;display:block;cursor:pointer}
.pay input{position:absolute;opacity:0;width:1px;height:1px}
.pay__box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:72px;border-radius:var(--r-input);background:var(--glass-bg);border:2px solid var(--glass-border);box-shadow:var(--clay-sm);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:border-color .15s ease}
.pay input:checked + .pay__box{border-color:var(--text)}
.pay input:focus-visible + .pay__box{outline:2px solid var(--text);outline-offset:2px}
.pay__t{font-weight:700;font-size:14px;margin-top:2px}
.pay__s{font-size:11px;color:var(--muted)}
.hp{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}
.sticky__note{text-align:center;font-size:11px;color:var(--faint)}
.cta:disabled{opacity:.45;cursor:not-allowed}

/* ---------- order tracking ---------- */
.stack{display:flex;flex-direction:column;gap:14px;padding-top:10px}
.track{padding:20px;display:flex;flex-direction:column;gap:12px}
.track__top{display:flex;justify-content:space-between;align-items:center}
.track__id{font-size:12px;color:var(--muted)}
.pill{height:28px;padding:0 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;display:inline-flex;align-items:center}
.pill--wait{background:rgba(250,204,21,.16);color:#d4a90a}
.pill--go{background:rgba(59,130,246,.18);color:#60a5fa}
.pill--ok{background:rgba(34,197,94,.18);color:#22c55e}
.pill--warn{background:rgba(249,115,22,.18);color:#fb923c}
.pill--off{background:var(--glass-bg-2);color:var(--muted)}
.track__count{display:flex;align-items:baseline;gap:8px}
.track__big{font-weight:800;font-size:34px;letter-spacing:-.02em;line-height:1}
.track__of{font-size:16px;font-weight:600;color:var(--muted)}
.track__what{font-size:13px;color:var(--muted);margin-top:-6px}
.progress{height:8px;border-radius:999px;background:var(--glass-bg-2);overflow:hidden;border:1px solid var(--glass-border)}
.progress__bar{height:100%;border-radius:999px;background:var(--text);transition:width .6s ease}
.track__meta{display:flex;justify-content:space-between;font-size:12px;color:var(--faint)}
.pay-cta{padding:18px 20px;display:flex;flex-direction:column;gap:8px;align-items:stretch}
.pay-cta__t{font-weight:700;font-size:15px}
.pay-cta__s{font-size:13px;color:var(--muted)}
.timeline{padding:20px;display:flex;flex-direction:column}
.tl{display:flex;gap:14px;align-items:flex-start;position:relative;padding-bottom:18px}
.tl--last{padding-bottom:0}
.tl:not(.tl--last)::before{content:"";position:absolute;left:10px;top:24px;bottom:0;width:2px;background:var(--glass-border)}
.tl__dot{width:22px;height:22px;border-radius:999px;border:2px solid var(--glass-border);box-sizing:border-box;flex:0 0 auto;background:transparent;position:relative;z-index:1}
.tl__dot.is-done{background:var(--text);border-color:var(--text)}
.tl__dot.is-done::after{content:"";position:absolute;left:6px;top:3px;width:5px;height:9px;border:solid var(--bg);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.tl__body{display:flex;flex-direction:column;gap:2px}
.tl__t{font-weight:700;font-size:14px}
.tl__t.is-muted{color:var(--muted)}
.tl__s{font-size:12px;color:var(--faint)}
.target{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;text-decoration:none;color:var(--text)}
.target__body{display:flex;flex-direction:column;gap:2px;min-width:0}
.target__t{font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.target__s{font-size:12px;color:var(--faint)}
.target svg{color:var(--faint);flex:0 0 auto}
.actions{display:flex;flex-direction:column;gap:10px;padding-top:6px}
.btn-ghost{display:flex;align-items:center;justify-content:center;height:48px;border-radius:999px;border:1px solid var(--glass-border);color:var(--text);font-weight:600;font-size:14px;text-decoration:none;background:var(--glass-bg-2)}
@media (min-width:900px){.stack{max-width:560px}}

/* ---------- checkout profile preview ---------- */
.preview{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-input);background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:var(--clay-sm);margin-top:8px}
.preview[hidden]{display:none}
.preview__avatar{width:44px;height:44px;border-radius:999px;object-fit:cover;flex:0 0 auto;background:var(--glass-bg-2)}
.preview__avatar--ph{display:flex}
.preview__body{display:flex;flex-direction:column;gap:2px;min-width:0;flex-grow:1}
.preview__title{font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.preview__sub{font-size:12px;color:var(--muted)}
.preview__state{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 8px;border-radius:999px;background:var(--glass-bg-2);color:var(--muted);flex:0 0 auto}
.preview.is-ok .preview__state{background:rgba(34,197,94,.18);color:#22c55e}
.preview.is-bad .preview__state{background:rgba(244,63,94,.18);color:#f43f5e}
.preview.is-loading .preview__state{opacity:.6}
.fixbox{display:grid;grid-template-columns:34px minmax(0,1fr);gap:4px 10px;margin-top:10px;padding:12px 14px 12px 12px;border-radius:var(--r-input);background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.4)}
.fixbox[hidden]{display:none}
.fixbox--bad{background:rgba(244,63,94,.07);border-color:rgba(244,63,94,.35)}
.fixbox__ic{grid-row:1/span 3;width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f59e0b,#f97316);color:#fff;box-shadow:0 6px 14px rgba(245,158,11,.25)}
.fixbox--bad .fixbox__ic{background:linear-gradient(135deg,#f43f5e,#e11d48);box-shadow:0 6px 14px rgba(244,63,94,.25)}
.fixbox__t{font-size:13.5px;font-weight:800;color:var(--text);line-height:1.3;align-self:center}
.fixbox__msg{margin:0;font-size:12.5px;color:var(--muted);line-height:1.45}
.fixbox__steps{margin:4px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--text);line-height:1.4}
.fixbox__steps li::marker{color:var(--faint);font-weight:700}
.fixbox__steps:empty{display:none}
.fixbox__btn{grid-column:2;display:inline-flex;align-items:center;justify-content:center;gap:8px;justify-self:start;margin-top:8px;height:40px;padding:0 16px;border-radius:999px;border:0;background:var(--cta-bg);color:var(--cta-text);font:inherit;font-size:13px;font-weight:800;cursor:pointer;box-shadow:var(--clay-cta)}
.fixbox__btn[hidden]{display:none}
.fixbox__btn:disabled{opacity:.6;cursor:wait}
.fixbox__btn.is-busy svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:420px){.fixbox__btn{justify-self:stretch}}

/* ---------- story viewer ---------- */
.sv{position:fixed;inset:0;z-index:50;display:none;background:#000;color:#fff;font-family:var(--font);overflow:hidden}
.sv.is-open{display:block}
.sv__bg{position:absolute;inset:0;background:#111;transition:background .2s ease}
.sv__bg.is-blur{filter:blur(28px) saturate(1.2) brightness(.6);transform:scale(1.15)}
.sv__img{position:absolute;inset:0;z-index:1;background:center/contain no-repeat;pointer-events:none}
.sv__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 62%,rgba(0,0,0,.7) 100%)}
.sv__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 60%,rgba(0,0,0,.75) 100%)}
.sv__bars{position:absolute;left:12px;right:12px;top:calc(14px + env(safe-area-inset-top,0px));display:flex;gap:4px;z-index:3}
.sv__bar{flex-grow:1;height:3px;border-radius:999px;background:rgba(255,255,255,.35);overflow:hidden}
.sv__bar i{display:block;height:100%;width:0;background:#fff}
.sv__head{position:absolute;left:16px;right:16px;top:calc(30px + env(safe-area-inset-top,0px));display:flex;align-items:center;gap:10px;z-index:3}
.sv__ring{width:34px;height:34px;border-radius:999px;background:#fff;overflow:hidden;flex:0 0 auto}
.sv__ring img{width:100%;height:100%;object-fit:cover}
.sv__title{font-weight:700;font-size:14px;flex-grow:1}
.sv__sound,.sv__close{height:34px;border:0;border-radius:999px;background:rgba(255,255,255,.18);color:#fff;font-family:inherit;font-weight:700;font-size:12px;padding:0 12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;backdrop-filter:blur(10px)}
.sv__close{width:34px;padding:0;justify-content:center}
.sv__sound[hidden]{display:none}
.sv__text{position:absolute;left:28px;right:28px;z-index:2;text-align:center;font-weight:800;font-size:32px;line-height:1.1;letter-spacing:-.02em;text-shadow:0 4px 24px rgba(0,0,0,.6);white-space:pre-line}
.sv__text--top{top:110px}.sv__text--center{top:50%;transform:translateY(-50%)}.sv__text--bottom{bottom:130px}
.sv__cta{position:absolute;left:20px;right:20px;bottom:calc(28px + env(safe-area-inset-bottom,0px));z-index:3;display:flex;align-items:center;justify-content:center;gap:10px;height:56px;border-radius:999px;background:rgba(255,255,255,.92);color:#0a0a0a;font-weight:800;font-size:15px;letter-spacing:.02em;text-decoration:none;border:1px solid rgba(255,255,255,.6);box-shadow:0 12px 30px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);overflow:hidden;transition:transform .15s ease}
.sv__cta:active{transform:scale(.97)}
.sv__cta::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(0,0,0,.08),transparent);animation:sv-shine 2.8s ease-in-out infinite}
.sv__cta svg{flex:0 0 auto;width:30px;height:30px;padding:6px;border-radius:999px;background:#0a0a0a;color:#fff}
@keyframes sv-shine{0%{left:-60%}60%{left:120%}100%{left:120%}}
.sv__cta[hidden]{display:none}
.sv__tap{position:absolute;top:80px;bottom:110px;width:50%;z-index:2;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sv__tap--l{left:0}.sv__tap--r{right:0}
@media (min-width:640px){.sv__bg,.sv__img{left:50%;transform:translateX(-50%);width:min(100vw,56.25vh * 1);max-width:480px;inset:0 auto 0 50%}.sv__bars,.sv__head,.sv__text,.sv__cta,.sv__tap{max-width:480px;margin-inline:auto}.sv__bars,.sv__head{left:calc(50% - 228px);right:auto;width:456px}.sv__text{left:calc(50% - 212px);right:auto;width:424px}.sv__cta{left:calc(50% - 220px);right:auto;width:440px}.sv__tap--l{left:calc(50% - 240px);width:240px}.sv__tap--r{right:calc(50% - 240px);width:240px}.sv__bg.is-blur{transform:translateX(-50%) scale(1.15)}}

/* ---------- form controls: selects, file, color, date ---------- */
select.input{appearance:none;-webkit-appearance:none;padding-right:44px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='2.4'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 16px center;cursor:pointer}
select.input option{background:var(--card);color:var(--text)}
input[type=file].input{padding:0 16px;display:flex;align-items:center;cursor:pointer;color:var(--muted);font-size:13px}
input[type=file].input::file-selector-button{margin-right:12px;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--glass-border);background:var(--chip-on-bg);color:var(--chip-on-text);font-family:inherit;font-weight:700;font-size:12px;cursor:pointer}
input[type=color].input{padding:8px;cursor:pointer}
input[type=color].input::-webkit-color-swatch-wrapper{padding:0}
input[type=color].input::-webkit-color-swatch{border:0;border-radius:10px}
input[type=date].input,input[type=datetime-local].input{color-scheme:dark}
:root[data-theme="light"] input[type=date].input,:root[data-theme="light"] input[type=datetime-local].input{color-scheme:light}
input[type=search].input::-webkit-search-cancel-button{-webkit-appearance:none;width:14px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='2.4'><path d='M6 6l12 12M18 6L6 18'/></svg>") center/contain no-repeat;cursor:pointer}

/* ---------- toasts ---------- */
.toasts{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));right:14px;left:14px;z-index:60;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{pointer-events:auto;margin-left:auto;width:min(100%,420px);display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:var(--r-input);background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:var(--clay);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);font-size:14px;font-weight:600;color:var(--text);animation:toast-in .25s ease}
.toast__dot{width:10px;height:10px;border-radius:999px;margin-top:6px;flex:0 0 auto}
.toast__x{margin-left:auto;border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:18px;line-height:1;padding:0 2px;font-family:inherit}
.toast.is-leaving{animation:toast-out .2s ease forwards}
@keyframes toast-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateY(-8px)}}

/* ---------- modal (confirm) ---------- */
.modal{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal.is-open{display:flex}
.modal__card{width:100%;max-width:420px;padding:24px;display:flex;flex-direction:column;gap:14px;animation:toast-in .2s ease}
.modal__t{font-weight:800;font-size:18px;letter-spacing:-.01em}
.modal__s{font-size:14px;color:var(--muted);line-height:1.5}
.modal__actions{display:flex;gap:10px;justify-content:flex-end;padding-top:4px}
.modal__actions .btn{height:44px}

/* ---------- dropdown list (search pickers) ---------- */
.dd{position:relative}
.dd__list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;max-height:280px;overflow:auto;padding:6px;border-radius:var(--r-input);background:var(--card);border:1px solid var(--glass-border);box-shadow:var(--clay);display:none}
.dd__list.is-open{display:block}
.dd__item{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;cursor:pointer}
.dd__item:hover,.dd__item.is-active{background:var(--glass-bg-2)}
.dd__name{font-weight:600;font-size:14px}
.dd__meta{font-size:12px;color:var(--muted)}
.dd__empty{padding:12px;font-size:13px;color:var(--faint)}

/* ---------- error pages ---------- */
.errpage{min-height:calc(100vh - 220px);display:flex;align-items:center;justify-content:center;padding:24px 0 40px}
.errpage__card{width:100%;max-width:520px;padding:clamp(28px,7vw,44px) clamp(20px,6vw,40px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.errpage__ic{width:56px;height:56px;border-radius:18px;background:var(--glass-bg-2);border:1px solid var(--glass-border);display:flex;align-items:center;justify-content:center;color:var(--text);margin-bottom:6px}
.errpage__code{font-family:'Unbounded',var(--font);font-weight:800;font-size:clamp(44px,12vw,64px);letter-spacing:-.04em;line-height:1;color:var(--text);opacity:.14}
.errpage__title{margin:-6px 0 0;font-weight:800;font-size:clamp(22px,6vw,28px);letter-spacing:-.02em}
.errpage__body{margin:0 0 10px;color:var(--muted);max-width:380px;font-size:clamp(14px,3.8vw,15px);line-height:1.55}
.errpage__actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;width:100%}
.errpage__actions .cta,.errpage__actions .btn-ghost{flex:1 1 150px;max-width:220px}
.errpage__links{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--glass-border);width:100%;font-size:13px}
.errpage__links a{color:var(--muted);text-decoration:none}
.errpage__links a:hover{color:var(--text)}
body.is-error{padding-bottom:0}

/* ---------- checkout v2 (shadcn-inspired) ---------- */
.steps{list-style:none;margin:6px 0 0;padding:0;display:flex;align-items:center;gap:0}
.steps__item{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--faint);flex:1 1 0}
.steps__item:not(:last-child)::after{content:"";flex-grow:1;height:1px;background:var(--glass-border);margin:0 10px}
.steps__dot{width:26px;height:26px;border-radius:999px;border:1.5px solid var(--glass-border);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex:0 0 auto;background:var(--glass-bg)}
.steps__item.is-done{color:var(--muted)}
.steps__item.is-done .steps__dot{background:var(--chip-on-bg);color:var(--chip-on-text);border-color:transparent}
.steps__item.is-on{color:var(--text)}
.steps__item.is-on .steps__dot{border-color:var(--text);color:var(--text)}
.fieldset{padding:18px 18px 16px;display:flex;flex-direction:column;gap:14px}
.fieldset__head{display:flex;flex-direction:column;gap:2px}
.fieldset__t{font-weight:800;font-size:16px;letter-spacing:-.01em}
.fieldset__s{font-size:13px;color:var(--muted)}
.inwrap{position:relative}
.inwrap__icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);display:flex;pointer-events:none}
.input--icon{padding-left:48px}
.input:focus-visible{outline:none;border-color:var(--text);box-shadow:0 0 0 3px color-mix(in srgb,var(--text) 12%,transparent)}
.inwrap__state{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:999px;display:flex;align-items:center;justify-content:center}
.inwrap__state[hidden]{display:none}
.inwrap__state.is-ok{background:rgba(34,197,94,.18);color:#22c55e}
.inwrap__state.is-bad{background:rgba(244,63,94,.18);color:#f43f5e}
.inwrap__state.is-loading{border:2px solid var(--glass-border);border-top-color:var(--text);animation:spin .8s linear infinite}
@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}
.preview--rich{align-items:flex-start}
.preview--rich .preview__avatar{width:52px;height:52px}
.preview__stats{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.preview__stat{font-size:11px;font-weight:700;padding:4px 8px;border-radius:999px;background:var(--glass-bg-2);border:1px solid var(--glass-border)}
.preview__stat b{font-weight:800}
.summary--acc{padding:0;overflow:hidden}
.summary--acc summary{list-style:none;cursor:pointer}
.summary--acc summary::-webkit-details-marker{display:none}
.summary__row{display:flex;align-items:center;gap:12px;padding:14px 16px}
.summary__thumb{width:52px;height:52px;border-radius:14px}
.summary__sub{font-size:12px;color:var(--muted)}
.summary__price{font-weight:800;font-size:17px;margin-left:auto}
.summary__chev{color:var(--muted);transition:transform .2s ease;flex:0 0 auto}
.summary--acc[open] .summary__chev{transform:rotate(180deg)}
.summary__detail{display:flex;flex-direction:column;gap:8px;padding:4px 16px 14px;border-top:1px solid var(--glass-border)}
.kvrow{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);padding-top:8px}
.kvrow span:last-child{color:var(--text);font-weight:600}
.kvrow--total{border-top:1px solid var(--glass-border);padding-top:10px;font-weight:700}
.kvrow--total span:last-child{font-weight:800;font-size:15px}
.strike{text-decoration:line-through;color:var(--faint)!important;font-weight:500!important}
.paywith--1{grid-template-columns:1fr}
.pay__box{position:relative;align-items:flex-start;padding:14px 16px;height:auto;min-height:72px;gap:4px}
.pay__box svg{color:var(--text)}
.pay__check{position:absolute;right:12px;top:12px;width:20px;height:20px;border-radius:999px;border:1.5px solid var(--glass-border);display:flex;align-items:center;justify-content:center;color:transparent}
.pay input:checked + .pay__box .pay__check{background:var(--chip-on-bg);color:var(--chip-on-text);border-color:transparent}
.trust{list-style:none;margin:0;padding:4px 4px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;font-size:12px;color:var(--muted)}
.trust li{display:flex;align-items:center;gap:8px}
.trust svg{color:var(--text);flex:0 0 auto}
.cta--loading-able{position:relative}
.cta__spin{display:none;width:18px;height:18px;border-radius:999px;border:2.5px solid rgba(0,0,0,.25);border-top-color:var(--cta-text);animation:spin2 .8s linear infinite;margin-left:10px}
@keyframes spin2{to{transform:rotate(360deg)}}
.cta.is-loading{opacity:.85;pointer-events:none}
.cta.is-loading .cta__spin{display:inline-block}
@media (min-width:900px){.summary--acc .summary__chev{display:none}.summary--acc summary{pointer-events:none}.trust{grid-template-columns:repeat(4,minmax(0,1fr))}}
.summary--acc{display:block;padding:0}
.summary--acc .summary__row .summary__body{gap:2px}

/* ---------- order tracking v2 ---------- */
.hero-status{padding:20px;display:flex;align-items:center;gap:18px}
.ring{position:relative;width:112px;height:112px;flex:0 0 auto}
.ring>svg{transform:rotate(-90deg)}
.ring__label svg{transform:none;color:#22c55e}
.ring__track{fill:none;stroke:var(--glass-bg-2);stroke-width:8}
.ring__bar{fill:none;stroke:var(--text);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset .8s ease}
.ring__label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;letter-spacing:-.02em}
.hero-status__body{display:flex;flex-direction:column;gap:6px;min-width:0}
.hero-status__body .pill{align-self:flex-start}
.hero-status__t{font-weight:800;font-size:22px;letter-spacing:-.02em;line-height:1.1}
.hero-status__s{font-size:13px;color:var(--muted)}
.hero-status__count{font-size:13px;color:var(--muted);margin-top:2px}
.hero-status__count b{color:var(--text);font-size:16px;font-weight:800}
.pay-cta__row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.pay-cta__row>div{display:flex;flex-direction:column;gap:2px}
.stepper{padding:18px 20px;display:flex;flex-direction:column}
.step-row{display:flex;gap:14px;align-items:flex-start;position:relative;padding-bottom:18px}
.step-row:last-child{padding-bottom:0}
.step-row:not(:last-child)::before{content:"";position:absolute;left:11px;top:26px;bottom:-2px;width:2px;background:var(--glass-border)}
.step-row.is-done:not(:last-child)::before{background:var(--text)}
.step-row__dot{width:24px;height:24px;border-radius:999px;border:2px solid var(--glass-border);box-sizing:border-box;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:var(--card);position:relative;z-index:1;color:transparent}
.step-row.is-done .step-row__dot{background:var(--text);border-color:var(--text);color:var(--bg)}
.step-row.is-current .step-row__dot{border-color:var(--text)}
.step-row.is-current .step-row__dot::after{content:"";width:8px;height:8px;border-radius:999px;background:var(--text);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(.8);opacity:.6}50%{transform:scale(1.1);opacity:1}}
.step-row__body{display:flex;flex-direction:column;gap:2px;padding-top:2px}
.step-row__t{font-weight:700;font-size:14px}
.step-row:not(.is-done):not(.is-current) .step-row__t{color:var(--muted)}
.step-row__s{font-size:12px;color:var(--faint)}
.target__avatar{width:44px;height:44px;border-radius:999px;object-fit:cover;flex:0 0 auto}
.target__avatar--ph{display:flex;align-items:center;justify-content:center}
.mono-sm{font-family:ui-monospace,Menlo,monospace;font-size:12px;display:inline-flex;align-items:center;gap:6px}
.copybtn{width:26px;height:26px;border-radius:8px;border:1px solid var(--glass-border);background:var(--glass-bg-2);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.copybtn.is-copied{color:#22c55e;border-color:#22c55e}
@media (max-width:420px){.hero-status{flex-direction:column;text-align:center}.hero-status__body{align-items:center}.hero-status__body .pill{align-self:center}}

/* ---------- fixes: full-width CTAs, target card spacing ---------- */
.cta{width:100%;box-sizing:border-box}
.target__body{flex-grow:1;min-width:0}
.story__ring .picon{width:100%;height:100%}

/* ---------- warranty card + storefront modal ---------- */
.wcard{padding:18px;display:flex;flex-direction:column;gap:14px}
.wcard__head{display:flex;align-items:center;justify-content:space-between}
.ibtn{width:26px;height:26px;border-radius:999px;border:1px solid var(--glass-border);background:var(--glass-bg-2);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;margin-left:6px;vertical-align:middle}
.ibtn:hover{color:var(--text);border-color:var(--text)}
.wgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.wstat{padding:12px 14px;border-radius:var(--r-input);background:var(--glass-bg-2);border:1px solid var(--glass-border);display:flex;flex-direction:column;gap:2px}
.wstat__l{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.wstat__v{font-weight:800;font-size:20px;letter-spacing:-.02em}
.wstat__v small{font-size:12px;font-weight:600;color:var(--muted)}
.wbar{display:flex;flex-direction:column;gap:8px}
.wbar__row{display:flex;justify-content:space-between;font-size:13px;font-weight:600}
.btn-ghost--sm{height:42px;font-size:13px}
.cta--sm{height:44px;font-size:13px;width:auto;padding:0 20px}
.modal{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal.is-open{display:flex}
.modal[hidden]{display:none}
.modal__card{width:100%;max-width:420px;padding:24px;display:flex;flex-direction:column;gap:12px;animation:toast-in .2s ease}
.modal__t{font-weight:800;font-size:18px;letter-spacing:-.01em}
.modal__s{font-size:14px;color:var(--muted);line-height:1.5}
.modal__list{margin:0;padding-left:18px;font-size:13px;color:var(--muted);line-height:1.6}
.modal__actions{display:flex;gap:10px;justify-content:flex-end;align-items:center;flex-wrap:wrap;padding-top:4px}
.modal__actions .btn-ghost{width:auto;padding:0 16px}
@media (min-width:640px){.wgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- micro-interactions (reactbits-style, vanilla) ---------- */
/* Shiny Text on CTAs — a light sweep overlay, never background-clip on the button itself */
:root{--shine:rgba(0,0,0,.14)}
:root[data-theme="light"]{--shine:rgba(255,255,255,.32)}
.cta{position:relative;overflow:hidden}
.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 42%,var(--shine) 50%,transparent 58%);background-size:260% 100%;background-position:130% 0;animation:shine 3.4s ease-in-out infinite;pointer-events:none}
@keyframes shine{0%,55%{background-position:130% 0}100%{background-position:-130% 0}}
/* Star Border on the best-seller badge */
.badge{position:relative;overflow:hidden;isolation:isolate}
.badge::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent 0 300deg,rgba(255,255,255,.9) 340deg,transparent 360deg);animation:star-spin 4s linear infinite;z-index:-2}
.badge::after{content:"";position:absolute;inset:1px;border-radius:999px;background:var(--card);z-index:-1}
@keyframes star-spin{to{transform:rotate(360deg)}}
/* Glare Hover on cards */
.glare{position:relative;overflow:hidden}
.glare::after{content:"";position:absolute;inset:0;background:radial-gradient(240px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.14),transparent 60%);opacity:0;transition:opacity .25s ease;pointer-events:none}
.glare:hover::after{opacity:1}
/* Fade / Animated Content on scroll */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.is-in{opacity:1;transform:none}
/* Click Spark */
.spark{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;z-index:120}
.spark i{position:absolute;left:0;top:0;width:3px;height:12px;border-radius:2px;background:var(--text);transform-origin:center -6px;animation:sparkle .45s ease-out forwards}
@keyframes sparkle{0%{transform:rotate(var(--a)) translateY(0) scaleY(1);opacity:1}100%{transform:rotate(var(--a)) translateY(-22px) scaleY(.3);opacity:0}}
/* Magnet */
.magnet{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){.cta::after,.badge::before{animation:none}.reveal{opacity:1;transform:none;transition:none}.magnet{transition:none}}

/* ---------- warranty page ---------- */
.claims{display:flex;flex-direction:column;gap:10px;padding:4px 12px 12px}
.claim{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:16px;background:var(--glass-bg-2);border:1px solid var(--glass-border)}
.claim--refilling{border-color:rgba(34,197,94,.35)}
.claim--review{border-color:rgba(251,146,60,.4)}
.claim__top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.claim__when{font-size:11.5px;color:var(--faint);white-space:nowrap}
.claim__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.claim__stat{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:12px;background:var(--card);border:1px solid var(--glass-border);min-width:0}
.claim__stat small{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.claim__stat b{font-size:clamp(13px,3.6vw,15px);font-weight:800;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.claim__stat.is-drop b{color:#f43f5e}
.claim__stat.is-fine b{color:#22c55e}
.claim__msg{margin:0;font-size:13px;line-height:1.45;color:var(--muted)}
.claim--refilling .claim__msg,.claim--no_drop .claim__msg{color:var(--text)}

/* ---------- phone: action groups + overflow safety ---------- */
@media (max-width:640px){
  .pay-cta__row{flex-direction:column;align-items:stretch}
  .pay-cta__row .pill{align-self:flex-start}
  .modal__actions{flex-direction:column-reverse;align-items:stretch}
  .modal__actions .cta--sm,.modal__actions .btn-ghost{width:100%;padding:0}
  .claim__top{flex-wrap:wrap}
  .summary__row{flex-wrap:wrap}
  .steps__item span:last-child{font-size:12px}
  .subhead__title{font-size:15px}
  .sticky{padding-inline:16px}
}
.picker__main,.picker__main>*,.summary__body,.preview__body,.hero-status__body,.step-row__body,.target__body{min-width:0}
img,svg,video{max-width:100%}
.input{max-width:100%}

/* ---- static + utility pages (track, support, faq, legal) ---- */
.pagehead{display:flex;flex-direction:column;gap:6px;padding:14px 0 6px}
.pagehead__eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pagehead__t{font-weight:800;font-size:28px;letter-spacing:-.02em;line-height:1.1}
.pagehead__s{font-size:14px;color:var(--muted);line-height:1.5}
.prose{padding:18px;display:flex;flex-direction:column;gap:12px;font-size:14px;line-height:1.65;color:var(--text)}
.prose h2{font-size:16px;font-weight:800;letter-spacing:-.01em;margin:8px 0 0}
.prose p{margin:0;color:var(--muted)}
.prose ul{margin:0;padding-left:18px;color:var(--muted)}
.prose li{margin:2px 0}
.prose a{color:var(--text)}
.prose .updated{font-size:12px;color:var(--faint)}
.faq{padding:0;overflow:hidden}
.faq__item{border-top:1px solid var(--glass-border)}
.faq__item:first-child{border-top:0}
.faq__item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;font-weight:700;font-size:15px}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary svg{flex:0 0 auto;color:var(--muted);transition:transform .2s ease}
.faq__item[open] summary svg{transform:rotate(45deg)}
.faq__a{padding:0 18px 16px;font-size:14px;line-height:1.6;color:var(--muted)}
.faq__a a{color:var(--text)}
.orsep{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.08em}
.orsep::before,.orsep::after{content:"";flex:1;height:1px;background:var(--glass-border)}
.textarea{height:auto;min-height:140px;padding:14px 16px;resize:vertical;line-height:1.5}
.contactrow{display:flex;align-items:center;gap:12px;padding:14px 16px}
.contactrow__ic{width:40px;height:40px;border-radius:12px;background:var(--glass-bg-2);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.contactrow__t{font-weight:700;font-size:14px}
.contactrow__s{font-size:12px;color:var(--muted)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.linkgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.linkgrid a{display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:var(--r-tile);background:var(--glass-bg-2);border:1px solid var(--glass-border);text-decoration:none;color:var(--text)}
.linkgrid b{font-size:14px}
.linkgrid span{font-size:12px;color:var(--muted)}

/* ---- home v2 ---- */
.hero--v2{padding:16px 0 8px;display:flex;flex-direction:column;gap:12px}
.hero__eyebrow{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;height:30px;padding:0 12px;border-radius:999px;background:var(--glass-bg);border:1px solid var(--glass-border);font-size:12px;font-weight:700;color:var(--muted)}
.hero__pulse{width:8px;height:8px;border-radius:999px;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.5);animation:pulse 1.8s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.hero--v2 .hero__title{font-size:34px}
.hero--v2 .hero__sub{margin:0}
.hero__cta{display:flex;gap:10px;flex-wrap:wrap;padding-top:4px}
.cta--inline{width:auto;padding:0 22px;height:50px;font-size:14px}
.btn-ghost--inline{width:auto;padding:0 18px;height:50px}
.trust--hero{padding:8px 0 0;grid-template-columns:repeat(2,minmax(0,1fr))}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
.stat{padding:14px 12px;display:flex;flex-direction:column;gap:2px;align-items:center;text-align:center}
.stat__v{font-weight:800;font-size:24px;letter-spacing:-.02em;line-height:1}
.stat__v small{font-size:13px;font-weight:600;color:var(--muted)}
.stat__l{font-size:11px;color:var(--muted)}
.section{margin-top:26px}
.section__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-bottom:14px}
.section__t{margin:0;font-weight:800;font-size:20px;letter-spacing:-.02em}
.section__s,.section__link{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;color:var(--muted);background:var(--glass-bg-2);border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 var(--glass-hi)}
.section__s svg,.section__link svg{flex:0 0 auto;color:var(--text)}
.section__s--star{color:var(--text)}.section__s--star svg{color:#fbbf24}
.section__link{color:var(--text);text-decoration:none;transition:background-color .15s ease,color .15s ease,transform .15s ease}
.section__link:hover{background:var(--cta-bg);color:var(--cta-text)}.section__link:hover svg{color:inherit}
.section__link:active{transform:scale(.97)}
.bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ptile{display:flex;flex-direction:column;gap:12px;padding:16px;text-decoration:none;color:var(--text);min-height:150px;transition:transform .15s ease}
.ptile:active{transform:scale(.97)}
.ptile--wide{grid-column:1/-1;flex-direction:row;align-items:center;gap:16px;min-height:0}
.ptile__body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.ptile__name{font-weight:800;font-size:17px;letter-spacing:-.01em}
.ptile__s{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptile__price{font-size:12px;font-weight:700;color:var(--muted);margin-top:auto}
.ptile--wide .ptile__price{margin-top:0;font-size:13px;color:var(--text)}
.ptile__arrow{color:var(--faint);flex:0 0 auto;margin-left:2px}
.ptile--wide .ptile__s{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ptile--wide:hover .ptile__arrow{color:var(--text)}
.bento[data-count="1"] .ptile--wide{grid-column:1/-1;padding:18px 20px}
.bento[data-count="2"] .ptile{grid-column:span 1;flex-direction:row;align-items:center;gap:14px;min-height:0}
.bento[data-count="2"] .ptile .ptile__price{margin-top:0}
.packages .chips{padding-top:0}
.pkg__foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pkg__w{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:4px 7px;border-radius:999px;background:var(--glass-bg-2)}
.howto{margin-top:0}
.step{position:relative;padding:16px 18px 16px 58px}
.step__n{position:absolute;left:16px;top:16px;width:30px;height:30px;border-radius:999px;background:var(--cta-bg);color:var(--cta-text);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
.reviews{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 8px;margin:0 calc(var(--gutter) * -1);padding-left:var(--gutter);padding-right:var(--gutter);scrollbar-width:none}
.reviews::-webkit-scrollbar{display:none}
.review{flex:0 0 min(82%,320px);scroll-snap-align:start;margin:0;padding:18px;display:flex;flex-direction:column;gap:10px}
.stars{color:#f5b301;letter-spacing:1px;font-size:14px}
.stars__off{color:var(--glass-border)}
.review__q{margin:0;font-size:14px;line-height:1.55}
.review__who{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;margin-top:auto}
.endcta{margin-top:26px;padding:24px 20px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.endcta__t{font-weight:800;font-size:22px;letter-spacing:-.02em}
.endcta__s{font-size:14px;color:var(--muted);margin-bottom:6px}
@media (min-width:640px){.bento{grid-template-columns:repeat(4,minmax(0,1fr))}.ptile--wide{grid-column:span 2}.bento[data-count="1"] .ptile--wide{grid-column:1/-1;padding:22px 26px}.bento[data-count="1"] .ptile__name{font-size:22px}.bento[data-count="1"] .ptile__s{font-size:14px}.bento[data-count="1"] .ptile__price{font-size:15px}.bento[data-count="2"] .ptile{grid-column:span 2}.bento[data-count="3"] .ptile--wide{grid-column:span 2}.trust--hero{grid-template-columns:repeat(4,minmax(0,1fr))}.review{flex-basis:300px}}
@media (min-width:900px){.hero--v2{padding:28px 0 10px}.hero--v2 .hero__title{font-size:48px;max-width:760px}.hero--v2 .hero__sub{font-size:17px}.section__t{font-size:24px}.reviews{margin:0;padding:2px 2px 8px;flex-wrap:wrap;overflow:visible}.review{flex:1 1 280px}.endcta{flex-direction:row;align-items:center;gap:20px}.endcta__s{margin:0;flex:1}}

/* ---- checkout polish: static order summary, grid preview card, adaptive type ---- */
.osum{padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.osum__row{display:flex;align-items:center;gap:12px;min-width:0}
.osum__thumb{width:48px;height:48px;border-radius:14px;background:var(--glass-bg-2);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.osum__body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.osum__title{font-weight:800;font-size:clamp(14px,3.9vw,16px);letter-spacing:-.01em;line-height:1.2}
.osum__sub{font-size:clamp(11px,3.1vw,12px);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.osum__price{font-weight:800;font-size:clamp(16px,4.6vw,19px);flex:0 0 auto}
.osum__facts{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:clamp(11px,3.1vw,12px);color:var(--muted)}
.osum__facts:empty{display:none}
.osum__fact{display:inline-flex;align-items:center;gap:5px}
.osum__fact svg{color:var(--text);flex:0 0 auto}
.preview--rich{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"av title st" "av sub sub" "stats stats stats";align-items:center;column-gap:12px;row-gap:2px;padding:12px}
.preview--rich .preview__avatar{grid-area:av;width:44px;height:44px;align-self:center}
.preview__avatar[hidden]{display:none}
.preview--rich .preview__body{display:contents}
.preview--rich .preview__title{grid-area:title;font-size:clamp(13px,3.6vw,14px)}
.preview--rich .preview__sub{grid-area:sub;font-size:clamp(11px,3.1vw,12px)}
.preview--rich .preview__stats{grid-area:stats;margin-top:8px;gap:5px}
.preview--rich .preview__stat{font-size:clamp(10px,2.9vw,11px);padding:3px 7px;white-space:nowrap}
.preview--rich .preview__state{grid-area:st;align-self:start;font-size:10px;padding:3px 7px}
.sticky{padding:12px max(var(--gutter),env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(var(--gutter),env(safe-area-inset-left,0px));gap:8px;background:var(--card);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 -10px 30px rgba(0,0,0,.22)}
.sticky__row{align-items:center}
.sticky__price{font-size:clamp(18px,5vw,22px)}
.sticky .cta{height:clamp(48px,13vw,54px);font-size:clamp(13px,3.8vw,15px)}
.sticky__note{font-size:clamp(10px,2.9vw,11px);line-height:1.35}
body.has-sticky{padding-bottom:calc(190px + env(safe-area-inset-bottom,0px))}
.fieldset{padding:clamp(14px,4vw,18px) clamp(14px,4vw,18px) clamp(12px,3.6vw,16px);gap:clamp(10px,3vw,14px)}
.fieldset__t{font-size:clamp(15px,4.2vw,16px)}
.fieldset__s{font-size:clamp(12px,3.3vw,13px)}
.pick__label{font-size:clamp(11px,3vw,12px)}
.field-hint,.field-error{font-size:clamp(11px,3.1vw,12px)}
.input{font-size:16px;height:clamp(48px,13vw,54px)}
.pay__t{font-size:clamp(13px,3.7vw,14px)}
.pay__s{font-size:clamp(10px,2.9vw,11px)}
.trust{font-size:clamp(11px,3.1vw,12px)}
.subhead__title{font-size:clamp(15px,4.2vw,16px)}
@media (min-width:900px){.sticky{padding:20px}.preview--rich .preview__avatar{width:52px;height:52px}}

/* ---- brand: mark + wordmark (Unbounded) ---- */
.logo{display:inline-flex;align-items:center;gap:calc(var(--logo-size,28px) * .36);color:var(--text);text-decoration:none;line-height:1}
.logo__mark{flex:0 0 auto;display:block;filter:drop-shadow(0 4px 10px rgba(0,0,0,.18))}
.logo__text{display:flex;flex-direction:column;gap:calc(var(--logo-size,28px) * .12);min-width:0}
.logo__word{font-family:"Unbounded","Plus Jakarta Sans",sans-serif;font-weight:500;font-size:calc(var(--logo-size,28px) * .66);letter-spacing:-.04em;white-space:nowrap;display:inline-flex;align-items:center;gap:0}
.logo__word b{font-weight:800}
.logo__tag{margin-left:8px;font-family:var(--font);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:3px 7px;border-radius:999px;border:1px solid var(--glass-border);color:var(--muted)}
.logo__slogan{font-family:"Caveat","Segoe Script","Bradley Hand",cursive;font-size:calc(var(--logo-size,28px) * .62);font-weight:700;letter-spacing:.01em;color:var(--muted);line-height:.9;display:inline-block;margin-top:calc(var(--logo-size,28px) * -.04);white-space:nowrap}
/* handwriting: the text is revealed left → right by a sliding mask, pauses, fades, and loops */
.logo__ink{display:inline-block;padding-right:.15em;-webkit-mask-image:linear-gradient(90deg,#000 0 46%,transparent 54% 100%);mask-image:linear-gradient(90deg,#000 0 46%,transparent 54% 100%);-webkit-mask-size:220% 100%;mask-size:220% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;animation:write 5.2s cubic-bezier(.4,0,.3,1) infinite}
@keyframes write{0%{-webkit-mask-position:100% 0;mask-position:100% 0;opacity:1}42%,80%{-webkit-mask-position:0 0;mask-position:0 0;opacity:1}92%,100%{-webkit-mask-position:0 0;mask-position:0 0;opacity:0}}
@media (prefers-reduced-motion:reduce){.logo__ink{animation:none;-webkit-mask-image:none;mask-image:none}}
.brand{display:inline-flex;align-items:center}
.brand .logo{--logo-size:26px}

/* ---- desktop layout upgrade ---- */
.topnav a{position:relative;padding:4px 0}
.topnav a.is-active{color:var(--text)}
.topnav a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--text)}
.pagegrid{display:flex;flex-direction:column}
.ostack__main,.ostack__side{display:contents}
.ostack__main>*{order:3}.ostack__side>*{order:5}
.ostack .notice{order:0}.ostack .hero-status{order:1}.ostack .pay-cta{order:2}.ostack .stepper,.ostack__side .wcard{order:2}.ostack .table-card{order:4}
@media (min-width:900px){
  .pagegrid{display:grid;grid-template-columns:minmax(240px,340px) minmax(0,1fr);gap:40px 48px;align-items:start;padding-top:22px}
  .pagegrid .pagehead{position:sticky;top:28px;padding:0;gap:10px}
  .pagegrid .pagehead__t{font-size:38px}
  .pagegrid .pagehead__s{font-size:15px;max-width:340px}
  .pagegrid .stack{max-width:640px;padding-top:0}
  .pagegrid .prose{padding:26px 28px;font-size:15px;gap:14px}
  .pagegrid .prose h2{font-size:18px}
  .pagegrid .faq__item summary{padding:18px 22px;font-size:16px}
  .pagegrid .faq__a{padding:0 22px 18px;font-size:15px}
  .pagegrid .fieldset{padding:24px}
  .stack.ostack{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:36px;align-items:start;padding-top:14px}
  .ostack__main,.ostack__side{display:flex;flex-direction:column;gap:14px;min-width:0}
  .ostack__side{position:sticky;top:24px}
  .ostack__main>*,.ostack__side>*,.ostack .notice,.ostack .hero-status,.ostack .pay-cta,.ostack .stepper,.ostack .wcard,.ostack .table-card{order:0}
  .ostack .hero-status{padding:26px 28px;gap:24px}
  .ostack .hero-status__t{font-size:26px}
  .ostack .hero-status__s{font-size:14px}
  .ostack .wcard{padding:22px}
  .ostack .target{padding:16px 20px}
  .ostack .actions{padding-top:2px}
  .subhead{padding:12px 0 6px}
  .picker .trust{padding-top:8px}
}
@media (min-width:1180px){
  :root{--container:1180px}
  .pagegrid{grid-template-columns:minmax(300px,400px) minmax(0,1fr);gap:40px 72px;padding-top:30px}
  .pagegrid .pagehead__t{font-size:44px}
  .pagegrid .stack{max-width:680px}
  .stack.ostack{grid-template-columns:minmax(0,1fr) 400px;gap:48px}
  .picker{grid-template-columns:minmax(0,1fr) 400px;gap:48px}
  .herogrid:has(.stats){display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:32px 56px;align-items:center;padding-top:8px}
  .herogrid:has(.stats) .stats{grid-template-columns:1fr;margin-top:0;gap:12px}
  .herogrid:has(.stats) .stat{padding:18px 16px}
  .herogrid:has(.stats) .stat__v{font-size:28px}
  .hero--v2 .hero__title{font-size:54px}
  .hero--v2 .hero__sub{font-size:18px;max-width:600px}
  .herogrid:has(.stats) .trust--hero{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px}
  .bento{gap:14px}
  .section{margin-top:36px}
}

/* ---- ⓘ tooltips (shared with admin) ---- */
.infobtn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:4px;padding:0;border-radius:999px;border:1px solid var(--glass-border);background:var(--glass-bg-2);color:var(--muted);cursor:help;vertical-align:-3px;transition:color .15s ease,border-color .15s ease}
.infobtn:hover,.infobtn:focus-visible,.infobtn.is-on{color:var(--text);border-color:var(--text);outline:none}
.tip{position:fixed;z-index:95;max-width:min(280px,calc(100vw - 24px));padding:7px 10px;border-radius:8px;background:var(--cta-bg);color:var(--cta-text);font-size:12px;font-weight:500;line-height:1.45;letter-spacing:0;text-transform:none;box-shadow:0 8px 24px rgba(0,0,0,.25);opacity:0;transform:translateY(4px) scale(.98);transition:opacity .12s ease,transform .12s ease;pointer-events:none}
.tip.is-open{opacity:1;transform:none}
.tip::after{content:"";position:absolute;left:var(--tip-x,50%);top:100%;width:8px;height:8px;background:inherit;transform:translate(-50%,-50%) rotate(45deg)}
.tip.is-below::after{top:0}
.fieldset__t .infobtn,.sticky__desc .infobtn,.wcard__head .infobtn{margin-left:6px}

/* ---- footer v2 ---- */
.footer__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px}
.footer__brand{grid-column:1/-1;display:flex;flex-direction:column;gap:12px}
.footer__brand .logo{--logo-size:34px}
.footer__brand p{margin:0;font-size:13px;color:var(--muted);max-width:420px;line-height:1.55}
.footer__trust{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.footer__trust li{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;color:var(--muted);background:var(--glass-bg-2);border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 var(--glass-hi)}
.footer__trust svg{color:var(--text);flex:0 0 auto}
.footer__col{display:flex;flex-direction:column;gap:8px;min-width:0}
.footer__h{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.footer__col a{color:var(--muted);text-decoration:none;font-size:14px;line-height:1.4;width:fit-content}
.footer__col a:hover{color:var(--text)}
.footer__bottom{display:flex;flex-direction:column;gap:14px;margin-top:26px;padding-top:16px;border-top:1px solid var(--glass-border);font-size:12px;color:var(--faint)}
.footer__legal{display:flex;flex-direction:column;gap:6px}
.footer__legal span{display:inline-flex;align-items:center;gap:6px}
.footer__note::before{content:"";width:5px;height:5px;border-radius:999px;background:var(--faint);flex:0 0 auto}
.footer__tools{display:flex;align-items:center;gap:10px}
.seg{display:inline-flex;padding:3px;border-radius:999px;background:var(--glass-bg-2);border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 var(--glass-hi)}
.seg__btn{width:34px;height:30px;border:0;border-radius:999px;background:transparent;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.seg__btn:hover{color:var(--text)}
.seg__btn.is-on{background:var(--cta-bg);color:var(--cta-text);box-shadow:var(--clay-cta)}
.footer__top{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-decoration:none;background:var(--glass-bg-2);border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 var(--glass-hi);margin-left:auto}
.footer__top:hover{color:var(--text);border-color:var(--text)}
@media (max-width:639px){.footer__note::before{display:none}}
@media (min-width:640px){.footer__grid{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:28px}.footer__brand{grid-column:auto}.footer__bottom{flex-direction:row;justify-content:space-between;align-items:center;gap:16px}.footer__legal{flex-direction:row;align-items:center;gap:12px}.footer__top{margin-left:0}}
@media (min-width:900px){.footer__grid{grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:40px}.footer__brand p{max-width:360px}.footer__bottom{margin-top:32px}}

/* ---- alerts: notices (store), flashes (admin), toasts, field errors share one look ---- */
.notice,.flash{--al:#22c55e;position:relative;display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--r-input);font-size:14px;font-weight:600;line-height:1.45;color:var(--text);background:color-mix(in srgb,var(--al) 9%,var(--glass-bg));border:1px solid color-mix(in srgb,var(--al) 32%,var(--glass-border));box-shadow:var(--clay-sm);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.notice::before,.flash::before{content:"";flex:0 0 auto;width:20px;height:20px;margin-top:1px;background:var(--al);-webkit-mask:var(--al-icon,url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M8 12l3 3 5-6%22/%3E%3C/svg%3E")) center/contain no-repeat;mask:var(--al-icon,url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M8 12l3 3 5-6%22/%3E%3C/svg%3E")) center/contain no-repeat}
.notice--ok,.flash--ok{--al:#22c55e;--al-icon:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M8 12l3 3 5-6%22/%3E%3C/svg%3E")}
.notice--err,.flash--err{--al:#f43f5e;--al-icon:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M9 9l6 6M15 9l-6 6%22/%3E%3C/svg%3E")}
.notice--warn,.flash--warn{--al:#fb923c;--al-icon:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3l9.5 17h-19L12 3z%22/%3E%3Cpath d=%22M12 10v4M12 17h.01%22/%3E%3C/svg%3E")}
.notice--info,.flash--info{--al:var(--text);--al-icon:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M12 11v5M12 8h.01%22/%3E%3C/svg%3E")}
.notice a,.flash a{color:var(--text);text-decoration:underline;text-underline-offset:2px}
.toast{--al:#22c55e;align-items:center;font-weight:600;font-size:14px;background:color-mix(in srgb,var(--al) 9%,var(--glass-bg));border-color:color-mix(in srgb,var(--al) 32%,var(--glass-border))}
.toast--ok{--al:#22c55e;--al-icon:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M8 12l3 3 5-6%22/%3E%3C/svg%3E")}.toast--err{--al:#f43f5e;--al-icon:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M9 9l6 6M15 9l-6 6%22/%3E%3C/svg%3E")}.toast--warn{--al:#fb923c;--al-icon:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3l9.5 17h-19L12 3z%22/%3E%3Cpath d=%22M12 10v4M12 17h.01%22/%3E%3C/svg%3E")}
.toast__dot{width:20px;height:20px;margin-top:0;border-radius:0;background:var(--al)!important;-webkit-mask:var(--al-icon) center/contain no-repeat;mask:var(--al-icon) center/contain no-repeat}
.field-error{display:inline-flex;align-items:center;gap:5px;color:#f43f5e}
.field-error::before{content:"";flex:0 0 auto;width:13px;height:13px;background:#f43f5e;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M9 9l6 6M15 9l-6 6%22/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M9 9l6 6M15 9l-6 6%22/%3E%3C/svg%3E") center/contain no-repeat}
.modal__card--confirm{text-align:left}
.modal__ic{--al:#fb923c;width:44px;height:44px;border-radius:14px;background:color-mix(in srgb,var(--al) 14%,var(--glass-bg));border:1px solid color-mix(in srgb,var(--al) 30%,var(--glass-border));display:flex;align-items:center;justify-content:center;margin-bottom:2px}
.modal__ic::before{content:"";width:22px;height:22px;background:var(--al);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3l9.5 17h-19L12 3z%22/%3E%3Cpath d=%22M12 10v4M12 17h.01%22/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3l9.5 17h-19L12 3z%22/%3E%3Cpath d=%22M12 10v4M12 17h.01%22/%3E%3C/svg%3E") center/contain no-repeat}

/* ---- product blocks: text scales with the card (container queries), never wraps ---- */
.pkg,.ptile{container-type:inline-size}
.pkg__top{gap:8px;min-width:0}
.pkg .badge{white-space:nowrap;font-size:clamp(8px,5.6cqw,10px);padding:4px clamp(5px,4cqw,8px);flex:0 0 auto}
.pkg__qty{font-size:clamp(20px,17cqw,30px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pkg__name{font-size:clamp(11px,7.6cqw,13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pkg__foot{min-width:0}
.pkg__price{font-size:clamp(13px,9.5cqw,16px);white-space:nowrap;flex:0 0 auto}
.pkg__w{white-space:nowrap;font-size:clamp(8px,5.6cqw,10px);padding:4px clamp(5px,4cqw,7px);overflow:hidden;text-overflow:ellipsis;min-width:0}
.ptile__name{font-size:clamp(14px,9.5cqw,17px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptile__s{font-size:clamp(11px,6.8cqw,12px)}
.ptile__price{white-space:nowrap;font-size:clamp(11px,6.8cqw,12px)}
.ptile--wide .ptile__s{display:block;white-space:nowrap;-webkit-line-clamp:unset;font-size:clamp(11px,3.6cqw,13px)}
.ptile--wide .ptile__name{font-size:clamp(15px,5cqw,20px)}
.ptile--wide .ptile__price{font-size:clamp(12px,3.6cqw,13px)}
.bento[data-count="1"] .ptile__name{font-size:clamp(17px,5.5cqw,22px)}
.bento[data-count="1"] .ptile__s{font-size:clamp(12px,3.6cqw,14px)}
.bento[data-count="1"] .ptile__price{font-size:clamp(12px,3.8cqw,15px)}
@container (max-width:340px){.ptile--wide .ptile__count{display:none}}
@container (max-width:175px){.pkg__w-t{display:none}.pkg__w{overflow:visible}}
[data-fit]{display:block;min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptile--wide .ptile__s{-webkit-line-clamp:unset;display:block}

/* ---- QA pass 2026-09-25: short pages keep the footer above the pay bar, labelled track button, legal line, compare-at, h1 reset ---- */
body:not(.admin){display:flex;flex-direction:column}
body:not(.admin)>.page{flex:1 0 auto;width:100%}
h1.subhead__title{margin:0;font-size:16px;font-weight:700}
.iconbtn--label{width:auto;padding:0 14px 0 12px;gap:6px;font-size:13px;font-weight:700}
.iconbtn--label span{white-space:nowrap}
@media (min-width:900px){.iconbtn--label{display:none}}
.sticky__legal{font-size:11px;color:var(--faint);text-align:center;line-height:1.35}
.sticky__legal a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.amt__was{font-size:11px;color:var(--faint);font-weight:500;margin-left:3px}
.inwrap__icon{opacity:1;color:var(--text);z-index:1}
.grid[data-count="1"]{grid-template-columns:minmax(0,1fr)}
.grid[data-count="1"] .pkg{flex-direction:row;align-items:center;gap:14px;min-height:0}
.grid[data-count="1"] .pkg__mid{flex:1;min-width:0}
.grid[data-count="1"] .pkg__foot{flex-direction:column;align-items:flex-end;gap:6px}
@media (min-width:640px){.grid[data-count="1"]{grid-template-columns:minmax(0,420px)}.grid[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}.grid[data-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ptile--soon{opacity:.72}
.ptile--soon .ptile__price.ptile__soon{color:var(--text);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:999px;background:var(--glass-bg-2);border:1px solid var(--glass-border);width:fit-content}
.ptile--soon .ptile__arrow{display:none}
.errpage--soon{min-height:0;padding:16px 0 32px}
.errpage--soon .errpage__ic{background:transparent;border:0;width:auto;height:auto}

/* ---- platform picker sheet (FAB) ---- */
.psheet{position:fixed;inset:0;z-index:75;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .2s ease}
.psheet.is-open{opacity:1}
.psheet[hidden]{display:none}
.psheet__panel{width:100%;max-width:520px;max-height:calc(100dvh - 40px);overflow-y:auto;border-radius:var(--r-card) var(--r-card) 0 0;padding:10px 16px calc(16px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px;transform:translateY(24px);transition:transform .22s ease;background:var(--card)}
.psheet.is-open .psheet__panel{transform:none}
.psheet__grip{width:40px;height:4px;border-radius:999px;background:var(--glass-border);align-self:center}
.psheet__head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center;padding:2px 2px 4px}
.psheet__t{font-weight:800;font-size:18px;letter-spacing:-.01em}
.psheet__s{font-size:13px;color:var(--muted);grid-column:1}
.psheet__x{grid-column:2;grid-row:1/3;width:38px;height:38px}
.psheet__list{display:flex;flex-direction:column;gap:8px}
.prow{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-tile);background:var(--glass-bg-2);border:1px solid var(--glass-border);text-decoration:none;color:var(--text);min-width:0;transition:transform .15s ease,border-color .15s ease}
.prow:hover{border-color:var(--text)}.prow:active{transform:scale(.985)}
.prow__body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.prow__name{font-weight:800;font-size:15px}
.prow__s{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow__price{font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap}
.prow__chev{color:var(--faint);flex:0 0 auto}
.prow--soon{opacity:.7}
.prow__soon{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:4px 8px;border-radius:999px;background:var(--glass-bg);border:1px solid var(--glass-border);white-space:nowrap}
.prow__empty{padding:18px;text-align:center;color:var(--muted);font-size:13px}
.psheet__foot{margin-top:2px}
body.has-psheet{overflow:hidden}
@media (min-width:640px){.psheet{align-items:center;padding:20px}.psheet__panel{border-radius:var(--r-card);transform:translateY(12px) scale(.98)}.psheet__grip{display:none}}
#packages-list.is-loading{opacity:.55;transition:opacity .15s ease}
#packages-list{transition:opacity .2s ease}

/* ---- animated topic icons (lucide-style strokes, subtle motion on reveal and on hover) ---- */
.pick[hidden],.pick[hidden].pick{display:none}
.ticon{display:inline-flex;align-items:center;justify-content:center;width:var(--ticon,16px);height:var(--ticon,16px);margin-right:7px;vertical-align:-2px;color:var(--text);flex:0 0 auto}
.ticon svg{width:100%;height:100%;overflow:visible}
.ticon .tk{transform-box:fill-box;transform-origin:center}
.pick__label .ticon{--ticon:14px;margin-right:6px;color:var(--muted)}
.section__t .ticon{--ticon:20px;margin-right:9px}
.fieldset__t .ticon{--ticon:17px}
.table-card__title .ticon{--ticon:16px}
.pick__label,.fieldset__t,.section__t,.table-card__title{display:inline-flex;align-items:center}
@keyframes tk-layer{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes tk-spark{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.25);opacity:.7}}
@keyframes tk-wiggle{0%,100%{transform:rotate(0)}30%{transform:rotate(-8deg)}70%{transform:rotate(8deg)}}
@keyframes tk-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes tk-slide{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
@keyframes tk-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes tk-draw{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}
@keyframes tk-tilt{0%,100%{transform:rotate(0)}50%{transform:rotate(-6deg) translateY(-1px)}}
@keyframes tk-pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.15);opacity:1}100%{transform:scale(1)}}
.ticon--layers .tk-1{animation:tk-layer 1.6s ease-in-out infinite}
.ticon--layers .tk-2{animation:tk-layer 1.6s ease-in-out .15s infinite}
.ticon--layers .tk-3{animation:tk-layer 1.6s ease-in-out .3s infinite}
.ticon--gem .tk-1{animation:tk-spark 1.8s ease-in-out infinite}
.ticon--hash .tk-2{animation:tk-slide 1.6s ease-in-out infinite}
.ticon--link{animation:tk-wiggle 1.8s ease-in-out infinite}
.ticon--mail .tk-1{animation:tk-bob 1.6s ease-in-out infinite}
.ticon--card{animation:tk-tilt 2s ease-in-out infinite}
.ticon--search{animation:tk-pulse 1.8s ease-in-out infinite}
.ticon--message .tk-1{animation:tk-slide 1.6s ease-in-out infinite}
.ticon--grid .tk-1{animation:tk-pop .6s ease both}.ticon--grid .tk-2{animation:tk-pop .6s ease .1s both}.ticon--grid .tk-3{animation:tk-pop .6s ease .2s both}.ticon--grid .tk-4{animation:tk-pop .6s ease .3s both}
.ticon--zap .tk-1{animation:tk-spark 1.4s ease-in-out infinite}
.ticon--steps .tk-1{animation:tk-bob 1.6s ease-in-out infinite}.ticon--steps .tk-2{animation:tk-bob 1.6s ease-in-out .15s infinite}.ticon--steps .tk-3{animation:tk-bob 1.6s ease-in-out .3s infinite}
.ticon--star .tk-1{animation:tk-spark 1.8s ease-in-out infinite}
.ticon--help{animation:tk-wiggle 2.2s ease-in-out infinite}
.ticon--shield .tk-2{stroke-dasharray:60;animation:tk-draw 1.2s ease forwards}
.ticon--clock .tk-1{transform-origin:12px 12px;animation:tk-wiggle 2s ease-in-out infinite}
.ticon--list .tk-1{animation:tk-slide 1.6s ease-in-out infinite}
/* loop only while the topic is in view or hovered: pause otherwise */
.ticon .tk,.ticon{animation-play-state:paused}
.is-in .ticon .tk,.is-in .ticon,:hover>.ticon .tk,:hover>.ticon,.ticon.is-live .tk,.ticon.is-live{animation-play-state:running}
@media (prefers-reduced-motion:reduce){.ticon .tk,.ticon{animation:none!important}}
.tier{flex-direction:row;align-items:center;gap:10px}
.tier__body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.tier__ic{width:30px;height:30px;border-radius:10px;background:var(--glass-bg-2);border:1px solid var(--glass-border);display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--text)}
.tier__ic .ticon{margin:0;color:inherit}
.tier.is-on .tier__ic{background:var(--cta-bg);color:var(--cta-text);border-color:transparent}
@media (max-width:639px){.tier-grid[data-count="3"]{display:flex;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;margin:0 calc(var(--gutter) * -1);padding:2px var(--gutter) 6px;gap:8px}.tier-grid[data-count="3"]::-webkit-scrollbar{display:none}.tier-grid[data-count="3"] .tier{flex:0 0 auto;min-width:min(58%,190px);scroll-snap-align:start;padding:10px 14px}.tier-grid[data-count="3"] .tier__ic{width:34px;height:34px;border-radius:11px}.tier-grid[data-count="3"] .tier__ic .ticon{--ticon:17px}}
@media (min-width:640px){.tier-grid[data-count="3"] .tier__ic{width:28px;height:28px;border-radius:9px}.tier-grid[data-count="3"] .tier__ic .ticon{--ticon:15px}}
.ticon--crown .tk-1{animation:tk-bob 1.8s ease-in-out infinite}
.ticon--rocket{animation:tk-tilt 1.8s ease-in-out infinite}
.ticon--sparkles .tk-1{animation:tk-spark 1.6s ease-in-out infinite}.ticon--sparkles .tk-2{animation:tk-spark 1.6s ease-in-out .4s infinite}
.ticon--flame .tk-1{animation:tk-pulse 1.2s ease-in-out infinite}
.ticon--heart .tk-1{animation:tk-pulse 1.4s ease-in-out infinite}
.ticon--award .tk-1{animation:tk-spark 1.8s ease-in-out infinite}
.ticon--trending .tk-1{stroke-dasharray:40;animation:tk-draw 1.2s ease forwards}
.ticon--check .tk-1{stroke-dasharray:40;animation:tk-draw 1s ease forwards}
.ticon--leaf{animation:tk-wiggle 2.4s ease-in-out infinite}
.osum__price{display:flex;flex-direction:column;align-items:flex-end;gap:0;line-height:1.1}
.osum__was{font-size:11px;font-weight:600;color:var(--faint)}
.osum__fact--save{color:#22c55e;font-weight:700}.osum__fact--save svg{color:#22c55e}

/* ---- ratings ---- */
.stars{display:inline-flex;gap:1px;color:#fbbf24;line-height:0}
.stars__i{position:relative;width:var(--star,12px);height:var(--star,12px);display:inline-block}
.stars__i svg{position:absolute;inset:0;width:100%;height:100%;fill:transparent;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.stars__i .stars__fill{fill:currentColor;stroke:none;clip-path:inset(0 100% 0 0)}
.stars__i.is-full .stars__fill{clip-path:none}
.stars__i.is-half .stars__fill{clip-path:inset(0 50% 0 0)}
.pkg__stars{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);margin-top:-4px}
.pkg__stars b{color:var(--text);font-weight:700}
.pkg__stars-n{color:var(--faint)}
.grid[data-count="1"] .pkg__stars{margin-top:0}
.ratecard{padding:18px;display:flex;flex-direction:column;gap:12px}
.ratecard__head{display:flex;flex-direction:column;gap:4px}
.ratecard__s{font-size:13px;color:var(--muted)}
.ratecard__form{display:flex;flex-direction:column;gap:10px}
.ratepick{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px}
.ratepick input{position:absolute;opacity:0;width:0;height:0}
.ratepick label{width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--glass-border);transition:transform .12s ease,color .12s ease}
.ratepick label svg{width:30px;height:30px;fill:currentColor;stroke:none}
.ratepick label:hover,.ratepick label:hover ~ label,.ratepick input:checked ~ label{color:#fbbf24}
.ratepick label:active{transform:scale(.9)}
.ratepick input:focus-visible + label{outline:2px solid var(--text);outline-offset:2px;border-radius:10px}
.ratecard__done{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}.ratecard__done b{color:var(--text)}
.ostack .ratecard{order:1}

/* ---- 3D animated flame (best sellers) ---- */
.flame{display:inline-flex;width:var(--flame,16px);height:var(--flame,16px);flex:0 0 auto;filter:drop-shadow(0 1px 2px rgba(255,120,20,.55)) drop-shadow(0 0 6px rgba(255,150,40,.35));vertical-align:-3px;position:relative;z-index:1}
.flame__svg{width:100%;height:100%;overflow:visible}
.flame__outer,.flame__inner,.flame__hi{transform-box:fill-box;transform-origin:50% 100%}
@keyframes flame-flicker{0%,100%{transform:scaleY(1) scaleX(1) rotate(0)}25%{transform:scaleY(1.06) scaleX(.96) rotate(-2deg)}50%{transform:scaleY(.95) scaleX(1.04) rotate(1.5deg)}75%{transform:scaleY(1.04) scaleX(.98) rotate(-1deg)}}
@keyframes flame-core{0%,100%{transform:scale(1) translateY(0);opacity:1}40%{transform:scale(.9) translateY(.4px);opacity:.85}70%{transform:scale(1.08) translateY(-.4px);opacity:1}}
@keyframes flame-glow{0%,100%{filter:drop-shadow(0 1px 2px rgba(255,120,20,.55)) drop-shadow(0 0 6px rgba(255,150,40,.35))}50%{filter:drop-shadow(0 1px 2px rgba(255,120,20,.7)) drop-shadow(0 0 9px rgba(255,170,60,.55))}}
.flame__outer{animation:flame-flicker 1.1s ease-in-out infinite}
.flame__inner{animation:flame-core .8s ease-in-out infinite}
.flame__hi{animation:flame-flicker 1.1s ease-in-out .15s infinite;mix-blend-mode:screen}
.flame{animation:flame-glow 1.6s ease-in-out infinite}
.badge--hot{display:inline-flex;align-items:center;gap:6px;padding:4px 9px 4px 5px;font-size:11px}
.badge--hot .flame{vertical-align:middle}
@media (prefers-reduced-motion:reduce){.flame,.flame__outer,.flame__inner,.flame__hi{animation:none!important}}
.amt{overflow:visible}
.amt{container-type:inline-size}
.amt__star{--fs:clamp(28px,26cqw,42px);width:calc(var(--fs) + 8px);height:calc(var(--fs) + 8px);top:calc(-8px - var(--fs) * .15);right:calc(-6px - var(--fs) * .08)}
.amt__star .flame{width:var(--fs);height:var(--fs)}
.badge--hot{--fs:clamp(24px,8cqw,32px);padding:3px 10px 3px 4px}
.badge--hot .flame{width:var(--fs);height:var(--fs)}
/* prices: green now, red for the struck regular price */
.amt__p,.osum__price,.pkg__price,.sticky__price{color:#22c55e}
.amt__was,.osum__was{color:#f43f5e;opacity:.9;text-decoration-color:#f43f5e;font-weight:600}
.amt.is-on .amt__p{color:#22c55e}
.osum__badge{margin-top:4px;width:fit-content;--fs:24px}
.osum__body{gap:3px}
.cmeter{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:12px;color:var(--muted)}
.cmeter__bar{flex:1;height:6px;border-radius:999px;background:var(--glass-bg-2);overflow:hidden}
.cmeter__bar i{display:block;height:100%;width:0;border-radius:999px;background:#fb923c;transition:width .2s ease,background-color .2s ease}
.cmeter.is-ok .cmeter__bar i{background:#22c55e}
.cmeter__t b{color:var(--text)}
.cgen{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:var(--r-input);background:var(--glass-bg-2);border:1px solid var(--glass-border);margin-bottom:12px}
.cgen__t{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13px}
.cgen .input{height:44px;font-size:14px}
.cgen__actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cgen__btn{height:44px;padding:0 16px;position:relative}
.cgen__btn{flex:1 1 auto;justify-content:center}.cgen__btn:disabled{opacity:.85;cursor:progress}
.cgen__btn.is-busy .cta__spin{display:inline-block;margin:0 0 0 10px;border-color:var(--glass-border);border-top-color:var(--text)}
.cgen__btn .cta__spin{display:none}
.cgen__clear{background:none;border:0;color:var(--muted);font:inherit;font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.cgen{gap:6px;padding:10px}
.cgen__two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.ddown{position:relative;min-width:0}
.ddown__btn{display:flex;align-items:center;gap:8px;width:100%;height:42px;padding:0 10px;border-radius:12px;border:1px solid var(--glass-border);background:var(--glass-bg);color:var(--text);font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-align:left;min-width:0}
.ddown__btn:hover,.ddown.is-open .ddown__btn{border-color:var(--text)}
.ddown__k{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);flex:0 0 auto}
.ddown__v{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ddown__btn svg{color:var(--muted);flex:0 0 auto;transition:transform .15s ease}
.ddown.is-open .ddown__btn svg{transform:rotate(180deg)}
.ddown__menu{margin-top:6px;max-height:220px;overflow-y:auto;padding:6px;border-radius:14px;background:var(--card);border:1px solid var(--glass-border);box-shadow:var(--clay);display:flex;flex-direction:column;gap:2px;scrollbar-width:thin}
.ddown__menu[hidden]{display:none}
.ddown__opt{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;border:0;border-radius:9px;background:transparent;color:var(--text);font:inherit;font-size:13px;font-weight:600;text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ddown__opt:hover{background:var(--glass-bg-2)}
.ddown__opt.is-on{background:var(--cta-bg);color:var(--cta-text)}
.ddown__e{font-size:16px;line-height:1;flex:0 0 auto}
.cgen .input{height:42px;font-size:13px}
.cgen__btn{height:42px}
@media (max-width:480px){.cgen__two .ddown__k{display:none}}
.ddown__e+*{margin-left:0}
.cmeter.is-over .cmeter__t b{color:#fb923c}
.cover{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:8px;padding:8px 10px;border-radius:12px;font-size:12px;color:var(--muted);background:rgba(251,146,60,.1);border:1px solid rgba(251,146,60,.35)}
.cover b{color:var(--text)}
.cover__btn{background:var(--cta-bg);color:var(--cta-text);border:0;border-radius:999px;padding:6px 12px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.cover[hidden],.cgen__btn[hidden]{display:none}
.cover__t{flex:1 1 160px}


/* Service landing page (below the picker) */
.lp{margin-top:28px;display:flex;flex-direction:column;gap:6px}
.lp__intro{margin:0;font-size:15px;line-height:1.6;color:var(--muted);max-width:760px}
.lp__proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.proof{padding:14px 12px;display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center}
.proof__v{font-family:var(--display,inherit);font-weight:800;font-size:22px;letter-spacing:-.02em}
.proof__v small{font-size:12px;color:var(--muted);margin-left:2px}
.proof__l{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.why--3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.why__item{padding:16px;display:flex;flex-direction:column;gap:6px}
.why__ic{width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:var(--glass-bg-2);border:1px solid var(--glass-border);margin-bottom:2px}
.why__t{font-weight:800;font-size:15px;letter-spacing:-.01em}
.why__s{font-size:13px;line-height:1.55;color:var(--muted)}
.how{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);gap:16px;align-items:start}
.how__steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;counter-reset:none}
.how__step{display:flex;gap:14px;padding:14px 16px}
.how__n{flex:0 0 auto;width:30px;height:30px;border-radius:999px;background:var(--cta-bg);color:var(--cta-text);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
.how__body{display:flex;flex-direction:column;gap:3px;min-width:0}
.how__t{font-weight:800;font-size:15px}
.how__s{font-size:13px;line-height:1.55;color:var(--muted)}
.how__mock{display:flex;justify-content:center;padding:6px 0}
.phone{width:min(100%,250px);border-radius:28px;padding:14px 14px 18px;background:var(--card);border:1px solid var(--glass-border);box-shadow:var(--clay);display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden}
.phone__bar{display:flex;justify-content:center}.phone__bar span{width:64px;height:6px;border-radius:999px;background:var(--glass-bg-2)}
.phone__head{display:flex;align-items:center;gap:10px}
.phone__avatar{width:44px;height:44px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:var(--glass-bg-2);border:2px solid transparent;background-clip:padding-box;position:relative}
.phone__avatar::before{content:"";position:absolute;inset:-3px;border-radius:999px;background:conic-gradient(#f59e0b,#ec4899,#8b5cf6,#f59e0b);z-index:-1}
.phone__name{font-weight:800;font-size:14px}
.phone__stats{display:flex;justify-content:space-around;text-align:center}
.phone__stats span{display:flex;flex-direction:column;gap:1px}.phone__stats b{font-size:15px;font-weight:800}.phone__stats i{font-style:normal;font-size:10px;color:var(--muted)}
.phone__cta{font-size:12px;font-weight:700;padding:8px 10px;border-radius:10px;background:var(--cta-bg);color:var(--cta-text);text-align:center;display:flex;align-items:center;justify-content:center;gap:6px}
.phone__dot{width:7px;height:7px;border-radius:999px;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:pdot 1.6s ease-out infinite}
@keyframes pdot{0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}100%{box-shadow:0 0 0 8px rgba(34,197,94,0)}}
.phone__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.phone__grid span{aspect-ratio:1;border-radius:6px;background:linear-gradient(135deg,var(--glass-bg-2),var(--glass-bg))}
.phone__toast{position:absolute;left:14px;right:14px;bottom:-40px;padding:8px 10px;border-radius:12px;background:var(--card);border:1px solid var(--glass-border);box-shadow:var(--clay);font-size:12px;font-weight:700;display:flex;align-items:center;gap:6px;animation:ptoast 6s ease-in-out infinite}
@keyframes ptoast{0%,15%{bottom:-40px;opacity:0}25%,70%{bottom:14px;opacity:1}80%,100%{bottom:-40px;opacity:0}}
.guar{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.guar__item{padding:16px;display:flex;flex-direction:column;gap:6px}
.guar__t{font-weight:800;font-size:15px;display:flex;align-items:center;gap:8px}
.guar__s{font-size:13px;line-height:1.55;color:var(--muted)}
.cmp{padding:6px 16px;display:flex;flex-direction:column}
.cmp__row{display:grid;grid-template-columns:1.1fr 1.2fr 1fr;gap:10px;padding:11px 0;border-top:1px solid var(--glass-border);font-size:13px;align-items:center}
.cmp__row--head{border-top:0;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cmp__k{font-weight:700}.cmp__us{display:flex;align-items:center;gap:6px;font-weight:600}.cmp__them{color:var(--muted)}
.lp__text{margin-top:10px;padding:18px 20px}
.lp__h3{margin:0 0 6px;font-size:16px;font-weight:800}
.lp__text p{margin:0;font-size:14px;line-height:1.65;color:var(--muted)}
.faq__q{margin:0;font-size:15px;font-weight:700}
@media (max-width:760px){.how{grid-template-columns:1fr}.how__mock{order:-1}.cmp__row{grid-template-columns:1fr 1fr 1fr;font-size:12px}.lp__proof{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.proof__v{font-size:18px}.proof__l{font-size:11px;flex-direction:column;gap:2px}}
@media (max-width:480px){.cmp__row{grid-template-columns:.9fr 1.1fr .9fr}}

/* Blog */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:18px}
.posts--3{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.pcard{display:flex;flex-direction:column;padding:0;overflow:hidden;text-decoration:none;color:inherit;transition:transform .15s ease}
.pcard:hover{transform:translateY(-2px)}
.pcard__body{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px}
.pcard__meta{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pcard__t{font-weight:800;font-size:16px;letter-spacing:-.01em;line-height:1.3}
.pcard__s{font-size:13px;line-height:1.5;color:var(--muted)}
.pcard__date{font-size:12px;color:var(--faint);margin-top:2px}
.pcover{display:block;position:relative;overflow:hidden;aspect-ratio:16/9;background:hsl(var(--h) 60% 18%);isolation:isolate}
.pcover--hero{aspect-ratio:21/9;border-radius:18px;margin-top:16px}
[data-theme="light"] .pcover{background:hsl(var(--h) 70% 90%)}
.pcover__blob{position:absolute;border-radius:999px;filter:blur(28px);opacity:.75}
.pcover__blob--1{width:60%;aspect-ratio:1;left:-12%;top:-30%;background:hsl(var(--h) 90% 55%)}
.pcover__blob--2{width:50%;aspect-ratio:1;right:-10%;bottom:-40%;background:hsl(calc(var(--h) + 60) 90% 60%)}
.pcover__icon,.pcover__mark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.pcover__icon>*{filter:drop-shadow(0 8px 24px rgba(0,0,0,.35))}
.pager{margin-top:18px;display:flex;justify-content:center}
.pager nav{display:flex;gap:6px}
.post{margin-top:6px;max-width:760px}
.post__head{display:flex;flex-direction:column;gap:10px}
.post__t{margin:0;font-size:clamp(26px,5vw,38px);font-weight:800;letter-spacing:-.03em;line-height:1.1}
.post__lead{margin:0;font-size:16px;line-height:1.6;color:var(--muted)}
.post__body{margin-top:22px;font-size:16px;line-height:1.75}
.post__body h2{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:32px 0 10px}
.post__body h3{font-size:18px;font-weight:800;margin:24px 0 8px}
.post__body p{margin:0 0 16px}
.post__body ul,.post__body ol{margin:0 0 16px;padding-left:22px}.post__body li{margin:4px 0}
.post__body strong{font-weight:800}
.post__body blockquote{margin:16px 0;padding:12px 16px;border-left:3px solid var(--text);background:var(--glass-bg-2);border-radius:0 12px 12px 0;color:var(--muted)}
.post__body a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.post__body table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 16px}.post__body th,.post__body td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--glass-border)}
.post__foot{margin-top:24px;padding-top:14px;border-top:1px solid var(--glass-border);font-size:13px}
.bc{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin:2px 0 12px}.bc a{color:inherit;text-decoration:none}.bc a:hover{color:var(--text)}.bc b{color:var(--text);font-weight:600}

/* Illustration scenes (photo cutout + pastel blob + drawn accents) */
.scene{--t1:#c7f0d8;--t2:#9fe3c0;--ink:#1f2937;position:relative;isolation:isolate;aspect-ratio:1;width:100%;max-width:340px;margin:0 auto;display:block;overflow:visible}
.scene--peach{--t1:#ffe1c9;--t2:#ffc4a3}.scene--lilac{--t1:#e6d9ff;--t2:#c9b6ff}.scene--sky{--t1:#d6e9ff;--t2:#b3d4ff}.scene--mint{--t1:#d5f4e3;--t2:#a8e6c6}
[data-theme="dark"] .scene{--ink:#f5f5f7}
[data-theme="dark"] .scene--peach{--t1:#5a3a2a;--t2:#7a4a2f}[data-theme="dark"] .scene--lilac{--t1:#3e3060;--t2:#5a4390}[data-theme="dark"] .scene--sky{--t1:#27405e;--t2:#33578a}[data-theme="dark"] .scene--mint{--t1:#234436;--t2:#2f6a4e}
.scene__blob{position:absolute;z-index:-1;border-radius:46% 54% 52% 48% / 55% 43% 57% 45%;animation:blob 14s ease-in-out infinite}
.scene__blob--a{inset:12% 6% 4% 8%;background:var(--t1)}
.scene__blob--b{inset:2% 20% 30% 44%;background:var(--t2);animation-duration:18s;animation-direction:reverse;opacity:.9}
@keyframes blob{0%,100%{border-radius:46% 54% 52% 48% / 55% 43% 57% 45%;transform:rotate(0)}50%{border-radius:56% 44% 42% 58% / 45% 57% 43% 55%;transform:rotate(6deg)}}
.scene__person{position:absolute;left:50%;bottom:0;height:92%;width:auto;transform:translateX(-50%);filter:drop-shadow(0 18px 24px rgba(0,0,0,.18));animation:pfloat 6s ease-in-out infinite}
@keyframes pfloat{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-6px)}}
.scene__acc{position:absolute;stroke:var(--ink);z-index:1}
.scene__acc--shield{left:2%;bottom:14%;width:30%;transform:rotate(-12deg)}
.scene__acc--clock{right:0;top:10%;width:30%;transform:rotate(10deg)}
.scene__acc--chart{left:0;top:12%;width:40%}
.scene__draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s ease .2s}
.scene__draw--2{transition-delay:1.1s}
.scene.is-live .scene__draw{stroke-dashoffset:0}
.scene--shield .scene__draw--2{stroke:#f97316}
.scene__hand{transform-origin:60px 60px;animation:hand 8s linear infinite}
@keyframes hand{to{transform:rotate(360deg)}}
.scene__spark{position:absolute;width:8%;fill:#f59e0b;opacity:0;animation:twinkle 3.2s ease-in-out infinite}
.scene__spark--1{right:12%;top:6%}.scene__spark--2{left:14%;top:26%;width:5%;animation-delay:1.4s}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.5) rotate(0)}50%{opacity:1;transform:scale(1) rotate(20deg)}}
.scene__lines{position:absolute;right:4%;top:34%;width:12%;stroke:var(--ink);opacity:.9;animation:pfloat 5s ease-in-out infinite}
.scene__badge{position:absolute;left:4%;top:4%;padding:7px 12px;border-radius:12px;background:var(--cta-bg);color:var(--cta-text);font-weight:800;font-size:13px;box-shadow:var(--clay);transform:rotate(-6deg);z-index:2}
.scene__pill{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;background:var(--card);border:1px solid var(--glass-border);box-shadow:var(--clay);font-size:12px;font-weight:700;white-space:nowrap;animation:pillin .8s cubic-bezier(.2,.9,.3,1.3) both}
.scene__pill b{color:#22c55e}
.scene__pill--1{right:0;top:22%;animation-delay:.3s}.scene__pill--2{left:-4%;bottom:26%;animation-delay:.9s}.scene__pill--3{right:6%;bottom:14%;animation-delay:1.5s}
.scene__dot{width:8px;height:8px;border-radius:999px;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:pdot 1.6s ease-out infinite}
@keyframes pillin{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:none}}
.scene--hero{max-width:380px}
.scene--card{max-width:300px}
.lp__hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,.9fr);gap:18px;align-items:center}
.lp__herotext{display:flex;flex-direction:column;gap:12px}
.lp__ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
.lp__ticks li{display:flex;align-items:center;gap:8px}.lp__ticks .ticon{color:#22c55e}
.guar--big{grid-template-columns:repeat(2,minmax(0,1fr))}
.guar__item--scene{padding-top:10px}
.guar__item--scene .scene{margin-bottom:8px}
.guar__item--wide{grid-column:1 / -1}
.matter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:10px}
.matter__card{padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.matter__card p{margin:0;font-size:14px;line-height:1.65;color:var(--muted)}
.matter__card--accent{background:linear-gradient(160deg,var(--glass-bg-2),var(--card))}
.safe{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(240px,.8fr);gap:18px;align-items:center;margin-bottom:12px}
.vig{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:64px;padding:12px;border-radius:14px;background:var(--glass-bg-2);border:1px dashed var(--glass-border);margin-bottom:6px}
.vig__avatars{display:flex;align-items:center;gap:6px}
.vig__avatars i{width:34px;height:34px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-weight:800;font-size:13px;color:#fff;background:linear-gradient(135deg,#f59e0b,#ec4899);animation:popin .6s cubic-bezier(.2,.9,.3,1.3) both;animation-delay:calc(var(--d) * .18s)}
.vig__avatars i:nth-child(2){background:linear-gradient(135deg,#8b5cf6,#3b82f6)}.vig__avatars i:nth-child(3){background:linear-gradient(135deg,#22c55e,#14b8a6)}
.vig__avatars i.is-x{background:var(--glass-bg);color:var(--faint);border:1px solid var(--glass-border);font-weight:600}
@keyframes popin{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.vig__pill{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:var(--card);border:1px solid var(--glass-border);box-shadow:var(--clay);font-size:12px;font-weight:700;animation:pillin .8s cubic-bezier(.2,.9,.3,1.3) both}
.vig__pill--2{animation-delay:.5s;font-weight:600;color:var(--muted)}
.vig__pill--dark{background:var(--cta-bg);color:var(--cta-text);border-color:transparent}
.vig--growth{flex-direction:column;align-items:stretch;gap:10px}
.vig__tags{display:flex;gap:6px;flex-wrap:wrap}
.vig__tags i{display:inline-block;height:20px;width:52px;border-radius:999px;background:var(--card);border:1px solid var(--glass-border);font-style:normal;font-size:11px;font-weight:800;color:var(--muted);padding-left:8px;line-height:18px}
.vig__tags i:nth-child(2){width:70px}.vig__tags i:nth-child(4){width:64px}
.vig__wave{width:100%;height:56px;stroke:var(--muted)}.vig__wave .scene__draw{stroke-dasharray:.012 .02;transition:none;animation:none}.vig--growth.is-live .vig__wave .scene__draw{animation:dash 1.8s ease forwards}@keyframes dash{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.is-live .vig__wave .scene__draw,.vig--growth.is-live .scene__draw{stroke-dashoffset:0}
@media (max-width:760px){.lp__hero{grid-template-columns:1fr}.lp__hero .scene{order:-1;max-width:260px}.guar--big{grid-template-columns:1fr}.matter{grid-template-columns:1fr}.safe{grid-template-columns:1fr}.safe .scene{max-width:240px}}
@media (prefers-reduced-motion:reduce){.scene__blob,.scene__person,.scene__spark,.scene__lines,.scene__hand,.vig__avatars i,.scene__pill,.vig__pill{animation:none}.scene__draw{stroke-dashoffset:0;transition:none}.scene__spark{opacity:1}}
/* Blog covers: uploaded image or an illustrated wide scene */
.pcover--img{object-fit:cover;width:100%;display:block}
.pcover--scene{display:flex;align-items:flex-end;justify-content:center;background:var(--glass-bg-2);isolation:auto}
.pcover--scene .pcover__blob,.pcover--scene .pcover__icon{display:none}
.scene--wide{max-width:none;width:100%;height:100%;aspect-ratio:auto;margin:0}
.scene--wide .scene__blob--a{inset:18% 22% -12% 22%}
.scene--wide .scene__blob--b{inset:4% 30% 34% 50%}
.scene--wide .scene__person{height:96%;left:52%}
.scene--wide .scene__badge{left:6%;top:8%}
.scene--wide .scene__pill--1{left:6%;right:auto;bottom:10%;top:auto}
.scene--wide .scene__acc--chart{left:10%;top:16%;width:26%}
.scene--wide .scene__acc--shield{left:8%;bottom:10%;width:20%}
.scene--wide .scene__acc--clock{right:8%;top:10%;width:20%}
.scene--wide .scene__spark--1{right:10%;top:10%}.scene--wide .scene__spark--2{left:16%;top:22%}
.scene--wide .scene__lines{right:10%;top:44%;width:8%}
.pcover--hero .scene--wide .scene__person{height:100%}
/* Blog filter chips with icons + pagination */
.chips--blog{padding:14px 0 2px;margin:0 calc(var(--gutter) * -1);padding-left:var(--gutter);padding-right:var(--gutter)}
.chip--ic{gap:8px;padding-left:10px}
.chip--ic .picon,.chip--ic .ticon{flex:0 0 auto}
.chip.is-on .ticon{color:var(--chip-on-text)}
.pager{flex-direction:column;align-items:center;gap:8px}
.pg{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.pg__btn{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--glass-border);background:var(--glass-bg-2);color:var(--text);font-size:13px;font-weight:700;text-decoration:none}
.pg__btn.is-off{opacity:.4;pointer-events:none}
.pg__pages{display:inline-flex;align-items:center;gap:4px;margin:0 4px}
.pg__n{width:40px;height:40px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--muted);text-decoration:none;border:1px solid transparent}
.pg__n:hover{border-color:var(--glass-border);color:var(--text)}
.pg__n.is-on{background:var(--cta-bg);color:var(--cta-text)}
.pg__dots{color:var(--faint);padding:0 4px}
.pg__info{margin:0;font-size:12px;color:var(--faint)}
/* Page header (shadcn-style: crumbs, badge, big title, muted description, pill row) */
.phead{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:8px 0 16px;border-bottom:1px solid var(--glass-border);margin-bottom:6px}
.bc--phead{margin:0}
.bc--top{margin-top:8px}
.phead__badge{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;border:1px solid var(--glass-border);background:var(--glass-bg-2);font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--muted)}
.phead__t{margin:0;font-size:clamp(28px,6vw,44px);font-weight:800;letter-spacing:-.035em;line-height:1.08;max-width:900px}
.phead__brand{display:inline-flex;align-items:center;gap:.22em;vertical-align:-.08em}
.phead__brand .picon{--picon-size:.9em;border-radius:.22em}
.phead__grad{background:linear-gradient(90deg,#f59e0b 0%,#ec4899 45%,#8b5cf6 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.phead__s{margin:0;max-width:680px;font-size:15px;line-height:1.6;color:var(--muted)}
.phead__trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.tpill{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--glass-border);background:var(--glass-bg-2);font-size:12.5px;font-weight:700;text-decoration:none;color:var(--text)}
.tpill .ticon{color:#22c55e}
.tpill--star b{font-weight:800}
.tpill--cta{background:var(--cta-bg);color:var(--cta-text);border-color:transparent}
@media (max-width:480px){.phead{gap:8px}.phead__s{font-size:14px}.tpill{height:32px;font-size:12px;padding:0 10px}}
/* header pills: one scrollable line on phones */
@media (max-width:640px){.phead__trust{flex-wrap:nowrap;gap:6px;overflow-x:auto;scrollbar-width:none}.phead__trust::-webkit-scrollbar{display:none}.tpill{flex:0 0 auto;white-space:nowrap;height:28px;padding:0 8px;font-size:11px;gap:4px;letter-spacing:-.01em}.tpill .ticon{width:12px;height:12px}.tpill--cta{display:none}}
/* Brand wordmarks in page titles: the lettering is a mask, so it takes any colour or gradient */
.phead__wm{display:inline-block;height:1.1em;aspect-ratio:361/90;vertical-align:-.33em;margin:0 .02em;background:linear-gradient(90deg,#ff7a00 0%,#ff0069 40%,#d300c5 70%,#7638fa 100%);-webkit-mask:var(--wm) center/contain no-repeat;mask:var(--wm) center/contain no-repeat}
.phead__wm--instagram{--wm:url(/img/brand/instagram-wordmark.png)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Utility pages (track / support / faq): content + illustrated side column */
.hero2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(240px,.85fr);gap:18px;align-items:start;margin-top:6px}
.hero2__side{display:flex;flex-direction:column;gap:12px;position:sticky;top:72px}
.hero2 .scene{max-width:320px}
.sidecard{padding:16px;display:flex;flex-direction:column;gap:6px}
.sidecard__t{font-weight:800;font-size:15px}.sidecard__s{font-size:13px;line-height:1.55;color:var(--muted)}
.sidecard .btn-ghost{margin-top:6px}
.why__item--link{text-decoration:none;color:inherit;transition:transform .15s ease}.why__item--link:hover{transform:translateY(-2px)}
.cmp--status .cmp__row--2{grid-template-columns:minmax(120px,.5fr) 1.5fr}
@media (max-width:760px){.hero2{grid-template-columns:1fr}.hero2__side{position:static;flex-direction:row;align-items:center;gap:12px}.hero2 .scene{max-width:180px;flex:0 0 46%}.sidecard{flex:1}}
@media (max-width:480px){.hero2__side{flex-direction:column}.hero2 .scene{max-width:220px;flex:none}.cmp--status .cmp__row--2{grid-template-columns:1fr;gap:2px}}
@media (max-width:640px){.phead--wrap .phead__trust{flex-wrap:wrap;overflow:visible}}

/* ===== Account widget: mascot + side panel ===== */
.mascot{position:fixed;right:16px;bottom:calc(104px + env(safe-area-inset-bottom,0px));z-index:60;width:64px;height:64px;border:0;background:transparent;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
body.has-sticky .mascot{bottom:calc(118px + env(safe-area-inset-bottom,0px))}
@media (min-width:900px){.mascot{right:26px;bottom:26px}body.has-sticky .mascot{bottom:26px}}
.mascot__body{position:relative;width:58px;height:58px;border-radius:50%;background:radial-gradient(circle at 32% 26%,#45454d 0%,#1b1b20 38%,#050506 100%);box-shadow:inset -7px -9px 16px rgba(0,0,0,.65),inset 6px 6px 12px rgba(255,255,255,.07),0 14px 28px -10px rgba(0,0,0,.75),0 0 0 2px rgba(255,255,255,.06);transform-style:preserve-3d;transition:transform .18s cubic-bezier(.3,1.4,.5,1),box-shadow .2s ease;animation:mascot-bob 4.4s ease-in-out infinite;will-change:transform}
[data-theme="light"] .mascot__body{box-shadow:inset -7px -9px 16px rgba(0,0,0,.65),inset 6px 6px 12px rgba(255,255,255,.07),0 14px 28px -10px rgba(0,0,0,.45),0 0 0 3px rgba(255,255,255,.9)}
.mascot__shine{position:absolute;left:14px;top:9px;width:18px;height:10px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,255,255,.35),rgba(255,255,255,0) 70%);transform:rotate(-20deg)}
.mascot__eye{position:absolute;width:9px;height:19px;border-radius:5px;background:#fff;box-shadow:0 0 6px rgba(255,255,255,.35);transform-origin:center;animation:mascot-blink 4.8s ease-in-out infinite;transition:transform .12s ease}
.mascot__eye--l{left:19px;top:19px;transform:rotate(-8deg)}
.mascot__eye--r{left:33px;top:15px;height:23px;transform:rotate(-8deg);animation-delay:.05s}
.mascot:hover .mascot__body{transform:translateY(-3px) scale(1.06)}
.mascot:active .mascot__body{transform:scale(.92) scaleY(.88)}
.mascot.is-happy .mascot__eye{border-radius:8px 8px 3px 3px;height:12px;transform:translateY(4px) rotate(-8deg)}
@keyframes mascot-bob{0%,100%{translate:0 0}50%{translate:0 -4px}}
@keyframes mascot-blink{0%,91%,100%{scale:1 1}94%{scale:1 .08}97%{scale:1 1}}
.mascot__hint{position:absolute;right:calc(100% + 8px);top:50%;transform:translateY(-50%) translateX(6px);padding:6px 10px;border-radius:999px;background:var(--card);border:1px solid var(--glass-border);box-shadow:var(--clay);font-size:12px;font-weight:700;color:var(--text);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.mascot:hover .mascot__hint,.mascot.is-nudge .mascot__hint{opacity:1;transform:translateY(-50%) translateX(0)}
.mascot--mini{position:static;width:40px;height:40px;cursor:default}
.mascot--mini .mascot__body{width:38px;height:38px;animation:none;box-shadow:inset -4px -6px 10px rgba(0,0,0,.6),inset 4px 4px 8px rgba(255,255,255,.08)}
.mascot--mini .mascot__eye{width:6px;height:12px;border-radius:3px}
.mascot--mini .mascot__eye--l{left:12px;top:12px}.mascot--mini .mascot__eye--r{left:22px;top:10px;height:15px}
.mascot--mini .mascot__shine{left:9px;top:6px;width:12px;height:7px}
@media (prefers-reduced-motion:reduce){.mascot__body,.mascot__eye{animation:none}}

.acct{position:fixed;inset:0;z-index:80;display:flex;justify-content:flex-end;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .2s ease}
.acct.is-open{opacity:1}
.acct__panel{width:min(100%,460px);height:100%;display:flex;flex-direction:column;background:var(--bg);border-left:1px solid var(--glass-border);transform:translateX(30px);opacity:0;transition:transform .24s cubic-bezier(.2,.8,.2,1),opacity .2s ease;box-shadow:-20px 0 60px -30px rgba(0,0,0,.6)}
.acct.is-open .acct__panel{transform:none;opacity:1}
.acct__head{display:flex;align-items:center;gap:12px;padding:calc(14px + env(safe-area-inset-top,0px)) 16px 12px;border-bottom:1px solid var(--glass-border);flex:0 0 auto}
.acct__title{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.acct__t{font-weight:800;font-size:16px;letter-spacing:-.01em}.acct__s{font-size:12px;color:var(--muted)}
.acct__body{flex:1 1 auto;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:14px;-webkit-overflow-scrolling:touch}
.acct__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--glass-border);flex:0 0 auto}
.acct__me{display:flex;align-items:center;gap:10px;min-width:0}
.acct__avatar{width:34px;height:34px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#ff7a00,#ff0069 50%,#7638fa);color:#fff;font-weight:800;font-size:14px;text-transform:uppercase;flex:0 0 auto}
.acct__mail{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct__logout{width:auto;padding:0 14px;height:36px}
.acct__view{display:flex;flex-direction:column;gap:14px;flex:0 0 auto}
.acct__view>*{flex-shrink:0}
.acct__hero{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.acct__badge{display:inline-flex;height:24px;align-items:center;padding:0 10px;border-radius:999px;background:var(--glass-bg-2);border:1px solid var(--glass-border);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.acct__h{margin:0;font-size:24px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.acct__lead{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}
.acct__form{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:18px;background:var(--card);border:1px solid var(--glass-border)}
.acct__fine{margin:0;font-size:12px;line-height:1.5;color:var(--faint)}
/* account: illustration on the login screen */
.acct__scene{position:relative;height:190px;border-radius:20px;overflow:hidden;background:linear-gradient(160deg,var(--glass-bg-2),var(--card));border:1px solid var(--glass-border)}
.acct__scene .scene--wide .scene__person{height:100%;left:56%}
.acct__scene .scene--wide .scene__blob--a{inset:16% 18% -20% 26%}
.acct__scene .scene--wide .scene__blob--b{inset:6% 22% 38% 54%}
.acct__scene .scene__badge{left:14px;top:14px;font-size:12px;padding:6px 10px}
.acct__scene .scene--wide .scene__pill--1{left:14px;bottom:16px;top:auto;right:auto}
.acct__scene .scene--wide .scene__pill--3{right:12px;bottom:auto;top:52px}
.acct__scene .scene--wide .scene__acc--chart{left:8%;top:38%;width:30%}
.acct__scene .scene--wide .scene__lines{right:6%;top:26%;width:9%}
/* account: tips list */
.acct__tips{display:flex;flex-direction:column;gap:8px}
.acct__tipshead{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding:2px 2px 0}
.atip{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:16px;background:var(--card);border:1px solid var(--glass-border)}
.atip__ic{flex:0 0 auto;width:34px;height:34px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,#22c55e,#14b8a6);box-shadow:var(--clay-sm)}
.atip__ic--amber{background:linear-gradient(135deg,#f59e0b,#f97316)}.atip__ic--blue{background:linear-gradient(135deg,#3b82f6,#8b5cf6)}.atip__ic--pink{background:linear-gradient(135deg,#ec4899,#f43f5e)}
.atip__b{display:flex;flex-direction:column;gap:2px;min-width:0}
.atip__b b{font-size:14px;font-weight:800;letter-spacing:-.01em}.atip__b span{font-size:12.5px;line-height:1.5;color:var(--muted)}
/* account: one-time code input (six slots, sliding caret, digits roll in) */
.otp{position:relative;width:100%}
.otp__slots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;position:relative}
.otp__slot{position:relative;height:58px;border-radius:14px;border:1px solid var(--glass-border);background:var(--glass-bg);box-shadow:var(--clay-sm);display:flex;align-items:center;justify-content:center;font-family:ui-monospace,Menlo,monospace;font-size:24px;font-weight:700;overflow:hidden;transition:border-color .15s ease,background .15s ease,transform .15s ease}
.otp__slot i{font-style:normal;display:block;animation:otpin .22s cubic-bezier(.2,.9,.3,1.2) both}
.otp__slot.is-filled{border-color:color-mix(in srgb,var(--text) 35%,var(--glass-border))}
.otp.is-focus .otp__slot.is-on{border-color:var(--text);background:var(--card);transform:translateY(-1px)}
.otp__caret{position:absolute;top:14px;height:30px;width:2px;border-radius:2px;background:var(--text);left:0;opacity:0;pointer-events:none;transition:transform .18s cubic-bezier(.2,.8,.2,1)}
.otp.is-focus .otp__caret{opacity:1;animation:otpblink 1s steps(2,start) infinite}
.otp.is-focus.is-full .otp__caret{opacity:0;animation:none}
.otp__input{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;color:transparent;caret-color:transparent;background:transparent;border:0;outline:0;z-index:1;letter-spacing:100vw;cursor:text}
.otp.is-ok .otp__slot{border-color:#22c55e;background:rgba(34,197,94,.1);color:#22c55e}
.otp.is-bad .otp__slot{border-color:#f43f5e;background:rgba(244,63,94,.08);color:#f43f5e}
.otp.is-bad .otp__slots{animation:otpshake .4s cubic-bezier(.36,.07,.19,.97) both}
@keyframes otpin{from{opacity:0;transform:translateY(60%) scale(.8)}to{opacity:1;transform:none}}
@keyframes otpblink{50%{opacity:0}}
@keyframes otpshake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){.otp__slot i,.otp.is-bad .otp__slots,.otp.is-focus .otp__caret{animation:none}}
.acct__err{margin:0;font-size:13px;color:#f43f5e;font-weight:600}
.acct__links{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--faint)}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-size:12px;font-weight:700;color:var(--muted);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.acct__why{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--muted)}
.acct__why li{display:flex;align-items:center;gap:8px}.acct__why .ticon{color:#22c55e;flex:0 0 auto}
.acct__tabs{display:flex;gap:4px;padding:4px;border-radius:14px;background:var(--glass-bg-2);border:1px solid var(--glass-border);overflow-x:auto;scrollbar-width:none}
.acct__tabs::-webkit-scrollbar{display:none}
.acct__tab{flex:1 0 auto;height:34px;padding:0 12px;border:0;border-radius:11px;background:transparent;color:var(--muted);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.acct__tab.is-on{background:var(--chip-on-bg);color:var(--chip-on-text)}
.acct__tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.acct__tile{padding:12px 14px;border-radius:16px;background:var(--card);border:1px solid var(--glass-border);display:flex;flex-direction:column;gap:2px}
.acct__tile b{font-size:20px;font-weight:800;letter-spacing:-.02em}.acct__tile span{font-size:11.5px;color:var(--muted)}
.acct__sec{display:flex;flex-direction:column;gap:8px}
.acct__sech{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:800}
.acct__sech small{font-weight:600;color:var(--muted)}
.heat{display:grid;grid-template-columns:repeat(53,11px);grid-template-rows:repeat(7,11px);grid-auto-flow:column;gap:3px;padding:12px;border-radius:16px;background:var(--card);border:1px solid var(--glass-border);overflow-x:auto;scrollbar-width:none}
.heat::-webkit-scrollbar{display:none}
.heat i{display:block;border-radius:3px;background:var(--glass-bg-2)}
.heat i[data-l="1"]{background:rgba(34,197,94,.3)}.heat i[data-l="2"]{background:rgba(34,197,94,.5)}.heat i[data-l="3"]{background:rgba(34,197,94,.75)}.heat i[data-l="4"]{background:#22c55e}
.heat__legend{display:flex;align-items:center;justify-content:flex-end;gap:4px;font-size:11px;color:var(--faint)}
.heat__legend i{width:10px;height:10px;border-radius:2px;display:inline-block;background:var(--glass-bg-2)}
.bars{display:flex;align-items:flex-end;gap:6px;height:110px;padding:12px 12px 8px;border-radius:16px;background:var(--card);border:1px solid var(--glass-border)}
.bars__b{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%;min-width:0}
.bars__b i{display:block;width:100%;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,#22c55e,rgba(34,197,94,.45));min-height:2px}
.bars__b span{font-size:9.5px;color:var(--faint);white-space:nowrap}
.orow2{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:var(--card);border:1px solid var(--glass-border);text-decoration:none;color:inherit}
.orow2:hover{border-color:var(--text)}
.orow2__ic{width:36px;height:36px;border-radius:12px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;background:#3f3f46}
.orow2>.picon{flex:0 0 auto}
.orow2__ic[data-p="instagram"]{background:linear-gradient(212deg,#7638fa,#d300c5 46%,#ff0069 78%,#ff7a00)}.orow2__ic[data-p="youtube"]{background:#ff0033}.orow2__ic[data-p="tiktok"]{background:#0f0f0f;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}.orow2__ic[data-p="telegram"]{background:#229ed9}
.orow2__b{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.orow2__t{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.orow2__s{font-size:12px;color:var(--muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.orow2__r{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:0 0 auto}
.orow2__p{font-weight:800;font-size:14px;color:#22c55e}
.prog{height:4px;border-radius:999px;background:var(--glass-bg-2);overflow:hidden;width:100%}
.prog i{display:block;height:100%;background:#22c55e;border-radius:999px}
.acct__empty{padding:22px 16px;border-radius:16px;border:1px dashed var(--glass-border);text-align:center;color:var(--muted);font-size:13px;display:flex;flex-direction:column;gap:8px;align-items:center}
.acct__list{display:flex;flex-direction:column;gap:8px}
@media (max-width:640px){.acct__panel{width:100%;border-left:0}.acct__tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.acct[hidden],.acct__view[hidden],.acct__form[hidden],[data-acct-pane][hidden],.acct__foot[hidden],.mascot[hidden]{display:none}
/* account: activity timeline + order detail */
.acct__back{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:700;cursor:pointer;padding:0;align-self:flex-start}
.acct__back:hover{color:var(--text)}
.tl{list-style:none;margin:0;padding:0 0 0 4px;display:flex;flex-direction:column;position:relative}
.tl::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;background:var(--glass-border)}
.tl__i{position:relative;display:flex;gap:12px;padding:6px 0 10px}
.tl__dot{position:relative;z-index:1;width:12px;height:12px;border-radius:999px;margin:4px 0 0 4px;background:var(--bg);border:2px solid var(--muted);flex:0 0 auto}
.tl__i.is-on .tl__dot{border-color:var(--text);background:var(--text)}
.tl__i.is-ok .tl__dot{border-color:#22c55e;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.18)}
.tl__i.is-warn .tl__dot{border-color:#fb923c;background:#fb923c}
.tl__i.is-off .tl__dot{border-color:var(--faint);background:transparent}
.tl__b{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.tl__t{font-weight:700;font-size:13.5px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.tl__amt{color:#22c55e;font-weight:800;white-space:nowrap}
.tl__s{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.tl__d{font-size:11px;color:var(--faint)}
.det{padding:14px;border-radius:18px;background:var(--card);border:1px solid var(--glass-border);display:flex;flex-direction:column;gap:10px}
.det__row{display:flex;align-items:center;gap:12px}
.det__b{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.det__t{font-weight:800;font-size:16px;letter-spacing:-.01em}
.det__s{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.det__p{font-weight:800;font-size:18px;color:#22c55e;flex:0 0 auto}
.det__meta{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--muted)}
.det__meta span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
.det__actions{display:flex;gap:8px}.det__actions .btn-ghost{flex:1;height:42px}
.prog--lg{height:8px}
.acct__tiles--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.acct__tiles--3 .acct__tile b{font-size:15px}.acct__tiles--3 .acct__tile span{font-size:10.5px}
.wcard{padding:14px;border-radius:16px;border:1px dashed var(--glass-border);display:flex;flex-direction:column;gap:6px}
.wcard.is-on{border-style:solid;border-color:rgba(34,197,94,.5);background:rgba(34,197,94,.06)}
.wcard b{font-size:15px;font-weight:800}.wcard span{font-size:12px;color:var(--muted);line-height:1.5}
.wcard .cta{margin-top:6px}

/* account: support chat (tickets, thread bubbles, safety notes, composer) */
.acct__tab{position:relative}
.acct__tab.has-dot::after{content:"";position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:999px;background:#f59e0b;box-shadow:0 0 0 2px var(--bg)}
.tk__new{white-space:nowrap}
.tkrow{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border-radius:16px;background:var(--card);border:1px solid var(--glass-border);color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s ease,transform .15s ease}
.tkrow:hover{border-color:color-mix(in srgb,var(--text) 25%,var(--glass-border));transform:translateY(-1px)}
.tkrow.is-unread{border-color:#f59e0b}
.tkrow__b{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}
.tkrow__t{font-weight:700;font-size:14px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tkrow.is-unread .tkrow__t::before{content:"";display:inline-block;width:8px;height:8px;border-radius:999px;background:#f59e0b;margin-right:6px;vertical-align:middle}
.tkrow__s{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.tkrow__r{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:0 0 auto;font-size:11px;color:var(--faint)}
.tkrow__time{font-weight:700;color:var(--muted)}
.tkhead{display:flex;flex-direction:column;gap:2px}
.tkhead__t{font-weight:800;font-size:16px;letter-spacing:-.01em}.tkhead__s{font-size:12px;color:var(--muted)}
.cchat{list-style:none;margin:0;padding:12px;display:flex;flex-direction:column;gap:10px;border-radius:18px;background:var(--glass-bg-2);border:1px solid var(--glass-border)}
.cchat--thread{max-height:min(52vh,460px);overflow-y:auto;scroll-behavior:smooth}
.cchat--note{padding:0;background:transparent;border:0}
.cb{display:flex;flex-direction:row;align-items:flex-end;gap:8px;max-width:92%;animation:pillin .35s ease both}
.cb--me{align-self:flex-end;flex-direction:row-reverse}.cb--team{align-self:flex-start}
.cb__stack{display:flex;flex-direction:column;gap:4px;min-width:0}
.cb--me .cb__stack{align-items:flex-end}
.cb__av{flex:0 0 auto;width:28px;height:28px;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.mascot--xs{position:static;width:28px;height:28px;cursor:default;animation:avbob 5s ease-in-out infinite}
.mascot--xs .mascot__body{width:26px;height:26px;animation:none;box-shadow:inset -3px -4px 7px rgba(0,0,0,.6),inset 3px 3px 6px rgba(255,255,255,.08),0 4px 10px rgba(0,0,0,.25)}
.mascot--xs .mascot__eye{width:4px;height:8px;border-radius:2px;box-shadow:0 0 3px rgba(255,255,255,.35)}
.mascot--xs .mascot__eye--l{left:8px;top:8px}.mascot--xs .mascot__eye--r{left:15px;top:7px;height:10px}
.mascot--xs .mascot__shine{left:6px;top:4px;width:8px;height:5px}
.acct__avatar--xs{width:26px;height:26px;box-shadow:0 4px 10px rgba(0,0,0,.2),0 0 0 2px var(--card)}
.acct__avatar--xs::before,.acct__avatar--xs::after{top:9px;width:4px;height:6px}
.acct__avatar--xs::before{left:8px}.acct__avatar--xs::after{right:8px}
.acct__avatar--xs i{bottom:6px;width:8px;height:4px}
.cb__body{white-space:pre-wrap;line-height:1.5;font-size:14px;padding:10px 14px;border-radius:18px;background:var(--card);border:1px solid var(--glass-border);overflow-wrap:anywhere}
.cb--me .cb__body{background:var(--cta-bg);color:var(--cta-text);border-color:transparent;border-bottom-right-radius:6px}
.cb--team .cb__body{border-bottom-left-radius:6px}
.cb__meta{font-size:11px;color:var(--faint);padding:0 6px}
.cnote{display:flex;align-items:flex-start;gap:8px;align-self:center;max-width:100%;padding:8px 12px;border-radius:12px;background:rgba(34,197,94,.08);border:1px dashed rgba(34,197,94,.4);font-size:12px;line-height:1.45;color:var(--muted)}
.cnote__ic{flex:0 0 auto;color:#22c55e;margin-top:1px}
.cnote--sys{background:transparent;border:0;justify-content:center;text-align:center;color:var(--faint);padding:2px 8px}
.ccomp{display:flex;flex-direction:column;gap:8px}
.ccomp .textarea{min-height:118px;padding:44px 14px 12px;font-size:15px}
.ccomp__tools{display:flex;align-items:center;gap:10px;min-height:32px}
.ccomp__hint{flex:1;font-size:12px;color:var(--faint);min-width:0}
.ccomp__send{flex:0 0 auto;width:40px;height:40px;border-radius:999px;border:0;background:var(--cta-bg);color:var(--cta-text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--clay-cta)}
.ccomp__send:disabled{opacity:.5}
.tabox{position:relative}
.tabox .textarea{padding-top:44px;min-height:118px}
.gfix{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px 0 6px;border-radius:999px;border:1px solid var(--glass-border);background:var(--card);color:var(--text);font:inherit;font-size:12px;font-weight:700;cursor:pointer;box-shadow:var(--clay-sm);transition:transform .15s ease}
.gfix:hover{transform:translateY(-1px)}.gfix:disabled{opacity:.6;transform:none}
.gfix__ic{filter:drop-shadow(0 2px 3px rgba(37,99,235,.45)) drop-shadow(0 -1px 0 rgba(255,255,255,.6))}
.cb--typing .cb__body{display:inline-flex;gap:4px;align-items:center;padding:12px 14px}
.cb--typing i{width:7px;height:7px;border-radius:999px;background:var(--muted);display:block;animation:typing 1.2s ease-in-out infinite}
.cb--typing i:nth-child(2){animation-delay:.2s}.cb--typing i:nth-child(3){animation-delay:.4s}
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.linkbtn--ai{display:inline-flex;align-items:center;gap:5px;text-decoration:none;color:var(--text);height:30px;padding:0 10px;border-radius:999px;border:1px solid var(--glass-border);background:var(--glass-bg-2)}
.linkbtn--ai svg{color:#a78bfa}
.linkbtn--ai:disabled{opacity:.6}
.chipset{display:flex;gap:6px;flex-wrap:wrap}
.chipset .chip{height:32px;padding:0 12px;font-size:12px;cursor:pointer;font-family:inherit}
select.input{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px}
/* account: light-mode heatmap, animated avatar, ticket rows, order rows, facts + count chart */
:root[data-theme="light"] .heat i{background:#e9e9ee}
:root[data-theme="light"] .heat i[data-l="1"]{background:#bbf7d0}:root[data-theme="light"] .heat i[data-l="2"]{background:#86efac}:root[data-theme="light"] .heat i[data-l="3"]{background:#4ade80}:root[data-theme="light"] .heat i[data-l="4"]{background:#16a34a}
:root[data-theme="light"] .heat__legend i{background:#e9e9ee}
.acct__avatar{--hue:280;position:relative;overflow:visible;background:linear-gradient(135deg,hsl(var(--hue) 90% 62%),hsl(calc(var(--hue) + 40) 85% 50%));box-shadow:var(--clay-sm),0 0 0 2px var(--card);font-size:0;animation:avbob 5s ease-in-out infinite}
.acct__avatar::before,.acct__avatar::after{content:"";position:absolute;top:13px;width:5px;height:8px;border-radius:999px;background:#fff;box-shadow:inset 0 -2px 0 rgba(0,0,0,.15);animation:avblink 4s ease-in-out infinite}
.acct__avatar::before{left:11px}.acct__avatar::after{right:11px;animation-delay:.05s}
.acct__avatar i{position:absolute;left:50%;bottom:8px;width:10px;height:5px;border-radius:0 0 10px 10px;background:#fff;transform:translateX(-50%);opacity:.95}
.acct__avatar b{position:absolute;right:-3px;top:-3px;width:11px;height:11px;border-radius:999px;background:#22c55e;border:2px solid var(--card);animation:pdot 2.4s ease-out infinite}
@keyframes avblink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes avbob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2px) rotate(-4deg)}}
.tkrow{padding:10px 12px}
.tkrow__ic{flex:0 0 auto;width:36px;height:36px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,#8b5cf6,#3b82f6)}
.tkrow__ic--warranty{background:linear-gradient(135deg,#f59e0b,#f97316)}.tkrow__ic--payment{background:linear-gradient(135deg,#22c55e,#14b8a6)}.tkrow__ic--other{background:linear-gradient(135deg,#64748b,#334155)}
.tkrow__t{font-size:14px;-webkit-line-clamp:1}
.tkrow__r{color:var(--faint);flex-direction:row;align-items:center;gap:6px}
.orow2__r{gap:3px}
.orow2__w{font-size:11px;color:var(--muted)}
.orow2__chev{color:var(--faint);margin-top:2px}
.orow2__pct{font-size:11px;color:#22c55e;font-weight:700}
.orow2 .prog{margin-top:4px}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.fact{padding:10px 12px;border-radius:14px;background:var(--card);border:1px solid var(--glass-border);display:flex;flex-direction:column;gap:2px;min-width:0}
.fact span{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.fact b{font-size:14px;font-weight:800;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gchart{padding:12px;border-radius:16px;background:var(--card);border:1px solid var(--glass-border);display:flex;flex-direction:column;gap:8px}
.gchart svg{width:100%;height:120px;display:block;overflow:visible}
.gchart__line{fill:none;stroke:#22c55e;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.gchart__area{fill:rgba(34,197,94,.14)}
.gchart__target{stroke:var(--faint);stroke-width:1.5;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.gchart circle{fill:var(--card);stroke:#22c55e;stroke-width:2;vector-effect:non-scaling-stroke}
.gchart__legend{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--muted)}
.gchart__legend span{display:inline-flex;align-items:center;gap:6px}
.gchart__k{display:inline-block;width:14px;height:0;border-top:2.5px solid #22c55e;border-radius:2px}
.gchart__k--target{border-top:2px dashed var(--faint)}
.det__actions .btn-ghost{gap:6px}
/* account: order picker inside a new ticket (dropdown with search, multi-select) */
.opick{display:flex;flex-direction:column;gap:8px;position:relative}
.opick__btn{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;cursor:pointer;font-weight:600}
.opick__btn.is-open{border-color:var(--text);box-shadow:0 0 0 3px color-mix(in srgb,var(--text) 12%,transparent)}
.opick__chev{flex:0 0 auto;color:var(--muted);transition:transform .15s ease}.opick__btn.is-open .opick__chev{transform:rotate(180deg)}
.opick__menu{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:16px;background:var(--card);border:1px solid var(--glass-border);box-shadow:var(--clay)}
.opick__menu[hidden]{display:none}
.opick__search{height:44px;font-size:14px}
.opick__list{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow-y:auto;padding:2px;margin:0 -2px;scrollbar-width:thin}
.opick__row{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:14px;background:var(--glass-bg-2);border:1px solid var(--glass-border);color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s ease}
.opick__row:hover{border-color:color-mix(in srgb,var(--text) 30%,var(--glass-border))}
.opick__row.is-on{border-color:rgba(34,197,94,.6);background:rgba(34,197,94,.07)}
.opick__chk{flex:0 0 auto;width:20px;height:20px;border-radius:7px;border:1.5px solid var(--glass-border);display:inline-flex;align-items:center;justify-content:center;color:#fff;background:transparent}
.opick__chk svg{opacity:0}
.opick__row.is-on .opick__chk{background:#22c55e;border-color:#22c55e}.opick__row.is-on .opick__chk svg{opacity:1}
.opick__row .picon{flex:0 0 auto;transform:scale(.85);margin:-3px}
.opick__b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.opick__t{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opick__s{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.opick__s b{color:#22c55e;font-weight:700}
.opick__p{font-size:13px;font-weight:800;color:#22c55e;flex:0 0 auto}
.opick__more{font-size:12px;color:var(--faint);padding:6px 4px;text-align:center}
.opick__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:2px}
.opick__done{height:36px;padding:0 16px;border-radius:999px;border:0;background:var(--cta-bg);color:var(--cta-text);font:inherit;font-size:13px;font-weight:800;cursor:pointer;box-shadow:var(--clay-cta)}
.opick__chips{display:flex;flex-wrap:wrap;gap:6px}
.opick__chips[hidden]{display:none}
.opick__chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;height:32px;padding:0 6px 0 4px;border-radius:999px;background:var(--glass-bg-2);border:1px solid var(--glass-border);font-size:12px;font-weight:700}
.opick__chip>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opick__chip .picon{transform:scale(.6);margin:-8px}
.opick__chip button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:16px;line-height:1;cursor:pointer;padding:0 4px}
/* support chat: photo attachments */
.tkprev{display:flex;gap:8px;flex-wrap:wrap;width:100%}
.tkprev[hidden]{display:none}
.tkprev__i{position:relative;width:64px;height:64px;border-radius:12px;overflow:hidden;border:1px solid var(--glass-border);background:var(--glass-bg-2)}
.tkprev__i img{width:100%;height:100%;object-fit:cover;display:block}
.tkprev__i button{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:999px;border:0;background:rgba(0,0,0,.65);color:#fff;font-size:14px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.ccomp__tools{flex-wrap:wrap}
.cb__imgs{display:flex;gap:6px;flex-wrap:wrap;max-width:100%}
.cb__img{display:block;width:150px;max-width:100%;border-radius:14px;overflow:hidden;border:1px solid var(--glass-border);background:var(--glass-bg-2)}
.cb__img img{width:100%;height:100%;object-fit:cover;display:block}
.cb--me .cb__imgs{justify-content:flex-end}
.cb__gone{font-size:12px;color:var(--faint);padding:8px 12px;border:1px dashed var(--glass-border);border-radius:12px}
.gattach{right:auto;left:8px}
.gattach svg{color:#a78bfa}
.gattach.is-full{opacity:.6}
/* photo previews: preparing spinner, broken placeholder, upload progress */
.tkprev__i{display:inline-flex;align-items:center;justify-content:center}
.tkprev__spin,.tkprev__ph{display:none;position:absolute;inset:0;align-items:center;justify-content:center}
.tkprev__i.is-busy img{opacity:.35;filter:blur(1px)}
.tkprev__i.is-busy .tkprev__spin{display:flex}
.tkprev__spin::after{content:"";width:18px;height:18px;border-radius:999px;border:2.5px solid var(--faint);border-top-color:var(--text);animation:gspin .8s linear infinite}
.tkprev__i.is-broken img{opacity:0}.tkprev__i.is-broken .tkprev__ph{display:flex;color:var(--faint)}
.tkprev__up{flex-basis:100%;display:flex;flex-direction:column;gap:4px}
.tkprev__up[hidden]{display:none}
.tkprev__up i{display:block;height:6px;border-radius:999px;background:linear-gradient(90deg,#22c55e,#14b8a6);width:4%;transition:width .2s ease;box-shadow:0 0 0 1px var(--glass-border)}
.tkprev__up b{font-size:11.5px;color:var(--muted);font-weight:700}
.ccomp__send.is-busy{opacity:.5;pointer-events:none}
@keyframes gspin{to{transform:rotate(360deg)}}
/* account: sign-in template (steps, input group, perks, mail chip, resend timer) */
.acct__form--auth{gap:12px}
.steps{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:8px}
.steps__i{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--faint)}
.steps__i i{width:20px;height:20px;border-radius:999px;border:1.5px solid var(--glass-border);display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:11px;color:var(--muted);background:var(--glass-bg-2)}
.steps__i.is-on{color:var(--text)}.steps__i.is-on i{background:var(--cta-bg);color:var(--cta-text);border-color:transparent}
.steps__i.is-done{color:var(--muted)}.steps__i.is-done i{background:#22c55e;color:#fff;border-color:transparent}
.steps__line{flex:1;height:2px;border-radius:2px;background:var(--glass-border)}.steps__line.is-on{background:linear-gradient(90deg,#22c55e,var(--text))}
.igroup{position:relative;display:flex;align-items:center}
.igroup__ic{position:absolute;left:16px;color:var(--muted);display:flex;pointer-events:none}
.igroup__in{padding-left:44px;padding-right:62px;height:56px;border-radius:999px}
.igroup__go{position:absolute;right:6px;width:44px;height:44px;border-radius:999px;border:0;background:var(--cta-bg);color:var(--cta-text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--clay-cta);transition:transform .15s ease}
.igroup__go:hover{transform:translateX(1px)}.igroup__go:disabled{opacity:.6;transform:none}
.igroup__go .cta__spin{position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:999px;border:2.5px solid rgba(255,255,255,.35);border-top-color:currentColor;opacity:0;animation:gspin .8s linear infinite}
.igroup__go.is-loading .cta__label{opacity:0}.igroup__go.is-loading .cta__spin{opacity:1}
.perks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.perks li{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:999px;background:var(--glass-bg-2);border:1px solid var(--glass-border);font-size:11.5px;font-weight:700;color:var(--muted)}
.perks .ticon{color:#22c55e}
.mailchip{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--glass-bg-2);border:1px solid var(--glass-border)}
.mailchip__dot{width:10px;height:10px;border-radius:999px;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:pdot 1.6s ease-out infinite;flex:0 0 auto}
.mailchip__t{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.mailchip__t b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mailchip__t span{font-size:11.5px;color:var(--muted)}
.acct__links--resend{flex-wrap:wrap;row-gap:4px}
.acct__timer{color:var(--muted);font-size:12px}.acct__timer b{color:var(--text)}
.acct__timer[hidden],.acct__links [hidden]{display:none}
.otp__slot{border-radius:16px}
.otp.is-focus .otp__slot.is-on{box-shadow:0 0 0 3px color-mix(in srgb,var(--text) 12%,transparent)}
/* account: scenes inside panes + spend chart */
.acct__scene--orders,.acct__scene--support,.acct__scene--warranty{height:170px}
.acct__scene--sm{height:140px}
.acct__scene--sm .scene__badge{font-size:11px;padding:5px 9px}
.gchart--spend svg{height:120px}
.gchart__lbl{font-size:10px;fill:var(--faint);font-family:var(--font)}
.gchart__peak{font-size:11px;font-weight:800;fill:#22c55e;font-family:var(--font)}
/* account: section menu (command-style) */
.secmenu{position:relative;z-index:40}
.secmenu__btn{width:100%;height:50px;border-radius:16px;border:1px solid var(--glass-border);background:var(--card);color:var(--text);display:flex;align-items:center;gap:10px;padding:0 14px;font:inherit;font-weight:800;font-size:15px;cursor:pointer;box-shadow:var(--clay-sm);transition:border-color .15s ease}
.secmenu__btn.is-open{border-color:var(--text)}
.secmenu__ic{display:inline-flex;color:var(--text)}
.secmenu__t{flex:1;text-align:left}
.secmenu__n{font-size:12px;font-weight:700;color:var(--muted)}
.secmenu__chev{color:var(--muted);transition:transform .15s ease}.secmenu__btn.is-open .secmenu__chev{transform:rotate(180deg)}
.secmenu__menu{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:41;border-radius:18px;background:var(--bg);background-image:linear-gradient(var(--glass-bg-2),var(--glass-bg-2));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--glass-border);box-shadow:0 24px 60px rgba(0,0,0,.35);padding:6px;display:flex;flex-direction:column;gap:2px;animation:pillin .18s ease both}
.secmenu__menu[hidden]{display:none}
.secmenu__i{height:46px;border-radius:12px;border:0;background:transparent;color:var(--text);display:flex;align-items:center;gap:12px;padding:0 12px;font:inherit;font-weight:700;font-size:14px;cursor:pointer;text-align:left}
.secmenu__i:hover{background:var(--glass-bg-2)}
.secmenu__i.is-on{background:var(--cta-bg);color:var(--cta-text)}
.secmenu__iic{width:30px;height:30px;border-radius:10px;background:var(--glass-bg-2);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.secmenu__i.is-on .secmenu__iic{background:rgba(255,255,255,.14)}
:root[data-theme="light"] .secmenu__i.is-on .secmenu__iic{background:rgba(255,255,255,.18)}
.secmenu__il{flex:1}
.secmenu__cnt{font-size:12px;font-weight:600;opacity:.7}
.secmenu__ok{opacity:0}.secmenu__i.is-on .secmenu__ok{opacity:1}
.acct__tab.has-dot::after{display:none}
/* account: generated avatars */
.acct__avatar--beams{background:var(--card);animation:none;box-shadow:0 0 0 2px var(--card),var(--clay-sm)}
.acct__avatar--beams::before,.acct__avatar--beams::after{display:none}
.acct__avatar--beams .beams{width:34px;height:34px;border-radius:999px;display:block}
.cb__av--beams .beams{border-radius:999px;box-shadow:0 4px 10px rgba(0,0,0,.2),0 0 0 2px var(--card);animation:avbob 5s ease-in-out infinite}
/* chat: day separators, reactions, new-message pill */
.cday{display:flex;align-items:center;gap:10px;color:var(--faint);font-size:11px;font-weight:700;margin:2px 0}
.cday::before,.cday::after{content:"";flex:1;height:1px;background:var(--glass-border)}
.cwrap{position:relative}
.cnew{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);height:32px;padding:0 14px;border-radius:999px;border:0;background:#22c55e;color:#052e16;font:inherit;font-weight:800;font-size:12px;cursor:pointer;box-shadow:0 10px 24px rgba(34,197,94,.35);animation:pillin .3s ease both}
.cnew[hidden]{display:none}
.rx{position:relative;display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:-4px}
.cb--me .rx{justify-content:flex-end}
.rx__chip{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 8px 0 4px;border-radius:999px;background:var(--card);border:1px solid var(--glass-border);font:inherit;font-size:11px;font-weight:800;color:var(--muted);cursor:pointer;transition:transform .15s ease,border-color .15s ease}
.rx__chip img{width:18px;height:18px;display:block}
.rx__chip.is-mine{border-color:#22c55e;color:var(--text);background:rgba(34,197,94,.08)}
.rx__chip.is-pop{animation:rxpop .35s cubic-bezier(.2,.9,.3,1.4)}
.rx__add{display:inline-flex;align-items:center;gap:3px;height:26px;padding:0 8px 0 4px;border-radius:999px;border:1px dashed var(--glass-border);background:transparent;color:var(--faint);font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.rx__add img{width:16px;height:16px;opacity:.7;filter:grayscale(.4)}
.rx__add:hover{color:var(--text);border-style:solid}
.rxpick{position:absolute;left:0;bottom:calc(100% + 6px);display:flex;gap:2px;padding:6px;border-radius:999px;background:var(--card);border:1px solid var(--glass-border);box-shadow:0 12px 30px rgba(0,0,0,.35);z-index:3;animation:pillin .18s ease both}
.rxpick[hidden]{display:none}
.rxpick__i{width:38px;height:38px;border-radius:999px;border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s cubic-bezier(.2,.9,.3,1.4)}
.rxpick__i img{width:28px;height:28px;display:block;filter:drop-shadow(0 3px 4px rgba(0,0,0,.25))}
.rxpick__i:hover{transform:translateY(-4px) scale(1.25)}
@keyframes rxpop{0%{transform:scale(.7)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
/* lightbox inside the panel */
.lb{position:absolute;inset:0;z-index:20;background:rgba(0,0,0,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;opacity:0;transition:opacity .18s ease}
.lb.is-open{opacity:1}.lb[hidden]{display:none}
.lb__stage{max-width:100%;max-height:60vh;border-radius:20px;overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.12);cursor:zoom-in;scrollbar-width:none}
.lb__stage.is-zoom{cursor:zoom-out}
.lb__img{display:block;max-width:100%;max-height:60vh;transition:transform .2s ease;transform-origin:center}
.lb__stage.is-zoom .lb__img{max-width:none;max-height:none;width:200%}
.lb__cap{font-size:12px;color:#d4d4d8;text-align:center}
.lb__tools{display:flex;gap:8px}
.lb__btn{width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none}
.lb__btn[hidden]{display:none}
.lb__btn--x{background:#fff;color:#0a0a0b;border-color:transparent}
.lb__dots{display:flex;gap:6px}.lb__dots i{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.3)}.lb__dots i.is-on{background:#fff}
.acct__panel{position:relative}
/* order picker: command palette look */
.opick__menu{padding:0;overflow:hidden}
.opick__srow{display:flex;align-items:center;gap:10px;padding:0 14px;height:50px;border-bottom:1px solid var(--glass-border);color:var(--muted)}
.opick__search{flex:1;min-width:0;border:0;background:transparent;color:var(--text);font:inherit;font-size:15px;outline:none;height:100%}
.opick__srow kbd{font:inherit;font-size:11px;padding:2px 6px;border-radius:6px;border:1px solid var(--glass-border);color:var(--faint)}
.opick__list{padding:6px;margin:0;max-height:300px}
.opick__grp{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding:8px 10px 4px}
.opick__foot{padding:10px 12px;border-top:1px solid var(--glass-border)}
.opick__n{font-size:12px;color:var(--muted);flex:1}.opick__n b{color:var(--text)}
/* chat: WhatsApp-style date chips, clearer reactions */
.cday{justify-content:center;margin:6px 0}
.cday::before,.cday::after{display:none}
.cday span{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:var(--glass-bg-2);border:1px solid var(--glass-border);color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.02em;box-shadow:var(--clay-sm)}
.rx__chip{height:30px;padding:0 9px 0 5px;font-size:12px;gap:5px}
.rx__chip img{width:22px;height:22px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.rx__add{height:30px;padding:0 10px 0 6px;font-size:12px}
.rx__add img{width:20px;height:20px;opacity:1;filter:grayscale(1) opacity(.7)}
.rxpick{padding:8px;border-radius:22px;gap:4px;max-width:calc(100vw - 48px)}
.rxpick__i{width:54px;height:58px;border-radius:16px;flex-direction:column;gap:3px}
.rxpick__i img{width:34px;height:34px}
.rxpick__i span{font-size:10px;font-weight:800;color:var(--muted);line-height:1}
.rxpick__i:hover{transform:translateY(-3px) scale(1.08);background:var(--glass-bg-2)}
.rxpick__i:hover span{color:var(--text)}
/* reaction picker sits in the flow under the message so the scroll box never clips it */
.rxpick{position:static;flex-basis:100%;margin-top:4px;justify-content:flex-start;box-shadow:var(--clay-sm)}
.cb--me .rxpick{justify-content:flex-end}
/* account: pull-to-refresh + header refresh */
.ptr{height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:700;color:var(--muted);transition:height .2s ease;flex:0 0 auto;margin:-16px -16px 0;padding:0 16px}
.ptr__spin{width:18px;height:18px;border-radius:999px;border:2.5px solid var(--glass-border);border-top-color:var(--text);transform:rotate(0deg);transition:transform .2s ease}
.ptr.is-ready .ptr__spin{transform:rotate(180deg);border-top-color:#22c55e}
.ptr.is-busy .ptr__spin{animation:gspin .8s linear infinite;border-top-color:var(--text)}
.acct__body{user-select:none}
.acct__body input,.acct__body textarea,.acct__body .cb__body,.acct__body .det,.acct__body .tl,.acct__body .facts{user-select:text}
/* chat: reply quotes */
.cb__quote{display:flex;flex-direction:column;gap:2px;align-items:flex-start;max-width:100%;padding:8px 10px 8px 12px;border-radius:12px;border:0;border-left:3px solid #22c55e;background:var(--glass-bg-2);color:var(--muted);font:inherit;font-size:12px;line-height:1.35;text-align:left;cursor:pointer}
.cb__quote b{color:#22c55e;font-size:11px}
.cb__quote span{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cb--me .cb__quote{background:var(--cta-bg);color:var(--cta-text);border-left-color:#22c55e;opacity:.9}
.cb--me .cb__quote b{color:#22c55e}
.cb.is-flash .cb__body{box-shadow:0 0 0 3px rgba(34,197,94,.55);transition:box-shadow .3s ease}
.rpbar{display:flex;align-items:center;gap:8px;padding:8px 10px 8px 12px;border-radius:12px;border-left:3px solid #22c55e;background:var(--glass-bg-2);margin-bottom:-2px}
.rpbar[hidden]{display:none}
.rpbar__b{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0;font-size:12px;color:var(--muted)}
.rpbar__b b{color:#22c55e;font-size:11px}.rpbar__b span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rpbar__x{width:28px;height:28px;border-radius:999px;border:0;background:var(--card);color:var(--muted);font-size:16px;cursor:pointer;flex:0 0 auto}
.rx__reply svg{color:var(--muted)}
/* composer: send button inside the box, no empty row underneath; account row lives in the section menu */
.ccomp{position:relative}
.tabox--send .textarea{padding-right:60px;padding-bottom:52px}
.gsend{position:absolute;right:8px;bottom:8px;width:40px;height:40px}
.ccomp__tools--slim{min-height:0}
.ccomp__tools--slim:has(.ccomp__hint:empty):has([data-tk-previews][hidden]){display:none}
.secmenu__me{display:flex;align-items:center;gap:10px;margin-top:4px;padding:8px 8px 6px 10px;border-top:1px solid var(--glass-border)}
.secmenu__me .acct__avatar{width:30px;height:30px}.secmenu__me .acct__avatar .beams{width:30px;height:30px}
.secmenu__mail{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.secmenu__out{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--glass-border);background:var(--glass-bg-2);color:var(--text);font:inherit;font-size:12px;font-weight:800;cursor:pointer}
.secmenu__out:hover{border-color:#f43f5e;color:#f43f5e}
/* chat: fluid sizes so phones get a lighter, less crowded thread */
.cchat{gap:clamp(8px,2.2vw,12px);padding:clamp(8px,2.4vw,12px)}
.cb{gap:clamp(5px,1.6vw,8px);max-width:min(88%,560px)}
.cb__body{font-size:clamp(12.5px,3.4vw,14px);line-height:1.45;padding:clamp(7px,2vw,10px) clamp(10px,2.8vw,14px);border-radius:clamp(14px,4vw,18px)}
.cb__meta{font-size:clamp(9.5px,2.6vw,11px);padding:0 4px}
.cb__av{width:clamp(22px,6vw,28px);height:clamp(22px,6vw,28px);margin-bottom:16px}
.cb__av--beams .beams,.mascot--xs,.mascot--xs .mascot__body{width:clamp(22px,6vw,26px);height:clamp(22px,6vw,26px)}
.cb__quote{font-size:clamp(11px,3vw,12px);padding:6px 9px 6px 10px}
.cb__img{width:clamp(120px,36vw,150px)}
.cday span{height:22px;font-size:clamp(10px,2.7vw,11px);padding:0 9px}
.cnote{font-size:clamp(11px,2.9vw,12px);padding:7px 10px}
.rx{gap:3px}
.rx__chip{height:clamp(24px,6.6vw,30px);font-size:clamp(10.5px,2.8vw,12px);padding:0 7px 0 4px;gap:4px}
.rx__chip img{width:clamp(16px,4.8vw,22px);height:clamp(16px,4.8vw,22px)}
.rx__add{height:clamp(24px,6.6vw,30px);font-size:clamp(10.5px,2.8vw,12px);padding:0 8px 0 5px}
.rx__add img{width:clamp(14px,4.2vw,18px);height:clamp(14px,4.2vw,18px)}
.rxpick__i{width:clamp(44px,13vw,54px);height:clamp(50px,14vw,58px)}
.rxpick__i img{width:clamp(26px,8vw,34px);height:clamp(26px,8vw,34px)}
.ccomp .textarea{font-size:clamp(14px,3.8vw,15px)}
.tkhead__t{font-size:clamp(14px,3.9vw,16px)}
@media (max-width:420px){
  .cb__stack{gap:3px}
  .cb__av{margin-bottom:14px}
  .gfix{height:26px;font-size:11px;padding:0 8px 0 5px}.gfix__ic{width:15px;height:15px}
  .tabox .textarea,.ccomp .tabox .textarea{padding-top:40px;min-height:104px}
  .tabox--send .textarea{padding-bottom:48px}
  .gsend{width:36px;height:36px}
}
/* checkout: promo codes, offers, store credit, totals */
.promo{display:flex;flex-direction:column;gap:8px}
.promo__row{display:flex;gap:8px;align-items:center}
.promo__row[hidden]{display:none}
.promo__wrap{flex:1;min-width:0;position:relative}
.promo__in{text-transform:uppercase;letter-spacing:.06em;font-weight:700;padding-right:96px}
.promo__in::placeholder{text-transform:none;letter-spacing:0;font-weight:500}
.promo__btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);height:40px;padding:0 16px;border-radius:999px;border:0;background:var(--cta-bg);color:var(--cta-text);font:inherit;font-weight:800;font-size:13px;cursor:pointer;box-shadow:var(--clay-cta);transition:transform .15s ease}
.promo__btn:active{transform:translateY(-50%) scale(.96)}
.promo__ok{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.35)}
.promo__ok[hidden]{display:none}
.promo__chip{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 6px 0 10px;border-radius:999px;background:var(--card);border:1px solid rgba(34,197,94,.45);color:var(--text);font-size:13px;font-weight:800;letter-spacing:.06em;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.promo__chip svg{color:#22c55e;flex:0 0 auto}
.promo__x{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:0;background:rgba(127,127,127,.15);color:var(--muted);cursor:pointer;padding:0;transition:background .15s ease,color .15s ease}
.promo__x:hover{background:#f43f5e;color:#fff}
.promo__save{font-size:14px;font-weight:800;color:#22c55e;white-space:nowrap}
.promo__save::before{content:"You save ";font-size:12px;font-weight:600;color:var(--muted)}
.promo__msg{margin:0;font-size:12.5px;color:var(--muted)}.promo__msg.is-bad{color:#f43f5e;font-weight:600}
.promo__msg[hidden]{display:none}
.offers{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.offers[hidden]{display:none}
.offers__t{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.offers__list{display:flex;flex-direction:column;gap:8px}
/* coupon tickets: a dark stub with the code, a perforated edge, then the offer text */
.offer{--stub:96px;position:relative;display:grid;grid-template-columns:var(--stub) minmax(0,1fr) auto;align-items:center;gap:0 12px;width:100%;padding:0 14px 0 0;border-radius:16px;border:1px solid var(--glass-border);background:var(--glass-bg-2);color:var(--text);font:inherit;text-align:left;cursor:pointer;overflow:hidden;transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.offer:hover{border-color:var(--text);transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.08)}
.offer::before,.offer::after{content:"";position:absolute;left:calc(var(--stub) - 7px);width:14px;height:14px;border-radius:50%;background:var(--card);border:1px solid var(--glass-border);z-index:1}
.offer::before{top:-8px}.offer::after{bottom:-8px}
.offer__stub{align-self:stretch;display:flex;align-items:center;justify-content:center;padding:14px 10px;background:linear-gradient(135deg,#111,#2a2a2a);border-right:2px dashed rgba(255,255,255,.35)}
.offer__code{font-family:ui-monospace,Menlo,monospace;font-size:12px;font-weight:800;letter-spacing:.08em;color:#fff;text-align:center;overflow-wrap:anywhere}
.offer__b{min-width:0;display:flex;flex-direction:column;gap:2px;padding:10px 0}
.offer__b b{font-size:13.5px;line-height:1.3}.offer__b span{font-size:12px;color:var(--muted);line-height:1.35}
.offer__cta{flex:0 0 auto;font-size:12px;font-weight:800;color:var(--text);padding:6px 10px;border-radius:999px;border:1px solid var(--glass-border);background:var(--card);white-space:nowrap}
.offer.is-on{border-style:solid;border-color:#22c55e;background:rgba(34,197,94,.08)}
.offer.is-on .offer__stub{background:linear-gradient(135deg,#15803d,#22c55e);border-right-color:rgba(255,255,255,.5)}
.offer.is-on .offer__cta{background:#22c55e;border-color:#22c55e;color:#fff}
.credit{display:flex;flex-direction:column;gap:8px}
.credit[hidden]{display:none}
.credit__row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:linear-gradient(135deg,rgba(245,158,11,.14),rgba(236,72,153,.1));border:1px solid rgba(245,158,11,.4)}
.credit__row[hidden],.credit__otp[hidden]{display:none}
.credit__row--use{cursor:pointer}
.credit__row--use input{width:20px;height:20px;accent-color:#22c55e;flex:0 0 auto}
.credit__ic{flex:0 0 auto;width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,#f59e0b,#ec4899);color:#fff;display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--clay-sm)}
.credit__b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.credit__b b{font-size:14px}.credit__b span{font-size:12px;color:var(--muted);line-height:1.4}
.credit__btn{flex:0 0 auto;height:38px;padding:0 16px;border-radius:999px;border:0;background:var(--cta-bg);color:var(--cta-text);font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.credit__btn:disabled{opacity:.6}
.credit__otp{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:16px;background:var(--card);border:1px solid var(--glass-border)}
.credit__hint{font-size:13px;color:var(--muted)}
.credit__otprow{display:flex;gap:8px}
.credit__code{flex:1;height:48px;font-family:ui-monospace,Menlo,monospace;font-size:20px;letter-spacing:.3em;text-align:center}
.totals{display:flex;flex-direction:column;gap:4px;padding-bottom:8px;margin-bottom:6px;border-bottom:1px dashed var(--glass-border)}
.totals[hidden]{display:none}
.totals__row{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted)}
.totals__row--save{color:#22c55e;font-weight:700}.totals__row--save b{font-family:ui-monospace,Menlo,monospace;font-size:11px;margin-left:4px;color:var(--muted)}
.totals__row[hidden]{display:none}
@media (max-width:420px){.promo__in{padding-right:88px}.promo__btn{height:38px;padding:0 14px}.offer{--stub:84px}.offer__code{font-size:11px}.offer__cta{padding:5px 8px;font-size:11px}}
.creditbar{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:linear-gradient(135deg,rgba(245,158,11,.14),rgba(236,72,153,.1));border:1px solid rgba(245,158,11,.4)}
.creditbar__b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.creditbar__b b{font-size:14px}.creditbar__b span{font-size:12px;color:var(--muted);line-height:1.4}
body:has(.sticky) .mascot{bottom:calc(var(--sticky-h,132px) + env(safe-area-inset-bottom,0px) + 10px)}
body:has(.sticky) .mascot__hint{display:none}

/* ---------- checkout header + step bar ---------- */
.cohead{display:flex;align-items:center;gap:10px;padding:10px 0 2px}
.cohead__back{flex:0 0 auto;width:40px;height:40px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--text);text-decoration:none;box-shadow:var(--clay-sm);transition:transform .15s ease}
.cohead__back:active{transform:scale(.94)}
.cohead__mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cohead__t{margin:0;font-size:clamp(17px,4.8vw,20px);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.cohead__s{font-size:clamp(11px,3.1vw,12px);color:var(--muted);font-weight:600}
.cohead__lock{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:999px;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35);color:#16a34a;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.stepbar{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.stepbar__item{display:flex;flex-direction:column;gap:6px;min-width:0}
.stepbar__item i{display:block;height:5px;border-radius:999px;background:var(--glass-border)}
.stepbar__item.is-done i{background:var(--text)}
.stepbar__item.is-on i{background:linear-gradient(90deg,#22c55e,#16a34a);box-shadow:0 0 0 3px rgba(34,197,94,.14)}
.stepbar__item span{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.stepbar__item.is-done span{color:var(--muted)}
.stepbar__item.is-on span{color:var(--text)}
.stepbar__item span svg{color:#22c55e}
.osum__save{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:999px;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35);color:#16a34a;font-size:clamp(11px,3.1vw,12px);font-weight:800;white-space:nowrap}
:root[data-theme="dark"] .osum__save,:root[data-theme="dark"] .cohead__lock{color:#4ade80}

/* ---------- link field tools: state badge + clear + paste ---------- */
.inwrap__tools{position:absolute;right:7px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:6px;z-index:2}
.inwrap__tools .inwrap__state{position:static;transform:none}
.inwrap__btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:32px;padding:0 12px;border-radius:999px;border:0;background:var(--cta-bg);color:var(--cta-text);font:inherit;font-size:12px;font-weight:800;cursor:pointer;box-shadow:var(--clay-cta);transition:transform .15s ease,opacity .15s ease}
.inwrap__btn:active{transform:scale(.95)}
.inwrap__btn[hidden]{display:none}
.inwrap__btn--x{width:30px;height:30px;padding:0;background:var(--glass-bg-2);color:var(--muted);border:1px solid var(--glass-border);box-shadow:none}
.inwrap__btn--x:hover{color:#f43f5e;border-color:rgba(244,63,94,.4)}

/* ---------- package page sticky bar ---------- */
.sticky--pick .sticky__row{align-items:center;gap:10px}
.sticky__ic{flex:0 0 auto;width:40px;height:40px;border-radius:13px;background:var(--glass-bg-2);border:1px solid var(--glass-border);display:flex;align-items:center;justify-content:center}
.sticky__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sticky__t{font-size:clamp(13.5px,3.8vw,15px);font-weight:800;letter-spacing:-.01em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.sticky__s{font-size:clamp(11px,3.1vw,12px);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky--pick .sticky__price{display:flex;flex-direction:column;align-items:flex-end;gap:1px;line-height:1.05;flex:0 0 auto}
.sticky__was{font-size:11px;font-weight:600;color:var(--faint)}
.sticky__was[hidden],.sticky__save[hidden]{display:none}
.sticky--pick .sticky__price b{font-size:clamp(18px,5vw,22px);font-weight:800;color:#22c55e}
.sticky__save{margin-top:2px;font-size:10px;font-weight:800;letter-spacing:.03em;color:#16a34a;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.3);border-radius:999px;padding:2px 7px}
:root[data-theme="dark"] .sticky__save{color:#4ade80}
.cta--go{gap:8px;text-transform:uppercase}
.cta--go svg{transition:transform .2s ease}
.cta--go:hover svg{transform:translateX(3px)}
.sticky--pay .sticky__s .infobtn{margin-left:4px}
.cta--go .cta__lock{display:inline-flex;opacity:.85}

/* ---------- checkout order summary: one tight card ---------- */
.osum{gap:8px;padding:12px 14px}
.osum__row{gap:10px}
.osum__thumb{width:44px;height:44px;border-radius:13px}
.osum__body{gap:2px}
.osum__sub{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap;overflow:hidden}
.osum__tier{overflow:hidden;text-overflow:ellipsis}
.osum__hot{display:inline-flex;align-items:center;gap:3px;flex:0 0 auto;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#f97316}
.osum__badge{display:none}
.osum__facts{gap:6px}
.osum__fact{height:26px;padding:0 7px;border-radius:999px;background:var(--glass-bg-2);border:1px solid var(--glass-border);font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap}
.osum__fact svg{width:13px;height:13px}
.osum__save{height:26px;padding:0 7px;font-size:11px}
.osum__facts{gap:4px}

/* ---------- warranty counts: three tiles + live dot ---------- */
.wgrid--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.wgrid--3 .wstat{padding:10px 10px;gap:3px}
.wgrid--3 .wstat__l{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wgrid--3 .wstat__v{font-size:clamp(14px,4.1vw,18px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wstat__s{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wstat--live{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.06)}
.wstat--live .wstat__s{color:#16a34a;font-weight:700}
:root[data-theme="dark"] .wstat--live .wstat__s{color:#4ade80}
.livedot{width:7px;height:7px;border-radius:50%;background:#22c55e;flex:0 0 auto;animation:livedot 1.6s ease-in-out infinite}
@keyframes livedot{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(34,197,94,.55)}50%{opacity:.55;box-shadow:0 0 0 5px rgba(34,197,94,0)}}
@media (max-width:360px){.wgrid--3{grid-template-columns:repeat(2,minmax(0,1fr))}.wgrid--3 .wstat--live{grid-column:1/-1}}