/* =============================================================
   DIGITAL DEN — style.css

   One design system for the whole site, written from scratch against
   the markup that actually exists.

   It replaces a 4,800-line file that had been redesigned four times by
   layering each version on top of the last: three separate :root token
   blocks, the same selector defined up to four times with the last one
   winning, and 318 of its 701 classes styling markup that no longer
   existed. Every rule below is for an element the site renders today.

   ORDER
     1  Tokens            7  Footer
     2  Base and type     8  Home
     3  Layout            9  Store and cards
     4  Backdrop         10  Product page and rich text
     5  Header and nav   11  Cart, customers, docs, legal, forms
     6  Controls         12  Staff tools
                         13  Motion and responsive
   ============================================================= */

/* ---------- 1. Tokens ----------
   Named for what they do rather than what they look like, so a change of
   palette is a change here and nowhere else. The older names further down
   are aliases kept for the staff tools, which were ported rather than
   rewritten; new rules use the semantic names. */
:root{
  /* surfaces, darkest to lightest */
  --bg:        #07060b;
  --bg-2:      #0a0910;
  --surface:   #0e0c15;
  --surface-2: #13111c;
  --surface-3: #1a1725;
  --surface-4: #221e30;

  /* hairlines */
  --line:   rgba(255,255,255,.065);
  --line-2: rgba(255,255,255,.10);
  --line-3: rgba(255,255,255,.17);

  /* text: 15.8:1, 8.6:1 and 4.7:1 against --bg */
  --text:   #f4f2f9;
  --text-2: #b3adc3;
  --text-3: #8a84a0;

  /* brand */
  --brand:      #7a22ff;
  --brand-2:    #9152ff;
  --brand-3:    #b48cff;
  --brand-ink:  #d9c8ff;
  --brand-soft: rgba(122,34,255,.14);
  --brand-line: rgba(145,82,255,.38);

  /* signal */
  --ok:   #34d399;
  --warn: #fbbf24;
  --bad:  #f87171;
  --ok-soft:   rgba(52,211,153,.12);
  --warn-soft: rgba(251,191,36,.12);
  --bad-soft:  rgba(248,113,113,.12);

  /* type */
  --font-display: "General Sans", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* radius */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* depth: a top-edge highlight and a soft fall-off, rather than glows */
  --edge:     inset 0 1px 0 rgba(255,255,255,.045);
  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-2: 0 2px 4px rgba(0,0,0,.4), 0 24px 48px -20px rgba(0,0,0,.75);
  --shadow-3: 0 30px 80px -24px rgba(0,0,0,.85);

  /* motion */
  --ease:     cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: .16s;
  --t:      .28s;

  /* layout */
  /* --nav-h is everything fixed at the top: the header bar plus the promo
     strip when one is running. Every offset on the site reads it, so the
     strip pushes the whole page down without a rule of its own anywhere. */
  --bar-h:   72px;
  --promo-h: 0px;
  --nav-h:  calc(var(--bar-h) + var(--promo-h));
  --shell:  1200px;
  --gutter: clamp(1.1rem, 4vw, 2rem);

  /* ---- aliases for the ported staff tools ---- */
  --ink-900: var(--bg);
  --mute: var(--text-2);
  --mute-dim: var(--text-3);
  --stroke: var(--line-2);
  --glass-strong: rgba(255,255,255,.06);
  --grad-brand: linear-gradient(135deg, var(--brand-3), var(--brand) 55%, #4d0bad);
  --glow-sm: 0 0 0 1px var(--brand-line);
  --violet-200: #c9aaff;
  --violet-300: var(--brand-3);
  --violet-400: var(--brand-2);
  --violet-500: var(--brand);
}

/* ---------- 2. Base and type ---------- */
*,*::before,*::after{ box-sizing:border-box }
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-padding-top:calc(var(--nav-h) + 16px);
  background:var(--bg);
  color-scheme:dark;
}
body{
  margin:0;
  min-height:100vh;
  background:transparent;
  color:var(--text);
  font:400 15px/1.65 var(--font-body);
  font-feature-settings:"cv11","ss01";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
html.drawer-open{ overflow:hidden }

img,svg,video,canvas{ display:block; max-width:100% }
img{ height:auto }
svg{ flex:0 0 auto }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:0; padding:0 }
input,select,textarea{ font:inherit; color:inherit }
[hidden]{ display:none !important }
::selection{ background:rgba(145,82,255,.42); color:#fff }

h1,h2,h3,h4,h5,h6{
  margin:0;
  font-family:var(--font-display);
  font-weight:600;
  color:var(--text);
  letter-spacing:-.022em;
  line-height:1.15;
  text-wrap:balance;
}
h1{ font-size:clamp(2.3rem, 4.6vw, 3.6rem); letter-spacing:-.04em; line-height:1.04 }
h2{ font-size:clamp(1.7rem, 3vw, 2.35rem); letter-spacing:-.032em }
h3{ font-size:1.12rem }
p{ margin:0 0 1em; text-wrap:pretty }
p:last-child{ margin-bottom:0 }
b,strong{ font-weight:600; color:var(--text) }
code{
  font-family:var(--font-mono);
  font-size:.86em;
  padding:.12em .38em;
  border-radius:var(--r-xs);
  background:rgba(255,255,255,.06);
  color:var(--brand-ink);
}
hr{ border:0; height:1px; background:var(--line-2); margin:2rem 0 }

/* The second line of a heading. One solid tone, not a gradient: a
   gradient on every headline is the single most recognisable template
   tell there is. */
.grad-text,.accent{ color:var(--brand-3) }

.lead{
  font-size:clamp(1rem, 1.3vw, 1.1rem);
  line-height:1.65;
  color:var(--text-2);
  max-width:56ch;
}

/* Context above a page title: the product a docs page belongs to, the
   section a legal page sits in. Plain text in a quiet tone, without the
   slash, rule or pill it used to carry. */
.eyebrow,.hero-eyebrow{
  display:inline-block;
  margin-bottom:1rem;
  font-size:.86rem;
  font-weight:500;
  color:var(--brand-3);
}

.mono{ font-family:var(--font-mono) }
.vh{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Focus: always visible for keyboards, never for mouse clicks. */
:focus{ outline:none }
:focus-visible{
  outline:2px solid var(--brand-3);
  outline-offset:2px;
  border-radius:var(--r-xs);
}

.skip-link{
  position:fixed; left:1rem; top:-100px; z-index:200;
  padding:.65rem 1rem; border-radius:var(--r-sm);
  background:#fff; color:#0a0910; font-weight:600;
  transition:top var(--t) var(--ease);
}
.skip-link:focus{ top:1rem }

/* ---------- 3. Layout ---------- */
.shell{
  width:100%;
  max-width:calc(var(--shell) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
main{ position:relative; display:block }
section{ position:relative; padding-block:clamp(3.5rem, 7vw, 6rem) }

.page-hero{
  padding-top:calc(var(--nav-h) + clamp(2.5rem, 6vw, 4.5rem));
  padding-bottom:clamp(2.2rem, 4vw, 3.2rem);
}
.page-hero h1{ margin-bottom:1rem }
.page-hero .lead{ margin-top:0 }

.sec-head{ margin-bottom:clamp(2rem, 4vw, 3rem); max-width:640px }
.sec-head.center{ margin-inline:auto; text-align:center }
.sec-head.center .lead{ margin-inline:auto }
.sec-head h2{ margin-bottom:.85rem }

.sec-row{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap;
  margin-bottom:1.6rem;
}
.sec-title{ font-size:clamp(1.45rem, 2.4vw, 1.85rem); letter-spacing:-.03em; margin-bottom:.3rem }
.sec-sub{ color:var(--text-3); font-size:.92rem }

.link-more{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.9rem; font-weight:500; color:var(--text-2);
  transition:color var(--t-fast) var(--ease);
}
.link-more svg{ width:15px; height:15px; transition:transform var(--t) var(--ease-out) }
.link-more:hover{ color:#fff }
.link-more:hover svg{ transform:translateX(3px) }

/* ---------- 4. Backdrop ----------
   The photograph you chose, as the backdrop to the top of every page:
   full strength behind the header and the opening section, then fading
   into the page colour so everything below reads on a clean dark ground.

   Anchored to the top of the document rather than fixed to the screen.
   Fixed, the fade was tied to the viewport instead of the page, so every
   scroll position showed the same bright band and the image sat behind
   long-form content halfway down. One faint light at the top is the only
   colour added, and nothing here animates. */
.backdrop{
  position:absolute; top:0; left:0; right:0; z-index:-1;
  height:min(1250px, 125vh);
  pointer-events:none;
  /* Steep on purpose: page titles sit over the photograph, body copy below
     them sits on near-solid dark, because long text over a busy image is
     tiring to read however good the image is. */
  background:
    radial-gradient(70% 45% at 50% -6%, rgba(122,34,255,.18), transparent 70%),
    linear-gradient(180deg, rgba(7,6,11,.42) 0%, rgba(7,6,11,.6) 26%, rgba(7,6,11,.86) 48%, rgba(7,6,11,.97) 70%, var(--bg) 100%),
    url("../img/bg.webp") center top / cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg, #000 75%, transparent);
  mask-image:linear-gradient(180deg, #000 75%, transparent);
}

#scroll-progress{
  position:fixed; top:0; left:0; right:0; z-index:120;
  height:2px; pointer-events:none;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--brand), var(--brand-3));
}
/* ---------- 5. Header and nav ----------
   Transparent over the hero, then a frosted bar with a hairline once the
   page moves, so it never sits as a slab on top of the artwork. */
.nav{
  position:fixed; top:var(--promo-h); left:0; right:0; z-index:100;
  height:var(--bar-h);
  display:flex; align-items:center;
  border-bottom:1px solid transparent;
  transition:background var(--t) var(--ease), border-color var(--t) var(--ease), backdrop-filter var(--t) var(--ease);
}
.nav.stuck{
  background:rgba(8,7,12,.72);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  border-bottom-color:var(--line);
}
.nav-inner{
  width:100%; max-width:calc(var(--shell) + var(--gutter) * 2);
  margin-inline:auto; padding-inline:var(--gutter);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1.5rem;
}

.brand{ display:inline-flex; align-items:center; justify-self:start }
/* The logo is a stacked lockup -- mark, then DIGITAL, then DEN -- so it
   needs more height than a horizontal wordmark would to stay legible. */
.brand-mark{ height:56px; width:auto; transition:opacity var(--t-fast) var(--ease) }
.brand:hover .brand-mark{ opacity:.85 }

.nav-links{
  display:flex; align-items:center; gap:.2rem;
  padding:.3rem; border-radius:var(--r-pill);
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
}
.nav-links a{
  position:relative;
  padding:.45rem .95rem; border-radius:var(--r-pill);
  font-size:.9rem; font-weight:500; color:var(--text-2);
  transition:color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav-links a:hover{ color:#fff }
.nav-links a.active{ color:#fff; background:rgba(255,255,255,.08) }

.nav-cta{ display:flex; align-items:center; gap:.5rem; justify-self:end }

/* Discord member count. Only appears once the real number has arrived. */
.online-pill{
  display:inline-flex; align-items:center; gap:.45rem;
  height:36px; padding:0 .8rem; border-radius:var(--r-pill);
  font-size:.78rem; color:var(--text-2); white-space:nowrap;
  border:1px solid var(--line-2); background:rgba(255,255,255,.03);
  transition:border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.online-pill:hover{ border-color:var(--line-3); color:#fff }
.online-pill b{ color:#fff; font-weight:600 }
.online-mark{ width:15px; height:15px; color:#8b93ff }
.online-dot{
  width:7px; height:7px; border-radius:50%; background:var(--ok);
  box-shadow:0 0 0 3px rgba(52,211,153,.18);
}

/* currency */
.cur-wrap{ position:relative }
.cur-btn{
  display:inline-flex; align-items:center; gap:.45rem;
  height:36px; padding:0 .7rem; border-radius:var(--r-pill);
  border:1px solid var(--line-2); background:rgba(255,255,255,.03);
  font-size:.78rem; font-weight:600; letter-spacing:.02em;
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.cur-btn:hover,.cur-btn[aria-expanded="true"]{ border-color:var(--line-3); background:rgba(255,255,255,.06) }
.cur-flag{ width:18px; height:13px; border-radius:2px; object-fit:cover }
.cur-caret{ width:9px; height:6px; color:var(--text-3); transition:transform var(--t) var(--ease) }
.cur-btn[aria-expanded="true"] .cur-caret{ transform:rotate(180deg) }
.cur-list{
  position:absolute; right:0; top:calc(100% + 8px); z-index:110;
  width:244px; max-height:min(60vh, 420px); overflow:auto;
  padding:.35rem; border-radius:var(--r-md);
  background:var(--surface-2); border:1px solid var(--line-2);
  box-shadow:var(--shadow-3);
  scrollbar-width:thin;
}
.cur-list button{
  width:100%; display:flex; align-items:center; gap:.7rem;
  padding:.55rem .65rem; border-radius:var(--r-sm); text-align:left;
  font-size:.86rem; color:var(--text-2);
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cur-list button:hover{ background:rgba(255,255,255,.05); color:#fff }
.cur-list button[aria-checked="true"]{ background:var(--brand-soft); color:#fff }
.cur-name{ flex:1 }
.cur-abbr{ font-family:var(--font-mono); font-size:.72rem; color:var(--text-3) }

/* cart button */
.cart-btn{
  position:relative;
  display:grid; place-items:center;
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line-2); background:rgba(255,255,255,.03);
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.cart-btn:hover{ border-color:var(--line-3); background:rgba(255,255,255,.06) }
.cart-btn svg{ width:17px; height:17px }
.cart-count{
  position:absolute; top:-4px; right:-4px;
  min-width:18px; height:18px; padding:0 5px; border-radius:var(--r-pill);
  display:grid; place-items:center;
  font-size:.66rem; font-weight:700; color:#fff;
  background:var(--brand); box-shadow:0 0 0 2px var(--bg);
}

/* burger and drawer (mobile) */
.burger{
  display:none;
  width:38px; height:38px; border-radius:var(--r-sm);
  border:1px solid var(--line-2); background:rgba(255,255,255,.03);
  flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.burger span{ display:block; width:16px; height:1.5px; background:#fff; border-radius:2px; transition:transform var(--t) var(--ease), opacity var(--t-fast) var(--ease) }
.burger.open span:nth-child(1){ transform:translateY(5.5px) rotate(45deg) }
.burger.open span:nth-child(2){ opacity:0 }
.burger.open span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg) }

.drawer{
  position:fixed; inset:var(--nav-h) 0 0 0; z-index:99;
  display:flex; flex-direction:column; gap:.2rem;
  padding:1.2rem var(--gutter) 2rem;
  background:rgba(8,7,12,.97);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s linear var(--t);
}
.drawer.open{ opacity:1; visibility:visible; transform:none; transition-delay:0s }
.drawer a{
  padding:1rem .2rem; border-bottom:1px solid var(--line);
  font-family:var(--font-display); font-size:1.4rem; font-weight:600; letter-spacing:-.02em;
}
.drawer a:active{ color:var(--brand-3) }

/* ---------- 6. Controls ---------- */
.btn{
  --h:42px;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  height:var(--h); padding:0 1.15rem; border-radius:var(--r-sm);
  font-size:.9rem; font-weight:600; line-height:1; white-space:nowrap;
  border:1px solid transparent;
  transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease);
  -webkit-user-select:none; user-select:none;
}
.btn svg{ width:16px; height:16px }
.btn:active{ transform:translateY(1px) }
.btn:disabled,.btn[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; transform:none }

.btn-lg{ --h:50px; padding:0 1.5rem; font-size:.95rem; border-radius:var(--r-md) }
.btn-sm{ --h:36px; padding:0 .9rem; font-size:.84rem }
.btn-xs{ --h:28px; padding:0 .65rem; font-size:.78rem; border-radius:var(--r-xs) }
.btn-block{ width:100% }

/* white: the one action on a screen */
.btn-light{ background:#fff; color:#0b0a10 }
.btn-light:hover{ background:#e8e4f2 }

/* brand: for actions that are about us rather than the purchase */
.btn-primary{
  color:#fff;
  background:linear-gradient(180deg, var(--brand-2), var(--brand));
  border-color:rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 6px 20px -8px rgba(122,34,255,.7);
}
.btn-primary:hover{ background:linear-gradient(180deg, #9e66ff, var(--brand-2)) }

.btn-ghost{
  color:var(--text);
  background:rgba(255,255,255,.04);
  border-color:var(--line-2);
}
.btn-ghost:hover{ background:rgba(255,255,255,.08); border-color:var(--line-3) }

.btn.danger,.btn-ghost.danger{ color:var(--bad); border-color:rgba(248,113,113,.3) }
.btn.danger:hover{ background:var(--bad-soft) }

/* A brand mark that is an image (FiveM), sized to sit beside an icon. */
.btn-mark{ width:15px; height:15px; object-fit:contain }

/* Framework badges on cards and the product page */
.card-fw{ display:flex; flex-wrap:wrap; gap:.35rem }
.fw{
  display:inline-flex; align-items:center; gap:.35rem;
  height:22px; padding:0 .5rem; border-radius:var(--r-xs);
  font-size:.68rem; font-weight:600; letter-spacing:.02em; text-transform:uppercase;
  color:var(--text-2); background:rgba(255,255,255,.045); border:1px solid var(--line);
}
.fw img,.fw svg{ width:13px; height:13px; object-fit:contain }
.fw-esx{ color:#9ecbff }
.fw-qbcore{ color:#ff9a9a }
.fw-qbox{ color:#ffd479 }
.fw-standalone{ color:#8ff0c4 }

/* forms */
.field{ display:flex; flex-direction:column; gap:.45rem; margin-bottom:1.15rem }
.field label{ font-size:.86rem; font-weight:500; color:var(--text) }
.field-opt{ font-weight:400; color:var(--text-3); margin-left:.3rem }
.field input,.field select,.field textarea,
.store-search input{
  width:100%;
  padding:.72rem .9rem; border-radius:var(--r-sm);
  font-size:.92rem; line-height:1.4;
  background:rgba(255,255,255,.035); border:1px solid var(--line-2);
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field textarea{ resize:vertical; min-height:120px }
.field select{
  appearance:none; padding-right:2.4rem; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23b3adc3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9rem center; background-size:10px;
}
.field select option{ background:var(--surface-2) }
.field input::placeholder,.field textarea::placeholder,.store-search input::placeholder{ color:var(--text-3) }
.field input:hover,.field select:hover,.field textarea:hover{ border-color:var(--line-3) }
.field input:focus,.field select:focus,.field textarea:focus,.store-search input:focus{
  outline:none; border-color:var(--brand-line); background:rgba(255,255,255,.05);
  box-shadow:0 0 0 3px rgba(122,34,255,.18);
}
.field-hint{ font-size:.8rem; color:var(--text-3) }
.err-msg{ display:none; font-size:.8rem; color:var(--bad) }
.field.invalid .err-msg,.field.is-invalid .err-msg,.field.has-err .err-msg{ display:block }
.field.invalid input,.field.invalid textarea,.field.is-invalid input,.field.is-invalid textarea,
.field.has-err input,.field.has-err textarea,.field.has-err select{ border-color:rgba(248,113,113,.5) }

.form-msg,.store-msg{
  margin:0 0 1rem; padding:.75rem 1rem; border-radius:var(--r-sm);
  font-size:.88rem; color:var(--text-2);
  background:rgba(255,255,255,.035); border:1px solid var(--line-2);
}
.form-msg.ok,.form-msg.is-ok{ color:var(--ok); background:var(--ok-soft); border-color:rgba(52,211,153,.3) }
.form-msg.err,.form-msg.is-bad,.store-msg.is-bad{ color:#fecaca; background:var(--bad-soft); border-color:rgba(248,113,113,.3) }

/* ---------- cart drawer ---------- */
.cart-backdrop{
  position:fixed; inset:0; z-index:140;
  background:rgba(3,2,6,.62);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  animation:fade-in var(--t) var(--ease);
}
.cart{
  position:fixed; top:0; right:0; bottom:0; z-index:150;
  width:min(420px, 100vw);
  display:flex; flex-direction:column;
  background:var(--bg-2);
  border-left:1px solid var(--line-2);
  box-shadow:var(--shadow-3);
  transform:translateX(102%); visibility:hidden;
  transition:transform .42s var(--ease-out), visibility 0s linear .42s;
}
.cart.open{ transform:none; visibility:visible; transition:transform .42s var(--ease-out), visibility 0s }
.cart-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.15rem 1.35rem; border-bottom:1px solid var(--line);
}
.cart-head h2{ font-size:1.1rem; letter-spacing:-.02em; display:flex; align-items:baseline; gap:.6rem }
.cart-head h2 span{ font-family:var(--font-body); font-size:.8rem; font-weight:500; color:var(--text-3) }
.cart-x,.cart-close{
  display:grid; place-items:center; width:34px; height:34px; border-radius:var(--r-sm);
  color:var(--text-2); transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cart-x:hover,.cart-close:hover{ background:rgba(255,255,255,.06); color:#fff }
.cart-x svg,.cart-close svg{ width:18px; height:18px }
.cart-body{ flex:1; overflow-y:auto; padding:1rem 1.35rem; scrollbar-width:thin }
.cart-foot{ padding:1.15rem 1.35rem 1.35rem; border-top:1px solid var(--line); display:grid; gap:.7rem }
.cart-cont{ font-size:.86rem; color:var(--text-3); padding:.3rem; transition:color var(--t-fast) var(--ease) }
.cart-cont:hover{ color:#fff }

.cart-line{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; font-size:.9rem; color:var(--text-2) }
.cart-line b{ color:var(--text); font-weight:600; font-variant-numeric:tabular-nums }
.cart-line.is-save b{ color:var(--ok) }
.cart-line.is-total{ font-size:1rem; color:var(--text) }
.cart-line.is-total b{ font-family:var(--font-display); font-size:1.5rem; letter-spacing:-.02em }

.cart-empty{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:.5rem; padding:3rem 1rem;
}
.cart-empty-ico{
  display:grid; place-items:center; width:52px; height:52px; margin-bottom:.4rem;
  border-radius:50%; background:rgba(255,255,255,.04); border:1px solid var(--line-2);
  color:var(--text-3);
}
.cart-empty-ico svg{ width:20px; height:20px }
.cart-empty b{ font-family:var(--font-display); font-size:1.05rem }
.cart-empty p{ font-size:.88rem; color:var(--text-3); max-width:30ch; margin-bottom:.8rem }
.cart-empty.is-page{ padding:4rem 1rem; border:1px dashed var(--line-2); border-radius:var(--r-lg) }

/* a cart line, in the drawer and on the cart page */
.cl{
  display:grid; grid-template-columns:76px minmax(0,1fr) auto; gap:.9rem; align-items:center;
  padding:.85rem 0; border-bottom:1px solid var(--line);
}
.cl:last-child{ border-bottom:0 }
.cl-art{
  display:block; aspect-ratio:16/10; border-radius:var(--r-sm); overflow:hidden;
  background:var(--surface-3); border:1px solid var(--line);
}
.cl-art img{ width:100%; height:100%; object-fit:cover }
.cl-body{ min-width:0; display:flex; flex-direction:column; gap:.15rem }
.cl-cat{ font-size:.7rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3) }
.cl-name{
  font-size:.9rem; font-weight:600; line-height:1.35; color:var(--text);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.cl-name:hover{ color:var(--brand-ink) }
.cl-qty{ font-size:.78rem; color:var(--text-3) }
.cl-right{ display:flex; flex-direction:column; align-items:flex-end; gap:.5rem }
.cl-price{ display:flex; flex-direction:column; align-items:flex-end; font-variant-numeric:tabular-nums }
.cl-price b{ font-size:.92rem }
.cl-price s{ font-size:.76rem; color:var(--text-3) }
.cl-off{ font-size:.7rem; color:var(--ok) }
.cl-bin{
  display:grid; place-items:center; width:28px; height:28px; border-radius:var(--r-xs);
  color:var(--text-3); transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cl-bin:hover{ background:var(--bad-soft); color:var(--bad) }
.cl-bin svg{ width:15px; height:15px }

/* ---------- consent ---------- */
.consent{
  position:fixed; left:50%; bottom:1.2rem; z-index:160;
  width:min(640px, calc(100vw - 2rem));
  transform:translate(-50%, 16px); opacity:0;
  transition:transform .45s var(--ease-out), opacity .35s var(--ease);
}
.consent.show{ transform:translate(-50%, 0); opacity:1 }
.consent-inner{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:1.2rem;
  padding:1.1rem 1.2rem; border-radius:var(--r-lg);
  background:rgba(19,17,28,.94);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid var(--line-2); box-shadow:var(--shadow-3);
}
.consent-copy b{ display:block; font-size:.9rem; margin-bottom:.2rem }
.consent-copy p{ font-size:.82rem; line-height:1.55; color:var(--text-2); margin:0 }
.consent-copy a{ color:var(--brand-3); text-decoration:underline; text-underline-offset:2px }
.consent-actions{ display:flex; gap:.5rem }

/* ---------- back to top ---------- */
#to-top{
  position:fixed; right:1.2rem; bottom:1.2rem; z-index:90;
  display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  background:rgba(19,17,28,.9); border:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s linear var(--t), border-color var(--t-fast) var(--ease);
}
#to-top.show{ opacity:1; visibility:visible; transform:none; transition-delay:0s }
#to-top:hover{ border-color:var(--line-3) }
#to-top svg{ width:16px; height:16px }

/* ---------- 7. Footer ---------- */
footer{
  position:relative;
  margin-top:clamp(2rem, 5vw, 4rem);
  padding:clamp(3rem, 6vw, 4.5rem) 0 2rem;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.35));
}
.foot-top{
  display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
  padding:clamp(1.6rem, 4vw, 2.4rem);
  border-radius:var(--r-xl);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(122,34,255,.16), transparent 60%),
    var(--surface);
  border:1px solid var(--line-2);
  box-shadow:var(--edge);
  margin-bottom:clamp(2.5rem, 5vw, 3.5rem);
}
.foot-line{ font-size:clamp(1.6rem, 3vw, 2.2rem); letter-spacing:-.035em; line-height:1.1; margin-bottom:.6rem }
.foot-sub{ color:var(--text-2); font-size:.95rem; margin:0 }
.foot-cta{ display:flex; gap:.6rem; flex-wrap:wrap }

.foot-grid{
  display:grid; grid-template-columns:1.6fr repeat(3, 1fr); gap:2rem;
  padding-bottom:2.2rem;
}
.foot-brand .brand-mark{ height:52px; margin-bottom:1rem }
.foot-brand p{ font-size:.88rem; color:var(--text-3); max-width:34ch; margin-bottom:1.2rem }
.socials{ display:flex; gap:.5rem }
.socials a{
  display:grid; place-items:center; width:38px; height:38px; border-radius:var(--r-sm);
  border:1px solid var(--line-2); background:rgba(255,255,255,.03); color:var(--text-2);
  transition:border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.socials a:hover{ border-color:var(--line-3); color:#fff; background:rgba(255,255,255,.06) }
.socials svg{ width:17px; height:17px }

.foot-col{ display:flex; flex-direction:column; gap:.65rem }
.foot-col .foot-h{
  font-family:var(--font-body); font-size:.76rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--text-3);
  margin-bottom:.35rem;
}
.foot-col a{ font-size:.9rem; color:var(--text-2); transition:color var(--t-fast) var(--ease); width:fit-content }
.foot-col a:hover{ color:#fff }

.foot-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding-top:1.6rem; border-top:1px solid var(--line);
  font-size:.82rem; color:var(--text-3);
}
.foot-bottom nav{ display:flex; gap:1.3rem }
.foot-bottom nav a{ transition:color var(--t-fast) var(--ease) }
.foot-bottom nav a:hover{ color:#fff }
.foot-hours{ font-variant-numeric:tabular-nums }

.tebex-bar{ margin-top:1.4rem; display:grid; gap:.5rem }
.tebex-bar p{ font-size:.76rem; line-height:1.6; color:var(--text-3); margin:0; max-width:none }
.tebex-bar a{ color:var(--text-2); text-decoration:underline; text-decoration-color:var(--line-3); text-underline-offset:2px }
.tebex-bar a:hover{ color:#fff }
/* ---------- 8. Home ---------- */

/* The surface every panel on the site shares: one step up from the page,
   a hairline, and a highlight along the top edge that catches the light. */
.glass{
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  box-shadow:var(--edge), var(--shadow-1);
}

/* skeleton text, while Tebex answers */
.sk-line{
  display:block; height:.9em; width:100%; margin:.35em 0; border-radius:4px;
  background:linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.05) 75%);
  background-size:200% 100%;
  animation:shimmer 1.4s linear infinite;
}
.sk-line.is-short{ width:62% }

/* ---- hero ----
   The photograph behind other pages is swapped here for the showcase's own
   art, blurred to colour: the homepage takes its mood from whichever
   release is on screen. */
body[data-page="index"] .backdrop{ display:none }

.hx{
  isolation:isolate;
  padding-top:calc(var(--nav-h) + clamp(2.5rem, 6vw, 4.75rem));
  padding-bottom:clamp(2.5rem, 5vw, 3.75rem);
}
.hx-ambient{
  position:absolute; inset:0 0 -18% 0; z-index:-1; overflow:hidden; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg, #000 55%, transparent);
  mask-image:linear-gradient(180deg, #000 55%, transparent);
}
.hx-glow{
  position:absolute; inset:-12%;
  background:center / cover no-repeat;
  filter:blur(80px) saturate(1.5);
  opacity:0; transform:scale(1.08);
  transition:opacity 1.6s var(--ease), transform 7s linear;
}
.hx-glow.is-on{ opacity:.8; transform:none }
/* Text on the left always reads, whatever colour the art throws. */
.hx-ambient::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(7,6,11,.9) 0%, rgba(7,6,11,.62) 38%, rgba(7,6,11,.18) 70%, rgba(7,6,11,.35) 100%),
    linear-gradient(180deg, rgba(7,6,11,.35), rgba(7,6,11,0) 30%, rgba(7,6,11,.6));
}

.hx-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(2.5rem, 5vw, 4.5rem); align-items:center;
}
.hx-title{
  font-size:clamp(2.8rem, 6vw, 5.1rem);
  line-height:.97; letter-spacing:-.052em;
  margin-bottom:1.5rem;
}
.hx-title .accent{ display:block }
.hx-lead{
  font-size:clamp(1.02rem, 1.35vw, 1.15rem); line-height:1.65;
  color:var(--text-2); max-width:46ch; margin-bottom:2rem;
}
.hx-actions{ display:flex; gap:.7rem; flex-wrap:wrap; margin-bottom:2.2rem }
.hx-facts{
  list-style:none; margin:0; padding:1.4rem 0 0;
  display:flex; flex-wrap:wrap; gap:.6rem 1.6rem;
  border-top:1px solid var(--line-2);
}
.hx-facts li{ display:flex; align-items:center; gap:.5rem; font-size:.86rem; color:var(--text-2) }
.hx-facts svg{ width:15px; height:15px; color:var(--brand-3) }

/* the showcase */
.hx-show{ position:relative; min-width:0 }
.hx-show.is-empty{ display:none }
.hx-stage{
  display:block; overflow:hidden; position:relative;
  border-radius:var(--r-xl);
  background:rgba(14,12,21,.82);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--edge), 0 40px 90px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.3);
  transition:transform .6s var(--ease-out), border-color var(--t) var(--ease);
}
.hx-stage:hover{ transform:translateY(-4px); border-color:rgba(255,255,255,.2) }
.hx-slides{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  background:linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size:200% 100%; animation:shimmer 1.4s linear infinite;
}
.hx-show.is-ready .hx-slides{ animation:none; background:var(--surface-2) }
.hx-slide{ position:absolute; inset:0; opacity:0; transition:opacity .9s var(--ease) }
.hx-slide.is-on{ opacity:1 }
.hx-slide img{
  width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.07);
  transition:opacity .6s var(--ease), transform 7.5s linear;
}
.hx-slide.is-loaded img{ opacity:1 }
.hx-slide.is-on img{ transform:none }
/* the bottom of the art bleeds into the panel instead of stopping on a line */
.hx-slides::after{
  content:""; position:absolute; inset:auto 0 0; height:38%; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(14,12,21,.55));
}

.hx-info{ padding:1.3rem 1.5rem 1.45rem }
.hx-info.is-swap > *{ animation:hxIn .55s var(--ease-out) both }
.hx-info.is-swap > :nth-child(2){ animation-delay:.04s }
.hx-info.is-swap > :nth-child(3){ animation-delay:.08s }
.hx-info.is-swap > :nth-child(4){ animation-delay:.12s }
@keyframes hxIn{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }

.hx-tag{
  display:inline-flex; align-items:center; gap:.45rem; margin-bottom:.6rem;
  font-size:.8rem; font-weight:600; color:var(--brand-3);
}
.hx-tag::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--brand-3); box-shadow:0 0 0 3px rgba(180,140,255,.18);
}
.hx-name{
  font-size:clamp(1.15rem, 1.8vw, 1.42rem); letter-spacing:-.028em; line-height:1.22; margin-bottom:.45rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.hx-sum{
  font-size:.9rem; line-height:1.58; color:var(--text-2); margin-bottom:1.1rem; min-height:3.16em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.hx-foot{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-top:1rem; border-top:1px solid var(--line);
}
.hx-price b{ font-family:var(--font-display); font-size:1.32rem; letter-spacing:-.02em }
.hx-price .is-free{ color:var(--ok) }
.hx-go{ display:inline-flex; align-items:center; gap:.4rem; font-size:.88rem; font-weight:600; color:var(--text-2); transition:color var(--t-fast) var(--ease) }
.hx-go svg{ width:15px; height:15px; transition:transform var(--t) var(--ease-out) }
.hx-stage:hover .hx-go{ color:#fff }
.hx-stage:hover .hx-go svg{ transform:translateX(3px) }

/* the switcher: each tab's bar is the timer */
.hx-rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:.5rem;
  margin-top:.75rem;
}
.hx-tab{
  position:relative; min-width:0; text-align:left;
  padding:.6rem .7rem .85rem; border-radius:var(--r-sm);
  font-size:.76rem; font-weight:500; line-height:1.3; color:var(--text-3);
  background:rgba(14,12,21,.55); border:1px solid var(--line);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.hx-tab:hover{ color:var(--text); border-color:var(--line-3) }
.hx-tab.is-on{ color:#fff; border-color:var(--line-3); background:rgba(255,255,255,.07) }
.hx-tab-name{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.hx-prog{
  position:absolute; left:.7rem; right:.7rem; bottom:.4rem; height:2px; border-radius:2px;
  background:rgba(255,255,255,.1); overflow:hidden;
}
.hx-prog i{ display:block; height:100%; background:var(--brand-3); transform:scaleX(0); transform-origin:0 50% }
.hx-tab.is-on .hx-prog i{ animation:hxProg 6.5s linear forwards }
.hx-show.is-paused .hx-tab.is-on .hx-prog i,
.hx-show.is-hidden-tab .hx-tab.is-on .hx-prog i{ animation-play-state:paused }
/* No automatic movement for people who asked for none. More specific than
   the global reduced-motion rule, which would otherwise end every bar at
   once and spin the carousel. */
.hx-show.is-still .hx-prog i{ animation:none !important; transform:scaleX(0) }
.hx-show.is-still .hx-tab.is-on .hx-prog i{ transform:scaleX(1) }
@keyframes hxProg{ to{ transform:scaleX(1) } }

/* ---- the numbers ---- */
.kpi{ padding-block:0 clamp(2.5rem, 5vw, 3.5rem) }
.kpi-grid{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px;
  border-radius:var(--r-lg); overflow:hidden;
  background:var(--line-2); border:1px solid var(--line-2);
  box-shadow:var(--shadow-1);
}
.kpi-item{
  display:flex; flex-direction:column; gap:.25rem; min-width:0;
  padding:1.35rem 1.5rem 1.4rem;
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  transition:background var(--t) var(--ease);
}
a.kpi-item:hover{ background:linear-gradient(180deg, var(--surface-3), var(--surface-2)) }
.kpi-n{
  display:flex; align-items:center; gap:.6rem; min-height:1.15em;
  font-family:var(--font-display); font-size:clamp(1.7rem, 2.6vw, 2.25rem); font-weight:600;
  letter-spacing:-.04em; line-height:1.1; font-variant-numeric:tabular-nums;
}
.kpi-n .sk-line{ width:3.5ch; height:.8em }
.kpi-l{ font-size:.84rem; color:var(--text-3) }
.kpi-dot{
  position:relative; width:10px; height:10px; border-radius:50%; flex:0 0 auto;
  background:var(--warn);
}
.kpi-dot.is-open{ background:var(--ok) }
.kpi-dot.is-open::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:2px solid var(--ok); opacity:0; animation:pulse 2.4s var(--ease-out) infinite;
}
@keyframes pulse{ 0%{ transform:scale(.6); opacity:.7 } 100%{ transform:scale(1.8); opacity:0 } }

/* ---- shop by type ---- */
.shelves{ padding-top:clamp(1rem, 2vw, 1.5rem) }
.shelf-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1rem }
.shelf-grid[data-count="3"]{ grid-template-columns:repeat(3, minmax(0,1fr)) }
.shelf-grid[data-count="2"]{ grid-template-columns:repeat(2, minmax(0,1fr)) }
.shelf-grid[data-count="1"]{ grid-template-columns:minmax(0,1fr) }
.shelf{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  border-radius:var(--r-lg); border:1px solid var(--line-2);
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow:var(--edge), var(--shadow-1);
  transition:transform .5s var(--ease-out), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.shelf:hover{ transform:translateY(-4px); border-color:var(--line-3); box-shadow:var(--edge), var(--shadow-2) }
.shelf-art{
  position:relative; height:176px; overflow:hidden;
  background:radial-gradient(70% 90% at 50% 100%, rgba(122,34,255,.22), transparent 70%);
  border-bottom:1px solid var(--line);
}
.shelf-card{
  position:absolute; left:50%; top:54%; width:64%; aspect-ratio:16/9; overflow:hidden;
  border-radius:10px; border:1px solid rgba(255,255,255,.14);
  background:var(--surface-3);
  box-shadow:0 18px 40px -14px rgba(0,0,0,.9);
  transition:transform .6s var(--ease-out);
}
.shelf-card img{ width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .5s var(--ease) }
.shelf-card.is-loaded img{ opacity:1 }
.shelf-card.is-0{ z-index:3; transform:translate(-50%,-50%) }
.shelf-card.is-1{ z-index:2; transform:translate(-92%,-58%) rotate(-8deg) scale(.82) }
.shelf-card.is-2{ z-index:1; transform:translate(-8%,-58%) rotate(8deg) scale(.82) }
.shelf:hover .shelf-card.is-0{ transform:translate(-50%,-54%) scale(1.04) }
.shelf:hover .shelf-card.is-1{ transform:translate(-104%,-60%) rotate(-11deg) scale(.82) }
.shelf:hover .shelf-card.is-2{ transform:translate(4%,-60%) rotate(11deg) scale(.82) }
.shelf.is-archive .shelf-card img{ filter:saturate(.55) brightness(.85) }
.shelf.is-archive .shelf-art{ background:radial-gradient(70% 90% at 50% 100%, rgba(255,255,255,.06), transparent 70%) }
.shelf-body{ display:flex; flex-direction:column; gap:.35rem; padding:1.1rem 1.25rem 1.25rem; flex:1 }
.shelf-top{ display:flex; align-items:baseline; justify-content:space-between; gap:.8rem }
.shelf-name{ font-size:1.12rem; letter-spacing:-.02em }
.shelf-count{ font-family:var(--font-mono); font-size:.72rem; color:var(--text-3); white-space:nowrap }
.shelf-note{ font-size:.85rem; line-height:1.5; color:var(--text-2); margin:0 0 .5rem }
.shelf-go{
  margin-top:auto; display:inline-flex; align-items:center; gap:.4rem;
  font-size:.85rem; font-weight:600; color:var(--text-2); transition:color var(--t-fast) var(--ease);
}
.shelf-go svg{ width:14px; height:14px; transition:transform var(--t) var(--ease-out) }
.shelf:hover .shelf-go{ color:#fff }
.shelf:hover .shelf-go svg{ transform:translateX(3px) }

/* ---- what comes with every release ---- */
.bento{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:1rem }
.bx{
  grid-column:span 2; position:relative; overflow:hidden; min-width:0;
  display:flex; flex-direction:column; gap:.55rem;
  padding:1.5rem 1.55rem 1.55rem;
  border-radius:var(--r-lg); border:1px solid var(--line-2);
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow:var(--edge), var(--shadow-1);
  transition:border-color var(--t) var(--ease);
}
.bx:hover{ border-color:var(--line-3) }
.bx h3{ font-size:1.16rem; letter-spacing:-.022em }
.bx p{ font-size:.9rem; line-height:1.62; color:var(--text-2); margin:0 }
.bx-k{ display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:500; color:var(--text-3) }
.bx-ico{
  display:grid; place-items:center; width:38px; height:38px; margin-bottom:.35rem;
  border-radius:var(--r-sm); background:var(--brand-soft); color:var(--brand-ink);
  box-shadow:inset 0 0 0 1px var(--brand-line);
}
.bx-ico svg{ width:17px; height:17px }
.bx-link{
  margin-top:auto; padding-top:.5rem; align-self:flex-start;
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.87rem; font-weight:600; color:var(--text); transition:color var(--t-fast) var(--ease);
}
.bx-link svg{ width:14px; height:14px; transition:transform var(--t) var(--ease-out) }
.bx-link:hover{ color:var(--brand-ink) }
.bx-link:hover svg{ transform:translateX(3px) }

.bx-support{ grid-column:span 3; grid-row:span 2; gap:.75rem }
.bx-support::before{
  content:""; position:absolute; inset:-40% -30% auto auto; width:70%; aspect-ratio:1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(52,211,153,.12), transparent);
}
.bx-support h3{ font-size:clamp(1.4rem, 2.2vw, 1.85rem); letter-spacing:-.035em; line-height:1.15; max-width:16ch }
.dial{ margin-top:auto; padding-top:1.4rem }
.dial-track{ position:relative; height:12px; border-radius:var(--r-pill); background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px var(--line) }
/* 11:00 to 23:00 is 45.83% to 95.83% of the day */
.dial-open{
  position:absolute; top:0; bottom:0; left:45.833%; width:50%; border-radius:var(--r-pill);
  background:linear-gradient(90deg, rgba(52,211,153,.28), rgba(52,211,153,.55));
}
.dial-now{
  position:absolute; top:-6px; bottom:-6px; left:0; width:3px; margin-left:-1.5px; border-radius:3px;
  background:var(--warn); box-shadow:0 0 0 3px rgba(251,191,36,.18), 0 0 18px rgba(251,191,36,.5);
  transition:left .6s var(--ease-out);
}
.dial-now.is-open{ background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.16), 0 0 18px rgba(52,211,153,.6) }
.dial-ticks{
  display:flex; justify-content:space-between; margin-top:.55rem;
  font-family:var(--font-mono); font-size:.7rem; color:var(--text-3);
}
.bx-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.4rem; font-size:.86rem; color:var(--text-2) }
.bx-clock{ font-family:var(--font-mono); font-size:1rem; font-weight:500; color:var(--text) }
.bx-online{ display:inline-flex; align-items:center; gap:.45rem }
.bx-hours{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.6rem; margin-top:.4rem }
.bx-hours div{
  display:flex; flex-direction:column; gap:.15rem; padding:.75rem .85rem;
  border-radius:var(--r-sm); background:rgba(255,255,255,.03); box-shadow:inset 0 0 0 1px var(--line);
}
.bx-hours small{ font-size:.74rem; color:var(--text-3) }
.bx-hours b{ font-family:var(--font-mono); font-size:.95rem; font-weight:500; font-variant-numeric:tabular-nums }
.bx-online b{ color:var(--text) }

.bx-fw,.bx-docs{ grid-column:span 3 }
.bx-logos{ list-style:none; margin:.6rem 0 .2rem; padding:0; display:flex; flex-wrap:wrap; gap:1.4rem }
.bx-logos li{ display:flex; align-items:center; gap:.6rem; font-size:.88rem; font-weight:600; color:var(--text) }
.bx-logos img{ width:40px; height:40px; border-radius:10px; object-fit:contain; background:rgba(255,255,255,.04); padding:4px; box-shadow:inset 0 0 0 1px var(--line-2) }
.bx-inv{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.2rem }

.bx-doclist{ list-style:none; margin:.3rem 0 0; padding:0 }
.bx-doclist a{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.6rem 0; border-bottom:1px solid var(--line);
  transition:color var(--t-fast) var(--ease), padding var(--t) var(--ease-out);
}
.bx-doclist li:last-child a{ border-bottom:0 }
.bx-doclist a:hover{ color:var(--brand-ink); padding-left:.3rem }
.bx-doc-name{ font-size:.9rem; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.bx-doclist code{ font-size:.72rem; flex:0 0 auto }

.bx-live{ grid-column:1 / -1; gap:.9rem }
.bx-live-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap }
.bx-live-head h3{ font-size:1.3rem; margin-top:.2rem }
.bx-live-head .bx-link{ margin:0; padding:0 }
.live-pulse{ position:relative; width:8px; height:8px; border-radius:50%; background:var(--ok) }
.live-pulse::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:2px solid var(--ok); opacity:0; animation:pulse 2.4s var(--ease-out) infinite;
}
.live-feed{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:2rem;
}
.live-row{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.8rem;
  padding:.75rem 0; border-top:1px solid var(--line);
}
.live-row .cx-av{ width:34px; height:34px }
.live-row .cx-av img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.live-text{
  margin:0; font-size:.88rem; color:var(--text-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.live-text b{ color:var(--text) }
.live-text a{ color:var(--text); text-decoration:underline; text-decoration-color:var(--line-3); text-underline-offset:3px }
.live-text a:hover{ color:var(--brand-ink); text-decoration-color:currentColor }
.live-free{
  display:inline-block; margin-left:.45rem; padding:.05rem .45rem; vertical-align:1px;
  font-size:.68rem; font-weight:600; color:var(--ok);
  border:1px solid rgba(52,211,153,.3); border-radius:var(--r-pill);
}
.live-when{ font-family:var(--font-mono); font-size:.72rem; color:var(--text-3); white-space:nowrap }

/* ---- search ---- */
.search-btn{
  display:inline-flex; align-items:center; gap:.55rem; height:36px; padding:0 .45rem 0 .8rem;
  border-radius:var(--r-pill); border:1px solid var(--line-2); background:rgba(255,255,255,.03);
  font-size:.84rem; color:var(--text-2);
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.search-btn:hover{ color:#fff; border-color:var(--line-3); background:rgba(255,255,255,.06) }
.search-btn svg{ width:15px; height:15px }
.search-btn kbd,.sp kbd{
  font-family:var(--font-mono); font-size:.68rem; line-height:1; padding:.28rem .42rem;
  border-radius:6px; border:1px solid var(--line-2); background:rgba(255,255,255,.04); color:var(--text-3);
  white-space:nowrap;
}
.drawer-search{
  display:flex; align-items:center; gap:.7rem; margin-bottom:.4rem;
  padding:.85rem 1rem; border-radius:var(--r-md); border:1px solid var(--line-2);
  background:rgba(255,255,255,.04); font-size:1rem; color:var(--text-2); text-align:left;
}
.drawer-search svg{ width:18px; height:18px }

html.sp-open{ overflow:hidden }
.sp{ position:fixed; inset:0; z-index:400 }
.sp-backdrop{
  position:absolute; inset:0; background:rgba(4,3,8,.7);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .2s var(--ease);
}
.sp-panel{
  position:relative; display:flex; flex-direction:column;
  width:min(660px, calc(100% - 32px)); max-height:min(72vh, 640px);
  margin:min(12vh, 120px) auto 0; overflow:hidden;
  border-radius:18px; border:1px solid var(--line-3);
  background:linear-gradient(180deg, #13111c, #0c0a12);
  box-shadow:var(--edge), 0 40px 100px -20px rgba(0,0,0,.9);
  opacity:0; transform:translateY(10px) scale(.985);
  transition:opacity .2s var(--ease), transform .3s var(--ease-out);
}
.sp.is-in .sp-backdrop{ opacity:1 }
.sp.is-in .sp-panel{ opacity:1; transform:none }
.sp-field{ display:flex; align-items:center; gap:.8rem; height:60px; padding:0 1rem 0 1.15rem; border-bottom:1px solid var(--line-2) }
.sp-field > svg{ width:19px; height:19px; color:var(--text-3) }
.sp-field input{ flex:1; min-width:0; height:100%; border:0; background:none; outline:none; font-size:1.04rem; color:var(--text) }
.sp-field input::placeholder{ color:var(--text-3) }
.sp-esc{
  font-family:var(--font-mono); font-size:.7rem; padding:.3rem .5rem; border-radius:6px;
  border:1px solid var(--line-2); color:var(--text-3);
}
.sp-esc:hover{ color:var(--text); border-color:var(--line-3) }
.sp-list{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:.45rem }
.sp-group{ padding:.75rem .7rem .35rem; font-size:.75rem; font-weight:600; color:var(--text-3) }
.sp-item{
  display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:center; gap:.9rem;
  padding:.5rem .65rem; border-radius:11px; color:var(--text-2);
}
.sp-item.is-active{ background:rgba(255,255,255,.065); color:var(--text); box-shadow:inset 0 0 0 1px var(--line-2) }
.sp-art{
  display:grid; place-items:center; width:64px; aspect-ratio:16/10; overflow:hidden;
  border-radius:7px; background:var(--surface-3); box-shadow:inset 0 0 0 1px var(--line);
}
.sp-art img{ width:100%; height:100%; object-fit:cover }
.sp-art.is-doc,.sp-art.is-page{ width:40px; aspect-ratio:1; justify-self:center; color:var(--brand-ink); background:var(--brand-soft) }
.sp-art svg{ width:17px; height:17px }
.sp-body{ display:flex; flex-direction:column; min-width:0 }
.sp-body b{ font-size:.92rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.sp-body small{ font-size:.76rem; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.sp-price{ font-size:.86rem; font-weight:600; color:var(--text); font-variant-numeric:tabular-nums }
.sp-price.is-free{ color:var(--ok) }
.sp-kind{ font-size:.7rem; color:var(--text-3); padding:.15rem .5rem; border-radius:var(--r-pill); border:1px solid var(--line-2) }
.sp-empty{ padding:2.6rem 1rem; text-align:center }
.sp-empty b{ display:block; margin-bottom:.3rem }
.sp-empty p{ font-size:.86rem; color:var(--text-3); margin:0 }
.sp-foot{
  display:flex; gap:1.3rem; padding:.7rem 1.15rem; border-top:1px solid var(--line);
  font-size:.74rem; color:var(--text-3);
}
.sp-foot span{ display:inline-flex; align-items:center; gap:.3rem }

/* ---- home, narrower screens ---- */
@media (max-width:1100px){
  .shelf-grid,.shelf-grid[data-count="3"]{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .search-btn-kbd{ display:none }
}
@media (max-width:960px){
  .hx-grid{ grid-template-columns:minmax(0,1fr); gap:2.5rem }
  .hx-show{ max-width:640px }
  .hx-ambient::after{ background:linear-gradient(180deg, rgba(7,6,11,.75), rgba(7,6,11,.55) 50%, rgba(7,6,11,.8)) }
  .kpi-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .bento{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .bx{ grid-column:span 1 }
  .bx-support,.bx-fw,.bx-docs,.bx-live{ grid-column:1 / -1; grid-row:auto }
  .bx-support .dial{ padding-top:.8rem }
  .search-btn-label{ display:none }
  .search-btn{ width:36px; padding:0; justify-content:center }
}
@media (max-width:640px){
  .hx-title{ font-size:clamp(2.45rem, 11.5vw, 3.1rem) }
  .hx-actions .btn{ flex:1 1 auto }
  .hx-facts{ flex-direction:column; gap:.6rem }
  .hx-rail{ grid-auto-columns:minmax(132px, 1fr); overflow-x:auto; scrollbar-width:none; padding-bottom:2px }
  .hx-rail::-webkit-scrollbar{ display:none }
  .hx-info{ padding:1.1rem 1.15rem 1.2rem }
  .kpi-item{ padding:1.1rem 1.1rem 1.15rem }
  .kpi-l{ font-size:.78rem }
  .shelf-grid,.shelf-grid[data-count="3"],.shelf-grid[data-count="2"]{ grid-template-columns:minmax(0,1fr) }
  .bento{ grid-template-columns:minmax(0,1fr) }
  .bx{ padding:1.25rem }
  .live-feed{ grid-template-columns:minmax(0,1fr) }
  .bx-hours{ gap:.4rem }
  .bx-hours div{ padding:.6rem .65rem }
  .bx-hours b{ font-size:.8rem }
  .sp-panel{ margin-top:12px; max-height:calc(100dvh - 24px) }
  .sp-foot{ display:none }
  .sp-item{ grid-template-columns:56px minmax(0,1fr) auto; gap:.75rem }
  .sp-art{ width:56px }
}

/* ---- how ----
   A numbered line down the right, with the heading held beside it while
   the steps scroll past. */
.how-grid{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem, 6vw, 5rem); align-items:start }
.how-head{ position:sticky; top:calc(var(--nav-h) + 2rem) }
.how-head h2{ margin-bottom:.9rem }
.how-head .lead{ margin-bottom:1.6rem }
.how-steps{ list-style:none; margin:0; padding:0; position:relative }
.how-steps::before{
  content:""; position:absolute; left:21px; top:22px; bottom:22px; width:2px;
  background:linear-gradient(180deg, var(--brand-line), var(--line-2) 60%, transparent);
}
.how-step{ position:relative; display:grid; grid-template-columns:44px minmax(0,1fr); gap:1.3rem; padding-bottom:2.2rem }
.how-step:last-child{ padding-bottom:0 }
.how-n{
  position:relative; z-index:1; display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  font-family:var(--font-display); font-weight:600; font-size:1rem; color:#fff;
  background:linear-gradient(180deg, var(--surface-3), var(--surface)); border:1px solid var(--brand-line);
  box-shadow:0 0 0 6px var(--bg), 0 0 24px -4px rgba(122,34,255,.5);
}
.how-step h3{ font-size:1.12rem; margin:.55rem 0 .4rem }
.how-step p{ font-size:.92rem; color:var(--text-2); margin:0; max-width:52ch }

/* ---- faq ---- */
.faq-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.75rem; align-items:start }
.faq-item{
  border-radius:var(--r-md);
  background:var(--surface);
  border:1px solid var(--line-2);
  transition:border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.faq-item:hover{ border-color:var(--line-3) }
.faq-item[open]{ background:var(--surface-2); border-color:var(--line-3) }
.faq-item summary{
  display:flex; align-items:center; gap:.9rem;
  padding:1.05rem 1.15rem; cursor:pointer; list-style:none;
  font-size:.94rem; font-weight:600; line-height:1.4;
}
.faq-item summary::-webkit-details-marker{ display:none }
.faq-item summary > span:nth-child(2){ flex:1 }
.faq-n{ font-family:var(--font-mono); font-size:.74rem; font-weight:500; color:var(--text-3); min-width:1.4em }
.faq-mark{ position:relative; width:14px; height:14px; flex:0 0 auto }
.faq-mark::before,.faq-mark::after{
  content:""; position:absolute; left:50%; top:50%; width:12px; height:1.5px; border-radius:2px;
  background:var(--text-2); transform:translate(-50%,-50%);
  transition:transform var(--t) var(--ease), opacity var(--t-fast) var(--ease);
}
.faq-mark::after{ transform:translate(-50%,-50%) rotate(90deg) }
.faq-item[open] .faq-mark::after{ transform:translate(-50%,-50%) rotate(90deg) scaleX(0) }
.faq-body{ padding:0 1.15rem 1.15rem 3.45rem }
.faq-body p{ font-size:.9rem; color:var(--text-2) }
.faq-link{ display:inline-flex; align-items:center; gap:.35rem; font-weight:600; color:var(--text) }
.faq-link svg{ width:14px; height:14px }
.faq-link:hover{ color:var(--brand-ink) }
/* ---------- 9. Store and cards ---------- */

/* The store takes its colour from the open shelf's art, like the homepage,
   instead of sitting the cards over a photograph. */
body[data-page="services"] .backdrop{ display:none }

.sx-hero{
  isolation:isolate;
  padding-top:calc(var(--nav-h) + clamp(2.5rem, 5vw, 4rem));
  padding-bottom:clamp(1.8rem, 3vw, 2.4rem);
}
.sx-ambient{ inset:0 0 -30% 0 }
.sx-ambient::after{
  background:
    linear-gradient(90deg, rgba(7,6,11,.85) 0%, rgba(7,6,11,.45) 50%, rgba(7,6,11,.15) 100%),
    linear-gradient(180deg, rgba(7,6,11,.25), rgba(7,6,11,0) 30%, rgba(7,6,11,.75));
}
.sx-intro{ max-width:640px; margin-bottom:clamp(1.8rem, 3.5vw, 2.6rem) }
.sx-intro h1{ margin-bottom:.9rem }
.sx-intro .lead{ margin:0 }

/* the shelves: one tile each, with its newest art and a count */
.sx-shelves{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1rem }
.sx-shelf{
  position:relative; display:flex; align-items:stretch; min-width:0; overflow:hidden; text-align:left;
  height:112px; border-radius:var(--r-lg);
  background:rgba(14,12,21,.72); border:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:var(--edge), var(--shadow-1);
  transition:transform .45s var(--ease-out), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.sx-shelf:hover{ transform:translateY(-3px); border-color:var(--line-3) }
.sx-shelf.is-on{
  border-color:var(--brand-line);
  box-shadow:var(--edge), 0 0 0 1px var(--brand-line), 0 18px 50px -20px rgba(122,34,255,.55);
}
.sx-shelf-art{
  position:relative; flex:0 0 42%; overflow:hidden; background:var(--surface-3);
  -webkit-mask-image:linear-gradient(90deg, #000 55%, transparent);
  mask-image:linear-gradient(90deg, #000 55%, transparent);
}
.sx-shelf-art img{
  width:100%; height:100%; object-fit:cover; opacity:0;
  transition:opacity .5s var(--ease), transform .8s var(--ease-out);
}
.sx-shelf-art.is-loaded img{ opacity:1 }
.sx-shelf:hover .sx-shelf-art img{ transform:scale(1.06) }
.sx-shelf.is-archive .sx-shelf-art img{ filter:saturate(.5) brightness(.85) }
.sx-shelf-body{
  position:relative; flex:1; min-width:0;
  display:flex; flex-direction:column; justify-content:center; gap:.15rem;
  padding:0 1.2rem 0 .4rem;
}
.sx-shelf-kind{ font-size:.74rem; font-weight:500; color:var(--text-3) }
.sx-shelf.is-on .sx-shelf-kind{ color:var(--brand-3) }
.sx-shelf-name{
  font-family:var(--font-display); font-size:1.12rem; font-weight:600; letter-spacing:-.02em; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sx-shelf-count{ font-family:var(--font-mono); font-size:.74rem; color:var(--text-2) }

/* filters down the left, results on the right */
.sx-body{ padding-top:clamp(1rem, 2vw, 1.5rem) }
.sx-layout{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:clamp(1.5rem, 3vw, 2.5rem); align-items:start }
.sx-side{
  position:sticky; top:calc(var(--nav-h) + 1rem);
  display:flex; flex-direction:column; gap:1.4rem;
  max-height:calc(100vh - var(--nav-h) - 2rem); overflow-y:auto; scrollbar-width:none;
  padding-bottom:1rem;
}
.sx-side::-webkit-scrollbar{ display:none }
.sx-block{ display:flex; flex-direction:column; gap:.5rem }
.sx-h{ font-family:var(--font-body); font-size:.78rem; font-weight:600; letter-spacing:0; color:var(--text-3); margin:0 0 .1rem .2rem }
.sx-search input{ height:44px; font-size:.9rem }
.sx-list{ display:flex; flex-direction:column; gap:.15rem }
.sx-item{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; width:100%;
  min-height:40px; padding:.45rem .7rem; border-radius:var(--r-sm); text-align:left;
  font-size:.88rem; font-weight:500; color:var(--text-2);
  border:1px solid transparent;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.sx-item:hover{ background:rgba(255,255,255,.04); color:var(--text) }
.sx-item.is-on{ color:#fff; background:var(--brand-soft); border-color:var(--brand-line) }
.sx-item.is-soon{ color:var(--text-3) }
.sx-item-name{ display:inline-flex; align-items:center; gap:.6rem; min-width:0 }
.sx-item-name img{ width:18px; height:18px; border-radius:4px; object-fit:contain; flex:0 0 auto }
.sx-fw-mark{ display:grid; place-items:center; width:18px; height:18px; flex:0 0 auto; color:var(--text-3) }
.sx-fw-mark svg{ width:15px; height:15px }
.sx-n{
  flex:0 0 auto; min-width:1.7rem; padding:.05rem .45rem; border-radius:var(--r-pill); text-align:center;
  font-family:var(--font-mono); font-size:.72rem; color:var(--text-3); background:rgba(255,255,255,.05);
}
.sx-item.is-on .sx-n{ color:var(--brand-ink); background:rgba(122,34,255,.25) }
.sx-soon{
  flex:0 0 auto; font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:.12rem .4rem; border-radius:4px; color:var(--brand-ink); background:var(--brand-soft);
}
.sx-reset{
  display:inline-flex; align-items:center; gap:.45rem; align-self:flex-start;
  padding:.4rem .7rem; border-radius:var(--r-sm); font-size:.84rem; font-weight:500; color:var(--text-2);
  border:1px solid var(--line-2); transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.sx-reset:hover{ color:#fff; border-color:var(--line-3) }
.sx-reset svg{ width:14px; height:14px }

.sx-main{ min-width:0 }
.sx-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding-bottom:1rem; margin-bottom:1.25rem; border-bottom:1px solid var(--line);
}
.sx-title{ font-size:clamp(1.35rem, 2.2vw, 1.7rem); letter-spacing:-.03em; margin:0 }
.sx-count{ margin:.2rem 0 0; font-size:.84rem; color:var(--text-3); font-variant-numeric:tabular-nums }
.sx-sort{ position:relative; display:flex; align-items:center; gap:.6rem }
.sx-sort-label{ font-size:.8rem; color:var(--text-3) }
.sx-sort select{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  height:40px; padding:0 2.2rem 0 .9rem; border-radius:var(--r-sm);
  font-size:.85rem; font-weight:500; color:var(--text);
  background:rgba(255,255,255,.04); border:1px solid var(--line-2);
  transition:border-color var(--t-fast) var(--ease);
}
.sx-sort select:hover{ border-color:var(--line-3) }
.sx-sort select option{ background:#13111c; color:var(--text) }
.sx-sort-caret{
  position:absolute; right:.85rem; top:50%; width:10px; height:6px; margin-top:-3px;
  color:var(--text-3); pointer-events:none;
}
/* three across in the results column, however wide the screen */
.sx-grid.store-grid,.sx-grid.store-skeleton{ grid-template-columns:repeat(3, minmax(0,1fr)) }

/* the search field, also used on the customers page */
.store-search{ position:relative }
.store-search svg{
  position:absolute; left:1rem; top:50%; transform:translateY(-50%);
  width:17px; height:17px; color:var(--text-3); pointer-events:none;
}
.store-search input{
  height:50px; padding-left:2.8rem; border-radius:var(--r-md); font-size:.95rem;
  background:rgba(255,255,255,.04);
}
.store-search input::-webkit-search-cancel-button{ filter:invert(1) opacity(.5) }

@media (max-width:1100px){
  .sx-grid.store-grid,.sx-grid.store-skeleton{ grid-template-columns:repeat(2, minmax(0,1fr)) }
}
/* One column: the filters become rows of chips above the results. */
@media (max-width:860px){
  .sx-layout{ grid-template-columns:minmax(0,1fr); gap:1.2rem }
  .sx-side{ position:static; max-height:none; overflow:visible; gap:.9rem; padding:0 }
  .sx-h{ display:none }
  .sx-list{ flex-direction:row; gap:.4rem; overflow-x:auto; scrollbar-width:none; padding-bottom:2px }
  .sx-list::-webkit-scrollbar{ display:none }
  .sx-item{ width:auto; flex:0 0 auto; min-height:36px; border-color:var(--line-2); border-radius:var(--r-pill); padding:.35rem .5rem .35rem .85rem }
  .sx-shelves{ grid-template-columns:repeat(3, minmax(220px, 1fr)); overflow-x:auto; scrollbar-width:none; padding-bottom:4px }
  .sx-shelves::-webkit-scrollbar{ display:none }
}
@media (max-width:640px){
  .sx-shelf{ height:96px }
  .sx-shelf-name{ font-size:1rem }
  .sx-grid.store-grid,.sx-grid.store-skeleton{ grid-template-columns:minmax(0,1fr) }
  .sx-head{ align-items:center }
  .sx-sort-label{ display:none }
}

.store-notice{
  display:flex; align-items:flex-start; gap:1rem; flex-wrap:wrap;
  margin:0 0 1.6rem; padding:1.05rem 1.2rem; border-radius:var(--r-md);
  background:linear-gradient(90deg, rgba(122,34,255,.1), rgba(122,34,255,.03));
  border:1px solid var(--brand-line);
}
.store-notice-tag{
  flex:0 0 auto; margin-top:.15rem;
  font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:.22rem .5rem; border-radius:5px; color:#fff; background:rgba(122,34,255,.45);
}
.store-notice-body{ flex:1 1 320px; min-width:0 }
.store-notice-body b{ display:block; margin-bottom:.2rem; font-size:.93rem }
.store-notice-body p{ font-size:.85rem; line-height:1.6; color:var(--text-2); margin:0 }
.store-notice-link{
  flex:0 0 auto; align-self:center;
  font-size:.84rem; font-weight:600; color:#fff;
  border-bottom:1px solid rgba(255,255,255,.3);
}
.store-notice-link:hover{ border-bottom-color:#fff }

/* one grid for every list of products on the site */
.store-grid,.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 262px), 1fr));
  gap:1.15rem;
}

/* ---- the product card ---- */
.pcard{
  position:relative; display:flex; flex-direction:column; min-width:0;
  border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--line-2);
  box-shadow:var(--edge);
  transition:transform .45s var(--ease-out), border-color var(--t) var(--ease), box-shadow .45s var(--ease-out);
}
.pcard:hover{
  transform:translateY(-4px);
  border-color:var(--line-3);
  box-shadow:var(--edge), var(--shadow-2);
}
.pcard-hit{ display:flex; flex-direction:column; flex:1; color:inherit }

.pcard-media{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  background:linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size:200% 100%; animation:shimmer 1.4s linear infinite;
  border-bottom:1px solid var(--line);
}
.pcard-media.is-loaded{ animation:none; background:var(--surface-2) }
.pcard-media img{
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .5s var(--ease), transform .8s var(--ease-out);
}
.pcard-media.is-loaded img{ opacity:1 }
.pcard:hover .pcard-media img{ transform:scale(1.04) }
.pcard-media.is-empty,.pcard-media.is-broken{
  display:grid; place-items:center; padding:1rem; text-align:center;
  font-family:var(--font-display); font-weight:600; color:var(--text-3);
}
.pcard-flags{ position:absolute; top:.7rem; left:.7rem; display:flex; gap:.35rem }
.pcard-flag{
  height:22px; padding:0 .5rem; display:inline-flex; align-items:center;
  border-radius:var(--r-xs);
  font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.pcard-flag.is-new{ color:#fff; background:rgba(122,34,255,.82) }
.pcard-flag.is-sale{ color:#052e1f; background:var(--ok) }

.pcard-body{ display:flex; flex-direction:column; gap:.55rem; padding:1.05rem 1.1rem .9rem; flex:1 }
.pcard-name{
  font-size:.98rem; line-height:1.32; letter-spacing:-.015em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pcard-blurb{
  margin:0; font-size:.83rem; line-height:1.55; color:var(--text-3);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pcard-body .card-fw{ margin-top:auto; padding-top:.25rem }

.pcard-foot{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.85rem 1.1rem 1.05rem;
  border-top:1px solid var(--line);
}
.card-price{ display:flex; align-items:baseline; gap:.45rem; flex-wrap:wrap; min-width:0 }
.card-price b{ font-family:var(--font-display); font-size:1.12rem; letter-spacing:-.02em; font-variant-numeric:tabular-nums }
.card-price b.is-free{ color:var(--ok) }
.card-price s{ font-size:.8rem; color:var(--text-3) }
.card-off{ font-size:.7rem; font-weight:700; color:var(--ok) }
.card-recur{ font-size:.74rem; color:var(--text-3) }
/* The card's action, sized as a secondary step: the card itself is the
   main target, and a full-width white bar on every card made the grid
   read as a wall of buttons. */
.pcard-buy.btn{
  --h:34px; width:auto; flex:0 0 auto; padding:0 .9rem; font-size:.8rem;
  background:rgba(255,255,255,.06); color:var(--text); border:1px solid var(--line-2);
}
.pcard-buy.btn:hover{ background:#fff; color:#0b0a10; border-color:#fff }

/* loading placeholders */
.store-skeleton{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 262px), 1fr)); gap:1.15rem;
}
.sk-card{
  height:330px; border-radius:var(--r-lg); border:1px solid var(--line);
  background:linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
  background-size:200% 100%; animation:shimmer 1.4s linear infinite;
}

/* an empty category, explained rather than left blank */
.cat-soon{
  grid-column:1 / -1;
  padding:clamp(2.5rem, 6vw, 4rem) 1.5rem; text-align:center;
  border:1px dashed var(--line-2); border-radius:var(--r-xl);
  background:radial-gradient(60% 80% at 50% 0%, rgba(122,34,255,.08), transparent);
}
.cat-soon-tag{
  display:inline-block; margin-bottom:.9rem;
  font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-3);
}
.cat-soon h3{ font-size:1.6rem; letter-spacing:-.03em; margin-bottom:.6rem }
.cat-soon p{ margin:0 auto; max-width:46ch; color:var(--text-2); font-size:.92rem }
.cat-soon-row{ margin-top:1.6rem; display:flex; justify-content:center; gap:.6rem; flex-wrap:wrap }

/* trust strip */
.trust{ padding-block:clamp(2.5rem, 5vw, 3.5rem) }
.trust-grid{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px;
  border-radius:var(--r-lg); overflow:hidden;
  background:var(--line-2); border:1px solid var(--line-2);
}
.trust-item{ display:flex; gap:.9rem; padding:1.35rem 1.25rem; background:var(--surface) }
.trust-ico{
  display:grid; place-items:center; flex:0 0 auto; width:34px; height:34px;
  border-radius:var(--r-sm); background:var(--brand-soft); color:var(--brand-ink);
}
.trust-ico svg{ width:16px; height:16px }
.trust-item b{ display:block; font-size:.9rem; margin-bottom:.25rem }
.trust-item p{ font-size:.82rem; line-height:1.55; color:var(--text-3); margin:0 }

/* ---------- 10. Product page ---------- */
.prod-wrap{ padding-top:calc(var(--nav-h) + 2rem) }
/* where this release sits, and the way back to that shelf */
.crumbs{
  display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem;
  font-size:.84rem; color:var(--text-3); min-width:0;
}
.crumbs a{ color:var(--text-2); transition:color var(--t-fast) var(--ease) }
.crumbs a:hover{ color:#fff }
.crumbs svg{ width:12px; height:12px; opacity:.55 }
.crumbs span{ color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:42ch }

/* The buy panel spans both rows of the right column and sticks; the
   description sits under the gallery in the left column. It used to run
   the full width under both, so the sticky panel scrolled straight over
   the right-hand third of the description and hid it. */
.prod-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 380px;
  grid-template-areas:"media buy" "detail buy";
  gap:2rem 2.5rem; align-items:start;
}
.prod-media{ grid-area:media; min-width:0 }
.prod-detail{ grid-area:detail; min-width:0 }
.prod-buy{ grid-area:buy; position:sticky; top:calc(var(--nav-h) + 1.25rem) }

.prod-stage{ position:relative; border-radius:var(--r-lg); outline:none }
.prod-stage:focus-visible{ box-shadow:0 0 0 2px var(--brand-3) }
.stage-nav,.stage-zoom{
  position:absolute; z-index:2; display:grid; place-items:center;
  width:42px; height:42px; border-radius:50%;
  color:#fff; background:rgba(8,7,12,.62); border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  opacity:0; transition:opacity var(--t) var(--ease), background var(--t-fast) var(--ease), transform var(--t) var(--ease-out);
}
.stage-nav svg,.stage-zoom svg{ width:18px; height:18px }
.stage-nav{ top:50%; margin-top:-21px }
.stage-nav.is-prev{ left:.9rem; transform:translateX(-4px) }
.stage-nav.is-next{ right:.9rem; transform:translateX(4px) }
.stage-zoom{ top:.9rem; right:.9rem; width:38px; height:38px }
.stage-zoom svg{ width:16px; height:16px }
.prod-stage:hover .stage-nav,.prod-stage:hover .stage-zoom,
.stage-nav:focus-visible,.stage-zoom:focus-visible{ opacity:1; transform:none }
.stage-nav:hover,.stage-zoom:hover{ background:rgba(122,34,255,.75) }
.prod-stage.is-video .stage-nav{ top:auto; bottom:4.2rem }
.stage-count{
  position:absolute; z-index:2; left:.9rem; bottom:.9rem;
  padding:.2rem .55rem; border-radius:var(--r-pill);
  font-family:var(--font-mono); font-size:.72rem; color:#fff;
  background:rgba(8,7,12,.62); border:1px solid rgba(255,255,255,.12);
  pointer-events:none;
}
.prod-stage.is-video .stage-count{ display:none }
@media (hover:none){
  .stage-nav,.stage-zoom{ opacity:1; transform:none; width:38px; height:38px; margin-top:-19px }
}
.prod-shot{ cursor:zoom-in }
.prod-shot.is-video,.prod-shot.is-empty{ cursor:auto }
.prod-shot{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  border-radius:var(--r-lg); background:var(--surface-2);
  border:1px solid var(--line-2); box-shadow:var(--shadow-2);
}
.prod-shot img{ width:100%; height:100%; object-fit:cover; animation:fade-in .4s var(--ease) }
.prod-shot iframe{ width:100%; height:100%; border:0; display:block }
.prod-shot.is-video{ background:#000 }
.prod-shot.is-empty{
  display:grid; place-items:center; padding:2rem; text-align:center;
  font-family:var(--font-display); font-size:1.3rem; font-weight:600; color:var(--text-3);
}

.prod-thumbs{
  display:flex; gap:.55rem; margin-top:.75rem;
  overflow-x:auto; padding:.15rem .1rem .45rem;
  scrollbar-width:thin; scrollbar-color:var(--line-3) transparent;
}
.prod-thumb{
  position:relative; flex:0 0 auto; width:110px; aspect-ratio:16/9;
  border-radius:var(--r-sm); overflow:hidden;
  background:var(--surface-2); border:1px solid var(--line-2);
  opacity:.55; transition:opacity var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.prod-thumb:not(.is-loaded){
  background:linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size:200% 100%; animation:shimmer 1.4s linear infinite;
}
.prod-thumb img{ width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .35s var(--ease) }
.prod-thumb.is-loaded img{ opacity:1 }
.prod-thumb:hover{ opacity:.9 }
.prod-thumb.is-on{ opacity:1; border-color:var(--brand-3); box-shadow:0 0 0 1px var(--brand-3) }
.prod-thumb-play{
  position:absolute; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.4);
}
.prod-thumb-play svg{ width:24px; height:24px; color:#fff }

.buy-card{
  padding:1.6rem; border-radius:var(--r-xl);
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--line-2);
  box-shadow:var(--edge), var(--shadow-2);
}
.buy-title{ font-size:clamp(1.3rem, 2vw, 1.6rem); letter-spacing:-.03em; line-height:1.2; margin-bottom:1rem }
.buy-card .card-fw{ margin-bottom:1.3rem }
.buy-price{ padding-top:1.2rem; border-top:1px solid var(--line); margin-bottom:.3rem }
.buy-price b{ font-size:2.1rem; letter-spacing:-.035em }
.buy-price s{ font-size:1rem }
.buy-cur-note{ margin:0 0 1.2rem; font-size:.78rem; line-height:1.5; color:var(--text-3) }
.buy-card > .btn{ --h:50px; font-size:.95rem; border-radius:var(--r-md) }
.buy-points{
  list-style:none; margin:1.3rem 0 0; padding:1.2rem 0 0; display:grid; gap:.7rem;
  border-top:1px solid var(--line);
}
.buy-points li{ display:flex; align-items:center; gap:.65rem; font-size:.86rem; color:var(--text-2) }
.buy-points svg{ width:16px; height:16px; color:var(--brand-3); flex:0 0 auto }
.buy-kicker{ display:block; margin-bottom:.45rem; font-size:.82rem; font-weight:500; color:var(--brand-3) }
.buy-kicker:empty{ display:none }
.buy-price .is-free{ color:var(--ok) }
.buy-extra{ display:flex; gap:.5rem; margin-top:.6rem }
.buy-extra .btn{ flex:1 1 0; min-width:0 }
.buy-extra .btn svg{ width:15px; height:15px }

/* the rest of the shelf */
.prod-more{ padding-top:clamp(2.5rem, 5vw, 4rem) }

/* the bar that stands in for the buy panel on phones */
.buybar{ display:none }
@media (max-width:960px){
  .buybar{
    position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:95;
    display:flex; align-items:center; gap:.8rem; padding:.6rem .6rem .6rem 1rem;
    border-radius:var(--r-lg); border:1px solid var(--line-3);
    background:rgba(16,14,24,.9); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    box-shadow:0 20px 50px -10px rgba(0,0,0,.9);
    transform:translateY(calc(100% + 24px)); opacity:0; pointer-events:none;
    transition:transform .35s var(--ease-out), opacity .25s var(--ease);
  }
  .buybar.is-on{ transform:none; opacity:1; pointer-events:auto }
  .buybar-info{ flex:1; min-width:0; display:flex; flex-direction:column }
  .buybar-info b:first-child{ font-size:.86rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  .buybar-info span b{ font-family:var(--font-display); font-size:1rem }
  .buybar-info .is-free{ color:var(--ok) }
  body[data-page="product"] #to-top{ bottom:5.6rem }
}

/* full-screen gallery */
html.lb-open{ overflow:hidden }
.lb{
  position:fixed; inset:0; z-index:420; display:grid; place-items:center;
  background:rgba(3,2,6,.94); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  opacity:0; transition:opacity .22s var(--ease);
}
.lb.is-in{ opacity:1 }
.lb-fig{ margin:0; width:100%; height:100%; display:grid; place-items:center; padding:clamp(3.5rem, 7vw, 5rem) clamp(1rem, 7vw, 6rem) }
.lb-fig img{
  max-width:100%; max-height:100%; object-fit:contain; border-radius:var(--r-md);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.9);
  transform:scale(.98); transition:transform .3s var(--ease-out);
}
.lb.is-in .lb-fig img{ transform:none }
.lb-x,.lb-nav{
  position:absolute; z-index:2; display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
  color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  transition:background var(--t-fast) var(--ease);
}
.lb-x:hover,.lb-nav:hover{ background:rgba(122,34,255,.7) }
.lb-x{ top:1rem; right:1rem }
.lb-x svg{ width:20px; height:20px }
.lb-nav{ top:50%; margin-top:-23px }
.lb-nav svg{ width:20px; height:20px }
.lb-nav.is-prev{ left:1rem }
.lb-nav.is-next{ right:1rem }
.lb.is-single .lb-nav,.lb.is-single .lb-count{ display:none }
.lb-count{
  position:absolute; bottom:1.2rem; left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:.8rem; color:var(--text-2);
}
@media (max-width:640px){
  .lb-nav{ top:auto; margin-top:0; bottom:1rem; width:42px; height:42px }
  .lb-count{ bottom:1.9rem }
}

.prod-fold{
  border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line-2);
  overflow:hidden;
}
.prod-fold summary{
  display:flex; align-items:center; gap:.6rem; cursor:pointer; list-style:none;
  padding:1.1rem 1.4rem; font-family:var(--font-display); font-size:1.02rem; font-weight:600;
  border-bottom:1px solid transparent;
}
.prod-fold[open] summary{ border-bottom-color:var(--line) }
.prod-fold summary::-webkit-details-marker{ display:none }
.prod-fold summary svg{ width:17px; height:17px; color:var(--brand-3) }
.prod-copy{ padding:1.6rem 1.6rem 1.8rem }
.prod-skeleton .sk-card{ height:440px }

/* ---- rendered descriptions (rich.js) ----
   Shared by the product page and the docs, so a description and a docs
   page read as the same kind of document. */
.prod-copy,.rt{ font-size:.95rem; line-height:1.75; color:var(--text-2); max-width:72ch }
.prod-copy > :first-child{ margin-top:0 }
.prod-copy h3,.prod-copy h4{ color:var(--text); letter-spacing:-.02em }
.prod-copy h3{ font-size:1.18rem; margin:2rem 0 .7rem }
.prod-copy h4{ font-size:1rem; margin:1.6rem 0 .5rem }
.prod-copy p{ margin:0 0 1rem }
.prod-copy strong{ color:var(--text) }
.prod-copy a{ color:var(--brand-ink); text-decoration:underline; text-decoration-color:var(--brand-line); text-underline-offset:3px }
.prod-copy a:hover{ text-decoration-color:var(--brand-ink) }
.prod-copy ul,.prod-copy ol{ margin:0 0 1.2rem; padding-left:0; list-style:none; display:grid; grid-template-columns:minmax(0,1fr); gap:.5rem }
.prod-copy ul > li{ position:relative; padding-left:1.4rem }
.prod-copy ul > li::before{
  content:""; position:absolute; left:.2rem; top:.72em;
  width:6px; height:6px; border-radius:2px; background:var(--brand-3); opacity:.8;
}
.prod-copy ol{ counter-reset:item }
.prod-copy ol > li{ position:relative; padding-left:1.8rem; counter-increment:item }
.prod-copy ol > li::before{
  content:counter(item); position:absolute; left:0; top:0;
  font-family:var(--font-mono); font-size:.8rem; color:var(--brand-3);
}
.prod-copy hr{ margin:1.8rem 0 }
.prod-copy pre{
  margin:0 0 1.2rem; padding:1rem 1.15rem; overflow-x:auto;
  border-radius:var(--r-md); background:var(--bg); border:1px solid var(--line-2);
  font-family:var(--font-mono); font-size:.82rem; line-height:1.75; color:#d8d2e8;
}
.prod-copy pre code{ padding:0; background:none; color:inherit; font-size:inherit; white-space:pre }
.rt-table{ margin:0 0 1.2rem; overflow-x:auto; border-radius:var(--r-md); border:1px solid var(--line-2) }
.rt-table table{ width:100%; border-collapse:collapse; font-size:.88rem; min-width:360px }
.rt-table th,.rt-table td{ padding:.7rem .95rem; text-align:left; border-bottom:1px solid var(--line) }
.rt-table th{ background:rgba(255,255,255,.03); color:var(--text); font-weight:600; font-size:.8rem }
.rt-table tr:last-child td{ border-bottom:0 }
/* ---------- 11. Cart page ---------- */
.cartpage{ padding-top:calc(var(--nav-h) + 2rem) }
.crumbs{ display:flex; align-items:center; gap:.5rem; margin-bottom:1.3rem; font-size:.84rem; color:var(--text-3) }
.crumbs a:hover{ color:#fff }
.crumbs svg{ width:12px; height:12px }
.crumbs span{ color:var(--text-2) }
.cartpage-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1.8rem }
.cartpage-head h1{ font-size:clamp(2rem, 4vw, 2.8rem) }
.cartpage-count{ font-size:.88rem; color:var(--text-3); font-variant-numeric:tabular-nums }
.cartpage-grid{ display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:2rem; align-items:start }
#cartPageList{
  padding:.4rem 1.3rem; border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--line-2);
}
#cartPageList .cl{ grid-template-columns:120px minmax(0,1fr) auto; padding:1.1rem 0 }
.cartpage-back{
  display:inline-flex; align-items:center; gap:.45rem; margin-top:1.2rem;
  font-size:.86rem; color:var(--text-2); transition:color var(--t-fast) var(--ease);
}
.cartpage-back:hover{ color:#fff }
.cartpage-back svg{ width:15px; height:15px }

.cartpage-sum{ position:sticky; top:calc(var(--nav-h) + 1.25rem) }
.sum-card{
  padding:1.6rem; border-radius:var(--r-xl);
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--line-2); box-shadow:var(--edge), var(--shadow-2);
  display:grid; gap:.8rem;
}
.sum-card h2{ font-size:1.15rem; letter-spacing:-.02em; margin-bottom:.3rem }
.sum-divide{ height:1px; background:var(--line); margin:.3rem 0 }
.sum-req{
  padding:1rem; border-radius:var(--r-md);
  background:rgba(255,255,255,.025); border:1px solid var(--line);
}
.sum-req-head{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-bottom:.4rem }
.sum-req-head b{ font-size:.9rem }
.sum-req p{ font-size:.82rem; line-height:1.55; color:var(--text-3); margin:0 }
.sum-req-state{
  font-size:.64rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:.2rem .5rem; border-radius:5px;
  color:#fde68a; background:var(--warn-soft); border:1px solid rgba(251,191,36,.3);
}
.sum-req-state.is-soft{ color:var(--text-3); background:rgba(255,255,255,.04); border-color:var(--line-2) }
.sum-req-state.is-ok{ color:var(--ok); background:var(--ok-soft); border-color:rgba(52,211,153,.3) }
.sum-req-btn{ margin-top:.8rem; width:100% }
.sum-req-btn:disabled{ opacity:.45 }
.dc-code{
  margin-top:.8rem; padding:1rem; text-align:center;
  border:1px dashed var(--line-3); border-radius:var(--r-md); background:rgba(255,255,255,.02);
}
.dc-code b{
  display:block; font-family:var(--font-mono); font-size:1.5rem; font-weight:700;
  letter-spacing:.34em; text-indent:.34em; color:#fff;
}
.dc-code p{ margin:.5rem 0 0; font-size:.78rem; text-align:center }
.dc-code code{ font-size:.85em }
.sum-note{ margin:0; font-size:.76rem; color:var(--text-3); text-align:right }
.sum-go{ --h:52px; font-size:.98rem; border-radius:var(--r-md); margin-top:.4rem }
.sum-go.is-locked{ background:rgba(255,255,255,.07); color:var(--text-2); border-color:var(--line-2); cursor:not-allowed }
.sum-go.is-locked:hover{ background:rgba(255,255,255,.07) }
.sum-points{ list-style:none; margin:.4rem 0 0; padding:0; display:grid; gap:.5rem }
.sum-points li{ display:flex; align-items:center; gap:.55rem; font-size:.8rem; color:var(--text-3) }
.sum-points svg{ width:14px; height:14px; color:var(--ok) }

/* ---------- customers ---------- */
.cx-sec{ padding-block:clamp(2.2rem, 4.5vw, 3.4rem) }

/* the numbers */
.cx-stats{
  margin:2.6rem 0 0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:1px; border-radius:var(--r-lg); overflow:hidden;
  background:var(--line-2); border:1px solid var(--line-2);
  box-shadow:var(--shadow-2);
}
.cx-stat{
  margin:0; padding:1.3rem 1.4rem;
  background:linear-gradient(180deg, rgba(19,17,28,.92), rgba(14,12,21,.92));
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.cx-stat dt{ font-size:.78rem; font-weight:500; color:var(--text-3); margin-bottom:.45rem }
.cx-stat dd{
  margin:0; font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.7rem, 3vw, 2.3rem); letter-spacing:-.035em; line-height:1.05;
  font-variant-numeric:tabular-nums; color:var(--text);
}
.cx-stat dd.is-text{ font-size:clamp(1rem, 1.5vw, 1.12rem); letter-spacing:-.015em; line-height:1.35 }
.cx-stat dd a{ color:var(--brand-ink); transition:color var(--t-fast) var(--ease) }
.cx-stat dd a:hover{ color:#fff }
.cx-stat .sk-line{ height:1.6rem; width:60% }
.cx-stat dd.is-text .sk-line{ height:1rem; width:90% }

/* the podium */
.cx-podium{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1rem;
  align-items:end; margin-bottom:1rem;
}
.cx-place{
  --tone:var(--text-2); --tone-soft:rgba(255,255,255,.05);
  position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:2rem 1.2rem 1.6rem; border-radius:var(--r-xl);
  background:
    radial-gradient(90% 70% at 50% 0%, var(--tone-soft), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--line-2); box-shadow:var(--edge), var(--shadow-1);
}
.cx-place.is-gold{ --tone:#fcd34d; --tone-soft:rgba(251,191,36,.16); padding-top:2.8rem; border-color:rgba(251,191,36,.32) }
.cx-place.is-silver{ --tone:#d4d8e2; --tone-soft:rgba(212,216,226,.1) }
.cx-place.is-bronze{ --tone:#f0a875; --tone-soft:rgba(240,168,117,.12) }
.cx-medal{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
  font-family:var(--font-display); font-size:.86rem; font-weight:700; color:#0b0a10;
  background:var(--tone); box-shadow:0 0 0 4px var(--bg), 0 6px 18px -4px var(--tone);
}
.cx-place-name{ margin-top:.9rem; font-size:1.02rem; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cx-place-sub{ font-size:.8rem; color:var(--text-3); margin-top:.15rem }
.cx-place-total{
  margin-top:1rem; padding-top:1rem; width:100%; border-top:1px solid var(--line);
  font-family:var(--font-display); font-size:1.5rem; font-weight:600; letter-spacing:-.03em;
  color:var(--tone); font-variant-numeric:tabular-nums;
}

.cx-board{ list-style:none; margin:0; padding:0; display:grid; gap:.45rem }
.cx-board-row{
  display:flex; align-items:center; gap:.85rem; padding:.75rem 1rem;
  border-radius:var(--r-md); background:var(--surface); border:1px solid var(--line-2);
}
.cx-board-rank{ min-width:1.6rem; font-family:var(--font-mono); font-size:.8rem; color:var(--text-3) }
.cx-board-who{ flex:1; min-width:0; display:flex; flex-direction:column }
.cx-board-who b{ font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cx-board-who span{ font-size:.76rem; color:var(--text-3) }
.cx-board-total{ font-variant-numeric:tabular-nums }

/* avatars */
.cx-av{
  position:relative; flex:0 0 auto; width:36px; height:36px; border-radius:50%; overflow:hidden;
  display:grid; place-items:center;
  background:var(--av, var(--surface-4));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.cx-av.is-lg{ width:72px; height:72px; box-shadow:0 0 0 3px var(--bg), 0 0 0 4px var(--tone, var(--line-3)) }
.cx-av-i{ font-size:.85rem; font-weight:700; color:#fff }
.cx-av.is-lg .cx-av-i{ font-size:1.6rem; font-family:var(--font-display) }
.cx-av img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }

/* what people are running */
.cx-pop{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap:1rem }
.cx-pop-card{
  display:flex; gap:1rem; align-items:center; padding:.85rem; border-radius:var(--r-lg);
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--line-2); box-shadow:var(--edge);
  transition:transform .4s var(--ease-out), border-color var(--t) var(--ease);
}
.cx-pop-card:hover{ transform:translateY(-3px); border-color:var(--line-3) }
.cx-pop-art{
  flex:0 0 auto; width:116px; aspect-ratio:16/9; border-radius:var(--r-sm); overflow:hidden;
  background:linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size:200% 100%; animation:shimmer 1.4s linear infinite;
}
.cx-pop-art.is-loaded{ animation:none; background:var(--surface-3) }
.cx-pop-art img{ width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .4s var(--ease) }
.cx-pop-art.is-loaded img{ opacity:1 }
.cx-pop-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.3rem }
.cx-pop-rank{ font-family:var(--font-mono); font-size:.72rem; color:var(--brand-3) }
.cx-pop-name{
  font-size:.9rem; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.cx-pop-meta{ display:flex; justify-content:space-between; gap:.6rem; font-size:.78rem; color:var(--text-3) }
.cx-pop-price{ color:var(--text-2); font-weight:600 }
.cx-pop-bar{ height:3px; border-radius:3px; background:rgba(255,255,255,.06); overflow:hidden; margin-top:.15rem }
.cx-pop-bar span{ display:block; height:100%; border-radius:3px; background:linear-gradient(90deg, var(--brand), var(--brand-3)) }

/* activity */
.cx-tools{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.1rem }
.cx-tabs{
  display:flex; gap:.25rem; padding:.3rem; border-radius:var(--r-md);
  background:rgba(255,255,255,.03); border:1px solid var(--line-2);
}
.cx-tab{
  display:inline-flex; align-items:center; gap:.45rem;
  height:36px; padding:0 .95rem; border-radius:var(--r-sm);
  font-size:.86rem; font-weight:600; color:var(--text-2);
  transition:color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.cx-tab span{
  font-family:var(--font-mono); font-size:.7rem; font-weight:500;
  padding:.1rem .4rem; border-radius:4px; background:rgba(255,255,255,.06); color:var(--text-3);
}
.cx-tab:hover{ color:#fff }
.cx-tab.is-on{ color:#fff; background:rgba(255,255,255,.09); box-shadow:var(--edge) }
.cx-tab.is-on span{ background:var(--brand-soft); color:var(--brand-ink) }
.cx-search{ flex:0 1 320px }
.cx-search input{ height:44px }

.cx-feed{
  list-style:none; margin:0; padding:.35rem 1.1rem;
  border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line-2);
  display:grid; grid-template-columns:minmax(0,1fr);
}
.cx-item{
  display:flex; align-items:center; gap:.9rem; padding:.85rem 0;
  border-bottom:1px solid var(--line);
  animation:fade-in .35s var(--ease);
}
.cx-item:last-child{ border-bottom:0 }
.cx-item-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.15rem }
.cx-item-line{ margin:0; font-size:.9rem; color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cx-item-line b{ color:var(--text) }
.cx-item-pkg{ color:var(--text); font-weight:500 }
a.cx-item-pkg:hover{ color:var(--brand-ink) }
.cx-item-extra{ color:var(--text-3) }
.cx-item-when{ font-size:.76rem; color:var(--text-3) }
.cx-item-art{
  flex:0 0 auto; width:64px; aspect-ratio:16/9; border-radius:6px; overflow:hidden;
  background:var(--surface-3);
}
.cx-item-art img{ width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .35s var(--ease) }
.cx-item-art.is-loaded img{ opacity:1 }
.cx-item-val{
  flex:0 0 auto; min-width:4.6rem; text-align:right;
  font-size:.88rem; font-weight:600; font-variant-numeric:tabular-nums; color:var(--text);
}
.cx-item.is-free .cx-item-val{ color:var(--ok) }
.cx-item.is-paid .cx-item-val{
  justify-self:end; padding:.22rem .55rem; border-radius:6px; min-width:0;
  background:var(--brand-soft); color:var(--brand-ink);
}
.cx-skel{
  height:62px; margin:.35rem 0; border-radius:var(--r-sm);
  background:linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
  background-size:200% 100%; animation:shimmer 1.4s linear infinite;
}
.cx-empty{ padding:2rem 0; text-align:center; color:var(--text-3) }
.cx-more{ display:flex; justify-content:center; margin-top:1.2rem }

.cust-note{ margin:2rem auto 0; max-width:62ch; font-size:.82rem; line-height:1.6; color:var(--text-3); text-align:center }
.cust-note a{ color:var(--text-2); text-decoration:underline; text-underline-offset:2px }
.cust-note a:hover{ color:#fff }

@media (max-width:960px){
  .cx-stats{ grid-template-columns:repeat(2, minmax(0,1fr)) }
}
@media (max-width:640px){
  .cx-podium{ grid-template-columns:minmax(0,1fr); gap:1.4rem }
  .cx-place.is-gold{ order:-1 }
  .cx-tools{ flex-direction:column; align-items:stretch }
  .cx-tabs .cx-tab{ flex:1; justify-content:center; padding:0 .5rem }
  .cx-search{ flex:1 1 auto }
  .cx-item-art{ display:none }
  /* Two lines rather than one: on a phone a single line ended at
     "downloade…", which hid the one part of the row worth reading. */
  .cx-item-line{
    white-space:normal; line-height:1.4;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  }
  .cx-feed{ padding:.2rem .9rem }
}

/* ---------- docs ---------- */
.dx-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap:1rem; align-items:stretch }
.dx-card{
  display:flex; flex-direction:column; overflow:hidden;
  border-radius:var(--r-lg); color:inherit;
  transition:transform .45s var(--ease-out), border-color var(--t) var(--ease), box-shadow .45s var(--ease-out);
}
a.dx-card:hover{ transform:translateY(-4px); border-color:var(--line-3); box-shadow:var(--edge), var(--shadow-2) }
.dx-card > :not(.dx-art){ margin-inline:1.5rem }
.dx-card > .dx-head{ margin-top:1.4rem }
.dx-card.is-soon{ background:transparent; border-style:dashed; box-shadow:none }
.dx-art{ display:block; aspect-ratio:16/9; overflow:hidden; background:var(--surface-2); border-bottom:1px solid var(--line) }
.dx-art img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out) }
a.dx-card:hover .dx-art img{ transform:scale(1.04) }
.dx-head{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.8rem }
.dx-tag{
  font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:.22rem .5rem; border-radius:5px;
  color:var(--text-2); background:rgba(255,255,255,.04); border:1px solid var(--line-2);
}
.dx-tag.is-live{ color:var(--ok); background:var(--ok-soft); border-color:rgba(52,211,153,.28) }
.dx-res{ font-family:var(--font-mono); font-size:.74rem; color:var(--text-3) }
.dx-card h2{ font-size:1.25rem; letter-spacing:-.025em; margin-bottom:.5rem }
.dx-card p{ font-size:.88rem; line-height:1.65; color:var(--text-2); margin-bottom:.9rem }
.dx-points{ list-style:none; padding:0; margin-bottom:1.2rem; display:grid; gap:.45rem }
.dx-points li{ position:relative; padding-left:1rem; font-size:.84rem; color:var(--text-3) }
.dx-points li::before{ content:""; position:absolute; left:0; top:.6em; width:5px; height:5px; border-radius:1px; background:var(--brand-3) }
.dx-go{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:auto; margin-bottom:1.5rem;
  font-size:.88rem; font-weight:600; color:#fff;
}
.dx-go svg{ width:15px; height:15px; transition:transform var(--t) var(--ease-out) }
a.dx-card:hover .dx-go svg{ transform:translateX(3px) }
.dx-actions{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.5rem }

.doc-back{
  display:inline-flex; align-items:center; gap:.4rem; margin-bottom:1.2rem;
  font-size:.84rem; color:var(--text-2); transition:color var(--t-fast) var(--ease);
}
.doc-back:hover{ color:#fff }
.doc-back svg{ width:14px; height:14px }

.docs-layout{ display:grid; grid-template-columns:230px minmax(0,1fr); gap:clamp(2rem, 5vw, 4rem); align-items:start }
.docs-nav{ position:sticky; top:calc(var(--nav-h) + 1.5rem) }
.docs-nav-label{
  display:block; margin-bottom:.8rem; padding-left:.85rem;
  font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3);
}
.docs-nav nav{ display:flex; flex-direction:column; gap:.1rem; border-left:1px solid var(--line-2) }
.docs-nav a{
  margin-left:-1px; padding:.42rem .85rem;
  font-size:.86rem; color:var(--text-3); border-left:1px solid transparent;
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.docs-nav a:hover{ color:#fff }
.docs-nav a.is-on{ color:#fff; border-left-color:var(--brand-3) }

.docs-body{ min-width:0; max-width:76ch }
.doc-intro{ margin-bottom:2.5rem; padding-bottom:2rem; border-bottom:1px solid var(--line) }
.doc-intro p{ font-size:1.02rem; line-height:1.75; color:var(--text-2); margin:0 }
.doc{
  scroll-margin-top:calc(var(--nav-h) + 1.5rem);
  padding-bottom:clamp(2rem, 4vw, 2.8rem);
  margin-bottom:clamp(2rem, 4vw, 2.8rem);
  border-bottom:1px solid var(--line);
}
.doc:last-child{ border-bottom:0; margin-bottom:0 }
.doc h2{ font-size:clamp(1.4rem, 2.4vw, 1.8rem); letter-spacing:-.03em; margin-bottom:1.1rem }
.doc h3{ font-size:1.02rem; margin:1.8rem 0 .6rem }
.doc p{ font-size:.94rem; line-height:1.8; color:var(--text-2); margin:0 0 1rem }
.doc p:last-child{ margin-bottom:0 }
.doc a{ color:var(--brand-ink); text-decoration:underline; text-decoration-color:var(--brand-line); text-underline-offset:3px }
.doc a.btn{ color:inherit; text-decoration:none }
/* minmax(0,1fr): an install step can hold a code block, and an implicit
   auto column grew to the width of its longest line and pushed the whole
   page sideways on phones. */
.doc-steps,.doc-list{ margin:0 0 1.2rem; padding-left:1.3rem; display:grid; grid-template-columns:minmax(0,1fr); gap:.5rem }
.doc-steps li,.doc-list li{ min-width:0 }
.doc-steps li,.doc-list li{ font-size:.94rem; line-height:1.75; color:var(--text-2); padding-left:.3rem }
.doc-steps li::marker{ color:var(--brand-3); font-weight:600; font-family:var(--font-mono); font-size:.86em }
.doc-list li::marker{ color:var(--brand-3) }
.doc-pre{
  margin:.6rem 0 1.1rem; padding:1rem 1.15rem; overflow-x:auto;
  border-radius:var(--r-md); background:var(--bg); border:1px solid var(--line-2);
}
.doc-pre code{
  display:block; padding:0; background:none; border-radius:0;
  font-size:.82rem; line-height:1.8; color:#d8d2e8; white-space:pre; overflow-wrap:normal;
}
.doc-table-wrap{ margin:0 0 1.2rem; overflow-x:auto; border-radius:var(--r-md); border:1px solid var(--line-2) }
.doc-table{ width:100%; border-collapse:collapse; font-size:.88rem; min-width:380px }
.doc-table th,.doc-table td{ padding:.7rem .95rem; text-align:left; color:var(--text-2); border-bottom:1px solid var(--line); line-height:1.6 }
.doc-table th{ background:rgba(255,255,255,.03); color:var(--text); font-weight:600; font-size:.8rem }
.doc-table tr:last-child td{ border-bottom:0 }
.doc-help{
  margin-top:2rem; padding:1.4rem; border-radius:var(--r-lg);
  background:linear-gradient(90deg, rgba(122,34,255,.1), rgba(122,34,255,.02));
  border:1px solid var(--brand-line);
}
.doc-help b{ display:block; font-family:var(--font-display); font-size:1.05rem; margin-bottom:.4rem }
.doc-help p{ margin-bottom:1rem }

/* ---------- legal ---------- */
.legal{ max-width:760px }
.legal-meta{ font-size:.86rem; color:var(--text-3); padding-bottom:1.6rem; margin-bottom:2rem; border-bottom:1px solid var(--line) }
.legal-meta strong{ color:var(--text-2) }
.legal h2{ font-size:1.3rem; letter-spacing:-.025em; margin:2.6rem 0 .9rem }
.legal h3{ font-size:1.02rem; margin:1.6rem 0 .5rem }
.legal p,.legal li{ font-size:.95rem; line-height:1.8; color:var(--text-2) }
.legal ul{ padding-left:1.25rem; margin:0 0 1rem; display:grid; grid-template-columns:minmax(0,1fr); gap:.4rem }
.legal li::marker{ color:var(--brand-3) }
.legal a{ color:var(--brand-ink); text-decoration:underline; text-decoration-color:var(--brand-line); text-underline-offset:3px }
.legal code{ font-size:.85em }
.legal kbd{
  font-family:var(--font-mono); font-size:.8em; padding:.1em .4em; border-radius:4px;
  border:1px solid var(--line-3); background:rgba(255,255,255,.05);
}

/* ---------- contact ---------- */
.info-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1rem; max-width:860px }
.info{ display:flex; align-items:center; gap:1rem; padding:1.3rem 1.4rem }
.info-ico{
  display:grid; place-items:center; flex:0 0 auto; width:44px; height:44px;
  border-radius:var(--r-md); background:var(--brand-soft); border:1px solid var(--brand-line); color:var(--brand-ink);
}
.info-ico svg{ width:19px; height:19px }
.info small{ display:block; font-size:.78rem; color:var(--text-3); margin-bottom:.2rem }
.info b{ font-size:.98rem; font-weight:600 }
.info a{ transition:color var(--t-fast) var(--ease) }
.info a:hover{ color:var(--brand-ink) }

/* ---------- order complete ---------- */
.done-card{ max-width:780px; margin:0 auto; padding:clamp(2rem, 5vw, 2.8rem); text-align:center }
.done-tick{
  display:grid; place-items:center; width:58px; height:58px; margin:0 auto 1.3rem;
  border-radius:50%; background:var(--ok-soft); border:1px solid rgba(52,211,153,.35);
  box-shadow:0 0 0 6px rgba(52,211,153,.06);
}
.done-tick svg{ width:26px; height:26px; color:var(--ok) }
.done-card h2{ font-size:1.6rem; letter-spacing:-.03em; margin-bottom:.6rem }
.done-lead{ margin:0 auto; max-width:52ch; color:var(--text-2); font-size:.95rem }
.done-steps{ margin-top:2.2rem; display:grid; gap:.75rem; text-align:left }
.done-step{
  display:flex; gap:1rem; align-items:flex-start; padding:1.15rem 1.2rem;
  border-radius:var(--r-md); background:rgba(255,255,255,.025); border:1px solid var(--line);
}
.done-num{
  display:grid; place-items:center; flex:0 0 auto; width:28px; height:28px; border-radius:50%;
  font-family:var(--font-mono); font-size:.76rem; font-weight:600;
  color:var(--brand-ink); background:var(--brand-soft); border:1px solid var(--brand-line);
}
.done-step b{ display:block; font-size:.96rem; margin-bottom:.3rem }
.done-step p{ margin:0 0 .8rem; font-size:.86rem; line-height:1.6; color:var(--text-2) }
.done-foot{ margin-top:2rem; display:flex; justify-content:center; gap:.6rem; flex-wrap:wrap }

/* ---------- appeal ---------- */
.appeal-wrap{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:1.6rem; align-items:start; max-width:1000px }
.appeal-card,.appeal-done{ padding:clamp(1.5rem, 4vw, 2rem) }
.appeal-note{ margin:1rem 0 0; font-size:.8rem; color:var(--text-3); text-align:center }
.appeal-done{ text-align:center }
.appeal-tick{
  display:grid; place-items:center; width:54px; height:54px; margin:0 auto 1.1rem;
  border-radius:50%; background:var(--ok-soft); color:var(--ok);
}
.appeal-tick svg{ width:24px; height:24px }
.appeal-done h2{ font-size:1.5rem; margin-bottom:.6rem }
.appeal-done p{ color:var(--text-2); max-width:44ch; margin:0 auto 1.4rem }
.appeal-side{ padding:1.4rem; border-radius:var(--r-lg); border:1px solid var(--line-2); background:rgba(255,255,255,.02) }
.appeal-side h3{ font-size:1rem; margin-bottom:.9rem }
.appeal-side .doc-list li{ font-size:.86rem }
.appeal-side-note{ margin:1rem 0 0; font-size:.78rem; color:var(--text-3) }

/* ---------- empty-category and docs-index "coming soon" panels ---------- */
.soon-wrap{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:1.6rem }
.soon-card{ padding:2rem }
.soon-badge{ display:inline-block; margin-bottom:1rem; font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-3) }
.soon-actions{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.4rem }
.soon-side{ padding:1.4rem; border:1px solid var(--line-2); border-radius:var(--r-lg) }
.soon-note{ font-size:.8rem; color:var(--text-3); margin:1rem 0 0 }
/* Turnstile's widget, centred above the submit button. */
.captcha-slot{ display:flex; justify-content:center; min-height:65px; margin:.4rem 0 1rem }

/* ---------- 12. Staff tools ----------
   The admin panel and staff sign-in. Ported from the previous stylesheet
   rather than redesigned: they are internal, they work, and their markup
   was not part of this rebuild. They read the aliased token names in
   section 1, so they pick up the new palette without being rewritten. */
.mono{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase}
.link-arrow{display:inline-flex;align-items:center;gap:.5rem;color:var(--violet-200);font-weight:600;font-size:.92rem}
.link-arrow svg{width:16px;height:16px;transition:transform .45s var(--ease-out)}
.link-arrow:hover svg{transform:translateX(5px)}
.nav-links a:hover,.nav-links a.active{color:#fff}
.nav-links a:hover::after,.nav-links a.active::after{width:22px}
.filters button.active{background:var(--grad-brand);border-color:transparent;color:#fff;box-shadow:0 8px 26px -12px rgba(122,34,255,.9)}
.work-body .mono{color:var(--violet-300);display:block;margin-bottom:.6rem}
.price-toggle button.active{background:var(--grad-brand);color:#fff}
.cta-band .btns{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;position:relative;z-index:1}
.cart-close{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--stroke);transition:.35s}
.cart-close:hover{background:var(--glass-strong);border-color:var(--violet-400)}
.cart-close svg{width:16px;height:16px}
.nav-avatar{position:absolute;inset:0;width:100%;height:100%;
  border-radius:50%;object-fit:cover;}
.auth-shell{max-width:520px;margin-inline:auto}
.auth-notice{display:flex;gap:.9rem;align-items:flex-start;
  padding:1.1rem 1.3rem;margin-bottom:1.4rem;
  border:1px solid rgba(255,196,102,.34);border-radius:var(--r-md);
  background:rgba(255,196,102,.07);}
.auth-notice svg{flex:none;width:20px;height:20px;margin-top:2px;color:#ffc466}
.auth-notice b{display:block;font-weight:600;font-size:.93rem;margin-bottom:.25rem}
.auth-notice p{font-size:.86rem;line-height:1.6}
.auth-notice code{font-family:var(--font-mono);font-size:.8rem;color:var(--violet-200)}
.auth-card{padding:clamp(1.7rem,3.4vw,2.4rem)}
.auth-tabs button.active{background:var(--grad-brand);color:#fff;box-shadow:0 8px 24px -12px rgba(122,34,255,.9)}
.auth-error,.auth-ok{padding:.85rem 1.1rem;border-radius:var(--r-md);font-size:.88rem;margin-bottom:1.2rem}
.auth-error{background:rgba(255,122,143,.1);border:1px solid rgba(255,122,143,.34);color:#ff9fb0}
.auth-ok{background:rgba(46,220,150,.09);border:1px solid rgba(46,220,150,.32);color:#8ef0c4}
.auth-card .field{position:relative;margin-bottom:1.1rem}
.auth-card .field label{display:block;font-family:var(--font-mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute-dim);margin-bottom:.5rem}
.auth-card .field input{width:100%;padding:.9rem 1.05rem;border-radius:var(--r-md);
  background:rgba(255,255,255,.035);border:1px solid var(--stroke);
  font-size:.93rem;transition:border-color .35s,background .35s,box-shadow .35s;}
.auth-card .field input:focus{outline:none;border-color:var(--violet-400);background:rgba(255,255,255,.055);box-shadow:0 0 0 4px rgba(122,34,255,.14)}
.auth-card .field input::placeholder{color:var(--mute-dim)}
.auth-card .field input:disabled{opacity:.5;cursor:not-allowed}
.auth-card .field .err{display:block;min-height:1rem;margin-top:.35rem;font-size:.74rem;color:#ff7a8f;opacity:0;transition:opacity .3s}
.auth-card .field.invalid input{border-color:rgba(255,122,143,.6)}
.auth-card .field.invalid .err{opacity:1}
.account-head{display:flex;align-items:center;gap:1.1rem;padding:1.3rem;margin-bottom:1.4rem;border:1px solid var(--stroke);border-radius:var(--r-md);background:rgba(255,255,255,.035)}
.account-avatar{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--grad-brand);box-shadow:var(--glow-sm)}
.account-avatar svg{width:24px;height:24px}
.account-head small{display:block;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute-dim);margin-bottom:.25rem}
.account-head b{font-weight:500;font-size:.98rem;word-break:break-all}
.pf-badge.ok{background:rgba(46,220,150,.1);border-color:rgba(46,220,150,.4);color:#8ef0c4}
.pf-badge.warn{background:rgba(255,196,102,.1);border-color:rgba(255,196,102,.4);color:#ffc466}
.profile-nav button.active{background:rgba(122,34,255,.16);border-color:rgba(171,124,255,.34);color:#fff;}
.profile-panel h4.danger{color:#ff9fb0}
.panel-note{font-size:.85rem;color:var(--mute-dim);line-height:1.65;margin:.5rem 0 1rem}
.profile-panel .field .err{display:block;min-height:1rem;margin-top:.35rem;font-size:.74rem;color:#ff7a8f;opacity:0;transition:opacity .3s}
.profile-panel .field.invalid .err{opacity:1}
.conn-body span.ok{color:#8ef0c4}
.soon-band .btns{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.admin-hero{padding-bottom:1rem}
.admin-state{text-align:center;padding:3rem 2rem;border-radius:var(--r-lg);max-width:560px;margin:0 auto}
.admin-state h2{font-size:1.5rem;margin:0 0 .6rem}
.admin-state p{color:var(--mute);margin:0 0 1.4rem}
.admin-state .btns{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}
.spinner{display:inline-block;width:22px;height:22px;margin-bottom:1rem;
  border:2px solid var(--stroke);border-top-color:var(--violet-400);
  border-radius:50%;animation:spin .8s linear infinite;}
.admin-grid{display:grid;grid-template-columns:220px 1fr;gap:1.2rem;align-items:start}
.admin-side{padding:.7rem;border-radius:var(--r-lg);position:sticky;top:88px}
.admin-side nav{display:flex;flex-direction:column;gap:.15rem}
.admin-side button{display:flex;align-items:center;gap:.65rem;width:100%;
  padding:.65rem .8rem;border-radius:var(--r-sm);
  font-size:.9rem;font-weight:500;color:var(--mute);text-align:left;
  transition:background .25s,color .25s;}
.admin-side button svg{width:16px;height:16px;flex:none;opacity:.75}
.admin-side button:hover{color:#fff;background:rgba(255,255,255,.04)}
.admin-side button.active{color:#fff;background:color-mix(in srgb,var(--violet-500) 18%,transparent);
  box-shadow:inset 2px 0 0 var(--violet-400);}
.admin-me{margin-top:.9rem;padding:.8rem;border-top:1px solid var(--stroke);
  font-size:.75rem;color:var(--mute-dim);word-break:break-all;}
.admin-role{display:inline-block;margin-bottom:.35rem;padding:.2rem .55rem;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--violet-500) 22%,transparent);
  font-family:var(--font-mono);font-size:.58rem;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;}
.admin-msg{padding:.8rem 1rem;border-radius:var(--r-sm);font-size:.88rem;margin:0 0 1rem}
.admin-msg.err{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.35);color:#fca5a5}
.admin-msg.ok{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35);color:#86efac}
.admin-card{border-radius:var(--r-lg);overflow:hidden;margin-bottom:1.2rem}
.admin-card-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:1.1rem 1.3rem;border-bottom:1px solid var(--stroke);}
.admin-card-head h2{font-size:1.1rem;margin:0;display:flex;align-items:center;gap:.6rem}
.head-tools{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.head-note{font-size:.76rem;color:var(--mute-dim)}
.count-pill{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;
  color:var(--mute-dim);font-weight:400;}
.head-tools input,.head-tools select,.admin-form input,.admin-form select,.admin-form textarea{padding:.5rem .75rem;border-radius:var(--r-sm);
  border:1px solid var(--stroke);background:rgba(255,255,255,.03);
  color:#fff;font-size:.85rem;font-family:inherit;}
.head-tools input:focus,.head-tools select:focus,
.admin-form input:focus,.admin-form select:focus,.admin-form textarea:focus{outline:none;border-color:var(--violet-400);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--violet-500) 22%,transparent);}
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:.9rem;margin-bottom:1.2rem;}
.kpi{padding:1.2rem 1.3rem;border-radius:var(--r-lg)}
.kpi-label{display:block;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute-dim);margin-bottom:.5rem;}
.kpi-value{font-family:var(--font-display);font-size:1.6rem;font-weight:600;letter-spacing:-.02em;color:#fff}
.table-wrap{overflow-x:auto}
.admin-table{width:100%;border-collapse:collapse;font-size:.87rem;min-width:560px}
.admin-table th{text-align:left;padding:.7rem 1.3rem;
  font-family:var(--font-mono);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute-dim);font-weight:400;
  border-bottom:1px solid var(--stroke);white-space:nowrap;}
.admin-table td{padding:.85rem 1.3rem;border-bottom:1px solid rgba(255,255,255,.045);vertical-align:middle}
.admin-table tbody tr:last-child td{border-bottom:none}
.admin-table tbody tr:hover{background:rgba(255,255,255,.02)}
.admin-table b{color:#fff;font-weight:600;display:block}
.row-sub{display:block;font-size:.76rem;color:var(--mute-dim);margin-top:.15rem}
.row-sub.strike{text-decoration:line-through}
.mono{font-family:var(--font-mono);font-size:.8rem;color:var(--mute)}
.table-empty{text-align:center;color:var(--mute-dim);padding:2.4rem 1rem !important}
.row-actions{text-align:right;white-space:nowrap}
.pill{display:inline-block;padding:.2rem .55rem;margin-right:.35rem;border-radius:var(--r-pill);
  font-size:.68rem;font-weight:600;border:1px solid transparent;}
.admin-main select option,.edit-drawer select option{background:#0d0a16;color:#fff}
.btn-xs{padding:.35rem .7rem;font-size:.76rem;border-radius:var(--r-sm)}
.btn-ghost.danger{border-color:rgba(239,68,68,.4);color:#fca5a5}
.admin-form{padding:1.3rem}
.admin-form .field{margin-bottom:1rem}
.admin-form .field label{display:block;font-size:.8rem;color:var(--mute);margin-bottom:.35rem}
.admin-form input,.admin-form select,.admin-form textarea{width:100%}
.admin-form textarea{resize:vertical;line-height:1.6}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.switch-row{display:flex;align-items:flex-start;gap:.75rem;
  padding:.85rem 0;border-top:1px solid rgba(255,255,255,.05);cursor:pointer;}
.switch-row input{width:auto;flex:none;margin-top:.2rem;accent-color:var(--violet-500)}
.switch-row b{display:block;font-size:.9rem;color:#fff;font-weight:600}
.switch-row small{display:block;font-size:.78rem;color:var(--mute-dim);margin-top:.15rem}
.drawer-backdrop{position:fixed;inset:0;background:rgba(4,3,8,.7);backdrop-filter:blur(3px);z-index:180}
.edit-drawer{position:fixed;top:0;right:0;bottom:0;width:min(480px,100%);z-index:181;
  background:var(--ink-900);border-left:1px solid var(--stroke);
  transform:translateX(100%);transition:transform .45s var(--ease-out);
  display:flex;flex-direction:column;}
.edit-drawer.open{transform:none}
.edit-head{display:flex;align-items:center;justify-content:space-between;
  padding:1.2rem 1.3rem;border-bottom:1px solid var(--stroke);flex:none;}
.edit-head h2{font-size:1.15rem;margin:0}
.edit-body{overflow-y:auto;flex:1}
.edit-foot{display:flex;gap:.6rem;align-items:center;margin-top:1.2rem}
.edit-foot .btn-block{flex:1}
@media (max-width:900px){
  .admin-grid{grid-template-columns:1fr}
  .admin-side{position:static}
  .admin-side nav{flex-direction:row;overflow-x:auto}
  .admin-side button{white-space:nowrap}
  .field-row{grid-template-columns:1fr}
}
.admin-msg.warn{background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.35);color:#fcd34d;}
.switch-row.master{border-top:none;padding:1rem;margin-bottom:.4rem;border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--violet-500) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--violet-500) 30%,transparent);}
.admin-card.disarmed .guard-grid,
.admin-card.disarmed .switch-row:not(.master){opacity:.45}
.admin-card.disarmed{border-color:rgba(239,68,68,.35)}
.guard-grid .switch-row{padding:.6rem 0}
.cust-email{margin:0 0 .4rem;font-size:.88rem;color:var(--mute);word-break:break-all}
.cust-badges .pill{margin:0}
#custStats .kpi{padding:.8rem .9rem}
#custStats .kpi-value{font-size:1.05rem}
.mini-row .row-sub{margin-left:auto;margin-top:0}
.cat .link-arrow{font-size:.8rem}
.cat .link-arrow svg{transition:transform .45s var(--ease-out)}
.cat:hover .link-arrow svg{transform:translateX(4px)}
@media (max-width:520px){
  .cat .link-arrow{font-size:.74rem}
}
.pay-flash.ok{background:rgba(34,197,94,.16);border:1px solid rgba(34,197,94,.4);color:#86efac}
.pay-flash.warn{background:rgba(251,191,36,.16);border:1px solid rgba(251,191,36,.4);color:#fcd34d}
.admin-hero > .shell,
#admin > .shell{width:min(1680px,calc(100% - 3rem))}
.admin-hero{padding-top:calc(var(--nav-h) + 1.2rem);
  padding-bottom:.75rem;
  margin-bottom:1.1rem;}
.admin-hero h1{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.admin-grid{grid-template-columns:250px minmax(0,1fr);gap:1.6rem}
@media (max-width:1080px){
  .admin-grid{grid-template-columns:minmax(0,1fr)}
}
.admin-table th{padding-block:.85rem}
.admin-table td{padding:1.05rem 1.4rem}
@media (min-width:1500px){
  .admin-table{font-size:.9rem}
}
/* ---------- 13. Motion and responsive ---------- */
@keyframes shimmer{ from{ background-position:200% 0 } to{ background-position:-200% 0 } }
@keyframes fade-in{ from{ opacity:0 } to{ opacity:1 } }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* Revealed as it scrolls into view. Short and close: content arriving,
   not a show. main.js adds .in; without JavaScript, or with reduced
   motion, it is simply visible. */
[data-reveal]{
  opacity:0; transform:translateY(14px);
  transition:opacity .6s var(--ease), transform .7s var(--ease-out);
}
[data-reveal].in{ opacity:1; transform:none }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1; transform:none }
}

/* ---- large tablet ---- */
@media (max-width:1100px){
  .foot-grid{ grid-template-columns:1.4fr 1fr 1fr 1fr; gap:1.5rem }
  .prod-grid{ grid-template-columns:minmax(0,1fr) 340px; gap:1.6rem 2rem }
  .cartpage-grid{ grid-template-columns:minmax(0,1fr) 360px }
  .trust-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) }
}

/* ---- tablet: the nav collapses, two-column layouts stack ---- */
@media (max-width:960px){
  :root{ --bar-h:64px }
  .nav-inner{ grid-template-columns:auto 1fr; gap:.8rem }
  .nav-links{ display:none }
  .burger{ display:flex }
  .brand-mark{ height:46px }

  /* Buy panel between the gallery and the description, and no longer
     sticky: on one column a sticky panel would sit on top of everything. */
  .prod-grid{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"media" "buy" "detail";
  }
  .prod-buy{ position:static }

  .cartpage-grid{ grid-template-columns:minmax(0,1fr) }
  .cartpage-sum{ position:static }

  .faq-grid{ grid-template-columns:minmax(0,1fr) }
  .how-grid{ grid-template-columns:minmax(0,1fr) }
  .how-head{ position:static }

  .docs-layout{ grid-template-columns:minmax(0,1fr); gap:1.5rem }
  .docs-nav{ position:static }
  .docs-nav nav{
    flex-direction:row; overflow-x:auto; gap:.35rem;
    border-left:0; padding-bottom:.4rem; scrollbar-width:none;
  }
  .docs-nav nav::-webkit-scrollbar{ display:none }
  .docs-nav a{
    margin:0; flex:0 0 auto; white-space:nowrap;
    padding:.45rem .8rem; border:1px solid var(--line-2); border-radius:var(--r-pill);
  }
  .docs-nav a.is-on{ border-color:var(--brand-line); background:var(--brand-soft) }

  .appeal-wrap,.soon-wrap{ grid-template-columns:minmax(0,1fr) }
  .foot-grid{ grid-template-columns:repeat(3, minmax(0,1fr)) }
  .foot-brand{ grid-column:1 / -1 }
}

/* ---- phone ---- */
@media (max-width:640px){
  body{ font-size:14.5px }
  .online-pill{ display:none }
  .cur-btn .cur-code{ display:none }
  .cur-btn{ padding:0 .6rem }

  .sec-row{ align-items:flex-start }


  .info-grid{ grid-template-columns:minmax(0,1fr) }
  .trust-grid{ grid-template-columns:minmax(0,1fr) }


  .pcard-foot{ padding:.8rem 1rem 1rem }

  #cartPageList{ padding:.2rem 1rem }
  #cartPageList .cl,.cl{ grid-template-columns:72px minmax(0,1fr) auto; gap:.75rem }

  .consent-inner{ grid-template-columns:minmax(0,1fr); gap:.9rem }
  .consent-actions .btn{ flex:1 }

  .foot-top{ flex-direction:column; align-items:flex-start }
  .foot-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .foot-bottom{ flex-direction:column; align-items:flex-start; gap:.8rem }

  .faq-body{ padding-left:1.15rem }
  .done-step{ flex-direction:column; gap:.6rem }
}

/* a warning inside a docs section: something that breaks the resource if ignored */
.doc-note{
  margin-top:1.1rem; padding:.95rem 1.1rem; border-radius:var(--r-md);
  font-size:.9rem; line-height:1.6; color:var(--text-2);
  background:var(--warn-soft); border:1px solid rgba(251,191,36,.28);
}
.doc-note b{ color:var(--warn) }

/* ---------- promo strip ----------
   A running offer, across the very top of every page. Shown by main.js
   only while the offer is live and until it is dismissed. */
html.has-promo{ --promo-h:42px }
.promo{
  position:fixed; top:0; left:0; right:0; z-index:105; height:var(--promo-h);
  display:flex; align-items:center; overflow:hidden;
  color:#fff; font-size:.86rem;
  background:
    radial-gradient(60% 220% at 50% 120%, rgba(255,122,24,.38), transparent 70%),
    linear-gradient(90deg, #1a0b25, #2a0f2e 30%, #3a1420 50%, #2a0f2e 70%, #1a0b25);
  border-bottom:1px solid rgba(255,140,40,.35);
}
/* a slow sheen across the strip, so it reads as live without flashing */
.promo::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 35%, rgba(255,170,80,.16) 50%, transparent 65%);
  background-size:250% 100%; animation:promoSheen 7s linear infinite;
}
@keyframes promoSheen{ from{ background-position:120% 0 } to{ background-position:-120% 0 } }
.promo-inner{
  position:relative; width:100%; max-width:calc(var(--shell) + var(--gutter) * 2);
  margin-inline:auto; padding:0 3rem 0 var(--gutter);
  display:flex; align-items:center; justify-content:center; gap:.9rem; white-space:nowrap;
}
.promo-ico{ width:20px; height:20px; flex:0 0 auto }
.promo-text{ margin:0; display:flex; align-items:center; gap:.55rem; min-width:0 }
.promo-text b{ color:#ffb15c; font-weight:700 }
.promo-code{
  display:inline-flex; align-items:center; gap:.4rem; height:26px; padding:0 .6rem;
  font-family:var(--font-mono); font-size:.8rem; font-weight:600; letter-spacing:.06em; color:#fff;
  border-radius:6px; border:1px dashed rgba(255,177,92,.75); background:rgba(255,140,40,.14);
  transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.promo-code:hover{ background:rgba(255,140,40,.26); border-color:#ffb15c }
.promo-code svg{ width:13px; height:13px }
.promo-code.is-done{ border-style:solid; border-color:var(--ok); background:rgba(52,211,153,.16) }
.promo-left{ font-family:var(--font-mono); font-size:.76rem; color:rgba(255,255,255,.72) }
.promo-shop{
  display:inline-flex; align-items:center; gap:.3rem; font-weight:600; color:#fff;
  border-bottom:1px solid rgba(255,255,255,.35); padding-bottom:1px;
}
.promo-shop:hover{ border-bottom-color:#fff }
.promo-shop svg{ width:13px; height:13px }
.promo-x{
  position:absolute; right:calc(var(--gutter) - .4rem); top:50%; margin-top:-14px;
  display:grid; place-items:center; width:28px; height:28px; border-radius:50%;
  color:rgba(255,255,255,.7); transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.promo-x:hover{ background:rgba(255,255,255,.1); color:#fff }
.promo-x svg{ width:15px; height:15px }
@media (max-width:760px){
  .promo-left,.promo-shop,.promo-hide-sm{ display:none }
  .promo-inner{ justify-content:flex-start; padding-right:2.6rem; gap:.6rem }
}
@media (max-width:400px){
  .promo{ font-size:.8rem }
  .promo-ico{ display:none }
}