/* ─────────────────────────────────────────────────────────────
   BuyLiveViewers — shared product-page styles
   Design source of truth: index.html (homepage). Tokens, nav,
   cards, sections, reveal system and footer mirror it exactly.
   Per-page files add only platform theming (hero gradient,
   accent colour, profile mockup).
   ───────────────────────────────────────────────────────────── */

:root{
  --bg:#08080a;
  --panel:#151517;
  --panel-2:#1c1c1f;
  --line:#26262a;
  --green:#4ad6ff; /* brand accent — electric cyan (var name kept for compatibility) */
  --green-2:#2fc3f0;
  --purple:#7b5cff;
  --pink:#e85ad0;
  --blue:#4ad6ff;
  --white:#ffffff;
  --ink:#08080a;
  --text:#f4f4f6;
  --muted:#8a8a93;
  --muted-2:#a7a7b0;
  --r:16px;   /* card radius — squared down from 24 for a sleeker read */
  --r-sm:18px;
  --head:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{font-family:var(--body);background:var(--bg);color:var(--text);line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;overscroll-behavior:none}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1216px;margin:0 auto;padding:0 24px}
h1,h2,h3,h4{font-family:var(--head);font-weight:700;letter-spacing:-.022em;line-height:1.12}

/* shared keyframes */
@keyframes blink{50%{opacity:0}}
@keyframes pulseDot{50%{opacity:.45}}

/* ── nav — floating pill (same as homepage) ── */
header.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:center;padding:18px 16px;pointer-events:none}
.nav-in{pointer-events:auto;position:relative;width:100%;max-width:1180px;display:flex;align-items:center;justify-content:space-between;
  height:60px;padding:0 10px 0 22px;background:#18181b;
  border:none;border-radius:100px;box-shadow:0 12px 34px rgba(0,0,0,.42);
  transition:background .3s ease, box-shadow .3s ease}
header.nav.scrolled .nav-in{background:#1f1f23;box-shadow:0 16px 42px rgba(0,0,0,.55)}
.logo{font-family:'Space Grotesk',var(--head);font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--text);
  display:inline-flex;align-items:center;gap:9px}
.logo-mark{width:26px;height:26px;flex:none;display:block;border-radius:8px}
/* wordmark lockup: the mark carries the icon, the wordmark carries the name */
/* the box is taller than the letters — it also holds the live dot above the i
   and the y descender — so 27px yields ~18px of letters against the 22px mark */
.logo-word{height:27px;width:auto;display:block;flex:none}

.logo .dot{color:#ff4747;animation:pulseDot 1.6s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){.logo .dot{animation:none}}
.nav-links{display:flex;gap:28px;font-size:14.5px;color:var(--muted-2)}
.nav-links a:hover{color:var(--text)}
.nav-links a.active{color:var(--green);font-weight:600}
.nav-right{display:flex;align-items:center;gap:18px}
.nav-right .login{font-size:14.5px;color:var(--muted-2)}
.nav-right .login:hover{color:var(--text)}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--green);color:var(--ink);font-family:var(--head);
  font-weight:600;font-size:14.5px;padding:11px 20px;border-radius:11px;border:none;cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s}
.pill:hover{transform:translateY(-2px);background:#2fc3f0;box-shadow:0 10px 26px rgba(74,214,255,.28)}
.pill.lg{padding:14px 26px;font-size:16px}
.pill.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.pill.ghost:hover{border-color:var(--green);color:var(--green);background:transparent;box-shadow:none}
.pill.dark{background:#08080a;color:#fff}
.pill.dark:hover{background:#000}
.nav-cta{display:inline-flex;align-items:center;background:var(--green);color:var(--ink);font-family:var(--head);
  font-weight:700;font-size:14px;padding:10px 20px;border-radius:100px;border:none;cursor:pointer;
  transition:transform .16s,background .16s}
.nav-cta:hover{background:#2fc3f0;transform:translateY(-1px)}
/* animated hamburger → X */
.burger{display:none;position:relative;width:44px;height:44px;margin-right:-4px;padding:0;border:none;background:none;
  cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .16s cubic-bezier(.23,1,.32,1)}
.burger:active{transform:scale(.9)}
.burger i{position:absolute;top:50%;left:50%;width:20px;height:2px;margin:-1px 0 0 -10px;background:#fff;border-radius:2px;
  transition:background .18s ease}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:100%;height:2px;background:#fff;border-radius:2px;
  transition:transform .3s cubic-bezier(.23,1,.32,1)}
.burger i::before{top:-6px}
.burger i::after{top:6px}
header.nav.menu-open .burger i{background:transparent}
header.nav.menu-open .burger i::before{transform:translateY(6px) rotate(45deg)}
header.nav.menu-open .burger i::after{transform:translateY(-6px) rotate(-45deg)}
.nav-mob-cta{display:none}
@media (prefers-reduced-motion: reduce){
  .nav-links{transform:none!important;transition:opacity .18s ease,visibility .18s}
  .burger,.burger i,.burger i::before,.burger i::after{transition:background .18s ease}
  header.nav .nav-in,header.nav .logo,header.nav .nav-cart,header.nav .nav-right{transition:none}
}

/* ── page scaffold ── */
.page{padding-top:120px;padding-bottom:100px}
.blocks{display:flex;flex-direction:column;gap:100px;margin-top:100px}
.block{position:relative}
.sec-label{text-align:center;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:14px}
.sec-title{text-align:center;font-size:clamp(28px,3.4vw,36px);line-height:1.18;max-width:640px;margin:0 auto 52px}

/* ── cards (homepage) ── */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:28px;position:relative;overflow:hidden;
  transition:transform .25s ease, border-color .25s ease}
.card:hover{transform:translateY(-4px);border-color:#3a3a40}
.card .klabel{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:10px;font-weight:600}
.card h3{font-size:24px;letter-spacing:-.02em}
.green-card{background:
    radial-gradient(120% 130% at 18% 8%, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(135deg,#8ff0ff 0%,#4ad6ff 38%,#2fb3f0 78%,#5b8ff5 100%);
  color:var(--ink);border:none}
.green-card .klabel{color:rgba(11,11,12,.6)}
.purple-card{background:linear-gradient(150deg,#8b6bff 0%,#6a4bf0 50%,#c45ce0 110%);color:#fff;border:none}
.purple-card .klabel{color:rgba(255,255,255,.7)}
.white-card{background:#fff;color:var(--ink);border:none}
.white-card .klabel{color:#8a8a93}

/* ── PDP hero + grid ── */
.pdp-grid{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:20px;align-items:stretch}

/* ── PDP desktop layout ──
   .pdp-grid and .blocks exist ONLY on twitch.html/kick.html — nothing else in the
   site uses them — so these rules cannot leak into help/contact/track/legal, which
   share the rest of this file. (#faq DOES also exist on the homepage, hence the
   .blocks prefix on the FAQ rule below.) */
@media(min-width:961px){
  /* Sign in sits in .nav-right next to the buy CTA on desktop. The copy inside
     .nav-links exists only so it still appears in the burger drawer, where
     .nav-right's contents are hidden — so hide that copy here. */
  .nav-links a.only-mob{display:none}

  /* On desktop the cart is the LAST thing in the pill, and .nav-in's 10px of
     right padding is sized for the CTA — a pill whose own background stands in
     for the gap. A bare icon has no such background, so it ended up 16px from

  /* 176px sat between the closing CTA and the footer: 100px of main padding plus
     the footer's own 76px margin, with another 56px of footer padding inside
     that. The CTA is already a full-bleed card, so it needs no runway of its own
     — dropping main's share leaves 76px, matching the footer rhythm every other
     page uses. Scoped to .pdp (added to <main> on twitch/kick only) because
     main.page and footer are shared with help/contact/track/legal, and mobile
     already sits at a correct 64px. */
  main.page.pdp{padding-bottom:0}

  /* the bento's 4th card only filled column 2, leaving a visible empty cell at
     row 2 / column 3 — let it span the rest of the row */
  .blocks .gb>.gb-card:last-child{grid-column:2 / span 2}

  /* ── paired cards stay the same height ──
     #safe holds one row on the left against five on the right, and #faq holds a
     short support panel against a seven-item accordion. Letting the short one
     size to its content leaves the pair visibly lopsided; the fix is to keep the
     heights matched and give the slack somewhere deliberate to land INSIDE the
     short card, rather than pooling as a hole above its footer.
     (.safe-foot and .sup-cta already carry margin-top:auto, so the footer stays
     pinned to the bottom either way — only the middle changes.) */
  /* #safe asks for exactly ONE thing and refuses FIVE. Side by side that can only
     end badly: stretch the short card and you get a 219px hole, let it size
     itself and the pair is lopsided, centre the lone row and the hole just
     becomes symmetrical. All three were tried and all three looked wrong.
     So stop pairing them. Stacked, each card is a full-width band at its own
     natural height — no mismatch is possible — and the asymmetry turns into
     hierarchy: the one thing we ask, then the five we never will.
     Pure CSS; the markup is untouched, so mobile keeps its own stacking. */
  .blocks .safe-grid{grid-template-columns:1fr;gap:14px}
  .blocks .safe-card.ask .safe-row{font-size:14.5px;padding:14px 15px}
  /* the five refusals go across the band rather than down it, which keeps that
     card as shallow as the one above it */
  .blocks .safe-card:not(.ask) .safe-list{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
  .blocks .safe-card:not(.ask) .safe-row{padding:12px 13px;font-size:13px}
  .blocks .safe-card .safe-foot{padding-top:14px}
  /* .sup-chat is already flex:1 — a chat panel with room above the composer is
     what the mock is imitating, so the slack lands there correctly on its own */

  /* ── one content width for the whole page ──
     Every band on the PDP is 1168 wide (the hero grid, #safe, #stories, the
     guarantee bento, the FAQ row, the closing CTA) EXCEPT the two wizard cards,
     which were max-width:780 centred. That put two narrower, differently-inset
     boxes in the middle of an otherwise flush column, which is what read as the
     page changing width as you scroll. These selectors are (0,2,0) so they beat
     the (0,1,0) .wiz-card rule in each page's own <style>, which loads later. */
  .blocks .wiz-card{max-width:none;margin-left:0;margin-right:0;padding:30px}

  /* Widening alone would backfire: the three goal cards keep a 4/3 thumbnail, so
     at 370px per column they grow ~95px taller, and .wiz-stage is a shared grid
     cell sized by its TALLEST step — every short chip step would inherit that
     extra void. A wider thumbnail keeps step 1 inside the existing 280px stage. */
  .blocks .wiz-goals{gap:16px}
  .blocks .wiz-goal .wg-th{aspect-ratio:16/9}

  /* chips are flex-wrap, so across 1168px four of them strand a long gap on the
     right — an even four-up row fills the same width the goal cards do */
  .blocks .wiz-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-content:start}
  .blocks .wiz-chips .wchip{justify-content:center;text-align:center}

  /* Persistent buy bar. The order card is the only purchase control on the page
     and it scrolls away after the hero, leaving ~5000px with nothing to click.
     Making the card itself sticky is not an option: a sticky item is confined to
     its own grid area, so extending its travel means moving .blocks into the
     grid's left column — which narrows the content from 1168 to 688 and cramps
     every section. A bar costs no content width. */
  .buybar{position:fixed;left:0;right:0;bottom:0;z-index:60;
    display:flex;align-items:center;justify-content:center;gap:18px;
    padding:12px 24px;background:rgba(16,16,20,.92);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-top:1px solid var(--line);
    transform:translateY(105%);transition:transform .28s cubic-bezier(.22,1,.36,1)}
  .buybar.show{transform:none}
  .buybar .bb-t{font-size:14px;font-weight:600;color:var(--text)}
  .buybar .bb-t b{font-family:var(--head)}
  .buybar .bb-s{font-size:12.5px;color:var(--muted)}
  .buybar .pill{padding:11px 26px;font-size:15px}
}
@media(prefers-reduced-motion:reduce){.buybar{transition:none}}
/* the bar is a desktop affordance only — mobile already gets a full-width CTA
   directly under the hero, so a second fixed one would just eat the viewport */
@media(max-width:960px){.buybar{display:none}}
.pdp-left{display:flex;flex-direction:column;gap:16px}
.pdp-hero-box{position:relative;overflow:hidden;border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:14px}
.pdp-tag{align-self:flex-start;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  padding:5px 12px;border-radius:7px;color:rgba(255,255,255,.85);background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);display:inline-flex;align-items:center;gap:7px}
.pdp-tag .live-d{width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.8);animation:pulseDot 1.6s infinite}
.pdp-hero-box h1{font-size:clamp(28px,3vw,40px);letter-spacing:-.03em;line-height:1.08;color:#fff}
.pdp-hero-box h1 .g{color:var(--green)}
.pdp-hero-box .sub{font-size:14.5px;color:rgba(255,255,255,.82);line-height:1.6}

/* hero chips + trust row. Lived in twitch.html and kick.html as two
   near-identical page-local copies; the followers pages made that three,
   and a page that referenced .chip without carrying the copy rendered its
   icons at full size. Shared furniture belongs here. */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;position:relative;z-index:1}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:#fff;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);border-radius:8px;padding:7px 12px}
.chip svg{width:13px;height:13px;flex:none;opacity:.9}
/* mobile: the four stacked chip rows read as a text wall — collapse them
   into one auto-scrolling line (duplicated set, seamless loop) */
.chips-track{display:contents}
.chip.dup{display:none}
@media(max-width:640px){
  .chips{flex-wrap:nowrap;overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .chips-track{display:flex;gap:8px;width:max-content;animation:chipScroll 20s linear infinite}
  .chip{flex:none;white-space:nowrap}
  .chip.dup{display:inline-flex}
  @keyframes chipScroll{to{transform:translateX(calc(-50% - 4px))}}
}
@media (prefers-reduced-motion: reduce){.chips-track{animation:none}}
.trust-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:6px;color:rgba(255,255,255,.9);font-size:13px;font-weight:600;position:relative;z-index:1}
.trust-row span{display:inline-flex;align-items:center;gap:6px}


/* ── order widget ── */
.order-widget{background:var(--panel);border-radius:20px;overflow:hidden;position:sticky;top:88px;border:1px solid var(--line)}
.ow-body{padding:22px}
.ow-tag{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted);margin-bottom:10px}
.ow-head-row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px}
.ow-head-row h2{font-size:22px;font-weight:800;letter-spacing:-.03em;color:#fff}
.ow-from{font-size:13px;color:var(--muted)}
.ow-from b{color:var(--green);font-weight:800}
.svc-tabs{display:flex;gap:4px;margin-bottom:14px;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:4px}
.svc-tab{flex:1;padding:9px 6px;border-radius:9px;border:none;background:transparent;color:var(--muted-2);
  font-family:var(--head);font-weight:700;font-size:13px;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap}
.svc-tab:hover{color:var(--text)}
.svc-tab.on{background:var(--green);color:var(--ink)}
/* Package cards (igfollowers-style): prominent qty + unit label, big price +
   struck was-price, badge pill; the whole card is the radio (no dot). */
.pkg-list{display:flex;flex-direction:column;gap:8px;margin:2px 0 0}
.pkg{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 16px;border-radius:14px;background:var(--panel-2);border:1.5px solid var(--line);
  cursor:pointer;user-select:none;transition:border-color .15s,background .15s,transform .12s}
.pkg:hover{border-color:rgba(255,255,255,.24)}
.pkg:active{transform:scale(.995)}
.pkg:focus-visible{outline:none;border-color:rgba(255,255,255,.45)}
.pkg.sel{border-color:var(--green);background:rgba(74,214,255,.07)}
.pkg-q{display:flex;flex-direction:column;gap:5px;min-width:0}
.pkg-q b{font-family:var(--head);font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1;color:#fff}
.pkg-q span{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.pkg-pr{flex-shrink:0;text-align:right;display:flex;flex-direction:column;gap:3px}
.pkg-p{font-family:var(--head);font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.pkg.sel .pkg-p{color:var(--green)}
.pkg-w{font-size:11px;color:var(--muted);text-decoration:line-through}
.pkg-badge{position:absolute;top:-8px;left:14px;background:var(--green);color:var(--ink);
  font-size:9px;font-weight:800;letter-spacing:.06em;padding:3px 9px;border-radius:100px;text-transform:uppercase}
.sum-row{display:flex;align-items:center;justify-content:space-between;
  background:var(--panel-2);border:1.5px solid var(--line);border-radius:13px;
  padding:14px 16px;margin-top:14px;margin-bottom:14px}
.sum-qty{font-size:14.5px;font-weight:700;color:#fff}
.sum-meta{font-size:11.5px;color:var(--muted);margin-top:2px}
.sum-price{font-size:28px;font-weight:800;letter-spacing:-.03em;color:var(--green);text-align:right}
.sum-ppf{font-size:11px;color:var(--muted);text-align:right;margin-top:1px}
.inp-lbl{font-size:12.5px;font-weight:600;color:var(--muted-2);margin-bottom:7px}
.inp-wrap{position:relative;margin-bottom:14px}
.inp-at{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:15px;font-weight:700;color:var(--muted)}
.inp{width:100%;background:var(--panel-2);border-radius:12px;padding:13px 14px 13px 28px;
  font-size:15px;font-family:inherit;color:var(--text);outline:none;border:none;transition:box-shadow .15s}
.inp:focus{box-shadow:0 0 0 2px rgba(255,255,255,.18)}
.inp::placeholder{color:var(--muted)}
/* live handle profile preview */
.uv{margin:-4px 0 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);padding:12px 14px;animation:uvIn .28s ease}
@keyframes uvIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.uv-row{display:flex;align-items:center;gap:11px}
.uv-av{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--panel);box-shadow:0 0 0 2px var(--line)}
.uv-av-fallback{display:grid;place-items:center;font-size:17px;font-weight:800;color:var(--ink);background:var(--green);box-shadow:none}
.uv-id{flex:1;min-width:0}
.uv-name{display:flex;align-items:center;gap:5px;font-size:14px;font-weight:700;color:var(--text)}
.uv-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uv-tick{width:14px;height:14px;flex:0 0 auto}
.uv-handle{font-size:12px;color:var(--muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uv-stats{display:flex;gap:14px;margin-top:11px;padding-top:11px;border-top:1px solid var(--line)}
.uv-stat{text-align:center;flex:1}
.uv-stat-n{font-size:15px;font-weight:800;color:var(--text);letter-spacing:-.02em}
.uv-stat-l{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
.uv-ok{display:inline-flex;align-items:center;gap:5px;margin-top:11px;font-size:11.5px;font-weight:700;color:var(--green)}
.uv-ok svg{width:13px;height:13px}
.uv-msg{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted-2);line-height:1.4}
.uv-msg b{color:var(--text)}
.uv-msg.warn{color:#ffce3d}
.uv-spin{width:15px;height:15px;border:2px solid var(--line);border-top-color:var(--green);border-radius:50%;animation:uvSpin .7s linear infinite;flex:0 0 auto}
@keyframes uvSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.uv{animation:none}.uv-spin{animation:none}}

/* ═══════════════════════════════════════════════════════════════
   Order modal (target picker) — .om-* (see assets/order-modal.js)
   ═══════════════════════════════════════════════════════════════ */
.om-overlay{position:fixed;inset:0;z-index:4000;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(6,6,9,.66);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.om-overlay.open{display:flex;animation:om-fade .2s ease}
.om-overlay.open .om-dialog{animation:om-pop .26s cubic-bezier(.23,1,.32,1)}
@keyframes om-fade{from{opacity:0}to{opacity:1}}
@keyframes om-pop{from{opacity:0;transform:scale(.96) translateY(6px)}to{opacity:1;transform:none}}
.om-dialog{position:relative;width:100%;max-width:460px;max-height:90vh;overflow:auto;background:#141418;color:#fff;
  border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:30px 26px 26px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.om-close{position:absolute;top:12px;right:15px;background:transparent;border:none;color:rgba(255,255,255,.6);font-size:26px;line-height:1;cursor:pointer}
.om-close:hover{color:#fff}
.om-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:rgba(255,255,255,.45)}
.om-sum{font-family:var(--head);font-size:22px;font-weight:800;letter-spacing:-.02em;margin:4px 0 18px}
.om-label{display:block;font-size:13px;font-weight:600;color:rgba(255,255,255,.8);margin-bottom:8px}
.om-field{display:flex;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:0 6px 0 12px;overflow:hidden;transition:border-color .15s}
.om-field:focus-within{border-color:var(--green)}
.om-prefix{color:rgba(255,255,255,.6);font-family:ui-monospace,Menlo,monospace;font-size:14px;white-space:nowrap}
.om-field input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:#fff;font-size:16px;font-family:ui-monospace,Menlo,monospace;padding:13px 8px}
.om-err{color:#fca5a5;font-size:13px;min-height:18px;margin:7px 2px 0}
.om-next{width:100%;margin-top:12px;background:var(--green);color:var(--ink);border:none;border-radius:12px;padding:15px;font-weight:700;font-size:15px;font-family:var(--head);cursor:pointer;transition:transform .15s,opacity .15s,background .15s}
.om-next:hover:not(:disabled){transform:translateY(-1px);background:#2fc3f0}
.om-next:active:not(:disabled){transform:scale(.99)}
.om-next:disabled{opacity:.4;cursor:not-allowed}
.om-safe{text-align:center;font-size:12px;color:rgba(255,255,255,.45);margin-top:14px}
.om-back{background:transparent;border:none;color:rgba(255,255,255,.6);font-size:13px;font-weight:600;cursor:pointer;padding:0;margin-bottom:10px}
.om-back:hover{color:#fff}
.om-hint{font-size:13px;color:rgba(255,255,255,.6);margin-bottom:14px;line-height:1.45}
.om-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;min-height:120px}
@media (min-width:720px){
  .om-dialog.om-wide{max-width:820px}
  .om-dialog.om-wide .om-grid{grid-template-columns:repeat(4,1fr);gap:10px}
}
.om-loading,.om-empty{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:10px;text-align:center;color:rgba(255,255,255,.6);font-size:14px;padding:26px 10px;line-height:1.5}
.om-spin{width:18px;height:18px;border:2px solid rgba(255,255,255,.25);border-top-color:var(--green);border-radius:50%;animation:om-spin .8s linear infinite;flex-shrink:0}
@keyframes om-spin{to{transform:rotate(360deg)}}
.om-post{position:relative;aspect-ratio:1;padding:0;border:2px solid transparent;border-radius:12px;overflow:hidden;cursor:pointer;background:#1c1c22}
.om-post img{width:100%;height:100%;object-fit:cover;display:block}
.om-post.om-post-noimg{background:linear-gradient(135deg,#26262e,#1a1a1f)}
.om-post-meta{position:absolute;left:0;right:0;bottom:0;padding:4px 6px;font-size:10.5px;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.78));text-align:left}
.om-post-check{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;background:var(--green);color:var(--ink);display:none;align-items:center;justify-content:center}
.om-post-check svg{width:13px;height:13px}
.om-post.sel{border-color:var(--green)}
.om-post.sel .om-post-check{display:flex}
.om-split{margin-top:12px;padding:11px 13px;border-radius:11px;background:rgba(74,214,255,.1);border:1px solid rgba(74,214,255,.3);color:rgba(255,255,255,.9);font-size:13px;line-height:1.45;text-align:center}
.om-split b{color:var(--green);font-weight:800}
.om-split-cap{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.7)}
.om-split-cap b{color:#fff}
/* live channel preview */
#om-preview{margin-top:12px}
.om-pv{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.05);border:1px solid rgba(74,214,255,.4);border-radius:12px;padding:10px 12px}
.om-pv-msg{border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.7);font-size:13px;gap:9px}
.om-pv-bad{border-color:rgba(248,113,113,.4);color:#fca5a5}
.om-pv-bad b{color:#fff}
.om-pv-av{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid rgba(74,214,255,.45)}
.om-av-fallback{display:inline-flex;align-items:center;justify-content:center;background:var(--green);color:var(--ink);font-weight:800;font-size:15px}
.om-av-broken{visibility:hidden}
.om-pv-id{flex:1;min-width:0}
.om-pv-name{font-weight:700;font-size:14.5px;color:#fff;display:flex;align-items:center;gap:5px}
.om-pv-v{color:#3897f0}
.om-pv-stat{font-size:12.5px;color:rgba(255,255,255,.6);margin-top:1px}
.om-pv-ok{width:22px;height:22px;border-radius:50%;background:var(--green);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0}
.om-pv-msg .om-pv-ok,.om-pv-bad .om-pv-ok{display:none}
/* account avatar header above the post picker */
.om-acct{display:flex;align-items:center;gap:9px;margin-bottom:12px;font-size:13px;color:rgba(255,255,255,.75)}
.om-acct-av{width:30px;height:30px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1.5px solid rgba(255,255,255,.2)}
.om-acct-tx b{color:#fff}
/* placeholder confirmation screen */
.om-done{text-align:center;padding:6px 4px 2px}
.om-done-ic{width:56px;height:56px;margin:4px auto 16px;border-radius:50%;background:rgba(74,214,255,.14);border:1px solid rgba(74,214,255,.4);color:var(--green);display:flex;align-items:center;justify-content:center}
.om-done-ic svg{width:26px;height:26px}
.om-done-h{font-family:var(--head);font-size:22px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
.om-done-p{font-size:14px;color:rgba(255,255,255,.72);line-height:1.55;max-width:340px;margin:0 auto}
.om-done-p b{color:#fff;font-weight:700}
.om-done .om-next{margin-top:20px}
@media (prefers-reduced-motion: reduce){
  .om-overlay.open,.om-overlay.open .om-dialog{animation:om-fade .18s ease}
  .om-spin{animation:none}
}


/* validation + placeholder checkout feedback */
@keyframes shakeX{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.inp-wrap.err{animation:shakeX .4s ease}
.inp-wrap.err .inp{box-shadow:0 0 0 2px rgba(255,95,87,.7)}
.buy-btn{width:100%;padding:18px;border-radius:14px;background:var(--green);color:var(--ink);
  font-family:var(--head);font-weight:800;font-size:17px;letter-spacing:-.01em;border:none;cursor:pointer;
  box-shadow:0 8px 24px rgba(74,214,255,.3);
  transition:background .16s,transform .16s,box-shadow .16s;margin-bottom:12px}
.buy-btn:hover{background:#2fc3f0;transform:translateY(-2px);box-shadow:0 14px 34px rgba(74,214,255,.42)}
.buy-btn:active{transform:scale(.99)}
.buy-btn.done{background:#fff;color:#082b3a;pointer-events:none;transform:none;box-shadow:0 10px 28px rgba(255,255,255,.14)}
.pay-strip{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin-bottom:12px}
/* real brand badges are self-contained cards — no white chip behind them */
.pay-chip{display:flex;align-items:center;justify-content:center}
.pay-chip img{height:24px;width:auto;display:block}
.ow-footer{font-size:11.5px;color:var(--muted);text-align:center;line-height:1.5}

/* ── feature cards (step-row treatment) ── */
.feat-section{margin-top:20px}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fc{position:relative;display:flex;flex-direction:column;border-radius:20px;padding:24px;
  overflow:hidden;min-height:280px;transition:transform .22s,box-shadow .22s}
.fc:hover{transform:translateY(-4px);box-shadow:0 26px 50px -18px rgba(0,0,0,.5)}
.fc.fc1{background:linear-gradient(150deg,#8ff0ff 0%,#4ad6ff 56%,#2fa3e8 100%);color:#082b3a}
.fc.fc2{background:linear-gradient(150deg,#8b6bff 0%,#6a4bf0 55%,#c45ce0 110%);color:#fff}
.fc.fc3{background:linear-gradient(150deg,#ff8fb1 0%,#ff4d6e 52%,#e85ad0 110%);color:#fff}
.fc-tag{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;opacity:.65;margin-bottom:8px}
.fc h3{font-size:19px;font-weight:700;line-height:1.2}
.fc h3 .ac{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.fc p{font-size:13.5px;margin-top:8px;line-height:1.5;opacity:.82}
.fc-img{margin-top:auto;padding-top:18px;border-radius:14px;overflow:hidden;height:120px;position:relative}
.fc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.fc:hover .fc-img img{transform:scale(1.05)}
.fc-pill{position:absolute;left:10px;bottom:10px;z-index:2;display:inline-flex;align-items:center;gap:5px;
  background:rgba(8,8,10,.55);backdrop-filter:blur(6px);color:#fff;font-size:11px;font-weight:700;
  padding:4px 10px;border-radius:100px}
.fc-pill .d{width:5px;height:5px;border-radius:50%;background:#fff}

/* ── how it works (homepage step cards) ── */
.steps-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step-row{position:relative;display:flex;flex-direction:column;border-radius:20px;padding:24px;
  overflow:hidden;border:none;min-height:300px;transition:transform .22s ease,box-shadow .22s ease}
.step-row:hover{transform:translateY(-4px);box-shadow:0 26px 50px -18px rgba(0,0,0,.5)}
.step-row.s1{background:linear-gradient(150deg,#8ff0ff 0%,#4ad6ff 56%,#2fa3e8 100%);color:#082b3a}
.step-row.s2{background:linear-gradient(150deg,#8b6bff 0%,#6a4bf0 55%,#c45ce0 110%);color:#fff}
.step-row.s3{background:linear-gradient(150deg,#ff8fb1 0%,#ff4d6e 52%,#e85ad0 110%);color:#fff}
.step-txt{min-width:0;display:flex;flex-direction:column}
.step-tag{display:flex;align-items:baseline;gap:9px;margin-bottom:10px}
.step-n{font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1;font-family:var(--head)}
.step-tag .lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;opacity:.65}
.step-row h3{font-size:20px;font-weight:700;line-height:1.18}
.step-row h3 .ac{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.step-row p{font-size:13.5px;margin-top:8px;line-height:1.5;opacity:.82}
/* Fixed height, not flex:1 — the <img> is height:100% of an auto-height box, so
   without this the photo's own aspect ratio sets the card height (345px wide
   gave a 258px image and a 456px card). Slack goes to .step-txt instead, which
   keeps all three photos on the same baseline whatever the copy length. */
.step-img{margin-top:16px;flex:0 0 auto;height:168px;border-radius:14px;overflow:hidden;position:relative}
.steps-list .step-txt{flex:1 1 auto}
.step-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.step-row:hover .step-img img{transform:scale(1.05)}
.step-img .ipill{position:absolute;left:10px;bottom:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;
  background:rgba(8,8,10,.55);backdrop-filter:blur(6px);color:#fff;font-size:11px;font-weight:700;padding:5px 10px;border-radius:100px;
  /* one-line labels — never let them wrap or spill past their own image */
  white-space:nowrap;max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis}
.step-img .ipill .d{width:6px;height:6px;border-radius:50%;flex:0 0 auto;background:#fff}

/* ── guarantees (homepage cards) ── */
.guar-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.guar{position:relative;display:flex;flex-direction:column;border-radius:20px;padding:24px;
  min-height:188px;overflow:hidden;border:1px solid var(--line);background:var(--panel);color:var(--text);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.guar:hover{transform:translateY(-3px);box-shadow:0 22px 44px -18px rgba(0,0,0,.55)}
.guar.green-card{border:none;color:var(--ink);
  background:radial-gradient(120% 130% at 18% 8%, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(135deg,#8ff0ff 0%,#4ad6ff 38%,#2fb3f0 78%,#5b8ff5 100%)}
.guar.white-card{border:none;color:var(--ink);background:#fff}
.guar.green-card:hover,.guar.white-card:hover{box-shadow:0 24px 48px -16px rgba(0,0,0,.4)}
.gtag{align-self:flex-start;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  padding:5px 12px;border-radius:100px;border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.7)}
.green-card .gtag,.white-card .gtag{border-color:rgba(8,8,12,.2);color:rgba(8,8,12,.62)}
.guar h3{font-size:19px;font-weight:700;letter-spacing:-.01em;margin-top:14px;line-height:1.15}
.guar h3 .ac{color:var(--green)}
.green-card h3 .ac,.white-card h3 .ac{color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.gviz{margin-top:auto;padding-top:18px}
.grow-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:11px;padding:10px 12px}
.grow-row .gl{font-size:13px;font-weight:700}
.grow-row .gp{font-size:11px;font-weight:800;color:#08080a;background:var(--green);padding:4px 9px;border-radius:100px;white-space:nowrap}
.gbar-top{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;margin-bottom:8px}
.gbar-top .ok{display:inline-flex;align-items:center;gap:5px}
.gbar{height:8px;border-radius:100px;background:rgba(8,8,12,.18);overflow:hidden}
.gbar i{display:block;height:100%;width:100%;border-radius:100px;background:#08080a}
.glog{display:flex;flex-direction:column;gap:7px}
.glog .f{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;padding:9px 11px;border-radius:9px}
.glog .f.on{background:#fff;border:1.5px solid #1db954;color:#15151a}
.glog .f.off{background:#f1f1f4;border:1px solid #e6e6ea;color:#9a9aa2}
.glog .f .tag{margin-left:auto;font-size:10px;font-weight:800;color:#1db954;background:rgba(29,185,84,.12);padding:2px 7px;border-radius:100px}
.pay-logos{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.pay-logos .pl{display:inline-flex;align-items:center;justify-content:center}
.pay-logos .pl img{height:30px;width:auto;display:block}
.pay-secure{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:11.5px;font-weight:500;color:var(--muted)}
.pay-secure svg{width:13px;height:13px;flex:0 0 auto}
.gava{display:flex;align-items:center;gap:12px}
.gava .stk{display:flex}
.gava .stk img{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid var(--panel);margin-left:-11px}
.gava .stk img:first-child{margin-left:0}
.gava .lab{font-size:12.5px;font-weight:600;color:var(--muted-2);display:flex;align-items:center;gap:6px}
.gava .lab .d{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 7px var(--green);animation:pulseDot 1.3s infinite}
.gchat{display:flex;flex-direction:column;gap:9px}
.gchat .bub{align-self:flex-start;background:#f1f1f4;color:#15151a;font-size:12.5px;font-weight:600;
  padding:9px 13px;border-radius:13px 13px 13px 4px;max-width:92%}
.gchat .on{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#15803d}
.gchat .on .d{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 7px #22c55e;animation:pulseDot 1.3s infinite}

/* ── reviews (homepage cards) ── */
.rev-head{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin:-26px auto 30px;
  color:var(--muted-2);font-size:14.5px;font-weight:500}
.rev-head .score{display:inline-flex;align-items:center;gap:9px;font-weight:600;color:var(--text)}
.rev-head .stars{display:flex;gap:2px;color:#ffce3d;font-size:16px}
.rev-head .sep{width:1px;height:18px;background:var(--line)}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}
.rev{display:flex;flex-direction:column;gap:0;position:relative;overflow:hidden;padding:22px;height:100%}
.rev .rev-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.rev .stars{display:flex;gap:2px;color:#ffce3d;font-size:14px}
.rev .plat{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);background:var(--panel-2);padding:4px 10px;border-radius:100px}
.rev .rev-stat{margin-left:auto;font-size:11px;font-weight:800;color:#08080a;background:var(--green);
  padding:3px 9px;border-radius:100px;white-space:nowrap}
.rev .quote{color:var(--text);font-size:13.5px;line-height:1.58;flex:1;position:relative;z-index:1}
.rev .who{display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.rev .who>div{flex:1;min-width:0}
.rev .who .ava{width:38px;height:38px;border-radius:50%;overflow:hidden;flex:0 0 auto;box-shadow:0 0 0 2px var(--line)}
.rev .who .ava img{width:100%;height:100%;object-fit:cover;display:block}
.rev .who .nm{font-weight:700;font-size:14px;line-height:1.2;white-space:nowrap;display:flex;align-items:center;gap:5px}
.rev .who .nm .vck{width:14px;height:14px;border-radius:50%;background:var(--green);color:#08080a;
  display:inline-grid;place-items:center;font-size:9px;font-weight:900;flex:0 0 auto}
.rev .who .hd{color:var(--muted);font-size:12.5px;margin-top:3px}

/* ── faq (homepage accordion + support aside) ── */
.faq-wrap{display:grid;grid-template-columns:1.25fr 0.85fr;gap:26px;align-items:stretch}
.faq-list{display:flex;flex-direction:column;gap:12px;justify-content:space-between}
/* the footnote under the FAQ. Was page-local in twitch.html AND kick.html;
   the followers pages made it four users of a class only two of them
   carried the styles for. */
.faq-help{margin-top:14px;font-size:13px;color:var(--muted);text-align:center}
.faq-help a{color:var(--green);font-weight:600}
.faq-help a:hover{text-decoration:underline}
.faq{display:flex;flex-direction:column}
.faq[open] .fa{animation:faqReveal .28s ease}
@keyframes faqReveal{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.faq[open] .fa{animation:none}}
.faq-aside{background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column}
.faq-aside .ph{flex:1;min-height:150px;position:relative}
.faq-aside .ph img{width:100%;height:100%;object-fit:cover;display:block}
.faq-aside .ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--panel),rgba(21,21,23,.1) 60%)}
.faq-aside .ph .live{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;
  background:rgba(8,8,10,.6);backdrop-filter:blur(6px);color:#fff;font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:100px}
.faq-aside .ph .live .d{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 7px var(--green);animation:pulseDot 1.3s infinite}
.faq-aside .bd{padding:4px 20px 22px}
.faq-aside h4{font-size:18px;font-weight:700;color:var(--text)}
.faq-aside p{font-size:13.5px;color:var(--muted-2);margin:8px 0 16px;line-height:1.55}
.faq-aside .pill{width:100%;justify-content:center}
.faq{padding:0;overflow:hidden;transition:border-color .2s ease,background .2s ease}
.faq[open]{border-color:rgba(74,214,255,.3);background:var(--panel-2)}
.faq summary{list-style:none;cursor:pointer;padding:22px 24px;font-family:var(--head);font-weight:600;
  font-size:17px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq .qi{flex:0 0 auto;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  background:rgba(74,214,255,.12);color:var(--green);font-size:18px;font-weight:700;line-height:1;
  transition:transform .25s ease,background .2s ease}
.faq[open] .qi{transform:rotate(45deg);background:var(--green);color:#08080a}
.faq .fa{padding:0 24px 24px;color:var(--muted-2);font-size:14.5px;line-height:1.6}

/* ── CTA band (homepage, minus email form) ── */
.cta-card{width:100%;position:relative;overflow:hidden;border-radius:28px;padding:52px 36px;
  background:linear-gradient(150deg,#18181c 0%,#121214 55%,#0e0e11 100%);border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;text-align:center}
.cta-card::before{content:"";position:absolute;width:560px;height:560px;border-radius:50%;left:50%;top:-340px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(circle, rgba(74,214,255,.20), transparent 62%)}
.cta-card::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:88px 88px;
  -webkit-mask-image:radial-gradient(120% 120% at 50% 0%, #000, transparent 62%);
  mask-image:radial-gradient(120% 120% at 50% 0%, #000, transparent 62%)}
.cta-badge{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--green);
  background:rgba(74,214,255,.1);border:1px solid rgba(74,214,255,.28);padding:6px 14px;border-radius:100px}
.cta-badge .d{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px rgba(74,214,255,.9);animation:pulseDot 1.4s infinite}
.cta-card h2{position:relative;z-index:1;font-size:clamp(28px,3.4vw,40px);color:#fff;line-height:1.08;margin-top:18px}
.cta-card h2 .g{color:var(--green)}
.cta-card .lead{position:relative;z-index:1;color:var(--muted-2);font-size:15px;margin-top:14px;max-width:460px;line-height:1.55}
.cta-actions{position:relative;z-index:1;margin-top:28px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.cta-proof{position:relative;z-index:1;margin-top:26px;display:flex;align-items:center;justify-content:center;gap:13px;flex-wrap:wrap}
.cta-proof .stack{display:flex}
.cta-proof .stack img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid #16161a;margin-left:-12px}
.cta-proof .stack img:first-child{margin-left:0}
.cta-proof .pt{font-size:13.5px;color:var(--muted-2);font-weight:500}
.cta-proof .pt b{color:#fff;font-weight:700}
.cta-proof .pt .star{color:#ffce3d}

/* ── footer (homepage) ── */
/* solid panel so the page visibly ends — sits above the fixed grid backdrop.
   NOTE: 5 children (brand + 4 link columns) need 5 tracks; the old 4-track
   grid wrapped "Legal" onto a row of its own. */
footer{position:relative;z-index:1;background:#0f0f13;border-top:1px solid #23232b;
  margin-top:76px;padding:56px 0 22px}
.foot-grid{display:grid;grid-template-columns:1.7fr repeat(4,1fr);gap:40px 28px}
.foot-grid .about{color:var(--muted);font-size:14px;line-height:1.6;max-width:290px;margin-top:14px}
.foot-pay{display:flex;flex-wrap:wrap;gap:6px;margin-top:22px}
.foot-pay img{height:26px;width:auto;display:block}
.fcol h5{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  color:var(--muted);margin-bottom:16px}
/* link groups are <details>; on wide screens they're forced open and inert */
.fcol summary{list-style:none;cursor:default;pointer-events:none}
.fcol summary::-webkit-details-marker{display:none}
.fcol summary::marker{content:""}
.fcol summary::after{content:none}
.fcol a{display:block;font-size:14px;color:var(--muted-2);margin-bottom:11px;
  transition:color .16s ease}
.fcol a:hover{color:var(--text)}
.foot-bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;
  margin-top:46px;padding-top:20px;border-top:1px solid #1e1e26;font-size:12.5px;color:var(--muted)}
.socials{display:flex;gap:10px}
.socials a{width:34px;height:34px;border-radius:9px;background:var(--panel);border:1px solid var(--line);display:grid;place-items:center}
.socials a:hover{border-color:var(--green);color:var(--green)}

/* ── scroll reveal (homepage system) ── */
.reveal{opacity:0;transform:translateY(34px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform}
.reveal[data-anim="left"]{transform:translate(46px,12px)}
.reveal[data-anim="right"]{transform:translate(-46px,12px)}
.reveal[data-anim="zoom"]{transform:scale(.92)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important;transform:none !important;transition:none !important}
}

/* ── responsive ── */
/* zoom only once the zoomed layout still has ≥960 effective px (1056/1.1≈960) */
@media(min-width:1057px){body{zoom:1.1}}
@media(max-width:960px){
  .nav-right .login,.nav-right .pill,.nav-right .nav-cta{display:none}
  .burger{display:block}

  /* auto-collapsing header: shrinks to a circle showing just the menu
     button on scroll-down; expands back on scroll-up or tap. Pin the pill
     to the right so the circle lands where the burger already is. The pill
     shrinks to a 60px circle (matches its own height, so no height change);
     logo + cart collapse to 0 width and fade; and the burger is ABSOLUTELY
     CENTRED in the circle so anything else in .nav-right (the product-page
     cart button) can't push it off-centre — that was the product-page bug. */
  header.nav{justify-content:flex-end}
  header.nav .nav-in{margin:0;
    transition:max-width .34s cubic-bezier(.22,1,.36,1),background .3s ease,box-shadow .3s ease}
  header.nav.collapsed .nav-in{max-width:60px;padding:0}
  header.nav .logo,header.nav .nav-cart{overflow:hidden;min-width:0;
    transition:max-width .3s cubic-bezier(.22,1,.36,1),opacity .2s ease}
  header.nav .logo{max-width:200px}
  header.nav .nav-cart{max-width:60px}
  /* the collapse animation needs overflow:hidden, so tuck the count badge
     fully inside the button's tap padding instead of overhanging the corner */
  header.nav .nav-cart .cart-count{top:0;right:0}
  header.nav.collapsed .logo,header.nav.collapsed .nav-cart{max-width:0;opacity:0;padding:0;margin:0;pointer-events:none}
  header.nav.collapsed .burger{position:absolute;inset:0;margin:auto}

  /* mobile dropdown menu — scales in from the burger (origin-aware) */
  .nav-links{position:absolute;top:calc(100% + 12px);left:0;right:0;z-index:5;
    flex-direction:column;align-items:stretch;gap:4px;
    padding:10px;background:#161619;border:1px solid rgba(255,255,255,.09);border-radius:22px;
    box-shadow:0 26px 64px -14px rgba(0,0,0,.75);
    opacity:0;transform:translateY(-10px) scale(.97);transform-origin:top right;
    visibility:hidden;pointer-events:none;
    transition:opacity .22s cubic-bezier(.23,1,.32,1),transform .26s cubic-bezier(.23,1,.32,1),visibility .26s}
  header.nav.menu-open .nav-links{opacity:1;transform:none;visibility:visible;pointer-events:auto}
  .nav-links a{display:flex;align-items:center;min-height:48px;padding:12px 15px;border-radius:13px;
    font-size:16px;font-weight:600;color:var(--text);transition:background .18s ease,color .18s ease}
  .nav-links a:active{background:rgba(255,255,255,.06)}
  .nav-links a.active{color:var(--green);background:rgba(74,214,255,.09)}
  .nav-links a.nav-mob-cta{display:flex;justify-content:center;position:relative;margin-top:9px;
    background:var(--green);color:var(--ink);font-family:var(--head);font-weight:700}
  .nav-links a.nav-mob-cta::before{content:"";position:absolute;left:6px;right:6px;top:-6px;height:1px;background:rgba(255,255,255,.09)}
  .nav-links a.nav-mob-cta:active{background:#2fc3f0}

  /* dim scrim behind the pill while the menu is open */
  header.nav::after{content:"";position:fixed;inset:0;z-index:-1;background:rgba(6,6,9,.55);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    opacity:0;pointer-events:none;transition:opacity .26s ease}
  header.nav.menu-open::after{opacity:1;pointer-events:auto}

  .pdp-grid{grid-template-columns:1fr;gap:24px;align-items:start}
  .order-widget{position:static}
  .blocks{gap:72px;margin-top:72px}
  .steps-list{grid-template-columns:1fr}
  .step-row{min-height:0}
  .guar-grid{grid-template-columns:1fr 1fr}
  .rev-grid{grid-template-columns:1fr 1fr}
  .faq-wrap{grid-template-columns:1fr;gap:16px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  /* 100px of section padding + the footer's own margin left ~160px of
     dead space between the last CTA and the footer on phones */
  .page{padding-top:100px;padding-bottom:30px}
  .feat-grid{grid-template-columns:1fr}
  .fc{min-height:auto}
  .fc-img{height:220px}
  .pdp-hero-box h1{font-size:28px}
  .pdp-hero-box .sub{font-size:14px}
  .pkg-q b{font-size:19px}
  .pkg-p{font-size:18px}
  .guar-grid,.rev-grid,.foot-grid{grid-template-columns:1fr}
  .rev-head{margin-bottom:34px}
  .cta-card{padding:34px 20px}
  .cta-proof .pt{font-size:12.5px}
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT PAGE SECTIONS (v2) — shared by all product pages.
   Per page inline: hero gradient + profile-mockup card only.
   ═══════════════════════════════════════════════════════════════ */

/* hero extras */
.pdp-hero-box .wm{position:absolute;right:-26px;bottom:-30px;width:170px;height:170px;opacity:.14;pointer-events:none;color:#fff}
.pdp-hero-box .wm svg{width:100%;height:100%}
.hb-stats{display:flex;gap:9px;flex-wrap:wrap;margin-top:4px;position:relative;z-index:1}
.hb-stat{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:7px 13px;
  font-size:12px;font-weight:700;color:#fff}
.hb-stat .st{color:#ffce3d}

/* shared photo-tile fill technique (used by every mockup grid) */
.igt{position:relative;overflow:hidden;min-height:0}
.igt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* live orders ticker */
.ticker{position:relative;margin-top:20px;padding:16px 0;display:flex;flex-direction:column;gap:10px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:clamp(36px,9vw,110px);z-index:2;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(to right,var(--bg),transparent)}
.ticker::after{right:0;background:linear-gradient(to left,var(--bg),transparent)}
.tk-row{display:flex;width:max-content;animation:tkScroll 44s linear infinite}
.tk-row.tk-rev{animation-direction:reverse;animation-duration:52s}
.ticker:hover .tk-row{animation-play-state:paused}
@keyframes tkScroll{to{transform:translateX(-50%)}}
.tk{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;background:var(--panel);margin-right:10px;
  border:1px solid var(--line);border-radius:100px;padding:8px 15px 8px 9px;font-size:12.5px;white-space:nowrap}
.tk .ti{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-size:9.5px;font-weight:800;color:#fff;flex:0 0 auto}
.tk b{font-weight:700;color:var(--text)}
.tk .q{color:var(--muted-2)}
.tk .ago{color:var(--green);font-weight:700;font-size:11.5px}
@media (prefers-reduced-motion: reduce){.tk-row{animation:none}}

/* how it works — cards with working UI mockups */
.hiw{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hiw-card{position:relative;display:flex;flex-direction:column;border-radius:20px;padding:24px;
  overflow:hidden;min-height:330px;transition:transform .25s ease,box-shadow .25s ease,outline-color .25s ease;
  outline:2px solid transparent}
.hiw-card:hover{transform:translateY(-4px);box-shadow:0 26px 50px -18px rgba(0,0,0,.5)}
.hiw-card.active{outline-color:rgba(255,255,255,.4)}
.hiw-card.s1{background:linear-gradient(150deg,#8ff0ff 0%,#4ad6ff 56%,#2fa3e8 100%);color:#082b3a}
.hiw-card.s2{background:linear-gradient(150deg,#8b6bff 0%,#6a4bf0 55%,#c45ce0 110%);color:#fff}
.hiw-card.s3{background:linear-gradient(150deg,#ff8fb1 0%,#ff4d6e 52%,#e85ad0 110%);color:#fff}
.hiw-tag{display:flex;align-items:baseline;gap:9px;margin-bottom:10px}
.hiw-n{font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1;font-family:var(--head)}
.hiw-tag .lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;opacity:.65}
.hiw-card h3{font-size:20px;font-weight:700;line-height:1.18}
.hiw-card h3 .ac{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.hiw-card p{font-size:13.5px;margin-top:8px;line-height:1.5;opacity:.85}
.hiw-viz{margin-top:auto;padding-top:18px}
.hiw-prog{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(8,8,10,.14)}
.s2 .hiw-prog,.s3 .hiw-prog{background:rgba(255,255,255,.18)}
.hiw-prog i{display:block;height:100%;width:0;background:rgba(8,8,10,.55)}
.s2 .hiw-prog i,.s3 .hiw-prog i{background:rgba(255,255,255,.85)}
.hiw-card.active .hiw-prog i{animation:hiwFill var(--cycle,4.2s) linear forwards}
@keyframes hiwFill{to{width:100%}}
@media (prefers-reduced-motion: reduce){.hiw-card.active .hiw-prog i{animation:none;width:100%}}
.m-pkg{display:flex;flex-direction:column;gap:7px}
.m-pkg .row{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:12.5px;font-weight:700;padding:10px 12px;border-radius:10px;
  background:rgba(8,8,10,.14);color:rgba(8,43,58,.75)}
.m-pkg .row.sel{background:#fff;color:#082b3a;box-shadow:0 10px 24px -10px rgba(6,40,55,.45)}
.m-pkg .row .ck{width:17px;height:17px;border-radius:50%;background:#082b3a;display:grid;place-items:center;flex:0 0 auto}
.m-pkg .row .ck svg{width:9px;height:9px}
.m-pkg .row .pr{margin-left:auto;font-weight:800}
.m-inp{display:flex;align-items:center;background:#fff;border-radius:12px;
  padding:13px 15px;font-size:15px;font-weight:700;color:#1c1030}
.m-inp .at{color:#7b5cff;margin-right:1px}
.m-inp .cur{width:2px;height:18px;background:#7b5cff;margin-left:2px;border-radius:2px;
  animation:blink 1.05s steps(1) infinite}
.m-note{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
  color:rgba(255,255,255,.8);margin-top:10px}
.m-note svg{width:13px;height:13px;flex:0 0 auto}
.m-feed{display:flex;flex-direction:column;gap:7px;min-height:124px;justify-content:flex-end}
.m-frow{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.14);border-radius:11px;padding:8px 11px}
.m-frow.pop{animation:frowIn .45s cubic-bezier(.22,1,.36,1)}
@keyframes frowIn{0%{opacity:0;transform:translateY(-10px) scale(.96)}100%{opacity:1;transform:none}}
.m-frow .fa2{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:10px;font-weight:800;color:#fff;flex:0 0 auto}
.m-frow .fi{flex:1;min-width:0;font-size:12px;font-weight:700;color:#fff;line-height:1.2}
.m-frow .fi span{display:block;font-size:10.5px;font-weight:600;color:rgba(255,255,255,.65)}
.m-frow .fg{font-size:10.5px;font-weight:800;color:#e1306c;background:#fff;padding:3px 8px;border-radius:100px;flex:0 0 auto}

/* growth chart */
.chart-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:30px;overflow:hidden;position:relative}
.chart-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.chart-hd .klabel{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:10px;font-weight:600}
.chart-hd h3{font-size:clamp(20px,2.2vw,26px);letter-spacing:-.02em;max-width:460px}
.chart-hd h3 .up{color:var(--green)}
.delta{display:inline-flex;align-items:center;gap:7px;background:rgba(74,214,255,.1);
  border:1px solid rgba(74,214,255,.3);color:var(--green);font-size:13px;font-weight:800;
  padding:8px 16px;border-radius:100px;white-space:nowrap}
.chart-wrap{position:relative}
.chart-wrap svg{display:block;width:100%;height:auto}
.chart-line{fill:none;stroke:var(--green);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2s cubic-bezier(.4,0,.2,1) .3s}
.chart-area{opacity:0;transition:opacity 1.2s ease 1.2s}
.chart-dot,.chart-cap{opacity:0;transition:opacity .5s ease 2s}
.chart-card.in .chart-line{stroke-dashoffset:0}
.chart-card.in .chart-area{opacity:1}
.chart-card.in .chart-dot,.chart-card.in .chart-cap{opacity:1}
@media (prefers-reduced-motion: reduce){
  .chart-line{stroke-dashoffset:0 !important;transition:none}
  .chart-area,.chart-dot,.chart-cap{opacity:1 !important;transition:none}
}
.chart-x{display:flex;justify-content:space-between;margin-top:10px;font-size:11.5px;font-weight:600;color:var(--muted)}
.chart-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted);font-weight:500}
.chart-foot .cf{display:inline-flex;align-items:center;gap:7px;color:var(--muted-2);font-weight:600}
.chart-foot .cf .d{width:7px;height:7px;border-radius:50%;background:var(--green);flex:0 0 auto}

/* guarantee bento */
.gb{display:grid;grid-template-columns:1.15fr 1fr 1fr;grid-auto-rows:minmax(196px,auto);gap:16px}
.gb-card{position:relative;display:flex;flex-direction:column;border-radius:20px;padding:24px;overflow:hidden;
  border:1px solid var(--line);background:var(--panel);color:var(--text);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.gb-card:hover{transform:translateY(-3px);box-shadow:0 22px 44px -18px rgba(0,0,0,.55)}
.gb-card.feat{grid-row:span 2;border:none;color:var(--ink);justify-content:flex-start;
  background:radial-gradient(120% 130% at 18% 8%, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(135deg,#8ff0ff 0%,#4ad6ff 38%,#2fb3f0 78%,#5b8ff5 100%)}
.gb-card.white{border:none;color:var(--ink);background:#fff}
.gb-card.feat:hover,.gb-card.white:hover{box-shadow:0 24px 48px -16px rgba(0,0,0,.4)}
.gb-card .gtag{align-self:flex-start}
.gb-card.feat .gtag,.gb-card.white .gtag{border-color:rgba(8,8,12,.2);color:rgba(8,8,12,.62)}
.gb-card h3{font-size:19px;font-weight:700;letter-spacing:-.01em;margin-top:14px;line-height:1.18}
.gb-card h3 .ac{color:var(--green)}
.gb-card.feat h3{font-size:24px}
.gb-card.feat h3 .ac,.gb-card.white h3 .ac{color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.gb-card p{font-size:13.5px;line-height:1.55;margin-top:10px;color:var(--muted-2)}
.gb-card.feat p{color:rgba(11,11,12,.72)}
.gb-viz{margin-top:auto;padding-top:18px}
.refill{display:flex;align-items:center;gap:16px}
.rf-ring{width:88px;height:88px;border-radius:50%;flex:0 0 auto;position:relative;
  background:conic-gradient(#08080a 0 72%, rgba(8,8,10,.16) 0)}
.rf-ring::before{content:"";position:absolute;inset:9px;border-radius:50%;
  background:linear-gradient(135deg,#8ff0ff,#2fc3f0)}
.rf-ring .arr{position:absolute;inset:0;display:grid;place-items:center;font-size:26px;font-weight:800;color:#08080a;
  animation:rfSpin 6s linear infinite}
@keyframes rfSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.rf-ring .arr{animation:none}}
.rf-lines{display:flex;flex-direction:column;gap:7px;flex:1;min-width:0}
.rf-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;font-weight:700;
  background:rgba(8,8,10,.12);border-radius:9px;padding:8px 11px;color:#082b3a}
.rf-row .st2{font-size:10px;font-weight:800;background:#08080a;color:var(--green);padding:3px 8px;border-radius:100px;white-space:nowrap}
.sp-top{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;margin-bottom:8px;color:var(--muted-2)}
.sp-top .ok{display:inline-flex;align-items:center;gap:5px;color:var(--green)}
.sp-bar{height:8px;border-radius:100px;background:rgba(255,255,255,.1);overflow:hidden}
.sp-bar i{display:block;height:100%;width:0;border-radius:100px;background:var(--green);
  transition:width 1.6s cubic-bezier(.4,0,.2,1) .4s}
.gb-card.in .sp-bar i{width:100%}
@media (prefers-reduced-motion: reduce){.sp-bar i{width:100% !important;transition:none}}
.gchat2{display:flex;flex-direction:column;gap:8px}
.gchat2 .bub{align-self:flex-start;background:var(--panel-2);border:1px solid var(--line);color:var(--text);
  font-size:12.5px;font-weight:600;padding:9px 13px;border-radius:13px 13px 13px 4px;max-width:94%}
.gchat2 .dots{align-self:flex-start;display:inline-flex;gap:4px;background:var(--panel-2);border:1px solid var(--line);
  padding:11px 14px;border-radius:13px 13px 13px 4px}
.gchat2 .dots i{width:6px;height:6px;border-radius:50%;background:var(--muted-2);animation:dotB 1.2s ease-in-out infinite}
.gchat2 .dots i:nth-child(2){animation-delay:.15s}
.gchat2 .dots i:nth-child(3){animation-delay:.3s}
@keyframes dotB{30%{transform:translateY(-4px);opacity:1}0%,60%,100%{transform:none;opacity:.5}}
@media (prefers-reduced-motion: reduce){.gchat2 .dots i{animation:none}}
.gchat2 .on{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--green);margin-top:2px}
.gchat2 .on .d{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 7px var(--green);animation:pulseDot 1.3s infinite}

/* reviews — featured + compact, honest initials */
.rv-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:14px;align-items:stretch}
.rv{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
  border-radius:20px;padding:24px;transition:transform .22s ease,border-color .22s ease}
.rv:hover{transform:translateY(-3px);border-color:#3a3a40}
.rv.feat{border:none;color:var(--ink);
  background:radial-gradient(120% 130% at 18% 8%, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(135deg,#8ff0ff 0%,#4ad6ff 38%,#2fb3f0 78%,#5b8ff5 100%)}
.rv-top{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.rv .stars{display:flex;gap:2px;color:#ffce3d;font-size:14px}
.rv.feat .stars{color:#082b3a}
.rv .gain{margin-left:auto;font-size:11px;font-weight:800;color:#08080a;background:var(--green);
  padding:4px 10px;border-radius:100px;white-space:nowrap}
.rv.feat .gain{background:#08080a;color:var(--green)}
.rv .quote{font-size:13.5px;line-height:1.6;color:var(--text);flex:1}
.rv.feat .quote{font-size:16.5px;line-height:1.55;font-weight:600;color:#11290f;letter-spacing:-.01em}
.rv .who{display:flex;align-items:center;gap:11px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.rv.feat .who{border-top-color:rgba(8,8,10,.18)}
.rv .ini{width:38px;height:38px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  font-size:13px;font-weight:800;color:#fff}
.rv.feat .ini{background:#08080a;color:var(--green)}
.rv .nm{font-weight:700;font-size:14px;line-height:1.2;display:flex;align-items:center;gap:5px}
.rv .nm .vck{width:14px;height:14px;border-radius:50%;background:var(--green);color:#08080a;
  display:inline-grid;place-items:center;font-size:9px;font-weight:900;flex:0 0 auto}
.rv.feat .nm .vck{background:#08080a;color:var(--green)}
.rv .hd2{color:var(--muted);font-size:12.5px;margin-top:2px}
.rv.feat .hd2{color:rgba(11,11,12,.6)}

/* FAQ aside — support chat card (no photo) */
.sup-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;
  display:flex;flex-direction:column;padding:22px}
.sup-hd{display:flex;align-items:center;gap:10px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.sup-hd .sd{width:38px;height:38px;border-radius:50%;background:rgba(74,214,255,.12);display:grid;place-items:center;flex:0 0 auto}
.sup-hd .sd svg{width:18px;height:18px}
.sup-hd .t1{font-size:14.5px;font-weight:700;display:flex;align-items:center;gap:7px}
.sup-hd .t1 .d{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 7px var(--green);animation:pulseDot 1.3s infinite}
.sup-hd .t2{font-size:12px;color:var(--muted);margin-top:1px}
.sup-chat{display:flex;flex-direction:column;gap:9px;padding:18px 0;flex:1}
.sup-chat .bub{max-width:88%;font-size:13px;font-weight:500;line-height:1.5;padding:10px 14px}
.sup-chat .them{align-self:flex-start;background:var(--panel-2);border:1px solid var(--line);
  color:var(--text);border-radius:14px 14px 14px 4px}
.sup-chat .us{align-self:flex-end;background:var(--green);color:#082b3a;font-weight:600;
  border-radius:14px 14px 4px 14px}
.sup-chat .dots{align-self:flex-start;display:inline-flex;gap:4px;background:var(--panel-2);
  border:1px solid var(--line);padding:12px 15px;border-radius:14px 14px 14px 4px}
.sup-chat .dots i{width:6px;height:6px;border-radius:50%;background:var(--muted-2);animation:dotB 1.2s ease-in-out infinite}
.sup-chat .dots i:nth-child(2){animation-delay:.15s}
.sup-chat .dots i:nth-child(3){animation-delay:.3s}
.sup-card .pill{width:100%;justify-content:center}

/* CTA proof count-up */
.cta-proof .pt b .cnt{font-variant-numeric:tabular-nums}

/* legal pages */
.legal{max-width:760px;margin:0 auto}
.legal h1{font-size:clamp(28px,4vw,38px);letter-spacing:-.02em;color:var(--text)}
.legal .updated{font-size:13px;color:var(--muted);margin-top:10px}
.legal h2{font-size:19px;color:var(--text);margin:32px 0 12px;letter-spacing:-.01em}
.legal p,.legal li{font-size:15px;color:var(--muted-2);line-height:1.7}
.legal p{margin-bottom:14px}
.legal ul{margin:0 0 14px 20px}
.legal li{margin-bottom:8px}
.legal a{color:var(--green)}

/* 404 */
.nf{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px}
.nf .big{font-size:clamp(80px,18vw,160px);font-weight:800;letter-spacing:-.04em;color:var(--green);line-height:.9}
.nf h1{font-size:clamp(22px,3vw,30px);color:var(--text);margin-top:6px}
.nf p{color:var(--muted-2);font-size:15px;max-width:420px;margin:6px 0 22px}

/* product-page section responsive */
@media(min-width:961px) and (max-width:1120px){
  .pdp-grid{grid-template-columns:minmax(0,1fr) 420px}
}
@media(max-width:960px){
  .igt{aspect-ratio:1}
  .hiw{grid-template-columns:1fr}
  .hiw-card{min-height:0}
  .gb{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .gb-card.feat{grid-row:auto;grid-column:1 / span 2}
  .rv-grid{grid-template-columns:1fr 1fr}
  .rv.feat{grid-column:1 / span 2}
}
@media(max-width:640px){
  .chart-cap{display:none}
  .gb{grid-template-columns:1fr}
  .gb-card.feat{grid-column:auto}
  .rv-grid{grid-template-columns:1fr}
  .rv.feat{grid-column:auto}
  .chart-card{padding:22px}
}

/* ── order widget: accent theming (purple on Twitch, green on Kick) ── */
.order-widget{--acc:#4ad6ff}
.order-widget{box-shadow:0 0 0 1px rgba(255,255,255,.02), 0 30px 70px -40px var(--acc)}
.svc-tab.on{background:var(--acc);color:#08080a}
.ow-from b{color:var(--acc)}
.sum-price{color:var(--acc)}
.ow-head-row h2{background:linear-gradient(90deg,#fff, color-mix(in srgb, var(--acc) 55%, #fff));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ── viewer slider selector ── */
.vsel{padding:6px 2px 2px}
.vsel-top{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:16px;min-height:44px}
.vsel-count{display:flex;align-items:baseline;gap:9px}
.vsel-count b{font-family:var(--head);font-size:42px;font-weight:800;letter-spacing:-.035em;line-height:.9;color:#fff;
  display:inline-block;font-variant-numeric:tabular-nums;
  text-shadow:0 0 26px color-mix(in srgb, var(--acc) 55%, transparent)}
.vsel-count b.bump{animation:vbump .34s cubic-bezier(.34,1.56,.64,1)}
@keyframes vbump{0%{transform:scale(.86);opacity:.6}100%{transform:scale(1);opacity:1}}
.vsel-count span{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.vsel-badge{font-size:11px;font-weight:800;color:#08080a;background:var(--acc);border-radius:100px;padding:5px 12px;
  box-shadow:0 6px 18px -6px var(--acc);white-space:nowrap}
.vsel-badge[hidden]{display:none}
.vsel-range{-webkit-appearance:none;appearance:none;width:100%;height:12px;border-radius:100px;outline:none;cursor:pointer;margin:0;
  background:linear-gradient(90deg, var(--acc) 0%, color-mix(in srgb, var(--acc) 70%, #fff) var(--p,50%), #26262a var(--p,50%), #202024 100%);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
.vsel-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;
  background:radial-gradient(circle at 50% 38%, #fff, #eef);border:4px solid var(--acc);cursor:grab;
  box-shadow:0 4px 16px rgba(0,0,0,.5), 0 0 0 7px color-mix(in srgb, var(--acc) 20%, transparent);
  transition:transform .12s ease, box-shadow .2s ease}
.vsel-range::-webkit-slider-thumb:hover{box-shadow:0 4px 16px rgba(0,0,0,.5), 0 0 0 10px color-mix(in srgb, var(--acc) 26%, transparent)}
.vsel-range:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.1)}
.vsel-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:4px solid var(--acc);cursor:grab;
  box-shadow:0 4px 16px rgba(0,0,0,.5)}
.vsel-range:focus-visible{box-shadow:inset 0 1px 3px rgba(0,0,0,.5), 0 0 0 3px color-mix(in srgb, var(--acc) 40%, transparent)}
.vsel-ticks{display:flex;justify-content:space-between;margin-top:13px}
.vsel-tick{background:none;border:none;font-family:var(--head);font-size:12.5px;font-weight:700;color:var(--muted);
  cursor:pointer;padding:5px 4px;border-radius:7px;transition:color .15s ease, background .15s ease}
.vsel-tick:hover{color:var(--muted-2);background:rgba(255,255,255,.04)}
.vsel-tick.on{color:#fff}
.vsel-save{min-height:18px;margin-top:12px;font-size:12px;font-weight:700;color:var(--acc);letter-spacing:.01em}

/* cross-platform link line inside CTA cards (SEO internal linking) */
.cta-xlink{margin-top:14px;font-size:13.5px;color:var(--muted-2)}
.cta-xlink a{color:var(--green);font-weight:600;text-decoration:none}
.cta-xlink a:hover{text-decoration:underline}

/* mobile pass — SHARED components only (footer, FAQ, cards, rhythm, ticker).
   Page-specific mobile rules live in each page's inline CSS. */
@media(max-width:640px){
  /* block gap rhythm */
  .blocks{gap:56px;margin-top:56px}
  .sec-title{margin-bottom:36px}
  /* card padding 28→22; guarantee/review cards 18 (re-assert .faq's zero) */
  .card{padding:22px}
  .faq{padding:0}
  .guar,.gb-card,.rv{padding:18px}
  /* FAQ ≥48px tap rows */
  .faq summary{padding:18px;min-height:48px}
  .faq .fa{padding:0 18px 18px}
  /* footer (mobile): full-width collapsible sections. Columns of any kind
     left the four headings at four different heights; stacked rows keep them
     aligned and collapse the block to about a third of the height. */
  .foot-grid{display:block;column-count:auto;gap:0}
  .foot-grid>div:first-child{text-align:center;margin-bottom:24px}
  .foot-grid .about{margin:12px auto 0;max-width:300px}
  .foot-pay{justify-content:center;margin-top:18px}
  .fcol{margin:0;border-top:1px solid #1e1e26}
  .fcol summary{pointer-events:auto;cursor:pointer;display:flex;align-items:center;
    justify-content:space-between;gap:12px;padding:14px 2px;min-height:48px}
  .fcol summary::after{content:"+";color:var(--muted);font-size:17px;line-height:1}
  .fcol[open] summary::after{content:"\2212"}
  .fcol summary h5{margin:0;font-size:13.5px;font-weight:600;letter-spacing:.02em;
    text-transform:none;color:var(--text)}
  .fcol-links{padding:0 2px 12px}
  .fcol a{padding:10px 0;margin-bottom:0;font-size:13.5px}
  footer{margin-top:34px;padding:40px 0 18px}
  footer .logo{display:inline-flex;padding:10px 0;margin:-10px 0}
  .foot-bot{flex-direction:column;justify-content:center;text-align:center;gap:6px;
    margin-top:22px;padding-top:18px}
  /* ticker chips */
  .tk{font-size:12px}
}

/* ════════════════════════════════════════════════════════════
   BuyLiveViewers — buy modal (.bm-*)  [v3 — neon glass]
   Accent per platform via --bm-acc on .bm-modal (order-modal.js).
   ════════════════════════════════════════════════════════════ */
.bm-overlay{position:fixed;inset:0;z-index:4000;display:none;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(60% 45% at 50% 8%, color-mix(in srgb,var(--bm-acc,#9146ff) 22%,transparent), transparent 70%), rgba(4,4,6,.74);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.bm-overlay.open{display:flex;animation:om-fade .2s ease}
.bm-modal{--bm-acc:#9146ff;position:relative;width:100%;max-width:420px;max-height:94vh;overflow:auto;
  border-radius:24px;padding:22px 22px 20px;color:var(--text);
  background:linear-gradient(180deg, color-mix(in srgb,var(--bm-acc) 16%,#201d28) 0%, rgba(20,20,24,.9) 44%, rgba(17,17,20,.95));
  border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--bm-acc) 10%,transparent), 0 40px 90px -30px rgba(0,0,0,.9),
    0 0 80px -22px color-mix(in srgb,var(--bm-acc) 40%,transparent), inset 0 1px 0 rgba(255,255,255,.09)}
.bm-overlay.open .bm-modal{animation:om-pop .3s cubic-bezier(.23,1,.32,1)}
.bm-modal::before{content:"";position:absolute;left:22px;right:22px;top:0;height:1px;
  background:linear-gradient(90deg,transparent, color-mix(in srgb,var(--bm-acc) 85%,#fff), transparent)}

/* header */
.bm-head{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.bm-glyph{width:42px;height:42px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg, color-mix(in srgb,var(--bm-acc) 30%,transparent), color-mix(in srgb,var(--bm-acc) 8%,transparent));
  border:1px solid color-mix(in srgb,var(--bm-acc) 38%,transparent);
  box-shadow:0 0 20px -4px color-mix(in srgb,var(--bm-acc) 65%,transparent), inset 0 1px 0 rgba(255,255,255,.12)}
.bm-glyph svg{width:20px;height:20px;color:color-mix(in srgb,var(--bm-acc) 60%,#fff)}
.bm-id{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.bm-plat{font-family:var(--head);font-weight:600;font-size:16px;letter-spacing:-.01em}
.bm-subid{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.bm-x{margin-left:auto;width:32px;height:32px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--muted);cursor:pointer;transition:.15s}
.bm-x:hover{background:rgba(255,255,255,.08);color:var(--text)}
.bm-x svg{width:14px;height:14px}

/* order card */
.bm-order{position:relative;border-radius:16px;padding:16px 18px;display:flex;align-items:center;gap:14px;overflow:hidden;
  background:linear-gradient(180deg, rgba(28,28,31,.75), rgba(21,21,23,.75));border:1px solid var(--line)}
.bm-order::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--bm-acc), color-mix(in srgb,var(--bm-acc) 70%,#fff));
  box-shadow:0 0 14px color-mix(in srgb,var(--bm-acc) 70%,transparent)}
.bm-order-l{flex:1;min-width:0}
.bm-kicker{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--bm-acc) 65%,#fff);margin-bottom:6px}
.bm-qty{font-family:var(--head);font-weight:600;font-size:20px;letter-spacing:-.01em;line-height:1.1}
.bm-meta{display:flex;align-items:center;gap:8px;margin-top:9px;flex-wrap:wrap}
.bm-pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;color:var(--muted);
  padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--line);white-space:nowrap}
.bm-pill svg{width:11px;height:11px;opacity:.85}
.bm-pdot{width:5px;height:5px;border-radius:50%;background:color-mix(in srgb,var(--bm-acc) 72%,#fff)}
.bm-price{text-align:right;flex:none;padding-left:12px;border-left:1px solid var(--line);align-self:stretch;
  display:flex;flex-direction:column;justify-content:center}
.bm-amt{font-family:var(--head);font-weight:600;font-size:26px;letter-spacing:-.02em;line-height:1}
.bm-tot{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:5px}

/* channel field */
.bm-field{margin-top:18px}
.bm-flabel{font-size:12px;font-weight:600;color:var(--muted);margin-bottom:8px;display:block}
.bm-input{display:flex;align-items:center;height:46px;border-radius:12px;overflow:hidden;
  background:rgba(10,10,12,.6);border:1px solid var(--line);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--bm-acc) 16%,transparent), 0 0 18px -6px color-mix(in srgb,var(--bm-acc) 32%,transparent);
  transition:box-shadow .15s,border-color .15s}
.bm-input:focus-within{border-color:color-mix(in srgb,var(--bm-acc) 55%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--bm-acc) 22%,transparent)}
.bm-pre{padding:0 2px 0 14px;color:var(--muted);font-size:14px;font-weight:500;font-family:var(--head);letter-spacing:-.01em;white-space:nowrap}
.bm-input input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--text);
  font-size:14px;font-weight:600;font-family:var(--head);letter-spacing:-.01em;padding:0 8px}
.bm-input input::placeholder{color:var(--muted-2);font-weight:500}
.bm-ok{width:20px;height:20px;margin-right:12px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--bm-acc) 16%,transparent);border:1px solid color-mix(in srgb,var(--bm-acc) 50%,transparent);
  color:color-mix(in srgb,var(--bm-acc) 60%,#fff)}
.bm-ok[hidden]{display:none}
.bm-ok svg{width:11px;height:11px}

/* note (validation) */
.bm-note{font-size:12.5px;color:var(--muted);margin:9px 2px 0}
.bm-note[hidden]{display:none}
.bm-note.bad{color:#fca5a5}

/* verify states */
.bm-verify:not(:empty){margin-top:14px}
.bm-vrow{display:flex;align-items:center;gap:9px;font-size:13px;line-height:1.4;padding:12px 14px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--muted)}
.bm-vrow b{color:var(--text);font-weight:700}
.bm-vmiss{border-color:rgba(248,113,113,.32);background:rgba(248,113,113,.07);color:#fca5a5}
.bm-vsoft{border-color:color-mix(in srgb,var(--bm-acc) 32%,transparent);background:color-mix(in srgb,var(--bm-acc) 9%,transparent);color:var(--muted-2)}
.bm-vtick{display:inline-flex;color:color-mix(in srgb,var(--bm-acc) 60%,#fff)}.bm-vtick svg{width:14px;height:14px}
.bm-spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.2);border-top-color:color-mix(in srgb,var(--bm-acc) 70%,#fff);
  border-radius:50%;animation:om-spin .8s linear infinite;flex-shrink:0}

/* verified card (the shine) */
.bm-vcard{position:relative;border-radius:16px;padding:15px 16px;overflow:hidden;
  background:radial-gradient(120% 140% at 0% 0%, color-mix(in srgb,var(--bm-acc) 16%,transparent), transparent 55%), linear-gradient(180deg, rgba(30,26,42,.7), rgba(20,20,24,.8));
  border:1px solid color-mix(in srgb,var(--bm-acc) 22%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 0 40px -18px color-mix(in srgb,var(--bm-acc) 55%,transparent)}
.bm-vhead{display:flex;align-items:center;gap:6px;margin-bottom:13px;font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:color-mix(in srgb,var(--bm-acc) 65%,#fff)}
.bm-vhead svg{width:12px;height:12px;color:var(--bm-acc)}
.bm-vln{flex:1;height:1px;background:linear-gradient(90deg, color-mix(in srgb,var(--bm-acc) 35%,transparent), transparent)}
.bm-vrowmain{display:flex;align-items:center;gap:13px}
.bm-av{position:relative;width:52px;height:52px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:conic-gradient(from 220deg, var(--bm-acc), color-mix(in srgb,var(--bm-acc) 55%,#fff), #ff5b9d, var(--bm-acc));
  box-shadow:0 0 22px -4px color-mix(in srgb,var(--bm-acc) 70%,transparent)}
.bm-av.live::before{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #ff3b30;box-shadow:0 0 12px -2px rgba(255,59,48,.8)}
.bm-av-in{width:44px;height:44px;border-radius:50%;object-fit:cover;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#2a1c4a,#171720);font-family:var(--head);font-weight:600;font-size:20px;color:#efe6ff;position:relative;z-index:1}
.bm-live-tag{position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);z-index:2;background:#ff3b30;color:#fff;
  font-size:8px;font-weight:800;letter-spacing:.08em;padding:2px 6px;border-radius:4px;box-shadow:0 0 12px -1px rgba(255,59,48,.9);border:1.5px solid #171720}
.bm-vinfo{flex:1;min-width:0}
.bm-nrow{display:flex;align-items:center;gap:6px}
.bm-nm{font-family:var(--head);font-weight:600;font-size:16px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bm-check{width:16px;height:16px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--bm-acc);box-shadow:0 0 10px -1px color-mix(in srgb,var(--bm-acc) 80%,transparent)}
.bm-check svg{width:9px;height:9px;color:#0a0a0f}
.bm-lrow{display:flex;align-items:center;gap:7px;margin-top:6px}
.bm-live-dot{width:7px;height:7px;border-radius:50%;background:#ff3b30;flex:none;animation:bmPulse 1.8s ease-out infinite}
@keyframes bmPulse{0%{box-shadow:0 0 0 0 rgba(255,59,48,.55)}70%{box-shadow:0 0 0 7px rgba(255,59,48,0)}100%{box-shadow:0 0 0 0 rgba(255,59,48,0)}}
.bm-watch{font-size:12.5px;font-weight:600;color:#ff6b63}
.bm-off-dot{width:7px;height:7px;border-radius:50%;background:var(--muted-2);flex:none}
.bm-off{font-size:12.5px;font-weight:600;color:var(--muted)}
.bm-vfoll{text-align:right;flex:none}
.bm-vf-n{font-family:var(--head);font-weight:600;font-size:17px;letter-spacing:-.01em}
.bm-vf-l{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:3px}
@media (prefers-reduced-motion:reduce){.bm-live-dot{animation:none}}

/* cta + trust */
.bm-cta{margin-top:18px;width:100%;height:52px;border:none;cursor:pointer;border-radius:14px;color:#fff;
  display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--body);font-weight:600;font-size:15px;
  background:linear-gradient(180deg, color-mix(in srgb,var(--bm-acc) 82%,#fff), var(--bm-acc));
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset, 0 10px 30px -8px color-mix(in srgb,var(--bm-acc) 85%,transparent), 0 0 40px -8px color-mix(in srgb,var(--bm-acc) 60%,transparent);
  transition:.15s}
.bm-cta:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 0 0 1px rgba(255,255,255,.18) inset, 0 14px 36px -8px color-mix(in srgb,var(--bm-acc) 95%,transparent), 0 0 55px -6px color-mix(in srgb,var(--bm-acc) 70%,transparent)}
.bm-cta:active:not(:disabled){transform:scale(.99)}
.bm-cta:disabled{opacity:.4;cursor:not-allowed;box-shadow:0 0 0 1px rgba(255,255,255,.08) inset}
.bm-cta svg{width:16px;height:16px}
.bm-cta.dark-acc{color:#0a0a0f}
.bm-divi{width:1px;height:18px;background:rgba(255,255,255,.28)}
.bm-camt{font-family:var(--head);font-weight:600;font-size:16px;letter-spacing:-.01em}
.bm-trust{margin-top:13px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:11.5px;color:var(--muted)}
.bm-trust svg{width:12px;height:12px;opacity:.8}

@media (max-width:400px){
  .bm-modal{padding:18px 16px 16px;border-radius:20px}
  .bm-order{padding:14px 15px;gap:10px}.bm-qty{font-size:18px}.bm-amt{font-size:22px}
  .bm-av{width:48px;height:48px}.bm-av-in{width:40px;height:40px;font-size:18px}
}

/* ════════════════════════════════════════════════════════════
   Order widget → neon-glass (matches the buy modal .bm-*)
   Uses the per-page --acc (Twitch purple / Kick green).
   ════════════════════════════════════════════════════════════ */
.order-widget{
  background:linear-gradient(180deg, color-mix(in srgb,var(--acc) 15%,#1a1a20) 0%, rgba(20,20,24,.9) 46%, rgba(17,17,20,.96));
  border:1px solid rgba(255,255,255,.08);border-radius:24px;
  backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 9%,transparent), 0 40px 90px -34px rgba(0,0,0,.9),
    0 0 70px -26px color-mix(in srgb,var(--acc) 38%,transparent), inset 0 1px 0 rgba(255,255,255,.09)}
.order-widget::before{content:"";position:absolute;left:22px;right:22px;top:0;height:1px;z-index:1;
  background:linear-gradient(90deg,transparent, color-mix(in srgb,var(--acc) 85%,#fff), transparent)}

/* tag → accent pill */
.ow-tag{color:color-mix(in srgb,var(--acc) 62%,#fff);background:color-mix(in srgb,var(--acc) 11%,transparent);
  border:1px solid color-mix(in srgb,var(--acc) 24%,transparent);padding:5px 11px;border-radius:100px;letter-spacing:.09em}

/* duration tabs → inset track + glowing active */
.svc-tabs{background:rgba(8,8,11,.55);border:1px solid var(--line);box-shadow:inset 0 1px 3px rgba(0,0,0,.4)}
.svc-tab.on{background:linear-gradient(180deg, color-mix(in srgb,var(--acc) 84%,#fff), var(--acc));color:#fff;
  box-shadow:0 6px 16px -6px color-mix(in srgb,var(--acc) 80%,transparent)}

/* big viewer count → accent glow */
.vsel-count b{text-shadow:0 0 24px color-mix(in srgb,var(--acc) 60%,transparent)}

/* summary → order card with a glowing accent bar (echoes the modal ticket) */
.sum-row{position:relative;overflow:hidden;border-radius:16px;padding:15px 16px 15px 19px;
  background:linear-gradient(180deg, rgba(28,28,31,.6), rgba(21,21,23,.6));border:1px solid var(--line)}
.sum-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--acc), color-mix(in srgb,var(--acc) 70%,#fff));
  box-shadow:0 0 12px color-mix(in srgb,var(--acc) 70%,transparent)}
.sum-price{text-shadow:0 0 22px color-mix(in srgb,var(--acc) 45%,transparent)}

/* Buy Now → glowing gradient CTA (matches .bm-cta) */
.buy-btn{background:linear-gradient(180deg, color-mix(in srgb,var(--acc) 82%,#fff), var(--acc));color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset, 0 12px 32px -8px color-mix(in srgb,var(--acc) 85%,transparent),
    0 0 40px -8px color-mix(in srgb,var(--acc) 55%,transparent)}
.buy-btn:hover{background:linear-gradient(180deg, color-mix(in srgb,var(--acc) 90%,#fff), var(--acc));transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset, 0 16px 40px -8px color-mix(in srgb,var(--acc) 95%,transparent),
    0 0 55px -6px color-mix(in srgb,var(--acc) 70%,transparent)}

/* ── iOS Safari auto-zooms the page when a focused field is under 16px — never go smaller on touch ── */
@media (max-width:820px){
  input:not([type=radio]):not([type=checkbox]),textarea,select{font-size:16px !important}
}

/* ════════════════════════════════════════════════════════════
   Order wizard (order-modal.js v4) — square stepped design
   ════════════════════════════════════════════════════════════ */
.wz-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  padding:18px;background:rgba(5,5,7,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;pointer-events:none;transition:opacity .22s ease}
.wz-overlay.open{opacity:1;pointer-events:auto}
.wz-modal{--wz-acc:#9146ff;width:100%;max-width:520px;max-height:calc(100vh - 36px);overflow:auto;
  background:#101012;border:1px solid #26262a;border-radius:10px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.02);
  transform:translateY(14px) scale(.985);transition:transform .24s cubic-bezier(.22,1,.36,1)}
.wz-overlay.open .wz-modal{transform:none}

.wz-top{display:flex;align-items:center;gap:12px;padding:16px 18px 14px;border-bottom:1px solid #1c1c1f}
.wz-glyph{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:8px;
  background:color-mix(in srgb,var(--wz-acc) 16%,#131315);color:var(--wz-acc);
  border:1px solid color-mix(in srgb,var(--wz-acc) 38%,transparent)}
.wz-glyph svg{width:19px;height:19px}
.wz-id{display:flex;flex-direction:column;gap:2px;min-width:0}
.wz-id b{font-family:var(--head);font-size:15.5px;letter-spacing:-.01em;color:var(--text)}
.wz-id span{font-size:11.5px;font-weight:600;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.wz-x{margin-left:auto;flex:none;width:34px;height:34px;border-radius:8px;border:1px solid #26262a;
  background:#151517;color:var(--muted-2);cursor:pointer;display:grid;place-items:center;transition:all .15s}
.wz-x:hover{color:#fff;border-color:#3a3a40}
.wz-x svg{width:15px;height:15px}

.wz-prog{display:flex;gap:5px;padding:14px 18px 0}
.wz-seg{height:3px;flex:1;border-radius:2px;background:#232327;transition:background .25s}
.wz-seg.done{background:color-mix(in srgb,var(--wz-acc) 55%,#232327)}
.wz-seg.on{background:var(--wz-acc);box-shadow:0 0 10px color-mix(in srgb,var(--wz-acc) 55%,transparent)}

.wz-body{padding:18px}
.wz-h{font-family:var(--head);font-weight:700;font-size:21px;letter-spacing:-.02em;color:var(--text)}
.wz-h2{font-family:var(--head);font-weight:700;font-size:14px;letter-spacing:-.01em;color:var(--text);margin:16px 0 0}
.wz-sub{font-size:13.5px;color:var(--muted-2);margin:6px 0 16px;line-height:1.5}
.wz-h2 + .wz-grid{margin-top:10px}

/* channel input */
.wz-inwrap{display:flex;align-items:center;height:50px;border-radius:8px;background:#151517;
  border:1px solid #2c2c31;transition:border-color .15s, box-shadow .15s}
.wz-inwrap:focus-within{border-color:color-mix(in srgb,var(--wz-acc) 60%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--wz-acc) 18%,transparent)}
.wz-inwrap.good{border-color:color-mix(in srgb,var(--wz-acc) 45%,transparent)}
.wz-pre{padding:0 2px 0 14px;color:var(--muted);font-size:14.5px;font-weight:500;font-family:var(--head);white-space:nowrap}
.wz-inwrap input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--text);
  font-size:16px;font-weight:600;font-family:var(--head);letter-spacing:-.01em;padding:0 8px}
.wz-inwrap input::placeholder{color:var(--muted-2);font-weight:500}
.wz-inok[hidden]{display:none}
.wz-inok{width:22px;height:22px;margin-right:12px;flex:none;border-radius:6px;display:grid;place-items:center;
  background:var(--wz-acc);color:#0a0a0f}
.wz-kick .wz-inok{color:#08120a}
.wz-inok svg{width:12px;height:12px}

/* verify states */
.wz-verify{margin-top:12px;min-height:10px}
.wz-vrow{display:flex;align-items:center;font-size:13px;color:var(--muted-2);line-height:1.45;
  padding:12px 14px;border-radius:8px;background:#151517;border:1px solid #232327}
.wz-vrow b{color:var(--text)}
.wz-vbad{border-color:rgba(255,75,66,.4);background:rgba(255,59,48,.07);color:#ffb4af}
.wz-vbad b{color:#fff}
.wz-vok{border-color:color-mix(in srgb,var(--wz-acc) 35%,transparent)}
.wz-vtick{width:18px;height:18px;flex:none;margin-right:9px;border-radius:5px;display:grid;place-items:center;
  background:var(--wz-acc);color:#0a0a0f}
.wz-vtick svg{width:10px;height:10px}
.wz-spin{width:15px;height:15px;flex:none;margin-right:10px;border-radius:50%;
  border:2px solid #333;border-top-color:var(--wz-acc);animation:wzspin .7s linear infinite}
@keyframes wzspin{to{transform:rotate(360deg)}}
.wz-vcard{display:flex;align-items:center;gap:13px;padding:14px;border-radius:8px;
  background:color-mix(in srgb,var(--wz-acc) 7%,#151517);
  border:1px solid color-mix(in srgb,var(--wz-acc) 32%,transparent)}
.wz-av{position:relative;width:46px;height:46px;flex:none}
.wz-av-in{width:46px;height:46px;border-radius:8px;display:grid;place-items:center;object-fit:cover;
  background:color-mix(in srgb,var(--wz-acc) 30%,#1c1c1f);color:#fff;font-weight:800;font-size:17px;font-family:var(--head)}
img.wz-av-in{display:block}
.wz-av.live .wz-av-in{outline:2px solid #ff3b30;outline-offset:2px}
.wz-live{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
  background:#ff3b30;color:#fff;font-size:8.5px;font-weight:800;letter-spacing:.06em;
  padding:2px 5px;border-radius:4px;border:2px solid #101012}
.wz-vinfo{min-width:0;flex:1}
.wz-vnm{display:flex;align-items:center;gap:7px;font-family:var(--head);font-weight:700;font-size:15.5px;
  color:var(--text);letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wz-vchk{width:16px;height:16px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--wz-acc);color:#0a0a0f}
.wz-vchk svg{width:9px;height:9px}
.wz-vsub{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted-2);margin-top:4px;font-weight:500}
.wz-dot-live{width:7px;height:7px;border-radius:50%;background:#ff3b30;box-shadow:0 0 7px #ff3b30;animation:pulseDot 1.3s infinite}
.wz-dot-off{width:7px;height:7px;border-radius:50%;background:#4a4a52}
.wz-vfol{flex:none;text-align:right;display:flex;flex-direction:column}
.wz-vfol b{font-family:var(--head);font-size:15px;color:var(--text)}
.wz-vfol span{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600}

/* option tiles */
.wz-grid{display:grid;gap:9px}
.wz-grid3{grid-template-columns:repeat(3,1fr)}
.wz-grid2{grid-template-columns:repeat(2,1fr)}
.wz-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:15px 8px 13px;border-radius:8px;cursor:pointer;text-align:center;
  background:#151517;border:1px solid #2a2a2f;color:var(--text);font-family:inherit;
  transition:border-color .14s, background .14s, transform .14s}
.wz-tile:hover{border-color:#3d3d44;transform:translateY(-1px)}
.wz-tile b{font-family:var(--head);font-weight:700;font-size:17px;letter-spacing:-.01em;
  display:flex;align-items:center;gap:7px;justify-content:center}
.wz-tile b svg{width:15px;height:15px;color:var(--wz-acc)}
.wz-tile span{font-size:11px;color:var(--muted);font-weight:600}
.wz-tile em{font-style:normal;font-size:12.5px;font-weight:700;color:var(--muted-2);margin-top:5px}
.wz-tile.on{background:color-mix(in srgb,var(--wz-acc) 10%,#151517);
  border-color:var(--wz-acc);
  box-shadow:0 0 0 1px var(--wz-acc), 0 6px 22px -8px color-mix(in srgb,var(--wz-acc) 45%,transparent)}
.wz-tile.on em{color:var(--wz-acc)}
.wz-kick .wz-tile.on em{color:#7dff4d}
.wz-wide{padding:16px 12px 14px}
.wz-flag{position:absolute;top:-8px;left:50%;transform:translateX(-50%);font-style:normal;
  background:var(--wz-acc);color:#0a0a0f;font-size:9px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;padding:2.5px 7px;border-radius:5px;white-space:nowrap}
.wz-kick .wz-flag{color:#08120a}

/* custom comments */
.wz-ta{width:100%;margin-top:10px;background:#151517;border:1px solid #2c2c31;border-radius:8px;
  color:var(--text);font:inherit;font-size:16px;line-height:1.6;padding:12px 14px;outline:none;resize:vertical;min-height:110px}
.wz-ta:focus{border-color:color-mix(in srgb,var(--wz-acc) 60%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--wz-acc) 18%,transparent)}
.wz-ta::placeholder{color:#5c5c66}
.wz-tanote{font-size:12px;color:var(--muted);margin-top:8px;font-weight:500}

/* review */
.wz-rcv{border:1px solid #26262a;border-radius:8px;overflow:hidden;margin-top:14px}
.wz-rch{display:flex;align-items:center;gap:12px;padding:14px;background:#151517;border-bottom:1px solid #232327}
.wz-rav{width:40px;height:40px;flex:none;border-radius:8px;overflow:hidden;display:grid;place-items:center;
  background:color-mix(in srgb,var(--wz-acc) 30%,#1c1c1f);color:#fff;font-weight:800;font-family:var(--head)}
.wz-rav img{width:100%;height:100%;object-fit:cover;display:block}
.wz-rid{display:flex;flex-direction:column;gap:2px;min-width:0}
.wz-rid b{font-family:var(--head);font-size:14.5px;color:var(--text);letter-spacing:-.01em}
.wz-rid span{font-size:11.5px;color:var(--muted)}
.wz-rlive{margin-left:auto;background:#ff3b30;color:#fff;font-size:9px;font-weight:800;letter-spacing:.06em;
  padding:3px 7px;border-radius:4px}
.wz-sumrow{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;font-size:13.5px;color:var(--muted-2);border-bottom:1px solid #1c1c1f}
.wz-sumrow b{color:var(--text);font-weight:700;font-family:var(--head)}
.wz-sumtot{border-bottom:none;background:#151517;font-weight:700;color:var(--text)}
.wz-sumtot b{font-size:17px;color:var(--wz-acc)}
.wz-kick .wz-sumtot b{color:#7dff4d}
.wz-fine{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);margin-top:12px;font-weight:500}
.wz-fine svg{width:13px;height:13px;flex:none}

/* nav */
.wz-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px 18px;border-top:1px solid #1c1c1f}
.wz-back{display:inline-flex;align-items:center;gap:7px;background:none;border:none;cursor:pointer;
  color:var(--muted-2);font:inherit;font-size:13.5px;font-weight:600;padding:10px 6px}
.wz-back:hover{color:#fff}
.wz-back svg{width:14px;height:14px}
.wz-trust{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted);font-weight:500}
.wz-trust svg{width:13px;height:13px}
.wz-next{display:inline-flex;align-items:center;gap:9px;padding:13px 26px;border-radius:8px;border:none;
  cursor:pointer;background:var(--wz-acc);color:#0a0a0f;font-family:var(--head);font-weight:700;font-size:15px;
  letter-spacing:-.01em;transition:transform .13s, box-shadow .13s, opacity .13s;
  box-shadow:0 8px 26px -8px color-mix(in srgb,var(--wz-acc) 65%,transparent)}
.wz-kick .wz-next{color:#08120a}
.wz-next:hover:not(:disabled){transform:translateY(-1px)}
.wz-next:disabled{opacity:.38;cursor:not-allowed;box-shadow:none}
.wz-next svg{width:16px;height:16px}
.wz-buy b{font-weight:800}

@media (max-width:520px){
  .wz-overlay{padding:0;align-items:flex-end}
  .wz-modal{max-width:none;max-height:94vh;border-radius:14px 14px 0 0;border-bottom:none}
  .wz-grid3{grid-template-columns:repeat(2,1fr)}
}

/* order CTA card (replaces the on-page configurator — wizard does the work) */
.order-cta{align-self:start}
.order-cta .ow-body{padding:26px 24px}
.oc-points{list-style:none;margin:18px 0 20px;padding:0;display:flex;flex-direction:column;gap:12px}
.oc-points li{position:relative;padding-left:26px;font-size:13.5px;line-height:1.5;color:var(--muted-2)}
.oc-points li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:5px;
  background:color-mix(in srgb,var(--acc) 18%,transparent);
  border:1px solid color-mix(in srgb,var(--acc) 45%,transparent)}
.oc-points li::after{content:"";position:absolute;left:4.5px;top:7.5px;width:7px;height:4.5px;
  border-left:1.8px solid var(--acc);border-bottom:1.8px solid var(--acc);transform:rotate(-45deg)}
.order-cta .buy-btn{margin-bottom:16px}

/* ════════════════════════════════════════════════════════════
   Order CTA card — flat & sleek (de-glowed; neon-glass stays on
   the wizard modal only)
   ════════════════════════════════════════════════════════════ */
.order-cta{background:#141416;border:1px solid #26262a;border-radius:16px;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 24px 60px -44px rgba(0,0,0,.85)}
.order-cta::before{display:none}
.order-cta .ow-tag{background:none;border:none;padding:0;border-radius:0;
  color:var(--muted);letter-spacing:.13em}
.order-cta .ow-head-row h2{color:var(--text);background:none;-webkit-background-clip:initial;background-clip:initial;
  -webkit-text-fill-color:var(--text)}
.order-cta .ow-from{color:var(--muted)}
.order-cta .ow-from b{color:var(--text);font-weight:700}
.order-cta .oc-points li::before{background:#1b1b1e;border-color:#2e2e33}

/* visual point rows (v2): icon tile + bold lead + muted tail, staggered in */
.oc2{list-style:none;margin:18px 0 20px;padding:0;display:flex;flex-direction:column;gap:10px}
.oc2 li{display:flex;align-items:flex-start;gap:12px;padding:11px 12px;border-radius:10px;
  background:#17171a;border:1px solid #232327;
  opacity:0;transform:translateY(8px);animation:ocIn .5s cubic-bezier(.22,1,.36,1) forwards}
.oc2 li:nth-child(1){animation-delay:.05s}
.oc2 li:nth-child(2){animation-delay:.16s}
.oc2 li:nth-child(3){animation-delay:.27s}
@keyframes ocIn{to{opacity:1;transform:none}}
.oc2 .ico{flex:none;width:34px;height:34px;border-radius:8px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--acc) 14%,#141416);color:var(--acc);
  border:1px solid color-mix(in srgb,var(--acc) 32%,transparent)}
.oc2 .ico svg{width:16px;height:16px}
.oc2 .tx{font-size:13px;line-height:1.5;color:var(--muted-2)}
.oc2 .tx b{display:block;color:var(--text);font-size:13.5px;font-weight:700;margin-bottom:1px}
@media (prefers-reduced-motion: reduce){.oc2 li{animation:none;opacity:1;transform:none}}
.order-cta .buy-btn{background:var(--acc);border-radius:10px;box-shadow:none}
.order-cta .buy-btn:hover{background:color-mix(in srgb,var(--acc) 86%,#fff);
  transform:translateY(-1px);box-shadow:none}

/* Build-your-order CTA — periodic shine sweep (subtle, reduced-motion safe) */
.order-cta .buy-btn{position:relative;overflow:hidden}
.order-cta .buy-btn::after{content:"";position:absolute;top:-4px;bottom:-4px;left:-45%;width:32%;
  background:linear-gradient(105deg, transparent 8%, rgba(255,255,255,.38) 50%, transparent 92%);
  transform:skewX(-18deg);animation:ctaShine 3.4s cubic-bezier(.4,0,.2,1) infinite;pointer-events:none}
@keyframes ctaShine{0%{left:-45%}52%{left:118%}100%{left:118%}}
@media (prefers-reduced-motion: reduce){.order-cta .buy-btn::after{display:none}}

/* wizard review-step notice: amber "go live first" / green "you're live"
   The text lives in ONE child (.wz-nt). Leaving the <b> and the sentence as
   two separate flex items gave the label its own shrink-wrapped column, so
   "Go live before you pay" stacked three words tall beside a wide body. */
.wz-note{display:flex;align-items:flex-start;gap:11px;margin:12px 0 2px;padding:13px 15px;border-radius:10px;
  font-size:13px;line-height:1.5;color:#ffd882;
  background:rgba(255,186,49,.09);border:1px solid rgba(255,186,49,.32)}
.wz-note .wz-nt{min-width:0}
.wz-note b{display:block;color:#ffe3a6;font-weight:700;letter-spacing:-.005em;margin-bottom:2px}
.wz-note .wz-nt span{display:block;opacity:.88}
.wz-note svg{width:16px;height:16px;flex:none;margin-top:2px}
.wz-note.ok{color:#9df58f;background:rgba(87,231,70,.08);border-color:rgba(87,231,70,.3)}
.wz-note.ok b{color:#c2ffb8}