/* ============================================================================
   baskt-pages.css - the section kit mounted by baskt-pages.js on every
   content page: flow diagrams, the provably-fair sequence, the
   money split, architecture, tier pouches, the pack gallery, comparisons,
   FAQ, calculators. One material language: dark glass cards, a hairline
   iridescent edge, chrome type, green for wins and rose for losses.
   ========================================================================== */
.bx {
  --bx-bd: rgba(255,255,255,.09);
  --bx-bg: rgba(255,255,255,.03);
  --bx-bg2: rgba(255,255,255,.055);
  --bx-mut: rgba(255,255,255,.56);
  --bx-dim: rgba(255,255,255,.38);
  --bx-up: #46d17f;
  --bx-down: #ff6b81;
  --bx-gold: #f2c46b;
  --bx-iri: linear-gradient(90deg, #ff9ad5, #b98cff 38%, #7fd8ff 72%, #9ff0cf);
  color: #fff;
  width: 100%;
}
.bx * { box-sizing: border-box; }
.bx-sec { max-width: 1180px; margin: 0 auto; padding: clamp(64px, 8vw, 116px) 0 0; }
.bx-sec:last-child { padding-bottom: clamp(48px, 6vw, 88px); }
.bx-head { max-width: 720px; margin: 0 0 clamp(26px, 3.4vw, 44px); }
.bx-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.bx-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
  color: var(--bx-mut); margin-bottom: 14px;
}
.bx-eyebrow::before {
  content: ""; width: 18px; height: 1px; background: var(--bx-iri);
}
.bx-h2 {
  font-family: var(--brand-font, sans-serif); font-weight: 900;
  font-size: clamp(30px, 4.3vw, 54px); line-height: 1.02; letter-spacing: -.035em;
  margin: 0 0 14px; color: #fff;
}
.bx-h2 em {
  font-style: normal;
  background: var(--bx-iri); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bx-lead { font-size: 15.5px; line-height: 1.65; color: #c3c3ca; margin: 0; max-width: 60ch; }
.bx-head.center .bx-lead { margin: 0 auto; }

.bx-card {
  position: relative; overflow: hidden;
  border-radius: 20px; border: 1px solid var(--bx-bd);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,.04), rgba(255,255,255,0) 60%),
    var(--bx-bg);
}
.bx-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
}
.bx-pad { padding: clamp(20px, 2.4vw, 30px); }
.bx-grid { display: grid; gap: 14px; }
.bx-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bx-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bx-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .bx-g3, .bx-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .bx-g2, .bx-g3, .bx-g4 { grid-template-columns: 1fr; } }

.bx-k { font-size: 10.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--bx-dim); }
.bx-h3 { font-family: var(--brand-font, sans-serif); font-weight: 800; font-size: 19px; letter-spacing: -.015em; margin: 10px 0 8px; color: #fff; }
.bx-p { font-size: 13.5px; line-height: 1.62; color: #b4b4bd; margin: 0; }
.bx-p b { color: #fff; font-weight: 700; }
.bx-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 999px; border: 0; cursor: pointer;
  font: inherit; font-weight: 800; font-size: 14px; text-decoration: none;
  background: #ececf2; color: #0a0a0e;
  transition: transform .2s ease, box-shadow .2s ease;
}
.bx-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(255,255,255,.18); }
.bx-btn.ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.24); }
.bx-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.bx-ico {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.bx-ico svg { width: 19px; height: 19px; stroke: #fff; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================== FLOW ===== */
/* node graph: each node is a card, connectors are drawn between them with an
   animated packet travelling along the line */
.bx-flow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; position: relative; }
.bx-node { position: relative; padding: 0 8px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.bx-node-dot {
  position: relative; z-index: 2;
  width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center;
  background: linear-gradient(180deg, #1d1d26, #101016);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 14px 30px -12px rgba(0,0,0,.9);
}
.bx-node-dot::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: var(--bx-iri); opacity: .55;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.bx-node-dot svg { width: 26px; height: 26px; stroke: #fff; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bx-node-n { position: absolute; top: -8px; right: -8px; z-index: 3; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 900; color: #0a0a0e; background: #ececf2; }
.bx-node h4 { font-family: var(--brand-font, sans-serif); font-weight: 800; font-size: 14.5px; margin: 16px 0 6px; color: #fff; letter-spacing: -.01em; }
.bx-node p { font-size: 12px; line-height: 1.5; color: var(--bx-mut); margin: 0; max-width: 17ch; }
.bx-node:not(:last-child)::before {
  content: ""; position: absolute; z-index: 1; top: 32px; left: calc(50% + 40px); right: calc(-50% + 40px); height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,.2), rgba(255,255,255,.08));
}
.bx-node:not(:last-child)::after {
  content: ""; position: absolute; z-index: 2; top: 29px; left: calc(50% + 40px); width: 8px; height: 8px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 12px rgba(180,160,255,.9);
  animation: bx-packet 2.8s cubic-bezier(.6,0,.4,1) infinite;
  animation-delay: calc(var(--i, 0) * .45s);
}
@keyframes bx-packet {
  0% { transform: translateX(0); opacity: 0 } 12% { opacity: 1 }
  80% { opacity: 1 } 100% { transform: translateX(calc(var(--gap, 110px))); opacity: 0 }
}
@media (max-width: 900px) {
  .bx-flow { grid-template-columns: 1fr; gap: 26px; }
  .bx-node { flex-direction: row; text-align: left; gap: 16px; align-items: flex-start; }
  .bx-node h4 { margin: 4px 0 4px; }
  .bx-node p { max-width: none; }
  .bx-node:not(:last-child)::before { top: 64px; bottom: -26px; left: 39px; right: auto; width: 2px; height: auto; }
  .bx-node:not(:last-child)::after { display: none; }
}
/* the branch at the end of the opening flow */
.bx-branch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
@media (max-width: 640px) { .bx-branch { grid-template-columns: 1fr; } }
.bx-branch .bx-card { padding: 20px 22px; display: flex; gap: 14px; align-items: flex-start; }

/* ============================================================ TIMELINE ==== */
.bx-time { position: relative; padding-left: 0; }
.bx-tl { display: grid; grid-template-columns: 92px 1fr; gap: 0 22px; }
.bx-tl-t { position: relative; text-align: right; padding: 18px 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--bx-mut); }
.bx-tl-b { position: relative; padding: 16px 0 16px 26px; border-left: 1px solid rgba(255,255,255,.12); }
.bx-tl-b::before {
  content: ""; position: absolute; left: -5px; top: 22px; width: 9px; height: 9px; border-radius: 50%;
  background: #0b0b10; box-shadow: 0 0 0 2px rgba(255,255,255,.55);
}
.bx-tl-b.hot::before { background: var(--bx-up); box-shadow: 0 0 0 2px var(--bx-up), 0 0 14px rgba(70,209,127,.8); }
.bx-tl-b h5 { margin: 0 0 4px; font-family: var(--brand-font, sans-serif); font-weight: 800; font-size: 15px; color: #fff; }
.bx-tl-b p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--bx-mut); max-width: 62ch; }
.bx-tl-b code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; padding: 1px 6px; border-radius: 5px; background: rgba(255,255,255,.07); color: #e7e7ef; }

/* ========================================================= SEQUENCE ===== */
.bx-seq { width: 100%; height: auto; display: block; }
.bx-seq .lane { fill: rgba(255,255,255,.035); stroke: rgba(255,255,255,.1); }
.bx-seq .lane-t { fill: #fff; font: 800 15px var(--brand-font, sans-serif); letter-spacing: -.01em; }
.bx-seq .lane-s { fill: rgba(255,255,255,.45); font: 600 11px sans-serif; }
.bx-seq .life { stroke: rgba(255,255,255,.16); stroke-dasharray: 3 5; }
.bx-seq .msg { stroke: rgba(255,255,255,.75); stroke-width: 1.5; fill: none; }
.bx-seq .msg.key { stroke: url(#bx-iri); stroke-width: 2.2; }
.bx-seq .msg-t { fill: #fff; font: 700 12.5px sans-serif; }
.bx-seq .msg-s { fill: rgba(255,255,255,.5); font: 500 11px ui-monospace, Menlo, monospace; }
.bx-seq .num { fill: #ececf2; }
.bx-seq .num-t { fill: #0a0a0e; font: 900 10.5px sans-serif; }
.bx-seq .note { fill: rgba(70,209,127,.1); stroke: rgba(70,209,127,.45); }
.bx-seq .note-t { fill: #a8f0c6; font: 700 11px sans-serif; }
.bx-seq-list { display: none; }
@media (max-width: 760px) {
  .bx-seq { display: none; }
  .bx-seq-list { display: grid; gap: 10px; counter-reset: s; list-style: none; margin: 0; padding: 0; }
  .bx-seq-list li { counter-increment: s; position: relative; padding: 14px 16px 14px 50px; border-radius: 14px; border: 1px solid var(--bx-bd); background: var(--bx-bg); font-size: 13px; color: #c9c9d2; line-height: 1.5; }
  .bx-seq-list li::before { content: counter(s); position: absolute; left: 14px; top: 13px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 900; background: #ececf2; color: #0a0a0e; }
  .bx-seq-list b { color: #fff; }
}

/* ============================================================= MONEY ===== */
.bx-split { margin-top: 6px; }
.bx-split-row { margin-bottom: 22px; }
.bx-split-l { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 9px; }
.bx-split-l b { font-family: var(--brand-font, sans-serif); font-weight: 800; font-size: 15px; }
.bx-split-l span { font-size: 12px; color: var(--bx-mut); }
.bx-bar { display: flex; height: 38px; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.bx-bar > div { position: relative; display: flex; align-items: center; padding: 0 12px; min-width: 0;
  font-size: 11.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-bar .s-you  { background: linear-gradient(180deg, rgba(70,209,127,.42), rgba(70,209,127,.24)); }
.bx-bar .s-house{ background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08)); }
.bx-bar .s-ref  { background: linear-gradient(180deg, rgba(185,140,255,.5), rgba(185,140,255,.3)); }
.bx-bar .s-fee  { background: linear-gradient(180deg, rgba(127,216,255,.45), rgba(127,216,255,.25)); }
.bx-bar .s-cre  { background: linear-gradient(180deg, rgba(242,196,107,.5), rgba(242,196,107,.28)); color: #1d1405; }
.bx-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 8px; font-size: 12px; color: var(--bx-mut); }
.bx-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }

/* ====================================================== ARCHITECTURE ===== */
.bx-arch { width: 100%; height: auto; display: block; }
.bx-arch .box { fill: rgba(255,255,255,.04); stroke: rgba(255,255,255,.16); }
.bx-arch .box.you { fill: rgba(70,209,127,.08); stroke: rgba(70,209,127,.5); }
.bx-arch .box.chain { fill: rgba(150,120,255,.08); stroke: rgba(170,140,255,.45); }
.bx-arch .zone { fill: none; stroke: rgba(255,255,255,.12); stroke-dasharray: 4 6; }
.bx-arch .zone-t { fill: rgba(255,255,255,.4); font: 800 10.5px sans-serif; letter-spacing: .18em; }
.bx-arch .t { fill: #fff; font: 800 14px var(--brand-font, sans-serif); }
.bx-arch .s { fill: rgba(255,255,255,.5); font: 500 11px sans-serif; }
.bx-arch .ln { stroke: rgba(255,255,255,.5); stroke-width: 1.4; fill: none; }
.bx-arch .ln.flow { stroke: url(#bx-iri2); stroke-width: 2; stroke-dasharray: 6 6; animation: bx-dash 1.6s linear infinite; }
.bx-arch .lt { fill: rgba(255,255,255,.7); font: 600 10.5px sans-serif; }
@keyframes bx-dash { to { stroke-dashoffset: -24; } }

/* ============================================================== TIERS ===== */
.bx-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) { .bx-tiers { grid-template-columns: 1fr; } }
.bx-tier { position: relative; padding: 34px 22px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; }
/* the pouch is a pre-rendered Baskt bag (.bkp, inject/baskt-packs.css) */
.bx-tier { padding-top: 26px; }
.bx-tier .bkp-tier-stage { display: flex; justify-content: center; width: 100%; padding: 22px 0 34px; margin: 0 0 4px; }
.bx-tier-name { font-family: var(--brand-font, sans-serif); font-weight: 900; font-size: 22px; letter-spacing: .05em; }
.bx-tier-price { font-size: 30px; font-weight: 900; letter-spacing: -.03em; margin: 6px 0 2px; font-family: var(--brand-font, sans-serif); }
.bx-tier-price small { font-size: 13px; color: var(--bx-mut); font-weight: 800; margin-left: 4px; }
.bx-tier-jack { font-size: 12.5px; color: var(--bx-mut); margin-bottom: 16px; }
.bx-tier-jack b { color: #fff; }
.bx-tier ul { list-style: none; padding: 0; margin: 0 0 20px; width: 100%; display: grid; gap: 8px; text-align: left; }
.bx-tier li { font-size: 12.5px; color: #c4c4cc; padding-left: 20px; position: relative; }
.bx-tier li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 7px; height: 7px; transform: rotate(45deg); border-radius: 1.5px; background: var(--tier-c, #fff); }
.bx-tier .bx-btn { width: 100%; justify-content: center; margin-top: auto; }
.t-silver { --tier-c: #dfe7f2; }
.t-violet { --tier-c: #cdb6ff; }
.t-gold   { --tier-c: #f2c46b; }
.t-gold.bx-card { border-color: rgba(242,196,107,.32); }
.bx-tier.t-gold.bx-card::after {
  content: "BIGGEST JACKPOT"; position: absolute; top: 14px; right: 14px;
  font-size: 9.5px; font-weight: 900; letter-spacing: .16em; padding: 5px 9px; border-radius: 999px;
  background: var(--bx-gold); color: #1d1405;
}
/* tier finishes live in the bag art itself (packs/bags/rare|epic|legendary.webp) */
.bx-tier.t-silver .bx-tier-name { color: #eef3fa; }
.bx-tier.t-violet .bx-tier-name { color: #e7bdff; }
.bx-tier.t-gold .bx-tier-name { color: #ffe08a; }

/* ============================================================ GALLERY ===== */
/* Each card is the pack's own bag (/packs/bags/<stem>, tools/packs/) standing
   in a halo of its theme hue, with the tag up top and the caption on a dark
   lower scrim. At rest: one <img>, one static gradient, one static
   box-shadow. Hover moves transforms only. */
.bx-gal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .bx-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bx-gal a { --gal: 120,140,160; position: relative; display: block; border-radius: 20px; overflow: hidden; text-decoration: none; color: #fff;
  border: 1px solid var(--bx-bd); aspect-ratio: 2 / 3;
  background:
    radial-gradient(64% 46% at 50% 38%, rgba(var(--gal), .26), rgba(var(--gal), .07) 58%, rgba(var(--gal), 0) 82%),
    linear-gradient(180deg, rgba(var(--gal), .07), rgba(8,8,11,0) 46%),
    #08080b;
  transition: transform .45s cubic-bezier(.16,1,.3,1), border-color .3s ease, box-shadow .3s ease; }
.bx-gal a:hover { transform: translateY(-6px); border-color: rgba(var(--gal), .55); box-shadow: 0 30px 60px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(var(--gal), .18); }
/* the bag: 68% of the card wide, hung clear of the tag and of the caption */
.bx-gal-bag { position: absolute; left: 16%; width: 68%; top: 10%; aspect-ratio: 588 / 906; display: block;
  transition: transform .6s cubic-bezier(.16,1,.3,1); }
.bx-gal-bag::before { content: ""; position: absolute; left: 4%; right: 4%; top: 3%; bottom: 3%; border-radius: 3%;
  box-shadow: 0 0 34px rgba(var(--gal), .34), 0 22px 40px -10px rgba(0,0,0,.8); }
.bx-gal-bag img { position: absolute; inset: 0; display: block; width: 100% !important; height: 100% !important; max-width: none !important;
  margin: 0 !important; object-fit: contain; }
.bx-gal a:hover .bx-gal-bag { transform: translateY(-4px) scale(1.04); }
.bx-gal-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 54px 18px 18px;
  background: linear-gradient(180deg, rgba(5,6,8,0), rgba(5,6,8,.80) 38%, rgba(5,6,8,.96) 70%); }
.bx-gal-cap b { display: block; font-family: var(--brand-font, sans-serif); font-weight: 900; font-size: 20px; letter-spacing: -.02em;
  text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.bx-gal-cap span { font-size: 12.5px; color: rgba(255,255,255,.72); }
.bx-gal-tag { position: absolute; z-index: 1; top: 14px; left: 14px; font-size: 10px; font-weight: 900; letter-spacing: .16em; padding: 5px 9px; border-radius: 999px;
  background: rgba(5,6,8,.78); border: 1px solid rgba(var(--gal), .45); color: #fff; }
@media (max-width: 900px) {
  .bx-gal-bag { left: 20%; width: 60%; top: 13%; }
  .bx-gal-cap { padding: 40px 14px 14px; }
}
@media (max-width: 520px) {
  .bx-gal { gap: 12px; }
  .bx-gal a { border-radius: 16px; }
  .bx-gal-bag { left: 22%; width: 56%; top: 14%; }
  .bx-gal-bag::before { box-shadow: 0 0 20px rgba(var(--gal), .34), 0 14px 26px -8px rgba(0,0,0,.8); }
  .bx-gal-tag { top: 10px; left: 10px; font-size: 8.5px; padding: 4px 7px; letter-spacing: .14em; }
  .bx-gal-cap { padding: 30px 12px 12px; }
  .bx-gal-cap b { font-size: 15px; }
  .bx-gal-cap span { display: block; font-size: 11px; line-height: 1.3; }
}

/* ============================================================ COMPARE ===== */
.bx-cmp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.bx-cmp th, .bx-cmp td { padding: 15px 18px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.07); }
.bx-cmp thead th { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--bx-dim); font-weight: 800; }
.bx-cmp thead th.us { color: #fff; }
.bx-cmp td.us { color: #fff; font-weight: 700; background: rgba(255,255,255,.03); }
.bx-cmp td:first-child { color: var(--bx-mut); }
.bx-cmp tr:last-child td { border-bottom: 0; }
.bx-yes { color: var(--bx-up); font-weight: 900; margin-right: 6px; }
.bx-no { color: var(--bx-down); font-weight: 900; margin-right: 6px; }
@media (max-width: 640px) { .bx-cmp th, .bx-cmp td { padding: 12px 10px; font-size: 12.5px; } }

/* ============================================================= SAFETY ===== */
.bx-safe .bx-card { padding: 22px; }
.bx-safe .bx-h3 { font-size: 16.5px; margin-top: 14px; }

/* ================================================================ FAQ ===== */
.bx-faq { display: grid; gap: 10px; }
.bx-faq details { border-radius: 16px; border: 1px solid var(--bx-bd); background: var(--bx-bg); overflow: hidden; }
.bx-faq summary { list-style: none; cursor: pointer; padding: 18px 54px 18px 20px; position: relative;
  font-family: var(--brand-font, sans-serif); font-weight: 800; font-size: 15.5px; color: #fff; }
.bx-faq summary::-webkit-details-marker { display: none; }
.bx-faq summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 16px; background: rgba(255,255,255,.07); transition: transform .25s ease; }
.bx-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.bx-faq details p { margin: 0; padding: 0 20px 18px; font-size: 13.5px; line-height: 1.65; color: #b9b9c2; }
.bx-faq details p b { color: #fff; }
.bx-faq-cat { font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--bx-dim); margin: 20px 0 4px; }

/* ========================================================== CALCULATOR === */
.bx-calc { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .bx-calc { grid-template-columns: 1fr; } }
.bx-field { margin-bottom: 20px; }
.bx-field label { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--bx-mut); margin-bottom: 10px; }
.bx-field label b { color: #fff; font-variant-numeric: tabular-nums; }
.bx-field input[type=range] { width: 100%; accent-color: #b98cff; }
.bx-out { display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.bx-out-v { font-family: var(--brand-font, sans-serif); font-weight: 900; font-size: clamp(38px, 5vw, 60px); letter-spacing: -.04em; line-height: 1; }
.bx-out-v small { font-size: .38em; color: var(--bx-mut); margin-left: 6px; letter-spacing: 0; }
.bx-out-rows { display: grid; gap: 8px; font-size: 13px; color: var(--bx-mut); }
.bx-out-rows div { display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.07); padding-top: 8px; }
.bx-out-rows b { color: #fff; }

/* ============================================================= REFERRAL === */
.bx-ref-link { display: flex; gap: 8px; }
.bx-ref-link input { flex: 1 1 auto; min-width: 0; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--bx-bd); background: rgba(0,0,0,.4); color: #fff; font: inherit; font-size: 13px; }
.bx-ref-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.bx-ref-stats div { padding: 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--bx-bd); }
.bx-ref-stats b { display: block; font-family: var(--brand-font, sans-serif); font-weight: 900; font-size: 24px; letter-spacing: -.02em; margin-top: 4px; }

/* ================================================================ CTA ===== */
.bx-cta { text-align: center; padding: clamp(40px, 5vw, 64px) clamp(20px, 4vw, 48px); }
.bx-cta .bx-row { justify-content: center; margin-top: 22px; }
.bx-cta::after { content: ""; position: absolute; left: 50%; top: -40%; width: 70%; height: 90%; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(185,140,255,.16), rgba(185,140,255,0)); }

/* =========================================================== API TABLE === */
.bx-api { display: grid; gap: 10px; }
.bx-api-row { display: grid; grid-template-columns: 76px 230px 1fr; gap: 14px; align-items: baseline; padding: 14px 18px; border-radius: 14px; border: 1px solid var(--bx-bd); background: var(--bx-bg); }
@media (max-width: 760px) { .bx-api-row { grid-template-columns: 64px 1fr; } .bx-api-row p { grid-column: 1 / -1; } }
.bx-api-m { font: 900 11px ui-monospace, Menlo, monospace; padding: 4px 8px; border-radius: 6px; text-align: center; background: rgba(70,209,127,.14); color: var(--bx-up); }
.bx-api-m.post { background: rgba(127,216,255,.14); color: #8fdcff; }
.bx-api-p { font: 700 12.5px ui-monospace, Menlo, monospace; color: #fff; }
.bx-api-row p { margin: 0; font-size: 12.5px; color: var(--bx-mut); line-height: 1.5; }

/* the inline faq list on faq.html is replaced by the kit's accurate one */
.bx-hide { display: none !important; }
.bx-ico { flex: 0 0 auto; }

/* ---- phone header: the legacy nav overflowed at 390px ("How it works"
   wrapped to 3 lines, Connect was pushed off-screen). Below 640px the text
   links and the X icon step aside (they live in the footer too) so the logo,
   Launch app and Connect fit on one line. */
@media (max-width: 640px) {
  .sc-mpjzC > a:not(.baskt-nav-brand) { display: none !important; }
  .baskt-nav-x { display: none !important; }
  .baskt-launch, a.baskt-launch { padding-left: 12px !important; padding-right: 12px !important; }
}

/* ============================================================================
   HOW IT WORKS (/how-it-works) - the newcomer page. Static hero in
   how-it-works.html (.hw), the rest from baskt-pages.js (hwSteps, hwWays,
   hwMake, hwTrust, hwFaq, hwCta) inside .bx.hw-kit.
   Perf (Apple Silicon): no blend modes, no backdrop-filter, no filters, no
   infinite animations. Glows are static radial gradients. Motion = one-shot
   transform/opacity transitions when a block scrolls in (.hw-js .is-in), plus
   a one-shot rise of the hero packs on load.
   ========================================================================== */
.hw {
  --hw-ink: #f4f5f8;
  --hw-mut: rgba(236, 238, 245, .62);
  --hw-dim: rgba(236, 238, 245, .42);
  --hw-line: rgba(255, 255, 255, .08);
  --hw-line2: rgba(255, 255, 255, .14);
  --hw-panel: linear-gradient(180deg, rgba(255, 255, 255, .042), rgba(255, 255, 255, .016));
  --hw-sig: 95, 210, 240;
  --hw-rare: 156, 198, 255;
  --hw-epic: 178, 138, 255;
  --hw-leg: 246, 196, 83;
  --hw-ease: cubic-bezier(.2, .75, .2, 1);
  --hw-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  position: relative;
  color: var(--hw-ink);
  overflow-x: clip;
  padding-top: 0;
}
.hw *, .hw *::before, .hw *::after { box-sizing: border-box; }
.hw .bx.hw-kit { color: var(--hw-ink); }

/* ---------------------------------------------------------------- type */
.hw-kicker, .hw-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px;
  font: 600 11.5px/1 var(--hw-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--hw-mut);
}
.hw-kicker span {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgb(var(--hw-sig)); box-shadow: 0 0 0 4px rgba(var(--hw-sig), .14);
}
.hw-eyebrow::before { content: ""; width: 22px; height: 1px; background: linear-gradient(90deg, rgba(var(--hw-sig), .9), rgba(var(--hw-epic), .9)); }
.hw-h1 {
  font-family: var(--brand-font, sans-serif); font-weight: 800;
  font-size: clamp(42px, 5.6vw, 78px); line-height: .96; letter-spacing: -.025em;
  margin: 0 0 18px; color: #fff;
}
.hw-chrome {
  background: linear-gradient(180deg, #ffffff 0%, #e6edf7 38%, #8f9bb0 52%, #c9d3e3 66%, #ffffff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hw-lead { font-size: clamp(16px, 1.45vw, 19px); line-height: 1.55; color: var(--hw-mut); margin: 0 auto; max-width: 56ch; }
.hw-h2 {
  font-family: var(--brand-font, sans-serif); font-weight: 800;
  font-size: clamp(32px, 4.4vw, 58px); line-height: 1; letter-spacing: -.025em;
  margin: 0; color: #fff;
}
.hw-dim { color: rgba(236, 238, 245, .4); }
.hw-sub { font-size: 16.5px; line-height: 1.6; color: var(--hw-mut); margin: 16px 0 0; max-width: 52ch; }
.hw-h3 { font-family: var(--brand-font, sans-serif); font-weight: 800; font-size: clamp(28px, 2.6vw, 36px); line-height: 1; letter-spacing: -.02em; margin: 14px 0 12px; color: #fff; }
.hw-p { font-size: 15.5px; line-height: 1.6; color: var(--hw-mut); margin: 0; max-width: 46ch; }
.hw-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* -------------------------------------------------------------- buttons */
.hw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 26px; border: 0; border-radius: 999px; cursor: pointer;
  font: 700 15px/1 var(--base-font, system-ui), sans-serif; letter-spacing: .005em; text-decoration: none; white-space: nowrap;
  color: #0b0b0e; background: linear-gradient(180deg, #ffffff, #d8dde7);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .18), 0 10px 26px -12px rgba(255, 255, 255, .45);
  transition: transform .25s var(--hw-ease), box-shadow .25s var(--hw-ease);
}
.hw-btn:hover { transform: translateY(-2px); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .18), 0 16px 32px -12px rgba(255, 255, 255, .5); }
.hw-btn:focus-visible, .hw-pk:focus-visible, .hw-trow:focus-visible, .hw-logo:focus-within, .hw-trim:focus-visible { outline: 2px solid rgb(var(--hw-sig)); outline-offset: 3px; }
.hw-btn--ghost { color: #fff; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--hw-line2); }
.hw-btn--ghost:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32); }
.hw-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.hw-more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  font-weight: 700; font-size: 14px; color: #fff; text-decoration: none; opacity: .8; transition: opacity .2s, gap .2s;
}
.hw-more:hover { opacity: 1; gap: 11px; }
.hw-more svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ================================================================= HERO */
.hw-hero { position: relative; text-align: center; padding: clamp(32px, 4.2vw, 56px) 0 clamp(36px, 5vw, 60px); isolation: isolate; }
.hw-hero::before {                     /* static light: one wash per tier behind the line-up */
  content: ""; position: absolute; z-index: -1; left: 50%; bottom: 4%; width: min(1240px, 120%); height: 72%; transform: translateX(-50%); pointer-events: none;
  background:
    radial-gradient(22% 46% at 21% 62%, rgba(var(--hw-sig), .16), transparent 70%),
    radial-gradient(18% 42% at 46% 64%, rgba(var(--hw-rare), .10), transparent 70%),
    radial-gradient(18% 42% at 64% 64%, rgba(var(--hw-epic), .13), transparent 70%),
    radial-gradient(18% 42% at 82% 64%, rgba(var(--hw-leg), .12), transparent 70%);
}
.hw-hero-copy { position: relative; z-index: 1; }
.hw-lineup { display: flex; justify-content: center; align-items: stretch; gap: clamp(28px, 4.4vw, 72px); margin-top: clamp(24px, 2.8vw, 38px); }
.hw-group { display: flex; flex-direction: column; align-items: stretch; }
.hw-group-k {
  display: flex; align-items: center; gap: 12px; margin: 0 0 4px;
  font: 600 10.5px/1 var(--hw-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--hw-dim); white-space: nowrap;
}
.hw-group-k::before, .hw-group-k::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16)); }
.hw-group-k::after { background: linear-gradient(90deg, rgba(255, 255, 255, .16), transparent); }
.hw-group-row { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: clamp(2px, .8vw, 12px); }
.hw-pk {
  --w: clamp(108px, 15vw, 214px);
  position: relative; display: flex; flex-direction: column; align-items: center; width: var(--w);
  margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: center;
  animation: hw-rise .95s var(--hw-ease) both; animation-delay: calc(var(--i, 0) * 90ms + 120ms);
}
.hw-group--sig .hw-pk { --w: clamp(150px, 18.5vw, 262px); }
.hw-pk-art { position: relative; display: block; width: 100%; aspect-ratio: 640 / 986; }
.hw-pk-art::before {                  /* tier glow, static */
  content: ""; position: absolute; left: 4%; right: 4%; top: 16%; bottom: 14%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--tc), .30), rgba(var(--tc), 0)); opacity: .75;
  transition: opacity .45s var(--hw-ease), transform .45s var(--hw-ease);
}
.hw-pk-art::after {                   /* contact shadow on the floor */
  content: ""; position: absolute; left: 16%; right: 10%; bottom: 5.4%; height: 5%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
}
.hw-pk-art img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; transition: transform .5s var(--hw-ease); }
.hw-pk:hover .hw-pk-art img, .hw-pk:focus-visible .hw-pk-art img { transform: translateY(-10px) rotate(-1.2deg); }
.hw-pk:hover .hw-pk-art::before { opacity: 1; transform: scale(1.06); }
.hw-pk-cap { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 5px; margin-top: -4%; }
.hw-pk-cap b {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--brand-font, sans-serif); font-weight: 800; font-size: clamp(15px, 1.45vw, 20px); letter-spacing: .01em; color: #fff;
}
.hw-pk-cap b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--tc)); box-shadow: 0 0 10px rgba(var(--tc), .8); }
.hw-pk-cap > span { font-size: 13px; color: var(--hw-mut); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hw-hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: clamp(26px, 3vw, 40px); }
@keyframes hw-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* ============================================================== SECTIONS */
.hw-kit { padding: 0; }
.hw-sec { position: relative; padding-top: clamp(76px, 8.6vw, 128px); }
.hw-sec--last { padding-bottom: clamp(56px, 7vw, 100px); }
.hw-head { margin: 0 0 clamp(28px, 3.6vw, 48px); max-width: 760px; }
.hw-head--c { margin-left: auto; margin-right: auto; text-align: center; }
.hw-head--c .hw-sub { margin-left: auto; margin-right: auto; }
#hw-steps, #hw-ways, #hw-make, #hw-trust, #hw-faq { scroll-margin-top: 40px; }

/* one-shot reveal */
.hw-js .hw-rv { opacity: 0; transform: translateY(26px); }
.hw-js .hw-rv.is-in { opacity: 1; transform: none; transition: opacity .8s var(--hw-ease), transform .9s var(--hw-ease); }

/* ================================================================ STEPS */
.hw-steps { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.hw-step {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; min-height: 540px;
  border-radius: 30px; border: 1px solid var(--hw-line); background: var(--hw-panel);
}
.hw-step::before {                     /* top hairline highlight */
  content: ""; position: absolute; left: 8%; right: 8%; top: 0; height: 1px; z-index: 3;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
}
.hw-step--a { grid-column: span 5; }
.hw-step--b { grid-column: span 7; }
.hw-step--c { grid-column: span 7; }
.hw-step--d { grid-column: span 5; }
.hw-js .hw-step--b.hw-rv.is-in, .hw-js .hw-step--d.hw-rv.is-in { transition-delay: .12s; }
.hw-step-txt { position: relative; z-index: 4; padding: 32px 34px 0; }
.hw-num {
  display: inline-grid; place-items: center; height: 26px; padding: 0 11px; border-radius: 999px;
  font: 600 11.5px/1 var(--hw-mono); letter-spacing: .12em; color: #fff;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--hw-line2);
}
.hw-step-txt h3 { font-family: var(--brand-font, sans-serif); font-weight: 800; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.02; letter-spacing: -.02em; margin: 16px 0 10px; color: #fff; }
.hw-step-txt p { font-size: 15.5px; line-height: 1.55; color: var(--hw-mut); margin: 0; max-width: 36ch; }
.hw-stage { position: relative; flex: 1; min-height: 330px; }

/* --- 01 pick: a hand of the four packs, Signature lifted, a tap on it */
.hw-stage--pick::before {
  content: ""; position: absolute; left: 50%; bottom: -10%; width: 120%; height: 90%; transform: translateX(-50%);
  background: radial-gradient(40% 50% at 32% 70%, rgba(var(--hw-sig), .18), transparent 70%), radial-gradient(50% 50% at 62% 75%, rgba(var(--hw-epic), .1), transparent 70%);
}
.hw-fan { position: absolute; left: calc(50% + 18px); bottom: 34px; width: 0; height: 0; }
.hw-fan-pk {
  --pw: clamp(112px, 10.4vw, 150px);
  position: absolute; bottom: 0; left: calc(var(--pw) * -.5); width: var(--pw); aspect-ratio: 640 / 986;
  transform-origin: 50% 260%;
  transform: rotate(calc((var(--k) - 1.5) * 10deg));
  z-index: calc(var(--k) + 1);
}
.hw-fan-pk img { display: block; width: 100%; height: 100%; }
.hw-fan-pk::after {                     /* contact shadow */
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 3%; height: 6%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0));
}
.hw-fan-pk.is-on { z-index: 6; transform: rotate(-15deg) translateY(-46px); }
.hw-fan-pk.is-on::before {              /* selected: tier glow behind the lifted pack */
  content: ""; position: absolute; inset: 2% -14% 6%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(var(--tc), .6), rgba(var(--tc), 0));
}
.hw-tap { position: absolute; z-index: 8; left: calc(50% - 116px); bottom: 186px; width: 32px; height: 32px; }
.hw-tap i {
  position: absolute; left: -15px; top: -15px; width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .9); box-shadow: 0 0 0 8px rgba(255, 255, 255, .1), 0 0 0 18px rgba(255, 255, 255, .04);
}
.hw-tap svg { position: relative; width: 30px; height: 30px; fill: #fff; stroke: #0b0b0e; stroke-width: 1.4; stroke-linejoin: round; filter: none; }
.hw-js .hw-step--a:not(.is-in) .hw-fan-pk { transform: rotate(0deg) translateY(40px); }
.hw-js .hw-step--a:not(.is-in) .hw-tap { opacity: 0; transform: translate(26px, 26px); }
.hw-js .hw-step--a.is-in .hw-fan-pk { transition: transform 1s var(--hw-ease); transition-delay: calc(.15s + var(--k) * 60ms); }
.hw-js .hw-step--a.is-in .hw-tap { transition: opacity .5s ease .75s, transform .7s var(--hw-ease) .75s; }

/* --- 02 open: the Signature pack with three cards popping out of it */
.hw-burst {
  position: absolute; left: 50%; top: 46%; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(var(--hw-sig), .34), rgba(var(--hw-sig), .08) 55%, rgba(var(--hw-sig), 0)),
    repeating-conic-gradient(from 4deg, rgba(190, 240, 255, .10) 0deg 3deg, rgba(190, 240, 255, 0) 3deg 15deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 22%, transparent 78%); mask-image: radial-gradient(closest-side, #000 22%, transparent 78%);
}
.hw-open-pk { position: absolute; z-index: 3; left: 50%; bottom: -96px; width: clamp(200px, 19vw, 248px); height: auto; transform: translateX(-50%); display: block; }
.hw-pop { position: absolute; z-index: 2; left: 50%; bottom: 168px; width: 0; height: 0; }
.hw-pop article.holo-card.bkc.mini { position: absolute; left: -58px; bottom: 0; margin: 0; transform-origin: 50% 100%; }
.hw-pop article.holo-card.bkc.mini:nth-child(1) { transform: translate(-96px, -4px) rotate(-17deg); }
.hw-pop article.holo-card.bkc.mini:nth-child(2) { transform: translate(0, -34px); z-index: 2; }
.hw-pop article.holo-card.bkc.mini:nth-child(3) { transform: translate(96px, -4px) rotate(17deg); }
.hw-js .hw-step--b:not(.is-in) .hw-pop article.holo-card.bkc.mini { transform: translate(0, 120px) rotate(0deg); }
.hw-js .hw-step--b.is-in .hw-pop article.holo-card.bkc.mini { transition: transform 1s var(--hw-ease); transition-delay: .3s; }
.hw-js .hw-step--b.is-in .hw-pop article.holo-card.bkc.mini:nth-child(2) { transition-delay: .4s; }
.hw-chip {
  position: absolute; z-index: 4; left: 30px; bottom: 30px;
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 10px; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: #eafaf1; background: rgba(15, 26, 20, .92); box-shadow: inset 0 0 0 1px rgba(70, 209, 127, .45), 0 10px 24px -10px rgba(0, 0, 0, .8);
}
.hw-chip svg { width: 18px; height: 18px; fill: none; stroke: #46d17f; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hw-js .hw-step--b:not(.is-in) .hw-chip { opacity: 0; transform: translateY(8px); }
.hw-js .hw-step--b.is-in .hw-chip { transition: opacity .5s ease 1s, transform .6s var(--hw-ease) 1s; }

/* --- 03 get: a fanned trio of the approved cards */
.hw-stage--get::before {
  content: ""; position: absolute; left: 50%; top: 58%; width: 90%; height: 90%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(var(--hw-leg), .16), rgba(var(--hw-epic), .07) 60%, transparent);
}
.hw-trio { position: absolute; left: 50%; bottom: 36px; width: 0; height: 0; }
.hw-trio article.holo-card.bkc {
  --cw: clamp(124px, 14.6vw, 204px);
  position: absolute; left: calc(var(--cw) * -.5); bottom: 0; width: var(--cw); margin: 0; transform-origin: 50% 100%;
}
.hw-trio article.holo-card.bkc:nth-child(1) { transform: translateX(-74%) rotate(-9deg); }
.hw-trio article.holo-card.bkc:nth-child(2) { transform: translateY(-20px); z-index: 2; }
.hw-trio article.holo-card.bkc:nth-child(3) { transform: translateX(74%) rotate(9deg); }
.hw-trio article.holo-card.bkc:hover { z-index: 6; }
.hw-js .hw-step--c:not(.is-in) .hw-trio article.holo-card.bkc { transform: translateY(30px) rotate(0deg); }
.hw-js .hw-step--c.is-in .hw-trio article.holo-card.bkc { transition: transform 1.05s var(--hw-ease) .2s; }

/* --- 04 keep: the wallet the coins land in */
.hw-stage--keep::before {
  content: ""; position: absolute; left: 50%; top: 62%; width: 110%; height: 90%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(70, 209, 127, .10), transparent 70%);
}
.hw-stage--keep { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 28px 24px 0; }
.hw-wallet {
  position: relative; margin-bottom: -26px; width: min(350px, 100%);
  padding: 18px 16px 42px; border-radius: 24px;
  background: linear-gradient(180deg, #17171c, #111115); border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.hw-wtop { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 12px; }
.hw-wt { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; color: #fff; }
.hw-wt svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hw-waddr { font: 500 11.5px/1 var(--hw-mono); color: var(--hw-dim); padding: 6px 9px; border-radius: 999px; background: rgba(255, 255, 255, .05); }
.hw-wrow {
  display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px;
  padding: 10px 8px; border-radius: 14px;
}
.hw-wrow + .hw-wrow { border-top: 1px solid rgba(255, 255, 255, .05); }
.hw-wrow img { width: 38px; height: 38px; border-radius: 50%; display: block; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
.hw-wrow b { font-weight: 800; font-size: 14.5px; color: #fff; letter-spacing: .02em; }
.hw-wamt { font: 600 13.5px/1 var(--hw-mono); color: #d9fbe8; }
.hw-wamt::before { content: "+"; color: #46d17f; margin-right: 2px; }
.hw-wacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.hw-wacts span {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 11px 4px 10px; border-radius: 14px;
  font-size: 12px; font-weight: 700; color: #fff; text-align: center; background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.hw-wacts span.on { background: rgba(255, 255, 255, .11); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.hw-wacts svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hw-js .hw-step--d:not(.is-in) .hw-wrow { opacity: 0; transform: translateX(-14px); }
.hw-js .hw-step--d.is-in .hw-wrow { transition: opacity .5s ease, transform .6s var(--hw-ease); transition-delay: calc(.35s + var(--k) * 110ms); }

/* =========================================================== TWO WAYS */
.hw-ways { display: grid; grid-template-columns: minmax(0, 1fr) 0 minmax(0, 1fr); gap: 16px; align-items: stretch; }
.hw-or { position: relative; z-index: 2; align-self: center; width: 0; display: flex; justify-content: center; }
.hw-or span {
  flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
  font: 600 12px/1 var(--hw-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--hw-mut);
  background: #0e0e0e; box-shadow: inset 0 0 0 1px var(--hw-line2), 0 0 0 6px #0e0e0e;
}
.hw-way {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column;
  border-radius: 30px; border: 1px solid var(--hw-line); background: var(--hw-panel);
}
.hw-way::before { content: ""; position: absolute; inset: 0 0 auto; height: 340px; z-index: -1; }
.hw-way--sig::before { background: radial-gradient(60% 70% at 50% 62%, rgba(var(--hw-sig), .22), transparent 72%); }
.hw-way--tier::before { background: radial-gradient(30% 60% at 28% 62%, rgba(var(--hw-rare), .14), transparent 72%), radial-gradient(30% 60% at 50% 60%, rgba(var(--hw-epic), .18), transparent 72%), radial-gradient(30% 60% at 72% 62%, rgba(var(--hw-leg), .16), transparent 72%); }
.hw-js .hw-way--tier.hw-rv.is-in { transition-delay: .12s; }
.hw-way-vis { position: relative; height: clamp(260px, 25vw, 330px); }
.hw-way-vis .hw-ways-pk { position: absolute; bottom: -2%; left: 50%; width: clamp(170px, 15.5vw, 214px); height: auto; transform: translateX(-50%); display: block; transition: transform .6s var(--hw-ease); }
.hw-way--tier .hw-ways-pk { width: clamp(132px, 12vw, 176px); }
.hw-way--tier .hw-ways-pk:nth-child(1) { transform: translateX(-112%) rotate(-7deg) scale(.94); }
.hw-way--tier .hw-ways-pk:nth-child(2) { transform: translateX(-50%) translateY(-14px); z-index: 2; }
.hw-way--tier .hw-ways-pk:nth-child(3) { transform: translateX(12%) rotate(7deg) scale(.94); }
.hw-way-body { position: relative; display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 6px 36px 36px; }
.hw-tag {
  display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px;
  font: 600 10.5px/1 var(--hw-mono); letter-spacing: .18em; text-transform: uppercase;
}
.hw-way--sig .hw-tag { color: rgb(var(--hw-sig)); background: rgba(var(--hw-sig), .1); box-shadow: inset 0 0 0 1px rgba(var(--hw-sig), .3); }
.hw-way--tier .hw-tag { color: rgb(var(--hw-leg)); background: rgba(var(--hw-leg), .09); box-shadow: inset 0 0 0 1px rgba(var(--hw-leg), .28); }
.hw-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; margin: 24px 0 28px; }
.hw-stats > div { padding: 16px 14px 14px; border-radius: 18px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px var(--hw-line); }
.hw-stats > div > b { display: block; font-family: var(--brand-font, sans-serif); font-weight: 800; font-size: clamp(24px, 2.2vw, 30px); line-height: 1; color: #fff; letter-spacing: -.01em; }
.hw-stats > div > span { display: block; margin-top: 8px; font-size: 12.5px; line-height: 1.35; color: var(--hw-mut); }
.hw-way .hw-btn { margin-top: auto; }
.hw-trows { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 24px; }
.hw-trow {
  display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 14px; width: 100%;
  min-height: 58px; padding: 0 12px 0 18px; border: 0; border-radius: 16px; cursor: pointer; text-align: left;
  font: inherit; color: #fff; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px var(--hw-line);
  transition: background .25s ease, box-shadow .25s ease, transform .25s var(--hw-ease);
}
.hw-trow:hover { background: rgba(var(--tc), .08); box-shadow: inset 0 0 0 1px rgba(var(--tc), .4); transform: translateX(3px); }
.hw-dot { width: 9px; height: 9px; border-radius: 50%; background: rgb(var(--tc)); box-shadow: 0 0 12px rgba(var(--tc), .9); }
.hw-trow b { font-family: var(--brand-font, sans-serif); font-weight: 800; font-size: 19px; letter-spacing: .01em; }
.hw-trow-n { font-size: 13px; color: var(--hw-dim); }
.hw-trow-p { font: 600 14.5px/1 var(--hw-mono); color: #fff; font-variant-numeric: tabular-nums; }
.hw-trow-go {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 14px; border-radius: 999px;
  font-size: 13px; font-weight: 800; color: #0b0b0e; background: rgb(var(--tc));
}
.hw-trow-go svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ========================================================= MAKE YOUR OWN */
.hw-make {
  --trim: 255, 95, 107;
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: stretch;
  border-radius: 34px; border: 1px solid var(--hw-line); background: var(--hw-panel);
}
.hw-make-vis { position: relative; display: grid; place-items: center; min-height: 600px; padding: 40px 20px; }
.hw-make-glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(48% 46% at 50% 52%, rgba(var(--trim), .30), rgba(var(--trim), .06) 60%, transparent 76%);
  transition: background .5s ease;
}
.hw-make-img { position: relative; width: min(370px, 86%); height: auto; display: block; transition: opacity .3s ease, transform .6s var(--hw-ease); }
.hw-make-vis.is-busy .hw-make-img { opacity: .5; transform: scale(.985); }
.hw-make-badge {
  position: absolute; left: 24px; top: 24px; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px;
  font: 600 11px/1 var(--hw-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .78);
  background: rgba(10, 10, 12, .7); box-shadow: inset 0 0 0 1px var(--hw-line2);
}
.hw-make-badge i { width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--trim)); }
.hw-make-vis.is-busy .hw-make-badge i { background: #fff; }
.hw-make-body { position: relative; padding: clamp(36px, 4.2vw, 60px) clamp(28px, 4.2vw, 60px) clamp(32px, 4vw, 52px) clamp(8px, 1vw, 16px); }
.hw-make-body .hw-sub { margin-top: 14px; }
.hw-msteps { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; }
.hw-msteps li { display: grid; grid-template-columns: 34px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--hw-line); }
.hw-msteps li > div > b { display: block; font-size: 16px; font-weight: 800; color: #fff; margin: 6px 0 12px; }
.hw-mn {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  font: 700 13px/1 var(--hw-mono); color: #fff; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--hw-line2);
}
.hw-input {
  width: 100%; max-width: 340px; height: 46px; padding: 0 16px; border: 0; border-radius: 14px; outline: 0;
  font: 800 16px/1 var(--brand-font, sans-serif); letter-spacing: .06em; text-transform: uppercase; color: #fff;
  background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px var(--hw-line2); transition: box-shadow .2s ease;
}
.hw-input:focus { box-shadow: inset 0 0 0 1.5px rgb(var(--trim)); }
.hw-hint { margin: 8px 0 0; font-size: 13px; color: #ffb4a2; }
.hw-hint[hidden] { display: none; }
.hw-logos, .hw-trims { display: flex; flex-wrap: wrap; gap: 10px; }
.hw-logo {
  position: relative; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--hw-line2); color: #fff;
  transition: box-shadow .2s ease, transform .2s var(--hw-ease);
}
.hw-logo img { width: 38px; height: 38px; border-radius: 50%; display: block; object-fit: cover; }
.hw-logo:hover { transform: translateY(-2px); }
.hw-logo.is-on { box-shadow: 0 0 0 2px #0e0e0e, 0 0 0 4px rgb(var(--trim)); }
.hw-logo--up { border: 1.5px dashed rgba(255, 255, 255, .28); background: transparent; box-shadow: none; }
.hw-logo--up input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.hw-logo--up svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.hw-trim {
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .85), rgba(var(--sw), 1) 34%, rgba(var(--sw), .55) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); transition: transform .2s var(--hw-ease), box-shadow .2s ease;
}
.hw-trim:hover { transform: scale(1.1); }
.hw-trim.is-on { box-shadow: 0 0 0 2px #0e0e0e, 0 0 0 4px rgb(var(--sw)); }
.hw-earn b em { font-style: normal; color: rgb(var(--trim)); transition: color .4s ease; }
.hw-earn p { margin: -4px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--hw-mut); max-width: 44ch; }
.hw-make-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; }
.hw-note { font-size: 13px; color: var(--hw-dim); max-width: 30ch; line-height: 1.45; }

/* ================================================================ TRUST */
.hw-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hw-titem { position: relative; padding: 32px 30px 30px; border-radius: 26px; border: 1px solid var(--hw-line); background: var(--hw-panel); }
.hw-js .hw-titem.hw-rv.is-in:nth-child(2) { transition-delay: .08s; }
.hw-js .hw-titem.hw-rv.is-in:nth-child(3) { transition-delay: .16s; }
.hw-ticon {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 1px var(--hw-line2);
}
.hw-ticon svg { width: 23px; height: 23px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hw-titem h4 { font-family: var(--brand-font, sans-serif); font-weight: 800; font-size: 22px; letter-spacing: -.01em; margin: 22px 0 10px; color: #fff; }
.hw-titem p { font-size: 15px; line-height: 1.6; color: var(--hw-mut); margin: 0; }
.hw-proof { display: flex; align-items: center; gap: 5px; margin-top: 20px; flex-wrap: nowrap; }
.hw-proof span {
  display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 9px; border-radius: 999px; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--hw-line2);
}
.hw-proof span svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hw-proof span:last-child { color: #d9fbe8; box-shadow: inset 0 0 0 1px rgba(70, 209, 127, .45); }
.hw-proof span:last-child svg { stroke: #46d17f; }
.hw-proof i { flex: 1 1 0; min-width: 6px; max-width: 40px; height: 1px; background: rgba(255, 255, 255, .22); }

/* ================================================================== FAQ */
.hw-faq { max-width: 860px; margin: 0 auto; }
.hw-faq details { border-bottom: 1px solid var(--hw-line); }
.hw-faq details:first-child { border-top: 1px solid var(--hw-line); }
.hw-faq summary {
  position: relative; list-style: none; cursor: pointer; padding: 24px 52px 24px 2px;
  font-family: var(--brand-font, sans-serif); font-weight: 800; font-size: clamp(18px, 1.7vw, 22px); letter-spacing: -.005em; color: #fff;
}
.hw-faq summary::-webkit-details-marker { display: none; }
.hw-faq summary i {
  position: absolute; right: 6px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--hw-line2); transition: transform .3s var(--hw-ease), background .3s ease;
}
.hw-faq summary i::before, .hw-faq summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.6px; margin: -.8px 0 0 -5.5px; background: #fff; border-radius: 2px; }
.hw-faq summary i::after { transform: rotate(90deg); }
.hw-faq details[open] summary i { transform: rotate(45deg); background: rgba(255, 255, 255, .08); }
.hw-faq details p { margin: -6px 0 0; padding: 0 60px 26px 2px; font-size: 16px; line-height: 1.65; color: var(--hw-mut); }
.hw-faq .hw-more { margin-top: 26px; }

/* ================================================================== CTA */
.hw-cta {
  position: relative; overflow: hidden; isolation: isolate; text-align: center;
  padding: clamp(56px, 7vw, 96px) 24px; border-radius: 34px; border: 1px solid var(--hw-line); background: #101013;
}
.hw-cta::before {                      /* soft top sheen + a four-tier glow along the bottom edge */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(255, 255, 255, .06), transparent 70%),
    radial-gradient(26% 38% at 20% 100%, rgba(var(--hw-sig), .22), transparent 75%),
    radial-gradient(22% 34% at 42% 100%, rgba(var(--hw-rare), .14), transparent 75%),
    radial-gradient(22% 34% at 60% 100%, rgba(var(--hw-epic), .2), transparent 75%),
    radial-gradient(26% 38% at 80% 100%, rgba(var(--hw-leg), .18), transparent 75%);
}
.hw-cta::after {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--hw-sig), .8), rgba(var(--hw-rare), .7), rgba(var(--hw-epic), .8), rgba(var(--hw-leg), .8), transparent);
}
.hw-cta-mark { width: 56px; height: 56px; display: block; margin: 0 auto 22px; opacity: .92; }
.hw-cta .hw-sub { margin: 18px auto 30px; }

/* ============================================================ RESPONSIVE */
@media (max-width: 1100px) {
  .hw-step--a, .hw-step--b, .hw-step--c, .hw-step--d { grid-column: span 6; }
  .hw-make { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .hw-proof { flex-wrap: wrap; }
  .hw-proof i { display: none; }
}
@media (max-width: 860px) {
  .hw-steps { grid-template-columns: minmax(0, 1fr); }
  .hw-step--a, .hw-step--b, .hw-step--c, .hw-step--d { grid-column: auto; }
  .hw-step { min-height: 0; }
  .hw-stage { min-height: 340px; flex: none; }
  .hw-ways { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hw-or { width: auto; height: 0; align-self: stretch; }
  .hw-or span { margin-top: -25px; }
  .hw-way + .hw-or + .hw-way { margin-top: 16px; }
  .hw-make { grid-template-columns: minmax(0, 1fr); }
  .hw-make-vis { min-height: 0; padding: 48px 20px 8px; }
  .hw-make-img { width: min(300px, 74%); }
  .hw-make-body { padding: 8px 28px 34px; }
  .hw-trust { grid-template-columns: minmax(0, 1fr); }
  .hw-js .hw-titem.hw-rv.is-in:nth-child(n) { transition-delay: 0s; }
}
@media (max-width: 640px) {
  .hw-hero { padding-top: 28px; }
  .hw-h1 { font-size: clamp(40px, 11.6vw, 56px); }
  .hw-lead { font-size: 16px; }
  .hw-lineup { flex-direction: column; align-items: stretch; gap: 22px; margin-top: 28px; }
  .hw-group--sig .hw-pk { --w: min(232px, 62vw); }
  .hw-group--tiers .hw-pk { --w: calc((100vw - 32px - 8px) / 3); }
  .hw-group-row { gap: 4px; }
  .hw-pk-cap b { font-size: 15px; gap: 6px; }
  .hw-pk-cap b::before { width: 6px; height: 6px; }
  .hw-pk-cap > span { font-size: 12px; }
  .hw-hero::before { height: 60%; background: radial-gradient(50% 30% at 50% 30%, rgba(var(--hw-sig), .16), transparent 70%), radial-gradient(60% 24% at 50% 82%, rgba(var(--hw-epic), .12), transparent 70%); }
  .hw-hero-cta .hw-btn { flex: 1 1 0; padding: 0 14px; }
  .hw-step-txt { padding: 26px 24px 0; }
  .hw-stage { min-height: 300px; }
  .hw-stage--pick { min-height: 268px; }
  .hw-fan { bottom: 28px; }
  .hw-fan-pk { --pw: 100px; }
  .hw-tap { left: calc(50% - 82px); bottom: 136px; }
  .hw-stage--open { min-height: 390px; }
  .hw-open-pk { width: 186px; bottom: -78px; }
  .hw-pop { bottom: 132px; }
  .hw-pop article.holo-card.bkc.mini:nth-child(1) { transform: translate(-74px, 4px) rotate(-13deg) scale(.92); }
  .hw-pop article.holo-card.bkc.mini:nth-child(2) { transform: translate(0, -26px) scale(.92); }
  .hw-pop article.holo-card.bkc.mini:nth-child(3) { transform: translate(74px, 4px) rotate(13deg) scale(.92); }
  .hw-chip { left: 50%; bottom: auto; top: 6px; transform: translateX(-50%); font-size: 12px; height: 30px; }
  .hw-js .hw-step--b:not(.is-in) .hw-chip { transform: translate(-50%, 8px); }
  .hw-stage--keep { padding: 26px 16px 0; }
  .hw-proof { gap: 5px; }
  .hw-proof span { font-size: 11.5px; padding: 0 9px; gap: 5px; }
  .hw-stage--get { min-height: 280px; }
  .hw-trio { bottom: 26px; }
  .hw-trio article.holo-card.bkc { --cw: 118px; }
  .hw-way-vis { height: 250px; }
  .hw-way-body { padding: 4px 22px 26px; }
  .hw-stats { gap: 8px; }
  .hw-stats > div { padding: 14px 10px 12px; }
  .hw-stats > div > b { font-size: 22px; }
  .hw-stats > div > span { font-size: 11.5px; }
  .hw-trow { grid-template-columns: auto 1fr auto auto; gap: 10px; padding: 0 8px 0 14px; }
  .hw-trow-n { display: none; }
  .hw-trow b { font-size: 17px; }
  .hw-way .hw-btn, .hw-make-cta .hw-btn { width: 100%; }
  .hw-make-body { padding: 4px 20px 28px; }
  .hw-make-badge { left: 16px; top: 16px; }
  .hw-msteps li { grid-template-columns: 30px 1fr; gap: 12px; }
  .hw-mn { width: 30px; height: 30px; font-size: 12px; }
  .hw-input { max-width: none; }
  .hw-logos, .hw-trims { gap: 8px; }
  .hw-trim { width: 26px; height: 26px; }
  .hw-trims { gap: 7px; }
  .hw-titem { padding: 26px 22px 24px; }
  .hw-faq summary { padding: 20px 46px 20px 0; }
  .hw-faq details p { padding: 0 8px 22px 0; font-size: 15px; }
  .hw-cta { padding: 48px 20px; border-radius: 28px; }
  .hw-cta .hw-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hw-pk { animation: none; }
  .hw-pk-art img, .hw-btn, .hw-trow, .hw-logo, .hw-trim, .hw-make-img { transition: none; }
}

/* ============================================================================
   SITE FOOTER (.bn-foot) + BOTTOM PROGRESSIVE BLUR (.bn-pblur)
   One footer, identical markup on every page that has one. Black stage,
   white/ice chrome type, cyan (58,190,221) used only as a small accent.
   Left: a "Rip the pack" card with the real Signature pack and three real
   Baskt cards bursting over its top edge (centred hero when stacked). Right: a
   glass link plate with the Baskt mark pressed into it and three spec tiles
   across its foot. Then the legal row and an oversized chrome wordmark cut off
   by the bottom of the page. The minis are built near view (baskt-fx.js).
   Motion (baskt-fx.js): one wordmark sheen on first view, a status pulse only
   while the footer is on screen. Nothing animates on scrolling content.
   ========================================================================== */
:root {
  --bn-cy: 58,190,221; --bn-ice: 120,225,245;
  --bn-ease: cubic-bezier(.16,1,.3,1); --bn-spring: cubic-bezier(.32,.72,0,1);
  --bn-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --bn-chrome: linear-gradient(180deg,#ffffff 0%,#f1f4f6 46%,#a9b2ba 100%);
}
.bn-nw { white-space: nowrap; }

/* pill CTA with the arrow nested in its own disc (shared with the homepage bento) */
.bn-cta { display: inline-flex; align-items: center; gap: 14px; padding: 6px 6px 6px 22px; border-radius: 999px; text-decoration: none; white-space: nowrap;
  font: 700 15px/1 var(--base-font, sans-serif); letter-spacing: -.005em; color: #0b0b0c;
  background: linear-gradient(180deg,#ffffff 0%,#e4e8eb 100%); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 -1px 0 rgba(0,0,0,.18) inset, 0 14px 34px -10px rgba(var(--bn-cy),.45);
  transition: transform .5s var(--bn-spring), box-shadow .5s var(--bn-spring); }
.bn-cta i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: #0b0b0c; color: #fff; transition: transform .5s var(--bn-spring); }
.bn-cta svg { width: 15px; height: 15px; }
.bn-cta:hover { color: #0b0b0c; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 -1px 0 rgba(0,0,0,.18) inset, 0 18px 44px -10px rgba(var(--bn-cy),.65); }
.bn-cta:hover i { transform: translate(2px,-1px) scale(1.06); }
.bn-cta:active { transform: scale(.98); }
.bn-cta:focus-visible { outline: 2px solid rgb(var(--bn-ice)); outline-offset: 3px; }

.bn-foot { position: relative; overflow: hidden; isolation: isolate; color: #fff; background: #0b0b0c; border-top: 1px solid rgba(255,255,255,.06); }
.bn-foot *, .bn-foot *::before, .bn-foot *::after { box-sizing: border-box; }
.bn-foot::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, rgba(var(--bn-ice),0) 10%, rgba(var(--bn-ice),.8) 50%, rgba(var(--bn-ice),0) 90%); opacity: .6; }
.bn-foot::after { content: ""; position: absolute; left: 50%; bottom: 0; width: min(1500px,150%); height: 70%; transform: translateX(-50%); pointer-events: none; z-index: 0;
  background: radial-gradient(46% 62% at 50% 100%, rgba(var(--bn-cy),.2), rgba(var(--bn-cy),.05) 52%, rgba(var(--bn-cy),0) 76%); }
.bn-foot-in { position: relative; z-index: 2; width: min(1200px, calc(100% - 32px)); margin: 0 auto; padding-top: clamp(96px,8vw,116px); }
.bn-foot-top { display: grid; grid-template-columns: minmax(0,1.22fr) minmax(0,1fr); gap: 16px; align-items: stretch; }
.bn-foot a { -webkit-tap-highlight-color: transparent; }

/* ---- left: the "Rip the pack" card (double bezel), pack + cards burst over its top edge */
.bn-fcta { position: relative; border-radius: 30px; padding: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.018) 40%, rgba(255,255,255,.03));
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 40px 80px -40px rgba(0,0,0,.9); }
.bn-fcta-core { position: relative; height: 100%; overflow: hidden; border-radius: 24px; padding: clamp(28px,3vw,40px) 42% clamp(28px,3vw,38px) clamp(26px,3vw,40px);
  background: radial-gradient(58% 78% at 80% 88%, rgba(var(--bn-cy),.26), rgba(var(--bn-cy),.06) 52%, rgba(var(--bn-cy),0) 72%),
    radial-gradient(120% 70% at 0% 0%, rgba(255,255,255,.05), rgba(255,255,255,0) 50%),
    linear-gradient(180deg,#161718 0%,#0d0d0e 62%,#0b0b0c 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.035); }
/* fine machined grid that fades out toward the copy */
.bn-fcta-core::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 28px 28px; background-position: -1px -1px;
  -webkit-mask: radial-gradient(70% 90% at 82% 70%, #000, transparent 70%); mask: radial-gradient(70% 90% at 82% 70%, #000, transparent 70%); }
.bn-fcta-copy { position: relative; z-index: 2; }
.bn-foot-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-bottom: 22px; border-radius: 8px; }
.bn-foot-logo img { width: 30px; height: 30px; object-fit: contain; }
.bn-foot-logo span { font-family: var(--brand-font, sans-serif); font-weight: 800; font-size: 22px; line-height: 1; letter-spacing: -.03em; color: #fff; }
.bn-foot-line { margin: 0 0 14px; font-family: var(--brand-font, sans-serif); font-weight: 800; font-size: clamp(32px,3.1vw,44px); line-height: .98; letter-spacing: -.025em; padding-bottom: .04em;
  background: var(--bn-chrome); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.bn-foot-tag { margin: 0 0 24px; max-width: 34ch; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.6); }
.bn-foot-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bn-ghost { display: inline-flex; align-items: center; height: 46px; padding: 0 20px; border-radius: 999px; white-space: nowrap; text-decoration: none;
  font: 700 14px/1 var(--base-font, sans-serif); color: #fff; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  transition: background .3s ease, box-shadow .3s ease, transform .5s var(--bn-spring); }
.bn-ghost:hover { color: #fff; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.bn-ghost:active { transform: scale(.98); }
.bn-cta-sm { font-size: 14px; padding-left: 18px; }
.bn-cta-sm i { width: 34px; height: 34px; }
/* system mono on purpose: the footer is on every page and must not pull a web font of its own */
.bn-fcta-checks { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 24px 0 0; padding: 0;
  font: 500 11.5px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; color: rgba(255,255,255,.56); }
.bn-fcta-checks li { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.bn-fcta-checks li::before { content: ""; width: 8px; height: 4px; margin-top: -3px; border-left: 1.5px solid rgb(var(--bn-ice)); border-bottom: 1.5px solid rgb(var(--bn-ice)); transform: rotate(-45deg); }

.bn-fcta-stage { --pw: clamp(166px,14vw,198px); --cw: clamp(90px,7.7vw,110px); position: absolute; z-index: 3; right: 14px; bottom: 6px; width: 42%; height: calc(100% + 92px); pointer-events: none; }
.bn-fcta-burst { position: absolute; left: 50%; bottom: calc(var(--pw) * 1.12); width: 420px; height: 340px; margin-left: -210px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--bn-ice),.32), rgba(var(--bn-cy),.10) 44%, rgba(var(--bn-cy),0) 72%); }
.bn-fcta-pack { position: absolute; left: 50%; bottom: 18px; width: var(--pw); height: auto; margin-left: calc(var(--pw) / -2); z-index: 2; display: block; transform: rotate(-3deg);
  filter: drop-shadow(0 26px 30px rgba(0,0,0,.65)); user-select: none; -webkit-user-drag: none; }
.bn-fcta-card { position: absolute; left: 50%; bottom: calc(18px + var(--pw) * 1.43 - 44px); width: var(--cw); margin-left: calc(var(--cw) / -2); z-index: 1; transform-origin: 50% 100%; }
.bn-fcta-card article.holo-card.bkc.mini { width: 100% !important; margin: 0 !important; }
.bn-fcta-card--l { transform: translateX(-62%) rotate(-17deg); }
.bn-fcta-card--r { transform: translateX(62%) rotate(15deg); }
.bn-fcta-card--c { transform: translateY(-36px) rotate(-2deg); z-index: 1; }
.bn-fcta-fb { display: block; width: 100%; aspect-ratio: 5/7; border-radius: 9px; background: #15171a center/cover no-repeat; box-shadow: 0 0 0 1px rgba(255,255,255,.2); }

/* ---- right: the glass link plate */
.bn-foot-plate { display: flex; flex-direction: column; border-radius: 30px; padding: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015) 45%, rgba(255,255,255,.03)); box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 40px 80px -48px rgba(0,0,0,.9); }
.bn-foot-cols-w { position: relative; flex: 1; overflow: hidden; border-radius: 24px 24px 8px 8px;
  background: radial-gradient(90% 120% at 100% 0%, rgba(var(--bn-cy),.08), rgba(var(--bn-cy),0) 60%), linear-gradient(180deg,#151617,#0e0e0f);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 0 0 1px rgba(255,255,255,.035); }
.bn-foot-cols { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr) minmax(0,1.1fr); gap: 30px 20px; padding: 30px 30px 26px; }
.bn-foot-cols h4 { margin: 0 0 12px; font: 700 10.5px/1 var(--base-font, sans-serif); letter-spacing: .2em; text-transform: uppercase; color: rgba(var(--bn-ice),.82); }
.bn-foot-cols a { position: relative; display: block; width: fit-content; padding: 7px 0; font-size: 14.5px; line-height: 1.2; color: rgba(255,255,255,.74); text-decoration: none; transition: color .3s ease; }
.bn-foot-cols a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--bn-ease); }
.bn-foot-cols a:hover { color: #fff; }
.bn-foot-cols a:hover::after { transform: scaleX(1); transform-origin: left; }
.bn-foot-cols a.bn-foot-x { display: inline-flex; align-items: center; gap: 10px; }
.bn-foot-cols a.bn-foot-x::after { left: 40px; }
.bn-foot-xi { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; color: #fff;
  background: radial-gradient(80% 60% at 50% 12%, rgba(255,255,255,.16), rgba(255,255,255,0) 62%), linear-gradient(180deg,#1d2125,#0b0c0e);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 0 0 1px rgba(255,255,255,.1); transition: background .3s ease, color .3s ease; }
.bn-foot-xi svg { width: 13px; height: 13px; }
.bn-foot-x:hover .bn-foot-xi { background: #fff; color: #0b0b0c; }
/* the Baskt mark pressed into the plate (shadow, rim light, face) */
.bn-relief { display: none; position: absolute; right: -28px; bottom: -74px; width: 184px; height: 184px; pointer-events: none; z-index: 0; }
.bn-relief i { position: absolute; inset: 0; -webkit-mask: url(/assets/baskt-mark.png) center / contain no-repeat; mask: url(/assets/baskt-mark.png) center / contain no-repeat; }
.bn-relief i:nth-child(1) { background: rgba(0,0,0,.6); transform: translate(2px,3px); }
.bn-relief i:nth-child(2) { background: linear-gradient(160deg, rgba(255,255,255,.42), rgba(255,255,255,.06) 50%, rgba(var(--bn-ice),.28)); transform: translate(-1px,-1px); }
.bn-relief i:nth-child(3) { background: linear-gradient(165deg, #232a2e 0%, #161b1e 45%, #101517 100%); }
.bn-foot-plate-b { margin-top: 4px; padding: 6px; border-radius: 8px 8px 24px 24px; background: rgba(10,10,11,.85); box-shadow: inset 0 0 0 1px rgba(255,255,255,.035); }
/* three spec tiles across the whole plate: icon, claim, one true line */
.bn-badges { list-style: none; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin: 0; padding: 0; }
.bn-badges li { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; padding: 14px 14px 16px; border-radius: 6px;
  background: radial-gradient(120% 90% at 0% 0%, rgba(var(--bn-cy),.07), rgba(var(--bn-cy),0) 60%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.09); }
.bn-badges li:first-child { border-bottom-left-radius: 18px; }
.bn-badges li:last-child { border-bottom-right-radius: 18px; }
.bn-bt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bn-bt b { font: 650 13px/1.15 var(--base-font, sans-serif); letter-spacing: -.005em; color: #fff; white-space: nowrap; }
.bn-bt small { font-size: 12px; line-height: 1.4; color: rgba(255,255,255,.56); }
.bn-badges .bn-live { position: absolute; top: 18px; right: 16px; margin: 0; }
.bn-bi { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  background: radial-gradient(80% 60% at 50% 12%, rgba(255,255,255,.16), rgba(255,255,255,0) 62%), linear-gradient(180deg,#1d2125,#0b0c0e);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 0 0 1px rgba(255,255,255,.08); }
.bn-bi svg { width: 15px; height: 15px; }
.bn-bi img { width: 19px; height: 19px; border-radius: 50%; display: block; }
.bn-live { width: 6px; height: 6px; border-radius: 50%; margin-left: 1px; background: rgb(var(--bn-ice)); box-shadow: 0 0 0 3px rgba(var(--bn-cy),.14), 0 0 10px rgba(var(--bn-cy),.9); }
@keyframes bn-ping { 0% { box-shadow: 0 0 0 0 rgba(var(--bn-cy),.55), 0 0 10px rgba(var(--bn-cy),.9) } 100% { box-shadow: 0 0 0 9px rgba(var(--bn-cy),0), 0 0 10px rgba(var(--bn-cy),.9) } }
.bn-foot.is-live .bn-live { animation: bn-ping 2.2s ease-out infinite; }

/* ---- legal row */
.bn-foot-legal { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; margin-top: clamp(30px,3.6vw,48px); padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.07); font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.5); }
.bn-foot-legal-r { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; }
.bn-foot-risk { color: rgba(255,255,255,.6); }
.bn-totop { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 15px; border-radius: 999px; white-space: nowrap; text-decoration: none;
  font-weight: 600; color: rgba(255,255,255,.74); background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); transition: color .3s ease, box-shadow .3s ease; }
.bn-totop svg { width: 13px; height: 13px; transition: transform .5s var(--bn-ease); }
.bn-totop:hover { color: #fff; box-shadow: inset 0 0 0 1px rgba(var(--bn-ice),.45); }
.bn-totop:hover svg { transform: translateY(-2px); }
.bn-foot-cols a:focus-visible, .bn-foot-logo:focus-visible, .bn-ghost:focus-visible, .bn-totop:focus-visible { outline: 2px solid rgb(var(--bn-ice)); outline-offset: 3px; border-radius: 6px; }
.bn-ghost:focus-visible, .bn-totop:focus-visible { border-radius: 999px; }

/* ---- oversized chrome wordmark, sliced by the bottom edge of the page */
.bn-foot-word { --fs: min(35.5vw, 520px); position: relative; z-index: 1; height: calc(var(--fs) * .56); overflow: hidden; display: flex; justify-content: center; align-items: flex-start;
  pointer-events: none; user-select: none; margin-top: clamp(14px,2.4vw,32px); }
.bn-foot-word span { flex: none; display: block; font-family: var(--brand-font, sans-serif); font-weight: 800; font-size: var(--fs); line-height: .8; letter-spacing: -.06em; padding: .03em .04em 0 0;
  background: linear-gradient(105deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0) 58%) 130% 0 / 260% 100% no-repeat,
    linear-gradient(180deg,#ffffff 6%,#f1f4f6 18%,#c3cbd2 33%,#8a939b 47%,#59616a 60%,#353b41 72%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 -1px 0 rgba(var(--bn-ice),.55)) drop-shadow(0 0 28px rgba(var(--bn-cy),.16)); }
.bn-foot.in .bn-foot-word span { animation: bn-sheen 1.4s var(--bn-ease) .35s 1 both; }
@keyframes bn-sheen { from { background-position: 130% 0, 0 0; } to { background-position: -30% 0, 0 0; } }
/* last ~200px of the page: the blur band fades out across it (watched by baskt-fx.js) */
.bn-foot-end { position: absolute; left: 0; bottom: 0; width: 1px; height: 200px; pointer-events: none; visibility: hidden; }

/* stacked (tablet and down): the CTA card turns into a centred hero, the pack and
   cards burst over its top edge in the middle, copy centred underneath, so the
   card has no dead middle at any width. The plate runs full width below it. */
@media (max-width: 1100px) {
  .bn-foot-in { padding-top: 262px; }
  .bn-foot-top { grid-template-columns: 1fr; gap: 14px; }
  .bn-fcta-core { padding: 182px clamp(22px,5vw,56px) 38px; text-align: center;
    background: radial-gradient(70% 52% at 50% 0%, rgba(var(--bn-cy),.24), rgba(var(--bn-cy),.05) 56%, rgba(var(--bn-cy),0) 76%),
      radial-gradient(60% 60% at 50% 100%, rgba(255,255,255,.035), rgba(255,255,255,0) 70%), linear-gradient(180deg,#161718 0%,#0d0d0e 62%,#0b0b0c 100%); }
  .bn-fcta-core::before { -webkit-mask: radial-gradient(70% 46% at 50% 0%, #000, transparent 76%); mask: radial-gradient(70% 46% at 50% 0%, #000, transparent 76%); }
  .bn-fcta-copy { max-width: 600px; margin: 0 auto; }
  .bn-foot-logo { margin-bottom: 18px; }
  .bn-foot-line { font-size: clamp(38px,5.4vw,52px); }
  .bn-foot-tag { margin-left: auto; margin-right: auto; max-width: 38ch; }
  .bn-foot-act, .bn-fcta-checks { justify-content: center; }
  .bn-fcta-stage { --pw: 186px; --cw: 104px; left: 0; right: 0; top: -140px; bottom: auto; width: auto; height: 300px; }
  .bn-fcta-pack { bottom: 0; }
  .bn-fcta-card { bottom: calc(var(--pw) * 1.43 - 42px); }
  .bn-fcta-card--l { transform: translateX(-78%) rotate(-17deg); }
  .bn-fcta-card--r { transform: translateX(78%) rotate(15deg); }
  .bn-fcta-card--c { transform: translateY(-34px) rotate(-2deg); }
  .bn-fcta-burst { width: 520px; height: 380px; margin-left: -260px; bottom: calc(var(--pw) * .9); }
  /* spec tiles go horizontal: icon beside the copy, still three across */
  .bn-badges li { flex-direction: row; align-items: center; gap: 12px; padding: 13px 34px 13px 13px; }
  .bn-badges .bn-live { top: 50%; margin-top: -3px; }
}
@media (max-width: 720px) {
  .bn-foot-in { padding-top: 200px; }
  .bn-fcta { border-radius: 26px; padding: 5px; }
  .bn-fcta-core { border-radius: 21px; padding: 152px 22px 26px; }
  .bn-fcta-core::before { -webkit-mask: radial-gradient(80% 40% at 50% 0%, #000, transparent 76%); mask: radial-gradient(80% 40% at 50% 0%, #000, transparent 76%); }
  .bn-fcta-stage { --pw: 150px; --cw: 84px; top: -128px; height: 268px; }
  .bn-relief { width: 150px; height: 150px; right: -24px; bottom: -52px; }
  .bn-fcta-card { bottom: calc(var(--pw) * 1.43 - 40px); }
  .bn-fcta-card--l { transform: translateX(-62%) rotate(-17deg); }
  .bn-fcta-card--r { transform: translateX(62%) rotate(15deg); }
  .bn-fcta-card--c { transform: translateY(-30px) rotate(-2deg); }
  .bn-fcta-burst { width: 360px; height: 300px; margin-left: -180px; }
  .bn-foot-line { font-size: clamp(32px,9.4vw,44px); }
  .bn-foot-act .bn-cta, .bn-foot-act .bn-ghost { flex: 1 1 auto; justify-content: space-between; }
  .bn-foot-act .bn-ghost { justify-content: center; }
  .bn-foot-plate { border-radius: 26px; padding: 5px; }
  .bn-foot-cols-w { border-radius: 21px 21px 7px 7px; }
  .bn-foot-cols { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px 16px; padding: 24px 20px 20px; }
  .bn-foot-cols > div:last-child { grid-column: 1 / -1; }
  .bn-foot-cols a { padding: 12px 0; }
  .bn-foot-cols a::after { bottom: 7px; }
  /* phones: the three tiles become one list, a hairline between rows */
  .bn-foot-plate-b { padding: 5px; border-radius: 7px 7px 21px 21px; }
  .bn-badges { grid-template-columns: minmax(0,1fr); gap: 4px; }
  .bn-badges li, .bn-badges li:first-child { border-radius: 6px; padding: 12px 34px 12px 12px; }
  .bn-badges li:last-child { border-radius: 6px 6px 16px 16px; }
  .bn-foot-legal { flex-direction: column; align-items: flex-start; gap: 12px; }
  .bn-foot-legal-r { flex-direction: column; align-items: flex-start; gap: 12px; }
  .bn-foot-word { --fs: 40vw; height: calc(var(--fs) * .6); }
}
/* narrow phones: copy back to the left edge, it reads better in a 340px column */
@media (max-width: 480px) {
  .bn-fcta-core { text-align: left; }
  .bn-fcta-copy { margin: 0; }
  .bn-foot-tag { margin-left: 0; }
  .bn-fcta-checks { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .bn-foot.in .bn-foot-word span, .bn-foot.is-live .bn-live { animation: none; }
  .bn-cta, .bn-cta i, .bn-ghost, .bn-totop svg, .bn-foot-cols a::after { transition: none; }
}

/* ---- BOTTOM PROGRESSIVE BLUR --------------------------------------------
   A fixed band on the bottom edge: five backdrop-blur layers, each masked to
   a slice, blur doubling toward the edge, plus a soft dark tint, so content
   softly blurs and fades as it slides under the bottom of the screen.
   z 900: above page content and the sticky header, below the cookie bar
   (1301), toasts (1400 / 100000), modals (99990+), the docs drawer, the
   assistant and the wallet dialogs (2147483xxx). pointer-events none, so it
   never takes a click. baskt-fx.js shows it after the first scroll and fades
   it out across the last ~200px of the page.
   The fade lives on the layers, never on .bn-pblur itself: a parent with
   opacity < 1 becomes a backdrop root and its children would blur nothing
   (the band would pop off instead of fading). Each layer's own opacity keeps
   its backdrop-filter working, so the blur really crossfades. */
.bn-pblur { position: fixed; left: 0; right: 0; bottom: 0; height: 76px; z-index: 900; pointer-events: none;
  visibility: visible; transition: visibility 0s linear 0s; }
.bn-pblur.is-off { visibility: hidden; transition: visibility 0s linear .45s; }
.bn-pblur i, .bn-pblur::after { opacity: var(--bn-pbo, 1); transition: opacity .25s linear; }
.bn-pblur.is-off i, .bn-pblur.is-off::after { opacity: 0; transition: opacity .45s cubic-bezier(.4,0,.2,1); }
.bn-pblur i { position: absolute; inset: 0; }
.bn-pblur i:nth-child(1) { -webkit-backdrop-filter: blur(.75px); backdrop-filter: blur(.75px); -webkit-mask: linear-gradient(180deg, transparent 0%, #000 20%, #000 40%, transparent 60%); mask: linear-gradient(180deg, transparent 0%, #000 20%, #000 40%, transparent 60%); }
.bn-pblur i:nth-child(2) { -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); -webkit-mask: linear-gradient(180deg, transparent 20%, #000 40%, #000 60%, transparent 80%); mask: linear-gradient(180deg, transparent 20%, #000 40%, #000 60%, transparent 80%); }
.bn-pblur i:nth-child(3) { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); -webkit-mask: linear-gradient(180deg, transparent 40%, #000 60%, #000 80%, transparent 100%); mask: linear-gradient(180deg, transparent 40%, #000 60%, #000 80%, transparent 100%); }
.bn-pblur i:nth-child(4) { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); -webkit-mask: linear-gradient(180deg, transparent 60%, #000 80%); mask: linear-gradient(180deg, transparent 60%, #000 80%); }
.bn-pblur i:nth-child(5) { -webkit-backdrop-filter: blur(11px); backdrop-filter: blur(11px); -webkit-mask: linear-gradient(180deg, transparent 80%, #000 100%); mask: linear-gradient(180deg, transparent 80%, #000 100%); }
.bn-pblur::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,12,0) 0%, rgba(11,11,12,.2) 55%, rgba(11,11,12,.5) 100%); }
/* keyboard focus never parks a control under the band */
html { scroll-padding-bottom: 84px; }
@media (max-width: 720px) {
  /* phones: three cheaper layers over a slightly taller band so it still reads */
  .bn-pblur { height: 70px; }
  html { scroll-padding-bottom: 78px; }
  .bn-pblur i:nth-child(1) { -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); -webkit-mask: linear-gradient(180deg, transparent 0%, #000 30%, #000 52%, transparent 78%); mask: linear-gradient(180deg, transparent 0%, #000 30%, #000 52%, transparent 78%); }
  .bn-pblur i:nth-child(2) { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); -webkit-mask: linear-gradient(180deg, transparent 36%, #000 66%, #000 84%, transparent 100%); mask: linear-gradient(180deg, transparent 36%, #000 66%, #000 84%, transparent 100%); }
  .bn-pblur i:nth-child(3) { -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); -webkit-mask: linear-gradient(180deg, transparent 66%, #000 100%); mask: linear-gradient(180deg, transparent 66%, #000 100%); }
  .bn-pblur i:nth-child(n+4) { display: none; }
}
@media print { .bn-pblur { display: none; } }