/* ═══════════════════════════════════════════════════════
   Tkzzt Services — theme overrides
   Reines Schwarz + Rot (#FF1F3D). Keine Blautöne.
   Aufbau und Regeln: siehe DESIGN.md
   ═══════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════
   OVERRIDE THEME PATTERNS → RED
   These ship as white; we force them to accent.
   ══════════════════════════════════════════ */

[data-scheme="dark"] .pfx-pattern-grid {
  background-image: linear-gradient(rgba(var(--cl-accent), 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--cl-accent), 0.045) 1px, transparent 1px) !important;
}

[data-scheme="dark"] .pfx-pattern-dots {
  background-image: radial-gradient(rgba(var(--cl-accent), 0.06) 1px, transparent 1.5px) !important;
}

[data-scheme="dark"] .hero-bg-grid {
  background-image: linear-gradient(rgba(var(--cl-accent), 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--cl-accent), 0.06) 1px, transparent 1px) !important;
}

/* Section-level sfx patterns also red */
[data-scheme="dark"] .sfx .pfx-pattern-grid {
  background-image: linear-gradient(rgba(var(--cl-accent), 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--cl-accent), 0.04) 1px, transparent 1px) !important;
}

[data-scheme="dark"] .sfx .pfx-pattern-dots {
  background-image: radial-gradient(rgba(var(--cl-accent), 0.05) 1px, transparent 1.5px) !important;
}

/* ── Selection ───────────────────────────── */
::selection {
  background: rgba(var(--cl-accent), 0.35);
  color: #fff;
}

/* ── Scroll progress bar ─────────────────── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: rgb(var(--cl-accent));
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(var(--cl-accent), 0.16), 0 0 4px rgba(var(--cl-accent), 0.16);
}

/* ── Dark scrollbar ──────────────────────── */
[data-scheme="dark"] {
  scrollbar-color: rgba(var(--cl-accent), 0.28) transparent;
  scrollbar-width: thin;
}

[data-scheme="dark"] ::-webkit-scrollbar { width: 5px; }
[data-scheme="dark"] ::-webkit-scrollbar-track { background: transparent; }
[data-scheme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(var(--cl-accent), 0.28);
  border-radius: 3px;
}
[data-scheme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--cl-accent), 0.45);
}

/* ══════════════════════════════════════════
   TYPOGRAPHY
   ══════════════════════════════════════════ */

.sa-hero-title {
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.sa-section-eyebrow,
.sa-hero-eyebrow span:last-child {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

/* ══════════════════════════════════════════
   NAVBAR
   ══════════════════════════════════════════ */

.sa-header {
  transition: background-color 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

[data-scheme="dark"] .sa-header {
  border-bottom: 1px solid rgba(var(--cl-accent), 0.08);
}

[data-scheme="dark"] .sa-header.is-scrolled {
  background: rgba(0, 0, 0, 0.9) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom-color: rgba(var(--cl-accent), 0.15);
  box-shadow: 0 1px 0 rgba(var(--cl-accent), 0.1),
    0 4px 24px rgba(0, 0, 0, 0.6);
}

/* ── Floating pill navbar ──
   The header bar itself must stay transparent, otherwise the full-width
   background fills the gap around the pill and it stops looking detached. */
[data-scheme="dark"] .sa-header:has(.sa-navbar-pill) {
  border-bottom: none;
}

[data-scheme="dark"] .sa-header:has(.sa-navbar-pill).is-scrolled {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

/* Same border/glow language as the cards — see DESIGN.md §1 */
[data-scheme="dark"] .sa-navbar-pill {
  background: rgba(8, 5, 5, 0.82) !important;
  border-color: rgba(var(--cl-accent), 0.12) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  transition: border-color 0.3s ease,
    box-shadow 0.3s ease,
    background-color 0.3s ease;
}

[data-scheme="dark"] .is-scrolled .sa-navbar-pill {
  background: rgba(6, 4, 4, 0.92) !important;
  border-color: rgba(var(--cl-accent), 0.55) !important;
  box-shadow: 0 8px 32px -12px rgba(0, 0, 0, 0.9),
    0 0 28px -10px rgba(var(--cl-accent), 0.16);
}

@media (min-width: 1024px) {
  .sa-navbar-link { position: relative; }

  .sa-navbar-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: rgb(var(--cl-accent));
    border-radius: 1px;
    transition: width 0.3s ease, left 0.3s ease;
    box-shadow: 0 0 8px rgba(var(--cl-accent), 0.16);
  }

  .sa-navbar-link:hover::after {
    width: 100%;
    left: 0;
  }
}

/* ══════════════════════════════════════════
   SECTION DEPTH — dividers & backgrounds
   ══════════════════════════════════════════ */

/* Red gradient divider between homepage sections */
[data-scheme="dark"] .sa-tpl-shop .component + .component {
  position: relative;
}

[data-scheme="dark"] .sa-tpl-shop .component + .component::before {
  content: '';
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--cl-accent), 0.1) 25%,
    rgba(var(--cl-accent), 0.1) 50%,
    rgba(var(--cl-accent), 0.1) 75%,
    transparent 100%
  );
  z-index: 2;
  pointer-events: none;
}

/* Uniform section background — no per-section tints */

/* ══════════════════════════════════════════
   CARDS — permanent red accent borders
   ══════════════════════════════════════════ */

[data-scheme="dark"] .sa-features--icon-grid .sa-features-item,
[data-scheme="dark"] .sa-product-card,
[data-scheme="dark"] .sa-stats--cards .sa-stats-item,
[data-scheme="dark"] .sa-feedback-card {
  border-color: rgba(var(--cl-accent), 0.28) !important;
  transition: border-color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.35s ease,
    background-color 0.35s ease;
}

[data-scheme="dark"] .sa-faq-item {
  border-color: rgba(var(--cl-accent), 0.28) !important;
  transition: border-color 0.35s ease,
    box-shadow 0.35s ease,
    background-color 0.35s ease;
}

/* ══════════════════════════════════════════
   FEATURE CARDS
   ══════════════════════════════════════════ */

/* icon-grid variant */
[data-scheme="dark"] .sa-features--icon-grid .sa-features-item:hover {
  border-color: rgba(var(--cl-accent), 0.55) !important;
  box-shadow: 0 0 0 1px rgba(var(--cl-accent), 0.12),
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(var(--cl-accent), 0.1);
  transform: translateY(-6px);
}

/* split-highlights variant */
.sa-features--split-highlights .sa-features-item {
  padding: 0.75rem;
  border-radius: var(--radius-input);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.sa-features--split-highlights .sa-features-item:hover {
  background: rgba(var(--cl-accent), 0.07);
  transform: translateX(6px);
}

/* split-highlights container card red border */
[data-scheme="dark"] .sa-features--split-highlights .rounded-card {
  border-color: rgba(var(--cl-accent), 0.12) !important;
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

[data-scheme="dark"] .sa-features--split-highlights .rounded-card:hover {
  border-color: rgba(var(--cl-accent), 0.55) !important;
  box-shadow: 0 0 40px rgba(var(--cl-accent), 0.08),
    0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Icon glow */
.sa-features-item span[class*="bg-accent"] {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.sa-features-item:hover span[class*="bg-accent"] {
  transform: scale(1.18) rotate(-5deg);
  box-shadow: 0 0 24px rgba(var(--cl-accent), 0.16);
}

/* ══════════════════════════════════════════
   PRODUCT CARDS
   ══════════════════════════════════════════ */

[data-scheme="dark"] .sa-product-card:hover {
  border-color: rgba(var(--cl-accent), 0.55) !important;
  box-shadow: 0 0 0 1px rgba(var(--cl-accent), 0.12),
    0 12px 40px rgba(0, 0, 0, 0.6),
    0 0 30px rgba(var(--cl-accent), 0.1);
  transform: translateY(-6px);
}

.sa-product-card img {
  transition: transform 0.5s ease;
}

.sa-product-card:hover img {
  transform: scale(1.06);
}

[data-scheme="dark"] .sa-product-card .text-accent-500 {
  text-shadow: 0 0 12px rgba(var(--cl-accent), 0.16);
}

/* ══════════════════════════════════════════
   PRODUCT CARD — six-zone layout (DESIGN.md §5)
   ══════════════════════════════════════════ */

[data-scheme="dark"] .sa-pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  border-color: rgba(var(--cl-accent), 0.28) !important;
  transition: border-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

[data-scheme="dark"] .sa-pcard:hover {
  border-color: rgba(var(--cl-accent), 0.55) !important;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.7),
    0 0 24px -6px rgba(var(--cl-accent), 0.16);
}

.sa-pcard-media {
  background-color: rgb(var(--cl-background));
  overflow: hidden;
}

/* Fade under the cover so bright art never fights the title below */
.sa-pcard-shade {
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 100%);
}

[data-scheme="dark"] .sa-pcard-body {
  background-color: rgb(var(--cl-surface-raised));
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Footer pinned to the bottom so mixed-length titles stay aligned in a row */
.sa-pcard-footer {
  margin-top: auto;
  padding-top: 1rem;
}

.sa-pcard-chips {
  gap: 0.375rem;
}

[data-scheme="dark"] .sa-pcard-chips > span {
  background-color: rgba(var(--cl-t-primary), 0.04) !important;
  border-color: rgba(var(--cl-accent), 0.16) !important;
  color: rgb(var(--cl-t-muted)) !important;
}

/* price_format "from" appends a "+"; the "Starting at" label already says it */
.sa-pcard-price .opacity-60 {
  display: none;
}

.sa-pcard-cta {
  transition: background-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.sa-pcard:hover .sa-pcard-cta {
  box-shadow: 0 0 22px -4px rgba(var(--cl-accent), 0.16);
  transform: translateY(-1px);
}

/* Accent rail that fills in on hover — shared with the game cards */
[data-scheme="dark"] .sa-pcard::after,
[data-scheme="dark"] .sa-pcat-card::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, rgb(var(--cl-accent)) 0%, rgba(var(--cl-accent), 0.1) 100%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-scheme="dark"] .sa-pcard:hover::after,
[data-scheme="dark"] .sa-pcat-card:hover::after {
  transform: scaleX(1);
}

/* ══════════════════════════════════════════
   PRODUCTS PAGE — large game cards
   ══════════════════════════════════════════ */

[data-scheme="dark"] .sa-pcat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-color: rgba(var(--cl-accent), 0.28) !important;
  transition: border-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

[data-scheme="dark"] .sa-pcat-card:hover {
  border-color: rgba(var(--cl-accent), 0.55) !important;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.7),
    0 0 24px -6px rgba(var(--cl-accent), 0.16);
}

/* Category art is 16:9 key art, product photos are square. The two grids used
   to share --product-card-image-aspect-ratio; now that the product ratio is
   1/1 so the square photos stop being cropped, the game cards need their own. */
.sa-pcat-media,
.sa-pcat-media .sa-pcat-img,
.sa-pcat-placeholder {
  aspect-ratio: 16 / 9;
}

.sa-pcat-media {
  background-color: rgb(var(--cl-background));
}

/* Aspect comes from .aspect-product-card-image in the markup, same as the
   product cards, so the two grids stay in step if the setting changes. */
.sa-pcat-placeholder {
  width: 100%;
  display: flex;
}

@media (min-width: 1024px) {
  .sa-pcat-section {
    margin-bottom: 3.5rem;
  }
}

/* superseded by the black-card block at the end of this file */

/* Bottom fade so cover art never fights the title */
.sa-pcat-shade {
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, transparent 100%);
}

[data-scheme="dark"] .sa-pcat-body {
  background-color: rgb(var(--cl-surface-raised));
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Footer pinned to the bottom so buttons line up across a row of cards */
.sa-pcat-footer {
  margin-top: auto;
  padding-top: 1rem;
}

.sa-pcat-cta {
  transition: background-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.sa-pcat-card:hover .sa-pcat-cta {
  box-shadow: 0 0 22px -4px rgba(var(--cl-accent), 0.16);
  transform: translateY(-1px);
}

/* ══════════════════════════════════════════
   CATEGORY CARDS — 6-column grid
   ══════════════════════════════════════════ */

@media (min-width: 768px) {
  .sa-categories-items {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1024px) {
  .sa-categories-items {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1280px) {
  .sa-categories-items {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}

[data-scheme="dark"] .sa-categories .rounded-card {
  border-color: rgba(var(--cl-accent), 0.28) !important;
  transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}

[data-scheme="dark"] .sa-categories .rounded-card:hover {
  border-color: rgba(var(--cl-accent), 0.55) !important;
  box-shadow: 0 0 24px rgba(var(--cl-accent), 0.08),
    0 8px 32px rgba(0, 0, 0, 0.5);
  transform: translateY(-4px);
}

.sa-categories .rounded-card img {
  transition: transform 0.5s ease;
}

.sa-categories .rounded-card:hover img {
  transform: scale(1.05);
}

/* ══════════════════════════════════════════
   STATS
   ══════════════════════════════════════════ */

/* The gradient introduced a second red (#ff6b7a) — the style guide allows
   exactly one accent. The figure carries itself; the count-up gives it life. */
[data-scheme="dark"] .sa-stats .text-h2 {
  color: rgb(var(--cl-t-primary));
  font-variant-numeric: tabular-nums;
}

[data-scheme="dark"] .sa-stats--cards .sa-stats-item {
  border-color: rgba(var(--cl-accent), 0.28) !important;
}

[data-scheme="dark"] .sa-stats--cards .sa-stats-item:hover {
  border-color: rgba(var(--cl-accent), 0.55) !important;
  transform: translateY(-4px);
  box-shadow: 0 0 24px rgba(var(--cl-accent), 0.1),
    0 8px 32px rgba(0, 0, 0, 0.5);
}

/* ══════════════════════════════════════════
   STEPS
   ══════════════════════════════════════════ */

[data-scheme="dark"] .sa-steps .tabular-nums {
  color: rgb(var(--cl-accent));
  text-shadow: 0 0 20px rgba(var(--cl-accent), 0.16);
}

.sa-steps--grid .sa-steps-icon {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.sa-steps--grid .sa-steps-item:hover .sa-steps-icon {
  transform: scale(1.15);
  box-shadow: 0 0 20px rgba(var(--cl-accent), 0.16);
}

.sa-steps--grid .sa-steps-item:hover .tabular-nums {
  text-shadow: 0 0 28px rgba(var(--cl-accent), 0.16);
}

/* ══════════════════════════════════════════
   FAQ
   ══════════════════════════════════════════ */

/* Resting rail is a hairline; red marks only the open question.
   Five red bars stacked read as a pattern, not as a marker. */
[data-scheme="dark"] .sa-faq-item {
  border-left: 2px solid rgba(var(--cl-accent), 0.32) !important;
}

[data-scheme="dark"] .sa-faq-item:hover {
  border-color: rgba(var(--cl-accent), 0.4) !important;
  border-left-color: rgba(var(--cl-accent), 0.18) !important;
  background: rgba(var(--cl-accent), 0.02);
}

[data-scheme="dark"] .sa-faq-item:has(.faq-panel-open) {
  border-color: rgba(var(--cl-accent), 0.55) !important;
  border-left-color: rgb(var(--cl-accent)) !important;
  box-shadow: -4px 0 16px rgba(var(--cl-accent), 0.08),
    0 0 24px rgba(var(--cl-accent), 0.04);
  background: rgba(var(--cl-accent), 0.03);
}

/* ══════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════ */

[data-scheme="dark"] .sa-btn--solid {
  transition: box-shadow 0.3s ease, transform 0.15s ease;
  box-shadow: 0 0 16px rgba(var(--cl-accent), 0.16);
}

[data-scheme="dark"] .sa-btn--solid:hover {
  box-shadow: 0 0 28px rgba(var(--cl-accent), 0.16),
    0 0 60px rgba(var(--cl-accent), 0.12);
}

[data-scheme="dark"] .sa-btn--solid:active {
  transform: scale(0.97);
  box-shadow: 0 0 16px rgba(var(--cl-accent), 0.16);
}

[data-scheme="dark"] .sa-btn--outline {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

[data-scheme="dark"] .sa-btn--outline:hover {
  border-color: rgba(var(--cl-accent), 0.55) !important;
  box-shadow: 0 0 16px rgba(var(--cl-accent), 0.12);
}

/* ══════════════════════════════════════════
   FEEDBACKS
   ══════════════════════════════════════════ */

.sa-feedback-card {
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.sa-feedback-card:hover {
  transform: translateY(-4px);
}

[data-scheme="dark"] .sa-feedback-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(var(--cl-accent), 0.06);
  border-color: rgba(var(--cl-accent), 0.55) !important;
}

[data-scheme="dark"] .sa-feedback-card .text-accent-500 {
  filter: drop-shadow(0 0 4px rgba(var(--cl-accent), 0.16));
}

/* ══════════════════════════════════════════
   HERO
   ══════════════════════════════════════════ */

[data-scheme="dark"] .sa-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--cl-accent), 0.1),
    transparent
  );
  pointer-events: none;
  z-index: 1;
}

.sa-hero-eyebrow .rounded-badge {
  animation: badgePulse 2.5s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--cl-accent), 0.16); }
  50% { box-shadow: 0 0 0 7px rgba(var(--cl-accent), 0); }
}

.sa-hero .hero-bg-glow,
.sa-hero .hero-bg-grid {
  will-change: transform;
}

[data-scheme="dark"] .hero-bg-glow {
  opacity: 0.95;
  filter: saturate(1.4);
}

[data-scheme="dark"] .sa-hero .sa-btn--solid {
  box-shadow: 0 0 24px rgba(var(--cl-accent), 0.16),
    0 0 60px rgba(var(--cl-accent), 0.1);
}

[data-scheme="dark"] .sa-hero .sa-btn--solid:hover {
  box-shadow: 0 0 36px rgba(var(--cl-accent), 0.16),
    0 0 80px rgba(var(--cl-accent), 0.15);
}

/* ══════════════════════════════════════════
   PAGE GLOW & ATMOSPHERE
   ══════════════════════════════════════════ */

[data-scheme="dark"] .pfx-glows {
  animation: glowBreathe 10s ease-in-out infinite alternate;
  filter: saturate(1.3);
}

@keyframes glowBreathe {
  from { opacity: 0.65; }
  to { opacity: 1; }
}

/* ══════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════ */

/* Uebernommen aus sections/tkz-footer.liquid des alten Themes: die Linie
   blendet zu den Raendern aus und leuchtet in der Mitte rot auf, dahinter ein
   weicher Schein aus der Markenfarbe, damit der Fuss nicht abgeschnitten
   wirkt. Die Spaltenkoepfe tragen einen kurzen roten Strich, sonst lesen sich
   vier gleich grosse Woerter wie vier gleich laute. */
.sa-footer {
  position: relative;
  isolation: isolate;
}

.sa-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.14) 22%,
    rgba(var(--cl-accent), 0.45) 50%,
    rgba(255, 255, 255, 0.14) 78%,
    transparent 100%
  );
}

/* hinter dem Inhalt, sonst legt er sich ueber die Links */
.sa-footer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  width: min(900px, 90%);
  height: 220px;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(
    60% 100% at 50% 0%,
    rgba(var(--cl-accent), 0.115) 0%,
    rgba(0, 0, 0, 0) 70%
  );
}

.sa-footer-coltitle {
  display: inline-block;
  min-width: 26px;
  padding-top: 12px;
  border-top: 2px solid rgb(var(--cl-accent));
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

[data-scheme="dark"] .sa-footer a:not(.sa-btn):hover {
  color: rgb(var(--cl-accent));
  transition: color 0.25s ease;
}

/* ══════════════════════════════════════════
   ACCENT-TINT SECTION
   ══════════════════════════════════════════ */

[data-scheme="dark"] .sa-text-block--accent-tint > .wrap > div {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(var(--cl-accent), 0.15) !important;
}

/* ══════════════════════════════════════════
   ANNOUNCEMENT BAR
   ══════════════════════════════════════════ */

[data-scheme="dark"] [class*="bar-accent"] {
  animation: announcePulse 3s ease-in-out infinite alternate;
}

@keyframes announcePulse {
  from { text-shadow: 0 0 12px rgba(var(--cl-accent), 0.15); }
  to { text-shadow: 0 0 24px rgba(var(--cl-accent), 0.16); }
}

/* ══════════════════════════════════════════
   FAQ SUPPORT CARD — prominent CTA
   ══════════════════════════════════════════ */

/* Same card recipe as the trust grid — source: fb__card in
   D:\Tkzzt\sections\tkz-feature-bento.liquid. 74% so the ambient light
   reads through; hairline white at rest, red edge only on hover.
   No red fill: red is edge and mark, never surface (DESIGN.md §13). */
[data-scheme="dark"] .sa-faq-support-card {
  position: relative;
  z-index: 1;
  margin-top: 2.5rem;
  padding: 2rem 2.5rem;
  border-color: rgba(var(--cl-accent), 0.28) !important;
  background-color: #000000 !important;
  background-image: none;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.58),
    0 0 12px rgba(var(--cl-accent), 0.1);
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  transition: border-color 260ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

[data-scheme="dark"] .sa-faq-support-card:hover {
  border-color: rgba(var(--cl-accent), 0.55) !important;
  transform: translateY(-3px);
}

[data-scheme="dark"] .sa-faq-support-card > div {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

[data-scheme="dark"] .sa-faq-support-card .sa-faq-support-card-title {
  font-size: 1.25rem;
}

[data-scheme="dark"] .sa-faq-support-card span[class*="bg-accent"] {
  width: 3rem;
  height: 3rem;
  font-size: 1.25rem;
}

[data-scheme="dark"] .sa-faq-support-card .sa-faq-support-card-link {
  padding: 0.75rem 2rem;
  font-size: 0.9375rem;
  box-shadow: 0 0 20px rgba(var(--cl-accent), 0.16);
}

[data-scheme="dark"] .sa-faq-support-card .sa-faq-support-card-link:hover {
  box-shadow: 0 0 32px rgba(var(--cl-accent), 0.16);
}

/* ══════════════════════════════════════════
   MISC
   ══════════════════════════════════════════ */

.sa-breadcrumbs a {
  transition: color 0.25s ease;
}

.sa-breadcrumbs a:hover {
  color: rgb(var(--cl-accent));
}

:focus-visible {
  outline: 2px solid rgba(var(--cl-accent), 0.18);
  outline-offset: 2px;
}

[data-scheme="dark"] .sa-searchbar input:focus {
  border-color: rgba(var(--cl-accent), 0.55) !important;
  box-shadow: 0 0 0 1px rgba(var(--cl-accent), 0.16), 0 0 20px rgba(var(--cl-accent), 0.08);
}

.sa-cart-item {
  transition: background-color 0.3s ease;
}

.sa-cart-item:hover {
  background-color: rgba(var(--cl-accent), 0.03);
}

.sa-product-gallery img {
  transition: transform 0.4s ease;
}

.sa-product-gallery img:hover {
  transform: scale(1.02);
}

[data-scheme="dark"] .sa-toast {
  border-left: 3px solid rgb(var(--cl-accent));
  box-shadow: 0 0 20px rgba(var(--cl-accent), 0.1);
}

[data-scheme="dark"] .rounded-badge[class*="accent"] {
  box-shadow: 0 0 10px rgba(var(--cl-accent), 0.16);
}

[data-scheme="dark"] a[class*="text-accent"]:hover {
  filter: brightness(1.15);
  text-shadow: 0 0 8px rgba(var(--cl-accent), 0.16);
}

/* Override any remaining neutral borders to warm */
[data-scheme="dark"] .border-theme {
  border-color: rgba(var(--cl-accent), 0.28) !important;
}

/* ══════════════════════════════════════════
   TRUST GRID (features variant "trust-grid")
   Bento layout, self-running visuals, pure-CSS ESP card.
   Everything animates on opacity/transform/background-position
   so it stays on the compositor. See DESIGN.md §12.
   ══════════════════════════════════════════ */

.sa-trust-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap, 1.25rem);
}

@media (min-width: 768px) {
  .sa-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sa-trust-card--esp { grid-column: span 2; }
}

/* Two rows only. The section must stay short — see DESIGN.md §12. */
@media (min-width: 1280px) {
  .sa-trust-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sa-trust-card--esp      { grid-column: 1 / span 2; grid-row: 1; }
  .sa-trust-card--live     { grid-column: 3; grid-row: 1; }
  .sa-trust-card--spoofer  { grid-column: 4; grid-row: 1; }
  .sa-trust-card--process  { grid-column: 1; grid-row: 2; }
  .sa-trust-card--hw       { grid-column: 2; grid-row: 2; }
  .sa-trust-card--platform { grid-column: 3; grid-row: 2; }
  .sa-trust-card--pay      { grid-column: 4; grid-row: 2; }
}

/* ── shared card shell ── */
.sa-trust-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  border-radius: var(--radius-card, 10px);
  border: 1px solid rgba(var(--cl-accent), 0.1);
  background-color: rgb(var(--cl-surface));
  overflow: hidden;
  transition: border-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.sa-trust-card:hover {
  border-color: rgba(var(--cl-accent), 0.55);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.7),
    0 0 24px -6px rgba(var(--cl-accent), 0.16);
}

.sa-trust-eyebrow {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgb(var(--cl-t-muted));
}

.sa-trust-title {
  margin-top: 0.3rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: rgb(var(--cl-t-primary));
}

.sa-trust-desc {
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgb(var(--cl-t-muted));
}

/* ── chips ── */
.sa-trust-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 1rem;
}

.sa-trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.65rem;
  border-radius: 9999px;
  border: 1px solid rgba(var(--cl-accent), 0.18);
  background-color: rgba(var(--cl-t-primary), 0.04);
  font-size: 0.75rem;
  font-weight: 500;
  color: rgb(var(--cl-t-muted));
  white-space: nowrap;
  transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.sa-trust-chip:hover {
  color: rgb(var(--cl-t-primary));
  border-color: rgba(var(--cl-accent), 0.55);
  transform: translateY(-2px);
}

/* ══════════════════════════════════════════
   BUILD TIMELINE — indicator walks the stations
   ══════════════════════════════════════════ */

.sa-trust-timeline {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.sa-trust-timeline li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.8125rem;
  animation: sa-step-text 6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 2s);
}

.sa-trust-dot {
  position: relative;
  width: 0.5rem;
  height: 0.5rem;
  flex-shrink: 0;
  border-radius: 9999px;
  background-color: rgba(var(--cl-accent), 0.1);
  animation: sa-step-dot 6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 2s);
}

.sa-trust-timeline li:not(:last-child) .sa-trust-dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: 0.8rem;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, rgba(var(--cl-accent), 0.1), rgba(var(--cl-accent), 0.1));
}

@keyframes sa-step-dot {
  0%, 8%    { background-color: rgba(var(--cl-accent), 0.1); box-shadow: none; transform: scale(1); }
  16%, 28%  { background-color: rgb(var(--cl-accent)); box-shadow: 0 0 0 5px rgba(var(--cl-accent), 0.16); transform: scale(1.25); }
  40%, 100% { background-color: rgba(var(--cl-accent), 0.1); box-shadow: none; transform: scale(1); }
}

@keyframes sa-step-text {
  0%, 8%    { color: rgb(var(--cl-t-muted)); }
  16%, 28%  { color: rgb(var(--cl-t-primary)); }
  40%, 100% { color: rgb(var(--cl-t-muted)); }
}

/* ══════════════════════════════════════════
   SPOOFER — simulated terminal run
   ══════════════════════════════════════════ */

.sa-term {
  margin-top: 0.9rem;
  border-radius: var(--radius-input, 8px);
  border: 1px solid rgba(var(--cl-accent), 0.14);
  background-color: #000000;
  overflow: hidden;
}

.sa-term-bar {
  display: flex;
  gap: 0.3rem;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid rgba(var(--cl-accent), 0.1);
  background-color: rgba(var(--cl-t-primary), 0.03);
}

.sa-term-bar span {
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background-color: rgba(var(--cl-t-primary), 0.18);
}

.sa-term-bar span:first-child { background-color: rgba(var(--cl-accent), 0.1); }

.sa-term-body {
  padding: 0.6rem 0.7rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  line-height: 1.7;
  color: rgb(var(--cl-t-muted));
}

.sa-term-line {
  opacity: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: sa-term-line 9s linear infinite;
  animation-delay: calc(var(--i) * 0.55s);
}

.sa-term-prompt { color: rgb(var(--cl-accent)); }
.sa-term-ok     { color: rgb(var(--cl-success)); font-weight: 600; }
.sa-term-old    { color: rgba(var(--cl-t-primary), 0.45); text-decoration: line-through; }
.sa-term-new    { color: rgb(var(--cl-accent)); font-weight: 600; }

.sa-term-cursor {
  display: inline-block;
  width: 6px;
  height: 0.72rem;
  margin-left: 3px;
  vertical-align: -2px;
  background-color: rgb(var(--cl-accent));
  animation: sa-term-blink 1s steps(2) infinite;
}

@keyframes sa-term-line {
  0%, 3%    { opacity: 0; transform: translateY(3px); }
  8%, 88%   { opacity: 1; transform: translateY(0); }
  96%, 100% { opacity: 0; transform: translateY(0); }
}

@keyframes sa-term-blink {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}

/* ══════════════════════════════════════════
   LIVE DELIVERY PANEL
   Figures are the real shop.* values; the feed lists the
   pipeline stages every order goes through (illustrative).
   ══════════════════════════════════════════ */

.sa-live-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.sa-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(22, 163, 74, 0.35);
  background-color: rgba(22, 163, 74, 0.12);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #16a34a;
}

.sa-live-dot {
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background-color: #16a34a;
  animation: sa-live-pulse 1.8s ease-in-out infinite;
}

@keyframes sa-live-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5); }
  50%      { opacity: 0.6; box-shadow: 0 0 0 4px rgba(22, 163, 74, 0); }
}

.sa-live-panel {
  margin-top: 0.9rem;
  padding: 0.75rem;
  border-radius: var(--radius-input, 8px);
  border: 1px solid rgba(var(--cl-accent), 0.12);
  background-color: #000000;
}

/* mini activity bars — decorative */
.sa-live-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 26px;
}

.sa-live-bar {
  flex: 1;
  border-radius: 2px;
  background: linear-gradient(to top, rgba(var(--cl-accent), 0.1), rgba(var(--cl-accent), 0.1));
  transform-origin: bottom;
  animation: sa-live-bar 2.6s ease-in-out infinite alternate;
}

.sa-live-bar:nth-child(1) { height: 40%; animation-delay: 0s; }
.sa-live-bar:nth-child(2) { height: 65%; animation-delay: .12s; }
.sa-live-bar:nth-child(3) { height: 30%; animation-delay: .24s; }
.sa-live-bar:nth-child(4) { height: 80%; animation-delay: .36s; }
.sa-live-bar:nth-child(5) { height: 55%; animation-delay: .48s; }
.sa-live-bar:nth-child(6) { height: 90%; animation-delay: .60s; }
.sa-live-bar:nth-child(7) { height: 45%; animation-delay: .72s; }
.sa-live-bar:nth-child(8) { height: 70%; animation-delay: .84s; }
.sa-live-bar:nth-child(9) { height: 35%; animation-delay: .96s; }
.sa-live-bar:nth-child(10){ height: 60%; animation-delay: 1.08s; }

@keyframes sa-live-bar {
  from { transform: scaleY(0.55); opacity: 0.55; }
  to   { transform: scaleY(1);    opacity: 1; }
}

.sa-live-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(var(--cl-accent), 0.1);
}

.sa-live-num {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.1;
  color: rgb(var(--cl-t-primary));
  transition: transform 0.2s ease;
}

/* JS hook for the shared count-up in custom.js.
   Tabular figures keep the number from jittering in width while it ticks. */
.sa-live-count {
  font-variant-numeric: tabular-nums;
}

.sa-live-label {
  display: block;
  margin-top: 0.1rem;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgb(var(--cl-t-muted));
}

/* vertical feed of the delivery pipeline stages */
.sa-live-feed {
  position: relative;
  margin-top: 0.75rem;
  height: 3.3rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}

.sa-live-feed-track {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  animation: sa-live-feed 14s linear infinite;
}

.sa-live-feed-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  color: rgb(var(--cl-t-muted));
  white-space: nowrap;
}

.sa-live-feed-row svg {
  width: 0.7rem;
  height: 0.7rem;
  flex-shrink: 0;
  color: rgb(var(--cl-success));
}

@keyframes sa-live-feed {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

/* ══════════════════════════════════════════
   PAYMENT WALL — three tilted rows, alternating directions
   Rotation lives on the wrapper so each row is free to animate
   translateX without fighting a transform on the same element.
   ══════════════════════════════════════════ */

.sa-paywall {
  position: relative;
  margin-top: auto;
  padding-top: 1rem;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(120% 100% at 50% 50%, #000 55%, transparent 100%);
}

.sa-paywall-inner {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* oversized + tilted so the rotated corners never expose empty space */
  width: 150%;
  margin-left: -25%;
  transform: rotate(-7deg);
}

.sa-payrow {
  display: flex;
  width: max-content;
}

.sa-payrow--l { animation: sa-payrow-l 32s linear infinite; }
.sa-payrow--r { animation: sa-payrow-r 26s linear infinite; }

.sa-paywall:hover .sa-payrow { animation-play-state: paused; }

.sa-payset {
  display: flex;
  gap: 0.5rem;
  padding-right: 0.5rem;
}

@keyframes sa-payrow-l {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes sa-payrow-r {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* Dark tiles. Brand marks keep their hue but are lifted in luminance
   where the official colour would disappear on black (Visa, Apple Pay). */
.sa-pay-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 10px;
  border: 1px solid rgba(var(--cl-accent), 0.16);
  background-color: rgba(255, 255, 255, 0.04);
  font-size: 1.05rem;
  line-height: 1;
  transition: border-color 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sa-pay-logo:hover { border-color: rgba(var(--cl-accent), 0.45); }

.sa-pay-logo .fa-bitcoin       { color: #f7931a; }
.sa-pay-logo .fa-ethereum      { color: #627eea; }
.sa-pay-logo .fa-cc-visa       { color: #ffffff; }
.sa-pay-logo .fa-cc-mastercard { color: #eb001b; }
.sa-pay-logo .fa-paypal        { color: #009cde; }
.sa-pay-logo .fa-apple-pay     { color: #ffffff; }
.sa-pay-logo .fa-google-pay    { color: #ffffff; }
.sa-pay-logo .fa-cc-amex       { color: #006fcf; }
.sa-pay-logo .fa-cc-discover   { color: #ff6000; }
.sa-pay-logo .fa-cc-stripe     { color: #635bff; }

/* ══════════════════════════════════════════
   ESP CARD — checkbox-driven, zero JS
   ══════════════════════════════════════════ */

.sa-esp-state {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.sa-esp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  align-items: center;
}

@media (min-width: 640px) {
  .sa-esp-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
}

/* ESP right column must be able to shrink or long labels blow out the grid */
.sa-esp-panel { min-width: 0; }

.sa-esp-stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 175px;
  padding: 0.75rem;
  border-radius: var(--radius-input, 8px);
  border: 1px solid rgba(var(--cl-accent), 0.1);
  background-color: #000000;
  overflow: hidden;
}

/* sweeping scan line — animates background-position, paint only */
.sa-esp-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 46%,
    rgba(var(--cl-accent), 0.1) 50%,
    transparent 54%,
    transparent 100%
  );
  background-size: 100% 320%;
  background-repeat: no-repeat;
  animation: sa-esp-scan 5s ease-in-out infinite;
}

@keyframes sa-esp-scan {
  0%, 100% { background-position: 0 -110%; }
  50%      { background-position: 0 210%; }
}

.sa-esp-svg {
  position: relative;
  width: 100%;
  max-width: 155px;
  height: auto;
  display: block;
}

.esp-dummy { fill: rgba(var(--cl-t-primary), 0.16); }

/* every overlay layer is hidden until its checkbox is on */
.esp-l {
  opacity: 0;
  transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.esp-l-box rect {
  fill: none;
  stroke: rgb(var(--cl-accent));
  stroke-width: 1.5;
}

.esp-corner {
  fill: none;
  stroke: rgb(var(--cl-accent));
  stroke-width: 3.5;
  stroke-linecap: round;
}

.esp-l-skeleton path {
  fill: none;
  stroke: rgb(var(--cl-accent));
  stroke-width: 2;
  stroke-linecap: round;
  /* drawn in when toggled on */
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
  transition: stroke-dashoffset 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.esp-joint circle { fill: rgb(var(--cl-accent)); }

.esp-l-head circle {
  fill: none;
  stroke: rgb(var(--cl-accent));
  stroke-width: 1.5;
  stroke-dasharray: 6 5;
}

.esp-hp-track { fill: rgba(var(--cl-t-primary), 0.14); }
.esp-hp-fill  { fill: rgb(var(--cl-success)); }

.esp-l-name text,
.esp-l-distance text {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 600;
  fill: rgb(var(--cl-t-primary));
}

.esp-l-distance text { fill: rgb(var(--cl-accent)); }

.esp-l-snap line {
  stroke: rgb(var(--cl-accent));
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
  opacity: 0.8;
}

/* ── state wiring: each checkbox reveals its own layer ── */
#esp-box:checked      ~ .sa-esp-grid .esp-l-box,
#esp-skeleton:checked ~ .sa-esp-grid .esp-l-skeleton,
#esp-head:checked     ~ .sa-esp-grid .esp-l-head,
#esp-health:checked   ~ .sa-esp-grid .esp-l-health,
#esp-name:checked     ~ .sa-esp-grid .esp-l-name,
#esp-distance:checked ~ .sa-esp-grid .esp-l-distance,
#esp-snap:checked     ~ .sa-esp-grid .esp-l-snap {
  opacity: 1;
}

#esp-skeleton:checked ~ .sa-esp-grid .esp-l-skeleton path {
  stroke-dashoffset: 0;
}

/* ── switches ── */
.sa-esp-switches {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
  margin-top: 0.9rem;
}

@media (min-width: 480px) {
  .sa-esp-switches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sa-esp-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.42rem 0.6rem;
  border-radius: var(--radius-input, 8px);
  border: 1px solid rgba(var(--cl-accent), 0.1);
  background-color: rgba(var(--cl-t-primary), 0.02);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.sa-esp-switch:hover { border-color: rgba(var(--cl-accent), 0.55); }

.sa-esp-switch-label {
  font-size: 0.78rem;
  color: rgb(var(--cl-t-muted));
  transition: color 0.25s ease;
}

.sa-esp-track {
  position: relative;
  flex-shrink: 0;
  width: 30px;
  height: 18px;
  border-radius: 9999px;
  background-color: rgba(var(--cl-t-primary), 0.1);
  transition: background-color 0.25s ease;
}

.sa-esp-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  background-color: rgba(var(--cl-t-primary), 0.45);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.25s ease;
}

#esp-box:checked      ~ .sa-esp-grid [for="esp-box"] .sa-esp-track,
#esp-skeleton:checked ~ .sa-esp-grid [for="esp-skeleton"] .sa-esp-track,
#esp-head:checked     ~ .sa-esp-grid [for="esp-head"] .sa-esp-track,
#esp-health:checked   ~ .sa-esp-grid [for="esp-health"] .sa-esp-track,
#esp-name:checked     ~ .sa-esp-grid [for="esp-name"] .sa-esp-track,
#esp-distance:checked ~ .sa-esp-grid [for="esp-distance"] .sa-esp-track,
#esp-snap:checked     ~ .sa-esp-grid [for="esp-snap"] .sa-esp-track {
  background-color: rgba(var(--cl-accent), 0.1);
}

#esp-box:checked      ~ .sa-esp-grid [for="esp-box"] .sa-esp-track::after,
#esp-skeleton:checked ~ .sa-esp-grid [for="esp-skeleton"] .sa-esp-track::after,
#esp-head:checked     ~ .sa-esp-grid [for="esp-head"] .sa-esp-track::after,
#esp-health:checked   ~ .sa-esp-grid [for="esp-health"] .sa-esp-track::after,
#esp-name:checked     ~ .sa-esp-grid [for="esp-name"] .sa-esp-track::after,
#esp-distance:checked ~ .sa-esp-grid [for="esp-distance"] .sa-esp-track::after,
#esp-snap:checked     ~ .sa-esp-grid [for="esp-snap"] .sa-esp-track::after {
  transform: translateX(12px);
  background-color: rgb(var(--cl-accent));
}

#esp-box:checked      ~ .sa-esp-grid [for="esp-box"],
#esp-skeleton:checked ~ .sa-esp-grid [for="esp-skeleton"],
#esp-head:checked     ~ .sa-esp-grid [for="esp-head"],
#esp-health:checked   ~ .sa-esp-grid [for="esp-health"],
#esp-name:checked     ~ .sa-esp-grid [for="esp-name"],
#esp-distance:checked ~ .sa-esp-grid [for="esp-distance"],
#esp-snap:checked     ~ .sa-esp-grid [for="esp-snap"] {
  border-color: rgba(var(--cl-accent), 0.55);
  background-color: rgba(var(--cl-accent), 0.05);
}

#esp-box:checked      ~ .sa-esp-grid [for="esp-box"] .sa-esp-switch-label,
#esp-skeleton:checked ~ .sa-esp-grid [for="esp-skeleton"] .sa-esp-switch-label,
#esp-head:checked     ~ .sa-esp-grid [for="esp-head"] .sa-esp-switch-label,
#esp-health:checked   ~ .sa-esp-grid [for="esp-health"] .sa-esp-switch-label,
#esp-name:checked     ~ .sa-esp-grid [for="esp-name"] .sa-esp-switch-label,
#esp-distance:checked ~ .sa-esp-grid [for="esp-distance"] .sa-esp-switch-label,
#esp-snap:checked     ~ .sa-esp-grid [for="esp-snap"] .sa-esp-switch-label {
  color: rgb(var(--cl-t-primary));
}

/* keyboard focus must stay visible even though the input itself is hidden */
#esp-box:focus-visible      ~ .sa-esp-grid [for="esp-box"],
#esp-skeleton:focus-visible ~ .sa-esp-grid [for="esp-skeleton"],
#esp-head:focus-visible     ~ .sa-esp-grid [for="esp-head"],
#esp-health:focus-visible   ~ .sa-esp-grid [for="esp-health"],
#esp-name:focus-visible     ~ .sa-esp-grid [for="esp-name"],
#esp-distance:focus-visible ~ .sa-esp-grid [for="esp-distance"],
#esp-snap:focus-visible     ~ .sa-esp-grid [for="esp-snap"] {
  outline: 2px solid rgba(var(--cl-accent), 0.18);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .sa-payrow,
  .sa-live-feed-track,
  .sa-live-bar,
  .sa-live-dot,
  .sa-esp-scan,
  .sa-term-line,
  .sa-term-cursor,
  .sa-trust-dot,
  .sa-trust-timeline li {
    animation: none;
  }
  .sa-term-line { opacity: 1; }
  .sa-trust-timeline li { color: rgb(var(--cl-t-muted)); }
  .esp-l,
  .esp-l-skeleton path,
  .sa-esp-track,
  .sa-esp-track::after {
    transition-duration: 0.01ms;
  }
}

/* ══════════════════════════════════════════
   BOX SURFACES — the standard for every panel
   Cards sit clearly above the pure-black page; panels
   nested inside a card go darker again. See DESIGN.md §1.
   ══════════════════════════════════════════ */

[data-scheme="dark"] .sa-trust-card {
  background-color: #000000;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.58), 0 0 12px rgba(var(--cl-accent), 0.1);
}

/* inset panels read as "inside" the card */
[data-scheme="dark"] .sa-esp-stage,
[data-scheme="dark"] .sa-live-panel,
[data-scheme="dark"] .sa-term,
[data-scheme="dark"] .sa-hw-stage {
  background-color: #000000;
}

/* Stage stays pure black — the overlay layers and the scan line
   are the only red inside it. */
[data-scheme="dark"] .sa-esp-stage {
  background-image: none;
}

/* The Discord support card is styled with the FAQ block further up —
   a second rule here would win on order and re-introduce the red fill. */

/* ══════════════════════════════════════════
   HARDWARE — PCB illustration
   ══════════════════════════════════════════ */

.sa-hw-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.85rem;
  padding: 0.6rem;
  border-radius: var(--radius-input, 8px);
  border: 1px solid rgba(var(--cl-accent), 0.12);
  overflow: hidden;
}

.sa-hw-svg {
  width: 100%;
  max-width: 200px;
  height: auto;
  display: block;
}

.sa-hw-board {
  fill: rgba(var(--cl-accent), 0.07);
  stroke: rgba(var(--cl-accent), 0.1);
  stroke-width: 1.2;
}

.sa-hw-trace {
  fill: none;
  stroke: rgba(var(--cl-accent), 0.1);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 3 4;
  animation: sa-hw-flow 3s linear infinite;
}

.sa-hw-chip {
  fill: rgba(var(--cl-accent), 0.1);
  stroke: rgb(var(--cl-accent));
  stroke-width: 1.2;
}

.sa-hw-pin,
.sa-hw-fingers rect {
  stroke: rgba(var(--cl-accent), 0.1);
  stroke-width: 1.2;
}

.sa-hw-fingers rect {
  fill: rgba(var(--cl-accent), 0.1);
}

.sa-hw-part {
  fill: rgba(var(--cl-t-primary), 0.14);
}

.sa-hw-led {
  fill: rgb(var(--cl-accent));
  animation: sa-hw-led 2.2s ease-in-out infinite;
}

@keyframes sa-hw-flow {
  to { stroke-dashoffset: -14; }
}

@keyframes sa-hw-led {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

/* ══════════════════════════════════════════
   PLATFORMS — check tiles
   ══════════════════════════════════════════ */

.sa-plat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  margin-top: auto;
  padding-top: 1rem;
}

.sa-plat-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1.5rem 0.5rem 0.6rem;
  border-radius: var(--radius-input, 8px);
  border: 1px solid rgba(var(--cl-accent), 0.16);
  background-color: rgba(var(--cl-t-primary), 0.03);
  font-size: 0.78rem;
  color: rgb(var(--cl-t-primary));
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.sa-plat-tile:hover {
  border-color: rgba(var(--cl-accent), 0.55);
  transform: translateY(-2px);
}

.sa-plat-icon {
  font-size: 0.85rem;
  color: rgb(var(--cl-t-muted));
  flex-shrink: 0;
}

.sa-plat-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sa-plat-check {
  position: absolute;
  right: 0.5rem;
  width: 0.7rem;
  height: 0.7rem;
  color: rgb(var(--cl-success));
}

@media (prefers-reduced-motion: reduce) {
  .sa-hw-trace,
  .sa-hw-led {
    animation: none;
  }
}

/* ══════════════════════════════════════════
   AMBIENT LIGHT — values taken from D:\Tkzzt
   The style guide is explicit: above ~5% the background starts to
   BE red instead of looking red-lit. The theme preset "soft" is 10%,
   so it gets pulled down to the documented level here.
   ══════════════════════════════════════════ */

[data-scheme="dark"] .pfx-glows {
  --pfx-glow-a: 0.038;
}


/* ══════════════════════════════════════════
   RED BUDGET
   Style guide: red is edge and mark, never fill. The one red
   surface is the primary buy button on the product page.
   Card CTAs navigate, so they are neutral until hovered.
   ══════════════════════════════════════════ */

/* eyebrows: label, not marker */
.sa-pcard-eyebrow,
.sa-pcat-eyebrow,
.sa-psub-eyebrow {
  color: rgb(var(--cl-t-muted)) !important;
}

/* card buttons: neutral surface, red only on hover */
[data-scheme="dark"] .sa-pcard-cta,
[data-scheme="dark"] .sa-pcat-cta {
  background-color: #000000 !important;
  border: 1px solid rgba(var(--cl-accent), 0.22);
  color: rgb(var(--cl-t-primary)) !important;
  box-shadow: none !important;
}

[data-scheme="dark"] .sa-pcard:hover .sa-pcard-cta,
[data-scheme="dark"] .sa-pcat-card:hover .sa-pcat-cta {
  background-color: rgb(var(--cl-accent)) !important;
  border-color: rgb(var(--cl-accent));
  color: #fff !important;
  transform: none;
}

/* the accent rail fired on every card at once — that is a pattern */
[data-scheme="dark"] .sa-pcard::after,
[data-scheme="dark"] .sa-pcat-card::after {
  display: none;
}

/* hover keeps depth and an edge, drops the red halo */
[data-scheme="dark"] .sa-pcard:hover,
[data-scheme="dark"] .sa-pcat-card:hover {
  border-color: rgba(var(--cl-accent), 0.55) !important;
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.72) !important;
}

/* chips: hairline, not red */
[data-scheme="dark"] .sa-pcard-chips > span,
[data-scheme="dark"] .sa-trust-chip,
[data-scheme="dark"] .sa-plat-tile,
[data-scheme="dark"] .sa-esp-switch {
  border-color: rgba(var(--cl-accent), 0.28) !important;
}

[data-scheme="dark"] .sa-trust-chip:hover,
[data-scheme="dark"] .sa-plat-tile:hover,
[data-scheme="dark"] .sa-esp-switch:hover {
  border-color: rgba(var(--cl-accent), 0.55) !important;
}

/* empty product/category media: neutral, no red wash */
[data-scheme="dark"] .sa-pcat-placeholder {
  background: #000000 !important;
}

[data-scheme="dark"] .sa-pcat-placeholder span,
[data-scheme="dark"] .sa-product-card-media .bg-accent-500\/5,
[data-scheme="dark"] .sa-product-card-media span[class*="bg-accent"] {
  background-color: #000000 !important;
  border: 1px solid rgba(var(--cl-accent), 0.16);
  color: rgb(var(--cl-t-muted)) !important;
}

/* section dividers: seven red lines down the page were too much */
[data-scheme="dark"] .sa-tpl-shop .component + .component::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--cl-accent), 0.22) 50%,
    transparent 100%
  ) !important;
}

/* inset panels inside cards */
[data-scheme="dark"] .sa-esp-stage,
[data-scheme="dark"] .sa-term,
[data-scheme="dark"] .sa-hw-stage,
[data-scheme="dark"] .sa-live-panel {
  border-color: rgba(var(--cl-accent), 0.28) !important;
}

/* ══════════════════════════════════════════
   BLACK CARDS, LIT EDGE (owner decision)
   Surface is pure black. What makes a card readable is the red
   edge plus a light glow — outer for separation from the page,
   inset so the black body reads as lit instead of empty.
   Outer glow stays on the <=.16 ladder from §19.
   ══════════════════════════════════════════ */

[data-scheme="dark"] .sa-trust-card,
[data-scheme="dark"] .sa-pcard,
[data-scheme="dark"] .sa-pcat-card,
[data-scheme="dark"] .sa-faq-support-card,
[data-scheme="dark"] .sa-features--icon-grid .sa-features-item,
[data-scheme="dark"] .sa-stats--cards .sa-stats-item,
[data-scheme="dark"] .sa-feedback-card {
  background-color: #000000 !important;
  border-color: rgba(var(--cl-accent), 0.28) !important;
  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.6),
    0 0 18px rgba(var(--cl-accent), 0.1),
    inset 0 0 26px rgba(var(--cl-accent), 0.035);
}

[data-scheme="dark"] .sa-trust-card:hover,
[data-scheme="dark"] .sa-pcard:hover,
[data-scheme="dark"] .sa-pcat-card:hover,
[data-scheme="dark"] .sa-faq-support-card:hover,
[data-scheme="dark"] .sa-features--icon-grid .sa-features-item:hover,
[data-scheme="dark"] .sa-stats--cards .sa-stats-item:hover,
[data-scheme="dark"] .sa-feedback-card:hover {
  border-color: rgba(var(--cl-accent), 0.55) !important;
  box-shadow:
    0 22px 52px rgba(0, 0, 0, 0.75),
    0 0 26px rgba(var(--cl-accent), 0.16),
    inset 0 0 34px rgba(var(--cl-accent), 0.055) !important;
}

/* Everything nested in a card is black too — the edge does the separating,
   one step quieter than the card edge so the hierarchy still reads. */
[data-scheme="dark"] .sa-esp-stage,
[data-scheme="dark"] .sa-term,
[data-scheme="dark"] .sa-hw-stage,
[data-scheme="dark"] .sa-live-panel,
[data-scheme="dark"] .sa-pcard-chips > span,
[data-scheme="dark"] .sa-trust-chip,
[data-scheme="dark"] .sa-plat-tile,
[data-scheme="dark"] .sa-esp-switch,
[data-scheme="dark"] .sa-pay-logo {
  background-color: #000000 !important;
  border-color: rgba(var(--cl-accent), 0.16) !important;
}

[data-scheme="dark"] .sa-trust-chip:hover,
[data-scheme="dark"] .sa-plat-tile:hover,
[data-scheme="dark"] .sa-esp-switch:hover,
[data-scheme="dark"] .sa-pay-logo:hover {
  border-color: rgba(var(--cl-accent), 0.45) !important;
}

/* Card CTA: black like everything else until it is hovered. */
[data-scheme="dark"] .sa-pcard-cta,
[data-scheme="dark"] .sa-pcat-cta {
  background-color: #000000 !important;
  border-color: rgba(var(--cl-accent), 0.28) !important;
}


/* ══════════════════════════════════════════
   FIXES
   ══════════════════════════════════════════ */

/* Glow must fade, not snap. Every card that carries the lit edge needs
   box-shadow in its transition list, otherwise the halo pops on and off. */
[data-scheme="dark"] .sa-trust-card,
[data-scheme="dark"] .sa-pcard,
[data-scheme="dark"] .sa-pcat-card,
[data-scheme="dark"] .sa-faq-support-card,
[data-scheme="dark"] .sa-features--icon-grid .sa-features-item,
[data-scheme="dark"] .sa-stats--cards .sa-stats-item,
[data-scheme="dark"] .sa-feedback-card {
  transition:
    border-color 260ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Support CTA: same sweep as the hero buttons, plus a lift so it reacts. */
.sa-faq-support-card-link {
  transition:
    background-color 260ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sa-faq-support-card-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 24px rgba(var(--cl-accent), 0.16);
}

/* Game cards: no CTA row any more, so the media zoom carries the hover —
   matched to the product cards in the trending section. */
.sa-pcat-body {
  padding-bottom: 1.15rem;
}

/* ══════════════════════════════════════════
   GAME LANDING PAGES (templates/custom-page.njk)
   Long-form SEO pages, one per game. Same language as the rest:
   black surfaces, red edge, glow on the <=.16 ladder.
   ══════════════════════════════════════════ */

.sa-gp {
  display: block;
}

.sa-gp-section--ruled {
  border-top: 1px solid rgba(var(--cl-accent), 0.14);
}

/* ── hero ── */
.sa-gp-eyebrow {
  margin-top: 1.1rem;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgb(var(--cl-t-muted));
}

.sa-gp-lead {
  max-width: 62ch;
  /* no auto margin: that re-centred the paragraph inside the left-aligned copy */
  margin: 1.1rem 0 0;
  font-size: 1rem;
  line-height: 1.65;
  color: rgb(var(--cl-t-muted));
}

.sa-gp-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.6rem;
  margin-top: 1.8rem;
}

.sa-gp-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border-radius: var(--radius-btn, 12px);
  font-size: 0.9rem;
  font-weight: 600;
  overflow: hidden;
  transition:
    background-color 260ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 260ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sa-gp-btn svg { width: 1rem; height: 1rem; }

.sa-gp-btn--primary {
  background-color: rgb(var(--cl-accent));
  color: #fff;
}

.sa-gp-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 24px rgba(var(--cl-accent), 0.16);
}

.sa-gp-btn--ghost {
  background-color: #000;
  border: 1px solid rgba(var(--cl-accent), 0.28);
  color: rgb(var(--cl-t-primary));
}

.sa-gp-btn--ghost:hover {
  border-color: rgba(var(--cl-accent), 0.55);
  transform: translateY(-2px);
}

/* ── table of contents ── */
.sa-gp-toc-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgb(var(--cl-accent));
}

/* ── shared section typography ── */
.sa-gp-kicker {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgb(var(--cl-t-muted));
}

.sa-gp-h2 {
  margin-top: 0.45rem;
  font-family: var(--font-heading, inherit);
  font-weight: 800;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: rgb(var(--cl-t-primary));
}

.sa-gp-sub {
  max-width: 68ch;
  margin-top: 0.7rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgb(var(--cl-t-muted));
}

.sa-gp-copy p {
  max-width: 70ch;
  margin-top: 0.9rem;
  font-size: 0.95rem;
  line-height: 1.72;
  color: rgb(var(--cl-t-muted));
}

/* ── the offer strip ── */
.sa-gp-offer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.4rem;
  padding: 1.35rem 1.5rem;
  border-radius: var(--radius-card, 18px);
  border: 1px solid rgba(var(--cl-accent), 0.28);
  background-color: #000;
  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.6),
    0 0 18px rgba(var(--cl-accent), 0.1),
    inset 0 0 26px rgba(var(--cl-accent), 0.035);
  transition:
    border-color 260ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sa-gp-offer:hover {
  border-color: rgba(var(--cl-accent), 0.55);
  transform: translateY(-3px);
  box-shadow:
    0 22px 52px rgba(0, 0, 0, 0.75),
    0 0 26px rgba(var(--cl-accent), 0.16),
    inset 0 0 34px rgba(var(--cl-accent), 0.055);
}

.sa-gp-offer strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
  color: rgb(var(--cl-t-primary));
}

.sa-gp-offer em {
  display: block;
  margin-top: 0.2rem;
  font-style: normal;
  font-size: 0.85rem;
  color: rgb(var(--cl-t-muted));
}

.sa-gp-offer-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgb(var(--cl-accent));
}

.sa-gp-offer-cta svg {
  width: 0.95rem;
  height: 0.95rem;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sa-gp-offer:hover .sa-gp-offer-cta svg { transform: translateX(3px); }

/* ── benefit blocks: two columns of long-form copy ── */
.sa-gp-blocks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 1.6rem;
}

@media (min-width: 900px) {
  .sa-gp-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sa-gp-block {
  padding: 1.35rem;
  border-radius: var(--radius-card, 18px);
  border: 1px solid rgba(var(--cl-accent), 0.16);
  background-color: #000;
  transition:
    border-color 260ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sa-gp-block:hover {
  border-color: rgba(var(--cl-accent), 0.45);
  box-shadow: 0 0 20px rgba(var(--cl-accent), 0.1);
}

.sa-gp-block h3 {
  font-family: var(--font-heading, inherit);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: rgb(var(--cl-t-primary));
}

.sa-gp-block p {
  margin-top: 0.6rem;
  font-size: 0.875rem;
  line-height: 1.68;
  color: rgb(var(--cl-t-muted));
}

/* ── glossary grid ── */
.sa-gp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  margin-top: 1.6rem;
}

@media (min-width: 700px) {
  .sa-gp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .sa-gp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.sa-gp-card {
  padding: 1.35rem;
  border-radius: var(--radius-card, 18px);
  border: 1px solid rgba(var(--cl-accent), 0.16);
  background-color: #000;
  transition:
    border-color 260ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sa-gp-card:hover {
  border-color: rgba(var(--cl-accent), 0.45);
  box-shadow: 0 0 20px rgba(var(--cl-accent), 0.1);
}

.sa-gp-card-num {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgb(var(--cl-accent));
}

.sa-gp-card h3 {
  margin-top: 0.4rem;
  font-family: var(--font-heading, inherit);
  font-size: 1.05rem;
  font-weight: 700;
  color: rgb(var(--cl-t-primary));
}

.sa-gp-card p {
  margin-top: 0.55rem;
  font-size: 0.85rem;
  line-height: 1.65;
  color: rgb(var(--cl-t-muted));
}

/* the per-game example is the reason six pages with one glossary differ */
.sa-gp-eg {
  margin-top: 0.75rem !important;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(var(--cl-accent), 0.14);
  color: rgb(var(--cl-t-primary)) !important;
}

/* ── buyer guide ── */
.sa-gp-steps {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.6rem;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.sa-gp-steps li {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: var(--radius-card, 18px);
  border: 1px solid rgba(var(--cl-accent), 0.16);
  background-color: #000;
}

.sa-gp-step-n {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  border: 1px solid rgba(var(--cl-accent), 0.35);
  font-size: 0.85rem;
  font-weight: 700;
  color: rgb(var(--cl-accent));
}

.sa-gp-steps h3 {
  font-family: var(--font-heading, inherit);
  font-size: 0.98rem;
  font-weight: 600;
  color: rgb(var(--cl-t-primary));
}

.sa-gp-steps p {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.68;
  color: rgb(var(--cl-t-muted));
}

/* ── compatibility table ── */
.sa-gp-compat {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

@media (min-width: 700px) {
  .sa-gp-compat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sa-gp-compat > div {
  padding: 1rem 1.15rem;
  border-radius: var(--radius-input, 12px);
  border: 1px solid rgba(var(--cl-accent), 0.16);
  background-color: #000;
}

.sa-gp-compat dt {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgb(var(--cl-t-muted));
}

.sa-gp-compat dd {
  margin: 0.3rem 0 0;
  font-size: 0.9rem;
  color: rgb(var(--cl-t-primary));
}

.sa-gp-note {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: rgb(var(--cl-t-muted));
}

/* ── FAQ ── */
.sa-gp-faq {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 1.6rem;
}

.sa-gp-faq-item {
  border-radius: var(--radius-card, 18px);
  border: 1px solid rgba(var(--cl-accent), 0.16);
  background-color: #000;
  overflow: hidden;
}

.sa-gp-faq-item > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.05rem 1.25rem;
  text-align: left;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgb(var(--cl-t-primary));
  cursor: pointer;
}

.sa-gp-faq-item > button svg {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: rgb(var(--cl-t-muted));
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sa-gp-faq-answer {
  padding: 0 1.25rem 1.15rem;
}

.sa-gp-faq-answer p {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.68;
  color: rgb(var(--cl-t-muted));
}

.sa-gp-faq-answer p:first-child { margin-top: 0; }

/* ── other games ── */
.sa-gp-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.sa-gp-nav-item {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1rem;
  border-radius: 9999px;
  border: 1px solid rgba(var(--cl-accent), 0.16);
  background-color: #000;
  font-size: 0.85rem;
  color: rgb(var(--cl-t-muted));
  transition:
    border-color 260ms cubic-bezier(0.22, 1, 0.36, 1),
    color 260ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sa-gp-nav-item:hover {
  border-color: rgba(var(--cl-accent), 0.45);
  color: rgb(var(--cl-t-primary));
  transform: translateY(-2px);
}

/* ══════════════════════════════════════════
   SUPPORT CARD — final word
   Twelve rules were stacking on this element, several of them with
   higher specificity than the transition, so the glow had no chance
   to animate. This block is last and marked important on purpose:
   it decides both the transition and the hover state.
   ══════════════════════════════════════════ */

[data-scheme="dark"] .sa-faq-support-card,
[data-scheme="dark"] .sa-faq-support-card:hover {
  transition:
    border-color 300ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 300ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* The button: sweep comes from .hfx-shine, this adds the lift and the halo. */
[data-scheme="dark"] .sa-faq-support-card .sa-faq-support-card-link {
  transition:
    background-color 300ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 300ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  box-shadow: 0 0 18px rgba(var(--cl-accent), 0.1) !important;
}

[data-scheme="dark"] .sa-faq-support-card .sa-faq-support-card-link:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 0 28px rgba(var(--cl-accent), 0.16) !important;
}

[data-scheme="dark"] .sa-faq-support-card .sa-faq-support-card-link:active {
  transform: translateY(0) !important;
}

@media (prefers-reduced-motion: reduce) {
  [data-scheme="dark"] .sa-faq-support-card,
  [data-scheme="dark"] .sa-faq-support-card .sa-faq-support-card-link {
    transition-duration: 0.01ms !important;
  }
}

/* ══════════════════════════════════════════
   GAME PAGE — hero, TOC buttons, feature row, games grid
   Rebuilt from D:\Tkzzt\sections\tkz-page-hero.liquid.
   ══════════════════════════════════════════ */

/* Sections need a stacking context for the dot layer from section-fx.njk */
/* Vertical rhythm. This padding was accidentally stripped in an earlier
   cleanup, which is why every section ran straight into the next one. */
.sa-gp-section {
  position: relative;
  padding-block: 2.75rem;
}

@media (min-width: 1024px) {
  .sa-gp-section { padding-block: 3.5rem; }
}
.sa-gp-section > .wrap {
  position: relative;
  z-index: 1;
}

/* Long-form pages sit narrower than the shop pages. The hero keeps the full
   container so the key art still spans the screen. */
@media (min-width: 1024px) {
  .sa-gp-section > .wrap,
  .sa-lg-intro,
  .sa-gp-hero-inner {
    max-width: 1000px;
  }
}

/* ── hero ──
   Full bleed and pulled under the sticky header, exactly like the source:
   two gradients darken the art so type stays readable, and a tall bottom
   fade removes the seam against the page. */
.sa-gp-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 560px;
  margin-top: calc(-1 * var(--gp-pull, 5.5rem));
  padding-top: var(--gp-pull, 5.5rem);
  background-color: #000;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .sa-gp-hero { min-height: 680px; }
}

/* with key art */
/* Art sits further back than in the source: the horizontal ramp keeps more
   density in the middle and the vertical one reaches higher, so the key art
   reads as atmosphere rather than as a picture behind the text. */
.sa-gp-hero--art {
  background-image:
    linear-gradient(90deg,
      rgba(3, 3, 4, 1) 0%,
      rgba(3, 3, 4, 0.97) 30%,
      rgba(3, 3, 4, 0.72) 62%,
      rgba(3, 3, 4, 1) 100%),
    linear-gradient(0deg, rgba(3, 3, 4, 1) 0%, rgba(0, 0, 0, 0.25) 58%, rgba(0, 0, 0, 0) 82%),
    var(--gp-art);
  background-position: center, center, center center;
}

/* without art: the documented fallback — a side ember so the head is not dead */
.sa-gp-hero--plain {
  background-image:
    radial-gradient(120% 90% at 78% 18%, rgba(var(--cl-accent), 0.115) 0%, rgba(0, 0, 0, 0) 60%),
    linear-gradient(0deg, rgba(3, 3, 4, 1) 0%, rgba(0, 0, 0, 0) 55%);
}

/* soft run-out; two mid stops avoid the grey mach band a linear ramp leaves */
.sa-gp-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 220px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.28) 42%,
    rgba(0, 0, 0, 0.72) 74%,
    #000 100%
  );
}

.sa-gp-hero-inner {
  position: relative;
  z-index: 1;
  padding-block: 3rem;
}

/* Left aligned, capped like .ph__copy in the source (900px). */
.sa-gp-hero-copy {
  max-width: 900px;
  text-align: left;
}

.sa-gp-title {
  margin-top: 0.5rem;
  font-family: var(--font-heading, inherit);
  font-weight: 800;
  font-size: clamp(2.6rem, 8vw, 5.4rem);
  line-height: 1;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: rgb(var(--cl-t-primary));
}

/* gradient wordmark, as in the source */
.sa-gp-title-accent {
  background: linear-gradient(92deg, #ffffff 0%, rgb(var(--cl-accent)) 62%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: rgb(var(--cl-accent));
}

/* ── table of contents: real buttons ── */
.sa-gp-toc {
  border-block: 1px solid rgba(var(--cl-accent), 0.14);
  background-color: #000;
}

.sa-gp-toc .wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 1.1rem;
  padding-block: 1rem;
}

.sa-gp-toc ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sa-gp-toc-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border-radius: 9999px;
  border: 1px solid rgba(var(--cl-accent), 0.28);
  background-color: #000;
  font-size: 0.8rem;
  font-weight: 500;
  color: rgb(var(--cl-t-muted));
  white-space: nowrap;
  transition:
    border-color 260ms cubic-bezier(0.22, 1, 0.36, 1),
    color 260ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sa-gp-toc-btn svg {
  width: 0.75rem;
  height: 0.75rem;
  opacity: 0.5;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 260ms ease;
}

.sa-gp-toc-btn:hover {
  border-color: rgba(var(--cl-accent), 0.55);
  color: rgb(var(--cl-t-primary));
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(var(--cl-accent), 0.12);
}

.sa-gp-toc-btn:hover svg {
  transform: translateY(2px);
  opacity: 1;
}

/* ── feature row: the image slot in "what you get" ── */
.sa-gp-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
  margin-top: 1.25rem;
  margin-bottom: 1rem;
  padding: 1.15rem;
  border-radius: var(--radius-card, 18px);
  border: 1px solid rgba(var(--cl-accent), 0.28);
  background-color: #000;
  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.6),
    0 0 18px rgba(var(--cl-accent), 0.1),
    inset 0 0 26px rgba(var(--cl-accent), 0.035);
}

@media (min-width: 900px) {
  .sa-gp-feature { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem; }
}

.sa-gp-feature-media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-input, 12px);
  border: 1px solid rgba(var(--cl-accent), 0.16);
  background-color: #000;
  overflow: hidden;
}

.sa-gp-feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sa-gp-feature-ph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-input, 12px);
  border: 1px solid rgba(var(--cl-accent), 0.22);
  color: rgba(var(--cl-accent), 0.55);
}

.sa-gp-feature-ph svg { width: 1.4rem; height: 1.4rem; }

.sa-gp-feature-text h3 {
  font-family: var(--font-heading, inherit);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: rgb(var(--cl-t-primary));
}

.sa-gp-feature-text p {
  margin-top: 0.7rem;
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgb(var(--cl-t-muted));
}

/* ── more games: same density as the homepage Games section, which runs six
      across; the tiles are art with a name, so they stay readable small ── */
@media (min-width: 480px) {
  .sa-gp-games { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .sa-gp-games { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .sa-gp-games { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .sa-gp-games { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.sa-gp-games { margin-top: 1.25rem; }

/* ── landing page: real product cards for the category ── */
.sa-gp-products {
  margin-top: 1.25rem;
}

@media (min-width: 640px) {
  .sa-gp-products { grid-template-columns: repeat(auto-fill, minmax(0, 250px)); }
}

.sa-gp-offer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.5rem;
  padding: 0.65rem 1.15rem;
  border-radius: 9999px;
  border: 1px solid rgba(var(--cl-accent), 0.28);
  background-color: #000;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgb(var(--cl-t-muted));
  transition:
    border-color 260ms cubic-bezier(0.22, 1, 0.36, 1),
    color 260ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sa-gp-offer-link svg { width: 0.9rem; height: 0.9rem; }

.sa-gp-offer-link:hover {
  border-color: rgba(var(--cl-accent), 0.55);
  color: rgb(var(--cl-t-primary));
  transform: translateY(-2px);
}

/* ══════════════════════════════════════════
   GAME PAGE VISUALS
   Badges, ticker and icon work so the long-form pages stop
   reading as a wall of text. Same language as the rest:
   black surfaces, red edge, glow capped at .16.
   ══════════════════════════════════════════ */

/* ── hero: trust pills ── */
.sa-gp-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1.5rem;
  padding: 0;
  list-style: none;
}

.sa-gp-trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.8rem;
  border-radius: 9999px;
  border: 1px solid rgba(var(--cl-accent), 0.22);
  background-color: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  font-size: 0.78rem;
  color: rgb(var(--cl-t-muted));
  transition: border-color 260ms cubic-bezier(0.22, 1, 0.36, 1),
              color 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sa-gp-trust li i {
  font-size: 0.75rem;
  color: rgb(var(--cl-accent));
}

.sa-gp-trust li:hover {
  border-color: rgba(var(--cl-accent), 0.5);
  color: rgb(var(--cl-t-primary));
}







/* ── numbered benefit cards ── */
.sa-gp-block { position: relative; }

.sa-gp-block-n {
  position: absolute;
  top: 0.9rem;
  right: 1.1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(var(--cl-accent), 0.16);
  transition: color 260ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.sa-gp-block:hover .sa-gp-block-n { color: rgba(var(--cl-accent), 0.45); }

.sa-gp-block h3 { padding-right: 2.6rem; }

/* ── glossary: icon tile ── */
.sa-gp-card-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.sa-gp-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  flex-shrink: 0;
  border-radius: var(--radius-input, 12px);
  border: 1px solid rgba(var(--cl-accent), 0.22);
  background-color: #000;
  color: rgb(var(--cl-accent));
  font-size: 0.85rem;
  transition: border-color 260ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sa-gp-card:hover .sa-gp-card-icon {
  border-color: rgba(var(--cl-accent), 0.5);
  box-shadow: 0 0 16px rgba(var(--cl-accent), 0.16);
}

/* ── compatibility rows ── */
.sa-gp-compat dt {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.sa-gp-compat dt i {
  font-size: 0.8rem;
  color: rgb(var(--cl-accent));
}

/* ── buyer guide: rail connecting the steps ── */
.sa-gp-steps { position: relative; }

.sa-gp-steps li { position: relative; }

.sa-gp-steps li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 2.25rem;
  top: 100%;
  width: 1px;
  height: 1rem;
  background: linear-gradient(to bottom,
    rgba(var(--cl-accent), 0.45), rgba(var(--cl-accent), 0.08));
}

.sa-gp-step-n {
  transition: border-color 260ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sa-gp-steps li:hover .sa-gp-step-n {
  border-color: rgba(var(--cl-accent), 0.6);
  box-shadow: 0 0 16px rgba(var(--cl-accent), 0.16);
}

/* Feature rows alternate so three of them in a row do not read as a list. */
@media (min-width: 900px) {
  .sa-gp-feature:nth-of-type(even) .sa-gp-feature-media { order: 2; }
  .sa-gp-feature:nth-of-type(even) .sa-gp-feature-text  { order: 1; }
}

/* number sits inline in the feature row, not absolutely in the corner */
.sa-gp-feature-text {
  position: relative;
}

.sa-gp-feature-text .sa-gp-block-n {
  position: static;
  display: block;
  margin-bottom: 0.35rem;
  font-size: 1.1rem;
}

.sa-gp-feature-text h3 { padding-right: 0; }

/* ══════════════════════════════════════════
   PRODUCT PAGES (templates/product.njk)
   The sections ported from the old Shopify product pages, rendered below
   SellAuth's own buy box. Typography, compat table and feature rows reuse
   the .sa-gp-* language from the landing pages so both read as one shop.
   Only the feature explorer is new.
   ══════════════════════════════════════════ */

.sa-pp {
  display: block;
}

/* ── feature columns ──
   One column per group, every line visible. The old Shopify page listed them
   this way and the operator wants to read the whole list without clicking. */
.sa-pp-fx-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

/* the counted total is the one live number in the section */
.sa-pp-fx-total {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgb(var(--cl-t-muted));
}

.sa-pp-fx-total .sa-live-count {
  font-family: var(--font-heading, inherit);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  text-transform: none;
  color: rgb(var(--cl-t-primary));
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sa-pp-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  margin-top: 1.25rem;
}

@media (min-width: 640px) {
  .sa-pp-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .sa-pp-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.sa-pp-col {
  padding: 1.1rem;
  border-radius: var(--radius-card, 18px);
  border: 1px solid rgba(var(--cl-accent), 0.28);
  background-color: #000;
  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.6),
    0 0 18px rgba(var(--cl-accent), 0.1),
    inset 0 0 26px rgba(var(--cl-accent), 0.035);
  transition:
    border-color 260ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sa-pp-col:hover {
  border-color: rgba(var(--cl-accent), 0.55);
  box-shadow:
    0 22px 52px rgba(0, 0, 0, 0.75),
    0 0 26px rgba(var(--cl-accent), 0.16),
    inset 0 0 34px rgba(var(--cl-accent), 0.055);
}

.sa-pp-col-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sa-pp-col-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: var(--radius-input, 12px);
  border: 1px solid rgba(var(--cl-accent), 0.22);
  font-size: 0.85rem;
  color: rgb(var(--cl-accent));
}

.sa-pp-col-head h3 {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-heading, inherit);
  font-size: 1rem;
  font-weight: 700;
  color: rgb(var(--cl-t-primary));
}

.sa-pp-col-head em {
  flex-shrink: 0;
  font-style: normal;
  padding: 0.05rem 0.45rem;
  border-radius: 9999px;
  border: 1px solid rgba(var(--cl-accent), 0.16);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  color: rgb(var(--cl-t-muted));
}

.sa-pp-col-desc {
  margin-top: 0.85rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: rgb(var(--cl-t-muted));
}

.sa-pp-col-list {
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
}

.sa-pp-col-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: rgb(var(--cl-t-primary));
}

/* ── the impulse dot ──
   Replaces the checkmark. Each row pulses on its own offset, so a column reads
   as a running signal list rather than a static bullet list. The ring is a
   pseudo element so the dot itself never moves. */
.sa-pp-dot {
  position: relative;
  flex-shrink: 0;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 9999px;
  background-color: rgb(var(--cl-accent));
  box-shadow: 0 0 8px rgba(var(--cl-accent), 0.16);
}

.sa-pp-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  border: 1px solid rgb(var(--cl-accent));
  opacity: 0;
  animation: sa-pp-pulse 2.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  animation-delay: calc(var(--i, 0) * 160ms);
}

@keyframes sa-pp-pulse {
  0%   { transform: scale(1);   opacity: 0.5; }
  35%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sa-pp-dot::after { animation: none; }
}

/* ── text-only story block ──
   The opener of most story sections has no screenshot on the old site. It
   stays a plain column so it reads as the lead, not as a broken feature row. */
.sa-pp-lead {
  max-width: 74ch;
  margin-top: 1.6rem;
}

.sa-pp-lead h3 {
  font-family: var(--font-heading, inherit);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: rgb(var(--cl-t-primary));
}

.sa-pp-lead p {
  margin-top: 0.7rem;
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgb(var(--cl-t-muted));
}

/* ── link to the game guide ── */
.sa-pp-guide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.35rem 1.5rem;
  border-radius: var(--radius-card, 18px);
  border: 1px solid rgba(var(--cl-accent), 0.28);
  background-color: #000;
  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.6),
    0 0 18px rgba(var(--cl-accent), 0.1),
    inset 0 0 26px rgba(var(--cl-accent), 0.035);
  transition:
    border-color 260ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sa-pp-guide:hover {
  border-color: rgba(var(--cl-accent), 0.55);
  transform: translateY(-3px);
  box-shadow:
    0 22px 52px rgba(0, 0, 0, 0.75),
    0 0 26px rgba(var(--cl-accent), 0.16),
    inset 0 0 34px rgba(var(--cl-accent), 0.055);
}

.sa-pp-guide strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
  color: rgb(var(--cl-t-primary));
}

.sa-pp-guide em {
  display: block;
  max-width: 62ch;
  margin-top: 0.2rem;
  font-style: normal;
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgb(var(--cl-t-muted));
}

.sa-pp-guide-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  color: rgb(var(--cl-accent));
}

.sa-pp-guide-cta svg {
  width: 0.95rem;
  height: 0.95rem;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sa-pp-guide:hover .sa-pp-guide-cta svg { transform: translateX(3px); }

/* the product page already carries the buy box, so the first ported section
   needs the rule above it to sit clear of the component output */
.sa-pp > .sa-gp-section:first-child { border-top-color: rgba(var(--cl-accent), 0.14); }

/* ══════════════════════════════════════════
   GAME CARDS — body
   The cards read as empty when the price line is missing, so the price is
   treated as the figure it is: small label over a large number, with a rule
   that grows on hover. Counts and prices are computed in the template from
   the product list; the platform exposes neither on a category.
   ══════════════════════════════════════════ */

.sa-pcat-title {
  transition: color 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sa-pcat-card:hover .sa-pcat-title {
  color: rgb(var(--cl-accent));
}

/* hairline under the name, grows out of the left edge on hover */
.sa-pcat-rule {
  display: block;
  width: 1.75rem;
  height: 1px;
  margin: 0.7rem 0;
  background-color: rgba(var(--cl-accent), 0.35);
  transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sa-pcat-card:hover .sa-pcat-rule {
  width: 3.5rem;
  background-color: rgb(var(--cl-accent));
}

/* one line of plain description, then three badges naming real features —
   without these the body was a name over a price and read as an empty box */
.sa-pcat-note {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: rgb(var(--cl-t-muted));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sa-pcat-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.sa-pcat-badges li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background-color: #000;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgb(var(--cl-t-muted));
  transition: border-color 260ms cubic-bezier(0.22, 1, 0.36, 1),
    color 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sa-pcat-badges li i {
  font-size: 0.65rem;
  color: rgba(var(--cl-accent), 0.55);
}

.sa-pcat-card:hover .sa-pcat-badges li i {
  color: rgb(var(--cl-accent));
}

.sa-pcat-card:hover .sa-pcat-badges li {
  border-color: rgba(var(--cl-accent), 0.18);
  color: rgb(var(--cl-t-primary));
}

.sa-pcat-price {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0;
  margin-top: auto;
}

.sa-pcat-from {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgb(var(--cl-t-muted));
}

.sa-pcat-price-val {
  font-family: var(--font-heading, inherit);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: rgb(var(--cl-t-primary));
}

/* ══════════════════════════════════════════
   LANDING PAGE HERO — entrance on load
   The scroll reveal that animates the rest of the page never fires for the
   hero, because the hero is already in view when the page opens. These run
   once on load with the same fade-and-rise curve, staggered through --d.
   ══════════════════════════════════════════ */

.sa-gp-in {
  opacity: 0;
  animation: sa-gp-enter 620ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--d, 0) * 85ms);
}

@keyframes sa-gp-enter {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* the key art comes up out of black rather than being there from frame one */
.sa-gp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #000;
  pointer-events: none;
  animation: sa-gp-art-in 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes sa-gp-art-in {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* the accent half of the headline lights up once the line has landed */
.sa-gp-title-accent {
  animation: sa-gp-accent-in 700ms cubic-bezier(0.22, 1, 0.36, 1) 520ms both;
}

@keyframes sa-gp-accent-in {
  from { text-shadow: none; }
  40%  { text-shadow: 0 0 18px rgba(var(--cl-accent), 0.16); }
  to   { text-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sa-gp-in {
    opacity: 1;
    animation: none;
  }

  .sa-gp-hero::before,
  .sa-gp-title-accent {
    animation: none;
  }

  .sa-gp-hero::before { display: none; }
}


/* ══════════════════════════════════════════
   LEGAL PAGES (templates/terms.njk, refund-policy.njk, privacy-policy.njk)
   Structure taken from the old tkz-legal section, which the operator kept:
   intro with a last-updated line, then a sticky numbered nav beside numbered
   chapters. Same black surfaces and red edges as everything else.
   ══════════════════════════════════════════ */

/* a legal page needs a header, not a stage */
.sa-lg .sa-gp-hero {
  min-height: 380px;
}

@media (min-width: 1024px) {
  .sa-lg .sa-gp-hero { min-height: 420px; }
}

.sa-lg-intro {
  max-width: 70ch;
  padding-bottom: 2rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sa-lg-updated {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.7rem;
  border-radius: 9999px;
  border: 1px solid rgba(var(--cl-accent), 0.28);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgb(var(--cl-t-muted));
}

.sa-lg-introtext p {
  margin-top: 0.9rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgb(var(--cl-t-muted));
}

.sa-lg-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 1000px) {
  .sa-lg-cols { grid-template-columns: 15rem minmax(0, 1fr); gap: 3rem; }
}

/* ── on this page ── */
.sa-lg-nav-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgb(var(--cl-t-muted));
}

@media (min-width: 1000px) {
  .sa-lg-nav {
    position: sticky;
    top: 7rem;
    align-self: start;
    max-height: calc(100vh - 9rem);
    overflow-y: auto;
  }
}

.sa-lg-nav-list {
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.sa-lg-nav-list a {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.4rem 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: rgb(var(--cl-t-muted));
  transition: color 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sa-lg-nav-list a:hover {
  color: rgb(var(--cl-t-primary));
}

.sa-lg-nav-num {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(var(--cl-accent), 0.55);
}

.sa-lg-nav-list a:hover .sa-lg-nav-num {
  color: rgb(var(--cl-accent));
}

/* ── chapters ── */
.sa-lg-body {
  min-width: 0;
}

.sa-lg-chapter {
  padding: 1.25rem;
  border-radius: var(--radius-card, 18px);
  border: 1px solid rgba(var(--cl-accent), 0.16);
  background-color: #000;
  scroll-margin-top: 7rem;
}

.sa-lg-chapter + .sa-lg-chapter {
  margin-top: 1rem;
}

.sa-lg-chapter h2 {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  font-family: var(--font-heading, inherit);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  color: rgb(var(--cl-t-primary));
}

.sa-lg-num {
  flex-shrink: 0;
  font-size: 0.85rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: rgb(var(--cl-accent));
}

.sa-lg-text p {
  margin-top: 0.85rem;
  max-width: 74ch;
  font-size: 0.9rem;
  line-height: 1.72;
  color: rgb(var(--cl-t-muted));
}

.sa-lg-text ul,
.sa-lg-text ol {
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: sa-lg-item;
}

.sa-lg-text li {
  position: relative;
  max-width: 74ch;
  padding-left: 1.4rem;
  margin-top: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgb(var(--cl-t-muted));
}

.sa-lg-text ul > li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.62rem;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 9999px;
  background-color: rgb(var(--cl-accent));
}

.sa-lg-text ol > li {
  counter-increment: sa-lg-item;
}

.sa-lg-text ol > li::before {
  content: counter(sa-lg-item);
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgb(var(--cl-accent));
}

.sa-lg-text strong {
  font-weight: 600;
  color: rgb(var(--cl-t-primary));
}

.sa-lg-text a,
.sa-lg-introtext a {
  color: rgb(var(--cl-accent));
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(var(--cl-accent), 0.35);
  transition: text-decoration-color 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sa-lg-text a:hover,
.sa-lg-introtext a:hover {
  text-decoration-color: rgb(var(--cl-accent));
}

/* ══════════════════════════════════════════
   GAME TILES (homepage categories section)
   The key art is the whole card. A darkening layer keeps the name readable on
   bright art, and a gradient at the foot stops the text from sitting on top of
   detail. No body, no price row, no arrow - the art is the recognition.
   ══════════════════════════════════════════ */

.sa-gtile {
  position: relative;
  display: block;
  /* the category key art is 16:9, so the tile is too and nothing is cropped */
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(var(--cl-accent), 0.28);
  background-color: #000;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6);
  transition:
    border-color 320ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sa-gtile:hover {
  border-color: rgba(var(--cl-accent), 0.55);
  transform: translateY(-3px);
  box-shadow:
    0 20px 44px rgba(0, 0, 0, 0.75),
    0 0 22px rgba(var(--cl-accent), 0.16);
}

.sa-gtile-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the art is a backdrop for the name, so it sits back a step */
  opacity: 0.72;
  transform: scale(1.005);
  transition:
    opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sa-gtile:hover .sa-gtile-img {
  opacity: 0.9;
  transform: scale(1.05);
}

.sa-gtile-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(var(--cl-accent), 0.35);
}

.sa-gtile-ph svg {
  width: 2rem;
  height: 2rem;
}

/* reaches high enough that a bright sky behind the name still goes dark */
.sa-gtile-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.72) 22%,
    rgba(0, 0, 0, 0.28) 52%,
    rgba(0, 0, 0, 0.12) 100%
  );
}

.sa-gtile-name {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.9rem;
  margin: 0;
  font-family: var(--font-heading, inherit);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
  transition: color 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sa-gtile:hover .sa-gtile-name {
  color: rgb(var(--cl-accent));
}

@media (min-width: 1024px) {
  .sa-gtile-name { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sa-gtile,
  .sa-gtile-img {
    transition: none;
  }

  .sa-gtile:hover {
    transform: none;
  }

  .sa-gtile:hover .sa-gtile-img {
    transform: none;
  }
}

/* ══════════════════════════════════════════
   PRODUCT GALLERY — size cap
   Every product photo is square. At half the content width that is a ~550px
   tall block that pushes the price and the buy button below the fold, so the
   gallery gets a hard cap instead. Every variant of the snippet carries
   .sa-product-gallery on its root, so one rule covers all of them.
   ══════════════════════════════════════════ */

.sa-product-gallery {
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .sa-product-gallery {
    max-width: 500px;
    margin-inline: 0;
  }
}

/* ══════════════════════════════════════════
   HOMEPAGE HERO — key art
   The art from the old Shopify homepage, layered the same way the game pages
   layer theirs: two gradients so the type never fights the picture, and a tall
   bottom fade so there is no seam against the section below.

   It sits in CSS rather than in the hero component's background_image field,
   because that field routes through a server-side imageUrl filter whose input
   format could not be verified from here. Swapping the picture means swapping
   the url below.
   ══════════════════════════════════════════ */

/* Runs under the sticky header, same as the game page heroes: pulled up by the
   measured header height and padded back down, so the art reaches the very top
   instead of stopping at the header and letting the page pattern show. */
.sa-hero--centered {
  margin-top: calc(-1 * var(--gp-pull, 5.5rem));
  padding-top: var(--gp-pull, 5.5rem);
}

.sa-hero--centered::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    /* Top down: a dark band behind the header that fades out into the art,
       the art at its lightest around a third down, then back to solid black
       for the run-out into the section below. */
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.88) 0%,
      rgba(0, 0, 0, 0.74) 8%,
      rgba(0, 0, 0, 0.5) 18%,
      rgba(0, 0, 0, 0.34) 34%,
      rgba(0, 0, 0, 0.55) 64%,
      #000 100%
    ),
    linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0.7) 100%),
    url('https://api.sellauth.com/storage/images/1101318.webp');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  animation: sa-hero-art-in 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes sa-hero-art-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* the run-out into the first section, same shape as on the game pages */
.sa-hero--centered::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  height: 200px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.3) 44%,
    rgba(0, 0, 0, 0.75) 76%,
    #000 100%
  );
}

/* the copy has to sit above both layers */
.sa-hero--centered > .wrap {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .sa-hero--centered::before { animation: none; }
}

/* ══════════════════════════════════════════
   ESP DEMO — cheat menu chrome
   The toggles sit in a window that reads like an in-game menu: title bar with
   the brand, one tab, window dots, and the rows underneath. Same red edge and
   black surface as every other card, so it belongs to the shop rather than
   looking like a screenshot pasted in.
   ══════════════════════════════════════════ */

.sa-espmenu {
  margin-top: 0.9rem;
  border-radius: var(--radius-input, 12px);
  border: 1px solid rgba(var(--cl-accent), 0.28);
  background-color: #000;
  overflow: hidden;
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.6),
    inset 0 0 22px rgba(var(--cl-accent), 0.035);
}

.sa-espmenu-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.65rem;
  border-bottom: 1px solid rgba(var(--cl-accent), 0.22);
  /* a hair of lift on the bar, the way a title bar sits above its body */
  background-image: linear-gradient(
    180deg,
    rgba(var(--cl-accent), 0.1) 0%,
    rgba(var(--cl-accent), 0.03) 100%
  );
}

.sa-espmenu-title {
  font-family: var(--font-heading, inherit);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(var(--cl-accent));
  text-shadow: 0 0 12px rgba(var(--cl-accent), 0.16);
}

/* the one open tab, drawn as selected */
.sa-espmenu-tab {
  padding: 0.12rem 0.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(var(--cl-accent), 0.22);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(var(--cl-t-muted));
}

.sa-espmenu-dots {
  display: flex;
  gap: 0.25rem;
  margin-left: auto;
}

.sa-espmenu-dots i {
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 9999px;
  background-color: rgba(var(--cl-t-primary), 0.22);
}

.sa-espmenu-dots i:last-child {
  background-color: rgba(var(--cl-accent), 0.55);
}

/* inside the window the rows are menu entries, not standalone chips */
.sa-espmenu .sa-esp-switches {
  margin-top: 0;
  gap: 0;
  padding: 0.35rem;
}

.sa-espmenu .sa-esp-switch {
  border-color: transparent;
  background-color: transparent;
  border-radius: var(--radius-input, 8px);
}

.sa-espmenu .sa-esp-switch:hover {
  border-color: transparent;
  background-color: rgba(var(--cl-accent), 0.06);
}

/* ══════════════════════════════════════════
   LOGO
   Beide stehen im Markup auf h-8. Die Groesse gehoert hierher, damit sie an
   einer Stelle steht und nicht in zwei Komponenten.
   ══════════════════════════════════════════ */

.sa-navbar-logo img {
  height: 2.25rem;      /* statt 2rem */
  margin-left: 0.35rem; /* ruecke ein Stueck von der Pillenkante weg */
}

.sa-footer-brand img {
  height: 2.75rem;      /* im Footer ist mehr Platz */
}

/* ══════════════════════════════════════════
   COUPON POPUP
   Schwarzes Fenster, rote Kante, Titelleiste wie das Cheat-Menue auf der
   Startseite (§22). Das Prozentzeichen traegt die Aussage, der Code steht in
   einem eingelassenen Feld darunter und ist mit einem Klick kopiert.
   ══════════════════════════════════════════ */

.sa-cpn-veil {
  background-color: var(--cl-overlay);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* solange das Fenster offen ist, scrollt die Seite dahinter nicht weg */
html.sa-cpn-lock,
html.sa-cpn-lock body {
  overflow: hidden;
}

.sa-cpn-card {
  max-width: 25rem;
  margin: 0 auto;
  border: 1px solid rgba(var(--cl-accent), 0.28);
  border-radius: var(--radius-card, 12px);
  background-color: #000;
  overflow: hidden;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.72),
    0 0 26px rgba(var(--cl-accent), 0.14),
    inset 0 0 34px rgba(var(--cl-accent), 0.04);
}

/* Haarlinie oben, in der Mitte hell — dieselbe Figur wie die Footer-Trennung */
.sa-cpn-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--cl-accent), 0.35) 20%,
    rgba(255, 255, 255, 0.75) 50%,
    rgba(var(--cl-accent), 0.35) 80%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* ── Titelleiste ── */
.sa-cpn-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid rgba(var(--cl-accent), 0.22);
  background-image: linear-gradient(
    180deg,
    rgba(var(--cl-accent), 0.1) 0%,
    rgba(var(--cl-accent), 0.03) 100%
  );
}

.sa-cpn-brand {
  font-family: var(--ff-heading, inherit);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(var(--cl-accent));
  text-shadow: 0 0 12px rgba(var(--cl-accent), 0.18);
}

.sa-cpn-tab {
  padding: 0.12rem 0.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(var(--cl-accent), 0.22);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(var(--cl-t-muted));
}

.sa-cpn-dots {
  display: flex;
  gap: 0.25rem;
  /* das Kreuz sitzt rechts aussen, die Punkte davor */
  margin-left: auto;
  margin-right: 1.6rem;
}

.sa-cpn-dots i {
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 9999px;
  background-color: rgba(var(--cl-t-primary), 0.22);
}

.sa-cpn-dots i:last-child {
  background-color: rgba(var(--cl-accent), 0.55);
}

.sa-cpn-x {
  position: absolute;
  top: 0.45rem;
  right: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  color: rgb(var(--cl-t-muted));
  transition: color var(--dur, 200ms) ease, background-color var(--dur, 200ms) ease;
  z-index: 3;
}

.sa-cpn-x svg {
  width: 0.9rem;
  height: 0.9rem;
}

.sa-cpn-x:hover {
  color: rgb(var(--cl-t-primary));
  background-color: rgba(var(--cl-accent), 0.12);
}

/* ── Inhalt ── */
.sa-cpn-body {
  position: relative;
  padding: 1.6rem 1.5rem 1.4rem;
  text-align: center;
}

/* Umgebungslicht hinter der Zahl, damit die Flaeche schwarz bleiben kann */
.sa-cpn-body::before {
  content: '';
  position: absolute;
  top: -2.5rem;
  left: 50%;
  width: 17rem;
  height: 11rem;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at center,
    rgba(var(--cl-accent), 0.1) 0%,
    rgba(var(--cl-accent), 0.035) 45%,
    transparent 72%
  );
  pointer-events: none;
}

.sa-cpn-body > * {
  position: relative;
}

.sa-cpn-logo {
  height: 2.5rem;
  width: auto;
  margin: 0 auto 0.9rem;
}

/* ── die Zahl ── */
.sa-cpn-figure {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.sa-cpn-pct {
  font-family: var(--ff-heading, inherit);
  font-size: 3.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgb(var(--cl-accent));
  /* nur so viel Schein, dass die Zahl vom Schwarz abhebt */
  text-shadow: 0 0 18px rgba(var(--cl-accent), 0.22);
}

.sa-cpn-off {
  font-family: var(--ff-heading, inherit);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgb(var(--cl-t-muted));
}

.sa-cpn-title {
  font-family: var(--ff-heading, inherit);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.25;
  color: rgb(var(--cl-t-primary));
}

.sa-cpn-sub {
  margin-top: 0.45rem;
  font-size: 0.83rem;
  line-height: 1.55;
  color: rgb(var(--cl-t-muted));
}

/* ── Codefeld ── */
.sa-cpn-code {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  margin-top: 1.1rem;
  padding: 0.7rem 0.85rem;
  border: 1px dashed rgba(var(--cl-accent), 0.42);
  border-radius: var(--radius-input, 8px);
  background-color: #000;
  cursor: pointer;
  transition: border-color var(--dur, 200ms) ease, box-shadow var(--dur, 200ms) ease;
}

.sa-cpn-code:hover {
  border-color: rgba(var(--cl-accent), 0.7);
  box-shadow: 0 0 20px rgba(var(--cl-accent), 0.12);
}

.sa-cpn-code.is-copied {
  border-style: solid;
  border-color: rgba(var(--cl-success), 0.6);
}

.sa-cpn-code-label {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--cl-t-muted));
}

.sa-cpn-code-val {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  color: rgb(var(--cl-t-primary));
}

.sa-cpn-code-act svg {
  width: 1rem;
  height: 1rem;
  color: rgb(var(--cl-t-muted));
}

.sa-cpn-code.is-copied .sa-cpn-code-act svg {
  color: rgb(var(--cl-success));
}

.sa-cpn-copied {
  margin-top: 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgb(var(--cl-success));
}

.sa-cpn-hint {
  margin-top: 0.55rem;
  font-size: 0.72rem;
  color: rgba(var(--cl-t-muted), 0.85);
}

/* ── Aktionen ── */
.sa-cpn-actions {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 1.1rem;
}

.sa-cpn-cta {
  display: block;
  padding: 0.72rem 1.25rem;
  border-radius: var(--radius-button, 8px);
  background-color: rgb(var(--cl-accent));
  color: rgb(var(--cl-on-accent));
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: filter var(--dur, 200ms) ease, box-shadow var(--dur, 200ms) ease;
  box-shadow: 0 0 22px rgba(var(--cl-accent), 0.22);
}

.sa-cpn-cta:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 30px rgba(var(--cl-accent), 0.34);
}

.sa-cpn-later {
  padding: 0.5rem;
  font-size: 0.78rem;
  color: rgb(var(--cl-t-muted));
  transition: color var(--dur, 200ms) ease;
}

.sa-cpn-later:hover {
  color: rgb(var(--cl-t-primary));
}

@media (max-width: 480px) {
  .sa-cpn-body {
    padding: 1.35rem 1.15rem 1.2rem;
  }

  .sa-cpn-pct {
    font-size: 2.9rem;
  }
}