/* ==========================================================================
   Viral Templates — the only stylesheet.
   Order: fonts, tokens, reset, background, type, layout, header, buttons,
   cards, reviews, product page, forms, footer, motion, reduced-motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts — self-hosted Outfit (variable) + Montserrat 900 (static), OFL.
   Outfit carries every weight the scale uses from one file. Montserrat is a
   single static face used for prices and nothing else.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/Outfit-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/Montserrat-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Metric-matched fallbacks. font-display: swap means the fallback paints first;
   these overrides keep its line box close to the real face so the swap does not
   reflow the page. Values are tuned approximations, not exact metrics. */
@font-face {
  font-family: "Outfit Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 96%;
  ascent-override: 100%;
  descent-override: 25%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Montserrat Fallback";
  src: local("Arial Black"), local("Arial"), local("Helvetica");
  font-weight: 900;
  size-adjust: 104%;
  ascent-override: 97%;
  descent-override: 25%;
  line-gap-override: 0%;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Brand. --brand-blue is 2.98:1 on --base: a FILL, never text. */
  --brand-blue: #1246f2;
  --brand-blue-deep: #0e38c4;
  --brand-blue-hover: #0e38c4;
  --brand-cyan: #1cd1fc;
  --brand-cyan-hover: #4edcfd;
  --brand-deep: #0a2fa8;

  /* Button ramp. Both stops are blue and both carry white at AA — the lighter
     end is #1246F2 at 6.60:1. #1CD1FC never sits under text: it appears in the
     inset highlight, the focus ring, the ghost rim and the hero gradient. */
  --grad-from: #1246f2;
  --grad-to: #0e38c4;

  --base: #070b18;
  --base-deep: #04060f;
  --surface: #0d1424;
  --surface-raised: #141c30;

  --text: #fafafa;
  --text-muted: rgba(250, 250, 250, 0.62);
  --text-dim: rgba(250, 250, 250, 0.4);
  --border: rgba(250, 250, 250, 0.09);
  --border-strong: rgba(250, 250, 250, 0.16);
  --line-soft: rgba(250, 250, 250, 0.045);
  --danger: #ff5c5c;

  /* A top-lit panel fill. It is always laid over an opaque --surface, never
     over the page background — this is lighting, not glassmorphism. */
  --panel: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.035),
    rgba(255, 255, 255, 0.012)
  );

  --inset: 0 1px 0 rgba(250, 250, 250, 0.06) inset;
  --highlight: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  --btn-shadow: 0 10px 30px -10px rgba(18, 70, 242, 0.55);
  --btn-shadow-hover: 0 16px 40px -12px rgba(18, 70, 242, 0.55);
  --card-shadow-hover: 0 22px 50px -18px rgba(0, 0, 0, 0.7);

  /* Type — six steps. */
  --fs-label: 13px;
  --fs-meta: 14px;
  --fs-body: 16px;
  --fs-sect: 20px;
  --fs-h2: clamp(28px, 4vw, 48px);
  --fs-display: clamp(44px, 7vw, 86px);

  --font-sans: "Outfit", "Outfit Fallback", ui-sans-serif, system-ui,
    -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-price: "Montserrat", "Montserrat Fallback", "Arial Black", Impact,
    sans-serif;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-40: 160px;

  --well: 1180px;
  --prose: 68ch;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;

  --ez: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.45, 0, 0.55, 1);
  --t-hover: 140ms;
  --t-ui: 240ms;
  --t-reveal: 320ms;
  --t-header: 420ms;
  --t-fade: 420ms;
}

/* --------------------------------------------------------------------------
   3. Reset
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--base);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
ul,
ol,
dl {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

img,
svg,
video,
iframe {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: var(--brand-cyan);
  text-decoration-color: rgba(28, 209, 252, 0.4);
  text-underline-offset: 3px;
  transition: color var(--t-hover) var(--ez),
    text-decoration-color var(--t-hover) var(--ez);
}

a:hover {
  color: var(--brand-cyan-hover);
  text-decoration-color: currentColor;
}

/* Every interactive element gets this. Nothing below removes it. */
:focus-visible {
  outline: 2px solid var(--brand-cyan);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

:focus:not(:focus-visible) {
  outline: none;
}

::selection {
  background: var(--brand-cyan);
  color: var(--base);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Absolutely positioned, and it must stay that way — a z-index rule broke this
   once. Nothing else in this file may set position on .skip-link. */
.skip-link {
  position: absolute;
  left: var(--s-4);
  top: var(--s-4);
  z-index: 100;
  transform: translateY(-200%);
  background: linear-gradient(135deg, var(--grad-from), var(--grad-to));
  color: #fff;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-sm);
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--t-ui) var(--ez);
}

.skip-link:focus-visible {
  transform: translateY(0);
  color: #fff;
}

/* --------------------------------------------------------------------------
   4. Site background — vignette, grid, one aurora
   Anchored to the viewport in % / vw / vh. background-size in px is fine;
   background-position in px is not, and the build audit enforces that.
   -------------------------------------------------------------------------- */

.site-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

main,
.site-footer {
  position: relative;
  z-index: 2;
}

.site-bg__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 120% 90% at 50% 35%,
    transparent 0%,
    transparent 45%,
    rgba(4, 6, 15, 0.55) 78%,
    var(--base-deep) 100%
  );
}

/* Two grid scales stacked: a 100px major and a 20px minor. */
.site-bg__grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
      to right,
      rgba(18, 70, 242, 0.07) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, rgba(18, 70, 242, 0.07) 1px, transparent 1px),
    linear-gradient(to right, rgba(18, 70, 242, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(18, 70, 242, 0.035) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
}

.site-bg__aurora {
  position: absolute;
  top: -14vh;
  left: -8%;
  width: 62vw;
  height: 56vh;
  border-radius: 50%;
  filter: blur(110px);
  background: rgba(18, 70, 242, 0.18);
  will-change: transform;
  animation: aurora 48s var(--ease-soft) infinite alternate;
}

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

/* --------------------------------------------------------------------------
   5. Typography primitives
   -------------------------------------------------------------------------- */

/* Labels, eyebrows and meta lines are Outfit in sentence case. */
.label,
.mono,
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
}

.meta,
.muted {
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--text-muted);
}

/* Inline figures — the rating value, review counts, the licence count — stay
   in Outfit and just take tabular numerals so columns of them line up. */
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* The three stat-card corner labels are the one sanctioned exception to the
   sentence-case rule in section 1 of the brief. */
.stat__label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.2;
}

.eyebrow {
  color: var(--brand-cyan);
  display: block;
  margin-bottom: var(--s-5);
}

.display {
  font-size: var(--fs-display);
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1.08;
  text-wrap: balance;
}

/* The gradient half of the hero headline. The extra padding-bottom stops the
   descenders being clipped by the background-clip box. */
.display__grad {
  display: block;
  padding-bottom: 0.08em;
  background: linear-gradient(135deg, #1246f2, #1cd1fc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.1;
  text-wrap: balance;
}

.h3,
.sect {
  font-size: var(--fs-sect);
  font-weight: 650;
  letter-spacing: -0.3px;
  line-height: 1.35;
}

.sub {
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-muted);
  text-wrap: pretty;
}

.lead {
  color: var(--text-muted);
  text-wrap: pretty;
}

/* --text-dim measures 3.68:1 on --base. That clears WCAG AA only for LARGE
   text, which is 24px at any weight or 18.66px at 700+ — not the 18px this
   file previously assumed. Rather than leave a global .dim utility that can be
   dropped onto 12px text, the token is scoped to the one place it is large
   enough to be legal: the 36px/900 stat figure. A stray class="dim" anywhere
   else now simply does nothing and the text stays at --text-muted or --text. */

/* The general-purpose muted utility, safe at any size (7.43:1 on --base). */
.muted {
  color: var(--text-muted);
}

.prose {
  max-width: var(--prose);
  text-wrap: pretty;
}

.prose p + p {
  margin-top: var(--s-4);
}

/* --------------------------------------------------------------------------
   6. Layout
   -------------------------------------------------------------------------- */

.well {
  width: 100%;
  max-width: var(--well);
  margin-inline: auto;
  padding-inline: var(--s-6);
}

.section {
  padding-block: var(--s-24);
}

.section--tall {
  padding-block: var(--s-40);
}

.section--flush-top {
  padding-top: 0;
}

/* Every section heading and its sub: centred, 720px, margin auto. */
.section-head {
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--s-16);
  text-align: center;
}

/* Page heads (h1 + lead) on templates / contact / terms / 404 / product. */
.page-head {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.page-head .display,
.page-head .pd__title {
  max-width: none;
}

/* Any width-capped sub-line inside a page head is centred as a block, not
   just its text: text-align on the parent centres the lines within the box,
   but a max-width box with no auto margins still sits flush left. */
.page-head .hero__sub,
.page-head .pd__lead,
.page-head .sub {
  margin-inline: auto;
}

.section-head .sub {
  margin-top: var(--s-4);
}

/* The star row + count under a centred section heading is a flex row, so
   text-align does nothing to it; centre the flex items themselves. */
.section-head .rating {
  justify-content: center;
}

/* h2 left, "View all ->" right. */
.section-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
  margin-bottom: var(--s-10);
}

.section-bar .h2 {
  margin: 0;
}

.rule {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0;
}

/* The hairline divider under the hero. */
.hairline {
  height: 1px;
  border: 0;
  margin: 0;
  opacity: 0.6;
  background: linear-gradient(
    90deg,
    transparent,
    #1246f2 30%,
    #1cd1fc 50%,
    #1246f2 70%,
    transparent
  );
}

.stack-4 > * + * {
  margin-top: var(--s-4);
}
.stack-6 > * + * {
  margin-top: var(--s-6);
}

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-top: var(--s-3);
  padding-inline: var(--s-4);
}

/* The pill's radius (--nav-radius) and the CTA's radius (--nav-cta-radius)
   are both set per state on .nav, side by side, and are registered so the
   pill's single transition below interpolates them. The CTA reads the
   inherited live value and has no transition of its own, so it cannot desync.

   The CTA's rest radius is NOT derived from the pill: neither the equal value
   nor pill-minus-padding read right inside the inset. It is a literal tuned
   by eye: --nav-cta-radius-rest in the .nav rule, the one number to change.
   Condensed is 999px, a pill in a pill. */
@property --nav-radius {
  syntax: "<length>";
  inherits: true;
  initial-value: 18px;
}

@property --nav-cta-radius {
  syntax: "<length>";
  inherits: true;
  initial-value: 12px;
}

/* ONE transition covering the whole morph, at one duration. */
.nav {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-4);
  width: 100%;
  max-width: var(--well);
  margin-inline: auto;
  padding: 12px 20px;
  --nav-radius: var(--r-lg);
  border-radius: var(--nav-radius);
  /* Nav CTA rest radius. Tuned by eye, not derived. Change ONLY this number. */
  --nav-cta-radius-rest: 12px;
  --nav-cta-radius: var(--nav-cta-radius-rest);
  border: 1px solid var(--border);
  background: rgba(7, 11, 24, 0.55);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: var(--highlight);
  transition: all var(--t-header) var(--ez);
}

.site-header.is-condensed .nav {
  max-width: 920px;
  --nav-radius: 50px;
  --nav-cta-radius: 999px;
  padding: 8px 12px 8px 18px;
  border-color: var(--border-strong);
  background: rgba(7, 11, 24, 0.78);
  box-shadow: var(--highlight), 0 10px 30px rgba(0, 0, 0, 0.45);
}

.nav__brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--text);
  min-height: 44px;
}

/* Bare logo mark: no tile, no border, no shadow, no wordmark. */
.nav__mark {
  display: block;
  flex: none;
}

.nav__mark img {
  width: 34px;
  height: 19px;
  object-fit: contain;
}

/* Column 2: optically centred in the pill regardless of logo / CTA widths. */
.nav__links {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

/* Column 3: CTA and the burger icon. */
.nav__end {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

/* The CTA copy that lives inside the mobile dropdown; desktop hides it. */
.nav__menu-cta {
  display: none;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s-4);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  font-size: 13px;
  transition: color var(--t-hover) var(--ez),
    background-color var(--t-hover) var(--ez);
}

.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--text);
  background: rgba(18, 70, 242, 0.12);
}

/* The small gradient pill. Scoped under .nav so it out-ranks .btn (which is
   later in the file at equal specificity and would otherwise win every
   declaration here, border-radius included). */
.nav .nav__cta {
  min-height: 36px;
  padding: 0 var(--s-4);
  font-size: 13px;
  font-weight: 650;
  border-radius: var(--nav-cta-radius);
}

.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--t-hover) var(--ez),
    background-color var(--t-hover) var(--ez);
}

.nav__toggle:hover {
  border-color: var(--border-strong);
  background: rgba(18, 70, 242, 0.12);
}

.nav__toggle svg {
  width: 20px;
  height: 20px;
  stroke: var(--brand-cyan);
}

@media (max-width: 720px) {
  .nav__toggle {
    display: inline-flex;
  }

  .site-header.is-condensed .nav {
    max-width: var(--well);
    --nav-radius: var(--r-lg);
    --nav-cta-radius: var(--nav-cta-radius-rest);
    padding: 12px 20px;
  }

  .nav__links {
    position: absolute;
    top: calc(100% + var(--s-2));
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s-3) var(--s-4) var(--s-4);
    background: rgba(13, 20, 36, 0.97);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--highlight), 0 16px 40px rgba(0, 0, 0, 0.5);
  }

  .nav__links[hidden] {
    display: none;
  }

  .nav__link {
    padding: var(--s-3) var(--s-4);
    font-size: 15px;
  }

  .nav__links .btn {
    margin-top: var(--s-3);
    justify-content: center;
    min-height: 44px;
  }
}

/* --------------------------------------------------------------------------
   8. Buttons
   -------------------------------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: var(--s-3) var(--s-6);
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  /* The border is a transparent 1px ring. By default a background image is
     sized to the padding box (background-origin) but painted to the border
     box (background-clip) and tiled, so the ring shows the gradient wrapped:
     the left edge picks up the ramp's END colour and the right edge its
     START colour, a 1px seam that is most visible where the corners curve.
     The primary's two blues are near-identical so it hides it; the Robux and
     Crypto ramps do not. Sizing the image to the border box removes the wrap. */
  background-origin: border-box;
  transition: background-color var(--t-hover) var(--ez),
    border-color var(--t-hover) var(--ez), color var(--t-hover) var(--ez),
    transform var(--t-hover) var(--ez), box-shadow var(--t-hover) var(--ez);
}

.btn--primary {
  background: linear-gradient(135deg, var(--grad-from), var(--grad-to));
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24) inset, var(--btn-shadow);
}

.btn--primary:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24) inset, var(--btn-shadow-hover);
}

.btn--primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24) inset, var(--btn-shadow);
}

/* Shine sweep. Fires once per hover — it is a transition on a pseudo-element,
   not a looping animation, so it cannot repeat while the pointer rests. */
.btn--primary::after,
.btn--cyan::after,
.btn--robux::after,
.btn--crypto::after {
  content: "";
  position: absolute;
  top: -50%;
  bottom: -50%;
  left: 0;
  width: 55%;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.28),
    transparent
  );
  transform: translateX(-180%) skewX(-18deg);
  transition: transform 720ms var(--ez);
}

.btn--primary:hover::after,
.btn--cyan:hover::after,
.btn--robux:hover::after,
.btn--crypto:hover::after {
  transform: translateX(320%) skewX(-18deg);
}

/* Cyan fills take --base text. White on #1CD1FC is 1.81:1 and is never used. */
.btn--cyan {
  background: var(--brand-cyan);
  color: var(--base);
}

.btn--cyan:hover {
  background: var(--brand-cyan-hover);
  color: var(--base);
  transform: translateY(-2px);
}

/* Robux and Crypto fills. Same geometry as the primary (the .btn base sets
   padding, radius and size; btn--block sets width); --base text on both. The
   ramps travel through several saturated stops so they read as gradients, not
   tints. AA is measured at each ramp's DARKEST stop (#00B84D, #E8590C) by the
   contrast gate, which fails the build if either stop is ever made darker. */
.btn--robux {
  background: linear-gradient(135deg, #00b84d 0%, #00e676 55%, #3bf08f 100%);
  color: var(--base);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.32) inset, 0 4px 16px rgba(0, 200, 83, 0.38);
}

.btn--robux:hover {
  background: linear-gradient(120deg, #00b84d 0%, #00e676 55%, #3bf08f 100%);
  color: var(--base);
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.32) inset, 0 10px 28px rgba(0, 200, 83, 0.52);
}

/* Red-orange into gold, not flat yellow. */
.btn--crypto {
  background: linear-gradient(135deg, #e8590c 0%, #f97316 40%, #ffb020 75%, #ffd24a 100%);
  color: var(--base);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.32) inset, 0 4px 16px rgba(249, 115, 22, 0.38);
}

.btn--crypto:hover {
  background: linear-gradient(120deg, #e8590c 0%, #f97316 40%, #ffb020 75%, #ffd24a 100%);
  color: var(--base);
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.32) inset, 0 10px 28px rgba(249, 115, 22, 0.52);
}

.btn--robux:active,
.btn--crypto:active {
  transform: translateY(0);
}

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}

.btn--ghost:hover {
  color: var(--text);
  border-color: rgba(28, 209, 252, 0.38);
  background: rgba(18, 70, 242, 0.08);
  transform: translateY(-2px);
}

.btn--ghost:active {
  transform: translateY(0);
}

.btn--lg {
  min-height: 52px;
  padding: var(--s-4) var(--s-8);
  font-size: 16px;
}

.btn--block {
  width: 100%;
}

/* The secondary "faster answer" action under the contact form. */
.btn--sm {
  min-height: 40px;
  padding: 11px 18px;
  font-size: 14px;
}

.form__after {
  margin-top: var(--s-4);
  text-align: center;
}

.form__after-label {
  display: block;
  margin-bottom: var(--s-2);
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--text-muted);
}

/* The Discord link under the form shares its corner radius with the form
   fields above it (.field input / .field textarea use --r-sm). Pinned here,
   scoped to this one button, so it cannot drift if .btn's radius changes. */
.form__after .btn {
  border-radius: var(--r-sm);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  background: var(--surface-raised);
  background-image: none;
  border-color: var(--border);
  color: rgba(250, 250, 250, 0.5);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn[disabled]:hover,
.btn[aria-disabled="true"]:hover {
  background: var(--surface-raised);
  background-image: none;
  border-color: var(--border);
  color: rgba(250, 250, 250, 0.5);
  transform: none;
  box-shadow: none;
}

.btn[disabled]::after,
.btn[aria-disabled="true"]::after {
  display: none;
}

.btn__arrow {
  width: 15px;
  height: 15px;
  flex: none;
  transition: transform var(--t-hover) var(--ez);
}

.btn:hover .btn__arrow {
  transform: translateX(3px);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* "View all ->" — the arrow gains 4px of gap on hover. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  font-weight: 650;
  font-size: var(--fs-meta);
  color: var(--brand-cyan);
  text-decoration: none;
  transition: gap var(--t-hover) var(--ez), color var(--t-hover) var(--ez);
}

.link-arrow:hover {
  gap: calc(var(--s-2) + 4px);
  color: var(--brand-cyan-hover);
}

.link-arrow svg {
  width: 15px;
  height: 15px;
  flex: none;
}

/* --------------------------------------------------------------------------
   9. Pills, badges, prices
   -------------------------------------------------------------------------- */

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--text-muted);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  transition: border-color var(--t-hover) var(--ez),
    color var(--t-hover) var(--ez);
}

.pill:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

.badge-sale {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 700;
  background: var(--brand-cyan);
  color: var(--base);
  padding: var(--s-2) var(--s-3);
  border-radius: 999px;
}

.price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.price__now {
  font-family: var(--font-price);
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -1px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.price__was {
  font-family: var(--font-price);
  font-weight: 900;
  letter-spacing: -1px;
  font-size: 18px;
  color: var(--danger);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

.price__off {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--text-muted);
}

.licence-note {
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--text-muted);
}

.licence-note .num {
  color: var(--text);
}

/* --------------------------------------------------------------------------
   10. Hero — centred
   -------------------------------------------------------------------------- */

.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: var(--s-24) var(--s-20);
}

.hero__inner {
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}

.hero .display {
  max-width: none;
}

.hero__sub {
  margin-top: var(--s-6);
  margin-inline: auto;
  max-width: 620px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
}

.hero__actions {
  margin-top: var(--s-10);
  justify-content: center;
}

.hero__meta {
  margin-top: var(--s-10);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  color: var(--text-muted);
  font-size: var(--fs-meta);
}

@media (max-width: 700px) {
  .hero {
    min-height: 0;
    padding-block: var(--s-20) var(--s-16);
  }
}

/* --------------------------------------------------------------------------
   11. Stat cards — asymmetric 3-card grid
   Left card spans both rows; two stacked on the right.
   -------------------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--s-5);
  justify-content: center;
}

.stat--tall {
  grid-row: span 2;
}

.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-6);
  background-color: var(--surface);
  background-image: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--highlight);
  overflow: hidden;
  transition: transform var(--t-hover) var(--ez),
    border-color var(--t-hover) var(--ez);
}

.stat:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
}

.stat__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}

.stat__pill {
  flex: none;
  padding: 4px var(--s-3);
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-cyan);
  background: rgba(28, 209, 252, 0.1);
  border: 1px solid rgba(28, 209, 252, 0.22);
}

/* Solid --text. Never gradient-clipped, never counted up. */
.stat__figure {
  font-family: var(--font-sans);
  font-size: 52px;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.stat__caption {
  margin-top: var(--s-3);
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--text-muted);
  text-wrap: pretty;
}

.stat__stars {
  margin-bottom: var(--s-4);
}

/* The chart owns the lower 55% of the tall card. */
/* The chart owns the lower 55% of the tall card, edge to edge inside the
   card's 24px padding. */
/* The chart owns the lower 55% of the tall card, edge to edge inside the
   card's 24px padding. position: relative anchors the end dot, which lives
   outside the SVG so the non-uniform scaling never squashes it. */

/* Eight bars; the filled count comes from products.json, not a literal. */
.stat__bars {
  margin-top: auto;
  padding-top: var(--s-6);
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 56px;
}

.stat__bar {
  flex: 1;
  border-radius: 3px;
  background: var(--surface-raised);
  height: 20%;
}

.stat__bar--on {
  height: 100%;
  background: linear-gradient(180deg, var(--brand-cyan), var(--brand-blue));
}

@media (max-width: 880px) {
  .stats {
    grid-template-columns: 1fr;
  }

  .stat--tall {
    grid-row: auto;
  }
}

/* --------------------------------------------------------------------------
   11b. Value cards — the 3-up grid under the hero
   -------------------------------------------------------------------------- */

.wgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-5);
  justify-content: center;
}

.wcard {
  padding: var(--s-8) var(--s-6);
  background-color: var(--surface);
  background-image: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--highlight);
  transition: transform var(--t-hover) var(--ez),
    border-color var(--t-hover) var(--ez);
}

.wcard:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
}

.wcard__title {
  font-size: var(--fs-sect);
  font-weight: 650;
  letter-spacing: -0.3px;
  margin-bottom: var(--s-3);
}

.wcard__body {
  font-size: var(--fs-meta);
  font-weight: 500;
  line-height: 1.65;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* Centred section head, used on the home value section and the product CTA. */
.section-head--center {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

/* --------------------------------------------------------------------------
   11c. Tick list + closing CTA band (product pages)
   -------------------------------------------------------------------------- */

.ticks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
  margin-top: var(--s-8);
}

.ticks li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--text-muted);
}

.ticks svg {
  width: 16px;
  height: 16px;
  flex: none;
  stroke: var(--brand-cyan);
}

.shipcta {
  margin-top: var(--s-16);
  padding: var(--s-12) var(--s-8);
  text-align: center;
  background-color: var(--surface-raised);
  background-image: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--highlight);
}

.shipcta p {
  margin-top: var(--s-4);
  margin-inline: auto;
  max-width: 52ch;
  color: var(--text-muted);
  text-wrap: pretty;
}

.shipcta .btn {
  margin-top: var(--s-8);
}

/* --------------------------------------------------------------------------
   12. Product cards
   -------------------------------------------------------------------------- */

.pgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s-5);
  justify-content: center;
}

.pcard {
  display: flex;
  flex-direction: column;
  background-color: var(--surface);
  background-image: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--highlight);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--t-hover) var(--ez),
    border-color var(--t-hover) var(--ez), box-shadow var(--t-hover) var(--ez);
}

.pcard:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--highlight), var(--card-shadow-hover);
  color: inherit;
}

.pcard__media {
  position: relative;
  aspect-ratio: 16 / 9;
  /* Reserves the box at the right ratio so nothing reflows on load. */
  background: var(--surface-raised);
  overflow: hidden;
}

.pcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms var(--ez);
}

.pcard:hover .pcard__media img {
  transform: scale(1.04);
}

.pcard__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 70%, var(--surface));
}

.pcard__badge {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 1;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  padding: 5px var(--s-3);
  border-radius: var(--r-sm);
  background: var(--brand-cyan);
  color: var(--base);
}

.pcard__badge--soon {
  background: var(--surface-raised);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* Badge tones, from products.json badge.tone. Text-on-fill is measured:
   red   #D34247 with #FFFFFF text — 4.53:1. The brief's #E5484D is
         only 3.91:1 under white, so it is darkened along its own hue
         until it clears AA.
   orange #F59E0B with --base text — 9.14:1 (white on it is 2.15:1). */
.pcard__badge--red {
  background: #d34247;
  color: #ffffff;
}

.pcard__badge--orange {
  background: #f59e0b;
  color: var(--base);
}

/* green #4ADE80 with --base text: 11.26:1. */
.pcard__badge--green {
  background: #4ade80;
  color: var(--base);
}

.pcard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--s-5) var(--s-5) var(--s-5);
  gap: var(--s-3);
}

.pcard__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pcard__tag {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  padding: 4px var(--s-2);
  border: 1px solid var(--border);
  border-radius: 999px;
}

/* Two lines, then ellipsis. The full string is on the title attribute. */
.pcard__name {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pcard__desc {
  font-size: var(--fs-meta);
  line-height: 1.65;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pcard__price {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-variant-numeric: tabular-nums;
}

.pcard__price b {
  font-family: var(--font-price);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -1px;
  color: var(--text);
}

.pcard__price s {
  font-size: var(--fs-meta);
  color: var(--danger);
}

/* Pinned to the bottom so buttons line up across rows of unequal text. It is
   a span styled as the primary button: the whole card is already the link. */
.pcard__action {
  margin-top: auto;
  width: 100%;
}

.pcard:hover .pcard__action::after {
  transform: translateX(320%) skewX(-18deg);
}

/* Hovering anywhere on the card gives the button the same lift, shadow and
   shine every other primary has. */
.pcard:hover .pcard__action {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24) inset, var(--btn-shadow-hover);
}

.pcard__action svg {
  width: 15px;
  height: 15px;
  flex: none;
}

/* Empty state — no live products. */
.pgrid-empty {
  padding: var(--s-16) var(--s-8);
  text-align: center;
  background-color: var(--surface);
  background-image: var(--panel);
  border: 1px dashed var(--border);
  border-radius: var(--r-lg);
}

.pgrid-empty p {
  color: var(--text-muted);
  margin-bottom: var(--s-5);
}

/* The fallback an image collapses to if the file 404s. */
.img-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--s-6);
  background-color: var(--surface-raised);
  background-image: var(--panel);
  color: var(--text-muted);
  font-size: var(--fs-meta);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   13. Stars
   -------------------------------------------------------------------------- */

.stars {
  position: relative;
  display: inline-block;
  line-height: 0;
  flex: none;
}

.stars__row {
  display: flex;
  gap: 2px;
}

.stars__row svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.stars__base svg {
  fill: rgba(250, 250, 250, 0.16);
}

.stars__fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  width: var(--fill, 100%);
}

.stars__fill svg {
  fill: var(--brand-cyan);
}

.rating {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.rating__num {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   14. Review cards
   -------------------------------------------------------------------------- */

.reviews-grid {
  display: grid;
  gap: var(--s-4);
  justify-content: center;
}

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

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

@media (max-width: 980px) {
  .reviews-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .reviews-grid--2,
  .reviews-grid--3 {
    grid-template-columns: 1fr;
  }
}

.review {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--s-4);
  padding: var(--s-6);
  background-color: var(--surface);
  background-image: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--highlight);
  transition: border-color var(--t-hover) var(--ez),
    transform var(--t-hover) var(--ez);
}

.review:hover {
  border-color: var(--border-strong);
}

.review--lg {
  padding: var(--s-8);
}

.review__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}

.review__score {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--brand-cyan);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.review__text {
  overflow-wrap: anywhere;
  text-wrap: pretty;
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
}

.review__foot {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
}

.review__name {
  font-weight: 700;
  font-size: var(--fs-meta);
  /* Long unicode display names must not blow out the column. */
  overflow-wrap: anywhere;
}

.review__name a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgba(250, 250, 250, 0.25);
}

.review__name a:hover {
  color: var(--brand-cyan);
}

.review__source {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   15. Review marquee
   -------------------------------------------------------------------------- */

.rmarquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 6%,
    #000 94%,
    transparent
  );
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.rmarquee__track {
  display: flex;
  width: max-content;
  animation: rmarquee 450s linear infinite;
}

.rmarquee:hover .rmarquee__track,
.rmarquee:focus-within .rmarquee__track {
  animation-play-state: paused;
}

.rmarquee__group {
  display: flex;
}

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

/* Fixed width so the loop distance is stable and the text clip is predictable. */
.rmarquee .review {
  width: 320px;
  flex: none;
  margin-right: var(--s-4);
  padding: var(--s-5);
}

.rmarquee .review__text {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.reviews-all {
  margin-top: var(--s-10);
  border-top: 1px solid var(--border);
}

.reviews-all__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 44px;
  padding: var(--s-5) 0;
  cursor: pointer;
  font-weight: 650;
  list-style: none;
  transition: color var(--t-hover) var(--ez);
}

.reviews-all__summary::-webkit-details-marker {
  display: none;
}

.reviews-all__summary:hover {
  color: var(--brand-cyan);
}

.reviews-all__summary svg {
  flex: none;
  width: 16px;
  height: 16px;
  stroke: var(--brand-cyan);
  transition: transform var(--t-ui) var(--ez);
}

.reviews-all[open] .reviews-all__summary svg {
  transform: rotate(45deg);
}

.reviews-all__body {
  padding-bottom: var(--s-10);
}

.reviews-all__body > * + * {
  margin-top: var(--s-4);
}

/* --------------------------------------------------------------------------
   16. Stat card chart (reveal window)
   -------------------------------------------------------------------------- */

/* Draw over 2400ms, hold 3200ms, reset, repeat. 5600ms total: the draw is the
   first 42.86% of the cycle, the hold the remainder. */

/* End dot + pulse ring: an HTML sibling of the SVG, absolutely positioned at
   the path's endpoint (x = 290/300, y = 8/100), so it is a true circle at any
   card size while the SVG itself is stretched non-uniformly. */

/* Open over 2400ms (42.86% of the cycle), hold to 5600ms, repeat. */

/* Single-parameter chart. spark.js samples the curve up to tipX every frame and
   writes the line's d, the area's d and the dot's position from that one
   number, so they cannot diverge. Nothing here animates the paths; the only
   CSS animation on the chart is the dot's pulse ring. */
.spark {
  position: relative;
  margin-top: auto;
  flex: 0 0 55%;
  min-height: 150px;
}

.spark__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Positioned by spark.js as left: tipX% / bottom: y(tipX)%. Server-rendered
   at the p = 1 position so the chart is complete with scripts off. */
.spark__dot {
  position: absolute;
  width: 8px;
  height: 8px;
  transform: translate(-50%, 50%);
  border-radius: 50%;
  background: var(--brand-cyan);
  filter: drop-shadow(0 0 8px rgba(28, 209, 252, 0.9));
  pointer-events: none;
}

/* With JS the dot starts hidden and is shown once p > 0.02. */
html.js .spark__dot {
  opacity: 0;
}

.spark__area {
  fill: url(#sparkFill);
}

.spark__line {
  fill: none;
  stroke: url(#sparkStroke);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 12px rgba(28, 209, 252, 0.55));
}

/* Placed against .spark's width, at the percentages the path's last point
   (290/300, 8/100) resolves to. Hidden by the window until it reaches it. */

.spark__dot::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1.5px solid var(--brand-cyan);
  opacity: 0;
}

/* The pulse runs on its own clock, independent of the reveal. */
html.js .spark__dot::after {
  animation: spark-pulse 2400ms var(--ease-soft) infinite;
}

@keyframes spark-pulse {
  0% {
    transform: scale(0.6);
    opacity: 0.9;
  }
  70%,
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   17. Product page — two columns
   -------------------------------------------------------------------------- */

.pd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 356px;
  gap: 44px;
  align-items: start;
  margin-top: var(--s-16);
}

.pd__hero {
  margin-bottom: var(--s-10);
}

.pd__hero .ffcar {
  margin-top: var(--s-10);
}

.pd__title {
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 900;
  letter-spacing: -0.8px;
  line-height: 1.12;
  text-wrap: balance;
}

.pd__lead {
  margin-top: var(--s-5);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 62ch;
}

.pd__crumbs {
  margin-bottom: var(--s-8);
  color: var(--text-muted);
}

.pd__crumbs a {
  color: var(--text-muted);
  text-decoration: none;
}

.pd__crumbs a:hover {
  color: var(--brand-cyan);
}

/* --- Carousel --- */

.ffcar {
  position: relative;
  margin-top: var(--s-8);
}

.ffcar__stage {
  position: relative;
  /* Reserved before the images load. */
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-raised);
}

.ffcar__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--t-fade) var(--ez);
}

.ffcar__slide[data-active="true"] {
  opacity: 1;
}

.ffcar__slide picture,
.ffcar__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Lite video slide: the product's own poster and a real play button. The
   iframe is only injected on click, so nothing from YouTube loads on render. */

.ffcar__slide iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.ffcar__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: rgba(7, 11, 24, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text);
  cursor: pointer;
  transition: background-color var(--t-hover) var(--ez),
    border-color var(--t-hover) var(--ez);
}

/* 40px circle inside a 44px hit area. */
.ffcar__arrow::before {
  content: "";
  position: absolute;
  inset: -2px;
}

.ffcar__arrow:hover {
  background: rgba(18, 70, 242, 0.55);
  border-color: rgba(28, 209, 252, 0.38);
}

.ffcar__arrow svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

.ffcar__arrow--prev {
  left: var(--s-3);
}

.ffcar__arrow--next {
  right: var(--s-3);
}

.ffcar__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

.ffcar__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--border-strong);
  cursor: pointer;
  transition: width var(--t-ui) var(--ez),
    background-color var(--t-ui) var(--ez);
}

/* The 44px touch target sits around the 8px dot rather than inflating it. */
.ffcar__dot::before {
  content: "";
  position: absolute;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}

.ffcar__dot {
  position: relative;
}

.ffcar__dot[aria-selected="true"] {
  width: 22px;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-cyan));
}

.ffcar__caption {
  margin-top: var(--s-4);
  color: var(--text-muted);
  font-size: var(--fs-meta);
  text-wrap: pretty;
}

/* One image: no arrows, no dots, no dead controls. */
.ffcar-single .ffcar__arrow,
.ffcar-single .ffcar__dots {
  display: none;
}

.ffcar-single .ffcar__slide {
  opacity: 1;
}

/* --- Feature groups --- */

.fgroups {
  margin-top: var(--s-12);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
  justify-content: center;
}

/* An odd last group spans both columns rather than leaving a hole. */
.fgroup:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.fgroup {
  padding: var(--s-6);
  background-color: var(--surface);
  background-image: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--highlight);
}

.fgroup__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

.fgroup__emoji {
  font-size: 18px;
  line-height: 1;
  flex: none;
}

.fgroup__title {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-cyan);
}

.fgroup__items li {
  position: relative;
  padding-left: var(--s-5);
  color: var(--text-muted);
  font-size: var(--fs-meta);
  line-height: 1.6;
  text-wrap: pretty;
}

.fgroup__items li + li {
  margin-top: var(--s-2);
}

/* 5px gradient dot markers. */
.fgroup__items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-cyan));
}

.fgroup__body {
  color: var(--text-muted);
  font-size: var(--fs-meta);
  line-height: 1.65;
  text-wrap: pretty;
}

@media (max-width: 620px) {
  .fgroups {
    grid-template-columns: 1fr;
  }
}

/* --- Sticky buy panel --- */

.buypanel {
  position: sticky;
  top: 100px;
  padding: var(--s-6);
  background-color: var(--surface);
  background-image: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--highlight);
}

.buypanel__price {
  font-family: var(--font-price);
  font-size: 38px;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.buypanel__was {
  font-size: 18px;
  color: var(--danger);
  text-decoration: line-through;
  margin-left: var(--s-3);
}

.buypanel__meta {
  margin-top: var(--s-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
}

.buypanel__cta {
  margin-top: var(--s-6);
}

.buypanel__alt {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.buypanel__list {
  margin-top: var(--s-6);
  border-top: 1px solid var(--line-soft);
}

.buypanel__list li {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text-muted);
  font-size: var(--fs-meta);
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  text-wrap: pretty;
}

.buypanel__list svg {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 3px;
  stroke: var(--brand-cyan);
}

.buypanel__note {
  margin-top: var(--s-5);
  color: var(--text-muted);
  font-size: 13px;
}

/* --- Bundle strip (site.json "bundle") --- */

/* First row of the .pd grid, spanning both columns. Attention comes from the
   border and shadow breathing between two cyan alphas: nothing translates,
   nothing changes opacity, no text animates, so WCAG 2.3.1 is not in play. */
@keyframes bundle-breathe {
  from {
    border-color: rgba(28, 209, 252, 0.18);
    box-shadow: var(--highlight), 0 0 28px -6px rgba(28, 209, 252, 0.18);
  }
  to {
    border-color: rgba(28, 209, 252, 0.55);
    box-shadow: var(--highlight), 0 0 28px -6px rgba(28, 209, 252, 0.55);
  }
}

.bundle {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-6);
  padding: var(--s-5) var(--s-6);
  background-color: var(--surface-raised);
  background-image: var(--panel);
  border: 1px solid rgba(28, 209, 252, 0.18);
  border-radius: var(--r-lg);
  box-shadow: var(--highlight), 0 0 28px -6px rgba(28, 209, 252, 0.18);
  animation: bundle-breathe 2400ms ease-in-out infinite alternate;
}

.bundle__media {
  display: block;
  width: 96px;
  height: 96px;
  flex: none;
}

.bundle__img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--r-md);
  display: block;
}

.bundle__title {
  font-size: var(--fs-sect);
  font-weight: 800;
  letter-spacing: -0.3px;
  line-height: 1.25;
  text-wrap: balance;
}

.bundle__sub {
  margin-top: var(--s-1);
  color: var(--text-muted);
  font-size: var(--fs-meta);
  line-height: 1.5;
}

.bundle__offer {
  display: grid;
  justify-items: end;
  gap: var(--s-3);
  text-align: right;
}

.bundle__price {
  font-family: var(--font-price);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
}

.bundle__was {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--danger);
  text-decoration: line-through;
}

@media (max-width: 720px) {
  .bundle {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: var(--s-4);
    padding: var(--s-5);
  }

  .bundle__offer {
    width: 100%;
    justify-items: start;
    text-align: left;
  }

  .bundle__btn {
    width: 100%;
  }
}

/* --- Mobile buy bar --- */

.buybar {
  display: none;
}

@media (max-width: 1024px) {
  .pd {
    grid-template-columns: 1fr;
    gap: var(--s-10);
  }

  .buypanel {
    position: static;
  }

  .buybar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-3) var(--s-4);
    padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
    background: rgba(7, 11, 24, 0.92);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--border);
    transform: translateY(115%);
    transition: transform var(--t-ui) var(--ez);
  }

  .buybar.is-in {
    transform: translateY(0);
  }

  .buybar__price {
    font-family: var(--font-price);
    flex: none;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -1px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
  }

  .buybar .btn {
    flex: 1;
  }
}

/* --------------------------------------------------------------------------
   18. Video
   -------------------------------------------------------------------------- */

.video {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-raised);
}

.video iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* --------------------------------------------------------------------------
   19. FAQ — details/summary, works with JS off, animates with it on
   The answer sits in a grid whose row goes 0fr -> 1fr, which is the only way to
   transition to auto height. faq.js delays removing the open attribute so the
   collapse animates too; without JS the browser just snaps, which is fine.
   -------------------------------------------------------------------------- */

.faq {
  border-top: 1px solid var(--border);
  max-width: var(--prose);
  margin-inline: auto;
}

.faq__item {
  border-bottom: 1px solid var(--border);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 44px;
  padding: var(--s-5) 0;
  cursor: pointer;
  font-weight: 650;
  font-size: 16px;
  list-style: none;
  transition: color var(--t-hover) var(--ez);
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q:hover {
  color: var(--brand-cyan);
}

.faq__sign {
  flex: none;
  width: 18px;
  height: 18px;
  stroke: var(--brand-cyan);
  transition: transform var(--t-fade) var(--ez);
}

.faq__item[open] .faq__sign {
  transform: rotate(180deg);
}

/* Collapsed by default; the row expands to content height on open. */
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-fade) var(--ez);
}

.faq__item[open] .faq__a,
.faq__item[data-closing] .faq__a {
  grid-template-rows: 1fr;
}

/* While closing, JS holds the open attribute and sets data-closing, so this
   collapses instead of snapping shut. */
.faq__item[data-closing] .faq__a {
  grid-template-rows: 0fr;
}

.faq__a > div {
  overflow: hidden;
  min-height: 0;
}

.faq__a p {
  padding-bottom: var(--s-6);
  color: var(--text-muted);
  text-wrap: pretty;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 300ms var(--ez) 60ms, transform 300ms var(--ez) 60ms;
}

.faq__item[open] .faq__a p {
  opacity: 1;
  transform: none;
}

.faq__item[data-closing] .faq__a p {
  opacity: 0;
  transform: translateY(-4px);
  transition-delay: 0ms;
}

/* Terms bullet lists. */
.tos li {
  position: relative;
  padding-left: var(--s-5);
  color: var(--text-muted);
  text-wrap: pretty;
}

.tos li + li {
  margin-top: var(--s-2);
}

.tos li b {
  color: var(--text);
  font-weight: 650;
}

.tos li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-cyan));
}

/* --------------------------------------------------------------------------
   20. Forms
   -------------------------------------------------------------------------- */

.form {
  display: grid;
  gap: var(--s-5);
  max-width: 560px;
}

.field {
  display: grid;
  gap: var(--s-2);
}

.field__label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--text-muted);
}

.field__req {
  color: var(--brand-cyan);
  margin-left: var(--s-1);
}

.field input,
.field textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  box-shadow: var(--highlight);
  transition: border-color var(--t-hover) var(--ez),
    background-color var(--t-hover) var(--ez);
}

.field textarea {
  min-height: 148px;
  resize: vertical;
  line-height: 1.6;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-muted);
}

.field input:hover,
.field textarea:hover {
  border-color: var(--border-strong);
}

.field input:focus,
.field textarea:focus {
  background: var(--surface-raised);
  border-color: rgba(28, 209, 252, 0.38);
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--danger);
}

.field__error {
  color: var(--danger);
  font-size: var(--fs-meta);
}

.field__error:empty {
  display: none;
}

.form__status {
  font-size: 15px;
  text-wrap: pretty;
}

.form__status:empty {
  display: none;
}

.form__status[data-state="success"] {
  color: var(--brand-cyan);
}

.form__status[data-state="error"] {
  color: var(--danger);
}

/* --------------------------------------------------------------------------
   21. Cards / contact
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

@media (max-width: 860px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

.card {
  padding: var(--s-8);
  background-color: var(--surface);
  background-image: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--highlight);
}

.card__title {
  font-size: var(--fs-sect);
  font-weight: 650;
  letter-spacing: -0.3px;
  margin-bottom: var(--s-3);
}

.card + .card {
  margin-top: var(--s-4);
}

/* Border-separated columns, not cards. */
.cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.col {
  padding: 0 var(--s-8);
  border-left: 1px solid var(--border);
}

.col:first-child {
  border-left: 0;
  padding-left: 0;
}

.col:last-child {
  padding-right: 0;
}

.col__title {
  margin-top: var(--s-5);
  margin-bottom: var(--s-4);
}

@media (max-width: 860px) {
  .cols {
    grid-template-columns: 1fr;
  }

  .col {
    border-left: 0;
    border-top: 1px solid var(--border);
    padding: var(--s-8) 0 0;
  }

  .col:first-child {
    border-top: 0;
    padding-top: 0;
  }
}

/* --------------------------------------------------------------------------
   22. CTA band
   -------------------------------------------------------------------------- */

.cta-band {
  position: relative;
  border-top: 1px solid var(--border);
  background: linear-gradient(
    140deg,
    var(--brand-deep) 0%,
    var(--brand-blue) 62%,
    var(--brand-blue-deep) 100%
  );
}

.cta-band__inner {
  padding-block: var(--s-20);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-8);
}

.cta-band__inner p {
  margin-inline: auto;
}

.cta-band .btn-row {
  justify-content: center;
}

.cta-band .h2,
.cta-band p {
  color: #fff;
}

.cta-band p {
  margin-top: var(--s-3);
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.86);
}

.cta-band .btn--ghost {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.cta-band .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
  color: #fff;
}

.cta-band .btn--primary {
  background: #fff;
  color: var(--brand-blue-deep);
  box-shadow: none;
}

.cta-band .btn--primary:hover {
  background: #f0f4ff;
  color: var(--brand-blue-deep);
}

.cta-band .btn--primary::after {
  display: none;
}

.cta-band :focus-visible {
  outline-color: #fff;
}

/* --------------------------------------------------------------------------
   23. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--border);
  padding-block: var(--s-16) var(--s-10);
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: var(--s-10);
}

@media (max-width: 760px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer__brand {
    grid-column: 1 / -1;
  }
}

.footer__brand img {
  width: 44px;
  height: 24px;
  object-fit: contain;
}

.footer__blurb {
  margin-top: var(--s-4);
  color: var(--text-muted);
  font-size: var(--fs-meta);
  max-width: 34ch;
  text-wrap: pretty;
}

.footer__heading {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: var(--s-4);
}

.footer__list li + li {
  margin-top: var(--s-1);
}

.footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--fs-meta);
}

.footer__list a:hover {
  color: var(--brand-cyan);
}

.footer__social {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-6);
}

/* Real brand colours, each measured against --base:
     Discord #5865F2 4.26:1, YouTube #FF0000 4.91:1 — both clear 3:1.
     X's brand colour is black, 1.07:1 here and effectively invisible, so X
     renders in --text (18.80:1). Colour is set per-icon below. */
.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  transition: border-color var(--t-hover) var(--ez),
    background-color var(--t-hover) var(--ez);
}

.footer__social a:hover {
  border-color: rgba(28, 209, 252, 0.38);
  background: rgba(18, 70, 242, 0.12);
}

.footer__social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.footer__social a[data-brand="discord"] {
  color: #5865f2;
}

.footer__social a[data-brand="youtube"] {
  color: #ff0000;
}

.footer__social a[data-brand="x"] {
  color: var(--text);
}

.footer__base {
  margin-top: var(--s-16);
  padding-top: var(--s-6);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  color: var(--text-muted);
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   24. 404
   -------------------------------------------------------------------------- */

.notfound {
  min-height: 58vh;
  display: flex;
  align-items: center;
  padding-block: var(--s-24);
}

/* --------------------------------------------------------------------------
   25. Motion — staggered reveal only
   -------------------------------------------------------------------------- */

html.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--t-reveal) var(--ez),
    transform var(--t-reveal) var(--ez);
  transition-delay: var(--reveal-delay, 0ms);
}

html.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   26. Reduced motion — everything stops, nothing disappears
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
    scroll-behavior: auto !important;
  }

  html.js .reveal,
  html.js .reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .bundle {
    animation: none;
    border-color: rgba(28, 209, 252, 0.55);
    box-shadow: var(--highlight), 0 0 28px -6px rgba(28, 209, 252, 0.55);
  }

  /* The marquee becomes a static wrapped grid, not a frozen overflowing strip. */
  .rmarquee {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .rmarquee__track {
    animation: none;
    transform: none;
    width: auto;
    flex-wrap: wrap;
  }

  .rmarquee__group {
    display: contents;
  }

  .rmarquee .review {
    width: auto;
    min-width: 280px;
    flex: 1 1 280px;
    margin-right: 0;
  }

  .rmarquee__group--clone {
    display: none;
  }

  /* Aurora freezes mid-drift; the vignette and grid never moved. */
  .site-bg__aurora {
    animation: none;
    transform: translate3d(3vw, 3vh, 0) scale(1.1);
  }

  /* Carousel stays manual and fully visible. */
  .ffcar__slide {
    transition: none;
  }

  /* No sweep, no lift. */
  .btn--primary::after,
  .btn--cyan::after,
  .btn--robux::after,
  .btn--crypto::after {
    display: none;
  }

  .btn--primary:hover,
  .btn--ghost:hover,
  .btn--cyan:hover,
  .btn--robux:hover,
  .btn--crypto:hover,
  .stat:hover,
  .pcard:hover {
    transform: none;
  }

  .pcard:hover .pcard__media img {
    transform: none;
  }

  /* Sparkline renders complete rather than drawing itself in. */
  

  .buybar {
    transition: none;
  }

  html.js .spark__dot::after {
    animation: none;
  }

  /* The FAQ still opens and closes; it just does not animate, and the answer
     is never left faded out. */
  .faq__a,
  .faq__a p,
  .faq__sign {
    transition: none;
  }

  .faq__item[open] .faq__a {
    grid-template-rows: 1fr;
  }

  .faq__item[open] .faq__a p {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   27. Nav grid on small screens, chart reveal under reduced motion
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  /* Column 2 leaves the flow (the dropdown); the pill is brand | burger. */
  .nav {
    grid-template-columns: 1fr auto;
  }

  .nav__end .nav__cta {
    display: none;
  }

  .nav__menu-cta {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {

}