/* =========================================================================
   TheNorthCop — cinematic experience layer
   Loader, scroll engine hooks, chapter system, pinned sections,
   horizontal scroll, big reveal, 3D tilt showcase, infinite feed, outro.
   ------------------------------------------------------------------------- */

/* =======================================================================
   Boot loader
   ===================================================================== */

.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: opacity .6s var(--ease-out);
}
.loader.is-done {
  opacity: 0;
  pointer-events: none;
}
.loader.is-hidden { display: none; }

.loader__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}

.loader__mark {
  position: relative;
  width: 84px; height: 84px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  animation: loaderPulse 2.6s var(--ease-out) infinite;
}
/* Logomark itself spins continuously while the page boots. */
.loader__mark > svg {
  animation: loaderSpin 2.4s linear infinite;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 0 12px rgba(255, 45, 85, .35));
}
/* Soft halo orbiting in the opposite direction for depth. */
.loader__mark::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 22px;
  border: 1px solid transparent;
  background:
    conic-gradient(from 0deg,
      rgba(255, 45, 85, 0) 0deg,
      rgba(255, 45, 85, .55) 70deg,
      rgba(255, 122, 122, .35) 140deg,
      rgba(255, 45, 85, 0) 220deg)
    border-box;
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: loaderSpin 3.2s linear infinite reverse;
  pointer-events: none;
  opacity: .85;
}

@keyframes loaderSpin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .loader__mark > svg,
  .loader__mark::before { animation: none; }
}

.loader__label {
  font-family: var(--font-display);
  letter-spacing: .4em;
  text-transform: uppercase;
  font-size: .78rem;
  color: var(--text-muted);
}

.loader__bar {
  position: relative;
  width: min(260px, 60vw);
  height: 2px;
  background: rgba(255,255,255,.08);
  border-radius: 2px;
  overflow: hidden;
}
.loader__bar span {
  position: absolute;
  inset: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  box-shadow: 0 0 18px rgba(255,45,85,.6);
  transition: width .25s var(--ease-out);
}
.loader__count {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--text);
}
.loader__count em {
  font-style: normal;
  font-size: 1rem;
  color: var(--text-muted);
  margin-left: .1em;
}

.loader__curtain {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  z-index: 3;
  pointer-events: none;
}
.loader__curtain span {
  background: #0a0a0f;
  transform: scaleY(1);
  transform-origin: top center;
}
.loader.is-done .loader__curtain span {
  animation: loaderCurtain .85s var(--ease-out) forwards;
}
.loader.is-done .loader__curtain span:nth-child(1) { animation-delay: .00s; }
.loader.is-done .loader__curtain span:nth-child(2) { animation-delay: .05s; }
.loader.is-done .loader__curtain span:nth-child(3) { animation-delay: .10s; }
.loader.is-done .loader__curtain span:nth-child(4) { animation-delay: .15s; }
.loader.is-done .loader__curtain span:nth-child(5) { animation-delay: .20s; }
.loader.is-done .loader__curtain span:nth-child(6) { animation-delay: .25s; }

@keyframes loaderCurtain {
  from { transform: scaleY(1); transform-origin: top; }
  to   { transform: scaleY(0); transform-origin: top; }
}
@keyframes loaderPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,45,85,0); }
  50%      { box-shadow: 0 0 40px 2px rgba(255,45,85,.25); }
}

body.is-booting { overflow: hidden; }

/* =======================================================================
   Top scroll progress bar
   ===================================================================== */

.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 50;
  pointer-events: none;
  background: transparent;
}
.scroll-progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2), var(--brand-3));
  box-shadow: 0 0 14px rgba(255,45,85,.45);
  transition: width 80ms linear;
}

/* Auto-hiding nav on scroll-down */
.nav { transition: transform .5s var(--ease-out), background-color var(--dur), backdrop-filter var(--dur); }
.nav.is-hidden { transform: translateY(-120%); }

/* =======================================================================
   Chapter side-dots (home only)
   ===================================================================== */

.chapters {
  position: fixed;
  right: clamp(.75rem, 2vw, 1.5rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 35;
  display: none;
  flex-direction: column;
  gap: .9rem;
  padding: .85rem .55rem;
  background: rgba(15,15,20,.55);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 999px;
}
body[data-page="index"] .chapters { display: flex; }

.chapters__dot {
  position: relative;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  transition: background var(--dur), transform var(--dur-fast) var(--ease-spring);
  cursor: pointer;
}
.chapters__dot:hover { transform: scale(1.35); background: rgba(255,255,255,.35); }
.chapters__dot.is-active {
  background: var(--brand-1);
  box-shadow: 0 0 12px rgba(255,45,85,.8);
}
.chapters__dot::after {
  content: attr(data-title);
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text);
  background: rgba(15,15,20,.9);
  padding: .4rem .6rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur), transform var(--dur) var(--ease-spring);
}
.chapters__dot:hover::after,
.chapters__dot.is-active::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

@media (max-width: 900px) {
  .chapters { display: none !important; }
}

/* =======================================================================
   Cinematic hero (home)
   ===================================================================== */

.cine-hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding-top: 7rem;
  /* Reserve enough bottom room that the centered hero content (title,
     subtitle, CTAs) is ALWAYS lifted above the absolute-positioned scroll
     cue, no matter the viewport size. The scroll cue itself occupies
     ~7rem (bottom offset + bar + gap + text), so we clamp to at least that
     much and let it grow proportionally on taller screens. */
  padding-bottom: clamp(7rem, 14vh, 10rem);
  overflow: hidden;
}
.cine-hero__wrap { text-align: center; position: relative; z-index: 2; width: min(1200px, 92vw); margin-inline: auto; }

.cine-hero__kicker {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-bottom: 1.5rem;
  color: var(--text-muted);
  font-size: .82rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(14px);
  animation: fadeUp .9s var(--ease-out) .2s forwards;
}
.cine-hero__kicker::before {
  content: "";
  width: 32px; height: 1px; background: linear-gradient(to right, transparent, var(--brand-1));
}
.cine-hero__kicker::after {
  content: "";
  width: 32px; height: 1px; background: linear-gradient(to left, transparent, var(--brand-1));
}

.cine-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.4rem, 12vw, 10rem);
  line-height: .9;
  letter-spacing: -.055em;
  margin: 0;
}
.cine-hero__title .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: .95;
  padding-bottom: .02em;
  /* Negative letter-spacing on the title pushes the last glyph past the
     computed box edge; this cushion keeps it from being clipped by the
     `overflow:hidden` mask used for the hero-in slide. */
  padding-right: .08em;
}
.cine-hero__title .word > span {
  display: inline-block;
  transform: translateY(110%);
  animation: heroIn 1.1s var(--ease-spring) forwards;
}
.cine-hero__title .word:nth-of-type(1) > span { animation-delay: .15s; }
.cine-hero__title .word:nth-of-type(2) > span { animation-delay: .28s; }
.cine-hero__title .word:nth-of-type(3) > span { animation-delay: .41s; }
.cine-hero__title .word:nth-of-type(4) > span { animation-delay: .54s; }

/* ---- Flipping word in the hero ------------------------------------------ */

/* The wrapping .word normally has overflow:hidden to mask the hero-in slide.
   For the flipper word we replace that with a vertical-only clip so long
   words (e.g. "Profitable") never get horizontally cropped mid-transition. */
.cine-hero__title .word.word--flipper {
  overflow: visible;
  clip-path: inset(0 -99vw 0 -99vw);
}

.flipper {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  height: 1em;
  line-height: 1;
  min-width: 1ch;
  /* Use content-box so the JS-set width represents text only. The flip-word
     itself supplies right padding for glyph overhang; we don't double-up here. */
  box-sizing: content-box;
  transition: width .8s var(--ease-spring);
  will-change: width;
}
.flipper::before {
  /* invisible placeholder so the inline box has a baseline */
  content: "\200B";
  display: inline-block;
}

.flip-word {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(110%);
  filter: blur(14px);
  transition:
    transform .85s var(--ease-spring),
    opacity .55s var(--ease-out),
    filter .55s var(--ease-out);
  will-change: transform, opacity, filter;
  /* The gradient (`background-clip: text`) only paints inside this box. With
     the title's negative letter-spacing, the trailing glyph ink extends past
     the computed box edge — so the gradient cuts off mid-character. This
     padding stretches the background a bit further so the full glyph paints. */
  padding-right: .18em;
  /* Ensure the gradient's reference box covers the padding too. */
  background-clip: text;
  -webkit-background-clip: text;
}
.flip-word.is-active {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.flip-word.is-leaving {
  opacity: 0;
  transform: translateY(-110%);
  filter: blur(14px);
}

/* Markets-section title flipper — same flip mechanics as the hero, but
   without the hero-only slide-in mask animations, and at h2 scale. */
.hscroll__h2 .word--flipper-mkt {
  display: inline-block;
  overflow: visible;
  clip-path: inset(0 -50vw 0 -50vw);
  vertical-align: baseline;
  line-height: 1;
}
.hscroll__h2 .word--flipper-mkt > span { display: inline-block; }
.hscroll__h2-dot {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-left: -.05em;
}

.cine-hero__sub {
  max-width: 56ch;
  margin: 1.5rem auto 2.25rem;
  font-size: var(--step-1);
  color: var(--text-muted);
  opacity: 0;
  transform: translateY(14px);
  animation: fadeUp .9s var(--ease-out) .7s forwards;
}

/* Brand-name pop in the hero copy. Gradient inline that matches the H1's
   accent so the eye links the two, plus a subtle hot-glow underline so
   the word reads as a button-like anchor without actually being one. */
.cine-hero__brand {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  background: var(--grad-text);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  /* Soft hot glow so the word still pops on dark surfaces even with the
     gradient flattened in older browsers that don't honour text-fill. */
  text-shadow: 0 0 18px rgba(255, 45, 85, .35);
  /* Use a layered drop-shadow filter so the glow renders against the
     gradient text without the text-shadow muddying the gradient. */
  filter: drop-shadow(0 0 10px rgba(255, 45, 85, .25));
  white-space: nowrap;
}

[data-theme="light"] .cine-hero__brand {
  /* Light mode: drop the hot-pink glow that doesn't read on white and let
     the gradient carry the emphasis on its own. */
  text-shadow: none;
  filter: none;
}

.cine-hero__cta {
  display: inline-flex; gap: .8rem; flex-wrap: wrap; justify-content: center;
  opacity: 0;
  transform: translateY(14px);
  animation: fadeUp .9s var(--ease-out) .85s forwards;
}

.cine-hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 0; right: 0;
  margin-inline: auto;
  width: max-content;
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--text-dim);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  opacity: 0;
  animation: fadeUp .9s var(--ease-out) 1.1s forwards;
  z-index: 3;
  pointer-events: none;
}
.cine-hero__scroll::after {
  content: "";
  width: 1px; height: 48px;
  background: linear-gradient(to bottom, var(--brand-1), transparent);
  animation: scrollCue 2.6s ease-in-out infinite;
}

/* Mobile: drop the secondary "Start the tour" CTA (the primary "Join Now"
   button is the action that matters on a phone) and tuck the scroll cue
   lower + smaller so it can't crowd or land inside the button. We also
   strip the "Since 2018 …" kicker line entirely — on a phone it's just
   another line above the H1 that pushes the headline below the fold. */
@media (max-width: 600px) {
  .cine-hero__tour { display: none; }
  .cine-hero__kicker { display: none; }
  .cine-hero__sub { margin-top: 1rem; }
  .cine-hero__scroll {
    bottom: 1rem;
    font-size: .62rem;
    letter-spacing: .26em;
    gap: .5rem;
  }
  .cine-hero__scroll::after { height: 28px; }
}

/* Safety net for very short viewports (landscape phones, small windows
   where there's literally no room left after title + subtitle + CTAs):
   hide the scroll cue entirely rather than let it collide with the
   buttons. The user can already tell the page scrolls. */
@media (max-height: 620px) {
  .cine-hero__scroll { display: none; }
}

/* =======================================================================
   Floating category emojis (cinematic hero accent layer)
   ===================================================================== */

.emoji-float {
  position: absolute;
  inset: 0;
  z-index: 1;            /* above spotlight, below hero text */
  pointer-events: none;
  overflow: hidden;
}

.emoji-float__item {
  position: absolute;
  left: var(--x, 50%);
  top:  var(--y, 50%);
  transform-origin: center;
  animation: emojiBob 8s var(--ease-out) infinite;
  animation-delay: var(--delay-bob, 0s);
  will-change: transform;
}

.emoji-float__char {
  display: inline-block;
  font-size: var(--size, 3rem);
  line-height: 1;
  user-select: none;
  /* Native colour emoji fonts first, fall back to system. */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
               "Noto Color Emoji", "EmojiOne Color", "Twemoji Mozilla",
               sans-serif;
  filter:
    drop-shadow(0 14px 32px rgba(255, 45, 85, .35))
    drop-shadow(0 4px 12px rgba(0, 0, 0, .55));
  opacity: 0;
  transform: scale(.35) rotate(-12deg);
  animation: emojiIn 1.2s var(--ease-spring) forwards;
  animation-delay: var(--delay-in, .8s);
  transition: transform .35s var(--ease-out);
  will-change: transform, opacity;
}

@keyframes emojiBob {
  0%   { transform: translate(0, 0)        rotate(-5deg); }
  20%  { transform: translate(7px, -10px)  rotate(2deg); }
  40%  { transform: translate(4px, -18px)  rotate(7deg); }
  60%  { transform: translate(-6px, -10px) rotate(-2deg); }
  80%  { transform: translate(-9px, 4px)   rotate(-7deg); }
  100% { transform: translate(0, 0)        rotate(-5deg); }
}

@keyframes emojiIn {
  to {
    opacity: var(--opacity, .9);
    transform: scale(1) rotate(0deg);
  }
}

/* On small screens, drop the smaller decorative ones and shrink the rest */
@media (max-width: 720px) {
  .emoji-float__item:nth-child(n+7) { display: none; }
  .emoji-float__char { font-size: calc(var(--size, 3rem) * .7); }
}

/* On phones the centred emojis (top-of-hero & mid-sides) collide with the
   headline + subtitle. Hide the ones that sit inside the text column and
   yank the survivors all the way into the four screen corners so they read
   as decorative accents instead of crowding the copy. */
@media (max-width: 600px) {
  /* Centre-top 📦, mid-left 🎟️, mid-right 🏀 land inside the text — drop them */
  .emoji-float__item:nth-child(3),
  .emoji-float__item:nth-child(4),
  .emoji-float__item:nth-child(5) { display: none; }

  /* Pull the four survivors into hard corners */
  .emoji-float__item:nth-child(1) { left: 4%;  top: 6%;  }
  .emoji-float__item:nth-child(2) { left: 86%; top: 6%;  }
  .emoji-float__item:nth-child(6) { left: 4%;  top: 84%; display: block; }
  .emoji-float__item:nth-child(7) { left: 86%; top: 84%; display: block; }

  /* And shrink them further so they don't dominate a small viewport */
  .emoji-float__char { font-size: calc(var(--size, 3rem) * .55); }
}

@media (prefers-reduced-motion: reduce) {
  .emoji-float__item { animation: none; }
}

/* Spotlight orb that follows pointer behind hero */
.spotlight {
  position: absolute;
  top: var(--sy, 50%); left: var(--sx, 50%);
  width: 60vmax; height: 60vmax;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255,45,85,.25), transparent 70%);
  pointer-events: none;
  z-index: 1;
  filter: blur(40px);
  transition: top .6s var(--ease-out), left .6s var(--ease-out);
}

/* =======================================================================
   Chapter label — small top-of-section tag on pinned sections
   ===================================================================== */

.chapter-tag {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}
.chapter-tag::before {
  content: "";
  width: 22px; height: 1px; background: var(--brand-1);
}
.chapter-tag em { font-style: normal; color: var(--brand-1); }

/* =======================================================================
   Stats scroll-scrubbed section
   ===================================================================== */

.scale {
  position: relative;
  min-height: 230vh;
}
.scale__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.scale__hugeNumber {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(8rem, 28vw, 26rem);
  letter-spacing: -.06em;
  line-height: .85;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.scale.is-in .scale__hugeNumber { opacity: 1; transform: none; }
.scale__caption {
  position: absolute;
  z-index: 2;
  top: 22%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: var(--text-muted);
  max-width: 52ch;
  opacity: 0;
  transition: opacity .6s var(--ease-out);
}
.scale.is-in .scale__caption { opacity: 1; }

.scale__grid {
  position: absolute;
  z-index: 2;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  width: min(1100px, 92vw);
}
.scale__tile {
  padding: 1.2rem 1.1rem;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 18px;
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.scale.is-in .scale__tile { opacity: 1; transform: none; }
.scale.is-in .scale__tile:nth-child(1) { transition-delay: .05s; }
.scale.is-in .scale__tile:nth-child(2) { transition-delay: .15s; }
.scale.is-in .scale__tile:nth-child(3) { transition-delay: .25s; }
.scale.is-in .scale__tile:nth-child(4) { transition-delay: .35s; }
.scale__tile .value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: -.03em;
  color: var(--text);
}
.scale__tile .label {
  color: var(--text-muted);
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-top: .3rem;
}

@media (max-width: 720px) {
  .scale__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Money emoji rain — spawned while scrolling through the section ---- */
.scale__money {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  /* Keep the rain behind the huge $ number so the text stays crisp.
     Tiles + caption sit on z-index 2; emojis are at 1; background at 0. */
  z-index: 1;
  contain: layout paint;
}
.scale__money-emoji {
  position: absolute;
  bottom: -8vh;
  left: 0;
  font-size: 2rem;
  line-height: 1;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55));
  will-change: transform, opacity;
  user-select: none;
  pointer-events: none;
  /* Linear-ish curve so the emoji actually flies through the screen at a
     steady pace instead of decelerating into a hover near the upper-middle.
     The previous cubic-bezier(.22,.9,.3,1) eased aggressively at the end
     and made the rain look frozen on short mobile trajectories. */
  animation: moneyFly var(--fly-dur, 3.6s) cubic-bezier(.4, .15, .55, 1) forwards;
  /* Per-emoji params injected via inline style:
       --x:    starting horizontal position (vw)
       --sway: peak horizontal drift (vw, can be negative)
       --rot:  end rotation (deg)
       --scale: peak scale multiplier
       --fly-dur: total animation duration                                */
}
@keyframes moneyFly {
  0% {
    transform:
      translate3d(calc(var(--x, 50) * 1vw), 0, 0)
      rotate(0deg)
      scale(.6);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  /* Reach peak scale early-mid flight so emojis don't balloon right where
     the user's eye is locked on the $46M+ counter. */
  35% {
    transform:
      translate3d(calc((var(--x, 50) + var(--sway, 0) * .4) * 1vw), -38vh, 0)
      rotate(calc(var(--rot, 0) * .35deg))
      scale(var(--scale, 1));
    opacity: 1;
  }
  85% { opacity: 1; }
  100% {
    transform:
      translate3d(calc((var(--x, 50) + var(--sway, 0)) * 1vw), -135vh, 0)
      rotate(calc(var(--rot, 0) * 1deg))
      scale(calc(var(--scale, 1) * .8));
    opacity: 0;
  }
}
.scale.is-in .scale__money { display: block; }
@media (prefers-reduced-motion: reduce) {
  .scale__money { display: none; }
}

/* =======================================================================
   Feature stack — pinned section, cards swap with scroll
   ===================================================================== */

.stack {
  position: relative;
  /* tall container → one viewport per card + 1 for intro */
}
.stack__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.stack__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  height: 100%;
  width: min(1200px, 92vw);
  margin-inline: auto;
}
.stack__title {
  font-size: clamp(2.4rem, 5.2vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
  font-family: var(--font-display);
  margin: 0 0 1rem;
}
.stack__intro-copy { max-width: 44ch; color: var(--text-muted); font-size: var(--step-1); }
.stack__nav {
  margin-top: 2rem;
  display: grid;
  gap: .4rem;
}
.stack__nav button {
  text-align: left;
  padding: .7rem .85rem;
  border-radius: 10px;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .95rem;
  transition: color var(--dur), background var(--dur);
  display: flex; align-items: center; gap: .7rem;
}
.stack__nav button::before {
  content: "";
  width: 22px; height: 1px; background: var(--text-dim);
  transition: width var(--dur), background var(--dur);
}
.stack__nav button.is-active {
  color: var(--text);
  background: var(--surface);
}
.stack__nav button.is-active::before {
  width: 36px; background: var(--brand-1);
}

/* "Show all" toggle — flips the stack out of pinned/swap mode into a vertical
   list so visitors can take the whole toolkit in at once. */
.stack__toggle {
  margin-top: 1.25rem;
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .65rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .03em;
  cursor: pointer;
  transition: border-color var(--dur), color var(--dur), background var(--dur), transform var(--dur);
}
.stack__toggle:hover {
  border-color: var(--brand-1);
  color: var(--brand-1);
  transform: translateY(-1px);
}
.stack__toggle:focus-visible {
  outline: 2px solid var(--brand-1);
  outline-offset: 2px;
}
.stack__toggle__icon {
  position: relative;
  width: 12px;
  height: 12px;
  background: currentColor;
  border-radius: 2px;
  box-shadow:
    16px 0    0 currentColor,
    0    16px 0 currentColor,
    16px 16px 0 currentColor;
  margin-right: 18px;
  transition: box-shadow var(--dur), background var(--dur), transform var(--dur);
}
/* Active (show-all engaged) state: morph the 4-cell grid icon into a single
   bar to read as "compact / scroll mode". */
.stack__toggle[aria-pressed="true"] .stack__toggle__icon {
  background: currentColor;
  box-shadow:
    16px 0 0 transparent,
    0    8px 0 currentColor,
    16px 8px 0 currentColor;
  transform: translateY(2px);
}

/* ---------- Show-all mode (DEFAULT) -----------------------------------
   Renders the toolkit as a sticky scrolling card deck: every card is in
   flow, but each one sticks at the top of the viewport when it arrives,
   and the next card scrolls up over it. JS adds a scale/dim handoff
   (see initStack → updateShowAllStack) so previous cards visibly tuck
   underneath the incoming one rather than vanishing instantly. */
/* ---------- Show-all mode -------------------------------------------------
   Cards render in normal vertical flow — no sticky, no height hacks. As
   the user scrolls, the JS scroll handler (updateShowAllStack) reads each
   card's viewport position and applies a scale+dim+blur to cards that
   are being scrolled out through the top, giving the impression they're
   "tucked away" as the next card fills the screen. The card below the
   current one peeks into view naturally as you scroll, then takes over as
   the new "hero" card while the old one recedes. No lock mechanism is
   needed — the full-height cards provide enough dwell time per scroll. */
.stack.is-show-all {
  height: auto !important;
}
.stack.is-show-all .stack__sticky {
  position: relative;
  height: auto;
  overflow: visible;
}
.stack.is-show-all .stack__layout {
  grid-template-columns: 1fr;
  align-items: start;
  gap: 2.5rem;
  height: auto;
  padding-block: 5rem 6rem;
}
.stack.is-show-all .stack__nav { display: none; }
.stack.is-show-all .stack__stage {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: auto;
  background: transparent;
  border: 0;
  overflow: visible;
}
.stack.is-show-all .stack__card {
  /* Normal flow card — participates in scroll, no sticky. */
  position: relative;
  inset: auto;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  /* Match the pinned-mode card height so the card looks the same. */
  flex-shrink: 0;
  min-height: clamp(480px, 64vh, 720px);
  height: clamp(480px, 64vh, 720px);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255,45,85,.28), transparent 55%),
    radial-gradient(120% 120% at 100% 100%, rgba(255,122,122,.22), transparent 60%),
    linear-gradient(180deg, #1a0f14, #0b0708);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: 0 32px 80px -28px rgba(0, 0, 0, .8);
  /* JS applies transform/opacity/filter every scroll frame — no transition
     on those properties or they'll lag behind the scroll. */
  transition: box-shadow .35s var(--ease-out);
  transform-origin: 50% 0%;
  will-change: transform, opacity, filter;
}
@media (max-width: 600px) {
  .stack.is-show-all .stack__card {
    min-height: clamp(440px, 72vh, 640px);
    height: clamp(440px, 72vh, 640px);
  }
  .stack__toggle { display: none; }
}

/* In show-all mode the stage becomes a plain block that lets the JS
   explicitly set its height to card_count × (card_height + gap) so the
   sticky cards have a real scroll runway within it. JS also strips the
   background / border from the stage (those are applied per-card). */
.stack.is-show-all .stack__stage__inner { display: block; }

.stack__stage {
  position: relative;
  height: 70vh;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255,45,85,.28), transparent 55%),
    radial-gradient(120% 120% at 100% 100%, rgba(255,122,122,.22), transparent 60%),
    linear-gradient(180deg, #1a0f14, #0b0708);
  border: 1px solid var(--border);
  overflow: hidden;
}
.stack__card {
  position: absolute;
  inset: 0;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .75rem;
  opacity: 0;
  transform: translateY(40px) scale(.97);
  transition: opacity .55s var(--ease-out), transform .7s var(--ease-spring);
  pointer-events: none;
}
.stack__card.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.stack__card__index {
  position: absolute;
  top: 2rem; left: 2.5rem;
  font-family: var(--font-display);
  font-size: clamp(5rem, 18vw, 16rem);
  font-weight: 800;
  color: rgba(255,255,255,.06);
  line-height: .85;
  pointer-events: none;
}
.stack__card h3 {
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.03em;
  position: relative;
  z-index: 2;
}
.stack__card p { color: var(--text-muted); max-width: 46ch; position: relative; z-index: 2; }
.stack__card__shape {
  position: absolute;
  width: 60%;
  height: 70%;
  top: 10%;
  right: -6%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,122,122,.45), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(255,45,85,.35), transparent 60%);
  filter: blur(30px);
  animation: wobble 9s ease-in-out infinite;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s;
}
.stack__card.is-active .stack__card__shape { opacity: 1; }

/* ------- Discord-style release-guide preview (variant) ------------------- */

.stack__card--discord {
  /* Anchor h3/p to the bottom; the .dx mockup absolutely fills the upper area */
  padding: 1.5rem 1.75rem 1.75rem;
  gap: .5rem;
}

.dx {
  position: absolute;
  inset: 1.5rem 1.5rem 9rem 1.5rem;
  border-radius: 14px;
  overflow: hidden;
  background: #1e1f22;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, .55),
    0 0 0 1px rgba(255, 45, 85, .08);
  font-family: -apple-system, "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  font-size: .72rem;
  line-height: 1.45;
  color: #dbdee1;
  z-index: 2;
}

/* Each rotator slide stacks on top of the others. The active slide fades in. */
.dx__slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(140px, 30%) 1fr;
  opacity: 0;
  pointer-events: none;
  transform: scale(.985);
  transition:
    opacity .55s var(--ease-out),
    transform .7s var(--ease-spring);
}
.dx__slide.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  z-index: 1;
}

/* Pager dots stamped over the bottom-right corner */
.dx__pager {
  position: absolute;
  right: .8rem;
  bottom: .6rem;
  display: flex;
  gap: .35rem;
  z-index: 5;
}
.dx__pager-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .2);
  padding: 0;
  cursor: pointer;
  transition: background .25s var(--ease-out), transform .25s var(--ease-spring);
}
.dx__pager-dot:hover { background: rgba(255, 255, 255, .45); }
.dx__pager-dot.is-active {
  background: #ff2d55;
  transform: scale(1.3);
  box-shadow: 0 0 8px rgba(255, 45, 85, .6);
}

/* sidebar */
.dx__sidebar {
  background: #2b2d31;
  padding: .65rem .35rem;
  overflow: hidden;
  border-right: 1px solid rgba(0, 0, 0, .35);
}
.dx__server {
  display: flex; align-items: center; justify-content: space-between;
  padding: .15rem .55rem .55rem;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  margin-bottom: .45rem;
}
.dx__server-name {
  font-weight: 600;
  font-size: .68rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dx__server-add { color: #b5bac1; font-size: 1rem; line-height: 1; }
.dx__channels { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.dx__channels li {
  display: flex; align-items: center; gap: .4rem;
  padding: .22rem .5rem; border-radius: 4px;
  color: #949ba4;
  font-size: .68rem;
  white-space: nowrap;
  overflow: hidden;
  cursor: default;
}
.dx__channels li::before {
  content: "#";
  color: #80848e;
  font-weight: 600;
  margin-right: -.05rem;
}
.dx__channels li.is-active {
  background: rgba(255, 45, 85, .15);
  color: #fff;
  box-shadow: inset 2px 0 0 #ff2d55;
}
.dx__channels li.is-active::before { color: #fff; }
.dx__chan { overflow: hidden; text-overflow: ellipsis; }

/* Channel labels we don't want to expose publicly (real community handles
   like "tai-flips", "frieza-flips", etc). The list lives in the channel
   sidebar of the marketing release-guide preview, so the row stays present
   to keep the screenshot looking lived-in — only the name itself is
   redacted. We blur the text and lock the user select so the underlying
   string isn't trivially recoverable from devtools-free interactions.
   Color is also dimmed slightly so the eye reads it as "private". */
.dx__channels li.is-blurred { opacity: .9; }
.dx__chan--blurred {
  filter: blur(4.5px);
  -webkit-user-select: none;
          user-select: none;
  /* Saturate the gray a touch so the redacted block doesn't read as broken
     rendering — looks intentional, like a censored bar. */
  color: rgba(180, 188, 208, .85);
  pointer-events: none;
  /* Avoids sub-pixel shimmer when the blur filter is applied to small text. */
  transform: translateZ(0);
}
.dx__dot { width: .42rem; height: .42rem; border-radius: 50%; flex: none; }
.dx__dot--red    { background: #f23f43; box-shadow: 0 0 6px rgba(242, 63, 67, .55); }
.dx__dot--orange { background: #f0b232; }
.dx__dot--yellow { background: #fee75c; }
.dx__dot--green  { background: #23a55a; }

/* chat column */
.dx__chat {
  padding: .55rem .9rem .8rem;
  background: #313338;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.dx__chat-header {
  display: flex; align-items: center; gap: .45rem;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  padding-bottom: .55rem;
  margin-bottom: .65rem;
  font-size: .85rem;
  font-weight: 600;
  color: #fff;
  flex: none;
}
.dx__hash { color: #80848e; font-weight: 700; }

.dx__msg {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: .7rem;
  min-width: 0;
}
.dx__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #ff5170, #ff2d55 55%, #b51a36);
  display: grid; place-items: center;
  font-size: .85rem; font-weight: 700;
  color: #fff;
  box-shadow: 0 2px 8px rgba(255, 45, 85, .35);
  flex: none;
}
.dx__msg-body { min-width: 0; }
.dx__author {
  display: flex; align-items: center; gap: .35rem;
  flex-wrap: wrap;
  margin-bottom: .25rem;
  line-height: 1.2;
}
.dx__author-name { font-weight: 700; color: #fff; font-size: .82rem; }
.dx__badge {
  background: linear-gradient(135deg, #ff2d55, #c8102e);
  color: #fff;
  font-size: .55rem;
  padding: .12rem .38rem;
  border-radius: 3px;
  font-weight: 800;
  letter-spacing: .06em;
}
.dx__flag { font-size: .85rem; }
.dx__time { color: #949ba4; font-size: .65rem; margin-left: .25rem; }

.dx__title {
  font-size: .82rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: .4rem;
}
.dx__price {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .9rem;
  margin-bottom: .35rem;
  font-size: .72rem;
}
.dx__price b { color: #fff; font-weight: 600; }
.dx__price-val { color: #2dc771; font-weight: 700; }

.dx__bullets {
  margin: 0 0 .4rem;
  padding-left: 1.05rem;
  color: #b5bac1;
}
.dx__bullets li { padding: .05rem 0; }
.dx__bullets li::marker { color: #80848e; }
.dx__link { color: #00a8fc; text-decoration: underline; text-decoration-color: rgba(0, 168, 252, .35); }
.dx__code {
  background: #2b2d31;
  color: #dbdee1;
  padding: 0 .3rem;
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .68rem;
}

.dx__notice {
  display: flex; gap: .45rem; align-items: flex-start;
  background: rgba(35, 165, 90, .12);
  border-left: 3px solid #23a55a;
  padding: .35rem .55rem;
  border-radius: 0 4px 4px 0;
  margin: .35rem 0;
  color: #c4f1d8;
  font-size: .68rem;
}

.dx__meta-row {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: .25rem 0;
  font-size: .68rem;
  flex-wrap: wrap;
}
.dx__meta-row strong { color: #fff; font-weight: 600; }
.dx__pill {
  background: rgba(255, 255, 255, .08);
  padding: .12rem .42rem;
  border-radius: 3px;
  font-size: .66rem;
  color: #fff;
}
.dx__pill--ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .12);
  color: #b5bac1;
}

/* embed (image card) */
.dx__embed {
  margin-top: .55rem;
  border-radius: 6px;
  border-left: 3px solid #ff2d55;
  background: #2b2d31;
  padding: .5rem .55rem;
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: .65rem;
  align-items: center;
  max-width: 360px;
}
.dx__embed-art {
  width: 70px; height: 70px;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  background:
    conic-gradient(from 35deg,
      #ffd6f3 0%, #c0e8ff 18%, #fff5b8 35%,
      #ffc7c7 52%, #d3c2ff 70%, #b8f0e6 85%, #ffd6f3 100%);
  box-shadow: inset 0 0 14px rgba(255, 255, 255, .35);
}
.dx__embed-art::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 60% at 30% 35%, rgba(255, 255, 255, .55), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(0, 0, 0, .15), transparent 65%);
  mix-blend-mode: overlay;
}
.dx__embed-art-tag {
  position: absolute;
  left: 4px; right: 4px; bottom: 4px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: .42rem;
  letter-spacing: .08em;
  text-align: center;
  padding: 1px 2px;
  border-radius: 2px;
  font-weight: 700;
  text-transform: uppercase;
}
.dx__embed-meta {
  display: flex; flex-direction: column; gap: .15rem;
  min-width: 0;
}
.dx__embed-source { font-size: .58rem; color: #949ba4; text-transform: uppercase; letter-spacing: .08em; }
.dx__embed-name { font-size: .72rem; color: #fff; font-weight: 600; }

/* Sneaker silhouette art (Off-White Alaska vibe) */
.dx__embed-art--sneaker {
  background:
    linear-gradient(180deg, #f4f5f7 0%, #e3e5ea 60%, #d4d7df 100%);
  position: relative;
}
.dx__embed-art--sneaker::before {
  /* sketchy silhouette: foot outline + sole */
  content: "";
  position: absolute;
  left: 8%; right: 8%;
  bottom: 18%;
  height: 38%;
  background: #2c2d33;
  clip-path: polygon(
    0% 60%, 5% 35%, 18% 18%, 38% 8%, 60% 5%, 75% 12%,
    92% 30%, 100% 55%, 100% 100%, 0% 100%
  );
  opacity: .12;
}
.dx__embed-art--sneaker::after {
  /* red orange tag accent */
  content: "";
  position: absolute;
  left: 14%;
  top: 38%;
  width: 8px; height: 14px;
  background: linear-gradient(180deg, #ff7a45, #ff2d55);
  border-radius: 2px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .15);
}

/* Status rows for tickets (✅ Transferrable / ❌ Delivery Delay) */
.dx__status {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  margin-bottom: .4rem;
  font-size: .72rem;
}
.dx__status-row { display: inline-flex; align-items: center; gap: .35rem; color: #dbdee1; }
.dx__status-row--ok  { color: #c4f1d8; }
.dx__status-row--bad { color: #ffb3b3; }
.dx__status-icon { font-size: .82rem; line-height: 1; }

/* Inline facts list (Ticket Limit, Retail, Resell …) */
.dx__facts { list-style: none; margin: 0 0 .4rem; padding: 0; display: flex; flex-direction: column; gap: .15rem; font-size: .72rem; }
.dx__facts li { color: #dbdee1; }
.dx__facts li b { color: #fff; font-weight: 600; }

/* Discord-style fenced code block (used for the ticket schedule) */
.dx__code-block {
  background: #2b2d31;
  border: 1px solid rgba(255, 255, 255, .05);
  color: #d6d8db;
  padding: .55rem .7rem;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .65rem;
  line-height: 1.5;
  margin: .4rem 0;
  white-space: pre;
  overflow: hidden;
  max-height: 7.5rem;
  position: relative;
}
.dx__code-block::after {
  /* gentle fade so code feels like it scrolls without showing a scrollbar */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 18px;
  background: linear-gradient(180deg, transparent, #2b2d31);
  pointer-events: none;
}

/* Quoted "section" — Notes / Cop or Drop / Why this flip works */
.dx__section {
  border-left: 3px solid rgba(255, 45, 85, .55);
  padding: .15rem .55rem;
  margin: .45rem 0;
  background: rgba(255, 255, 255, .015);
  border-radius: 0 4px 4px 0;
}
.dx__section-tag {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .68rem;
  color: #fff;
  font-weight: 600;
  margin-bottom: .15rem;
}
.dx__section p {
  color: #b5bac1;
  font-size: .7rem;
  line-height: 1.5;
  margin: 0;
}

/* Notice-tone variants (default = ok, used for ✅; bad/red for cautions) */
.dx__notice--bad {
  background: rgba(242, 63, 67, .12);
  border-left-color: #f23f43;
  color: #ffd1d1;
}

/* =======================================================================
   Webhook variant — second toolkit card (custom-built monitors)
   ===================================================================== */

.dx--webhook .dx__chat { padding: .55rem .9rem .9rem; }

.dx__bot-msg {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: .65rem;
  min-width: 0;
}

/* APP badge after the bot name */
.dx__badge--app {
  background: #5865f2;
  color: #fff;
  font-size: .55rem;
  padding: .12rem .35rem;
  border-radius: 3px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Bot avatars — coloured circle, sometimes with a logo */
.dx__avatar--bot {
  width: 36px; height: 36px;
  border-radius: 50%;
  flex: none;
  position: relative;
  overflow: hidden;
}
.dx__avatar--walmart {
  background:
    radial-gradient(circle at 50% 50%, #ffd400 18%, #ffb300 60%, #ff9500 100%);
  box-shadow: 0 2px 8px rgba(255, 184, 0, .4);
}
.dx__avatar--walmart::before {
  content: "";
  position: absolute; inset: 0;
  background:
    conic-gradient(from 0deg,
      rgba(255, 255, 255, .6) 0deg, transparent 22deg,
      rgba(255, 255, 255, .6) 45deg, transparent 67deg,
      rgba(255, 255, 255, .6) 90deg, transparent 112deg,
      rgba(255, 255, 255, .6) 135deg, transparent 157deg,
      rgba(255, 255, 255, .6) 180deg, transparent 202deg,
      rgba(255, 255, 255, .6) 225deg, transparent 247deg,
      rgba(255, 255, 255, .6) 270deg, transparent 292deg,
      rgba(255, 255, 255, .6) 315deg, transparent 337deg);
  mix-blend-mode: screen;
  opacity: .55;
  transform: scale(.55);
  border-radius: 50%;
}
.dx__avatar--walmart::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle, #fff 0 18%, transparent 19%);
}

.dx__avatar--tnc {
  background:
    radial-gradient(circle at 30% 30%, #ff5170, #ff2d55 55%, #b51a36)
    center/100% 100% no-repeat,
    url('/static/img/logos/tnc.png') center/62% no-repeat;
  background-blend-mode: normal;
  box-shadow: 0 2px 8px rgba(255, 45, 85, .35);
}
.dx__avatar--tnc::before {
  /* overlay the white logo on top */
  content: "";
  position: absolute; inset: 0;
  background: url('/static/img/logos/tnc.png') center/62% no-repeat;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
}

/* Embed card — the bordered notification box */
.dx__embed-card {
  margin-top: .35rem;
  background: #2b2d31;
  border-radius: 4px;
  border-left: 4px solid #ff2d55;
  padding: .7rem .8rem .7rem .65rem;
  display: grid;
  grid-template-columns: 1fr 80px;
  grid-template-areas:
    "main thumb"
    "footer footer";
  column-gap: .8rem;
  row-gap: .35rem;
  max-width: 460px;
}
.dx__embed-card--red   { border-left-color: #ff2d55; }
.dx__embed-card--blue  { border-left-color: #4da3ff; }
.dx__embed-card--green { border-left-color: #23a55a; }

/* Embed without a right-side thumbnail — main column spans full width
   and the footer centers itself with no avatar dot. */
.dx__embed-card--nothumb {
  grid-template-columns: 1fr;
  grid-template-areas: "main" "footer";
}
.dx__embed-card__footer--centered {
  justify-content: center;
  text-align: center;
}

.dx__embed-card__main { grid-area: main; min-width: 0; }
.dx__embed-card__title {
  display: block;
  color: #4da3ff;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: .55rem;
  text-decoration: none;
  cursor: pointer;
  word-wrap: break-word;
}
.dx__embed-card__title:hover { text-decoration: underline; }

/* 2-col fields grid (matches Discord's embed.fields layout) */
.dx__embed-card__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem .9rem;
  margin-bottom: .35rem;
}
.dx__embed-card__field { min-width: 0; }
.dx__embed-card__field--wide { grid-column: 1 / -1; }
.dx__embed-card__field-label {
  font-weight: 700;
  color: #fff;
  font-size: .68rem;
  margin-bottom: .15rem;
}
.dx__embed-card__field-value {
  color: #dbdee1;
  font-size: .68rem;
  line-height: 1.4;
  word-wrap: break-word;
}
.dx__embed-card__field-value--code {
  background: #1e1f22;
  color: #dbdee1;
  padding: .12rem .35rem;
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .6rem;
  display: inline-block;
  word-break: break-all;
}
.dx__embed-card__field-value--multiline {
  white-space: pre-line;
  line-height: 1.55;
}

/* Big "in stock" dot indicator */
.dx__dot--lg { width: .65rem; height: .65rem; box-shadow: 0 0 8px rgba(35, 165, 90, .55); }

/* Bottom links row (StockX | SnkrDunk | Ebay …) */
.dx__embed-card__links {
  display: flex; align-items: center;
  flex-wrap: wrap;
  gap: .25rem;
  font-size: .68rem;
  margin-top: .25rem;
}
.dx__link-sep { color: rgba(255, 255, 255, .25); margin: 0 .15rem; }

/* Right-side thumbnail */
.dx__embed-card__thumb {
  grid-area: thumb;
  width: 80px; height: 80px;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  align-self: start;
  background: #1e1f22;
}

.dx__thumb--holo-red {
  background:
    radial-gradient(60% 60% at 35% 30%, #ffe7d6 0%, transparent 60%),
    conic-gradient(from 25deg, #ff8c42, #ffd54a, #ff5170, #c8102e, #ff8c42);
  box-shadow: inset 0 0 14px rgba(255, 255, 255, .25);
}
.dx__thumb--holo-red::after {
  content: "MEGA";
  position: absolute;
  left: 4px; right: 4px; bottom: 4px;
  font-size: .42rem;
  letter-spacing: .12em;
  text-align: center;
  color: #fff;
  background: rgba(0, 0, 0, .55);
  padding: 1px 2px;
  border-radius: 2px;
  font-weight: 800;
}

.dx__thumb--holo-yellow {
  background:
    radial-gradient(60% 60% at 50% 40%, #fff5b8 0%, transparent 60%),
    conic-gradient(from 0deg, #ffe066, #c2853a, #ffd700, #d49a2b, #ffe066);
  box-shadow: inset 0 0 14px rgba(255, 255, 255, .35);
}
.dx__thumb--holo-yellow::after {
  content: "EEVEE";
  position: absolute;
  left: 4px; right: 4px; bottom: 4px;
  font-size: .42rem;
  letter-spacing: .12em;
  text-align: center;
  color: #fff;
  background: rgba(0, 0, 0, .55);
  padding: 1px 2px;
  border-radius: 2px;
  font-weight: 800;
}

/* Blue link styling for embed field values (URLs, ATC, etc.) */
.dx__field-link {
  color: #00a8fc;
  text-decoration: none;
  word-break: break-all;
  cursor: pointer;
}
.dx__field-link:hover { text-decoration: underline; }

/* CORSAIR DDR5 RAM stick (white body + RGB top strip + heatsink fins) */
.dx__thumb--ram {
  background:
    linear-gradient(135deg, #f6f6f8 0%, #ffffff 35%, #d8d9de 75%, #b9bac0 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .12),
    inset 0 0 12px rgba(0, 0, 0, .08);
  border-radius: 4px;
  position: relative;
}
.dx__thumb--ram::before {
  /* heatsink fins (subtle vertical slats) */
  content: "";
  position: absolute;
  inset: 14px 8px 14px 8px;
  background: repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, .04) 0,
    rgba(0, 0, 0, .04) 1px,
    rgba(255, 255, 255, .65) 1px,
    rgba(255, 255, 255, .65) 4px
  );
  border-radius: 2px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .12);
}
.dx__thumb--ram::after {
  /* RGB lightbar across the top edge */
  content: "";
  position: absolute;
  left: 8px; right: 8px; top: 6px;
  height: 5px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    #ff5170 0%, #f0b232 25%, #2dc771 50%, #4da3ff 75%, #b061ff 100%);
  box-shadow: 0 0 10px rgba(255, 255, 255, .35);
  filter: saturate(1.1);
}

.dx__thumb--sneaker {
  background: linear-gradient(180deg, #1c1d22 0%, #2c2d33 100%);
}
.dx__thumb--sneaker::before {
  /* sneaker silhouette */
  content: "";
  position: absolute;
  left: 6%; right: 6%;
  bottom: 22%;
  height: 50%;
  background: #f4f5f7;
  clip-path: polygon(
    0% 60%, 5% 35%, 18% 18%, 38% 8%, 60% 5%, 75% 12%,
    92% 30%, 100% 55%, 100% 100%, 0% 100%
  );
  opacity: .92;
}
.dx__thumb--sneaker::after {
  content: "";
  position: absolute;
  left: 4%; right: 4%;
  bottom: 18%;
  height: 6px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .2);
}

/* Footer (Developed by @TheNorthCop · timestamp) */
.dx__embed-card__footer {
  grid-area: footer;
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .58rem;
  color: #80848e;
  padding-top: .4rem;
  border-top: 1px solid rgba(255, 255, 255, .04);
  margin-top: .15rem;
}
.dx__embed-card__footer-icon {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #ff5170, #ff2d55 60%, #b51a36)
    center/100% 100% no-repeat,
    url('/static/img/logos/tnc.png') center/68% no-repeat;
  flex: none;
}

@media (max-width: 1100px) {
  .dx__embed-card { max-width: 100%; }
  .dx__embed-card__title { font-size: .72rem; }
  .dx__embed-card__field-label, .dx__embed-card__field-value { font-size: .64rem; }
}

@media (max-width: 900px) {
  .dx--webhook .dx__embed-card {
    grid-template-columns: 1fr;
    grid-template-areas: "main" "thumb" "footer";
  }
  .dx--webhook .dx__embed-card__thumb { width: 100%; height: 90px; }
}

/* =======================================================================
   Sourcing-lead Discord posts — fourth toolkit card
   ===================================================================== */

/* Custom avatars for lead posters */
.dx__avatar--chief {
  background: #0e0e10;
  color: #fff;
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .08em;
  position: relative;
}
.dx__avatar--chief::before {
  content: "CHIEF";
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-display);
}
.dx__avatar--chief::after {
  /* small red triangle hint at the bottom */
  content: "";
  position: absolute;
  left: 50%; bottom: 4px;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 7px solid #ff2d55;
  filter: drop-shadow(0 1px 2px rgba(255, 45, 85, .6));
}
.dx__avatar--hg {
  background:
    radial-gradient(60% 60% at 50% 35%, #ffffff 0%, #e6e7ec 60%, #c8c9d0 100%);
  position: relative;
}
.dx__avatar--hg::before {
  content: "👻";
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  font-size: 1rem;
}
.dx__avatar--ari {
  background:
    conic-gradient(from 0deg,
      #ff2d55, #f0b232, #2dc771, #4da3ff, #b061ff, #ff2d55);
  position: relative;
  overflow: hidden;
}
.dx__avatar--ari::before {
  /* spiral overlay */
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      transparent 0,
      transparent 4px,
      rgba(0, 0, 0, .4) 4px,
      rgba(0, 0, 0, .4) 6px,
      transparent 6px,
      transparent 9px,
      rgba(0, 0, 0, .35) 9px,
      rgba(0, 0, 0, .35) 11px,
      transparent 11px);
}

/* Author-name accent colours per poster */
.dx__author-name--chief { color: #f0b232; }
.dx__author-name--hg    { color: #f0b232; }
.dx__author-name--ari   { color: #ffffff; }

/* TNC + N badges next to author name */
.dx__badge--tnc {
  background: #1c1c20;
  border: 1px solid rgba(255, 45, 85, .35);
  color: #ffb3c2;
  font-size: .55rem;
  letter-spacing: .04em;
  padding: 1px 5px 1px 3px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: 800;
}
.dx__badge-flame { font-size: .6rem; line-height: 1; }
.dx__badge--north {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .12);
  padding: 0;
  width: 16px; height: 16px;
  display: inline-grid;
  place-items: center;
  border-radius: 3px;
}
.dx__badge--north img { width: 12px; height: 12px; object-fit: contain; }

/* ---------- Channel pill (#name purple chip) ---------- */
.dx__chan-pill {
  display: inline-flex; align-items: center;
  gap: 1px;
  padding: 0 4px;
  margin: 0 1px;
  background: rgba(149, 109, 255, .15);
  color: #c9bfff;
  border-radius: 3px;
  font-weight: 600;
  font-size: .68rem;
  cursor: default;
  white-space: nowrap;
  vertical-align: baseline;
}
.dx__chan-pill-hash { color: #c9bfff; opacity: .85; margin-right: 1px; }
.dx__chan-pill--sm { font-size: .62rem; padding: 0 3px; }

/* ---------- Common lead text styling ---------- */
.dx__chat--lead {
  padding-bottom: .8rem;
  /* lead posts can be taller than the card (esp. FBA + SAS card),
     allow vertical scroll inside the slide rather than clipping */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .12) transparent;
}
.dx__chat--lead::-webkit-scrollbar { width: 6px; }
.dx__chat--lead::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .12);
  border-radius: 3px;
}
.dx__lead { gap: .65rem; }
.dx__lead .dx__author { margin-bottom: .35rem; }
.dx__lead-text  { color: #dbdee1; font-size: .76rem; line-height: 1.45; }
.dx__lead-text-sm { color: #b5bac1; font-size: .7rem; }
.dx__lead-quote {
  color: #b5bac1;
  font-size: .72rem;
  border-left: 3px solid rgba(149, 109, 255, .55);
  padding-left: .55rem;
  margin: .15rem 0 .55rem;
}

/* ---------- TCG-list kind: numbered rows + reactions ---------- */
.dx__lead-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: .45rem;
}
.dx__lead-row {
  display: flex; align-items: flex-start;
  gap: .55rem;
  font-size: .72rem;
  line-height: 1.4;
  color: #dbdee1;
}
.dx__num {
  width: 18px; height: 18px;
  border-radius: 3px;
  background: #4da3ff;
  color: #ffffff;
  font-size: .58rem;
  font-weight: 800;
  display: inline-grid; place-items: center;
  flex: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.dx__num--1 { background: #4da3ff; }
.dx__num--2 { background: #4da3ff; }
.dx__num--3 { background: #4da3ff; }
.dx__num--4 { background: #4da3ff; }

.dx__reactions {
  display: flex; flex-wrap: wrap;
  gap: .35rem;
  margin-top: .65rem;
}
.dx__reaction {
  display: inline-flex; align-items: center;
  gap: 3px;
  background: rgba(77, 163, 255, .12);
  border: 1px solid rgba(77, 163, 255, .25);
  border-radius: 8px;
  padding: 1px 5px;
  font-size: .6rem;
  color: #b5d6ff;
  cursor: default;
}
.dx__reaction-emoji { font-size: .75rem; line-height: 1; }
.dx__reaction-count { font-weight: 700; }
.dx__reaction--add {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .08);
  color: #80848e;
}

/* ---------- Tickets thread kind ---------- */
.dx__thread { display: flex; flex-direction: column; gap: .65rem; }
.dx__signup-list {
  list-style: none;
  margin: .25rem 0 0; padding: 0 0 0 .15rem;
  display: flex; flex-direction: column;
  gap: .25rem;
  font-size: .7rem;
  color: #dbdee1;
}
.dx__signup-list li {
  display: flex; align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
}
.dx__chan-balloon {
  font-size: .6rem;
  background: rgba(149, 109, 255, .15);
  color: #c9bfff;
  border-radius: 3px;
  padding: 0 3px;
}
.dx__sub-msg {
  display: flex; flex-direction: column;
  gap: .2rem;
  padding-top: .35rem;
  border-top: 1px solid rgba(255, 255, 255, .04);
}
.dx__sub-msg--reply {
  background: linear-gradient(90deg, rgba(149, 109, 255, .06), transparent 60%);
  border-radius: 4px;
  padding: .35rem .45rem;
}
.dx__reply-preview {
  display: flex; align-items: center;
  gap: .35rem; flex-wrap: wrap;
  position: relative;
  padding-left: 1rem;
}
.dx__reply-bar {
  position: absolute;
  left: 0; top: 50%;
  width: .75rem; height: 1rem;
  border-left: 2px solid rgba(255, 255, 255, .15);
  border-top: 2px solid rgba(255, 255, 255, .15);
  border-top-left-radius: 6px;
  transform: translateY(-50%);
}
.dx__sub-time {
  font-size: .58rem;
  color: #80848e;
}
.dx__edited { color: #80848e; font-size: .58rem; font-style: italic; }
.dx__mention {
  background: rgba(255, 45, 85, .12);
  color: #ff8aa1;
  padding: 0 4px;
  border-radius: 3px;
  font-weight: 600;
}

/* ---------- Hot Wheels RLC kind ---------- */
.dx__rlc-status {
  display: flex; align-items: center;
  gap: .35rem;
  margin: .15rem 0 .55rem;
  flex-wrap: wrap;
}
.dx__status-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex: none;
}
.dx__status-dot--green  { background: #2dc771; }
.dx__status-dot--yellow { background: #f0b232; }
.dx__status-dot--red    { background: #ff2d55; }
.dx__rlc-title {
  color: #ffffff;
  font-weight: 700;
  font-size: .82rem;
  margin-left: .25rem;
}

.dx__info-row {
  display: flex; align-items: center;
  gap: .4rem; flex-wrap: wrap;
  margin: .25rem 0;
  font-size: .72rem;
}
.dx__info-row--indent { padding-left: 1.1rem; margin: .15rem 0; }
.dx__info-icon { font-size: .82rem; flex: none; }
.dx__info-label { color: #dbdee1; font-weight: 500; }
.dx__info-code {
  background: #1e1f22;
  color: #dbdee1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .68rem;
  padding: 1px 6px;
  border-radius: 3px;
}
.dx__resell { margin: .3rem 0; }
.dx__lead-url {
  color: #00a8fc;
  text-decoration: none;
  font-size: .7rem;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.dx__lead-url:hover { text-decoration: underline; }

.dx__codeblock {
  background: #1e1f22;
  border: 1px solid rgba(255, 255, 255, .04);
  color: #b5bac1;
  padding: .5rem .65rem;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .62rem;
  line-height: 1.5;
  margin: .55rem 0;
}
.dx__monitor-line {
  display: inline-flex; align-items: center;
  gap: .35rem;
  background: rgba(255, 255, 255, .03);
  padding: .35rem .5rem;
  border-radius: 4px;
  font-size: .68rem;
  border-left: 3px solid rgba(255, 255, 255, .15);
}

/* ---------- FBA Sourcing kind ---------- */
.dx__fba-title {
  color: #ffffff;
  font-weight: 700;
  font-size: .82rem;
  margin-bottom: .35rem;
}
.dx__fba-link { margin: .2rem 0; }
.dx__fba-link .dx__info-label { display: block; font-weight: 700; margin-bottom: 1px; }

.dx__fba-stats {
  display: flex; flex-wrap: wrap;
  gap: .5rem 1.2rem;
  margin: .55rem 0 .35rem;
  font-size: .72rem;
}
.dx__fba-stat strong {
  color: #ffffff; font-weight: 700; margin-right: .25rem;
}
.dx__fba-stat-val { color: #dbdee1; }
.dx__fba-stat-val--green { color: #2dc771; font-weight: 700; }

.dx__fba-notes-heading {
  color: #ffffff; font-weight: 700; font-size: .72rem;
  margin: .35rem 0 .15rem;
}
.dx__fba-note {
  margin: .2rem 0;
  font-size: .68rem;
  color: #b5bac1;
}

/* SAS-style mini analytics card (for FBA leads) */
.dx__sas {
  background: #1f2024;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 4px;
  padding: .55rem;
  margin-top: .45rem;
  display: flex; flex-direction: column;
  gap: .5rem;
}
.dx__sas-head {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: .55rem;
  align-items: start;
}
.dx__sas-thumb {
  width: 60px; height: 60px;
  background: linear-gradient(135deg, #fff7d6, #ffd16a);
  border-radius: 4px;
  display: grid; place-items: center;
  font-size: 1.1rem;
  letter-spacing: -3px;
}
.dx__sas-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dx__sas-title { color: #ffffff; font-weight: 700; font-size: .65rem; line-height: 1.25; }
.dx__sas-sub { color: #b5bac1; font-size: .55rem; }
.dx__sas-sub em { color: #80848e; font-style: normal; }
.dx__sas-sub code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .55rem;
}
.dx__sas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}
.dx__sas-cell {
  background: #2a2b30;
  border-radius: 3px;
  padding: 4px 6px;
  text-align: center;
}
.dx__sas-label {
  font-size: .5rem;
  letter-spacing: .08em;
  color: #80848e;
  text-transform: uppercase;
  margin-bottom: 1px;
}
.dx__sas-val {
  font-size: .65rem;
  font-weight: 700;
  color: #fff;
}
.dx__sas-val--green { color: #57d68f; background: rgba(45, 199, 113, .12); border-radius: 2px; padding: 1px 0; }
.dx__sas-val--blue  { color: #8ec1ff; background: rgba(77, 163, 255, .12); border-radius: 2px; padding: 1px 0; }
.dx__sas-val--pink  { color: #ffb3c2; background: rgba(255, 45, 85, .10);  border-radius: 2px; padding: 1px 0; }

@media (max-width: 900px) {
  .dx__fba-stats { gap: .4rem .8rem; }
  .dx__sas-head  { grid-template-columns: 48px 1fr; }
  .dx__sas-thumb { width: 48px; height: 48px; font-size: .9rem; }
}

/* =======================================================================
   Bot setup / Websocket guides — third toolkit card (Automation & bots)
   Discord-style posts that re-create our member-only setup walkthroughs.
   The actual reference screenshot is embedded as a blurred attachment.
   ===================================================================== */

/* Forwarded indicator that sits above the author row */
.dx__forwarded {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #b5bac1;
  font-size: .62rem;
  font-style: italic;
  margin-bottom: 2px;
}
.dx__forwarded-arrow { font-size: .8rem; color: #80848e; font-style: normal; }

/* @mention pill row that appears just under the author line */
.dx__bot-mention-row {
  display: flex;
  gap: 4px;
  align-items: center;
  margin: .15rem 0 .35rem;
}

/* Channel-pill style "header" line at the top of a bot-setup post.
   Shows: 🇨🇦 Costco CA - ⌬ Stellar AIO */
.dx__bot-header {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem;
  padding: .3rem .55rem;
  background: rgba(88, 101, 242, .12);
  border: 1px solid rgba(88, 101, 242, .25);
  border-radius: 6px;
  margin: .25rem 0 .55rem;
  color: #dbdee1;
  font-size: .72rem;
  font-weight: 600;
}
.dx__bot-flag      { font-size: .85rem; line-height: 1; }
.dx__bot-name      { color: #ffffff; }
.dx__bot-divider   { color: #80848e; font-weight: 400; }
.dx__bot-tool-glyph{ color: #ff5d5d; font-size: .85rem; line-height: 1; }
.dx__bot-tool      { color: #ffd5d5; }

/* Standalone discord blockquote (purple bar on the left + icon + label) */
.dx__bot-quote {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem 0 .25rem .55rem;
  border-left: 3px solid rgba(149, 109, 255, .55);
  margin: .35rem 0 .45rem;
  color: #c9bfff;
  font-size: .72rem;
  font-weight: 600;
}
.dx__bot-quote-icon { font-size: .8rem; line-height: 1; }
.dx__bot-quote-text { color: #e2dffe; }

/* Section heading + lists (Prerequisite / Checkout Tasks / etc.) */
.dx__bot-section { margin: .4rem 0 .25rem; }
.dx__bot-h {
  font-size: .68rem;
  font-weight: 700;
  color: #ffffff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .35);
  text-underline-offset: 2px;
  margin: 0 0 .2rem;
  letter-spacing: .01em;
}
.dx__bot-list {
  margin: 0 0 .3rem;
  padding-left: 1.05rem;
  color: #dbdee1;
  font-size: .72rem;
  line-height: 1.5;
}
.dx__bot-list--ul { list-style: disc; }
.dx__bot-list--ol { list-style: decimal; }
.dx__bot-list li::marker { color: #80848e; }
.dx__bot-li { padding: .05rem 0; }
.dx__bot-li code.dx__code,
.dx__bot-para code.dx__code {
  font-size: .66rem;
  padding: 0 .25rem;
}
.dx__bot-li .dx__chan-pill,
.dx__bot-para .dx__chan-pill { vertical-align: baseline; }
.dx__bot-li .dx__field-link,
.dx__bot-para .dx__field-link { word-break: break-all; }
.dx__bot-para { margin: .25rem 0; }
.dx__bold { color: #ffffff; font-weight: 700; }

/* Redact member-only instructional content. Headings, channel pills, the
   header bar, quote and author stay crisp — only the actual "information"
   (bullets / numbered steps / paragraphs) is blurred until hover. */
.dx__bot-li,
.dx__bot-para {
  filter: blur(3.5px) saturate(.9);
  transition: filter .35s var(--ease-out);
  user-select: none;
}
.dx__chat--bot:hover .dx__bot-li,
.dx__chat--bot:hover .dx__bot-para { filter: blur(2px) saturate(.95); }
/* Keep nested links and channel pills inside the blurred run from offering
   pointer feedback — the redaction is purely a visual layer. */
.dx__bot-li *,
.dx__bot-para * { pointer-events: none; }

/* Embedded screenshot attachment — blurred to redact sensitive UI bits.
   The figure mimics Discord's image attachment frame. */
.dx__bot-image {
  position: relative;
  margin: .5rem 0 .25rem;
  border-radius: 6px;
  overflow: hidden;
  background: #1e1f22;
  border: 1px solid rgba(255, 255, 255, .06);
  max-width: 100%;
}
.dx__bot-image img {
  display: block;
  width: 100%;
  height: auto;
  filter: blur(4px) saturate(.85);
  /* Compensate for blur edge bleed */
  transform: scale(1.04);
  transform-origin: center;
  transition: filter .35s var(--ease-out), transform .35s var(--ease-out);
}
.dx__bot-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .35) 100%);
  pointer-events: none;
}
.dx__bot-image-cap {
  position: absolute;
  left: 50%;
  bottom: .55rem;
  transform: translateX(-50%);
  font-size: .58rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
  background: rgba(0, 0, 0, .55);
  padding: 3px 8px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  pointer-events: none;
}
/* Reveal a touch more detail on hover so the card feels alive */
.dx__bot-image:hover img { filter: blur(2.5px) saturate(.95); }

/* Footer line at the bottom of the websocket post (#feature-updates · date) */
.dx__bot-foot {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .35rem;
  color: #80848e;
  font-size: .62rem;
}
.dx__bot-foot-sep  { color: #5c5e63; }
.dx__bot-foot-date { color: #b5bac1; }

@media (max-width: 900px) {
  .dx__bot-h        { font-size: .64rem; }
  .dx__bot-list     { font-size: .68rem; padding-left: .9rem; }
  .dx__bot-header   { font-size: .66rem; padding: .25rem .45rem; }
  .dx__bot-image img{ filter: blur(3px) saturate(.85); }
}

/* =======================================================================
   Tools showcase — fifth toolkit card.
   Shows our App / Toolbox / Chrome Extension as a rotating product carousel,
   with a brief pitch on the left and a device-framed screenshot on the right.
   ===================================================================== */

.tools {
  position: absolute;
  inset: 1.5rem 1.5rem 9rem 1.5rem;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(140% 90% at 0% 0%, rgba(255, 45, 85, .14), transparent 55%),
    radial-gradient(120% 90% at 100% 100%, rgba(255, 122, 122, .10), transparent 60%),
    linear-gradient(180deg, #18121a, #0f0a10);
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, .55),
    0 0 0 1px rgba(255, 45, 85, .08);
  font-family: var(--font-body);
  z-index: 2;
}
.tools__slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(260px, 1.05fr);
  gap: 1.2rem;
  align-items: center;
  padding: 1.4rem 1.6rem 2rem;
  opacity: 0;
  pointer-events: none;
  transform: scale(.985);
  transition:
    opacity .55s var(--ease-out),
    transform .7s var(--ease-spring);
}
.tools__slide.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  z-index: 1;
}

/* ---- left column (info) ---- */
.tools__info {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  min-width: 0;
}
.tools__kind {
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  font-weight: 600;
}
.tools__name {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 2.05rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  background: linear-gradient(135deg, #ffffff 0%, #ffd5d5 65%, #ff7a7a 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tools__tagline {
  color: rgba(255, 255, 255, .78);
  font-size: .85rem;
  line-height: 1.5;
  max-width: 36ch;
  margin: 0;
}
.tools__features {
  list-style: none;
  margin: .15rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.tools__feature {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  color: rgba(255, 255, 255, .78);
  font-size: .76rem;
  line-height: 1.4;
}
.tools__check {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 45, 85, .18);
  color: #ff7a7a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .62rem;
  font-weight: 700;
  margin-top: 1px;
}
.tools__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .35rem;
}
.tools__chip {
  font-size: .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  font-weight: 600;
}

/* ---- right column (visual) ---- */
.tools__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-width: 0;
}

/* Common frame — clean rounded shadowed container */
.tools-frame {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #0a0a0d;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, .8),
    0 0 0 1px rgba(255, 45, 85, .08),
    inset 0 0 0 1px rgba(255, 255, 255, .03);
  max-width: 100%;
  max-height: 100%;
}
.tools-frame__img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- phone frame (TNC App) ---- */
.tools-frame--phone {
  width: clamp(180px, 40%, 230px);
  border-radius: 28px;
  padding: 6px;
  background: linear-gradient(180deg, #1a1a1f, #0a0a0d);
  border: 1px solid rgba(255, 255, 255, .12);
}
.tools-frame--phone .tools-frame__img {
  border-radius: 22px;
}
.tools-frame--phone .tools-frame__home {
  position: absolute;
  bottom: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 38%;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .35);
}

/* ---- desktop frame (Toolbox) ---- */
.tools-frame--desktop {
  width: 100%;
}
.tools-frame__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: linear-gradient(180deg, #1c1d22, #131418);
  border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.tools-frame__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}
.tools-frame__dot--r { background: #ff5f56; }
.tools-frame__dot--y { background: #ffbd2e; }
.tools-frame__dot--g { background: #27c93f; }
.tools-frame__addr {
  margin-left: auto;
  margin-right: auto;
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  font-weight: 600;
}

/* ---- popup frame (Chrome Extension) ----
   The native screenshot is very tall (~360x1024). We frame it as a real
   Chrome extension popup window — narrow + portrait aspect-ratio — and only
   show the top portion of the screenshot so it never gets squished.       */
.tools-frame--popup {
  width: clamp(200px, 46%, 240px);
  aspect-ratio: 9 / 14;
  display: flex;
  flex-direction: column;
  /* Override the .tools-frame max-height so flex can size children. */
  max-height: 100%;
  min-height: 0;
}
.tools-frame--popup .tools-frame__bar { flex: none; }
.tools-frame--popup .tools-frame__img {
  flex: 1 1 0;
  width: 100%;
  height: auto;
  min-height: 0;
  object-fit: cover;
  object-position: top center;
}
.tools-frame__bar--popup {
  justify-content: flex-start;
  gap: 8px;
}
.tools-frame__bar--popup .tools-frame__addr {
  margin: 0;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(255, 255, 255, .5);
  font-size: .55rem;
}
.tools-frame__puzzle {
  font-size: .8rem;
  line-height: 1;
  filter: grayscale(.3);
}

/* Marketing-only blur over the right portion of the extension popup
   screenshot — covers the active-site name in the header AND every site
   label in the "Recent activity" list, while leaving the favicons /
   colored dots on the left visible so the layout still reads as
   "extension popup tracking real activity". The image itself is a static
   PNG, so this overlay is the cleanest way to censor the bundled labels
   without re-rendering the asset. */
.tools-frame--popup { isolation: isolate; }
.tools-frame--popup::after {
  content: '';
  position: absolute;
  top: 18px;
  right: 0;
  bottom: 0;
  width: 56%;
  backdrop-filter: blur(7px) saturate(1.1);
  -webkit-backdrop-filter: blur(7px) saturate(1.1);
  background: rgba(10, 12, 18, .04);
  pointer-events: none;
  z-index: 2;
}

/* Subtle floating animation on the active slide's visual */
.tools__slide.is-active .tools-frame {
  animation: toolsFloat 6s ease-in-out infinite;
}
@keyframes toolsFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@media (max-width: 900px) {
  /* Single column on mobile: info on top, visual below.
     Allow internal scroll if the combined height exceeds the card. */
  .tools__slide {
    grid-template-columns: 1fr;
    align-items: start;
    align-content: start;
    overflow-y: auto;
    gap: .8rem;
    padding: 1rem 1.1rem 1.4rem;
  }
  .tools__info { gap: .35rem; }
  .tools__tagline { font-size: .78rem; }
  .tools__features { display: none; }
  .tools__chips { margin-top: .15rem; }

  /* Show the image on mobile, sized down to fit. */
  .tools__visual {
    display: flex;
    justify-content: center;
    height: auto;
  }
  .tools-frame--phone   { width: clamp(110px, 28vw, 160px); }
  .tools-frame--popup   { width: clamp(150px, 42vw, 200px); }
  .tools-frame--desktop { width: 100%; max-width: 100%; }
}

/* =======================================================================
   Chrome-extension UI mockup — third toolkit card (Automation & bots)
   ===================================================================== */

.stack__card--ext {
  padding: 1.5rem 1.75rem 1.75rem;
  gap: .5rem;
}
.stack__card--ext h3,
.stack__card--ext p {
  position: relative;
  z-index: 4;
}
.stack__card--ext::after {
  /* same gradient bottom-fade as the discord card */
  content: "";
  position: absolute;
  left: 1.5rem; right: 1.5rem;
  bottom: 8.6rem;
  height: 50px;
  background: linear-gradient(180deg, transparent, rgba(11, 7, 8, .85));
  pointer-events: none;
  z-index: 3;
  border-radius: 0 0 14px 14px;
}

/* Outer container — centered popup column */
.ext {
  position: absolute;
  inset: 1.25rem 1.5rem 9rem 1.5rem;
  display: flex;
  justify-content: center;
  z-index: 2;
}

.ext__slide {
  position: absolute;
  inset: 0;
  width: min(380px, 100%);
  margin-inline: auto;
  background: #1c1c20;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, .55),
    0 0 0 1px rgba(255, 45, 85, .08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  font-size: .72rem;
  color: #d6d8db;
}

/* Chrome title bar */
.ext__chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem .75rem;
  background: linear-gradient(180deg, #232327 0%, #1c1c20 100%);
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  flex: none;
}
.ext__chrome-brand {
  display: flex; align-items: center; gap: .45rem;
  font-weight: 600;
  color: #fff;
  font-size: .78rem;
}
.ext__chrome-logo {
  width: 16px; height: 16px;
  object-fit: contain;
  filter: drop-shadow(0 1px 4px rgba(255, 45, 85, .4));
}
.ext__chrome-actions {
  display: flex; align-items: center; gap: .55rem;
  color: #80848e;
  font-size: .85rem;
  line-height: 1;
}
.ext__chrome-icon { cursor: default; }

/* Top bar — 2x2 tab grid + WMCA site selector */
.ext__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .65rem .75rem .8rem;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  flex: none;
  gap: .75rem;
}
.ext__tab-grid {
  display: grid;
  grid-template-columns: repeat(2, 30px);
  grid-template-rows: repeat(2, 30px);
  gap: .35rem;
}
.ext__tab {
  width: 30px; height: 30px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .06);
  background: #2a2a2f;
  display: grid; place-items: center;
  cursor: pointer;
  padding: 0;
  transition: border-color .25s var(--ease-out), transform .25s var(--ease-spring);
}
.ext__tab-glyph {
  font-size: .82rem;
  filter: grayscale(.6) brightness(.85);
  transition: filter .25s var(--ease-out);
}
.ext__tab.is-active { transform: scale(1.04); }
.ext__tab.is-active .ext__tab-glyph { filter: none; }
.ext__tab--green.is-active  { border-color: #2dc771; box-shadow: 0 0 0 1px rgba(45, 199, 113, .35); }
.ext__tab--blue.is-active   { border-color: #4da3ff; box-shadow: 0 0 0 1px rgba(77, 163, 255, .35); }
.ext__tab--orange.is-active { border-color: #f0b232; box-shadow: 0 0 0 1px rgba(240, 178, 50, .35); }
.ext__tab--red.is-active    { border-color: #ff2d55; box-shadow: 0 0 0 1px rgba(255, 45, 85, .35); }

.ext__site {
  display: flex; align-items: center; gap: .45rem;
}
.ext__select {
  background: #2a2a2f;
  border: 1px solid #ff2d55;
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  padding: .35rem .55rem;
  border-radius: 6px;
  display: inline-flex; align-items: center; gap: .35rem;
  cursor: pointer;
  min-width: 90px;
  justify-content: space-between;
}
.ext__caret { color: #80848e; font-size: .65rem; }
.ext__star {
  width: 28px; height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: transparent;
  color: #80848e;
  cursor: pointer;
  display: grid; place-items: center;
  font-size: .9rem;
}

/* Page area */
.ext__page {
  padding: .85rem .85rem 1rem;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  min-height: 0;
}
.ext__page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .15rem;
}
.ext__page-header h4 {
  font-size: .92rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

/* ---------- Buttons / inputs / chips ---------- */

.ext__btn {
  background: #2a2a2f;
  border: 1px solid rgba(255, 255, 255, .08);
  color: #d6d8db;
  font-size: .68rem;
  font-weight: 500;
  padding: .45rem .75rem;
  border-radius: 6px;
  cursor: pointer;
  flex: 1;
}
.ext__btn--ghost {
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, .15);
  color: #80848e;
  width: 100%;
  text-align: center;
}
.ext__btn--inline { flex: none; padding: .35rem .55rem; font-size: .65rem; }
.ext__btn--small  { flex: none; padding: .3rem .55rem; font-size: .62rem; }
.ext__btn-row { display: flex; gap: .4rem; }

.ext__field-row {
  display: flex; align-items: center; gap: .4rem;
  background: #2a2a2f;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 6px;
  padding: .25rem .35rem .25rem .55rem;
}
.ext__field-icon { color: #80848e; font-size: .82rem; flex: none; }
.ext__input {
  background: transparent;
  color: #d6d8db;
  font-size: .68rem;
  flex: 1;
  padding: .25rem 0;
  display: inline-block;
}
.ext__input--placeholder, .ext__input--search { color: #80848e; }
.ext__input--xs {
  background: #1c1c20;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 4px;
  padding: .15rem .4rem;
  font-size: .68rem;
  flex: none;
  min-width: 30px;
  text-align: center;
}
.ext__retry {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .68rem;
  color: #d6d8db;
}
.ext__retry-suffix { color: #80848e; }

/* ---------- Task card ---------- */

.ext__task {
  background: #1f1f23;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 8px;
  padding: .6rem .65rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.ext__task-head {
  display: flex; align-items: center; gap: .45rem;
}
.ext__task-name { color: #fff; font-size: .8rem; font-weight: 700; flex: 1; }
.ext__task-meta {
  font-size: .64rem;
  color: #80848e;
  display: flex; gap: .35rem;
  align-items: center;
}
.ext__task-meta code {
  background: rgba(255, 255, 255, .04);
  color: #b5bac1;
  padding: 0 .3rem;
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .58rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
.ext__task-controls {
  display: flex; align-items: center; gap: .35rem;
  margin-top: .15rem;
}
.ext__task-actions { display: inline-flex; gap: .25rem; margin-left: auto; }

.ext__icon-btn {
  width: 22px; height: 22px;
  border-radius: 4px;
  display: grid; place-items: center;
  background: #2a2a2f;
  border: 1px solid rgba(255, 255, 255, .07);
  font-size: .65rem;
  color: #d6d8db;
  cursor: default;
}
.ext__icon-btn--bordered { background: transparent; border-color: rgba(255, 255, 255, .12); }
.ext__icon-btn--play { color: #2dc771; border-color: rgba(45, 199, 113, .4); }
.ext__icon-btn--edit { color: #f0b232; border-color: rgba(240, 178, 50, .4); }
.ext__icon-btn--copy { color: #80848e; }
.ext__icon-btn--del  { color: #ff5170; border-color: rgba(255, 45, 85, .4); }

/* Chips for Qty / Mode dropdowns inside the task card */
.ext__chip {
  display: inline-flex; align-items: center; gap: .25rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  padding: .15rem .4rem;
  border-radius: 4px;
  font-size: .62rem;
  color: #d6d8db;
  cursor: default;
}
.ext__chip b { color: #fff; font-weight: 600; }
.ext__chip--green  { border-color: rgba(45, 199, 113, .45); color: #c4f1d8; }
.ext__chip--purple { border-color: rgba(149, 109, 255, .5);  color: #d3c2ff; }

/* ---------- Successes page ---------- */

.ext__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
}
.ext__stat-tile {
  background: #1f1f23;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 8px;
  padding: .65rem .5rem;
  text-align: center;
}
.ext__stat-value {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  color: #2dc771;
  line-height: 1;
}
.ext__stat-label {
  font-size: .55rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #707085;
  margin-top: .35rem;
}

.ext__site-filters {
  display: flex; flex-wrap: wrap;
  gap: .35rem;
}
.ext__site-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  background: #1f1f23;
  border: 1px solid rgba(255, 255, 255, .07);
  padding: .35rem .55rem;
  border-radius: 6px;
  font-size: .66rem;
  font-weight: 600;
  color: #d6d8db;
  cursor: default;
}
.ext__site-pill em {
  font-style: normal;
  font-weight: 400;
  color: #2dc771;
  font-size: .62rem;
}
.ext__site-pill.is-active {
  border-color: #2dc771;
  background: rgba(45, 199, 113, .08);
  color: #fff;
}

.ext__activity-header {
  font-size: .58rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #707085;
  margin-top: .35rem;
}
.ext__activity {
  display: flex;
  flex-direction: column;
  background: #1f1f23;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 8px;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}
.ext__activity-row {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  align-items: center;
  gap: .55rem;
  padding: .35rem .55rem;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  font-size: .64rem;
}
.ext__activity-row:last-child { border-bottom: 0; }
.ext__activity-site { color: #fff; font-weight: 600; font-size: .65rem; }
.ext__activity-id   {
  color: #b5bac1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ext__activity-qty  { color: #2dc771; font-weight: 700; font-size: .62rem; }
.ext__activity-ago  { color: #707085; font-size: .58rem; }

/* ---------- Profiles page ---------- */

.ext__profiles {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  overflow: hidden;
  flex: 1;
}
.ext__profile {
  background: #1f1f23;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 8px;
  padding: .55rem .65rem;
}
.ext__profile.is-default {
  border-color: rgba(255, 45, 85, .35);
  box-shadow: 0 0 0 1px rgba(255, 45, 85, .12) inset;
}
.ext__profile-head {
  display: flex; align-items: center; gap: .4rem;
  margin-bottom: .15rem;
}
.ext__profile-head strong { color: #fff; font-size: .74rem; flex: 1; }
.ext__profile-tag {
  background: rgba(255, 45, 85, .15);
  color: #ffb3c2;
  font-size: .52rem;
  letter-spacing: .12em;
  padding: .12rem .35rem;
  border-radius: 3px;
  font-weight: 700;
}
.ext__profile-meta {
  font-size: .62rem;
  color: #80848e;
  margin-top: .15rem;
}
.ext__profile-meta code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #b5bac1;
  font-size: .58rem;
  background: rgba(255, 255, 255, .04);
  padding: 0 .3rem;
  border-radius: 3px;
}

@media (max-width: 1100px) {
  .ext__slide { width: 100%; }
}

@media (max-width: 900px) {
  .ext { inset: 1rem 1rem 8rem 1rem; }
  .stack__card--ext::after { bottom: 7.6rem; }
}

/* Bottom blend so the discord block fades into the card backdrop */
.stack__card--discord::after {
  content: "";
  position: absolute;
  left: 1.5rem; right: 1.5rem;
  bottom: 8.6rem;
  height: 50px;
  background: linear-gradient(180deg, transparent, rgba(11, 7, 8, .85));
  pointer-events: none;
  z-index: 3;
  border-radius: 0 0 14px 14px;
}

.stack__card--discord h3,
.stack__card--discord p {
  position: relative;
  z-index: 4;
}

@media (max-width: 1100px) {
  .dx { font-size: .65rem; }
  .dx__title, .dx__chat-header { font-size: .75rem; }
  .dx__embed { max-width: 100%; }
}

@media (max-width: 900px) {
  .stack__layout { grid-template-columns: 1fr; gap: 1.5rem; padding-block: 5rem; }
  .stack__stage { height: 60vh; min-height: 460px; }
  .stack__intro-copy { display: none; }
  .stack__nav { display: none; }
  .stack__card { padding: 1.25rem; }
  .stack__card__index { top: 1rem; left: 1.25rem; font-size: clamp(4rem, 22vw, 8rem); }
  .stack__card h3 { font-size: clamp(1.4rem, 5vw, 1.9rem); }
  .stack__card p  { font-size: .9rem; }

  /* The discord/webhook/lead/bot/support cards collapse to a single column.
     The sidebar is hidden, so we MUST also flatten the slide grid — otherwise
     the chat ends up squashed into the narrow (140px / 30%) first track and
     the right half of the card sits empty. */
  .dx { inset: 1rem 1rem 7.5rem 1rem; font-size: .68rem; }
  .dx__slide { grid-template-columns: 1fr; }
  .dx__sidebar { display: none; }
  .dx__chat { padding: .55rem .7rem .9rem; }
  .dx__chat-header { padding: .45rem .7rem; font-size: .72rem; }
  .dx__avatar { width: 32px; height: 32px; }
  .dx__msg { grid-template-columns: 32px 1fr; gap: .55rem; }
  .dx__title { font-size: .82rem; }

  .stack__card--discord,
  .stack__card--ext { padding: 1.1rem 1.25rem 1.4rem; }
  .stack__card--discord::after,
  .stack__card--ext::after { bottom: 7.1rem; }
}

/* =======================================================================
   Horizontal scroll pinned section (categories)
   ===================================================================== */

.hscroll { position: relative; }
.hscroll__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  /* Anchor the track to the bottom so the heading at the top has clear airspace
     and never overlaps the card row regardless of viewport aspect ratio. */
  align-items: flex-end;
  padding-bottom: 4.5rem; /* leaves room for the progress bar */
}
.hscroll__header {
  position: absolute;
  top: clamp(6rem, 12vh, 8rem);
  left: 0; right: 0;
  padding-inline: clamp(2rem, 6vw, 4rem);
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 2rem;
  z-index: 3;
  pointer-events: none;
}
.hscroll__header h2 {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.03em;
  margin: 0;
}
.hscroll__header small {
  color: var(--text-muted);
  font-size: .85rem;
  letter-spacing: .1em;
}
/* Two-state hint: on desktop the section pins and the user keeps SCROLLING
   to advance; on phones it's a real touch carousel they SWIPE. We render
   both labels in HTML and let CSS pick the right one for the viewport. */
.hscroll__hint--desktop { display: inline; }
.hscroll__hint--mobile  { display: none;   }

.hscroll__track {
  display: flex;
  gap: 1.75rem;
  padding-inline: clamp(2rem, 6vw, 6vw);
  padding-block: 3rem 1rem;
  will-change: transform;
}
.hscroll__panel {
  flex: 0 0 clamp(300px, 42vw, 520px);
  /* Cap height so the heading at the top always clears the cards. */
  height: min(60vh, calc(100vh - 20rem));
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(180deg, #14141c, #0a0a10);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding: 2rem;
  transition: transform .6s var(--ease-spring);
}
.hscroll__panel:hover { transform: translateY(-6px) scale(1.01); }
.hscroll__panel::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(255,45,85,.22), transparent 55%),
    radial-gradient(120% 120% at 100% 100%, rgba(255,179,71,.16), transparent 60%);
}
.hscroll__panel::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 50%;
  background: linear-gradient(180deg, transparent, rgba(5,5,9,.9));
}
.hscroll__panel > * { position: relative; z-index: 2; }
.hscroll__panel__num {
  position: absolute;
  top: 1.25rem; left: 1.75rem;
  z-index: 3;
  font-family: var(--font-display);
  font-size: .75rem;
  letter-spacing: .3em;
  color: var(--text-muted);
}
.hscroll__panel__big {
  position: absolute;
  top: 11%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.8vw, 2.8rem);
  letter-spacing: -.04em;
  /* Brighter, more legible category title.
     - Stronger stroke than before (was .18 alpha).
     - Faint gradient fill via background-clip so the letters carry the
       brand red->amber accent at low intensity.
     - Soft red glow underneath for depth. */
  color: transparent;
  background: linear-gradient(180deg, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .25) 60%, rgba(255, 45, 85, .35) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-stroke: 1.4px rgba(255, 255, 255, .55);
  text-shadow: 0 8px 30px rgba(255, 45, 85, .25);
  white-space: nowrap;
  pointer-events: none;
}

/* Big emoji icon — primary visual identity for each market card.
   IMPORTANT: keep the emoji BEHIND the headline/copy/list so it never
   clips over the title text (was happening on Lowkey Flips' teddy bear).
   The bottom darkening gradient (::after) sits between the emoji and the
   panel background, but the emoji still drops below the title via z-index. */
.hscroll__panel__emoji {
  position: absolute;
  top: 32%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  font-size: clamp(4rem, 8vw, 6.5rem);
  line-height: 1;
  filter:
    drop-shadow(0 14px 40px rgba(255, 45, 85, .45))
    drop-shadow(0 4px 12px rgba(0, 0, 0, .55));
  transition: transform .6s var(--ease-spring);
  user-select: none;
  /* Soft fade-out at the bottom of the emoji so it disappears into the
     darkened text area instead of clipping into the title baseline. */
  -webkit-mask-image: linear-gradient(180deg, #000 55%, rgba(0, 0, 0, .35) 90%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 55%, rgba(0, 0, 0, .35) 90%, transparent 100%);
}
.hscroll__panel:hover .hscroll__panel__emoji {
  transform: translate(-50%, -55%) rotate(-4deg) scale(1.06);
}
.hscroll__panel h3 {
  position: relative;
  z-index: 2;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  margin: 0 0 .5rem;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.025em;
  text-shadow: 0 4px 18px rgba(0, 0, 0, .55);
}
.hscroll__panel p { color: var(--text-muted); margin: 0 0 1rem; max-width: 40ch; }
.hscroll__panel ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .4rem;
}
.hscroll__panel ul li {
  font-size: .78rem;
  padding: .35rem .7rem;
  border: 1px solid var(--border-hi);
  border-radius: 999px;
  color: var(--text);
}

/* ---- Trailing "More verticals on the way" panel ----
   Centered vertically + horizontally; the soon-badge sits inline above the
   title in the flow (no longer absolute-positioned at top-left where it
   was glitching over the heading). */
.hscroll__panel--soon {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem;
}
.hscroll__panel--soon .hscroll__panel__soon-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  max-width: 36ch;
}
.hscroll__panel--soon .hscroll__panel__num {
  position: static;
  display: inline-block;
  padding: .25rem .65rem;
  border-radius: 999px;
  background: rgba(255, 45, 85, .12);
  border: 1px solid rgba(255, 45, 85, .25);
  color: var(--text);
  font-size: .68rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-family: var(--font-display);
}
.hscroll__panel--soon h3 {
  margin: 0;
  text-shadow: 0 4px 18px rgba(0, 0, 0, .55);
}
.hscroll__panel--soon p {
  margin: 0;
  color: var(--text-muted);
}

.hscroll__progress {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(320px, 60vw);
  height: 2px;
  background: rgba(255,255,255,.1);
  border-radius: 2px;
  overflow: hidden;
  z-index: 3;
}
.hscroll__progress span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  will-change: width;
}

/* On phones / small tablets, the JS-driven sticky horizontal pin is hard to
   navigate by touch — there's no obvious cue to "keep scrolling vertically
   to advance horizontally". Below 900px we collapse the section into a
   regular vertical block whose track is a horizontally-scrollable carousel
   the user can swipe through directly. */
@media (max-width: 900px) {
  .hscroll { height: auto !important; }
  .hscroll__sticky {
    position: relative;
    height: auto;
    display: block;
    padding-bottom: 2rem;
    align-items: stretch;
  }
  .hscroll__header {
    position: static;
    padding: 5rem 1.5rem 1rem;
    pointer-events: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
  }
  /* Swap the "← scroll" desktop hint for a much more prominent "Swipe →"
     indicator. We only hint at touch-driven horizontal navigation on
     mobile, so this badge needs to actually catch the eye — it sits inside
     a brand-tinted pill, full-width, with an arrow that nudges right and
     back so the user instantly understands "drag this sideways". */
  .hscroll__hint--desktop { display: none; }
  .hscroll__hint--mobile  {
    display: inline-flex; align-items: center; gap: .55rem;
    margin-top: .35rem;
    padding: .55rem .9rem;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255,45,85,.16), rgba(255,45,85,.06));
    border: 1px solid rgba(255,45,85,.4);
    color: #fff;
    font-family: var(--font-display, inherit);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    box-shadow: 0 6px 20px -8px rgba(255,45,85,.45);
    animation: hscrollHintPulse 2.4s ease-in-out infinite;
  }
  .hscroll__hint__arrow {
    display: inline-block;
    font-size: 1.05rem;
    line-height: 1;
    transform: translateX(0);
    animation: hscrollHintArrow 1.4s ease-in-out infinite;
    will-change: transform;
  }
  /* Override the parent <small>'s legacy muted color so the bright pill
     actually inherits a readable text color. */
  .hscroll__header small { opacity: 1; }
  @keyframes hscrollHintArrow {
    0%, 100% { transform: translateX(0);    opacity: .85; }
    50%      { transform: translateX(7px);  opacity: 1;   }
  }
  @keyframes hscrollHintPulse {
    0%, 100% { box-shadow: 0 6px 20px -8px rgba(255,45,85,.45),
                           0 0 0 0   rgba(255,45,85,.0); }
    50%      { box-shadow: 0 6px 24px -6px rgba(255,45,85,.6),
                           0 0 0 6px rgba(255,45,85,.08); }
  }
  .hscroll__track {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding: 1.5rem 1.25rem 2rem;
    gap: 1rem;
    /* CSS must win over the JS-applied transform on resize-to-mobile. */
    transform: none !important;
    scrollbar-width: none;
  }
  .hscroll__track::-webkit-scrollbar { display: none; }
  .hscroll__panel {
    scroll-snap-align: center;
    flex: 0 0 86vw;
    max-width: 420px;
    height: clamp(440px, 68vh, 560px);
    padding: 1.5rem;
  }
  .hscroll__panel:hover { transform: none; }
  .hscroll__panel__num { top: 1rem; left: 1.25rem; }
  .hscroll__progress { display: none; }
}

/* =======================================================================
   Sticky big type reveal (manifesto)
   ===================================================================== */

.manifesto {
  position: relative;
  /* tall container for scrubbing */
}
.manifesto__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.manifesto__text {
  width: min(1200px, 92vw);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5.5vw, 5rem);
  letter-spacing: -.025em;
  line-height: 1.1;
  text-align: left;
  color: rgba(255,255,255,.14);
}
.manifesto__text .w {
  display: inline-block;
  padding-right: .28em;
  transition: color .35s var(--ease-out);
  color: rgba(255,255,255,.14);
}
.manifesto__text .w.is-lit {
  color: var(--text);
}
.manifesto__text .w.is-hot {
  color: var(--brand-1);
}

/* =======================================================================
   Showcase tilt cards (3D)
   ===================================================================== */

.showcase {
  padding-block: clamp(4rem, 8vw, 8rem);
}
.showcase__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  perspective: 1200px;
}
.tilt {
  position: relative;
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid var(--border);
  transform-style: preserve-3d;
  transition: transform .2s var(--ease-out);
  overflow: hidden;
  cursor: none;
  min-height: 260px;
}
.tilt::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(450px circle at var(--mx, 50%) var(--my, 50%), rgba(255,45,85,.18), transparent 40%);
  opacity: 0;
  transition: opacity var(--dur);
  pointer-events: none;
}
.tilt:hover::before { opacity: 1; }
.tilt__num {
  font-family: var(--font-display);
  font-weight: 800;
  color: rgba(255,255,255,.08);
  font-size: 4.5rem;
  line-height: 1;
  letter-spacing: -.04em;
  transform: translateZ(15px);
}
.tilt__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  margin: .5rem 0 .4rem;
  transform: translateZ(30px);
  letter-spacing: -.02em;
}
.tilt__body {
  color: var(--text-muted);
  font-size: .95rem;
  max-width: 36ch;
  transform: translateZ(20px);
}
.tilt__glint {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,.08) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .9s var(--ease-out);
  pointer-events: none;
}
.tilt:hover .tilt__glint { transform: translateX(120%); }

/* =======================================================================
   Dual-row testimonials marquee
   ===================================================================== */

.marquee {
  padding-block: 2rem;
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track {
  display: flex;
  gap: 1rem;
  width: max-content;
}
.marquee__track--left  { animation: marquee 60s linear infinite; }
.marquee__track--right { animation: marquee 70s linear infinite reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* =======================================================================
   Logo marquee strip (brands our members resell)
   ===================================================================== */
.logos {
  padding: 3rem 0 4rem;
  border-block: 1px solid var(--border);
  background:
    radial-gradient(60% 100% at 50% 0%, rgba(255,45,85,.06), transparent 70%),
    var(--bg);
}
.logos__label {
  display: block;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .35em;
  font-size: .72rem;
  color: var(--text-muted);
  margin-bottom: 1.75rem;
}
.logos .marquee { padding-block: .5rem; }
.logos__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  margin-right: clamp(2.5rem, 5vw, 4.5rem);
  opacity: .55;
  filter: grayscale(1) brightness(1.6) contrast(.85);
  transition: opacity .35s var(--ease-out), filter .35s var(--ease-out);
}
.logos__item:hover { opacity: 1; filter: grayscale(0) brightness(1) contrast(1); }
.logos__item img {
  max-height: 100%;
  width: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
@media (max-width: 720px) {
  .logos__item { height: 40px; margin-right: 2rem; }
}

.marquee__card {
  flex: 0 0 auto;
  padding: 1.25rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  font-size: .95rem;
  max-width: 440px;
  color: var(--text);
  white-space: normal;
}
.marquee__card strong { color: var(--brand-2); font-weight: 600; }

/* =======================================================================
   Infinite feed (member wins stream)
   ===================================================================== */

.feed { padding-block: clamp(3rem, 6vw, 5rem); }

/* ---- Auto-scrolling reel viewport ----------------------------------- */
.feed__viewport {
  position: relative;
  height: clamp(560px, 90vh, 1000px);
  overflow: hidden;
  /* Soft fade at top + bottom so cards drift into and out of view. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.feed__columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}
.feed__col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  animation: feedScroll 55s linear infinite;
  will-change: transform;
}
.feed__col--reverse { animation-direction: reverse; }
.feed__col--slow    { animation-duration: 80s; }

.feed__viewport:hover .feed__col,
.feed__viewport:focus-within .feed__col {
  animation-play-state: paused;
}

@keyframes feedScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -50%, 0); }
}

@media (max-width: 900px) {
  .feed__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feed__col:nth-child(3) { display: none; }
  .feed__viewport { height: clamp(520px, 85vh, 900px); }
}
@media (max-width: 600px) {
  .feed__columns { grid-template-columns: 1fr; }
  .feed__col:nth-child(2),
  .feed__col:nth-child(3) { display: none; }
  .feed__viewport { height: 75vh; }
  /* Mobile is a single column, so wins linger on screen for a long time at
     the desktop pace. Roughly double the scroll speed so the reel feels
     active and members see more cards per second. */
  .feed__col        { animation-duration: 26s; }
  .feed__col--slow  { animation-duration: 38s; }
}

@media (prefers-reduced-motion: reduce) {
  .feed__col { animation: none; }
}

.feed__card {
  display: inline-block;
  width: 100%;
  margin: 0 0 1rem;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  break-inside: avoid;
  transition: border-color var(--dur), transform var(--dur);
  transform: translateY(20px);
  opacity: 0;
  animation: feedIn .7s var(--ease-out) forwards;
}
.feed__card:hover { border-color: var(--border-hi); transform: translateY(-3px); }
.feed__card .who {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: .6rem;
  font-size: .85rem;
  color: var(--text-muted);
}
.feed__card .avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--grad-brand);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700; font-size: .75rem; color: #fff;
}
.feed__card .tag {
  margin-left: auto;
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brand-1);
}
.feed__card p { margin: 0; color: var(--text); font-size: .95rem; }

/* Live (Discord-backed) image-only cards */
.feed__card.feed__card--image {
  padding: 0;
  overflow: hidden;
}
.feed__card .avatar.avatar--img {
  padding: 0;
  overflow: hidden;
  background: var(--surface-2, #1a1a22);
}
.feed__card .avatar.avatar--img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.feed__card__image {
  display: block;
  background: #0a0a10;
  overflow: hidden;
  line-height: 0;
}
.feed__card__image img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .8s var(--ease-spring);
}
/* No hover transform — the image is no longer a link, so we don't want a
   pointer/scale affordance suggesting it's interactive. */

.feed__card__meta {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1rem;
  font-size: .85rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}
/* The username sits as a bare <span> (second child after the avatar pill).
   Blur it visually so even a curious viewer can't read it. The underlying
   text is already a lorem alias (see _scrub_win in app.py) — this is
   defense-in-depth on top of that. The tag (first child with .tag class)
   and avatar (.avatar) are explicitly NOT blurred so the card still reads
   as "Member · Sneakers" with chrome intact. */
.feed__card__meta > span:not(.avatar):not(.tag) {
  filter: blur(4.5px);
  -webkit-user-select: none;
          user-select: none;
  pointer-events: none;
  transform: translateZ(0);
  color: rgba(180, 188, 208, .85);
}
/* Avatar (the small circle next to the username) gets a matching blur so
   the censored-identity treatment reads consistently across the whole
   meta row. Covers both the colored-letter fallback AND any cached
   <img> variant. */
.feed__card .avatar {
  filter: blur(3.5px);
  -webkit-user-select: none;
          user-select: none;
  pointer-events: none;
}
.feed__card__meta .tag {
  margin-left: auto;
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brand-1);
}

.feed__sentinel--done::before { display: none; }
.feed__sentinel--done { padding: 2rem 1rem; }

.feed__sentinel {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .75rem;
  padding: 3rem 1rem;
  color: var(--text-muted);
  font-size: .85rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.feed__sentinel::before {
  content: "";
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--brand-1);
  border-top-color: transparent;
  animation: spin 1s linear infinite;
}

@keyframes feedIn {
  to { opacity: 1; transform: none; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* =======================================================================
   Outro — loop back to top
   ===================================================================== */

.outro {
  position: relative;
  min-height: 110vh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  padding: 6rem 1rem;
}
.outro__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(50% 50% at 50% 50%, rgba(255,45,85,.22), transparent 70%);
}
.outro__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 10vw, 8rem);
  letter-spacing: -.05em;
  line-height: .95;
  margin: 0 0 1.5rem;
}
.outro__hint {
  color: var(--text-muted);
  letter-spacing: .3em;
  text-transform: uppercase;
  font-size: .8rem;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
}
.outro__hint::before, .outro__hint::after {
  content: ""; width: 24px; height: 1px; background: var(--brand-1);
}
.outro__btn {
  margin-top: 2.5rem;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 1rem 1.5rem;
  border-radius: 999px;
  border: 1px solid var(--border-hi);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  transition: transform var(--dur) var(--ease-spring), background var(--dur);
}
.outro__btn:hover { transform: translateY(-2px); background: var(--surface-hi); }
.outro__btn svg { transition: transform .6s var(--ease-spring); }
.outro__btn:hover svg { transform: rotate(360deg); }

.outro__looper {
  position: absolute;
  inset: auto 0 0 0;
  height: 120px;
  overflow: hidden;
  display: flex;
  align-items: center;
  white-space: nowrap;
  opacity: .6;
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.outro__looper span {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4rem, 10vw, 9rem);
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,.18);
  padding-right: 1em;
  animation: marquee 36s linear infinite;
}

/* =======================================================================
   Section transition helper — dark fade between sections
   ===================================================================== */

.cine-hr {
  position: relative;
  height: 140px;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,.4), transparent);
}

/* Global tweak: make body marker available to targeting */
body[data-page="index"] .aurora__blob { opacity: .4; }

/* Cursor label (shown near ring when hovering [data-cursor]) */
.cursor__label {
  position: absolute;
  top: 0; left: 0;
  transform: translate(24px, 22px);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff;
  background: var(--brand-1);
  padding: .28rem .55rem;
  border-radius: 6px;
  opacity: 0;
  white-space: nowrap;
  transition: opacity var(--dur);
  pointer-events: none;
}
.cursor.has-label .cursor__label { opacity: 1; }


/* =======================================================================
   ACO — Auto-checkout drop announcements (sixth toolkit card)
   A scrollable Discord-style feed of CHIEF announcements pointing members
   at the ACO sign-up form. The form URL is intentionally blurred so the
   marketing preview never exposes the real submission endpoint.
   ===================================================================== */

.dx--aco .dx__chat--aco {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.dx--aco .dx__chat-header { flex: none; }

.dx-aco__feed {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: .25rem .25rem .5rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  font-size: .82rem;
  line-height: 1.45;
}

.dx-aco__date {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: .35rem 0 .1rem;
  color: rgba(180, 188, 208, .55);
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: none;
}
.dx-aco__date-line {
  flex: 1 1 auto;
  height: 1px;
  background: rgba(255, 255, 255, .06);
}
.dx-aco__date-text { flex: none; }

.dx-aco__msg { gap: .65rem; }
.dx-aco__avatar {
  width: 1.85rem; height: 1.85rem;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #1a1c22, #0a0b0f 70%);
  color: #ffd24f;
  font-size: .8rem;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}

.dx-aco__title-row {
  display: flex; align-items: center; gap: .5rem;
  margin-top: .15rem;
  font-weight: 600;
  color: rgba(220, 226, 240, .94);
}
.dx-aco__bar {
  width: 3px; align-self: stretch;
  background: rgba(120, 130, 150, .4);
  border-radius: 2px;
  flex: none;
}
.dx-aco__title { flex: 0 1 auto; }
.dx-aco__mention {
  color: #c084fc;
  background: rgba(192, 132, 252, .12);
  padding: 1px 7px;
  border-radius: 4px;
  font-size: .76rem;
  font-weight: 500;
}

.dx-aco__info-row,
.dx-aco__form-row {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  font-size: .78rem;
  color: rgba(180, 188, 208, .85);
  margin-top: .2rem;
}
.dx-aco__info-label,
.dx-aco__form-label {
  font-weight: 600;
  color: rgba(180, 188, 208, .9);
}

.dx-aco__chan-pill {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: 1px 7px;
  background: rgba(88, 101, 242, .18);
  border-radius: 4px;
  color: #a8b3ff;
  font-weight: 500;
}
.dx-aco__chan-pill-hash { opacity: .6; }
.dx-aco__chan-pill .dx__dot { transform: scale(.85); }

/* Blurred form URL — looks like a real Discord blue link, but the actual
   string is unreadable so visitors can't navigate to our real ACO endpoint
   from this marketing snapshot. We disable selection + pointer-events so
   it's also not trivially recoverable by drag-select. */
.dx__link--blurred {
  display: inline-block;
  color: #5a9bff;
  text-decoration: underline;
  filter: blur(4.5px);
  -webkit-user-select: none;
          user-select: none;
  pointer-events: none;
  transform: translateZ(0);
  max-width: 28ch;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
}

.dx-aco__bullets {
  list-style: disc;
  margin: .35rem 0 .1rem 1.1rem;
  padding: 0;
  color: rgba(210, 218, 232, .9);
  font-size: .78rem;
}
.dx-aco__bullets li { margin: .15rem 0; }

.dx-aco__line {
  margin: .15rem 0;
  font-size: .82rem;
  color: rgba(210, 218, 232, .92);
}


/* =======================================================================
   24/7 Support — Discord channel snapshots (seventh toolkit card)
   Three slide types: tutoring (long pinned post), qa (forum), ticket (bot)
   ===================================================================== */

/* Hide the ::before "#" for sidebar items that have a coloured dot, so we
   don't get "# ●  channel-name" doubled up. Items without a dot keep the
   automatic hash prefix already provided by the base .dx__channels rule. */
.dx--support .dx__channels li.has-dot::before { content: none; }

/* Make the chat column scroll inside the card frame for tall content. */
.dx--support .dx__chat--support {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.dx--support .dx__chat-header { flex: none; }
.dx--support .dx__chat-header-icon {
  font-size: .82rem;
  margin-right: .15rem;
  filter: hue-rotate(-10deg) saturate(.9);
}

/* ---- 1. 1-on-1 Tutoring long pinned post -------------------------------- */
.dx-support-post {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: .35rem .15rem .25rem 0;
  color: #dbdee1;
  font-size: .72rem;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  position: relative;
}
.dx-support-post::after {
  /* fade the bottom of the post so the card edge isn't a hard cut */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 36px;
  background: linear-gradient(180deg, transparent, rgba(15, 12, 14, .9));
  pointer-events: none;
}
.dx-support-post__title {
  margin: 0;
  font-size: .98rem;
  font-weight: 700;
  color: #00a8fc;
  letter-spacing: -.005em;
}
.dx-support-post__title-emoji {
  display: inline-block;
  filter: saturate(1.05);
  margin-left: 2px;
}
.dx-support-post__intro,
.dx-support-post__p {
  margin: 0;
  color: #dbdee1;
  font-size: .72rem;
  line-height: 1.55;
}
.dx-support-post__h {
  margin: .25rem 0 -.05rem;
  font-size: .76rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: .35rem;
  letter-spacing: 0;
}
.dx-support-post__h-icon {
  font-size: .85rem;
  filter: saturate(1.05);
}
.dx-support-post__h--plain { font-size: .72rem; font-weight: 700; }
.dx-support-post__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.dx-support-post__list li {
  display: block;
  margin: 0;
  padding: 0;
}
.dx-support-post__inline-code {
  display: inline-block;
  background: rgba(255, 255, 255, .06);
  border-radius: 3px;
  padding: 0 4px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: .68rem;
  color: #e8e9eb;
  line-height: 1.5;
  border: 1px solid rgba(255, 255, 255, .04);
}
.dx-support-post__inline-code--solo {
  align-self: flex-start;
  margin-top: -.1rem;
}
.dx-support-post__ol {
  margin: 0;
  padding-left: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 1px;
  color: #dbdee1;
}
.dx-support-post__ol li { font-size: .72rem; line-height: 1.55; }
.dx-support-post__link {
  color: #00a8fc;
  text-decoration: underline;
  cursor: pointer;
}

/* ---- 2. Q&A forum channel ----------------------------------------------- */
.dx-qa {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: .25rem 0 .15rem;
  position: relative;
  overflow: hidden;
}
.dx-qa::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 40px;
  background: linear-gradient(180deg, transparent, rgba(15, 12, 14, .92));
  pointer-events: none;
}
.dx-qa__searchbar {
  display: flex;
  align-items: center;
  gap: .45rem;
}
.dx-qa__search {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: .35rem;
  background: #1e1f22;
  border: 1px solid rgba(255, 255, 255, .04);
  border-radius: 6px;
  padding: .35rem .55rem;
  color: #6d6f78;
  font-size: .68rem;
  min-width: 0;
}
.dx-qa__search-icon { font-size: .7rem; opacity: .85; }
.dx-qa__search-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-qa__newpost {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: #5865f2;
  color: #fff;
  border-radius: 6px;
  padding: .35rem .55rem;
  font-size: .68rem;
  font-weight: 600;
  flex: none;
}
.dx-qa__newpost-icon { font-weight: 700; }
.dx-qa__filters {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  padding-bottom: .15rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.dx-qa__filter {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 999px;
  padding: .15rem .45rem;
  font-size: .62rem;
  color: #b5b7bc;
  white-space: nowrap;
}
.dx-qa__filter.is-active {
  background: rgba(0, 168, 252, .12);
  border-color: rgba(0, 168, 252, .3);
  color: #fff;
}
.dx-qa__filter-icon { font-size: .65rem; opacity: .85; }
.dx-qa__posts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  overflow: hidden;
}
.dx-qa__post {
  background: #2b2d31;
  border: 1px solid rgba(255, 255, 255, .04);
  border-radius: 8px;
  padding: .5rem .65rem .55rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  position: relative;
}
.dx-qa__tags {
  display: flex;
  gap: .25rem;
  margin-bottom: .1rem;
}
.dx-qa__tag {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  border-radius: 999px;
  padding: .08rem .4rem;
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.dx-qa__tag--red    { background: rgba(242, 63, 67, .15); color: #f23f43; }
.dx-qa__tag--yellow { background: rgba(240, 178, 50, .15); color: #f0b232; }
.dx-qa__tag-icon { font-size: .65rem; }
.dx-qa__post-title {
  margin: 0;
  font-size: .78rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.005em;
  /* Q&A surfaces real member questions / setups / live tactics — none of
     which we want to leak in a public marketing snapshot. The underlying
     text is already lorem ipsum (see SITE["support_channels"][1]["posts"]),
     and we layer a visual blur on top so the panel still reads as an
     active forum without exposing readable content. */
  filter: blur(4.5px);
  -webkit-user-select: none;
          user-select: none;
  pointer-events: none;
  transform: translateZ(0);
}
.dx-qa__snippet {
  margin: 0;
  font-size: .68rem;
  line-height: 1.45;
  color: #b5b7bc;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  filter: blur(4px);
  -webkit-user-select: none;
          user-select: none;
  pointer-events: none;
  transform: translateZ(0);
}
.dx-qa__author { color: #00a8fc; font-weight: 600; }
.dx-qa__meta {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-top: .15rem;
  color: #80848e;
  font-size: .62rem;
}
.dx-qa__replies {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
}
.dx-qa__replies-icon { font-size: .7rem; opacity: .85; }

/* ---- 3. Create-ticket support bot welcome ------------------------------- */
.dx-ticket {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: .35rem 0 .25rem;
  overflow: hidden;
  position: relative;
}
.dx-ticket::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 36px;
  background: linear-gradient(180deg, transparent, rgba(15, 12, 14, .92));
  pointer-events: none;
}
.dx-ticket__welcome {
  padding: .8rem .15rem .55rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.dx-ticket__welcome-hash {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  color: #d4d6dc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: .15rem;
}
.dx-ticket__welcome-title {
  margin: 0;
  color: #fff;
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: -.01em;
}
.dx-ticket__welcome-blurb {
  margin: 0;
  font-size: .68rem;
  color: #b5b7bc;
}
.dx-ticket__edit {
  margin-top: .2rem;
  background: #2b2d31;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 4px;
  color: #e8e9eb;
  font-size: .65rem;
  padding: .25rem .55rem;
  font-weight: 600;
  cursor: default;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}
.dx-ticket__msg {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  padding: 0 .15rem;
}
.dx-ticket__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1f1f24, #0d0d12);
  border: 1px solid rgba(255, 255, 255, .08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.dx-ticket__avatar-glyph {
  font-size: .85rem;
  filter: drop-shadow(0 0 4px rgba(255, 45, 85, .35));
}
.dx-ticket__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.dx-ticket__author {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  flex-wrap: wrap;
}
.dx-ticket__bot-name {
  color: #ff2d55;
  font-weight: 700;
}
.dx-ticket__verified {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  background: #5865f2;
  color: #fff;
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 1px 4px 1px 3px;
  border-radius: 3px;
}
.dx-ticket__verified-check {
  background: #fff;
  color: #5865f2;
  border-radius: 50%;
  width: 9px;
  height: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .55rem;
  font-weight: 800;
  line-height: 1;
}
.dx-ticket__time {
  color: #80848e;
  font-size: .62rem;
}
.dx-ticket__embed {
  margin-top: .15rem;
  border-left: 3px solid #ff2d55;
  background: #2b2d31;
  border-radius: 0 6px 6px 0;
  padding: .55rem .7rem .55rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  max-width: 480px;
}
.dx-ticket__embed-intro {
  margin: 0;
  color: #fff;
  font-size: .76rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: .25rem;
}
.dx-ticket__embed-emoji {
  display: inline-flex;
  align-items: center;
  font-size: .85rem;
}
.dx-ticket__embed-body {
  margin: 0;
  color: #dbdee1;
  font-size: .7rem;
  line-height: 1.45;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem;
}
.dx-ticket__banner {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  height: 110px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 45, 85, .15), transparent 65%),
    linear-gradient(180deg, #050507, #0a0d18 60%, #050507);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .04);
}
.dx-ticket__banner-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
  opacity: .9;
}
.dx-ticket__banner-spark {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 2px rgba(255, 255, 255, .55);
  opacity: .55;
}
.dx-ticket__banner-spark:nth-child(1) { top: 18%; left: 22%; }
.dx-ticket__banner-spark:nth-child(2) { top: 72%; left: 18%; }
.dx-ticket__banner-spark:nth-child(3) { top: 28%; left: 78%; }
.dx-ticket__banner-spark:nth-child(4) { top: 82%; left: 70%; }
.dx-ticket__banner-text {
  position: relative;
  font-size: 1.85rem;
  font-weight: 900;
  letter-spacing: .12em;
  color: #fff;
  text-shadow:
    0 2px 12px rgba(0, 0, 0, .85),
    0 0 24px rgba(255, 255, 255, .15);
}
.dx-ticket__footer {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-top: .1rem;
}
.dx-ticket__footer-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .55rem;
}
.dx-ticket__footer-avatar > span { font-size: .55rem; line-height: 1; }
.dx-ticket__footer-text {
  color: #b5b7bc;
  font-size: .62rem;
  font-weight: 600;
}
.dx-ticket__buttons {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
  margin-top: .35rem;
}
.dx-ticket__btn {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  border-radius: 4px;
  padding: .35rem .65rem;
  font-size: .68rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: default;
  letter-spacing: 0;
  font-family: inherit;
}
.dx-ticket__btn--green {
  background: #2da34a;
  color: #fff;
}
.dx-ticket__btn--red {
  background: #d83c3e;
  color: #fff;
}
.dx-ticket__btn--blue {
  background: #5865f2;
  color: #fff;
}
.dx-ticket__btn-icon { font-size: .8rem; }
.dx-ticket__edited {
  color: #80848e;
  font-size: .58rem;
  margin-top: .15rem;
}

@media (max-width: 720px) {
  .dx-support-post { font-size: .68rem; }
  .dx-support-post__title { font-size: .9rem; }
  .dx-qa__post-title { font-size: .72rem; }
  .dx-ticket__embed { padding: .45rem .55rem; }
  .dx-ticket__banner { height: 90px; }
  .dx-ticket__banner-text { font-size: 1.5rem; }
}

/* =======================================================================
   Light-theme overrides for cards that keep a dark gradient background
   regardless of theme. The toolkit (.stack__card) and market panels
   (.hscroll__panel) intentionally stay dark on light mode — the Discord
   mockups, deep red gradients and emoji art all read better on dark — so
   the text inside MUST be forced back to light, otherwise it inherits
   `--text` (now near-black on light) and disappears into the card bg.
   ===================================================================== */
:root[data-theme="light"] .stack__card,
:root[data-theme="light"] .stack__card h3 {
  color: #f5f5f7;
}
:root[data-theme="light"] .stack__card p {
  color: rgba(255, 255, 255, .72);
}

:root[data-theme="light"] .hscroll__panel,
:root[data-theme="light"] .hscroll__panel h3 {
  color: #f5f5f7;
}
:root[data-theme="light"] .hscroll__panel p {
  color: rgba(255, 255, 255, .72);
}
:root[data-theme="light"] .hscroll__panel__num {
  color: rgba(255, 255, 255, .55);
}
:root[data-theme="light"] .hscroll__panel ul li {
  color: #f5f5f7;
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .04);
}

/* The trailing "More verticals on the way" panel uses a soft pill-style
   number badge — reset it for the dark-card light-theme context too. */
:root[data-theme="light"] .hscroll__panel--soon .hscroll__panel__num {
  background: rgba(255, 45, 85, .18);
  border-color: rgba(255, 45, 85, .35);
  color: #ffffff;
}

/* The toolkit nav buttons (left intro column) stay on the page bg, NOT
   inside the dark card — leave those using the page `--text` so they
   remain dark on light mode. We only override the in-card text above. */