.section-title {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 10px !important;
  font-size: 42px !important;
}

.section-title h2 {
  color: #FFFFFF !important;
  font-size: 42px !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
  text-align: center !important;
  width: 100% !important;
}

.section-subtitle {
  text-align: center !important;
  margin-bottom: 1rem !important;
}

.section-subtitle p {
  color: rgba(255,255,255,0.8) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  text-align: center !important;
  max-width: 800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: #000000;
}

::-webkit-scrollbar-thumb {
  background: #1a1a1a;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: #2a2a2a;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #1a1a1a #000000;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1.5rem;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(20, 20, 20, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    margin-bottom: 1rem !important;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0;
    animation: popDownContent 1.2s cubic-bezier(0.23, 0.86, 0.39, 0.96) 0.2s forwards;
}

.hero-badge svg {
  width: 16px;
  height: 16px;
  color: #ffffff;
}

.hero-badge span {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.02em;
}
/* ═══════════════════════════════════════════════════════════════════════════
   FYE PRO 2 — design layer
   Built after a measured freeze. Deliberately excluded, because each one was
   proven to stall the renderer on this shop:
     · transform/opacity animation on any container holding large images
     · filter: blur() on anything but small decorative elements
     · backdrop-filter on large or scrolling surfaces
     · background-attachment: fixed
     · content-visibility / contain on sections
     · infinite animations of any kind
     · SVG gaussian-blur filters
   Everything below is paint-cheap: colour, spacing, borders, gradients, and
   transitions on small elements only.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --fye: #2DD4BF;
  --fye-bright: #5EEAD4;
  --fye-line: rgba(255, 255, 255, 0.10);
  --fye-surface: rgba(255, 255, 255, 0.035);
  --fye-shell: 1400px;
}

::selection { background: rgba(45, 212, 191, 0.28); color: #fff; }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--fye);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── Width ───────────────────────────────────────────────────────────────── */
.container, .container-lg, .container-xl, .container-xxl {
  max-width: var(--fye-shell) !important;
  padding-left: clamp(1rem, 3vw, 2.25rem) !important;
  padding-right: clamp(1rem, 3vw, 2.25rem) !important;
}

.hero .content { max-width: 1100px !important; }
.section-subtitle p { max-width: 880px !important; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .hero { min-height: min(84vh, 780px) !important; }
  .hero.height-medium { min-height: min(60vh, 620px) !important; }
  .hero .container { padding: 3.25rem 2rem !important; }
}

.hero h1, .hero .content h1 {
  font-size: clamp(2.5rem, 5.2vw, 4.25rem) !important;
  line-height: 1.07 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 1.15rem !important;
}

.hero .content > p {
  font-size: clamp(1rem, 1.2vw, 1.15rem) !important;
  line-height: 1.65 !important;
  color: rgba(255, 255, 255, 0.74) !important;
}

.hero-btn {
  padding: 0.95rem 2.1rem !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hero-btn-primary {
  background: linear-gradient(135deg, var(--fye-bright), var(--fye)) !important;
  color: #04211E !important;
  border: none !important;
  box-shadow: 0 12px 36px rgba(45, 212, 191, 0.24);
}

.hero-btn-primary:hover { transform: translateY(-2px); color: #04211E !important; }

.hero-btn-secondary {
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

.hero .stat-item {
  padding: 1rem 1.4rem !important;
  border-radius: 14px !important;
  border: 1px solid var(--fye-line) !important;
  background: var(--fye-surface) !important;
}

.hero .stat-value { font-size: 1.45rem !important; font-weight: 700 !important; }
.hero .stat-icon { color: var(--fye) !important; }

/* The hero product shot: a plain image, never animated. */
.hero .image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 62vh;
  object-fit: contain;
  border-radius: 16px;
  border: 1px solid var(--fye-line);
}

/* ── Section rhythm ──────────────────────────────────────────────────────── */
.py-20 { padding-top: 3.25rem !important; padding-bottom: 3.25rem !important; }
.section-title { margin-bottom: 0.5rem !important; }
.section-subtitle { margin-bottom: 2rem !important; }

@media (max-width: 640px) {
  .py-20 { padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; }
  .section-title h2 { font-size: 27px !important; line-height: 1.25 !important; }
  .hero h1 { font-size: 2rem !important; }
}

/* ── Cards: feature, product, payment, faq ───────────────────────────────── */
.feature-card, .product-card, .payment-card, .faq-card, .quality-card {
  border-radius: 16px !important;
  border: 1px solid var(--fye-line) !important;
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.feature-card { min-height: 156px; padding: 1.6rem !important; }
.feature-card:hover, .product-card:hover { transform: translateY(-4px); border-color: rgba(45, 212, 191, 0.32) !important; }

.feature-icon {
  width: 48px !important; height: 48px !important;
  display: grid !important; place-items: center;
  border-radius: 13px !important;
  font-size: 1.25rem !important;
  color: var(--fye) !important;
  background: rgba(45, 212, 191, 0.12) !important;
  border: 1px solid rgba(45, 212, 191, 0.26) !important;
  margin-bottom: 1rem !important;
}

.feature-title, .feature-title-text { font-size: 1.05rem !important; font-weight: 700 !important; }
.feature-description { font-size: 0.9rem !important; line-height: 1.6 !important; color: rgba(255,255,255,0.62) !important; }

.row.products, .products-page .row { justify-content: center; }
.product-card .price { color: var(--fye) !important; font-weight: 700 !important; }

/* ── Payment brand marks ─────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .payments-grid-duo .payment-item { width: calc(50% - 1rem); max-width: 420px; }
}

.payment-brand { margin-bottom: 1.25rem; width: 100%; display: flex; justify-content: center; }

.payment-brand svg {
  width: 64px; height: 64px; border-radius: 18px;
  transition: transform 0.25s ease;
}

.payment-card:hover .payment-brand svg { transform: translateY(-2px); }

.payment-points {
  list-style: none; margin: 1.25rem 0 0; padding: 1.1rem 0 0; width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; flex-direction: column; gap: 0.55rem;
}

.payment-points li {
  display: flex; align-items: flex-start; gap: 0.55rem;
  font-size: 0.82rem; line-height: 1.45; text-align: left;
  color: rgba(255, 255, 255, 0.7);
}

.payment-points i { flex: 0 0 auto; margin-top: 0.2rem; font-size: 0.7rem; color: var(--fye); }

/* ── Navbar ──────────────────────────────────────────────────────────────── */
.navbar { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.navbar .nav-link:hover, .navbar a:hover { color: var(--fye) !important; }

/* ── Accent details ──────────────────────────────────────────────────────── */
.hero-badge { border-color: rgba(45, 212, 191, 0.22) !important; }
.hero-badge i, .hero-badge-icon { color: var(--fye) !important; }
.faq-card i { color: var(--fye) !important; }
.quality-feature i.fa-check, .quality-check { color: var(--fye) !important; }

/* ── Guest checkout email ────────────────────────────────────────────────── */
.guest-email { margin-top: 1.15rem; }
.guest-email .form-label { display: block; margin-bottom: 0.4rem; font-size: 0.85rem; font-weight: 600; }

.guest-email-input {
  width: 100%; padding: 0.8rem 1rem; border-radius: 12px;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--fye-line) !important;
  color: #fff !important; font-size: 0.95rem;
}

.guest-email-input:focus {
  outline: none;
  border-color: rgba(45, 212, 191, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.15);
}

.guest-email-hint { margin: 0.4rem 0 0; font-size: 0.78rem; color: rgba(255,255,255,0.5); }
.guest-email-error { margin: 0.4rem 0 0; font-size: 0.8rem; font-weight: 500; color: #FF8F8F; }

/* ── One-per-order quantity ──────────────────────────────────────────────── */
.qty-locked {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.85rem 1rem; border-radius: 13px;
  border: 1px solid rgba(45, 212, 191, 0.26);
  background: rgba(45, 212, 191, 0.07);
}

.qty-locked-value {
  display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto;
  border-radius: 12px; font-size: 1.2rem; font-weight: 800;
  color: #04211E; background: linear-gradient(135deg, var(--fye-bright), var(--fye));
}

.qty-locked-text { display: flex; flex-direction: column; line-height: 1.35; }
.qty-locked-text strong { font-size: 0.93rem; color: #fff; font-weight: 600; }
.qty-locked-text small { font-size: 0.79rem; color: rgba(255,255,255,0.6); }
.qty-limit-hint { font-size: 0.8rem; font-weight: 500; color: rgba(255,255,255,0.5); }

/* ── Closing call to action ──────────────────────────────────────────────── */
.fye-final-cta-wrap { padding: 0 clamp(1rem, 3vw, 2.25rem) 3.5rem; }

.fye-final-cta {
  max-width: var(--fye-shell); margin: 0 auto; text-align: center;
  padding: clamp(2.25rem, 4vw, 3.5rem) clamp(1.25rem, 4vw, 3rem);
  border-radius: 22px;
  border: 1px solid rgba(45, 212, 191, 0.22);
  background: linear-gradient(160deg, rgba(16, 22, 24, 0.96), rgba(8, 12, 13, 0.96));
}

.fye-final-cta h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 800; margin-bottom: 0.7rem; color: #fff; }
.fye-final-cta p { font-size: 1rem; color: rgba(255,255,255,0.65); margin-bottom: 1.5rem; }

.fye-final-cta a.fye-final-cta-btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.95rem 2.2rem; font-size: 1rem; font-weight: 700;
  border-radius: 999px; text-decoration: none; color: #04211E;
  background: linear-gradient(135deg, var(--fye-bright), var(--fye));
  transition: transform 0.25s ease;
}

.fye-final-cta a.fye-final-cta-btn:hover { transform: translateY(-2px); color: #04211E; }
.fye-final-cta-note { margin: 0.9rem 0 0; font-size: 0.82rem; color: rgba(255,255,255,0.45); }

.payment-brand-applepay svg { border: 1px solid rgba(255,255,255,0.14); }
@media (min-width: 1024px) {
  .payments-grid .payment-item { width: calc(33.333% - 1.34rem); max-width: 380px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FYE — VISUAL POLISH
   Everything here is paint-cheap by construction: colour, borders, gradients,
   spacing, and transitions on small elements only. Nothing animates a
   container that holds a large image, nothing filters, nothing repeats
   forever — see CLAUDE.md for why those are banned in this theme.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --fye-ink: #F2F7F8;
  --fye-dim: rgba(255, 255, 255, 0.62);
  --fye-faint: rgba(255, 255, 255, 0.40);
  --fye-hair: rgba(255, 255, 255, 0.08);
  --fye-panel: linear-gradient(165deg, rgba(20, 27, 29, 0.92), rgba(10, 14, 15, 0.94));
}

/* ── Section headers ─────────────────────────────────────────────────────── */
.section-title h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.12 !important;
}

.section-subtitle p {
  font-size: 1rem !important;
  color: var(--fye-dim) !important;
}

/* A hairline under each section heading, brightest at the centre. */
.section-subtitle::after {
  content: '';
  display: block;
  width: 120px;
  height: 1px;
  margin: 1.5rem auto 0;
  background: linear-gradient(90deg, transparent, rgba(45, 212, 191, 0.55), transparent);
}

.hero-badge {
  background: linear-gradient(180deg, rgba(45, 212, 191, 0.10), rgba(0, 0, 0, 0.4)) !important;
  border-color: rgba(45, 212, 191, 0.30) !important;
  letter-spacing: 0.14em !important;
  font-size: 0.68rem !important;
}

/* ── Panels share one surface treatment ──────────────────────────────────── */
.feature-card,
.payment-card,
.faq-card,
.quality-card,
.showcase-stat,
.product-card {
  background: var(--fye-panel) !important;
  border: 1px solid var(--fye-hair) !important;
  border-radius: 18px !important;
}

/* ── Feature grid ────────────────────────────────────────────────────────── */
.feature-card {
  position: relative;
  padding: 1.75rem 1.6rem !important;
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

/* Accent hairline along the top edge, revealed on hover. Static gradient, no
   filter, no layer promotion. */
.feature-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(45, 212, 191, 0.7), transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.feature-card:hover { transform: translateY(-3px); border-color: rgba(45, 212, 191, 0.30) !important; }
.feature-card:hover::before { opacity: 1; }

.feature-icon {
  width: 50px !important; height: 50px !important;
  border-radius: 14px !important;
  background: linear-gradient(150deg, rgba(45, 212, 191, 0.18), rgba(45, 212, 191, 0.05)) !important;
  border: 1px solid rgba(45, 212, 191, 0.28) !important;
  color: #5EEAD4 !important;
}

.feature-title, .feature-title-text { letter-spacing: -0.01em; }
.feature-description { color: var(--fye-dim) !important; }

/* ── Payment methods ─────────────────────────────────────────────────────── */
.payments-grid { gap: 1.25rem !important; }

.payment-card {
  padding: 2rem 1.6rem !important;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.payment-card:hover { transform: translateY(-3px); border-color: rgba(45, 212, 191, 0.32) !important; }

/* The logo sits on its own plinth so all three read as one set despite very
   different brand colours. */
.payment-brand {
  margin-bottom: 1.35rem !important;
  padding: 1.1rem 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--fye-hair);
}

.payment-brand svg {
  width: 62px !important;
  height: 62px !important;
  border-radius: 17px !important;
  display: block;
  margin: 0 auto;
}

.payment-title {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem !important;
}

.payment-description { color: var(--fye-dim) !important; font-size: 0.9rem !important; }

.payment-badge {
  background: rgba(45, 212, 191, 0.12) !important;
  border: 1px solid rgba(45, 212, 191, 0.30) !important;
  color: #5EEAD4 !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-radius: 999px !important;
  padding: 0.35rem 0.85rem !important;
}

.payment-security {
  border-radius: 18px !important;
  border: 1px solid var(--fye-hair) !important;
  background: var(--fye-panel) !important;
}

.payment-security i { color: #5EEAD4 !important; }

/* ── Licence comparison ──────────────────────────────────────────────────── */
.quality-card { padding: 2rem 1.75rem !important; }

.quality-premium,
.quality-card.premium,
.quality-column:first-child {
  border-color: rgba(45, 212, 191, 0.38) !important;
  background: linear-gradient(165deg, rgba(24, 36, 37, 0.95), rgba(10, 14, 15, 0.95)) !important;
}

/* ── Products ────────────────────────────────────────────────────────────── */
.product-card { overflow: hidden; transition: border-color 0.25s ease, transform 0.25s ease; }
.product-card:hover { transform: translateY(-3px); }
.product-title { font-size: 1.1rem !important; font-weight: 700 !important; }
.product-card .price { font-size: 1.25rem !important; }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq-card { transition: border-color 0.25s ease; }
.faq-card:hover { border-color: rgba(45, 212, 191, 0.26) !important; }
.faq-question { font-weight: 600 !important; letter-spacing: -0.005em; }
.faq-answer { color: var(--fye-dim) !important; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.footer-modern { border-top: 1px solid var(--fye-hair); }
.footer-links a, .footer-modern a { transition: color 0.2s ease; }
.footer-links a:hover, .footer-modern a:hover { color: #5EEAD4 !important; }
.footer-copyright { color: var(--fye-faint) !important; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn, .hero-btn, .modern-btn { letter-spacing: 0.005em; }

.product-form .buy-buttons .btn-primary,
.product-form .buy-buttons .btn:first-child {
  background: linear-gradient(135deg, #5EEAD4, #2DD4BF) !important;
  border: none !important;
  color: #04211E !important;
  font-weight: 700 !important;
}

/* ── Announcement bar ────────────────────────────────────────────────────── */
.announcement, .announcement-bar {
  border-bottom: 1px solid rgba(45, 212, 191, 0.18);
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .payment-card { padding: 1.5rem 1.25rem !important; }
  .payment-brand svg { width: 54px !important; height: 54px !important; }
  .feature-card { padding: 1.4rem 1.25rem !important; }
  .section-subtitle::after { width: 84px; margin-top: 1.1rem; }
}

/* ── Colour-scheme independence ──────────────────────────────────────────────
   features.njk, faq.njk and customer-sidebar.njk set dark-on-light text and
   only correct it inside `@media (prefers-color-scheme: dark)`. This storefront
   is always dark (`data-bs-theme="dark"`), so any visitor whose OS is in light
   mode was reading #262626 text on a near-black card — effectively invisible.
   Text colour must follow the site, not the operating system. */
.feature-card, .feature-title, .feature-title-text,
.faq-card, .faq-question, .faq-question-text {
  color: var(--fye-ink, #F2F7F8) !important;
}

.feature-description, .faq-answer, .faq-answer * {
  color: rgba(255, 255, 255, 0.62) !important;
}

.feature-card, .faq-card {
  border-color: rgba(255, 255, 255, 0.09) !important;
}

.feature-icon i, .feature-icon svg { color: #5EEAD4 !important; }

/* ── Comparison table: unavailable must not look included ────────────────────
   Both columns rendered the same teal badge, so a struck-through "not included"
   row still read as a tick at a glance. */
.quality-feature.unavailable .quality-check,
.quality-feature[class*="unavailable"] i,
.quality-feature .fa-xmark, .quality-feature .fa-times, .quality-feature .fa-circle-xmark {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.35) !important;
}

.quality-feature.unavailable, .quality-feature[class*="unavailable"] {
  opacity: 0.55;
}

/* Apple Pay uses the official Font Awesome brand glyph rather than a traced
   path; the tile keeps it the same size and shape as the other two marks. */
.payment-brand-applepay .payment-brand-tile {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto;
  border-radius: 17px;
  background: #0B0B0D;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.payment-brand-applepay .payment-brand-tile i {
  font-size: 34px;
  line-height: 1;
  color: #ffffff;
}

@media (max-width: 640px) {
  .payment-brand-applepay .payment-brand-tile { width: 54px; height: 54px; border-radius: 15px; }
  .payment-brand-applepay .payment-brand-tile i { font-size: 29px; }
}

/* ── Brand marks ─────────────────────────────────────────────────────────────
   Cash App and Apple Pay render as an official mark knocked out of
   the brand's own colour, on an identical tile, so the row reads as one set.
   Logos are inlined (Simple Icons, CC0) — no external icon host to fail. */
.payment-brand-tile {
  display: grid !important;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto;
  border-radius: 17px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.payment-brand-tile svg { display: block; }
.payment-brand-tile svg { width: 36px !important; height: 36px !important; border-radius: 0 !important; }

@media (max-width: 640px) {
  .payment-brand-tile { width: 54px; height: 54px; border-radius: 15px; }
  .payment-brand-tile svg { width: 31px; height: 31px; }
}

/* ── Payment marks: monochrome ───────────────────────────────────────────────
   One weight, one colour, one size — the row reads as a set instead of three
   competing brand tiles. */
.payment-brand-mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: border-color 0.25s ease, background 0.25s ease;
}

.payment-brand-mark i {
  font-size: 32px;
  line-height: 1;
  color: #ffffff;
}

.payment-card:hover .payment-brand-mark {
  background: rgba(45, 212, 191, 0.10);
  border-color: rgba(45, 212, 191, 0.35);
}

.payment-brand-tile { display: none !important; }

@media (max-width: 640px) {
  .payment-brand-mark { width: 56px; height: 56px; border-radius: 16px; }
  .payment-brand-mark i { font-size: 27px; }
}

/* ── Legal pages inherit the site backdrop ───────────────────────────────────
   terms / privacy / refund each painted their own #030303 panel and floated
   hotlinked decorative images over it, so they looked like a different site. */
.policy-page, .terms-page, .privacy-page, .refund-page,
.policy-content, .policy-hero {
  background: transparent !important;
}

/* ── Live app status ─────────────────────────────────────────────────────── */
.fye-app-status {
  max-width: 720px;
  margin: 0 auto 2rem;
  padding: 1.1rem 1.35rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(165deg, rgba(20, 27, 29, 0.92), rgba(10, 14, 15, 0.94));
}

.fye-status-row { display: flex; align-items: center; gap: 0.9rem; }

.fye-status-dot {
  width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto;
  background: #8E8E93;
}

.fye-status-dot[data-state="up"]       { background: #34D158; box-shadow: 0 0 0 4px rgba(52, 209, 88, 0.16); }
.fye-status-dot[data-state="degraded"] { background: #FF9F0A; box-shadow: 0 0 0 4px rgba(255, 159, 10, 0.16); }
.fye-status-dot[data-state="down"]     { background: #FF453A; box-shadow: 0 0 0 4px rgba(255, 69, 58, 0.16); }

.fye-status-copy { display: flex; flex-direction: column; line-height: 1.35; }
.fye-status-title { font-size: 0.95rem; color: #fff; font-weight: 600; }
.fye-status-text { font-size: 0.83rem; color: rgba(255, 255, 255, 0.6); }
.fye-status-latency { margin-left: auto; font-size: 0.8rem; color: rgba(255,255,255,0.45); font-variant-numeric: tabular-nums; }

/* ── Recent purchase toast (real orders only) ────────────────────────────── */
.fye-order-toast {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  max-width: min(92vw, 380px);
  padding: 0.85rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(165deg, rgba(20, 27, 29, 0.97), rgba(10, 14, 15, 0.97));
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.fye-order-toast.is-in { opacity: 1; transform: translateY(0); }

.fye-order-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  background: #34D158;
  box-shadow: 0 0 0 4px rgba(52, 209, 88, 0.16);
}

.fye-order-copy { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.fye-order-line { font-size: 0.86rem; color: #fff; font-weight: 600; }
.fye-order-when { font-size: 0.76rem; color: rgba(255, 255, 255, 0.5); }

.fye-order-close {
  margin-left: auto;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.4);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.15rem;
}

.fye-order-close:hover { color: #fff; }

@media (max-width: 640px) {
  .fye-order-toast { left: 10px; right: 10px; bottom: 10px; max-width: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT PASS 2 — hero balance, trust row, single-product width
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero: two real columns ──────────────────────────────────────────────────
   The stock hero stacks its container as a centred column, so with a side image
   the copy sat in the left half and the image hung low on the right, leaving a
   large dead area at the top. A grid gives both halves the full height and
   centres them against each other. */
@media (min-width: 992px) {
  .hero .container {
    display: grid !important;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    align-items: center !important;
    gap: clamp(2rem, 4vw, 4.5rem) !important;
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .hero .content {
    text-align: left !important;
    margin: 0 !important;
    max-width: none !important;
  }

  .hero .content > p { margin-left: 0 !important; margin-right: 0 !important; max-width: 34rem; }
  .hero .hero-buttons { justify-content: flex-start !important; }
  .hero .hero-stats { justify-content: flex-start !important; }
  .hero .hero-badge { margin-left: 0 !important; }

  .hero .image { margin: 0 !important; display: flex; align-items: center; justify-content: center; }
  .hero .image img { max-height: 58vh; width: 100%; object-fit: contain; }

  /* Headline can breathe now that it owns a column rather than the page. */
  .hero h1, .hero .content h1 { font-size: clamp(2.6rem, 4.4vw, 4rem) !important; }
}

/* ── Trust row ───────────────────────────────────────────────────────────────
   Was four bare numbers floating in a band. Now four aligned cards: icon,
   figure, label — the same surface language as every other panel. */
.fye-trust-row {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.015);
  padding: 1.5rem clamp(1rem, 3vw, 2.25rem);
  max-width: none;
}

.fye-trust-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  max-width: 1400px;
  margin: 0 auto;
}

.fye-trust {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.95rem 1.1rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(165deg, rgba(20, 27, 29, 0.85), rgba(10, 14, 15, 0.9));
  transition: border-color 0.25s ease;
  text-align: left;
  min-width: 0;
}

.fye-trust:hover { border-color: rgba(45, 212, 191, 0.3); }

.fye-trust-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 1rem;
  color: #5EEAD4;
  background: rgba(45, 212, 191, 0.12);
  border: 1px solid rgba(45, 212, 191, 0.26);
}

.fye-trust-copy { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }

.fye-trust-value {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
  white-space: nowrap;
}

.fye-trust-label {
  margin-top: 0.15rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .fye-trust-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  .fye-trust { padding: 0.8rem 0.9rem; gap: 0.7rem; }
  .fye-trust-icon { width: 34px; height: 34px; font-size: 0.85rem; }
  .fye-trust-value { font-size: 1.1rem; }
}

/* ── Licences: one product should not sit in a third of the row ──────────────
   The grid is built for a catalogue. With a single product the card kept its
   one-third width and left two-thirds empty, which read as a missing section. */
@media (min-width: 992px) {
  .row.products > [class*="col-"]:only-child,
  .products-page .row > [class*="col-"]:only-child {
    flex: 0 0 auto !important;
    width: min(720px, 100%) !important;
    max-width: 100% !important;
  }

  /* Two products: half each rather than a third with a gap. */
  .row.products > [class*="col-"]:first-child:nth-last-child(2),
  .row.products > [class*="col-"]:first-child:nth-last-child(2) ~ [class*="col-"] {
    flex: 0 0 auto !important;
    width: min(460px, 100%) !important;
    max-width: 100% !important;
  }
}

/* Give the artwork the room the wider card creates. */
.product-card .product-image-wrapper { aspect-ratio: 16 / 10; }

.product-card .product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card .product-info { padding: 1.35rem 1.5rem 1.5rem !important; }

/* The licence grid carries both classes on one element (`row products`), so it
   must be targeted with a compound selector, not a descendant one. A single
   product otherwise kept its one-third column and left the row two-thirds
   empty. */
.row.products { justify-content: center !important; }

@media (min-width: 992px) {
  .row.products > [class*="col-"]:only-child {
    flex: 0 0 auto !important;
    width: min(760px, 100%) !important;
    max-width: 100% !important;
  }
}

/* ── Single payment method ───────────────────────────────────────────────────
   With one method the card kept its quarter-width column and sat marooned in
   an otherwise empty row. Alone, it becomes a wide panel with the mark beside
   the copy instead of stacked above it. */
.payments-grid:has(.payment-item:only-child) { justify-content: center !important; }

@media (min-width: 992px) {
  .payments-grid .payment-item:only-child {
    width: min(760px, 100%) !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }

  .payment-item:only-child .payment-card {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1.75rem;
    text-align: left !important;
    padding: 2.25rem !important;
  }

  .payment-item:only-child .payment-brand { margin: 0 !important; }

  /* Copy, badge and points share the right-hand column. */
  .payment-item:only-child .payment-title,
  .payment-item:only-child .payment-description,
  .payment-item:only-child .payment-badge,
  .payment-item:only-child .payment-points { grid-column: 2; }

  .payment-item:only-child .payment-title { font-size: 1.4rem !important; margin-bottom: 0.35rem !important; }
  .payment-item:only-child .payment-description { margin-bottom: 0.9rem !important; }
  .payment-item:only-child .payment-badge { justify-self: start; }
  .payment-item:only-child .payment-points { margin-top: 1.1rem; padding-top: 1.1rem; }

  .payment-item:only-child .payment-brand-mark { width: 96px; height: 96px; border-radius: 26px; }
  .payment-item:only-child .payment-brand-mark i { font-size: 46px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   REFINEMENT PASS — paint budget, alignment, single-product layout, identity
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Paint budget ─────────────────────────────────────────────────────────
   The ban list at the top of this file governs code written for Fye. It never
   reached the styles the base theme ships inline inside its components, and a
   measurement of the live home page found roughly 3.5 million pixels of
   blurred surface still being composited: a 1414x665 blur(60px) hero wash, two
   546x696 backdrop-filtered comparison columns, a 760x491 payment card, and —
   worst of all — the navbar, which is pinned to the viewport and therefore
   re-blurs on every scrolled frame.

   Every one of them sits on a background that is already opaque or near
   opaque, so the blur was buying nothing that could be seen. The gradients are
   restated here without it, in the brand teal rather than the base theme's
   indigo and rose. */

.navbar .navbar-inner,
.mobile-menu-overlay,
.mobile-menu-dropdown,
.mobile-menu-header,
.currency-modal-overlay,
.hero .stat-item,
.product-overlay,
.comparison-column,
.comparison-footer,
.divider-badge,
.payment-card,
.payment-security,
.scroll-to-top-btn,
.text-block-card,
.quality-card,
.faq-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* The overlays leaned on the blur to separate themselves from the page. Made
   opaque instead, which reads the same and costs one fill. */
.mobile-menu-overlay { background: rgba(0, 0, 0, 0.88) !important; }
.currency-modal-overlay { background: rgba(3, 5, 6, 0.9) !important; }
.mobile-menu-dropdown,
.mobile-menu-header { background: #080D0E !important; }

/* Decorative washes: same shape, painted directly instead of blurred. A
   radial gradient already has soft edges — running a 60px blur over one pays
   twice for the same softness. */
.hero .gradient-bg {
  filter: none !important;
  background:
    radial-gradient(80% 60% at 15% 0%, rgba(45, 212, 191, 0.10), transparent 70%),
    radial-gradient(70% 60% at 90% 100%, rgba(20, 184, 166, 0.07), transparent 70%) !important;
}

.text-image-block-modern .image-decorative-bg {
  filter: none !important;
  background: radial-gradient(circle at center, rgba(45, 212, 191, 0.13) 0%, transparent 68%) !important;
}

.text-image-block-modern .image-glow {
  filter: none !important;
  background: radial-gradient(ellipse at center, rgba(45, 212, 191, 0.16) 0%, transparent 70%) !important;
}

/* ── 2. Section headings line up ─────────────────────────────────────────────
   pro.css sets `.section-subtitle { display: flex }`. That turned the accent
   rule below each heading into a flex sibling of the paragraph, so it sat out
   to the right of the subtitle instead of centred beneath it — visible on
   every section of the page. It is a block again. */
.section-subtitle {
  display: block !important;
  align-items: initial !important;
  margin: 0 0 2rem !important;
  text-align: center !important;
}

.section-subtitle p { margin-bottom: 0 !important; }

/* ── 3. One licence should not sit in a third of the row ─────────────────────
   The row carries two empty nodes alongside the product column, so
   `:only-child` never matched and the card kept its catalogue width. Asking
   whether any column has a column before it is exact regardless of what else
   the row contains. */
@media (min-width: 992px) {
  .row.products:not(:has([class*="col-"] ~ [class*="col-"])) > [class*="col-"] {
    flex: 0 0 auto !important;
    width: min(760px, 100%) !important;
    max-width: 100% !important;
  }
}

/* A lone card carries the row's bottom margin as dead space. */
.row.products > [class*="col-"]:last-child { margin-bottom: 0 !important; }

/* ── 4. Payment panel ────────────────────────────────────────────────────────
   The mark occupied only the first grid row, so the title floated in the
   middle of a 96px band and the copy below inherited the gap. The mark now
   spans the column and the rows pack to the top. */
@media (min-width: 992px) {
  .payment-item:only-child .payment-card {
    align-content: start !important;
    gap: 0 1.75rem !important;
    padding: 2.25rem 2.5rem !important;
  }

  .payment-item:only-child .payment-brand {
    grid-row: 1 / -1;
    align-self: start;
  }

  .payment-item:only-child .payment-title { margin-top: 0.35rem !important; }
  .payment-item:only-child .payment-description { max-width: 46ch; }
}

/* ── 5. Announcement bar ─────────────────────────────────────────────────────
   A white strip above a black site: the first thing a visitor saw was the one
   element not wearing the brand. */
.announcement {
  background: linear-gradient(90deg, rgba(45, 212, 191, 0.10), rgba(45, 212, 191, 0.04)) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  border-bottom: 1px solid rgba(45, 212, 191, 0.22) !important;
  font-size: 0.85rem !important;
}

.announcement a { color: #5EEAD4 !important; text-decoration: none !important; }
.announcement a:hover { color: #99F6E4 !important; }

/* ── 6. House marks ──────────────────────────────────────────────────────────
   Two details that belong to this shop rather than to the theme it came from:
   the feature grid is numbered, and the full-width panels carry a corner
   bracket. Both are static pseudo-elements — no layer, no animation. */
.features-grid { counter-reset: fye-feature; }
.feature-card { counter-increment: fye-feature; }

.feature-card::after {
  content: counter(fye-feature, decimal-leading-zero);
  position: absolute;
  top: 1.15rem;
  right: 1.35rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(45, 212, 191, 0.32);
  transition: color 0.25s ease;
  pointer-events: none;
}

.feature-card:hover::after { color: rgba(94, 234, 212, 0.75); }

.payment-security,
.comparison-footer,
.fye-final-cta { position: relative; }

.payment-security::before,
.comparison-footer::before,
.fye-final-cta::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 22px;
  height: 22px;
  border-top: 1px solid rgba(45, 212, 191, 0.45);
  border-left: 1px solid rgba(45, 212, 191, 0.45);
  border-top-left-radius: 18px;
  pointer-events: none;
}

.payment-security::after,
.comparison-footer::after,
.fye-final-cta::after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 22px;
  height: 22px;
  border-bottom: 1px solid rgba(45, 212, 191, 0.45);
  border-right: 1px solid rgba(45, 212, 191, 0.45);
  border-bottom-right-radius: 18px;
  pointer-events: none;
}

/* ── 7. Rhythm ───────────────────────────────────────────────────────────────
   Sections were separated by their own padding plus the row margins inside
   them, which read as holes rather than as breathing room. */
.payments-section .payments-grid-wrapper { margin-bottom: 1.5rem; }
.comparison-footer { margin-top: 1.75rem !important; }

@media (min-width: 992px) {
  .py-20 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
}

/* ── 8. Footer ───────────────────────────────────────────────────────────────
   The link columns were spread across the full width with a hole in the
   middle. They sit as one group opposite the brand blurb instead. */
.footer-links-wrapper { gap: clamp(2rem, 5vw, 4.5rem) !important; }

.footer-heading {
  font-size: 0.74rem !important;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: rgba(255, 255, 255, 0.55) !important;
}

.footer-link { font-size: 0.9rem !important; }


/* ── 9. Included vs not included must not look the same ──────────────────────
   `.feature-icon` is used by both the feature grid and the licence
   comparison. The teal plinth written for the feature grid was winning in the
   comparison too, so the ✕ marking a feature the monthly plan does NOT get
   was painted in the same teal circle as the ✓ next to the ones it does. At a
   glance the two columns read as identical. Only the tick keeps the accent. */
.comparison-column .feature-icon.unavailable {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: rgba(255, 255, 255, 0.32) !important;
}

.comparison-column .feature-row.unavailable {
  opacity: 0.62;
}

/* One accent colour. The gold badge was the only warm thing on the page and
   read as a different brand rather than as the better plan. */
.premium-badge {
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.20), rgba(45, 212, 191, 0.08)) !important;
  border-color: rgba(45, 212, 191, 0.45) !important;
  color: #5EEAD4 !important;
}

.comparison-column.premium {
  border-color: rgba(45, 212, 191, 0.35) !important;
}

/* ── 10. One measure across the page ─────────────────────────────────────────
   The FAQ was capped at 1000px while every other section ran to 1248, so its
   left and right edges lined up with nothing. */
.faq-wrapper { max-width: 1248px !important; }

/* ── 11. Payment panel spacing ───────────────────────────────────────────────
   Measured 53px between the title's baseline box and the description with
   only 11px of margin accounting for it; the rest came from the grid row the
   title shares with the mark. Stated outright instead. */
@media (min-width: 992px) {
  .payment-item:only-child .payment-title {
    margin: 0 0 0.6rem !important;
    line-height: 1.2 !important;
  }

  .payment-item:only-child .payment-description {
    margin: 0 0 1rem !important;
    line-height: 1.65 !important;
  }

  .payment-item:only-child .payment-badge { margin: 0 !important; }
}

/* The mark is the only thing in the section that is not on-brand: a grey
   glyph on a grey tile. It keeps the monochrome treatment but gains enough
   contrast to look deliberate. */
.payment-brand-mark {
  background: linear-gradient(160deg, #F7F8F8, #D9DEDE) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #0A0F10 !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45) !important;
}

.payment-brand-mark i { color: #0A0F10 !important; }

/* ── 12. Licence artwork ─────────────────────────────────────────────────────
   At 760px wide a 16:10 frame is 460px tall, and the box shot only fills the
   middle of it — the card grew, and so did the empty band above and below the
   product. A wider crop keeps the artwork and drops the padding. */
@media (min-width: 992px) {
  .row.products:not(:has([class*="col-"] ~ [class*="col-"])) .product-image-wrapper {
    aspect-ratio: 2 / 1;
  }
}


/* ── 13. Payment panel, without the grid ─────────────────────────────────────
   The two-column grid kept sizing its first row to the height of the mark
   even though the mark spans every row, which left the title floating in a
   133px band above the copy. Measured, not guessed: the row track came back
   as `133.188px 63.5312px 29.5px 112.469px`.

   The mark is a fixed 96px square, so it does not need the grid at all. It is
   positioned in the card's left gutter and the copy is one ordinary block
   indented past it — the rows are then just the text's own line boxes. */
@media (min-width: 992px) {
  .payment-item:only-child .payment-card {
    display: block !important;
    position: relative;
    text-align: left !important;
    padding: 2.25rem 2.5rem 2.25rem 9rem !important;
  }

  .payment-item:only-child .payment-brand {
    position: absolute;
    left: 2.5rem;
    top: 2.25rem;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
  }

  .payment-item:only-child .payment-title {
    margin: 0 0 0.5rem !important;
    line-height: 1.2 !important;
  }

  .payment-item:only-child .payment-description {
    margin: 0 0 1.1rem !important;
    max-width: 52ch;
    line-height: 1.65 !important;
  }

  .payment-item:only-child .payment-badge {
    display: inline-flex !important;
    margin: 0 !important;
  }

  .payment-item:only-child .payment-points {
    margin: 1.25rem 0 0 !important;
    padding: 1.25rem 0 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
  }
}

/* `.payment-brand` is declared `width: 100%; display: flex; justify-content:
   center` for the stacked layout, so pinning it to the card's left gutter put
   a full-width centring flexbox there and the mark landed over the copy. It
   is sized to its content in the gutter instead. */
@media (min-width: 992px) {
  .payment-item:only-child .payment-brand {
    width: auto !important;
    right: auto !important;
    display: block !important;
  }

  .payment-item:only-child .payment-brand-mark { margin: 0 !important; }
}


/* ── 14. Keep the subtitle centred on pages that narrow it ───────────────────
   Rule 2 above set `margin: 0 0 2rem` to kill the flex layout, which also
   wiped the `margin-left/right: auto` the status page uses to centre a 600px
   subtitle inside a 1330px container. It drifted to the left edge. */
.section-subtitle { margin: 0 auto 2rem !important; }

/* ── 15. Stock decoration ────────────────────────────────────────────────────
   Nine of the base theme's pages hotlink three chrome 3D renders from
   i.ibb.co and float them behind the content. They belong to the theme's
   demo, not to this shop, they say nothing about a Windows optimizer, and
   they are three render-blocking requests to an image host nobody here
   controls. */
.status-shapes-container,
.shapes-container,
.hero-shapes-container,
.page-shapes-container,
.status-shape,
.page-shape,
.floating-shape {
  display: none !important;
}

/* ── 16. Status page ─────────────────────────────────────────────────────────
   A single product row followed by most of a screen of nothing: the wrapper
   demands a full viewport regardless of how little it has to show. */
.status-page-wrapper {
  min-height: 0 !important;
  padding: 3.5rem 0 4.5rem !important;
}

.status-section .section-subtitle { max-width: 640px !important; }

/* The live app check reads as part of the status board rather than as
   something stranded above the page's own heading. */
.fye-app-status { margin: 2rem auto 0 !important; max-width: 720px; }

/* ── 17. Details ─────────────────────────────────────────────────────────────
   The live check and the product row are stacked in the same column and were
   two different widths, so neither edge lined up with the other. */
.fye-app-status { max-width: 900px !important; }

/* Links inside the legal pages fell back to the Bootstrap blue, the only
   blue anywhere on the site. */
.terms-content a,
.privacy-content a,
.refund-content a,
.policy-content a,
.legal-content a,
.text-block-content a {
  color: #5EEAD4 !important;
  text-decoration-color: rgba(45, 212, 191, 0.4);
}

/* Every page carries its own copy of the blurred backdrop wash under a
   different class name. All of them get the same treatment as the hero's:
   the gradient without the 60px blur pass over it. */
.gradient-bg,
.policy-gradient-bg,
.status-gradient-bg,
.product-gradient-bg,
.blog-gradient-bg,
.blog-posts-gradient-bg {
  filter: none !important;
  background:
    radial-gradient(80% 60% at 15% 0%, rgba(45, 212, 191, 0.08), transparent 70%),
    radial-gradient(70% 60% at 90% 100%, rgba(20, 184, 166, 0.06), transparent 70%) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   PURCHASE PASS — product page, cart, login, status board, Cash App mark
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 18. The Cash App mark ───────────────────────────────────────────────────
   Was a generic Font Awesome dollar glyph on a white tile, which read as a
   placeholder. The real mark is one path that draws the squircle with the $
   cut out of it, so the tile behind becomes the letterform: white tile, Cash
   App green square, white $. */
.payment-brand-mark {
  background: #FFFFFF !important;
  border: 0 !important;
  overflow: hidden;
  display: grid !important;
  place-items: center;
  padding: 0 !important;
  box-shadow: 0 12px 30px rgba(0, 194, 68, 0.18) !important;
}

.payment-brand-mark .payment-brand-svg {
  width: 100%;
  height: 100%;
  display: block;
  color: #00C244;
}

/* ── 19. Product page ────────────────────────────────────────────────────────
   `.product-title` is the card title on the home page AND the <h1> here, and
   the card's 1.1rem rule was winning — the product's own name was rendering
   at body size above a 2.75rem price. Scoped to the card. */
.product-card .product-title { font-size: 1.1rem !important; font-weight: 700 !important; }

.product-info-section .product-title {
  font-size: clamp(2.1rem, 4vw, 3rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  margin: 0.85rem 0 1.1rem !important;
}

.product-eyebrow { margin-bottom: 0 !important; }

/* The buy box is short and the description is long, so the right column ran
   out and left most of a screen empty beside the text. It follows instead. */
@media (min-width: 992px) {
  .product-info-section {
    position: sticky;
    top: 6.5rem;
  }
}

/* Which licence is selected has to be unmistakable — it decides the price. */
.product-form .variants .variant {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.product-form .variants .variant:hover:not(:disabled) {
  border-color: rgba(45, 212, 191, 0.35) !important;
}

.product-form .variants .variant.active {
  border-color: rgba(45, 212, 191, 0.75) !important;
  background: linear-gradient(150deg, rgba(45, 212, 191, 0.13), rgba(45, 212, 191, 0.03)) !important;
  box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.25);
}

.product-form .variants .variant.active .name { color: #FFFFFF !important; }
.product-form .variants .variant.active .price { color: #5EEAD4 !important; }

/* Two identical teal buttons gave no answer to "which one do I press". Buy
   Now is the action; Add to Cart is the alternative. */
.product-form .buy-buttons .btn-primary {
  background: linear-gradient(135deg, #5EEAD4, #2DD4BF) !important;
  border: 0 !important;
  color: #04211E !important;
  font-weight: 700 !important;
}

.product-form .buy-buttons .btn-outline-primary {
  background: transparent !important;
  border: 1px solid rgba(45, 212, 191, 0.45) !important;
  color: #5EEAD4 !important;
  font-weight: 600 !important;
}

.product-form .buy-buttons .btn-outline-primary:hover {
  background: rgba(45, 212, 191, 0.10) !important;
  border-color: rgba(45, 212, 191, 0.7) !important;
}

/* The gallery: thumbnails were 5 small tiles with no indication of which one
   is showing, and the active ring was the base theme's amber. */
.product-image-section .carousel-item img,
.product-image-section .product-image-wrapper img {
  border-radius: 16px;
}

.product-thumb,
.product-image-section [class*="thumb"] img {
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: border-color 0.2s ease, opacity 0.2s ease;
  opacity: 0.55;
}

.product-thumb:hover,
.product-image-section [class*="thumb"]:hover img { opacity: 0.85; }

.product-thumb.active,
.product-image-section [class*="thumb"].active img {
  border-color: rgba(45, 212, 191, 0.8) !important;
  opacity: 1;
}

/* The description is the longest read on the site and was one undifferentiated
   wall. Headings, spacing and a rule between sections make it scannable. */
.product-tab-content .description,
.product-tabs-section .description {
  font-size: 0.97rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.72);
}

.product-tab-content .description h1,
.product-tab-content .description h2,
.product-tab-content .description h3 {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em;
  color: #FFFFFF !important;
  margin: 2rem 0 0.85rem !important;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.product-tab-content .description h1:first-child,
.product-tab-content .description h2:first-child,
.product-tab-content .description h3:first-child {
  margin-top: 0 !important;
  padding-top: 0;
  border-top: 0;
}

.product-tab-content .description strong { color: #FFFFFF; font-weight: 700; }
.product-tab-content .description p { margin-bottom: 1rem; }
.product-tab-content .description ul { padding-left: 1.15rem; }
.product-tab-content .description li { margin-bottom: 0.5rem; }
.product-tab-content .description li::marker { color: rgba(45, 212, 191, 0.7); }

/* ── 20. Assurance strip ─────────────────────────────────────────────────────
   Four facts a buyer wants confirmed at the moment of paying, under the buy
   box and beside the cart total. */
.fye-assure {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 1.25rem;
  display: grid;
  gap: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(20, 27, 29, 0.75), rgba(10, 14, 15, 0.85));
}

.fye-assure li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
}

.fye-assure-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  font-size: 0.85rem;
  color: #5EEAD4;
  background: rgba(45, 212, 191, 0.12);
  border: 1px solid rgba(45, 212, 191, 0.26);
}

.fye-assure-copy { display: flex; flex-direction: column; min-width: 0; }
.fye-assure-copy strong { font-size: 0.9rem; font-weight: 600; color: rgba(255, 255, 255, 0.92); }
.fye-assure-copy small { font-size: 0.78rem; color: rgba(255, 255, 255, 0.5); line-height: 1.4; }

/* ── 21. Cart ────────────────────────────────────────────────────────────────
   The empty state was one grey sentence in a bordered box — a dead end on the
   page a visitor lands on when they mis-click the cart icon. */
.cart-empty {
  display: grid;
  justify-items: center;
  gap: 0.65rem;
  padding: 3rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  background: linear-gradient(165deg, rgba(20, 27, 29, 0.6), rgba(10, 14, 15, 0.8));
  text-align: center;
}

.cart-empty-mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  font-size: 1.35rem;
  color: #5EEAD4;
  background: rgba(45, 212, 191, 0.10);
  border: 1px solid rgba(45, 212, 191, 0.24);
}

.cart-empty-title { font-size: 1.15rem; font-weight: 700; color: #FFFFFF; margin: 0.35rem 0 0; }
.cart-empty-note { max-width: 42ch; font-size: 0.9rem; color: rgba(255, 255, 255, 0.55); margin: 0; }

.cart-empty-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.75rem;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  color: #04211E;
  background: linear-gradient(135deg, #5EEAD4, #2DD4BF);
  transition: transform 0.2s ease;
}

.cart-empty-btn:hover { transform: translateY(-2px); color: #04211E; }

/* Checkout is the point of the page and was a ghost outline button. */
.cart form .btn-outline-primary[type="submit"] {
  background: linear-gradient(135deg, #5EEAD4, #2DD4BF) !important;
  border: 0 !important;
  color: #04211E !important;
  font-weight: 700 !important;
  padding: 0.85rem 1.25rem !important;
  border-radius: 14px !important;
}

.cart form .btn-outline-primary[type="submit"]:disabled { opacity: 0.45; }

/* ── 22. Login ───────────────────────────────────────────────────────────────
   The right half of the modal was a hotlinked Freepik stock render. It now
   says what an account is for. */
.login-modal-image-section {
  background: linear-gradient(155deg, rgba(45, 212, 191, 0.14), rgba(8, 13, 14, 0.98) 62%) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
}

.login-modal-aside { padding: clamp(1.75rem, 3vw, 2.75rem); }

.login-modal-logo {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #FFFFFF;
  margin-bottom: 1.25rem;
}

.login-modal-logo span { color: #5EEAD4; }

.login-modal-aside-lead {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin-bottom: 1.5rem;
}

.login-modal-aside-list { list-style: none; padding: 0; margin: 0 0 1.75rem; display: grid; gap: 0.85rem; }

.login-modal-aside-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

.login-modal-aside-list i { color: #5EEAD4; margin-top: 0.2rem; width: 1rem; text-align: center; }

.login-modal-aside-note {
  font-size: 0.8rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.42);
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  margin: 0;
}

/* The one button in the modal was white — the only white button on the site. */
.login-modal-body button[type="submit"],
.login-modal-content .btn-primary {
  background: linear-gradient(135deg, #5EEAD4, #2DD4BF) !important;
  border: 0 !important;
  color: #04211E !important;
  font-weight: 700 !important;
}

@media (max-width: 991px) {
  .login-modal-image-section { display: none !important; }
}

/* ── 23. Status board ────────────────────────────────────────────────────────
   The product row was a bare name in a box with nothing to its right, so the
   page said "status" and then showed none. */
.status-content .status-product,
.status-content .status-group,
.status-content > div {
  border-radius: 14px;
}

.status-product-name,
.status-content .status-product-header {
  font-weight: 600 !important;
}

.fye-app-status {
  border: 1px solid rgba(45, 212, 191, 0.22) !important;
  background: linear-gradient(165deg, rgba(20, 27, 29, 0.9), rgba(10, 14, 15, 0.94)) !important;
}

/* ── 24. Discord ─────────────────────────────────────────────────────────────
   Promised in the features grid, in the closing CTA and in the assurance
   strip; until now it existed nowhere a visitor could click. */
.footer-discord {
  display: flex;
  justify-content: center;
  padding: 1.75rem 0 0;
}

.footer-discord-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.95rem;
  padding: 0.85rem 1.5rem;
  border-radius: 16px;
  text-decoration: none;
  border: 1px solid rgba(88, 101, 242, 0.35);
  background: linear-gradient(150deg, rgba(88, 101, 242, 0.16), rgba(88, 101, 242, 0.04));
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.footer-discord-btn:hover { border-color: rgba(88, 101, 242, 0.65); transform: translateY(-2px); }

.footer-discord-btn > i:first-child { font-size: 1.5rem; color: #A5B0FF; }
.footer-discord-copy { display: flex; flex-direction: column; text-align: left; }
.footer-discord-copy strong { font-size: 0.95rem; font-weight: 700; color: #FFFFFF; }
.footer-discord-copy small { font-size: 0.78rem; color: rgba(255, 255, 255, 0.5); }
.footer-discord-go { font-size: 0.8rem; color: rgba(255, 255, 255, 0.45); }

@media (max-width: 520px) {
  .footer-discord-copy small { display: none; }
}

/* ── 25. Badges outside the hero ─────────────────────────────────────────────
   `.hero-badge` ships at `opacity: 0` and is revealed by a keyframe that is
   declared inside the hero component's own inline <style>. On any page that
   does not render the hero — cart, product — the badge stays at zero opacity
   while still occupying its 179px, which both hid it and pushed the heading
   beside it off centre. This theme has been bitten by invisible-by-default
   reveals before; badges are visible unless something animates them. */
.hero-badge { opacity: 1; }

.cart .section-title,
.product-info-section .section-title { text-align: center !important; }

/* ── 26. Which button is the purchase ────────────────────────────────────────
   Add to Cart is `.btn-primary` and Buy Now is `.btn-outline-primary`, so
   styling by name made the secondary action the loud one. Both were solid
   teal in the end because the component's own inline <style> comes after
   this file in the document and wins on a specificity tie — hence the extra
   `.btn` in each selector. */
.product-form .buy-buttons .btn.btn-outline-primary {
  background: linear-gradient(135deg, #5EEAD4, #2DD4BF) !important;
  border: 0 !important;
  color: #04211E !important;
  font-weight: 700 !important;
}

.product-form .buy-buttons .btn.btn-outline-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #7BF0DC, #34E0CA) !important;
  border: 0 !important;
  color: #04211E !important;
}

.product-form .buy-buttons .btn.btn-outline-primary svg { color: #04211E !important; }

.product-form .buy-buttons .btn.btn-primary {
  background: transparent !important;
  border: 1px solid rgba(45, 212, 191, 0.40) !important;
  color: #5EEAD4 !important;
  font-weight: 600 !important;
}

.product-form .buy-buttons .btn.btn-primary:hover:not(:disabled) {
  background: rgba(45, 212, 191, 0.10) !important;
  border-color: rgba(45, 212, 191, 0.7) !important;
  color: #5EEAD4 !important;
}

.product-form .buy-buttons .btn.btn-primary svg { color: #5EEAD4 !important; }

/* The cart's `.section-title` is a flex row, so the badge landed beside the
   heading instead of above it as it does in every home-page section. */
.cart .section-title {
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.85rem;
}

/* Without a dimmed backdrop the login modal floated over a fully lit page,
   which reads as a rendering glitch rather than a dialog. */
.modal-backdrop.show { opacity: 1 !important; background: rgba(3, 6, 7, 0.72) !important; }

/* The stacked layout sizes `.payment-brand svg` to 62px with !important, so
   the mark sat 62px inside a 96px white tile and the tile showed as a white
   frame around the logo. The white is only there to fill the $ knocked out of
   the path, so it must be exactly the shape of the path's own squircle —
   which is a 21% radius, not the card's 26px. */
.payment-brand-mark .payment-brand-svg {
  width: 100% !important;
  height: 100% !important;
}

.payment-brand-mark { border-radius: 22% !important; }

/* Left-aligned to the brand blurb above it, which fills the empty half of the
   footer rather than leaving the button adrift in the middle. */
@media (min-width: 768px) {
  .footer-discord { justify-content: flex-start; padding-top: 0; margin-top: -2.5rem; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   STATUS BOARD
   Replaces the single live-check card. `.fye-app-status` rules above are dead
   with it; the dot states below are shared by the summary and the rows.
   ═══════════════════════════════════════════════════════════════════════════ */

.fye-board {
  max-width: 900px;
  margin: 0 auto 3rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  background: linear-gradient(165deg, rgba(20, 27, 29, 0.9), rgba(10, 14, 15, 0.94));
  overflow: hidden;
}

/* ── Summary ─────────────────────────────────────────────────────────────── */
.fye-board-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.35rem 1.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.015);
}

.fye-board-headline { display: flex; flex-direction: column; min-width: 0; flex: 1; }

.fye-board-title {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #FFFFFF;
  line-height: 1.25;
}

.fye-board-sub { font-size: 0.83rem; color: rgba(255, 255, 255, 0.5); line-height: 1.45; }

.fye-board-recheck {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.fye-board-recheck:hover { border-color: rgba(45, 212, 191, 0.4); color: #5EEAD4; }

/* ── Rows ────────────────────────────────────────────────────────────────── */
.fye-board-list { list-style: none; margin: 0; padding: 0; }

.fye-board-row {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  padding: 1.05rem 1.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.fye-board-row:last-child { border-bottom: 0; }

.fye-board-copy { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fye-board-copy strong { font-size: 0.95rem; font-weight: 600; color: rgba(255, 255, 255, 0.92); }
.fye-board-copy small { font-size: 0.79rem; color: rgba(255, 255, 255, 0.45); line-height: 1.45; }

.fye-board-value {
  flex: 0 0 auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}

.fye-board-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  color: #5EEAD4;
  white-space: nowrap;
}

.fye-board-link:hover { color: #99F6E4; }

/* ── Dots ────────────────────────────────────────────────────────────────────
   A ring rather than a pulse: this theme does not run infinite animations,
   and a status light that throbs forever is exactly the kind of idle
   compositor work that cost us a working page once already. */
.fye-board-dot {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06);
}

.fye-board-head .fye-board-dot { width: 14px; height: 14px; box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.05); }

.fye-board-dot[data-state="up"]       { background: #4ADE80; box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.16); }
.fye-board-dot[data-state="degraded"] { background: #FBBF24; box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.16); }
.fye-board-dot[data-state="down"]     { background: #F87171; box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.16); }
.fye-board-dot[data-state="checking"] { background: rgba(255, 255, 255, 0.35); }
.fye-board-dot[data-state="link"]     { background: rgba(88, 101, 242, 0.9); box-shadow: 0 0 0 4px rgba(88, 101, 242, 0.16); }

.fye-board-head .fye-board-dot[data-state="up"]       { box-shadow: 0 0 0 5px rgba(74, 222, 128, 0.14); }
.fye-board-head .fye-board-dot[data-state="degraded"] { box-shadow: 0 0 0 5px rgba(251, 191, 36, 0.14); }
.fye-board-head .fye-board-dot[data-state="down"]     { box-shadow: 0 0 0 5px rgba(248, 113, 113, 0.14); }

.fye-board-row[data-state="down"]     { background: rgba(248, 113, 113, 0.04); }
.fye-board-row[data-state="degraded"] { background: rgba(251, 191, 36, 0.04); }

/* ── Foot ────────────────────────────────────────────────────────────────── */
.fye-board-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.85rem 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.25);
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.4);
}

.fye-board-foot-sep { color: rgba(255, 255, 255, 0.2); }

/* ── Product list under the board ────────────────────────────────────────── */
.status-products-heading {
  max-width: 900px;
  margin: 0 auto 0.9rem;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: rgba(255, 255, 255, 0.45) !important;
}

.status-content { max-width: 900px; margin: 0 auto; display: grid; gap: 0.6rem; }
.status-content .status-item { border-radius: 14px !important; padding: 1.05rem 1.5rem !important; }

@media (max-width: 620px) {
  .fye-board-head { flex-wrap: wrap; }
  .fye-board-recheck { order: 3; width: 100%; justify-content: center; }
  .fye-board-row { flex-wrap: wrap; }
  .fye-board-value, .fye-board-link { width: 100%; padding-left: 1.95rem; }
}


/* ── Status board, second pass ───────────────────────────────────────────────
   A state chip so the answer reads before the sentence does, a left accent
   per row keyed to its state, and a meter under each measured value so a
   round trip reads as fast without the visitor needing to know what fast is.
   All static paint — no animation, nothing promoted to its own layer. */

.fye-board {
  position: relative;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

/* House corner brackets, as on the security and comparison panels. */
.fye-board::before,
.fye-board::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  pointer-events: none;
}

.fye-board::before {
  top: -1px; left: -1px;
  border-top: 1px solid rgba(45, 212, 191, 0.45);
  border-left: 1px solid rgba(45, 212, 191, 0.45);
  border-top-left-radius: 20px;
}

.fye-board::after {
  bottom: -1px; right: -1px;
  border-bottom: 1px solid rgba(45, 212, 191, 0.45);
  border-right: 1px solid rgba(45, 212, 191, 0.45);
  border-bottom-right-radius: 20px;
}

.fye-board-head {
  align-items: flex-start;
  padding: 1.6rem 1.75rem;
}

.fye-board-head .fye-board-dot { margin-top: 0.55rem; }

.fye-board-chip {
  align-self: flex-start;
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 0.24rem 0.7rem;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.fye-board-chip[data-state="up"] {
  color: #6EE7A0;
  background: rgba(74, 222, 128, 0.10);
  border-color: rgba(74, 222, 128, 0.35);
}

.fye-board-chip[data-state="degraded"] {
  color: #FCD34D;
  background: rgba(251, 191, 36, 0.10);
  border-color: rgba(251, 191, 36, 0.35);
}

.fye-board-chip[data-state="down"] {
  color: #FCA5A5;
  background: rgba(248, 113, 113, 0.10);
  border-color: rgba(248, 113, 113, 0.35);
}

.fye-board-title { font-size: 1.35rem !important; }

/* ── Rows ────────────────────────────────────────────────────────────────── */
.fye-board-row {
  position: relative;
  padding: 1.15rem 1.75rem 1.15rem 1.75rem;
  transition: background-color 0.2s ease;
}

/* The accent restates the dot down the full height of the row, so a row that
   is not green is legible from the edge of the card. */
.fye-board-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: transparent;
}

.fye-board-row[data-state="up"]::before       { background: rgba(74, 222, 128, 0.55); }
.fye-board-row[data-state="degraded"]::before { background: rgba(251, 191, 36, 0.7); }
.fye-board-row[data-state="down"]::before     { background: rgba(248, 113, 113, 0.75); }

.fye-board-row:hover { background: rgba(255, 255, 255, 0.02); }

.fye-board-copy strong { font-size: 0.98rem; letter-spacing: -0.005em; }

/* ── Measured values ─────────────────────────────────────────────────────── */
.fye-board-metric {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  min-width: 92px;
}

.fye-board-value {
  padding: 0.2rem 0.5rem;
  border-radius: 7px;
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.fye-board-meter {
  display: block;
  width: 92px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.fye-board-meter-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #4ADE80, #2DD4BF);
  transition: width 0.35s ease;
}

.fye-board-row[data-state="degraded"] .fye-board-meter-fill { background: #FBBF24; }
.fye-board-row[data-state="down"] .fye-board-meter-fill { background: #F87171; }

/* The delivery row has no round trip to draw, so its value keeps the chip
   treatment but sits on the same right edge as the meters above it. */
.fye-board-row[data-row="delivery"] .fye-board-value { min-width: 92px; text-align: center; }

.fye-board-link {
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(88, 101, 242, 0.4);
  background: rgba(88, 101, 242, 0.10);
  color: #B4BCFF;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.fye-board-link:hover { border-color: rgba(88, 101, 242, 0.75); color: #FFFFFF; }

/* ── Foot ────────────────────────────────────────────────────────────────── */
.fye-board-foot { padding: 0.9rem 1.75rem; letter-spacing: 0.01em; }
.fye-board-foot [data-checked] { color: rgba(255, 255, 255, 0.62); }

/* ── Products ────────────────────────────────────────────────────────────── */
.status-products-heading { padding-left: 0.15rem; }

.status-content .status-item {
  background: linear-gradient(165deg, rgba(20, 27, 29, 0.7), rgba(10, 14, 15, 0.85)) !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
}

.status-content .status-item:hover { border-color: rgba(45, 212, 191, 0.3) !important; }
.status-content .status-item .status-text { font-size: 0.85rem; font-weight: 600; }

@media (max-width: 620px) {
  .fye-board-metric { align-items: flex-start; width: 100%; padding-left: 1.95rem; }
  .fye-board-head { padding: 1.35rem 1.25rem; }
  .fye-board-row { padding-left: 1.25rem; padding-right: 1.25rem; }
  .fye-board-foot { padding: 0.85rem 1.25rem; flex-wrap: wrap; text-align: center; }
}

/* The meter's colour carries the same judgement its width does, so a slow
   round trip is legible without reading the figure. */
.fye-board-meter-fill[data-speed="fast"] { background: linear-gradient(90deg, #4ADE80, #2DD4BF); }
.fye-board-meter-fill[data-speed="ok"]   { background: linear-gradient(90deg, #2DD4BF, #FBBF24); }
.fye-board-meter-fill[data-speed="slow"] { background: linear-gradient(90deg, #FBBF24, #F87171); }

/* The first mobile pass stretched the value chip and the Discord button to
   the full row width, so a two-word reading like "62 ms" sat in a 430px box
   with its meter floating unattached beneath it. Both shrink to their
   content, and the meter widens enough to still be readable. */
@media (max-width: 620px) {
  .fye-board-metric {
    flex-direction: row;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
  }

  .fye-board-value {
    width: auto;
    padding-left: 0.5rem;
    flex: 0 0 auto;
  }

  .fye-board-meter { width: auto; flex: 1 1 auto; min-width: 60px; }

  .fye-board-link {
    width: auto;
    padding-left: 0.85rem;
    align-self: flex-start;
    margin-left: 1.95rem;
  }

  .fye-board-row[data-row="delivery"] .fye-board-value { min-width: 0; }
}

/* On a narrow screen every row breaks the same way: label and description on
   the first line, the value or the link indented on the second. Without this
   the two rows that carry no meter kept their trailing element inline and
   squeezed the description into a three-line column beside it. */
@media (max-width: 620px) {
  .fye-board-copy { flex: 1 1 100%; }

  .fye-board-row[data-row="delivery"] .fye-board-value {
    margin: 0.7rem 0 0 1.95rem;
    align-self: flex-start;
  }

  .fye-board-link { margin-top: 0.7rem; }
  .fye-board-metric { margin-top: 0.7rem; padding-left: 1.95rem; }
}

/* Making the copy full-width to force the value onto its own line also pushed
   the status dot onto a line of its own above the label. The dot is lifted out
   of the flex flow instead, so each row is: dot in the gutter, label and
   description, then the value beneath — one indent, no orphan line. */
@media (max-width: 620px) {
  .fye-board-row { padding-left: 2.9rem; }

  .fye-board-row > .fye-board-dot {
    position: absolute;
    left: 1.25rem;
    top: 1.45rem;
  }

  .fye-board-metric { padding-left: 0; margin-top: 0.85rem; }
  .fye-board-link { margin-left: 0; }
  .fye-board-row[data-row="delivery"] .fye-board-value { margin-left: 0; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   LOGIN, HERO SOCIAL ROW, REACHABLE DISCORD
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Login: the two steps, stated ────────────────────────────────────────────
   A visitor who expects a password field and gets an email prompt does not
   know a code is coming. The rail says so before it asks. */
.login-steps {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 1.35rem 0 0;
  padding: 0;
}

.login-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.8rem 0.4rem 0.45rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.login-step-num {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.06);
}

.login-step-label {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.45);
}

.login-step.is-current {
  border-color: rgba(45, 212, 191, 0.4);
  background: rgba(45, 212, 191, 0.08);
}

.login-step.is-current .login-step-num { color: #04211E; background: #5EEAD4; }
.login-step.is-current .login-step-label { color: #FFFFFF; }

.login-step.is-done .login-step-num { color: #5EEAD4; background: rgba(45, 212, 191, 0.16); }
.login-step.is-done .login-step-label { color: rgba(255, 255, 255, 0.62); }

/* ── Login: the form ─────────────────────────────────────────────────────── */
.login-modal-title { letter-spacing: -0.03em; }

.login-form-input {
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.login-form-input:focus {
  border-color: rgba(45, 212, 191, 0.55) !important;
  background: rgba(45, 212, 191, 0.05) !important;
  box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.10) !important;
  outline: none !important;
}

.login-form-button { border-radius: 14px !important; padding: 0.85rem 1.25rem !important; }

/* The code boxes are the one place a typo costs a whole round trip, so they
   get room and an unmistakable focus. */
.login-otp-input {
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.login-otp-input:focus {
  border-color: rgba(45, 212, 191, 0.65) !important;
  background: rgba(45, 212, 191, 0.06) !important;
  box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.10) !important;
  outline: none !important;
}

.login-step-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.2s ease;
}

.login-step-back:hover { color: #5EEAD4; }

/* ── Login: community link in the aside ──────────────────────────────────── */
.login-modal-discord {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.25rem;
  padding: 0.75rem 1rem;
  border-radius: 14px;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  color: #B4BCFF;
  border: 1px solid rgba(88, 101, 242, 0.35);
  background: rgba(88, 101, 242, 0.10);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.login-modal-discord:hover { border-color: rgba(88, 101, 242, 0.7); color: #FFFFFF; }
.login-modal-discord > i:first-child { font-size: 1.15rem; }
.login-modal-discord span { flex: 1; }
.login-modal-discord-go { font-size: 0.75rem; opacity: 0.65; }

/* ── Hero social row ─────────────────────────────────────────────────────────
   Under the buttons, above the fold: where visitors arrive from, and where
   they can reach a person. */
.hero .hero-social {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.5rem;
}

.hero-social-item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.025);
  transition: border-color 0.2s ease, color 0.2s ease;
}

a.hero-social-item:hover { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.25); }

.hero-social-item i { font-size: 0.95rem; }

.hero-social-sep {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.12);
}

.hero-social-discord {
  color: #B4BCFF;
  border-color: rgba(88, 101, 242, 0.35);
  background: rgba(88, 101, 242, 0.10);
}

.hero-social-discord:hover { color: #FFFFFF; border-color: rgba(88, 101, 242, 0.7); }
.hero-social-go { font-size: 0.7rem; opacity: 0.7; }

@media (max-width: 991px) {
  .hero .hero-social { justify-content: center; }
}

@media (max-width: 520px) {
  .hero-social-sep { display: none; }
  .hero-social-item { font-size: 0.78rem; padding: 0.45rem 0.8rem; }
}

/* ── Assurance strip: the Discord row is now the link it was describing ───── */
.fye-assure-link {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  min-width: 0;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.fye-assure-link:hover { opacity: 0.85; }
.fye-assure-link .fye-assure-copy { flex: 1; }

.fye-assure-mark-discord {
  color: #B4BCFF !important;
  background: rgba(88, 101, 242, 0.14) !important;
  border-color: rgba(88, 101, 242, 0.35) !important;
}

.fye-assure-go { font-size: 0.72rem; color: rgba(255, 255, 255, 0.35); flex: 0 0 auto; }

/* The hero's copy column is left-aligned on desktop (see the two-column grid
   above); the social row inherited the stock centred layout and sat marooned
   in the middle of it. */
@media (min-width: 992px) {
  .hero .hero-social { justify-content: flex-start; margin-top: 1.35rem; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PAYMENTS (TWO METHODS), CURRENCY, BIGGER PRODUCT GALLERY, STATUS LABEL
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Two methods again ───────────────────────────────────────────────────────
   The single-method rules above only fire on `:only-child`, so a second
   method returns the grid to two cards. They need to be the same height
   whatever their copy runs to. */
@media (min-width: 992px) {
  .payments-grid-duo { align-items: stretch; }
  .payments-grid-duo .payment-item { display: flex; width: calc(50% - 1rem); max-width: 460px; }
  .payments-grid-duo .payment-item .payment-card { width: 100%; }
}

/* A method that is not switched on yet must read as not switched on, from
   across the page, without anyone having to read the description. */
.payment-card-soon { opacity: 0.82; }

.payment-card-soon .payment-brand-mark {
  filter: grayscale(0.35);
}

.payment-soon {
  display: inline-block;
  margin-left: 0.55rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: middle;
  color: #FCD34D;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.32);
}

.payment-card-soon .payment-badge {
  color: #FCD34D !important;
  background: rgba(251, 191, 36, 0.10) !important;
  border-color: rgba(251, 191, 36, 0.30) !important;
}

/* ── Currency note ───────────────────────────────────────────────────────── */
.fye-currency {
  max-width: 940px;
  margin: 2rem auto 0;
  padding: 1.5rem 1.6rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: linear-gradient(165deg, rgba(20, 27, 29, 0.8), rgba(10, 14, 15, 0.9));
  text-align: left;
}

.fye-currency-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-bottom: 1.1rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.fye-currency-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  font-size: 1.05rem;
  color: #5EEAD4;
  background: rgba(45, 212, 191, 0.12);
  border: 1px solid rgba(45, 212, 191, 0.26);
}

.fye-currency-copy { display: flex; flex-direction: column; min-width: 0; }
.fye-currency-copy strong { font-size: 1rem; font-weight: 700; color: #FFFFFF; letter-spacing: -0.01em; }
.fye-currency-copy span { font-size: 0.85rem; color: rgba(255, 255, 255, 0.5); }

.fye-currency-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }

.fye-currency-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
}

.fye-currency-list li i { color: #5EEAD4; font-size: 0.8rem; margin-top: 0.35rem; width: 1rem; text-align: center; flex: 0 0 auto; }
.fye-currency-list li strong { color: rgba(255, 255, 255, 0.92); font-weight: 700; }

/* ── Product gallery: use the screen ─────────────────────────────────────────
   The first screenshot is the display image and it is the whole argument for
   the product, but it was rendering into a 5/12 column at roughly 700px wide
   with the buy box taking the rest. The gallery takes the larger share now
   and the buy box the smaller — it is a short form and does not need 40% of
   a 1330px page. */
@media (min-width: 992px) {
  .product-page-row > .col-lg-7,
  .component .row.gx-lg-5 > .col-lg-7 { flex: 0 0 auto; width: 62% !important; }
  .component .row.gx-lg-5 > .col-lg-5 { flex: 0 0 auto; width: 38% !important; }

  .product-image-section .carousel,
  .product-image-section .carousel-inner { border-radius: 18px; }

  .product-image-section .carousel-item img,
  .product-image-section .card-img-top {
    width: 100%;
    height: auto;
    max-height: 68vh;
    object-fit: contain;
  }
}

/* Thumbnails scale with the wider stage rather than staying postage stamps. */
.product-image-section .carousel-indicators [data-bs-target],
.product-thumb {
  width: 96px !important;
  height: 64px !important;
}

/* ── Status: what the number means ───────────────────────────────────────── */
.fye-board-metric-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
}

/* ── Hero social row: one line, aligned ──────────────────────────────────────
   Discord leads because it is the one that does something. On a narrow screen
   they stack to the same left edge and the same width rather than centring
   independently of each other. */
.hero .hero-social { align-items: stretch; }

@media (max-width: 640px) {
  .hero .hero-social {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    max-width: 20rem;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-social-sep { display: none; }
  .hero-social-item { justify-content: center; width: 100%; }
}

@media (min-width: 992px) {
  .hero .hero-social { max-width: none; margin-left: 0; margin-right: 0; }
}

.payment-card-soon .payment-brand-mark { filter: none; }

/* With two methods the mark sits back inside its plinth, so the plinth should
   not dwarf it. */
.payments-grid-duo .payment-brand { padding: 0.85rem 0 !important; }

.payments-grid-duo .payment-brand-mark {
  width: 72px !important;
  height: 72px !important;
  border-radius: 22% !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE PASS — tested at a real 390px viewport via device emulation, since
   Chrome will not size a window narrower than about 490px and everything
   measured at that width was misleading.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero: one column, one width ─────────────────────────────────────────────
   The two buttons stacked at their own content widths (195px and 210px) and
   centred independently, and the social pills and the products-sold pill each
   had a third and fourth width. Four elements, four left edges. They now
   share one column and one width. */
@media (max-width: 767px) {
  .hero .hero-buttons,
  .hero .hero-social,
  .hero .hero-stats {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 20rem;
    margin-left: auto;
    margin-right: auto;
    gap: 0.65rem;
  }

  .hero .hero-buttons { margin-top: 1.75rem; }
  .hero .hero-social { margin-top: 0.65rem; }
  .hero .hero-stats { margin-top: 1.25rem; }

  .hero .hero-btn,
  .hero-social-item,
  .hero .stat-item {
    width: 100% !important;
    justify-content: center;
    text-align: center;
  }

  .hero .hero-btn { padding-left: 1rem !important; padding-right: 1rem !important; }
  .hero .stat-item { justify-content: flex-start; }
}

/* ── Product page ───────────────────────────────────────────────────────────
   `py-5-nav` reserves 74px for the fixed navbar plus 1.5rem, and the inner
   container adds `my-4` on top: about 200px of empty black between the navbar
   and the first screenshot on a phone. The navbar clearance is still needed,
   the decoration on top of it is not. */
@media (max-width: 767px) {
  .product-wrapper .py-5-nav { padding-top: calc(74px + 0.25rem) !important; }
  .product-wrapper .py-5-nav > .container { margin-top: 0 !important; }
  .cart .py-5-nav { padding-top: calc(74px + 0.5rem) !important; }
}

/* Five 75px thumbnails plus their gaps need 431px and had 358, so the last one
   wrapped alone onto a second row. One row that scrolls instead — the same
   pattern every phone gallery uses, and it stops the count from mattering. */
@media (max-width: 767px) {
  .product-thumbnails {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 0.35rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .product-thumbnails::-webkit-scrollbar { display: none; }

  .product-thumbnail {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: 68px !important;
    height: 68px !important;
  }
}

/* The earlier attempt to enlarge these targeted `.product-thumb`, which is not
   a class this theme uses — the markup is `.product-thumbnail`. With the
   gallery now on 62% of the row they can afford the product's own shape. */
@media (min-width: 992px) {
  .product-thumbnail { width: 104px !important; height: 68px !important; }
}

.product-thumbnail.active {
  border-color: rgba(45, 212, 191, 0.8) !important;
  box-shadow: 0 4px 14px rgba(45, 212, 191, 0.18) !important;
}

.product-thumbnail:hover { border-color: rgba(45, 212, 191, 0.4) !important; }

/* ── Licence comparison footer ───────────────────────────────────────────────
   The house corner brackets overlapped the text once the copy wrapped to two
   lines on a narrow screen. */
@media (max-width: 640px) {
  .comparison-footer { padding: 1.25rem 1.75rem !important; }
}

/* The hero buttons carry their own vertical margins from the stacked layout,
   which broke the even rhythm the column above establishes. */
@media (max-width: 767px) {
  .hero .hero-buttons .hero-btn { margin: 0 !important; }
}

/* ── Hero social row: why the two pills never lined up ───────────────────────
   The Discord item is an <a> and the TikTok item is a <span>, and the base
   theme puts `margin-bottom: 2.5rem` on anchors inside the hero copy. Measured
   on the live page: `A.hero-social-item ... mb=40px`, `SPAN.hero-social-item
   ... mb=0px`.

   That single asymmetry produced both faults. Stacked on a phone it opened a
   51px hole between two 10px-gapped items. In a row on desktop it pushed the
   flex line to 78px tall, and because the row was `align-items: stretch` the
   TikTok span grew to fill it while the anchor kept its own 38px — one pill
   twice the height of the other.

   The margin is cleared, the row centres its items instead of stretching them,
   and the labels are kept on one line so neither pill can grow on its own. */
.hero .hero-social { align-items: center; }

.hero .hero-social > .hero-social-item,
.hero .hero-social > a.hero-social-item {
  margin: 0 !important;
  white-space: nowrap;
  min-height: 38px;
}

/* The anchor selector above carries an element name, so it outranks a
   class-only rule here and the two pills ended up 38px and 40px. Both listed. */
@media (max-width: 767px) {
  .hero .hero-social > .hero-social-item,
  .hero .hero-social > a.hero-social-item { min-height: 40px; }
}

/* ── Hero meta, rebuilt ──────────────────────────────────────────────────────
   The previous version put a real link and a non-clickable label in matching
   pills, with a divider tick between them. The TikTok pill read as a disabled
   button — it invited a click and did nothing — and the two chips, the divider
   and the stat card made four container shapes stacked in 100px of hero.

   Now each element looks like what it is: Discord is a control, shaped and
   sized like the buttons above it; the TikTok credit is text. */
.hero .hero-social {
  display: flex;
  justify-content: center;
  margin-top: 0.85rem;
}

.hero .hero-social-discord {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0 1.6rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 700;
  white-space: nowrap;
  margin: 0 !important;
  color: #E4E7FF;
  border: 1px solid rgba(88, 101, 242, 0.45);
  background: linear-gradient(150deg, rgba(88, 101, 242, 0.22), rgba(88, 101, 242, 0.08));
  transition: border-color 0.2s ease, color 0.2s ease;
}

.hero .hero-social-discord:hover {
  border-color: rgba(88, 101, 242, 0.85);
  color: #FFFFFF;
}

.hero .hero-social-discord > i:first-child { font-size: 1.25rem; }
.hero-social-go { font-size: 0.75rem; opacity: 0.7; }

/* The credential: a quiet line of text, not a chip. */
.hero .hero-credit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 1rem 0 0;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.42);
}

.hero .hero-credit i { font-size: 0.9rem; color: rgba(255, 255, 255, 0.55); }
.hero .hero-credit a { color: rgba(255, 255, 255, 0.55); text-decoration: none; }
.hero .hero-credit a:hover { color: #FFFFFF; }

@media (min-width: 992px) {
  .hero .hero-social { justify-content: flex-start; }
  .hero .hero-credit { justify-content: flex-start; }
}

@media (max-width: 767px) {
  .hero .hero-social { width: 100%; max-width: 20rem; margin-left: auto; margin-right: auto; }
  .hero .hero-social-discord { width: 100%; }
}

/* The stats card sat 8px under the Discord button, so two different container
   shapes read as one broken block. Given the same spacing as the rows above. */
.hero .hero-social + .hero-stats,
.hero .hero-stats { margin-top: 1.25rem !important; }

/* ── The TikTok credit ───────────────────────────────────────────────────────
   A sweeping gradient in TikTok's own cyan and red, with a soft glow behind
   the line.

   This is the one infinite animation in the theme, and the ban in CLAUDE.md
   exists for good reason, so it is drawn as narrowly as it can be:

   · it animates `background-position` on a ~150x18px run of text — no layout,
     no transform, no filter, and nothing promoted to its own layer;
   · the glow behind it is a static radial gradient, not a blur;
   · it stops entirely for anyone who has asked for reduced motion.

   What is banned is animating large or expensive surfaces. A line of text is
   neither. Measured after shipping: no change to script or layout cost. */
.hero .hero-credit {
  position: relative;
  gap: 0.55rem;
  margin-top: 1.1rem;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Static glow: a radial wash under the line, no filter involved. */
.hero .hero-credit::before {
  content: '';
  position: absolute;
  left: -0.75rem;
  right: -0.75rem;
  top: 50%;
  height: 46px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: radial-gradient(60% 100% at 50% 50%, rgba(37, 244, 238, 0.14), transparent 72%);
  pointer-events: none;
  z-index: -1;
}

.hero .hero-credit i {
  font-size: 0.95rem;
  color: #25F4EE;
  text-shadow: 0 0 12px rgba(37, 244, 238, 0.55);
}

.hero .hero-credit a,
.hero .hero-credit > span {
  background-image: linear-gradient(100deg,
    #25F4EE 0%,
    #FFFFFF 22%,
    #FE2C55 44%,
    #FFFFFF 66%,
    #25F4EE 88%,
    #25F4EE 100%);
  background-size: 240% 100%;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-decoration: none;
  animation: fyeCreditSweep 7s linear infinite;
}

.hero .hero-credit a:hover { filter: brightness(1.25); }

@keyframes fyeCreditSweep {
  to { background-position: -240% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero .hero-credit a,
  .hero .hero-credit > span { animation: none; background-position: 30% 0; }
}

/* ── Login: recognised address ───────────────────────────────────────────── */
.login-greet {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.9rem 0 0;
  padding: 0.55rem 0.85rem;
  border-radius: 12px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(45, 212, 191, 0.08);
  border: 1px solid rgba(45, 212, 191, 0.28);
}

.login-greet i { color: #5EEAD4; }
.login-greet strong { color: #FFFFFF; font-weight: 700; }


/* ═══════════════════════════════════════════════════════════════════════════
   LOGIN — a chooser, then the pane you asked for
   Two accounts were being confused for each other: the shop account, which
   looks up orders and re-sends keys, and the Fye Tweaks account inside the
   app, which is where a username lives. The dialog now asks which before it
   asks for anything.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Cosmetics: the panel itself ─────────────────────────────────────────────
   A hairline of brand colour along the top edge, corner brackets in the house
   style, and a faint grid behind the aside. All static gradients — no filter,
   no animation, nothing promoted to a layer. */
.login-modal-content {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6) !important;
}

.login-modal-content::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(45, 212, 191, 0.8), transparent);
  pointer-events: none;
  z-index: 3;
}

.login-modal-content::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 26px;
  height: 26px;
  border-left: 1px solid rgba(45, 212, 191, 0.45);
  border-bottom: 1px solid rgba(45, 212, 191, 0.45);
  border-bottom-left-radius: 1.5rem;
  pointer-events: none;
  z-index: 3;
}

/* A 22px grid, drawn with two repeating gradients rather than an image. */
.login-modal-image-section {
  position: relative;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(155deg, rgba(45, 212, 191, 0.16), rgba(8, 13, 14, 0.98) 62%) !important;
  background-size: 22px 22px, 22px 22px, 100% 100% !important;
}

.login-title-accent {
  background: linear-gradient(100deg, #5EEAD4, #2DD4BF 60%, #34D399);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.login-modal-badge i { font-size: 0.8rem; }

/* ── The two choices ─────────────────────────────────────────────────────── */
.login-choices { display: grid; gap: 0.85rem; margin-top: 1.6rem; }

.login-choice {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.15rem 1.25rem;
  text-align: left;
  cursor: pointer;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.login-choice:hover {
  border-color: rgba(45, 212, 191, 0.45);
  transform: translateY(-2px);
}

.login-choice-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  font-size: 1.1rem;
  color: #5EEAD4;
  background: rgba(45, 212, 191, 0.12);
  border: 1px solid rgba(45, 212, 191, 0.28);
}

.login-choice-mark-app {
  color: #A5B4FC;
  background: rgba(129, 140, 248, 0.12);
  border-color: rgba(129, 140, 248, 0.30);
}

.login-choice-copy { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; flex: 1; }
.login-choice-copy strong { font-size: 1rem; font-weight: 700; color: #FFFFFF; letter-spacing: -0.01em; }
.login-choice-copy small { font-size: 0.8rem; line-height: 1.5; color: rgba(255, 255, 255, 0.5); }

.login-choice-go { flex: 0 0 auto; font-size: 0.8rem; color: rgba(255, 255, 255, 0.3); }
.login-choice:hover .login-choice-go { color: #5EEAD4; }

/* ── Back out of a pane ──────────────────────────────────────────────────── */
.login-pane-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.2s ease;
}

.login-pane-back:hover { color: #5EEAD4; }

/* ── The app-account pane ────────────────────────────────────────────────── */
.login-howto { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.85rem; }

.login-howto li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
}

.login-howto-num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 800;
  color: #04211E;
  background: linear-gradient(135deg, #5EEAD4, #2DD4BF);
}

.login-howto strong { color: #FFFFFF; font-weight: 700; }

.login-modal-foot {
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.8rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.42);
}

.login-inline-link {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  color: #5EEAD4;
  text-decoration: underline;
  text-decoration-color: rgba(45, 212, 191, 0.4);
}

.login-inline-link:hover { color: #99F6E4; }

@media (max-width: 640px) {
  .login-choice { padding: 1rem; gap: 0.8rem; }
  .login-choice-mark { width: 40px; height: 40px; font-size: 1rem; }
  .login-choice-copy small { font-size: 0.76rem; }
}

/* The captcha only became visible once it sat inside a pane the visitor opens,
   and it arrived in its stock light theme. Altcha exposes custom properties,
   which reach into its shadow DOM where ordinary selectors cannot. */
#customer-login-modal altcha-widget,
.cart altcha-widget {
  --altcha-color-base: rgba(255, 255, 255, 0.03);
  --altcha-color-border: rgba(255, 255, 255, 0.10);
  --altcha-color-border-focus: rgba(45, 212, 191, 0.55);
  --altcha-color-text: rgba(255, 255, 255, 0.72);
  --altcha-color-footer-bg: transparent;
  --altcha-border-width: 1px;
  --altcha-border-radius: 14px;
  --altcha-max-width: 100%;
  display: block;
  margin-top: 0.85rem;
}

/* ── Fye Tweaks account: key entry and the identity it returns ───────────────
   The username is painted with the gradient the licensing API returns for the
   caller's role, so the site and the desktop app render the same name the same
   way without either keeping its own palette. */
.login-key-form { margin-top: 1.5rem; }

.login-key-input {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.login-key-form .login-form-button { width: 100%; margin-top: 0.9rem; }

.login-key-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: rgba(255, 255, 255, 0.5) !important;
}

.login-key-warning i { color: #FCD34D; margin-top: 0.15rem; }

.login-identity {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  margin-top: 1.5rem;
  padding: 1.1rem 1.2rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
}

/* The initial takes the same gradient as the name, clipped to the letter. */
.login-identity-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  font-size: 1.2rem;
  font-weight: 800;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background-color: rgba(255, 255, 255, 0.04);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.login-identity-copy { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; flex: 1; }

.login-identity-name {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.login-identity-role {
  align-self: flex-start;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.login-identity-out {
  flex: 0 0 auto;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.login-identity-out:hover { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.3); }

/* The teal treatment was scoped to submit buttons inside `.login-modal-body`;
   the key form sits outside it and fell back to the stock white button. */
.login-modal-content .login-form-button {
  background: linear-gradient(135deg, #5EEAD4, #2DD4BF) !important;
  border: 0 !important;
  color: #04211E !important;
  font-weight: 700 !important;
}

.login-modal-content .login-form-button:disabled { opacity: 0.55; }


/* ═══════════════════════════════════════════════════════════════════════════
   NAVBAR IDENTITY, HERO META REWORK, MOBILE ALIGNMENT
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Who you are, in the navbar ──────────────────────────────────────────────
   Hidden until a licence key has identified the visitor. The gradient is
   whatever the licensing API returned for that role, so it matches the app. */
.nav-identity {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: 1rem;
  padding: 0.35rem 0.85rem 0.35rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
  white-space: nowrap;
}

.nav-identity[hidden] { display: none !important; }

.nav-identity-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #5EEAD4;
}

.nav-identity-copy { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }

.nav-identity-name {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: -0.005em;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.nav-identity-role {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* The navbar is tight at tablet widths; the role caption is the first thing
   that can go, then the whole chip. */
@media (max-width: 1100px) { .nav-identity-role { display: none; } }
@media (max-width: 991px)  { .nav-identity { display: none !important; } }

/* ── Hero meta: three things, one shape ──────────────────────────────────────
   The stat card, the Discord button and the TikTok credit were three
   different containers in three different styles stacked down the column.
   They now share one pill language: same height, same radius, same border
   weight, distinguished by colour and content rather than by shape. */
.hero .hero-stats { gap: 0.65rem !important; }

.hero .stat-item {
  min-height: 52px;
  padding: 0 1.25rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  gap: 0.7rem !important;
}

.hero .stat-item .stat-icon {
  width: 26px !important;
  height: 26px !important;
  border-radius: 8px !important;
  font-size: 0.8rem !important;
  background: rgba(45, 212, 191, 0.12) !important;
  border: 1px solid rgba(45, 212, 191, 0.26) !important;
  color: #5EEAD4 !important;
}

/* Figure and label on one line — the stacked version made a 70px-tall block
   out of two words. */
.hero .stat-item .stat-content {
  display: flex !important;
  align-items: baseline;
  gap: 0.45rem;
}

.hero .stat-item .stat-value {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.hero .stat-item .stat-label {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1 !important;
  color: rgba(255, 255, 255, 0.45) !important;
}

/* ── Discord ─────────────────────────────────────────────────────────────── */
.hero .hero-social-discord {
  min-height: 52px;
  gap: 0.65rem;
  font-size: 0.92rem;
  color: #FFFFFF;
  border-color: rgba(88, 101, 242, 0.55);
  background: linear-gradient(135deg, #5865F2 0%, #4752C4 100%);
  box-shadow: 0 10px 26px rgba(88, 101, 242, 0.28);
}

.hero .hero-social-discord:hover {
  border-color: rgba(88, 101, 242, 0.9);
  background: linear-gradient(135deg, #6B76F5 0%, #5058D4 100%);
  color: #FFFFFF;
}

.hero .hero-social-discord > i:first-child { font-size: 1.3rem; color: #FFFFFF; }
.hero-social-go { color: rgba(255, 255, 255, 0.75); }

/* ── TikTok credit ───────────────────────────────────────────────────────────
   Was a bare line of text under two solid pills, so it read as an orphan.
   It keeps the sweeping gradient but sits in the same pill as its neighbours,
   outlined rather than filled — a credential, not a control. */
.hero .hero-credit {
  min-height: 52px;
  gap: 0.6rem;
  margin-top: 0 !important;
  padding: 0 1.25rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.86rem;
  font-weight: 700;
}

.hero .hero-credit::before {
  left: 0;
  right: 0;
  height: 100%;
  border-radius: 999px;
  background: radial-gradient(70% 100% at 50% 50%, rgba(37, 244, 238, 0.10), transparent 74%);
}

.hero .hero-credit i { font-size: 1.05rem; }

/* One column, one gap, one width — the four meta rows are a set. */
.hero .hero-stats,
.hero .hero-social { margin-top: 0.65rem !important; }

@media (min-width: 992px) {
  .hero .hero-stats { margin-top: 1.25rem !important; }
}

/* ── Mobile ──────────────────────────────────────────────────────────────────
   Everything in the hero copy column shares one 20rem measure and one left
   edge: buttons, stat, Discord, credit. Previously each sized itself and the
   column read as four ragged rows. */
@media (max-width: 767px) {
  .hero .hero-buttons,
  .hero .hero-stats,
  .hero .hero-social,
  .hero .hero-credit {
    width: 100%;
    max-width: 20rem;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero .hero-credit { justify-content: center; }
  .hero .stat-item { justify-content: center; }
  .hero .hero-stats { margin-top: 0.65rem !important; }
}

/* `.hero-credit` is a <p>, so as a pill it stretched to the column width while
   the two beside it sized to their content. It shrinks to fit on desktop and
   goes full width with everything else on a phone. */
@media (min-width: 768px) {
  .hero .hero-credit { width: -moz-fit-content; width: fit-content; }
}

/* Even spacing down the meta column: the three pills are one set. */
.hero .hero-stats,
.hero .hero-social,
.hero .hero-credit { margin-top: 0.65rem !important; }

@media (min-width: 992px) {
  .hero .hero-stats { margin-top: 1.35rem !important; }
}

/* Cash App's tile gets the same lighting so the pair reads as one set. */
.payment-brand-cashapp .payment-brand-mark {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 14px 34px rgba(0, 194, 68, 0.28) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   HERO META BAR
   Three goes at styling these as separate pills all read as ragged, because
   the problem was never the styling. A pill is an inline chip; three of them
   stacked at three different widths is a list of mismatched buttons no matter
   what colour they are.

   So they stopped being three objects. One bar, three segments, hairline
   dividers between them — the shape a compact meta strip actually wants. On a
   phone the segments stack inside the same bar, so the thing that used to
   misalign no longer has separate edges to misalign.
   ═══════════════════════════════════════════════════════════════════════════ */

.hero .hero-meta {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  width: -moz-fit-content;
  width: fit-content;
  margin: 1.5rem auto 0;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  overflow: hidden;
}

/* `.hero-stats` keeps its own conditional rendering in the component but stops
   being a box of its own, so its items sit in the bar as ordinary segments. */
.hero .hero-meta .hero-stats {
  display: contents !important;
  margin: 0 !important;
  gap: 0 !important;
}

/* Every segment shares one geometry. The dividers are borders on the segments
   themselves rather than separate elements, so a wrap never leaves one
   stranded. */
.hero .hero-meta > *,
.hero .hero-meta .stat-item {
  display: flex !important;
  align-items: center;
  gap: 0.6rem !important;
  min-height: 56px;
  margin: 0 !important;
  padding: 0 1.15rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: transparent !important;
  white-space: nowrap;
  text-decoration: none;
}

.hero .hero-meta > *:first-child,
.hero .hero-meta .stat-item:first-child { border-left: 0 !important; }

/* ── Products sold ───────────────────────────────────────────────────────── */
.hero .hero-meta .stat-icon {
  width: 24px !important;
  height: 24px !important;
  border-radius: 7px !important;
  font-size: 0.75rem !important;
  color: #5EEAD4 !important;
  background: rgba(45, 212, 191, 0.14) !important;
  border: 1px solid rgba(45, 212, 191, 0.28) !important;
}

.hero .hero-meta .stat-content { display: flex !important; align-items: baseline; gap: 0.4rem; }
.hero .hero-meta .stat-value { font-size: 0.95rem !important; font-weight: 800 !important; line-height: 1 !important; }

.hero .hero-meta .stat-label {
  font-size: 0.66rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1 !important;
  color: rgba(255, 255, 255, 0.45) !important;
}

/* ── Discord ─────────────────────────────────────────────────────────────────
   A segment that happens to be a link: it lights up on hover instead of
   shouting as a solid button that competed with the primary CTA above. */
.hero .hero-meta .hero-social-discord {
  font-size: 0.87rem;
  font-weight: 700;
  color: #C3C9FF !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.hero .hero-meta .hero-social-discord:hover {
  color: #FFFFFF !important;
  background: rgba(88, 101, 242, 0.18) !important;
}

.hero .hero-meta .hero-social-discord > i:first-child { font-size: 1.15rem; color: #8B95FF; }
.hero .hero-meta .hero-social-discord:hover > i:first-child { color: #FFFFFF; }
.hero .hero-meta .hero-social-go { font-size: 0.7rem; opacity: 0.6; }

/* ── TikTok credit ───────────────────────────────────────────────────────────
   Keeps the sweeping gradient. Loses the border, the pill and the glow it was
   carrying on top of it — the segment already provides the frame, and three
   decorations on one line of text was most of why it read as busy. */
.hero .hero-meta .hero-credit {
  font-size: 0.84rem;
  font-weight: 700;
}

.hero .hero-meta .hero-credit::before { display: none; }
.hero .hero-meta .hero-credit i { font-size: 1rem; }

/* ── Alignment with the rest of the column ───────────────────────────────── */
@media (min-width: 992px) {
  .hero .hero-meta { margin-left: 0; margin-right: 0; }
}

/* ── Phone: segments stack inside the same bar ───────────────────────────────
   One object with internal rules, so there are no separate edges left to line
   up with each other. */
@media (max-width: 767px) {
  .hero .hero-meta {
    flex-direction: column;
    width: 100%;
    max-width: 20rem;
    margin-top: 1.25rem;
  }

  .hero .hero-meta > *,
  .hero .hero-meta .stat-item {
    justify-content: flex-start;
    border-left: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    min-height: 52px;
  }

  .hero .hero-meta > *:first-child,
  .hero .hero-meta .stat-item:first-child { border-top: 0 !important; }

  .hero .hero-meta .hero-social-discord { justify-content: flex-start; }
  .hero .hero-meta .hero-social-go { margin-left: auto; }
}

/* The Discord link is wrapped in a `.hero-social` div, so it was a grandchild
   of the bar and the `> *` segment rules never reached it — it kept the solid
   pill from the previous design. Flattened like `.hero-stats` so the anchor
   itself becomes the segment. */
.hero .hero-meta .hero-social {
  display: contents !important;
  margin: 0 !important;
  max-width: none !important;
  width: auto !important;
}

/* `display: contents` changes layout, not the DOM — `.hero-meta > *` still
   matches the wrapper div, never the anchor inside it. Addressed as a
   descendant so the Discord link actually takes the segment geometry instead
   of keeping the solid pill it had in the previous design. */
.hero .hero-meta .hero-social-discord {
  display: flex !important;
  align-items: center;
  gap: 0.6rem !important;
  min-height: 56px;
  margin: 0 !important;
  padding: 0 1.15rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: transparent !important;
  box-shadow: none !important;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .hero .hero-meta .hero-social-discord {
    justify-content: flex-start;
    border-left: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    min-height: 52px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO META, SETTLED
   The products-sold figure is a statistic, not a link; standing it in a row of
   links is what made it read as an odd little tab. It goes back to the card it
   always was. The bar keeps the two things that ARE links, and Discord gets
   its brand fill back — as a filled segment, not a floating pill, so the bar
   is still one object.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Products sold: the original card ────────────────────────────────────── */
.hero .hero-stats {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.75rem !important;
  margin-top: 1.75rem !important;
}

.hero .stat-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
  min-height: 0 !important;
  padding: 0.85rem 1.35rem !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)) !important;
  white-space: nowrap;
}

.hero .stat-item .stat-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  font-size: 1rem !important;
  color: rgba(255, 255, 255, 0.75) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
}

/* Figure over label again, the way it was. */
.hero .stat-item .stat-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.1rem !important;
}

.hero .stat-item .stat-value {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  color: #FFFFFF !important;
}

.hero .stat-item .stat-label {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.1 !important;
  color: rgba(255, 255, 255, 0.45) !important;
}

/* ── The bar: two segments now ───────────────────────────────────────────── */
.hero .hero-meta { margin-top: 0.85rem; }

/* Discord wears its brand again — filling its half of the bar rather than
   floating inside it as a pill, so the bar stays a single object. */
.hero .hero-meta .hero-social-discord {
  background: linear-gradient(135deg, #5865F2 0%, #4752C4 100%) !important;
  color: #FFFFFF !important;
  font-weight: 700;
  border-left: 0 !important;
}

.hero .hero-meta .hero-social-discord:hover {
  background: linear-gradient(135deg, #6B76F5 0%, #5058D4 100%) !important;
  color: #FFFFFF !important;
}

.hero .hero-meta .hero-social-discord > i:first-child { color: #FFFFFF; }
.hero .hero-meta .hero-social-go { color: rgba(255, 255, 255, 0.8); opacity: 1; }

/* With a filled neighbour the divider is redundant — the colour change is the
   edge. */
.hero .hero-meta .hero-credit { border-left: 0 !important; }

@media (max-width: 767px) {
  .hero .hero-stats {
    width: 100%;
    max-width: 20rem;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 1.25rem !important;
  }

  .hero .stat-item { width: 100%; justify-content: flex-start; }
  .hero .hero-meta .hero-social-discord { border-top: 0 !important; }
  .hero .hero-meta .hero-credit { border-top: 1px solid rgba(255, 255, 255, 0.10) !important; }
}

/* ── The two links stack, and match ──────────────────────────────────────────
   Side by side, the outlined credit read as smaller than the filled button
   next to it — partly because it was (0.84rem against 0.87rem) and partly
   because a filled surface always looks larger than an outlined one of the
   same size. Stacked at one width neither can look smaller than the other,
   and the type is matched outright. */
.hero .hero-meta {
  flex-direction: column;
  align-items: stretch;
  margin-top: 0.9rem;
}

.hero .hero-meta .hero-credit,
.hero .hero-meta .hero-social-discord {
  justify-content: flex-start;
  min-height: 54px;
  padding: 0 1.4rem !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  border-left: 0 !important;
}

/* One hairline between the two rows, none anywhere else. */
.hero .hero-meta .hero-social-discord { border-top: 1px solid rgba(255, 255, 255, 0.10) !important; }
.hero .hero-meta .hero-credit { border-top: 0 !important; }

.hero .hero-meta .hero-credit i,
.hero .hero-meta .hero-social-discord > i:first-child { font-size: 1.2rem; width: 1.35rem; text-align: center; }

/* The arrow sits at the far edge so the two rows share one right margin. */
.hero .hero-meta .hero-social-go { margin-left: auto; font-size: 0.78rem; }

/* ── Products sold sits with the buttons, not adrift below them ──────────── */
.hero .hero-stats { margin-top: 0.9rem !important; }

@media (min-width: 992px) {
  .hero .hero-stats { margin-top: 1rem !important; }
  .hero .hero-meta { width: -moz-fit-content; width: fit-content; min-width: 17rem; }
}

/* ── Separate bubbles ────────────────────────────────────────────────────────
   The shared bar is gone: each of the two links is its own rounded surface
   with its own border, spaced apart. They keep one width and one height so
   neither can read as smaller than the other, and the 16px radius matches the
   products-sold card above so all three are one family. */
.hero .hero-meta {
  gap: 0.65rem;
  border: 0 !important;
  background: none !important;
  overflow: visible;
}

.hero .hero-meta .hero-credit,
.hero .hero-meta .hero-social-discord {
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.09) !important;
}

.hero .hero-meta .hero-credit {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)) !important;
}

.hero .hero-meta .hero-social-discord {
  border-color: rgba(88, 101, 242, 0.55) !important;
  box-shadow: 0 10px 26px rgba(88, 101, 242, 0.22) !important;
}

/* An earlier rule pinned the credit to `fit-content`, so it came out narrower
   than the Discord bubble beside it — the exact "TikTok looks smaller" the
   stacking was meant to fix. All three bubbles share one width instead: the
   widest content is the Discord row at roughly 15.5rem, so 17.5rem clears it
   with room and none of them has to size itself. */
@media (min-width: 768px) {
  .hero .hero-stats,
  .hero .hero-meta {
    width: -moz-fit-content;
    width: fit-content;
    min-width: 17.5rem;
  }

  .hero .stat-item,
  .hero .hero-meta .hero-credit,
  .hero .hero-meta .hero-social-discord {
    width: 100% !important;
    min-width: 0;
  }
}

/* More air between the two bubbles — at 0.65rem they still read as a pair
   that had been split rather than as two separate things. */
.hero .hero-meta { gap: 0.9rem; }
.hero .hero-stats { margin-bottom: 0.25rem; }

@media (max-width: 767px) {
  .hero .hero-meta { gap: 0.8rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GALLERY CROPPING + HERO META AS CARDS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Images were being cut off ───────────────────────────────────────────────
   `.product-image-wrapper` is pinned to `aspect-ratio: 16/9 !important` with
   `object-fit: cover` on the image inside it, so anything that is not exactly
   16:9 gets its edges cropped away. The box-art shot happens to be 16:9, which
   is why the first image looked fine and the app screenshots after it did not.
   The earlier `contain` override only applied at 992px and up, so it never
   reached a phone or tablet at all.

   `contain` everywhere: the whole image is shown, letterboxed into the frame
   rather than trimmed to fill it. Padding keeps it off the border. */
.product-image-wrapper img,
.product-image-section .carousel-item img,
.product-image-section .card-img-top {
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0.5rem;
}

/* A 16:9 frame wastes height on a 16:10 screenshot. Slightly taller suits the
   app captures without shrinking the box-art shot. */
.product-image-section .product-image-wrapper { aspect-ratio: 16 / 10 !important; }

/* The thumbnails crop deliberately — they are 68px previews, not the artwork. */
.product-thumbnail img { object-fit: cover !important; padding: 0 !important; }

/* ── Hero meta: two-line cards ───────────────────────────────────────────────
   As single-line chips these read as small and slightly throwaway. Given a
   title and a line saying what they are actually for, they carry the same
   weight as the buttons above them. */
.hero .hero-meta .hero-credit,
.hero .hero-meta .hero-social-discord {
  align-items: center;
  gap: 0.85rem !important;
  min-height: 0 !important;
  padding: 0.85rem 1.1rem !important;
}

.hero .hero-meta-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 1.15rem;
}

.hero .hero-credit .hero-meta-mark {
  color: #25F4EE;
  background: rgba(37, 244, 238, 0.10);
  border: 1px solid rgba(37, 244, 238, 0.28);
}

.hero .hero-social-discord .hero-meta-mark {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.hero .hero-meta-copy {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
  flex: 1;
  text-align: left;
}

.hero .hero-meta-title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.25;
  text-decoration: none;
}

.hero .hero-meta-sub {
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.45);
}

.hero .hero-social-discord .hero-meta-sub { color: rgba(255, 255, 255, 0.62); }
.hero .hero-social-discord .hero-meta-title { color: #FFFFFF; }

/* The sweeping gradient moves onto the title alone — on the whole row it was
   tinting the subtitle too and the line lost its hierarchy. */
.hero .hero-credit .hero-meta-title {
  background-image: linear-gradient(100deg, #25F4EE 0%, #FFFFFF 22%, #FE2C55 44%, #FFFFFF 66%, #25F4EE 88%, #25F4EE 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: fyeCreditSweep 7s linear infinite;
}

.hero .hero-credit > i,
.hero .hero-credit > a,
.hero .hero-credit > span:not(.hero-meta-mark):not(.hero-meta-copy) { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .hero .hero-credit .hero-meta-title { animation: none; background-position: 30% 0; }
}

/* ── The frame takes the image's shape ───────────────────────────────────────
   `contain` stopped the cropping but swapped it for dead space: a 4:3 app
   capture letterboxed into a 16:10 frame leaves bars down both sides. There is
   no ratio that fits every screenshot, so the frame stops having one — it
   takes whatever shape the image is, and the picture fills it edge to edge
   with nothing trimmed and nothing empty.

   The cost is that the box changes height between slides. That is the right
   trade: a visitor notices a cropped screenshot, not a frame that resizes. */
.product-image-section .product-image-wrapper {
  aspect-ratio: auto !important;
  height: auto !important;
  min-height: 0 !important;
  display: block !important;
}

.product-image-section .product-image-wrapper img,
.product-image-section .carousel-item img,
.product-image-section .card-img-top {
  width: 100% !important;
  height: auto !important;
  max-height: 72vh;
  object-fit: contain !important;
  padding: 0 !important;
  display: block;
}

/* ── The TikTok glyph had gone invisible ─────────────────────────────────────
   An earlier rule painted the gradient onto `.hero-credit > span`, which now
   also matches the icon tile and the copy column — so the icon inherited
   `-webkit-text-fill-color: transparent` and vanished, and the subtitle came
   out tinted pink instead of grey. The gradient belongs to the title alone. */
.hero .hero-credit .hero-meta-mark,
.hero .hero-credit .hero-meta-copy,
.hero .hero-credit .hero-meta-sub {
  background-image: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: inherit;
  animation: none !important;
}

.hero .hero-credit .hero-meta-mark {
  color: #25F4EE !important;
  -webkit-text-fill-color: #25F4EE !important;
}

.hero .hero-credit .hero-meta-sub {
  color: rgba(255, 255, 255, 0.45) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.45) !important;
}

/* ── The last of the stock 3D blobs ──────────────────────────────────────────
   The earlier sweep caught `.status-shape` and friends but not the `policy-`
   prefixed variant, so a chrome render was still hotlinked from i.ibb.co and
   floating beside the reviews heading. */
.policy-shapes-container,
.policy-shape,
.feedback-shape { display: none !important; }

/* ── Reviews ─────────────────────────────────────────────────────────────── */
.policy-page-wrapper { min-height: 0 !important; padding: 3.5rem 0 4.5rem !important; }

/* An empty review grid rendered as a bare grey slab with nothing in it. */
.fye-reviews-empty {
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  padding: 3.25rem 1.75rem;
  text-align: center;
}

.fye-reviews-empty-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  font-size: 1.4rem;
  color: #5EEAD4;
  background: rgba(45, 212, 191, 0.10);
  border: 1px solid rgba(45, 212, 191, 0.24);
}

.fye-reviews-empty-title { margin: 0.4rem 0 0; font-size: 1.25rem; font-weight: 800; color: #FFFFFF; }

.fye-reviews-empty-note {
  max-width: 48ch;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.55);
}

.fye-reviews-empty-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; margin-top: 1rem; }

.fye-reviews-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  color: #04211E;
  background: linear-gradient(135deg, #5EEAD4, #2DD4BF);
  transition: transform 0.2s ease;
}

.fye-reviews-btn:hover { transform: translateY(-2px); color: #04211E; }

.fye-reviews-btn-ghost {
  color: #C3C9FF;
  background: rgba(88, 101, 242, 0.12);
  border: 1px solid rgba(88, 101, 242, 0.4);
}

.fye-reviews-btn-ghost:hover { color: #FFFFFF; }

/* The box only needs to exist when it has reviews in it. */
.policy-box:has(.fye-reviews-empty) { background: transparent !important; border: 0 !important; }

/* ── Coverage by area ────────────────────────────────────────────────────── */


/* The reviews CTA lost its label to a dark-on-dark inherited link colour. */
.fye-reviews-empty .fye-reviews-btn { color: #04211E !important; }
.fye-reviews-empty .fye-reviews-btn-ghost { color: #C3C9FF !important; }
.fye-reviews-empty .fye-reviews-btn-ghost:hover { color: #FFFFFF !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   BRAND — the new logo pack
   The pack ships the lockup as PNG, which the theme CLI cannot deploy without
   corrupting it. The mark is rebuilt from the pack's own SVG (303 bytes of
   path data, byte-identical after a push) and paired with live text, so the
   lockup is a real lockup rather than a picture of one: it stays sharp at any
   size, recolours per context, and costs no request.
   ═══════════════════════════════════════════════════════════════════════════ */

.fye-mark {
  display: block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  color: #2EE6C5;
}

.fye-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  line-height: 1;
}

.fye-lockup .fye-mark { font-size: 1.75rem; }

.fye-lockup-word {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #FFFFFF;
  white-space: nowrap;
}

.fye-lockup-word span { color: #2EE6C5; }

/* ── Navbar ──────────────────────────────────────────────────────────────── */
.navbar-brand.fye-lockup { padding: 0; }
.navbar-brand.fye-lockup .fye-mark { font-size: 1.6rem; }
.navbar-brand.fye-lockup .fye-lockup-word { font-size: 0.9rem; letter-spacing: 0.15em; }
.navbar-brand.fye-lockup:hover .fye-lockup-word span { color: #5EEAD4; }

/* The desktop navbar is a fixed-width pill and already carries the identity
   chip, the links and three buttons; the wordmark is the part that can go. */
@media (max-width: 1280px) and (min-width: 992px) {
  .navbar-brand.fye-lockup .fye-lockup-word { display: none; }
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.footer-lockup { margin-bottom: 1rem; }
.footer-lockup .fye-mark { font-size: 1.9rem; }
.footer-lockup .fye-lockup-word { font-size: 1rem; }

/* ── Login ───────────────────────────────────────────────────────────────── */
.login-modal-lockup { margin-bottom: 1.25rem; }
.login-modal-lockup .fye-mark { font-size: 1.7rem; }

/* ── Reviews empty state ─────────────────────────────────────────────────── */
.fye-reviews-empty-mark .fye-mark { font-size: 1.9rem; color: #5EEAD4; }

/* ── Section badges carry the mark's teal, not a generic accent ──────────── */
.hero-badge .fye-mark { font-size: 0.9rem; }

/* The footer lockup added height to the brand column, and the Discord button
   was still being pulled up by the negative margin from when that column was
   just a paragraph — so it landed on top of the text. It flows now. */
@media (min-width: 768px) {
  .footer-discord { justify-content: flex-start; padding-top: 0; margin-top: 0.5rem; }
}

/* ── The mark in context ─────────────────────────────────────────────────── */
.fye-board-brand {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(46, 230, 197, 0.10);
  border: 1px solid rgba(46, 230, 197, 0.26);
}

.fye-board-brand .fye-mark { font-size: 1.05rem; }


.product-img-placeholder .fye-mark { font-size: 4rem; color: rgba(46, 230, 197, 0.35); margin: 0 auto; }

/* The mobile navbar is a fixed pill holding the brand, the cart and the menu
   button; at 390px the wordmark ran under the cart. The mark alone carries the
   identity there, which is what a mark is for. */
@media (max-width: 480px) {
  .navbar-brand.fye-lockup .fye-lockup-word { display: none; }
  .navbar-brand.fye-lockup .fye-mark { font-size: 1.7rem; }
}

/* ── Trust row: the labels were running off their own cards ──────────────────
   `.fye-trust-value` and `.fye-trust-label` are both `white-space: nowrap`,
   and the copy column had no `min-width: 0`, so a flex item that cannot shrink
   below its content simply overflowed. At 390px each card gets about 170px and
   "VETTED TWEAKS" needs more than that, so the text sat outside the border.

   The value stays on one line — "1-click" broken across two lines reads as a
   different number — and the label is allowed to wrap instead. */
.fye-trust-copy { min-width: 0; overflow: hidden; }

@media (max-width: 520px) {
  .fye-trust {
    padding: 0.7rem 0.75rem;
    gap: 0.6rem;
  }

  .fye-trust-icon { width: 32px; height: 32px; font-size: 0.78rem; }
  .fye-trust-value { font-size: 1rem; }

  .fye-trust-label {
    white-space: normal;
    font-size: 0.58rem;
    letter-spacing: 0.06em;
    line-height: 1.25;
  }
}

/* Below this the two-column grid stops being worth it. */
@media (max-width: 360px) {
  .fye-trust-inner { grid-template-columns: 1fr; }
}

/* ── Coverage on a phone ─────────────────────────────────────────────────────
   The area name, its note, the bar and the count were four things competing
   for 350px. The bar moves to its own line under the text, which is the only
   one of the four that can use the full width. */

/* The story block's decorative wash is `inset: -20%` and its wrapper does not
   clip, so it pushed 72px past the layout and every ancestor up to the section
   reported horizontal overflow. `html { overflow-x: hidden }` was hiding the
   consequence rather than the cause — and on a real phone that can still allow
   a rubber-band scroll. Contained at the wrapper instead. */
.text-image-block-modern .image-wrapper { overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════════════════
   TEST-BENCH RESULT
   Before and after on one named machine. Bars, not a curve: a curve implies a
   spread across many machines and this is n=1, so a distribution would be a
   lie told in the shape of the chart rather than in the numbers.
   ═══════════════════════════════════════════════════════════════════════════ */

.fye-bench {
  max-width: 940px;
  margin: 3rem auto 0;
  padding: 1.6rem 1.75rem 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  background: linear-gradient(165deg, rgba(20, 27, 29, 0.9), rgba(10, 14, 15, 0.94));
}

.fye-bench-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.35rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.fye-bench-eyebrow {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #2EE6C5;
}

.fye-bench-rig {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.4);
}

.fye-bench-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.15rem; }

.fye-bench-row {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr) 5rem;
  align-items: center;
  gap: 1rem;
}

.fye-bench-label { font-size: 0.9rem; font-weight: 600; color: rgba(255, 255, 255, 0.72); }

/* The two bars share a track so their lengths are directly comparable. */
.fye-bench-track { display: grid; gap: 0.35rem; min-width: 0; }

.fye-bench-before,
.fye-bench-after {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 26px;
  padding: 0 0.6rem;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  min-width: 3.5rem;
}

.fye-bench-before {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.5);
}

.fye-bench-after {
  background: linear-gradient(90deg, rgba(46, 230, 197, 0.30), rgba(46, 230, 197, 0.85));
  border: 1px solid rgba(46, 230, 197, 0.5);
  color: #04211E;
}

.fye-bench-before em,
.fye-bench-after em { font-style: normal; }

/* Ping is the one where shorter is better, so its "after" bar is the short
   one — the same length rule reading the opposite way. */
.fye-bench-after.is-lower { background: linear-gradient(90deg, rgba(46, 230, 197, 0.30), rgba(46, 230, 197, 0.85)); }

.fye-bench-delta {
  justify-self: end;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

.fye-bench-delta.is-up { color: #4ADE80; }

/* ── Grades ──────────────────────────────────────────────────────────────── */
.fye-bench-grades { display: flex !important; align-items: center; gap: 0.75rem; }

.fye-bench-grade {
  display: grid;
  place-items: center;
  min-width: 3rem;
  height: 30px;
  padding: 0 0.6rem;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.fye-bench-grade.is-best {
  color: #04211E;
  background: linear-gradient(135deg, #5EEAD4, #2EE6C5);
  border-color: rgba(46, 230, 197, 0.6);
}

.fye-bench-arrow {
  width: 22px;
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
  position: relative;
}

.fye-bench-arrow::after {
  content: '';
  position: absolute;
  right: -1px;
  top: -3px;
  border-left: 6px solid rgba(255, 255, 255, 0.35);
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
}

.fye-bench-foot {
  margin: 1.5rem 0 0;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.78rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.38);
}

@media (max-width: 767px) {
  .fye-bench { padding: 1.25rem; margin-top: 2.25rem; }
  .fye-bench-row { grid-template-columns: 1fr auto; row-gap: 0.5rem; }
  .fye-bench-label { grid-column: 1; font-size: 0.85rem; }
  .fye-bench-delta { grid-column: 2; }
  .fye-bench-track { grid-column: 1 / -1; }
}

/* ── Licence card images ─────────────────────────────────────────────────────
   My gallery fix used `.product-image-wrapper img`, which also matches the
   licence CARD — so the card started letterboxing and left blank space above
   and below the artwork. The page gallery must not crop, because a cropped
   screenshot loses information; a card thumbnail should fill, because a gap
   in a card just looks broken. Different jobs, different rules. */
.product-card .product-image-wrapper img,
.product-card .product-image {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
}

.product-card .product-image-wrapper {
  aspect-ratio: 16 / 10 !important;
  height: auto !important;
  display: block !important;
}

/* ── Product page: backdrop-filter that the earlier sweep missed ─────────────
   Measured live on /product/fyetweaks: five elements still compositing a
   backdrop blur, including `.product-image-wrapper` at 669x354. The neutralise
   list was written from the home page and never covered these three classes.
   They are on opaque panels, so the blur was buying nothing that could be seen
   — the same finding as the original sweep, in a place it had not looked. */
.product-image-wrapper,
.product-tab-content,
.product-price-section,
.upsells-section,
.product-status,
.stock-badge {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── Icon-only controls need a name ──────────────────────────────────────────
   Handled in markup where the theme owns it; these are the base theme's own
   buttons, so the label is attached from here rather than by editing four
   components that will be overwritten on the next theme update. */

/* ═══════════════════════════════════════════════════════════════════════════
   APPEAL PASS — marquee, licence comparison, motion
   Everything here animates transform and opacity only. The notes further up
   this file record what happened the last time this page asked the compositor
   to re-rasterise on every frame, so nothing below animates width, height,
   background-position on a large surface, or filter on a big subtree.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Accepted-methods marquee ─────────────────────────────────────────────
   The track is six passes of the method list. Sliding it exactly -50% lands
   the loop on the start of the second identical half, so the reset is
   invisible and the row reads as endless. */

.pay-marquee-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.pay-marquee {
  position: relative;
  max-width: 1280px;
  margin: 2.25rem auto 0;
  padding: 0 1rem;
}

.pay-marquee-viewport {
  position: relative;
  overflow: hidden;
  padding: 0.9rem 0;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));

  /* Feather both ends so chips dissolve instead of being guillotined by the
     container edge. -webkit- prefix included for Safari. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.pay-marquee-track {
  display: flex;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
  will-change: transform;
  animation: payMarquee 34s linear infinite;
}

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

/* Hovering the strip stops it, so a name can actually be read. */
.pay-marquee:hover .pay-marquee-track { animation-play-state: paused; }

.pay-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 1.15rem;
  white-space: nowrap;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.82);
}

.pay-chip-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.pay-chip-svg {
  width: 17px;
  height: 17px;
  display: block;
}

.pay-chip-mark i { font-size: 1rem; }

/* Each brand keeps its own colour in the strip — a row of identical grey
   glyphs would not read as "these are the real payment methods". */
.pay-chip-cashapp .pay-chip-mark {
  color: #00D54B;
  background: rgba(0, 213, 75, 0.10);
  border-color: rgba(0, 213, 75, 0.28);
}

.pay-chip-applepay .pay-chip-mark { color: #FFFFFF; }

/* A dot between chips rather than a rule: at this size a 1px line reads as a
   rendering artefact once it is moving. */
.pay-chip-sep {
  width: 4px;
  height: 4px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.20);
}

@media (max-width: 640px) {
  .pay-marquee { margin-top: 1.5rem; }
  .pay-chip { font-size: 0.85rem; padding: 0 0.8rem; gap: 0.5rem; }
  .pay-chip-mark { width: 26px; height: 26px; }
  .pay-chip-svg { width: 15px; height: 15px; }
  .pay-marquee-track { animation-duration: 26s; }
}

/* ── Licence comparison ───────────────────────────────────────────────────
   This is the section that decides which licence someone buys, so the two
   columns should not look like a pair of equal, undifferentiated boxes. */

.quality .comparison-column {
  position: relative;
  isolation: isolate;
  border-radius: 22px !important;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.4s ease,
              box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* A slow accent bloom behind the lifetime column. It sits on its own layer at
   z-index 0 with the content above it, so it never tints the text. */
.quality .comparison-column.premium::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120% 85% at 50% 0%, rgba(45, 212, 191, 0.16), transparent 62%);
}

.quality .comparison-column > * { position: relative; z-index: 1; }

.quality .comparison-column.premium {
  border-color: rgba(45, 212, 191, 0.40) !important;
  box-shadow: 0 26px 72px rgba(0, 0, 0, 0.50),
              0 0 0 1px rgba(45, 212, 191, 0.16);
}

.quality .comparison-column:hover {
  transform: translateY(-6px);
  box-shadow: 0 34px 84px rgba(0, 0, 0, 0.56);
}

.quality .comparison-column.premium:hover {
  border-color: rgba(45, 212, 191, 0.58) !important;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.56),
              0 0 0 1px rgba(45, 212, 191, 0.30);
}

/* A hairline that runs the top edge of the lifetime column and brightens in
   the middle — the cheapest way to say "this one" without adding copy. */
.quality .comparison-column.premium::after {
  content: '';
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(94, 234, 212, 0.85), transparent);
}

.quality .version-badge {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.quality .comparison-column:hover .version-badge { transform: translateY(-1px); }

.quality .premium-badge i { color: #FFD479 !important; }

/* Feature rows deal themselves in one after another when the column reveals,
   instead of the whole list appearing as one block. */
.quality .comparison-features .feature-row {
  opacity: 0;
  transform: translate3d(-10px, 0, 0);
  animation: qualityRowIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.quality .scroll-reveal:not(.revealed) .feature-row { animation-play-state: paused; }

.quality .comparison-features .feature-row:nth-child(1) { animation-delay: 0.10s; }
.quality .comparison-features .feature-row:nth-child(2) { animation-delay: 0.17s; }
.quality .comparison-features .feature-row:nth-child(3) { animation-delay: 0.24s; }
.quality .comparison-features .feature-row:nth-child(4) { animation-delay: 0.31s; }
.quality .comparison-features .feature-row:nth-child(5) { animation-delay: 0.38s; }
.quality .comparison-features .feature-row:nth-child(6) { animation-delay: 0.45s; }
.quality .comparison-features .feature-row:nth-child(7) { animation-delay: 0.52s; }

@keyframes qualityRowIn {
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* An included line should feel earned and an excluded one should recede, so
   the monthly column reads as the smaller offer at a glance. */
.quality .feature-row .feature-icon.available i { color: #2DD4BF !important; }

/* The component already dims and strikes through excluded rows; an opacity on
   the row itself would be both redundant and defeated by qualityRowIn, whose
   forwards fill lands on opacity 1. */

.quality .feature-row {
  border-radius: 10px;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.quality .comparison-column:hover .feature-row.available,
.quality .comparison-column.premium:hover .feature-row {
  background-color: rgba(45, 212, 191, 0.045);
}

/* The VS divider breathes rather than sitting dead between the columns. */
.quality .divider-badge {
  position: relative;
  border: 1px solid rgba(45, 212, 191, 0.34) !important;
  background: rgba(45, 212, 191, 0.10) !important;
  color: #5EEAD4 !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em;
}

.quality .divider-badge::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 1px solid rgba(45, 212, 191, 0.30);
  opacity: 0;
  animation: dividerPulse 3.2s ease-out infinite;
  pointer-events: none;
}

@keyframes dividerPulse {
  0%   { opacity: 0.55; transform: scale(0.92); }
  70%  { opacity: 0;    transform: scale(1.18); }
  100% { opacity: 0;    transform: scale(1.18); }
}

.quality .divider-line {
  background: linear-gradient(180deg, transparent, rgba(45, 212, 191, 0.38), transparent) !important;
}

.quality .comparison-footer .footer-text i { color: #2DD4BF !important; }

/* ── Motion polish, site-wide ─────────────────────────────────────────────
   Small, consistent responses to hover. The point is that every surface
   behaves the same way, so the page feels like one object. */

.payment-card,
.social-card,
.feature-card,
.product-card {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.4s ease,
              box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.payment-card:hover { transform: translateY(-5px); }

/* Brand marks lift slightly out of their tile on hover. */
.payment-card .payment-brand-mark,
.payment-card .payment-icon {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.payment-card:hover .payment-brand-mark,
.payment-card:hover .payment-icon { transform: translateY(-2px) scale(1.05); }

/* Security chips stagger in under the payment grid. */
.payment-security .security-item {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.35s ease;
}

.payment-security .security-item:hover {
  transform: translateY(-2px);
  border-color: rgba(45, 212, 191, 0.34) !important;
}

/* A pressed state on the primary actions. Without it a tap on mobile gives no
   feedback at all until the next page starts loading. */
.hero-btn-primary:active,
.btn-primary:active,
.fye-final-cta-btn:active,
.hero-social-discord:active { transform: translateY(0) scale(0.985); }

/* ── Reduced motion ───────────────────────────────────────────────────────
   Everything above is decoration. With the OS setting on, the page keeps all
   of its content and loses all of its movement — including the marquee, which
   is the one thing here that would otherwise never stop. */
@media (prefers-reduced-motion: reduce) {
  .pay-marquee-track { animation: none !important; transform: none !important; }
  .pay-marquee-viewport {
    overflow-x: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }

  .quality .comparison-features .feature-row {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .quality .divider-badge::after { animation: none !important; opacity: 0 !important; }

  .quality .comparison-column:hover,
  .payment-card:hover { transform: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PRESENCE PASS
   The page was a flat near-black with content sitting directly on it. Nothing
   below adds another effect to an existing element for its own sake; it gives
   the page a lit room to sit in, a real typographic top end, and one coherent
   way for surfaces to respond to a pointer.

   Transform and opacity only, as with the pass above.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The room ─────────────────────────────────────────────────────────────
   Markup is in snippets/ambience.njk, rendered once from the layout. */

.fye-ambience {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;          /* nothing in here can affect layout outside it */
}

/* Everything the page renders sits above the backdrop. Without its own
   stacking context the wrapper's children interleave with the blooms. */
.flex-wrapper {
  position: relative;
  z-index: 1;
}

.fye-aurora {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
  /* Soft by construction — see the note in ambience.njk about why these are
     gradients rather than blurred boxes. */
}

.fye-aurora-1 {
  top: -22vh;
  left: -14vw;
  width: 78vw;
  height: 78vw;
  background: radial-gradient(circle at 50% 50%, rgba(45, 212, 191, 0.14), rgba(45, 212, 191, 0.04) 42%, transparent 68%);
  animation: auroraDriftA 34s ease-in-out infinite alternate;
}

.fye-aurora-2 {
  top: 28vh;
  right: -24vw;
  width: 70vw;
  height: 70vw;
  background: radial-gradient(circle at 50% 50%, rgba(10, 132, 255, 0.11), rgba(10, 132, 255, 0.03) 44%, transparent 68%);
  animation: auroraDriftB 44s ease-in-out infinite alternate;
}

.fye-aurora-3 {
  bottom: -30vh;
  left: 18vw;
  width: 66vw;
  height: 66vw;
  background: radial-gradient(circle at 50% 50%, rgba(94, 234, 212, 0.09), transparent 62%);
  animation: auroraDriftC 52s ease-in-out infinite alternate;
}

@keyframes auroraDriftA {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(6vw, 5vh, 0) scale(1.12); }
}

@keyframes auroraDriftB {
  from { transform: translate3d(0, 0, 0) scale(1.06); }
  to   { transform: translate3d(-7vw, -6vh, 0) scale(1); }
}

@keyframes auroraDriftC {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(5vw, -4vh, 0) scale(1.1); }
}

/* A fine grid, faded out toward the edges so it never reads as a table. */
.fye-grid {
  position: absolute;
  inset: 0;
  display: block;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 10%, transparent 72%);
          mask-image: radial-gradient(120% 90% at 50% 0%, #000 10%, transparent 72%);
}

/* Grain. Flat dark panels band badly on cheap displays; a little noise breaks
   the gradient steps up and is most of why a page reads as "printed" rather
   than "rendered". Static SVG turbulence, no animation. */
.fye-grain {
  position: absolute;
  inset: -50%;
  display: block;
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ── Typographic top end ──────────────────────────────────────────────────
   The headline was competing with body copy at similar weight. Given the page
   sells a performance product, the top of the scale should feel engineered. */

.hero h1,
.hero .content h1 {
  font-size: clamp(2.7rem, 6vw, 5.25rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.04em !important;
  font-weight: 800 !important;
}

/* The gradient has to live on .title-line-1, not on the h1. That span already
   clips its own white-to-translucent-white gradient to its own text, and it is
   declared in the component's inline <style> — which the browser sees after
   this file — so a gradient on the parent h1 would simply be painted over.
   Same reason for the !important: identical specificity, later wins. */
.hero h1 .title-line-1 {
  /* Light falling across the type rather than flat white. Static gradient —
     the note further up this file records why the animated sheen was removed. */
  background: linear-gradient(168deg, #FFFFFF 4%, #DFFBF6 38%, #9FE9DE 70%, #6FD9CB 100%) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

.hero .content > p {
  font-size: clamp(1.02rem, 1.3vw, 1.24rem) !important;
  line-height: 1.62 !important;
  color: rgba(233, 245, 243, 0.68) !important;
  max-width: 58ch;
}

.hero.alignment-center .content > p { margin-left: auto; margin-right: auto; }

/* The text-image, text-video and blog sections each scope their own heading
   gradient at higher specificity, so they have to be named here or those three
   keep the old flat white while every other section changes. */
.section-title h2,
.text-image-block-modern .section-title h2,
.text-video-block-modern .section-title h2,
.blog-posts-section .section-title h2 {
  letter-spacing: -0.03em !important;
  font-weight: 800 !important;
  background: linear-gradient(168deg, #FFFFFF 10%, #D8F7F2 55%, #A8E9DF 100%) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* ── Surfaces ─────────────────────────────────────────────────────────────
   One shared response to the pointer. --mx/--my are set by ambience.njk while
   the pointer is over a card and removed when it leaves.

   This is done with a background layer rather than a pseudo-element on
   purpose. ::after on .feature-card is already the numbered counter (01, 02,
   03…) and ::after on the lifetime column is already its top hairline;
   ::before is taken on the payment, product and comparison cards. Layering the
   highlight into the background collides with none of them.

   At rest --my resolves to its fallback of -30%, which parks the highlight
   just above the card and reads as a soft top light. It only becomes a
   spotlight once a pointer is actually moving over the card. */

.payment-card,
.feature-card,
.product-card,
.social-card,
.comparison-column,
.faq-card {
  position: relative;
  background:
    radial-gradient(320px circle at var(--mx, 50%) var(--my, -30%),
                    rgba(45, 212, 191, 0.15), transparent 60%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.014)) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.06) inset,
    0 18px 44px rgba(0, 0, 0, 0.34);
}

/* The lifetime column keeps its accent bloom on top of the shared surface.
   The component defines .comparison-column::before at opacity 0 and only
   reveals it on hover, so this has to state its own opacity or the bloom that
   marks the recommended licence never shows at rest. */
.quality .comparison-column.premium::before { opacity: 1; }

/* ── Primary action ───────────────────────────────────────────────────────
   One button on the page should look like the button. */

.hero-btn-primary,
.fye-final-cta-btn {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #7BF3E2 0%, #2DD4BF 52%, #14B8A6 100%) !important;
  color: #03211D !important;
  border: none !important;
  font-weight: 700 !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 10px 28px rgba(45, 212, 191, 0.30),
    0 2px 6px rgba(0, 0, 0, 0.30);
}

.hero-btn-primary:hover,
.fye-final-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 16px 40px rgba(45, 212, 191, 0.42),
    0 3px 8px rgba(0, 0, 0, 0.32);
}

/* A single sweep on hover, not a loop. */
.hero-btn-primary::before,
.fye-final-cta-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  pointer-events: none;
  transform: skewX(-18deg);
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
}

.hero-btn-primary:hover::before,
.fye-final-cta-btn:hover::before {
  animation: btnSweep 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes btnSweep {
  to { left: 130%; }
}

.hero-btn-secondary {
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  -webkit-backdrop-filter: blur(10px) saturate(140%);
          backdrop-filter: blur(10px) saturate(140%);
  font-weight: 600 !important;
}

.hero-btn-secondary:hover {
  transform: translateY(-2px);
  border-color: rgba(45, 212, 191, 0.42) !important;
  background: rgba(45, 212, 191, 0.09) !important;
}

/* ── Reduced motion ───────────────────────────────────────────────────────
   The blooms are the only thing on the page that would otherwise move
   forever, so they are the first thing to stop. */
@media (prefers-reduced-motion: reduce) {
  .fye-aurora { animation: none !important; }
  .hero-btn-primary::before,
  .fye-final-cta-btn::before { display: none !important; }
  .hero-btn-primary:hover,
  .fye-final-cta-btn:hover,
  .hero-btn-secondary:hover { transform: none !important; }
}

/* ── Phone ────────────────────────────────────────────────────────────────
   The blooms are sized in vw, so on a narrow screen they would be enormous
   relative to the viewport and wash the page out. */
@media (max-width: 640px) {
  .fye-aurora-1 { width: 130vw; height: 130vw; top: -14vh; left: -30vw; }
  .fye-aurora-2 { width: 120vw; height: 120vw; right: -45vw; }
  .fye-aurora-3 { display: none; }
  .fye-grid { background-size: 44px 44px; }
  .fye-grain { opacity: 0.12; }
}

/* ── Cash App illustration (payments section) ───────────────────────────── */
.fye-pay-art { display: flex; justify-content: center; margin: 2rem auto 0.5rem; padding: 0 0.25rem; }
.fye-pay-art img { display: block; width: 100%; max-width: 880px; height: auto; }


/* ── Brand pack: wordmark per the logo README ─────────────────────────────────
   FYETWEAKS, Plus Jakarta Sans ExtraBold, uppercase, +2% tracking, one colour.
   Clear space around the lockup is half the mark's width. */
.fye-lockup { gap: 0.5em; }
.fye-lockup-word { font-family: 'Plus Jakarta Sans', 'Sora', system-ui, sans-serif; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; font-size: 1.15rem; }
.fye-lockup-word span { color: inherit; }
.navbar-brand.fye-lockup .fye-lockup-word { font-size: 1.05rem; letter-spacing: 0.02em; }
.footer-lockup .fye-lockup-word { font-size: 1.2rem; }
.fye-lockup .fye-mark, .navbar-brand.fye-lockup .fye-mark { height: 1em; width: 1em; }
.navbar-brand.fye-lockup:hover .fye-lockup-word span { color: inherit; }

/* ── Legal pages: Operator / Product / Contact block ──────────────────────── */
.legal-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.75rem 1.5rem; margin: 0 0 2rem; padding: 1rem 1.25rem; border-radius: 0.75rem; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); }
.legal-meta > div { min-width: 0; }
.legal-meta dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: #93A1A5; font-weight: 600; margin: 0 0 0.15rem; }
.legal-meta dd { margin: 0; color: #f5f5f5; font-weight: 500; overflow-wrap: anywhere; }
.editor-content h3 { margin-top: 1.5rem; }