/* =========================================================================
   Jay Designs — site styles
   Layout: a black stage lit by slow drifting blue light. A floating glass "island"
   nav is shared by every page and morphs between pages (View Transitions).
   ========================================================================= */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}

:root{
  --black:#000;
  --white:#F5F7FF;
  --text-2:rgba(226,234,255,.68);
  --text-3:rgba(226,234,255,.42);
  --blue:#0A84FF;
  --sky:#64D2FF;
  --deep:#2B4BFF;
  /* theme tokens: the same accents as space-separated RGB (for alpha), plus a light tint, glow and button colours */
  --blue-rgb:10 132 255;
  --sky-rgb:100 210 255;
  --deep-rgb:43 75 255;
  --glow-rgb:225 236 255;
  --hi:#A9E8FF;
  --btn-top:#3398FF;
  --btn-bot:#0A6EFF;
  --btn-text:#fff;
  --danger:#FF6961;
  --stroke:rgba(255,255,255,.11);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter Tight","Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --spring:cubic-bezier(.2,1.15,.35,1);
  --spring-dur:600ms;
  --spring-soft:cubic-bezier(.2,1.25,.35,1);
  --soft-dur:800ms;
  color-scheme:dark;
}
*{box-sizing:border-box;scrollbar-width:none}
::-webkit-scrollbar{display:none}
html{-webkit-text-size-adjust:100%;background:var(--black)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped,html.locked{overflow:hidden}
/* the page's black comes from <html>; body stays transparent so the background lights (.bg, z-index -1) show through */
body{margin:0;background:transparent;color:var(--white);font:400 17px/1.55 var(--font);letter-spacing:-.012em;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:inherit}
button{font-family:inherit;color:inherit}
::selection{background:rgb(var(--blue-rgb) / .5)}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px}
.ico{width:20px;height:20px;flex:none}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:20px}
section{position:relative;padding-block:clamp(72px,11vw,140px);scroll-margin-top:84px}
.flush-top{padding-top:0}
.skip{position:fixed;left:16px;top:-80px;z-index:200;padding:10px 16px;border-radius:999px;background:var(--blue);color:#fff;font-weight:600;text-decoration:none;transition:top .3s}
.skip:focus{top:16px}

/* ---------- page transitions (Chrome, Edge, Safari 18+) ---------- */
@view-transition{navigation:auto}
.island{view-transition-name:island}
.nav-pill{view-transition-name:nav-pill}
::view-transition-group(nav-pill){animation-duration:.65s;animation-timing-function:cubic-bezier(.2,1.25,.35,1)}
/* The page itself fades out and in as the screen you see (the root snapshot), not as <main>: a scrolled-down <main> starts
   far above the screen, and morphing it to the next page's <main> slid the whole page in from there (seen leaving /custom). */
::view-transition-old(root){animation:vt-out .3s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-in .75s var(--ease) both}
@keyframes vt-out{to{opacity:0;transform:scale(.985);filter:blur(8px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(30px);filter:blur(12px)}}

/* ---------- background light ---------- */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--black);contain:strict}
.bg-inner{position:absolute;inset:-10% -10% -30%;will-change:transform}
.orb{position:absolute;border-radius:50%;width:70vmax;height:70vmax;animation:drift 28s ease-in-out infinite alternate;animation-delay:var(--clock,0s);will-change:transform}
.o1{left:-28vmax;top:-32vmax;background:radial-gradient(circle,rgb(var(--blue-rgb) / .42),transparent 62%)}
.o2{right:-32vmax;top:14vh;background:radial-gradient(circle,rgb(var(--deep-rgb) / .3),transparent 62%);animation-duration:34s;animation-delay:calc(var(--clock,0s) - 9s)}
.o3{left:6vw;top:72vh;background:radial-gradient(circle,rgb(var(--sky-rgb) / .18),transparent 60%);animation-duration:40s;animation-delay:calc(var(--clock,0s) - 15s)}
.o4{left:34vw;top:-22vmax;width:42vmax;height:42vmax;background:radial-gradient(circle,rgb(var(--glow-rgb) / .13),transparent 60%);animation-duration:22s}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(8vmax,6vmax) scale(1.12)}100%{transform:translate(-6vmax,10vmax) scale(.94)}}
.grain{position:absolute;inset:0;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- glass ---------- */
/* Performance: a live backdrop blur has to be recalculated every frame while the background lights move,
   so it's kept for the floating menu, pop-ups and small controls only. Cards and panels use a static
   frosted fill that looks almost the same over the dark background and costs next to nothing. */
.glass,.glass-solid{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.03)),rgba(12,15,26,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(255,255,255,.05),0 30px 60px -30px rgba(0,0,0,.85)}
.island,.announce,.pill,.search,.sort-btn,.copy,.btn-glass,.theme-preview{-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.03))}
.glass-solid{background:linear-gradient(180deg,rgba(40,46,64,.94),rgba(16,19,28,.97))}
.glass::before,.glass-solid::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(140deg,rgba(255,255,255,.55),rgba(255,255,255,.08) 28%,rgba(255,255,255,0) 55%,rgb(var(--sky-rgb) / .32));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.sheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgb(var(--sky-rgb) / .16),transparent 60%);opacity:0;transition:opacity .4s}
.tilt{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .7s var(--ease),translate .6s var(--spring),box-shadow .4s}
.tilt:hover .sheen{opacity:1}

/* ---------- type ---------- */
.eyebrow{display:inline-block;font-size:15px;font-weight:600;letter-spacing:-.005em;background:linear-gradient(90deg,var(--sky),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.h2{font-size:clamp(36px,5.6vw,72px);font-weight:700;letter-spacing:-.045em;line-height:1.02;margin:10px 0 0;text-wrap:balance}
.gt{background:linear-gradient(180deg,#fff 30%,rgba(200,216,255,.6));-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .1em .14em;margin-inline:-.1em}   /* room for letters that reach past the box (see .w below) */
.lead{font-size:clamp(17px,1.5vw,20px);color:var(--text-2);max-width:36em;margin:18px 0 0;text-wrap:pretty}
.head{margin-bottom:clamp(36px,5vw,60px)}
.head.center{text-align:center}
.head.center .lead{margin-inline:auto}
.row-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:clamp(30px,4vw,48px)}
.row-head .head{margin-bottom:0}
.center-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:40px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:52px;padding:0 26px;border-radius:999px;font:600 16px var(--font);letter-spacing:-.01em;text-decoration:none;border:0;cursor:pointer;color:var(--white);white-space:nowrap;transition:transform .6s var(--spring),box-shadow .35s,background .3s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.95);transition-duration:.15s}
.btn-blue{color:var(--btn-text);background:linear-gradient(180deg,var(--btn-top),var(--btn-bot));box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 12px 32px -10px rgb(var(--blue-rgb) / .8)}
.btn-blue:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 18px 44px -8px rgb(var(--blue-rgb) / .95)}
.btn-glass:hover{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.06))}
.btn .ico{width:19px;height:19px}
.btn-sm{height:42px;padding:0 18px;font-size:15px}
.link-more{display:inline-flex;align-items:center;gap:4px;font-size:16px;font-weight:600;color:var(--sky);text-decoration:none}
.link-more .ico{width:16px;height:16px;transition:transform .5s var(--spring)}
.link-more:hover .ico{transform:translateX(4px)}

/* ---------- island nav ---------- */
.island-wrap{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));left:0;right:0;z-index:50;display:flex;flex-direction:column;align-items:center;gap:8px;padding-inline:12px;pointer-events:none}
.announce{pointer-events:auto;display:inline-flex;align-items:center;gap:10px;max-width:100%;padding:6px 6px 6px 14px;border-radius:999px;font-size:13.5px;font-weight:500;text-decoration:none;animation:fadeUp .9s var(--ease) both .5s;transition:opacity .4s,transform .6s var(--spring)}
.announce .an-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.announce .an-e{color:var(--sky);font-variant-numeric:tabular-nums;white-space:nowrap}
.announce .an-e:empty{display:none}
.an-x{width:24px;height:24px;border-radius:50%;border:0;background:rgba(255,255,255,.1);display:grid;place-items:center;cursor:pointer;flex:none;padding:0}
.an-x .ico{width:12px;height:12px;stroke-width:2.4}
.island-wrap.scrolled .announce{opacity:0;transform:translateY(-12px) scale(.95);pointer-events:none}
.island{pointer-events:auto;display:flex;align-items:center;gap:8px;padding:7px;border-radius:999px;transition:padding .6s var(--spring),gap .6s var(--spring),background .4s}
.island.scrolled{padding:5px;gap:4px;background:linear-gradient(180deg,rgba(30,34,48,.62),rgba(12,14,22,.66))}
.first-load .island{animation:dropIn 1.1s var(--ease) both}
@keyframes dropIn{from{transform:translateY(-60px) scale(.85);opacity:0}}
.brand{display:flex;align-items:center;gap:10px;padding:0 10px 0 2px;text-decoration:none;font-weight:700;font-size:15px;letter-spacing:-.02em;white-space:nowrap}
.brand-mark{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none;background:linear-gradient(145deg,var(--hi),var(--blue) 55%,var(--deep));box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 6px 18px -4px rgb(var(--blue-rgb) / .7);font-weight:800;font-size:17px;color:#fff}
.seg{position:relative;display:flex;padding:3px;border-radius:999px;background:rgba(255,255,255,.06)}
.seg a,.seg button{position:relative;z-index:1;padding:8px 15px;border-radius:999px;font:500 14px var(--font);letter-spacing:-.01em;color:var(--text-2);text-decoration:none;background:none;border:0;cursor:pointer;white-space:nowrap;transition:color .3s,background .3s}
.seg a:hover,.seg button:hover{color:var(--white)}
.seg a:not([aria-current]):hover{background:rgba(255,255,255,.06)}
.seg [aria-current="page"],.seg [aria-pressed="true"]{color:var(--white)}
.nav-pill{position:absolute;inset:0;z-index:-1;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.1));box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 4px 14px -4px rgba(0,0,0,.6)}
.seg-thumb{position:absolute;top:3px;bottom:3px;left:0;width:0;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.1));box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 4px 14px -4px rgba(0,0,0,.6);transition:transform var(--spring-dur) var(--spring),width var(--spring-dur) var(--spring),opacity .3s}
.bag{position:relative;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.09);border:0;cursor:pointer;flex:none;transition:background .3s}
.bag:hover{background:rgba(255,255,255,.16)}
.badge{position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--blue);font:700 11px/19px var(--font);text-align:center;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px #000;transform:scale(0);transition:transform var(--soft-dur) var(--spring-soft)}
.badge.on{transform:scale(1)}
@media (max-width:760px){.brand-name{display:none}.brand{padding:0}.seg a{padding:8px 11px}}
/* narrower screens: the logo is the way home and Reviews stays in the footer, leaving room for Apps and Queue */
@media (max-width:560px){.nav-seg a[href="/"],.nav-seg a[href="/reviews"]{display:none}}
@media (max-width:440px){.island,.island.scrolled{gap:4px}.nav-seg a{padding:8px 9px;font-size:13.5px}.island-wrap{padding-inline:8px}}
@media (max-width:390px){.nav-seg a{padding:8px 7px;font-size:13px}.island .bag{width:36px;height:36px}.island{padding:5px}}
@media (max-width:350px){.nav-seg a[href="/apps"]{display:none}}   /* very small phones: Apps stays in the footer */

/* ---------- hero (home) ---------- */
.hero{padding-top:clamp(128px,15vw,180px);padding-bottom:20px;text-align:center;overflow-x:clip}
.pill{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 12px;border-radius:999px;font-size:14px;font-weight:500;color:var(--text-2);text-decoration:none;transition:color .3s}
.pill:hover{color:var(--white)}
.pill .ico{width:15px;height:15px}
.dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--sky)}
.dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--sky);animation:ping 2.2s ease-out infinite}
@keyframes ping{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(3.2);opacity:0}}
.hero-title{font-size:clamp(40px,8.8vw,116px);font-weight:700;letter-spacing:-.05em;line-height:.98;margin:26px auto 0}
.line{display:block}
/* The gradient only paints inside each word's box, and the tight letter-spacing makes that box narrower than the letters
   (the end of "speaks", the y in "Every"…), so the box is padded on every side and the padding taken back with
   negative margins: nothing moves, and the whole of every letter gets its colour. */
.w{display:inline-block;background:linear-gradient(180deg,#fff 25%,rgba(206,220,255,.7));-webkit-background-clip:text;background-clip:text;color:transparent;padding:.1em .12em .18em;margin:-.1em -.12em -.1em;animation:wordIn 1.2s var(--ease) both;animation-delay:calc(var(--i) * 75ms + 200ms)}
.w.b{background-image:linear-gradient(100deg,var(--hi) 0%,var(--sky) 22%,var(--blue) 55%,var(--deep) 80%,var(--hi) 100%);background-size:220% 100%;animation:wordIn 1.2s var(--ease) both,shimmer 5s ease-in-out 2 alternate;animation-delay:calc(var(--i) * 75ms + 200ms),1.6s}
@keyframes wordIn{from{opacity:0;filter:blur(16px);transform:translateY(34px) scale(.96)}}
@keyframes shimmer{to{background-position:100% 0}}
.fade{animation:fadeUp 1.1s var(--ease) both;animation-delay:var(--d,0s)}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px);filter:blur(8px)}}
.hero-sub{font-size:clamp(17px,1.6vw,21px);color:var(--text-2);max-width:34em;margin:26px auto 0;text-wrap:balance}
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:34px}

/* Card width scales with the screen; the spacing is always a little wider than a card, so neighbours never overlap. */
.fan-stage{position:relative;height:clamp(330px,34vw,430px);margin-top:56px;perspective:1400px;--cw:clamp(150px,17vw,212px);--spread:calc(var(--cw) * 1.1)}
.fan-stage::before{content:"";position:absolute;left:50%;bottom:-40px;width:min(1000px,120%);height:260px;translate:-50% 0;background:radial-gradient(50% 50% at 50% 50%,rgb(var(--blue-rgb) / .42),transparent 70%);filter:blur(10px);pointer-events:none}
.fan{position:absolute;left:50%;top:20px;width:0;height:0;transform-style:preserve-3d;transform:translateY(var(--fs,0px)) rotateX(var(--fx,0deg)) rotateY(var(--fy,0deg))}
.fan-card{position:absolute;left:calc(var(--cw) / -2);top:0;width:var(--cw);padding:0;border:0;background:none;text-align:left;cursor:pointer;transform-style:preserve-3d;
  --pos:translateX(calc(var(--k) * var(--spread))) translateY(calc(var(--ak) * 30px)) translateZ(calc(var(--ak) * -70px)) rotateZ(calc(var(--k) * 6deg)) rotateY(calc(var(--k) * -7deg));
  transform:var(--pos);animation:deal 1.4s var(--ease) both;animation-delay:calc(.75s + var(--j) * 90ms)}
@keyframes deal{from{opacity:0;transform:translateY(240px) rotateX(35deg) scale(.8)}}
.float{animation:bob 6s ease-in-out infinite;animation-delay:calc(var(--j) * -1.3s)}
@keyframes bob{50%{transform:translateY(-12px)}}
.fc{border-radius:30px;padding:10px;transition:transform .7s var(--spring),box-shadow .4s}
/* Solid cards: frosted blur doesn't work inside the 3D fan, so a see-through card would show the titles behind it. */
.fan .fc{background:linear-gradient(180deg,#1F2537,#0D1019 90%);-webkit-backdrop-filter:none;backdrop-filter:none}
.fan-card:hover .fc,.fan-card:focus-visible .fc{transform:translateY(-18px) scale(1.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 40px 70px -24px rgb(var(--blue-rgb) / .55)}
.fc-art{position:relative;aspect-ratio:1;border-radius:21px;overflow:hidden;isolation:isolate}
.fc-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 6px 4px}
/* titles wrap onto two lines instead of being cut off; every card reserves two lines so they stay level */
.fc-name{font-size:clamp(13px,1.15vw,15px);font-weight:600;line-height:1.25;letter-spacing:-.015em;min-width:0;min-height:2.5em;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-wrap:balance;align-content:center}
.fc-price{flex:none;font-size:13px;font-weight:700;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.12);font-variant-numeric:tabular-nums}
@media (max-width:760px){
  .fan-stage{height:clamp(250px,62vw,330px);margin-top:40px;--cw:clamp(108px,29vw,170px)}
  .fan-card[style*="--ak:2"]{display:none}
  .fc{border-radius:22px;padding:7px}
  .fc-art{border-radius:16px}
  .fc-meta{flex-direction:column;align-items:flex-start;gap:6px;padding:9px 4px 3px}
  .fc-name{font-size:12.5px;min-height:2.5em}
  .fc-price{font-size:12px;padding:4px 9px}
}

/* ---------- page hero (inner pages) ---------- */
.page-hero{padding-top:clamp(140px,16vw,196px);padding-bottom:clamp(36px,5vw,64px);text-align:center;overflow-x:clip}
.page-hero h1{font-size:clamp(44px,8vw,104px);font-weight:700;letter-spacing:-.05em;line-height:.98;margin:16px 0 0}
.page-hero .lead{margin-inline:auto}
.page-hero .eyebrow{animation:fadeUp 1s var(--ease) both}

/* ---------- product art (shared) ---------- */
.art-bg{position:absolute;inset:-8%;transition:transform 1.4s var(--ease)}
/* uploaded product images: always fill the box exactly, never stretched or cut off unexpectedly */
.art-img{position:absolute;inset:0;overflow:hidden;background:#05070D;transition:transform 1.2s var(--ease)}
.art-img img{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block}
.art-img .fill{object-fit:cover}
.art-img .fit{object-fit:contain;filter:drop-shadow(0 12px 28px rgba(0,0,0,.45))}
.art-img .blur{object-fit:cover;transform:scale(1.3);filter:blur(22px) saturate(1.5) brightness(.6)}
.card:hover .art-img,.fan-card:hover .art-img{transform:scale(1.04)}

/* product video previews */
.vid-badge{position:absolute;left:11px;bottom:11px;z-index:2;display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:5px 10px 5px 8px;border-radius:999px;background:rgba(0,0,0,.55);transition:opacity .3s}
.vid-badge .ico{width:11px;height:11px}
.hover-vid,.amb-vid{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;z-index:1}
.hover-vid{opacity:0;transition:opacity .45s var(--ease)}
.card-art.playing .hover-vid{opacity:1}
.card-art.playing .vid-badge{opacity:0}
.card-art .flag,.sh-art .flag{z-index:2}
.watch{position:absolute;left:50%;bottom:18px;translate:-50% 0;z-index:3;display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 20px 0 16px;border:0;border-radius:999px;font:600 15px var(--font);color:var(--white);cursor:pointer;white-space:nowrap;transition:transform .5s var(--spring),background .3s}
.watch .ico{width:16px;height:16px}
.watch:hover{transform:scale(1.05);background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.08))}
.watch:active{transform:scale(.95)}
.player{position:fixed;inset:0;z-index:85;display:grid;place-items:center;padding:clamp(56px,6vw,72px) clamp(12px,4vw,48px);background:rgba(0,0,0,.88);opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s linear .35s}
.player.open{opacity:1;visibility:visible;transition:opacity .35s}
.player-box{width:min(1100px,100%,calc((100vh - 150px) * 16 / 9));aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 40px 120px -20px rgb(var(--blue-rgb) / .45);transform:scale(.92) translateY(20px);transition:transform var(--spring-dur) var(--spring)}
.player.open .player-box{transform:none}
.player-box video,.player-box iframe{display:block;width:100%;height:100%;border:0;background:#000;object-fit:contain}
.player .x{top:calc(16px + env(safe-area-inset-top,0px));right:16px;width:40px;height:40px}
.app{position:absolute;left:50%;top:50%;width:70px;height:70px;margin:-35px 0 0 -35px;border-radius:21px;display:grid;place-items:center;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.12));box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(255,255,255,.18),0 14px 30px -10px rgba(0,0,0,.55);transition:transform .7s var(--spring)}
.app .ico{width:34px;height:34px;stroke-width:1.6}
.app-lg{width:116px;height:116px;margin:-58px 0 0 -58px;border-radius:32px}
.app-lg .ico{width:54px;height:54px}

/* ---------- bento ---------- */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(270px,auto);gap:16px}
.tile{border-radius:32px;padding:26px;overflow:hidden;display:flex;flex-direction:column;gap:18px;min-width:0;text-decoration:none;color:inherit;isolation:isolate}
a.tile:hover{translate:0 -5px}
.t-intro{grid-column:span 2;grid-row:span 2;justify-content:space-between}
.t-intro .h2{font-size:clamp(32px,3.7vw,54px)}
.t-wide{grid-column:span 2}
.tile h3{font-size:22px;font-weight:700;letter-spacing:-.03em;margin:0}
.tile p{font-size:15px;color:var(--text-2);margin:4px 0 0}
.go{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:600;color:var(--sky)}
.go .ico{width:15px;height:15px;transition:transform .5s var(--spring)}
a.tile:hover .go .ico{transform:translateX(4px)}
.viz{position:relative;flex:1;min-height:150px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:28px 0 0}
.stats dt{font-size:13px;color:var(--text-3)}
.stats dd{margin:0;font-size:clamp(34px,4vw,54px);font-weight:700;letter-spacing:-.045em;line-height:1.1;font-variant-numeric:tabular-nums}
@media (max-width:960px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.t-intro{grid-row:auto}}
@media (max-width:580px){.bento{grid-template-columns:minmax(0,1fr)}.t-intro,.t-wide{grid-column:auto}}

/* terminal */
.term{position:absolute;inset:0;border-radius:18px;background:rgba(0,0,0,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);padding:12px 16px;font:500 13px/1.95 var(--mono);color:rgba(220,234,255,.88);overflow:hidden}
.term-bar{display:flex;align-items:center;gap:6px;margin-bottom:6px;color:var(--text-3);font-size:12px}
.term-bar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18)}
.term-bar span{margin-left:8px}
.ln{white-space:nowrap;overflow:hidden;width:0}
.ln b{color:var(--sky);font-weight:500}
.l1{animation:k1 8s steps(17) infinite}.l2{animation:k2 8s steps(19) infinite}.l3{animation:k3 8s steps(16) infinite}.l4{animation:k4 8s steps(19) infinite}
@keyframes k1{0%{width:0}12%,92%{width:17ch}100%{width:0}}
@keyframes k2{0%,18%{width:0}32%,92%{width:19ch}100%{width:0}}
@keyframes k3{0%,38%{width:0}50%,92%{width:16ch}100%{width:0}}
@keyframes k4{0%,56%{width:0}70%,92%{width:19ch}100%{width:0}}
.cur{display:inline-block;width:7px;height:14px;background:var(--sky);vertical-align:-2px;margin-left:3px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* gfx cards */
.gc{position:absolute;left:50%;top:50%;width:min(46%,230px);aspect-ratio:16/10;border-radius:16px;display:grid;place-items:center;font-weight:800;font-size:clamp(17px,1.8vw,24px);letter-spacing:-.04em;translate:-50% -50%;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 22px 40px -14px rgba(0,0,0,.8);animation:gfan 5s var(--ease) infinite alternate}
.g1{background:linear-gradient(135deg,#D7E1FF,#5E7BFF 48%,#0A1A5C);--x:-64%;--r:-11deg}
.g2{background:radial-gradient(circle at 30% 20%,var(--hi),var(--blue) 50%,#041A40);--x:0%;--r:0deg;z-index:1;animation-name:gpop}
.g3{background:linear-gradient(160deg,#fff,#A8BEFF 40%,#1B2B80);--x:64%;--r:11deg;color:#0A1A5C}
@keyframes gfan{0%{transform:translateX(0) rotate(0)}100%{transform:translateX(var(--x)) rotate(var(--r))}}
@keyframes gpop{0%{transform:scale(.94)}100%{transform:translateY(-8px) scale(1.04)}}

/* timeline */
.tl{position:absolute;inset:0;border-radius:18px;background:rgba(0,0,0,.45);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.tl-top{display:flex;justify-content:space-between;font:500 12px var(--mono);color:var(--text-3)}
.tc{color:var(--sky);font-variant-numeric:tabular-nums}
.tracks{position:relative;display:grid;gap:7px;flex:1;align-content:center}
.trk{position:relative;height:16px;border-radius:5px;background:rgba(255,255,255,.05)}
.trk b{position:absolute;top:2px;bottom:2px;border-radius:4px;background:linear-gradient(90deg,rgb(var(--blue-rgb) / .95),rgb(var(--sky-rgb) / .7))}
.trk b::before,.trk b::after{content:"";position:absolute;top:50%;width:7px;height:7px;background:#fff;rotate:45deg;translate:0 -50%;left:-3px}
.trk b::after{left:auto;right:-3px}
.ph{position:absolute;top:-6px;bottom:-4px;left:35%;width:2px;background:#fff;box-shadow:0 0 12px var(--sky)}
.ph::before{content:"";position:absolute;top:-2px;left:-4px;width:10px;height:8px;background:#fff;clip-path:polygon(0 0,100% 0,50% 100%)}

/* psd layers */
.iso-wrap{position:absolute;inset:0;display:grid;place-items:center}
.iso{position:relative;width:118px;height:118px;transform:rotateX(58deg) rotateZ(-42deg);transform-style:preserve-3d}
.plate{position:absolute;inset:0;border-radius:22px;transform:translateZ(calc(var(--n) * 14px));animation:lift 4.5s var(--ease) infinite alternate;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.p1{background:linear-gradient(135deg,#0A1A5C,var(--blue))}
.p2{background:radial-gradient(circle at 50% 50%,#fff 0 18%,transparent 19%),rgb(var(--sky-rgb) / .28)}
.p3{background:repeating-linear-gradient(180deg,transparent 0 18px,rgba(255,255,255,.85) 18px 24px,transparent 24px 30px) 22px 26px/62% 60% no-repeat,rgba(255,255,255,.08)}
@keyframes lift{to{transform:translateZ(calc(var(--n) * 36px))}}

/* 4k png */
.shot{position:absolute;inset:0;border-radius:18px;overflow:hidden}
.shot-img{position:absolute;inset:-25%;background:radial-gradient(40% 50% at 30% 40%,var(--sky),transparent 70%),radial-gradient(50% 60% at 70% 62%,var(--deep),transparent 70%),radial-gradient(26% 26% at 56% 30%,rgba(255,255,255,.85),transparent 70%),#020613;animation:pan 12s ease-in-out infinite alternate}
@keyframes pan{to{transform:translate(12%,8%) scale(1.15) rotate(6deg)}}
.crop{position:absolute;width:16px;height:16px;border:2px solid rgba(255,255,255,.85)}
.c1{top:10px;left:10px;border-right:0;border-bottom:0}.c2{top:10px;right:10px;border-left:0;border-bottom:0}.c3{bottom:10px;right:10px;border-left:0;border-top:0}.c4{bottom:10px;left:10px;border-right:0;border-top:0}
.res{position:absolute;left:50%;bottom:14px;translate:-50% 0;font:500 12px var(--mono);padding:5px 10px;border-radius:999px;background:rgba(0,0,0,.55);white-space:nowrap}

/* radar */
.radar-wrap{position:absolute;inset:0;display:grid;place-items:center}
.radar{position:relative;width:150px;aspect-ratio:1;border-radius:50%;overflow:hidden;background:repeating-radial-gradient(circle,transparent 0 24px,rgb(var(--sky-rgb) / .2) 24px 25px),radial-gradient(circle,rgb(var(--blue-rgb) / .28),transparent 72%);box-shadow:inset 0 0 0 1px rgb(var(--sky-rgb) / .35)}
.radar::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent calc(50% - .5px),rgb(var(--sky-rgb) / .25) 50%,transparent calc(50% + .5px)),linear-gradient(0deg,transparent calc(50% - .5px),rgb(var(--sky-rgb) / .25) 50%,transparent calc(50% + .5px))}
.sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgb(var(--sky-rgb) / .55),transparent 22%);animation:spin360 3.6s linear infinite}
@keyframes spin360{to{transform:rotate(360deg)}}
.blip{position:absolute;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 10px var(--sky);animation:blipA 3.6s ease-out infinite}
@keyframes blipA{0%,100%{opacity:.25;transform:scale(.6)}10%{opacity:1;transform:scale(1.3)}}

/* logo rings */
.ringviz{position:absolute;inset:0;display:grid;place-items:center}
.ringviz i{position:absolute;left:50%;top:50%;width:136px;height:136px;margin:-68px 0 0 -68px;border-radius:50%;border:1.5px dashed rgb(var(--sky-rgb) / .45);animation:spin360 16s linear infinite}
.ringviz i + i{width:100px;height:100px;margin:-50px 0 0 -50px;border:2px solid;border-color:rgba(255,255,255,.35) transparent rgb(var(--sky-rgb) / .5) transparent;animation-duration:4.5s;animation-direction:reverse}
.ringviz .brand-mark{position:relative;width:62px;height:62px;border-radius:19px;font-size:29px;animation:breathe2 4s ease-in-out infinite alternate}
@keyframes breathe2{to{transform:scale(1.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 10px 40px -4px rgb(var(--blue-rgb) / .9)}}


/* ---------- steps ---------- */
.rail{height:2px;max-width:1160px;margin:0 auto 26px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.rail span{display:block;height:100%;background:linear-gradient(90deg,var(--sky),var(--blue),var(--deep));transform-origin:left;transition:transform 1.4s var(--ease) .15s}
/* main.js adds .wait, then .in once the line is on screen: it draws across fully in one go */
.rail.wait:not(.in) span{transform:scaleX(0)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:0;margin:0;list-style:none}
.steps.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.step{border-radius:30px;padding:28px;display:flex;flex-direction:column;gap:8px}
.step-ico{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;margin-bottom:10px;background:linear-gradient(145deg,var(--hi),var(--blue) 55%,var(--deep));box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 12px 26px -8px rgb(var(--blue-rgb) / .75)}
.step-ico .ico{width:27px;height:27px}
.step-n{font-size:13px;font-weight:600;color:var(--text-3)}
.step h3{font-size:24px;font-weight:700;letter-spacing:-.035em;margin:0}
.step p{margin:0;color:var(--text-2);font-size:16px}
@media (max-width:1000px){.steps.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.steps,.steps.four{grid-template-columns:minmax(0,1fr)}.rail{display:none}}

/* ---------- shop ---------- */
/* raised above the product grid: its fade-in leaves it in its own layer, which the cards would otherwise cover (the sort menu opened behind them) */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:14px;position:relative;z-index:30}
.seg-scroll{max-width:100%;overflow-x:auto;scrollbar-width:none;border-radius:999px;min-width:0}
.seg-scroll::-webkit-scrollbar{display:none}
.seg-scroll .seg{width:max-content;padding:4px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.seg-scroll .seg button{padding:9px 17px;font-size:15px}
.seg-blue .seg-thumb{top:4px;bottom:4px;background:linear-gradient(180deg,var(--btn-top),var(--btn-bot));box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 18px -6px rgb(var(--blue-rgb) / .9)}
.tools{display:flex;gap:10px;margin-left:auto;flex-wrap:wrap}
.search{display:flex;align-items:center;gap:8px;height:44px;padding:0 8px 0 14px;border-radius:999px;width:240px;max-width:100%;color:var(--text-3);transition:width .6s var(--spring)}
.search:focus-within{width:290px;color:var(--white)}
.search input{flex:1;min-width:0;background:none;border:0;outline:0;font:500 15px var(--font);color:var(--white)}
.search input::placeholder{color:var(--text-3)}
.search input::-webkit-search-cancel-button{display:none}
.clear{width:24px;height:24px;border-radius:50%;border:0;display:grid;place-items:center;background:rgba(255,255,255,.18);cursor:pointer;padding:0}
.clear .ico{width:13px;height:13px;stroke-width:2.4}
.sort-wrap{position:relative}
.sort-btn{display:flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:999px;border:0;font:500 15px var(--font);cursor:pointer;white-space:nowrap}
.sort-btn .ico{width:17px;height:17px;color:var(--sky)}
.menu{position:absolute;right:0;top:calc(100% + 8px);z-index:20;width:236px;padding:6px;border-radius:20px;transform-origin:top right;transform:scale(.6);opacity:0;visibility:hidden;transition:transform var(--spring-dur) var(--spring),opacity .2s,visibility 0s .3s}
.menu.open{transform:none;opacity:1;visibility:visible;transition:transform var(--spring-dur) var(--spring),opacity .2s}
.menu button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:11px 12px;border:0;border-radius:13px;background:none;font:500 15px var(--font);text-align:left;cursor:pointer}
.menu button:hover{background:rgba(255,255,255,.08)}
.menu button .ico{width:17px;height:17px;color:var(--sky);opacity:0}
.menu button[aria-checked="true"] .ico{opacity:1}
.count-line{font-size:14px;color:var(--text-3);margin:0 0 22px;font-variant-numeric:tabular-nums}
@media (max-width:700px){.tools{margin-left:0;width:100%}.search,.search:focus-within{flex:1;width:auto}}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:18px}
.grid.featured{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:960px){.grid.featured{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card{border-radius:30px;padding:9px;display:flex;flex-direction:column;gap:4px;min-width:0}
.card:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 34px 60px -24px rgb(var(--blue-rgb) / .45)}
.card-art{position:relative;aspect-ratio:1;border-radius:22px;overflow:hidden;isolation:isolate}
.card-art::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.3) 50%,transparent 65%);transform:translateX(-130%);pointer-events:none}
.card:hover .card-art::after{transform:translateX(130%);transition:transform 1.1s var(--ease)}
.card:hover .art-bg{transform:scale(1.1) rotate(3deg)}
.card:hover .app{transform:translateY(-7px) scale(1.07)}
.flag{position:absolute;top:11px;left:11px;z-index:1;font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:999px;background:rgba(0,0,0,.5)}
.flag.sale{background:linear-gradient(180deg,var(--btn-top),var(--btn-bot));box-shadow:inset 0 1px 0 rgba(255,255,255,.4);font-variant-numeric:tabular-nums}
.cat s,.bi-sub s{color:var(--text-3);opacity:.8}
.sh-price .was{font-size:20px;font-weight:500;color:var(--text-3);letter-spacing:-.02em;margin-left:6px}
.card-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 6px 6px}
.card-meta > div{min-width:0}
.card h3{margin:0;font-size:15.5px;font-weight:600;letter-spacing:-.015em;line-height:1.25}
.open-btn{all:unset;cursor:pointer}
.open-btn::after{content:"";position:absolute;inset:0;border-radius:30px;z-index:1}
.card:has(.open-btn:focus-visible){outline:2px solid var(--sky);outline-offset:3px}
.cat{display:block;font-size:12.5px;color:var(--text-3);margin-top:2px}
.get{position:relative;z-index:2;flex:none;min-width:72px;height:32px;padding:0 12px;border-radius:999px;border:0;background:rgba(255,255,255,.13);font:700 14px var(--font);font-variant-numeric:tabular-nums;cursor:pointer;display:inline-grid;place-items:center;transition:background .3s,transform .5s var(--spring)}
.get:hover{background:var(--blue)}
.get:active{transform:scale(.9)}
.get > *{grid-area:1/1;transition:opacity .25s,transform .5s var(--spring)}
.get .ok{opacity:0;transform:scale(.3) rotate(-30deg)}
.get .ok .ico{width:17px;height:17px;stroke-width:2.6}
.get.added{background:var(--blue)}
.get.added .p{opacity:0;transform:scale(.3)}
.get.added .ok{opacity:1;transform:none}
.empty{text-align:center;padding:48px 24px;border-radius:30px;display:grid;gap:14px;justify-items:center}
.empty p{margin:0;color:var(--text-2)}
@media (max-width:560px){.grid,.grid.featured{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.card{border-radius:24px;padding:7px}.card-art{border-radius:18px}.card-meta{flex-direction:column;align-items:flex-start;gap:10px;padding:8px 5px 5px}.app{width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:17px}.app .ico{width:28px;height:28px}.card h3{font-size:14px}}

.strip-cta{margin-top:clamp(48px,7vw,80px);border-radius:32px;padding:clamp(24px,4vw,36px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.strip-cta h3{margin:0;font-size:clamp(22px,2.4vw,28px);font-weight:700;letter-spacing:-.035em}
.strip-cta p{margin:4px 0 0;color:var(--text-2)}

/* ---------- reviews ---------- */
.note{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:13px;font-weight:500;color:var(--sky);padding:7px 14px;border-radius:999px;background:rgb(var(--sky-rgb) / .1);box-shadow:inset 0 0 0 1px rgb(var(--sky-rgb) / .25)}
.marquee{display:grid;gap:18px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mrow{overflow:hidden;padding-block:6px}
.mtrack{display:flex;gap:18px;width:max-content;animation:marq 70s linear infinite}
.mrow.rev .mtrack{animation-direction:reverse;animation-duration:80s}
.marquee:hover .mtrack{animation-play-state:paused}
.mgroup{display:flex;gap:18px}
@keyframes marq{to{transform:translateX(calc(-50% - 9px))}}
.quote{width:360px;margin:0;padding:24px;border-radius:28px;display:flex;flex-direction:column;gap:16px}
.q-top{display:flex;justify-content:space-between;align-items:center}
.stars{display:flex;gap:2px;color:var(--sky)}
.stars .ico{width:15px;height:15px}
.sample{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);padding:3px 8px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--stroke)}
.quote blockquote{margin:0;font-size:17px;line-height:1.5;letter-spacing:-.015em}
.quote figcaption{display:flex;align-items:center;gap:12px;margin-top:auto}
.av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,var(--hi),var(--blue) 55%,var(--deep));flex:none;font-weight:700}
.av .ico{width:21px;height:21px}
/* reviews: the author's Discord picture, over the first letter of their name (shown until it loads, or if it can't) */
.av[style*="--h"]{position:relative;overflow:hidden;color:#fff;background:linear-gradient(145deg,hsl(var(--h) 72% 64%),hsl(var(--h) 68% 40%))}
.av b{font-size:17px;line-height:1}
.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#1e2130}
.stars .off{display:contents;color:rgba(255,255,255,.2)}
.quote strong{display:block;font-size:15px;font-weight:600}
.quote small{display:block;font-size:13px;color:var(--text-3)}
.bought{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:12.5px;font-weight:500;color:var(--text-2);padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.06)}
.bought .ico{width:14px;height:14px;color:var(--sky)}
@media (max-width:560px){.quote{width:290px;padding:20px}}

.rev-feature{max-width:980px;margin:0 auto clamp(56px,8vw,96px);border-radius:40px;padding:clamp(28px,5vw,60px);display:grid;gap:26px;overflow:hidden}
.rev-feature .stars .ico{width:20px;height:20px}
.rev-feature blockquote{margin:0;font-size:clamp(24px,3.2vw,40px);font-weight:600;letter-spacing:-.035em;line-height:1.2;text-wrap:balance}
.rev-feature figcaption{display:flex;align-items:center;gap:14px}
.rev-feature figcaption strong{display:block;font-size:16px}
.rev-feature figcaption small{display:block;font-size:14px;color:var(--text-3)}
.rev-bar{display:flex;justify-content:center;margin-bottom:28px}
.wall{columns:3 300px;column-gap:18px}
.wall .quote{width:auto;break-inside:avoid;margin-bottom:18px}

/* ---------- CTA panel ---------- */
.cta{border-radius:44px;padding:clamp(36px,7vw,84px) clamp(20px,6vw,84px);text-align:center;overflow:hidden;isolation:isolate}
/* travelling light around the CTA border: the gradient is drawn once and rotated by the GPU, so it never repaints */
.cta-ring{position:absolute;inset:0;border-radius:inherit;padding:1.5px;overflow:hidden;pointer-events:none;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.cta-ring i{position:absolute;left:50%;top:50%;width:max(160%,1400px);aspect-ratio:1;translate:-50% -50%;background:conic-gradient(from 0deg,transparent 0deg,transparent 210deg,var(--sky) 290deg,var(--blue) 330deg,transparent 360deg);animation:spin360 6s linear infinite;will-change:transform}
.cta-glow{position:absolute;z-index:-1;left:50%;top:-55%;width:90%;aspect-ratio:1;translate:-50% 0;border-radius:50%;background:radial-gradient(circle,rgb(var(--blue-rgb) / .5),transparent 60%);animation:breathe 7s ease-in-out infinite alternate}
@keyframes breathe{to{transform:scale(1.18);opacity:.7}}
.cta .lead{margin-inline:auto}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:0;margin:28px 0 0;list-style:none}
.chips li{font-size:14px;font-weight:500;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:background .3s,transform .5s var(--spring)}
.chips li:hover{background:rgb(var(--blue-rgb) / .3);transform:translateY(-3px)}
.cta-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin-top:34px}
.copy{display:flex;align-items:center;gap:6px;height:52px;padding:0 8px 0 20px;border-radius:999px;font:500 15px var(--mono)}
.copy span{user-select:all}
.copy button{width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.1);display:grid;place-items:center;cursor:pointer;transition:background .3s,transform .5s var(--spring)}
.copy button:hover{background:var(--blue)}
.copy button:active{transform:scale(.88)}
.copy .ico{width:17px;height:17px}

/* ---------- custom page ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.svc-grid .tile{min-height:340px}
.svc-grid .svc-wide{grid-column:span 2}   /* 5 services: the last one fills the row */
@media (max-width:580px){.svc-grid .svc-wide{grid-column:auto}}
@media (max-width:960px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:580px){.svc-grid{grid-template-columns:minmax(0,1fr)}}

/* custom work price list (filled in by main.js from the list in Settings) */
.pl-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;align-items:start}
.pl-card{border-radius:30px;padding:clamp(20px,2.6vw,28px)}
.pl-card h3{margin:0 0 12px;font-size:22px;font-weight:700;letter-spacing:-.035em}
.pl-items{list-style:none;margin:0;padding:0;display:grid}
.pl-it{padding:12px 0;border-top:1px solid var(--stroke)}
.pl-it:first-child{border-top:0;padding-top:2px}
.pl-it:last-child{padding-bottom:0}
.pl-top{display:flex;align-items:center;gap:10px}
.pl-top strong{font-size:16.5px;font-weight:600;letter-spacing:-.015em;min-width:0}
.pl-it.pkg .pl-top strong{font-size:18px}
.pl-dots{flex:1;min-width:10px;align-self:flex-end;margin-bottom:9px;border-bottom:1.5px dotted rgba(255,255,255,.18)}
.pl-price{display:flex;align-items:baseline;gap:5px;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.pl-price small{font-size:12.5px;font-weight:500;color:var(--text-3)}
.pl-price.q{color:var(--sky)}
.pl-was{font-size:13.5px;font-weight:500;color:var(--text-3);text-decoration-thickness:1.5px}   /* the regular price while a sale runs */
.pl-ends{display:inline-flex;align-items:center;gap:9px;margin:18px auto 0;padding:7px 14px;border-radius:999px;font-size:14px;font-weight:500;color:var(--text-2);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.pl-ends[hidden]{display:none}
.pl-add{flex:none;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:50%;padding:0;background:rgba(255,255,255,.08);color:var(--white);cursor:pointer;transition:background .3s,box-shadow .3s,transform .5s var(--spring)}
.pl-add:hover{background:rgba(255,255,255,.14)}
.pl-add:active{transform:scale(.88)}
.pl-add .ico{grid-area:1 / 1;width:16px;height:16px;stroke-width:2.4;transition:opacity .2s,transform .45s var(--spring)}
.pl-add .ico:last-child{opacity:0;transform:scale(.4)}
.pl-add[aria-pressed="true"]{background:linear-gradient(180deg,var(--btn-top),var(--btn-bot));box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 16px -8px rgb(var(--blue-rgb) / .9)}
.pl-add[aria-pressed="true"] .ico:first-child{opacity:0;transform:scale(.4) rotate(90deg)}
.pl-add[aria-pressed="true"] .ico:last-child{opacity:1;transform:none}
.pl-note{margin:4px 42px 0 0;color:var(--text-3);font-size:13.5px}
.pl-inc{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pl-inc li{display:inline-flex;align-items:center;gap:5px;padding:4px 11px 4px 8px;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);font-size:13px;color:var(--text-2)}
.pl-inc .ico{width:13px;height:13px;stroke-width:2.6;color:var(--sky)}
/* the request builder's choices, and the picked price list items with the estimate */
.svc-picks{display:grid;gap:14px}
.svc-g{display:grid;gap:8px}
.svc-g > small{font-size:12.5px;font-weight:600;color:var(--text-3)}
.chip-p{margin-left:7px;font-weight:600;opacity:.62;font-variant-numeric:tabular-nums}
.rq-sum{display:grid;gap:6px;padding:12px 16px 14px;border-radius:20px;background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.rq-line{display:flex;align-items:center;gap:10px;min-height:38px}
.rq-n{flex:1;min-width:0;font-size:15px;font-weight:600}
.rq-n small{margin-left:6px;font-weight:500;color:var(--text-3)}
.rq-p{min-width:52px;text-align:right;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.rq-x{width:28px;height:28px;flex:none;display:grid;place-items:center;border:0;border-radius:50%;padding:0;background:none;color:var(--text-3);cursor:pointer;transition:background .2s,color .2s}
.rq-x:hover{background:rgba(255,255,255,.1);color:var(--white)}
.rq-x .ico{width:14px;height:14px}
.rq-total{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:4px;padding-top:10px;border-top:1px solid var(--stroke);color:var(--text-2);font-size:15px}
.rq-total strong{color:var(--white);font-size:20px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

.req{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:20px;align-items:start}
@media (max-width:920px){.req{grid-template-columns:minmax(0,1fr)}}
.req-form{border-radius:32px;padding:clamp(20px,3vw,32px);display:grid;gap:22px;margin:0}
.field{display:grid;gap:9px;border:0;padding:0;margin:0;min-width:0}
.field > span,.field legend{font-size:14px;font-weight:600;color:var(--text-2);padding:0;margin-bottom:9px}
.field > span{margin-bottom:0}
.field em{font-style:normal;color:var(--text-3);font-weight:500;margin-left:4px}
.field input,.field textarea{width:100%;background:rgba(0,0,0,.35);border:0;border-radius:16px;padding:13px 16px;font:500 16px/1.5 var(--font);color:var(--white);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:box-shadow .3s,background .3s;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3)}
.field input:focus,.field textarea:focus{outline:0;box-shadow:inset 0 0 0 1.5px var(--blue),0 0 0 4px rgb(var(--blue-rgb) / .22);background:rgba(0,0,0,.5)}
/* input with a fixed prefix, e.g. "discord.gg/" */
.pre-in{display:flex;align-items:center;border-radius:16px;background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:box-shadow .3s,background .3s}
.pre-in > span{padding-left:16px;color:var(--text-3);font:500 16px var(--font);white-space:nowrap;user-select:none}
.field .pre-in input{flex:1;min-width:0;padding-left:1px;background:transparent;box-shadow:none}
.pre-in:focus-within{box-shadow:inset 0 0 0 1.5px var(--blue),0 0 0 4px rgb(var(--blue-rgb) / .22);background:rgba(0,0,0,.5)}
.field input[type="date"]{min-height:50px;color-scheme:dark}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:560px){.field-row{grid-template-columns:minmax(0,1fr)}}
.chip-set{display:flex;flex-wrap:wrap;gap:8px}
.chip-t{display:inline-flex;align-items:center;padding:9px 15px;border-radius:999px;border:0;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font:500 14.5px var(--font);cursor:pointer;transition:background .3s,box-shadow .3s,transform .5s var(--spring)}
.chip-t:hover{background:rgba(255,255,255,.12)}
.chip-t:active{transform:scale(.93)}
.chip-t .ico{width:0;height:15px;stroke-width:2.6;opacity:0;margin-right:0;transition:width .45s var(--spring),opacity .2s,margin .45s var(--spring)}
.chip-t[aria-pressed="true"]{background:linear-gradient(180deg,var(--btn-top),var(--btn-bot));box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 18px -8px rgb(var(--blue-rgb) / .9)}
.chip-t[aria-pressed="true"] .ico{width:15px;opacity:1;margin-right:6px}
.form-err{margin:0;display:flex;align-items:center;gap:8px;color:var(--danger);font-size:14.5px;font-weight:500}
.hp{position:absolute;left:-10000px;width:1px;height:1px;opacity:0;pointer-events:none}   /* bot trap */
.btn .spin{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:currentColor;animation:spin360 .8s linear infinite}
.btn[disabled]{opacity:.7;cursor:default;transform:none}
.shake{animation:shake .45s var(--ease)}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.req-side{position:sticky;top:96px;display:grid;gap:16px}
.ticket{border-radius:28px;padding:18px;overflow:hidden}
.ticket-head{display:flex;gap:12px;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--stroke);margin-bottom:14px}
.ticket-head strong{display:block;font-size:15px}
.ticket-head small{display:block;color:var(--text-3);font-size:12.5px}
.brand-mark.sm{width:32px;height:32px;border-radius:10px;font-size:15px}
.ticket-body{margin:0;font:500 13.5px/1.7 var(--mono);white-space:pre-wrap;word-break:break-word;color:var(--text-2);min-height:180px;max-height:420px;overflow:auto}
.ticket-body .k{color:var(--sky);font-weight:600}
.ticket.pulse{animation:tpulse .6s var(--ease)}
@keyframes tpulse{40%{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 2px rgb(var(--sky-rgb) / .35),0 30px 60px -30px rgba(0,0,0,.85)}}
.req-actions{display:flex;flex-wrap:wrap;gap:10px}
.req-actions .btn{flex:1 1 180px}
.req-steps{margin:0;padding-left:20px;color:var(--text-3);font-size:14px;display:grid;gap:4px}

.faq{max-width:820px;margin:0 auto;display:grid;gap:12px}
.qa{border-radius:24px;overflow:hidden}
.qa > button{all:unset;box-sizing:border-box;width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;cursor:pointer;font-size:18px;font-weight:600;letter-spacing:-.02em}
.qa > button:focus-visible{outline:2px solid var(--sky);outline-offset:-2px;border-radius:24px}
.pm{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;flex:none;transition:transform .6s var(--spring),background .3s}
.pm .ico{width:16px;height:16px;stroke-width:2.2}
.qa[data-open] .pm{transform:rotate(45deg);background:var(--blue)}
.qa-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.qa[data-open] .qa-a{grid-template-rows:1fr}
.qa-a > div{overflow:hidden}
.qa-a p{margin:0;padding:0 24px 22px;color:var(--text-2)}

/* ---------- checkout ---------- */
.co-hero{padding-bottom:clamp(24px,4vw,40px)}
.co{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:20px;align-items:start}
.co-sum{position:sticky;top:96px;border-radius:30px;padding:24px;display:grid;gap:16px}
.co-sum h2{margin:0;font-size:20px;font-weight:700;letter-spacing:-.03em}
.co-lines{display:grid;gap:10px}
.co-line{display:flex;justify-content:space-between;gap:16px;font-size:15px}
.co-line span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.co-line small{color:var(--text-3)}
.co-tot{display:grid;gap:8px;margin:0;padding-top:14px;border-top:1px solid var(--stroke)}
.co-tot div{display:flex;justify-content:space-between;color:var(--text-2);font-variant-numeric:tabular-nums}
.co-tot dd{margin:0}
.co-tot .co-disc{color:var(--sky)}
.co-tot .co-total{color:var(--white);font-size:22px;font-weight:700;letter-spacing:-.03em}
/* Stripe's form uses the light appearance configured in Checkout Studio, so it sits on a light card */
.co-card{border-radius:30px;padding:clamp(16px,3vw,28px);background:#fff;color:#30313d;min-height:320px;box-shadow:0 30px 80px -30px rgb(var(--blue-rgb) / .45)}
.co-pay .fine{margin-top:14px}
.co-state{max-width:640px;margin:0 auto;border-radius:30px;padding:clamp(24px,5vw,44px);text-align:center}
.co-state .lead{margin:0 auto}
.co-state strong{color:var(--white)}
@media (max-width:860px){.co{grid-template-columns:minmax(0,1fr)}.co-sum{position:static}}
/* step 1: agree to the terms (the payment form only appears after this) */
.co-agree{border-radius:30px;padding:clamp(20px,3vw,28px);display:grid;gap:18px;margin-bottom:16px}
.co-agree h2{margin:0;font-size:20px;font-weight:700;letter-spacing:-.03em}
.co-agree .btn[disabled]{opacity:.35;box-shadow:none;cursor:not-allowed}
.agree{position:relative;display:grid;grid-template-columns:26px minmax(0,1fr);gap:14px;align-items:start;padding:16px;border-radius:20px;background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);cursor:pointer;transition:box-shadow .3s,background .3s}
.agree:hover{background:rgba(0,0,0,.4)}
.agree:has(input:checked){box-shadow:inset 0 0 0 1.5px rgb(var(--blue-rgb) / .7)}
.agree input{position:absolute;left:16px;top:16px;width:26px;height:26px;margin:0;opacity:0;cursor:pointer}
.agree-tick{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35);transition:background .25s,box-shadow .25s}
.agree-tick::after{content:"";width:12px;height:7px;border:solid #fff;border-width:0 0 2.5px 2.5px;transform:translateY(-2px) rotate(-45deg) scale(0);transition:transform .45s var(--spring)}
.agree input:checked + .agree-tick{background:var(--blue);box-shadow:none}
.agree input:checked + .agree-tick::after{transform:translateY(-2px) rotate(-45deg) scale(1)}
.agree input:focus-visible + .agree-tick{box-shadow:0 0 0 3px rgb(var(--blue-rgb) / .5)}
.agree-text{font-size:15px;line-height:1.55;color:var(--text-2)}
.agree-text strong{color:var(--white)}
.agree-text a{color:var(--sky);font-weight:600}
.co-agreed{display:flex;gap:10px;align-items:center;margin:0 0 14px;font-size:14px;color:var(--text-2)}
.co-agreed .ico{width:18px;height:18px;flex:none;color:var(--sky)}
.co-agreed a{color:var(--sky)}
.field .help{font-size:13px;color:var(--text-3)}
.fine a,.foot-legal a,.req-legal a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.fine a:hover,.foot-legal a:hover,.req-legal a:hover{color:var(--white)}
.foot-legal{display:flex;flex-wrap:wrap;gap:6px 16px}
.req-legal{margin:0;font-size:13px;line-height:1.5;color:var(--text-3)}

/* ---------- order / download page ---------- */
.od-wrap{max-width:780px;display:grid;gap:14px}
.od{border-radius:30px;padding:clamp(18px,3vw,30px);display:grid;gap:20px}
.od .muted{margin:0;color:var(--text-3);text-align:center}
.od-center{justify-items:center;text-align:center}
.od-head{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin:0;padding-bottom:18px;border-bottom:1px solid var(--stroke)}
.od-head dt{font-size:12.5px;font-weight:600;color:var(--text-3)}
.od-head dd{margin:3px 0 0;font-size:16px;font-weight:600;color:var(--white);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.od-files{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.od-file{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px 12px 12px 14px;border-radius:20px;background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.od-file.is-out{opacity:.6}
.od-ico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgb(var(--blue-rgb) / .16);color:var(--sky)}
.od-ico .ico{width:22px;height:22px}
.od-meta{min-width:0}
.od-meta strong{display:block;font-size:15.5px;font-weight:600;overflow-wrap:anywhere}
.od-meta small{display:block;margin-top:2px;font-size:13px;color:var(--text-3)}
.od-file .btn .ico{width:17px;height:17px}
.od-out{font-size:13px;font-weight:600;color:var(--text-3)}
.od-empty{display:grid;justify-items:center;gap:10px;text-align:center;padding:10px 0}
.od-empty p{margin:0;color:var(--text-2)}
.od-note{display:grid;gap:8px;padding:16px 18px;border-radius:20px;background:rgb(var(--blue-rgb) / .1);box-shadow:inset 0 0 0 1px rgb(var(--blue-rgb) / .3);font-size:14.5px;color:var(--text-2)}
.od-note p{margin:0}
.od-note strong{color:var(--white)}
.od-note a{color:var(--sky)}
.od-note .btn{justify-self:start;margin-top:4px}
.od-note .btn .ico{width:16px;height:16px}
.od-fine{margin:0}
.od-find{gap:16px}
.od-acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:560px){.od-file{grid-template-columns:40px minmax(0,1fr)}.od-file > .btn,.od-file > .od-out,.od-file > .od-acts{grid-column:1 / -1}.od-file > .btn,.od-acts .btn{width:100%}.od-ico{width:40px;height:40px}}

/* ---------- account button + account page ---------- */
.acct{text-decoration:none;color:inherit}
.acct.on{background:rgb(var(--blue-rgb) / .3);color:var(--white)}
.acct.on:hover{background:rgb(var(--blue-rgb) / .45)}
.acct .ico{width:20px;height:20px}
.co-who{margin:0;font-size:14px;color:var(--text-2)}
.co-who strong{color:var(--white)}
.co-who a{color:var(--sky)}
.ac-auth{gap:18px}
.ac-auth form{display:grid;gap:16px}
.ac-auth form[hidden]{display:none}
.ac-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:999px;background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ac-tabs button{height:40px;border:0;border-radius:999px;background:none;color:var(--text-2);font:600 15px var(--font);cursor:pointer;transition:background .3s,color .3s}
.ac-tabs button[aria-selected="true"]{background:var(--blue);color:#fff}
.ac-tabs button:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.ac-auth .fine a,.od-fine a{color:var(--sky)}
.ac-forgot{font-size:14px;color:var(--text-3)}
.ac-forgot summary{cursor:pointer;width:max-content}
.ac-forgot summary:hover{color:var(--sky)}
.ac-forgot p{margin:8px 0 0;color:var(--text-2)}
.ac-forgot a{color:var(--sky)}
.ac-me{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px}
.ac-av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgb(var(--blue-rgb) / .2);color:var(--sky)}
.ac-av .ico{width:24px;height:24px}
.ac-me-t strong{display:block;font-size:16px;overflow-wrap:anywhere}
.ac-me-t small{display:block;font-size:13px;color:var(--text-3)}
.ac-order{gap:14px}
.ac-order .od-head{padding-bottom:14px}
.ac-items{margin:0;font-size:15px;font-weight:600}
.ac-none{margin:0;text-align:left}
.ac-empty{gap:12px}
.ac-empty strong{font-size:19px}
.ac-h{margin:18px 0 0;font-size:22px;font-weight:700;letter-spacing:-.03em}
.form-ok{margin:0;font-size:14.5px;font-weight:500;color:#30D158}
#acBody form.od{gap:16px}
#acBody form.od .btn-sm{justify-self:start}
@media (max-width:520px){.ac-me{grid-template-columns:auto minmax(0,1fr)}.ac-me > .btn{grid-column:1 / -1}}
/* Continue with Discord (Discord's own blurple) */
.btn-discord{color:#fff;background:#5865F2;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 12px 32px -12px rgba(88,101,242,.85)}
.btn-discord:hover{background:#4F5BDA;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 18px 44px -10px rgba(88,101,242,.95)}
.btn-discord .ico{fill:currentColor;stroke:none}
.ac-or{display:flex;align-items:center;gap:12px;margin:0;font-size:13px;color:var(--text-3)}
.ac-or::before,.ac-or::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.12)}
.ac-btns{display:flex;flex-wrap:wrap;gap:8px}
.ac-note{margin:0;font-size:14px;color:var(--text-2)}

/* ---------- legal pages ---------- */
.legal-hero{padding-bottom:clamp(24px,4vw,40px)}
.legal-hero h1{font-size:clamp(40px,7vw,88px)}
.legal-date{margin:14px 0 0;font-size:14px;color:var(--text-3)}
.legal-wrap{max-width:860px;display:grid;gap:18px}
.legal-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.legal-tabs a{padding:9px 16px;border-radius:999px;font-size:14.5px;font-weight:600;text-decoration:none;color:var(--text-2);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--stroke);transition:background .3s,color .3s}
.legal-tabs a:hover{color:var(--white);background:rgba(255,255,255,.1)}
.legal-tabs a[aria-current="page"]{color:#fff;background:var(--blue);box-shadow:none}
.legal{border-radius:32px;padding:clamp(22px,4vw,48px);font-size:16.5px;line-height:1.7;color:var(--text-2)}
.legal h2{margin:2.2em 0 .6em;font-size:clamp(20px,2.2vw,24px);font-weight:700;letter-spacing:-.025em;line-height:1.25;color:var(--white);scroll-margin-top:110px}
.legal h3{margin:1.6em 0 .4em;font-size:17px;font-weight:700;color:var(--white)}
.legal p{margin:0 0 1em}
.legal ul{margin:0 0 1em;padding-left:1.25em;display:grid;gap:.5em}
.legal li::marker{color:var(--sky)}
.legal strong{color:var(--white)}
.legal a{color:var(--sky);text-underline-offset:3px}
.legal-key{border-radius:22px;padding:clamp(18px,3vw,26px);background:rgb(var(--blue-rgb) / .1);box-shadow:inset 0 0 0 1px rgb(var(--blue-rgb) / .35)}
.legal-key h2{margin-top:0}
.legal-key ul{margin:0}
.legal-quote{margin:0 0 1em;padding:16px 20px;border-radius:18px;background:rgba(0,0,0,.3);box-shadow:inset 3px 0 0 var(--blue);color:var(--white);font-weight:500}
.legal .no-list{list-style:none;padding-left:0}
.no-list li{position:relative;padding-left:28px}
.no-list li::before{content:"✕";position:absolute;left:2px;top:0;font-weight:800;color:var(--danger)}
.final{position:relative;overflow:hidden;border-radius:32px;padding:clamp(26px,5vw,52px) clamp(18px,4vw,40px);text-align:center}
.final::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 0%,rgb(var(--blue-rgb) / .28),transparent 60%);pointer-events:none}
.final > *{position:relative}
.final-k{margin:0;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sky)}
.final h2{margin:12px 0 0;font-size:clamp(40px,7vw,80px);font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--white)}
.final-list{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.final-list li{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;font-size:15px;font-weight:700;color:var(--white);background:rgba(255,69,58,.12);box-shadow:inset 0 0 0 1px rgba(255,105,97,.4)}
.final-list li::before{content:"✕";font-weight:800;color:var(--danger)}

/* ---------- 404 ---------- */
.nf{padding-top:clamp(160px,20vw,220px);text-align:center}
.nf-code{font-size:clamp(110px,22vw,240px);font-weight:800;letter-spacing:-.07em;line-height:.9;margin:0}

/* ---------- footer ---------- */
.foot{padding-block:56px 32px;border-top:1px solid var(--stroke);margin-top:40px;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px}
.foot-brand p{color:var(--text-3);font-size:14px;margin:14px 0 0;max-width:26em}
.foot-cols{display:flex;flex-wrap:wrap;gap:56px}
.foot-cols div{display:grid;gap:10px;align-content:start}
.foot-cols h4{margin:0 0 4px;font-size:13px;font-weight:600;color:var(--text-3)}
.foot-cols a{font-size:14.5px;text-decoration:none;color:var(--text-2);transition:color .25s}
.foot-cols a:hover{color:var(--white)}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:48px;padding-top:22px;border-top:1px solid var(--stroke);font-size:13px;color:var(--text-3)}

/* ---------- overlays ---------- */
.scrim{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.66);opacity:0;visibility:hidden;transition:opacity .45s,visibility 0s linear .45s}
.scrim.on{opacity:1;visibility:visible;transition:opacity .45s}
.x{position:absolute;top:14px;right:14px;z-index:3;width:34px;height:34px;border-radius:50%;border:0;display:grid;place-items:center;background:rgba(255,255,255,.12);cursor:pointer;transition:background .3s,transform .5s var(--spring)}
.x:hover{background:rgba(255,255,255,.22)}
.x:active{transform:scale(.88)}
.x .ico{width:16px;height:16px;stroke-width:2.2}

.sheet{position:fixed;z-index:70;inset:0;margin:auto;width:min(900px,calc(100% - 32px));height:fit-content;max-height:calc(100% - 48px);overflow:auto;border-radius:38px;padding:14px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;visibility:hidden}
.sheet.open{visibility:visible}
.grabber{display:none}
.sh-art{position:relative;aspect-ratio:1;border-radius:28px;overflow:hidden;isolation:isolate}
.sh-info{display:flex;flex-direction:column;gap:14px;padding:44px 22px 18px 0;min-width:0}
.sh-cat{align-self:flex-start;font-size:13px;font-weight:600;color:var(--sky);padding:5px 12px;border-radius:999px;background:rgb(var(--sky-rgb) / .12)}
.sh-info h2{margin:0;font-size:clamp(30px,3.6vw,44px);font-weight:700;letter-spacing:-.045em;line-height:1.05}
.sh-info p{margin:0;color:var(--text-2)}
.sh-gets{list-style:none;padding:0;margin:4px 0 0;display:grid;gap:10px}
.sh-gets li{display:flex;gap:10px;align-items:center;font-size:15px}
.sh-gets .ico{width:18px;height:18px;color:var(--sky);stroke-width:2.2}
.sh-buy{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:auto;padding-top:20px;border-top:1px solid var(--stroke)}
.sh-price{font-size:32px;font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.sh-price small{display:block;font-size:12.5px;font-weight:500;letter-spacing:0;color:var(--text-3)}
.sh-btns{display:flex;flex-wrap:wrap;gap:8px}
.icon-btn{width:52px;padding:0}
@media (max-width:680px){
  .sheet{inset:auto 0 0 0;margin:0;width:100%;max-height:92%;border-radius:34px 34px 0 0;grid-template-columns:minmax(0,1fr);gap:18px;padding:0 12px calc(16px + env(safe-area-inset-bottom,0px))}
  .grabber{display:grid;place-items:center;height:26px;touch-action:none;cursor:grab;position:sticky;top:0;z-index:4}
  .grabber span{width:40px;height:5px;border-radius:3px;background:rgba(255,255,255,.3)}
  .sh-art{aspect-ratio:16/11;border-radius:24px}
  .sh-info{padding:0 6px 6px}
  .sheet .x{top:34px;right:22px}
}

.drawer{position:fixed;z-index:70;top:calc(12px + env(safe-area-inset-top,0px));right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));width:min(420px,calc(100% - 24px));border-radius:34px;display:flex;flex-direction:column;transform:translateX(calc(100% + 30px));visibility:hidden;transition:transform var(--spring-dur) var(--spring),visibility 0s linear var(--spring-dur)}
.drawer.open{transform:none;visibility:visible;transition:transform var(--spring-dur) var(--spring)}
.dr-head{padding:24px 24px 10px}
.dr-head h2{margin:0;font-size:30px;font-weight:700;letter-spacing:-.04em}
.dr-head p{margin:2px 0 0;font-size:14px;color:var(--text-3)}
.dr-list{flex:1;overflow:auto;padding:6px 12px}
.bi{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px;border-radius:20px;transition:background .3s}
.bi:hover{background:rgba(255,255,255,.05)}
.bi-art{position:relative;width:54px;height:54px;border-radius:15px;overflow:hidden}
.bi-name{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bi-sub{font-size:13px;color:var(--text-3);font-variant-numeric:tabular-nums}
.stepper{display:flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:rgba(255,255,255,.08)}
.stepper button{width:28px;height:28px;border-radius:50%;border:0;background:none;display:grid;place-items:center;cursor:pointer;transition:background .2s}
.stepper button:hover{background:rgba(255,255,255,.12)}
.stepper .ico{width:15px;height:15px;stroke-width:2.2}
.stepper span{min-width:20px;text-align:center;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.dr-foot{padding:16px 24px 24px;border-top:1px solid var(--stroke);display:grid;gap:14px}
.sub{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;color:var(--text-2)}
.sub strong{font-size:24px;color:var(--white);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.promo{display:flex;gap:8px}
.promo input{flex:1;min-width:0;height:42px;padding:0 16px;border:0;border-radius:999px;background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font:600 14.5px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--white);transition:box-shadow .3s}
.promo input::placeholder{font-family:var(--font);letter-spacing:0;text-transform:none;font-weight:500;color:var(--text-3)}
.promo input:focus{outline:0;box-shadow:inset 0 0 0 1.5px var(--blue),0 0 0 4px rgb(var(--blue-rgb) / .22)}
.promo-msg{margin:-4px 0 0;font-size:13.5px;color:var(--danger)}
.sub.disc{color:var(--sky);font-weight:500;font-variant-numeric:tabular-nums;align-items:center}
.disc-r{display:inline-flex;align-items:center;gap:8px}
.disc-r button{width:22px;height:22px;border-radius:50%;border:0;background:rgba(255,255,255,.1);display:grid;place-items:center;cursor:pointer;padding:0}
.disc-r .ico{width:11px;height:11px;stroke-width:2.6}
.sub.total{padding-top:10px;border-top:1px solid var(--stroke)}
.sub:has(+ .promo:not([hidden])) strong,.sub:has(~ .total:not([hidden])) strong{font-size:17px;color:var(--text-2)}
.wide{width:100%}
.fine{margin:0;font-size:12.5px;color:var(--text-3);text-align:center}
.bag-empty{display:grid;justify-items:center;gap:12px;text-align:center;padding:60px 20px}
.bag-empty .ring{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--stroke)}
.bag-empty .ring .ico{width:34px;height:34px;color:var(--sky)}
.bag-empty strong{font-size:20px;letter-spacing:-.03em}
.bag-empty p{margin:0;color:var(--text-3);font-size:15px}

.toast{position:fixed;z-index:80;left:50%;top:calc(12px + env(safe-area-inset-top,0px));width:min(390px,calc(100% - 24px));border-radius:26px;padding:12px 12px 12px 14px;display:flex;gap:12px;align-items:center;transform:translate(-50%,-170%) scale(.9);transition:transform var(--spring-dur) var(--spring)}
.toast.show{transform:translate(-50%,0)}
.t-art{position:relative;width:40px;height:40px;border-radius:12px;overflow:hidden;flex:none;display:grid;place-items:center}
.t-txt{flex:1;min-width:0}
.t-txt strong{display:block;font-size:15px;font-weight:600}
.t-txt span{display:block;font-size:13.5px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-act{border:0;border-radius:999px;padding:8px 14px;background:rgba(255,255,255,.14);font:600 13.5px var(--font);cursor:pointer;flex:none}
.t-act:hover{background:var(--blue)}

.flyer-x{position:fixed;left:0;top:0;z-index:90;pointer-events:none}
.flyer{width:46px;height:46px;border-radius:14px;overflow:hidden;position:relative;box-shadow:0 0 0 2px rgba(255,255,255,.6),0 10px 30px rgb(var(--blue-rgb) / .7)}

/* ---------- scroll reveal ---------- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  }
}
@keyframes rv{from{opacity:0;translate:0 70px;scale:.94}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .mrow{overflow-x:auto}
}

/* =========================================================================
   Holiday & seasonal themes
   The server sets <html data-theme="…"> (Admin → Themes). Each theme only swaps the colour tokens;
   decorations, logo badge and preview pill come from assets/js/themes.js.
   ========================================================================= */
html[data-theme="newyear"]{--blue:#F5B83D;--blue-rgb:245 184 61;--sky:#FFE08A;--sky-rgb:255 224 138;--deep:#7B5CFF;--deep-rgb:123 92 255;--hi:#FFF1C4;--glow-rgb:255 240 210;--btn-top:#FFD46A;--btn-bot:#E8A11A;--btn-text:#1E1400}
html[data-theme="valentines"]{--blue:#FF3D7F;--blue-rgb:255 61 127;--sky:#FF8FB8;--sky-rgb:255 143 184;--deep:#C2185B;--deep-rgb:194 24 91;--hi:#FFC2D9;--glow-rgb:255 220 232;--btn-top:#FF5C93;--btn-bot:#E8195F;--btn-text:#fff}
html[data-theme="stpatricks"]{--blue:#1FBF5F;--blue-rgb:31 191 95;--sky:#7CF2A8;--sky-rgb:124 242 168;--deep:#0B7A3B;--deep-rgb:11 122 59;--hi:#C8FFDC;--glow-rgb:220 255 230;--btn-top:#2DD36F;--btn-bot:#12994A;--btn-text:#fff}
html[data-theme="easter"]{--blue:#B48CFF;--blue-rgb:180 140 255;--sky:#FFB3D9;--sky-rgb:255 179 217;--deep:#4FC9A4;--deep-rgb:79 201 164;--hi:#FFE9A8;--glow-rgb:255 245 220;--btn-top:#C4A3FF;--btn-bot:#9566FF;--btn-text:#fff}
html[data-theme="summer"]{--blue:#00C2C7;--blue-rgb:0 194 199;--sky:#FFD23F;--sky-rgb:255 210 63;--deep:#FF6B6B;--deep-rgb:255 107 107;--hi:#FFF0A8;--glow-rgb:255 236 200;--btn-top:#22D8DC;--btn-bot:#00A0A6;--btn-text:#fff}
html[data-theme="july4"]{--blue:#3D74FF;--blue-rgb:61 116 255;--sky:#FF4D5E;--sky-rgb:255 77 94;--deep:#1E3A8A;--deep-rgb:30 58 138;--hi:#FFFFFF;--glow-rgb:235 240 255;--btn-top:#FF5A69;--btn-bot:#D81B2E;--btn-text:#fff}
html[data-theme="backtoschool"]{--blue:#FFC21A;--blue-rgb:255 194 26;--sky:#FF7043;--sky-rgb:255 112 67;--deep:#2E7D5B;--deep-rgb:46 125 91;--hi:#FFE38A;--glow-rgb:255 245 210;--btn-top:#FFD23F;--btn-bot:#F2A900;--btn-text:#1A1300}
html[data-theme="fall"]{--blue:#E8712B;--blue-rgb:232 113 43;--sky:#F2B544;--sky-rgb:242 181 68;--deep:#9C3B1B;--deep-rgb:156 59 27;--hi:#FFD9A0;--glow-rgb:255 226 190;--btn-top:#F08A3C;--btn-bot:#C4521A;--btn-text:#fff}
html[data-theme="halloween"]{--blue:#FF7A1A;--blue-rgb:255 122 26;--sky:#FFB547;--sky-rgb:255 181 71;--deep:#8A2BE2;--deep-rgb:138 43 226;--hi:#FFD08A;--glow-rgb:205 170 255;--btn-top:#FF9A3C;--btn-bot:#E9580C;--btn-text:#fff}
html[data-theme="blackfriday"]{--blue:#FFC83D;--blue-rgb:255 200 61;--sky:#FF4545;--sky-rgb:255 69 69;--deep:#B8860B;--deep-rgb:184 134 11;--hi:#FFE7A3;--glow-rgb:255 235 200;--btn-top:#FFD34D;--btn-bot:#EFA300;--btn-text:#140F00}
html[data-theme="christmas"]{--blue:#E8343F;--blue-rgb:232 52 63;--sky:#4ADE80;--sky-rgb:74 222 128;--deep:#0F7A3E;--deep-rgb:15 122 62;--hi:#FFFFFF;--glow-rgb:235 245 255;--btn-top:#FF4A55;--btn-bot:#C81C2B;--btn-text:#fff}

/* text that sits on an accent colour follows --btn-text (dark on the gold and yellow themes) */
.seg-blue [aria-pressed="true"],.flag.sale,.badge,.get:hover,.get.added,.chip-t[aria-pressed="true"],.copy button:hover,.t-act:hover{color:var(--btn-text)}

/* seasonal decorations (drawn behind the content, inside the background layer) */
.bg .fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;animation:fadeIn 1.6s var(--ease) both}
@keyframes fadeIn{from{opacity:0}}
/* small seasonal badge on the logo in the menu */
.brand-mark{position:relative}
/* the blue jay logo, in place of the old blue "J" tile (header, footer, Custom page, admin, notifications) */
.brand-mark.logo{background:url('/assets/img/logo.png') center/112% no-repeat;border-radius:0;box-shadow:none;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45))}
.island .brand-mark.logo,.foot .brand-mark.logo{width:40px;height:40px;margin-block:-3px}
/* the big logos (Custom page "Logos" card, admin sign-in) keep their gentle pulse, without the old tile's square glow */
.ringviz .brand-mark.logo,.brand-mark.lg.logo{animation-name:breatheLogo}
@keyframes breatheLogo{to{transform:scale(1.08)}}
.season-badge{position:absolute;right:-7px;top:-8px;font-size:15px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));animation:badgeIn .9s var(--spring) both .6s;pointer-events:none}
@keyframes badgeIn{from{transform:scale(0) rotate(-40deg);opacity:0}}
/* shown while previewing a theme from the admin panel */
.theme-preview{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:75;display:inline-flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;border-radius:999px;font-size:13.5px;font-weight:500}
.theme-preview button{border:0;border-radius:999px;padding:7px 12px;background:rgba(255,255,255,.14);font:600 13px var(--font);cursor:pointer}
.theme-preview button:hover{background:var(--blue);color:var(--btn-text)}

/* ---------- /apps: jayDesign, jayText, jayEdit + jayAnimate plans ---------- */
.ap-wrap{max-width:980px;display:grid;gap:16px}
.ap-hero h1{font-size:clamp(40px,6.2vw,78px);font-weight:700;letter-spacing:-.045em;line-height:1.02;margin:10px 0 0;text-wrap:balance}
.ap-state{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.ap-state strong{display:block;font-size:19px;letter-spacing:-.02em}
.ap-state p{margin:6px 0 0;color:var(--text-2);font-size:15.5px;max-width:34em}
.ap-state p b{color:var(--white)}
.ap-state.is-on{box-shadow:inset 0 0 0 1.5px rgb(var(--blue-rgb) / .55)}
.ap-btns{display:flex;gap:10px;flex-wrap:wrap}
.ap-ok{background:rgba(48,209,88,.1);box-shadow:inset 0 0 0 1px rgba(48,209,88,.4)}
.ap-apps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:16px}
.ap-app{align-content:start;gap:14px}
.ap-app p{margin:0;color:var(--text-2);font-size:15px;line-height:1.55}
.ap-app .btn{justify-self:start}
.ap-app-h{display:flex;align-items:center;gap:14px}
.ap-app-h h2{margin:0;font-size:26px;letter-spacing:-.035em;font-weight:700}
.ap-app-h h2 span{background:linear-gradient(100deg,var(--sky),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.ap-app-h small{color:var(--text-3);font-size:13.5px}
.ap-mark{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font:800 26px var(--font);color:#fff;background:linear-gradient(140deg,#64d2ff,#2b4bff);box-shadow:0 12px 30px -12px rgb(var(--blue-rgb) / .9),inset 0 1px 0 rgba(255,255,255,.4)}
/* each app's name in its icon's colour */
.ap-app:has(.ap-icon[src*="jaydesign"]) .ap-app-h h2 span{background-image:linear-gradient(100deg,#6cb8ff,#007aff)}
.ap-app:has(.ap-icon[src*="jaytext"]) .ap-app-h h2 span{background-image:linear-gradient(100deg,#ffc061,#ff8c00)}
.ap-app:has(.ap-icon[src*="jayedit"]) .ap-app-h h2 span{background-image:linear-gradient(100deg,#ff6ab9,#ff008c)}
.ap-app:has(.ap-icon[src*="jayanimate"]) .ap-app-h h2 span{background-image:linear-gradient(100deg,#b07dff,#7800ff)}
.ap-icon{width:56px;height:56px;flex:none;border-radius:15px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 14px 30px -12px rgba(0,0,0,.9)}
.ap-mark.t{background:linear-gradient(140deg,#bf5af2,#2b4bff)}
.ap-mark.e{background:linear-gradient(140deg,#ff9f0a,#ff2d55)}
.ap-mark.a{background:linear-gradient(140deg,#30d158,#0a84ff)}
.ap-h{margin:22px 0 0;font-size:clamp(28px,3.4vw,40px);letter-spacing:-.04em}
.ap-sub{margin:0;color:var(--text-2);font-size:15px}
.ap-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.ap-plan{position:relative;align-content:start;gap:10px;text-align:center;justify-items:center}
.ap-plan h3{margin:0;font-size:18px;letter-spacing:-.02em}
.ap-price{margin:0;display:flex;align-items:baseline;gap:6px}
.ap-price b{font-size:46px;letter-spacing:-.05em}
.ap-price span{color:var(--text-3);font-size:15px}
.ap-note{margin:0 0 6px;color:var(--text-2);font-size:14px}
.ap-plan.best{box-shadow:inset 0 0 0 1.5px rgb(var(--blue-rgb) / .7),0 30px 60px -30px rgb(var(--blue-rgb) / .7)}
.ap-plan.cur{box-shadow:inset 0 0 0 1.5px rgba(48,209,88,.6)}
.ap-plan .btn[disabled]{opacity:.55;cursor:default}
.ap-flag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);padding:5px 12px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;color:#fff;background:linear-gradient(90deg,var(--sky),var(--blue))}
.ap-agree .ap-btns .btn[disabled]{opacity:.35;box-shadow:none;cursor:not-allowed}
.ap-manage .ap-btns{justify-content:flex-start}
.ap-faq{gap:4px}
.ap-faq details{padding:12px 4px;border-bottom:1px solid var(--stroke)}
.ap-faq details:last-child{border-bottom:0}
.ap-faq summary{cursor:pointer;font-weight:600;font-size:16px}
.ap-faq p{margin:10px 0 0;color:var(--text-2);font-size:15px;line-height:1.55}
.ap-faq a{color:var(--sky)}
.ac-apps{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ac-apps-b{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- the launch gift screen ---------- */
.gift{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .3s}
.gift.on{opacity:1}
.gift-card{position:relative;width:min(460px,100%);border-radius:34px;padding:34px 28px 22px;text-align:center;display:grid;justify-items:center;gap:10px;background:rgba(14,18,30,.92);transform:translateY(16px) scale(.94);transition:transform .6s var(--spring)}
.gift.on .gift-card{transform:none}
.gift-box{width:92px;height:92px;margin-top:-6px;animation:giftHop 1.6s var(--spring) .2s both}
.gift-box svg{width:100%;height:100%;filter:drop-shadow(0 14px 24px rgb(var(--blue-rgb) / .6))}
@keyframes giftHop{0%{transform:scale(.4) rotate(-14deg);opacity:0}40%{transform:scale(1.08) rotate(6deg);opacity:1}70%{transform:scale(.98) rotate(-3deg)}100%{transform:none}}
.gift-card h2{margin:4px 0 0;font-size:clamp(24px,4vw,30px);letter-spacing:-.04em;line-height:1.1}
.gift-card p{margin:0;color:var(--text-2);font-size:16px;line-height:1.5}
.gift-card p b{color:var(--white)}
.gift-card .gift-small{font-size:13.5px;color:var(--text-3)}
.gift-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.gift-later{margin-top:2px;border:0;background:none;color:var(--text-3);font:500 14px var(--font);cursor:pointer;padding:8px}
.gift-later:hover{color:var(--white)}
.gift-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.gift-confetti i{position:absolute;top:-20px;left:var(--x);width:9px;height:14px;border-radius:2px;background:hsl(var(--h) 90% 62%);transform:rotate(var(--r));animation:giftFall 2.6s cubic-bezier(.2,.6,.4,1) var(--d) both}
@keyframes giftFall{to{transform:translateY(110vh) rotate(calc(var(--r) + 540deg));opacity:.2}}
@media (prefers-reduced-motion:reduce){.gift-confetti{display:none}.gift-box{animation:none}}

/* Leave a review (reviews page): the gift screen's overlay with a form inside */
.rvf-card{width:min(540px,100%);max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;padding:30px 26px 22px;gap:14px}
.rvf-x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;background:rgba(255,255,255,.08);color:var(--text-2);cursor:pointer;transition:background .2s,color .2s}
.rvf-x:hover{background:rgba(255,255,255,.16);color:var(--white)}
.rvf-x .ico{width:18px;height:18px}
.rvf-card .rvf-wait{margin:22px 0;color:var(--text-3)}
.rvf-who{display:flex;align-items:center;gap:12px;text-align:left}
.rvf-who strong{display:block;font-size:15px}
.rvf-who small{display:block;font-size:13px;color:var(--text-3)}
.rvf-form{display:grid;gap:18px;width:100%;text-align:left;margin-top:2px}
.rvf-stars{display:flex;justify-content:center;gap:4px}
.rvf-stars button{width:46px;height:46px;border:0;padding:0;display:grid;place-items:center;background:none;color:rgba(255,255,255,.18);cursor:pointer;border-radius:12px;transition:color .2s,transform .45s var(--spring)}
.rvf-stars button .ico{width:36px;height:36px}
.rvf-stars button.on{color:var(--sky)}
.rvf-stars button:hover{transform:scale(1.12)}
.rvf-stars button:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.rvf-card .rvf-note{font-size:13.5px}
.rvf-card .form-err{color:var(--danger);font-size:14.5px}
.rvf-form .gift-btns{margin-top:0}
.rvf-done .stars{justify-content:center}
.rvf-done .stars .ico{width:28px;height:28px}
/* ---------- giveaways: home page section (assets/js/giveaway.js) ---------- */
.gw-sec[hidden]{display:none}
.gw-list{display:grid;gap:18px}
.gw{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(18px,3vw,36px);align-items:center;padding:clamp(12px,1.6vw,16px);border-radius:32px}
.gw-art{position:relative;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:radial-gradient(70% 80% at 30% 20%,rgb(var(--blue-rgb) / .55),transparent 70%),linear-gradient(160deg,#0d1730,#05070d)}
.gw-art img{display:block;width:100%;height:100%;object-fit:cover}
.gw-art-ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--sky)}
.gw-art-ph .ico{width:64px;height:64px;stroke-width:1.3}
.gw-body{display:grid;gap:16px;padding:clamp(4px,1.4vw,14px) clamp(4px,1.4vw,14px) clamp(4px,1.4vw,14px) 0}
.gw-tag{display:inline-flex;align-items:center;gap:8px;width:max-content;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;color:var(--text-2);background:rgba(255,255,255,.08)}
.gw-tag.live{color:#30D158;background:rgba(48,209,88,.14)}
.gw-tag.live i{width:8px;height:8px;border-radius:50%;background:currentColor;animation:gwPulse 1.6s ease-in-out infinite}
@keyframes gwPulse{50%{opacity:.3}}
.gw h3{margin:0;font-size:clamp(26px,3.2vw,38px);font-weight:700;letter-spacing:-.035em;line-height:1.08;text-wrap:balance}
.gw-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}
.gw-facts div{padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);min-width:0}
.gw-facts dt{font-size:12.5px;color:var(--text-3)}
.gw-facts dd{margin:3px 0 0;font-size:17px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gw-act{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.gw-done .gw-facts{grid-template-columns:minmax(0,1.7fr) repeat(2,minmax(0,1fr))}
.gw-done .gw-facts div:first-child dd{white-space:normal}
.gw-in{display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 20px;border-radius:999px;font-weight:600;color:#30D158;background:rgba(48,209,88,.14)}
.gw-in .ico{width:18px;height:18px}
.gw-act .btn-sm{height:52px}
.gw-state,.gw-won{display:flex;align-items:center;gap:10px;margin:0;font-size:15.5px;color:var(--text-2)}
.gw-state .ico,.gw-won .ico{width:20px;height:20px;flex:none;color:var(--sky)}
.gw-won b{color:var(--white)}
.gw-fine{margin:0;font-size:13px;color:var(--text-3)}
.gw-fine a{color:var(--sky)}
.gw-err{margin-top:-6px}
@media (max-width:820px){.gw{grid-template-columns:1fr}.gw-body{padding:4px 6px 8px}}
@media (max-width:440px){.gw-facts{gap:6px}.gw-facts div{padding:10px}.gw-facts dd{font-size:15px}.gw-act .btn{width:100%}}

/* ---------- live custom-order queue (/queue, assets/js/queue.js) ---------- */
.q-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;margin-bottom:18px;font-size:14.5px;color:var(--text-2)}
.q-meta strong{color:var(--white)}
.q-live{display:inline-flex;align-items:center;gap:8px;color:var(--text-3)}
.q-live i{width:8px;height:8px;border-radius:50%;background:#30D158;animation:gwPulse 1.6s ease-in-out infinite}
.q-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.q-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding:16px 20px;border-radius:24px}
.q-item.now{box-shadow:inset 0 0 0 1.5px rgba(48,209,88,.45)}
.q-pos{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:17px;font-variant-numeric:tabular-nums;background:rgba(255,255,255,.07);color:var(--text-2)}
.q-item.now .q-pos{background:rgba(48,209,88,.16);color:#30D158}
.q-main{min-width:0}
.q-main strong{display:block;font-size:16.5px;overflow-wrap:anywhere}
.q-main p{margin:3px 0 0;font-size:14.5px;color:var(--text-2);overflow-wrap:anywhere}
.q-side{display:grid;justify-items:end;gap:5px;text-align:right}
.q-st{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap;color:var(--text-2);background:rgba(255,255,255,.08)}
.q-st.now{color:#30D158;background:rgba(48,209,88,.14)}
.q-st.now::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;animation:gwPulse 1.6s ease-in-out infinite}
.q-side small{font-size:12.5px;color:var(--text-3);white-space:nowrap}
.q-empty{display:grid;justify-items:center;gap:12px;padding:clamp(30px,5vw,48px) 20px;border-radius:30px;text-align:center}
.q-empty strong{font-size:20px}
.q-empty p{margin:0;max-width:30em;color:var(--text-2)}
.q-empty .cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:6px}
@media (max-width:560px){.q-item{grid-template-columns:auto minmax(0,1fr);padding:14px 16px;gap:12px}.q-side{grid-column:2;justify-items:start;text-align:left;display:flex;flex-wrap:wrap;align-items:center;gap:8px}.q-pos{width:38px;height:38px;font-size:15px}}
@media (prefers-reduced-motion:reduce){.gw-tag.live i,.q-live i,.q-st.now::before{animation:none}}