/*
 * Enter any custom CSS here.
 * This file will not be overwritten by theme updates.
 *
 * ── Semantic class hooks (sa-*) ────────────────────────────────────────────
 * Every section, snippet and key element carries a stable `sa-` class you can
 * target with plain CSS — no Tailwind rebuild needed. These classes ship with
 * NO styles of their own; they exist purely as selectors for you to hook onto.
 *
 * Page scope   body.sa-tpl-<template>      e.g. .sa-tpl-product, .sa-tpl-shop
 *              body.sa-no-product-images / .sa-no-category-images when the
 *              matching theme setting is off
 * Chrome       .sa-header .sa-navbar .sa-footer
 *              .sa-navbar-link .sa-navbar-logo .sa-navbar-cart .sa-footer-link
 * Sections     .sa-<component>             e.g. .sa-hero, .sa-features, .sa-faq
 *   variant    .sa-<component>--<variant>  e.g. .sa-hero--split-media
 *   inner      .sa-<component>-title / -subtitle / -eyebrow / -media /
 *              -items / -item / -actions / -link / -price / -badge / -icon
 * Primitives   .sa-btn (+ .sa-btn--<variant>), .sa-section-header
 *              (.sa-section-title / -eyebrow / -subtitle),
 *              .sa-product-card (+ .sa-product-card--<style>,
 *              .sa-product-card-title / -price / -stock / -status / -badges),
 *              .sa-product-form + .sa-add-to-cart, .sa-product-gallery,
 *              .sa-cart-panel + .sa-cart-item, .sa-searchbar, .sa-pagination,
 *              .sa-breadcrumbs, .sa-toasts + .sa-toast, .sa-feedback-card
 *
 * Example — bigger hero heading only on the product page:
 *   .sa-tpl-product .sa-hero-title { font-size: 3rem; }
 * ───────────────────────────────────────────────────────────────────────────
*/

/* ========================================================================== */
/* Brand layer — purple · white · black                                       */
/*                                                                            */
/* Colors, fonts and radii come from the theme settings (Global properties).  */
/* Everything below is derived from those tokens, so changing the accent in   */
/* the editor re-tints the whole design.                                      */
/* ========================================================================== */

:root {
  --v-accent-hi: color-mix(in oklch, rgb(var(--cl-accent)), #fff 16%);
  --v-accent-lo: color-mix(in oklch, rgb(var(--cl-accent)), #000 32%);
  --v-accent-grad: linear-gradient(145deg, var(--v-accent-hi) 0%, rgb(var(--cl-accent)) 52%, var(--v-accent-lo) 100%);
  /* Accent used as text. The brand purple is very dark, so on black it is
     lifted to a lighter tint of the same hue (see the dark block below). */
  --v-ink: rgb(var(--cl-accent));
  --v-glow: rgba(var(--cl-accent), 0.35);
  --v-grad-text: linear-gradient(100deg, rgb(var(--cl-accent)) 15%, color-mix(in oklch, rgb(var(--cl-accent)), #fff 34%) 95%);
  --v-ease: cubic-bezier(0.22, 0.8, 0.24, 1);
}

[data-scheme="dark"] {
  --v-ink: color-mix(in oklch, rgb(var(--cl-accent)), #fff 46%);
  --v-glow: rgba(var(--cl-accent), 0.6);
  --v-grad-text: linear-gradient(100deg, color-mix(in oklch, rgb(var(--cl-accent)), #fff 72%) 0%, color-mix(in oklch, rgb(var(--cl-accent)), #fff 36%) 100%);
}

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */

html {
  scroll-padding-top: 7rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--cl-accent), 0.6) transparent;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background-color: rgb(var(--cl-accent));
  color: #fff;
}

:where(a, button, summary, [role="button"]):focus-visible {
  outline: 2px solid var(--v-ink);
  outline-offset: 2px;
}

h1, h2, h3, h4 {
  letter-spacing: -0.015em;
}

.text-display,
.text-h1 {
  letter-spacing: -0.03em;
}

.text-h2 {
  letter-spacing: -0.025em;
}

/* ------------------------------------------------------------------ */
/* Accent legibility on black                                          */
/* ------------------------------------------------------------------ */

[data-scheme="dark"] :is(.text-accent-500, .text-accent-400),
[data-scheme="dark"] :is(.hover\:text-accent-500, .hover\:text-accent-600):hover,
[data-scheme="dark"] .group:hover .group-hover\:text-accent-500 {
  color: var(--v-ink);
}

[data-scheme="dark"] .bg-accent-500\/5 {
  background-color: rgba(var(--cl-accent), 0.14);
}

[data-scheme="dark"] :is(.bg-accent-500\/10, .hover\:bg-accent-500\/10:hover) {
  background-color: rgba(var(--cl-accent), 0.24);
}

[data-scheme="dark"] .bg-accent-500\/15 {
  background-color: rgba(var(--cl-accent), 0.3);
}

[data-scheme="dark"] :is(.border-accent-500\/25, .border-accent-500\/30) {
  border-color: rgba(var(--cl-accent), 0.55);
}

[data-scheme="dark"] .\!border-accent-500\/60 {
  border-color: color-mix(in oklch, var(--v-ink), transparent 35%) !important;
}

[data-scheme="dark"] .editor .e-link {
  color: var(--v-ink);
}

/* Highlighted title words (*like this*) get a brand gradient */

.hl-accent .mk {
  color: var(--v-ink);
  background-image: var(--v-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */

.sa-btn {
  font-weight: 600;
  letter-spacing: -0.01em;
}

:is(a, button).bg-accent-500.text-on-accent,
.sa-btn--primary.sa-btn--solid {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 60%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 10px 28px -10px var(--v-glow);
  transition: background-color var(--dur) ease, box-shadow var(--dur) ease, transform var(--dur) ease;
}

:is(a, button).bg-accent-500.text-on-accent:not(:disabled):hover,
.sa-btn--primary.sa-btn--solid:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 2px 4px rgba(0, 0, 0, 0.2),
    0 16px 36px -12px var(--v-glow);
}

/* On black, hovering lightens the purple instead of darkening it */
[data-scheme="dark"] :is(.hover\:bg-accent-600:hover, .hover\:enabled\:bg-accent-600:enabled:hover) {
  background-color: var(--v-accent-hi);
}

.sa-btn--secondary.sa-btn--outline {
  background-color: rgba(var(--cl-surface), 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.sa-btn--secondary:is(.sa-btn--outline, .sa-btn--solid):hover {
  border-color: rgba(var(--cl-t-primary), 0.3);
}

/* ------------------------------------------------------------------ */
/* Announcement + navbar                                               */
/* ------------------------------------------------------------------ */

.sa-announcement {
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
}

.sa-announcement--accent {
  background-image: linear-gradient(90deg, var(--v-accent-lo), rgb(var(--cl-accent)) 30%, rgb(var(--cl-accent)) 70%, var(--v-accent-lo));
}

.sa-announcement-fade {
  display: grid;
}

.sa-announcement-fade > * {
  grid-area: 1 / 1;
}

.sa-navbar--floating-pill > div > div,
:is(.sa-navbar--classic, .sa-navbar--centered-logo, .sa-navbar--two-row) > div:first-child {
  background-color: rgba(var(--cl-background), 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
}

.sa-navbar--floating-pill > div > div {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 40px -22px rgba(0, 0, 0, 0.55);
}

.sa-navbar-logo span {
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: 1.0625rem;
}

.sa-navbar-link {
  font-weight: 500;
}

/* Discord button in the navbar (navbar "Discord Button Link" setting) */
.nav-discord {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.25rem;
  padding: 0 0.7rem;
  border: 1px solid rgba(var(--cl-accent), 0.4);
  border-radius: var(--radius-button);
  background-color: rgba(var(--cl-accent), 0.14);
  color: rgb(var(--cl-t-primary));
  font-size: 0.875rem;
  font-weight: 600;
  transition: background-color var(--dur) ease, border-color var(--dur) ease, color var(--dur) ease;
}

.nav-discord i {
  color: var(--v-ink);
  font-size: 1rem;
  transition: color var(--dur) ease;
}

.nav-discord:hover {
  border-color: rgb(var(--cl-accent));
  background-color: rgb(var(--cl-accent));
  color: #fff;
}

.nav-discord:hover i {
  color: #fff;
}

.nav-discord-label {
  display: none;
}

@media (min-width: 640px) {
  .nav-discord {
    padding: 0 0.9rem;
  }

  .nav-discord-label {
    display: inline;
  }
}

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* ------------------------------------------------------------------ */

.sa-hero {
  isolation: isolate;
}

.sa-hero--centered .wrap > .max-w-2xl {
  max-width: 60rem;
}

.sa-hero-title {
  font-size: clamp(2.5rem, 1.3rem + 5.2vw, 4.75rem);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.sa-hero-subtitle {
  max-width: 38rem;
  font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.25rem);
  line-height: 1.6;
}

.sa-hero--centered .sa-hero-subtitle {
  margin-inline: auto;
}

.sa-hero-eyebrow.rounded-badge {
  border-color: rgba(var(--cl-accent), 0.32);
  background-color: rgba(var(--cl-accent), 0.08);
  color: rgb(var(--cl-t-primary));
  font-weight: 500;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.sa-hero-eyebrow.rounded-badge:not(:has(.bg-accent-500)) {
  padding-left: 0.875rem;
}

.sa-hero-eyebrow.rounded-badge:not(:has(.bg-accent-500))::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: var(--v-ink);
  box-shadow: 0 0 0 3px rgba(var(--cl-accent), 0.2), 0 0 12px var(--v-glow);
}

.sa-hero .gap-x-4.text-xs {
  column-gap: 1.5rem;
  font-size: 0.875rem;
}

.sa-hero .hero-bg-glow {
  top: -20rem;
  width: 68rem;
  height: 42rem;
  margin-left: -34rem;
  background: radial-gradient(closest-side, rgba(var(--cl-accent), 0.6), rgba(var(--cl-accent), 0.2) 55%, transparent 100%);
  filter: blur(80px);
}

[data-scheme="light"] .sa-hero .hero-bg-glow {
  opacity: 0.5;
}

.sa-hero .hero-bg-grid {
  background-size: 64px 64px;
  background-image:
    linear-gradient(rgba(var(--cl-t-primary), 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--cl-t-primary), 0.06) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 18%, #000 20%, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 62% at 50% 18%, #000 20%, transparent 72%);
}

/* Glowing horizon line under the hero */
.sa-hero::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(64rem, 90%);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(var(--cl-accent), 0.75), transparent);
  box-shadow: 0 0 22px 1px rgba(var(--cl-accent), 0.45);
  pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Section headers                                                     */
/* ------------------------------------------------------------------ */

.sa-section-header {
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.sa-section-title.text-h2 {
  font-size: clamp(1.875rem, 1.1rem + 2.6vw, 2.875rem);
  line-height: 1.08;
  letter-spacing: -0.028em;
}

.sa-section-subtitle {
  font-size: 1.0625rem;
  line-height: 1.65;
  text-wrap: balance;
}

/* Split-highlights: keep the intro text close to its title */
.sa-features--split-highlights .sa-section-header {
  margin-bottom: 2rem;
}

.sa-section-eyebrow.rounded-badge {
  border-color: rgba(var(--cl-accent), 0.28);
  background-color: rgba(var(--cl-accent), 0.07);
  color: rgb(var(--cl-t-primary));
  font-weight: 600;
  letter-spacing: 0.01em;
}

.sa-section-eyebrow.rounded-badge > span {
  box-shadow: 0 0 0 3px rgba(var(--cl-accent), 0.18);
}

[data-scheme="dark"] .sa-section-eyebrow.rounded-badge > span {
  background-color: var(--v-ink);
}

/* ------------------------------------------------------------------ */
/* Cards                                                               */
/* ------------------------------------------------------------------ */

[data-scheme="dark"] :is(.sa-product-card, .sa-features-item.rounded-card, .sa-features--split-highlights .rounded-card, .sa-stats-items.rounded-card, .sa-stats-item.rounded-card, .sa-faq-item, .sa-feedback-card--classic, .sa-feedback-card--glow, .sa-faq-support-card) {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 45%);
}

.sa-product-card,
.sa-features-item.rounded-card {
  transition: transform 0.3s var(--v-ease), border-color 0.3s ease, box-shadow 0.3s ease;
}

.sa-product-card:hover,
.sa-features-item.rounded-card:hover {
  border-color: rgba(var(--cl-accent), 0.45);
  box-shadow: 0 18px 50px -24px var(--v-glow);
}

/* Icon chips become solid brand tiles (white icon on purple) */
.sa-features-item .bg-accent-500\/10,
.sa-steps .sa-steps-icon,
.sa-faq-support-card .bg-accent-500\/10 {
  background-image: var(--v-accent-grad);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 20px -8px var(--v-glow);
}

/* Steps */
.sa-steps--grid .sa-steps-item .h-px {
  background: linear-gradient(90deg, rgba(var(--cl-accent), 0.65), rgba(var(--cl-t-primary), 0.08) 70%);
}

.sa-steps--grid .tabular-nums {
  letter-spacing: 0.08em;
}

.sa-steps-item h3 {
  font-weight: 600;
}

/* Stats */
.sa-stats .text-h2 {
  font-size: clamp(2.25rem, 1.6rem + 2vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  background-image: var(--v-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sa-stats-item {
  padding-block: 1.75rem;
}

/* Reviews — brand-colored stars; three roomier columns on wide screens
   (four were too narrow for stars + "Verified" + date on one line) */
.sa-feedbacks .text-warning {
  color: var(--v-ink);
}

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

/* FAQ */
.sa-faq-item {
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.sa-faq-item:hover {
  border-color: rgba(var(--cl-accent), 0.35);
}

.sa-faq-item:has(.faq-panel-open) {
  border-color: rgba(var(--cl-accent), 0.45);
  box-shadow: 0 0 0 3px rgba(var(--cl-accent), 0.08);
}

.sa-faq-item > button {
  font-weight: 600;
}

/* Payment logos (snippets/payment-icons.njk) — quiet monochrome row, color on hover */
.sa-payment-icons img {
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter 0.25s ease, opacity 0.25s ease;
}

.sa-payment-icons img:hover {
  filter: none;
  opacity: 1;
}

/* ------------------------------------------------------------------ */
/* Status pill — product status set in SellAuth (e.g. "Undetected"),  */
/* tinted with the product's own status color via --st                */
/* ------------------------------------------------------------------ */

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--st) 38%, transparent);
  border-radius: var(--radius-badge);
  background-color: color-mix(in srgb, var(--st) 12%, transparent);
  color: var(--st);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.status-pill--lg {
  padding: 0.5rem 0.9rem;
  font-size: 0.875rem;
}

[data-scheme="light"] .status-pill {
  color: color-mix(in srgb, var(--st) 68%, #000);
}

.status-pill-dot {
  position: relative;
  width: 0.5rem;
  height: 0.5rem;
  flex-shrink: 0;
  border-radius: 9999px;
  background-color: var(--st);
  box-shadow: 0 0 10px var(--st);
}

/* ------------------------------------------------------------------ */
/* Placeholders for products without images                            */
/* ------------------------------------------------------------------ */

/* Branded cover: accent glow on black with the product name */
.sa-media-placeholder {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  container-type: inline-size;
  background-color: #07060b;
  background-image:
    radial-gradient(90% 80% at 50% 0%, rgba(var(--cl-accent), 0.65), transparent 70%),
    radial-gradient(60% 50% at 50% 110%, rgba(var(--cl-accent), 0.35), transparent 70%);
  text-align: center;
}

.sa-media-placeholder::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 75% 70% at 50% 40%, #000 20%, transparent 75%);
}

.sa-media-placeholder--lg::before {
  background-size: 44px 44px;
}

/* Monogram tile (e.g. "AP" for Astra Pro) — glass on the glow */
.sa-media-placeholder-mark {
  display: grid;
  place-items: center;
  width: clamp(3.5rem, 24cqi, 8rem);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 28%;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 24px 50px -20px rgba(var(--cl-accent), 0.95);
  color: #fff;
  font-family: var(--ff-heading);
  font-size: clamp(1.25rem, 9cqi, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Letter tile used as a thumbnail (cart items, status rows) */
.initial-tile {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background-image: var(--v-accent-grad);
  color: #fff;
  font-family: var(--ff-heading);
  font-size: 1.375rem;
  font-weight: 800;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.initial-tile--sm {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-input);
  font-size: 1.125rem;
}

/* ------------------------------------------------------------------ */
/* Product page                                                        */
/* ------------------------------------------------------------------ */

.sa-page-product-title {
  font-weight: 800;
  letter-spacing: -0.025em;
}

.sa-page-product-price {
  font-family: var(--ff-heading);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* The title row stacks on phones; keep the status pill its natural width */
.sa-page-product-status {
  align-self: flex-start;
}

@media (min-width: 768px) {
  .sa-page-product-status {
    align-self: auto;
  }
}

.sa-page-product-buybox,
.sa-page-cart-summary {
  position: relative;
  overflow: hidden;
}

/* Accent hairline across the top of the buy box / order summary */
.sa-page-product-buybox::before,
.sa-page-cart-summary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--cl-accent), 0.9), transparent);
  box-shadow: 0 0 18px 1px rgba(var(--cl-accent), 0.5);
  pointer-events: none;
}

[data-scheme="light"] :is(.sa-page-product-buybox, .sa-page-cart-summary)::before {
  box-shadow: none;
}

[data-scheme="dark"] :is(.sa-page-product-buybox, .sa-page-cart-summary) {
  background-image: radial-gradient(80% 45% at 50% 0%, rgba(var(--cl-accent), 0.14), transparent 70%);
}

/* Selected variant: accent ring + glow (selection is toggled by Alpine) */
.sa-product-form button.border-accent-500 {
  box-shadow: 0 0 0 1px rgb(var(--cl-accent)), 0 12px 30px -16px var(--v-glow);
}

[data-scheme="dark"] .border-accent-500 {
  border-color: color-mix(in oklch, rgb(var(--cl-accent)), #fff 28%);
}

.buy-payments {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--cl-border);
}

/* Description / rich text */
.sa-page-product .editor {
  line-height: 1.7;
}

.sa-page-product .editor .e-paragraph + .e-paragraph {
  margin-top: 0.75rem;
}

.sa-page-product .editor :is(.e-list-ul, .e-list-ol) {
  margin-block: 0.75rem;
}

.sa-page-product .editor .e-list-ul > .e-listitem::marker {
  color: var(--v-ink);
}

.sa-page-product .editor :is(.e-heading-h1, .e-heading-h2, .e-heading-h3) {
  margin: 1.5rem 0 0.75rem;
  font-family: var(--ff-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ------------------------------------------------------------------ */
/* Cart drawer + cart page                                             */
/* ------------------------------------------------------------------ */

[data-scheme="dark"] .sa-cart-panel {
  background-image: radial-gradient(100% 30% at 50% 0%, rgba(var(--cl-accent), 0.12), transparent 70%);
}

.cart-empty-icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1rem;
  border-radius: 9999px;
  background-color: rgba(var(--cl-accent), 0.12);
  color: var(--v-ink);
}

[data-scheme="dark"] .cart-empty-icon {
  background-color: rgba(var(--cl-accent), 0.3);
}

.cart-empty-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.cart-secure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
}

.cart-secure-line {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: rgb(var(--cl-t-muted));
  font-size: 0.75rem;
}

.cart-secure-line svg {
  width: 0.875rem;
  height: 0.875rem;
  color: rgb(var(--cl-success));
}

.sa-page-cart-continue {
  align-self: flex-start;
}

/* Narrow phones: keep the quantity stepper whole and let "Remove" wrap below it */
.sa-page-cart-item .input-stepper {
  flex-shrink: 0;
}

.sa-page-cart-item .gap-4.mt-3 {
  flex-wrap: wrap;
  row-gap: 0.5rem;
}

.sa-cart-item,
.sa-page-cart-item {
  transition: border-color 0.25s ease;
}

.sa-cart-item:hover,
.sa-page-cart-item:hover {
  border-color: rgba(var(--cl-accent), 0.35);
}

/* ------------------------------------------------------------------ */
/* Status page                                                         */
/* ------------------------------------------------------------------ */

.sa-status-card {
  transition: border-color 0.25s ease, transform 0.25s var(--v-ease), box-shadow 0.25s ease;
}

.sa-status-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--cl-accent), 0.45);
  box-shadow: 0 16px 40px -24px var(--v-glow);
}

.sa-status-card:hover .sa-status-card-arrow {
  transform: translateX(3px);
  color: rgb(var(--cl-t-primary));
}

/* ------------------------------------------------------------------ */
/* Services (components/services.njk)                                  */
/* ------------------------------------------------------------------ */

.svc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gap);
  align-items: stretch;
}

.svc-grid > .sa-services-item {
  display: flex;
  flex-direction: column;
}

.svc-grid > .sa-services-item > .svc-card {
  flex: 1;
}

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

@media (min-width: 1024px) {
  .svc-grid--1 {
    max-width: 36rem;
    margin-inline: auto;
  }

  .svc-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.svc-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: var(--border-w) solid var(--cl-border);
  border-radius: calc(var(--radius-card) + 6px);
  background-color: rgb(var(--cl-surface));
  box-shadow: var(--shadow-card);
  color: rgb(var(--cl-t-primary));
  transition: transform 0.35s var(--v-ease), border-color 0.35s ease, box-shadow 0.35s ease;
}

[data-scheme="dark"] .svc-card:not(.svc-card--featured) {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 40%);
}

.svc-card::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -35%;
  right: -25%;
  width: 75%;
  aspect-ratio: 1;
  border-radius: 9999px;
  background: radial-gradient(closest-side, rgba(var(--cl-accent), 0.16), transparent);
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.svc-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--cl-accent), 0.45);
  box-shadow: 0 30px 70px -32px var(--v-glow);
}

.svc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.svc-icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  flex-shrink: 0;
  border-radius: 14px;
  background-image: var(--v-accent-grad);
  color: #fff;
  font-size: 1.25rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 12px 24px -10px var(--v-glow);
}

.svc-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.svc-card--featured .status-pill,
[data-scheme="light"] .svc-card--featured .status-pill {
  border-color: color-mix(in srgb, var(--st) 45%, transparent);
  background-color: rgba(0, 0, 0, 0.3);
  color: var(--st);
}

.svc-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid rgba(var(--cl-accent), 0.3);
  border-radius: var(--radius-badge);
  background-color: rgba(var(--cl-accent), 0.1);
  color: var(--v-ink);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.svc-kicker {
  margin-top: 1.75rem;
  color: var(--v-ink);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.svc-name {
  margin-top: 0.5rem;
  font-family: var(--ff-heading);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.svc-head + .svc-name {
  margin-top: 1.75rem;
}

.svc-desc {
  margin-top: 0.75rem;
  color: rgb(var(--cl-t-muted));
  line-height: 1.65;
}

.svc-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
  margin-top: 1.75rem;
}

.svc-price-label {
  width: 100%;
  color: rgb(var(--cl-t-muted));
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.svc-price-value {
  font-family: var(--ff-heading);
  font-size: clamp(2.25rem, 1.8rem + 1.4vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
}

.svc-price-note {
  color: rgb(var(--cl-t-muted));
  font-size: 0.9375rem;
}

.svc-features {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.875rem;
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--cl-border);
}

.svc-feature {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.svc-check {
  display: grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  flex-shrink: 0;
  margin-top: 0.0625rem;
  border-radius: 9999px;
  background-color: rgba(var(--cl-accent), 0.12);
  color: var(--v-ink);
}

[data-scheme="dark"] .svc-check {
  background-color: rgba(var(--cl-accent), 0.3);
}

.svc-check svg {
  width: 0.8125rem;
  height: 0.8125rem;
}

.svc-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 2rem;
  padding: 0.9375rem 1.25rem;
  border-radius: var(--radius-button);
  background-color: rgb(var(--cl-accent));
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 60%);
  color: rgb(var(--cl-on-accent));
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 12px 28px -12px var(--v-glow);
  transition: background-color var(--dur) ease, box-shadow var(--dur) ease, transform var(--dur) ease;
}

.svc-cta:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 18px 36px -12px var(--v-glow);
}

[data-scheme="dark"] .svc-cta:hover {
  background-color: var(--v-accent-hi);
}

.svc-cta svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.25s var(--v-ease);
}

.svc-cta:hover svg {
  transform: translateX(3px);
}

/* Featured card — solid brand purple with white type */

.svc-card--featured {
  --cl-t-primary: 255, 255, 255;
  --cl-t-muted: 226, 216, 247;
  --cl-border: rgba(255, 255, 255, 0.2);
  --v-ink: #fff;
  border-color: transparent;
  background-color: rgb(var(--cl-accent));
  background-image:
    radial-gradient(90% 60% at 100% 0%, rgba(255, 255, 255, 0.2), transparent 60%),
    var(--v-accent-grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 40px 90px -40px var(--v-glow);
}

.svc-card--featured::before {
  inset: 0;
  top: 0;
  right: 0;
  width: auto;
  aspect-ratio: auto;
  border-radius: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 100% 0%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 80% 70% at 100% 0%, #000 10%, transparent 70%);
}

.svc-card--featured:hover {
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 44px 100px -36px var(--v-glow);
}

.svc-card--featured .svc-icon {
  background-image: none;
  background-color: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.svc-card--featured .svc-badge {
  border-color: transparent;
  background-color: #fff;
  color: rgb(var(--cl-accent));
}

.svc-card--featured .svc-kicker {
  color: rgba(255, 255, 255, 0.8);
}

.svc-card--featured .svc-check {
  background-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.svc-card--featured .svc-cta,
[data-scheme="dark"] .svc-card--featured .svc-cta {
  background-color: #fff;
  background-image: none;
  color: rgb(var(--cl-accent));
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.45);
}

.svc-card--featured .svc-cta:hover,
[data-scheme="dark"] .svc-card--featured .svc-cta:hover {
  background-color: #f1ebff;
}

.svc-note {
  margin-top: 2rem;
  color: rgb(var(--cl-t-muted));
  font-size: 0.9375rem;
  text-align: center;
}

.svc-note a {
  color: var(--v-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------------ */
/* CTA banner (components/cta-banner.njk)                              */
/* ------------------------------------------------------------------ */

.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2.75rem, 2rem + 4vw, 5rem) clamp(1.5rem, 1rem + 4vw, 4.5rem);
  border-radius: calc(var(--radius-card) + 10px);
  color: rgb(var(--cl-t-primary));
}

.cta-band--brand {
  --cl-t-primary: 255, 255, 255;
  --cl-t-muted: 226, 216, 247;
  --cl-border: rgba(255, 255, 255, 0.28);
  --v-ink: #fff;
  --v-grad-text: linear-gradient(100deg, #fff 0%, color-mix(in oklch, rgb(var(--cl-accent)), #fff 72%) 100%);
  background-color: rgb(var(--cl-accent));
  background-image:
    radial-gradient(70% 90% at 50% 0%, rgba(255, 255, 255, 0.22), transparent 60%),
    linear-gradient(135deg, var(--v-accent-lo) 0%, rgb(var(--cl-accent)) 50%, var(--v-accent-hi) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 50px 120px -50px var(--v-glow);
}

.cta-band--black {
  border: 1px solid var(--cl-border);
  background-color: rgb(var(--cl-background));
  background-image: radial-gradient(60% 100% at 50% 0%, rgba(var(--cl-accent), 0.55), transparent 70%);
}

.cta-band::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 0%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 80% at 50% 0%, #000 10%, transparent 75%);
  pointer-events: none;
}

.cta-band-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

.cta-band-eyebrow {
  margin-bottom: 1rem;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--cl-border);
  border-radius: var(--radius-badge);
  background-color: rgba(255, 255, 255, 0.08);
  font-size: 0.8125rem;
  font-weight: 600;
}

.cta-band-title {
  font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.cta-band-text {
  margin-top: 1rem;
  color: rgb(var(--cl-t-muted));
  font-size: 1.0625rem;
  line-height: 1.65;
}

.cta-band-actions {
  margin-top: 2rem;
}

.cta-band .sa-buttons {
  justify-content: center;
}

@media (min-width: 1024px) {
  .cta-band--split .sa-buttons {
    justify-content: flex-end;
  }

  .cta-band--split .cta-band-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'eyebrow actions' 'title actions' 'text actions';
    align-items: center;
    column-gap: 3rem;
    max-width: none;
    text-align: left;
  }

  .cta-band--split .cta-band-eyebrow { grid-area: eyebrow; justify-self: start; }
  .cta-band--split .cta-band-title { grid-area: title; }
  .cta-band--split .cta-band-text { grid-area: text; }
  .cta-band--split .cta-band-actions { grid-area: actions; margin-top: 0; }
}

.cta-band--brand .sa-btn--primary.sa-btn--solid {
  background-color: #fff;
  background-image: none;
  color: rgb(var(--cl-accent));
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.5);
}

.cta-band--brand .sa-btn--primary.sa-btn--solid:hover {
  background-color: #f1ebff;
}

.cta-band--brand .sa-btn--primary:is(.sa-btn--outline, .sa-btn--ghost) {
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: #fff;
}

.cta-band--brand .sa-btn--secondary {
  background-color: rgba(255, 255, 255, 0.08);
}

/* The banner is usually the last section — let it sit closer to the footer */
#app:has(.components > .sa-cta-banner:last-child) .sa-footer {
  margin-top: 0;
}

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */

.sa-footer {
  position: relative;
  overflow: hidden;
  background-color: rgb(var(--cl-background));
  background-image: radial-gradient(55% 60% at 50% 0%, rgba(var(--cl-accent), 0.16), transparent 70%);
}

.sa-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: min(56rem, 90%);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(var(--cl-accent), 0.8), transparent);
  pointer-events: none;
}

.sa-footer h3 {
  color: rgb(var(--cl-t-muted));
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sa-footer-wordmark {
  container-type: inline-size;
  margin-top: 2.5rem;
  pointer-events: none;
  user-select: none;
}

.sa-footer-wordmark span {
  display: block;
  margin-bottom: -0.2em;
  font-family: var(--ff-heading);
  font-size: min(15rem, calc(100cqi / (var(--wm-len, 8) * 0.62)));
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.055em;
  text-align: center;
  white-space: nowrap;
  background-image: linear-gradient(180deg, rgba(var(--cl-t-primary), 0.14) 0%, rgba(var(--cl-t-primary), 0.02) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ------------------------------------------------------------------ */
/* Product cards — "Showcase" style (snippets/product-card.njk)        */
/* ------------------------------------------------------------------ */

.pc-showcase {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: var(--border-w) solid var(--cl-border);
  border-radius: calc(var(--radius-card) + 4px);
  background-color: rgb(var(--cl-surface));
  box-shadow: var(--shadow-card);
}

.pc-showcase-media {
  position: relative;
  border-bottom: 1px solid var(--cl-border);
}

.pc-showcase-status {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
}

.pc-showcase-status.status-pill,
[data-scheme="light"] .pc-showcase-status.status-pill {
  background-color: rgba(0, 0, 0, 0.6);
  color: var(--st);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.pc-showcase-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.125rem 1.25rem 1.25rem;
}

.pc-showcase-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.pc-showcase-title {
  min-width: 0;
  color: rgb(var(--cl-t-primary));
  font-family: var(--ff-heading);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.pc-showcase-stock {
  margin-top: 0.25rem;
}

.pc-showcase-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.125rem;
}

.pc-showcase-price {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.pc-showcase-price-label {
  color: rgb(var(--cl-t-muted));
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pc-showcase-price-value {
  color: rgb(var(--cl-t-primary));
  font-family: var(--ff-heading);
  font-size: 1.625rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.pc-showcase-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--cl-border);
  border-radius: var(--radius-button);
  color: rgb(var(--cl-t-primary));
  font-size: 0.875rem;
  font-weight: 600;
  transition: background-color var(--dur) ease, border-color var(--dur) ease, color var(--dur) ease;
}

.pc-showcase-cta svg {
  width: 0.95rem;
  height: 0.95rem;
  transition: transform 0.25s var(--v-ease);
}

.pc-showcase:hover .pc-showcase-cta {
  border-color: rgb(var(--cl-accent));
  background-color: rgb(var(--cl-accent));
  color: #fff;
}

.pc-showcase:hover .pc-showcase-cta svg {
  transform: translateX(2px);
}

/* "View all products" under the homepage grid */
.products-view-all {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

.products-view-all-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.4rem;
  border: 1px solid var(--cl-border);
  border-radius: var(--radius-button);
  background-color: rgba(var(--cl-surface), 0.6);
  color: rgb(var(--cl-t-primary));
  font-weight: 600;
  transition: border-color var(--dur) ease, box-shadow var(--dur) ease;
}

.products-view-all-link svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.25s var(--v-ease);
}

.products-view-all-link:hover {
  border-color: rgba(var(--cl-accent), 0.5);
  box-shadow: 0 12px 30px -16px var(--v-glow);
}

.products-view-all-link:hover svg {
  transform: translateX(3px);
}

/* ------------------------------------------------------------------ */
/* Bento "why choose us" (components/bento-features.njk)               */
/* ------------------------------------------------------------------ */

.bento-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gap);
}

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

  .bento-grid > :nth-child(6n + 1),
  .bento-grid > :nth-child(6n + 6) {
    grid-column: span 2;
  }
}

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

  .bento-grid > :nth-child(6n + 3) {
    grid-row: span 2;
  }

  /* The tall card has room for a larger step dial */
  .bento-grid > :nth-child(6n + 3) .bv-steps {
    transform: scale(1.3);
  }
}

.sa-bento-item {
  display: flex;
}

.bento-card {
  --bento-pad: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
  min-height: 19rem;
  padding: var(--bento-pad);
  border: var(--border-w) solid var(--cl-border);
  border-radius: calc(var(--radius-card) + 6px);
  background-color: rgb(var(--cl-surface));
  box-shadow: var(--shadow-card);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

[data-scheme="dark"] .bento-card {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 40%);
}

/* Soft accent glow in a corner of every card */
.bento-card::before {
  content: '';
  position: absolute;
  z-index: -1;
  right: -20%;
  bottom: -35%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 9999px;
  background: radial-gradient(closest-side, rgba(var(--cl-accent), 0.3), transparent);
  pointer-events: none;
}

.bento-card--support::before,
.bento-card--payments::before {
  right: auto;
  left: -15%;
}

[data-scheme="light"] .bento-card::before {
  opacity: 0.5;
}

.bento-card:hover {
  border-color: rgba(var(--cl-accent), 0.45);
  box-shadow: 0 24px 60px -30px var(--v-glow);
}

/* Clickable card (item link), e.g. 24/7 support -> Discord */
.bento-card--link {
  color: inherit;
  text-decoration: none;
}

.bento-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.875rem;
  color: var(--v-ink);
  font-size: 0.875rem;
  font-weight: 700;
}

.bento-link svg {
  width: 0.9rem;
  height: 0.9rem;
  transition: transform 0.25s var(--v-ease);
}

.bento-card--link:hover .bento-link svg {
  transform: translate(2px, -2px);
}

.bento-title {
  color: rgb(var(--cl-t-primary));
  font-family: var(--ff-heading);
  font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.bento-text {
  max-width: 24rem;
  margin-top: 0.5rem;
  color: rgb(var(--cl-t-muted));
  font-size: 0.9375rem;
  line-height: 1.55;
}

.bento-visual {
  position: relative;
  display: grid;
  flex: 1;
  place-items: center;
  min-height: 11rem;
}

/* Support — stacked rows, the live one floats forward */
.bv-support {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

.bv-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--cl-border);
  border-radius: 12px;
  background-color: rgba(var(--cl-t-primary), 0.03);
  color: rgb(var(--cl-t-muted));
  font-size: 0.875rem;
  font-weight: 600;
}

.bv-row--dim {
  opacity: 0.6;
}

.bv-row-sign {
  margin-left: auto;
  font-size: 1rem;
  font-weight: 500;
}

.bv-row--active {
  align-self: flex-end;
  width: 78%;
  border-color: rgba(var(--cl-accent), 0.6);
  background-image: linear-gradient(90deg, rgba(var(--cl-accent), 0.24), rgba(var(--cl-accent), 0.08));
  color: rgb(var(--cl-t-primary));
  box-shadow: 0 0 0 1px rgba(var(--cl-accent), 0.25), 0 14px 32px -14px var(--v-glow);
  animation: bv-float 5s ease-in-out infinite;
}

.bv-row--active .bv-row-sign {
  color: var(--v-ink);
}

.bv-live {
  width: 0.5rem;
  height: 0.5rem;
  flex-shrink: 0;
  border-radius: 9999px;
  background-color: rgb(var(--cl-success));
  box-shadow: 0 0 0 3px rgba(var(--cl-success), 0.2), 0 0 10px rgba(var(--cl-success), 0.6);
}

/* Delivery — logo tile inside orbit rings */
.bv-delivery {
  position: relative;
  display: grid;
  place-items: center;
  width: 12rem;
  height: 12rem;
}

.bv-orbit {
  position: absolute;
  border-radius: 9999px;
}

.bv-orbit--outer {
  inset: 0;
  border: 1px dashed rgba(var(--cl-accent), 0.5);
  animation: bv-spin 28s linear infinite;
}

.bv-orbit--inner {
  inset: 16%;
  border: 1px solid rgba(var(--cl-t-primary), 0.08);
  background: radial-gradient(closest-side, rgba(var(--cl-accent), 0.22), transparent);
}

.bv-tile {
  position: relative;
  display: grid;
  place-items: center;
  width: 5.5rem;
  height: 5.5rem;
  border: 1px solid rgba(var(--cl-t-primary), 0.14);
  border-radius: 22px;
  background-color: rgb(var(--cl-surface-raised));
  background-image: linear-gradient(145deg, rgba(var(--cl-t-primary), 0.1), rgba(var(--cl-t-primary), 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 22px 44px -18px var(--v-glow);
  animation: bv-tilt 6s ease-in-out infinite;
}

.bv-tile i {
  color: var(--v-ink);
  font-size: 2rem;
}

.bv-tile img {
  width: 62%;
  height: 62%;
  border-radius: 10px;
  object-fit: contain;
}

.bv-chip {
  position: absolute;
  padding: 0.3rem 0.65rem;
  border: 1px solid rgba(var(--cl-accent), 0.5);
  border-radius: 9999px;
  background-color: rgba(var(--cl-accent), 0.16);
  color: var(--v-ink);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.bv-chip--a {
  left: -6%;
  bottom: 16%;
  animation: bv-float 4.5s ease-in-out infinite;
}

.bv-chip--b {
  right: -8%;
  top: 12%;
  animation: bv-float 5.5s ease-in-out infinite reverse;
}

/* Steps — dial of five steps, the active one cycles */
.bv-steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  height: 100%;
  min-height: 14rem;
}

.bv-steps-labels {
  position: relative;
  width: 100%;
  height: 1.5rem;
}

.bv-steps-labels span {
  position: absolute;
  inset: 0;
  color: rgb(var(--cl-t-muted));
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  opacity: 0;
  animation: bv-step-label 8s infinite;
  animation-delay: calc(var(--i) * 1.6s);
}

.bv-steps-dial {
  position: relative;
  width: 100%;
  height: 7rem;
}

.bv-step {
  --a: calc((var(--i) - 2) * 30deg);
  position: absolute;
  left: 50%;
  top: 9.5rem;
  width: 2.5rem;
  height: 2.5rem;
  margin: -1.25rem 0 0 -1.25rem;
  transform: rotate(var(--a)) translateY(-8rem) rotate(calc(-1 * var(--a)));
}

.bv-step > span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 1px solid var(--cl-border);
  border-radius: 9999px;
  background-color: rgb(var(--cl-surface-raised));
  color: rgb(var(--cl-t-muted));
  font-size: 0.8125rem;
  font-weight: 700;
  animation: bv-step-dot 8s infinite;
  animation-delay: calc(var(--i) * 1.6s);
}

.bv-steps-bar {
  position: relative;
  overflow: hidden;
  width: 7rem;
  height: 0.375rem;
  border-radius: 9999px;
  background-color: rgba(var(--cl-t-primary), 0.1);
}

.bv-steps-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: var(--v-accent-grad);
  transform-origin: left center;
  animation: bv-progress 8s steps(5, jump-none) infinite;
}

/* Pricing — oversized outlined marquee */
.bv-marquee {
  width: calc(100% + 2 * var(--bento-pad));
  margin-inline: calc(-1 * var(--bento-pad));
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}

.bv-marquee-track {
  display: flex;
  width: max-content;
  animation: bv-marquee 18s linear infinite;
}

.bv-marquee-track span {
  padding-right: 2.5rem;
  color: transparent;
  font-family: var(--ff-heading);
  font-size: clamp(2.75rem, 2rem + 2vw, 4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  -webkit-text-stroke: 1px rgba(var(--cl-t-primary), 0.3);
}

.bv-price-chip {
  position: absolute;
  left: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid rgba(var(--cl-accent), 0.45);
  border-radius: 9999px;
  background-color: rgba(var(--cl-accent), 0.16);
  color: var(--v-ink);
  font-size: 0.75rem;
  font-weight: 700;
}

.bv-price-chip svg {
  width: 0.8rem;
  height: 0.8rem;
}

/* Stat — radar rings around an icon, big number in the corner */
.bv-stat {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 11rem;
}

.bv-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8rem;
  height: 5.5rem;
  margin: -2.75rem 0 0 -4rem;
  border: 1px solid rgba(var(--cl-accent), 0.55);
  border-radius: 18px;
  opacity: 0;
  animation: bv-radar 4.5s ease-out infinite;
  animation-delay: calc(var(--i) * 1.5s);
}

.bv-stat-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border: 1px solid rgba(var(--cl-t-primary), 0.14);
  border-radius: 16px;
  background-color: rgb(var(--cl-surface-raised));
  box-shadow: 0 16px 36px -16px var(--v-glow);
  color: var(--v-ink);
  font-size: 1.375rem;
}

.bv-stat-value {
  position: absolute;
  right: 0;
  bottom: 0;
  font-family: var(--ff-heading);
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background-image: var(--v-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Payments — scrolling row of logo tiles */
.bv-payments {
  width: calc(100% + 2 * var(--bento-pad));
  margin-inline: calc(-1 * var(--bento-pad));
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.bv-payments-track {
  display: flex;
  width: max-content;
  animation: bv-marquee-6 36s linear infinite;
}

.bv-pay-set.sa-payment-icons {
  flex-wrap: nowrap;
  gap: 0.75rem;
  padding-right: 0.75rem;
}

.bv-pay-set.sa-payment-icons img {
  box-sizing: content-box;
  height: 1.5rem;
  padding: 0.9rem 1.3rem;
  border: 1px solid var(--cl-border);
  border-radius: 12px;
  background-color: rgba(var(--cl-t-primary), 0.04);
  filter: none;
  opacity: 0.95;
}

/* Icon — single glowing tile */
.bv-icon span {
  display: grid;
  place-items: center;
  width: 5rem;
  height: 5rem;
  border-radius: 20px;
  background-image: var(--v-accent-grad);
  color: #fff;
  font-size: 1.75rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 20px 44px -16px var(--v-glow);
}

@keyframes bv-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes bv-spin {
  to { transform: rotate(360deg); }
}

@keyframes bv-tilt {
  0%, 100% { transform: rotate(-8deg) translateY(0); }
  50% { transform: rotate(-4deg) translateY(-4px); }
}

@keyframes bv-step-dot {
  0%, 17% {
    border-color: transparent;
    background-color: rgb(var(--cl-accent));
    color: #fff;
    box-shadow: 0 0 0 6px rgba(var(--cl-accent), 0.18), 0 0 28px var(--v-glow);
    transform: scale(1.45);
  }
  22%, 100% {
    transform: scale(1);
  }
}

@keyframes bv-step-label {
  0%, 17% { opacity: 1; }
  22%, 100% { opacity: 0; }
}

@keyframes bv-progress {
  from { transform: scaleX(0.2); }
  to { transform: scaleX(1); }
}

@keyframes bv-marquee {
  to { transform: translateX(-50%); }
}

@keyframes bv-marquee-6 {
  to { transform: translateX(calc(-100% / 6)); }
}

@keyframes bv-radar {
  0% { opacity: 0; transform: scale(0.6); }
  15% { opacity: 0.9; }
  100% { opacity: 0; transform: scale(2.2); }
}

@media (prefers-reduced-motion: reduce) {
  .bento-card *,
  .bento-card *::after {
    animation: none !important;
  }

  .bv-steps-labels span:nth-child(3) {
    opacity: 1;
  }

  .bv-step:nth-child(3) > span {
    border-color: transparent;
    background-color: rgb(var(--cl-accent));
    color: #fff;
    transform: scale(1.45);
  }

  .bv-ring {
    opacity: 0.5;
  }

  .bv-ring:nth-child(2) { transform: scale(1.4); opacity: 0.3; }
  .bv-ring:nth-child(3) { transform: scale(1.8); opacity: 0.15; }

  .bv-steps-bar::after {
    transform: scaleX(0.6);
  }
}

/* ------------------------------------------------------------------ */
/* Reseller program (components/reseller-program.njk)                  */
/* Coupon brackets, a perks strip and a Discord call to action          */
/* ------------------------------------------------------------------ */

/* Phones: the featured card on top, then two per row. Tablets: four per row.
   Wide screens: every bracket in one row. */
.rt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.rt-grid > .rt-card--featured {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .rt-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .rt-grid {
    grid-template-columns: repeat(var(--rt-count, 5), minmax(0, 1fr));
  }

  .rt-grid > .rt-card--featured {
    grid-column: auto;
  }
}

.rt-card {
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.5rem;
  border: 1px solid var(--cl-border);
  border-radius: var(--radius-card);
  background-color: rgb(var(--cl-surface));
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur) ease, transform var(--dur) var(--v-ease), box-shadow var(--dur) ease;
}

[data-scheme="dark"] .rt-card {
  background-image: linear-gradient(180deg, rgba(var(--cl-accent), 0.09), rgba(var(--cl-accent), 0.02) 70%);
}

.rt-card:hover {
  border-color: rgba(var(--cl-accent), 0.45);
  transform: translateY(-2px);
}

.rt-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 1.75rem;
}

.rt-name {
  min-width: 0;
  overflow: hidden;
  color: rgb(var(--cl-t-primary));
  font-size: 1.0625rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rt-badge {
  flex-shrink: 0;
  padding: 0.25rem 0.6rem;
  border-radius: 9999px;
  background-color: rgba(var(--cl-accent), 0.14);
  color: var(--v-ink);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.rt-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.rt-rate {
  margin: 1.25rem 0;
}

.rt-value {
  display: block;
  color: var(--v-ink);
  background-image: var(--v-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--ff-heading);
  font-size: clamp(2.25rem, 1.85rem + 1.3vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.rt-label {
  display: block;
  margin-top: 0.55rem;
  color: rgb(var(--cl-t-muted));
  font-size: 0.9375rem;
}

.rt-req {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--cl-border);
  color: rgb(var(--cl-t-muted));
  font-size: 0.875rem;
}

.rt-req svg {
  flex-shrink: 0;
  width: 0.95rem;
  height: 0.95rem;
  color: var(--v-ink);
}

/* Phones: two brackets per row, so tighten them to keep "$1,000 total spent" on one line */
@media (max-width: 479px) {
  .rt-grid > .rt-card:not(.rt-card--featured) {
    padding: 1.1rem;
  }

  .rt-grid > .rt-card:not(.rt-card--featured) .rt-req {
    gap: 0.4rem;
    font-size: 0.8125rem;
    white-space: nowrap;
  }

  .rt-grid > .rt-card:not(.rt-card--featured) .rt-req svg {
    width: 0.85rem;
    height: 0.85rem;
  }
}

/* Featured bracket: solid brand purple with white type, in both schemes */
.rt-card.rt-card--featured {
  --cl-border: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.14);
  background-color: rgb(var(--cl-accent));
  background-image:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.2), transparent 55%),
    linear-gradient(160deg, var(--v-accent-hi), rgb(var(--cl-accent)) 45%, var(--v-accent-lo));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 26px 60px -26px var(--v-glow);
}

.rt-card--featured .rt-name,
.rt-card--featured .rt-req svg {
  color: #fff;
}

.rt-card--featured .rt-value {
  color: #fff;
  background-image: none;
  -webkit-text-fill-color: #fff;
}

.rt-card--featured .rt-label,
.rt-card--featured .rt-req {
  color: rgba(255, 255, 255, 0.86);
}

.rt-card--featured .rt-badge {
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* When the featured card spans the whole row, lay it out side by side */
@container (min-width: 30rem) {
  .rt-card--featured .rt-card-body {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
  }

  .rt-card--featured .rt-rate {
    margin-bottom: 0;
  }

  .rt-card--featured .rt-req {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
}

/* Perks strip */
.rt-perks {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin-top: 1.25rem;
  padding: 1.75rem;
  border: 1px solid var(--cl-border);
  border-radius: var(--radius-card);
  background-color: rgb(var(--cl-surface));
  box-shadow: var(--shadow-card);
}

[data-scheme="dark"] .rt-perks {
  background-image: linear-gradient(180deg, rgba(var(--cl-accent), 0.08), rgba(var(--cl-accent), 0.02));
}

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

@media (min-width: 1100px) {
  .rt-perks {
    grid-template-columns: repeat(var(--rt-perk-cols, 4), minmax(0, 1fr));
    gap: 2rem;
    padding: 2rem;
  }
}

.rt-perk {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  min-width: 0;
}

.rt-perk-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 10px;
  background-image: var(--v-accent-grad);
  color: #fff;
  font-size: 0.95rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 22px -12px var(--v-glow);
}

.rt-perk-title {
  color: rgb(var(--cl-t-primary));
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

.rt-perk-text {
  margin-top: 0.3rem;
  color: rgb(var(--cl-t-muted));
  font-size: 0.875rem;
  line-height: 1.55;
}

/* Call to action */
.rt-cta {
  margin-top: 1.25rem;
  padding: 1.5rem 1.75rem;
  border: 1px solid rgba(var(--cl-accent), 0.3);
  border-radius: var(--radius-card);
  background-color: rgb(var(--cl-surface));
  background-image: radial-gradient(60% 140% at 0% 0%, rgba(var(--cl-accent), 0.14), transparent 60%);
  box-shadow: var(--shadow-card);
}

.rt-cta-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}

.rt-cta-copy {
  min-width: 0;
  max-width: 40rem;
}

.rt-cta-title {
  color: rgb(var(--cl-t-primary));
  font-family: var(--ff-heading);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.rt-cta-text {
  margin-top: 0.3rem;
  color: rgb(var(--cl-t-muted));
  font-size: 0.9375rem;
}

.rt-cta-portal {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.65rem;
  color: var(--v-ink);
  font-size: 0.8125rem;
  font-weight: 600;
}

.rt-cta-portal svg {
  width: 0.85rem;
  height: 0.85rem;
  transition: transform var(--dur) ease;
}

.rt-cta-portal:hover svg {
  transform: translateX(2px);
}

.rt-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.rt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  height: 2.75rem;
  padding: 0 1.25rem;
  border: 1px solid var(--cl-border);
  border-radius: var(--radius-button);
  background-color: rgb(var(--cl-surface));
  color: rgb(var(--cl-t-primary));
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color var(--dur) ease, background-color var(--dur) ease, box-shadow var(--dur) ease;
}

.rt-btn:hover {
  border-color: rgba(var(--cl-t-primary), 0.3);
}

.rt-btn--accent {
  border-color: transparent;
  background-color: rgb(var(--cl-accent));
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 60%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 12px 28px -12px var(--v-glow);
}

.rt-btn--accent:hover {
  border-color: transparent;
  background-color: var(--v-accent-hi);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 16px 34px -12px var(--v-glow);
}

.rt-btn-caret {
  width: 1rem;
  height: 1rem;
  transition: transform var(--dur) ease;
}

.rt-btn-caret.is-open {
  transform: rotate(180deg);
}

@media (max-width: 639px) {
  .rt-cta {
    padding: 1.35rem;
  }

  .rt-cta-actions {
    width: 100%;
  }

  .rt-btn {
    flex: 1 1 auto;
  }
}

/* "How it works" steps, opened from the call to action */
.rt-how {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cl-border);
}

@media (min-width: 768px) {
  .rt-how {
    grid-template-columns: repeat(var(--rt-steps, 3), minmax(0, 1fr));
    gap: 1.5rem;
  }
}

.rt-how li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  color: rgb(var(--cl-t-muted));
  font-size: 0.9rem;
  line-height: 1.55;
}

.rt-how-num {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 8px;
  background-color: rgba(var(--cl-accent), 0.16);
  color: var(--v-ink);
  font-size: 0.8125rem;
  font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
  .rt-card,
  .rt-btn-caret {
    transition: none;
  }

  .rt-card:hover {
    transform: none;
  }
}

/* ------------------------------------------------------------------ */
/* Customer area (every account page)                                  */
/* ------------------------------------------------------------------ */

/* On phones the account tabs are a sideways-scrolling row. Without this the
   page grid grows to the row's full width and every account page overflows. */
.sa-customer-sidebar {
  min-width: 0;
}

/* ------------------------------------------------------------------ */
/* Reseller page (components/page-customer-reseller.njk + the two      */
/* reseller-*-modal snippets): SellAuth's own reseller system          */
/* ------------------------------------------------------------------ */

.rs-card {
  position: relative;
  padding: 1.25rem;
  border: 1px solid var(--cl-border);
  border-radius: var(--radius-card);
  background-color: rgb(var(--cl-surface));
  box-shadow: var(--shadow-card);
}

[data-scheme="dark"] .rs-card {
  background-image: linear-gradient(180deg, rgba(var(--cl-accent), 0.07), rgba(var(--cl-accent), 0.015) 70%);
}

.rs-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 9px;
  background-color: rgba(var(--cl-accent), 0.12);
  box-shadow: inset 0 0 0 1px rgba(var(--cl-accent), 0.28);
  color: var(--v-ink);
}

.rs-icon svg {
  width: 0.95rem;
  height: 0.95rem;
}

.rs-error {
  color: rgb(var(--cl-error));
  font-size: 0.8125rem;
}

/* ---------- Tier card ---------- */

.rs-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  overflow: hidden;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: calc(var(--radius-card) + 4px);
  background-color: rgb(var(--cl-accent));
  background-image:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.2), transparent 55%),
    linear-gradient(150deg, var(--v-accent-hi), rgb(var(--cl-accent)) 45%, var(--v-accent-lo));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 30px 70px -34px var(--v-glow);
  color: #fff;
}

/* Faint rings behind the numbers */
.rs-hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -9rem;
  right: -7rem;
  width: 24rem;
  height: 24rem;
  border-radius: 9999px;
  background-image: repeating-radial-gradient(circle, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 2.25rem);
  -webkit-mask-image: radial-gradient(circle, #000 35%, transparent 70%);
  mask-image: radial-gradient(circle, #000 35%, transparent 70%);
}

@media (min-width: 900px) {
  .rs-hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: center;
    gap: 2.5rem;
    padding: 1.75rem 2rem;
  }
}

.rs-hero-id {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.rs-hero-badge {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
  width: 3rem;
  height: 3rem;
  border-radius: 14px;
  background-color: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.rs-hero-badge svg {
  width: 1.4rem;
  height: 1.4rem;
}

.rs-hero-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rs-hero-label {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.rs-hero-tier {
  overflow: hidden;
  font-family: var(--ff-heading);
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rs-hero-rate {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.6rem;
  margin-top: 1.25rem;
}

.rs-hero-value {
  font-family: var(--ff-heading);
  font-size: clamp(2.75rem, 2.2rem + 2vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.rs-hero-unit {
  color: rgba(255, 255, 255, 0.86);
  font-size: 1rem;
  font-weight: 500;
}

.rs-hero-text {
  max-width: 26rem;
  margin-top: 0.6rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.875rem;
}

.rs-hero-next {
  padding: 1.1rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-card);
  background-color: rgba(8, 3, 20, 0.3);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.rs-hero-next-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.9375rem;
  font-weight: 500;
}

.rs-hero-next-title b {
  color: #fff;
  font-weight: 700;
}

.rs-hero-next-title svg {
  display: inline;
  width: 1rem;
  height: 1rem;
  margin-right: 0.2rem;
  vertical-align: -3px;
}

.rs-hero-next-img {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 6px;
  object-fit: cover;
}

.rs-hero-next-rate {
  margin-left: auto;
  padding: 0.15rem 0.55rem;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.rs-meter {
  margin-top: 0.9rem;
}

.rs-meter-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.rs-meter-head span:last-child {
  color: #fff;
}

.rs-meter-bar {
  overflow: hidden;
  height: 0.5rem;
  margin-top: 0.4rem;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.16);
}

.rs-meter-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.75), #fff);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.45);
}

.rs-hero-hint {
  margin-top: 0.85rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.8125rem;
}

/* ---------- Stats ---------- */

/* Phones: balance, then spent + orders, then the latest order. Tablets: three in a
   row with the latest order below. Wide screens: all four in one row. */
.rs-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.rs-stats > .rs-stat:first-child,
.rs-stats > .rs-stat--order {
  grid-column: 1 / -1;
}

@media (min-width: 640px) {
  .rs-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .rs-stats > .rs-stat:first-child {
    grid-column: auto;
  }
}

@media (min-width: 1280px) {
  .rs-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr);
  }

  .rs-stats > .rs-stat--order {
    grid-column: auto;
  }
}

.rs-stat {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
  padding: 1.1rem 1.15rem;
}

.rs-stat--link {
  transition: border-color var(--dur) ease;
}

.rs-stat--link:hover {
  border-color: rgba(var(--cl-accent), 0.45);
}

.rs-stat-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  color: rgb(var(--cl-t-muted));
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
}

.rs-stat-go {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  color: var(--v-ink);
  font-size: 0.75rem;
  font-weight: 600;
}

.rs-stat-go svg {
  width: 0.8rem;
  height: 0.8rem;
  transition: transform var(--dur) ease;
}

.rs-stat--link:hover .rs-stat-go svg,
.rs-stat-go:hover svg {
  transform: translateX(2px);
}

.rs-stat-value {
  overflow: hidden;
  color: rgb(var(--cl-t-primary));
  font-family: var(--ff-heading);
  font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rs-order {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.rs-order-name {
  overflow: hidden;
  color: rgb(var(--cl-t-primary));
  font-size: 0.9375rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rs-order-meta {
  color: rgb(var(--cl-t-muted));
  font-size: 0.8125rem;
}

.rs-order-meta a {
  color: var(--v-ink);
  font-weight: 600;
}

/* ---------- Ways to sell ---------- */

.rs-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

@media (min-width: 768px) {
  .rs-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rs-tools > .rs-tool--connect {
    grid-column: 1 / -1;
  }
}

.rs-tool {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.rs-card.rs-tool--connect {
  border-color: rgba(var(--cl-accent), 0.35);
  background-image: radial-gradient(70% 160% at 0% 0%, rgba(var(--cl-accent), 0.16), transparent 60%);
}

.rs-card.rs-tool--connect.is-connected {
  border-color: rgba(var(--cl-success), 0.35);
}

.rs-tool-head {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.rs-tool-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 11px;
  background-image: var(--v-accent-grad);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 22px -12px var(--v-glow);
}

.rs-tool-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.rs-tool-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  color: rgb(var(--cl-t-primary));
  font-size: 1rem;
  font-weight: 700;
}

.rs-tool-text {
  margin-top: 0.3rem;
  color: rgb(var(--cl-t-muted));
  font-size: 0.875rem;
  line-height: 1.55;
}

.rs-tool-text a {
  color: var(--v-ink);
  font-weight: 600;
}

.rs-tool-sub {
  margin-top: 0.3rem;
  color: rgb(var(--cl-t-muted));
  font-size: 0.75rem;
  opacity: 0.75;
}

.rs-tool-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
}

.rs-conn {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--cl-border);
  border-radius: var(--radius-input);
}

.rs-conn-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  padding: 0.8rem 1rem;
}

.rs-conn-item + .rs-conn-item {
  border-left: 1px solid var(--cl-border);
}

@media (max-width: 639px) {
  .rs-conn {
    grid-template-columns: minmax(0, 1fr);
  }

  .rs-conn-item + .rs-conn-item {
    border-top: 1px solid var(--cl-border);
    border-left: 0;
  }
}

.rs-conn-value {
  overflow: hidden;
  color: rgb(var(--cl-t-primary));
  font-size: 0.9375rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.rs-conn-value:hover {
  color: var(--v-ink);
}

.rs-conn-label {
  color: rgb(var(--cl-t-muted));
  font-size: 0.75rem;
}

.rs-confirm p {
  margin-bottom: 0.6rem;
  color: rgb(var(--cl-t-muted));
  font-size: 0.8125rem;
}

/* Pills */
.rs-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--cl-border);
  border-radius: 9999px;
  background-color: rgba(var(--cl-t-primary), 0.05);
  color: rgb(var(--cl-t-muted));
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.rs-pill--accent {
  border-color: rgba(var(--cl-accent), 0.4);
  background-color: rgba(var(--cl-accent), 0.14);
  color: var(--v-ink);
}

.rs-pill--ok {
  border-color: rgba(var(--cl-success), 0.35);
  background-color: rgba(var(--cl-success), 0.12);
  color: rgb(var(--cl-success));
}

.rs-pill-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 9999px;
  background-color: currentColor;
  box-shadow: 0 0 8px currentColor;
}

/* Buttons */
.rs-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.5rem;
  padding: 0 1rem;
  border: 1px solid var(--cl-border);
  border-radius: var(--radius-button);
  background-color: rgb(var(--cl-surface));
  color: rgb(var(--cl-t-primary));
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color var(--dur) ease, background-color var(--dur) ease, box-shadow var(--dur) ease, color var(--dur) ease;
}

.rs-btn svg {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}

.rs-btn:hover:not(:disabled) {
  border-color: rgba(var(--cl-t-primary), 0.3);
}

.rs-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.rs-btn--accent {
  border-color: transparent;
  background-color: rgb(var(--cl-accent));
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 60%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 12px 28px -12px var(--v-glow);
}

.rs-btn--accent:hover:not(:disabled) {
  border-color: transparent;
  background-color: var(--v-accent-hi);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 16px 34px -12px var(--v-glow);
}

.rs-btn--soft {
  border-color: rgba(var(--cl-accent), 0.4);
  background-color: rgba(var(--cl-accent), 0.12);
  color: var(--v-ink);
}

.rs-btn--soft:hover:not(:disabled) {
  border-color: rgb(var(--cl-accent));
  background-color: rgba(var(--cl-accent), 0.2);
}

.rs-btn--danger {
  border-color: rgba(var(--cl-error), 0.35);
  background-color: transparent;
  color: rgb(var(--cl-error));
}

.rs-btn--danger:hover:not(:disabled) {
  border-color: rgb(var(--cl-error));
  background-color: rgba(var(--cl-error), 0.08);
}

.rs-btn--danger-solid {
  border-color: transparent;
  background-color: rgb(var(--cl-error));
  color: #fff;
}

.rs-btn--danger-solid:hover:not(:disabled) {
  border-color: transparent;
  background-color: color-mix(in oklch, rgb(var(--cl-error)), #000 12%);
}

.rs-btn--lg {
  height: 2.875rem;
  padding: 0 1.4rem;
  font-size: 0.9375rem;
}

.rs-btn-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.rs-btn-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.rs-btn-loading svg {
  animation: rs-spin 0.8s linear infinite;
}

@keyframes rs-spin {
  to { transform: rotate(360deg); }
}

/* ---------- Catalog ---------- */

.rs-catalog {
  overflow: hidden;
  margin-top: 1rem;
  padding: 0;
}

.rs-catalog-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem 1.5rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--cl-border);
}

.rs-card-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: rgb(var(--cl-t-primary));
  font-size: 1rem;
  font-weight: 700;
}

.rs-card-title svg {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--v-ink);
}

.rs-card-sub {
  margin-top: 0.25rem;
  color: rgb(var(--cl-t-muted));
  font-size: 0.8125rem;
}

.rs-search {
  position: relative;
  display: flex;
  align-items: center;
  width: min(100%, 15rem);
}

.rs-search svg {
  position: absolute;
  left: 0.75rem;
  width: 0.95rem;
  height: 0.95rem;
  color: rgb(var(--cl-t-muted));
  pointer-events: none;
}

.rs-search input {
  width: 100%;
  height: 2.375rem;
  padding: 0 0.85rem 0 2.2rem;
  border: 1px solid var(--cl-border);
  border-radius: var(--radius-input);
  background-color: rgb(var(--cl-background));
  color: rgb(var(--cl-t-primary));
  font-size: 0.875rem;
}

.rs-search input:focus,
.rs-input:focus,
.rs-textarea:focus {
  outline: none;
  border-color: rgb(var(--cl-accent));
  box-shadow: 0 0 0 4px rgba(var(--cl-accent), 0.18);
}

[data-scheme="dark"] :is(.rs-search input, .rs-input, .rs-textarea):focus {
  border-color: var(--v-ink);
  box-shadow: 0 0 0 4px rgba(var(--cl-accent), 0.3);
}

.rs-table-wrap {
  overflow-x: auto;
}

.rs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.rs-table th {
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--cl-border);
  color: rgb(var(--cl-t-muted));
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.rs-table td {
  padding: 0.8rem 1.25rem;
  border-bottom: 1px solid var(--cl-border);
  color: rgb(var(--cl-t-primary));
  vertical-align: middle;
  white-space: nowrap;
}

.rs-table tbody tr:last-child td {
  border-bottom: 0;
}

.rs-table tbody tr:hover td {
  background-color: rgba(var(--cl-t-primary), 0.025);
}

.rs-table .rs-right {
  text-align: right;
}

.rs-muted {
  color: rgb(var(--cl-t-muted)) !important;
}

.rs-prod {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.rs-thumb {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9px;
  object-fit: cover;
}

.rs-thumb--mono {
  display: grid;
  place-items: center;
  background-image: var(--v-accent-grad);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.rs-prod-name {
  font-weight: 600;
  transition: color var(--dur) ease;
}

.rs-prod-name:hover {
  color: var(--v-ink);
}

.rs-prod-variant {
  margin-top: 0.1rem;
  color: rgb(var(--cl-t-muted));
  font-size: 0.75rem;
}

.rs-price {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.rs-save {
  margin-left: 0.4rem;
  padding: 0.1rem 0.4rem;
  border-radius: 6px;
  background-color: rgba(var(--cl-success), 0.12);
  color: rgb(var(--cl-success));
  font-size: 0.6875rem;
  font-weight: 700;
}

.rs-infinite {
  font-size: 1.125rem;
  line-height: 1;
}

.rs-out {
  color: rgb(var(--cl-error));
  font-weight: 600;
}

.rs-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--cl-border);
  border-radius: 8px;
  color: rgb(var(--cl-t-muted));
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--dur) ease, border-color var(--dur) ease, background-color var(--dur) ease;
}

.rs-chip span {
  display: inline-flex;
}

.rs-chip svg {
  width: 0.8rem;
  height: 0.8rem;
}

.rs-chip:hover {
  border-color: rgba(var(--cl-accent), 0.45);
  color: rgb(var(--cl-t-primary));
}

.rs-chip.is-copied {
  border-color: rgba(var(--cl-success), 0.4);
  background-color: rgba(var(--cl-success), 0.1);
  color: rgb(var(--cl-success));
}

.rs-empty {
  padding: 2rem 1.25rem;
  color: rgb(var(--cl-t-muted));
  font-size: 0.875rem;
  text-align: center;
}

.rs-catalog-foot {
  padding: 0 1.25rem 1rem;
}

/* Phones: each product option becomes a small card */
@media (max-width: 639px) {
  .rs-search {
    width: 100%;
  }

  .rs-table thead {
    display: none;
  }

  .rs-table,
  .rs-table tbody {
    display: block;
  }

  .rs-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem 1rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--cl-border);
  }

  .rs-table tbody tr:last-child {
    border-bottom: 0;
  }

  .rs-table td {
    display: block;
    padding: 0;
    border: 0 !important;
    white-space: normal;
  }

  .rs-table tbody tr:hover td {
    background-color: transparent;
  }

  .rs-table td:nth-child(1) { grid-area: 1 / 1 / 2 / 3; }
  .rs-table td:nth-child(2) { grid-area: 2 / 1; text-align: left; }
  .rs-table td:nth-child(3) { grid-area: 2 / 2; }
  .rs-table td:nth-child(4) { grid-area: 3 / 1; text-align: left; }
  .rs-table td:nth-child(5) { grid-area: 3 / 2; align-self: end; text-align: right; }

  .rs-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.25rem;
    color: rgb(var(--cl-t-muted));
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
}

/* ---------- Suspended / under review ---------- */

.rs-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  text-align: center;
}

.rs-state-icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 16px;
  background-image: var(--v-accent-grad);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 16px 34px -14px var(--v-glow);
}

.rs-state-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.rs-state-icon--error {
  background-image: none;
  background-color: rgba(var(--cl-error), 0.12);
  box-shadow: inset 0 0 0 1px rgba(var(--cl-error), 0.3);
  color: rgb(var(--cl-error));
}

.rs-state-title {
  margin-top: 1.1rem;
  color: rgb(var(--cl-t-primary));
  font-family: var(--ff-heading);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.rs-state-text {
  max-width: 32rem;
  margin-top: 0.5rem;
  color: rgb(var(--cl-t-muted));
  line-height: 1.6;
}

.rs-state-btn {
  margin-top: 1.5rem;
}

.rs-steps {
  display: flex;
  justify-content: center;
  margin-top: 1.75rem;
}

.rs-steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 7.5rem;
  color: rgb(var(--cl-t-muted));
  font-size: 0.8125rem;
  font-weight: 600;
}

.rs-steps li + li::before {
  content: '';
  position: absolute;
  top: 0.95rem;
  right: 50%;
  width: 100%;
  height: 2px;
  background-color: var(--cl-border);
}

.rs-steps li.is-done + li::before {
  background-image: linear-gradient(90deg, rgb(var(--cl-accent)), rgba(var(--cl-accent), 0.35));
}

.rs-steps li.is-active {
  color: rgb(var(--cl-t-primary));
}

.rs-step-dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 2px solid var(--cl-border);
  border-radius: 9999px;
  background-color: rgb(var(--cl-surface));
  color: rgb(var(--cl-t-muted));
  font-size: 0.75rem;
}

.is-done > .rs-step-dot {
  border-color: transparent;
  background-image: var(--v-accent-grad);
  color: #fff;
}

.is-done > .rs-step-dot svg {
  width: 0.9rem;
  height: 0.9rem;
  stroke-width: 3;
}

.is-active > .rs-step-dot {
  border-color: rgb(var(--cl-accent));
}

.rs-pulse {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 9999px;
  background-color: var(--v-ink);
  animation: rs-pulse 1.6s ease-in-out infinite;
}

@keyframes rs-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--cl-accent), 0.6); }
  50% { box-shadow: 0 0 0 6px rgba(var(--cl-accent), 0); }
}

/* ---------- Not a reseller yet ---------- */

.rs-card.rs-pitch {
  overflow: hidden;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border-color: rgba(var(--cl-accent), 0.3);
  background-image: radial-gradient(70% 120% at 100% 0%, rgba(var(--cl-accent), 0.2), transparent 60%);
}

.rs-pitch-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(var(--cl-accent), 0.35);
  border-radius: 9999px;
  background-color: rgba(var(--cl-accent), 0.1);
  color: var(--v-ink);
  font-size: 0.75rem;
  font-weight: 700;
}

.rs-pitch-eyebrow svg {
  width: 0.85rem;
  height: 0.85rem;
}

.rs-pitch-title {
  margin-top: 0.9rem;
  color: rgb(var(--cl-t-primary));
  font-family: var(--ff-heading);
  font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.rs-pitch-text {
  max-width: 36rem;
  margin-top: 0.5rem;
  color: rgb(var(--cl-t-muted));
  font-size: 0.9375rem;
  line-height: 1.6;
}

.rs-perks {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cl-border);
}

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

.rs-perks li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: rgb(var(--cl-t-muted));
  font-size: 0.8125rem;
  line-height: 1.5;
}

.rs-perks b {
  display: block;
  margin-bottom: 0.1rem;
  color: rgb(var(--cl-t-primary));
  font-size: 0.9rem;
  font-weight: 700;
}

/* The shop's public tiers, drawn like the homepage bracket cards */
.rs-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.rs-tiers .rt-card {
  padding: 1.15rem;
}

/* Phones: the starting tier on its own row, the rest two by two (as on the homepage) */
@media (max-width: 639px) {
  .rs-tiers > .rt-card--featured:first-child {
    grid-column: 1 / -1;
  }
}

.rs-tiers .rt-value {
  font-size: clamp(1.75rem, 1.5rem + 0.8vw, 2.25rem);
}

/* Room for two lines, so every card's divider lines up */
.rs-tiers .rt-req {
  min-height: 3.35rem;
  font-size: 0.8125rem;
}

/* Narrow tier cards: drop the badge so the tier name keeps its room */
@container (max-width: 13rem) {
  .rs-tiers .rt-badge {
    display: none;
  }
}

.rs-tier-img {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 8px;
  object-fit: cover;
}

.rs-join {
  margin-top: 1rem;
}

.rs-join-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.rs-join-title {
  color: rgb(var(--cl-t-primary));
  font-family: var(--ff-heading);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.rs-join-text {
  display: block;
  margin-top: 0.3rem;
  color: rgb(var(--cl-t-muted));
  font-size: 0.9375rem;
}

.rs-apply {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.rs-textarea {
  width: 100%;
  min-height: 7.5rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--cl-border);
  border-radius: var(--radius-input);
  background-color: rgb(var(--cl-background));
  color: rgb(var(--cl-t-primary));
  font-size: 0.9375rem;
  line-height: 1.55;
  resize: vertical;
}

.rs-textarea::placeholder {
  color: rgb(var(--cl-t-muted));
  opacity: 0.7;
}

.rs-apply-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.rs-count {
  color: rgb(var(--cl-t-muted));
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 479px) {
  .rs-apply-foot {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .rs-count {
    text-align: right;
  }
}

/* ---------- Modals (API key, dynamic delivery) ---------- */

.rs-modal {
  overflow: hidden;
  border: 1px solid var(--cl-border);
  border-radius: calc(var(--radius-card) + 4px);
  background-color: rgb(var(--cl-surface-raised));
  box-shadow: var(--shadow-modal), 0 40px 90px -40px var(--v-glow);
  color: rgb(var(--cl-t-primary));
}

[data-scheme="dark"] .rs-modal {
  background-image: linear-gradient(180deg, rgba(var(--cl-accent), 0.1), rgba(var(--cl-accent), 0) 45%);
}

.rs-modal-head {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.4rem 1.5rem 0;
}

.rs-modal-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 12px;
  background-image: var(--v-accent-grad);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 12px 26px -12px var(--v-glow);
}

.rs-modal-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.rs-modal-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--ff-heading);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.rs-modal-sub {
  margin-top: 0.3rem;
  color: rgb(var(--cl-t-muted));
  font-size: 0.875rem;
  line-height: 1.55;
}

.rs-modal-close {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  margin: -0.25rem -0.4rem 0 auto;
  border-radius: 9px;
  color: rgb(var(--cl-t-muted));
  transition: color var(--dur) ease, background-color var(--dur) ease;
}

.rs-modal-close:hover {
  background-color: rgba(var(--cl-t-primary), 0.06);
  color: rgb(var(--cl-t-primary));
}

.rs-modal-close svg {
  width: 1.15rem;
  height: 1.15rem;
}

.rs-modal-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem 1.5rem 0;
}

.rs-modal-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-top: 1.25rem;
  padding: 1rem 1.5rem 1.4rem;
  border-top: 1px solid var(--cl-border);
}

.rs-modal-foot--start {
  justify-content: flex-start;
}

.rs-modal-note {
  flex: 1 1 14rem;
  color: rgb(var(--cl-t-muted));
  font-size: 0.75rem;
}

.rs-modal-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.35rem;
  color: var(--v-ink);
  font-size: 0.8125rem;
  font-weight: 600;
}

.rs-modal-link svg {
  width: 0.85rem;
  height: 0.85rem;
}

.rs-key {
  padding: 0.9rem;
  border: 1px solid rgba(var(--cl-accent), 0.35);
  border-radius: var(--radius-input);
  background-color: rgba(var(--cl-accent), 0.08);
}

.rs-key-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 700;
}

.rs-key-value {
  display: block;
  margin-top: 0.6rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--cl-border);
  border-radius: 8px;
  background-color: rgb(var(--cl-background));
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  word-break: break-all;
  user-select: all;
}

.rs-key-note {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin-top: 0.6rem;
  color: rgb(var(--cl-warning));
  font-size: 0.75rem;
}

.rs-key-note svg {
  flex-shrink: 0;
  width: 0.9rem;
  height: 0.9rem;
  margin-top: 0.05rem;
}

.rs-key-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--cl-border);
  border-radius: var(--radius-input);
  background-color: rgba(var(--cl-t-primary), 0.03);
  color: rgb(var(--cl-t-muted));
  font-size: 0.8125rem;
}

.rs-modal-steps {
  display: grid;
  gap: 0.7rem;
  padding: 1rem;
  border: 1px solid var(--cl-border);
  border-radius: var(--radius-input);
  background-color: rgba(var(--cl-t-primary), 0.025);
}

.rs-modal-steps li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  color: rgb(var(--cl-t-muted));
  font-size: 0.875rem;
  line-height: 1.5;
}

.rs-modal-step-num {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 7px;
  background-image: var(--v-accent-grad);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 800;
}

.rs-field-label {
  display: block;
  margin-bottom: 0.45rem;
  color: rgb(var(--cl-t-primary));
  font-size: 0.8125rem;
  font-weight: 600;
}

.rs-field-input {
  position: relative;
  display: flex;
  align-items: center;
}

.rs-field-input svg {
  position: absolute;
  left: 0.9rem;
  width: 1rem;
  height: 1rem;
  color: rgb(var(--cl-t-muted));
  pointer-events: none;
}

.rs-input {
  width: 100%;
  height: 2.875rem;
  padding: 0 1rem 0 2.6rem;
  border: 1px solid var(--cl-border);
  border-radius: var(--radius-input);
  background-color: rgb(var(--cl-background));
  color: rgb(var(--cl-t-primary));
  font-size: 0.9375rem;
}

.rs-input::placeholder {
  color: rgb(var(--cl-t-muted));
  opacity: 0.7;
}

.rs-field-help {
  margin-top: 0.45rem;
  color: rgb(var(--cl-t-muted));
  font-size: 0.75rem;
  line-height: 1.5;
}

.rs-danger {
  padding: 1rem 1.5rem 1.4rem;
  border-top: 1px solid var(--cl-border);
  background-color: rgba(var(--cl-error), 0.04);
}

.rs-danger-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.rs-danger-title {
  color: rgb(var(--cl-t-primary));
  font-size: 0.875rem;
  font-weight: 600;
}

.rs-danger-text {
  margin-top: 0.15rem;
  color: rgb(var(--cl-t-muted));
  font-size: 0.75rem;
}

.rs-danger-actions {
  display: flex;
  flex-shrink: 0;
  gap: 0.5rem;
}

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

/* ------------------------------------------------------------------ */
/* Motion                                                              */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .svc-card,
  .svc-cta,
  .svc-cta svg,
  .sa-status-card,
  .sa-status-card-arrow,
  .sa-product-card,
  .sa-features-item,
  :is(a, button).bg-accent-500.text-on-accent,
  .sa-btn--primary.sa-btn--solid {
    transition: none !important;
    transform: none !important;
  }
}